/*
Theme Name:       Nørdgrej tema
Theme URI:        https://nørdgrej.dk/
Description:      WooCommerce Child Theme based on Storefront for Nørdgrej.
Author:           Antigravity
Author URI:       https://nørdgrej.dk/
Template:         storefront
Version:          1.1.4
Text Domain:      nordgrej
*/

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    /* Hearth & Lore Palette */
    --color-surface-tint: #e1c299;
    --color-surface-container: #1d1916;
    --color-tertiary-container: #f4e3ce;
    --color-on-error-container: #ff9b82;
    --color-on-secondary-fixed-variant: #70573d;
    --color-surface: #100e0c;
    --color-on-primary: #513d1e;
    --color-surface-container-highest: #2b2520;
    --color-on-tertiary-container: #5d5242;
    --color-error-dim: #ba573f;
    --color-on-tertiary: #665a4a;
    --color-secondary-fixed: #ffdcbc;
    --color-on-secondary-fixed: #513b24;
    --color-primary-fixed-dim: #efd0a6;
    --color-primary-container: #584324;
    --color-primary-dim: #d2b48c;
    --color-error-container: #7e2b17;
    --color-on-surface-variant: #b4a9a2;
    --color-surface-container-low: #161310;
    --color-outline: #7d746e;
    --color-primary: #e1c299;
    --color-surface-bright: #322b25;
    --color-tertiary-dim: #e6d5c1;
    --color-on-surface: #efe3dc;
    --color-secondary-dim: #b7987b;
    --color-tertiary-fixed: #f4e3ce;
    --color-on-tertiary-fixed: #4a3f31;
    --color-surface-variant: #2b2520;
    --color-on-primary-container: #ebcba2;
    --color-tertiary: #fff1e4;
    --color-on-primary-fixed-variant: #6f5836;
    --color-inverse-on-surface: #585452;
    --color-on-secondary-container: #dab99a;
    --color-secondary: #b7987b;
    --color-on-error: #450900;
    --color-primary-fixed: #feddb3;
    --color-on-background: #efe3dc;
    --color-error: #ed7f64;
    --color-background: #100e0c;
    --color-outline-variant: #4e4641;
    --color-surface-container-high: #241f1b;
    --color-surface-container-lowest: #000000;
    --color-on-secondary: #2e1c08;
    --color-surface-dim: #100e0c;
    --color-on-primary-fixed: #503c1d;
    --color-secondary-fixed-dim: #f0ceae;
    --color-on-tertiary-fixed-variant: #685b4c;
    --color-inverse-primary: #735b3a;
    --color-inverse-surface: #fff8f5;
    --color-tertiary-fixed-dim: #e6d5c1;
    --color-secondary-container: #4d3720;
    
    /* Typography */
    --font-manrope: 'Manrope', sans-serif;
}

/* --- Base Body Overrides --- */
body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: var(--font-manrope);
    -webkit-font-smoothing: antialiased;
}

/* Storefront base overrides */
.site-main {
    margin-bottom: 0;
}

#masthead, #colophon {
    background-color: var(--color-surface) !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

#masthead .col-full, #colophon .col-full {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Compensate for fixed header */
#primary {
    padding-top: 100px;
}

/* Force full width on frontpage template */
body.home #primary,
.page-template-template-frontpage #primary,
body.home .site-content > .col-full,
.page-template-template-frontpage .site-content > .col-full,
body.home .content-area,
body.home .site-main,
body.home .right-sidebar .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.home #primary,
.page-template-template-frontpage #primary {
    padding-top: 100px !important;
}

/* Annihilate Gutenberg's internal constrained width limiters
   ONLY for our full-width shortcode wrappers — not regular content blocks */
body.home .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: 100% !important;
}

.nordic-hero-wrap > *,
.nordic-bento-section > *,
.ambient-spacer-wrap > * {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-on-surface);
    font-family: var(--font-manrope);
    letter-spacing: -0.02em;
}

p {
    color: var(--color-on-surface-variant);
}

a {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-dim);
}

/* Kill browser purple focus ring — use theme-appropriate gold glow instead */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(225, 194, 153, 0.4) !important;
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none !important;
}

/* Footer logo — no underline by default, only on hover */
.nordic-footer .nordic-logo {
    text-decoration: none !important;
}

.nordic-footer .nordic-logo:hover {
    text-decoration: underline !important;
}

/* --- Gutenberg Block Overrides --- */
.wp-block-group.nordic-hero-wrap,
.wp-block-cover.nordic-hero-wrap {
    margin-top: -100px; /* pull up into header */
    padding-top: 100px;
}

/* --- Block Pattern Custom CSS --- */

/* Nordic Hero */
.nordic-hero-wrap {
    position: relative;
    width: 100%;
    min-height: 600px;
    height: 80vh;
    display: flex;
    align-items: flex-end;
    margin-bottom: 4rem;
}

.nordic-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-surface) 0%, rgba(16, 14, 12, 0.6) 50%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

.nordic-hero-content {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 2rem 3rem 6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3rem;
}

.nordic-hero-text h1,
.nordic-hero-text .wp-block-heading {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    max-width: 800px;
}

.nordic-hero-text p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 500px;
}

.nordic-hero-cta {
    margin: 0 !important;
}

.nordic-hero-cta a {
    background: linear-gradient(to bottom right, var(--color-primary), var(--color-primary-dim));
    color: var(--color-on-primary) !important;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: inline-block;
    text-decoration: none !important;
    transition: opacity 0.3s;
    border: none;
}

.nordic-hero-cta a:hover {
    opacity: 0.9;
    color: var(--color-on-primary) !important;
    text-decoration: none !important;
}

.nordic-hero-feature-card {
    background: rgba(43, 37, 32, 0.8);
    backdrop-filter: blur(12px);
    padding: 1.5rem;
    border-radius: 0.5rem;
    max-width: 350px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Bento Grid */
.nordic-bento-section {
    padding: 6rem 3rem;
    max-width: 1536px;
    margin: 0 auto;
}

.nordic-bento-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
}

.nordic-bento-header-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.nordic-bento-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;
}

.bento-card {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color-surface-container-low);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 400px;
}

.bento-card-large {
    flex: 2 1 600px;
}

.bento-card-small {
    flex: 1 1 300px;
}

.bento-img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0.8;
    transition: transform 0.7s ease;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}

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

.bento-card:hover .bento-img {
    transform: scale(1.05);
}

.bento-gradient-large {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-surface-container-highest) 0%, rgba(43,37,32,0.7) 40%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

.bento-gradient-small {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-surface-container-highest) 0%, rgba(43,37,32,0.85) 50%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

.bento-content {
    position: relative;
    z-index: 20;
    padding: 2rem;
}

@media (min-width: 768px) {
    .bento-content {
        padding: 3rem;
        width: 66%;
    }
    .bento-card-small .bento-content {
        width: 100%;
    }
}

