/*
Theme Name: Sneakerhead Kadence
Template: kadence
Version: 1.0.110
Description: Sneakerhead.eu child theme — dark streetwear design system.
Text Domain: sneakerhead-kadence
*/

:root {
  --sh-gold: #DCB300;
  --sh-gold-hi: #E8C433;
  --sh-onyx: #141414;
  --sh-white: #FFFFFF;
  --sh-granite: #80727B;
  --sh-blue: #2B59C3;
  --sh-bg: var(--sh-onyx);
  --sh-surface: #1D1D1D;
  --sh-surface-2: #272727;
  --sh-line: #272727; /* Decoration only; never a control boundary. */
  --sh-control: var(--sh-granite);
  --sh-text: var(--sh-white);
  --sh-text-muted: #A69CA3;
  --sh-scrim: color-mix(in srgb, var(--sh-onyx) 82%, transparent);
  --sh-swatch-black: #0A0A0A;
  --sh-swatch-white: #F4F4F4;
  --sh-error: #FF7A7E;
  --sh-error-light: #B4232A;
  --sh-surface-light: #F1F1F1;
  --sh-line-light: #E8E8E8;
  --sh-text-muted-light: #6A5F66;
  --sh-radius: 12px;
  --sh-radius-badge: 8px;
  --sh-radius-check: 6px;
  --sh-radius-pill: 999px;
  --sh-ease: cubic-bezier(.16, 1, .3, 1);
  --sh-focus: var(--sh-gold);
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-h1: clamp(2.5rem, 1.6rem + 7vw, 6rem);
  --t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --t-name: clamp(2.25rem, 1.3rem + 3.6vw, 3.75rem);
  --t-sec: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --t-chan: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --t-feature: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --t-post: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  --gutter: 1rem;
  --tap: 44px;
  --sh-button-height: 48px;
  --sh-field-height: 52px;
  --sh-container: 1320px;
  --sh-space-half: 0.25rem;
  --sh-space-1: 0.5rem;
  --sh-space-2: 1rem;
  --sh-space-3: 1.5rem;
  --sh-space-4: 2rem;
  --sh-space-5: 2.5rem;
  --sh-space-6: 3rem;
  --sh-space-8: 4rem;
  --sh-space-12: 6rem;
  --sh-leading-body: 1.6;
  --sh-leading-heading: 1.15;
  --sh-leading-label: 1.3;
  --sh-tracking-wide: 0.08em;

  /* Compatibility aliases for incumbent templates, migrated in E-88 onward. */
  --sh-border: var(--sh-line);
  --sh-accent: var(--sh-gold);
  --sh-accent-text: var(--sh-onyx);
  --sh-accent-alt: var(--sh-blue);
  --sh-highlight: var(--sh-gold);
  --sh-gold-highlight: var(--sh-gold-hi);
  --sh-gold-highlight-strong: var(--sh-gold-hi);
  --sh-state-error: var(--sh-error);
  --sh-state-success: var(--sh-gold);
  --sh-state-warning: var(--sh-gold);
  --sh-state-info: var(--sh-focus);
  --sh-radius-card: var(--sh-radius);
  --sh-radius-button: var(--sh-radius);
  --sh-product-accent: var(--sh-blue); /* Existing ACF helper retained. */
  --sh-text-xs: var(--t-xs);
  --sh-text-sm: var(--t-sm);
  --sh-text-base: var(--t-base);
  --sh-text-md: 1.125rem;
  --sh-text-lg: var(--t-lg);
  --sh-text-xl: var(--t-sec);
  --sh-text-2xl: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);
  --sh-text-display: var(--t-h1);
}
@media (min-width: 47.5rem) { :root { --gutter: 2rem; } }

body.sh-frontend {
  background: var(--sh-bg);
  color: var(--sh-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--sh-leading-body);
}

/* E-115: Complianz inherits the dark Sneakerhead surface, so its generated
   blue legal links need the dark-theme foreground and its close control needs
   the same minimum target as every first-party icon button. */
.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--sh-white) !important; }
.cmplz-cookiebanner .cmplz-close {
  display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap);
}
@media (max-height: 400px) {
  /* Complianz zooms the banner to .6 and the close control to .6 again.
     Keep the banner compact, but cancel the nested zoom and compensate once. */
  .cmplz-cookiebanner .cmplz-close {
    zoom: 1 !important;
    min-width: calc(var(--tap) / .6); min-height: calc(var(--tap) / .6);
  }
  .cmplz-cookiebanner .cmplz-close svg {
    width: calc(20px / .6) !important; height: calc(20px / .6) !important;
  }
}

