/* --------------------------------------------------------------------------
   STORE FRONT DESIGN SYSTEM
   -------------------------------------------------------------------------- */

:root {
    --bg-color: #0b0b0d;
    --card-bg: rgba(21, 21, 25, 0.82);
    --border-color: rgba(247, 244, 236, 0.11);
    --border-color-hover: rgba(0, 126, 135, 0.52);
    
    --text-primary: #f7f4ec;
    --text-secondary: #aaa7a0;
    --text-muted: #6e6a63;
    
    --accent-secondary: #007e87;
    --accent-secondary-deep: #00666d;
    --accent-secondary-soft: #35b9c1;
    --accent-primary: #f5c542;
    --accent-primary-hover: #ffd85c;
    --accent-alert: #ff5a4f;
    --accent-success: #56c271;
    --accent-success-deep: #2e7d32;
    --accent-success-darker: #1b5e20;
    --text-on-primary: #11100d;
    
    --gradient-primary: linear-gradient(135deg, #f5c542 0%, #ffd85c 100%);
    --gradient-glow: linear-gradient(135deg, rgba(245, 197, 66, 0.20) 0%, rgba(0, 126, 135, 0.20) 100%);
    --gradient-dark: linear-gradient(180deg, rgba(28, 27, 24, 0.86) 0%, rgba(11, 11, 13, 0.97) 100%);
    
    --font-heading: 'Syne', 'Inter', sans-serif;
    --font-ui: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-normal: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    --hdr-height: 80px;
    /* Wider public storefront canvas for desktop displays. Text blocks keep
       their own readable limits while sections use more of the screen. */
    --max-width: 1500px;
}

/* Font-load stability: keep the storefront hidden briefly while the three
   branded families resolve, preventing fallback metrics from making the UI
   look like it has randomly changed size or weight. */
html.fonts-stabilizing {
    background: #0b0b0d;
    color-scheme: dark;
}

html.fonts-stabilizing body {
    visibility: hidden;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Refresh/history restoration must be instantaneous. Intentional in-page
       movement is handled by JavaScript where smooth scrolling is appropriate. */
    scroll-behavior: auto;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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


a {
    color: inherit;
    text-decoration: none;
}

/* Background Glow Orbs */
.glow-orb {
    position: fixed;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
    animation: pulseOrbs 20s infinite alternate ease-in-out;
}

.orb-1 {
    top: -20%;
    right: -10%;
    background: radial-gradient(circle, var(--accent-secondary) 0%, transparent 70%);
}

.orb-2 {
    bottom: -20%;
    left: -10%;
    background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
    animation-delay: -5s;
}

@keyframes pulseOrbs {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(10vw, 5vh) scale(1.2);
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
    background: #1c1c1e;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2c2c2e;
}

/* Container limits */
section {
    padding: 100px 24px;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

/* Typography elements */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-tag {
    font-family: var(--font-ui);
    color: var(--accent-secondary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 12px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.section-subtitle {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 48px;
}

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

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--hdr-height);
    background-color: rgba(11, 11, 13, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
    display: flex;
    align-items: center;
    transition: var(--transition-normal);
}

.header-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.035em;
}

.logo-accent {
    color: var(--accent-secondary);
}


.nav {
    display: flex;
    gap: 32px;
}

.nav-link {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: var(--text-secondary);
    text-transform: uppercase;
    transition: var(--transition-fast);
    padding: 8px 0;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-secondary), var(--accent-secondary-soft));
    transition: var(--transition-fast);
}

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

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

.actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.cart-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--border-color-hover);
    transform: scale(1.05);
}

.cart-icon {
    width: 20px;
    height: 20px;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--gradient-primary);
    color: #000;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 103;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle .bar {
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    transition: var(--transition-normal);
}

.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-nav {
    position: fixed;
    top: var(--hdr-height);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    background-color: rgba(11, 11, 13, 0.985);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    padding: 34px 20px 42px;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear .2s;
}

.mobile-nav.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 0s;
}

body.mobile-menu-open {
    overflow: hidden;
}

.mobile-link {
    font-family: var(--font-heading);
    font-size: clamp(21px, 5.5vw, 30px);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.mobile-link:hover {
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 16px 32px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #000;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(245, 197, 66, 0.22);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-color-hover);
    transform: translateY(-3px);
}

.btn-large {
    width: 100%;
    padding: 20px 40px;
    border-radius: 12px;
}

.btn-subtext {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.025em;
    opacity: 0.7;
    margin-top: 2px;
    text-transform: none;
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    filter: blur(20px);
    z-index: -1;
    opacity: 0;
    transition: var(--transition-normal);
}

.btn-glow:hover::after {
    opacity: 0.5;
}

.link-btn {
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--accent-secondary);
    cursor: pointer;
    text-decoration: underline;
    transition: var(--transition-fast);
}

.link-btn:hover {
    color: var(--text-primary);
}

/* Hero Section */
.hero-section {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    min-height: calc(100vh - var(--hdr-height));
    margin-top: var(--hdr-height);
    padding-top: 40px;
    padding-bottom: 40px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-tag {
    font-family: var(--font-ui);
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    border-left: 2px solid var(--accent-primary);
    padding-left: 12px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin-bottom: 24px;
}

.hero-description {
    font-size: clamp(16px, 1.8vw, 20px);
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 520px;
}

.hero-actions {
    display: flex;
    gap: 20px;
    width: 100%;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    background-color: #0b0c10;
}

.hero-image-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 126, 135, 0.20) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) contrast(1.1);
    transition: var(--transition-slow);
}

.hero-image-wrapper:hover .hero-img {
    transform: scale(1.05);
}

/* Showcase Section */
.showcase-section {
    border-top: 1px solid var(--border-color);
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* 3D Interactive Card Preview */
.product-preview-container {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.product-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--card-bg);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out, border-color var(--transition-normal);
}

.product-preview-container:hover .product-card-inner {
    border-color: var(--border-color-hover);
}

.product-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 3;
}

.product-main-image {
    width: 90%;
    height: 90%;
    object-fit: contain;
    transform: translateZ(50px);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.product-tech-lines {
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    pointer-events: none;
    z-index: 2;
}

.tech-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tech-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.tech-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.tech-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.tech-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.tech-label {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-family: var(--font-ui);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.035em;
}

/* Product details side */
.product-details {
    display: flex;
    flex-direction: column;
}

.product-title {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.product-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.product-price {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 700;
}

.product-status {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.035em;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: rgba(245, 197, 66, 0.08);
    color: var(--accent-primary);
    border: 1px solid rgba(245, 197, 66, 0.28);
}

.product-desc {
    color: var(--text-secondary);
    margin-bottom: 32px;
}

/* Specs grids */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 40px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 0;
}

.spec-item {
    display: flex;
    flex-direction: column;
}

.spec-label {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.spec-val {
    font-size: 14px;
    font-weight: 600;
}

/* Configurator selection styles */
.config-group {
    margin-bottom: 32px;
}

.config-label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 14px;
}

.color-swatches {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.swatch {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    transition: var(--transition-fast);
    width: 100%;
}

.swatch:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color-hover);
}

.swatch.active {
    border-color: var(--accent-secondary);
    background: rgba(0, 126, 135, 0.05);
}

.swatch-color {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.swatch-text {
    font-size: 14px;
    font-weight: 500;
}

.size-label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.size-selector {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.size-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    height: 52px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
}

.size-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color-hover);
}

.size-btn.active {
    background: var(--text-primary);
    color: #000;
    border-color: var(--text-primary);
}

.add-to-cart-wrapper {
    margin-top: 10px;
}

/* Collection Grid */
.collection-section {
    border-top: 1px solid var(--border-color);
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.collection-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-normal);
}

.collection-card:hover {
    transform: none;
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, 0.02);
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #0d0e13;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    transition: var(--transition-normal);
}

.card-image-wrapper:hover .card-img {
    transform: scale(1.06);
}


/* ── Card overlay dual buttons ── */
.card-img-link {
    display: block;
    overflow: hidden;
    border-radius: 0; /* inherits from wrapper */
}

.card-overlay-btns {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition-normal);
}

.card-image-wrapper:hover .card-overlay-btns {
    opacity: 1;
    transform: translateY(0);
}

.card-view-btn {
    flex: 1;
    background: var(--accent-secondary-deep);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 126, 135, 0.65);
    color: #fff;
    padding: 11px 10px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.card-view-btn:hover {
    background: var(--accent-secondary);
    color: #fff;
}

.quick-add-btn {
    flex: 1;
    background: rgba(6, 6, 9, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 11px 10px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    cursor: pointer;
    transition: var(--transition-fast);
}

.quick-add-btn:hover {
    background: var(--text-primary);
    color: #000;
}

/* ── Card title link ── */
.card-title-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.card-title-link:hover {
    color: var(--accent-secondary);
}


.card-info {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
}


.card-title {
    font-size: 16px;
    font-weight: 600;
}

.card-price {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--text-secondary);
}

