/* ==================================================================
BAGSLW storefront — stylesheet
PALETTE — light-luxury, in the manner of the big houses' own sites:
a near-white canvas, near-black type, and ONE restrained metallic
accent. The old scheme used three competing brand colours (forest
green + signal red + gold) at once, which read as festive rather than
premium.
The token NAMES below are kept from the previous scheme so that the
~600 lines of rules referencing them stay untouched; only the values
and the header changed. Semantically: ink-* = dark neutrals,
accent-* = the metallic accent, warm-* = the cream canvas.
================================================================== */
/* ------------------------------------------------------------ tokens */
:root {
--green-900: #14161a;
--green-800: #1f2126;
--green-700: #3a3d44;
--green-100: #f2f0ec;
--red-600: #8a6d3b;
--red-700: #6f5629;
--red-100: #f6f1e6;
--gold-500: #c2a878;
--gold-400: #d4bd94;
--gold-100: #faf6ee;
--ink: #17181b;
--body: #4a4d52;
--muted: #83868c;
--line: #e6e3dd;
--line-soft: #f0ede7;
--bg: #ffffff;
--bg-cream: #faf8f4;
--bg-sand: #f4f1ea;
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 14px;
--shadow-sm: 0 1px 2px rgba(23, 24, 27, .05), 0 1px 3px rgba(23, 24, 27, .04);
--shadow: 0 4px 18px rgba(23, 24, 27, .07);
--shadow-lg: 0 18px 48px rgba(23, 24, 27, .12);
--font-display: Georgia, 'Times New Roman', 'Songti SC', serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
--wrap: 1280px;
--header-h: 68px;
/* ---------------------------------------------------------------- glyphs
Icons for the floating buttons (see "floating actions" below). Kept as
data URIs here so they are downloaded ONCE instead of being repeated in
the markup of all 69,732 pages. `<` `>` and `#` are percent-encoded; the
path data itself needs no escaping. */
--glyph-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413'/%3E%3C/svg%3E");
--glyph-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 14 6-6 6 6'/%3E%3C/svg%3E");
--glyph-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
--glyph-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1'/%3E%3C/g%3E%3C/svg%3E");
--glyph-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M21.5 3.5 2.8 10.4l6.3 2.3 2.3 6.3z'/%3E%3Cpath d='m9.1 12.7 4.7-4.7'/%3E%3C/g%3E%3C/svg%3E");
}
/* ------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--body);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.25; }
h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
h2 { font-family: var(--font-display); font-weight: 400; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 880px; }
.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;
}
/* ------------------------------------------------------------ buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 22px; border: 1px solid transparent; border-radius: var(--radius-sm);
font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
transition: background .18s, color .18s, border-color .18s, transform .18s;
white-space: nowrap;
}
.btn-primary { background: var(--red-600); color: #fff; }
.btn-primary:hover { background: var(--red-700); }
.btn-dark { background: var(--green-800); color: #fff; }
.btn-dark:hover { background: var(--green-900); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--green-800); color: var(--green-800); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 30px; font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
/* ------------------------------------------------------------- topbar */
.topbar {
background: var(--green-900); color: rgba(255, 255, 255, .86);
font-size: 12px; letter-spacing: .02em;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 16px; }
.topbar strong { color: var(--gold-400); font-weight: 600; letter-spacing: .08em; }
.topbar .topbar-links { display: flex; gap: 18px; }
.topbar a:hover { color: #fff; }
/* ------------------------------------------------------------- header */
.header {
position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .96);
backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; gap: 26px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo img { height: 40px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: 8px; flex: 1 1 auto; }
.nav a {
font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: var(--green-800); padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a.is-active { border-bottom-color: var(--red-600); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.search-box { position: relative; flex: 0 1 300px; }
.search-box input {
width: 100%; padding: 10px 38px 10px 14px; font-size: 14px;
border: 1px solid var(--line); border-radius: 100px; background: var(--bg-cream);
color: var(--ink);
}
.search-box input:focus { outline: none; border-color: var(--green-700); background: #fff; }
.search-box button {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
color: var(--muted); display: grid; place-items: center;
}
.search-box button:hover { color: var(--red-600); }
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* --------------------------------------------------------- hero (home) */
.hero {
position: relative; background: var(--green-900); color: #fff; overflow: hidden;
}
/* The hero grid does its own centring and padding: putting .wrap on the same
element collapsed the side padding on phones (measured left:0 at 375px). */
.hero-inner {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
align-items: center; gap: 40px;
width: 100%; max-width: var(--wrap); margin: 0 auto;
padding: 74px 20px 78px; position: relative; z-index: 2;
}
.hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.1; margin-bottom: 18px; }
.hero p { color: rgba(255, 255, 255, .82); font-size: 16px; max-width: 46ch; }
.hero .eyebrow {
display: inline-block; margin-bottom: 18px; font-size: 12px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase; color: var(--gold-400);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-stats { display: flex; gap: 34px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.hero-stats b { display: block; font-family: var(--font-display); font-size: 26px; color: #fff; font-weight: 400; }
.hero-stats span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.hero-art { position: relative; width: 100%; max-width: 400px; margin-left: auto; }
.hero-art::after {
content: ''; position: absolute; inset: -26px -26px auto auto; width: 190px; height: 190px;
border: 1px solid rgba(201, 164, 92, .5); border-radius: 50%; z-index: 0;
}
/* Brand card — the hero visual never depends on an external photo, so the
first screen is always intact even if a supplier image is gone. */
.hero-card {
position: relative; z-index: 2; width: 100%;
background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
padding: 30px 30px 28px; text-align: center;
}
/* The supplied emblem PNG has no alpha channel (a red disc on an opaque white
square), so it is presented as designed rather than force-cropped into a
circle. Swap in a transparent PNG/SVG and the disc can bleed to the edge. */
.hero-badge {
width: 128px; height: 128px; margin: 0 auto 18px; display: block;
}
.hero-card-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--muted); margin-bottom: 6px;
}
.hero-card-title {
font-family: var(--font-display); font-size: 32px; letter-spacing: .18em; color: var(--green-800);
}
.hero-card-rule { width: 46px; height: 2px; background: var(--gold-500); margin: 14px auto 20px; }
.hero-card-stats {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px;
margin: 0 0 24px; padding: 18px 0; border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.hero-card-stats > div { min-width: 0; }
.hero-card-stats dt {
font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.hero-card-stats dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.hero-thumb {
position: absolute; left: -26px; bottom: -26px; z-index: 3; width: 132px; height: 132px;
border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow-lg);
background: var(--bg-sand);
}
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg {
position: absolute; inset: 0; z-index: 1; opacity: .16;
background:
radial-gradient(circle at 82% 18%, rgba(201, 164, 92, .55), transparent 42%),
radial-gradient(circle at 8% 88%, rgba(200, 16, 46, .45), transparent 46%);
}
/* -------------------------------------------------------- section head */
.section { padding: 62px 0; }
.section-alt { background: var(--bg-cream); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.section-head h2 { font-size: clamp(24px, 2.6vw, 32px); }
.section-head p { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 62ch; }
.section-head .link { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green-800); border-bottom: 1px solid var(--gold-500); padding-bottom: 2px; white-space: nowrap; }
.section-head .link:hover { color: var(--red-600); border-bottom-color: var(--red-600); }
/* Buttons sitting opposite a section title (e.g. "view all in the shop"). */
.section-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Brand pages end with a route into the paginated shop listing. */
.brand-more { margin: 40px 0 8px; text-align: center; }
/* --------------------------------------------------------- brand tiles */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 16px; }
.brand-tile {
position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 20px; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.brand-tile:hover { border-color: var(--gold-500); box-shadow: var(--shadow); transform: translateY(-2px); }
.brand-tile .bt-name { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.brand-tile .bt-meta { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: .04em; }
.brand-tile .bt-rule { width: 34px; height: 2px; background: var(--red-600); margin: 12px 0 10px; }
.brand-tile .bt-price { font-size: 13px; color: var(--green-800); font-weight: 600; }
.brand-tile .bt-thumb {
position: absolute; right: -14px; bottom: -14px; width: 92px; height: 92px;
border-radius: 50%; object-fit: cover; opacity: .9;
border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
/* Divider between the fashion houses and the product-type groups ("By category").
Brands always come first, so this label is the switch between the two grids. */
.brand-subhead {
display: flex; align-items: center; gap: 14px;
margin: 40px 0 18px; font-family: var(--font-body);
font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--muted);
}
.brand-subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* -------------------------------------------------------- product grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 22px 18px; }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; }
.card-body { flex: 1 1 auto; }
/* The media box owns its own stacking context: badges and the quick-action bar
are positioned against it, not against the whole card. */
.card-media {
position: relative; display: block; background: var(--bg-sand); border-radius: var(--radius);
overflow: hidden; aspect-ratio: 1 / 1;
}
.card-media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s cubic-bezier(.2, .7, .3, 1), opacity .3s;
}
/* Placeholder shown when a supplier photo has been removed from the CDN. */
.card-media::after,
.gallery-main::after,
.thumbs button::after {
content: attr(data-ph);
position: absolute; inset: 0; display: none; place-items: center;
background: linear-gradient(145deg, var(--bg-sand), #ece7dc);
color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
padding: 12px; text-align: center;
}
.gallery-main::after { font-size: 13px; }
.thumbs button::after { content: ''; }
.card-media.is-broken::after,
.gallery-main.is-broken::after { display: grid; }
.card-media.is-broken img,
.gallery-main.is-broken img { opacity: 0; }
.thumbs button { position: relative; }
.card:hover .card-media img { transform: scale(1.05); }
.card-media img.alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-media img.alt { opacity: 1; }
.card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge {
display: inline-block; padding: 4px 9px; border-radius: 100px; font-size: 11px;
font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
background: var(--green-900); color: #fff;
}
.badge-sale { background: var(--red-600); }
.badge-gold { background: var(--gold-500); color: #3a2c0d; }
.badge-outline { background: rgba(255, 255, 255, .92); color: var(--green-800); }
.card-quick {
/* Overlays the photo on hover-capable pointers. The offset equals the media
height (one line, mobile first): 300px base, 219px at 560px, 165px at 360px. */
position: absolute; left: 10px; right: 10px; top: 219px; z-index: 2;
display: flex; gap: 8px; opacity: 0; transform: translateY(8px);
transition: opacity .25s, transform .25s;
}
.card:hover .card-quick { opacity: 1; transform: none; }
.card-quick .btn { flex: 1; padding: 9px 12px; font-size: 11px; }
.card-body { padding: 12px 2px 0; }
.card-brand {
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); margin-bottom: 5px;
}
.card-title { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; margin: 0 0 8px; }
.card-title a:hover { color: var(--red-600); }
.card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-now { font-size: 16px; font-weight: 700; color: var(--red-600); }
.price-was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.price-ask {
font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--green-800);
background: var(--green-100); padding: 3px 10px; border-radius: 100px;
}
.card-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
/* -------------------------------------------------------- filter bar */
.shop-layout { display: grid; grid-template-columns: 246px 1fr; gap: 34px; align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); }
.filter-group { border-bottom: 1px solid var(--line); padding: 18px 0; }
.filter-group:first-child { padding-top: 0; }
.filter-group h3 {
font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--green-800); margin-bottom: 12px;
}
.filter-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.filter-list.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
/* 39 brands need their own scroll area, or the sidebar becomes unusable. */
.filter-list-scroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); cursor: pointer; }
.check input { accent-color: var(--green-800); width: 15px; height: 15px; flex: 0 0 auto; }
.check:hover { color: var(--ink); }
.check .count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input {
width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
font-size: 13px; color: var(--ink);
}
.price-inputs span { color: var(--muted); }
.shop-toolbar {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.shop-count { font-size: 14px; color: var(--body); }
.shop-count b { color: var(--ink); }
/* Shown while the rest of the catalogue is still streaming in, so a partial
search result is never mistaken for the final one. */
.count-pending { color: var(--muted); font-size: 12.5px; font-style: italic; }
.toolbar-right { display: flex; align-items: center; gap: 12px; }
.select {
padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: #fff; font-size: 13.5px; color: var(--ink);
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
background: var(--green-100); color: var(--green-800); border-radius: 100px;
font-size: 12.5px; font-weight: 600;
}
.chip button { border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; padding: 0; opacity: .7; }
.chip button:hover { opacity: 1; color: var(--red-600); }
.filter-clear { font-size: 12.5px; color: var(--red-600); background: none; border: 0; text-decoration: underline; }
.filters-toggle { display: none; }
/* --------------------------------------------------------- pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 46px 0 0; flex-wrap: wrap; }
.pager a, .pager span {
min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center;
justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm);
font-size: 13.5px; color: var(--ink); background: #fff;
}
.pager a:hover { border-color: var(--green-800); color: var(--green-800); }
.pager .is-current { background: var(--green-900); border-color: var(--green-900); color: #fff; font-weight: 700; }
.pager .is-disabled { opacity: .4; }
/* ------------------------------------------------------ product detail */
.breadcrumb { font-size: 12.5px; color: var(--muted); padding: 18px 0 0; }
.breadcrumb a:hover { color: var(--red-600); }
.breadcrumb span { margin: 0 7px; opacity: .5; }
.pd { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 46px; padding: 26px 0 10px; align-items: start; }
.gallery { display: grid; gap: 10px; }
.gallery-main {
position: relative; background: var(--bg-sand); border-radius: var(--radius); overflow: hidden;
aspect-ratio: 1 / 1;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-nav {
position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
border: 0; border-radius: 50%; background: rgba(255, 255, 255, .93); color: var(--ink);
display: grid; place-items: center; box-shadow: var(--shadow-sm); z-index: 3;
}
.gallery-nav:hover { background: #fff; color: var(--red-600); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-counter {
position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 4px 11px;
background: rgba(20, 23, 26, .72); color: #fff; border-radius: 100px; font-size: 12px;
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.thumbs button {
padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
background: var(--bg-sand); aspect-ratio: 1 / 1;
}
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button.is-current { border-color: var(--red-600); box-shadow: 0 0 0 1px var(--red-600); }
.pd-info h1 { font-size: clamp(24px, 2.7vw, 34px); margin: 6px 0 14px; }
.pd-brandline { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-600); }
/* The shared headline is the same on every product, so the per-item descriptor
(brand, series, type, size) is what a customer actually reads. */
.pd-descriptor {
font-family: var(--font-display); font-size: 19px; color: var(--green-800);
margin: 0 0 6px; line-height: 1.4;
}
/* Seller's original listing copy (often Chinese) — reference material, kept
collapsed so it never competes with the English information. */
.source-note {
margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--bg-cream); padding: 0 16px;
}
.source-note summary {
cursor: pointer; padding: 13px 0; font-size: 13px; font-weight: 600;
color: var(--green-800); letter-spacing: .02em;
}
.source-note summary:hover { color: var(--red-600); }
.source-body {
margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; color: var(--body);
white-space: pre-wrap; word-break: break-word;
}
.source-hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); font-style: italic; }
.pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.pd-price .now { font-family: var(--font-display); font-size: 34px; color: var(--ink); }
.pd-price .was { font-size: 17px; color: var(--muted); text-decoration: line-through; }
.pd-price .save { font-size: 12.5px; font-weight: 700; color: var(--red-600); background: var(--red-100); padding: 4px 10px; border-radius: 100px; }
.pd-note { font-size: 12.5px; color: var(--muted); }
.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 6px; }
.pd-actions .btn { flex: 1 1 190px; }
.spec { border-top: 1px solid var(--line); margin-top: 26px; }
.spec-row { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.spec-row dt { color: var(--muted); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.spec-row dd { margin: 0; color: var(--ink); }
.spec-row .swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 100px;
font-size: 12px; color: var(--body); background: var(--bg-cream);
}
.pd-desc { margin-top: 24px; font-size: 14.5px; line-height: 1.75; color: var(--body); }
.pd-desc p { margin: 0 0 1em; }
/* ------------------------------------------------------ trust strip */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 18px; }
.trust-item { display: flex; gap: 13px; align-items: flex-start; }
.trust-item svg { flex: 0 0 auto; color: var(--green-800); margin-top: 2px; }
.trust-item b { display: block; color: var(--ink); font-size: 14px; }
.trust-item span { font-size: 13px; color: var(--muted); }
/* ---------------------------------------------------------- CTA band */
.cta-band {
background: var(--green-900); color: #fff; border-radius: var(--radius-lg);
padding: 44px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center;
}
.cta-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, .78); margin: 0; }
.cta-band .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cta-band .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.cta-band .btn-ghost:hover { border-color: #fff; }
/* ------------------------------------------------------------- prose */
.prose { font-size: 15px; line-height: 1.78; color: var(--body); }
.prose h2 { margin: 34px 0 12px; font-size: 24px; }
.prose h3 { margin: 26px 0 10px; font-size: 17px; color: var(--green-800); }
.prose ul { margin: 0 0 18px; padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.prose ul li::before {
content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px;
border-radius: 50%; background: var(--gold-500);
}
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 11px 13px; text-align: left; }
.prose th { background: var(--bg-cream); color: var(--ink); font-weight: 600; }
.prose a { color: var(--red-600); border-bottom: 1px solid rgba(200, 16, 46, .3); }
/* ------------------------------------------------------------ footer */
.footer { background: var(--green-900); color: rgba(255, 255, 255, .74); margin-top: 70px; font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; padding: 54px 0 40px; }
.footer h4 { color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer a:hover { color: #fff; }
.footer li { margin-bottom: 9px; }
.footer .f-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer .f-brand img { height: 44px; width: 44px; border-radius: 50%; }
.footer .f-brand span { font-family: var(--font-display); font-size: 22px; color: #fff; letter-spacing: .04em; }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .14); padding: 20px 0; display: flex;
justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .55);
}
.footer .f-contact li { display: flex; gap: 9px; }
.footer .f-contact svg { flex: 0 0 auto; margin-top: 3px; opacity: .7; }
/* ----------------------------------------------------------- helpers */
.notice {
background: var(--gold-100); border: 1px solid var(--gold-400); border-radius: var(--radius);
padding: 14px 18px; font-size: 13.5px; color: #6b5316; margin: 0 0 22px;
}
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty h3 { margin-bottom: 8px; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.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;
}
/* --------------------------------------------------- floating actions
Two round buttons pinned bottom-right on every page: WhatsApp (opens a
small contact card) and back-to-top.
WhatsApp keeps its official green — customers recognise the button by
colour alone, so it is the one place the ink/brass palette steps aside.
The card itself uses the site's own ink + cream tokens so it still reads
as part of the shop rather than a third-party embed. */
.fab-stack {
position: fixed; z-index: 70;
right: 22px; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
pointer-events: none;
}
.fab-stack > * { pointer-events: auto; }
.fab {
width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; text-decoration: none;
box-shadow: 0 6px 20px rgba(23, 24, 27, .18);
transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease, background-color .18s ease;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 24, 27, .24); }
.fab:active { transform: translateY(0); }
.fab:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.fab .ic { display: block; }
.fab-wa { background: #25d366; color: #fff; }
.fab-wa:hover { background: #1fb959; }
.fab-top { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.fab-top:hover { background: var(--bg-cream); color: var(--red-700); }
/* Hidden until the visitor has scrolled; opacity (not display) so it can fade,
and pointer-events/tabindex are dropped so it can never be tabbed to. */
.fab-top.is-off { opacity: 0; pointer-events: none; }
/* --- glyphs -------------------------------------------------------------
The five icons live here, not in the page markup. The official WhatsApp
path alone is 1.7 KB; inlining the sprite in every page cost 264 MB of
HTML and ~1 KB gzipped per page VIEW, against a 4 KB page. In this file a
visitor fetches them once and every page after that is free.
They are drawn as CSS masks so each glyph still takes its colour from
`currentColor`, exactly like the inline SVGs elsewhere on the site. */
.fab-wa::before,
.wa-avatar::before,
.fab-top::before,
.wa-close::before,
.wa-copy::before,
.wa-send::before {
content: ""; display: block; background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.fab-wa::before { width: 30px; height: 30px; -webkit-mask-image: var(--glyph-wa); mask-image: var(--glyph-wa); }
.wa-avatar::before { width: 26px; height: 26px; -webkit-mask-image: var(--glyph-wa); mask-image: var(--glyph-wa); }
.fab-top::before { width: 22px; height: 22px; -webkit-mask-image: var(--glyph-up); mask-image: var(--glyph-up); }
.wa-close::before { width: 16px; height: 16px; -webkit-mask-image: var(--glyph-x); mask-image: var(--glyph-x); }
.wa-copy::before { width: 15px; height: 15px; -webkit-mask-image: var(--glyph-copy); mask-image: var(--glyph-copy); }
.wa-send::before { width: 20px; height: 20px; -webkit-mask-image: var(--glyph-send); mask-image: var(--glyph-send); }
/* --- the WhatsApp contact card --- */
.wa-widget { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
/* Open state: the card takes the button's place (that is how the reference
artwork behaves — the green circle is nowhere to be seen once the card is
out), and the × in the card header is the way back. */
.wa-widget.is-open .fab-wa { display: none; }
/* …and while the back-to-top button is still faded out (page not scrolled),
it must not hold its slot open either, or the card floats 60px off the
bottom edge with nothing underneath it. */
.wa-widget.is-open ~ .fab-top.is-off { display: none; }
.wa-card {
width: 320px; max-width: calc(100vw - 40px);
background: #fff; border: 1px solid var(--line-soft); border-radius: 12px;
overflow: hidden; box-shadow: 0 18px 48px rgba(23, 24, 27, .22);
}
.wa-card[hidden] { display: none; }
.wa-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--green-900); color: #fff;
padding: 11px 12px 11px 15px; font-size: 15px; font-weight: 600; letter-spacing: .01em;
}
.wa-close {
background: none; border: 0; padding: 4px; margin: -4px; cursor: pointer;
color: #fff; opacity: .7; display: inline-flex;
}
.wa-close:hover { opacity: 1; }
.wa-body { display: flex; align-items: center; gap: 12px; padding: 14px 15px; }
.wa-avatar {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
background: #25d366; color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.wa-text { flex: 1 1 auto; min-width: 0; }
.wa-text b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.35; }
.wa-num { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 13.5px; color: var(--muted); }
.wa-num a { color: var(--muted); text-decoration: none; }
.wa-num a:hover { color: var(--green-800); text-decoration: underline; }
.wa-copy {
background: none; border: 0; padding: 3px; margin: -3px; cursor: pointer;
color: var(--muted); display: inline-flex;
}
.wa-copy:hover { color: var(--ink); }
.wa-toast {
background: var(--green-900); color: #fff; border-radius: 4px;
padding: 2px 7px; font-size: 11px; letter-spacing: .04em;
}
.wa-toast[hidden] { display: none; }
.wa-send {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--green-800); text-decoration: none; transition: background-color .18s ease;
}
.wa-send:hover { background: var(--bg-sand); }
.wa-send:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
/* ---------------------------------------------------------- responsive
Mobile is the primary use case: most customers browse on a phone, so the
narrow breakpoints get the most attention. */
@media (max-width: 1100px) {
.hero-inner { grid-template-columns: 1fr; padding: 54px 20px 58px; }
.hero-art { margin: 34px auto 0; }
.pd { grid-template-columns: 1fr; gap: 30px; }
.cta-band { grid-template-columns: 1fr; padding: 32px; }
.cta-band .cta-actions { justify-content: flex-start; }
.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.nav { display: none; }
.nav-toggle { display: inline-flex; }
.header .wrap { gap: 12px; }
/* The header INQUIRE button is hidden on phones: it stole the width the
search field needs, and the menu already links to Contact. */
.header-actions .btn { display: none; }
.search-box { flex: 1 1 auto; min-width: 0; }
.search-box input { padding: 9px 34px 9px 13px; font-size: 15px; }
.shop-layout { grid-template-columns: 1fr; gap: 0; }
.filters {
position: static; display: none; background: var(--bg-cream); border: 1px solid var(--line);
border-radius: var(--radius); padding: 18px; margin-bottom: 22px;
}
.filters.is-open { display: block; }
.filters-toggle { display: inline-flex; }
.hero-stats { gap: 22px; flex-wrap: wrap; }
body.nav-open .nav {
display: flex; position: absolute; top: var(--header-h); left: 0; right: 0;
flex-direction: column; background: #fff; border-bottom: 1px solid var(--line);
padding: 14px 20px 20px; gap: 4px; box-shadow: var(--shadow);
}
body.nav-open .nav a { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
/* Two product columns is the sweet spot on a phone. */
.grid, .grid-4 { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px 11px; }
.card-title { font-size: 13px; line-height: 1.35; }
/* Clamp titles to three lines so the two-column grid stays even. */
.card-title a {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.card-body { padding: 10px 0 0; }
.card-brand { font-size: 10.5px; letter-spacing: .1em; }
.price-now { font-size: 15px; }
.price-ask { font-size: 12px; padding: 3px 9px; }
.card-meta { font-size: 11.5px; }
/* Touch devices have no hover. The action bar becomes a normal row under the
text — earlier it floated over the photo and, because of an -inside-
parsing bug, ended up covering the product title (measured at 390px). */
.card-quick {
position: static; opacity: 1; transform: none;
margin-top: 10px; padding: 0; background: none; gap: 6px;
}
.card-quick .btn { flex: 1; padding: 9px 6px; font-size: 10.5px; letter-spacing: .02em; }
.section { padding: 44px 0; }
.section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.footer-top { grid-template-columns: 1fr; gap: 26px; }
.footer { margin-top: 48px; }
.footer-top { padding: 40px 0 30px; }
.topbar .wrap { height: auto; padding: 8px 20px; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.topbar .topbar-links { gap: 12px; font-size: 11.5px; }
/* Product detail: full-bleed gallery that still respects the page gutter, so
the image and the text below it share the same visual margin. */
.gallery-main { margin: 0 -12px; }
.gallery-nav { width: 38px; height: 38px; }
.gallery-counter { right: 22px; bottom: 16px; }
.thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.pd { padding: 18px 0 0; }
.pd-info h1 { font-size: 22px; margin: 4px 0 12px; }
.pd-actions .btn { flex: 1 1 100%; }
.spec-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
.breadcrumb { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta-band { padding: 26px 22px; border-radius: var(--radius); }
.cta-band .cta-actions .btn { flex: 1 1 100%; }
.hero-actions .btn { flex: 1 1 100%; }
.hero-card { padding: 24px 22px 22px; }
.hero-thumb { width: 104px; height: 104px; left: -10px; bottom: -18px; border-width: 4px; }
.hero-badge { width: 104px; height: 104px; margin-bottom: 14px; }
.hero-card-title { font-size: 27px; }
.pager a, .pager span { min-width: 36px; height: 36px; padding: 0 9px; font-size: 13px; }
.shop-toolbar { gap: 10px; }
.shop-count { font-size: 13px; }
.trust { gap: 14px; }
/* Keep the brand directory scannable: two or three tiles visible at once
instead of one per screen. */
.brand-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.brand-subhead { margin: 26px 0 12px; letter-spacing: .12em; }
.brand-tile { padding: 14px; }
.brand-tile .bt-name { font-size: 16px; }
.brand-tile .bt-rule { margin: 9px 0 8px; }
.brand-tile .bt-meta { font-size: 11px; margin-top: 4px; }
.brand-tile .bt-price { font-size: 12px; }
.brand-tile .bt-thumb { width: 64px; height: 64px; right: -10px; bottom: -10px; }
/* Floating buttons stay above the hosting badge while remaining compact
enough for a two-column product grid. */
.fab-stack { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
.fab { width: 50px; height: 50px; }
.fab-wa::before { width: 27px; height: 27px; }
.wa-card { width: calc(100vw - 28px); max-width: 330px; }
.wa-body { padding: 12px 13px; gap: 10px; }
.wa-avatar { width: 40px; height: 40px; }
}
/* Very small phones (iPhone SE 1st gen and similar). */
@media (max-width: 360px) {
.grid, .grid-4 { grid-template-columns: 1fr 1fr; gap: 14px 9px; }
.hero h1 { font-size: 27px; }
.hero-stats { gap: 16px; }
.hero-stats b { font-size: 22px; }
.card-quick { top: 165px; }
.card-quick .btn { font-size: 10px; padding: 8px 4px; }
}
/* -------------------------------------------------------- utilities */
@media print { .header, .footer, .topbar, .pd-actions, .card-quick, .fab-stack { display: none !important; } }