/* ==========================================================================
   JEFFERY GREEN - LUXURY BRITISH MENSWEAR DESIGN SYSTEM & STYLESHEET
   ========================================================================== */

/* 1. DESIGN TOKENS & ROOT VARIABLES */
:root {
    --bg-primary: #fbf9f5;
    --bg-secondary: #f4f0e8;
    --bg-card: rgba(255, 255, 255, 0.6);
    --bg-card-glass: rgba(255, 255, 255, 0.65);
    --bg-dark: #16191c;
    --bg-dark-secondary: rgba(32, 36, 41, 0.85);

    --text-primary: #181b1e;
    --text-muted: #5e656d;
    --text-light: #fbf9f5;
    --text-light-muted: #9ba3ab;

    --accent-bronze: #b88b56;
    --accent-bronze-hover: #9e7340;
    --accent-olive: #3f4a3b;
    --accent-navy: #1d2938;
    --accent-burgundy: #59252a;

    --border-color: #e6e2da;
    --border-dark: #2e343b;

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.3);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
}

/* 2. BASE RESET & TYPOGRAPHY */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

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

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

button {
    cursor: pointer;
    font-family: var(--font-body);
    border: none;
    background: none;
    outline: none;
}

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

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: 6rem 0;
}

.dark-bg {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

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

/* 3. BUTTONS & UI UTILITIES */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

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

.btn-primary:hover {
    background-color: var(--accent-bronze);
    border-color: var(--accent-bronze);
    color: #ffffff;
}

.btn-primary:hover * {
    color: #ffffff !important;
}

.btn-outline-light {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
}

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

.btn-outline-light:hover * {
    color: var(--text-primary) !important;
}

.btn-outline-dark {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-outline-dark:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.btn-outline-dark:hover * {
    color: var(--bg-primary) !important;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.full-width {
    width: 100%;
}

.glassmorphism {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(18, 22, 26, 0.08) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* TOP ANNOUNCEMENT BAR */
.top-announcement-bar {
    background: #14171a;
    color: #c5a880;
    text-align: center;
    padding: 7px 16px;
    font-size: 0.73rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid rgba(197, 168, 128, 0.2);
    position: relative;
    z-index: 1001;
    font-family: 'Montserrat', sans-serif;
}

.top-announcement-bar p {
    margin: 0;
    padding: 0;
}

/* 4. PERFECTED LUXURY HEADER */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    background: rgba(251, 249, 245, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
    transition: height var(--transition-smooth), padding var(--transition-smooth), background var(--transition-smooth);
}

.main-header.scrolled {
    background: rgba(251, 249, 245, 0.98);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    flex-wrap: nowrap !important;
    transition: height var(--transition-smooth);
}

.main-header.scrolled .header-container {
    height: 70px;
}

/* Left Group: Logo Emblem & Name */
.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-emblem {
    width: 46px;
    height: 46px;
    background: url('/assets/images/logo-badge.svg') no-repeat center center / contain;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    font-size: 0;
    color: transparent;
    border: none;
    box-shadow: none;
}

.dark-bg .logo-emblem,
.mobile-nav-drawer .logo-emblem,
.main-footer .logo-emblem,
#wpadminbar .logo-emblem {
    background-image: url('/assets/images/logo-gold.svg');
}

.logo-emblem.sm {
    width: 36px;
    height: 36px;
}

.brand-logo:hover .logo-emblem {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(184, 139, 86, 0.3));
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
}

.logo-sub {
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    color: var(--accent-bronze);
    margin-top: 3px;
    font-weight: 600;
    white-space: nowrap;
}

/* Center Group: Navigation Bar */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0 1rem;
    min-width: 0;
}

.nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: clamp(0.8rem, 1.8vw, 1.8rem);
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.nav-link {
    font-size: clamp(0.72rem, 0.78vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-primary);
    padding: 0.5rem 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-bronze);
    transition: width var(--transition-smooth);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.highlight {
    color: var(--accent-bronze);
}

/* Right Group: Currency & Action Buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0 !important;
    white-space: nowrap;
}

.header-currency-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--bg-secondary, #f8f6f0);
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--border-color, #e2ded5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    width: fit-content;
    max-width: fit-content;
}

.header-currency-box:hover {
    background: #ffffff;
    border-color: var(--accent-bronze, #b88b56);
    box-shadow: 0 4px 14px rgba(184, 139, 86, 0.18);
    transform: translateY(-1px);
}

.currency-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    color: var(--text-primary, #1e2229);
    border: none;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    letter-spacing: 0.03em;
    padding: 0.28rem 1.35rem 0.28rem 0.65rem;
    margin: 0;
    line-height: 1.25;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b88b56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 8px 5px;
    transition: color 0.2s ease, width 0.15s ease;
    box-sizing: border-box;
    width: auto;
}

.currency-dropdown:focus {
    outline: none;
}

.currency-dropdown option,
.currency-dropdown optgroup {
    background: #ffffff;
    color: #181b1e;
    font-size: 0.84rem;
    font-weight: 500;
    padding: 4px 8px;
}

.header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-primary);
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.header-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--accent-bronze);
    transform: translateY(-1px);
}

.action-label {
    display: none;
    /* Icon-only on header to guarantee zero overflow/truncation */
}

.action-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    background-color: var(--accent-bronze);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    padding: 0.4rem;
    margin-right: 0.8rem;
}

.hamburger-bar {
    width: 22px;
    height: 2px;
    background-color: var(--text-primary);
}

@media (max-width: 1280px) {
    .nav-list {
        gap: clamp(0.6rem, 1.2vw, 1.2rem);
    }

    .nav-link {
        font-size: 0.73rem;
        letter-spacing: 0.05em;
    }

    .logo-name {
        font-size: 1.1rem;
    }
}

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

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

/* MEGA MENU */
.mega-trigger {
    position: static;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-medium);
    padding: 3rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-smooth);
    z-index: 999;
}

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

.mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 3rem;
}

.mega-col h4 {
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    color: var(--accent-bronze);
}

.mega-col ul {
    list-style: none;
}

.mega-col ul li {
    margin-bottom: 0.75rem;
}

.mega-col ul li a {
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.mega-col ul li a:hover {
    color: var(--text-primary);
    padding-left: 6px;
}

.mega-featured {
    display: flex;
    gap: 1.5rem;
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
}

.mega-featured img {
    width: 120px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.mega-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mega-featured-content .tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-bronze);
    margin-bottom: 0.4rem;
}

.mega-featured-content h5 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

.text-link {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}



/* MOBILE OFF-CANVAS DRAWER */
.mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2100;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
}

.mobile-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 340px;
    max-width: 85vw;
    background: rgba(251, 249, 245, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    z-index: 2101;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--transition-smooth);
    box-shadow: var(--shadow-dark);
}

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

.mobile-drawer-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.mobile-search-box {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3px;
    width: 42px;
    height: 42px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.mobile-search-box.active,
.mobile-search-box:focus-within {
    width: 100%;
    border-radius: var(--radius-sm);
}

.mob-search-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
}

.mob-search-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mob-search-input-wrapper {
    flex: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease 0.05s, visibility 0.25s ease 0.05s;
    width: 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

.mobile-search-box.active .mob-search-input-wrapper,
.mobile-search-box:focus-within .mob-search-input-wrapper {
    opacity: 1;
    visibility: visible;
    width: 100%;
}

.mob-search-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    color: var(--text-primary);
    outline: none;
}

.mobile-drawer-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

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

.mobile-nav-list>li {
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav-list>li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.mobile-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.mobile-link {
    font-size: 1.05rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mobile-link:hover,
.mobile-link.active {
    color: var(--accent-bronze);
    font-weight: 600;
}

.mobile-link.highlight {
    color: var(--accent-bronze);
    font-weight: 600;
}

.mobile-dropdown-toggle {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 50%;
    transition: all 0.25s ease;
    padding: 0;
    margin: -8px -8px -8px auto;
}

.mobile-dropdown-toggle:hover {
    color: var(--accent-bronze);
    background: rgba(184, 139, 86, 0.08);
}

.mobile-dropdown-toggle .chevron {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-dropdown-toggle.open .chevron,
.mobile-dropdown-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.mobile-subcategories-list {
    list-style: none;
    padding: 0.5rem 0 0.2rem 1rem;
    margin: 0.6rem 0 0 0;
    display: none;
    border-left: 2px solid var(--accent-bronze);
}

.mobile-subcategories-list.open {
    display: block;
    animation: mobileSubmenuFade 0.25s ease forwards;
}

@keyframes mobileSubmenuFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-subcategories-list li {
    margin-bottom: 0.65rem;
    padding: 0;
    border-bottom: none;
}

.mobile-subcategories-list li:last-child {
    margin-bottom: 0;
}

.mobile-sublink {
    font-size: 0.92rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: block;
    padding: 0.2rem 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.mobile-sublink:hover,
.mobile-sublink.active {
    color: var(--accent-bronze);
    transform: translateX(4px);
}

.mobile-currency-select {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.mobile-currency-select label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.4rem;
}

.mobile-currency-dropdown {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: var(--bg-secondary);
}

.mobile-drawer-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
}

/* 5. DYNAMIC HERO SLIDER & 90% TRANSLUCENT GLASS CARD */
.hero-section {
    position: relative;
    height: calc(100vh - 80px);
    min-height: 580px;
    overflow: hidden;
}

.mobile-hero-visual,
.hero-subdescription {
    display: none;
}

.hero-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--transition-smooth), visibility 1s var(--transition-smooth);
    display: flex;
    align-items: center;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.04);
    animation: heroZoom 22s infinite alternate ease-in-out;
    will-change: transform;
}

@keyframes heroZoom {
    0% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1.0);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 18, 22, 0.35) 0%, rgba(14, 18, 22, 0.65) 100%);
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
}

/* 90% TRANSLUCENT GLASS HERO CARD */
.hero-card {
    max-width: 620px;
    padding: 3.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(18, 22, 26, 0.08) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.hero-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #f3c285;
    margin-bottom: 1rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero-title {
    font-size: 3.4rem;
    margin-bottom: 1.2rem;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.hero-description {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
    line-height: 1.7;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero-actions {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.hero-actions .btn-primary {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hero-actions .btn-primary:hover {
    background: var(--accent-bronze);
    color: #ffffff;
    border-color: var(--accent-bronze);
    box-shadow: 0 8px 25px rgba(184, 139, 86, 0.4);
}

.hero-actions .btn-outline-light {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    font-weight: 600;
}

.hero-actions .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #16191c;
    border-color: #ffffff;
}

.hero-slider-controls {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(22, 25, 28, 0.6);
    backdrop-filter: blur(8px);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.slider-btn {
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0 0.4rem;
}

.slider-dots {
    display: flex;
    gap: 0.5rem;
}

.slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all var(--transition-fast);
}

.slider-dots .dot.active {
    background: var(--accent-bronze);
    transform: scale(1.4);
}

/* 6. HERITAGE PILLARS STRIP */
.heritage-strip {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 2.5rem 0;
}

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

.heritage-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.heritage-icon {
    color: var(--accent-bronze);
    flex-shrink: 0;
}

.heritage-text h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.heritage-text p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* 7. CATEGORY SPOTLIGHT GRID */
.section-header {
    margin-bottom: 3.5rem;
}

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

.section-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--accent-bronze);
    margin-bottom: 0.5rem;
    display: block;
}

.section-title {
    font-size: 2.5rem;
    color: inherit;
}

.section-desc {
    max-width: 650px;
    margin: 1rem auto 0;
    color: var(--text-light-muted);
    font-size: 1rem;
}

.title-divider {
    width: 50px;
    height: 2px;
    background-color: var(--accent-bronze);
    margin: 1rem auto 0;
}

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

.category-card {
    position: relative;
    height: 460px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
}

.category-img-box {
    position: absolute;
    inset: 0;
}

.category-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
    transition: opacity var(--transition-fast);
}

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

.category-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    color: #ffffff;
    z-index: 2;
    transform: translateY(10px);
    transition: transform var(--transition-smooth);
}

.category-card:hover .category-content {
    transform: translateY(0);
}

.category-count {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-bronze);
}

.category-content h3 {
    font-size: 1.5rem;
    margin: 0.3rem 0;
}

.category-content p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.category-btn {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ffffff;
}

/* 8. MODULAR 3-IN-1 BUILDER */
.modular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.modular-preview {
    position: relative;
    background: var(--bg-dark-secondary);
    border-radius: var(--radius-md);
    padding: 2rem;
    border: 1px solid var(--border-dark);
}

.preview-stage {
    position: relative;
    height: 520px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mod-layer {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--transition-smooth);
}

.mod-hotspot-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mod-hotspot-tag {
    position: absolute;
    background: rgba(184, 139, 86, 0.9);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mod-badge-float {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: rgba(22, 25, 28, 0.88);
    backdrop-filter: blur(12px);
    padding: 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mod-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-bronze);
}

.mod-badge-float h4 {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-top: 0.2rem;
}

.control-title {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.layer-option-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--bg-dark-secondary);
    padding: 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.layer-option-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.layer-option-card.active {
    border-color: var(--accent-bronze);
    background: rgba(184, 139, 86, 0.1);
}

.layer-check input[type="checkbox"] {
    accent-color: var(--accent-bronze);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.layer-info {
    flex-grow: 1;
}

.layer-step {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-bronze);
    display: block;
}

.layer-info h4 {
    font-size: 1rem;
    color: var(--text-light);
    margin: 0.1rem 0;
}

.layer-info p {
    font-size: 0.8rem;
    color: var(--text-light-muted);
}

.layer-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-light);
}

.modular-summary-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    margin-top: 2rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-light-muted);
    margin-bottom: 0.75rem;
}

.summary-row.discount {
    color: #4ade80;
    font-weight: 600;
}

.summary-row.total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-light);
    border-top: 1px solid var(--border-dark);
    padding-top: 0.75rem;
    margin-bottom: 1.5rem;
}

/* 9. PRODUCT GRID & FILTERS */
/* ATELIER SHOP HORIZONTAL FILTER BAR (MATCHING REFERENCE DESIGN) */
.atelier-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
    position: relative;
    z-index: 25;
}

.atelier-filters-group {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.filter-dropdown-item {
    position: relative;
}

.filter-dropdown-toggle {
    background: transparent;
    border: none;
    padding: 0.4rem 0;
    font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #24272c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.filter-dropdown-toggle:hover,
.filter-dropdown-item.is-open .filter-dropdown-toggle {
    color: var(--accent-bronze, #9c6c38);
}

.filter-dropdown-item.has-filter .filter-dropdown-toggle {
    color: var(--accent-bronze, #9c6c38);
    font-weight: 600;
}

.filter-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    stroke: currentColor;
    display: inline-block;
}

.filter-dropdown-item.is-open .filter-chevron {
    transform: rotate(180deg);
}

.filter-menu-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    max-height: min(340px, 60vh);
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 0.4rem 0;
    display: none;
    flex-direction: column;
    z-index: 50;
    animation: filterPopoverFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

.filter-menu-popover::-webkit-scrollbar {
    width: 6px;
}

.filter-menu-popover::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.filter-menu-popover::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.filter-menu-popover::-webkit-scrollbar-thumb:hover {
    background: var(--accent-bronze, #b88b56);
}

.filter-menu-popover-right {
    left: auto;
    right: 0;
}

.filter-dropdown-item.is-open .filter-menu-popover {
    display: flex;
}

@keyframes filterPopoverFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-opt-btn {
    background: transparent;
    border: none;
    padding: 0.55rem 1.1rem;
    text-align: left;
    font-family: var(--font-sans), 'Inter', -apple-system, sans-serif;
    font-size: 0.82rem;
    color: #3b4045;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease, color 0.15s ease;
    width: 100%;
}

.filter-opt-btn:hover {
    background: #f7f5f0;
    color: #181b1e;
}

.filter-opt-btn.active {
    font-weight: 600;
    color: #181b1e;
    background: rgba(184, 139, 86, 0.08);
}

.filter-opt-btn.active::after {
    content: "✓";
    font-size: 0.75rem;
    color: var(--accent-bronze, #9c6c38);
    margin-left: 0.5rem;
}

.atelier-reset-btn {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-family: var(--font-sans), sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.atelier-reset-btn:hover {
    background: #181b1e;
    color: #fff;
    border-color: #181b1e;
}

/* Right Section */
.atelier-filter-meta {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
}

.atelier-results-counter {
    font-size: 0.95rem;
    color: #24272c;
    white-space: nowrap;
}

.atelier-results-counter strong {
    font-weight: 600;
}

.sort-prefix {
    color: #555;
    margin-right: 0.2rem;
}

/* Default: hide mobile filter bar on desktop devices */
.mobile-filter-bar-row,
.mobile-active-chips-row {
    display: none !important;
}

/* Responsive styling & Luxury Mobile Filter Experience */
@media (max-width: 860px) {
    .atelier-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem 0;
        margin-bottom: 1.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* HIDE the 6 direct dropdown options on mobile screens */
    .desktop-only-filters,
    .atelier-filters-group,
    .atelier-filter-meta {
        display: none !important;
    }

    /* SHOW the streamlined mobile filter trigger bar instead */
    .mobile-filter-bar-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
    }

    .mobile-open-filters-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.16);
        border-radius: 24px;
        padding: 0.5rem 1rem;
        font-family: var(--font-sans), 'Inter', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        color: #181b1e;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        flex-shrink: 0;
    }

    .mobile-open-filters-btn:hover {
        background: #f7f5f0;
        border-color: #9c6c38;
    }

    .mobile-open-filters-btn.has-active-filters {
        background: #181b1e;
        color: #ffffff;
        border-color: #181b1e;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    .mobile-open-filters-btn.has-active-filters .mobile-filter-icon {
        stroke: #ffffff;
    }

    .mobile-filter-count-badge {
        background: var(--accent-bronze, #9c6c38);
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 0.1rem 0.45rem;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
        line-height: 1.2;
    }

    .mobile-filter-meta-center {
        font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
        font-size: 0.86rem;
        color: #555;
        text-align: center;
        white-space: nowrap;
        flex: 1;
    }

    .mobile-filter-meta-center strong {
        color: #181b1e;
        font-weight: 600;
    }

    .mobile-sort-wrapper {
        position: relative;
        flex-shrink: 0;
    }

    .mobile-sort-btn {
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.14);
        border-radius: 20px;
        padding: 0.48rem 0.85rem;
        font-family: var(--font-sans), 'Inter', sans-serif;
        font-size: 0.82rem;
        color: #374151;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .mobile-sort-btn:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .mobile-sort-current {
        font-weight: 600;
        color: #181b1e;
    }

    /* Active filter chips row on mobile */
    .mobile-active-chips-row {
        display: flex !important;
        align-items: center;
        gap: 0.45rem;
        overflow-x: auto;
        padding: 0.25rem 0 0.15rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .mobile-active-chips-row::-webkit-scrollbar {
        display: none;
    }

    .mobile-active-chips-list {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }

    .mobile-active-chip {
        background: rgba(184, 139, 86, 0.12);
        border: 1px solid rgba(184, 139, 86, 0.35);
        border-radius: 16px;
        padding: 0.25rem 0.65rem;
        font-size: 0.76rem;
        color: #181b1e;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mobile-active-chip:hover {
        background: rgba(184, 139, 86, 0.22);
    }

    .mobile-active-chip .chip-remove-x {
        font-size: 0.85rem;
        line-height: 1;
        color: #9c6c38;
        font-weight: 700;
    }

    .mobile-clear-all-chips-btn {
        background: transparent;
        border: none;
        color: #dc2626;
        font-size: 0.76rem;
        font-weight: 600;
        padding: 0.25rem 0.4rem;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        text-decoration: underline;
    }

    /* Desktop popovers are hidden on mobile; the Mobile Bottom Sheet handles touch selection */
    .atelier-filter-bar .filter-menu-popover {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE FILTER BOTTOM SHEET (SLIDES UP ON TOUCH & SMALL SCREENS)
   ========================================================================== */
.mobile-filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mobile-filter-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-filter-sheet {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-filter-sheet-backdrop.is-open .mobile-filter-sheet {
    transform: translateY(0);
}

.mobile-filter-sheet-handle {
    width: 42px;
    height: 4px;
    background: #d4d4d4;
    border-radius: 2px;
    margin: 10px auto 4px;
}

.mobile-filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-filter-sheet-title {
    font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #181b1e;
    margin: 0;
}

.mobile-filter-sheet-close {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    transition: background 0.15s ease;
}

.mobile-filter-sheet-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.mobile-filter-tabs-nav {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.65rem 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #fcfbf9;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-filter-tabs-nav::-webkit-scrollbar {
    display: none;
}

.mobile-filter-nav-tab {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 18px;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-family: var(--font-sans), 'Inter', sans-serif;
    color: #4b5563;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

.mobile-filter-nav-tab:hover {
    background: #f5f3ee;
    color: #181b1e;
}

.mobile-filter-nav-tab.active {
    background: #181b1e;
    color: #ffffff;
    border-color: #181b1e;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.mobile-filter-nav-tab.has-value:not(.active) {
    border-color: var(--accent-bronze, #9c6c38);
    color: var(--accent-bronze, #9c6c38);
    background: rgba(184, 139, 86, 0.08);
    font-weight: 600;
}

.mobile-filter-nav-tab .tab-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-bronze, #9c6c38);
    display: inline-block;
}

.mobile-filter-nav-tab.active .tab-badge-dot {
    background: #ffffff;
}

.mobile-filter-sheet-body {
    padding: 0.75rem 1.1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 52vh;
}

.mobile-filter-sheet-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0.85rem;
    border-radius: 8px;
    font-family: var(--font-sans), 'Inter', sans-serif;
    font-size: 0.92rem;
    color: #24272c;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 48px;
}

.mobile-filter-sheet-option:hover,
.mobile-filter-sheet-option:active {
    background: #f7f5f0;
}

.mobile-filter-sheet-option.active {
    font-weight: 600;
    color: #181b1e;
    background: rgba(184, 139, 86, 0.1);
}

.mobile-filter-sheet-option .sheet-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: transparent;
    transition: all 0.2s ease;
}

.mobile-filter-sheet-option.active .sheet-check {
    background: var(--accent-bronze, #9c6c38);
    border-color: var(--accent-bronze, #9c6c38);
    color: #ffffff;
}

.mobile-filter-sheet-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #faf9f6;
}

.mobile-filter-sheet-footer .mobile-filter-clear-btn {
    flex: 1;
    height: 48px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    color: #181b1e;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-filter-sheet-footer .mobile-filter-clear-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.mobile-filter-sheet-footer .mobile-filter-apply-btn {
    flex: 1.8;
    height: 48px;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: #181b1e;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-filter-sheet-footer .mobile-filter-apply-btn:hover {
    background: #2b3036;
}

/* PRODUCT CARD HOVER ACTION BUTTONS (BOTH AT BOTTOM SLIDE-UP) */
.card-btns-bottom-group {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0.28s ease;
}

.product-card:hover .card-btns-bottom-group,
.product-card:focus-within .card-btns-bottom-group {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.card-btn-top-view {
    width: 100%;
    height: 38px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #181b1e;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-btn-top-view:hover {
    background: #181b1e;
    color: #ffffff;
    border-color: #181b1e;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.card-btn-bottom-bag {
    width: 100%;
    height: 42px;
    background: #181b1e;
    color: #ffffff;
    border: 1px solid #181b1e;
    border-radius: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-btn-bottom-bag:hover {
    background: #2e333a;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.card-btn-bottom-bag svg {
    display: inline-block;
    vertical-align: middle;
}

/* Fallback direct children positioning if not wrapped in .card-btns-bottom-group */
.product-img-box>.card-btn-top-view {
    position: absolute;
    bottom: 60px;
    left: 12px;
    right: 12px;
    width: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0.28s ease, background 0.2s ease, color 0.2s ease;
}

.product-img-box>.card-btn-bottom-bag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, visibility 0.28s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover .product-img-box>.card-btn-top-view,
.product-card:focus-within .product-img-box>.card-btn-top-view,
.product-card:hover .product-img-box>.card-btn-bottom-bag,
.product-card:focus-within .product-img-box>.card-btn-bottom-bag {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

@media (hover: none) {

    .card-btns-bottom-group,
    .product-img-box>.card-btn-top-view,
    .product-img-box>.card-btn-bottom-bag {
        opacity: 0.95;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .card-btn-top-view {
        height: 34px;
        font-size: 0.68rem;
    }

    .card-btn-bottom-bag {
        height: 38px;
        font-size: 0.7rem;
    }
}

.products-toolbar {
    display: none;
}

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

.product-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), background var(--transition-smooth), border-color var(--transition-smooth);
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.product-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(184, 139, 86, 0.4);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.09);
}

.product-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--bg-secondary);
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--transition-smooth), opacity 0.6s var(--transition-smooth);
}

.product-img-secondary {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth);
    pointer-events: none;
}

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

.product-card:hover .product-img-secondary {
    opacity: 1;
    transform: scale(1);
}

.product-badge-origin {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(251, 249, 245, 0.9);
    backdrop-filter: blur(8px);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.wishlist-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.9);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.wishlist-toggle:hover,
.wishlist-toggle.active {
    color: var(--accent-burgundy);
    transform: scale(1.1);
}

.product-actions-overlay {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-smooth);
}

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

.add-to-bag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.add-to-bag-btn svg {
    width: 15px;
    height: 15px;
}

.product-info {
    padding: 1.25rem;
}

.product-category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

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

.product-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.color-swatches {
    display: flex;
    gap: 0.3rem;
}

.swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: inline-block;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.swatch:hover,
.swatch.active {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px var(--accent-bronze);
}

/* 10. CRAFTSMANSHIP SPOTLIGHT */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.lead-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.fabric-tabs {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.fabric-tab {
    padding: 1.5rem;
    border-left: 3px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fabric-tab.active {
    border-left-color: var(--accent-bronze);
    background: #ffffff;
    box-shadow: var(--shadow-subtle);
}

.fabric-tab h4 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

.fabric-tab p {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.craft-image-frame {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.craft-image-frame img {
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.craft-badge {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 1.2rem 1.8rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.badge-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent-bronze);
    line-height: 1;
}

.badge-label {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* 11. EDITORIAL LOOKBOOK HOTSPOTS */
.lookbook-hero-container {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.lookbook-hero-img {
    width: 100%;
    height: 650px;
    object-fit: cover;
}

.hotspot {
    position: absolute;
    z-index: 10;
}

.hotspot-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: transform var(--transition-fast);
}

.hotspot-btn:hover {
    transform: scale(1.2);
}

.hotspot-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    animation: pulseWave 2s infinite;
}

@keyframes pulseWave {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.hotspot-card {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(251, 249, 245, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-sm);
    padding: 0.8rem;
    width: 220px;
    box-shadow: var(--shadow-medium);
    display: flex;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    pointer-events: none;
}

.hotspot:hover .hotspot-card,
.hotspot.active .hotspot-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    z-index: 50;
}

.hotspot-card img {
    width: 60px;
    height: 75px;
    object-fit: cover;
    border-radius: 2px;
}

.hotspot-info h5 {
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.hotspot-price {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-bronze);
    margin-bottom: 0.4rem;
}

/* 12. PRESS / TESTIMONIALS SLIDER */
.press-slider-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto;
    gap: 2rem;
}

.press-slides {
    flex-grow: 1;
    text-align: center;
    position: relative;
    min-height: 180px;
}

.press-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.press-slide.active {
    opacity: 1;
    visibility: visible;
}

.stars {
    color: var(--accent-bronze);
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
}

.press-quote {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 1.2rem;
    color: var(--text-light);
}

.press-source {
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--accent-bronze);
    font-weight: 700;
}

.press-nav-btn {
    color: var(--text-light-muted);
    font-size: 2.2rem;
    line-height: 1;
    padding: 0.5rem;
}

.press-nav-btn:hover {
    color: var(--accent-bronze);
}

.press-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 2rem;
}

.p-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.p-dot.active {
    background: var(--accent-bronze);
    transform: scale(1.3);
}

/* 13. NEWSLETTER GLASSMOPHISM */
.newsletter-box.glassmorphism {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem;
    border-radius: var(--radius-md);
    text-align: center;
    background: rgba(251, 249, 245, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-medium);
}

.newsletter-content h2 {
    font-size: 2.4rem;
    margin-bottom: 0.8rem;
}

.newsletter-content p {
    color: var(--text-muted);
    max-width: 550px;
    margin: 0 auto 2rem;
}

.newsletter-form .form-group {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 0.5rem;
}

.newsletter-form input[type="email"] {
    flex-grow: 1;
    padding: 0.95rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    outline: none;
}

.newsletter-form input[type="email"]:focus {
    border-color: var(--text-primary);
}

/* 14. FOOTER */
.main-footer {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding-top: 5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--border-dark);
}

.footer-logo .logo-name {
    color: var(--text-light);
}

.footer-about {
    font-size: 0.88rem;
    color: var(--text-light-muted);
    margin: 1.2rem 0;
    line-height: 1.6;
}

.footer-socials {
    display: flex;
    gap: 1.2rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--accent-bronze);
}

.footer-col h4 {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.75rem;
}

.footer-col ul li a {
    font-size: 0.85rem;
    color: var(--text-light-muted);
}

.footer-col ul li a:hover {
    color: var(--text-light);
}

.footer-address {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--text-light-muted);
    line-height: 1.7;
}

.footer-bottom {
    padding: 1.8rem 0;
    font-size: 0.75rem;
    color: var(--text-light-muted);
    letter-spacing: 0.05em;
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* FIXED MOBILE BOTTOM NAV BAR */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(251, 249, 245, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    z-index: 1050;
    padding: 0.5rem 1rem;
    justify-content: space-around;
    align-items: center;
}

.mob-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    gap: 2px;
    position: relative;
}

.mob-bottom-item.active,
.mob-bottom-item:hover {
    color: var(--accent-bronze);
}

.mob-badge {
    position: absolute;
    top: -2px;
    right: 12px;
    background: var(--accent-bronze);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* RE-WAXING GARMENT CARE MODAL */
.care-card {
    max-width: 800px;
}

.care-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.care-step-item {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.step-num {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-bronze);
    color: #ffffff;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 1rem;
}

.care-step-item h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.care-step-item p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 15. CART DRAWER & MODALS */
.cart-drawer-backdrop,
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(18, 22, 26, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
}

.cart-drawer-backdrop.active,
.modal-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 450px;
    max-width: 100vw;
    background: linear-gradient(180deg, rgba(251, 249, 245, 0.96) 0%, rgba(245, 240, 232, 0.95) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15), 0 0 60px rgba(184, 139, 86, 0.08);
}

.cart-drawer.active {
    transform: translateX(0);
}

/* CART HEADER */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}

.cart-header-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-primary);
}

