/**
 * Base Theme - Milano Inspired
 * Premium furniture e-commerce design
 * Warm earth tones with elegant typography
 */

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

/* ========================================
   CSS Variables - Milano Theme Tokens
======================================== */
:root {
    /* Milano Color Palette */
    --color-primary: #332817;
    --color-primary-rgb: 51, 40, 23;
    --color-background: #ffffff;
    --color-text: #444444;
    --color-text-rgb: 68, 68, 68;
    --color-heading: #111111;
    --color-heading-rgb: 17, 17, 17;
    --color-link: #444444;
    --color-link-hover: #332817;
    --color-border: #ebebeb;
    --color-white: #ffffff;
    --color-dark: #111111;

    /* Grey/Neutral colors */
    --grey-color: #f8f7f5;
    --grey-50: #faf8f5;
    --grey-100: #f5f0e8;
    --grey-200: #e0d0b8;
    --grey-300: #d5d5d5;
    --grey-500: #888888;
    --grey-700: #555555;
    --grey-900: #333333;

    /* Rate/Star color */
    --rate-color: #ff9c05;

    /* Button colors - Milano Style */
    --btn-primary-color: #ffffff;
    --btn-primary-hover-color: #ffffff;
    --btn-primary-bg-color: #111111;
    --btn-primary-hover-bg-color: #000000;
    --btn-outline-bg-color: #ffffff;
    --btn-outline-color: #111111;
    --btn-outline-border-color: #111111;
    --btn-link-color: #111111;
    --btn-link-hover-color: #111111;

    /* Typography - DM Sans (Milano exact values) */
    --body-font: 'DM Sans', sans-serif;
    --heading-font: 'DM Sans', sans-serif;
    --menu-font: 'DM Sans', sans-serif;
    --btn-font: 'DM Sans', sans-serif;
    --body-font-size: 15px;
    --body-line-height: 1.714;
    --body-weight: 400;
    --heading-weight: 600;
    --subheading-weight: 500;
    --heading-font-scale: 1.0;
    --heading-letter-spacing: -0.034em;
    --heading-text-transform: unset;

    /* Button styling (Milano exact values) */
    --btn-padding-x: 3rem;
    --btn-padding-y: 1rem;
    --btn-font-size: var(--body-font-size);
    --btn-radius: 30px;
    --btn-letter-spacing: calc(var(--heading-letter-spacing) + 0.01em);
    --btn-text-transform: unset;

    /* Input styling (Milano exact values) */
    --input-height: 5rem;
    --input-padding: 1rem 2rem;
    --input-border-radius: var(--btn-radius);
    --input-font-size: 16px;
    --inputs-border-width: 1px;
    --input-color: var(--color-text);
    --input-placeholder-color: rgba(var(--color-heading-rgb), 0.6);

    /* Layout (Milano exact values) */
    --page-width: 1200px;
    --fluid-container-width: 1410px;
    --bs-gutter-x: 1.5rem;
    --col-gap: 2rem;
    --section-spacing: 25px;

    /* Rounded corners - Milano values */
    --rounded-radius: 15px;

    /* Shadows */
    --shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition: 0.3s ease;
    --transition-popup: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --duration-short: 0.15s;

    /* Responsive rate */
    --responsive-rate: calc((100vw - 375px) / (1400 - 375));

    /* Header */
    --height-header: 80px;
    --height-topbar: 40px;

    /* Slideshow - Milano values */
    --slide-height: 460px;
    --slide-height-desktop: 600px;

    /* ---- Shared scale tokens -------------------------------------------
       One source for page titles, section titles, body copy, text greys,
       container width and section rhythm. Every page uses these instead of
       its own clamp()/px values; the mobile values live here and the two
       media queries below step them up. Root font-size is 62.5%, so
       1rem = 10px throughout. */

    /* Page title (H1): 26px mobile / 32px tablet / 40px laptop */
    --type-page-title: 2.6rem;
    /* Section title (H2): 22px mobile / 26px tablet / 32px laptop */
    --type-section-title: 2.2rem;
    /* Eyebrow above a title, and the subtitle under it */
    --type-eyebrow: 1.2rem;
    --type-subtitle: 1.5rem;
    --title-weight: 600;

    /* Body copy: 14px mobile / 15px from tablet up */
    --type-body: 1.4rem;
    --type-body-small: 1.3rem;
    --type-line-height: 1.7;

    /* Two text greys, and that is all: primary for copy, secondary for
       meta/labels. Replaces the #444/#555/#666/#888/slate mix. */
    --text-primary: #444444;
    --text-secondary: #777777;

    /* Container: 1280px max, 16/24/32px side gutters */
    --container-max: 128rem;
    --container-pad: 1.6rem;
    /* Readable measure for legal/FAQ prose */
    --prose-width: 76rem;
    /* Vertical rhythm between sections: 40px mobile / 64px from tablet up */
    --section-pad-y: 4rem;

    /* Buttons: one height and one radius site-wide */
    --btn-height: 4.6rem;
}

/* Milano Desktop Responsive Overrides */
@media (min-width: 768px) {
    :root {
        --section-spacing: 45px;
        --btn-padding-y: 1.5rem;
        --btn-padding-x: 5.5rem;
        --input-font-size: calc(var(--body-font-size) - 1px);

        /* Tablet step of the shared scale */
        --type-page-title: 3.2rem;
        --type-section-title: 2.6rem;
        --type-body: 1.5rem;
        --container-pad: 2.4rem;
        --section-pad-y: 6.4rem;
    }
}

@media (min-width: 1025px) {
    :root {
        /* Laptop step of the shared scale */
        --type-page-title: 4rem;
        --type-section-title: 3.2rem;
        --container-pad: 3.2rem;
    }
}

/* ========================================
   Reset & Base Styles
======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* Only enable smooth scroll if user hasn't disabled animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--body-font);
    font-size: var(--type-body);
    font-weight: var(--body-weight);
    line-height: var(--type-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    overflow-wrap: break-word;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    color: var(--color-text);
    background-color: var(--color-background);
}

/* ---- Container ----------------------------------------------------------
   One container for the whole site: 1280px max, with 16px / 24px / 32px side
   gutters from --container-pad. .container, .fluid_container and
   .stretch_width all resolve to it, so the 78 .container and 20
   .stretch_width wrappers already in the markup line up without edits. */
:where(.container, .fluid_container, .stretch_width) {
    width: 100%;
    max-width: calc(var(--container-max) + var(--container-pad) * 2);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    margin-inline: auto;
}



.full_width {
    width: 100%;
    max-width: 100%;
}



/* Typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading {
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    text-transform: var(--heading-text-transform);
    color: var(--color-heading);
    line-height: 1.2;
    word-break: break-word;
    margin-block-start: 0;
    margin-block-end: 0;
}

h1, .h1 { font-size: clamp(3.6rem, calc(3.6rem + (40 - 36) * var(--responsive-rate)), 4rem); }

/* ---- Page title (H1) ----------------------------------------------------
   Every page's main heading, at one size: 26px mobile / 32px tablet / 40px
   laptop, weight 600. These classes used to range from 30px to 60px at
   weights 500/600/700, and the FAQ hero even fell to 17.5px on mobile. The
   classes defined in page <style> blocks (careers, shop, product, FAQ,
   legal) point at the same token from there. */
.page-title,
.about-hero-title,
.contact-hero-title,
.stores-hero-title {
    font-size: var(--type-page-title);
    font-weight: var(--title-weight);
    line-height: 1.2;
}
h2, .h2 { font-size: clamp(3rem, calc(3rem + (36 - 30) * var(--responsive-rate)), 3.6rem); }
h3, .h3 { font-size: clamp(2.8rem, calc(2.8rem + (30 - 28) * var(--responsive-rate)), 3rem); }
h4, .h4 { font-size: 2.4rem; }
h5, .h5 { font-size: 2rem; }
h6, .h6 { font-size: 1.6rem; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

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

a:hover {
    color: var(--color-link-hover);
}

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

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ========================================
   Buttons - Milano Style
======================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-white {
    /* One height for every button: min-height carries it instead of vertical
       padding, which used to make the same .btn-primary 46px on the FAQ page
       and 54px on the home page. Horizontal padding is unchanged. */
    padding: 0 var(--btn-padding-x);
    min-height: var(--btn-height);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--btn-font);
    border: 1px solid transparent;
    transition: var(--transition);
    border-radius: var(--btn-radius);
    line-height: normal;
    cursor: pointer;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: var(--btn-text-transform);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-decoration: none;
}

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

.btn-primary:hover {
    background-color: var(--btn-primary-hover-bg-color);
    border-color: var(--btn-primary-hover-bg-color);
    color: var(--btn-primary-hover-color);
}

.btn-outline,
.btn-secondary {
    background-color: var(--btn-outline-bg-color);
    color: var(--btn-outline-color);
    border-color: var(--btn-outline-border-color);
}

.btn-outline:hover,
.btn-secondary:hover {
    background-color: var(--btn-primary-bg-color);
    color: var(--btn-primary-color);
    border-color: var(--btn-primary-bg-color);
}

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

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

.btn-link {
    color: var(--btn-link-color);
    font-family: var(--btn-font);
    font-weight: var(--heading-weight);
    padding: 0 0 1px;
    position: relative;
    line-height: 1;
    font-size: calc(var(--body-font-size) + 1px);
    cursor: pointer;
    background: none;
    border: none;
}

.btn-link::before {
    content: "";
    position: absolute;
    height: 1px;
    background-color: var(--btn-link-color);
    right: 0;
    bottom: 0;
    left: 0;
    transition: var(--transition);
}

.btn-sm {
    --btn-padding-x: 2rem;
    --btn-padding-y: 1rem;
    font-size: 1.3rem;
}

.btn-lg {
    --btn-padding-x: 4rem;
    --btn-padding-y: 1.5rem;
}

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

/* ========================================
   Forms
======================================== */
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea,
.input-style {
    height: var(--input-height);
    padding: var(--input-padding);
    border: var(--inputs-border-width) solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    border-radius: var(--input-border-radius);
    font-family: var(--body-font);
    font-size: var(--input-font-size);
    font-weight: var(--body-weight);
    -webkit-appearance: none;
    appearance: none;
    transition: 0.25s;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-heading);
}

textarea {
    min-height: 15rem;
    resize: none;
    padding: 2rem;
}

input::placeholder,
textarea::placeholder {
    color: rgba(var(--color-heading-rgb), 0.55);
    font-size: calc(var(--body-font-size) - 1px);
}

/* ========================================
   Layout Utilities
======================================== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }

.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.items-center, .align-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

.gap-5 { gap: 0.5rem; }
.gap-10 { gap: 1rem; }
.gap-15 { gap: 1.5rem; }
.gap-20 { gap: 2rem; }
.gap-30 { gap: 3rem; }

.text-center { text-align: center; }
.text-left, .text-start { text-align: left; }
.text-right, .text-end { text-align: right; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.overflow-hidden { overflow: hidden; }

/* Spacing */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mt-10 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-20 { margin-top: 2rem; }
.mt-30 { margin-top: 3rem; }
.mb-10 { margin-bottom: 1rem; }
.mb-15 { margin-bottom: 1.5rem; }
.mb-20 { margin-bottom: 2rem; }
.mb-30 { margin-bottom: 3rem; }
.py-10 { padding-top: 1rem; padding-bottom: 1rem; }
.py-15 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-20 { padding-top: 2rem; padding-bottom: 2rem; }
.px-15 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-20 { padding-left: 2rem; padding-right: 2rem; }

/* Visually hidden, still read by screen readers and indexers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Colors */
.text-color { color: var(--color-text); }
.heading-color { color: var(--color-heading); }
.primary-color { color: var(--color-primary); }
.rate-color { color: var(--rate-color); }

.bg-white { background-color: var(--color-white); }
.bg-grey { background-color: var(--grey-color); }
.bg-dark { background-color: var(--color-dark); }

.rounded { border-radius: var(--rounded-radius); overflow: hidden; }
.rounded-0 { border-radius: 0; }

.border { border: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }

/* ========================================
   Section Styling - Milano Spacing System
======================================== */
.section {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

.section-spacing {
    margin-bottom: var(--section-spacing);
}

.section-spacing-top {
    margin-top: var(--section-spacing);
}

.main-content {
    flex-grow: 1;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
}

.section-header .section-title {
    margin-bottom: 0;
}

.section-title {
    font-size: var(--type-section-title);
    font-weight: var(--title-weight);
    color: var(--color-heading);
    margin-bottom: 2rem;
}

.section-subtitle {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
}

.view-all-link,
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* The arrow is part of the variant, so no page has to ship its own. */
.view-all-link::after,
.btn-arrow::after {
    content: '\2192';
    font-size: 1.5em;
    line-height: 1;
    transition: transform var(--transition);
}

.view-all-link:hover,
.btn-arrow:hover {
    color: var(--color-primary);
}

.view-all-link:hover::after,
.btn-arrow:hover::after {
    transform: translateX(3px);
}

/* ========================================
   Responsive Visibility Helpers
======================================== */
.desktop-only {
    display: flex !important;
}

.mobile-only {
    display: none !important;
}

/* Mobile Menu Toggle - Hidden by default on desktop */
.mobile-menu-toggle {
    display: none !important;
}

@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

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

/* ========================================
   Announcement Bar / Top Bar - Milano Style
======================================== */
.announcement-bar {
    background-color: var(--color-background);
    padding: 1rem 0;
    font-size: 1.3rem;
}

.announcement-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.announcement-contact {
    display: flex;
    gap: 2rem;
}

.announcement-contact a {
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
}

.announcement-contact a:hover {
    color: var(--color-primary);
}

.announcement-contact svg {
    flex-shrink: 0;
}

.announcement-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .announcement-bar {
        display: none;
    }
}

/* ========================================
   Header - Custom Layout
======================================== */
.header {
    position: relative;
    z-index: 100;
    background-color: var(--color-background);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none;
    overflow: visible;
}

/* Header in fixed mode (when scrolled past top) */
.header.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Header hidden when scrolling down */
.header.header-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

/* Header visible with shadow when scrolling up (not at top) */
.header.header-sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Placeholder to prevent content jump when header becomes fixed */
.header-placeholder {
    display: none;
    height: var(--height-header, 80px);
}

.header-placeholder.active {
    display: block;
}

/* Header Inner - Main Row */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    gap: 2rem;
}

/* Header Left - Logo + Location + Store */
.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

