/*
 * ═══════════════════════════════════════════════════════════════
 *  ZINC HORIZON — Template Styles (zinc-templates.css)
 *
 *  Consolidated from inline <style> blocks and style attributes:
 *    footer.php, archive.php, search.php, author.php, single.php
 *
 *  Dark-first design with light-mode overrides.
 *  BEM naming: .zinc-footer__*, .zinc-archive__*, .zinc-search__*,
 *              .zinc-author__*, .zinc-related__*
 *
 *  @package ZincHorizon
 *  @since   1.0.0
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES — Dark Mode Defaults
   ═══════════════════════════════════════════════════════════════ */

:root {
    --zinc-bg: #09090b;
    --zinc-surface: #18181b;
    --zinc-surface-alt: #27272a;
    --zinc-card: #18181b;
    --zinc-text: #fafafa;
    --zinc-text-secondary: #d4d4d8;
    --zinc-text-muted: #a1a1aa;
    --zinc-text-dim: #71717a;
    --zinc-border: #3f3f46;
    --zinc-border-subtle: #27272a;
    --zinc-accent: #dc2626;
    --zinc-accent-dark: #991b1b;
    --zinc-accent-hover: #b91c1c;
    
    /* RGB values for opacity-based colors (e.g., rgba) */
    --zinc-accent-rgb: 220, 38, 38;
    --zinc-border-rgb: 63, 63, 70;
    --zinc-bg-rgb: 9, 9, 11;
    
    /* Header & Layout Variables */
    --zinc-header-h: 88px;
    --zinc-header-opacity: 0.85;
    --zinc-header-blur: 12px;
    
    /* Design Tokens */
    --zinc-radius: 12px;
    --zinc-info: #3b82f6;
    --zinc-success: #22c55e;
    --zinc-warning: #f59e0b;
    
    /* Typography */
    --zinc-font-h1: 2.5rem;
    --zinc-heading-weight: 800;
    
    /* Missing Variables (Added 2026-02-08) */
    --zinc-surface-hover: #3f3f46;
    --zinc-border-hover: #52525b;
    --zinc-error: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════
   CORE LAYOUT — Body, Header, Container
   Extracted from template-header.php inline styles (Nuclear CSS
   Liquidation). Zero !important — proper cascade.
   ═══════════════════════════════════════════════════════════════ */

/* ── Body Base ────────────────────────────────────────────────── */
body.zinc-horizon {
    padding-top: var(--zinc-header-h, 88px);
    background: var(--zinc-bg);
    color: var(--zinc-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Site container: center entire layout (no more left-aligned “old HTML” look) ── */
/* Centering is done by .zinc-container, NOT by #page.site.
   Header and footer must remain full-width. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── Sticky Glassmorphism Header ──────────────────────────────── */
#zinc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(var(--zinc-bg-rgb), var(--zinc-header-opacity, 0.85));
    backdrop-filter: blur(var(--zinc-header-blur, 12px));
    -webkit-backdrop-filter: blur(var(--zinc-header-blur, 12px));
    border-bottom: 1px solid rgba(var(--zinc-border-rgb), 0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                border-color 0.3s ease;
}

/* Non-sticky (static) header — controlled by Customizer */
#zinc-header.zinc-header-static {
    position: relative;
    z-index: 100;
}

/* ── WordPress Admin Bar Compatibility ────────────────────────── */
/* When logged in as admin, WP renders a 32px bar at the top.
   We must offset the fixed header and increase body padding.
   Mobile WP admin bar is 46px on screens < 783px.
   The header z-index (1000) is intentionally BELOW the
   WP admin bar (99999) so the admin bar is always clickable. */
.admin-bar #zinc-header {
    top: 32px;
}

.admin-bar.zinc-horizon {
    padding-top: 120px; /* 88px header + 32px admin bar */
}

@media screen and (max-width: 782px) {
    .admin-bar #zinc-header {
        top: 46px; /* Mobile WP admin bar height */
    }

    .admin-bar.zinc-horizon {
        padding-top: 134px; /* 88px header + 46px mobile admin bar */
    }
}

/* ── Navigation Visibility (Desktop) ──────────────────────────────── */
/* Show desktop navigation on screens >= 1024px */
@media screen and (min-width: 1024px) {
    .zinc-header-nav {
        display: flex !important;
    }
}

/* ── Desktop Navigation Links ───────────────────────────────── */

.zinc-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--zinc-text-secondary, #d4d4d8);
    text-decoration: none;
    transition: color 200ms ease, background 200ms ease;
    border-radius: 8px;
}

