/* ══════════════════════════════════════════════════════════════════════
   palmir × PalmPop — design layer
   "Sunlit Grove Minimalism": warm, few, exact colours on a pale creamy
   ground; one deep palm ink does the talking; a heavy warm serif for
   names and a quiet sans for facts. Loaded last, so it wins by order.
   ══════════════════════════════════════════════════════════════════════ */

/* Thmanyah — local files only (licence: no hosting / redistribution) */
@font-face{font-family:"TSD";src:url(fonts/thmanyahserifdisplay-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TSD";src:url(fonts/thmanyahserifdisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TSD";src:url(fonts/thmanyahserifdisplay-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TSD";src:url(fonts/thmanyahserifdisplay-Black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"TS";src:url(fonts/thmanyahsans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TS";src:url(fonts/thmanyahsans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TS";src:url(fonts/thmanyahsans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TS";src:url(fonts/thmanyahsans-Black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"TST";src:url(fonts/thmanyahseriftext-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TST";src:url(fonts/thmanyahseriftext-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------------------------------------------------------------- tokens */
:root,html[dir="rtl"]{
  /* PalmPop bases */
  --palm-900:#0E3A2C; --palm-700:#1E5A43;
  --sukkari-400:#E9A93A; --date-700:#6B3418; --caramel-500:#B8662C;
  --sand-50:#FBF4E8; --dune-100:#F6E3BF; --butter-100:#FBEFC9;
  --mint-100:#D5EEDF; --blush-100:#FFD9CC; --white:#FFFFFF;
  --ink-muted:#4F6B60; --hairline:rgba(14,58,44,.16);

  /* palmir's own tokens, re-pointed — every existing rule follows */
  --bg:var(--sand-50);
  --bg2:var(--dune-100);
  --surface:var(--sand-50);
  --cream:var(--palm-900);            /* was the foreground on black */
  --muted:var(--ink-muted);
  --gold:var(--sukkari-400);          /* fills only */
  --gold-2:#F3C83B;
  --gold-ink:#8A4B17;                 /* gold as type: 5.9:1 on sand */
  --accent-ink:color-mix(in srgb,var(--accent) 38%,#4A220C);
  --on-fill:var(--palm-900);          /* type sitting on a gold fill */
  --line:var(--hairline);

  /* Type: heavy warm serif for names, quiet sans for facts */
  --disp:SAR,"TSD",Georgia,serif;
  --mono:SAR,"TS",system-ui,sans-serif;
  --text:SAR,"TST",Georgia,serif;
  --ar:SAR,"TSD",serif;
  --ar-ui:SAR,"TS",system-ui,sans-serif;
  --ar-disp:SAR,"TSD",serif;

  --r-sm:12px; --r-md:16px; --r-lg:28px; --r-xl:36px;
  --shadow-soft:0 1px 0 rgba(14,58,44,.04),0 18px 40px -24px rgba(14,58,44,.28);
  --shadow-lift:0 2px 0 rgba(14,58,44,.04),0 30px 60px -30px rgba(90,52,10,.35);

  /* Emil Kowalski Motion & Timing Standards */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in:cubic-bezier(0.32, 0, 0.67, 0);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------- ground */
html{background:var(--sand-50)}
body{background:var(--sand-50)!important;color:var(--palm-900);font-family:var(--mono);cursor:auto!important;
  -webkit-font-smoothing:antialiased;font-kerning:normal;text-rendering:optimizeLegibility;font-variant-numeric:lining-nums}
button,a,[data-hover],.var-item,.scard,.catalog-card,.foot-track{cursor:pointer!important}
input,textarea{cursor:text!important}
html:not([dir="rtl"]) p{font-family:var(--mono)}
#shader,.grain,.vignette,.cursor,.cursor-ring{display:none!important}
::selection{background:var(--sukkari-400);color:var(--palm-900)}
:focus-visible{outline:2px solid var(--palm-900);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}

/* ── Tabular figures (Vercel Web Interface Guidelines) ── */
.tabular-nums,.price,.catalog-price,.cart-total,.pp-bag-p,.pp-bag-n,.cartlink .n,
.ci .qty,.ci-pr,.info-price,.scard .pr,#doneTot,#doneNo,#orderTotal,.pay-amt,
.pp-qty-in,.pp-figs dt,.sweetstats .stat .v,.reel-list span,.info-buymeta span{
  font-variant-numeric:tabular-nums;
  -webkit-font-feature-settings:"tnum" 1;
  font-feature-settings:"tnum" 1;
}

/* ---------------------------------------------------------------- loader */
#loader{background:var(--sand-50)}
.loader-word{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;color:var(--palm-900)}
.loader-bar{background:var(--hairline)}
.loader-bar i{background:var(--palm-900)}
.loader-sub{color:var(--ink-muted);letter-spacing:.24em}

/* ---------------------------------------------------------------- header */
header,header.shrink{background:color-mix(in srgb,var(--sand-50) 88%,transparent)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.logo{font-family:var(--disp);font-weight:900;letter-spacing:-.01em;color:var(--palm-900)}
.logo .ar{font-family:var(--ar-disp);font-weight:700;color:var(--caramel-500)}
nav.links{gap:4px}
nav.links a{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.02em;text-transform:none;
  opacity:1;padding:8px 14px;border-radius:999px;transition:background .25s,color .25s}
nav.links a::after{display:none}
nav.links a:hover{background:var(--palm-900);color:var(--sand-50)}
nav.links a.corp-pill{border:1.5px solid var(--palm-900)}
.cartlink,.langbtn,.searchbtn{border:1.5px solid var(--palm-900)!important;color:var(--palm-900);font-family:var(--mono);
  font-weight:500;letter-spacing:.02em;text-transform:none;transition:background .25s,color .25s,transform .15s}
.cartlink{background:var(--palm-900);color:var(--sand-50)!important}
.cartlink .n{color:var(--sukkari-400)!important}
.cartlink:hover{background:var(--palm-700)!important}
.langbtn:hover,.searchbtn:hover{background:var(--palm-900)!important;color:var(--sand-50)}
.cartlink:active,.langbtn:active,.searchbtn:active,.mag:active,.quiz-again:active{transform:scale(.97)}
.mobilenav{background:var(--sand-50)}
.mobilenav a{font-family:var(--disp);font-weight:900;color:var(--palm-900)}
html[dir="rtl"] .mobilenav a{font-family:var(--ar-disp)}
.searchbar{background:color-mix(in srgb,var(--sand-50) 94%,transparent)!important;border-bottom:1px solid var(--hairline)}

/* ---------------------------------------------------------------- buttons */
.mag{background:var(--palm-900)!important;color:var(--sand-50)!important;font-family:var(--mono);font-weight:500;
  letter-spacing:.02em;text-transform:none;font-size:.9rem;padding:15px 28px;
  box-shadow:0 10px 24px -14px rgba(14,58,44,.6);transition:background .25s,transform .15s,box-shadow .25s}
.mag:hover{background:var(--palm-700)!important;box-shadow:0 14px 28px -14px rgba(14,58,44,.7)}
.mag .dot{background:var(--sukkari-400)!important}
.quiz-again,.more-btn{font-family:var(--mono);font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--palm-900)}
.quiz-again{border:1.5px solid var(--palm-900)!important;font-size:.88rem}
.quiz-again:hover{background:var(--palm-900)!important;color:var(--sand-50)}
.more-btn{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.catalog-buy{background:var(--palm-900)!important;border-color:var(--palm-900)!important;color:var(--sand-50)!important;font-weight:500}
.catalog-buy:hover{background:var(--palm-700)!important}

/* ---------------------------------------------------------------- hero */
.hero{padding-top:92px!important;padding-bottom:0!important;min-height:0}
.pp-stage{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:min(640px,78svh);
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 72% 46%,#F7DC9E 0,#EDBE63 55%,#E2A845 100%)}
/* the dot field — counted, aligned, graded; never scattered */
.pp-stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle,rgba(107,52,24,.22) 1.1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 70% at 78% 50%,#000 0,transparent 70%);mask-image:radial-gradient(60% 70% at 78% 50%,#000 0,transparent 70%)}
.pp-copy{padding:clamp(28px,5vw,64px);position:relative;z-index:2}
.hero .kicker{margin-bottom:22px!important}
.hero .kicker .ln{background:var(--palm-900)!important;width:36px}
.hero .eyebrow{color:var(--palm-900)!important;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.16em}
.hero h1{font-family:var(--disp)!important;font-weight:900!important;color:var(--palm-900);
  font-size:clamp(2.6rem,5.4vw,5rem)!important;line-height:.98!important;letter-spacing:-.025em!important;white-space:normal!important}
.hero h1 .h-line{display:block!important}
.hero h1 .h-line+.h-line::before{content:none!important}
.hero h1 .it{font-style:normal!important;font-weight:500;color:var(--date-700)!important}
.hero h1 .stroke{-webkit-text-stroke:0!important;color:var(--palm-900)!important}
html[dir="rtl"] .hero h1{font-family:var(--ar-disp)!important;line-height:1.3!important;font-size:clamp(2.3rem,4.6vw,4.2rem)!important;display:block!important}
.hero-foot{margin-top:26px!important;display:block}
.hero-lead{font-family:var(--text)!important;font-size:clamp(1.05rem,1.4vw,1.25rem)!important;line-height:1.5!important;
  color:var(--palm-900)!important;max-width:34ch!important}
html[dir="rtl"] .hero-lead{font-family:var(--ar-ui)!important;line-height:1.8!important}
.hero #heroCta{display:inline-flex!important;margin-top:26px}
.hero-note{display:inline-flex;align-items:center;gap:10px;margin-top:18px!important;padding:10px 18px;border-radius:18px;max-width:52ch;line-height:1.45;
  background:rgba(251,244,232,.55);border:1.5px solid rgba(14,58,44,.22);color:var(--palm-900)!important;font-size:.84rem;font-weight:500}
.hero-note .hn-i{color:var(--caramel-500)!important}
.pp-art{position:relative;height:100%;min-height:420px}
.pp-sun{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;right:-8%;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 40% 36%,#FBE3A8,#F0BE59 70%);box-shadow:inset -18px -24px 60px rgba(184,102,44,.25)}
.pp-mark{position:absolute;width:30%;right:6%;top:8%;opacity:.12;transform:rotate(8deg)}
.pp-plate{position:absolute;inset:0}
.pp-sun{display:none}  /* the illustration carries its own sun */
.pp-hero-art{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;overflow:visible;
  filter:drop-shadow(0 26px 30px rgba(107,52,24,.18))}
/* The base sheet stills everything inside .hero (animation/transition/transform,
   all !important), so the illustration opts back in. It animates the composable
   `translate`/`rotate`/`scale` properties — never `transform`, which would
   replace the positioning transform each group carries as an attribute.
   Parallax rides on the wrapper layers so the two never fight. */
.pp-hero-art .ha-l{translate:var(--px,0px) var(--py,0px);transition:translate .5s cubic-bezier(.19,1,.22,1)!important}
.hero .ha-date{animation:ppFloat 7s ease-in-out infinite alternate!important}
.hero .ha-small{animation:ppFloat 9s ease-in-out .8s infinite alternate-reverse!important}
.hero .ha-tiny{animation:ppFloat 8s ease-in-out .4s infinite alternate!important}
.hero .ha-l-frond{animation:ppFrond 12s ease-in-out infinite alternate!important;transform-box:fill-box;transform-origin:30% 80%}
.hero .ha-l-sun{animation:ppSun 16s ease-in-out infinite alternate!important;transform-box:fill-box;transform-origin:50% 50%}
@keyframes ppFloat{from{translate:0 0}to{translate:0 -10px}}
@keyframes ppFrond{from{rotate:-1.3deg}to{rotate:1.7deg}}
@keyframes ppSun{from{scale:1}to{scale:1.05}}
.pp-seal{position:absolute;left:-6%;bottom:6%;width:112px;height:112px;border-radius:50%;background:var(--palm-900);color:var(--sand-50);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-10deg);
  box-shadow:0 16px 30px -16px rgba(14,58,44,.7)}
.pp-seal b{font-family:var(--disp);font-weight:900;font-size:1.7rem;line-height:1;color:var(--sukkari-400)}
.pp-seal i{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pp-facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:14px 0 0;padding:0;
  border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-soft)}
.pp-facts li{display:flex;align-items:baseline;gap:10px;padding:20px 24px;border-inline-start:1px solid var(--hairline)}
.pp-facts li:first-child{border-inline-start:0}
.pp-facts b{font-family:var(--disp);font-weight:900;font-size:1.6rem;line-height:1;white-space:nowrap;direction:ltr;unicode-bidi:isolate;color:var(--palm-900);font-variant-numeric:tabular-nums}
.pp-facts span{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
html[dir="rtl"] .pp-facts span{font-size:.86rem}
@media (max-width:900px){
  .pp-stage{grid-template-columns:1fr;min-height:0}
  .pp-art{min-height:0;height:300px;order:-1}

  .pp-seal{width:84px;height:84px;left:4%;bottom:2%}
  .pp-seal b{font-size:1.3rem}
  .pp-copy{padding:8px 24px 32px}
  .pp-facts{grid-template-columns:repeat(2,1fr)}
  .pp-facts li:nth-child(3){border-inline-start:0}
  .pp-facts li:nth-child(n+3){border-top:1px solid var(--hairline)}
  .pp-facts li{padding:16px 18px;flex-direction:column;gap:4px}
}
@media (max-width:700px){
  .hero{padding-top:80px!important}
  .pp-art{height:260px}


  .hero .eyebrow{letter-spacing:.08em;font-size:.66rem}
  .hero-lead{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;white-space:normal!important;text-overflow:clip!important}
  .hero h1{font-size:2.35rem!important}
  html[dir="rtl"] .hero h1{font-size:2.1rem!important}
  .pp-stage{border-radius:28px}
}

/* ---------------------------------------------------------------- sections */
section.wrap{padding-top:clamp(64px,8vw,104px)}
.sec-label{width:100%;gap:18px!important}
.sec-label .num{display:flex;width:100%;padding-bottom:14px;border-bottom:1px solid var(--hairline);
  font-family:var(--mono)!important;font-size:.74rem!important;font-weight:500;letter-spacing:.14em!important;
  text-transform:uppercase;color:var(--ink-muted)!important}
.sec-label h2,.corp-inner h2{font-family:var(--disp)!important;font-weight:900!important;color:var(--palm-900);
  font-size:clamp(2.4rem,5.4vw,4.4rem)!important;line-height:.98!important;letter-spacing:-.022em!important;max-width:16ch}
html[dir="rtl"] .sec-label h2,html[dir="rtl"] .corp-inner h2{font-family:var(--ar-disp)!important;line-height:1.3!important;font-size:clamp(2rem,4.4vw,3.4rem)!important}
.var-intro{font-family:var(--text);font-size:1.15rem;line-height:1.5;color:var(--palm-900);max-width:56ch}
html[dir="rtl"] .var-intro{font-family:var(--ar-ui)}
.eyebrow,.eyebrow2{font-family:var(--mono);font-weight:700;letter-spacing:.14em;color:var(--gold-ink)}  /* small text: 6.2:1 (caramel was 3.9:1) */
.disp{font-family:var(--disp)}
html[dir="rtl"] .disp{font-family:var(--ar-disp);font-weight:700}

/* category tabs → PalmPop pills */
#shopCats .shop-cat,.shop-cat,.shop-cat-all,.filter-chip{border:1.5px solid var(--palm-900)!important;color:var(--palm-900);
  background:transparent!important;font-family:var(--mono);font-weight:500;letter-spacing:.02em;text-transform:none;border-radius:999px;
  transition:background .25s,color .25s}
.shop-cat:hover,.shop-cat-all:hover,.filter-chip:hover{background:rgba(14,58,44,.07)!important}
#shopCats .shop-cat[aria-selected="true"],.shop-cat[aria-selected="true"],.shop-cat-all[aria-pressed="true"],.filter-chip[aria-pressed="true"]{
  background:var(--palm-900)!important;color:var(--sand-50)!important;border-color:var(--palm-900)!important}

/* ---------------------------------------------------------------- product cards */
.catalog-card,.scard{background:var(--white)!important;border:0!important;border-radius:var(--r-lg)!important;
  box-shadow:var(--shadow-soft);transition:transform .35s cubic-bezier(.19,1,.22,1),box-shadow .35s}
@media(hover:hover){.catalog-card:hover,.scard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}}
.catalog-card img,.scard img{border-radius:calc(var(--r-lg) - 8px)}
.scard .pr,.catalog-card .price,.catalog-price{font-family:var(--disp)!important;font-weight:900!important;color:var(--palm-900)!important;font-variant-numeric:tabular-nums}
.scard-badge,.info-season,.top-tag{background:var(--palm-900)!important;color:var(--sand-50)!important;border:0!important;border-radius:8px!important}
.var-stage{border:0!important;border-radius:var(--r-xl)!important;background:var(--dune-100)!important;box-shadow:var(--shadow-soft)}
.var-stage::after{background:linear-gradient(to top,rgba(251,244,232,.94),rgba(251,244,232,.35) 42%,transparent 62%)!important}
.var-stage .meta .t{font-family:var(--disp);font-weight:900;text-shadow:none!important;color:var(--palm-900)}
.var-stage .meta .d{text-shadow:none!important;color:var(--palm-900)!important}
.var-stage .flav{border:1.5px solid var(--palm-900)!important;background:rgba(251,244,232,.8)!important;color:var(--palm-900)!important;border-radius:999px}
.var-item .nm{font-family:var(--disp);font-weight:900;color:var(--palm-900)}

/* ---------------------------------------------------------------- flight + quiz */
.flight-card,.quiz-card{background:var(--dune-100)!important;border:0!important;border-radius:var(--r-xl)!important;box-shadow:none!important}
.quiz-card{background:var(--mint-100)!important}
.quiz-opt{background:var(--white)!important;border:1.5px solid transparent!important;border-radius:var(--r-md)!important;box-shadow:var(--shadow-soft)}
.quiz-opt:hover{border-color:var(--palm-900)!important}
.fl-price{font-family:var(--disp);font-weight:900;color:var(--palm-900)!important}
.fl-lead,.ritual-lead{font-family:var(--text);font-size:1.2rem;line-height:1.5;color:var(--palm-900)}
html[dir="rtl"] .fl-lead,html[dir="rtl"] .ritual-lead{font-family:var(--ar-ui)}

/* ---------------------------------------------------------------- story */
.ritual h3{font-family:var(--disp)!important;font-weight:900!important;letter-spacing:-.02em;line-height:1.02;color:var(--palm-900)}
.ritual h3 em{font-style:normal;font-weight:500;color:var(--date-700)}
html[dir="rtl"] .ritual h3{font-family:var(--ar-disp)!important;font-weight:700!important;line-height:1.5}
.claim{padding:7px 16px!important;font-size:.82rem!important;border:1.5px solid var(--palm-900)!important;border-radius:999px!important;color:var(--palm-900)!important;background:transparent!important;font-weight:500}
.claim:nth-child(1){background:var(--mint-100)!important}
.claim:nth-child(2){background:var(--blush-100)!important}
.claim:nth-child(3){background:var(--butter-100)!important}
.orb{background:radial-gradient(circle at 36% 30%,#FBE3A8 0,var(--sukkari-400) 52%,var(--caramel-500) 100%)!important;
  box-shadow:0 40px 70px -40px rgba(90,52,10,.6),inset -24px -30px 60px rgba(107,52,24,.28)!important}
.orb-ring{border-color:var(--hairline)!important}
.orb-label{color:var(--palm-900)!important}
.orb-label .yr{font-family:var(--disp)!important;font-weight:900!important}

/* ---------------------------------------------------------------- benefits: pastel tiles */
.benefits{gap:14px!important;background:transparent!important;border:0!important}
.benefit{border-radius:var(--r-lg);border:0!important;background:var(--white)!important}
.benefits .benefit:nth-child(3n+1){background:var(--mint-100)!important}
.benefits .benefit:nth-child(3n+2){background:var(--blush-100)!important}
.benefits .benefit:nth-child(3n){background:var(--butter-100)!important}
.benefit .bi{font-family:var(--disp);font-weight:900;color:var(--caramel-500)!important}
.benefit h4{font-family:var(--disp);font-weight:700;color:var(--palm-900)}
.benefit p{color:var(--palm-900)!important;opacity:.82}
#more-benefits{margin-top:14px}

/* ---------------------------------------------------------------- sweet science: the palm tile */
.sweetband{background:var(--palm-900)!important;border:0!important;border-radius:var(--r-xl)!important;color:var(--sand-50)}
.sweetband h3{font-family:var(--disp);font-weight:900;color:var(--sand-50)}
.sweetband h3 em{font-style:normal;color:var(--sukkari-400)}
.sweetband p,.sweetband .note{color:rgba(251,244,232,.82)!important}
.sweetband .eyebrow2{color:var(--sukkari-400)!important}
.sweetband .more-btn{color:var(--sand-50)}
.sweetstats .stat{border-color:rgba(233,169,58,.35)!important}
.sweetstats .stat .v{font-family:var(--disp)!important;font-weight:900!important;color:var(--sukkari-400)!important;font-variant-numeric:tabular-nums}
.sweetstats .stat .k{color:rgba(251,244,232,.78)!important;font-weight:700}

/* ---------------------------------------------------------------- voices, forms */
.voice{background:var(--white);border:0!important;border-radius:var(--r-lg)!important;box-shadow:var(--shadow-soft)}
.no-voices,.rev-locked{background:var(--dune-100);border:0!important;border-radius:var(--r-lg)}
.nv-mark,.rev-locked .lock{color:var(--caramel-500)!important}
.rev-form{background:var(--white);border:0!important;border-radius:var(--r-lg)!important;box-shadow:var(--shadow-soft)}
.fld input,.fld textarea,.news input,.addr-search input,#siteSearch,.na-row input{background:var(--white)!important;
  border:1.5px solid var(--hairline)!important;color:var(--palm-900)!important;border-radius:var(--r-sm);transition:border-color .18s,box-shadow .18s}
.fld input:focus,.fld textarea:focus,.news input:focus,#siteSearch:focus,.addr-search input:focus,.na-row input:focus{border-color:var(--palm-900)!important;outline:none;box-shadow:0 0 0 3.5px rgba(14,58,44,.18)!important}
.fld label{color:var(--ink-muted)!important;font-weight:700}
.rate button{color:rgba(14,58,44,.2)}
.rate button.on,.rate button[aria-pressed="true"]{color:var(--sukkari-400)!important}

/* ---------------------------------------------------------------- shipping */
.policy-btn{background:var(--white)!important;border:0!important;border-radius:var(--r-lg)!important;box-shadow:var(--shadow-soft);
  transition:transform .3s cubic-bezier(.19,1,.22,1),box-shadow .3s}
.policy-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.policy-btn b{font-family:var(--disp);font-weight:700;font-size:1.2rem;color:var(--palm-900)}
.policy-btn .pb-i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--butter-100);color:var(--caramel-500)!important}
.policy-btn .pb-a{color:var(--palm-900)!important}
.careband{background:var(--mint-100)!important;border:0!important;border-radius:var(--r-lg);padding:18px 20px!important;gap:6px 18px!important;line-height:1.5}
.care-label{color:var(--palm-900)!important;font-weight:700}

/* ---------------------------------------------------------------- corporate: the Sukkari tile */
.corp-band{background:transparent!important;border:0!important;padding:clamp(56px,7vw,96px) clamp(16px,5vw,64px)!important}
.corp-inner{max-width:1240px;margin:0 auto;background:var(--sukkari-400);border-radius:var(--r-xl);
  padding:clamp(32px,6vw,72px)!important;color:var(--palm-900);position:relative;overflow:hidden}
.corp-inner::after{content:"";position:absolute;right:-6%;top:-30%;width:46%;aspect-ratio:1;border-radius:50%;background:rgba(251,244,232,.28);pointer-events:none}
.corp-inner p{color:var(--palm-900)!important;font-family:var(--text);font-size:1.15rem;max-width:48ch}
html[dir="rtl"] .corp-inner p{font-family:var(--ar-ui)}
.corp-inner>*{position:relative;z-index:1}
.corp-inner::after{z-index:0}

/* ---------------------------------------------------------------- footer */
.welcome-invite{background:var(--butter-100)!important;color:var(--palm-900)!important;border-top:1px solid var(--hairline)}
.welcome-invite button{color:var(--palm-900)!important;font-weight:700;text-decoration:underline;text-underline-offset:4px}
footer{background:var(--palm-900);color:var(--sand-50);border-top:0!important;margin-top:0}
footer .foot-logo{font-family:var(--disp);font-weight:900;color:var(--sand-50)}
footer .foot-logo span span{color:var(--sukkari-400)!important;font-family:var(--ar-disp)!important}
footer .foot-mark use{fill:var(--sukkari-400)}
footer p,footer a,footer .foot-bottom,footer .foot-track{color:rgba(251,244,232,.8)!important}
footer a:hover,footer .foot-track:hover{color:var(--sukkari-400)!important}
footer h5{color:var(--sukkari-400)!important;font-family:var(--mono);font-weight:700;letter-spacing:.14em}
footer .foot-bottom{border-top-color:rgba(251,244,232,.16)!important}
footer .tag{font-family:var(--disp)!important;font-style:normal!important;font-weight:700;color:var(--sand-50)!important}
html[dir="rtl"] footer .tag{font-family:var(--ar-disp)!important}
footer .news input{background:rgba(251,244,232,.08)!important;border-color:rgba(251,244,232,.3)!important;color:var(--sand-50)!important}
footer .news input::placeholder{color:rgba(251,244,232,.6)}
footer .news button{background:var(--sukkari-400)!important;color:var(--palm-900)!important;border-radius:999px}
footer .news{border-color:rgba(251,244,232,.3)!important}

/* ---------------------------------------------------------------- drawer, modals, sheets */
.drawer{background:var(--sand-50)!important;border-color:var(--hairline)!important;box-shadow:-30px 0 60px -30px rgba(14,58,44,.35)}
.mc{background:var(--sand-50)!important;border:0!important;border-radius:var(--r-lg)!important;box-shadow:0 40px 80px -30px rgba(14,58,44,.45)}
.modal{background:rgba(9,38,29,.42)!important;backdrop-filter:blur(6px)}
.ov{background:rgba(9,38,29,.42)!important}
.x{color:var(--palm-900)}
.shipbar .sb-track{background:var(--hairline)!important}
.shipbar .sb-fill{background:var(--palm-900)!important}
.rowl.tot{font-family:var(--disp);font-weight:900}
.toast{background:var(--palm-900)!important;color:var(--sand-50)!important;border:0!important}
.first-popup{background:var(--white)!important;box-shadow:var(--shadow-lift);border:0!important}
/* Hidden overlays must be truly gone: iPhone Safari's floating address bar lets content
   just below the screen edge show through, so park them far off and switch visibility off. */
.first-popup:not(.show){transform:translateY(calc(100% + 160px))!important;visibility:hidden;transition:transform .22s var(--ease-in),visibility 0s linear .22s}
.first-popup.show{visibility:visible;transition:transform .28s var(--ease-drawer),visibility 0s}
.rc-top{background:var(--palm-900)!important}
.rc-x{background:var(--sand-50)!important}
.map-wrap{background:var(--dune-100)!important}

/* catalog shelf headings + card names: the warm serif carries the names */
.catalog-section h2,.catalog-section h3,.catalog-heading h2,.catalog-heading h3{font-family:var(--disp)!important;font-weight:900!important;
  letter-spacing:-.018em;color:var(--palm-900);font-size:clamp(1.7rem,2.6vw,2.3rem)}
html[dir="rtl"] .catalog-section h2,html[dir="rtl"] .catalog-section h3{font-family:var(--ar-disp)!important;font-weight:700!important}
.catalog-name{font-family:var(--disp)!important;font-weight:700!important;color:var(--palm-900)}
html[dir="rtl"] .catalog-name{font-family:var(--ar-disp)!important}
.catalog-photo{background:var(--dune-100)!important}
#nextLines .next-line{box-shadow:var(--shadow-soft);border-radius:var(--r-lg)!important}
#nextLines .nl-name{font-family:var(--disp);font-weight:900}
.product-state.new,.product-state{border-radius:8px}

/* sheets: names heavy, notes quiet */
.dh h3,.mch h3{font-family:var(--disp)!important;font-weight:900!important;letter-spacing:-.015em;color:var(--palm-900)}
html[dir="rtl"] .dh h3,html[dir="rtl"] .mch h3{font-family:var(--ar-disp)!important;font-weight:700!important}
.co-top{background:var(--white)!important;border:0!important;box-shadow:var(--shadow-soft)}
.co-top-r b{font-weight:900!important}
.express-note,.na-hint,.rev-note{font-size:.8rem!important;color:var(--ink-muted)!important;line-height:1.5}
.pin-btn{border-color:rgba(14,58,44,.3)!important;color:var(--palm-900)!important;background:var(--white)!important}

/* product sheet: the variety name is the hero of the sheet */
.info-body>.disp{font-weight:900!important;letter-spacing:-.018em}
html[dir="rtl"] .info-body>.disp{font-weight:700!important}

/* ---------------------------------------------------------------- PalmPop family band (combined shop) */
.pp-band{display:grid;grid-template-columns:1fr 1fr;align-items:center;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(circle at 78% 55%,#E6F5EC 0,var(--mint-100) 55%,#C3E6D1 100%);position:relative}
.pp-band-copy{padding:clamp(28px,5vw,64px);position:relative;z-index:1}
.pp-band-kicker{font-size:.74rem!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--palm-700)!important;margin:0 0 6px}
.pp-band-word{display:block;width:min(420px,100%);height:auto;margin-inline-start:-10px}
.pp-band-word text{font-family:"TSD",Georgia,serif;font-weight:900;font-size:104px;fill:var(--palm-900);letter-spacing:-1px}
.pp-band-ar{font-family:var(--ar-disp)!important;font-weight:700;font-size:1.7rem;color:var(--palm-900);margin:-6px 0 18px;padding-inline-start:118px;direction:rtl;text-align:left}
.pp-band-h{font-family:var(--disp)!important;font-weight:500;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.12;letter-spacing:-.01em;color:var(--palm-900);margin:0 0 12px;max-width:16ch}
html[dir="rtl"] .pp-band-h{font-family:var(--ar-disp)!important;font-weight:700;line-height:1.4}
.pp-band-p{font-family:var(--text)!important;font-size:1.08rem;line-height:1.55;color:var(--palm-900)!important;max-width:42ch;margin:0 0 20px}
html[dir="rtl"] .pp-band-p{font-family:var(--ar-ui)!important;line-height:1.8}
.pp-band-pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0}
.pp-band-pills li{padding:9px 16px;border-radius:999px;border:1.5px solid var(--palm-900);font-size:.84rem;font-weight:500;color:var(--palm-900)}
.pp-band-pills li.fill{background:var(--palm-900);color:var(--sand-50)}
.pp-band-art{align-self:stretch;position:relative;min-height:420px}
.pp-band-art img{position:absolute;left:0;right:0;bottom:6%;width:100%;height:auto;border-radius:0}
.pp-band-sun{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;left:50%;top:44%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 36%,#FBE3A8,#EDBE63 72%)}

nav.links a.pp-navlink{color:var(--palm-900)}
nav.links a.pp-navlink::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sukkari-400);margin-inline-end:7px;vertical-align:1px;position:static;transform:none;height:7px}
@media (max-width:900px){
  .pp-band{grid-template-columns:1fr}
  .pp-band-art{min-height:300px;order:-1}
  .pp-band-ar{padding-inline-start:90px;font-size:1.4rem}
}

/* ---------------------------------------------------------------- the date-dot logo (combined shop) */
.pp-logo{display:flex;align-items:center;gap:0}
.pp-logo svg{display:block;height:44px;width:auto;overflow:visible}
header.shrink .pp-logo svg{height:38px}
.pp-logo .pp-logo-short{display:none}
@media (max-width:1320px){.pp-logo .pp-logo-wide{display:none}.pp-logo .pp-logo-short{display:block;height:40px}}
@media (max-width:700px){.pp-logo .pp-logo-short{height:34px}}
.pp-logo:hover .pp-logo-wide,.pp-logo:hover .pp-logo-short{transform:none}
svg.pp-date{height:auto;overflow:visible}
.loader-mark.pp-date{width:clamp(56px,9vw,88px)}
.pp-loader-word{height:clamp(4.2rem,11vw,8rem);width:auto;display:block;overflow:visible}
.mnav-mark.pp-date{width:52px}
.pp-foot-logo svg{height:118px;width:auto;display:block;overflow:visible;margin:0 0 14px -8px}
.pp-mark.pp-date{display:none}  /* the illustration says it better */
.rc-mark.pp-date{width:40px;display:block;margin:0 auto 8px}


/* ══════════════════════════════════════════════════════════════════════
   LIFE — sun through the grove, a date that drops in the basket, a verse
   One or two moving things per screen, all still for reduced motion.
   ══════════════════════════════════════════════════════════════════════ */

/* the shade of a palm frond, drifting across the golden stage */
.pp-shade{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pp-shade svg{position:absolute;fill:#6B3418;filter:blur(7px);mix-blend-mode:multiply;transform-origin:8% 98%;will-change:transform}
.pp-shade .f1{width:74%;right:-16%;top:-26%;opacity:.16;animation:ppSway 11s ease-in-out infinite alternate!important}
.pp-shade .f2{width:52%;left:-14%;bottom:-30%;opacity:.10;transform:rotate(160deg)!important;animation:ppSway2 14s ease-in-out infinite alternate!important}
@keyframes ppSway{0%{transform:rotate(-3deg) translate3d(0,0,0)}100%{transform:rotate(4deg) translate3d(-14px,10px,0)}}
@keyframes ppSway2{0%{transform:rotate(158deg)}100%{transform:rotate(166deg) translate3d(10px,-8px,0)}}
.pp-copy,.pp-art{position:relative;z-index:1}

/* the palm verse — set like the brand kit's harvest image: a pale ground, one
   Sukkari sun rising behind, palm ink doing all the talking. The two halves of
   the verse are joined by a single date, the way the logo dots its i. */
.pp-verse{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--dune-100);color:var(--palm-900);
  --vx:clamp(22px,6vw,88px);padding:clamp(44px,7vw,96px) var(--vx) 0;text-align:center;isolation:isolate}
.pp-verse-sun{display:none}
.pp-verse-kicker{margin:0 0 22px!important;font:500 .74rem/1.2 var(--mono)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--caramel-700,#8A4B17)!important}
html[dir="rtl"] .pp-verse-kicker{font:700 1rem/1.4 var(--ar-disp)!important;letter-spacing:0;text-transform:none}
.pp-verse-kicker::before,.pp-verse-kicker::after{content:"";display:inline-block;width:22px;height:1.5px;background:currentColor;
  vertical-align:middle;margin:0 12px;opacity:.7}
.pp-verse-poem{margin:0 auto;font-family:var(--ar-disp)!important;font-weight:900;color:var(--palm-900);
  font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:.1em;max-width:22ch}
.pp-verse-poem .hemi{text-wrap:balance}
.pp-verse-orn{display:block;width:.4em;height:.54em;margin:.12em 0;border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
  background:linear-gradient(160deg,#F2C978 0%,var(--sukkari-400) 45%,#B8662C 100%)}
.pp-verse-poem .w{display:inline-block;transition:opacity .7s ease,transform .9s cubic-bezier(.19,1,.22,1),filter .7s ease}
.pp-anim .pp-verse-poem .w{opacity:0;transform:translateY(.35em);filter:blur(6px)}
.pp-anim .pp-verse-poem.in .w{opacity:1;transform:none;filter:none}
.pp-verse-orn{transition:opacity .8s ease .9s,scale .8s cubic-bezier(.19,1,.22,1) .9s}
.pp-anim .pp-verse-poem:not(.in) .pp-verse-orn{opacity:0;scale:.4}
.pp-verse-en{margin:26px auto 0!important;max-width:40ch;font-family:var(--text)!important;font-style:normal;font-size:1.12rem!important;line-height:1.55;color:var(--palm-700,#1E5A43)!important}
.pp-verse-cite{margin:12px 0 0!important;font:500 .86rem/1.4 var(--mono)!important;color:var(--ink-muted,#4F6B60)!important}
html[dir="rtl"] .pp-verse-cite{font-size:.95rem!important}
.pp-verse-line{margin:clamp(36px,5vw,56px) calc(var(--vx) * -1) 0!important;max-width:none;border:0;
  padding:clamp(54px,7vw,84px) max(var(--vx),calc((100% - 34ch)/2)) clamp(40px,6vw,72px)!important;
  background:var(--sukkari-400);border-radius:50% 50% 0 0 / clamp(46px,7vw,90px) clamp(46px,7vw,90px) 0 0;
  font-family:var(--disp)!important;font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem)!important;line-height:1.4;color:var(--palm-900)!important}
html[dir="rtl"] .pp-verse-line{font-family:var(--ar-disp)!important;line-height:1.7}

/* the date that drops into the basket */
.pp-fly{position:fixed;left:0;top:0;width:26px;z-index:900;pointer-events:none;will-change:transform,opacity}
@keyframes ppBump{0%{transform:scale(1)}35%{transform:scale(1.14)}70%{transform:scale(.96)}100%{transform:scale(1)}}
.pp-bump{animation:ppBump .45s cubic-bezier(.2,.8,.2,1)}

/* WhatsApp in the brand's own green: still recognisable, no longer the one
   colour on the page that shouts louder than "Add to basket" */
.wa-fab{background:var(--palm-900)!important;box-shadow:0 12px 24px -12px rgba(14,58,44,.7),inset 0 0 0 2px rgba(233,169,58,.55)}
.wa-fab svg{fill:var(--sand-50)!important}
.wa-fab:active{transform:scale(.94)}

/* ══════════════════════════════════════════════════════════════════════
   PHONE FIRST
   ══════════════════════════════════════════════════════════════════════ */

/* notifications drop from the top on a phone, so they never cover a button */
@media (max-width:760px){
  .toasts{top:calc(env(safe-area-inset-top,0px) + 78px)!important;bottom:auto!important;left:12px!important;right:12px!important}
  .toast{box-shadow:0 12px 26px -14px rgba(14,58,44,.6)}
}
.drawer.show ~ .toasts,.modal.show ~ .toasts{display:none}

/* the basket bar: one tap to the basket, from anywhere on the page */
.pp-bag{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:190;
  display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border:0;border-radius:999px;cursor:pointer;
  background:var(--palm-900);color:var(--sand-50);font:500 .95rem/1 var(--mono);text-align:start;
  box-shadow:0 18px 34px -16px rgba(14,58,44,.75);transform:translateY(0);opacity:1;
  transition:transform .26s var(--ease-drawer),opacity .2s ease}
.pp-bag[hidden]{display:flex!important;transform:translateY(calc(100% + 160px));opacity:0;pointer-events:none;visibility:hidden;transition:transform .22s var(--ease-in),opacity .18s,visibility 0s linear .22s}
.pp-bag-n{display:grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border-radius:999px;background:var(--sukkari-400);color:var(--palm-900);font-weight:900;font-variant-numeric:tabular-nums}
.pp-bag-t{flex:1;font-weight:700}
.pp-bag-p{font-family:var(--disp);font-weight:900;font-size:1.1rem;font-variant-numeric:tabular-nums;padding-inline-end:8px}
.pp-bag:active{transform:scale(.98)}
.pp-bag-on{padding-bottom:84px}
.wa-fab{transition:transform .3s cubic-bezier(.23,1,.32,1)}
.pp-bag-on .wa-fab{--lift:calc(-64px - env(safe-area-inset-bottom,0px));transform:translateY(var(--lift))}
.pp-bag-on .wa-fab:active{transform:translateY(var(--lift)) scale(.94)}
@media (hover:hover){ .pp-bag-on .wa-fab:hover{transform:translateY(var(--lift)) scale(1.07)} }
@media (min-width:901px){.pp-bag{display:none!important}.pp-bag-on{padding-bottom:0}}

@media (max-width:700px){
  /* a hero that leaves room for the shop: products are one swipe away */
  .pp-art{height:238px!important}


  .pp-seal{width:62px!important;height:62px!important;left:3%!important;top:4%!important;bottom:auto!important}
  .pp-seal b{font-size:1.02rem!important} .pp-seal i{font-size:.48rem!important;letter-spacing:.08em}
  .pp-mark.pp-date{display:none}
  .pp-copy{padding:2px 20px 24px!important}
  .hero .kicker{margin-bottom:10px!important} .hero .kicker .ln{width:18px!important}
  .hero .eyebrow{white-space:nowrap;letter-spacing:.06em!important;font-size:.62rem!important}
  .hero h1{font-size:2.05rem!important;line-height:1.02!important}
  html[dir="rtl"] .hero h1{font-size:1.9rem!important;line-height:1.35!important}
  .hero-foot{margin-top:12px!important}
  .hero-lead{font-size:1rem!important;line-height:1.5!important}
  .hero #heroCta{margin-top:16px;padding:13px 22px;font-size:.88rem}
  .hero-note{margin-top:12px!important;font-size:.76rem!important;padding:8px 12px!important;border-radius:14px}
  .pp-shade .f1{width:120%;right:-50%;top:-12%}
  /* facts become a single swipeable row of chips */
  .pp-facts{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
    background:transparent!important;box-shadow:none!important;border-radius:0!important;
    margin:12px calc(var(--gutter,22px) * -1) 0!important;padding:2px var(--gutter,22px) 8px!important;scroll-padding-inline:var(--gutter,22px);scrollbar-width:none}
  .pp-facts::-webkit-scrollbar{display:none}
  .pp-facts li{flex:0 0 auto;scroll-snap-align:start;flex-direction:row!important;align-items:baseline;gap:7px!important;
    padding:10px 14px!important;border:0!important;border-radius:999px;background:var(--white);box-shadow:var(--shadow-soft)}
  .pp-facts b{font-size:1.05rem!important}
  .pp-facts span{font-size:.6rem!important;letter-spacing:.1em!important;white-space:nowrap}
  .wa-fab{width:48px;height:48px}
  .pp-verse{border-radius:26px}
  .pp-verse-poem{font-size:min(1.72rem,5.7vw);max-width:none}
  .pp-verse-poem .hemi{white-space:nowrap}
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP — its own layout, not a stretched phone
   A shop with a sticky aisle on the left and the shelves as a real grid.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:1100px){
  .hero h1{font-size:clamp(3.4rem,4.8vw,5.6rem)!important}
  .pp-stage{min-height:620px}
  .pp-facts{position:relative;z-index:2;margin:-44px 44px 0!important}

  #shop{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:44px;align-items:start}
  #shop > *{grid-column:2;min-width:0}
  #shop > #shopCats{grid-column:1;grid-row:1 / span 30;position:sticky!important;top:104px!important;
    display:flex!important;flex-direction:column;align-items:stretch;gap:8px;overflow:visible!important;
    padding:18px!important;margin:0!important;background:var(--white)!important;border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
  #shop > #shopCats .shop-cat{width:100%;justify-content:flex-start;border-color:transparent!important;border-radius:14px;padding:12px 14px;font-size:.95rem}
  #shop > #shopCats .shop-cat:hover{background:var(--sand-50)!important}
  #shop > #shopCats .shop-cat small{margin-inline-start:auto}
  #shop > #shopCats .shop-cat[aria-selected="true"],#shop > #shopCats .shop-cat-all[aria-pressed="true"]{background:var(--palm-900)!important;color:var(--sand-50)!important}

  /* shelves: a grid you scan, not a rail you drag */
  #shop .catalog-rail{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:20px;overflow:visible!important;padding-bottom:6px}
  #shop .catalog-rail .catalog-card{width:auto!important;flex:none!important;min-width:0}
  #shop .rail-arrow,#shop .catalog-tools [data-expand]{display:none!important}
  .catalog-heading{border-bottom:1px solid var(--hairline);padding-bottom:12px;margin-bottom:18px}

  .pp-verse-poem{max-width:none;flex-direction:row;justify-content:center;align-items:center;gap:.7em}  /* the blockquote is rtl: first hemistich sits on the right, as in print */
  .pp-verse-orn{margin:0}
  .pp-verse-poem{font-size:clamp(1.8rem,2.7vw,3rem)}
  .pp-verse-poem .hemi{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .pp-shade svg{animation:none!important}
  .pp-anim .pp-verse-poem .w{opacity:1!important;transform:none!important;filter:none!important}
  .pp-bag,.pp-bag-on .wa-fab{transition:none}
}


/* ══════════════════════════════════════════════════════════════════════
   THE GROUND — sand that is lit, not flat
   ══════════════════════════════════════════════════════════════════════ */
body{background:
  radial-gradient(120% 60% at 50% -10%, #FFF8EC 0%, rgba(251,244,232,0) 60%),
  radial-gradient(90% 50% at 100% 30%, rgba(233,169,58,.07) 0%, rgba(251,244,232,0) 70%),
  linear-gradient(180deg,#FBF4E8 0%,#F8EFE0 46%,#FBF4E8 100%) !important;
  background-attachment:scroll !important}   /* was fixed: Safari repaints a fixed background on every scroll frame (2026-10-20); the ground layer covers it */
/* a whisper of grain so the flat colour has a surface */
/* (2026-10-20, Safari) a ready-made 140px grain tile on its own composited layer, drawn normally: the SVG noise filter
   and the multiply blend made Safari re-draw and re-blend the whole screen while scrolling. Same grain, same 5%. */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("assets/grain.png");background-size:140px 140px;transform:translateZ(0)}
main,footer{position:relative;z-index:3}
.pp-bag,.toasts{z-index:190}
header{z-index:60}  /* never change the header's position: the base sheet fixes it */

/* the hero stage: a sun low over a dune, not a flat gold panel */
.pp-stage{background:
  radial-gradient(58% 46% at 72% 40%, #F9E3AE 0%, rgba(240,200,111,0) 68%),
  radial-gradient(120% 90% at 50% 0%, #F2CE7C 0%, #EDBE63 46%, #E3A948 100%) !important}
.pp-stage::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-32%;height:62%;z-index:0;pointer-events:none;
  border-radius:50% 50% 0 0/100% 100% 0 0;background:linear-gradient(180deg,rgba(226,168,69,.55),rgba(214,150,52,.75))}

/* cards answer a finger */
.catalog-card:active,.scard:active,.policy-btn:active,.shop-cat:active{transform:scale(.985)}
.catalog-buy:active,.mag:active,.quiz-again:active{transform:scale(.96)}
.catalog-card,.scard,.policy-btn,.shop-cat,.catalog-buy{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .25s,color .25s}
@media (prefers-reduced-motion:reduce){
  .hero .ha-date,.hero .ha-small,.hero .ha-tiny,.hero .ha-l-frond,.hero .ha-l-sun{animation:none!important}
  .pp-hero-art g{transition:none}
}


/* ══════════════════════════════════════════════════════════════════════
   PALMPOP — the can alone, no tile behind it, and a swipeable gallery
   ══════════════════════════════════════════════════════════════════════ */
.catalog-card[data-product^="palmpop"] .catalog-photo{background:transparent!important}
.catalog-card[data-product^="palmpop"] .catalog-photo .date-photo,
.catalog-card[data-product^="palmpop"] .catalog-photo img{object-fit:contain!important;padding:4px;transform:scale(1.1);
  filter:drop-shadow(0 16px 18px rgba(90,52,10,.16))}
.scard[data-product^="palmpop"] .scard-img,.scard[data-product^="palmpop"] img{object-fit:contain!important;background:transparent!important}

/* the gallery */
/* desktop sheet: the shop parks the reading beside a square photograph (54% of
   the card). A gallery takes that photograph's place and its square, so the
   words never slide over the pictures */
@media (min-width:1024px){
  #infoModal .info-card > .pp-gallery{width:54%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0 14px}
  #infoModal .info-card > .pp-gallery .pp-shot > img{width:100%;height:100%;object-fit:contain}
  #infoModal .info-card > .pp-gallery .pp-shots{flex:1 1 auto;min-height:0}
  #infoModal .info-card > .pp-gallery .pp-shot{height:100%}
  #infoModal .info-card > .pp-gallery .pp-frame{width:min(86%,100%);max-height:100%}
}
.pp-shot-date{padding:10px 18px 0}
.pp-frame{position:relative;margin:0;width:min(100%,clamp(220px,40vh,320px));aspect-ratio:1;border-radius:22px;overflow:hidden;
  background:var(--dune-100);box-shadow:0 20px 34px -22px rgba(90,52,10,.45)}
/* (these outrank .pp-shot img, which sizes the PalmPop cut-outs) */
.pp-shot .pp-frame > img,.pp-shot .pp-frame > svg,.pp-shot .pp-frame .flq-img{width:100%;height:100%;object-fit:cover;display:block;filter:none}
.pp-shot .pp-frame .flq{border-radius:inherit;height:100%}
.pp-frame figcaption{position:absolute;inset-inline-start:12px;bottom:12px;padding:6px 13px;border-radius:999px;
  background:rgba(251,244,232,.94);color:var(--palm-900);font:500 .86rem/1.2 var(--mono);box-shadow:0 4px 12px -6px rgba(14,58,44,.4)}
html[dir="rtl"] .pp-frame figcaption{font-family:var(--ar-disp);font-weight:700;font-size:.9rem}
.pp-gallery{position:relative;background:transparent;padding:6px 0 0}
.pp-shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain}
.pp-shots::-webkit-scrollbar{display:none}
.pp-shot{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;padding:8px 10px 0}
.pp-shot img{width:100%;height:clamp(200px,42vh,320px);object-fit:contain;display:block;
  filter:drop-shadow(0 22px 22px rgba(90,52,10,.18))}
.pp-dots{display:flex;justify-content:center;gap:7px;padding:10px 0 2px}
.pp-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:rgba(14,58,44,.22);cursor:pointer;
  transition:width .25s,background .25s}
.pp-dots button[aria-selected="true"]{width:22px;background:var(--palm-900)}
.pp-dots button:focus-visible{outline:2px solid var(--palm-900);outline-offset:3px}
.pp-gallery.has-more::after{content:"";position:absolute;inset-inline-end:10px;bottom:38px;width:26px;height:26px;pointer-events:none;
  opacity:.35;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3A2C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  animation:ppNudge 2.4s ease-in-out infinite}
@keyframes ppNudge{0%,100%{transform:translateX(0);opacity:.3}50%{transform:translateX(4px);opacity:.55}}
html[dir="rtl"] .pp-gallery.has-more::after{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.pp-gallery.has-more::after{animation:none}}


/* ══════════════════════════════════════════════════════════════════════
   THE STOREFRONT — a delivery line on top, cards built around the product
   ══════════════════════════════════════════════════════════════════════ */
.pp-topbar{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:calc(env(safe-area-inset-top,0px) + 9px) 16px 9px;background:var(--palm-900);color:var(--sand-50);
  font:500 13px/1.35 var(--mono);text-align:center}
.pp-topbar i{opacity:.45;font-style:normal}
html[dir="rtl"] .pp-topbar{font-size:14px}
@media (max-width:560px){
  .pp-topbar{font-size:12px;gap:6px;padding-inline:12px}
  .pp-topbar i,.pp-topbar span:last-child{display:none}   /* one promise at a time on a phone */
}
/* the header sits under the delivery bar until you scroll, then takes the top */
header{top:0;transform:translateY(var(--pp-bar-h,0px));transition:transform .3s cubic-bezier(.23,1,.32,1),padding .22s cubic-bezier(.23,1,.32,1),background .25s ease}
header.shrink{transform:none}

/* product cards: the can first, everything else quiet underneath */
.catalog-card{display:flex;flex-direction:column}
.catalog-card .catalog-photo{aspect-ratio:1;display:grid;place-items:center}
.catalog-card[data-product^="palmpop"] .catalog-photo{padding:6px}
.catalog-card .catalog-name{font-size:1.05rem}
.catalog-card .catalog-foot{margin-top:auto}
@media (min-width:1100px){
  /* roomier shelf cards on a desktop, with the button on its own line */
  #shop .catalog-rail{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
  #shop .catalog-card .catalog-foot{flex-wrap:wrap;gap:10px}
  #shop .catalog-card .catalog-buy{flex:1 1 100%;justify-content:center;border-radius:999px;padding:11px 16px;font-size:.92rem}
  #shop .catalog-card .catalog-buy .cb-i{display:none}
  #shop .catalog-card:hover .catalog-photo img{transform:scale(min(1.14,var(--fit,9)))}
  .catalog-card .catalog-photo img{transition:transform .45s cubic-bezier(.19,1,.22,1)}
}
/* each PalmPop can throws a shadow in its own flavour, so the shelf has colour
   without a single coloured panel */
.catalog-card[data-product="palmpop-sukkari"] .catalog-photo img{filter:drop-shadow(0 16px 18px rgba(199,120,31,.28))}
.catalog-card[data-product="palmpop-cola"] .catalog-photo img{filter:drop-shadow(0 16px 18px rgba(142,71,34,.28))}
.catalog-card[data-product="palmpop-cherry"] .catalog-photo img{filter:drop-shadow(0 16px 18px rgba(140,20,48,.24))}
.catalog-card[data-product="palmpop-pomegranate"] .catalog-photo img{filter:drop-shadow(0 16px 18px rgba(185,44,67,.24))}
.catalog-card[data-product="palmpop-lime"] .catalog-photo img{filter:drop-shadow(0 16px 18px rgba(47,107,30,.24))}


/* ── every shelf, one product at a time ───────────────────────────────────
   The product first, then its name, note and price centred under it, then a
   pill that says what it does. On phones each shelf is a centred carousel:
   one card in the middle with its neighbours peeking in. */
#shop .catalog-detail{text-align:center;display:block}
#shop .catalog-name{display:block;text-align:center;font-size:1.35rem;margin-top:4px}
#shop .catalog-note{display:block;text-align:center;color:var(--ink-muted)!important;font-weight:500}
#shop .catalog-foot{flex-direction:column;flex-wrap:nowrap!important;align-items:stretch;gap:10px;padding:6px 16px 16px}
#shop .catalog-price{display:flex;justify-content:center;align-items:baseline;gap:8px;text-align:center}
#shop .catalog-price small{margin:0}
#shop .catalog-buy{width:100%;margin:0!important;justify-content:center;border-radius:999px;padding:13px 16px;font-size:1rem}
#shop .catalog-buy .cb-i{display:none}
/* the base sheet hides the button's label on phones (it draws a round icon
   button there); these shelves carry the words on the pill instead */
#shop .catalog-buy .cb-t{position:static!important;width:auto!important;height:auto!important;
  clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:nowrap;margin:0!important}

/* the sticker sits ON the card, so the card stops clipping and the photograph
   keeps the card's rounded top on its own */
#shop .catalog-card{overflow:visible!important}
#shop .catalog-photo{border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}

/* PalmPop cans float free; the dates keep their photograph edge to edge */
.catalog-card[data-product^="palmpop"],.catalog-card[data-product^="palmpop"] .catalog-photo{background:transparent!important;overflow:visible!important}
.catalog-card[data-product^="palmpop"] .catalog-photo img{transform:scale(min(1.18,var(--fit,9)))}

@media (max-width:900px){
  #shop .catalog-rail:not(.is-grid){gap:6px;scroll-snap-type:x mandatory;padding:2px 0 14px}
  /* spacers, so the first and last card can also come to rest in the middle */
  #shop .catalog-rail:not(.is-grid)::before,#shop .catalog-rail:not(.is-grid)::after{
    content:"";flex:0 0 calc((100% - min(76vw,320px))/2)}
  #shop .catalog-rail:not(.is-grid) .catalog-card{flex:0 0 min(76vw,320px);scroll-snap-align:center}
  #shop .catalog-name{font-size:1.5rem}
  .catalog-card[data-product^="palmpop"] .catalog-photo{aspect-ratio:.9}
  .catalog-card[data-product^="palmpop"] .catalog-photo img{transform:scale(min(1.26,var(--fit,9)))}
}

/* phones and tablets: the card resting in the middle of the screen zooms a
   little, the way a desktop photograph does under the pointer */
@media (hover:none),(max-width:1099px){
  .catalog-card .catalog-photo > img,.catalog-card .catalog-photo > .flq{transition:transform .7s cubic-bezier(.19,1,.22,1)}
  .catalog-card.pp-focus .catalog-photo > img,.catalog-card.pp-focus .catalog-photo > .flq{transform:scale(1.07)}
  .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img{transform:scale(min(1.28,var(--fit,9)))}
}
@media (max-width:900px){
  .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img{transform:scale(min(1.36,var(--fit,9)))}
}
@media (prefers-reduced-motion:reduce){.catalog-card.pp-focus .catalog-photo img,.catalog-card.pp-focus .catalog-photo .flq{transform:none}}

/* what is new gets a gold starburst, the way a tag is stuck on a box */
.catalog-card .product-state.new{position:absolute;inset-inline-end:10px;inset-inline-start:auto;top:10px;bottom:auto;z-index:4;
  display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:0;rotate:-8deg;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23E9A93A' d='M50.0,2.0%20L59.6,14.3%20L74.0,8.4%20L76.2,23.8%20L91.6,26.0%20L85.7,40.4%20L98.0,50.0%20L85.7,59.6%20L91.6,74.0%20L76.2,76.2%20L74.0,91.6%20L59.6,85.7%20L50.0,98.0%20L40.4,85.7%20L26.0,91.6%20L23.8,76.2%20L8.4,74.0%20L14.3,59.6%20L2.0,50.0%20L14.3,40.4%20L8.4,26.0%20L23.8,23.8%20L26.0,8.4%20L40.4,14.3Z'/%3E%3C/svg%3E");
  color:var(--palm-900)!important;font:700 .74rem/1 var(--mono);letter-spacing:0;text-transform:none;padding-bottom:.1em;
  box-shadow:none;filter:drop-shadow(0 6px 10px rgba(90,52,10,.28))}
html[dir="rtl"] .catalog-card .product-state.new{font-size:.82rem;padding:0 0 .6em}
@media (max-width:900px){.catalog-card .product-state.new{width:58px;height:58px;font-size:.7rem}}
/* the other two stay quiet pills: sold out in palm, in-season in gold */
.catalog-card .product-state:not(.new){background:var(--palm-900)!important;color:var(--sand-50)!important;
  border-radius:999px;padding:5px 11px;font-weight:500;box-shadow:0 6px 12px -6px rgba(14,58,44,.5)}
.catalog-card .product-state.season{background:var(--sukkari-400)!important;color:var(--palm-900)!important}

/* Arabic: the cursive rule from the base sheet stays in force */
html[dir="rtl"] body{font-family:var(--ar-ui)}

@media (prefers-reduced-motion:reduce){.pp-plate img{transition:none;transform:scale(1.08)}}

@media print{.pp-anim .pp-verse-poem .w{opacity:1!important;transform:none!important;filter:none!important}.pp-bag,.pp-shade{display:none!important}}

/* ---------------------------------------------------------------- the hero IS the film (combined shop)
   Full-bleed like a drinks brand's homepage: edge to edge under the header, no card, no copy.
   The headline stays in the page for search and screen readers, visually hidden. */
.pp-stage.pp-stage-film{display:block!important;min-height:0!important;border-radius:0!important;background:none!important;
  overflow:hidden;isolation:auto;width:calc(100vw - var(--sbw,0px));max-width:none;margin-inline:calc(50% - 50vw + var(--sbw,0px) / 2)}
.pp-stage-film::before,.pp-stage-film::after,.pp-stage-film .pp-shade{display:none!important}
.pp-stage-film .pp-copy{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pp-stage-film .pp-art-film{position:relative;display:block;height:auto!important;min-height:0!important;padding:0!important}
.pp-film{position:relative;margin:0;width:100%}
.pp-film-v{display:block;width:100%;height:clamp(460px,calc(100svh - 150px),56.25vw);object-fit:cover;object-position:50% 58%;
  background:#E9C98C url(palmpop/palmpop-ad-poster.webp?v=10) center/cover}
.pp-film-ctl{position:absolute;inset-inline-start:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,32px);display:flex;gap:10px}
.pp-film-ctl button{width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--sand-50,#FBF4E8);color:var(--palm-900,#0E3A2C);box-shadow:0 6px 18px -6px rgba(14,58,44,.45)}
.pp-film-ctl button:hover{background:#fff}
.pp-film-ctl button:focus-visible{outline:3px solid var(--sukkari-400,#E9A93A);outline-offset:2px}
.pp-film-ctl svg{width:22px;height:22px}
.pp-film-snd[aria-pressed="false"] .w1,.pp-film-snd[aria-pressed="false"] .w2{display:none}
.pp-film-snd[aria-pressed="true"] .x{display:none}
.pp-film-play[aria-pressed="false"] .pl{display:none}
.pp-film-play[aria-pressed="true"] .pa{display:none}
/* the facts sit under the film, not over it */
.hero:has(.pp-stage-film) .pp-facts{margin-top:18px!important}
@media (max-width:700px){
  /* phones show the whole film, the same frame as desktop: full width, its own 16:9 shape, nothing cropped */
  .pp-film-v{height:auto!important;aspect-ratio:16/9;object-fit:cover}
  .pp-film-ctl button{width:44px;height:44px}
}

/* ---------------------------------------------------------------- final touches (26 Sep 2026) */
/* benefits: the desktop "wide" card stacks like the others on a one-column phone */
@media (max-width:700px){
  #benefits .benefit:nth-child(3):last-child{flex-direction:column!important;align-items:stretch!important;gap:0!important}
  #benefits .benefit:nth-child(3):last-child .bi{margin-bottom:16px!important}
}
/* reviews: while there are none (and no review form is open) the section and its links step aside */
.pp-voices-empty{display:none!important}
/* the PalmPop band: the whole can lineup stays inside the rounded panel */
.pp-band-art img{left:5%!important;right:5%!important;width:90%!important}

/* ══════════════════════════════════════════════════════════════════════
   ONE FLOWING PAGE (26 Sep 2026)
   Sections are told apart by full-width colour bands, not by boxes and numbered labels.
   A band paints edge to edge with a spread shadow clipped to its own height, so the
   content keeps the page's gutters. Rhythm: sand · mint · dune · sand · butter · sand ·
   palm · sand · gold.
   ══════════════════════════════════════════════════════════════════════ */
.sec-label .num{border-bottom:0!important;padding-bottom:0!important;width:auto!important}
.sec-label{margin-bottom:clamp(22px,3vw,36px)!important;gap:8px!important}
#palmpop,#flight,#ritual,#verse,#harvest,section:has(> .sweetband),#corporate{
  position:relative;background:var(--band)!important;box-shadow:0 0 0 100vmax var(--band)!important;clip-path:inset(0 -100vmax);
  padding-top:clamp(52px,7vw,96px)!important;padding-bottom:clamp(52px,7vw,96px)!important;margin-top:clamp(40px,6vw,80px)}
#flight{margin-top:0!important}   /* follows the PalmPop band: bands touch, no sliver of sand */
#palmpop{--band:var(--mint-100,#D5EEDF)}
#flight{--band:var(--dune-100,#F6E3BF)}
#ritual,#verse,#harvest{--band:var(--butter-100,#FBEFC9)}
#verse{margin-top:0!important;padding-top:0!important}          /* the verse continues the story */
section:has(> .sweetband){--band:var(--palm-900,#0E3A2C)}
#corporate{--band:var(--sukkari-400,#E9A93A);border:0!important}
/* the boxes inside a band dissolve into it */
#palmpop .pp-band,#flight .flight-card,section:has(> .sweetband) .sweetband,#corporate .corp-inner,#verse .pp-verse{
  background:transparent!important;border-radius:0!important;box-shadow:none!important;border:0!important}
#palmpop .pp-band{overflow:visible}
#flight .flight-card{padding:0!important;margin-top:0!important}
section:has(> .sweetband) .sweetband{padding-inline:0!important}
#corporate .corp-inner{padding-block:0!important}
#corporate.corp-band{padding-inline:0!important}
/* the quiz sits on the page itself; only its answers are cards */
#quiz .quiz-card{background:transparent!important;padding:0!important;border-radius:0!important}
@media (max-width:900px){
  #palmpop .pp-band-copy{padding:26px 0 0!important}
  #palmpop .pp-band-art{min-height:260px}
  #verse .pp-verse{padding-inline:0!important}
}
/* the gifting band runs straight into the welcome strip: no sliver of sand between */
main:has(> #corporate:last-child) + .welcome-invite, #corporate ~ .welcome-invite, .welcome-invite{margin-top:0!important}

/* ── THE PRODUCT-PHOTO STANDARD (every sheet, every product, from now on) ─────────────
   A product sheet opens on a square photo, inset 9px from the sheet edge, with 15px rounded
   corners and the photo filling it (cover). The date sheet set the standard; the swipe
   gallery (PalmPop, the tasting box and anything added later) follows it. */
#infoModal .pp-gallery{padding:9px 0 0!important}
#infoModal .pp-shot{padding:0 9px!important;display:block!important}
#infoModal .pp-shot > img{display:block;width:100%!important;height:auto!important;aspect-ratio:1/1;max-height:none!important;
  object-fit:cover!important;border-radius:15px!important;filter:none!important;background:var(--dune-100,#F6E3BF)}
#infoModal .pp-shot .pp-frame{border-radius:15px!important;overflow:hidden;width:100%!important;max-width:none!important;aspect-ratio:1/1;height:auto!important}
#infoModal .pp-dots{margin-top:12px}
@media (min-width:901px){
  #infoModal .info-card > .pp-gallery{padding:28px 0 14px!important}
  #infoModal .info-card > .pp-gallery .pp-shot{height:100%;display:grid!important;place-items:center}
  #infoModal .info-card > .pp-gallery .pp-shot > img{width:auto!important;height:100%!important;max-width:100%}
}

/* the film starts exactly on the header's bottom line (the header height is measured, --pp-hdr) */
.hero:has(.pp-stage-film){padding-top:var(--pp-top,92px)!important}   /* --pp-top: set once (bar + header), never changes while scrolling; --pp-hdr follows the sliding header and moved the whole page on every sheet open (2026-10-11) */
@media (max-width:700px){
  .hero:has(.pp-stage-film){padding-top:var(--pp-top,80px)!important}

}

/* the PalmPop band carries the real sign-painter wordmark, «بالم بوب» under the swash end as on the cans */
.pp-band-lockup{position:relative;margin:4px 0 22px;width:min(440px,100%);line-height:0}
.pp-band-wm{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(14,58,44,.12))}
.pp-band-wm-ar{position:absolute;left:62%;top:93%;width:27%;height:auto}
.pp-band-lockup + .pp-band-h{margin-top:36px}
@media (max-width:900px){ .pp-band-lockup{width:min(320px,86%);margin-bottom:18px} }

/* one zoom for every free-floating product: it rests a step below its limit and grows to it when
   centred (phones) or hovered (desktop). --fit is the largest size that stays inside the card
   (measured in palmpop-layer.js), so a wide photo like the Mix 12 lineup grows like a can does,
   just within its own card, and never shrinks when it comes to the centre. */
.catalog-card[data-product^="palmpop"] .catalog-photo img{transform:scale(min(1.1,calc(var(--fit,9) * .88)))}   /* resting size; not !important since 2026-10-01 so the lean-in motion can move it */
@media (hover:none),(max-width:1099px){
  .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img{transform:scale(min(1.28,var(--fit,9)))!important}
}
@media (max-width:900px){
  .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img{transform:scale(min(1.36,var(--fit,9)))!important}
}
@media (hover:hover) and (min-width:1100px){
  #shop .catalog-card[data-product^="palmpop"]:hover .catalog-photo img{transform:scale(min(1.24,var(--fit,9)))!important}
}
@media (prefers-reduced-motion:reduce){
  .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img,
  #shop .catalog-card[data-product^="palmpop"]:hover .catalog-photo img{transform:scale(min(1.1,calc(var(--fit,9) * .88)))!important}
}

/* ---------------------------------------------------------------- Find yours (the two-tap quiz) */
#quizCard.fy .fy-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;min-height:28px}
#quizCard.fy .fy-step{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--caramel-700,#8A4B17);font-variant-numeric:tabular-nums}
#quizCard.fy .fy-back{border:0;background:none;padding:6px 0;font:inherit;font-weight:700;font-size:.86rem;color:var(--palm-900);cursor:pointer}
#quizCard.fy .quiz-q{margin:0 0 18px}
#quizCard.fy .fy-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#quizCard.fy .fy-opts.is-odd .fy-opt:last-child{grid-column:1 / -1}
#quizCard.fy .fy-opt{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:92px;padding:16px;text-align:start;
  border-radius:18px;background:#fff;border:1.5px solid transparent;box-shadow:0 8px 22px -14px rgba(14,58,44,.35);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s}
#quizCard.fy .fy-opt b{font-family:var(--disp);font-weight:700;font-size:1.12rem;line-height:1.15;color:var(--palm-900)}
html[dir="rtl"] #quizCard.fy .fy-opt b{font-family:var(--ar-disp)}
#quizCard.fy .fy-opt span{font-size:.8rem;color:var(--ink-muted)}
#quizCard.fy .fy-opt:hover{border-color:var(--sukkari-400)}
#quizCard.fy .fy-opt:active{transform:scale(.97)}
#quizCard.fy .fy-opt:focus-visible{outline:3px solid var(--sukkari-400);outline-offset:2px}
#quizCard.fy .fy-result{display:grid;grid-template-columns:1fr;gap:18px}
#quizCard.fy .fy-photo{aspect-ratio:1;border-radius:15px;overflow:hidden;background:var(--dune-100)}
#quizCard.fy .fy-photo img{width:100%;height:100%;object-fit:cover;display:block}
#quizCard.fy .fy-price{font-size:1.6rem;color:var(--palm-900);margin:6px 0 14px}
#quizCard.fy .quiz-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (min-width:901px){ #quizCard.fy .fy-result{grid-template-columns:minmax(0,420px) 1fr;align-items:center;gap:40px}
  #quizCard.fy .fy-opts{grid-template-columns:repeat(4,1fr)} #quizCard.fy .fy-opts.is-odd{grid-template-columns:repeat(5,1fr)}
  #quizCard.fy .fy-opts.is-odd .fy-opt:last-child{grid-column:auto} }
#quizCard.fy .fy-photo{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}
#quizCard.fy .fy-photo > *{border-radius:15px}
#quizCard.fy .fy-body{text-align:start}
#quizCard.fy .quiz-actions{justify-content:flex-start!important;flex-direction:row!important;align-items:center!important}
#quizCard.fy .quiz-actions .mag{min-width:170px;justify-content:center}

/* ---------------------------------------------------------------- Our Story: palm to cup */
#ritual.pp-route-wrap{padding-bottom:clamp(28px,4vw,48px)!important}
.pp-route{display:grid;gap:clamp(20px,4vw,56px)}
.pp-route-kicker,.pp-harvest-kicker{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--caramel-700,#8A4B17);margin:0 0 10px}
html[dir="rtl"] .pp-route-kicker,html[dir="rtl"] .pp-harvest-kicker{letter-spacing:0;font-size:.9rem}
.pp-route-h{font-family:var(--disp);font-weight:900;font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.02;letter-spacing:-.02em;color:var(--palm-900);margin:0;text-wrap:balance}
html[dir="rtl"] .pp-route-h{font-family:var(--ar-disp);font-weight:700;line-height:1.35;letter-spacing:0}
.pp-route-est{margin:14px 0 0;font-size:.86rem;font-weight:700;color:var(--ink-muted)}
.pp-route-map{position:relative;display:grid;grid-template-columns:78px 1fr;gap:6px;max-width:560px}
.pp-route-svg{width:78px;height:600px;overflow:visible}
.pp-route-base{fill:none;stroke:rgba(107,52,24,.22);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}
.pp-route-line{fill:none;stroke:var(--sukkari-400,#E9A93A);stroke-width:4;stroke-linecap:round}
.pp-route-pins circle{fill:var(--butter-100,#FBEFC9);stroke:rgba(107,52,24,.35);stroke-width:2;transition:fill .35s,stroke .35s}
.pp-route-pins circle.on{fill:var(--palm-900,#0E3A2C);stroke:var(--palm-900,#0E3A2C)}
.pp-route-date{filter:drop-shadow(0 3px 4px rgba(107,52,24,.35))}
.pp-route-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(4,150px)}
.pp-route-stops li{display:flex;flex-direction:column;justify-content:center;gap:4px;height:150px;opacity:.38;transform:translateX(6px);
  transition:opacity .45s ease-out,transform .45s cubic-bezier(.19,1,.22,1)}
html[dir="rtl"] .pp-route-stops li{transform:translateX(-6px)}
.pp-route-stops li.on{opacity:1;transform:none}
.pp-route-place{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--caramel-700,#8A4B17)}
html[dir="rtl"] .pp-route-place{letter-spacing:0;font-size:.86rem}
.pp-route-stops b{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,4.6vw,1.75rem);line-height:1.15;color:var(--palm-900)}
html[dir="rtl"] .pp-route-stops b{font-family:var(--ar-disp);line-height:1.5}
@media (min-width:901px){ .pp-route{grid-template-columns:1fr 1fr;align-items:start}
  .pp-route-head{position:sticky;top:140px} }
@media (prefers-reduced-motion:reduce){ .pp-route-stops li{opacity:1;transform:none;transition:none} }

/* ---------------------------------------------------------------- This week in Al-Qassim */
#harvest{margin-top:0!important;padding-top:clamp(28px,4vw,48px)!important}
.pp-harvest{border-top:1px solid rgba(107,52,24,.16);padding-top:clamp(36px,5vw,56px);text-align:center}
.pp-harvest-h{font-family:var(--disp);font-weight:900;font-size:clamp(1.9rem,5.4vw,3rem);line-height:1.05;letter-spacing:-.015em;color:var(--palm-900);margin:0}
html[dir="rtl"] .pp-harvest-h{font-family:var(--ar-disp);font-weight:700;line-height:1.4;letter-spacing:0}
.pp-harvest-next{margin:8px 0 0;font-family:var(--text);font-size:1.1rem;color:var(--date-700,#6B3418)}
.pp-stages{list-style:none;padding:0;margin:clamp(28px,5vw,44px) auto 0;max-width:720px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative}
.pp-stages::before{content:"";position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:repeating-linear-gradient(90deg,rgba(107,52,24,.3) 0 3px,transparent 3px 9px)}
.pp-stages li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 2px}
.pp-stages b{font-family:var(--disp);font-weight:700;font-size:1rem;color:var(--palm-900)}
html[dir="rtl"] .pp-stages b{font-family:var(--ar-disp)}
.pp-stages span{font-size:.74rem;line-height:1.3;color:var(--ink-muted)}
.pp-stage-date{position:relative;display:block;width:34px;height:48px;margin:4px 0 6px;border-radius:50% 50% 48% 48% / 58% 58% 42% 42%;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.55) 0 9%,transparent 11%),radial-gradient(circle at 50% 40%,var(--c),var(--c2) 95%);
  box-shadow:inset -3px -5px 8px rgba(0,0,0,.14);z-index:1;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.pp-stage-date.is-half{background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.55) 0 9%,transparent 11%),linear-gradient(180deg,#EDC53E 0 46%,var(--c) 46% 58%,var(--c2) 100%)}
.pp-stages li.is-past{opacity:.55}
.pp-stages li.is-now .pp-stage-date{transform:scale(1.28)}
.pp-stages li.is-now::before{content:"";position:absolute;top:-2px;width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,169,58,.55),rgba(233,169,58,0) 70%);animation:ppGlow 2.6s ease-in-out infinite alternate}
.pp-now-tag{position:absolute;top:-22px;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--palm-900);color:var(--sand-50);z-index:2}
html[dir="rtl"] .pp-now-tag{letter-spacing:0;font-size:.72rem}
@keyframes ppGlow{from{transform:scale(.85);opacity:.7}to{transform:scale(1.15);opacity:1}}
@media (prefers-reduced-motion:reduce){ .pp-stages li.is-now::before{animation:none} }
.pp-harvest-note{max-width:44ch;margin:clamp(24px,4vw,36px) auto 0;font-size:.95rem;line-height:1.6;color:var(--ink-muted)}

/* ---------------------------------------------------------------- the loader: one mark, one moment
   Only the palmir / بالمير lockup. Its two date dots drop into place like a date falling from the
   palm; a thin palm line fills below; one bilingual line says what we are. */
#loader .loader-mark{display:none!important}
#loader .loader-word{margin:0!important}
.pp-loader-lockup{display:block;width:min(230px,58vw)!important;height:auto!important;overflow:visible}
.pp-loader-lockup g[transform^="rotate"]{translate:0 -46px;opacity:0;animation:ppDateDrop .9s cubic-bezier(.34,1.45,.5,1) .35s forwards}
.pp-loader-lockup g[transform^="translate(116"] g[transform^="rotate"]{animation-delay:.5s}
@keyframes ppDateDrop{0%{translate:0 -46px;opacity:0}40%{opacity:1}100%{translate:0 0;opacity:1}}
#loader .loader-bar{width:min(150px,40vw)!important;margin:26px auto 0!important;height:2px!important}
#loader .loader-sub{display:flex!important;align-items:center;gap:10px;justify-content:center;margin-top:16px!important;
  font-size:.7rem!important;letter-spacing:.2em!important;color:var(--caramel-700,#8A4B17)!important}
#loader .loader-sub i{width:4px;height:4px;border-radius:50%;background:var(--sukkari-400,#E9A93A)}
#loader .loader-sub [lang="ar"]{letter-spacing:0!important;font-family:var(--ar-ui);font-size:.86rem;text-transform:none}
@media (prefers-reduced-motion:reduce){.pp-loader-lockup g[transform^="rotate"]{animation:none;translate:0 0;opacity:1}}

/* ---------------------------------------------------------------- product sheet titles: one name, one language */
#infoModal .info-ar{display:none!important}
#infoModal .info-eyebrow{margin:0 0 4px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--caramel-700,#8A4B17)}
html[dir="rtl"] #infoModal .info-eyebrow,html[dir="rtl"] #quizCard .info-eyebrow{letter-spacing:0;font-size:.86rem}
#quizCard .info-eyebrow{margin:8px 0 2px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--caramel-700,#8A4B17)}

/* ══════════════════════════════════════════════════════════════════════
   ONE FLOWING PAGE, part 2 (26 Sep 2026): 11 blocks became 7.
   Not sure yet?  = #quiz + #flight, one dune band
   Why dates      = #why ("Sweet as candy") + #benefits cards, one palm band
   Shipping & returns lives in the footer's Care column (the section is kept, hidden, for old links)
   ══════════════════════════════════════════════════════════════════════ */
#quiz,#flight,#why,#benefits{position:relative;background:var(--band)!important;box-shadow:0 0 0 100vmax var(--band)!important;clip-path:inset(0 -100vmax)}
#quiz,#flight{--band:var(--dune-100,#F6E3BF)}
#why,#benefits{--band:var(--palm-900,#0E3A2C)}
#quiz{padding-top:clamp(52px,7vw,96px)!important;padding-bottom:clamp(20px,3vw,32px)!important;margin-top:0!important}
#flight{padding-top:clamp(20px,3vw,32px)!important;padding-bottom:clamp(52px,7vw,96px)!important;margin-top:0!important}
#palmpop + #quiz{margin-top:0!important}
#flight .sec-label .num{display:none}
#flight .sec-label{margin-bottom:14px!important;padding-top:22px;border-top:1px solid rgba(107,52,24,.16)}
#flight .sec-label h2{font-size:clamp(1.4rem,4.4vw,2rem)!important}
#flight .flight-card{background:var(--sand-50,#FBF4E8)!important;border-radius:28px!important;padding:14px!important}
/* the old separate "Sweet as candy" box dissolves; its stats repeated the story (2016) and the harvest (1447) */
section#why{margin-top:0!important;padding-top:clamp(52px,7vw,96px)!important;padding-bottom:clamp(8px,2vw,20px)!important}
section#why .sweetstats{display:none!important}
section#why .sweetband-grid{grid-template-columns:1fr!important}
#benefits{margin-top:0!important;padding-top:clamp(12px,2vw,24px)!important;padding-bottom:clamp(52px,7vw,96px)!important}
#benefits .sec-label{display:none!important}
#benefits .more-btn,#benefits .more-btn *{color:var(--sand-50,#FBF4E8)!important;border-color:rgba(251,244,232,.5)!important}
#shipping{display:none!important}
/* the menu: Shop · Find yours · Our story · PalmPop · Gifting */
nav.links a[href="#flight"],nav.links a[href="#benefits"],.mnav a[href="#flight"],.mnav a[href="#benefits"]{display:none!important}
#flight + #ritual, #flight ~ #ritual{margin-top:0!important}   /* bands that meet, touch */
#corporate.corp-band{margin-top:0!important}   /* follows the palm band directly while Voices waits for reviews */

/* ---------------------------------------------------------------- the film's end card
   Sized to the sky above the cans (the lineup's tops sit about a third of the way down the frame),
   so the lockup and its line never touch a can. The Arabic hangs below the wordmark, so the line
   keeps clear of it (--wm = lockup width). */
.pp-endcard{--wm:clamp(180px,19vw,280px);position:absolute;left:0;right:0;top:2.6%;display:flex;flex-direction:column;align-items:center;
  opacity:0;pointer-events:none;z-index:2;will-change:opacity,translate}
.pp-endcard-lockup{position:relative;width:var(--wm);line-height:0;margin-bottom:calc(var(--wm) * .09)}
.pp-endcard-lockup img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 14px rgba(251,244,232,.55)) drop-shadow(0 2px 3px rgba(14,58,44,.18))}
.pp-endcard-lockup .ar{position:absolute;left:62%;top:93%;width:27%}
.pp-endcard p{margin:6px 0 0;font-family:var(--disp);font-weight:500;font-size:clamp(.9rem,1.2vw,1.1rem);letter-spacing:.02em;color:var(--palm-900);
  text-shadow:0 1px 10px rgba(251,244,232,.85)}
html[dir="rtl"] .pp-endcard p{font-family:var(--ar-disp);letter-spacing:0}
@media (max-width:700px){ .pp-endcard{--wm:44vw;top:3%} .pp-endcard p{font-size:.86rem;margin-top:4px} }
@media (prefers-reduced-motion:reduce){ .pp-endcard{display:none} }

/* phones play the vertical cut (camera moves baked in): centre it, never pan it live */
@media (max-width:700px){ .pp-film-v{object-position:50% 50%!important} }

/* ---------------------------------------------------------------- the language menu: English · Español · العربية */
/* The button: just the flag, in a circle the size of the search button beside it. The language's
   own letter is still there for screen readers, and shows instead of the flag where flags can't draw
   (Windows paints them as two plain letters). */
#langBtn.langbtn{display:inline-grid;place-items:center;width:40px;height:40px;min-height:0;padding:0!important;flex:none;
  border-radius:50%;direction:ltr;letter-spacing:0;line-height:1;overflow:hidden}
#langBtn .pp-flag{font-size:1.3rem;line-height:1;display:block;transform:translateY(.5px)}
#langBtn .pp-lang-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.pp-noflag #langBtn .pp-lang-l{position:static;width:auto;height:auto;clip:auto;font-family:var(--ui,inherit);font-weight:700;font-size:.8rem}
html.pp-noflag #langBtn .pp-lang-l[lang="ar"]{font-family:var(--ar-ui,inherit);font-size:.95rem}
#langBtn:hover{background:var(--dune-100)!important;color:var(--palm-900)}
@media (max-width:700px){ #langBtn.langbtn{width:38px;height:38px} #langBtn .pp-flag{font-size:1.2rem} }
.pp-lang-caret{display:none}
/* The menu: every row reads the same way, left to right: flag, then the language's own name. */
.pp-lang-menu{position:fixed;z-index:400;min-width:164px;padding:6px;border-radius:18px;background:var(--sand-50,#FBF4E8);direction:ltr;
  box-shadow:0 14px 40px -12px rgba(14,58,44,.4),0 0 0 1px rgba(14,58,44,.1);display:flex;flex-direction:column;gap:2px;animation:ppMenuIn .18s ease-out}
.pp-lang-menu button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border-radius:12px;
  font-family:var(--ui,inherit);font-weight:600;font-size:1rem;line-height:1.2;color:var(--palm-900,#0E3A2C);direction:ltr;text-align:left}
.pp-lang-menu button [lang="ar"]{font-family:var(--ar-ui,inherit);font-size:1.02rem}
.pp-lang-menu button:hover,.pp-lang-menu button:focus-visible{background:var(--dune-100,#F6E3BF)}
.pp-lang-menu button[aria-checked="true"]{background:var(--palm-900,#0E3A2C);color:var(--sand-50,#FBF4E8)}
@keyframes ppMenuIn{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.pp-lang-menu{animation:none}}

/* ---------------------------------------------------------------- the filter sheet (palmpop-filter.js)
   A bottom sheet on phones, a centred panel on wide screens. Chips carry their own count and grey
   out when they lead nowhere; the matches list lives inside the sheet so every tap shows its result. */
.ppf-open-chip{display:inline-flex;align-items:center;gap:8px;flex:none;padding:10px 16px;border-radius:999px;
  background:var(--palm-900);color:var(--sand-50);border:1.5px solid var(--palm-900);font:600 .92rem/1 var(--ui,inherit);cursor:pointer}
.ppf-open-chip svg{width:18px;height:18px}
.ppf-open-chip b{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--sukkari-400);color:var(--palm-900);
  font:700 .75rem/20px var(--ui,inherit);text-align:center}
.ppf-open-chip:active{transform:scale(.97)}
/* no overflow:hidden on the page while the sheet is up: on phones it shifted the whole view.
   The sheet keeps its own scrolling, and the backdrop and fixed parts don't pass touches through. */
.ppf-scrim,.ppf-grab,.ppf-head,.ppf-foot{touch-action:none}
.ppf{position:fixed;inset:0;z-index:420}
.ppf-scrim{position:absolute;inset:0;background:rgba(14,58,44,.42);opacity:0;transition:opacity .22s ease}
.ppf.is-in .ppf-scrim{opacity:1}
.ppf-panel{position:absolute;left:0;right:0;bottom:0;max-height:min(88vh,860px);display:flex;flex-direction:column;
  background:var(--sand-50);color:var(--palm-900);border-radius:26px 26px 0 0;box-shadow:0 -18px 50px -20px rgba(14,58,44,.45);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,0,0,1);padding-bottom:env(safe-area-inset-bottom,0px)}
.ppf.is-in .ppf-panel{transform:none}
@media (min-width:760px){
  .ppf-panel{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,92vw);max-height:84vh;border-radius:26px;
    transform:translate(-50%,-46%);opacity:0;transition:transform .24s cubic-bezier(.2,0,0,1),opacity .2s}
  .ppf.is-in .ppf-panel{transform:translate(-50%,-50%);opacity:1}
  .ppf-grab{display:none}
}
.ppf-grab{width:44px;height:5px;border-radius:3px;background:rgba(14,58,44,.2);margin:10px auto 0}
.ppf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 8px}
.ppf-title{margin:0;font-size:1.5rem;line-height:1.1}
.ppf-title small{font:600 .8rem var(--ui,inherit);color:var(--caramel-500);margin-inline-start:6px;vertical-align:middle}
.ppf-x{all:unset;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--dune-100)}
.ppf-x svg{width:18px;height:18px}
.ppf-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 12px;display:flex;flex-direction:column;gap:18px}
.ppf-group h4{margin:0 0 10px;font:700 .78rem/1 var(--ui,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
html[dir="rtl"] .ppf-group h4{letter-spacing:0;font-size:.9rem}
.ppf-group h4 small{font-weight:500;letter-spacing:0;text-transform:none;margin-inline-start:4px}
.ppf-row{display:flex;flex-wrap:wrap;gap:8px}
.ppf-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;
  border-radius:999px;background:var(--white);border:1.5px solid rgba(14,58,44,.16);font:600 .95rem/1.1 var(--ui,inherit);color:var(--palm-900);
  transition:background .15s,border-color .15s,color .15s}
html[dir="rtl"] .ppf-chip{font-family:var(--ar-ui,inherit)}
.ppf-chip:hover{border-color:var(--palm-900)}
.ppf-chip:focus-visible,.ppf-item:focus-visible,.ppf-pill:focus-visible,.ppf-open-chip:focus-visible{outline:2.5px solid var(--sukkari-400);outline-offset:2px}
.ppf-chip.is-on{background:var(--palm-900);border-color:var(--palm-900);color:var(--sand-50)}
.ppf-chip[disabled]{opacity:.38;cursor:default}
.ppf-n{font:600 .75rem/1 var(--ui,inherit);padding:3px 7px;border-radius:9px;background:var(--dune-100);color:var(--palm-900)}
.ppf-chip.is-on .ppf-n{background:var(--sukkari-400)}
.ppf-radio{min-height:38px;font-size:.88rem}
.ppf-dots{display:inline-flex;gap:3px}
.ppf-dots i{width:7px;height:7px;border-radius:50%;background:rgba(14,58,44,.15)}
.ppf-dots i.on{background:var(--sukkari-400)}
.ppf-chip.is-on .ppf-dots i{background:rgba(251,244,232,.3)} .ppf-chip.is-on .ppf-dots i.on{background:var(--sukkari-400)}
.ppf-live{border-top:1px solid rgba(14,58,44,.1);padding-top:14px}
.ppf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ppf-item{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;
  padding:6px 8px 6px 6px;border-radius:16px;background:var(--white)}
.ppf-item:hover{background:var(--butter-100)}
.ppf-thumb{width:52px;height:52px;border-radius:12px;overflow:hidden;background:var(--dune-100);display:grid;place-items:center}
.ppf-thumb img,.ppf-thumb svg{width:100%;height:100%;object-fit:cover;display:block}
.ppf-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.ppf-meta b{font:600 .98rem/1.2 var(--ui,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir="rtl"] .ppf-meta b{font-family:var(--ar-ui,inherit)}
.ppf-meta span{display:flex;align-items:center;gap:8px}
.ppf-meta em{font:600 .72rem var(--ui,inherit);font-style:normal;color:var(--caramel-500)}
.ppf-price{font:700 .95rem var(--ui,inherit);white-space:nowrap}
.ppf-empty{margin:0;color:var(--ink-muted);line-height:1.5}
.ppf-foot{display:flex;gap:10px;align-items:center;padding:12px 20px 16px;border-top:1px solid rgba(14,58,44,.1);background:var(--sand-50);border-radius:0 0 26px 26px}
.ppf-clear{all:unset;cursor:pointer;padding:12px 14px;font:600 .95rem var(--ui,inherit);color:var(--palm-900);text-decoration:underline;text-underline-offset:3px}
.ppf-clear[disabled]{opacity:.35;cursor:default}
.ppf-show{flex:1;justify-content:center;min-height:50px}
.ppf-show[disabled]{opacity:.5}
/* the choices, kept in sight above the results */
.ppf-pills{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.ppf-pills-n{font:700 .9rem var(--ui,inherit);margin-inline-end:4px}
.ppf-pill{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--palm-900);color:var(--sand-50);font:600 .85rem var(--ui,inherit)}
.ppf-pill svg{width:14px;height:14px}
.ppf-pill.ppf-edit{background:transparent;color:var(--palm-900);border:1.5px solid var(--palm-900)}
@media (prefers-reduced-motion:reduce){ .ppf-panel,.ppf-scrim{transition:none} }

/* ── PRE-ORDER (2026-09-27): PalmPop "Coming soon" ───────────────────────────── */
.pp-soon-tag{display:inline-block;font:600 12px/1 var(--sans,inherit);letter-spacing:.06em;text-transform:uppercase;
  color:#7A4A12;background:#FBE7B8;border-radius:999px;padding:6px 10px}
.pp-soon-packs{margin:14px 0 0;font-size:14px;color:rgba(14,58,44,.72)}
.out-note.pp-soon{margin-top:14px}
.out-note.pp-soon .mag{margin-top:12px;display:inline-flex}
.pp-soon-price{font:500 13px/1.3 var(--sans,inherit);color:rgba(14,58,44,.66);letter-spacing:0}

/* ── PACKS YOU CAN SEE: mini-can count + pack chips + fade (2026-09-28) ───────── */
.pp-shots{transition:opacity .17s ease}
.pp-shots.pp-fade{opacity:0}
.pp-cans{display:inline-grid;gap:2px;justify-content:center;align-items:end;line-height:0}
.pp-cans img{width:auto;display:block;filter:drop-shadow(0 1px 1px rgba(40,24,10,.18))}
.pp-cans.n4{grid-template-columns:repeat(4,auto)}
.pp-cans img{object-fit:cover;object-position:50% 100%}           /* the source is square: crop to the can (x 27.7%-72.3%) */
.pp-cans.n4 img{height:36px;width:18px}
.pp-cans.n12{grid-template-columns:repeat(6,auto);row-gap:2px}
.pp-cans.n12 img{height:24px;width:12px}
#infoModal .szb .pp-cans{margin:2px auto 6px}
.pp-soon-packs{margin:16px 0 6px!important;font-size:12px!important;letter-spacing:.08em;text-transform:uppercase}
.pp-packs{display:flex;gap:10px}
.pp-pack{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-height:92px;
  padding:12px 10px 10px;border:1px solid rgba(14,58,44,.18);border-radius:14px;background:transparent;color:inherit;
  font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.pp-pack b{font-size:14px;font-weight:600}
.pp-pack.on{border-color:#0E3A2C;background:rgba(14,58,44,.05);box-shadow:inset 0 0 0 1px #0E3A2C}
.pp-pack:focus-visible{outline:2px solid #0E3A2C;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.pp-shots{transition:none}}

/* ── PERFORMANCE (2026-09-28): smooth scrolling on phones and desktop ─────────────────────────────── */
/* a live blur behind the fixed header and search bar is recomputed on every scrolled frame: a near-solid
   sand of the same colour looks the same and costs nothing */
header,header.shrink,.searchbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
header,header.shrink{background-color:rgba(251,244,232,.97)!important}
.searchbar{background-color:rgba(251,244,232,.98)!important}
/* endless animations pause while off screen (palmpop-layer.js restOffscreen) */
.pp-rest,.pp-rest *{animation-play-state:paused!important}

/* messages always sit above the basket and sheets (they were hidden behind the basket) */
#toasts,.toasts{z-index:320!important}

/* the mada mark in the payment panel was caught by an old watermark rule and floated into the checkout header */
.paypanel .pp-mark{position:static!important;opacity:1!important;transform:none!important;width:auto!important;max-width:100%;margin:0 auto 10px!important}

.pp-min-note{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#FBE7B8;color:#5A3A10;font-size:14px;line-height:1.45;text-align:center}
.pp-min-note b{font-weight:700}

/* ── PHONE ROWS (2026-09-29, owner): medium cards (one and most of the next), free continuous scrolling (no one-card snapping) ── */
@media (max-width:900px){
  #shop .catalog-rail:not(.is-grid){scroll-snap-type:none!important;gap:12px!important;padding:2px 2px 14px!important}
  #shop .catalog-rail:not(.is-grid)::before,#shop .catalog-rail:not(.is-grid)::after{content:none!important;display:none!important}
  #shop .catalog-rail:not(.is-grid) .catalog-card{flex:0 0 min(54vw,236px)!important;scroll-snap-align:none!important}
  #shop .catalog-rail:not(.is-grid) .catalog-name{font-size:1.2rem}
  #shop .catalog-rail:not(.is-grid) .catalog-note{font-size:.84rem}
  #shop .catalog-rail:not(.is-grid) .catalog-card .product-state.new{width:52px;height:52px;font-size:.76rem}
  /* the card most in view leans in when the row comes to rest (owner, 2026-10-01: "the motion for each card");
     gentler than a single-card carousel, because one and a half cards share the screen */
  #shop .catalog-rail:not(.is-grid) .catalog-card.pp-focus .catalog-photo > img,
  #shop .catalog-rail:not(.is-grid) .catalog-card.pp-focus .catalog-photo > .flq{transform:scale(1.05)!important}
  #shop .catalog-rail:not(.is-grid) .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img{transform:scale(min(1.16,calc(var(--fit,9) * .94)))!important}
}

/* ── 2026-09-29 (owner) ── the Tasting Flight is made for visitors from abroad (English, Spanish);
   locals know the varieties, so the Arabic page does not show it anywhere */
html[dir="rtl"] #flight,html[dir="rtl"] a[href="#flight"],html[dir="rtl"] .catalog-card[data-product="flight"]{display:none!important}
/* PalmPop right under New arrivals, then the dates */
#varList{display:flex;flex-direction:column}
#varList > #category-palmpop{order:-1}

/* ── PHONE HEADER ICONS (2026-09-29, owner): plain icons, no circles or pill, a little bigger ──
   hit areas stay 42px; the basket count sits as a small gold badge on the cart */
@media (max-width:900px){
  #header .searchbtn,#header #langBtn.langbtn,#header .cartlink{border:0!important;background:transparent!important;box-shadow:none!important;
    width:42px!important;height:42px!important;min-height:0!important;padding:0!important;display:inline-grid!important;place-items:center;
    position:relative;color:var(--palm-900)!important;border-radius:12px!important}
  #header .searchbtn:hover,#header #langBtn.langbtn:hover,#header .cartlink:hover{background:rgba(14,58,44,.07)!important;color:var(--palm-900)!important}
  #header .searchbtn svg{width:25px!important;height:25px!important;stroke-width:1.8}
  #header .cartlink svg{width:27px!important;height:27px!important;stroke-width:1.7;color:var(--palm-900)!important;margin:0!important}
  #header .menu-btn svg{width:27px!important;height:27px!important}
  #header #langBtn .pp-flag{font-size:1.6rem!important;transform:none}
  #header .cartlink [data-i18n="nav.cart"],#header .cartlink .sep{display:none!important}
  #header .cartlink .n{position:absolute;top:2px;inset-inline-end:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--sukkari-400,#E9A93A);color:var(--palm-900)!important;font:700 .68rem/18px var(--ui,system-ui);text-align:center;
    font-variant-numeric:tabular-nums;pointer-events:none}
  #header .cartlink.pp-empty .n{display:none}
  #header > div[style]{gap:4px!important}
}

/* ── PHONE HEADER LAYOUT (2026-09-29, owner): logo in the centre; search + language on one side (the right in
   Arabic), cart + menu on the other. Equal sides keep the logo truly centred; 44px targets (Apple HIG) with air
   between them so the icons do not sit tacked together. The grid follows the page direction, so English mirrors. */
@media (max-width:900px){
  #header{display:grid!important;grid-template-columns:44px 44px 1fr auto 1fr 44px 44px;align-items:center;column-gap:6px;justify-content:stretch!important}
  #header > nav.links{display:none!important}
  #header > div[style]{display:contents!important}
  #header .searchbtn{grid-column:1;grid-row:1}
  #header #langBtn.langbtn{grid-column:2;grid-row:1}
  #header > .logo{grid-column:4;grid-row:1;justify-self:center;margin:0!important}
  #header .cartlink{grid-column:6;grid-row:1}
  #header .menu-btn{grid-column:7;grid-row:1;width:44px!important;height:44px!important;display:inline-grid!important;place-items:center;margin:0!important}
  #header .searchbtn,#header #langBtn.langbtn,#header .cartlink{width:44px!important;height:44px!important;justify-self:center}
}
/* date sheet with more than one photo: the gallery fills the photo frame */
#infoModal .info-art.has-gallery{width:100%;height:100%}
#infoModal .info-art.has-gallery .pp-gallery{width:100%}

/* ── SHELVES AND GRIDS (2026-09-29) ── */
.catalog-rail:not(.is-grid) > .catalog-card.pp-over{display:none!important}
.catalog-rail.is-grid > .pp-more-card{display:none!important}
.pp-more-card{flex:0 0 min(38vw,180px);align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1.5px dashed rgba(14,58,44,.35);border-radius:22px;background:rgba(14,58,44,.04);color:var(--palm-900,#0E3A2C);cursor:pointer;
  font:inherit;padding:18px;min-height:220px;transition:background .2s}
.pp-more-card:hover{background:rgba(14,58,44,.08)}
.pp-more-card .pp-more-n{font-size:1.9rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pp-more-card .pp-more-t{font-weight:700;font-size:1rem}
.pp-more-card .pp-more-s{font-size:.8rem;opacity:.7}
.pp-sortbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pp-sortbar::-webkit-scrollbar{display:none}
.pp-sortbar .pp-sort{flex:none;white-space:nowrap}
.pp-sortbar .pp-sort-l{font-size:.8rem;opacity:.7;margin-inline-end:2px}
.pp-sortbar .pp-sort{border:1.5px solid rgba(14,58,44,.25);background:transparent;color:var(--palm-900,#0E3A2C);border-radius:999px;
  padding:7px 13px;font:inherit;font-size:.84rem;min-height:36px;cursor:pointer}
.pp-sortbar .pp-sort.is-on{background:var(--palm-900,#0E3A2C);border-color:var(--palm-900,#0E3A2C);color:var(--sand-50,#FBF4E8)}
.pp-help{display:inline-block;margin-top:6px;font-size:.9rem;font-weight:600;color:var(--palm-700,#1F5A43);text-decoration:underline;text-underline-offset:4px}
/* phone grids: two columns, so six to eight products show at once and can be compared */
@media (max-width:900px){
  #shop .catalog-rail.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  #shop .catalog-rail.is-grid .catalog-card{min-width:0!important;width:auto!important;flex:none!important}
  #shop .catalog-rail.is-grid .catalog-name{font-size:1.05rem}
  #shop .catalog-rail.is-grid .catalog-note{font-size:.78rem}
}
#infoModal .info-art.has-gallery .pp-gallery{position:relative;height:100%}
#infoModal .info-art.has-gallery .pp-shots{height:100%}
#infoModal .info-art.has-gallery .pp-dots{position:absolute;left:0;right:0;bottom:10px;margin:0;z-index:2}

/* ── LOGO ON SCROLL (2026-09-29) ── the motion itself is in palmpop-layer.js (logoMorph) */
.pp-logo-mark{display:none}
@media (max-width:900px){
  #header > .logo{position:relative;overflow:visible}
  #header .pp-logo-mark{display:block;position:absolute;left:50%;top:50%;width:30px;height:42px;margin:-21px 0 0 -15px;
    pointer-events:none;will-change:transform;transform-origin:50% 50%}
  #header .pp-logo-mark svg{width:100%;height:100%;display:block;overflow:visible}
  #header svg.pp-logo-short{overflow:visible}
  #header svg.pp-logo-short > g[fill] > path{transform-box:fill-box;transform-origin:50% 60%}
  #header svg.pp-logo-short{transition:opacity .15s linear}
}


/* ── CATEGORY ICONS (2026-09-29) ── */
.shop-cat .pp-ic{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;margin-inline-end:7px;color:inherit}
.shop-cat .pp-ic svg{width:22px;height:22px;overflow:visible}
.shop-cat .pp-ic svg *{transform-box:fill-box;transform-origin:center}
.shop-cat .pp-ic .door,.shop-cat .pp-ic .wob{transform-box:view-box;transform-origin:0 0}
.shop-cat{display:inline-flex;align-items:center}
/* draw-in, once, when the row first shows */
.pp-ic-intro .pp-ic .ln{stroke-dasharray:60;stroke-dashoffset:60;animation:ppDraw .7s cubic-bezier(.3,.7,.3,1) forwards}
.pp-ic-intro .shop-cat:nth-child(2) .pp-ic .ln{animation-delay:.06s}.pp-ic-intro .shop-cat:nth-child(3) .pp-ic .ln{animation-delay:.12s}
.pp-ic-intro .shop-cat:nth-child(4) .pp-ic .ln{animation-delay:.18s}.pp-ic-intro .shop-cat:nth-child(5) .pp-ic .ln{animation-delay:.24s}
.pp-ic-intro .shop-cat:nth-child(n+6) .pp-ic .ln{animation-delay:.3s}
@keyframes ppDraw{to{stroke-dashoffset:0}}
/* one short gesture per chip, on tap */
.pp-ic-home.pp-play .door{animation:ppDoor .6s cubic-bezier(.2,.8,.2,1)}
@keyframes ppDoor{0%{transform:translate(12px,16px) rotate(-8deg) scale(.62)}40%{transform:translate(12px,13px) rotate(-22deg) scale(.78)}100%{transform:translate(12px,16px) rotate(-8deg) scale(.62)}}
.pp-ic-all.pp-play rect{animation:ppPop .42s cubic-bezier(.3,1.6,.4,1) both}
.pp-ic-all.pp-play .t2{animation-delay:.05s}.pp-ic-all.pp-play .t3{animation-delay:.1s}.pp-ic-all.pp-play .t4{animation-delay:.15s}
@keyframes ppPop{0%{transform:scale(1)}45%{transform:scale(.7)}100%{transform:scale(1)}}
.pp-ic-new.pp-play .spark{animation:ppTwinkle .6s cubic-bezier(.3,1.4,.4,1)}
.pp-ic-new.pp-play .spark2{animation:ppTwinkle .6s .1s cubic-bezier(.3,1.4,.4,1)}
.pp-ic-new.pp-play .spark3{animation:ppPop .5s .18s}
@keyframes ppTwinkle{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(45deg)}100%{transform:scale(1) rotate(90deg)}}
.pp-ic-dates.pp-play .wob{animation:ppWobble .6s cubic-bezier(.3,1.4,.4,1)}
@keyframes ppWobble{0%{transform:translate(12px,13px) rotate(-14deg) scale(1.2)}30%{transform:translate(12px,11.5px) rotate(4deg) scale(1.28)}65%{transform:translate(12px,13px) rotate(-22deg) scale(1.2)}100%{transform:translate(12px,13px) rotate(-14deg) scale(1.2)}}
.pp-ic-palmpop.pp-play .b1{animation:ppRise .7s ease-out}.pp-ic-palmpop.pp-play .b2{animation:ppRise .7s .08s ease-out}.pp-ic-palmpop.pp-play .b3{animation:ppRise .7s .16s ease-out}
@keyframes ppRise{0%{transform:translateY(0);opacity:1}80%{transform:translateY(-9px);opacity:0}81%{transform:translateY(3px);opacity:0}100%{transform:translateY(0);opacity:1}}
.pp-ic-pantry.pp-play .drip{animation:ppDrip .75s cubic-bezier(.5,0,.8,.5)}
@keyframes ppDrip{0%{transform:translateY(-3px) scale(.4);opacity:0}30%{opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.pp-ic-fuel.pp-play .hop{animation:ppHop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes ppHop{0%,100%{transform:rotate(0)}20%{transform:translateY(-2px) rotate(-9deg)}45%{transform:translateY(-2px) rotate(8deg)}70%{transform:rotate(-4deg)}}
.pp-ic-flight.pp-play circle{animation:ppPop .4s cubic-bezier(.3,1.6,.4,1) both}
.pp-ic-flight.pp-play .d2{animation-delay:.05s}.pp-ic-flight.pp-play .d3{animation-delay:.1s}.pp-ic-flight.pp-play .d4{animation-delay:.15s}
.shop-cat:active .pp-ic{transform:scale(.92);transition:transform .1s}
@media (prefers-reduced-motion:reduce){
  .shop-cat .pp-ic *{animation:none!important}
  .pp-ic-intro .pp-ic .ln{stroke-dashoffset:0}
}

/* the All-products chip, pressed: an older rule (#shopCats .shop-cat{background:transparent!important}) outranked the
   pressed fill, leaving sand text on sand (2026-09-29) */
#shopCats .shop-cat-all[aria-pressed="true"]{background:var(--palm-900)!important;color:var(--sand-50)!important;border-color:var(--palm-900)!important}

/* ── ROW HINTS (2026-09-29) ── */
.pp-cats-wrap{position:relative}
.pp-cats-wrap > #shopCats{--fade:44px;scrollbar-width:none}
.pp-cats-wrap > #shopCats::-webkit-scrollbar{display:none}
/* fade the side where more chips wait (logical: "end" is the left in Arabic) */
.pp-cats-wrap.pp-more-end > #shopCats{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent)}
.pp-cats-wrap.pp-more-start > #shopCats{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent)}
.pp-cats-wrap.pp-more-start.pp-more-end > #shopCats{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
[dir="rtl"] .pp-cats-wrap.pp-more-end:not(.pp-more-start) > #shopCats{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent)}
[dir="rtl"] .pp-cats-wrap.pp-more-start:not(.pp-more-end) > #shopCats{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent)}
.pp-cats-next{position:absolute;top:50%;inset-inline-end:-2px;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--palm-900,#0E3A2C);background:var(--sand-50,#FBF4E8);color:var(--palm-900,#0E3A2C);display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(14,58,44,.16);cursor:pointer;z-index:2;padding:0;transition:opacity .2s,transform .2s}
.pp-cats-next::before{content:"";position:absolute;inset:-5px}   /* 44px tap area */
.pp-cats-next svg{width:18px;height:18px}
[dir="rtl"] .pp-cats-next svg{transform:scaleX(-1)}
.pp-cats-next:active{transform:translateY(-50%) scale(.92)}
.pp-cats-next[hidden]{display:none}
@media (min-width:1000px){ .pp-cats-next{display:none} }
.pp-cats-wrap > #shopCats.pp-nudge > *{animation:ppNudge 1.2s cubic-bezier(.45,0,.25,1)}
[dir="rtl"] .pp-cats-wrap > #shopCats.pp-nudge > *{animation-name:ppNudgeRtl}
@keyframes ppNudge{0%,100%{transform:translateX(0)}45%{transform:translateX(-56px)}65%{transform:translateX(-50px)}}
@keyframes ppNudgeRtl{0%,100%{transform:translateX(0)}45%{transform:translateX(56px)}65%{transform:translateX(50px)}}

/* ── 2026-09-29 (owner): icon and word sit together (the chip's 10px gap + the icon's own 7px was a hole) ── */
#shopCats .shop-cat{gap:7px}
#shopCats .shop-cat .pp-ic{margin:0}
/* the pack size is a small tag beside the price, not loose grey text that runs into it */
.catalog-price{align-items:center!important;gap:8px!important}
.catalog-price small{display:inline-flex!important;align-items:center;padding:3px 9px;border-radius:999px;background:rgba(14,58,44,.07);
  color:var(--palm-700,#1F5A43)!important;opacity:1!important;font-family:var(--ui,inherit)!important;font-weight:600!important;
  font-size:.74rem!important;line-height:1.2!important;letter-spacing:0;white-space:nowrap}
/* the arrow needs clear ground: fade wider on the side it sits on */
@media (max-width:999px){ .pp-cats-wrap.pp-more-end > #shopCats{--fade:78px} .pp-cats-wrap.pp-more-start.pp-more-end > #shopCats{--fade:60px} }
/* the arrow has its own lane at the row's end: no chip ever sits under it (2026-09-29) */
@media (max-width:999px){
  .pp-cats-wrap.pp-scrolls > #shopCats{margin-inline-end:46px}
  .pp-cats-wrap.pp-scrolls .pp-cats-next{inset-inline-end:2px}
  .pp-cats-next:disabled{opacity:.35;box-shadow:none;cursor:default}
  .pp-cats-wrap.pp-more-end > #shopCats{--fade:36px} .pp-cats-wrap.pp-more-start.pp-more-end > #shopCats{--fade:30px}
}

/* ── FACTS, ALL AT ONCE (2026-09-29, owner: people will not drag to read them) ──
   On phones the four facts were a sideways row of pills; now they are one white card split in four (2 x 2), so
   every fact is read in one look and the four read as one set. Number above, words below. */
@media (max-width:900px){
  .pp-facts{display:grid!important;grid-template-columns:1fr 1fr!important;overflow:visible!important;scroll-snap-type:none!important;gap:0!important;
    margin:14px 0 0!important;padding:0!important;background:var(--white)!important;border-radius:22px!important;
    box-shadow:0 6px 22px rgba(14,58,44,.07)!important}
  .pp-facts li{flex-direction:column!important;align-items:flex-start!important;justify-content:center;gap:3px!important;
    padding:13px 16px!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;border:0!important;min-width:0}
  .pp-facts li:nth-child(even){border-inline-start:1px solid var(--hairline,rgba(14,58,44,.1))!important}
  .pp-facts li:nth-child(n+3){border-top:1px solid var(--hairline,rgba(14,58,44,.1))!important}
  .pp-facts b{font-size:1.45rem!important;line-height:1.05!important}
  .pp-facts span{font-size:.72rem!important;letter-spacing:.04em!important;white-space:normal!important;line-height:1.35}
  html[dir="rtl"] .pp-facts span{font-size:.84rem!important;letter-spacing:0!important}
}

/* the category row: no fading edges (they made the outlined chips look broken); the arrow lane and the cut chip at
   the edge already say "there is more" */
.pp-cats-wrap > #shopCats{-webkit-mask-image:none!important;mask-image:none!important}
/* price line: centred on the card, and the size tag keeps its digit apart from the word (١ كجم) */
.catalog-price{justify-content:center!important;width:100%}
.catalog-price small{word-spacing:.18em}
 
/* ── FACT STAMPS (2026-09-29) ── four seals in one line, every width; the fibre seal in Sukkari gold */
.pp-facts.pp-stamps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:16px 0 0!important}
.pp-facts.pp-stamps li{display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;text-align:center;min-width:0}
.pp-facts.pp-stamps b{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;
  border:1.5px dashed var(--palm-900,#0E3A2C);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(14,58,44,.2),0 4px 12px rgba(14,58,44,.08);
  font-size:1.05rem!important;line-height:1!important;letter-spacing:-.01em}
.pp-facts.pp-stamps li:first-child b{font-size:.86rem!important}
.pp-facts.pp-stamps li:nth-child(3) b{background:#E9A93A;border-color:#9C6B1A;box-shadow:inset 0 0 0 3px #E9A93A,inset 0 0 0 4px rgba(58,26,12,.28),0 4px 12px rgba(156,107,26,.25);color:#3A1A0C!important}
.pp-facts.pp-stamps span{font-size:.72rem!important;line-height:1.25!important;letter-spacing:0!important;text-transform:none!important;white-space:normal!important;color:var(--palm-700,#1F5A43)!important;font-weight:600!important;max-width:11ch}
html[dir="rtl"] .pp-facts.pp-stamps span{font-size:.8rem!important}
@media (min-width:901px){ .pp-facts.pp-stamps{max-width:620px;margin-inline:auto!important} .pp-facts.pp-stamps b{width:68px;height:68px;font-size:1.25rem!important} .pp-facts.pp-stamps li:first-child b{font-size:1.02rem!important} }
/* the press: each seal comes down, lands a little squashed, settles */
.pp-facts.pp-stamps:not(.pp-stamped) li{opacity:0}
.pp-facts.pp-stamps.pp-stamping li{animation:ppStamp .46s cubic-bezier(.2,.9,.3,1.2) both}
.pp-facts.pp-stamps.pp-stamping li:nth-child(2){animation-delay:.09s}.pp-facts.pp-stamps.pp-stamping li:nth-child(3){animation-delay:.18s}.pp-facts.pp-stamps.pp-stamping li:nth-child(4){animation-delay:.27s}
@keyframes ppStamp{0%{opacity:0;transform:scale(1.35) rotate(-10deg)}60%{opacity:1;transform:scale(.93) rotate(2deg)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .pp-facts.pp-stamps li{opacity:1!important;animation:none!important} }

/* ── PINNED CATEGORY ROW (2026-09-29) ── */
.pp-cats-wrap.pp-pin{position:sticky;top:var(--pp-hdr,64px);z-index:45;transition:padding .2s ease,box-shadow .2s ease}
.pp-cats-wrap.pp-pin.is-stuck{background:var(--sand-50,#FBF4E8);box-shadow:0 8px 14px -10px rgba(14,58,44,.22);
  margin-inline:calc(var(--gutter,20px) * -1);padding:6px var(--gutter,20px)}
.pp-cats-wrap.pp-pin.is-stuck > #shopCats{padding-block:2px}
.pp-cats-wrap.pp-pin.is-stuck .shop-cat{min-height:36px!important;height:36px!important;padding-block:5px!important;font-size:.84rem!important}
.pp-cats-wrap.pp-pin.is-stuck .shop-cat .pp-ic,.pp-cats-wrap.pp-pin.is-stuck .shop-cat .pp-ic svg{width:18px;height:18px}
.pp-cats-wrap.pp-pin.is-stuck .ppf-open-chip{min-height:36px!important;height:36px!important}
.pp-cats-wrap.pp-pin.is-stuck .pp-cats-next{width:30px;height:30px}
.pp-facts.pp-stamps span{text-wrap:balance;max-width:12ch}

/* ── CATEGORY ROW, TIGHT (2026-09-29, owner: gaps above, below and at the ends) ──
   the 24px space under the row belongs to the wrapper (so the arrow centres on the chips, not on chips + gap);
   pinned: 4px above and below, chips run to the screen edge on the start side, the arrow sits in a slim lane */
.pp-cats-wrap{margin-bottom:24px}
.pp-cats-wrap > #shopCats{margin-bottom:0!important;padding-block:2px!important}
@media (max-width:999px){
  .pp-cats-wrap.pp-scrolls > #shopCats{margin-inline-end:38px!important}
  .pp-cats-wrap.pp-scrolls .pp-cats-next{inset-inline-end:0!important;width:32px;height:32px}
  .pp-cats-wrap.pp-pin.is-stuck{padding:4px 10px 4px 0!important;margin-inline:calc(var(--gutter,20px) * -1)!important}
  html[dir="rtl"] .pp-cats-wrap.pp-pin.is-stuck{padding:4px 0 4px 10px!important}
  .pp-cats-wrap.pp-pin.is-stuck > #shopCats{padding-block:0!important;padding-inline-start:var(--gutter,20px)!important;scroll-padding-inline-start:var(--gutter,20px);gap:8px!important}
  .pp-cats-wrap.pp-pin.is-stuck .shop-cat{min-height:34px!important;height:34px!important;padding:4px 12px!important}
  .pp-cats-wrap.pp-pin.is-stuck .pp-cats-next{width:30px!important;height:30px!important;box-shadow:0 2px 8px rgba(14,58,44,.14)}
}
@media (max-width:999px){ .pp-cats-wrap.pp-pin.is-stuck .pp-cats-next{inset-inline-end:8px!important} }

/* ── PHONE MENU (2026-09-29) ── */
.mobilenav.pp-menu{justify-content:flex-start!important;align-items:stretch!important;gap:0!important;overflow-y:auto;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 18px calc(env(safe-area-inset-bottom,0px) + 22px)!important;
  transform:translateX(-104%)!important;transition:transform .42s cubic-bezier(.22,.9,.24,1)!important}
html[dir="ltr"] .mobilenav.pp-menu{transform:translateX(104%)!important}
.mobilenav.pp-menu.show{transform:none!important}
.mobilenav.pp-menu a,.mobilenav.pp-menu button{font-family:var(--ar-ui,var(--ui,inherit))!important;font-weight:600!important;font-size:1rem!important;min-height:0!important;color:var(--palm-900,#0E3A2C)}
.pm-top{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-bottom:16px}
.pm-name{font-family:var(--disp,Georgia,serif);font-weight:900;font-size:1.5rem;color:var(--palm-900,#0E3A2C);direction:ltr}
.pm-x{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--palm-900,#0E3A2C)!important;background:transparent;display:grid;place-items:center;padding:0;cursor:pointer}
.pm-x svg{width:20px;height:20px}
.pm-h{margin:0 2px 8px;font-size:.78rem;color:var(--ink-muted,#5d6b64);font-weight:600;letter-spacing:.02em}
.pm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.mobilenav.pp-menu .pm-tile{display:flex!important;align-items:center;gap:10px;padding:14px 12px;background:#fff;border-radius:16px;
  box-shadow:0 3px 12px rgba(14,58,44,.06);border:1.5px solid transparent;font-size:.98rem!important}
.mobilenav.pp-menu .pm-tile.is-here{border-color:var(--palm-900,#0E3A2C)}
.pm-tile:active{transform:scale(.97)}
.pm-ic{display:inline-grid;place-items:center;width:26px;height:26px;flex:none}
.pm-ic svg{width:26px;height:26px;overflow:visible}
.pm-ic svg *{transform-box:fill-box;transform-origin:center}
.pm-ic .door,.pm-ic .wob{transform-box:view-box;transform-origin:0 0}
.mobilenav.pp-menu .pm-quiz{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:16px;
  background:var(--palm-900,#0E3A2C);color:var(--sand-50,#FBF4E8)!important;margin-bottom:22px}
.pm-quiz svg{width:20px;height:20px;color:#E9A93A;flex:none}
.pm-list{display:flex;flex-direction:column;margin-bottom:22px}
.mobilenav.pp-menu .pm-list a{display:flex!important;align-items:center;min-height:48px!important;padding:0 2px;border-bottom:1px solid rgba(14,58,44,.1);font-size:1.02rem!important}
.mobilenav.pp-menu .pm-list a:last-child{border-bottom:0}
.pm-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mobilenav.pp-menu .pm-acts > *{display:flex!important;align-items:center;justify-content:center;min-height:44px!important;padding:6px 4px;border-radius:14px;
  border:1.5px solid rgba(14,58,44,.2)!important;background:transparent;font-size:.84rem!important;text-align:center;cursor:pointer;text-decoration:none}
.pm-note{margin:16px 0 0;text-align:center;font-size:.8rem;color:var(--ink-muted,#5d6b64)}
/* items arrive one after another */
.mobilenav.pp-menu.show .pm-i{animation:pmIn .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0ms) + 90ms)}
@keyframes pmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .mobilenav.pp-menu{transform:none!important;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s!important}
  .mobilenav.pp-menu.show{opacity:1;visibility:visible} .mobilenav.pp-menu.show .pm-i{animation:none} }

/* ── AUDIT FIXES (2026-09-29) ── */
/* "Not sure? Help me choose" was a 20px-tall target */
.pp-help{display:inline-flex!important;align-items:center;min-height:40px;padding:4px 0}
/* the WhatsApp button no longer sits on the footer's email box: room at the end of the page */
@media (max-width:900px){ footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important} }


/* ══════════════════════════════════════════════════════════════════════
   DESKTOP HOME (2026-09-30, owner) — a desktop reads like a story, a phone like a shop.
   ≥1100px only: the menu names the sections in page order; the page opens with who we are and the
   harvest, then the shop (a sticky aisle on the left and shelves of four), then PalmPop and the rest.
   Phones and tablets are untouched: shop first, story after.
   ══════════════════════════════════════════════════════════════════════ */
.pp-dnav{display:none}
@media (min-width:1100px){
  /* ── the menu ── */
  #header > nav.links,#header .menu-btn{display:none!important}
  .pp-dnav{display:flex;align-items:center;gap:4px;margin-inline:auto}
  .pp-dnav .dn-a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;
    font:600 .92rem/1 var(--mono);color:var(--palm-900);text-decoration:none;transition:background .2s,color .2s}
  html[dir="rtl"] .pp-dnav .dn-a{font-family:var(--ar-ui);font-size:1rem}
  .pp-dnav .dn-a:hover{background:rgba(14,58,44,.07)}
  .pp-dnav .dn-a:focus-visible{outline:2px solid var(--palm-900);outline-offset:2px}
  /* where you are: a gold date under the word, not colour alone */
  .pp-dnav .dn-a::after{content:"";position:absolute;left:50%;bottom:1px;width:6px;height:8px;border-radius:50%;background:var(--sukkari-400);
    opacity:0;transform:translateX(-50%) scale(.5);transition:transform .25s var(--ease-out),opacity .2s ease}
  .pp-dnav .dn-a[aria-current="page"]::after{opacity:1;transform:translateX(-50%) scale(1)}
  .pp-dnav .dn-a[aria-current="page"]{font-weight:800}
  .pp-dnav .dn-pill{border:1.5px solid var(--palm-900);margin-inline-start:6px}
  .pp-dnav .dn-pill::after{display:none}
  .pp-dnav .dn-pill[aria-current="page"],.pp-dnav .dn-pill:hover{background:var(--palm-900);color:var(--sand-50)}
  .pp-dnav .dn-has::before{content:"";order:2;width:7px;height:7px;margin-top:-3px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);opacity:.6;transition:transform .25s}
  .dn-shop{position:relative}
  .dn-shop.is-open .dn-has::before{transform:rotate(225deg);margin-top:4px}

  /* ── the shop panel ── */
  .dn-mega{position:absolute;top:100%;left:50%;width:min(960px,calc(100vw - 64px));padding-top:14px;
    transform:translate(-50%,6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s}
  .dn-shop.is-open .dn-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .pp-dnav.dn-shut .dn-mega{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .dn-mega-in{display:grid;grid-template-columns:1.55fr .9fr .9fr;gap:28px;padding:26px;border-radius:24px;background:var(--sand-50);
    box-shadow:0 30px 60px -28px rgba(14,58,44,.45),0 0 0 1px rgba(14,58,44,.06)}
  .dn-h{margin:0 0 12px;font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
  html[dir="rtl"] .dn-h{font-family:var(--ar-ui);font-size:.9rem;letter-spacing:0}
  .dn-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dn-tile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--white);color:var(--palm-900);text-decoration:none;
    box-shadow:0 0 0 1px rgba(14,58,44,.06);transition:transform .2s,box-shadow .2s}
  .dn-tile:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(14,58,44,.45),0 0 0 1px rgba(14,58,44,.08)}
  .dn-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--dune-100,#F3E6CC);color:var(--palm-900)}
  .dn-ic svg{width:22px;height:22px}
  .dn-tile b,.dn-row b,.dn-feat b{display:block;font:700 .98rem/1.2 var(--mono)}
  .dn-tile small,.dn-row small,.dn-feat small{display:block;margin-top:3px;font:500 .8rem/1.3 var(--mono);color:var(--ink-muted)}
  html[dir="rtl"] :is(.dn-tile,.dn-row,.dn-feat) :is(b,small){font-family:var(--ar-ui)}
  .dn-row{display:block;padding:12px 14px;border-radius:14px;color:var(--palm-900);text-decoration:none;transition:background .2s}
  .dn-row:hover{background:var(--white)}
  .dn-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:16px;border-radius:18px;overflow:hidden;
    background:radial-gradient(90% 70% at 50% 25%,#F9E3AE 0%,#EDBE63 100%);color:var(--palm-900);text-decoration:none}
  .dn-feat img{position:absolute;inset:10px 8px auto;width:calc(100% - 16px);height:62%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(90,52,10,.25));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .dn-feat:hover img{transform:translateY(-3px) scale(1.03)}
  .dn-feat span{position:relative}
  .dn-feat small{color:rgba(14,58,44,.7)}

  /* ── the shop: an aisle on the left, shelves of four ── */
  #shop.wrap{max-width:1440px}
  #shop{display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:44px;align-items:start}
  #shop > *{grid-column:2;min-width:0}
  #shop > .pp-cats-wrap{grid-column:1;grid-row:1 / span 40;position:sticky!important;top:calc(var(--pp-hdr,72px) + 20px)!important;
    margin:0!important;padding:0!important;background:none!important;box-shadow:none!important;border:0!important;transform:none!important}
  #shop > .pp-cats-wrap::before,#shop > .pp-cats-wrap::after{display:none!important}
  #shop > .pp-cats-wrap .pp-cats-next,#shop > .pp-cats-wrap .pp-cats-prev{display:none!important}
  #shop > .pp-cats-wrap #shopCats{display:flex!important;flex-direction:column;align-items:stretch;gap:4px;overflow:visible!important;
    padding:14px!important;margin:0!important;background:var(--white)!important;border-radius:var(--r-lg,22px);box-shadow:0 18px 40px -30px rgba(14,58,44,.5),0 0 0 1px rgba(14,58,44,.05);
    -webkit-mask-image:none!important;mask-image:none!important;scroll-snap-type:none!important}
  #shop > .pp-cats-wrap #shopCats::before{content:attr(data-h);display:block;padding:6px 12px 10px;font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
  #shop > .pp-cats-wrap .shop-cat{width:100%!important;justify-content:flex-start!important;border:0!important;border-radius:14px!important;padding:11px 12px!important;
    font-size:.98rem!important;background:transparent!important;box-shadow:none!important;white-space:nowrap}
  #shop > .pp-cats-wrap .shop-cat:hover{background:var(--sand-50)!important}
  #shop > .pp-cats-wrap .shop-cat small{margin-inline-start:auto}
  #shop > .pp-cats-wrap .shop-cat[aria-selected="true"],#shop > .pp-cats-wrap .shop-cat-all[aria-pressed="true"]{background:var(--palm-900)!important;color:var(--sand-50)!important}
  #shop .catalog-rail{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important}
  /* the filter is a tool, not a category: an outline button at the foot of the aisle */
  #shop > .pp-cats-wrap .ppf-open-chip{order:99;margin-top:8px!important;width:100%!important;justify-content:center!important;
    background:transparent!important;color:var(--palm-900)!important;border:1.5px solid rgba(14,58,44,.22)!important;box-shadow:none!important}
  #shop > .pp-cats-wrap .ppf-open-chip:hover{border-color:var(--palm-900)!important}
  #shop > .pp-cats-wrap .ppf-open-chip svg{stroke:currentColor}
  #shop .catalog-rail .pp-more-card{min-height:0}

  /* ── gifting: a clean gold panel, words on one side, the date mark on the other ── */
  #corporate .corp-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:auto auto 1fr;column-gap:48px;
    text-align:start!important;align-items:start}
  #corporate .corp-inner > *{grid-column:1;margin-inline:0!important;text-align:start!important;justify-self:start}
  #corporate .corp-inner h2{max-width:14ch}
  #corporate .corp-inner::after{content:"";position:absolute;inset:auto;top:50%;inset-inline-end:7%;width:min(22%,230px);aspect-ratio:26/38;border-radius:0;
    transform:translateY(-50%) rotate(-14deg);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -22 28 42'%3E%3Cpath d='M0,-16.4 C8.6,-16.4 13,-5.8 13,5 C13,14 7.6,19 0,19 C-7.6,19 -13,14 -13,5 C-13,-5.8 -8.6,-16.4 0,-16.4Z' fill='%23FBF4E8' fill-opacity='.42'/%3E%3Cpath d='M-5.2,-16.2 C-3.4,-21 3.4,-21 5.2,-16.2 C3,-17.7 -3,-17.7 -5.2,-16.2Z' fill='%230E3A2C' fill-opacity='.5'/%3E%3Cpath d='M-3.2,-6 C-1.2,0 -5.2,3 -3.2,9 M3.4,-8 C5.4,-2 1.4,5 3.4,11' stroke='%230E3A2C' stroke-opacity='.18' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")}
  html[dir="rtl"] #corporate .corp-inner::after{transform:translateY(-50%) rotate(14deg)}
  #shop .catalog-price{flex-wrap:wrap;row-gap:4px}
}
/* ── Find yours: centred, with a picture beside it (≥1100px) ── */
.pp-quiz-art{display:none}
@media (min-width:1100px){
  #quiz.wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(48px,6vw,96px);align-items:center;
    max-width:1180px;margin-inline:auto}
  #quiz > *{grid-column:1;min-width:0}
  #quiz > .pp-quiz-art{display:block;grid-column:2;grid-row:1 / span 3;margin:0;align-self:center;position:relative}
  #quiz > .pp-quiz-art img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:28px;
    box-shadow:0 28px 50px -30px rgba(90,52,10,.45)}
  #quiz .quiz-card{width:100%;max-width:none!important}
  /* answers in pairs; an odd last one takes the whole row */
  #quiz #quizCard.fy .fy-opts,#quiz #quizCard.fy .fy-opts.is-odd{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #quiz #quizCard.fy .fy-opt:last-child:nth-child(odd){grid-column:1 / -1}
  #quiz #quizCard.fy .fy-opt{min-height:118px;padding:18px}
  #quiz .var-intro{margin-bottom:28px}
  /* the result brings its own photo: the picture steps aside and the result takes the full width */
  #quiz:has(.fy-result) > .pp-quiz-art{display:none}
  #quiz:has(.fy-result) > *{grid-column:1 / -1}
}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){
  .dn-mega,.dn-tile,.dn-feat img,.pp-who-go a,.pp-dnav .dn-a::after{transition:none!important}
}


/* ══════════════════════════════════════════════════════════════════════
   PAGES (2026-09-30, owner) — Home · Shop · PalmPop · Our story · Find yours · Gifting
   src/palmpop-pages.js shows each page's sections (class pp-off hides the rest) and orders them.
   Mobile first; two columns from 760px; the full layout from 1100px.
   ══════════════════════════════════════════════════════════════════════ */
.pp-off{display:none!important}
html[data-order] main{display:flex!important;flex-direction:column}
.pp-page{padding-block:clamp(48px,7vw,104px)}
.pp-page .pp-kick{margin:0 0 14px;font:700 .74rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--caramel-700,#8A4B17)}
html[dir="rtl"] .pp-page .pp-kick{font-family:var(--ar-ui);font-size:.98rem;letter-spacing:0}
.pp-page h2.disp{margin:0;font-size:clamp(1.9rem,3.6vw,3.3rem);line-height:1.08;color:var(--palm-900);text-wrap:balance}
html[dir="rtl"] .pp-page h2.disp{font-family:var(--ar-disp);line-height:1.3}
.pp-page p{color:var(--palm-900)}
.pp-sec-h{max-width:820px;margin-bottom:clamp(26px,4vw,48px)}
.pp-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;
  font:700 .98rem/1 var(--mono);text-decoration:none;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}
html[dir="rtl"] .pp-btn{font-family:var(--ar-ui);font-size:1.02rem}
.pp-btn svg{width:18px;height:18px;flex:none}
.pp-btn:hover{transform:translateY(-2px)}
.pp-btn:focus-visible,.pp-line:focus-visible,.pp-gcard:focus-visible{outline:3px solid var(--sukkari-400);outline-offset:3px}
.pp-btn-dark{background:var(--palm-900);color:var(--sand-50)}
.pp-btn-line{background:transparent;color:var(--palm-900);box-shadow:inset 0 0 0 1.5px var(--palm-900)}
.pp-btn-line:hover{background:rgba(14,58,44,.07)}
.pp-mail{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.6);
  font:700 1.02rem/1 var(--mono);color:var(--palm-900);user-select:all;-webkit-user-select:all}
.pp-promise-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--sukkari-400);color:var(--palm-900);
  font:900 1.1rem/1 var(--disp);font-variant-numeric:tabular-nums}

/* page header */
.pp-head{padding-top:clamp(26px,4vw,56px)!important;padding-bottom:clamp(8px,2vw,24px)!important}
.pp-crumb{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;font:500 .88rem/1.2 var(--mono);color:var(--ink-muted)}
html[dir="rtl"] .pp-crumb{font-family:var(--ar-ui);font-size:.95rem}
.pp-crumb a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pp-crumb [aria-current]{color:var(--palm-900);font-weight:700}
.pp-head-h{margin:0 0 12px;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;color:var(--palm-900)}
html[dir="rtl"] .pp-head-h{font-family:var(--ar-disp);line-height:1.25}
.pp-head-s{max-width:56ch;margin:0;font:400 1.14rem/1.6 var(--mono);opacity:.88}
html[dir="rtl"] .pp-head-s{font-family:var(--ar-ui);font-size:1.2rem;line-height:1.8}
.pp-head-img{margin:clamp(24px,4vw,44px) 0 0;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;aspect-ratio:16/9;background:var(--dune-100,#F3E6CC)}
.pp-head-img img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:760px){ .pp-head-img{aspect-ratio:16/7} }

/* HOME · intro */
.pp-intro{display:grid;gap:clamp(28px,5vw,80px);align-items:center}
.pp-intro h2.disp{font-size:clamp(2.3rem,4.8vw,4.6rem);line-height:1.02}
.pp-intro-t > p:not(.pp-kick){max-width:50ch;margin:22px 0 0;font:400 1.14rem/1.7 var(--mono)}
html[dir="rtl"] .pp-intro-t > p:not(.pp-kick){font-family:var(--ar-ui);font-size:1.22rem;line-height:1.9}
.pp-intro-img{margin:0;border-radius:clamp(20px,2.6vw,32px);overflow:hidden;aspect-ratio:4/5;max-height:640px;box-shadow:0 36px 60px -40px rgba(90,52,10,.55)}
.pp-intro-img img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){ .pp-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }

/* HOME · what we make */
.pp-lines-g{display:grid;gap:18px}
@media (min-width:760px){ .pp-lines-g{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pp-line{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--white);color:var(--palm-900);text-decoration:none;
  box-shadow:0 0 0 1px rgba(14,58,44,.06);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pp-line:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px rgba(14,58,44,.5),0 0 0 1px rgba(14,58,44,.08)}
.pp-line-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--dune-100,#F3E6CC)}
.pp-line-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pp-line:hover .pp-line-img img{transform:scale(1.04)}
.pp-line-pop{background:radial-gradient(90% 80% at 50% 30%,#F9E3AE 0%,#EDBE63 100%)}
.pp-line-pop img,.pp-line-gift img{object-fit:contain!important;padding:18px;filter:drop-shadow(0 16px 16px rgba(90,52,10,.22))}
.pp-line-t{display:flex;flex-direction:column;gap:8px;flex:1;padding:22px 24px 24px}
.pp-line-t b{font:700 1.45rem/1.15 var(--disp)}
html[dir="rtl"] .pp-line-t b{font-family:var(--ar-disp)}
.pp-line-t > span{font:400 1rem/1.55 var(--mono);color:var(--ink-muted)}
html[dir="rtl"] .pp-line-t > span{font-family:var(--ar-ui);font-size:1.05rem}
.pp-line-t i{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font:700 .95rem/1 var(--mono);font-style:normal}
html[dir="rtl"] .pp-line-t i{font-family:var(--ar-ui)}
.pp-line-t i svg{width:16px;height:16px;transition:transform .25s}
.pp-line:hover .pp-line-t i svg{transform:translateX(4px)}
html[dir="rtl"] .pp-line:hover .pp-line-t i svg{transform:translateX(-4px)}
.pp-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;margin:clamp(36px,5vw,64px) 0 0}
@media (min-width:900px){ .pp-figs{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pp-figs > div{padding-top:16px;border-top:1.5px solid rgba(14,58,44,.16)}
.pp-figs dt{font:900 clamp(2.2rem,3.6vw,3.2rem)/1 var(--disp);color:var(--palm-900);font-variant-numeric:tabular-nums}
.pp-figs dd{margin:8px 0 0;font:500 .98rem/1.4 var(--mono);color:var(--ink-muted)}
html[dir="rtl"] .pp-figs dd{font-family:var(--ar-ui);font-size:1.05rem}

/* the finder, one tap away */
.pp-findcta-in{display:grid;gap:24px;align-items:center;padding:clamp(28px,5vw,64px);border-radius:clamp(22px,3vw,34px);background:var(--palm-900);color:var(--sand-50)}
@media (min-width:760px){ .pp-findcta-in{grid-template-columns:minmax(0,1fr) auto} }
.pp-findcta-in .pp-kick{color:var(--sukkari-400)!important}
.pp-findcta-in h2.disp{color:var(--sand-50)!important}
.pp-findcta-in p:not(.pp-kick){max-width:52ch;margin:14px 0 0;color:rgba(251,244,232,.82)!important;font:400 1.08rem/1.6 var(--mono)}
html[dir="rtl"] .pp-findcta-in p:not(.pp-kick){font-family:var(--ar-ui);font-size:1.15rem}
.pp-findcta-in .pp-btn-dark{background:var(--sukkari-400);color:var(--palm-900)}

/* OUR STORY · mission and vision, promises */
.pp-mv{display:grid;gap:clamp(28px,4vw,56px);margin-bottom:clamp(56px,8vw,112px)}
@media (min-width:900px){ .pp-mv{grid-template-columns:1fr 1fr} }
.pp-mv > div{padding-top:22px;border-top:2px solid var(--palm-900)}
.pp-mv-t{margin:0;font-size:clamp(1.45rem,2.3vw,2.15rem)!important;line-height:1.3!important;font-weight:400!important;color:var(--palm-900)}
html[dir="rtl"] .pp-mv-t{font-family:var(--ar-disp);line-height:1.6!important}
.pp-promise,.pp-steps{display:grid;gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:760px){ .pp-promise,.pp-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .pp-promise,.pp-steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pp-promise li,.pp-steps li{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:22px;background:var(--white);box-shadow:0 0 0 1px rgba(14,58,44,.06)}
.pp-promise b,.pp-steps b{margin-top:12px;font:700 1.22rem/1.25 var(--disp);color:var(--palm-900)}
html[dir="rtl"] :is(.pp-promise,.pp-steps) b{font-family:var(--ar-disp)}
.pp-promise li > span:last-child,.pp-steps li > span:last-child{font:400 .98rem/1.55 var(--mono);color:var(--ink-muted)}
html[dir="rtl"] :is(.pp-promise,.pp-steps) li > span:last-child{font-family:var(--ar-ui);font-size:1.04rem}

/* OUR STORY · at a glance */
.pp-brief{display:grid;gap:clamp(28px,5vw,72px);align-items:start}
@media (min-width:900px){ .pp-brief{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.pp-brief-l{margin:clamp(22px,3vw,36px) 0 0}
.pp-brief-l > div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid rgba(14,58,44,.14)}
@media (min-width:760px){ .pp-brief-l > div{grid-template-columns:170px minmax(0,1fr);gap:24px} }
.pp-brief-l dt{font:700 .76rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--caramel-700,#8A4B17)}
html[dir="rtl"] .pp-brief-l dt{font-family:var(--ar-ui);font-size:.98rem;letter-spacing:0}
.pp-brief-l dd{margin:0;font:400 1.05rem/1.55 var(--mono);color:var(--palm-900)}
html[dir="rtl"] .pp-brief-l dd{font-family:var(--ar-ui);font-size:1.1rem;line-height:1.8}
.pp-brief-img{margin:0;border-radius:clamp(20px,2.6vw,30px);overflow:hidden;aspect-ratio:4/5}
.pp-brief-img img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){ .pp-brief-img{position:sticky;top:calc(var(--pp-hdr,72px) + 24px)} }

/* OUR STORY · work with us */
.pp-contact-in{display:grid;gap:24px;align-items:center;padding:clamp(28px,5vw,60px);border-radius:clamp(22px,3vw,34px);background:var(--sukkari-400);color:var(--palm-900)}
@media (min-width:900px){ .pp-contact-in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)} }
.pp-contact-in h2.disp{font-size:clamp(1.5rem,2.6vw,2.4rem)!important}
.pp-contact-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* PALMPOP · inside every can; the shop shows the PalmPop shelf only */
.pp-palm-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
@media (min-width:1100px){ .pp-palm-g{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} }
.pp-palm-g li{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:22px;background:var(--white);box-shadow:0 0 0 1px rgba(14,58,44,.06)}
.pp-palm-g b{font:700 1.2rem/1.2 var(--disp);color:var(--palm-900)}
html[dir="rtl"] .pp-palm-g b{font-family:var(--ar-disp)}
.pp-palm-g span{font:400 .96rem/1.5 var(--mono);color:var(--ink-muted)}
html[dir="rtl"] .pp-palm-g span{font-family:var(--ar-ui);font-size:1.02rem}
.pp-palm-note{display:inline-block;margin:26px 0 0;padding:12px 18px;border-radius:16px;background:var(--mint-100,#DDF1E6);font:500 1rem/1.5 var(--mono)}
html[dir="rtl"] .pp-palm-note{font-family:var(--ar-ui)}
html[data-pp-view="palmpop"] #ppPalm{padding-bottom:0}
html[data-pp-view="palmpop"] #shop{display:block!important}
html[data-pp-view="palmpop"] #shop > :not(.var-wrap){display:none!important}
html[data-pp-view="palmpop"] #varList > :not(#category-palmpop),html[data-pp-view="palmpop"] #varStage{display:none!important}
html[data-pp-view="palmpop"] #rail-palmpop > .catalog-card.pp-over{display:flex!important}
html[data-pp-view="palmpop"] #rail-palmpop > .pp-more-card{display:none!important}

/* GIFTING */
.pp-gift-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){ .pp-gift-g{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px} }
.pp-gcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 12px 20px;border:0;border-radius:22px;background:var(--white);cursor:pointer;
  color:var(--palm-900);text-align:center;box-shadow:0 0 0 1px rgba(14,58,44,.06);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.pp-gcard:hover{transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(14,58,44,.5),0 0 0 1px rgba(14,58,44,.08)}
.pp-gcard-img{display:block;width:100%;aspect-ratio:1;margin-bottom:8px;border-radius:16px;overflow:hidden;background:var(--dune-100,#F3E6CC)}
.pp-gcard-img img{display:block;width:100%;height:100%;object-fit:cover}
.pp-gcard[data-open^="palmpop"] .pp-gcard-img{background:radial-gradient(90% 80% at 50% 30%,#F9E3AE 0%,#EDBE63 100%)}
.pp-gcard[data-open^="palmpop"] .pp-gcard-img img{object-fit:contain;padding:10px}
.pp-gcard b{font:700 1.08rem/1.2 var(--disp)}
html[dir="rtl"] .pp-gcard b{font-family:var(--ar-disp)}
.pp-g-price{font:700 1rem/1 var(--disp);font-variant-numeric:tabular-nums}
.pp-g-soon{font:500 .86rem/1.2 var(--mono);color:var(--ink-muted)}
html[dir="rtl"] .pp-g-soon{font-family:var(--ar-ui)}
.pp-gcard i{margin-top:6px;font:700 .9rem/1 var(--mono);font-style:normal;text-decoration:underline;text-underline-offset:4px}
html[dir="rtl"] .pp-gcard i{font-family:var(--ar-ui)}
.pp-corp{margin-top:clamp(56px,8vw,104px)}

/* FIND YOURS as its own page: a little air under the header */
html[data-pp-view="find"] #quiz{padding-top:clamp(36px,5vw,72px)}
@media (prefers-reduced-motion:reduce){ .pp-btn,.pp-line,.pp-line-img img,.pp-gcard,.pp-line-t i svg{transition:none!important} }

/* ── FIND YOURS v3: progress, answers, more ideas ── */
#quizCard.fy .fy-top{gap:14px;justify-content:flex-start;flex-wrap:wrap}
#quizCard.fy .fy-back{margin-inline-start:auto}
.fy-bar{display:inline-flex;gap:5px}
.fy-bar i{display:block;width:26px;height:5px;border-radius:9px;background:rgba(14,58,44,.16);transition:background .3s}
.fy-bar i.on{background:var(--palm-900)}
.fy-said{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}
.fy-said span{padding:7px 13px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px rgba(14,58,44,.1);font:600 .88rem/1 var(--mono);color:var(--palm-900)}
html[dir="rtl"] .fy-said span{font-family:var(--ar-ui);font-size:.95rem}
.fy-again{border:0;background:none;padding:8px 4px;cursor:pointer;font:700 .9rem/1 var(--mono);color:var(--palm-900);text-decoration:underline;text-underline-offset:4px}
html[dir="rtl"] .fy-again{font-family:var(--ar-ui)}
#quizCard.fy .fy-photo.is-pop,.fy-more-img.is-pop{background:radial-gradient(90% 80% at 50% 30%,#F9E3AE 0%,#EDBE63 100%)}
#quizCard.fy .fy-photo.is-pop img,.fy-more-img.is-pop img{object-fit:contain!important;padding:14px;filter:drop-shadow(0 14px 14px rgba(90,52,10,.25))}
.fy-soon{font-size:1rem;color:var(--ink-muted)}
.fy-more-h{margin:30px 0 12px;font:700 .76rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--caramel-700,#8A4B17)}
html[dir="rtl"] .fy-more-h{font-family:var(--ar-ui);font-size:.98rem;letter-spacing:0}
.fy-more{display:grid;gap:12px}
@media (min-width:760px){ .fy-more{grid-template-columns:1fr 1fr} }
.fy-more-c{display:flex;align-items:center;gap:14px;padding:10px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px rgba(14,58,44,.06)}
.fy-more-img{flex:none;width:72px;height:72px;border-radius:14px;overflow:hidden;background:var(--dune-100,#F3E6CC)}
.fy-more-img img{width:100%;height:100%;object-fit:cover;display:block}
.fy-more-img.is-pop img{padding:6px}
.fy-more-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fy-more-t b{font:700 1.02rem/1.2 var(--disp);color:var(--palm-900)}
html[dir="rtl"] .fy-more-t b{font-family:var(--ar-disp)}
.fy-more-t small{font:600 .9rem/1 var(--mono);color:var(--ink-muted)}
.fy-more-b{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--palm-900);background:transparent;color:var(--palm-900);
  font:700 .88rem/1 var(--mono);cursor:pointer}
html[dir="rtl"] .fy-more-b{font-family:var(--ar-ui)}
.fy-more-b:hover{background:var(--palm-900);color:var(--sand-50)}
.fy-bulk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:16px 18px;border-radius:18px;
  background:var(--sukkari-400);color:var(--palm-900);font:500 1rem/1.5 var(--mono)}
html[dir="rtl"] .fy-bulk{font-family:var(--ar-ui)}
.fy-bulk-a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--palm-900);color:var(--sand-50);font-weight:700;text-decoration:none}

/* PAGES · fixes after review */
html[data-pp-view]:not([data-pp-view="home"]) main{padding-top:var(--pp-top,88px)}
html[data-pp-view="story"] #ritual .pp-route-kicker{display:none}
.pp-mv-t{font-family:var(--disp)!important}
html[data-pp-view="palmpop"] #shop.wrap{max-width:1300px}
html[data-pp-view="palmpop"] #category-palmpop .catalog-heading{display:none}
@media (min-width:1100px){ #shop > .pp-cats-wrap #homeChip{display:none!important} }
/* pages that open on a coloured band: the band runs up under the header, no plain strip above it */
html[data-pp-view="palmpop"] main,html[data-pp-view="find"] main{padding-top:0!important}
html[data-pp-view="palmpop"] #palmpop,html[data-pp-view="find"] #quiz{margin-top:0!important;padding-top:calc(var(--pp-top,88px) + clamp(36px,5vw,64px))!important}


/* ══ PROOF BAR (2026-10-01, owner) — desktop: the seals span the page, each with its meaning, plus "this week" ══ */
.pp-fact-why,.pp-fact-now{display:none}
@media (min-width:1100px){
  .hero .pp-facts.pp-stamps,.pp-facts.pp-stamps{max-width:1300px!important;width:calc(100% - 128px);margin:28px auto 8px!important;
    grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr)!important;gap:0!important;align-items:stretch}
  .pp-facts.pp-stamps li{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:16px!important;
    padding:6px 24px!important;text-align:start!important;border-inline-start:1px solid rgba(14,58,44,.14)!important}
  .pp-facts.pp-stamps li:first-child{border-inline-start:0!important;padding-inline-start:0!important}
  .pp-facts.pp-stamps li > b{flex:none}
  .pp-facts.pp-stamps li > span{display:block;max-width:none!important;font-size:.98rem!important;font-weight:700!important;color:var(--palm-900)!important;line-height:1.25!important}
  html[dir="rtl"] .pp-facts.pp-stamps li > span{font-size:1.04rem!important}
  .pp-fact-why{display:block;margin-top:4px;font:400 .88rem/1.4 var(--mono);color:var(--ink-muted)}
  html[dir="rtl"] .pp-fact-why{font-family:var(--ar-ui);font-size:.95rem}
  /* seal + words: the words sit in a column beside the seal */
  .pp-facts.pp-stamps li:not(.pp-fact-now){display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:0}
  .pp-facts.pp-stamps li:not(.pp-fact-now) > b{grid-row:1 / span 2;align-self:center}
  .pp-facts.pp-stamps li:not(.pp-fact-now) > span{align-self:end}
  .pp-facts.pp-stamps li:not(.pp-fact-now) > .pp-fact-why{align-self:start}
  /* this week in Al-Qassim */
  .pp-facts.pp-stamps li.pp-fact-now{display:flex!important;padding:0!important;margin-inline-start:24px;border-inline-start:0!important}
  .pp-fact-now-a{display:flex;flex-direction:column;justify-content:center;gap:4px;width:100%;padding:16px 20px;border-radius:20px;text-decoration:none;
    background:linear-gradient(135deg,#FBE6B3 0%,#F3C96E 100%);color:var(--palm-900);box-shadow:0 14px 30px -22px rgba(156,107,26,.7);
    transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
  .pp-fact-now-a:hover{transform:translateY(-2px);box-shadow:0 20px 36px -22px rgba(156,107,26,.8)}
  .pp-fact-now-a:focus-visible{outline:3px solid var(--palm-900);outline-offset:3px}
  .pp-fact-now-k{display:flex;align-items:center;gap:8px;font:700 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7A4A12}
  html[dir="rtl"] .pp-fact-now-k{font-family:var(--ar-ui);font-size:.9rem;letter-spacing:0}
  .pp-fact-live{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--palm-900);order:-1}
  .pp-fact-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--palm-900);opacity:0;animation:ppLive 2.2s ease-out infinite}
  @keyframes ppLive{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.6);opacity:0}}
  .pp-fact-now-a b{font:700 1.18rem/1.2 var(--disp)}
  html[dir="rtl"] .pp-fact-now-a b{font-family:var(--ar-disp);font-size:1.25rem}
  .pp-fact-now-a i{font:700 .86rem/1 var(--mono);font-style:normal;text-decoration:underline;text-underline-offset:4px}
  html[dir="rtl"] .pp-fact-now-a i{font-family:var(--ar-ui)}
}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){ .pp-fact-live::after{animation:none} .pp-fact-now-a{transition:none} }
@media (max-width:1099px){ .pp-facts .pp-fact-now,.pp-facts .pp-fact-why{display:none!important} }
@media (min-width:1100px){ .pp-dnav .dn-a{white-space:nowrap} }
@media (min-width:1100px) and (max-width:1319px){ .pp-dnav{gap:0} .pp-dnav .dn-a{padding:10px 9px;font-size:.86rem} .pp-dnav .dn-pill{margin-inline-start:4px} }
@media (max-width:1099px){ .pp-facts.pp-stamps li.pp-fact-now{display:none!important} }
@media (min-width:1100px){
  .hero .pp-facts.pp-stamps,.pp-facts.pp-stamps{width:100%!important;max-width:1300px!important;box-sizing:border-box;
    grid-template-columns:repeat(4,minmax(0,1fr)) minmax(280px,1.15fr)!important}
  .pp-facts.pp-stamps li{padding:6px 20px!important}
  .pp-facts.pp-stamps li:not(.pp-fact-now) > b{width:58px!important;height:58px!important;font-size:1.08rem!important}
  .pp-facts.pp-stamps li:first-child > b{font-size:.9rem!important}
  .pp-facts.pp-stamps li:not(.pp-fact-now) > span{white-space:nowrap!important}
  /* the harvest line is words, not a seal */
  .pp-facts.pp-stamps li.pp-fact-now b{display:block!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;
    background:none!important;box-shadow:none!important;font:700 1.2rem/1.2 var(--disp)!important;letter-spacing:0!important;direction:inherit!important;
    white-space:normal!important;color:var(--palm-900)!important}
  html[dir="rtl"] .pp-facts.pp-stamps li.pp-fact-now b{font-family:var(--ar-disp)!important;font-size:1.28rem!important}
  .pp-fact-now-k{letter-spacing:.1em}
}
@media (min-width:1100px){
  .pp-facts.pp-stamps li:not(.pp-fact-now) > span{white-space:normal!important}
  .pp-facts.pp-stamps{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(250px,1fr)!important}
  /* the harvest card arrives softly after the seals; it is not stamped */
  .pp-facts.pp-stamps.pp-stamping li.pp-fact-now{animation:ppNowIn .6s .4s cubic-bezier(.2,.8,.2,1) both}
  .pp-facts.pp-stamps.pp-stamped li.pp-fact-now{opacity:1}
  @keyframes ppNowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
/* a small desktop: seal above its words, so the words keep a readable width */
@media (min-width:1100px) and (max-width:1279px){
  .pp-facts.pp-stamps li:not(.pp-fact-now){grid-template-columns:minmax(0,1fr)!important;row-gap:10px!important;align-content:center}
  .pp-facts.pp-stamps li:not(.pp-fact-now) > b{grid-row:auto!important}
  .pp-facts.pp-stamps li:not(.pp-fact-now) > .pp-fact-why{margin-top:-6px}
}
@media (min-width:1100px){ .pp-facts.pp-stamps li.pp-fact-now{opacity:1!important;animation:none!important;transform:none!important} }


/* ══ POLISH PASS (2026-10-01): Emil Kowalski's rules + an impeccable review ══ */
:root{--pp-ease-out:cubic-bezier(.23,1,.32,1)}
/* the Shop panel: grows from under its trigger, quick in, quicker out */
@media (min-width:1100px){
  .dn-mega{transform-origin:50% 0;transform:translate(-50%,4px) scale(.98);transition:opacity .14s var(--pp-ease-out),transform .14s var(--pp-ease-out),visibility 0s linear .14s}
  .dn-shop.is-open .dn-mega{transform:translate(-50%,0) scale(1);transition:opacity .2s var(--pp-ease-out),transform .22s var(--pp-ease-out),visibility 0s}
}
/* everything pressable answers the finger or the click */
.pp-btn,.dn-tile,.pp-line,.pp-gcard,.fy-opt,.fy-more-b,.fy-bulk-a,.pp-fact-now-a,.fy-again{-webkit-tap-highlight-color:transparent}
.pp-btn:active,.fy-more-b:active,.fy-bulk-a:active{transform:scale(.97)!important;transition-duration:.1s}
.dn-tile:active,.pp-gcard:active,.pp-fact-now-a:active,#quizCard.fy .fy-opt:active{transform:scale(.98)!important;transition-duration:.1s}
.pp-line:active{transform:scale(.99)!important;transition-duration:.1s}
/* hover lifts only where there is a real pointer (touch screens keep hover "stuck" otherwise) */
@media (hover:none),(pointer:coarse){
  .pp-btn:hover,.pp-line:hover,.pp-gcard:hover,.dn-tile:hover,.pp-fact-now-a:hover{transform:none}
  .pp-line:hover .pp-line-img img{transform:none}
}
/* the finder: each step arrives, answers one after another (40 ms apart) */
@keyframes fyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#quizCard.fy .quiz-q,#quizCard.fy .fy-said,#quizCard.fy .fy-result,#quizCard.fy .fy-more-h,#quizCard.fy .fy-more,#quizCard.fy .fy-bulk{animation:fyIn .24s var(--pp-ease-out) both}
#quizCard.fy .fy-opt{animation:fyIn .26s var(--pp-ease-out) both;animation-delay:calc(var(--i,0) * 40ms)}
#quizCard.fy .fy-more,#quizCard.fy .fy-more-h{animation-delay:.08s}
#quizCard.fy .quiz-q:focus,.pp-page h1:focus,.pp-page h2:focus{outline:none}
/* page changes cross-fade; the header stays put */
#header{view-transition-name:pp-header}
/* phones: the header button steps aside for one in the sky's top corner, a frosted circle that scrolls away with the scene */
@media (max-width:900px){ html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #header .pp-skybtn{display:none!important} }
@media (min-width:901px){ html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #ppHero .pp-skybtn-scene{display:none!important} }   /* an id: it must beat the home "show" rule, which comes later */
.pp-skybtn-scene{position:absolute;z-index:6;top:calc(var(--pp-hdr,90px) - var(--pp-bar-h,37px) + 14px);inset-inline-end:14px;width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(251,244,232,.55);background:rgba(11,15,24,.28);color:#FBF4E8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pp-skybtn-scene svg{width:20px;height:20px}
html[data-sky="night"] .pp-skybtn-scene{color:#E9A93A!important;border-color:rgba(233,169,58,.7)!important}
.pp-skybtn-scene:active{transform:scale(.94)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:var(--pp-ease-out)}
/* phones: steps and promises as compact rows, not tall cards */
@media (max-width:759px){
  .pp-promise li,.pp-steps li{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px 18px;align-items:start}
  .pp-promise li > .pp-promise-n,.pp-steps li > .pp-promise-n{grid-row:1 / span 2}
  .pp-promise b,.pp-steps b{margin-top:2px}
  .pp-promise li > span:last-child,.pp-steps li > span:last-child{grid-column:2}
}
/* the first-order strip runs the full width, its words line up with the page */
.welcome-invite{max-width:none!important;padding-inline:max(20px,calc((100% - 1172px) / 2))!important}
@media (prefers-reduced-motion:reduce){
  #quizCard.fy *{animation:none!important}
  .dn-mega{transition:opacity .12s linear,visibility 0s!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}


/* ══ BRAND PASS (2026-10-01) — this session's pages brought back onto docs/brand-guidelines.md ══
   radius scale 12/16/28/36 · focus ring 3px Sukkari Gold, 2px offset · H1 56 / H2 40 · palette only */
.pp-line,.pp-gcard,.pp-promise li,.pp-steps li,.pp-palm-g li,.dn-mega-in{border-radius:28px}
.pp-gcard-img,.dn-tile,.dn-feat,.fy-more-c,.fy-bulk,.pp-fact-now-a,.pp-palm-note,.fy-more-img{border-radius:16px}
.pp-head-img,.pp-intro-img,.pp-brief-img,.pp-findcta-in,.pp-contact-in,#quiz > .pp-quiz-art img{border-radius:36px}
@media (max-width:759px){ .pp-head-img,.pp-intro-img,.pp-brief-img,.pp-findcta-in,.pp-contact-in{border-radius:28px} .pp-promise li,.pp-steps li{border-radius:16px} }
:is(.pp-btn,.pp-line,.pp-gcard,.dn-a,.dn-tile,.dn-row,.dn-feat,.fy-opt,.fy-more-b,.fy-bulk-a,.fy-again,.pp-fact-now-a,.pp-crumb a):focus-visible{
  outline:3px solid var(--sukkari-400,#E9A93A)!important;outline-offset:2px!important}
.pp-head-h{font-size:clamp(2.25rem,5vw,3.5rem)!important;font-weight:900;line-height:1.1}
html[dir="rtl"] .pp-head-h{line-height:1.3}
.pp-page h2.disp{font-size:clamp(1.75rem,3vw,2.5rem)!important;line-height:1.2}
.pp-intro h2.disp{font-size:clamp(2.25rem,4.4vw,3.5rem)!important;line-height:1.1}
html[dir="rtl"] .pp-page h2.disp{line-height:1.4}
.pp-contact-in h2.disp{font-size:clamp(1.4rem,2.2vw,1.75rem)!important}
/* this week in Al-Qassim: Butter ground, a Sukkari Gold edge, Date Brown label, the date as its marker */
@media (min-width:1100px){
  .pp-fact-now-a{background:#FBEFC9!important;box-shadow:inset 0 0 0 1.5px #E9A93A,0 14px 30px -24px rgba(107,52,24,.55)!important}
  .pp-fact-now-a:hover{box-shadow:inset 0 0 0 1.5px #E9A93A,0 20px 36px -24px rgba(107,52,24,.6)!important}
  .pp-fact-now-k{color:#6B3418!important}
  .pp-fact-live{width:10px!important;height:14px!important;background:none!important;border-radius:0!important;fill:#E9A93A;overflow:visible}
  .pp-fact-live::after{display:none}
  .pp-fact-live{animation:ppLiveDate 2.4s ease-in-out infinite;transform-origin:50% 80%}
  @keyframes ppLiveDate{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
}
@media (prefers-reduced-motion:reduce){ .pp-fact-live{animation:none!important} }


/* ══ MOTION PASS (2026-10-01): review-animations (Emil Kowalski's standards) + brand life ══ */
/* hover is looked at tens of times a day: shorter and smaller */
.catalog-card,.scard{transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s ease!important}
@media (min-width:1100px){
  .catalog-card .catalog-photo img{transition:transform .3s cubic-bezier(.23,1,.32,1)!important}
  #shop .catalog-card:hover .catalog-photo img{transform:scale(min(1.06,var(--fit,9)))}
}
@media (hover:none),(pointer:coarse){ #shop .catalog-card:hover .catalog-photo img{transform:none} }
@media (hover:none),(max-width:1099px){ .catalog-card .catalog-photo > img,.catalog-card .catalog-photo > .flq{transition-duration:.4s!important} }
/* the gallery hint nudges twice, then rests (it was nudging forever) */
.pp-gallery.has-more::after{animation-iteration-count:2!important}
/* the menu: one gliding date instead of a dot per link */
@media (min-width:1100px){
  .pp-dnav{position:relative}
  .pp-dnav .dn-a::after{display:none!important}
  .dn-ind{position:absolute;left:0;bottom:2px;width:8px;height:11px;pointer-events:none;opacity:0;
    background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -21 28 41'%3E%3Cpath fill='%23E9A93A' transform='rotate(-14)' d='M0,-16.4 C8.6,-16.4 13,-5.8 13,5 C13,14 7.6,19 0,19 C-7.6,19 -13,14 -13,5 C-13,-5.8 -8.6,-16.4 0,-16.4Z'/%3E%3C/svg%3E");
    transition:transform .38s cubic-bezier(.77,0,.175,1),opacity .2s ease}
  .dn-ind.is-on{opacity:1}
  .dn-ind.no-glide{transition:none}
  /* the Shop panel's contents arrive one after another (30 ms apart) each time it opens */
  .dn-shop.is-open :is(.dn-tile,.dn-row,.dn-feat){animation:fyIn .22s cubic-bezier(.23,1,.32,1) both}
  .dn-shop.is-open .dn-tile:nth-child(2){animation-delay:.03s} .dn-shop.is-open .dn-tile:nth-child(3){animation-delay:.06s}
  .dn-shop.is-open .dn-tile:nth-child(4){animation-delay:.09s} .dn-shop.is-open .dn-row{animation-delay:.08s} .dn-shop.is-open .dn-feat{animation-delay:.12s}
}
/* the pages: things rise into place as you reach them */
.pp-rv-on .pp-rv{opacity:0;transform:translateY(12px);transition:opacity .35s cubic-bezier(.23,1,.32,1),transform .4s cubic-bezier(.23,1,.32,1);
  transition-delay:calc(var(--rv-i,0) * 40ms)}   /* owner 2026-10-13 ("the page doesn't load well"): quicker, so nothing is ever caught empty */
.pp-rv-on .pp-rv.pp-rv-in{opacity:1;transform:none}
.pp-rv-on .pp-rv-img{transform:none}
.pp-rv-on .pp-rv-img img{transform:scale(1.05);transition:transform 1.1s cubic-bezier(.23,1,.32,1)}
.pp-rv-on .pp-rv-img.pp-rv-in img{transform:none}
/* the finder: the step you reach fills in */
.fy-bar i{position:relative;overflow:hidden;background:rgba(14,58,44,.16)!important}
.fy-bar i::after{content:"";position:absolute;inset:0;background:var(--palm-900);transform:scaleX(0);transform-origin:0 50%}
html[dir="rtl"] .fy-bar i::after{transform-origin:100% 50%}
.fy-bar i.on::after{transform:none}
.fy-bar i.now::after{animation:fyFill .32s cubic-bezier(.23,1,.32,1) both}
@keyframes fyFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .pp-rv-on .pp-rv{transform:none!important;transition:opacity .2s linear!important}
  .pp-rv-on .pp-rv-img img{transform:none!important;transition:none!important}
  .dn-ind{transition:opacity .2s ease!important}
  .dn-shop.is-open :is(.dn-tile,.dn-row,.dn-feat),.fy-bar i.now::after{animation:none!important}
  header,.wa-fab{transition:background .2s ease!important}
}

/* ONE FILTER (2026-10-01): the dates-only stock funnel is retired; the filter button carries its word */
#dateStockOnly{display:none!important}
#filterBtn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;width:auto!important;min-width:44px;height:44px;padding:0 14px 0 12px!important;
  border-radius:999px!important;background:var(--white)!important;color:var(--palm-900)!important;box-shadow:inset 0 0 0 1.5px rgba(14,58,44,.2)!important;
  font:700 .92rem/1 var(--mono);white-space:nowrap}
html[dir="rtl"] #filterBtn{font-family:var(--ar-ui);font-size:.98rem;padding:0 12px 0 14px!important}
#filterBtn[aria-pressed="true"]{background:var(--palm-900)!important;color:var(--sand-50)!important;box-shadow:none!important}
#filterBtn svg{width:18px;height:18px;flex:none}
#filterBtn .filter-badge{position:static!important;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--sukkari-400);color:var(--palm-900);font:800 .75rem/1 var(--mono);transform:none!important}
#filterBtn .filter-badge[hidden]{display:none!important}
#filterBtn:active{transform:scale(.97)}

/* ══ PHONE CARDS ARRIVE (2026-10-01, owner) ══ the first time a row comes into view its cards ease in, one after
   another (50 ms apart), so the shelf feels placed rather than printed. Once per row; transform and opacity only. */
@media (max-width:1099px){
  .pp-cards-wait .catalog-card{opacity:0;transform:translateY(14px) scale(.97)}
  .pp-cards-go .catalog-card{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1)!important;
    transition-delay:calc(var(--ci,0) * 50ms)!important}
  .catalog-card .catalog-photo > img,.catalog-card .catalog-photo > .flq{transition:transform .45s cubic-bezier(.23,1,.32,1)!important}
}
@media (prefers-reduced-motion:reduce){ .pp-cards-wait .catalog-card{opacity:1;transform:none} }

/* ══ STRONGER CARD MOTION ON PHONES (2026-10-01, owner: "a little bit bigger, apply it to all products") ══
   The card in focus lifts and casts a shadow; its photo leans in 12% (dates, the tasting box, bundles) and the
   PalmPop cans grow as far as their frame allows (--fit keeps a can from being cut). Rows and grids alike. */
@media (max-width:1099px){
  #shop .catalog-card{transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .5s cubic-bezier(.23,1,.32,1)!important}
  #shop .catalog-card.pp-focus{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 34px -22px rgba(90,52,10,.45),0 0 0 1px rgba(14,58,44,.05)!important}
  #shop .catalog-card.pp-focus .catalog-photo > img,
  #shop .catalog-card.pp-focus .catalog-photo > .flq,
  #shop .catalog-rail:not(.is-grid) .catalog-card.pp-focus .catalog-photo > img,
  #shop .catalog-rail:not(.is-grid) .catalog-card.pp-focus .catalog-photo > .flq{transform:scale(1.12)!important}
  #shop .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img,
  #shop .catalog-rail:not(.is-grid) .catalog-card[data-product^="palmpop"].pp-focus .catalog-photo img{transform:scale(min(1.3,var(--fit,9)))!important}
  #shop .catalog-card .catalog-photo > img,#shop .catalog-card .catalog-photo > .flq{transition:transform .6s cubic-bezier(.23,1,.32,1)!important}
  #shop .catalog-card:active{transform:translateY(-2px) scale(.985)!important;transition-duration:.12s!important}
}
@media (prefers-reduced-motion:reduce){ #shop .catalog-card.pp-focus{transform:none!important} #shop .catalog-card.pp-focus .catalog-photo img{transform:none!important} }

/* ══ CARDS THAT FLOW WITH THE FINGER (2026-10-01, owner: "more seamless, and nicely") ══
   Scroll-driven: each card's lift and photo zoom follow its position in the row, frame by frame, peaking in the
   centre and easing off at the edges. It runs on the compositor (transform only), so swiping stays smooth.
   Rows track the sideways scroll; grids track the page scroll. Browsers without it keep the settle-then-zoom. */
@supports (animation-timeline: view()){
  @media (max-width:1099px) and (prefers-reduced-motion:no-preference){
    @keyframes ppLeanCard{0%{transform:translateY(0) scale(.97)}50%{transform:translateY(-6px) scale(1.02)}100%{transform:translateY(0) scale(.97)}}
    @keyframes ppLeanImg{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
    @keyframes ppLeanCan{0%{transform:scale(min(1.1,calc(var(--fit,9) * .88)))}50%{transform:scale(min(1.3,var(--fit,9)))}100%{transform:scale(min(1.1,calc(var(--fit,9) * .88)))}}
    /* the card names its own position in the row (--ppcard); the photo follows that, not its clipping frame */
    /* (left-to-right pages only: Chrome does not track a right-to-left row this way, so Arabic rows are driven by
       the small script cardsFlow in palmpop-layer.js, which draws the same curve) */
    html:not([dir="rtl"]) #shop .catalog-rail:not(.is-grid) .catalog-card{view-timeline:--ppcard inline;animation:ppLeanCard linear both;animation-timeline:--ppcard;transition:box-shadow .3s ease!important}
    html:not([dir="rtl"]) #shop .catalog-rail:not(.is-grid) .catalog-card .catalog-photo > img,
    html:not([dir="rtl"]) #shop .catalog-rail:not(.is-grid) .catalog-card .catalog-photo > .flq{animation:ppLeanImg linear both;animation-timeline:--ppcard;transition:none!important}
    html:not([dir="rtl"]) #shop .catalog-rail:not(.is-grid) .catalog-card[data-product^="palmpop"] .catalog-photo img{animation:ppLeanCan linear both;animation-timeline:--ppcard}
    /* a grid scrolls with the page: the cards crossing the middle of the screen lean in, more gently */
    @keyframes ppLeanCardV{0%{transform:scale(.985)}50%{transform:translateY(-4px) scale(1.01)}100%{transform:scale(.985)}}
    @keyframes ppLeanImgV{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
    #shop .catalog-rail.is-grid .catalog-card{view-timeline:--ppcard block;animation:ppLeanCardV linear both;animation-timeline:--ppcard;transition:box-shadow .3s ease!important}
    #shop .catalog-rail.is-grid .catalog-card .catalog-photo > img,#shop .catalog-rail.is-grid .catalog-card .catalog-photo > .flq{animation:ppLeanImgV linear both;animation-timeline:--ppcard;transition:none!important}
    #shop .catalog-rail.is-grid .catalog-card[data-product^="palmpop"] .catalog-photo img{animation:ppLeanCan linear both;animation-timeline:--ppcard}
    /* the arrival fade still plays; its movement is left to the scroll */
    .pp-cards-wait .catalog-card{transform:none}
  }
}

/* rows driven by cardsFlow (right-to-left pages, or browsers without scroll-driven animation): the script writes
   each card's transform straight onto it, so no transition may smear it */
#shop .catalog-rail.pp-flow-js > .catalog-card,#shop .catalog-rail.pp-flow-js > .catalog-card .catalog-photo > img,
#shop .catalog-rail.pp-flow-js > .catalog-card .catalog-photo > .flq{transition:none!important;animation:none!important}

/* ── SMOOTHER SCROLL (2026-10-02, owner: "lags"): frosted-glass blur on small labels inside moving cards makes a phone
   re-blur what is behind them every frame. A solid tint looks the same at that size and costs nothing. */
.fl-visual .fv span{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(251,244,232,.92)}
.var-stage .flav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(251,244,232,.94)!important}
/* endless pulses only run while someone can see them: the map pin's ring only while the map is open, the harvest
   "now" glow only while the harvest strip is on screen. Left running, each kept the phone restyling 60 times a second
   on a page nobody was touching. */
#mapModal:not(.show) .map-dot::after{animation:none}
.pp-stages:not(.pp-onscreen) li.is-now::before{animation:none}

/* ── PRODUCT SHEET MARGINS (2026-10-04, owner): on a phone the product pop-up left 16 px each side, too thin to tap
   the page behind it and close. A fingertip of room (40 px) each side; nothing else about the sheet changes. */
@media (max-width:600px){ #infoModal{padding-inline:max(40px, env(safe-area-inset-left)) max(40px, env(safe-area-inset-right))} #infoModal > .mc{margin-inline:0;width:100%} }

/* ── PRODUCT SHEET FACTS, SNUGGER (2026-10-04, owner: "make it fit, not tighter… the words suited together"): the label
   column was a fixed 84 px, so "Sweetened with" broke over two lines and doubled its row. The label now takes the
   width of its words (up to 40%), rows sit on the 4/8 scale (6 px on a phone, 8 px on a desktop instead of 8/12), lines
   at 1.35, and the "Comes in" heading follows at 12 px. Every product sheet, both languages. */
#infoModal .info-facts{margin:8px 0 12px;grid-template-columns:fit-content(40%) minmax(0,1fr);column-gap:16px}
/* one label column for the whole list (subgrid), so every value starts on the same line */
#infoModal .info-facts .fact{grid-column:1 / -1;grid-template-columns:subgrid;column-gap:16px;row-gap:2px;padding-block:6px;line-height:1.35}
@supports not (grid-template-columns:subgrid){ #infoModal .info-facts .fact{grid-template-columns:96px minmax(0,1fr)} }
#infoModal .info-facts .fact > b{line-height:1.3}
#infoModal .info-facts + .pp-soon-packs{margin-top:12px!important}
#infoModal .info-facts:has(+ .pp-soon-packs){margin-bottom:0}
@media (min-width:621px){ #infoModal .info-facts .fact{padding-block:8px} }

/* ── CARDS HUG THEIR CONTENT (2026-10-04, owner: "there's a space… make it fit, desktops and phones"): every card in a
   row was stretched to the tallest one and its price row pinned to the bottom, so a shorter card showed an empty band
   between its description and its price (up to 53 px where dates and PalmPop share a row). Each card now ends where
   its content ends: the price follows the description straight away. Rows and the "view all" grid alike. */
#shop .catalog-rail{align-items:flex-start}
#shop .catalog-rail.is-grid{align-items:start}

/* ── palmir identity 2026 (handoff section 8): the header carries the plain bilingual lockup (tier 2) on every screen;
   the footer the signature lockup in sand, under a gold parapet line. */
.pp-logo.pp-id26 .pp-logo-short{display:none!important}
.pp-logo.pp-id26 .pp-logo-wide{display:block!important;height:34px;width:auto}
@media (max-width:1099px){ .pp-logo.pp-id26 .pp-logo-wide{height:28px} }
@media (max-width:360px){ .pp-logo.pp-id26 .pp-logo-wide{height:24px} }
.pp-parapet{display:block;width:100%;max-width:100%;height:auto;margin:0 0 20px}
.pp-foot-lockup{width:min(100%,320px);height:auto;display:block}
/* the big drawing in the gifting band was the retired date mark: the palm and climber take its place, in palm green (on gold the logo is always palm) (handoff 11.3) */
@media (min-width:1100px){
  #corporate .corp-inner::after{aspect-ratio:1350/1674!important;transform:translateY(-50%)!important;
    background:no-repeat center/contain url("brand/identity/svg/palmir-symbol.svg")!important;opacity:.92}
  html[dir="rtl"] #corporate .corp-inner::after{transform:translateY(-50%)!important}
  /* the menu's gliding marker: the upright date of the i, an ellipse about 0.75 as wide as it is tall (handoff 11.9) */
  .dn-ind{background:#E9A93A!important;border-radius:50%!important;width:8px!important;height:11px!important}
}
/* PalmPop keeps its own script; the family is said by a small endorsement under it (handoff 8.9) */
.pp-from{display:flex;align-items:center;gap:6px;margin:6px 0 2px;font:600 .82rem/1 var(--mono,system-ui);color:var(--ink-muted,#4F6B60)}
.pp-from img{height:17px;width:auto;display:inline-block;vertical-align:middle}
.pp-from-ar{display:none}
html[dir="rtl"] .pp-from-en{display:none} html[dir="rtl"] .pp-from-ar{display:inline-flex;align-items:center;gap:6px}
.pp-from-en{display:inline-flex;align-items:center;gap:6px}

/* ── HOME HERO, DATES FIRST (identity 2026, handoff 11.7): the signature on palm green, one line, one button; the PalmPop
   film follows as the second story with a "from palmir" tag. Compact on phones so the shop stays close. */
.pp-sig{display:grid;justify-items:center;text-align:center;gap:clamp(10px,1.6vw,16px);background:#0E3A2C;color:#FBF4E8;
  border-radius:28px;padding:clamp(22px,4.4vw,52px) 20px clamp(22px,3.6vw,40px);margin:0 0 clamp(14px,2vw,22px)}
.pp-sig-motion{width:min(62vw,440px);height:auto;display:block}
.pp-sig-line{margin:0;font:600 clamp(1.05rem,2.2vw,1.5rem)/1.3 var(--disp,serif);color:#FBF4E8;max-width:28ch}
.pp-sig-cta.mag{background:#E9A93A!important;color:#0E3A2C!important;border-color:#E9A93A!important}
.pp-sig-cta.mag .dot{background:#0E3A2C!important}
.pp-film{position:relative}
.pp-film-from{position:absolute;inset-inline-start:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;background:rgba(14,58,44,.86);color:#FBF4E8;font:600 .8rem/1 var(--mono,system-ui)}
.pp-film-from img{height:15px;width:auto;display:block}
.pp-fw-ar{display:none!important} html[dir="rtl"] .pp-fw-en{display:none!important} html[dir="rtl"] .pp-fw-ar{display:block!important}
@media (min-width:1100px){ .pp-sig{margin-top:8px} }
/* ── HOME HERO v2 (owner 2026-10-09): the product leads. One Sukkari date in front of a gold sun (the brand kit's
   "Qassim harvest" image), the promise beside it, one button. Paints at once: no animation stands between the visitor
   and the words; the date only settles into place, transform-only, after it has already appeared. */
.pp-h26{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 38%;
  grid-template-areas:"kick kick" "h h" "sub art" "cta art";column-gap:12px;row-gap:12px;align-items:center;
  background:var(--dune-100,#F6E3BF);color:var(--palm-900,#0E3A2C);border-radius:28px;
  padding:24px 20px;margin:0 0 clamp(14px,2vw,22px);text-align:start}
.h26-copy{display:contents}
.h26-kick{grid-area:kick;margin:0!important;font:600 .75rem/1.3 var(--mono,system-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:#8A4B17!important}
html[dir="rtl"] .h26-kick{font:700 .875rem/1.4 var(--ar-disp,serif)!important;letter-spacing:0;text-transform:none}
.h26-h{grid-area:h;margin:0!important;font:700 clamp(1.75rem,7.6vw,2.25rem)/1.12 var(--disp,serif)!important;letter-spacing:-.015em;
  color:var(--palm-900,#0E3A2C)!important;text-wrap:balance}
html[dir="rtl"] .h26-h{font-family:var(--ar-disp,serif)!important;line-height:1.35!important;letter-spacing:0}
.h26-sub{grid-area:sub;align-self:end;margin:0!important;font:400 .9375rem/1.5 var(--mono,system-ui)!important;color:#2E5446!important;text-wrap:pretty}
.h26-cta.mag{grid-area:cta;align-self:start;justify-self:start;white-space:nowrap}
.h26-art{grid-area:art;position:relative;align-self:center;display:grid;place-items:center;padding-bottom:10px}
.h26-sun{position:absolute;z-index:-1;width:112%;aspect-ratio:1;border-radius:50%;background:var(--sukkari-400,#E9A93A);
  top:40%;left:50%;translate:-50% -50%}
.h26-date{position:relative;width:100%;max-width:230px;height:auto;display:block;
  filter:drop-shadow(0 14px 16px rgba(90,52,10,.28))}
.h26-ground{position:absolute;z-index:-1;left:50%;bottom:0;width:70%;height:18px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(90,52,10,.22),transparent)}
@media (prefers-reduced-motion:no-preference){
  .h26-date{animation:h26Settle 1.1s cubic-bezier(.32,.72,0,1) both}
  .h26-sun{animation:h26Rise 1.3s cubic-bezier(.32,.72,0,1) both}
}
@keyframes h26Settle{from{transform:translateY(14px) rotate(-3deg)}to{transform:none}}
@keyframes h26Rise{from{scale:.9}to{scale:1}}
@media (max-width:380px){ .h26-sub{font-size:.875rem!important} }
@media (min-width:700px){
  .pp-h26{grid-template-columns:minmax(0,1fr) minmax(260px,38%);grid-template-areas:"kick art" "h art" "sub art" "cta art";
    align-content:center;column-gap:48px;row-gap:16px;padding:48px;border-radius:32px}
  .h26-sub{align-self:start}
  .h26-h{font-size:clamp(2.25rem,4.4vw,3.75rem)!important;max-width:16ch}
  .h26-sub{font-size:1.125rem!important}
  .h26-art{padding-bottom:16px}
  .h26-date{max-width:300px}
  .h26-sun{width:min(108%,420px)}
}
@media (min-width:1100px){ .pp-h26{margin-top:8px;padding:64px 80px} }

/* the vent loader (handoff 7.6): the vent pyramid lights one triangle at a time, like light reaching the vents */
.vent-loader{display:block;margin:18px auto 0;height:auto}
.vent-loader g:last-child path{animation:ppVent 2.2s infinite both;animation-delay:calc(var(--i) * .18s)}
@keyframes ppVent{0%,8%{opacity:0}22%,70%{opacity:1}88%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.vent-loader g:last-child path{animation:none}}
#loader.done .vent-loader g:last-child path{animation:none}   /* it ran forever behind the hidden loader */
/* Our story: the signature at the top of the page, the climber on the "picked by hand" stop (handoff 11.8) */
.pp-head-sig{display:block;width:min(70vw,320px);height:auto;margin:0 0 14px}
.pp-route-climber{display:block;width:36px;height:auto;margin:0 0 6px}
/* the ripeness timeline draws its four dates in the shape of the date on the i: an upright ellipse, 0.75 as wide as tall (handoff 11.9) */
.pp-stage-date{width:33px!important;height:44px!important;border-radius:50%!important}
/* the date is the dot (handoff 10.6): the dot in every button is the date of the i, upright */
.mag .dot{width:7px!important;height:9.5px!important;border-radius:50%!important}
/* the quiz climbs: three rings on a trunk, filled as you answer, the palm and climber at the top (handoff 11.12) */
.fy-bar.fy-climb{position:relative;display:inline-flex;align-items:center;gap:12px;padding-inline-end:2px}
.fy-bar.fy-climb::before{content:"";position:absolute;inset-inline:6px 14px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:rgba(14,58,44,.18)}
.fy-bar.fy-climb i{position:relative;width:13px!important;height:13px!important;border-radius:50%!important;background:#FBF4E8!important;box-shadow:inset 0 0 0 2.5px rgba(14,58,44,.3);overflow:visible!important}
.fy-bar.fy-climb i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#0E3A2C;opacity:0;transform:scale(.4)!important;transition:transform .26s var(--ease-spring),opacity .2s ease}
.fy-bar.fy-climb i.on::after{opacity:1;transform:scale(1)!important}
.fy-bar.fy-climb i.now::after{animation:none!important}
.fy-crown{position:relative;height:20px;width:auto;display:block}
@media (prefers-reduced-motion:reduce){.fy-bar.fy-climb i::after{transition:none}}

/* story page: the values list (owner 2026-10-09) gets room before the promises heading */
.pp-values{margin-bottom:clamp(32px,5vw,56px)!important}

/* ══ THE IBEX (owner, 2026-10-11) ══════════════════════════════════════════════════════════════════════════════
   The climber is the brand; the ibex is a guide and a seal (brand/identity/tools/ibex.py). On the site he stands at
   the current step of an order, leaps in the phone basket bar when something lands, and the gift-collection seal marks
   the gifting page and its boxes. Never beside the logo (so not in the header). He faces the way the order travels:
   the drawing faces left, which is forward in Arabic; English mirrors him. */
.track li.now .tk-d{width:36px;height:36px;top:-18px;border:0;border-radius:0;background:var(--palm-900,#0E3A2C);
  -webkit-mask:url(brand/identity/svg/palmir-ibex.svg) center/contain no-repeat;mask:url(brand/identity/svg/palmir-ibex.svg) center/contain no-repeat;
  transform:translateX(-50%) scaleX(-1)}
html[dir="rtl"] .track li.now .tk-d{transform:translateX(-50%)}
.track li.now{padding-top:26px}
.track li.now b{color:var(--palm-900,#0E3A2C)}
.pp-bag-ibex{flex:none;width:30px;height:30px;margin-inline-start:2px;background:var(--sukkari-400,#E9A93A);
  -webkit-mask:url(brand/identity/svg/palmir-ibex.svg) center/contain no-repeat;mask:url(brand/identity/svg/palmir-ibex.svg) center/contain no-repeat;
  transform:scaleX(-1)}
html[dir="rtl"] .pp-bag-ibex{transform:none}
@media (prefers-reduced-motion:no-preference){
  .track li.now .tk-d{animation:ppIbexHop 1.1s .35s cubic-bezier(.3,.7,.3,1) both}
  .pp-bag.pp-bump .pp-bag-ibex{animation:ppIbexLeap .7s cubic-bezier(.3,.7,.3,1)}
}
@keyframes ppIbexHop{0%,100%{translate:0 0}38%{translate:0 -10px}62%{translate:0 1px}}
@keyframes ppIbexLeap{0%{translate:0 0;rotate:0deg}35%{translate:0 -15px;rotate:-12deg}70%{translate:0 2px;rotate:4deg}100%{translate:0 0;rotate:0deg}}
.pp-gift-h{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pp-gift-h .pp-ibex-seal{position:static;flex:none;width:clamp(76px,18vw,104px);height:auto;display:block;rotate:-8deg}   /* not .pp-seal: that name is the harvest badge */
.pp-gcard-img{position:relative}
.pp-gcard-img .pp-gcard-seal{object-fit:contain;max-width:none;position:absolute;inset-inline-end:8px;top:8px;width:46px!important;height:46px!important;rotate:-8deg;filter:drop-shadow(0 4px 8px rgba(14,58,44,.25))}

/* ── HEADER HEIGHTS, known before the first paint (measured 11 Oct 2026). --pp-bar-h is the delivery bar; --pp-hdr and
   --pp-top are bar + header, the header's bottom edge. JavaScript later writes the same numbers inline (no movement);
   these exist so nothing has to measure the page before it is read. Spanish wraps the bar only on a 320 px screen. */
:root{--pp-bar-h:34px;--pp-hdr:99px;--pp-top:99px}
html[lang="ar"]{--pp-bar-h:37px;--pp-hdr:102px;--pp-top:102px}
@media (min-width:600px){ :root{--pp-bar-h:36px;--pp-hdr:113px;--pp-top:113px} html[lang="ar"]{--pp-bar-h:37px;--pp-hdr:114px;--pp-top:114px} }
@media (min-width:1024px){ :root{--pp-hdr:121px;--pp-top:121px} html[lang="ar"]{--pp-hdr:122px;--pp-top:122px} }
@media (min-width:1100px){ html[lang="ar"]{--pp-hdr:123px;--pp-top:123px} }
.pp-fly-ibex{width:40px;color:var(--sukkari-400,#E9A93A);filter:drop-shadow(0 3px 4px rgba(14,58,44,.35))}   /* the leaping ibex replaces the flying date */

/* ── FIRST PAINT, LIGHTER (2026-10-11). The far sections of the home and the closed sheets are skipped while the first
   screen is drawn (measured: frozen time 123 → 49 ms). It is temporary on purpose: palmpop-layer.js (unskip) hands each
   section back to normal rendering one by one when the page is idle, so nothing is left skipped while you scroll
   (permanent content-visibility made iPhone Safari lag on 29 Sep). A sheet renders normally from its first opening on. */
/* RETIRED 2026-10-13 (measured in the owner's real Safari): the hand-back waited for a quiet moment, and someone who keeps
   scrolling never gives one, so each skipped chapter was drawn all at once as it arrived: a ~200 ms freeze per chapter.
   The chapters now render normally from the start; the sizes below are kept but no longer used. */
/* #palmpop,#quiz,#ritual,#harvest,#why,#benefits,#corporate,footer{content-visibility:auto;contain-intrinsic-size:auto 600px} */
/* while skipped, each section holds its own measured content height (padding is added on top), per language and
   width, measured 11 Oct: one 600px guess for all made the page grow or shrink by up to 270px per section as they
   came back, a jump for anyone scrolling during load. Measure again if a section changes a lot. */
#palmpop{contain-intrinsic-size:auto 818px} #quiz{contain-intrinsic-size:auto 493px} #ritual{contain-intrinsic-size:auto 796px} #harvest{contain-intrinsic-size:auto 351px} #why{contain-intrinsic-size:auto 318px} #benefits{contain-intrinsic-size:auto 533px} #corporate{contain-intrinsic-size:auto 338px} footer{contain-intrinsic-size:auto 870px}
html[lang="ar"] #palmpop{contain-intrinsic-size:auto 809px} html[lang="ar"] #quiz{contain-intrinsic-size:auto 408px} html[lang="ar"] #ritual{contain-intrinsic-size:auto 774px} html[lang="ar"] #harvest{contain-intrinsic-size:auto 367px} html[lang="ar"] #why{contain-intrinsic-size:auto 261px} html[lang="ar"] #benefits{contain-intrinsic-size:auto 528px} html[lang="ar"] #corporate{contain-intrinsic-size:auto 280px} html[lang="ar"] footer{contain-intrinsic-size:auto 843px}
@media (min-width:600px){
  #palmpop{contain-intrinsic-size:auto 788px} #quiz{contain-intrinsic-size:auto 441px} #ritual{contain-intrinsic-size:auto 784px} #harvest{contain-intrinsic-size:auto 371px} #why{contain-intrinsic-size:auto 283px} #benefits{contain-intrinsic-size:auto 486px} #corporate{contain-intrinsic-size:auto 280px} footer{contain-intrinsic-size:auto 728px}
  html[lang="ar"] #palmpop{contain-intrinsic-size:auto 744px} html[lang="ar"] #quiz{contain-intrinsic-size:auto 415px} html[lang="ar"] #ritual{contain-intrinsic-size:auto 801px} html[lang="ar"] #harvest{contain-intrinsic-size:auto 389px} html[lang="ar"] #why{contain-intrinsic-size:auto 283px} html[lang="ar"] #benefits{contain-intrinsic-size:auto 497px} html[lang="ar"] #corporate{contain-intrinsic-size:auto 208px} html[lang="ar"] footer{contain-intrinsic-size:auto 680px} }
@media (min-width:1024px){
  #harvest{contain-intrinsic-size:auto 414px} #why{contain-intrinsic-size:auto 339px} #corporate{contain-intrinsic-size:auto 333px} footer{contain-intrinsic-size:auto 486px}
  html[lang="ar"] #harvest{contain-intrinsic-size:auto 436px} html[lang="ar"] #why{contain-intrinsic-size:auto 339px} html[lang="ar"] #corporate{contain-intrinsic-size:auto 309px} html[lang="ar"] footer{contain-intrinsic-size:auto 486px} }
/* Spanish runs longer than English in some sections */
html[lang="es"] #palmpop{contain-intrinsic-size:auto 847px} html[lang="es"] #quiz{contain-intrinsic-size:auto 518px} html[lang="es"] #harvest{contain-intrinsic-size:auto 411px} html[lang="es"] #corporate{contain-intrinsic-size:auto 378px} html[lang="es"] footer{contain-intrinsic-size:auto 922px}
@media (min-width:600px){ html[lang="es"] #quiz{contain-intrinsic-size:auto 411px} html[lang="es"] #why{contain-intrinsic-size:auto 321px} html[lang="es"] #benefits{contain-intrinsic-size:auto 566px} }
@media (min-width:1024px){ html[lang="es"] #why{contain-intrinsic-size:auto 396px} html[lang="es"] footer{contain-intrinsic-size:auto 504px} }
.modal:not(.show):not([data-opened]),.drawer:not(.show):not([data-opened]){content-visibility:hidden}


/* ── THE THANK-YOU, MADE OURS (owner, 2026-10-11) ── the climber in a gold ring that draws itself, a gold line, the
   customer's name, and the message as a signed note under a gold Najdi parapet */
#coDone .pp-ty{text-align:center;margin-bottom:18px}
.pp-ty-seal{position:relative;width:96px;height:96px;margin:4px auto 16px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#fff 0,var(--sand-50,#FBF4E8) 72%);box-shadow:0 10px 26px -12px rgba(14,58,44,.35)}
.pp-ty-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pp-ty-ring circle{fill:none;stroke:var(--sukkari-400,#E9A93A)}
.pp-ty-ring .r1{stroke-width:2.4;stroke-dasharray:296;stroke-dashoffset:0}
.pp-ty-ring .r2{stroke-width:.9;stroke-dasharray:2 3.2;opacity:.75}
.pp-ty-mark{position:absolute;left:50%;top:50%;width:58px;height:auto;transform:translate(-50%,-52%);color:var(--palm-900,#0E3A2C)}
.pp-ty-eye{margin:0 0 6px!important;font-size:.7rem!important;letter-spacing:.06em;text-wrap:balance;text-transform:uppercase;font-weight:700;
  color:var(--date-700,#9C6B1A)!important;max-width:none!important}
html[dir="rtl"] .pp-ty-eye{letter-spacing:0;font-size:.95rem!important;text-transform:none}
#coDone .pp-ty-h{font-weight:900;font-size:2rem;line-height:1.15;margin:0 0 16px;color:var(--palm-900,#0E3A2C)}
.pp-ty-note{position:relative;margin:0 auto;max-width:380px;background:#fff;border-radius:4px 4px 16px 16px;
  padding:22px 22px 16px;box-shadow:0 1px 0 rgba(14,58,44,.06),0 12px 28px -18px rgba(14,58,44,.4)}
.pp-ty-para{position:absolute;left:0;right:0;top:-10px;width:100%;height:11px;color:var(--sukkari-400,#E9A93A);display:block}
#coDone .pp-ty-msg{margin:0 0 12px!important;max-width:none!important;color:var(--palm-700,#1F5A43)!important;font-size:.95rem!important;line-height:1.75!important}
#coDone .pp-ty-sign{margin:0!important;max-width:none!important;font-family:var(--disp);font-weight:700;font-size:1rem!important;color:var(--palm-900,#0E3A2C)!important;
  text-align:end}
html[dir="rtl"] #coDone .pp-ty-msg{font-size:1.02rem!important}
/* the moment: ring draws, the climber rises, the line and the note follow */
.pp-ty-go .pp-ty-ring .r1{animation:ppTyRing 1s .1s cubic-bezier(.6,.1,.3,1) both}
.pp-ty-go .pp-ty-ring .r2{animation:ppTyFade .6s .7s both}
.pp-ty-go .pp-ty-mark{animation:ppTyMark .7s .35s cubic-bezier(.2,.9,.3,1.15) both}
.pp-ty-go .pp-ty-eye,.pp-ty-go .pp-ty-h{animation:ppTyUp .55s .75s both}
.pp-ty-go .pp-ty-note{animation:ppTyUp .6s .95s both}
@keyframes ppTyRing{from{stroke-dashoffset:296}to{stroke-dashoffset:0}}
@keyframes ppTyFade{from{opacity:0}to{opacity:.75}}
@keyframes ppTyMark{from{opacity:0;transform:translate(-50%,-30%) scale(.8)}to{opacity:1;transform:translate(-50%,-52%) scale(1)}}
@keyframes ppTyUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .pp-ty-go *{animation:none!important} }

/* "Continue shopping" sits in the basket, under Express checkout (owner, 2026-10-11) */
#cartFoot .pp-keep{display:block;width:100%;min-height:48px;margin-top:10px;border-radius:999px;border:1.5px solid var(--palm-900,#0E3A2C);
  background:transparent;color:var(--palm-900,#0E3A2C);font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s}
#cartFoot .pp-keep:active{background:rgba(14,58,44,.06)}
@media (hover:hover){ #cartFoot .pp-keep:hover{background:rgba(14,58,44,.05)} }

/* the basket's remove button: the bin in the shop's icon line, in a round button like the quantity pill */
.ci .pp-rm{width:36px;height:36px;padding:0!important;margin-top:6px;border-radius:50%;border:1px solid var(--hairline,rgba(14,58,44,.16));
  background:transparent;color:var(--palm-900,#0E3A2C);display:inline-grid;place-items:center;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.ci .pp-rm svg{width:19px;height:19px;overflow:visible}
.ci .pp-rm .lid{transform-origin:5px 7px;transition:transform .25s cubic-bezier(.3,.7,.3,1.3)}
.ci .pp-rm:active{background:rgba(14,58,44,.06)}
@media (hover:hover){ .ci .pp-rm:hover{border-color:var(--palm-900,#0E3A2C)} .ci .pp-rm:hover .lid{transform:rotate(-14deg)} }

/* ── CHECKOUT, SIMPLE AND SMALLER (owner, 2026-10-12) ── the address in one tap; tighter fields; the payment note in one
   line; nothing said twice */
#coForm .fld{margin-bottom:10px}
#coForm .fld label{margin-bottom:5px}
#coForm .fld input{min-height:44px;padding-block:9px!important;border-radius:12px!important}
#coForm .express-note{margin-top:4px;font-size:.76rem}
#coForm #shipFact{display:none!important}                 /* the summary card already says it */
.pp-loc-pick{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-bottom:8px}
.pp-loc:has(.pin-done.show) .pp-loc-pick{display:none}
.pp-loc-gps{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:9px 14px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--palm-900,#0E3A2C);background:var(--white,#fff);color:var(--palm-900,#0E3A2C);text-align:start;transition:background .2s}
.pp-loc-gps:active{background:rgba(14,58,44,.05)}
.pp-loc-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sand-50,#FBF4E8)}
.pp-loc-ic svg{width:21px;height:21px}
.pp-loc-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pp-loc-t b{font-size:.95rem;font-weight:700}
.pp-loc-t small{font-size:.76rem;color:var(--muted);font-weight:500}
.pp-loc-gps.busy .pp-loc-ic{animation:ppLocPulse 1s ease-in-out infinite}
@keyframes ppLocPulse{50%{box-shadow:0 0 0 6px rgba(233,169,58,.25)}}
.pp-loc-map,.pp-na-ask{align-self:flex-start;background:none;border:0;padding:4px 2px;font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--date-700,#9C6B1A);text-decoration:underline;text-underline-offset:3px}
.pp-na-ask{margin:-2px 0 10px}
.pp-na-ask[hidden]{display:none}
#coForm .fld-na{display:none}
#coForm .fld-na.open{display:block}
#coForm .pin-done{margin-bottom:8px;padding:10px 12px;border-radius:12px;background:var(--white,#fff);border:1.5px solid #1E7A4C;font-size:.86rem;flex-wrap:nowrap}
#coForm .pin-done #pinTxt{color:var(--palm-900,#0E3A2C);font-weight:600}
.pp-loc-edit{flex:none;background:none;border:0;padding:4px 6px;font-size:.8rem;font-weight:700;color:var(--date-700,#9C6B1A);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* the payment note: one quiet line, not a dashed box with the logo again */
#coForm .paypanel > div{border:0!important;padding:8px 4px 0!important;text-align:start!important;font-size:.8rem!important}
#coForm .paypanel .pp-mark{display:none!important}
#coForm .paypanel .fld{margin-top:6px!important}
#coForm .paychips button{min-height:48px}
#coForm .paypanel.on{margin-bottom:14px}
.ci .qty .pp-qty-in{width:42px;min-width:0;height:30px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
  text-align:center;font:inherit;font-size:16px;font-weight:600;color:var(--palm-900,#0E3A2C)}
.ci .qty .pp-qty-in:focus{outline:2px solid var(--sukkari-400,#E9A93A);outline-offset:1px;border-radius:6px}
.pp-qty-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;border-radius:50%;border:1px solid var(--hairline);background:var(--white);color:var(--palm-900);font-weight:700;font-size:1.1rem;cursor:pointer;transition:transform .12s var(--ease-out),background .15s,border-color .15s}
.pp-qty-btn:hover{background:var(--sand-50);border-color:var(--palm-900)}
.pp-qty-btn:active{transform:scale(.92)}
.pp-qty-btn:focus-visible{outline:2px solid var(--palm-900);outline-offset:2px}
.promo-btn{min-height:44px;border:1.5px solid var(--hairline)!important;border-radius:var(--r-sm)!important;color:var(--palm-900)!important;font-weight:700;letter-spacing:.04em;text-transform:none;transition:transform .15s var(--ease-out),background .18s,border-color .18s}
.promo-btn:hover{background:rgba(14,58,44,.06)!important;border-color:var(--palm-900)!important}
.promo-btn:active{transform:scale(.97)}
.promo-btn:focus-visible{outline:2px solid var(--palm-900);outline-offset:2px}

/* ── THE COMPANY QUOTE FORM (2026-10-12) ── */
.pp-quote{max-width:520px;margin:22px 0 0;padding:18px;border-radius:18px;background:var(--white,#fff);box-shadow:0 10px 28px -20px rgba(14,58,44,.45);display:flex;flex-direction:column;gap:10px}
.pp-quote-h{margin:0;font-weight:800;color:var(--palm-900,#0E3A2C)}
.pp-q-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-q-f{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--muted);font-weight:600;min-width:0}
.pp-q-f input,.pp-q-f select{width:100%;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid rgba(14,58,44,.22);background:var(--sand-50,#FBF4E8);
  font:inherit;font-size:16px;color:var(--palm-900,#0E3A2C);font-weight:500}
.pp-q-c{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--palm-900,#0E3A2C);cursor:pointer}
.pp-q-c input{width:20px;height:20px;accent-color:var(--palm-900,#0E3A2C)}
.pp-quote .pp-btn{width:100%;justify-content:center;margin-top:4px}
.pp-quote-note{margin:0;font-size:.78rem;color:var(--muted);text-align:center}
#cartFoot .pp-bulk{display:block;width:100%;margin:0 0 10px;padding:9px 12px;border-radius:12px;border:1px dashed var(--date-700,#9C6B1A);
  background:rgba(233,169,58,.1);color:var(--palm-900,#0E3A2C);font-size:.84rem;text-align:center;cursor:pointer}
#cartFoot .pp-bulk[hidden]{display:none}
#cartFoot .pp-bulk b{color:var(--date-700,#9C6B1A);text-decoration:underline;text-underline-offset:3px}

/* ── NO "PAYMENT AFTER CONFIRMATION" LINES (owner, 2026-10-12: online payment goes live soon) ── the header tag and the
   mada / Apple Pay notes are hidden; stc bank keeps its mobile-number box */
#checkout .mch .sec{display:none!important}
#coForm .paypanel[data-pp="mada"],#coForm .paypanel[data-pp="apple"]{display:none!important}
#coForm .paypanel[data-pp="stc"] [data-i18n]:not(label){display:none}
#coForm .paychips{margin-bottom:14px}

/* ── ONLINE PAYMENT (Moyasar, 2026-10-12); shows only when payments are switched on ── */
.pp-pay-on #coForm .pay-label,.pp-pay-on #coForm .paychips,.pp-pay-on #coForm .paypanel{display:none!important}
.pp-paystep{padding-top:6px}
.pp-paystep[hidden]{display:none}
.pp-pay-top{text-align:center;margin-bottom:14px}
.pp-pay-eye{margin:0 0 4px;font-size:.86rem;color:var(--muted)}
.pp-pay-amt{margin:0;font-size:2rem;font-weight:900;color:var(--palm-900,#0E3A2C)}
.pp-pay-msg{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#FDECEA;color:#8A1F11;font-size:.88rem}
.pp-pay-msg[hidden]{display:none}
.pp-pay-wait{text-align:center;color:var(--muted);font-size:.9rem;padding:18px 0}
.pp-pay-later{display:block;margin:14px auto 0;background:none;border:0;padding:8px;font-size:.84rem;font-weight:600;cursor:pointer;
  color:var(--date-700,#9C6B1A);text-decoration:underline;text-underline-offset:3px}
/* Moyasar's form in palmir's colours; 16px fields so iPhone does not zoom on tap */
#ppPayStep .mysr-form .bg-primary{background:var(--palm-900,#0E3A2C)!important;border-radius:999px!important;min-height:52px;font-weight:700}
#ppPayStep .mysr-form .bg-primary:hover{background:#0B2F24!important}
#ppPayStep .mysr-form .bg-stc{border-radius:999px!important;min-height:52px}

/* ── SKIP TO CONTENT (review 2026-10-12): hidden until a keyboard user tabs to it ── */
.pp-skip{position:fixed;top:8px;inset-inline-start:8px;z-index:10000;padding:10px 16px;border-radius:999px;background:var(--palm-900,#0E3A2C);
  color:#fff!important;font-weight:700;text-decoration:none;transform:translateY(-160%);transition:transform .2s}
.pp-skip:focus,.pp-skip:focus-visible{transform:none;outline:2px solid var(--sukkari-400,#E9A93A);outline-offset:2px}
#ppMain:focus{outline:none}

/* ── MOTION IDENTITY (motion-design skill, 2026-10-12) ──
   Audit: 11 easing curves and 23 durations across the site; the basket drawer took 0.6 s and closed as slowly as it
   opened. palmir moves calm and quick: ONE signature curve (fast start, soft landing), three durations, and exits a
   third quicker than entrances, because people care about what arrives, not what leaves. Sheets 360-380 ms in,
   240-260 ms out (the skill's range for drawers and dialogs is 300-400 ms). */
:root{--pp-ease:cubic-bezier(.23,1,.32,1);--pp-ease-out:var(--pp-ease);--ease:var(--pp-ease);   /* one signature curve; the older names point at it */
  /* exits ease OUT as well (review-animations, Emil Kowalski: never ease-in on UI, it delays the moment you watch);
     exits are simply shorter. Drawers use the iOS-like drawer curve. */
  --pp-ease-exit:var(--pp-ease);--pp-ease-drawer:cubic-bezier(.32,.72,0,1);--pp-t1:140ms;--pp-t2:220ms;--pp-t3:320ms}
.drawer{transition:transform var(--pp-t2) var(--pp-ease-exit),visibility var(--pp-t2)!important}
.drawer.show{transition:transform var(--pp-t3) var(--pp-ease-drawer),visibility 0s!important}
.ov{transition:opacity 220ms var(--pp-ease-exit),visibility 220ms!important}
.ov.show{transition:opacity 300ms var(--pp-ease),visibility 0s!important}
.modal{transition:opacity 220ms var(--pp-ease-exit),visibility 220ms!important}
.modal.show{transition:opacity 300ms var(--pp-ease),visibility 0s!important}
.modal .mc{transition:transform 240ms var(--pp-ease-exit)!important}
.modal.show .mc{transition:transform 300ms var(--pp-ease)!important}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer.show,.ov,.ov.show,.modal,.modal.show,.modal .mc,.modal.show .mc{transition-duration:1ms!important}
}

/* the sheet's last line held delivery and the card names in one run (Arabic then Latin, read as one jumble); now two
   clear lines, the payment names quieter (designer-skills critique, 2026-10-12) */
.info-buymeta{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:3px!important}
.info-buymeta > span[dir="ltr"]{opacity:.75;font-size:.92em;letter-spacing:.02em}
html[dir="rtl"] .info-buymeta > span[dir="ltr"]{align-self:flex-start}

/* ── PRESS FEEDBACK EVERYWHERE (review-animations, 2026-10-12) ── every pressable thing gives under the finger: scale
   0.97, 160 ms, ease-out. These buttons had none (basket "Continue shopping", the location button, − and +, the bin,
   the close buttons). */
#cartFoot .pp-keep,#cartFoot .pp-bulk,.pp-loc-gps,.ci .qty button,.ci .pp-rm,.x,.pp-quote .pp-btn,.pp-pay-later{transition-property:transform,background-color,border-color,color,opacity;transition-duration:160ms;transition-timing-function:var(--pp-ease)}
#cartFoot .pp-keep:active,#cartFoot .pp-bulk:active,.pp-loc-gps:active,.ci .qty button:active,.ci .pp-rm:active,.x:active,.pp-quote .pp-btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){ .pp-keep:active,.pp-loc-gps:active,.ci .qty button:active,.ci .pp-rm:active,.x:active,.pp-quote .pp-btn:active,.pp-bulk:active{transform:none} }

/* ── QUESTIONS BEFORE BUYING (landing-page-design, 2026-10-12) ── native <details>: keyboard and screen-reader ready */
.pp-faq{padding-block:clamp(40px,7vw,88px)}
.pp-faq-l{max-width:760px;display:flex;flex-direction:column;gap:10px;margin-top:18px}
.pp-faq-q{background:var(--white,#fff);border-radius:16px;box-shadow:0 6px 18px -14px rgba(14,58,44,.4)}
.pp-faq-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  font-weight:700;color:var(--palm-900,#0E3A2C);min-height:48px}
.pp-faq-q summary::-webkit-details-marker{display:none}
.pp-faq-q summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--date-700,#9C6B1A);border-bottom:2px solid var(--date-700,#9C6B1A);   /* physical sides: a down chevron in both directions */
  transform:rotate(45deg) translateY(-3px);transition:transform 200ms var(--pp-ease)}
.pp-faq-q[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.pp-faq-q summary:focus-visible{outline:2px solid var(--sukkari-400,#E9A93A);outline-offset:2px;border-radius:16px}
.pp-faq-q p{margin:0;padding:0 18px 16px;color:var(--palm-700,#1F5A43);line-height:1.75}
.pp-faq-go{display:inline-flex;margin-top:10px}
@media (prefers-reduced-motion:reduce){ .pp-faq-q summary::after{transition:none} }

/* the returns promise, where the decision is made: under the order button */
#coForm .pp-co-promise{margin:10px 0 0;text-align:center;font-size:.82rem;color:var(--palm-700,#1F5A43)}
#coForm .pp-co-promise::before{content:"✓ ";color:#1E7A4C;font-weight:700}

/* ── THE FIVE FLAVOURS (PalmPop page, 2026-10-12) ── a square scene that dissolves between flavours, the picker beside */
.pp-flavours{padding-block:clamp(40px,7vw,96px)}
.pp-flv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:20px}
@media (max-width:820px){ .pp-flv{grid-template-columns:1fr} }
.pp-morph{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:#F3E3C8;box-shadow:0 18px 40px -24px rgba(14,58,44,.45);touch-action:pan-y}
.pp-morph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 420ms var(--pp-ease)}
.pp-morph-img.on{opacity:1}
.pp-morph-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.pp-morph-run .pp-morph-cv{opacity:1}
.pp-morph-gl .pp-morph-img{transition:none}
@media (prefers-reduced-motion:reduce){ .pp-morph-img{transition:none} }
.pp-flv-now{margin:0 0 16px;min-height:3.4em}
.pp-flv-now b{display:block;font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;color:var(--palm-900,#0E3A2C);line-height:1.15}
.pp-flv-now span{display:block;margin-top:4px;color:var(--palm-700,#1F5A43);font-size:.95rem}
.pp-flv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pp-flv-chip{min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(14,58,44,.22);background:var(--white,#fff);
  color:var(--palm-900,#0E3A2C);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  transition-property:transform,background-color,border-color,color;transition-duration:160ms;transition-timing-function:var(--pp-ease)}
.pp-flv-chip[aria-pressed="true"]{background:var(--palm-900,#0E3A2C);border-color:var(--palm-900,#0E3A2C);color:#fff}
.pp-flv-chip:active{transform:scale(.97)}
.pp-flv-chip:focus-visible,.pp-flv-pause:focus-visible{outline:2px solid var(--sukkari-400,#E9A93A);outline-offset:2px}
.pp-flv-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.pp-flv-pause{background:none;border:0;padding:8px 4px;min-height:44px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  color:var(--date-700,#9C6B1A);text-decoration:underline;text-underline-offset:3px}

/* ── THE palmir CARD (above Moyasar's form, payments switched on only) ── */
.pp-card{width:min(320px,100%);aspect-ratio:1.586/1;margin:0 auto 18px;perspective:1000px}
.pp-card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 380ms var(--pp-ease)}
.pp-card-back .pp-card-in{transform:rotateY(180deg)}
.pp-card-f,.pp-card-b{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(120% 90% at 85% 10%,rgba(233,169,58,.38),transparent 55%),linear-gradient(135deg,#145140,#0E3A2C 55%,#0A2B21);
  color:#FBF4E8;box-shadow:0 22px 40px -22px rgba(14,58,44,.7);direction:ltr}
.pp-card-f::after,.pp-card-b::after{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:12px solid rgba(233,169,58,.28);
  left:-22%;bottom:-48%;filter:blur(10px)}
.pp-card-f{padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}
.pp-card-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.pp-card-mark svg{height:20px;width:auto;display:block}
.pp-card-mark svg *{fill:#FBF4E8!important}
.pp-card-brand{height:26px;display:flex;align-items:center}
.pp-card-brand img{height:22px;width:auto;background:#fff;border-radius:5px;padding:2px 5px}
.pp-card-num{position:relative;z-index:1;font:600 clamp(1.05rem,4.6vw,1.3rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-card-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.pp-card-foot small,.pp-card-cvc small{display:block;font-size:.62rem;letter-spacing:.08em;opacity:.75;margin-bottom:2px}
html[dir="rtl"] .pp-card-foot small{letter-spacing:0;font-size:.7rem}
.pp-card-foot b{font-weight:700;font-size:.86rem;display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-card-b{transform:rotateY(180deg)}
.pp-card-stripe{height:38px;margin-top:22px;background:#06221A}
.pp-card-cvc{position:relative;z-index:1;margin:16px 18px 0;text-align:right}
.pp-card-cvc b{display:block;background:#FBF4E8;color:#0E3A2C;border-radius:8px;padding:8px 12px;font-size:1.1rem;letter-spacing:.2em}
@media (prefers-reduced-motion:reduce){
  .pp-card-in{transition:none;transform:none!important}
  .pp-card-back .pp-card-f{visibility:hidden} .pp-card-back .pp-card-b{transform:none}
}

/* ── OUR STORY, IN LAYERS ── */
.pp-scene{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F8EBD2}
.pp-scene > [data-l]{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.pp-scene > img{object-fit:cover;object-position:50% 100%;margin:0;border-radius:0}
.pp-scene-t{display:flex;align-items:flex-start;justify-content:center;padding-top:9%;font-family:var(--disp);font-weight:900;
  font-size:clamp(1.8rem,7vw,5.6rem);line-height:1;color:var(--palm-900,#0E3A2C);text-shadow:0 2px 24px rgba(248,235,210,.9);pointer-events:none}
@media (max-width:600px){ .pp-scene{aspect-ratio:4/5} .pp-scene-t{padding-top:9%} }
.pp-scene .pp-scene-narrow{display:none}
@media (max-width:600px){ .pp-scene .pp-scene-wide{display:none} .pp-scene .pp-scene-narrow{display:block} }

/* ── HOME HERO v3: THE OASIS IN LAYERS (owner 2026-10-12) ── the photo with its sky cut out in front, a big palmir
   word in the sky behind the fronds, the sky itself a gradient; scrolling moves them apart (palmpop-layer.js) */
.pp-h26.pp-px{display:block;padding:0;background:none;border-radius:0;overflow:visible}
.px-vis{position:relative;height:min(52svh,470px);overflow:hidden;border-radius:24px;background:#EAF2F2;isolation:isolate}
.px-l{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.px-sky{background:linear-gradient(180deg,#EAF2F2 0%,#F2F6F7 45%,#EEF3F1 100%)}
.px-front{object-fit:cover;object-position:50% 100%;margin:0;max-width:none}
.px-word{display:flex;justify-content:center;align-items:flex-start;padding-top:clamp(18px,7%,90px);pointer-events:none;
  font-family:var(--disp);font-weight:900;font-size:clamp(4.2rem,21vw,13rem);line-height:.9;letter-spacing:-.03em;color:var(--palm-900,#0E3A2C)}
.px-word span{display:block}
html[dir="rtl"] .px-word{font-family:var(--ar-disp,serif);letter-spacing:0;line-height:1.1}
.px-fade{position:absolute;inset:auto 0 0 0;height:26%;background:linear-gradient(180deg,rgba(251,244,232,0),var(--sand-50,#FBF4E8));z-index:2;pointer-events:none}
.pp-px .h26-copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;z-index:3;margin-top:-34px;padding:0 6px}
.pp-px .h26-h{max-width:18ch}
@media (max-width:699px){ .pp-px .h26-copy{margin-top:-26px;gap:8px} .pp-px .h26-h{font-size:clamp(1.6rem,7vw,2rem)!important} .pp-px .h26-sub{font-size:.9rem!important} }
@media (min-width:700px){
  .px-vis{height:min(86svh,780px);border-radius:32px}
  .pp-px .h26-copy{margin-top:-64px;padding:0 24px;gap:14px}
  .pp-px .h26-h{font-size:clamp(2.25rem,4.4vw,3.75rem)!important}
  .pp-px .h26-sub{font-size:1.125rem!important;max-width:52ch}
}
@media (min-width:1100px){ .pp-h26.pp-px{padding:0;margin-top:8px} .pp-px .h26-copy{padding:0 48px} }
@media (max-width:699px){ .px-word{padding-top:calc(min(52svh,470px) * .25);font-size:clamp(3rem,15vw,3.8rem)} }   /* the phone crop's clear sky sits lower, between the fronds and the mountain */
/* on a phone the crop leaves no clear sky for the word to sit behind the fronds: it comes in front, softly lit, and
   still moves at its own speed (40%) against the photo (10%) */
@media (max-width:699px){ .px-word{z-index:1;text-shadow:0 0 18px rgba(242,246,247,.95),0 0 4px rgba(242,246,247,.9)} }
/* the oasis has palms right across its sky: the word comes in front everywhere (still moving at 40% against the
   photo's 10%), softly lit so it reads over the fronds */
.px-word{z-index:1;text-shadow:0 0 24px rgba(242,246,247,.95),0 0 6px rgba(242,246,247,.9)}
@media (min-width:700px){
  .px-vis{height:min(78svh,720px)}
  .px-word{font-size:clamp(5rem,12vw,10rem);padding-top:clamp(28px,6%,70px)}
  .px-fade{height:48%;background:linear-gradient(180deg,rgba(251,244,232,0),rgba(251,244,232,.72) 55%,var(--sand-50,#FBF4E8))}
  /* the headline and the button sit in the scene's faded ground, on the reading side, away from the man in the thobe */
  .pp-px{position:relative}
  .pp-px .h26-copy{position:absolute;inset-inline-start:0;bottom:0;margin:0;padding:0 44px 36px;max-width:min(600px,48%);z-index:3}
}
@media (min-width:1100px){ .pp-px .h26-copy{padding:0 56px 44px} }
@media (min-width:700px){
  /* a frosted sand panel behind the words: the photo still shows through, the trunks stop fighting the headline */
  .pp-px .h26-copy{inset-inline-start:28px;bottom:28px;padding:26px 30px 28px;border-radius:24px;
    background:rgba(251,244,232,.84);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
    box-shadow:0 18px 40px -24px rgba(14,58,44,.45)}
  .px-fade{height:22%}
}
@media (min-width:1100px){ .pp-px .h26-copy{inset-inline-start:40px;bottom:40px;padding:30px 36px 32px} }

/* ── HERO v4: THE DAWN SCENE (owner 2026-10-12) ── four layers from one original scene; the sky's top colour fills
   what the back layer uncovers as it moves */
.px-vis{background:#9AABC1}
.px-img{object-fit:cover;object-position:50% 62%;margin:0;max-width:none}
.px-word{color:#FBF4E8;text-shadow:0 2px 30px rgba(120,70,20,.35)}       /* cream on the dawn sky, like the sun */
@media (max-width:699px){ .px-word{text-shadow:0 2px 22px rgba(120,70,20,.45);padding-top:calc(min(52svh,470px) * .12)} .px-img{object-position:50% 70%} }
/* the dawn sky is open above the grove: the word goes back between the grove and the ridge, as in the parallax code */
.px-word{z-index:auto;color:var(--palm-900,#0E3A2C);text-shadow:none}
@media (max-width:699px){ .px-word{z-index:auto;text-shadow:none} }

/* ── DESKTOP HOME AS ONE STORY (owner 2026-10-12: "storytelling, continuous scrolling, sections separated by colours,
   all fit the size, no gaps") ── on a desktop home only: every chapter runs edge to edge, at least one screen tall,
   its content centred, each in its own brand colour, nothing between them. The headline leaves the frosted panel and
   becomes the second chapter, straight after the dawn scene. Phones keep their own layout. */
@media (min-width:1100px){
  html[data-pp-view="home"] #ppMain{max-width:none!important;width:100%!important;padding:0!important;margin:0!important;gap:0!important}
  html[data-pp-view="home"] #ppMain > section:not(.pp-off){
    --chap:max(56px,calc((100vw - 1240px) / 2));
    width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;
    padding-inline:var(--chap)!important;padding-block:clamp(72px,9vh,120px)!important;
    min-height:calc(100svh - var(--pp-top,121px));display:flex!important;flex-direction:column;justify-content:center;box-sizing:border-box}
  /* the colours, in reading order: sand, white, harvest cream, palm green, adobe, sukkari gold, sand, then the green footer */
  html[data-pp-view="home"] #ppIntro{background:#FFFFFF!important}
  html[data-pp-view="home"] #ppLines{background:#F6E3BF!important}
  html[data-pp-view="home"] #harvest{background:#FBEFC9!important}
  html[data-pp-view="home"] #why{background:#0E3A2C!important}
  html[data-pp-view="home"] #ppFindCta{background:#E8CFA9!important}
  html[data-pp-view="home"] #corporate{background:#E9A93A!important}
  html[data-pp-view="home"] #ppFaq{background:#FBF4E8!important}
  html[data-pp-view="home"] footer{margin-top:0!important}
  /* chapter 1 and 2: the dawn scene fills the first screen edge to edge; the promise is the next screen */
  html[data-pp-view="home"] #top{padding:0!important;justify-content:flex-start;min-height:0}
  html[data-pp-view="home"] .pp-h26.pp-px{margin:0!important;padding:0!important}
  html[data-pp-view="home"] .px-vis{height:calc(100svh - var(--pp-top,121px));border-radius:0}
  html[data-pp-view="home"] .px-fade{height:18%;background:linear-gradient(180deg,rgba(14,58,44,0),#0E3A2C)}
  html[data-pp-view="home"] .pp-px .h26-copy{position:static!important;max-width:none!important;margin:0!important;border-radius:0!important;
    background:#0E3A2C!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
    min-height:calc(100svh - var(--pp-top,121px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    gap:22px;padding:80px max(56px,calc((100vw - 1100px) / 2))!important}
  html[data-pp-view="home"] .pp-px .h26-kick{color:#E9A93A!important}
  html[data-pp-view="home"] .pp-px .h26-h{color:#FBF4E8!important;max-width:16ch;font-size:clamp(3rem,5.4vw,5.6rem)!important;line-height:1.15!important}
  html[data-pp-view="home"] .pp-px .h26-sub{color:rgba(251,244,232,.82)!important;max-width:44ch;font-size:1.25rem!important}
  html[data-pp-view="home"] .pp-px .h26-cta.mag{background:#E9A93A!important;color:#0E3A2C!important;align-self:center}
}
@media (min-width:1100px){
  html[data-pp-view="home"] #ppMain > section#top{padding:0!important}
  html[data-pp-view="home"] #ppMain > section#top > :not(#ppHero){padding-inline:max(56px,calc((100vw - 1240px) / 2))}
}
@media (min-width:1100px){
  html[data-pp-view="home"] .pp-px .h26-sub{margin-inline:auto!important;text-align:center!important}
  /* the PalmPop film runs edge to edge as its own chapter, then the facts strip sits on dune */
  html[data-pp-view="home"] #ppMain > section#top{background:var(--facts-ground,#F6E3BF)!important}
  html[data-pp-view="home"] #top > .pp-stage{padding:0!important;margin:0!important;width:100%!important;max-width:none!important;border-radius:0!important;min-height:calc(100svh - var(--pp-top,121px))}
  html[data-pp-view="home"] #top > .pp-stage *{border-radius:0}
  html[data-pp-view="home"] #top > .pp-facts{margin:0!important;padding-block:28px!important}
}
/* desktop story, pass 2 (colour review): light and dark alternate, no two neighbours share a colour.
   order: dawn, green promise, film, dune facts | sand intro | dune lines | green why | cream harvest | gold companies |
   green "find yours" | sand FAQ + first-order invite | green footer */
@media (min-width:1100px){
  html[data-pp-view="home"] #ppMain > section{border:0!important}
  html[data-pp-view="home"] #top{order:1!important} html[data-pp-view="home"] #mq{order:2}
  html[data-pp-view="home"] #ppIntro{order:3!important;background:#FBF4E8!important}
  html[data-pp-view="home"] #ppLines{order:4!important}
  html[data-pp-view="home"] #why{order:5!important}
  html[data-pp-view="home"] #harvest{order:6!important}
  html[data-pp-view="home"] #corporate{order:7!important}
  html[data-pp-view="home"] #ppFindCta{order:8!important;background:#0E3A2C!important}
  html[data-pp-view="home"] #ppFaq{order:9!important}
  html[data-pp-view="home"] #harvest > *{border-top:0!important;margin-top:0!important;padding-top:0!important}
  /* intro: words and the harvest photo side by side, one screen */
  html[data-pp-view="home"] #ppIntro{display:grid!important;grid-template-columns:1fr minmax(0,460px);align-items:center;align-content:center;column-gap:clamp(48px,6vw,96px)}
  html[data-pp-view="home"] #ppIntro .pp-intro-t{max-width:none;margin:0}
  html[data-pp-view="home"] #ppIntro .pp-intro-img{margin:0;width:100%;max-width:460px}
  html[data-pp-view="home"] #ppIntro .pp-intro-img img{width:100%;height:min(66svh,600px);object-fit:cover}
  /* why: the sentence sits in the middle of its chapter */
  html[data-pp-view="home"] #why .sweetband-grid > div{text-align:center;display:flex;flex-direction:column;align-items:center}
  html[data-pp-view="home"] #why .sweetband-grid p{max-width:52ch;margin-inline:auto}
  html[data-pp-view="home"] #why .disp{font-size:clamp(2.6rem,4.4vw,4.4rem)!important}
  /* find yours: the card dissolves into the green chapter */
  html[data-pp-view="home"] .pp-findcta-in{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;
    display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:28px}
  html[data-pp-view="home"] .pp-findcta-in > div{display:flex;flex-direction:column;align-items:center}
  html[data-pp-view="home"] .pp-findcta-in .disp{font-size:clamp(2.6rem,4.4vw,4.4rem)!important}
  html[data-pp-view="home"] .pp-findcta-in p:not(.pp-kick){max-width:48ch}
  /* the first-order invite closes the FAQ chapter in the same sand, then the green footer */
  html[data-pp-view="home"] .welcome-invite{background:#FBF4E8!important;border:0!important;margin:0!important;padding:0 0 56px!important}
}
@media (min-width:1100px){ html[data-pp-view="home"] #why .sweetband{background:transparent!important;border-radius:0!important;padding:0!important;box-shadow:none!important} }
/* chapter seams (owner 2026-10-12: "smooth when changing"): every chapter's top edge melts from the colour before it
   into its own over 180px, mixed in OKLab so dune to palm green passes through clean tones, not grey. No words sit
   inside a seam (chapters centre their content, and the FAQ starts lower). Order and colours as in pass 2 above. */
@media (min-width:1100px){
  html[data-pp-view="home"] #ppMain > section{--seam:180px}
  html[data-pp-view="home"] #ppIntro{background:linear-gradient(180deg in oklab,#F6E3BF 0,#FBF4E8 var(--seam))!important}
  html[data-pp-view="home"] #ppLines{background:linear-gradient(180deg in oklab,#FBF4E8 0,#F6E3BF var(--seam))!important}
  html[data-pp-view="home"] #why{background:linear-gradient(180deg in oklab,#F6E3BF 0,var(--scene-dark) var(--seam))!important}
  html[data-pp-view="home"] #harvest{background:linear-gradient(180deg in oklab,var(--scene-dark) 0,#FBEFC9 var(--seam))!important}
  html[data-pp-view="home"] #corporate{background:linear-gradient(180deg in oklab,#FBEFC9 0,#E9A93A var(--seam))!important}
  html[data-pp-view="home"] #ppFindCta{background:linear-gradient(180deg in oklab,#E9A93A 0,var(--scene-dark) var(--seam))!important}
  html[data-pp-view="home"] #ppFaq{background:linear-gradient(180deg in oklab,var(--scene-dark) 0,#FBF4E8 var(--seam))!important;padding-top:calc(var(--seam) + 40px)!important}
  /* the sand FAQ settles into the green footer the same way */
  html[data-pp-view="home"] .welcome-invite{background:linear-gradient(180deg in oklab,#FBF4E8 0,#FBF4E8 45%,var(--scene-dark) 100%)!important;padding:0 0 150px!important}
}
/* chapters overlap by one pixel so a half-pixel edge never shows as a hairline between two colours */
@media (min-width:1100px){
  html[data-pp-view="home"] #ppMain > section:not(.pp-off):not(#top){margin-top:-1px!important}
  html[data-pp-view="home"] footer{margin-top:-1px!important}
}
/* the old full-bleed trick (a 1440px box-shadow in the chapter's colour) bled through the seams: chapters are already full width here */
@media (min-width:1100px){ html[data-pp-view="home"] #ppMain > section{box-shadow:none!important} }
/* the hero name is the logo itself, never typed (identity README, "Never retype the name"): the tier-1 signature
   lockup (the l as a palm with the climber, the date dot, بالمير), palm on the dawn sky, one mark for every language.
   Clear space (the x-height of palmir) is far exceeded on every side. */
.px-word .px-mark{display:block;width:min(46vw,640px);height:auto;color:#0E3A2C}
@media (max-width:699px){ .px-word .px-mark{width:min(78vw,360px)} }
/* the scene runs under the header: the mark starts below it, plus its clear space */
/* phones and tablets: the scene is a card under the header, the mark sits in its open sky above the crowns */
.px-word{padding-top:clamp(36px,13%,90px)!important}
@media (min-width:1100px){ html[data-pp-view="home"] .px-word{padding-top:calc(var(--pp-hdr,85px) + clamp(28px,5vh,56px))!important} }
@media (min-width:1100px){ .px-word .px-mark{width:min(38vw,540px)} }
@media (min-width:1100px){ html[data-pp-view="home"] .pp-px .h26-cta .dot{background:#0E3A2C!important} }
/* owner 2026-10-12: the chapter under the dawn scene gets a darker, warmer colour than palm green: the scene's own
   shadowed sand, deepened into dark date brown, so the photo sinks into it instead of turning green */
@media (min-width:1100px){
  html[data-pp-view="home"]{--pp-under:#24170E}
  html[data-pp-view="home"] .px-fade{height:26%!important;background:linear-gradient(180deg in oklab,rgba(36,23,14,0),var(--pp-under))!important}
  html[data-pp-view="home"] .pp-px .h26-copy{background:var(--pp-under)!important}
}
/* the sun is added light: it brightens the sky beneath it exactly as in the photograph, and rises a little as you scroll */
.px-sun{mix-blend-mode:plus-lighter}
.px-vis{isolation:isolate}
/* owner 2026-10-12: the English signature only (palmir, the palm and the climber), centred, a modest size */
.px-word{justify-content:center}
.px-word .px-mark{width:min(22vw,300px)!important}
@media (max-width:699px){ .px-word .px-mark{width:min(44vw,180px)!important} }
@media (min-width:1100px){ html[data-pp-view="home"] .pp-px .h26-copy{margin-top:-1px!important} }
@media (min-width:1100px){ html[data-pp-view="home"] .pp-px .h26-copy{position:relative!important;z-index:2;margin-top:-2px!important} }
@media (min-width:1100px){ html[data-pp-view="home"] .pp-px .h26-copy{inset:auto!important;width:100%!important;transform:none!important} }
/* owner 2026-10-12: the logo stands on the ground in front of the man (front-most layer, moving with the ground), in
   sand, the logo colour for dark grounds; the photo is framed lower to give the ground room; the chapter under the
   scene is the ground's own colour at the bottom of the photograph (#4B3526), so the sand runs on into it */
.px-word{align-items:flex-end!important;padding-top:0!important;padding-bottom:clamp(14px,3.2%,34px)!important;z-index:3}
.px-fade{z-index:2}
@media (min-width:1100px){
  html[data-pp-view="home"]{--pp-under:#4B3526}
  html[data-pp-view="home"] .px-img{object-position:50% 92%!important}
  html[data-pp-view="home"] .px-fade{height:22%!important;background:linear-gradient(180deg in oklab,rgba(75,53,38,0),var(--pp-under))!important}
  html[data-pp-view="home"] .px-word .px-mark{width:min(17vw,240px)!important}
}
@media (min-width:1100px){ html[data-pp-view="home"] .px-word{padding-bottom:8px!important} }
/* phones and tablets: the scene is a cream card with little ground, so the mark stays in the open sky, in palm */
@media (max-width:1099px){
  .px-word{align-items:flex-start!important;padding-bottom:0!important;padding-top:clamp(28px,11%,80px)!important}
  .px-word .px-mark path{fill:#0E3A2C}
}
/* owner 2026-10-12 (corrected): the mark sits in the man's line of sight, in the grove he faces, just above his head
   and under the sun; drawn behind him, moving with him. Palm on the glowing grove. */
@media (min-width:1100px){
  html[data-pp-view="home"] .px-word{display:block!important;padding:0!important;z-index:auto}
  html[data-pp-view="home"] .px-word .px-mark{position:absolute;left:50%;top:41%;transform:translateX(-50%);width:min(15vw,210px)!important}
  html[data-pp-view="home"] .px-word .px-mark path{fill:#0E3A2C}
}
@media (min-width:1100px){ html[data-pp-view="home"] .px-word .px-mark{top:38.5%} }

/* ── HOME HERO: DAY AND NIGHT (owner 2026-10-12) ─────────────────────────────────────────────────────────────────────
   html[data-sky] is set in the page head from the real sunrise and sunset in Buraydah. Day: the dawn scene. Night: the same
   scene under a desert sky with the full moon on the farmer's line of sight. On desktop the logo is the big white
   signature locked to the photograph, behind the farmer's shoulders (as in the owner's Parallax reference); phones
   keep the smaller mark in the open sky (palm by day, sand-white by night). */
html:not([data-sky="night"]) .px-night,
html[data-sky="night"] .px-day{display:none!important}
html[data-sky="night"] .px-vis{background:#03070F}
.px-scene-mark{display:none;overflow:visible}
.px-scene-mark svg path{fill:#FFFFFF}
.px-twinkle circle{fill:#F4F6FF;opacity:.25;animation:pxTwinkle var(--t,3s) ease-in-out var(--d,0s) infinite alternate}
@keyframes pxTwinkle{0%{opacity:.18}60%{opacity:.95}100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .px-twinkle circle{animation:none;opacity:.7} }
@media (min-width:1100px){
  html[data-pp-view="home"] .px-img{object-position:50% 100%!important}
  html[data-pp-view="home"] .px-scene-mark{display:block}
  html[data-pp-view="home"] .px-word{display:none!important}
  html[data-sky="night"][data-pp-view="home"]{--pp-under:#0B0F18}
  html[data-sky="night"][data-pp-view="home"] .px-fade{background:linear-gradient(180deg in oklab,rgba(11,15,24,0),var(--pp-under))!important}
}
/* phones and tablets at night: the mark turns sand-white, the card settles into the night ground, the kicker is gold */
@media (max-width:1099px){
  html[data-sky="night"] .px-word .px-mark path{fill:#FBF4E8}
  html[data-sky="night"] .px-fade{background:linear-gradient(180deg in oklab,rgba(11,15,24,0),#0B0F18)!important}
  html[data-sky="night"] .pp-px .h26-kick{color:#E9A93A!important}
}

/* ── PHONE HOME AS ONE STORY (owner 2026-10-12: "a version suitable for phones with these new adjustments: good fit,
   storytelling, divided by colours") ── the scene fills the first screen edge to edge with the same layers, logo and
   day/night as desktop; the promise is the next chapter in the ground's colour; then every chapter in its own colour,
   joined by short soft seams (no words sit in a seam: chapters start below it). The shop stays on the phone home. */
@media (max-width:1099px){
  html[data-pp-view="home"] #top{padding:0!important;margin:0!important}
  html[data-pp-view="home"] #top .pp-h26.pp-px{margin:0!important;padding:0!important;gap:0!important;display:block!important}
  html[data-pp-view="home"] #top .px-vis{height:calc(100svh - var(--pp-top,125px))!important;min-height:520px;border-radius:0!important}
  html[data-pp-view="home"] .px-img{object-position:50% 100%!important}
  html[data-pp-view="home"] .px-scene-mark{display:block}
  html[data-pp-view="home"] .px-word{display:none!important}
  html[data-pp-view="home"]{--pp-under:#4B3526}
  html[data-sky="night"][data-pp-view="home"]{--pp-under:#0B0F18}
  html[data-pp-view="home"] .px-fade{height:20%!important;background:linear-gradient(180deg in oklab,rgba(75,53,38,0),var(--pp-under))!important}
  html[data-sky="night"][data-pp-view="home"] .px-fade{background:linear-gradient(180deg in oklab,rgba(11,15,24,0),var(--pp-under))!important}
  html[data-pp-view="home"] .pp-px .h26-copy{position:relative!important;inset:auto!important;margin:-1px 0 0!important;z-index:2;max-width:none!important;   /* tablets kept the old 48 % column: a light block showed beside it */
    background:var(--pp-under)!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:56px 24px 64px!important}
  html[data-pp-view="home"] .pp-px .h26-kick{position:static!important;color:#E9A93A!important;margin:0!important}
  html[data-pp-view="home"] .pp-px .h26-h{color:#FBF4E8!important;font-size:clamp(2.1rem,9vw,2.8rem)!important;line-height:1.2!important;max-width:14ch;margin:0!important;text-wrap:balance}
  html[data-pp-view="home"] .pp-px .h26-sub{color:rgba(251,244,232,.84)!important;max-width:34ch;margin:0!important}
  html[data-pp-view="home"] .pp-px .h26-cta.mag{background:#E9A93A!important;color:#0E3A2C!important;align-self:center;margin-top:8px}
  html[data-pp-view="home"] .pp-px .h26-cta .dot{background:#0E3A2C!important}
  /* the chapters: full width, a colour each, a 64px seam from the colour before */
  html[data-pp-view="home"] #ppMain > section:not(#top):not(.pp-off){--seam:64px;border:0!important;box-shadow:none!important;border-radius:0!important;
    margin:-1px 0 0!important;padding-top:calc(var(--seam) + 28px)!important;padding-bottom:56px!important}
  html[data-pp-view="home"] #top .pp-facts{background:var(--facts-ground,#F6E3BF)!important;margin:0!important;border-radius:0!important;padding:22px 20px!important}
  html[data-pp-view="home"] #shop{background:linear-gradient(180deg in oklab,#F6E3BF 0,#FBF4E8 var(--seam))!important}
  html[data-pp-view="home"] #palmpop{background:linear-gradient(180deg in oklab,#FBF4E8 0,#D5EEDF var(--seam))!important}
  html[data-pp-view="home"] #quiz{background:linear-gradient(180deg in oklab,#D5EEDF 0,#F6E3BF var(--seam))!important}
  html[data-pp-view="home"] #ritual{background:linear-gradient(180deg in oklab,#F6E3BF 0,#FBEFC9 var(--seam))!important}
  html[data-pp-view="home"] #harvest{background:linear-gradient(180deg in oklab,#FBEFC9 0,#FBF4E8 var(--seam))!important}
  html[data-pp-view="home"] #why{background:linear-gradient(180deg in oklab,#FBF4E8 0,var(--scene-dark) var(--seam))!important}
  html[data-pp-view="home"] #benefits{background:var(--scene-dark)!important;padding-top:8px!important}
  html[data-pp-view="home"] #corporate{background:linear-gradient(180deg in oklab,var(--scene-dark) 0,#E9A93A var(--seam))!important}
  html[data-pp-view="home"] #ppFaq{background:linear-gradient(180deg in oklab,#E9A93A 0,#FBF4E8 var(--seam))!important}
  html[data-pp-view="home"] .welcome-invite{background:linear-gradient(180deg in oklab,#FBF4E8 0,#FBF4E8 50%,var(--scene-dark) 100%)!important;border:0!important;margin:0!important;padding:8px 20px 96px!important}
  html[data-pp-view="home"] footer{margin-top:-1px!important}
}
/* the green basket bar and the WhatsApp button keep their edge over the green chapters and the footer: a hairline
   sand ring, invisible on light ground (owner review 2026-10-12) */
.pp-bag{outline:1px solid rgba(251,244,232,.28);outline-offset:-1px}
.wa-fab{outline:1px solid rgba(251,244,232,.28);outline-offset:-1px}
.px-scene-mark .sig-phone{display:none}
@media (max-width:1099px){ .px-scene-mark .sig-desk{display:none} .px-scene-mark .sig-phone{display:inline} }
/* the basket bar steps aside while the page moves and comes back once it rests (owner 2026-10-12: "like professional
   e-commerce sites"): out quick (220ms), back on the drawer curve (380ms); the WhatsApp button travels with it.
   Reduced motion: a fade, no travel. */
@media (max-width:900px){
  .pp-bag:not([hidden]){transition:transform .38s var(--pp-ease-drawer,cubic-bezier(.32,.72,0,1)),opacity .3s ease}
  .pp-bag.pp-away:not([hidden]){transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)));
    transition:transform .22s cubic-bezier(.4,0,1,1),opacity .2s ease}
  .wa-fab{transition:transform .38s var(--pp-ease-drawer,cubic-bezier(.32,.72,0,1)),opacity .3s ease}
  #waFab.wa-fab.pp-away{transform:translateY(calc(140% + env(safe-area-inset-bottom,0px)))!important;opacity:0;
    transition:transform .22s cubic-bezier(.4,0,1,1),opacity .2s ease}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .pp-bag.pp-away:not([hidden]){transform:none;opacity:0}
  #waFab.wa-fab.pp-away{transform:var(--lift,none)!important;opacity:0}
}
/* the phone mark stands on the sand (owner 2026-10-12): front-most, above the ridge and the fade */
.px-ground-mark{display:none;overflow:visible;z-index:3}
.px-ground-mark svg path{fill:#FFFFFF}
@media (max-width:1099px){ html[data-pp-view="home"] .px-ground-mark{display:block} html[data-pp-view="home"] .px-scene-mark{display:none!important} }
@media (min-width:1100px){ html[data-pp-view="home"] #top > .pp-facts{box-sizing:border-box;width:min(1240px,calc(100% - 112px))!important;max-width:none!important;margin:0 auto!important;padding-inline:0!important} }

/* ── ONE PALETTE FROM THE PICTURE (owner 2026-10-12: "keep it as the colour of the picture; the footer aligned with the
   night") ── by day the dark chapters take the dawn photograph's palm shadow and the footer its deepest ground, so the
   page ends on the earth the farmer stands on; at night they take the night palms and the night ground the hero sinks
   into. Brand green stays on the identity: header, logo, buttons, the basket bar. */
:root{--scene-dark:#332B23;--scene-foot:#2A221B}
footer{background:var(--scene-foot)!important}
@media (min-width:1100px){
  html[data-pp-view="home"] #why .sweetband{background:transparent!important}
  html[data-pp-view="home"] .welcome-invite{background:linear-gradient(180deg in oklab,#FBF4E8 0,#FBF4E8 45%,var(--scene-foot) 100%)!important}
}
@media (max-width:1099px){
  html[data-pp-view="home"] #why .sweetband{background:transparent!important}
  html[data-pp-view="home"] .welcome-invite{background:linear-gradient(180deg in oklab,#FBF4E8 0,#FBF4E8 50%,var(--scene-foot) 100%)!important}
}
@media (min-width:1100px){ html[data-pp-view="home"] .welcome-invite{display:flex!important;justify-content:center!important;align-items:center;gap:20px;padding:24px 56px 150px!important} }

/* ── THE SCENE PALETTE, SITE-WIDE (brand-guidelines 9.3; owner 2026-10-12: "the footer, the header and everything") ──
   The top bar and the footer frame every page in the scene's dark tones (umber by day, night palm and night ground at
   night). At night the header bar itself turns night ground with the sand logo, so the night scene runs up into it;
   its menus stay light reading panels. Dark chapters on the other pages take --scene-dark. */
.pp-topbar{background:var(--scene-dark)!important}
/* inner pages: their dark chapters take the page's own frame colour (9.8) */
html:not([data-pp-view="home"]) :is(#why,#benefits){--band:var(--pg-frame)}
html:not([data-pp-view="home"]) :is(#ppFindCta .pp-findcta-in,.sweetband){background-color:var(--pg-frame)!important}



/* ── EVERY PAGE HAS ITS OWN HEADER AND FOOTER (owner 2026-10-12, a hard rule; brand-guidelines 9.8) ──
   The header takes the page's light colour, the top bar and the footer its dark one: a frame in the page's own tones.
   The night scene belongs to the home page; inner pages keep their identity day and night. */
:root{--pg-hdr:#FBF4E8;--pg-frame:var(--scene-dark);--pg-foot:var(--scene-foot)}
html[data-pp-view="shop"],html:not([data-pp-view])[data-pp-page="shop"]{--pg-hdr:#F6E3BF;--pg-frame:#3A1A0C;--pg-foot:#3A1A0C}
html[data-pp-view="palmpop"],html:not([data-pp-view])[data-pp-page="palmpop"]{--pg-hdr:#D5EEDF;--pg-frame:#0E3A2C;--pg-foot:#0E3A2C}
html[data-pp-view="story"],html:not([data-pp-view])[data-pp-page="story"]{--pg-hdr:#EAD5B5;--pg-frame:#4A3322;--pg-foot:#4A3322}
html[data-pp-view="gifting"],html:not([data-pp-view])[data-pp-page="gifting"]{--pg-hdr:#FBEFC9;--pg-frame:#082419;--pg-foot:#082419}
html[data-pp-view="find"],html:not([data-pp-view])[data-pp-page="find"]{--pg-hdr:#FBF4E8;--pg-frame:#1E5A43;--pg-foot:#1E5A43}
header,header.shrink{background:var(--pg-hdr)!important;transition:background-color .38s var(--pp-ease,ease)}
.pp-topbar{background:var(--pg-frame)!important;transition:background-color .38s var(--pp-ease,ease)}
footer{background:var(--pg-foot)!important;transition:background-color .38s var(--pp-ease,ease)}
html:not([data-pp-view="home"]) :is(#why,#benefits){border:0!important}
html:not([data-pp-view="home"]) #why + #benefits, html:not([data-pp-view="home"]) #benefits{margin-top:-1px!important}
.pp-flv-now{transition:opacity .32s var(--pp-ease),transform .32s var(--pp-ease)}
.pp-flv-now.is-out{opacity:0;transform:translateY(4px);transition-duration:.14s}
@media (prefers-reduced-motion:reduce){ .pp-flv-now,.pp-flv-now.is-out{transition:none;transform:none} }

/* ── THE HEADER: THIN, SO THE PICTURES HAVE THE ROOM (owner 2026-10-12, twice: "thinner, leaving space for the
   picture; for all pages") ── every page and every section: one strip, 60 px desktop / 53 px phone, the same at the top and while scrolling
   (owner 2026-10-12: "this size of the strip header, make it a rule for all of the sections"; the slimmer home header
   over the scene was retired). Buttons keep their full touch size; only the padding goes. */
header,header.shrink{padding-top:9px!important;padding-bottom:9px!important;transition:padding .38s var(--pp-ease,cubic-bezier(.23,1,.32,1)),transform .3s cubic-bezier(.23,1,.32,1),background-color .38s ease!important}
@media (max-width:1099px){
  header,header.shrink{padding-top:4px!important;padding-bottom:4px!important}
}
/* first-paint heights (measured after this change; JavaScript writes the same numbers) */
:root{--pp-hdr:87px;--pp-top:87px} html[lang="ar"]{--pp-hdr:90px;--pp-top:90px}
@media (min-width:600px){ :root{--pp-hdr:89px;--pp-top:89px} html[lang="ar"]{--pp-hdr:90px;--pp-top:90px} }
@media (min-width:1024px){ :root{--pp-hdr:85px;--pp-top:85px} html[lang="ar"]{--pp-hdr:86px;--pp-top:86px} }
@media (min-width:1100px){ :root{--pp-hdr:95px;--pp-top:95px} html[lang="ar"]{--pp-hdr:97px;--pp-top:97px} }
/* hero performance (owner 2026-10-12: "lags a lot on the phone"): no blend modes, no always-on GPU layers for hidden
   layers, no repainting star animation on phones; the twinkle stays on desktops (pointer: fine) */
.px-body{overflow:visible}
.px-l{will-change:auto}
.px-vis.pp-px-live .px-l{will-change:transform}
@media (hover:none),(pointer:coarse),(max-width:1099px){ .px-twinkle{display:none!important} }
/* phone audit 2026-10-12: "why" and its benefit cards are one chapter in one colour, so no seam or double padding
   between them; and the harvest chapter has no divider line (seams separate chapters, not rules) */
@media (max-width:1099px){
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #ppMain > section#why:not(.pp-off){padding-bottom:8px!important}
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #ppMain > section#benefits:not(.pp-off){padding-top:12px!important;margin-top:-1px!important}
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #why .sweetband{padding-bottom:0!important}
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #harvest .pp-harvest{border-top:0!important;padding-top:0!important}
}

/* chapters overlap by 2 px, not 1 (audit 2026-10-12, measured): when both edges land on fractional pixels, a 1 px overlap
   let the earlier chapter's partial bottom row show through as a faint line. The seams start with the colour before,
   so the overlap is invisible. */
html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #ppMain > section:not(.pp-off):not(#top){margin-top:-2px!important}
html:not([data-pp-view="home"]) #why + #benefits, html:not([data-pp-view="home"]) #benefits{margin-top:-2px!important}
footer{margin-top:-2px!important}


/* every page ends the same way (audit 2026-10-12): the first-order invite sits on the page's own ground (transparent: it
   continues whatever is above it), no strip and no rule, and gathers into that page's footer colour on the brand's
   eased curve (the home page has its own generated seam) */
html:not([data-pp-view="home"]):not([data-pp-page="home"]) .welcome-invite,
html[data-pp-page="home"][data-pp-view]:not([data-pp-view="home"]) .welcome-invite{border:0!important;margin:0!important;
  padding:28px 20px 164px!important;background:linear-gradient(180deg,transparent calc(100% - 140px),color-mix(in oklab,var(--pg-foot) 0.0%,transparent) calc(100% - 140px + 140px * 0.0000),color-mix(in oklab,var(--pg-foot) 0.3%,transparent) calc(100% - 140px + 140px * 0.0714),color-mix(in oklab,var(--pg-foot) 2.3%,transparent) calc(100% - 140px + 140px * 0.1429),color-mix(in oklab,var(--pg-foot) 6.9%,transparent) calc(100% - 140px + 140px * 0.2143),color-mix(in oklab,var(--pg-foot) 14.5%,transparent) calc(100% - 140px + 140px * 0.2857),color-mix(in oklab,var(--pg-foot) 24.6%,transparent) calc(100% - 140px + 140px * 0.3571),color-mix(in oklab,var(--pg-foot) 36.8%,transparent) calc(100% - 140px + 140px * 0.4286),color-mix(in oklab,var(--pg-foot) 50.0%,transparent) calc(100% - 140px + 140px * 0.5000),color-mix(in oklab,var(--pg-foot) 63.2%,transparent) calc(100% - 140px + 140px * 0.5714),color-mix(in oklab,var(--pg-foot) 75.4%,transparent) calc(100% - 140px + 140px * 0.6429),color-mix(in oklab,var(--pg-foot) 85.5%,transparent) calc(100% - 140px + 140px * 0.7143),color-mix(in oklab,var(--pg-foot) 93.1%,transparent) calc(100% - 140px + 140px * 0.7857),color-mix(in oklab,var(--pg-foot) 97.7%,transparent) calc(100% - 140px + 140px * 0.8571),color-mix(in oklab,var(--pg-foot) 99.7%,transparent) calc(100% - 140px + 140px * 0.9286),color-mix(in oklab,var(--pg-foot) 100.0%,transparent) calc(100% - 140px + 140px * 1.0000))!important}

/* inner pages follow the seam rule too (audit 2026-10-12): the dark band (why + benefits, in the page's frame colour)
   melts in from the sand above and back out into the sand below, full width, on the eased curve; and the band is one
   chapter, so no double padding between its text and its cards */
html[data-pp-view]:not([data-pp-view="home"]) #why::before,
html[data-pp-view]:not([data-pp-view="home"]) #benefits::after{content:"";position:absolute;left:-100vmax;right:-100vmax;height:var(--iseam,120px);pointer-events:none;z-index:0}
html[data-pp-view]:not([data-pp-view="home"]) #why::before{top:-1px;background:linear-gradient(180deg,color-mix(in oklab,var(--pg-frame) 0.0%,#FBF4E8) 0.00%,color-mix(in oklab,var(--pg-frame) 0.3%,#FBF4E8) 7.14%,color-mix(in oklab,var(--pg-frame) 2.3%,#FBF4E8) 14.29%,color-mix(in oklab,var(--pg-frame) 6.9%,#FBF4E8) 21.43%,color-mix(in oklab,var(--pg-frame) 14.5%,#FBF4E8) 28.57%,color-mix(in oklab,var(--pg-frame) 24.6%,#FBF4E8) 35.71%,color-mix(in oklab,var(--pg-frame) 36.8%,#FBF4E8) 42.86%,color-mix(in oklab,var(--pg-frame) 50.0%,#FBF4E8) 50.00%,color-mix(in oklab,var(--pg-frame) 63.2%,#FBF4E8) 57.14%,color-mix(in oklab,var(--pg-frame) 75.4%,#FBF4E8) 64.29%,color-mix(in oklab,var(--pg-frame) 85.5%,#FBF4E8) 71.43%,color-mix(in oklab,var(--pg-frame) 93.1%,#FBF4E8) 78.57%,color-mix(in oklab,var(--pg-frame) 97.7%,#FBF4E8) 85.71%,color-mix(in oklab,var(--pg-frame) 99.7%,#FBF4E8) 92.86%,color-mix(in oklab,var(--pg-frame) 100.0%,#FBF4E8) 100.00%)}
html[data-pp-view]:not([data-pp-view="home"]) #benefits::after{bottom:-1px;background:linear-gradient(180deg,color-mix(in oklab,var(--pg-frame) 100.0%,#FBF4E8) 0.00%,color-mix(in oklab,var(--pg-frame) 99.7%,#FBF4E8) 7.14%,color-mix(in oklab,var(--pg-frame) 97.7%,#FBF4E8) 14.29%,color-mix(in oklab,var(--pg-frame) 93.1%,#FBF4E8) 21.43%,color-mix(in oklab,var(--pg-frame) 85.5%,#FBF4E8) 28.57%,color-mix(in oklab,var(--pg-frame) 75.4%,#FBF4E8) 35.71%,color-mix(in oklab,var(--pg-frame) 63.2%,#FBF4E8) 42.86%,color-mix(in oklab,var(--pg-frame) 50.0%,#FBF4E8) 50.00%,color-mix(in oklab,var(--pg-frame) 36.8%,#FBF4E8) 57.14%,color-mix(in oklab,var(--pg-frame) 24.6%,#FBF4E8) 64.29%,color-mix(in oklab,var(--pg-frame) 14.5%,#FBF4E8) 71.43%,color-mix(in oklab,var(--pg-frame) 6.9%,#FBF4E8) 78.57%,color-mix(in oklab,var(--pg-frame) 2.3%,#FBF4E8) 85.71%,color-mix(in oklab,var(--pg-frame) 0.3%,#FBF4E8) 92.86%,color-mix(in oklab,var(--pg-frame) 0.0%,#FBF4E8) 100.00%)}
html[data-pp-view]:not([data-pp-view="home"]) :is(#why,#benefits) > *{position:relative;z-index:1}
html[data-pp-view]:not([data-pp-view="home"]) #why{padding-top:calc(var(--iseam,120px) + 24px)!important;padding-bottom:8px!important}
html[data-pp-view]:not([data-pp-view="home"]) #why .sweetband{padding-bottom:0!important}
html[data-pp-view]:not([data-pp-view="home"]) #benefits{padding-top:12px!important;padding-bottom:calc(var(--iseam,120px) + 24px)!important}
@media (min-width:1100px){ html[data-pp-view]:not([data-pp-view="home"]) :is(#why,#benefits){--iseam:200px} }
html[data-pp-view]:not([data-pp-view="home"]) #why::before{top:-3px;height:calc(var(--iseam,120px) + 3px)}
html[data-pp-view]:not([data-pp-view="home"]) #benefits::after{bottom:-3px;height:calc(var(--iseam,120px) + 3px)}
html[data-pp-view]:not([data-pp-view="home"]) :is(#why,#benefits){clip-path:inset(-3px -100vmax)!important}
html[data-pp-view]:not([data-pp-view="home"]) :is(#why,#benefits){clip-path:inset(-2px -100vmax)!important}   /* the seam overlays reach 1 px past the clip: no band pixel is ever left uncovered */
/* inner-page dark band, rebuilt without the box-shadow trick (its clipped edge anti-aliased into a dark sliver on
   fractional pixels, measured): the band colour is a full-width backdrop under the seams; seams are opaque overlays */
html[data-pp-view]:not([data-pp-view="home"]) :is(#why,#benefits){box-shadow:none!important;background:transparent!important;clip-path:inset(-6px -100vmax)!important;isolation:isolate}
html[data-pp-view]:not([data-pp-view="home"]) #why::after{content:"";position:absolute;left:-100vmax;right:-100vmax;top:var(--iseam,120px);bottom:-4px;background:var(--pg-frame);z-index:0;pointer-events:none}
html[data-pp-view]:not([data-pp-view="home"]) #benefits::before{content:"";position:absolute;left:-100vmax;right:-100vmax;top:-4px;bottom:var(--iseam,120px);background:var(--pg-frame);z-index:0;pointer-events:none}
html[data-pp-view]:not([data-pp-view="home"]) #why::before{top:-5px;height:calc(var(--iseam,120px) + 6px)}
html[data-pp-view]:not([data-pp-view="home"]) #benefits::after{bottom:-5px;height:calc(var(--iseam,120px) + 6px)}

/* the inner-page seams start and end transparent, continuing whatever ground surrounds them (measured: a sand start sat
   on a slightly warmer page ground and left a faint step) */
html[data-pp-view]:not([data-pp-view="home"]) #why::before{background:linear-gradient(180deg,color-mix(in oklab,var(--pg-frame) 0.0%,transparent) 0.00%,color-mix(in oklab,var(--pg-frame) 0.3%,transparent) 7.14%,color-mix(in oklab,var(--pg-frame) 2.3%,transparent) 14.29%,color-mix(in oklab,var(--pg-frame) 6.9%,transparent) 21.43%,color-mix(in oklab,var(--pg-frame) 14.5%,transparent) 28.57%,color-mix(in oklab,var(--pg-frame) 24.6%,transparent) 35.71%,color-mix(in oklab,var(--pg-frame) 36.8%,transparent) 42.86%,color-mix(in oklab,var(--pg-frame) 50.0%,transparent) 50.00%,color-mix(in oklab,var(--pg-frame) 63.2%,transparent) 57.14%,color-mix(in oklab,var(--pg-frame) 75.4%,transparent) 64.29%,color-mix(in oklab,var(--pg-frame) 85.5%,transparent) 71.43%,color-mix(in oklab,var(--pg-frame) 93.1%,transparent) 78.57%,color-mix(in oklab,var(--pg-frame) 97.7%,transparent) 85.71%,color-mix(in oklab,var(--pg-frame) 99.7%,transparent) 92.86%,color-mix(in oklab,var(--pg-frame) 100.0%,transparent) 100.00%)!important}
html[data-pp-view]:not([data-pp-view="home"]) #benefits::after{background:linear-gradient(180deg,color-mix(in oklab,var(--pg-frame) 100.0%,transparent) 0.00%,color-mix(in oklab,var(--pg-frame) 99.7%,transparent) 7.14%,color-mix(in oklab,var(--pg-frame) 97.7%,transparent) 14.29%,color-mix(in oklab,var(--pg-frame) 93.1%,transparent) 21.43%,color-mix(in oklab,var(--pg-frame) 85.5%,transparent) 28.57%,color-mix(in oklab,var(--pg-frame) 75.4%,transparent) 35.71%,color-mix(in oklab,var(--pg-frame) 63.2%,transparent) 42.86%,color-mix(in oklab,var(--pg-frame) 50.0%,transparent) 50.00%,color-mix(in oklab,var(--pg-frame) 36.8%,transparent) 57.14%,color-mix(in oklab,var(--pg-frame) 24.6%,transparent) 64.29%,color-mix(in oklab,var(--pg-frame) 14.5%,transparent) 71.43%,color-mix(in oklab,var(--pg-frame) 6.9%,transparent) 78.57%,color-mix(in oklab,var(--pg-frame) 2.3%,transparent) 85.71%,color-mix(in oklab,var(--pg-frame) 0.3%,transparent) 92.86%,color-mix(in oklab,var(--pg-frame) 0.0%,transparent) 100.00%)!important}

/* PalmPop page (audit 2026-10-12): the film sits flush under the header (its top padding follows the header's real
   height, not a fixed 64 px), and the mint PalmPop chapter melts into the sand below it on the eased curve */
html[data-pp-view="palmpop"] #ppFilm{padding-top:calc(var(--pp-hdr,90px) - var(--pp-bar-h,37px))!important;padding-bottom:0!important}
html[data-pp-view="palmpop"] #palmpop{box-shadow:none!important;background:transparent!important;clip-path:inset(-6px -100vmax)!important;isolation:isolate;position:relative;padding-bottom:calc(var(--iseam,120px) + 24px)!important}
html[data-pp-view="palmpop"] #palmpop::before{content:"";position:absolute;left:-100vmax;right:-100vmax;top:-4px;bottom:var(--iseam,120px);background:#D5EEDF;z-index:0;pointer-events:none}
html[data-pp-view="palmpop"] #palmpop::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:-5px;height:calc(var(--iseam,120px) + 6px);background:linear-gradient(180deg,color-mix(in oklab,#D5EEDF 100.0%,transparent) 0.00%,color-mix(in oklab,#D5EEDF 99.7%,transparent) 7.14%,color-mix(in oklab,#D5EEDF 97.7%,transparent) 14.29%,color-mix(in oklab,#D5EEDF 93.1%,transparent) 21.43%,color-mix(in oklab,#D5EEDF 85.5%,transparent) 28.57%,color-mix(in oklab,#D5EEDF 75.4%,transparent) 35.71%,color-mix(in oklab,#D5EEDF 63.2%,transparent) 42.86%,color-mix(in oklab,#D5EEDF 50.0%,transparent) 50.00%,color-mix(in oklab,#D5EEDF 36.8%,transparent) 57.14%,color-mix(in oklab,#D5EEDF 24.6%,transparent) 64.29%,color-mix(in oklab,#D5EEDF 14.5%,transparent) 71.43%,color-mix(in oklab,#D5EEDF 6.9%,transparent) 78.57%,color-mix(in oklab,#D5EEDF 2.3%,transparent) 85.71%,color-mix(in oklab,#D5EEDF 0.3%,transparent) 92.86%,color-mix(in oklab,#D5EEDF 0.0%,transparent) 100.00%);z-index:0;pointer-events:none}
html[data-pp-view="palmpop"] #palmpop > *{position:relative;z-index:1}
@media (min-width:1100px){ html[data-pp-view="palmpop"] #palmpop{--iseam:200px} }

/* the other coloured bands on inner pages (find yours, the tasting flight) end in the same eased seam (audit 2026-10-12) */
html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight){box-shadow:none!important;background:transparent!important;clip-path:inset(-6px -100vmax)!important;isolation:isolate;position:relative;padding-bottom:calc(var(--iseam,120px) + 24px)!important}
html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight)::before{content:"";position:absolute;left:-100vmax;right:-100vmax;top:-4px;bottom:var(--iseam,120px);background:var(--band);z-index:0;pointer-events:none}
html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight)::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:-5px;height:calc(var(--iseam,120px) + 6px);background:linear-gradient(180deg,color-mix(in oklab,var(--band) 100.0%,transparent) 0.00%,color-mix(in oklab,var(--band) 99.7%,transparent) 7.14%,color-mix(in oklab,var(--band) 97.7%,transparent) 14.29%,color-mix(in oklab,var(--band) 93.1%,transparent) 21.43%,color-mix(in oklab,var(--band) 85.5%,transparent) 28.57%,color-mix(in oklab,var(--band) 75.4%,transparent) 35.71%,color-mix(in oklab,var(--band) 63.2%,transparent) 42.86%,color-mix(in oklab,var(--band) 50.0%,transparent) 50.00%,color-mix(in oklab,var(--band) 36.8%,transparent) 57.14%,color-mix(in oklab,var(--band) 24.6%,transparent) 64.29%,color-mix(in oklab,var(--band) 14.5%,transparent) 71.43%,color-mix(in oklab,var(--band) 6.9%,transparent) 78.57%,color-mix(in oklab,var(--band) 2.3%,transparent) 85.71%,color-mix(in oklab,var(--band) 0.3%,transparent) 92.86%,color-mix(in oklab,var(--band) 0.0%,transparent) 100.00%);z-index:0;pointer-events:none}
html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight) > *{position:relative;z-index:1}
@media (min-width:1100px){ html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight){--iseam:200px} }
/* the "why" text sits centred on every page on desktop, as on the home page (its stats column is hidden, so a
   two-column layout left half the band empty; audit 2026-10-12) */
@media (min-width:1100px){
  #why .sweetband-grid{grid-template-columns:1fr!important}
  #why .sweetband-grid > div{text-align:center;display:flex;flex-direction:column;align-items:center}
  #why .sweetband-grid p{max-width:56ch;margin-inline:auto}
}

/* the current category chip, now marked aria-current (see palmpop-layer.js): same look as before */
#shopCats .shop-cat[aria-current="true"],.shop-cat[aria-current="true"]{background:var(--palm-900)!important;color:var(--sand-50)!important;border-color:var(--palm-900)!important}
/* ── PARALLAX ON THE BROWSER'S SCROLL TRACK (owner 2026-10-12: "the palms are not moving smoothly with the scroll, you
   feel a delay") ── a script that moves layers after each scroll event always trails a phone's scroll by a frame. Where
   the browser supports scroll-driven animations, each layer's drift is an animation tied to the page scroll itself:
   0 at the top, its full depth (--k, % of its own height) when the scene's bottom (--px-end) reaches the top. */
@keyframes pxDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--k,0%),0)}}
@supports (animation-timeline: scroll()) and (animation-range: 0px 100px){
  .px-css [data-l]{animation:pxDrift linear both;animation-timeline:scroll(root block);animation-range:0px var(--px-end,900px);will-change:transform}
}
@media (prefers-reduced-motion:reduce){ .px-css [data-l]{animation:none!important;transform:none!important} }
/* Safari desktop, measured on the owner's Mac (2026-10-12): forcing GPU layers (will-change) on the large Retina
   parallax layers and animating the header's padding (a layout on every frame of the transition) were what made the
   scene stutter. The browser promotes animated layers by itself; the header changes height in one step, only its
   colour and position animate. */
.px-l,.px-css [data-l],.px-vis.pp-px-live .px-l{will-change:auto!important}
header,header.shrink{transition:transform .3s cubic-bezier(.23,1,.32,1),background-color .38s ease!important}

/* ── POLISH FROM THE OWNER'S SCREEN RECORDING (2026-10-12, Safari, night) ──
   1. the dark promise chapter now melts into the dune facts strip (it cut hard, a bright bar at night)
   2. the promise chapter is tighter: no long empty dark band between the scene and the headline
   3. a rubber-band pull past the top shows the page's own top-bar colour, not a cream strip
   4. the skip link stays fully invisible unless a keyboard user focuses it (a pull dragged it into view)
   5. the loader: night colours at night, the mark leaves before the ground, and no loader on reloads within a visit */
html{background-color:var(--pg-frame,#332B23)!important}
.pp-skip:not(:focus):not(:focus-visible){opacity:0;pointer-events:none;visibility:hidden}
@media (min-width:1100px){
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) .pp-px .h26-copy{min-height:0!important;padding-top:56px!important;padding-bottom:calc(200px + 72px)!important;
    background:linear-gradient(180deg,var(--pp-under) calc(100% - 200px),color-mix(in oklab,var(--facts-ground,#F6E3BF) 0.0%,var(--pp-under)) calc(100% - 200px + 200px * 0.0000),color-mix(in oklab,var(--facts-ground,#F6E3BF) 0.3%,var(--pp-under)) calc(100% - 200px + 200px * 0.0714),color-mix(in oklab,var(--facts-ground,#F6E3BF) 2.3%,var(--pp-under)) calc(100% - 200px + 200px * 0.1429),color-mix(in oklab,var(--facts-ground,#F6E3BF) 6.9%,var(--pp-under)) calc(100% - 200px + 200px * 0.2143),color-mix(in oklab,var(--facts-ground,#F6E3BF) 14.5%,var(--pp-under)) calc(100% - 200px + 200px * 0.2857),color-mix(in oklab,var(--facts-ground,#F6E3BF) 24.6%,var(--pp-under)) calc(100% - 200px + 200px * 0.3571),color-mix(in oklab,var(--facts-ground,#F6E3BF) 36.8%,var(--pp-under)) calc(100% - 200px + 200px * 0.4286),color-mix(in oklab,var(--facts-ground,#F6E3BF) 50.0%,var(--pp-under)) calc(100% - 200px + 200px * 0.5000),color-mix(in oklab,var(--facts-ground,#F6E3BF) 63.2%,var(--pp-under)) calc(100% - 200px + 200px * 0.5714),color-mix(in oklab,var(--facts-ground,#F6E3BF) 75.4%,var(--pp-under)) calc(100% - 200px + 200px * 0.6429),color-mix(in oklab,var(--facts-ground,#F6E3BF) 85.5%,var(--pp-under)) calc(100% - 200px + 200px * 0.7143),color-mix(in oklab,var(--facts-ground,#F6E3BF) 93.1%,var(--pp-under)) calc(100% - 200px + 200px * 0.7857),color-mix(in oklab,var(--facts-ground,#F6E3BF) 97.7%,var(--pp-under)) calc(100% - 200px + 200px * 0.8571),color-mix(in oklab,var(--facts-ground,#F6E3BF) 99.7%,var(--pp-under)) calc(100% - 200px + 200px * 0.9286),color-mix(in oklab,var(--facts-ground,#F6E3BF) 100.0%,var(--pp-under)) calc(100% - 200px + 200px * 1.0000))!important}
}
@media (max-width:1099px){
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) .pp-px .h26-copy{padding-bottom:calc(110px + 48px)!important;background:linear-gradient(180deg,var(--pp-under) calc(100% - 110px),color-mix(in oklab,var(--facts-ground,#F6E3BF) 0.0%,var(--pp-under)) calc(100% - 110px + 110px * 0.0000),color-mix(in oklab,var(--facts-ground,#F6E3BF) 0.3%,var(--pp-under)) calc(100% - 110px + 110px * 0.0714),color-mix(in oklab,var(--facts-ground,#F6E3BF) 2.3%,var(--pp-under)) calc(100% - 110px + 110px * 0.1429),color-mix(in oklab,var(--facts-ground,#F6E3BF) 6.9%,var(--pp-under)) calc(100% - 110px + 110px * 0.2143),color-mix(in oklab,var(--facts-ground,#F6E3BF) 14.5%,var(--pp-under)) calc(100% - 110px + 110px * 0.2857),color-mix(in oklab,var(--facts-ground,#F6E3BF) 24.6%,var(--pp-under)) calc(100% - 110px + 110px * 0.3571),color-mix(in oklab,var(--facts-ground,#F6E3BF) 36.8%,var(--pp-under)) calc(100% - 110px + 110px * 0.4286),color-mix(in oklab,var(--facts-ground,#F6E3BF) 50.0%,var(--pp-under)) calc(100% - 110px + 110px * 0.5000),color-mix(in oklab,var(--facts-ground,#F6E3BF) 63.2%,var(--pp-under)) calc(100% - 110px + 110px * 0.5714),color-mix(in oklab,var(--facts-ground,#F6E3BF) 75.4%,var(--pp-under)) calc(100% - 110px + 110px * 0.6429),color-mix(in oklab,var(--facts-ground,#F6E3BF) 85.5%,var(--pp-under)) calc(100% - 110px + 110px * 0.7143),color-mix(in oklab,var(--facts-ground,#F6E3BF) 93.1%,var(--pp-under)) calc(100% - 110px + 110px * 0.7857),color-mix(in oklab,var(--facts-ground,#F6E3BF) 97.7%,var(--pp-under)) calc(100% - 110px + 110px * 0.8571),color-mix(in oklab,var(--facts-ground,#F6E3BF) 99.7%,var(--pp-under)) calc(100% - 110px + 110px * 0.9286),color-mix(in oklab,var(--facts-ground,#F6E3BF) 100.0%,var(--pp-under)) calc(100% - 110px + 110px * 1.0000))!important}
}
html[data-sky="night"]:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #loader{background:#0B0F18!important}
html[data-sky="night"]:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #loader .pp-loader-lockup path{fill:#FBF4E8}
#loader{transition:opacity .45s cubic-bezier(.23,1,.32,1) .12s,visibility 0s linear .6s!important}
#loader .loader-word,#loader .vent-loader,#loader .loader-sub{transition:opacity .18s ease}
/* the tagline arrives with the lockup, not as the loader leaves (it started at 0.95 s; the loader now holds about 1 s) */
#loader .loader-sub{animation:subIn .5s var(--ease,cubic-bezier(.23,1,.32,1)) .4s forwards!important}
#loader.done .loader-word,#loader.done .vent-loader,#loader.done .loader-sub{opacity:0}
/* (retired 2026-10-13, owner: "on reload I can't see the triangles and the logo"): the loader shows on every full load and reload again */
/* phones at night: the basket icon is an icon, not the desktop's gold pill: sand like the other header icons */
/* ── THE SIGNATURE STANDS ON THE DESERT (owner 2026-10-12: "the logo in front of the man is not a good idea; somewhere
   that does not take space; the top of the desert") ── the scene stays a clean photograph; the sand signature stands
   where the scene's ground continues into the headline chapter, centred above the harvest line, by day and by night
   (sand on a dark ground, brand-guidelines 9.2). Clear space: the x-height of palmir and more on every side. */
.h26-sig{display:none}
html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) .pp-px .h26-sig{display:block;width:min(200px,46vw);height:auto;margin:0 auto 34px;align-self:center}
@media (max-width:1099px){ html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) .pp-px .h26-sig{width:150px;margin-bottom:24px} }

/* ── THE DATE BEAD (tastemaker brand pass, 12 Oct 2026) ── palmir's small ornament is a date, not a sparkle: an upright
   ellipse in the colour of the text around it. Used before badges, notes and in lists (build.py swaps every sparkle). */
/* the fractional row where the hero meets the facts strip showed the page's light backdrop (a 1-px light line, measured
   on phones at night): the strip paints 2 px upward over that row in its own colour. (A background on the whole opening
   section did it too, but showed as a light block beside the narrower text column on tablets.) */
@media (max-width:1099px){ html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #top .pp-facts{box-shadow:0 -2px 0 var(--facts-ground,#F6E3BF)!important} }
/* Arabic seal numbers read right to left (٧ غ, ١–٣, ١٠٠٪) */
html[lang="ar"] .pp-facts b{direction:rtl!important}
.pp-bead{display:inline-block;width:.42em;height:.6em;border-radius:50%;background:currentColor;vertical-align:.04em;margin-inline-end:.45em;flex:none;font-style:normal}

/* closed sheets carry no backdrop blur: Safari should never keep a full-screen blur layer alive behind an invisible panel */
:is(.modal,.ov,#checkout):not(.show){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ── SUN / MOON BUTTON (owner 2026-10-12) ── home only, since only the home page has a sky. It shows where it will take
   you: the moon by day, the sun by night. The choice is kept for 12 hours (head script ppSky), then the real sky returns. */
.pp-skybtn{display:none!important}
html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) .pp-skybtn{display:inline-grid!important;place-items:center}
.pp-skybtn svg{grid-area:1/1}
html:not([data-sky="night"]) .pp-skybtn .pp-sky-sun, html[data-sky="night"] .pp-skybtn .pp-sky-moon{display:none}
/* the slow 0.6 s cross-fade belongs to the sun/moon switch only (html.pp-sky-swap while it runs); page changes keep their 180 ms */
html.pp-sky-swap::view-transition-old(root),html.pp-sky-swap::view-transition-new(root){animation-duration:.6s;animation-timing-function:cubic-bezier(.23,1,.32,1)}

/* ── THE PAIR IN THE CENTRE ON PHONES (owner 2026-10-12: the rider and the farmer "all in the centre") ── a phone shows
   only the middle third of the scene, which was centred on him; now it is centred on the two of them (photograph x 662
   of 1536 = 43.1 %). The picture is 1.5 x as wide as the scene is tall, so the shift is (50 % - 43.1 %) x 1.5 x height.
   The sun/moon sprites move with it (the separate translate property, so the parallax transform is untouched). */
@media (max-width:1099px){
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]){--px-h:max(520px, 100svh - var(--pp-top,125px));
    --px-shift:min(calc(.1035 * var(--px-h)), max(0px, calc((1.5 * var(--px-h) - 100vw) / 2)))}   /* never more than the picture's spare width (a wide, short tablet has none) */
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #ppHero .px-img{object-position:calc(50% + var(--px-shift)) 100%!important}
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #ppHero .px-body{translate:var(--px-shift) 0}
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #ppHero .h26-sub{margin-inline:auto!important;text-align:center!important}   /* tablets: the line under the headline sat off to the right */
}

/* ── NIGHT SCOPE (owner 2026-10-13): at night only the opening section is night: the scene, the logo, the harvest line,
   the headline and its button. The header, the top bar, every chapter after it, the footer, the basket bar and the
   WhatsApp button keep their day colours. (The derived all-navy night home of 12 Oct is retired.) ── */

/* ── SEAMS (generated by src/seams.py; do not edit by hand) ── eased, OKLab, warm path between light and dark */
/* the scene sinks into the chapter under it on the same curve */
html[data-pp-view="home"] .px-fade{background:linear-gradient(180deg,color-mix(in oklab,var(--pp-under) 0.0%,transparent) 0.0%,color-mix(in oklab,var(--pp-under) 0.3%,transparent) 7.1%,color-mix(in oklab,var(--pp-under) 2.3%,transparent) 14.3%,color-mix(in oklab,var(--pp-under) 6.9%,transparent) 21.4%,color-mix(in oklab,var(--pp-under) 14.5%,transparent) 28.6%,color-mix(in oklab,var(--pp-under) 24.6%,transparent) 35.7%,color-mix(in oklab,var(--pp-under) 36.8%,transparent) 42.9%,color-mix(in oklab,var(--pp-under) 50.0%,transparent) 50.0%,color-mix(in oklab,var(--pp-under) 63.2%,transparent) 57.1%,color-mix(in oklab,var(--pp-under) 75.4%,transparent) 64.3%,color-mix(in oklab,var(--pp-under) 85.5%,transparent) 71.4%,color-mix(in oklab,var(--pp-under) 93.1%,transparent) 78.6%,color-mix(in oklab,var(--pp-under) 97.7%,transparent) 85.7%,color-mix(in oklab,var(--pp-under) 99.7%,transparent) 92.9%,color-mix(in oklab,var(--pp-under) 100.0%,transparent) 100.0%)!important}
/* ── END SEAMS ── */

/* ── THE GROUND FOLLOWS THE STORY (owner 2026-10-13: "the gradient between the sections doesn't fit, fix it properly") ──
   The long painted seams are retired: a long blend between cream and umber always passes through mud. Instead:
   1. the light chapters share one ground (#ppGround, fixed behind the page) that eases into each chapter's colour as
      the chapter reaches the reading line (palmpop-layer.js, livingGround): colour changes in time, never smeared in
      space, so there is no band, and the page breathes as you read. Text on light chapters is always dark ink.
   2. the strong chapters (umber, sukkari gold) and the footer are solid grounds that rise out of the page on a low
      dune crest, the dune of the opening scene; they end on a clean level line.
   Without the script every chapter simply shows its own colour, edges crisp. */
#ppGround{display:none}
html[data-pp-view="home"] #ppGround{display:block;position:fixed;left:0;right:0;top:-12vh;bottom:-12vh;z-index:0;pointer-events:none;
  background-color:var(--pp-ground,#FBF4E8);transform:translateZ(0)}
html.pp-ground-go[data-pp-view="home"] #ppGround{transition:background-color .85s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){ html.pp-ground-go[data-pp-view="home"] #ppGround{transition:none} }
/* each chapter's colour (read by the script as --ground; --solid marks the chapters that keep their own ground) */
html[data-pp-view="home"] #ppMain > section#top{--ground:var(--facts-ground,#F6E3BF)}
html[data-pp-view="home"] :is(#ppIntro,#shop,#harvest,#ppFaq,.welcome-invite){--ground:#FBF4E8}
html[data-pp-view="home"] :is(#ppLines,#quiz){--ground:#F6E3BF}
html[data-pp-view="home"] #palmpop{--ground:#D5EEDF}
html[data-pp-view="home"] #ritual{--ground:#FBEFC9}
html[data-pp-view="home"] :is(#why,#benefits,#ppFindCta){--ground:var(--scene-dark);--solid:1}
html[data-pp-view="home"] #corporate{--ground:#E9A93A;--solid:1}
html[data-pp-view="home"] #ppProof{--ground:#0E3A2C;--solid:1}
html[data-pp-view="home"] footer{--ground:var(--pg-foot);--solid:1}
@media (min-width:1100px){ html[data-pp-view="home"] #harvest{--ground:#FBEFC9} }
/* every chapter in its own flat colour, edges crisp (the seam paddings go with the seams) */
html[data-pp-view="home"] #ppMain > section:not(#top):not(.pp-off),html[data-pp-view="home"] .welcome-invite{
  background:var(--ground,#FBF4E8)!important;background-image:none!important}
html[data-pp-view="home"] footer{background:var(--ground)!important}
/* with the living ground, the light chapters are open to it */
html.pp-ground-on[data-pp-view="home"] #ppMain > section:is(#ppIntro,#ppLines,#shop,#palmpop,#quiz,#ritual,#harvest,#ppFaq):not(#top),
html.pp-ground-on[data-pp-view="home"] .welcome-invite{background:transparent!important}
@media (min-width:1100px){
  html[data-pp-view="home"] #ppFaq{padding-top:clamp(72px,9vh,120px)!important}
  html[data-pp-view="home"] .welcome-invite{padding:24px 56px clamp(96px,12vh,140px)!important}
}
@media (max-width:1099px){
  html[data-pp-view="home"] #ppMain > section:not(#top):not(.pp-off){--seam:0px;padding-top:64px!important}
  html[data-pp-view="home"] #benefits{padding-top:12px!important}
  html[data-pp-view="home"] .welcome-invite{padding-bottom:72px!important}
}
/* the dune crest: a low wind-shaped dune (long windward rise, short lee face), in the chapter's own colour */
html[data-pp-view="home"] :is(#why,#ppFindCta,#corporate,#ppProof,footer){position:relative;z-index:4}
html[data-pp-view="home"] :is(#why,#ppFindCta,#corporate,#ppProof,footer)::before,
html[data-pp-view="home"] #top > .pp-h26::after{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--crest,56px);
  pointer-events:none;background:var(--ground);
  -webkit-mask:url("brand/identity/svg/palmir-crest-mask.svg") 0 0/100% 100% no-repeat;
          mask:url("brand/identity/svg/palmir-crest-mask.svg") 0 0/100% 100% no-repeat}
/* alternate the dune's direction down the page, as dunes do */
html[data-pp-view="home"] :is(#ppFindCta,#corporate)::before{transform:scaleX(-1)}
html[data-pp-view="home"] #ppMain > section:is(#why,#ppFindCta,#corporate,#ppProof){overflow:visible!important}
@media (max-width:1099px){ html[data-pp-view="home"] :is(#why,#ppFindCta,#corporate,#ppProof,footer,#top > .pp-h26){--crest:34px} }
/* 23 Oct 2026: the crest carries the Sadu crown (big triangle, small triangle, diamond) along its ridge, in place of the
   retired Diriyah parapet strips (brand/identity/tools/crown.py draws it; xMidYMax slice keeps the triangles unstretched) */
/* the promise meets the facts strip the same way: the dune of the scene rises out of the dark ground, no long melt */
/* drawn at the foot of the opening section (full width at every size; on tablets the facts strip is a narrower column) */
html[data-pp-view="home"] #top > .pp-h26{position:relative;--ground:var(--facts-ground,#F6E3BF)}
html[data-pp-view="home"] #top > .pp-h26::after{bottom:-1px!important;z-index:5}
@media (min-width:1100px){
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) .pp-px .h26-copy{padding-bottom:calc(56px + 72px)!important;background:var(--pp-under)!important}
}
@media (max-width:1099px){
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) .pp-px .h26-copy{padding-bottom:calc(26px + 48px)!important;background:var(--pp-under)!important}
  html:is([data-pp-view="home"],:not([data-pp-view])[data-pp-page="home"]) #top .pp-facts{box-shadow:none!important}
}
/* the old full-bleed clip (inset 0 -1440px) cut the crest off above these chapters; they are full width here already */
html[data-pp-view="home"] #ppMain > section:is(#why,#ppFindCta,#corporate,#ppProof){clip-path:none!important}
/* the facts strip is a centred column on desktop: its dune runs the full width of the screen */

/* ── THE HEADER SPEAKS THE PAGE'S LANGUAGE (owner 2026-10-13) ── one wordmark, in the script of the page: بالمير on Arabic
   pages, palmir in English and Spanish; the same optical size as the bilingual lockup it replaces */
.pp-logo.pp-id26 :is(.pp-logo-ar,.pp-logo-lat){display:none;width:auto}
html[lang="ar"] .pp-logo.pp-id26 .pp-logo-ar{display:block;height:38px}
html:not([lang="ar"]) .pp-logo.pp-id26 .pp-logo-lat{display:block;height:33px}
@media (max-width:1099px){
  html[lang="ar"] .pp-logo.pp-id26 .pp-logo-ar{height:31px}
  html:not([lang="ar"]) .pp-logo.pp-id26 .pp-logo-lat{height:27px}
}
/* ── THE DESKTOP HOME IS FOR MEETING THE COMPANY, NOT CHECKING OUT (owner 2026-10-13) ── the basket button rests on
   the desktop home page; it is there on every store page, and on the home page too as soon as something is in it */
@media (min-width:1100px){ html[data-pp-view="home"]:not(.pp-cart-full) #header .cartlink{display:none!important} }

/* ── THE LIGHT FOLLOWS THE PARALLAX (owner 2026-10-13: "when the sun goes down behind the palms, everything around is
   shadowed; when it rises, everything is visible; the same for the moon") ── one shade over the grove, the riders, the
   farmer and the dune (never the sky, the sun or the moon). At the top of the page the sun or moon sits on the crowns
   and the ground is in their shadow; as you scroll it climbs clear of the palms and the light comes onto them; scroll
   back and it sets again. Opacity only, on the browser's scroll track: no repaint, smooth in Safari and on phones. */
.px-shade{position:absolute;inset:0;z-index:2;pointer-events:none;--shade0:.58;opacity:var(--shade0);
  background:linear-gradient(180deg,rgba(28,15,6,0) 0%,rgba(28,15,6,0) 40%,rgba(28,15,6,.42) 52%,rgba(28,15,6,.55) 64%,rgba(28,15,6,.5) 100%)}
html[data-sky="night"] .px-shade{--shade0:.62;
  background:linear-gradient(180deg,rgba(3,6,15,0) 0%,rgba(3,6,15,0) 40%,rgba(3,6,15,.45) 52%,rgba(3,6,15,.6) 64%,rgba(3,6,15,.55) 100%)}
@media (max-width:1099px){
  .px-shade{background:linear-gradient(180deg,rgba(28,15,6,0) 0%,rgba(28,15,6,0) 47%,rgba(28,15,6,.42) 56%,rgba(28,15,6,.55) 66%,rgba(28,15,6,.5) 100%)}
  html[data-sky="night"] .px-shade{background:linear-gradient(180deg,rgba(3,6,15,0) 0%,rgba(3,6,15,0) 47%,rgba(3,6,15,.45) 56%,rgba(3,6,15,.6) 66%,rgba(3,6,15,.55) 100%)}
}
@keyframes pxShade{from{opacity:var(--shade0)}to{opacity:0}}
@supports (animation-timeline: scroll()) and (animation-range: 0px 100px){
  .px-vis.px-css .px-shade{animation:pxShade linear both;animation-timeline:scroll(root block);animation-range:0px calc(var(--px-end,900px) * .42)}
}
@media (prefers-reduced-motion:reduce){ .px-shade{animation:none!important;opacity:calc(var(--shade0) * .4)!important} }

/* ── JARBOU'S BURROW (owner 2026-10-14; brand-guidelines 9.3b, 9.4) ── under the scene the page cuts into the dune: one
   pinned photograph that plays as you scroll (palmpop-layer.js, burrowStory). The cut rises out of the dark ground on
   the dune crest and the headline's ground rises over its foot on the same crest. Day and night pictures, graded per
   plate. Opacity and transform only. */
/* (14 Oct 2026) the photographic burrow lives on Our story; home tells it drawn (block "THE DRAWN BURROW") */
.pp-dig{display:none}
html[data-pp-view="story"] .pp-dig{display:block;--pp-under:var(--pg-frame,#4A3322);margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
.pp-burrow[data-kind="photo"]{display:block;position:relative;height:300vh;background:var(--pp-under,#24170E);z-index:1}
@media (max-width:1099px){ .pp-burrow[data-kind="photo"]{height:340vh} }
.bw-pin{position:sticky;top:var(--pp-top,96px);height:calc(100svh - var(--pp-top,96px));overflow:hidden}
.bw-stage{position:absolute;left:0;top:50%;width:max(100%,calc((100svh - var(--pp-top,96px)) * 16 / 9));aspect-ratio:16/9;
  transform:translate3d(var(--bw-cam,0px),-50%,0);will-change:transform}
.bw-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bw-root{opacity:0}
.bw-jb,.bw-date{position:absolute;left:0;top:0;height:auto;opacity:0;transform-origin:50% 100%;pointer-events:none;will-change:transform,opacity}
.bw-hop{width:18.5%} .bw-sit{width:8.2%} .bw-hold{width:8.9%} .bw-date{width:2.1%}
.pp-burrow[data-kind="photo"] .is-night{display:none!important}   /* Our story is day and night the same (9.8) */
/* the cut rises on the dune crest out of the dark ground; the headline's ground rises over its foot the same way */
.pp-burrow::before,.pp-burrow::after{content:"";position:absolute;left:0;right:0;height:56px;z-index:3;pointer-events:none;background:var(--pp-under,#24170E)}
.pp-burrow::before{top:-1px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V20C1300 24 1150 40 1025 52C975 56 925 54 860 48C560 28 260 17 0 14Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V20C1300 24 1150 40 1025 52C975 56 925 54 860 48C560 28 260 17 0 14Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.pp-burrow::after{bottom:-1px;
  -webkit-mask:url("brand/identity/svg/palmir-crest-mask.svg") 0 0/100% 100% no-repeat;
          mask:url("brand/identity/svg/palmir-crest-mask.svg") 0 0/100% 100% no-repeat}
@media (max-width:1099px){ .pp-burrow::before,.pp-burrow::after{height:28px} }
/* his pantry: the three ways into the shop, as the site's own sand pills, over each shelf of the store */
.bw-tag{position:absolute;display:flex;flex-direction:column;gap:2px;padding:9px 16px 10px;border-radius:14px;background:rgba(251,244,232,.94);
  color:var(--palm-900,#0E3A2C);text-decoration:none;box-shadow:0 6px 22px rgba(20,10,4,.28);opacity:0;transform:translate(-50%,calc(-100% - 10px));
  pointer-events:none;transition:background-color .2s ease;white-space:nowrap;font-family:var(--sans,inherit)}
.bw-tag b{font-family:var(--serif-display,inherit);font-weight:700;font-size:1.05rem;line-height:1.2}
.bw-tag span{font-size:.78rem;color:#7A5838}
.bw-tag::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.bw-tag:hover,.bw-tag:focus-visible{background:#FFFFFF;outline:none}
.bw-tag:focus-visible{box-shadow:0 0 0 3px #E9A93A,0 6px 22px rgba(20,10,4,.28)}
.bw-tag[data-bw="dates"]{left:57.5%;top:49%} .bw-tag[data-bw="pop"]{left:71%;top:40%} .bw-tag[data-bw="gifts"]{left:60%;top:62%;transform:translate(-50%,0)}
.bw-tag[data-bw="gifts"]::after{bottom:auto;top:-6px}
.bw-tag.on{pointer-events:auto}
/* the root's line, in the brand's serif, on the sand above the tunnel */
.bw-line{position:absolute;left:6%;top:24%;max-width:34%;margin:0;opacity:0;font-family:var(--serif-display,inherit);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.15;color:#FBF4E8;text-shadow:0 2px 24px rgba(30,16,6,.55);text-wrap:balance}
html[dir="rtl"] .bw-line{text-align:right}
@media (max-width:1099px){
  .bw-tag{padding:7px 12px 8px}
  .bw-tag b{font-size:.95rem}
  .bw-line{left:34%;top:20%;max-width:30%;font-size:1.7rem}
}
/* the night sprite on the dune: hidden by day, and he dives as the page starts to move */
.px-jb .jb-dive{opacity:0}
@media (prefers-reduced-motion:reduce){ .pp-burrow[data-kind="photo"]{height:auto} .bw-pin{position:relative;top:0} }
/* the pantry replaces the "one palm, three ways" cards on the desktop home (the same three lines, as his store) */
/* (14 Oct: the "one palm, three ways" cards are back on home; the pantry left with Jarbou) */

/* phones: the store comes first (phone-first): the headline and its button straight under the scene, then the burrow.
   Done by moving the burrow in the page (palmpop-layer.js, burrowStory): a flex column on the opening section stopped the
   scene painting on touch phones (14 Oct 2026). Desktop keeps the proposal's order: scene, burrow, headline. */
}

/* ── THE DRAWN BURROW (owner 2026-10-14: home tells Jarbou's story drawn and complete; src/burrow_drawn.py) ── one wide
   drawn cut through the dune (3000 x 1700, read right to left) pinned under the scene; the camera travels with him.
   All six beats: asleep by his door, the date drops in, the chase, the pantry (dates, PalmPop, a gift box: real links),
   the root, and up the shaft beside the shop button. Day and night pictures. Transform and opacity only. */
.pp-burrow[data-kind="drawn"]{display:none}
html[data-pp-view="home"] .pp-burrow[data-kind="drawn"]{display:none;position:relative;height:420vh;background:var(--pp-under,#24170E);z-index:1}
.pp-burrow .bd-stage{position:absolute;left:0;top:0;width:3000px!important;height:1700px!important;max-width:none;aspect-ratio:auto;transform-origin:0 0;
  transform:translate3d(var(--bd-x,0px),var(--bd-y,0px),0) scale(var(--bd-s,1));will-change:transform}
.pp-burrow .bd-stage .bw-plate{position:absolute;left:0;top:0;width:3000px!important;height:1700px!important;max-width:none!important;inset:auto;object-fit:fill}
.bd-jb,.bd-date{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.pp-burrow .bd-jb{width:118px;max-width:none;height:auto} .pp-burrow .bd-sleep{width:118px} .pp-burrow .bd-dive{width:128px} .pp-burrow .bd-date{width:34px;max-width:none}
html[data-sky="night"] .pp-burrow[data-kind="drawn"] .bw-plate.is-day,html:not([data-sky="night"]) .pp-burrow[data-kind="drawn"] .bw-plate.is-night{display:none}
html[data-sky="night"] .bd-jb{filter:brightness(.62) saturate(.8)}
.pp-burrow[data-kind="drawn"] .bw-tag{transform:translate(-50%,calc(-100% - 14px)) scale(var(--bd-inv,1));transform-origin:50% 100%}
.pp-burrow[data-kind="drawn"] .bw-tag[data-bw="dates"]{left:1730px;top:420px} .pp-burrow[data-kind="drawn"] .bw-tag[data-bw="pop"]{left:1420px;top:430px}
.pp-burrow[data-kind="drawn"] .bw-tag[data-bw="gifts"]{left:1110px;top:440px;transform:translate(-50%,calc(-100% - 14px)) scale(var(--bd-inv,1))}
.pp-burrow[data-kind="drawn"] .bw-tag[data-bw="gifts"]::after{top:auto;bottom:-6px}
.pp-burrow[data-kind="drawn"] .bw-line{left:360px;top:860px;max-width:none;width:640px;font-size:54px;text-align:center!important}
.bd-cta{position:absolute;left:470px;top:150px;transform:translate(-50%,-100%) scale(var(--bd-inv,1));transform-origin:50% 100%;opacity:0;pointer-events:none;
  background:#E9A93A!important;color:#0E3A2C!important;white-space:nowrap}
.bd-cta.on{pointer-events:auto}
html[data-sky="night"] .pp-burrow[data-kind="drawn"] .bw-tag{background:rgba(251,244,232,.9)}
@media (prefers-reduced-motion:reduce){ html[data-pp-view="home"] .pp-burrow[data-kind="drawn"]{height:100vh} }
@media (max-width:1099px){ .pp-burrow[data-kind="drawn"] .bw-line{left:330px;top:1270px;width:440px;font-size:34px} }
@media (max-width:1099px){ .bd-cta{left:300px;top:330px;transform:translate(-50%,0) scale(var(--bd-inv,1));transform-origin:50% 0} }

/* owner 2026-10-14: only the latest scene, the drawn burrow on home (with his night sprite on the opening dune, its
   first beat), is desktop only. Everything made before it shows on phones too, the photographed chapter on Our story included. */
@media (max-width:1099px){
  html[data-pp-view] .pp-burrow[data-kind="drawn"],.px-jb{display:none!important}
}

/* ── JARBOU'S BURROW, ONE STILL (owner 2026-10-20) ── Our story keeps only the root picture: Jarbou at his door with his
   date, the palm's root, and the line. No pinned scroll, no tunnel, no pantry tags. The frame is the photograph's own
   16:9 on desktop; phones get a taller crop, centred between Jarbou and the root (pure CSS, no script). */
.pp-burrow[data-still]{height:auto!important}
.pp-burrow[data-still] .bw-pin{position:relative;top:0;--bw-h:min(calc(100svh - var(--pp-top,96px)),56.25vw);height:var(--bw-h)}
.pp-burrow[data-still] .bw-stage{width:max(100%,calc(var(--bw-h) * 16 / 9));will-change:auto;
  transform:translate3d(clamp(calc(100vw - 100%),calc(50vw - 50%),0px),-50%,0)}
.pp-burrow[data-still] .bw-root{opacity:1}
.pp-burrow[data-still] .bw-hold{opacity:1;left:40.5%;top:64.8%;transform:translate(-50%,-100%)}
.pp-burrow[data-still] .bw-line{opacity:1}
@media (max-width:1099px){
  .pp-burrow[data-still] .bw-pin{--bw-h:min(70svh,560px)}
  .pp-burrow[data-still] .bw-line{left:calc(50% - 50vw + 20px);top:12%;width:min(calc(100vw - 40px),560px);max-width:none;font-size:clamp(1.6rem,4.4vw,2.4rem)}   /* inside the visible crop, 20px gutters */
  html[dir="rtl"] .pp-burrow[data-still] .bw-line{left:auto;right:calc(50% - 50vw + 20px)}
}

/* ── TOUCH SCREENS: NO STICKY HOVER (2026-10-20, Safari on iPhone) ── iOS keeps :hover on after a tap, so a tapped card
   stayed lifted with its photo zoomed and buttons stayed in their hover colour. Where there is no real hover, the
   lifts and zooms are off; the colours still answer :active and :focus-visible. */
@media (hover:none){
  .policy-btn:hover:not(:active),.dn-tile:hover:not(:active){transform:none!important}
  .mag:hover{box-shadow:none!important}
  * {-webkit-tap-highlight-color:transparent}
}

/* ── WEB INTERFACE GUIDELINES PASS (2026-10-20; vercel web-interface-guidelines, the iPhone Safari items) ──
   1. scroll stays inside the cart, checkout, menu and sheets: reaching their end no longer scrolls the page behind
   2. no double-tap zoom on taps (quick +/- on quantities zoomed the page on iPhone); pinch zoom is untouched
   3. the two small round buttons get a 44px touch area without changing how they look */
.mobilenav,#permOv,#mapModal,#policyModal,#trackModal,.drawer,#checkout,#coForm,#infoModal,.pp-bag,.modal,[role="dialog"]{overscroll-behavior:contain}
html{touch-action:manipulation}
/* (both buttons are already positioned: relative in the header, absolute in the scene and the chip row) */
.pp-skybtn::after,.pp-cats-next::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.pp-cats-next::after{inset:-7px}

/* ── SEND IT AS A GIFT (2026-10-20) ── one switch card under the name; the body opens beneath it */
.pp-cg{margin:2px 0 18px}
.pp-cg-sw{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border-radius:var(--r-md,16px);background:var(--white,#fff);
  box-shadow:0 0 0 1px var(--hairline,rgba(14,58,44,.16));cursor:pointer;transition:box-shadow .3s var(--pp-ease,ease),background .3s}
.pp-cg-sw input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pp-cg-sw:has(input:focus-visible){outline:2px solid var(--palm-900,#0E3A2C);outline-offset:2px}
.pp-cg-ic{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--dune-100,#F6E3BF);color:var(--palm-900,#0E3A2C)}
.pp-cg-ic svg{width:22px;height:22px}
.pp-cg-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pp-cg-t b{font-size:.95rem;color:var(--palm-900,#0E3A2C);letter-spacing:0;text-transform:none}
.pp-cg-t small{font-size:.78rem;line-height:1.4;color:var(--ink-muted,#4F6B60)}
.pp-cg-knob{flex:0 0 46px;height:28px;border-radius:99px;background:rgba(14,58,44,.18);position:relative;transition:background .25s var(--pp-ease,ease)}
.pp-cg-knob::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(14,58,44,.3);transition:transform .3s var(--pp-ease,ease)}
.pp-cg-sw:has(input:checked){box-shadow:0 0 0 1.5px var(--palm-900,#0E3A2C);background:var(--sand-50,#FBF4E8)}
.pp-cg-sw:has(input:checked) .pp-cg-knob{background:var(--palm-900,#0E3A2C)}
.pp-cg-sw:has(input:checked) .pp-cg-knob::after{transform:translateX(18px)}
html[dir="rtl"] .pp-cg-sw:has(input:checked) .pp-cg-knob::after{transform:translateX(-18px)}
.pp-cg-body{padding:16px 2px 0;animation:ppGiftIn .45s var(--pp-ease,ease) both}
@keyframes ppGiftIn{from{opacity:0;transform:translateY(-6px)}}
.pp-cg-days{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none}
.pp-cg-days::-webkit-scrollbar{display:none}
.pp-cg-days button{flex:0 0 auto;scroll-snap-align:start;min-width:74px;min-height:62px;padding:8px 10px;border-radius:14px;border:0;background:var(--white,#fff);
  box-shadow:0 0 0 1px var(--hairline,rgba(14,58,44,.16));color:var(--palm-900,#0E3A2C);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font:inherit;cursor:pointer;position:relative;transition:box-shadow .2s,background .2s,transform .2s var(--pp-ease,ease)}
.pp-cg-days button b{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-muted,#4F6B60)}
html[dir="rtl"] .pp-cg-days button b{letter-spacing:0;font-size:.78rem}
.pp-cg-days button span{font-size:.92rem;font-weight:600}
.pp-cg-days button i{font-style:normal;font-size:.6rem;letter-spacing:.04em;color:var(--palm-700,#1E5A43)}
.pp-cg-days button[aria-checked="true"]{background:var(--palm-900,#0E3A2C);color:var(--sand-50,#FBF4E8);box-shadow:none}
.pp-cg-days button[aria-checked="true"] b,.pp-cg-days button[aria-checked="true"] i{color:rgba(251,244,232,.78)}
.pp-cg-days button:active{transform:scale(.96)}
.pp-cg textarea{width:100%;min-height:84px;resize:vertical;font:inherit;font-size:16px;line-height:1.5;padding:12px 14px;border-radius:12px;
  background:rgba(14,58,44,.055);border:1px solid rgba(14,58,44,.24);color:var(--palm-900,#0E3A2C)}
.pp-cg textarea:focus{outline:none;border-color:rgba(14,58,44,.75);background:rgba(14,58,44,.09)}
.pp-cg-count{font-size:.7rem;color:var(--ink-muted,#4F6B60);text-align:end;margin-top:4px;font-variant-numeric:tabular-nums}
#coForm .pp-cg-addr,#coForm .pp-cg-map{display:none}
#coForm.pp-cg-on [data-i18n="co.addr"],#coForm.pp-cg-on .pp-loc-gps:not(.pp-cg-map),#coForm.pp-cg-on .pp-loc-map{display:none}
#coForm.pp-cg-on .pp-cg-addr{display:block}
#coForm.pp-cg-on .pp-cg-map{display:flex}
.pp-cg-done{margin:0 auto 14px;text-align:center;max-width:34ch;padding:10px 14px;border-radius:12px;background:var(--dune-100,#F6E3BF);color:var(--palm-900,#0E3A2C);font-size:.88rem;line-height:1.45}

/* ── REAL REVIEWS (2026-10-20) ── verified-buyer cards on the home page and in each product's sheet */
.pp-rev{margin:0}
.pp-rev .who{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pp-rev-vb{margin-inline-start:auto;font-size:.62rem;letter-spacing:.06em;color:var(--palm-700,#1E5A43);background:rgba(30,122,76,.1);padding:3px 8px;border-radius:99px;text-transform:none}
.pp-rev-vb::before{content:"✓ "}
.pp-revs{margin:22px 0 4px;display:grid;gap:12px}
.pp-revs-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:.82rem;color:var(--ink-muted,#4F6B60)}
.pp-revs-h .stars{color:var(--accent-ink,#9A6614);letter-spacing:2px}
.pp-revs-h b{font-size:1.05rem;color:var(--palm-900,#0E3A2C)}
.pp-revs .voice{padding:18px 18px 16px;gap:10px;box-shadow:0 0 0 1px var(--hairline,rgba(14,58,44,.16))!important}
.pp-revs .voice q{font-size:1.02rem}
html[dir="rtl"] #q_email{text-align:right}

/* ══ HOME v3 (23 Oct 2026, owner: "nothing boring, no gaps, a brand you want to buy from") ══
   who-we-are as an editorial spread with the parapet roofline and a 2016 seal; a drifting promise band; the varieties
   as a photo accordion; three proof cards with a soft spotlight; the FAQ beside a WhatsApp card. Najdi touches from
   brand/identity (parapet, vents). Motion respects reduced motion. */
#ppIntro.pp-intro:not(.pp-off){display:grid!important;grid-template-columns:1fr;gap:clamp(32px,5vw,88px);align-items:center;padding-block:clamp(72px,9vw,140px)}
@media (min-width:1100px){ #ppIntro.pp-intro{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
#ppIntro h2.disp{font-size:clamp(2.4rem,4.6vw,4.4rem)!important;line-height:1.08;letter-spacing:-.01em;max-width:14ch}
#ppIntro h2.disp em{font-style:normal;color:#B8662C;display:block}
#ppIntro .pp-intro-t > p:not(.pp-kick){max-width:46ch}
.pp-verbs{list-style:none;padding:0;margin:30px 0 4px;display:flex;flex-wrap:wrap;gap:12px}
.pp-verbs li{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(14,58,44,.08),0 14px 30px -24px rgba(14,58,44,.5);min-width:150px}
.pp-verbs b{font:700 1.15rem/1.2 var(--disp);color:#0E3A2C}html[dir="rtl"] .pp-verbs b{font-family:var(--ar-disp,var(--disp))}
.pp-verbs span{font-size:.86rem;color:#4F6B60}
#ppIntro .pp-intro-img{position:relative;overflow:visible;max-width:none!important;width:100%!important;aspect-ratio:4/5;border-radius:0 0 32px 32px!important;margin:0!important;box-shadow:none}
#ppIntro .pp-intro-img img{border-radius:0 0 32px 32px;height:100%!important;max-height:640px;box-shadow:0 40px 70px -46px rgba(90,52,10,.7)}
.pp-intro-roof{position:absolute;left:0;right:0;top:-17px;height:18px;background:url("brand/identity/svg/palmir-parapet.svg") repeat-x center bottom/auto 18px}
.pp-intro-seal{position:absolute;inset-inline-start:-28px;bottom:42px;width:128px;height:128px;border-radius:50%;background:#E9A93A;color:#0E3A2C;display:grid;place-content:center;text-align:center;box-shadow:0 0 0 7px #FBF4E8,0 22px 40px -22px rgba(14,58,44,.6);transform:rotate(-8deg)}
.pp-intro-seal b{font:800 2rem/1 var(--disp)}.pp-intro-seal span{font-size:.72rem;font-weight:700;margin-top:4px;line-height:1.2}
@media (max-width:759px){ .pp-intro-seal{width:100px;height:100px;inset-inline-start:-6px} .pp-intro-seal b{font-size:1.6rem} }

#ppMarquee.pp-marquee{padding:0!important;max-width:none!important;width:100%;background:#0E3A2C;color:#FBF4E8;overflow:hidden;position:relative}
#ppMarquee::before{content:"";position:absolute;left:0;right:0;top:-1px;height:12px;background:url("brand/identity/svg/palmir-parapet-sand.svg") repeat-x center top/auto 12px;transform:scaleY(-1)}
.pp-mq-track{display:flex;width:max-content;padding:30px 0 26px}
.pp-mq-run{display:flex;align-items:center;flex:none;animation:ppMq 46s linear infinite}
html[dir="rtl"] .pp-mq-run{animation-name:ppMqR}
.pp-mq-run span{font:700 clamp(1.05rem,1.6vw,1.35rem)/1 var(--disp);white-space:nowrap;padding:0 26px}
html[dir="rtl"] .pp-mq-run span{font-family:var(--ar-disp,var(--disp))}
.pp-mq-run i{width:14px;height:12px;flex:none;background:url("brand/identity/svg/palmir-vents-gold.svg") center/contain no-repeat}
#ppMarquee:hover .pp-mq-run{animation-play-state:paused}
@keyframes ppMq{to{transform:translateX(-100%)}}@keyframes ppMqR{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .pp-mq-run{animation:none} .pp-mq-run[aria-hidden]{display:none} .pp-mq-track{width:auto;flex-wrap:wrap;justify-content:center} }

#ppVarieties.pp-vars{padding-block:clamp(64px,8vw,120px)}
.pp-acc{display:flex;gap:12px;height:min(68vh,560px);margin-top:34px}
.pp-acc-p{position:relative;flex:1;min-width:0;border-radius:26px;overflow:hidden;background:#F6E3BF var(--img) center/cover;transition:flex .7s cubic-bezier(.23,1,.32,1),filter .5s;cursor:pointer;isolation:isolate}
.pp-acc-p::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,38,29,.88),rgba(9,38,29,.15) 55%,rgba(9,38,29,0));z-index:-1;opacity:.85;transition:opacity .5s}
.pp-acc-p:not(.is-open){filter:saturate(.85)}.pp-acc-p.is-open{flex:4.2;cursor:default}
.pp-acc-b{position:absolute;inset:0;background:none;border:0;cursor:pointer;color:#FBF4E8;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px}
.pp-acc-p.is-open .pp-acc-b{pointer-events:none;opacity:0}
.pp-acc-n{font:700 1.2rem var(--disp);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
html[dir="rtl"] .pp-acc-n{font-family:var(--ar-disp,var(--disp));transform:none}
.pp-acc-c{position:absolute;inset-inline:34px;bottom:30px;color:#FBF4E8;opacity:0;transform:translateY(14px);transition:opacity .45s .15s,transform .6s .15s cubic-bezier(.23,1,.32,1);pointer-events:none}
.pp-acc-p.is-open .pp-acc-c{opacity:1;transform:none;pointer-events:auto}
.pp-acc-k{font-size:.85rem;letter-spacing:.08em;color:#E9A93A;margin:0}.pp-acc-c h3{font-size:clamp(2rem,3.4vw,3rem);color:#FBF4E8;margin:4px 0 10px}
.pp-acc-d{max-width:40ch;margin:0;color:rgba(251,244,232,.86);line-height:1.7}
.pp-acc-f{display:flex;align-items:center;gap:18px;margin-top:20px}.pp-acc-f .pp-g-price{font-weight:700;color:#FBF4E8}
.pp-btn.pp-btn-light{background:#FBF4E8;color:#0E3A2C;border:0}
.pp-acc-go svg{width:16px;height:16px}
@media (max-width:899px){ .pp-acc{flex-direction:column;height:auto} .pp-acc-p{flex:none;height:76px} .pp-acc-p.is-open{height:420px}
  .pp-acc-n{writing-mode:horizontal-tb;transform:none} .pp-acc-b{align-items:center;justify-content:flex-start;padding:0 24px} }
@media (prefers-reduced-motion:reduce){ .pp-acc-p,.pp-acc-c{transition:none} }

#ppProof.pp-proof{padding-block:clamp(72px,9vw,130px);background:#0E3A2C;color:#FBF4E8;max-width:none!important;position:relative}
#ppProof .pp-sec-h,#ppProof .pp-proof-g{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
#ppProof .pp-kick{color:#E9A93A}#ppProof h2.disp{color:#FBF4E8}
.pp-proof-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.pp-proof-c{position:relative;padding:34px 30px 32px;border-radius:24px;background:rgba(251,244,232,.04);box-shadow:inset 0 0 0 1px rgba(233,169,58,.22);overflow:hidden;--mx:50%;--my:0%}
.pp-proof-c::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(233,169,58,.18),transparent 45%);opacity:0;transition:opacity .4s}
.pp-proof-c:hover::before{opacity:1}
.pp-proof-c svg{width:52px;height:52px;color:#E9A93A}
.pp-proof-n{position:absolute;inset-inline-end:26px;top:22px;font:800 3.2rem/1 var(--disp);color:rgba(233,169,58,.16)}
.pp-proof-c h3{font-size:1.65rem;color:#FBF4E8;margin:22px 0 10px}.pp-proof-c p{margin:0;color:rgba(251,244,232,.8);line-height:1.75}
@media (max-width:899px){ .pp-proof-g{grid-template-columns:1fr} }

@media (min-width:1100px){
  #ppFaq.pp-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
  #ppFaq .pp-faq-side{position:sticky;top:120px}
  #ppFaq .pp-faq-l{max-width:none!important;margin:0!important;width:100%}
}
.pp-faq-ask{display:flex;flex-direction:column;gap:6px;margin-top:28px;padding:24px 26px;border-radius:22px;background:#0E3A2C;color:#FBF4E8;text-decoration:none;max-width:420px;box-shadow:0 26px 50px -34px rgba(14,58,44,.8);transition:transform .35s cubic-bezier(.23,1,.32,1)}
.pp-faq-ask:hover{transform:translateY(-3px)}
.pp-faq-ask b{font:700 1.35rem var(--disp)}html[dir="rtl"] .pp-faq-ask b{font-family:var(--ar-disp,var(--disp))}
.pp-faq-ask span{color:rgba(251,244,232,.8)}.pp-faq-ask i{font-style:normal;color:#E9A93A;font-weight:700;display:flex;align-items:center;gap:6px;margin-top:6px}.pp-faq-ask svg{width:16px;height:16px}
/* home v3: the running order and the intro spread (these must outrank the 12 Oct home rules above) */
@media (min-width:1100px){
  html[data-pp-view="home"] #top{order:1!important} html[data-pp-view="home"] #mq{order:2!important}
  html[data-pp-view="home"] #ppIntro{order:3!important} html[data-pp-view="home"] #ppMarquee{order:4!important}
  html[data-pp-view="home"] #ppLines{order:5!important} html[data-pp-view="home"] #ppVarieties{order:6!important}
  html[data-pp-view="home"] #harvest{order:7!important} html[data-pp-view="home"] #ppProof{order:8!important}
  html[data-pp-view="home"] #ppFindCta{order:9!important} html[data-pp-view="home"] #corporate{order:10!important}
  html[data-pp-view="home"] #ppFaq{order:11!important}
  html[data-pp-view="home"] #ppIntro{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;column-gap:clamp(56px,6vw,110px)!important;align-items:center!important;max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
  html[data-pp-view="home"] #ppIntro .pp-intro-img{max-width:none!important;width:100%!important;align-self:center}
  html[data-pp-view="home"] #ppIntro .pp-intro-img img{height:min(72svh,640px)!important;width:100%!important}
}
/* home v3 inside the chapter system (each home section is a full-screen chapter, flex column, guidelines 9.4):
   the marquee is a band, not a chapter; the intro and the FAQ are two-column chapters; proof keeps its palm ground */
@media (min-width:1100px){
  html[data-pp-view="home"] #ppMain > section#ppMarquee{min-height:0!important;display:block!important;padding:0!important;background:#0E3A2C!important;max-width:none!important;width:100%!important}
  html[data-pp-view="home"] #ppMain > section#ppIntro{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important}
  html[data-pp-view="home"] #ppMain > section#ppFaq{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;align-content:center}
  html[data-pp-view="home"] #ppMain > section#ppProof,html.pp-ground-on[data-pp-view="home"] #ppMain > section#ppProof{background:#0E3A2C!important;color:#FBF4E8;justify-content:center}
  html[data-pp-view="home"] #ppMain > section#ppVarieties{justify-content:center}
}
@media (min-width:1100px){
  html.pp-ground-on[data-pp-view="home"] #ppMain > section#ppMarquee,html[data-pp-view="home"] #ppMain > section#ppMarquee{background:#0E3A2C!important;color:#FBF4E8!important}
  /* light and dark alternate (guidelines 9.x): proof (palm) → gifting (gold) → find yours (dark) → FAQ (sand) */
  html[data-pp-view="home"] #corporate{order:9!important} html[data-pp-view="home"] #ppFindCta{order:10!important}
}
#ppVarieties .pp-acc-p::after{background:linear-gradient(to top,rgba(9,38,29,.94) 0,rgba(9,38,29,.72) 34%,rgba(9,38,29,.1) 68%,rgba(9,38,29,0))!important;opacity:1!important}
#ppVarieties .pp-acc-c .pp-acc-k{color:#E9A93A!important;font-weight:700}
#ppVarieties .pp-acc-c .pp-acc-d{color:rgba(251,244,232,.9)!important}
#ppVarieties .pp-acc-c h3{color:#FBF4E8!important}

/* ══ درب الوعل · THE IBEX TRAIL (Gifting, 23 Oct 2026; layout v2 same day: copy in open sky, art in its own box, labels on the sand) ══ */
#ppTrail.pp-trail{max-width:none!important;padding:0!important;height:300vh;position:relative;background:#FBEFC9}
.tr-stage{position:sticky;top:var(--pp-top,60px);height:calc(100vh - var(--pp-top,60px));height:calc(100svh - var(--pp-top,60px));overflow:hidden;
  background:linear-gradient(to bottom,#FBEFC9 0%,#FBEFC9 34%,#F7E6C3 70%,#F1D7A6 100%)}
.tr-art{position:absolute;left:0;right:0;bottom:0;height:min(70%,calc(100vw / 2.3))}
.tr-art svg{display:block;width:100%;height:100%}
.tr-copy{position:absolute;left:0;right:0;top:clamp(14px,3.6vh,44px);margin:0 auto;max-width:860px;padding:0 24px;text-align:center;z-index:2}
.tr-copy .pp-crumb{justify-content:center}
.tr-copy .pp-kick{margin:6px 0 0}
.tr-copy h1{font-size:clamp(1.9rem,3.5vw,3.3rem);line-height:1.12;margin:6px 0 10px;color:#0E3A2C;text-wrap:balance}
.tr-copy h1 em{font-style:normal;color:#B8662C}
.tr-sub{color:#4F6B60;line-height:1.7;max-width:58ch;margin:0 auto;text-wrap:pretty}
.tr-hint{margin:12px 0 0;font-size:.82rem;color:#7A5232;letter-spacing:.02em;transition:opacity .4s}
.tr-hint span{display:inline-flex;align-items:center;gap:8px}
.tr-hint span::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);animation:trHint 1.6s ease-in-out infinite}
@keyframes trHint{50%{transform:translateY(4px) rotate(45deg)}}
.moved .tr-hint{opacity:0}
/* the carving wakes into a living ibex */
.ibex-carve{opacity:calc(1 - var(--wake,0))}.ibex-fill{opacity:var(--wake,0)}
.carve-ghost{opacity:calc(var(--wake,0) * .9)}
.vent{transition:fill .5s,filter .5s}
.lit1 .v1,.lit2 .v2,.lit3 .v3{fill:#E9A93A;filter:url(#tGlow)}
.dust{opacity:0;transform-box:fill-box;transform-origin:center}
.dust.puff{animation:trDust .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes trDust{0%{opacity:.95;scale:.4}60%{opacity:.6}100%{opacity:0;scale:1.6;translate:0 -10px}}
/* gift labels: on the sand under their house; dim until the ibex lands there, but always clickable */
.tr-tags{position:absolute;left:0;right:0;bottom:calc(var(--tr-crest) + 8px);height:0;z-index:3}
/* the trail ends on the site's dune crest with the Sadu crown, in the cream of the gift section below (no hard line) */
#ppTrail{--tr-crest:34px}
html[data-pp-view="gifting"] #ppGift{position:relative;z-index:4}
html[data-pp-view="gifting"] #ppGift::before{content:"";position:absolute;left:50%;width:100vw;translate:-50% 0;bottom:calc(100% - 1px);height:var(--tr-crest,34px);pointer-events:none;background:#F2EADB;
  -webkit-mask:url("brand/identity/svg/palmir-crest-mask.svg") 0 0/100% 100% no-repeat;mask:url("brand/identity/svg/palmir-crest-mask.svg") 0 0/100% 100% no-repeat}
.tr-tag{position:absolute;bottom:0;display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:14px;border:1px solid rgba(110,74,46,.22);background:rgba(251,244,232,.9);color:#0E3A2C;text-align:start;font:inherit;cursor:pointer;
  transform:translateY(3px);transition:background .5s,color .5s,transform .6s cubic-bezier(.23,1,.32,1),box-shadow .5s,border-color .5s;box-shadow:0 10px 24px -18px rgba(110,74,46,.6);white-space:nowrap}
.tr-tag b{font-size:1rem}.tr-tag span{font-size:.8rem;color:#6B5A48;transition:color .5s}
.tr-tag::before{content:"";position:absolute;inset-inline-start:16px;top:-6px;width:10px;height:10px;background:inherit;border:inherit;border-width:1px 0 0 1px;transform:rotate(45deg);border-radius:2px 0 0 0}
.lit1 .t1,.lit2 .t2,.lit3 .t3{background:#0E3A2C;color:#FBF4E8;border-color:#E9A93A;transform:none;box-shadow:0 0 0 1px #E9A93A,0 18px 34px -18px rgba(14,58,44,.85)}
.lit1 .t1 span,.lit2 .t2 span,.lit3 .t3 span{color:rgba(251,244,232,.85)}
.tr-tag:hover,.tr-tag:focus-visible{transform:translateY(-2px)}
.tr-tag:focus-visible{outline:3px solid #E9A93A;outline-offset:3px}
@media (max-width:759px){ #ppTrail.pp-trail{height:260vh}
  .tr-art{height:60%}
  html.pp-trail-on #waFab{opacity:0;pointer-events:none;transform:scale(.8)}
  .tr-copy{padding:0 18px}.tr-copy h1{font-size:clamp(1.75rem,7.6vw,2.3rem)}.tr-sub{font-size:.93rem;line-height:1.65}
  #ppTrail,html[data-pp-view="gifting"] #ppGift{--tr-crest:26px}
  .tr-tags{height:auto;display:flex;gap:6px;padding:0 10px}
  .tr-tag{position:relative;flex:1 1 0;min-width:0;padding:8px 10px;white-space:normal;border-radius:12px}
  .tr-tag b{font-size:.9rem}.tr-tag span{font-size:.7rem;line-height:1.35}.tr-tag::before{display:none} }
@media (prefers-reduced-motion:reduce){ #ppTrail.pp-trail{height:auto} .tr-stage{position:relative;height:92vh} .tr-hint{display:none} .tr-tag{transition:none} .dust{display:none} }

/* ══ HOME · THE THREE LINES AS A SHOWCASE (23 Oct 2026; replaces the three square cards) ══
   A tall photo stage beside a numbered list. Hover (or tap) a line: its photo wipes up into the stage and its words and
   link unfold; until someone takes over it turns by itself every 6 s, with a gold bar counting down. Same family as the
   varieties panels (radius 28, deep green ink), different behaviour. */
.pp-sc{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:stretch;margin-top:clamp(28px,4vw,48px)}
.pp-sc-stage{position:relative;border-radius:28px;overflow:hidden;min-height:clamp(420px,46vw,600px);background:#F6E3BF;isolation:isolate;box-shadow:0 40px 70px -50px rgba(90,52,10,.55)}
.pp-sc-shot{position:absolute;inset:0;display:grid;place-items:center;clip-path:inset(100% 0 0 0 round 28px);transition:clip-path .9s cubic-bezier(.7,0,.2,1);z-index:1}
.pp-sc-shot.is-on{clip-path:inset(0 0 0 0 round 28px);z-index:2}
.pp-sc-shot.was{z-index:1;clip-path:inset(0 0 0 0)}
.pp-sc-shot :is(img,picture){width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.pp-sc-shot picture img{width:100%;height:100%;object-fit:cover}
.pp-sc-shot.is-on :is(img,picture){transform:scale(1)}
.pp-sc-shot.s-pop{background:radial-gradient(80% 70% at 50% 45%,#FBE6B4 0%,#EDBE63 100%)}
.pp-sc-shot.s-gift{background:radial-gradient(80% 70% at 50% 45%,#FBEFC9 0%,#E9C98A 100%)}
.pp-sc-shot.s-pop img,.pp-sc-shot.s-gift > img:first-child{object-fit:contain;width:86%;height:86%;filter:drop-shadow(0 26px 24px rgba(90,52,10,.28))}
.pp-sc-seal{position:absolute;width:92px!important;height:92px!important;top:26px;inset-inline-end:26px;transform:rotate(-8deg)!important;filter:drop-shadow(0 10px 14px rgba(14,58,44,.35))}
.pp-sc-cap{position:absolute;z-index:3;inset-inline-start:22px;bottom:20px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(14,58,44,.88);color:#FBF4E8;font:700 .85rem/1 var(--mono);backdrop-filter:blur(6px)}
html[dir="rtl"] .pp-sc-cap{font-family:var(--ar-ui)}
.pp-sc-of{opacity:.6;font-weight:500}
.pp-sc-bar{display:block;width:54px;height:3px;border-radius:3px;background:rgba(251,244,232,.25);overflow:hidden;margin-inline-start:4px}
.pp-sc-bar b{display:block;height:100%;width:100%;background:#E9A93A;transform:scaleX(0);transform-origin:0 50%}
html[dir="rtl"] .pp-sc-bar b{transform-origin:100% 50%}
.pp-sc.run .pp-sc-bar b{animation:ppScBar 6s linear forwards}
.pp-sc.held .pp-sc-bar{opacity:0;width:0;margin:0;transition:all .4s}
@keyframes ppScBar{to{transform:scaleX(1)}}
.pp-sc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;counter-reset:none}
.pp-sc-row{position:relative;border-top:1px solid rgba(14,58,44,.14)}
.pp-sc-row:last-child{border-bottom:1px solid rgba(14,58,44,.14)}
.pp-sc-row::before{content:"";position:absolute;inset-inline-start:0;top:-1px;height:2px;width:0;background:#E9A93A;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.pp-sc-row.is-on::before{width:100%}
.pp-sc-h{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:18px;width:100%;padding:26px 0 22px;cursor:pointer;color:#0E3A2C}
.pp-sc-h:focus-visible{outline:3px solid #E9A93A;outline-offset:4px;border-radius:8px}
.pp-sc-n{font:600 .9rem/1 var(--mono);color:#B8662C;min-width:2.2em;transition:color .4s}
html[dir="rtl"] .pp-sc-n{font-family:var(--ar-ui)}
.pp-sc-t{font-size:clamp(1.7rem,2.7vw,2.5rem);line-height:1.1;color:rgba(14,58,44,.42);transition:color .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.pp-sc-row.is-on .pp-sc-t,.pp-sc-h:hover .pp-sc-t{color:#0E3A2C}
.pp-sc-row.is-on .pp-sc-t{transform:translateX(6px)}
html[dir="rtl"] .pp-sc-row.is-on .pp-sc-t{transform:translateX(-6px)}
.pp-sc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.8,.2,1)}
.pp-sc-body > div{overflow:hidden;padding-inline-start:calc(2.2em + 18px)}
.pp-sc-row.is-on .pp-sc-body{grid-template-rows:1fr}
.pp-sc-body p{margin:0 0 14px;max-width:46ch;color:#4F6B60;line-height:1.7;opacity:0;transform:translateY(8px);transition:opacity .5s .1s,transform .6s .1s cubic-bezier(.2,.8,.2,1)}
.pp-sc-row.is-on .pp-sc-body p{opacity:1;transform:none}
.pp-sc-go{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;padding:11px 18px;border-radius:999px;background:#0E3A2C;color:#FBF4E8;text-decoration:none;font-weight:700;font-size:.95rem;transition:background .3s,transform .3s}
.pp-sc-go svg{width:16px;height:16px;transition:transform .3s}
.pp-sc-go:hover{background:#174D3B}.pp-sc-go:hover svg{transform:translateX(3px)}
html[dir="rtl"] .pp-sc-go:hover svg{transform:translateX(-3px)}
.pp-sc-go:focus-visible{outline:3px solid #E9A93A;outline-offset:3px}
@media (max-width:899px){ .pp-sc{grid-template-columns:1fr;gap:22px} .pp-sc-stage{min-height:0;aspect-ratio:4/3} .pp-sc-t{font-size:1.6rem} .pp-sc-h{padding:20px 0 16px} }
@media (prefers-reduced-motion:reduce){ .pp-sc-shot,.pp-sc-shot :is(img,picture),.pp-sc-body,.pp-sc-body p,.pp-sc-t,.pp-sc-row::before{transition:none!important} .pp-sc-shot{clip-path:none;opacity:0}.pp-sc-shot.is-on{opacity:1} }

/* ══ PALMPOP · THE FIVE FLAVOURS IN THE SHOWCASE LANGUAGE (23 Oct 2026) ══ the same numbered list, unfolding notes, counter
   and gold countdown as the home showcase (.pp-sc), around the existing dissolving can (ppMorph). */
.pp-flv-stage{position:relative}
.pp-flv-cap{z-index:4}
.pp-flv-cap.run .pp-sc-bar b{animation:ppScBar 4.5s linear forwards}
.pp-flv-now{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important}
.pp-flv-list{list-style:none;display:flex!important;flex-direction:column;flex-wrap:nowrap!important;gap:0!important;margin:0 0 22px!important;padding:0}
.pp-flv-row{position:relative;border-top:1px solid rgba(14,58,44,.14)}
.pp-flv-row:last-child{border-bottom:1px solid rgba(14,58,44,.14)}
.pp-flv-row::before{content:"";position:absolute;inset-inline-start:0;top:-1px;height:2px;width:0;background:#E9A93A;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.pp-flv-row.is-on::before{width:100%}
.pp-flv-list .pp-flv-chip{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:16px;width:100%;padding:16px 0 12px;cursor:pointer;color:#0E3A2C;min-height:44px}
.pp-flv-list .pp-flv-chip:focus-visible{outline:3px solid #E9A93A;outline-offset:3px;border-radius:8px}
.pp-flv-name{font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.15;color:rgba(14,58,44,.42);transition:color .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.pp-flv-row.is-on .pp-flv-name,.pp-flv-chip:hover .pp-flv-name{color:#0E3A2C}
.pp-flv-row.is-on .pp-flv-name{transform:translateX(6px)}
html[dir="rtl"] .pp-flv-row.is-on .pp-flv-name{transform:translateX(-6px)}
.pp-flv-row .pp-sc-body > div{padding-inline-start:calc(2.2em + 16px)}
.pp-flv-row.is-on .pp-sc-body{grid-template-rows:1fr}
.pp-flv-row .pp-sc-body p{margin:0 0 14px;font-size:.95rem}
.pp-flv-row.is-on .pp-sc-body p{opacity:1;transform:none}

/* ══ INNER PAGES SPEAK THE SAME EDGE AS HOME (23 Oct 2026, owner: "everything working together, every section, every page") ══
   The eased gradient seams (12 Oct) are retired here too. Rule: a coloured band draws its own Sadu crest at its edges,
   in its own colour: rising at its top, hanging (flipped) at its bottom. The paper never has to be matched. Each crest is
   exactly one screen wide (left 50% / 100vw), so the slice-scaled mask keeps the triangles their designed size. */
:root{--crest-m:url("brand/identity/svg/palmir-crest-mask.svg") 0 0/100% 100% no-repeat;--crest-h:34px}
@media (max-width:759px){ :root{--crest-h:24px} }
/* PalmPop page: the mint chapter ends on a hanging crest */
html[data-pp-view="palmpop"] #palmpop{padding-bottom:calc(var(--crest-h) + 40px)!important}
html[data-pp-view="palmpop"] #palmpop::before{bottom:0!important}
html[data-pp-view="palmpop"] #palmpop::after{left:50%!important;right:auto!important;width:100vw;translate:-50% 0;bottom:auto!important;top:calc(100% - 1px);height:var(--crest-h)!important;
  background:#D5EEDF!important;-webkit-mask:var(--crest-m);mask:var(--crest-m);transform:scaleY(-1)}
/* find yours and the tasting flight bands */
html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight){padding-bottom:calc(var(--crest-h) + 40px)!important}
html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight)::before{bottom:0!important}
html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight)::after{content:""!important;position:absolute;left:50%!important;right:auto!important;width:100vw;translate:-50% 0;bottom:auto!important;top:calc(100% - 1px);height:var(--crest-h)!important;
  background:var(--band)!important;-webkit-mask:var(--crest-m);mask:var(--crest-m);transform:scaleY(-1);z-index:0;pointer-events:none}
/* the dark frame (why + benefits) on inner pages: crest up at its top, hanging crest at its bottom */
html[data-pp-view]:not([data-pp-view="home"]) #why{padding-top:calc(var(--crest-h) + 56px)!important}
html[data-pp-view]:not([data-pp-view="home"]) #benefits{padding-bottom:calc(var(--crest-h) + 56px)!important}
html[data-pp-view]:not([data-pp-view="home"]) #why::after{top:0!important}
html[data-pp-view]:not([data-pp-view="home"]) #benefits::before{bottom:0!important}
html[data-pp-view]:not([data-pp-view="home"]) #why::before{left:50%!important;right:auto!important;width:100vw;translate:-50% 0;top:auto!important;bottom:calc(100% - 1px);height:var(--crest-h)!important;
  background:var(--pg-frame)!important;-webkit-mask:var(--crest-m);mask:var(--crest-m)}
html[data-pp-view]:not([data-pp-view="home"]) #benefits::after{left:50%!important;right:auto!important;width:100vw;translate:-50% 0;bottom:auto!important;top:calc(100% - 1px);height:var(--crest-h)!important;
  background:var(--pg-frame)!important;-webkit-mask:var(--crest-m);mask:var(--crest-m);transform:scaleY(-1)}
/* every footer rises on the crest, in that page's footer colour (no long dark smear above it) */
html:not([data-pp-view="home"]) .welcome-invite,html[data-pp-view]:not([data-pp-view="home"]) .welcome-invite{background:transparent!important;padding-bottom:calc(var(--crest-h) + 48px)!important}
html:not([data-pp-view="home"]) footer{position:relative;z-index:4;overflow:visible!important}
html:not([data-pp-view="home"]) footer::before{content:"";position:absolute;left:50%;width:100vw;translate:-50% 0;bottom:calc(100% - 1px);height:var(--crest-h);pointer-events:none;
  background:var(--pg-foot);-webkit-mask:var(--crest-m);mask:var(--crest-m)}
/* the bands clip their full-bleed colour sideways only; leave room above and below for the crests */
html[data-pp-view="palmpop"] #palmpop,html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight,#why,#benefits){clip-path:inset(-60px -100vmax -60px -100vmax)!important}
html[data-pp-view="palmpop"] #palmpop,html[data-pp-view]:not([data-pp-view="home"]) :is(#quiz,#flight,#benefits){z-index:3}
/* the butter bands on inner pages (the route, the harvest) rise and end on the crest in their own colour */
html[data-pp-view]:not([data-pp-view="home"]) :is(#ritual,#harvest){position:relative;overflow:visible!important;z-index:2}
html[data-pp-view]:not([data-pp-view="home"]) :is(#ritual,#harvest)::before,
html[data-pp-view]:not([data-pp-view="home"]) :is(#ritual,#harvest)::after{content:"";position:absolute;left:50%;width:100vw;translate:-50% 0;height:var(--crest-h);pointer-events:none;
  background:#FBEFC9;-webkit-mask:var(--crest-m);mask:var(--crest-m)}
html[data-pp-view]:not([data-pp-view="home"]) :is(#ritual,#harvest)::before{bottom:calc(100% - 1px)}
html[data-pp-view]:not([data-pp-view="home"]) :is(#ritual,#harvest)::after{top:calc(100% - 1px);transform:scaleY(-1)}
html[data-pp-view]:not([data-pp-view="home"]) :is(#ritual,#harvest){clip-path:inset(-60px -100vmax -60px -100vmax)!important}
html[data-pp-view]:not([data-pp-view="home"]) :is(#ritual,#harvest){box-shadow:none!important;border-image:conic-gradient(#FBEFC9 0 0) fill 0 / 0 / 0 100vmax!important}
html[data-pp-view="story"] #ritual{margin-top:calc(var(--crest-h) + 14px)!important}