.bento-tag {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.bento-btn-primary, .bento-btn-outline {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    width: 100%;
}

.bento-btn-primary a,
.bento-btn-outline a {
    background-color: var(--color-surface-container-highest);
    color: var(--color-primary) !important;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(78, 70, 65, 0.3);
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none !important;
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s;
    width: 100%;
}

.bento-btn-primary a:hover,
.bento-btn-outline a:hover {
    background-color: var(--color-surface-bright);
    border-color: rgba(225, 194, 153, 0.5);
    text-decoration: none !important;
}

/* --- Shortcode Products Grid --- */
.nordgrej-shortcode-products ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nordgrej-shortcode-products ul.products::before,
.nordgrej-shortcode-products ul.products::after {
    display: none !important; /* Remove Storefront clearfix */
}

/* --- Nørdgrej Product Cards (Global) --- */
li.product.nordgrej-product-card {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
    background: var(--color-surface-container-low);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

li.product.nordgrej-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    background: var(--color-surface-container);
}

.nordgrej-card-link-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.nordgrej-card-image-wrap {
    width: 100%;
    position: relative;
    background: var(--color-surface-container-highest);
}

.nordgrej-card-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block;
    border-radius: 0;
}

.nordgrej-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
}

.nordgrej-card-header {
    margin-bottom: 0.5rem;
}

.nordgrej-card-title {
    font-size: 1.25rem;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.3;
}

.nordgrej-card-desc {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Pushes footer down if cards are different heights */
}

.nordgrej-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.nordgrej-card-price {
    color: var(--color-tertiary-dim);
    font-size: 1.125rem;
    font-weight: 600;
}

.nordgrej-card-price ins {
    text-decoration: none;
}

.nordgrej-card-price del {
    opacity: 0.5;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

.nordgrej-card-atc {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-surface-container-highest);
    color: var(--color-primary) !important;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(78, 70, 65, 0.3);
    text-decoration: none !important;
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
    cursor: pointer;
    padding: 0;
}

.nordgrej-card-atc:hover {
    background-color: var(--color-surface-bright);
    border-color: rgba(225, 194, 153, 0.5);
    transform: scale(1.05);
}

.nordgrej-card-atc .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Badges (Nyhed, Tilbud) */
.nordgrej-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    z-index: 10;
}

.nordgrej-badge-sale {
    background: var(--color-error-container);
    color: var(--color-on-error-container);
}

.nordgrej-badge-new {
    background: rgba(43, 37, 32, 0.8);
    backdrop-filter: blur(12px);
    color: var(--color-primary);
    border: 1px solid rgba(78, 70, 65, 0.3);
}

/* Ambient Spacer */
.ambient-spacer-wrap {
    padding: 6rem 1.5rem;
    background-color: var(--color-surface-container-low);
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 4rem;
}

.ambient-icon {
    position: absolute;
    right: -2rem;
    top: -2rem;
    font-size: 300px;
    color: var(--color-surface-container-highest);
    opacity: 0.3;
    pointer-events: none;
}

.ambient-quote {
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    color: var(--color-on-surface);
    font-family: var(--font-manrope);
    font-style: italic;
    line-height: 1.625;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.ambient-line {
    width: 4rem;
    height: 1px;
    background-color: var(--color-primary-dim);
    margin: 0 auto;
}

/* Header Override */
.nordic-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--color-surface);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: visible; /* Allow logo to overflow below */
}

.nordic-search-form {
    display: flex;
    align-items: center;
    background: var(--color-surface-container-highest);
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    margin: 0 !important;
    line-height: 1;
    border: 1px solid transparent !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nordic-search-form input[type="search"] {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--color-on-surface) !important;
    padding: 0 !important;
    margin-right: 0.5rem !important;
    width: 150px !important;
    font-size: 0.875rem !important;
    height: auto !important;
    line-height: normal !important;
}

.nordic-search-form input[type="search"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color-on-surface) !important;
}

.nordic-search-form:focus-within {
    border-color: rgba(225, 194, 153, 0.4) !important; /* var(--color-primary) at 40% */
    box-shadow: 0 0 4px rgba(225, 194, 153, 0.2) !important; /* subtle sand glow */
}

.nordic-search-form button {
    background: transparent !important;
    border: none !important;
    color: var(--color-primary) !important;
    padding: 0.25rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

.nordic-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 0.5rem 3rem;
    overflow: visible;
}

.nordic-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary) !important;
    letter-spacing: -0.05em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.nordic-logo-img {
    height: 120px !important;
    max-height: 120px !important;
    width: auto !important;
    max-width: 300px !important;
    display: block !important;
    object-fit: contain;
    /* Overlap: logo extends below the header bar */
    margin-top: -8px;
    margin-bottom: -40px;
    position: relative;
    z-index: 101;
    /* Glow that follows the PNG shape, not the bounding box */
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 12px rgba(0, 0, 0, 0.7));
}

.nordic-footer .nordic-logo-img {
    height: 140px !important;
    max-height: 140px !important;
    max-width: 350px !important;
    margin-top: 0;
    margin-bottom: 0;
    z-index: auto;
    filter: none !important; /* Remove glow in footer */
}

/* Remove excessive spacing in footer between logo and text */
.nordic-footer .nordic-logo {
    margin-bottom: 0.5rem !important;
}

.nordic-footer .site-info {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.nordic-nav {
    display: none;
}

@media (min-width: 768px) {
    .nordic-nav {
        display: block;
        height: 100%;
        margin-left: 3rem; /* Align menu next to logo */
        margin-right: auto; /* Push icons to the right */
    }
}

.nordic-nav > ul {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
}

.nordic-nav > ul > li {
    position: relative;
    padding: 1.5rem 0; /* Padding creates a hover bridge between link and dropdown */
}

.nordic-nav > ul > li > a {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s, border-color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
}

.nordic-nav > ul > li:hover > a {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.nordic-nav .menu-expand-icon {
    font-size: 1.125rem;
    transition: transform 0.3s ease;
    color: var(--color-primary-dim);
    opacity: 0.7;
}

.nordic-nav > ul > li:hover .menu-expand-icon {
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════
   MEGA MENU STYLING
   ═══════════════════════════════════════════════════════════ */
.nordgrej-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    width: 100vw;
    background-color: var(--color-surface);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem 0; /* Reduced padding to make it tighter and adaptive to content */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

/* Smooth active state on hover */
@media (min-width: 768px) {
    .nordic-nav > ul > li {
        position: static !important; /* Force static positioning for all parent menu items so mega menu spans full screen width */
    }
    .nordgrej-mega-menu {
        left: 0;
        transform: translateY(10px);
    }
    .nordic-nav > ul > li:hover .nordgrej-mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.nordgrej-mega-menu-inner {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 3rem;
}

.nordgrej-mega-menu-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
    align-items: start; /* Prevent columns from stretching, making backgrounds height-adaptive */
}

.nordgrej-mega-menu-col {
    display: flex;
    flex-direction: column;
}

.nordgrej-mega-menu-col.col-span-2 {
    grid-column: span 2;
}

.nordgrej-mega-menu-heading {
    font-family: var(--font-manrope);
    color: var(--color-primary-dim);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.75rem;
    opacity: 0.6;
}

.nordgrej-mega-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

.nordgrej-mega-menu-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-on-surface) !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.2s ease;
}

.nordgrej-mega-menu-item a:hover {
    color: var(--color-primary) !important;
    transform: translateX(4px);
}

.nordgrej-subcat-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 0.25rem;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.nordgrej-subcat-name {
    font-size: 0.95rem;
}

.nordgrej-mega-menu-item svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary-dim);
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.nordgrej-mega-menu-item a:hover svg {
    opacity: 1;
    color: var(--color-primary);
}

/* Category editorial description/text column */
.nordgrej-category-info-text {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-top: 0.25rem;
}

