/* =====================================================================
   Al-Shibli — "organic luxury" theme (2026-10-09)
   Loaded AFTER style.css. Everything visual for the redesigned header,
   home page and footer lives here, so it can be tuned or rolled back
   in one place. Colours are checked for WCAG AA contrast.
   ===================================================================== */

:root{
  /* palette — gold is a FILL colour; gold-looking TEXT uses --gold-ink (4.7:1) */
  --olive-950:#18220F;
  --olive-100:#E7ECDB;
  --gold-ink:#8A6D00;
  --deep:#18220F;                 /* dark sections: topbar, journey, CTA, footer */
  --muted:#5A6549;                /* was #6E7A5E (4.0:1) -> 5.4:1 */
  --bg:#F6F2E8; --surface:#FFFDF8; --surface-2:#F3EEE2;
  --radius:16px; --radius-lg:24px; --radius-xl:32px;
  --shadow:0 1px 2px rgb(24 34 15/.05),0 8px 24px rgb(24 34 15/.07);
  --shadow-lg:0 2px 6px rgb(24 34 15/.06),0 24px 56px rgb(24 34 15/.14);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{
  --olive-950:#EEF3E4; --olive-100:#2A3520; --gold-ink:#E4C441; --deep:#0C1108;
  --muted:#A9B593; --bg:#141A0F; --surface:#1D2516; --surface-2:#242E1B;
}

/* ---------- base: bigger, calmer type (older buyers read on phones) ---------- */
html{font-size:106.25%}                       /* 17px */
@media (min-width:1024px){html{font-size:112.5%}}  /* 18px */
body{font-size:1rem;line-height:1.8;background:var(--bg)}
h1,h2,h3,h4{color:var(--olive-950)}
.wrap{max-width:1240px;padding-inline:clamp(16px,4vw,32px)}
section.block{padding-block:clamp(56px,8vw,96px)}
::selection{background:var(--oil-soft);color:#18220F}
:focus-visible{outline:3px solid var(--olive-700);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:100;background:var(--olive-700);color:#fff;
  padding:10px 16px;border-radius:10px;font-weight:700;transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:12px}

/* gold TEXT everywhere -> readable gold */
.sec-head .eyebrow,.flow::before,.stars,.packet-body .pr,.prod .pr,.map-open{color:var(--gold-ink)}

/* ---------- buttons ---------- */
.btn{min-height:48px;padding:10px 24px;font-size:1rem;letter-spacing:.2px;
  transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease),color .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-lg{min-height:56px;padding:12px 30px;font-size:1.06rem}
.btn-gold{background:var(--oil);color:#1D1800;box-shadow:0 8px 22px rgb(199 160 8/.32)}
.btn-gold:hover{background:#D4AD12;transform:translateY(-2px);box-shadow:0 12px 28px rgb(199 160 8/.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--olive-950)}
.btn-ghost:hover{border-color:var(--olive-500);background:var(--surface)}
.btn-wa{background:#25D366;color:#06301A}
.btn-wa-ghost{background:transparent;color:#fff;border:1.5px solid rgb(255 255 255/.4)}
.btn-wa-ghost:hover{background:#25D366;border-color:#25D366;color:#06301A}

/* live pulsing dot (season open) */
.live-dot{width:8px;height:8px;border-radius:50%;background:#7BC86C;display:inline-block;flex:0 0 auto;
  box-shadow:0 0 0 0 rgb(123 200 108/.6);animation:livePulse 2s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgb(123 200 108/0)}100%{box-shadow:0 0 0 0 rgb(123 200 108/0)}}

/* =====================================================================
   HEADER
   ===================================================================== */
.topbar{background:var(--deep);color:rgb(255 255 255/.86);font-size:.875rem}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.tb-season{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.tb-meta{display:flex;gap:20px;align-items:center}
.tb-meta a{color:#F3DE84;font-weight:700}
.tb-meta a:hover{color:#fff}

header.site{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);border-block-end:1px solid transparent;transition:box-shadow .25s,border-color .25s}
header.site.scrolled{box-shadow:0 6px 24px rgb(24 34 15/.08);border-block-end-color:var(--border)}
.nav{height:76px;gap:16px}
.brand .mark{width:46px;height:46px}
.brand .mark img{width:46px;height:46px;object-fit:contain;border-radius:12px}
.brand b{font-size:1.08rem;color:var(--olive-950)}
.brand{min-width:0;flex:1 1 auto}
.brand-txt{min-width:0}
.nav-actions{flex:none}
.brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.brand small{font-size:.8rem;color:var(--muted)}
.nav-links{margin-inline:auto;gap:4px}
.nav-links a{position:relative;background:none!important;color:var(--olive-800);font-weight:600;font-size:.98rem;padding:10px 14px;border-radius:10px}
.nav-links a::after{content:"";position:absolute;inset-inline:14px;inset-block-end:4px;height:2px;border-radius:2px;background:var(--oil);
  transform:scaleX(0);transition:transform .25s var(--ease)}
.nav-links a:hover{color:var(--olive-950)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--olive-950)!important}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn,.lang-btn{min-width:44px;height:44px}
.lang-btn{display:grid;place-items:center;padding:0 12px}
.nav-cta{min-height:44px;padding:8px 20px;font-size:.95rem}
.nav-cta.is-here{box-shadow:none}
.nav-cta-mobile{display:none!important}
.nav-links a.nav-cta-mobile{background:var(--oil)!important;color:#1D1800!important;border-radius:999px}
.menu-theme{display:none;align-items:center;gap:10px;background:none;border:0;border-block-end:1px solid var(--border);
  padding:14px 4px;font:inherit;font-weight:600;font-size:1.05rem;color:var(--olive-800);cursor:pointer;text-align:start;width:100%}

@media (max-width:1024px){
  .hamburger{display:grid}
  .nav-links{position:absolute;inset-block-start:100%;inset-inline:0;margin:0;display:none;flex-direction:column;gap:0;
    background:var(--surface);border-block-end:1px solid var(--border);box-shadow:0 18px 30px rgb(24 34 15/.12);padding:8px clamp(16px,4vw,32px) 20px}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 4px;border-block-end:1px solid var(--border);border-radius:0;font-size:1.05rem}
  .nav-links a::after{display:none}
  .nav-links a.active{color:var(--olive-700)!important}
  .nav-cta-mobile{display:flex!important;margin-block-start:14px;border:0!important;justify-content:center}
  header.site{position:sticky}
  header.site .nav{position:relative}
}
@media (max-width:640px){
  .nav-cta{display:none}
  .tb-meta span{display:none}
  .topbar-in{justify-content:center;gap:12px}
}
@media (max-width:420px){
  .tb-meta{display:none}
  .brand small{display:none}
  .nav{height:68px;gap:8px}
  .brand{gap:8px}
  .brand .mark,.brand .mark img{width:40px;height:40px}
  .brand b{font-size:.92rem}
  .nav-actions{gap:4px}
  .icon-btn,.lang-btn{min-width:40px;width:40px;height:40px;padding:0}
  .nav-actions .icon-btn:not(.hamburger){display:none}   /* dark-mode moves into the menu */
  .menu-theme{display:flex}
  .brand b{font-size:.98rem}
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero2{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(88px,9vw,120px)}
.hero2-bg{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(700px 420px at 12% 20%,rgb(199 160 8/.16),transparent 60%),
    radial-gradient(900px 520px at 90% 0%,rgb(94 126 56/.20),transparent 62%),
    linear-gradient(180deg,#EFE9DA 0%,var(--bg) 100%)}
[data-theme="dark"] .hero2-bg{background:radial-gradient(700px 420px at 12% 20%,rgb(228 196 65/.10),transparent 60%),
  radial-gradient(900px 520px at 90% 0%,rgb(143 179 90/.14),transparent 62%),linear-gradient(180deg,#10150C,var(--bg))}
.hero2-bg::after{content:"";position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgb(24 34 15/.10) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
.hero2-in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero2 .kicker{background:var(--surface);border:1px solid var(--border);color:var(--olive-800);box-shadow:var(--shadow);
  padding:6px 14px;font-size:.9rem;margin-block-end:22px}
.hero2 h1{font-size:clamp(2.1rem,4vw,3.25rem);font-weight:800;line-height:1.22;letter-spacing:-.3px;color:var(--olive-950);text-wrap:balance}
.hero2 .lede{color:var(--olive-800);font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.9;margin-block:22px 30px;max-width:50ch}
[data-theme="dark"] .hero2 .lede{color:var(--muted)}
.hero2 .cta-row{gap:14px}
.trust{display:flex;gap:0;margin:40px 0 0;padding:0}
.trust>div{display:flex;flex-direction:column-reverse;padding-inline:24px;border-inline-start:1px solid var(--border)}
.trust>div:first-child{padding-inline-start:0;border:0}
.trust dd{margin:0;font-family:var(--font-head);font-weight:800;font-size:1.75rem;line-height:1.2;color:var(--olive-950);font-variant-numeric:tabular-nums}
.trust dt{color:var(--muted);font-size:.9rem}

.hero2-art{position:relative}
.art-frame{position:relative;aspect-ratio:1/1;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);
  background:linear-gradient(145deg,#FBF8EF,var(--olive-100))}
.art-frame::after{content:"";position:absolute;inset:12px;border:1px solid rgb(255 255 255/.55);border-radius:calc(var(--radius-xl) - 10px);pointer-events:none}
.art-frame>img{width:100%;height:100%;object-fit:cover}
.art-frame.is-illus{display:grid;place-items:center}
[data-theme="dark"] .art-frame.is-illus{background:linear-gradient(145deg,#26301C,#18210F)}
.art-branch{width:86%;height:86%}
.art-logo{position:absolute;inset-block-start:22px;inset-inline-start:22px;width:84px;height:84px;object-fit:contain;
  border-radius:22px;background:#fff;padding:6px;box-shadow:var(--shadow)}
.hero2-art::before{content:"";position:absolute;inset:-18px -18px auto auto;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3DE84,#B08C06);opacity:.85;filter:blur(.5px);z-index:-1}
.float-card{position:absolute;inset-block-end:-26px;inset-inline-end:-18px;display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:12px 18px 12px 14px;box-shadow:var(--shadow-lg);
  color:inherit;max-width:min(330px,90%);transition:transform .25s var(--ease)}
.float-card:hover{transform:translateY(-3px)}
.fcard-ic{width:42px;height:42px;border-radius:12px;background:var(--olive-100);color:var(--olive-700);display:grid;place-items:center;flex:0 0 auto}
.fcard-ic svg{width:20px;height:20px}
.float-card b{display:block;font-size:.92rem;color:var(--olive-950);line-height:1.4}
.float-card small{display:block;color:var(--muted);font-size:.85rem}

@media (max-width:900px){
  .hero2-in{grid-template-columns:1fr}
  .hero2-copy{text-align:center}
  .hero2 .lede{margin-inline:auto}
  .hero2 .cta-row{justify-content:center}
  .trust{justify-content:center}
  .hero2-art{max-width:560px;width:100%;margin-inline:auto}   /* headline + order button stay first on phones */
  .art-frame{aspect-ratio:16/10}
  .float-card{position:relative;inset:auto;margin:-30px auto 0;width:fit-content;max-width:92%}
  .float-card:hover{transform:translateY(-3px)}
}
@media (max-width:560px){
  .hero2 .cta-row{flex-direction:column}
  .hero2 .cta-row .btn{width:100%}
  .trust>div{padding-inline:14px}
  .trust dd{font-size:1.4rem}
  .art-logo{width:64px;height:64px;border-radius:16px}
}

/* =====================================================================
   DELIVERY BAND (overlaps hero bottom)
   ===================================================================== */
.dband{position:relative;z-index:2;margin-block-start:-52px}
.dband-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));background:var(--surface);border:1px solid var(--border);
  border-radius:22px;box-shadow:var(--shadow-lg);padding:10px}
.dband-item{display:flex;align-items:center;gap:14px;padding:14px 18px}
.dband-item+.dband-item{border-inline-start:1px solid var(--border)}
.db-ic{width:48px;height:48px;border-radius:14px;background:var(--olive-100);display:grid;place-items:center;font-size:1.4rem;flex:0 0 auto}
.dband-item b{display:block;color:var(--olive-950);font-size:1rem;line-height:1.4}
.dband-item small{display:block;color:var(--muted);font-size:.88rem}
@media (max-width:760px){
  .dband-item+.dband-item{border-inline-start:0;border-block-start:1px solid var(--border)}
}

/* =====================================================================
   SECTION HEADINGS
   ===================================================================== */
.sec-head{margin-block-end:clamp(28px,4vw,44px);max-width:860px}
.sec-head p{max-width:62ch}
.sec-head.center p{margin-inline:auto}
.sec-head .eyebrow{font-size:1rem;letter-spacing:.4px}
.sec-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.3;margin-block-start:8px;color:var(--olive-950)}
.sec-head p{color:var(--muted);font-size:1.05rem;line-height:1.9}
.sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-row .sec-head{margin-block-end:28px}

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.packets2{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.packet2{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.packet2:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--olive-300)}
.p2-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(150deg,#F7F2E4,var(--olive-100));display:grid;place-items:center;color:var(--olive-500)}
.p2-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.packet2:hover .p2-img img{transform:scale(1.06)}
.p2-img svg{width:34%;opacity:.8}
.p2-body{padding:20px 20px 22px;text-align:center;display:flex;flex-direction:column;gap:6px;flex:1}
.p2-body h3{font-size:1.15rem;color:var(--olive-950)}
.p2-price{color:var(--muted);font-size:.95rem;margin-block-end:12px}
.p2-price b{font-family:var(--font-head);font-weight:800;font-size:1.7rem;color:var(--olive-950);font-variant-numeric:tabular-nums}
.p2-body .btn{margin-block-start:auto}
.packet2.oos .p2-img img{filter:grayscale(.8);opacity:.75}
.packet2 .oos-badge{inset-block-start:12px;inset-inline-end:12px;font-size:.8rem;padding:4px 12px}
@media (max-width:560px){
  .packets2{grid-template-columns:1fr 1fr;gap:14px}
  .p2-body{padding:14px 12px 16px}
  .p2-body h3{font-size:1rem}
  .p2-price b{font-size:1.35rem}
  .p2-body .btn{min-height:46px;padding-inline:10px;font-size:.95rem}
}

/* =====================================================================
   WHY US — BENTO
   ===================================================================== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:18px}
.bento-hero{grid-column:span 2;grid-row:span 2;position:relative;border-radius:26px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;
  min-height:420px;background:
    linear-gradient(180deg,rgb(24 34 15/.05) 20%,rgb(24 34 15/.88) 100%),
    var(--photo,none) center/cover no-repeat,
    radial-gradient(500px 300px at 80% 10%,rgb(199 160 8/.35),transparent 60%),
    linear-gradient(150deg,#4C6A2C,#18220F)}
.bh-in{padding:32px}
.bh-quote{font-family:Georgia,serif;font-size:4.2rem;line-height:.6;color:#F3DE84;display:block;margin-block-end:12px}
.bento-hero p{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.75;font-family:var(--font-head);font-weight:600;max-width:26ch;color:#fff}
.bento-hero b{display:block;margin-block-start:14px;color:#F3DE84;font-size:.95rem}
.bento-tile{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:26px;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.bento-tile:hover{border-color:var(--olive-300);transform:translateY(-3px);box-shadow:var(--shadow)}
.bt-ic{width:50px;height:50px;border-radius:15px;background:var(--olive-100);color:var(--olive-700);display:grid;place-items:center;margin-block-end:16px}
.bt-ic svg{width:24px;height:24px}
.bento-tile h3{font-size:1.12rem;margin-block-end:6px}
.bento-tile p{color:var(--muted);font-size:.97rem;line-height:1.8}
@media (max-width:980px){
  .bento{grid-template-columns:1fr 1fr}
  .bento-hero{grid-row:span 1;min-height:300px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bento-hero{grid-column:auto}
}

/* =====================================================================
   JOURNEY — dark timeline section
   ===================================================================== */
.journey{background:var(--deep);color:rgb(255 255 255/.8);padding-block:clamp(64px,9vw,110px);position:relative;overflow:hidden;
  margin-block:clamp(24px,4vw,48px)}
.journey::before{content:"";position:absolute;inset:0;background:
  radial-gradient(600px 300px at 85% 0%,rgb(199 160 8/.18),transparent 60%),
  radial-gradient(600px 300px at 10% 100%,rgb(94 126 56/.25),transparent 60%);pointer-events:none}
.journey .wrap{position:relative}
.journey .sec-head h2{color:#fff}
.journey .sec-head p{color:rgb(255 255 255/.72)}
.journey .sec-head .eyebrow{color:#E4C441}
.journey .sec-head .eyebrow::before{background:#E4C441}
.tline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;position:relative;counter-reset:none}
.tline::before{content:"";position:absolute;inset-inline:6%;inset-block-start:28px;height:2px;
  background:linear-gradient(90deg,transparent,rgb(228 196 65/.6),transparent)}
.tline li{position:relative;text-align:center;padding-inline:6px}
.tl-node{width:56px;height:56px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;position:relative;z-index:1;
  background:radial-gradient(circle at 35% 30%,#F3DE84,#C7A008);color:#1D1800;font-family:var(--font-head);font-weight:800;font-size:1.25rem;
  box-shadow:0 0 0 8px rgb(199 160 8/.14)}
.tline h3{color:#fff;font-size:1.12rem;margin-block-end:6px}
.tline p{color:rgb(255 255 255/.72);font-size:.96rem;line-height:1.8}
@media (max-width:760px){
  .tline{grid-template-columns:1fr;gap:6px}
  .tline::before{inset-inline-start:27px;inset-inline-end:auto;inset-block:28px 28px;width:2px;height:auto;
    background:linear-gradient(180deg,rgb(228 196 65/.7),rgb(228 196 65/.1))}
  .tline li{text-align:start;display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding-block-end:22px}
  .tl-node{grid-row:span 2;margin:0}
}

/* =====================================================================
   GALLERY + REVIEWS (marquees with a pause button)
   ===================================================================== */
.motion-btn{min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--olive-800);font-weight:700;font-size:.92rem;cursor:pointer;margin-block-end:28px}
.motion-btn:hover{border-color:var(--olive-500)}
.marquee.paused .marquee-track{animation-play-state:paused!important}
.gallery-marquee .ph{flex:0 0 300px;width:300px;height:225px;border-radius:20px;border:0;box-shadow:var(--shadow)}
.reviews2 .review{flex:0 0 340px;width:340px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:26px;
  box-shadow:none;position:relative}
.reviews2 .review::before{content:"“";position:absolute;inset-block-start:6px;inset-inline-end:20px;font-family:Georgia,serif;font-size:4.5rem;
  line-height:1;color:var(--oil);opacity:.35}
.reviews2 .review p{font-size:1rem;line-height:1.85;color:var(--text)}
.reviews2 .review .who{color:var(--olive-950);font-size:.95rem}
.reviews2 .stars{font-size:1.05rem;letter-spacing:3px}
@media (max-width:480px){
  .gallery-marquee .ph{flex-basis:230px;width:230px;height:172px}
  .reviews2 .review{flex-basis:280px;width:280px}
}

/* =====================================================================
   CTA BAND
   ===================================================================== */
.band2{display:grid;grid-template-columns:1.3fr auto;gap:32px;align-items:center;border-radius:30px;padding:clamp(32px,5vw,60px);
  color:#fff;position:relative;overflow:hidden;background:
    radial-gradient(500px 260px at 0% 0%,rgb(199 160 8/.30),transparent 60%),
    radial-gradient(rgb(255 255 255/.07) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(135deg,#2C3A1E,#18220F)}
.band2 h2{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem)}
.band2 p{color:rgb(255 255 255/.8);margin-block-start:10px;font-size:1.06rem;max-width:48ch}
.band2-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-sec{padding-block-end:0}
@media (max-width:820px){
  .band2{grid-template-columns:1fr;text-align:center}
  .band2 p{margin-inline:auto}
  .band2-actions{justify-content:center}
  .band2-actions .btn{flex:1 1 220px}
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact2{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:18px}
.c2-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:24px}
.c2-ic{width:46px;height:46px;border-radius:14px;background:var(--olive-100);color:var(--olive-700);display:grid;place-items:center;margin-block-end:8px}
.c2-ic svg{width:22px;height:22px}
.c2-card b{color:var(--olive-950);font-size:1.02rem}
.c2-val{color:var(--muted);font-size:.98rem;word-break:break-word}
a.c2-val:hover{color:var(--olive-700)}
.c2-main .c2-val{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--olive-950)}
.c2-actions{display:flex;gap:10px;margin-block-start:auto;padding-block-start:14px}
.c2-actions .btn{flex:1}
.c2-link{font-weight:700;color:var(--olive-700);margin-block-start:auto;padding-block-start:8px}
@media (max-width:1024px){.contact2{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.contact2{grid-template-columns:1fr}}
/* the old "follow us" block under contact is replaced by the footer socials */
#contact .socials-wrap{display:none}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer.site{position:relative;overflow:hidden;background:var(--deep);color:rgb(255 255 255/.78);
  padding-block:clamp(56px,7vw,84px) 22px;margin-block-start:clamp(40px,6vw,72px)}
[data-theme="dark"] footer.site{background:var(--deep)}
.foot-branch{position:absolute;inset-block-end:40px;inset-inline-start:-30px;width:min(360px,50vw);color:#3E5622;opacity:.22;pointer-events:none}
.made{display:inline-flex;align-items:center;gap:8px}
.made svg{width:16px;height:16px;color:#A9BE86}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1.2fr;gap:clamp(24px,4vw,48px);position:relative}
footer .fcol h4{color:#fff;font-size:1.05rem;margin-block-end:18px}
footer .fcol h4::after{background:#E4C441}
.foot-brand{display:flex!important;align-items:center;gap:12px;margin-block-end:14px;padding:0!important}
.foot-brand img{width:48px;height:48px;object-fit:contain;border-radius:12px;background:#fff;padding:4px}
.foot-brand b{color:#fff;font-family:var(--font-head);font-size:1.25rem}
footer .fabout p{color:rgb(255 255 255/.72);font-size:.98rem;line-height:1.9;max-width:38ch;margin-block-end:18px}
footer a{color:rgb(255 255 255/.8);font-size:.98rem;padding-block:6px}
footer a:hover{color:#F3DE84}
.fc-row{display:flex!important;align-items:center;gap:12px;padding-block:7px!important}
.fc-row .fc-ic{width:34px;height:34px;border-radius:10px;background:rgb(255 255 255/.07);display:grid;place-items:center;color:#E4C441;flex:0 0 auto;margin:0}
.fc-row .fc-ic svg{width:17px;height:17px}
.fc-row .fc-ic.wa{color:#25D366}
footer span.fc-row{color:rgb(255 255 255/.8)}
.hours-card{background:rgb(255 255 255/.06);border:1px solid rgb(255 255 255/.10);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:6px}
.hc-k{color:#E4C441;font-weight:700;font-size:.9rem;font-family:var(--font-head)}
.hours-card b{color:#fff;font-size:1.05rem;line-height:1.6}
.hc-season{display:flex;align-items:center;gap:8px;color:rgb(255 255 255/.72);font-size:.9rem}
.hours-card .btn{margin-block-start:12px;color:#1D1800!important;display:flex!important}
footer .social-ic{width:42px;height:42px;background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.14)}
footer .fine{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;margin-block-start:44px;
  padding-block-start:20px;border-block-start:1px solid rgb(255 255 255/.12);color:rgb(255 255 255/.6);font-size:.88rem;text-align:start}
footer .fine .to-top{display:inline;padding:0;font-size:.88rem}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  footer .fine{justify-content:center;text-align:center}
}

/* =====================================================================
   FLOATING WHATSAPP — real logo, label on desktop, safe distance from edges
   ===================================================================== */
.wa-float{width:auto;height:56px;padding-inline:16px 20px;gap:8px;border-radius:999px;display:flex;align-items:center;
  right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));background:#25D366;color:#fff;
  box-shadow:0 10px 28px rgb(37 211 102/.4),0 4px 10px rgb(0 0 0/.15)}
.wa-float svg{width:28px;height:28px}
.wa-lbl{font-weight:800;font-size:.98rem}
@media (max-width:760px){
  .wa-float{width:58px;height:58px;padding:0;justify-content:center}
  .wa-lbl{display:none}
}

/* =====================================================================
   MOTION — scroll reveal (only when JS is on) + reduced motion
   ===================================================================== */
.js-reveal [data-reveal]{opacity:0;translate:0 22px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.js-reveal [data-reveal].in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-reveal [data-reveal]{opacity:1;translate:none}
}

/* =====================================================================
   STEP 2 — CHECKOUT (order page)
   ===================================================================== */
.checkout,.trk-sec,.done-sec{padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,96px);
  background:radial-gradient(800px 360px at 90% -10%,rgb(94 126 56/.14),transparent 60%),var(--bg)}
.co-head{text-align:center;max-width:640px;margin:0 auto 28px}
.co-head h1{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800}
.co-head p{color:var(--muted);font-size:1.05rem;margin-block-start:8px}

/* stepper: 3 connected segments */
.co-steps{list-style:none;margin:0 auto 32px;padding:0;display:flex;max-width:560px}
.co-steps .st{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;color:var(--muted);font-weight:700;font-size:.92rem}
.co-steps .st::before{content:"";position:absolute;inset-block-start:17px;inset-inline-start:calc(-50% + 22px);inset-inline-end:calc(50% + 22px);
  height:3px;border-radius:3px;background:var(--border)}
.co-steps .st:first-child::before{display:none}
.co-steps .st.on::before,.co-steps .st.done::before{background:var(--olive-700)}
.co-steps .dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--border);
  font-family:var(--font-head);font-weight:800;color:var(--muted);transition:background .25s,border-color .25s,color .25s}
.co-steps .st.on{color:var(--olive-950)}
.co-steps .st.on .dot{background:var(--olive-700);border-color:var(--olive-700);color:#fff;box-shadow:0 0 0 6px rgb(62 86 34/.14)}
.co-steps .st.done .dot{background:var(--oil);border-color:var(--oil);color:#1D1800}

.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.co-panel{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:clamp(20px,3.4vw,36px);box-shadow:var(--shadow)}
.co-panel h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin-block-end:6px}
.co-hint{color:var(--muted);margin-block-end:20px}
.co-panel .dlv-grid{margin-block:18px 6px}
.co-back{background:none;border:0;color:var(--olive-700);font:inherit;font-weight:700;cursor:pointer;padding:6px 0;margin-block-end:8px;min-height:44px}
.co-back:hover{text-decoration:underline}
#dlvErr{margin-block-end:12px}
.co-panel .dlv-box{margin-block-start:18px}

/* products in step 1 */
.co-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.co-prod{position:relative;border:2px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface);cursor:pointer;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.co-prod:hover{border-color:var(--olive-300);transform:translateY(-2px)}
.co-prod.sel{border-color:var(--olive-700);box-shadow:0 0 0 4px rgb(62 86 34/.12)}
.co-prod.sel::after{content:"✓";position:absolute;inset-block-start:10px;inset-inline-end:10px;width:28px;height:28px;border-radius:50%;
  background:var(--olive-700);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem;z-index:2}
.cp-img{aspect-ratio:4/3;background:linear-gradient(150deg,#F7F2E4,var(--olive-100));display:grid;place-items:center;color:var(--olive-500);overflow:hidden;position:relative}
.cp-img img{width:100%;height:100%;object-fit:cover}
.cp-img svg{width:34%}
.cp-body{padding:14px 14px 16px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center}
.cp-name{font-family:var(--font-head);color:var(--olive-950);font-size:1.05rem}
.cp-price{color:var(--muted);font-size:.92rem}
.cp-price b{font-family:var(--font-head);font-size:1.35rem;color:var(--olive-950);font-variant-numeric:tabular-nums}
.co-prod.oos{opacity:.6;cursor:not-allowed}
.co-prod.oos:hover{transform:none;border-color:var(--border)}
.co-qty{margin-block-start:10px;gap:8px}
.co-qty button{width:44px;height:44px;border-radius:12px;font-size:1.3rem;background:var(--surface-2);border:1.5px solid var(--border);color:var(--olive-950);cursor:pointer}
.co-qty button:hover{border-color:var(--olive-500);background:var(--surface)}
.co-qty .qinput{width:58px;height:44px;text-align:center;font-family:var(--font-head);font-weight:800;font-size:1.15rem;border:1.5px solid var(--border);
  border-radius:12px;background:var(--surface);color:var(--olive-950);padding:0;-moz-appearance:textfield;appearance:textfield}
.co-qty .qinput::-webkit-inner-spin-button,.co-qty .qinput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qinput.bump{animation:bump .25s var(--ease)}
@keyframes bump{50%{transform:scale(1.15)}}
#noItemWarn{margin-block-start:16px}

/* step 3 */
.co-two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.co-remembered{background:var(--olive-100);color:var(--olive-800);border-radius:12px;padding:10px 14px;font-weight:600;margin-block:4px 16px}
.co-note{margin-block:4px 18px}
.co-note summary{cursor:pointer;color:var(--olive-700);font-weight:700;min-height:44px;display:flex;align-items:center;list-style:none}
.co-note summary::-webkit-details-marker{display:none}
.co-note[open] summary{margin-block-end:8px}
.co-review{border-block-start:1px dashed var(--border);padding-block-start:16px}
.rv-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-block:10px;border-block-end:1px dashed var(--border)}
.rv-k{display:block;color:var(--muted);font-size:.88rem}
.rv-v{display:block;color:var(--olive-950);font-weight:700}
.rv-v small{font-weight:500;color:var(--muted)}
.rv-edit{background:none;border:1px solid var(--border);border-radius:999px;padding:6px 14px;min-height:36px;color:var(--olive-700);font:inherit;font-weight:700;cursor:pointer;flex:none}
.rv-edit:hover{border-color:var(--olive-500)}
.rv-est{color:var(--muted);font-size:.88rem;margin-block-start:12px}

/* summary card */
.co-sum{position:sticky;inset-block-start:110px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:24px;box-shadow:var(--shadow-lg)}
.co-sum h3{font-size:1.15rem;margin-block-end:12px}
.cs-items{display:flex;flex-direction:column;gap:8px;padding-block-end:14px;border-block-end:1px dashed var(--border)}
.cs-item{display:flex;justify-content:space-between;gap:10px;font-size:.95rem}
.cs-item em{font-style:normal;color:var(--muted)}
.cs-item b{font-variant-numeric:tabular-nums}
.cs-empty{color:var(--muted);font-size:.92rem}
.cs-rows{padding-block:12px;display:flex;flex-direction:column;gap:6px}
.cs-row{display:flex;justify-content:space-between;color:var(--muted);font-size:.95rem}
.cs-row b{color:var(--olive-950)}
.cs-total{display:flex;justify-content:space-between;align-items:baseline;padding-block:14px;border-block-start:1px solid var(--border);margin-block-end:14px}
.cs-total span{font-weight:700;color:var(--olive-950)}
.cs-total b{font-family:var(--font-head);font-size:1.6rem;color:var(--olive-950);font-variant-numeric:tabular-nums}
.cs-note{color:var(--muted);font-size:.85rem;margin-block-start:12px;text-align:center}

@media (max-width:980px){
  .co-grid{grid-template-columns:1fr}
  /* the summary becomes a sticky bottom bar: total + next button */
  .co-sum{position:fixed;inset-inline:0;inset-block-end:0;inset-block-start:auto;z-index:60;border-radius:20px 20px 0 0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;
    box-shadow:0 -10px 30px rgb(24 34 15/.14)}
  .co-sum h3,.cs-items,.cs-rows,.cs-note{display:none}
  .cs-total{border:0;padding:0;margin:0;flex-direction:column;align-items:flex-start;gap:0}
  .cs-total span{font-size:.85rem;color:var(--muted);font-weight:600}
  .cs-total b{font-size:1.35rem}
  .co-sum .btn{width:auto;min-width:170px;min-height:52px;padding-inline:18px;font-size:1rem}
  .checkout{padding-block-end:120px}
  .page-order .wa-float{display:none}
}
@media (max-width:560px){
  .co-prods{grid-template-columns:1fr 1fr;gap:12px}
  .cp-body{padding:12px 8px 14px}
  .co-qty{gap:6px}
  .co-qty button{width:40px;height:40px}
  .co-qty .qinput{width:44px;height:40px}
  .co-two{grid-template-columns:1fr}
  .co-steps .lbl{font-size:.85rem}
  .co-sum .btn{min-width:0}
}

/* =====================================================================
   SUCCESS PAGE
   ===================================================================== */
.done-card{max-width:620px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:28px;
  padding:clamp(28px,5vw,48px);text-align:center;box-shadow:var(--shadow-lg)}
.done-check{width:96px;height:96px;margin:0 auto 14px;display:block}
.dc-ring{fill:rgb(62 86 34/.10);stroke:var(--olive-700);stroke-width:3;stroke-dasharray:227;stroke-dashoffset:227;animation:draw .7s var(--ease) forwards}
.dc-tick{fill:none;stroke:var(--olive-700);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .45s .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.dc-ring,.dc-tick{stroke-dashoffset:0}}
.done-card h1{font-size:clamp(1.7rem,3vw,2.2rem)}
.done-sub{color:var(--muted);margin-block-start:6px}
.done-no{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-block:22px 16px;padding:14px 28px;border-radius:18px;
  background:var(--surface-2);border:2px dashed var(--oil)}
.done-no span{font-family:var(--font-head);font-weight:800;font-size:2rem;letter-spacing:2px;color:var(--olive-950)}
.done-no .copy-btn{min-height:36px}
.done-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;color:var(--olive-800);margin-block-end:22px}
.dm-total b{font-family:var(--font-head);font-size:1.2rem;color:var(--olive-950)}
.done-wa{gap:10px;box-shadow:0 10px 26px rgb(37 211 102/.35)}
.done-wa:hover{background:#20bd5a;transform:translateY(-2px)}
.done-next{text-align:start;background:var(--surface-2);border-radius:20px;padding:20px 22px;margin-block:22px}
.done-next h2{font-size:1.1rem;margin-block-end:10px}
.done-next ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.done-next li{display:flex;gap:12px;align-items:flex-start}
.done-next li span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--olive-700);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.done-actions .btn{flex:1 1 180px}
.done-foot{color:var(--muted);font-size:.9rem;margin-block-start:16px}
.done-foot a{font-weight:700}

/* =====================================================================
   TRACKING PAGE
   ===================================================================== */
.trk-form{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:24px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr auto;gap:0 14px;align-items:end}
.trk-form .field{margin:0}
.trk-form .btn{min-height:50px}
.trk-err{grid-column:1/-1;margin:14px 0 0}
.trk-ok{max-width:720px;margin:16px auto 0;background:var(--olive-100);color:var(--olive-800);border-radius:14px;padding:12px 16px;font-weight:700}
.trk-card{max-width:720px;margin:24px auto 0;background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:clamp(20px,4vw,34px);box-shadow:var(--shadow-lg)}
.trk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-block-end:18px;border-block-end:1px solid var(--border)}
.trk-k{display:block;color:var(--muted);font-size:.88rem}
.trk-no{display:block;font-family:var(--font-head);font-size:1.6rem;letter-spacing:1px;color:var(--olive-950)}
.trk-date{color:var(--muted);font-size:.88rem}
.trk-h{font-size:1.1rem;margin-block:22px 14px}
/* public status badges (same colours as the back office) */
.trk-card .badge{display:inline-block;padding:6px 14px;border-radius:999px;font-weight:800;font-size:.9rem;white-space:nowrap}
.b-new{background:#FFF2BF;color:#5C4A00}.b-confirmed{background:#DCEAF7;color:#1E4468}.b-preparing{background:#F6E3C9;color:#6B4210}
.b-ready{background:#E2ECD3;color:#2E4219}.b-shipping{background:#D5EDF1;color:#145764}.b-delivered{background:#D6EBD3;color:#24532A}
.b-cancelled{background:var(--danger-bg);color:var(--danger)}
/* progress tracker: horizontal on desktop, vertical on phones */
.progress{list-style:none;margin:0;padding:0;display:flex}
.pg{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;position:relative}
.pg::before{content:"";position:absolute;inset-block-start:18px;inset-inline-start:calc(-50% + 22px);inset-inline-end:calc(50% + 22px);height:4px;border-radius:4px;background:var(--border)}
.pg:first-child::before{display:none}
.pg.done::before,.pg.current::before{background:var(--olive-700)}
.pg-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--border);
  font-weight:800;color:var(--muted);position:relative;z-index:1}
.pg.done .pg-dot{background:var(--olive-700);border-color:var(--olive-700);color:#fff}
.pg.current .pg-dot{background:var(--oil);border-color:var(--oil);color:#1D1800;box-shadow:0 0 0 7px rgb(199 160 8/.22)}
.pg-txt b{display:block;font-size:.9rem;color:var(--olive-950);line-height:1.4}
.pg.pending .pg-txt b{color:var(--muted);font-weight:500}
.pg-txt small{display:block;color:var(--muted);font-size:.8rem}
.trk-lines{display:flex;flex-direction:column}
.tl-row{display:flex;justify-content:space-between;gap:12px;padding-block:10px;border-block-end:1px dashed var(--border)}
.tl-row em{font-style:normal;color:var(--muted)}
.tl-row b{font-variant-numeric:tabular-nums;color:var(--olive-950)}
.tl-row .tl-txt{text-align:end;font-weight:600}
.tl-total{display:flex;justify-content:space-between;align-items:baseline;padding-block-start:14px}
.tl-total span{font-weight:700}
.tl-total b{font-family:var(--font-head);font-size:1.5rem;color:var(--olive-950)}
.trk-actions{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:22px}
.trk-actions>*{flex:1 1 200px}
.trk-actions form .btn{width:100%}
.trk-cancel{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
.trk-cancel:hover{background:var(--danger-bg);border-color:var(--danger)}
.trk-hint{text-align:center;margin-block-start:10px}
@media (max-width:700px){
  .trk-form{grid-template-columns:1fr;gap:14px}
  .progress{flex-direction:column;gap:0}
  .pg{flex-direction:row;text-align:start;gap:14px;padding-block-end:18px}
  .pg::before{inset-inline-start:18px;inset-inline-end:auto;inset-block-start:-18px;width:4px;height:22px}
}

/* =====================================================================
   TRANSPARENCY BADGES (2026-10-10) — only facts the owner entered
   ===================================================================== */
.badge-chips{list-style:none;margin:2px 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.badge-chips li{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--olive-100);
  color:var(--olive-800);font-size:.8rem;font-weight:700;line-height:1.5}
[data-theme="dark"] .badge-chips li{color:var(--olive-950)}
.co-badges{justify-content:flex-start;margin:-8px 0 18px}
.co-badges li{font-size:.85rem;padding:6px 12px}

.quality{padding-block-start:clamp(24px,4vw,48px)}
.q-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1000px;margin-inline:auto}
.q-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:28px 24px;text-align:center;
  overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.q-card::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:4px;background:var(--q,var(--olive-700))}
.q-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--olive-300)}
.q-cold{--q:#5B9BC9}.q-origin{--q:#5E7E38}
.q-card .q-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;font-size:1.9rem;
  background:color-mix(in srgb,var(--q) 14%,var(--surface))}
.q-card h3{font-size:1.2rem;margin-block-end:6px}
.q-card p{color:var(--muted);font-size:.98rem;line-height:1.8}

/* ---------- order page: all 4 tins in ONE row (owner request 2026-10-10) ---------- */
.co-prods{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.co-prod{border-radius:18px}
.co-prod.sel::after{width:24px;height:24px;font-size:.8rem;inset-block-start:8px;inset-inline-end:8px}
.cp-body{padding:12px 8px 14px}
.cp-name{font-size:.98rem;line-height:1.4}
.cp-price b{font-size:1.25rem}
.co-qty{gap:5px}
.co-qty button{width:38px;height:40px;border-radius:10px;font-size:1.2rem}
.co-qty .qinput{width:44px;height:40px;font-size:1.05rem;border-radius:10px}
.co-prod .oos-badge{font-size:.72rem;padding:3px 9px}
@media (max-width:640px){
  /* phones: 4 cards in one row would be too small to tap, so 2 × 2 */
  .co-prods{grid-template-columns:1fr 1fr}
}

/* ---------- tin photos: never cut the tin (owner screenshot 2026-10-10) ----------
   The whole photo fits inside the card (contain); a soft blurred copy of the same
   photo fills the empty sides so it still looks full and premium. */
.p2-img,.cp-img{aspect-ratio:1/1}
.p2-img.has-photo::before,.cp-img.has-photo::before{content:"";position:absolute;inset:-24px;background:var(--img) center/cover no-repeat;
  filter:blur(18px) saturate(1.15);opacity:.6;transform:scale(1.1)}
.p2-img.has-photo img,.cp-img.has-photo img{position:absolute;inset:0;z-index:1;object-fit:contain;width:100%;height:100%}
.packet2:hover .p2-img img{transform:scale(1.04)}
.p2-img .oos-badge,.cp-img .oos-badge{z-index:2}
.packet2.oos .p2-img.has-photo::before{filter:blur(18px) grayscale(1);opacity:.45}

/* ---------- hero location card: coloured so it stands out from the photo ---------- */
.float-card{background:linear-gradient(135deg,#2C3A1E,#18220F);border-color:transparent;color:#fff;
  box-shadow:0 14px 34px rgb(24 34 15/.35)}
.float-card b{color:#fff}
.float-card small{color:rgb(255 255 255/.72)}
.float-card .fcard-ic{background:var(--oil);color:#1D1800}
.float-card:hover{box-shadow:0 18px 40px rgb(24 34 15/.45)}

/* ---------- WhatsApp button on the emptier side: left in Arabic, right in English ---------- */
[dir="rtl"] .wa-float{right:auto;left:max(20px,env(safe-area-inset-left))}