/* ============================================================
   BASE / GLOBAL
   ============================================================ */
/* ============================================================
   THE SLAPIDARY — Storefront child theme
   MODULE: BASE / GLOBAL
   Tokens (var(--...)) are defined in tokens.css, loaded separately.
   Mobile-first: base = phone, min-width media queries enhance up.
   ============================================================ */

/* ---- Page background + base box model -------------------- */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: inherit; }

/* Storefront sets body bg via Customizer; pin it to sandstone. */
body,
body.woocommerce,
body.woocommerce-page,
.site {
  background-color: var(--bg);
  color: var(--text);
}

/* ---- Body type = Public Sans ----------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);          /* 16px phone base */
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);  /* 1.65 — comfortable reading */
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Nudge body copy up slightly on larger viewports. */
@media (min-width: 768px) {
  body { font-size: var(--text-md); }   /* 18px */
}

/* ---- Headings h1–h6 = Cormorant, Title Case -------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.woocommerce-breadcrumb + .page-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);   /* 600 */
  /* Title Case is authored in content, never forced uppercase. */
  text-transform: var(--display-transform); /* none */
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text);
  margin-top: 0;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

/* Mobile-first heading scale (phone), enhanced at >=768px.
   Pulled from the display scale tokens; product/hero overrides
   live in their own modules. */
h1, .page-title, .entry-title {
  font-size: var(--text-2xl);           /* 36px phone */
  line-height: var(--leading-tight);    /* 1.05 — italic descenders get room */
}
h2 { font-size: var(--text-xl); }       /* 28px */
h3 { font-size: var(--text-lg); }       /* 22px */
h4 { font-size: var(--text-md); }       /* 18px */
h5 { font-size: var(--text-base); }     /* 16px */
h6 {
  font-size: var(--text-sm);            /* 14px */
  color: var(--text-muted);
}

@media (min-width: 768px) {
  h1, .page-title, .entry-title { font-size: var(--text-3xl); } /* 48px */
  h2 { font-size: var(--text-2xl); }    /* 36px */
  h3 { font-size: var(--text-xl); }     /* 28px */
  h4 { font-size: var(--text-lg); }     /* 22px */
}

/* Cormorant italic = emphasis inside display type. */
h1 em, h2 em, h3 em,
.page-title em, .entry-title em {
  font-style: italic;
  font-weight: var(--fw-medium);        /* 500 */
}

/* ---- Links = turquoise, accessible hover ----------------- */
a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover,
a:focus {
  color: var(--accent-hover);           /* #137269 — passes contrast on sandstone */
  text-decoration-color: currentColor;
}
a:active { color: var(--accent-hover); }

/* Storefront often resets link color on nav/buttons; do not
   tint those wrappers — only inline content links read as turquoise. */
.button, button,
.site-header a, .main-navigation a,
.site-footer a,
.added_to_cart {
  text-decoration: none;
}

/* ---- Space Mono helper: specs / eyebrows ----------------- */
.slap-mono {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);       /* 12px */
  font-weight: var(--fw-regular);
  letter-spacing: var(--eyebrow-tracking); /* 0.16em */
  text-transform: var(--eyebrow-transform); /* uppercase */
  line-height: var(--leading-normal);
  color: var(--text-subtle);
}
/* Eyebrow variant: turquoise accent (e.g. "Handmade · One Stone At A Time") */
.slap-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);
  font-weight: var(--fw-regular);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  line-height: var(--leading-normal);
  color: var(--accent);
  display: inline-block;
}

/* ---- Container widths ------------------------------------ */
/* Storefront wraps content in .col-full inside its width-capped
   parents. Pin the wide container; provide a narrow modifier. */
.col-full {
  max-width: var(--container);          /* 1200 */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}
/* Narrow reading measure for prose pages (Policies, About copy). */
.slap-narrow,
.page-template-default .col-full.slap-narrow {
  max-width: var(--container-narrow);   /* 760 */
}

/* Tighter gutters on phones so content isn't crushed. */
@media (max-width: 639px) {
  .col-full { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ---- Section spacing ------------------------------------- */
/* Vertical rhythm for top-level content + WC regions. */
.site-content,
.content-area {
  padding-top: var(--space-7);          /* 48px phone */
  padding-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .site-content,
  .content-area {
    padding-top: var(--section-y);      /* 96px desktop */
    padding-bottom: var(--section-y);
  }
}

/* Generic spacing helpers for block patterns / sections. */
.slap-section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
@media (min-width: 768px) {
  .slap-section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }
}

/* ---- Paragraph + small-print baseline -------------------- */
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
small, .slap-subtle { color: var(--text-subtle); }
strong, b { font-weight: var(--fw-semibold); }

/* Horizontal rule = hairline */
hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--border);
  margin: var(--space-6) 0;
}

/* ---- ::selection ---------------------------------------- */
::selection {
  background-color: var(--accent-soft); /* soft turquoise */
  color: var(--text);
}
::-moz-selection {
  background-color: var(--accent-soft);
  color: var(--text);
}

