/** * Shop theme entrypoint. * * Load this file once from the layout. Page-specific CSS stays in * pages/*.css and is linked from individual Blade views. * * Structure: * fonts / variables → tokens + typefaces * components/* → shared UI (buttons, headers, sidebar, cards…) * animations → icon/button motion * (this file) → global resets + theme helpers */ /* Foundations */ @import url('fonts.css'); @import url('variables.css'); /* Shared components */ @import url('components/button.css'); @import url('components/breadcrumbs.css'); @import url('components/nav-tabs.css'); @import url('components/header.css'); @import url('components/shop-header.css'); @import url('components/footer.css'); /* categories-menu.css linked directly in layout (avoid @import cache staleness) */ @import url('components/product-card.css'); @import url('components/toast.css'); @import url('components/account.css'); @import url('components/confirm-modal.css'); @import url('components/stock-alert-modal.css'); @import url('components/tooltip.css'); @import url('components/field-validation.css'); @import url('components/form-choice.css'); @import url('components/empty-state.css'); @import url('components/item-groups.css'); /* Motion (icon hover anims commented out in animation_buttons.css) */ @import url('animation_buttons.css'); /* -------------------------------------------------------------------------- * Global resets / shell * -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body, main { font-family: var(--font-text); background-color: var(--bg-secondary); color: var(--fg-primary); } /* Ultra-wide: shell tokens (--theme-shell-*) center fixed chrome + push column. * Side gutters keep body background; no extra wrapper needed. */ a { color: inherit; text-decoration: none; } ul, ol { list-style: none; margin: 0; padding: 0; } button { padding: 0; font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; } img { display: block; max-width: 100%; height: auto; } /* Icons follow parent text token via currentColor (set color on control / parent). */ svg { fill: #e2e2e2; color: inherit; } /* Phosphor Regular (stroke-look) — fill-path icons, not SVG stroke. * Keep color via currentColor; do not force fill:none (that blanks them). */ svg.icon--stroke.icon--phosphor-regular { fill: currentColor; stroke: none; color: inherit; } svg.icon--stroke.icon--phosphor-regular path, svg.icon--stroke.icon--phosphor-regular circle, svg.icon--stroke.icon--phosphor-regular line, svg.icon--stroke.icon--phosphor-regular polyline, svg.icon--stroke.icon--phosphor-regular g { fill: currentColor; } /* Legacy / true SVG-stroke icons (if any) */ svg.icon--stroke:not(.icon--phosphor-regular) { fill: none; stroke: currentColor; color: inherit; } svg.icon--stroke:not(.icon--phosphor-regular) path, svg.icon--stroke:not(.icon--phosphor-regular) circle, svg.icon--stroke:not(.icon--phosphor-regular) line, svg.icon--stroke:not(.icon--phosphor-regular) polyline, svg.icon--stroke:not(.icon--phosphor-regular) g { fill: none; } .container { width: 100%; margin: 0 auto; padding-inline: 1rem; } @media (min-width: 1200px) { .container { max-width: 85rem; padding-inline: 0; } } .my-container { padding: 0px 0 28px 0; } .animation { touch-action: manipulation; -webkit-tap-highlight-color: transparent; outline: none; -webkit-user-select: none; user-select: none; } /* Show only the .theme-img variant matching the active theme (set on by render-theme.js). !important beats component rules like .categories__background--desktop { display: block }. data-theme = resolved light/dark (assets + CSS vars). data-theme-mode = light|dark|device (toggle preference). */ :root:not([data-theme="dark"]) .theme-img[data-theme="dark"], :root[data-theme="dark"] .theme-img[data-theme="light"] { display: none !important; } /* Device/auto icon: only in the theme toggle when preference is device */ .theme-img--device { display: none !important; } :root[data-theme-mode="device"] .theme-img--device { display: block !important; } /* While following device, hide sun/moon in the theme toggle (device icon is the marker) */ :root[data-theme-mode="device"] .categories__menu-footer-btn-theme > .theme-img:not(.theme-img--device), :root[data-theme-mode="device"] .shop-header__theme > .theme-img:not(.theme-img--device) { display: none !important; } /* Inline vector logo: wordmark follows theme foreground, paw keeps brand yellow */ .logo-svg { fill: var(--fg-primary); }