.zinc-nav-link:hover {
    color: var(--zinc-text, #fafafa);
    background: rgba(39, 39, 42, 0.4);
}

.zinc-nav-link.is-current {
    color: var(--zinc-accent, #ef4444);
    background: rgba(39, 39, 42, 0.4);
}

/* Active indicator dot (Apple-style) */
.zinc-nav-link.is-current::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--zinc-accent, #dc2626);
    border-radius: 50%;
}

/* ── Mobile Navigation ─────────────────────────────────────── */

.zinc-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zinc-mobile-nav__list li {
    margin: 0;
}

.zinc-mobile-nav__list li a {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--zinc-text-secondary, #d4d4d8);
    text-decoration: none;
    transition: all 200ms ease;
}

.zinc-mobile-nav__list li a:hover {
    color: var(--zinc-text, #fafafa);
    background: rgba(39, 39, 42, 0.4);
}

.zinc-mobile-nav__list li.current-menu-item > a {
    color: var(--zinc-accent, #ef4444);
    background: rgba(39, 39, 42, 0.6);
}

/* Sub-menu in mobile nav */
.zinc-mobile-nav__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}

.zinc-mobile-nav__list .sub-menu li a {
    font-size: 14px;
    padding: 10px 16px;
    color: var(--zinc-text-muted, #a1a1aa);
}

/* Fallback wp_nav_menu styles */
.zinc-nav-menu {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zinc-nav-menu li {
    margin: 0;
}

.zinc-nav-menu li a {
    position: relative;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--zinc-text-secondary, #d4d4d8);
    transition: all 200ms ease;
    text-decoration: none;
    display: block;
}

.zinc-nav-menu li a:hover {
    color: var(--zinc-text, #fafafa);
}

.zinc-nav-menu li.current-menu-item a {
    color: #ef4444;
}

/* ── Mobile Menu Overlay: Click-Through When Closed ──────────── */
/* The mobile menu panel is fixed inset-0 (covers the whole viewport).
   It MUST NOT block clicks when closed. This is a safety net
   in case the Tailwind pointer-events-none class doesn't load. */
[data-zinc-panel="mobile-menu"][data-zinc-state="closed"] {
    pointer-events: none !important;
}

/* When open, re-enable interaction */
[data-zinc-panel="mobile-menu"][data-zinc-state="open"] {
    pointer-events: auto;
}

/* ── Logo Sizing ──────────────────────────────────────────────── */
.site-logo,
.custom-logo,
.custom-logo-link img,
#zinc-header img:not(.zinc-cart-count):not(svg) {
    max-height: 44px;
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ── Container ────────────────────────────────────────────────── */
/* 
 * THE SINGLE source of centering for all page content.
 * Every template wraps its content in .zinc-container.
 * max-width uses --zinc-site-max-width from Customizer.
 */
.zinc-container {
    --zinc-site-max-width: 1680px;
    max-width: var(--zinc-site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Narrower container for text-heavy pages (blog, single post) */
.zinc-container--narrow {
    --zinc-site-max-width: 960px;
}

/* Wide container (shop with sidebar: more room) */
.zinc-container--wide {
    --zinc-site-max-width: 1680px;
}

/* ── Product Grid (Shop / Archives) ──────────────────────────── */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 40px 0;
    width: 100%;
}

/* Product Card — Dark Glassmorphism */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--zinc-surface);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 16px;
    overflow: hidden;
    transition: all 300ms ease;
    padding: 0;
    margin: 0;
    width: 100%;
    float: none;
    display: flex;
    flex-direction: column;
    position: relative;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--zinc-accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(var(--zinc-accent-rgb), 0.3),
                0 0 20px rgba(var(--zinc-accent-rgb), 0.15);
}

/* Product Image */
.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 700ms ease;
    display: block;
    border-radius: 0;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.08);
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--zinc-text-secondary);
    line-height: 1.4;
    padding: 16px 20px 8px;
    margin: 0;
    transition: color 200ms ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--zinc-accent);
}

/* Product Price */
.woocommerce ul.products li.product .price {
    font-size: 24px;
    font-weight: 900;
    color: var(--zinc-text);
    padding: 0 20px 16px;
    margin: 0;
    display: block;
}

.woocommerce ul.products li.product .price del {
    font-size: 14px;
    color: var(--zinc-text-dim);
    font-weight: 400;
    margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--zinc-accent);
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--zinc-accent) 0%, var(--zinc-accent-dark) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 300ms ease;
    text-transform: none;
    box-shadow: 0 4px 12px rgba(220,38,38,0.3);
    text-decoration: none;
}

.woocommerce ul.products li.product .button:hover {
    background: linear-gradient(135deg, var(--zinc-accent-hover) 0%, #7f1d1d 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220,38,38,0.4);
}

/* Sale Badge */
.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--zinc-accent);
    color: #fff;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(220,38,38,0.4);
}

/* Star Rating */
.woocommerce ul.products li.product .star-rating {
    padding: 0 20px;
    margin-bottom: 8px;
    color: #f59e0b;
}

/* ── Product Card Extra Buttons (Quick View, Compare, Wishlist) ── */
.zinc-product-card__extra {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
}

.zinc-qv-btn,
.zinc-compare-btn,
.zinc-wl-btn {
    padding: 8px 12px;
    background: var(--zinc-surface-alt);
    color: var(--zinc-text-muted);
    border: 1px solid var(--zinc-border);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 200ms ease;
    line-height: 1;
}

.zinc-qv-btn {
    flex: 1;
}

.zinc-qv-btn:hover,
.zinc-compare-btn:hover,
.zinc-wl-btn:hover {
    color: var(--zinc-text);
    background: var(--zinc-border);
    border-color: var(--zinc-accent);
}

