/* General Styles */
/* Variables */
:root {
    /* D&D-inspired palette (derived from logo: deep maroon, parchment, warm gold) */
    --primary: #314048; /* deep maroon for primary headings and accents */
    /* Parallax tuning: how much the featured background moves (percent) */
    --featured-parallax-range: 35;
    --primary-dark: #2a0b0b;
    --secondary: #221616; /* near-black warm */
    --accent: #c9a34a; /* warm gold preserved from logo */
    --text: #111010; /* near-black with warmth */
    --text-light: #7a6f66; /* muted parchment-gray */
    --background: #f6efe6; /* soft parchment */
    --card-bg: #fffaf5; /* warmer card surface */
    --bg: var(--card-bg);
    --bg-light: #f9f5ee;
    --border: #e8dfd2;
    --danger: #9b1b1b;
    --success: #15803d;
    --gradient: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}


/* Defensive global rules to prevent horizontal overflow ONLY on mobile devices */
@media (max-width: 768px) {
  /* prevent accidental horizontal scroll on narrow viewports */
  html, body { overflow-x: hidden; }
  /* ensure main containers don't exceed viewport width on mobile */
  .container, .promo-swiper, .showcase-swiper, .product-details, .main-swiper { max-width: 100%; width: 100%; }
  /* Box sizing for mobile */
  *, *::before, *::after { box-sizing: border-box; }
  /* Images responsive on mobile */
  img, picture, video { max-width: 100%; height: auto; display: block; }
}/* AGGRESSIVE OVERFLOW PREVENTION - MOBILE ONLY */
@media (max-width: 768px) {
    html, body { overflow-x: hidden !important; }
/* Ensure images respect the writing-mode inline size and never exceed viewport width */
img, picture, video { max-inline-size: 100% !important; inline-size: 100% !important; }

    /* Force all major containers to never exceed viewport - MOBILE ONLY */
    *, *::before, *::after {
        box-sizing: border-box !important;
        max-width: 100vw !important;
    }

    /* Exception for elements that should be able to be wider (like table cells) */
    td, th, span, a, button, input, select, textarea, svg, i, em, strong, b {
        max-width: none !important;
    }
}
/* Mobile tweak: make the 'Shop Featured' ghost button match the header background for better contrast */
@media (max-width: 640px) {
    .hero-copy .btn-ghost,
    .promo-swiper .hero-copy .btn-ghost {
        background: var(--primary) !important;
        color: #ffffff !important;
        border-color: rgba(255,255,255,0.06) !important;
        box-shadow: 0 8px 20px rgba(16,24,40,0.12) !important;
    }
    .hero-copy .btn-ghost:hover,
    .promo-swiper .hero-copy .btn-ghost:hover {
        background: color-mix(in srgb, var(--primary) 85%, black 15%) !important;
        color: #fff !important;
    }
}
/* Extra safety: ensure carousel/slider containers never create horizontal overflow */
.promo-swiper, .showcase-swiper, .swiper, .swiper-wrapper, .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Kenburns / hero media: center media, hide overflow, and prevent unexpected horizontal stretching */
.kenburns { position: relative; overflow: hidden; }
.kenburns img, .kenburns video {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover;
    max-width: none !important;
}

/* Defensive clamp for any image that could overflow its container */
img, picture, video { max-width: 100% !important; height: auto !important; display: block !important; }

@media (max-width: 768px) {
    /* Prevent the brand image from using fixed positioning on mobile only */
    header .site-brand .brand-link img, header .site-brand .site-logo { 
        position: static !important; 
        top: auto !important; 
        left: auto !important; 
        width: auto !important; 
        height: auto !important; 
        max-width: 140px; 
    }

    /* Reduce header right margin on small viewports to prevent pushing content wide */
    .header-right { margin-right: 12px !important; }
}

@media (max-width: 480px) {
    .header-right { margin-right: 8px !important; }
}

/* TEMPORARY DEBUG: highlight elements that might cause overflow */
@media (max-width: 768px) {
    /* Force specific problem containers */
    .product-details, .gallery-container, .main-swiper, .thumb-swiper, 
    .product-info, .variations-container, .related-grid, .swiper-container {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Force images and media to never exceed container */
    img, video, picture, canvas, svg {
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Fix any problematic swiper containers */
    .swiper, .swiper-wrapper, .swiper-slide {
        max-width: 100% !important;
        width: 100% !important;
    }
}/* Import fonts: Inter for body, Cinzel for headings to give a fantasy serif touch */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@400;700;900&display=swap');

/* Heading font stack */
h1,h2,h3,h4 { font-family: 'Cinzel', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; }

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

/* --------------------------------------------------------------------------
   Glassmorphism utility and site-wide application
   - Use the `.glass` utility or the selectors below to apply a consistent
     translucent backdrop with blur and gentle borders.
   - Fallbacks provided for browsers without `backdrop-filter`.
 -------------------------------------------------------------------------*/
:root {
    --glass-bg: linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0.32));
    --glass-border: rgba(255,255,255,0.10);
    --glass-shadow: 0 10px 30px rgba(16,24,40,0.06);
}

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
}

/* Apply glass look to common site containers for a unified theme */
header,
footer,
.store-header,
.showcase,
.collection,
.product,
.product-details,
.form-container,
.admin-section,
.upload-zone,
.gallery-item,
.collection,
.collection img,
.collection-grid > .collection {
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
}

/* Slightly stronger border for header/footer to keep separation */
header, footer { border-bottom: 1px solid rgba(255,255,255,0.06); }

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass,
    header,
    footer,
    .store-header,
    .showcase,
    .collection,
    .product,
    .product-details,
    .form-container,
    .admin-section,
    .upload-zone,
    .gallery-item {
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.94));
        border: 1px solid rgba(0,0,0,0.04);
        box-shadow: 0 6px 20px rgba(16,24,40,0.04);
    }
}

body {
    /* Use a column flex layout so footer can be pushed to the bottom on short pages */
    display: flex;
    flex-direction: column;

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 0;
    background-color: var(--background);
    color: var(--text);
    min-height: 100vh;
    letter-spacing: -0.01em;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header */
header {
    color: var(--text);
    padding: 1rem 0.5rem; /* slightly tighter to suit larger logo */
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 95;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background: linear-gradient(180deg, rgb(48 62 70) 0%, rgb(51 67 74) 100%);
}

header .header-inner { width: 100%; max-width: 1200px; display:flex; align-items:center; justify-content:space-between; gap:1rem; height: 76px; }

/* New header layout: brand | centered categories | right icons */
.site-brand { display:flex; align-items:center; gap:0.75rem; }
.header-center { display:flex; gap:1rem; align-items:center; justify-content:center; flex:1; }
.header-center a {color: rgb(255 255 255);text-decoration:none;padding:0.5rem 0.6rem;border-radius:6px;font-weight:600;}

/* Thankyou card styles */
.thankyou-card h1 { color: var(--primary); }
.thankyou-cta .btn { min-width: 160px; padding: 0.6rem 1rem; border-radius: 8px; font-weight:700; }
.btn { display:inline-block; text-decoration:none; text-align:center; }
.btn-primary { background: var(--primary); color: #fff; border: none; }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn:focus, .btn:active { outline: none; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.header-center a:hover {color: #151515;background: rgb(245 196 110);}
.header-right { display:flex; gap:0.5rem; align-items:center; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.5rem; border-radius:8px; color: var(--text); text-decoration:none; background: transparent; border: none; }
.icon-btn svg {color: #ffffff;}
.icon-btn:hover {background: rgb(245 196 110);color: black;/* transform: translateY(-2px); */}

.icon-btn:hover svg {color: black;transform: translateY(-2px);}
.icon-badge { display:inline-block; min-width:16px; height:16px; background: var(--accent); color:white; font-size:0.75rem; line-height:16px; text-align:center; border-radius:999px; margin-left:0.25rem; }

/* Currency selector styling - compact pill with symbol + code */
.currency-select { display:inline-flex; align-items:center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 4px; border-radius: 999px; }
.currency-select #currency-symbol { display:inline-block; min-width:28px; text-align:center; padding:6px 8px; margin-right:6px; border-radius:8px; background: rgba(0,0,0,0.08); color: #fff; font-weight:800; font-size:0.95rem; }
.currency-select select {
    -webkit-appearance: none; /* remove default select arrow */
    appearance: none;
    border: none;
    background: transparent;
    color: #fff;
    padding: 8px 28px 8px 6px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    cursor: pointer;
}
.currency-select select:focus { outline: none; box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.currency-select::after {
    content: '\25BE'; /* small down chevron */
    font-size: 0.65rem;
    color: #fff;
    margin-left: -20px;
    pointer-events: none;
    opacity: 0.95;
}

/* Make pill stand out on dark header with warm accent background */
header .currency-select { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.06); }

@media (max-width: 640px) {
    .currency-select { padding: 3px; }
    .currency-select #currency-symbol { min-width:22px; padding:5px 6px; font-size:0.9rem; }
    .currency-select select { padding-right:18px; font-size:0.9rem; }
}

/* Custom dropdown styles for currency selector */
.currency-dropdown { position: relative; display: inline-block; }
.currency-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.06); color: #fff; cursor: pointer; font-weight:700; }
.currency-toggle:focus { outline: none; box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
.currency-toggle #currency-symbol { display:inline-block; min-width:26px; text-align:center; padding:6px 8px; border-radius:8px; background: rgba(0,0,0,0.12); }
.currency-toggle .currency-code { font-size:0.95rem; }
.currency-toggle .currency-chevron { transform: translateY(1px); opacity:0.9; }
.currency-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 120px; background: rgba(255,255,255,0.98); color: #111; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.18); padding: 6px; list-style:none; margin:0; display:none; z-index:999; max-height: 45vh; overflow: auto; }
.currency-list[aria-hidden="false"], .currency-list.open { display:block; }
.currency-option { padding: 8px 10px; border-radius:6px; cursor: pointer; display:flex; align-items:center; gap:8px; }
.currency-option .code { font-weight:700; }
.currency-option:hover, .currency-option:focus { background: rgba(0,0,0,0.06); }
.currency-option.selected { background: rgba(0,0,0,0.08); font-weight:800; }

@media (max-width: 480px) {
    .currency-list { right: 0; left: auto; min-width: 100px; }
    .currency-toggle { padding: 5px 8px; }
}

/* Improve smooth scrolling and visual clipping for the list */
.currency-list { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.currency-list::-webkit-scrollbar { height: 8px; width: 8px; }
.currency-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }

/* Hide the original select if present (for progressive enhancement) */
.currency-select select { display: none !important; }

@media (max-width: 640px) {
    /* On small screens keep the pill compact and hide text if necessary */
    .currency-select select { padding-left: 8px; padding-right: 20px; font-size: 0.9rem; }
}

@media (max-width: 768px) {
    .header-inner { flex-direction:row; }
    .header-center { display:none; } /* hide centered categories on small screens, keep nav in header menu later */
}

/* Mobile hamburger button & mobile nav improvements */
.mobile-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.04);
    color: #fff;
}
.mobile-hamburger .hamburger-box { display:inline-block; width:22px; height:14px; position:relative; }
.mobile-hamburger .hamburger-inner, .mobile-hamburger .hamburger-inner::before, .mobile-hamburger .hamburger-inner::after { background: #fff; display:block; height:2px; border-radius:2px; }
.mobile-hamburger .hamburger-inner { position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); }
.mobile-hamburger .hamburger-inner::before, .mobile-hamburger .hamburger-inner::after { content: ''; position: absolute; left:0; right:0; }
.mobile-hamburger .hamburger-inner::before { top: -6px; }
.mobile-hamburger .hamburger-inner::after { top: 6px; }

.mobile-nav { display:none; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-top: 1px solid rgba(255,255,255,0.04); }
.mobile-nav.open { display:block; }
.mobile-nav .nav-inner { display:flex; flex-direction:column; gap:0.5rem; padding: 0.75rem 1rem; }
.mobile-nav a { display:block; padding: 0.85rem 0.5rem; border-radius:8px; color: #fff; text-decoration:none; }
.mobile-nav a:hover { background: rgba(255,255,255,0.03); }

/* Increase touch target sizes and spacing for header icons on small screens */
@media (max-width: 640px) {
    .header-right .icon-btn, .mobile-hamburger { width:44px; height:44px; padding:8px; }
    header .site-logo { max-width: 120px; }
}

/* When viewport is short, let header grow naturally */
@media (max-width: 640px) {
    header .header-inner { height: auto; }
}

header h1 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em;
}

/* nav helpers - keep selector broad for compatibility */
header nav, nav.nav-links { display: flex; gap: 0.5rem; align-items:center; }
header nav a, nav.nav-links a {
    color: rgba(17,16,16,0.88); /* stronger contrast for nav links */
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    transition: color .15s ease, background .15s ease;
}
header nav a:hover, nav.nav-links a:hover { color: var(--primary); background: rgba(0,0,0,0.03); }

/* Main Content */
main {
    padding: 1rem 0rem;
    max-width: 1200px;
    margin: 0 auto;
    /* Allow main to grow to fill available vertical space so footer is pushed to bottom */
    flex: 1 0 auto;
    width: 100%;
}

/* Products */
/* Products Grid */
#products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 0rem 0rem;
    margin-bottom: 4vh;
    height: 510px;
    margin-top: 8vh;
}

