/*
Theme Name: EXTINGE
Theme URI: https://extinge.example
Author: EXTINGE
Description: Graphite storefront for EXTINGE — carbon fiber lifestyle goods. Tokens and voice per BRAND-AND-SITE-PLAN.md: graphite ground, furnace accent, didone signature, mono specs.
Version: 0.8.4
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ting
*/

/* ---------- global feel (plan §8.1) ---------- */

:root {
  color-scheme: dark;
}

::selection {
  background: #ff4d0a;
  color: #0a0a0b;
}

html {
  background: #0a0a0b; /* no white flash between pages on a dark site */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* cross-document fade — pages dissolve instead of hard-cutting (Chrome 126+) */
@view-transition {
  navigation: auto;
}

/* form controls don't inherit fonts by default — keep them on the site face */
button, input, select, textarea {
  font-family: inherit;
}

/* keyboard focus is furnace, everywhere (his globals.css) */
:focus-visible {
  outline: 2px solid #ff4d0a;
  outline-offset: 3px;
}

/* ---------- header: menu-left · EXTINGE centered didone · cart right ---------- */

/* Transparent until scrolled past 8px (his useScrollPast) — the veil, blur
   and hairline arrive together; ink inversion is html[data-tone]'s job. */
.ting-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.14s linear;
}

.ting-header.is-scrolled {
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(242, 240, 236, 0.2);
}

html[data-tone="light"] .ting-header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(10, 10, 11, 0.16);
}

/* The signature, not the poster: didone at 1.375rem, bold, 0.06em. */
.ting-header .wp-block-site-title {
  margin: 0;
  line-height: 1;
}

.ting-header .wp-block-site-title a {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Everything in the bar centres on the same 72px axis, every icon 21px in a
   34px hit-target — the menu button and the mini-cart included. */
.ting-header__left,
.ting-header__center,
.ting-header__right {
  display: flex;
  align-items: center;
  height: 100%;
}

.ting-header .wp-block-navigation,
.ting-header .wc-block-mini-cart {
  display: flex;
  align-items: center;
}

.ting-header .wp-block-navigation__responsive-container-open,
.ting-header .wc-block-mini-cart__button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  line-height: 0;
  color: #f2f0ec;
}

.ting-header .wp-block-navigation__responsive-container-open svg,
.ting-header .wc-block-mini-cart__button svg {
  width: 21px;
  height: 21px;
}

/* every header tool answers the cursor (his hover:opacity-60) */
.ting-header .wp-block-navigation__responsive-container-open,
.ting-header .wc-block-mini-cart__button,
.ting-header__icons a,
.ting-header .wp-block-site-title a {
  transition: opacity 0.2s ease;
}

.ting-header .wp-block-navigation__responsive-container-open:hover,
.ting-header .wc-block-mini-cart__button:hover,
.ting-header__icons a:hover,
.ting-header .wp-block-site-title a:hover {
  opacity: 0.6;
}

.ting-header .wp-block-site-title a {
  color: #f2f0ec;
}

.ting-header .wp-block-navigation a:hover {
  color: #8e8c87;
}

/* closed drawer never paints, whatever classes get stranded or load late */
.ting-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
  display: none !important;
}

/* ---------- menu drawer: a carbon panel sliding from the left ----------
   WP's stock overlay is a full-screen white sheet. Restyled: the page stays
   visible behind a translucent scrim; the panel reads as a set page — mono
   running head, poster-face index, didone sign-off, mark watermark. */

.ting-header .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(5, 5, 6, 0.45) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.ting-header .is-menu-open .wp-block-navigation__responsive-close {
  position: relative;
  width: min(480px, 92vw);
  height: 100%;
  margin: 0 auto 0 0;
  background: #0a0a0b;
  border-right: 1px solid #2a2a2e;
  animation: ting-drawer-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

@keyframes ting-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* the mark, resting in the panel's lower half as a watermark */
.ting-header .is-menu-open .wp-block-navigation__responsive-close::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -40px;
  width: 300px;
  height: 300px;
  background-image: url("assets/img/logo.svg");
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
}

.ting-header .is-menu-open .wp-block-navigation__responsive-dialog {
  height: 100%;
}

.ting-header .is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 6rem 2.75rem 2.5rem;
}

/* running head */
.ting-header .is-menu-open .wp-block-navigation__responsive-container-content::before {
  content: "Menu \2014  EXTINGE";
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e8c87;
  margin-bottom: 2.25rem;
}

/* sign-off */
.ting-header .is-menu-open .wp-block-navigation__responsive-container-content::after {
  content: "Carbon for the everyday.\A \8F7B\800C\5F3A\7684\65E5\5E38\3002";
  white-space: pre-line;
  margin-top: auto;
  font-family: "Zen Dots", Didot, "Playfair Display", "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: #8e8c87;
}

.ting-header .is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 1.6rem;
  right: 2.25rem;
  color: #f2f0ec;
  padding: 0.5rem;
  z-index: 2;
}

.ting-header .is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  counter-reset: ting-menu;
}

/* poster-face index, staggered in as the panel lands */
.ting-header .is-menu-open .wp-block-navigation-item {
  display: block;
  width: 100%;
  counter-increment: ting-menu;
  animation: ting-item-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ting-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.12s; }
.ting-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.19s; }
.ting-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.26s; }
.ting-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.33s; }
.ting-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.40s; }
.ting-header .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.47s; }

@keyframes ting-item-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.ting-header .is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  color: #f2f0ec !important;
  font-family: "Zen Dots", "Haettenschweiler", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 2.625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: opacity 0.25s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ting-header .is-menu-open .wp-block-navigation-item__content::before {
  content: counter(ting-menu, decimal-leading-zero);
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: #ff4d0a;
  transform: translateY(-1em);
}

/* focus by dimming the rest, not by decorating the one */
.ting-header .is-menu-open .wp-block-navigation__container:hover .wp-block-navigation-item__content {
  opacity: 0.3;
}

.ting-header .is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content:hover {
  opacity: 1;
  padding-left: 0.75rem;
}

/* ---------- hero ---------- */

.ting-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 76% -8%, #17171a 0%, transparent 55%),
    #0a0a0b;
}

