/* ==========================================================================
   Dāstān SPECIALTY product page (/specialty-product?c=<id>): the shared product layout is product.css; this file only adds what a coffee needs on top of it:
   the tasting-note chips under the name, the sold-out state, the page-switch canvas of specialty-ui.js. Behaviour: specialty-product.js.
   ========================================================================== */
.pp-notes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:clamp(14px,1.4vw,20px) 0 0;padding:0}
.pp-notes li{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid var(--th-hl);font:700 14px/1.2 var(--nian);direction:ltr;unicode-bidi:isolate}
.pp-notes li.is-fa{direction:rtl;font-weight:900}
.pp-notes li:before{content:"";flex:none;width:6px;height:6px;background:var(--coral)}
html[data-theme=light] .pp-notes li:before{background:var(--th-hl)}
.pp-page.is-sold .pp-opts,.pp-page.is-sold .pp-step{opacity:.55}
.pp-ratio .sep{padding-inline:.4em;opacity:.6}
.pp-ratio .lat{direction:ltr;unicode-bidi:isolate}
/* specialty-ui.js draws its own square-by-square cover for the BLEND | SPECIALTY switch */
.sp-px-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:310;pointer-events:none}
.sp-foot .ls-links a:not(.soc),.sp-foot .legal{color:var(--th-fg)}
@media print{.sp-px-canvas{display:none!important}}