/**
 * Tresser Møbler — Refined Scandinavian Theme
 * Premium black & white minimalist design
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
    /* Colors — Refined Monochrome */
    --color-bg: #FAFAFA;
    --color-bg-alt: #F4F4F4;
    --color-white: #FFFFFF;
    --color-black: #111111;
    --color-gray-900: #1A1A1A;
    --color-gray-800: #2A2A2A;
    --color-gray-700: #444444;
    --color-gray-600: #666666;
    --color-gray-500: #888888;
    --color-gray-400: #AAAAAA;
    --color-gray-300: #CCCCCC;
    --color-gray-200: #E0E0E0;
    --color-gray-100: #EEEEEE;

    /* Warm accent */
    --color-warm: #F8F5F0;
    --color-warm-dark: #EDE8E0;

    /* Typography */
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing — Golden ratio inspired */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6.5rem;

    /* Layout */
    --container-max: 1280px;
    --container-wide: 1400px;
    --header-height: 80px;

    /* Borders */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
    --shadow-hover: 0 20px 50px rgba(0,0,0,0.12);

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.15s;
    --duration: 0.25s;
    --duration-slow: 0.4s;

    /* Semantic colors */
    --color-success: #16a34a;
    --color-success-bg: #dcfce7;
    --color-success-text: #166534;
    --color-info-bg: #dbeafe;
    --color-info-text: #1e40af;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;
    --color-danger: #e53935;
    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #1da851;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-black);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: var(--color-black);
    color: var(--color-white);
}

/* Focus states for accessibility */
:focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    letter-spacing: -0.01em;
}

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

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-black);
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}

a:hover {
    color: var(--color-gray-600);
}

/* Subtle underline links */
.text-link {
    position: relative;
    display: inline;
}

.text-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration) var(--ease);
}

.text-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-wide {
    max-width: var(--container-wide);
}

.container-narrow {
    max-width: 720px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-md);
    }
    .woocommerce-account .container {
        padding: 0 8px;
    }
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header,
.woocommerce .site-header,
.woocommerce-page .site-header,
.archive .site-header,
.post-type-archive-product .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    max-height: var(--header-height) !important;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    padding: 0 !important;
    margin: 0 !important;
}

/* Admin bar offset for sticky header */
.admin-bar .site-header {
    top: 32px;
}

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

.site-header .container,
.woocommerce .site-header .container,
.woocommerce-page .site-header .container {
    height: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.header-inner,
.woocommerce .header-inner,
.woocommerce-page .header-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100% !important;
    min-height: var(--header-height) !important;
    max-height: var(--header-height) !important;
    gap: 1.25rem;
    padding: 0 !important;
    margin: 0 !important;
}

.main-nav {
    flex: 1;
}

.header-actions {
    margin-left: auto;
}

.site-branding .site-logo {
    display: flex;
    align-items: center;
}

.site-branding .site-name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-black);
}

/* Navigation */
.main-nav .nav-menu {
    display: flex;
    gap: 0.625rem;
    list-style: none;
}

.main-nav .nav-link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    padding: 0.5rem 0;
    white-space: nowrap;
    transition: color var(--duration) var(--ease);
}

.main-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-black);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration) var(--ease);
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible {
    color: var(--color-black);
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-switcher {
    position: relative;
}

.switcher-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all var(--duration) var(--ease);
}

.switcher-toggle:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.switcher-flag {
    font-size: 1rem;
    line-height: 1;
}

.switcher-arrow {
    font-size: 0.5rem;
    opacity: 0.5;
    transition: transform var(--duration) var(--ease);
}

.header-switcher:hover .switcher-arrow {
    transform: rotate(180deg);
}

.switcher-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 300px;
    padding: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--duration) var(--ease);
}

.header-switcher:hover .switcher-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.switcher-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease);
}

.switcher-option:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.switcher-option.active {
    color: var(--color-black);
    font-weight: 500;
}

/* Globe Switcher (combined language + currency) */
.globe-switcher {
    position: relative;
}

.globe-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-gray-600);
    transition: all var(--duration) var(--ease);
}

.globe-toggle:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.globe-toggle svg {
    flex-shrink: 0;
}

.toggle-flag {
    font-size: 1.25rem;
    line-height: 1;
}

.toggle-chevron {
    margin-left: 2px;
    opacity: 0.5;
    transition: transform var(--duration) var(--ease);
}

.globe-switcher:hover .toggle-chevron {
    opacity: 0.8;
}

.globe-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--duration) var(--ease);
    z-index: 100;
}

.globe-switcher:hover .globe-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.globe-section {
    padding: 0.25rem 0;
}

.globe-section + .globe-section {
    border-top: 1px solid var(--color-gray-100);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

.globe-section-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    padding: 0.25rem 0.875rem;
}

.globe-options {
    list-style: none;
    margin: 0;
    padding: 0;
}

.globe-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease);
}

.globe-option:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.globe-option.active {
    color: var(--color-black);
    font-weight: 500;
}

.globe-coming-soon {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.coming-soon-tag {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray-400);
    background: var(--color-gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    margin-left: auto;
}

/* Account Dropdown */
.header-account {
    position: relative;
}

.account-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-gray-600);
    transition: all var(--duration) var(--ease);
}

.account-toggle:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 300px;
    padding: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--duration) var(--ease);
    z-index: 100;
}


.account-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-dropdown-item {
    display: block;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease);
}

.account-dropdown-item:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

/* Wishlist & Cart Dropdowns */
.header-wishlist,
.header-cart {
    position: relative;
}

.wishlist-dropdown,
.cart-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--duration) var(--ease);
    z-index: 100;
}

.header-wishlist:hover .wishlist-dropdown,
.header-cart:hover .cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-items {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.5rem;
}

.dropdown-empty {
    padding: 1rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    text-align: center;
}

.dropdown-cart-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.375rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease);
}

.dropdown-cart-item:hover {
    background: var(--color-bg-alt);
}

.dropdown-cart-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-gray-100);
}

.dropdown-cart-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dropdown-cart-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-cart-meta {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.dropdown-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--color-gray-100);
}

.dropdown-cart-total {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-black);
}

.dropdown-footer-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    text-decoration: none;
    margin-left: auto;
}

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

/* Account & Cart */
.header-account .account-link,
.header-cart .cart-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem;
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.header-cart .cart-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.account-icon,
.cart-icon {
    font-size: 1.125rem;
    line-height: 1;
}

.account-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: background var(--duration) var(--ease);
}

.mobile-menu-toggle:hover {
    background: var(--color-bg-alt);
}

.mobile-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-black);
    border-radius: 1px;
    transition: all var(--duration) var(--ease);
}

@media (max-width: 1200px) {
    .main-nav .nav-menu {
        gap: 0.375rem;
    }

    .main-nav .nav-link {
        font-size: 0.8125rem;
        padding: 0.5rem 0.25rem;
    }

    .header-inner,
    .woocommerce .header-inner,
    .woocommerce-page .header-inner {
        gap: 1rem;
    }
}

@media (max-width: 860px) {
    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .account-text {
        display: none;
    }

    .header-switcher .switcher-label {
        display: none;
    }

    .globe-switcher {
        display: none;
    }

    .header-inner,
    .woocommerce .header-inner,
    .woocommerce-page .header-inner {
        gap: var(--space-sm);
    }

    .header-actions {
        gap: 0.25rem;
    }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    padding: var(--space-2xl) 0;
    background: var(--color-white);
    text-align: center;
    border-bottom: 1px solid var(--color-gray-100);
}

.hero-content {
    max-width: 680px;
    margin: 0 auto;
}

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

.hero-title em {
    font-style: italic;
    font-weight: 400;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.9375rem 2rem;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.btn-primary {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.btn-primary:hover {
    background: var(--color-gray-800);
    border-color: var(--color-gray-800);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    background: transparent;
    color: var(--color-black);
    border-color: var(--color-gray-300);
}

.btn-secondary:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-ghost {
    background: transparent;
    color: var(--color-black);
    border-color: transparent;
    padding: 0.75rem 1rem;
}

.btn-ghost:hover {
    background: var(--color-bg-alt);
}

.btn-whatsapp {
    background: var(--color-whatsapp);
    color: white;
    border-color: var(--color-whatsapp);
}

.btn-whatsapp:hover {
    background: var(--color-whatsapp-hover);
    border-color: var(--color-whatsapp-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   WHOLESALE HERO
   ========================================================================== */

.wholesale-hero {
    padding: var(--space-2xl) 0;
    background: var(--color-black);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.wholesale-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.02) 100%);
    pointer-events: none;
}

.wholesale-content {
    max-width: 580px;
    position: relative;
}

.wholesale-badge {
    display: inline;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin-bottom: var(--space-md);
}

.wholesale-hero h2 {
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.wholesale-hero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.0625rem;
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.wholesale-features {
    list-style: none;
    margin-bottom: var(--space-lg);
}

.wholesale-features li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375rem;
}

.wholesale-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 1px;
    background: var(--color-gray-500);
}

.wholesale-buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.wholesale-hero .btn-primary {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

.wholesale-hero .btn-primary:hover {
    background: transparent;
    color: var(--color-white);
    transform: translateY(-1px);
}

.wholesale-hero .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.wholesale-hero .btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

/* Wholesale grid layout */
.wholesale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

/* Wholesale visual / dealer stats panel */
.wholesale-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dealer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.wholesale-hero .stat-item {
    text-align: center;
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.wholesale-hero .stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.wholesale-hero .stat-number {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.wholesale-hero .stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Dealer countries flags */
.dealer-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) 0;
}

.country-flag {
    font-size: 1.75rem;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: default;
}

.country-flag:hover {
    opacity: 1;
    transform: scale(1.15);
}

.country-more {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    margin-left: 0.25rem;
}

/* Wholesale responsive */
@media (max-width: 768px) {
    .wholesale-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .wholesale-content {
        max-width: 100%;
    }

    .dealer-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }

    .wholesale-hero .stat-number {
        font-size: 1.75rem;
    }

    .wholesale-hero .stat-label {
        font-size: 0.6875rem;
    }

    .wholesale-hero .stat-item {
        padding: var(--space-sm);
    }

    .country-flag {
        font-size: 1.5rem;
    }

    .wholesale-buttons {
        flex-direction: column;
    }

    .wholesale-buttons .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.latest-products,
.featured-products {
    padding: var(--space-2xl) 0;
}

.latest-products {
    background: var(--color-bg);
}

.featured-products {
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.section-subtitle {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.section-cta {
    text-align: center;
    margin-top: var(--space-xl);
}

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

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

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

/* ==========================================================================
   PRODUCT CARD
   ========================================================================== */

.product-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--duration-slow) var(--ease);
    border: 1px solid var(--color-gray-100);
}

.product-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.product-link {
    display: block;
}

.product-image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

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

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    font-size: 0.875rem;
}

.product-info {
    padding: var(--space-md);
    background: #FDFCFA;
}

.product-card .product-title {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.product-card .product-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-black);
    letter-spacing: -0.01em;
}

.product-card .product-price del {
    color: var(--color-gray-400);
    font-weight: 400;
    margin-right: 0.5rem;
}

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

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */

.about-section {
    padding: var(--space-2xl) 0;
    background: var(--color-warm);
    position: relative;
}

/* Subtle paper grain texture */
.about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.about-content {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.about-content h2 {
    margin-bottom: var(--space-md);
}

.about-content p {
    color: var(--color-gray-600);
    font-size: 1.0625rem;
    line-height: 1.75;
}

.about-content .btn {
    margin-top: var(--space-lg);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: var(--color-black);
    color: var(--color-white);
    padding: var(--space-2xl) 0 var(--space-lg);
    margin-top: var(--space-2xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

.footer-col h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
    color: var(--color-gray-400);
}

.footer-col:first-child h3 {
    font-size: 1rem;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-white);
}

.footer-col p,
.footer-col address {
    font-style: normal;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--duration) var(--ease);
}

.footer-col a:hover {
    color: var(--color-white);
}

.footer-col .btn-sm {
    display: inline;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
}

.footer-col .btn-sm:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.footer-col .btn-whatsapp {
    display: inline;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    background: #25D366;
    color: white;
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
}

.footer-col .btn-whatsapp:hover {
    background: #1da851;
    color: white;
}

.footer-bottom {
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   SHOP ARCHIVE
   ========================================================================== */

.shop-archive {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-warm);
    min-height: 70vh;
    flex: 1;
}

.shop-archive .container {
    max-width: var(--container-wide);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.breadcrumbs a {
    color: var(--color-gray-600);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    color: var(--color-black);
}

.breadcrumb-sep {
    margin: 0 0.5rem;
    color: var(--color-gray-400);
}

.breadcrumb-current {
    color: var(--color-black);
}

.shop-header {
    text-align: center;
    margin-bottom: var(--space-xl);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.shop-header-compact {
    margin-bottom: var(--space-md);
}

.shop-header-compact .shop-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--space-2xs);
}

.shop-header-compact .shop-subtitle {
    font-size: 0.875rem;
    margin-bottom: 0;
}

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

.shop-subtitle {
    font-size: 1.0625rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-sm);
}

.shop-intro {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    line-height: 1.7;
}

/* Shop Filters */
.shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
}

.filter-search {
    display: flex;
    flex: 2;
    min-width: 200px;
    max-width: 480px;
}

.search-input {
    flex: 1;
    padding: 0.6875rem 1rem;
    font-family: var(--font);
    font-size: 0.875rem;
    border: 1px solid var(--color-gray-200);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--color-bg);
    transition: all var(--duration) var(--ease);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-black);
    background: var(--color-white);
}

.search-btn {
    padding: 0.6875rem 1rem;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.search-btn:hover {
    background: var(--color-gray-800);
}

.filter-category,
.filter-sort {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.filter-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
}

.filter-select {
    padding: 0.6875rem 2.25rem 0.6875rem 1rem;
    font-family: var(--font);
    font-size: 0.875rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 1rem center;
    cursor: pointer;
    appearance: none;
    min-width: 0;
    transition: all var(--duration) var(--ease);
}

.filter-select:hover {
    border-color: var(--color-gray-300);
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-black);
}


.filter-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.filter-meta .product-count {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.filter-meta .toolbar-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-meta .pagination-link {
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
}

.filter-meta .page-indicator {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.pagination-pagenumber {
    width: 3.5ch;
    padding: 0.125rem 0.25rem;
    font-size: inherit;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-gray-800);
    text-align: center;
    background: transparent;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    -moz-appearance: textfield;
    appearance: textfield;
}
.pagination-pagenumber::-webkit-inner-spin-button,
.pagination-pagenumber::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pagination-pagenumber:focus {
    outline: none;
    border-color: var(--color-black);
}

@media (max-width: 900px) {
    .shop-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-search {
        max-width: 100%;
    }

    .filter-category,
    .filter-sort {
        justify-content: space-between;
    }

    .filter-select {
        flex: 1;
    }

    .filter-meta {
        justify-content: space-between;
        margin-left: 0;
    }
}

/* Active Filters */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding: 0.875rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

.remove-filter {
    color: var(--color-gray-500);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.remove-filter:hover,
.remove-filter:focus-visible {
    color: var(--color-black);
}

.clear-all-filters {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
}

.clear-all-filters:hover,
.clear-all-filters:focus-visible {
    color: var(--color-black);
}

/* Shop Toolbar */
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding: 0.875rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
}

.shop-toolbar.bottom-pagination {
    margin-top: var(--space-md);
}

.product-count {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.toolbar-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-indicator {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
}

@media (max-width: 600px) {
    .shop-toolbar {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .product-count {
        font-size: 0.75rem;
        flex: 1;
    }

    .toolbar-pagination {
        gap: 0.5rem;
    }

    .page-indicator {
        font-size: 0.75rem;
    }
}

/* No Products */
.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-gray-500);
    font-size: 1rem;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
    margin-top: var(--space-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination-numbers {
    display: flex;
    gap: 0.25rem;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.pagination-link:hover,
.pagination-link:focus-visible {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

.pagination-link.current {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */

.product-single {
    padding: var(--space-lg) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}

.product-single .container {
    max-width: 1160px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.8125rem;
    margin-bottom: var(--space-lg);
    color: var(--color-gray-500);
}

.breadcrumb-sep {
    margin: 0 0.625rem;
    color: var(--color-gray-300);
}

.breadcrumb-current {
    color: var(--color-black);
    font-weight: 500;
}

/* Product Layout */
.product-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    .product-layout {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* Gallery */
.product-gallery {
    align-self: start;
}

.gallery-main {
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-gray-100);
}

.gallery-main .main-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    transition: transform var(--duration-slow) var(--ease);
}

.gallery-main:hover .main-image {
    transform: scale(1.02);
}

.gallery-placeholder {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
}

.gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-alt);
    transition: all var(--duration) var(--ease);
}

.gallery-thumb:hover {
    border-color: var(--color-gray-400);
}

.gallery-thumb.active {
    border-color: var(--color-black);
}

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

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    animation: fadeIn var(--duration) var(--ease);
}

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

.lightbox-overlay img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    animation: scaleIn var(--duration-slow) var(--ease);
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-lg);
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration) var(--ease);
    padding: 0.5rem;
}

.lightbox-close:hover {
    opacity: 1;
}

/* Product Details */
.product-details {
    padding-top: 0;
}

.product-single .product-title {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    margin-bottom: var(--space-sm);
}

.btn-admin-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-md);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.btn-admin-edit:hover {
    background: #fde68a;
    color: #92400e;
}

.product-brand,
.product-dimensions {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-xs);
}