/* Specs Tech Banner */
.tech-banner {
    border-top: 1px solid var(--border-color);
    padding-top: 60px;
    padding-bottom: 60px;
}

.banner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.banner-box {
    border-left: 1px solid var(--border-color);
    padding-left: 24px;
}

.box-num {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--accent-secondary);
    font-weight: 700;
    margin-bottom: 12px;
}

.box-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.box-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Footer Section */
.footer {
    background-color: #040406;
    border-top: 1px solid var(--border-color);
    padding: 80px 24px 40px;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    margin-bottom: 20px;
    font-size: 22px;
}

.footer-desc {
    color: var(--text-secondary);
    max-width: 380px;
    font-size: 14px;
}

.footer-form-wrapper {
    display: flex;
    flex-direction: column;
}

.form-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.025em;
}

.form-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.newsletter-form {
    display: flex;
    gap: 12px;
    width: 100%;
}

.newsletter-input {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 16px 20px;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.025em;
    transition: var(--transition-fast);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.04);
}

.newsletter-btn {
    padding: 16px 28px;
}

.form-feedback {
    margin-top: 10px;
    font-size: 13px;
    font-family: var(--font-ui);
    height: 20px;
}

.form-feedback.success {
    color: var(--accent-success);
}

.form-feedback.error {
    color: var(--accent-alert);
}

.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-muted);
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-link:hover {
    color: var(--text-primary);
}

/* Sliding Cart Drawer Panel */
.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 199;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-normal), visibility 0s linear 0.4s;
}

.cart-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition-normal), visibility 0s linear 0s;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 460px;
    height: 100vh;
    height: 100dvh;
    background: var(--gradient-dark);
    border-left: 1px solid var(--border-color);
    z-index: 200;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--transition-normal), visibility 0s linear 0.4s;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    will-change: transform;
}

.cart-drawer.active {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--transition-normal), visibility 0s linear 0s;
}

/* The cart has its own scrolling viewport so checkout controls remain reachable
   at normal browser zoom on short desktop screens and mobile WebViews. */
.cart-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.cart-header {
    flex: 0 0 var(--hdr-height);
    height: var(--hdr-height);
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.cart-drawer-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}

.close-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--border-color-hover);
}

.close-icon {
    width: 18px;
    height: 18px;
}

.cart-items-container {
    min-height: 0;
    overflow: visible;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cart Item Cards */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cart-item-img-wrapper {
    width: 80px;
    height: 80px;
    background: #0d0e13;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cart-item-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.cart-item-details {
    display: flex;
    flex-direction: column;
}

.cart-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 600;
}

.cart-item-price {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
}