.cart-header-title svg {
    color: var(--accent-bronze);
}

.cart-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cart-close-btn,
.close-btn,
.modal-close,
.overlay-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cart-close-btn:hover,
.close-btn:hover,
.modal-close:hover,
.overlay-close:hover {
    background: var(--text-primary);
    color: #ffffff;
    transform: rotate(90deg);
}

/* FREE SHIPPING PROGRESS BAR */
.shipping-progress-container {
    background: linear-gradient(135deg, rgba(244, 240, 232, 0.9) 0%, rgba(238, 232, 220, 0.9) 100%);
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.shipping-text-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.shipping-icon {
    color: var(--accent-bronze);
    font-size: 0.9rem;
}

.shipping-text {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.35;
}

.shipping-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

.progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #b88b56 0%, #d4a36d 50%, #e8be89 100%);
    transition: width 0.5s var(--transition-smooth);
    border-radius: var(--radius-full);
}

.progress-fill.unlocked {
    background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

/* CART ITEMS CONTAINER */
.cart-items-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-bronze) transparent;
}

.cart-items-wrapper::-webkit-scrollbar {
    width: 5px;
}

.cart-items-wrapper::-webkit-scrollbar-thumb {
    background: rgba(184, 139, 86, 0.4);
    border-radius: 10px;
}

/* EMPTY CART STATE */
.empty-cart-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(184, 139, 86, 0.08);
    border: 1px solid rgba(184, 139, 86, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--accent-bronze);
}

.empty-cart-state h4 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-cart-state p {
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 1.8rem;
    color: var(--text-muted);
}

.empty-shop-btn {
    padding: 0.75rem 1.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ITEM CARDS */
.cart-item {
    display: flex;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(230, 226, 218, 0.9);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all var(--transition-fast);
}

.cart-item:hover {
    background: #ffffff;
    border-color: rgba(184, 139, 86, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.cart-item-img-wrap {
    width: 75px;
    height: 95px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.cart-item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--transition-fast);
}

.cart-item:hover .cart-item-img-wrap img {
    transform: scale(1.06);
}

.cart-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.cart-item-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

.cart-item-title a:hover {
    color: var(--accent-bronze);
}

.cart-item-remove-btn {
    background: none;
    border: none;
    color: var(--text-light-muted);
    cursor: pointer;
    padding: 0.2rem;
    transition: color var(--transition-fast);
}

.cart-item-remove-btn:hover {
    color: #ef4444;
}

.cart-item-tags {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.4rem 0;
}

.cart-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(244, 240, 232, 0.85);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.cart-swatch-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
}

/* WISHLIST SPECIFIC DRAWER STYLES */
.wishlist-drawer {
    border-left: 1px solid rgba(212, 163, 109, 0.4);
}

.wishlist-info-bar {
    background: linear-gradient(135deg, rgba(248, 244, 238, 0.95) 0%, rgba(240, 234, 224, 0.95) 100%);
    border-bottom: 1px solid rgba(212, 163, 109, 0.25);
}

.wishlist-move-bag-btn {
    background: var(--text-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wishlist-move-bag-btn:hover {
    background: var(--accent-bronze);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.25);
    transform: translateY(-1px);
}


.cart-qty-picker {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.15rem 0.4rem;
    gap: 0.4rem;
}

.cart-qty-picker .qty-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.cart-qty-picker .qty-btn:hover {
    background: var(--text-primary);
    color: #ffffff;
}

.cart-qty-picker .qty-num {
    font-size: 0.82rem;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    color: var(--text-primary);
}

.cart-qty-input {
    width: 32px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    outline: none;
    font-family: var(--font-body);
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-clear-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    margin-right: 0.4rem;
}

.cart-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.cart-item-controls-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.4rem 0;
}

.cart-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cart-control-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cart-inline-select {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}

.cart-inline-select:focus,
.cart-inline-select:hover {
    border-color: var(--accent-bronze);
}

.cart-item-price-block {
    text-align: right;
}

.cart-item-price {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.cart-item-unit-price {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.1rem;
}

/* CART FOOTER */
.cart-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(251, 249, 245, 0.98);
    backdrop-filter: blur(10px);
}

.promo-box {
    margin-bottom: 1rem;
}

.promo-input-group {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    gap: 0.5rem;
    transition: border-color var(--transition-fast);
}

.promo-input-group:focus-within {
    border-color: var(--accent-bronze);
    box-shadow: 0 0 0 2px rgba(184, 139, 86, 0.15);
}

.promo-input-group svg {
    color: var(--text-muted);
}

.promo-input-group input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 0.8rem;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
}

.promo-input-group button {
    padding: 0.45rem 0.9rem;
    background: var(--text-primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.promo-input-group button:hover {
    background: var(--accent-bronze);
}

.promo-hint-tag {
    font-size: 0.7rem;
    color: var(--accent-bronze);
    margin-top: 0.4rem;
    cursor: pointer;
    display: inline-block;
    transition: color var(--transition-fast);
}

.promo-hint-tag:hover {
    text-decoration: underline;
    color: var(--accent-bronze-hover);
}

.cart-summary-group {
    margin-bottom: 1.2rem;
}

.cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.84rem;
    margin-bottom: 0.45rem;
    color: var(--text-muted);
}

.cart-summary-line.grand-total {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}

.cart-summary-line.discount-line {
    color: #16a34a;
    font-weight: 600;
}

.free-shipping-tag {
    color: #16a34a;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.standard-shipping-tag {
    color: var(--text-primary);
    font-weight: 600;
}

.cart-checkout-btn {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #544439;
    box-shadow: 0 6px 20px rgba(84, 68, 57, 0.25);
    transition: all var(--transition-smooth);
}

.cart-checkout-btn:hover:not(:disabled) {
    background: #3e3128;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(84, 68, 57, 0.35);
}

.cart-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.cart-trust-badges {
    margin-top: 1rem;
    text-align: center;
}

.trust-badge-item {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.4rem;
}

.trust-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.pay-pill {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* RESPONSIVE MOBILE ADJUSTMENTS */
@media (max-width: 480px) {
    .cart-drawer {
        width: 100vw;
        max-width: 100vw;
        border-left: none;
    }

    .cart-header {
        padding: 1rem 1.25rem;
    }

    .shipping-progress-container {
        padding: 0.75rem 1.25rem;
    }

    .cart-items-wrapper {
        padding: 1rem 1.25rem;
    }

    .cart-footer {
        padding: 1rem 1.25rem;
    }

    .cart-checkout-btn {
        height: 48px;
    }
}

.hidden {
    display: none !important;
}

/* QUICK VIEW & SIZE GUIDE MODALS */
.modal-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    background: rgba(251, 249, 245, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
    z-index: 2002;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    padding: 2.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.modal-backdrop.active .modal-card,
.modal-card.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
}


.modal-close {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
}

.qv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.qv-gallery img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.qv-origin-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-bronze);
    text-transform: uppercase;
}

.qv-details h2 {
    font-size: 1.8rem;
    margin: 0.4rem 0;
}

.qv-price-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.qv-price {
    font-size: 1.4rem;
    font-weight: 700;
}

.stock-status {
    font-size: 0.75rem;
    color: #16a34a;
    font-weight: 600;
}

.qv-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.qv-option-group {
    margin-bottom: 1.5rem;
}

.qv-option-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.size-selector {
    display: flex;
    gap: 0.5rem;
}

.size-chip {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
}

.size-chip.active {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-primary);
}

.qv-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.qty-picker {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0 0.5rem;
}

.qty-picker button {
    padding: 0.5rem 0.8rem;
    font-size: 1rem;
}

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

.qv-spec-accordion summary {
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-color);
}

.qv-spec-accordion p {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-top: 0.5rem;
}

/* SIZE GUIDE TABLE */
.unit-toggle {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 1rem;
}

.unit-btn {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.unit-btn.active {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.table-responsive {
    overflow-x: auto;
}

.size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-top: 1rem;
}

.size-table th,
.size-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.size-table th {
    background: var(--bg-secondary);
    font-weight: 600;
}

/* SEARCH OVERLAY (FR-SF-01) */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(251, 249, 245, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    padding: 4rem 2rem 2rem 2rem;
    overflow-y: auto;
}

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

.search-overlay-content {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.search-overlay-content h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.search-shortcut-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.search-shortcut-hint kbd {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.15rem 0.45rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--text-primary);
}

.search-input-box {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.search-input-box input {
    width: 100%;
    padding: 1.2rem 2.8rem 1.2rem 2rem;
    font-size: 1.35rem;
    font-family: var(--font-heading);
    border: none;
    border-bottom: 2px solid var(--accent-bronze);
    background: transparent;
    outline: none;
    text-align: center;
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.search-input-box input:focus {
    border-color: var(--text-primary);
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-clear-btn.visible {
    display: flex;
}

.search-clear-btn:hover {
    background: var(--text-primary);
    color: #ffffff;
}

.search-tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.search-tags>span {
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 0.2rem;
}

.tag-chip {
    padding: 0.35rem 0.85rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    user-select: none;
}

.tag-chip:hover {
    background: var(--text-primary);
    color: #ffffff;
    border-color: var(--text-primary);
    transform: translateY(-1px);
}

.tag-chip.active {
    background: var(--accent-bronze);
    color: #ffffff;
    border-color: var(--accent-bronze);
    box-shadow: 0 3px 10px rgba(184, 139, 86, 0.3);
}

.tag-chip .chip-type-badge {
    font-size: 0.85em;
    opacity: 0.85;
}

/* SEARCH FILTER TABS */
.search-filter-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.search-tab-btn {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 0.45rem 1.15rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.search-tab-btn:hover {
    border-color: var(--accent-bronze);
    color: var(--text-primary);
}

.search-tab-btn.active {
    background: var(--accent-bronze);
    color: #ffffff;
    border-color: var(--accent-bronze);
    box-shadow: 0 4px 14px rgba(184, 139, 86, 0.28);
}

.search-tab-btn .tab-count {
    background: rgba(0, 0, 0, 0.07);
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
}

.search-tab-btn.active .tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.search-counter-bar {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-bronze);
    margin-top: 1.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    text-align: left;
}

/* SECTION HEADERS WITHIN SEARCH RESULTS */
.search-section-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.search-section-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-section-count {
    font-size: 0.75rem;
    color: var(--accent-bronze);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* SEARCH PRODUCT / GARMENT CARD */
.search-garment-card {
    background: #ffffff;
    border: 1px solid #e6e2da;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.search-garment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: rgba(184, 139, 86, 0.45);
}

.search-garment-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    background: #f7f5f0;
    display: block;
}

.search-garment-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

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

.search-garment-category-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(24, 27, 30, 0.85);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 3px;
}

.search-garment-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.search-garment-title {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-garment-title:hover {
    color: var(--accent-bronze);
}

.search-garment-fabric {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-garment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid #f1f0ea;
}

.search-garment-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.search-garment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-garment-view-link {
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.search-garment-view-link:hover {
    border-color: var(--text-primary);
    background: #f7f5f0;
}

.search-garment-add-btn {
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    background: var(--text-primary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-garment-add-btn:hover {
    background: var(--accent-bronze);
}

/* SEARCH MAGAZINE / GAZETTE CARD */
.search-magazine-card {
    background: #ffffff;
    border: 1px solid #e6e2da;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    text-decoration: none;
    color: inherit;
}

.search-magazine-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: rgba(184, 139, 86, 0.45);
}

.search-magazine-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    background: #f7f5f0;
}

.search-magazine-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

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

.search-magazine-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(24, 27, 30, 0.85);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
}

.search-magazine-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.search-magazine-category {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-bronze);
    margin-bottom: 0.3rem;
}

.search-magazine-title {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.45rem;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-magazine-excerpt {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-magazine-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid #f1f0ea;
    font-size: 0.72rem;
    color: #64748b;
}

.search-magazine-read-link {
    font-weight: 700;
    color: var(--accent-bronze);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

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

/* ==========================================================================
    LUXURY EXPRESS CHECKOUT SYSTEM
   ========================================================================== */
.checkout-card {
    max-width: 540px !important;
    width: 95% !important;
    max-height: calc(100vh - 40px) !important;
    padding: 1.75rem 2rem 1.6rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(184, 139, 86, 0.28) !important;
    border-radius: 14px !important;
    box-shadow: 0 25px 70px -10px rgba(18, 22, 26, 0.4), 0 0 0 1px rgba(184, 139, 86, 0.15) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 139, 86, 0.35) transparent;
}

.checkout-card::-webkit-scrollbar {
    width: 5px;
}

.checkout-card::-webkit-scrollbar-track {
    background: transparent;
}

.checkout-card::-webkit-scrollbar-thumb {
    background: rgba(184, 139, 86, 0.3);
    border-radius: 99px;
}

.checkout-card::-webkit-scrollbar-thumb:hover {
    background: var(--accent-bronze, #b88b56);
}

.checkout-card .modal-close {
    position: absolute;
    top: 1.15rem;
    right: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e7e2d9;
    background: #fbf9f5;
    color: #57534e;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}

.checkout-card .modal-close:hover {
    background: #181b1e;
    color: #ffffff;
    border-color: #181b1e;
    transform: rotate(90deg);
}

.checkout-header {
    text-align: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(184, 139, 86, 0.16);
    position: relative;
}

.checkout-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-bronze, #b88b56);
    background: rgba(184, 139, 86, 0.08);
    padding: 3px 10px;
    border-radius: 99px;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(184, 139, 86, 0.18);
}

.checkout-header h2 {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.55rem;
    font-weight: 600;
    color: #181b1e;
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.checkout-subtitle {
    font-size: 0.74rem;
    color: #78716c;
    margin: 0;
    font-weight: 400;
}

.form-section {
    margin-bottom: 1.15rem;
}

.checkout-step-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}

.checkout-step-header .step-num {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #181b1e;
    color: #fbf9f5;
    font-size: 0.66rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-step-header .step-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #181b1e;
}

.checkout-step-header .step-guarantee {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.67rem;
    color: #16a34a;
    font-weight: 600;
}

/* Fix radio button layout: target only real text/email inputs */
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form input[type="number"],
.checkout-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]) {
    width: 100%;
    height: 40px;
    padding: 0 0.85rem;
    border: 1px solid #dfd8cf;
    border-radius: 6px;
    background: #faf8f5;
    color: #181b1e;
    font-size: 0.85rem;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 0.55rem;
    box-sizing: border-box;
}

.checkout-form input:focus {
    outline: none;
    border-color: var(--accent-bronze, #b88b56);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.16);
}

.checkout-form input::placeholder {
    color: #9c9589;
    font-size: 0.82rem;
    font-weight: 400;
}

.checkout-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0;
}

/* Payment Method Card */
.payment-method-selector {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.payment-method-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid rgba(184, 139, 86, 0.45);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
}

.payment-method-option.active {
    border-color: var(--accent-bronze, #b88b56);
    background: rgba(184, 139, 86, 0.04);
    box-shadow: 0 2px 10px rgba(184, 139, 86, 0.1);
}

.sr-only-radio {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pm-radio-indicator {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid var(--accent-bronze, #b88b56);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.pm-radio-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-bronze, #b88b56);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.pm-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 2px;
}

.pm-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pm-stripe-brand {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #635bff;
    background: rgba(99, 91, 255, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pm-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: #181b1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stripe-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.stripe-badge-test {
    background: rgba(99, 91, 255, 0.08) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(99, 91, 255, 0.22) !important;
}

.stripe-badge-live {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.test {
    background: #635bff;
    box-shadow: 0 0 0 2px rgba(99, 91, 255, 0.25);
}

.status-dot.live {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    animation: livePulse 2s infinite;
}

.pm-sub {
    font-size: 0.72rem;
    color: #78716c;
    margin: 0 0 0.45rem;
    line-height: 1.3;
}

.pm-card-brands {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.brand-chip-svg {
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
    transition: transform 0.15s ease;
}

.brand-chip-svg:hover {
    transform: translateY(-1px);
}

/* Stripe Card Inputs Container */
.stripe-card-fields-box {
    background: #ffffff;
    border: 1px solid rgba(184, 139, 86, 0.25);
    border-radius: 8px;
    padding: 0.85rem 1rem 0.8rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.02);
}

.stripe-field-group {
    margin-bottom: 0.55rem;
}

.stripe-field-group:last-child {
    margin-bottom: 0;
}

.stripe-field-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #57534e;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stripe-field-group label .field-hint {
    font-size: 0.62rem;
    font-weight: 500;
    color: #a8a29e;
    text-transform: none;
    letter-spacing: normal;
}

.stripe-card-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.stripe-card-input-wrapper input {
    width: 100%;
    padding-right: 44px !important;
    font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace !important;
    letter-spacing: 0.1em;
    font-size: 0.9rem !important;
    font-weight: 500;
}

.card-brand-icon {
    position: absolute;
    right: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 30px;
    height: 20px;
}

.stripe-security-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    color: #64748b;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e7e5e4;
    line-height: 1.3;
}

.stripe-security-notice svg {
    flex-shrink: 0;
    color: #16a34a;
}

/* Order Summary Box */
.checkout-summary-box {
    background: rgba(184, 139, 86, 0.04);
    border: 1px solid rgba(184, 139, 86, 0.18);
    border-radius: 8px;
    padding: 0.75rem 0.95rem;
    margin-bottom: 0.85rem;
}

.co-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #57534e;
    margin-bottom: 0.3rem;
}

.co-badge-free {
    font-size: 0.62rem;
    font-weight: 700;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.co-row.total {
    font-size: 1.05rem;
    font-weight: 700;
    color: #181b1e;
    font-family: var(--font-heading, Georgia, serif);
    border-top: 1px solid rgba(184, 139, 86, 0.22);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.co-row.total span:last-child {
    color: var(--accent-bronze, #b88b56);
}

/* Submit Button & Footer */
.checkout-submit-btn {
    width: 100%;
    height: 44px;
    border-radius: 7px;
    background: linear-gradient(135deg, #181b1e 0%, #2b3036 100%) !important;
    color: #fbf9f5 !important;
    border: 1px solid rgba(184, 139, 86, 0.35) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.checkout-submit-btn:hover {
    background: linear-gradient(135deg, #b88b56 0%, #9e7340 100%) !important;
    border-color: #b88b56 !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(184, 139, 86, 0.32);
}

.checkout-submit-btn .btn-arrow {
    transition: transform 0.2s ease;
}

.checkout-submit-btn:hover .btn-arrow {
    transform: translateX(3px);
}

.checkout-footer-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 0.6rem;
    font-size: 0.67rem;
    color: #78716c;
    text-align: center;
}

.checkout-footer-guarantee svg {
    color: var(--accent-bronze, #b88b56);
}

/* TOAST NOTIFICATION */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000005 !important;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-social-inline-msg {
    margin-top: 0.9rem;
    margin-bottom: 0.6rem;
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 0.82rem;
    line-height: 1.45;
    animation: authSlideFadeIn 0.25s ease;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.08);
}

@keyframes authSlideFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-medium);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 3px solid var(--accent-bronze);
}

@keyframes toastIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 16. RESPONSIVE BREAKPOINTS */
@media (max-width: 1200px) {
    .nav-list {
        gap: 1.1rem;
    }

    .nav-link {
        font-size: 0.74rem;
    }
}

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

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

@media (max-width: 1024px) {

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

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

    .modular-grid,
    .grid-2col {
        grid-template-columns: 1fr;
    }

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

    .hero-title {
        font-size: 2.5rem;
    }

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

@media (max-width: 640px) {
    body {
        padding-bottom: 60px;
    }

    .mobile-bottom-bar {
        display: flex;
    }

    .categories-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }

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

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

    .care-steps-grid {
        grid-template-columns: 1fr;
    }

    .hero-card {
        padding: 2rem;
    }

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

    .hero-slider-controls {
        bottom: 1rem;
        right: 1rem;
    }

    .header-currency-box {
        display: none;
    }

    .action-label {
        display: none;
    }
}

/* SUB-PAGE BANNERS & BREADCRUMBS */
.page-banner {
    position: relative;
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 5.5rem 0 4rem 0;
    text-align: center;
    overflow: hidden;
}

.page-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.45;
}

.page-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    animation: heroZoom 25s infinite alternate linear;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(22, 25, 28, 0.45) 0%, rgba(22, 25, 28, 0.85) 100%);
}

.page-banner-content {
    position: relative;
    z-index: 3;
    max-width: 840px;
    margin: 0 auto;
}

.page-banner-card {
    padding: 2.8rem 3rem;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(18, 22, 26, 0.10) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: inline-block;
    width: 100%;
}

.page-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: #f3c285;
    margin-bottom: 0.8rem;
}

.page-breadcrumbs a {
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}

.page-breadcrumbs a:hover {
    color: #ffffff;
}

/* FR-SF-06 Dedicated PDP Breadcrumb Styling */
.pdp-breadcrumbs-wrapper {
    padding-top: 1.75rem;
    padding-bottom: 0.5rem;
}

.pdp-breadcrumbs {
    justify-content: flex-start;
    margin-bottom: 0;
    font-size: 0.78rem;
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.pdp-breadcrumbs .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    margin: 0 0.15rem;
}

.pdp-breadcrumbs .breadcrumb-current {
    color: #f3c285;
    font-weight: 600;
}

@media (max-width: 768px) {
    .pdp-breadcrumbs-wrapper {
        padding-top: 1.25rem;
        padding-bottom: 0.25rem;
    }

    .pdp-breadcrumbs {
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }
}

.page-banner-title {
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: #ffffff;
    font-family: var(--font-heading);
}

.page-banner-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ==========================================================================
   NEW PDP MATCHING REFERENCE MOCKUP (GRID GALLERY, BUY BOX, STORY & CAROUSEL)
   ========================================================================== */

.pdp-container {
    padding-top: 2rem;
}

/* 1. TOP SECTION: 5-IMAGE GRID (LEFT) + BUY BOX (RIGHT) */
.pdp-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 3.5rem;
    align-items: start;
    margin-bottom: 5rem;
}

/* DYNAMIC EDITORIAL COLLAGE GALLERY SYSTEM */
.pdp-gallery-grid-wrapper {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* PDP Single Hero Image & Hover Gallery Button System */
#pdp-gallery-collage-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: block;
}

.collage-tile {
    position: relative !important;
    width: 100% !important;
    height: 600px !important;
    min-height: 600px !important;
    max-height: 600px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.collage-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* Clear uncropped full garment view */
    object-position: center !important;
    display: block !important;
    background: #f8fafc !important;
    transition: transform 0.5s ease !important;
}

.collage-tile:hover img {
    transform: scale(1.03) !important;
}

.collage-tile-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    background: rgba(24, 27, 30, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.collage-zoom-icon {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1e293b !important;
    opacity: 0 !important;
    transform: scale(0.85) !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.collage-tile:hover .collage-zoom-icon {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Floating Hover Overlay Button Inside Image Tile */
.pdp-gallery-hover-overlay {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(14px) !important;
    z-index: 10 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
}

.collage-tile:hover .pdp-gallery-hover-overlay,
#pdp-gallery-collage-container:hover .pdp-gallery-hover-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

@media (max-width: 768px) {
    .pdp-gallery-hover-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
        bottom: 16px !important;
    }
}

.pdp-view-all-gallery-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 24px !important;
    background: rgba(24, 27, 30, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    border: 1.5px solid var(--accent-bronze, #b88b56) !important;
    border-radius: 50px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(184, 139, 86, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
}

.pdp-view-all-gallery-btn:hover {
    background: var(--accent-bronze, #b88b56) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 12px 32px rgba(184, 139, 86, 0.5) !important;
}

.pdp-view-all-gallery-btn svg {
    color: var(--accent-bronze, #b88b56) !important;
    transition: color 0.25s ease !important;
}

.pdp-view-all-gallery-btn:hover svg {
    color: #ffffff !important;
}

#pdp-gallery-collage-container[data-image-count="2"] .collage-tile {
    aspect-ratio: 3 / 4;
}

/* 3 IMAGES LAYOUT */
#pdp-gallery-collage-container[data-image-count="3"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

#pdp-gallery-collage-container[data-image-count="3"] .tile-hero-top {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

#pdp-gallery-collage-container[data-image-count="3"] .tile-portrait-left,
#pdp-gallery-collage-container[data-image-count="3"] .tile-portrait-right {
    aspect-ratio: 3 / 4;
}

/* 4 IMAGES LAYOUT (Staggered Asymmetrical Mosaic) */
#pdp-gallery-collage-container[data-image-count="4"] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
}

#pdp-gallery-collage-container[data-image-count="4"] .collage-tile:nth-child(1) {
    aspect-ratio: 4 / 3;
}

#pdp-gallery-collage-container[data-image-count="4"] .collage-tile:nth-child(2) {
    aspect-ratio: 3 / 4;
}

#pdp-gallery-collage-container[data-image-count="4"] .collage-tile:nth-child(3) {
    aspect-ratio: 3 / 4;
}

#pdp-gallery-collage-container[data-image-count="4"] .collage-tile:nth-child(4) {
    aspect-ratio: 4 / 3;
}

/* 5 IMAGES LAYOUT (EXACT EDITORIAL COLLAGE MATCHING USER REFERENCE SCREENSHOT!) */
#pdp-gallery-collage-container[data-image-count="5"] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
}

#pdp-gallery-collage-container[data-image-count="5"] .tile-row1-left {
    aspect-ratio: 4 / 3;
}