.product-brand .label,
.product-dimensions .label,
.product-meta .label {
    color: var(--color-gray-500);
}

/* Product Meta */
.product-meta {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: var(--space-md) 0;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.product-meta .meta-item {
    margin: 0.5rem 0;
}

.product-meta a {
    color: var(--color-gray-600);
}

.product-meta a:hover {
    color: var(--color-black);
}

/* Product Purchase */
.product-purchase {
    margin: var(--space-md) 0 var(--space-lg);
}

/* Price row — price + stock badge inline */
.product-price-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.product-purchase .product-price {
    font-size: 1.625rem;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: -0.02em;
}

.product-purchase .product-price del {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: 1.125rem;
    margin-right: 0.625rem;
}

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

.product-stock-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
    white-space: nowrap;
}

.product-stock-badge--instock {
    color: #166534;
    background: #dcfce7;
}

.product-stock-badge--outofstock {
    color: var(--color-gray-600);
    background: var(--color-gray-100);
}

/* Product Actions — gray box wrapping primary + secondary CTAs */
.product-actions {
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.product-actions form.cart {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-sm);
}

.product-actions .quantity {
    display: none;
}

.product-actions .quantity input {
    width: 72px;
    padding: 0.875rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--color-white);
    transition: border-color var(--duration) var(--ease);
}

.product-actions .quantity input:focus {
    outline: none;
    border-color: var(--color-black);
}

.product-actions .single_add_to_cart_button {
    flex: 1;
    padding: 0.9375rem 1.5rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.product-actions .single_add_to_cart_button:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
}

/* Secondary actions — wishlist + reservation, inside the gray box */
.product-secondary-actions {
    display: flex;
    gap: var(--space-sm);
}

.product-secondary-actions .wishlist-btn-large {
    flex: 1;
    min-width: 0;
}

.btn-reservation-soon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-400);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: not-allowed;
    border-style: dashed;
}

.btn-reservation-soon svg {
    opacity: 0.4;
}

.soon-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
    background: var(--color-gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 2rem;
}

/* Product Description */
.product-details 
/* Product lead/intro text — bordered style */
.product-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid #e0d6cc;
}
.product-lead p {
    margin: 0 0 0.75rem;
}
.product-lead p:last-child {
    margin-bottom: 0;
}

.product-description {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
}

.product-details .product-description p {
    margin-bottom: var(--space-sm);
}

/* Product Inquiry */
.product-inquiry {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

.product-inquiry h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.product-inquiry .inquiry-intro {
    color: var(--color-gray-600);
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.product-inquiry .jet-form-builder__field {
    margin-bottom: var(--space-sm);
}

.product-inquiry .jet-form-builder__label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.product-inquiry .jet-form-builder input[type="text"],
.product-inquiry .jet-form-builder input[type="email"],
.product-inquiry .jet-form-builder input[type="tel"],
.product-inquiry .jet-form-builder textarea {
    width: 100%;
    padding: 0.875rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: all var(--duration) var(--ease);
}

.product-inquiry .jet-form-builder input:focus,
.product-inquiry .jet-form-builder textarea:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.product-inquiry .jet-form-builder textarea {
    min-height: 100px;
    resize: vertical;
}

.product-inquiry .jet-form-builder__submit {
    padding: 0.875rem 1.75rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.product-inquiry .jet-form-builder__submit:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
}

/* Related Products */
.related-products {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-gray-200);
}

.related-products h2 {
    margin-bottom: var(--space-lg);
    text-align: center;
    font-size: 1.5rem;
}

.product-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

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

@media (max-width: 600px) {
    .product-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   WOOCOMMERCE PAGES
   ========================================================================== */

div.woocommerce-page h1 {
    margin-bottom: var(--space-lg);
}

/* Cart */
.woocommerce-cart-form table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-cart-form th,
.woocommerce-cart-form td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.woocommerce-cart-form th {
    background: var(--color-bg-alt);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gray-600);
}

.woocommerce-cart-form .product-thumbnail img {
    width: 80px;
    border-radius: var(--radius-md);
}

.woocommerce-cart-form .quantity input {
    width: 64px;
    padding: 0.625rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-align: center;
    font-family: var(--font);
}

.cart_totals {
    max-width: 420px;
    margin-left: auto;
    background: var(--color-bg-alt);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

/* Buttons */
.woocommerce-page .button,
.woocommerce-page button[type="submit"] {
    padding: 0.875rem 1.75rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.woocommerce-page .button:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
}

/* Checkout */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

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

.woocommerce-checkout h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-gray-100);
}

.woocommerce-checkout .form-row {
    margin-bottom: var(--space-sm);
}

.woocommerce-checkout label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    width: 100%;
    padding: 0.875rem;
    font-family: var(--font);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: all var(--duration) var(--ease);
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
    outline: none;
    border-color: var(--color-black);
    background: var(--color-white);
}

.woocommerce-checkout-review-order {
    background: var(--color-bg-alt);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

/* My Account — Hide default WC nav (custom sidebar replaces it) */
.woocommerce-MyAccount-navigation { display: none !important; }
.woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    overflow: visible;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Custom pages manage their own card layout — cancel the default card */
.woocommerce-MyAccount-content:has(.account-dashboard-custom),
.woocommerce-MyAccount-content:has(.account-wishlist-content),
.woocommerce-MyAccount-content:has(.addresses-page-custom),
.woocommerce-MyAccount-content:has(.edit-account-page-custom),
.woocommerce-MyAccount-content:has(.edit-address-page),
.woocommerce-MyAccount-content:has(.account-section),
.woocommerce-MyAccount-content:has(.mp-page) {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

/* ==========================================================================
   MY ACCOUNT — SIDEBAR LAYOUT
   ========================================================================== */

.account-page-bg {
    background: #F5F0EB;
    flex: 1;
}

.account-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) 2rem;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-xl);
}

.account-sidebar {
    align-self: start;
}

.sidebar-profile {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    color: inherit;
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}

.sidebar-profile:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sidebar-profile.active {
    border: 2px solid var(--color-black);
}

.sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-black);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.sidebar-profile-info {
    flex: 1;
    min-width: 0;
}

.sidebar-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-company {
    font-size: 0.6875rem;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-email {
    font-size: 0.6875rem;
    color: var(--color-gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-address {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--color-gray-400);
    margin-top: 0.125rem;
}

.sidebar-address svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.sidebar-profile-arrow {
    flex-shrink: 0;
    color: var(--color-gray-300);
    transition: color var(--duration) var(--ease);
}

.sidebar-profile:hover .sidebar-profile-arrow {
    color: var(--color-gray-600);
}

.sidebar-nav {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: var(--space-xs);
}

.nav-section-label {
    padding: 0.625rem 0.875rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

.nav-section-label:first-child {
    padding-top: 0.375rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.nav-item:hover {
    background: #F5F0EB;
    color: var(--color-black);
}

.nav-item.active {
    background: var(--color-black);
    color: var(--color-white);
}

.nav-icon {
    width: 18px;
    height: 18px;
    opacity: 0.5;
    flex-shrink: 0;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-label {
    flex: 1;
}

.nav-separator {
    height: 1px;
    background: var(--color-gray-100);
    margin: var(--space-xs) 0.875rem;
}

.nav-merchant {
    color: var(--color-gray-500);
}

.nav-logout {
    color: var(--color-gray-400);
}

.nav-logout:hover {
    background: #FEF2F2;
    color: #991B1B;
}

.account-main {
    min-width: 0;
}

/* Mobile slide-in sidebar + overlay */
.account-sidebar-overlay {
    display: none;
}

@media (max-width: 1024px) {
    .account-wrapper {
        grid-template-columns: 200px 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .account-wrapper {
        grid-template-columns: 1fr;
        padding: var(--space-md) 1rem;
    }

    .account-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 1000;
        background: #F5F0EB;
        padding: var(--space-lg) var(--space-md);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .account-sidebar.is-open {
        transform: translateX(0);
    }

    .account-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .account-sidebar-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.woocommerce-message {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-gray-200);
}

.woocommerce-info {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-gray-300);
}

.woocommerce-error {
    background: var(--color-bg);
    border: 1px solid var(--color-black);
}

.woocommerce-error li {
    list-style: none;
}

.cart-empty {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-gray-500);
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-page {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}
.contact-page > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-xl);
    align-items: start;
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-info-sidebar {
        order: -1;
    }
}

.contact-form-section h1 {
    margin-bottom: var(--space-sm);
}

.contact-intro {
    font-size: 1rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 0.9375rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    margin-bottom: var(--space-sm);
    transition: all var(--duration) var(--ease);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-black);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.contact-form textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-form button[type="submit"],
.contact-form .jet-form-builder__submit {
    padding: 0.9375rem 2.25rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.contact-form button[type="submit"]:hover,
.contact-form .jet-form-builder__submit:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
}

.contact-info-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.info-card {
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.info-card:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.info-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-gray-700);
}

.info-card address {
    font-style: normal;
}

.info-card p {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.65;
    margin-bottom: var(--space-xs);
}

.info-card--highlight {
    background: var(--color-black);
    color: var(--color-white);
}

.info-card--highlight:hover {
    background: var(--color-gray-900);
    box-shadow: var(--shadow-lg);
}

.info-card--highlight h3 {
    color: var(--color-gray-400);
}

.info-card--highlight p {
    color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   PAGE STYLES
   ========================================================================== */

.page-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.page-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
    display: block;
}

.page-intro {
    font-size: 1.0625rem;
    color: var(--color-gray-600);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* About Page */
.page-about {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}
.page-about > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

.about-story {
    max-width: 640px;
    margin: 0 auto var(--space-xl);
}

.about-story p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

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

.value-card {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.value-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.value-card h3 {
    margin-bottom: var(--space-sm);
}

.value-card p {
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Dealers Page */
.page-dealers {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}
.page-dealers > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

.dealers-intro {
    max-width: 640px;
    margin: 0 auto var(--space-xl);
    text-align: center;
    color: var(--color-gray-600);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.dealers-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

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

.feature-card {
    padding: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.feature-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-md);
}

.feature-card h3 {
    margin-bottom: var(--space-sm);
}

.feature-card p {
    color: var(--color-gray-600);
    line-height: 1.7;
}

.dealers-cta {
    text-align: center;
    padding: var(--space-xl);
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.dealers-cta h2 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.dealers-cta p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-lg);
    font-size: 1.0625rem;
}

.cta-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.dealers-cta .btn-primary {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

.dealers-cta .btn-primary:hover {
    background: transparent;
    color: var(--color-white);
}

.dealers-process {
    max-width: 640px;
    margin: 0 auto var(--space-xl);
}

.dealers-process h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.dealers-location {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.dealers-location h2 {
    margin-bottom: var(--space-md);
}

.dealers-location p {
    color: var(--color-gray-600);
    line-height: 1.7;
}

.dealers-location a {
    font-weight: 500;
}

.dealers-visit-info {
    margin-bottom: var(--space-xl);
}

.dealers-visit-info h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.visit-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

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

.visit-card {
    padding: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
}

.visit-card h3 {
    margin-bottom: var(--space-sm);
}

.visit-card p {
    color: var(--color-gray-600);
    line-height: 1.7;
}

.visit-card ul {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0;
}

.visit-card ul li {
    padding: var(--space-xs) 0;
    color: var(--color-gray-600);
    line-height: 1.6;
}

.visit-tip {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

/* FAQ Page */
.page-faq {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}
.page-faq > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

.faq-list {
    max-width: 680px;
    margin: 0 auto var(--space-xl);
}

.faq-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

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

.faq-item h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.faq-item p {
    color: var(--color-gray-600);
    line-height: 1.75;
}

.faq-dealers {
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.faq-dealers h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.faq-cta {
    text-align: center;
}

.process-steps {
    max-width: 560px;
    margin: 0 auto;
    list-style: none;
    counter-reset: step;
}

.process-steps li {
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: var(--space-lg);
    counter-increment: step;
}

.process-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.process-steps strong {
    display: block;
    margin-bottom: var(--space-2xs);
    font-weight: 600;
}

.process-steps p {
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.7;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   LOGO WORDMARK
   ========================================================================== */

.site-name em {
    font-style: italic;
    font-weight: 400;
}

.footer-col h3 em {
    font-style: italic;
    font-weight: 400;
}

.footer-heading-spacer {
    margin-top: var(--space-md);
}

/* ==========================================================================
   CART COUNT BADGE
   ========================================================================== */

.header-wishlist,
.header-cart {
    position: relative;
}

.wishlist-link {
    display: flex;
    align-items: center;
    padding: 0.625rem;
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.wishlist-link:hover,
.wishlist-link:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.wishlist-link:hover .wishlist-icon {
    stroke: var(--color-black);
}

.wishlist-icon {
    transition: all var(--duration) var(--ease);
}

/* Wishlist button on product cards */
.wishlist-btn {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--duration) var(--ease);
    backdrop-filter: blur(4px);
}

.product-card:hover .wishlist-btn {
    opacity: 1;
    transform: scale(1);
}

.wishlist-btn:hover {
    background: var(--color-white);
    transform: scale(1.1);
}

.wishlist-btn svg {
    transition: all var(--duration) var(--ease);
}

.wishlist-btn:hover svg {
    stroke: var(--color-danger);
}

.wishlist-btn.is-active svg {
    fill: var(--color-danger);
    stroke: var(--color-danger);
}

.wishlist-btn.is-active {
    opacity: 1;
}

/* Large wishlist button (single product page) — full reset of card-context base */
.wishlist-btn-large {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    width: 100%;
    height: auto;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    opacity: 1;
    transform: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.wishlist-btn-large:hover {
    border-color: var(--color-gray-400);
    background: var(--color-gray-50, #fafafa);
    transform: none;
}

.wishlist-btn-large .wishlist-btn-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.wishlist-btn-large.is-active {
    border-color: #e53935;
    background: #fef2f2;
}

.wishlist-btn-large.is-active .wishlist-btn-text {
    font-size: 0;
}

.wishlist-btn-large.is-active .wishlist-btn-text::before {
    content: 'Gemt på ønskelisten';
    font-size: 0.875rem;
    font-weight: 500;
    color: #e53935;
}

/* Header icon tooltips */
.header-account,
.header-wishlist,
.header-cart {
    position: relative;
}

.account-link::after,
.wishlist-link::after,
.cart-link::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.75rem;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast) var(--ease);
    pointer-events: none;
    margin-top: 0.5rem;
}

.wishlist-link:hover::after,
.cart-link:hover::after {
    opacity: 1;
    visibility: visible;
}

.account-icon,
.cart-icon {
    transition: all var(--duration) var(--ease);
}

.wishlist-count,
.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(25%, -25%);
}

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration) var(--ease);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 320px;
    height: 100%;
    background: var(--color-white);
    z-index: 1999;
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease);
    display: flex;
    flex-direction: column;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
}

.mobile-menu-title {
    font-weight: 600;
    font-size: 1rem;
}

.mobile-menu-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    transition: all var(--duration) var(--ease);
}

.mobile-menu-close:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.mobile-nav-menu {
    flex: 1;
    list-style: none;
    padding: var(--space-md);
    overflow-y: auto;
}

.mobile-nav-menu li {
    border-bottom: 1px solid var(--color-gray-100);
}

.mobile-nav-menu a {
    display: block;
    padding: var(--space-md) 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-black);
}

.mobile-nav-menu a:hover {
    color: var(--color-gray-600);
}

.mobile-menu-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-bg-alt);
}

.mobile-menu-switchers {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.mobile-lang-select,
.mobile-currency-select {
    flex: 1;
    padding: 0.75rem;
    font-family: var(--font);
    font-size: 0.875rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Body scroll lock when menu open */
body.menu-open {
    overflow: hidden;
}

/* Hamburger animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   HERO WITH IMAGE
   ========================================================================== */

.hero-with-image {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: var(--space-2xl) 0;
    background: var(--color-black);
    color: var(--color-white);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
}

.hero-image-wrapper {
    position: absolute;
    inset: 0;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
}

.hero-with-image .container {
    position: relative;
    z-index: 1;
}

.hero-with-image .hero-content {
    max-width: 640px;
    text-align: left;
}

.hero-badge {
    display: inline;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-md);
}

.hero-with-image .hero-title {
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.hero-with-image .hero-title em {
    font-style: italic;
    font-weight: 400;
}

.hero-with-image .hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-lg);
}

.hero-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.btn-light {
    color: rgba(255, 255, 255, 0.9);
}

.btn-light:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .hero-with-image {
        min-height: 60vh;
        text-align: center;
    }

    .hero-with-image .hero-content {
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }
}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */

.trust-bar {
    background: var(--color-warm);
    padding: var(--space-md) 0;
}

.trust-items {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-gray-700);
}

.trust-icon {
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .trust-items {
        gap: var(--space-sm);
    }

    .trust-item {
        font-size: 0.75rem;
        flex: 0 0 calc(50% - 0.5rem);
        justify-content: center;
    }
}

/* ==========================================================================
   CATEGORY NAVIGATION
   ========================================================================== */

.category-nav {
    padding: var(--space-2xl) 0;
    background: var(--color-white);
}

/* Masonry Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.category-grid-masonry {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(120px, auto);
    grid-auto-flow: dense;
}

/* Full page category grid (more columns) */
.category-grid-full {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
    .category-grid-full {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Categories page styles */
.categories-page {
    padding: var(--space-xl) 0 var(--space-2xl);
    background: var(--color-warm);
    flex: 1;
}
.categories-page > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

.categories-page .page-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.categories-page .page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-xs);
}

.categories-page .page-subtitle {
    font-size: 1rem;
    color: var(--color-gray-600);
}