.cart-item-meta {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

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

.quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.qty-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.qty-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.qty-val {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    width: 28px;
    text-align: center;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.remove-item-btn {
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.remove-item-btn:hover {
    color: var(--accent-alert);
}

/* Cart empty state */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    gap: 20px;
    text-align: center;
}

.empty-icon {
    width: 48px;
    height: 48px;
    opacity: 0.3;
}

.cart-empty-state p {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.035em;
}

/* Cart Summary & Checkout */
.cart-summary {
    background-color: rgba(6, 6, 9, 0.5);
    border-top: 1px solid var(--border-color);
    padding: 30px 30px calc(30px + env(safe-area-inset-bottom));
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.summary-row.total {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 16px;
    margin-bottom: 24px;
}

.checkout-btn {
    width: 100%;
}

/* Modal Overlay & Base styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: opacity var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.95);
    width: 90%;
    max-width: 580px;
    background: var(--gradient-dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    transition: transform var(--transition-normal), opacity var(--transition-normal);
    overflow: hidden;
}

.modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.modal-header {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.modal-body {
    padding: 30px;
}

.modal-intro {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Sizing Modal specifics */
.size-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 14px;
}

.size-table th, .size-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.size-table th {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 700;
}

.sizing-tips {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
}

.sizing-tips h5 {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.sizing-tips ul {
    list-style: none;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Notification Toast */
.toast {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: var(--text-primary);
    border: 1px solid var(--accent-secondary);
    box-shadow: 0 10px 30px rgba(0, 126, 135, 0.20);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    padding: 16px 32px;
    border-radius: 8px;
    z-index: 999;
    pointer-events: none;
    transition: bottom var(--transition-normal);
}

.toast.active {
    bottom: 40px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    section {
        padding: 80px 24px;
    }
    
    .hero-section {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-content {
        align-items: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .collection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .nav {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .collection-grid {
        grid-template-columns: 1fr;
    }
    
    .banner-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .banner-box {
        border-left: none;
        border-bottom: 1px solid var(--border-color);
        padding-left: 0;
        padding-bottom: 20px;
    }
    
    .banner-box:last-child {
        border-bottom: none;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .hero-actions .btn {
        width: 100%;
    }
}


/* v5.10.17 — mobile canvas containment
   Closed off-canvas UI uses transforms so it cannot widen the document.
   Home content uses true mobile gutters instead of clipping a desktop-width canvas. */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    html {
        scrollbar-gutter: auto;
    }

    section {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-container,
    .hero-section,
    .hero-content,
    .hero-actions,
    .hero-image-wrapper,
    .hero-trust-row,
    .showcase-grid,
    .collection-grid,
    .custom-order-grid,
    .info-grid {
        min-width: 0;
        max-width: 100%;
    }

    .header-container {
        padding-inline: 16px;
    }

    .brand-logo-wrapper {
        min-width: 0;
        max-width: calc(100% - 112px);
    }

    .actions {
        flex: 0 0 auto;
    }

    .menu-toggle,
    .cart-btn {
        flex: 0 0 auto;
    }

    .hero-description,
    .hero-actions,
    .hero-actions .btn,
    .hero-image-wrapper,
    .hero-trust-row {
        width: 100%;
    }

    .hero-description {
        max-width: 100%;
    }

    .hero-actions .btn,
    .hero-trust-row span {
        min-width: 0;
        max-width: 100%;
    }

    .toast {
        max-width: calc(100% - 32px);
        padding-inline: 18px;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    .hero-title {
        font-size: clamp(34px, 11vw, 40px);
        line-height: 1;
    }

    .brand-logo-img {
        width: min(180px, 52vw);
    }
}

/* Brand Logo Styling */
.brand-logo-wrapper {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

.brand-logo-img {
    display: block;
    width: 272px;
    max-height: 42px;
    height: auto;
    object-fit: contain;
}

.brand-logo-img.footer-brand-logo {
    width: clamp(168px, 30vw, 220px);
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

@media (max-width: 980px) {
    .nav { display: none; }
    .menu-toggle { display: flex; }
    .brand-logo-img { width: 220px; max-height: 35px; }
}

@media (max-width: 768px) {
    .brand-logo-img { width: 202px; max-height: 34px; }
    .brand-logo-img.footer-brand-logo { width: 190px; }
}

@media (max-width: 420px) {
    .header-container { padding-inline: 16px; }
    .actions { gap: 10px; }
    .brand-logo-img { width: min(180px, 52vw); max-height: 29px; }
}


/* --------------------------------------------------------------------------
   STOREFRONT REBUILD ADDITIONS
   -------------------------------------------------------------------------- */

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    padding: 10px 14px;
    background: #fff;
    color: #000;
    border-radius: 6px;
    transform: translateY(-160%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.hero-trust-row span,
.card-meta,
.stock-note,
.checkout-note,
.affiliation-note {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--text-secondary);
}

.hero-trust-row span {
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
}

.size-selector {
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
}

.stock-note {
    margin-top: 10px;
    line-height: 1.6;
}

.whatsapp-inline {
    display: block;
    margin-top: 12px;
    text-align: center;
}

.card-info-stacked {
    align-items: flex-start;
    gap: 16px;
}

.card-info-stacked > div:first-child {
    min-width: 0;
}

.card-meta {
    display: block;
    margin-top: 5px;
}

.custom-order-section,
.shop-info-section {
    border-top: 1px solid var(--border-color);
}

.custom-order-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) 1.25fr;
    align-items: center;
    gap: 70px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.custom-order-visual {
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background: rgba(255,255,255,0.015);
    overflow: hidden;
}

.custom-order-visual img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 24px 36px rgba(0,0,0,0.55));
}

.custom-order-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.custom-order-copy .section-subtitle {
    margin-bottom: 26px;
    max-width: 660px;
}

.info-grid,
.product-assurance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.info-card {
    min-height: 220px;
    padding: 28px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: rgba(255,255,255,0.015);
}

.info-number {
    display: block;
    margin-bottom: 24px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-secondary);
}

.info-card h2,
.info-card h3 {
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-size: 20px;
}

.info-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.contact-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 28px;
    padding: 26px 30px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: rgba(245,197,66,0.045);
}

.contact-phone {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: var(--text-primary);
}

.footer-contact-block {
    color: var(--text-secondary);
    line-height: 1.7;
}

.footer-contact-block a {
    color: var(--text-primary);
}

.footer-contact-label {
    margin-top: 18px;
}

.affiliation-note {
    max-width: var(--max-width);
    margin: 18px auto 0;
    padding: 0 24px;
    text-align: center;
    opacity: 0.72;
}

.mpesa-checkout-flow {
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1px dashed var(--border-color);
}

.checkout-field {
    margin-bottom: 16px;
}

.checkout-field .newsletter-input {
    width: 100%;
    min-height: 48px;
}

.mpesa-phone {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-success);
    border-color: rgba(86, 194, 113, 0.45);
}

.checkout-note {
    line-height: 1.55;
    margin-bottom: 14px;
}

.payment-status {
    min-height: 0;
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.payment-status:not(:empty) {
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
}

.mpesa-button {
    background: linear-gradient(135deg, var(--accent-success-deep) 0%, var(--accent-success-darker) 100%);
    color: #fff;
}

.checkout-cancel {
    display: block;
    margin: 14px auto 0;
}

.size-range {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.size-range span {
    display: grid;
    place-items: center;
    min-height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-weight: 700;
}

[hidden] {
    display: none !important;
}

@media (max-width: 1024px) {
    .custom-order-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .custom-order-copy {
        align-items: center;
        text-align: center;
    }

    .info-grid,
    .product-assurance-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-trust-row {
        justify-content: center;
    }

    .contact-panel {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .contact-panel .btn {
        width: 100%;
    }

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

    .card-overlay-btns {
        opacity: 1;
        transform: translateY(0);
    }

    .custom-order-visual {
        min-height: 340px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* --------------------------------------------------------------------------
   DARK RETRO / NOSTALGIA THEME
   -------------------------------------------------------------------------- */
body {
    background-image:
        radial-gradient(circle at 16% 8%, rgba(245, 197, 66, 0.055), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(0, 126, 135, 0.05), transparent 24%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(247, 244, 236, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247, 244, 236, 0.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 72%);
}

.orb-1 {
    background: radial-gradient(circle, rgba(245, 197, 66, 0.7) 0%, transparent 70%);
}

.orb-2 {
    background: radial-gradient(circle, rgba(0, 126, 135, 0.62) 0%, transparent 70%);
}

.gradient-text {
    background: linear-gradient(110deg, #f5c542 0%, #fff0a6 62%, #f5c542 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-accent,
.section-tag,
.hero-tag,
.link-btn,
.info-number {
    color: var(--accent-primary);
}

.nav-link::after {
    height: 2px;
    background: var(--accent-primary);
}

.btn {
    letter-spacing: 0.035em;
    border-radius: 10px;
}

.btn-primary {
    background: var(--accent-primary);
    color: var(--text-on-primary);
    border: 1px solid var(--accent-primary);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    box-shadow: 0 10px 24px rgba(245, 197, 66, 0.22);
}

.btn-glow::after {
    background: rgba(245, 197, 66, 0.48);
}

.btn-secondary {
    background: rgba(247, 244, 236, 0.025);
}

.btn-secondary:hover {
    background: rgba(247, 244, 236, 0.075);
    border-color: rgba(245, 197, 66, 0.5);
}

.cart-badge {
    background: var(--accent-primary);
    color: var(--text-on-primary);
}

.hero-tag {
    color: var(--accent-primary);
    border-left-color: var(--accent-primary);
    letter-spacing: 0.08em;
}

.hero-description {
    color: #bbb7ae;
}

.hero-image-wrapper {
    aspect-ratio: 2 / 3;
    max-width: 560px;
    justify-self: center;
    border-color: rgba(245, 197, 66, 0.33);
    background: #151519;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(245,197,66,.04);
}

.hero-image-wrapper::before,
.hero-image-wrapper::after {
    position: absolute;
    z-index: 3;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    pointer-events: none;
}

.hero-image-wrapper::before {
    content: 'NOSTALGIA CLUB';
    top: 18px;
    left: 18px;
    padding: 7px 10px;
    color: #11100d;
    background: var(--accent-primary);
    border-radius: 999px;
}

.hero-image-wrapper::after {
    content: 'NAKURU, KENYA';
    right: 18px;
    bottom: 18px;
    padding: 7px 10px;
    color: var(--text-primary);
    background: rgba(11, 11, 13, 0.82);
    border: 1px solid rgba(247, 244, 236, 0.18);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.hero-image-glow {
    background: linear-gradient(135deg, rgba(245,197,66,.10), transparent 48%, rgba(0, 126, 135, .12));
}

.hero-img {
    filter: saturate(.96) contrast(1.04) brightness(.93);
}

.hero-trust-row span {
    background: rgba(245, 197, 66, 0.035);
}

.product-card-inner,
.collection-card,
.info-card,
.custom-order-visual,
.contact-panel,
.modal,
.cart-drawer {
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
}

.product-status {
    color: var(--accent-primary);
    border-color: rgba(245, 197, 66, 0.38);
    background: rgba(245, 197, 66, 0.055);
}

.tech-corner {
    border-color: rgba(245, 197, 66, 0.7);
}

.tech-label {
    color: #11100d;
    background: var(--accent-primary);
    border-radius: 999px;
    padding: 5px 9px;
}

.swatch.active,
.size-btn.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(245,197,66,.22);
}

.size-btn.active {
    background: var(--accent-primary);
    color: var(--text-on-primary);
}

.collection-card:hover {
    border-color: rgba(245, 197, 66, 0.38);
}

.card-view-btn,
.quick-add-btn {
    letter-spacing: 0.03em;
}

.contact-panel {
    background: linear-gradient(115deg, rgba(245,197,66,.075), rgba(0, 126, 135, .035));
}

:focus-visible {
    outline-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .hero-image-wrapper {
        aspect-ratio: 2 / 3;
        max-width: 520px;
    }
    .hero-image-wrapper::before,
    .hero-image-wrapper::after {
        font-size: 9px;
    }
}


/* December delivery preview */
.delivery-structure {
    margin-top: 32px;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(245,197,66,0.055), rgba(0, 126, 135, 0.035));
}

.delivery-structure-copy {
    max-width: 760px;
    margin-bottom: 22px;
}

.delivery-structure-copy h3 {
    margin: 9px 0 10px;
    font-family: var(--font-heading);
    font-size: clamp(21px, 3vw, 30px);
    line-height: 1.12;
}

.delivery-structure-copy p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.delivery-rate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.delivery-rate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 54px;
    padding: 13px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(11,11,13,0.58);
    color: var(--text-secondary);
    font-size: 13px;
}

.delivery-rate-item strong {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 13px;
}

.delivery-rate-wide {
    grid-column: 1 / -1;
}

.optional-label {
    margin-left: 5px;
    opacity: 0.55;
    font-size: 0.82em;
}

.delivery-quote-note {
    margin: 8px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(245,197,66,0.35);
    border-radius: 8px;
    background: rgba(245,197,66,0.06);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .delivery-structure {
        padding: 22px 18px;
    }

    .delivery-rate-grid {
        grid-template-columns: 1fr;
    }

    .delivery-rate-wide {
        grid-column: auto;
    }

    .delivery-rate-item {
        align-items: flex-start;
    }
}

/* Native delivery dropdown contrast fix
   Explicit option colours prevent white-on-white menus in Windows browsers. */
select.newsletter-input {
    background-color: var(--card-bg, #151519);
    color: var(--text-primary, #f7f4ec);
    color-scheme: dark;
    cursor: pointer;
}

select.newsletter-input option {
    background-color: #151519;
    color: #f7f4ec;
}

select.newsletter-input option:checked {
    background-color: var(--accent-primary);
    color: var(--text-on-primary);
}

/* Product likes — stable, no movement. */
.like-button {
    --thq-heart-fill: none;
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 54px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(11, 11, 13, 0.82);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease;
    z-index: 5;
    transform: none !important;
}
.like-button strong { font-size: 11px; }
.like-button:hover { transform: none !important; border-color: rgba(255,255,255,.28); }
.like-button:active { transform: none !important; }
.like-button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
.like-button.liked { background: rgba(11, 11, 13, 0.82); border-color: var(--border-color); }
.like-button .thq-like-heart { width: 18px; height: 18px; color: var(--text-primary); flex: 0 0 auto; }
.like-button.liked .thq-like-heart { --thq-heart-fill: var(--accent-alert); color: var(--accent-alert); }
.like-button .thq-like-heart path { transition: fill .12s ease, stroke .12s ease; }
.like-button-inline { margin-left: auto; }
.card-lower-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; min-width: 0; }
.card-lower-like { flex: 0 0 auto; }

/* Thank-you feedback is physically attached to the clicked heart. No scale, bounce or slide. */
.thq-like-thanks {
    position: absolute;
    right: -2px;
    bottom: calc(100% + 9px);
    z-index: 30;
    display: grid;
    gap: 2px;
    width: max-content;
    max-width: min(220px, 74vw);
    padding: 9px 11px;
    border: 1px solid rgba(245,197,66,.34);
    border-radius: 10px;
    background: rgba(11,12,14,.98);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, visibility 0s linear .14s;
}
.thq-like-thanks::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -5px;
    width: 8px;
    height: 8px;
    background: rgba(11,12,14,.98);
    border-right: 1px solid rgba(245,197,66,.34);
    border-bottom: 1px solid rgba(245,197,66,.34);
    transform: rotate(45deg);
}
.like-button .thq-like-thanks-title,
.like-button .thq-like-thanks-copy { display: block; line-height: 1.25; white-space: nowrap; }
.like-button .thq-like-thanks-title { color: var(--accent-primary); font-size: 10px; font-weight: 800; letter-spacing: .065em; }
.like-button .thq-like-thanks-copy { color: #e8e1d5; font-size: 11px; font-weight: 500; }
.thq-like-thanks.is-visible { opacity: 1; visibility: visible; transition: opacity .14s ease, visibility 0s; }
@media (max-width: 430px) {
    .like-button-inline { margin-left: 0; }
    .card-lower-actions { width: 100%; justify-content: space-between; margin-left: 0; }
    .card-lower-like { min-width: 48px; height: 36px; padding: 0 10px; }
    .thq-like-thanks { max-width: min(205px, 70vw); }
    .like-button .thq-like-thanks-copy { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .like-button, .like-button .thq-like-heart path, .thq-like-thanks { transition: none; }
}

/* Bundle-price request */
.bundle-price-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    margin: 0 0 20px;
    border: 1px solid rgba(245, 197, 66, 0.38);
    border-radius: 12px;
    background: rgba(245, 197, 66, 0.07);
}
.bundle-price-panel[hidden] { display: none !important; }
.bundle-price-panel h3 { margin: 4px 0 6px; font-family: var(--font-heading); font-size: 18px; }
.bundle-price-panel p { color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.bundle-request-button { width: 100%; }
.bundle-request-button.active { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(245, 197, 66, 0.1); }

/* Two-path checkout */
.payment-choice-heading { margin: 18px 0 12px; }
.payment-choice-heading p { margin-top: 6px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.payment-choice-grid { display: grid; gap: 12px; }
.payment-choice-card {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
}
.payment-choice-card > strong { font-family: var(--font-heading); font-size: 16px; }
.payment-choice-card > span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.payment-choice-card .btn { margin-top: 5px; }
.payment-choice-card button:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }

@media (max-width: 720px) {
    .like-button-inline { margin-left: 0; }
    .product-meta { flex-wrap: wrap; }
}

/* Payment confirmation and receipt download */
.payment-success-panel {
    display: grid;
    gap: 12px;
    padding: 22px;
    margin: 16px 0;
    border: 1px solid rgba(86, 194, 113, 0.45);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(86, 194, 113, 0.12), rgba(245, 197, 66, 0.05));
    text-align: center;
}

.payment-success-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--accent-success-deep);
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}

.payment-success-panel h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 22px;
}

.payment-success-panel p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.payment-success-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    text-align: left;
}

.payment-success-total span {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-success-total strong {
    color: var(--accent-primary);
    font-family: var(--font-ui);
    font-size: 18px;
}

.receipt-download-button {
    text-decoration: none;
}

.receipt-note {
    font-size: 11px;
}



/* Custom-order actions shared with the Custom Gallery entry point. */
.custom-order-actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 520px) { .custom-order-actions .btn { width: 100%; } }

/* Human-assisted checkout */
.mpesa-checkout-flow,
.assisted-checkout-flow {
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1px dashed var(--border-color);
}

.assisted-checkout-intro {
    display: grid;
    gap: 8px;
    padding: 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(245, 197, 66, 0.38);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(245, 197, 66, 0.09), rgba(0, 126, 135, 0.05));
}

.assisted-checkout-intro h3,
.assisted-order-ready h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 19px;
    line-height: 1.2;
}

.assisted-checkout-intro p,
.assisted-order-ready p,
.assisted-checkout-note {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.assisted-order-ready {
    display: grid;
    gap: 10px;
    padding: 18px;
    margin: 16px 0;
    border: 1px solid rgba(86, 194, 113, 0.45);
    border-radius: 14px;
    background: rgba(86, 194, 113, 0.08);
}

.assisted-order-ready h3 strong {
    color: var(--accent-primary);
    letter-spacing: 0.04em;
}

.assisted-primary-choice {
    border-color: rgba(245, 197, 66, 0.46);
    background: rgba(245, 197, 66, 0.055);
}

.assisted-choice-grid .btn {
    width: 100%;
}

.assisted-checkout-note {
    margin: 14px 0 0;
    padding: 11px 12px;
    border-left: 3px solid var(--accent-primary);
    background: rgba(255,255,255,0.025);
}

/* Live availability states used on the storefront */
.size-btn.out-of-stock {
    border-color: rgba(255, 90, 79, 0.5);
    color: var(--text-muted);
    background:
        linear-gradient(135deg, transparent 47%, rgba(255, 90, 79, 0.65) 48%, rgba(255, 90, 79, 0.65) 52%, transparent 53%),
        rgba(255, 90, 79, 0.05);
}

.size-btn.out-of-stock.active {
    border-color: var(--accent-coral, #ff5a4f);
    color: var(--text-primary);
}

.product-status.out-of-stock {
    color: #ff948a;
    border-color: rgba(255, 90, 79, 0.45);
    background: rgba(255, 90, 79, 0.08);
}

.product-status.available-now {
    color: #79d991;
    border-color: rgba(86, 194, 113, 0.45);
    background: rgba(86, 194, 113, 0.08);
}


/* Returns and exchanges */
.product-return-summary {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.035);
    border-radius: 14px;
}
.product-return-summary h2 { margin: 0 0 .65rem; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.product-return-summary p { margin: .45rem 0; color: var(--text-muted, #b7b7bd); line-height: 1.55; font-size: .92rem; }
.product-return-summary a, .returns-page a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.returns-page { width: min(980px, calc(100% - 2rem)); margin: 0 auto; padding: 9rem 0 5rem; }
.returns-hero { margin-bottom: 2rem; }
.returns-hero h1 { margin: .55rem 0 1rem; font-family: 'Syne', sans-serif; font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: .95; }
.returns-hero p { max-width: 720px; color: var(--text-muted, #b7b7bd); line-height: 1.7; }
.returns-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.return-policy-card { padding: 1.4rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); border-radius: 16px; }
.return-policy-card h2 { margin: 0 0 .7rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.return-policy-card p, .return-policy-card li { color: var(--text-muted, #b7b7bd); line-height: 1.65; }
.return-policy-card ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.return-policy-card-wide { grid-column: 1 / -1; }
.return-policy-note { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 3px solid currentColor; background: rgba(255,255,255,.035); line-height: 1.65; }
@media (max-width: 720px) { .returns-grid { grid-template-columns: 1fr; } .return-policy-card-wide { grid-column: auto; } }

.return-support-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
}
.return-support-card .section-tag { margin-bottom: 0; }
.return-support-button { margin-top: .35rem; text-decoration: none !important; }
.return-support-phone { margin-bottom: 0 !important; font-size: .88rem; }
.product-return-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .8rem; }
.product-return-support { padding: .7rem .9rem; font-size: .76rem; text-decoration: none !important; }
@media (max-width: 520px) {
    .return-support-button, .product-return-support { width: 100%; text-align: center; justify-content: center; }
    .product-return-actions { align-items: stretch; }
}

/* Product-page typography cleanup — v5.9.16 */
.product-return-summary {
    margin: 1.4rem 0 1.55rem;
    padding: 1.2rem 1.25rem;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.028);
    border-radius: 15px;
}

.product-return-summary h2 {
    margin: 0 0 0.78rem;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.product-return-summary p {
    margin: 0.58rem 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.65;
}

.product-return-summary p strong {
    color: var(--text-primary);
    font-weight: 700;
}

.product-return-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.product-return-actions > a:first-child {
    width: max-content;
    color: var(--accent-primary);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.product-return-actions > a:first-child:hover,
.product-return-actions > a:first-child:focus-visible {
    color: var(--text-primary);
}

.product-return-support {
    min-height: 44px;
    padding: 0.72rem 1rem;
    border-color: rgba(245, 197, 66, 0.4);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.035em;
    text-decoration: none !important;
    white-space: nowrap;
}

.product-return-support:hover,
.product-return-support:focus-visible {
    border-color: var(--accent-primary);
    background: rgba(245, 197, 66, 0.08);
}

.product-actions-stack {
    gap: 0.78rem;
}

#add-to-cart-btn {
    min-height: 70px;
    font-family: var(--font-ui);
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: 0.045em;
}

#add-to-cart-btn .btn-subtext {
    display: block;
    margin-top: 0.28rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.005em;
    opacity: 0.72;
}

#product-whatsapp {
    min-height: 54px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
}


@media (max-width: 560px) {
    .product-return-summary {
        padding: 1.05rem;
    }

    .product-return-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .product-return-actions > a:first-child {
        width: max-content;
    }

    .product-return-support {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

/* =======================================================
   v5.9.18 — CONSISTENT STOREFRONT IMAGE PRESENTATION
   Keeps the original v5 skin and behaviour while applying
   the cleaner full-frame image treatment tested in Web 2.
======================================================= */

/* Main homepage imagery uses one consistent portrait frame. */
.product-preview-container,
.card-image-wrapper,
.custom-order-visual {
    aspect-ratio: 1 / 1.08;
}

.product-card-inner,
.card-image-wrapper,
.custom-order-visual {
    background: #0b0d0f;
}

/* Product imagery fills its frame rather than floating inside it. */
.product-main-image,
.card-img,
.custom-order-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
}

.product-main-image {
    transform: translateZ(22px);
}

.card-img-link {
    width: 100%;
    height: 100%;
}

.card-image-wrapper:hover .card-img {
    transform: scale(1.035);
}

/* Preserve the hero's vertical artwork while matching the same edge-to-edge treatment. */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Cart thumbnails now use the same full-frame crop as the storefront cards. */
.cart-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .product-preview-container,
    .card-image-wrapper,
    .custom-order-visual {
        aspect-ratio: 1 / 1.08;
    }
}

/* v5.9.19 — returns CTA contrast and centered mobile footer */
.return-support-button,
.product-return-support {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-primary);
    box-shadow: none;
}

.return-support-button:hover,
.return-support-button:focus-visible,
.product-return-support:hover,
.product-return-support:focus-visible {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: var(--text-on-primary);
    box-shadow: 0 10px 24px rgba(245, 197, 66, 0.18);
}

@media (max-width: 768px) {
    .footer {
        text-align: center;
    }

    .footer-container {
        justify-items: center;
        text-align: center;
    }

    .footer-brand {
        align-items: center;
    }

    .footer-desc,
    .footer-contact-block {
        margin-inline: auto;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        gap: 18px;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px 20px;
    }

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



/* Experimental after-hours Quick Pay */
.different-payment-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -3px 0 13px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}
.different-payment-toggle input { accent-color: var(--accent-primary); }
.checkout-privacy-note {
    margin: -4px 0 14px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}
.quick-pay-choice {
    border-color: rgba(245, 197, 66, 0.62);
    background: linear-gradient(145deg, rgba(245, 197, 66, 0.12), rgba(245, 197, 66, 0.035));
}
.compact-call-choice { padding-block: 12px; }
.compact-call-choice .link-btn { justify-self: start; margin-top: 2px; }
.quick-pay-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    margin: 16px 0;
    border: 1px solid rgba(245, 197, 66, 0.55);
    border-radius: 14px;
    background: rgba(245, 197, 66, 0.075);
}
.quick-pay-panel[hidden] { display: none !important; }
.quick-pay-panel h3 {
    min-width: 0;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 20px;
}
.quick-pay-panel h3 strong {
    display: block;
    max-width: 100%;
    margin-top: 4px;
    color: var(--accent-primary);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .015em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.quick-pay-panel > p { color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.quick-pay-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-pay-detail-grid > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(0,0,0,0.18);
}
.quick-pay-detail-grid span { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.quick-pay-detail-grid strong { overflow-wrap: anywhere; font-family: var(--font-ui); font-size: 13px; }
.quick-pay-copy { width: 100%; }
.quick-pay-code-field { margin: 0; }
.quick-pay-code-field input { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; text-align: center; }
.quick-pay-warning {
    margin: 0;
    padding: 10px 11px;
    border-left: 3px solid var(--accent-primary);
    background: rgba(0,0,0,0.14);
    font-size: 11px !important;
}
.quick-pay-back { justify-self: center; }
.quick-pay-panel.submitted { border-color: rgba(86, 194, 113, 0.55); background: rgba(86, 194, 113, 0.08); }
.quick-pay-panel.submitted #quick-pay-panel-tag { color: #79d991; }
@media (max-width: 420px) {
    .quick-pay-detail-grid { grid-template-columns: 1fr; }
}


/* v5.10.7 — every yellow interactive control uses black copy and icons. */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.return-support-button,
.return-support-button:hover,
.return-support-button:focus-visible,
.product-return-support,
.product-return-support:hover,
.product-return-support:focus-visible,
.gallery-filter.active,
.size-btn.active {
    color: var(--text-on-primary) !important;
}

.btn-primary .ui-icon,
.return-support-button .ui-icon,
.product-return-support .ui-icon,
.gallery-filter.active .ui-icon,
.size-btn.active .ui-icon {
    color: currentColor;
}

.btn-primary .btn-subtext {
    color: inherit;
}

/* v5.10.12 dashboard-managed public size table */
.public-size-guide {
    margin: 18px 0 20px;
}

.public-size-guide-scroll {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
}

.public-size-guide table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.18);
}

.public-size-guide th,
.public-size-guide td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.86rem;
}

.public-size-guide th {
    color: var(--yellow, #f7c500);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-size-guide tbody tr:last-child td {
    border-bottom: 0;
}

.public-size-guide td strong {
    color: var(--text, #f5f1e7);
}

.public-size-guide td small {
    display: block;
    margin-top: 3px;
    color: var(--muted, #aaa);
    font-size: 0.72rem;
}

.public-size-guide > p {
    margin: 10px 2px 0;
    color: var(--muted, #aaa);
    font-size: 0.78rem;
    line-height: 1.45;
}


/* =======================================================
   v5.10.16 — PUBLIC IMAGE HANDLING
======================================================= */
.thentiq-protected-image {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

.product-main-image {
    transition: opacity 180ms ease, transform var(--transition-normal);
    will-change: opacity;
}

.product-main-image.image-switching {
    opacity: 0.18;
}

/* Alternate model preview: small direct shortcut to another male/female presentation. */
.alternate-model-tile {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    background: #111318;
    box-shadow: 0 8px 22px rgba(0,0,0,.38);
    z-index: 6;
    cursor: pointer;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.alternate-model-tile:hover,
.alternate-model-tile:focus-visible {
    transform: translateY(-2px) scale(1.04);
    border-color: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.48);
    outline: none;
}
.alternate-model-tile > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.alternate-model-tile-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 17px;
    height: 17px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(9,10,14,.86);
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
    font: 700 10px/1 var(--font-ui);
}
@media (max-width: 640px) {
    .alternate-model-tile {
        top: 9px;
        left: 9px;
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }
}


/* Exact product/view selection shown in cart and required before checkout */
.cart-item-selection { display:grid; gap:2px; }
.cart-item-selection > span { color:var(--accent-primary); font-size:9px; font-weight:800; letter-spacing:.11em; }
.cart-item-selection > strong { color:var(--text-primary); font-size:11px; font-weight:700; line-height:1.35; }
.order-selection-confirmation { display:grid; gap:10px; margin:18px 0; padding:16px; border:1px solid rgba(245,197,66,.45); border-radius:14px; background:linear-gradient(145deg,rgba(245,197,66,.08),rgba(0,126,135,.045)); }
.order-selection-confirmation h3 { margin:0; font-family:var(--font-heading); font-size:18px; }
.order-selection-confirmation > p { margin:0; color:var(--text-secondary); font-size:12px; line-height:1.5; }
.checkout-selection-summary { display:grid; gap:8px; }
.checkout-selection-item { display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:center; padding:9px; border:1px solid var(--border-color); border-radius:10px; background:rgba(0,0,0,.16); }
.checkout-selection-item img { width:52px; height:52px; object-fit:cover; border-radius:8px; }
.checkout-selection-item div { min-width:0; display:grid; gap:3px; }
.checkout-selection-item strong { font-size:12px; line-height:1.3; }
.checkout-selection-item span { color:var(--text-secondary); font-size:10px; line-height:1.4; }
.order-confirmation-check { display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; padding:12px; border:1px solid rgba(86,194,113,.4); border-radius:10px; background:rgba(86,194,113,.055); cursor:pointer; }
.order-confirmation-check input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent-primary); }
.order-confirmation-check span { display:grid; gap:4px; }
.order-confirmation-check strong { font-size:12px; line-height:1.4; }
.order-confirmation-check small { color:var(--text-secondary); font-size:10px; line-height:1.4; }
.order-selection-note { padding-left:10px; border-left:2px solid var(--accent-primary); }


/* Guided final-order confirmation gate: Pay Now remains clickable so an
   unconfirmed customer can be taken to the required check, then returned. */
.confirmation-gated {
    opacity: .68;
    cursor: pointer;
}
.confirmation-gated:hover,
.confirmation-gated:focus-visible {
    opacity: .82;
}
@keyframes confirmationAttentionPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,66,0); }
    30% { box-shadow: 0 0 0 5px rgba(245,197,66,.18), 0 0 24px rgba(245,197,66,.22); }
    65% { box-shadow: 0 0 0 2px rgba(245,197,66,.5), 0 0 12px rgba(245,197,66,.16); }
}
@keyframes confirmationCheckPulse {
    0%, 100% { border-color: rgba(86,194,113,.4); background: rgba(86,194,113,.055); }
    35%, 70% { border-color: rgba(245,197,66,.95); background: rgba(245,197,66,.14); }
}
@keyframes paymentReturnPulse {
    0%, 100% { box-shadow: none; }
    35%, 70% { box-shadow: 0 0 0 3px rgba(86,194,113,.2), 0 0 20px rgba(86,194,113,.14); }
}
.order-selection-confirmation.confirmation-attention {
    animation: confirmationAttentionPulse .85s ease-in-out 2;
}
.order-confirmation-check.confirmation-attention-check {
    animation: confirmationCheckPulse .85s ease-in-out 2;
}
.payment-choice-card.payment-return-attention {
    animation: paymentReturnPulse .8s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
    .order-selection-confirmation.confirmation-attention,
    .order-confirmation-check.confirmation-attention-check,
    .payment-choice-card.payment-return-attention {
        animation: none;
        outline: 2px solid var(--accent-primary);
        outline-offset: 3px;
    }
}

/* v5.10.17 — 360px mobile typography + footer containment correction.
   Keep the approved visual language, but never let display type or max-content
   footer links define a track wider than the handset viewport. */
@media (max-width: 768px) {
    .hero-content,
    .hero-title,
    .section-header,
    .section-title,
    .footer,
    .footer-container,
    .footer-brand,
    .footer-contact-block,
    .footer-bottom,
    .footer-links {
        min-width: 0;
        max-width: 100%;
    }

    .footer {
        width: 100%;
        padding-inline: 16px;
    }

    .footer-container,
    .footer-bottom {
        width: 100%;
    }

    .footer-desc,
    .footer-contact-block {
        width: 100%;
        max-width: 100%;
    }

    .footer-icon-link {
        width: auto;
        max-width: 100%;
        white-space: normal;
        justify-content: center;
        text-align: center;
        line-height: 1.45;
    }

    .footer-icon-link > span {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .footer-map-link .map-external-icon {
        flex: 0 0 auto;
    }

    .footer-links {
        width: 100%;
        padding-inline: 4px;
    }
}

@media (max-width: 420px) {
    .hero-section {
        padding-inline: 16px;
    }

    .hero-tag {
        font-size: 12px;
        line-height: 1.35;
        max-width: 100%;
    }

    .hero-title {
        width: 100%;
        font-size: clamp(28px, 8.9vw, 32px);
        line-height: .98;
        letter-spacing: -0.035em;
        text-align: center;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero-title .gradient-text {
        display: inline;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.58;
    }

    .section-title {
        font-size: clamp(28px, 8.5vw, 34px);
        overflow-wrap: break-word;
    }

    .footer {
        padding-inline: 16px;
    }

    .footer-desc {
        font-size: 13px;
        line-height: 1.65;
    }

    .footer-contact-block {
        font-size: 14px;
    }

    .footer-bottom {
        font-size: 10px;
    }

    .footer-links {
        gap: 10px 16px;
    }
}

/* Returning-customer recognition */
.welcome-back-overlay{position:fixed;inset:0;z-index:2147482500;display:grid;place-items:center;padding:20px;background:rgba(6,7,8,.94);backdrop-filter:blur(12px)}.welcome-back-overlay[hidden]{display:none}.welcome-back-card{width:min(620px,100%);padding:clamp(28px,6vw,58px);border:1px solid rgba(255,255,255,.09);border-radius:30px;background:radial-gradient(circle at 50% 0,rgba(53,185,193,.12),transparent 42%),#101013;text-align:center;box-shadow:0 26px 80px rgba(0,0,0,.48)}.welcome-back-kicker{display:block;color:#5fc8cf;font:700 11px/1 'Space Grotesk',sans-serif;letter-spacing:.24em;margin-bottom:16px}.welcome-back-card h2{margin:0;font:800 clamp(42px,8vw,72px)/.92 'Syne',sans-serif;letter-spacing:-.055em}.welcome-back-card p{max-width:500px;margin:20px auto 28px;color:#b6b0a7;line-height:1.7}.welcome-back-gift{margin:0 auto 26px;padding:18px;border-radius:18px;background:#f1bd21;color:#17130a;text-align:left}.welcome-back-gift strong,.welcome-back-gift span{display:block}.welcome-back-gift span{margin-top:5px;font-size:13px}.welcome-back-card .btn{min-width:190px}@media(max-width:520px){.welcome-back-card{border-radius:22px;padding:30px 20px}.welcome-back-card h2{font-size:48px}}

/* navigation grouping */
.nav-link.nav-group-start {
    margin-left: 14px;
}
.nav-link.nav-group-start::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 50%;
    width: 1px;
    height: 18px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.14);
}
.mobile-link.mobile-group-start {
    margin-top: 9px;
    padding-top: 18px;
    position: relative;
}
.mobile-link.mobile-group-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 54px;
    height: 1px;
    transform: translateX(-50%);
    background: rgba(255,255,255,.14);
}
@media (max-width: 1180px) and (min-width: 981px) {
    .nav { gap: 24px; }
    .nav-link.nav-group-start { margin-left: 8px; }
    .nav-link.nav-group-start::before { left: -17px; }
}

/* compact mobile reading path.
   Keep the buying decisions, remove repeated/explanatory copy that crowds a
   handset, and let the visual product work do more of the selling. */
@media (max-width: 600px) {
    .hero-description {
        max-width: 31rem;
        font-size: 15px;
        line-height: 1.48;
    }

    .hero-trust-row {
        display: none;
    }

    .showcase-section .product-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        margin-bottom: 22px;
        line-height: 1.5;
    }

    .showcase-section .specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 28px;
    }

    .showcase-section .spec-item:nth-child(2) {
        display: none;
    }

    .showcase-section .spec-val {
        font-size: 13px;
    }

    .showcase-section .swatch {
        min-height: 48px;
        padding: 10px 12px;
    }

    .showcase-section .swatch-context {
        display: none;
    }

    .showcase-section .swatch-text {
        min-width: 0;
        font-size: 13px;
        line-height: 1.3;
        text-align: left;
    }

    .showcase-section .stock-note {
        display: none;
    }

    #collection .section-subtitle,
    .collection-page-hero .section-subtitle {
        display: none;
    }

    #collection .section-title {
        max-width: 19rem;
        margin-inline: auto;
        font-size: clamp(25px, 7.8vw, 30px);
        line-height: .98;
    }

    .shop-info-section .info-card p {
        font-size: 14px;
        line-height: 1.5;
    }
}


/* mobile navigation scale + featured-product decision flow. */
.featured-mobile-preview {
    display: none;
}

@media (max-width: 600px) {
    /* Navigation should read like navigation, not a poster. Keep every item
       reachable on short phones while preserving the branded display face. */
    .mobile-nav {
        gap: 10px;
        padding: 18px 18px 28px;
    }

    .mobile-link {
        width: min(310px, 100%);
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-size: clamp(17px, 4.8vw, 20px);
        line-height: 1.05;
        letter-spacing: .01em;
        text-align: center;
        white-space: nowrap;
    }

    .mobile-link .ui-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .mobile-link.mobile-group-start {
        margin-top: 4px;
        padding-top: 14px;
    }

    .mobile-link.mobile-group-start::before {
        width: 44px;
    }

    /* On mobile the featured block is a decision surface: image first, then
       compact choices. Remove duplicated specifications that push controls far
       away from the product visual. */
    .showcase-section {
        padding-top: 64px;
        padding-bottom: 72px;
    }

    .showcase-section .section-header {
        margin-bottom: 22px;
    }

    .showcase-section #featured-section-title {
        display: none;
    }

    .showcase-grid {
        gap: 24px;
    }

    .showcase-section .product-title {
        font-size: clamp(23px, 6.7vw, 28px);
        line-height: 1.04;
        margin-bottom: 9px;
    }

    .showcase-section .product-meta {
        gap: 10px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    .showcase-section .product-price {
        font-size: 20px;
    }

    .showcase-section .product-desc {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 18px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .showcase-section .specs-grid {
        display: none;
    }

    .showcase-section .config-group {
        margin-bottom: 22px;
    }

    .showcase-section .config-label {
        margin-bottom: 10px;
        color: var(--text-secondary);
    }

    /* Desktop can keep the full vertical comparison. Mobile gets a compact
       horizontally scrollable design strip so changing a design is one short
       gesture rather than a half-page list. */
    .showcase-section .color-swatches {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 1px 7px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .showcase-section .color-swatches::-webkit-scrollbar {
        display: none;
    }

    .showcase-section .swatch {
        flex: 0 0 142px;
        width: 142px;
        min-height: 54px;
        padding: 9px 10px;
        gap: 8px;
        scroll-snap-align: start;
    }

    .showcase-section .swatch-color {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .showcase-section .swatch-text {
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.18;
        text-align: left;
    }

    .showcase-section .swatch-design {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .showcase-section .size-selector {
        gap: 8px;
    }

    .showcase-section .size-btn {
        min-width: 0;
    }

    /* Once the large featured image has scrolled off screen, retain a small
       visual reference while the customer changes design/size. It disappears
       outside the featured section and while the menu is open. */
    .featured-mobile-preview {
        display: flex;
        position: fixed;
        top: calc(var(--hdr-height) + 8px);
        left: 12px;
        right: 12px;
        z-index: 92;
        height: 72px;
        padding: 7px 10px 7px 7px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 16px;
        background: rgba(12,14,16,.96);
        box-shadow: 0 14px 34px rgba(0,0,0,.38);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        color: var(--text-primary);
        align-items: center;
        gap: 10px;
        text-align: left;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .featured-mobile-preview.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
    }

    body.mobile-menu-open .featured-mobile-preview {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .featured-mobile-preview-thumb {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
        overflow: hidden;
        border-radius: 11px;
        background: #111316;
        border: 1px solid rgba(255,255,255,.08);
    }

    .featured-mobile-preview-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .featured-mobile-preview-copy {
        min-width: 0;
        flex: 1 1 auto;
        display: grid;
        gap: 3px;
    }

    .featured-mobile-preview-copy strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--font-ui);
        font-size: 13px;
        line-height: 1.2;
    }

    .featured-mobile-preview-copy small {
        color: var(--text-secondary);
        font-family: var(--font-ui);
        font-size: 10px;
        line-height: 1.2;
    }

    .featured-mobile-preview-action {
        flex: 0 0 auto;
        color: var(--accent-primary);
        font-family: var(--font-ui);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
    }
}


/* mobile featured preview visibility hotfix.
   The base rule intentionally hides the preview outside mobile, while the
   mobile rule must explicitly restore flex display before the is-visible
   state can reveal it. */

/* mobile featured containment hotfix.
   Horizontal design choices must scroll inside their own rail, never widen the
   page/grid item. Keep every buying control and the featured image inside the
   handset viewport at 360–430px. */
@media (max-width: 600px) {
    .showcase-section,
    .showcase-grid,
    .showcase-grid > *,
    .product-preview-container,
    .product-card-inner,
    .product-details,
    .product-configurator,
    .showcase-section .config-group,
    .showcase-section .size-label-wrapper,
    .showcase-section .size-selector,
    .showcase-section .add-to-cart-wrapper {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .showcase-section {
        overflow-x: clip;
    }

    .showcase-section .color-swatches {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        contain: inline-size;
    }

    .showcase-section .swatch {
        max-width: 142px;
    }

    .showcase-section .product-title,
    .showcase-section .product-desc,
    .showcase-section .swatch-text,
    .showcase-section .swatch-design {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .showcase-section .product-preview-container {
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .showcase-section .product-main-image {
        width: 90%;
        height: 90%;
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    .showcase-section #add-to-cart-btn,
    .showcase-section #featured-availability-link,
    .showcase-section #featured-whatsapp {
        width: 100%;
        max-width: 100%;
    }

    .featured-mobile-preview {
        width: auto;
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }
}

/* =======================================================
   SIZING + MOBILE DESIGN RAIL
   - sizing visual replays before every local Size Guide open
   - mobile sizing modal is compact and chart-first
   - mobile design choices show three complete choices; the rail advances only
     when the customer chooses the visible edge option
======================================================= */
.sizing-tips h3 {
    margin: 0 0 10px;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

#size-modal .modal-body {
    max-height: min(72vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

@media (max-width: 600px) {
    /* Make the actual measurement chart the first, compact mobile screen. */
    #size-modal {
        width: calc(100% - 24px);
        max-width: 420px;
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
    }

    #size-modal .modal-header {
        padding: 12px 14px;
        gap: 10px;
    }

    #size-modal .modal-title {
        min-width: 0;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0.01em;
    }

    #size-modal .modal-title .ui-icon {
        width: 17px;
        height: 17px;
    }

    #size-modal .close-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    #size-modal .modal-body {
        max-height: calc(100dvh - 88px);
        padding: 14px;
    }

    #size-modal .public-size-guide {
        margin: 0 0 12px;
    }

    #size-modal .public-size-guide-scroll {
        overflow-x: hidden;
        border-radius: 10px;
    }

    #size-modal .public-size-guide table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    #size-modal .public-size-guide th,
    #size-modal .public-size-guide td {
        padding: 8px 7px;
        font-size: 12px;
    }

    #size-modal .public-size-guide th {
        font-size: 10px;
        letter-spacing: 0.06em;
    }

    /* Chest + body length are the core quick-fit measurements on phones. */
    #size-modal .public-size-guide th:nth-child(n+4),
    #size-modal .public-size-guide td:nth-child(n+4) {
        display: none;
    }

    #size-modal .public-size-guide > p {
        margin: 7px 1px 0;
        font-size: 11px;
        line-height: 1.35;
    }

    #size-modal .modal-intro {
        margin: 0 0 12px;
        font-size: 12px;
        line-height: 1.45;
    }

    #size-modal .size-range {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 14px;
    }

    #size-modal .size-range span {
        min-height: 40px;
        border-radius: 8px;
        font-size: 13px;
    }

    #size-modal .sizing-tips {
        padding: 13px;
        border-radius: 10px;
    }

    #size-modal .sizing-tips h3 {
        margin-bottom: 8px;
        font-size: 14px;
    }

    #size-modal .sizing-tips ul {
        gap: 5px;
        font-size: 12px;
        line-height: 1.4;
    }

    /* Three complete design choices are visible. No permanently clipped fourth
       card and no free-scrolling rail; choosing an edge card advances one step. */
    .showcase-section .color-swatches {
        overflow-x: hidden;
        scroll-snap-type: none;
        scroll-behavior: smooth;
        padding-right: 0;
        touch-action: pan-y;
    }

    .showcase-section .swatch {
        flex: 0 0 calc((100% - 16px) / 3);
        width: calc((100% - 16px) / 3);
        max-width: none;
        min-width: 0;
        padding: 8px 7px;
        gap: 6px;
    }

    .showcase-section .swatch-text {
        font-size: 11px;
        line-height: 1.15;
    }

    .showcase-section .swatch-color {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }

    /* Keep the sizing transition image fully visible on narrow phones. */
    #page-transition .page-transition-sizing {
        width: min(92vw, 440px);
    }

    #page-transition .page-transition-sizing-media {
        width: min(92vw, 440px);
        border-radius: 18px;
    }

    #page-transition .page-transition-sizing-image {
        object-fit: contain;
        background: #111317;
    }
}

