/* Young Oendo — site polish overrides (loaded on every page). */

/* ---------- 1. header cart hover-preview: BM's own JS never hides it here ---------- */
.cart-box .hover-pop-box.min-cart-box { display: none !important; }
.cart-box:hover .hover-pop-box.min-cart-box { display: block !important; }
.right-box .hover-pop-box { max-width: 320px; }

/* ---------- 2. small-screen grid safety ---------- */
@media (max-width: 480px) {
  .pgrid { gap: 14px 10px !important; }
}

/* ================= 3. header nav — Island Footwear look =================
   Black strip, title-case white labels with chevrons, white mega panel with
   link columns (thin dividers) + promo image tile on the right.           */
.head-menu { position: relative; background: #111 !important;  /* the nav must outrank page content: it is position:relative with no z-index, so any
     positioned element inside the grid (product badges, the compare pills) painted over it
     as soon as the page scrolled and the nav sat on top of the cards. */
  z-index: 40; }
.head-menu-inner { background: #111 !important; }
#js-menu { height: auto !important; }

#js-menu .menu-link {
  color: #fff !important;
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  padding: 14px 13px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: none !important;
}
#js-menu .menu-link:hover { opacity: .78; }
#js-menu .menu-item.yo-active > .menu-link {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}
#js-menu .menu-list { display: flex !important; align-items: center; justify-content: center; flex-wrap: nowrap; }
.yo-caret { width: 13px; height: 13px; opacity: .9; flex: 0 0 auto; }

/* ---------- mega panel ---------- */
#yo-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid #e7e5e1;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 900;
}
#yo-menu-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
#yo-menu-panel .yo-panel-inner { max-width: 1340px; margin: 0 auto; padding: 30px 22px 34px; }
#yo-menu-panel .menu-sub { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
#yo-menu-panel .menu-sub-list { list-style: none; padding: 0 34px; border-right: 1px solid #e7e5e1; }
#yo-menu-panel .menu-sub-list:first-child { padding-left: 0; }
#yo-menu-panel .top-link { margin: 0 0 16px; }
#yo-menu-panel .top-link a { color: #111; text-decoration: none; font-size: 1rem; font-weight: 500; }
#yo-menu-panel .top-link a:hover { text-decoration: underline; }
#yo-menu-panel .top-item-list { display: flex; flex-direction: column; gap: 11px; }
#yo-menu-panel .item-link {
  color: #3a3a3a; text-decoration: none; font-size: .95rem; line-height: 1.2;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
#yo-menu-panel .item-link:hover { color: #000; text-decoration: underline; }
.yo-sw { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.22); display: inline-block; flex: 0 0 auto; }

