/* ==========================================================================
   Dāstān PRODUCT pages: one blend (/product?c=spark|tempo|float|drift|glide) and one specialty coffee (/specialty-product?c=<id>).
   Both pages share this file; specialty-product.css only adds what is specific to a coffee (tasting-note chips, spec grid, sold out).
   Loaded after chrome.css, menu.css and listing.css (tokens, base, footer, page-switch cover).
   Fluid like the home sections: every size is a clamp(), the content width and gutters are listing.css's --max / --inset.
   Page = black everywhere (hero > spec strip > story > more coffees > footer), cream text, graphic elements only thin coral lines; the pack stands alone on the black page
   (the assets are transparent) and the buy button is mint with a small solid triangle. Brand: flat squares, no rounded corners, pixel face (--mc), Nian text.
   Sections: 1 tones, 2 hero, 3 buy panel, 4 phone action bar, 5 spec strip, 6 story, 7 more-coffees cards, 8 states, 9 Persian, 10 motion.
   ========================================================================== */

/* 1. black page, cream text, thin coral lines; the blend's own colour (data-tone) is no longer used for any fill ------------------------------ */
body.pp-page{--bg:var(--th-bg);--ink:var(--th-fg);--ink2:var(--th-hl);--line:var(--th-hl);--btn:var(--mint);--btnfg:#000;--focus:var(--th-ring);background:var(--th-bg);color:var(--th-fg)}
.pp-page .fh{--hd-bg:var(--th-bg)!important;--hd-fg:var(--th-hdr)!important}
.pp-page :focus-visible{outline:3px solid var(--cream);outline-offset:3px}

/* 2. hero ------------------------------------------------------------------------------------------------------------- */
.pp-hero{background:var(--th-bg);color:var(--th-fg);padding:clamp(4px,1.2vw,16px) var(--inset) clamp(40px,5.5vw,88px)}
.pp-crumb ol{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;font:400 clamp(14px,1.1vw,16px)/1.3 var(--nian)}
.pp-crumb li{display:flex;align-items:center}
.pp-crumb li+li:before{content:"/";padding-inline:6px;opacity:.55}
.pp-crumb a,.pp-crumb [aria-current]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 4px}
.pp-page .ls-links a{min-width:44px;justify-content:center}
.pp-crumb a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .2s}
.pp-crumb a:hover{text-decoration-color:currentColor}
.pp-crumb [aria-current]{font-weight:700}
.pp-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head art" "buy art";grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,100px);row-gap:clamp(22px,2.6vw,40px);align-items:start;margin-top:clamp(6px,1.4vw,20px)}
.pp-head{grid-area:head;min-width:0}
.pp-kicker{display:flex;align-items:center;gap:12px;margin:0 0 clamp(12px,1.4vw,16px);font:400 clamp(13px,1.1vw,15px)/1.2 var(--mc);letter-spacing:.06em;text-transform:uppercase}
.pp-idx{padding-inline-start:12px;border-inline-start:1px solid currentColor;opacity:.75}
.pp-kicker:before{content:"";flex:none;width:.8em;height:.8em;background:var(--ink2)}
.pp-name{font:400 clamp(36px,5.7vw,92px)/.98 var(--mc);letter-spacing:.005em;text-transform:uppercase;overflow-wrap:anywhere;text-wrap:balance;direction:ltr;text-align:start}
.pp-name.is-long{font-size:clamp(28px,3.9vw,64px);line-height:1.02}
@media (max-width:420px){.pp-name.is-long{font-size:clamp(18px,6.4vw,28px)}}
html[dir=rtl] .pp-name{text-align:right}
.pp-ratio{margin-top:clamp(12px,1.2vw,16px);font:400 clamp(15px,1.3vw,19px)/1.4 var(--mc);letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);text-wrap:balance}

/* the pack: no frame, no mosaic, no panel; the transparent pouch picture stands on the black page */
.pp-art{grid-area:art;position:relative;justify-self:end;align-self:start;width:100%;max-width:600px;aspect-ratio:1 / 1.04}
.pp-art img{position:absolute;left:50%;top:50%;height:92%;width:auto;max-width:86%;object-fit:contain;translate:-50% -50%;animation:pp-float 7s ease-in-out infinite}
.pp-art.is-wide img{height:88%}
@keyframes pp-float{50%{translate:-50% calc(-50% - 10px)}}