/* ---- Base focus-visible ring ----------------------------- */
/* Mechanical, no glow; uses the turquoise --ring token. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--radius-sm);
}
/* Don't double up the legacy outline when :focus-visible matches. */
:focus:not(:focus-visible) { outline: none; }

/* ---- Reduced motion respect ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important; /* override token-driven motion for a11y */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   HEADER / FOOTER / WORDMARK
   ============================================================ */
/* =====================================================================
   The Slapidary — Storefront child theme
   MODULE: HEADER + FOOTER + WORDMARK
   Tokens (var(--...)) are loaded separately from design-tokens/.
   Mobile-first: base styles = phone; min-width queries enhance upward.
   Targets real Storefront/WooCommerce markup — never replaces it.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HEADER BAR — sandstone surface, hairline bottom border, sticky.
   Storefront wraps the header in .site-header; its inner row is .col-full.
   --------------------------------------------------------------------- */
.site-header {
  background-color: var(--surface);          /* raised sandstone #FBF8F1 */
  border-bottom: var(--bw-hair) solid var(--border);  /* hairline #DBD3C1 */
  /* sticky frosted bar like the prototype; backdrop kept subtle */
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;                                /* spacing handled on .col-full */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* When backdrop-filter is supported, soften the bar so content shows through */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-header {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
  }
}

/* Inner header row — flex layout: branding | nav | (tagline + cart) */
.site-header .col-full {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .site-header .col-full {
    flex-wrap: nowrap;
    gap: var(--space-5);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
}

/* ---------------------------------------------------------------------
   2. WORDMARK — ".slap-wordmark" rendered into .site-branding by the
   functions.php hook. Exact spec from brand.md (italic 500 "The" +
   600 "Slapidary" in Cormorant). On-obsidian variant for the footer.
   --------------------------------------------------------------------- */
.site-branding {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.slap-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  line-height: 1;
}

.slap-wordmark .the {
  font-family: var(--font-display);          /* Cormorant */
  font-style: italic;
  font-weight: var(--fw-medium);             /* 500 */
  font-size: 19px;
  color: var(--text-muted);                  /* #665E4E (stone-600) */
}

.slap-wordmark .name {
  font-family: var(--font-display);          /* Cormorant */
  font-weight: var(--fw-semibold);           /* 600 */
  font-size: 30px;
  letter-spacing: var(--tracking-tight);     /* -0.01em */
  color: var(--text);                        /* #1F1D18 (stone-900) */
  line-height: 1;
}

/* On obsidian (footer / dark bands): brand.md says .the -> stone-400,
   .name -> stone-50 */
.site-footer .slap-wordmark .the,
.slap-wordmark--on-obsidian .the {
  color: var(--stone-400);                   /* #A39A83 */
}
.site-footer .slap-wordmark .name,
.slap-wordmark--on-obsidian .name {
  color: var(--stone-50);                    /* #F7F3EA */
}

/* Hide Storefront's default text site-title / tagline if the theme still
   prints them alongside the wordmark (defensive; the hook usually replaces
   the title output entirely). */
.site-header .site-title,
.site-header .site-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* If a custom-logo image is ever set, keep it modest in the bar */
.site-header .custom-logo {
  max-height: 40px;
  width: auto;
}

/* ---------------------------------------------------------------------
   3. PRIMARY NAVIGATION — Public Sans UPPERCASE 0.08em links.
   Active item = olive underline. Storefront primary menu lives in
   .main-navigation / .storefront-primary-navigation; items are .menu-item
   with .current-menu-item / .current_page_item on the active page.
   --------------------------------------------------------------------- */
.main-navigation,
.storefront-primary-navigation {
  flex: 1 1 auto;
}

.main-navigation ul.menu,
.main-navigation ul.nav-menu,
.handheld-navigation ul.menu,
.handheld-navigation ul.nav-menu,
.storefront-primary-navigation ul.menu,
.storefront-primary-navigation ul.nav-menu {
  display: flex;
  flex-direction: column;       /* mobile: stacked when handheld menu opens */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .main-navigation ul.menu,
  .main-navigation ul.nav-menu,
  .storefront-primary-navigation ul.menu,
  .storefront-primary-navigation ul.nav-menu {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }
}

.main-navigation ul li,
.storefront-primary-navigation ul li {
  margin: 0;
  border: 0;
}

.main-navigation ul li a,
.storefront-primary-navigation ul li a {
  display: block;
  padding: 12px;                              /* >=44px tap target */
  font-family: var(--font-body);             /* Public Sans */
  font-weight: var(--fw-semibold);           /* 600 */
  font-size: var(--text-xs);                 /* 12px */
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);     /* 0.08em */
  color: var(--text-muted);                  /* #665E4E */
  text-decoration: none;
  border-bottom: var(--bw-bold) solid transparent;  /* underline slot */
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .main-navigation ul li a,
  .storefront-primary-navigation ul li a {
    padding: 8px 12px;
  }
}