/* Wishlist page */
.wishlist-page {
    background: #F5F0EB;
    padding: var(--space-xl) 0 var(--space-2xl);
    min-height: 50vh;
    background: var(--color-warm);
    flex: 1;
}
.wishlist-page > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

.wishlist-page .page-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.wishlist-page .page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-xs);
}

.wishlist-page .page-subtitle {
    font-size: 1rem;
    color: var(--color-gray-600);
}

.wishlist-empty,
.wishlist-loading {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--color-gray-600);
}

.wishlist-empty .btn {
    margin-top: var(--space-md);
}

.wishlist-grid .wishlist-btn {
    opacity: 1;
}

@media (max-width: 1100px) {
    .category-grid-masonry {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .category-grid,
    .category-grid-masonry {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-grid-masonry {
        grid-auto-rows: minmax(100px, auto);
    }
}

@media (max-width: 600px) {
    .category-grid,
    .category-grid-masonry {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    .category-grid-masonry {
        grid-auto-rows: auto;
    }
}

.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    transition: all var(--duration) var(--ease);
}

.category-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Landscape cards - span 2 columns (horizontal furniture like coffee tables) */
.category-card-landscape {
    grid-column: span 2;
}

.category-card-landscape .category-image {
    aspect-ratio: 16 / 9;
}

.category-card-landscape .category-name {
    font-size: 1.25rem;
}

/* Portrait cards - span 2 rows (vertical furniture like dressers, shelves) */
.category-card-portrait {
    grid-row: span 2;
}

.category-card-portrait .category-image {
    aspect-ratio: 3 / 4;
    flex: 1;
}

.category-card-portrait .category-name {
    font-size: 1.25rem;
}

/* Square cards - standard 1x1 */
.category-card-square .category-image {
    aspect-ratio: 1 / 1;
}

/* Keep rank-based classes for frontpage grid */
.category-card-large {
    grid-column: span 2;
    grid-row: span 2;
}

.category-card-large .category-image {
    aspect-ratio: 4 / 3;
}

.category-card-large .category-info {
    padding: var(--space-lg) var(--space-md);
}

.category-card-large .category-name {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.category-card-large .category-count {
    font-size: 0.9375rem;
}

.category-card-medium {
    grid-row: span 2;
}

.category-card-medium .category-image {
    aspect-ratio: 3 / 4;
    flex: 1;
}

.category-card-medium .category-name {
    font-size: 1.25rem;
}

.category-card-small .category-image {
    aspect-ratio: 16 / 10;
}

.category-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--color-bg-alt);
}

.category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

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

.category-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-200) 100%);
}

.category-info {
    padding: var(--space-md);
    flex-shrink: 0;
    background: #FDFCFA;
}

.category-name {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: var(--space-2xs);
}

.category-count {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* "All products" card */
.category-card-all {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
    min-height: 160px;
    grid-column: span 1;
}

.category-card-all .category-info {
    background: transparent;
    text-align: center;
    padding: var(--space-lg);
}

.category-card-all .category-name {
    color: var(--color-white);
    font-size: 1.25rem;
}

.category-card-all .category-count {
    color: rgba(255, 255, 255, 0.7);
}

.category-card-all:hover {
    background: var(--color-gray-900);
    border-color: var(--color-gray-900);
}

/* Responsive adjustments for masonry cards */
@media (max-width: 900px) {
    .category-card-landscape {
        grid-column: span 2;
    }
    .category-card-portrait {
        grid-row: span 1;
    }
    .category-card-portrait .category-image {
        aspect-ratio: 16 / 10;
    }
    .category-card-large {
        grid-column: span 2;
        grid-row: span 1;
    }
    .category-card-large .category-image {
        aspect-ratio: 16 / 9;
    }
    .category-card-medium {
        grid-row: span 1;
    }
    .category-card-medium .category-image {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 600px) {
    .category-card-landscape,
    .category-card-portrait,
    .category-card-square {
        grid-column: span 1;
        grid-row: span 1;
    }
    .category-card-landscape .category-image,
    .category-card-portrait .category-image,
    .category-card-square .category-image {
        aspect-ratio: 16 / 9;
    }
    .category-card-large,
    .category-card-medium,
    .category-card-small {
        grid-column: span 1;
        grid-row: span 1;
    }
    .category-card-large .category-image,
    .category-card-medium .category-image,
    .category-card-small .category-image {
        aspect-ratio: 16 / 9;
    }
    .category-card-large .category-info,
    .category-card-medium .category-info {
        padding: var(--space-md);
    }
    .category-card-large .category-name,
    .category-card-medium .category-name {
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   PRODUCT BADGES
   ========================================================================== */

/* Badge container */
.product-badges {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.product-badge {
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.product-badge-new {
    background: var(--color-black);
    color: var(--color-white);
}

.product-badge-sale {
    background: #E53935;
    color: white;
}

.product-badge-instock {
    background: #2E7D32;
    color: white;
}

.product-badge-sold {
    background: var(--color-gray-600);
    color: white;
}

.product-badge-private {
    background: #F57C00;
    color: white;
}

.product-badge-visibility {
    background: #6366F1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    width: 2rem;
    height: 2rem;
}

.product-badge-visibility svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.product-badge-visibility-hidden {
    background: #DC2626;
}

.product-badge-visibility-catalog-only {
    background: #F59E0B;
}

/* ==========================================================================
   PRODUCT IMAGE HOVER SWAP
   ========================================================================== */

.product-image {
    position: relative;
}

/* ==========================================================================
   PRODUCT IMAGE DOT NAVIGATION
   ========================================================================== */

.product-image-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.product-image-slide[data-slide="0"] {
    opacity: 1;
}

.product-image-dots {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.product-card:hover .product-image-dots {
    opacity: 1;
}

.product-image-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}

/* Larger invisible hit area */
.product-image-dot::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
}

.product-image-dot:hover,
.product-image-dot.active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.2);
}

/* Dot hover triggers image change via JS */

/* (Image collage removed — single image + dots only) */

/* ==========================================================================
   WOOCOMMERCE PAGES (Cart, Checkout, Account)
   ========================================================================== */

div.woocommerce-page,
.cart-page {
    padding: var(--space-xl) 0 var(--space-2xl);
    min-height: 60vh;
    background: var(--color-warm);
    flex: 1;
}
div.woocommerce-page > .container,
.cart-page > .container {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    max-width: var(--container-max);
}

div.woocommerce-page h1,
.cart-page h1 {
    margin-bottom: var(--space-lg);
}

/* Cart page - reset any collage/grid on cart thumbnails */
.woocommerce-cart .product-thumbnail,
.shop_table .product-thumbnail,
table.cart .product-thumbnail {
    display: block !important;
    position: relative !important;
}

.woocommerce-cart .product-thumbnail img,
.shop_table .product-thumbnail img,
table.cart .product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: var(--radius-sm) !important;
    display: block !important;
}

/* Cart table */
.woocommerce-cart-form {
    margin-bottom: var(--space-xl);
}

table.shop_table,
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-lg);
}

table.shop_table th,
table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

table.shop_table th {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cart_item .product-name a {
    color: var(--color-black);
    font-weight: 500;
}

.cart_item .product-name a:hover {
    text-decoration: underline;
}

.quantity input[type="number"],
.woocommerce .quantity input {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    text-align: center;
}

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

.cart_totals {
    max-width: 400px;
    margin-left: auto;
}

.cart_totals h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
}

.wc-proceed-to-checkout .checkout-button,
.wc-proceed-to-checkout a {
    display: block;
    width: 100%;
    padding: 1rem;
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--duration) var(--ease);
}

.wc-proceed-to-checkout .checkout-button:hover,
.wc-proceed-to-checkout a:hover {
    background: var(--color-gray-800);
    color: var(--color-white);
}

/* Update cart button */
button[name="update_cart"],
.shop_table + input[type="submit"] {
    padding: 0.75rem 1.5rem;
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

button[name="update_cart"]:hover {
    background: var(--color-gray-100);
}

/* Remove item link */
.product-remove a,
a.remove {
    color: var(--color-gray-400) !important;
    font-size: 1.5rem;
    text-decoration: none;
}

.product-remove a:hover,
a.remove:hover {
    color: var(--color-black) !important;
}

/* Account page layout — WC nav hidden, see sidebar layout above */

/* ==========================================================================
   LOGIN / REGISTER PAGE — Split-screen hero
   ========================================================================== */

.login-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--header-height));
}

/* ---- Hero panel (left) ---- */
.login-hero {
    position: relative;
    background: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    overflow: hidden;
}

/* Subtle film grain texture */
.login-hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px;
    pointer-events: none;
}

/* Decorative diagonal lines */
.login-hero-lines {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-line {
    position: absolute;
    width: 1px;
    height: 200%;
    background: rgba(255, 255, 255, 0.04);
    transform: rotate(25deg);
    transform-origin: top center;
}

.hero-line:nth-child(1) { left: 25%; top: -20%; }
.hero-line:nth-child(2) { left: 55%; top: -30%; }
.hero-line:nth-child(3) { left: 80%; top: -10%; }

.login-hero-content {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    max-width: 480px;
}

/* Headline */
.login-hero-content h2 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-xl);
}

/* Benefits list */
.login-hero-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.hero-benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.hero-benefit-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.hero-benefit-icon svg {
    stroke: rgba(255, 255, 255, 0.7);
}

.hero-benefit-text {
    padding-top: 2px;
}

.hero-benefit-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.hero-benefit-text span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
}

/* ---- Form panel (right) ---- */
.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    background: var(--color-white);
    overflow-y: auto;
}

.login-form-inner {
    width: 100%;
    max-width: 400px;
}

/* Subtitle */
.login-subtitle {
    color: var(--color-gray-500);
    font-size: 0.9375rem;
    margin-bottom: var(--space-lg);
}

/* Tab navigation */
.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.login-tab {
    flex: 1;
    padding: 0.875rem 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-gray-400);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    margin-bottom: -1px;
}

.login-tab:hover {
    color: var(--color-gray-700);
}

.login-tab.active {
    color: var(--color-black);
    border-bottom-color: var(--color-black);
}

/* Hide WooCommerce column headings (tabs replace them) */
.login-forms .u-columns h2 {
    display: none;
}

/* Make WooCommerce columns stack (tabs toggle visibility) */
.login-forms .u-columns {
    display: block;
}

.login-forms .u-columns > .u-column-1,
.login-forms .u-columns > .u-column-2,
.login-forms .u-columns > .col-1,
.login-forms .u-columns > .col-2 {
    width: 100%;
    float: none;
    padding: 0;
}

/* Login/Register form cards — borderless inside form panel */
.login-form-panel .woocommerce-form-login,
.login-form-panel .woocommerce-form-register,
.login-form-panel form.woocommerce-form-login,
.login-form-panel form.woocommerce-form-register,
.login-form-panel form.login,
.login-form-panel form.register {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Fallback: forms outside login-form-panel (e.g. dashboard lost-password) */
.woocommerce-form-login,
.woocommerce-form-register,
form.woocommerce-form-login,
form.woocommerce-form-register,
form.login,
form.register {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

/* Shared form row styles */
.woocommerce-form-row,
.form-row {
    margin-bottom: var(--space-md);
}

.woocommerce-form-row label,
.form-row label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    letter-spacing: 0.01em;
}

.woocommerce-form-row input[type="text"],
.woocommerce-form-row input[type="email"],
.woocommerce-form-row input[type="password"] {
    width: 100%;
    padding: 0.8125rem 0.875rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    background: var(--color-bg);
    transition: all var(--duration) var(--ease);
}

.woocommerce-form-row input:focus {
    outline: none;
    border-color: var(--color-black);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
    width: 100%;
    padding: 0.875rem;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: all var(--duration) var(--ease);
}

.woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-form-register .woocommerce-form-register__submit:hover {
    background: var(--color-gray-800);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.woocommerce-LostPassword {
    margin-top: var(--space-md);
    text-align: center;
}

.woocommerce-LostPassword a {
    color: var(--color-gray-500);
    font-size: 0.8125rem;
    transition: color var(--duration) var(--ease);
}

.woocommerce-LostPassword a:hover {
    color: var(--color-black);
}

/* Trust indicators */
.login-trust {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-gray-400);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trust-item svg {
    flex-shrink: 0;
    stroke: var(--color-gray-300);
}

/* WooCommerce notices */
.login-form-panel .woocommerce-error,
.login-form-panel .woocommerce-message,
.login-form-panel .woocommerce-info {
    margin: 0 0 var(--space-md);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    list-style: none;
}

.login-form-panel .woocommerce-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.login-form-panel .woocommerce-message {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.login-form-panel .woocommerce-info {
    background: var(--color-warm);
    border: 1px solid var(--color-warm-dark);
    color: var(--color-gray-700);
}

/* ---- Responsive ---- */
@media (max-width: 968px) {
    .login-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

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

    .login-hero-content {
        max-width: 100%;
    }

    .login-hero-content h2 {
        font-size: 1.75rem;
        margin-bottom: var(--space-lg);
    }

    .login-hero-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .login-form-panel {
        padding: var(--space-lg) var(--space-md);
    }

    .login-trust {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .login-hero {
        padding: var(--space-md);
    }

    .login-hero-content h2 {
        font-size: 1.5rem;
    }

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

    .login-form-panel {
        padding: var(--space-md) var(--space-sm);
    }
}

/* Account details form */
.woocommerce-EditAccountForm fieldset,
.edit-account fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
}

.woocommerce-EditAccountForm legend,
.edit-account legend {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-gray-200);
    width: 100%;
}

/* Generic WooCommerce form inputs */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce select,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content select {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--color-white);
    transition: all var(--duration) var(--ease);
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.woocommerce label,
.woocommerce-MyAccount-content label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    font-size: 0.875rem;
}

/* WooCommerce buttons */
.woocommerce button[type="submit"],
.woocommerce input[type="submit"],
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-Button {
    padding: 1rem 2rem;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.woocommerce button[type="submit"]:hover,
.woocommerce input[type="submit"]:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-Button:hover {
    background: var(--color-gray-800);
}

/* Address fields */
.woocommerce-address-fields .form-row {
    margin-bottom: var(--space-md);
}

/* WC account clearfix — no longer needed with grid layout */

/* ==========================================================================
   MY ACCOUNT CUSTOM DASHBOARD
   ========================================================================== */

.account-dashboard-custom {
    padding: 0;
}

/* Welcome banner */
.welcome-banner {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-text h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.welcome-text p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

.welcome-date {
    font-size: 0.8125rem;
    color: var(--color-gray-400);
    text-align: right;
}

/* Stats row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.stat-card {
    background: var(--color-white);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.orders { background: #F0F4FF; color: #3B5BDB; }
.stat-icon.wishlist { background: #FFF0F0; color: #E03131; }
.stat-icon.spent { background: #F0FFF4; color: #2B8A3E; }

.stat-value {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Content grid */

.quick-link-icon {
        width: 28px;
        height: 28px;
    }
    .quick-link-icon svg {
        width: 16px;
        height: 16px;
    }
}


/* Dashboard item row (for transport, etc.) */
.dash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 12px;
}
.dash-item:last-child {
    border-bottom: none;
}
.dash-item-info {
    flex: 1;
    min-width: 0;
}
.dash-item-title {
    font-weight: 500;
    color: #111827;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-item-meta {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}
.dash-item-amount {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
    text-align: right;
}

/* Mini product grid for Mine produkter preview */
.products-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.product-mini {
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #f3f4f6;
    display: block;
}
.product-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-mini-placeholder {
    width: 100%;
    height: 100%;
    background: #e5e7eb;
}
.product-mini-price {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px;
    text-align: center;
}
.product-mini:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .products-mini-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.content-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.content-card.full-width {
    grid-column: 1 / -1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.card-header h2 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.card-action {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    transition: color var(--duration) var(--ease);
}

.card-action:hover {
    color: var(--color-black);
}

/* Order items (dashboard) */
.order-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    color: inherit;
}

.order-item + .order-item {
    border-top: 1px solid var(--color-gray-100);
}

.order-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-gray-100);
}

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

.order-info {
    flex: 1;
    min-width: 0;
}