/* Frontend typography only: admin/editor do not enqueue this layer. */
.sh-frontend :is(p, li, td, dd, figcaption, label, input, textarea, select, .entry-content) {
  font-family: var(--font-body);
}
.sh-frontend :is(h1, h2, h3, h4, h5, h6, .sh-display, .sh-section-title, .sh-newsletter-title) {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--sh-leading-heading);
}

/* Light scope (Jason Markk-style black/white alternation). Two entry
   points share one implementation: `.sh-light` flips a single homepage
   section; `body.sh-light-content #inner-wrap` flips a whole template's
   content area (chrome and hero bands stay dark). Components read the
   --sh-* tokens, so re-scoping them flips everything token-driven. */
.sh-light,
.band-light,
.sh-light-content #inner-wrap {
  --sh-bg: var(--sh-white);
  --sh-surface: var(--sh-surface-light);
  --sh-surface-2: var(--sh-line-light);
  --sh-line: var(--sh-line-light);
  --sh-focus: var(--sh-blue);
  --sh-error: var(--sh-error-light);
  --sh-state-error: var(--sh-error);
  --sh-state-success: var(--sh-blue);
  --sh-state-info: var(--sh-blue);
  --sh-border: var(--sh-line);
  --sh-text: var(--sh-onyx);
  --sh-text-muted: var(--sh-text-muted-light);
  color-scheme: light;
  --sh-highlight: var(--sh-blue);
  background: var(--sh-bg);
  color: var(--sh-text);
}

/* Kadence Blocks hardcodes safety orange (#f76a0c) on highlight marks in
   its own inline CSS — no option exposes it, so override the selector. */
.wp-block-kadence-advancedheading mark.kt-highlight,
.wp-block-kadence-listitem mark.kt-highlight {
  color: var(--sh-highlight);
}

/* Kadence advanced forms default their border colour to #B9B9C5 in the
   block's own JS. Pull it onto the palette. */
.wp-block-kadence-advanced-form {
  --kb-form-border-color: var(--sh-border);
}

/* The hero title band stays dark chrome inside the light main area. */
.sh-light-content #inner-wrap .entry-hero {
  background: var(--sh-onyx);
}

.sh-light-content #inner-wrap .entry-hero :is(h1, .entry-title, .kadence-breadcrumbs, .kadence-breadcrumbs a) {
  color: var(--sh-white);
}

/* Kadence paints headings/links with its global palette — pull them back
   to the scoped tokens inside light scopes. */
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sh-text);
}

:is(.sh-light, .band-light, .sh-light-content #inner-wrap) :is(p, li, td, th, label, legend):not(.sh-product-card *) {
  color: inherit;
}

:is(.sh-light, .band-light, .sh-light-content #inner-wrap) a:not(.sh-btn):not(.sh-icon-btn):not(.sh-chip-label):not(.wp-block-button__link):not(.button):not(.wc-block-components-button):not(.wc-block-cart__submit-button):not(.add_to_cart_button):not(.sh-product-card__title a) {
  color: var(--sh-accent-alt);
}

/* Shop Kit wishlist modal: the plugin paints a white panel, but the modal
   is appended to <body>, outside #inner-wrap, so it inherited the dark
   scope's white text — guests saw only the button. Light text tokens. E-71. */
.iconic-ww-modal {
  --sh-text: var(--sh-onyx);
  --sh-text-muted: var(--sh-text-muted-light);
  color: var(--sh-text);
}

.iconic-ww-modal :is(h2, p, label, legend) {
  color: var(--sh-text);
}

/* Loop cards inside light scopes: Woo paints titles/prices with the
   dark-palette globals — retint. The title is often an inner <a>, so
   the light-scope link rule would otherwise leave it laser blue. */
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) ul.products li.product .woocommerce-loop-product__title,
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) ul.products li.product .woocommerce-loop-product__title a,
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) ul.products li.product a.woocommerce-loop-product__link,
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) ul.products li.product h2,
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) ul.products li.product h2 a,
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) ul.products li.product .entry-title,
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) ul.products li.product .entry-title a {
  color: var(--sh-text) !important;
}