.ting-hero__kicker,
.ting-kicker {
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.ting-hero .wp-block-heading {
  text-wrap: balance;
}

/* didone pull-quote voice */
.ting-serif {
  font-family: "Zen Dots", Didot, "Playfair Display", "Times New Roman", Times, serif;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* annotation voice — drafting-room margin notes */
.ting-annotation {
  font-style: italic;
  font-size: 0.8125rem;
  color: #8e8c87;
  letter-spacing: 0.06em;
}

/* carbon weave — pure CSS */
.ting-weave {
  position: relative;
}

.ting-weave::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    repeating-linear-gradient(45deg, #ffffff08 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, #ffffff05 0 2px, transparent 2px 8px);
  background-size: 12px 12px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}

/* ---------- The Number: weight comparison bars (plan §6.2) ---------- */

.ting-bar {
  height: 10px;
  border-radius: 2px;
  background: #212124;
  position: relative;
  overflow: hidden;
}

.ting-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
  background: #52525a;
}

.ting-bar--ting > i {
  background: #ff4d0a;
}

/* ---------- product cards: surface-1 on graphite ---------- */

ul.products li.product,
.wc-block-grid__product {
  background: #131315;
  border: 1px solid #2a2a2e;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, background 0.35s ease;
}

ul.products li.product:hover,
.wc-block-grid__product:hover {
  transform: translateY(-4px);
  border-color: #3a3a40;
  background: #17171a;
}

ul.products li.product img,
.wc-block-grid__product img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

ul.products li.product:hover img {
  transform: scale(1.03);
}

ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f2f0ec;
  padding: 1rem 1.25rem 0.15rem;
}

/* price reads like an instrument value */
ul.products li.product .price,
.wc-block-grid__product-price {
  color: #8e8c87;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0 1.25rem 1.25rem;
  display: block;
}

ul.products li.product .price ins {
  text-decoration: none;
}

ul.products li.product .button {
  display: none;
}

/* woo notices on graphite */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: #131315;
  color: #f2f0ec;
  border-top-color: #ff4d0a;
}

/* ---------- single product ---------- */

.woocommerce div.product .product_title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #f2f0ec;
}

.woocommerce div.product p.price {
  color: #c9c7c1;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.125rem;
}

.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit {
  background: #ff4d0a;
  color: #0a0a0b;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.9rem;
  transition: background 0.25s ease;
}

.woocommerce div.product form.cart .button:hover {
  background: #c93a06;
  color: #0a0a0b;
}

/* inputs are sunken — instrument panel (plan §8.1) */
.woocommerce div.product form.cart div.quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: #0a0a0b;
  color: #f2f0ec;
  border: 1px solid #3a3a40;
  border-radius: 3px;
  padding: 0.65rem 0.5rem;
}

.woocommerce .woocommerce-breadcrumb,
.woocommerce div.product .product_meta {
  color: #8e8c87;
  font-size: 0.8125rem;
}

.woocommerce .woocommerce-breadcrumb a,
.woocommerce div.product .product_meta a {
  color: #8e8c87;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin-bottom: 1rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0 1.5rem 0 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #8e8c87;
  font-weight: 500;
  padding: 0.5rem 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #f2f0ec;
  border-bottom: 2px solid #ff4d0a;
}

/* ================= homepage motion + section fidelity (his source) =========
   Reveal/InView from his globals.css: hidden state only when scripting is
   enabled, so a JS failure leaves a readable page, never a blank one. */

.reveal { opacity: 1; }

.bar-fill {
  transform: scaleX(var(--bar-scale, 1));
  transform-origin: left center;
}