/* =======================================================
   deep public mobile-width audit guards
   Keep normal content inside 360–430px handsets. Horizontal overflow remains
   intentional only inside explicit scrollers such as the Featured design rail.
======================================================= */
.product-origin-tag.product-origin-tag--original{color:var(--accent-primary)}
.product-origin-tag.product-origin-tag--inspired{color:var(--text-primary)}

@media (max-width: 600px) {
    main,
    main > *,
    section,
    section > *,
    .collection-page-main,
    .collection-page-main > *,
    .collection-page-hero,
    .collection-page-note,
    .returns-page,
    .returns-page > *,
    .return-policy-card,
    .shop-info-section,
    .shop-info-section > *,
    .info-grid,
    .info-card,
    .custom-order-section,
    .custom-order-section > *,
    .custom-order-grid,
    .custom-order-copy,
    .custom-order-form,
    .footer,
    .footer-container,
    .footer-bottom {
        min-width: 0;
        max-width: 100%;
    }

    section { padding-left: 16px; padding-right: 16px; }

    .collection-page-main,
    .returns-page { overflow-x: clip; }

    .collection-page-main { width: calc(100% - 24px); }
    .collection-page-note,
    .return-policy-card,
    .info-card { width: 100%; overflow: hidden; }

    .icon-label:not(.mobile-link),
    .icon-label:not(.mobile-link) > span {
        min-width: 0;
        max-width: 100%;
    }
    .icon-label:not(.mobile-link) > span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .btn,
    button,
    input,
    select,
    textarea { max-width: 100%; }

    img, video, canvas, svg:not(.ui-icon) { max-width: 100%; }
}
.product-origin-tag.product-origin-tag--original{border-left-color:var(--accent-primary)}
.product-origin-tag.product-origin-tag--inspired{border-left-color:rgba(247,244,236,.48)}


