/* Mavron Studio design system — brand tokens.
   Streetwear collections: Sky Lines / Goth / Urban.
   common-core structural CSS consumes these variables. Never shared with
   other brands. Mavron is a DARK theme (near-black bg, light text) —
   inverted from Eden/Forgebury; see the Crayon Box note below. */

/* ── CRAYON BOX ───────────────────────────────────────────────
   Mavron's values for the common-core variable contract, verified
   live against mavronstudio.com 2026-07. Nothing but variable
   definitions belongs in this block — see
   HANDOVER-IMPLEMENTATION.md §6. common-core's shared CSS reads
   these; it never hardcodes a colour or font itself.

   --cc-text and --cc-bg-subtle are intentionally inverted here
   (light-on-dark) vs Eden/Forgebury — never assume "subtle
   background" means "light" in shared code. ─────────────────── */
:root {
    --cc-accent:         #c9a84c;
    --cc-accent-hover:   #b8962e;
    --cc-text:           #ffffff;
    --cc-text-muted:     #b8b8b8;
    --cc-bg-subtle:      #111111;
    --cc-border-subtle:  rgba(201,168,76,0.2);
    --cc-font-heading:   'Outfit', sans-serif;
    --cc-font-body:      'DM Sans', sans-serif;
}

:root {
    --mavron-black:  #111111;
    --mavron-white:  #f5f5f5;
    --mavron-accent: #c9a84c;
    --mavron-heading: 'Outfit', sans-serif;
    --mavron-body:    'DM Sans', sans-serif;
    --mavron-light-bg:      #ffffff;
    --mavron-light-bg-alt:  #ececec;
    --mavron-light-text:    #0a0a0a;
    --mavron-light-muted:   #4a4a4a;
    /* Glass card — matches Forgebury's locked 2026-07-19 spec (see
       forgebury-core/assets/css/components/product-cards.css), replicated
       here as Mavron's own tokens rather than shared — design systems stay
       brand-specific, never shared between plugins. */
    --mavron-card-bg:          rgba(255,255,255,0.62);
    --mavron-card-bg-hover:    rgba(255,255,255,0.85);
    --mavron-card-border:      rgba(0,0,0,0.08);
    --mavron-card-radius:      22px;
    --mavron-card-shadow:      0 20px 45px -20px rgba(20,20,22,0.16), 0 2px 8px rgba(20,20,22,0.04);
    --mavron-card-shadow-hover: 0 28px 60px -18px rgba(20,20,22,0.22), 0 4px 14px rgba(20,20,22,0.06);
}

/* ── UI FIXES (2026-07-22 homepage audit) ────────────────────
   See MAVRON-UI-AUDIT-2026-07-22.md. The homepage itself is hand-authored
   HTML + inline <style> pasted into the page editor (post 2089, via the
   [raw] shortcode) — not template files, not in this repo. These rules
   override that inline CSS from the enqueued stylesheet, so !important is
   load-bearing here, not sloppiness. ──────────────────────────── */

/* Astra's global-color-5 (#121212) is near-invisible on Mavron's dark
   footer — it was likely fine on Astra's default light footer before the
   dark theme override. Scoped to the footer only. */
#colophon .has-ast-global-color-5-color {
    color: var(--cc-text-muted) !important;
}
#colophon .wp-block-heading.has-ast-global-color-5-color {
    color: var(--cc-text) !important;
}

/* WooCommerce prints "Rated 0 out of 5" for products with zero reviews —
   reads as broken rather than simply unreviewed yet. */
.star-rating:has(span[style*="width:0%"]) {
    display: none !important;
}

/* Dark theme shipped with no visible keyboard-focus state. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

/* Footer logo (block-28, footer-widget-1) rendered at its native upload
   size (258x166) — oversized next to the ~24px column headings next to
   it. The vertical-misalignment half of this bug was the empty leftover
   paragraph widget above it (block-27, deleted directly, not a CSS fix). */
#colophon .footer-widget-area .wp-block-image img {
    max-width: 160px;
    height: auto;
}