.nordgrej-category-info-text p {
    margin-bottom: 1rem;
    color: var(--color-on-surface-variant) !important;
}

/* Featured product card styling inside mega menu */
.nordgrej-mega-menu-col.featured-col {
    background-color: var(--color-surface-container-low);
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.nordgrej-featured-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.nordgrej-featured-img-wrap {
    width: 80px;
    height: 110px;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    background: var(--color-surface-container-highest);
}

.nordgrej-featured-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nordgrej-featured-content {
    display: flex;
    flex-direction: column;
}

.nordgrej-featured-title {
    font-family: var(--font-manrope);
    color: var(--color-on-surface);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.nordgrej-featured-price {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.nordgrej-featured-link {
    color: var(--color-primary) !important;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.3s ease;
    margin-top: auto;
}

.nordgrej-featured-link:hover {
    color: var(--color-primary-dim) !important;
}

.nordgrej-featured-link .material-symbols-outlined {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.nordgrej-featured-link:hover .material-symbols-outlined {
    transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL BREADCRUMB STYLING
   ═══════════════════════════════════════════════════════════ */
.nordgrej-breadcrumbs-wrap {
    background-color: var(--color-surface);
    padding: 1.25rem 3rem;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin-top: 80px; /* Offset fixed header (header height is ~80px) */
    position: relative;
    z-index: 10;
}

.nordgrej-breadcrumbs-inner {
    max-width: 1536px;
    margin: 0 auto;
}

.nordgrej-breadcrumbs {
    font-family: var(--font-manrope);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-on-surface-variant);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.nordgrej-breadcrumbs a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.nordgrej-breadcrumbs a:hover {
    color: var(--color-tertiary) !important;
}

.nordgrej-breadcrumbs .breadcrumb-separator {
    color: var(--color-outline-variant);
    margin: 0 0.75rem;
    font-size: 0.75rem;
}

.nordgrej-breadcrumbs .breadcrumb-current {
    color: var(--color-on-surface);
    font-weight: 700;
}

/* Shift main content down since breadcrumbs add height */
body.single-product #primary,
body.archive.tax-product_cat #primary,
body.archive.post-type-archive-product #primary,
body.page #primary {
    padding-top: 40px !important;
}

/* When breadcrumbs are active, we don't need additional spacing on the content areas */
.site-content {
    padding-top: 0 !important;
}

.nordic-header-icons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--color-primary);
}

.nordic-header-icons a {
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
}

.nordic-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--color-error);
    color: var(--color-on-error);
    font-size: 0.7rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.nordic-header-icons a:hover {
    color: var(--color-tertiary);
}

/* Footer Override */
.nordic-footer {
    background-color: rgba(43, 37, 32, 0.2);
    border-top: 1px solid rgba(183, 152, 123, 0.1);
    border-radius: 0.5rem 0.5rem 0 0;
    margin-top: 3rem;
    font-size: 0.875rem;
}

.nordic-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 4rem 3rem;
    max-width: 1536px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .nordic-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
    .nordic-footer-navs {
        display: flex;
        justify-content: flex-end;
        gap: 3rem;
    }
}

.nordic-footer-nav ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nordic-footer-nav a {
    color: var(--color-on-surface) !important; /* Lightened — forced over Storefront */
    text-decoration: none !important;
    transition: color 0.3s;
}

.nordic-footer-nav a:hover {
    color: var(--color-primary) !important;
}

.nordic-footer-text {
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: var(--color-on-surface-variant) !important;
    line-height: 1.6;
}

.nordic-footer .site-info {
    color: var(--color-on-surface-variant) !important;
    margin-top: 0 !important;
}

.nordic-footer,
.nordic-footer p,
.nordic-footer li {
    color: var(--color-on-surface-variant) !important;
}

/* Ensure standard Gutenberg text blocks remain readable in the Zero Constraint template */
.nordic-zero-constraint > p,
.nordic-zero-constraint > h1,
.nordic-zero-constraint > h2,
.nordic-zero-constraint > h3,
.nordic-zero-constraint > h4,
.nordic-zero-constraint > h5,
.nordic-zero-constraint > h6,
.nordic-zero-constraint > ul,
.nordic-zero-constraint > ol,
.nordic-zero-constraint > blockquote,
.nordic-zero-constraint > .wp-block-paragraph,
.nordic-zero-constraint > .wp-block-heading {
    max-width: 1536px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    box-sizing: border-box !important;
}

/* Ensure our shortcodes remain 100% wide */
.nordic-zero-constraint > .wp-block-group.nordic-hero-wrap,
.nordic-zero-constraint > .wp-block-group.nordic-bento-section,
.nordic-zero-constraint > .wp-block-group.ambient-spacer-wrap {
    max-width: 100% !important;
    margin: 0 !important;
}

/* Hero is edge-to-edge — no padding */
.nordic-zero-constraint > .wp-block-group.nordic-hero-wrap {
    padding: 0 !important;
}

/* Responsive: tighten side padding on smaller screens */
@media (max-width: 767px) {
    .nordic-zero-constraint > p,
    .nordic-zero-constraint > h1,
    .nordic-zero-constraint > h2,
    .nordic-zero-constraint > h3,
    .nordic-zero-constraint > h4,
    .nordic-zero-constraint > h5,
    .nordic-zero-constraint > h6,
    .nordic-zero-constraint > ul,
    .nordic-zero-constraint > ol,
    .nordic-zero-constraint > blockquote,
    .nordic-zero-constraint > .wp-block-paragraph,
    .nordic-zero-constraint > .wp-block-heading {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .nordic-bento-section {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE — Nordic Hearth Editorial Layout
   ═══════════════════════════════════════════════════════════ */

/* --- Full-Width Override for Product Pages --- */
body.single-product #primary {
    padding-top: 120px !important;
}

body.single-product .site-content > .col-full,
body.single-product .content-area,
body.single-product .site-main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove default WooCommerce product wrappers (We now show custom breadcrumbs on all pages) */
body.single-product .storefront-breadcrumb {
    display: none;
}

/* --- Hero Section Grid --- */
.nordgrej-product-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 6rem;
    padding: 0 1.5rem;
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .nordgrej-product-hero {
        grid-template-columns: 7fr 5fr;
        gap: 5rem;
        align-items: start;
        margin-bottom: 8rem;
        padding: 0 3rem;
    }
}

/* --- Product Gallery --- */
.nordgrej-product-gallery {
    position: relative;
    height: 450px;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--color-surface-container);
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1024px) {
    .nordgrej-product-gallery {
        height: 700px;
    }
}

.nordgrej-gallery-viewport {
    position: relative;
    width: 100%;
    height: 100%;
}

.nordgrej-gallery-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.nordgrej-gallery-slide.active {
    opacity: 0.9;
    pointer-events: auto;
}

.nordgrej-gallery-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-surface-container) 0%, transparent 40%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 2;
}

/* Floating badges */
.nordgrej-gallery-badges {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 5;
}

.nordgrej-badge {
    background: rgba(43, 37, 32, 0.8);
    backdrop-filter: blur(12px);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(78, 70, 65, 0.3);
}

.nordgrej-badge-sale {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    left: auto;
    background: var(--color-error-container);
    color: var(--color-on-error-container);
    z-index: 5;
}

