@layer core, brand;

@layer core {
  /* ── document mechanics ─────────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; height: auto; display: block; }
  /* A11Y MECHANIC: the islands toggle visibility via [hidden]. Never re-enable in brand. */
  [hidden] { display: none !important; }
  /* A11Y MECHANIC: visible keyboard focus (WCAG 2.4.7). Brand may re-color via --color-accent;
     it must never remove the ring (no outline:none — the 16A contract lint flags this for authors;
     it is not a security guarantee — see validateBrandSheetCss / 16A "Security note / non-goal"). */
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  /* page frame (the document shell's #root) */
  #root { max-width: 68rem; margin: 0 auto; padding: var(--space-lg); }

  /* form controls inherit the brand's type; disabled affordance is behavioral */
  button, input, select, textarea { font: inherit; }
  button { cursor: pointer; }
  button[disabled] { cursor: not-allowed; }

  /* ── cart drawer (tui-cart-drawer) — dialog overlay mechanics ───────────────── */
  /* The focus trap (useFocusTrap) assumes the dialog visually overlays the page and the backdrop
     covers + receives the outside click. Positioning here is a11y-load-bearing (16A §5). */
  .tui-cart-drawer-root { position: fixed; inset: 0; z-index: 100; }
  .tui-cart-drawer__backdrop { position: absolute; inset: 0; background: var(--color-fg); opacity: 0.4; }
  .tui-cart-drawer {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(24rem, 100vw);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: var(--space-sm);
    padding: var(--space-md);
    overflow-y: auto;
  }
  .tui-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
  .tui-cart-drawer__lines { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-y: auto; }
  .tui-cart-drawer__line {
    display: grid; grid-template-columns: auto 1fr auto auto auto;
    gap: var(--space-sm); align-items: center;
    padding: var(--space-sm) 0;
  }

  /* ── cart line thumbnail (tui-cart-thumb) — a square product tile; the brand paints the fill. ── */
  .tui-cart-thumb {
    display: block; flex: 0 0 auto; width: 4.5rem; height: 4.5rem; overflow: hidden;
    background: var(--color-border);
  }
  .tui-cart-thumb__img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .tui-cart-drawer__footer { margin-top: auto; display: grid; gap: var(--space-sm); }
  .tui-cart-drawer__subtotal { display: flex; justify-content: space-between; gap: var(--space-sm); margin: 0; }

  /* ── quantity stepper (tui-qty) ─────────────────────────────────────────────── */
  .tui-qty { display: inline-flex; align-items: center; gap: var(--space-xs); }
  .tui-qty__input { width: 3.5rem; text-align: center; }

  /* ── form field (tui-field) + checkout form layout ──────────────────────────── */
  .tui-field { display: grid; gap: var(--space-xs); }
  .tui-checkout-form { display: grid; gap: var(--space-sm); }

  /* ── cart page view (tui-cart__*) ───────────────────────────────────────────── */
  .tui-cart__lines { list-style: none; margin: 0; padding: 0; }
  .tui-cart__line {
    display: grid; grid-template-columns: auto 2fr 1fr auto 1fr auto;
    gap: var(--space-sm); align-items: center;
    padding: var(--space-sm) 0;
  }
  @media (max-width: 40rem) { .tui-cart__line { grid-template-columns: auto 1fr 1fr; } }
  .tui-cart__qty-input, .tsec-product-detail__qty-input { width: 4rem; }
  .tui-cart__totals { margin-top: var(--space-md); max-width: 20rem; margin-left: auto; }
  .tui-cart__row { display: flex; justify-content: space-between; margin: var(--space-xs) 0; }
  .tui-cart__actions { display: flex; gap: var(--space-sm); justify-content: flex-end; margin-top: var(--space-md); }

  /* ── checkout + confirmation views ──────────────────────────────────────────── */
  .tui-checkout { display: grid; gap: var(--space-lg); }
  .tui-checkout__fieldset { display: grid; gap: var(--space-sm); padding: var(--space-md); }
  .tui-checkout__pay-total { display: flex; justify-content: space-between; }
  .tui-confirmation__details { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-sm); }

  /* ── account + auth pages (tui-account / tui-auth) — structural only (part 09) ─ */
  .tui-auth { max-width: 24rem; display: grid; gap: var(--space-lg); }
  .tui-auth__form, .tui-auth__alt { display: grid; gap: var(--space-sm); }
  .tui-auth__links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
  .tui-account { display: grid; gap: var(--space-lg); align-items: start; }
  @media (min-width: 48rem) { .tui-account { grid-template-columns: 12rem 1fr; } }
  .tui-account__nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  @media (min-width: 48rem) { .tui-account__nav { flex-direction: column; } }
  .tui-account__panel { display: grid; gap: var(--space-md); min-width: 0; }
  .tui-account__form { display: grid; gap: var(--space-sm); max-width: 28rem; }
  .tui-account-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
  .tui-account-list__item {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-sm); flex-wrap: wrap;
    padding: var(--space-sm) 0;
  }
  .tui-account-list__actions { display: flex; gap: var(--space-xs); }

  /* ── sections (tsec-*) — structural grids ───────────────────────────────────── */
  /* TEXTURE HOOKS (16A §7.4): section shells consume the OPTIONAL sheet-local custom properties
     --texture-light / --texture-scale with inert fallbacks — unset hooks render nothing, so this
     is mechanics, not decoration (store #1 is pixel-identical). These are the ONLY core var()s
     with fallbacks: --texture-* are optional-by-design, unlike the always-injected token set.
     --texture-dark is the reserved dark-surface variant; a brand routes it by re-pointing
     --texture-light on a dark section instance (e.g. "--texture-light: var(--texture-dark)").
     The tile <image> value itself CANNOT come from the brand sheet (url() is banned there,
     16A §5.1/§5.4) — it arrives as a server-rendered inline custom property on the section from
     trusted page-doc/media data. */
  .tsec-hero, .tsec-product-grid, .tsec-product-detail, .tsec-campaign {
    background-image: var(--texture-light, none);
    background-size: var(--texture-scale, 600px);
  }
  .tsec-hero { padding: var(--space-lg) 0; }
  .tsec-product-grid__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-md);
  }
  .tui-product-card { display: block; }
  .tui-product-card__media-shell { display: block; }
  .tsec-product-detail {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-lg); align-items: start;
  }
  /* Groups the PDP media and buying controls so sticky brand treatments stop before downstream
     related/review content. Display contents preserves the default two-column layout. */
  .tsec-product-detail__hero { display: contents; }
  @media (max-width: 40rem) { .tsec-product-detail { grid-template-columns: 1fr; } }
  .tsec-product-detail__thumbs { list-style: none; display: flex; gap: var(--space-xs); padding: 0; margin: var(--space-sm) 0 0; }
  .tsec-product-detail__slide { min-width: 0; }
  .tsec-product-detail__thumb img { width: 4rem; height: 4rem; object-fit: cover; }
  .tsec-product-detail__form { display: grid; gap: var(--space-sm); margin-top: var(--space-md); max-width: 22rem; }
  .tsec-product-detail__form label { display: grid; gap: var(--space-xs); }

  /* ── chunk A1 (plan: second-store §C-A): header / footer / statement-banner / hero-overlay /
     reveal — STRUCTURAL mechanics only; every paint decision is the brand sheet's. ──────────── */

  /* A11Y MECHANIC: keep a heading in the accessibility tree when a logo image carries the visual
     brand (hero overlay). Standard visually-hidden pattern; brand sheets must not repurpose it. */
  .tsec-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }

  /* header — one sticky shell so the announcement bar and nav stick TOGETHER. z-50 sits under the
     cart drawer overlay (z-100): chrome never covers the dialog. */
  .tsec-header { position: sticky; top: 0; z-index: 50; }
  .tsec-header__announcement { margin: 0; text-align: center; padding: var(--space-xs) var(--space-sm); }
  .tsec-header__nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); padding: var(--space-xs) var(--space-md); min-height: 3rem;
  }
  .tsec-header__home { display: inline-flex; align-items: center; }
  .tsec-header__logo { max-height: 1.5rem; width: auto; }
  .tsec-header__links {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  }
  /* MOBILE header — a combined cart+menu trigger with item-count + total rows to its left. Hidden on
     desktop; the desktop link list is hidden on mobile (breakpoint 48rem). Opens the combined menu+cart
     overlay (island-menu.js). The hamburger icon is drawn in CSS (no inline SVG/style — CSP-safe). */
  .tsec-header__mobile { display: none; align-items: center; gap: var(--space-sm); }
  .tsec-header__cart-meta { display: grid; text-align: right; line-height: 1.1; }
  .tsec-header__menu-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; padding: 0; background: none; border: 0; cursor: pointer;
    color: inherit;
  }
  .tsec-header__menu-icon { position: relative; display: block; width: 1.25rem; height: 2px; background: currentColor; }
  .tsec-header__menu-icon::before, .tsec-header__menu-icon::after {
    content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  }
  .tsec-header__menu-icon::before { top: -6px; }
  .tsec-header__menu-icon::after { top: 6px; }
  @media (max-width: 48rem) {
    .tsec-header__links { display: none; }
    .tsec-header__mobile { display: flex; }
  }

  /* footer — contentinfo landmark; dark-texture consumer (16A §7.4). */
  .tsec-footer {
    background-image: var(--texture-dark, none);
    background-size: var(--texture-scale, 600px);
    padding: var(--space-lg) var(--space-md);
    display: grid; gap: var(--space-md);
  }
  .tsec-footer__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); flex-wrap: wrap;
  }
  .tsec-footer__logo { max-height: 1.25rem; width: auto; }
  .tsec-footer__links {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: var(--space-md); flex-wrap: wrap;
  }
  .tsec-footer__bottom { display: grid; gap: var(--space-sm); justify-items: start; }
  .tsec-footer__legal { margin: 0; }

  /* ── mobile menu+cart overlay (tui-menu) — a full-width dialog above the drawer (z-110). Structure
     only: the dark-translucent look + backdrop blur are the brand sheet's. Three-part flex column —
     LINKS (top, fixed), CART (middle, overflow-scroll), CHECKOUT (bottom, fixed). Mobile-only: even if
     the state flips on desktop it stays hidden. The scroll-lock class freezes the page behind. */
  .tui-menu-root { position: fixed; inset: 0; z-index: 110; display: none; }
  .tui-menu-root[data-state='open'] { display: block; }
  .tui-menu {
    position: absolute; inset: 0; width: 100%;
    display: flex; flex-direction: column;
    background: var(--color-bg);
  }
  .tui-menu__top { flex: 0 0 auto; display: grid; gap: var(--space-sm); padding: var(--space-md); }
  .tui-menu__close { justify-self: end; background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; color: inherit; }
  .tui-menu__link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
  .tui-menu__cart { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--space-md); }
  .tui-menu__cart-title { margin: 0 0 var(--space-sm); }
  .tui-menu__lines { list-style: none; margin: 0; padding: 0; }
  .tui-menu__line {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
    gap: var(--space-sm); padding: var(--space-sm) 0;
  }
  .tui-menu__footer { flex: 0 0 auto; display: grid; gap: var(--space-sm); padding: var(--space-md); }
  .tui-menu__checkout { display: block; text-align: center; padding: var(--space-sm) var(--space-md); }
  /* the overlay is a MOBILE surface — never shows on desktop even if data-state flips open. */
  @media (min-width: 48.0625rem) { .tui-menu-root[data-state='open'] { display: none; } }
  /* scroll-lock: freeze the page behind the open overlay (added to <html> by the island). */
  .tui-scroll-lock { overflow: hidden; }

  /* full-bleed banner mechanics — shared by hero[data-layout=overlay] + statement-banner. The
     media sits BEHIND, the optional scrim between, the content above; the scrim/filter PAINT is
     brand-sheet work keyed off __scrim / [data-media-filter]. */
  .tsec-hero[data-layout='overlay'], .tsec-statement-banner {
    position: relative; overflow: hidden;
    display: grid; place-items: center;
    background-image: var(--texture-dark, none);
    background-size: var(--texture-scale, 600px);
  }
  .tsec-hero[data-layout='overlay'] { min-height: 60vh; padding: var(--space-lg) var(--space-md); }
  .tsec-statement-banner { padding: var(--space-lg) var(--space-md); }
  .tsec-hero[data-layout='overlay'] .tsec-hero__media, .tsec-statement-banner__media {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .tsec-hero__scrim, .tsec-statement-banner__scrim { position: absolute; inset: 0; }
  .tsec-hero__content, .tsec-statement-banner__content {
    position: relative; z-index: 2;
    display: grid; justify-items: center; text-align: center; gap: var(--space-sm);
  }
  .tsec-hero__content .tsec-hero__logo { max-width: min(32rem, 72vw); height: auto; }

  /* scroll-reveal mechanics (16A §7.5) — ONLY the island arms elements ([data-reveal-armed]), so
     no-JS renders fully visible; consumption uses the always-emitted --motion-reveal-* tokens.
     Reduced motion: the island already skips arming; this rule is the belt-and-braces backstop. */
  [data-reveal-armed] {
    transition:
      opacity var(--motion-reveal-duration) var(--motion-reveal-ease),
      transform var(--motion-reveal-duration) var(--motion-reveal-ease);
  }
  [data-reveal-armed]:not([data-revealed]) {
    opacity: 0;
    transform: translateY(var(--motion-reveal-distance));
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal-armed], [data-reveal-armed]:not([data-revealed]) {
      transition: none; opacity: 1; transform: none;
    }
  }

  /* ── chunk A2 (plan: second-store §C-A): quick-add / swatches / footnotes / drawer motion —
     STRUCTURAL mechanics only; every paint decision is the brand sheet's. ─────────────────────── */

  /* product-grid header row (eyebrow + heading + link slot) */
  .tsec-product-grid__header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-sm); margin-bottom: var(--space-md);
  }
  .tsec-product-grid__eyebrow { margin: 0 0 var(--space-xs); }
  .tsec-product-grid__heading { margin: 0; }

  /* quick-add — a sibling of the card link (never nested in the <a>); full-width tap target */
  .tsec-product-grid__quick-add { margin-top: var(--space-xs); }
  .tsec-product-grid__quick-add-btn { display: block; width: 100%; min-height: 2.75rem; }

  /* variant SWATCH radiogroup (tsec-product-detail__swatches) — a11y-load-bearing: the radios are
     .tsec-visually-hidden, so the focus ring MUST move to the 48px label (WCAG 2.4.7), and the
     selected state must stay VISIBLE (functional). Brand recolors both freely; never removes them. */
  .tsec-product-detail__swatches {
    display: flex; flex-wrap: wrap; gap: var(--space-xs);
    border: 0; padding: 0; margin: 0;
  }
  .tsec-product-detail__swatch { position: relative; display: inline-flex; }
  .tsec-product-detail__swatch-label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 3rem; min-height: 3rem; padding: 0 var(--space-xs);
    border: 1px solid var(--color-border);
    cursor: pointer;
  }
  .tsec-product-detail__swatch input:focus-visible + .tsec-product-detail__swatch-label {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
  }
  .tsec-product-detail__swatch input:checked + .tsec-product-detail__swatch-label {
    border-color: var(--color-fg);
    box-shadow: inset 0 0 0 1px var(--color-fg);
  }

  /* PDP footnotes */
  .tsec-product-detail__footnotes {
    list-style: none; margin: var(--space-md) 0 0; padding: var(--space-sm) 0 0;
    border-top: 1px solid var(--color-border);
    display: grid; gap: var(--space-xs);
  }

  /* cart drawer MOTION (16A §7.5) — consumes the always-emitted --motion-* tokens (no fallbacks:
     the injected token set carries defaults). The ISLAND drawer persists in the DOM and animates
     via [data-state]; the Preact drawer (mounts only when open, admin/preview surfaces) has no
     data-state and simply appears at rest. A11Y MECHANIC: prefers-reduced-motion disables the
     slide/fade entirely — brands tune the tokens, never re-enable motion under reduce. */
  .tui-cart-drawer {
    transform: translateX(100%);
    transition: transform var(--motion-drawer-duration) var(--motion-drawer-ease);
  }
  .tui-cart-drawer__backdrop {
    opacity: 0;
    transition: opacity var(--motion-drawer-duration) var(--motion-drawer-ease);
  }
  .tui-cart-drawer-root[data-state='open'] .tui-cart-drawer { transform: none; }
  .tui-cart-drawer-root[data-state='open'] .tui-cart-drawer__backdrop { opacity: 0.4; }
  .tui-cart-drawer-root:not([data-state]) .tui-cart-drawer { transform: none; }
  .tui-cart-drawer-root:not([data-state]) .tui-cart-drawer__backdrop { opacity: 0.4; }
  /* Island drawer closed: invisible + inert, but kept in the DOM so the exit transition plays;
     'visibility' flips atomically when the hide transition ends. */
  .tui-cart-drawer-root[data-state='closed'] {
    visibility: hidden; pointer-events: none;
    transition: visibility var(--motion-drawer-duration);
  }
  @media (prefers-reduced-motion: reduce) {
    .tui-cart-drawer, .tui-cart-drawer__backdrop, .tui-cart-drawer-root[data-state='closed'] {
      transition: none;
    }
  }
}