/* Logo - Left aligned */
.logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.2rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-heading);
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-block;
    flex-shrink: 0;
}

.logo .logo-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

.logo img {
    height: 4.5rem;
    width: auto;
}

/* Header Location - Deliver To */
.header-location {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--color-heading);
    cursor: pointer;
    padding: 0.8rem 1.4rem;
    transition: var(--transition);
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
}

.header-location:hover {
    background: var(--grey-color);
}

.header-location svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.header-location-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-location-label {
    font-size: 1.2rem;
    color: var(--color-text);
}

.header-location-pin {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-heading);
}

.header-location .location-chevron {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.header-location.active .location-chevron {
    transform: rotate(180deg);
}

/* Location Dropdown */
.header-left {
    position: relative;
}

.location-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: var(--color-white);
    border-radius: var(--rounded-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    width: 320px;
    z-index: 1000;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.location-dropdown.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.location-dropdown-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.location-dropdown-header h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 1rem;
}

.location-detect-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem 1.2rem;
    background: var(--grey-color);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded-radius);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition);
}

.location-detect-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.location-detect-btn:hover svg {
    stroke: var(--color-white);
}

.location-detect-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.location-detect-btn.loading svg {
    animation: spin 1s linear infinite;
}

.location-dropdown-body {
    padding: 1.5rem;
}

.location-input-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.8rem;
}

.location-input-wrapper {
    display: flex;
    gap: 0.8rem;
}

.location-input {
    flex: 1;
    /* Match the Apply button in size, padding, radius and font */
    height: 3.5rem;
    padding: 0 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: normal;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease;
}

.location-input:focus {
    border-color: var(--color-primary);
}

.location-apply-btn {
    height: 3.5rem;
    padding: 0 1.5rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.location-apply-btn:hover {
    background: var(--color-heading);
}

.location-hint {
    font-size: 1.2rem;
    color: var(--color-text);
    margin: 1rem 0 0;
}

.location-hint.success {
    color: #10b981;
}

.location-hint.error {
    color: #ef4444;
}

/* Header Store Link */
.header-store-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    text-decoration: none;
    padding: 0.8rem 1.4rem;
    transition: var(--transition);
}

.header-store-link:hover {
    background: var(--grey-color);
    color: var(--color-primary);
}

.header-store-link svg {
    flex-shrink: 0;
}

/* Header Separator */
.header-separator {
    width: 1px;
    height: 28px;
    background: var(--color-border);
    margin: 0 0.3rem;
    flex-shrink: 0;
}

/* Header Right - Search + Actions */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Header Search Input */
.header-search {
    position: relative;
    flex-shrink: 0;
    background: var(--color-white);
    margin-left: auto;
}

.header-search-form {
    display: flex;
    align-items: center;
    width: 340px;
    height: 40px;
    border: 1px solid #DDD;
    border-radius: 5px;
    background: var(--color-white);
    overflow: hidden;
    margin-left: auto;
}

.header-search-form:focus-within {
    border-color: rgb(156, 163, 175);
}

.header-search-input {
    flex: 1;
    height: 3.6rem;
    padding: 0 1rem 0 0.8rem;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    font-size: 1.4rem;
    color: var(--color-heading);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.header-search-input::placeholder {
    color: rgb(156, 163, 175);
}

.header-search-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.header-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    background: transparent;
    color: rgb(156, 163, 175);
    border: none;
    border-right: 1px solid rgb(207, 210, 214);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.header-search-btn:hover {
    color: var(--color-heading);
}

.header-search-camera {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    background: transparent;
    color: var(--color-heading);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    margin-right: 0.3rem;
}

.header-search-camera:hover {
    color: var(--color-primary);
}

.header-search-icon {
    flex-shrink: 0;
    margin-left: 1.2rem;
    color: rgb(156, 163, 175);
}

/* Search Dropdown */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: var(--color-white);
    border-radius: var(--rounded-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    /* Fallback cap to viewport; JS sets a precise value based on the
       dropdown's distance from the top of the viewport (see theme.js). */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.search-dropdown.active {
    display: block;
}

.search-dropdown-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-text);
    font-size: 1.4rem;
}

.search-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.search-dropdown-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    color: rgb(156, 163, 175);
    font-size: 1.4rem;
}

.search-dropdown-results {
    display: none;
    padding: 0.8rem 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--color-heading);
    transition: background 0.2s ease;
}

.search-result-item:hover {
    background: var(--color-grey-light);
}

.search-result-image {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 0.6rem;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-grey-light);
    color: rgb(156, 163, 175);
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-parent {
    display: block;
    font-size: 1.2rem;
    color: rgb(156, 163, 175);
    margin-top: 0.2rem;
}

.search-result-arrow {
    flex-shrink: 0;
    color: rgb(156, 163, 175);
    transition: transform 0.2s ease;
}

.search-result-item:hover .search-result-arrow {
    transform: translateX(3px);
    color: var(--color-primary);
}

/* AI Visualization History — infinite scroll loader */
.ai-history-loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.4rem;
    color: var(--color-text);
    font-size: 1.4rem;
}

.ai-history-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

#ai-history-sentinel {
    width: 100%;
    height: 1px;
}

/* Group heading inside search dropdown (Categories / Products) */
.search-result-group-title {
    padding: 0.8rem 1.5rem 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(156, 163, 175);
}

.search-result-group-title:not(:first-child) {
    margin-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

/* Product price line in search results */
.search-result-price {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 0.2rem;
}

/* "See all results" footer row */
.search-result-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.1rem 1.5rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary);
    transition: background 0.2s ease;
}

.search-result-viewall:hover {
    background: var(--color-grey-light);
}

.search-result-viewall .search-result-arrow {
    color: var(--color-primary);
}

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

.header-action {
    position: relative;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-heading);
    transition: var(--transition);
    background: none;
    border: none;
    cursor: pointer;
}

.header-action:hover {
    color: var(--color-primary);
}

.header-action svg {
    width: 2rem;
    height: 2rem;
}

.header-action .badge {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header Dropdown */
.header-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 22rem;
    background: var(--color-white);
    box-shadow: var(--shadow);
    border-radius: 0 0 var(--rounded-radius) var(--rounded-radius);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 1001;
    padding: 1.5rem 0;
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    color: var(--color-text);
    transition: var(--transition);
}

.dropdown-item:hover {
    color: var(--color-primary);
    background: var(--grey-color);
}

.dropdown-header {
    padding: 1rem 2rem;
}

.dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: 0.5rem 0;
}

/* ========================================
   Navigation Bar - Below Header
======================================== */
.nav-bar {
    background: #7f622d33;
    border-top: 1px solid var(--color-border);
    padding: calc(0.5rem + 1.5px) 0;
    position: relative;
}

.nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-family: var(--menu-font);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-heading);
    padding: 0.4rem 0;
    position: relative;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-link svg {
    width: 1.2rem;
    height: 1.2rem;
    transition: var(--transition);
}

.nav-item.has-dropdown:hover .nav-link svg,
.nav-item.has-mega-menu:hover .nav-link svg {
    transform: rotate(180deg);
}

/* Navigation Dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 22rem;
    background: var(--color-white);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border-radius: var(--rounded-radius);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 1001;
    padding: 1.5rem 0;
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-inner {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-link {
    display: block;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    color: var(--color-text);
    transition: var(--transition);
}

.nav-dropdown-link:hover {
    color: var(--color-primary);
    background: var(--grey-color);
}

/* Mega Menu */
.has-mega-menu {
    position: static;
}

.has-mega-menu > .nav-link {
    /* Bigger hover hit-zone so cursor can drift left/right + down into the mega menu without losing :hover */
    padding-left: 2rem;
    padding-right: 2rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-bottom: 2rem;
    margin-bottom: -1.5rem;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-white);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* On close, delay visibility briefly so cursor drift between trigger and menu is forgiven */
    transition: opacity 0.2s ease, visibility 0s linear 0.18s;
    z-index: 1001;
    padding: 3rem 0;
}

/* Invisible hover-bridge above the menu so cursor never lands in "no man's land"
   between the nav-link bottom and the menu top */
.mega-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    /* Same hover behavior — keeps parent :hover active when cursor is in the gap */
}

.nav-item.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* On open, no delay — appears immediately */
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

/* Tab Row */
.mega-tab-scroll {
    position: relative;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.mega-tab-row {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.mega-tab-row::-webkit-scrollbar { display: none; }

/* Gradient fade overlays — signal more content off-screen */
.mega-tab-scroll::before,
.mega-tab-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 4rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}
.mega-tab-scroll::before {
    left: 0;
    background: linear-gradient(to right, var(--color-white) 20%, rgba(255, 255, 255, 0));
}
.mega-tab-scroll::after {
    right: 0;
    background: linear-gradient(to left, var(--color-white) 20%, rgba(255, 255, 255, 0));
}
.mega-tab-scroll.can-scroll-left::before { opacity: 1; }
.mega-tab-scroll.can-scroll-right::after { opacity: 1; }

/* Scroll arrow buttons — appear only when scrolling is possible */
.mega-tab-arrow {
    position: absolute;
    top: 0;
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    border: none;
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, color 0.2s ease;
    z-index: 2;
}
.mega-tab-arrow:hover { color: var(--color-primary); }
.mega-tab-arrow-left { left: 0; }
.mega-tab-arrow-right { right: 0; }
.mega-tab-scroll.can-scroll-left .mega-tab-arrow-left,
.mega-tab-scroll.can-scroll-right .mega-tab-arrow-right {
    opacity: 1;
    visibility: visible;
}

.mega-tab {
    padding: 1rem 1.8rem;
    font-family: var(--heading-font);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-light);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.mega-tab:hover,
.mega-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Panel */
.mega-panel.hidden { display: none; }

/* Grid of cards — 8 cols (each card ~75% the width of the previous 6-col layout) */
.mega-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1.6rem;
    max-height: 55vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    padding-bottom: 0.5rem;
}
.mega-grid::-webkit-scrollbar { width: 5px; }
.mega-grid::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.mega-grid::-webkit-scrollbar-track { background: transparent; }

/* Card */
.mega-card {
    text-align: center;
    display: block;
    text-decoration: none;
}
.mega-card-img {
    aspect-ratio: 1;
    border-radius: 0.8rem;
    overflow: hidden;
    background: var(--color-bg-alt, #f5f5f5);
}
.mega-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.mega-card:hover .mega-card-img img {
    transform: scale(1.05);
}
.mega-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light, #999);
}
.mega-card-name {
    margin-top: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-heading);
    transition: color 0.2s;
}
.mega-card:hover .mega-card-name {
    color: var(--color-primary);
}

.mega-menu-footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* Mobile Navigation - Nested Submenu */
.mobile-submenu-parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-submenu-parent-row > a {
    flex: 1;
    font-weight: 500;
    color: var(--color-heading);
    padding: 0.8rem 0;
    display: block;
    font-size: 1.4rem;
}

.mobile-nested-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--color-text);
    transition: transform 0.2s ease, background 0.2s ease;
}

.mobile-nested-toggle:hover {
    background: var(--color-background-alt, #f5f5f5);
}

.mobile-submenu-parent.nested-open .mobile-nested-toggle {
    transform: rotate(180deg);
}

.mobile-nav-submenu-nested {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 1.5rem;
    display: none;
    margin-bottom: 0.5rem;
}

.mobile-submenu-parent.nested-open .mobile-nav-submenu-nested {
    display: block;
}

.mobile-nav-submenu-nested li a {
    font-size: 1.3rem;
    color: var(--color-text-light);
    padding: 0.5rem 0;
    display: block;
}

/* Mobile responsive */
@media (max-width: 1024px) {
    /* Always show shadow on mobile */
    .header {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .header-inner {
        padding: 1.2rem 0;
        position: relative;
        justify-content: space-between;
    }

    .header-left {
        gap: 1rem;
        flex: 0 0 auto;
        position: static;
    }

    /* Mobile menu toggle stays visible */
    .header-left .mobile-menu-toggle {
        position: relative;
        z-index: 2;
    }

    /* Center logo on mobile - positioned relative to header-inner */
    .header-left .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .header-location,
    .header-store-link,
    .header-search {
        display: none !important;
    }

    .nav-bar {
        display: none;
    }

    .logo {
        font-size: 2.4rem;
    }

    .logo img {
        height: 3.5rem;
    }

    .header-right {
        gap: 0.5rem;
        position: relative;
        z-index: 2;
    }
}

/* ========================================
   Mobile Navigation Drawer
======================================== */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 36rem;
    height: 100vh;
    background: var(--color-background);
    z-index: 1003;
    transform: translateX(-100%);
    transition: var(--transition-popup);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

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

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.mobile-nav-header .logo {
    font-size: 2.4rem;
}

.mobile-nav-close {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-heading);
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-nav-content {
    padding: 0 2rem 2rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-nav-spacer {
    flex: 1;
    min-height: 2rem;
}

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

.mobile-nav-item {
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
    text-decoration: none;
}

.mobile-nav-link .toggle-icon {
    transition: var(--transition);
}

.mobile-nav-item.open .mobile-nav-link .toggle-icon {
    transform: rotate(180deg);
}

.mobile-nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 1rem 1.5rem;
    display: none;
}

.mobile-nav-item.open .mobile-nav-submenu {
    display: block;
}

.mobile-nav-submenu li a {
    display: block;
    padding: 0.8rem 0;
    font-size: 1.4rem;
    color: var(--color-text);
}

.mobile-nav-submenu li a:hover {
    color: var(--color-primary);
}

.mobile-nav-divider {
    height: 1px;
    background: var(--color-border);
    margin: 1.5rem 0;
}

.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-nav-action-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 1.5rem;
    color: var(--color-heading);
    text-decoration: none;
}

.mobile-nav-action-link:hover {
    color: var(--color-primary);
}

.mobile-nav-contact {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.mobile-nav-address {
    font-size: 1.3rem;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
}

.mobile-nav-directions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 0.3rem;
}

.mobile-nav-directions:hover {
    text-decoration: underline;
}

.mobile-nav-directions svg {
    transition: transform 0.2s ease;
}

.mobile-nav-directions:hover svg {
    transform: translateX(3px);
}

.mobile-nav-contact-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
    color: var(--color-text);
    text-decoration: none;
}

.mobile-nav-contact-link:hover {
    color: var(--color-primary);
}

.mobile-nav-contact-link svg {
    flex-shrink: 0;
    color: var(--color-text-light);
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

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

/* ========================================
   Mobile Footer Bar
======================================== */
.mobile-footer-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    z-index: 1001;
    padding: 0.8rem 0;
    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0));
}

