/* Smith Digital V5 - Mobile/desktop visual designer. Only uses validated CSS vars/body classes. */
:root { color-scheme:light; }
body { color:var(--theme-text-color,#1b2941); }
body.theme-font-modern {font-family:Inter,"Segoe UI",Arial,sans-serif}
body.theme-font-system {font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body.theme-font-rounded {font-family:"Trebuchet MS",ui-rounded,system-ui,sans-serif}
body.theme-font-serif {font-family:Georgia,"Times New Roman",serif}
body .container {width:min(var(--desktop-content-width,1200px),calc(100% - 48px))}
body .site-header {background:var(--theme-header-color,#fff);border-color:var(--theme-border-color,#e5eaf4)}
body.theme-glass-header .site-header {background:color-mix(in srgb,var(--theme-header-color,#fff) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body .panel,body .guide,body .daily-card,body .cart-checkout {background-color:var(--theme-surface-color,#fff);border-color:var(--theme-border-color,#e5eaf4)}
body #product-grid .product-card {background-color:var(--theme-card-color,#fff);border-color:var(--theme-border-color,#e5eaf4)}
body #product-grid .product-card.card-soft {background:color-mix(in srgb,var(--card-accent) 6%,var(--theme-card-color,#fff))}
body #product-grid .product-card.card-outline {border-color:var(--card-accent)}
body .site-footer {background:var(--theme-footer-color,#f7f9fc);border-color:var(--theme-border-color,#e5eaf4)}
body .site-footer, body .expanded-footer,body .footer-article,body .footer-column a {color:var(--theme-text-color,#1b2941)}
body .muted,body .header-nav,body .product-card p,body .footer-bottom {color:var(--theme-muted-color,#667693)}
body .button:not(.button-light):not(.button-white):not(.danger-button) {color:var(--theme-button-text-color,#fff)}
body .button-light {color:var(--accent)}
body.desktop-header-compact .header-inner {padding-top:13px;padding-bottom:13px}
body.desktop-header-roomy .header-inner {padding-top:32px;padding-bottom:32px}
@media(min-width:781px) {
  body.desktop-type-small {font-size:13px} body.desktop-type-large {font-size:16px}
  body.desktop-type-large #product-grid .product-card {font-size:1.06em}
  body .category-strip {grid-template-columns:repeat(var(--desktop-category-columns,4),minmax(0,1fr))}
}
/* Hover effects only on hover-capable screens. Existing V4 hover shadow is neutralized when disabled. */
body.theme-motion-none {--motion-speed:0ms;--motion-distance:0px}
body.theme-motion-subtle {--motion-speed:190ms;--motion-distance:4px}
body.theme-motion-lively {--motion-speed:330ms;--motion-distance:9px}
body .button,body #product-grid .product-card,body #product-grid .product-mark {transition:transform var(--motion-speed,190ms) ease,box-shadow var(--motion-speed,190ms) ease,filter var(--motion-speed,190ms) ease}
@media(hover:hover) and (pointer:fine) {
 body.theme-card-none #product-grid .product-card:hover {transform:none;box-shadow:none}
 body.theme-card-lift #product-grid .product-card:hover {transform:translateY(calc(-1 * var(--motion-distance,4px)));box-shadow:0 16px 30px #1b294124}
 body.theme-card-glow #product-grid .product-card:hover {transform:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent),0 8px 25px #1b294122}
 body.theme-card-scale #product-grid .product-card:hover {transform:scale(1.02);box-shadow:0 12px 24px #1b29411a}
 body.theme-button-none .button:hover {transform:none;box-shadow:none}
 body.theme-button-lift .button:hover {transform:translateY(-3px)}
 body.theme-button-glow .button:hover {transform:none;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 50%,transparent)}
 body.theme-button-scale .button:hover {transform:scale(1.045)}
 body.theme-image-zoom #product-grid .product-card:hover .product-mark {transform:scale(1.09)}
 body.theme-image-rotate #product-grid .product-card:hover .product-mark {transform:rotate(5deg)}
}
body.theme-pattern-dots {background-image:radial-gradient(color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px);background-size:20px 20px;background-attachment:fixed}
body.theme-pattern-grid {background-image:linear-gradient(color-mix(in srgb,var(--accent) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent) 1px,transparent 1px);background-size:30px 30px;background-attachment:fixed}
body.theme-pattern-gradient {background-image:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,#fff),transparent 63%);background-attachment:fixed}
/* If a custom uploaded background image exists, inline background-image takes precedence over motifs. */
.mobile-menu-toggle,.mobile-search-toggle{display:none}
.mobile-menu-backdrop[hidden]{display:none!important}
@media(max-width:780px) {
  body .container {width:calc(100% - 32px)}
  body .header-inner {position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:14px;padding-bottom:14px}
  body.mobile-header-compact .header-inner {padding-top:7px;padding-bottom:7px}
  body.mobile-header-roomy .header-inner {padding-top:20px;padding-bottom:20px}
  body .header-inner .brand{order:1;flex:1;min-width:0;margin-right:0}
  body .header-inner .brand>span:last-child{min-width:0}
  body .header-inner .brand strong,body .header-inner .brand small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body .header-inner .search-form {order:4;flex-basis:100%;width:100%;margin:0}
  body .mobile-menu-toggle {order:3;display:flex;align-items:center;justify-content:center;gap:8px;min-width:42px;min-height:42px;border:1px solid var(--theme-border-color);border-radius:11px;background:var(--theme-mobile-menu-color,#fff);color:var(--theme-text-color,#1b2941);cursor:pointer;position:relative;z-index:2}
  body.mobile-side-left .mobile-menu-toggle{order:0}
  body .mobile-menu-label {font-size:12px;font-weight:700;padding-right:8px}
  body .hamburger-icon {display:flex;flex-direction:column;gap:4px;width:19px}
  body .hamburger-icon i {display:block;width:19px;height:2px;background:currentColor;border-radius:4px;transition:transform .2s ease,opacity .2s ease}
  body.mobile-menu-open .hamburger-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.mobile-menu-open .hamburger-icon i:nth-child(2){opacity:0}
  body.mobile-menu-open .hamburger-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  body .mobile-search-toggle{order:2;display:none;min-width:42px;min-height:42px;align-items:center;justify-content:center;border:1px solid var(--theme-border-color);border-radius:11px;background:var(--theme-mobile-menu-color);color:var(--theme-text-color);font-size:26px;cursor:pointer}
  body.mobile-search-collapsible .mobile-search-toggle {display:flex}
  body.mobile-search-collapsible .search-form{display:none}
  body.mobile-search-collapsible.mobile-search-open .search-form{display:flex}
  body .header-inner>.header-nav {order:5;display:none;flex-direction:column;align-items:stretch;position:absolute;z-index:110;top:calc(100% + 5px);right:0;left:auto;min-width:min(300px,calc(100vw - 32px));max-width:calc(100vw - 32px);padding:12px;gap:2px;background:var(--theme-mobile-menu-color,#fff);border:1px solid var(--theme-border-color,#e5eaf4);border-radius:15px;box-shadow:0 20px 48px #16243e2b;white-space:normal}
  body.mobile-side-left .header-inner>.header-nav {left:0;right:auto}
  body.mobile-menu-open .header-inner>.header-nav {display:flex}
  body .header-nav>a,body .header-nav>form{width:100%;display:flex;align-items:center;min-height:42px;padding:7px 12px;border-radius:8px}
  body .header-nav>a:hover,body .header-nav>form:hover {background:color-mix(in srgb,var(--accent) 9%,var(--theme-mobile-menu-color,#fff))}
  body .header-nav form .text-button {cursor:pointer;font:inherit;color:var(--theme-text-color);width:100%;min-height:36px;text-align:left}
  body .header-nav .header-cart {justify-content:space-between}
  body .header-nav .button {width:100%}
  body.mobile-menu-drawer .header-inner>.header-nav{display:flex;position:fixed;top:0;bottom:0;left:auto;right:0;z-index:120;width:min(330px,85vw);min-width:0;max-width:none;padding:calc(78px + env(safe-area-inset-top)) 16px 30px;overflow:auto;overscroll-behavior:contain;border-radius:18px 0 0 18px;visibility:hidden;transform:translateX(105%);transition:transform .25s ease,visibility .25s ease;box-shadow:-12px 0 50px #0003}
  body.mobile-menu-drawer.mobile-side-left .header-inner>.header-nav{right:auto;left:0;border-radius:0 18px 18px 0;transform:translateX(-105%)}
  body.mobile-menu-drawer.mobile-menu-open .header-inner>.header-nav{visibility:visible;transform:translateX(0)}
  body.mobile-menu-drawer.mobile-menu-open .mobile-menu-toggle{position:fixed;right:calc(15px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));z-index:130}
  body.mobile-menu-drawer.mobile-side-left.mobile-menu-open .mobile-menu-toggle{left:calc(15px + env(safe-area-inset-left));right:auto}
  body.mobile-menu-drawer.mobile-menu-open{overflow:hidden}
  body .mobile-menu-backdrop{display:none}
  body.mobile-menu-drawer.mobile-menu-open .mobile-menu-backdrop:not([hidden]) {display:block;position:fixed;inset:0;z-index:100;background:#11182788}
  body.mobile-hero-hide .hero-grid {display:none}
  body #product-grid {grid-template-columns:repeat(var(--mobile-product-columns,2),minmax(0,1fr))}
  body #product-grid .card-span-2{grid-column:span 1}
  body.mobile-cards-compact #product-grid .product-card{padding:12px}
  body.mobile-cards-roomy #product-grid .product-card{padding:24px}
  body.mobile-sticky-header .site-header{position:sticky;top:0;z-index:80}
  body:not(.mobile-sticky-header).sticky-header .site-header{position:relative;top:auto}
}
@media(max-width:380px){body .mobile-menu-label{display:none}}
@media(prefers-reduced-motion:reduce){
 body #product-grid .product-card,body #product-grid .product-mark,body .button,body .hamburger-icon i,body .header-inner>.header-nav{transition:none!important;animation:none!important}
 body #product-grid .product-card:hover,body .button:hover,body #product-grid .product-mark:hover {transform:none!important}
}
/* Admin: editable designer controls and miniature preview */
.designer-panel{min-width:0}
.designer-heading{display:flex;gap:14px;align-items:start;justify-content:space-between;flex-wrap:wrap;margin-bottom:22px}
.designer-heading h2{margin:5px 0 9px}
.designer-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,310px);gap:19px;align-items:start}
.designer-fields{display:grid;gap:12px;min-width:0}
.designer-group{border:1px solid var(--theme-border-color,#e5eaf4);border-radius:12px;background:var(--theme-surface-color,#fff);overflow:hidden}
.designer-group>summary{cursor:pointer;padding:16px;font-weight:700;list-style:none;background:#f8faff;display:flex;align-items:center;gap:12px}
.designer-group>summary::-webkit-details-marker{display:none}
.designer-group>summary::after{content:'⌄';margin-left:auto;font-size:20px}
.designer-group[open]>summary::after{content:'⌃'}
.designer-group-body{padding:18px}
.designer-group-body .field input[type=color]{height:42px;min-width:0;cursor:pointer;padding:5px}
.designer-group-body .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.designer-presets{display:flex;flex-wrap:wrap;gap:9px}
.designer-presets .button{font-size:12px;padding:9px 11px}
.designer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 0 8px}
.designer-reset{border-top:1px solid var(--theme-border-color);padding-top:15px;margin-top:10px}
.designer-preview-wrap{position:sticky;top:18px;padding:15px;border:1px solid var(--theme-border-color,#e5eaf4);border-radius:14px;background:#f7f9fd;min-width:0}
.designer-preview-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.designer-preview-switch{display:flex;background:#e8edf8;padding:3px;border-radius:8px;gap:3px}
.designer-preview-switch button{padding:5px 9px;border:0;border-radius:6px;background:none;color:#53647f;cursor:pointer;font-weight:600;font-size:11px}
.designer-preview-switch button.active{background:#fff;color:#1e3f80;box-shadow:0 1px 5px #1232}
.designer-preview{--pv-header:#fff;--pv-card:#fff;--pv-menu:#fff;--pv-text:#1b2941;--pv-border:#e5eaf4;--pv-accent:#2159ed;max-width:100%;margin:13px auto;transition:max-width .25s ease}
.designer-preview[data-device=mobile]{max-width:230px}
.preview-shell{background:#f4f6fb;border:1px solid var(--pv-border);border-radius:13px;overflow:hidden;font-size:10px;color:var(--pv-text)}
.preview-header{padding:13px 10px;display:flex;justify-content:space-between;align-items:center;gap:5px;background:var(--pv-header);border-bottom:1px solid var(--pv-border);min-height:45px}
.preview-brand{font-weight:800;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-menu-icon{display:none;border:1px solid var(--pv-border);border-radius:5px;padding:2px 6px;background:var(--pv-menu)}
.preview-hero{display:grid;gap:5px;margin:11px;padding:16px 11px;border-radius:9px;background:linear-gradient(135deg,var(--pv-accent),#405c9f);color:white}
.preview-hero strong{font-size:13px}
.preview-cards{display:grid;grid-template-columns:repeat(var(--pv-cols,3),minmax(0,1fr));gap:6px;padding:0 11px 12px}
.preview-card{border:1px solid var(--pv-border);background:var(--pv-card);border-radius:8px;padding:8px 4px;text-align:center;min-width:0;display:flex;align-items:center;flex-direction:column;gap:5px}
.preview-card strong,.preview-card span{line-height:1.3;overflow-wrap:anywhere}
.preview-card span{font-size:8px}
.preview-art{display:grid;place-items:center;border-radius:9px;width:30px;height:30px;background:#e9effe;color:var(--pv-accent);font-size:18px}
.preview-action{border-radius:6px;background:var(--pv-accent);color:white;font-size:8px;padding:4px;width:100%}
.preview-footer{padding:12px 8px;text-align:center;background:#eaf0f8;font-size:8px}
.designer-preview[data-device=mobile] .preview-links{display:none}
.designer-preview[data-device=mobile] .preview-menu-icon{display:inline}
.designer-preview[data-device=mobile][data-menu-side=left] .preview-menu-icon{order:-1}
.designer-preview[data-device=mobile] .preview-hero{padding:12px 8px}
.designer-preview[data-device=mobile][data-hero=hide] .preview-hero{display:none}
.designer-preview[data-device=mobile] .preview-cards{grid-template-columns:repeat(var(--pv-mobile-cols,2),minmax(0,1fr))}
@media(max-width:1100px){.designer-layout{grid-template-columns:1fr}.designer-preview-wrap{position:static;max-width:470px}}
@media(max-width:550px){.designer-group-body .form-grid{grid-template-columns:1fr}.designer-group-body{padding:13px}.designer-heading .button{width:100%}}

@media(max-width:780px){
 /* Make slide-out navigation appear above overlay even with a sticky header stacking context. */
 body.mobile-menu-drawer.mobile-menu-open .site-header{z-index:125}
 body.mobile-menu-drawer.mobile-menu-open .mobile-menu-toggle{z-index:130}
}
body.theme-motion-none #product-grid .product-card:hover,body.theme-motion-none #product-grid .product-mark,
body.theme-motion-none .button:hover{transform:none!important;transition:none!important}
@media(max-width:780px){body.theme-glass-header.mobile-menu-drawer.mobile-menu-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}}