/* ==========================================================================
   BESTEA — one product, one page.

   Loaded by everything under /shop and /ka/shop, always AFTER shop.css, which
   already carries the brand tokens, the fonts, the .btn base, the toast, the
   cart bar and the cart sheet. This file adds only what a product page needs
   that the cart chrome does not already provide: the page column, the photo,
   the buy box, the price ladder and the reading copy underneath it.

   The price ladder markup is deliberately identical to the home page's, class
   for class, because assets/cart.js reads a card rather than a product table —
   it finds .prod, the .pr rows inside it and the h3 that names the thing. Keep
   those names and add-to-cart works here for free.
   ========================================================================== */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;background:var(--forest-900)}
body{
  font-family:var(--font-body);color:var(--cream);background:var(--forest-900);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.55;overflow-x:hidden;overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--matcha);color:var(--forest-900)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;letter-spacing:-.015em;line-height:1.12}

/* the same fixed field and grain the shop and checkout sit on */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  background:radial-gradient(120% 90% at 50% -10%, #0f5c44 0%, #0a4636 42%, #063327 74%, #04241b 100%)}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

.device{position:relative;z-index:10;width:min(100%,var(--col));margin-inline:auto;min-height:100vh;
  padding-bottom:56px}
@media (min-width:900px){
  .device{box-shadow:0 0 0 1px rgba(255,243,193,.06), 0 50px 130px rgba(0,0,0,.55);
    background:linear-gradient(180deg, rgba(7,44,33,.5), rgba(5,36,27,.62))}
}
body.has-cart .device{padding-bottom:104px}

/* ------------------------------------------------------------- top bar --- */
.cbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  width:min(100%,var(--col));margin-inline:auto;
  height:60px;padding:0 clamp(13px,4vw,22px);
  background:rgba(5,36,27,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,243,193,.09);
}
.cbar-back{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--cream-2);
  padding:8px 12px 8px 8px;border-radius:var(--r-pill);transition:background .2s ease,color .2s ease}