/* Product Card: styles consolidated later to avoid duplication */

/* Product Image */
/* Welcome Banner */
.welcome-banner { background: transparent; color: var(--text); padding: 1.2rem 0; margin-bottom: 1.25rem; text-align: center; }
.welcome-banner h2 { margin: 0; font-size: 1.75rem; font-weight: 700; color: var(--text); }
.welcome-banner p { color: var(--text-light); margin-top: 0.5rem; }

/* Store Header */
.store-header {
    margin-bottom: 3rem;
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.search-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.search-wrapper svg {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

.search-wrapper input {
    width: 100%;
    padding: 1.25rem 1.5rem 1.25rem 4rem;
    border: 2px solid var(--border);
    border-radius: 1rem;
    font-size: 1.125rem;
    background: var(--background);
    transition: all 0.3s ease;
    color: var(--text);
}

.search-wrapper input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.08);
    background: var(--card-bg);
}

.search-wrapper input::placeholder {
    color: var(--text-light);
    font-weight: 500;
}

/* Category Filter */
.category-filter {
    margin: 2.5rem 0 1.5rem;
    text-align: center;
}

/* Orders UI */

/* ------------------------------------------------------------------------
   Footer styles (moved from inline template)
   - Improved contrast, clearer muted text, unified button/input styles
   - Responsive newsletter layout and accessible focus states
 ------------------------------------------------------------------------ */
.site-footer{
    --footer-bg: #2f3f44; /* darker slate */
    --footer-text: #d6cbc2; /* readable warm light */
    --footer-muted: #a79d97; /* muted text */
    --footer-accent: #e4c07a; /* warm accent for CTA */
    background: linear-gradient(180deg, rgba(20,30,34,0.96), rgba(40,50,54,0.98));
    color: var(--footer-text);
    padding: 2rem 0;
}
.site-footer .container{ max-width:1200px; margin:0 auto; padding:0 1rem; }
.site-footer .footer-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem; align-items:start; }
.site-footer .footer-col h4{ color:#ffffff; font-family: 'Cinzel', Georgia, serif; font-size:1.02rem; margin:0 0 0.5rem 0; letter-spacing:0.01em; }
.site-footer .brand-meta{ margin-top:0.5rem; color:var(--footer-muted); font-size:0.95rem; }
.site-footer .muted{color: #f5c46e;text-decoration:none;transition:color .12s ease;}
.site-footer a.muted:hover, .site-footer a.muted:focus{ color: #fff; text-decoration:underline; outline:none; }
.site-footer .site-logo{max-width:160px;height:auto;align-content: center;place-self: anchor-center;display:block;}

/* Links lists */
.site-footer .footer-links ul, .site-footer .footer-support ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.45rem; }
.site-footer .footer-links li a, .site-footer .footer-support li a{ color:var(--footer-muted); }

/* Newsletter */
.site-footer .newsletter-form{ display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem; }
.site-footer .newsletter-input{ flex:1; padding:0.6rem 0.75rem; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color:var(--footer-text); font-size:0.95rem; }
.site-footer .newsletter-input::placeholder{ color:var(--footer-muted); }
.site-footer .newsletter-input:focus{ outline: none; box-shadow: 0 6px 20px rgba(0,0,0,0.45); border-color: rgba(228,192,122,0.6); }
.site-footer .newsletter-submit{ padding:0.55rem 0.9rem; border-radius:8px; border:none; background:var(--footer-accent); color:#0b0b0b; font-weight:700; cursor:pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.18); transition: transform .08s ease, box-shadow .12s ease; }
.site-footer .newsletter-submit:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.22); }
.site-footer .newsletter-submit:focus{ outline: 3px solid rgba(228,192,122,0.18); }

/* Social icons */
.site-footer .footer-social{ display:flex; gap:0.5rem; align-items:center; margin-top:0.6rem; }
.site-footer .social-link svg{ display:block; color:var(--footer-text); opacity:0.92; transition: transform .12s ease, color .12s ease; }
.site-footer .social-link:hover svg{ transform: translateY(-2px); color:var(--footer-accent); }

.site-footer .footer-bottom{ margin-top:1.25rem; border-top:1px solid rgba(255,255,255,0.04); padding-top:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.site-footer .footer-bottom div{ color:var(--footer-muted); font-size:0.9rem; }

/* Accessibility helpers for the footer modal and focus-visible */
.site-footer :where(button, a, input):focus-visible{ outline: 3px solid rgba(228,192,122,0.16); outline-offset: 2px; }

/* Responsive tweaks */
@media (max-width: 520px){
    .site-footer .footer-grid{ grid-template-columns: 1fr; }
    .site-footer .newsletter-form{ flex-direction:column; align-items:stretch; }
    .site-footer .newsletter-submit{ width:100%; }
    .site-footer .footer-bottom{ font-size:0.9rem; gap:0.5rem; }
}

@media (max-width: 420px){
    /* Ensure footer columns and inputs are fully usable on tiny devices */
    .site-footer .footer-grid { grid-template-columns: 1fr; gap: 0.6rem; }
    .site-footer .footer-col { padding: 0.5rem 0; }
    .site-footer .newsletter-input { width: 100%; box-sizing: border-box; }
}

/* Mobile improvements: larger touch targets, more breathing room */
@media (max-width: 640px){
    .site-footer { padding: 2rem 0.75rem; }
    .site-footer .footer-col { padding: 0.6rem 0; }
    .site-footer .footer-col h4 { font-size: 1.05rem; margin-bottom:0.6rem; }
    .site-footer .brand-meta { font-size: 1rem; }
    .site-footer .muted { font-size: 0.98rem; }
    .site-footer .newsletter-input { padding: 0.75rem; font-size: 1rem; }
    .site-footer .newsletter-submit { padding: 0.7rem; font-size: 1rem; }
    .site-footer .footer-social { gap:0.75rem; }
    .site-footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:0.6rem; }
}

/* Larger tappable nav links in header on small screens */
@media (max-width: 768px) {
    header nav a, .mobile-nav a { padding: 0.9rem 0.75rem; font-size: 1rem; }
}

@media (max-width: 420px){
    .site-footer { padding: 1.5rem 0.5rem; }
    .site-footer .site-logo{ max-width:140px; }
    .site-footer .footer-col { padding: 0.5rem 0; }
    .site-footer .footer-col h4 { font-size: 1rem; }
    .site-footer .muted { font-size: 0.98rem; }
    .site-footer .newsletter-input{ padding:0.65rem; }
    .site-footer .newsletter-submit{ padding:0.65rem; }
}


/* Footer modal (replaces inline modal styles) */
.footer-modal{ display:none; position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:140; background:rgba(6,10,12,0.6); padding:1rem; }
.footer-modal[aria-hidden="false"]{ display:flex; }
.footer-modal-panel{ background:var(--card-bg); max-width:720px; width:100%; max-height:calc(100vh - 3rem); margin:0 auto; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(2,6,23,0.45); display:flex; flex-direction:column; }
.footer-modal-header{ padding:1.25rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.footer-modal-header h3{ margin:0; color:var(--primary); font-size:1.25rem; line-height:1.2; }
.footer-modal-header p{ margin:0.5rem 0 0; color:var(--text-light); max-height:40vh; overflow:auto; padding-right:0.25rem; line-height:1.45; }
.footer-modal-header button{ background:none; border:none; font-size:1.25rem; line-height:1; color:var(--text); cursor:pointer; }
.footer-modal-actions{ padding:1rem 1.25rem; display:flex; gap:0.75rem; justify-content:flex-end; flex-shrink:0; border-top:1px solid var(--border); }


/* Toast / notification for footer (newsletter) */
.footer-toast{ position: fixed; right: 1.25rem; bottom: 1.25rem; background: rgba(11,11,11,0.92); color: #fff; padding: 0.65rem 0.9rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); z-index: 9999; transform: translateY(12px); opacity:0; transition: transform .18s ease, opacity .18s ease; font-weight:600; }
.footer-toast.show{ transform: translateY(0); opacity:1; }
.footer-toast.success{ background: linear-gradient(90deg, rgba(28,105,73,0.95), rgba(45,160,100,0.95)); }
.footer-toast.error{ background: linear-gradient(90deg, rgba(155,27,27,0.95), rgba(185,50,50,0.95)); }

/* small sr-only helper if needed */
.sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; }

/* input error state */
.site-footer .newsletter-input.input-error{ border-color: rgba(155,27,27,0.9); box-shadow: 0 6px 20px rgba(155,27,27,0.12); }



/* Modern auth modal / card styles - appended */
.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,10,12,0.55);
    padding: 2rem;
    z-index: 120;
}
.auth-modal {
    width: 100%;
    max-width: 920px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,248,245,0.95));
    box-shadow: 0 20px 60px rgba(2,6,23,0.45);
    border: 1px solid rgba(0,0,0,0.06);
}
.auth-side { padding: 2.25rem; display:flex; flex-direction:column; gap:1rem; }
.auth-side h2 { font-size:1.6rem; margin:0; color:var(--primary); }
.auth-side p { color:var(--text-light); margin-top:0.25rem; }
.auth-illustration { background: linear-gradient(135deg, rgba(49,64,72,0.06), rgba(201,163,74,0.03)); display:flex; align-items:center; justify-content:center; padding:2rem; }
.auth-illustration img { max-width:100%; height:auto; border-radius:8px; }
.auth-card { padding:2rem; display:flex; flex-direction:column; gap:0.75rem; }
.auth-card .form-field input, .auth-card .form-field select, .auth-card .form-field textarea { width:100%; padding:0.9rem 0.85rem; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); font-size:1rem; }
.auth-card .form-field label { font-size:0.9rem; color:var(--text-light); }
.auth-card .btn { padding:0.75rem 1.1rem; border-radius:10px; font-weight:700; }
.auth-card .note { font-size:0.9rem; color:var(--text-light); }
.auth-actions { display:flex; gap:0.5rem; align-items:center; }
.auth-ghost { background: transparent; border: 1px solid rgba(16,24,40,0.06); color:var(--primary); }

@media (max-width: 920px) {
    .auth-modal { grid-template-columns: 1fr; max-width:520px; }
    .auth-illustration { display:none; }
    .auth-modal-backdrop { padding:1rem; }
}