/* Kadence paints .content-bg wrappers with its dark palette9 — invisible
   on dark, black boxes on white. The loop-card variant weighs (0,5,0)
   (`.content-style-unboxed .content-bg.loop-entry .content-bg:not(.loop-entry)`),
   so overrides must outweigh it. Single/page article wrappers get the page
   background so prose sits on white, not a grey slab. */
.content-style-unboxed :is(.sh-light, .band-light, .sh-light-content #inner-wrap) .content-bg.loop-entry .content-bg:not(.loop-entry),
:is(.sh-light, .band-light, .sh-light-content #inner-wrap) .product-details.content-bg {
  background: var(--sh-surface);
}

.sh-light-content #inner-wrap > .content-bg,
.sh-light-content #inner-wrap article.content-bg,
.sh-light-content #inner-wrap .entry-content-wrap.content-bg:not(.product-details) {
  background: var(--sh-bg);
}

/* Kadence's boxed-content shadow was invisible on dark — kill it (flat
   depth is a system rule). */
.sh-light-content #inner-wrap .content-bg,
.sh-light-content #inner-wrap .content-container {
  box-shadow: none;
}

h1, h2, h3 { letter-spacing: -0.02em; }

.sh-eyebrow,
.main-navigation a {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--sh-text-sm);
  line-height: var(--sh-leading-label);
}

/* Homepage sections */
.sh-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(640px, 88svh, 920px);
  overflow: hidden;
  background: var(--sh-bg);
  padding: clamp(8rem, 16vh, 11rem) var(--sh-space-3) clamp(5rem, 10vh, 8rem);
}

/* Dark fallback and directional shading keep white copy legible over footage. */
.sh-hero.sh-light {
  background: #111315;
  color: #fff;
}

#inner-wrap .sh-hero :is(.sh-display, .sh-hero-sub, .sh-eyebrow) {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}

.sh-hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.28) 42%, transparent 76%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.16), transparent 45%);
}

.sh-hero > .sh-hero-cols,
.sh-section > * {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Kadence resets horizontal padding on alignfull groups — restore gutters. */
.entry-content .sh-hero.alignfull,
.entry-content .sh-section.alignfull {
  padding-left: var(--sh-space-3);
  padding-right: var(--sh-space-3);
}

.sh-hero .sh-hero-cols {
  width: 100%;
  min-height: 0;
  align-items: center;
}

.sh-hero .wp-block-column {
  max-width: min(900px, 100%);
}

.sh-hero .wp-block-column > :not(.wp-block-video) {
  position: relative;
  z-index: 2;
}

.sh-display {
  /* Long Polish words (WSPÓŁCZESNE) are wider than a 390px column at full
     display size, and Kadence's global word-break: break-word then splits
     them mid-word. Scale the type down on narrow viewports so the longest
     word wraps whole — same approach as .entry-content .sh-display. */
  font-size: min(var(--sh-text-display), 9vw);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
  word-break: normal;
  overflow-wrap: break-word;
}

.sh-hero .sh-display {
  max-width: 13ch;
  margin-bottom: var(--sh-space-3);
  text-wrap: balance;
  text-shadow: none;
}

.sh-hero-sub {
  font-family: var(--font-body);
  color: var(--sh-text-muted);
  font-size: var(--sh-text-lg);
  line-height: var(--sh-leading-body);
  max-width: 42ch;
  text-shadow: none;
}

/* Empty eyebrow paragraphs render as dead space above the display heading. */
.sh-eyebrow:empty {
  display: none;
}

/* Hero eyebrow names the category before the display line lands. */
.sh-hero .sh-eyebrow {
  color: var(--sh-accent-alt);
  margin-bottom: var(--sh-space-2);
}

/* The display line hugs the eyebrow; Kadence's em-scaled h1 margin would
   open a ~120px hole between them at display size. */
.sh-hero .sh-eyebrow + .sh-display {
  margin-top: 0;
}

/* The Gutenberg video stays editable in the page, but renders as the hero's
   full-bleed background rather than a separate content row. */
.sh-hero .wp-block-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.sh-hero .wp-block-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  object-fit: cover;
  object-position: center 52%;
}

/* Hero CTA deserves more presence than the default button scale. */
.sh-hero .wp-block-button__link {
  padding: 0.9em 2.4em;
  font-size: var(--sh-text-base);
  color: #000;
}

.sh-hero .wp-block-buttons {
  margin-top: var(--sh-space-4);
}

