/* Avashop materials: translucent navigation, pearl content, dense overlays. */
:root {
    /* Brand & Boutique Color Palette */
    --ava-page-bg: #FAF8FC;
    --ava-surface: #FFFFFF;
    --ava-ink: #19162B;
    --ava-ink-secondary: #615C72;
    --ava-ink-muted: #615C72;

    /* Violet Boutique Accents */
    --ava-violet: #6D28D9;
    --ava-violet-hover: #5B21B6;
    --ava-violet-active: #4C1D95;
    --ava-violet-tint: rgba(109, 40, 217, 0.08);
    --ava-violet-glow: rgba(109, 40, 217, 0.35);
    --ava-rose-accent: #E11D48;
    --ava-search-blue: #0969DA;

    /* Semantic Status */
    --ava-success: #059669;
    --ava-warning: #D97706;
    --ava-danger: #DC2626;

    /* Radii Scale */
    --ava-radius-small: 12px;
    --ava-radius-medium: 16px;
    --ava-radius-large: 24px;
    --ava-radius-pill: 999px;

    /* Sizing Scale */
    --ava-touch-target: 44px;
    --ava-input-height: 52px;
    --ava-dock-h: 58px;

    /* Motion Curves matching Apple iOS 26 Fluid Bouncy Spring */
    --ava-ease-snappy: cubic-bezier(0.22, 1, 0.36, 1);
    --ava-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ava-dur-fast: 160ms;
    --ava-dur-normal: 240ms;
    --ava-dur-morph: 300ms;

    /* ==========================================================================
       LIQUID GLASS OPTICS & PHYSICAL SPECIFICATIONS
       ========================================================================== */
    --ava-liquid-tint: rgba(255, 255, 255, 0.48);
    --ava-liquid-blur: 24px;
    --ava-liquid-saturate: 220%;
    --ava-liquid-contrast: 112%;
    --ava-liquid-brightness: 106%;

    /* Quadruple Optical Bevel:
       1. Top Prismatic Sun Catch (1.5px bright white specular)
       2. Lateral Edge Sheen (1px translucent glass refraction)
       3. Bottom Sub-surface Scattering (Ambient Violet Absorption)
       4. Inner Deep Core Occlusion */
    --ava-liquid-specular-inner:
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -1.5px 1.5px 0 rgba(109, 40, 217, 0.12),
        inset 1.5px 0 1.5px 0 rgba(255, 255, 255, 0.70),
        inset -1.5px 0 1.5px 0 rgba(255, 255, 255, 0.70),
        inset 0 0 16px 0 rgba(255, 255, 255, 0.30);

    /* Volumetric Liquid Drop Shadows */
    --ava-liquid-shadow:
        0 24px 48px -12px rgba(25, 22, 43, 0.22),
        0 12px 24px -6px rgba(25, 22, 43, 0.12),
        0 4px 8px -2px rgba(25, 22, 43, 0.06);
}

/* ==========================================================================
   1. NAVIGATION LIQUID GLASS (.ava-glass-nav)
   SwiftUI: .glassEffect(.regular, in: .capsule)
   ========================================================================== */
/* 1. Navigation Liquid Glass: Header & Mobile Floating Capsule */
.ava-glass-nav {
    position: relative;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.90) !important;
    box-shadow: 0 4px 20px -2px rgba(25, 22, 43, 0.08);
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .ava-glass-nav {
        background: rgba(255, 255, 255, 0.72) !important;
        backdrop-filter: 
            blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: 
            blur(20px) saturate(160%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.90) !important;
        box-shadow: 
            0 12px 32px -6px rgba(25, 22, 43, 0.10),
            inset 0 1.5px 0 rgba(255, 255, 255, 0.98),
            inset 0 -1px 0 rgba(109, 40, 217, 0.06) !important;
    }
}

/* 2. Action Liquid Glass (.ava-glass-action) */
.ava-glass-action {
    position: relative;
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 
        0 12px 28px -4px rgba(109, 40, 217, 0.50),
        0 6px 12px -2px rgba(109, 40, 217, 0.35),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 -1.5px 1px 0 rgba(76, 29, 149, 0.55) !important;
    overflow: hidden;
    transition: transform var(--ava-dur-fast) var(--ava-ease-snappy), box-shadow var(--ava-dur-fast) ease;
}

.ava-glass-action:hover {
    box-shadow: 
        0 16px 36px -4px rgba(109, 40, 217, 0.60),
        0 8px 16px -2px rgba(109, 40, 217, 0.40),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.90) !important;
    transform: translateY(-1.5px);
}

.ava-glass-action:active {
    transform: scale(0.975);
}

/* 3. Overlay Liquid Glass (.ava-glass-overlay) & Glass Panels (.ava-glass-strong) */
.ava-glass-overlay,
.ava-glass-strong {
    background: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 
        0 24px 48px -12px rgba(25, 22, 43, 0.18),
        0 8px 16px -4px rgba(25, 22, 43, 0.08),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(109, 40, 217, 0.08) !important;
}

