/* ShopSmart buyer foundation. Tokens, reset and base are layered on purpose: page styles still win, so an unadopted page is not restyled. Components (.ss-*) and utilities are NOT layered. Pages open their inline CSS with resets such as `* { margin: 0; padding: 0 }`, `button { border: none }` and `a { color: inherit }`, and an unlayered page rule beats every layered rule whatever its specificity, which silently zeroed component padding and colours. The .ss-* names collide with nothing, and a class selector beats those element and universal resets. Anything that must beat a page's own class rules belongs in responsive-fix.css. */ @layer ss.tokens, ss.reset, ss.base; @layer ss.tokens { :root { /* Brand */ --ss-navy: #0D2B55; --ss-navy-700: #143A6B; --ss-navy-900: #061226; --ss-cyan: #1B9BDB; --ss-cyan-tint: #E8F4FC; --ss-sale: #B3261E; /* Action. Navy on white text, 14.1:1. The accent contract is untouched. */ --ss-action: var(--ss-navy, #0D2B55); --ss-action-hover: var(--ss-navy-700, #143A6B); --ss-on-action: #FFFFFF; --ss-accent: var(--accent, #1B9BDB); --ss-on-accent: var(--on-accent, #061226); /* Surfaces */ --ss-page: #F5F7FA; --ss-surface: #FFFFFF; --ss-surface-2: #FAFBFD; --ss-line: #E3E8EF; --ss-line-2: #CBD4E1; /* Text. Nothing lighter than --ss-ink-3 is ever used on text. */ --ss-ink: #10203A; --ss-ink-2: #46586F; --ss-ink-3: #5B6B84; /* Type */ --ss-font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ss-font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ss-t-12: .75rem; --ss-t-14: .875rem; --ss-t-16: 1rem; --ss-t-17: 1.0625rem;--ss-t-18: 1.125rem; --ss-t-20: 1.25rem; --ss-t-24: 1.5rem; --ss-t-30: 1.875rem; /* Space */ --ss-1: 4px; --ss-2: 8px; --ss-3: 12px; --ss-4: 16px; --ss-5: 20px; --ss-6: 24px; --ss-8: 32px; --ss-12: 48px; --ss-16: 64px; /* Shape. A hierarchy, not one value. */ --ss-r-input: 10px; --ss-r-card: 12px; --ss-r-media: 8px; --ss-r-sheet: 16px; --ss-r-pill: 999px; /* Depth. Only for things that float. */ --ss-shadow-pop: 0 4px 12px rgba(16,32,58,.08); --ss-shadow-float: 0 12px 32px rgba(16,32,58,.14); /* Layout */ --ss-container: 1280px; --ss-gutter: 16px; --ss-tap: 44px; --ss-header-h: 104px; /* phone sticky budget, enforced */ --ss-bottomnav-h: 56px; /* Motion */ --ss-dur: 180ms; --ss-dur-fast: 120ms; --ss-ease: cubic-bezier(.2,.6,.2,1); /* Z */ --ss-z-header: 100; --ss-z-bottomnav: 90; --ss-z-scrim: 200; --ss-z-sheet: 210; --ss-z-drawer: 220; --ss-z-toast: 300; } @media (min-width: 768px) { :root { --ss-gutter: 24px; } } @media (min-width: 1280px) { :root { --ss-gutter: 32px; } } } /* Page metrics are opt-in with . A layer loses to page rules, but it still fills in whatever a page never set: measured on 2026-09-14, the body font-size/line-height below pushed product's first image 149px down on a phone and the control font moved category 51px. Pages get the class as they adopt the shared components (Phase 2); until then only the rules that measured no change apply everywhere. :where() keeps these selectors at the specificity of a bare element, so a component class inside ss.components (.ss-btn--primary's white text) is never beaten by `.ss-page a`. */ @layer ss.reset { *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } /* fixes the 8px body margin on suppliers-all */ img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } :where(.ss-page) :is(button, input, select, textarea) { font: inherit; color: inherit; } [hidden] { display: none !important; } /* fixes ACC-04 and the empty pagination bar */ } @layer ss.base { html { -webkit-text-size-adjust: 100%; } body:where(.ss-page) { background: var(--ss-page, #F5F7FA); color: var(--ss-ink, #10203A); font-family: var(--ss-font-text, system-ui); font-size: var(--ss-t-16, 1rem); line-height: 1.55; } :where(.ss-page) :is(h1, h2, h3, h4), .ss-h { font-family: var(--ss-font-ui, system-ui); line-height: 1.25; } :where(.ss-page) a { color: var(--ss-navy, #0D2B55); } :focus-visible { outline: 2px solid var(--ss-cyan, #1B9BDB); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--ss-cyan-tint, #E8F4FC); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } } /* ---- Components (unlayered, see the note at the top) ---- */ /* ---- Icon from the sprite: ---- */ .ss-i { width: 20px; height: 20px; display: inline-block; flex: 0 0 auto; vertical-align: middle; } /* ---- Container: one alignment for bar, header, nav, content, footer ---- */ .ss-container { width: 100%; max-width: calc(var(--ss-container, 1280px) + (var(--ss-gutter, 16px) * 2)); margin-inline: auto; padding-inline: var(--ss-gutter, 16px); } /* ---- Buttons ---- */ .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ss-2, 8px); min-height: var(--ss-tap, 44px); padding-inline: var(--ss-4, 16px); border: 1.5px solid transparent; border-radius: var(--ss-r-input, 10px); font-family: var(--ss-font-ui, system-ui); font-size: var(--ss-t-16, 1rem); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--ss-dur-fast, 120ms) var(--ss-ease, ease); } .ss-btn--primary { background: var(--ss-action, #0D2B55); color: var(--ss-on-action, #fff); } .ss-btn--primary:hover { background: var(--ss-action-hover, #143A6B); } .ss-btn--secondary { background: var(--ss-surface, #fff); color: var(--ss-navy, #0D2B55); border-color: var(--ss-navy, #0D2B55); } .ss-btn--accent { background: var(--ss-accent, #1B9BDB); color: var(--ss-on-accent, #061226); } .ss-btn--quiet { background: transparent; color: var(--ss-navy, #0D2B55); } .ss-btn--block { width: 100%; } .ss-btn[disabled], .ss-btn[aria-disabled="true"] { background: var(--ss-line, #E3E8EF); color: var(--ss-ink-3, #5B6B84); border-color: transparent; cursor: not-allowed; } /* A disabled button must be accompanied by .ss-btn-reason explaining why. */ .ss-btn-reason { font-size: var(--ss-t-12, .75rem); color: var(--ss-ink-3, #5B6B84); margin-top: var(--ss-1, 4px); } /* ---- Fields ---- */ .ss-field { width: 100%; min-height: var(--ss-tap, 44px); padding: 10px var(--ss-3, 12px); background: var(--ss-surface, #fff); border: 1px solid var(--ss-line-2, #CBD4E1); border-radius: var(--ss-r-input, 10px); font-size: var(--ss-t-16, 1rem); /* enforced again in responsive-fix.css */ } .ss-field::placeholder { color: var(--ss-ink-3, #5B6B84); } textarea.ss-field { resize: vertical; min-height: 96px; } /* ---- Chips ---- */ .ss-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ss-tap, 44px); padding-inline: var(--ss-3, 12px); background: var(--ss-surface, #fff); border: 1px solid var(--ss-line-2, #CBD4E1); border-radius: var(--ss-r-pill, 999px); font-size: var(--ss-t-14, .875rem); color: var(--ss-ink-2, #46586F); white-space: nowrap; cursor: pointer; } .ss-chip[aria-pressed="true"], .ss-chip.is-on { background: var(--ss-cyan-tint, #E8F4FC); border-color: var(--ss-cyan, #1B9BDB); color: var(--ss-navy, #0D2B55); font-weight: 600; } /* ---- Badges. One per card, maximum. ---- */ .ss-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--ss-2, 8px); border-radius: 6px; font-family: var(--ss-font-ui, system-ui); font-size: var(--ss-t-12, .75rem); font-weight: 700; line-height: 1.4; } .ss-badge--sale { background: var(--ss-sale, #B3261E); color: #fff; } .ss-badge--verified { background: var(--ss-cyan-tint, #E8F4FC); color: var(--ss-navy, #0D2B55); } /* ---- Card ---- */ .ss-card { background: var(--ss-surface, #fff); border: 1px solid var(--ss-line, #E3E8EF); border-radius: var(--ss-r-card, 12px); } /* On phones, section wrappers flatten so cards get the width (SYS-06). */ @media (max-width: 767px) { .ss-flat-on-phone { border: 0; border-radius: 0; padding-inline: 0; background: transparent; } } /* ---- Product grid: auto-fill, never fixed columns (DSK-02) ---- Phones always get two columns: the 158px minimum gives way to half the row when a wrapper's padding would otherwise leave room for only one. */ .ss-grid-products { display: grid; gap: var(--ss-3, 12px); grid-template-columns: repeat(auto-fill, minmax(min(158px, calc(50% - 6px)), 1fr)); } @media (min-width: 600px) { .ss-grid-products { gap: var(--ss-4, 16px); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } @media (min-width: 900px) { .ss-grid-products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } /* Beside a filter sidebar, keep the same minimum so cards never fall to 158px at 1920. Scoped to 900 and up: on a phone the sidebar stacks, and a 200px minimum there would drop the grid to one column. */ @media (min-width: 900px) { .ss-with-sidebar .ss-grid-products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } .ss-grid-products > .ss-empty { grid-column: 1 / -1; } /* ---- Product card (6.5), rendered only by ss-card.js. One badge, a 44px save button, and reserved rows so neighbours line up. ---- */ .ss-pcard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--ss-surface, #fff); border: 1px solid var(--ss-line, #E3E8EF); border-radius: var(--ss-r-card, 12px); transition: border-color var(--ss-dur-fast, 120ms) var(--ss-ease, ease); } .ss-pcard:hover { border-color: var(--ss-line-2, #CBD4E1); } .ss-pcard-link { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; color: var(--ss-ink, #10203A); text-decoration: none; } .ss-pcard-link:focus-visible { outline: 2px solid var(--ss-cyan, #1B9BDB); outline-offset: -2px; border-radius: var(--ss-r-card, 12px); } /* Media: a white 1:1 tile (2.6). ss-card.js sets data-fit from the photo's own ratio: cover edge to edge when near-square, otherwise contain. */ .ss-pcard-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border-bottom: 1px solid var(--ss-line, #E3E8EF); } .ss-pcard-media img { display: block; box-sizing: border-box; width: 100%; height: 100%; max-width: none; margin: 0; padding: 4px; border-radius: 0; object-fit: contain; } .ss-pcard-media img[data-fit="cover"] { padding: 0; object-fit: cover; } .ss-pcard.is-soldout .ss-pcard-media img { opacity: .55; } .ss-pcard-mono { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ss-cyan-tint, #E8F4FC); color: var(--ss-navy, #0D2B55); font-family: var(--ss-font-ui, system-ui); font-size: 2rem; font-weight: 700; } .ss-pcard-badge { position: absolute; left: var(--ss-2, 8px); bottom: var(--ss-2, 8px); z-index: 1; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-pcard-badge--flash { background: var(--ss-navy, #0D2B55); color: #fff; } .ss-pcard-badge--muted { background: #fff; color: var(--ss-ink, #10203A); box-shadow: inset 0 0 0 1px var(--ss-line-2, #CBD4E1); } /* Save: a 44px target around a 32px disc, so the heart reads on any photo. */ .ss-pcard-save { position: absolute; right: 2px; top: 2px; z-index: 2; width: var(--ss-tap, 44px); height: var(--ss-tap, 44px); display: grid; place-items: center; margin: 0; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--ss-ink-2, #46586F); cursor: pointer; } .ss-pcard-save::before { content: ""; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px var(--ss-line, #E3E8EF); } .ss-pcard-save .ss-i { position: relative; width: 18px; height: 18px; } .ss-pcard-save[aria-pressed="true"] { color: var(--ss-sale, #B3261E); } .ss-pcard-save[aria-pressed="true"]::before { background: #FDECEA; box-shadow: 0 0 0 1px #F4C7C3; } .ss-pcard-save:focus-visible { outline: 2px solid var(--ss-cyan, #1B9BDB); outline-offset: -4px; } /* Body: name (always 2 lines), price, the was-price line (reserved), and a meta line that exists from 768 only. */ .ss-pcard-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 12px; } .ss-pcard-name { margin: 0; font-family: var(--ss-font-ui, system-ui); font-size: var(--ss-t-14, .875rem); font-weight: 500; line-height: 1.35; color: var(--ss-ink, #10203A); height: calc(2 * 1.35em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .ss-pcard-price { margin: 4px 0 0; font-family: var(--ss-font-ui, system-ui); font-size: var(--ss-t-17, 1.0625rem); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ss-navy, #0D2B55); white-space: nowrap; } .ss-pcard-deal { margin: 0; display: flex; align-items: baseline; gap: 6px; min-width: 0; height: calc(1.4 * var(--ss-t-12, .75rem)); /* reserved even when empty */ font-size: var(--ss-t-12, .75rem); line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .ss-pcard-was { min-width: 0; color: var(--ss-ink-3, #5B6B84); text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; } .ss-pcard-off { flex: 0 0 auto; font-weight: 700; color: var(--ss-sale, #B3261E); } .ss-pcard-meta { margin: 2px 0 0; display: flex; align-items: center; gap: 10px; min-width: 0; height: calc(1.4 * var(--ss-t-12, .75rem)); /* reserved even when empty */ font-size: var(--ss-t-12, .75rem); line-height: 1.4; color: var(--ss-ink-3, #5B6B84); white-space: nowrap; overflow: hidden; } .ss-pcard-fact { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; font-variant-numeric: tabular-nums; } .ss-pcard-fact .ss-i { width: 14px; height: 14px; } .ss-pcard-fact--text { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 767px) { .ss-pcard-meta { display: none; } } .ss-pcard-note { margin: 6px 0 0; font-size: var(--ss-t-12, .75rem); line-height: 1.4; color: var(--ss-ink-2, #46586F); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Rail: a carousel that reads as scrollable, not as clipped ---- */ .ss-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--ss-rail-item, 158px), 1fr); gap: var(--ss-3, 12px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; /* full-bleed so the last card is deliberately half-visible at the screen edge */ padding-inline: var(--ss-gutter, 16px); /* start-snapping stops at the page gutter, not at the screen edge */ scroll-padding-inline: var(--ss-gutter, 16px); margin-inline: calc(var(--ss-gutter, 16px) * -1); } .ss-rail::-webkit-scrollbar { display: none; } .ss-rail > * { scroll-snap-align: start; } @media (min-width: 1024px) { .ss-rail { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent 100%); } } .ss-rail-nav { display: none; } @media (hover: hover) and (min-width: 1024px) { .ss-rail-nav { display: inline-flex; } } /* A rail with fewer items than fit is rendered as a plain grid instead. */ /* ---- Tab row: same treatment, plus the active tab scrolled into view in JS ---- */ .ss-tabs { display: flex; gap: var(--ss-1, 4px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ss-line, #E3E8EF); padding-inline: var(--ss-gutter, 16px); margin-inline: calc(var(--ss-gutter, 16px) * -1); } .ss-tabs::-webkit-scrollbar { display: none; } .ss-tab { flex: 0 0 auto; min-height: var(--ss-tap, 44px); padding-inline: var(--ss-3, 12px); display: inline-flex; align-items: center; font-family: var(--ss-font-ui, system-ui); font-size: var(--ss-t-14, .875rem); color: var(--ss-ink-2, #46586F); border-bottom: 2px solid transparent; background: none; border-top: 0; border-inline: 0; white-space: nowrap; } .ss-tab[aria-selected="true"] { color: var(--ss-navy, #0D2B55); font-weight: 700; border-bottom-color: var(--ss-cyan, #1B9BDB); } /* ---- Empty state: one pattern everywhere ---- */ .ss-empty { display: grid; justify-items: center; gap: var(--ss-3, 12px); text-align: center; padding: var(--ss-12, 48px) var(--ss-4, 16px); background: var(--ss-surface, #fff); border: 1px solid var(--ss-line, #E3E8EF); border-radius: var(--ss-r-card, 12px); } .ss-empty svg { width: 40px; height: 40px; color: var(--ss-ink-3, #5B6B84); } .ss-empty p { margin: 0; color: var(--ss-ink-2, #46586F); max-width: 36ch; } /* ---- Sheet and scrim ---- */ .ss-scrim { position: fixed; inset: 0; z-index: var(--ss-z-scrim, 200); background: rgba(6,18,38,.48); opacity: 0; transition: opacity var(--ss-dur, 180ms) var(--ss-ease, ease); } .ss-scrim.is-open { opacity: 1; } .ss-sheet { position: fixed; inset: auto 0 0 0; z-index: var(--ss-z-sheet, 210); max-height: min(86dvh, 720px); display: flex; flex-direction: column; background: var(--ss-surface, #fff); border-radius: var(--ss-r-sheet, 16px) var(--ss-r-sheet, 16px) 0 0; box-shadow: var(--ss-shadow-float, 0 12px 32px rgba(16,32,58,.14)); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(100%); transition: transform var(--ss-dur, 180ms) var(--ss-ease, ease); } .ss-sheet.is-open { transform: translateY(0); } .ss-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--ss-4, 16px); } .ss-sheet-foot { border-top: 1px solid var(--ss-line, #E3E8EF); padding: var(--ss-3, 12px) var(--ss-4, 16px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--ss-2, 8px); } @media (min-width: 768px) { /* above 768 the same component centres as a dialog */ .ss-sheet { inset: 50% auto auto 50%; translate: -50% -50%; transform: none; width: min(560px, calc(100vw - 48px)); border-radius: var(--ss-r-sheet, 16px); } } /* ---- Bottom navigation, phones only ---- */ .ss-bottomnav { position: fixed; inset: auto 0 0 0; z-index: var(--ss-z-bottomnav, 90); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ss-surface, #fff); border-top: 1px solid var(--ss-line, #E3E8EF); padding-bottom: env(safe-area-inset-bottom, 0px); } .ss-bottomnav a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: var(--ss-bottomnav-h, 56px); font-size: var(--ss-t-12, .75rem); color: var(--ss-ink-3, #5B6B84); text-decoration: none; } .ss-bottomnav a[aria-current="page"] { color: var(--ss-navy, #0D2B55); font-weight: 600; } @media (min-width: 768px) { .ss-bottomnav { display: none; } } body.has-bottomnav { padding-bottom: calc(var(--ss-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { body.has-bottomnav { padding-bottom: 0; } } /* ---- Skeletons: shown instead of empty flashes while data loads ---- */ .ss-skel { background: linear-gradient(90deg, #EEF2F7 25%, #F7F9FC 37%, #EEF2F7 63%); background-size: 400% 100%; border-radius: var(--ss-r-media, 8px); animation: ss-shimmer 1.4s ease infinite; } @keyframes ss-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* ---- Toast ---- */ .ss-toast { position: fixed; z-index: var(--ss-z-toast, 300); left: 50%; translate: -50% 0; bottom: calc(var(--ss-bottomnav-h, 56px) + 12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--ss-2, 8px); padding: var(--ss-3, 12px) var(--ss-4, 16px); background: var(--ss-navy, #0D2B55); color: #fff; border-radius: var(--ss-r-pill, 999px); box-shadow: var(--ss-shadow-float, 0 12px 32px rgba(16,32,58,.14)); font-size: var(--ss-t-14, .875rem); } @media (min-width: 768px) { .ss-toast { bottom: 24px; } } /* ---- Utilities (unlayered) ---- */ /* Expand a small control's hit area without changing how it looks. */ .ss-tap { position: relative; } .ss-tap::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: max(100%, var(--ss-tap, 44px)); height: max(100%, var(--ss-tap, 44px)); } .ss-tabular { font-variant-numeric: tabular-nums; } .ss-measure { max-width: 68ch; } .ss-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ss-nowrap { white-space: nowrap; }