/* ========================================================================= Gaggiuino Part Supply storefront design system Tokens -> base -> utilities -> chrome -> catalog -> PDP -> cart -> checkout ========================================================================= */ :root { /* Brand */ --sf-bg: #0a0c0f; --sf-panel: #ffffff; --sf-ink: #00376e; --sf-ink-soft: #4a6f95; --sf-muted: #5c6f82; /* --sf-teal is decorative only: at 2.5:1 against white it must never carry text or sit under white text. Fills and ink on light use --sf-teal-dark. */ --sf-teal: #4cb5ab; --sf-teal-dark: #2b7a71; --sf-teal-darker: #1f5b54; --sf-teal-soft: #eaf7f5; --sf-line: #e2eaf1; --sf-line-strong: #c4d4e2; --sf-hero: #d4ebe6; --sf-danger: #b3261e; --sf-danger-soft: #fdecea; --sf-success: #1f7a4d; /* On the dark canvas */ --sf-on-dark: #dbe5ee; --sf-on-dark-muted: #8ea4b8; /* Spacing scale */ --sf-1: 0.25rem; --sf-2: 0.5rem; --sf-3: 0.75rem; --sf-4: 1rem; --sf-5: 1.25rem; --sf-6: 1.5rem; --sf-8: 2rem; --sf-10: 2.5rem; --sf-12: 3rem; --sf-16: 4rem; /* Type scale */ --sf-text-xs: 0.75rem; --sf-text-sm: 0.875rem; --sf-text-base: 1rem; --sf-text-lg: 1.125rem; --sf-text-xl: 1.25rem; --sf-text-2xl: clamp(1.35rem, 2.2vw, 1.6rem); --sf-text-3xl: clamp(1.75rem, 3.4vw, 2.25rem); /* Radii */ --sf-radius-sm: 4px; --sf-radius: 8px; --sf-radius-lg: 14px; --sf-radius-pill: 999px; /* Elevation */ --sf-shadow-sm: 0 1px 2px rgba(10, 25, 40, 0.06), 0 1px 3px rgba(10, 25, 40, 0.08); --sf-shadow-md: 0 4px 12px rgba(10, 25, 40, 0.1); --sf-shadow-lg: 0 18px 44px rgba(10, 25, 40, 0.24); /* Motion */ --sf-ease: cubic-bezier(0.2, 0, 0.2, 1); --sf-dur: 200ms; --font-body: "Noto Sans", "Segoe UI", Arial, Helvetica, sans-serif; /* Layout */ --sf-header-h: 4.25rem; } /* ===================== Base ===================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { margin: 0; min-height: 100%; background: var(--sf-bg); color: var(--sf-on-dark); font-family: var(--font-body); font-size: 16px; line-height: 1.55; } body.sf-scroll-locked { overflow: hidden; } img { max-width: 100%; } a { color: var(--sf-teal); text-decoration: none; } a:hover { text-decoration: underline; } /* Teal reads well on the dark canvas but not on light surfaces. Components set their own colour, so this only catches unclassed prose links. */ .sf-panel a:not([class]), .sf-drawer a:not([class]), .sf-sheet a:not([class]), .sf-modal-dialog a:not([class]), .sf-buybox a:not([class]), .sf-summary a:not([class]), .sf-content-page a:not([class]) { color: var(--sf-teal-dark); } button { font-family: inherit; } /* The white halo keeps the ring above 3:1 on the dark canvas as well as on the light panels, since one teal cannot clear both backgrounds. */ :focus-visible { outline: 2px solid var(--sf-teal-dark); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; border-radius: var(--sf-radius-sm); } .sf-wrap { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; } /* ===================== Utilities ===================== */ .sf-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sf-skip-link { position: absolute; left: var(--sf-4); top: -4rem; z-index: 200; background: #fff; color: var(--sf-ink); font-weight: 700; padding: var(--sf-3) var(--sf-4); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow-md); transition: top var(--sf-dur) var(--sf-ease); } .sf-skip-link:focus { top: var(--sf-3); text-decoration: none; } [x-cloak] { display: none !important; } /* Progressive enhancement: the `no-js` class is stripped by an inline script in . */ .sf-nojs-only { display: none; } .no-js .sf-nojs-only { display: block; } .no-js .sf-js-only { display: none; } .sf-empty { color: var(--sf-muted); margin: 0; } .sf-muted-note { color: var(--sf-muted); font-size: var(--sf-text-sm); } .sf-error { color: var(--sf-danger); background: var(--sf-danger-soft); border-radius: var(--sf-radius); padding: var(--sf-3) var(--sf-4); margin: 0 0 var(--sf-4); } /* ===================== Announcement ===================== */ .sf-announce { background: var(--sf-teal-dark); color: #fff; font-size: var(--sf-text-sm); font-weight: 600; } .sf-announce-inner { display: flex; align-items: center; justify-content: center; gap: var(--sf-3); padding: var(--sf-2) 0; text-align: center; } .sf-announce-ok { background: transparent; border: 1px solid rgba(255, 255, 255, 0.7); color: #fff; font: inherit; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: var(--sf-radius-sm); cursor: pointer; } .sf-announce-ok:hover { background: rgba(255, 255, 255, 0.16); } /* ===================== Header ===================== */ .sf-header { background: #fff; border-bottom: 1px solid var(--sf-line); position: sticky; top: 0; z-index: 60; transition: box-shadow var(--sf-dur) var(--sf-ease); } .sf-header.is-stuck { box-shadow: var(--sf-shadow-md); } .sf-header-inner { display: flex; align-items: center; gap: var(--sf-4); min-height: var(--sf-header-h); padding: var(--sf-2) 0; } .sf-brand-block { flex: 0 0 auto; } .sf-brand { display: block; color: var(--sf-ink); font-size: var(--sf-text-xl); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; line-height: 1.1; } .sf-brand:hover { text-decoration: none; color: var(--sf-teal-dark); } .sf-brand-sub { color: var(--sf-muted); font-size: var(--sf-text-xs); font-weight: 500; margin-top: 0.1rem; } .sf-header-search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } .sf-search-trigger { display: flex; align-items: center; gap: var(--sf-2); width: min(30rem, 100%); padding: 0.55rem var(--sf-4); border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius-pill); background: #fff; color: var(--sf-muted); font: inherit; font-size: var(--sf-text-sm); text-align: left; cursor: pointer; transition: border-color var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease); } .sf-search-trigger:hover { border-color: var(--sf-teal); box-shadow: var(--sf-shadow-sm); } .sf-search-trigger svg { flex: 0 0 auto; } .sf-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sf-1); } .sf-nav { display: flex; align-items: center; gap: var(--sf-1); } .sf-nav > a, .sf-nav-drop > summary { color: var(--sf-ink); font-weight: 600; font-size: var(--sf-text-sm); text-decoration: none; padding: 0.5rem 0.8rem; border-radius: var(--sf-radius); list-style: none; cursor: pointer; white-space: nowrap; transition: background var(--sf-dur) var(--sf-ease), color var(--sf-dur) var(--sf-ease); } .sf-nav > a:hover, .sf-nav-drop > summary:hover { background: var(--sf-teal-soft); color: var(--sf-teal-dark); text-decoration: none; } .sf-nav > a.is-active { background: var(--sf-teal-dark); color: #fff; } .sf-nav-drop { position: relative; } .sf-nav-drop > summary::-webkit-details-marker { display: none; } .sf-nav-drop > summary::after { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .sf-nav-menu { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 14rem; background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow-lg); padding: var(--sf-2) 0; z-index: 70; } .sf-nav-menu a { display: block; padding: 0.55rem var(--sf-4); color: var(--sf-ink); font-weight: 600; font-size: var(--sf-text-sm); text-decoration: none; } .sf-nav-menu a:hover { background: var(--sf-teal-soft); color: var(--sf-teal-dark); text-decoration: none; } .sf-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: none; background: transparent; color: var(--sf-ink); border-radius: var(--sf-radius); cursor: pointer; text-decoration: none; transition: background var(--sf-dur) var(--sf-ease); } .sf-icon-btn:hover { background: var(--sf-teal-soft); text-decoration: none; } .sf-nav-toggle { display: none; } .sf-badge { position: absolute; top: 0.35rem; right: 0.3rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: var(--sf-radius-pill); background: var(--sf-teal-dark); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 1; } .sf-badge.is-pop { animation: sf-badge-pop 0.45s var(--sf-ease); } @keyframes sf-badge-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } } @media (max-width: 860px) { .sf-nav-toggle { display: inline-flex; order: -1; } .sf-nav { display: none; } .sf-header-search { order: 3; flex-basis: 100%; } .sf-header-inner { flex-wrap: wrap; padding-bottom: var(--sf-3); } .sf-brand-block { flex: 1 1 auto; } } /* ===================== Main / footer ===================== */ .sf-main { padding: var(--sf-6) 0 var(--sf-16); } .sf-footer { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: var(--sf-6) 0; color: var(--sf-on-dark-muted); font-size: var(--sf-text-sm); text-align: center; } .sf-footer a { color: var(--sf-teal); } /* ===================== Buttons ===================== */ .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-2); background: var(--sf-teal-dark); color: #fff; border: 1px solid var(--sf-teal-dark); border-radius: var(--sf-radius); padding: 0.7rem 1.15rem; font-weight: 700; font-size: var(--sf-text-sm); font-family: var(--font-body); cursor: pointer; text-decoration: none; transition: background var(--sf-dur) var(--sf-ease), border-color var(--sf-dur) var(--sf-ease); } .sf-btn:hover { background: var(--sf-teal-darker); border-color: var(--sf-teal-darker); text-decoration: none; color: #fff; } .sf-btn:disabled { opacity: 0.65; cursor: not-allowed; } .sf-btn-block { width: 100%; } .sf-btn-lg { padding: 0.9rem 1.35rem; font-size: var(--sf-text-base); } .sf-btn-ghost { background: #fff; border-color: var(--sf-line-strong); color: var(--sf-ink); } .sf-btn-ghost:hover { background: var(--sf-teal-soft); border-color: var(--sf-teal); color: var(--sf-teal-dark); } .sf-btn-link { background: none; border: none; padding: 0; color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; cursor: pointer; text-decoration: underline; } .sf-btn-link:hover { color: var(--sf-danger); } .sf-btn.is-success, .sf-btn.is-success:hover { background: var(--sf-success); border-color: var(--sf-success); color: #fff; } /* ===================== Forms ===================== */ .sf-form label { display: block; margin: var(--sf-3) 0 var(--sf-1); color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; } .sf-form input, .sf-form select, .sf-input { width: 100%; padding: 0.65rem 0.75rem; border-radius: var(--sf-radius); border: 1px solid var(--sf-line-strong); background: #fff; color: var(--sf-ink); font: inherit; font-size: var(--sf-text-sm); } .sf-form input:focus, .sf-form select:focus, .sf-input:focus { border-color: var(--sf-teal-dark); outline: 2px solid var(--sf-teal-dark); outline-offset: 1px; } .sf-field-error { color: var(--sf-danger); font-size: var(--sf-text-sm); margin: var(--sf-1) 0 0; } .sf-option-static { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-2) var(--sf-3); margin: var(--sf-3) 0 var(--sf-1); } .sf-option-label { color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; min-width: 4.5rem; } .sf-option-value { color: var(--sf-ink); font-weight: 700; } /* Color is a dropdown rather than swatches because a product can be offered in dozens of them. Styled here rather than inherited from .sf-form so the quick-add modal, which has no form around it, matches the product page. */ .sf-option-field { margin: var(--sf-3) 0 var(--sf-4); } .sf-option-field .sf-option-label { display: block; margin-bottom: var(--sf-2); } .sf-select { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius); background: #fff; color: var(--sf-ink); font: inherit; font-size: var(--sf-text-sm); } .sf-select:focus { border-color: var(--sf-teal-dark); outline: 2px solid var(--sf-teal-dark); outline-offset: 1px; } /* Swatch chips (material / color) */ .sf-swatches { display: flex; flex-wrap: wrap; gap: var(--sf-2); margin: var(--sf-2) 0 var(--sf-4); } .sf-swatch { display: inline-flex; align-items: center; gap: var(--sf-2); padding: 0.5rem 0.85rem; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius); background: #fff; color: var(--sf-ink); font: inherit; font-size: var(--sf-text-sm); font-weight: 600; cursor: pointer; transition: border-color var(--sf-dur) var(--sf-ease), background var(--sf-dur) var(--sf-ease); } .sf-swatch:hover { border-color: var(--sf-teal); } .sf-swatch.is-selected { background: var(--sf-teal-dark); border-color: var(--sf-teal-dark); color: #fff; } .sf-swatch-dot { width: 1rem; height: 1rem; border-radius: var(--sf-radius-pill); border: 1px solid rgba(0, 0, 0, 0.2); background: #ccc; } /* Quantity stepper */ .sf-stepper { display: inline-flex; align-items: center; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius); overflow: hidden; background: #fff; } .sf-stepper button { width: 2.25rem; height: 2.25rem; border: none; background: #fff; color: var(--sf-ink); font-size: var(--sf-text-lg); line-height: 1; cursor: pointer; transition: background var(--sf-dur) var(--sf-ease); } .sf-stepper button:hover:not(:disabled) { background: var(--sf-teal-soft); } .sf-stepper button:disabled { opacity: 0.4; cursor: not-allowed; } .sf-stepper input { width: 2.75rem; height: 2.25rem; border: none; border-left: 1px solid var(--sf-line); border-right: 1px solid var(--sf-line); text-align: center; font: inherit; font-size: var(--sf-text-sm); font-weight: 700; color: var(--sf-ink); -moz-appearance: textfield; } .sf-stepper input::-webkit-outer-spin-button, .sf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sf-stepper input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--sf-teal); } /* ===================== Hero / intro ===================== */ .sf-hero { background: var(--sf-hero); border-radius: var(--sf-radius-lg); text-align: center; margin-bottom: var(--sf-6); overflow: hidden; } .sf-hero-logo { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; margin: 0 auto; } .sf-hero:has(h1) { padding: var(--sf-10) var(--sf-6); } .sf-hero h1 { color: var(--sf-ink); margin: 0 0 var(--sf-3); } .sf-hero p { color: #3d5a73; } .sf-intro { text-align: center; color: var(--sf-on-dark); max-width: 48rem; margin: 0 auto var(--sf-8); line-height: 1.65; } .sf-intro p { margin: 0 0 var(--sf-3); } .sf-intro p:last-child { margin-bottom: 0; } /* ===================== Catalog layout ===================== */ .sf-catalog { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sf-6); align-items: start; } @media (max-width: 960px) { .sf-catalog { grid-template-columns: minmax(0, 1fr); } } /* Facet rail */ .sf-facets { position: sticky; top: calc(var(--sf-header-h) + var(--sf-4)); background: #fff; border-radius: var(--sf-radius-lg); padding: var(--sf-5); max-height: calc(100vh - var(--sf-header-h) - var(--sf-8)); overflow-y: auto; } @media (max-width: 960px) { .sf-facets { display: none; } } .sf-facet-group + .sf-facet-group { margin-top: var(--sf-5); padding-top: var(--sf-5); border-top: 1px solid var(--sf-line); } .sf-facet-title { margin: 0 0 var(--sf-3); color: var(--sf-ink); font-size: var(--sf-text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .sf-facet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; } .sf-facet-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-2); padding: 0.4rem 0.5rem; margin: 0 -0.5rem; border-radius: var(--sf-radius-sm); color: var(--sf-ink); font-size: var(--sf-text-sm); font-weight: 600; text-decoration: none; cursor: pointer; background: none; border: none; width: calc(100% + 1rem); text-align: left; transition: background var(--sf-dur) var(--sf-ease); } .sf-facet-link:hover { background: var(--sf-teal-soft); text-decoration: none; } .sf-facet-link.is-active { background: var(--sf-teal-dark); color: #fff; } .sf-facet-count { color: var(--sf-muted); font-size: var(--sf-text-xs); font-weight: 600; } .sf-facet-link.is-active .sf-facet-count { color: rgba(255, 255, 255, 0.85); } /* Toolbar above the grid */ .sf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); flex-wrap: wrap; margin-bottom: var(--sf-4); } .sf-result-count { color: var(--sf-ink); font-weight: 700; font-size: var(--sf-text-sm); margin: 0; } .sf-sort { display: flex; align-items: center; gap: var(--sf-2); margin-left: auto; } .sf-sort label { color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; white-space: nowrap; } .sf-sort select { padding: 0.45rem 0.6rem; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius); font: inherit; font-size: var(--sf-text-sm); color: var(--sf-ink); background: #fff; min-width: 10rem; } /* Mobile filter trigger */ .sf-filter-bar { display: none; gap: var(--sf-2); margin-bottom: var(--sf-4); } @media (max-width: 960px) { .sf-filter-bar { display: flex; } } /* Applied filter chips */ .sf-chips { display: flex; flex-wrap: wrap; gap: var(--sf-2); margin: 0 0 var(--sf-4); padding: 0; list-style: none; } .sf-chip { display: inline-flex; align-items: center; gap: var(--sf-2); padding: 0.35rem 0.5rem 0.35rem 0.75rem; border: 1px solid var(--sf-teal); border-radius: var(--sf-radius-pill); background: #fff; color: var(--sf-ink); font-size: var(--sf-text-sm); font-weight: 600; text-decoration: none; } .sf-chip:hover { background: var(--sf-teal-soft); text-decoration: none; } .sf-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: var(--sf-radius-pill); background: var(--sf-teal-soft); color: var(--sf-teal-dark); font-size: 0.9rem; line-height: 1; } .sf-chip-clear { align-self: center; color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; text-decoration: underline; } /* ===================== Panels ===================== */ .sf-panel { background: var(--sf-panel); border-radius: var(--sf-radius-lg); padding: var(--sf-5); } .sf-panel[hidden] { display: none !important; } .sf-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3) var(--sf-5); margin: 0 0 var(--sf-4); flex-wrap: wrap; } .sf-section-heading { color: var(--sf-ink); font-size: var(--sf-text-2xl); font-weight: 800; letter-spacing: -0.01em; margin: 0; } /* ===================== Product grid / cards ===================== */ .sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sf-5); } @media (max-width: 560px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-3); } } .sf-card { position: relative; background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--sf-dur) var(--sf-ease), transform var(--sf-dur) var(--sf-ease); } .sf-card:hover { box-shadow: var(--sf-shadow-md); transform: translateY(-2px); } .sf-card-media { position: relative; background: #f5f7f9; aspect-ratio: 1; } .sf-card-media-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--sf-3); text-decoration: none; } .sf-card-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .sf-card-body { display: flex; flex-direction: column; gap: var(--sf-1); padding: var(--sf-3); flex: 1 1 auto; } .sf-card-title { display: block; color: var(--sf-ink); font-weight: 700; font-size: var(--sf-text-sm); text-decoration: none; line-height: 1.35; } .sf-card-title:hover { color: var(--sf-teal-dark); text-decoration: none; } .sf-card-price { color: var(--sf-ink); font-weight: 800; font-size: var(--sf-text-base); margin-top: auto; padding-top: var(--sf-1); } .sf-card-actions { padding: 0 var(--sf-3) var(--sf-3); } .sf-quick-btn { width: 100%; appearance: none; border: 1px solid var(--sf-line-strong); background: #fff; color: var(--sf-ink); font: inherit; font-size: var(--sf-text-sm); font-weight: 700; padding: 0.55rem 0.85rem; cursor: pointer; border-radius: var(--sf-radius); transition: background var(--sf-dur) var(--sf-ease), border-color var(--sf-dur) var(--sf-ease), color var(--sf-dur) var(--sf-ease); } .sf-quick-btn:hover { background: var(--sf-teal-dark); border-color: var(--sf-teal-dark); color: #fff; } /* Skeletons */ .sf-skeleton-card { border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; background: #fff; } .sf-skeleton-media { aspect-ratio: 1; } .sf-skeleton-line { height: 0.75rem; margin: var(--sf-3); border-radius: var(--sf-radius-sm); } .sf-skeleton-line.is-short { width: 45%; } .sf-skeleton-media, .sf-skeleton-line { background: linear-gradient(90deg, #eef2f6 25%, #f7fafc 37%, #eef2f6 63%); background-size: 400% 100%; animation: sf-shimmer 1.3s ease infinite; } @keyframes sf-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .sf-grid-swapping { opacity: 0.45; transition: opacity var(--sf-dur) var(--sf-ease); } /* ===================== Search overlay ===================== */ .sf-search-overlay { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; padding: var(--sf-8) var(--sf-4); background: rgba(6, 12, 18, 0.6); backdrop-filter: blur(2px); } .sf-search-panel { width: min(42rem, 100%); max-height: 80vh; display: flex; flex-direction: column; background: #fff; border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-lg); overflow: hidden; } .sf-search-head { display: flex; align-items: center; gap: var(--sf-2); padding: var(--sf-3) var(--sf-4); border-bottom: 1px solid var(--sf-line); } .sf-search-head input { flex: 1 1 auto; border: none; font: inherit; font-size: var(--sf-text-lg); color: var(--sf-ink); padding: var(--sf-2) 0; } .sf-search-head input:focus { outline: none; } .sf-search-results { overflow-y: auto; padding: var(--sf-2); } .sf-search-group-title { margin: var(--sf-2) var(--sf-3) var(--sf-1); color: var(--sf-muted); font-size: var(--sf-text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .sf-search-item { display: flex; align-items: center; gap: var(--sf-3); width: 100%; padding: var(--sf-2) var(--sf-3); border: none; border-radius: var(--sf-radius); background: transparent; color: var(--sf-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .sf-search-item:hover, .sf-search-item.is-active { background: var(--sf-teal-soft); text-decoration: none; } .sf-search-thumb { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: var(--sf-radius-sm); background: #f5f7f9; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sf-search-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .sf-search-item-name { font-weight: 700; font-size: var(--sf-text-sm); } .sf-search-item-meta { color: var(--sf-muted); font-size: var(--sf-text-xs); } .sf-search-empty { padding: var(--sf-6); text-align: center; color: var(--sf-muted); font-size: var(--sf-text-sm); } .sf-search-foot { padding: var(--sf-3) var(--sf-4); border-top: 1px solid var(--sf-line); font-size: var(--sf-text-xs); color: var(--sf-muted); } /* ===================== Drawers (cart + mobile nav) ===================== */ .sf-overlay { position: fixed; inset: 0; z-index: 140; background: rgba(6, 12, 18, 0.55); } .sf-drawer { position: fixed; top: 0; bottom: 0; z-index: 150; width: min(26rem, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: var(--sf-shadow-lg); } .sf-drawer-right { right: 0; } .sf-drawer-left { left: 0; width: min(20rem, 85%); } .sf-drawer-anim { transition: transform var(--sf-dur) var(--sf-ease); } .sf-drawer-shown { transform: translate(0, 0); } .sf-drawer-left-hidden { transform: translateX(-100%); } .sf-drawer-right-hidden { transform: translateX(100%); } .sf-sheet-hidden { transform: translateY(100%); } .sf-drawer-head { display: flex; align-items: center; gap: var(--sf-3); padding: var(--sf-4) var(--sf-5); border-bottom: 1px solid var(--sf-line); } .sf-drawer-title { margin: 0; color: var(--sf-ink); font-size: var(--sf-text-xl); font-weight: 800; } .sf-drawer-count { margin-left: auto; color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; } .sf-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sf-4) var(--sf-5); } .sf-drawer-foot { border-top: 1px solid var(--sf-line); padding: var(--sf-4) var(--sf-5); display: flex; flex-direction: column; gap: var(--sf-3); } .sf-drawer-nav { display: flex; flex-direction: column; gap: var(--sf-1); } .sf-drawer-nav a { padding: 0.7rem var(--sf-3); border-radius: var(--sf-radius); color: var(--sf-ink); font-weight: 700; font-size: var(--sf-text-base); text-decoration: none; } .sf-drawer-nav a:hover { background: var(--sf-teal-soft); text-decoration: none; } .sf-drawer-nav-heading { margin: var(--sf-4) var(--sf-3) var(--sf-1); color: var(--sf-muted); font-size: var(--sf-text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* Cart lines */ .sf-line { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sf-3); padding: var(--sf-4) 0; border-bottom: 1px solid var(--sf-line); } .sf-line:first-child { padding-top: 0; } .sf-line:last-child { border-bottom: none; } .sf-line-thumb { width: 4.5rem; height: 4.5rem; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: #f5f7f9; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sf-line-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .sf-line-name { display: block; color: var(--sf-ink); font-weight: 700; font-size: var(--sf-text-sm); text-decoration: none; } .sf-line-name:hover { color: var(--sf-teal-dark); } .sf-line-meta { color: var(--sf-muted); font-size: var(--sf-text-xs); margin: 0.15rem 0 var(--sf-2); } .sf-line-controls { display: flex; align-items: center; gap: var(--sf-3); flex-wrap: wrap; } .sf-line-price { margin-left: auto; color: var(--sf-ink); font-weight: 800; font-size: var(--sf-text-sm); } .sf-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-3); color: var(--sf-ink); font-size: var(--sf-text-sm); } .sf-summary-row.is-total { font-size: var(--sf-text-lg); font-weight: 800; padding-top: var(--sf-3); border-top: 1px solid var(--sf-line); } .sf-summary-note { color: var(--sf-muted); font-size: var(--sf-text-xs); margin: 0; } .sf-drawer-empty { text-align: center; padding: var(--sf-10) var(--sf-4); color: var(--sf-muted); } .sf-drawer-empty p { margin: 0 0 var(--sf-4); } /* ===================== Bottom sheet (mobile filters) ===================== */ .sf-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; max-height: 85vh; display: flex; flex-direction: column; background: #fff; border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0; box-shadow: var(--sf-shadow-lg); } .sf-sheet-head { display: flex; align-items: center; gap: var(--sf-3); padding: var(--sf-4) var(--sf-5); border-bottom: 1px solid var(--sf-line); } .sf-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sf-4) var(--sf-5); } .sf-sheet-foot { border-top: 1px solid var(--sf-line); padding: var(--sf-4) var(--sf-5); } .sf-sheet-grip { width: 2.5rem; height: 0.25rem; border-radius: var(--sf-radius-pill); background: var(--sf-line-strong); margin: var(--sf-2) auto 0; } /* ===================== Modal ===================== */ .sf-modal { position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center; padding: var(--sf-4); } .sf-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 12, 18, 0.6); } .sf-modal-dialog { position: relative; background: #fff; color: var(--sf-ink); width: min(27rem, 100%); max-height: 90vh; overflow-y: auto; border-radius: var(--sf-radius-lg); padding: var(--sf-5); box-shadow: var(--sf-shadow-lg); } .sf-modal-dialog h2 { margin: 0 var(--sf-6) var(--sf-2) 0; font-size: var(--sf-text-lg); color: var(--sf-ink); } .sf-modal-close { position: absolute; top: var(--sf-2); right: var(--sf-2); width: 2.25rem; height: 2.25rem; border: none; background: transparent; font-size: var(--sf-text-xl); line-height: 1; cursor: pointer; color: var(--sf-muted); border-radius: var(--sf-radius); } .sf-modal-close:hover { background: var(--sf-teal-soft); color: var(--sf-ink); } .sf-modal-media { width: 100%; aspect-ratio: 16 / 9; background: #f5f7f9; border-radius: var(--sf-radius); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: var(--sf-3); } .sf-modal-media img { max-width: 100%; max-height: 100%; object-fit: contain; } /* ===================== Breadcrumb ===================== */ .sf-breadcrumb { color: var(--sf-on-dark-muted); font-size: var(--sf-text-sm); margin: 0 0 var(--sf-4); } .sf-breadcrumb a { color: var(--sf-teal); } .sf-breadcrumb span { margin: 0 0.35rem; } /* ===================== PDP ===================== */ .sf-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sf-8); align-items: start; background: #fff; border-radius: var(--sf-radius-lg); padding: var(--sf-6); } @media (max-width: 860px) { .sf-pdp { grid-template-columns: 1fr; gap: var(--sf-5); padding: var(--sf-4); } } .sf-gallery { position: sticky; top: calc(var(--sf-header-h) + var(--sf-4)); } @media (max-width: 860px) { .sf-gallery { position: static; } } .sf-gallery-main { position: relative; width: 100%; aspect-ratio: 1; background: #f5f7f9; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; padding: 0; } .sf-gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; padding: var(--sf-4); } .sf-gallery-zoom { position: absolute; right: var(--sf-3); bottom: var(--sf-3); width: 2.5rem; height: 2.5rem; border-radius: var(--sf-radius-pill); background: rgba(255, 255, 255, 0.92); box-shadow: var(--sf-shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--sf-ink); pointer-events: none; } .sf-gallery-thumbs { display: flex; gap: var(--sf-2); margin-top: var(--sf-3); flex-wrap: wrap; } .sf-gallery-thumb { width: 4.5rem; height: 4.5rem; padding: var(--sf-1); border: 2px solid var(--sf-line); border-radius: var(--sf-radius); background: #f5f7f9; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; } .sf-gallery-thumb.is-active { border-color: var(--sf-teal); } .sf-gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .sf-pdp-placeholder { width: 100%; aspect-ratio: 1; background: #f5f7f9; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); } .sf-buybox { position: sticky; top: calc(var(--sf-header-h) + var(--sf-4)); } @media (max-width: 860px) { .sf-buybox { position: static; } } .sf-pdp-info h1 { color: var(--sf-ink); font-size: var(--sf-text-3xl); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 var(--sf-2); line-height: 1.15; } .sf-badge-policy { display: inline-block; background: var(--sf-teal-soft); color: var(--sf-teal-dark); font-size: var(--sf-text-xs); font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--sf-radius-pill); margin-bottom: var(--sf-2); } .sf-pdp-price { color: var(--sf-ink); font-size: var(--sf-text-2xl); font-weight: 800; margin: var(--sf-1) 0 var(--sf-3); } .sf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-2); margin: 0 0 var(--sf-3); } .sf-tags-label { color: var(--sf-muted); font-size: var(--sf-text-sm); } .sf-tag { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius-pill); color: var(--sf-ink); font-size: var(--sf-text-xs); font-weight: 600; background: #fff; text-decoration: none; } .sf-tag:hover { background: var(--sf-teal-soft); border-color: var(--sf-teal); text-decoration: none; } .sf-short-desc { color: var(--sf-ink); margin: 0 0 var(--sf-4); line-height: 1.6; } .sf-desc { color: var(--sf-ink-soft); line-height: 1.65; } .sf-desc a, .sf-design-link a { color: var(--sf-teal-dark); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } .sf-design-link { font-size: var(--sf-text-sm); margin: 0 0 var(--sf-4); color: var(--sf-ink-soft); } .sf-pdp-actions { margin-top: var(--sf-4); } .sf-pdp-qty-row { display: flex; align-items: center; gap: var(--sf-3); margin: var(--sf-4) 0; } .sf-pdp-qty-row label { margin: 0; color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; } /* Trust row */ .sf-trust { display: flex; flex-wrap: wrap; gap: var(--sf-3) var(--sf-5); margin-top: var(--sf-4); padding-top: var(--sf-4); border-top: 1px solid var(--sf-line); list-style: none; padding-left: 0; } .sf-trust li { display: flex; align-items: center; gap: var(--sf-2); color: var(--sf-muted); font-size: var(--sf-text-xs); font-weight: 600; } .sf-trust svg { color: var(--sf-teal); flex: 0 0 auto; } /* Accordion */ .sf-accordion { border-top: 1px solid var(--sf-line); margin-top: var(--sf-6); } .sf-accordion-item { border-bottom: 1px solid var(--sf-line); } .sf-accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); width: 100%; padding: var(--sf-4) 0; background: none; border: none; color: var(--sf-ink); font: inherit; font-size: var(--sf-text-base); font-weight: 700; text-align: left; cursor: pointer; } .sf-accordion-icon { flex: 0 0 auto; transition: transform var(--sf-dur) var(--sf-ease); } .sf-accordion-trigger[aria-expanded="true"] .sf-accordion-icon { transform: rotate(180deg); } .sf-accordion-panel { padding: 0 0 var(--sf-4); } /* Mobile sticky add-to-cart */ .sf-pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; gap: var(--sf-3); padding: var(--sf-3) var(--sf-4); background: #fff; border-top: 1px solid var(--sf-line); box-shadow: 0 -6px 18px rgba(10, 25, 40, 0.12); } .sf-pdp-sticky-price { color: var(--sf-ink); font-weight: 800; font-size: var(--sf-text-base); white-space: nowrap; } .sf-pdp-sticky .sf-btn { flex: 1 1 auto; } @media (max-width: 860px) { .sf-pdp-sticky.is-visible { display: flex; } body:has(.sf-pdp-sticky.is-visible) .sf-main { padding-bottom: 6rem; } } /* Related products */ .sf-related { margin-top: var(--sf-8); } .sf-related-title { color: var(--sf-on-dark); font-size: var(--sf-text-xl); font-weight: 800; margin: 0 0 var(--sf-4); } /* ===================== Cart page / checkout ===================== */ .sf-panel-page { background: #fff; border-radius: var(--sf-radius-lg); padding: var(--sf-6); color: var(--sf-ink); } .sf-page-title { color: var(--sf-ink); font-size: var(--sf-text-3xl); font-weight: 800; letter-spacing: -0.015em; margin: 0; } .sf-cart-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-4); flex-wrap: wrap; margin-bottom: var(--sf-5); } .sf-cart-continue { color: var(--sf-teal-dark); font-weight: 600; } .sf-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sf-6); align-items: start; } @media (max-width: 860px) { .sf-cart-layout { grid-template-columns: minmax(0, 1fr); } } .sf-cart-lines { list-style: none; margin: 0; padding: 0; } .sf-summary { background: #f7fafc; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: var(--sf-5); display: flex; flex-direction: column; gap: var(--sf-3); position: sticky; top: calc(var(--sf-header-h) + var(--sf-4)); } .sf-summary-title { margin: 0; color: var(--sf-ink); font-size: var(--sf-text-lg); font-weight: 800; } .sf-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sf-6); align-items: start; } @media (max-width: 860px) { .sf-checkout-layout { grid-template-columns: minmax(0, 1fr); } } .sf-checkout-steps { list-style: none; margin: 0 0 var(--sf-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sf-2) var(--sf-4); color: var(--sf-muted); font-size: var(--sf-text-sm); font-weight: 600; } .sf-checkout-steps li { display: flex; align-items: center; gap: var(--sf-2); } .sf-checkout-steps .is-current { color: var(--sf-ink); } .sf-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--sf-radius-pill); background: var(--sf-line); color: var(--sf-ink); font-size: var(--sf-text-xs); font-weight: 800; } .sf-checkout-steps .is-current .sf-step-num { background: var(--sf-teal-dark); color: #fff; } .sf-form-section { margin: var(--sf-6) 0 var(--sf-1); color: var(--sf-ink); font-size: var(--sf-text-base); font-weight: 800; } .sf-form-section:first-of-type { margin-top: 0; } .sf-form-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sf-3); } @media (max-width: 620px) { .sf-form-row { grid-template-columns: minmax(0, 1fr); } } /* ---- Live shipping rates ---- */ .sf-rates { display: flex; flex-direction: column; gap: var(--sf-2); } .sf-rate { display: flex; align-items: center; gap: var(--sf-3); margin: 0; padding: var(--sf-3) var(--sf-4); border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius); background: #fff; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .sf-rate:hover { border-color: var(--sf-teal); } .sf-rate.is-selected { border-color: var(--sf-teal-dark); background: var(--sf-teal-soft); } .sf-rate input[type="radio"] { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--sf-teal-dark); } .sf-rate-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .sf-rate-name { color: var(--sf-ink); font-size: var(--sf-text-sm); font-weight: 700; } .sf-rate-eta { color: var(--sf-muted); font-size: var(--sf-text-xs); } .sf-rate-price { color: var(--sf-ink); font-size: var(--sf-text-sm); font-weight: 800; white-space: nowrap; } .sf-rate-loading { display: flex; align-items: center; gap: var(--sf-2); color: var(--sf-muted); font-size: var(--sf-text-sm); margin: 0; } .sf-spinner { width: 1rem; height: 1rem; border: 2px solid var(--sf-line-strong); border-top-color: var(--sf-teal-dark); border-radius: 50%; animation: sf-spin .7s linear infinite; flex: 0 0 auto; } @keyframes sf-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sf-spinner { animation-duration: 2s; } } .sf-address-notices { margin: 0; padding: var(--sf-3) var(--sf-4) var(--sf-3) calc(var(--sf-4) + 1rem); border-radius: var(--sf-radius); background: var(--sf-teal-soft); color: var(--sf-ink-soft); font-size: var(--sf-text-xs); line-height: 1.5; } /* ===================== Content pages ===================== */ .sf-content-page { background: #fff; border-radius: var(--sf-radius-lg); padding: var(--sf-8); color: var(--sf-ink-soft); max-width: 56rem; margin: 0 auto var(--sf-8); line-height: 1.7; } .sf-content-page h1, .sf-content-page h2 { color: var(--sf-ink); font-weight: 800; margin: var(--sf-8) 0 var(--sf-3); line-height: 1.25; } .sf-content-page h1 { font-size: var(--sf-text-3xl); } .sf-content-page h2 { font-size: var(--sf-text-xl); } .sf-content-page h1:first-child, .sf-content-page h2:first-child { margin-top: 0; } .sf-content-page p { margin: 0 0 var(--sf-4); } .sf-content-page a:not([class]) { color: var(--sf-teal-dark); text-decoration: underline; } .sf-content-page a.sf-btn { color: #fff; text-decoration: none; } .sf-content-page a.sf-btn:hover { color: #fff; text-decoration: none; } /* ===================== Reduced motion ===================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .sf-card:hover { transform: none; } }