/* ==========================================================================
   Get Reading Right v2 - Component Styles
   BEM-prefixed classes to override Elementor and third-party CSS.
   Loaded AFTER Tailwind (compiled or CDN) for highest specificity.
   ========================================================================== */

/* ==========================================================================
   0. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
    --color-primary: #3B5DA7;
    --color-primary-dark: #2D4A8A;
    --color-accent: #C5A855;
    --color-accent-hover: #B89845;
    --color-text-body: #1a1a1a;
    --color-text-heading: #2D4A8A;
    --color-text-nav: #374151;
    --grr2-topbar-height: 44px;
    --grr2-navbar-height: 56px;
    --grr2-header-height: 100px; /* topbar + navbar */
}

/* --- WooCommerce Store Notice --- */
.woocommerce-store-notice.demo_store,
p.demo_store {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--color-primary-dark);
    color: #fff;
    text-align: center;
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}
.woocommerce-store-notice.demo_store a,
p.demo_store a {
    color: #fff;
    text-decoration: underline;
    margin-left: 0.75rem;
    font-weight: 600;
}
.woocommerce-store-notice.demo_store a:hover,
p.demo_store a:hover {
    color: var(--color-accent);
}
/* Push header down when store notice is active */
.woocommerce-demo-store .site-header {
    top: 40px;
}
.woocommerce-demo-store.grr2-theme:not(.home) {
    padding-top: calc(var(--grr2-header-height) + 40px);
}
.woocommerce-demo-store.grr2-theme.home .front-page-sections {
    padding-top: 40px;
}
/* Admin bar + store notice combined */
.admin-bar.woocommerce-demo-store .site-header {
    top: 72px;
}
@media screen and (max-width: 782px) {
    .admin-bar.woocommerce-demo-store .site-header {
        top: 86px;
    }
}

/* ==========================================================================
   1. GLOBAL RESETS & FONT FIXES
   Beat Elementor's orange text and ensure our fonts apply.
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body,
body.grr2-theme {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    color: var(--color-text-body) !important;
    background-color: #ffffff !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* White content area for all inner pages */
.grr2-content-wrap {
    background-color: white !important;
    min-height: 60vh;
}

/* Front page doesn't need the white wrapper */
.grr2-front-page-wrap {
    background-color: transparent !important;
}

/* Override Elementor's color on common elements */
.grr2-theme h1,
.grr2-theme h2,
.grr2-theme h3,
.grr2-theme h4,
.grr2-theme h5,
.grr2-theme h6 {
    color: var(--color-text-heading) !important;
}

.grr2-theme p,
.grr2-theme li,
.grr2-theme span,
.grr2-theme div,
.grr2-theme td,
.grr2-theme th,
.grr2-theme label,
.grr2-theme blockquote {
    color: inherit;
}

/* Ensure links have sensible defaults */
.grr2-theme a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.grr2-theme a:hover {
    color: var(--color-primary-dark);
}

/* Don't override footer/header link colors */
.site-footer a,
.site-header a {
    color: inherit;
}

/* Screen reader text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

/* ==========================================================================
   2. SVG ICON SIZES
   ========================================================================== */
.grr2-icon-sm {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.grr2-icon-md {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.grr2-icon-lg {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ==========================================================================
   3. RESPONSIVE HELPERS
   ========================================================================== */
@media (max-width: 767px) {
    .grr2-hide-small {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .grr2-hide-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   4. SITE HEADER (Fixed/Sticky)
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: box-shadow 0.3s ease;
}

/* Push below WP admin bar when logged in */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Body padding replaces the old spacer div — bulletproof with fixed header */
body.grr2-theme:not(.home) {
    padding-top: var(--grr2-header-height);
}

.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* --- Top Bar (Blue) --- */
.grr2-topbar {
    background-color: var(--color-primary) !important;
    color: white !important;
    height: var(--grr2-topbar-height);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.grr2-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

@media (min-width: 640px) {
    .grr2-topbar-inner {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .grr2-topbar-inner {
        padding: 0 2rem;
    }
}

/* Spacer on left to match logo area in navbar below */
.grr2-topbar-spacer {
    display: none;
}

.grr2-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

/* Topbar contact links */
.grr2-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.8125rem;
    white-space: nowrap;
    transition: color 0.2s ease;
    text-decoration: none !important;
}

.grr2-topbar-link:hover {
    color: white !important;
}

.grr2-topbar-link svg {
    color: rgba(255, 255, 255, 0.7);
}

/* Topbar icon buttons (search, account) */
.grr2-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85) !important;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
    text-decoration: none !important;
}

.grr2-topbar-icon:hover {
    color: white !important;
}

/* Topbar social icons */
.grr2-topbar-social {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

.grr2-topbar-social a {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.2s ease;
    display: inline-flex;
}

.grr2-topbar-social a:hover {
    color: white !important;
}

/* --- Main Navbar (White) --- */
.grr2-navbar {
    background-color: white !important;
    height: var(--grr2-navbar-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    overflow: visible; /* Allow logo to rise into topbar */
    position: relative;
    z-index: 2; /* Above topbar so logo overlap is visible */
}

.grr2-navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
}

@media (min-width: 640px) {
    .grr2-navbar-inner {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .grr2-navbar-inner {
        padding: 0 2rem;
    }
}

/* --- Logo (in flow, overlaps topbar on desktop) --- */
.grr2-logo {
    flex-shrink: 0;
    z-index: 60;
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .grr2-logo {
        /* Visually shift logo up to center across both bars.
           The logo stays in the flex flow horizontally (aligned with content below)
           but uses relative positioning to rise into the topbar visually. */
        position: relative;
        top: calc(-0.5 * var(--grr2-topbar-height));
    }
}

.grr2-logo a {
    display: block;
    text-decoration: none !important;
}

.grr2-logo img {
    height: 88px;
    width: auto;
    display: block;
}

@media (max-width: 1023px) {
    .grr2-logo img {
        height: 50px;
    }
}

.grr2-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-dark) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

/* --- Desktop Navigation --- */
.grr2-desktop-nav {
    display: none;
}

@media (min-width: 1024px) {
    .grr2-desktop-nav {
        display: flex;
        align-items: center;
        margin-left: 1.5rem; /* Gap between logo and nav */
    }
}

.grr2-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

/* Desktop nav link (applied by the walker) */
.grr2-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-nav) !important;
    transition: color 0.2s ease;
    text-decoration: none !important;
    white-space: nowrap;
}

.grr2-nav-link:hover {
    color: var(--color-primary) !important;
}

.grr2-nav-link--active {
    color: var(--color-primary) !important;
}

/* Dropdown chevron */
.grr2-nav-chevron {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    opacity: 0.5;
}

/* --- Dropdown Menus --- */
.grr2-nav-list .menu-item-has-children {
    position: relative;
}

.grr2-nav-list .menu-item-has-children > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    z-index: 100;
    list-style: none;
}

.grr2-nav-list .menu-item-has-children:hover > .sub-menu {
    display: block;
    animation: grr2-dropdown-fade 0.2s ease;
}

.grr2-nav-list .sub-menu .menu-item a {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: #374151 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
}

.grr2-nav-list .sub-menu .menu-item a:hover {
    background-color: #F9FAFB;
    color: var(--color-primary) !important;
}

@keyframes grr2-dropdown-fade {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- Nav Cart (inline with menu items) --- */
.grr2-nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--color-text-nav) !important;
    transition: color 0.2s ease;
    text-decoration: none !important;
}