@supports (backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px)) {
    .ava-glass-overlay,
    .ava-glass-strong {
        background: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    }
}

/* ==========================================================================
   4. SOLID FALLBACK (.ava-glass-solid)
   iOS 26.2+ Lock Screen Solid & Accessibility fallback
   ========================================================================== */
.ava-glass-solid,
[data-ava-glass="solid"] .ava-glass-nav,
[data-ava-glass="solid"] .ava-glass-overlay,
[data-ava-glass="solid"] .ava-glass-strong,
[data-ava-glass="solid"] .ava-glass-card,
[data-ava-glass="solid"] .glass-card {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .ava-glass-nav,
    .ava-glass-overlay,
    .ava-glass-strong,
    .ava-glass-card,
    .glass-card {
        background: #FFFFFF !important;
        border-color: #CBD5E1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    }
}

/* ==========================================================================
   FLUID MOTION & INTERACTION KEYFRAMES (iOS 26 Spring Curves)
   ========================================================================== */

.variation-card.is-selected {
    border-color: var(--ava-violet) !important;
    background-color: var(--ava-violet-tint) !important;
    box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.35) !important;
    animation: avaVarPulse 260ms var(--ava-ease-snappy) forwards;
}

.variation-card.is-selected-preorder {
    border-color: #9333EA !important;
    background-color: rgba(250, 245, 255, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.35) !important;
    animation: avaPreorderGlow 320ms var(--ava-ease-snappy) forwards;
}

@keyframes avaVarPulse {
    0% { transform: scale(0.96); }
    50% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

@keyframes avaPreorderGlow {
    0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.6); }
    50% { transform: scale(1.025); box-shadow: 0 0 16px rgba(147, 51, 234, 0.35); }
    100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.35); }
}

.cart-badge.pop-trigger {
    animation: avaBadgePop 340ms var(--ava-ease-spring) forwards;
}

@keyframes avaBadgePop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes avaDockFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Reduced Motion Override (iOS 26.4 Standard) */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   INPUTS & TOUCH SIZING ENFORCEMENT & PRIMARY BUTTON STYLING
   ========================================================================== */

#add-to-cart-btn,
button#add-to-cart-btn {
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 12px 28px -4px rgba(109, 40, 217, 0.50), inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1.5px 1px 0 rgba(76, 29, 149, 0.55) !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
}

#add-to-cart-btn:disabled,
button#add-to-cart-btn:disabled {
    background: #E2E8F0 !important;
    color: #64748B !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.qty-btn {
    min-width: 44px !important;
    min-height: 44px !important;
}

.qty-input-group {
    min-height: 52px !important;
}

/* Clean Search Input Clear Control */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* Standardized Empty Panel */
.ava-empty-panel {
    max-width: 720px;
    margin: 32px auto;
    padding: 32px 24px;
    border-radius: var(--ava-radius-large);
    text-align: center;
}
@media (min-width: 768px) {
    .ava-empty-panel {
        padding: 56px 40px;
    }
}
.ava-empty-icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   5. CONTENT CARDS (.ava-glass-card) - light glass for page-level panels
   ========================================================================== */
/* ponytail: content panels stay opaque enough for text; reserve blur for navigation and overlays. */
.ava-glass-card,
.glass-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #E5DFEF;
    box-shadow: 0 8px 24px -12px rgba(25, 22, 43, 0.14), inset 0 1px 0 #FFFFFF;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .ava-glass-card,
    .glass-card {
        background: #FFFFFF;
        border-color: #CBD5E1;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Desktop sticky order summary column */
@media (min-width: 1024px) {
    .ava-summary {
        position: sticky;
        top: 160px;
    }
}

/* Focus ring on glass cards for keyboard users */
.ava-glass-card:has(a:focus-visible),
.ava-glass-card:has(button:focus-visible),
.ava-glass-card:has(input:focus-visible) {
    box-shadow:
        0 0 0 2px rgba(109, 40, 217, 0.35),
        0 8px 24px -12px rgba(25, 22, 43, 0.14);
}

/* Pearl canvas and restrained footer. No extra backdrop layer. */
body {
    background: radial-gradient(ellipse at 90% 0%, #F0E9FA 0, transparent 42rem), var(--ava-page-bg);
    color: var(--ava-ink);
}
footer.footer {
    background: #211B30;
    border-color: #504361;
    border-start-start-radius: var(--ava-radius-large);
    border-start-end-radius: var(--ava-radius-large);
}
footer.footer a { min-height: 44px; }
footer.footer nav a { display: flex; align-items: center; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ava-violet-hover);
    outline-offset: 3px;
}
footer.footer :focus-visible { outline-color: #C4B5FD; }
html { scroll-padding-top: 160px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
}