.order-title {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-meta {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.order-amount {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.order-status {
    display: inline;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.order-status.completed { background: #D4EDDA; color: #155724; }
.order-status.processing { background: #CCE5FF; color: #004085; }
.order-status.on-hold { background: #FFF3CD; color: #856404; }

/* Wishlist preview grid */
.wishlist-grid-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

.wishlist-preview-thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-gray-100);
    cursor: pointer;
    transition: transform var(--duration) var(--ease);
}

.wishlist-preview-thumb:hover {
    transform: scale(1.03);
}

.wishlist-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-more {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    background: #F5F0EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

/* Message previews (dashboard) */
.message-preview {
    padding: var(--space-sm) 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}

.message-preview + .message-preview {
    border-top: 1px solid var(--color-gray-100);
}

.message-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F59E0B;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.message-preview-info {
    flex: 1;
    min-width: 0;
}

.message-preview-title {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-preview-excerpt {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-preview-date {
    font-size: 0.6875rem;
    color: var(--color-gray-400);
    white-space: nowrap;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--space-lg);
    color: var(--color-gray-500);
}

.empty-state p {
    margin-bottom: var(--space-md);
}

/* Dashboard responsive */
@media (max-width: 1024px) {
    
.quick-link-icon {
        width: 28px;
        height: 28px;
    }
    .quick-link-icon svg {
        width: 16px;
        height: 16px;
    }
}


/* Dashboard item row (for transport, etc.) */
.dash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 12px;
}
.dash-item:last-child {
    border-bottom: none;
}
.dash-item-info {
    flex: 1;
    min-width: 0;
}
.dash-item-title {
    font-weight: 500;
    color: #111827;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-item-meta {
    font-size: 0.78rem;
    color: #6b7280;
    margin-top: 2px;
}
.dash-item-amount {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
    text-align: right;
}

/* Mini product grid for Mine produkter preview */
.products-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.product-mini {
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #f3f4f6;
    display: block;
}
.product-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-mini-placeholder {
    width: 100%;
    height: 100%;
    background: #e5e7eb;
}
.product-mini-price {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px;
    text-align: center;
}
.product-mini:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .products-mini-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
}

.content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .welcome-date {
        text-align: left;
    }

    .stats-row {
        grid-template-columns: 1fr;
    }
}

/* Account messages & transport */
.account-wishlist-content {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.account-section {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.section-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.badge-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.messages-list,
.transport-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.message-card,
.transport-card {
    padding: var(--space-md);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    transition: border-color var(--duration) var(--ease);
}

.message-card:hover,
.transport-card:hover {
    border-color: var(--color-gray-300);
}

.message-card.message-resolved {
    opacity: 0.6;
}

.message-header,
.transport-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.message-product a {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-black);
}

.message-product a:hover {
    text-decoration: underline;
}

.message-date,
.transport-date {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    white-space: nowrap;
}

.message-sender {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: 0.375rem;
}

.message-body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-gray-800);
    margin-bottom: 0.5rem;
}

.message-footer,
.transport-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.message-status,
.transport-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.message-status-open { background: #FFF3CD; color: #856404; }
.message-status-resolved { background: #D4EDDA; color: #155724; }

.transport-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.transport-details {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0.25rem 0 0.5rem;
}

.transport-status-scheduled { background: #E2E3E5; color: #383D41; }
.transport-status-in_transit { background: #CCE5FF; color: #004085; }
.transport-status-completed { background: #D4EDDA; color: #155724; }
.transport-status-cancelled { background: #F8D7DA; color: #721C24; }

/* Account wishlist page */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-lg);
}

.wishlist-item {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration) var(--ease);
}

.wishlist-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.wishlist-item-image {
    display: block;
    aspect-ratio: 1;
    background: var(--color-gray-100);
}

.wishlist-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-item-info {
    padding: var(--space-md);
}

.wishlist-item-info h4 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.wishlist-item-info h4 a {
    color: var(--color-black);
}

.wishlist-item-info h4 a:hover {
    text-decoration: underline;
}

.wishlist-item-price {
    font-weight: 500;
    color: var(--color-gray-600);
}

.wishlist-item .out-of-stock {
    display: inline;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-gray-200);
    color: var(--color-gray-600);
    margin-top: var(--space-xs);
}

.wishlist-remove {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--duration) var(--ease);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wishlist-item:hover .wishlist-remove {
    opacity: 1;
}

.wishlist-remove:hover {
    background: var(--color-black);
    color: var(--color-white);
}

.wishlist-empty {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-gray-500);
}

.wishlist-empty p {
    margin-bottom: var(--space-md);
}

.wishlist-loading {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-gray-500);
}

/* Responsive */
@media (max-width: 768px) {
    .account-stats {
        grid-template-columns: 1fr;
    }

    .account-sections {
        grid-template-columns: 1fr;
    }

    .account-quick-links {
        flex-wrap: wrap;
    }

    .quick-link {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

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

/* ==========================================================================
   ADDRESSES PAGE
   ========================================================================== */

.addresses-page-custom {
    padding: var(--space-md) 0;
}

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

.addresses-header h2 {
    font-size: 1.75rem;
    margin-bottom: var(--space-xs);
}

.addresses-subtitle {
    color: var(--color-gray-500);
}

/* Address cards grid */
.addresses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.address-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--duration) var(--ease);
}

.address-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.address-card.empty {
    border-style: dashed;
    background: var(--color-bg-alt);
}

.address-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
}

.address-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
}

.address-card.empty .address-icon {
    background: var(--color-white);
}

.address-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.address-card-content {
    min-height: 80px;
    margin-bottom: var(--space-md);
}

.address-card-content address {
    font-style: normal;
    line-height: 1.6;
    color: var(--color-gray-700);
}

.no-address {
    color: var(--color-gray-500);
    font-style: italic;
}

.address-card-actions {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
}

.address-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--duration) var(--ease);
}

.address-edit-btn:hover {
    background: var(--color-gray-800);
    color: var(--color-white);
}

.address-card.empty .address-edit-btn {
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-gray-300);
}

.address-card.empty .address-edit-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* Info box */
.addresses-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.info-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Edit address page */
.edit-address-page {
    padding: var(--space-md) 0;
}

.edit-address-header {
    margin-bottom: var(--space-xl);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-gray-500);
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
    transition: color var(--duration) var(--ease);
}

.back-link:hover {
    color: var(--color-black);
}

.edit-address-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.edit-address-title svg {
    color: var(--color-gray-600);
}

.edit-address-title h2 {
    font-size: 1.5rem;
    margin: 0;
}

/* Address form wrapper */
.edit-address-form-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.edit-address-form-wrapper .woocommerce-address-fields {
    max-width: 600px;
}

.edit-address-form-wrapper .form-row {
    margin-bottom: var(--space-md);
}

.edit-address-form-wrapper label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.edit-address-form-wrapper label .optional {
    font-weight: 400;
    color: var(--color-gray-400);
}

.edit-address-form-wrapper input[type="text"],
.edit-address-form-wrapper input[type="email"],
.edit-address-form-wrapper input[type="tel"],
.edit-address-form-wrapper select {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all var(--duration) var(--ease);
    background: var(--color-white);
}

.edit-address-form-wrapper input:focus,
.edit-address-form-wrapper select:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.edit-address-form-wrapper input::placeholder {
    color: var(--color-gray-400);
}

/* Two-column layout for name fields */
.edit-address-form-wrapper .form-row-first,
.edit-address-form-wrapper .form-row-last {
    width: calc(50% - var(--space-sm));
    display: inline;
    vertical-align: top;
}

.edit-address-form-wrapper .form-row-first {
    margin-right: var(--space-sm);
}

.edit-address-form-wrapper .form-row-last {
    margin-left: var(--space-sm);
}

/* Country/state select styling */
.edit-address-form-wrapper .select2-container {
    width: 100% !important;
}

.edit-address-form-wrapper .select2-container--default .select2-selection--single {
    height: auto;
    padding: 0.875rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.edit-address-form-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal;
    padding: 0;
    color: var(--color-black);
}

.edit-address-form-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

/* Submit button */
.edit-address-form-wrapper button[type="submit"] {
    margin-top: var(--space-md);
    padding: 1rem 2rem;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.edit-address-form-wrapper button[type="submit"]:hover {
    background: var(--color-gray-800);
}

/* Responsive */
@media (max-width: 768px) {
    .addresses-grid {
        grid-template-columns: 1fr;
    }

    .edit-address-form-wrapper {
        padding: var(--space-lg);
    }

    .edit-address-form-wrapper .form-row-first,
    .edit-address-form-wrapper .form-row-last {
        width: 100%;
        display: block;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==========================================================================
   ORDERS PAGE
   ========================================================================== */

/* Order rows (inside section card) */
.orders-card-content {
    padding: 0;
}

.order-row {
    display: grid;
    grid-template-columns: 48px 1fr auto auto 16px;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--duration) var(--ease);
}

.order-row:last-child {
    border-bottom: none;
}

.order-row:hover {
    background: var(--color-bg-alt);
}

.order-row-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

.order-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-row-info {
    min-width: 0;
}

.order-row-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 0.125rem;
}

.order-row-number {
    font-weight: 600;
    font-size: 0.875rem;
}

.order-row-date {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.order-row-products {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Order status */
.status-badge {
    display: inline;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: capitalize;
}

.status-badge.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-processing {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-on-hold {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.status-completed {
    background: #dcfce7;
    color: #166534;
}

.status-badge.status-cancelled,
.status-badge.status-refunded,
.status-badge.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.order-row-total {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

.order-row-arrow {
    color: var(--color-gray-300);
    flex-shrink: 0;
    transition: color var(--duration) var(--ease);
}

.order-row:hover .order-row-arrow {
    color: var(--color-gray-600);
}

/* Empty orders */
.orders-empty-inline {
    text-align: center;
    padding: var(--space-xl) 0;
}

.orders-empty-inline p {
    color: var(--color-gray-500);
    margin-bottom: var(--space-lg);
}

/* Orders responsive */
@media (max-width: 768px) {
    .order-row {
        grid-template-columns: 40px 1fr auto;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }

    .order-row-thumb {
        width: 40px;
        height: 40px;
    }

    .order-row-total,
    .order-row-arrow {
        display: none;
    }

    .order-row-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
}

/* ==========================================================================
   EDIT ACCOUNT PAGE
   ========================================================================== */

.edit-account-page-custom {
    padding: var(--space-md) 0;
}

.edit-account-header {
    margin-bottom: var(--space-xl);
}

.edit-account-header h2 {
    font-size: 1.75rem;
    margin-bottom: var(--space-xs);
}

.edit-account-subtitle {
    color: var(--color-gray-500);
}

/* Section cards */
.account-section-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}

.section-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-gray-200);
    text-align: left;
}

.section-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
    flex-shrink: 0;
}

.section-title {
    text-align: left;
}

.section-title h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--space-xs) 0;
}

.section-title p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

.section-card-content {
    padding: var(--space-lg);
}

/* Form styling within edit account — horizontal label | input layout */
.edit-account-page-custom .form-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.edit-account-page-custom .form-row-group {
    display: contents;
}

.edit-account-page-custom .form-row-group .form-row {
    margin-bottom: var(--space-md);
}

.edit-account-page-custom label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    padding-top: 0.125rem;
}

.edit-account-page-custom label .required {
    color: #dc2626;
}

.edit-account-page-custom input[type="text"],
.edit-account-page-custom input[type="email"],
.edit-account-page-custom input[type="password"] {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    transition: all var(--duration) var(--ease);
    background: var(--color-white);
}

.edit-account-page-custom input:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.edit-account-page-custom input::placeholder {
    color: var(--color-gray-400);
}

.edit-account-page-custom input:disabled,
.edit-account-page-custom input[readonly] {
    background: var(--color-gray-50, #f9fafb);
    color: var(--color-gray-500);
    cursor: not-allowed;
    border-color: var(--color-gray-200);
}

.field-hint {
    grid-column: 2;
    display: block;
    margin-top: calc(-1 * var(--space-sm));
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* Form actions */
.form-actions {
    padding-top: var(--space-md);
}

.form-actions button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 1rem 1.5rem;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.form-actions button[type="submit"]:hover {
    background: var(--color-gray-800);
}

/* Logout section on account page */
.account-logout-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
}
.account-logout-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: #B91C1C;
    background: #FEF2F2;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}
.account-logout-link:hover {
    color: #991B1B;
    background: #FEE2E2;
}

/* Address inline cards (inside edit-account) */
.address-cards-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.address-inline-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.address-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.address-inline-header h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.address-inline-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
    transition: color var(--duration) var(--ease);
}

.address-inline-edit:hover {
    color: var(--color-black);
}

.address-inline-content {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-gray-600);
    font-style: normal;
}

.address-inline-empty {
    font-size: 0.8125rem;
    color: var(--color-gray-400);
    font-style: italic;
    margin: 0;
}

/* Edit account responsive */
@media (max-width: 640px) {
    .edit-account-page-custom .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .section-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .address-cards-inline {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ADMIN-ONLY NOTICE BANNER
   ========================================================================== */
.admin-only-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-left: 3px solid #f9a825;
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 24px;
    font-size: 0.85rem;
    color: #5d4037;
    line-height: 1.4;
}
.admin-only-notice svg {
    flex-shrink: 0;
    color: #f9a825;
}

/* ==========================================================================
   BILAG (Købsbilag / Salgsbilag) — product groups
   ========================================================================== */
.bilag-page {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--color-gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.bilag-page .edit-account-header {
    margin-bottom: 8px;
}
.bilag-page .admin-only-notice {
    margin-bottom: 20px;
}

/* Summary line */
.bilag-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: #999;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.bilag-summary-sep {
    color: #ddd;
}

/* Group cards */
.bilag-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bilag-group-card {
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    transition: box-shadow 0.15s;
}
.bilag-group-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.bilag-group-card .section-card-header {
    background: #fafaf8;
    border-bottom: 1px solid #f0ece6;
    padding: 16px 20px;
}
.bilag-group-header {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.bilag-group-header:hover {
    background: #f5f3ef;
}
.bilag-group-chevron {
    color: #bbb;
    transition: transform 0.2s, color 0.15s;
    flex-shrink: 0;
    margin-left: auto;
}
.bilag-group-header:hover .bilag-group-chevron {
    color: #888;
}
.bilag-year {
    font-size: 0.72rem;
    font-weight: 500;
    color: #b0a898;
    background: #f0ece6;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}
.bilag-party-name {
    font-weight: 500;
    color: #444;
    font-size: 0.86rem;
    margin: 0;
    line-height: 1.4;
}
.bilag-totals {
    font-size: 0.82rem;
    color: #999;
    margin: 0;
    line-height: 1.5;
}
.bilag-profit {
    font-weight: 600;
}
.bilag-profit.profit-positive {
    color: #2e7d32;
}
.bilag-profit.profit-negative {
    color: #c62828;
}

/* Collapse state */
.bilag-group-card.is-collapsed .bilag-group-chevron {
    transform: rotate(-90deg);
}
.bilag-group-card.is-collapsed .bilag-group-content {
    display: none;
}

/* Product rows inside a group */
.bilag-group-content {
    padding: 4px 0;
}
.bilag-product-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    transition: background 0.1s;
}
.bilag-product-row:hover {
    background: #fcfbf9;
}
.bilag-product-row + .bilag-product-row {
    border-top: 1px solid #f5f3ef;
}
.bilag-product-thumb img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 0;
    display: block;
    border: 1px solid #f0f0f0;
}
.bilag-product-nothumb {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: #f8f6f3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d0c8be;
    border: 1px solid #ece8e2;
}
.bilag-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bilag-product-title {
    font-size: 0.86rem;
    font-weight: 500;
    color: #2a2a2a;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bilag-product-title:hover {
    color: #555;
    text-decoration: underline;
}
.bilag-product-id {
    font-size: 0.73rem;
    color: #bbb;
}
.bilag-product-prices {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.8rem;
    text-align: right;
    white-space: nowrap;
}
.bilag-price-buy {
    color: #aaa;
    font-size: 0.76rem;
}
.bilag-price-sold {
    color: #444;
    font-weight: 500;
}
@media (max-width: 768px) {
    .bilag-page {
        padding: 20px 16px;
    }
    .bilag-group-card .section-card-header {
        padding: 14px 14px;
    }
    .bilag-product-row {
        grid-template-columns: 36px 1fr auto;
        gap: 10px;
        padding: 8px 14px;
    }
    .bilag-product-thumb img {
        width: 36px;
        height: 36px;
    }
    .bilag-product-nothumb {
        width: 36px;
        height: 36px;
    }
}

/* Bilag pagination */
.bilag-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
}
.bilag-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e8e4de;
    border-radius: 0;
    font-size: 0.84rem;
    color: #666;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.bilag-page-link:hover {
    background: #f8f6f3;
    border-color: #d0c8be;
}
.bilag-page-current {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    font-weight: 600;
}
.bilag-page-current:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}
.bilag-page-dots {
    padding: 0 4px;
    color: #999;
}

/* ==========================================================================
   QUICK ORDER MODAL (orders page)
   ========================================================================== */

/* Header row with button */
.edit-account-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.quick-order-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.625rem 1.25rem;
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.quick-order-trigger:hover {
    background: var(--color-gray-800);
}

/* Empty state */
.orders-empty-inline {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}

.orders-empty-icon {
    color: var(--color-gray-300);
    margin-bottom: var(--space-md);
}

.orders-empty-inline p {
    color: var(--color-gray-500);
    font-size: 0.9375rem;
}

/* Modal overlay */
.quick-order-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.quick-order-modal.is-open {
    display: block;
}

.quick-order-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease;
}

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

/* Modal panel — slide in from right */
.quick-order-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 680px;
    max-width: 100%;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.quick-order-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.quick-order-panel-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.quick-order-panel-header p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

.quick-order-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    flex-shrink: 0;
}

.quick-order-close:hover {
    background: var(--color-gray-100);
    color: var(--color-black);
}

.quick-order-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
}

.quick-order-panel-footer {
    padding: var(--space-md) var(--space-xl);
    border-top: 1px solid var(--color-gray-200);
    text-align: center;
    flex-shrink: 0;
}

/* Search */
.quick-order-search {
    position: relative;
    margin-bottom: var(--space-md);
}

.quick-order-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
}

.quick-order-search input {
    width: 100%;
    padding: 0.75rem 0.875rem 0.75rem 2.75rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    background: var(--color-white);
    transition: all var(--duration) var(--ease);
}

.quick-order-search input:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.quick-order-search input::placeholder {
    color: var(--color-gray-400);
}

/* Search results dropdown */
.quick-order-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 50;
    margin-top: var(--space-xs);
    overflow: hidden;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: inherit;
    text-decoration: none;
    transition: background var(--duration) var(--ease);
    border-bottom: 1px solid var(--color-gray-50, #f9fafb);
}

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

.search-result-item:hover {
    background: var(--color-bg-alt);
}

.search-result-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-gray-100);
    flex-shrink: 0;
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-name {
    font-size: 0.875rem;
    font-weight: 500;
    display: block;
}