/* final non-product mobile typography consistency pass. */
@media (max-width: 600px) {
    .contact-panel,
    .contact-panel > div {
        min-width: 0;
        max-width: 100%;
    }
    .contact-panel > div { width: 100%; }
    .contact-phone {
        width: auto;
        max-width: 100%;
        margin-inline: auto;
        justify-content: center;
        font-size: clamp(18px, 5.8vw, 22px);
        line-height: 1.1;
        letter-spacing: -.02em;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }
    .returns-hero h1 {
        max-width: 100%;
        font-size: clamp(32px, 9vw, 38px);
        line-height: .94;
        letter-spacing: -.035em;
        overflow-wrap: normal;
        word-break: normal;
        text-wrap: balance;
    }
    .welcome-back-card h2 {
        max-width: 100%;
        font-size: clamp(34px, 10.5vw, 44px);
        line-height: .94;
        letter-spacing: -.045em;
        overflow-wrap: normal;
        word-break: normal;
        text-wrap: balance;
    }
}

/* =======================================================
   focused mobile commercial hierarchy
   - collection price: FROM above a stronger amount
   - Featured CTA: concise yellow action, helper outside button
======================================================= */
.card-price-prefix,
.card-price-amount { display: inline; }
.featured-cart-note { display: none; }

@media (max-width: 600px) {
    .character-collection-card .card-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        white-space: nowrap;
        line-height: 1.05;
    }
    .character-collection-card .card-price-prefix {
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .06em;
    }
    .character-collection-card .card-price-amount {
        color: var(--text-primary);
        font-size: 18px;
        font-weight: 850;
        letter-spacing: -.02em;
    }

    .showcase-section #add-to-cart-btn {
        min-height: 58px;
        padding: 15px 18px;
        border-radius: 12px;
        justify-content: center;
        gap: 10px;
    }
    .showcase-section #add-to-cart-btn .ui-icon {
        width: 1.3rem;
        height: 1.3rem;
    }
    .showcase-section #add-to-cart-btn .btn-copy {
        align-items: center;
    }
    .showcase-section #add-to-cart-btn .btn-subtext {
        display: none;
    }
    .showcase-section .featured-cart-note {
        display: block;
        margin: 7px 0 0;
        color: var(--text-muted);
        font-family: var(--font-body);
        font-size: 11px;
        line-height: 1.35;
        text-align: center;
    }
}