/* 3. buy panel: hairline on top, price, size and grinding as square tiles, amount stepper and the one primary action in a single row ------------------------------------------------------ */
.pp-buy{grid-area:buy;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:20px 12px;width:100%;max-width:520px;min-width:0;padding-top:20px;border-top:1px solid var(--th-hl)}
.pp-buy>*{grid-column:1 / -1}
.pp-f{border:0;margin:0;padding:0;min-width:0}
.pp-l{display:block;float:none;width:100%;margin:0 0 10px;padding:0;font:400 13px/1.2 var(--mc);letter-spacing:.06em;text-transform:uppercase;color:var(--th-hl)}
.pp-pr .pp-l{margin-bottom:6px}
.pp-pr:has(.pp-price:empty){display:none}
.pp-price{min-height:1.2em;margin:0;font:400 clamp(26px,2.6vw,38px)/1.15 var(--mc);letter-spacing:.01em;direction:ltr;unicode-bidi:isolate;text-align:start}
html[dir=rtl] .pp-price{direction:rtl;text-align:right}
.pp-opts{display:flex;flex-wrap:wrap;gap:8px}
.pp-opt{position:relative;display:block;flex:0 1 auto}
.pp-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pp-opt span{display:flex;align-items:center;justify-content:center;min-width:60px;min-height:40px;padding:0 14px;border:1px solid var(--th-fg);font:700 15px/1 var(--nian);transition:background-color .2s,color .2s}
.pp-opt:hover span{background:rgb(var(--th-fg-rgb) / .1)}
.pp-opt input:checked+span{background:var(--th-fg);color:var(--th-bg)}
.pp-opt input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
/* a size that cannot be had: dimmed, hairline border, struck-through text */
.pp-opt.is-off{opacity:.45}
.pp-opt.is-off input{cursor:not-allowed}
.pp-opt.is-off span,.pp-opt.is-off:hover span{border-color:rgb(var(--th-fg-rgb) / .5);background:transparent;color:inherit;text-decoration:line-through;text-decoration-thickness:1px}
/* amount: the stepper (the label is for screen readers; on phones it is shown in front of the stepper) */
.pp-amt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pp-amt .pp-l{margin:0;width:auto}
.pp-step{display:inline-flex;align-items:stretch;height:44px;border:1px solid var(--th-fg);direction:ltr}
.pp-step button{width:40px;display:grid;place-items:center;font:400 20px/1 Arial,sans-serif;transition:background-color .2s}
.pp-step button:hover{background:rgb(var(--th-fg-rgb) / .1)}
.pp-step output{display:grid;place-items:center;min-width:40px;padding:0 4px;border-inline:1px solid rgb(var(--th-fg-rgb) / .28);font:700 16px/1 var(--nian)}
.pp-bar{display:grid;gap:10px}
.pp-sum{display:none;margin:0}
.pp-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0 18px;background:var(--th-fg);color:var(--th-bg);font:400 15px/1.3 var(--mc);letter-spacing:.04em;text-transform:uppercase;text-align:start;transition:opacity .2s}
.pp-cta:hover{opacity:.88}
.pp-cta:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* the small solid triangle of every buy button: points right in LTR, left in RTL */
.pp-tri,.co-tri{flex:none;display:block;width:.8em;height:.9em;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transition:translate .2s}
html[dir=rtl] .pp-tri,html[dir=rtl] .co-tri{clip-path:polygon(100% 0,0 50%,100% 100%)}
.pp-cta:hover .pp-tri{translate:4px 0}
html[dir=rtl] .pp-cta:hover .pp-tri{translate:-4px 0}
.pp-cta[aria-disabled=true]{background:transparent;color:var(--th-fg);border:1px solid rgb(var(--th-fg-rgb) / .5);cursor:not-allowed;opacity:.7}
.pp-status{order:2;margin:0;font:700 15px/1.4 var(--nian)}
.pp-status:empty{display:none}
.pp-status a{text-decoration:underline;text-underline-offset:4px}
.pp-note{margin:0;max-width:34em;font:400 14px/1.5 var(--nian);color:rgb(var(--th-fg-rgb) / .78)}
.pp-go{display:inline-flex;align-items:center;gap:8px}
/* desktop: stepper and button share one row, the amount label is only for screen readers */
@media (min-width:900px){
  .pp-amt{grid-column:1;display:block}
  .pp-amt .pp-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pp-bar{grid-column:2;grid-row:auto}
  .pp-bar .pp-cta{min-height:44px}
}