.search-result-price {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.search-no-results {
    padding: var(--space-md);
    text-align: center;
    color: var(--color-gray-500);
    font-size: 0.875rem;
}

/* Category filter pills */
.quick-order-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.quick-cat {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    background: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.quick-cat:hover {
    border-color: var(--color-gray-400);
    color: var(--color-black);
}

.quick-cat.active {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* Product grid */
.quick-order-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.quick-product-card {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--duration) var(--ease);
}

.quick-product-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.quick-product-image {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-gray-100);
}

.quick-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.quick-product-card:hover .quick-product-image img {
    transform: scale(1.03);
}

.quick-product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-gray-300);
}

.quick-product-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.quick-product-badge.sold {
    background: #fef3c7;
    color: #92400e;
}

.quick-product-info {
    padding: var(--space-sm) var(--space-sm) 0;
}

.quick-product-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-black);
    line-height: 1.4;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quick-product-name:hover {
    text-decoration: underline;
}

.quick-product-price {
    font-size: 0.875rem;
    font-weight: 600;
}

.quick-product-actions {
    padding: var(--space-sm);
}

.quick-add-btn,
.quick-reserve-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    text-decoration: none;
}

.quick-add-btn {
    background: var(--color-black);
    color: var(--color-white);
}

.quick-add-btn:hover {
    background: var(--color-gray-800);
}

.quick-add-btn.adding {
    opacity: 0.7;
    pointer-events: none;
}

.quick-add-btn.added {
    background: #166534;
}

.quick-reserve-btn {
    background: var(--color-bg-alt);
    color: var(--color-gray-600);
}

.quick-reserve-btn:hover {
    background: var(--color-gray-200);
    color: var(--color-black);
}

/* Spinner animation for add-to-cart */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.quick-add-btn .spin {
    animation: spin 0.8s linear infinite;
}

.quick-order-browse {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: color var(--duration) var(--ease);
}

.quick-order-browse:hover {
    color: var(--color-black);
}

/* Quick order responsive */
@media (max-width: 768px) {
    .quick-order-panel {
        width: 100%;
    }

    .quick-order-panel-header,
    .quick-order-panel-body,
    .quick-order-panel-footer {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .quick-order-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .edit-account-header-row {
        flex-direction: column;
    }

    .quick-order-trigger {
        align-self: flex-start;
    }
}

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */

.newsletter-section {
    padding: var(--space-2xl) 0;
    background: var(--color-black);
    color: var(--color-white);
}

.newsletter-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    max-width: 900px;
    margin: 0 auto;
}

.newsletter-text h2 {
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.newsletter-text p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.newsletter-form {
    flex-shrink: 0;
}

.newsletter-input-group {
    display: flex;
    gap: 0;
}

.newsletter-input {
    padding: 0.9375rem 1.25rem;
    font-family: var(--font);
    font-size: 0.9375rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    min-width: 240px;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}

.newsletter-section .btn-primary {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

.newsletter-section .btn-primary:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-100);
}

.newsletter-disclaimer {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-xs);
}

@media (max-width: 768px) {
    .newsletter-content {
        flex-direction: column;
        text-align: center;
    }

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

    .newsletter-input-group {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .newsletter-input {
        border-radius: var(--radius-md);
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        min-width: auto;
        width: 100%;
    }

    .newsletter-section .btn-primary {
        border-radius: var(--radius-md);
        width: 100%;
    }
}

/* ==========================================================================
   FOOTER SOCIAL & PAYMENTS
   ========================================================================== */

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--space-md);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--duration) var(--ease);
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}

.footer-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: var(--space-md);
}

.payments-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.payment-icons {
    display: flex;
    gap: 0.5rem;
}

.payment-icon {
    opacity: 0.7;
    transition: opacity var(--duration) var(--ease);
}

.payment-icon:hover {
    opacity: 1;
}


/* ==========================================================================
   MISC IMPROVEMENTS
   ========================================================================== */

/* Search button icon alignment */
.search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn svg {
    flex-shrink: 0;
}

/* WhatsApp icon in wholesale */
.whatsapp-icon {
    flex-shrink: 0;
}

/* ==========================================================================
   SHARED SECTION COMPONENTS (Frontpage + Archive)
   ========================================================================== */

.section-eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.section-title-lg {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.1;
    margin-bottom: 0.25em;
}

.section-title-sm {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.section-desc {
    font-size: 1.0625rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    max-width: 480px;
}

.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-xl);
    gap: var(--space-md);
}

.section-link-btn {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--ease);
}

.section-link-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* ==========================================================================
   MAKERS CAROUSEL (Frontpage)
   ========================================================================== */

.makers-carousel-section {
    padding: var(--space-xl) 0;
    background: var(--color-bg);
    overflow: hidden;
}

.makers-carousel-section .container {
    text-align: center;
}

.makers-carousel {
    margin: var(--space-lg) 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.makers-track {
    display: flex;
    gap: var(--space-lg);
    animation: marquee 40s linear infinite;
    width: max-content;
}

.makers-track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.maker-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--duration) var(--ease);
    flex-shrink: 0;
}

.maker-logo:hover {
    border-color: var(--color-black);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.maker-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    letter-spacing: 0.02em;
}

.maker-logo:hover .maker-name {
    color: var(--color-black);
}

.makers-cta {
    text-align: center;
    margin-top: var(--space-sm);
}

.makers-cta a {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.makers-cta a:hover {
    color: var(--color-black);
}

/* ==========================================================================
   DESIGN MASTERS — Frontpage Makers Section
   ========================================================================== */

.design-masters {
    padding: var(--space-2xl) 0;
    background: var(--color-white);
}

.makers-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.maker-showcase-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--duration-slow) var(--ease);
}

.maker-showcase-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.maker-showcase-portrait {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-gray-100);
}

.maker-showcase-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.maker-showcase-card:hover .maker-showcase-portrait img {
    transform: scale(1.05);
}

.maker-portrait-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-900);
    color: var(--color-white);
}

.maker-portrait-placeholder span {
    font-size: 2.5rem;
    font-weight: 600;
    opacity: 0.4;
}

.maker-showcase-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--space-md);
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

.maker-showcase-card:hover .maker-showcase-overlay {
    opacity: 1;
}

.maker-view-profile {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.03em;
}

.maker-showcase-info {
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

.maker-showcase-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.maker-showcase-meta {
    display: flex;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.maker-showcase-meta span + span::before {
    content: '·';
    margin-right: var(--space-xs);
}

.maker-showcase-excerpt {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    line-height: 1.5;
}

/* ==========================================================================
   ICONIC MODELS — Frontpage Models Section
   ========================================================================== */

.iconic-models {
    padding: var(--space-2xl) 0;
    background: var(--color-bg);
}

.models-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.model-showcase-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-gray-100);
    transition: all var(--duration-slow) var(--ease);
}

.model-showcase-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
    border-color: transparent;
}

.model-card-featured {
    grid-row: span 2;
}

.model-showcase-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-gray-100);
}

.model-card-featured .model-showcase-image {
    aspect-ratio: 3/4;
}

.model-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.model-showcase-card:hover .model-showcase-image img {
    transform: scale(1.05);
}

.model-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-warm);
}

.model-image-placeholder span {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-400);
}

.model-year-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: var(--color-black);
    color: var(--color-white);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
}

.model-showcase-info {
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

.model-showcase-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.model-showcase-number {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: 0.125rem;
}

.model-showcase-price {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    font-weight: 500;
}

/* ==========================================================================
   ARCHIVE ARTICLE FEATURE — Frontpage
   ========================================================================== */

.archive-article-feature {
    padding: var(--space-2xl) 0;
    background: var(--color-warm);
}

.article-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.article-feature-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--color-gray-100);
}

.article-feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-warm-dark);
}

.article-image-placeholder .placeholder-icon {
    font-size: 3rem;
    opacity: 0.3;
}

.article-feature-content .section-eyebrow {
    margin-bottom: var(--space-sm);
}

.article-feature-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

.article-feature-excerpt {
    font-size: 1rem;
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.article-feature-meta {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.article-feature-actions {
    display: flex;
    gap: var(--space-sm);
}

/* ==========================================================================
   ERA TIMELINE — Frontpage
   ========================================================================== */

.era-timeline {
    padding: var(--space-2xl) 0;
    background: var(--color-gray-900);
    color: var(--color-white);
}

.timeline-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.era-timeline .section-eyebrow {
    color: var(--color-gray-500);
}

.era-timeline .section-title-lg {
    color: var(--color-white);
}

.timeline-track {
    display: flex;
    justify-content: center;
    gap: 0;
    position: relative;
    padding: var(--space-lg) 0;
}

.timeline-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--color-gray-700);
    transform: translateY(-50%);
}

.timeline-era {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 200px;
    position: relative;
    z-index: 1;
    padding: 0 var(--space-sm);
    transition: transform var(--duration) var(--ease);
}

.timeline-era:hover {
    transform: translateY(-4px);
}

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

.era-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-gray-700);
    border: 2px solid var(--color-gray-900);
    transition: all var(--duration) var(--ease);
}

.timeline-era:hover .era-dot {
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.15);
}

.era-content {
    text-align: center;
}

.era-decade {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.era-content .era-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    line-height: 1.4;
}

.timeline-cta {
    text-align: center;
    margin-top: var(--space-xl);
}

.era-timeline .btn-secondary {
    border-color: rgba(255,255,255,0.2);
    color: var(--color-white);
}

.era-timeline .btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

/* ==========================================================================
   ARCHIVE STATS BAR — Frontpage
   ========================================================================== */

.archive-stats-bar {
    padding: var(--space-xl) 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-100);
}

.stats-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.stats-bar-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.stats-bar-text p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.stats-bar-numbers {
    display: flex;
    gap: var(--space-lg);
}

.archive-stats-bar .stat-item {
    text-align: center;
}

.archive-stats-bar .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.1;
}

.archive-stats-bar .stat-label {
    font-size: 0.6875rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stats-bar-btn {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    padding: 0.625rem 1.5rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: all var(--duration) var(--ease);
}

.stats-bar-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* ==========================================================================
   /ARKIV LANDING PAGE
   ========================================================================== */

/* Hero */
.archive-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
}

.archive-hero-content {
    max-width: 640px;
    margin: 0 auto;
}

.archive-badge {
    display: inline;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.archive-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.archive-hero-title em {
    font-style: italic;
    font-weight: 400;
}

.archive-hero-text {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* Archive Search */
.archive-search {
    max-width: 480px;
    margin: 0 auto;
}

.archive-search-form {
    display: flex;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease);
}

.archive-search-form:focus-within {
    border-color: rgba(255,255,255,0.3);
}

.archive-search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 0.9375rem;
    font-family: var(--font);
    outline: none;
}

.archive-search-input::placeholder {
    color: rgba(255,255,255,0.35);
}

.archive-search-btn {
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: color var(--duration) var(--ease);
}

.archive-search-btn:hover {
    color: var(--color-white);
}

/* Archive Stats Grid */
.archive-stats {
    padding: var(--space-lg) 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-gray-100);
}

.archive-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.archive-stat {
    text-align: center;
    text-decoration: none;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.archive-stat:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.archive-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.archive-stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Archive Browse Sections (Eras, Types) */
.archive-browse {
    padding: var(--space-2xl) 0;
    background: var(--color-white);
}

.era-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.era-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.era-card:hover {
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.era-card .era-decade {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.era-card:hover .era-decade {
    color: var(--color-white);
}

.era-card .era-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.era-card:hover .era-label {
    color: rgba(255,255,255,0.6);
}

/* Archive Sections */
.archive-section {
    padding: var(--space-2xl) 0;
    background: var(--color-bg);
}

.archive-section-alt {
    background: var(--color-white);
}

.archive-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-xl);
}

.archive-section .section-link {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.archive-section .section-link:hover {
    color: var(--color-black);
}

/* Makers Grid (Archive page) */
.makers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.maker-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    transition: all var(--duration-slow) var(--ease);
}

.maker-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.maker-portrait {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--space-md);
    background: var(--color-gray-100);
}

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

.maker-info .maker-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.maker-info .maker-years {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* Factories Grid */
.factories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.factory-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    transition: all var(--duration-slow) var(--ease);
}

.factory-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.factory-logo {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.factory-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
}

.factory-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-900);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.factory-info .factory-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.factory-info .factory-founded {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    display: block;
}

.factory-status {
    display: inline;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--space-xs);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.factory-status-active {
    background: #E8F5E9;
    color: #2E7D32;
}

/* Models Grid (Archive page) */
.models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.model-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--duration-slow) var(--ease);
}

.model-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.model-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--color-gray-100);
}

.model-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

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

.model-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-warm);
}

.model-info {
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

.model-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.model-year {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* Type Grid (Browse by furniture type) */
.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-sm);
}

.type-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-md);
    background: var(--color-bg);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}

.type-card:hover {
    border-color: var(--color-black);
    background: var(--color-black);
    transform: translateY(-1px);
}

.type-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-black);
}

.type-card:hover .type-name {
    color: var(--color-white);
}

.type-count {
    font-size: 0.8125rem;
    color: var(--color-gray-400);
}

.type-card:hover .type-count {
    color: rgba(255,255,255,0.6);
}

/* Archive Sub-Page Shared Styles */
.archive-page-header {
    padding: var(--space-lg) 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
}

.archive-breadcrumb {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.archive-breadcrumb a {
    color: var(--color-gray-500);
    text-decoration: none;
}

.archive-breadcrumb a:hover {
    color: var(--color-black);
}

.archive-page-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-xs);
}

.archive-page-desc {
    font-size: 1rem;
    color: var(--color-gray-600);
    max-width: 640px;
    line-height: 1.6;
}

.archive-filters {
    padding: var(--space-md) 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.filter-buttons {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.filter-btn {
    display: inline;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-bg);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}

.filter-btn:hover {
    border-color: var(--color-black);
    color: var(--color-black);
}

.filter-btn.active {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.filter-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.filter-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.active-filters {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
}

.active-filters-label {
    color: var(--color-gray-500);
}

.active-filter {
    padding: 0.25rem 0.75rem;
    background: var(--color-warm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}

.archive-grid-section {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.archive-back {
    padding: 0 0 var(--space-2xl);
}

.archive-empty {
    text-align: center;
    padding: var(--space-2xl) 0;
    color: var(--color-gray-500);
}

.archive-empty p {
    margin-bottom: var(--space-md);
}

.archive-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.pagination-pages {
    display: flex;
    gap: var(--space-2xs);
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
}

.pagination-page:hover,
.pagination-page.active {
    background: var(--color-black);
    color: var(--color-white);
}

.pagination-prev,
.pagination-next {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    text-decoration: none;
}

.pagination-prev:hover,
.pagination-next:hover {
    color: var(--color-black);
}

/* Maker extras */
.maker-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.maker-nationality {
    font-size: 0.75rem;
    color: var(--color-gray-400);
}

.maker-excerpt {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin-top: var(--space-xs);
    line-height: 1.5;
}

/* Factory extras */
.factory-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.factory-years {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.factory-location {
    font-size: 0.75rem;
    color: var(--color-gray-400);
}

/* Articles Grid */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.article-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--duration-slow) var(--ease);
}

.article-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.article-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-gray-100);
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

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

.article-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-warm);
}

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

.article-date {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-400);
    margin-bottom: var(--space-xs);
}

.article-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.article-excerpt {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.article-read-more {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

.article-card:hover .article-read-more {
    color: var(--color-black);
}

@media (max-width: 768px) {
    .archive-page-header {
        padding: var(--space-lg) 0 var(--space-md);
    }

    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SINGLE BREADCRUMB (shared by single-maker, single-model, etc.)
   ========================================================================== */

.single-breadcrumb {
    padding: var(--space-lg) 0 0;
}

/* ==========================================================================
   PROSE (rich text content blocks)
   ========================================================================== */

.prose {
    max-width: 72ch;
    line-height: 1.8;
    color: var(--color-gray-700);
}

.prose p {
    margin-bottom: 1.25em;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose h3,
.prose h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: var(--color-gray-900);
}

.prose ul,
.prose ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.prose li {
    margin-bottom: 0.35em;
}

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: var(--color-gray-900);
}

/* ==========================================================================
   SINGLE MAKER PAGE
   ========================================================================== */

.maker-hero {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.maker-hero-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.maker-hero-portrait img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.maker-portrait-placeholder.maker-portrait-large {
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-warm);
    border-radius: var(--radius-md);
    font-size: 4rem;
    font-weight: 600;
    color: var(--color-gray-400);
}

.maker-signature {
    margin-top: var(--space-md);
    text-align: center;
}

.maker-signature img {
    max-width: 200px;
    opacity: 0.7;
}

.maker-hero-name {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-gray-900);
    margin-bottom: var(--space-md);
}

.maker-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.maker-meta-item {
    font-size: 0.95rem;
    color: var(--color-gray-600);
}

.maker-meta-item strong {
    color: var(--color-gray-800);
    font-weight: 500;
}

.maker-meta-item a {
    color: var(--color-primary);
    text-decoration: none;
}

.maker-meta-item a:hover {
    text-decoration: underline;
}

.maker-hero-excerpt {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-gray-600);
    max-width: 60ch;
}

/* Maker Sections */
.maker-section {
    padding: var(--space-2xl) 0;
}

.maker-section-alt {
    background: var(--color-warm);
}

.maker-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-lg);
}

.maker-bio {
    max-width: 72ch;
}

/* Timeline */
.maker-timeline {
    max-width: 700px;
    position: relative;
    padding-left: var(--space-lg);
    border-left: 2px solid var(--color-gray-200);
}