#pdp-gallery-collage-container[data-image-count="5"] .tile-row1-right {
    aspect-ratio: 3 / 4;
}

#pdp-gallery-collage-container[data-image-count="5"] .tile-row2-left {
    aspect-ratio: 3 / 4;
}

#pdp-gallery-collage-container[data-image-count="5"] .tile-row2-right {
    aspect-ratio: 4 / 3;
}

#pdp-gallery-collage-container[data-image-count="5"] .tile-row3-wide {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
}

/* 6+ IMAGES LAYOUT */
#pdp-gallery-collage-container[data-image-count="6"],
#pdp-gallery-collage-container[data-image-count="7"],
#pdp-gallery-collage-container[data-image-count="8"] {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
}

#pdp-gallery-collage-container .collage-tile.tile-landscape {
    aspect-ratio: 4 / 3;
}

#pdp-gallery-collage-container .collage-tile.tile-portrait {
    aspect-ratio: 3 / 4;
}

/* RIGHT STICKY BUY BOX */
.pdp-buy-box {
    position: sticky;
    top: 90px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.pdp-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.pdp-code-tag {
    color: var(--accent-bronze);
    text-transform: none !important;
}

.pdp-rating {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #eab308;
}

.pdp-rating .rating-val {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.pdp-hero-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.pdp-short-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.pdp-hero-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.65rem 0.85rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.pdp-hero-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.pdp-vat-note {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* OPTION GROUPS */
.pdp-option-group {
    margin-bottom: 1.5rem;
}

.pdp-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.option-label {
    color: var(--text-primary);
}

.option-selected-val {
    color: var(--accent-bronze);
}

.fit-guide-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: underline;
}

.fit-guide-link:hover {
    color: var(--accent-bronze);
}

.pdp-colorways-list {
    display: flex;
    gap: 0.75rem;
}

.pdp-swatch-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.8rem;
    font-weight: 500;
}

.pdp-swatch-btn.active {
    border-color: var(--text-primary);
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--text-primary);
}

.swatch-color-bubble {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* SIZE BUTTONS ROW */
.pdp-size-buttons-row {
    display: flex;
    gap: 0.5rem;
}

.pdp-size-btn {
    flex: 1;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pdp-size-btn:hover {
    border-color: var(--text-primary);
    background: #ffffff;
}

.pdp-size-btn.active {
    background: var(--bg-dark);
    color: #ffffff;
    border-color: var(--bg-dark);
}

/* CTA ADD TO BAG */
.pdp-add-bag-btn {
    width: 100%;
    height: 54px;
    background: #544439;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-smooth), transform var(--transition-fast);
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 20px rgba(84, 68, 57, 0.25);
}

.pdp-add-bag-btn:hover {
    background: #3e3128;
    transform: translateY(-2px);
}

/* PERKS ROW */
.pdp-perks-row {
    display: flex;
    justify-content: space-around;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.perk-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.perk-item:hover {
    color: var(--accent-bronze);
}

/* BADGES ROW */
.pdp-badges-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.badge-tag {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ==========================================================================
   WEAR IT WITH / COMPLETE THE LOOK (DOWN AFTER GALLERY IMAGES)
   ========================================================================== */
.pdp-wear-with-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.wear-with-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.wear-with-title-block .brand-sub {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--accent-bronze);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

.wear-with-title-block .wear-with-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.wear-with-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 440px;
}

.wear-with-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 768px) {
    .wear-with-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.wear-with-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.wear-with-card:hover {
    border-color: var(--accent-bronze);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.wear-with-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f7f6f3;
    display: block;
}

.wear-with-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wear-with-card:hover .wear-with-img-box img {
    transform: scale(1.06);
}

.wear-with-body {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    gap: 1rem;
    background: #ffffff;
}

.wear-with-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.wear-with-cat {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-bronze);
}

.wear-with-item-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.wear-with-item-title:hover {
    color: var(--accent-bronze);
}

.wear-with-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.2rem;
}

.wear-with-add-btn {
    width: 100%;
    padding: 0.6rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.wear-with-add-btn:hover {
    background: var(--text-primary);
    color: #ffffff;
    border-color: var(--text-primary);
}

/* 2. MIDDLE STORY SECTION */
.pdp-story-section {
    padding: 5rem 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.pdp-story-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 4.5rem;
    align-items: center;
    /* Center leftside section to parent box */
}

.pdp-story-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center to parent box */
    align-self: center;
    /* Guarantee vertical centering */
    max-width: 620px;
}

.pdp-story-heading {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.3rem, 3.8vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.6rem;
    color: var(--text-primary, #1c1611);
    letter-spacing: -0.015em;
}

.pdp-story-paragraph {
    font-size: 1.14rem;
    line-height: 1.85;
    color: #4a3e35;
    margin-bottom: 1.15rem;
    font-weight: 400;
}

.pdp-story-paragraph-sub {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #6e645a;
    margin: 0;
}

.pdp-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #8c3b31;
    display: block;
    margin-bottom: 1.1rem;
    text-transform: uppercase;
}

.pdp-story-accordion {
    border-top: 1px solid var(--border-color);
}

.pdp-acc-item {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
}

.pdp-acc-item summary {
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdp-acc-item summary::after {
    content: '▾';
    font-size: 1rem;
    color: var(--text-muted);
}

.pdp-acc-item[open] summary::after {
    content: '▴';
    color: var(--accent-bronze);
}

.acc-body {
    padding-top: 0.85rem;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* 3. CAMPAIGN BANNER */
.pdp-campaign-banner {
    position: relative;
    height: 480px;
    overflow: hidden;
}

.pdp-campaign-bg {
    position: absolute;
    inset: 0;
}

.pdp-campaign-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(40%);
}

.pdp-campaign-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%);
}

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

.pdp-campaign-card {
    max-width: 500px;
    padding: 2.5rem;
    border-radius: var(--radius-md);
    background: rgba(22, 26, 30, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.campaign-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent-bronze);
    display: block;
    margin-bottom: 0.6rem;
}

.pdp-campaign-card h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
}

.pdp-campaign-card p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* 4. RELATED PRODUCTS */
.pdp-related-section {
    padding-top: 5rem;
}

.related-section-title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 500;
    margin-bottom: 2.5rem;
    color: var(--text-primary);
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (PDP) RESPONSIVE DESIGN SUITE
   Fully responsive across Desktop, Tablets (992px, 768px),
   Mobile Phablets (< 650px), and Compact Phones (<= 440px / 320px)
   ========================================================================== */

/* 1. TABLET LANDSCAPE & PORTRAIT (<= 992px) */
@media (max-width: 992px) {
    .pdp-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        margin-bottom: 3.5rem;
    }

    .pdp-buy-box {
        position: static;
        max-width: 100%;
        padding: 2rem;
    }

    .pdp-story-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .brand-story-grid,
    .mills-story-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .pdp-campaign-banner {
        height: auto;
        min-height: 420px;
        padding: 3rem 0;
    }

    .pdp-campaign-card {
        max-width: 540px;
        padding: 2rem;
    }
}

/* 2. TABLETS IN PORTRAIT (<= 768px) */
@media (max-width: 768px) {
    .pdp-container {
        padding-top: 1.25rem;
    }

    .pdp-breadcrumbs-wrapper {
        padding-top: 1rem;
        padding-bottom: 0.25rem;
    }

    .pdp-breadcrumbs {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    .pdp-breadcrumbs a {
        color: var(--text-muted) !important;
    }

    .pdp-breadcrumbs a:hover {
        color: var(--accent-bronze) !important;
    }

    .pdp-breadcrumbs .breadcrumb-separator {
        color: rgba(0, 0, 0, 0.25) !important;
    }

    .pdp-breadcrumbs .breadcrumb-current {
        color: var(--text-primary) !important;
    }

    .pdp-hero-grid {
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .pdp-buy-box {
        padding: 1.75rem 1.5rem;
    }

    .pdp-hero-title {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }

    .pdp-story-section {
        padding: 3.5rem 0;
    }

    .pdp-story-heading {
        font-size: clamp(1.6rem, 5.2vw, 2.2rem);
    }

    .rich-specs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .pdp-related-section {
        padding-top: 3.5rem;
    }

    .related-section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}

/* 3. MOBILE DEVICES (< 650px) - DEDICATED MASTER PDP SPECIFICATION */
@media (max-width: 650px) {

    /* PDP Base Container */
    .pdp-container {
        padding-top: 0.5rem !important;
    }

    .pdp-breadcrumbs-wrapper {
        padding-top: 0.65rem !important;
        padding-bottom: 0.35rem !important;
    }

    .pdp-breadcrumbs {
        font-size: 0.68rem !important;
        line-height: 1.4 !important;
    }

    /* Hero Grid Layout */
    .pdp-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.35rem !important;
        margin-bottom: 2.25rem !important;
        width: 100% !important;
    }

    /* Gallery Grid Structure */
    .pdp-gallery-grid-wrapper {
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .pdp-grid-row-top {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .pdp-grid-row-bottom {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .pdp-grid-img-box {
        aspect-ratio: 3 / 4 !important;
        border-radius: 6px !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    /* Sticky Buy Box Reset & Mobile Card */
    .pdp-buy-box {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 1.35rem 1.1rem !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    }

    .pdp-meta-row {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.65rem !important;
    }

    .pdp-code-tag {
        font-size: 0.65rem !important;
        letter-spacing: 0.08em !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    .pdp-rating {
        font-size: 0.78rem !important;
        gap: 0.25rem !important;
    }

    .pdp-hero-title {
        font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important;
        line-height: 1.22 !important;
        letter-spacing: 0.01em !important;
        margin-bottom: 0.75rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .pdp-short-desc {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
        color: var(--text-muted) !important;
        margin-bottom: 1.15rem !important;
        word-wrap: break-word !important;
    }

    .pdp-hero-price-row {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding-bottom: 1rem !important;
        margin-bottom: 1.25rem !important;
    }

    .pdp-hero-price {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .pdp-compare-price {
        font-size: 0.88rem !important;
        margin-left: 0.2rem !important;
        white-space: nowrap !important;
    }

    .pdp-savings-pill {
        font-size: 0.68rem !important;
        padding: 0.2rem 0.55rem !important;
        margin-left: 0.2rem !important;
    }

    .pdp-vat-note {
        font-size: 0.65rem !important;
        letter-spacing: 0.08em !important;
    }

    /* Option Groups: Swatches & Sizes */
    .pdp-option-group {
        margin-bottom: 1.25rem !important;
    }

    .pdp-option-header {
        font-size: 0.75rem !important;
        margin-bottom: 0.6rem !important;
    }

    .fit-guide-link {
        font-size: 0.72rem !important;
        padding: 4px 0 !important;
        min-height: 36px !important;
    }

    .pdp-colorways-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .pdp-swatch-btn {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 38px !important;
    }

    /* Touch-Optimized Size Buttons */
    .pdp-size-buttons-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        width: 100% !important;
    }

    .pdp-size-btn {
        flex: 1 1 calc(20% - 0.45rem) !important;
        min-width: 44px !important;
        height: 46px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Full-Width Touch Add-to-Bag Button */
    .pdp-add-bag-btn {
        width: 100% !important;
        height: 52px !important;
        font-size: 0.86rem !important;
        letter-spacing: 0.1em !important;
        border-radius: 6px !important;
        margin-bottom: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(84, 68, 57, 0.22) !important;
    }

    /* Perks Row */
    .pdp-perks-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.55rem !important;
        padding: 0.85rem 0 !important;
        margin-bottom: 1.2rem !important;
    }

    .perk-item {
        font-size: 0.75rem !important;
        gap: 0.5rem !important;
    }

    /* Badges Row */
    .pdp-badges-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem 0.75rem !important;
        justify-content: flex-start !important;
        margin-bottom: 1.25rem !important;
    }

    .badge-tag {
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    /* Social Share Bar */
    .pdp-share-section {
        margin-top: 1.15rem !important;
        padding-top: 1rem !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .pdp-share-header {
        margin-bottom: 0.25rem !important;
    }

    .pdp-share-label {
        font-size: 0.68rem !important;
        letter-spacing: 0.1em !important;
    }

    .pdp-share-btns {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        width: 100% !important;
    }

    .pdp-share-icon-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    /* Wear It With / Complete The Look: Horizontal Swipeable Carousel */
    .pdp-wear-with-section {
        margin-top: 1.75rem !important;
        padding-top: 1.5rem !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .wear-with-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.3rem !important;
        margin-bottom: 1rem !important;
    }

    .wear-with-title {
        font-size: 1.25rem !important;
    }

    .wear-with-sub {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .wear-with-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0.85rem !important;
        padding: 0.25rem 0.25rem 0.85rem 0.25rem !important;
        margin: 0 !important;
        width: 100% !important;
        scrollbar-width: thin;
    }

    .wear-with-card {
        flex: 0 0 220px !important;
        width: 220px !important;
        min-width: 220px !important;
        scroll-snap-align: start !important;
        border-radius: 8px !important;
    }

    .wear-with-body {
        padding: 0.9rem !important;
        gap: 0.75rem !important;
    }

    .wear-with-item-title {
        font-size: 0.88rem !important;
    }

    .wear-with-price {
        font-size: 0.88rem !important;
    }

    .wear-with-add-btn {
        padding: 0.55rem 0.75rem !important;
        font-size: 0.72rem !important;
        min-height: 38px !important;
    }

    /* Garment Story Section & Accordions */
    .pdp-story-section {
        padding: 2.75rem 0 !important;
    }

    .pdp-story-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .pdp-story-heading {
        font-size: clamp(1.75rem, 5.8vw, 2.2rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .pdp-story-paragraph {
        font-size: 1.02rem !important;
        line-height: 1.7 !important;
        margin-bottom: 0.85rem !important;
    }

    .pdp-story-paragraph-sub {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }

    .pdp-info-label {
        font-size: 0.68rem !important;
        letter-spacing: 0.15em !important;
        margin-bottom: 0.85rem !important;
    }

    .pdp-acc-item {
        padding: 0.75rem 0 !important;
    }

    .pdp-acc-item summary {
        font-size: 0.95rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .acc-body {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
        padding-top: 0.5rem !important;
    }

    /* Campaign Banner */
    .pdp-campaign-banner {
        height: auto !important;
        min-height: 320px !important;
        padding: 2.5rem 0 !important;
    }

    .pdp-campaign-content {
        padding: 0 1rem !important;
    }

    .pdp-campaign-card {
        max-width: 100% !important;
        padding: 1.5rem 1.25rem !important;
        border-radius: 8px !important;
    }

    .campaign-tag {
        font-size: 0.65rem !important;
        letter-spacing: 0.15em !important;
        margin-bottom: 0.45rem !important;
    }

    .pdp-campaign-card h3 {
        font-size: clamp(1.25rem, 4.8vw, 1.55rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.65rem !important;
    }

    .pdp-campaign-card p {
        font-size: 0.84rem !important;
        line-height: 1.55 !important;
    }

    /* Related Products Section */
    .pdp-related-section {
        padding-top: 2.5rem !important;
    }

    .related-section-title {
        font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
        margin-bottom: 1.35rem !important;
    }

    .recently-viewed-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    #clear-recently-viewed-btn {
        width: auto !important;
        padding: 0.4rem 0.85rem !important;
        font-size: 0.72rem !important;
    }

    /* Modals on Mobile: Solid Background & Touch Responsive */
    .modal-card.pdp-size-chart-card,
    .modal-card.share-modal-card {
        background: #ffffff !important;
        background-color: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 86vh !important;
        padding: 1.35rem 1rem !important;
        border-radius: 10px !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .size-chart-header h3 {
        font-size: 1.25rem !important;
    }

    .size-chart-header p {
        font-size: 0.8rem !important;
    }

    .unit-toggle-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.4rem !important;
        font-size: 0.78rem !important;
        margin: 0.85rem 0 !important;
    }

    .unit-toggle-bar .unit-btn {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .size-table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0.75rem 0 !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
    }

    .size-table {
        min-width: 480px !important;
        font-size: 0.8rem !important;
        margin-top: 0 !important;
    }

    .size-table th,
    .size-table td {
        padding: 0.65rem 0.75rem !important;
        white-space: nowrap !important;
    }

    .share-modal-card {
        padding: 1.35rem 1rem !important;
    }

    .share-modal-header h3 {
        font-size: 1.25rem !important;
    }

    .share-product-preview {
        padding: 0.65rem !important;
        gap: 0.75rem !important;
        margin: 1rem 0 !important;
    }

    .share-product-preview img {
        width: 52px !important;
        height: 52px !important;
    }

    .share-preview-details h4 {
        font-size: 0.88rem !important;
    }

    .share-input-wrapper {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .share-input-wrapper input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .share-input-wrapper button {
        width: 100% !important;
    }

    .share-modal-apps-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
}

/* 4. ULTRA-COMPACT MOBILE PHONES (<= 440px / 320px) */
@media (max-width: 440px) {
    .pdp-grid-row-top {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .pdp-grid-row-top .pdp-grid-img-box {
        aspect-ratio: 4 / 3 !important;
    }

    .pdp-grid-row-bottom {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.35rem !important;
    }

    .pdp-grid-row-bottom .pdp-grid-img-box {
        aspect-ratio: 1 / 1 !important;
    }

    .pdp-buy-box {
        padding: 1.15rem 0.85rem !important;
    }

    .pdp-hero-title {
        font-size: clamp(1.3rem, 5.8vw, 1.6rem) !important;
    }

    .pdp-size-btn {
        flex: 1 1 calc(25% - 0.45rem) !important;
        min-width: 40px !important;
        height: 44px !important;
        font-size: 0.78rem !important;
    }

    .wear-with-card {
        flex: 0 0 190px !important;
        width: 190px !important;
        min-width: 190px !important;
    }

    .pdp-share-icon-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .share-modal-apps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   COMPANY HERITAGE & ARTISAN MILLS GUILD STORY SECTIONS
   ========================================================================== */

.brand-story-grid,
.mills-story-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4.5rem;
    align-items: center;
}

.mills-story-grid {
    grid-template-columns: 1fr 1fr;
}

.story-image-frame,
.craft-image-frame {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.story-main-img,
.mills-main-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--transition-smooth);
}

.story-image-frame:hover .story-main-img,
.craft-image-frame:hover .mills-main-img {
    transform: scale(1.04);
}

.story-glass-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: rgba(22, 26, 30, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.story-glass-badge .badge-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-bronze);
}

.story-glass-badge .badge-sub {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.8);
}

.story-stat-card {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: rgba(184, 139, 86, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.85rem 1.4rem;
    border-radius: var(--radius-sm);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.story-stat-card .stat-num {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.story-stat-card .stat-text {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.25;
    max-width: 100px;
}

.story-paragraph {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.8rem;
}

.story-pillars-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.pillar-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}

.pillar-icon {
    color: var(--accent-bronze);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.pillar-text h4 {
    font-size: 0.95rem;
    color: #ffffff;
    font-family: var(--font-heading);
    margin-bottom: 0.25rem;
}

.pillar-text p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.mill-story-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0 2rem 0;
}

.mill-story-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-bronze);
    border-radius: var(--radius-sm);
    padding: 1.2rem 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all var(--transition-fast);
}

.mill-story-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.mill-header {
    margin-bottom: 0.4rem;
}

.mill-tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-bronze);
    display: block;
    margin-bottom: 0.2rem;
}

.mill-story-card h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.mill-story-card p {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ==========================================================================
   FR-PC-07 RICH DESCRIPTION FIELDS & SPECIFICATIONS MATRIX
   ========================================================================== */
.rich-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.8rem;
}

.rich-spec-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    transition: all var(--transition-fast);
}

.rich-spec-card:hover {
    border-color: var(--accent-bronze);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.spec-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    color: var(--accent-bronze);
}

.spec-card-header h4 {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}

.rich-spec-card p {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

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

@media (max-width: 992px) {

    .brand-story-grid,
    .mills-story-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ==========================================================================
   FR-PC-09: PRICING & COMPARE-AT PRICE STYLES
   ========================================================================== */
.compare-at-price {
    font-size: 0.88rem;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.75;
    font-weight: 400;
    margin-right: 0.35rem;
}

.product-price-box {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.product-price.sale-active {
    color: #8c3b31;
    font-weight: 700;
}

.product-badge-sale {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #8c3b31;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    z-index: 3;
    box-shadow: 0 4px 12px rgba(140, 59, 49, 0.3);
    text-transform: uppercase;
}

.pdp-compare-price {
    font-size: 1.25rem;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.7;
    margin-left: 0.6rem;
    font-weight: 400;
}

.pdp-savings-pill {
    display: inline-block;
    background: rgba(140, 59, 49, 0.1);
    color: #8c3b31;
    border: 1px solid rgba(140, 59, 49, 0.3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    margin-left: 0.6rem;
    vertical-align: middle;
}

/* ==========================================================================
   FR-PC-10: BULK IMPORT/EXPORT STYLES
   ========================================================================== */
.bulk-modal-card {
    max-width: 820px;
    width: 92%;
    padding: 2.2rem;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(251, 249, 245, 0.98) 0%, rgba(245, 240, 232, 0.96) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px rgba(184, 139, 86, 0.12);
}

.bulk-modal-header {
    text-align: center;
    margin-bottom: 1.8rem;
}

.bulk-modal-header h2 {
    font-size: 1.8rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin: 0.3rem 0;
}

.bulk-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.bulk-nav-tabs {
    display: flex;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.8rem;
    padding-bottom: 0.2rem;
}

.bulk-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bulk-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.8);
}

.bulk-tab-btn.active {
    color: var(--accent-bronze);
    background: #ffffff;
    border-color: var(--border-color);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.03);
}

.bulk-tab-content {
    display: none;
}

.bulk-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Export Cards */
.bulk-export-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.export-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all var(--transition-fast);
}

.export-card:hover {
    border-color: var(--accent-bronze);
    box-shadow: 0 8px 20px rgba(184, 139, 86, 0.12);
    transform: translateY(-2px);
}

.export-card-icon {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
}

.export-card-info h4 {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.export-card-info p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 1.2rem;
}

.export-card .btn {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
}

/* Import Area */
.bulk-import-options {
    background: #ffffff;
    padding: 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.import-mode-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.6rem;
}

.import-mode-radios {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.radio-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

.radio-chip input[type="radio"] {
    accent-color: var(--accent-bronze);
    width: 16px;
    height: 16px;
}

/* Dropzone */
.dropzone-box {
    border: 2px dashed rgba(184, 139, 86, 0.4);
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-md);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dropzone-box:hover,
.dropzone-box.hover {
    border-color: var(--accent-bronze);
    background: rgba(184, 139, 86, 0.05);
    box-shadow: 0 0 20px rgba(184, 139, 86, 0.15);
}

.dropzone-icon {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}

.dropzone-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.dropzone-content p {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.dropzone-browse {
    color: var(--accent-bronze);
    font-weight: 600;
    text-decoration: underline;
}

/* Import Preview */
.bulk-summary-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.bulk-stat-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
}

.bulk-stat-badge.valid {
    background: #dcfce7;
    color: #15803d;
}

.bulk-stat-badge.invalid {
    background: #fef2f2;
    color: #b91c1c;
}

.file-tag {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-left: auto;
}

.bulk-preview-table-wrapper {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #ffffff;
}

.bulk-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

.bulk-preview-table th {
    background: var(--bg-secondary);
    padding: 0.65rem 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
}

.bulk-preview-table td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.valid-row {
    background: #ffffff;
}

.invalid-row {
    background: #fff5f5;
}

.status-dot.ok {
    color: #16a34a;
    font-weight: 700;
}

.status-dot.err {
    color: #dc2626;
    font-weight: 700;
}

.cat-pill {
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    text-transform: capitalize;
}

.bulk-modal-footer {
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.btn-danger-link {
    background: none;
    border: none;
    color: #b91c1c;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.btn-danger-link:hover {
    opacity: 1;
    text-decoration: underline;
}

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

/* ==========================================
   FR-PC-12: PRODUCT STATUS CONTROL STYLES
   ========================================== */

/* Product Card Status Badges */
.product-badge-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-sm, 4px);
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.product-badge-status.out-of-stock {
    background: #dc2626;
    color: #ffffff;
}

.product-badge-status.draft {
    background: #d97706;
    color: #ffffff;
}

.product-badge-status.archived {
    background: #4b5563;
    color: #ffffff;
}

/* Status Pills in Admin & PDP */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.status-pill.published {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid rgba(21, 128, 61, 0.2);
}

.status-pill.draft {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.2);
}

.status-pill.out-of-stock {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.2);
}

.status-pill.archived {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid rgba(75, 85, 99, 0.2);
}

.status-stat-pill {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full, 20px);
    display: inline-flex;
    align-items: center;
}

.status-stat-pill.all {
    background: #f3f4f6;
    color: #1f2937;
}

.status-stat-pill.published {
    background: #dcfce7;
    color: #15803d;
}

.status-stat-pill.draft {
    background: #fef3c7;
    color: #b45309;
}

.status-stat-pill.out-of-stock {
    background: #fee2e2;
    color: #b91c1c;
}

.status-stat-pill.archived {
    background: #f3f4f6;
    color: #4b5563;
}

/* Out of Stock Button & Tags Styling */
.btn-disabled,
.pdp-add-bag-btn.out-of-stock-btn {
    background: #9ca3af !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.85;
}

.pdp-savings-pill.status-out-of-stock {
    background: #dc2626 !important;
    color: #ffffff !important;
}

.pdp-savings-pill.status-draft {
    background: #d97706 !important;
    color: #ffffff !important;
}

.pdp-savings-pill.status-archived {
    background: #4b5563 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   FR-PDP-11 SOCIAL SHARE COMPONENT & MODAL STYLING
   ========================================================================== */
.pdp-share-section {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pdp-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pdp-share-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pdp-share-label svg {
    color: var(--accent-bronze);
}

.pdp-share-btns {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pdp-share-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm, 6px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdp-share-icon-btn:hover {
    background: var(--text-primary);
    color: #ffffff;
    border-color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pdp-share-icon-btn.copied {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
}

.pdp-share-icon-btn.copied .share-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    background: #15803d !important;
}

.pdp-share-icon-btn .share-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text-primary);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.pdp-share-icon-btn:hover .share-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* SHARE MODAL STYLES */
.share-modal-card {
    max-width: 520px;
    width: 90%;
    padding: 2rem;
}

.share-modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 0.3rem 0;
}

.share-modal-header p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.share-product-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    margin: 1.25rem 0;
}

.share-product-preview img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.share-preview-details h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.share-preview-details p {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.share-preview-price {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-bronze);
}

.share-link-group {
    margin-bottom: 1.5rem;
}

.share-link-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.share-input-wrapper {
    display: flex;
    gap: 0.5rem;
}

.share-input-wrapper input {
    flex-grow: 1;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    outline: none;
    user-select: all;
}

.share-input-wrapper input:focus {
    border-color: var(--accent-bronze);
}

.share-grid-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.share-modal-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.share-app-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.share-app-btn:hover {
    background: #ffffff;
    border-color: var(--accent-bronze);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.app-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.app-icon-wrap.whatsapp {
    background: #25D366;
    color: #ffffff;
}

.app-icon-wrap.snapchat {
    background: #FFFC00;
    color: #000000;
}

.app-icon-wrap.facebook {
    background: #1877F2;
    color: #ffffff;
}

.app-icon-wrap.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
}

.app-icon-wrap.messenger {
    background: linear-gradient(135deg, #00B2FF 0%, #006AFF 100%);
    color: #ffffff;
}

.app-icon-wrap.gmail {
    background: #EA4335;
    color: #ffffff;
}

/* Hover accent states for PDP share bar */
.pdp-share-icon-btn.whatsapp:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #ffffff !important;
}

.pdp-share-icon-btn.snapchat:hover {
    background: #FFFC00 !important;
    border-color: #FFFC00 !important;
    color: #000000 !important;
}

.pdp-share-icon-btn.facebook:hover {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #ffffff !important;
}

.pdp-share-icon-btn.instagram:hover {
    background: #E1306C !important;
    border-color: #E1306C !important;
    color: #ffffff !important;
}

.pdp-share-icon-btn.messenger:hover {
    background: #0084FF !important;
    border-color: #0084FF !important;
    color: #ffffff !important;
}

.pdp-share-icon-btn.gmail:hover {
    background: #EA4335 !important;
    border-color: #EA4335 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   FR-PDP-12 RECENTLY VIEWED SECTION STYLING
   ========================================================================== */
.pdp-recently-viewed-section {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border-top: 1px solid var(--border-color);
}

.recently-viewed-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.recently-viewed-title-group .section-subtitle {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--accent-bronze);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.recently-viewed-title-group .related-section-title {
    margin-bottom: 0;
}

#clear-recently-viewed-btn {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-full, 20px);
}


/* FR-CART-02 ACCOUNT MODAL & SESSION STYLING */
.account-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    max-width: 450px;
    width: 92%;
    padding: 2.4rem 2rem 2rem 2rem;
    background: linear-gradient(160deg, #ffffff 0%, #fbf9f5 100%);
    border-top: 4px solid var(--accent-bronze);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    z-index: 2002;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

.account-card .modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}

.account-card .modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.account-modal-header {
    text-align: center;
    margin-bottom: 1.6rem;
}

.account-subheading {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-bronze);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.account-heading {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}

.quick-demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    background: rgba(184, 139, 86, 0.09);
    border: 1px dashed rgba(184, 139, 86, 0.45);
    border-radius: 20px;
    font-size: 0.72rem;
    color: var(--accent-bronze);
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 0.75rem;
}

.quick-demo-chip:hover {
    background: rgba(184, 139, 86, 0.18);
    border-color: var(--accent-bronze);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.15);
}

.account-auth-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 1.6rem;
    border-bottom: none;
}

.account-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.65rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: none;
}

.account-tab-btn.active {
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.input-with-icon {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.input-with-icon .field-icon {
    position: absolute;
    left: 1rem;
    color: #9e958a;
    pointer-events: none;
    transition: color 0.25s ease;
}

.input-with-icon input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.11);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-primary);
    transition: all 0.25s ease;
    outline: none;
}