/* 4. phones and small tablets: the action sits in a bar at the bottom of the screen (button + what is chosen) ----------------------------- */
@media (max-width:899px){
  .pp-hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "art" "buy"}
  .pp-art{justify-self:center;max-width:min(100%,420px);aspect-ratio:1 / 1.02}
  .pp-buy{max-width:none;gap:20px}
  .pp-opt span{min-height:36px;font-size:14px}
  .pp-step{height:36px}
  .pp-step button{width:36px;font-size:18px}
  .pp-step output{min-width:36px;font-size:15px}
  .pp-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;grid-template-columns:minmax(172px,50%) minmax(0,1fr);align-items:center;gap:6px 16px;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));background:var(--th-bg);color:var(--th-fg);border-top:1px solid var(--th-hl);transition:translate .35s ease}
  .pp-bar.is-off{translate:0 105%}
  .pp-status{grid-column:1 / -1;order:0;font-size:14px}
  .pp-status a{color:var(--th-hl)}
  .pp-sum{display:grid;gap:2px;min-width:0;order:2;font:700 15px/1.3 var(--nian)}
  .pp-sum-a{font-weight:400;font-size:13px;color:rgb(var(--th-fg-rgb) / .78)}
  .pp-sum-p{overflow-wrap:anywhere;font-size:14px}
  .pp-bar .pp-cta{order:1;min-height:44px;padding:0 12px;font-size:13px;gap:8px}
  .pp-l{font-size:11px}
  .pp-bar :focus-visible{outline-color:var(--th-fg)}
  .pp-more{padding-bottom:calc(var(--sec) + 88px)}
}

@media (max-width:599px){.pp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.pp-opt span{min-width:0;padding:0 6px;text-align:center}}

/* 5. at a glance: a quiet table, one row per fact (icon + label | value), hairlines between the rows -------------------------------------------- */
.pp-spec{background:var(--th-bg);color:var(--th-fg);padding:var(--sec) var(--inset) 0;--focus:var(--th-fg)}
.pp-tag{display:flex;align-items:center;gap:12px;margin:0 0 clamp(16px,2vw,24px);font:400 clamp(14px,1.3vw,17px)/1 var(--mc);letter-spacing:.06em;text-transform:uppercase}
.pp-tag:before{content:"";flex:none;width:.8em;height:.8em;background:var(--th-hl)}
.pp-dl{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-bottom:1px solid rgb(var(--th-fg-rgb) / .22)}
.pp-dl>div{display:grid;grid-template-columns:minmax(110px,36%) minmax(0,1fr);align-items:baseline;column-gap:16px;min-width:0;padding:14px 0;border-top:1px solid rgb(var(--th-fg-rgb) / .22)}
.pp-dl dt{display:flex;align-items:center;gap:8px;font:400 13px/1.3 var(--mc);letter-spacing:.06em;text-transform:uppercase;color:var(--th-hl)}
.pp-dl dt span{min-width:0}
.pp-ic{flex:none;align-self:center;width:16px;height:16px;color:var(--th-hl)}
.pp-dl dd{margin:0;font:700 16px/1.5 var(--nian);overflow-wrap:anywhere;text-align:start}
.pp-dl .pp-v{display:inline;unicode-bidi:isolate}
.pp-dl .pp-v.is-lat{white-space:nowrap}
.pp-sep{font-weight:400;opacity:.6;white-space:pre}
/* tablets: two columns of rows */
@media (min-width:700px) and (max-width:1099px){
  .pp-dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .pp-dl>div{grid-template-columns:minmax(96px,38%) minmax(0,1fr)}
}
@media (max-width:699px){.pp-spec{padding-top:32px}.pp-dl dt{font-size:11px}}

