/* ==========================================================================
   Deerfield Furniture Mart - "Warm & Honest" Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Colors - Core Palette */
    --color-background: #FAF8F5;
    --color-surface: #FFFFFF;
    --color-text-primary: #2D2A26;
    --color-text-secondary: #6B6560;
    --color-text-muted: #9A9590;

    /* Colors - Accent */
    --color-accent: #2D5A47;
    --color-accent-hover: #1E3D30;
    --color-accent-light: #E8F0EC;

    /* Colors - Semantic */
    --color-success: #3D7A5A;
    --color-success-light: #E8F5ED;
    --color-warning: #B8860B;
    --color-warning-light: #FDF8E7;
    --color-error: #C44536;
    --color-error-light: #FCE8E6;

    /* Colors - UI */
    --color-border: #E8E4DF;
    --color-border-light: #F0EDE9;
    --color-highlight: #F5EED9;
    --color-shadow: rgba(45, 42, 38, 0.08);
    --color-shadow-hover: rgba(45, 42, 38, 0.15);

    /* Typography - Font Families */
    --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Typography - Font Sizes */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.5rem;    /* 40px */

    /* Typography - Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Spacing */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px var(--color-shadow);
    --shadow-md: 0 2px 4px var(--color-shadow), 0 1px 2px var(--color-shadow);
    --shadow-lg: 0 4px 8px var(--color-shadow), 0 2px 4px var(--color-shadow);
    --shadow-hover: 0 6px 12px var(--color-shadow-hover), 0 2px 4px var(--color-shadow);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* Layout */
    --container-max: 1380px;
    --container-narrow: 960px;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h1 {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-6);
}

h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-5);
}

h3 {
    font-size: var(--text-xl);
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

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

.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-lg { font-size: var(--text-lg); }
.text-muted { color: var(--color-text-secondary); }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

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

.main-content {
    padding: var(--space-8) 0 var(--space-16);
}

/* --------------------------------------------------------------------------
   Trust Banner
   -------------------------------------------------------------------------- */
.trust-banner {
    background: var(--color-highlight);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

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

.trust-banner__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.trust-banner__divider {
    color: var(--color-border);
}

/* --------------------------------------------------------------------------
   Tax Banner (prominent sales tax notice - sticky)
   -------------------------------------------------------------------------- */
.tax-banner {
    background: var(--color-accent);
    color: white;
    text-align: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    position: sticky;
    top: 0;
    z-index: 101;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    gap: var(--space-6);
}

.site-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.site-logo:hover {
    text-decoration: none;
}

.site-logo__name {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    font-weight: 400;
}

.site-logo__tagline {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

.site-header__contact {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.site-header__phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-lg);
}

.site-header__phone:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-nav__list {
    display: flex;
    list-style: none;
    gap: var(--space-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-2) 0;
}

.site-nav__link {
    display: block;
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.site-nav__link:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    text-decoration: none;
}

.site-nav__link--active {
    background: var(--color-accent);
    color: white;
}

.site-nav__link--active:hover {
    background: var(--color-accent-hover);
    color: white;
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */
.page-header {
    margin-bottom: var(--space-8);
}

.page-header__title {
    margin-bottom: var(--space-2);
}

.page-header__description {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
}

/* --------------------------------------------------------------------------
   Section Headers
   -------------------------------------------------------------------------- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.section-header--no-border {
    border-bottom: none;
    padding-bottom: 0;
}

.section-header__title {
    font-size: var(--text-lg);
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 0;
}

.section-header__count {
    background: var(--color-border-light);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 500;
}

@media (max-width: 600px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

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

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

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

@media (max-width: 600px) {
    .product-card__body {
        padding: var(--space-3);
    }

    .product-card__title {
        font-size: var(--text-lg);
    }

    .product-card__prices {
        font-size: var(--text-sm);
    }
}

/* --------------------------------------------------------------------------
   Product Card
   -------------------------------------------------------------------------- */
.product-card {
    background: var(--color-surface);
    overflow: hidden;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
}

.product-card__image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-border-light);
}

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

.product-card__image--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card__image-wrapper--has-hover:hover .product-card__image--hover {
    opacity: 1;
}

.badge-pill--photo-hover {
    display: none;
}

.product-card__image-wrapper--has-hover:hover .badge-pill--photo-default {
    display: none;
}

.product-card__image-wrapper--has-hover:hover .badge-pill--photo-hover {
    display: inline-block;
}

.product-card__badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
}

.product-card__image-badges {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
    pointer-events: none;
}

.product-card__image-badges .badge-pill {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: 10px;
    line-height: 1.1;
    white-space: nowrap;
}

.product-card__image-badges .badge-pill--condition {
    background: rgba(255,255,255,0.92);
    color: var(--color-text-primary);
}

.product-card__image-badges .badge-pill--condition[data-condition="new"] {
    background: var(--color-accent);
    color: #fff;
}

.product-card__image-badges .badge-pill--condition[data-condition="like-new"] {
    background: var(--color-success);
    color: #fff;
}

.product-card__image-badges .badge-pill--photo {
    background: rgba(255,255,255,0.85);
    color: var(--color-text-secondary);
}

.product-card__body {
    padding: var(--space-3) var(--space-2);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card__brand {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.product-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 400;
    margin-bottom: var(--space-4);
    line-height: var(--leading-tight);
}

.product-card__title a {
    color: inherit;
}

.product-card__title a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.product-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.product-card__price {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-accent);
}

.product-card__set-price {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-accent);
}

.product-card__price-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 400;
    display: block;
}