.zinc-compare-btn[data-active="true"],
.zinc-wl-btn[data-active="true"] {
    background: var(--zinc-accent);
    color: #fff;
    border-color: var(--zinc-accent);
}

/* ── Woo single product enhancements ─────────────────────────── */
.zinc-stock-bar { margin: 12px 0; }
.zinc-stock-bar__head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.zinc-stock-bar__label { font-size: 12px; font-weight: 600; }
.zinc-stock-bar__left { font-size: 12px; color: var(--zinc-text-muted); }
.zinc-stock-bar__progress {
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--zinc-surface-alt);
}
.zinc-stock-bar__progress::-webkit-progress-bar { background: var(--zinc-surface-alt); }
.zinc-stock-bar__progress::-webkit-progress-value { background: var(--zinc-accent); border-radius: 999px; }
.zinc-stock-bar__progress::-moz-progress-bar { background: var(--zinc-accent); border-radius: 999px; }
.zinc-stock-bar--low .zinc-stock-bar__label { color: #ef4444; }
.zinc-stock-bar--low .zinc-stock-bar__progress::-webkit-progress-value { background: #ef4444; }
.zinc-stock-bar--low .zinc-stock-bar__progress::-moz-progress-bar { background: #ef4444; }
.zinc-stock-bar--medium .zinc-stock-bar__label { color: #f59e0b; }
.zinc-stock-bar--medium .zinc-stock-bar__progress::-webkit-progress-value { background: #f59e0b; }
.zinc-stock-bar--medium .zinc-stock-bar__progress::-moz-progress-bar { background: #f59e0b; }
.zinc-stock-bar--high .zinc-stock-bar__label { color: #22c55e; }
.zinc-stock-bar--high .zinc-stock-bar__progress::-webkit-progress-value { background: #22c55e; }
.zinc-stock-bar--high .zinc-stock-bar__progress::-moz-progress-bar { background: #22c55e; }

.zinc-sale-countdown {
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--zinc-surface-alt);
    border: 1px solid var(--zinc-border);
    border-radius: 10px;
}
.zinc-sale-countdown__title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zinc-warning);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.zinc-sale-countdown__grid { display: flex; gap: 12px; justify-content: center; }
.zinc-sale-countdown__item { text-align: center; }
.zinc-sale-countdown__item span:first-child { font-size: 20px; font-weight: 700; color: var(--zinc-text); }
.zinc-sale-countdown__unit { display: block; font-size: 10px; color: var(--zinc-text-dim); }

.zinc-size-guide-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin: 8px 0;
    background: transparent;
    border: 1px solid var(--zinc-border);
    border-radius: 8px;
    color: var(--zinc-text-muted);
    font-size: 13px;
    cursor: pointer;
}

.zinc-modal[data-zinc-panel="size-guide"] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.zinc-modal__dialog.zinc-size-guide-modal {
    position: relative;
    width: 92%;
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 32px;
    border-radius: 16px;
    background: var(--zinc-surface);
    border: 1px solid var(--zinc-border-subtle);
}
.zinc-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--zinc-text-dim);
    font-size: 24px;
    cursor: pointer;
}
.zinc-size-guide-modal__title { margin: 0 0 16px; font-size: 1.25rem; font-weight: 700; color: var(--zinc-text); }
.zinc-size-guide-modal__content { color: var(--zinc-text-muted); font-size: 0.9375rem; line-height: 1.7; }

.zinc-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; position: relative; }
.zinc-swatch-select-wrap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.zinc-swatch--color {
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 200ms;
    padding: 0;
    outline-offset: 2px;
    background: transparent;
}
.zinc-swatch__dot {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}
.zinc-swatch--color.zinc-swatch--active { border-color: var(--zinc-accent); }
.zinc-swatch--size {
    min-width: 40px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--zinc-border);
    background: var(--zinc-surface-alt);
    color: var(--zinc-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 200ms;
}
.zinc-swatch--size.zinc-swatch--active {
    background: var(--zinc-accent);
    border-color: var(--zinc-accent);
    color: #fff;
}

@keyframes zincFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zincSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Quick view / toast / sticky cart UI ─────────────────────── */
.zinc-ui-locked { overflow: hidden; }
.zinc-qv-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    animation: zincFadeIn 200ms ease;
}
.zinc-qv {
    position: relative;
    width: min(92vw, 720px);
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--zinc-surface);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 16px;
    animation: zincSlideUp 300ms ease;
}
.zinc-qv__image {
    border-radius: 16px 0 0 16px;
    overflow: hidden;
    background: var(--zinc-bg);
}
.zinc-qv__image img { width: 100%; height: 100%; object-fit: cover; }
.zinc-qv__info {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.zinc-qv__close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: 0;
    background: none;
    color: var(--zinc-text-dim);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.zinc-qv__title {
    margin: 0;
    color: var(--zinc-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}
.zinc-qv__price { font-size: 1.25rem; font-weight: 700; color: var(--zinc-text); }
.zinc-qv__stock {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.zinc-qv__stock.is-in-stock { color: #4ade80; }
.zinc-qv__stock.is-out-of-stock { color: #f87171; }
.zinc-qv__sku { font-size: 0.8125rem; color: var(--zinc-text-secondary); }
.zinc-qv__description { font-size: 0.9375rem; color: var(--zinc-text-muted); line-height: 1.6; }
.zinc-qv__qty-wrap { margin-top: 8px; }
.zinc-qv__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--zinc-border);
    border-radius: 8px;
    overflow: hidden;
}
.zinc-qv-qty-btn {
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--zinc-text-muted);
    cursor: pointer;
    font-size: 16px;
}
.zinc-qv-qty-val {
    min-width: 32px;
    text-align: center;
    color: var(--zinc-text);
    font-size: 14px;
    font-weight: 600;
}
.zinc-qv__actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
}
.zinc-qv__atc-btn,
.zinc-qv__view-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}
.zinc-qv__atc-btn {
    border: 0;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--zinc-accent), var(--zinc-accent-dark));
}
.zinc-qv__atc-btn.is-success { background: #166534; }
.zinc-qv__view-btn {
    color: var(--zinc-text);
    background: var(--zinc-surface-alt);
    border: 1px solid var(--zinc-border);
}

.zinc-wl-btn.is-busy,
.zinc-product-card__atc.is-busy,
.ajax_add_to_cart.is-busy { opacity: 0.7; }
.zinc-product-card__atc.is-success,
.ajax_add_to_cart.is-success { background: #166534; }

.products.is-loading,
.zinc-product-grid.is-loading { opacity: 0.4; pointer-events: none; }

.zinc-sticky-atc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--zinc-surface);
    border-top: 1px solid var(--zinc-border-subtle);
    transform: translateY(100%);
    transition: transform 300ms ease;
}
.zinc-sticky-atc.is-visible { transform: translateY(0); }
.zinc-sticky-atc__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
.zinc-sticky-atc__img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.zinc-sticky-atc__title {
    color: var(--zinc-text);
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zinc-sticky-atc__price { color: var(--zinc-text-muted); font-size: 0.9375rem; white-space: nowrap; }
.zinc-sticky-atc__actions { display: flex; align-items: center; gap: 12px; }
.zinc-sticky-atc__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--zinc-border);
    border-radius: 8px;
    overflow: hidden;
}
.zinc-sticky-atc__qty-btn {
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--zinc-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.zinc-sticky-atc__qty-val { min-width: 32px; text-align: center; color: var(--zinc-text); font-size: 14px; font-weight: 600; }
.zinc-sticky-atc__btn {
    padding: 10px 24px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--zinc-accent), var(--zinc-accent-dark));
}

