/* ===================================================================
   MIROCART CORE SYSTEM v1.0
   Built to gasp. Built to feel. Built to edit.
   =================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--surface-base);
    font-size: 16px;
    overflow-x: clip;
}

html.miro-lenis-active {
    scroll-behavior: auto;
}

body {
    font-family: var(--font-family-body);
    color: var(--text-primary);
    background-color: var(--surface-base);
    line-height: 1.6;
    transition: background-color var(--motion-slow), color var(--motion-slow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

:where(body.template-fix, body.template-feeling, body.template-community) {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links: keep click/visited states from turning "pitch dark" via parent theme defaults */
a:visited,
a:active {
    color: inherit;
}

:where(body.template-fix, body.template-feeling, body.template-community) a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------------
   PROSE LINKS (Editorial Underlines)
   Only applies to actual content areas. 
   ------------------------------------------------------------------- */
.miro-prose a:not(.button):not(.btn-gasp):not(.icon-btn),
.entry-content p a:not(.button),
.woocommerce-product-details__short-description a,
.terms-body a,
.privacy-legal a {
    color: var(--link-body);
    text-decoration: none;
    border-bottom: 1px solid var(--link-body-underline);
    transition: color var(--transition-micro), border-color var(--transition-micro);
}

.miro-prose a:not(.button):not(.btn-gasp):not(.icon-btn):hover,
.entry-content p a:not(.button):hover,
.woocommerce-product-details__short-description a:hover,
.terms-body a:hover,
.privacy-legal a:hover {
    color: var(--link-body-hover);
    border-bottom-color: var(--link-body-underline-hover);
}


a,
button {
    -webkit-tap-highlight-color: transparent;
}

*:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
    border-radius: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring);
}

/* Hard stop: prevent any stray horizontal overflow from WP wrappers or off-canvas UI */
#page,
#content,
.site-content {
    overflow-x: clip;
}

/* Native scrollbars: keep visible (accessibility + system affordance) */
/* Minimal scrollbars (opt-in by selector/class only; global scrollbar stays untouched) */
:root {
    --scrollbar-minimal-thumb: var(--ink-18);
    --scrollbar-minimal-thumb-hover: var(--ink-28);
    --scrollbar-minimal-size: 6px;
}

.miro-scrollbar-minimal,
.cart-dropdown-content,
.miro-search-modal,
.miro-search-products-grid,
.mobile-menu-content,
.links-inner,
body.woocommerce .upsells.products ul.products,
body.woocommerce .related.products ul.products,
body.woocommerce .cross-sells ul.products,
body.woocommerce .wc-block-cart__cross-sells ul.wc-block-grid__products,
body.woocommerce .wp-block-woocommerce-product-recommendations ul.wc-block-grid__products,
body.woocommerce .wc-block-mini-cart__items,
body.woocommerce .wc-block-mini-cart__products,
body.woocommerce .widget_shopping_cart_content .woocommerce-mini-cart,
body.woocommerce .wp-block-woocommerce-mini-cart-contents {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-minimal-thumb) transparent;
}

.miro-scrollbar-minimal::-webkit-scrollbar,
.cart-dropdown-content::-webkit-scrollbar,
.miro-search-modal::-webkit-scrollbar,
.miro-search-products-grid::-webkit-scrollbar,
.mobile-menu-content::-webkit-scrollbar,
.links-inner::-webkit-scrollbar,
body.woocommerce .upsells.products ul.products::-webkit-scrollbar,
body.woocommerce .related.products ul.products::-webkit-scrollbar,
body.woocommerce .cross-sells ul.products::-webkit-scrollbar,
body.woocommerce .wc-block-cart__cross-sells ul.wc-block-grid__products::-webkit-scrollbar,
body.woocommerce .wp-block-woocommerce-product-recommendations ul.wc-block-grid__products::-webkit-scrollbar,
body.woocommerce .wc-block-mini-cart__items::-webkit-scrollbar,
body.woocommerce .wc-block-mini-cart__products::-webkit-scrollbar,
body.woocommerce .widget_shopping_cart_content .woocommerce-mini-cart::-webkit-scrollbar,
body.woocommerce .wp-block-woocommerce-mini-cart-contents::-webkit-scrollbar {
    width: var(--scrollbar-minimal-size);
    height: var(--scrollbar-minimal-size);
}