/* Condition-price pairs display */
.product-card__prices {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.product-card__condition-price {
    white-space: nowrap;
}

.product-card__condition {
    font-weight: 600;
}

.product-card__condition--new {
    color: var(--color-accent);
}

.product-card__condition--like-new {
    color: var(--color-success);
}

.product-card__condition--used {
    color: var(--color-text-secondary);
}

.product-card__condition--fair {
    color: var(--color-warning);
}

.product-card__price-sep {
    color: var(--color-text-muted);
    margin: 0 0.125rem;
}

.product-card__stock {
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.product-card__stock-dot {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    display: inline-block;
}

.product-card__stock--warning {
    color: var(--color-warning);
}

.product-card__stock--in-stock {
    color: var(--color-success);
}

.product-card__stock--out-of-stock {
    color: var(--color-text-muted);
}

/* Out of stock card variant */
.product-card--out-of-stock {
    opacity: 0.7;
}

.product-card--out-of-stock:hover {
    opacity: 1;
}

.product-card--out-of-stock .product-card__image {
    filter: grayscale(30%);
}

/* Placeholder image */
.product-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border-light);
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   Condition Badges
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

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

.badge--new---floor-model {
    background: #5a9a7c;
    color: white;
}

.badge--new---minor-imperfections {
    background: #7ab094;
    color: white;
}

.badge--like-new {
    background: var(--color-success);
    color: white;
}

.badge--used {
    background: var(--color-text-secondary);
    color: white;
}

.badge--fair {
    background: var(--color-warning);
    color: white;
}

.badge--out-of-stock {
    background: var(--color-border);
    color: var(--color-text-secondary);
}

.badge--in-stock {
    background: var(--color-success-light);
    color: var(--color-success);
}

.badge--set {
    background: var(--color-accent-light, #e8f5f0);
    color: var(--color-accent);
}

.badge--warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

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

.badge--error {
    background: var(--color-error);
    color: white;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn--primary {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-sm);
}

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

.btn--secondary {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn--secondary:hover {
    background: var(--color-border-light);
    color: var(--color-text-primary);
}

.btn--sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

.btn--lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
}

.btn--block {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Cards (Generic)
   -------------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.card--highlight {
    background: var(--color-highlight);
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   Price Display
   -------------------------------------------------------------------------- */
.price {
    font-weight: 700;
    color: var(--color-accent);
}

.price--lg {
    font-size: var(--text-3xl);
}

.price--strike {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-weight: 400;
}

.price-savings {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-success);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Stock Status Indicator
   -------------------------------------------------------------------------- */
.stock-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.stock-indicator__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.stock-indicator--in-stock .stock-indicator__dot {
    background: var(--color-success);
}

.stock-indicator--in-stock {
    color: var(--color-success);
}

.stock-indicator--low-stock .stock-indicator__dot {
    background: var(--color-warning);
}

.stock-indicator--low-stock {
    color: var(--color-warning);
}

.stock-indicator--out-of-stock .stock-indicator__dot {
    background: var(--color-text-muted);
}

.stock-indicator--out-of-stock {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-text-primary);
    color: var(--color-border);
    padding: var(--space-16) 0 var(--space-10);
    margin-top: var(--space-16);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-10);
}

@media (max-width: 900px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10) var(--space-8);
    }
}

@media (max-width: 480px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

.site-footer__brand {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-surface);
    margin-bottom: var(--space-4);
}

.site-footer__heading {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-surface);
    margin-bottom: var(--space-5);
}

.site-footer__list {
    list-style: none;
}

.site-footer__list li {
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.site-footer__list a {
    color: var(--color-border);
    font-size: var(--text-sm);
}

.site-footer__list a:hover {
    color: var(--color-surface);
}

.site-footer__list--two-col {
    columns: 2;
    column-gap: var(--space-8);
}

.site-footer__list--two-col li {
    break-inside: avoid;
}

.site-footer__socials {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-border);
    font-size: var(--text-sm);
    transition: color 0.2s ease;
}

.site-footer__social:hover {
    color: var(--color-surface);
}

.site-footer__social svg {
    flex-shrink: 0;
}

.site-footer__bottom {
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
}

@media (max-width: 480px) {
    .site-footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
}

.site-footer__legal {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer__legal a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
}

.site-footer__legal a:hover {
    color: var(--color-surface);
}

.site-footer__legal span {
    color: rgba(255, 255, 255, 0.3);
}

.site-footer__description {
    margin-bottom: var(--space-4);
    max-width: 300px;
}

.site-footer__label {
    color: var(--color-surface);
}

.site-footer__note {
    opacity: 0.7;
    margin-top: var(--space-2);
    max-width: 280px;
}

.site-footer__phone-link {
    color: var(--color-surface);
}


/* --------------------------------------------------------------------------
   Product Detail Page
   -------------------------------------------------------------------------- */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
}

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

.product-gallery {
    position: sticky;
    top: calc(var(--space-4) + 60px);
    align-self: start;
}

.product-gallery__main {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-border-light);
    margin-bottom: var(--space-3);
}

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

.product-gallery__thumbs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
}

.product-gallery__thumb {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
    flex-shrink: 0;
}

.product-gallery__thumb:hover,
.product-gallery__thumb--active {
    border-color: var(--color-accent);
}

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

/* Product Info */
.product-info {
    display: flex;
    flex-direction: column;
}

.product-info__brand {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.product-info__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

.product-info__rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Product Specs */
.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-background);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.product-specs__item {
    display: flex;
    gap: var(--space-2);
}

.product-specs__label {
    color: var(--color-text-muted);
}

.product-specs__value {
    font-weight: 500;
    color: var(--color-text-primary);
}

@media (max-width: 700px) {
    .product-detail {
        gap: var(--space-6);
    }

    .product-gallery {
        position: static;
        top: auto;
    }

    .product-info__title {
        font-size: var(--text-2xl);
    }

    .product-specs {
        padding: var(--space-3);
        gap: var(--space-2) var(--space-4);
    }
}

/* Condition Selector */
.condition-selector {
    margin-bottom: var(--space-6);
}

.condition-selector__label {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-3);
    display: block;
}