/* =======================================================
   collection + Featured composition fix
   - Collection price cannot clip on narrow cards.
   - Desktop keeps FROM + amount on one line with clear hierarchy.
   - Featured mobile mockup fills its single frame (no box-in-box inset).
   - Featured design choices use one selection/focus border only.
======================================================= */
.character-collection-card .card-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    line-height: 1.05;
}
.character-collection-card .card-price-prefix {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .055em;
}
.character-collection-card .card-price-amount {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: -.015em;
}

.showcase-section .swatch.active {
    box-shadow: none;
}
.showcase-section .swatch:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: none;
}

@media (max-width: 600px) {
    .character-collection-card .card-info-stacked {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: start;
        column-gap: 10px;
        row-gap: 12px;
    }
    .character-collection-card .card-info-stacked > div:first-child {
        min-width: 0;
    }
    .character-collection-card .card-price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2px;
        margin-left: 0;
        max-width: 100%;
    }
    .character-collection-card .card-price-prefix {
        font-size: 10px;
    }
    .character-collection-card .card-price-amount {
        font-size: 17px;
    }

    .showcase-section .product-preview-container,
    .showcase-section .product-card-inner {
        aspect-ratio: 1 / 1;
    }
    .showcase-section .product-main-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none;
        filter: none;
    }
}