.miro-scrollbar-minimal::-webkit-scrollbar-thumb,
.cart-dropdown-content::-webkit-scrollbar-thumb,
.miro-search-modal::-webkit-scrollbar-thumb,
.miro-search-products-grid::-webkit-scrollbar-thumb,
.mobile-menu-content::-webkit-scrollbar-thumb,
.links-inner::-webkit-scrollbar-thumb,
body.woocommerce .upsells.products ul.products::-webkit-scrollbar-thumb,
body.woocommerce .related.products ul.products::-webkit-scrollbar-thumb,
body.woocommerce .cross-sells ul.products::-webkit-scrollbar-thumb,
body.woocommerce .wc-block-cart__cross-sells ul.wc-block-grid__products::-webkit-scrollbar-thumb,
body.woocommerce .wp-block-woocommerce-product-recommendations ul.wc-block-grid__products::-webkit-scrollbar-thumb,
body.woocommerce .wc-block-mini-cart__items::-webkit-scrollbar-thumb,
body.woocommerce .wc-block-mini-cart__products::-webkit-scrollbar-thumb,
body.woocommerce .widget_shopping_cart_content .woocommerce-mini-cart::-webkit-scrollbar-thumb,
body.woocommerce .wp-block-woocommerce-mini-cart-contents::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-minimal-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.miro-scrollbar-minimal::-webkit-scrollbar-thumb:hover,
.cart-dropdown-content::-webkit-scrollbar-thumb:hover,
.miro-search-modal::-webkit-scrollbar-thumb:hover,
.miro-search-products-grid::-webkit-scrollbar-thumb:hover,
.mobile-menu-content::-webkit-scrollbar-thumb:hover,
.links-inner::-webkit-scrollbar-thumb:hover,
body.woocommerce .upsells.products ul.products::-webkit-scrollbar-thumb:hover,
body.woocommerce .related.products ul.products::-webkit-scrollbar-thumb:hover,
body.woocommerce .cross-sells ul.products::-webkit-scrollbar-thumb:hover,
body.woocommerce .wc-block-cart__cross-sells ul.wc-block-grid__products::-webkit-scrollbar-thumb:hover,
body.woocommerce .wp-block-woocommerce-product-recommendations ul.wc-block-grid__products::-webkit-scrollbar-thumb:hover,
body.woocommerce .wc-block-mini-cart__items::-webkit-scrollbar-thumb:hover,
body.woocommerce .wc-block-mini-cart__products::-webkit-scrollbar-thumb:hover,
body.woocommerce .widget_shopping_cart_content .woocommerce-mini-cart::-webkit-scrollbar-thumb:hover,
body.woocommerce .wp-block-woocommerce-mini-cart-contents::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-minimal-thumb-hover);
}

.miro-scrollbar-minimal::-webkit-scrollbar-track,
.cart-dropdown-content::-webkit-scrollbar-track,
.miro-search-modal::-webkit-scrollbar-track,
.miro-search-products-grid::-webkit-scrollbar-track,
.mobile-menu-content::-webkit-scrollbar-track,
.links-inner::-webkit-scrollbar-track,
body.woocommerce .upsells.products ul.products::-webkit-scrollbar-track,
body.woocommerce .related.products ul.products::-webkit-scrollbar-track,
body.woocommerce .cross-sells ul.products::-webkit-scrollbar-track,
body.woocommerce .wc-block-cart__cross-sells ul.wc-block-grid__products::-webkit-scrollbar-track,
body.woocommerce .wp-block-woocommerce-product-recommendations ul.wc-block-grid__products::-webkit-scrollbar-track,
body.woocommerce .wc-block-mini-cart__items::-webkit-scrollbar-track,
body.woocommerce .wc-block-mini-cart__products::-webkit-scrollbar-track,
body.woocommerce .widget_shopping_cart_content .woocommerce-mini-cart::-webkit-scrollbar-track,
body.woocommerce .wp-block-woocommerce-mini-cart-contents::-webkit-scrollbar-track {
    background: transparent;
}

/* Footer + Fix page alignment guarantees */
section.returns-footer,
section.shipping-footer {
    text-align: center;
}

section.returns-footer .miro-container,
section.shipping-footer .miro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

p.dispatch-subtitle,
.footer-signoff .signoff-quote,
.footer-signoff .copyright {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Back to Top (minimal, brand-aligned) */
.miro-back-to-top {
    position: fixed;
    left: clamp(14px, 2.2vw, 26px);
    bottom: clamp(18px, 3.2vw, 34px);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--accent-soft-gilt);
    background: var(--surface-base);
    color: var(--accent-gold-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition:
        transform var(--transition-micro),
        border-color var(--transition-micro),
        box-shadow var(--transition-micro),
        color var(--transition-micro),
        opacity var(--transition-micro);
    z-index: var(--z-sticky);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}
@media (max-width: 768px) {
    .miro-back-to-top {
        width: 34px;
        height: 34px;
        aspect-ratio: 1 / 1;
        border-radius: 8px; /* Slightly tighter corner for the smaller size */
        flex-shrink: 0;
        left: 20px;
        bottom: 24px;
    }

    .miro-back-to-top svg {
        width: 14px;
        height: 14px;
    }
}
.miro-back-to-top.is-visible {
    opacity: 0.95;
    pointer-events: auto;
    transform: translateY(0);
}

.miro-back-to-top.is-quiet {
    opacity: 0.6;
    transform: translateY(6px);
}
.miro-back-to-top:hover {
    transform: translateY(-1px);
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-lift);
    color: var(--text-primary);
}

.miro-back-to-top:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 3px;
}

.miro-back-to-top svg {
    display: block;
}

.miro-back-to-top svg,
.miro-back-to-top svg * {
    fill: currentColor;
    stroke: currentColor;
}

/* Community templates run on a dark canvas; keep the back-to-top control legible. */
body.template-community .miro-back-to-top {
    background: var(--inverse-04);
    border-color: var(--inverse-12);
    box-shadow: none;
    color: var(--accent-gold);
}

body.template-community .miro-back-to-top:hover {
    border-color: var(--gold-18);
    color: var(--text-inverse);
}

/* Override `.template-community .miro-icon` inverse coloring so the icon inherits button color. */
body.template-community .miro-back-to-top .miro-icon {
    color: inherit;
    --icon-color: currentColor;
}

/* Image Frames (opt-in utilities) */
.miro-frame {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--miro-frame-radius, 0);
    background: transparent;
}

.miro-frame--placeholder {
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}

@supports (color: color-mix(in srgb, black, white)) {
    .miro-frame--placeholder {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface-raised) 78%, var(--surface-base) 22%),
            var(--surface-raised)
        );
    }
}