.main-navigation ul li a:hover,
.main-navigation ul li a:focus-visible,
.storefront-primary-navigation ul li a:hover,
.storefront-primary-navigation ul li a:focus-visible {
  color: var(--text);
}

/* Active page = olive text + olive underline indicator */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a,
.storefront-primary-navigation ul li.current-menu-item > a,
.storefront-primary-navigation ul li.current_page_item > a,
.storefront-primary-navigation ul li.current-menu-ancestor > a {
  color: var(--primary);                     /* olive #565C30 */
  border-bottom-color: var(--primary);
}

/* Storefront handheld menu toggle button — skin to brand on mobile */
.main-navigation .menu-toggle,
.handheld-navigation .menu-toggle,
button.menu-toggle {
  background-color: transparent;
  color: var(--text);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: 11px 14px;                         /* >=44px tap target */
  min-height: 44px;
}
.main-navigation .menu-toggle:hover,
.handheld-navigation .menu-toggle:hover,
button.menu-toggle:hover {
  background-color: var(--surface-2);
  color: var(--text);
}

/* ---------------------------------------------------------------------
   4. RIGHT-SIDE CLUSTER — Space Mono tagline + obsidian BAG cart button.
   The tagline (.slap-tagline) is printed next to the cart by the
   functions.php hook. The cart is Storefront's .site-header-cart, whose
   visible trigger link is .cart-contents (count in .count).
   --------------------------------------------------------------------- */

/* Space Mono "HANDMADE · ONE BENCH" tagline — hidden on phones, shown
   from tablet up where there's room at the right of the bar. */
.slap-tagline {
  display: none;
  font-family: var(--font-mono);             /* Space Mono */
  font-size: var(--text-2xs);                /* 11px */
  letter-spacing: var(--tracking-wide);      /* 0.04em */
  text-transform: uppercase;
  color: var(--text-subtle);                 /* #847B67 */
  white-space: nowrap;
}

@media (min-width: 992px) {
  .slap-tagline {
    display: inline-block;
    margin-left: auto;                        /* push tagline + cart right */
  }
}

/* Cart wrapper. On mobile it sits at the far right of the top row. */
.site-header-cart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  margin-left: auto;                          /* far right on phones */
}

/* When the tagline is shown (>=992px) it already takes the auto margin,
   so the cart should sit snug after it. */
@media (min-width: 992px) {
  .site-header-cart {
    margin-left: var(--space-4);
  }
}

.site-header-cart .cart-contents,
.site-header-cart li > a.cart-contents {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--obsidian);         /* dark obsidian button */
  color: var(--stone-50);                    /* light label */
  border: 0;
  border-radius: var(--radius-sm);           /* 4px */
  font-family: var(--font-body);             /* Public Sans */
  font-weight: var(--fw-semibold);           /* 600 */
  font-size: var(--text-xs);                 /* 12px */
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);     /* 0.08em */
  text-decoration: none;
  /* tap target >=44px tall */
  padding: 13px 16px;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.site-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:focus-visible {
  background-color: var(--stone-950);        /* slightly deeper on hover */
  color: var(--stone-50);
}
.site-header-cart .cart-contents:active {
  transform: scale(0.97);                    /* mechanical press */
}

/* Storefront prints the bag as the word "Cart"; the hook relabels it
   "Bag". Strip Storefront's default amount text so only "Bag" + bubble show. */
.site-header-cart .cart-contents .amount {
  display: none;
}

/* Turquoise count bubble — Storefront emits the item count in .count */
.site-header-cart .cart-contents .count {
  position: static;                          /* inline within the flex button */
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);         /* 999px */
  background-color: var(--accent);           /* turquoise #178C82 */
  color: var(--text-on-accent);              /* #ECFAF8 */
  font-family: var(--font-mono);             /* Space Mono */
  font-weight: var(--fw-regular);
  font-size: var(--text-2xs);                /* 11px */
  line-height: 1;
  letter-spacing: 0;
  /* override Storefront's default absolute-positioned superscript bubble */
  top: auto;
  right: auto;
}

/* Cart dropdown panel (Storefront mini-cart) — light surface to match bar */
.site-header-cart .widget_shopping_cart {
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* ---------------------------------------------------------------------
   5. FOOTER — obsidian background, light stone text.
   Storefront wraps the footer in .site-footer; widgets/columns live in
   .col-full and the credit line in .site-info.
   --------------------------------------------------------------------- */
.site-footer {
  background-color: var(--obsidian);         /* #17150F */
  color: var(--stone-300);                   /* light body text */
  padding-top: var(--space-7);               /* 48px */
  padding-bottom: var(--space-6);            /* 32px */
  font-family: var(--font-body);
}

.site-footer .col-full {
  display: flex;
  flex-direction: column;                    /* mobile: stacked columns */
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .site-footer .col-full {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-7);
  }
}

/* Footer widget columns */
.site-footer .widget {
  margin: 0;
  flex: 1 1 180px;
  min-width: 0;
}