@media (max-width: 1024px) {
    .mobile-footer-bar {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /* Add padding to body to prevent content being hidden behind footer bar */
    body {
        padding-bottom: 7rem;
    }
}

.mobile-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}

.mobile-footer-item:hover,
.mobile-footer-item:active {
    color: var(--color-primary);
}

.mobile-footer-item svg {
    flex-shrink: 0;
}

.mobile-footer-item span:not(.mobile-footer-badge) {
    font-weight: 500;
}

.mobile-footer-badge {
    position: absolute;
    top: 0;
    right: 0.2rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-footer-filter,
.mobile-footer-shop {
    color: var(--color-primary);
}

.mobile-footer-filter svg,
.mobile-footer-shop svg {
    stroke-width: 2;
}

/* ========================================
   Search Overlay
======================================== */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1004;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.search-overlay-inner {
    width: 100%;
    max-width: 70rem;
    padding: 2rem;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: transparent;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 1.5rem;
}

.search-form .search-icon {
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.search-form .search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 2.4rem;
    font-weight: 300;
    padding: 0;
    height: auto;
}

.search-form .search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-form .search-input:focus {
    outline: none;
    border: none;
}

.search-form .search-close {
    color: rgba(255, 255, 255, 0.5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}

.search-form .search-close:hover {
    color: var(--color-white);
}

/* ========================================
   Hero Slideshow - Milano Style
======================================== */
.hero-section {
    position: relative;
    overflow: hidden;
    /* Milano uses padding on the slider section */
    padding: 20px var(--bs-gutter-x) 0;
}

@media (min-width: 1200px) {
    .hero-section {
        padding: 2rem 3rem;
    }
}

.slideshow.swiper {
    width: 100%;
    /* Milano fixed height: 460px mobile, 740px desktop - user requested 500px */
    height: var(--slide-height, 500px);
    border-radius: var(--rounded-radius);
    overflow: hidden;
}

@media (min-width: 992px) {
    .slideshow.swiper {
        height: var(--slide-height-desktop, 600px);
    }
}

.slideshow .swiper-slide {
    position: relative;
    overflow: hidden;
}

.slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.slide-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Image/video: object-fit cover - no distortion, may crop */
.slide-media img,
.slide-media video,
.slide-image,
.slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/* Video specific styles */
.slide-video {
    background: #000;
    /* iOS Safari fix */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Ensure active slide video is visible */
.swiper-slide-active .slide-video,
.swiper-slide-duplicate-active .slide-video {
    opacity: 1;
    visibility: visible;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}

.slide-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: clamp(2rem, 5vw, 6rem) clamp(2rem, 5vw, 6rem);
}

.slide-content-inner {
    max-width: 50rem;
    color: var(--color-white);
}

.slide-subtitle {
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    color: var(--color-white);
    opacity: 0.9;
}

/* 0.2em of tracking on a 14px uppercase line is what made "CREATE YOUR SPACE
   WITH STYLE" break mid-phrase on a 375px screen. */
@media (max-width: 767px) {
    .slide-subtitle {
        font-size: 1.2rem;
        letter-spacing: 0.12em;
    }
}

.slide-title {
    font-family: var(--heading-font);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 500;
    margin-bottom: 2rem;
    color: var(--color-white);
    line-height: 1.1;
}

.slide-description {
    font-size: 1.6rem;
    line-height: 1.7;
    margin-bottom: 3rem;
    opacity: 0.9;
}

.slide-actions {
    display: flex;
    gap: 1.5rem;
}

.slide-actions .btn {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

.slide-actions .btn:hover {
    background-color: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* Hero Default - matches slideshow dimensions */
.hero-default {
    width: 100%;
    height: var(--slide-height);
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a1a1a 100%);
    border-radius: var(--rounded-radius);
    overflow: hidden;
}

@media (min-width: 992px) {
    .hero-default {
        height: var(--slide-height-desktop);
    }
}

.hero-default .slide-content-inner {
    color: var(--color-white);
    padding: clamp(2rem, 5vw, 6rem);
}

/* Swiper Navigation - Slideshow Style (Round, 2x icons) */
.slideshow .swiper-button-prev,
.slideshow .swiper-button-next {
    width: 6rem;
    height: 6rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.slideshow .swiper-button-prev:hover,
.slideshow .swiper-button-next:hover {
    background: var(--color-white);
    transform: scale(1.05);
}

.slideshow .swiper-button-prev::after,
.slideshow .swiper-button-next::after {
    font-family: inherit;
    font-size: 2.8rem;
    color: var(--color-heading);
    font-weight: 400;
    line-height: 1;
}

.slideshow .swiper-button-prev::after {
    content: '‹';
}

.slideshow .swiper-button-next::after {
    content: '›';
}

.slideshow .swiper-button-prev:hover::after,
.slideshow .swiper-button-next:hover::after {
    color: var(--color-heading);
}

.slideshow .swiper-pagination {
    bottom: 3rem !important;
}

.slideshow .swiper-pagination-bullet {
    width: 4rem;
    height: 0.3rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0;
    opacity: 1;
    transition: var(--transition);
    margin: 0 0.5rem !important;
}

.slideshow .swiper-pagination-bullet-active {
    background: var(--color-white);
    width: 6rem;
}

@media (max-width: 768px) {
    .slide-title {
        font-size: 2.8rem;
    }

    .slideshow .swiper-button-prev,
    .slideshow .swiper-button-next {
        display: none;
    }

}


/* ========================================
   Categories Swiper - Milano Style
======================================== */
.categories-swiper {
    /* Was overflow: visible, which defeats Swiper's own clipping and let the
       whole slide rail widen the document (2331px of page at a 1366px
       viewport). The mobile peek below works inside a clipped box. */
    overflow: hidden;
}

.categories-swiper .swiper-wrapper {
    /* Align cards to the left */
}

.categories-swiper .swiper-slide {
    /* 4 cards visible on desktop - Milano uses margin-right for spacing */
    width: calc((100% - 60px) / 4);
    margin-right: 20px;
    flex-shrink: 0;
}

.categories-swiper .swiper-slide:last-child {
    margin-right: 0;
}

@media (max-width: 1024px) {
    .categories-swiper .swiper-slide {
        /* 3 cards on tablet */
        width: calc((100% - 40px) / 3);
    }
}

@media (max-width: 767px) {
    .categories-swiper .swiper-slide {
        /* 1 card on mobile with peek effect */
        width: calc(100% - 30px);
        margin-right: 15px;
    }
}

/* ========================================
   Category Cards - Milano Style
======================================== */
.category-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rounded-radius);
    /* Milano aspect ratio for collection items */
    aspect-ratio: 0.8;
    width: 100%;
}

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

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

/* Milano gradient overlay */
.category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, 0.4) 100%);
    opacity: 0.75;
    pointer-events: none;
    z-index: 1;
    border-radius: var(--rounded-radius);
}

.category-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    z-index: 2;
}

.category-card-content {
    width: 100%;
}

.category-card-title {
    display: inline-block;
    background: var(--color-white);
    color: var(--color-heading);
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 500;
    padding: 1rem 2.5rem;
    border-radius: var(--btn-radius);
    transition: var(--transition);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-card:hover .category-card-title {
    background: var(--color-heading);
    color: var(--color-white);
}

.category-card-count {
    display: none;
}

.category-card-link {
    display: none;
}

/* ========================================
   Application Areas Section - Shop by Space
======================================== */
.application-areas-section {
    background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%);
    padding: 4rem 0;
}

.application-areas-header {
    text-align: center;
    margin-bottom: 3rem;
}

.application-areas-tagline {
    font-family: var(--heading-font);
    /* This is the Shop by Space section heading, so it takes the shared H2
       scale rather than its own 30px/24px pair. */
    font-size: var(--type-section-title);
    font-weight: var(--title-weight);
    color: var(--color-heading);
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.application-areas-subtitle {
    font-size: 1.4rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0;
}

.application-areas-grid {
    display: grid;
    /* auto-fit, and the whole grid centred: a last row with one card sits
       under the middle of the section instead of hanging off the left, and
       the cards never stretch past a sensible width. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    justify-content: center;
}

.application-area-card {
    min-width: 0;
}

/* The longest space name ("Wardrobe Shutter And Door") wrapped and pushed the
   card taller than its neighbours. */
.application-area-name {
    overflow-wrap: break-word;
    hyphens: auto;
}

.application-area-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.application-area-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.application-area-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

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

.application-area-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e0d8 0%, #d4c9bd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.application-area-placeholder .material-icons {
    font-size: 48px;
    color: rgba(0, 0, 0, 0.25);
}

.application-area-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem 1.2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
}

.application-area-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

@media (max-width: 768px) {
    .application-areas-section {
        padding: 3rem 0;
    }

    .application-areas-grid {
        gap: 1rem;
    }

    .application-areas-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .application-area-name {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .application-areas-grid {
        gap: 0.8rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .application-area-card {
        border-radius: 8px;
    }

    .application-area-overlay {
        padding: 1.5rem 1rem 0.8rem;
    }

    .application-area-name {
        font-size: 1.2rem;
    }
}

/* ========================================
   Product Card - Milano Style
======================================== */
.product-card {
    position: relative;
    background: var(--color-white);
    /* Column layout so .product-card-price can be pushed to the bottom with
       margin-top: auto, which is what makes prices line up across a row
       whatever the title does. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card-media {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: var(--rounded-radius);
    /* Skeleton shimmer shown while the (lazy) product image loads.
       Cleared by adding .is-loaded once the first image paints (product-card.js). */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.product-card-media.is-loaded {
    animation: none;
    background: #f5f5f5;
}

.product-card-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

/* Hover carousel — images stacked; only the active one is visible */
.product-carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

.product-carousel-img.is-active {
    opacity: 1;
    z-index: 2;
}

/* Dot indicators — appear on hover, track the active image */
.product-carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

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

.product-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
    transition: background 0.25s ease, transform 0.25s ease;
}

.product-carousel-dot.is-active {
    background: #fff;
    transform: scale(1.35);
}

/* Product Badges */
.product-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    /* Stacked badges are each only as wide as their own text and all start at
       the same left edge, so NEW no longer looks wider than POPULAR. */
    align-items: flex-start;
    gap: 0.5rem;
    z-index: 3;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.45rem 0.8rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-white);
    border-radius: 0;
}

.badge-sale {
    background: #D0473E;
}

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

.badge-popular {
    background: #B8860B;
}

/* Brand logo on product detail */
.product-brand-logo {
    margin-bottom: 0.75rem;
}

.product-brand-logo img {
    max-height: 44px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
}

/* Stock availability — detail & cart */
.product-stock-status,
.cart-item-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.product-stock-status {
    margin: 0.75rem 0 0.25rem;
}

.product-stock-status.in-stock,
.cart-item-stock.in-stock {
    color: #1a7f37;
}

.product-stock-status.made-to-order,
.cart-item-stock.made-to-order {
    color: #B8860B;
}

.cart-item-stock {
    margin-top: 0.25rem;
    font-size: 1.1rem;
}

/* Inline New/Popular tags on detail, cart & wishlist */
.product-tags,
.cart-item-tags,
.wishlist-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0.6rem;
}

.product-tags .product-badge,
.cart-item-tags .product-badge,
.wishlist-item-tags .product-badge {
    padding: 0.25rem 0.6rem;
    font-size: 1rem;
    line-height: 1.2;
}

/* Product Actions - Top Right */
.product-actions-top {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 5;
}

.product-action-btn {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: 50%;
    color: var(--color-heading);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(1rem);
}

.product-card:hover .product-action-btn {
    opacity: 1;
    transform: translateX(0);
}

.product-action-btn:nth-child(2) {
    transition-delay: 0.05s;
}

.product-action-btn:hover {
    background: var(--color-heading);
    color: var(--color-white);
}

.product-action-btn.active {
    color: #D0473E;
}

.product-action-btn.active svg {
    fill: currentColor;
}

/* Quick View Button Loading State */
.btn-quickview .icon-spinner {
    display: none;
    animation: spin 0.8s linear infinite;
}

.btn-quickview.loading .icon-eye {
    display: none;
}

.btn-quickview.loading .icon-spinner {
    display: block;
}

.btn-quickview.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Product Actions - Bottom (Add to Cart) */
.product-actions-bottom {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 5;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.3s ease;
}

.product-card:hover .product-actions-bottom {
    opacity: 1;
    transform: translateY(0);
}

.product-add-cart {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0 2rem;
    background: var(--color-heading);
    color: var(--color-white);
    border: none;
    /* Was border-radius: 0 with 13px/500 text - the one square button on a
       site of pills. Shares the primary geometry now. */
    border-radius: var(--btn-radius);
    min-height: var(--btn-height);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.product-add-cart:hover {
    background: var(--color-primary);
}

.product-add-cart svg {
    flex-shrink: 0;
}

/* Product Info */
.product-card-info {
    padding: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.product-brand {
    display: block;
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 0.2rem;
    text-transform: capitalize;
}

.product-name {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    /* Exactly two lines, every card: clamp what is longer and reserve the
       second line when the title is short. Titles that wrapped to 1-3 lines
       are why the prices in a row did not line up. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.6rem * 1.4 * 2);
}

.product-name a {
    color: inherit;
    text-decoration: none;
}

.product-name a:hover {
    color: var(--color-primary);
}

/* Product Rating */
.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.product-rating .stars {
    display: flex;
    gap: 0.1rem;
}

.product-rating .star {
    color: #ddd;
    font-size: 1.2rem;
    line-height: 1;
}

.product-rating .star.filled {
    color: var(--rate-color);
}

.product-rating .review-count {
    font-size: 1.2rem;
    color: #888;
}

/* Product Price */
.product-price {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    /* Sits at the bottom of the card whatever the title above it did. */
    margin-top: auto;
}

.product-price .price-regular,
.product-price .price-sale {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
}

.product-price .price-sale {
    color: var(--color-primary);
}

.product-price .price-compare {
    font-size: 1.4rem;
    color: #999;
    text-decoration: line-through;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
    .product-action-btn {
        opacity: 1;
        transform: translateX(0);
        width: 3rem;
        height: 3rem;
    }

    .product-actions-bottom {
        opacity: 1;
        transform: translateY(0);
        position: static;
        margin-top: 1rem;
    }

    .product-card-media {
        margin-bottom: 0;
    }
}

/* ========================================
   Shop The Look - Milano Style
======================================== */
.lookbook-section {
    position: relative;
}

.lookbook-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

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

.lookbook-item {
    position: relative;
}

.lookbook-image {
    position: relative;
    border-radius: var(--rounded-radius);
    overflow: hidden;
}

.lookbook-image img {
    width: 100%;
    height: auto;
    display: block;
}

.lookbook-dot {
    position: absolute;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: var(--transition);
    z-index: 2;
    transform: translate(-50%, -50%);
}

.lookbook-dot::before {
    content: '';
    width: 1rem;
    height: 1rem;
    background: var(--color-heading);
    border-radius: 50%;
    transition: var(--transition);
}

.dot-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-white);
    opacity: 0.5;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 0.5; }
}