.grr2-nav-cart:hover {
    color: var(--color-primary) !important;
}

.grr2-nav-cart .grr2-cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    background-color: var(--color-accent);
    color: white !important;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

/* --- Navbar Right (CTA + Hamburger) --- */
.grr2-navbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* --- CTA Button (Gold, Sharp Edges) --- */
.grr2-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-accent) !important;
    color: white !important;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 0 !important; /* SHARP EDGES - user requested */
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none !important;
    white-space: nowrap;
}

.grr2-btn-cta:hover {
    background-color: var(--color-accent-hover) !important;
    color: white !important;
}

.grr2-btn-cta--full {
    width: 100%;
    justify-content: center;
}

/* Hamburger menu button */
.grr2-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--color-text-nav);
}

@media (min-width: 1024px) {
    .grr2-hamburger {
        display: none;
    }
}

/* --- Breadcrumbs --- */
.grr2-breadcrumbs {
    background-color: white;
}

.grr2-breadcrumbs-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
}

@media (min-width: 640px) {
    .grr2-breadcrumbs-inner {
        padding: 0.5rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .grr2-breadcrumbs-inner {
        padding: 0.5rem 2rem;
    }
}

.grr2-breadcrumb-nav {
    font-size: 0.8125rem;
    color: #6b7280;
}

.grr2-breadcrumb-nav a {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

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

.grr2-breadcrumb-sep {
    margin: 0 0.5rem;
    color: #d1d5db;
}

.grr2-breadcrumb-current {
    color: var(--color-primary-dark);
    font-weight: 500;
}

/* ==========================================================================
   5. SEARCH OVERLAY
   ========================================================================== */
.search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 200;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem;
}

.search-overlay.active {
    display: flex;
}

.grr2-search-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.grr2-search-close:hover {
    color: white;
}

.grr2-search-form {
    width: 100%;
    max-width: 640px;
    text-align: center;
}

.grr2-search-label {
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 1.5rem;
}

.grr2-search-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    font-size: 2rem;
    font-weight: 300;
    padding: 0.75rem 0 !important;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease;
}

.grr2-search-input:focus {
    border-bottom-color: white !important;
}

.grr2-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.grr2-search-hint {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* ==========================================================================
   6. MOBILE MENU
   ========================================================================== */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
}

.mobile-menu-overlay.active {
    display: block;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: white;
    z-index: 100;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.grr2-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.grr2-mobile-logo img {
    height: 36px;
    width: auto;
}

.grr2-mobile-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary-dark) !important;
}

.grr2-mobile-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #6b7280;
}

/* Mobile nav list */
.grr2-mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.grr2-mobile-nav-list .menu-item a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--color-text-nav) !important;
    font-size: 0.9375rem;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.grr2-mobile-nav-list .menu-item a:hover {
    background-color: #f9fafb;
    color: var(--color-primary) !important;
}

.grr2-mobile-nav-list .current-menu-item > a {
    color: var(--color-primary) !important;
    font-weight: 600;
}

.grr2-mobile-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.grr2-mobile-nav-list .sub-menu .menu-item a {
    padding-left: 2.5rem;
    font-size: 0.875rem;
    color: #6b7280 !important;
}

.grr2-mobile-nav-list .sub-menu .menu-item a:hover {
    color: var(--color-primary) !important;
}

/* Mobile CTA */
.grr2-mobile-cta {
    padding: 1.25rem;
}

/* Mobile account link */
.grr2-mobile-account {
    padding: 0 1.25rem 1.25rem;
}

.grr2-mobile-account a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-nav) !important;
    font-size: 0.9375rem;
    text-decoration: none !important;
}

.grr2-mobile-account a:hover {
    color: var(--color-primary) !important;
}

/* ==========================================================================
   7. SIDEBAR
   ========================================================================== */
.sidebar-menu .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu .menu-item a {
    display: block;
    padding: 0.625rem 1rem;
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
    text-decoration: none !important;
}

.sidebar-menu .menu-item a:hover,
.sidebar-menu .current-menu-item > a,
.sidebar-menu .current-menu-ancestor > a {
    color: var(--color-primary) !important;
}

.sidebar-menu .current-menu-item > a {
    font-weight: 700;
}

.sidebar-menu .current-menu-ancestor > a {
    font-weight: 600;
}

.sidebar-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu .sub-menu .menu-item a {
    padding-left: 2rem;
    font-size: 0.9rem;
}

.sidebar-menu .sub-menu .sub-menu .menu-item a {
    padding-left: 3rem;
    font-size: 0.85rem;
}

.sidebar-menu .sub-menu .sub-menu .sub-menu .menu-item a {
    padding-left: 4rem;
    font-size: 0.8rem;
}

/* ==========================================================================
   8. FRONT PAGE SECTIONS
   ========================================================================== */
.front-page-sections {
    overflow-y: auto;
    height: 100vh;
    height: 100dvh;
}

.front-page-sections.snap-proximity {
    scroll-snap-type: y proximity;
}

.front-page-sections.snap-mandatory {
    scroll-snap-type: y mandatory;
}

/* Let the footer snap into view as the last item */
.front-page-sections > .site-footer {
    scroll-snap-align: end;
}