/* Mono uppercase column headings (matches footer column heads in spec) */
.site-footer .widget-title,
.site-footer .widget .widgettitle {
  font-family: var(--font-mono);             /* Space Mono */
  font-size: var(--text-2xs);                /* 11px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);    /* 0.16em */
  text-transform: uppercase;
  color: var(--stone-500);                   /* subtle heading */
  margin: 0 0 var(--space-3);
}

/* Footer body copy + links */
.site-footer p,
.site-footer li {
  font-size: var(--text-sm);                 /* 14px */
  line-height: var(--leading-relaxed);
  color: var(--stone-400);
}

.site-footer a {
  color: var(--stone-300);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--stone-50);
}

/* Make footer menus comfortable to tap on mobile */
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer ul li {
  margin: 0 0 var(--space-2);
}
.site-footer ul li a {
  display: inline-block;
  padding: 6px 0;
}

/* Footer credit / copyright line — hairline rule on translucent white */
.site-footer .site-info {
  max-width: var(--container);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--bw-hair) solid color-mix(in srgb, var(--text-inverse) 8%, transparent);
  font-family: var(--font-mono);             /* Space Mono */
  font-size: var(--text-2xs);                /* 11px */
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone-500);
}
.site-footer .site-info a {
  color: var(--stone-400);
}
.site-footer .site-info a:hover {
  color: var(--stone-50);
}

/* ============================================================
   COMPONENTS
   ============================================================ */
/* ============================================================================
   THE SLAPIDARY — Storefront child theme: COMPONENTS
   Styles real WooCommerce/Storefront markup only. Tokens come from tokens.css
   (loaded separately) — referenced via var(--...), never redefined here.
   Mobile-first: base rules = phone; min-width media queries enhance up.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. BUTTONS
   WC/Storefront buttons: .button, .single_add_to_cart_button, .added_to_cart,
   button[type=submit]. Primary = olive; turquoise accent variant; secondary
   outlined. Public Sans UPPERCASE 0.08em / 600. radius sm. press scale(.97).
   ---------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
button[type="submit"],
input[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* md size by default: 10/18 */
  padding: 10px 18px;
  min-height: 44px; /* tap target */
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider); /* 0.08em */
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  /* primary olive by default */
  color: var(--text-on-primary);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
button[type="submit"]:hover,
input[type="submit"].button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--text-on-primary);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce .single_add_to_cart_button:active,
.woocommerce-page a.button:active,
.woocommerce-page button.button:active,
.woocommerce-page input.button:active,
button[type="submit"]:active,
input[type="submit"].button:active {
  background: var(--primary-press);
  border-color: var(--primary-press);
  transform: scale(0.97);
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible,
button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* WC "alt" button = primary call to action (Proceed to checkout, Place order).
   Keep it olive primary (already default). The turquoise ACCENT variant is for
   secondary/sale CTAs — apply via .button.alt only where WC marks the checkout
   flow; here we route accent to checkout submit to echo the prototype accent CTA. */
.woocommerce .button.alt,
.woocommerce-page .button.alt,
.woocommerce a.checkout-button.button.alt,
.woocommerce #place_order {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.woocommerce .button.alt:hover,
.woocommerce-page .button.alt:hover,
.woocommerce a.checkout-button.button.alt:hover,
.woocommerce #place_order:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}
.woocommerce .button.alt:active,
.woocommerce-page .button.alt:active,
.woocommerce #place_order:active {
  background: var(--turq-700);
  border-color: var(--turq-700);
  transform: scale(0.97);
}

/* Secondary / outlined variant — the catalog "Add" / ghost actions.
   WC adds .added_to_cart after add; the card "Add" link reads .add_to_cart_button.
   Outlined = transparent fill, 1.5px bold border, olive text. */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce .button.wc-backward,
.woocommerce-page .button.wc-backward {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--border-bold);
}
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button.product_type_simple:hover,
.woocommerce .button.wc-backward:hover,
.woocommerce-page .button.wc-backward:hover {
  background: var(--surface-2);
  color: var(--primary-hover);
  border-color: var(--border-bold);
}
.woocommerce ul.products li.product a.add_to_cart_button:active,
.woocommerce ul.products li.product a.button.product_type_simple:active {
  background: var(--stone-200);
  transform: scale(0.97);
}

/* "View cart" link that appears after add — small (sm 7/12) outlined chip. */
.woocommerce a.added_to_cart {
  padding: 7px 12px;
  min-height: 0;
  font-size: var(--text-xs);
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent-soft);
}
.woocommerce a.added_to_cart:hover {
  background: var(--accent-soft);
  color: var(--turq-700);
  border-color: var(--accent-soft);
}

/* Disabled buttons (e.g. greyed place-order while validating). */
.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce .button.disabled,
button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ----------------------------------------------------------------------------
   2. BADGES / PILLS
   Category + material chips. Space Mono 11px UPPERCASE 0.06em.
   Olive-soft fill, olive-700 text. .pill = radius pill.
   Applied to WC product category links + on-sale flashes restyled as chips.
   ---------------------------------------------------------------------------- */