@layer brand {
/* TERRA UNKNOWN brand sheet — bone/ink/taupe, UPPERCASE wide-tracked voice, square corners. */

/* ── §5.1 overflow palette — declared here, consumed ONLY via var() ───────────────── */
:root {
  --tu-surface-dark: #1E1D1B;      /* nav black / hero fallback */
  --tu-surface-darker: #171613;    /* footer black */
  --tu-tile: #2B2A27;              /* product image tiles */
  --tu-tile-hover: #34322E;
  --tu-concrete: #51524F;          /* dark, center-lit surface behind transparent product cutouts */
  --tu-concrete-hover: #585956;
  --tu-concrete-light: rgba(255, 255, 255, 0.17);
  --tu-concrete-dark: rgba(10, 10, 9, 0.48);
  --tu-cutout-shadow: rgba(8, 8, 7, 0.58);
  --tu-ink-hover: #3A372F;         /* solid-dark button hover */
  --tu-bg-alt: #EAE7E1;            /* drawer footer / notes */
  --tu-black: #0A0A0A;             /* near-black — the mobile overlay checkout button */
  --tu-body-text: #57544E;         /* descriptions */
  --tu-faint: #9A958B;             /* REMOVE + tertiary labels */
  --tu-input-border: #CFCBC1;      /* unselected inputs/swatches */
  --tu-hairline-2: #E2DED5;        /* line-item dividers */
  --tu-hairline-dark: #2B2925;     /* dividers on dark */
  --tu-on-dark-tagline: #CFC9BE;
  --tu-on-dark-sub: #A39C8F;
  --tu-nav-inactive: #B5B0A6;
  --tu-footer-link: #8F8A80;
  --tu-footer-legal: #6B675F;
  /* mobile menu+cart overlay — dark translucent surfaces (color-mix lives in a custom-prop decl per
     the §5.1 carve-out; the .tui-menu rules read them via var()). */
  --tu-menu-bg: color-mix(in srgb, var(--tu-surface-dark) 84%, transparent);
  --tu-menu-footer-bg: color-mix(in srgb, var(--tu-surface-darker) 72%, transparent);
  --tu-banner-bright: #F1EFEA;
  --tu-backdrop: rgba(23, 22, 19, 0.5);
  --tu-scrim-ghost: rgba(244, 242, 237, 0.7);   /* ghost-button border on dark */
  /* hero scrim stops (inventory §8: 3-stop gradient over the media) */
  --tu-scrim-top: rgba(30, 29, 27, 0.35);
  --tu-scrim-mid: rgba(30, 29, 27, 0.15);
  --tu-scrim-bot: rgba(30, 29, 27, 0.6);
  /* topo-texture overlays (§7.4 recipe) — tile urls arrive server-side per section instance */
  --tu-topo-overlay: color-mix(in srgb, var(--color-bg) 50%, transparent);
  --tu-topo-overlay-dark: color-mix(in srgb, var(--tu-tile) 50%, transparent);
  --tu-topo-overlay-deep: color-mix(in srgb, var(--tu-surface-darker) 50%, transparent);
  /* tile hover runs slightly slower than the 0.25s hover token (inventory §1 hover system) */
  --tu-dur-tile: 0.3s;
  --tu-dur-border: 0.2s;                        /* swatch/input border ease */
  /* full-bleed layout: section backgrounds span the viewport; CONTENT is capped + gutter'd
     (inventory §"Spacing & shape": content max 1240px, gutters clamp(20px,4vw,48px)). */
  --tu-content-max: 77.5rem;                    /* 1240px */
  --tu-gutter: clamp(20px, 4vw, 48px);
  --tu-section-y: clamp(48px, 9vw, 120px);
}

/* ── full-width frame: drop the core 68rem #root cap so section backgrounds bleed edge-to-edge;
      each section's CONTENT element re-imposes the 1240px centered container below (brand overrides
      a core LAYOUT choice — 16A allows this; a11y/mechanics in core are untouched). ────────────── */
#root { max-width: none; margin: 0; padding: 0; }
.tsec-header__announcement,
.tsec-header__nav,
.tsec-hero__content,
.tsec-statement-banner__content,
.tsec-product-grid__header,
.tsec-product-grid__grid,
.tsec-product-detail,
.tsec-footer__top,
.tsec-footer__bottom,
.tui-cart,
.tui-checkout,
.tui-confirmation {
  max-width: var(--tu-content-max);
  margin-inline: auto;
  padding-inline: var(--tu-gutter);
}
.tsec-header__nav { min-height: 52px; }

/* ── document ─────────────────────────────────────────────────────────────────────── */
body {
  margin: 0;
  font-family: var(--type-body);
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--tu-topo-overlay), var(--tu-topo-overlay)), var(--texture-light, none);
  background-size: cover, var(--texture-scale, 600px);
  background-attachment: scroll;
  color: var(--color-fg);
  line-height: var(--type-leading);
  font-size: var(--type-scale-base);
}
::selection { background: var(--color-accent); color: var(--color-accent-fg); }
a { color: inherit; transition: color var(--motion-hover-duration) ease; }
a:hover { color: var(--color-accent); }