.front-page-section {
    scroll-snap-align: start;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Dot navigation */
.dot-nav {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dot-nav-item {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-primary-dark);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.dot-nav-item.active,
.dot-nav-item:hover {
    background: var(--color-primary-dark);
}

/* Full-bleed hero video (fills section like a background image) */
.grr2-section-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Section reveal animation */
.section-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section media container: needs relative for overlay links */
.grr2-section-img-box {
    position: relative;
}


/* Section link: invisible wrapper - no visual change to heading or image */
a.grr2-section-link {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}
a.grr2-section-link:hover,
a.grr2-section-link:focus {
    color: inherit !important;
    text-decoration: none !important;
}

/* Overlay link: covers the entire media box (video or bg-image) */
a.grr2-section-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Auto-fit heading: CSS fallback before JS kicks in */
.grr2-autofit-heading {
    white-space: nowrap;
    overflow: hidden;
    font-size: clamp(1rem, 4vw, 4rem);
}

/* --- Mobile front page --- */
@media (max-width: 1023px) {
    /* Keep scroll-snap container, use proximity for forgiving snap */
    .front-page-sections.snap-proximity,
    .front-page-sections.snap-mandatory {
        scroll-snap-type: y proximity;
    }

    /* All sections full viewport */
    .front-page-section {
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* Hero: offset content below fixed header */
    .front-page-section:first-child {
        padding-top: var(--grr2-header-height);
    }

    /* Reduce inner padding so content fits in one viewport */
    .front-page-section .py-20 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Split layouts: show image BEFORE text on mobile */
    .grr2-split-layout {
        flex-direction: column-reverse !important;
        gap: 1.5rem !important;
    }

    /* Reset custom image container sizing for mobile */
    .grr2-section-img-box {
        max-width: none !important;
        width: 100% !important;
    }

    /* Regular image containers: natural aspect, capped height */
    .grr2-section-img-box:not([role="img"]) {
        height: auto !important;
    }

    .grr2-section-img-box img {
        width: 100% !important;
        height: auto !important;
        max-height: 40vh;
        object-fit: contain !important;
    }

    /* Background-image containers: proportional height */
    .grr2-section-img-box[role="img"] {
        height: 50vw !important;
        max-height: 280px;
    }

    /* Hide dot nav */
    .dot-nav {
        display: none !important;
    }

    /* Auto-fit heading: allow wrapping on mobile */
    .grr2-autofit-heading {
        white-space: normal;
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
}

/* Full-width page content (WC cart, checkout, my account) */
.grr2-page-content-fullwidth {
    width: 100%;
}

/* ==========================================================================
   9. WOOCOMMERCE - SHOP / ARCHIVE LAYOUT
   ========================================================================== */

/* --- Shop Header (full-width, above sidebar+grid) --- */
.grr2-shop-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.grr2-shop-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--color-text-heading) !important;
    margin: 0 0 0.25rem 0 !important;
}

.grr2-archive-description {
    font-size: 0.9375rem;
    color: #6b7280;
    margin-bottom: 0;
    line-height: 1.6;
}

.grr2-archive-description p:last-child {
    margin-bottom: 0;
}

/* Collapsible description wrapper */
.grr2-archive-desc-wrap {
    position: relative;
    margin-bottom: 0;
}

/* Short descriptions: just show naturally, no extra spacing */
.grr2-archive-desc-wrap.is-short .grr2-archive-desc-content {
    max-height: none;
}

.grr2-archive-desc-content {
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.grr2-archive-desc-wrap.is-collapsed .grr2-archive-desc-content {
    max-height: 4.8em; /* ~3 lines at 1.6 line-height */
}

/* Gradient fade overlay when collapsed */
.grr2-archive-desc-fade {
    display: none;
    position: absolute;
    bottom: 2rem; /* above the toggle button */
    left: 0;
    right: 0;
    height: 2.5em;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    pointer-events: none;
}

.grr2-archive-desc-wrap.is-collapsed .grr2-archive-desc-fade {
    display: block;
}

/* Toggle button */
.grr2-archive-desc-toggle {
    display: inline-block;
    margin-top: 0.25rem;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.grr2-archive-desc-toggle:hover {
    color: var(--color-primary-dark);
}

/* Show/hide the correct label */
.grr2-archive-desc-wrap.is-collapsed .grr2-desc-hide {
    display: none;
}

.grr2-archive-desc-wrap:not(.is-collapsed) .grr2-desc-show {
    display: none;
}

/* Description + search side by side */
.grr2-shop-header-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.grr2-shop-header-row .grr2-archive-desc-wrap {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.grr2-shop-header-row .grr2-product-search {
    flex-shrink: 0;
    margin-top: 0;
}

@media (max-width: 767px) {
    .grr2-shop-header-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .grr2-shop-header-row .grr2-product-search {
        width: 100%;
        max-width: none;
    }
}

/* Product search bar */
.grr2-product-search {
    position: relative;
    max-width: 480px;
    width: 260px;
}

.grr2-product-search input[type="search"] {
    width: 100%;
    padding: 0.625rem 3rem 0.625rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--color-text-body);
    background: white;
    outline: none;
    transition: border-color 0.2s ease;
}

.grr2-product-search input[type="search"]:focus {
    border-color: var(--color-primary);
}

.grr2-product-search button {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
}

.grr2-product-search button:hover {
    color: var(--color-primary);
}

/* --- Sidebar + Products flex row --- */
.grr2-shop-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .grr2-shop-layout {
        flex-direction: row;
        gap: 2.5rem;
    }
}

.grr2-shop-content {
    flex: 1;
    min-width: 0;
}

/* Toolbar: result count + sorting */
.grr2-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.grr2-shop-toolbar .woocommerce-result-count {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0;
}

.grr2-shop-toolbar .woocommerce-ordering select {
    padding: 0.375rem 2rem 0.375rem 0.625rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-body);
    background-color: white;
    cursor: pointer;
}

/* Product grid */
.grr2-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .grr2-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Product cards */
.wc-product-card {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #f3f4f6;
}

.wc-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Add to Cart button on product cards */
.wc-product-card .button,
.wc-product-card .add_to_cart_button,
.wc-product-card .product_type_simple,
.wc-product-card .product_type_variable {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--color-accent);
    color: white !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none !important;
}

.wc-product-card .button:hover,
.wc-product-card .add_to_cart_button:hover {
    background-color: var(--color-accent-hover);
}

/* Hide default "View cart" link on cards — we use a flash notification instead */
.wc-product-card .added_to_cart {
    display: none !important;
}

/* Cart flash notification bar */
.grr2-cart-flash {
    position: fixed;
    top: var(--grr2-header-height, 100px);
    left: 0;
    right: 0;
    z-index: 40;
    background-color: #ecfdf5;
    border-bottom: 1px solid #a7f3d0;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.admin-bar .grr2-cart-flash {
    top: calc(var(--grr2-header-height, 100px) + 32px);
}

@media (max-width: 782px) {
    .admin-bar .grr2-cart-flash {
        top: calc(var(--grr2-header-height, 100px) + 46px);
    }
}

.grr2-cart-flash.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.grr2-cart-flash-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.grr2-cart-flash-message {
    font-size: 0.9rem;
    color: #065f46;
    font-weight: 500;
}

.grr2-cart-flash-message strong {
    font-weight: 700;
}

.grr2-cart-flash-btn {
    flex-shrink: 0;
    background-color: var(--color-primary);
    color: white !important;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.grr2-cart-flash-btn:hover {
    background-color: var(--color-primary-dark);
}

/* Sale badge */
.grr2-sale-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: var(--color-accent);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
}

/* WooCommerce Pagination */
.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 2rem;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}