/* Gallery navigation arrows */
.nordgrej-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(16, 14, 12, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(78, 70, 65, 0.3);
    color: var(--color-primary);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    opacity: 0;
}

.nordgrej-product-gallery:hover .nordgrej-gallery-arrow {
    opacity: 1;
}

.nordgrej-gallery-arrow:hover {
    background: rgba(43, 37, 32, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.nordgrej-gallery-prev {
    left: 1rem;
}

.nordgrej-gallery-next {
    right: 1rem;
}

/* Gallery thumbnails */
.nordgrej-gallery-thumbs {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.nordgrej-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .nordgrej-gallery-thumbs {
        grid-column: 1;
        grid-row: 2;
        padding: 0 3rem;
    }
}

.nordgrej-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s, border-color 0.3s;
    background: var(--color-surface-container);
    padding: 0 !important;
}

.nordgrej-thumb.active,
.nordgrej-thumb:hover {
    opacity: 1;
    border-color: var(--color-primary);
}

.nordgrej-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Product Details Column --- */
.nordgrej-product-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .nordgrej-product-details {
        padding: 0 !important;
    }
}

.nordgrej-eyebrow {
    color: var(--color-primary-dim);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.nordgrej-product-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    color: var(--color-on-surface);
}

.nordgrej-product-price {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--color-tertiary-dim);
    margin-bottom: 2rem;
}

.nordgrej-product-price del {
    color: var(--color-on-surface-variant);
    opacity: 0.5;
    font-size: 0.8em;
    margin-right: 0.5rem;
}

.nordgrej-product-price ins {
    text-decoration: none;
    color: var(--color-primary);
}

.nordgrej-product-desc {
    color: var(--color-on-surface-variant);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.nordgrej-product-desc p {
    margin-bottom: 1rem;
}

.nordgrej-product-desc p:last-child {
    margin-bottom: 0;
}

/* --- Add to Cart + Wishlist Actions --- */
.nordgrej-product-actions {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.nordgrej-atc-wrap {
    flex: 1;
}

/* Override WooCommerce add-to-cart form */
.nordgrej-atc-wrap form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide WooCommerce clearfix pseudo-elements which break flex layouts */
.nordgrej-atc-wrap form.cart::before,
.nordgrej-atc-wrap form.cart::after {
    display: none !important;
}

.nordgrej-atc-wrap .quantity {
    display: flex;
    align-items: center;
    background: var(--color-surface-container-highest);
    border-radius: 0.5rem;
    overflow: hidden;
}

.nordgrej-atc-wrap .quantity .qty {
    background: transparent;
    border: none;
    color: var(--color-on-surface);
    font-family: var(--font-manrope);
    font-size: 1rem;
    text-align: center;
    width: 4rem;
    padding: 0.75rem;
    -moz-appearance: textfield;
}

.nordgrej-atc-wrap .quantity .qty::-webkit-inner-spin-button,
.nordgrej-atc-wrap .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.nordgrej-atc-wrap .single_add_to_cart_button {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dim));
    color: var(--color-on-primary);
    font-family: var(--font-manrope);
    font-weight: 700;
    font-size: 1.125rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: filter 0.3s, transform 0.15s;
    flex: 1;
    text-transform: none;
    letter-spacing: 0;
}

.nordgrej-atc-wrap .single_add_to_cart_button:hover {
    filter: brightness(1.1);
}

.nordgrej-atc-wrap .single_add_to_cart_button:active {
    transform: scale(0.98);
}

/* Variable product dropdowns */
.nordgrej-atc-wrap .variations {
    border: none;
    margin-bottom: 0;
    width: 100%;
}

.nordgrej-atc-wrap .variations td {
    display: block;
    padding: 0.25rem 0;
}