.slap-chip,
.woocommerce span.onsale,
.woocommerce ul.products li.product .slap-category-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-2xs); /* 11px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  background: var(--primary-soft);
  color: var(--olive-700);
  white-space: nowrap;
}

/* Pill (tumbled) shape for category chips on cards / product summary. */
.slap-chip.pill,
.slap-pill,
.woocommerce ul.products li.product .slap-category-pill {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* Material chip = same olive-soft pill. Category badge alongside = neutral tone. */
.slap-chip--material {
  background: var(--primary-soft);
  color: var(--olive-700);
}
.slap-chip--category {
  background: var(--surface-2);
  color: var(--text-muted);
}

/* WC default sale flash: re-skin as an accent chip, reposition cleanly. */
.woocommerce span.onsale {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  background: var(--accent-soft);
  color: var(--turq-700);
  border-radius: var(--radius-pill);
}

/* The mu-plugin / card "▶ VIDEO" chip — dark glass pill bottom-right of media. */
.slap-video-chip {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-50);
  background: color-mix(in srgb, var(--obsidian) 72%, transparent);
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}

/* ----------------------------------------------------------------------------
   3. PRODUCT CARDS
   ul.products li.product — surface, hairline border, radius md, shadow-sm;
   hover translateY(-2px) + shadow-lg. Cormorant name, Space Mono dims, price,
   outlined Add. Mobile-first: single column; 2-up tablet; 3/4-up desktop.
   ---------------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: 1fr; /* single column under ~640px */
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto;
  margin: 0;
  padding: var(--space-3);
  float: none; /* override Storefront float grid */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Media: rounded image, relative so chips can anchor inside it. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.woocommerce ul.products li.product .slap-card-media,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  position: relative;
  display: block;
}

/* Product name — Cormorant Title Case. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg); /* ~21-22px */
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--text);
  padding: 0;
  margin: 0 0 var(--space-1);
}

/* Space Mono dims · ct line — rendered via a short description / custom span. */
.woocommerce ul.products li.product .slap-card-dims {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

/* Price — Cormorant, sits with the Add button on a footer row. */
.woocommerce ul.products li.product .price {
  margin: auto 0 0;
  padding-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  color: var(--text);
}
.woocommerce ul.products li.product .price del {
  color: var(--text-subtle);
  font-weight: var(--fw-regular);
  opacity: 0.8;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--text);
}

/* The card "Add" button is already restyled outlined in the Buttons section;
   pull it inline with the price as a footer row for a tidy card foot. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product a.add_to_cart_button {
  display: inline-flex;
}
.woocommerce ul.products li.product a.add_to_cart_button {
  margin-top: var(--space-3);
  align-self: flex-start;
}

@media (min-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr); /* 2-up tablet */
    gap: var(--space-5);
  }
}
@media (min-width: 992px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr); /* 3-up desktop shop */
  }
  /* Home featured / [products] block goes 4-up on wide screens. */
  .woocommerce .columns-4 ul.products,
  .woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------------------------------------------------------------------
   4. INPUTS / SELECT
   .input-text, select, form fields — engraved well, 1.5px border, turquoise
   focus ring. Space Mono uppercase labels. Tap targets >= 44px.
   ---------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce-page select,
select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-engrave);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.woocommerce form .form-row textarea,
.woocommerce textarea {
  min-height: 120px;
  resize: vertical;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce .input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="search"]:focus,
.woocommerce select:focus,
.woocommerce-page select:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Invalid fields (WC adds .woocommerce-invalid). */
.woocommerce form .woocommerce-invalid input.input-text,
.woocommerce form .woocommerce-invalid select {
  border-color: var(--danger);
}
.woocommerce form .woocommerce-invalid input.input-text:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

/* Native select arrow affordance — custom chevron, hide default UI arrow. */
.woocommerce select,
.woocommerce-page select,
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Mono uppercase labels (form-row + checkout + filter widget headings). */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce .woocommerce-billing-fields label,
.woocommerce .woocommerce-shipping-fields label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Don't uppercase checkbox row labels (terms, ship-to-different) — they're prose. */
.woocommerce form .form-row.woocommerce-validated label.checkbox,
.woocommerce form p.form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--text);
}
.woocommerce form .form-row .required {
  color: var(--danger);
  border: 0;
}

/* Catalog "Sort by" ordering select + result count (Shop toolbar). */
.woocommerce .woocommerce-ordering select {
  min-height: 44px;
}
.woocommerce .woocommerce-result-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
}

/* Quantity inputs — same well treatment (hidden on one-of-a-kind product page
   via the theme, but cart still uses them). */
.woocommerce .quantity input.qty {
  width: 4.5em;
  min-height: 44px;
  text-align: center;
  font-family: var(--font-mono);
}