/* WooCommerce result count / ordering float reset */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    float: none !important;
    margin: 0 !important;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: var(--color-primary) !important;
    background-color: #f8fafc;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* "Continue shopping" / action button — always on the right */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
    background-color: var(--color-primary);
    color: white !important;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    float: none !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
    background-color: var(--color-primary-dark);
}

/* ==========================================================================
   10. WOOCOMMERCE - SINGLE PRODUCT (Apple-Inspired)
   ========================================================================== */

/* Overall container */
.grr2-single-product {
    /* Clean, no extra background */
}

/* Full-width product title above image+summary */
.grr2-product-title-bar {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Hide WC gallery zoom trigger (magnifying glass icon) */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Top section: gallery + summary side by side */
.grr2-product-top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 1024px) {
    .grr2-product-top {
        flex-direction: row;
        gap: 3.5rem;
        align-items: flex-start;
    }
}

/* Gallery (left side) */
.grr2-product-gallery {
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .grr2-product-gallery {
        width: 55%;
    }
}

/* Remove any grey background WC adds to gallery wrapper */
.grr2-product-gallery .woocommerce-product-gallery {
    margin: 0 !important;
    padding: 0 !important;
}

.grr2-product-gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}

.grr2-product-gallery .woocommerce-product-gallery__image img,
.grr2-product-gallery .woocommerce-product-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.75rem;
}

/* Gallery thumbnails */
.grr2-product-gallery .flex-control-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    list-style: none;
    padding: 0;
}

.grr2-product-gallery .flex-control-thumbs li {
    width: 64px;
    height: 64px;
    border-radius: 0.375rem;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.grr2-product-gallery .flex-control-thumbs li:hover,
.grr2-product-gallery .flex-control-thumbs li .flex-active {
    border-color: var(--color-primary);
}

.grr2-product-gallery .flex-control-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Summary (right side) */
.grr2-product-summary {
    flex: 1;
    min-width: 0;
}

@media (min-width: 1024px) {
    .grr2-product-summary-inner {
        position: sticky;
        top: 120px; /* Below fixed header */
    }
}

/* Product title */
.grr2-product-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-text-heading) !important;
    line-height: 1.3;
    margin: 0 0 0.75rem 0 !important;
}

@media (min-width: 1024px) {
    .grr2-product-title {
        font-size: 1.75rem !important;
    }
}

/* Product price */
.grr2-product-price {
    margin-bottom: 1rem;
}