.nordgrej-atc-wrap .variations td.label label {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nordgrej-atc-wrap .variations select {
    background: var(--color-surface-container-highest);
    color: var(--color-on-surface);
    border: 1px solid rgba(78, 70, 65, 0.3);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-family: var(--font-manrope);
    width: 100%;
}

/* Wishlist button */
.nordgrej-wishlist-btn {
    background: var(--color-surface-container-highest);
    color: var(--color-primary);
    border: none;
    border-radius: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, transform 0.15s;
}

.nordgrej-wishlist-btn:hover {
    background: var(--color-surface-container-high);
}

.nordgrej-wishlist-btn:active {
    transform: scale(0.9);
}

.nordgrej-wishlist-btn.active {
    color: var(--color-error);
}

/* --- Meta Badges --- */
.nordgrej-product-meta {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(78, 70, 65, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nordgrej-meta-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
}

.nordgrej-meta-badge .material-symbols-outlined {
    color: var(--color-primary-dim);
    font-size: 1.25rem;
}

.nordgrej-meta-sku {
    opacity: 0.6;
    font-size: 0.8rem;
}


/* ═══════════════════════════════════════════════
   BENTO LONG DESCRIPTION SECTION
   ═══════════════════════════════════════════════ */

.nordgrej-product-bento {
    margin-bottom: 6rem;
    padding: 0 1.5rem;
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .nordgrej-product-bento {
        padding: 0 3rem;
        margin-bottom: 8rem;
    }
}

.nordgrej-bento-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
}

.nordgrej-bento-accent {
    color: var(--color-primary-dim);
    font-style: italic;
}

.nordgrej-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .nordgrej-bento-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

.nordgrej-bento-main {
    background: var(--color-surface-container-highest);
    border-radius: 0.75rem;
    padding: 2rem;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media (min-width: 768px) {
    .nordgrej-bento-main {
        grid-column: 1 / -1;
        padding: 3rem;
    }
}

.nordgrej-bento-icon {
    color: var(--color-primary);
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.nordgrej-bento-card-content {
    color: var(--color-on-surface-variant);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.nordgrej-bento-card-content p {
    margin-bottom: 1rem;
}

.nordgrej-bento-card-content p:last-child {
    margin-bottom: 0;
}

.nordgrej-bento-card-content h1,
.nordgrej-bento-card-content h2,
.nordgrej-bento-card-content h3 {
    color: var(--color-on-surface);
    margin-bottom: 1rem;
}

.nordgrej-bento-side {
    background: var(--color-surface-container-low);
    border-radius: 0.75rem;
    padding: 2rem;
    transition: background 0.3s;
}

.nordgrej-bento-side:hover {
    background: var(--color-surface-container);
}

@media (min-width: 768px) {
    .nordgrej-bento-side {
        grid-column: span 6;
    }
}

.nordgrej-bento-side-icon {
    color: var(--color-primary-dim);
    font-size: 2.5rem;
    background: var(--color-surface-container-highest);
    padding: 0.75rem;
    border-radius: 0.5rem;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.nordgrej-bento-side-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.nordgrej-bento-side-text {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════
   REVIEWS SECTION
   ═══════════════════════════════════════════════ */

.nordgrej-reviews-section {
    max-width: 1000px;
    margin: 0 auto 6rem;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .nordgrej-reviews-section {
        padding: 0 3rem;
        margin-bottom: 8rem;
    }
}

.nordgrej-reviews-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.nordgrej-reviews-title {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.nordgrej-reviews-accent {
    color: var(--color-primary-dim);
}

.nordgrej-reviews-rating-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    font-size: 1.25rem;
    color: var(--color-primary);
}

.nordgrej-star-filled {
    font-variation-settings: 'FILL' 1;
    color: var(--color-primary);
}

.nordgrej-rating-value {
    font-weight: 700;
}

.nordgrej-rating-meta {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    font-weight: 400;
}

/* Editorial review cards */
.nordgrej-reviews-editorial {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.nordgrej-review-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .nordgrej-review-card {
        flex-direction: row;
        gap: 3rem;
    }
}

.nordgrej-review-offset {
    margin-left: 0;
}

@media (min-width: 768px) {
    .nordgrej-review-offset {
        margin-left: 3rem;
    }
}

.nordgrej-review-author {
    flex-shrink: 0;
    min-width: 120px;
}

@media (min-width: 768px) {
    .nordgrej-review-author {
        width: 12rem;
    }
}

.nordgrej-review-name {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-on-surface);
    margin-bottom: 0.5rem;
}

.nordgrej-review-stars {
    display: flex;
    gap: 0;
    color: var(--color-primary);
}

.nordgrej-review-stars .material-symbols-outlined {
    font-size: 0.875rem;
}

.nordgrej-review-body {
    position: relative;
    padding: 2rem;
    border-radius: 0.75rem;
    flex-grow: 1;
}

.nordgrej-review-warm .nordgrej-review-body {
    background: var(--color-surface-container-low);
}

.nordgrej-review-elevated .nordgrej-review-body {
    background: var(--color-surface-container-highest);
}

.nordgrej-quote-bg {
    position: absolute;
    top: -1rem;
    left: -0.5rem;
    font-size: 4rem;
    color: var(--color-surface-container-highest);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.nordgrej-review-elevated .nordgrej-quote-bg {
    color: var(--color-surface);
}

.nordgrej-review-body p {
    position: relative;
    z-index: 1;
    color: var(--color-on-surface-variant);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 !important;
}

.nordgrej-reviews-more {
    margin-top: 3rem;
    text-align: center;
}

@media (min-width: 768px) {
    .nordgrej-reviews-more {
        text-align: left;
        margin-left: 15rem;
    }
}

.nordgrej-reviews-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s;
}

.nordgrej-reviews-link:hover {
    color: var(--color-primary-dim);
}

.nordgrej-reviews-link .material-symbols-outlined {
    font-size: 0.875rem;
    transition: transform 0.3s;
}

.nordgrej-reviews-link:hover .material-symbols-outlined {
    transform: translateX(4px);
}


/* ═══════════════════════════════════════════════
   FULL REVIEWS / WOOCOMMERCE REVIEW OVERRIDES
   ═══════════════════════════════════════════════ */

.nordgrej-all-reviews-section {
    max-width: 900px;
    margin: 0 auto 6rem;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .nordgrej-all-reviews-section {
        padding: 0 3rem;
    }
}

.nordgrej-all-reviews-section #reviews {
    color: var(--color-on-surface);
}

.nordgrej-all-reviews-section .woocommerce-Reviews-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-on-surface);
}

.nordgrej-all-reviews-section .commentlist {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.nordgrej-all-reviews-section .commentlist .comment {
    padding: 2rem 0;
    border-bottom: 1px solid rgba(78, 70, 65, 0.15);
}

.nordgrej-all-reviews-section .comment_container {
    display: flex;
    gap: 1.5rem;
}

.nordgrej-all-reviews-section .comment_container img.avatar {
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.nordgrej-all-reviews-section .comment-text {
    flex-grow: 1;
}

.nordgrej-all-reviews-section .comment-text .meta {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.nordgrej-all-reviews-section .comment-text .meta strong {
    color: var(--color-on-surface);
}

.nordgrej-all-reviews-section .star-rating {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.nordgrej-all-reviews-section .description p {
    color: var(--color-on-surface-variant);
    line-height: 1.7;
}

/* Review form */
.nordgrej-all-reviews-section #review_form_wrapper {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(78, 70, 65, 0.15);
}

.nordgrej-all-reviews-section .comment-reply-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin-bottom: 1.5rem;
}

.nordgrej-all-reviews-section #commentform label {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.nordgrej-all-reviews-section #commentform input[type="text"],
.nordgrej-all-reviews-section #commentform input[type="email"],
.nordgrej-all-reviews-section #commentform textarea {
    background: var(--color-surface-container-highest);
    border: 1px solid rgba(78, 70, 65, 0.3);
    border-radius: 0.5rem;
    color: var(--color-on-surface);
    font-family: var(--font-manrope);
    padding: 0.75rem 1rem;
    width: 100%;
    margin-bottom: 1rem;
    transition: border-color 0.3s;
}

.nordgrej-all-reviews-section #commentform input:focus,
.nordgrej-all-reviews-section #commentform textarea:focus {
    outline: none;
    border-color: rgba(225, 194, 153, 0.4);
    box-shadow: 0 0 0 2px rgba(225, 194, 153, 0.1);
}

.nordgrej-all-reviews-section #commentform .form-submit input[type="submit"] {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dim));
    color: var(--color-on-primary);
    font-family: var(--font-manrope);
    font-weight: 700;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: filter 0.3s;
}

.nordgrej-all-reviews-section #commentform .form-submit input[type="submit"]:hover {
    filter: brightness(1.1);
}

/* WooCommerce notices on product page */
body.single-product .woocommerce-message,
body.single-product .woocommerce-info,
body.single-product .woocommerce-error {
    max-width: 1536px;
    margin: 0 auto 2rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-family: var(--font-manrope);
}

body.single-product .woocommerce-message {
    background: var(--color-surface-container-highest);
    color: var(--color-primary);
    border-top: 3px solid var(--color-primary);
}

body.single-product .woocommerce-message a {
    color: var(--color-primary);
    font-weight: 600;
}

/* Bento full-width modifier */
.nordgrej-bento-full {
    grid-column: 1 / -1 !important;
}

/* Bento delivery/contact card enhancements */
.nordgrej-bento-stock-ok {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary-dim);
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.nordgrej-bento-stock-ok .material-symbols-outlined {
    font-size: 1.125rem;
}

.nordgrej-bento-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.75rem;
    transition: color 0.3s;
}

.nordgrej-bento-contact-link:hover {
    color: var(--color-primary-dim);
}

.nordgrej-bento-contact-link .material-symbols-outlined {
    font-size: 1rem;
    transition: transform 0.3s;
}

.nordgrej-bento-contact-link:hover .material-symbols-outlined {
    transform: translateX(4px);
}

.nordgrej-bento-side .nordgrej-bento-side-text {
    display: flex;
    flex-direction: column;
}


/* ═══════════════════════════════════════════════
   RECOMMENDED PRODUCTS SECTION
   ═══════════════════════════════════════════════ */

.nordgrej-recommended-section {
    max-width: 1536px;
    margin: 0 auto 6rem;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .nordgrej-recommended-section {
        padding: 0 3rem;
        margin-bottom: 8rem;
    }
}

.nordgrej-recommended-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
}

.nordgrej-recommended-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .nordgrej-recommended-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .nordgrej-recommended-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.nordgrej-rec-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-container-low);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s;
}

.nordgrej-rec-card:hover {
    background: var(--color-surface-container);
    transform: translateY(-4px);
}

.nordgrej-rec-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.nordgrej-rec-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.nordgrej-rec-card:hover .nordgrej-rec-image img {
    transform: scale(1.05);
}

.nordgrej-rec-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-surface-container-low) 0%, transparent 50%);
    pointer-events: none;
}