/* promo tile */
#yo-menu-panel .yo-promo { border-right: none; margin-left: auto; padding: 0 0 0 34px; }
.yo-promo-tile { position: relative; display: block; width: 330px; height: 290px; overflow: hidden; }
.yo-promo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.yo-promo-tile:hover img { transform: scale(1.04); }
.yo-promo-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 58%);
}
.yo-promo-cap { position: absolute; left: 22px; bottom: 22px; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 13px; }
.yo-promo-cap strong { font-size: 1.15rem; font-weight: 700; letter-spacing: .05em; }
.yo-promo-btn {
  border: 1px solid #fff; padding: 9px 20px; align-self: flex-start;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.yo-promo-tile:hover .yo-promo-btn { background: #fff; color: #111; }

/* ---------- mobile drawer (Bruno Marc's own menu JS never binds on our domain,
   so nav-menu.js drives it: hamburger opens, close button shuts, tap a parent
   to expand). BM hides the drawer at the 1024px breakpoint — match it here. ---------- */
@media (max-width: 1024px) {
  #js-menu-list .menu-item.yo-mopen > .menu-sub-wrap { display: block !important; padding: 4px 0 6px 14px; }
  #js-menu-list .menu-item.yo-mopen > .menu-link { font-weight: 700; }
  #js-menu-list .menu-item.yo-mopen > .menu-link .yo-caret { transform: rotate(180deg); }
  /* stack the mega-menu columns vertically inside the narrow drawer */
  #js-menu-list .menu-sub-wrap .menu-sub { display: block !important; }
  #js-menu-list .menu-sub-wrap .menu-sub-list { border-right: none !important; padding: 0 0 14px !important; max-width: none !important; min-width: 0 !important; }
  #js-menu-list .menu-sub-wrap .menu-sub-list + .menu-sub-list { margin-left: 0 !important; }
  #js-menu-list .menu-sub-wrap .menu-sub-list-img { display: none !important; }   /* promo tile too big here */
  #js-menu-list .menu-sub-wrap .top-link { margin-bottom: 8px; }
  #js-menu-list .menu-sub-wrap .top-item-list { gap: 9px; }
  .yo-caret { width: 12px; height: 12px; }
  #yo-menu-panel { display: none !important; }
  .mobile-menu.show-menu { transform: translateX(0) !important; }
  body.yo-drawer-open { overflow: hidden; }
}


/* ---------- footer, in the layout the owner sent ---------- */
.yo-footer{background:#fff;color:#111;border-top:1px solid #eee;padding:56px 0 40px;font-family:inherit}
.yo-f-wrap{max-width:1400px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.yo-f-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:48px 40px;align-items:start}
@media (max-width:1024px){ .yo-f-top{grid-template-columns:1fr 1fr;gap:40px 32px} }
@media (max-width:640px){ .yo-f-top{grid-template-columns:1fr;gap:34px} }
.yo-f-col h4{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 20px;color:#111}
.yo-f-col ul{list-style:none;margin:0;padding:0}
.yo-f-col li{margin:0 0 13px}
.yo-f-col a{color:#3f3f3f;text-decoration:none;font-size:14.5px;line-height:1.5;font-weight:300}
.yo-f-col a:hover{color:#111;text-decoration:underline;text-underline-offset:3px}
.yo-f-sub{font-size:14.5px;line-height:1.65;color:#3f3f3f;font-weight:300;margin:0 0 22px;max-width:330px}
.yo-f-sub b{font-weight:600;color:#111}
.yo-f-lab{display:block;font-size:13px;color:#3f3f3f;margin:0 0 8px}
.yo-f-news input[type=email]{width:100%;max-width:330px;height:52px;border:1px solid #d9d9d9;
  border-radius:0;padding:0 52px 0 16px;font-size:14.5px;font-family:inherit;color:#111;background:#fff;
  box-sizing:border-box;outline:none}
.yo-f-news input[type=email]:focus{border-color:#111}
.yo-f-news form,.yo-f-news .yo-f-field{position:relative;max-width:330px}
.yo-f-news button{position:absolute;right:0;top:0;height:52px;width:52px;border:0;background:none;
  color:#e8552b;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.yo-f-news button:hover{color:#c8410f}
.yo-f-news button.btn-join,.yo-f-news .btn-main{position:static !important;width:auto !important;
  height:52px !important;padding:0 26px !important;background:#111 !important;color:#fff !important;
  border-radius:0 !important;font-size:13px !important;font-weight:700 !important;letter-spacing:.06em}
.yo-f-bottom{margin-top:56px;padding-top:30px;border-top:1px solid #eee;display:grid;
  grid-template-columns:0.7fr 1.9fr 1.4fr;gap:32px 40px;align-items:start}
@media (max-width:900px){ .yo-f-bottom{grid-template-columns:1fr;gap:26px} }
.yo-f-follow h4,.yo-f-pay h4{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 14px}
.yo-f-soc{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.yo-f-soc a{display:inline-flex;align-items:center;justify-content:center;color:#111}
.yo-f-soc svg,.yo-f-soc img{width:22px;height:22px;display:block;filter:grayscale(1)}
.yo-f-soc a:hover{opacity:.6}
.yo-f-pays{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* the marks keep their own inline height/width attributes from the old footer, so this needs
   !important to bring them all to one size; then nine of them fit on a single row */
.yo-f-pays img{height:18px !important;width:auto !important;max-height:18px !important;display:block}
.yo-f-legal{font-size:12px;line-height:1.7;color:#8c8c8c;text-align:right}
/* one line on a desktop, where there is room; allowed to wrap on a phone, where there is not */
@media (min-width:901px){ .yo-f-legal{white-space:nowrap} }
@media (max-width:900px){ .yo-f-legal{text-align:left} }
.yo-f-legal span{color:#b3b3b3}

/* the VAT note now sits with the payment information rather than in the legal line */
.yo-f-vat{font-size:12.5px;line-height:1.6;color:#8c8c8c;margin:12px 0 0;max-width:520px}


/* ---------- footer, in the layout the owner sent (celliniuomo.com) ---------- */
.yo-news-band{background:#fff;padding:52px 20px;text-align:center;border-top:1px solid #eee}
.yo-news-inner{max-width:640px;margin:0 auto}
.yo-news-band h2{font-size:22px;font-weight:400;letter-spacing:.3px;margin:0 0 10px;color:#111}
.yo-news-band p{font-size:14.5px;line-height:1.6;color:#5c5c5c;margin:0 0 22px}
.yo-news-band form{display:flex;gap:0;justify-content:center;max-width:460px;margin:0 auto}
.yo-news-band .yo-f-lab{position:absolute;left:-9999px}
.yo-news-band input[type=email]{flex:1 1 auto;min-width:0;height:50px;border:1px solid #111;border-right:0;
  padding:0 16px;font-size:14.5px;font-family:inherit;color:#111;background:#fff;outline:none}
.yo-news-band button{height:50px;padding:0 26px;border:1px solid #111;background:#111;color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.06em;cursor:pointer;font-family:inherit}
.yo-news-band button:hover{background:#333}
.yo-news-band .yo-f-msg{font-size:13px;margin-top:10px}

.yo-footer-dark{background:#000 !important;color:rgba(255,255,255,.75);padding:40px 0 18px;border-top:0}
.yo-footer-dark .yo-f-wrap{max-width:1400px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.yo-f-dark-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px 48px;align-items:start}
@media (max-width:900px){ .yo-f-dark-top{grid-template-columns:1fr;gap:34px} }
.yo-f-dcol h2{font-size:18px;font-weight:400;letter-spacing:.6px;margin:0 0 12px;color:#fff}
.yo-f-dlinks{list-style:none;margin:0;padding:0}
.yo-f-dlinks li{margin:0}
.yo-f-dlinks a{display:inline-block;font-size:14px;line-height:25px;color:rgba(255,255,255,.75);
  text-decoration:none;font-weight:400}
.yo-f-dlinks a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.yo-f-dcont{font-size:14px;line-height:25px;color:rgba(255,255,255,.75);margin:0}
.yo-f-dcont strong{color:#fff;font-weight:700}
.yo-f-dcont a{color:rgba(255,255,255,.75);text-decoration:none}
.yo-f-dcont a:hover{color:#fff;text-decoration:underline}
.yo-f-dsoc{list-style:none;margin:14px 0 0;padding:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.yo-f-dsoc a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;color:#fff}
.yo-f-dsoc a:hover{background:#fff;color:#000;border-color:#fff}
.yo-f-dsoc svg,.yo-f-dsoc img{width:16px;height:16px;display:block;filter:grayscale(1) brightness(3)}
.yo-f-dsoc a:hover svg,.yo-f-dsoc a:hover img{filter:none}
.yo-f-dark-bottom{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.yo-f-clabel{display:block;font-size:13px;letter-spacing:.4px;color:rgba(255,255,255,.75);margin:0 0 6px}
.yo-f-cpill{display:inline-block;border:1px solid rgba(255,255,255,.4);padding:9px 16px;font-size:13px;
  color:#fff}
.yo-f-paywrap{text-align:right;max-width:640px}
@media (max-width:900px){ .yo-f-paywrap{text-align:left} }
.yo-f-dpays{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:flex-end}
@media (max-width:900px){ .yo-f-dpays{justify-content:flex-start} }
/* white chips: most of our marks are dark artwork that would vanish on black */
.yo-f-dpays li{background:#fff;border-radius:3px;padding:5px 9px;display:flex;align-items:center}
.yo-f-dpays img{height:16px !important;width:auto !important;max-height:16px !important;display:block}
.yo-f-dark-bottom .yo-f-vat{font-size:12px;line-height:1.6;color:rgba(255,255,255,.5);margin:12px 0 0}
.yo-f-copy{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.5);margin:16px 0 0;text-align:center}


/* ---------- country flags in the header switcher ----------
   The clone paints these from a --flags custom property; the rule that consumed it did not survive the
   move off Bruno Marc's servers, so the circles rendered empty. This paints them from our own copy of
   the flag files, which sit at vendor/bm/static/brunomarc/img/flags-normal/. */
/* !important because the clone's stylesheet paints these from a sprite of their own that did not
   survive the move off their servers, and it was overriding this and leaving the circles empty */
.site-flag-item::before,.js-country-list-item::before{content:"";display:inline-block;flex:0 0 auto;
  width:20px;height:14px;margin-right:8px;vertical-align:-2px;
  background-image:var(--flags) !important;background-size:cover !important;
  background-position:50% 50% !important;background-repeat:no-repeat !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.site-flag-item i,.js-country-list-item i{font-style:normal}

/* The country switcher's script recomputes --flags for the current country and produces
   url(.../flags-normalke.png) — the separator between directory and filename is lost in that join. The
   markup is correct; the script is not. Setting the value here, with !important so it also beats the
   inline custom property the script writes. */
.site-flag-item[data-country_code=KE],.js-country-list-item[data-country_code=KE]{
  --flags:url(vendor/bm/static/brunomarc/img/flags-normal/ke.png) !important}
.site-flag-item[data-country_code=US],.js-country-list-item[data-country_code=US]{
  --flags:url(vendor/bm/static/brunomarc/img/flags-normal/us.png) !important}
.site-flag-item[data-country_code=GB],.js-country-list-item[data-country_code=GB]{
  --flags:url(vendor/bm/static/brunomarc/img/flags-normal/gb.png) !important}


/* the footer's country/currency picker: a real control, not a static pill */
.yo-f-cpick{position:relative;display:inline-block}
.yo-f-cpick > button{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.4);
  background:none;color:#fff;font-size:13px;font-family:inherit;padding:9px 16px;cursor:pointer}
.yo-f-cpick > button:hover{border-color:#fff}
.yo-f-cpick > button svg{opacity:.8}
.yo-f-clist{position:absolute;bottom:calc(100% + 6px);left:0;min-width:210px;list-style:none;margin:0;
  padding:6px 0;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.3);display:none;z-index:300}
.yo-f-clist.on{display:block}
.yo-f-clist button{display:block;width:100%;text-align:left;border:0;background:none;color:#111;
  font-size:13.5px;font-family:inherit;padding:10px 16px;cursor:pointer}
.yo-f-clist button:hover{background:#f2f2f2}
.yo-f-clist button[aria-selected=true]{font-weight:700}
.yo-f-clist button[aria-selected=true]::after{content:" \2713";color:#2f6b3f}


/* The black footer must reach the bottom of the page. What actually follows </footer> in this clone is
   an empty subscribe-pop container, the cookie bar, a stray literal <php?> tag and Amazon's
   buy-with-prime box — the last of which renders as a light strip under the black. Body background goes
   black behind the footer, and the dead leftovers are retired. */
.yo-footer-dark{margin-bottom:0 !important}
#js-buy-with-prime-btn-box,#js-subscribe-pop{display:none !important}

/* the clone ships a stray literal <php?> tag after </footer>, which the parser treats as an empty inline
   element occupying a line — that was the light strip under the black footer. The tag is now removed from
   the markup; this covers it if one ever comes back. */
php,.yo-footer-after{display:none !important}

/* The body ends exactly at the footer, but <html> is ~34px taller, so the page scrolls past the footer
   and shows the default white canvas underneath — the white space at the bottom. The body's background is
   transparent, so painting html instead would turn the whole page black and the transparent placeholder
   images with it (tried once, reverted). Instead the footer's own black is bled downwards: 60px of extra
   padding cancelled by an equal negative margin — visually identical, but the black now covers the
   sliver the scroll can reach. */
.yo-footer-dark{margin-bottom:-60px !important;padding-bottom:78px !important}


/* ---------- recommendations from the owner's brief ---------- */
.yo-hero-copy{position:absolute;inset:0;min-height:400px;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;padding:0 clamp(20px,6vw,90px);pointer-events:none;z-index:5}
.yo-hero-copy h1{font-size:clamp(28px,4.4vw,58px);line-height:1.05;margin:0 0 14px;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.5);font-weight:400;letter-spacing:.01em}
.yo-hero-copy p{font-size:clamp(13px,1.15vw,17px);line-height:1.55;color:rgba(255,255,255,.94);margin:0 0 26px;
  max-width:520px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.yo-hero-btns{display:flex;gap:12px;flex-wrap:wrap;pointer-events:auto}
.yo-b{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid #fff;font-weight:600}
.yo-b-solid{background:#fff;color:#111}
.yo-b-solid:hover{background:#f0ece5}
.yo-b-ghost{background:rgba(0,0,0,.22);color:#fff;backdrop-filter:blur(2px)}
.yo-b-ghost:hover{background:rgba(0,0,0,.45)}

.yo-trust-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px;background:#111;color:#fff;
  padding:13px 20px;font-size:11.4px;letter-spacing:.16em;text-transform:uppercase}
.yo-trust-strip span{opacity:.92}

.yo-band{padding:62px 22px;max-width:1800px;margin:0 auto;box-sizing:border-box}
.yo-band h2{font-size:clamp(21px,2.2vw,30px);font-weight:400;letter-spacing:.01em;margin:0 0 8px;color:#111}
.yo-band-sub{font-size:15px;line-height:1.6;color:#6b6b6b;margin:0 0 30px;max-width:620px}
.yo-why{border-top:1px solid #ece9e3}
.yo-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 34px;margin-top:26px}
@media (max-width:900px){ .yo-why-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .yo-why-grid{grid-template-columns:1fr} }
.yo-why-cell h3{font-size:15.5px;margin:0 0 7px;font-weight:700;color:#111}
.yo-why-cell p{margin:0;font-size:14px;line-height:1.6;color:#666}
.yo-tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;
  background:#5C4033;color:#fff;font-size:13px;margin-bottom:12px}

.yo-care{background:#F5F5F0}
.yo-care-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
@media (max-width:900px){ .yo-care-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .yo-care-grid{grid-template-columns:1fr} }
.yo-care-card{display:block;background:#fff;padding:22px 20px;text-decoration:none;color:#111;
  border:1px solid #e8e2d8;transition:transform .25s ease,box-shadow .25s ease}
.yo-care-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.yo-care-card span{display:block;font-size:10.6px;letter-spacing:.15em;text-transform:uppercase;color:#a08d76;margin-bottom:10px}
.yo-care-card strong{display:block;font-size:16px;line-height:1.35;font-weight:400}
.yo-care-card em{display:block;margin-top:14px;font-size:12.6px;color:#5C4033;font-style:normal}

.yo-reviews{border-top:1px solid #ece9e3}
.yo-review-empty{background:#fbfaf7;border:1px dashed #ddd3c4;padding:26px 26px 28px;max-width:760px}
.yo-review-empty p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:#555}
.yo-review-empty p strong{color:#111}

.yo-shopper{background:#111;color:#fff}
.yo-shopper h2{color:#fff}
.yo-shopper .yo-band-sub{color:rgba(255,255,255,.66)}
.yo-shop-body{max-width:760px}
.yo-shop-step h3{font-size:19px;font-weight:400;margin:0 0 18px}
.yo-shop-opts{display:flex;flex-wrap:wrap;gap:10px}
.yo-shop-opts button{border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font:inherit;
  font-size:13.6px;padding:11px 18px;cursor:pointer}
.yo-shop-opts button:hover{background:#fff;color:#111;border-color:#fff}
.yo-shop-dots{margin-top:20px;display:flex;gap:7px}
.yo-shop-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.28)}
.yo-shop-dots i.on{background:#fff}
.yo-shop-reset{margin-top:16px;background:none;border:0;color:rgba(255,255,255,.6);font:inherit;
  font-size:12.6px;text-decoration:underline;cursor:pointer}
.yo-shop-out{font-size:14.6px;line-height:1.65;color:rgba(255,255,255,.8);margin:0 0 20px}
.yo-shopper .yo-b-solid{background:#fff;color:#111;border-color:#fff}

.yo-wa-float{position:fixed;right:20px;bottom:20px;z-index:400;display:flex;align-items:center;gap:11px;
  background:#25D366;color:#fff;text-decoration:none;padding:11px 17px 11px 13px;border-radius:999px;
  box-shadow:0 6px 22px rgba(0,0,0,.26);font-family:inherit}
.yo-wa-float:hover{background:#1ebe5b}
.yo-wa-ico{display:flex}
.yo-wa-txt{display:flex;flex-direction:column;line-height:1.25}
.yo-wa-txt strong{font-size:13.4px;font-weight:700}
.yo-wa-txt em{font-size:11.6px;font-style:normal;opacity:.92}
@media (max-width:640px){ .yo-wa-float{right:14px;bottom:14px;padding:11px;border-radius:999px}
  .yo-wa-txt{display:none} }


/* ---------- product extras (recommendations brief) ---------- */
.yo-notify{margin:22px 0 0;border:1px solid #e2d9cb;background:#fbf8f3;padding:18px 20px;max-width:560px}
.yo-notify-h{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.yo-notify-h strong{font-size:15px;color:#111}
.yo-notify-h span{font-size:13.6px;line-height:1.55;color:#666}
.yo-sizeguide{display:inline-block;margin:12px 0 0;font-size:13.4px;color:#5C4033;text-decoration:none}
.yo-sizeguide strong{text-decoration:underline;text-underline-offset:3px}
.yo-sizeguide:hover{color:#3f2c23}
.yo-ctl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:900px){ .yo-ctl-grid{grid-template-columns:repeat(2,1fr)} }
.yo-ctl-card{display:block;text-decoration:none;color:#111}
.yo-ctl-img{background:#f7f6f3;aspect-ratio:1/1;overflow:hidden;margin-bottom:11px}
.yo-ctl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.yo-ctl-card:hover .yo-ctl-img img{transform:scale(1.04)}
.yo-ctl-card strong{display:block;font-size:13.6px;font-weight:400;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yo-ctl-card em{display:block;font-style:normal;font-size:13.4px;font-weight:700;margin-top:4px}
.yo-mpesa-note{background:#eaf6ee;border-left:4px solid #25a35a;padding:13px 16px;margin:0 0 18px;
  font-size:13.8px;line-height:1.6;color:#204d33;max-width:820px}
.yo-mpesa-note strong{color:#12351f}

.goods-sizes{font-size:12.4px;color:#6b6b6b;margin-top:6px;letter-spacing:.01em}
.goods-sizes.none{color:#a39482;font-style:italic}


/* ---------- Our Story (the owner's brand document) ---------- */
.yo-story{background:#fff}
.yo-story-hero{background:#F5F5F0;padding:clamp(46px,7vw,92px) 22px clamp(38px,5vw,64px);text-align:center}
.yo-story-eyebrow{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#a08d76;margin-bottom:18px}
.yo-story-hero h1,.yo-story-hero h2{font-size:clamp(28px,4.6vw,56px);line-height:1.06;margin:0 auto 18px;max-width:15ch;
  font-weight:400;color:#111;letter-spacing:.005em}
.yo-story-sub{font-size:clamp(14px,1.5vw,18px);line-height:1.6;color:#6b6b6b;margin:0 auto;max-width:46ch;
  font-style:italic}
.yo-story-body{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) 22px clamp(20px,3vw,40px)}
.yo-story-body article{margin:0 0 clamp(34px,4.6vw,58px)}
.yo-story-label{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#5C4033;
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #ece7df}
.yo-story-body p{font-size:clamp(15.5px,1.15vw,17px);line-height:1.78;color:#333;margin:0 0 17px}
.yo-story-em{font-style:italic;color:#5C4033;font-size:clamp(16px,1.3vw,19px)}
.yo-story-close{background:#5C4033;color:#fff;text-align:center;padding:clamp(40px,6vw,74px) 22px}
.yo-story-close span{display:block;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:14px}
.yo-story-close strong{display:block;font-size:clamp(24px,3.6vw,44px);font-weight:400;letter-spacing:.02em}
@media (max-width:600px){ .yo-story-body{padding-left:20px;padding-right:20px} }


/* the story now sits directly under the page heading, so trim the double padding where they meet */
.yo-story-hero{margin-top:0}
h1 + .yo-story .yo-story-hero, .page-title + .yo-story .yo-story-hero{padding-top:clamp(38px,5vw,64px)}
.yo-story{padding-bottom:0}


/* ---------- nav fit + logo clamp (fixes the clipped "SAL" and the squeezed logo) ----------
   The uppercase restyle widened every nav label past its container. Keep the look, make it fit. */
.menu-item > .menu-link{font-size:12.5px !important;letter-spacing:.02em !important;
  padding-left:10px !important;padding-right:10px !important;white-space:nowrap}
@media (min-width:1200px){ .menu-item > .menu-link{font-size:13px !important;padding-left:13px !important;padding-right:13px !important} }
@media (min-width:1500px){ .menu-item > .menu-link{font-size:13.5px !important;padding-left:16px !important;padding-right:16px !important} }
.head-menu ul,.menu-list{justify-content:center;flex-wrap:nowrap;overflow:visible}
/* a flex parent must not be allowed to squeeze the wordmark */
header img[src*="logo"],.header img[src*="logo"],a[href$="index.html"] img,a[href="/"] img{
  width:auto !important;max-width:100%;height:auto;max-height:44px;object-fit:contain}