.timeline-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm) 0 var(--space-lg);
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-lg) - 5px);
    top: calc(var(--space-sm) + 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, var(--color-gray-500));
    border: 2px solid var(--color-white);
}

.timeline-year {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-gray-900);
    min-width: 50px;
    flex-shrink: 0;
}

.timeline-event {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    line-height: 1.5;
}

/* Awards */
.maker-awards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.award-item {
    display: flex;
    gap: var(--space-md);
    align-items: baseline;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-100);
}

.award-year {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-gray-500);
    min-width: 50px;
    flex-shrink: 0;
}

.award-name {
    font-size: 0.95rem;
    color: var(--color-gray-800);
}

/* Factories inline list */
.factories-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.factory-inline-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.factory-inline-card:hover {
    border-color: var(--color-gray-400);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.factory-inline-card img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.factory-inline-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

/* Maker Links */
.maker-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.maker-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    font-size: 0.9rem;
    color: var(--color-gray-700);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.maker-link:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-900);
}

.maker-link svg {
    opacity: 0.5;
}

/* Maker Shop Section */
.maker-section-shop .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.maker-section-shop .section-link {
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
}

.maker-section-shop .section-link:hover {
    text-decoration: underline;
}

.product-grid-small {
    grid-template-columns: repeat(4, 1fr);
}

.product-card-small .product-image {
    aspect-ratio: 1;
}

/* Maker Back */
.maker-back {
    padding: var(--space-xl) 0 var(--space-2xl);
}

/* ==========================================================================
   SINGLE MODEL PAGE
   ========================================================================== */

.model-hero {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.model-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

/* Model Gallery */
.model-hero-gallery {
    position: sticky;
    top: calc(var(--header-height, 70px) + var(--space-lg));
}

.model-gallery-main {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-warm);
    margin-bottom: var(--space-sm);
}

.model-gallery-main img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
}

.model-gallery-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-warm);
    border-radius: var(--radius-md);
    color: var(--color-gray-400);
    font-size: 0.9rem;
}

.model-gallery-thumbs {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
}

.model-gallery-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--color-warm);
    transition: border-color 0.15s ease;
}

.model-gallery-thumb:hover,
.model-gallery-thumb.active {
    border-color: var(--color-gray-900);
}

.model-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Model Hero Info */
.model-hero-info {
    padding-top: var(--space-sm);
}

.model-hero-name {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-gray-900);
    margin-bottom: var(--space-md);
}

/* Designers */
.model-designers {
    font-size: 1rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.model-meta-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-500);
    display: block;
    margin-bottom: var(--space-xs);
}

.model-designers .model-meta-label {
    display: inline;
    margin-right: var(--space-xs);
}

.model-designer-link {
    color: var(--color-gray-900);
    text-decoration: none;
    font-weight: 500;
}

.model-designer-link:hover {
    text-decoration: underline;
}

/* Key Info */
.model-key-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-warm);
    border-radius: var(--radius-md);
}

.model-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-500);
}

.model-info-value {
    font-size: 0.95rem;
    color: var(--color-gray-900);
    font-weight: 500;
}

.model-price-range {
    color: var(--color-primary, var(--color-gray-900));
}

/* Dimensions */
.model-dimensions {
    margin-bottom: var(--space-lg);
}

.model-dimensions-grid {
    display: flex;
    gap: var(--space-md);
}

.dimension-item {
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-warm);
    border-radius: var(--radius-sm);
    min-width: 64px;
}

.dimension-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray-900);
    line-height: 1.2;
}

.dimension-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Factories on model page */
.model-factories {
    margin-bottom: var(--space-lg);
}

.model-factories-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.model-factory-link {
    display: inline;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9rem;
    color: var(--color-gray-700);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.model-factory-link:hover {
    border-color: var(--color-gray-400);
    color: var(--color-gray-900);
}

/* Tags */
.model-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.model-tag {
    display: inline;
    padding: 4px 12px;
    font-size: 0.8rem;
    color: var(--color-gray-600);
    background: var(--color-warm);
    border-radius: 999px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.model-tag:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
}

/* Model Sections */
.model-section {
    padding: var(--space-2xl) 0;
}

.model-section-alt {
    background: var(--color-warm);
}

.model-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-lg);
}

.model-subsection-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--space-md);
}

/* Identification Section */
.model-section-identify {
    background: var(--color-warm);
}

.marks-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.mark-item {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
    transition: border-color 0.15s ease;
}

.mark-item:hover {
    border-color: var(--color-gray-400);
}

.mark-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.model-id-tips {
    max-width: 72ch;
}

/* Warning Box (Reproductions) */
.model-section-warning {
    padding: var(--space-xl) 0;
}

.model-warning-box {
    padding: var(--space-lg);
    background: #FFF8F0;
    border: 1px solid #F0D0A0;
    border-radius: var(--radius-md);
}

.model-warning-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.15rem;
    font-weight: 600;
    color: #B45309;
    margin-bottom: var(--space-md);
}

.model-warning-title svg {
    stroke: #B45309;
    flex-shrink: 0;
}

/* Model Shop Section */
.model-section-shop .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.model-section-shop .section-link {
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
}

.model-section-shop .section-link:hover {
    text-decoration: underline;
}

/* Model Back */
.model-back {
    padding: var(--space-xl) 0 var(--space-2xl);
}

/* ==========================================================================
   SINGLE MAKER & MODEL — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .maker-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .maker-hero-portrait {
        max-width: 220px;
        margin: 0 auto;
    }

    .maker-hero-name {
        font-size: 1.75rem;
    }

    .maker-hero-meta {
        justify-content: center;
    }

    .maker-hero-excerpt {
        margin: 0 auto;
    }

    .maker-section-title {
        font-size: 1.25rem;
    }

    .maker-timeline {
        padding-left: var(--space-md);
    }

    .timeline-item {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .factories-inline {
        justify-content: center;
    }

    .maker-links {
        justify-content: center;
    }

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

    /* Model page mobile */
    .model-hero-grid {
        grid-template-columns: 1fr;
    }

    .model-hero-gallery {
        position: static;
    }

    .model-hero-name {
        font-size: 1.75rem;
    }

    .model-key-info {
        grid-template-columns: 1fr 1fr;
    }

    .model-dimensions-grid {
        flex-wrap: wrap;
    }

    .marks-gallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .model-section-title {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   SINGLE FACTORY PAGE
   ========================================================================== */

.factory-hero {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.factory-hero-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.factory-hero-logo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--color-warm);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.factory-logo-placeholder.factory-logo-large {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-warm);
    border-radius: var(--radius-md);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-gray-400);
}

.factory-hero-name {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-gray-900);
    margin-bottom: var(--space-md);
}

.factory-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.factory-meta-item {
    font-size: 0.95rem;
    color: var(--color-gray-600);
}

.factory-meta-item strong {
    color: var(--color-gray-800);
    font-weight: 500;
}

.factory-meta-active {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: #16a34a;
    font-weight: 500;
}

.active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
}

.factory-website {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.factory-website:hover {
    text-decoration: underline;
}

.factory-hero-excerpt {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-gray-600);
    max-width: 60ch;
}

/* Factory Sections */
.factory-section {
    padding: var(--space-2xl) 0;
}

.factory-section-alt {
    background: var(--color-warm);
}

.factory-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-lg);
}

.factory-section-desc {
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
    max-width: 60ch;
}

/* Factory Shop Section */
.factory-section-shop .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.factory-section-shop .section-link {
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
}

.factory-section-shop .section-link:hover {
    text-decoration: underline;
}

/* Factory Back */
.factory-back {
    padding: var(--space-xl) 0 var(--space-2xl);
}

/* Factory Mobile */
@media (max-width: 768px) {
    .factory-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .factory-hero-logo {
        max-width: 280px;
        margin: 0 auto;
    }

    .factory-hero-name {
        font-size: 1.75rem;
    }

    .factory-hero-meta {
        justify-content: center;
    }

    .factory-hero-excerpt {
        margin: 0 auto;
    }

    .factory-section-title {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   SINGLE ARTICLE PAGE
   ========================================================================== */

.article-single {
    padding-bottom: var(--space-2xl);
}

.article-header {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
}

.article-header .article-date {
    display: block;
    font-size: 0.85rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.article-header .article-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-gray-900);
    margin-bottom: var(--space-md);
}

.article-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-gray-600);
    max-width: 60ch;
    margin: 0 auto var(--space-lg);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
}

.article-tag {
    display: inline;
    padding: 4px 12px;
    font-size: 0.8rem;
    color: var(--color-gray-600);
    background: var(--color-warm);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.article-tag:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
}

/* Featured Image */
.article-featured-image {
    margin-bottom: var(--space-xl);
}

.article-featured-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Article Content */
.article-single .article-content {
    padding: var(--space-lg) 0;
}

.prose-lg {
    font-size: 1.05rem;
    line-height: 1.85;
}

/* Sources */
.article-sources {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--space-xl);
}

.sources-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-md);
}

.sources-list {
    list-style: none;
    padding: 0;
}

.source-item {
    padding: var(--space-xs) 0;
    font-size: 0.9rem;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
}

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

.source-item a {
    color: var(--color-primary);
    text-decoration: none;
}

.source-item a:hover {
    text-decoration: underline;
}

.source-author {
    color: var(--color-gray-500);
    font-style: italic;
}

/* Related Content */
.article-related {
    padding: var(--space-2xl) 0;
    background: var(--color-warm);
}

.related-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--space-xl);
}

.related-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.related-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-800);
    margin-bottom: var(--space-md);
}

.related-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.related-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-gray-800);
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 0.15s ease;
}

.related-item:hover {
    border-color: var(--color-gray-400);
}

.related-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.related-item-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gray-400);
}

.related-item-text {
    padding: var(--space-xs) var(--space-md);
}

.related-items-models {
    gap: var(--space-md);
}

.related-model {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: var(--color-gray-800);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.related-model img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-200);
}

.related-model-placeholder {
    width: 80px;
    height: 80px;
    background: var(--color-warm);
    border-radius: var(--radius-sm);
}

.related-model:hover img {
    border-color: var(--color-gray-400);
}

/* Article Back */
.article-back,
.product-back {
    padding: var(--space-xl) 0 var(--space-2xl);
}

/* Article Mobile */
@media (max-width: 768px) {
    .article-header .article-title {
        font-size: 1.75rem;
    }

    .article-lead {
        font-size: 1.05rem;
    }

    .article-featured-image img {
        max-height: 300px;
        border-radius: 0;
    }

    .related-items-models {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */

.error-404 {
    padding: var(--space-2xl) 0;
    text-align: center;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.error-code {
    font-size: 6rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-gray-200);
    margin-bottom: var(--space-md);
}

.error-title {
    font-family: var(--font);
    font-size: 1.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-sm);
}

.error-text {
    font-size: 1rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    max-width: 48ch;
    margin-bottom: var(--space-xl);
}

.error-search {
    display: flex;
    gap: var(--space-xs);
    width: 100%;
    max-width: 480px;
    margin-bottom: var(--space-xl);
}

.error-search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: border-color var(--duration-fast) var(--ease);
}

.error-search-input:focus {
    outline: none;
    border-color: var(--color-gray-400);
}

.error-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.error-link {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    background: var(--color-warm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.error-link:hover,
.error-link:focus-visible {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
}

@media (max-width: 768px) {
    .error-code {
        font-size: 4rem;
    }

    .error-title {
        font-size: 1.35rem;
    }

    .error-search {
        flex-direction: column;
    }
}

/* Featured Article (Archive page) */
.archive-featured-article {
    padding: var(--space-2xl) 0;
    background: var(--color-warm);
}

.featured-article-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.featured-article-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.featured-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-article-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.featured-article-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

.featured-article-excerpt {
    font-size: 1rem;
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* Archive CTA */
.archive-cta {
    padding: var(--space-2xl) 0;
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
}

.archive-cta-content {
    max-width: 520px;
    margin: 0 auto;
}

.archive-cta h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.archive-cta p {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.archive-cta .btn-primary {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

.archive-cta .btn-primary:hover {
    background: transparent;
    color: var(--color-white);
}

/* ==========================================================================
   ARCHIVE + FRONTPAGE RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .section-header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    /* Makers carousel */
    .makers-carousel-section {
        padding: var(--space-lg) 0;
    }

    /* Design masters */
    .makers-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .maker-showcase-info {
        padding: var(--space-xs) var(--space-sm) var(--space-sm);
    }

    .maker-showcase-excerpt {
        display: none;
    }

    /* Iconic models */
    .models-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .model-card-featured {
        grid-row: auto;
    }

    .model-card-featured .model-showcase-image {
        aspect-ratio: 4/3;
    }

    /* Article feature */
    .article-feature-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Era timeline */
    .timeline-track {
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: center;
    }

    .timeline-track::before {
        display: none;
    }

    .timeline-era {
        width: calc(50% - var(--space-sm));
        max-width: none;
        padding: var(--space-sm);
        background: rgba(255,255,255,0.05);
        border-radius: var(--radius-md);
    }

    .era-marker {
        display: none;
    }

    /* Stats bar */
    .stats-bar-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .stats-bar-numbers {
        gap: var(--space-md);
    }

    /* Archive landing page */
    .archive-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

    .models-grid {
        grid-template-columns: 1fr;
    }

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

    .featured-article-card {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .archive-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* ==========================================================================
   GLOSSARY (ORDBOG)
   ========================================================================== */

/* Hero */
.glossary-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
}

.glossary-hero-content {
    max-width: 600px;
    margin: 0 auto;
}

.glossary-badge {
    display: inline;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.glossary-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.glossary-hero-text {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
}

/* Alphabet Navigation */
.glossary-alpha-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 50;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
    padding: var(--space-sm) 0;
}

.alpha-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}

.alpha-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease);
}

.alpha-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-black);
}

.alpha-active {
    background: var(--color-black);
    color: var(--color-white);
}

.alpha-active:hover {
    background: var(--color-gray-800);
    color: var(--color-white);
}

.alpha-disabled {
    color: var(--color-gray-300);
    cursor: default;
}

.alpha-disabled:hover {
    background: transparent;
    color: var(--color-gray-300);
}

/* Category Filters */
.glossary-filters {
    padding: var(--space-md) 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-gray-100);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.filter-chip {
    display: inline;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 2rem;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease);
}

.filter-chip:hover {
    border-color: var(--color-black);
    color: var(--color-black);
}

.filter-chip-active {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.filter-chip-active:hover {
    background: var(--color-gray-800);
    color: var(--color-white);
}

/* Terms Content */
.glossary-content {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.glossary-letter-group {
    margin-bottom: var(--space-xl);
    scroll-margin-top: calc(var(--header-height) + 4rem);
}

.glossary-letter-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-gray-200);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-gray-100);
}

.glossary-terms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.glossary-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: all var(--duration) var(--ease);
}

.glossary-card:hover {
    border-color: var(--color-black);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.glossary-card-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 0.25rem;
}

.glossary-card-aka {
    font-size: 0.75rem;
    color: var(--color-gray-400);
    font-style: italic;
    margin-bottom: var(--space-xs);
}

.glossary-card-def {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    flex: 1;
}

.glossary-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: var(--space-xs);
}

.glossary-cat-tag {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-500);
    background: var(--color-bg-alt);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.glossary-card-arrow {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-gray-300);
    transition: all var(--duration-fast) var(--ease);
}

.glossary-card:hover .glossary-card-arrow {
    color: var(--color-black);
    transform: translateX(3px);
}

.glossary-empty {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-gray-500);
}

/* Glossary CTA */
.glossary-cta {
    padding: var(--space-xl) 0;
    background: var(--color-warm);
    text-align: center;
}

.glossary-cta-content {
    max-width: 480px;
    margin: 0 auto;
}

.glossary-cta h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: var(--space-xs);
}

.glossary-cta p {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

/* ==========================================================================
   GLOSSARY SINGLE TERM
   ========================================================================== */

/* Breadcrumb */
.glossary-breadcrumb {
    padding: var(--space-sm) 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-gray-100);
}

.glossary-breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.glossary-breadcrumb a {
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}

.glossary-breadcrumb a:hover {
    color: var(--color-black);
}

.breadcrumb-sep {
    color: var(--color-gray-300);
    font-size: 0.75rem;
}

.breadcrumb-current {
    color: var(--color-black);
    font-weight: 500;
}

/* Term Header */
.glossary-term-header {
    padding: var(--space-xl) 0 var(--space-lg);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-100);
}

.term-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.1;
    margin-bottom: var(--space-xs);
}

.term-aka {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.term-aka span {
    font-style: italic;
}

.term-categories {
    display: flex;
    gap: 0.375rem;
}

.term-cat-tag {
    display: inline;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-600);
    background: var(--color-bg-alt);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease);
}

.term-cat-tag:hover {
    background: var(--color-black);
    color: var(--color-white);
}

/* Term Body Layout */
.glossary-term-body {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.term-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-xl);
    align-items: start;
}

/* TLDR Box */
.term-tldr {
    padding: var(--space-md);
    background: var(--color-warm);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-gray-700);
}

.term-tldr strong {
    color: var(--color-black);
}

/* Main Content */
.term-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-gray-700);
}

.term-content h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-black);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.term-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-black);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.term-content p {
    margin-bottom: var(--space-md);
}

.term-content ul, .term-content ol {
    margin-bottom: var(--space-md);
    padding-left: 1.5rem;
}

.term-content li {
    margin-bottom: 0.375rem;
}

.term-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
}

/* Sidebar */
.term-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.term-sidebar-section {
    padding: var(--space-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-100);
}

