/* ─────────────────────────────────────────────────────────────────────────────
   Tactile pass (owner, 18 Oct — after the Dribbble "turing UI kit" buttons).
   Loaded last on every page so it wins. Swaps the soft, flat pills for real,
   pressable controls: rounded rectangles, a crisp 1 px edge, a light top highlight,
   a tight shadow, a sunken price tag inside the button, and a raised chip (not a
   filled colour) for the chosen option. Small cards get a hairline edge.
   Brand colours unchanged: Deep Teal stays the one filled button.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --t-r: 12px;          /* buttons */
  --t-r-in: 8px;        /* price tag / chip inside a button */
  --t-edge: rgba(32, 47, 48, .12);
  --t-edge-2: rgba(32, 47, 48, .2);
  --t-lift: 0 1px 2px rgba(32, 47, 48, .08), 0 1px 1px rgba(32, 47, 48, .04);
  --t-lift-hi: 0 2px 4px rgba(32, 47, 48, .1), 0 6px 14px -8px rgba(32, 47, 48, .25);
  /* Deep Teal, as a lit surface */
  /* soft gradient, a faint top highlight and a see-through edge: a hard dark ring and
     text shadows made the small buttons look pixelated (owner, 18 Oct) */
  --t-teal: linear-gradient(180deg, #276A6E 0%, #1D5F63 100%);
  --t-teal-hi: linear-gradient(180deg, #2E7276 0%, #22666A 100%);
  --t-teal-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 .5px rgba(16, 58, 61, .6), 0 1px 2px rgba(21, 74, 77, .22), 0 4px 12px -4px rgba(21, 74, 77, .32);
  /* Chalk / white, as a lit surface */
  --t-chalk: linear-gradient(180deg, #FFFFFF 0%, #F4F4F2 100%);
  --t-chalk-shadow: 0 0 0 .5px var(--t-edge-2), var(--t-lift);
}

/* ── the filled Deep Teal buttons ── */
.buy-btn, .pill-btn, .item__go, .nav__buy {
  border-radius: var(--t-r);
  background: var(--t-teal);
  box-shadow: var(--t-teal-shadow);
  text-shadow: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background .2s, box-shadow .2s, translate .2s, scale .1s;
}
.buy-btn:hover, .pill-btn:hover, .item__go:hover, .nav__buy:hover { background: var(--t-teal-hi); }
.buy-btn:active, .pill-btn:active, .item__go:active, .nav__buy:active { scale: .985; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(16, 58, 61, .6); }
.pill-btn:disabled, .buy-btn:disabled { background: var(--t-teal); opacity: .45; box-shadow: none; }
.item__go { border-radius: 10px; }
.nav__buy { border-radius: 10px; }
@media (max-width: 760px) { .nav__buy { border-radius: 10px; } }

/* the price inside a button sits sunken, like a tag pressed into it */
.nav__price, .pill-btn--wide b, .hero__price, .offer__add b {
  border-radius: var(--t-r-in);
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08);
  text-shadow: none;
}
.hero__price, html[data-tone="dark"] .nav__buy .nav__price, html.in-tale .nav__price, html[data-tone="dark"] .nav__price {
  background: rgba(32, 47, 48, .07);
  box-shadow: inset 0 0 0 .5px rgba(32, 47, 48, .08);
}
@media (max-width: 760px) { .nav__price { box-shadow: none; } }

/* ── the light buttons on photos and dark chapters ── */
.hero__buy, html[data-tone="dark"] .nav__buy, html.in-tale .nav__buy {
  border-radius: var(--t-r);
  background: var(--t-chalk);
  color: #202F30;
  text-shadow: none;
  box-shadow: 0 0 0 .5px rgba(32, 47, 48, .12), 0 1px 2px rgba(0, 0, 0, .16), 0 8px 20px -10px rgba(0, 0, 0, .4);
}
.hero__buy:hover, html[data-tone="dark"] .nav__buy:hover, html.in-tale .nav__buy:hover { background: #FFFFFF; }
.nav__buy:active { scale: .97; }

/* ── white secondary buttons ── */
.addon__btn, .ghost:not(.nav__menu), .paytabs span, .fq__rate button, .acc__btn:not(.buy-btn), .flex-ask__no {
  border-radius: 10px;
  background: var(--t-chalk);
  border: 0;
  box-shadow: var(--t-chalk-shadow);
  transition: box-shadow .2s, background .2s, scale .1s;
}
.addon__btn:hover, .ghost:not(.nav__menu):hover, .paytabs span:hover, .fq__rate button:hover, .flex-ask__no:hover {
  background: #FFFFFF; box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--t-edge-2), var(--t-lift-hi);
}
.ghost.nav__menu { border-radius: 10px; }
.express__btn { border-radius: var(--t-r); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px #121c1d, var(--t-lift); background: linear-gradient(180deg, #2C3D3E 0%, #202F30 100%); }

/* ── choices (fit chips, finishes): white keys; the chosen one is a pressed dark key ── */
.chip {
  border-radius: 10px;
  background: var(--t-chalk);
  box-shadow: var(--t-chalk-shadow);
}
.chip:hover { box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--t-edge-2), var(--t-lift-hi); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #2C3D3E 0%, #202F30 100%);
  color: #ECECEA;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px #121c1d, 0 1px 2px rgba(0, 0, 0, .2);
}
.chip:focus-visible { border-radius: 10px; }
.pickrow.has-pill .chip, .pickrow.has-pill .chip[aria-checked="true"] { background: transparent; box-shadow: none; }

/* ── segmented: a sunken track, the active option is a raised white key ── */
.lang, .qty, .cart-page:not(.oc-page) .item__qty {
  border-radius: var(--t-r);
  background: rgba(32, 47, 48, .05);
  box-shadow: inset 0 1px 2px rgba(32, 47, 48, .1), inset 0 0 0 1px rgba(32, 47, 48, .08);
}
.lang a, .qty button, .cart-page:not(.oc-page) .item__qty button { border-radius: 8px; }
.lang a[aria-current="true"] {
  background: var(--t-chalk); color: #202F30;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--t-edge), 0 1px 2px rgba(32, 47, 48, .14);
}
.qty button:hover, .cart-page:not(.oc-page) .item__qty button:hover { background: #FFFFFF; box-shadow: 0 0 0 1px var(--t-edge), var(--t-lift); }
.qty-row.is-cart .qty { box-shadow: inset 0 1px 2px rgba(32, 47, 48, .1), inset 0 0 0 1.5px var(--green); }
/* on photos and dark chapters the track is glass */
html[data-tone="dark"] .lang, html.in-tale .lang { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .16); }
html[data-tone="dark"] .lang a[aria-current="true"], html.in-tale .lang a[aria-current="true"] { background: var(--t-chalk); color: #202F30; }

/* FAQ topics: a sunken list, the open topic is the raised key */
@media (min-width: 761px) {
  .fq__tabs { padding: 4px; border-radius: 16px; background: rgba(32, 47, 48, .05); box-shadow: inset 0 1px 2px rgba(32, 47, 48, .1), inset 0 0 0 1px rgba(32, 47, 48, .07); }
}
.fq__tab { border-radius: 10px; }
.fq__tab:hover { background: rgba(255, 255, 255, .5); }
.fq__tab[aria-selected="true"] { background: var(--t-chalk); box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--t-edge), 0 1px 2px rgba(32, 47, 48, .12); }

/* ── round icon buttons on photos: a glass edge with a top highlight ── */
.nav__bag, .hero__down, .tale__pause {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .18);
  border: 0;
}
.flex-ask__x { box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--t-edge), 0 2px 6px rgba(32, 47, 48, .18); background: var(--t-chalk); }
.turn { box-shadow: var(--t-chalk-shadow); background: var(--t-chalk); }

