/* =====================================================================
   AYATOP 1.3.3 - polish layer (loads LAST, after home-refine.css)
   Why: style.css, premium.css and home-refine.css each restyled the same blocks, so some rules fought
   each other (light banners with gold text, lavender footer text, scrollbars on pill rows, two floating
   buttons, three stacked bars above the hero on phones). This file settles every conflict in one place.
   Breakpoints: phones <=760px, tablets 761-1100px, desktop >=1101px.
   ===================================================================== */

/* ---------- 0. Arabic text: letter-spacing breaks the joined letters, so it is switched off in RTL ---------- */
html[dir=rtl] body *{letter-spacing:normal!important}
html[dir=rtl] body :is(h1,h2,h3,h4,small,.ay-eb){text-transform:none}

/* ---------- 1. Section headings: one clean style (the 01/02/03 eyebrow is gone, an accent bar replaces it) ---------- */
.ay-sh{align-items:center;gap:12px}
.ay-sh h2{position:relative;display:block;padding-inline-start:16px;font-size:clamp(21px,2.4vw,30px);line-height:1.25}
.ay-sh h2::before{content:"";display:block;position:absolute;inset-block:.18em;inset-inline-start:0;width:5px;border-radius:5px;background:var(--ay-gold);letter-spacing:0}
.ay-sh a{flex:none;white-space:nowrap}
.ay-sec--deals .ay-sh h2::before{background:var(--ay-gold)}
@media (max-width:760px){
  .ay-sh{margin-bottom:14px}
  .ay-sh a{padding:7px 14px;font-size:12.5px}
}