/* Inline page variant (non-modal) - used on dedicated auth pages */
.auth-page {
    width: 100%;
    max-width: 920px;
    margin: 3.25rem auto; /* center within page below header */
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,248,245,0.95));
    box-shadow: 0 10px 30px rgba(2,6,23,0.15);
    border: 1px solid rgba(0,0,0,0.04);
}
.auth-page .auth-side { padding: 2rem; }
.auth-page .auth-illustration { padding:2rem; display:flex; align-items:center; justify-content:center; }

/* Make illustration column fill the full height and let image cover it */
.auth-page { align-items: stretch; }
.auth-page .auth-illustration { padding:0; }
.auth-illustration { display:block; position:relative; min-height:360px; }
.auth-illustration .auth-illus-img {width:100%;height: 100% !important;display:block;object-fit:cover;object-position:center;}

/* When card content is taller, allow illustration to match height by using grid-auto-rows */
.auth-page { grid-auto-rows: 1fr; }

@media (max-width: 920px) {
    .auth-page { grid-template-columns: 1fr; max-width:520px; margin: 2rem auto; }
    .auth-page .auth-illustration { display:none; }
}

.orders-list { display:flex; flex-direction:column; gap:1rem; }
.order-card { display:flex; justify-content:space-between; align-items:center; padding:1rem; border:1px solid var(--border); background:var(--card-bg); border-radius:12px; }
.order-card-left { display:flex; flex-direction:column; }
.order-card-right { display:flex; align-items:center; gap:1rem; }
.order-total { font-weight:800; color:var(--primary); }
.order-actions .btn { margin-left:0.5rem; }

.order-detail-page { max-width:900px; margin: 1.5rem auto; }
.order-summary { padding:1rem 0; }
.order-items ul { list-style:none; padding:0; }
.order-item-row { display:flex; gap:1rem; padding:0.75rem 0; border-bottom:1px dashed rgba(0,0,0,0.04); align-items:center; }
.order-item-row .thumb img { width:64px; height:64px; object-fit:cover; border-radius:8px; }
.order-item-row .meta .name { font-weight:700; }

.messages-list { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1rem; }
.message-row { padding:0.75rem; border-radius:8px; border:1px solid rgba(0,0,0,0.04); }
.message-row.from-admin { background: rgba(198, 231, 255, 0.12); }
.message-row.from-customer { background: rgba(240,240,240,0.6); }
.message-row .meta { font-size:0.85rem; color:var(--text-light); margin-bottom:0.5rem; }

/* Admin order detail simple container */
.admin-container { max-width:1100px; margin:1.5rem auto; padding:1rem; }
.admin-order-meta { display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:1rem; }

@media (max-width: 700px) {
    .order-card { flex-direction:column; align-items:flex-start; }
    .order-card-right { align-self:stretch; display:flex; justify-content:space-between; width:100%; }
}

/* Modal / fragment styles for order detail */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    opacity: 0;
    transition: opacity 180ms ease-in-out;
}
.modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
}
.modal .modal-panel {
    position: relative;
    margin: 0; /* centered by flex on the open state */
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.24);
    z-index: 1001; /* sits above backdrop */
    display: block;
}
.order-detail-fragment { padding: 0.5rem 0; }
.modal-inner {
    /* Modal color vars (kept close to site theme, but with stronger contrast) */
    --modal-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,246,241,0.98));
    --modal-border: rgba(37,45,52,0.06);
    --modal-shadow: 0 30px 80px rgba(6,12,20,0.45);
    --modal-accent: var(--accent);
    --modal-text: #0f1720;
}
.modal-inner header.order-detail-header,
.modal-inner .order-detail-header {
    /* Prevent global header styles (sticky, gradients) from applying inside modal */
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 0 0 12px 0;
    padding: 24px;
    border-radius: 15px;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(20,26,34,0.04);
    display: block;
}
.modal-inner header.order-detail-header h2,
.modal-inner .order-detail-header h2 {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    color: var(--modal-text);
}
.modal-inner .order-detail-header .muted { color: var(--text-light); }
.order-detail-header { display:flex; flex-direction:column; gap:0.25rem; border-bottom:1px solid var(--border); padding-bottom:0.5rem; margin-bottom:0.5rem; }
.order-meta-row { display:flex; gap:1rem; margin-top:0.25rem; }
.modal-panel img { max-width: 100%; height: auto; }

.message-form textarea { width: 100%; padding:0.5rem; border:1px solid var(--border); border-radius:6px; }
.message-form button { margin-top:0.5rem; }

/* Polished modal layout */
.modal { display:none; }
.modal[aria-hidden="false"], .modal.open {
    display: flex !important; /* force flex even if inline display set */
    align-items: center;
    justify-content: center;
    padding: 24px; /* give breathing room on small viewports */
    opacity: 1;
}
.modal .modal-backdrop { background: rgba(2,6,23,0.55); }
.modal-panel { /* panel sizing and scrolling */
    max-height: 96vh; /* default panel max height */
    overflow: auto;
}
.modal-inner {
    width: 100%;
    max-width: 1200px; /* larger modal on wide screens */
    background: var(--modal-bg);
    border: 1px solid rgba(20,26,34,0.06);
    border-radius: 12px;
    box-shadow: var(--modal-shadow);
    color: var(--modal-text);
    overflow: hidden;
    box-sizing: border-box;
}
.modal-body { padding:1rem 1.25rem; position:relative; }
.modal-close { position:absolute; right:14px; top:12px; border:0; background:transparent; font-size:18px; cursor:pointer; color:var(--text-light); }
.modal-close:hover { color: var(--primary); transform: scale(1.06); }
.modal-close:focus { outline: none; box-shadow: 0 6px 18px rgba(49,64,72,0.12); }
.modal-footer { padding:0.75rem 1.25rem; border-top:1px solid rgba(20,26,34,0.04); text-align:right; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,245,240,0.96)); }

/* Make primary buttons in modal use the site accent */
.modal-footer .btn-primary { background: linear-gradient(90deg, var(--modal-accent), rgba(200,160,70,0.9)); color: #fff; border: none; padding: 0.6rem 1rem; border-radius:8px; }

/* Divider for message list and subtle background */
.messages-list { padding: 8px; border-top:1px solid rgba(20,26,34,0.03); }
.message-row { transition: transform 160ms ease, box-shadow 160ms ease; }
.message-row:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8,12,18,0.04); }

/* Two-column layout inside modal on wide screens */
.order-detail-content { display:block; }
.order-detail-fragment { display:flex; flex-direction:column; gap:1rem; }
.order-items, .order-messages { background: transparent; }

@media (min-width: 880px) {
    .order-detail-fragment {flex-direction:row;gap:1.25rem;}
    .order-items {flex: 0 0 40%;padding-right:1rem;border-right:1px solid var(--border);}
    .order-messages {flex: 1 1 33%;padding-left:1rem;}
}

/* Extra-large screens: allow modal to occupy more vertical space (height only) */
@media (min-width: 1400px) {
    .modal-panel {
        max-height: 98vh; /* nearly full height on XL */
    }
    .modal-inner {
        max-height: calc(98vh - 24px);
    }
}

/* Message bubbles */
.messages-list { display:flex; flex-direction:column; gap:0.6rem; }
.message-row { padding:0.6rem 0.8rem; border-radius:10px; max-width:90%; }
.message-row.from-customer { align-self:flex-start; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,246,241,0.98)); border:1px solid rgba(0,0,0,0.04); box-shadow: 0 6px 18px rgba(12,18,22,0.03); }
.message-row.from-admin { align-self:flex-end; background: linear-gradient(90deg, rgba(198,231,255,0.28), rgba(198,231,255,0.14)); border:1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 22px rgba(12,18,22,0.04); }
.message-row .body { color: #062338; }
.message-row.from-admin .body { color: #05203a; }
.message-row .meta { font-size:0.8rem; color:var(--text-light); margin-bottom:0.3rem; }

/* Ensure long modal content scrolls nicely */
.modal-inner { max-height: calc(96vh - 32px); overflow: auto; }

/* Focus styles for textarea */
.message-form textarea:focus { outline: none; box-shadow: 0 6px 20px rgba(26,60,100,0.12); border-color: rgba(26,60,100,0.2); }


.filter-label {
    display: inline-block;
    font-size: 1.125rem;
    color: var(--text);
    margin-bottom: 1.5rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 0.5rem;
}

.filter-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--gradient);
    border-radius: 2px;
}

.category-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.category-btn {
    padding: 1rem 1.75rem;
    border: 2px solid transparent;
    border-radius: 1rem;
    background: var(--background);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.category-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.category-btn span {
    position: relative;
    z-index: 2;
}

.category-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16,24,40,0.06);
}

.category-btn.active {
    background: linear-gradient(90deg, rgba(59,16,16,0.98) 0%, rgba(201,163,74,0.98) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 12px 40px rgba(43,12,12,0.12);
}

.category-btn.active::before {
    opacity: 1;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.5rem;
    padding: 1.5rem;
}

/* Page title for products list */
.page-title {
    font-size: 1.75rem;
    margin: 0 0 1rem 0;
    color: var(--primary);
    font-weight: 800;
}

/* Updated product card visuals used by products_list.php */
.product {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 10px 30px rgba(16,24,40,0.06);
    display: flex;
    flex-direction: column;
}

.product-link { color: inherit; text-decoration: none; display: block; height: 100%; }

.product .product-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-light); }
.product-media { width:100%; height:100%; object-fit:cover; display:block; }

.product-body { padding: 0.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:0.5rem; }
.product-title { font-size:1.05rem; margin:0; color:var(--primary); font-weight:700; }
.product-meta { color:var(--text-light); font-size:0.9rem; }
.product-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-top:0.4rem; }

.price-badge { background: linear-gradient(90deg, rgba(59,16,16,0.95), rgba(201,163,74,0.95)); color:white; padding:0.5rem 0.8rem; border-radius:999px; font-weight:800; }
.btn-small { background: transparent; border:1px solid rgba(0,0,0,0.06); padding:0.45rem 0.7rem; border-radius:8px; font-weight:700; color:var(--primary); cursor:pointer; }
.btn-small:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16,24,40,0.06); }

/* Responsive tweaks: slightly smaller cards on narrow screens */
@media (max-width: 900px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; }
    .product .product-image { aspect-ratio: 3/2; }
}

@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; gap:1rem; padding:0.5rem; }
    .product .product-image { aspect-ratio: 16/9; }
}

/* Product Card */
.product {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 8px 30px rgba(43,12,12,0.06);
    position: relative;
}

.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(16, 24, 40, 0.06);
    border-color: rgba(0,0,0,0.04);
}

.product::before { display: none; }

.product .product-image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-light); border-radius: 10px; margin: 0.5rem; }

.product .product-image::before { display: none; }

.product .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
    border-radius: 0.75rem;
}

.product:hover .product-image img {
    transform: scale(1.03);
}

.product-badges {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stock-badge svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.stock-badge.low {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95) 0%, rgba(234, 88, 12, 0.95) 100%);
    color: white;
    border: 1px solid rgba(245, 158, 11, 0.3);
    animation: pulse 2s infinite;
}

.stock-badge.out {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
    color: white;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

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

.category-tag {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    border: 1px solid var(--border);
    transition: transform 0.18s ease, background 0.18s ease;
}

.product:hover .category-tag {
    transform: translateY(-2px);
}

.category-tag svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.image-count {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
}

.image-count svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.card-body, .product-card-info {
    padding: 1rem 1rem 1.25rem 1rem;
    display: grid;
    gap: 1.25rem;
    z-index: 1;
}

/* Ensure featured card text wraps instead of overflowing (handles long words/URLs) */
.featured .card-body,
.featured .card-body h4,
.featured .card-body p,
.featured .card-body .muted,
.featured .card-body .small {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    -ms-word-break: break-word !important;
    hyphens: auto !important;
}

/* Titles: allow natural wrapping, up to multiple lines */
.featured .card-body h4 {
    display: block !important;
    max-width: 100% !important;
}

.product-card-info h3 { margin:0; font-size:1.125rem; font-weight:700; color:var(--primary); }

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

.product .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f6efe6;
    letter-spacing: -0.025em;
}