/* =======================================================
   Quick Pay reference containment
   - Full order reference stays visible inside the payment card.
   - Reference uses compact UI typography instead of the wide display face.
======================================================= */
.quick-pay-panel { min-width: 0; }
#quick-pay-order-reference { min-width: 0; }


/* =======================================================
   360px checkout containment
   - Featured CTA keeps helper copy outside the yellow button.
   - Saved-order and Quick Pay references use compact, wrap-safe UI type.
======================================================= */
.showcase-section #add-to-cart-btn .btn-subtext {
    display: none !important;
}

.assisted-order-ready,
.quick-pay-panel,
.assisted-order-ready h3,
.quick-pay-panel h3 {
    min-width: 0;
    max-width: 100%;
}

#assisted-order-reference,
#quick-pay-order-reference {
    min-width: 0;
    max-width: 100%;
    font-family: var(--font-ui);
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 600px) {
    .showcase-section .featured-cart-note {
        display: block !important;
    }

    .assisted-order-ready h3,
    .quick-pay-panel h3 {
        display: grid;
        gap: 5px;
        width: 100%;
    }

    .assisted-order-ready h3 .reference-label,
    .quick-pay-panel h3 .reference-label {
        display: block;
        font-family: var(--font-heading);
        font-size: 16px;
        line-height: 1.1;
    }

    #assisted-order-reference,
    #quick-pay-order-reference {
        display: block;
        width: 100%;
        font-size: clamp(14px, 4.3vw, 17px);
    }
}