.term-sidebar-section h3 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.term-related-links,
.term-related-terms {
    list-style: none;
    padding: 0;
    margin: 0;
}

.term-related-links li,
.term-related-terms li {
    margin-bottom: 0.375rem;
}

.term-related-links a,
.term-related-terms a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    text-decoration: none;
    padding: 0.375rem 0;
    transition: color var(--duration-fast) var(--ease);
}

.term-related-links a:hover,
.term-related-terms a:hover {
    color: var(--color-black);
}

.related-type-icon {
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Prev/Next Navigation */
.glossary-term-nav {
    border-top: 1px solid var(--color-gray-100);
    padding: var(--space-lg) 0;
    background: var(--color-bg);
}

.term-nav-inner {
    display: flex;
    justify-content: space-between;
}

.term-nav-link {
    text-decoration: none;
    color: inherit;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: all var(--duration) var(--ease);
    max-width: 45%;
}

.term-nav-link:hover {
    border-color: var(--color-black);
    box-shadow: var(--shadow-sm);
}

.term-nav-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-400);
    margin-bottom: 0.25rem;
}

.term-nav-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-black);
}

.term-nav-next {
    text-align: right;
}

/* ==========================================================================
   GLOSSARY RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .alpha-bar {
        gap: 0.125rem;
    }

    .alpha-link {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .glossary-terms-grid {
        grid-template-columns: 1fr;
    }

    .glossary-letter-heading {
        font-size: 2rem;
    }

    .term-layout {
        grid-template-columns: 1fr;
    }

    .term-nav-inner {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .term-nav-link {
        max-width: 100%;
    }

    .term-nav-next {
        text-align: left;
    }

    .filter-chips {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   RESTORATION GUIDES
   ========================================================================== */

/* Archive Grid */
.restoration-grid-section {
    padding: var(--space-xl) 0 var(--space-2xl);
}

.restoration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

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

.restoration-card {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.restoration-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.restoration-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-gray-100);
}

.restoration-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.restoration-card:hover .restoration-card-image img {
    transform: scale(1.03);
}

.restoration-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
}

.restoration-skill-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-black);
    color: var(--color-white);
}

.restoration-skill-begynder { background: #00a32a; }
.restoration-skill-oevet { background: #dba617; }
.restoration-skill-avanceret { background: #a00; }

.restoration-card-content {
    padding: var(--space-md);
}

.restoration-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-xs);
}

.restoration-card-excerpt {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.restoration-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.restoration-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-xs);
}

.restoration-tag {
    display: inline;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    text-decoration: none;
}

.restoration-tag-material {
    background: var(--color-warm);
    color: var(--color-gray-800);
}

/* Difficulty dots */
.difficulty-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.difficulty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gray-200);
    display: inline;
}

.difficulty-dot.filled {
    background: var(--color-black);
}

/* Filter bar */
.restoration-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Single Guide */
.guide-hero {
    padding: var(--space-xl) 0;
}

.guide-hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.guide-hero-title {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.guide-hero-excerpt {
    font-size: 1.1rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.guide-hero-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.guide-meta-badge {
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-black);
    color: var(--color-white);
}

.guide-skill-begynder { background: #00a32a; }
.guide-skill-oevet { background: #dba617; }
.guide-skill-avanceret { background: #a00; }

.guide-meta-item {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

.guide-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.guide-hero-image {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.guide-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.guide-section-alt {
    background: var(--color-bg-alt);
}

.guide-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

/* Requirements grid */
.guide-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.guide-checklist {
    list-style: none;
    padding: 0;
}

.guide-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 0.95rem;
}

.guide-checklist li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-gray-500);
}

/* Safety */
.guide-safety {
    background: var(--color-warm);
    padding: var(--space-lg);
    border-left: 4px solid #dba617;
}

.guide-safety .guide-section-title {
    margin-bottom: var(--space-sm);
}

/* Steps */
.guide-steps {
    max-width: 800px;
}

.guide-step {
    display: flex;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.guide-step:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.guide-step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-black);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50%;
}

.guide-step-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.guide-step-text {
    color: var(--color-gray-700);
    line-height: 1.65;
}

.guide-step-image {
    margin-top: var(--space-sm);
}

.guide-step-image img {
    max-width: 100%;
    height: auto;
}

/* Tips grid */
.guide-tips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.guide-title-tips { color: #00a32a; }
.guide-title-mistakes { color: #a00; }

.guide-tips-content p,
.guide-mistakes-content p {
    margin-bottom: var(--space-xs);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Before/After gallery */
.guide-before-after {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
}

.ba-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Video */
.guide-video {
    max-width: 800px;
    margin: 0 auto;
}

.guide-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Guide back */
.guide-back {
    padding: var(--space-lg) 0 var(--space-2xl);
}

/* ==========================================================================
   WORKSHOP (VÆRKSTEDET) - Q&A
   ========================================================================== */

/* Header */
.workshop-header {
    padding: var(--space-xl) 0 var(--space-lg);
    background: var(--color-black);
    color: var(--color-white);
}

.workshop-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.workshop-title {
    font-size: 2rem;
    font-weight: 600;
    margin-right: auto;
}

.workshop-desc {
    width: 100%;
    color: var(--color-gray-400);
    font-size: 1rem;
    order: 3;
    margin-top: -var(--space-xs);
}

.workshop-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.workshop-user-points {
    font-size: 0.85rem;
    color: var(--color-gray-400);
}

/* Ask Form */
.workshop-ask-form {
    padding: var(--space-lg) 0;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-gray-200);
}

.workshop-form .form-group {
    margin-bottom: var(--space-md);
}

.workshop-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: var(--space-xs);
}

.workshop-form input[type="text"],
.workshop-form textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font);
    font-size: 0.95rem;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    transition: border-color var(--duration) var(--ease);
}

.workshop-form input[type="text"]:focus,
.workshop-form textarea:focus {
    outline: none;
    border-color: var(--color-black);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 10px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    transition: all var(--duration-fast);
}

.form-checkbox:has(input:checked) {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.form-checkbox input {
    display: none;
}

.form-actions {
    display: flex;
    gap: var(--space-sm);
}

.form-message {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    font-size: 0.9rem;
    display: none;
}

.form-message.form-success {
    display: block;
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.form-message.form-error {
    display: block;
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
}

.btn-primary {
    background: var(--color-black);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-gray-800);
}

.btn-secondary {
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-gray-300);
}

.btn-secondary:hover {
    border-color: var(--color-black);
}

/* Filters */
.workshop-filters {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.workshop-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.workshop-sort-tabs {
    display: flex;
    gap: 0;
}

.workshop-tab {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all var(--duration-fast);
}

.workshop-tab:hover {
    color: var(--color-black);
}

.workshop-tab.active {
    color: var(--color-black);
    border-bottom-color: var(--color-black);
}

.workshop-search {
    display: flex;
    align-items: center;
}

.workshop-search input {
    padding: 8px 12px;
    font-family: var(--font);
    font-size: 0.85rem;
    border: 1px solid var(--color-gray-300);
    border-right: none;
    width: 200px;
}

.workshop-search input:focus {
    outline: none;
    border-color: var(--color-black);
}

.workshop-search-btn {
    padding: 8px 12px;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.workshop-tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-sm);
}

.workshop-tag-btn {
    padding: 4px 12px;
    font-size: 0.8rem;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    text-decoration: none;
    transition: all var(--duration-fast);
}

.workshop-tag-btn:hover,
.workshop-tag-btn.active {
    background: var(--color-black);
    color: var(--color-white);
}

.workshop-tag-clear {
    background: none;
    color: var(--color-gray-500);
    text-decoration: underline;
}

/* Question List */
.workshop-questions {
    padding: var(--space-lg) 0 var(--space-2xl);
}

.workshop-question-list {
    display: flex;
    flex-direction: column;
}

.workshop-question-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-gray-100);
    text-decoration: none;
    color: inherit;
    transition: background var(--duration-fast);
}

.workshop-question-card:hover {
    background: var(--color-bg-alt);
    margin: 0 calc(-1 * var(--space-sm));
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

.workshop-question-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 60px;
    flex-shrink: 0;
}

.workshop-stat {
    text-align: center;
    padding: 6px 8px;
    border: 1px solid var(--color-gray-200);
    min-width: 54px;
}

.workshop-stat.has-answers {
    border-color: var(--color-black);
}

.workshop-stat.has-best {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.workshop-stat-num {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.workshop-stat-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: inherit;
    opacity: 0.7;
}

.workshop-question-content {
    flex: 1;
    min-width: 0;
}

.workshop-question-title {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 6px;
}

.workshop-question-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.workshop-tag {
    display: inline;
    padding: 1px 6px;
    font-size: 0.7rem;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.workshop-tag-material {
    background: var(--color-warm);
}

.workshop-question-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.workshop-author {
    font-weight: 500;
    color: var(--color-gray-700);
}

/* Reputation levels */
.workshop-level,
.workshop-user-level {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
}

.workshop-level-begynder { background: var(--color-gray-100); color: var(--color-gray-600); }
.workshop-level-haandvaerker { background: #e3f2fd; color: #1565c0; }
.workshop-level-mester { background: #fff3e0; color: #e65100; }
.workshop-level-ekspert { background: #fce4ec; color: #880e4f; }

.workshop-solved-badge {
    flex-shrink: 0;
    color: #00a32a;
    padding: var(--space-xs);
}

/* Single Question */
.question-section {
    padding: var(--space-xl) 0 var(--space-lg);
}

.question-title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--space-sm);
}

.question-meta-bar {
    display: flex;
    gap: var(--space-md);
    font-size: 0.85rem;
    color: var(--color-gray-500);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-lg);
}

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

.question-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-lg);
}

.question-author-bar {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-sm);
    background: var(--color-bg-alt);
}

.question-author,
.answer-author {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.question-author img,
.answer-author img {
    border-radius: 50%;
}

.question-author-name,
.answer-author-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.question-author-level,
.answer-author-level {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Answers */
.answers-section {
    padding: 0 0 var(--space-2xl);
}

.answers-heading {
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-lg);
}

.answer-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.answer-best {
    background: #f1f8e9;
    margin: 0 calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    border: 1px solid #c5e1a5;
    border-bottom: 1px solid #c5e1a5;
}

.answer-vote-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    flex-shrink: 0;
}

.answer-vote-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    cursor: pointer;
    color: var(--color-gray-500);
    transition: all var(--duration-fast);
    border-radius: 50%;
}

.answer-vote-btn:hover {
    border-color: var(--color-black);
    color: var(--color-black);
}

.answer-vote-btn.voted {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.answer-vote-count {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.answer-best-badge {
    color: #00a32a;
    margin-top: 4px;
}

.answer-mark-best-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-gray-300);
    background: none;
    color: var(--color-gray-400);
    cursor: pointer;
    border-radius: 50%;
    margin-top: 4px;
    transition: all var(--duration-fast);
}

.answer-mark-best-btn:hover {
    border-color: #00a32a;
    color: #00a32a;
    border-style: solid;
}

.answer-content-col {
    flex: 1;
    min-width: 0;
}

.answer-best-label {
    display: inline;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #00a32a;
    margin-bottom: var(--space-xs);
}

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

.answer-author-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-gray-100);
}

.answer-date {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

/* Answer form */
.answer-form-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--color-gray-200);
}

.answer-form-heading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.answer-login-prompt {
    text-align: center;
    padding: var(--space-xl);
    background: var(--color-bg-alt);
}

.answer-login-prompt p {
    margin-bottom: var(--space-sm);
    color: var(--color-gray-600);
}

/* Workshop empty state */
.workshop-empty {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-gray-500);
}

/* ==========================================================================
   RESTORATION & WORKSHOP RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .restoration-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .restoration-grid-small {
        grid-template-columns: 1fr 1fr;
    }

    .guide-hero .container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .guide-hero-title {
        font-size: 1.6rem;
    }

    .guide-requirements {
        grid-template-columns: 1fr;
    }

    .guide-tips-grid {
        grid-template-columns: 1fr;
    }

    .guide-step {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .workshop-header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .workshop-title {
        margin-right: 0;
    }

    .workshop-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .workshop-search input {
        width: 100%;
        flex: 1;
    }

    .workshop-question-card {
        gap: var(--space-sm);
    }

    .workshop-question-stats {
        min-width: 48px;
    }

    .question-title {
        font-size: 1.4rem;
    }

    .question-meta-bar {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .answer-card {
        gap: var(--space-sm);
    }
}

/* ==========================================================================
   SMALL PHONE (≤480px)
   ========================================================================== */

@media (max-width: 480px) {
    .error-code {
        font-size: 3rem;
    }

    .maker-hero-name,
    .model-hero-name,
    .factory-hero-name {
        font-size: 1.5rem;
    }

    .maker-section-title,
    .model-section-title,
    .factory-section-title {
        font-size: 1.1rem;
    }

    .model-key-info {
        grid-template-columns: 1fr;
    }

    .model-gallery-thumb {
        width: 48px;
        height: 48px;
    }

    .product-grid-small {
        grid-template-columns: 1fr;
    }

    .dimension-item {
        min-width: 52px;
        padding: var(--space-xs);
    }

    .header-actions {
        gap: 0;
    }
}

/* Mobile: tighter padding on warm-bg card containers */
@media (max-width: 768px) {
    .shop-archive .container,
    .product-single .container,
    .contact-page > .container,
    .page-about > .container,
    .page-faq > .container,
    .page-dealers > .container,
    .categories-page > .container,
    .wishlist-page > .container,
    div.woocommerce-page > .container,
    .cart-page > .container {
        border-radius: 0;
        padding: var(--space-lg) var(--space-sm);
        box-shadow: none;
    }

    .shop-archive,
    .product-single,
    .contact-page,
    .page-about,
    .page-faq,
    .page-dealers,
    .categories-page,
    .wishlist-page,
    div.woocommerce-page,
    .cart-page {
        padding: var(--space-sm) 0;
    }
}
/* ==========================================================================
   MY PRODUCTS — Account endpoint (shop manager only) — mp2 grid redesign
   ========================================================================== */

.mp2-page {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
}

/* Header */
.mp2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.mp2-h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #111;
}

/* View toggle */
.view-toggle {
    display: flex;
    background: #f3f4f6;
    border-radius: var(--radius-sm, 6px);
    padding: 3px;
    gap: 2px;
}
.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.view-btn.active {
    background: #111;
    color: #fff;
}
.view-btn:hover:not(.active) {
    background: #e5e7eb;
    color: #111;
}

/* Stats bar */
.mp2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md, 10px);
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    display: block;
}
.stat-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.stat-card.active {
    border-color: #111;
    background: #111;
}
.stat-card.active .stat-val,
.stat-card.active .stat-lbl {
    color: #fff;
}
.stat-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}
.stat-lbl {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 1px;
}

/* Filters */
.mp2-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.mp2-search {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md, 8px);
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    background: #fff;
    transition: border-color 0.15s;
}
.mp2-search:focus {
    border-color: #111;
}
.mp2-select {
    height: 34px;
    padding: 0 28px 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md, 8px);
    font-size: 0.82rem;
    font-family: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.mp2-select:focus {
    border-color: #111;
}
.mp2-result-count {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
    margin-left: auto;
}

/* Empty state — reuse .mp-empty from general CSS */
.mp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 0;
    color: var(--color-muted, #999);
    text-align: center;
}
.mp-empty svg { opacity: 0.25; }

/* Grid */
.mp2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.mp2-grid.is-list {
    grid-template-columns: 1fr;
    gap: 4px;
}

/* Card */
@keyframes mp2CardUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mp2-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.15s;
    animation: mp2CardUp 0.35s ease both;
}
.mp2-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    transform: translateY(-3px);
    border-color: #d1d5db;
}
.mp2-card.is-draft {
    border-top: 2px solid #f59e0b;
}
.mp2-card.is-private {
    border-top: 2px solid #3b82f6;
}

/* Card image */
.card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
}
.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.mp2-card:hover .card-img img {
    transform: scale(1.04);
}
.card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
}