@media (max-width: 767px) {
  .sh-hero {
    min-height: max(640px, 80svh);
    padding-top: 8rem;
    padding-bottom: var(--sh-space-8);
  }

  .sh-hero::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.08)),
      linear-gradient(0deg, rgba(0, 0, 0, 0.32), transparent 85%);
  }

  .sh-hero .wp-block-video video {
    object-position: center center;
  }

  .entry-content .sh-hero .sh-display {
    max-width: 14ch;
    font-size: min(var(--sh-text-display), 9.5vw);
    margin-bottom: var(--sh-space-2);
    overflow-wrap: normal;
  }

  .entry-content .sh-hero .sh-hero-sub {
    max-width: 32ch;
    font-size: 1.125rem;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-hero .wp-block-video {
    display: none;
  }

  .sh-hero {
    background:
      radial-gradient(circle at 75% 50%, var(--sh-surface) 0%, var(--sh-bg) 58%);
  }
}

.sh-hero-img img {
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}

.sh-section {
  padding: var(--sh-space-8) var(--sh-space-3);
}

.sh-section-title,
.related.products > h2,
.up-sells.products > h2 {
  font-family: var(--font-display);
  line-height: var(--sh-leading-heading);
  font-size: var(--sh-text-2xl);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: var(--sh-space-4);
}

.sh-tile img {
  width: 100%;
  border: 1px solid var(--sh-border);
  background: var(--sh-surface);
  transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
}

/* Fade-in is progressive enhancement: only hide images when the marker
   class set by functions.php is present, so a JS failure (or a full-page
   snapshot before load events fire) never leaves blank tiles. */
.sh-js .sh-tile img {
  opacity: 0;
}

.sh-js .sh-tile img.is-loaded {
  opacity: 1;
}

.sh-tile a:hover img {
  transform: translateY(-4px);
  border-color: var(--sh-accent);
}

.sh-editorial-inner,
.sh-showcase-inner {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
}

.sh-editorial-inner .wp-block-media-text__content,
.sh-showcase-inner .wp-block-media-text__content {
  padding: var(--sh-space-6);
}

/* Bestseller showcase (design-loop: home-showcase). */
.sh-showcase-inner img {
  width: 100%;
  height: auto;
}

.sh-showcase-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sh-space-4);
  color: var(--sh-text-muted);
  font-family: var(--font-body);
  font-size: var(--sh-text-base);
  line-height: var(--sh-leading-body);
}

.sh-showcase-benefits li {
  padding-left: 1.25em;
  position: relative;
  margin-bottom: var(--sh-space-1);
}

.sh-showcase-benefits li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--sh-accent);
  font-size: 0.75em;
  line-height: 2;
}

.sh-showcase-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--sh-text-2xl);
  margin-bottom: var(--sh-space-3);
}

.sh-btn-outline .wp-block-button__link {
  border: 2px solid var(--sh-accent);
  color: var(--sh-accent);
  background: transparent;
}

.sh-btn-outline .wp-block-button__link:hover {
  background: var(--sh-accent);
  color: var(--sh-accent-text);
}

/* Account / login forms — dark. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--sh-radius-card) !important;
  color: var(--sh-text);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  background: var(--sh-bg);
  border: 1px solid var(--sh-control);
  color: var(--sh-text);
  min-height: var(--sh-field-height);
  border-radius: var(--sh-radius-card);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--sh-accent);

}

.woocommerce .button-social-login {
  border-radius: var(--sh-radius-button) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Card layout and purchase states are owned by shop.css (E-90). */
.sh-facet-bar,
.sh-sticky-atc,
.sh-shipbar { border-radius: var(--sh-radius-card); }

/* Gutenberg List block — used for footer link lists — keep the
   design system's dots-free look everywhere it appears in the footer. */
.site-footer .wp-block-list,
.footer-widget-area .wp-block-list {
  list-style: none;
  padding-left: 0;
  padding-inline-start: 0;
  margin-left: 0;
}

/* Global chrome polish (design-loop: global). */

/* Wordmark: uppercase display treatment to match the brand type. */
.site-branding .site-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Hero title bands reserve more height than a one-line title needs. */
.entry-hero .entry-header {
  min-height: 0;
  padding: var(--sh-space-4) 0;
}