/* ----------------------------------------------------------------------------
   5. NOTICES
   .woocommerce-message / -info / -error — soft tonal fill + 3px colored left
   rule. Success sage, info turquoise, error garnet.
   ---------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-noreviews,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text);
  border: none;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  list-style: none;
}
/* Remove Storefront's default top accent bar + pseudo icon. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static;
  margin-right: var(--space-1);
  color: inherit;
  font-size: 1em;
  top: auto;
  left: auto;
}

/* Success / message = sage. */
.woocommerce-message,
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message {
  background: var(--success-soft);
  border-left-color: var(--success);
}
.woocommerce-message::before {
  color: var(--success);
}

/* Info = turquoise (default above; explicit for clarity). */
.woocommerce-info,
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info {
  background: var(--info-soft);
  border-left-color: var(--accent);
}
.woocommerce-info::before {
  color: var(--accent);
}

/* Error / danger = garnet. */
.woocommerce-error,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
  background: var(--danger-soft);
  border-left-color: var(--danger);
  flex-direction: column;
  gap: var(--space-1);
}
.woocommerce-error li {
  list-style: none;
  margin: 0;
}
.woocommerce-error::before {
  color: var(--danger);
}

/* The inline "View cart / Continue" link button inside a notice keeps its
   outlined chip styling from the Buttons section; just align it right on wide. */
.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   7. SINGLE-PRODUCT SUMMARY accents (supporting the components above)
   Material/category chips row, SKU, one-of-a-kind line, spec dl.
   Title, price, tabs, and video live in the SINGLE PRODUCT module.
   Never hides the description or the slapidary-video <video>.
   ---------------------------------------------------------------------------- */
.woocommerce div.product .sku_wrapper,
.woocommerce div.product .sku {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
}

/* Turquoise mono "◆ ONE OF A KIND" line (theme outputs .slap-one-of-a-kind). */
.slap-one-of-a-kind {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-5);
}