.grr2-product-price .price,
.grr2-product-price p.price,
.grr2-product-price span.price {
    color: var(--color-primary-dark) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

.grr2-product-price del {
    color: #9ca3af !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

.grr2-product-price ins {
    text-decoration: none;
}

/* Product description (in summary, above buy button) */
.grr2-product-description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.grr2-product-description p:last-child {
    margin-bottom: 0;
}

.grr2-product-description ul,
.grr2-product-description ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.grr2-product-description ul {
    list-style: disc;
}

.grr2-product-description ol {
    list-style: decimal;
}

.grr2-product-description li {
    margin-bottom: 0.25rem;
}

/* Short description */
.grr2-product-short-desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

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

/* Add to Cart section */
.grr2-product-add-to-cart {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.grr2-product-add-to-cart .cart {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Quantity input */
.grr2-product-add-to-cart .quantity .qty,
.woocommerce .quantity .qty {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    text-align: center;
    font-size: 0.9375rem;
}

/* Add to Cart button */
.single_add_to_cart_button,
button.single_add_to_cart_button {
    background-color: var(--color-accent) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s ease !important;
    text-transform: none !important;
    flex: 1;
    text-align: center;
}

.single_add_to_cart_button:hover {
    background-color: var(--color-accent-hover) !important;
}

/* Additional info (attributes table, below buy button) */
.grr2-product-additional-info {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

/* Hide the "Additional information" heading */
.grr2-product-additional-info h2 {
    display: none !important;
}

/* Attribute table spacing: label <space> value */
.grr2-product-additional-info table.woocommerce-product-attributes {
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

.grr2-product-additional-info table.woocommerce-product-attributes th,
.grr2-product-additional-info table.woocommerce-product-attributes td {
    padding: 0.5rem 0;
    border: none;
    font-size: 0.875rem;
    vertical-align: top;
}

.grr2-product-additional-info table.woocommerce-product-attributes th {
    font-weight: 600;
    color: var(--color-text-body);
    padding-right: 1rem;
    white-space: nowrap;
}

.grr2-product-additional-info table.woocommerce-product-attributes td {
    color: #4b5563;
}

.grr2-product-additional-info table.woocommerce-product-attributes td p {
    margin: 0;
}

/* Product meta (SKU, categories) */
.grr2-product-meta {
    font-size: 0.8125rem;
    color: #9ca3af;
    line-height: 1.8;
}

.grr2-product-meta .posted_in a,
.grr2-product-meta .tagged_as a,
.grr2-product-meta .sku_wrapper {
    color: #6b7280 !important;
}

.grr2-product-meta .posted_in a:hover,
.grr2-product-meta .tagged_as a:hover {
    color: var(--color-primary) !important;
}

/* Product tabs section */
.grr2-product-tabs {
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
    margin-bottom: 2rem;
}

.woocommerce-tabs .wc-tabs {
    list-style: none;
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.woocommerce-tabs .wc-tabs li {
    margin: 0;
}

.woocommerce-tabs .wc-tabs li a {
    display: block;
    padding: 0.625rem 1.25rem;
    color: #6b7280 !important;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
    text-decoration: none !important;
}

.woocommerce-tabs .wc-tabs li.active a {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary);
}

.woocommerce-tabs .wc-tab {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #4b5563;
}

.woocommerce-tabs .wc-tab h2 {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
}

/* Related products section */
.grr2-product-related {
    border-top: 1px solid #e5e7eb;
    padding-top: 2rem;
}

.grr2-product-related .related.products > h2 {
    font-size: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.grr2-product-related .products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .grr2-product-related .products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* WooCommerce Price (global) */
.woocommerce .price,
.woocommerce p.price,
.woocommerce span.price {
    color: var(--color-primary-dark) !important;
    font-weight: 700;
}

/* WooCommerce Breadcrumbs (header override) */
.woocommerce-breadcrumb {
    font-size: 0.8125rem;
    color: #6b7280;
}

.woocommerce-breadcrumb a {
    color: #6b7280 !important;
    text-decoration: none !important;
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-primary) !important;
}

/* WooCommerce images - remove grey background from gallery */
.woocommerce-product-gallery {
    background: transparent !important;
}

.woocommerce div.product div.images {
    background: transparent !important;
}

/* =====================================================
   CRITICAL: Override WC layout stylesheet float layout.
   WC's woocommerce-layout.css sets float:left/right and
   width:48% on .images and .summary which breaks our flex.
   ===================================================== */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
}

/* Remove WC default notices wrapper empty spacing */
.woocommerce-notices-wrapper:empty {
    display: none;
}

/* ==========================================================================
   CATEGORY GRID (Shop page display: Categories)
   ========================================================================== */
.grr2-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .grr2-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

.grr2-category-card {
    display: block;
    background: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none !important;
}

.grr2-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.grr2-category-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f9fafb;
}

.grr2-category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.grr2-category-card:hover .grr2-category-card-image img {
    transform: scale(1.05);
}

.grr2-category-card-info {
    padding: 0.875rem 1rem;
}

.grr2-category-card-info h3 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--color-text-heading) !important;
    margin: 0 0 0.25rem 0 !important;
    line-height: 1.3;
}

.grr2-category-count {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ==========================================================================
   CART PAGE STYLING
   ========================================================================== */
.woocommerce-cart .woocommerce {
    width: 100%;
}

/* Cart table */
.woocommerce table.shop_table {
    width: 100% !important;
    border-collapse: collapse;
    border: none !important;
    border-radius: 0 !important;
}

/* Flex rows to reorder: image, name, remove, price, qty, subtotal */
.woocommerce-cart table.shop_table thead tr,
.woocommerce-cart table.shop_table .cart_item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

/* Remove individual cell borders — the row handles it */
.woocommerce-cart table.shop_table .cart_item td,
.woocommerce-cart table.shop_table thead th {
    border: none !important;
}

/* Actions row: full width, right-aligned, NOT flex-reordered */
.woocommerce-cart table.shop_table tbody tr:has(td.actions) {
    display: block !important;
}

.woocommerce-cart table.shop_table td.actions {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    padding: 1.5rem 1rem !important;
    border: none !important;
}

.woocommerce-cart table.shop_table .product-thumbnail { order: 1; }
.woocommerce-cart table.shop_table .product-name     { order: 2; flex: 1; }
.woocommerce-cart table.shop_table .product-remove    { order: 3; width: 3rem; text-align: center; }
.woocommerce-cart table.shop_table .product-price     { order: 4; width: 8rem; text-align: right; }
.woocommerce-cart table.shop_table .product-quantity  { order: 5; width: 6rem; text-align: center; }
.woocommerce-cart table.shop_table .product-subtotal  { order: 6; width: 9rem; text-align: right; }

/* Hide the empty remove & thumbnail headers completely */
.woocommerce-cart table.shop_table thead .product-remove,
.woocommerce-cart table.shop_table thead .product-thumbnail {
    display: none !important;
}

/* Header product-name takes up the space of thumbnail + name + remove */
.woocommerce-cart table.shop_table thead .product-name {
    flex: 1;
}

.woocommerce table.shop_table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 0.875rem 1rem !important;
    border-bottom: 2px solid #e5e7eb !important;
    border-top: none !important;
    background: transparent !important;
    text-align: left;
}

.woocommerce table.shop_table td {
    padding: 1.25rem 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    border-top: none !important;
    vertical-align: middle;
    font-size: 0.9375rem;
}

.woocommerce table.shop_table .product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 0.375rem;
    border: 1px solid #f3f4f6;
}

.woocommerce table.shop_table .product-name a {
    color: var(--color-text-heading) !important;
    font-weight: 500;
}

.woocommerce table.shop_table .product-name a:hover {
    color: var(--color-primary) !important;
}

.woocommerce table.shop_table .product-remove a {
    color: #ef4444 !important;
    font-size: 1.25rem;
    font-weight: 400;
    opacity: 0.6;
    transition: opacity 0.2s ease, font-weight 0.2s ease;
    text-decoration: none !important;
}

.woocommerce table.shop_table .product-remove a:hover {
    color: #ef4444 !important;
    opacity: 1;
    font-weight: 700;
}

/* Cart quantity */
.woocommerce table.shop_table .quantity .qty {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    text-align: center;
}

/* Cart actions row — right-aligned, not flex */
.woocommerce-cart table.shop_table td.actions .coupon {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    float: none !important;
    margin: 0 !important;
}

.woocommerce-cart table.shop_table td.actions .coupon label {
    display: none;
}

.woocommerce-cart table.shop_table td.actions .coupon input[type="text"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    width: 180px;
}

.woocommerce-cart table.shop_table td.actions .coupon .button,
.woocommerce-cart table.shop_table td.actions > .button {
    background-color: var(--color-primary) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border-radius: 0.25rem !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-transform: none !important;
    float: none !important;
    white-space: nowrap;
}

.woocommerce-cart table.shop_table td.actions > .button {
    margin-top: 0.75rem;
}

.woocommerce-cart table.shop_table td.actions .coupon .button:hover,
.woocommerce-cart table.shop_table td.actions > .button:hover {
    background-color: var(--color-primary-dark) !important;
}

/* Cart totals - full width in full-width layout */
.woocommerce .cart_totals {
    width: 100% !important;
    max-width: none;
}

.woocommerce .cart_totals h2 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.woocommerce .cart_totals table {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.woocommerce .cart_totals table th {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--color-text-body) !important;
    padding: 0.875rem 1rem !important;
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    width: 140px;
    vertical-align: top;
}

.woocommerce .cart_totals table td {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 0.9375rem;
}

.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td {
    font-weight: 700;
    font-size: 1rem;
    border-bottom: none !important;
}

/* Proceed to checkout button */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.checkout-button {
    display: block !important;
    background-color: var(--color-accent) !important;
    color: white !important;
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: center;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
    margin-top: 1rem;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.checkout-button:hover {
    background-color: var(--color-accent-hover) !important;
}

/* Cart collaterals: put cart totals first, cross-sells below */
.woocommerce-cart .cart-collaterals {
    display: flex;
    flex-direction: column;
}

.woocommerce-cart .cart-collaterals .cart_totals {
    order: 1;
}

.woocommerce-cart .cart-collaterals .cross-sells {
    order: 2;
}

/* Cross-sells on cart page */
.woocommerce-cart .cross-sells {
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.woocommerce-cart .cross-sells > h2 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.woocommerce-cart .cross-sells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
}

@media (max-width: 768px) {
    .woocommerce-cart .cross-sells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.woocommerce-cart .cross-sells ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.woocommerce-cart .cross-sells ul.products li.product a img {
    width: 100% !important;
    height: 150px !important;
    object-fit: contain;
    background: #f9fafb;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.woocommerce-cart .cross-sells ul.products li.product a h2,
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 0.25rem !important;
    line-height: 1.3 !important;
}

.woocommerce-cart .cross-sells ul.products li.product .price {
    font-size: 0.85rem !important;
    color: var(--color-primary-dark) !important;
    font-weight: 700 !important;
}

.woocommerce-cart .cross-sells ul.products li.product .button {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
    margin-top: 0.5rem !important;
}

/* Shipping calculator */
.woocommerce .shipping-calculator-button {
    font-size: 0.8125rem;
    color: var(--color-primary) !important;
}

/* Return to shop button */
.woocommerce .return-to-shop a {
    background-color: var(--color-primary) !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.25rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   WOOCOMMERCE FORMS & MY ACCOUNT
   ========================================================================== */

/* --- Global WC Form Inputs --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce input[type="url"],
.woocommerce select,
.woocommerce textarea {
    width: 100%;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    font-size: 0.9375rem !important;
    color: var(--color-text-body) !important;
    background-color: white !important;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 93, 167, 0.1) !important;
}

/* Labels */
.woocommerce form .form-row label,
.woocommerce label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-body);
    margin-bottom: 0.375rem;
}

.woocommerce form .form-row label .required {
    color: #ef4444;
}

/* Form rows */
.woocommerce form .form-row {
    margin-bottom: 1rem;
}

/* --- WC Buttons (global) --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
    display: inline-block;
    background-color: var(--color-primary) !important;
    color: white !important;
    border: none !important;
    padding: 0.625rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 0.25rem !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none !important;
    text-transform: none !important;
    line-height: 1.5;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
    background-color: var(--color-primary-dark) !important;
    color: white !important;
}

/* Alt buttons (e.g., "Apply coupon") */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt {
    background-color: var(--color-accent) !important;
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover {
    background-color: var(--color-accent-hover) !important;
}

/* Keep Add to Cart button sharp-edged */
.single_add_to_cart_button,
button.single_add_to_cart_button {
    border-radius: 0 !important;
}

/* --- My Account Login/Register --- */
.woocommerce-account .woocommerce {
    width: 100%;
}

/* Single-column centered login/register (toggle between them via JS) */
.woocommerce .col2-set {
    display: block;
    max-width: 480px;
    margin: 0 auto;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 2rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.woocommerce .col2-set h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

/* Login/Register toggle link */
.grr2-login-register-toggle {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9375rem;
    color: #6b7280;
}

.grr2-login-register-toggle a {
    color: var(--color-primary) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.grr2-login-register-toggle a:hover {
    color: var(--color-primary-dark) !important;
    text-decoration: underline !important;
}

/* Remember me checkbox */
.woocommerce form.login .form-row label.woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 0.875rem;
    cursor: pointer;
}

.woocommerce form.login .form-row label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

/* Lost password link */
.woocommerce .woocommerce-LostPassword a,
.woocommerce .lost_password a {
    font-size: 0.8125rem;
    color: var(--color-primary) !important;
}

.woocommerce .woocommerce-LostPassword a:hover,
.woocommerce .lost_password a:hover {
    color: var(--color-primary-dark) !important;
}

/* --- My Account Dashboard (logged in) --- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 220px;
        float: left;
        margin-right: 2.5rem;
        margin-bottom: 0;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #374151 !important;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #f9fafb;
    color: var(--color-primary) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--color-primary);
    color: white !important;
    font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content {
    overflow: hidden;
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        margin-left: calc(220px + 2.5rem);
    }
}

/* --- Checkout Styling --- */
.woocommerce-checkout .woocommerce {
    width: 100%;
}

/* Two-column checkout: billing left, order/payment right */
.woocommerce-checkout .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: none !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr;
    }
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Billing/shipping details card */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem !important;
}

/* Checkout form headings */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--color-primary-dark) !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

/* Checkout form fields */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-selection {
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(59, 93, 167, 0.15) !important;
    outline: none !important;
}

/* Coupon & login toggle bars */
.woocommerce form.checkout_coupon,
.woocommerce form.login {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem;
}

/* Order review section */
.woocommerce-checkout #order_review_heading {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--color-primary-dark) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

/* Order review table */
.woocommerce table.woocommerce-checkout-review-order-table {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

.woocommerce table.woocommerce-checkout-review-order-table thead {
    background-color: #f8fafc;
}

.woocommerce table.woocommerce-checkout-review-order-table thead th {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
    color: #6b7280 !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.woocommerce table.woocommerce-checkout-review-order-table td,
.woocommerce table.woocommerce-checkout-review-order-table th {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    border-top: none !important;
    font-size: 0.9rem;
}

.woocommerce table.woocommerce-checkout-review-order-table .cart_item td {
    color: #374151;
}

.woocommerce table.woocommerce-checkout-review-order-table tfoot th {
    text-transform: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    letter-spacing: normal;
}

.woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce table.woocommerce-checkout-review-order-table tfoot .order-total td {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    background-color: #f8fafc;
    border-bottom: none !important;
}

/* Payment methods section */
.woocommerce-checkout #payment {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem !important;
    margin-top: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.25rem 0 !important;
    border: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem !important;
    margin-bottom: 0.625rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
    margin-bottom: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
    border-color: #b0bfd8;
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
    background-color: #f0f4ff;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #111827 !important;
    cursor: pointer;
    display: inline !important;
    margin-left: 0.5rem;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--color-primary);
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: middle;
    cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
    background: #f0f4ff !important;
    border-radius: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.875rem 1rem !important;
    font-size: 0.85rem;
    color: #374151;
    border: none !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none !important;
}

/* Payment fields (Stripe etc.) */
.woocommerce-checkout #payment .form-row {
    margin-bottom: 0.75rem;
}