/* ── the label voice: UPPERCASE, wide tracking, small, w600 ───────────────────────── */
.tsec-hero__eyebrow,
.tsec-product-grid__heading,
.tui-cart__title,
.tui-cart-drawer__title,
.tui-checkout__title,
.tui-checkout__legend,
.tui-confirmation__title,
.tui-field__label,
.tui-auth__title {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: var(--type-weight-bold);
}
.tsec-hero__eyebrow { color: var(--color-accent); font-size: var(--type-scale-sm); letter-spacing: 0.3em; }

/* ── buttons: solid dark / outlined invert (hover system, inventory §1) ───────────── */
.tsec-product-detail__add,
.tui-cart__checkout,
.tui-cart-drawer__checkout,
.tui-checkout-form__submit,
.tui-auth__submit,
button[type='submit'] {
  display: inline-block;
  padding: 17px 24px;
  border: 1px solid var(--color-fg);
  border-radius: var(--radius-sm);
  background: var(--color-fg);
  color: var(--color-accent-fg);
  font-family: var(--type-body);
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-hover-duration) ease, color var(--motion-hover-duration) ease;
}
.tsec-product-detail__add:hover,
.tui-cart__checkout:hover,
.tui-cart-drawer__checkout:hover,
.tui-checkout-form__submit:hover,
.tui-auth__submit:hover {
  background: var(--tu-ink-hover);
  border-color: var(--tu-ink-hover);
}
/* cart line thumbnail — the product image sits on the brand's dark tile (matches the grid/PDP tiles) */
.tui-cart-thumb {
  background-color: var(--tu-tile);
}

/* ── mobile menu+cart overlay + its header trigger ─────────────────────────────────
   Full-width dark-translucent surface with the page blurred behind it (backdrop-filter). Links top,
   scrollable cart middle, fixed checkout bottom (structure in core). Colours here only. */
