/* Semantic storefront surfaces. Loaded after legacy template styles. */
html:root {
  --sf-page: #f8fafc; --sf-surface: #fff; --sf-muted-surface: #f1f5f9;
  --sf-text: #17202b; --sf-muted: #526070; --sf-border: #dce2e7;
  --sf-brand: var(--primary); --sf-radius: .65rem;
  --header-bg: var(--sf-surface); --header-text: var(--sf-text);
  --header-muted: var(--sf-muted); --header-border: var(--sf-border);
  --header-nav-bg: var(--sf-muted-surface);
}
html.dark {
  color-scheme: dark;
  --sf-page: #101419; --sf-surface: #1a2028; --sf-muted-surface: #242d38;
  --sf-text: #f0f3f7; --sf-muted: #b4bfcd; --sf-border: #384454;
}
html:not(.dark) { color-scheme: light; }
body[class*="theme-"] :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Header controls used PHP's initial palette for backgrounds but the live mode
   for text, producing white-on-white controls after a mode switch. */
.glass-header :is(a, button)[style*="background:"] {
  background: var(--sf-muted-surface) !important;
  color: var(--sf-text) !important;
  border-color: var(--sf-border) !important;
}
.glass-header .group:focus-within > .invisible { visibility: visible; opacity: 1; }
html.dark body[class*="theme-"] :is(.text-purple-600, .text-purple-700, .text-purple-400, .text-emerald-600, .text-green-600) {
  color: color-mix(in srgb, var(--primary) 40%, #ffffff) !important;
}
body[class*="theme-"] .text-transparent { color: var(--sf-text) !important; -webkit-text-fill-color: currentColor; }
body[class*="theme-"] :is(.theme-btn-primary, .sf-button-primary, button[type="submit"].bg-gradient-to-r) {
  background: var(--primary) !important; color: var(--sf-on-brand, #fff) !important;
}
html body[class*="theme-"] { background: var(--sf-page) !important; color: var(--sf-text) !important; }
body[data-feature-preorder="0"] :is(#preorder-section, [data-feature="preorder"]) { display: none !important; }
body[data-feature-wholesale="0"] :is(#wholesale-section, [data-feature="wholesale"]) { display: none !important; }
body[data-feature-ecommerce="0"] .store-category-nav { display: none !important; }
html.dark body[class*="theme-"] :is(.max-w-md.bg-white, .max-w-md.bg-gray-800) { background: var(--sf-surface) !important; color: var(--sf-text) !important; border-color: var(--sf-border) !important; }
html.dark body[class*="theme-"] :is(.max-w-md input, .max-w-md select) { background: var(--sf-muted-surface) !important; color: var(--sf-text) !important; border-color: var(--sf-border) !important; }
html.dark .glass-header, html.dark .store-category-nav, html.dark #store-mobile-menu { background: var(--sf-surface) !important; border-color: var(--sf-border) !important; color: var(--sf-text) !important; }
html.dark .glass-header [style*="color"], html.dark .store-category-nav [style*="color"] { color: var(--sf-text) !important; }
html.dark body[class*="theme-"] :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50) { background-color: var(--sf-surface) !important; }
html.dark body[class*="theme-"] :is(.bg-gray-200, .bg-slate-100) { background-color: var(--sf-muted-surface) !important; }
html.dark body[class*="theme-"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600) { color: var(--sf-text) !important; }
html.dark body[class*="theme-"] :is(.text-gray-500, .text-gray-400, .text-slate-500, .text-slate-400) { color: var(--sf-muted) !important; }
html.dark body[class*="theme-"] :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-gray-400, .border-gray-500) { border-color: var(--sf-border) !important; }
html.dark body[class*="theme-"] :is(input, select, textarea) { background: var(--sf-surface) !important; border-color: var(--sf-border) !important; color: var(--sf-text) !important; }
html.dark body[class*="theme-"] :is(input, select, textarea)::placeholder { color: var(--sf-muted) !important; opacity: 1; }
html.dark body[class*="theme-"] :is(button.bg-white, a.bg-white, button.bg-gray-100, a.bg-gray-100) { background-color: var(--sf-muted-surface) !important; color: var(--sf-text) !important; border-color: var(--sf-border) !important; }
html.dark body[class*="theme-"] :is(.hover\:bg-white:hover, .hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover) { background-color: var(--sf-muted-surface) !important; }
html.dark body[class*="theme-"] :is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl) { box-shadow: 0 8px 24px rgba(0,0,0,.32) !important; }
html.dark body[class*="theme-"] :is(.sf-button-outline, .sf-carousel-controls button) { background: var(--sf-surface) !important; color: var(--sf-text) !important; }
body.theme-modern-minimal { --sf-radius: .25rem; font-family: Inter, Arial, sans-serif; }
body.theme-grocery-fresh { --sf-radius: 1rem; font-family: Roboto, Arial, sans-serif; }
body.theme-auto-parts { --sf-radius: .2rem; font-family: "Arial Narrow", Arial, sans-serif; }
body.theme-tech-store { --sf-radius: .5rem; font-family: Inter, "Segoe UI", sans-serif; }
body.theme-fashion-boutique { --sf-radius: 0; font-family: Lato, Arial, sans-serif; }
body.theme-luxury-watch { --sf-radius: 0; font-family: Georgia, serif; }
body.theme-industrial { --sf-radius: 0; font-family: "Arial Narrow", Arial, sans-serif; }
body.theme-kids-world { --sf-radius: 1.6rem; font-family: "Comic Neue", "Trebuchet MS", sans-serif; }
body.theme-sports-gear { --sf-radius: .15rem; font-family: Montserrat, Arial, sans-serif; }
body.theme-home-living { --sf-radius: .8rem; font-family: Lato, Arial, sans-serif; }
body[class*="theme-"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
body[class*="theme-"] :is(.product-card, .purchase-mode-card, .bg-white, .bg-gray-50, .bg-gray-100) {
  background-color: var(--sf-surface) !important; border-color: var(--sf-border) !important; color: var(--sf-text);
}
body[class*="theme-"] :is(.product-card h3, .product-card h4, .product-title, .price-tag, .product-price) { color: var(--sf-text) !important; }
body[class*="theme-"] :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: var(--sf-text) !important; }
body[class*="theme-"] :is(.text-gray-600, .text-gray-500) { color: var(--sf-muted) !important; }
body[class*="theme-"] :is(input, select, textarea) { color: var(--sf-text); background-color: var(--sf-surface); }
body[class*="theme-"] :is(.text-purple-600, .text-purple-700, .text-purple-800, .text-purple-900, .text-purple-400) { color: var(--primary) !important; }
body[class*="theme-"] :is(.border-purple-200, .border-purple-300, .border-purple-600, .border-purple-700, .border-purple-800) { border-color: color-mix(in srgb, var(--primary) 55%, var(--sf-border)) !important; }
body[class*="theme-"] :is(.bg-purple-50, .bg-purple-100, .bg-purple-500\/20, .bg-purple-900\/30, .bg-purple-950\/20) { background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important; }
body[class*="theme-"] :is(.bg-purple-600, .bg-purple-700, .bg-purple-800) { background-color: var(--primary) !important; background-image: none !important; }
body[class*="theme-"] :is(.bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b) { background-image: none !important; background-color: var(--primary) !important; }
body[class*="theme-"] footer > .bg-gradient-to-r { background: var(--primary) !important; }
body[class*="theme-"] footer > .bg-gradient-to-br { background: #111827 !important; }
.sf-hero { max-width: 1440px; margin: 0 auto; padding: clamp(1rem, 3vw, 3rem); background: var(--sf-page) !important; color: var(--sf-text) !important; }
.legacy-hero, #hero-carousel:not(.sf-hero) { display: none !important; }
.sf-hero-slide { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(1.5rem, 5vw, 5rem); }
.sf-hero-slide[hidden] { display: none !important; }
.sf-hero-copy { min-width: 0; align-self: center; padding: clamp(1rem, 3vw, 3rem) 0; }
.sf-eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; margin-bottom: 1.5rem; color: var(--sf-muted); }
#hero-carousel.sf-hero h1 { font-size: clamp(2rem, 4vw, 4.6rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; color: var(--sf-text); overflow-wrap: break-word; }
.sf-hero-description { margin: 1.5rem 0 2rem; max-width: 52ch; font-size: 1rem; line-height: 1.8; color: var(--sf-muted); }
.sf-hero-media { min-width: 0; min-height: 22rem; background: var(--sf-muted-surface); margin: 0; border-radius: var(--sf-radius); overflow: hidden; }
.sf-hero-media img { width: 100%; height: 100%; max-height: 40rem; object-fit: cover; }
.sf-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.sf-button { display: inline-flex; gap: .8rem; align-items: center; justify-content: center; padding: .9rem 1.3rem; border-radius: var(--sf-radius); font-weight: 600; border: 1px solid var(--sf-border); line-height: 1.4; }
.sf-button-primary { background: var(--primary); color: #fff; }
.sf-button-outline { background: var(--sf-surface); color: var(--sf-text); }
.sf-carousel-controls { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding-top: 1rem; font-size: .85rem; color: var(--sf-muted); }
.sf-carousel-controls button { width: 44px; height: 44px; border: 1px solid var(--sf-border); border-radius: 50%; background: var(--sf-surface); color: var(--sf-text); }
.sf-hero--market .sf-hero-slide { grid-template-columns: 3fr 2fr; padding: 1.5rem; background: var(--sf-surface); border-radius: 1.5rem; }
.sf-hero--market .sf-hero-media { border-radius: 50% 50% 1rem 1rem; }
.sf-hero--utility .sf-hero-copy { border-left: 6px solid var(--accent); padding-left: 1.5rem; }
.sf-hero--utility .sf-hero-slide { grid-template-columns: 2fr 3fr; gap: 2rem; }
.sf-hero--console .sf-hero-slide { grid-template-columns: 1fr 1.3fr; border: 1px solid var(--sf-border); padding: 2rem; }
.sf-hero--console .sf-eyebrow { font-family: Consolas, monospace; }
.sf-hero--editorial .sf-hero-slide { grid-template-columns: 3fr 2fr; }
.sf-hero--editorial .sf-hero-media { grid-column: 1; grid-row: 1; }
.sf-hero--editorial .sf-hero-copy { grid-column: 2; padding: 3rem 0; }
.sf-hero--editorial h1, .sf-hero--gallery h1, .sf-hero--room h1 { font-family: Georgia, serif; font-weight: 400 !important; }
.sf-hero--gallery .sf-hero-slide { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
.sf-hero--gallery .sf-hero-copy { max-width: 56rem; margin: auto; padding-bottom: 0; }
.sf-hero--gallery .sf-hero-description { margin-left: auto; margin-right: auto; }
.sf-hero--gallery .sf-hero-actions { justify-content: center; }
.sf-hero--gallery .sf-hero-media { min-height: 18rem; max-height: 28rem; }
.sf-hero--technical { border-bottom: 4px solid var(--accent); }
.sf-hero--technical .sf-hero-slide { grid-template-columns: 3fr 2fr; gap: 0; }
.sf-hero--technical .sf-hero-copy { padding: 2rem; border: 1px solid var(--sf-border); }
.sf-hero--technical h1 { text-transform: uppercase; }
.sf-hero--playful .sf-hero-media { border-radius: 45% 45% 1.5rem 1.5rem; border: 6px solid var(--accent); }
.sf-hero--playful .sf-eyebrow { color: var(--sf-text); border-bottom: 4px solid var(--accent); display: inline-block; }
.sf-hero--athletic .sf-hero-slide { grid-template-columns: 2fr 3fr; gap: 1.5rem; }
.sf-hero--athletic h1 { text-transform: uppercase; font-style: italic; font-weight: 900 !important; }
.sf-hero--athletic .sf-hero-media { border-bottom: 10px solid var(--accent); }
.sf-hero--room .sf-hero-media { grid-column: 1; grid-row: 1; border-radius: 10rem 10rem .5rem .5rem; }
.sf-hero--room .sf-hero-copy { grid-column: 2; }
.store-category-nav .sf-category-row { display: flex; gap: 2rem; overflow-x: auto; padding: .65rem 0; }
.store-category-nav .sf-category-links { display: flex; flex: 0 0 auto; gap: 1.5rem; align-items: center; }
.store-category-nav a { flex: 0 0 auto; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.store-category-nav .sf-nav-note { flex: 0 0 auto; display: flex; align-items: center; }
@media (max-width: 767px) {
  #hero-carousel .sf-hero-slide { grid-template-columns: 1fr; padding: 0; gap: 1rem; }
  #hero-carousel .sf-hero-copy, #hero-carousel .sf-hero-media { grid-column: auto; grid-row: auto; }
  #hero-carousel .sf-hero-copy { padding: 1rem; }
  #hero-carousel .sf-hero-media { min-height: 13rem; height: 16rem; }
  .sf-hero-actions { align-items: stretch; }
  .sf-hero-actions a { flex: 1 1 10rem; }
}
@media (prefers-reduced-motion: reduce) { .sf-hero *, .product-card { transition: none !important; animation: none !important; } }

/* Ten storefront compositions keep the same buying flow while changing rhythm,
   card density, hierarchy and catalog layout. Store palette variables remain editable. */
body.theme-modern-minimal :is(#preorder-section,#wholesale-section) .container,
body.theme-modern-minimal .sf-hero { max-width: 1180px; }
body.theme-modern-minimal .product-card { border-radius: .25rem !important; box-shadow: none !important; }
body.theme-modern-minimal .product-card img { filter: saturate(.84); }

body.theme-grocery-fresh :is(#preorder-section,#wholesale-section) .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.theme-grocery-fresh .product-card { border-radius: 1.5rem !important; border-width: 2px !important; }
body.theme-grocery-fresh .sf-hero { background: color-mix(in srgb,var(--primary) 7%,var(--sf-page)) !important; }

body.theme-industrial :is(#preorder-section,#wholesale-section) .grid { gap: .65rem; }
body.theme-industrial .product-card { border-radius: 0 !important; box-shadow: none !important; border-width: 2px !important; }
body.theme-industrial :is(#preorder-section,#wholesale-section) h2 { text-transform: uppercase; letter-spacing: .08em; }

body.theme-tech-store :is(#preorder-section,#wholesale-section) .grid { gap: 1rem; }
body.theme-tech-store .product-card { border-radius: .65rem !important; border: 1px solid color-mix(in srgb,var(--primary) 45%,var(--sf-border)) !important; box-shadow: 0 0 0 1px color-mix(in srgb,var(--primary) 10%,transparent) !important; }
body.theme-tech-store :is(#preorder-section,#wholesale-section) h2 { font-family: Consolas,monospace; letter-spacing: -.04em; }

body.theme-fashion-boutique :is(#preorder-section,#wholesale-section) .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.theme-fashion-boutique :is(#preorder-section,#wholesale-section) .product-card:first-child { grid-column: span 2; }
body.theme-fashion-boutique .product-card { border-radius: 0 !important; box-shadow: none !important; }
body.theme-fashion-boutique :is(#preorder-section,#wholesale-section) h2 { font-family: 'Playfair Display',Georgia,serif; font-weight: 400 !important; }

body.theme-kids-world :is(#preorder-section,#wholesale-section) .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
body.theme-kids-world .product-card { border-radius: 2rem !important; border-width: 3px !important; transform: rotate(-.5deg); }
body.theme-kids-world .product-card:nth-child(even) { transform: rotate(.5deg); }

body.theme-luxury-watch :is(#preorder-section,#wholesale-section) .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
body.theme-luxury-watch .product-card { border-radius: 0 !important; box-shadow: none !important; border-bottom: 2px solid var(--accent) !important; }
body.theme-luxury-watch :is(#preorder-section,#wholesale-section) h2 { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(2.8rem,5vw,5rem); font-weight: 400 !important; }

body.theme-sports-gear :is(#preorder-section,#wholesale-section) .grid { gap: 1rem; }
body.theme-sports-gear .product-card { border-radius: .15rem !important; border-bottom: 5px solid var(--accent) !important; }
body.theme-sports-gear :is(#preorder-section,#wholesale-section) h2 { text-transform: uppercase; font-style: italic; letter-spacing: -.055em; }

body.theme-home-living :is(#preorder-section,#wholesale-section) .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
body.theme-home-living .product-card { border-radius: 1.5rem 1.5rem .5rem .5rem !important; box-shadow: none !important; }
body.theme-home-living :is(#preorder-section,#wholesale-section) h2 { font-family: Georgia,serif; font-weight: 400 !important; }

body.theme-auto-parts :is(#preorder-section,#wholesale-section) .grid { gap: .75rem; }
body.theme-auto-parts .product-card { border-radius: .1rem !important; border-left: 4px solid var(--accent) !important; }
body.theme-auto-parts :is(#preorder-section,#wholesale-section) h2 { text-transform: uppercase; letter-spacing: .03em; }

body.theme-modern-minimal :is(#featured-section,#flash-deals-section) { background: var(--sf-page) !important; }
body.theme-grocery-fresh :is(#featured-section,#flash-deals-section) { background: color-mix(in srgb,var(--primary) 7%,var(--sf-page)) !important; }
body.theme-industrial :is(#featured-section,#flash-deals-section) { border-block: 3px solid var(--sf-text) !important; }
body.theme-tech-store :is(#featured-section,#flash-deals-section) { background: color-mix(in srgb,var(--primary) 8%,var(--sf-page)) !important; }
body.theme-fashion-boutique :is(#featured-section,#flash-deals-section) h2 { font-family: 'Playfair Display',Georgia,serif; font-weight: 400 !important; }
body.theme-kids-world :is(#featured-section,#flash-deals-section) { background: color-mix(in srgb,var(--accent) 12%,var(--sf-page)) !important; }
body.theme-luxury-watch :is(#featured-section,#flash-deals-section) h2 { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(2.8rem,5vw,5rem); font-weight: 400 !important; }
body.theme-sports-gear :is(#featured-section,#flash-deals-section) h2 { text-transform: uppercase; font-style: italic; }
body.theme-home-living :is(#featured-section,#flash-deals-section) h2 { font-family: Georgia,serif; font-weight: 400 !important; }
body.theme-auto-parts :is(#featured-section,#flash-deals-section) { background: color-mix(in srgb,var(--sf-text) 6%,var(--sf-page)) !important; }
@media (min-width:900px) {
  body.theme-industrial :is(#featured-section,#flash-deals-section) .grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem; }
  body.theme-fashion-boutique :is(#featured-section,#flash-deals-section) .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.theme-fashion-boutique :is(#featured-section,#flash-deals-section) .product-card:first-child { grid-column: span 2; }
  body.theme-kids-world :is(#featured-section,#flash-deals-section) .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.theme-luxury-watch :is(#featured-section,#flash-deals-section) .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
  body.theme-home-living :is(#featured-section,#flash-deals-section) .grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; }
  body.theme-auto-parts :is(#featured-section,#flash-deals-section) .grid { gap: .8rem; }
}

@media (max-width:767px) {
  body[class*="theme-"] :is(#preorder-section,#wholesale-section) .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
  body.theme-fashion-boutique :is(#preorder-section,#wholesale-section) .product-card:first-child { grid-column: auto; }
  body.theme-kids-world .product-card { transform: none; }
}
@media (max-width:480px) { body[class*="theme-"] :is(#preorder-section,#wholesale-section) .grid { grid-template-columns: 1fr; } }