.zinc-sale-countdown.is-expired { opacity: 0.5; }

.zinc-modal[data-zinc-panel="size-guide"].is-open { display: flex; }

.zinc-animate-enter { opacity: 0; transform: translateY(16px); }
.zinc-animate-enter.zinc-animate-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 300ms ease;
}
.zinc-load-more-wrap.is-hidden { display: none; }

.zinc-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid var(--zinc-border-subtle);
    background: var(--zinc-surface);
    color: var(--zinc-text);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: zincSlideUp 300ms ease;
}
.zinc-toast.is-leaving {
    opacity: 0;
    transform: translateY(8px);
    transition: all 200ms;
}

@media (max-width: 640px) {
    .zinc-qv { grid-template-columns: 1fr !important; }
    .zinc-qv__image { border-radius: 16px 16px 0 0 !important; max-height: 280px; }
}

/* ── Layout Responsive ────────────────────────────────────────── */

@media (max-width: 1280px) {
    ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    body.zinc-horizon {
        padding-top: 72px;
    }

    .admin-bar.zinc-horizon {
        padding-top: 104px; /* 72px header + 32px admin bar */
    }
}

@media (max-width: 768px) {
    body.zinc-horizon {
        padding-top: 72px;
    }

    #zinc-header img:not(svg) {
        max-height: 36px;
        height: 36px;
    }

    ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    ul.products,
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER — .zinc-footer
   ═══════════════════════════════════════════════════════════════ */

.zinc-footer {
    background: var(--zinc-bg);
    border-top: 1px solid var(--zinc-border-subtle);
    padding: 5rem 1.5rem 2.5rem;
    margin-top: 5rem;
}

.zinc-footer__container {
    max-width: 87.5rem;
    margin: 0 auto;
}

/* ── Newsletter ──────────────────────────────────────────────── */

.zinc-footer__newsletter {
    text-align: center;
    max-width: 37.5rem;
    margin: 0 auto 5rem;
}

.zinc-footer__newsletter h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--zinc-text);
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.zinc-footer__newsletter p {
    font-size: 1.0625rem;
    color: var(--zinc-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.zinc-footer__form {
    display: flex;
    gap: 0.75rem;
    max-width: 31.25rem;
    margin: 0 auto;
}

.zinc-footer__form input[type="email"] {
    flex: 1;
    background: var(--zinc-surface);
    border: 1px solid var(--zinc-border);
    color: var(--zinc-text);
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: all 200ms ease;
}

/* ── Woo Cart / Checkout Layout Contracts ───────────────────── */

body.zinc-cart-modern.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 25rem);
    gap: 1.5rem;
    align-items: start;
}

body.zinc-cart-modern.woocommerce-cart .woocommerce-cart-form {
    margin-bottom: 0;
}