@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal.reveal-in {
    opacity: 1;
    transform: none;
  }

  .bar-fill {
    transform: scaleX(0);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--bar-delay, 0ms);
  }

  .in-view .bar-fill {
    transform: scaleX(var(--bar-scale, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; }
}

/* display voice (his @utility display) */
.t-display {
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-weight: 500;
  color: #f2f0ec;
  text-wrap: balance;
  margin: 0;
}

/* ---- 01 The number: his WeightProof layout ---- */
.tn-grid {
  display: grid;
  gap: 4rem;
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .tn-grid { grid-template-columns: 0.85fr 1.15fr; gap: 6rem; }
}

.tn-copy p { max-width: 40ch; }
.tn-copy .tn-lead { margin: 1.75rem 0 0; font-size: 1.125rem; line-height: 1.65; color: #c9c7c1; }
.tn-copy .tn-fine { margin: 1.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: #8e8c87; }

.tn-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.tn-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.tn-row__labels { display: flex; flex-direction: column; gap: 0.375rem; }
.tn-row__labels .t-label { color: #8e8c87; }
.tn-row__labels .t-label.is-ours { color: #ff4d0a; }
.tn-row__sub { font-size: 0.875rem; color: #8e8c87; }

.tn-row__kg {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 2.125rem;
  color: #8e8c87;
  white-space: nowrap;
}

.tn-row__kg.is-ours { color: #f2f0ec; }
.tn-row__kg small { font-size: 1rem; margin-left: 0.25rem; }

.tn-track { height: 3px; width: 100%; background: #131315; }
.tn-fill { height: 100%; width: 100%; background: #52525a; }
.tn-fill.is-ours { background: #ff4d0a; }

.tn-note { margin: 3.5rem 0 0; color: #52525a; }

/* ---- 02 The flagship: his HeroProduct layout ---- */
.tf-grid {
  display: grid;
  align-items: start;
  gap: 3.5rem;
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .tf-grid { grid-template-columns: 1.25fr 0.75fr; gap: 5rem; }
}

.tf-media img { display: block; width: 100%; height: auto; }

.tf-subs {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.tf-price {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  color: #f2f0ec;
  margin: 1.25rem 0 0;
}

.tf-desc { margin: 2rem 0 0; color: #c9c7c1; line-height: 1.7; max-width: 44ch; }

.tf-specs {
  margin: 2.75rem 0 0;
  border-top: 1px solid #3a3a40;
  border-bottom: 1px solid #3a3a40;
}

.tf-specs > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #0a0a0b;
  padding: 0.875rem 1rem;
}

.tf-specs > div + div { border-top: 1px solid #3a3a40; }
.tf-specs dt { color: #8e8c87; }
.tf-specs dd {
  margin: 0;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: #f2f0ec;
}

.tf-cta { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }

.tf-cta a {
  display: block;
  text-align: center;
  padding: 0.9rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.tf-cta .btn-solid { background: #ff4d0a; color: #0a0a0b; }
.tf-cta .btn-solid:hover { background: #c93a06; color: #0a0a0b; }
.tf-cta .btn-ghost { background: transparent; border: 1px solid #3a3a40; color: #f2f0ec; }
.tf-cta .btn-ghost:hover { border-color: #52525a; color: #f2f0ec; }

.tf-fine { margin: 1.75rem 0 0; font-size: 0.75rem; color: #8e8c87; line-height: 1.6; }

/* shop archive ordering select — same sunken instrument as every input */
body .woocommerce-ordering select,
body select.orderby {
  background: #0a0a0b;
  color: #f2f0ec;
  border: 1px solid #3a3a40;
  border-radius: 4px;
  padding: 0.4em 0.6em;
}

/* 404 */
.ting-404-btn {
  display: inline-block;
  background: #ff4d0a;
  color: #0a0a0b;
  padding: 0.9rem 1.9rem;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.25s ease;
}

.ting-404-btn:hover {
  background: #c93a06;
  color: #0a0a0b;
}

/* footer */
.ting-footer a:hover {
  color: #8e8c87 !important;
}

/* header: menu-left · EXTINGE centre · cart right (plan §5 nav) */
.ting-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}

/* the bar is a flow-layout group — WP's default blockGap pushes the second
   and third columns down 12px; a grid has no business inheriting it */
.ting-header__bar > * { margin-block-start: 0 !important; }

.ting-header__left { justify-self: start; }
.ting-header__right { justify-self: end; }

/* no flow gap between chrome and stage */
.wp-site-blocks { row-gap: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; }

/* ---------- section label: 01 —— The number (his SectionLabel motif) ---------- */
.ting-slabel {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ting-slabel span {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  color: #ff4d0a;
}

.ting-slabel i {
  width: 44px;
  height: 1px;
  background: #3a3a40;
}

.ting-slabel b {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8e8c87;
}

/* ---------- placeholder tiles: weave ground + shooting brief (his Placeholder) ---------- */
.ting-tiles {
  display: grid;
  gap: 1.25rem;
}

/* long single-word labels (ACCESSORIES) must not widen their 1fr track —
   kill the grid item's auto min-width so every column stays equal */
.ting-tiles > *,
.wl-grid > * { min-width: 0; }

.ting-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.ting-tiles--4 { grid-template-columns: repeat(4, 1fr); }
.ting-tiles--detail { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 880px) {
  .ting-tiles--3, .ting-tiles--4, .ting-tiles--detail { grid-template-columns: 1fr 1fr; }
}

.ting-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid #2a2a2e;
  border-radius: 4px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, #ffffff07 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, #ffffff05 0 2px, transparent 2px 9px),
    #1d1d20;
}

/* photo-filled tile: the image carries it; the label drops to a corner tag */
.ting-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ting-tile--photo {
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 0;
}

.ting-tile--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 5, 6, 0.65) 100%);
}

.ting-tile--photo b,
.ting-tile--photo small {
  position: relative;
  z-index: 1;
  text-align: left;
}

.ting-tile--photo b {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f2f0ec;
  margin: 0;
}

.ting-tile--zoom {
  background-size: 26px 26px, 26px 26px, auto;
}

.ting-tile b {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: #c9c7c1;
}

.ting-tile small {
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.55;
  color: #8e8c87;
  max-width: 30ch;
}

.ting-figure { margin: 0; }

.ting-figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid #3a3a40;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
}

.ting-figure figcaption span {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e8c87;
}

.ting-figure figcaption em {
  font-style: normal;
  font-size: 1.25rem;
  color: #f2f0ec;
}

/* ---------- category cards (FullLine) ---------- */
.ting-cat {
  display: block;
  text-decoration: none;
}

.ting-cat__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid #3a3a40;
  margin-top: 1rem;
  padding-top: 0.85rem;
}

.ting-cat__row span {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f2f0ec;
  transition: color 0.2s ease;
}

.ting-cat:hover .ting-cat__row span { color: #ff4d0a; }

.ting-cat__row em {
  font-style: normal;
  font-size: 0.75rem;
  color: #8e8c87;
}

.ting-cat .ting-tile b {
  font-family: inherit;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: #f2f0ec;
}

/* ---------- entry ladder (Start here) ---------- */
.ting-entry {
  margin-top: 4.5rem;
  border-top: 1px solid #3a3a40;
  padding-top: 2.5rem;
}

.ting-entry__label {
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8e8c87;
  margin: 0 0 1.5rem;
}

.ting-entry__row {
  display: grid;
  grid-template-columns: 110px 1fr auto 24px;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.15rem 0.25rem;
  border-bottom: 1px solid #2a2a2e;
  text-decoration: none;
  transition: background 0.2s ease;
}

.ting-entry__row:first-of-type { border-top: 1px solid #2a2a2e; }
.ting-entry__row:hover { background: #131315; }

.ting-entry__row span { font-size: 0.6875rem; color: #52525a; letter-spacing: 0.06em; }
.ting-entry__row b { font-weight: 400; font-size: 1.0625rem; color: #f2f0ec; }
.ting-entry__row em { font-style: normal; font-size: 0.875rem; color: #c9c7c1; }
.ting-entry__row i { font-style: normal; color: #52525a; transition: transform 0.2s ease, color 0.2s ease; }
.ting-entry__row:hover i { transform: translateX(4px); color: #ff4d0a; }

/* ---------- header icon row ---------- */
.ting-header__icons {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.ting-header__icons a,
.ting-header__icons span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #f2f0ec;
}

.ting-header__icons svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-tone="light"] .ting-header .ting-header__icons a,
html[data-tone="light"] .ting-header .ting-header__icons span { color: #0a0a0b; }

/* header is fixed (the opening needs it present through the whole scrub) */
.ting-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

/* logged-in admin bar sits above the fixed header — offset or it eats the bar */
body.admin-bar .ting-header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .ting-header { top: 46px; }
}

body:not(.home) main,
body:not(.home) .wp-block-group.alignfull:first-child {
  --ting-header-offset: 72px;
}

body:not(.home) { padding-top: 72px; }

/* ============================================================
   Purchase flow — WooCommerce blocks on graphite (plan §8.1's
   "checkout defaults to light" knock-on cost, handled here).
   Cards float on surface-1, inputs sink, furnace only on commit.
   ============================================================ */

/* Woo's own block templates (shop, product, cart, checkout, account) ship
   their <main> with no side padding — ours carry 1.5rem inline. Level them. */
body.woocommerce main.wp-block-group,
body.woocommerce-page main.wp-block-group {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ---- shared text on dark ---- */
body .wp-block-woocommerce-cart,
body .wp-block-woocommerce-checkout {
  color: #c9c7c1;
}

body .wc-block-components-product-name,
body .wc-block-components-checkout-step__title,
body .wc-block-components-title,
body .wc-block-cart__empty-cart__title {
  color: #f2f0ec;
}

body .wc-block-components-product-price,
body .wc-block-components-totals-item,
body .wc-block-components-totals-footer-item {
  color: #c9c7c1;
}

body .wc-block-components-product-metadata,
body .wc-block-components-checkout-step__description,
body .wc-block-components-order-summary-item__quantity,
body .wc-block-cart-item__prices {
  color: #8e8c87;
}

body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: #f2f0ec;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- table & separators ---- */
body .wc-block-cart-items th {
  color: #8e8c87;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid #3a3a40;
}

body .wc-block-cart-items td,
body .wc-block-cart-item__wrap {
  border-color: #2a2a2e;
}

body .wc-block-components-separator,
body .wc-block-components-totals-wrapper::after,
body .wc-block-components-totals-wrapper {
  border-color: #2a2a2e;
}

/* ---- sidebar totals card floats on surface-1 ---- */
body .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block,
body .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: #131315;
  border: 1px solid #2a2a2e;
  border-radius: 6px;
  padding: 0.5rem 0.25rem;
}

/* ---- quantity selector: sunken instrument ---- */
body .wc-block-components-quantity-selector {
  background: #0a0a0b;
  border: 1px solid #3a3a40;
  border-radius: 4px;
}

body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  background: transparent;
  color: #f2f0ec;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
}

body .wc-block-components-quantity-selector button {
  color: #8e8c87;
}

body .wc-block-components-quantity-selector button:hover {
  color: #f2f0ec;
}

body .wc-block-components-quantity-selector::after {
  border: none;
}

/* ---- inputs sink (checkout forms, coupon, search) ----
   wc-blocks ships `.wc-block-components-text-input input[type=text]` (0,2,1),
   so every override here must carry at least the attribute selector too. */
body .wc-block-components-text-input input[type="text"],
body .wc-block-components-text-input input[type="email"],
body .wc-block-components-text-input input[type="tel"],
body .wc-block-components-text-input input[type="number"],
body .wc-block-components-text-input input[type="password"],
body .wc-block-components-text-input input[type="url"],
body .wc-block-components-form .wc-block-components-text-input input[type="text"],
body .wc-block-components-form .wc-block-components-text-input input[type="email"],
body .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body .wc-block-components-form .wc-block-components-text-input input[type="number"],
body .wc-block-components-form .wc-block-components-text-input input[type="password"],
body .wc-block-components-form .wc-block-components-text-input input[type="url"],
body .wc-block-components-combobox .components-combobox-control__suggestions-container input,
body .wp-block-woocommerce-checkout textarea,
body .wc-blocks-components-select .wc-blocks-components-select__container {
  background: #0a0a0b;
  color: #f2f0ec;
  border: 1px solid #3a3a40;
  border-radius: 4px;
}

body .wc-blocks-components-select__select {
  background: transparent;
  color: #f2f0ec;
}

body .wc-blocks-components-select__select option {
  background: #0a0a0b;
  color: #f2f0ec;
}

body .wc-block-components-text-input label,
body .wc-block-components-combobox label,
body .wc-blocks-components-select__label,
body .wc-block-components-checkbox__label {
  color: #8e8c87;
}

body .wc-block-components-text-input input:focus,
body .wp-block-woocommerce-checkout textarea:focus,
body .wc-blocks-components-select .wc-blocks-components-select__container:focus-within {
  border-color: #52525a;
  box-shadow: 0 0 0 1px #52525a;
  outline: none;
}

/* ---- radio / checkbox: furnace marks the choice ---- */
body .wc-block-components-radio-control__option {
  color: #c9c7c1;
}

body .wc-block-components-radio-control--highlight-checked,
body .wc-block-components-radio-control-accordion-option {
  border-color: #3a3a40;
}

body .wc-block-components-radio-control-accordion-content,
body .wc-block-components-radio-control__option-layout .wc-block-components-radio-control__description {
  color: #8e8c87;
}

/* Core ships these as `.wc-block-components-radio-control .…__input` (two
   classes) and paints the *unchecked* dot solid #fff. A single-class override
   loses on specificity, which inverts the control: unchecked reads as filled,
   checked as an empty ring. Match core's ancestor and double the class so the
   furnace dot wins regardless of stylesheet order. */
body .wc-block-components-radio-control .wc-block-components-radio-control__input {
  border: 1px solid #52525a;
  background: #0a0a0b;
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border-color: #ff4d0a;
  background: #0a0a0b;
}

body .wc-block-components-radio-control .wc-block-components-radio-control__input.wc-block-components-radio-control__input:checked::before {
  background: #ff4d0a;
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  background: #0a0a0b;
  border: 1px solid #52525a;
}

body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: #ff4d0a;
  border-color: #ff4d0a;
}

body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
  color: #0a0a0b;
}

/* ---- commit buttons: furnace, square-ish, industrial ---- */
body .wc-block-components-button:not(.is-link) {
  background: #ff4d0a;
  color: #0a0a0b;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  transition: background 0.25s ease;
}

body .wc-block-components-button:not(.is-link):hover,
body .wc-block-components-button:not(.is-link):focus {
  background: #c93a06;
  color: #0a0a0b;
}

body .wc-block-components-button.outlined,
body .wc-block-cart__empty-cart__button {
  background: transparent;
  border: 1px solid #3a3a40;
  color: #f2f0ec;
}

/* ---- links & steps ---- */
body .wc-block-components-checkout-return-to-cart-button,
body .wp-block-woocommerce-cart a,
body .wp-block-woocommerce-checkout a {
  color: #f2f0ec;
}

body .wc-block-components-checkout-step {
  border-color: #2a2a2e;
}

/* ---- panels (shipping options, order notes) ---- */
body .wc-block-components-panel__button {
  color: #f2f0ec;
}

body .wc-block-components-totals-coupon-link {
  color: #8e8c87;
}

/* ---- notices on dark ---- */
body .wc-block-components-notice-banner.is-info,
body .wc-block-components-notice-banner.is-success {
  background: #131315;
  border-color: #3a3a40;
  color: #c9c7c1;
}

body .wc-block-components-notice-banner.is-success {
  border-left: 3px solid #ff4d0a;
}

/* notices are auto-focused for a11y — kill the UA blue ring, keep a quiet one */
body .wc-block-components-notice-banner:focus {
  outline: 1px solid #52525a;
  outline-offset: 0;
}

body .wc-block-components-notice-banner.is-success > svg {
  background-color: #ff4d0a;
  fill: #0a0a0b;
}

body .wc-block-components-notice-banner.is-error {
  background: #131315;
  border-color: #3a3a40;
  border-left: 3px solid #cc1818;
  color: #c9c7c1;
}

/* "View cart" inside the notice: a quiet inline link, not a ghost button.
   wc-blocks pins `color:#2f2f2f!important; opacity:.7` at (0,3,0) — outgun it. */
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward {
  background: none !important;
  border: none;
  padding: 0 !important;
  color: #f4f2ee !important;
  opacity: 1;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- mini-cart badge: furnace count, not the default green ---- */
/* his spec: a bare mono count riding the icon's corner, no pill.
   wc's badge is a flex capsule with min sizes — flatten all of it or the
   digit renders squeezed. */
body .wc-block-mini-cart__badge {
  display: block;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  color: inherit !important;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.7;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  transform: none;
  position: absolute;
  top: -0.375rem;
  right: -0.5rem;
}


/* ---- single-product review form sinks like every other input ---- */
.woocommerce #review_form textarea,
.woocommerce #review_form input[type="text"],
.woocommerce #review_form input[type="email"] {
  background: #0a0a0b;
  border: 1px solid #3a3a40;
  color: #f2f0ec;
  border-radius: 4px;
  padding: 0.5em 0.75em;
}

.woocommerce #review_form .stars a {
  color: #ff4d0a;
}

/* ---- mini-cart drawer: overlay on surface-2 ---- */
body .wc-block-mini-cart__drawer {
  background: #131315;
  color: #c9c7c1;
}

body .wc-block-mini-cart__drawer .components-modal__header button {
  color: #f2f0ec;
}

body .wc-block-mini-cart__title,
body .wc-block-mini-cart__drawer .wc-block-components-product-name {
  color: #f2f0ec;
}

body .wc-block-mini-cart__footer {
  border-top: 1px solid #2a2a2e;
}

/* ---- empty cart ---- */
body .wc-block-cart__empty-cart__description {
  color: #8e8c87;
}


/* ---------- trust bar: four cells on a hairline grid (his TrustBar) ------- */

.tb-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: #3a3a40;
  border: 1px solid #3a3a40;
}

@media (min-width: 640px) { .tb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .tb-grid { grid-template-columns: repeat(4, 1fr); } }

.tb-grid li {
  background: #0a0a0b;
  padding: 1.75rem;
}

.tb-grid .t-label { margin: 0; color: #f2f0ec; }

.tb-grid p {
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8e8c87;
}

/* ---------- newsletter: offer left, working form right (his Newsletter) --- */

.nl-grid {
  display: grid;
  gap: 3.5rem;
}

@media (min-width: 1024px) { .nl-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }

.nl-sub {
  margin: 1.5rem 0 0;
  max-width: 42ch;
  color: #c9c7c1;
  line-height: 1.7;
}

.nl-form { align-self: center; display: flex; flex-direction: column; gap: 1rem; }
.nl-form .t-label { color: #8e8c87; }

.nl-row { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .nl-row { flex-direction: row; } }

.nl-row input {
  flex: 1;
  min-width: 0;
  background: #0a0a0b;
  border: 1px solid #3a3a40;
  color: #f2f0ec;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
  padding: 1rem;
}

.nl-row input::placeholder { color: #8e8c87; }
.nl-row input:focus { border-color: #52525a; outline: none; }

.nl-row button {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #ff4d0a;
  color: #0a0a0b;
  border: none;
  padding: 1rem 1.75rem;
  cursor: pointer;
  transition: background 0.25s ease;
}

.nl-row button:hover { background: #c93a06; }

.nl-fine { margin: 0; font-size: 0.75rem; color: #8e8c87; }


/* ---------- Yohji-style catalogue: image, name, price — no button ----------
   The card is the link; commitment happens on the product page, confirmation
   in the mini-cart drawer. */

.wc-block-product .wc-block-components-product-button { display: none; }

.wc-block-product h2,
.wc-block-product .wp-block-woocommerce-product-price {
  text-align: left !important;
}

.wc-block-product h2 {
  /* !important: Woo's template tags the title has-medium-font-size, whose
     preset rule pins font-size with !important */
  font-size: 0.8125rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.1rem 1.25rem 0;
  margin: 0;
}

.wc-block-product h2 a { color: #f2f0ec; }

.wc-block-product .wp-block-woocommerce-product-price {
  padding: 0 1.25rem 1.25rem;
}

/* the inner price div also matches the legacy grid rule — one indent only */
.wc-block-product .wc-block-components-product-price {
  padding: 0 !important;
}


/* mini-cart drawer close: quiet ink, no white pill, tame focus ring */
body .wc-block-components-drawer__close {
  background: none !important;
  border: none;
  box-shadow: none !important;
  color: #f2f0ec;
  padding: 0.5rem;
}

body .wc-block-components-drawer__close:focus,
body .wc-block-components-drawer__close:focus-visible {
  outline: 1px solid #52525a;
  outline-offset: 2px;
}

/* drawer chrome on carbon */
body .wc-block-components-drawer {
  background: #0f0f10;
}

body .wc-block-mini-cart__title {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}


/* ---------- Yohji card details: USD price, brand sign-off, wish heart ------ */

/* the card itself: surface-1 on carbon, hairline border, quiet lift on hover —
   same container language as the wishlist cards and category tiles */
.wc-block-product {
  position: relative;
  background: #131315;
  border: 1px solid #2a2a2e;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}

.wc-block-product:hover {
  transform: translateY(-4px);
  border-color: #3a3a40;
}

.wc-block-product .wc-block-components-product-image { overflow: hidden; }

.wc-block-product .wc-block-components-product-image img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wc-block-product:hover .wc-block-components-product-image img {
  transform: scale(1.03);
}

.wc-block-product .wc-block-components-product-price::before { content: "USD "; }

.wc-block-product::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  bottom: 1.1rem;
  width: 24px;
  height: 24px;
  background-image: url("assets/img/logo.svg");
  background-size: contain;
  opacity: 0.3;
  pointer-events: none;
}

.wc-block-components-product-image { position: relative; }

/* mount the photo inside the card so image edge = text edge (Yohji grid) */
.wc-block-product .wc-block-components-product-image {
  margin: 1.25rem 1.25rem 0;
}

.t-wish {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 11, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 50%;
  color: #f2f0ec;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.t-wish:hover { transform: scale(1.08); }

.t-wish svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.t-wish.is-on { color: #ff4d0a; }
.t-wish.is-on svg { fill: #ff4d0a; stroke: #ff4d0a; }

.t-wish-host { position: relative; }

/* ---------- /wishlist/ page ---------- */

.wl-empty { color: #8e8c87; }

/* wishlist cards borrow the product-card classes wholesale; grid matches
   the shop's three columns */
#ting-wishlist,
#ting-search-results {
  max-width: var(--wp--style--global--wide-size, 1200px) !important;
  width: 100%;
  margin-inline: auto;
}

.wl-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 1024px) { .wl-grid { grid-template-columns: repeat(3, 1fr); } }

.wl-card__link { display: block; text-decoration: none; }

.wl-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}


/* header wishlist count — same bare mono digit as the cart badge */
.ting-header__icons .t-wish-link { position: relative; }

.ting-header__icons .ting-wish-count {
  position: absolute;
  top: 0;
  right: -2px;
  width: auto;
  height: auto;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.7;
  color: inherit;
}


/* ---------- smoothness pass: tiles answer the cursor ---------- */

.ting-cat .ting-tile {
  transition: border-color 0.3s ease;
}

.ting-cat .ting-tile > img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ting-cat:hover .ting-tile { border-color: #3a3a40; }
.ting-cat:hover .ting-tile > img { transform: scale(1.04); }

/* flagship CTA links share the button hover language */
.tf-cta a { transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }


/* product tags are search aliases, not display copy */
.woocommerce div.product .product_meta .tagged_as,
.taxonomy-product_tag.wp-block-post-terms { display: none !important; }


/* ---------- inline header nav (mark: no drawer) ----------
   Set links left, tools right — the drawer is gone; on narrow screens the
   text nav yields and the grid icon carries navigation. */

.ting-header__left .wp-block-navigation .wp-block-navigation-item__content {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9c7c1;
  transition: color 0.2s ease;
}

.ting-header__left .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: #f2f0ec;
}

html[data-tone="light"] .ting-header__left .wp-block-navigation .wp-block-navigation-item__content {
  color: rgba(10, 10, 11, 0.75) !important;
}

html[data-tone="light"] .ting-header__left .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: #0a0a0b !important;
}

@media (max-width: 1023px) {
  .ting-header__left .wp-block-navigation { display: none; }
}


/* ---------- click-to-open category panel (no drawer, no always-on row) ---- */

.ting-menu-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #f2f0ec;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.ting-menu-toggle:hover { opacity: 0.6; }

.ting-menu-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

html[data-tone="light"] .ting-header .ting-menu-toggle { color: #0a0a0b; }

/* the original side drawer: scrim over the page, carbon panel from the left */
.ting-megamenu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5, 5, 6, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ting-megamenu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ting-megamenu__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  padding: 6rem 2.75rem 2.5rem;
  background: #0a0a0b;
  border-right: 1px solid #2a2a2e;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ting-megamenu.is-open .ting-megamenu__inner {
  transform: none;
}

/* running head */
.ting-megamenu__inner::before {
  content: "Menu \2014  EXTINGE";
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e8c87;
  margin-bottom: 2.25rem;
}

/* sign-off */
.ting-megamenu__inner::after {
  content: "Carbon for the everyday.\A \8F7B\800C\5F3A\7684\65E5\5E38\3002";
  white-space: pre-line;
  margin-top: auto;
  font-family: "Zen Dots", Didot, "Playfair Display", "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: #8e8c87;
  position: relative;
  z-index: 1;
}

/* the mark, resting in the panel's lower half as a watermark */
.ting-megamenu__watermark,
.ting-megamenu .ting-megamenu__inner {
  background-repeat: no-repeat;
}

.ting-megamenu__inner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f2f0ec' stroke-opacity='0.05' stroke-width='4' stroke-linecap='round'%3E%3Cellipse cx='32' cy='32' rx='20' ry='10' transform='rotate(-45 32 32)'/%3E%3Cellipse cx='32' cy='32' rx='20' ry='10' transform='rotate(45 32 32)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  background-position: calc(100% + 70px) calc(100% + 40px);
}

.ting-menu-close {
  position: absolute;
  top: 1.6rem;
  right: 2.25rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  color: #f2f0ec;
  cursor: pointer;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.ting-menu-close:hover { opacity: 0.6; }

.ting-menu-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ting-megamenu a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  font-family: "Zen Dots", "Haettenschweiler", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 2.625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f2f0ec;
  text-decoration: none;
  transition: opacity 0.25s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ting-megamenu a i {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: #ff4d0a;
  transform: translateY(-1em);
}

/* focus by dimming the rest */
.ting-megamenu__inner:hover a { opacity: 0.3; }
.ting-megamenu__inner a:hover { opacity: 1; padding-left: 0.75rem; }

/* staggered entry */
.ting-megamenu.is-open a {
  animation: ting-item-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ting-megamenu.is-open a:nth-of-type(1) { animation-delay: 0.12s; }
.ting-megamenu.is-open a:nth-of-type(2) { animation-delay: 0.19s; }
.ting-megamenu.is-open a:nth-of-type(3) { animation-delay: 0.26s; }
.ting-megamenu.is-open a:nth-of-type(4) { animation-delay: 0.33s; }
.ting-megamenu.is-open a:nth-of-type(5) { animation-delay: 0.40s; }


/* ---------- my account, simplified ---------- */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.woocommerce-MyAccount-navigation a {
  display: inline-block;
  padding: 0.5rem 0;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8e8c87;
  text-decoration: none;
  transition: color 0.2s ease;
}

.woocommerce-MyAccount-navigation a:hover { color: #f2f0ec; }

.woocommerce-MyAccount-navigation .is-active a {
  color: #f2f0ec;
  border-bottom: 2px solid #ff4d0a;
}

.woocommerce-MyAccount-content { color: #c9c7c1; }

.woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty { display: none; }


/* autofill and error states keep the sunken ink — no white flashes */
body .wc-block-components-text-input input:-webkit-autofill,
body .wc-block-components-text-input input:-webkit-autofill:hover,
body .wc-block-components-text-input input:-webkit-autofill:focus,
body .wp-block-woocommerce-checkout input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0a0a0b inset;
  -webkit-text-fill-color: #f2f0ec;
  caret-color: #f2f0ec;
}

body .wc-block-components-text-input.has-error input[type="text"],
body .wc-block-components-text-input.has-error input[type="email"],
body .wc-block-components-text-input.has-error input[type="tel"] {
  background: #0a0a0b;
  border-color: #cc1818;
  color: #f2f0ec;
}

/* ---------- front page: sections play like slides (JS paging) ----------
   CSS scroll-snap is deliberately NOT used here. With snap areas a full
   viewport tall and aligned to start, Chrome re-runs its snap animation
   after every wheel/trackpad event, and mid-page the nearest snap point is
   the page you just left — so each tick pushed down while the animation
   pulled back up. A normal trackpad swipe netted zero travel and read as a
   stutter. The deck pages from motion.js instead: free, unfought scrolling
   during the gesture, one settle onto a marker when the gesture ends. */

/* The deck is a desktop idea: phones don't have the vertical room to pin a
   whole section on one screen, so below 782px the slides are ordinary flow
   sections (auto height, no pinning) and the snap markers collapse to
   nothing. motion.js gates its paging on the same 782px line. */
@media (min-width: 782px) {
  .ting-slide {
    /* deck stacking: every slide pins at the top and the next one slides up
       OVER it (DOM order = paint order for positioned siblings). The covered
       page never moves — it is buried, not pushed. */
    position: sticky;
    top: 0;
    box-sizing: border-box;
    height: 100svh;
    overflow: clip; /* a pinned card cannot exceed its screen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 -28px 64px rgba(0, 0, 0, 0.55); /* covering edge reads as depth */
  }

  /* Page boundaries live on static markers, NOT on the pinned slides: a stuck
     card sits at the top of the viewport for its whole page, so it cannot
     report where a page begins. Each marker spans one screen at the slide's
     flow position and takes no layout space; motion.js reads their offsets. */
  .ting-snapmark {
    height: 100svh;
    margin-bottom: -100svh;
    pointer-events: none;
  }
}

/* stacked cards must be opaque or the buried page shines through */
.ting-slide:not(.has-background) {
  background: #0a0a0b;
}

/* the closing page scrolls up over the last pinned slide too */
body.home .ting-snap-start {
  position: relative;
  background: #0a0a0b;
}

/* the slide is a flex column now — WP's selfStretch flex-basis (e.g. the
   proof lead's 560px) must not become a HEIGHT, and cross-axis auto margins
   must not shrink children to fit-content: full width, capped by each
   child's constrained max-width, exactly as in block flow. */
@media (min-width: 782px) {
  .ting-slide > * {
    flex: 0 0 auto !important;
    width: 100%;
  }
}

/* the closing page (trust bar / newsletter / footer) is the last page stop —
   its own top is the boundary, so it needs no marker of its own */

/* ---------- closing page: one adaptive screen --------------------------------
   Trust bar pins the top, the newsletter centres in the slack, the footer
   sits on the bottom edge. min-height (not height) so short viewports get a
   naturally taller, scrollable page instead of clipped content. */

.tc-page {
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-block: 6.5rem 2.5rem;
}

.tc-mid {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.tc-mid .nl-grid { width: 100%; }

.tc-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid #1c1c20;
  padding-top: 2rem;
}

.tc-brand {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.tc-tag {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8e8c87;
}

.tc-nav {
  display: flex;
  gap: 3rem;
  font-size: 0.875rem;
}

.tc-nav a {
  color: #f2f0ec;
  text-decoration: none;
  transition: color 0.25s ease;
}

.tc-nav a:hover { color: #8e8c87; }

.tc-copy {
  margin: 2rem 0 0;
  font-size: 0.75rem;
  color: #8e8c87;
}

/* ---------- slide choreography: every section fits its one screen ----------
   Media heights are viewport-relative caps so the taller sections (flagship,
   proof, full line, in detail) compress onto a single slide; inline
   aspect-ratios in the template need the !important to yield. */

/* Desktop only: on mobile the slides flow free, so tiles keep their inline
   aspect-ratios and media needs no viewport caps. */
@media (min-width: 782px) {
  /* 02 the flagship: photo capped, spec table tightened, columns centered */
  .ting-slide .tf-grid { align-items: center; margin-top: 2rem; }
  .ting-slide .tf-media img { max-height: 48svh; width: 100%; object-fit: cover; }
  .ting-slide .tf-desc { margin-top: 1.25rem; }
  .ting-slide .tf-specs { margin-top: 1.5rem; }
  .ting-slide .tf-specs > div { padding: 0.55rem 1rem; }
  .ting-slide .tf-cta { margin-top: 1.5rem; }
  .ting-slide .tf-fine { margin-top: 1rem; }

  /* 04 proof: video tiles trade the 3/4 portrait for a viewport-capped height */
  .ting-slide .ting-figure > .ting-tile {
    aspect-ratio: auto !important;
    height: min(42svh, 460px);
  }

  /* 05 the full line: category cards capped the same way */
  .ting-slide .ting-cat .ting-tile {
    aspect-ratio: auto !important;
    height: min(38svh, 420px);
  }

  /* 05 start here: the ladder sits centered on its own slide */
  .ting-slide .ting-entry { margin-top: 2.5rem; }

  /* 06 in detail: hero row + support row share the screen */
  .ting-slide .ting-tiles--detail .ting-tile {
    aspect-ratio: auto !important;
    height: min(36svh, 400px);
  }

  .ting-slide .ting-tiles--3 > .ting-tile {
    aspect-ratio: auto !important;
    height: min(22svh, 250px);
  }

  /* 01 the number: quieter gap once the slide centers it */
  .ting-slide .tn-grid { margin-top: 2.5rem; }
  .ting-slide .tn-note { margin-top: 2.5rem; }
}

/* short windows (laptops, split screens): tighter chrome so the denser
   slides — flagship, proof, in detail — still land on one screen */
@media (min-width: 782px) and (max-height: 840px) {
  .ting-slide {
    /* top clears the 72px fixed header so section labels stay visible;
       inline template padding must yield */
    padding-top: 76px !important;
    padding-bottom: 1.5rem !important;
  }

  /* proof: the only slide with a bare h2 child; pull it up a notch */
  .ting-slide > h2 { margin-top: 1.25rem !important; }

  .ting-slide .ting-figure > .ting-tile { height: min(40svh, 460px); }
  .ting-slide .ting-tiles--detail .ting-tile { height: min(34svh, 400px); }
  .ting-slide .ting-tiles--3 > .ting-tile { height: min(21svh, 250px); }

  .ting-slide .tf-grid { margin-top: 1.25rem; }
  .ting-slide .tf-desc { margin-top: 1rem; }
  .ting-slide .tf-specs { margin-top: 1.25rem; }
  .ting-slide .tf-specs > div { padding: 0.4rem 1rem; }
  .ting-slide .tf-cta { flex-direction: row; }
  .ting-slide .tf-cta a { flex: 1; }
  .ting-slide .tf-fine { margin-top: 0.75rem; }

  .ting-slide .tn-grid,
  .ting-slide .tn-note { margin-top: 1.75rem; }
}

/* ---------- proof tiles: looping material films ----------
   Motion studies rendered from our own carbon photos (see photo/CREDITS.md)
   until the real bench-test films are shot — press-in zoom for static load,
   repeated falling sweep for corner drop, ±15° twist for torsion. */
.ting-tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ting-figure .ting-tile > video {
  filter: brightness(0.92) saturate(0.85);
}

/* ---------- support chat launcher (brand plate over tawk's stock bubble) ---------- */

.ting-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99990; /* under tawk's own iframe so the open window wins the corner */
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 11px;
  background: #131315;
  border: 1px solid #3a3a40;
  border-radius: 999px; /* circle at rest, pill once the label slides out */
  color: #f2f0ec;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: border-color 160ms ease, background 160ms ease;
}

/* our display beats the UA's [hidden] rule — restore it */
.ting-chat[hidden] { display: none; }

.ting-chat:hover,
.ting-chat:focus-visible {
  background: #1a1a1c;
  border-color: #ff4d0a;
}

.ting-chat svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* label lives inside the plate; hover/focus slides it out.
   Touch has no hover — there the button simply stays an icon circle. */
.ting-chat__label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: max-width 220ms ease, opacity 160ms ease, margin-left 220ms ease;
}

.ting-chat:hover .ting-chat__label,
.ting-chat:focus-visible .ting-chat__label {
  max-width: 120px;
  opacity: 1;
  margin-left: 8px;
}

/* presence badge rides the icon's shoulder so it holds still during expansion */
.ting-chat__dot {
  position: absolute;
  top: 7px;
  left: 25px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8e8c87; /* offline / away */
  box-shadow: 0 0 0 2px #131315;
  transition: box-shadow 160ms ease;
}

.ting-chat:hover .ting-chat__dot,
.ting-chat:focus-visible .ting-chat__dot { box-shadow: 0 0 0 2px #1a1a1c; }

.ting-chat.is-online .ting-chat__dot { background: #ff4d0a; }

/* unread count, top-right of the plate */
.ting-chat__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff4d0a;
  color: #fff;
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  line-height: 1;
}

.ting-chat__badge[hidden] { display: none; }

@media (max-width: 640px) {
  .ting-chat { right: 14px; bottom: 14px; }
}

/* ============================================================
   Mobile adaptation. 782px is the same line WP stacks columns
   on and the deck (above) switches off at; 640px is the phone
   tier where header tools thin out and grids tighten.
   ============================================================ */

/* ---- drawer utility row: Shop all lives in the index; Account / Wishlist /
   Search move here so the phone header can shed their icons. All sizes. ---- */
.ting-megamenu .ting-megamenu__util {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2.25rem;
  position: relative;
  z-index: 1;
}

.ting-megamenu .ting-megamenu__util a {
  font-family: "Zen Dots", ui-monospace, "SF Mono", Menlo, monospace;
  font-stretch: 100%;
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: #8e8c87;
  padding: 0.4rem 0;
  opacity: 1;
  transition: color 0.2s ease;
}

.ting-megamenu .ting-megamenu__util a:hover {
  opacity: 1;
  padding-left: 0;
  color: #f2f0ec;
}

.ting-megamenu.is-open a:nth-of-type(6) { animation-delay: 0.47s; }

@media (max-width: 781px) {
  /* slides in flow: quieter vertical rhythm than the deck's 5rem (inline) */
  .ting-slide {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* the closing screen hugs its content instead of chasing a viewport */
  .tc-page {
    min-height: 0;
    padding-block: 3.5rem 2rem;
    gap: 3.5rem;
  }

  .tn-grid { gap: 2.75rem; margin-top: 2.5rem; }
  .tn-rows { gap: 2rem; }
  .tn-note { margin-top: 2.5rem; }
  .tf-grid { gap: 2.5rem; margin-top: 2.5rem; }
  .nl-grid { gap: 2.5rem; }
}

@media (max-width: 640px) {
  /* header: menu · EXTINGE · search / wishlist / cart. Shop-all and Account
     ride in the drawer's utility row instead of the bar. */
  .ting-header__icons { gap: 0.5rem; }
  .ting-header__icons a[aria-label="All products"],
  .ting-header__icons a[aria-label="Account"] { display: none; }
  .ting-header .wp-block-site-title a { font-size: 1.125rem; }

  /* drawer: phone-sized chrome, index type a step down */
  .ting-megamenu__inner {
    padding: 5rem 1.5rem 2rem;
    background-size: 240px 240px;
  }
  .ting-menu-close { right: 1.25rem; }
  .ting-megamenu a { font-size: 2rem; padding: 0.55rem 0; }

  /* entry ladder: category label rides above the name row */
  .ting-entry__row {
    grid-template-columns: minmax(0, 1fr) auto 24px;
    grid-template-areas:
      "cat  cat   cat"
      "name price arrow";
    gap: 0.3rem 1rem;
    align-items: baseline;
  }
  .ting-entry__row span { grid-area: cat; }
  .ting-entry__row b { grid-area: name; }
  .ting-entry__row em { grid-area: price; }
  .ting-entry__row i { grid-area: arrow; justify-self: end; }

  /* product cards: half-width cards, one step down so names hold one line */
  .wc-block-product h2 { font-size: 0.6875rem !important; padding: 1rem 1rem 0; }
  .wc-block-product .wc-block-components-product-image { margin: 1rem 1rem 0; }
  .wc-block-product .wp-block-woocommerce-product-price { padding: 0 1rem 1rem; }
  .wc-block-product .wc-block-components-product-price { font-size: 0.8125rem; }
  ul.products li.product .woocommerce-loop-product__title { font-size: 0.9375rem; padding: 0.9rem 1rem 0.15rem; }
  ul.products li.product .price { padding: 0 1rem 1rem; }

  /* category cards: half-width tiles need the smaller label voice */
  .ting-cat .ting-tile b { font-size: 0.9375rem; }
  .ting-cat__row span { font-size: 0.6875rem; letter-spacing: 0.12em; }

  /* in detail: one column — the macro's span-2 (inline) must not force a
     phantom second track */
  .ting-tiles--detail { grid-template-columns: 1fr; }
  .ting-tiles--detail > .ting-tile { grid-column: auto !important; }

  /* cart line items: the table's min-content (image + qty row + total) runs
     ~32px past a 390px screen — slimmer thumb, tighter cells, smaller total */
  body .wc-block-cart-items .wc-block-cart-item__image { width: 64px; padding-right: 0.5rem; }
  body .wc-block-cart-item__image img { max-width: 64px; }
  body .wc-block-cart-item__total .wc-block-components-product-price { font-size: 0.8125rem; }

  /* footer nav breathes less on a phone */
  .tc-nav { gap: 1.75rem; }

  /* weight rows: the kg figure stays clear of the wrapped labels */
  .tn-row__kg { font-size: 1.75rem; }
}