.woocommerce-checkout #payment .form-row label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.25rem;
}

/* Place order button */
.woocommerce #place_order {
    background-color: var(--color-accent) !important;
    color: white !important;
    border: none !important;
    padding: 1rem 2rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 0.5rem !important;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-transform: none !important;
    letter-spacing: 0.01em;
    margin-top: 1rem;
}

.woocommerce #place_order:hover {
    background-color: var(--color-accent-hover) !important;
    transform: translateY(-1px);
}

/* Terms & conditions checkbox area */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Privacy policy text */
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer a {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.2s ease;
    text-decoration: none !important;
}

.site-footer a:hover {
    color: white !important;
}

/* Ensure footer headings stay white */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: white !important;
}

/* Ensure footer text stays light */
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer div {
    color: inherit;
}

/* Constrain footer logo size */
.site-footer .grr2-footer-logo img,
.site-footer .custom-logo {
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
}

/* ==========================================================================
   12. SIDEBAR
   ========================================================================== */
.grr2-sidebar-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-dark) !important;
    padding: 0.75rem 1rem 0.5rem;
    margin: 0;
    text-align: left;
}

.grr2-sidebar-heading a {
    color: inherit !important;
    text-decoration: none !important;
}

.grr2-sidebar-heading a:hover {
    text-decoration: underline !important;
}