/* Archive/page hero titles ("Shop") — align with the display style. */
.entry-hero .entry-title,
.page-title.archive-title,
.woocommerce-products-header .woocommerce-products-header__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Footer: compact eyebrow headings instead of full h3 scale. */
.footer-widget-area .wp-block-heading {
  font-family: var(--font-display);
  font-size: var(--sh-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: var(--sh-leading-label);
  color: var(--sh-text);
  margin-bottom: var(--sh-space-2);
}

/* Footer links: muted at rest, gold on hover, breathing room per row. */
.footer-widget-area .wp-block-list li {
  margin-bottom: 0.6em;
}

.footer-widget-area a {
  color: var(--sh-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-widget-area a:hover {
  color: var(--sh-accent);
}

.footer-widget-area .wp-block-paragraph {
  color: var(--sh-text-muted);
}

/* Footer social widget: Kadence renders it from its own element template
   rather than as a block widget, so nothing above reaches it. Its heading is
   an h2.widget-title (20px/800, Kadence's .widget-area .widget-title) beside
   the block widgets' h3.wp-block-heading at 15px/700, and the customizer
   scales the button wrap by 1.2em, giving 21.6px labels and icons next to
   18px footer links. Both are pulled back onto the footer's scale here.
   Selectors are deliberately specific: Kadence prints the 1.2em as inline
   dynamic CSS at (0,2,0), so matching that specificity would leave the
   winner down to stylesheet order. */
.site-footer .footer-widget-area .widget-title {
  font-family: var(--font-display);
  font-size: var(--sh-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: var(--sh-leading-label);
  color: var(--sh-text);
  margin-bottom: var(--sh-space-2);
}

/* Stacked, not wrapped: three labelled links do not fit one 325px footer
   column, so the row layout broke as Instagram + Facebook / TikTok. The three
   columns beside it are vertical link lists, and 0.6em of gap against the
   1.8 line-height reproduces their 43px row pitch exactly. */
.site-footer .footer-social-wrap .footer-social-inner-wrap {
  font-size: 1em;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
}

/* The customizer sets the outline border to `2px none`, so .social-button's
   0.4em side padding bought nothing but an 8px indent that pushed the icons
   off the column's left edge — the heading above them starts at the gutter.
   Dropping the button box makes each row measure like a footer link row
   (1.8 line-height, 0.6em between rows). */
.site-footer .footer-social-wrap .social-button {
  height: auto;
  padding: 0;
  line-height: 1.8;
}

/* Account area polish (design-loop: account). */

/* "Login" / section headings inside the account wrapper. */
.woocommerce-account .entry-content h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.woocommerce form .woocommerce-form__input-checkbox {
  accent-color: var(--sh-accent);
}

/* Account navigation: eyebrow treatment, gold active/hover. */
.woocommerce-MyAccount-navigation a {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--sh-text-sm);
  line-height: var(--sh-leading-label);
  color: var(--sh-text-muted);
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
  color: var(--sh-accent);
}

/* Notices: dark surfaces instead of WooCommerce's light defaults. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-top: 2px solid var(--sh-accent);
  color: var(--sh-text);
  border-radius: var(--sh-radius-card);
}

/* State colour rides the top border only; the notice text carries the
   meaning, so these borders are supplementary, not the sole signal. */
.woocommerce-message {
  border-top-color: var(--sh-state-success);
}

.woocommerce-info {
  border-top-color: var(--sh-state-info);
}

.woocommerce-error {
  border-top-color: var(--sh-state-error);
}

/* Orders table: dark rows with hairline dividers. */
.woocommerce-account table.woocommerce-orders-table {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-card);
  overflow: hidden;
}

.woocommerce-account table.woocommerce-orders-table th,
.woocommerce-account table.woocommerce-orders-table td {
  border-bottom: 1px solid var(--sh-border);
  color: var(--sh-text);
}

.woocommerce-account table.woocommerce-orders-table th {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--sh-text-sm);
  letter-spacing: 0.05em;
  color: var(--sh-text-muted);
}

/* Proof section (design-loop: home-proof). Swatch pair on a surface card;
   source PNGs are 223px circles — display near-native size, never enlarged. */
.sh-proof .sh-proof-cols {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  padding: var(--sh-space-5) var(--sh-space-4);
  gap: var(--sh-space-4);
}

.sh-proof-pair {
  gap: var(--sh-space-4);
  align-items: flex-start !important; /* Gutenberg flex default centers — captions drift */
}

.sh-proof-pair figure {
  flex: 0 1 auto;
}

.sh-proof-img {
  margin: 0;
  text-align: center;
}

.sh-proof-img img {
  width: min(200px, 40vw);
  height: auto;
}

.sh-proof-img .wp-element-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--sh-text-sm);
  line-height: var(--sh-leading-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sh-text-muted);
  margin-top: var(--sh-space-2);
}