.lookbook-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--color-white);
    border-radius: var(--rounded-radius);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    min-width: 22rem;
    z-index: 10;
}

.lookbook-dot:hover .lookbook-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.lookbook-popup img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.lookbook-popup-content h4 {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
}

.lookbook-popup-price {
    display: block;
    font-size: 1.3rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.lookbook-info {
    padding: 1.5rem 0;
    text-align: center;
}

.lookbook-info h3 {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

/* ========================================
   Philosophy Section - Milano Style
======================================== */
.philosophy-section {
    padding: 6rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.philosophy-content {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.philosophy-heading {
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-heading);
    margin-bottom: 3rem;
}

/* ========================================
   Static Lookbook Section - Milano Style
======================================== */
.lookbook-grid-static {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .lookbook-grid-static {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lookbook-item-static {
    position: relative;
}

.lookbook-image-wrapper {
    position: relative;
    border-radius: var(--rounded-radius);
    overflow: hidden;
    aspect-ratio: 4/3;
}

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

/* Lookbook Hotspots */
.lookbook-hotspot {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
}

.hotspot-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    background: var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    position: relative;
}

.hotspot-dot::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-heading);
    border-radius: 50%;
}

.hotspot-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-white);
    opacity: 0.5;
    animation: hotspotPulse 2s infinite;
}

@keyframes hotspotPulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1); opacity: 0.5; }
}

.hotspot-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
    background: var(--color-white);
    border-radius: 0.5rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    padding: 1rem;
    display: flex;
    gap: 1.2rem;
    min-width: 24rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
}

.hotspot-popup.popup-left {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.lookbook-hotspot:hover .hotspot-popup {
    opacity: 1;
    visibility: visible;
    margin-top: 0.5rem;
}

.hotspot-popup-image {
    width: 8rem;
    height: 8rem;
    flex-shrink: 0;
}

.hotspot-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.3rem;
}

.hotspot-popup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hotspot-popup-content h4 {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.hotspot-popup-price {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 0.8rem;
}

.hotspot-popup-content .btn {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
}

/* ========================================
   Lifestyle Cards Section - Milano Style
======================================== */
.lifestyle-section {
    /* Uses standard section spacing from .section class */
}

.lifestyle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

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

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

.lifestyle-card {
    position: relative;
}

.lifestyle-card-image {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--rounded-radius);
    overflow: hidden;
    margin-bottom: 2rem;
}

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

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

.lifestyle-card-content h3 {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1.2rem;
    line-height: 1.3;
}

.lifestyle-card-content p {
    font-size: var(--type-body);
    color: var(--color-text);
    line-height: var(--type-line-height);
    margin-bottom: 1.5rem;
}

/* ========================================
   Promo Banner Section - Milano Style
======================================== */
.promo-banner-section {
    /* Uses standard section spacing from .section class */
}

.promo-banner {
    position: relative;
    min-height: 50rem;
    border-radius: var(--rounded-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    .promo-banner {
        min-height: 70rem;
    }
}

.promo-banner-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.promo-banner-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
}

.promo-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-banner-content {
    position: relative;
    z-index: 2;
    padding: 4rem;
    color: var(--color-white);
}

@media (min-width: 992px) {
    .promo-banner-content {
        padding: 5rem;
    }
}

.promo-banner-title {
    font-family: var(--heading-font);
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
    color: var(--color-white);
}

.promo-banner-text {
    font-size: 1.8rem;
    margin-bottom: 3rem;
    opacity: 0.9;
}

/* ========================================
   Feature Banner - Milano Style
======================================== */
.feature-banner {
    position: relative;
    overflow: hidden;
}

.feature-banner img {
    width: 100%;
    height: auto;
}

.feature-banner__content {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
}

.feature-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-heading);
    color: var(--color-white);
    padding: 1.5rem 2.5rem;
    font-size: 1.4rem;
    font-weight: 500;
    transition: var(--transition);
}

.feature-banner__btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ========================================
   Marquee / Scrolling Text - Milano Style
======================================== */
.marquee-section {
    padding: 3rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.marquee {
    display: flex;
    overflow: hidden;
}

.marquee:hover .marquee-content {
    animation-play-state: paused;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-shrink: 0;
    min-width: 100%;
}

.marquee-content.animation-marquee {
    animation: marquee 30s linear infinite;
}

.marquee-item {
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 500;
    color: var(--color-heading);
    white-space: nowrap;
}

.marquee-separator {
    font-size: clamp(2rem, 3vw, 3rem);
    color: var(--color-primary);
    opacity: 0.5;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ========================================
   Testimonials Section - Milano Style
======================================== */
.testimonials-section {
    background: var(--color-white);
    overflow: hidden;
}

.testimonials-swiper {
    /* Was overflow: visible, so the peeking card was only clipped by the
       section (which is full-bleed) and ran all the way to the page edge.
       It now ends at the container edge like every other rail, and a short
       fade on the trailing edge makes the cut read as "there is more". */
    overflow: hidden;
    padding-bottom: 3rem;
    mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent 100%);
}

.testimonials-swiper .swiper-slide {
    width: 400px;
    height: auto;
}

.testimonial-card {
    background: var(--grey-color);
    border-radius: var(--rounded-radius);
    padding: 3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border: 1px solid transparent;
}

.testimonial-card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow);
}

.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.testimonial-rating .star {
    font-size: 1.4rem;
    color: var(--grey-300);
}

.testimonial-rating .star.filled {
    color: var(--rate-color);
}

.testimonial-text {
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--color-text);
    flex: 1;
    margin-bottom: 2rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 600;
    flex-shrink: 0;
}

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

.testimonial-name {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 0.25rem;
}

.testimonial-role {
    font-size: 1.3rem;
    color: var(--grey-500);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Testimonials Swiper Scrollbar */
.testimonials-swiper .swiper-scrollbar {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.testimonials-swiper .swiper-scrollbar-drag {
    background: var(--color-primary);
    border-radius: 2px;
    cursor: grab;
}

.testimonials-swiper .swiper-scrollbar-drag:active {
    cursor: grabbing;
}

/* Responsive */
@media (max-width: 768px) {
    .testimonials-swiper .swiper-slide {
        width: 320px;
    }

    .testimonial-card {
        padding: 2.5rem 2rem;
    }

    .testimonial-text {
        font-size: 1.4rem;
    }

    .testimonial-avatar {
        width: 42px;
        height: 42px;
        font-size: 1.3rem;
    }

    .testimonial-name {
        font-size: 1.4rem;
    }

    .testimonial-role {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .testimonials-swiper .swiper-slide {
        width: 290px;
    }

    .testimonial-card {
        padding: 2rem 1.5rem;
    }
}

/* ========================================
   FAQ Accordion - Milano Style
======================================== */
.faq-section {
    background: var(--grey-color);
}

.section-header-center {
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-description {
    font-size: 1.5rem;
    color: var(--color-text);
    max-width: 60rem;
    margin: 0 auto;
}

.faq-wrapper {
    max-width: 80rem;
    margin: 0 auto;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--color-white);
    border-radius: var(--rounded-radius);
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem 2.5rem;
    cursor: pointer;
    transition: var(--transition);
    background: none;
    border: none;
    text-align: left;
}

.faq-question span {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
    flex: 1;
    padding-right: 1.5rem;
}

.faq-icon {
    flex-shrink: 0;
    color: var(--color-heading);
    transition: var(--transition);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    display: none;
    padding: 0 2.5rem 2rem;
}

.faq-answer p {
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    color: var(--color-text);
    margin: 0;
}

.faq-item.active .faq-answer {
    display: block;
}

/* ========================================
   USP Bar - Milano Style
======================================== */
.usp-bar {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 2.5rem 0;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

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

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

.usp-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.usp-item svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.usp-item .material-icons {
    font-size: 3.2rem;
    opacity: 0.9;
}

.usp-item-text strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.usp-item-text span {
    font-size: 1.3rem;
    opacity: 0.8;
}

/* ========================================
   CTA Section
======================================== */
.cta-section {
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    padding: 6rem 0;
}

.cta-subtitle {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.cta-title {
    font-family: var(--heading-font);
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.cta-text {
    max-width: 60rem;
    margin: 0 auto 3rem;
    opacity: 0.9;
    font-size: 1.6rem;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-outline-white {
    background: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
}

.btn-outline-white:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ========================================
   Newsletter Section - Above Footer
======================================== */
.newsletter-section {
    background: var(--grey-color);
    padding: 5rem 0;
}

.newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 768px) {
    .newsletter-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
}

.newsletter-content {
    max-width: 50rem;
}

.newsletter-title {
    font-family: var(--heading-font);
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.newsletter-text {
    font-size: 1.5rem;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 0;
}

.newsletter-section .newsletter-form {
    display: flex;
    gap: 0;
}

.newsletter-input-wrapper {
    display: flex;
    width: 100%;
    max-width: 50rem;
}

@media (max-width: 768px) {
    .newsletter-input-wrapper {
        margin: 0 auto;
    }
}

.newsletter-input-wrapper input {
    flex: 1;
    height: 5.4rem;
    padding: 0 2rem;
    border: 1px solid var(--color-border);
    border-right: none;
    background: var(--color-white);
    font-size: 1.4rem;
    border-radius: 0;
}

.newsletter-input-wrapper input:focus {
    outline: none;
    border-color: var(--color-heading);
}

.newsletter-input-wrapper .btn {
    flex-shrink: 0;
    height: 5.4rem;
    padding: 0 2.5rem;
    border-radius: 0;
}

/* ========================================
   Footer - Milano Dark Style
======================================== */
.footer {
    background: var(--color-primary);
    color: rgba(255,255,255,0.8);
    padding: 6rem 0 3rem;
}

.footer-top {
    padding-bottom: 4rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 3rem;
}

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

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

.footer-brand {
    max-width: 30rem;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.footer-logo .logo-text,
.footer-brand .logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--color-white);
    font-size: 2.8rem;
}

.footer-logo img {
    height: 4rem;
    width: auto;
}

.footer-about {
    font-size: 1.4rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,0.8);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.8);
}

.footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    opacity: 0.7;
}

.footer-contact-item a {
    color: rgba(255,255,255,0.8);
}

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

.footer-column {
    padding-top: 0.5rem;
}

.footer-title {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 2rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-links li a {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.7);
    transition: var(--transition);
}

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

/* Footer Newsletter Column */
.footer-newsletter {
    background: rgba(255,255,255,0.05);
    padding: 2rem;
    border-radius: var(--rounded-radius);
}

.footer-newsletter h4 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.footer-newsletter p {
    font-size: var(--type-body);
    color: rgba(255,255,255,0.7);
    margin-bottom: 1.5rem;
}

.newsletter-form {
    display: flex;
    gap: 0;
}

.newsletter-form input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-right: none;
    color: var(--color-white);
    padding: 0 1.5rem;
    height: 5rem;
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.5);
}

.newsletter-form button {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

.newsletter-terms {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    opacity: 0.6;
}

.newsletter-terms a {
    color: var(--color-white);
    font-weight: 600;
}

/* Footer Social */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.social-link {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--color-white);
    transition: var(--transition);
}

.social-link:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

.social-link .material-icons {
    font-size: 1.8rem;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-copyright {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social .social-link {
    width: 3.6rem;
    height: 3.6rem;
}

.footer-social .social-link svg {
    width: 1.6rem;
    height: 1.6rem;
}

.footer-payments {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-payments img {
    height: 2.4rem;
    width: auto;
    opacity: 0.7;
    transition: var(--transition);
}

.footer-payments img:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .footer-social,
    .footer-payments {
        justify-content: center;
    }
}

/* ========================================
   Swiper/Carousel Navigation - Milano Style
======================================== */
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4.8rem;
    height: 4.8rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: var(--transition);
    z-index: 10;
    cursor: pointer;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--color-heading);
    border-color: var(--color-heading);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-family: inherit;
    font-size: 1.8rem;
    color: var(--color-heading);
    font-weight: 400;
    line-height: 1;
}

.swiper-button-prev::after {
    content: '‹';
}

.swiper-button-next::after {
    content: '›';
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
    color: var(--color-white);
}

/* Categories/Products Swiper with side arrows */
.categories-swiper,
.products-swiper {
    position: relative;
    padding: 0;
}

/* The arrows used to sit at left/right: 1rem, which put them on top of the
   first and last card's image. They now hang in the container gutter,
   outside the cards, and only come inside when there is no gutter to use. */
.categories-swiper .swiper-button-prev,
.products-swiper .swiper-button-prev {
    left: calc(var(--container-pad) * -1);
}

.categories-swiper .swiper-button-next,
.products-swiper .swiper-button-next {
    right: calc(var(--container-pad) * -1);
}

@media (max-width: 1399px) {
    .categories-swiper .swiper-button-prev,
    .products-swiper .swiper-button-prev {
        left: 0.4rem;
    }

    .categories-swiper .swiper-button-next,
    .products-swiper .swiper-button-next {
        right: 0.4rem;
    }

    /* Inside the rail, the arrow needs its own ground to stand on. */
    .categories-swiper .swiper-button-prev,
    .categories-swiper .swiper-button-next,
    .products-swiper .swiper-button-prev,
    .products-swiper .swiper-button-next {
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* 2x icon size for category navigation */
.categories-swiper .swiper-button-prev::after,
.categories-swiper .swiper-button-next::after {
    font-size: 3.6rem;
}

@media (max-width: 768px) {
    .categories-swiper .swiper-button-prev,
    .categories-swiper .swiper-button-next,
    .products-swiper .swiper-button-prev,
    .products-swiper .swiper-button-next {
        display: none;
    }
}

/* Products Swiper Slide sizing - Milano style with margin-right */
.products-swiper .swiper-slide {
    /* 5 cards on desktop with 20px gaps (4 gaps = 80px) */
    width: calc((100% - 80px) / 5);
    margin-right: 20px;
    flex-shrink: 0;
}

.products-swiper .swiper-slide:last-child {
    margin-right: 0;
}

@media (max-width: 1024px) {
    .products-swiper .swiper-slide {
        /* 3 cards on tablet with 20px gaps (2 gaps = 40px) */
        width: calc((100% - 40px) / 3);
    }
}

/* 767px, not 768px: at exactly 768px (the tablet width) this used to override
   the 3-card tablet rule above and drop the rail to 2 oversized cards.
   One ladder for every product rail now: 2 mobile / 3 tablet / 5 laptop. */
@media (max-width: 767px) {
    .products-swiper .swiper-slide {
        /* 2 cards on mobile with 15px gap */
        width: calc((100% - 15px) / 2);
        margin-right: 15px;
    }
}

/* ========================================
   Breadcrumb
======================================== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
    padding: 2rem 0;
}

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

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

.breadcrumb-separator {
    color: var(--grey-300);
}

/* ========================================
   Grid System
======================================== */
.grid {
    display: grid;
    gap: 2.4rem;
}

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

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

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

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

/* ========================================
   Loading & Utility States
======================================== */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
}

/* Material Icons support */
.material-icons {
    font-size: 2.4rem;
    line-height: 1;
}

.material-icons.sm {
    font-size: 1.8rem;
}

.material-icons.lg {
    font-size: 3.2rem;
}

/* Hover zoom effect */
.hover-zoom {
    overflow: hidden;
}

.hover-zoom img {
    transition: transform 0.5s ease;
}

.hover-zoom:hover img {
    transform: scale(1.08);
}

/* Background utilities */
.bg-light {
    background: var(--grey-color);
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 767px) {
    :root {
        --height-header: 6rem;
    }

    .section {
        padding-top: var(--section-pad-y);
        padding-bottom: var(--section-pad-y);
    }

    .section-header {
        /* Stays a row at every width: the "View All" link belongs on the
           heading's line, right-aligned, not stacked under it. */
        flex-direction: row;
        align-items: flex-end;
        gap: 1.2rem;
    }
}

/* ========================================
   Shared Page Header
   One header for every inner page: eyebrow + H1 + subtitle, centred, on one
   background with one set of padding. Rendered by partials/page-header.php.
======================================== */
.page-header {
    position: relative;
    background: var(--grey-color);
    padding: var(--section-pad-y) 0;
    text-align: center;
    overflow: hidden;
}

.page-header-inner {
    max-width: var(--prose-width);
    margin-inline: auto;
}

.page-header-eyebrow {
    font-size: var(--type-eyebrow);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 1rem;
}

.page-header .page-title {
    margin: 0;
}

.page-header-subtitle {
    font-size: var(--type-subtitle);
    line-height: var(--type-line-height);
    color: var(--text-secondary);
    margin: 1.2rem 0 0;
}

.page-header-extra {
    margin-top: 2.4rem;
}

/* Photo variant: the About header keeps its storefront photograph, as a
   background behind the same centred text rather than a band of its own. */
.page-header--photo {
    background: var(--color-dark);
    min-height: 32rem;
    display: flex;
    align-items: center;
}

.page-header--photo .page-header-media {
    position: absolute;
    inset: 0;
}

.page-header--photo .page-header-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-header--photo .page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.page-header--photo .container {
    position: relative;
    z-index: 2;
}

.page-header--photo .page-title,
.page-header--photo .page-header-subtitle,
.page-header--photo .page-header-eyebrow {
    color: var(--color-white);
}

/* Dark variant, for headers that carried a dark band before. */
.page-header--dark {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1f1810 100%);
}

.page-header--dark .page-title,
.page-header--dark .page-header-subtitle {
    color: var(--color-white);
}

.page-header--dark .page-header-eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

/* ========================================
   About Page Styles
======================================== */

/* About Hero Section */
.about-hero {
    position: relative;
    height: 50rem;
    overflow: hidden;
}

@media (min-width: 992px) {
    .about-hero {
        height: 60rem;
    }
}

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

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

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 1;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.about-hero-title {
    font-family: var(--heading-font);
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.about-hero-subtitle {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 50rem;
}

/* About Introduction Section */
.about-intro {
    background: var(--color-white);
}

.about-intro-grid {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a plain 1fr track floors at the child's
       min-content width, which is what pushed this section to 510px on a
       375px screen and clipped the text on the right. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6rem;
    align-items: center;
}

/* Grid children must be allowed to shrink below their min-content width. */
.about-intro-grid > *,
.about-intro-stats > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 991px) {
    .about-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 4rem;
    }
}