.product-description {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.product-actions { padding: 1rem; border-top: 1px solid var(--border); background: transparent; }

.product-actions button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border: none;
    border-radius: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.product-actions button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.add-to-cart {
    background: var(--accent);
    color: #111;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(201,163,74,0.12);
    border: 1px solid rgba(0,0,0,0.04);
}
.add-to-cart:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(201,163,74,0.18); }

.add-to-cart:hover::before { opacity: 0.06; }

.add-to-cart svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.add-to-cart:hover svg {
    transform: translateX(-4px);
}

.notify-stock {
    background: var(--background);
    color: var(--text);
    border: 2px solid var(--border) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.notify-stock:hover {
    background: var(--card-bg);
    color: var(--primary);
    border-color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

.notify-stock svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.notify-stock:hover svg {
    transform: scale(1.1);
}

/* Footer */
footer {
    background: #314048;
    color: #fff;
    text-align: center;
    padding: 3rem 1.5rem;
    margin-top: 4rem;
    position: relative;
    /* Prevent footer from shrinking when using flex layout */
    flex-shrink: 0;
    width: 100%;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--border) 15%,
        var(--border) 85%,
        transparent 100%
    );
}

footer p {
    opacity: 0.9;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

/* Hero and Collections (clean, airy, Apple-like) */
.hero {
    padding: 0rem 0 3.2rem;
    background: linear-gradient(180deg, var(--background) 0%, rgba(245,238,226,0.6) 100%);
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 2.5rem;
    align-items: center;
}
.hero-copy h2 {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-weight: 700;
}
.hero-copy .lead {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}
.hero-cta .btn { margin-right: 0.75rem; }
.showcase {
    border-radius: 1rem;
    overflow: hidden;
    background: var(--bg-light);
    box-shadow: 0 12px 40px rgba(16,24,40,0.06);
}
.showcase img { width: 100%; height: auto; display: block; }

/* Swiper showcase overrides */
.showcase-swiper { border-radius: 1rem; overflow: hidden; }
.showcase-swiper .swiper-slide img { width: 100%; height: 360px; object-fit: cover; display: block; }
.swiper-pagination-bullet { background: rgba(255,255,255,0.8); opacity: 0.85; }

/* Promo slider: Ken Burns, bigger, minimal bullets and circular nav */
.promo-swiper { width: 100%; max-width: 1200px; margin: 0 auto; border-radius: 1rem; overflow: hidden; position: relative; }
.promo-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; position: relative; min-height: 240px; }
.promo-swiper .swiper-slide img, .promo-swiper .swiper-slide video { width: 100%; height: 690px; object-fit: cover; display: block; }
.kenburns { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.kenburns img, .kenburns video { display: block; width: 100%; height: 100%; transform-origin: center center; animation: kenburns 18s ease-in-out infinite; }
@keyframes kenburns {
    0% { transform: scale(1) translate3d(0,0,0); }
    50% { transform: scale(1.06) translate3d(0,-2%,0); }
    100% { transform: scale(1) translate3d(0,0,0); }
}

.promo-overlay { position: absolute; inset: 0; z-index: 50; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.42) 60%); }
.hero-copy {position: absolute;left: 64px;top: 50%;transform: translateY(-50%);z-index: 60;color: #fff;padding: 42px !important;margin-left: 40px;max-width: 520px;text-shadow: 0 8px 26px rgba(0,0,0,0.6) !important;padding: 1rem 1rem;border-radius: 8px;backdrop-filter: blur(10px) saturate(190%) !important;-webkit-backdrop-filter: blur(16px) saturate(180%) !important;background-color: rgb(255 255 255 / 20%) !important;border-radius: 12px !important;}

.promo-caption { position: absolute; left: 2rem; bottom: 2rem; background: linear-gradient(90deg, rgba(16,24,40,0.6), rgba(16,24,40,0.25)); color: #fff; padding: 1rem 1.25rem; border-radius: 0.75rem; max-width: 60%; }
.promo-caption h3 { margin: 0 0 0.25rem 0; font-size: 1.35rem; }

.promo-swiper .swiper-button-prev, .promo-swiper .swiper-button-next { width:44px; height:44px; border-radius:999px; background: rgba(0,0,0,0.36); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow: 0 8px 26px rgba(0,0,0,0.35); }
.promo-swiper .swiper-button-prev::after, .promo-swiper .swiper-button-next::after { font-size:18px; }
.promo-swiper .swiper-pagination { bottom: 12px; }
.promo-swiper .swiper-pagination-bullet { width:10px; height:10px; background: rgba(255,255,255,0.72); opacity:0.85; margin:0 6px; border-radius:999px; }
.promo-swiper .swiper-pagination-bullet-active { background: white; box-shadow: 0 6px 16px rgba(0,0,0,0.2); transform: scale(1.15); }

@media (max-width: 900px) {
    .promo-swiper .swiper-slide img, .promo-swiper .swiper-slide video { height: 340px; }
    .hero-copy { left: 24px; right: 24px; top: 40%; transform: translateY(-40%); max-width: calc(100% - 48px); }
    .promo-caption { left: 1rem; right: 1rem; max-width: calc(100% - 4rem); }
}
@media (max-width: 640px) {
    .promo-swiper .swiper-slide img, .promo-swiper .swiper-slide video { height: 180px; }
    .hero-copy { position: static; transform: none; color: var(--text); background: transparent; padding: 0; text-shadow: none; max-width: 100%; }
}

/* Make promo/video larger and nearly full-bleed for tablets and larger phones */
@media (max-width: 768px) {
    .promo-swiper { width: 100%; max-width: 100%; margin: 0; }
    .promo-swiper .swiper-slide img, .promo-swiper .swiper-slide video {
        width: 100%;
        height: calc(100vh - 72px); /* nearly full viewport height minus header */
        max-height: none;
        object-fit: cover;
    }
    .showcase img { height: calc(100vh - 72px); object-fit: cover; }

    /* Keep hero copy readable as overlay */
    .hero-copy { position: absolute !important; left: 20px !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; padding: 14px !important; background: linear-gradient(180deg, rgba(0,0,0,0.46), rgba(0,0,0,0.12)); color: #fff !important; border-radius: 10px; }
}

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.7); z-index: 9999;
}
.lightbox-inner { position: relative; max-width: 90%; max-height: 90%; }
.lightbox-inner img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.lightbox-close { position: absolute; top: -18px; right: -18px; background: #fff; border-radius: 999px; width: 36px; height: 36px; border: none; font-size: 1.25rem; cursor: pointer; }

.collections { padding: 2.5rem 0; }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.collection { background: var(--card-bg); border-radius: 0.75rem; padding: 1rem; text-align: left; box-shadow: 0 6px 24px rgba(16,24,40,0.04); }
.collection img {width: 100%;height: 270px;object-fit: cover;border-radius: 0.5rem;margin-bottom: 0.75rem;}
.collection h4 { margin: 0 0 0.25rem 0; }
.collection .muted { color: var(--text-light); font-size: 0.95rem; }

/* Collection card improvements */
.collection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 220ms ease;
}

.collection:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 46px rgba(16,24,40,0.08);
}

.collection-cta {
    margin-top: 0.75rem;
    align-self: start;
}

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

.section-title { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text); }

/* Featured grid (cards) */
.featured { padding: 2rem 0; position: relative; overflow: visible; }
.featured::before {
    /* Full-bleed decorative banner behind the featured grid - stretches edge-to-edge while content remains centered */
    content: '';
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    /* avoid using 100vw which can cause horizontal scroll due to scrollbars; use 100% */
    width: 100%;
    height: 50vh;
    z-index: 0;
    /* Use a CSS variable set inline by the view for immediate preview/fallback */
    background-image: var(--featured-banner, url('../images/promo/featured-banner.heic'));
    background-size: cover;
    /* allow vertical motion via CSS variable updated by JS */
    background-position: 50% var(--featured-bg-y, 50%);
    will-change: background-position;
    /* show a subtle banner by default so inline --featured-banner takes effect immediately */
    opacity: 1.92;
    filter: saturate(0.95) contrast(0.9);
    pointer-events: none;
}
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* only show when banner file detected by PHP */
.featured.has-banner::before {
    /* slightly stronger when view explicitly set has-banner (backwards-compatible) */
    opacity: 0.7;
}
.card {
    /* Glassmorphism base */
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3; /* ensure cards sit above decorative banner */
    background: linear-gradient(180deg, rgb(255 255 255 / 20%), rgba(255, 255, 255, 0.32));
    box-shadow: 0 10px 30px rgba(16,24,40,0.08);
    /* Prefer backdrop-filter when available for authentic glass look */
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
    background: linear-gradient(180deg, rgb(0 0 0 / 25%) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.card-media { width:100%; display:block; }
.card-media img {width: 100%;height: 330px !important;object-fit: cover;display: block;}
.card-body { padding: 0.95rem 1rem; display:flex; flex-direction:column; gap:0.5rem; flex:1 1 auto; color: var(--text); }

/* Overlay to improve contrast when decorative banner is busy */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 30%, rgba(0,0,0,0.02) 100%);
    mix-blend-mode: normal;
    z-index: 2;
}