.miro-frame--contained {
    max-width: var(--miro-frame-contained-max, 560px);
    margin-left: auto;
    margin-right: auto;
}

.miro-frame > img,
.miro-frame > picture,
.miro-frame > picture > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.miro-frame--square {
    aspect-ratio: 1 / 1;
}

.miro-frame--portrait {
    aspect-ratio: 3 / 4;
}

.miro-frame--landscape {
    aspect-ratio: 4 / 3;
}

.miro-frame--horizontal {
    aspect-ratio: 3 / 2;
}

.miro-frame--wide {
    aspect-ratio: 16 / 9;
}

.miro-frame--thumb {
    aspect-ratio: 5 / 4;
}

/* Perf toggles (query params via `assets/js/global-libraries.js`) */
html.miro-perf-no-grain .miro-grain-overlay {
    display: none !important;
}

html.miro-perf-no-grain body.template-community .community-container::before {
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* -----------------------------------------------------------
   LIGHTWEIGHT PAGE LEAVE TRANSITION
   ----------------------------------------------------------- */
html.js-nav-transition::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--surface-base);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease-out;
    z-index: var(--z-loader);
}

html.js-nav-transition body {
    transform: none;
    transition: none;
    will-change: auto;
}

html.js-nav-transition.is-page-leaving body {
    transform: none;
}

html.js-nav-transition.is-page-leaving::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    html.js-nav-transition::before {
        transition: none;
    }
}

/* GLOBAL SELECTION */
::selection {
    background-color: var(--selection-bg);
    color: var(--selection-fg);
}

/* Link Selection: more harmonious, less 'aggressive' */
a::selection,
a *::selection {
    background-color: color-mix(in srgb, var(--selection-bg) 35%, transparent);
    color: inherit;
}

:where([data-surface="void"], .surface-inverse, .surface-inverse-soft, .miro-footer, .site-footer, .bg-dark, .has-background-dark) ::selection {
    background-color: var(--selection-bg-inverse);
    color: var(--selection-fg-inverse);
}

:where([data-surface="void"], .surface-inverse, .surface-inverse-soft, .miro-footer, .site-footer, .bg-dark, .has-background-dark) a::selection,
:where([data-surface="void"], .surface-inverse, .surface-inverse-soft, .miro-footer, .site-footer, .bg-dark, .has-background-dark) a *::selection {
    background-color: color-mix(in srgb, var(--selection-bg-inverse) 35%, transparent);
    color: inherit;
}

/* -------------------------------------------------------------------
   DESIGN TOKENS: THE ROOT OF THE GASP
   ------------------------------------------------------------------- */
/* ==========================================================================
   MIROCART GLOBAL DESIGN SYSTEM (LOCKED)
   ========================================================================== */