.about-intro-content .section-subtitle {
    margin-bottom: 1rem;
}

.about-intro-content .section-title {
    margin-bottom: 2rem;
}

.about-lead {
    font-size: 1.7rem;
    line-height: 1.8;
    color: var(--color-heading);
    margin-bottom: 1.5rem;
}

.about-intro-content p {
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    color: var(--color-text);
}

/* About Stats */
.about-intro-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.stat-card {
    background: var(--grey-color);
    border-radius: var(--rounded-radius);
    padding: 3rem 2rem;
    text-align: center;
    min-width: 0;
}

/* The stat figures are the widest words in the section; let them wrap rather
   than set the column width. */
.stat-number,
.stat-label {
    overflow-wrap: anywhere;
}

.stat-number {
    display: block;
    font-family: var(--heading-font);
    font-size: 4rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 1.4rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* About Products Section */
.about-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

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

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

.product-category-card {
    background: var(--color-white);
    border-radius: var(--rounded-radius);
    padding: 3rem;
    text-align: center;
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.product-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    background: var(--grey-color);
    border-radius: 50%;
    margin-bottom: 2rem;
    color: var(--color-primary);
}

.product-category-card h3 {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.product-category-card p {
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    color: var(--color-text);
    margin: 0;
}

/* About Clientele Section */
.about-clientele-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

@media (max-width: 991px) {
    .about-clientele-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

.about-clientele-image {
    border-radius: var(--rounded-radius);
    overflow: hidden;
}

.about-clientele-image img {
    width: 100%;
    height: auto;
    display: block;
}

.about-clientele-content .section-subtitle {
    margin-bottom: 1rem;
}

.about-clientele-content .section-title {
    margin-bottom: 2rem;
}

.about-clientele-content > p {
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    color: var(--color-text);
    margin-bottom: 2.5rem;
}

.clientele-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.clientele-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--color-text);
}

.clientele-list li svg {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 0.3rem;
}

.clientele-list li strong {
    color: var(--color-heading);
}

/* About Group Section */
.about-group-content {
    max-width: 90rem;
    margin: 0 auto 4rem;
    text-align: center;
}

.about-group-text {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.about-group-text:last-child {
    margin-bottom: 0;
}

.about-group-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

@media (max-width: 991px) {
    .about-group-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .about-group-features {
        grid-template-columns: 1fr;
    }
}

.group-feature {
    background: var(--color-white);
    border-radius: var(--rounded-radius);
    padding: 3rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.group-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background: var(--grey-color);
    border-radius: 50%;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.group-feature h4 {
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
}

.group-feature p {
    font-size: var(--type-body);
    color: var(--color-text);
    margin: 0;
}

/* About CTA Section */
.about-cta {
    background: var(--color-primary);
    color: var(--color-white);
}

.about-cta-content {
    text-align: center;
    max-width: 70rem;
    margin: 0 auto;
}

.about-cta-content h2 {
    font-family: var(--heading-font);
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.about-cta-content p {
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    opacity: 0.9;
    margin-bottom: 3rem;
}

.about-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

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

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

.about-cta-buttons .btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.about-cta-buttons .btn-outline:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ========================================
   Stores Page Styles
======================================== */

/* Stores Hero */
.stores-hero {
    background: var(--grey-color);
    padding: 6rem 0;
    text-align: center;
}

.stores-hero-title {
    font-family: var(--heading-font);
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.stores-hero-subtitle {
    font-size: 1.6rem;
    color: var(--color-text);
    max-width: 50rem;
    margin: 0 auto;
}

/* Store Filters */
.stores-filters {
    background: var(--color-white);
    padding: 2rem 0;
    border-bottom: 1px solid var(--color-border);
}

.stores-filter-bar {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.stores-filter-label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
}

.stores-filter-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stores-filter-btn {
    padding: 0.8rem 1.6rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--grey-color);
    border-radius: var(--btn-radius);
    transition: var(--transition);
    text-decoration: none;
}

.stores-filter-btn:hover,
.stores-filter-btn.active {
    background: var(--color-heading);
    color: var(--color-white);
}

/* Stores Listing */
.stores-listing {
    background: var(--color-white);
}

.stores-count {
    font-size: 1.4rem;
    color: var(--color-text);
    margin-bottom: 2rem;
}

.stores-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

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

/* Store Card */
.store-card {
    background: var(--color-white);
    border-radius: var(--rounded-radius);
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    /* Column card with the actions pinned to the bottom: the two store cards
       have addresses of different lengths, which used to leave their
       "Get Directions" buttons at different heights. */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.store-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.store-card-image {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--grey-color);
    overflow: hidden;
}

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

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

.store-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-300);
}

.store-type-badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    padding: 0.5rem 1.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    z-index: 2;
}

.store-type-outlet {
    background: var(--color-primary);
    color: var(--color-white);
}

.store-type-franchise {
    background: var(--color-heading);
    color: var(--color-white);
}

.store-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.store-card-name {
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.store-card-address,
.store-card-contact {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: var(--color-text);
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.store-card-address svg,
.store-card-contact svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--color-primary);
}

.store-card-contact a {
    color: var(--color-text);
}

.store-card-contact a:hover {
    color: var(--color-primary);
}

.store-card-actions {
    display: flex;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.5rem;
    flex-wrap: wrap;
}

.store-card-actions .btn {
    flex: 1;
    min-width: 12rem;
}

/* Stores Empty State */
.stores-empty {
    text-align: center;
    padding: 6rem 2rem;
}

.stores-empty-icon {
    color: var(--grey-300);
    margin-bottom: 2rem;
}

.stores-empty h3 {
    font-size: 2rem;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.stores-empty p {
    font-size: var(--type-body);
    color: var(--color-text);
    margin-bottom: 2rem;
}

/* Stores CTA */
.stores-cta {
    text-align: center;
}

.stores-cta-content h2 {
    font-family: var(--heading-font);
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.stores-cta-content p {
    font-size: var(--type-body);
    color: var(--color-text);
    margin-bottom: 2.5rem;
}

/* Store Detail Page */
.breadcrumb-nav {
    background: var(--grey-color);
    padding: 1.5rem 0;
}

.store-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

@media (max-width: 991px) {
    .store-detail-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* Store Detail Images */
.store-detail-images {
    position: sticky;
    top: 10rem;
}

.store-main-image {
    border-radius: var(--rounded-radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    aspect-ratio: 4/3;
    background: var(--grey-color);
}

.store-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-image-thumbnails {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.store-thumb {
    width: 8rem;
    height: 6rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
    background: none;
}

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

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

.store-no-image {
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--grey-color);
    border-radius: var(--rounded-radius);
    color: var(--grey-300);
}

.store-no-image p {
    margin-top: 1rem;
    font-size: var(--type-body);
}

/* Store Detail Info */
.store-detail-info .store-type-badge {
    position: static;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.store-detail-name {
    font-family: var(--heading-font);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 2.5rem;
    line-height: 1.3;
}

.store-info-block {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.store-info-block:last-of-type {
    border-bottom: none;
}

.store-info-block h4 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.store-info-block h4 svg {
    color: var(--color-primary);
}

.store-info-block p {
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    color: var(--color-text);
    margin: 0;
}

.store-info-block a {
    color: var(--color-primary);
}

.store-detail-actions {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.store-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

/* Store Map */
.store-map-section {
    margin-top: 5rem;
}

.store-map-section h3 {
    font-family: var(--heading-font);
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 2rem;
}

.store-map {
    border-radius: var(--rounded-radius);
    overflow: hidden;
}

/* ========================================
   Skeleton Loaders
======================================== */

/* Base skeleton animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton text lines */
.skeleton-text {
    height: 1.4rem;
    margin-bottom: 0.8rem;
    border-radius: 4px;
}

.skeleton-text.skeleton-title {
    height: 2.4rem;
    width: 60%;
    margin-bottom: 1rem;
}

.skeleton-text.skeleton-subtitle {
    height: 1.2rem;
    width: 40%;
}

/* Skeleton Product Card */
.skeleton-product-card {
    display: flex;
    flex-direction: column;
}

.skeleton-product-image {
    aspect-ratio: 1/1.2;
    border-radius: var(--rounded-radius);
    margin-bottom: 1.5rem;
}

.skeleton-product-info {
    padding: 0 0.5rem;
}

.skeleton-product-name {
    height: 1.6rem;
    width: 80%;
    margin-bottom: 0.8rem;
}

.skeleton-product-price {
    height: 1.8rem;
    width: 40%;
}

/* Skeleton Image */
.skeleton-image,
.skeleton.skeleton-image {
    width: 100%;
    aspect-ratio: 1/1.2;
    border-radius: var(--rounded-radius);
}

/* Skeleton Category Card */
.skeleton-category-card {
    position: relative;
    border-radius: var(--rounded-radius);
    overflow: hidden;
    flex-shrink: 0;
    width: 220px;
}

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

.skeleton-category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.3));
}

.skeleton-category-overlay .skeleton-text {
    background: rgba(255,255,255,0.3);
}

@media (max-width: 768px) {
    .skeleton-category-card {
        width: 160px;
    }
}

/* Skeleton Project Card */
.skeleton-project-card {
    position: relative;
    border-radius: var(--rounded-radius);
    overflow: hidden;
}

.skeleton-project-card .skeleton-image {
    aspect-ratio: 4/3;
}

.skeleton-project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.4));
}

.skeleton-project-overlay .skeleton-text {
    background: rgba(255,255,255,0.3);
}

/* Skeleton Swiper */
.skeleton-swiper {
    display: flex;
    gap: 2rem;
    overflow: hidden;
}

.skeleton-swiper .skeleton-slide {
    flex-shrink: 0;
    width: calc(20% - 1.6rem);
}

/* Skeleton Product Card in Swiper */
.skeleton-swiper.products-skeleton .skeleton-product-card {
    flex-shrink: 0;
    width: 240px;
}

.skeleton-swiper.products-skeleton .skeleton-product-card .skeleton-image {
    aspect-ratio: 3/4;
    margin-bottom: 1rem;
}

/* Skeleton Categories in Swiper */
.skeleton-swiper.categories-skeleton {
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .skeleton-swiper .skeleton-slide {
        width: calc(33.333% - 1.4rem);
    }
    .skeleton-swiper.products-skeleton .skeleton-product-card {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .skeleton-swiper .skeleton-slide {
        width: calc(50% - 1rem);
    }
    .skeleton-swiper.products-skeleton .skeleton-product-card {
        width: 160px;
    }
    .skeleton-swiper.categories-skeleton .skeleton-category-card {
        width: 140px;
    }
}

/* Skeleton Hero */
.skeleton-hero {
    height: var(--slide-height);
    border-radius: 0;
}

@media (min-width: 768px) {
    .skeleton-hero {
        height: var(--slide-height-desktop);
    }
}

/* Skeleton Section Header */
.skeleton-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.skeleton-section-header .skeleton-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-section-header .skeleton-link {
    height: 2rem;
    width: 10rem;
}

/* Skeleton Grid */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

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

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

/* Hide skeleton when content loads */
.skeleton-container {
    display: block;
}

.skeleton-container.loaded {
    display: none;
}

.content-container {
    display: none;
}

.content-container.loaded {
    display: block;
}

/* ========================================
   Authentication Pages - Milano Style
======================================== */
.auth-section {
    padding: 6rem 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: var(--color-background);
}

.auth-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.auth-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 4rem;
    width: 100%;
    max-width: 480px;
}

.auth-card-wide {
    max-width: 640px;
}

.auth-header {
    text-align: center;
    margin-bottom: 3rem;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.5rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.auth-badge svg {
    width: 16px;
    height: 16px;
}

.auth-icon {
    margin-bottom: 1.5rem;
}

.auth-icon svg {
    stroke: var(--color-primary);
}

.auth-title {
    font-family: var(--heading-font);
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.75rem;
}

.auth-subtitle {
    font-size: 1.5rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-section-title {
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    margin-top: 0.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 576px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-label {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-heading);
}

.form-label .required {
    color: var(--color-primary);
}

.form-input {
    width: 100%;
    padding: 1.2rem 1.5rem;
    font-size: 1.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-heading);
}

.form-input::placeholder {
    color: var(--color-text-light);
    opacity: 0.7;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.form-hint {
    font-size: 1.2rem;
    color: var(--color-text-light);
}

.form-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.3rem;
    color: var(--color-text-light);
    padding: 1rem 0 0;
}

.form-note svg {
    flex-shrink: 0;
}

/* Password Toggle */
.input-password-wrapper {
    position: relative;
}

.input-password-wrapper .form-input {
    padding-right: 4.5rem;
}

.btn-toggle-password {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    transition: color 0.2s;
}

.btn-toggle-password:hover {
    color: var(--color-heading);
}

/* OTP Input */
.otp-input-wrapper {
    text-align: center;
}

.form-input-otp {
    text-align: center;
    font-size: 2.4rem;
    font-family: var(--heading-font);
    letter-spacing: 0.5rem;
    max-width: 240px;
    margin: 0 auto;
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-primary);
}

.checkbox-text {
    font-size: 1.4rem;
    color: var(--color-text);
    line-height: 1.4;
}

.checkbox-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Form Group Inline */
.form-group-inline {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.link-forgot {
    font-size: 1.4rem;
    color: var(--color-text-light);
    transition: color 0.2s;
}

.link-forgot:hover {
    color: var(--color-primary);
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-divider span {
    font-size: 1.3rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Mobile-OTP login: inline country-code + input field.
   Used by themes/uvw/pages/auth/login-otp.php for both customer and
   professional (architect) login pages. */
.mobile-input-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e2e2e2);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.mobile-input-wrap:focus-within {
    border-color: var(--color-primary, #332817);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 51, 40, 23), 0.12);
}
.mobile-input-cc {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: rgba(var(--color-primary-rgb, 51, 40, 23), 0.05);
    border-right: 1px solid var(--color-border, #e2e2e2);
    font-family: var(--body-font);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-primary, #332817);
    letter-spacing: 0.5px;
    user-select: none;
    flex-shrink: 0;
}
/* Higher-specificity selector — beats the base `input[type="tel"]` rule
   (which adds its own border-radius + border on every input by default). */
.mobile-input-wrap input.mobile-input-field {
    flex: 1;
    min-width: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 12px 14px;
    margin: 0;
    font-family: var(--body-font);
    font-size: 1.5rem;
    color: var(--color-heading, #111);
    outline: none;
    letter-spacing: 0.5px;
    -webkit-appearance: none;
    appearance: none;
    width: auto;
}
.mobile-input-wrap input.mobile-input-field:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}
.mobile-input-wrap input.mobile-input-field::placeholder {
    color: var(--color-text-light, #999);
    letter-spacing: normal;
}
@media (max-width: 480px) {
    .mobile-input-cc { padding: 0 12px; font-size: 1.4rem; }
    .mobile-input-wrap input.mobile-input-field { padding: 11px 12px; font-size: 1.4rem; }
}

/* Counterpart switch button (Customer ↔ Professional) — styled as a clear
   secondary action so it stops looking like body copy. */
.btn-counterpart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-decoration: none;
}

/* Auth form hints — bump the base 1.2rem to a more readable 1.4rem so
   short helper lines ("We'll send a 6-digit code on WhatsApp",
   "OTP is valid for 10 minutes") are legible without dominating the form.
   Scoped to .auth-form so other UVW forms keep their existing 1.2rem hint. */
.auth-form .form-hint {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-top: 0.6rem;
    display: inline-block;
}

/* Auth buttons are full-width via .btn-block, which UVW's base rule sets to
   `display: block` — that overrides the `display: inline-flex` from .btn.
   With the button no longer a flex container, the inline SVG arrow sits at
   left:0 while the centered text sits in the middle.
   Force flex back on for ONLY the two auth buttons so text + icon group and
   center together. Other UVW .btn-block buttons (across the site) are not
   affected. */
.auth-form .btn.btn-block,
a.btn-counterpart.btn-block {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

/* Vertical-alignment fix for inline-SVG icons inside the now-flex auth buttons.
   `display: block` on the <svg> removes the phantom baseline gap that an
   inline SVG would have, so the icon centers pixel-perfect with the text. */
.auth-form .btn > svg,
.btn-counterpart > svg {
    display: block;
    flex-shrink: 0;
}

/* Auth Alternatives */
.auth-alternatives {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-alternatives .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Auth Footer */
.auth-footer {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.auth-footer p {
    font-size: var(--type-body);
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.auth-footer a {
    color: var(--color-primary);
    font-weight: 500;
}

/* Auth Info Box */
.auth-info-box {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    padding: 2rem;
    margin-bottom: 2.5rem;
}

.auth-info-box h4 {
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.auth-info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 576px) {
    .auth-info-box ul {
        grid-template-columns: 1fr;
    }
}

.auth-info-box li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.3rem;
    color: var(--color-text);
}

.auth-info-box li svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Auth Resend */
.auth-resend {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.auth-resend p {
    font-size: var(--type-body);
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.auth-resend .btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.4rem;
    color: var(--color-primary);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

.auth-resend .btn-link:hover {
    color: var(--color-heading);
}

.resend-timer {
    font-size: 1.4rem;
    color: var(--color-text-light);
}

/* Alerts */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 1.4rem;
    border: 1px solid;
}

.alert svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.alert-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* Button Loader */
.btn .btn-loader {
    display: inline-flex;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Auth */
@media (max-width: 576px) {
    .auth-section {
        padding: 3rem 0;
    }

    .auth-card {
        padding: 2.5rem 2rem;
        border-left: none;
        border-right: none;
    }

    .auth-title {
        font-size: 2.4rem;
    }
}

/* ========================================
   Cart Page - Milano Style
======================================== */
.cart-section {
    padding: 4rem 0 6rem;
}

.cart-header {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.cart-item-count,
.wishlist-item-count {
    font-size: 1.5rem;
    color: var(--color-text-light);
}

/* Empty Cart/Wishlist */
.cart-empty,
.wishlist-empty {
    text-align: center;
    padding: 6rem 2rem;
    max-width: 400px;
    margin: 0 auto;
}

.cart-empty-icon,
.wishlist-empty-icon {
    margin-bottom: 2rem;
    color: var(--color-text-light);
    opacity: 0.5;
}

.cart-empty h2,
.wishlist-empty h2 {
    font-family: var(--heading-font);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.cart-empty p,
.wishlist-empty p {
    font-size: var(--type-body);
    color: var(--color-text-light);
    margin-bottom: 2.5rem;
}

/* Cart Layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 4rem;
    align-items: start;
}

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

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

.cart-room-group {
    border: 1px solid var(--color-border);
}

.cart-room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.cart-room-header h3 {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
}

.room-item-count {
    font-size: 1.3rem;
    color: var(--color-text-light);
}

/* Cart Item */
.cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2rem;
    padding: 2rem;
    border: 1px solid var(--color-border);
    background: var(--color-white);
}

.cart-item-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-background);
}

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

.cart-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.cart-item-name {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
}

.cart-item-name a {
    color: inherit;
}

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

.cart-item-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cart-item-price .price-current {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-heading);
}

.cart-item-price .price-original {
    font-size: 1.3rem;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.cart-item-actions,
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cart-item-room {
    min-width: 140px;
}

.cart-room-select {
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    font-size: 1.2rem;
    height: 32px;
}

/* Cart Sections - Enhanced styling */
.cart-section-group {
    background: #fafafa;
    border-radius: 12px;
    overflow: hidden;
}

.cart-section-header {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 1.25rem 1.5rem;
}

.cart-section-header .section-header-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cart-section-header .section-header-info svg {
    color: var(--primary-color, #0066cc);
}

.cart-section-header h3 {
    font-size: 1.375rem;
    margin: 0;
}

.cart-section-header .section-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Edit / Delete area buttons (cart page section header) */
.btn-area-edit,
.btn-area-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: #fff;
    color: #555;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-area-edit:hover {
    color: #1a1a1a;
    border-color: #c9a227;
}

.btn-area-delete:hover {
    color: #d9342b;
    border-color: #d9342b;
    background: #fdecea;
}

/* Danger button (used in delete-area confirmation) */
.btn-danger {
    background-color: #d9342b;
    color: #fff;
    border-color: #d9342b;
}

.btn-danger:hover {
    background-color: #b82a22;
    border-color: #b82a22;
    color: #fff;
}

/* Rename area modal (cart page) — rounder input + comfortable spacing */
#rename-area-modal .form-input {
    border-radius: 10px;
}

#rename-area-modal .form-group {
    margin-bottom: 1.75rem;
}

/* Delete-area confirmation modal (cart page) */
#delete-area-modal .confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #fdecea;
    color: #d9342b;
}

#delete-area-modal .confirm-message {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 0.6rem;
}

#delete-area-modal .confirm-subtext {
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color-text-light);
    margin: 0 0 1.75rem;
}

#delete-area-modal .confirm-actions {
    display: flex;
    gap: 1rem;
}

#delete-area-modal .confirm-actions .btn {
    flex: 1;
    border-radius: 10px;
}

/* Delete-area confirmation modal (mini cart) */
#mini-cart-delete-modal .mini-cart-move-modal-body {
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.mini-cart-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #fdecea;
    color: #d9342b;
}

.mini-cart-confirm-message {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 0.6rem;
}

.mini-cart-confirm-subtext {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--color-text-light);
    margin: 0 0 1.5rem;
}