/* USP marquee band (design-loop: home-marquee). Two identical track halves;
   -50% translate loops seamlessly. Static row when motion is reduced. */
.sh-marquee {
  overflow: hidden;
  border-top: 1px solid var(--sh-border);
  border-bottom: 1px solid var(--sh-border);
  padding: var(--sh-space-3) 0;
}

.sh-marquee-track {
  display: flex;
  width: max-content;
  animation: sh-marquee 45s linear infinite;
}

.sh-marquee-content {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-space-4);
  padding-right: var(--sh-space-4);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--sh-text-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sh-text);
}

.sh-mq-sep {
  color: var(--sh-accent);
  font-size: 0.75em;
}

@keyframes sh-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sh-marquee-track {
    animation: none;
  }
}

.sh-proof-materials {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--sh-text-sm);
  line-height: var(--sh-leading-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sh-text-muted);
}

@media (max-width: 719px) {
  .sh-proof .sh-proof-cols {
    padding: var(--sh-space-4) var(--sh-space-3);
  }
}

/* ---------------------------------------------------------------
   Shop Kit quick view (E-70)
   Same cause as the wishlist modal (E-71): glightbox appends the
   modal to <body>, outside #inner-wrap, so the plugin's white panel
   inherited the dark scope's white text — title, short description
   and list were invisible, and the price and stock read as gold
   links. Light tokens first, then a summary column laid out like the
   PDP. The add-to-cart row (onyx CTA, − n + stepper) is shared with
   the PDP and follows this block.
   --------------------------------------------------------------- */
.quickview-lightbox {
  --sh-bg: var(--sh-white);
  --sh-surface: var(--sh-surface-light);
  --sh-border: var(--sh-line-light);
  --sh-text: var(--sh-onyx);
  --sh-text-muted: var(--sh-text-muted-light);
  --sh-highlight: var(--sh-blue);
}

.quickview-lightbox .gslide-inline {
  background: var(--sh-bg);
  color: var(--sh-text);
  border-radius: var(--sh-radius-card);
}

/* The plugin centres the content vertically in a 100%-high flex box; once it
   outgrows the panel (any phone) the top overflows upwards, out of scroll
   reach — the gallery and title were cut off. */
.quickview-lightbox .kt-woo-quickview-content {
  display: block;
  height: auto;
}

.quickview-lightbox .kt-quickview-content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  height: auto;
}

/* Gallery: the plugin stretches every level to 100% height and crops with
   `cover`; Splide then sizes the track to the tallest slide, so a square shot
   sat at the top of a 4:5 track with dead space below it. Frame every slide
   at 4:5 with `contain`, as on the PDP (product.css). In the quick view a
   slide is a bare <li><img>, without the PDP's .kt-image-slide wrapper. */
.quickview-lightbox .kt-quickview-content-left,
.quickview-lightbox .kt-quickview-content-left .kwt-gallery-wrap,
.quickview-lightbox .kt-quickview-content-left .product_image,
.quickview-lightbox .kt-quickview-content-left .kadence-product-gallery-main :is(.splide__track, .splide__list) {
  height: auto;
}

.quickview-lightbox .kt-quickview-content-left .kadence-product-gallery-main {
  flex: none;
}

.quickview-lightbox .kt-quickview-content-left .kadence-product-gallery-main .splide__slide {
  height: auto;
  aspect-ratio: 4 / 5;
}

.quickview-lightbox .kt-quickview-content-left .kadence-product-gallery-main .splide__slide img {
  display: block;
  width: 100% !important;
  height: 100%;
  object-fit: contain;
}

/* At ≤1024px the gallery setting (grid-3-col-highlighted) stops the slider
   and stacks every photo, which pushed the name and price below the fold.
   The quick view keeps the hero shot; the rest live on the product page. */
@media (max-width: 1024px) {
  .quickview-lightbox .kt-quickview-content-left .kadence-product-gallery-main .splide__slide:not(:first-child) {
    display: none;
  }
}

/* Thumbnails start at the image's left edge (Shop Kit centres a strip it
   sizes to 50% for two images) and lose the arrows when they all fit. */
.quickview-lightbox .ksk-gallery .kadence-product-gallery-thumbnails {
  margin-top: var(--sh-space-2);
  padding: 0 var(--sh-space-2) var(--sh-space-2);
}