:root {
  /* --- 1. SURFACES (Light Mode Foundations) --- */
  --surface-base: #F9F8F6;
  --surface-utility: #F6F3EE;
  --surface-raised: #F1EDE7;
  --surface-elevated: #F4F0EA; /* Bridges cards and overlays */
  --surface-inset: #ECE7DF;
  --surface-warm: #EBE8E4;
  --surface-overlay: #FCFBF8;
  --surface-white: #FFFFFF;
  --surface-inverse: #101010;
  --surface-inverse-soft: #1A1A1A;

  /* --- 2. TEXT SYSTEM --- */
  --text-primary: #333333;       /* Body, headings, key UI */
  --text-secondary: #666666;     /* Secondary labels, metadata */
  --text-muted: #8A8378;         /* Disabled text, quiet utility */
  --text-support: #A69F94;       /* Soft meta, not important info */
  --text-decorative: #B8B8B8;    /* Receding only, no meaning */
  --text-inverse: #FFFFFF;
  --terracotta-weight-strong: 700;
  --terracotta-weight-medium: 600;
  --terracotta-weight-soft: 500;
  --terracotta-weight: var(--terracotta-weight-strong);

  /* --- 3. ACCENT SYSTEM --- */
  --accent-gold: #C5A028;
  --accent-gold-hover: #E5C565;
  --accent-gold-deep: #7A6110;
  --accent-terracotta: #A86A58;
  --accent-terracotta-deep: #8A5243;
  --accent-sage: #7C8C74;
  --accent-sage-deep: #566651;
  --accent-soft-gilt: #D9CBA5;

  /* Selection nuances */
  --selection-bg: var(--accent-soft-gilt);
  --selection-bg-link: var(--accent-gold);
  --selection-bg-inverse: var(--accent-gold-deep);
  --selection-bg-link-inverse: var(--accent-gold);
  --selection-fg: var(--text-primary);
  --selection-fg-inverse: var(--text-inverse);

  /* --- 4. FUNCTIONAL STATES --- */
  --status-success-text: #566651;
  --status-success-fill: #6F7F67;
  --status-success-surface: rgba(124, 140, 116, 0.12);
  
  --status-error-text: #8F4A44;
  --status-error-deep: #6E3732;
  --status-error-surface: rgba(143, 74, 68, 0.12);
  
  --status-warning-text: #8A6A2F;
  --status-warning-deep: #6E5324;
  --status-warning-surface: rgba(138, 106, 47, 0.14);
  
  --status-info-text: #6C6254;
  --status-info-deep: #51493E;
  --status-info-surface: rgba(108, 98, 84, 0.12);
  
  --promo-sale-display: #A86A58;
  --promo-sale-utility: #8A5243;

  /* --- 5. BORDER SYSTEM --- */
  --border-subtle: #DED6CA;      /* Layout grouping only */
  --border-default: #CBBEAB;     /* Inputs, cards */
  --border-decorative: #D9CBA5;
  --border-interactive: #9A8A74; /* Hover + focus */
  --border-strong: #907F63;      /* Selected / active */

  /* --- 6. LINK SYSTEM --- */
  --link-default: #8A5243;
  --link-hover: #333333;
  --link-active: #101010;
  --link-utility: #6C6254;

  /* --- 6a. SEMANTIC LINK USAGE (NO NEW COLORS) --- */
  --link-body: var(--text-primary);
  --link-body-hover: var(--link-active);
  --link-body-underline: var(--border-default);
  --link-body-underline-hover: var(--border-strong);
  --link-nav: var(--text-primary);
  --link-nav-hover: var(--link-active);
  --link-nav-active: var(--accent-gold);
  --link-footer: var(--text-muted);
  --link-footer-hover: var(--text-inverse);

  /* --- 7. FOCUS & SELECTED SYSTEM --- */
  --focus-outline: #7A6110;
  --focus-ring: var(--gold-18);
  --focus-glow: 0 0 24px rgba(212, 175, 55, 0.15); /* Diffused glow */
  
  --selected-border: #907F63;
  --selected-accent: #C5A028;
  --selected-surface: var(--gold-10);

  /* --- 8. ALPHA & TRANSLUCENCY SYSTEM --- */
  /* Base scale */
  --alpha-04: 0.04; --alpha-08: 0.08; --alpha-12: 0.12; 
  --alpha-18: 0.18; --alpha-28: 0.28; --alpha-40: 0.40; 
  --alpha-60: 0.60; --alpha-72: 0.72; --alpha-84: 0.84;
  
  /* Color-Bound Alpha Helpers (Strictly Enforced) */
  --ink-00: rgba(16, 16, 16, 0);
  --ink-03: rgba(16, 16, 16, 0.03);
  --ink-035: rgba(16, 16, 16, 0.035);
  --ink-04: rgba(16, 16, 16, 0.04);
  --ink-05: rgba(16, 16, 16, 0.05);
  --ink-06: rgba(16, 16, 16, 0.06);
  --ink-07: rgba(16, 16, 16, 0.07);
  --ink-08: rgba(16, 16, 16, 0.08);
  --ink-10: rgba(16, 16, 16, 0.10);
  --ink-12: rgba(16, 16, 16, 0.12);
  --ink-14: rgba(16, 16, 16, 0.14);
  --ink-18: rgba(16, 16, 16, 0.18);
  --ink-22: rgba(16, 16, 16, 0.22);
  --ink-32: rgba(16, 16, 16, 0.32);
  --ink-35: rgba(16, 16, 16, 0.35);
  --ink-36: rgba(16, 16, 16, 0.36);
  --ink-42: rgba(16, 16, 16, 0.42);
  --ink-46: rgba(16, 16, 16, 0.46);
  --ink-50: rgba(16, 16, 16, 0.50);
  --ink-72: rgba(16, 16, 16, 0.72);
  --ink-78: rgba(16, 16, 16, 0.78);
  --ink-84: rgba(16, 16, 16, 0.84);

  /* --- 9. SEMANTIC ACCENTS & SHADOWS (NO NEW COLORS) --- */
  --accent-cta: var(--accent-gold);
  --accent-sale: var(--accent-terracotta);
  --accent-divider: var(--accent-soft-gilt);
  --shadow-dropdown: 0 10px 24px var(--ink-06);

  /* Utility page tokens (cart/checkout/account/wishlist) */
  --utility-surface: var(--surface-utility);
  --utility-panel: var(--surface-base);
  --utility-border: var(--border-default);
  --utility-text: var(--text-primary);
  --utility-muted: var(--text-secondary);
  --utility-link: var(--link-body);
  --utility-link-hover: var(--link-body-hover);

  /* Cart dropdown sizing tokens */
  --cart-dropdown-width: 320px;
  --cart-dropdown-padding: var(--space-md);
  --cart-dropdown-image-size: 44px;
  --cart-dropdown-item-gap: var(--space-sm);
  --gold-10: rgba(197, 160, 40, 0.10);
  --gold-18: rgba(197, 160, 40, 0.18);
  --terra-10: rgba(168, 106, 88, 0.10);
  --sage-10: rgba(124, 140, 116, 0.10);
  --inverse-00: rgba(255, 255, 255, 0);
  --inverse-015: rgba(255, 255, 255, 0.015);
  --inverse-02: rgba(255, 255, 255, 0.02);
  --inverse-03: rgba(255, 255, 255, 0.03);
  --inverse-04: rgba(255, 255, 255, 0.04);
  --inverse-05: rgba(255, 255, 255, 0.05);
  --inverse-06: rgba(255, 255, 255, 0.06);
  --inverse-08: rgba(255, 255, 255, 0.08);
  --inverse-10: rgba(255, 255, 255, 0.10);
  --inverse-12: rgba(255, 255, 255, 0.12);
  --inverse-42: rgba(255, 255, 255, 0.42);
  --inverse-50: rgba(255, 255, 255, 0.50);
  --inverse-60: rgba(255, 255, 255, 0.60);
  --inverse-65: rgba(255, 255, 255, 0.65);
  --inverse-68: rgba(255, 255, 255, 0.68);
  --inverse-72: rgba(255, 255, 255, 0.72);
  --inverse-82: rgba(255, 255, 255, 0.82);
  --inverse-85: rgba(255, 255, 255, 0.85);
  --inverse-88: rgba(255, 255, 255, 0.88);
  --inverse-92: rgba(255, 255, 255, 0.92);
  --inverse-94: rgba(255, 255, 255, 0.94);
  --inverse-96: rgba(255, 255, 255, 0.96);
  --overlay-72: rgba(16, 16, 16, 0.72);
  --overlay-84: rgba(16, 16, 16, 0.84);

  /* --- 9. STRUCTURAL GRID & SPACING (4pt/8pt Base) --- */
  --space-px: 1px;
  --space-1x: 0.25rem;  /* 4px */
  --space-2x: 0.5rem;   /* 8px */
  --space-3x: 0.75rem;  /* 12px */
  --space-4x: 1rem;     /* 16px */
  --space-6x: 1.5rem;   /* 24px */
  --space-8x: 2rem;     /* 32px */
  --space-12x: 3rem;    /* 48px */
  --space-16x: 4rem;    /* 64px */
  --space-32x: 8rem;    /* 128px (Hero isolation) */

  --container-max: 1440px;
  --container-editorial: 680px;
  --container-sidebar: 240px;
  --container-drawer: 450px;
  --container-modal: 480px;

  /* --- 10. ELEVATION & Z-INDEX GOVERNANCE --- */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-loader: 500;

  --shadow-flat: none;
  --shadow-soft: 0 2px 8px var(--ink-04);   /* Cards */
  --shadow-lift: 0 16px 48px var(--ink-12); /* Modals/Drawers */

  /* --- 11. MOTION PHYSICS --- */
  --ease-miro: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-whisper: ease-in-out;
  
  --motion-instant: 100ms;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 350ms;
  --motion-settle: 450ms;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* --- DARK THEME FOUNDATION --- */
[data-theme="dark"] {
  --surface-base: #121110;
  --surface-raised: #1A1816;
  --surface-elevated: #201D1A;
  --surface-overlay: var(--overlay-84);
  
  --text-primary: #EAE3D8;
  --text-secondary: #CFC6B8;
  --text-muted: #A89D8C;
  --text-dim: #8E8476;
  --text-inverse: #121110; /* Badges, gold buttons */
  
  --border-subtle: #3A342C;
  --border-default: #50483D;
  --border-strong: #6A5F50;

  --accent-gold: #C5A028;
  --accent-gold-soft: #D4B24A;
  --accent-terracotta-dark: #C28976;
  --accent-sage-dark: #93A48A;

  --selection-bg: var(--accent-gold);
  --selection-bg-link: var(--accent-gold-hover);
  --selection-bg-inverse: var(--accent-gold-soft);
  --selection-bg-link-inverse: var(--accent-soft-gilt);
  --selection-fg: var(--text-primary);
  --selection-fg-inverse: var(--text-inverse);
}

@supports (color: color-mix(in srgb, black, white)) {
  :root {
    --selection-bg: color-mix(in srgb, var(--accent-soft-gilt) 80%, var(--surface-base) 20%);
    --selection-bg-link: color-mix(in srgb, var(--accent-gold) 65%, var(--accent-terracotta) 35%);
    --selection-bg-inverse: color-mix(in srgb, var(--accent-gold) 60%, var(--surface-inverse) 40%);
    --selection-bg-link-inverse: color-mix(in srgb, var(--accent-gold-hover) 70%, var(--surface-inverse) 30%);
  }

  [data-theme="dark"] {
    --selection-bg: color-mix(in srgb, var(--accent-gold) 70%, var(--surface-base) 30%);
    --selection-bg-link: color-mix(in srgb, var(--accent-gold-hover) 65%, var(--accent-terracotta-dark) 35%);
    --selection-bg-inverse: color-mix(in srgb, var(--accent-gold-soft) 65%, var(--surface-inverse) 35%);
    --selection-bg-link-inverse: color-mix(in srgb, var(--accent-soft-gilt) 70%, var(--surface-inverse) 30%);
  }
}

/* -------------------------------------------------------------------
   TYPOGRAPHY, ICONS & GRID UTILITIES
   ------------------------------------------------------------------- */
:root {
  /* Typography */
  --font-bricolage: 'Bricolage Grotesque', sans-serif;
  --font-host-grotesk: 'Host Grotesk', 'Poppins', sans-serif;
  --font-poppins: 'Poppins', sans-serif;
  --font-family-body: var(--font-host-grotesk);
  --font-family-ui: var(--font-family-body);
  --font-family-fallback: var(--font-poppins);
  --font-eyesome: 'Mrs Saint Delafield', cursive;

  --font-h1: clamp(2.25rem, 5vw + 1rem, 4rem);
  --font-h2: clamp(1.75rem, 3.5vw + 1rem, 2.5rem);
  --font-h3: clamp(1.5rem, 2.5vw + 1rem, 2rem);
  --font-h4: clamp(1.25rem, 1.5vw + 1rem, 1.6rem);
  --font-h5: clamp(1.1rem, 1vw + 0.8rem, 1.35rem);
  --font-h6: clamp(1rem, 0.5vw + 0.85rem, 1.15rem);
  --font-body: clamp(0.95rem, 0.4vw + 0.85rem, 1.05rem);
  --font-small: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);

  /* Icon system */
  --icon-size-base: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --icon-size-small: clamp(1rem, 0.8rem + 0.5vw, 1.125rem);
  --icon-size-large: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --icon-color: currentColor;
  --icon-stroke-width: 1.5px;

  /* Breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Spacing aliases - make them responsive */
  --space-xs: clamp(0.25rem, 0.5vw, 0.35rem);
  --space-sm: clamp(0.5rem, 1vw, 0.75rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2.5rem, 5vw, 4rem);
  --space-xxl: clamp(4rem, 8vw, 6rem);
}