/* =======================================================
   final 360–430px checkout/mobile containment
   Keep every checkout control reachable without horizontal drift or iOS form zoom.
======================================================= */
@media (max-width: 430px) {
    .cart-drawer {
        width: 100vw;
        max-width: 100vw;
        border-left: 0;
    }
    .cart-scroll-area { scrollbar-gutter: auto; }
    .cart-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .cart-items-container {
        min-width: 0;
        padding: 20px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
        gap: 20px;
    }
    .cart-summary {
        min-width: 0;
        padding: 20px max(16px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }
    .cart-item {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px;
        min-width: 0;
    }
    .cart-item-img-wrapper { width: 68px; height: 68px; }
    .cart-item-details,
    .cart-item-top,
    .cart-item-bottom,
    .mpesa-checkout-flow,
    .payment-choice-grid,
    .payment-choice-card,
    .checkout-field,
    .checkout-selection-summary,
    .checkout-selection-item,
    .order-confirmation-check,
    .assisted-order-ready,
    .quick-pay-panel,
    .quick-pay-detail-grid,
    .payment-status {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .cart-item-name,
    .cart-item-meta,
    .payment-choice-card > strong,
    .payment-choice-card > span,
    .checkout-selection-item strong,
    .checkout-selection-item span,
    .order-confirmation-check strong,
    .order-confirmation-check small {
        overflow-wrap: anywhere;
    }
    /* iOS otherwise zooms the page when focusing 13px checkout fields. */
    .cart-drawer input,
    .cart-drawer select,
    .cart-drawer textarea,
    .modal input,
    .modal select,
    .modal textarea {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }
}

/* image likes and destination selector */
.checkout-field[hidden]{display:none!important}
.delivery-destination-select{width:100%}



/* one contained destination picker on mobile and desktop.
   The native select remains the canonical form/calculation value, but the customer
   always uses the THENTIQ picker so browser dropdown geometry cannot escape the drawer. */
.delivery-location-native { display: none; }
.delivery-location-mobile-trigger {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    text-align: left;
    font-weight: 700;
    border-color: var(--accent-primary);
}
.delivery-location-mobile-trigger > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.delivery-location-mobile-trigger .ui-icon { flex: 0 0 auto; transform: rotate(90deg); }
.delivery-location-mobile-picker[hidden] { display: none !important; }
.delivery-location-mobile-picker {
    position: absolute;
    top: var(--hdr-height, 72px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 260;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    background: #0b0c10;
    border-top: 1px solid var(--border-color);
}
.delivery-location-mobile-picker-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border-color);
    background: #0b0c10;
}
.delivery-location-mobile-picker-header > div { min-width: 0; }
.delivery-location-mobile-picker-header .config-label { display: block; margin-bottom: 4px; }
.delivery-location-mobile-picker-header strong { display: block; font-family: var(--font-heading); font-size: 20px; line-height: 1.05; }
.delivery-location-mobile-close { flex: 0 0 auto; }
.delivery-location-mobile-options {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px 20px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.delivery-location-option {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 12px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.delivery-location-option > span { min-width: 0; display: grid; gap: 3px; }
.delivery-location-option strong { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.delivery-location-option small { color: var(--text-secondary); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.delivery-location-option b { flex: 0 0 auto; color: var(--accent-primary); font-family: var(--font-ui); font-size: 13px; white-space: nowrap; }
.delivery-location-option.active {
    background: rgba(245,197,66,.08);
    box-shadow: inset 3px 0 0 var(--accent-primary);
}
.cart-drawer.delivery-picker-open .cart-scroll-area { overflow: hidden; }

@media (max-width: 430px) {
    .delivery-location-mobile-picker-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .delivery-location-mobile-options {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* dashboard-managed public social-profile trust links */
.footer-socials { display: grid; gap: 8px; margin-top: 4px; }
.footer-social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-social-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255,255,255,.018);
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.footer-social-link:hover { color: var(--text-primary); border-color: var(--border-color-hover); background: rgba(255,255,255,.035); }
.social-public-icon {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (max-width: 768px) {
    .footer-socials { justify-items: center; }
    .footer-social-links { justify-content: center; }
}

/* secondary one-off retail doorway beneath the main Nostalgia range */
.more-designs-entry {
    width: min(100%, 760px);
    margin: 38px auto 0;
    padding: clamp(22px, 4vw, 38px);
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,126,135,.04));
}
.more-designs-entry[hidden] { display: none !important; }
.more-designs-entry h3 { margin: .55rem 0; font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.8rem); }
.more-designs-entry p { max-width: 590px; margin: 0 auto 1rem; color: var(--text-secondary); }
.more-designs-entry .btn { margin-inline: auto; }

/* custom-order deposit policy */
.custom-order-deposit-note {
    display: grid;
    gap: .35rem;
    margin: 1rem 0 1.2rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}
.custom-order-deposit-note strong {
    font-family: var(--font-ui);
    font-size: .72rem;
    letter-spacing: .09em;
}
.custom-order-deposit-note span {
    color: var(--text-secondary);
    line-height: 1.55;
}