/* ── SHOP REBUILD (2026-07-22 → 2026-07-23) ──────────────────
   Full visual + structural pass on the WooCommerce shop archive,
   category, and single-product pages. Two earlier attempts tried to
   blend product photography into the dark theme (a stone mat inside
   each card, then a stone "shelf" behind the grid — both reverted, see
   MAVRON-SHOP-REBUILD-2026-07-22.md: with a 1-product catalog either
   approach reads as an obviously empty leftover box).

   Landed on the approach actual research supports instead: most dark-
   theme fashion/streetwear sites don't force product photography into
   the dark palette at all — they run the shopping surface as its own
   light zone and reserve dark/black for brand/editorial sections
   (documented example: Skullcandy). So: shop archive, category, and
   single-product pages become their own light zone (content area only —
   header/footer stay dark as shared site chrome). White product photos
   and black-colored shirts both read cleanly on a light zone with no
   seam to manage, so the card-mat problem this was solving disappears
   entirely rather than needing a trick.

   Scoped to body.woocommerce-shop / single-product / tax-product_cat
   specifically — NOT the general body.woocommerce gate, which would
   have also caught cart/checkout/my-account (untouched, out of scope,
   not reviewed). ─────────────────────────────────────────────────── */
body.woocommerce-shop .ast-container,
body.single-product .ast-container,
body.tax-product_cat .ast-container {
    background: var(--mavron-light-bg);
    color: var(--mavron-light-text);
    padding-top: 32px;
    padding-bottom: 48px;
}
body.woocommerce-shop .ast-container h1,
body.woocommerce-shop .ast-container h2,
body.woocommerce-shop .ast-container h3,
body.woocommerce-shop .ast-container h4,
body.single-product .ast-container h1,
body.single-product .ast-container h2,
body.single-product .ast-container h3,
body.single-product .ast-container h4,
body.tax-product_cat .ast-container h1,
body.tax-product_cat .ast-container h2,
body.tax-product_cat .ast-container h3,
body.tax-product_cat .ast-container h4 {
    color: var(--mavron-light-text);
}
body.woocommerce-shop .ast-container a,
body.single-product .ast-container a,
body.tax-product_cat .ast-container a {
    color: var(--mavron-light-text);
}
body.woocommerce-shop .ast-container a:hover,
body.single-product .ast-container a:hover,
body.tax-product_cat .ast-container a:hover {
    color: var(--cc-accent-hover);
}
.woocommerce-breadcrumb {
    color: var(--mavron-light-muted);
}
/* Astra's "Blog Single" boxed content style (body.ast-blog-single-style-1)
   puts its own dark background on TWO nested wrappers in the single-
   product template (.ast-article-single AND .ast-woocommerce-container,
   confirmed via computed styles — both rgb(18,18,18)) — same class of
   bug as the homepage's .mvr wrapper, nested elements with their own
   explicit background the outer container rule doesn't reach. */
body.single-product .ast-article-single,
body.single-product .ast-woocommerce-container {
    background: transparent !important;
}

/* Product card: frosted glass panel on the pure-white zone — same visual
   language as Forgebury's locked glass-card spec (translucent white,
   blur+saturate, soft shadow, hover lift), replicated here as Mavron's
   own tokens since Astra's native ul.products markup differs from
   Forgebury's custom template, but the look should match. */
ul.products li.product {
    background: var(--mavron-card-bg);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--mavron-card-border);
    border-radius: var(--mavron-card-radius);
    box-shadow: var(--mavron-card-shadow);
    padding: 10px 10px 18px;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.35s ease;
}
ul.products li.product:hover {
    background: var(--mavron-card-bg-hover);
    box-shadow: var(--mavron-card-shadow-hover);
    transform: translateY(-6px);
}
ul.products li.product .astra-shop-thumbnail-wrap {
    border-radius: 14px;
    overflow: hidden;
}
ul.products li.product .woocommerce-loop-product__title {
    margin-top: 14px;
    color: var(--mavron-light-text) !important;
    font-weight: 600;
}
ul.products li.product .ast-woo-product-category {
    color: var(--mavron-light-text) !important;
}
ul.products li.product .price,
ul.products li.product .price bdi,
ul.products li.product .price .woocommerce-Price-amount {
    color: var(--mavron-light-text) !important;
    font-weight: 700;
}