/* Fallback for browsers lacking backdrop-filter: slightly stronger translucent background */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .card { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88)); border: 1px solid rgba(0,0,0,0.04); }
    .card::after { display: none; }
}
.card-body h4 { margin: 0 0 0.25rem 0; font-size: 1.05rem; }
.card-body .small {font-size: 0.875rem;color: #f6efe6;}
.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.price { color: var(--primary); font-weight: 800; font-size:1.15rem; }

/* Card glass accent for titles and meta to improve contrast on banner */
.card-body h4 {padding: 0.15rem 0;border-radius: 4px;display: inline-block;color: #f6efe6;}

/* Ensure interactive area remains above decorative background */
.featured .card a.product-link { position: relative; z-index: 3; display:block; height:100%; }
.stock { font-size: 0.8rem; padding: 0.25rem 0.5rem; border-radius: 6px; }
.stock.out { background: rgba(185,28,28,0.08); color: var(--danger); }
.stock.low {background: rgb(192 155 71);color: #000000;}

/* Make featured cards have consistent height for a balanced grid */
.featured-grid .card {min-height: 360px;padding: 10px;}
@media (max-width: 900px) {
    .featured-grid .card { min-height: auto; }
}

/* Mobile: present featured items as a horizontal scrollable list with snap points */
@media (max-width: 640px) {
    .featured-grid {
        display: block; /* make it a scroll container */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding: 0 0.5rem;
        margin-left: -0.5rem; /* compensate padding for edge-to-edge feel */
    }
    .featured-grid .card {
        display: inline-block;
        vertical-align: top;
        /* make cards narrower on mobile so more of the next card peeks in */
        width: calc(72% - 1rem);
        min-width: 200px;
        margin: 0 0.6rem 0 0;
        scroll-snap-align: start;
        box-shadow: 0 10px 30px rgba(16,24,40,0.08);
    }
    /* Enable nice snap behavior */
    .featured-grid { scroll-snap-type: x mandatory; }
    /* Hide decorative banner on small screens */
    .featured::before { display: none; }

    /* Make featured cards opaque on mobile so images/decors behind them don't reduce readability */
    .featured .card {
        background: #f9f5ee;
        border: 1px solid rgba(0,0,0,0.06) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: 0 8px 26px rgba(16,24,40,0.08) !important;
        color: var(--text) !important;
    }
    .featured .card::after { display: none !important; }
}

/* Mobile text readability improvements for featured cards */
@media (max-width: 640px) {
    .featured .card-body {
        color: var(--text) !important;
        line-height: 1.45 !important;
        padding: 0.9rem 1rem !important;
        -webkit-font-smoothing: antialiased;
        text-shadow: none !important;
    }

    .featured .card-body h4 {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: var(--primary) !important;
        margin: 0 0 0.35rem 0 !important;
        line-height: 1.2 !important;
    }

    .featured .card-body .muted,
    .featured .card-body .small {
        color: rgba(17,16,16,0.65) !important; /* stronger than previous muted for legibility */
        font-size: 0.93rem !important;
    }

    .featured .price {
        font-size: 1.25rem !important;
        font-weight: 900 !important;
        color: var(--primary-dark) !important;
        letter-spacing: -0.01em !important;
    }

    /* Ensure the product link tappable area remains large and readable */
    .featured .product-link { padding: 0 !important; display: block !important; }
}

@media (max-width: 420px) {
    .featured .card-body h4 { font-size: 1rem !important; }
    .featured .price { font-size: 1.12rem !important; }
    .featured .card-body .muted, .featured .card-body .small { font-size: 0.9rem !important; }
}

/* Very small screens: make cards even smaller so they remain comfortable on tiny phones */
@media (max-width: 420px) {
    .featured-grid .card {
        width: calc(84% - 1rem);
        min-width: 160px !important;
        flex: 0 0 260px !important;
        margin: 0.5rem 0.5rem 15px 6px;
    }
    .featured-grid { padding: 0 0.25rem; }
}

/* New: allow horizontal scroll on desktop when there are more items than fit
   and JS toggles a `scrollable` class on the grid. This intentionally overrides
   the defensive overflow-x: hidden rules applied globally on mobile and some
   containers. */
@media (min-width: 641px) {
    /* Force featured grid to be a single horizontal row on desktop to avoid wrapping
       into multiple rows. This makes the section a horizontal scroll list by default
       (JS may still toggle additional classes but layout will be single-row). */
    .featured-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1rem;
        padding: 0 0.75rem;
        scroll-snap-type: x proximity;
        align-items: flex-start;
    }

    .featured-controls{
        position: sticky !important;
        right: 0px !important;
        top: 100vh !important;
        transform: translateY(0%) !important;
        z-index: 999;
        display: flex;
        gap: 8px;
        align-items: center;
        pointer-events: auto;
    }
    /* Hide the native horizontal scrollbar visual while preserving scrolling behavior
       This prevents a second visible scrollbar from stacking above the page controls. */
    .featured-grid { -ms-overflow-style: none; scrollbar-width: none; }
    .featured-grid::-webkit-scrollbar { height: 0; background: transparent; }
    .featured-grid .card {
        flex: 0 0 260px; /* narrower cards to fit more into viewport */
        min-width: 220px;
        max-width: 300px;
        margin: 0 0.4rem 0 0.4rem;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
    }
    /* show a faint scroll hint so users know it's scrollable */
    .featured-grid.scrollable::after {
        content: '';
        position: absolute;
        right: 0.5rem;
        top: 0;
        bottom: 0;
        width: 48px;
        pointer-events: none;
        /* background: linear-gradient(90deg, rgba(255,255,255,0), rgba(246,239,230,0.85)); */
        z-index: 5;
        border-radius: 8px;
    }
}

/* When grid is scrollable, avoid page-level overflow suppression interfering on mobile
   by allowing the grid to scroll even if body/html overflow-x:hidden is present. */
.featured-grid.scrollable { -webkit-overflow-scrolling: touch; }

/* Ensure when scrollable is active the grid is forced into a single horizontal row
   and cards align to the top so they appear side-by-side (prevents uneven stacking). */
.featured-grid.scrollable, .featured-grid.force-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    align-items: flex-start !important; /* ensure cards align to top */
}
.featured-grid.scrollable .card, .featured-grid.force-scroll .card {
    flex: 0 0 320px !important;
    min-width: 280px !important;
    max-width: 360px !important;
    margin: 0 0.75rem 0 0 !important;
    align-self: flex-start !important; /* ensure each card sits at top */
}

/* Force consistent media height in forced-scroll mode to reduce layout shifts
   and make initial alignment consistent before JS equalization runs. */
.featured-grid.force-scroll .card-media img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.featured-grid.force-scroll .card {
    /* allow JS to set an inline height; provide a sensible min so cards don't collapse */
    min-height: 450px !important;
}

/* Gallery */
.gallery { padding: 2.5rem 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem; }
.gallery-item { border-radius: 0.5rem; overflow: hidden; background: var(--bg-light); box-shadow: 0 8px 30px rgba(16,24,40,0.04); }
.gallery-item img { width: 100%; height: 160px; object-fit: cover; display: block; }
.gallery-cta { margin-top: 1rem; text-align: center; }
/* Gallery metadata: caption and uploader credit */
.gallery-meta { padding: 0.65rem 0.75rem; background: transparent; }
.gallery-caption { font-size: 0.95rem; color: var(--text); margin-bottom: 0.35rem; }
.gallery-uploader { font-size: 0.82rem; color: var(--text-light); }

/* Buttons */
.btn { display: inline-block; padding: 0.9rem 1.25rem; border-radius: 0.65rem; text-decoration: none; font-weight: 600; }
.btn-primary {background: #f5c46e;color: #111;box-shadow: 0 8px 18px rgba(201,163,74,0.12);border: none;}
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline { border: 1px solid var(--primary); color: var(--primary); background: transparent; padding: 0.75rem 1.1rem; }

/* Button motion: consistent hover + active states */
.btn, .add-to-cart, .category-btn, .quantity-btn {
    transition: transform 200ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 200ms ease, opacity 150ms ease;
    will-change: transform;
}

.btn:hover, .add-to-cart:hover, .category-btn:hover, .quantity-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(16,24,40,0.12);
}

.btn:active, .add-to-cart:active, .category-btn:active, .quantity-btn:active {
    transform: translateY(-1px) scale(0.995);
    box-shadow: 0 6px 18px rgba(16,24,40,0.10);
}

/* Subtle focus outline for keyboard users */
.btn:focus, .add-to-cart:focus, .category-btn:focus, .quantity-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(201,163,74,0.12);
}

/* Utility */
.container {max-width: 1200px;margin: 0 auto;padding: 1rem 1rem;}
.muted {color: #c09b47;}

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .collection-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Additional homepage responsiveness: ensure hero and promo slider behave well on narrow screens */
@media (max-width: 900px) {
    .hero { padding: 0 0.5rem; }
    .hero-inner { display:block; }
    .hero-media { width:100%; max-width:100%; }
    .promo-swiper { width:100%; }
    .promo-swiper .swiper-slide img, .promo-swiper .swiper-slide video {
        height: auto !important;
        max-height: 440px;
        object-fit: cover;
        width: 100%;
    }
    .hero-copy {
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin-bottom: 0.5rem;
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.96));
        color: var(--text) !important;
        text-shadow: none !important;
        border-radius: 8px;
    }
    .promo-caption { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 0.5rem; max-width: 100% !important; }
}

@media (max-width: 640px) {
    /* Tighter hero adjustments for very small screens */
    .promo-swiper .swiper-slide img, .promo-swiper .swiper-slide video { max-height: 260px !important; }
    .hero-copy h2 { font-size: 1.25rem; }
    .hero-copy .lead { font-size: 0.95rem; }
    .hero-cta { flex-direction: column; gap: 0.5rem; }
    .hero-cta .btn { width: 100%; }
    .collection-grid { grid-template-columns: 1fr; gap: 1rem; }
    main { padding: 0.6rem; }
}

/* Checkout Button */
/* Checkout Button */
.checkout-button {
    display: inline-block;
    background: var(--accent);
    color: #111;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    margin-top: 1.2rem;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(201,163,74,0.10);
    transition: box-shadow 0.3s, transform 0.2s, filter 0.2s;
}

.checkout-button:hover {
    filter: brightness(0.98);
    box-shadow: 0 10px 30px rgba(201,163,74,0.16);
    transform: scale(1.03);
}

/* Checkout layout rules moved from the view for stronger, maintainable specificity.
   These rules enforce a two-column layout (form left, summary right) on wide
   viewports and collapse to a single column at <=900px. The selector is specific
   to avoid being overridden by other site-wide utilities. */
.checkout-page .checkout-grid {
    max-width:1200px;
    margin:1.5rem auto;
    padding:0 1rem;
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:1rem;
    align-items:start;
}

@media (max-width:900px) {
    .checkout-page .checkout-grid {
        grid-template-columns: 1fr;
        padding: 0 0px;
    }
    .checkout-page .checkout-summary { order: 2; }
    .checkout-page .form-container { order: 1; }
}

/* Additional mobile improvements for checkout form and summary */
@media (max-width: 640px) {
    /* Make the form padding more compact and inputs comfortable for touch */
    .checkout-page .form-container {padding: 1rem;margin: 0px !important;}
    .checkout-page .form-container .form-group { margin-bottom: 1rem; }
    .checkout-page .form-container .form-input { padding: 0.9rem; font-size: 1rem; }

    /* Address grids collapse to single column for easy typing */
    .checkout-page .form-container [style*="grid-template-columns"] {
        display: block !important; /* fall back for inline-grid styles */
    }
    .checkout-page .form-container .form-group > div,
    .checkout-page .form-container .form-group > input,
    .checkout-page .form-container .form-group > select,
    .checkout-page .form-container .form-group > textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Payment options: stack vertically and increase tap targets */
    .checkout-page .payment-options { flex-direction: column; }
    .checkout-page .payment-option { padding: 0.6rem; border-radius: 10px; }
    .checkout-page .payment-option .payment-option-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .checkout-page .payment-option .payment-option-body { padding-left: 0.5rem; }
    .checkout-page .payment-option + .payment-option { margin-top: 0.6rem; }

    /* Highlighted selected payment option: stronger border and subtle lift */
    .checkout-page .payment-option.active {
        border-color: rgba(37,51,60,0.12);
        box-shadow: 0 10px 24px rgba(16,24,40,0.06);
        transform: translateY(-2px);
    }

    /* Checkout summary becomes full-width below the form and slightly elevated */
    .checkout-page .checkout-summary {position: static !important;width: 100% !important;/* margin: 0.75rem; */}
    .checkout-page .checkout-summary .cart-products-scroll { max-height: 28vh; }

    /* Make action buttons full width and prominent */
    .checkout-page .checkout-summary .actions .btn { width: 100%; }

    /* Make the summary card slightly more compact and padded */
    .checkout-page .checkout-summary {position: static !important;width: 100% !important;/* margin: 0.75rem; */padding: 0.75rem !important;}

    /* Pay now button: dark pill for better contrast and centered */
    #checkout-pay-btn, .form-submit {
        background: var(--secondary) !important;
        color: #fff !important;
        border: none !important;
        display: inline-block !important;
        padding: 0.9rem 1rem !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
    }

    /* Back link smaller and inline with the pay button */
    .form-secondary { display: inline-block; padding: 0.5rem 0.8rem; border-radius: 8px; background: transparent; border: 1px solid var(--border); }

    /* Make the bottom pay button more prominent and fixed if the device is small and content is long */
    @media (max-height: 700px) {
        .checkout-page .form-container { padding-bottom: 6rem; }
        .checkout-page .form-actions .form-submit,
        #checkout-pay-btn {
            position: fixed !important;
            bottom: 12px;
            left: 12px;
            right: 12px;
            z-index: 1200;
            width: auto !important;
            display: block !important;
            box-shadow: 0 10px 30px rgba(16,24,40,0.12);
            border-radius: 12px;
            padding: 14px 18px;
            font-size: 1.05rem;
        }
    }
}

/* Place Back-to-cart and Pay buttons side-by-side on desktop only
   Scope to the checkout form area so other .form-actions usages are unaffected */