/* -------------------------------------------------------------------
   TYPOGRAPHY HIERARCHY: THE VOICE
   ------------------------------------------------------------------- */
h1,
h2,
h3 {
    font-family: var(--font-bricolage);
    margin-top: 0;
    margin-bottom: 0.65em; /* Proportional spacing */
    line-height: 1.1;
    font-weight: 800;
    color: var(--text-primary);
}

h1 {
    font-size: var(--font-h1);
    letter-spacing: -0.03em;
}

h2 {
    font-size: var(--font-h2);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--font-h3);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h4,
h5,
h6 {
    font-family: var(--font-family-body);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

h4 { font-size: var(--font-h4); }
h5 { font-size: var(--font-h5); }
h6 { font-size: var(--font-h6); }

p {
    margin-top: 0;
    margin-bottom: 1.25em;
    line-height: 1.65;
    font-size: var(--font-body);
    max-width: 72ch; /* Optimal reading width */
}

.text-gold {
    color: var(--accent-gold);
}

.text-terracotta {
    color: var(--accent-terracotta);
    font-weight: var(--terracotta-weight);
}

.text-terracotta-medium {
    color: var(--accent-terracotta);
    font-weight: var(--terracotta-weight-medium);
}

.text-terracotta-soft {
    color: var(--accent-terracotta);
    font-weight: var(--terracotta-weight-soft);
}

:where(.site-header, .widget-area, .sidebar, .miro-sidebar-container) {
    --terracotta-weight: var(--terracotta-weight-medium);
}

.text-sage {
    color: var(--accent-sage);
}

.font-bricolage {
    font-family: var(--font-bricolage);
}

.font-poppins {
    font-family: var(--font-poppins);
}

.font-body {
    font-family: var(--font-family-body);
}

.font-eyesome {
    font-family: var(--font-eyesome);
    font-weight: 400;
}

/* -------------------------------------------------------------------
   UTILITY CLASSES: THE FAST EDIT
   ------------------------------------------------------------------- */
/* Spacing – margins */
.mg-0 {
    margin: 0;
}

.mg-xs {
    margin: var(--space-xs);
}

.mg-sm {
    margin: var(--space-sm);
}

.mg-md {
    margin: var(--space-md);
}

.mg-lg {
    margin: var(--space-lg);
}

.mg-xl {
    margin: var(--space-xl);
}

.mt-xs {
    margin-top: var(--space-xs);
}

.mt-sm {
    margin-top: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.mb-xs {
    margin-bottom: var(--space-xs);
}

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

/* Spacing – padding */
.pd-0 {
    padding: 0;
}

.pd-xs {
    padding: var(--space-xs);
}

.pd-sm {
    padding: var(--space-sm);
}

.pd-md {
    padding: var(--space-md);
}

.pd-lg {
    padding: var(--space-lg);
}

.pd-xl {
    padding: var(--space-xl);
}

/* Layout */
.flex {
    display: flex;
}

.grid {
    display: grid;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.hidden {
    display: none;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

/* -------------------------------------------------------------------
   BUTTONS: THE DECISIVE TOUCH
   ------------------------------------------------------------------- */
.btn-gasp,
.btn-edit,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-bricolage);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: 0;
    transition: var(--transition-smooth);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    box-sizing: border-box;
    max-width: 100%;
}

@media (max-width: 480px) {
    .btn-gasp,
    .btn-edit,
    .btn-ghost {
        width: 100%;
        padding-inline: var(--space-md);
    }
}

.btn-gasp {
    background-color: var(--accent-gold);
    color: var(--text-primary);
}

.btn-gasp:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
}

.btn-edit {
    background-color: transparent;
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.btn-edit:hover {
    background-color: var(--surface-warm);
    border-color: var(--text-primary);
}

.btn-ghost {
    background-color: transparent;
    border-color: var(--accent-soft-gilt);
    color: var(--text-primary);
}

.btn-ghost:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* -------------------------------------------------------------------
   LAYOUT CONTAINERS: THE ROOM
   ------------------------------------------------------------------- */
.miro-container {
    width: 100%;
    max-width: min(1400px, 90vw);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.miro-section {
    padding: var(--space-xl) 0;
}

.miro-section--cashmere {
    background-color: var(--surface-warm);
}

.miro-section--void {
    background-color: var(--surface-inverse);
    color: var(--text-inverse);
}

.miro-section--void h1,
.miro-section--void h2,
.miro-section--void h3,
.miro-section--void h4,
.miro-section--void p {
    color: var(--text-inverse);
}

/* Search results header: keep readable on light pages */
.search .miro-search-header {
    background-color: transparent;
    color: var(--text-primary);
}

.search .miro-search-header h1,
.search .miro-search-header p {
    color: var(--text-primary);
}

.search .miro-search-header .search-result-count {
    color: var(--text-secondary);
}

/* -------------------------------------------------------------------
   CARDS: THE OBJECTS
   ------------------------------------------------------------------- */
.card-miracle {
    background-color: var(--surface-base);
    border: 1px solid var(--border-default);
    padding: var(--space-lg);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.card-miracle:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: var(--accent-gold);
}

.card-miracle--cashmere {
    background-color: var(--surface-warm);
}

.card-miracle--void {
    background-color: var(--surface-inverse);
    color: var(--text-inverse);
    border-color: var(--accent-soft-gilt);
}

/* -------------------------------------------------------------------
   FORMS: THE CONVERSATION
   ------------------------------------------------------------------- */
.input-miro,
.select-miro,
.textarea-miro {
    width: 100%;
    font-family: var(--font-family-body);
    font-size: var(--font-body);
    color: var(--text-primary);
    background-color: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: 0;
    padding: var(--space-sm) var(--space-md);
    transition: var(--transition-micro);
    -webkit-appearance: none;
    appearance: none;
}

.input-miro:focus,
.select-miro:focus,
.textarea-miro:focus {
    outline: none;
    border-color: var(--border-interactive);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.input-miro:focus-visible,
.select-miro:focus-visible,
.textarea-miro:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}

/* Search cancel "X" (WebKit): darker + brand aligned */
.miro-search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 0.95em;
    width: 0.95em;
    cursor: pointer;
    border-radius: 999px;
    background-color: var(--ink-12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
}

.select-miro {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A86A58' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 1em;
}

/* -------------------------------------------------------------------
   BADGES: THE VETO & THE GASP
   ------------------------------------------------------------------- */
.badge-veto,
.badge-gasp,
.badge-new {
    display: inline-block;
    font-family: var(--font-family-body);
    font-weight: 700;
    font-size: var(--font-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 0;
    color: var(--text-inverse);
}

.badge-veto {
    background-color: var(--accent-gold);
    color: var(--text-primary);
}

.badge-gasp {
    background-color: var(--accent-terracotta);
}

.badge-new {
    background-color: var(--accent-sage);
    color: var(--text-primary);
}

/* -------------------------------------------------------------------
   NAVIGATION: THE PATH
   ------------------------------------------------------------------- */
.nav-miro {
    background-color: var(--surface-inverse);
    color: var(--text-inverse);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-default);
}

.nav-link {
    font-family: var(--font-family-body);
    font-weight: 500;
    color: var(--text-inverse);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    transition: var(--transition-micro);
}

.nav-link:hover {
    color: var(--link-footer-hover);
}

/* -------------------------------------------------------------------
   RESPONSIVE: THE BREATH AT EVERY SIZE
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .miro-container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .miro-section {
        padding: var(--space-lg) 0;
    }

    .grid-auto {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: clamp(2rem, 1rem + 3vw, 3rem);
    }

    h2 {
        font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
    }

    .btn-gasp,
    .btn-edit,
    .btn-ghost {
        padding: var(--space-sm) var(--space-md);
        width: 100%;
        text-align: center;
    }
}

/* -------------------------------------------------------------------
   PRINT: THE PERMANENT RECORD
   ------------------------------------------------------------------- */
@media print {
    body {
        background-color: var(--text-inverse) !important;
        color: var(--surface-inverse) !important;
        font-family: Georgia, serif;
    }

    .btn-gasp,
    .btn-edit,
    .nav-miro,
    .badge-veto {
        display: none !important;
    }

    a {
        color: var(--surface-inverse) !important;
        text-decoration: underline;
    }
}

/* -------------------------------------------------------------------
   FORM OVERRIDES (GLOBAL)
   ------------------------------------------------------------------- */

/* Select Inputs - Killing the Blue */
select,
.woocommerce form .form-row select,
.woocommerce-ordering select {
    background-color: var(--surface-base);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: 0;
    padding: 10px 15px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
}

select:focus,
.woocommerce form .form-row select:focus,
.woocommerce-ordering select:focus {
    border-color: var(--border-interactive);
    box-shadow: 0 0 0 2px var(--focus-ring);
    outline: none;
}

/* Focus Visibility: remove noisy browser defaults without hiding keyboard focus */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 2px;
}

:where(body.template-fix, body.template-feeling, body.template-community) :focus-visible {
    outline: 2px solid var(--focus-outline);
    outline-offset: 4px;
    border-radius: 6px;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Specific Select Option Polish */
select option {
    background-color: var(--surface-base);
    color: var(--text-primary);
    padding: 10px;
}

/* --- SEARCH RESULTS PAGE --- */
.search-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.miro-no-results-content {
    max-width: 600px;
    margin: 0 auto;
}

/* Empty-state search forms (search no-results + 404 fallback form) */
.no-results .miro-search-form {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
}

.error404 .inside-article .miro-search-form {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: 620px;
    margin: var(--space-lg) auto 0;
}

.no-results .miro-search-field {
    flex: 1 1 auto;
    background-color: var(--surface-utility);
    border: 1px solid var(--accent-soft-gilt);
    border-radius: 0;
    padding: 14px 18px;
    font-family: var(--font-family-body);
    color: var(--text-primary);
    transition: border-color var(--transition-micro), box-shadow var(--transition-micro);
}

.error404 .inside-article .miro-search-field {
    flex: 1 1 auto;
    background-color: var(--surface-utility);
    border: 1px solid var(--accent-soft-gilt);
    border-radius: 0;
    min-height: 48px;
    padding: 14px 18px;
    color: var(--text-primary);
}

.no-results .miro-search-field:focus {
    outline: none;
    border-color: var(--border-interactive);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.error404 .inside-article .miro-search-field:focus {
    outline: none;
    border-color: var(--border-interactive);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.no-results .miro-search-field::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
    font-style: italic;
}

.error404 .inside-article .miro-search-field::placeholder {
    color: var(--text-secondary);
    opacity: 0.75;
}

.no-results .miro-search-submit {
    background: var(--text-primary);
    color: var(--text-inverse);
    border: none;
    padding: 14px 22px;
    border-radius: 0;
    font-family: var(--font-bricolage);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition-micro), background-color var(--transition-micro);
}

.error404 .inside-article .miro-search-submit {
    background: var(--text-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 0;
    min-height: 48px;
    padding: 14px 24px;
    font-family: var(--font-bricolage);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition-micro), background-color var(--transition-micro);
}

.no-results .miro-search-submit:hover {
    background: var(--accent-gold);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.error404 .inside-article .miro-search-submit:hover {
    background: var(--accent-gold);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* --- 404 PAGE POLISH --- */
.error404 .inside-article {
    padding-top: var(--space-lg);
}

.error404 .entry-title {
    text-align: center;
}

.error404 .miro-404-shell {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(22px, 2.2vw, 34px);
    border: 1px solid var(--accent-soft-gilt);
    background: var(--surface-utility);
    text-align: center;
}

.error404 .miro-404-kicker {
    font-size: clamp(1rem, 1vw + 0.8rem, 1.2rem);
    color: var(--text-muted);
    margin: 0;
}

.error404 .miro-404-actions {
    margin-top: var(--space-lg);
}

.error404 .miro-404-home-link.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 24px;
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media (max-width: 768px) {
    .no-results .miro-search-form {
        flex-direction: column;
    }

    .no-results .miro-search-submit {
        width: 100%;
    }

    .error404 .inside-article .miro-search-form {
        flex-direction: column;
    }

    .error404 .inside-article .miro-search-submit {
        width: 100%;
    }
}

.search-card {
    background: var(--surface-utility);
    border: 1px solid var(--surface-warm);
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.search-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
    border-color: var(--accent-gold);
}

.search-card-image {
    margin: -24px -24px 20px;
    background: var(--surface-warm);
    aspect-ratio: 3/2;
    overflow: hidden;
}

.search-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.search-card .entry-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
    line-height: 1.2;
}

.search-card .entry-title a {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.search-card .entry-title a:hover {
    color: var(--accent-gold) !important;
}

.search-card-price {
    margin: 0 0 12px;
    font-family: var(--font-bricolage);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-terracotta);
}

.search-card .entry-summary {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    flex-grow: 1;
}

.search-card .entry-footer {
    padding-top: 15px;
    border-top: 1px solid var(--surface-warm);
}

.badge-wrapper {
    margin-bottom: 15px;
}

.badge-gasp,
.badge-veto {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-gasp {
    background: var(--accent-gold);
    color: var(--text-primary);
}

.badge-veto {
    background: var(--accent-soft-gilt);
    color: var(--text-primary);
}

@media (max-width: 1024px) {
    .search-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .search-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------
   PART III: THE SHOP (MERCANTILE MOTION)
   Reliable but expensive.
   ------------------------------------------------------------------- */

/* 1. The "Decisive Click" (Buttons) */
.btn-gasp,
.btn-primary,
.button {
    position: relative;
    overflow: hidden;
    transition: color var(--duration-fast) var(--ease-snap), transform var(--duration-fast) var(--ease-snap) !important;
    background-color: var(--accent-gold);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-sm);
    z-index: 1;
}

/* The Fill Effect */
.btn-gasp::before,
.btn-primary::before,
.button::before {
    content: none;
    display: none;
}

.btn-gasp:hover,
.btn-primary:hover,
.button:hover {
    color: var(--text-primary) !important;
}

/* 2. The Product Card (Gasp) */
.product-card-image,
.woocommerce ul.products li.product a img {
    overflow: hidden;
    transition: transform var(--duration-norm) var(--ease-miro) !important;
}

.product-card:hover .product-card-image img,
.woocommerce ul.products li.product:hover a img {
    transform: scale(1.01);
    /* The Gasp */
}


/* -------------------------------------------------------------------
   GLOBAL ICON ARCHITECTURE
   ------------------------------------------------------------------- */
.miro-icon {
    /* Responsive sizing clamped to viewport */
    width: var(--icon-size-base);
    height: var(--icon-size-base);

    /* Global color inheritance */
    color: var(--icon-color);
    fill: none; /* Default for outlines */
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;

    /* Layout */
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;

    /* Motion */
    transition: color 0.3s var(--ease-miro), transform 0.3s var(--ease-miro);
}

/* Modifiers for Size */
.miro-icon--sm {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
}

.miro-icon--lg {
    width: var(--icon-size-large);
    height: var(--icon-size-large);
}

/* Modifier for Filled SVGs */
.miro-icon.filled,
.miro-icon--heart-filled,
.miro-icon--star-filled {
    fill: currentColor;
    stroke: none;
}

/* -------------------------------------------------------------------
   CONTEXTUAL ICON COLORS (Light/Dark Mode)
   ------------------------------------------------------------------- */

/* Dark themes (Footer, specific templates) force icons to light colors */
.miro-footer .miro-icon,
.template-community .community-container .miro-icon,
.bg-dark .miro-icon,
.has-background-dark .miro-icon {
    --icon-color: var(--text-inverse);
    color: var(--icon-color);
}

/* Allow easy single-icon overrides via utility classes */
.text-gold .miro-icon,
.icon-gold {
    --icon-color: var(--accent-gold);
    color: var(--icon-color);
}

.text-charcoal .miro-icon,
.icon-charcoal {
    --icon-color: var(--text-primary);
    color: var(--icon-color);
}

.text-terracotta .miro-icon,
.icon-terracotta {
    --icon-color: var(--accent-terracotta);
    color: var(--icon-color);
}