.quickview-lightbox .ksk-gallery .thumb-wrapper {
  margin-left: 0;
  margin-right: auto;
}

.quickview-lightbox .ksk-gallery .kt_thumb_hide_arrow .splide__arrows {
  display: none;
}

.quickview-lightbox .ksk-gallery .kadence-product-gallery-thumbnails :is(.kt-woo-gallery-thumbnail, img) {
  border-radius: var(--sh-radius-button);
}

.quickview-lightbox .ksk-gallery .kadence-product-gallery-thumbnails .kt-woo-gallery-thumbnail.is-active {
  outline-color: var(--sh-onyx) !important;
}

/* Summary column: name, price, short description, stock, quantity + CTA,
   SKU/category, link to the full page — one rhythm, no stray margins. */
.quickview-lightbox .kt-quickview-content-right {
  display: flex;
  flex-direction: column;
  gap: var(--sh-space-2);
  padding: var(--sh-space-4);
  color: var(--sh-text);
}

.quickview-lightbox .kt-quickview-content-right > * {
  margin: 0;
}

.quickview-lightbox .kwt-title-wrap :is(h1, h2, .entry-title) {
  margin: 0;
  color: var(--sh-text);
  font-family: var(--font-display);
  font-size: var(--sh-text-lg);
  font-weight: 800;
  line-height: var(--sh-leading-heading);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.quickview-lightbox .kwt-title-wrap a {
  color: inherit;
  text-decoration: none;
}

.quickview-lightbox .kwt-title-wrap a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Price: PDP voice (Inter 600, onyx) — the plugin wraps it in a link that
   Kadence paints gold and underlines. */
.quickview-lightbox .kwt-price-wrap,
.quickview-lightbox .kwt-price-wrap :is(a, .amount, bdi, ins) {
  color: var(--sh-text);
  font-family: var(--font-body);
  font-size: var(--sh-text-lg);
  font-weight: 600;
  text-decoration: none;
}

.quickview-lightbox .kwt-price-wrap del,
.quickview-lightbox .kwt-price-wrap del .amount {
  color: var(--sh-text-muted);
  font-size: var(--sh-text-base);
  font-weight: 400;
  text-decoration: line-through;
}

.quickview-lightbox .kwt-excerpt-wrap {
  color: var(--sh-text);
  font-size: var(--sh-text-sm);
  line-height: var(--sh-leading-body);
}

.quickview-lightbox .kwt-excerpt-wrap :is(p, li) {
  color: inherit;
}

.quickview-lightbox .kwt-excerpt-wrap :is(p, ul, ol) {
  margin: 0 0 var(--sh-space-1);
}

.quickview-lightbox .kwt-excerpt-wrap > :last-child,
.quickview-lightbox .kwt-excerpt-wrap > * > :last-child {
  margin-bottom: 0;
}

.quickview-lightbox .kwt-excerpt-wrap :is(ul, ol) {
  padding-left: 1.25em;
}

.quickview-lightbox .kwt-add-to-cart-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sh-space-2);
}

/* WooCommerce's `.woocommerce div.product …` rules (0,3,x) paint the stock
   line gold and give the form a 2em bottom margin; outweigh them. */
.quickview-lightbox .kt-quickview-content .kwt-add-to-cart-wrap .stock {
  margin: 0;
  color: var(--sh-text);
  font-size: var(--sh-text-sm);
}

.quickview-lightbox .kt-quickview-content .kwt-add-to-cart-wrap form.cart {
  margin: 0;
}

/* Woo's clearfix pseudo-elements become flex items: the gap pushed the
   stepper 16px in from the column edge. */
.quickview-lightbox .kt-quickview-content .kwt-add-to-cart-wrap form.cart::before,
.quickview-lightbox .kt-quickview-content .kwt-add-to-cart-wrap form.cart::after {
  content: none;
}

/* Kadence's `.woocommerce div.product .product_meta > span` (the quick view
   root is a div.product) sets a dark palette grey and out-specifies a plain
   override — !important as on the PDP. */
.quickview-lightbox .product_meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: var(--sh-text-xs);
}

.quickview-lightbox .product_meta,
.quickview-lightbox .product_meta > span,
.quickview-lightbox .product_meta a {
  color: var(--sh-text-muted) !important;
}

.quickview-lightbox .product_meta a:hover {
  color: var(--sh-accent-alt) !important;
}