.nordgrej-rec-card:hover .nordgrej-rec-gradient {
    background: linear-gradient(to top, var(--color-surface-container) 0%, transparent 50%);
}

.nordgrej-rec-image .nordgrej-badge-sale {
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.625rem;
    padding: 0.375rem 0.75rem;
}

.nordgrej-rec-info {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nordgrej-rec-category {
    color: var(--color-primary-dim);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nordgrej-rec-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 !important;
    line-height: 1.3;
}

.nordgrej-rec-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-tertiary-dim);
    margin-top: 0.25rem;
}

.nordgrej-rec-price del {
    color: var(--color-on-surface-variant);
    opacity: 0.5;
    font-size: 0.85em;
    margin-right: 0.25rem;
}

.nordgrej-rec-price ins {
    text-decoration: none;
    color: var(--color-primary);
}
/* ═══════════════════════════════════════════════════════════
   CART PAGE
   ═══════════════════════════════════════════════════════════ */

/* Container */
.nordgrej-cart-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .nordgrej-cart-container {
        padding: 4rem 3rem;
    }
}

.nordgrej-cart-title {
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-on-surface);
    margin-bottom: 3rem;
    letter-spacing: -0.025em;
}

/* Layout */
.nordgrej-cart-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .nordgrej-cart-layout {
        flex-direction: row;
        gap: 4rem;
    }
    .nordgrej-cart-items {
        width: 66.666%;
    }
    .nordgrej-cart-summary-wrap {
        width: 33.333%;
    }
}

/* Cart Items */
.nordgrej-cart-items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.nordgrej-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: var(--color-surface-container-low);
    padding: 1.5rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
}

.nordgrej-cart-item:hover {
    background-color: var(--color-surface-container);
}

.nordgrej-cart-item-image img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.5rem;
    background-color: var(--color-surface-container-highest);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.nordgrej-cart-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 6rem;
}

.nordgrej-cart-item-title-wrap {
    margin-bottom: 1rem;
}

.nordgrej-cart-item-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0 0 0.25rem 0;
}

.nordgrej-cart-item-title a {
    color: inherit;
    text-decoration: none;
}

.nordgrej-cart-item-title a:hover {
    color: var(--color-primary);
}

.nordgrej-cart-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nordgrej-cart-item-quantity .quantity {
    display: flex;
    align-items: center;
    background-color: var(--color-surface-container-highest);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    gap: 0.5rem;
}

.nordgrej-cart-item-quantity .quantity input {
    background: transparent;
    border: none;
    color: var(--color-on-surface);
    font-size: 0.875rem;
    font-weight: 500;
    width: 2.5rem;
    text-align: center;
    padding: 0 !important;
}

.nordgrej-cart-item-quantity .quantity input:focus {
    box-shadow: none;
    outline: none;
}

/* Hide standard WC spin buttons */
.nordgrej-cart-item-quantity .quantity input[type=number]::-webkit-inner-spin-button, 
.nordgrej-cart-item-quantity .quantity input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.nordgrej-cart-item-price {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-primary);
}

/* Remove button */
.nordgrej-cart-item-remove {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.nordgrej-cart-item:hover .nordgrej-cart-item-remove {
    opacity: 1;
}

.nordgrej-cart-item-remove a.remove {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: color 0.3s;
}

.nordgrej-cart-item-remove a.remove:hover {
    color: var(--color-error);
    background: transparent !important;
}

.nordgrej-cart-item-remove a.remove::before {
    display: none;
}

.nordgrej-cart-item-remove a.remove .material-symbols-outlined {
    font-size: 20px;
}

/* Order Summary Collaterals styling */
.nordgrej-cart-summary {
    background-color: var(--color-surface-container-highest);
    border-radius: 0.5rem;
    padding: 2rem;
    position: sticky;
    top: 8rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.cart-collaterals .cart_totals h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin-bottom: 1.5rem;
    border-bottom: none;
    padding: 0 !important;
}

.cart-collaterals .cart_totals table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td {
    border: none;
    padding: 0.5rem 0;
    background: transparent;
}

.cart-collaterals .cart_totals table th {
    text-align: left;
    color: var(--color-on-surface-variant);
    font-weight: 400;
}

.cart-collaterals .cart_totals table td {
    text-align: right;
    color: var(--color-on-surface);
}

.cart-collaterals .cart_totals table tr.order-total th,
.cart-collaterals .cart_totals table tr.order-total td {
    border-top: 1px solid rgba(78, 70, 65, 0.3);
    padding-top: 1rem;
    margin-top: 1rem;
}

.cart-collaterals .cart_totals table tr.order-total th {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-on-surface);
}

.cart-collaterals .cart_totals table tr.order-total td strong {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
    background: linear-gradient(to bottom right, var(--color-primary), var(--color-primary-dim));
    color: var(--color-on-primary) !important;
    font-weight: 700;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    transition: opacity 0.3s;
    text-decoration: none !important;
    margin-bottom: 1rem;
}

.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    opacity: 0.9;
}

/* Coupon & Update Actions */
.nordgrej-cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.nordgrej-cart-actions .coupon {
    display: flex;
    gap: 0.5rem;
}

.nordgrej-cart-actions input.input-text {
    background-color: var(--color-surface-container-highest);
    border: 1px solid rgba(78, 70, 65, 0.3);
    color: var(--color-on-surface);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    outline: none;
}

.nordgrej-cart-actions button.button {
    background-color: var(--color-surface-container-highest);
    color: var(--color-primary);
    border: 1px solid rgba(78, 70, 65, 0.3);
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.nordgrej-cart-actions button.button:hover {
    background-color: var(--color-surface-bright);
}


/* ═══════════════════════════════════════════════════════════
   FEEDBACK FIXES
   ═══════════════════════════════════════════════════════════ */

/* 2. Global Input Fields Background */
input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
textarea, 
select {
    background-color: #3d3d3d !important;
    color: var(--color-on-surface) !important;
    border: 1px solid rgba(78, 70, 65, 0.3) !important;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="number"]:focus, 
input[type="password"]:focus, 
input[type="search"]:focus, 
textarea:focus, 
select:focus {
    background-color: #3d3d3d !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* 3. Remove underline from Checkout button */
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* 4. Hide "Rediger" link */
.edit-link {
    display: none !important;
}


/* Fix underline on checkout button deeply */
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
a.checkout-button {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button::after,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
    display: none !important;
}


/* Fix underline on checkout button with very high specificity */
.hentry .entry-content a.checkout-button,
.woocommerce-cart .hentry .entry-content a.checkout-button,
#page .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}

#page .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button::after {
    display: none !important;
}


/* Fix underline on WooCommerce Block Checkout Button */
.hentry .entry-content a.wc-block-components-checkout-button,
.wc-block-components-checkout-button,
.hentry .entry-content a.checkout-button,
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}