.mini-cart-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mini-cart-confirm-actions .btn {
    border-radius: 10px;
    padding: 1.1rem 1.5rem;
}

/* AI Visualize Button with Pulsating Glow Effect */
.btn-ai-visualize {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #c9a227 0%, #a68b1a 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(166, 139, 26, 0.35);
    animation: btn-ai-pulse 2s ease-in-out infinite;
}

.btn-ai-visualize:hover {
    background: linear-gradient(135deg, #a68b1a 0%, #8b7515 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.6);
    color: white;
    text-decoration: none;
    animation: none;
}

.btn-ai-visualize:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(166, 139, 26, 0.35);
}

.btn-ai-visualize svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Pulsating glow animation for entire button */
@keyframes btn-ai-pulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(166, 139, 26, 0.35),
                    0 0 0 0 rgba(201, 162, 39, 0.4);
    }
    50% {
        box-shadow: 0 4px 16px rgba(201, 162, 39, 0.5),
                    0 0 20px 4px rgba(201, 162, 39, 0.3);
    }
}

/* Re-Visualize variant (has existing visualization) - no pulse */
.btn-ai-visualize.has-visualization {
    background: linear-gradient(135deg, #5e4b31 0%, #4a3a24 100%);
    box-shadow: 0 2px 8px rgba(74, 58, 36, 0.35);
    animation: none;
}

.btn-ai-visualize.has-visualization:hover {
    background: linear-gradient(135deg, #4a3a24 0%, #3a2e1c 100%);
    box-shadow: 0 4px 12px rgba(74, 58, 36, 0.45);
}

/* Hide ping dot - button now pulses instead */
.btn-ai-ping {
    display: none;
}

@media (max-width: 640px) {
    .cart-section-header .section-header-actions {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-ai-visualize span:not(.btn-ai-ping) {
        display: none;
    }

    .btn-ai-visualize {
        padding: 0.5rem;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        justify-content: center;
    }

    .btn-ai-visualize svg {
        width: 16px;
        height: 16px;
    }
}

/* AI Visualization Gallery below section header */
.cart-viz-gallery {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #faf6f0 0%, #f5efe5 100%);
    border-bottom: 1px solid #e5ddd0;
    overflow-x: auto;
}

.cart-viz-thumb {
    flex: 0 0 auto;
    display: block;
    width: 120px;
    height: 80px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #d4c5a9;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.cart-viz-thumb:hover {
    border-color: #a68b1a;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(166, 139, 26, 0.25);
}

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

.cart-viz-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    color: white;
    font-size: 0.6875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cart-viz-thumb-label svg {
    fill: #fbbf24;
}

@media (max-width: 640px) {
    .cart-viz-gallery {
        padding: 0.5rem 0.75rem;
    }

    .cart-viz-thumb {
        width: 100px;
        height: 66px;
    }
}

/* Old preview thumbnail - hidden, replaced by gallery */
.cart-viz-preview {
    display: none;
}

@media (max-width: 640px) {
    .cart-viz-preview {
        width: 32px;
        height: 32px;
    }
}

/* Cart Section with Visualization - Split Layout */
.cart-section-group.has-viz {
    padding: 0;
    overflow: hidden;
}

.cart-section-group.has-viz .cart-section-header {
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-bottom: 1px solid var(--color-border);
}

.cart-viz-split {
    display: flex;
    min-height: 280px;
}

.cart-viz-left {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    background: #111;
}

.cart-viz-image-btn {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.cart-viz-image-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cart-viz-image-btn:hover img {
    transform: scale(1.02);
}

.cart-viz-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(166, 139, 26, 0.95) 0%, rgba(201, 162, 39, 0.95) 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cart-viz-badge svg {
    fill: white;
}

.cart-viz-expand {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

.cart-viz-image-btn:hover .cart-viz-expand {
    opacity: 1;
    transform: scale(1);
}

.cart-viz-expand svg {
    stroke: #333;
}

.cart-viz-right {
    flex: 0 0 50%;
    max-width: 50%;
    background: #fafafa;
    overflow-y: auto;
    max-height: 350px;
}

.cart-viz-products {
    padding: 0;
}

/* Product Card for Visualization Split */
.cart-viz-product-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-bottom: 1px solid #eee;
    position: relative;
    transition: background 0.15s ease;
}

.cart-viz-product-card:hover {
    background: #fafafa;
}

.cart-viz-product-card:last-child {
    border-bottom: none;
}

.viz-product-image {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

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

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

.viz-product-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.viz-product-name a {
    color: #333;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.viz-product-name a:hover {
    color: var(--color-primary);
}

.viz-product-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #a68b1a);
    margin-bottom: 8px;
}

.viz-product-qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.viz-qty-control {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
}

.viz-qty-control .qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #555;
    cursor: pointer;
    transition: background 0.15s ease;
}

.viz-qty-control .qty-btn:hover {
    background: #e5e5e5;
}

.viz-qty-control .qty-btn:active {
    background: #d5d5d5;
}

.viz-qty-control .qty-input {
    width: 40px;
    height: 32px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #333;
    -moz-appearance: textfield;
}

.viz-qty-control .qty-input::-webkit-outer-spin-button,
.viz-qty-control .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.viz-product-unit {
    font-size: 0.875rem;
    color: #666;
}

.viz-product-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #999;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
    margin-top: 4px;
}

.cart-viz-product-card:hover .viz-product-remove {
    opacity: 1;
}

.viz-product-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Responsive for Split Layout */
@media (max-width: 900px) {
    .cart-viz-split {
        flex-direction: column;
        min-height: auto;
    }

    .cart-viz-left,
    .cart-viz-right {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .cart-viz-left {
        height: 300px;
    }

    .cart-viz-image-btn {
        min-height: 300px;
    }

    .cart-viz-right {
        max-height: none;
    }

    .cart-viz-expand {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .cart-viz-left {
        height: 220px;
    }

    .cart-viz-image-btn {
        min-height: 220px;
    }

    .cart-viz-product-card {
        padding: 10px 12px;
        gap: 10px;
    }

    .viz-product-image {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }

    .viz-product-name {
        font-size: 0.8125rem;
    }

    .viz-product-meta {
        font-size: 0.75rem;
        gap: 8px;
    }

    .viz-product-remove {
        opacity: 1;
    }
}

/* AI Visualization Image Modal */
.ai-viz-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.ai-viz-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-viz-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    animation: scaleIn 0.25s ease;
}

.ai-viz-modal-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ai-viz-modal-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    color: #333;
}

.ai-viz-modal-close:hover {
    transform: scale(1.1);
}

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

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

.cart-add-section-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    border: 1px dashed var(--primary-color, #0066cc);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.cart-add-section-card h4 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem 0;
    color: var(--color-heading);
}

.cart-add-section-card p {
    font-size: var(--type-body);
    color: var(--color-text-light);
    margin: 0 0 1rem 0;
}

.cart-add-section-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1;
}

.cart-add-section-card .btn svg {
    flex-shrink: 0;
    display: block;
}

.cart-item-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    background: #F5F5F5;
}

.qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
}

.qty-btn:hover {
    background: var(--color-border);
}

.qty-btn svg {
    width: 12px;
    height: 12px;
}

.qty-input {
    width: 40px;
    height: 25px !important;
    text-align: center;
    border: 0 !important;
    background: none !important;
    font-size: 1.3rem;
    font-weight: 500;
    -moz-appearance: textfield;
    padding: 0px !important;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Unit label next to quantity in cart */
.cart-item-unit {
    font-size: 1.3rem;
    color: var(--color-text);
    margin-left: 0.5rem;
    white-space: nowrap;
    background: #e9e9e9;
    border-left: 1px solid #CCC;
    padding: 5px 5px;
}

.cart-item-total {
    min-width: 100px;
    text-align: right;
}

.line-total {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
}

/* Per-item remarks (editable; feeds AI Visualizer usage) */
.cart-item-remarks {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cart-item-remarks-label {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.cart-item-remarks-input {
    width: 100%;
    min-height: 2.6rem;
    height: 2.6rem;
    max-height: 12rem;
    padding: 0.55rem 0.8rem;
    font-family: inherit;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--color-heading);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, height 0.1s ease;
}

.cart-item-remarks-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.cart-item-remarks-input::placeholder {
    color: var(--color-text-light);
}

.cart-item-remarks-status {
    font-size: 1.1rem;
    color: var(--color-text-light);
    min-height: 1.3rem;
}

.cart-item-remarks-status.saved {
    color: #2e7d32;
}

.cart-item-remarks-status.error {
    color: #c62828;
}

/* Cart Change Section Button (visible text button) */
.cart-change-section-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cart-change-section-btn:hover {
    color: var(--color-primary-dark, #0052a3);
}

.cart-change-section-btn svg {
    flex-shrink: 0;
    text-decoration: none;
}

/* Legacy selector for JS binding */
.cart-item-move-section {
    /* Styles now handled by .cart-change-section-btn */
}

.cart-item-remove {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-light);
    transition: all 0.2s;
}

.cart-item-remove:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Move to Section Modal */
.move-section-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.move-section-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.move-section-option:hover {
    background: var(--color-primary-light, #f0f7ff);
    border-color: var(--color-primary);
}

.move-section-option.current {
    background: var(--color-primary-light, #f0f7ff);
    border-color: var(--color-primary);
}

.move-section-option.current::after {
    content: '\2713';
    margin-left: auto;
    color: var(--color-primary);
    font-weight: 600;
}

.move-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-white);
    border-radius: 50%;
    color: var(--color-text-light);
    overflow: hidden;
    flex-shrink: 0;
}

.move-section-icon.has-image {
    background: #f0f0f0;
    padding: 0;
}

.move-section-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.move-section-option:hover .move-section-icon,
.move-section-option.current .move-section-icon {
    color: var(--color-primary);
}

.move-section-name {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
}

.move-section-create {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.move-section-create .btn {
    gap: 0.5rem;
}

/* ========================================
   Mini Cart Drawer
   ======================================== */

.mini-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mini-cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mini-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: var(--color-white);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.mini-cart-drawer.open {
    transform: translateX(0);
}

.mini-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.mini-cart-title {
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin: 0;
}

.mini-cart-count {
    font-weight: 400;
    color: var(--color-text-light);
}

.mini-cart-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    transition: color 0.2s;
    border-radius: 50%;
}

.mini-cart-close:hover {
    color: var(--color-heading);
    background: var(--color-background);
}

.mini-cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Empty State */
.mini-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    height: 100%;
}

.mini-cart-empty-icon {
    color: var(--color-border);
    margin-bottom: 2rem;
}

.mini-cart-empty h4 {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 1rem;
}

.mini-cart-empty p {
    font-size: var(--type-body);
    color: var(--color-text-light);
    margin-bottom: 2rem;
    max-width: 280px;
}

/* Cart Items */
.mini-cart-items {
    padding: 1.5rem 2rem;
}

/* Section Headers in Mini Cart */
.mini-cart-section {
    margin-bottom: 1.5rem;
}

.mini-cart-section:last-child {
    margin-bottom: 0;
}

.mini-cart-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-background, #f8f9fa);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 1.3125rem;
    font-weight: 600;
    color: var(--color-text-primary, #1a1a1a);
}

.mini-cart-section-header svg {
    color: var(--primary-color, #0066cc);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.mini-cart-section-name {
    flex: 1;
}

.mini-cart-section-count {
    font-weight: 400;
    color: var(--color-text-secondary, #666);
    font-size: 1.225rem;
}

.mini-cart-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.mini-cart-area-edit,
.mini-cart-area-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-secondary, #666);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mini-cart-area-edit:hover {
    color: var(--color-text-primary, #1a1a1a);
    background: rgba(0, 0, 0, 0.06);
}

.mini-cart-area-delete:hover {
    color: #d9342b;
    background: #fdecea;
}

/* Keep the small action icons from inheriting the 18px header svg size */
.mini-cart-section-actions svg {
    width: 13px;
    height: 13px;
    color: inherit;
}

.mini-cart-item {
    display: flex;
    gap: 1.2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed var(--color-border);
    position: relative;
}

.mini-cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mini-cart-item-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-background);
}

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

.mini-cart-item-info {
    flex: 1;
    min-width: 0;
    padding-right: 28px; /* Space for absolute positioned remove button */
}

.mini-cart-item-name {
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.mini-cart-item-name a {
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-cart-item-name a:hover {
    color: var(--color-primary);
}

.mini-cart-item-price {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.75rem;
}

.mini-cart-item-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #f5f5f5;
}

.mini-qty-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    transition: color 0.2s;
}

.mini-qty-btn:hover {
    color: var(--color-heading);
}

.mini-qty-input {
    width: 36px;
    height: 25px !important;
    text-align: center;
    border: 0 !important;
    padding: 0 !important;
    font-size: 1.3rem;
    font-weight: 500;
    background: none !important;
    -moz-appearance: textfield;
    outline: none !important;
}

.mini-qty-input:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mini-qty-input::-webkit-outer-spin-button,
.mini-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Unit label next to quantity */
.mini-cart-item-unit {
    font-size: 1.2rem;
    color: var(--color-text);
    margin-left: 0.5rem;
    white-space: nowrap;
    background: #e9e9e9;
    border-left: 1px solid #CCC;
    padding: 3px 5px;
}

/* Mini Cart Item Row - qty + change section inline */
.mini-cart-item-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Mini Cart Change Section Button */
.mini-cart-change-section-btn.mini-cart-item-move {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    width: auto;
    height: auto;
    justify-content: flex-start;
}

.mini-cart-change-section-btn.mini-cart-item-move:hover {
    color: var(--color-primary-dark, #0052a3);
}

.mini-cart-change-section-btn svg {
    flex-shrink: 0;
    text-decoration: none;
}

/* Mini Cart Item Actions */
.mini-cart-item-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mini-cart-item-move {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    transition: color 0.2s;
    padding: 0;
}

.mini-cart-item-move:hover {
    color: var(--color-primary);
}

.mini-cart-item-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-light);
    transition: color 0.2s;
    padding: 0;
}

.mini-cart-item-remove:hover {
    color: #dc2626;
}

/* Mini Cart Move Section Modal */
.mini-cart-move-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.mini-cart-move-modal-content {
    background: var(--color-white);
    border-radius: 12px;
    width: 100%;
    max-width: 320px;
    max-height: 80%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.mini-cart-move-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.mini-cart-move-modal-header h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-heading);
}

.mini-cart-move-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1.8rem;
    line-height: 1;
    transition: all 0.2s;
}

.mini-cart-move-modal-close:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.mini-cart-move-modal-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.mini-cart-move-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Rename area modal — input + actions */
#mini-cart-rename-modal .mini-cart-move-modal-body {
    padding: 1.5rem 1.5rem 1.75rem;
}

#mini-cart-rename-input {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.3rem;
    font-size: 1.4rem;
    font-family: inherit;
    color: var(--color-heading);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#mini-cart-rename-input:focus {
    outline: none;
    border-color: var(--color-heading);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

#mini-cart-rename-modal .btn {
    border-radius: 10px;
    padding: 1.1rem 1.5rem;
}

.mini-cart-move-loading,
.mini-cart-move-error {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-light);
    font-size: 1.3rem;
}

.mini-cart-move-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.mini-cart-move-option:hover {
    background: var(--color-primary-light, #f0f7ff);
    border-color: var(--color-primary);
}

.mini-cart-move-option.current {
    background: var(--color-primary-light, #f0f7ff);
    border-color: var(--color-primary);
}

.mini-cart-move-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-white);
    border-radius: 50%;
    color: var(--color-text-light);
    flex-shrink: 0;
    overflow: hidden;
}

.mini-cart-move-icon.has-image {
    background: #f0f0f0;
    padding: 0;
}

.mini-cart-move-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-move-option:hover .mini-cart-move-icon,
.mini-cart-move-option.current .mini-cart-move-icon {
    color: var(--color-primary);
}

.mini-cart-move-name {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-heading);
    flex: 1;
}

.mini-cart-move-check {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.2rem;
}

/* Cart Footer */
.mini-cart-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
    flex-shrink: 0;
}

.mini-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
}

.mini-cart-subtotal span:first-child {
    font-weight: 500;
    color: var(--color-heading);
}

.mini-cart-subtotal-amount {
    font-weight: 600;
    color: var(--color-heading);
    font-size: 1.8rem;
}

.mini-cart-actions {
    display: flex;
    gap: 1rem;
}

.mini-cart-actions .btn {
    flex: 1;
    justify-content: center;
}

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

/* Responsive */
@media (max-width: 480px) {
    .mini-cart-drawer {
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    /* Add padding for mobile footer bar */
    .mini-cart-footer {
        padding-bottom: calc(1.5rem + 7rem + env(safe-area-inset-bottom, 0));
    }
}

/* Cart Summary */
.cart-summary {
    position: sticky;
    top: 100px;
}

.cart-summary-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 2.5rem;
    margin-bottom: 2rem;
}

.cart-summary-title {
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.cart-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    color: var(--color-text);
}

.cart-summary-total {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--color-heading);
}

.cart-summary-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 1.2rem;
    color: var(--color-text-light);
}