/* 6. story: comfortable measure and line height, the whole text always ------------------------------------------------------------------------- */
.pp-story{background:var(--th-bg);color:var(--th-fg);padding:var(--sec) var(--inset);--focus:var(--th-fg)}
.pp-story-p{margin:0;max-width:38em;font:400 clamp(16px,1.35vw,18px)/1.7 var(--nian);color:var(--th-fg)}
.pp-story-p+.pp-story-p{margin-top:1.1em}
.pp-read{display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:16px;padding-bottom:3px;border-bottom:1px solid var(--th-hl);color:var(--th-fg);font:400 14px/1 var(--mc);letter-spacing:.05em;text-transform:uppercase}
/* desktop: the facts beside the story */
@media (min-width:1100px){
  .pp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .pp-hero{grid-column:1 / -1}
  .pp-spec{padding-inline-end:clamp(32px,4vw,72px)}
  .pp-story{padding-top:var(--sec)}
  .pp-spec,.pp-story{padding-inline-start:0;padding-inline-end:0}
  .pp-spec{padding-inline-start:var(--inset);padding-inline-end:clamp(32px,4vw,72px)}
  .pp-story{padding-inline-end:var(--inset)}
  .pp-dl>div{grid-template-columns:190px minmax(0,1fr)}
}
@media (max-width:1099px){.pp-story{padding-top:32px}}

/* 7. more coffees: the card pattern of the listing pages (coloured panel, pouch, name, line, link) ----------------------------------------------- */
.pp-more{background:var(--th-bg);color:var(--th-fg);padding:var(--sec) var(--inset);border-top:1px solid var(--th-hl);--focus:var(--th-fg)}
.pp-more-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(20px,3vw,40px)}
.pp-h2{margin:0;font:400 clamp(21px,2.9vw,45px)/1.02 var(--mc);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere}
.pp-all{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding-bottom:3px;border-bottom:1px solid var(--th-hl);font:400 clamp(14px,1.25vw,18px)/1 var(--mc);letter-spacing:.05em;text-transform:uppercase}
.pp-all:hover .ls-ar{translate:5px 0}
html[dir=rtl] .pp-all:hover .ls-ar{translate:-5px 0}
.rc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.rc{--focus:var(--th-fg);position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(14px,1.6vw,22px);min-width:0;padding:clamp(18px,1.9vw,28px);border:1px solid var(--th-hl);background:var(--th-bg);color:var(--th-fg)}
.rc-pic{position:relative;display:flex;justify-content:center;align-items:flex-end;height:clamp(220px,20vw,300px)}
.rc-pic img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.rc:hover .rc-pic img{translate:0 -8px}
.rc-sold{position:absolute;top:0;inset-inline-start:0;padding:6px 9px 4px;border:1px solid var(--th-hl);background:var(--th-bg);color:var(--th-fg);font:400 12px/1 var(--mc);letter-spacing:.08em;text-transform:uppercase}
.rc-name{font:400 clamp(30px,3.2vw,50px)/1 var(--mc);letter-spacing:.005em;text-transform:uppercase;overflow-wrap:anywhere}
.rc-name.is-long{font-size:clamp(24px,2.5vw,38px);line-height:1.05}
.rc-sub{margin-top:8px;font:700 clamp(14px,1.15vw,17px)/1.2 var(--nian);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
.rc-foot{display:flex;align-items:center;padding-top:10px;border-top:1px solid var(--th-hl)}
.rc-go{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:400 clamp(14px,1.15vw,17px)/1 var(--mc);letter-spacing:.05em;text-transform:uppercase}
.rc-go:after{content:"";position:absolute;inset:0;z-index:1}
.rc-go:focus-visible{outline:0}
.rc:has(.rc-go:focus-visible){outline:3px solid var(--th-fg);outline-offset:4px}
.rc:hover{border-color:var(--th-fg)}
.rc:hover .ls-ar{translate:5px 0}
html[dir=rtl] .rc:hover .ls-ar{translate:-5px 0}
/* a blend page lists the four other blends */
.rc-grid.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1099px){.rc-grid.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){
  .rc-grid,.rc-grid.is-4{grid-template-columns:minmax(0,1fr);gap:12px}
  .rc{grid-template-columns:minmax(96px,34%) minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;row-gap:14px;padding:18px}
  .rc-pic{height:auto;align-items:center}
  .rc-pic img{height:auto;width:100%;max-height:220px}
  .rc-txt{align-self:center}
  .rc-name{font-size:clamp(30px,9vw,42px)}
  .rc-name.is-long{font-size:clamp(15px,4.6vw,22px)}
  .rc-foot{grid-column:1 / -1}
}