.tsec-header__cart-meta {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tu-nav-inactive);
}
.tsec-header__menu-trigger { color: var(--color-accent-fg); }
.tui-menu {
  background: var(--tu-menu-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--color-accent-fg);
}
.tui-menu__close { color: var(--color-accent-fg); }
.tui-menu__link {
  color: var(--color-accent-fg); text-decoration: none;
  font-size: var(--type-scale-lg); letter-spacing: 0.18em; text-transform: uppercase;
}
.tui-menu__link:hover { color: var(--color-accent); }
.tui-menu__cart-title {
  color: var(--tu-on-dark-sub); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
}
.tui-menu__line { border-bottom: 1px solid var(--tu-hairline-dark); }
.tui-menu__line-name {
  color: var(--color-accent-fg); font-size: 12px; letter-spacing: 0.14em; text-decoration: none;
}
.tui-menu__line-total { color: var(--tu-on-dark-sub); }
.tui-menu__empty { color: var(--tu-nav-inactive); }
.tui-menu__line .tui-qty { color: var(--color-accent-fg); }
/* checkout sits FLUSH on the overlay plane — no distinct footer bar (operator). */
.tui-menu__footer {
  background: transparent;
}
.tui-menu__subtotal {
  display: flex; justify-content: space-between; gap: var(--space-sm); margin: 0;
  color: var(--color-accent-fg); letter-spacing: 0.14em;
}
.tui-menu__checkout {
  background: var(--tu-black); color: var(--color-accent-fg);
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px;
}
.tui-menu__checkout:hover { background: var(--tu-ink-hover); color: var(--color-accent-fg); }
/* Core historically limited this combined overlay to mobile. Terra Unknown uses it on desktop too. */
.tui-menu-root[data-state='open'] { display: block; }
@media (min-width: 37.5rem) {
  .tui-menu__top,
  .tui-menu__cart,
  .tui-menu__footer {
    box-sizing: border-box;
    width: min(100%, 600px);
    max-width: 600px;
    margin-inline: auto;
  }
}
.tui-cart__continue,
.tui-confirmation__continue {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--color-fg);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg);
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--motion-hover-duration) ease, color var(--motion-hover-duration) ease;
}
.tui-cart__continue:hover,
.tui-confirmation__continue:hover {
  background: var(--color-fg);
  color: var(--color-accent-fg);
}
button[disabled] { opacity: 0.5; }

/* ── product cards: dark tile, tone lighten on hover ──────────────────────────────── */
.tui-product-card { text-decoration: none; color: inherit; }
.tui-product-card__media-shell:has(.product-image--transparent) {
  background-color: var(--tu-concrete);
  background-image: radial-gradient(circle at 50% 42%, var(--tu-concrete-light) 0, transparent 48%, var(--tu-concrete-dark) 100%);
}
.tui-product-card__media {
  background: var(--tu-tile);
  padding: 0;
  transition: background var(--tu-dur-tile) ease;
}
.tui-product-card__media.product-image--transparent {
  padding: 8%;
  background: transparent;
  filter: drop-shadow(0 18px 18px var(--tu-cutout-shadow)) drop-shadow(0 5px 5px var(--tu-cutout-shadow));
}
.tui-product-card:hover .tui-product-card__media.product-image--opaque,
.tui-product-card:hover .tui-product-card__media.product-image--unknown { background: var(--tu-tile-hover); }
.tui-product-card:hover .tui-product-card__media-shell:has(.product-image--transparent) { background-color: var(--tu-concrete-hover); }
.tui-product-card__name {
  display: block;
  margin-top: 14px;
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tui-product-card__price { color: var(--color-muted); font-weight: var(--type-weight-medium); }
.tui-product-card__price-was { color: var(--tu-faint); margin-left: var(--space-xs); text-decoration: line-through; }
.tui-product-card__sale-flag { color: var(--color-accent); letter-spacing: 0.2em; text-transform: uppercase; }

/* ── sections: the BODY owns the single scrolling light-topo layer ──────────────────
   Core supplies optional texture hooks on these section shells. Explicitly reset them here so the
   same tile cannot stack over the body texture (transparent alone does not reset background-image). */
.tsec-hero,
.tsec-product-grid,
.tsec-product-detail,
.tsec-campaign {
  background-image: none;
}
.tsec-hero { background-color: transparent; }
.tsec-product-grid {
  background-color: transparent;
  padding-block: var(--tu-section-y);
}
.tsec-product-grid__heading { font-size: var(--type-scale-xl); letter-spacing: var(--type-tracking); }
.tsec-product-grid__grid { gap: var(--space-md); }

/* ── PDP ──────────────────────────────────────────────────────────────────────────── */
.tsec-product-detail { padding-block: var(--tu-section-y); }
.tsec-product-detail__media {
  background-color: var(--tu-tile);
  padding: 0;
}
.tsec-product-detail__title {
  margin: 0 0 var(--space-sm);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tsec-product-detail__price-now { font-size: var(--type-scale-lg); color: var(--color-muted); font-weight: var(--type-weight-medium); }
.tsec-product-detail__price-was { color: var(--tu-faint); margin-left: var(--space-xs); text-decoration: line-through; }
.tsec-product-detail__description { max-width: 400px; color: var(--tu-body-text); line-height: var(--type-leading); }
.tsec-product-detail__form { max-width: 30rem; gap: var(--space-md); }
.tsec-product-detail__axes { display: grid; gap: var(--space-md); }
.tsec-product-detail__axis,
.tsec-product-detail__swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}
.tsec-product-detail__axis .tsec-product-detail__variant-label,
.tsec-product-detail__swatches .tsec-product-detail__variant-label {
  flex: 0 0 100%;
  margin-bottom: 2px;
}
.tsec-product-detail__form .tsec-product-detail__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid var(--tu-input-border);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--tu-dur-border) ease, background var(--tu-dur-border) ease;
}
.tsec-product-detail__form .tsec-product-detail__option:hover { border-color: var(--color-fg); }
.tsec-product-detail__form .tsec-product-detail__option:has(input:checked) {
  border-color: var(--color-fg);
  background: var(--color-fg);
  color: var(--color-accent-fg);
}
.tsec-product-detail__option-label {
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tsec-product-detail__swatch-dot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--tsw-color, transparent);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 0 2px var(--color-bg);
}
.tsec-product-detail__option input:checked + .tsec-product-detail__swatch-dot {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-fg);
}
.tsec-product-detail__purchase-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
}
.tsec-product-detail__qty {
  display: inline-grid;
  grid-template-columns: 42px 48px 42px;
  border: 1px solid var(--color-fg);
}
.tsec-product-detail__qty-btn {
  border: 0;
  background: transparent;
  color: var(--color-fg);
  font: inherit;
  font-size: var(--type-scale-lg);
  cursor: pointer;
}
.tsec-product-detail__qty-btn:hover { background: var(--tu-bg-alt); }
.tsec-product-detail__form .tsec-product-detail__qty-input {
  box-sizing: border-box;
  width: 48px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--color-border);
  background: transparent;
  text-align: center;
  appearance: textfield;
}
.tsec-product-detail__qty-input::-webkit-inner-spin-button,
.tsec-product-detail__qty-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.tsec-product-detail__purchase-row .tsec-product-detail__add {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 30rem) {
  .tsec-product-detail__purchase-row { flex-wrap: wrap; }
  .tsec-product-detail__purchase-row .tsec-product-detail__add { flex-basis: 100%; }
}
.tsec-product-detail__variant-label {
  font-size: var(--type-scale-sm);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tsec-product-detail__form select,
.tsec-product-detail__form input,
.tui-field__input {
  padding: var(--space-sm);
  border: 1px solid var(--tu-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--type-body);
  transition: border-color 0.2s ease;
}
.tsec-product-detail__form select:hover,
.tsec-product-detail__form input:hover,
.tui-field__input:hover { border-color: var(--color-fg); }
.tsec-product-detail__sold-out { color: var(--color-muted); letter-spacing: 0.22em; text-transform: uppercase; }
.tsec-product-detail__status { margin: var(--space-xs) 0 0; color: var(--color-muted); }
.tsec-product-detail__empty { color: var(--color-muted); }

/* ── cart page ────────────────────────────────────────────────────────────────────── */
.tui-cart__line { border-bottom: 1px solid var(--tu-hairline-2); }
.tui-cart,
.tui-checkout,
.tui-confirmation {
  padding-block: var(--tu-section-y);
}
.tui-checkout__summary .tui-cart {
  max-width: none;
  padding: 0;
}
.tui-cart__line-name { color: inherit; font-size: var(--type-scale-sm); letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--type-weight-bold); }
.tui-cart__line-total { color: var(--color-muted); }
.tui-cart__qty-caption { display: none; }
.tui-cart__remove {
  border: none; background: transparent; padding: 0;
  color: var(--tu-faint);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--motion-hover-duration) ease;
}
.tui-cart__remove:hover { color: var(--color-fg); }
.tui-cart__row--total { font-weight: var(--type-weight-bold); border-top: 1px solid var(--color-border); padding-top: var(--space-xs); }
.tui-cart__empty { color: var(--color-muted); letter-spacing: 0.22em; text-transform: uppercase; }