.cbar-back:hover{background:rgba(255,255,255,.08);color:#fff}
.cbar-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
.cbar .sp{flex:1 1 auto}
.cbar-brand{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;color:var(--cream)}
.cbar-brand .petal{width:13px;height:13px;color:var(--matcha-bright);fill:currentColor}
.lang{display:inline-flex;align-items:center;padding:0;overflow:hidden;
  border-radius:var(--r-pill);border:1px solid rgba(255,243,193,.2);background:rgba(255,243,193,.1);
  font-family:var(--font-display);font-weight:600;font-size:.74rem;line-height:1}
.lang a{padding:5px 9px;color:rgba(246,236,196,.6);transition:color .2s ease, background .2s ease}
.lang a.on{color:var(--forest);background:var(--cream)}

/* --------------------------------------------------------- breadcrumbs --- */
/* Small, quiet, and genuinely useful: it is the only way back to the
   catalogue from a page someone landed on straight from Google. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:16px var(--pad) 0;font-size:.78rem;color:rgba(246,236,196,.5)}
.crumbs a{color:rgba(246,236,196,.72);text-decoration:underline;text-decoration-color:rgba(246,236,196,.22);
  text-underline-offset:3px}
.crumbs a:hover{color:var(--cream);text-decoration-color:rgba(246,236,196,.6)}
.crumbs span[aria-current]{color:rgba(246,236,196,.5)}

/* ----------------------------------------------------------- the product --- */
.prod{
  --acc:var(--matcha-bright);--ordertext:#08251b;--accrgb:166,206,78;
  position:relative;isolation:isolate;margin:14px var(--pad) 0;
}
.prod--ube{--acc:var(--ube);--ordertext:#26183f;--accrgb:198,168,255}
.prod--hojicha{--acc:var(--hojicha);--ordertext:#3A2413;--accrgb:217,161,100}

.prod-photo{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:26px;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85), 0 6px 18px -12px rgba(0,0,0,.5)}
.prod-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.prod-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(146deg, rgba(255,255,255,.5) 0, rgba(255,255,255,.08) 30%,
    rgba(255,255,255,0) 55%, rgba(var(--accrgb),.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.prod-tag{
  display:inline-flex;align-items:center;gap:7px;margin:-16px 0 0 14px;position:relative;z-index:2;
  padding:7px 13px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--acc);
  background:rgba(8,30,23,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.34);
}
.prod-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 10px 1px rgba(var(--accrgb),.8)}

.prod-head{padding:16px 2px 0}
.prod-head h1{font-size:clamp(1.72rem,7.4vw,2.2rem);color:#fff}
.prod-lead{margin:12px 0 0;font-size:1.02rem;color:rgba(246,236,196,.76)}

/* ------------------------------------------------------------ buy box --- */
/* The one opaque panel on the page: it is the thing you came to press. */
.buy{
  margin-top:22px;padding:20px 18px 18px;border-radius:26px;position:relative;isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(4,26,20,.28));
  box-shadow:0 20px 50px -30px rgba(0,0,0,.8);
}
.buy::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;padding:1px;
  background:linear-gradient(146deg, rgba(255,255,255,.4) 0, rgba(255,255,255,.07) 34%,
    rgba(255,255,255,0) 60%, rgba(var(--accrgb),.28) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.buy h3{font-size:1.28rem;color:#fff}
.buy-note{margin:6px 0 2px;font-size:.86rem;color:rgba(246,236,196,.55)}
.buy-rule{height:1px;margin:15px 0 3px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.05) 55%, transparent)}

/* --- price ladder: identical classes to the home page, because cart.js
       reads these exact names --- */
.pricelist{margin:0 0 16px}
.pr{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;column-gap:10px;padding:11px 12px;margin:0 -12px;border-radius:14px;
  width:calc(100% + 24px);text-align:left;font:inherit;color:inherit;
  -webkit-appearance:none;appearance:none;
  transition:background .2s ease, box-shadow .2s ease;
}
.pr + .pr::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;
  background:rgba(255,243,193,.08)}
.pr-w{grid-column:1;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--cream)}
.pr-meta{grid-column:2;justify-self:end;min-width:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.pr-flag{white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);color:var(--acc);
  background:rgba(var(--accrgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.36)}
.pr-u{white-space:nowrap;font-size:.7rem;color:rgba(246,236,196,.42);font-variant-numeric:tabular-nums}
.pr-p{grid-column:3;justify-self:end;min-width:58px;text-align:right;
  font-family:var(--font-display);font-weight:700;font-size:1.32rem;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.pr-p i{font-style:normal;font-weight:600;font-size:.72rem;color:var(--acc);margin-left:2px}
.pr--best{
  background:linear-gradient(90deg, rgba(var(--accrgb),.22), rgba(var(--accrgb),.07));
  box-shadow:inset 0 0 0 1px rgba(var(--accrgb),.34), 0 12px 26px -18px rgba(var(--accrgb),.9);
}
.pr--best::before,.pr--best + .pr::before{display:none}
.pr--best .pr-u{color:rgba(var(--accrgb),.9)}
.prod[data-ladder="many"] .pr{cursor:pointer}
.prod[data-ladder="one"] .pr{cursor:default}
@media (hover:hover){
  .prod[data-ladder="many"] .pr:hover{background:rgba(255,255,255,.05)}
  .prod[data-ladder="many"] .pr--best:hover{background:linear-gradient(90deg, rgba(var(--accrgb),.28), rgba(var(--accrgb),.1))}
}
.pr:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.pr[aria-checked="true"]{
  background:linear-gradient(90deg, rgba(var(--accrgb),.14), rgba(var(--accrgb),.04));
  box-shadow:inset 0 0 0 1.5px rgba(var(--accrgb),.6);
}
.pr--best[aria-checked="true"]{
  background:linear-gradient(90deg, rgba(var(--accrgb),.3), rgba(var(--accrgb),.1));
  box-shadow:inset 0 0 0 1.5px rgba(var(--accrgb),.85), 0 12px 26px -18px rgba(var(--accrgb),.9);
}
.pr[aria-checked="true"]::before,.pr[aria-checked="true"] + .pr::before{display:none}
.prod[data-ladder="many"] .pr-w{position:relative;padding-left:25px}
.prod[data-ladder="many"] .pr-w::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:15px;height:15px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(246,236,196,.34);
  transition:background .2s ease, box-shadow .2s ease;
}
.prod[data-ladder="many"] .pr[aria-checked="true"] .pr-w::before{
  background:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc), 0 0 9px 1px rgba(var(--accrgb),.7);
}
/* a single-row ladder is a statement of price, not a chooser */
.prod[data-ladder="one"] .pr{margin-top:2px}

.btn-order{
  position:relative;width:100%;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--accrgb),1), rgba(var(--accrgb),.84));
  color:var(--ordertext);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -14px rgba(var(--accrgb),.65);
}
.btn-order::before{content:"";position:absolute;inset:0 0 50% 0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), transparent)}
.btn-order span,.btn-order .ic{position:relative}
.btn-order:hover{filter:brightness(1.06)}
.btn-order .ic{width:19px;height:19px;fill:none;stroke:currentColor}

/* ---------------------------------------------------------- the reading --- */
/* Long-form copy is the point of these pages: it is what someone searching
   "how much matcha per cup" actually wants, and what Google has to read to
   believe the page is about this product rather than about the shop. */
.copy{padding:6px var(--pad) 0}
.copy section{margin-top:34px}
.copy h2{font-size:1.28rem;color:#fff}
.copy h2 + p{margin-top:10px}
.copy p{margin:0;color:rgba(246,236,196,.78);font-size:1rem}
.copy p + p{margin-top:12px}

.spec{margin-top:26px;padding:16px 18px;border-radius:20px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,243,193,.09)}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:9px;font-size:.92rem}
.spec dt{color:rgba(246,236,196,.5)}
.spec dd{margin:0;text-align:right;color:var(--cream);font-family:var(--font-display);font-weight:600}