/* ---------- 2. Promo banners (light cards): readable eyebrow, compact pill ---------- */
.ay-pb .ay-eb{color:var(--ay-g);letter-spacing:.08em}
.ay-pb a:last-child .ay-eb{color:#8A5A00}
.ay-pb .ay-pill{white-space:nowrap;font-size:13px;padding:7px 18px;line-height:1.3}
.ay-pb b{color:var(--ay-gd)}
@media (max-width:760px){
  .ay-pb{gap:12px}
  .ay-pb a{grid-template-columns:minmax(0,1fr) 92px;gap:12px;padding:18px 16px;min-height:0;border-radius:20px}
  .ay-pb b{font-size:19px;margin-bottom:10px}
  .ay-pb .ay-eb{font-size:11.5px}
  .ay-pb .ay-cut--img,.ay-pb .ay-cut{width:92px;height:92px}
  .ay-pb .ay-pill{padding:6px 14px;font-size:12.5px}
}

/* ---------- 3. Product cards ---------- */
.ay-pc-b{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.ay-pc-b .ay-bt{margin-top:auto}
/* category label: readable colour, sentence case, one line */
.ay-pc small{color:var(--ay-mu);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}
.ay-pc .ay-pr del{color:var(--ay-mu)}
.ay-pc h3{font-size:14px}
@media (max-width:760px){
  .ay-grid{gap:10px}
  .ay-pc{padding-bottom:12px;border-radius:18px}
  .ay-pc h3{font-size:13.5px;line-height:1.5}
  .ay-pc .ay-pr{font-size:16.5px}
  .ay-pc .ay-bt{font-size:13px;min-height:40px;margin-inline:10px;gap:6px}
  .ay-pc .ay-bt .ay-ic{width:17px;height:17px}
  .ay-pc h3,.ay-pc .ay-pr,.ay-pc small{padding-inline:10px}
}

/* ---------- 4. Benefits strip: tidy 2x2 grid with hairlines on phones ---------- */
@media (max-width:760px){
  .ay-bf{gap:1px;padding:0;overflow:hidden;background:var(--ay-ln)}
  .ay-bf div,.ay-bf div:first-child,.ay-bf div:nth-child(3){background:#fff;border:0;padding:12px;gap:10px;align-items:center;min-height:68px}
  .ay-bf i{width:36px;height:36px}
  .ay-bf b{font-size:13px;line-height:1.3}
  .ay-bf span{font-size:11.5px;line-height:1.35;color:var(--ay-mu)}
}

/* ---------- 5. Phones: one slim bar above the hero instead of three ---------- */
@media (max-width:760px){
  /* the shipping notice repeats the benefits strip; on the home page the nav band is replaced by the chips row (inner pages keep the nav band) */
  .ay-nt{display:none}
  body.home .wp-site-blocks .ay-nv,body.front-page .wp-site-blocks .ay-nv{display:none}
  .ay-nv .ay-w{gap:18px;height:46px}
  .ay-nv a{font-size:14px}
  .ay-chips{position:relative;background:#fff;border-bottom:1px solid var(--ay-ln);padding:10px 14px;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .ay-chips::-webkit-scrollbar{display:none}
  .ay-chips a{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 15px;background:var(--ay-bg);font-size:13.5px;line-height:1}
  .ay-chips a:active{background:var(--ay-gl)}
  .ay-chips .ay-chip-all{background:var(--ay-gd);border-color:var(--ay-gd);color:#fff;font-weight:600}
  .ay-chips .ay-ic{width:18px;height:18px}
  .ay-zone{margin-top:14px}
  .ay-hero{border-radius:20px}
}
/* no visible scrollbars on the desktop pill rows either */
.ay-nv .ay-w{scrollbar-width:none}
.ay-nv .ay-w::-webkit-scrollbar{display:none}

/* category drawer: extra menu links */
.ay-dr-m{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid var(--ay-ln)}
.ay-dr-m a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--ay-gl);color:var(--ay-gd);font-weight:600;font-size:13.5px}

/* ---------- 6. Floating WhatsApp button: smaller, low, never mid-screen ---------- */
@media (max-width:760px){
  .ay-wa{width:46px;height:46px;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline-end:14px}
  .ay-wa .ay-ic{width:24px;height:24px}
  .ay-fb{padding-bottom:84px}
}

/* ---------- 7. Footer ---------- */
.ay-fb{color:rgba(255,255,255,.72)}
.ay-ft .ay-fb a{color:rgba(255,255,255,.85)}
.ay-ft .ay-fb a:hover{color:var(--ay-gold-l)}
.ay-ft h4{letter-spacing:.1em}
@media (max-width:760px){
  .ay-ft{padding-top:28px}
  .ay-ft>.ay-w:first-child{grid-template-columns:1fr 1fr;gap:22px 16px}
  .ay-ft>.ay-w:first-child>.ay-fbrand{grid-column:1/-1}
  /* 3 link columns: the first is tall on the left, the other two stack on the right (no empty half-row) */
  .ay-ft>.ay-w:first-child>div:nth-child(2):nth-last-child(3){grid-row:span 2}
  .ay-ft h4{font-size:12.5px;margin-bottom:6px}
  .ay-ft a{padding:6px 0;font-size:14px}
  .ay-ft .ay-so a{padding:0}
  .ay-ft .ay-fp{margin-top:22px}
  .ay-fb .ay-w{flex-direction:column-reverse;align-items:center;text-align:center;gap:8px}
  .ay-fb span{justify-content:center;gap:16px}
}

/* =====================================================================
   1.3.4
   ===================================================================== */

/* ---------- header: one solid brand green from the very top (no lighter, washed-out band) ---------- */
.ay-hdw{background:var(--ay-g)}
/* notched phones: the safe-area strip above the page is green too, not the pale page colour */
:root{padding-top:0}
.ay-hdw{padding-top:env(safe-area-inset-top,0px)}
@media (min-width:761px){:root{padding-top:env(safe-area-inset-top,0px)}.ay-hdw{padding-top:0}}
.ay-hdw .ay-sr{box-shadow:0 4px 14px -6px rgba(0,0,0,.35)}

/* ---------- Featured collection (2nd banner): brand deep green instead of the cream/yellow ---------- */
.ay-pb a:last-child,.ay-pb a:last-child:hover{background:linear-gradient(135deg,#073D2D 0%,#0B6B4C 100%);border-color:transparent}
.ay-pb a:last-child b{color:#fff}
.ay-pb a:last-child .ay-eb{color:var(--ay-gold-l)}
.ay-pb a:last-child .ay-pill,.ay-pb a:last-child:hover .ay-pill{background:#fff;color:var(--ay-gd)}
.ay-pb a:last-child .ay-cut--img{border-color:rgba(255,255,255,.85)}

/* ---------- footer copyright bar: slim ---------- */
.ay-fb .ay-w{padding-block:10px;font-size:12.5px;line-height:1.5}
.ay-fb{border-top-width:1px}
@media (max-width:760px){
  .ay-fb{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .ay-fb .ay-w{padding-block:10px 4px;gap:2px;font-size:12px}
  .ay-fb span{gap:14px}
  .ay-ft .ay-fb a{padding:2px 0;font-size:12px}
}

/* =====================================================================
   1.3.5
   ===================================================================== */
/* air between the chip row and the hero (WordPress zeroes the first child's margin, so padding is used) */
main.ay-w{padding-top:14px}
@media (min-width:761px){main.ay-w{padding-top:18px}}
.ay-zone{margin-top:0}

@media (max-width:760px){
  /* hero text: smaller, so the photo (faces, product) stays visible */
  .ay-sl--img h1,.ay-sl--img h2{font-size:clamp(20px,5.6vw,24px);margin-bottom:4px}
  .ay-sl--img p{font-size:13px;line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ay-sl--img .ay-btn,.ay-hero .ay-btn{min-height:40px;padding:0 20px;font-size:13.5px}
  html .ay-hero .ay-sl .ay-sl-shade{background:linear-gradient(to top,rgba(4,36,27,.9) 0%,rgba(4,36,27,.55) 42%,rgba(4,36,27,0) 85%)}
  .ay-hero .ay-sl-copy{padding-bottom:34px!important}
  /* benefits: a little tighter */
  .ay-bf div,.ay-bf div:first-child,.ay-bf div:nth-child(3){padding:10px 12px;min-height:0}
  .ay-bf span{font-size:11px}
}

/* =====================================================================
   1.3.6 - sub-categories: desktop fly-out (home sidebar) + phone drawer accordion
   ===================================================================== */

/* ---- desktop sidebar: each row is a wrapper; the fly-out opens beside the sidebar ---- */
.ay-mk{position:relative;overflow:visible}
.ay-mk h3{border-radius:var(--ay-r) var(--ay-r) 0 0}
.ay-mk-i{flex:1;display:flex;min-height:0}
.ay-mk-i>a{flex:1}
.ay-fly{display:none;position:absolute;z-index:30;top:0;bottom:0;inset-inline-start:calc(100% - 6px);width:min(560px,calc(100vw - 340px));padding-inline-start:14px}
.ay-mk-i.has-fly:hover>.ay-fly,.ay-mk-i.has-fly:focus-within>.ay-fly{display:block}
.ay-mk-i.has-fly:hover>a,.ay-mk-i.has-fly:focus-within>a{background:var(--ay-gl);color:var(--ay-g)}
.ay-fly-in{height:100%;overflow:auto;background:#fff;border-radius:var(--ay-r);box-shadow:0 24px 60px -20px rgba(7,61,45,.45),0 0 0 1px var(--ay-ln);padding:20px 22px}
.ay-mk .ay-fly-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--ay-ln)}
.ay-fly-h b{font-size:17px;font-weight:800;color:var(--ay-gd)}
.ay-mk .ay-fly a{display:block;flex:none;margin:0;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;line-height:1.35;transform:none;color:var(--ay-ink);background:none}
.ay-mk .ay-fly a::after{content:none}
.ay-mk .ay-fly a:hover{background:var(--ay-gl);color:var(--ay-g);transform:none}
.ay-mk .ay-fly .ay-fly-h a{padding:6px 14px;border-radius:999px;background:var(--ay-gl);color:var(--ay-g);font-size:12.5px;font-weight:700;white-space:nowrap}
.ay-fly-l{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
/* arrow on rows that have a fly-out */
.ay-mk-i.has-fly>a::after{content:"›"}
[dir=rtl] .ay-mk-i.has-fly>a::after{content:"‹"}
@media (max-width:1100px){.ay-fly{display:none!important}}

/* ---- phone drawer: tap the arrow to open the sub-categories ---- */
.ay-dr-i{position:relative}
.ay-dr-i>a{padding-inline-end:56px}
.ay-dr-t{position:absolute;inset-block-start:6px;inset-inline-end:4px;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ay-mu);display:grid;place-items:center;cursor:pointer}
.ay-dr-t:hover,.ay-dr-t:focus-visible{background:var(--ay-gl);color:var(--ay-g)}
.ay-dr-t .ay-ic{width:20px;height:20px;transition:transform .2s}
.ay-dr-i.is-open .ay-dr-t .ay-ic{transform:rotate(180deg)}
.ay-dr-i.is-open>a{background:var(--ay-gl);color:var(--ay-gd)}
.ay-dr-sub{margin:2px 0 8px;padding-inline-start:58px;display:grid;gap:2px}
.ay-dr-sub[hidden]{display:none}
.ay-dr-l .ay-dr-sub a{min-height:42px;padding:6px 12px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ay-ink)}
.ay-dr-l .ay-dr-sub a:first-child{color:var(--ay-g);font-weight:700}
@media (prefers-reduced-motion:reduce){.ay-dr-t .ay-ic{transition:none}}