.input-with-icon input.has-eye {
    padding-right: 2.75rem;
}

.input-with-icon input:focus {
    border-color: var(--accent-bronze);
    box-shadow: 0 0 0 3.5px rgba(184, 139, 86, 0.15);
}

.input-with-icon:focus-within .field-icon {
    color: var(--accent-bronze);
}

.password-toggle-btn {
    position: absolute;
    right: 0.7rem;
    background: none;
    border: none;
    padding: 0.4rem;
    color: #9e958a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.password-toggle-btn:hover {
    color: var(--text-primary);
}

.account-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    accent-color: var(--accent-bronze);
    width: 15px;
    height: 15px;
    border-radius: 3px;
    cursor: pointer;
}

.forgot-pass-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.forgot-pass-link:hover {
    color: var(--accent-bronze);
    text-decoration: underline;
}

.auth-submit-btn {
    width: 100%;
    padding: 0.92rem 1.5rem;
    background: #16191c;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 20px rgba(22, 25, 28, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.4rem;
}

.auth-submit-btn:hover {
    background: var(--accent-bronze);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(184, 139, 86, 0.3);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.account-security-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.4rem;
    font-size: 0.72rem;
    color: #928b81;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 0.9rem;
}

.account-logged-panel {
    text-align: center;
}

.account-avatar-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--text-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    margin: 0 auto 1rem;
}

.account-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.account-status-badge {
    display: inline-block;
    background: rgba(184, 139, 86, 0.12);
    color: var(--accent-bronze);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
}

.account-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.account-detail-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: var(--radius-sm);
}

.account-detail-card h5 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.account-detail-card .stat-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.header-action-btn.logged-in {
    color: var(--accent-bronze);
    font-weight: 700;
}

/* FR-CART-06 STOCK VALIDATION ON CART VIEW STYLING */
.cart-stock-warning-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cart-stock-warning-banner.oos-global-banner {
    background: #fdf2f2;
    border: 1px solid #f8b4b4;
    color: #9b1c1c;
}

.cart-stock-warning-banner.low-stock-global-banner {
    background: #fff8eb;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.cart-item-flagged-oos {
    border: 1.5px solid #f8b4b4 !important;
    background: rgba(253, 242, 242, 0.4) !important;
}

.cart-item-flagged-low {
    border: 1.5px solid #fcd34d !important;
    background: rgba(254, 252, 232, 0.4) !important;
}

.cart-item-stock-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 0.75rem;
    border-radius: 4px;
}

.cart-item-stock-warning.out-of-stock-alert {
    background: #fde8e8;
    color: #9b1c1c;
}

.cart-item-stock-warning.low-stock-alert {
    background: #fef3c7;
    color: #92400e;
}

.cart-item-stock-warning svg {
    flex-shrink: 0;
}

.adjust-stock-btn {
    background: #92400e;
    color: #ffffff;
    border: none;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.adjust-stock-btn:hover {
    background: #78350f;
}

.cart-item-price.strike {
    text-decoration: line-through;
    opacity: 0.5;
}

.btn-stock-blocked {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    background: #4b5563 !important;
    border-color: #4b5563 !important;
}

/* FR-CART-09 FREE SHIPPING PROGRESS BAR & NUDGE STYLING */
.shipping-progress-container {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(184, 139, 86, 0.08) 0%, rgba(22, 25, 28, 0.03) 100%);
    border-bottom: 1px solid var(--border-color);
}

.shipping-text-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.shipping-icon {
    color: var(--accent-bronze);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.shipping-text {
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.45;
}

.shipping-nudge-amount {
    color: var(--accent-bronze);
    font-weight: 700;
    background: rgba(184, 139, 86, 0.14);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.progress-bar {
    width: 100%;
    height: 7px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-bronze) 0%, #d4af37 100%);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-fill.unlocked {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* FR-CHK-01 GUEST & LOGGED-IN CHECKOUT STYLING */
.co-session-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 1.4rem;
    font-size: 0.8rem;
}

.co-session-banner.logged-in-banner {
    background: linear-gradient(135deg, rgba(184, 139, 86, 0.12) 0%, rgba(22, 25, 28, 0.04) 100%);
    border: 1px solid rgba(184, 139, 86, 0.3);
}

.co-session-banner.guest-banner {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.co-avatar-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-bronze);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.co-session-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-grow: 1;
}

.co-session-text strong {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.co-session-text span {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.co-saved-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #059669;
    background: #d1fae5;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

.co-signin-trigger {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap;
}

.saved-addr-chip {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-bronze);
    background: rgba(184, 139, 86, 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
}

.form-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.co-create-account-box {
    margin-top: 0.8rem;
    padding: 0.75rem 0.9rem;
    background: rgba(184, 139, 86, 0.06);
    border: 1px dashed rgba(184, 139, 86, 0.3);
    border-radius: 8px;
}

/* ==========================================================================
   FR-ADM-01: ROLE-BASED ADMIN ACCESS & PERMISSION CONTROL STYLES
   ========================================================================== */
.admin-role-control-bar {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(184, 139, 86, 0.3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.role-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.role-bar-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-bronze);
    text-transform: uppercase;
}

.active-role-chip {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.active-role-chip.role-tag-owner {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid rgba(217, 119, 6, 0.3);
}

.active-role-chip.role-tag-manager {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.active-role-chip.role-tag-support {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.role-picker-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.role-btn-group {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.role-pill-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-body);
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-pill-btn:hover {
    border-color: var(--accent-bronze);
    color: var(--text-primary);
}

.role-pill-btn.active {
    background: var(--text-primary);
    color: #ffffff;
    border-color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.role-scope-info {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
    background: rgba(0, 0, 0, 0.025);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

/* Restricted Action States */
.role-disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    filter: grayscale(40%);
}

.bulk-dropzone.restricted-dropzone {
    position: relative;
    cursor: not-allowed !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
    background: rgba(254, 243, 199, 0.15) !important;
}

.dropzone-role-lock {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 10;
    padding: 1.5rem;
}

.lock-notice-box {
    text-align: center;
    max-width: 320px;
}

.lock-notice-box .lock-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.4rem;
}

.lock-notice-box h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.4rem 0;
}

.lock-notice-box p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 0.8rem 0;
}

.lock-notice-box .current-role-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
}

/* ==========================================================================
   ADMIN DASHBOARD KPI METRICS & INTERACTIVE CATALOG STYLES
   ========================================================================== */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: linear-gradient(135deg, #ffffff 0%, #fbf9f5 100%);
    border: 1px solid rgba(184, 139, 86, 0.25);
    border-radius: 10px;
    padding: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(184, 139, 86, 0.12);
    border-color: var(--accent-bronze);
}

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(184, 139, 86, 0.1);
    color: var(--accent-bronze);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.kpi-info {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.kpi-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0.15rem 0;
}

.kpi-sub {
    font-size: 0.72rem;
    color: #059669;
    font-weight: 500;
}

.admin-filter-bar {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-input-group {
    flex: 1;
    min-width: 240px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-group svg {
    position: absolute;
    left: 0.85rem;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input-group input {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.4rem;
    font-size: 0.82rem;
    font-family: var(--font-body);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #ffffff;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-group input:focus {
    outline: none;
    border-color: var(--accent-bronze);
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.15);
}

.filter-select-group select {
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-body);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #ffffff;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

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

/* Stock Steppers & Inline Inputs */
.stock-stepper-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
}

.stepper-btn {
    width: 26px;
    height: 28px;
    border: none;
    background: #f3f4f6;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.stepper-btn:hover:not(:disabled) {
    background: var(--text-primary);
    color: #ffffff;
}

.stepper-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.admin-stock-input {
    width: 44px;
    height: 28px;
    border: none;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}

.admin-stock-input::-webkit-outer-spin-button,
.admin-stock-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.admin-inline-price-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    background: #ffffff;
}

.admin-inline-price-edit span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-bronze);
}

.admin-price-input {
    width: 65px;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    outline: none;
    background: transparent;
}


/* ==========================================================================
   JEFFERY GREEN  - LUXURY ATELIER WORDPRESS ADMIN THEME
   ========================================================================== */

.wp-admin-body {
    background-color: var(--bg-primary, #fbf9f5) !important;
    color: var(--text-primary, #181b1e) !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* 1. TOP LUXURY ATELIER WORDPRESS ADMIN BAR */
#wpadminbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: #111417;
    color: #fbf9f5;
    z-index: 99999;
    font-size: 12px;
    line-height: 36px;
    border-bottom: 1px solid rgba(184, 139, 86, 0.35);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

#wpadminbar .quicklinks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 100%;
}

#wpadminbar ul.ab-top-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

#wpadminbar li.menupop {
    position: relative;
}

#wpadminbar a.ab-item {
    color: #fbf9f5;
    text-decoration: none;
    padding: 0 12px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
}

#wpadminbar a.ab-item:hover,
#wpadminbar li.menupop:hover>a.ab-item {
    background: rgba(184, 139, 86, 0.2);
    color: #b88b56;
}

#wpadminbar .ab-icon {
    display: inline-flex;
    align-items: center;
    color: #b88b56;
}

#wpadminbar .ab-label {
    font-size: 12px;
    font-weight: 500;
}

#wpadminbar .wp-curr-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
}

#wpadminbar .wp-curr-btn {
    background: transparent;
    border: 1px solid rgba(184, 139, 86, 0.4);
    color: #fbf9f5;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

#wpadminbar .wp-curr-btn.active,
#wpadminbar .wp-curr-btn:hover {
    background: #b88b56;
    border-color: #b88b56;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(184, 139, 86, 0.4);
}

#wpadminbar .wp-admin-role-tag {
    background: rgba(184, 139, 86, 0.15);
    border: 1px solid #b88b56;
    color: #b88b56;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
    margin: 0 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#wpadminbar .avatar {
    border-radius: 50%;
    margin-left: 6px;
    border: 1px solid #b88b56;
}

/* WP SUBMENU DROPDOWN */
#wpadminbar ul.ab-submenu {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    background: #16191c;
    border: 1px solid rgba(184, 139, 86, 0.3);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    min-width: 210px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    z-index: 100000;
    border-radius: 0 0 8px 8px;
}

#wpadminbar .ab-right ul.ab-submenu,
#wpadminbar #wp-admin-bar-top-secondary ul.ab-submenu,
#wpadminbar #wp-admin-bar-my-account ul.ab-submenu {
    left: auto !important;
    right: 0 !important;
    min-width: 250px;
}

#wpadminbar li.menupop:hover>ul.ab-submenu {
    display: block;
}

#wpadminbar ul.ab-submenu a.ab-item {
    padding: 9px 16px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e6e2da;
    font-size: 12.5px;
    white-space: nowrap;
    text-decoration: none;
}

#wpadminbar ul.ab-submenu a.ab-item:hover {
    background: rgba(184, 139, 86, 0.18);
    color: #dfb380;
}

#wpadminbar .wp-role-selector-box {
    padding: 8px 16px;
    color: #b88b56;
    font-size: 11px;
    font-weight: 600;
}

#wpadminbar .wp-role-selector-box select {
    width: 100%;
    margin-top: 5px;
    background: #111417;
    color: #ffffff;
    border: 1px solid #b88b56;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
}

/* 2.  WORDPRESS MAIN LAYOUT */
#wpwrap {
    display: flex;
    margin-top: 36px;
    min-height: calc(100vh - 36px);
}

/* LEFT SIDEBAR NAVIGATION - FIXED NON-SCROLLABLE ASIDE BAR */
#adminmenumain {
    width: 210px;
    background: #16191c;
    border-right: 1px solid rgba(184, 139, 86, 0.25);
    flex-shrink: 0;
    position: fixed;
    top: 36px;
    left: 0;
    bottom: 0;
    z-index: 1000;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    display: flex;
    flex-direction: column;
}

#adminmenumain::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#adminmenuwrap {
    position: relative;
    top: 0;
    padding-bottom: 0;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#adminmenuwrap::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#adminmenu {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden !important;
}

#adminmenu li {
    margin: 0;
    padding: 0;
}

#adminmenu li.wp-menu-section-header {
    padding: 8px 12px 3px 12px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: #b88b56;
    font-weight: 700;
    text-transform: uppercase;
}

#adminmenu li a.wp-menu-name {
    display: flex;
    align-items: center;
    padding: 6.5px 12px;
    color: #e6e2da;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

#adminmenu li a.wp-menu-name:hover {
    background: rgba(184, 139, 86, 0.15);
    color: #b88b56;
}

#adminmenu li.active a.wp-menu-name {
    background: #b88b56;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(184, 139, 86, 0.3);
}

#adminmenu li.active a.wp-menu-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #d4af37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

#adminmenu .wp-menu-image {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #94a3b8;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

#adminmenu li:hover .wp-menu-image,
#adminmenu li.active .wp-menu-image {
    background: rgba(184, 139, 86, 0.2) !important;
    border-color: rgba(184, 139, 86, 0.4) !important;
    color: #e2b887 !important;
    box-shadow: 0 2px 8px rgba(184, 139, 86, 0.25);
    transform: scale(1.08);
}

#adminmenu .plugin-count {
    background: #b88b56;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 7px;
    margin-left: auto;
}

#adminmenu .wp-menu-separator {
    height: 1px;
    background: rgba(184, 139, 86, 0.2);
    margin: 5px 0;
}

#collapse-menu {
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

#collapse-button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ba3ab;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#collapse-button:hover {
    color: #b88b56 !important;
    background: rgba(184, 139, 86, 0.15) !important;
    border-color: rgba(184, 139, 86, 0.3) !important;
}

.collapse-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
}

.collapse-icon-svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FOLDED / COLLAPSED SIDEBAR ENGINE */
#adminmenumain {
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.folded #adminmenumain,
#adminmenumain.folded {
    width: 56px !important;
}

body.folded #wpbody {
    margin-left: 56px !important;
}

body.folded #adminmenu li a.wp-menu-name {
    padding: 12px 0 !important;
    justify-content: center !important;
}

body.folded #adminmenu li.wp-menu-section-header,
body.folded #adminmenu .wp-menu-name-text,
body.folded #adminmenu .plugin-count,
body.folded #collapse-button .collapse-button-label {
    display: none !important;
}

body.folded #adminmenu .wp-menu-image {
    margin-right: 0 !important;
}

body.folded #collapse-menu {
    padding: 14px 6px !important;
    text-align: center !important;
}

body.folded #collapse-button {
    justify-content: center !important;
    padding: 8px 0 !important;
    width: 38px !important;
    margin: 0 auto !important;
}

body.folded #collapse-button .collapse-icon-svg {
    transform: rotate(180deg) !important;
}

#gallery-thumbnails-preview div {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#gallery-thumbnails-preview div:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.3);
    border-color: #b88b56;
}

#wp-admin-bar-jg-logo a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
}


/* MAIN BODY CONTENT AREA */
#wpbody {
    flex: 1;
    margin-left: 200px;
    background: var(--bg-primary, #fbf9f5);
    padding: 25px 35px 50px 35px;
    min-width: 0;
    transition: margin-left 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* TAB VIEWS SWITCHER */
.wp-tab-view {
    display: none !important;
}

.wp-tab-view.active {
    display: block !important;
}

.wp-heading-inline {
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    border-bottom: 1px solid var(--border-color, #e6e2da);
    padding-bottom: 12px;
}

.wp-heading-title {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 2.3rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #181b1e);
    letter-spacing: -0.01em;
}

.wp-subheading {
    font-size: 0.9rem;
    color: var(--text-muted, #5e656d);
    font-style: italic;
}

.page-title-action {
    display: inline-block;
    padding: 5px 14px;
    font-size: 11px;
    border: 1px solid #b88b56;
    border-radius: 4px;
    background: rgba(184, 139, 86, 0.05);
    color: #b88b56;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-title-action:hover {
    background: #b88b56;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.3);
}

/* WP TAB VIEWS */
.wp-tab-view {
    display: none;
}

.wp-tab-view.active {
    display: block;
}

/* WELCOME PANEL */
.welcome-panel {
    background: #ffffff;
    border: 1px solid var(--border-color, #e6e2da);
    border-top: 3px solid #b88b56;
    box-shadow: var(--shadow-subtle, 0 4px 20px rgba(0, 0, 0, 0.04));
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 6px;
}

.welcome-panel h2 {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary, #181b1e);
}

.welcome-panel .about-description {
    font-size: 0.92rem;
    color: var(--text-muted, #5e656d);
    margin-bottom: 22px;
}

.welcome-panel-column-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.welcome-panel-column h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #181b1e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.welcome-panel-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.welcome-panel-column li {
    margin-bottom: 10px;
}

.welcome-panel-column a {
    color: #b88b56;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.welcome-panel-column a:hover {
    color: #9e7340;
    text-decoration: underline;
}

/* KPI STATS GRID */
.wp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 25px;
}

.wp-stat-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e6e2da);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(184, 139, 86, 0.12);
    border-color: rgba(184, 139, 86, 0.4);
}

.wp-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(184, 139, 86, 0.12) !important;
    color: #b88b56 !important;
}

.wp-stat-label {
    font-size: 11px;
    color: var(--text-muted, #5e656d);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    display: block;
}

.wp-stat-value {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.7rem;
    font-weight: 700;
    margin: 2px 0;
    color: var(--text-primary, #181b1e);
}

.wp-stat-badge {
    font-size: 11px;
    font-weight: 600;
}

.wp-stat-badge.positive {
    color: #3f4a3b;
}

.wp-stat-badge.neutral {
    color: #5e656d;
}

/* POSTBOX CARDS */
.metabox-holder {
    display: flex;
    gap: 22px;
    margin-bottom: 25px;
}

.postbox {
    background: #ffffff;
    border: 1px solid var(--border-color, #e6e2da);
    border-top: 3px solid #b88b56;
    border-radius: 6px;
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.postbox-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color, #e6e2da);
    background: #ffffff;
}

.postbox-header h2 {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #181b1e);
}

.postbox .inside {
    padding: 18px;
}

/*  WOOCOMMERCE TABLES */
.wp-list-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid var(--border-color, #e6e2da);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.wp-list-table th,
.wp-list-table td {
    padding: 12px 14px;
    font-size: 13px;
    text-align: left;
    border-bottom: 1px solid #f4f0e8;
    color: var(--text-primary, #181b1e);
}

.wp-list-table th {
    font-weight: 700;
    color: var(--text-primary, #181b1e);
    border-bottom: 2px solid var(--border-color, #e6e2da);
    background: #f4f0e8;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.wp-list-table.striped tbody tr:nth-child(odd) {
    background-color: #fbf9f5;
}

.wp-list-table.striped tbody tr:hover {
    background-color: rgba(184, 139, 86, 0.08);
}

/* LUXURY BUTTONS */
.button-primary {
    background: #b88b56 !important;
    border-color: #b88b56 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 7px 18px !important;
    border-radius: 4px !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(184, 139, 86, 0.3) !important;
    transition: all 0.2s ease !important;
}

.button-primary:hover {
    background: #9e7340 !important;
    border-color: #9e7340 !important;
    box-shadow: 0 6px 20px rgba(184, 139, 86, 0.45) !important;
}

.button {
    background: rgba(184, 139, 86, 0.06);
    border: 1px solid #b88b56;
    color: #b88b56;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.2s ease;
}

.button:hover,
button.button:hover,
a.button:hover {
    background: #b88b56 !important;
    color: #ffffff !important;
    border-color: #b88b56 !important;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.25) !important;
}

.button:hover *,
button.button:hover *,
a.button:hover * {
    color: #ffffff !important;
}

/* FORM CONTROLS */
.wp-input {
    border: 1px solid var(--border-color, #e6e2da);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary, #181b1e);
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-input:focus {
    border-color: #b88b56;
    box-shadow: 0 0 0 2px rgba(184, 139, 86, 0.2);
    outline: none;
}

/* STATUS BADGES */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge.processing {
    background: rgba(184, 139, 86, 0.15);
    color: #b88b56;
    border: 1px solid rgba(184, 139, 86, 0.4);
}

.status-badge.completed {
    background: rgba(63, 74, 59, 0.12);
    color: #3f4a3b;
    border: 1px solid rgba(63, 74, 59, 0.3);
}

.status-badge.on-hold {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.3);
}

.status-badge.refunded {
    background: rgba(89, 37, 42, 0.12);
    color: #59252a;
    border: 1px solid rgba(89, 37, 42, 0.3);
}

/* TABLENAV */
.tablenav {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.tablenav .actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tablenav select {
    border: 1px solid var(--border-color, #e6e2da);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    background: #ffffff;
    color: var(--text-primary, #181b1e);
}

/* MODAL OVERLAY & DRAWERS */
.wp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 23, 0.8);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wp-modal-card {
    background: #ffffff;
    border-radius: 6px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color, #e6e2da);
    border-top: 3px solid #b88b56;
    overflow: hidden;
}

.wp-modal-header {
    padding: 16px 22px;
    background: #f4f0e8;
    border-bottom: 1px solid var(--border-color, #e6e2da);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wp-modal-header h3 {
    margin: 0;
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary, #181b1e);
}

.wp-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-muted, #5e656d);
    cursor: pointer;
    transition: color 0.2s ease;
}

.wp-modal-close:hover {
    color: #b88b56;
}

.wp-modal-card form,
.wp-modal-body {
    padding: 22px;
}

/* RESPONSIVE ATELIER ADMIN CONTROL DESK */
#wpwrap {
    display: flex;
    min-height: calc(100vh - 32px);
    background: #f4f0e8;
}

#adminmenumain {
    width: 220px;
    background: #16191c;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

#wpbody {
    flex-grow: 1;
    min-width: 0;
    padding: 1.5rem;
    box-sizing: border-box;
}

.wp-tab-view {
    display: none;
}

.wp-tab-view.active {
    display: block;
    animation: fadeInTab 0.25s ease-out;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TABLE RESPONSIVE SCROLL CONTAINERS */
.table-responsive-wrapper,
.wp-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e6e2da);
    margin: 1rem 0 1.5rem 0;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.wp-list-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

@media (max-width: 992px) {
    #adminmenumain {
        width: 180px;
    }

    .wp-modal-card {
        max-width: 94vw !important;
        margin: 0 auto;
    }
}

@media (max-width: 782px) {
    #wpwrap {
        flex-direction: column;
    }

    #wpadminbar {
        position: relative !important;
        height: auto !important;
        min-height: 46px;
        padding: 0.4rem 0.8rem;
    }

    #wpadminbar .quicklinks {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        justify-content: space-between;
    }

    #wpadminbar .ab-top-menu {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    #wpadminbar .ab-item {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    #adminmenumain {
        width: 100% !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        background: #16191c !important;
        border-bottom: 2px solid #b88b56 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    #adminmenuwrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.4rem 0.6rem !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #adminmenuwrap::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #adminmenu {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.4rem !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        white-space: nowrap !important;
    }

    #adminmenu li {
        margin: 0 !important;
        display: inline-block !important;
    }

    #adminmenu li.wp-menu-section-header,
    #adminmenu li.wp-menu-separator,
    #collapse-menu {
        display: none !important;
    }

    #adminmenu .wp-menu-name {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0.85rem !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
        color: #ffffff !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    #adminmenu li.active .wp-menu-name {
        background: #b88b56 !important;
        border-color: #b88b56 !important;
        color: #ffffff !important;
    }

    #adminmenu .wp-menu-name-text {
        display: inline !important;
    }

    #wpbody {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 1rem 0.8rem !important;
    }

    .metabox-holder {
        flex-direction: column !important;
    }

    .postbox-container {
        width: 100% !important;
    }

    .form-field-group,
    .atelier-form-row {
        grid-template-columns: 1fr !important;
    }

    .welcome-panel-column-container {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    .tablenav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.8rem !important;
    }

    .tablenav .actions {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .tablenav select,
    .tablenav input {
        width: 100% !important;
    }
}

/* ==========================================================================
   INTERACTIVE ABOUT PAGE COMPONENTS & DESIGN SYSTEM
   ========================================================================== */
