/* Corevia eCommerce — storefront + admin. Colours come from CSS custom properties set per-store in the (see StoreConfig::themeCss). */ *,*::before,*::after{box-sizing:border-box} :root{ --c-primary:#2563eb;--c-primary-ink:#fff;--c-secondary:#0f172a;--c-accent:#f59e0b; --c-bg:#fff;--c-surface:#f8fafc;--c-ink:#0f172a;--c-muted:#64748b; --radius:12px;--font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --line:#e5e7eb;--ok:#16a34a;--err:#dc2626;--warn:#d97706; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04); --shadow-lg:0 10px 30px -10px rgba(0,0,0,.2); } html{font-size:16px} body{margin:0;font-family:var(--font);color:var(--c-ink);background:var(--c-bg);line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* skip-to-content (accessibility) */ .skip-link{position:absolute;left:.5rem;top:.5rem;z-index:100;background:var(--c-primary);color:var(--c-primary-ink); padding:.55rem .9rem;border-radius:var(--radius);transform:translateY(-150%);transition:transform .15s} .skip-link:focus{transform:translateY(0)} /* Global keyboard-focus ring (P2-03) — every interactive element gets a visible, theme-token ring on keyboard focus (":focus-visible" only, so a mouse click never shows it). A handful of elements already have their own more specific :focus-visible rule (variant radios, thumbnail buttons) and keep it — this is only the fallback for everything else. Existing input/select/textarea :focus (not :focus-visible) styling is untouched: it is a more specific selector and keeps winning for those fields. */ a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--c-primary);outline-offset:2px;border-radius:4px; } /* A real, programmatically-associated for a field whose purpose is already visually obvious from a placeholder/icon (a search box, an inline table filter) — present for screen readers, invisible on screen so it never changes existing layout. Not for anything a sighted user needs to read; a visible is always preferred where there's room for one. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* theme.card_style — driven by . .surface is part of the same card family (a "sunken panel" variant of .card) and previously didn't respond to this setting at all (P2-08) — it now gets the same border-style treatment; "flat" is a no-op for it since a surface already sits on --c-surface with no border in every style. */ body[data-cards="border"] .card,body[data-cards="border"] .p-card,body[data-cards="border"] .kpi,body[data-cards="border"] .surface{box-shadow:none;border:1px solid var(--line)} body[data-cards="flat"] .card,body[data-cards="flat"] .p-card,body[data-cards="flat"] .kpi{box-shadow:none;border:1px solid transparent;background:var(--c-surface)} body[data-cards="flat"] .p-card:hover{box-shadow:var(--shadow-lg)} /* theme.header_style — driven by */ body[data-header="dark"] .site-header{background:var(--c-secondary);border-bottom-color:rgba(255,255,255,.12)} body[data-header="dark"] .site-header .logo{color:#fff} body[data-header="dark"] .site-header .nav a,body[data-header="dark"] .site-header .h-actions{color:#e2e8f0} body[data-header="dark"] .site-header .nav a:hover{color:#fff} body[data-header="dark"] .site-header .nav a.on{color:#fff} body[data-header="dark"] .search input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff} body[data-header="dark"] .search input::placeholder{color:#cbd5e1} body[data-header="dark"] .burger{color:#fff} h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em} h1{font-size:clamp(1.6rem,4vw,2.4rem)} h2{font-size:clamp(1.3rem,3vw,1.8rem)} p{margin:0 0 1rem} .container{max-width:1200px;margin:0 auto;padding:0 1rem} .muted{color:var(--c-muted)} .small{font-size:.85rem} .center{text-align:center} .row{display:flex;gap:1rem;flex-wrap:wrap} .spread{display:flex;justify-content:space-between;align-items:center;gap:1rem} .stack>*+*{margin-top:1rem} .grid{display:grid;gap:1.25rem} .hidden{display:none!important} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1.2rem;border-radius:var(--radius); border:1px solid transparent;background:var(--c-primary);color:var(--c-primary-ink);font:inherit;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap} .btn:hover{filter:brightness(.94)} .btn.ghost{background:transparent;color:var(--c-ink);border-color:var(--line)} .btn.ghost:hover{background:var(--c-surface);filter:none} .btn.accent{background:var(--c-accent);color:#1a1a1a} .btn.danger{background:var(--err)} .btn.sm{padding:.45rem .8rem;font-size:.85rem} .btn.block{width:100%} .btn:disabled{opacity:.5;cursor:not-allowed} /* forms */ label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.3rem} input,select,textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:calc(var(--radius) - 4px); font:inherit;background:var(--c-bg);color:var(--c-ink)} input:focus,select:focus,textarea:focus{outline:2px solid var(--c-primary);outline-offset:1px;border-color:var(--c-primary)} textarea{min-height:6rem;resize:vertical} .field{margin-bottom:1rem} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin:0 0 1rem} legend{font-weight:700;padding:0 .4rem} .check{display:flex;align-items:center;gap:.5rem;font-weight:500} .check input{width:auto} .err-text{color:var(--err);font-size:.8rem;margin-top:.25rem} /* cards / surfaces — .kpi is the same bordered tile recipe as .card, just with tighter padding for a stat grid (P2-08: this used to be two separate copies of background/border/border-radius; now one declaration, and .kpi below only overrides what's actually different). */ .card,.kpi{background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem} .surface{background:var(--c-surface);border-radius:var(--radius);padding:1.25rem} .tag{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--c-surface);color:var(--c-muted)} .tag.sale{background:#fee2e2;color:#b91c1c} .tag.new{background:#dcfce7;color:#15803d} .tag.out{background:#f1f5f9;color:#64748b} /* flash */ .flash{padding:.85rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-weight:500;border:1px solid} .flash.success{background:#f0fdf4;border-color:#bbf7d0;color:#166534} .flash.error{background:#fef2f2;border-color:#fecaca;color:#991b1b} /* header */ .announce{background:var(--c-secondary);color:#fff;color:var(--c-secondary-ink);text-align:center;font-size:.82rem;padding:.5rem 1rem} .site-header{position:sticky;top:0;z-index:40;background:var(--c-bg);border-bottom:1px solid var(--line)} .site-header .container{display:flex;align-items:center;gap:1.25rem;padding-top:.9rem;padding-bottom:.9rem;position:relative} .logo{font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--c-primary);flex-shrink:0} .logo img{height:38px;width:auto} .nav{display:flex;align-items:center;gap:1.1rem;font-weight:600;font-size:.92rem} .nav a{padding-bottom:2px;border-bottom:2px solid transparent} .nav a:hover{color:var(--c-primary)} .nav a.on{color:var(--c-primary);border-bottom-color:currentColor} .nav.open{display:flex;flex-wrap:wrap} /* P3-15: the "More" categories disclosure — plain

, no JS. */ .nav-more{position:relative} .nav-more summary{list-style:none;cursor:pointer;padding-bottom:2px;border-bottom:2px solid transparent} .nav-more summary::-webkit-details-marker{display:none} .nav-more summary:hover{color:var(--c-primary)} .nav-more summary.on{color:var(--c-primary);border-bottom-color:currentColor} .nav-more summary::after{content:'▾';margin-left:.3rem;font-size:.7em} .nav-more-menu{position:absolute;top:100%;left:0;margin-top:.6rem;background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.4rem;display:flex;flex-direction:column;min-width:160px;z-index:30} .nav-more-menu a{padding:.4rem .6rem;border-radius:6px;border-bottom:0} .nav-more-menu a:hover{background:var(--c-surface)} .nav-more-menu a.on{color:var(--c-primary);font-weight:700} .search{flex:1;max-width:460px;position:relative} .search input{padding-right:2.5rem} .search button{position:absolute;right:.3rem;top:.3rem;bottom:.3rem;padding:0 .7rem;background:var(--c-primary);border:0;border-radius:calc(var(--radius) - 6px);color:#fff;cursor:pointer} .search-suggest{position:absolute;top:calc(100% + .4rem);left:0;right:0;background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:45;max-height:70vh;overflow-y:auto} .search-suggest[hidden]{display:none} .search-suggest a{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-bottom:1px solid var(--line)} .search-suggest a:last-child{border-bottom:0} .search-suggest a:hover,.search-suggest a.active{background:var(--c-surface)} .search-suggest img{width:36px;height:36px;object-fit:cover;border-radius:6px;flex-shrink:0} .search-suggest .name{flex:1;font-size:.88rem;font-weight:500} .search-suggest .price{font-size:.82rem;font-weight:700;color:var(--c-muted)} .search-suggest .more,.search-suggest .empty{display:block;padding:.6rem .7rem;font-size:.85rem;color:var(--c-muted)} /* loading skeletons — a genuine async wait gets a visible placeholder instead of a blank gap (search suggestions, the mini-cart drawer). */ @keyframes skeletonPulse{0%,100%{opacity:.55}50%{opacity:1}} .skel-line{background:var(--c-surface);border-radius:6px;animation:skeletonPulse 1.1s ease-in-out infinite} @media (prefers-reduced-motion: reduce){.skel-line{animation:none;opacity:.7}} .search-skel{padding:.5rem .7rem;display:flex;flex-direction:column;gap:.6rem} .search-skel span{display:block;height:36px;border-radius:6px} .search-skel span{background:var(--c-surface);animation:skeletonPulse 1.1s ease-in-out infinite} .search-skel span:nth-child(2){animation-delay:.12s} .search-skel span:nth-child(3){animation-delay:.24s} .cart-drawer-body .skel-line{height:70px;margin:.85rem 0} .h-actions{display:flex;gap:1rem;align-items:center;margin-left:auto;font-weight:600} .h-actions a{position:relative;display:flex;align-items:center;gap:.35rem} .cart-count{background:var(--c-accent);color:#1a1a1a;border-radius:999px;font-size:.68rem;font-weight:800;padding:.05rem .4rem;min-width:1.2rem;text-align:center} .burger{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer} /* mini-cart drawer — same accessible-drawer shape as .nav.open/.nav-backdrop (backdrop click / Escape / focus management, see app.js), just anchored to the right edge instead of dropping down from the header. */ .cart-drawer[hidden]{display:none} .cart-drawer{position:fixed;inset:0;z-index:60} .cart-drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45)} .cart-drawer-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--c-bg); box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:cartDrawerIn .18s ease-out} @keyframes cartDrawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}} @media (prefers-reduced-motion: reduce){.cart-drawer-panel{animation:none}} .cart-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--line);flex-shrink:0} .cart-drawer-close{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--c-muted);padding:.2rem .4rem} .cart-drawer-close:hover{color:var(--c-ink)} .cart-drawer-body{flex:1;overflow-y:auto;padding:0 1.25rem} .cart-drawer-body .line-item{grid-template-columns:56px 1fr auto;gap:.75rem;padding:.85rem 0} .cart-drawer-body .line-item img{width:56px;height:56px} .cart-drawer-body .empty{padding:2.5rem 1rem} .cart-drawer-foot{border-top:1px solid var(--line);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.6rem;flex-shrink:0} .cart-drawer-foot .line{display:flex;justify-content:space-between;font-weight:800;font-size:1.05rem} /* toast — a brief, non-blocking confirmation (e.g. "Added to cart") */ .toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(8px);z-index:70; background:var(--c-secondary);color:var(--c-secondary-ink,#fff);padding:.75rem 1.25rem;border-radius:var(--radius); box-shadow:var(--shadow-lg);font-weight:600;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media (prefers-reduced-motion: reduce){.toast{transition:opacity .01s}} /* WhatsApp click-to-chat floating button — only rendered at all when contact.whatsapp is a real, configured number (see partials/footer.php). */ .chat-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:55;width:52px;height:52px;border-radius:999px; background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:transform .15s} .chat-fab:hover{transform:scale(1.06)} @media (max-width:560px){.chat-fab{right:1rem;bottom:1rem;width:48px;height:48px}} /* Google sign-in button + the "or" divider above the email/password form */ .google-signin{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1rem} .or-divider{display:flex;align-items:center;gap:.75rem;color:var(--c-muted);font-size:.8rem;margin:1rem 0} .or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--line)} /* footer — text/border colors are derived from --c-secondary-ink (a tenant-set foreground for whatever --c-secondary they picked, light or dark; see theme.secondary_ink), not hardcoded white/slate. The plain color before each color-mix() is a same-property fallback for browsers without it — an invalid color-mix() value is ignored, leaving the plain one in effect. */ .site-footer{background:var(--c-secondary);color:#cbd5e1;color:color-mix(in srgb, var(--c-secondary-ink) 75%, var(--c-secondary));margin-top:4rem;padding:3rem 0 1.5rem} .site-footer .logo{color:#fff;color:var(--c-secondary-ink)} .site-footer .foot-muted{color:#94a3b8;color:color-mix(in srgb, var(--c-secondary-ink) 60%, var(--c-secondary))} .site-footer a:hover{color:#fff;color:var(--c-secondary-ink)} .site-footer h4{color:#fff;color:var(--c-secondary-ink);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em} .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem} .foot-links{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem} .foot-bottom{border-top:1px solid #334155;border-top:1px solid color-mix(in srgb, var(--c-secondary-ink) 25%, var(--c-secondary));margin-top:2rem;padding-top:1.5rem;text-align:center;font-size:.82rem} /* product grid + card */ .products{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} .p-card{background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.15s} .p-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)} .p-card-link{display:flex;flex-direction:column;flex:1;min-width:0} .p-card .thumb{aspect-ratio:1;background:var(--c-surface);position:relative;overflow:hidden} .p-card .thumb img{width:100%;height:100%;object-fit:cover} .p-card .thumb .badges{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.3rem} .p-card .body{padding:.85rem;display:flex;flex-direction:column;gap:.35rem;flex:1} .p-card .name{font-weight:600;font-size:.92rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .p-card .price{font-weight:800;margin-top:auto} .p-card .price .was{font-weight:500;color:var(--c-muted);text-decoration:line-through;margin-left:.4rem;font-size:.85rem} .p-card .quick-add{padding:0 .85rem .85rem} .p-card .quick-add .btn{width:100%} .stars{color:var(--c-accent);font-size:.85rem;letter-spacing:1px} /* hero */ .hero{background:linear-gradient(120deg,var(--c-primary),var(--c-secondary));color:#fff;border-radius:var(--radius);padding:clamp(2rem,6vw,4.5rem);margin:1.5rem 0;position:relative;overflow:hidden} .hero h1{color:#fff;max-width:22ch} .hero p{color:rgba(255,255,255,.85);max-width:40ch;font-size:1.05rem} /* section header */ .section{margin:3rem 0} .section .spread{margin-bottom:1.25rem} .section h2{margin:0} /* trust badges */ .trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:2rem 0} .trust .item{display:flex;gap:.6rem;align-items:center;background:var(--c-surface);padding:.9rem 1rem;border-radius:var(--radius);font-weight:600;font-size:.9rem} /* category chips */ .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem} .cat-card{background:var(--c-surface);border-radius:var(--radius);padding:1.25rem;text-align:center;font-weight:700;transition:.15s;border:1px solid transparent;background-size:cover} .cat-card:hover{border-color:var(--c-primary);color:var(--c-primary)} /* Home promo/collection tiles (P3-10) — the background-image itself has to stay an inline style (a per-record URL, genuinely dynamic), but the REPEATED static rules around it — the grid sizing, and "this tile has a photo behind it so its text needs to be light" — don't; .has-image is toggled instead of inlining color:#fff/#e2e8f0 on every tile. */ .grid-auto-md{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid-auto-sm{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .cat-card.has-image{color:#fff} .cat-card.has-image .muted{color:#e2e8f0} .card.has-image{background-size:cover;color:#fff;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end} .card.has-image h3{color:#fff} .card.has-image .muted{color:#e2e8f0} /* shop layout */ .shop-layout{display:grid;grid-template-columns:250px 1fr;gap:2rem;align-items:start;margin-top:1.5rem} .filters{position:sticky;top:90px} .filters .group{border-bottom:1px solid var(--line);padding:1rem 0} .filters .group:first-child{padding-top:0} .filters h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted)} .filters label{font-weight:500} .filter-toggle{display:none} .filters-backdrop{display:none} .filters-drawer-head{display:none} .shop-result-count{display:flex;align-items:center;justify-content:space-between;gap:1rem} /* product detail */ .pd{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin:1.5rem 0} .pd .gallery .main{aspect-ratio:1;background:var(--c-surface);border-radius:var(--radius);overflow:hidden} .pd .gallery .main img{width:100%;height:100%;object-fit:cover} .zoom-trigger{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in} .pd .thumbs{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap} .pd .thumbs .thumb-btn{padding:0;border:0;background:none;cursor:pointer;border-radius:8px} .pd .thumbs .thumb-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px} .pd .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid var(--line);cursor:pointer;display:block} /* PDP image lightbox — same accessible-overlay shape as .cart-drawer */ .lightbox[hidden]{display:none} .lightbox{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center} .lightbox-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.9)} .lightbox img{position:relative;max-width:90vw;max-height:88vh;object-fit:contain;border-radius:8px} .lightbox-close{position:fixed;top:1rem;right:1.25rem;z-index:2;background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:.3rem .6rem} .lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:2rem;line-height:1;width:3rem;height:3rem;border-radius:999px;cursor:pointer} .lightbox-nav:hover{background:rgba(255,255,255,.22)} .lightbox-nav.prev{left:1rem} .lightbox-nav.next{right:1rem} @media (max-width:560px){.lightbox-nav{width:2.4rem;height:2.4rem;font-size:1.5rem}} .pd .price{font-size:1.8rem;font-weight:800;margin:.5rem 0} .pd .price .was{font-size:1.1rem;color:var(--c-muted);text-decoration:line-through;margin-left:.6rem} .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);overflow:hidden} .qty button{background:var(--c-surface);border:0;width:2.4rem;height:2.6rem;font-size:1.1rem;cursor:pointer} .qty input{width:3rem;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line)} fieldset.opt-group{margin:.75rem 0;border:0;padding:0;min-width:0} .opt-group legend{display:block;width:100%;font-weight:700;padding:0;font-size:inherit;margin:0 0 .1rem} .opt-group .opts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.35rem} .opt-group .opts label{position:relative;border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);padding:.4rem .9rem;cursor:pointer;font-weight:600} /* Keep the native radio in the accessibility tree and tab order — a keyboard user must be able to reach it — while the styled stays the visible control (Gap Audit P0-2: this used to be display:none, which removes an element from both the tab order and the AT tree). */ .opt-group .opts input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .opt-group .opts label:has(input:checked){border-color:var(--c-primary);background:var(--c-primary);color:var(--c-primary-ink)} .opt-group .opts label:has(input:focus-visible){outline:2px solid var(--c-primary);outline-offset:2px} /* cart / checkout */ .two-col{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start;margin-top:1.5rem} .line-item{display:grid;grid-template-columns:80px 1fr auto;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);align-items:center} .line-item img{width:80px;height:80px;object-fit:cover;border-radius:8px;background:var(--c-surface)} .summary{position:sticky;top:90px} .summary .line{display:flex;justify-content:space-between;padding:.4rem 0} .summary .total{font-weight:800;font-size:1.15rem;border-top:1px solid var(--line);margin-top:.5rem;padding-top:.75rem} /* table */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)} table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px} table.data th,table.data td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line)} table.data th{background:var(--c-surface);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--c-muted)} table.data tr:last-child td{border-bottom:0} table.data tr:hover td{background:var(--c-surface)} /* Responsive CRUD table — opt in with `.table-wrap.stack-sm` on the wrapper and a `data-label="Column name"` attribute on every in its rows (the text, duplicated so each cell still reads correctly once the table stops being a table). Below the breakpoint every row becomes one card and every cell becomes a labelled line — sortable/filterable/paginated controls above the table, and each row's action buttons, are untouched; only the itself changes shape. Left as an opt-in modifier (not a blanket rule on every table.data) because a couple of tables are a poor fit for this — see individual view comments. */ @media(max-width:700px){ .table-wrap.stack-sm{overflow-x:visible;border:0} .table-wrap.stack-sm table.data{min-width:0} .table-wrap.stack-sm table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .table-wrap.stack-sm table.data,.table-wrap.stack-sm table.data tbody,.table-wrap.stack-sm table.data tr,.table-wrap.stack-sm table.data td{display:block;width:auto} .table-wrap.stack-sm table.data tr{border:1px solid var(--line);border-radius:var(--radius);background:var(--c-bg);margin-bottom:.75rem;padding:.25rem .9rem} .table-wrap.stack-sm table.data tr:hover td{background:transparent} .table-wrap.stack-sm table.data td{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:right;border-bottom:1px solid var(--line)} .table-wrap.stack-sm table.data td:last-child{border-bottom:0} .table-wrap.stack-sm table.data td[data-label='']{justify-content:flex-start} .table-wrap.stack-sm table.data td::before{content:attr(data-label);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.03em;color:var(--c-muted);text-align:left;margin-right:auto;flex-shrink:0} .table-wrap.stack-sm table.data td[data-label='']::before{content:none;margin-right:0} } .badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:capitalize} .badge.pending{background:#fef9c3;color:#854d0e} .badge.confirmed,.badge.processing{background:#dbeafe;color:#1e40af} .badge.shipped{background:#e0e7ff;color:#3730a3} .badge.delivered,.badge.paid,.badge.approved{background:#dcfce7;color:#166534} .badge.cancelled,.badge.rejected,.badge.unpaid{background:#fee2e2;color:#991b1b} .badge.returned,.badge.refunded{background:#f3e8ff;color:#6b21a8} /* Draft and Archived read the same at a glance (both used .badge.pending) — distinct color AND distinct text so color is never the only differentiator (P2-06). */ .badge.archived{background:#e5e7eb;color:#374151} /* pagination */ .pager{display:flex;gap:.4rem;justify-content:center;margin:2rem 0;flex-wrap:wrap} .pager a,.pager span{padding:.45rem .8rem;border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:.85rem} .pager .on{background:var(--c-primary);color:#fff;border-color:var(--c-primary)} /* empty state */ .empty{text-align:center;padding:3.5rem 1rem;color:var(--c-muted)} .empty .ico{font-size:2.5rem;margin-bottom:.5rem} /* ─── admin shell ─── */ .admin-body{display:flex;min-height:100vh;background:var(--c-surface)} .admin-side{width:240px;background:var(--c-secondary);color:#cbd5e1;flex-shrink:0;padding:1.25rem 0;position:sticky;top:0;height:100vh;overflow-y:auto} .admin-side .brand{font-weight:800;color:#fff;padding:0 1.25rem 1rem;font-size:1.1rem} .admin-side a{display:block;padding:.6rem 1.25rem;font-size:.9rem;font-weight:600;color:#cbd5e1} .admin-side a:hover,.admin-side a.on{background:rgba(255,255,255,.08);color:#fff} .admin-side .sec{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:1rem 1.25rem .35rem} .admin-main{flex:1;min-width:0;display:flex;flex-direction:column} .admin-top{background:var(--c-bg);border-bottom:1px solid var(--line);padding:.9rem 1.5rem;display:flex;align-items:center;gap:1rem} .admin-content{padding:1.75rem;flex:1} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.75rem} .kpi{padding:1.1rem} /* P3-03: dashboard sales-trend sparkline — plain CSS bars, no chart library. */ .sales-trend{display:flex;align-items:flex-end;gap:3px;height:80px} .sales-trend-bar{flex:1;background:var(--c-primary);border-radius:3px 3px 0 0;min-height:3px;opacity:.85} .sales-trend-bar:hover{opacity:1} .sales-trend-bar:last-child{background:var(--c-accent)} .kpi .label{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--c-muted)} .kpi .value{font-size:1.7rem;font-weight:800;margin-top:.25rem} .tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem;flex-wrap:wrap} .tabs a{padding:.6rem 1rem;font-weight:600;font-size:.88rem;border-bottom:2px solid transparent} .tabs a.on{border-color:var(--c-primary);color:var(--c-primary)} @media(max-width:960px){ .shop-layout{grid-template-columns:1fr} .filter-toggle{display:inline-flex;margin-bottom:1rem} /* Below 960px .filters becomes a real slide-in drawer instead of a long block stacked above the grid — matches the mini-cart/lightbox pattern (backdrop, Escape, focus management, scroll lock) used elsewhere. */ .filters{position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);background:var(--c-bg); z-index:60;overflow-y:auto;padding:1rem 1.25rem 1.5rem;transform:translateX(-105%);transition:transform .2s ease-out} .filters.open{transform:translateX(0)} .filters-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:59} .filters-backdrop[hidden]{display:none} .filters-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)} .filters-drawer-head button{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--c-muted)} @media (prefers-reduced-motion: reduce){.filters{transition:none}} .pd{grid-template-columns:1fr} .two-col{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .nav{display:none} .nav.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--c-bg); border-bottom:1px solid var(--line);padding:1rem;gap:.75rem;box-shadow:var(--shadow-lg);z-index:41;max-height:calc(100vh - 100%);overflow-y:auto} body[data-header="dark"] .nav.open{background:var(--c-secondary)} .nav-more{position:static} .nav-more-menu{position:static;box-shadow:none;border:0;padding:.25rem 0 0 .75rem;margin-top:.25rem} .burger{display:block} .admin-side{position:fixed;left:-260px;transition:.2s;z-index:50} .admin-side.open{left:0} } /* Backdrop behind an open mobile drawer (nav or admin sidebar) — tap-outside-to-close. */ .nav-backdrop,.admin-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:40} .nav-backdrop[hidden],.admin-backdrop[hidden]{display:none} @media(max-width:560px){ .field-row{grid-template-columns:1fr} .site-header .container{flex-wrap:wrap} .search{order:3;max-width:100%;flex-basis:100%} .foot-grid{grid-template-columns:1fr} .line-item{grid-template-columns:64px 1fr;grid-template-areas:"img body" "img price"} } /* ---- storefront polish (designed placeholders, hero depth, mobile bottom bar) ---- */ .hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none} .hero::before{width:26rem;height:26rem;right:-6rem;top:-9rem;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 68%)} .hero::after{width:20rem;height:20rem;right:12%;bottom:-11rem;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 70%)} .hero>*{position:relative;z-index:1} .p-card .thumb img{transition:transform .35s ease} .p-card:hover .thumb img{transform:scale(1.04)} .tag.sale{font-weight:800;letter-spacing:.02em} .cat-card.has-image{display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;min-height:6.5rem;background-size:cover;background-position:center;box-shadow:inset 0 -3.5rem 3rem -1.5rem rgba(0,0,0,.25);text-shadow:0 1px 2px rgba(0,0,0,.35)} .bottom-nav{display:none} @media (max-width:768px){ body{padding-bottom:4.4rem} .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--c-bg);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(15,23,42,.08);padding-bottom:env(safe-area-inset-bottom)} .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.5rem .25rem;font-size:.7rem;font-weight:600;color:var(--c-muted);position:relative} .bottom-nav a span{font-size:1.25rem;line-height:1} .bottom-nav a.on,.bottom-nav a[aria-current]{color:var(--c-primary)} .bottom-nav .cart-count{position:absolute;top:.2rem;left:calc(50% + .45rem)} .chat-fab{bottom:5.4rem} } @media (max-width:560px){.trust{grid-template-columns:repeat(2,1fr);gap:.6rem}.trust .item{padding:.65rem .7rem;font-size:.8rem}}