/* ── qty stepper ──────────────────────────────────────────────────────────────────── */
.tui-qty { border: 1px solid var(--color-border); }
.tui-qty__dec, .tui-qty__inc {
  background: transparent; border: none; cursor: pointer;
  color: var(--tu-body-text);
  transition: color var(--motion-hover-duration) ease;
}
.tui-qty__dec:hover, .tui-qty__inc:hover { color: var(--color-fg); }
.tui-qty__input { border: none; background: transparent; color: var(--color-fg); font-weight: var(--type-weight-bold); text-align: center; }

/* ── cart drawer (cosmetics only — mechanics + motion rules are core, §7.5) ───────── */
.tui-cart-drawer { background: var(--color-bg); box-shadow: var(--shadow-lg); }
.tui-cart-drawer__header { border-bottom: 1px solid var(--color-border); }
.tui-cart-drawer__title { font-size: 13px; letter-spacing: 0.28em; }
.tui-cart-drawer__close { background: transparent; border: none; color: var(--color-muted); cursor: pointer; transition: color var(--motion-hover-duration) ease; }
.tui-cart-drawer__close:hover { color: var(--color-fg); }
.tui-cart-drawer__line { border-bottom: 1px solid var(--tu-hairline-2); }
.tui-cart-drawer__line-name { font-size: var(--type-scale-sm); letter-spacing: 0.16em; text-transform: uppercase; font-weight: var(--type-weight-bold); }
.tui-cart-drawer__line-total { color: var(--color-muted); }
.tui-cart-drawer__remove {
  border: none; background: transparent; padding: 0;
  color: var(--tu-faint); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: underline; cursor: pointer;
}
.tui-cart-drawer__remove:hover { color: var(--color-fg); }
.tui-cart-drawer__empty { color: var(--color-muted); letter-spacing: 0.22em; text-transform: uppercase; }
.tui-cart-drawer__footer { background: var(--tu-bg-alt); border-top: 1px solid var(--color-border); }
.tui-cart-drawer__subtotal { font-size: var(--type-scale-sm); letter-spacing: 0.24em; text-transform: uppercase; }
.tui-cart-drawer__subtotal-value { font-size: var(--type-scale-base); font-weight: var(--type-weight-bold); }

/* ── checkout + confirmation ──────────────────────────────────────────────────────── */
.tui-checkout__fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.tui-checkout__fieldset--payment { border-style: dashed; }
.tui-checkout__fake-note { margin: 0; padding: var(--space-sm); background: var(--tu-bg-alt); color: var(--color-fg); font-size: var(--type-scale-sm); }
.tui-checkout__pay-total { font-weight: var(--type-weight-bold); }
.tui-field__error { color: var(--color-danger); margin: 0; font-size: var(--type-scale-sm); }
.tui-checkout-form__status { margin: 0; padding: var(--space-sm); border: 1px solid var(--color-danger); color: var(--color-danger); }
.tui-confirmation__label { font-weight: var(--type-weight-bold); margin: 0; letter-spacing: 0.16em; text-transform: uppercase; font-size: var(--type-scale-sm); }
.tui-confirmation__value { margin: 0; }

/* ── auth / account ───────────────────────────────────────────────────────────────── */
.tui-auth {
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--tu-gutter))), 440px);
  max-width: none;
  margin: clamp(52px, 9vw, 112px) auto;
  padding: clamp(28px, 5vw, 48px);
  gap: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.tui-auth__title { margin: 0; text-align: center; font-size: var(--type-scale-xl); }
.tui-auth__intro { margin: 0; color: var(--color-muted); text-align: center; }
.tui-auth__form { gap: var(--space-md); }
.tui-auth__submit { width: 100%; }
.tui-auth__method-switch {
  justify-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fg);
  font: inherit;
  font-size: var(--type-scale-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tui-auth__method-switch:hover { color: var(--color-accent); }
.tui-auth__links {
  justify-content: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: var(--type-scale-sm);
}
.tui-auth__subtitle { color: var(--color-muted); }
.tui-auth__status { color: var(--color-danger); }
.tui-account__nav a { letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--type-scale-sm); }

/* ═══ chunk-A hook skins (A1 sections + A2 commerce) ═══════════════════════════════ */

/* ── header: announcement (taupe) + compact sticky nav (near-black, 52px) ─────────── */
.tsec-header {
  /* Core makes the combined header sticky. Flatten its layout box so the announcement remains in
     normal flow while the nav can stick independently below it. */
  display: contents;
}
.tsec-header__announcement {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  padding-block: 6px;
  box-shadow: 0 0 0 100vmax var(--color-accent);
  clip-path: inset(0 -100vmax);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.tsec-header__nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tu-surface-dark);
  min-height: 52px;
  padding-block: 0;
  box-shadow: 0 0 0 100vmax var(--tu-surface-dark);
  clip-path: inset(0 -100vmax);
}
/* One navigation model at every viewport: keep the source link list in the DOM for the overlay
   island to clone, but never render the desktop row or its standalone cart link. */
.tsec-header__links { display: none; }
.tsec-header__mobile { display: flex; }
.tsec-header__menu-mark { display: block; width: 25px; height: 25px; object-fit: contain; }
.tsec-header__logo {
  max-height: 15px;
  /* dark wordmark asset flipped for the dark nav — drop this line when the true light
     logo variant lands (plan §B4 / open question Q7). */
  filter: invert(1) brightness(0.95);
}
.tsec-header__brand {
  color: var(--color-accent-fg);
  letter-spacing: 0.22em;
  font-weight: var(--type-weight-bold);
}
.tsec-header__link {
  color: var(--tu-nav-inactive);
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.tsec-header__link:hover { color: var(--color-accent-fg); }

/* ── footer: deepest black + dark topo wash + hairline bottom row ─────────────────── */
.tsec-footer {
  background-color: var(--tu-surface-darker);
  --texture-scale: 600px;
  color: var(--color-accent-fg);
  padding: var(--tu-section-y) 0;
}
.tsec-footer,
.drop-chapter--waypoint {
  background-color: var(--tu-surface-darker);
  background-image: linear-gradient(var(--tu-topo-overlay-deep), var(--tu-topo-overlay-deep)), var(--texture-dark, none);
  background-size: cover, var(--texture-scale, 600px);
}
.tsec-footer__logo {
  max-height: 14px;
  filter: invert(1) brightness(0.85); /* see header logo note */
}
.tsec-footer__link {
  color: var(--tu-footer-link);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}
.tsec-footer__link:hover { color: var(--color-accent-fg); }
.tsec-footer__bottom { border-top: 1px solid var(--tu-hairline-dark); padding-top: var(--space-md); }
.tsec-footer__mark { width: 28px; height: 28px; object-fit: contain; }
.tsec-footer__legal { color: var(--tu-footer-legal); font-size: 11px; }

/* ── statement banner: full-bleed dark, bright wide-tracked statement ─────────────── */
.tsec-statement-banner {
  background-color: var(--tu-surface-dark);
  --texture-scale: 600px;
  padding: var(--tu-section-y) 0;
}
.tsec-statement-banner__scrim { background: var(--tu-backdrop); }
.tsec-statement-banner__mark { max-height: 47px; margin-bottom: 32px; }
.tsec-statement-banner__eyebrow,
.tsec-statement-banner__sub {
  color: var(--tu-on-dark-sub);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.tsec-statement-banner__heading {
  margin: 0;
  color: var(--tu-banner-bright);
  font-size: clamp(24px, 4vw, 44px);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  max-width: 900px;
}

/* ── hero overlay layout: 86vh photo hero, centered stack, ghost CTA ──────────────── */
.tsec-hero[data-layout='overlay'] {
  background-color: var(--tu-surface-dark);
  min-height: max(86vh, 540px);
  padding: var(--tu-section-y) 0;
}
.tsec-hero__scrim {
  background: linear-gradient(180deg, var(--tu-scrim-top) 0%, var(--tu-scrim-mid) 45%, var(--tu-scrim-bot) 100%);
}
.tsec-hero__content { gap: 28px; }
.tsec-hero__logo {
  width: min(520px, 72vw);
  filter: invert(1) brightness(0.98); /* see header logo note */
}
.tsec-hero__tagline {
  color: var(--tu-on-dark-tagline);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.55em;
  padding-left: 0.55em; /* optical centering compensation for the extreme tracking */
  text-transform: uppercase;
}
.tsec-hero[data-layout='overlay'] .tsec-hero__cta {
  margin-top: 20px;
  padding: 15px 38px;
  border: 1px solid var(--tu-scrim-ghost);
  background: transparent;
  color: var(--color-accent-fg);
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--motion-hover-duration) ease, color var(--motion-hover-duration) ease;
}
.tsec-hero[data-layout='overlay'] .tsec-hero__cta:hover {
  background: var(--color-accent-fg);
  border-color: var(--color-accent-fg);
  color: var(--tu-surface-dark);
}

/* media-filter HINTS (closed vocabulary, 16A §7.3) — soft = hero photo, strong = banner */
[data-media-filter='soft'] { filter: saturate(0.55) brightness(0.82); }
[data-media-filter='strong'] { filter: brightness(0.55) saturate(0.6); }

/* ── product-grid header row: eyebrow + heading + underlined VIEW-ALL link ────────── */
.tsec-product-grid__eyebrow {
  margin: 0 0 12px;
  color: var(--color-accent);
  font-size: 11px;
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.tsec-product-grid__link {
  color: var(--color-fg);
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--color-fg);
  padding-bottom: 4px;
  transition: color var(--motion-hover-duration) ease, border-color var(--motion-hover-duration) ease;
}
.tsec-product-grid__link:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── quick-add: outlined, inverts to solid ink. The extra ancestor class outweighs the
      generic button[type='submit'] solid skin (0-2-0 > 0-1-1). ─────────────────────── */
.tsec-product-grid__quick-add .tsec-product-grid__quick-add-btn {
  padding: 11px 20px;
  border: 1px solid var(--color-fg);
  background: transparent;
  color: var(--color-fg);
  font-size: 11px;
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-hover-duration) ease, color var(--motion-hover-duration) ease;
}
.tsec-product-grid__quick-add .tsec-product-grid__quick-add-btn:hover {
  background: var(--color-fg);
  color: var(--color-accent-fg);
}