body.zinc-cart-modern.woocommerce-cart .cart-collaterals {
    margin-top: 0;
}

body.zinc-cart-standard.woocommerce-cart .woocommerce {
    display: block;
}

body.zinc-checkout-two-column.woocommerce-checkout .woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 26.25rem);
    gap: 1.5rem;
}

body.zinc-checkout-one-column.woocommerce-checkout .woocommerce-checkout .col2-set {
    display: block;
}

body.zinc-checkout-one-column.woocommerce-checkout .woocommerce-checkout .col2-set .col-1,
body.zinc-checkout-one-column.woocommerce-checkout .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
}

body.zinc-checkout-minimal.woocommerce-checkout #zinc-header,
body.zinc-checkout-minimal.woocommerce-checkout .zinc-footer {
    display: none;
}

@media (max-width: 64rem) {
    body.zinc-cart-modern.woocommerce-cart .woocommerce,
    body.zinc-checkout-two-column.woocommerce-checkout .woocommerce-checkout .col2-set {
        display: block;
    }
}

.zinc-footer__form input[type="email"]:focus {
    outline: none;
    border-color: var(--zinc-accent);
    background: var(--zinc-surface-alt);
}

.zinc-footer__form button {
    background: linear-gradient(135deg, var(--zinc-accent) 0%, var(--zinc-accent-dark) 100%);
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 300ms ease;
    white-space: nowrap;
}

.zinc-footer__form button:hover {
    background: linear-gradient(135deg, var(--zinc-accent-hover) 0%, #7f1d1d 100%);
    transform: translateY(-0.125rem);
}

/* ── Links Grid ──────────────────────────────────────────────── */

.zinc-footer__links {
    display: grid;
    grid-template-columns: repeat(var(--zinc-footer-columns, 4), minmax(0, 1fr));
    gap: 2.5rem;
    padding: 3.75rem 0;
    border-top: 1px solid var(--zinc-border-subtle);
    border-bottom: 1px solid var(--zinc-border-subtle);
}

.zinc-footer__column h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--zinc-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    margin-bottom: 1rem;
}

.zinc-footer__column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zinc-footer__column ul li {
    margin-bottom: 0.75rem;
}

.zinc-footer__column ul li a {
    color: var(--zinc-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 200ms ease;
}

.zinc-footer__column ul li a:hover {
    color: var(--zinc-text);
}

.zinc-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zinc-footer__menu--inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.zinc-footer__menu--inline li {
    margin: 0;
}

/* ── Bottom Bar ──────────────────────────────────────────────── */

.zinc-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 2.5rem;
}

.zinc-footer__legal {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.zinc-footer__legal a {
    color: var(--zinc-text-dim);
    font-size: 0.75rem;
    text-decoration: none;
    transition: color 200ms ease;
}

.zinc-footer__legal a:hover {
    color: var(--zinc-text-muted);
}

.zinc-footer__copyright {
    color: var(--zinc-text-dim);
    font-size: 0.75rem;
}

.zinc-footer__payments {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.zinc-footer__payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--zinc-text-secondary);
    background: var(--zinc-surface);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 0.375rem;
}

/* ── Social Icons ────────────────────────────────────────────── */

.zinc-footer__social {
    display: flex;
    gap: 0.75rem;
}

.zinc-footer__social a {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--zinc-surface);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zinc-text-dim);
    transition: all 200ms ease;
}

.zinc-footer__social a:hover {
    background: var(--zinc-surface-alt);
    border-color: var(--zinc-accent);
    color: var(--zinc-accent);
}

/* ── Footer Responsive ───────────────────────────────────────── */