/* Category list in sidebar (WooCommerce fallback) */
.sidebar-menu .cat-item a {
    display: block;
    padding: 0.5rem 1rem;
    color: #374151 !important;
    font-size: 0.875rem;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-menu .cat-item a:hover {
    background-color: #f9fafb;
    color: var(--color-primary) !important;
}

.sidebar-menu .cat-item.current-cat > a {
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* ==========================================================================
   13. CONTENT CARDS & PAGE GRIDS
   Re-usable card components for resource pages and navigation cards.
   ========================================================================== */

/* --- Content wrapper --- */
.grr-content {
    max-width: 900px;
    margin: 0 auto;
}

/* --- Typography defaults for content pages --- */
.grr-content p {
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.grr-content h2 {
    color: var(--color-primary-dark);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 0;
}

.grr-content h2.grr-title-lg {
    font-size: 1.6rem;
}

.grr-content h2[id] {
    padding-top: 1rem;
}

.grr-content h3 {
    color: var(--color-primary-dark);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-top: 0;
}

.grr-content a {
    font-weight: 600;
}

.grr-intro {
    font-size: 1.15rem;
    margin-bottom: 2rem;
}

.grr-intro strong {
    color: var(--color-primary-dark);
}

.grr-jump-to {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.grr-subtitle {
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* --- Hero section (centered intro with title + text) --- */
.grr-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.grr-hero-title {
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.grr-hero-text {
    font-size: 1.15rem;
    max-width: 750px;
    margin: 0 auto;
}

/* --- Stats row (centered big numbers) --- */
.grr-stats-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.grr-stat {
    text-align: center;
}

.grr-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary-dark);
}

.grr-stat-label {
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 500;
}

/* --- Stat cards (region/country stats) --- */
.grr-stat-card {
    background: #F9FAFB;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
}

.grr-stat-card--centered {
    text-align: center;
    padding: 1.25rem;
}

.grr-stat-card .grr-stat-number {
    font-size: 2rem;
}

.grr-stat-card--centered .grr-stat-number {
    font-size: 1.75rem;
}

.grr-stat-card .grr-stat-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.grr-stat-card .grr-stat-desc {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.grr-stat-card--centered .grr-stat-desc {
    font-size: 0.8rem;
}

/* --- Section wrapper (for grouped content blocks) --- */
.grr-section {
    margin-bottom: 2.5rem;
}

/* --- Grid layouts --- */
.grr-grid {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.grr-grid-1 { grid-template-columns: 1fr; }
.grr-grid-2 { grid-template-columns: repeat(2, 1fr); }
.grr-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {
    .grr-grid-2,
    .grr-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* --- Base card (hover lift + stretched link) --- */
.grr-card {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.grr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(59, 93, 167, 0.15);
}

.grr-card a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* --- Glass card variant (frosted image header) --- */
.grr-card-glass {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
}

.grr-card-glass .grr-card-img {
    position: relative;
    overflow: hidden;
    height: 160px;
}

.grr-card-glass .grr-card-img img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    filter: blur(3px);
    transform: scale(1.2);
}

.grr-card-glass .grr-frost {
    position: absolute;
    inset: 0;
    transition: background 0.3s ease;
    background: linear-gradient(
        135deg,
        rgba(50, 130, 220, 0.15) 0%,
        rgba(90, 170, 240, 0.12) 35%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(90, 170, 240, 0.12) 65%,
        rgba(50, 130, 220, 0.15) 100%
    );
}

.grr-card-glass:hover .grr-frost {
    background: linear-gradient(
        135deg,
        rgba(50, 130, 220, 0.06) 0%,
        rgba(90, 170, 240, 0.04) 35%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(90, 170, 240, 0.04) 65%,
        rgba(50, 130, 220, 0.06) 100%
    );
}

.grr-card-glass .grr-card-body {
    padding: 1rem;
}

.grr-card-glass .grr-card-body a {
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
    font-size: 1rem;
}

.grr-card-glass .grr-card-body p {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.35rem;
    line-height: 1.5;
}

/* --- Text card variant (navigation / link cards) --- */
.grr-card-text {
    padding: 1.5rem;
    background: #F9FAFB;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
}

.grr-card-text a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.grr-card-text > span {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.6;
}

/* Part label (Part One, Part Two, etc.) */
.grr-card-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.grr-card-label--dark {
    color: var(--color-primary-dark);
}

.grr-card-label--darker {
    color: #1E3A6E;
}

/* --- Card background variants --- */
.grr-card-text--warm {
    background: #FDF8F0;
}

.grr-card-text--purple {
    background: #F0E8F8;
}

/* --- CTA box --- */
.grr-cta-box {
    background: #FDF8F0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
}

.grr-cta-box p {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.grr-cta-box strong {
    color: var(--color-primary-dark);
}

.grr-cta-box a {
    color: var(--color-primary);
    font-weight: 600;
}

/* --- Gold-bordered list item --- */
.grr-gold-item {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-accent);
}

.grr-gold-item .grr-gold-title {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.grr-gold-item .grr-gold-meta {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.6;
}

/* --- Divider --- */
hr.grr-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2.5rem 0;
}

/* --- Divider variant: tight top margin (for stacked sections) --- */
hr.grr-divider--tight {
    margin-top: 0;
}

/* --- Blockquote box --- */
.grr-quote-box {
    background: #F9FAFB;
    border-radius: 0.75rem;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 2.5rem;
}

.grr-quote-box blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.grr-quote-box blockquote p {
    font-size: 1.15rem;
    color: #1a1a1a;
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 1rem;
}

.grr-quote-box blockquote footer {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

/* --- Highlight box (gradient background) --- */
.grr-highlight-box {
    background: linear-gradient(135deg, #F0E8F8, #FDF8F0);
    border-radius: 0.75rem;
    padding: 2rem;
    border: 1px solid #e5e7eb;
}

.grr-highlight-box h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* --- Warning/note box --- */
.grr-warning-box {
    background: #FEF9C3;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
}

.grr-warning-box p {
    color: #854d0e;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* --- App card (recommended apps page) --- */
.grr-app-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grr-app-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(59, 93, 167, 0.1);
}

.grr-app-card h3 a {
    text-decoration: none;
    color: var(--color-primary-dark);
}

.grr-app-card h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
}

.grr-app-icon {
    width: 80px;
    height: 80px;
    border-radius: 1rem;
    flex-shrink: 0;
}

.grr-app-card h3 {
    margin: 0 0 0.5rem;
}

/* --- Tag badges --- */
.grr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.grr-tag {
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    background: #F9FAFB;
    color: #4b5563;
}

.grr-tag--green {
    background: #F0FDF4;
    color: #166534;
}

.grr-tag--blue {
    background: #DBEAFE;
    color: #1e40af;
}

.grr-tag--yellow {
    background: #FEF9C3;
    color: #854d0e;
}

/* ==========================================================================
   14. PHONEME PRONUNCIATION TABLE (PTP)
   ========================================================================== */

/* --- Intro layout --- */
.grr-ptp-intro {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}
.grr-ptp-intro > div:first-child { flex: 1; }
.grr-ptp-intro > div:last-child { flex: 2; }

/* --- Video embed wrapper --- */
.grr-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 0.75rem;
}
.grr-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Tab navigation --- */
.grr-ptp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
}
.grr-ptp-tab {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: #6b7280;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    background: none;
    font-size: 1rem;
    font-family: inherit;
}
.grr-ptp-tab:hover { color: var(--color-primary); }
.grr-ptp-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.grr-ptp-panel { display: none; }
.grr-ptp-panel.active { display: block; }

/* --- Unit jump links --- */
.grr-ptp-unit-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-bottom: 1rem;
}
.grr-ptp-unit-links a {
    color: var(--color-primary);
    font-weight: 500;
}

/* --- The phoneme table --- */
table.grr-ptp {
    width: 100%;
    border-collapse: collapse;
}
table.grr-ptp thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
table.grr-ptp tbody tr {
    border-bottom: 1px solid #f3f4f6;
}
table.grr-ptp tbody tr:hover {
    background-color: #f9fafb;
}
table.grr-ptp tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}
/* Unit header rows */
table.grr-ptp tr.grr-ptp-unit td {
    padding: 1rem 0.75rem 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-primary-dark);
    border-bottom: 2px solid var(--color-primary);
    background: transparent;
}
table.grr-ptp tr.grr-ptp-unit:hover { background: transparent; }
/* Phoneme column */
table.grr-ptp td:first-child {
    font-weight: 700;
    font-size: 1.1rem;
    width: 80px;
}
/* Audio play links */
table.grr-ptp a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
table.grr-ptp a:hover {
    text-decoration: underline;
}
/* Word images */
table.grr-ptp img {
    max-width: 60px;
    height: auto;
    border-radius: 0.25rem;
}

/* ==========================================================================
   15. MOBILE RESPONSIVE OVERRIDES
   ========================================================================== */

/* --- Cart table: stack on phones --- */
@media (max-width: 767px) {
    .woocommerce-cart table.shop_table thead {
        display: none;
    }

    .woocommerce-cart table.shop_table .cart_item {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem 0;
    }

    .woocommerce-cart table.shop_table .product-thumbnail {
        width: 64px;
    }
    .woocommerce-cart table.shop_table .product-thumbnail img {
        width: 64px !important;
        height: 64px !important;
    }

    .woocommerce-cart table.shop_table .product-name {
        flex: 1;
        min-width: 0;
    }

    .woocommerce-cart table.shop_table .product-remove {
        width: 2rem;
    }

    .woocommerce-cart table.shop_table .product-price,
    .woocommerce-cart table.shop_table .product-quantity,
    .woocommerce-cart table.shop_table .product-subtotal {
        width: auto;
        text-align: left;
        font-size: 0.875rem;
    }

    .woocommerce-cart table.shop_table td.actions .coupon {
        flex-direction: column;
        width: 100%;
    }
    .woocommerce-cart table.shop_table td.actions .coupon input[type="text"] {
        width: 100% !important;
    }
    .woocommerce-cart table.shop_table td.actions {
        text-align: center !important;
    }
}

/* --- Phoneme pronunciation table: mobile --- */
@media (max-width: 767px) {
    .grr-ptp-intro {
        flex-direction: column;
    }
    table.grr-ptp {
        font-size: 0.875rem;
    }
    table.grr-ptp thead {
        display: none;
    }
    table.grr-ptp td {
        padding: 0.375rem 0.25rem;
    }
    table.grr-ptp td:first-child {
        width: 50px;
        font-size: 1rem;
    }
    table.grr-ptp img {
        max-width: 40px;
    }
    .grr-ptp-tabs {
        overflow-x: auto;
    }
    .grr-ptp-tab {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }
}

/* --- Search overlay: smaller text on phones --- */
@media (max-width: 767px) {
    .grr2-search-input {
        font-size: 1.25rem !important;
    }
    .grr2-search-label {
        font-size: 1.125rem;
    }
}

/* --- WooCommerce tabs: allow wrapping --- */
@media (max-width: 767px) {
    .woocommerce-tabs .wc-tabs {
        flex-wrap: wrap;
    }
    .woocommerce-tabs .wc-tabs li a {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }
}

/* --- Footer: tighter spacing on phones --- */
@media (max-width: 767px) {
    .site-footer .grid {
        gap: 2rem;
    }
}