/* ── size swatches: 48px squares, selected = solid ink (mechanics/focus live in core) ── */
.tsec-product-detail__swatch-label {
  border: 1px solid var(--tu-input-border);
  background: transparent;
  color: var(--color-fg);
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  text-transform: uppercase;
  transition: border-color var(--tu-dur-border) ease;
}
.tsec-product-detail__swatch-label:hover { border-color: var(--color-fg); }
.tsec-product-detail__swatch input:checked + .tsec-product-detail__swatch-label {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-accent-fg);
}

/* ── PDP footnotes: hairline-topped quiet lines ───────────────────────────────────── */
.tsec-product-detail__footnotes {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.tsec-product-detail__footnote { margin: 0 0 var(--space-xs); color: var(--color-muted); font-size: var(--type-scale-sm); }

/* ── Terra Unknown editorial PDP ──────────────────────────────────────────────────────────────────────
   The image rail scrolls in the left pane while the buying controls remain pinned in the bone pane.
   Small screens return both panes to normal document flow. */
@media (min-width: 48rem) {
  .tsec-product-detail {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    grid-template-columns: minmax(0, 55%) minmax(22rem, 45%);
    gap: 0;
    align-items: stretch;
    background: var(--tu-tile);
  }
  .tsec-product-detail__hero {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 55%) minmax(22rem, 45%);
    align-items: stretch;
  }
  .tsec-product-detail__media {
    min-width: 0;
    padding: 0;
    background-color: var(--tu-tile);
    background-image: linear-gradient(var(--tu-topo-overlay-dark), var(--tu-topo-overlay-dark)), var(--texture-dark, none);
    background-size: cover, var(--texture-scale, 600px);
  }
  .tsec-product-detail__slider {
    display: grid;
    gap: clamp(28px, 5vw, 72px);
    overflow: visible;
  }
  .tsec-product-detail__slide {
    box-sizing: border-box;
    min-width: 0;
  }
  .tsec-product-detail__slide.product-image-frame--transparent {
    padding: clamp(24px, 4vw, 64px);
  }
  .tsec-product-detail__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .tsec-product-detail__image.product-image--opaque,
  .tsec-product-detail__image.product-image--unknown { object-fit: cover; }
  .tsec-product-detail__thumbs { display: none; }
  .tsec-product-detail__info {
    box-sizing: border-box;
    position: sticky;
    top: 52px;
    align-self: start;
    min-height: calc(100vh - 52px);
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    padding: clamp(44px, 7vw, 112px) clamp(32px, 5vw, 84px);
    background: var(--color-bg);
  }
  .tsec-product-detail__related,
  .tsec-product-detail__reviews { grid-column: 1 / -1; }
}
@media (max-width: 47.999rem) {
  .tsec-product-detail { width: 100%; max-width: none; padding: 0; gap: 0; }
  .tsec-product-detail__hero { display: contents; }
  .tsec-product-detail__media {
    padding: 0;
    background-color: var(--tu-tile);
    background-image: linear-gradient(var(--tu-topo-overlay-dark), var(--tu-topo-overlay-dark)), var(--texture-dark, none);
    background-size: cover, var(--texture-scale, 600px);
  }
  .tsec-product-detail__slider {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .tsec-product-detail__slider::-webkit-scrollbar { display: none; }
  .tsec-product-detail__slide {
    box-sizing: border-box;
    flex: 0 0 90vw;
    max-width: 90vw;
    min-width: 0;
  }
  .tsec-product-detail__slide.product-image-frame--transparent { padding: var(--tu-gutter); }
  .tsec-product-detail__info { padding: clamp(36px, 10vw, 64px) var(--tu-gutter); }
}
.tsec-product-detail__slide.product-image-frame--transparent {
  background-color: var(--tu-concrete);
  background-image: radial-gradient(circle at 50% 42%, var(--tu-concrete-light) 0, transparent 48%, var(--tu-concrete-dark) 100%);
}
.tsec-product-detail__image.product-image--transparent {
  filter: drop-shadow(0 24px 22px var(--tu-cutout-shadow)) drop-shadow(0 7px 7px var(--tu-cutout-shadow));
}
.tsec-product-detail__info::before {
  content: 'DROP 01';
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  font-size: 10px;
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.3em;
}
.tsec-product-detail__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm) var(--space-sm);
  color: var(--color-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.tsec-product-detail__price { display: inline-block; margin: 0 0 var(--space-md); }
.tsec-product-detail__description { margin: 0 0 clamp(24px, 4vw, 40px); }
.tsec-product-detail__axis[data-display='swatch'] { gap: 12px; }
.tsec-product-detail__axis[data-display='swatch'] .tsec-product-detail__option {
  min-height: 0;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
}
.tsec-product-detail__axis[data-display='swatch'] .tsec-product-detail__option:hover {
  border-color: var(--tu-input-border);
}
.tsec-product-detail__axis[data-display='swatch'] .tsec-product-detail__option:has(input:checked) {
  border-color: var(--color-fg);
  background: transparent;
  color: inherit;
}
.tsec-product-detail__axis[data-display='swatch'] .tsec-product-detail__swatch-dot {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border: 1px solid var(--tu-input-border);
  box-shadow: none;
}
.tsec-product-detail__axis[data-display='swatch'] .tsec-product-detail__option input:checked + .tsec-product-detail__swatch-dot {
  box-shadow: inset 0 0 0 1px var(--color-bg);
}
.tsec-product-detail__axis[data-display='swatch'] .tsec-product-detail__option-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.tsec-product-detail__related {
  box-sizing: border-box;
  padding: clamp(52px, 8vw, 96px) var(--tu-gutter);
  background-color: var(--color-bg);
  background-image: linear-gradient(var(--tu-topo-overlay), var(--tu-topo-overlay)), var(--texture-light, none);
  background-size: cover, var(--texture-scale, 600px);
}
.tsec-product-detail__related-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: clamp(28px, 5vw, 52px);
}
.tsec-product-detail__related-title {
  margin: 0;
  font-size: var(--type-scale-xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tsec-product-detail__related-link {
  border-bottom: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.tsec-product-detail__related-row,
.tsec-product-detail__related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  overflow: visible;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tsec-product-detail__related .tui-product-card__media.product-image--transparent { padding: 7%; }
@media (max-width: 47.999rem) {
  .tsec-product-detail__related-row,
  .tsec-product-detail__related-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .tsec-product-detail__related-row::-webkit-scrollbar,
  .tsec-product-detail__related-grid::-webkit-scrollbar { display: none; }
  .tsec-product-detail__related-tile,
  .tsec-product-detail__related-cell {
    box-sizing: border-box;
    flex: 0 0 min(200px, 70vw);
    max-width: min(200px, 70vw);
  }
}
.tsec-product-detail__reviews {
  box-sizing: border-box;
  padding: clamp(52px, 8vw, 96px) var(--tu-gutter);
  background-color: var(--tu-surface-darker);
  background-image: linear-gradient(var(--tu-topo-overlay-deep), var(--tu-topo-overlay-deep)), var(--texture-dark, none);
  background-size: cover, var(--texture-scale, 600px);
  color: var(--color-accent-fg);
}
.tsec-product-detail__reviews-title {
  margin: 0 0 var(--space-md);
  font-size: var(--type-scale-xl);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tsec-product-detail__reviews-summary { color: var(--tu-on-dark-sub); }
.tsec-product-detail__review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--tu-hairline-dark);
}
.tsec-product-detail__review { padding: var(--space-md); background: var(--tu-surface-dark); }
.tsec-product-detail__review-title { font-weight: var(--type-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }
.tsec-product-detail__review-body { color: var(--tu-on-dark-sub); }

/* ── drawer additions: ship-note, island body, continue CTA, qty value ────────────── */
.tui-cart-drawer__ship-note { margin: 0; color: var(--color-muted); font-size: 11px; }
.tui-cart-drawer__body { padding: 0 var(--space-md); }
.tui-cart-drawer__continue {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--color-fg);
  background: transparent;
  color: var(--color-fg);
  font-size: var(--type-scale-sm);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--motion-hover-duration) ease, color var(--motion-hover-duration) ease;
}
.tui-cart-drawer__continue:hover { background: var(--color-fg); color: var(--color-accent-fg); }
.tui-qty__value { font-weight: var(--type-weight-bold); min-width: 24px; text-align: center; }

/* Drop 01 handoff homepage — isolated from the persistent site chrome and all other pages. */
.drop-home { --drop-ink:#26241f; --drop-deep:#1e1d1b; --drop-paper:#efede8; --drop-white:#fff; --drop-dim:#dad6cd; --drop-taupe:#8c7b66; --drop-light:#b4a588; --drop-grey:#5d5d5d; --drop-cream:#f1efea; --drop-soft:#cfc9be; --drop-scrim-top:rgba(30,29,27,.4); --drop-scrim-mid:rgba(30,29,27,.05); --drop-scrim-bottom:rgba(30,29,27,.78); --drop-glass:rgba(30,29,27,.55); --drop-glass-strong:rgba(30,29,27,.62); --drop-glass-border:rgba(244,242,237,.25); --drop-shadow:rgba(23,22,19,.3); background:var(--drop-paper); color:var(--drop-ink); overflow:hidden; }
.tsec-header:has(+.drop-home),.drop-home,.drop-home+.tsec-footer { width:min(100%,1700px); margin-inline:auto; }
.drop-home h1,.drop-home h2,.drop-home p { margin:0; }
.drop-hero { position:relative; height:96vh; min-height:680px; background:var(--drop-deep); overflow:hidden; }
.drop-hero__split { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.drop-hero__split img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) brightness(.9); }
.drop-hero__scrim { position:absolute; inset:0; background:linear-gradient(180deg,var(--drop-scrim-top),var(--drop-scrim-mid) 40%,var(--drop-scrim-bottom)); }
.drop-hero__content { position:absolute; z-index:3; inset:auto clamp(20px,4vw,56px) clamp(32px,5vh,56px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.drop-hero__brand { display:flex; align-items:center; gap:18px; color:var(--drop-soft); font-size:11px; letter-spacing:.4em; }
.drop-hero__brand img { width:190px; filter:invert(1); }
.drop-hero h1 { color:var(--drop-cream); font-size:clamp(64px,11vw,168px); line-height:.92; letter-spacing:.01em; }
.drop-hero p { color:var(--drop-soft); font-size:12px; letter-spacing:.3em; margin-top:16px; }
.drop-hero__content>a { color:var(--drop-cream); border:1px solid var(--drop-cream); padding:15px 28px; font-size:12px; letter-spacing:.25em; white-space:nowrap; }
.drop-hero__spot { position:absolute; z-index:5; }.drop-hero__spot--left{left:22%;top:57%}.drop-hero__spot--right{left:68%;top:42%}
.drop-hotspot { display:flex; align-items:center; gap:12px; position:absolute; left:34%; top:34%; z-index:5; }
.drop-hero__spot .drop-hotspot { position:static; }
.drop-hotspot__plus { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--drop-cream); background:var(--drop-glass); color:var(--drop-cream); font-size:22px; text-decoration:none; }
.drop-hotspot__chip { padding:9px 14px; border:1px solid var(--drop-glass-border); background:var(--drop-glass-strong); color:var(--drop-cream); font-size:11px; letter-spacing:.18em; white-space:nowrap; text-decoration:none; }
.drop-hotspot--inactive { opacity:.62; }.drop-hotspot--inactive .drop-hotspot__plus { animation:none; }
@keyframes drop-marquee { to { transform:translateX(-50%); } }
.drop-marquee { padding:14px 0; background:var(--drop-deep); overflow:hidden; border-block:1px solid var(--drop-ink); }
.drop-marquee>div { display:flex; align-items:center; gap:40px; width:max-content; animation:drop-marquee 26s linear infinite; }
.drop-marquee span,.drop-marquee b { font-size:clamp(36px,5.2vw,72px); white-space:nowrap; letter-spacing:.04em; }.drop-marquee span{color:transparent;-webkit-text-stroke:1px var(--drop-taupe)}.drop-marquee b{color:var(--drop-taupe)}.drop-marquee i{width:10px;height:10px;background:var(--drop-taupe)}
.drop-chapter { position:relative; padding:clamp(72px,10vw,150px) clamp(20px,4vw,48px); }.drop-grid{position:relative;z-index:2;max-width:1340px;margin:auto;display:grid;grid-template-columns:5fr 7fr;align-items:center;gap:clamp(28px,4vw,72px)}.drop-grid--reverse{grid-template-columns:7fr 5fr}
.drop-chapter small { color:var(--drop-taupe); font-weight:700; letter-spacing:.28em; }.drop-chapter h2{font-size:clamp(36px,4.6vw,68px);line-height:.95;margin-top:14px}.drop-chapter p{max-width:420px;line-height:1.75;margin-top:22px;color:var(--color-muted)}
.drop-ghost{position:absolute;font-size:clamp(160px,26vw,380px);font-weight:800;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--drop-light);opacity:.28}.drop-photo{position:relative}.drop-photo>img{width:100%;filter:saturate(.85)}
.drop-chapter--vit{background:var(--drop-grey);color:var(--drop-cream)}.drop-chapter--vit p{color:var(--drop-soft)}.drop-art{position:absolute;left:-4vw;bottom:-8vw;width:min(680px,52vw);opacity:.35}
.drop-chapter--fragment{box-sizing:border-box;padding:clamp(52px,8vw,96px) var(--tu-gutter);background-color:var(--color-bg);background-image:linear-gradient(var(--tu-topo-overlay),var(--tu-topo-overlay)),var(--texture-light,none);background-size:cover,var(--texture-scale,600px)}.drop-chapter--fragment .drop-ghost{right:0}
.drop-fragment-shop{display:flex;align-items:flex-end;gap:28px;margin-top:34px}.drop-fragment-shop__media{display:grid;width:clamp(180px,18vw,256px);padding:16px;background:var(--drop-dim)}.drop-fragment-shop__media img{grid-area:1/1;display:block;width:100%;height:auto}.drop-fragment-shop__coyote{opacity:0}.drop-fragment-shop:has(input[value='coyote']:checked) .drop-fragment-shop__black{opacity:0}.drop-fragment-shop:has(input[value='coyote']:checked) .drop-fragment-shop__coyote{opacity:1}.drop-fragment-shop__controls p{font-size:11px;letter-spacing:.24em;color:var(--color-muted)}.drop-fragment-shop__color--coyote{display:none}.drop-fragment-shop:has(input[value='coyote']:checked) .drop-fragment-shop__color--black{display:none}.drop-fragment-shop:has(input[value='coyote']:checked) .drop-fragment-shop__color--coyote{display:inline}.drop-fragment-shop__swatches{display:flex;gap:14px;margin:16px 0 20px}.drop-fragment-shop__swatches input{position:absolute;opacity:0;pointer-events:none}.drop-swatch{display:block;width:46px;height:46px;border-radius:50%;border:1px solid var(--drop-dim);font-size:0}.drop-swatch--black{background:var(--drop-ink)}.drop-swatch--coyote{background:var(--drop-taupe)}.drop-fragment-shop__swatches input:checked+.drop-swatch{outline:2px solid var(--drop-ink);outline-offset:4px}.drop-fragment-shop__controls>a{display:inline-block;padding-bottom:5px;border-bottom:1px solid var(--drop-ink);color:var(--drop-ink);font-size:12px;font-weight:700;letter-spacing:.22em;text-decoration:none}.drop-worn{position:relative;z-index:2;width:clamp(180px,24vw,320px);margin:50px auto 0}.drop-worn span{position:absolute;right:calc(100% + 28px);bottom:8px;color:var(--color-muted);font-size:11px;font-weight:600;letter-spacing:.28em;white-space:nowrap}.drop-worn img{display:block;width:100%;box-shadow:0 30px 70px var(--drop-shadow)}
.drop-chapter--waypoint{color:var(--drop-cream)}.drop-chapter--waypoint p{color:var(--drop-soft)}.drop-chapter--waypoint strong{display:block;color:var(--drop-light);letter-spacing:.22em;margin-top:26px}.drop-plate{width:min(300px,70%);margin-top:38px;padding:18px;background:var(--drop-cream)}.drop-plate img{width:100%}
.drop-manifesto{position:relative;height:460px;background:var(--drop-deep)}.drop-manifesto>img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.6)}.drop-manifesto>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--drop-cream)}.drop-manifesto__mark{display:block;width:54px;height:54px;fill:var(--drop-taupe);margin:0 auto 34px}.drop-manifesto h2{font-size:clamp(24px,4vw,44px);letter-spacing:.14em}.drop-manifesto p{margin-top:18px;letter-spacing:.3em;color:var(--drop-soft)}
.drop-band{padding:clamp(56px,8vw,104px) clamp(20px,4vw,48px);background-color:var(--color-bg);background-image:linear-gradient(var(--tu-topo-overlay),var(--tu-topo-overlay)),var(--texture-light,none);background-size:cover,var(--texture-scale,600px)}.drop-band header{max-width:1340px;margin:0 auto 32px;display:flex;align-items:baseline;gap:16px}.drop-band header h2{font-size:clamp(24px,3vw,34px)}.drop-band header span{font-size:11px;letter-spacing:.25em;color:var(--color-muted)}.drop-band__rail{max-width:1340px;margin:auto;display:flex;gap:14px;overflow-x:auto}.drop-card{flex:1 0 172px;color:var(--drop-ink);text-decoration:none;display:grid;grid-template-columns:1fr auto}.drop-card>span{grid-column:1/-1;position:relative;background:var(--drop-deep);padding:10%}.drop-card img{width:100%;aspect-ratio:5/6;object-fit:contain}.drop-card i{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--drop-cream);border-radius:50%;color:var(--drop-cream)}.drop-card b,.drop-card em{margin-top:10px;font-size:11px;letter-spacing:.14em}
@media(max-width:899px){.drop-grid,.drop-grid--reverse{grid-template-columns:1fr}.drop-hero__content{align-items:flex-start;flex-direction:column}.drop-hero__brand img{width:140px}.drop-hero__spot--right{left:56%}.drop-hotspot__chip{display:none}.drop-art{width:80vw}.drop-chapter--fragment .drop-grid>div:first-child{order:2}.drop-fragment-shop{align-items:flex-start;flex-direction:column}.drop-worn span{position:static;display:block;margin-bottom:14px}}
@media(min-width:900px){.drop-hero{height:clamp(680px,67.6vw,1149px)}}