/* Nuclear option to remove underline on checkout button */
body .hentry .entry-content a.wc-block-components-checkout-button,
html body #page .hentry .entry-content a.wc-block-components-checkout-button,
.wc-block-components-checkout-button,
.wc-block-components-checkout-button * {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Correct class for the WooCommerce Block Cart submit button */
body .hentry .entry-content a.wc-block-cart__submit-button,
html body #page .hentry .entry-content a.wc-block-cart__submit-button,
.wc-block-cart__submit-button,
.wc-block-cart__submit-button * {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Added to cart "Se kurv" link appended by AJAX */
.nordgrej-atc-wrap a.added_to_cart {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
    font-family: var(--font-manrope);
    font-weight: 700;
    font-size: 1rem;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: filter 0.3s, transform 0.15s;
    white-space: nowrap;
}

.nordgrej-atc-wrap a.added_to_cart:hover {
    filter: brightness(1.1);
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT ARCHIVE PAGE — Nordic Hearth Editorial Layout
   ═══════════════════════════════════════════════════════════ */

body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary {
    padding-top: 100px !important;
}

body.post-type-archive-product .site-content > .col-full,
body.tax-product_cat .site-content > .col-full,
body.tax-product_tag .site-content > .col-full {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nordgrej-archive-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1536px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .nordgrej-archive-wrapper {
        flex-direction: row;
        padding: 3rem;
    }
}

/* --- Sidebar --- */
.nordgrej-archive-sidebar {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .nordgrej-archive-sidebar {
        width: 16rem; /* 64 (256px) */
    }
}

.nordgrej-archive-title {
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
    margin-bottom: 0;
}

.nordgrej-filters-container {
    background-color: var(--color-surface-container-low);
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.nordgrej-filter-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nordgrej-filter-title .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Category List (wp_list_categories) */
.nordgrej-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nordgrej-category-list li {
    margin: 0;
}

.nordgrej-category-list a {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s;
    display: block;
    padding: 0.25rem 0;
}

.nordgrej-category-list a:hover,
.nordgrej-category-list li.current-cat > a {
    color: var(--color-primary);
}

.nordgrej-category-list ul.children {
    list-style: none;
    padding-left: 1rem;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Price Filter Form */
.nordgrej-price-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nordgrej-price-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nordgrej-price-field {
    background: var(--color-surface-container-highest);
    border: 1px solid rgba(78, 70, 65, 0.3);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    flex: 1;
}

.nordgrej-price-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 0.25rem;
}

.nordgrej-price-input {
    background: transparent !important;
    border: none !important;
    color: var(--color-on-surface) !important;
    padding: 0 !important;
    width: 100% !important;
    font-size: 0.875rem !important;
}

.nordgrej-price-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.nordgrej-price-separator {
    color: var(--color-outline-variant);
}

.nordgrej-price-submit {
    width: 100%;
    background: var(--color-surface-container-highest);
    color: var(--color-primary);
    border: 1px solid rgba(78, 70, 65, 0.2);
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.nordgrej-price-submit:hover {
    background: var(--color-surface-bright);
}

/* --- Main Grid --- */
.nordgrej-archive-main {
    flex: 1;
    min-width: 0;
}

.nordgrej-archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.nordgrej-result-count {
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    margin: 0;
}

.nordgrej-catalog-ordering form {
    margin: 0;
}

.nordgrej-catalog-ordering select {
    background-color: var(--color-surface-container-low);
    color: var(--color-on-surface);
    border: 1px solid rgba(78, 70, 65, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
}

/* The actual WooCommerce ul.products grid */
.nordgrej-archive-main ul.products {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
}

@media (min-width: 640px) {
    .nordgrej-archive-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .nordgrej-archive-main ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.nordgrej-archive-main ul.products::before,
.nordgrej-archive-main ul.products::after {
    display: none !important;
}

.nordgrej-product-card {
    background: var(--color-surface-container-highest);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(78, 70, 65, 0.1);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.nordgrej-product-card:hover {
    border-color: rgba(225, 194, 153, 0.3); /* primary/30 */
}

.nordgrej-card-link-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    color: inherit;
}

.nordgrej-card-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    background: rgba(16, 14, 12, 0.8);
    backdrop-filter: blur(4px);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    border: 1px solid rgba(225, 194, 153, 0.2);
}

.nordgrej-badge-sale {
    background: var(--color-error-container);
    color: var(--color-on-error-container);
    border-color: rgba(255, 155, 130, 0.2);
}

.nordgrej-card-image-wrap {
    aspect-ratio: 4 / 5;
    background: var(--color-surface-container);
    overflow: hidden;
    position: relative;
}

.nordgrej-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.nordgrej-product-card:hover .nordgrej-card-img {
    transform: scale(1.05);
}

.nordgrej-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: linear-gradient(to top, var(--color-surface-container-highest) 0%, rgba(43,37,32,0.9) 100%);
    position: relative;
    z-index: 2;
    text-align: left !important;
}

.nordgrej-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.nordgrej-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-on-surface);
    line-height: 1.25;
    margin: 0;
}

.nordgrej-card-desc {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nordgrej-card-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nordgrej-card-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
}

.nordgrej-card-price del {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin-right: 0.5rem;
    font-weight: 400;
}

.nordgrej-card-atc {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-surface-container-low);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none !important;
}

.nordgrej-card-atc:hover {
    background: var(--color-primary);
    color: var(--color-surface);
}

.nordgrej-card-atc:focus,
.nordgrej-card-atc:active,
.nordgrej-card-atc.added,
.nordgrej-card-atc.loading {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.nordgrej-card-atc .material-symbols-outlined {
    font-size: 1.25rem;
}

/* --- Pagination --- */
.nordgrej-archive-main .woocommerce-pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.nordgrej-archive-main .woocommerce-pagination ul {
    display: flex;
    gap: 0.5rem;
    border: none;
    margin: 0;
    padding: 0;
}

.nordgrej-archive-main .woocommerce-pagination ul li {
    border: none;
}

.nordgrej-archive-main .woocommerce-pagination ul li .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background: transparent;
    border: 1px solid rgba(225, 194, 153, 0.4);
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.nordgrej-archive-main .woocommerce-pagination ul li .page-numbers:hover {
    background: rgba(225, 194, 153, 0.1);
}

.nordgrej-archive-main .woocommerce-pagination ul li .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════
   LIVE SEARCH (AJAX)
   ═══════════════════════════════════════════════════════════ */
.nordgrej-search-container {
    position: relative;
    display: inline-block;
}

.nordgrej-search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 350px;
    background: rgba(29, 25, 22, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(225, 194, 153, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.nordgrej-search-results.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nordgrej-search-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(225, 194, 153, 0.1);
    text-decoration: none !important;
    transition: background 0.3s;
}

.nordgrej-search-item:last-child {
    border-bottom: none;
}

.nordgrej-search-item:hover {
    background: rgba(225, 194, 153, 0.1);
}

.nordgrej-search-thumb {
    width: 50px;
    height: 50px;
    border-radius: 0.25rem;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface-container);
}

.nordgrej-search-info {
    flex-grow: 1;
    min-width: 0;
}

.nordgrej-search-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    line-height: 1.4;
    word-break: break-word;
    margin-bottom: 0.25rem;
}

.nordgrej-search-price {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 700;
}

.nordgrej-search-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
}

.nordgrej-search-loading {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-primary);
}

.nordgrej-search-loading .material-symbols-outlined {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Category Foldout Toggle */
.nordgrej-cat-toggle {
    font-size: 1.25rem !important;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    margin-left: 0.5rem;
    vertical-align: middle;
    transition: color 0.3s;
    user-select: none;
}

.nordgrej-cat-toggle:hover,
.nordgrej-cat-toggle.open {
    color: var(--color-primary);
}

.nordgrej-cat-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.nordgrej-category-list .nordgrej-cat-item {
    margin-bottom: 0.5rem;
}

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

.nordgrej-cat-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--color-on-surface);
    font-size: 0.875rem;
    user-select: none;
    flex-grow: 1;
}