@media (min-width: 900px) {
    .checkout-page .form-actions > div[style],
    .checkout-page .form-actions { display: block; }
    .checkout-page .form-actions > div[style] > div[style] {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* push pay button to the right */
        gap: 16px !important;
    }
    /* Back button: compact, left-aligned */
    .checkout-page .form-actions > div[style] > div[style] .form-secondary {
        width: 10vw !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0.6rem 0.9rem !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* Pay button: prominent, right-aligned, larger */
    .checkout-page .form-actions > div[style] > div[style] .form-submit,
    .checkout-page .form-actions > div[style] > div[style] #checkout-pay-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 240px !important;
        padding: 0.9rem 1.25rem !important;
        border-radius: 10px !important;
        font-size: 1.05rem !important;
        box-shadow: 0 8px 22px rgba(16,24,40,0.08) !important;
    }
}

/* Ensure checkout action buttons stack on small screens (override desktop rule) */
@media (max-width: 899px) {
    .checkout-page .form-actions > div[style] > div[style] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .checkout-page .form-actions > div[style] > div[style] .form-secondary,
    .checkout-page .form-actions > div[style] > div[style] .form-submit,
    .checkout-page .form-actions > div[style] > div[style] #checkout-pay-btn {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* If small-height fixed pay button rule applies, make sure it still spans full width */
    @media (max-height: 700px) {
        .checkout-page .form-actions .form-submit,
        #checkout-pay-btn {
            left: 12px !important;
            right: 12px !important;
            width: auto !important;
        }
    }
}

.checkout-page .form-container {background: transparent;margin: 0;max-width: none;padding: 0;align-self: start;padding: 30px;}
.checkout-page .checkout-summary {background:var(--card-bg);padding:1rem;border-radius:10px;box-shadow: 0 6px 18px rgba(16,24,40,0.06);align-self: start;}
.checkout-page .checkout-summary h3 { margin:0 0 0.75rem 0; }
.checkout-page .cart-products { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.checkout-page .cart-product { display:flex; gap:0.75rem; align-items:center; padding:0.5rem; border-radius:8px; background:transparent; }
.checkout-page .cart-product .thumb { width:64px; height:64px; border-radius:6px; overflow:hidden; flex:0 0 64px; background:#f6f6f6; display:flex; align-items:center; justify-content:center; }
.checkout-page .cart-product .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.checkout-page .cart-product .meta { flex:1 1 auto; min-width:0; }
.checkout-page .cart-product .meta .name { font-weight:700; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.checkout-page .cart-product .meta .variant { font-size:0.85rem; color:var(--text-light); }
.checkout-page .cart-product .qty { text-align:right; min-width:84px; }
.checkout-page .cart-product .qty .unit { font-size:0.85rem; color:var(--text-light); }
.checkout-page .cart-products-scroll { max-height: 48vh; overflow:auto; padding-right:6px; }
.checkout-page .checkout-summary .totals { border-top:1px solid var(--border); margin-top:0.75rem; padding-top:0.75rem; display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.checkout-page .checkout-summary .actions { margin-top:1rem; display:flex; gap:0.5rem; flex-direction:column; }
.checkout-page .checkout-summary.sticky {position:sticky;top: calc(7.25rem + 0px);}

/* Product Details */
/* Product Details */
.product-details {
    display: flex;
    gap: 2.5rem;
    background: #fff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

/* Product Details Image */
.product-details img {
    max-width: 50%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* Product Info */
.product-info {
    flex-grow: 1;
    font-size: 1.1rem;
}

/* Stack product details into single column on narrow viewports */
@media (max-width: 900px) {
    .product-details { flex-direction: column; padding: 1rem; gap: 1rem; }
    .product-details img { max-width: 100%; height: auto; margin: 0 auto; display:block; }
    .product-details .product-info { width: 100%; }
}

/* Product Link */
.product-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

/* Form Styles */
.form-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 1rem;
    border: 1px solid var(--border);
}

/* Make forms full-width on small screens for easier input */
@media (max-width: 640px) {
    .form-container {margin: 1rem;padding: 1rem;width: calc(100%);}
    .form-input { font-size: 1rem; padding: 0.9rem; }
}

/* Admin pages need wider product forms for table editors and image previews */
body.admin .form-container,
body.admin-page .form-container {
    max-width: 1000px;
}

@media (max-width: 1100px) {
    body.admin .form-container,
    body.admin-page .form-container {
        max-width: 92%;
        padding: 1.25rem;
    }
}

.form-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-title svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

/* Specific checkout page icon sizing — shrink on mobile to avoid dominating the form */
.checkout-page .form-title svg { width: 3rem; height: 3rem; }

@media (max-width: 640px) {
    .checkout-page .form-title svg { width: 2rem !important; height: 2rem !important; }
    .checkout-page .form-title { gap: 0.5rem; }
}

.form-section {
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.form-section:first-child {
    margin-top: 0;
    border-top: none;
}

.form-section-title {
    font-size: 1.125rem;
}

/* Shipping selection styles: make shipping block look like other form sections/cards */
.shipping-section {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    margin-bottom: 1rem;
    width: 100%;
}

/* Shipping options as selectable tiles */
.shipping-section #shipping-options { display:flex; flex-direction:column; gap:0.5rem; }
.shipping-section .payment-option { display:flex; align-items:center; gap:0.75rem; padding:0.75rem; border-radius:8px; cursor:pointer; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; }
.shipping-section .payment-option input[type="radio"] { width:18px; height:18px; accent-color: var(--primary); }
.shipping-section .payment-option .payment-option-body { display:flex; flex-direction:column; }
.shipping-section .payment-option .payment-option-price { color: var(--text-light); font-weight:700; }
.shipping-section .payment-option:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,0.06); border-color: rgba(49,64,72,0.06); }
.shipping-section .payment-option.active { border: 1px solid rgba(49,64,72,0.08); box-shadow: 0 12px 30px rgba(16,24,40,0.08); transform: translateY(-2px); }

/* Mobile adjustments: stack and larger hit targets */
@media (max-width: 640px) {
    .shipping-section { padding: 0.75rem; }
    .shipping-section .payment-option { padding: 0.9rem; gap:1rem; }
    .shipping-section .payment-option input[type="radio"] { width:20px; height:20px; }
}

/* Make shipping options visually match payment method tiles */
.payment-option {
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,246,241,0.98));
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 8px 24px rgba(16,24,40,0.06);
    padding: 0.9rem;
}
.payment-option .payment-option-icon {
    width:48px; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; background: linear-gradient(180deg, rgba(49,64,72,0.03), rgba(201,163,74,0.03)); color: var(--primary);
}
.payment-option .payment-option-body { display:flex; flex-direction:column; }
.payment-option .payment-option-price { font-weight:700; color:var(--text-light); }
.payment-option.active { border-color: rgba(49,64,72,0.06); box-shadow: 0 14px 40px rgba(16,24,40,0.08); transform: translateY(-3px); }

/* ensure the icon blocks don't overflow on small screens */
@media (max-width:640px){ .payment-option .payment-option-icon{ width:44px;height:44px;font-size:0.95rem;} }

/* Active shipping color: use warm gold accent when a shipping option is selected */
.shipping-section .payment-option.active,
.shipping-option.active {
    background: linear-gradient(90deg, rgba(245,196,110,0.12), rgba(245,196,110,0.06));
    border-color: rgba(245,196,110,0.25);
}
.shipping-section .payment-option.active .payment-option-icon,
.shipping-option.active .payment-option-icon {
    background: #f5c46e; color: #111;
}
.shipping-section .payment-option.active .payment-option-title,
.shipping-option.active .payment-option-title,
.shipping-section .payment-option.active .payment-option-body > div:first-child {
    color: #111; font-weight:800;
}

/* Ensure totals breakdown layout stays compact on small viewports */
.checkout-page .checkout-summary .totals { display:flex; flex-direction:column; gap:0.4rem; align-items:flex-start; font-weight:600; }
.checkout-page .checkout-summary .totals div { display:flex; justify-content:space-between; width:100%; }

.form-group {
    margin-bottom: 1.5rem;
}

/* Make form-group a positioning context for inline field tooltips */
.form-group { position: relative; }

/* Tooltip for invalid fields */
.field-tooltip {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(220,38,38,0.95), rgba(185,28,28,0.95));
    color: #fff;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    z-index: 40;
}

.field-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0; border-left: 6px solid rgba(220,38,38,0.95); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

.field-invalid { box-shadow: 0 0 0 3px rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.6) !important; }

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

.form-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--text);
    background: #fffaf5;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Add column popover used on admin variation table */
.add-column-popover {
    position: absolute;
    top: 38px;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16,24,40,0.12);
    min-width: 240px;
    z-index: 200;
}
.add-column-popover .form-input { margin: 0; }

.attr-col-header input { width: 120px; }
.attr-col-header .remove-col { margin-left: 0.5rem; }

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

/* Payment option cards for checkout */
.payment-options { display:flex; gap:0.75rem; }
.payment-option { cursor:pointer; display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1rem; border-radius:0.75rem; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.45)); border:1px solid var(--border); box-shadow: 0 6px 18px rgba(16,24,40,0.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-width: 0; flex:1; }
.payment-option:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(16,24,40,0.08); }
.payment-option.active {border-color: rgb(50 65 73);box-shadow: 0 14px 58px rgb(50 66 73 / 29%);background: linear-gradient(178deg, rgb(245 196 110), rgb(245 196 110));}
.payment-option-icon { font-size:1.6rem; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; background: rgba(0,0,0,0.03); }
.payment-option-title { font-weight:700; color:var(--primary); }
.payment-option-sub { font-size:0.9rem; color:var(--text-light); }
.payment-hint { padding:0.65rem 0.75rem; border-radius:0.5rem; background: rgba(37,37,37,0.03); border:1px solid var(--border); }

/* Reduce card inputs visual dominance when hidden */
.payment-info[style*="display:none"] { opacity:0.9; transform: none; }

.form-input.is-invalid {
    border-color: var(--danger);
}

.form-error {
    font-size: 0.875rem;
    color: var(--danger);
    margin-top: 0.5rem;
}

textarea.form-input {
    min-height: 120px;
    resize: vertical;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.form-check input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border);
    border-radius: 0.25rem;
    cursor: pointer;
}

.form-check label {
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
}

.form-submit {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    height: 5vh;
    transition: all 0.2s ease;
}

.form-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.form-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.form-secondary {
    padding: 1rem;
    width: 13vw;
    text-align-last: center;
    align-content: center;
    background: #f9f6f1;
    color: #000000;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    height: 5vh;
    transition: all 0.2s ease;
}

.form-secondary:hover {
    background: var(--card-bg);
    color: var(--primary);
    border-color: var(--primary);
}

/* Card input specific styles */
.card-input-group {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
}

.card-input {
    font-family: monospace;
    letter-spacing: 0.1em;
}

/* Upload zone */
.upload-zone {
    width: 100%;
    padding: 2rem;
    border: 2px dashed var(--border);
    border-radius: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--background);
}

.upload-zone:hover {
    border-color: var(--primary);
    background: var(--card-bg);
}

/* Enhanced upload zone visuals for the Share your build form */
#uploadZone.upload-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

#uploadZone .upload-zone-inner { display:flex; flex-direction:column; gap:0.5rem; align-items:center; }
#uploadZone .upload-placeholder { font-weight:700; color:var(--primary); }
#uploadZone .upload-hint { font-size:0.9rem; color:var(--text-light); }

#uploadZone.drag-over { border-color: var(--accent); background: rgba(247,211,127,0.06); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201,163,74,0.06); }

.image-preview { display: grid; grid-template-columns: 120px; gap: 0.5rem; }
.image-preview-item { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.image-preview-item img { width: 100%; height: 100%; object-fit: cover; display:block; }
.remove-image { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.6); color: white; border: none; width: 28px; height: 28px; border-radius: 999px; font-size: 1rem; display:flex; align-items:center; justify-content:center; }

@media (max-width: 640px) {
    #uploadZone { padding: 1rem; }
    .image-preview { grid-template-columns: 1fr; }
}