.quickview-lightbox .sh-qv-more {
  align-self: flex-start;
  color: var(--sh-accent-alt);
  font-size: var(--sh-text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.quickview-lightbox .sh-qv-more:hover {
  text-decoration-thickness: 2px;
}

/* Phones: one column, image above the summary. The plugin keeps two
   columns at every width (an 88px image at 390px) and reserves 400px. */
@media (max-width: 768px) {
  .quickview-lightbox .gslide-media {
    min-height: 0 !important;
  }

  .quickview-lightbox .kt-quickview-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .quickview-lightbox .kt-quickview-content-right {
    padding: var(--sh-space-3) var(--sh-space-2) var(--sh-space-4);
  }
}

/* Narrow phones: a square frame keeps the name and price in the first
   screen; 4:5 shots sit centred inside it. */
@media (max-width: 767px) {
  .quickview-lightbox .kt-quickview-content-left .kadence-product-gallery-main .splide__slide {
    aspect-ratio: 1 / 1;
  }
}

/* Add-to-cart row shared by the PDP and the quick view. Moved from
   product.css unchanged except for the scope (E-70). */
/* Light-PDP primary CTA: onyx fill, white ink. Gold fails AA on white;
   laser blue reads as a generic Woo button. --sh-onyx/--sh-white stay
   correct in both the light summary and the dark sticky bar. */
:is(.single-product:not(.sh-pdp), .quickview-lightbox) form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sh-space-2);
}

:is(.single-product:not(.sh-pdp), .quickview-lightbox) form.cart .variations,
:is(.single-product:not(.sh-pdp), .quickview-lightbox) form.cart .single_variation_wrap,
:is(.single-product:not(.sh-pdp), .quickview-lightbox) form.cart .woocommerce-variation-add-to-cart {
  flex: 1 1 100%;
}

:is(.single-product:not(.sh-pdp), .quickview-lightbox) .single_add_to_cart_button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0.85rem 1.75rem !important;
  background: var(--sh-onyx) !important;
  border: 2px solid var(--sh-onyx) !important;
  color: var(--sh-white) !important;
  border-radius: var(--sh-radius-button);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

:is(.single-product:not(.sh-pdp), .quickview-lightbox) .single_add_to_cart_button:hover,
:is(.single-product:not(.sh-pdp), .quickview-lightbox) .single_add_to_cart_button:focus {
  background: var(--sh-onyx) !important;
  color: var(--sh-white) !important;
  box-shadow: none;
}

/* Quantity: an explicit [ − n + ] stepper, 48px tall so it sits level with the
   ATC button beside it. The native number spinner is suppressed — its hairline
   arrows are a poor touch target and render differently in every browser — and
   the buttons take over as the visible controls. The group carries the border
   and radius; the input inside it is bare. With no stepper (a sold-individually
   field renders none) the group is simply a bordered box around the number. */
:is(.single-product, .quickview-lightbox) form.cart .quantity {
  margin: 0;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  height: 48px;
  background: var(--sh-bg);
  border: 1px solid var(--sh-text);
  border-radius: var(--sh-radius-button);
  overflow: hidden;
}

:is(.single-product, .quickview-lightbox) form.cart .quantity:focus-within {
  border-color: var(--sh-accent);
}

:is(.single-product, .quickview-lightbox) form.cart .quantity .qty {
  box-sizing: border-box;
  width: 3rem;
  height: 100%;
  padding: 0 0.25rem;
  background: transparent;
  color: var(--sh-text);
  border: 0;
  border-radius: 0;
  /* Archivo at 600 is the button voice — the number reads as part of the
     control row rather than as body copy in Inter. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--sh-text-base);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

:is(.single-product, .quickview-lightbox) form.cart .quantity .qty::-webkit-outer-spin-button,
:is(.single-product, .quickview-lightbox) form.cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:is(.single-product, .quickview-lightbox) form.cart .quantity .qty:focus {

}

:is(.single-product, .quickview-lightbox) form.cart .sh-qty-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--sh-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

:is(.single-product, .quickview-lightbox) form.cart .sh-qty-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sh-text) 8%, transparent);
  color: var(--sh-text);
}

:is(.single-product, .quickview-lightbox) form.cart .sh-qty-btn:focus-visible {
  outline: 3px solid var(--sh-focus);
  outline-offset: -3px;
}

:is(.single-product, .quickview-lightbox) form.cart .sh-qty-btn:disabled {
  opacity: 0.35;
  cursor: default;
}