/* ----------------------------------------------------------------- FAQ --- */
.faq-list{margin-top:14px;border-top:1px solid rgba(255,243,193,.1)}
.faq-list details{border-bottom:1px solid rgba(255,243,193,.1)}
.faq-list summary{
  display:flex;align-items:center;gap:12px;padding:15px 2px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--cream);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:11px;height:11px;
  border-right:2px solid rgba(246,236,196,.45);border-bottom:2px solid rgba(246,236,196,.45);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;
}
.faq-list details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq-list summary:hover{color:#fff}
.faq-list p{margin:0 0 16px;padding-right:22px;color:rgba(246,236,196,.72);font-size:.95rem}

/* ------------------------------------------------------- ship / whole --- */
.notes{margin-top:34px;display:grid;gap:12px}
.note{padding:15px 17px;border-radius:20px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,243,193,.09)}
.note h3{font-size:.96rem;color:var(--acc);margin-bottom:7px}
.note p{margin:0;font-size:.93rem;color:rgba(246,236,196,.74)}

/* -------------------------------------------------------------- also --- */
.also{padding:40px var(--pad) 0}
.also h2{font-size:1.28rem;color:#fff;margin-bottom:14px}
.also-grid{display:grid;gap:11px}
.also-card{
  display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:13px;
  padding:9px 14px 9px 9px;border-radius:20px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,243,193,.09);
  transition:background .2s ease, transform .14s ease;
}
.also-card:hover{background:rgba(255,255,255,.09)}
.also-card:active{transform:scale(.99)}
.also-card img{width:78px;height:58px;object-fit:cover;border-radius:13px}
.also-name{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--cream);line-height:1.2}
.also-from{display:block;margin-top:3px;font-size:.78rem;color:rgba(246,236,196,.5);
  font-variant-numeric:tabular-nums}
.also-card .arr{width:17px;height:17px;fill:none;stroke:rgba(246,236,196,.42);
  stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- footer --- */
.pfoot{margin-top:44px;padding:30px var(--pad) 0;
  border-top:1px solid rgba(255,243,193,.1);text-align:center}
.pfoot .btn-primary{margin-bottom:18px}
.pfoot address{font-style:normal;display:grid;gap:5px;font-size:.88rem;color:rgba(246,236,196,.62)}
.pfoot address strong{font-family:var(--font-display);font-size:1rem;color:var(--cream);letter-spacing:.02em}
.pfoot address a{text-decoration:underline;text-decoration-color:rgba(246,236,196,.25);text-underline-offset:3px}
.pfoot-bi{margin:16px 0 0;font-size:.74rem;line-height:1.5;color:rgba(246,236,196,.34)}
.pfoot-legal{margin:16px 0 0;font-size:.74rem;color:rgba(246,236,196,.3)}

/* =========================== the catalogue page ===========================
   /shop and /ka/shop: every product at a glance, one row each. It exists so
   the product pages have a parent to sit under, and so "buy matcha Tbilisi"
   has one page that answers with the whole range and its prices. */
.cat-head{padding:26px var(--pad) 0}
.cat-head h1{font-size:clamp(1.8rem,7.6vw,2.3rem);color:#fff}
.cat-lead{margin:12px 0 0;font-size:1.02rem;color:rgba(246,236,196,.76)}
.cat-grid{display:grid;gap:13px;padding:22px var(--pad) 0}
.cat-card{
  --acc:var(--matcha-bright);--accrgb:166,206,78;
  position:relative;display:block;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(4,26,20,.26));
  box-shadow:inset 0 0 0 1px rgba(255,243,193,.09), 0 18px 44px -28px rgba(0,0,0,.8);
  transition:transform .14s ease, background .2s ease;
}
.cat-card--ube{--acc:var(--ube);--accrgb:198,168,255}
.cat-card--hojicha{--acc:var(--hojicha);--accrgb:217,161,100}
.cat-card:hover{background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(4,26,20,.26))}
.cat-card:active{transform:scale(.993)}
.cat-card figure{margin:0;aspect-ratio:16/7;overflow:hidden}
.cat-card figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.cat-body{padding:15px 17px 17px}
.cat-body h2{font-size:1.16rem;color:#fff}
.cat-body p{margin:7px 0 0;font-size:.92rem;color:rgba(246,236,196,.7)}
.cat-foot{display:flex;align-items:center;gap:10px;margin-top:13px}
.cat-price{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--acc);
  font-variant-numeric:tabular-nums}
.cat-more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:.86rem;color:rgba(246,236,196,.6)}
.cat-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}
.cat-card:hover .cat-more{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}