.upload-zone svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.upload-zone p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Admin Panel Specific Styles */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.admin-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border-radius: 0.75rem;
    color: var(--primary);
}

.stat-card-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-light);
    margin: 0;
}

.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.025em;
}

.stat-card-change {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-card-change.positive {
    color: var(--success);
}

.stat-card-change.negative {
    color: var(--danger);
}

.admin-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 1rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--background);
}

.admin-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-section-actions {
    display: flex;
    gap: 0.75rem;
}

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

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

.admin-table th {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--background);
}

.admin-table tbody tr:hover {
    background: var(--background);
}

.admin-table td {
    font-size: 0.95rem;
    color: var(--text);
}

.status-badge {
    /* Unified badge base: consistent shape, padding, subtle border and shadow */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px; /* pill */
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 28px;
    line-height: 1;
    border: 1px solid rgba(16,24,40,0.04);
    background: rgba(255,255,255,0.02);
    box-shadow: 0 6px 18px rgba(16,24,40,0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 120ms ease;
}

/* Hover/interaction micro-feedback */
.status-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,24,40,0.06); }

/* Per-status color variants (kept semantic names so views can remain unchanged) */
.status-badge.pending {
    background: linear-gradient(180deg, rgba(255,247,235,0.92), rgba(255,247,235,0.88));
    color: rgb(164, 97, 20); /* warm amber text */
    border-color: rgba(164,97,20,0.12);
}

.status-badge.processing {
    background: linear-gradient(180deg, rgba(235,247,255,0.94), rgba(240,249,255,0.9));
    color: rgb(28, 99, 191); /* blue for processing */
    border-color: rgba(28,99,191,0.12);
}

.status-badge.in_transit {
    background: linear-gradient(180deg, rgba(237,250,245,0.94), rgba(243,252,248,0.9));
    color: rgb(6, 120, 110); /* teal for shipping/in transit */
    border-color: rgba(6,120,110,0.12);
}

.status-badge.completed {
    background: linear-gradient(180deg, rgba(237,250,245,0.94), rgba(243,252,248,0.9));
    color: var(--success);
    border-color: rgba(16,185,129,0.12);
}

.status-badge.cancelled {
    background: linear-gradient(180deg, rgba(255,241,241,0.95), rgba(255,243,243,0.9));
    color: var(--danger);
    border-color: rgba(220,38,38,0.12);
}

/* Fallback small variant used in tables */
.status-badge.small { padding: 0.15rem 0.55rem; font-size: 0.8rem; min-height: 22px; }

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: none;
    background: var(--background);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.action-btn.delete:hover {
    background: var(--danger);
}

.admin-filters {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-light);
}

.filter-select {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
}

.spec-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

.spec-row .remove-spec {
    background: var(--danger);
    color: white;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.spec-row .remove-spec:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.upload-zone-active {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.image-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview-item .remove-image {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: var(--danger);
    color: white;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.image-preview-item .remove-image:hover {
    background: #dc2626;
    transform: scale(1.05);
}

/* Search Container */
.search-container {
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: center;
}

/* Search Bar */
#search-bar {
    width: 100%;
    max-width: 400px;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(16,24,40,0.04);
    outline: none;
    transition: border 0.3s;
}

#search-bar:focus {
    border: 1.5px solid var(--primary);
}

/* Responsive */
.welcome-subtitle {
    font-size: 1.125rem;
    color: rgba(31, 41, 55, 0.85); /* darker readable tone */
    margin-top: 0.75rem;
    font-weight: 500;
}

/* Animation Keyframes */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* product animation removed */

@media (max-width: 900px) {
    main {
        padding: 1.2rem 0.5rem;
    }
    #products {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    .product-details {
        padding: 1.2rem;
        gap: 1.2rem;
    }
    .welcome-banner h2 {
        font-size: 2rem;
    }
    .welcome-subtitle {
        font-size: 1rem;
    }
    .category-buttons {
        gap: 0.75rem;
    }
    .category-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* Cart Table */
.cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 2rem;
}

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

.cart-table th {
    background: var(--secondary);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-table tbody tr:hover {
    background-color: var(--background);
}

.cart-table tfoot {
    background-color: var(--background);
    font-weight: 600;
}

.cart-table tfoot td {
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
    color: var(--text);
}

/* Quantity Controls */
.quantity-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--background);
    padding: 0.5rem;
    border-radius: 0.75rem;
}

.quantity-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

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

.quantity {
    font-size: 1rem;
    font-weight: 500;
    min-width: 2rem;
    text-align: center;
}

/* Remove Button */
.remove-item {
    background: var(--background);
    color: var(--danger);
    border: 1px solid var(--border);
    padding: 0.45rem 0.6rem; /* slightly tighter for icon buttons */
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.remove-item:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

/* Continue Shopping */
.continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--background);
    color: var(--text);
    padding: 0.875rem 1.5rem;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin: 1rem 0;
}

.continue-shopping:hover {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.continue-shopping svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
}

.continue-shopping:hover svg {
    transform: translateX(-4px);
}

/* Responsive Design System */
@media (max-width: 1024px) {
    main {
        padding: 1.5rem;
    }
    
    #products {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.25rem;
    }
    
    .product-details {
        flex-direction: column;
        padding: 1.5rem;
    }
    
    .product-details img {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    header nav {
        width: 100%;
        justify-content: space-around;
        padding: 0.5rem 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #products {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    
    .cart-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0.75rem;
    }
    
    .cart-table th,
    .cart-table td {
        white-space: nowrap;
        min-width: 120px;
    }
    
    .cart-table td:last-child {
        padding-right: 1.5rem;
    }
    
    .quantity-controls {
        flex-wrap: nowrap;
    }
}

/* Mobile hamburger button and mobile nav */
.mobile-hamburger {
    display: none;
    background: transparent;
    border: none;
    padding: 0.5rem;
    margin-left: 0.5rem;
    cursor: pointer;
}
.mobile-hamburger .hamburger-box {display: inline-block;width: 28px;height: 18px;position: relative;color: white;}
.mobile-hamburger .hamburger-inner, .mobile-hamburger .hamburger-inner::before, .mobile-hamburger .hamburger-inner::after {
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    display: block;
    position: absolute;
    left: 0;
    transition: transform .25s ease, opacity .2s ease;
}
.mobile-hamburger .hamburger-inner { top: 50%; transform: translateY(-50%); }
.mobile-hamburger .hamburger-inner::before { content: ''; top: -8px; }
.mobile-hamburger .hamburger-inner::after { content: ''; top: 8px; }

/* When active, show X */
.mobile-hamburger.active .hamburger-inner { background: transparent; }
.mobile-hamburger.active .hamburger-inner::before { transform: translateY(8px) rotate(45deg); }
.mobile-hamburger.active .hamburger-inner::after { transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {display: none;position: fixed;inset: 0 0 auto 0;top: 84px;left: 0;right: 0;max-width: 100%;background: linear-gradient(180deg, rgb(246 239 230), rgba(246, 239, 230, 0.96));box-shadow: 0 8px 30px rgba(0,0,0,0.12);z-index: 995;padding: 1rem;backdrop-filter: blur(5px) saturate(180%);-webkit-backdrop-filter: blur(16px) saturate(180%);background: linear-gradient(180deg, rgb(246 239 230 / 40%) 0%, rgb(246 239 230 / 40%) 100%);}
.mobile-nav.open { display: block; }
.mobile-nav .nav-inner { display: flex; flex-direction: column; gap: 0.5rem; max-width: 100%; }
.mobile-nav .nav-inner a { padding: 0.75rem 1rem; border-radius: 8px; background: var(--card-bg); color: var(--text); font-weight: 700; text-decoration: none; }

/* Make header thinner on very small screens */
@media (max-width: 640px) {
    header .header-inner { height: 56px; padding: 0.25rem 0.5rem; }
    header { padding: 0.4rem 0.4rem; }
    /* ensure header-inner is positioned so absolute children can be placed relative to it */
    header .header-inner { position: relative; }
    /* Place hamburger at extreme right and ensure it is above other icons */
    .mobile-hamburger { display: inline-block; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 999; }
    .header-center { display: none; }
    /* Shift the right icons left and add padding so they never sit beneath the hamburger */
    .header-right { gap: 0.25rem; margin-right: 64px; padding-right: 4px; position: relative; z-index: 500; }

    /* If brand image is fixed, reduce its footprint on small screens so it doesn't collide with icons */
    header .site-brand .brand-link img, header .site-brand .site-logo { position: static !important; width: 72px !important; height: 40px !important; }
}


@media (max-width: 640px) {
    main {
        padding: 1rem;
    }
    
    #products {
        grid-template-columns: 1fr;
    }
    
    .product {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .cart-table thead {
        display: none;
    }
    
    .cart-table tbody tr {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid var(--border);
    }
    
    .cart-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
    }
    
    .cart-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text);
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.25rem;
    }
    
    header nav {
        gap: 0.75rem;
    }
    
    header nav a {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
}

/* High-specificity mobile overrides to prevent header icon overlap
   Placed at end of file so they take precedence over earlier rules. */