/* Stock badge */
.stock-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.badge-in  { background: #dcfce7; color: #15803d; }
.badge-out { background: #fee2e2; color: #b91c1c; }

/* Edit overlay */
.edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s;
}
.mp2-card:hover .edit-overlay {
    opacity: 1;
}
.edit-pill {
    background: #fff;
    color: #111;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.01em;
}

/* Card body */
.card-body {
    padding: 10px 12px 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.card-sku {
    font-size: 0.65rem;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.card-maker {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-meta {
    font-size: 0.68rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card footer */
.card-footer {
    padding: 6px 12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}
.card-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: flex-end;
}
.tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 500;
    white-space: nowrap;
}
.tag-ok      { background: #dcfce7; color: #15803d; }
.tag-hidden  { background: #f3f4f6; color: #4b5563; }
.tag-partial { background: #fef9c3; color: #92400e; }
.tag-neutral { background: #f3f4f6; color: #4b5563; }
.tag-info    { background: #eff6ff; color: #1d4ed8; }

/* List mode overrides */
.mp2-grid.is-list .mp2-card {
    flex-direction: row;
    border-radius: var(--radius-sm, 6px);
    animation: none;
    transform: none !important;
}
.mp2-grid.is-list .card-img {
    width: 90px;
    height: 90px;
    aspect-ratio: 1;
    flex-shrink: 0;
}
.mp2-grid.is-list .card-body {
    padding: 8px 10px 4px;
    flex: 1;
}
.mp2-grid.is-list .card-footer {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    border-top: none;
    border-left: 1px solid #f3f4f6;
    padding: 8px 12px;
    flex-shrink: 0;
    min-width: 110px;
}
.mp2-grid.is-list .edit-overlay { display: none; }
.mp2-grid.is-list .stock-badge {
    position: static;
    display: inline-block;
    margin-top: 4px;
}

/* Pagination */
.mp2-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 20px;
}
.mp2-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.8rem;
    color: #374151;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.mp2-pagination .page-numbers:hover,
.mp2-pagination .page-numbers.current {
    background: #111;
    border-color: #111;
    color: #fff;
}
.mp2-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
}

/* Responsive */
@media (max-width: 1024px) {
    .mp2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .mp2-page   { font-size: 0.82rem; }
    .mp2-h1     { font-size: 1rem; }
    .mp2-stats  { grid-template-columns: repeat(2, 1fr); }
    .mp2-filters { gap: 6px; }
    .mp2-search { min-width: 120px; }
    .mp2-grid   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 640px) {
    .mp2-grid { grid-template-columns: 1fr; gap: 6px; }
    .mp2-grid.is-list .card-img { width: 70px; height: 70px; }
}

/* ── Edit page ── */
.mp-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.82rem;
    margin-bottom: 14px;
}
.mp-notice-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.mp-notice-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.mp-edit-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.mp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #6b7280;
    text-decoration: none;
    flex-shrink: 0;
}
.mp-back-link:hover { color: #111827; }
.mp-edit-topbar-title {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-save-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.mp-save-btn:hover { background: #374151; }

/* ── PE3 design system (shared with HQ product-edit) ── */
.mp-edit-page.pe3 { --pe3-primary: #2563eb; --pe3-primary-dark: #1d4ed8; --pe3-success: #16a34a; --pe3-danger: #dc2626; --pe3-gray-50: #f9fafb; --pe3-gray-100: #f3f4f6; --pe3-gray-200: #e5e7eb; --pe3-gray-300: #d1d5db; --pe3-gray-400: #9ca3af; --pe3-gray-500: #6b7280; --pe3-gray-600: #4b5563; --pe3-gray-700: #374151; --pe3-gray-800: #1f2937; }

.mp-edit-page .pe3-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.mp-edit-page .pe3-main   { display: flex; flex-direction: column; gap: 14px; }
.mp-edit-page .pe3-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }

/* Status strip */
.mp-edit-page .pe3-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: var(--pe3-gray-50); border: 1px solid var(--pe3-gray-200); margin-bottom: 0; }
.mp-edit-page .pe3-strip-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-edit-page .pe3-sku { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 12px; background: var(--pe3-gray-200); color: var(--pe3-gray-700); padding: 2px 7px; }
.mp-edit-page .pe3-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.mp-edit-page .pe3-pill-success { background: #dcfce7; color: #15803d; }
.mp-edit-page .pe3-pill-draft   { background: var(--pe3-gray-200); color: var(--pe3-gray-600); }
.mp-edit-page .pe3-date         { font-size: 12px; color: var(--pe3-gray-400); }
.mp-edit-page .pe3-strip-right  { display: flex; align-items: center; gap: 4px; }
.mp-edit-page .pe3-icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--pe3-gray-200); background: #fff; color: var(--pe3-gray-500); cursor: pointer; text-decoration: none; transition: background .12s, color .12s; }
.mp-edit-page .pe3-icon-btn:hover { background: var(--pe3-gray-100); color: var(--pe3-gray-800); }
.mp-edit-page .pe3-strip-sep { width: 1px; height: 20px; background: var(--pe3-gray-200); margin: 0 2px; }
.mp-edit-page .pe3-strip-ctrl { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border: 1px solid var(--pe3-gray-200); background: #fff; color: var(--pe3-gray-600); cursor: pointer; white-space: nowrap; }
.mp-edit-page .pe3-strip-ctrl:hover { background: var(--pe3-gray-50); }
.mp-edit-page .pe3-strip-ctrl svg { flex-shrink: 0; }
.mp-edit-page .pe3-strip-select { border: none; background: transparent; font-size: 12px; color: var(--pe3-gray-700); font-family: inherit; outline: none; cursor: pointer; padding: 0; max-width: 100px; -webkit-appearance: none; appearance: none; }

/* Title + price row */
.mp-edit-page .pe3-title-price-row { display: flex; gap: 12px; align-items: flex-end; }
.mp-edit-page .pe3-title-price-row .pe3-field:first-child { flex: 1; min-width: 0; }
.mp-edit-page .pe3-price-field { width: 110px; flex-shrink: 0; }

/* Cards */
.mp-edit-page .pe3-card { background: #fff; border: 1px solid var(--pe3-gray-200); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mp-edit-page .pe3-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--pe3-gray-200); position: relative; }
.mp-edit-page .pe3-card-header::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; }
.mp-edit-page .pe3-card.c-blue   .pe3-card-header::before { background: var(--pe3-primary); }
.mp-edit-page .pe3-card.c-green  .pe3-card-header::before { background: var(--pe3-success); }
.mp-edit-page .pe3-card.c-purple .pe3-card-header::before { background: #7c3aed; }
.mp-edit-page .pe3-card.c-amber  .pe3-card-header::before { background: #d97706; }
.mp-edit-page .pe3-card.c-teal   .pe3-card-header::before { background: #0891b2; }
.mp-edit-page .pe3-card.c-neutral .pe3-card-header::before { background: var(--pe3-gray-300); }
.mp-edit-page .pe3-card-header.collapsible { cursor: pointer; user-select: none; }
.mp-edit-page .pe3-card-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-edit-page .pe3-card-title h2 { font-size: 13px; font-weight: 600; color: var(--pe3-gray-800); line-height: 1.2; margin: 0; }
.mp-edit-page .pe3-card-title p  { font-size: 11px; color: var(--pe3-gray-400); margin: 2px 0 0; }
.mp-edit-page .pe3-chevron { margin-left: auto; color: var(--pe3-gray-400); transition: transform .2s; }
.mp-edit-page .pe3-chevron svg { width: 16px; height: 16px; }
.mp-edit-page .pe3-card.collapsed .pe3-chevron { transform: rotate(-90deg); }
.mp-edit-page .pe3-card.collapsed .pe3-card-body { display: none; }
.mp-edit-page .pe3-card-body { padding: 16px; }

/* Fields */
.mp-edit-page .pe3-field { margin-bottom: 13px; }
.mp-edit-page .pe3-field:last-child { margin-bottom: 0; }
.mp-edit-page .pe3-label { display: block; font-size: 12px; font-weight: 500; color: var(--pe3-gray-600); margin-bottom: 4px; }
.mp-edit-page .pe3-input, .mp-edit-page .pe3-select, .mp-edit-page .pe3-textarea {
    width: 100%; border: 1px solid var(--pe3-gray-300); border-radius: 0;
    background: #fff; color: var(--pe3-gray-800); font-size: 13px; font-family: inherit;
    padding: 0 10px; height: 36px; outline: none;
    transition: border-color .12s, box-shadow .12s;
    -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.mp-edit-page .pe3-textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.mp-edit-page .pe3-input:focus, .mp-edit-page .pe3-select:focus, .mp-edit-page .pe3-textarea:focus { border-color: var(--pe3-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.mp-edit-page .pe3-input.readonly { background: var(--pe3-gray-50); color: var(--pe3-gray-500); cursor: default; }
.mp-edit-page .pe3-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; cursor: pointer;
}
.mp-edit-page .pe3-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-edit-page .pe3-divider { border: none; border-top: 1px solid var(--pe3-gray-200); margin: 13px 0; }

/* Dimensions */
.mp-edit-page .pe3-dims { display: flex; align-items: center; gap: 6px; }
.mp-edit-page .pe3-dim-field { display: flex; align-items: center; border: 1px solid var(--pe3-gray-300); flex: 1; min-width: 0; }
.mp-edit-page .pe3-dim-label { font-size: 11px; font-weight: 600; color: var(--pe3-gray-500); padding: 0 7px; background: var(--pe3-gray-50); border-right: 1px solid var(--pe3-gray-300); height: 36px; display: flex; align-items: center; }
.mp-edit-page .pe3-dim-input { border: none; height: 36px; padding: 0 8px; width: 100%; font-size: 13px; font-family: inherit; color: var(--pe3-gray-800); background: #fff; outline: none; }
.mp-edit-page .pe3-dim-field:focus-within { border-color: var(--pe3-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.mp-edit-page .pe3-dim-sep { font-size: 13px; color: var(--pe3-gray-400); flex-shrink: 0; }

/* Chip tag pickers */
.mp-edit-page .pe3-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mp-edit-page .pe3-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; min-height: 30px; font-size: 13px; border: 1px solid var(--pe3-gray-300); background: #fff; color: var(--pe3-gray-700); cursor: pointer; user-select: none; transition: all .12s; }
.mp-edit-page .pe3-chip input[type=checkbox] { display: none; }
.mp-edit-page .pe3-chip:hover { border-color: var(--pe3-primary); color: var(--pe3-primary); }
.mp-edit-page .pe3-chip.selected { background: var(--pe3-primary); border-color: var(--pe3-primary); color: #fff; }
.mp-edit-page .pe3-chip-count { font-size: 10px; opacity: .65; }
.mp-edit-page .pe3-chip-hidden { display: none !important; }
.mp-edit-page .pe3-chips.expanded .pe3-chip-hidden { display: inline-flex !important; }
.mp-edit-page .pe3-expand-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; min-height: 30px; font-size: 12px; font-weight: 500; color: var(--pe3-primary); background: rgba(37,99,235,.06); border: 1px dashed rgba(37,99,235,.3); cursor: pointer; font-family: inherit; transition: background .12s; }
.mp-edit-page .pe3-expand-btn:hover { background: rgba(37,99,235,.1); }

/* Sidebar image */
.mp-edit-page .pe3-img-main { aspect-ratio: 1; background: var(--pe3-gray-100); border: 1px solid var(--pe3-gray-200); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; }
.mp-edit-page .pe3-img-main img { width: 100%; height: 100%; object-fit: cover; }
.mp-edit-page .pe3-img-main svg { color: var(--pe3-gray-300); }
.mp-edit-page .pe3-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 8px; }
.mp-edit-page .pe3-gallery-thumb { aspect-ratio: 1; background: var(--pe3-gray-100); border: 1px solid var(--pe3-gray-200); overflow: hidden; }
.mp-edit-page .pe3-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Mobile */
@media (max-width: 780px) {
    .mp-edit-page .pe3-layout { grid-template-columns: 1fr; }
    .mp-edit-page .pe3-sidebar { position: static; order: -1; }
    .mp-edit-topbar-title { display: none; }
}
@media (max-width: 560px) {
    .mp-edit-page .pe3-row { grid-template-columns: 1fr; }
}

/* Pagination */
.mp-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding-top: var(--space-md);
    flex-wrap: wrap;
}
.mp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 0;
    font-size: 0.84rem;
    color: #374151;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    transition: background 0.12s, border-color 0.12s;
}
.mp-pagination .page-numbers:hover,
.mp-pagination .page-numbers.current {
    background: #111827;
    color: #fff;
    border-color: transparent;
}
.mp-pagination .page-numbers.dots {
    border: none;
    background: none;
    color: #9ca3af;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .mp-card-img {
        width: 80px;
    }
    .mp-card-content {
        padding: 10px 12px;
    }
    .mp-meta-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .mp-card-pills {
        order: 3;
        width: 100%;
    }
}

/* Request dimensions button */
.request-dimensions-btn { /* text link style */
    display: inline;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4a90d9;
    background: none;
    border: none;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.15s;
}
.request-dimensions-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #2563eb;
}

/* Product Specs Grid */
.product-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
}
.spec-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: #fff;
}
.spec-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9ca3af;
}
.spec-value {
    font-size: 0.88rem;
    color: #111827;
}
.spec-value a {
    color: #4a90d9;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.spec-value a:hover {
    color: #2563eb;
}
@media (max-width: 480px) {
    .product-specs {
        grid-template-columns: 1fr;
    }
}

/* Delivery Info */
.product-delivery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 1rem 0;
}
.delivery-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #374151;
}
.delivery-option svg {
    flex-shrink: 0;
    color: #6b7280;
}
.delivery-option strong {
    font-weight: 600;
    color: #111827;
}

/* Materials Hub Page */
.materials-page {
    padding: 2rem 0 3rem;
}
.materials-page .page-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.materials-page .page-intro {
    font-size: 1rem;
    color: #6b7280;
    margin: 0 0 2rem;
    max-width: 600px;
}
.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.material-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}
.material-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.material-name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    text-transform: capitalize;
}
.material-card:hover .material-name {
    color: #4a90d9;
}
.material-count {
    font-size: 0.82rem;
    color: #9ca3af;
}
@media (max-width: 480px) {
    .materials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .material-card {
        padding: 12px 14px;
    }
}

/* Attribute Archive Page */
.attribute-archive {
    padding: 1.5rem 0 3rem;
}
.attribute-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.attribute-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin-bottom: 4px;
}
.attribute-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    text-transform: capitalize;
}
.attribute-description {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 0 1rem;
}
.attribute-count {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
}
.no-products {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}
.no-products .back-link {
    display: inline-block;
    margin-top: 1rem;
    color: #4a90d9;
}

/* Material links with tooltip */
.product-specs {
    overflow: visible;
}
.spec-item {
    overflow: visible;
}
.material-wrapper {
    position: relative;
    display: inline-block;
}
.material-link {
    color: #374151;
    text-decoration: none;
    border-bottom: 1px dashed #d1d5db;
    transition: all 0.15s;
    cursor: pointer;
}
.material-link:hover {
    color: #4a90d9;
    border-bottom-color: #4a90d9;
}
.material-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: 300px;
    padding: 12px 14px;
    background: #1f2937;
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.5;
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: left;
}
.material-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #1f2937;
}
.material-wrapper:hover .material-tooltip,
.material-wrapper.tooltip-visible .material-tooltip {
    display: block;
}
.tooltip-text {
    display: block;
    margin-bottom: 8px;
    color: #d1d5db;
    font-size: 0.8rem;
}
.tooltip-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
}
.tooltip-link:hover {
    text-decoration: underline;
}

/* Mobile tooltip */
@media (max-width: 600px) {
    .material-tooltip {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 280px;
        max-width: 90vw;
    }
    .material-tooltip::after {
        display: none;
    }
}

/* ==========================================================================
   BILAG TABS
   ========================================================================== */

.bilag-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.bilag-tab {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.bilag-tab:hover {
    color: #111827;
}

.bilag-tab.active {
    color: #111827;
    border-bottom-color: #111827;
}

/* CPT List */
.bilag-cpt-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bilag-cpt-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.bilag-cpt-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.bilag-cpt-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.bilag-cpt-nr {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
}

.bilag-cpt-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    flex: 1;
}

.bilag-cpt-status {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
}

.bilag-cpt-status.status-draft {
    background: #fef3c7;
    color: #92400e;
}

.bilag-cpt-status.status-complete {
    background: #dcfce7;
    color: #166534;
}

.bilag-cpt-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.bilag-cpt-amount {
    font-weight: 600;
    color: #111827;
}

.bilag-empty {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 600px) {
    .bilag-tabs {
        gap: 0;
    }
    .bilag-tab {
        padding: 0.6rem 1rem;
        font-size: 0.82rem;
    }
    .bilag-cpt-card {
        padding: 0.6rem 0.75rem;
    }
    .bilag-cpt-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   BILAG CRUD
   ========================================================================== */

.bilag-actions {
    margin-bottom: 1rem;
}

.bilag-add-btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: #111827;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s;
}

.bilag-add-btn:hover {
    background: #374151;
    color: #fff;
}

.bilag-cpt-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.bilag-notice {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.bilag-notice-success {
    background: #dcfce7;
    color: #166534;
}

.bilag-notice-error {
    background: #fee2e2;
    color: #991b1b;
}

/* Form page */
.bilag-form-page {
    max-width: 600px;
}

.bilag-form-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bilag-form-topbar h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.bilag-back-link {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.85rem;
}

.bilag-back-link:hover {
    color: #111827;
}

/* Form sections */
.bilag-form-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.bilag-form-section h4 {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

.bilag-field {
    margin-bottom: 0.75rem;
}

.bilag-field:last-child {
    margin-bottom: 0;
}

.bilag-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.bilag-field input,
.bilag-field select,
.bilag-field textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.15s;
}

.bilag-field input:focus,
.bilag-field select:focus {
    outline: none;
    border-color: #111827;
}

.bilag-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.bilag-attachment-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #2563eb;
}

/* Form actions */
.bilag-form-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}

.bilag-save-btn {
    padding: 0.7rem 1.5rem;
    background: #111827;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.bilag-save-btn:hover {
    background: #374151;
}

.bilag-delete-btn {
    color: #dc2626;
    font-size: 0.85rem;
    text-decoration: none;
}

.bilag-delete-btn:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
    .bilag-field-row {
        grid-template-columns: 1fr;
    }
    .bilag-form-section {
        padding: 1rem;
    }
    .bilag-form-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Category Featured Products */
.category-featured {
    margin: 2rem 0 3rem;
    padding: 2rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
}

.category-featured-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    color: var(--color-black);
}

.category-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.category-featured-item {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.category-featured-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.category-featured-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-gray-100);
}

.category-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}

.category-featured-item:hover .category-featured-image img {
    transform: scale(1.05);
}

.category-featured-info {
    padding: 1rem;
}

.category-featured-name {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0 0 0.375rem;
    color: var(--color-black);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-featured-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-600);
}

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

@media (max-width: 640px) {
    .category-featured {
        padding: 1.5rem;
        margin: 1.5rem 0 2rem;
    }
    
    .category-featured-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .category-featured-info {
        padding: 0.75rem;
    }
}