.timeline-section {
    position: relative;
    background: var(--bg-surface, #16191c);
    color: #ffffff;
}

.timeline-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.timeline-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.8rem 1.8rem;
    border-radius: 40px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-tab:hover {
    border-color: var(--accent-gold, #f3c285);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.timeline-tab.active {
    background: linear-gradient(135deg, var(--accent-bronze, #b88b56) 0%, var(--accent-gold, #f3c285) 100%);
    color: #12161a;
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(243, 194, 133, 0.3);
    font-weight: 700;
}

.timeline-card {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-card.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .timeline-card.active {
        grid-template-columns: 1fr;
    }
}

.timeline-card-info {
    padding: 1rem 0;
}

.timeline-year-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent-gold, #f3c285);
    margin-bottom: 0.8rem;
}

.timeline-card-title {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 1.2rem;
    line-height: 1.2;
}

.timeline-card-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.timeline-card-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* STATS COUNTER BAR */
.about-stats-strip {
    background: linear-gradient(180deg, rgba(22, 25, 28, 0.98) 0%, rgba(14, 18, 22, 1) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat-item {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-4px);
    border-color: rgba(243, 194, 133, 0.4);
}

.stat-number {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-gold, #f3c285);
    margin-bottom: 0.3rem;
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
}

/* INTERACTIVE FAQ ACCORDION */
.faq-grid {
    max-width: 860px;
    margin: 3rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.faq-item {
    background: #ffffff;
    border: 1px solid var(--border-color, #e6e2da);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.faq-item[open] {
    border-color: var(--accent-bronze, #b88b56);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.faq-summary {
    padding: 1.4rem 1.8rem;
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #181b1e);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    user-select: none;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-summary::after {
    content: '+';
    font-family: var(--font-sans, sans-serif);
    font-size: 1.4rem;
    color: var(--accent-bronze, #b88b56);
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-summary::after {
    content: '−';
}

.faq-content {
    padding: 0 1.8rem 1.6rem 1.8rem;
    color: var(--text-muted, #5e656d);
    font-size: 0.98rem;
    line-height: 1.7;
    border-top: 1px solid #f2eee8;
    margin-top: 0.5rem;
    padding-top: 1rem;
}

/* ATELIER FORM STYLING */
.atelier-form-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 2.5rem;
}

.atelier-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .atelier-form-row {
        grid-template-columns: 1fr;
    }
}

.atelier-input {
    width: 100%;
    padding: 0.9rem 1.2rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.atelier-input:focus {
    outline: none;
    border-color: var(--accent-gold, #f3c285);
    background: rgba(255, 255, 255, 0.12);
}

.atelier-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   ADMIN AUTHENTICATION PORTAL STYLING
   ========================================================================== */
.admin-auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(circle at center, #1e242a 0%, #0d1013 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
}

.admin-auth-card {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(145deg, rgba(30, 36, 42, 0.95) 0%, rgba(18, 22, 26, 0.98) 100%);
    border: 1px solid rgba(243, 194, 133, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(184, 139, 86, 0.15);
    border-radius: 12px;
    padding: 2.8rem 2.2rem;
    color: #ffffff;
    text-align: center;
    position: relative;
}

.admin-auth-logo {
    display: block;
    width: 72px;
    height: 72px;
    background: url('/assets/images/logo-gold.svg') no-repeat center center / contain;
    margin: 0 auto 1.25rem;
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.admin-auth-logo:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 16px rgba(243, 194, 133, 0.4));
}

.admin-auth-title {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.admin-auth-sub {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: #b88b56;
    margin-bottom: 1.8rem;
    text-transform: uppercase;
}

.admin-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.admin-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.05em;
}

.admin-auth-input {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.admin-auth-input:focus {
    outline: none;
    border-color: #f3c285;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(243, 194, 133, 0.2);
}

.admin-auth-btn {
    margin-top: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #b88b56 0%, #f3c285 100%);
    color: #12161a;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.admin-auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 194, 133, 0.4);
}

.admin-demo-badge {
    margin-top: 1.5rem;
    padding: 0.8rem;
    background: rgba(243, 194, 133, 0.08);
    border: 1px dashed rgba(243, 194, 133, 0.3);
    border-radius: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.admin-demo-badge strong {
    color: #f3c285;
}

.admin-auth-error {
    display: none;
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    color: #ff858d;
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.admin-auth-card.shake {
    animation: shakeError 0.4s ease-in-out;
}

@keyframes shakeError {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-10px);
    }

    40%,
    80% {
        transform: translateX(10px);
    }
}



/* ==========================================================================
   CLIENT REQUIREMENTS OVERRIDES & EXTENSIONS
   ========================================================================== */

/* REQ #4: HERO CARD OVERLAY - DESKTOP & SMALL HEIGHT RESPONSIVE CONSTRAINTS */
@media (min-width: 769px) {
    .hero-card {
        max-width: 580px;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        padding: 2rem 2.5rem !important;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-title {
        font-size: 2.5rem !important;
        margin-bottom: 0.8rem !important;
    }

    .hero-description {
        font-size: 0.95rem !important;
        margin-bottom: 1.2rem !important;
        line-height: 1.5 !important;
    }

    .hero-badge {
        margin-bottom: 0.5rem !important;
    }
}

/* Optimize spacing on small height screens (<= 800px) so content fits cleanly */
@media (max-height: 800px) and (min-width: 769px) {
    .hero-section {
        min-height: 500px !important;
    }

    .hero-card {
        padding: 1.5rem 2rem !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    .hero-title {
        font-size: 2.1rem !important;
        margin-bottom: 0.6rem !important;
    }

    .hero-description {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.45 !important;
    }

    .hero-badge {
        margin-bottom: 0.35rem !important;
    }
}

/* REQ #1: PDP BADGES & SHARE BUTTONS CLEANUP */
.pdp-badges-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 1rem 0 !important;
    border-top: 1px solid var(--border-color, #e6e2da) !important;
    border-bottom: 1px solid var(--border-color, #e6e2da) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--text-primary, #181b1e) !important;
    margin: 1.5rem 0 !important;
}

.pdp-badges-row .badge-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.pdp-share-section {
    margin-top: 1.5rem !important;
    padding-top: 1.2rem !important;
    border-top: 1px dashed var(--border-color, #e6e2da) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
}

.pdp-share-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--text-primary, #181b1e) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.4rem !important;
}

.pdp-share-btns {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.pdp-share-icon-btn {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color, #e6e2da) !important;
    color: var(--text-primary, #181b1e) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.pdp-share-icon-btn:hover {
    background: var(--text-primary, #181b1e) !important;
    color: #ffffff !important;
    border-color: var(--text-primary, #181b1e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.pdp-share-icon-btn.copied {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25) !important;
}

.pdp-share-icon-btn.copied .share-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    background: #15803d !important;
}

/* REQ #2: PRODUCT IMAGE LIGHTBOX & ZOOM MODAL */
.pdp-grid-img-box img,
.pdp-gallery-grid-wrapper img,
.pdp-wear-with-card img {
    cursor: zoom-in !important;
}

.lightbox-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.lightbox-modal.active {
    display: flex !important;
}

.lightbox-modal .lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(12, 15, 18, 0.92) !important;
    backdrop-filter: blur(10px) !important;
}

.lightbox-content {
    position: relative !important;
    z-index: 2 !important;
    width: 82vw !important;
    max-width: 1200px !important;
    height: 80vh !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
}

.lightbox-close-btn {
    position: absolute !important;
    top: -45px !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.lightbox-close-btn:hover {
    background: #ffffff !important;
    color: #181b1e !important;
}

.lightbox-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    background: rgba(18, 22, 26, 0.9) !important;
    border: 1px solid rgba(184, 139, 86, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(184, 139, 86, 0.15) !important;
    padding: 0.35rem 0.95rem !important;
    border-radius: 30px !important;
    margin-bottom: 0.75rem !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 1000005 !important;
    user-select: none !important;
}

.lightbox-slider-wrap {
    display: flex !important;
    align-items: center !important;
    width: 135px !important;
    margin: 0 4px !important;
}

.lightbox-zoom-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 3px !important;
    outline: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.lightbox-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #b88b56 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 8px rgba(184, 139, 86, 0.85) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.lightbox-zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.22) !important;
    background: #d4a366 !important;
}

.lightbox-zoom-slider::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #b88b56 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 8px rgba(184, 139, 86, 0.85) !important;
    cursor: pointer !important;
}

.lightbox-tool-btn {
    background: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.35rem !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.lightbox-tool-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #b88b56 !important;
    transform: scale(1.1) !important;
}

.lightbox-zoom-val {
    color: #b88b56 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    font-family: monospace, monospace !important;
    min-width: 44px !important;
    text-align: center !important;
    user-select: none !important;
}

.lightbox-reset-btn {
    border-radius: 14px !important;
    padding: 0.22rem 0.55rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #e2e8f0 !important;
}

.lightbox-reset-btn:hover {
    background: rgba(184, 139, 86, 0.25) !important;
    border-color: #b88b56 !important;
    color: #ffffff !important;
}

.lightbox-img-stage {
    position: relative !important;
    width: 100% !important;
    height: 65vh !important;
    max-height: calc(80vh - 120px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
    cursor: zoom-in !important;
    border-radius: 8px !important;
}

.lightbox-img-stage.is-zoomed {
    cursor: grab !important;
}

.lightbox-img-stage.is-dragging {
    cursor: grabbing !important;
}

.lightbox-img-stage img,
#lightbox-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transform-origin: center center;
    will-change: transform;
    pointer-events: auto !important;
}

/* REQ #5 & #6: SHOP SUB-CATEGORIES DROPDOWN */
.shop-dropdown-trigger {
    position: relative;
}

.shop-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid var(--border-color, #e6e2da);
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    padding: 0.6rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
}

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

.shop-subcategories-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-subcategories-list li a {
    display: block;
    padding: 0.55rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary, #181b1e);
    transition: background 0.15s ease, color 0.15s ease;
}

.shop-subcategories-list li a:hover {
    background: var(--bg-secondary, #f4f0e8);
    color: var(--accent-bronze, #b88b56);
}

/* REQ #7: 3-COLUMN FOOTER LAYOUT */
.footer-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3rem !important;
    padding: 4rem 0 3rem 0 !important;
}

@media (max-width: 900px) {
    .footer-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
}

.footer-tagline {
    font-size: 0.9rem !important;
    color: var(--text-muted, #5e656d) !important;
    margin: 1rem 0 1.5rem 0 !important;
    line-height: 1.6 !important;
}

.footer-social-icons {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}

.footer-social-icons .social-label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--text-primary, #181b1e) !important;
    margin-right: 0.4rem !important;
}

.footer-social-icons .social-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--bg-secondary, #f4f0e8) !important;
    color: var(--text-primary, #181b1e) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.footer-social-icons .social-icon:hover {
    background: var(--text-primary, #181b1e) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.footer-links-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-links-list li {
    margin-bottom: 0.6rem !important;
}

.footer-links-list li a {
    font-size: 0.9rem !important;
    color: var(--text-muted, #5e656d) !important;
    transition: color 0.15s ease !important;
}

.footer-links-list li a:hover {
    color: var(--accent-bronze, #b88b56) !important;
}

.newsletter-desc {
    font-size: 0.88rem !important;
    color: var(--text-muted, #5e656d) !important;
    margin-bottom: 1.2rem !important;
    line-height: 1.5 !important;
}

.footer-newsletter-form .newsletter-input-group {
    display: flex !important;
    gap: 0.5rem !important;
}

.footer-newsletter-form input {
    flex: 1 !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--border-color, #e6e2da) !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    background: #ffffff !important;
}

.footer-bottom {
    border-top: 1px solid var(--border-color, #e6e2da) !important;
    padding: 1.2rem 0 !important;
    background: #111417 !important;
    color: #fbf9f5 !important;
}

.footer-bottom-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.copyright-text {
    font-size: 0.82rem !important;
    letter-spacing: 0.04em !important;
}

.payment-badges {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.payment-badge {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    letter-spacing: 0.05em !important;
}

/* ==========================================================================
   ATELIER GAZETTE & MAGAZINE STYLES
   ========================================================================== */
.magazine-filter-bar {
    padding: 1.25rem 0 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.magazine-category-dropdown-container {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    background: #ffffff;
    padding: 0.45rem 0.55rem 0.45rem 1.2rem;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 100%;
}

.magazine-category-dropdown-container:hover,
.magazine-category-dropdown-container:focus-within {
    border-color: #b88b56;
    box-shadow: 0 6px 24px rgba(184, 139, 86, 0.14);
}

.magazine-category-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    white-space: nowrap;
    margin: 0;
    user-select: none;
}

.magazine-category-label .mag-filter-icon {
    color: #b88b56;
    display: flex;
    align-items: center;
}

.mag-select-box {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.magazine-category-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #0f172a;
    border-radius: 40px;
    padding: 0.55rem 2.6rem 0.55rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
    min-width: 220px;
}

.magazine-category-select:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.magazine-category-select:focus {
    background: #0f172a;
    border-color: #b88b56;
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.25);
}

.magazine-category-select option {
    background: #ffffff;
    color: #0f172a;
    font-weight: 500;
    padding: 8px 12px;
}

.mag-select-chevron {
    position: absolute;
    right: 1.1rem;
    pointer-events: none;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.mag-select-box:hover .mag-select-chevron {
    color: #ffffff;
}

@media (max-width: 640px) {
    .magazine-category-dropdown-container {
        flex-direction: column;
        align-items: stretch;
        border-radius: 14px;
        padding: 0.85rem;
        width: 100%;
    }

    .mag-select-box {
        width: 100%;
    }

    .magazine-category-select {
        width: 100%;
        min-width: 0;
    }
}

.mag-filter-btn {
    background: #ffffff;
    border: 1px solid var(--border-color, #e6e2da);
    color: var(--text-primary, #181b1e);
    padding: 0.6rem 1.4rem;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mag-filter-btn:hover {
    border-color: var(--accent-bronze, #b88b56);
    color: var(--accent-bronze, #b88b56);
}

.mag-filter-btn.active {
    background: var(--text-primary, #181b1e);
    color: #ffffff;
    border-color: var(--text-primary, #181b1e);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.mag-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e6e2da);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.mag-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: rgba(184, 139, 86, 0.4);
}

.mag-card-img-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

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

.mag-card:hover .mag-card-img {
    transform: scale(1.06);
}

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

.mag-card-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-bronze, #b88b56);
    margin-bottom: 0.5rem;
}

.mag-card-title {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #181b1e);
    line-height: 1.35;
    margin-bottom: 0.6rem;
}

.mag-card-excerpt {
    font-size: 0.88rem;
    color: var(--text-muted, #5e656d);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mag-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px solid #f1f5f9;
}

/* ARTICLE MODAL */
#magazine-article-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 21, 28, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#magazine-article-modal.active,
#magazine-article-modal[style*="display: flex"],
#magazine-article-modal[style*="display:flex"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.article-modal-card {
    background: #ffffff;
    width: 95%;
    max-width: 920px;
    max-height: 94vh;
    border-radius: 12px;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    position: relative;
    display: flex;
    flex-direction: column;
}

.article-modal-hero {
    position: relative;
    min-height: 340px;
    width: 100%;
    overflow: hidden;
}

.article-modal-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-modal-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(15, 21, 28, 0.95) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.2rem;
}

.article-modal-body {
    padding: 2.5rem 2rem;
    line-height: 1.85;
    color: #334155;
}

/* ==========================================================================
   FAQ DROPDOWN ACCORDION LUXURY STYLES
   ========================================================================== */
.faq-accordion-group {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.faq-accordion-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.faq-accordion-item[open] {
    border-color: #b88b56;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(184, 139, 86, 0.12);
}

.faq-accordion-summary {
    padding: 1.15rem 1.35rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: #16191c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    user-select: none;
    transition: color 0.2s ease;
}

.faq-accordion-summary::-webkit-details-marker,
.faq-accordion-summary::marker {
    display: none !important;
}

.faq-accordion-summary:hover {
    color: #b88b56;
}

.faq-accordion-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(184, 139, 86, 0.12);
    color: #b88b56;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
}

.faq-accordion-item[open] .faq-accordion-icon {
    transform: rotate(180deg);
    background: #b88b56;
    color: #ffffff;
}

.faq-accordion-body {
    padding: 0.5rem 1.35rem 1.35rem;
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.7;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.2rem;
}

.faq-accordion-body p {
    margin-bottom: 0.8rem;
}

.faq-accordion-body p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   CURATED SECTIONS PICKER & CHIPS STYLES
   ========================================================================== */
.curated-chips-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
    min-height: 20px;
}

.curated-selected-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #FAF8F5;
    border: 1.5px solid #C5A075;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
}

.curated-selected-card:hover {
    border-color: #B88B56;
    background: #FFFFFF;
    box-shadow: 0 3px 10px rgba(184, 139, 86, 0.12);
}

.curated-card-check {
    width: 22px;
    height: 22px;
    background: #B88B56;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.curated-card-img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.curated-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.curated-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.3;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.curated-card-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748B;
    margin-top: 2px;
}

.curated-card-remove {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.curated-card-remove:hover {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.08);
}

.curated-picker-card {
    max-width: 680px;
    width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.curated-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1.5px solid #C5A075;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    background: #FAF8F5;
}

.curated-picker-item:hover {
    border-color: #B88B56;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.12);
}

.curated-picker-item.selected {
    border-color: #B88B56;
    background: #FAF8F5;
}

.curated-picker-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #B88B56;
    cursor: pointer;
    flex-shrink: 0;
}

.curated-picker-item img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.curated-picker-item .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.curated-picker-item .item-info strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.3;
}

.curated-picker-item .item-info span {
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748B;
    margin-top: 2px;
}

.curated-picker-item .item-id-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: #B88B56;
    background: rgba(184, 139, 86, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(184, 139, 86, 0.25);
    font-family: monospace;
}

/* ==========================================================================
   JEFFERY GREEN - MASTER RESPONSIVE SUITE FOR ALL DEVICES
   (Extra Small Phones 320px -> Standard Mobile 375px/414px -> Tablets 768px/1024px -> Desktop 1440px+)
   ========================================================================== */

/* Universal mobile-first baseline hardening */
html,
body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

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

/* Ensure no media causes horizontal overflow */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* Base button and touch target accessibility */
button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   1. LARGE DESKTOP & ULTRAWIDE (>= 1440px)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
        padding: 0 2rem;
    }

    .hero-title {
        font-size: 3.2rem;
    }
}

/* --------------------------------------------------------------------------
   2. DESKTOP / LAPTOPS (1025px - 1439px)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1439px) {
    .container {
        padding: 0 1.75rem;
    }

    .nav-list {
        gap: clamp(0.7rem, 1.2vw, 1.4rem);
    }

    .nav-link {
        font-size: 0.76rem;
    }

    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .brand-story-grid,
    .mills-story-grid {
        gap: 3rem;
    }
}

/* --------------------------------------------------------------------------
   3. TABLETS (LANDSCAPE) & SMALL LAPTOPS (901px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .main-nav {
        display: none !important;
    }

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

    .container {
        padding: 0 1.5rem;
    }

    .section-padding {
        padding: 4.5rem 0;
    }

    .section-title {
        font-size: 2.2rem;
    }

    .hero-section {
        min-height: 520px;
    }

    .hero-card {
        max-width: 520px;
        padding: 2.2rem !important;
    }

    .hero-title {
        font-size: 2.2rem !important;
    }

    .heritage-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }

    .brand-story-grid,
    .mills-story-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .story-image-frame,
    .craft-image-frame {
        max-width: 680px;
        margin: 0 auto;
        width: 100%;
    }

    .mill-story-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
    }

    .footer-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
        padding: 3.5rem 0 2.5rem 0 !important;
    }

    .lookbook-hero-img {
        height: 520px;
    }
}

/* --------------------------------------------------------------------------
   4. TABLETS (PORTRAIT) (769px - 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .section-padding {
        padding: 3.75rem 0;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .footer-grid-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }

    .footer-col.newsletter-col {
        grid-column: 1 / -1;
    }

    .newsletter-box.glassmorphism {
        padding: 3rem 2rem !important;
    }

    .press-quote {
        font-size: 1.45rem;
    }

    .lookbook-hero-img {
        height: 460px;
    }
}

/* --------------------------------------------------------------------------
   5. TABLETS IN PORTRAIT (651px - 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 651px) and (max-width: 768px) {
    body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .container {
        padding: 0 1.25rem;
    }

    .section-padding {
        padding: 3.5rem 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .mobile-bottom-bar {
        display: flex !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        z-index: 1040;
    }

    .main-header {
        height: auto;
    }

    .header-container {
        height: 64px !important;
        padding: 0 1.25rem !important;
    }

    .main-nav {
        display: none !important;
    }

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

    .hero-section {
        min-height: 520px;
    }

    .hero-card {
        max-width: 520px;
        padding: 2.2rem !important;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    .brand-story-grid,
    .mills-story-grid,
    .grid-2col.brand-story-grid,
    .grid-2col.mills-story-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .brand-story-content,
    .brand-story-visual,
    .mills-story-content,
    .mills-story-visual {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .btn {
        white-space: normal !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .filter-tabs {
        display: none !important;
    }

    .category-dropdown-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
        width: 100% !important;
    }

    .category-select-label {
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        min-width: 65px !important;
    }

    .select-styled-container {
        flex: 1 !important;
        position: relative !important;
        width: 100% !important;
    }

    .category-dropdown {
        width: 100% !important;
        padding: 0.65rem 1rem !important;
        border: 1.5px solid var(--border-color) !important;
        background: #ffffff !important;
        border-radius: var(--radius-sm) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23181b1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 1rem center !important;
        padding-right: 2.2rem !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
    }

    .category-dropdown:focus {
        border-color: var(--accent-bronze) !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(184, 139, 86, 0.2) !important;
    }

    .sort-selector {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
    }

    .sort-selector label {
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        min-width: 65px !important;
    }

    .sort-dropdown {
        flex: 1 !important;
        width: 100% !important;
        padding: 0.65rem 1rem !important;
        border: 1.5px solid var(--border-color) !important;
        background: #ffffff !important;
        border-radius: var(--radius-sm) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23181b1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 1rem center !important;
        padding-right: 2.2rem !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
    }

    .products-toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
        margin-bottom: 1.75rem !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 1.25rem !important;
    }
}

/* --------------------------------------------------------------------------
   6. SMALLER DEVICES (< 650PX) - DEDICATED MASTER SPECIFICATION
   -------------------------------------------------------------------------- */
@media (max-width: 650px) {

    /* Glassy cards: 100% transparent on mobile devices (< 650px) */
    .product-card,
    .glassmorphism,
    .hero-card,
    .modal-card,
    .hotspot-card,
    .newsletter-box,
    .newsletter-box.glassmorphism,
    .care-card,
    .story-card,
    .value-card,
    .feature-card,
    .archive-card,
    .press-card,
    .craft-card,
    .bulk-card {
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* Baseline layout & safe-area offsets */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    .container {
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .section-padding {
        padding: 2.75rem 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .section-header {
        margin-bottom: 1.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .section-title {
        font-size: clamp(1.55rem, 5.8vw, 2rem) !important;
        line-height: 1.25 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .section-subtitle {
        font-size: 0.68rem !important;
        letter-spacing: 0.16em !important;
        margin-bottom: 0.4rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .btn {
        white-space: normal !important;
        max-width: 100% !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Fixed mobile bottom bar */
    .mobile-bottom-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: 56px !important;
        padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom, 0px)) 0.5rem !important;
        background: rgba(251, 249, 245, 0.98) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(230, 226, 218, 0.9) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
        z-index: 1040 !important;
        justify-content: space-around !important;
        align-items: center !important;
    }

    .mob-bottom-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        text-decoration: none !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        padding: 2px 4px !important;
    }

    .mob-bottom-item.active,
    .mob-bottom-item:hover {
        color: var(--accent-bronze) !important;
    }

    .mob-badge {
        position: absolute !important;
        top: 2px !important;
        right: 6px !important;
        background: var(--accent-bronze) !important;
        color: #ffffff !important;
        font-size: 0.55rem !important;
        font-weight: 700 !important;
        width: 14px !important;
        height: 14px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* -----------------------------------------------------------------------
       HEADER: STRICT HAMBURGER FORM (WORKS PROPERLY ON < 650PX)
       ----------------------------------------------------------------------- */
    .main-header {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: rgba(251, 249, 245, 0.98) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .header-container {
        height: 60px !important;
        padding: 0 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-header.scrolled .header-container {
        height: 56px !important;
    }

    .main-nav {
        display: none !important;
    }

    .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4.5px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        margin-right: 4px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 1002 !important;
    }

    .hamburger-bar {
        width: 22px !important;
        height: 2px !important;
        background-color: var(--text-primary) !important;
        border-radius: 2px !important;
        transition: transform 0.25s ease, opacity 0.25s ease !important;
    }

    .mobile-menu-toggle.is-active .hamburger-bar:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.is-active .hamburger-bar:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.is-active .hamburger-bar:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg) !important;
    }

    .brand-logo {
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        text-decoration: none !important;
        min-width: 0 !important;
    }

    .logo-emblem {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }

    .logo-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    .logo-name {
        font-size: clamp(0.92rem, 3.8vw, 1.08rem) !important;
        letter-spacing: 0.1em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .logo-sub {
        font-size: 0.48rem !important;
        letter-spacing: 0.12em !important;
        white-space: nowrap !important;
    }

    .header-currency-box {
        display: none !important;
    }

    .header-actions {
        display: none !important;
    }

    .header-action-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
    }

    .header-action-btn .action-badge {
        width: 15px !important;
        height: 15px !important;
        font-size: 0.58rem !important;
        top: -1px !important;
        right: -1px !important;
    }

    /* Mobile Nav Drawer */
    .mobile-nav-drawer {
        width: min(340px, 86vw) !important;
        max-width: 86vw !important;
    }

    .mobile-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1.25rem 1.4rem !important;
    }

    .mobile-drawer-header .close-btn {
        margin-left: auto !important;
    }

    /* -----------------------------------------------------------------------
       HERO SECTION: PERFECTED FOR SMALLER DEVICES (< 650PX)
       ----------------------------------------------------------------------- */
    .hero-section {
        height: auto !important;
        min-height: auto !important;
        padding: 1.5rem 0 2.5rem 0 !important;
        background: #14171a !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .hero-slides-wrapper,
    .hero-slide {
        height: auto !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-bg {
        display: none !important;
    }

    .hero-content-wrapper {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        padding: 0 1rem !important;
    }

    .mobile-hero-visual {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        margin-bottom: 1.75rem !important;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
        aspect-ratio: 4/3 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .mobile-hero-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 30% !important;
        display: block !important;
    }

    .mobile-hero-badge-top {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        background: rgba(18, 21, 24, 0.88) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        color: #f3c285 !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        padding: 0.4rem 0.75rem !important;
        border-radius: 6px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    .mobile-hero-badge-bottom {
        position: absolute !important;
        bottom: 12px !important;
        right: 12px !important;
        background: rgba(184, 139, 86, 0.92) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        color: #ffffff !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        padding: 0.45rem 0.85rem !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        text-transform: uppercase !important;
    }

    .mobile-hero-badge-bottom strong {
        font-size: 0.95rem !important;
        margin-right: 0.2rem !important;
        font-family: var(--font-heading) !important;
    }

    .hero-card {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .hero-badge {
        font-size: 0.68rem !important;
        letter-spacing: 0.16em !important;
        color: #b88b56 !important;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        opacity: 1 !important;
    }

    .hero-title {
        font-family: var(--font-heading) !important;
        font-size: clamp(1.65rem, 5.8vw, 2.1rem) !important;
        line-height: 1.22 !important;
        color: #ffffff !important;
        margin-bottom: 0.9rem !important;
        font-weight: 600 !important;
        text-shadow: none !important;
    }

    .hero-description {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.75) !important;
        opacity: 0.92 !important;
        margin-bottom: 0.9rem !important;
        text-shadow: none !important;
    }

    .hero-subdescription {
        display: block !important;
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        opacity: 0.95 !important;
        margin-bottom: 1.5rem !important;
        text-shadow: none !important;
    }

    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 6px !important;
        font-size: 0.82rem !important;
        letter-spacing: 0.1em !important;
        box-shadow: none !important;
    }

    .hero-actions .btn-primary {
        background: #b88b56 !important;
        border: none !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    .hero-actions .btn-outline-light {
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    .hero-slider-controls {
        display: none !important;
    }

    /* -----------------------------------------------------------------------
       HERITAGE PILLARS STRIP
       ----------------------------------------------------------------------- */
    .heritage-strip {
        padding: 2rem 0 !important;
    }

    .heritage-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .heritage-item {
        gap: 0.85rem !important;
        align-items: flex-start !important;
    }

    .heritage-icon {
        color: var(--accent-bronze) !important;
        flex-shrink: 0 !important;
    }

    .heritage-text h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.2rem !important;
    }

    .heritage-text p {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
    }

    /* -----------------------------------------------------------------------
       CORE COLLECTIONS GRID
       ----------------------------------------------------------------------- */
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .category-card {
        height: 270px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .category-content {
        padding: 1.4rem 1.2rem !important;
    }

    .category-content h3 {
        font-size: 1.35rem !important;
    }

    /* -----------------------------------------------------------------------
       STORY 1: COMPANY HERITAGE & ORIGIN STORY (PROPERLY ARRANGED & MANAGED)
       ----------------------------------------------------------------------- */
    .brand-story-grid,
    .grid-2col.brand-story-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .brand-story-visual {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .brand-story-content {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .story-image-frame {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3) !important;
        box-sizing: border-box !important;
    }

    .story-main-img {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Scaled badges that never collide or cover the workshop photo */
    .story-glass-badge {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        padding: 0.35rem 0.75rem !important;
        background: rgba(22, 26, 30, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .story-glass-badge .badge-title {
        font-size: 0.7rem !important;
        letter-spacing: 0.12em !important;
        color: var(--accent-bronze) !important;
        font-weight: 700 !important;
    }

    .story-glass-badge .badge-sub {
        font-size: 0.55rem !important;
        letter-spacing: 0.08em !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .story-stat-card {
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
        padding: 0.4rem 0.8rem !important;
        background: rgba(184, 139, 86, 0.95) !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .story-stat-card .stat-num {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    .story-stat-card .stat-text {
        font-size: 0.58rem !important;
        line-height: 1.2 !important;
        max-width: 90px !important;
    }

    .lead-text {
        font-size: 0.96rem !important;
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .story-paragraph {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .story-pillars-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 1.5rem !important;
    }

    .pillar-card {
        padding: 0.85rem 1rem !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .pillar-text {
        flex: 1 !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .story-cta-row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .story-cta-row .btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0.9rem 1rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    /* -----------------------------------------------------------------------
       PRODUCTS SECTION & CATEGORIES SELECTION DROPDOWN CONVERSION
       ----------------------------------------------------------------------- */
    .filter-tabs {
        display: none !important;
    }

    .category-dropdown-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
        width: 100% !important;
    }

    .category-select-label {
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        min-width: 65px !important;
    }

    .select-styled-container {
        flex: 1 !important;
        position: relative !important;
        width: 100% !important;
    }

    .category-dropdown {
        width: 100% !important;
        padding: 0.65rem 1rem !important;
        border: 1.5px solid var(--border-color) !important;
        background: #ffffff !important;
        border-radius: var(--radius-sm) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23181b1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 1rem center !important;
        padding-right: 2.2rem !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
    }

    .category-dropdown:focus {
        border-color: var(--accent-bronze) !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(184, 139, 86, 0.2) !important;
    }

    .sort-selector {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
    }

    .sort-selector label {
        font-size: 0.84rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        white-space: nowrap !important;
        min-width: 65px !important;
    }

    .sort-dropdown {
        flex: 1 !important;
        width: 100% !important;
        padding: 0.65rem 1rem !important;
        border: 1.5px solid var(--border-color) !important;
        background: #ffffff !important;
        border-radius: var(--radius-sm) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23181b1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 1rem center !important;
        padding-right: 2.2rem !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
    }

    .products-toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
        margin-bottom: 1.75rem !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 1.25rem !important;
    }

    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .product-card {
        max-width: 380px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .product-actions-hover {
        opacity: 1 !important;
        transform: translateY(0) !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
        width: 100% !important;
    }

    .product-actions-hover .add-to-bag-btn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
    }

    .product-actions-hover .add-to-bag-btn .btn-text {
        display: none !important;
    }

    .product-actions-hover .add-to-bag-btn svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
        margin: 0 !important;
    }

    .product-actions-hover .quick-view-trigger {
        flex: 1 !important;
        height: 42px !important;
        padding: 0 0.8rem !important;
        font-size: 0.72rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
    }

    /* -----------------------------------------------------------------------
       STORY 2: ARTISAN MILLS GUILD STORY (PROPERLY ARRANGED & MANAGED)
       ----------------------------------------------------------------------- */
    .mills-story-grid,
    .grid-2col.mills-story-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mills-story-content {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mills-story-visual {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .craft-image-frame {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    }

    .mills-main-img {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        display: block !important;
    }

    .craft-badge {
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 0.35rem 0.75rem !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .craft-badge .badge-number {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: var(--accent-bronze) !important;
        line-height: 1 !important;
    }

    .craft-badge .badge-label {
        font-size: 0.62rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
    }

    .mill-story-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
        margin: 1.5rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mill-story-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid var(--border-color) !important;
        border-left: 3px solid var(--accent-bronze) !important;
        border-radius: 8px !important;
        padding: 1.15rem 1rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .mill-story-card .mill-tag {
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: var(--accent-bronze) !important;
        letter-spacing: 0.12em !important;
        display: block !important;
        margin-bottom: 0.25rem !important;
    }

    .mill-story-card h4 {
        font-size: 1.02rem !important;
        margin-bottom: 0.35rem !important;
        color: var(--text-primary) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .mill-story-card p {
        font-size: 0.84rem !important;
        color: var(--text-muted) !important;
        line-height: 1.55 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .mills-story-content .btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0.85rem 1rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
    }

    /* -----------------------------------------------------------------------
       STORY 3: EDITORIAL LOOKBOOK HOTSPOTS STORY (PROPERLY ARRANGED & MANAGED)
       ----------------------------------------------------------------------- */
    .lookbook-hero-container {
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .lookbook-hero-img {
        height: clamp(320px, 60vw, 420px) !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .hotspot-btn {
        width: 34px !important;
        height: 34px !important;
    }

    .hotspot-card {
        width: 190px !important;
        max-width: calc(100vw - 32px) !important;
        padding: 0.6rem !important;
        font-size: 0.78rem !important;
        transition: opacity 0.25s ease, transform 0.25s ease !important;
    }

    .hotspot.active .hotspot-card,
    .hotspot:hover .hotspot-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
        z-index: 50 !important;
    }

    .hotspot[data-product-id="prod-1"] .hotspot-card {
        top: 115% !important;
        bottom: auto !important;
    }

    .hotspot-card img {
        width: 48px !important;
        height: 60px !important;
    }

    .hotspot-info h5 {
        font-size: 0.78rem !important;
    }

    .lookbook-section .btn,
    .products-section .btn-outline-dark {
        width: 100% !important;
        max-width: 360px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center !important;
        padding: 0.85rem 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        line-height: 1.35 !important;
        font-size: 0.82rem !important;
    }

    .overlay-close {
        position: absolute !important;
        top: 1.25rem !important;
        right: 1.25rem !important;
        z-index: 3010 !important;
    }

    /* -----------------------------------------------------------------------
       PRESS & REVIEWS STORY
       ----------------------------------------------------------------------- */
    .press-slider-container {
        gap: 0.4rem !important;
        padding: 0 !important;
    }

    .press-nav-btn {
        font-size: 1.8rem !important;
        padding: 0.2rem !important;
    }

    .press-quote {
        font-size: clamp(1.05rem, 4vw, 1.35rem) !important;
        line-height: 1.5 !important;
        margin-bottom: 0.85rem !important;
    }

    .press-source {
        font-size: 0.72rem !important;
    }

    /* -----------------------------------------------------------------------
       NEWSLETTER
       ----------------------------------------------------------------------- */
    .newsletter-box.glassmorphism {
        padding: 2.25rem 1.25rem !important;
        border-radius: 12px !important;
    }

    .newsletter-content h2 {
        font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
    }

    .newsletter-content p {
        font-size: 0.88rem !important;
        margin-bottom: 1.5rem !important;
    }

    .newsletter-form .form-group {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .newsletter-form input[type="email"] {
        width: 100% !important;
        padding: 0.85rem 1rem !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .newsletter-form .btn {
        width: 100% !important;
        padding: 0.9rem !important;
    }

    /* -----------------------------------------------------------------------
       3-COLUMN FOOTER COLLAPSED TO 1 COLUMN WITH SAFE BOTTOM MARGIN
       ----------------------------------------------------------------------- */
    .footer-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 2.25rem !important;
        padding: 3rem 0 2rem 0 !important;
    }

    .footer-col {
        text-align: left !important;
    }

    .footer-social-icons {
        justify-content: flex-start !important;
    }

    .footer-newsletter-form .newsletter-input-group {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .footer-newsletter-form input,
    .footer-newsletter-form .btn-newsletter {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-bottom {
        padding: 1.2rem 0 calc(75px + env(safe-area-inset-bottom, 0px)) 0 !important;
    }

    .footer-bottom-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }

    /* Drawers & Modals on < 650px */
    .cart-drawer,
    .wishlist-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        border-left: none !important;
    }

    .modal-card {
        width: 95% !important;
        max-width: 95% !important;
        padding: 1.4rem 1rem !important;
        max-height: 88vh !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
    }

    .qv-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .qv-gallery img {
        height: 280px !important;
    }

    .care-steps-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   7. ULTRA-COMPACT MOBILE PHONES (<= 400PX)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    .container {
        padding: 0 0.75rem !important;
    }

    .header-container {
        height: 56px !important;
        padding: 0 0.65rem !important;
    }

    .logo-emblem {
        width: 30px !important;
        height: 30px !important;
    }

    .logo-name {
        font-size: 0.88rem !important;
    }

    .logo-sub {
        display: none !important;
    }

    .hero-card {
        padding: 1.35rem 0.85rem !important;
    }

    .hero-title {
        font-size: clamp(1.5rem, 5.5vw, 1.85rem) !important;
    }

    .modal-card {
        padding: 1.15rem 0.75rem !important;
    }
}

/* ==========================================================================
   IMAGE 5 CLIENT REVIEWS SECTION & CAROUSEL
   ========================================================================== */
.pdp-reviews-section {
    background: #fbf9f5;
    border-top: 1px solid #eee8df;
    border-bottom: 1px solid #eee8df;
    padding: 4.5rem 0;
}

.pdp-reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.2rem;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.pdp-reviews-title {
    font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
    font-size: 2.8rem;
    font-weight: 600;
    color: #1a1e21;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.pdp-reviews-avg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.reviews-stars-gold {
    color: #b88b56;
    font-size: 1.15rem;
    letter-spacing: 2px;
}

.reviews-avg-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555e68;
}

.btn-review-write {
    background: #8c3b31;
    color: #ffffff;
    border: none;
    padding: 0.7rem 1.6rem;
    font-family: var(--font-body, "Montserrat", sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(140, 59, 49, 0.25);
    position: relative;
    z-index: 10;
}

.btn-review-write:hover {
    background: #6e2c24;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(140, 59, 49, 0.35);
}

.pdp-reviews-carousel-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0 1.2rem 0;
}

.pdp-reviews-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

.pdp-reviews-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
}

.review-client-card {
    flex: 0 0 290px;
    width: 290px;
    background: #ffffff;
    border: 1px solid #ebe5db;
    border-radius: 8px;
    padding: 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.review-card-stars {
    color: #b88b56;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
}

.review-card-title {
    font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1e21;
    line-height: 1.25;
    margin-bottom: 0.6rem;
}

.review-card-body {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555e68;
    margin-bottom: 1.2rem;
    flex-grow: 1;
}

.review-fit-box {
    margin: 0.8rem 0 1.2rem 0;
    padding: 0.6rem 0;
    border-top: 1px dashed #ebe5db;
}

.review-fit-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a1e21;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}

.review-fit-line-wrap {
    position: relative;
    padding: 12px 0 4px 0;
}

.review-fit-line {
    height: 2px;
    background: #e2ded7;
    width: 100%;
    position: relative;
}

.review-fit-indicator {
    position: absolute;
    top: -2px;
    transform: translateX(-50%);
    font-size: 10px;
    color: #1a1e21;
    line-height: 1;
}

.review-fit-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 0.4rem;
}

.review-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0eae1;
    padding-top: 0.9rem;
    margin-top: auto;
}

.review-author {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1e21;
}

.review-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3b5c3f;
}

.verified-icon {
    width: 15px;
    height: 15px;
    background: #3b5c3f;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
}

.pdp-reviews-nav {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.pdp-reviews-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #dcd4c7;
    background: #ffffff;
    color: #8c3b31;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pdp-reviews-nav-btn:hover {
    background: #8c3b31;
    color: #ffffff;
    border-color: #8c3b31;
}

/* ==========================================================================
   WRITE A REVIEW MODAL (BESPOKE ATELIER LUXURY FORM)
   ========================================================================== */
.pdp-review-card {
    max-width: 540px !important;
    width: 94% !important;
    background: #ffffff !important;
    padding: 2.5rem 2.2rem !important;
    border-radius: 12px !important;
    color: #1a1e21 !important;
    z-index: 2005 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(226, 218, 206, 0.8) !important;
}

.review-modal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0eae1;
}

.review-modal-header .brand-sub {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9c6c39;
    font-weight: 700;
    display: block;
    margin-bottom: 0.3rem;
}

.review-modal-title {
    font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    color: #1a1e21;
    line-height: 1.15;
}

.review-modal-desc {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.review-modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.review-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
}

.review-form-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.req-star {
    color: #8c3b31;
    font-weight: 800;
}

.review-form-input,
.review-form-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 0.8rem 1rem !important;
    background: #faf8f5 !important;
    border: 1.5px solid #e5ded5 !important;
    border-radius: 6px !important;
    font-family: var(--font-body, "Montserrat", sans-serif) !important;
    font-size: 0.9rem !important;
    color: #1a1e21 !important;
    transition: all 0.2s ease !important;
}

.review-form-input:focus,
.review-form-textarea:focus {
    border-color: #9c6c39 !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3.5px rgba(156, 108, 57, 0.15) !important;
}

.review-form-input::placeholder,
.review-form-textarea::placeholder {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
}

.review-form-textarea {
    min-height: 110px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* Star rating picker */
.star-rating-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.2rem 0;
    flex-wrap: wrap;
}

.star-rating-picker {
    display: inline-flex;
    gap: 0.35rem;
    font-size: 2.1rem;
    cursor: pointer;
    color: #d1d5db;
    user-select: none;
    line-height: 1;
}

.star-pick {
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-block;
}

.star-pick.active,
.star-pick:hover {
    color: #c59b27;
}

.star-pick:hover {
    transform: scale(1.25);
}

.star-rating-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: #9c6c39;
    letter-spacing: 0.04em;
}

/* Fit pills */
.review-fit-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.fit-pill-lbl {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.fit-pill-lbl input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fit-pill-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.5rem;
    background: #faf8f5;
    border: 1.5px solid #e5ded5;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a5568;
    text-align: center;
    transition: all 0.2s ease;
}

.fit-pill-lbl:hover .fit-pill-box {
    border-color: #c9b08f;
    background: #fff;
    color: #1a1e21;
}

.fit-pill-lbl input[type="radio"]:checked+.fit-pill-box {
    background: #fdfbf7;
    border-color: #9c6c39;
    color: #8c3b31;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(156, 108, 57, 0.18);
}

/* Submit button */
.review-submit-btn {
    width: 100%;
    padding: 0.95rem 1.5rem;
    background: #1a1e21;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body, "Montserrat", sans-serif);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 4px 14px rgba(26, 30, 33, 0.18);
    margin-top: 0.5rem;
}

.review-submit-btn:hover {
    background: #8c3b31;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(140, 59, 49, 0.35);
}

.review-submit-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   IMAGE LIGHTBOX POPUP MODAL (FULL SCREEN ATELIER VIEWER)
   ========================================================================== */
#pdp-lightbox-modal,
.lightbox-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(10, 12, 14, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 1000000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeIn 0.22s ease-out;
}

#pdp-lightbox-modal.active,
#pdp-lightbox-modal[style*="display: flex"] {
    display: flex !important;
}

.lightbox-content {
    position: relative !important;
    width: 82vw !important;
    max-width: 1200px !important;
    height: 82vh !important;
    min-height: 520px !important;
    max-height: 82vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto !important;
    z-index: 1000001 !important;
}

#lightbox-img,
.lightbox-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    object-fit: contain !important;
    /* Full resolution, uncropped garment display */
    object-position: center !important;
    border-radius: 8px !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.75) !important;
    transform-origin: center center;
    will-change: transform;
}

@media (max-width: 768px) {
    .lightbox-content {
        width: 95vw !important;
        height: 85vh !important;
        min-height: 380px !important;
    }

    .lightbox-img-stage {
        height: 58vh !important;
        max-height: calc(85vh - 160px) !important;
    }

    #lightbox-img,
    .lightbox-img {
        min-height: auto !important;
    }

    .lightbox-toolbar {
        gap: 0.4rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    .lightbox-slider-wrap {
        width: 100px !important;
    }
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 1000003;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lightbox-close:hover {
    background: #ffffff;
    color: #121518;
    transform: scale(1.1);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 2.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000003;
    transition: all 0.2s ease;
    user-select: none;
}

.lightbox-nav-btn:hover {
    background: var(--accent-bronze, #9c6c39);
    border-color: var(--accent-bronze, #9c6c39);
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav-btn.prev {
    left: 28px;
}

.lightbox-nav-btn.next {
    right: 28px;
}

.lightbox-caption {
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-align: center;
    font-family: inherit;
    font-weight: 500;
}

.lightbox-counter {
    margin-top: 0.4rem;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.25rem 0.85rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lightbox-dots {
    display: flex;
    gap: 8px;
    margin-top: 0.65rem;
    align-items: center;
    justify-content: center;
}

.lightbox-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lightbox-dot.active {
    background: var(--accent-bronze, #9c6c39);
    border-color: var(--accent-bronze, #9c6c39);
    transform: scale(1.3);
}

.pdp-grid-img-box {
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
}

.pdp-grid-img-box::after {
    content: "⤢";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(18, 22, 26, 0.65);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(4px);
}

.pdp-grid-img-box:hover::after {
    opacity: 1;
    transform: scale(1.05);
}

/* Short form rating on You May Also Like cards */
.related-short-rating {
    font-size: 0.72rem;
    font-weight: 700;
    color: #b88b56;
    margin-top: 0.25rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ==========================================================================
   BESPOKE CLIENT REVIEW MODAL & FORM (IMAGE 5 ATELIER SPECIFICATION)
   ========================================================================== */
.modal-card.pdp-review-card {
    max-width: 520px !important;
    width: 92% !important;
    padding: 2.2rem 2.2rem 2.4rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(84, 68, 57, 0.16) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 70px rgba(18, 22, 26, 0.32), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
}

.modal-card.pdp-review-card::-webkit-scrollbar {
    width: 6px;
}

.modal-card.pdp-review-card::-webkit-scrollbar-thumb {
    background: #d4ccbf;
    border-radius: 3px;
}

.modal-close#pdp-review-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f7f5f2;
    border: 1px solid #e0deda;
    color: #544439;
    font-size: 1.15rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close#pdp-review-close:hover {
    background: #1c1611;
    border-color: #1c1611;
    color: #ffffff;
    transform: rotate(90deg);
}

.review-modal-header {
    margin-bottom: 1.4rem;
    text-align: left;
}

.review-modal-header .brand-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #544439;
    margin-bottom: 0.35rem;
}

.review-modal-title {
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-size: 1.95rem;
    font-weight: 700;
    color: #1c1611;
    letter-spacing: -0.015em;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}

.review-modal-desc {
    font-size: 0.88rem;
    color: #6e645a;
    line-height: 1.5;
    margin: 0;
}

.review-modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
}

.review-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    box-sizing: border-box;
}

.review-form-label {
    display: flex;
    align-items: center;
    font-size: 0.84rem;
    font-weight: 600;
    color: #2b231d;
    letter-spacing: 0.01em;
}

.review-form-label .req-star {
    color: #8c3b31;
    margin-left: 0.25rem;
    font-weight: 700;
}

.review-form-input,
.review-form-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 0.9rem !important;
    color: #1c1611 !important;
    background: #faf8f5 !important;
    border: 1px solid #d4ccbf !important;
    border-radius: 6px !important;
    padding: 0.72rem 0.95rem !important;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}

.review-form-input:hover,
.review-form-textarea:hover {
    border-color: #b88b56 !important;
    background: #ffffff !important;
}

.review-form-input:focus,
.review-form-textarea:focus {
    outline: none !important;
    border-color: #8c3b31 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(140, 59, 49, 0.12) !important;
}

.review-form-input::placeholder,
.review-form-textarea::placeholder {
    color: #9c9287 !important;
    font-style: normal !important;
}

.review-form-textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
}

/* Star Rating Interactive Picker */
.star-rating-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #faf8f5;
    border: 1px solid #d4ccbf;
    border-radius: 6px;
    padding: 0.6rem 0.95rem;
    box-sizing: border-box;
}

.star-rating-picker {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.star-pick {
    font-size: 1.6rem;
    color: #d8d0c4;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    user-select: none;
    line-height: 1;
}

.star-pick:hover {
    transform: scale(1.22);
}

.star-pick.active {
    color: #b88b56;
    text-shadow: 0 1px 3px rgba(184, 139, 86, 0.3);
}

.star-rating-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #6e645a;
    letter-spacing: 0.02em;
}

/* Segmented Fit Assessment Pills */
.review-fit-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.fit-pill-lbl {
    cursor: pointer;
    margin: 0;
    display: block;
    position: relative;
    width: 100%;
}

.fit-pill-lbl input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.fit-pill-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a3e35;
    background: #faf8f5;
    border: 1px solid #d4ccbf;
    border-radius: 6px;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.fit-pill-lbl:hover .fit-pill-box {
    border-color: #b88b56;
    background: #ffffff;
    color: #1c1611;
}

.fit-pill-lbl input[type="radio"]:checked+.fit-pill-box {
    background: #1c1611;
    border-color: #1c1611;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(28, 22, 17, 0.22);
    font-weight: 700;
}

/* Submit Review Button */
.review-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.95rem 1.5rem;
    background: #1c1611;
    color: #ffffff;
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(28, 22, 17, 0.2);
    box-sizing: border-box;
}

.review-submit-btn:hover {
    background: #8c3b31;
    box-shadow: 0 6px 20px rgba(140, 59, 49, 0.32);
    transform: translateY(-1px);
}

.review-submit-btn:active {
    transform: translateY(1px);
}

.review-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.review-submit-btn svg {
    transition: transform 0.2s ease;
}

.review-submit-btn:hover svg {
    transform: translateX(3px);
}

.review-submit-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: reviewSpin 0.65s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* ==========================================================================
   OVERALL RATINGS & COMMENDATIONS WIDGET (FILLS BUY BOX EMPTY SPACE)
   ========================================================================== */
.pdp-overall-ratings-widget {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(84, 68, 57, 0.14);
    box-sizing: border-box;
    width: 100%;
}

.overall-ratings-header {
    margin-bottom: 0.65rem;
}

.overall-ratings-header .brand-sub {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8c3b31;
    margin-bottom: 0.15rem;
}

.overall-ratings-title {
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-size: 1.22rem;
    font-weight: 700;
    color: #1c1611;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}

.overall-score-card {
    background: #faf8f5;
    border: 1px solid rgba(84, 68, 57, 0.12);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.overall-score-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.overall-score-num {
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-size: 2.1rem;
    font-weight: 700;
    color: #1c1611;
    line-height: 1;
}

.overall-score-denom {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.score-out-of {
    font-size: 0.78rem;
    font-weight: 600;
    color: #726357;
}

.overall-stars-gold {
    color: #b88b56;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(184, 139, 86, 0.2);
}

.overall-recommend-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: #245840;
    margin-bottom: 0.2rem;
}

.overall-recommend-badge .recommend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #e4f3eb;
    color: #245840;
    font-size: 0.68rem;
    font-weight: 800;
}

.overall-count-sub {
    font-size: 0.72rem;
    color: #726357;
    font-style: italic;
}

/* Distribution Breakdown Bars */
.rating-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    background: #ffffff;
    border: 1px solid #ebe5dc;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    color: #4a3e35;
}

.star-lbl {
    width: 28px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.bar-track {
    flex: 1;
    height: 5px;
    background: #f0ece5;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b88b56, #8c3b31);
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.bar-count {
    width: 20px;
    text-align: right;
    font-weight: 600;
    color: #726357;
    font-size: 0.72rem;
}

/* Quick Actions */
.overall-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

.btn-overall-view-reviews {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    background: #faf8f5;
    border: 1px solid #d4ccbf;
    border-radius: 6px;
    color: #1c1611;
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-overall-view-reviews:hover {
    background: #ffffff;
    border-color: #8c3b31;
    color: #8c3b31;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.btn-overall-write-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    background: #1c1611;
    border: 1px solid #1c1611;
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-overall-write-review:hover {
    background: #8c3b31;
    border-color: #8c3b31;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(140, 59, 49, 0.25);
}

/* ==========================================================================
   ATELIER LUXURY PAGINATION SYSTEM (SHOP & MAGAZINE PAGES)
   ========================================================================== */
.atelier-pagination-wrapper {
    margin: 3.5rem auto 1.5rem;
    padding: 2rem 1rem 0;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
}

.atelier-pagination-info {
    font-size: 0.84rem;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
}

.atelier-pagination-info strong {
    color: #0f172a;
    font-weight: 700;
}

.atelier-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #ffffff;
    padding: 0.4rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.atelier-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid transparent;
    color: #334155;
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    text-decoration: none;
}

.atelier-page-btn:hover:not(:disabled):not(.active) {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.atelier-page-btn.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.atelier-page-btn:disabled,
.atelier-page-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
}

.atelier-page-btn.direction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.95rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.atelier-page-btn.direction-btn svg {
    transition: transform 0.2s ease;
}

.atelier-page-btn.prev-btn:hover:not(:disabled) svg {
    transform: translateX(-2px);
}

.atelier-page-btn.next-btn:hover:not(:disabled) svg {
    transform: translateX(2px);
}

.atelier-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.1em;
    user-select: none;
}

@media (max-width: 640px) {
    .atelier-pagination-wrapper {
        margin: 2.5rem auto 1rem;
        padding-top: 1.5rem;
        gap: 1rem;
    }

    .atelier-pagination-nav {
        padding: 0.3rem 0.4rem;
        gap: 0.25rem;
    }

    .atelier-page-btn {
        min-width: 36px;
        height: 36px;
        font-size: 0.82rem;
        padding: 0 0.5rem;
    }

    .atelier-page-btn.direction-btn {
        padding: 0 0.65rem;
    }

    .atelier-page-btn.direction-btn span {
        display: none;
        /* Icon only on compact mobile */
    }
}

/* ========================================================================== */
/* ADMIN DASHBOARD 12-ITEM PAGINATION SYSTEM                                  */
/* ========================================================================== */
.admin-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    font-size: 0.85rem;
}

.admin-pagination-info {
    color: #475569;
    font-size: 0.84rem;
}

.admin-pagination-info strong {
    color: #0f172a;
    font-weight: 700;
}

.admin-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.admin-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1;
}

.admin-page-btn:hover:not(:disabled):not(.active) {
    background: #f8fafc;
    border-color: #b88b56;
    color: #b88b56;
}

.admin-page-btn.active {
    background: #b88b56;
    border-color: #966e3f;
    color: #ffffff;
    cursor: default;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(184, 139, 86, 0.3);
}

.admin-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #e2e8f0;
    color: #94a3b8;
    background: #f8fafc;
}

.admin-page-btn.direction-btn {
    padding: 0 10px;
    font-size: 0.8rem;
    gap: 4px;
}

.admin-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 32px;
    color: #94a3b8;
    font-weight: 700;
}

/* ==========================================================================
   ATELIER PATRON ACCOUNT PORTAL & AUTH MODAL STYLING
   ========================================================================== */
.atelier-account-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: 16px;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.atelier-account-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.atelier-account-dialog {
    background: #ffffff;
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(184, 139, 86, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    font-family: inherit;
}

.atelier-account-modal.active .atelier-account-dialog {
    transform: scale(1) translateY(0);
}

.atelier-account-header {
    background: linear-gradient(135deg, #181b1e 0%, #24292e 100%);
    color: #ffffff;
    padding: 1.5rem 1.75rem;
    position: relative;
    border-bottom: 2px solid #b88b56;
}

.atelier-account-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.atelier-account-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.atelier-account-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.atelier-account-crest {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #b88b56;
    color: #181b1e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.4);
    flex-shrink: 0;
}

.atelier-account-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.atelier-auth-nav-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    gap: 8px;
}

.atelier-auth-nav-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.atelier-auth-nav-btn.active {
    color: #181b1e;
    border-bottom-color: #b88b56;
}

.atelier-form-group {
    margin-bottom: 1.15rem;
}

.atelier-form-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #334155;
    margin-bottom: 0.4rem;
}

.atelier-form-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.atelier-form-input:focus {
    outline: none;
    border-color: #b88b56;
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.18);
}

.atelier-btn-submit {
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: #181b1e;
    color: #ffffff;
    border: 1px solid #181b1e;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.atelier-btn-submit:hover {
    background: #2b3036;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* AVATAR PICKER ROW */
.atelier-avatar-presets {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}

.atelier-preset-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #181b1e;
}

.atelier-preset-avatar.selected {
    border-color: #b88b56;
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.35);
}

/* LOGGED IN PATRON DASHBOARD TABS */
.patron-portal-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    padding-bottom: 4px;
}

.patron-tab-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    border: none;
    background: #f1f5f9;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.patron-tab-btn.active {
    background: #181b1e;
    color: #ffffff;
}

/* ORDER TRACKER PIPELINE */
.order-tracker-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.order-tracker-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 1.5rem 0 1rem 0;
}

.order-tracker-steps::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #cbd5e1;
    z-index: 1;
}

.order-step-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.order-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #94a3b8;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.order-step-node.completed .order-step-dot {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.order-step-node.active .order-step-dot {
    background: #b88b56;
    border-color: #b88b56;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(184, 139, 86, 0.25);
}

.order-step-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

/* REVIEWS AVATAR & HEADER STYLING */
.review-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #d4af37;
    background: #181b1e;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.header-account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #d4af37;
    display: inline-block;
    vertical-align: middle;
}

.header-account-monogram {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #181b1e;
    color: #d4af37;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #d4af37;
    vertical-align: middle;
}

/* ==========================================================================
   BAG DRAWER TABS & CLIENT ORDER TRACKING / CANCELLATION
   ========================================================================== */
.cart-nav-tabs {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--border-color, #e6e2da);
    padding: 0.25rem 0.75rem 0;
    gap: 0.35rem;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cart-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.9rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #71717a);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.cart-tab-btn:hover {
    color: var(--text-primary, #181b1e);
}

.cart-tab-btn.active {
    color: var(--text-primary, #181b1e);
    border-bottom-color: var(--accent-bronze, #b88b56);
    font-weight: 700;
}

.cart-tab-btn svg {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.cart-tab-btn.active svg {
    opacity: 1;
    color: var(--accent-bronze, #b88b56);
}

.bag-tab-badge {
    background: var(--accent-bronze, #b88b56);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.2;
}

.cart-tab-view {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

.cart-tab-view.active {
    display: flex;
}

/* Orders in Bag Drawer */
.bag-orders-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-card-in-bag {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.order-card-in-bag:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
}

.order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.order-num-group {
    display: flex;
    flex-direction: column;
}

.order-card-id {
    font-family: var(--font-heading, serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #181b1e);
    letter-spacing: 0.02em;
}

.order-card-date {
    font-size: 0.74rem;
    color: var(--text-muted, #71717a);
    margin-top: 2px;
}

.order-client-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.order-client-status-badge.pending {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.order-client-status-badge.confirmed {
    background: #fdf6ec;
    color: #b88b56;
    border: 1px solid #f2e2cb;
}

.order-client-status-badge.processing,
.order-client-status-badge.tailoring {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.order-client-status-badge.inspected,
.order-client-status-badge.shipped,
.order-client-status-badge.dispatched {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.order-client-status-badge.completed,
.order-client-status-badge.delivered {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.order-client-status-badge.cancelled {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Order Progress Timeline */
.order-progress-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.9rem 0 1rem;
    position: relative;
    padding: 0 4px;
}

.order-progress-stepper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    right: 8px;
    height: 2px;
    background: #e5e7eb;
    transform: translateY(-50%);
    z-index: 1;
}

.order-progress-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    transition: all 0.3s ease;
}

.order-progress-step.done .step-dot {
    background: var(--accent-bronze, #b88b56);
    border-color: var(--accent-bronze, #b88b56);
}

.order-progress-step.active .step-dot {
    background: #ffffff;
    border-color: var(--accent-bronze, #b88b56);
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.25);
    animation: stepPulse 1.8s infinite;
}

@keyframes stepPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.step-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.order-progress-step.done .step-label,
.order-progress-step.active .step-label {
    color: var(--text-primary, #181b1e);
    font-weight: 700;
}

/* Items Preview within Order Card */
.order-card-items-preview {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.65rem 0;
    margin: 0.6rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.order-mini-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.order-mini-img {
    width: 40px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.order-mini-meta {
    flex-grow: 1;
    min-width: 0;
}

.order-mini-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #181b1e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-mini-sub {
    font-size: 0.7rem;
    color: var(--text-muted, #71717a);
}

.order-mini-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary, #181b1e);
    flex-shrink: 0;
}

.order-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.25rem;
}

.order-card-total-box {
    display: flex;
    flex-direction: column;
}

.order-card-total-lbl {
    font-size: 0.68rem;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.order-card-total-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent-bronze, #b88b56);
}

.btn-cancel-client-order {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #fff;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-client-order:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.order-live-sync-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: rgba(184, 139, 86, 0.08);
    border-radius: 6px;
    font-size: 0.72rem;
    color: var(--text-primary, #181b1e);
    margin-bottom: 0.5rem;
}

.order-live-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.3);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ==========================================================================
   ATELIER SEO, AEO & GEO SCORE DESK & CONTROLS (PRODUCTS & MAGAZINES)
   ========================================================================== */
.admin-seo-score-postbox {
    background: #ffffff;
    border: 1px solid #e2ddd3;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(22, 25, 28, 0.06);
    overflow: hidden;
    position: sticky;
    top: 55px;
    z-index: 20;
    transition: all 0.3s ease;
}

.admin-seo-score-postbox:hover {
    box-shadow: 0 8px 30px rgba(184, 139, 86, 0.12);
}

.seo-score-header-dark {
    background: linear-gradient(135deg, #181b1e 0%, #2a2d32 100%);
    color: #fbf9f5;
    padding: 1.1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #b88b56;
}

.seo-gauge-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.seo-gauge-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: conic-gradient(#10b981 0% 85%, rgba(255, 255, 255, 0.15) 85% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background 0.5s ease;
}

.seo-gauge-circle::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #181b1e;
}

.seo-gauge-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.seo-gauge-num {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em;
}

.seo-gauge-lbl {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: #d6ad7a;
    font-weight: 700;
}

.seo-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid currentColor;
}

.seo-grade-badge.grade-aplus {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
}

.seo-grade-badge.grade-a {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.4);
}

.seo-grade-badge.grade-b {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
}

.seo-grade-badge.grade-c {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

.seo-pillars-container {
    padding: 1rem 1.25rem;
    background: #fbf9f5;
    border-bottom: 1px solid #e8e3da;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pillar-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pillar-row-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: #475569;
    font-weight: 600;
}

.pillar-bar-bg {
    width: 100%;
    height: 7px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.pillar-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #b88b56 0%, #10b981 100%);
    transition: width 0.4s ease;
}

.seo-checklist-box {
    max-height: 290px;
    overflow-y: auto;
    padding: 0.8rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: #ffffff;
}

.seo-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 0.75rem;
    line-height: 1.35;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    color: #334155;
    transition: all 0.2s ease;
}

.seo-check-item.passed {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.seo-check-item.warn {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.seo-check-item.fail {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.seo-check-icon {
    font-size: 0.85rem;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
}

.seo-score-actions {
    padding: 0.85rem 1.25rem;
    background: #fdfbf7;
    border-top: 1px solid #e8e3da;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Standarized Title Formula Bar */
.seo-formula-card {
    background: #fdfbf7;
    border: 1px solid #e8e3da;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.seo-formula-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.formula-chip {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.formula-chip.filled {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}

/* Word Counter & Signal Tags */
.editorial-counter-badge {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 12px;
    font-weight: 700;
}

.editorial-counter-badge.optimal {
    background: #dcfce7;
    color: #15803d;
}

.editorial-counter-badge.suboptimal {
    background: #fef3c7;
    color: #b45309;
}

.editorial-signal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.editorial-signal-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.editorial-signal-tag.active {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
}

/* FAQ Builder in Admin */
.admin-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.admin-faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

.admin-faq-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 3px;
}

.admin-faq-remove:hover {
    background: #fee2e2;
}

/* ==========================================================================
   ATELIER MULTI-STEP WORKFLOW WIZARD (PRODUCTS & MAGAZINE ARTICLES)
   ========================================================================== */
.atelier-stepper-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e8e3da;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    overflow-x: auto;
    position: relative;
    gap: 0.5rem;
}

.stepper-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.stepper-step:hover {
    background: #fdfbf7;
    border-color: #f1ebd8;
}

.stepper-step.active {
    background: #fcf9f2;
    border: 1px solid #d4af37;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.12);
}

.stepper-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #cbd5e1;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.stepper-step.active .stepper-num {
    background: #b88b56;
    color: #ffffff;
    border-color: #b88b56;
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.2);
}

.stepper-step.completed .stepper-num {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.stepper-meta {
    display: flex;
    flex-direction: column;
}

.stepper-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.2;
}

.stepper-step.active .stepper-title {
    color: #1e293b;
}

.stepper-sub {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.2;
    margin-top: 2px;
}

.stepper-step.active .stepper-sub {
    color: #b88b56;
    font-weight: 600;
}

.stepper-divider {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    margin: 0 0.4rem;
    min-width: 12px;
}

/* Step Panes: Hide non-active panes to prevent visual clutter */
.stepper-pane {
    display: none;
}

.stepper-pane.active {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: fadeInStep 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Navigation Footer */
.step-nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e8e3da;
    border-radius: 8px;
    padding: 1rem 1.4rem;
    margin-top: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.step-nav-footer .step-indicator-text {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.step-summary-card {
    background: #fdfbf7;
    border: 1px solid #e8e3da;
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.step-summary-thumb {
    width: 80px;
    height: 100px;
    border-radius: 6px;
    object-fit: cover;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    flex-shrink: 0;
}

.step-summary-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.step-summary-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    color: #1e293b;
    font-weight: 700;
}

.step-summary-badge-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

/* Step 5 Master Audit & Release Dashboard Grid */
.atelier-step-audit-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1080px) {
    .atelier-step-audit-grid {
        grid-template-columns: 1fr;
    }
}

.step-card-header-luxury {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.step-card-header-luxury h3 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    color: #1e293b;
    font-weight: 700;
}

.step-card-header-luxury p {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

/* ==========================================================================
   ATELIER ADMIN DESK - MASTER HOVER & UI DESIGN SYSTEM
   ========================================================================== */

/* 1. Change Cover & Small Action Buttons */
.btn-atelier-cover-change,
button.button-small.btn-atelier-cover-change {
    font-size: 0.74rem !important;
    width: 100% !important;
    padding: 6px 10px !important;
    height: auto !important;
    line-height: 1.3 !important;
    background: #ffffff !important;
    border: 1px solid #b88b56 !important;
    color: #b88b56 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.btn-atelier-cover-change:hover,
button.button-small.btn-atelier-cover-change:hover {
    background: #b88b56 !important;
    color: #ffffff !important;
    border-color: #9e7340 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.3) !important;
}

.btn-atelier-cover-change:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* 2. Master Admin Buttons Hover Engine (.button, .button-small, .button-primary) */
.wp-admin-body .button,
.wp-admin-body button.button,
.wp-admin-body a.button {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.wp-admin-body .button:hover,
.wp-admin-body button.button:hover,
.wp-admin-body a.button:hover {
    background: #b88b56 !important;
    color: #ffffff !important;
    border-color: #b88b56 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.25) !important;
}

.wp-admin-body .button:hover *,
.wp-admin-body button.button:hover *,
.wp-admin-body a.button:hover * {
    color: #ffffff !important;
}

.wp-admin-body .button:active,
.wp-admin-body button.button:active {
    transform: translateY(0);
    box-shadow: none;
}

.wp-admin-body .button-primary {
    background: linear-gradient(135deg, #b88b56 0%, #9e7340 100%) !important;
    border-color: #9e7340 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(184, 139, 86, 0.25) !important;
}

.wp-admin-body .button-primary:hover {
    background: linear-gradient(135deg, #9e7340 0%, #835d2d 100%) !important;
    border-color: #835d2d !important;
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(184, 139, 86, 0.4) !important;
    transform: translateY(-1px) !important;
}

.wp-admin-body .button-primary:hover *,
.button-primary:hover * {
    color: #ffffff !important;
}

/* SMTP Guide Tabs & Specialized Admin Buttons Hover Rules */
.smtp-guide-tab:hover {
    background: #b88b56 !important;
    color: #ffffff !important;
    border-color: #b88b56 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.25) !important;
}

.smtp-guide-tab:hover * {
    color: #ffffff !important;
}

.smtp-guide-tab.active:hover {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #1e293b !important;
}

.page-title-action:hover {
    background: #b88b56 !important;
    color: #ffffff !important;
    border-color: #b88b56 !important;
    box-shadow: 0 4px 12px rgba(184, 139, 86, 0.3) !important;
}

.page-title-action:hover * {
    color: #ffffff !important;
}

/* 3. Media Library & Choice Modal Cards Hover */
.media-library-card,
#btn-choice-upload-device,
#btn-choice-media-library {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.media-library-card:hover,
#btn-choice-upload-device:hover,
#btn-choice-media-library:hover {
    border-color: #b88b56 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(184, 139, 86, 0.2) !important;
}

/* 4. Admin Sidebar & Navigation Tabs Hover */
.wp-tab-link,
[data-wp-tab],
.word-tab-nav-btn {
    transition: all 0.2s ease-in-out;
}

.wp-tab-link:hover,
[data-wp-tab]:hover {
    color: #b88b56;
    background: rgba(184, 139, 86, 0.08);
}

/* 5. Article & Product Action Buttons Hover */
.btn-edit-post:hover {
    background: #b88b56 !important;
    color: #ffffff !important;
    border-color: #9e7340 !important;
}

.btn-delete-post:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* 6. Step Summary Card & Cover Image Hover */
#post-summary-img {
    transition: all 0.2s ease-in-out;
}

#post-summary-img:hover {
    border-color: #b88b56 !important;
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(184, 139, 86, 0.25) !important;
}

/* 7. Global Caret Blinking & Text Selection Glitch Fix */
body,
div,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
label,
button,
a,
section,
article,
header,
footer,
nav,
aside,
table,
tr,
th,
td,
ul,
ol,
li,
.postbox,
.card,
.step-summary-card,
.badge,
.stat-card,
.wp-tab-link,
.word-tb-btn,
.word-tab-nav-btn {
    caret-color: transparent;
}

/* Enable blinking caret strictly inside text inputs, textareas, select dropdowns, and WYSIWYG editor */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable="true"] *,
.wp-input,
.admin-auth-input,
#post-editor-wysiwyg,
#post-editor-wysiwyg * {
    caret-color: auto !important;
}

/* Prevent accidental focus outline / caret box on non-input containers */
div:not([contenteditable="true"]):focus,
span:not([contenteditable="true"]):focus,
p:not([contenteditable="true"]):focus,
label:focus,
td:focus,
th:focus {
    outline: none !important;
    caret-color: transparent !important;
}

/* Prevent accidental focus outline / caret box on non-input containers */
div:not([contenteditable="true"]):focus,
span:not([contenteditable="true"]):focus,
p:not([contenteditable="true"]):focus,
label:focus,
td:focus,
th:focus {
    outline: none !important;
    caret-color: transparent !important;
}

/* ==========================================================================
   ATELIER LUXURY BRAND LANDING PRELOADER & OVERLAY
   ========================================================================== */
#site-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: #07080a;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease, visibility 0.75s ease;
    pointer-events: auto;
    overflow: hidden;
    user-select: none;
}

#site-preloader .preloader-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(7, 8, 10, 0.62), rgba(7, 8, 10, 0.78)), url('assets/images/craftsmanship_hero.jpg') no-repeat center center / cover;
    opacity: 0.65;
    filter: blur(2px);
    transform: scale(1.04);
    pointer-events: none;
    animation: preloaderBgZoom 20s ease-in-out infinite alternate;
}

#site-preloader .preloader-aura {
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at center, rgba(184, 139, 86, 0.22) 0%, rgba(184, 139, 86, 0.06) 45%, transparent 72%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: preloaderAuraPulse 3.5s infinite ease-in-out;
}

#site-preloader.fade-out {
    opacity: 0 !important;
    transform: scale(1.05) !important;
    filter: blur(10px) !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.preloader-brand-box {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem;
    max-width: 680px;
    width: 100%;
}

/* Official Logo Emblem Container */
.preloader-emblem-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(184, 139, 86, 0.55);
    animation: preloaderRingSpin 14s linear infinite;
    box-shadow: 0 0 20px rgba(184, 139, 86, 0.15);
}

.preloader-ring-inner {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.25);
    animation: preloaderRingSpin 9s linear infinite reverse;
}

.preloader-emblem-gold {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(22, 26, 30, 0.96), rgba(10, 12, 14, 0.98));
    border: 1.5px solid rgba(184, 139, 86, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 35px rgba(184, 139, 86, 0.35), inset 0 0 20px rgba(184, 139, 86, 0.2);
    padding: 14px;
    transition: transform 0.3s ease;
}

.preloader-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(184, 139, 86, 0.65));
}

.preloader-title {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 2.1rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 0.45rem 0;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 15px rgba(184, 139, 86, 0.25);
}

.preloader-sub {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #d4af37;
    margin: 0 0 1.4rem 0;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Heritage Brand Description Card */
.preloader-heritage-card {
    background: rgba(16, 20, 24, 0.65);
    border: 1px solid rgba(184, 139, 86, 0.28);
    border-radius: 12px;
    padding: 1.1rem 1.8rem;
    margin-bottom: 1.8rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    max-width: 520px;
    width: 100%;
}

.preloader-heritage-desc {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 0.86rem;
    line-height: 1.65;
    color: rgba(235, 235, 235, 0.9);
    font-style: italic;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Progress Track & Header */
.preloader-bar-section {
    width: 100%;
    max-width: 380px;
    margin-bottom: 1.6rem;
}

.preloader-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding: 0 2px;
}

.preloader-tagline {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(184, 139, 86, 0.9);
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
}

.preloader-pct {
    font-family: 'Inter', monospace, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(184, 139, 86, 0.5);
}

.preloader-bar-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.preloader-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #b88b56 0%, #fff2d6 50%, #b88b56 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 16px rgba(184, 139, 86, 0.75);
    animation: preloaderShimmer 2s infinite linear;
}

/* Heritage Badges */
.preloader-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.preloader-badge {
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(225, 225, 225, 0.7);
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(184, 139, 86, 0.22);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.preloader-badge .badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b88b56;
    box-shadow: 0 0 6px #b88b56;
}

/* Minimal Quick Loader Mode: completely disabled so plain black screen is eliminated */
#site-preloader.minimal-loader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@keyframes preloaderBgZoom {
    0% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1.12);
    }
}

@keyframes preloaderAuraPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.85;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes preloaderRingSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes preloaderShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ==========================================================================
   ATELIER SUB-PAGES LUXURY DESIGN & INTERACTIVE COMPONENTS
   ========================================================================== */

/* 1. Page Title Hero Header */
.lux-subpage-hero {
    position: relative;
    padding: 5.5rem 0 4rem;
    background: linear-gradient(135deg, #121518 0%, #1a1e23 100%);
    border-bottom: 1px solid rgba(184, 139, 86, 0.2);
    overflow: hidden;
}

.lux-subpage-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(circle, rgba(184, 139, 86, 0.08) 0%, transparent 65%);
    pointer-events: none;
}

.lux-subpage-hero .hero-card-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.lux-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem;
    background: rgba(184, 139, 86, 0.12);
    border: 1px solid rgba(184, 139, 86, 0.35);
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent-bronze, #b88b56);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.lux-subpage-hero h1 {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 2.8rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.lux-subpage-hero p {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

/* 2. Interactive Return & Exchange Portal Widget */
.returns-portal-wrapper {
    background: linear-gradient(145deg, #ffffff 0%, #fbf9f5 100%);
    border: 1px solid rgba(184, 139, 86, 0.25);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    margin-bottom: 3.5rem;
}

.portal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.portal-title-group h3 {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.6rem;
    color: #16191c;
    margin: 0 0 0.3rem 0;
}

.portal-title-group p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.portal-badge-strip {
    display: flex;
    gap: 0.75rem;
}

.portal-badge {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    background: rgba(184, 139, 86, 0.1);
    color: var(--accent-bronze, #b88b56);
    border: 1px solid rgba(184, 139, 86, 0.25);
}

.portal-input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.portal-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.portal-field-group label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #333;
}

.portal-field-group input,
.portal-field-group select {
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: var(--font-sans), sans-serif;
    font-size: 0.95rem;
    color: #16191c;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.portal-field-group input:focus,
.portal-field-group select:focus {
    border-color: var(--accent-bronze, #b88b56);
    outline: none;
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.15);
}

.portal-result-card {
    background: #16191c;
    color: #fff;
    border-radius: 8px;
    padding: 1.8rem;
    margin-top: 1.5rem;
    display: none;
    animation: fadeInSlideUp 0.3s ease-out forwards;
}

.portal-result-card.active {
    display: block;
}

.result-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 1rem;
}

.result-status-header h4 {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    color: var(--accent-gold, #d4af37);
    margin: 0;
}

.eligibility-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #22c55e;
    color: #000;
}

/* 3. Visual 4-Step Process Cards */
.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0;
}

.process-step-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.8rem;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.process-step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-bronze, #b88b56);
}

.step-num-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(184, 139, 86, 0.12);
    color: var(--accent-bronze, #b88b56);
    font-family: var(--font-heading), serif;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.process-step-card h4 {
    font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    color: #16191c;
    margin-bottom: 0.6rem;
}

.process-step-card p {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 4. Sticky Layout & Terms Sidebar Navigation */
.terms-page-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 992px) {
    .terms-page-layout {
        grid-template-columns: 1fr;
    }
}

.terms-sidebar-sticky {
    position: sticky;
    top: 100px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.sidebar-title {
    font-family: var(--font-heading), serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16191c;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
}

.toc-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.toc-nav-link {
    display: block;
    padding: 0.55rem 0.85rem;
    border-radius: 4px;
    font-size: 0.86rem;
    color: #4b5563;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.toc-nav-link:hover,
.toc-nav-link.active {
    background: rgba(184, 139, 86, 0.12);
    color: var(--accent-bronze, #b88b56);
    font-weight: 600;
}

.terms-search-wrapper {
    margin-bottom: 2rem;
    position: relative;
}

.terms-search-input {
    width: 100%;
    padding: 0.95rem 1.25rem 0.95rem 3rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 30px;
    font-size: 0.95rem;
    color: #16191c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.terms-search-input:focus {
    border-color: var(--accent-bronze, #b88b56);
    box-shadow: 0 6px 20px rgba(184, 139, 86, 0.15);
    outline: none;
}

.terms-search-icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
}

.term-section-block {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 8px;
    padding: 2.2rem;
    margin-bottom: 1.8rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.term-section-block:hover {
    border-color: rgba(184, 139, 86, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.term-section-block.highlight {
    border-color: var(--accent-bronze, #b88b56);
    background: #fffcf8;
}

.term-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.term-section-header h3 {
    font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
    font-size: 1.35rem;
    color: #16191c;
    margin: 0;
}

.term-number-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-bronze, #b88b56);
    letter-spacing: 0.1em;
    background: rgba(184, 139, 86, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

/* 5. Interactive Cookie & Privacy Preferences Control Panel */
.cookie-prefs-panel {
    background: #ffffff;
    border: 1px solid rgba(184, 139, 86, 0.25);
    border-radius: 10px;
    padding: 2.2rem;
    margin-bottom: 3rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
}

.pref-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pref-switch-row:last-child {
    border-bottom: none;
}

.pref-info-box h4 {
    font-family: var(--font-heading), serif;
    font-size: 1.08rem;
    color: #16191c;
    margin: 0 0 0.3rem 0;
}

.pref-info-box p {
    font-size: 0.88rem;
    color: #666;
    margin: 0;
}

/* Custom Toggle Switch */
.toggle-switch-wrapper {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

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

.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 30px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked+.switch-slider {
    background-color: var(--accent-bronze, #b88b56);
}

input:checked+.switch-slider:before {
    transform: translateX(22px);
}

input:disabled+.switch-slider {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 6. Craftsmanship Fabric Master Interactive Explorer */
.fabric-explorer-wrapper {
    margin: 3rem 0;
}

.fabric-swatch-nav {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.8rem;
    scrollbar-width: none;
}

.fabric-swatch-nav::-webkit-scrollbar {
    display: none;
}

.swatch-tab-btn {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 1rem 1.4rem;
    font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
    font-size: 1.05rem;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.swatch-tab-btn:hover,
.swatch-tab-btn.active {
    background: #16191c;
    color: #ffffff;
    border-color: #16191c;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.swatch-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.fabric-detail-display {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 2.5rem;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

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

.fabric-display-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.fabric-display-info h3 {
    font-family: var(--font-heading), 'Playfair Display', Georgia, serif;
    font-size: 1.8rem;
    color: #16191c;
    margin-bottom: 0.8rem;
}

.fabric-prop-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.fabric-prop-item {
    font-size: 0.9rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fabric-prop-item::before {
    content: "✦";
    color: var(--accent-bronze, #b88b56);
}

/* 7. Garment Anatomy Hotspot Interactive Section */
.anatomy-interactive-box {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.anatomy-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

.hotspot-pin {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(184, 139, 86, 0.85);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease, background 0.2s ease;
}

.hotspot-pin:hover {
    transform: scale(1.2);
    background: var(--accent-bronze, #b88b56);
}

.hotspot-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #16191c;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.82rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.hotspot-pin:hover+.hotspot-tooltip,
.hotspot-pin:focus+.hotspot-tooltip {
    opacity: 1;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
    PATRON PORTAL POP-UP MODAL BOX
   ========================================================================== */
.account-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(8, 10, 12, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.account-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.account-modal-box {
    position: relative;
    max-width: 480px;
    width: 95%;
    max-height: 90vh;
    background: #ffffff;
    border: 1px solid #e5dfd5;
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 40px rgba(184, 139, 86, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.94) translateY(12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.35s ease, height 0.35s ease;
}

.account-modal-box.logged-in-portal {
    max-width: 1020px !important;
    width: 95% !important;
    height: 670px !important;
    min-height: 560px !important;
    max-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(184, 139, 86, 0.35) !important;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.5), 0 0 45px rgba(184, 139, 86, 0.15) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

.account-modal-box.auth-register-full {
    max-width: 540px;
    width: 95%;
    max-height: 92vh;
}

.account-modal-backdrop.active .account-modal-box {
    transform: scale(1) translateY(0);
}

@keyframes authSlideFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-form-animated-panel {
    animation: authSlideFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal Header Bar */
.account-modal-header {
    background: #14171a;
    color: #ffffff;
    padding: 1rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #b88b56;
}

.modal-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-brand-emblem {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, #2a2e33 0%, #14171a 100%);
    border: 1px solid #b88b56;
    color: #b88b56;
    font-family: 'Playfair Display', serif;
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-brand-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.05em;
}

.modal-brand-sub {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b88b56;
    display: block;
}

.account-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    padding: 4px;
}

.account-modal-close:hover {
    color: #ffffff;
    transform: scale(1.15);
}

/* Modal Body Layout (Sidebar + Content) */
.account-modal-body {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Modal Sidebar */
.account-modal-sidebar {
    background: #fbf9f5;
    border-right: 1px solid #e8e3d9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.4rem 1.25rem;
    overflow-y: auto;
    min-width: 0;
}

.modal-patron-card {
    background: linear-gradient(135deg, #1c2024 0%, #0d0f11 100%);
    border: 1px solid rgba(184, 139, 86, 0.4);
    border-radius: 10px;
    padding: 1.2rem 1rem;
    text-align: center;
    color: #ffffff;
    margin-bottom: 1.2rem;
}

.modal-patron-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle, #2a2e33 0%, #14171a 100%);
    border: 1.5px solid #b88b56;
    color: #b88b56;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.6rem auto;
}

.modal-patron-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px 0;
}

.modal-patron-email {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 0.5rem 0;
    word-break: break-all;
}

.modal-patron-badge {
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d4af37;
    background: rgba(184, 139, 86, 0.15);
    border: 1px solid rgba(184, 139, 86, 0.35);
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 600;
}

.modal-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.modal-nav-link:hover {
    background: #f1ebd9;
    color: #14171a;
}

.modal-nav-link.active {
    background: #14171a;
    color: #ffffff;
    font-weight: 700;
}

.modal-nav-link.active svg {
    stroke: #b88b56;
}

/* Modal Content Scrollable Area */
.account-modal-content {
    padding: 2.2rem 2.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    background: #ffffff;
}

.account-modal-content .tab-panel {
    display: none !important;
}

.account-modal-content .tab-panel.active {
    display: block !important;
}

.account-modal-content .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.account-modal-content .form-group {
    margin-bottom: 1.25rem;
}

.account-modal-content .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #475569;
    margin-bottom: 0.45rem;
}

.account-modal-content .form-control,
.account-modal-content input[type="text"],
.account-modal-content input[type="email"],
.account-modal-content select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #dcd6cb;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #ffffff;
    color: #14171a;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.account-modal-content .form-control:focus,
.account-modal-content input:focus {
    border-color: #b88b56;
    outline: none;
    box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.15);
}

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

    .account-modal-sidebar {
        border-right: none;
        border-bottom: 1px solid #e8e3d9;
        padding: 1rem;
    }

    .modal-nav-menu {
        flex-direction: row;
        overflow-x: auto;
    }

    .modal-nav-link {
        white-space: nowrap;
    }
}

/* =========================================================================
   PATRON PORTAL ORDER HISTORY & LUXURY LIVE TRACKING STEPPER
   ========================================================================= */
.patron-orders-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.patron-order-card {
    background: #ffffff;
    border: 1px solid #e8e3d9;
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.patron-order-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #d4af37;
}

.patron-order-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1ece4;
}

.patron-order-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.patron-order-number {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #14171a;
    letter-spacing: 0.02em;
}

.patron-order-meta {
    font-size: 0.78rem;
    color: #64748b;
}

.patron-order-badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.patron-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.patron-status-badge .badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.patron-status-badge.pending {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.patron-status-badge.pending .badge-dot {
    background: #f59e0b;
}

.patron-status-badge.processing,
.patron-status-badge.tailoring {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.patron-status-badge.processing .badge-dot,
.patron-status-badge.tailoring .badge-dot {
    background: #d97706;
}

.patron-status-badge.confirmed {
    background: #fdf6ec;
    color: #b88b56;
    border: 1px solid #f2e2cb;
}

.patron-status-badge.confirmed .badge-dot {
    background: #b88b56;
}

.patron-status-badge.dispatched,
.patron-status-badge.shipped {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.patron-status-badge.dispatched .badge-dot,
.patron-status-badge.shipped .badge-dot {
    background: #2563eb;
}

.patron-status-badge.delivered,
.patron-status-badge.completed {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.patron-status-badge.delivered .badge-dot,
.patron-status-badge.completed .badge-dot {
    background: #10b981;
}

/* Luxury Horizontal Live Tracking Stepper */
.patron-stepper-wrap {
    margin: 1.4rem 0 1.25rem 0;
    padding: 1.25rem 1.4rem;
    background: #faf8f5;
    border: 1px solid #ebe5da;
    border-radius: 12px;
}

.patron-stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.patron-stepper::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 20px;
    right: 20px;
    height: 3px;
    background: #e2dcd0;
    z-index: 1;
}

.patron-stepper-progress {
    position: absolute;
    top: 17px;
    left: 20px;
    height: 3px;
    background: linear-gradient(90deg, #b88b56, #d4af37);
    z-index: 2;
    transition: width 0.4s ease;
}

.patron-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 68px;
}

.patron-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.patron-step.completed .patron-step-circle {
    background: #14171a;
    border-color: #b88b56;
    color: #d4af37;
}

.patron-step.active .patron-step-circle {
    background: #b88b56;
    border-color: #b88b56;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(184, 139, 86, 0.25);
    animation: patronStepPulse 2s infinite ease-in-out;
}

@keyframes patronStepPulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(184, 139, 86, 0.25);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(184, 139, 86, 0.45);
    }
}

.patron-step-label {
    margin-top: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.25;
}

.patron-step.completed .patron-step-label,
.patron-step.active .patron-step-label {
    color: #14171a;
    font-weight: 700;
}

/* Garment Items Rows */
.patron-order-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1rem 0;
}

.patron-order-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #f1ece4;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.patron-order-item-row:hover {
    border-color: #e2dcd0;
}

.patron-item-thumb {
    width: 48px;
    height: 58px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e5dfd5;
    flex-shrink: 0;
}

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

.patron-item-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #14171a;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patron-item-meta {
    font-size: 0.74rem;
    color: #64748b;
    margin: 0;
}

.patron-item-price {
    font-size: 0.92rem;
    font-weight: 700;
    color: #14171a;
    flex-shrink: 0;
}

/* Order Footer Summary */
.patron-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 0.9rem;
    border-top: 1px solid #f1ece4;
    margin-top: 0.8rem;
}

.patron-order-shipping-note {
    font-size: 0.76rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.patron-order-total-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.patron-order-total-lbl {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    font-weight: 600;
}

.patron-order-total-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: #14171a;
    font-family: 'Playfair Display', Georgia, serif;
}

/* ==========================================================================
   MOBILE RESPONSIVE RULES: SIGN IN & CREATE ACCOUNT FORMS (< 768px & < 650px)
   Ensure single input field per line, full width, and luxury mobile layout
   ========================================================================== */
@media (max-width: 768px) {

    /* Responsive modal container */
    .account-modal-box {
        width: 94% !important;
        max-width: 520px !important;
        max-height: 94vh !important;
        margin: auto !important;
        border-radius: 16px !important;
    }

    .account-modal-box.auth-register-full {
        width: 95% !important;
        max-width: 600px !important;
        max-height: 94vh !important;
    }

    .account-modal-box.logged-in-portal {
        width: 95% !important;
        max-width: 95% !important;
        height: auto !important;
        max-height: 94vh !important;
    }

    .account-modal-body {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    .account-modal-sidebar {
        border-right: none !important;
        border-bottom: 1px solid #e8e3d9 !important;
        padding: 1rem !important;
    }
}

@media (max-width: 650px) {

    /* Full single-column input layout on mobile */
    .account-modal-box {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 94vh !important;
        border-radius: 14px !important;
    }

    .account-modal-header {
        padding: 0.85rem 1.1rem !important;
    }

    .auth-modal-card-body {
        padding: 1.15rem 1rem 1.6rem 1rem !important;
    }

    /* Force all grid containers to single-column: 1 input field per line */
    .auth-form-grid-2,
    .auth-form-grid-3,
    .account-modal-box form [style*="grid-template-columns"],
    .account-modal-box form div[style*="display:grid"],
    .account-modal-box form div[style*="display: grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        width: 100% !important;
    }

    /* Full width form groups and inputs */
    .auth-field-group,
    .account-modal-box .form-group {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0.85rem !important;
    }

    .auth-input-field,
    .account-modal-box input.form-control,
    .account-modal-box select.form-control,
    .account-modal-box textarea.form-control {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.82rem 0.95rem !important;
        font-size: 16px !important;
        /* Prevents auto-zoom on mobile */
        border-radius: 8px !important;
    }

    .account-modal-box label {
        font-size: 0.72rem !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    .auth-section-block {
        padding: 0.95rem 0.85rem !important;
        border-radius: 9px !important;
        margin-bottom: 1.1rem !important;
    }

    /* Mobile switcher buttons */
    .auth-switcher-nav {
        margin-bottom: 1.25rem !important;
    }

    .auth-switch-btn {
        padding: 9px 0 !important;
        font-size: 0.94rem !important;
    }

    /* Profile avatar row on mobile */
    #auth-reg-avatar-preview {
        width: 60px !important;
        height: 60px !important;
    }

    /* Verification OTP code on mobile */
    #auth-reg-otp,
    #auth-forgot-otp {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        letter-spacing: 0.25em !important;
        font-size: 1.5rem !important;
        padding: 0.75rem !important;
    }

    /* Submit buttons on mobile */
    .account-modal-box button[type="submit"] {
        padding: 0.9rem !important;
        font-size: 0.82rem !important;
        border-radius: 9px !important;
    }
}

/* ==========================================================================
    LUXURY AUTH MODAL - PREMIUM INTERACTIVE DESIGN SYSTEM
   ========================================================================== */

.account-modal-box {
    border-radius: 24px !important;
    border: 1px solid rgba(184, 139, 86, 0.4) !important;
    background: #ffffff !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(184, 139, 86, 0.15) !important;
    overflow: hidden !important;
}

.account-modal-header {
    background: linear-gradient(135deg, #0e1114 0%, #171b20 50%, #111417 100%) !important;
    border-bottom: 1px solid rgba(184, 139, 86, 0.4) !important;
    padding: 1.15rem 1.75rem !important;
    position: relative;
}

.account-modal-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #dfba73 50%, transparent 100%);
}

.modal-header-brand {
    gap: 14px !important;
}

.modal-brand-emblem {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #2d3238 0%, #121518 100%) !important;
    border: 1.5px solid #dfba73 !important;
    box-shadow: 0 0 15px rgba(223, 186, 115, 0.25) !important;
}

.modal-brand-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.12rem !important;
    letter-spacing: 0.12em !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.modal-brand-sub {
    font-size: 0.6rem !important;
    letter-spacing: 0.22em !important;
    color: #dfba73 !important;
    font-weight: 600 !important;
}

.account-modal-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #dfba73 !important;
    font-size: 1.3rem !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
    cursor: pointer;
}

.account-modal-close:hover {
    background: rgba(223, 186, 115, 0.2) !important;
    border-color: #dfba73 !important;
    color: #ffffff !important;
    transform: rotate(90deg) scale(1.08) !important;
}

/* Patron Privileges Sub-banner */
.auth-privileges-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(90deg, #fcfaf7 0%, #f7f1e6 50%, #fcfaf7 100%);
    border-bottom: 1px solid #ebd8c1;
    padding: 0.65rem 1.4rem;
    font-size: 0.73rem;
    color: #785a30;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.auth-privileges-banner span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Luxury Segmented Pill Switcher */
.auth-segmented-switcher {
    display: flex;
    background: #f1ede5;
    border: 1px solid #e2dacd;
    border-radius: 14px;
    padding: 5px;
    margin-bottom: 1.6rem;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.04);
}

.auth-seg-btn {
    flex: 1;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-seg-btn.active {
    background: #14171a;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(20, 23, 26, 0.25);
}

.auth-seg-btn.active .auth-seg-badge {
    background: #dfba73;
    color: #14171a;
}

.auth-seg-badge {
    font-size: 0.58rem;
    font-family: 'Inter', -apple-system, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(184, 139, 86, 0.15);
    color: #b88b56;
    transition: all 0.25s ease;
}

/* Luxury Field Groups & Inputs */
.luxury-field-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.luxury-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 0.45rem;
}

.luxury-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.luxury-input-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.luxury-input-field {
    width: 100%;
    padding: 0.88rem 1rem 0.88rem 42px;
    border: 1.5px solid #dcd5ca;
    border-radius: 12px;
    font-size: 0.92rem;
    color: #14171a;
    background: #ffffff;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    font-family: inherit;
}

.luxury-input-field:focus {
    outline: none;
    border-color: #b88b56;
    background: #fffdf9;
    box-shadow: 0 0 0 4px rgba(184, 139, 86, 0.15);
}

.luxury-input-wrapper:focus-within .luxury-input-icon {
    color: #b88b56;
}

/* Password Eye Toggle */
.luxury-pw-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.luxury-pw-toggle:hover {
    color: #b88b56;
    background: rgba(184, 139, 86, 0.08);
}

/* Live Password Strength Meter */
.luxury-pw-meter-wrap {
    margin-top: 6px;
    padding: 0 2px;
}

.luxury-pw-meter-bars {
    display: flex;
    gap: 4px;
    height: 4px;
    margin-bottom: 4px;
}

.luxury-pw-bar {
    flex: 1;
    height: 100%;
    background: #e2e8f0;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.luxury-pw-text {
    font-size: 0.68rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

/* Interactive 3-Step Wizard Navigation */
.reg-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 1.5rem;
    padding: 0 10px;
}

.reg-wizard-nav-line {
    position: absolute;
    top: 18px;
    left: 28px;
    right: 28px;
    height: 2px;
    background: #e2e8f0;
    z-index: 1;
}

.reg-wizard-nav-progress {
    position: absolute;
    top: 18px;
    left: 28px;
    height: 2px;
    background: linear-gradient(90deg, #dfba73, #b88b56);
    z-index: 2;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    width: 0%;
}

.reg-wizard-step-node {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.reg-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1ede5;
    border: 2px solid #dcd5ca;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.reg-step-circle.active {
    background: #14171a;
    border-color: #dfba73;
    color: #dfba73;
    box-shadow: 0 0 14px rgba(223, 186, 115, 0.35);
}

.reg-step-circle.completed {
    background: #047857;
    border-color: #047857;
    color: #ffffff;
}

.reg-step-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    transition: color 0.3s ease;
}

.reg-step-title.active {
    color: #14171a;
}

/* Wizard Step Panes */
.reg-wizard-pane {
    display: none;
    animation: authSlideFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.reg-wizard-pane.active {
    display: block;
}

/* Action Buttons */
.luxury-btn-submit {
    width: 100%;
    padding: 0.95rem 1.4rem;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #1f2429 0%, #121518 100%);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(18, 21, 24, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(223, 186, 115, 0.35);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-btn-submit:hover {
    background: linear-gradient(135deg, #2a3138 0%, #14171a 100%);
    border-color: #dfba73;
    box-shadow: 0 8px 25px rgba(18, 21, 24, 0.4), 0 0 20px rgba(223, 186, 115, 0.25);
    transform: translateY(-1px);
}

.luxury-btn-gold {
    background: linear-gradient(135deg, #dfba73 0%, #b88b56 100%) !important;
    color: #121518 !important;
    border: 1px solid #c99f57 !important;
    box-shadow: 0 6px 20px rgba(184, 139, 86, 0.3) !important;
}

.luxury-btn-gold:hover {
    background: linear-gradient(135deg, #ebc883 0%, #c59860 100%) !important;
    box-shadow: 0 8px 25px rgba(184, 139, 86, 0.45) !important;
    transform: translateY(-1px) !important;
}

.luxury-btn-secondary {
    padding: 0.85rem 1.3rem;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: 1.5px solid #dcd5ca;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.luxury-btn-secondary:hover {
    border-color: #b88b56;
    color: #b88b56;
    background: #fdfbf7;
}

/* Trust footer items */
.auth-trust-strip {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px dashed #e2dacd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.73rem;
    color: #64748b;
    font-weight: 600;
}

.auth-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ==========================================================================
   SPLIT-VIEW AUTHENTICATION MODAL (MATCHING CLIENT REFERENCE MOCKUP)
   ========================================================================== */

.account-modal-box.auth-split-view {
    max-width: 1140px !important;
    width: 95% !important;
    min-height: 720px !important;
    height: auto !important;
    max-height: 94vh !important;
    background: #ffffff !important;
    border-radius: 32px !important;
    border: 1px solid rgba(184, 139, 86, 0.35) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 60px rgba(184, 139, 86, 0.16) !important;
    display: grid !important;
    grid-template-columns: 1.18fr 0.94fr !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Floating Close Button - Positioned cleanly in top-right with independent spacing */
.auth-split-close-btn {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 23, 26, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(223, 186, 115, 0.4);
    color: #dfba73;
    font-size: 1.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: all 0.25s ease;
    line-height: 1;
}

.auth-split-close-btn:hover {
    background: rgba(223, 186, 115, 0.3);
    color: #ffffff;
    border-color: #dfba73;
    transform: rotate(90deg) scale(1.1);
}

/* Left Form Column */
.auth-split-form-panel {
    padding: 2.8rem 3.4rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 139, 86, 0.25) transparent;
}

.auth-split-form-panel::-webkit-scrollbar {
    width: 5px;
}

.auth-split-form-panel::-webkit-scrollbar-track {
    background: transparent;
}

.auth-split-form-panel::-webkit-scrollbar-thumb {
    background: rgba(184, 139, 86, 0.25);
    border-radius: 4px;
}

.auth-split-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.6rem;
}

.auth-split-brand-emblem {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-split-brand-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #14171a;
    line-height: 1.1;
    margin: 0;
}

.auth-split-brand-sub {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b88b56;
    font-weight: 600;
    display: block;
}

.auth-split-heading {
    font-family: 'Playfair Display', serif;
    font-size: 1.88rem;
    font-weight: 700;
    color: #14171a;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.01em;
}

.auth-split-subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 1.5rem 0;
    line-height: 1.45;
}

.auth-split-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.auth-split-field {
    margin-bottom: 1.05rem;
    position: relative;
}

.auth-split-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.42rem;
}

.auth-split-input {
    width: 100%;
    padding: 0.88rem 1.05rem;
    border: 1.5px solid #e5dfd5;
    border-radius: 12px;
    font-size: 0.92rem;
    color: #14171a;
    background: #ffffff;
    transition: all 0.25s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.auth-split-input:focus {
    outline: none;
    border-color: #b88b56;
    box-shadow: 0 0 0 3.5px rgba(184, 139, 86, 0.15);
    background: #fffdfa;
}

.auth-split-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-split-pw-wrap .auth-split-input {
    padding-right: 44px;
}

.auth-split-pw-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #94a3b8;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s;
}

.auth-split-pw-toggle:hover {
    color: #b88b56;
}

.auth-split-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
}

.auth-split-checkbox-row input {
    margin-top: 2px;
    accent-color: #b88b56;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.auth-split-checkbox-row a {
    color: #b88b56;
    text-decoration: underline;
    font-weight: 600;
}

/* Primary CTA Button (matches the reference button with website theme coloring) */
.auth-split-btn-primary {
    width: 100%;
    padding: 1.02rem 1.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #c5a059 0%, #b88b56 100%);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(184, 139, 86, 0.35);
    transition: all 0.25s ease;
}

.auth-split-btn-primary:hover {
    background: linear-gradient(135deg, #d3b069 0%, #a77c48 100%);
    box-shadow: 0 6px 22px rgba(184, 139, 86, 0.45);
    transform: translateY(-1px);
}

.auth-split-divider {
    display: flex;
    align-items: center;
    margin: 1.2rem 0;
    color: #94a3b8;
    font-size: 0.76rem;
}

.auth-split-divider::before,
.auth-split-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5dfd5;
}

.auth-split-divider span {
    padding: 0 14px;
}

/* Social Login Row (Google & Apple) */
.auth-split-social-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 1.15rem;
}

.auth-split-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.82rem 1.15rem;
    background: #ffffff;
    border: 1.5px solid #e5dfd5;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #14171a;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-split-social-btn:hover {
    border-color: #b88b56;
    background: #faf8f5;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.auth-split-switch {
    text-align: center;
    font-size: 0.84rem;
    color: #64748b;
    margin-top: 0.65rem;
}

.auth-split-switch a {
    color: #b88b56;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.auth-split-copyright {
    text-align: center;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 1.1rem;
}

/* Right Side Luxury Brand Graphic Panel */
.auth-split-brand-panel {
    background: linear-gradient(145deg, #181d22 0%, #121518 45%, #0d0f11 100%);
    position: relative;
    padding: 3.4rem 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    color: #ffffff;
}

/* Centerpiece Luxury Emblem - Grand 175px Scale */
.auth-brand-watermark {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 175px;
    height: 175px;
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jg-animated-monogram {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 16px rgba(223, 186, 115, 0.35)) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
    animation: jgMonogramConstructFinish 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}

@keyframes jgMonogramConstructFinish {
    0% {
        filter: drop-shadow(0 0 4px rgba(223, 186, 115, 0.15)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
        transform: scale(0.96);
    }
    75% {
        filter: drop-shadow(0 0 32px rgba(223, 186, 115, 0.8)) drop-shadow(0 14px 30px rgba(0, 0, 0, 0.7));
        transform: scale(1.02);
    }
    100% {
        filter: drop-shadow(0 0 22px rgba(223, 186, 115, 0.45)) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65));
        transform: scale(1);
    }
}

/* 1. Tailor Blueprint Compass Guide Circle - Traces once and settles as subtle watermark */
.jg-construct-guide {
    stroke-dasharray: 270;
    stroke-dashoffset: 270;
    transform-origin: 50px 50px;
    animation: jgGuideConstructOnce 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}

@keyframes jgGuideConstructOnce {
    0% {
        stroke-dashoffset: 270;
        opacity: 0;
        transform: rotate(-90deg);
    }
    18% {
        opacity: 0.65;
    }
    55% {
        stroke-dashoffset: 0;
        opacity: 0.35;
        transform: rotate(0deg);
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.22;
        transform: rotate(0deg);
    }
}

/* 2. G Outer Arc - Golden Silk Thread Drawing (Runs once and stays solid gold) */
.jg-stroke-g-arc {
    stroke-dasharray: 230;
    stroke-dashoffset: 230;
    animation: jgDrawGArcOnce 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}

@keyframes jgDrawGArcOnce {
    0%, 10% {
        stroke-dashoffset: 230;
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    60%, 100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* 3. J Stem and Hook Tail - Tailor's Needle Construction (Runs once and stays solid gold) */
.jg-stroke-j-stem {
    stroke-dasharray: 85;
    stroke-dashoffset: 85;
    animation: jgDrawJStemOnce 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}

@keyframes jgDrawJStemOnce {
    0%, 26% {
        stroke-dashoffset: 85;
        opacity: 0;
    }
    32% {
        opacity: 1;
    }
    72%, 100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* 4. G Inner Crossbar - Monogram Anchor (Runs once and stays solid gold) */
.jg-stroke-g-bar {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: jgDrawGBarOnce 2.6s cubic-bezier(0.16, 1, 0.3, 1) 1 forwards;
}

@keyframes jgDrawGBarOnce {
    0%, 50% {
        stroke-dashoffset: 60;
        opacity: 0;
    }
    56% {
        opacity: 1;
    }
    82%, 100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Preloader Emblem Animated Construction Integration */
.preloader-emblem-gold .jg-animated-monogram {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Clean Background Ambient Aura & Orbit Animations */
.jg-ambient-aura {
    animation: jgAuraBreath 6s ease-in-out infinite;
}

@keyframes jgAuraBreath {
    0%, 100% {
        opacity: 0.65;
        transform: scale(0.96);
        transform-origin: 250px 252px;
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
        transform-origin: 250px 252px;
    }
}

.jg-compass-ring-inner {
    transform-origin: 250px 252px;
    animation: jgOrbitSlowCW 80s linear infinite;
}

.jg-compass-ring-outer {
    transform-origin: 250px 252px;
    animation: jgOrbitSlowCCW 110s linear infinite;
}

@keyframes jgOrbitSlowCW {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes jgOrbitSlowCCW {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

.jg-silk-wave {
    animation: jgWaveGlide 8s ease-in-out infinite alternate;
}

.jg-silk-wave-sub {
    animation: jgWaveGlide 11s ease-in-out infinite alternate-reverse;
}

@keyframes jgWaveGlide {
    0% { transform: translateY(0); }
    100% { transform: translateY(-7px); }
}

.auth-brand-top-badge {
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #dfba73;
    font-weight: 700;
    background: rgba(223, 186, 115, 0.1);
    border: 1px solid rgba(223, 186, 115, 0.25);
    padding: 7px 16px;
    border-radius: 24px;
    backdrop-filter: blur(8px);
    width: fit-content;
}

.auth-brand-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.auth-brand-bottom-content {
    position: relative;
    z-index: 5;
}

.auth-brand-tagline {
    font-family: 'Playfair Display', serif;
    font-size: 2.85rem;
    line-height: 1.14;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1.3rem 0;
    letter-spacing: -0.01em;
}

.auth-tagline-highlight {
    color: #dfba73;
    background: linear-gradient(135deg, #dfba73 0%, #c5a059 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-brand-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.auth-brand-pills span {
    color: #dfba73;
}

/* Verification 6-Box Cells */
.auth-otp-cells-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 1.6rem 0 1.8rem 0;
}

.auth-otp-cell {
    width: 52px;
    height: 58px;
    border: 2px solid #e5dfd5;
    border-radius: 12px;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: #14171a;
    background: #faf8f5;
    transition: all 0.2s ease;
}

.auth-otp-cell:focus {
    outline: none;
    border-color: #b88b56;
    background: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(184, 139, 86, 0.2);
    transform: translateY(-2px);
}

/* Reset Password Success Shield */
.auth-success-shield-wrap {
    text-align: center;
    padding: 3rem 1.5rem 2rem 1.5rem;
}

.auth-success-shield-icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle, #fcf6ea 0%, #f4e8d0 100%);
    border: 2px solid #b88b56;
    color: #b88b56;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
    box-shadow: 0 8px 25px rgba(184, 139, 86, 0.22);
}

.auth-success-shield-icon svg {
    width: 44px;
    height: 44px;
    stroke: #b88b56;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .account-modal-box.auth-split-view {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: auto !important;
        max-height: 94vh !important;
        max-width: 520px !important;
    }

    .auth-split-brand-panel {
        display: none !important;
    }

    .auth-split-form-panel {
        padding: 2.2rem 1.8rem !important;
    }
}