/* 8. states ------------------------------------------------------------------------------------------------------------------------------------ */
.pp-missing{min-height:50vh;display:grid;align-content:center;justify-items:start;gap:16px;padding:var(--sec) var(--inset);background:var(--th-bg);color:var(--th-fg)}
.pp-missing p{margin:0;font:400 clamp(16px,2vw,24px)/1.28 var(--nian)}
.pp-missing a{text-decoration:underline;text-underline-offset:5px}
.pp-nojs{padding:var(--sec) var(--inset);background:var(--th-bg);color:var(--th-fg)}
.pp-nojs a{text-decoration:underline}

/* 9. Persian: the pixel face has no Persian letters, labels and buttons use Nian Black, no letter-spacing; names stay pixel ---------------------------- */
html[lang=fa] :is(.pp-kicker,.pp-l,.pp-price,.pp-cta,.pp-tag,.pp-dl dt,.pp-read,.pp-all,.rc-go,.rc-sold){font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none}
html[lang=fa] .pp-ratio{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none;line-height:1.6}
html[lang=fa] .pp-kicker{font-size:15px}
html[lang=fa] .pp-l{font-size:14px}
html[lang=fa] .pp-dl dt{font-size:14px}
html[lang=fa] .pp-cta{font-size:15px}
html[lang=fa] .pp-price{font-size:clamp(24px,2.4vw,34px)}
html[lang=fa] .pp-tag{font-size:clamp(15px,1.3vw,18px)}
html[lang=fa] .pp-h2{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none;line-height:1.3;font-size:clamp(20px,2.7vw,39px)}
html[lang=fa] .rc-sub{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none;line-height:1.6}
html[lang=fa] .pp-story-p{line-height:2}
html[lang=fa] .pp-dl dd{line-height:1.7}
html[lang=fa] .pp-note,html[lang=fa] .pp-status{line-height:1.7}
html[lang=fa] .pp-crumb ol{font-size:15px}
html[dir=rtl] .pp-read .ls-ar,html[dir=rtl] .pp-all .ls-ar,html[dir=rtl] .rc-go .ls-ar{scale:-1 1}

/* 10. motion: only time based; reduced motion switches everything off (listing.css) --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){.pp-art img{animation:none}.pp-bar{transition:none}.pp-tri{transition:none}}
@media print{.pp-bar{display:none}}

@media (max-width:899px){html[lang=fa] .pp-cta{font-size:14px}html[lang=fa] .pp-l,html[lang=fa] .pp-dl dt{font-size:14px}}
/* "more coffees" under a product: small colour tiles in one swipe row (phones and tablets); the desktop keeps its grid */
.rc-coral{--c:var(--coral);--ink:#000}.rc-mint{--c:var(--mint);--ink:#000}.rc-green{--c:var(--green);--ink:var(--cream)}.rc-cream{--c:var(--cream);--ink:var(--green)}
@media (max-width:1099px){
  .rc-grid,.rc-grid.is-4{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rc-grid{margin-inline:calc(var(--inset) * -1);padding-inline:var(--inset);scroll-padding-inline:var(--inset)}
  .rc-grid::-webkit-scrollbar{display:none}
  .rc{flex:0 0 calc((100% - 20px) / 2.6);scroll-snap-align:start;container-type:inline-size;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:8px;padding:10px;border:0;background:var(--c,var(--th-bg));color:var(--ink,var(--th-fg))}
  .rc:hover{border-color:transparent}
  .rc-pic{height:96px;align-items:center}
  .rc-pic img{height:100%;width:auto;max-height:none}
  .rc-txt{align-self:end}
  .rc-name,.rc-name.is-long{font-size:min(18px,11cqw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
  .rc-sub{margin-top:3px;font-size:12px;line-height:1.2}
  .rc-foot{grid-column:auto;border:0;padding:0;min-height:0}
  .rc-go{position:static;min-height:0;font-size:0;gap:0}
  .rc-go>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rc-go .ls-ar{display:none}
}
@media (max-width:599px){.rc{flex-basis:calc((100% - 10px) / 2.3)}}


/* grind choice: each option is a tile, the brewing-method icon above its name (3 x 2 on phones, one row from 700 px) */
#pp-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#pp-g .pp-opt span{flex-direction:column;gap:6px;min-height:76px;padding:10px 6px;text-align:center;line-height:1.2}
#pp-g .pp-gi{width:30px;height:30px;flex:none}
@media (min-width:700px){#pp-g{grid-template-columns:repeat(6,minmax(0,1fr))}}