/* ── small cards: hairline edge, tight shadow, icons in a rounded square ── */
.help__talk a {
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--t-edge), var(--t-lift);
  transition: box-shadow .2s, translate .2s;
}
.help__talk a:hover { box-shadow: 0 0 0 1px var(--t-edge-2), var(--t-lift-hi); translate: 0 -1px; }
.help__talk svg {
  box-sizing: content-box; width: 18px; height: 18px; padding: 8px; border-radius: 9px;
  background: linear-gradient(180deg, #F6F8F8 0%, #E9F0F0 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(29, 95, 99, .14);
}
.help__manual a {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(155, 205, 208, .42) 0%, rgba(155, 205, 208, .3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(29, 95, 99, .14), var(--t-lift);
}
.help__kym, .item__tag { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(29, 95, 99, .18); }

/* ── the header's icon buttons share the Pre-order button's shape: one family, not circle + square + pill ── */
.nav__bag, .ghost.nav__menu {
  border-radius: 12px; border: 0;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 .5px var(--t-edge-2), var(--t-lift);
}
.nav__bag:hover, .ghost.nav__menu:hover { background: #FFFFFF; box-shadow: 0 0 0 .5px var(--t-edge-2), var(--t-lift-hi); }
html[data-tone="dark"] .nav__bag, html.in-tale .nav__bag, html[data-tone="dark"] .ghost.nav__menu, html.in-tale .ghost.nav__menu {
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3);
}
.nav__buy { border-radius: 12px; }
@media (max-width: 760px) { .nav__buy { border-radius: 12px; } }

/* the stepper beside Pre-order: a light track, not a grey block */
.qty { background: rgba(32, 47, 48, .03); box-shadow: inset 0 0 0 .5px var(--t-edge-2); }
.qty button:hover { box-shadow: 0 0 0 .5px var(--t-edge-2), var(--t-lift); }

/* never two Pre-order buttons at once: cart-nav.js sets .cta-in-view while one on the page is on screen */
html.cta-in-view .nav__buy { display: none !important; }
html:not(.cta-in-view) .nav__buy { animation: t-cta-in .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes t-cta-in { from { opacity: 0; translate: 6px 0; } }
@media (prefers-reduced-motion: reduce) { html:not(.cta-in-view) .nav__buy { animation: none; } }

/* no 3D lock behind Help & Guides: cart-nav.js sets .help-in-view while Help owns the middle of the screen */
#stage { transition: opacity .4s ease, visibility 0s linear 0s; }
html.help-in-view #stage { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }

/* near the footer (and over the hero) the nav slides away; it stayed half-visible after a mouse click in it
   (focus-within), white logo on a light page. Only keyboard focus keeps it now (owner, 18 Oct). */
html.in-foot .nav:focus-within:not(:has(:focus-visible)), html.in-hero .nav:focus-within:not(:has(:focus-visible)) { translate: 0 -130%; opacity: 0; pointer-events: none; }