/* Drop 01 hotspot quick-shop — same blurred dark backdrop language as the top menu. */
.drop-quickshop-open { overflow:hidden; }
.drop-quickshop { --drop-ink:#26241f; --drop-cream:#f1efea; --drop-dim:#dad6cd; --drop-taupe:#8c7b66; --drop-swatch-black:#000; --drop-swatch-fde:#bab5a6; --drop-swatch-grey:#a3a3a3; --drop-shadow:rgba(23,22,19,.3); position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:clamp(12px,3vw,48px); background:var(--tu-menu-bg); backdrop-filter:blur(18px); }
.drop-quickshop__card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,1fr); width:min(800px,100%); max-height:70vh; overflow:auto; background:var(--color-bg); box-shadow:0 30px 90px var(--drop-shadow); }
.drop-quickshop__media { min-height:70vh; background:var(--tu-surface-dark); }
.drop-quickshop__image { width:100%; height:100%; object-fit:cover; }
.drop-quickshop__info { position:relative; padding:clamp(40px,5vw,78px); }
.drop-quickshop__close { position:absolute; top:24px; right:28px; border:0; background:transparent; color:var(--drop-ink); font-size:38px; font-weight:300; line-height:1; }
.drop-quickshop__eyebrow,.drop-quickshop__legend { color:var(--drop-taupe); font-size:12px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; }
.drop-quickshop__title { margin:24px 0 12px; color:var(--drop-ink); font-size:clamp(38px,4vw,58px); line-height:1; letter-spacing:.01em; }
.drop-quickshop__price { color:var(--drop-ink); font-size:24px; font-weight:700; }
.drop-quickshop__description { max-width:560px; margin:30px 0 40px; color:var(--color-muted); font-size:18px; line-height:1.7; }
.drop-quickshop__options { display:grid; gap:28px; }.drop-quickshop__group{margin:0;padding:0;border:0}.drop-quickshop__legend{margin-bottom:16px;color:var(--color-muted)}.drop-quickshop__option-row{display:flex;flex-wrap:wrap;gap:12px}.drop-quickshop__option{min-width:72px;height:64px;padding:0 20px;border:1px solid var(--drop-dim);background:transparent;color:var(--drop-ink);font-weight:700;text-transform:uppercase}.drop-quickshop__option.is-selected{border-color:var(--drop-ink);background:var(--drop-ink);color:var(--drop-cream)}
.drop-quickshop__option--swatch{min-width:0;width:54px;height:54px;padding:0;border-radius:50%;border:1px solid var(--drop-dim);font-size:0}.drop-quickshop__option--swatch.is-selected{border-color:var(--color-bg);color:transparent;outline:2px solid var(--drop-ink);outline-offset:3px}.drop-quickshop__color--black,.drop-quickshop__color--black.is-selected{background:var(--drop-swatch-black)}.drop-quickshop__color--fde,.drop-quickshop__color--fde.is-selected{background:var(--drop-swatch-fde)}.drop-quickshop__color--grey,.drop-quickshop__color--gray,.drop-quickshop__color--grey.is-selected,.drop-quickshop__color--gray.is-selected{background:var(--drop-swatch-grey)}.drop-quickshop__color--coyote,.drop-quickshop__color--coyote.is-selected{background:var(--drop-taupe)}
.drop-quickshop__add { width:100%; margin-top:42px; padding:25px; border:0; background:var(--drop-ink); color:var(--drop-cream); font-size:13px; font-weight:700; letter-spacing:.25em; }.drop-quickshop__add:disabled{opacity:.65}.drop-quickshop__status{min-height:20px;margin:10px 0;color:var(--color-muted)}.drop-quickshop__details{display:inline-block;padding-bottom:6px;border-bottom:1px solid var(--drop-dim);color:var(--color-muted);font-size:12px;font-weight:700;letter-spacing:.24em;text-decoration:none}.drop-quickshop__footnote{margin-top:26px;color:var(--color-muted);font-size:13px;letter-spacing:.06em}
@media(max-width:899px){.drop-quickshop{padding:0}.drop-quickshop__card{grid-template-columns:1fr;width:100%;height:100%;max-height:none}.drop-quickshop__media{min-height:42vh}.drop-quickshop__info{padding:38px 24px 50px}.drop-quickshop__title{font-size:36px}.drop-quickshop__description{font-size:15px;margin:20px 0 28px}.drop-quickshop__close{position:fixed;top:16px;right:18px;z-index:2;width:42px;height:42px;background:var(--color-bg)}}
}