/* ==========================================================================
   Dāstān SPECIALTY page (/specialty): the pixel map with its country tags, then the country filter, a grid of coffee cards per country and a coming-soon row.
   Loaded after chrome.css and listing.css (tokens, hero, bands, footer). Hand-maintained and fluid; behaviour in specialty.js, the coffees come from specialty-data.js.
   The Specialty PRODUCT page still uses specialty.css (the old artboard layout), not this file.
   Sections: 1 hero + tap button, 2 map, 3 map states (tour, selection, tip, route), 4 filter + 5 country groups with coffee cards + coming soon, 6 phones, 7 Persian.
   ========================================================================== */

/* 1. hero: switch, title, lead, the "Tap to discover" tour control and the Dāstān seal (logo + turning ring text, a quiet decoration beside the text, never on the map) ---- */
.sp-hero{position:relative;padding-bottom:clamp(24px,3.4vw,48px)}
.sp-hero .pgsw{margin-bottom:clamp(28px,3.6vw,52px)}
.sp-hero .ls-lead{margin-top:clamp(14px,1.8vw,24px)}
.sp-tourrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(22px,2.6vw,36px)}
.sp-discover{display:inline-flex;align-items:stretch;min-height:56px;border:2px solid var(--cream);color:var(--cream);font:400 clamp(13px,1.25vw,17px)/1 var(--mc);letter-spacing:.07em;text-transform:uppercase;text-align:start;transition:background-color .2s,color .2s}
.sp-go-ic{display:grid;place-items:center;flex:none;width:52px;background:var(--coral);color:#000;border-inline-end:2px solid var(--cream);transition:background-color .2s}
.sp-go-ic svg{width:22px;height:22px;fill:currentColor;shape-rendering:crispEdges;overflow:visible}
.sp-go-ic .ic-stop{display:none}
html[dir=rtl] .sp-go-ic .ic-play{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
.sp-discover.is-live .ic-play{display:none}
.sp-discover.is-live .ic-stop{display:block}
.sp-discover.is-live .sp-go-ic{background:var(--mint)}
.sp-discover.is-live .sp-go-ic svg{animation:sp-beat 1.2s ease-in-out infinite}
@keyframes sp-beat{50%{scale:1.18}}
.sp-go-t{display:flex;align-items:center;padding:.1em 18px 0;white-space:nowrap}
.sp-meter{display:flex;align-items:center;gap:4px;padding-inline-end:16px}
.sp-meter i{display:block;width:8px;height:8px;border:2px solid rgba(255,240,225,.5);transition:background-color .2s,border-color .2s}
.sp-meter i.is-on{background:var(--mint);border-color:var(--mint)}
.sp-discover:hover,.sp-discover:focus-visible{background:var(--cream);color:#000}
.sp-discover:hover .sp-go-ic,.sp-discover:focus-visible .sp-go-ic{border-color:#000}
.sp-discover:hover .sp-meter i,.sp-discover:focus-visible .sp-meter i{border-color:rgba(0,0,0,.5)}
.sp-discover:hover .sp-meter i.is-on,.sp-discover:focus-visible .sp-meter i.is-on{background:var(--green);border-color:var(--green)}
.sp-seal{position:absolute;z-index:3;left:77%;top:27%;translate:-50% -50%;direction:ltr;width:clamp(60px,10cqw,132px);height:auto;overflow:visible;pointer-events:none}
@media (max-width:480px){.sp-meter{display:none}.sp-go-t{padding-inline:14px}.sp-go-ic{width:48px}}

/* 2. map: the artwork lives in design coordinates (viewBox 1921 x 1001), everything scales with the width of .sp-stage. Wide maps carry the country tags on the map (percent
      positions); narrow maps (container < 720px) drop the tags and lead lines and show the same buttons as a two-column legend under the map. */
.sp-mapsec{background:var(--th-bg);padding:0 clamp(0px,2vw,32px) clamp(16px,2.4vw,40px)}
.sp-map{position:relative;width:100%;max-width:1680px;margin:0 auto;container-type:inline-size;direction:ltr}
.sp-stage{position:relative;aspect-ratio:1921 / 1001}
.sp-map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-c{cursor:pointer}
.px{animation:sp-px 1000ms ease-out var(--d) backwards}
.cpx{animation:sp-px 1000ms ease-out var(--d) backwards,sp-flip 2200ms ease-in-out calc(var(--d) + 2000ms)}
@keyframes sp-px{0%{opacity:0;fill:var(--mint)}38%{opacity:1;fill:var(--mint)}100%{opacity:1;fill:var(--green)}}
@keyframes sp-flip{0%,100%{fill:var(--green)}25%,70%{fill:var(--mint)}}
.sp-dot{--ds:1;transform-box:fill-box;transform-origin:center;transform:scale(var(--ds));animation:sp-pop 520ms cubic-bezier(.3,1.6,.5,1) calc(1900ms + var(--cd,0ms)) backwards;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes sp-pop{from{transform:scale(0);opacity:0}to{transform:scale(var(--ds));opacity:1}}
.sp-pulse{fill:none;stroke:var(--cream);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;animation:sp-pulse 2000ms ease-out calc(2600ms + var(--cd,0ms)) 3}
.sp-c-coral .sp-pulse{stroke:var(--coral)}
.sp-c-mint .sp-pulse{stroke:var(--mint)}
@keyframes sp-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.7)}}
.sp-lead-line{stroke-dasharray:1;animation:sp-draw 800ms ease-out calc(2100ms + var(--cd,0ms)) backwards}
@keyframes sp-draw{from{stroke-dashoffset:var(--o,1)}to{stroke-dashoffset:0}}
.sp-ring-spin{animation:sp-spin 40s linear 2s infinite;transform-origin:1525.46px 994.92px}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.rg{font-family:Ubuntu,var(--nf,Nian),Nian,Arial,sans-serif;font-weight:500;fill:var(--mint);text-rendering:geometricPrecision}
@keyframes sp-fadein{from{opacity:0}to{opacity:1}}
/* the opening animation is over (set by specialty.js): the resting map is the artwork itself */
.sp-map.is-ready .px,.sp-map.is-ready .sp-dot,.sp-map.is-ready .sp-pulse,.sp-map.is-ready .sp-tag{animation:none}
.sp-map.is-ready .sp-lead-line{animation:none;stroke-dasharray:none}
/* tags: flat coloured squares with the country name; they sit where the artwork's lead lines end */
.sp-tags{position:absolute;left:0;top:0;width:100%;aspect-ratio:1921 / 1001;pointer-events:none}
.sp-legend{display:none}
.sp-tag{--ts:1;--ty:0px;--o:50% 100%;position:absolute;z-index:2;pointer-events:auto;left:calc(var(--x) / 1921 * 100%);top:calc(var(--y) / 1001 * 100%);width:calc(var(--w) / 1921 * 100%);height:calc(var(--h) / 1001 * 100%);
  display:grid;place-items:center;padding:0;background:var(--c);color:var(--green);font:400 1.22cqw/1 var(--mc);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  transform-origin:var(--o);transform:translateY(var(--ty)) scale(var(--ts));transition:background-color .2s,opacity .4s;animation:sp-fadein 420ms ease-out calc(2800ms + var(--cd,0ms)) backwards}
.sp-tag-coral{--c:var(--coral)}.sp-tag-mint{--c:var(--mint)}
/* the scale origin is the point where the lead line meets the tag, so the line stays attached when the tag grows */
.sp-tag[data-c=colombia]{--o:100% 50%}
.sp-tag[data-c=brazil],.sp-tag[data-c=ethiopia],.sp-tag[data-c=kenya]{--o:0 50%}
.sp-tag[data-c=guatemala]{--o:88.7% 100%}
.sp-tag:hover,.sp-tag:focus-visible,.sp-tag.lit{background:var(--cream)}
.sp-tag:focus-visible{outline:3px solid var(--th-ring);outline-offset:3px}
/* the country the list below is filtered to: a small cream pixel on the corner */
.sp-tag[aria-pressed=true]:after{content:"";position:absolute;top:-4px;inset-inline-end:-4px;width:8px;height:8px;background:var(--th-fg)}
.sp-off{cursor:default}
.sp-tag.sp-off,.sp-c.sp-off{pointer-events:none}
/* dots, lead lines and pulses are in artwork units, so they get a little heavier as the map gets smaller */
@container (max-width:1000px){.sp-lead-line,.sp-dot-ring{stroke-width:3}.sp-dot{--ds:1.4}.sp-pulse{stroke-width:3}.sp-tag{--ts:1.3}}
/* the origin picker (phones): one box with the chosen origin; opened, a cream panel lists the origins */
.sp-pick{display:none}
@container (max-width:719px){
  .sp-dot-ring{stroke-width:5}.sp-dot{--ds:2.3}.sp-pulse{stroke-width:5}
  .sp-tag{--ts:1.22}
  .sp-pick{display:block;position:relative;padding:12px var(--gut) 0}
}
@container (max-width:480px){
  .sp-tag{--ts:1.42}
}
/* the origin picker (phones): one box with the chosen origin; opened, a cream panel lists the origins */
.sp-pick-cap{margin-bottom:6px;font:400 12px/1 var(--mc);letter-spacing:.1em;text-transform:uppercase;color:var(--th-hl2)}
.sp-pick-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:0 14px;background:var(--coral);color:#000;font:400 14px/1.1 var(--mc);letter-spacing:.05em;text-transform:uppercase;text-align:start}
.sp-pick-btn:focus-visible{outline:3px solid var(--th-ring);outline-offset:3px}
.sp-pick-ic{flex:none;width:12px;height:8px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%);transition:rotate .2s}
.sp-pick.is-open .sp-pick-ic{rotate:180deg}
.sp-pick-panel{position:absolute;z-index:8;inset-inline:var(--gut);top:100%;margin-top:4px;max-height:min(60vh,420px);overflow:auto;background:var(--cream);border:2px solid #000;box-shadow:0 0 0 2px var(--cream)}
.sp-pick-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;color:var(--green);font:400 15px/1.1 var(--mc);letter-spacing:.05em;text-transform:uppercase;text-align:start;border-top:1px solid rgba(40,87,70,.25)}
.sp-pick-opt:first-child{border-top:0}
.sp-pick-opt:before{content:"";flex:none;width:8px;height:8px;background:transparent}
.sp-pick-opt.is-cur{background:var(--coral);color:#000}
.sp-pick-opt.is-cur:before{background:#000}
.sp-pick-opt:hover,.sp-pick-opt:focus-visible{background:var(--green);color:var(--cream)}
.sp-pick-opt:focus-visible{outline:3px solid #000;outline-offset:-3px}
html[lang=fa] .sp-pick-cap,html[lang=fa] .sp-pick-btn,html[lang=fa] .sp-pick-opt{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none}
html[lang=fa] .sp-pick-btn{font-size:15px;font-weight:700}html[lang=fa] .sp-pick-opt{font-size:17px}html[lang=fa] .sp-pick-cap{font-size:14px}
html[dir=rtl] .sp-pick{direction:rtl}

/* 3. map states: tour, selection, tip, route ------------------------------------------------------------------------ */
.sp-c.lit .sp-dot,.sp-c.on .sp-dot{transform:scale(calc(var(--ds) * 1.45))}
.sp-c.lit .sp-pulse,.sp-c.on .sp-pulse{animation:sp-pulse 1200ms ease-out infinite;stroke-width:2.4}
.sp-c.on .sp-dot-ring,.sp-c.lit .sp-dot-ring{stroke:var(--coral)}
.px.lit{fill:var(--mint)!important}
.px.on{fill:var(--coral)!important}
.sp-map.is-select .px,.sp-map.is-select .sp-c,.sp-map.is-select .sp-tag{transition:opacity .4s ease,fill .4s ease,background-color .2s}
.sp-map.is-select .px:not(.on),.sp-map.is-select .sp-c:not(.on),.sp-map.is-select .sp-tag:not(.on){opacity:.3}
.sp-tag.on{background:var(--cream)}
.sp-tip{position:absolute;z-index:6;transform:translate(14px,-50%);display:grid;gap:4px;padding:10px 14px;background:var(--cream);color:var(--green);font:700 clamp(12px,1.05cqw,16px)/1.2 var(--nian);text-transform:uppercase;pointer-events:none;white-space:nowrap;direction:ltr}
.sp-tip b{font:400 clamp(13px,1.3cqw,19px)/1.1 var(--mc);letter-spacing:.03em}
.sp-tip.is-left{transform:translate(calc(-100% - 14px),-50%)}
.sp-tip.is-in{animation:sp-fadein .25s ease-out}
.sp-route-dot{fill:var(--cream);animation:sp-fadein .3s ease-out backwards}
.sp-bean{pointer-events:none}


/* 4 + 5. country filter, then one section per country with a grid of coffee cards (like the home page cards), then a tidy "coming soon" row -------------- */
.sp-list{background:var(--th-bg);padding:clamp(20px,3vw,40px) var(--inset) var(--sec);scroll-margin-top:8px}
.sp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-bottom:clamp(14px,1.8vw,22px);border-bottom:2px solid rgb(var(--th-fg-rgb) / .28)}
.sp-showing{display:flex;align-items:center;gap:12px;min-height:44px;font:400 clamp(13px,1.2vw,16px)/1.2 var(--mc);letter-spacing:.07em;text-transform:uppercase;color:var(--th-hl2)}
.sp-showing:before{content:"";flex:none;width:10px;height:10px;background:var(--mint)}
.sp-reset{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:2px solid var(--th-fg);color:var(--th-fg);font:400 13px/1 var(--mc);letter-spacing:.07em;text-transform:uppercase;transition:background-color .2s,color .2s}
.sp-reset:before{content:"";width:10px;height:10px;background:linear-gradient(45deg,transparent 40%,currentColor 40% 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,currentColor 40% 60%,transparent 60%)}
.sp-reset:hover,.sp-reset:focus-visible{background:var(--th-inv-bg);color:var(--th-inv-fg)}
.sp-groups{display:grid;gap:clamp(36px,5vw,72px);margin-top:clamp(24px,3vw,44px)}
.sp-group{scroll-margin-top:12px}
.sp-gh{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2vw,24px);font:400 clamp(20px,2.5vw,36px)/1 var(--mc);letter-spacing:.005em;color:var(--th-fg);text-transform:uppercase;overflow-wrap:anywhere}
.sp-gh:before{content:"";flex:none;width:.45em;height:.45em;background:var(--coral)}
.sp-g-mint .sp-gh:before{background:var(--mint)}
.sp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.sp-card{--c:var(--coral);--ink:#000;--focus:#000;position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(12px,1.4vw,18px);min-width:0;padding:clamp(18px,1.9vw,28px);background:var(--c);color:var(--ink)}
.sp-mint{--c:var(--mint)}
.sp-cream{--c:var(--cream);--ink:var(--green);--focus:var(--green)}
.sp-g-cream .sp-gh:before{background:var(--th-fg)}
.sp-pic{position:relative;display:flex;justify-content:center;align-items:flex-end;height:clamp(220px,19vw,290px)}
.sp-pouch{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.sp-card:hover .sp-pouch{translate:0 -8px}
.sp-sold{white-space:nowrap;position:absolute;top:0;inset-inline-start:0;padding:7px 10px 5px;background:#000;color:var(--cream);font:400 12px/1 var(--mc);letter-spacing:.08em;text-transform:uppercase}
.sp-name{font:400 clamp(22px,2.2vw,34px)/1.05 var(--mc);letter-spacing:.005em;text-transform:uppercase;overflow-wrap:normal}
.sp-country{margin-top:6px;font:700 clamp(14px,1.15vw,17px)/1.2 var(--nian);letter-spacing:.03em;text-transform:uppercase}
.sp-ident{display:grid;align-content:start;margin:0;font:400 clamp(13px,1.1vw,15px)/1.3 var(--nian)}
.sp-kv{display:grid;grid-template-columns:minmax(5.6em,32%) minmax(0,1fr);gap:.6em;padding:7px 0;border-top:1px solid rgba(0,0,0,.28)}
.sp-kv dt{font-weight:700}
.sp-kv dd{margin:0;min-width:0;direction:ltr;text-align:left;unicode-bidi:isolate;overflow-wrap:anywhere}
.sp-card .sp-foot{display:flex;align-items:center}
/* the page footer (ls-foot sp-foot) sits on black here: its links and credit are cream, the icons stay green on the mint art */
.ls-foot.sp-foot .ls-links a:not(.soc),.ls-foot.sp-foot .legal{color:var(--th-fg)}
.sp-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}
.sp-go:after{content:"";position:absolute;inset:0;z-index:1}
.sp-go:focus-visible{outline:0}
.sp-card:has(.sp-go:focus-visible){outline:3px solid var(--th-ring);outline-offset:4px}
.sp-card:hover .ls-ar{translate:5px 0}
html[dir=rtl] .sp-card:hover .ls-ar{translate:-5px 0}
html[dir=rtl] .sp-card .sp-foot{justify-content:flex-end}
.sp-soonrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(36px,5vw,72px);padding-top:clamp(18px,2vw,26px);border-top:2px solid rgb(var(--th-fg-rgb) / .28)}
.sp-soonlab{font:400 clamp(14px,1.25vw,18px)/1 var(--mc);letter-spacing:.06em;color:var(--th-hl2);text-transform:uppercase}
.sp-soonlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.sp-soonchip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:2px dashed rgb(var(--th-fg-rgb) / .5);color:rgb(var(--th-fg-rgb) / .85);font:400 13px/1 var(--mc);letter-spacing:.06em;text-transform:uppercase}
/* every origin is one row you page through: 3 cards on desktop, 2 below 1100 px; the arrows page it (they show when the row has more cards than fit) */
.sp-group,.sp-groups,.sp-list{min-width:0;max-width:100%}
.sp-grid{--n:3;min-width:0;max-width:100%;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-grid::-webkit-scrollbar{display:none}
.sp-grid>.sp-card{flex:0 0 calc((100% - (var(--n) - 1) * clamp(12px,1.6vw,24px)) / var(--n));scroll-snap-align:start}
@media (max-width:1099px){.sp-grid{--n:2}}


/* 7. Persian: the country names are translated (Nian Black); coffee names and the Latin data values keep the pixel / Latin faces ------------------------ */
html[lang=fa] .sp-tag,html[lang=fa] .sp-showing,html[lang=fa] .sp-reset,html[lang=fa] .sp-legend,html[lang=fa] .sp-discover,html[lang=fa] .sp-soonlab,html[lang=fa] .sp-soonchip,html[lang=fa] .sp-go,html[lang=fa] .sp-country,html[lang=fa] .sp-gh,html[lang=fa] .sp-sold{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none}
html[lang=fa] .sp-tag{font-size:1.38cqw}
html[lang=fa] .sp-showing,html[lang=fa] .sp-reset{font-size:16px}
html[lang=fa] .sp-discover{font-size:clamp(15px,1.4vw,19px)}
html[lang=fa] .sp-tip b{font-family:var(--nian);font-weight:900;letter-spacing:0}
html[lang=fa] .sp-tip{text-transform:none}
html[lang=fa] .sp-kv dt{letter-spacing:0}
html[dir=rtl] .sp-kv dd{text-align:right}
html[dir=rtl] .sp-kv dd.is-fa{direction:rtl}
html[lang=fa] .sp-ident{line-height:1.4}
html[lang=fa] .sp-name{font-family:var(--mc)}
/* the pixel name is Latin, isolated left-to-right, but sits on the reading edge of a Persian card like every other line */
html[dir=rtl] .sp-name{text-align:right;unicode-bidi:isolate}

/* lowest (80 g) price on a card; rendered only when the coffee has prices in its data */
.sp-price{flex:1;margin-inline-end:12px;font:400 clamp(14px,1.15vw,17px)/1.2 var(--mc);letter-spacing:.03em;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
html[lang=fa] .sp-price{font-family:var(--nian);font-weight:900;letter-spacing:0}

.sp-price{display:flex;flex-direction:column;gap:2px;direction:inherit;align-items:flex-start}
.sp-pw{font-size:.82em;opacity:.8}
.sp-pp{white-space:nowrap}
/* the price slot keeps its height when a coffee has no price (unavailable), so cards align in rows; the English name is always left-aligned */
.sp-price{min-height:2.7em}
.sp-name{direction:ltr;text-align:left}

/* the origin chips are a phone control only */
.sp-chips{display:none}

/* 6. phones (< 600 px): ONE continuous two-column grid of equal compact cards; an origin filter (chips with counts) replaces the picker.
   Why not a row per origin: with 12 coffees now and 30+ later, a half-width row per origin leaves single-card origins half empty and hides most of the range
   behind horizontal swipes. One grid shows everything by scrolling one way; the card colour (coral / mint / cream) still tells the origins apart.
   To go back to per-origin swipe rows, delete this block and restore the old one from git (the markup is unchanged: one <section> per origin holding one <ul>). */
@media (max-width:719px){.sp-bar{display:none}}
@media (max-width:599px){
  .sp-hero{padding-bottom:18px}
  .sp-hero .pgsw{margin-bottom:16px}
  .sp-hero .ls-lead{margin-top:8px;font-size:14px;line-height:1.28}
  .sp-tourrow{margin-top:14px}
  .sp-mapsec{padding-inline:0;padding-bottom:4px}
  .sp-chips{display:none}
  .sp-list{padding-top:14px;padding-bottom:28px}
  .sp-groups{gap:22px;margin-top:0}
  /* every origin: its heading, then a row that always shows TWO cards and swipes sideways for the rest (no arrows) */
  .sp-gh{gap:10px;margin-bottom:10px;font-size:17px}
  .sp-grid{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:0;padding-inline:0}
  .sp-grid::-webkit-scrollbar{display:none}
  .sp-grid>.sp-card{flex:0 0 calc((100% - 10px) / 2);scroll-snap-align:start}
  .sp-card{container-type:inline-size;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:10px;padding:12px}
  .sp-pic{height:132px;align-items:center}
  .sp-pouch{height:100%;width:auto}
  .sp-ident{display:none}
  .sp-head{align-self:end}
  .sp-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:min(20px,11.2cqw);line-height:1.1}
  .sp-country{margin-top:3px;font-size:13px}
  .sp-card .sp-foot{align-self:end;display:grid;gap:2px;justify-items:start;justify-content:stretch}
  html[dir=rtl] .sp-card .sp-foot{justify-content:stretch}
  .sp-price{margin:0;font-size:13px;min-height:2.5em;direction:inherit}
  .sp-go{min-height:44px;font-size:13px;gap:8px}
  .sp-soonrow{margin-top:20px;padding-top:14px}
}
html[lang=fa] .sp-chip{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none;font-size:14px}
/* phone card: the English name stays on the left; every Persian line (country, weight, price, link) is right-aligned, in one column */
@media (max-width:599px){
  html[lang=fa] .sp-card,html[lang=fa] .sp-head,html[lang=fa] .sp-card .sp-foot{direction:rtl;text-align:right}
  html[lang=fa] .sp-head,html[lang=fa] .sp-card .sp-foot{justify-items:start;justify-content:start}
  html[lang=fa] .sp-name{direction:ltr;text-align:right;width:100%}
  html[lang=fa] .sp-country,html[lang=fa] .sp-pw,html[lang=fa] .sp-pp,html[lang=fa] .sp-go{direction:rtl;text-align:right}
  html[lang=fa] .sp-price{align-items:flex-start;text-align:right}
  html[lang=fa] .sp-go{justify-self:end}
  .sp-go{justify-self:end}
}
/* phone: the desktop card look (pouch on top, then the name, the country, a short table, the price row) with less information: only region and process in the table */
@media (max-width:599px){
  .sp-card{padding:16px 14px;gap:12px;grid-template-rows:auto auto 1fr auto}
  .sp-pic{height:150px}
  .sp-ident{display:grid;font-size:12.5px;line-height:1.4}
  .sp-ident .sp-kv{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:6px;padding:6px 0}
  .sp-ident .sp-kv:has(dd:not([data-k=region]):not([data-k=process])){display:none}
  .sp-ident .sp-kv dd{direction:rtl;text-align:right;unicode-bidi:plaintext}
  html[lang=en] .sp-ident .sp-kv dd{direction:ltr;text-align:left}
  .sp-card .sp-foot{border-top:0}
}
/* phone: only the name, the country, the weight and the price (and the link) */
@media (max-width:599px){.sp-ident{display:none}}

/* the short table of the phone card: country / weight / price. Not on wider screens (they have the long table). */
.sp-mini{display:none}
@media (max-width:599px){
  .sp-mini{display:grid;margin:0;font:400 12.5px/1.4 var(--nian)}
  .sp-mini .sp-kv{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:6px;padding:6px 0;border-top:1px solid rgba(0,0,0,.28)}
  .sp-mini dt{font-weight:700}
  .sp-mini dd{margin:0;direction:rtl;text-align:right;unicode-bidi:plaintext;white-space:nowrap}
  html[lang=en] .sp-mini dd{direction:ltr;text-align:left}
  .sp-mini .sp-kv:empty{display:none}
  .sp-mini dd:empty{min-height:1.4em}
  .sp-country,.sp-card .sp-price{display:none}
  .sp-card{grid-template-rows:auto auto auto 1fr auto}
  .sp-card .sp-foot{align-self:end}
}
/* the black UNAVAILABLE tag is not shown on the card any more (the weight and price fields say it); it stays for screen readers */
.sp-sold{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* no 'tap to discover' button */
.sp-tourrow{display:none!important}
/* all origins shown: one swipe row per origin (2 cards on a phone). One origin picked: its coffees together in a wrapping grid (2 across on phones, 3 from 600 px, 4 from 1100 px) */
.sp-group.is-solo .sp-grid{--n:4;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));overflow:visible;scroll-snap-type:none;gap:clamp(10px,1.4vw,20px)}
.sp-group.is-solo .sp-grid>.sp-card{flex:none;width:auto}
@media (max-width:1099px){.sp-group.is-solo .sp-grid{--n:3}}
@media (max-width:599px){.sp-group.is-solo .sp-grid{--n:2;gap:10px}}
/* phone: shorter cards (smaller pouch, no empty stretch between the table and the link) */
@media (max-width:599px){
  .sp-card{grid-template-rows:auto auto auto auto;align-content:start;gap:10px;padding:12px}
  .sp-pic{height:118px}
  .sp-card .sp-foot{align-self:start}
  .sp-mini .sp-kv{padding:5px 0}
  .sp-go{min-height:40px}
}
/* phone: a row with more than two cards shows a sliver of the next card at the edge, so it is clear it moves on (no arrows, no dots); the cards keep a readable width */
@media (max-width:599px){
  .sp-group:not(.is-solo) .sp-grid:has(>.sp-card:nth-child(3)){margin-inline:calc(var(--inset,20px) * -1);max-width:none;padding-inline:var(--inset,20px);scroll-padding-inline:var(--inset,20px)}
  .sp-group:not(.is-solo) .sp-grid:has(>.sp-card:nth-child(3))>.sp-card{flex:0 0 calc((100% - 10px + 1px) / 2)}
}

/* LIGHT THEME (tokens: theme.css): green land, coral / mint tags with black type, the highlighted tag turns green (the seal sits on the green land and keeps its mint ring text) */
html[data-theme=light] .sp-tag{color:#000}
html[data-theme=light] .sp-tag:hover,html[data-theme=light] .sp-tag:focus-visible,html[data-theme=light] .sp-tag.lit,html[data-theme=light] .sp-tag.on{background:var(--green);color:var(--cream)}
html[data-theme=light] .sp-lead-line{stroke:var(--green)}
html[data-theme=light] .sp-dot-core{fill:#000}
html[data-theme=light] .sp-tip{background:var(--green);color:var(--cream)}
html[data-theme=light] .sp-route-dot{fill:#000}

/* the card's link sits at the END of the row (right in English, left in Persian), the way its arrow points */
.sp-go{margin-inline-start:auto}