/* Codesla Store / September 2026. Shared storefront layer; admin stays independent. */
:root, html[data-store-theme="light"] {
  color-scheme: light;
  --cs-bg: #f8f9f5; --cs-bg-rgb: 248,249,245; --cs-surface:#fff;
  --cs-surface-2:#f0f2ec; --cs-surface-3:#e7ebe0; --cs-text:#19251e;
  --cs-text-soft:#3f4d43; --cs-muted:#667267; --cs-faint:#6b766b;
  --cs-line:#dfe4da; --cs-line-strong:#bfc9b8; --cs-accent:#37663b;
  --cs-accent-ink:#fff; --cs-accent-soft:#eaf2e3; --cs-accent-line:#c8dcbb;
  --cs-radius:16px; --cs-shadow:0 20px 60px #2234200e;
  --studio-lime:#d5f478; --studio-ink:#1e2b23; --studio-card:#f1f4e9;
}
html[data-store-theme="dark"] {
  color-scheme:dark;
  --cs-bg:#111b16; --cs-bg-rgb:17,27,22; --cs-surface:#19271e;
  --cs-surface-2:#203026; --cs-surface-3:#293d2f; --cs-text:#edf2e8;
  --cs-text-soft:#c4cec3; --cs-muted:#a3b29f; --cs-faint:#9cad97;
  --cs-line:#334436; --cs-line-strong:#526b49; --cs-accent:#d5f478;
  --cs-accent-ink:#1e2b23; --cs-accent-soft:#2a3a21; --cs-accent-line:#526b35;
  --cs-shadow:0 20px 60px #0002; --studio-card:#203026;
}
html { scroll-padding-top:100px; }
body.storefront-app { font-size:15px; line-height:1.65; }
.storefront-app [hidden] { display:none !important; }
.storefront-container { width:min(100% - 80px,1320px); max-width:1320px; margin-inline:auto; }
.storefront-app .storefront-navbar, .storefront-app .storefront-navbar.is-scrolled { position:sticky; top:0; background:rgba(var(--cs-bg-rgb),.96); border-bottom:1px solid var(--cs-line); backdrop-filter:blur(16px); }
.cs-header-row { min-height:88px; gap:38px; }
.storefront-app .storefront-brand { gap:10px; font-size:25px; letter-spacing:-1px; }
.storefront-app .storefront-brand strong { color:inherit; }
.storefront-brand > span:last-child { display:flex; align-items:center; }
.storefront-brand small { border-left:1px solid var(--cs-line-strong); padding-left:12px; margin-left:13px; color:var(--cs-muted); font-size:9px; letter-spacing:2px; font-weight:700; }
.storefront-app .storefront-brand-mark { height:37px; width:37px; border-radius:11px; font-size:22px; background:var(--studio-ink); color:var(--studio-lime); transform:rotate(-5deg); }
.storefront-app .storefront-nav { margin-left:auto; gap:10px; }
.storefront-app .storefront-nav > a { padding:10px 9px; font-size:13px; font-weight:600; }
.cs-header-actions { margin-left:0; gap:10px; }
.cs-icon-button, .cs-account-button { min-width:42px; height:44px; border-radius:12px; color:var(--cs-text); font-size:18px; position:relative; }
.cs-account-button { background:var(--cs-text); color:var(--cs-bg); border-color:var(--cs-text); font-size:13px; padding-inline:17px; }
.cs-icon-button small, .mobile-store-nav small { position:absolute; right:-4px; top:-4px; min-width:18px; height:18px; padding:0 4px; background:var(--studio-lime); border:1px solid var(--cs-surface); border-radius:20px; color:var(--studio-ink); font-size:10px; font-weight:800; line-height:16px; }
.storefront-app .primary-button, .storefront-app .card-button { min-height:48px; border-radius:12px; font-size:14px; gap:10px; }
.storefront-app .outline-button, .storefront-app .secondary-button { min-height:46px; border-radius:12px; color:var(--cs-text-soft); font-size:13px; }
.storefront-app :where(input, select, textarea) { font-size:16px; }
.storefront-app :where(a,button,input,select,textarea):focus-visible { outline:3px solid var(--cs-accent); outline-offset:4px; }
.storefront-main { padding-top:0 !important; }
.studio-hero { position:relative; padding:64px 0 0; overflow:hidden; }
.studio-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:74px; align-items:center; }
.studio-eyebrow { display:flex; align-items:center; gap:9px; color:var(--cs-muted); font-size:10px; font-weight:800; letter-spacing:1.9px !important; margin:0 0 24px; }
.studio-eyebrow > span:empty { display:inline-block; width:7px; height:7px; border-radius:100%; background:var(--cs-accent); }
.studio-hero h1 { margin:0 0 25px; font-size:clamp(44px,4.45vw,66px); line-height:1.12; font-weight:700; letter-spacing:-3px !important; }
.studio-hero h1 em { display:inline-block; position:relative; font-style:normal; color:var(--cs-accent); z-index:0; }
.studio-hero h1 em::after { content:''; position:absolute; inset:auto -5px 3px; height:13px; background:var(--studio-lime); opacity:.55; z-index:-1; transform:rotate(-2deg); }
.studio-lead { max-width:510px; color:var(--cs-muted); font-size:16px; line-height:1.8; margin-bottom:25px; }
.studio-search { display:flex; align-items:center; gap:13px; width:100%; max-width:525px; border:1px solid var(--cs-line-strong); background:var(--cs-surface); padding:8px 8px 8px 19px; border-radius:15px; box-shadow:0 5px 14px #22342004; }
.studio-search:focus-within { border-color:var(--cs-accent); box-shadow:0 0 0 3px var(--cs-accent-soft); }
.studio-search > i { font-size:22px; color:var(--cs-muted); }
.studio-search input { min-width:0; width:100%; border:0; background:none; padding:8px 0; color:var(--cs-text); font-size:14px; outline:none !important; }
.studio-search input::placeholder { color:var(--cs-muted); }
.studio-search button { width:44px; height:44px; flex-shrink:0; border:0; border-radius:10px; background:var(--studio-ink); color:var(--studio-lime); font-size:23px; }
.studio-popular { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; font-size:11px; color:var(--cs-muted); }
.studio-popular button { border:0; border-radius:6px; background:var(--cs-surface-2); color:var(--cs-text-soft); padding:5px 10px; min-height:32px; }
.studio-popular button:hover { background:var(--cs-accent-soft); color:var(--cs-accent); }
.studio-browse { display:inline-flex; align-items:center; gap:14px; color:var(--cs-text); font-size:13px; font-weight:700; margin-top:25px; }
.studio-browse:hover { color:var(--cs-accent); }
.studio-browse i { font-size:20px; }
.studio-visual { position:relative; min-height:450px; display:flex; align-items:center; justify-content:center; }
.studio-orbit { position:absolute; width:440px; height:440px; border-radius:50%; background:var(--studio-lime); opacity:.46; }
.studio-orbit::after { content:''; position:absolute; inset:-21px; border:1px dashed var(--cs-line-strong); border-radius:50%; }
.studio-dashboard { width:370px; position:relative; background:var(--cs-surface); border:1px solid var(--cs-line); border-radius:20px; transform:rotate(-4deg); box-shadow:0 28px 60px #1c301c18; }
.dashboard-toolbar { display:flex; align-items:center; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--cs-line); font-size:13px; }
.dashboard-toolbar > span { display:flex; gap:9px; align-items:center; }.dashboard-toolbar i { color:var(--cs-accent); font-size:19px; }.dashboard-dots { letter-spacing:4px; }
.dashboard-content { padding:28px 26px 0; }.dashboard-label { color:var(--cs-muted); letter-spacing:1.5px; font-size:9px; font-weight:700; }.dashboard-content h2 { font-size:28px; font-weight:700; margin:10px 0; letter-spacing:-1px; }.dashboard-content p { font-size:12px; color:var(--cs-muted); }
.dashboard-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:27px 0; }.dashboard-tiles > span { display:grid; place-items:center; gap:9px; padding:15px 3px; border:1px solid var(--cs-line); border-radius:13px; background:var(--cs-surface-2); }.dashboard-tiles i { font-size:25px; color:var(--cs-accent); }.dashboard-tiles b { font-size:9px; font-weight:600; }
.dashboard-bottom { border-top:1px solid var(--cs-line); display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:11px; }.dashboard-bottom i { margin-right:5px; }.dashboard-plus { width:24px; height:24px; border-radius:50%; background:var(--studio-lime); color:var(--studio-ink); text-align:center; font-size:17px; line-height:24px; }
.studio-module { position:absolute; z-index:2; display:flex; gap:12px; align-items:center; padding:15px 17px; border:1px solid var(--cs-line); background:var(--cs-surface); border-radius:15px; box-shadow:0 10px 40px #20321b0d; color:var(--cs-text); }
.studio-module .module-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--cs-accent-soft); color:var(--cs-accent); font-size:24px; }.studio-module small { display:block; color:var(--cs-muted); font-size:8px; letter-spacing:1px; margin-bottom:3px; }.studio-module strong { display:block; font-size:13px; font-weight:700; }.studio-module > i { margin-left:17px; color:var(--cs-accent); font-size:20px; }.studio-module-top { top:7px; right:0; transform:rotate(4deg); }.studio-module-bottom { bottom:16px; left:-14px; transform:rotate(3deg); }.studio-module-bottom .module-icon { background:var(--studio-lime); color:var(--studio-ink); }.studio-module-bottom:hover { transform:rotate(0); color:var(--cs-text); }.studio-visual-caption { position:absolute; bottom:-25px; right:8px; font-size:10px; color:var(--cs-muted); }
.studio-trust-strip { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:27px 0; border-top:1px solid var(--cs-line); border-bottom:1px solid var(--cs-line); margin-top:62px; }.studio-trust-strip > span { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:500; color:var(--cs-muted); }.studio-trust-strip i { font-size:19px; color:var(--cs-accent); }
.discovery-section { padding-block:52px 0; }.discovery-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:15px; }.discovery-heading .studio-eyebrow { margin:0; font-size:9px; }.discovery-heading h2 { font-size:20px; margin:0; font-weight:600; letter-spacing:-.6px !important; }
.discovery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }.discovery-grid button { display:flex; align-items:center; gap:13px; border:1px solid var(--cs-line); background:var(--cs-surface); border-radius:14px; padding:21px 16px; text-align:left; color:var(--cs-text); }.discovery-grid button:hover { border-color:var(--cs-accent); transform:translateY(-3px); box-shadow:var(--cs-shadow); }.discovery-grid button > i:first-child { font-size:26px; color:var(--cs-accent); }.discovery-grid button > i:last-child { margin-left:auto; color:var(--cs-muted); font-size:17px; }.discovery-grid strong { display:block; font-size:12px; font-weight:700; }.discovery-grid small { display:block; font-size:10px; color:var(--cs-muted); margin-top:3px; }
.opencart-catalog-section { padding:68px 0 80px; border:none; background:var(--cs-bg); }.opencart-section-heading { margin-bottom:28px; gap:24px; }.opencart-section-heading h2 { font-size:30px; font-weight:650; line-height:1.3; letter-spacing:-1px !important; }.opencart-section-heading > p { font-family:inherit; font-size:12px; color:var(--cs-muted); white-space:nowrap; }.opencart-eyebrow { font-family:inherit; background:none; border:0; padding:0; border-radius:0; font-size:10px; letter-spacing:1.5px; color:var(--cs-accent); margin-bottom:10px; }.opencart-eyebrow::before { display:none; }
.opencart-catalog-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }.opencart-filter-panel { position:sticky; top:110px; display:block; border:0; background:transparent; padding:0 22px 0 0; border-right:1px solid var(--cs-line); border-radius:0; margin:0; max-height:calc(100vh - 125px); overflow:auto; scrollbar-width:thin; }.filter-panel-heading { padding:0 0 15px; }.filter-panel-heading h3 { font-family:inherit; font-size:12px; text-transform:none; color:var(--cs-text); line-height:1.6; }.filter-group { margin-top:18px; padding:0; }.filter-group-title { display:block; font-family:inherit; color:var(--cs-muted); font-size:10px; font-weight:700; margin-bottom:9px; }.opencart-filter-list { display:flex; flex-direction:column; gap:3px; }.opencart-filter-list button { width:100%; min-height:38px; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:5px; border:1px solid transparent; border-radius:8px; background:none; padding:7px 10px; color:var(--cs-text-soft); font-size:11px; }.opencart-filter-list button small { font-family:inherit; color:var(--cs-muted); font-size:10px; background:none; }.opencart-filter-list button.is-active { background:var(--cs-accent-soft); border-color:var(--cs-accent-line); color:var(--cs-accent); font-weight:700; }.opencart-filter-list button.is-active small { color:var(--cs-accent); background:none; }.opencart-filter-list button:hover { background:var(--cs-surface-2); }.filter-panel-actions .icon-button { min-width:32px; width:32px; height:32px; border-radius:8px; background:var(--cs-surface); color:var(--cs-muted); border:1px solid var(--cs-line); }.mobile-filter-apply { display:none; }
.opencart-catalog-content { min-width:0; }.opencart-catalog-tools { display:flex; gap:12px; align-items:center; padding:0; border:0; background:transparent; border-radius:0; }.opencart-inline-search { position:relative; display:flex; flex:1; min-width:0; margin:0; }.opencart-inline-search > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }.opencart-inline-search input { min-height:46px; padding:0 15px; border:1px solid var(--cs-line); border-radius:11px; background:var(--cs-surface); color:var(--cs-text); font-size:12px; }.sort-field { display:flex; align-items:center; gap:8px; margin:0; }.sort-field > span { display:none; }.sort-field select { width:190px; min-height:46px; padding:0 30px 0 12px; border:1px solid var(--cs-line); border-radius:11px; background-color:var(--cs-surface); color:var(--cs-text); font-size:11px; }.view-toggle { display:flex; gap:4px; border:1px solid var(--cs-line); border-radius:11px; padding:4px; background:var(--cs-surface); }.view-toggle button { width:35px; height:36px; border:0; border-radius:7px; background:transparent; color:var(--cs-muted); }.view-toggle button.is-active { background:var(--cs-text); color:var(--cs-bg); }
.catalog-status-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:17px 0; }.catalog-status-row p { font-family:inherit; color:var(--cs-muted); font-size:10px; margin:0; }.catalog-status-row #paginationSummary { margin-left:auto; }.catalog-status-row #activeFilterSummary { max-width:100%; overflow-wrap:anywhere; }.saved-filter,.clear-filters { border:1px solid var(--cs-line); border-radius:8px; background:var(--cs-surface); color:var(--cs-text-soft); min-height:34px; padding:5px 10px; font-size:11px; }.saved-filter[aria-pressed="true"] { background:var(--cs-accent-soft); border-color:var(--cs-accent-line); color:var(--cs-accent); }.clear-filters { border:0; text-decoration:underline; background:transparent; }
.opencart-products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.opencart-product-card { position:relative; overflow:hidden; border:1px solid var(--cs-line); border-radius:15px; background:var(--cs-surface); box-shadow:none; transition:transform .2s,border-color .2s,box-shadow .2s; }.opencart-product-card:hover { transform:translateY(-4px); border-color:var(--cs-line-strong); box-shadow:0 12px 25px #19301e0a; }.opencart-product-card .product-cover { display:block; width:100%; aspect-ratio:1.776; height:auto; min-height:0; border:0; border-bottom:1px solid var(--cs-line); border-radius:0; background:#fceee5; }.opencart-product-card .product-cover::after { display:none; }.opencart-product-card .product-cover-art { position:relative; display:block; inset:auto; width:100%; height:100%; }.opencart-product-card .product-cover-image { position:static; width:100%; height:100%; object-fit:contain; border-radius:0; }.opencart-product-card .product-card-compact-body { display:flex; flex-direction:column; gap:10px; min-height:214px; padding:17px; }.product-card-meta { font-size:9px; font-weight:600; color:var(--cs-accent); letter-spacing:.3px; padding-right:30px; }.opencart-product-card .product-card-title { display:block; font-size:14px; line-height:1.55; font-weight:700; min-height:43px; color:var(--cs-text); }.opencart-product-card .product-card-summary { display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; line-height:1.65; color:var(--cs-muted); margin:0; min-height:36px; }.product-card-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--cs-line); margin-top:auto; padding-top:12px; gap:8px; }.catalog-price { font-family:inherit; font-size:20px; font-weight:700; letter-spacing:-.5px; }.catalog-price small { font-size:9px; font-weight:500; margin-left:4px; color:var(--cs-muted); letter-spacing:0; }.card-detail-link { font-size:10px; display:flex; align-items:center; gap:5px; font-weight:700; color:var(--cs-text); min-height:32px; }.card-detail-link i { font-size:17px; }.card-detail-link:hover { color:var(--cs-accent); }.favorite-button { position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; display:grid; place-items:center; border:1px solid #d8ddcf; background:#ffffffed; border-radius:50%; color:#3f5142; font-size:16px; box-shadow:0 2px 5px #00000008; }.favorite-button[aria-pressed="true"] { background:var(--studio-lime); color:var(--studio-ink); border-color:#a9cd53; }.favorite-button:hover { transform:scale(1.08); }
.opencart-products-grid.is-list-view .opencart-product-card { grid-template-columns:245px minmax(0,1fr); }.opencart-products-grid.is-list-view .product-cover { height:100%; aspect-ratio:auto; min-height:160px; display:flex; align-items:center; border-bottom:0; border-right:1px solid var(--cs-line); }.opencart-products-grid.is-list-view .product-cover-art { height:auto; aspect-ratio:1.776; }.opencart-products-grid.is-list-view .product-card-compact-body { min-height:192px; }.opencart-products-grid.is-list-view .product-card-title { min-height:0; }.catalog-pagination { margin-top:30px; gap:8px; }.catalog-pagination button { width:42px; height:42px; border-radius:10px; background:var(--cs-surface); color:var(--cs-text); border:1px solid var(--cs-line); }.catalog-pagination button.is-active { background:var(--cs-text); color:var(--cs-bg); border-color:var(--cs-text); }.empty-state { padding:60px 24px; border:1px dashed var(--cs-line-strong); border-radius:18px; color:var(--cs-muted); text-align:center; }.empty-state > i { font-size:40px; }.empty-state h3 { font-size:22px; margin-top:15px; }.empty-state p { max-width:430px; margin:12px auto 22px; }.catalog-skeleton { min-height:340px; border-radius:15px; border:1px solid var(--cs-line); background:linear-gradient(110deg,var(--cs-surface-2) 30%,var(--cs-surface) 50%,var(--cs-surface-2) 70%); background-size:200% 100%; animation:studio-loading 1.5s ease infinite; }@keyframes studio-loading { to {background-position:-200% 0;} }
.studio-process { background:var(--cs-surface-2); border-block:1px solid var(--cs-line); padding:70px 0; }.studio-section-title { text-align:center; }.studio-section-title .studio-eyebrow { justify-content:center; margin-bottom:16px; }.studio-section-title h2 { font-size:34px; font-weight:650; letter-spacing:-1.2px !important; }.studio-section-title > p:last-child { color:var(--cs-muted); font-size:14px; margin-top:15px; }.studio-process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:48px; }.studio-process-grid article { position:relative; border-top:1px solid var(--cs-line-strong); padding:24px 0 0; }.studio-process-grid article > span { display:block; color:var(--cs-muted); font-size:11px; font-weight:600; margin-bottom:22px; }.studio-process-grid article > i { position:absolute; top:17px; right:0; font-size:26px; color:var(--cs-accent); }.studio-process-grid h3 { font-size:17px; font-weight:650; margin-bottom:12px; }.studio-process-grid p { font-size:13px; line-height:1.8; color:var(--cs-muted); margin:0; }
.studio-faq { display:grid; grid-template-columns:1fr 1.4fr; gap:90px; padding-block:85px; }.studio-faq h2 { font-size:34px; letter-spacing:-1px !important; font-weight:650; }.studio-faq > div > p:not(.studio-eyebrow) { color:var(--cs-muted); font-size:14px; }.faq-list details { border-bottom:1px solid var(--cs-line); }.faq-list details:first-child { border-top:1px solid var(--cs-line); }.faq-list summary { position:relative; cursor:pointer; padding:22px 30px 22px 0; font-size:14px; color:var(--cs-text); font-weight:600; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary::after { content:'+'; position:absolute; right:0; top:18px; font-size:24px; color:var(--cs-muted); font-weight:400; }.faq-list details[open] summary::after { content:'−'; }.faq-list details p { color:var(--cs-muted); font-size:13px; padding:0 25px 20px 0; margin:0; line-height:1.8; }
.studio-support { display:flex; align-items:center; justify-content:space-between; gap:50px; padding:42px 48px; border-radius:22px; background:var(--studio-ink); color:#d1dbce; margin-bottom:70px; }.studio-support .studio-eyebrow { color:var(--studio-lime); font-size:9px; margin-bottom:14px; }.studio-support h2 { font-size:29px; color:#f4f8ee; letter-spacing:-1px !important; font-weight:600; }.studio-support p { font-size:13px; margin:12px 0 0; color:#bac8b7; }.studio-support .primary-button { background:var(--studio-lime); border-color:var(--studio-lime); color:var(--studio-ink); flex-shrink:0; white-space:nowrap; }
.storefront-app .storefront-footer { background:var(--cs-bg); border-top:1px solid var(--cs-line); padding:42px 0 0; }.footer-brand p { color:var(--cs-muted); font-size:12px; line-height:1.9; max-width:460px; }.footer-nav a { font-size:12px; }.footer-bottom { padding-block:22px; color:var(--cs-muted); font-size:10px; }.contact-dock { bottom:24px; right:18px; }.contact-dock-button { width:44px !important; height:44px !important; border-radius:14px !important; }.contact-dock-button i { font-size:23px; }
.mobile-store-nav { display:none; }.studio-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; max-width:calc(100% - 32px); padding:12px 22px; border-radius:12px; background:var(--cs-text); color:var(--cs-bg); font-size:13px; box-shadow:var(--cs-shadow); text-align:center; }
/* Detail, basket and account share the same surfaces and readable typography. */
.storefront-app:not(.store-home) .detail-hero, .storefront-app .cart-hero, .storefront-app .account-hero { padding-top:50px; padding-bottom:42px; background:var(--cs-surface-2); }
.storefront-app:not(.store-home) .detail-hero h1,.storefront-app .cart-hero h1,.storefront-app .account-hero h1 { font-size:clamp(30px,3.3vw,46px); letter-spacing:-1.5px !important; line-height:1.2; }
.storefront-app .detail-hero .hero-lead { font-size:15px; line-height:1.85; }
.storefront-app :where(.content-band,.purchase-panel,.cart-item-panel,.cart-summary-panel,.auth-card,.account-panel,.checkout-band) { border-radius:17px; }
.product-detail-redesign .detail-layout { gap:30px; padding-top:35px; }.product-detail-redesign .purchase-panel { top:112px; }.product-detail-redesign .content-band h2 { font-size:22px; line-height:1.4; }.product-detail-redesign .content-band { padding:28px; }.product-detail-redesign .hero-gallery-card { border-radius:17px; overflow:hidden; }.product-detail-redesign .product-price-value { font-family:inherit; font-size:34px; }.product-detail-redesign .hero-actions { gap:10px; }.product-detail-redesign .hero-actions .outline-button { padding-inline:14px; }.product-breadcrumb { display:flex; gap:8px; align-items:center; margin:0 0 18px; font-size:12px; color:var(--cs-muted); }.product-breadcrumb a { color:var(--cs-muted); }.detail-favorite { display:inline-flex; align-items:center; gap:7px; }.detail-favorite[aria-pressed="true"] { background:var(--cs-accent-soft); border-color:var(--cs-accent-line); color:var(--cs-accent); }
@media (max-width:1150px) {
  .storefront-container { width:calc(100% - 48px); }.cs-header-row { gap:20px; }.storefront-app .storefront-nav { gap:0; }.cs-header-actions { gap:7px; }.storefront-brand small { display:none; }.studio-hero-grid { gap:38px; }.studio-hero h1 { font-size:50px; }.studio-visual { min-height:420px; }.studio-orbit { width:350px; height:350px; }.studio-dashboard { width:330px; }.studio-module-bottom { left:0; }.studio-module-top { right:0; }.studio-visual-caption { font-size:9px; }.discovery-grid { grid-template-columns:repeat(2,1fr); }.opencart-catalog-layout { grid-template-columns:190px minmax(0,1fr); gap:22px; }.opencart-products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.opencart-filter-panel { padding-right:15px; }.studio-faq { gap:45px; }.studio-support { padding:35px; }.studio-support h2 { font-size:25px; }.desktop-favorites { display:none; }
}
@media (min-width:768px) {
  .storefront-app .storefront-nav { display:flex; }.mobile-nav-toggle,.mobile-nav-close { display:none !important; }
}
@media (max-width:767.98px) {
  html { scroll-padding-top:88px; }.storefront-container { width:calc(100% - 36px); }.cs-header-row { min-height:72px; gap:10px; }.storefront-app .storefront-brand { font-size:22px; }.storefront-app .storefront-brand-mark { width:33px; height:33px; font-size:20px; }.cs-header-actions { margin-left:auto; gap:7px; }.cs-icon-button,.cs-account-button { width:39px; min-width:39px; height:40px; font-size:18px; }.cs-account-button { display:none; }.mobile-nav-toggle { margin:0 !important; order:3; width:39px; min-width:39px !important; height:40px !important; border-radius:11px !important; padding:0 !important; }.mobile-nav-toggle span { display:none !important; }.storefront-app .storefront-nav { display:flex; margin:0; position:fixed; top:0; right:0; left:auto; bottom:auto; width:min(330px,88vw); height:100dvh; z-index:80; padding:22px; background:var(--cs-surface); border-left:1px solid var(--cs-line); border-radius:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:10px; overflow:auto; transform:translateX(110%); visibility:hidden; box-shadow:none; }.storefront-app .storefront-nav > a { font-size:16px; padding:14px; }.storefront-app .storefront-nav .language-switcher { margin-top:10px; }.mobile-nav-close { background:var(--cs-surface-2); color:var(--cs-text); border:1px solid var(--cs-line); border-radius:10px; min-height:44px; }.storefront-app.mobile-nav-open .storefront-nav { transform:translateX(0); visibility:visible; }.mobile-nav-backdrop { z-index:45; }.storefront-app.mobile-nav-open .storefront-navbar { z-index:70; }.storefront-app.mobile-nav-open .mobile-store-nav { visibility:hidden; }
  .studio-hero { padding-top:36px; }.studio-hero-grid { grid-template-columns:1fr; gap:32px; }.studio-eyebrow { font-size:9px; margin-bottom:20px; letter-spacing:1.5px !important; }.studio-hero h1 { font-size:clamp(40px,10.8vw,60px); line-height:1.13; letter-spacing:-2px !important; margin-bottom:20px; }.studio-lead { font-size:14px; line-height:1.85; max-width:550px; margin-bottom:22px; }.studio-search { max-width:none; padding:7px 7px 7px 13px; gap:8px; }.studio-search input { font-size:16px; }.studio-search input::placeholder { font-size:12px; }.studio-search button { width:42px; height:42px; }.studio-browse { margin-top:20px; }.studio-popular { font-size:10px; gap:6px; }.studio-visual { min-height:385px; max-width:440px; width:100%; margin-inline:auto; }.studio-dashboard { width:290px; transform:rotate(-3deg); }.studio-orbit { width:310px; height:310px; }.dashboard-content { padding:23px 20px 0; }.dashboard-content h2 { font-size:25px; }.dashboard-content p { font-size:10px; }.dashboard-tiles { margin:22px 0; gap:6px; }.dashboard-tiles > span { padding:12px 2px; }.dashboard-tiles i { font-size:21px; }.dashboard-tiles b { font-size:8px; }.studio-module { padding:11px 12px; gap:9px; border-radius:12px; }.studio-module .module-icon { width:36px; height:36px; font-size:21px; }.studio-module strong { font-size:11px; }.studio-module small { font-size:7px; }.studio-module > i { margin-left:8px; }.studio-module-top { top:0; right:3px; }.studio-module-bottom { bottom:2px; left:1px; }.studio-visual-caption { bottom:-25px; right:0; font-size:9px; }.studio-trust-strip { display:grid; grid-template-columns:1fr 1fr; gap:17px 8px; margin-top:47px; padding:21px 0; }.studio-trust-strip > span { font-size:10px; gap:7px; }.studio-trust-strip i { font-size:17px; }
  .discovery-section { padding-top:34px; }.discovery-heading { display:block; margin-bottom:17px; }.discovery-heading h2 { font-size:20px; margin-top:10px; }.discovery-grid { gap:10px; }.discovery-grid button { display:block; position:relative; padding:16px 13px; border-radius:12px; }.discovery-grid button > i:first-child { display:block; margin-bottom:13px; font-size:24px; }.discovery-grid button > i:last-child { position:absolute; top:16px; right:13px; font-size:16px; }.discovery-grid strong { font-size:11px; }.discovery-grid small { font-size:9px; }
  .opencart-catalog-section { padding:42px 0 48px; }.opencart-section-heading { display:block; margin-bottom:20px; }.opencart-section-heading h2 { font-size:26px; line-height:1.35; }.opencart-section-heading > p { font-size:11px; margin-top:10px; }.opencart-catalog-layout { display:block; }.mobile-opencart-filter-toggle { display:flex; margin-bottom:12px; min-height:46px; border-radius:11px; padding:10px 15px; font-size:13px; }.mobile-opencart-filter-toggle small { font-size:10px; }.opencart-filter-panel { position:fixed; top:0; left:0; right:auto; bottom:0; height:100dvh; width:min(340px,90vw); max-height:none; z-index:90; padding:24px 22px 35px; margin:0; background:var(--cs-surface); transform:translateX(-110%); visibility:hidden; border-right:1px solid var(--cs-line); overflow:auto; }.catalog-filters-open .opencart-filter-panel { transform:translateX(0); visibility:visible; }.catalog-filter-backdrop { position:fixed; inset:0; z-index:85; display:block; background:#15201980; backdrop-filter:blur(3px); }.filter-panel-heading h3 { font-size:15px; }.opencart-filter-list button { min-height:42px; font-size:13px; }.filter-group-title { font-size:12px; }.mobile-filter-apply { display:flex; width:100%; margin-top:22px; justify-content:center; }.filter-panel-actions .icon-button { min-width:40px; width:40px; height:40px; }.opencart-catalog-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }.opencart-inline-search { grid-column:1/-1; }.opencart-inline-search input { font-size:16px; min-height:48px; }.opencart-inline-search input::placeholder { font-size:12px; }.sort-field select { width:100%; font-size:12px; min-height:44px; }.sort-field { min-width:0; }.view-toggle button { height:34px; width:35px; }.catalog-status-row { gap:8px; margin:14px 0; }.catalog-status-row #activeFilterSummary { flex-basis:100%; }.catalog-status-row p { font-size:10px; }
  .opencart-products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.opencart-product-card { border-radius:12px; }.opencart-product-card .product-card-compact-body { padding:12px; min-height:218px; gap:8px; }.opencart-product-card .product-card-title { font-size:12px; line-height:1.6; min-height:57px; }.product-card-meta { font-size:8px; padding:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.opencart-product-card .product-card-summary { font-size:10px; min-height:33px; }.catalog-price { font-size:18px; }.catalog-price small { font-size:8px; margin-left:2px; }.product-card-footer { flex-wrap:wrap; gap:1px; padding-top:9px; }.card-detail-link { font-size:9px; min-height:30px; }.favorite-button { width:32px; height:32px; top:6px; right:6px; font-size:15px; }.opencart-products-grid.is-list-view { grid-template-columns:1fr; }.opencart-products-grid.is-list-view .opencart-product-card { grid-template-columns:115px minmax(0,1fr); }.opencart-products-grid.is-list-view .product-cover { min-height:160px; }.opencart-products-grid.is-list-view .product-card-compact-body { min-height:185px; padding:12px; }.opencart-products-grid.is-list-view .product-card-title { min-height:0; }.opencart-products-grid.is-list-view .favorite-button { left:6px; right:auto; }.opencart-products-grid.is-list-view .product-card-footer { flex-wrap:nowrap; }.catalog-pagination { gap:6px; }.catalog-pagination button { width:38px; height:40px; }.empty-state { padding:40px 20px; }
  .studio-process { padding:44px 0; }.studio-section-title { text-align:left; }.studio-section-title .studio-eyebrow { justify-content:flex-start; font-size:8px; }.studio-section-title h2 { font-size:28px; line-height:1.35; }.studio-section-title > p:last-child { font-size:12px; }.studio-process-grid { grid-template-columns:1fr; gap:26px; margin-top:28px; }.studio-process-grid h3 { font-size:16px; }.studio-process-grid p { font-size:12px; }.studio-process-grid article > span { margin-bottom:16px; }
  .studio-faq { grid-template-columns:1fr; gap:25px; padding-block:45px; }.studio-faq h2 { font-size:28px; }.studio-faq > div > p:not(.studio-eyebrow) { font-size:13px; }.faq-list summary { font-size:13px; padding-block:20px; }.faq-list details p { font-size:12px; }.studio-support { flex-direction:column; gap:23px; align-items:flex-start; padding:28px 24px; border-radius:17px; margin-bottom:45px; }.studio-support h2 { font-size:27px; line-height:1.35; }.studio-support .studio-eyebrow { font-size:8px; }.studio-support p { font-size:12px; }.studio-support .primary-button { width:100%; justify-content:center; }
  body.storefront-app { padding-bottom:calc(73px + env(safe-area-inset-bottom)); }.mobile-store-nav { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; bottom:0; left:0; right:0; z-index:42; background:rgba(var(--cs-bg-rgb),.97); backdrop-filter:blur(14px); border-top:1px solid var(--cs-line); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }.mobile-store-nav a { display:flex; align-items:center; flex-direction:column; gap:2px; font-size:9px; font-weight:600; color:var(--cs-muted); min-height:48px; justify-content:center; border-radius:10px; }.mobile-store-nav a > span { position:relative; }.mobile-store-nav i { font-size:22px; line-height:1; }.mobile-store-nav a.is-active { color:var(--cs-accent); background:var(--cs-accent-soft); }.mobile-store-nav small { right:-10px; top:-5px; }.studio-toast { bottom:calc(85px + env(safe-area-inset-bottom)); font-size:12px; width:max-content; }.contact-dock { right:10px !important; bottom:calc(82px + env(safe-area-inset-bottom)) !important; gap:7px !important; }.contact-dock-button { width:37px !important; height:37px !important; border-radius:12px !important; opacity:.93; }.contact-dock-button i { font-size:21px !important; }.storefront-app .footer-grid { grid-template-columns:1fr; gap:24px; }.storefront-app .footer-nav { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.footer-bottom { padding-block:18px; gap:15px; }
  .storefront-app:not(.store-home) .detail-hero,.storefront-app .cart-hero,.storefront-app .account-hero { padding-top:30px; padding-bottom:30px; }.storefront-app:not(.store-home) .detail-hero h1,.storefront-app .cart-hero h1,.storefront-app .account-hero h1 { font-size:32px; letter-spacing:-1px !important; }.product-detail-redesign .content-band { padding:21px; }.product-detail-redesign .content-band h2 { font-size:20px; }.product-detail-redesign .hero-actions { display:flex; flex-wrap:wrap; }.product-detail-redesign .hero-actions a { width:auto; }.product-detail-redesign .detail-layout { padding-top:24px; }.product-detail-redesign .hero-gallery-thumbs { max-width:100%; }.product-detail-redesign .purchase-panel { position:static; }.cart-hero-grid,.detail-hero-grid { min-width:0; }.checkout-steps { flex-wrap:wrap; gap:10px; }.cart-item-copy,.cart-item-panel,.cart-summary-panel,.account-shell { min-width:0; }.storefront-app :where(input,select,textarea) { max-width:100%; font-size:16px; }
}
@media(max-width:359px) { .cs-header-actions { gap:4px; }.cs-header-row { gap:6px; }.storefront-container { width:calc(100% - 28px); }.studio-hero h1 { font-size:38px; }.studio-visual { min-height:365px; }.studio-dashboard { width:260px; }.studio-orbit { width:265px; height:265px; }.dashboard-content h2 { font-size:23px; }.studio-module strong { font-size:10px; }.opencart-products-grid { grid-template-columns:1fr; }.opencart-product-card .product-card-title { min-height:0; }.opencart-product-card .product-card-compact-body { min-height:190px; }.discovery-grid strong { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} .storefront-app *, .storefront-app *::before, .storefront-app *::after { animation:none !important; transition:none !important; } }
/* Normalize legacy card and toolbar rules. */
.storefront-app .product-card-compact-body { align-items:stretch; text-align:left; }
.storefront-app .product-card-title { text-align:left; }
.storefront-app .catalog-price { display:inline-flex; align-items:baseline; gap:0; background:none; border:0; border-radius:0; padding:0; min-height:0; box-shadow:none; }
.storefront-app .product-card-footer { width:100%; }
.storefront-app .opencart-inline-search input { width:100%; }
.storefront-app .view-toggle button::before { content:none; }
@media (max-width:767.98px) {
  .storefront-app .storefront-nav { display:none !important; transform:none; }
  .storefront-app.mobile-nav-open .storefront-nav { display:flex !important; transform:none; }
  .mobile-store-nav { width:100%; }
}
.storefront-app .catalog-status-row { flex-direction:row; align-items:center; justify-content:flex-start; }
.storefront-app .catalog-status-row #activeFilterSummary { text-align:left; }
@media(max-width:767.98px) { .mobile-filter-apply { position:sticky; bottom:0; box-shadow:0 -8px 18px var(--cs-surface); } }
.storefront-app:not(.store-home) .storefront-brand-mark::before,
.storefront-app:not(.store-home) .storefront-brand > span:last-child::before,
.storefront-app:not(.store-home) .storefront-brand > span:last-child::after { content:none; }
.storefront-app:not(.store-home) .storefront-brand-mark { font-size:22px; }
.storefront-app:not(.store-home) .storefront-brand > span:last-child { font-size:25px; }
.storefront-app:not(.store-home) .storefront-navbar .storefront-container > div { min-height:88px; }
.storefront-app .detail-hero h1,.storefront-app .cart-hero h1,.storefront-app .account-hero h1 { color:var(--cs-text); }
.storefront-app .detail-hero,.storefront-app .cart-hero,.storefront-app .account-hero { background-image:none !important; background-color:var(--cs-surface-2) !important; }
.product-detail-redesign .detail-main { padding:5px; border-radius:17px; }
.product-detail-redesign .content-band { border-radius:14px !important; }
.hero-purchase-info { display:flex; align-items:baseline; gap:9px; margin:0 0 20px; color:var(--cs-muted); font-size:11px; }
.hero-purchase-info strong { color:var(--cs-text); font-size:29px; font-weight:700; }
@media(max-width:767.98px) {
  .storefront-app:not(.store-home) .storefront-brand > span:last-child { font-size:22px; }
  .storefront-app:not(.store-home) .storefront-brand-mark { font-size:20px; }
  .storefront-app:not(.store-home) .storefront-navbar .storefront-container > div { min-height:72px; }
}
.storefront-app .cart-hero p:not(.opencart-eyebrow),.storefront-app .account-hero .hero-lead { font-size:15px; line-height:1.8; }
.storefront-app .account-hero-panel strong { color:var(--cs-text) !important; }
.storefront-app .account-hero-panel span { color:var(--cs-muted) !important; }
.auth-mode-switch { display:flex; gap:5px; margin:0 0 22px; padding:5px; background:var(--cs-surface-2); border:1px solid var(--cs-line); border-radius:12px; }
.auth-mode-switch button { width:50%; min-height:43px; padding:10px 15px; border:0; border-radius:8px; background:transparent; color:var(--cs-muted); font-size:14px; font-weight:650; }
.auth-mode-switch button[aria-selected="true"] { background:var(--cs-text); color:var(--cs-bg); }
.account-page .auth-tabs { display:block; }
.account-page .auth-card { max-width:640px; margin-inline:auto; padding:28px !important; border-radius:17px !important; }
.account-page .auth-intro { margin-bottom:20px; }
.account-page .auth-intro h2 { font-size:23px; line-height:1.4; }
.account-page .auth-intro p { font-size:13px; line-height:1.7; }
.account-page .auth-panel { padding:24px !important; border-radius:12px !important; }
.account-page .auth-panel-heading h2 { font-size:19px; }
.account-page .auth-panel-heading p { font-size:12px; }
.account-page .auth-panel input { min-height:48px; border-radius:9px; }
.product-detail-redesign .purchase-price-summary #productPrice > span:not(.visually-hidden) { color:var(--cs-text); font-size:30px; font-weight:700; }
@media(max-width:767.98px) {
  .account-page .account-hero-panel { display:none; }
  .account-page .account-hero h1 { font-size:29px; }
  .account-page .account-hero { padding-bottom:25px; }
  .account-page .auth-card { padding:20px !important; }
  .account-page .auth-panel { padding:18px !important; }
  .account-page .auth-intro h2 { font-size:20px; }
  .account-page .auth-intro > .eyebrow { display:none; }
  .account-page .account-section { padding-top:28px; }
  .cart-page .cart-item-heading { flex-direction:row; align-items:center; gap:12px; }
  .cart-page .cart-item-heading h2 { font-size:20px; }
  .cart-page .cart-item-heading .outline-button { width:auto; flex-shrink:0; font-size:11px; padding-inline:10px; }
}
.storefront-app .account-hero-grid { padding-block:0; }
@media(min-width:768px) { .storefront-app .account-hero-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); } }
@media(min-width:768px) and (max-width:900px) {
  .cs-account-button span { display:none; }
  .cs-account-button { width:44px; padding:0; }
  .storefront-app .storefront-nav > a { white-space:nowrap; font-size:12px; }
  .cs-header-row { gap:14px; }
}
@media(max-width:767.98px) { .opencart-product-card .product-cover-fallback em { display:none; } .opencart-product-card .product-cover-fallback { padding:10px; gap:4px; } }
@media(max-width:767.98px) {
  .storefront-app .contact-dock .contact-dock-button { min-width:37px; min-height:37px; width:37px !important; height:37px !important; padding:0 !important; }
}

/* Quiet background for the unified vector cover collection. */
.opencart-product-card .product-cover{background:#eef2e8}