.nordgrej-cat-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--color-outline-variant);
    border-radius: 0.25rem;
    background: var(--color-surface-container);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
    margin: 0;
    outline: none !important;
    box-shadow: none !important;
}

.nordgrej-cat-checkbox:focus,
.nordgrej-cat-checkbox:active {
    outline: none !important;
    box-shadow: none !important;
}

.nordgrej-cat-checkbox:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.nordgrej-cat-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23100e0c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

.nordgrej-cat-list.children {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

/* Price Slider Overrides */
.nordgrej-price-slider-wrap .price_slider_wrapper {
    margin-top: 1rem;
}
.nordgrej-price-slider-wrap .ui-slider {
    background: var(--color-surface-container-highest) !important;
    border-radius: 0.25rem !important;
    height: 6px !important;
    border: none !important;
}
.nordgrej-price-slider-wrap .ui-slider .ui-slider-range {
    background: var(--color-primary) !important;
    border-radius: 0.25rem !important;
}
.nordgrej-price-slider-wrap .ui-slider .ui-slider-handle {
    background: var(--color-surface) !important;
    border: 2px solid var(--color-primary) !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    top: -6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    cursor: pointer !important;
}
.nordgrej-price-slider-wrap .price_slider_amount {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.5rem;
}
.nordgrej-price-slider-wrap .price_label {
    order: 1 !important;
    color: var(--color-on-surface-variant) !important;
    font-size: 0.875rem !important;
}
.nordgrej-price-slider-wrap .button {
    order: 2 !important;
    background: var(--color-surface-container-highest) !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(78, 70, 65, 0.2) !important;
    border-radius: 0.25rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 0.3s !important;
}
.nordgrej-price-slider-wrap .button:hover {
    background: var(--color-surface-bright) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.nordgrej-price-slider-wrap .clear {
    display: none !important;
}

/* ==========================================================================
   COOKIE CMP BANNER
   ========================================================================== */

/* Body locking when modal is open */
body.nordgrej-cmp-open {
    overflow: hidden;
}

/* Overlay */
.nordgrej-cmp-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(16, 14, 12, 0.85);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* Modal Container */
.nordgrej-cmp-modal {
    background-color: var(--color-surface-container);
    border: 1px solid var(--color-surface-container-highest);
    border-radius: 1rem;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    color: var(--color-on-surface);
}

/* Scrollbar for Modal */
.nordgrej-cmp-modal::-webkit-scrollbar {
    width: 8px;
}
.nordgrej-cmp-modal::-webkit-scrollbar-track {
    background: var(--color-surface-container-low);
    border-radius: 0 1rem 1rem 0;
}
.nordgrej-cmp-modal::-webkit-scrollbar-thumb {
    background: var(--color-surface-container-highest);
    border-radius: 4px;
}

.coi-banner__page {
    display: flex;
    flex-direction: column;
}

.coi-banner__summary {
    padding: 2rem;
    border-bottom: 1px solid var(--color-surface-container-highest);
}

.coi-banner__header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.coi-banner__header .nordic-logo {
    font-size: 2rem;
}

.coi-banner__headline {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.coi-banner__maintext {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    line-height: 1.6;
}

.coi-banner__policy {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    text-decoration: underline;
}

/* Categories Accordion */
.coi-consent-banner__categories-wrapper {
    padding: 1rem 2rem;
}

.coi-consent-banner__category-container {
    border-bottom: 1px solid var(--color-surface-container-highest);
    padding: 1rem 0;
}

.coi-consent-banner__category-container:last-child {
    border-bottom: none;
}

.coi-consent-banner__category-name {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap;
    position: relative;
}

.ci-arrow {
    margin-right: 0.5rem;
    color: var(--color-primary);
    transition: transform 0.3s;
}

.cookieTypeHeader {
    font-weight: 700;
    font-size: 1.125rem;
    flex-grow: 1;
}

.coi-consent-banner__category-description {
    width: 100%;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin-top: 0.5rem;
    padding-left: 2rem;
    padding-right: 3rem;
}

/* Toggle Switch */
.coi-consent-banner__switch-container {
    position: absolute;
    right: 0;
    top: 0;
}

.nordgrej-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.nordgrej-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nordgrej-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-surface-container-highest);
    transition: .4s;
    border-radius: 24px;
}

.nordgrej-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-on-surface-variant);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .nordgrej-slider {
    background-color: var(--color-primary);
}

input:focus + .nordgrej-slider {
    box-shadow: 0 0 1px var(--color-primary);
}

input:checked + .nordgrej-slider:before {
    transform: translateX(20px);
    background-color: var(--color-on-primary);
}

input:disabled + .nordgrej-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cookie Table Details */
.coi-consent-banner__description-container {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--color-surface-container-low);
    border-radius: 0.5rem;
    overflow-x: auto;
}

.nordgrej-cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    text-align: left;
    background-color: transparent !important;
}

.nordgrej-cookie-table tr {
    background-color: transparent !important;
}

.nordgrej-cookie-table th, 
.nordgrej-cookie-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-surface-container-highest);
    background-color: transparent !important;
    color: var(--color-on-surface-variant) !important;
}

.nordgrej-cookie-table th {
    color: var(--color-primary-dim) !important;
    font-weight: 600;
}

.coi-consent-banner__no-cookies {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    font-style: italic;
}

/* Footer Buttons */
.coi-banner__page-footer {
    padding: 2rem;
    background-color: var(--color-surface-container-highest);
    border-radius: 0 0 1rem 1rem;
}

.coi-button-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: flex-end;
}

/* ==========================================================================
   COOKIE CMP BUTTONS & BLOB
   ========================================================================== */

/* Button Overrides */
.coi-button-group .cmp-btn {
    flex: 0 1 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 20px !important;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-manrope);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    font-size: 1rem;
}

button.bento-btn-outline.cmp-btn {
    background-color: var(--color-surface-container-highest);
    color: var(--color-primary);
    border: 1px solid rgba(78, 70, 65, 0.3);
}

button.bento-btn-outline.cmp-btn:hover {
    background-color: var(--color-surface-bright);
    border-color: rgba(225, 194, 153, 0.5);
}

button.bento-btn-primary.cmp-btn {
    background: linear-gradient(to bottom right, var(--color-primary), var(--color-primary-dim));
    color: var(--color-on-primary);
    border: none;
}

button.bento-btn-primary.cmp-btn:hover {
    opacity: 0.9;
}

/* Floating Cookie Blob */
.nordgrej-cookie-blob {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--color-surface-container-highest);
    border: 1px solid rgba(78, 70, 65, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999990;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
}

.nordgrej-cookie-blob:hover {
    transform: scale(1.1) rotate(10deg);
    background-color: var(--color-surface-bright);
    border-color: var(--color-primary);
}

.nordgrej-cookie-blob .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 24px;
}

/* --- Override Storefront category subcategory spacing --- */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
ul.products li.product-category h2,
ul.products li.product h2.woocommerce-loop-category__title {
    margin-top: 0 !important;
}

/* --- Override Storefront h3 margin on frontpage category cards --- */
.wp-block-heading,
h3.wp-block-heading {
    margin-top: 0 !important;
}