.condition-selector__options {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.condition-option {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    min-width: 100px;
}

.condition-option:hover {
    border-color: var(--color-accent);
}

.condition-option--active {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.condition-option--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.condition-option__name {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.condition-option__price {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-accent);
}

.condition-option__stock {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Price Box */
.price-box {
    background: var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.price-box__current {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.price-box__retail {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.price-box__savings {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-success-light);
    color: var(--color-success);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Delivery Info */
.delivery-info {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
}

.delivery-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}

.delivery-info__icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Inventory Grid (Individual Items)
   -------------------------------------------------------------------------- */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

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

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

.inventory-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.inventory-card__image {
    aspect-ratio: 4 / 3;
    background: var(--color-border-light);
}

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

.inventory-card__body {
    padding: var(--space-4);
}

.inventory-card__price {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.inventory-card__notes {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Notify Form (Out of Stock)
   -------------------------------------------------------------------------- */
.notify-form {
    background: var(--color-highlight);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    margin-top: var(--space-8);
}

.notify-form__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.notify-form__text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.notify-form__input-group {
    display: flex;
    gap: var(--space-2);
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .notify-form__input-group {
        flex-direction: column;
        max-width: 100%;
    }
}

.notify-form__input-group .form-input {
    flex: 1;
}

/* Condition selector for notifications */
.notify-form__conditions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 400px;
    margin: 0 auto var(--space-5);
    text-align: left;
}

.notify-form__condition-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.notify-form__condition-option:hover {
    border-color: var(--color-accent-light);
}

.notify-form__condition-option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.notify-form__condition-option input[type="radio"] {
    margin-top: var(--space-1);
    accent-color: var(--color-accent);
}

.notify-form__condition-label {
    flex: 1;
}

.notify-form__condition-name {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.notify-form__condition-desc {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Message states */
.notify-form__message {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
}

.notify-form__message--success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.notify-form__message--error {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Empty States
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}

.empty-state__icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-state__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.empty-state__text {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.mt-4 { margin-top: var(--space-4); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}
.my-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.flex-1 { flex: 1; }

.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-surface); }
.text-strong { font-weight: 600; }

.list {
    padding-left: var(--space-5);
    margin: 0;
}

.list li {
    margin-bottom: var(--space-1);
}

.is-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Image Warning Banners
   -------------------------------------------------------------------------- */
.image-banner {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.image-banner--actual {
    background: var(--color-success-light);
    color: var(--color-success);
}

.image-banner--reference {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

/* --------------------------------------------------------------------------
   Responsive Visibility
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   CART & CHECKOUT STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mini Cart (Header)
   -------------------------------------------------------------------------- */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.mini-cart {
    position: relative;
}

.mini-cart__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--color-text-primary);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.mini-cart__trigger:hover {
    background-color: var(--color-border-light);
    text-decoration: none;
    color: var(--color-text-primary);
}

.mini-cart__icon {
    display: flex;
}

.mini-cart__badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-accent);
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.mini-cart__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    margin-top: var(--space-2);
}

.mini-cart__dropdown.is-hidden {
    display: none;
}

.mini-cart__badge.is-hidden {
    display: none;
}

.mini-cart__header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-cart__count {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.mini-cart__items {
    max-height: 300px;
    overflow-y: auto;
}

.mini-cart__item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.mini-cart__item:last-child {
    border-bottom: none;
}

.mini-cart__item-image {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-background);
}

.mini-cart__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart__item-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mini-cart__item-details {
    flex: 1;
    min-width: 0;
}

.mini-cart__item-name {
    font-weight: 500;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-cart__item-variant {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.mini-cart__item-price {
    font-weight: 600;
    font-size: var(--text-sm);
}

.mini-cart__more {
    padding: var(--space-2) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: var(--color-border-light);
}

.mini-cart__footer {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.mini-cart__subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.mini-cart__empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
}

.mini-cart__empty p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Cart Page
   -------------------------------------------------------------------------- */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    align-items: start;
}

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

.cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cart-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.cart-item--unavailable {
    opacity: 0.7;
    border-color: var(--color-error);
    background: var(--color-error-light);
}

.cart-item__image {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-background);
}

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

.cart-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.cart-item__details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cart-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.cart-item__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.cart-item__title a {
    color: var(--color-text-primary);
}

.cart-item__title a:hover {
    color: var(--color-accent);
}

.cart-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cart-item__price {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-accent);
}

.cart-item__notes {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.cart-item__actions {
    display: flex;
    gap: var(--space-4);
    margin-top: auto;
}

.cart-item__remove {
    background: none;
    border: none;
    color: var(--color-error);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0;
}

.cart-item__remove:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .cart-item {
        flex-direction: column;
    }

    .cart-item__image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .cart-item__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item__actions {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* --------------------------------------------------------------------------
   Cart Summary
   -------------------------------------------------------------------------- */
.cart-summary__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

@media (max-width: 600px) {
    .cart-summary__card {
        padding: var(--space-4);
    }

    .cart-summary__title {
        font-size: var(--text-lg);
    }
}

.cart-summary__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.cart-summary__row--muted {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.cart-summary__row--total {
    border-top: 2px solid var(--color-border);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    font-size: var(--text-xl);
    font-weight: 600;
}

.cart-summary__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

/* --------------------------------------------------------------------------
   Checkout Page
   -------------------------------------------------------------------------- */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
    align-items: start;
}

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

    .checkout-summary {
        order: -1;
    }
}

.checkout-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.checkout-section__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}

@media (max-width: 600px) {
    .checkout-section {
        padding: var(--space-4);
    }

    .checkout-section__title {
        font-size: var(--text-lg);
    }
}

/* Form Styles */
.form-group {
    margin-bottom: var(--space-4);
}

.form-group--flex {
    flex: 1;
}

.form-group--short {
    width: 100px;
}

.form-group--medium {
    width: 120px;
}

.form-row {
    display: flex;
    gap: var(--space-4);
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }

    .form-row .form-group {
        width: 100% !important;
    }
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.form-hint {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    margin-bottom: 0;
}

.text-error {
    color: var(--color-error);
}

/* Fulfillment Options */
.fulfillment-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.fulfillment-option {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.fulfillment-option:hover {
    border-color: var(--color-accent-light);
}

.fulfillment-option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.fulfillment-option input {
    margin-top: 4px;
}

.fulfillment-option__content {
    flex: 1;
}

.fulfillment-option__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.fulfillment-option__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.fulfillment-option__hours {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* Fulfillment Cards (New Design) */
.fulfillment-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

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

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

.fulfillment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

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

.fulfillment-card--selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.fulfillment-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fulfillment-card__icon {
    font-size: 2rem;
    line-height: 1;
}

.fulfillment-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.fulfillment-card__title {
    font-weight: 600;
    color: var(--color-text-primary);
}

.fulfillment-card__price {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-accent);
}

/* Fulfillment Details */
.fulfillment-details {
    margin-bottom: var(--space-4);
}

.fulfillment-details__box {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.fulfillment-details__location {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.fulfillment-details__perks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.fulfillment-perk {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.fulfillment-perk__icon {
    font-size: 1.25rem;
}

.fulfillment-details__cta {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.fulfillment-details__cta a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.fulfillment-details__cta a:hover {
    text-decoration: underline;
}

/* Installation Add-on */
.installation-addon {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.installation-addon__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    padding: var(--space-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: all var(--transition-fast);
}

.installation-addon__checkbox:hover {
    border-color: var(--color-accent);
}

.installation-addon__checkbox:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.installation-addon__checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.installation-addon__checkmark {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.installation-addon__checkbox input:checked + .installation-addon__checkmark {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.installation-addon__checkbox input:checked + .installation-addon__checkmark::after {
    content: '✓';
    color: white;
    font-size: var(--text-sm);
    font-weight: bold;
}

.installation-addon__content {
    flex: 1;
}

.installation-addon__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.installation-addon__price {
    color: var(--color-accent);
    font-weight: 600;
}

.installation-addon__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Checkout Summary */
.checkout-summary__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    position: sticky;
    top: var(--space-4);
}

@media (max-width: 900px) {
    .checkout-summary__card {
        position: static;
    }
}

.checkout-summary__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}

.checkout-summary__items {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--space-4);
}

@media (max-width: 600px) {
    .checkout-summary__items {
        max-height: 220px;
    }
}

.checkout-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.checkout-item__image {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-background);
}

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

.checkout-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.checkout-item__details {
    flex: 1;
    min-width: 0;
}

.checkout-item__name {
    font-weight: 500;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-item__variant {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.checkout-item__price {
    font-weight: 600;
}

.checkout-summary__totals {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.checkout-summary__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.checkout-summary__row--muted {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.checkout-summary__row--total {
    border-top: 2px solid var(--color-border);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    font-size: var(--text-xl);
    font-weight: 600;
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.payment-option {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.payment-option:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.payment-option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.payment-option input[type="radio"] {
    margin-top: var(--space-1);
    width: 20px;
    height: 20px;
    accent-color: var(--color-accent);
}

.payment-option__content {
    flex: 1;
}

.payment-option__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.payment-option__header strong {
    font-size: var(--text-base);
}

.payment-option__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@media (max-width: 600px) {
    .payment-option {
        padding: var(--space-3);
    }
}

.affirm-logo {
    display: inline-flex;
    align-items: center;
}

.affirm-logo svg {
    height: 20px;
    width: auto;
}

.affirm-promo {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: 500;
}

/* Affirm promotional styling from Affirm.js */
.affirm-as-low-as {
    font-size: var(--text-sm);
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Order Confirmation Page
   -------------------------------------------------------------------------- */
.confirmation-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.confirmation-check {
    width: 80px;
    height: 80px;
    background: var(--color-success);
    color: white;
    font-size: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
}

.confirmation-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
    align-items: start;
}

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

.confirmation-order-number {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.confirmation-section {
    margin-top: var(--space-4);
}

.confirmation-section h3 {
    margin-bottom: var(--space-2);
}

.confirmation-items {
    margin-bottom: var(--space-4);
}

.confirmation-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.confirmation-item__image {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-background);
}

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

.confirmation-item__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.confirmation-item__details {
    flex: 1;
    min-width: 0;
}

.confirmation-item__name {
    font-weight: 500;
}

.confirmation-item__variant {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.confirmation-item__price {
    font-weight: 600;
}

@media (max-width: 700px) {
    .confirmation-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .confirmation-item__image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

.confirmation-totals {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.confirmation-totals__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.confirmation-totals__row--muted {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.confirmation-totals__row--total {
    border-top: 2px solid var(--color-border);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    font-size: var(--text-xl);
    font-weight: 600;
}

/* Payment Status Indicator */
.payment-status {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    align-items: flex-start;
}

.payment-status--paid {
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
}

.payment-status--pending {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
}

.payment-status__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.payment-status--pending .payment-status__icon {
    background: var(--color-warning);
}

.payment-status__content {
    flex: 1;
}

.payment-status__content strong {
    display: block;
    margin-bottom: var(--space-1);
}

.payment-status__content p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid;
}

.alert--info {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.alert--warning {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-text-primary);
}

.alert--error {
    background: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-text-primary);
}

.alert--success {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Add to Cart Button States
   -------------------------------------------------------------------------- */
.add-to-cart-btn {
    width: 100%;
    flex: 1;
    position: relative;
}

.btn--success {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.btn--in-cart {
    background: var(--color-text-secondary) !important;
    border-color: var(--color-text-secondary) !important;
}

.btn--in-cart:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
.toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: var(--space-4) var(--space-6);
    background: var(--color-text-primary);
    color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    opacity: 0;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast--error {
    background: var(--color-error);
}

.toast--success {
    background: var(--color-success);
}

/* --------------------------------------------------------------------------
   Mobile Tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .site-logo__name {
        font-size: var(--text-xl);
    }

    .site-logo__tagline {
        display: none;
    }

    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .site-header__actions {
        width: 100%;
        justify-content: space-between;
    }

    .site-nav__list {
        gap: var(--space-2);
        padding-bottom: var(--space-3);
    }

    .mini-cart__dropdown {
        width: min(92vw, 360px);
    }

    .checkout-back-btn {
        bottom: var(--space-4);
        left: 50%;
        transform: translateX(-50%);
    }

    .checkout-back-btn:hover {
        transform: translateX(-50%) translateY(-1px);
    }
}

@media (max-width: 700px) {
    .site-footer__list--two-col {
        columns: 1;
    }
}

/* --------------------------------------------------------------------------
   Tax Disclosure Styles
   -------------------------------------------------------------------------- */
.tax-badge {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.tax-badge--subtle {
    display: block;
    margin-top: var(--space-1);
}

.tax-badge--block {
    background: var(--color-highlight);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-top: var(--space-3);
}

/* Price box tax line */
.price-box__tax {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.price-box__condition {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   Price Breakdown Component
   Displays: Original Price / Sales Tax / Total Price / Optional Services
   -------------------------------------------------------------------------- */
.price-breakdown {
    background: var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.price-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    font-size: var(--text-base);
}

.price-breakdown__row + .price-breakdown__row {
    border-top: 1px solid var(--color-border);
}

.price-breakdown__row--total {
    font-weight: 600;
    font-size: var(--text-xl);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 2px solid var(--color-accent) !important;
}

.price-breakdown__row--total .price-breakdown__value {
    color: var(--color-accent);
}

.price-breakdown__row--service {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.price-breakdown__row--service + .price-breakdown__row--service {
    border-top: none;
    padding-top: 0;
}

.price-breakdown__label {
    color: var(--color-text-secondary);
}

.price-breakdown__value {
    font-weight: 500;
    color: var(--color-text-primary);
}

.price-breakdown__value--muted {
    font-weight: 400;
    color: var(--color-text-muted);
}

.price-breakdown__services {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
}

.price-breakdown__disclaimer {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.price-breakdown__row--tax {
    color: var(--color-text-secondary);
}

.price-breakdown__note {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.price-breakdown__service {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

/* Summary Breakdown (for cart/checkout summaries) */
.summary-breakdown {
    margin-bottom: var(--space-4);
}

.summary-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.summary-breakdown__row--muted {
    color: var(--color-text-muted);
}

.summary-breakdown__row--total {
    font-weight: 600;
    font-size: var(--text-lg);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 2px solid var(--color-accent);
}

/* --------------------------------------------------------------------------
   Service Info (replaces delivery-info with expanded services)
   -------------------------------------------------------------------------- */
.service-info {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
}

.service-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}

.service-info__icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.service-info__disclosure {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    line-height: 1.5;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cart Summary Services Section
   -------------------------------------------------------------------------- */
.cart-summary__services {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Checkout Summary Note
   -------------------------------------------------------------------------- */
.checkout-summary__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    line-height: 1.5;
    padding: var(--space-3);
    background: var(--color-border-light);
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Checkout Sticky/Fixed Elements
   -------------------------------------------------------------------------- */

/* Make the order summary sticky on desktop */
.checkout-summary {
    position: sticky;
    top: var(--space-6);
    align-self: flex-start;
}

/* Fixed back to cart button */
.checkout-back-btn {
    position: fixed;
    bottom: var(--space-6);
    left: var(--space-6);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-fast);
    z-index: 100;
}

.checkout-back-btn:hover {
    background: var(--color-background);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.checkout-back-btn svg {
    flex-shrink: 0;
}

/* On mobile, position bottom center */
@media (max-width: 768px) {
    .checkout-back-btn {
        left: 50%;
        transform: translateX(-50%);
        bottom: var(--space-4);
    }

    .checkout-back-btn:hover {
        transform: translateX(-50%) translateY(-1px);
    }

    .checkout-summary {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   Confirmation Totals Note
   -------------------------------------------------------------------------- */
.confirmation-totals__note {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-highlight);
    border-radius: var(--radius-md);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Static Pages (Privacy, Terms, etc.)
   -------------------------------------------------------------------------- */
.static-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) 0;
}

.static-page__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.static-page__updated {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}

.static-page__content {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.static-page__content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.static-page__content h2:first-of-type {
    margin-top: var(--space-6);
    border-top: none;
    padding-top: 0;
}

.static-page__content h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.static-page__content p {
    margin-bottom: var(--space-4);
}

.static-page__content ul {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.static-page__content li {
    margin-bottom: var(--space-2);
}

.static-page__content a {
    color: var(--color-accent);
    text-decoration: underline;
}

.static-page__content a:hover {
    color: var(--color-accent-hover);
}

.static-page__contact {
    list-style: none;
    padding-left: 0;
    background: var(--color-background);
    padding: var(--space-4);
    border-radius: var(--radius-md);
}

.static-page__contact li {
    margin-bottom: var(--space-2);
}

.static-page__contact li:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   About Us Page
   -------------------------------------------------------------------------- */
.about-page {
    max-width: 900px;
    margin: 0 auto;
}

.about-hero {
    text-align: center;
    padding: var(--space-8) 0 var(--space-10);
}

.about-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.about-hero__subtitle {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
}

.about-content {
    padding-bottom: var(--space-12);
}

.about-section {
    margin-bottom: var(--space-10);
}

.about-section h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.about-section p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.about-section p:last-child {
    margin-bottom: 0;
}

/* About Cards (Sourcing) */
.about-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.about-cards--three {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 800px) {
    .about-cards--three {
        grid-template-columns: 1fr;
    }
}

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

.about-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.about-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-3);
}

.about-card h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.about-card p {
    font-size: var(--text-sm);
    margin-bottom: 0;
}

/* About Benefits */
.about-benefits {
    list-style: none;
    padding: 0;
}

.about-benefits li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.about-benefits li:last-child {
    border-bottom: none;
}

.about-benefits strong {
    color: var(--color-text-primary);
}

/* About Team Featured */
.about-team-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-team-featured--reverse {
    direction: rtl;
}

.about-team-featured--reverse > * {
    direction: ltr;
}

.about-team-featured__image {
    height: 100%;
    min-height: 300px;
}

.about-team-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-team-featured__content {
    padding: var(--space-6);
}

.about-team-featured__content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.about-team-featured__content p {
    font-size: var(--text-base);
    line-height: 1.7;
}

@media (max-width: 700px) {
    .about-team-featured {
        grid-template-columns: 1fr;
    }

    .about-team-featured--reverse {
        direction: ltr;
    }

    .about-team-featured__image {
        min-height: 250px;
    }
}

/* About Mascot */
.about-mascot {
    text-align: center;
}

.about-mascot__photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border);
}

.about-mascot__caption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    font-style: italic;
}

/* About Values */
.about-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

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

.about-value {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.about-value__icon {
    font-size: 1.25rem;
}

/* About Location CTA */
.about-section--cta {
    background: var(--color-accent);
    color: var(--color-surface);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-top: var(--space-12);
}

.about-section--cta h2 {
    color: var(--color-surface);
}

.about-location {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
}

@media (max-width: 600px) {
    .about-location {
        flex-direction: column;
        text-align: center;
    }
}

.about-location__details {
    color: rgba(255, 255, 255, 0.9);
}

.about-location__details p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-3);
}

.about-location__details a {
    color: var(--color-surface);
}

.about-location__cta .btn--primary {
    background: var(--color-surface);
    color: var(--color-accent);
}

.about-location__cta .btn--primary:hover {
    background: var(--color-background);
}

/* --------------------------------------------------------------------------
   Customer Reviews Section (Homepage)
   -------------------------------------------------------------------------- */
.reviews-section {
    padding: var(--space-8) 0;
}

.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.reviews-header__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin: 0;
}

.reviews-header__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: 500;
}

.reviews-header__link:hover {
    color: var(--color-accent-hover);
}

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

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

.review-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.review-card__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

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

.review-card__content {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.review-card__stars {
    color: #F59E0B;
    font-size: var(--text-lg);
    letter-spacing: 2px;
    margin-bottom: var(--space-3);
}

.review-card__text {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    flex-grow: 1;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.review-card__name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.review-card__source {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.review-card__source::before {
    content: "•";
    margin-right: var(--space-2);
}

/* --------------------------------------------------------------------------
   Homepage Hero Banner (Full Width)
   -------------------------------------------------------------------------- */
.homepage-hero {
    position: relative;
    background-image: url('/uploads/hero-image.jpg');
    background-size: cover;
    background-position: center;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    margin-bottom: var(--space-8);
}

.homepage-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.homepage-hero__inner {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-10) var(--space-4);
}

.homepage-hero__text {
    text-align: center;
    color: white;
    margin-bottom: var(--space-8);
}

.homepage-hero__text h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.homepage-hero__text p {
    font-size: var(--text-lg);
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    margin: 0 auto;
}

.homepage-hero__categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
}

.homepage-hero__categories .category-card {
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    text-decoration: none;
    padding: var(--space-4);
    position: relative;
    transition: all var(--transition-fast);
}

.homepage-hero__categories .category-card:hover {
    background: white;
    transform: translateY(-2px);
}

.homepage-hero__categories .category-card__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (PDP) - SIMPLE STATIC LAYOUT
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.pdp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    overflow-wrap: anywhere;
}

.pdp-breadcrumb a {
    color: var(--color-text-secondary);
}

.pdp-breadcrumb span {
    margin: 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   Hero Section (Image + Info side by side)
   -------------------------------------------------------------------------- */
.pdp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}

@media (max-width: 900px) {
    .pdp-hero {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

.pdp-hero__image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-border-light);
    aspect-ratio: 4 / 3;
}

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

.pdp-hero__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    min-height: 300px;
}

.pdp-hero__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pdp-hero__badge--stock {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.pdp-hero__info {
    display: flex;
    flex-direction: column;
}

@media (max-width: 700px) {
    .pdp-hero {
        gap: var(--space-5);
    }

    .pdp-hero__title {
        font-size: var(--text-2xl);
    }

    .pdp-price-range__values {
        font-size: var(--text-2xl);
    }

    .pdp-hero__description {
        padding: var(--space-3);
    }
}

.pdp-hero__brand {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.pdp-hero__title {
    font-size: var(--text-3xl);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: var(--space-4);
    line-height: var(--leading-tight);
}

.pdp-hero__price {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.pdp-hero__price-tax {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}

.pdp-hero__stock {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-success);
    margin-bottom: var(--space-4);
}

.pdp-hero__stock-dot {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
}

.pdp-hero__out-of-stock {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Price Summary / Range (on product page)
   -------------------------------------------------------------------------- */
.pdp-price-summary {
    margin-bottom: var(--space-4);
}

.pdp-price-summary .price-breakdown {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.pdp-price-range {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.pdp-price-range__label {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.pdp-price-range__values {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.pdp-price-range__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.pdp-price-range__services {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border);
}

.pdp-price-range__service {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.pdp-price-range__service:last-child {
    margin-bottom: 0;
}

.pdp-price-range__components {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
}

.pdp-price-range__component {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.pdp-price-range__component:last-child {
    margin-bottom: 0;
}

.pdp-notice {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.pdp-notice--compact {
    margin: 0;
}

.pdp-notice strong {
    display: block;
    color: var(--color-warning);
    margin-bottom: var(--space-2);
}

.pdp-notice p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.pdp-notice a {
    color: var(--color-accent);
    font-weight: 500;
}

.pdp-hero__specs {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.pdp-hero__specs-sep {
    margin: 0 var(--space-2);
    color: var(--color-text-muted);
}

.pdp-hero__description {
    background: var(--color-highlight);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.pdp-hero__description strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.pdp-hero__description p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Available Items Section
   -------------------------------------------------------------------------- */
.pdp-items {
    margin-bottom: var(--space-10);
}

.pdp-items__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.pdp-items__header h2 {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: 400;
    margin: 0;
}

.pdp-items__count {
    background: var(--color-accent);
    color: white;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

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

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

@media (max-width: 550px) {
    .pdp-items__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .pdp-items__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* --------------------------------------------------------------------------
   Item Card (clickable link to item detail)
   -------------------------------------------------------------------------- */
.pdp-item-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pdp-item-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.pdp-item-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--color-border-light);
}

.pdp-item-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-item-card__no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pdp-item-card__photo-type {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: var(--text-xs);
    text-align: center;
    padding: var(--space-1);
}

.pdp-item-card__body {
    padding: var(--space-4);
}

.pdp-item-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.pdp-item-card__price-wrap {
    text-align: right;
}

.pdp-item-card__price {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-accent);
    display: block;
}

.pdp-item-card__tax {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 400;
}

.pdp-item-card__notes {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0 0 var(--space-3);
}

.pdp-item-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
}

.pdp-item-card__date {
    color: var(--color-text-muted);
}

.pdp-item-card__cta {
    color: var(--color-accent);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Reference Photos Section
   -------------------------------------------------------------------------- */
/* Stock Photos Section */
.pdp-stock-photos {
    margin-bottom: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.pdp-stock-photos h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.pdp-stock-photos__note {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.pdp-stock-photos__grid {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pdp-stock-photos__thumb {
    width: 120px;
    height: 90px;
    padding: 0;
    background: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.pdp-stock-photos__thumb:hover {
    border-color: var(--color-accent);
    transform: scale(1.05);
}

.pdp-stock-photos__thumb:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pdp-stock-photos__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 600px) {
    .pdp-stock-photos__grid {
        gap: var(--space-2);
    }

    .pdp-stock-photos__thumb {
        width: 96px;
        height: 72px;
    }
}

/* Condition Notify (in-stock product pages) */
.pdp-condition-notify {
    margin-top: var(--space-8);
    max-width: 560px;
}

.pdp-condition-notify .notify-form {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

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

.lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.lightbox__container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox__close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
    z-index: 10;
}

.lightbox__close:hover {
    background: var(--color-border-light);
}

.lightbox__content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 80vh;
}

.lightbox__image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}

.lightbox__nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.lightbox__prev,
.lightbox__next {
    width: 56px;
    height: 56px;
    background: white;
    border: none;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
}

.lightbox__prev:hover,
.lightbox__next:hover {
    background: var(--color-border-light);
}

.lightbox__counter {
    color: white;
    font-size: var(--text-lg);
    font-weight: 500;
    min-width: 80px;
    text-align: center;
}

@media (max-width: 600px) {
    .lightbox__close {
        top: -45px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .lightbox__prev,
    .lightbox__next {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .lightbox__counter {
        font-size: var(--text-base);
    }
}

/* --------------------------------------------------------------------------
   Notify Section (out of stock)
   -------------------------------------------------------------------------- */
.pdp-notify {
    max-width: 500px;
    margin: var(--space-8) auto;
}

/* --------------------------------------------------------------------------
   Status Boxes
   -------------------------------------------------------------------------- */
.pdp-status {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.pdp-status--success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
}

.pdp-status--success strong {
    color: var(--color-success);
}

.pdp-status--warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
}

.pdp-status--warning strong {
    color: var(--color-warning);
}

.pdp-status p {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Set Section (component-based)
   -------------------------------------------------------------------------- */
.pdp-set-section {
    margin-bottom: var(--space-8);
}

.pdp-set-section h2 {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: var(--space-4);
}

.pdp-set-available {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.pdp-set-available ul {
    margin: var(--space-3) 0 0 var(--space-5);
    font-size: var(--text-sm);
}

.pdp-set-available__price {
    text-align: right;
}

/* --------------------------------------------------------------------------
   Component Table (component-based products)
   -------------------------------------------------------------------------- */
.pdp-component-table {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.pdp-component-table table {
    width: 100%;
    border-collapse: collapse;
}

.pdp-component-table th,
.pdp-component-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.pdp-component-table thead tr {
    background: var(--color-border-light);
}

.pdp-component-table th {
    font-size: var(--text-sm);
    font-weight: 600;
}

.pdp-component-table tbody tr {
    border-top: 1px solid var(--color-border);
}

@media (max-width: 700px) {
    .pdp-component-table {
        overflow-x: auto;
    }

    .pdp-component-table table {
        min-width: 420px;
    }
}

/* --------------------------------------------------------------------------
   Back Link
   -------------------------------------------------------------------------- */
.pdp-back {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.pdp-back a {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.pdp-back a:hover {
    color: var(--color-accent);
}

/* ==========================================================================
   ITEM DETAIL PAGE SPECIFIC STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Item Price Breakdown
   -------------------------------------------------------------------------- */
.item-price-breakdown {
    margin-bottom: var(--space-4);
}

.item-price-breakdown .price-breakdown {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Item Badges (condition + stock)
   -------------------------------------------------------------------------- */
.item-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Item Notes (seller notes about condition)
   -------------------------------------------------------------------------- */
.item-notes {
    background: var(--color-border-light);
    border-left: 3px solid var(--color-accent);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* --------------------------------------------------------------------------
   Item Specs (key-value pairs)
   -------------------------------------------------------------------------- */
.item-specs {
    background: var(--color-background);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.item-specs__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

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

.item-specs__label {
    color: var(--color-text-muted);
}

.item-specs__value {
    font-weight: 500;
    color: var(--color-text-primary);
}

.item-specs__desc {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Item Actions (add to cart)
   -------------------------------------------------------------------------- */
.item-actions {
    margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Item Photos Grid
   -------------------------------------------------------------------------- */
.item-photos {
    margin-bottom: var(--space-10);
}

.item-photos__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.item-photos__header h2 {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: 400;
    margin: 0;
}

.item-photos__count {
    background: var(--color-accent);
    color: white;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.item-photos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

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

@media (max-width: 600px) {
    .item-photos__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

.item-photos__photo {
    display: block;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-border-light);
    transition: box-shadow var(--transition-fast);
}

.item-photos__photo:hover {
    box-shadow: var(--shadow-lg);
}

.item-photos__photo img {
    width: 100%;
    height: auto;
    display: block;
}

.item-photos__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Item Photos Full Width
   -------------------------------------------------------------------------- */
.item-photos-full {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
}

.item-photos-full h2 {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: var(--space-6);
}

.item-photos-full__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.item-photos-full__item {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.item-photos-full__item img {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   Item Page Layout (Redesigned)
   -------------------------------------------------------------------------- */
.item-page {
    display: grid;
    grid-template-columns: minmax(300px, 550px) 480px;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
    justify-content: center;
}

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

@media (max-width: 600px) {
    .item-page {
        gap: var(--space-5);
    }

    .item-page__title {
        font-size: var(--text-2xl);
    }

    .item-page__photo-label,
    .item-page__photo-note,
    .item-page__photo-actual {
        font-size: var(--text-xs);
    }

    .item-page__thumbs {
        justify-content: flex-start;
    }

    .item-page__thumb {
        width: 64px;
        height: 64px;
    }
}

/* Gallery (Left Side) */
.item-page__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.item-page__photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.item-page__photo img {
    width: 100%;
    height: auto;
    display: block;
}

.item-page__photo-label {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.item-page__photo-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--color-warning);
    color: white;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
}

.item-page__photo-actual {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: var(--color-accent);
    color: white;
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.item-page__photo-note {
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.item-page__no-photo {
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border-light);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Thumbnail row for galleries */
.item-page__thumbs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.item-page__thumb {
    width: 72px;
    height: 72px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0;
    background: var(--color-surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.item-page__thumb:hover {
    border-color: var(--color-text-secondary);
}

.item-page__thumb--active {
    border-color: var(--color-accent);
}

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

/* Details (Right Side) */
.item-page__details {
}

.item-page__header {
    margin-bottom: var(--space-4);
}

.item-page__brand {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.item-page__title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text-primary);
}

.item-page__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.item-page__price-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.item-page__price-card .price-breakdown {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
}

.item-page__action {
    margin-bottom: var(--space-4);
}

.item-page__action .btn {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
}

/* Pickup-only notice (lights category) */
.pickup-only-notice {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

.pickup-only-notice__label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-warning);
    margin-bottom: var(--space-2);
}

.pickup-only-notice__text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
    line-height: 1.5;
}

.pickup-only-notice .btn {
    margin-top: var(--space-2);
}

.item-page__notes {
    background: var(--color-highlight);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.item-page__notes strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.item-page__notes p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.6;
}

.item-page__specs {
    background: var(--color-background);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.item-page__specs h3 {
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3) 0;
}

.item-page__spec-list {
    margin: 0;
}

.item-page__spec-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-base);
}

.item-page__spec-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.item-page__spec-row dt {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.item-page__spec-row dd {
    margin: 0;
    text-align: right;
    font-weight: 500;
    color: var(--color-text-primary);
}

@media (max-width: 600px) {
    .item-page__spec-row {
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-start;
    }

    .item-page__spec-row dd {
        text-align: left;
    }
}

.item-page__spec-note {
    display: block;
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 4px;
}

.item-page__contact {
    text-align: center;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.item-page__contact p {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.item-page__contact a {
    color: var(--color-accent);
    text-decoration: none;
}

.item-page__contact a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Item About Section
   -------------------------------------------------------------------------- */
.item-about {
    margin-bottom: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.item-about h2 {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: 400;
    margin-bottom: var(--space-3);
}

.item-about p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 800px;
}

/* --------------------------------------------------------------------------
   Configurable Product (Listing)
   -------------------------------------------------------------------------- */
.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.config-card {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-width: 2px;
}

.config-card--selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.config-card__image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.config-card__placeholder {
    width: 100%;
    height: 140px;
    background: var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.config-card__body {
    padding: var(--space-3);
}

.config-card__title {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.product-grid--config {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.product-card--link {
    text-decoration: none;
    color: inherit;
}

/* --------------------------------------------------------------------------
   Home Trust Stats
   -------------------------------------------------------------------------- */
.trust-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    text-align: center;
}

@media (max-width: 700px) {
    .trust-stats {
        grid-template-columns: 1fr;
    }
}

.trust-stat__value {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Category Cards (homepage hero)
   -------------------------------------------------------------------------- */
.category-card__badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-accent);
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   Notify Form (Threshold Picker)
   -------------------------------------------------------------------------- */
.notify-form__threshold-picker {
    margin-bottom: 1.25rem;
}

.notify-form__threshold-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    text-align: center;
}

.notify-form__pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.notify-form__pill {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;
    background: var(--color-border);
    color: var(--color-text-secondary);
}

.notify-form__pill:hover {
    transform: translateY(-1px);
}

.notify-form__pill.is-selected {
    color: white;
    border-color: transparent;
}

.notify-form__pill--new.is-selected {
    background: var(--color-accent);
}

.notify-form__pill--like-new.is-selected {
    background: var(--color-success);
}

.notify-form__pill--used.is-selected {
    background: var(--color-text-secondary);
}

.notify-form__pill--fair.is-selected {
    background: var(--color-warning);
}

.notify-form__pill:not(.is-selected) {
    opacity: 0.5;
}

.notify-form__threshold-summary {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin: 0;
    text-align: center;
}

.notify-form__threshold-summary strong {
    color: var(--color-text-primary);
}

/* Restock Indicator */
.restock-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 110px;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 10px 10px 7px;
}

.restock-indicator__segments {
    display: flex;
    gap: 2px;
}

.restock-indicator__seg {
    flex: 1;
    aspect-ratio: 1;
    border-radius: 1px;
}

.restock-indicator__seg--selected {
    transform: scaleY(1.5);
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

.restock-indicator__seg--1  { background: #C44536; }
.restock-indicator__seg--2  { background: #d05a2e; }
.restock-indicator__seg--3  { background: #dc6e26; }
.restock-indicator__seg--4  { background: #e08a28; }
.restock-indicator__seg--5  { background: #d4a832; }
.restock-indicator__seg--6  { background: #bfb032; }
.restock-indicator__seg--7  { background: #a0b83a; }
.restock-indicator__seg--8  { background: #7fb843; }
.restock-indicator__seg--9  { background: #5da04b; }
.restock-indicator__seg--10 { background: #3D7A5A; }

.restock-indicator__label {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--color-text-secondary);
    margin-top: 5px;
    text-align: center;
    white-space: nowrap;
}