/* Add-to-cart / view-product action on cards, and the single-product
   add-to-cart button — the primary conversion CTAs on the site, previously
   unstyled defaults (grey/white). Gold accent reads fine on light or dark. */
ul.products li.product a.add_to_cart_button,
ul.products li.product a.button,
.single_add_to_cart_button,
.woocommerce-variation-add-to-cart .button {
    background: var(--cc-accent);
    color: var(--mavron-black);
    border: none;
    border-radius: 30px;
    font-weight: 600;
    transition: background 0.2s ease;
}
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.button:hover,
.single_add_to_cart_button:hover,
.woocommerce-variation-add-to-cart .button:hover {
    background: var(--cc-accent-hover);
}

/* Sorting dropdown — was invisible dark-grey-on-black before; needs the
   opposite direction now, a light control instead of a dark one. */
.woocommerce-ordering select.orderby {
    color: var(--mavron-light-text);
    background-color: #ffffff;
    border: 1px solid var(--mavron-light-bg-alt);
    border-radius: 6px;
    padding: 6px 10px;
}

/* Price filter widget — accent the slider gold; Apply button gold. Range
   labels inherit the container's dark-on-light color now. */
.wc-block-components-price-slider__range-input-progress {
    background: var(--cc-accent) !important;
}
.wc-block-components-price-slider__range-input::-webkit-slider-thumb {
    background: var(--cc-accent);
}
.wc-block-components-price-slider__range-input::-moz-range-thumb {
    background: var(--cc-accent);
    border: none;
}
.wc-block-price-filter__button,
.price_slider_amount button {
    background: var(--cc-accent) !important;
    color: var(--mavron-black) !important;
    border-radius: 30px !important;
}

/* Categories widget — strip default bullets, dark-on-light text/hover. */
.widget_product_categories ul.product-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget_product_categories ul.product-categories li {
    padding: 8px 0;
    border-bottom: 1px solid var(--mavron-light-bg-alt);
}
.widget_product_categories ul.product-categories a {
    color: var(--mavron-light-text);
}
.widget_product_categories ul.product-categories a:hover {
    color: var(--cc-accent-hover);
}
.widget_product_categories ul.product-categories .count {
    color: var(--mavron-light-muted);
}

/* "Hottest Deals" (product-on-sale block) renders a heading with nothing
   under it whenever there are no products currently on sale — with a
   1-product catalog that's always, today. Hides cleanly, reappears on its
   own once a sale product exists — no content change needed. */
.widget:has(.wp-widget-group__inner-blocks:empty) {
    display: none;
}

/* Pagination — dark-on-light now; not visible with today's 1-product
   catalog, but ready for when it grows past one page. */
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    color: var(--mavron-light-muted);
    border: none;
}
.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-pagination ul.page-numbers li span.current {
    color: var(--cc-accent-hover);
    background: transparent;
}

/* Single-product page elements that sit in the now-light .ast-container
   but don't live inside ul.products: meta line, description tab content,
   review tab headers. */
.product_meta,
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel {
    color: var(--mavron-light-text);
}
.woocommerce-tabs ul.tabs li a {
    color: var(--mavron-light-muted);
}
.woocommerce-tabs ul.tabs li.active a {
    color: var(--mavron-light-text);
}

/* ── Homepage "Pieces That Hit Different" product section ──────
   Same light-zone logic as above, applied to the homepage's embedded
   product block (Spectra container, unique block ID — specific to this
   one section instance, won't affect anything else on the homepage).
   !important needed here since this competes with the homepage's own
   large inline <style> block — same reason the footer fixes above
   need it. */
.uagb-block-2ad67de5 {
    background: var(--mavron-light-bg) !important;
    padding: 48px 24px !important;
    border-radius: 16px;
}
/* .mvr is a reusable section-wrapper class with its own dark background
   baked into the page's inline stylesheet — used across many sections on
   this page, so scoped narrowly to only the instance inside this block. */
.uagb-block-2ad67de5 .mvr {
    background: transparent !important;
}
.uagb-block-2ad67de5 h2,
.uagb-block-2ad67de5 p {
    color: var(--mavron-light-text) !important;
}