/* Spec block — Space Mono definition list of the real WC fields. */
.slap-spec-block,
.woocommerce div.product .product_meta {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: var(--space-3);
  column-gap: var(--space-5);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
.slap-spec-block dt {
  align-self: center;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.slap-spec-block dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
/* ==========================================================================
   The Slapidary — Storefront child theme
   MODULE: SINGLE-PRODUCT page (the key page)
   Mobile-first. Targets real Storefront/WooCommerce single-product markup +
   the slapidary-video.php mu-plugin's section.slapidary-product-video.
   Tokens (var(--...)) come from tokens.css, loaded separately. Never hide the
   product description or the mu-plugin <video>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAYOUT — 2-col on desktop (media left / summary right), stack on mobile
   --------------------------------------------------------------------------
   Storefront wraps the single product in `.single-product div.product`, and by
   default floats .woocommerce-product-gallery / .summary side by side at ~48%.
   We convert that wrapper to a single-column flex on phones (media first via
   source order: gallery already precedes .summary in WC markup), then a real
   2-col grid on desktop. The mu-plugin video + tabs sit full-width below. */
.single-product div.product {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

/* Reset Storefront's float-based widths so flex/grid can take over cleanly. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary.entry-summary {
  float: none;
  width: 100%;
  margin: 0;
}

/* The mu-plugin video section + the Description/Shipping tabs are emitted on
   woocommerce_after_single_product_summary, so on mobile they naturally fall
   below the stacked media+summary. Keep them full width. */
.single-product div.product .slapidary-product-video,
.single-product div.product .woocommerce-tabs {
  width: 100%;
}

@media (min-width: 768px) {
  /* Promote the wrapper to a 2-col grid. Gallery -> left col, summary -> right
     col; the after-summary content (video + tabs) spans both columns below.
     Source order in WC single-product is: gallery, summary, [after-summary],
     so explicit grid-column placement keeps media left / summary right. */
  .single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);   /* 48px */
    row-gap: var(--space-6);
    align-items: start;
    padding-top: var(--space-6);
  }
  .single-product div.product .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: var(--space-5);
  }
  .single-product div.product .summary.entry-summary {
    grid-column: 2;
    grid-row: 1;
  }
  /* The mu-plugin video sits under the gallery (left column); the WC tabs span
     full width beneath both. */
  .single-product div.product .slapidary-product-video {
    grid-column: 1;
  }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related,
  .single-product div.product .upsells {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   2. MEDIA — featured image + thumbnail row
   -------------------------------------------------------------------------- */
.woocommerce-product-gallery {
  margin: 0;
}

/* Large featured photo: cut-stone large radius. */
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery img.wp-post-image {
  border-radius: var(--radius-lg);
  display: block;
  width: 100%;
  height: auto;
}

/* WC's gallery zoom/lightbox trigger button — keep it unobtrusive. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  top: var(--space-3);
  right: var(--space-3);
}

/* Thumbnail row (FlexSlider control nav). Mobile: 4-up grid, tight gap. */
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li {
  margin: 0;
  width: 100%;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--bw-bold) solid transparent;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover {
  opacity: 1;
}
/* FlexSlider marks the active thumb img with .flex-active — turquoise frame to
   match the mock's active-thumb treatment. */
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs .flex-active img {
  opacity: 1;
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   3. MU-PLUGIN VIDEO — section.slapidary-product-video
   --------------------------------------------------------------------------
   The mu-plugin emits inline styles on the <section> (margin), the <h2>
   (margin-bottom) and the <video> (cap 480px / 75vh, radius 8px, black bg).
   We re-skin the section as a rounded black card with a Space Mono "Video"
   eyebrow, and KEEP the <video> intact (only refine its radius to match
   tokens — never display:none it). */
section.slapidary-product-video {
  margin: var(--space-6) 0 0;            /* overrides inline 2.5em 0 */
  padding: var(--space-4);
  background: var(--obsidian);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* Turn the mu-plugin's <h2>Video</h2> into a Space Mono eyebrow, left-aligned. */
section.slapidary-product-video h2 {
  margin: 0 0 var(--space-3);            /* overrides inline margin-bottom:.6em */
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--eyebrow-size);       /* 12px */
  line-height: 1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--stone-400);              /* legible eyebrow on obsidian */
  text-align: left;
}

/* Keep the player intact; only harmonize its radius with our token scale.
   Declare the width/height caps here so they hold even if the mu-plugin's
   inline styles are absent. */
section.slapidary-product-video video {
  max-width: 480px;
  max-height: 75vh;
  border-radius: var(--radius-md);      /* refines inline 8px to token */
  background: #000;                      /* mirrors mu-plugin; portrait letterbox */
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   4. SUMMARY (right column)
   -------------------------------------------------------------------------- */
.summary.entry-summary {
  font-family: var(--font-body);
  color: var(--text);
}

/* 4a. Material pill + Category badge row.
   Storefront has no native chip for material/category here. The recommended
   build inserts a chip row at the top of .summary (e.g. a hooked
   <div class="slapidary-chips"> on woocommerce_single_product_summary at
   priority 4, holding the Material attribute term + the product category).
   This styles that row; both chips use the brand Badge spec (Space Mono 11px
   uppercase). The material chip is the soft-olive `pill`; the category chip is
   a neutral squared badge — matching mocks 03/04. */
.summary .slapidary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.summary .slapidary-chips .chip,
.summary .slapidary-chips .badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-2xs);          /* 11px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  text-decoration: none;
}
/* Material = soft-olive tonal pill. */
.summary .slapidary-chips .chip--material {
  background: var(--primary-soft);     /* olive-100 #DFE1C9 */
  color: var(--primary-hover);         /* #444827 */
  border-radius: var(--radius-pill);
}

/* 4b. Product title — Cormorant ~46px Title Case. */
.summary .product_title,
.summary h1.product_title.entry-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(2rem, 6vw, 2.875rem);   /* ~32px mobile -> 46px desktop */
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: none;                     /* Cormorant stays Title Case */
  color: var(--text);
  margin: 0 0 var(--space-2);
}

/* 4c. SKU / product meta — Space Mono, subtle. The SKU is the visible meta we
   want under the title. .product_meta (SKU/cat/tags) renders lower in default
   WC; we restyle it as quiet mono and surface the SKU. */
.summary .product_meta,
.summary .sku_wrapper,
.summary .sku_wrapper .sku {
  font-family: var(--font-mono);
  font-size: var(--text-xs);                /* 12px */
  color: var(--text-subtle);
  letter-spacing: 0.02em;
}
.summary .sku_wrapper {
  display: block;
  margin: 0 0 var(--space-4);
}
/* Hide the "SKU:" label noise, show just the code (matches the mock's bare
   "SLAP-2606-CANT-002"). Posted-in/tags meta kept readable but quiet. */
.summary .product_meta {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}
.summary .product_meta > span {
  display: block;
  margin: 0 0 var(--space-1);
}

/* 4d. Price — Cormorant ~36px. */
.summary .price,
.summary p.price {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.75rem, 5vw, 2.25rem);  /* ~28px -> 36px */
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.summary .price del {
  color: var(--text-subtle);
  font-weight: var(--fw-regular);
  opacity: 0.7;
}
.summary .price ins {
  text-decoration: none;
  color: var(--accent);
}

/* 4e. "ONE OF A KIND · ONLY ONE AVAILABLE" turquoise mono line.
   TARGET: injected as the ::before of form.cart so it always sits directly
   above the Add to Cart button (form.cart is present on every purchasable
   single product; the diamond + copy are content). If the build instead emits
   a real element, give it class .slapidary-ooak — both are styled here. */
.summary form.cart::before,
.summary .slapidary-ooak {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);               /* 11px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}
.summary form.cart::before {
  content: "\25C6  One Of A Kind \00B7 Only One Available";  /* ◆ ... · ... */
}