@media (max-width: 48rem) {
    .zinc-footer {
        padding: 3.75rem 1.5rem 2.5rem;
    }

    .zinc-footer__newsletter h2 {
        font-size: 2rem;
    }

    .zinc-footer__form {
        flex-direction: column;
    }

    .zinc-footer__form button {
        width: 100%;
    }

    .zinc-footer__links {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .zinc-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .zinc-footer__legal {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE & SEARCH LAYOUT — .zinc-archive, .zinc-search-results
   ═══════════════════════════════════════════════════════════════ */

.zinc-archive,
.zinc-search-results {
    padding: 5rem 0 3rem;
    color: var(--zinc-text-muted);
    font-family: 'Inter', system-ui, sans-serif;
}

.zinc-archive__layout {
    display: grid;
    grid-template-columns: 1fr 17.5rem;
    gap: 2.5rem;
    align-items: start;
    /* Centering handled by parent .zinc-container — no max-width/margin here */
}

@media (max-width: 60.5rem) {
    .zinc-archive__layout {
        grid-template-columns: 1fr;
    }
}

.zinc-archive__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--zinc-border-subtle);
}

.zinc-archive__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--zinc-text);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.zinc-archive__description {
    color: var(--zinc-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   POST CARD — Shared Component (.zinc-post-card)
   Used by: archive.php, search.php, author.php
   ═══════════════════════════════════════════════════════════════ */

.zinc-post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 40rem) {
    .zinc-post-grid {
        grid-template-columns: 1fr;
    }
}

.zinc-post-card {
    background: var(--zinc-card);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 300ms, transform 300ms;
}

.zinc-post-card:hover {
    border-color: var(--zinc-border);
    transform: translateY(-0.125rem);
}

.zinc-post-card__image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.zinc-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zinc-post-card__body {
    padding: 1.25rem;
}

.zinc-post-card__meta {
    font-size: 0.8125rem;
    color: var(--zinc-text-dim);
    margin-bottom: 0.5rem;
}

.zinc-post-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.zinc-post-card__title a {
    color: var(--zinc-text);
    text-decoration: none;
}

.zinc-post-card__excerpt {
    color: var(--zinc-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.zinc-post-card__link {
    color: var(--zinc-accent);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.zinc-post-card__type {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgba(220, 38, 38, 0.1);
    color: var(--zinc-accent);
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Empty State ─────────────────────────────────────────────── */

.zinc-empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--zinc-card);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 1rem;
}

.zinc-empty-state h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zinc-text);
    margin: 0 0 0.5rem;
}

.zinc-empty-state p {
    color: var(--zinc-text-muted);
    margin: 0 0 1.5rem;
}

/* ── Pagination ──────────────────────────────────────────────── */

.zinc-pagination {
    padding: 2rem 0;
    text-align: center;
}

/* ── Sidebar Layout System ────────────────────────────────────── */

/* ─── Unified Sidebar Grid ───────────────────────────────────
   ONE grid system for all pages that have a sidebar.
   Usage: <div class="zinc-container zinc-grid-sidebar zinc-grid-sidebar--left">
            <div class="zinc-grid-content">...</div>
            <aside class="zinc-sidebar">...</aside>
          </div>
   ──────────────────────────────────────────────────────────── */

.zinc-grid-sidebar {
    display: grid;
    gap: var(--zinc-sidebar-gap, 40px);
    align-items: start;
}

.zinc-grid-sidebar--left {
    grid-template-columns: var(--zinc-sidebar-w, 280px) 1fr;
}

.zinc-grid-sidebar--right {
    grid-template-columns: 1fr var(--zinc-sidebar-w, 280px);
}

/* Left sidebar comes first visually */
.zinc-grid-sidebar--left > .zinc-sidebar {
    order: -1;
}

/* Content column: prevent overflow in grid */
.zinc-grid-content {
    min-width: 0;
}

/* Children of .zinc-grid-content should NOT add their own centering */
.zinc-grid-content .woocommerce,
.zinc-grid-content .site-main,
.zinc-grid-content main {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Product columns: reduce when sidebar is active */
.zinc-grid-sidebar ul.products,
.zinc-grid-sidebar .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1280px) {
    .zinc-grid-sidebar ul.products,
    .zinc-grid-sidebar .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* When filter sidebar is ALSO active, 2 cols until very wide */
.zinc-grid-sidebar .zinc-shop-filter-layout ul.products,
.zinc-grid-sidebar .zinc-shop-filter-layout .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1400px) {
    .zinc-grid-sidebar .zinc-shop-filter-layout ul.products,
    .zinc-grid-sidebar .zinc-shop-filter-layout .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive: collapse to single column on tablet */
@media (max-width: 1024px) {
    .zinc-grid-sidebar {
        grid-template-columns: 1fr !important;
    }
    .zinc-grid-sidebar--left > .zinc-sidebar {
        order: 0;
    }
}

@media (max-width: 768px) {
    .zinc-grid-sidebar ul.products,
    .zinc-grid-sidebar .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* ─── Legacy class aliases (backward compat) ─────────────── */
.zinc-layout-with-sidebar { display: grid; gap: var(--zinc-sidebar-gap, 40px); align-items: start; }
.zinc-layout-sidebar--left { grid-template-columns: var(--zinc-sidebar-w, 280px) 1fr; }
.zinc-layout-sidebar--right { grid-template-columns: 1fr var(--zinc-sidebar-w, 280px); }
.zinc-layout-sidebar--left .zinc-sidebar { order: -1; }
.zinc-shop-main-col { min-width: 0; }
@media (max-width: 1024px) {
    .zinc-layout-with-sidebar { grid-template-columns: 1fr !important; }
    .zinc-layout-sidebar--left .zinc-sidebar { order: 0; }
}

/* ── Sidebar Base ──────────────────────────────────────────────
   Sidebar look (colors, borders, widget titles) uses design tokens
   and the rules below. Width/gap/position: Customizer → Sidebar. */

.zinc-sidebar {
    background: var(--zinc-surface);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 1rem;
    padding: 1.5rem;
    position: sticky;
    top: calc(var(--zinc-header-h, 88px) + 24px);
}

/* Single product page now uses .zinc-container + .zinc-grid-sidebar.
   No custom layout rules needed — the unified grid handles it. */

/* ── Sidebar Widgets ─────────────────────────────────────────── */

.zinc-sidebar .widget {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--zinc-border-subtle);
}

.zinc-sidebar .widget:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.zinc-sidebar .widget-title,
.zinc-sidebar .widgettitle {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--zinc-text);
    margin: 0 0 12px;
}

.zinc-sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zinc-sidebar .widget ul li {
    padding: 6px 0;
    border-bottom: 1px solid var(--zinc-border-subtle);
}

.zinc-sidebar .widget ul li:last-child {
    border-bottom: none;
}

.zinc-sidebar .widget ul li a {
    color: var(--zinc-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 200ms ease;
}

.zinc-sidebar .widget ul li a:hover {
    color: var(--zinc-accent);
}

.zinc-sidebar-empty-notice__text {
    color: var(--zinc-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH RESULTS — .zinc-search-results
   ═══════════════════════════════════════════════════════════════ */

.zinc-search-results__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--zinc-border-subtle);
}

.zinc-search-results__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--zinc-text);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.zinc-search-results__title span {
    color: var(--zinc-accent);
}

.zinc-search-results__count {
    color: var(--zinc-text-dim);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   AUTHOR — .zinc-author
   ═══════════════════════════════════════════════════════════════ */

.zinc-author__header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--zinc-border-subtle);
}