@media (max-width: 640px) {
    /* Ensure header inner is the positioning context */
    header .header-inner { position: relative !important; z-index: 1000; }

    /* Make brand image static and smaller to avoid covering center/right area */
    header .site-brand .brand-link img, header .site-brand .site-logo {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 96px !important; /* larger logo on mobile for readability */
        height: auto !important;
        margin: 0 10px 0 8px !important;
        display: block !important;
        transform: none !important;
        pointer-events: auto !important;
        max-height: 64px !important;
    }

    /* Keep hamburger inline with other icons in header-right */
    .mobile-hamburger {
        display: inline-flex !important;
        position: relative !important; /* flow with .header-right */
        right: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 1200 !important;
        background: transparent !important;
        padding: 0.35rem !important;
        margin-left: 6px !important;
        color: white;
    }

    /* Header-right should have minimal extra margin so icons sit together */
    .header-right {
        position: relative !important;
        z-index: 900 !important;
        margin-right: 8px !important;
        padding-right: 4px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* If any other rules force fixed positioning, override here */
    header .site-brand .brand-link img[style], header .site-brand .site-logo[style] {
        position: static !important;
        width: 96px !important;
        height: auto !important;
    }

    /* Enlarge header icon buttons for better tap targets */
    .header-right .icon-btn { width:56px !important; height:56px !important; padding:10px !important; }

    /* Ensure header icons (SVG) are visible on dark header */
    .header-right .icon-btn svg, .mobile-hamburger svg { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; }
    .header-right .icon-btn { color: #ffffff !important; }
}

/* Minimal header tweaks for D&D theme */
header h1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    color: var(--primary-dark);
}

header h1 svg {
    color: var(--primary);
}

/* Brand image sizing — use a more specific selector and !important to ensure it takes effect */
/* Mobile cart-specific responsive fixes - completely redesigned for mobile */
@media (max-width: 640px) {
    /* Make cart container mobile-friendly */
    .cart-container { 
        padding: 0.75rem; 
        max-width: 100%;
    }

    /* Hide desktop table header */
    .cart-table thead { 
        display: none; 
    }

    /* Make table layout flex for mobile */
    .cart-table {
        display: block;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    /* Each cart row becomes a card */
    .cart-table tbody tr {
        display: block;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    /* All table cells stack vertically */
    .cart-table tbody tr td {
        display: block;
        padding: 0;
        border: none;
        width: 100%;
        text-align: left;
    }

    /* Product cell with image and info */
    .cart-table tbody tr td:nth-child(1) {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .cart-table tbody tr td:nth-child(1) .product-info {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .cart-table tbody tr td:nth-child(1) .product-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .cart-table tbody tr td:nth-child(1) .product-details {
        flex: 1;
    }

    .cart-table tbody tr td:nth-child(1) .product-name {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Price, Quantity, Total, Action in a grid */
    .cart-table tbody tr td:nth-child(2),
    .cart-table tbody tr td:nth-child(3),
    .cart-table tbody tr td:nth-child(4),
    .cart-table tbody tr td:nth-child(5) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .cart-table tbody tr td:nth-child(5) {
        border-bottom: none;
        justify-content: flex-end;
    }

    /* Add labels for mobile */
    .cart-table tbody tr td:nth-child(2)::before { content: 'Price:'; font-weight: 600; color: var(--text-light); }
    .cart-table tbody tr td:nth-child(3)::before { content: 'Quantity:'; font-weight: 600; color: var(--text-light); }
    .cart-table tbody tr td:nth-child(4)::before { content: 'Total:'; font-weight: 600; color: var(--text-light); }

    /* Price styling */
    .cart-table tbody tr td:nth-child(2) {
        font-weight: 700;
        color: var(--primary);
        font-size: 1.125rem;
    }

    /* Total styling */
    .cart-table tbody tr td:nth-child(4) {
        font-weight: 700;
        color: var(--text);
        font-size: 1.125rem;
    }

    /* Quantity controls mobile adjustments */
    .quantity-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--background);
        padding: 0.25rem;
        border-radius: 8px;
    }

    .quantity-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1rem;
    }

    .quantity {
        min-width: 40px;
        text-align: center;
        font-weight: 600;
    }

    /* Remove button mobile styling */
    .remove-item {
        padding: 0.5rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Cart summary mobile adjustments */
    .cart-summary {
        margin-top: 1.5rem;
        padding: 1.25rem;
    }

    .cart-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .checkout-button, 
    .continue-shopping {
        width: 100%;
        display: block;
        text-align: center;
        padding: 1rem;
        border-radius: 8px;
    }

    /* Cart header mobile */
    .cart-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .cart-header h1 {
        font-size: 1.75rem;
    }
}
/* Desktop vs Mobile cart display toggles */
.mobile-cart { display: none; }
.desktop-cart { display: block; }

@media (max-width: 640px) {
    .mobile-cart { display: block; }
    .desktop-cart { display: none; }
}

/* Enhanced cart responsiveness and mobile UX */
@media (max-width: 768px) {
    /* Card-style list for mobile */
    .mobile-cart { display: block !important; }
    .desktop-cart { display: none !important; }

    .mobile-cart-item {
        background: var(--bg) !important;
        border-radius: 10px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        box-shadow: 0 6px 18px rgba(16,24,40,0.06) !important;
    }

    .mobile-cart-item .item-header {
        display: flex !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .mobile-cart-item .product-image {
        width: 72px !important;
        height: 72px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    .mobile-cart-item .product-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important; /* allow text to wrap */
    }

    .mobile-cart-item .product-name {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    .mobile-cart-item .product-category,
    .mobile-cart-item .variation-specs {
        font-size: 0.9rem !important;
        color: var(--text-light) !important;
    }

    .item-actions {
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Quantity controls: larger, better spacing for touch */
    .quantity-controls {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px !important;
        background: rgba(0,0,0,0.03) !important;
        border-radius: 8px !important;
    }

    .quantity-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        font-size: 1.1rem !important;
    }

    .quantity {
        min-width: 48px !important;
        text-align: center !important;
        font-weight: 700 !important;
    }

    .remove-item {
        padding: 8px !important;
        border-radius: 8px !important;
    }

    /* consistent remove button size and alignment across breakpoints */
    .remove-item {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 40px !important;
        min-height: 40px !important;
        background: transparent !important;
        border: none !important;
        color: var(--danger) !important;
    }

    /* Make summary sticky at bottom for quick checkout access */
    .cart-summary {
        position: sticky !important;
        bottom: 12px !important;
        z-index: 90 !important;
        margin-top: 8px !important;
        padding: 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 36px rgba(16,24,40,0.12) !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96)) !important;
    }

    .cart-total { flex-direction: row !important; gap: 8px !important; align-items: center !important; }
    .total-label { font-size: 1rem !important; }
    .total-amount { font-size: 1.25rem !important; color: var(--primary) !important; }

    .cart-actions { width: 100% !important; }
    .checkout-button, .continue-shopping {
        padding: 12px !important;
        border-radius: 10px !important;
        font-weight: 800 !important;
    }

    /* Avoid accidental horizontal scroll */
    html, body { overflow-x: hidden !important; }
}
header .site-brand .brand-link img, header .site-brand .site-logo {
    top: 10px;
    width: 107px !important;
    height: 56px !important;
    min-height: fit-content;
    object-fit: cover;
    display: block;
    position: fixed;
}
/* Ensure footer logo remains original size */
footer .brand-link img, footer .site-logo {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain;
    display: block;
}

/* Global toast items (move inline styles to CSS) */
.toast-item {
    pointer-events: auto;
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    min-width: 200px;
    max-width: 360px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    color: #fff;
    transition: transform 200ms ease, opacity 200ms ease;
}
.toast-error { background: linear-gradient(90deg, rgba(155,27,27,0.95), rgba(139,16,16,0.95)); }
.toast-success { background: linear-gradient(90deg, rgba(22,163,74,0.95), rgba(16,185,129,0.95)); }

/* Cart confirm popover - larger and more spaced */
.cart-confirm-popover {
    pointer-events: auto;
    position: absolute;
    z-index: 9999;
    min-width: 240px;
    max-width: 360px;
    background: #fff;
    color: #111;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(16,24,40,0.16);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
    font-size: 0.98rem;
    line-height: 1.25;
    border: 1px solid rgba(16,24,40,0.04);
}
.cart-confirm-popover .popover-message {
    padding: 0;
    margin: 0;
    color: var(--text);
}
.cart-confirm-popover .popover-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}
.cart-confirm-popover .confirm-yes,
.cart-confirm-popover .confirm-no {
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    min-width: 76px;
    text-align: center;
    border: none;
}
.cart-confirm-popover .confirm-yes {
    background: var(--danger);
    color: #fff;
}
.cart-confirm-popover .confirm-no {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(16,24,40,0.06);
}

/* small arrow */
.cart-confirm-popover::after {
    content: '';
    position: absolute;
    bottom: -8px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(16,24,40,0.06);
    border-left: 1px solid rgba(16,24,40,0.04);
    border-bottom: 1px solid rgba(16,24,40,0.04);
}

@media (max-width: 640px) {
    .cart-confirm-popover { min-width: 200px; max-width: 90vw; padding: 0.75rem 0.9rem; font-size: 0.95rem; }
    .cart-confirm-popover::after { left: 12px; }
}

/* Footer specific refinements */
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.25rem; max-width:1200px; margin:0 auto; }
.footer-col { padding: 0.5rem 0; }
.footer-brand { font-weight: 700; color: white; margin-bottom: 0.5rem; }
.newsletter-form { display:flex; gap:0.5rem; margin-top:0.5rem; align-items:center; }
.newsletter-input { flex:1 1 auto; padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.95rem; transition: box-shadow 0.18s ease, transform 0.12s ease; }
.newsletter-input::placeholder { color: rgba(255,255,255,0.7); }
.newsletter-input:focus { outline: none; box-shadow: 0 6px 18px rgba(0,0,0,0.35); border-color: var(--accent); background: rgba(255,255,255,0.08); }
.newsletter-submit { padding: 0.6rem 1.05rem; border-radius: 999px; background: linear-gradient(90deg,var(--accent), #f7d37f); color: #111; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 8px 22px rgba(201,163,74,0.14); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.newsletter-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,163,74,0.18); }

@media (max-width: 560px) {
    .newsletter-form { flex-direction: column; align-items: stretch; }
    .newsletter-submit { width: 100%; }
}

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

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

/* Slightly smaller on narrow viewports */
@media (max-width: 900px) {
    header .site-brand .brand-link img, header .site-brand .site-logo { width: 64px !important; height: 64px !important; }
}

@media (max-width: 480px) {
    header .site-brand .brand-link img, header .site-brand .site-logo { width: 48px !important; height: 48px !important; }
}

header nav a {
    color: var(--text-light);
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
}

header nav a:hover {
    color: var(--primary-dark);
    background: rgba(0,0,0,0.02);
}

/* Thank-you page button utilities */
.btn-lg { padding: 0.95rem 1.4rem; font-size: 1rem; border-radius: 0.85rem; }
.btn-elevated { box-shadow: 0 8px 22px rgba(16,24,40,0.08); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn-elevated:hover, .btn-elevated:focus { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(16,24,40,0.12); }
.btn-outline:hover, .btn-outline:focus { background: rgba(255,255,255,0.04); color: var(--primary); border-color: rgba(0,0,0,0.06); }

/* Improve keyboard focus visibility for interactive buttons */
.btn:focus-visible { outline: 3px solid rgba(201,163,74,0.18); outline-offset: 3px; }

/* Small icon spacing inside buttons */
.btn svg { vertical-align: middle; margin-right: 0.5rem; height: 1.05rem; width: 1.05rem; }

/* Admin order address styling */
.admin-address-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
}

.admin-address-card .address-line {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.admin-address-card .address-line:last-child {
    margin-bottom: 0;
}

/* Final overrides to ensure header logo and icons are readable on mobile
   Placed at the end to take precedence over earlier mobile rules. */
/* Mobile nav inner controls (currency / language) when moved into the hamburger */
@media (max-width: 640px) {
    .mobile-nav .mobile-controls { display:flex; gap:0.5rem; align-items:center; padding: 0.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.04); margin-bottom: 0.5rem; }
    .mobile-nav .mobile-controls .currency-dropdown { margin:0; }
    .mobile-nav .mobile-controls .currency-toggle { min-width: 110px; padding: 8px 10px; }
    .mobile-nav .mobile-controls .language-dropdown { margin:0; }
}
@media (max-width: 640px) {
    header .site-brand .brand-link img, header .site-brand .site-logo {
        width: 75px !important;
        position: absolute !important;
        top: -3px !important;
        height: auto !important;
        max-height: 56px !important;
        margin: 0 10px !important;
        display: block !important;
    }

    /* Ensure header icons (cart, profile, hamburger) are visible on dark backgrounds */
    header .header-right .icon-btn svg, header .mobile-hamburger svg, header .header-right .icon-btn {
        color: #ffffff !important;
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }

    /* Slightly enlarge icon buttons for tap targets */
    header .header-right .icon-btn { width:48px !important; height:48px !important; padding:8px !important; }
}

/* Specific cart button tweaks to ensure the cart icon and badge are large and visible on mobile */
@media (max-width: 640px) {
    /* make the cart button a larger square touch target */
    a.icon-btn.cart-btn {width: 74px !important;height: 74px !important;padding: 12px !important;border-radius: 12px !important;}
    /* enlarge the inner SVG for better visibility */
    a.icon-btn.cart-btn svg { width: 28px !important; height: 28px !important; }
    /* enlarge the badge and place it neatly */
    a.icon-btn.cart-btn .icon-badge { min-width:20px !important; height:20px !important; line-height:20px !important; font-size:0.8rem !important; right:8px !important; top:6px !important; transform: none !important; }
    /* ensure SVG color is correct on dark header */
    a.icon-btn.cart-btn svg { color: #fff !important; fill: #fff !important; stroke: #fff !important; }
}

/* Fix header to top on mobile and adjust content spacing so it isn't covered */
@media (max-width: 640px) {
    /* mobile header height used across rules */
    :root { --mobile-header-height: 56px; }

    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1400 !important;
        width: 100% !important;
    }

    header .header-inner { height: var(--mobile-header-height) !important; display:flex; align-items:center; }

    /* push page content down so header doesn't cover top content */
    body { padding-top: var(--mobile-header-height) !important; }

    /* ensure mobile nav opens below the fixed header */
    .mobile-nav { top: var(--mobile-header-height) !important; max-height: calc(100vh - var(--mobile-header-height)) !important; overflow-y: auto !important; }
}