/* 4f. Add to cart — FULL-WIDTH olive block button. */
.summary form.cart {
  margin: 0 0 var(--space-6);
}
.summary form.cart .single_add_to_cart_button,
.single-product .summary .single_add_to_cart_button.button {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-primary);
  background: var(--primary);               /* olive-600 #565C30 */
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);   /* ~14/24, tap target >=44px */
  min-height: 48px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.summary form.cart .single_add_to_cart_button:hover {
  background: var(--primary-hover);         /* #444827 */
}
.summary form.cart .single_add_to_cart_button:active {
  background: var(--primary-press);         /* #353823 */
  transform: scale(0.97);
}
.summary form.cart .single_add_to_cart_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);        /* turquoise focus ring */
}

/* 4g. Hide the quantity input — one-of-a-kind, qty fixed at 1.
   Storefront renders div.quantity with input.qty inside form.cart. We hide the
   wrapper so the Add button reads as a single full-width block. The form still
   posts quantity=1 (WC default), so checkout stays intact. */
.summary form.cart .quantity {
  display: none;
}

/* --------------------------------------------------------------------------
   5. SPEC BLOCK — WC attributes table as a Space Mono definition list
   --------------------------------------------------------------------------
   WooCommerce outputs product attributes as <table class="woocommerce-product-
   attributes shop_attributes"> with <th> (label) / <td> (value) rows
   (Material / Weight / Dimensions / Category). We strip the table chrome and
   render it as a clean two-column mono "dl": uppercase subtle labels + readable
   values, hairline row separators. */
.woocommerce-product-attributes,
table.shop_attributes {
  width: 100%;
  border: 0;
  border-top: var(--bw-hair) solid var(--border);
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-family: var(--font-mono);
}
.woocommerce-product-attributes tr,
table.shop_attributes tr {
  border-bottom: var(--bw-hair) solid var(--border);
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td,
table.shop_attributes th,
table.shop_attributes td {
  border: 0;
  padding: var(--space-3) 0;
  vertical-align: middle;
  background: transparent;
}
.woocommerce-product-attributes th,
table.shop_attributes th {
  width: 38%;
  font-weight: var(--fw-regular);
  font-size: var(--text-2xs);               /* 11px label */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.woocommerce-product-attributes td,
table.shop_attributes td {
  font-size: var(--text-sm);                /* ~14-15px value */
  color: var(--text);
}
.woocommerce-product-attributes td p,
table.shop_attributes td p {
  margin: 0;
}

@media (min-width: 768px) {
  .woocommerce-product-attributes th,
  table.shop_attributes th {
    width: 30%;
  }
}

/* --------------------------------------------------------------------------
   6. TABS + DESCRIPTION panel
   -------------------------------------------------------------------------- */
/* Tab nav: Public Sans UPPERCASE underline tabs, olive active indicator. */
.woocommerce-tabs ul.tabs.wc-tabs {
  display: flex;
  gap: var(--space-5);
  margin: 0 0 var(--space-2);
  padding: 0 0 0;
  border-bottom: var(--bw-hair) solid var(--border);
  list-style: none;
}
.woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after {
  display: none;            /* remove Storefront's pill/border tab chrome */
}
.woocommerce-tabs ul.tabs.wc-tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.woocommerce-tabs ul.tabs.wc-tabs li a {
  display: inline-block;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: var(--bw-bold) solid transparent;
  margin-bottom: -1px;       /* sit the indicator on the ul border */
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
  color: var(--text);
}
.woocommerce-tabs ul.tabs.wc-tabs li.active a {
  color: var(--primary);
  border-bottom-color: var(--primary);   /* olive active indicator */
}

/* Description panel: readable Public Sans, generous measure. NEVER hidden. */
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel {
  padding-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-md);                /* 18px */
  line-height: var(--leading-relaxed);      /* 1.65 */
  color: var(--text-muted);
  max-width: 62ch;                          /* generous, readable measure */
}
.woocommerce-Tabs-panel--description h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  color: var(--text);
  margin: 0 0 var(--space-3);
}
.woocommerce-Tabs-panel--description p {
  margin: 0 0 var(--space-4);
}
.woocommerce-Tabs-panel--description p:last-child {
  margin-bottom: 0;
}

/* Some block/classic setups print the description outside the tab as
   .woocommerce-product-details__short-description or .entry-content — keep
   those readable too (never hidden). */
.single-product .woocommerce-product-details__short-description {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   7. BACK-TO-SHOP link
   --------------------------------------------------------------------------
   Storefront's breadcrumb (.woocommerce-breadcrumb) is the native "back" path.
   We style it as the mock's quiet mono "← Back to shop". If the build instead
   adds an explicit link, give it class .slapidary-back — both are styled. */
.single-product .woocommerce-breadcrumb,
.single-product .slapidary-back {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.single-product .woocommerce-breadcrumb a,
.single-product .slapidary-back {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.single-product .woocommerce-breadcrumb a:hover,
.single-product .slapidary-back:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   8. NOTICES on the single-product page (added-to-cart message)
   --------------------------------------------------------------------------
   Soft tonal fill + 3px turquoise left rule, matching the brand alert spec, so
   the "added to bag" message reads on-brand. */
.single-product .woocommerce-message {
  background: var(--info-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
}
.single-product .woocommerce-message .button {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}