.zinc-author__img {
    border-radius: 50%;
    border: 2px solid var(--zinc-border-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   RELATED POSTS — .zinc-related (single.php)
   ═══════════════════════════════════════════════════════════════ */

.zinc-related {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--zinc-border-subtle);
}

.zinc-related__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--zinc-text);
    margin-bottom: 1.5rem;
}

.zinc-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 48rem) {
    .zinc-related__grid {
        grid-template-columns: 1fr;
    }
}

.zinc-related__card {
    background: var(--zinc-card);
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: border-color 300ms, transform 300ms;
}

.zinc-related__card:hover {
    border-color: var(--zinc-border);
    transform: translateY(-0.125rem);
}

.zinc-related__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.zinc-related__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zinc-related__body {
    padding: 1rem;
}

.zinc-related__date {
    font-size: 0.75rem;
    color: var(--zinc-text-dim);
    margin-bottom: 0.25rem;
}

.zinc-related__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--zinc-text);
    margin: 0;
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Triggered by .zinc-scheme-light class or system preference
   via .zinc-scheme-auto
   ═══════════════════════════════════════════════════════════════ */

.zinc-scheme-light {
    --zinc-bg: #ffffff;
    --zinc-surface: #f4f4f5;
    --zinc-surface-alt: #e4e4e7;
    --zinc-card: #ffffff;
    --zinc-text: #18181b;
    --zinc-text-secondary: #52525b;
    --zinc-text-muted: #71717a;
    --zinc-text-dim: #a1a1aa;
    --zinc-border: #d4d4d8;
    --zinc-border-subtle: #e4e4e7;
    --zinc-accent: #dc2626;
    --zinc-accent-dark: #b91c1c;
    --zinc-accent-hover: #991b1b;
    
    /* RGB values for light mode */
    --zinc-accent-rgb: 220, 38, 38;
    --zinc-border-rgb: 212, 212, 216;
    --zinc-bg-rgb: 255, 255, 255;
}

/* Light mode product card hover - softer shadow */
.zinc-scheme-light .woocommerce ul.products li.product:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(var(--zinc-accent-rgb), 0.2),
                0 0 20px rgba(var(--zinc-accent-rgb), 0.1);
}

/* Header in light mode */
.zinc-scheme-light #zinc-header {
    background: rgba(var(--zinc-bg-rgb), var(--zinc-header-opacity, 0.92));
    border-bottom-color: var(--zinc-border-subtle);
}

/* Product cards in light mode */
.zinc-scheme-light .woocommerce ul.products li.product {
    background: var(--zinc-card);
    border-color: var(--zinc-border-subtle);
}

.zinc-scheme-light .woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--zinc-text);
}

/* Footer uses surface bg in light mode for visual separation */
.zinc-scheme-light .zinc-footer {
    background: var(--zinc-surface);
}

.zinc-scheme-light .zinc-footer__column h4 {
    color: var(--zinc-text);
}

.zinc-scheme-light .zinc-footer__column ul li a {
    color: var(--zinc-text-muted);
}

.zinc-scheme-light .zinc-footer__column ul li a:hover {
    color: var(--zinc-accent);
}

.zinc-scheme-light .zinc-footer__form input[type="email"] {
    background: var(--zinc-bg);
}

.zinc-scheme-light .zinc-footer__form input[type="email"]:focus {
    background: var(--zinc-bg);
}

/* ── Auto scheme (follows system preference) ─────────────────── */