/* Download PDF Presentation Button */
.btn-download-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #fff 0%, #faf6f0 100%);
    border: 2px solid var(--primary-color, #332917);
    color: var(--primary-color, #332917);
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-download-pdf:hover {
    background: var(--primary-color, #332917);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(51, 41, 23, 0.25);
}

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

.btn-download-pdf svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.cart-add-room-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 2rem;
    margin-bottom: 2rem;
}

.cart-add-room-card h4 {
    font-family: var(--heading-font);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.75rem;
}

.cart-add-room-card p {
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.cart-continue-shopping {
    text-align: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

.cart-continue-shopping .btn-link {
    font-size: 1.4rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none !important;
    position: relative;
}

.cart-continue-shopping .btn-link::before {
    display: none !important;
}

.cart-continue-shopping .btn-link:hover {
    color: var(--color-heading);
    text-decoration: none !important;
}

/* ========================================
   Wishlist Page - Milano Style
======================================== */
.wishlist-section {
    padding: 4rem 0 6rem;
}

.wishlist-header {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

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

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

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

.wishlist-item {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    transition: border-color 0.2s;
}

.wishlist-item:hover {
    border-color: var(--color-heading);
}

.wishlist-item-remove {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-light);
    transition: all 0.2s;
}

.wishlist-item-remove:hover {
    border-color: #dc2626;
    color: #dc2626;
}

.wishlist-item-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-background);
    margin-bottom: 1.5rem;
}

.wishlist-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.75rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.wishlist-badge.badge-sale {
    background: var(--color-primary);
    color: var(--color-white);
}

.wishlist-item-info {
    margin-bottom: 1.5rem;
}

.wishlist-item-name {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.wishlist-item-name a {
    color: inherit;
}

.wishlist-item-name a:hover {
    color: var(--color-primary);
}

.wishlist-item-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wishlist-item-price .price-current {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-heading);
}

.wishlist-item-price .price-original {
    font-size: 1.3rem;
    color: var(--color-text-light);
    text-decoration: line-through;
}

.wishlist-item-stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.wishlist-item-stock.in-stock {
    color: #16a34a;
}

.wishlist-item-stock.out-of-stock {
    color: #dc2626;
}

.wishlist-item-actions {
    margin-top: auto;
}

.wishlist-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.wishlist-actions {
    margin-top: 3rem;
    text-align: center;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: var(--color-white);
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-heading);
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-light);
    cursor: pointer;
}

.modal-close:hover {
    color: var(--color-heading);
}

.modal-body {
    padding: 2rem;
}

/* Responsive Cart */
@media (max-width: 768px) {
    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .cart-item-actions {
        gap: 1rem;
    }

    .cart-item-room {
        width: 100%;
        order: 4;
    }

    .cart-item-total {
        order: 3;
    }
}

/* ========================================
   Cart Notification Toast
======================================== */
.cart-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    max-width: 320px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.cart-notification.active {
    transform: translateY(0);
    opacity: 1;
}

.cart-notification-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.cart-notification-content svg {
    flex-shrink: 0;
}

.cart-notification-content span {
    font-size: 1.4rem;
    color: var(--color-text);
}

.cart-notification-success {
    border-left: 3px solid #16a34a;
}

.cart-notification-success svg {
    color: #16a34a;
}

.cart-notification-error {
    border-left: 3px solid #dc2626;
}

.cart-notification-error svg {
    color: #dc2626;
}

.cart-notification-info {
    border-left: 3px solid #2563eb;
}

.cart-notification-info svg {
    color: #2563eb;
}

/* Add to cart button loading state */
.btn-add-cart.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn-add-cart.loading svg {
    animation: spin 1s linear infinite;
}

@media (max-width: 576px) {
    .cart-notification {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }
}

/* OTP Input Boxes */
.otp-boxes {
    text-align: center;
}
.otp-boxes input {
    width: 55px;
    border-radius: 5px;
}

/* ==========================================================================
   About — "What Sets Us Apart" commitments grid
   ========================================================================== */
.about-commitments {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.1);
}
.commitments-heading {
    font-family: var(--heading-font);
    font-size: 26px;
    font-weight: var(--heading-weight);
    color: var(--color-primary);
    text-align: center;
    margin: 0 0 12px;
    letter-spacing: var(--heading-letter-spacing);
}
.commitments-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
    color: #6b6b6b;
    font-size: 15px;
    line-height: 1.7;
}
.commitments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .commitments-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .commitments-grid { grid-template-columns: 1fr; }
}
.commitment-card {
    background: #fff;
    border: 1px solid rgba(var(--color-primary-rgb), 0.08);
    border-radius: 10px;
    padding: 24px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.commitment-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.06);
}
.commitment-card svg {
    color: var(--color-primary);
    flex-shrink: 0;
}
.commitment-card h4 {
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.35;
}

/* ==========================================================================
   About — Vision & Mission
   ========================================================================== */
.about-vision-mission .section-header {
    margin-bottom: 40px;
}
.vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    /* Was capped at 1040px, which made this the one narrow block on the
       About page; it now matches the section width like its neighbours. */
    margin: 0 auto;
}
@media (max-width: 768px) {
    .vision-mission-grid { grid-template-columns: 1fr; }
}
.vm-card {
    background: #fff;
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    border-radius: 12px;
    padding: 36px 32px;
    text-align: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.vm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(var(--color-primary-rgb), 0.08);
}
.vm-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.vm-card h3 {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: var(--heading-weight);
    color: var(--color-primary);
    margin: 0 0 14px;
    letter-spacing: var(--heading-letter-spacing);
}
.vm-card p {
    color: #555;
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    margin: 0;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1f1810 100%);
    color: #fff;
    padding: 72px 0 60px;
    text-align: center;
}
.contact-hero-eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 10px;
    font-weight: 600;
}
.contact-hero-title {
    font-family: var(--heading-font);
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: var(--heading-letter-spacing);
}
.contact-hero-subtitle {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}
@media (max-width: 600px) {
    .contact-hero { padding: 56px 0 44px; }
}

.contact-section {
    background: #fafafa;
    padding: 72px 0;
}
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 28px;
    /* Both cards run to the full height of the row, so "Reach Us" is no
       longer visibly shorter than the form beside it. */
    align-items: stretch;
}

.contact-grid > * {
    min-width: 0;
}
@media (max-width: 960px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.contact-form-card,
.contact-info-card {
    background: #fff;
    border: 1px solid rgba(var(--color-primary-rgb), 0.08);
    border-radius: 12px;
    padding: 32px;
    height: 100%;
}
@media (max-width: 600px) {
    .contact-form-card,
    .contact-info-card { padding: 24px; }
}

.contact-form-title {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: var(--heading-weight);
    color: var(--color-primary);
    margin: 0 0 6px;
    letter-spacing: var(--heading-letter-spacing);
}
.contact-form-sub {
    font-size: 14px;
    color: #6b6b6b;
    margin: 0 0 24px;
}

.contact-alert {
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.contact-alert-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}
.contact-alert-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .contact-form-row { grid-template-columns: 1fr; }
}
.contact-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}
.contact-field label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}
.contact-field label .required {
    color: #dc2626;
    margin-left: 2px;
}
.contact-field input,
.contact-field textarea {
    width: 100%;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: var(--body-font);
    color: #222;
    background: #fff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.contact-field textarea {
    resize: vertical;
    min-height: 130px;
}
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.contact-submit {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-info-title {
    font-family: var(--heading-font);
    font-size: 20px;
    font-weight: var(--heading-weight);
    color: var(--color-primary);
    margin: 0 0 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
    letter-spacing: var(--heading-letter-spacing);
}
.contact-info-item {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}
.contact-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(var(--color-primary-rgb), 0.06);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-info-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.contact-info-value {
    font-size: 14px;
    color: #555;
    margin: 0 0 4px;
    line-height: 1.55;
}
.contact-info-link {
    display: block;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    line-height: 1.55;
    margin: 0;
    transition: color 150ms ease;
}
.contact-info-link:hover {
    color: var(--color-primary);
}
.contact-stores-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 18px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease;
}
.contact-stores-link:hover {
    background: rgba(var(--color-primary-rgb), 0.05);
    border-color: rgba(var(--color-primary-rgb), 0.35);
}

/* ==========================================================================
   About — The Experience We Create
   ========================================================================== */
.about-experience-intro {
    max-width: 820px;
    margin: 0 auto 56px;
    text-align: center;
}
.about-experience-lead {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-primary);
    line-height: 1.45;
    margin: 18px 0 22px;
    letter-spacing: var(--heading-letter-spacing);
}
.about-experience-body {
    color: #555;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}
@media (max-width: 600px) {
    .about-experience-intro { margin-bottom: 40px; }
    .about-experience-lead { font-size: 18px; }
    .about-experience-body { font-size: 15px; }
}

.about-experience-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .about-experience-pillars { grid-template-columns: 1fr; gap: 16px; }
}

.experience-pillar {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    background: #fff;
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    border-radius: 14px;
    padding: 26px 24px;
    text-align: left;
    overflow: hidden;
    transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.experience-pillar::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms ease;
}
.experience-pillar:hover {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(var(--color-primary-rgb), 0.09);
}
.experience-pillar:hover::after {
    transform: scaleX(1);
}

.experience-pillar-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(var(--color-primary-rgb), 0.07);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 220ms ease, transform 220ms ease;
}
.experience-pillar:hover .experience-pillar-icon {
    background: rgba(var(--color-primary-rgb), 0.13);
    transform: scale(1.04);
}

.experience-pillar-text {
    flex: 1;
    min-width: 0;
}
.experience-pillar h4 {
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 8px;
    letter-spacing: var(--heading-letter-spacing);
    line-height: 1.3;
}
.experience-pillar p {
    margin: 0;
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    color: #5e5e5e;
}

@media (max-width: 600px) {
    .experience-pillar { padding: 22px 20px; gap: 16px; }
    .experience-pillar-icon { width: 46px; height: 46px; }
    .experience-pillar h4 { font-size: 16px; }
}

/* ==========================================================================
   About — More Than a Material Destination (closing narrative)
   ========================================================================== */
.about-beyond .section-header {
    margin-bottom: 36px;
}
.about-beyond-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.about-beyond-content p {
    color: #555;
    font-size: var(--type-body);
    line-height: var(--type-line-height);
    margin: 0 0 20px;
}
.about-beyond-statement {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    color: var(--color-primary);
    line-height: 1.45;
    padding: 18px 24px;
    margin: 24px auto !important;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.15);
    max-width: 640px;
    letter-spacing: var(--heading-letter-spacing);
}
@media (max-width: 600px) {
    .about-beyond-content p { font-size: 15px; }
    .about-beyond-statement { font-size: 18px; padding: 14px 18px; }
}

/* ========================================
   AI Visualize - nav standout  (AGTAC064459)

   The visualizer is the feature this site is sold on, but in the nav it
   read as the fourth text link of four. It is now the only nav entry that
   is a filled pill rather than a text link, so the eye lands on it before
   it reads any of the labels.

   Colours stay inside the Milano palette: the pill is the brand brown,
   and the only new accent is the existing --rate-color gold on the spark.
======================================== */
.nav-link.nav-link-ai {
    gap: 0.7rem;
    color: var(--color-white);
    background: linear-gradient(118deg, #332817 0%, #4a3a20 52%, #6b522a 100%);
    padding: 0.5rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.28);
    position: relative;
    overflow: hidden;
    /* Keeps the sheen's blend inside the pill instead of the nav bar. */
    isolation: isolate;
}

.nav-link.nav-link-ai:hover,
.nav-link.nav-link-ai.active {
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.38);
}

/* The sheen. A single light band crossing the pill every few seconds -
   enough movement to catch the eye in peripheral vision, not enough to
   fight the rest of the bar for attention. */
.nav-link.nav-link-ai::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 220, 160, 0.38) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    animation: navAiSheen 5.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes navAiSheen {
    0%, 62% { left: -60%; }
    88%, 100% { left: 115%; }
}

/* The base `.nav-link svg` rule sizes dropdown chevrons at 1.2rem, which
   leaves the spark undersized inside a filled pill - it needs to read as a
   mark, not a bullet. */
.nav-link .nav-ai-spark {
    width: 1.6rem;
    height: 1.6rem;
}

.nav-ai-spark {
    color: var(--rate-color);
    flex-shrink: 0;
    animation: navAiSparkPulse 2.8s ease-in-out infinite;
}

@keyframes navAiSparkPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.78; transform: scale(1.12); }
}

/* The dropdown chevron rule rotates any svg inside a nav-link on hover.
   The spark is not a chevron, so it is exempt. */
.nav-item.has-dropdown:hover .nav-link .nav-ai-spark,
.nav-item.has-mega-menu:hover .nav-link .nav-ai-spark {
    transform: none;
}

/* Mobile drawer. The base .mobile-nav-link is space-between so a label and
   its chevron sit at opposite ends; the AI row has no chevron, so without
   this the spark and the label would be thrown to opposite edges. */
.mobile-nav-link.mobile-nav-link-ai {
    justify-content: flex-start;
    gap: 0.9rem;
    color: var(--color-white);
    background: linear-gradient(118deg, #332817 0%, #4a3a20 52%, #6b522a 100%);
    padding: 1.2rem 1.6rem;
    margin: 0.8rem 0;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.28);
}

/* Motion is decoration here - the pill alone carries the emphasis. */
@media (prefers-reduced-motion: reduce) {
    .nav-link.nav-link-ai::after,
    .nav-ai-spark {
        animation: none;
    }
    .nav-link.nav-link-ai:hover,
    .nav-link.nav-link-ai.active {
        transform: none;
    }
}

/* Mobile menu: each phone number is its own tap-to-call link. */
.mobile-nav-contact-phones a {
    color: inherit;
    text-decoration: none;
}

.mobile-nav-contact-phones a:hover {
    color: var(--color-primary);
}

/* Shop by Space: a wrapping row instead of a grid, so a short last row is
   centred rather than left on its own at the left edge. 13 spaces lay out as
   7 + 6 on wide screens. Card widths account for the 1.5rem / 1rem / 0.8rem gaps. */
.application-areas-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.application-areas-grid > .application-area-card {
    flex: 0 0 calc((100% - 6 * 1.5rem) / 7);
}

@media (max-width: 1199px) {
    .application-areas-grid > .application-area-card {
        flex-basis: calc((100% - 4 * 1.5rem) / 5);
    }
}

@media (max-width: 768px) {
    .application-areas-grid > .application-area-card {
        flex-basis: calc((100% - 2 * 1rem) / 3);
    }
}

@media (max-width: 480px) {
    .application-areas-grid > .application-area-card {
        flex-basis: calc((100% - 0.8rem) / 2);
    }
}