@media (prefers-color-scheme: light) {
    .zinc-scheme-auto {
        --zinc-bg: #ffffff;
        --zinc-surface: #f4f4f5;
        --zinc-surface-alt: #e4e4e7;
        --zinc-card: #ffffff;
        --zinc-text: #18181b;
        --zinc-text-secondary: #52525b;
        --zinc-text-muted: #71717a;
        --zinc-text-dim: #a1a1aa;
        --zinc-border: #d4d4d8;
        --zinc-border-subtle: #e4e4e7;
        --zinc-accent: #dc2626;
        --zinc-accent-dark: #b91c1c;
        --zinc-accent-hover: #991b1b;
        
        /* RGB values for auto light mode */
        --zinc-accent-rgb: 220, 38, 38;
        --zinc-border-rgb: 212, 212, 216;
        --zinc-bg-rgb: 255, 255, 255;
    }
    
    .zinc-scheme-auto .woocommerce ul.products li.product:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08),
                    0 0 0 1px rgba(var(--zinc-accent-rgb), 0.2),
                    0 0 20px rgba(var(--zinc-accent-rgb), 0.1);
    }

    .zinc-scheme-auto .zinc-footer {
        background: var(--zinc-surface);
    }

    .zinc-scheme-auto .zinc-footer__column h4 {
        color: var(--zinc-text);
    }

    .zinc-scheme-auto .zinc-footer__column ul li a {
        color: var(--zinc-text-muted);
    }

    .zinc-scheme-auto .zinc-footer__column ul li a:hover {
        color: var(--zinc-accent);
    }

    .zinc-scheme-auto .zinc-footer__form input[type="email"],
    .zinc-scheme-auto .zinc-footer__form input[type="email"]:focus {
        background: var(--zinc-bg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOMIZER-DRIVEN LAYOUT STYLES
   Body classes are added by class-zinc-customizer.php → body_class_hook()
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Blog Layout: Grid (default) ────────────────────────────────────── */
.zinc-blog-grid .zinc-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
/* Blog columns override via body class */
.zinc-blog-cols-2 .zinc-post-grid { grid-template-columns: repeat(2, 1fr) !important; }
.zinc-blog-cols-3 .zinc-post-grid { grid-template-columns: repeat(3, 1fr) !important; }
.zinc-blog-cols-4 .zinc-post-grid { grid-template-columns: repeat(4, 1fr) !important; }

/* ─── Blog Layout: List ──────────────────────────────────────────────── */
.zinc-blog-list .zinc-post-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.zinc-blog-list .zinc-post-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.zinc-blog-list .zinc-post-card__image {
    aspect-ratio: 4/3;
}
@media (max-width: 768px) {
    .zinc-blog-list .zinc-post-card {
        grid-template-columns: 1fr;
    }
}

/* ─── Blog Layout: Masonry ───────────────────────────────────────────── */
.zinc-blog-masonry .zinc-post-grid {
    display: columns;
    columns: 3;
    column-gap: 2rem;
}
.zinc-blog-masonry .zinc-post-card {
    break-inside: avoid;
    margin-bottom: 2rem;
}

/* ─── Blog Columns (applied via inline style or body class) ──────────── */
@media (max-width: 1024px) {
    .zinc-blog-grid .zinc-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .zinc-blog-masonry .zinc-post-grid {
        columns: 2;
    }
}
@media (max-width: 640px) {
    .zinc-blog-grid .zinc-post-grid {
        grid-template-columns: 1fr;
    }
    .zinc-blog-masonry .zinc-post-grid {
        columns: 1;
    }
}

/* ─── Single Post Layout ─────────────────────────────────────────────── */
/* full-width: uses .zinc-container (default) */
/* narrow: uses .zinc-container--narrow */
/* sidebar: uses .zinc-grid-sidebar */

/* ─── Product Card Hover Effects (body class) ────────────────────────── */

/* Lift + Glow (default) */
.zinc-hover-lift-glow .woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(var(--zinc-accent-rgb, 220, 38, 38), 0.3),
                0 0 20px rgba(var(--zinc-accent-rgb, 220, 38, 38), 0.15);
}

/* Scale */
.zinc-hover-scale .woocommerce ul.products li.product:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Border Glow */
.zinc-hover-border .woocommerce ul.products li.product:hover {
    transform: none;
    border-color: var(--zinc-accent);
    box-shadow: 0 0 0 2px rgba(var(--zinc-accent-rgb, 220, 38, 38), 0.25),
                0 0 16px rgba(var(--zinc-accent-rgb, 220, 38, 38), 0.1);
}

/* None */
.zinc-hover-none .woocommerce ul.products li.product:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--zinc-border-subtle);
}

/* ── Utility classes ────────────────────────────────── */
.zinc-section-pad  { padding-top: 2rem; padding-bottom: 2rem; }
.zinc-text-center  { text-align: center; }

/* ── Single Post Enhancements ─────────────────────────────── */
.zinc-single-author-box {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 0.75rem;
    background: var(--zinc-surface);
}

.zinc-single-author-box__avatar img {
    border-radius: 9999px;
}

.zinc-single-author-box__name {
    margin: 0 0 0.375rem;
    font-weight: 700;
    color: var(--zinc-text);
}

.zinc-single-author-box__bio {
    margin: 0;
    color: var(--zinc-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.zinc-single-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.zinc-single-post-nav a {
    display: block;
    padding: 0.875rem 1rem;
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 0.625rem;
    color: var(--zinc-text-secondary);
    text-decoration: none;
    background: var(--zinc-surface);
}

.zinc-single-post-nav a:hover {
    color: var(--zinc-text);
    border-color: var(--zinc-accent);
}

/* ── WooCommerce Product Navigation ───────────────────────── */
.zinc-product-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}

.zinc-product-nav__link {
    max-width: 48%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--zinc-border-subtle);
    border-radius: 0.625rem;
    text-decoration: none;
    color: var(--zinc-text-muted);
    background: var(--zinc-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zinc-product-nav__link:hover {
    color: var(--zinc-text);
    border-color: var(--zinc-accent);
}