/* ============================================================
index.html
============================================================ */
/* ===== index.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-index body.no-scroll { overflow:hidden; }
body.page-index input, body.page-index select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-index body.no-scroll { overflow:hidden; }
body.page-index a { text-decoration:none; color:inherit; }
body.page-index button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-index img { display:block; max-width:100%; }
/* keyboard focus visibility — only for keyboard users */
body.page-index a:focus-visible, body.page-index button:focus-visible, body.page-index input:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
/* respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
body.page-index .ann-track, body.page-index .rt { animation:none !important; }
}
/* ── AGE GATE ── */
body.page-index #age-gate {
position:fixed; inset:0; z-index:9999;
background:rgba(0,0,0,0.58); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
display:flex; align-items:center; justify-content:center;
transition:opacity .5s,visibility .5s;
}
body.page-index #age-gate.gone { opacity:0; visibility:hidden; pointer-events:none; }
body.page-index .gate-box {
background:#fff; border-radius:24px; padding:52px 44px; max-width:400px; width:calc(100% - 40px);
text-align:center; box-shadow:0 32px 80px rgba(0,0,0,0.2);
}
body.page-index .gate-logo { font-size:22px; font-weight:800; margin-bottom:24px; display:block; }
body.page-index .gate-logo em { color:#FF2D55; font-style:normal; }
body.page-index .gate-title { font-size:18px; font-weight:700; margin-bottom:10px; }
body.page-index .gate-sub { font-size:13px; color:#86868B; line-height:1.65; margin-bottom:28px; }
body.page-index .gate-btns { display:flex; gap:10px; }
body.page-index .gate-yes { flex:1; padding:13px; border-radius:14px; background:#1D1D1F; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s; }
body.page-index .gate-yes:hover { background:#3a3a3c; }
body.page-index .gate-no { flex:1; padding:13px; border-radius:14px; background:#F5F5F7; color:#86868B; font-size:14px; font-weight:500; cursor:pointer; }
body.page-index .gate-note { font-size:11px; color:#AEAEB2; margin-top:18px; line-height:1.6; }
/* ── ANNOUNCEMENT BAR ── */
body.page-index .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-index .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-index .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-index .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-index header {
position:sticky; top:16px;
margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-index header:hover {
box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset;
}
body.page-index .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-index .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-index .logo em { color:#FF2D55; font-style:normal; }
body.page-index header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-index .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-index .ni > a:hover, body.page-index .ni:hover > a { color:#1D1D1F; background:rgba(0,0,0,0.05); }
body.page-index .chev { width:11px; height:11px; opacity:.4; transition:transform .2s; }
body.page-index .ni:hover .chev { transform:rotate(180deg); }
body.page-index .dg { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
body.page-index .di { padding:11px; border-radius:10px; transition:background .15s; cursor:pointer; }
body.page-index .di:hover { background:#F5F5F7; }
body.page-index .di-name { font-size:13px; font-weight:600; margin-bottom:2px; }
body.page-index .di-desc { font-size:11px; color:#86868B; line-height:1.4; }
body.page-index .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-index .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-index .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-index .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-index .search-pill span { font-size:13px; color:#86868B; }
body.page-index .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-index .ib:hover { background:rgba(0,0,0,0.05); }
body.page-index .ib svg { width:17px; height:17px; }
body.page-index .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:#FF2D55; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* ── WRAPPER ── */
body.page-index .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* Spacer so fixed capsule header doesn't cover content */
body.page-index .wrap > *:first-child { margin-top: 24px; }
/* ── LABELS ── */
body.page-index .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-index .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-index .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
body.page-index .sa { font-size:13px; font-weight:500; color:#FF2D55; transition:opacity .2s; }
body.page-index .sa:hover { opacity:.75; }
/* ── HERO ── */
body.page-index .hero { padding:28px 0 72px; }
body.page-index .hslides { position:relative; border-radius:28px; overflow:hidden; }
body.page-index .hs { display:none; width:100%; height:68vh; min-height:500px; position:relative; overflow:hidden; }
body.page-index .hs.on { display:flex; align-items:flex-end; }
body.page-index .hs1 { background:linear-gradient(130deg,#F0EDEA 0%,#FAF8F6 100%); }
body.page-index .hs2 { background:linear-gradient(130deg,#F6EDF0 0%,#FBF7F8 100%); }
body.page-index .hs3 { background:linear-gradient(130deg,#EDF0F6 0%,#F7F8FC 100%); }
/* right photo panel */
body.page-index .h-photo { position:absolute; right:0; top:0; bottom:0; width:50%; overflow:hidden; }
body.page-index .h-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
/* fade photo into slide bg */
body.page-index .h-photo::before { content:''; position:absolute; left:0; top:0; bottom:0; width:200px; z-index:2; pointer-events:none; }
body.page-index .hs1 .h-photo::before { background:linear-gradient(to right,#F0EDEA,transparent); }
body.page-index .hs2 .h-photo::before { background:linear-gradient(to right,#F6EDF0,transparent); }
body.page-index .hs3 .h-photo::before { background:linear-gradient(to right,#EDF0F6,transparent); }
/* text content */
body.page-index .hc { position:relative; z-index:3; padding:0 72px 64px; max-width:520px; animation:hup .55s ease both; }
@keyframes hup { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
body.page-index .hbadge { display:inline-flex; align-items:center; background:rgba(255,45,85,0.08); border-radius:100px; padding:5px 12px; margin-bottom:18px; font-size:11px; font-weight:600; color:#FF2D55; letter-spacing:.5px; }
body.page-index .hc h1 { font-size:56px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; margin-bottom:14px; }
body.page-index .hc p { font-size:16px; color:#86868B; line-height:1.65; margin-bottom:32px; max-width:380px; }
body.page-index .hbtns { display:flex; gap:12px; align-items:center; }
body.page-index .btn-d { background:#1D1D1F; color:#fff; padding:13px 30px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; }
body.page-index .btn-d:hover { background:#3a3a3c; transform:scale(1.02); }
body.page-index .btn-t { font-size:13px; font-weight:500; color:#515154; transition:color .2s; }
body.page-index .btn-t:hover { color:#1D1D1F; }
/* countdown — bottom right, over photo */
body.page-index .hcount {
position:absolute; right:44px; top:40px; z-index:5;
background:rgba(255,255,255,0.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:1px solid rgba(0,0,0,0.07); border-radius:18px; padding:16px 20px;
display:flex; flex-direction:column; gap:8px;
}
body.page-index .count-label { font-size:10px; font-weight:600; color:#86868B; letter-spacing:1px; text-transform:uppercase; }
body.page-index .count-nums { display:flex; align-items:center; gap:8px; }
body.page-index .cu { text-align:center; }
body.page-index .cn { font-size:26px; font-weight:800; color:#1D1D1F; line-height:1; letter-spacing:-1px; }
body.page-index .cul { font-size:9px; color:#AEAEB2; letter-spacing:.5px; margin-top:2px; }
body.page-index .csep { font-size:20px; color:#D1D1D6; font-weight:300; line-height:1.1; }
body.page-index .ctag { background:#FF2D55; color:#fff; padding:5px 10px; border-radius:100px; font-size:11px; font-weight:700; text-align:center; }
/* slide dots */
body.page-index .sdots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:10; }
body.page-index .sd { height:3px; border-radius:2px; background:rgba(0,0,0,0.15); cursor:pointer; transition:all .3s; width:20px; border:none; }
body.page-index .sd.on { background:#1D1D1F; width:36px; }
/* ── CATEGORIES ── */
body.page-index .cats-s { padding:0 0 64px; }
body.page-index .cg {
display:grid;
grid-template-columns: 1.55fr 1fr 1fr;
gap:14px;
}
body.page-index .cc {
border-radius:20px; overflow:hidden; position:relative;
cursor:pointer; min-height:220px; display:flex; align-items:flex-end;
transition:transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s;
}
body.page-index .cc:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.15); }
/* Card 1 — tall hero, spans 2 rows */
body.page-index .cc:nth-child(1) { grid-row:span 2; min-height:500px; }
/* Card 6 — full-width banner at bottom */
body.page-index .cc:nth-child(6) { grid-column:1/-1; min-height:140px; }
body.page-index .cc-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s ease; }
body.page-index .cc:hover .cc-bg { transform:scale(1.06); }
/* Dark overlay with hover brighten */
body.page-index .cc::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); transition:opacity .3s; }
body.page-index .ci { position:relative; z-index:3; width:100%; padding:22px 26px; display:flex; align-items:flex-end; justify-content:space-between; }
/* Larger text for the tall hero card */
body.page-index .cc:nth-child(1) .cn2 { font-size:20px; }
body.page-index .cc:nth-child(6) .cn2 { font-size:17px; }
/* Full-width card: horizontal layout */
body.page-index .cc:nth-child(6) { align-items:center; }
body.page-index .cc:nth-child(6) .ci { align-items:center; padding:0 32px; }
body.page-index .cn2 { font-size:15px; font-weight:700; color:#fff; margin-bottom:2px; }
body.page-index .cct { font-size:11px; color:rgba(255,255,255,0.5); }
body.page-index .carr { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; transition:background .2s,transform .2s; }
body.page-index .cc:hover .carr { background:#FF2D55; transform:translateX(2px); }
/* ── BENTO USP ──
3-col grid, 5 items:
[b1 tall ×1] [b2] [b3]
[b1 tall ×1] [b4] [b5]
*/
body.page-index .bento-s { padding:0 0 72px; }
body.page-index .bg2 {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap:14px;
}
body.page-index .b { border-radius:20px; padding:32px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s; min-height:200px; }
body.page-index .b:hover { transform:translateY(-3px); }
body.page-index .b1 { grid-row:span 2; background:#1D1D1F; color:#fff; position:relative; overflow:hidden; min-height:420px; }
body.page-index .b2 { background:#fff; }
body.page-index .b3 { background:#FF2D55; color:#fff; }
body.page-index .b4 { background:#F0EDE8; }
body.page-index .b5 { background:#fff; }
body.page-index .b1::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:36px 36px; }
body.page-index .b1>* {position:relative;z-index:1}
body.page-index .bey { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; display:block; }
body.page-index .b1 .bey { color:rgba(255,255,255,0.3); }
body.page-index .b3 .bey { color:rgba(255,255,255,0.6); }
body.page-index .bey.r { color:#FF2D55; }
body.page-index .btit { font-size:20px; font-weight:700; line-height:1.25; letter-spacing:-.2px; }
body.page-index .b1 .btit { font-size:26px; line-height:1.15; }
body.page-index .bbody { font-size:13px; line-height:1.7; }
body.page-index .b1 .bbody { color:rgba(255,255,255,0.45); font-size:13px; }
body.page-index .b3 .bbody { color:rgba(255,255,255,0.88); }
body.page-index .bbody.m { color:#86868B; }
body.page-index .bchip { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:100px; font-size:11px; font-weight:600; }
body.page-index .b1 .bchip { background:rgba(255,45,85,0.18); color:#FF6080; }
/* Stats inside bento */
body.page-index .bento-stats { display:flex; gap:28px; }
body.page-index .bstat-item { }
body.page-index .bstat { font-size:36px; font-weight:800; letter-spacing:-1.5px; color:#FF2D55; line-height:1; }
body.page-index .b3 .bstat { color:#fff; }
body.page-index .bstat-sub { font-size:11px; color:#86868B; margin-top:3px; }
body.page-index .b3 .bstat-sub { color:rgba(255,255,255,0.6); }
/* ── PRODUCTS ── */
body.page-index .prod-s { padding:0 0 72px; }
body.page-index .tabs { display:flex; gap:6px; margin-bottom:30px; }
body.page-index .tab { padding:7px 18px; border-radius:100px; font-size:13px; font-weight:500; cursor:pointer; border:1.5px solid #E8E8ED; color:#86868B; transition:all .2s; background:#fff; }
body.page-index .tab.on { background:#1D1D1F; color:#fff; border-color:#1D1D1F; }
body.page-index .tab:hover:not(.on) { border-color:#1D1D1F; color:#1D1D1F; }
body.page-index .pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-index .pgrid.off { display:none; }
body.page-index .pc { cursor:pointer; }
body.page-index .pcimg { background:#fff; border-radius:20px; aspect-ratio:3/4; overflow:hidden; margin-bottom:14px; transition:all .3s; box-shadow:0 2px 8px rgba(0,0,0,0.05); position:relative; }
body.page-index .pc:hover .pcimg { box-shadow:0 8px 24px rgba(0,0,0,0.1); transform:scale(1.015); }
body.page-index .pcimg img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .4s; }
body.page-index .pc:hover .pcimg img { transform:scale(1.06); }
body.page-index .pcbadge { position:absolute; top:13px; left:13px; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; z-index:2; }
body.page-index .bn2 {background:#1D1D1F;color:#fff} .bh2{background:#FF2D55;color:#fff} .bs2{background:#FF9500;color:#fff} .bt2{background:#34C759;color:#fff}
body.page-index .pcwish { position:absolute; top:13px; right:13px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transition:opacity .2s; z-index:2; }
body.page-index .pc:hover .pcwish { opacity:1; }
body.page-index .pcadd { position:absolute; bottom:-50px; left:10px; right:10px; background:rgba(29,29,31,0.92); backdrop-filter:blur(12px); color:#fff; padding:11px; border-radius:100px; font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1); text-align:center; z-index:2; }
body.page-index .pc:hover .pcadd { bottom:10px; }
body.page-index .pcadd:hover { background:#FF2D55; }
body.page-index .pcstars { font-size:12px; color:#FFCC00; margin-bottom:5px; }
body.page-index .pcstars span { color:#AEAEB2; font-size:11px; margin-left:3px; }
body.page-index .pcname { font-size:14px; font-weight:600; margin-bottom:3px; }
body.page-index .pcvar { font-size:12px; color:#86868B; margin-bottom:7px; }
body.page-index .pcpr { display:flex; align-items:center; gap:7px; }
body.page-index .pcp { font-size:15px; font-weight:700; }
body.page-index .pco { font-size:12px; color:#AEAEB2; text-decoration:line-through; }
body.page-index .pcoff { font-size:11px; font-weight:600; color:#FF2D55; }
/* ── STORY ── */
body.page-index .story-s { padding:0 0 72px; }
body.page-index .story-b { background:#fff; border-radius:28px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.04); min-height:400px; }
body.page-index .sl2 { padding:56px 52px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
body.page-index .sl2 h2 { font-size:34px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-index .sl2 p { font-size:13px; color:#86868B; line-height:1.7; max-width:380px; }
body.page-index .sstats { display:flex; gap:36px; }
body.page-index .ssn { font-size:30px; font-weight:800; letter-spacing:-1px; }
body.page-index .ssl { font-size:12px; color:#86868B; margin-top:2px; }
body.page-index .btn-story { display:inline-flex; align-items:center; gap:6px; background:#1D1D1F; color:#fff; padding:12px 26px; border-radius:100px; font-size:13px; font-weight:600; transition:all .2s; align-self:flex-start; }
body.page-index .btn-story:hover { background:#3a3a3c; transform:scale(1.02); }
/* Right side: full-bleed image with overlaid frosted stat cards */
body.page-index .sr2 { position:relative; overflow:hidden; min-height:400px; }
body.page-index .sr2-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
body.page-index .sr2-overlay { position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.5) 100%); }
body.page-index .sr2-feats { position:absolute; bottom:28px; left:28px; right:28px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.page-index .sr2-feat {
background:rgba(255,255,255,0.12); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,0.22); border-radius:16px; padding:16px 18px;
}
body.page-index .sr2-feat-num { font-size:26px; font-weight:800; color:#fff; letter-spacing:-1px; line-height:1; }
body.page-index .sr2-feat-label { font-size:11px; color:rgba(255,255,255,0.65); margin-top:3px; font-weight:500; }
body.page-index .sr2-quote { position:absolute; top:28px; left:28px; right:28px; }
body.page-index .sr2-quote-text { font-size:17px; font-weight:700; color:#fff; line-height:1.4; max-width:260px; }
/* ── BUNDLES ── */
body.page-index .bundle-s { padding:0 0 72px; }
body.page-index .bgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.page-index .bc { background:#fff; border-radius:20px; overflow:hidden; cursor:pointer; transition:all .3s; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-index .bc:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.09); }
body.page-index .bcimg { height:190px; position:relative; overflow:hidden; }
body.page-index .bcimg img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
body.page-index .bc:hover .bcimg img { transform:scale(1.06); }
body.page-index .bctag { position:absolute; top:13px; left:13px; background:rgba(29,29,31,0.65); backdrop-filter:blur(8px); color:#fff; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:600; letter-spacing:.5px; z-index:2; }
body.page-index .bcbody { padding:20px; }
body.page-index .bctitle { font-size:15px; font-weight:700; margin-bottom:6px; }
body.page-index .bcdesc { font-size:12px; color:#86868B; line-height:1.6; margin-bottom:12px; }
body.page-index .bcts { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
body.page-index .bct { background:#F5F5F7; border-radius:8px; padding:3px 9px; font-size:11px; color:#515154; }
body.page-index .bcfoot { display:flex; justify-content:space-between; align-items:center; }
body.page-index .bcprice { font-size:17px; font-weight:800; }
body.page-index .bcsave { font-size:11px; color:#FF2D55; font-weight:500; margin-top:1px; }
body.page-index .bcbtn { background:#1D1D1F; color:#fff; padding:9px 18px; border-radius:100px; font-size:12px; font-weight:600; transition:background .2s; }
body.page-index .bcbtn:hover { background:#FF2D55; }
/* ── REVIEWS ── */
body.page-index .rev-s { padding:0 0 72px; }
body.page-index .rw { overflow:hidden; }
body.page-index .rt { display:flex; gap:16px; animation:revs 44s linear infinite; width:max-content; }
body.page-index .rt:hover { animation-play-state:paused; }
@keyframes revs { from{transform:translateX(0)} to{transform:translateX(-50%)} }
body.page-index .rc { background:#fff; border-radius:18px; padding:22px 26px; width:330px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-index .rstars { font-size:13px; color:#FFCC00; margin-bottom:10px; }
body.page-index .rtext { font-size:13px; line-height:1.65; color:#3a3a3c; margin-bottom:14px; }
body.page-index .rauth { display:flex; align-items:center; gap:10px; }
body.page-index .rav { width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#F5F5F7; }
body.page-index .rav img { width:100%; height:100%; object-fit:cover; }
body.page-index .rname { font-size:13px; font-weight:600; }
body.page-index .rsub { font-size:11px; color:#86868B; }
body.page-index .rver { font-size:10px; color:#34C759; font-weight:500; }
/* ── BLOG ── */
body.page-index .blog-s { padding:0 0 72px; }
body.page-index .blogrid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:20px; }
body.page-index .blogc { background:#fff; border-radius:20px; overflow:hidden; cursor:pointer; transition:all .3s; }
body.page-index .blogc:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,0.08); }
body.page-index .bimg { overflow:hidden; position:relative; height:180px; }
body.page-index .blogc:first-child .bimg { height:220px; }
body.page-index .bimg img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
body.page-index .blogc:hover .bimg img { transform:scale(1.06); }
body.page-index .bcat { position:absolute; top:13px; left:13px; background:#FF2D55; color:#fff; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; z-index:2; }
body.page-index .bbody2 { padding:20px; }
body.page-index .bdate { font-size:11px; color:#AEAEB2; margin-bottom:7px; }
body.page-index .btitle2 { font-size:15px; font-weight:700; line-height:1.4; margin-bottom:8px; }
body.page-index .blogc:first-child .btitle2 { font-size:17px; }
body.page-index .bexc { font-size:12px; color:#86868B; line-height:1.6; margin-bottom:12px; }
body.page-index .bmore { font-size:12px; font-weight:600; color:#FF2D55; }
/* ── INSTAGRAM ── */
body.page-index .insta-s { padding:0 0 72px; }
body.page-index .ih { text-align:center; margin-bottom:30px; }
body.page-index .igrid {
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 200px 200px 180px;
gap:12px;
}
body.page-index .ig { border-radius:16px; cursor:pointer; position:relative; overflow:hidden; }
body.page-index .ig:nth-child(1) { grid-column:span 2; grid-row:span 2; border-radius:20px; }
body.page-index .ig img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
body.page-index .ig:hover img { transform:scale(1.07); }
body.page-index .igov { position:absolute; inset:0; background:linear-gradient(to top, rgba(255,45,85,0.82) 0%, rgba(255,45,85,0.25) 100%); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; opacity:0; transition:opacity .25s; }
body.page-index .ig:hover .igov { opacity:1; }
body.page-index .igov span { color:#fff; font-size:13px; font-weight:600; }
body.page-index .igov span:last-child { font-size:11px; opacity:.75; }
/* ── SUBSCRIBE ── */
body.page-index .sub-s { padding:0 0 72px; }
body.page-index .subb { background:#1D1D1F; border-radius:24px; padding:60px; display:flex; align-items:center; gap:80px; position:relative; overflow:hidden; }
body.page-index .subb::before { content:''; position:absolute; top:-120px; right:-120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.2) 0%,transparent 70%); filter:blur(40px); }
body.page-index .subl { flex:1; position:relative; z-index:1; }
body.page-index .subl .sl { color:rgba(255,255,255,0.3); }
body.page-index .subl h2 { font-size:30px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:8px; }
body.page-index .subl p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.65; }
body.page-index .subr { min-width:380px; position:relative; z-index:1; }
body.page-index .subform { display:flex; gap:10px; margin-bottom:10px; }
body.page-index .subin { flex:1; padding:12px 18px; border-radius:100px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; outline:none; font-family:inherit; transition:border-color .2s; }
body.page-index .subin::placeholder { color:rgba(255,255,255,0.3); }
body.page-index .subin:focus { border-color:rgba(255,45,85,0.6); }
body.page-index .subgo { background:#FF2D55; color:#fff; padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; font-family:inherit; white-space:nowrap; }
body.page-index .subgo:hover { background:#FF4D6A; }
body.page-index .subnote { font-size:11px; color:rgba(255,255,255,0.22); }
body.page-index .subperks { display:flex; gap:18px; margin-top:12px; }
body.page-index .subperk { font-size:12px; color:rgba(255,255,255,0.38); display:flex; align-items:center; gap:5px; }
body.page-index .subperk::before { content:''; width:5px; height:5px; border-radius:50%; background:#FF2D55; flex-shrink:0; }
/* ── FOOTER ── */
body.page-index footer { background:#1D1D1F; padding:56px 0 36px; }
body.page-index .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-index .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-index .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-index .flogo em { color:#FF2D55; font-style:normal; }
body.page-index .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-index .fsocs { display:flex; gap:8px; }
body.page-index .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.5); text-decoration:none; flex-shrink:0; }
body.page-index .fsoc:hover { background:#FF2D55; border-color:#FF2D55; color:#fff; }
body.page-index .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-index .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-index .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-index .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-index .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-index .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-index .fpay { display:flex; gap:8px; }
body.page-index .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ── SCROLL REVEAL ── */
body.page-index .rv { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
body.page-index .rv.show { opacity:1; transform:translateY(0); }
/* ── MOBILE DRAWER (off by default) ── */
body.page-index .hamburger { display:none; }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width: 1024px) {
body.page-index .wrap { padding:0 28px; }
body.page-index .fw { padding:0 28px; }
body.page-index header { width:calc(100% - 32px); }
body.page-index .hw { padding:0 16px 0 22px; gap:14px; }
body.page-index header nav { gap:0; }
body.page-index .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-index .search-pill span { display:none; }
body.page-index .search-pill { padding:8px 10px; }
/* hero */
body.page-index .hc h1 { font-size:46px; }
body.page-index .hc { padding:0 56px 56px; }
/* product grid: 4 → 3 */
body.page-index .pgrid { grid-template-columns:repeat(3,1fr); }
/* footer: 5 → 3 col, brand col spans full row */
body.page-index .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-index .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
/* subscribe */
body.page-index .subb { padding:48px; gap:48px; }
body.page-index .subr { min-width:320px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width: 768px) {
body { font-size:14px; }
/* show hamburger, hide desktop nav + search pill */
body.page-index .hamburger { display:flex; }
body.page-index header nav, body.page-index header .search-pill, body.page-index .ib[title="Wishlist"], body.page-index .ib[title="Account"] { display:none; }
/* header — flatter on mobile */
body.page-index header {
top:8px; width:calc(100% - 16px); border-radius:18px;
}
body.page-index .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-index .logo { font-size:17px; }
body.page-index .hr { gap:0; }
body.page-index .ib { width:40px; height:40px; }
body.page-index .ib svg { width:18px; height:18px; }
body.page-index .cdot { top:3px; right:3px; }
/* announcement bar */
body.page-index .ann-bar { padding:8px 0; }
body.page-index .ann-track { gap:36px; }
body.page-index .ann-track span { font-size:11px; }
/* age gate */
body.page-index .gate-box { padding:36px 24px; border-radius:20px; }
body.page-index .gate-title { font-size:16px; }
body.page-index .gate-sub { font-size:12.5px; }
body.page-index .gate-btns { flex-direction:column; gap:8px; }
/* wrap padding */
body.page-index .wrap { padding:0 16px; }
body.page-index .wrap > *:first-child { margin-top:18px; }
/* section headers */
body.page-index .sh { margin-bottom:22px; align-items:flex-end; gap:12px; }
body.page-index .st { font-size:24px; letter-spacing:-.3px; }
body.page-index .sl { font-size:10px; letter-spacing:1.2px; margin-bottom:6px; }
body.page-index .sa { font-size:12px; white-space:nowrap; }
/* HERO — stacked, photo on top */
body.page-index .hero { padding:18px 0 48px; }
body.page-index .hslides { border-radius:20px; }
body.page-index .hs { display:none; height:auto; min-height:0; flex-direction:column; }
body.page-index .hs.on { display:flex; align-items:stretch; }
body.page-index .h-photo { position:relative; width:100%; height:240px; flex-shrink:0; order:1; }
body.page-index .h-photo::before { display:none; }
body.page-index .h-photo img { object-position:center; }
body.page-index .hc { padding:28px 24px 24px; max-width:100%; order:2; }
body.page-index .hbadge { font-size:10px; padding:4px 10px; margin-bottom:14px; }
body.page-index .hc h1 { font-size:34px; letter-spacing:-1px; line-height:1.05; margin-bottom:10px; }
body.page-index .hc p { font-size:14px; margin-bottom:22px; max-width:100%; }
body.page-index .hbtns { flex-wrap:wrap; gap:10px; }
body.page-index .btn-d { padding:12px 22px; font-size:13px; }
/* countdown — move below text, not floating over photo */
body.page-index .hcount {
position:relative; right:auto; top:auto; order:3;
margin:0 24px 28px; padding:14px 16px; border-radius:14px;
flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap;
}
body.page-index .count-label { font-size:9.5px; }
body.page-index .cn { font-size:22px; }
body.page-index .ctag { padding:4px 9px; font-size:10px; margin-left:auto; }
/* slide dots — pull above bottom on mobile so they stay visible */
body.page-index .sdots { bottom:12px; }
body.page-index .sd { width:16px; }
body.page-index .sd.on { width:28px; }
/* CATEGORIES — 2-col grid, simpler */
body.page-index .cats-s { padding-bottom:48px; }
body.page-index .cg { grid-template-columns:1fr 1fr; gap:10px; }
body.page-index .cc { min-height:160px; border-radius:16px; }
body.page-index .cc:nth-child(1) { grid-row:auto; min-height:200px; grid-column:1/-1; }
body.page-index .cc:nth-child(6) { grid-column:1/-1; min-height:120px; align-items:flex-end; }
body.page-index .cc:nth-child(6) .ci { align-items:flex-end; padding:18px 20px; }
body.page-index .ci { padding:16px 18px; }
body.page-index .cn2 { font-size:13.5px !important; }
body.page-index .cct { font-size:10.5px; }
body.page-index .carr { width:26px; height:26px; font-size:11px; }
/* BENTO — single column stack, drop tall span */
body.page-index .bento-s { padding-bottom:48px; }
body.page-index .bg2 { grid-template-columns:1fr; gap:10px; }
body.page-index .b { padding:24px; min-height:auto; border-radius:18px; }
body.page-index .b1 { grid-row:auto; min-height:auto; padding:32px 24px; }
body.page-index .b1 .btit { font-size:22px; }
body.page-index .btit { font-size:18px; }
body.page-index .bento-stats { gap:22px; flex-wrap:wrap; }
body.page-index .bstat { font-size:30px; }
/* PRODUCTS — 2-col grid, always-visible quick add */
body.page-index .prod-s { padding-bottom:48px; }
body.page-index .tabs { overflow-x:auto; flex-wrap:nowrap; gap:6px; margin:0 -16px 22px; padding:0 16px 4px; scrollbar-width:none; }
body.page-index .tabs::-webkit-scrollbar { display:none; }
body.page-index .tab { white-space:nowrap; flex-shrink:0; padding:7px 14px; font-size:12.5px; }
body.page-index .pgrid { grid-template-columns:1fr 1fr; gap:14px; }
body.page-index .pcimg { border-radius:16px; margin-bottom:10px; }
body.page-index .pcbadge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-index .pcwish { opacity:1; top:9px; right:9px; width:32px; height:32px; font-size:14px; }
/* on touch — keep quick add hidden, tap goes to PDP; less clutter than always-on */
body.page-index .pcadd { display:none; }
body.page-index .pcname { font-size:13px; }
body.page-index .pcvar { font-size:11px; }
body.page-index .pcp { font-size:14px; }
/* STORY — stack vertical, image above */
body.page-index .story-s { padding-bottom:48px; }
body.page-index .story-b { grid-template-columns:1fr; min-height:auto; border-radius:20px; }
body.page-index .sl2 { padding:32px 24px; gap:16px; order:2; }
body.page-index .sl2 h2 { font-size:26px; }
body.page-index .sl2 p { font-size:13px; max-width:100%; }
body.page-index .sstats { gap:24px; flex-wrap:wrap; }
body.page-index .ssn { font-size:24px; }
body.page-index .sr2 { min-height:280px; order:1; }
body.page-index .sr2-quote-text { font-size:15px; max-width:80%; }
body.page-index .sr2-feats { grid-template-columns:1fr 1fr; gap:8px; bottom:20px; left:20px; right:20px; }
body.page-index .sr2-feat { padding:12px 14px; border-radius:14px; }
body.page-index .sr2-feat-num { font-size:21px; }
body.page-index .sr2-feat-label { font-size:10px; }
body.page-index .sr2-quote { top:20px; left:20px; right:20px; }
/* BUNDLES — single column */
body.page-index .bundle-s { padding-bottom:48px; }
body.page-index .bgrid { grid-template-columns:1fr; gap:14px; }
body.page-index .bcimg { height:160px; }
/* REVIEWS — narrower cards */
body.page-index .rev-s { padding-bottom:48px; }
body.page-index .rc { width:280px; padding:18px 20px; }
body.page-index .rtext { font-size:12.5px; }
/* BLOG — single column */
body.page-index .blog-s { padding-bottom:48px; }
body.page-index .blogrid { grid-template-columns:1fr; gap:16px; }
body.page-index .blogc:first-child .bimg { height:200px; }
body.page-index .bimg { height:180px; }
/* INSTAGRAM — 2-col grid, drop the 2x2 hero spans */
body.page-index .insta-s { padding-bottom:48px; }
body.page-index .igrid { grid-template-columns:1fr 1fr; grid-template-rows:none; gap:8px; grid-auto-rows:160px; }
body.page-index .ig:nth-child(1) { grid-column:span 2; grid-row:span 2; }
body.page-index .ig { border-radius:12px; }
/* SUBSCRIBE — stack */
body.page-index .sub-s { padding-bottom:48px; }
body.page-index .subb { flex-direction:column; gap:24px; padding:36px 24px; border-radius:20px; }
body.page-index .subl h2 { font-size:24px; }
body.page-index .subr { min-width:0; width:100%; }
body.page-index .subform { flex-direction:column; gap:8px; }
body.page-index .subgo { width:100%; padding:13px; }
body.page-index .subin { padding:13px 18px; font-size:14px; }
body.page-index .subperks { flex-wrap:wrap; gap:10px 14px; margin-top:10px; }
/* FOOTER — collapse to 2 col, brand spans */
body.page-index footer { padding:40px 0 28px; }
body.page-index .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-index .ftop > div:first-child { grid-column:1/-1; }
body.page-index .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
body.page-index .flegal { font-size:10.5px; }
body.page-index .fctit { font-size:10.5px; margin-bottom:10px; }
body.page-index .flinks a { font-size:12.5px; }
}
/* ───────────────────────────────────────────────
SMALL MOBILE — ≤ 380px
─────────────────────────────────────────────── */
@media (max-width: 380px) {
body.page-index .hw { padding:0 4px 0 14px; gap:2px; }
body.page-index .logo { font-size:16px; }
body.page-index .ib { width:36px; height:36px; }
body.page-index .hc h1 { font-size:30px; }
body.page-index .h-photo { height:200px; }
body.page-index .pgrid { gap:10px; }
body.page-index .pcname, body.page-index .pcp { font-size:12.5px; }
body.page-index .ftop { grid-template-columns:1fr; }
}
/* ============================================================
shop.html
============================================================ */
/* ===== shop.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-shop body.no-scroll { overflow:hidden; }
body.page-shop input, body.page-shop select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-shop body.no-scroll { overflow:hidden; }
body.page-shop a { text-decoration:none; color:inherit; }
body.page-shop button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-shop img { display:block; max-width:100%; }
body.page-shop input, body.page-shop select { font-family:inherit; }
body.page-shop a:focus-visible, body.page-shop button:focus-visible, body.page-shop input:focus-visible, body.page-shop summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-shop .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-shop .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-shop .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-shop .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-shop .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-shop header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-shop header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-shop .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-shop .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-shop .logo em { color:var(--brand); font-style:normal; }
body.page-shop header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-shop .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-shop .ni > a:hover, body.page-shop .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-shop .ni.active > a { color:var(--brand); }
body.page-shop .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-shop .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-shop .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-shop .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-shop .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-shop .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-shop .ib:hover { background:rgba(0,0,0,0.05); }
body.page-shop .ib svg { width:17px; height:17px; }
body.page-shop .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-shop .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-shop .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-shop .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-shop .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-shop .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-shop .bcrumb a:hover { color:var(--ink); }
body.page-shop .bcrumb .sep { color:var(--muted-3); }
body.page-shop .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-shop .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-shop .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-shop .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-shop .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-shop .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-shop .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-shop .chips-row:empty { padding:0; }
body.page-shop .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-shop .fchip:hover { border-color:var(--ink); }
body.page-shop .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-shop .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-shop .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-shop .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-shop .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-shop .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-shop .filters::-webkit-scrollbar { width:5px; }
body.page-shop .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-shop .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-shop .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-shop .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-shop .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-shop .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-shop .fgroup { border-top:1px solid var(--line-soft); }
body.page-shop .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-shop .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-shop .fgroup > summary::-webkit-details-marker { display:none; }
body.page-shop .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-shop .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-shop .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-shop .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-shop .fopt:hover { color:var(--ink); }
body.page-shop .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-shop .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-shop .fopt-mark.radio { border-radius:50%; }
body.page-shop .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-shop .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-shop .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-shop .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-shop .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-shop .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-shop .fopt-text { flex:1; }
body.page-shop .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-shop .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-shop .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-shop .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-shop .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-shop .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-shop .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-shop .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-shop .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-shop .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-shop .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-shop .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-shop .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-shop .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-shop .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-shop .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-shop .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-shop .results { min-width:0; }
body.page-shop .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-shop .t-left { display:flex; align-items:center; gap:14px; }
body.page-shop .t-count { font-size:13px; color:var(--muted-2); }
body.page-shop .t-count strong { color:var(--ink); font-weight:700; }
body.page-shop .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-shop .sortdrop { position:relative; z-index:10; }
body.page-shop .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-shop .sortbtn:hover { border-color:var(--ink); }
body.page-shop .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-shop .sortbtn .val { font-weight:600; }
body.page-shop .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-shop .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-shop .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-shop .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-shop .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-shop .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-shop .sortopt.on { color:var(--ink); font-weight:600; }
body.page-shop .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-shop .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-shop .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-shop .vbtn:hover { color:var(--ink); }
body.page-shop .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-shop .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-shop .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-shop .fbtn-mobile svg { width:14px; height:14px; }
body.page-shop .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-shop .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-shop .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-shop .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-shop .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-shop .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-shop .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-shop .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-shop .pgrid.list-view .pcard-quick { display:none; }
body.page-shop .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-shop .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-shop .pgrid.list-view .pcard-name { font-size:16px; }
body.page-shop .pgrid.list-view .pcard-var { font-size:13px; }
body.page-shop .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-shop .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-shop .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-shop .pcard { cursor:pointer; }
body.page-shop .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-shop .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-shop .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-shop .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-shop .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-shop .bg-new { background:var(--ink); color:#fff; }
body.page-shop .bg-hot { background:var(--brand); color:#fff; }
body.page-shop .bg-sale { background:#FF9500; color:#fff; }
body.page-shop .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-shop .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-shop .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-shop .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-shop .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-shop .pcard:hover .pcard-quick { bottom:12px; }
body.page-shop .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-shop .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-shop .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-shop .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-shop .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-shop .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-shop .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-shop .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-shop .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-shop .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-shop .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-shop .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-shop .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-shop footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-shop .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-shop .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-shop .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-shop .flogo em { color:var(--brand); font-style:normal; }
body.page-shop .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-shop .fsocs { display:flex; gap:8px; }
body.page-shop .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-shop .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-shop .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-shop .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-shop .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-shop .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-shop .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-shop .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-shop .fpay { display:flex; gap:8px; }
body.page-shop .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-shop .wrap, body.page-shop .fw { padding:0 28px; }
body.page-shop header { width:calc(100% - 32px); }
body.page-shop .hw { padding:0 16px 0 22px; gap:14px; }
body.page-shop header nav { gap:0; }
body.page-shop .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-shop .search-pill span { display:none; }
body.page-shop .search-pill { padding:8px 10px; }
body.page-shop .shop-title { font-size:34px; }
body.page-shop .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-shop .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-shop .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-shop .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-shop .hamburger { display:flex; }
body.page-shop header nav, body.page-shop header .search-pill, body.page-shop .ib[title="Wishlist"], body.page-shop .ib[title="Account"] { display:none; }
body.page-shop header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-shop .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-shop .logo { font-size:17px; }
body.page-shop .ib { width:40px; height:40px; }
body.page-shop .ib svg { width:18px; height:18px; }
body.page-shop .ann-bar { padding:8px 0; }
body.page-shop .ann-track { gap:36px; }
body.page-shop .ann-track span { font-size:11px; }
body.page-shop .wrap, body.page-shop .fw { padding:0 16px; }
/* hero */
body.page-shop .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-shop .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-shop .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-shop .shop-meta { padding-bottom:0; }
body.page-shop .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-shop .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-shop .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-shop .filters.on { transform:translateY(0); }
body.page-shop .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-shop .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-shop .fgroup > summary { padding:18px 20px 14px; }
body.page-shop .fgroup-body { padding:0 20px 18px; }
body.page-shop .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-shop .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-shop .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-shop .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-shop .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-shop .toolbar { gap:10px; padding-bottom:14px; }
body.page-shop .t-left { gap:10px; flex:1; }
body.page-shop .sortbtn .lbl { display:none; }
body.page-shop .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-shop .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-shop .pcard-img { border-radius:var(--radius-sm); }
body.page-shop .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-shop .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-shop .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-shop .pcard-name { font-size:13px; }
body.page-shop .pcard-p { font-size:14px; }
/* footer */
body.page-shop footer { padding:40px 0 28px; margin-top:48px; }
body.page-shop .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-shop .ftop > div:first-child { grid-column:1/-1; }
body.page-shop .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-shop .filters .f-head-clear-desktop { display:none; }
body.page-shop .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-shop .hw { padding:0 4px 0 14px; }
body.page-shop .logo { font-size:16px; }
body.page-shop .ib { width:36px; height:36px; }
body.page-shop .pgrid { gap:14px 10px; }
body.page-shop .pcard-name, body.page-shop .pcard-p { font-size:12.5px; }
}
/* ============================================================
pdp.html
============================================================ */
/* ===== pdp.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-pdp body.no-scroll { overflow:hidden; }
body.page-pdp input, body.page-pdp select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-pdp body.no-scroll { overflow:hidden; }
body.page-pdp a { text-decoration:none; color:inherit; }
body.page-pdp button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-pdp img { display:block; max-width:100%; }
body.page-pdp input, body.page-pdp select { font-family:inherit; }
body.page-pdp a:focus-visible, body.page-pdp button:focus-visible, body.page-pdp input:focus-visible, body.page-pdp summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-pdp .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-pdp .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-pdp .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-pdp .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-pdp .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-pdp header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-pdp header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-pdp .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-pdp .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-pdp .logo em { color:var(--brand); font-style:normal; }
body.page-pdp header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-pdp .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-pdp .ni > a:hover, body.page-pdp .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-pdp .ni.active > a { color:var(--brand); }
body.page-pdp .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-pdp .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-pdp .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-pdp .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-pdp .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-pdp .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-pdp .ib:hover { background:rgba(0,0,0,0.05); }
body.page-pdp .ib svg { width:17px; height:17px; }
body.page-pdp .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-pdp .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-pdp .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB ── */
body.page-pdp .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; padding:24px 0 28px; }
body.page-pdp .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-pdp .bcrumb a:hover { color:var(--ink); }
body.page-pdp .bcrumb .sep { color:var(--muted-3); }
body.page-pdp .bcrumb .cur { color:var(--ink); font-weight:500; }
/* ── PDP MAIN GRID ── */
body.page-pdp .pdp-grid {
display:grid;
grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
gap:64px;
padding-bottom:80px;
}
/* ── GALLERY ── */
body.page-pdp .pdp-gallery { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:start; }
body.page-pdp .pdp-thumbs { display:flex; flex-direction:column; gap:10px; }
body.page-pdp .pdp-thumb {
width:72px; aspect-ratio:1; border-radius:14px;
border:2px solid transparent; overflow:hidden;
background:#fff; padding:0; cursor:pointer;
transition:border-color .2s,transform .15s;
}
body.page-pdp .pdp-thumb:hover { transform:scale(1.03); }
body.page-pdp .pdp-thumb.on { border-color:var(--ink); }
body.page-pdp .pdp-thumb img { width:100%; height:100%; object-fit:cover; }
body.page-pdp .pdp-main-img {
position:relative; aspect-ratio:1;
border-radius:var(--radius-lg); overflow:hidden;
background:#fff;
}
body.page-pdp .pdp-main-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
body.page-pdp .pdp-main-img:hover img { transform:scale(1.02); }
body.page-pdp .pdp-badge {
position:absolute; top:18px; left:18px; z-index:2;
padding:5px 12px; border-radius:var(--radius-pill);
font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
background:var(--ink); color:#fff;
}
body.page-pdp .pdp-zoom-hint {
position:absolute; bottom:18px; right:18px;
padding:7px 12px; background:rgba(255,255,255,0.85);
backdrop-filter:blur(8px); border-radius:var(--radius-pill);
font-size:11px; font-weight:500; color:var(--muted);
display:flex; align-items:center; gap:6px;
letter-spacing:.2px;
}
body.page-pdp .pdp-zoom-hint svg { width:12px; height:12px; }
/* ── INFO PANEL ── */
body.page-pdp .pdp-info { padding-top:6px; min-width:0; }
body.page-pdp .pdp-meta {
display:flex; align-items:center; gap:10px;
font-size:12.5px; color:var(--muted-2); margin-bottom:10px;
}
body.page-pdp .pdp-meta .stars { color:#FFCC00; letter-spacing:1px; font-size:13px; }
body.page-pdp .pdp-meta .review-cnt { color:var(--muted); font-weight:500; }
body.page-pdp .pdp-meta .review-cnt:hover { color:var(--ink); text-decoration:underline; cursor:pointer; }
body.page-pdp .pdp-info h1 {
font-size:32px; font-weight:700; line-height:1.1;
letter-spacing:-.5px; margin-bottom:10px;
}
body.page-pdp .pdp-tagline {
font-size:14px; color:var(--muted); line-height:1.6;
margin-bottom:24px;
}
body.page-pdp .pdp-price-row {
display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
padding-bottom:24px; margin-bottom:24px;
border-bottom:1px solid var(--line-soft);
}
body.page-pdp .pdp-price { font-size:32px; font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
body.page-pdp .pdp-price-orig { font-size:16px; color:var(--muted-3); text-decoration:line-through; font-variant-numeric:tabular-nums; }
body.page-pdp .pdp-price-off {
font-size:11px; font-weight:700; color:var(--brand);
padding:4px 9px; background:var(--brand-soft); border-radius:6px;
letter-spacing:.4px; text-transform:uppercase;
}
/* color/variant select */
body.page-pdp .pdp-opt { margin-bottom:22px; }
body.page-pdp .pdp-opt-label {
font-size:12.5px; color:var(--muted-2); margin-bottom:12px;
display:block;
}
body.page-pdp .pdp-opt-label strong { color:var(--ink); font-weight:600; margin-left:4px; }
body.page-pdp .pdp-swatches { display:flex; gap:12px; flex-wrap:wrap; }
body.page-pdp .pdp-swatch {
width:36px; height:36px; border-radius:50%;
border:1px solid rgba(0,0,0,0.08); cursor:pointer;
position:relative; transition:transform .15s;
flex-shrink:0;
}
body.page-pdp .pdp-swatch:hover { transform:scale(1.06); }
body.page-pdp .pdp-swatch.on::after {
content:''; position:absolute; inset:-5px;
border:1.5px solid var(--ink); border-radius:50%;
}
/* qty + add to cart row */
body.page-pdp .pdp-cta-row {
display:grid; grid-template-columns:auto 1fr; gap:10px;
margin-bottom:10px;
}
body.page-pdp .pdp-qty {
display:flex; align-items:center;
background:var(--bg); border-radius:var(--radius-pill);
padding:3px;
}
body.page-pdp .pdp-qty button {
width:42px; height:42px; border-radius:50%;
font-size:17px; color:var(--muted); transition:color .15s,background .15s;
display:flex; align-items:center; justify-content:center;
}
body.page-pdp .pdp-qty button:hover { color:var(--ink); background:rgba(0,0,0,0.03); }
body.page-pdp .pdp-qty button:active { transform:scale(.94); }
body.page-pdp .pdp-qty .qty-val {
width:32px; text-align:center; font-weight:600;
font-size:14px; font-variant-numeric:tabular-nums;
}
body.page-pdp .pdp-cart {
background:var(--ink); color:#fff;
font-weight:600; font-size:14px; letter-spacing:.3px;
border-radius:var(--radius-pill); height:48px;
display:flex; align-items:center; justify-content:center; gap:8px;
transition:background .25s;
}
body.page-pdp .pdp-cart:hover { background:var(--brand); }
body.page-pdp .pdp-cart svg { width:16px; height:16px; }
body.page-pdp .pdp-wish {
width:100%; height:46px;
border:1.5px solid var(--line); border-radius:var(--radius-pill);
font-size:13px; font-weight:500; color:var(--ink);
display:inline-flex; align-items:center; justify-content:center; gap:8px;
margin-bottom:24px; transition:border-color .2s,color .2s;
}
body.page-pdp .pdp-wish svg { width:16px; height:16px; }
body.page-pdp .pdp-wish:hover { border-color:var(--ink); }
body.page-pdp .pdp-wish.on { border-color:var(--brand); color:var(--brand); }
/* trust badges */
body.page-pdp .pdp-trust {
list-style:none; display:flex; flex-direction:column; gap:11px;
padding:20px 0;
border-top:1px solid var(--line-soft);
border-bottom:1px solid var(--line-soft);
margin-bottom:24px;
}
body.page-pdp .pdp-trust li {
font-size:13px; color:var(--muted);
display:flex; align-items:center; gap:11px;
}
body.page-pdp .pdp-trust li svg { width:16px; height:16px; color:var(--ink); flex-shrink:0; }
/* key features */
body.page-pdp .pdp-features h4 {
font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
color:var(--ink); font-weight:700; margin-bottom:14px;
}
body.page-pdp .pdp-features ul {
list-style:none;
display:grid; grid-template-columns:1fr 1fr;
gap:11px 16px;
}
body.page-pdp .pdp-features li {
font-size:13px; color:var(--muted);
display:flex; align-items:center; gap:9px;
}
body.page-pdp .pdp-features li::before {
content:''; width:5px; height:5px; border-radius:50%;
background:var(--brand); flex-shrink:0;
}
/* Stock indicator */
body.page-pdp .pdp-stock {
display:flex; align-items:center; gap:8px;
font-size:13px; font-weight:500; color:#34C759;
margin-bottom:22px;
}
body.page-pdp .pdp-stock .dot {
width:8px; height:8px; border-radius:50%;
background:#34C759;
box-shadow:0 0 0 3px rgba(52,199,89,.18);
animation:pulse 2.4s ease-in-out infinite;
}
body.page-pdp .pdp-stock .ship-eta { color:var(--muted-2); font-weight:400; }
@keyframes pulse {
body.page-pdp 0%, body.page-pdp 100% { box-shadow:0 0 0 3px rgba(52,199,89,.18); }
body.page-pdp 50% { box-shadow:0 0 0 6px rgba(52,199,89,.06); }
}
/* Woo-style meta block (SKU, categories, share) */
body.page-pdp .pdp-meta-block {
margin-top:24px; padding-top:20px;
border-top:1px solid var(--line-soft);
display:flex; flex-direction:column; gap:10px;
}
body.page-pdp .pdp-meta-row {
font-size:12.5px; color:var(--muted);
display:flex; align-items:center; gap:10px;
flex-wrap:wrap;
}
body.page-pdp .pdp-meta-row .lbl {
font-size:11px; font-weight:700; letter-spacing:1.3px;
text-transform:uppercase; color:var(--ink);
flex-shrink:0; min-width:80px;
}
body.page-pdp .pdp-meta-row a {
color:var(--muted); transition:color .15s;
}
body.page-pdp .pdp-meta-row a:hover { color:var(--brand); }
body.page-pdp .pdp-meta-row .sep { color:var(--muted-3); margin:0 2px; }
body.page-pdp .pdp-share-btns { display:flex; gap:6px; }
body.page-pdp .pdp-share-btn {
width:30px; height:30px; border-radius:50%;
border:1px solid var(--line); background:#fff;
display:flex; align-items:center; justify-content:center;
color:var(--muted); transition:all .2s;
}
body.page-pdp .pdp-share-btn:hover { color:var(--ink); border-color:var(--ink); transform:translateY(-1px); }
body.page-pdp .pdp-share-btn svg { width:12px; height:12px; }
/* ── TABS SECTION ── */
body.page-pdp .pdp-tabs {
margin-top:24px; padding:48px 0 64px;
border-top:1px solid var(--line);
}
body.page-pdp .tab-nav {
display:flex; gap:32px;
border-bottom:1px solid var(--line);
margin-bottom:36px; overflow-x:auto;
scrollbar-width:none;
}
body.page-pdp .tab-nav::-webkit-scrollbar { display:none; }
body.page-pdp .tab-btn {
padding:14px 0; font-size:14px; font-weight:500;
color:var(--muted-2); position:relative; white-space:nowrap;
transition:color .2s;
}
body.page-pdp .tab-btn:hover { color:var(--ink); }
body.page-pdp .tab-btn.on { color:var(--ink); font-weight:600; }
body.page-pdp .tab-btn.on::after {
content:''; position:absolute; bottom:-1px; left:0; right:0;
height:2px; background:var(--ink);
}
body.page-pdp .tab-content > div { display:none; }
body.page-pdp .tab-content > div.on { display:block; animation:tabfade .25s ease; }
@keyframes tabfade { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }
/* description */
body.page-pdp .tab-desc { font-size:14.5px; line-height:1.7; color:var(--muted); max-width:780px; }
body.page-pdp .tab-desc p { margin-bottom:18px; }
body.page-pdp .tab-desc h3 {
font-size:16px; color:var(--ink); margin:28px 0 12px;
font-weight:700; letter-spacing:-.2px;
}
body.page-pdp .tab-desc strong { color:var(--ink); font-weight:600; }
/* spec grid */
body.page-pdp .spec-grid {
display:grid; grid-template-columns:240px 1fr;
max-width:720px;
}
body.page-pdp .spec-grid > div {
padding:14px 0; border-bottom:1px solid var(--line-soft);
font-size:14px; line-height:1.5;
}
body.page-pdp .spec-grid > div:nth-child(odd) { font-weight:600; color:var(--ink); }
body.page-pdp .spec-grid > div:nth-child(even) { color:var(--muted); }
body.page-pdp .spec-grid > div:nth-last-child(-n+2) { border-bottom:none; }
/* reviews */
body.page-pdp .reviews-layout {
display:grid; grid-template-columns:300px 1fr; gap:56px;
}
body.page-pdp .review-summary {
padding:24px; background:var(--surface);
border:1px solid var(--line-soft); border-radius:var(--radius-md);
position:sticky; top:108px; align-self:start;
}
body.page-pdp .review-big {
font-size:48px; font-weight:800; letter-spacing:-1.5px;
line-height:1; color:var(--ink); margin-bottom:6px;
}
body.page-pdp .review-stars-big { color:#FFCC00; font-size:15px; letter-spacing:1.5px; margin-bottom:4px; }
body.page-pdp .review-count-big { font-size:12.5px; color:var(--muted-2); margin-bottom:22px; }
body.page-pdp .review-bars { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
body.page-pdp .review-bar { display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--muted-2); font-variant-numeric:tabular-nums; }
body.page-pdp .review-bar .lbl { width:30px; }
body.page-pdp .review-bar-track {
flex:1; height:5px; background:var(--line);
border-radius:3px; overflow:hidden;
}
body.page-pdp .review-bar-fill { height:100%; background:var(--ink); border-radius:3px; }
body.page-pdp .review-bar .pct { width:32px; text-align:right; }
body.page-pdp .review-write {
width:100%; height:42px;
background:var(--ink); color:#fff;
border-radius:var(--radius-pill);
font-size:13px; font-weight:600;
transition:background .2s;
}
body.page-pdp .review-write:hover { background:var(--brand); }
body.page-pdp .review-list { display:flex; flex-direction:column; gap:0; }
body.page-pdp .review-item {
padding:22px 0; border-bottom:1px solid var(--line-soft);
}
body.page-pdp .review-item:first-child { padding-top:0; }
body.page-pdp .review-item:last-child { border-bottom:none; }
body.page-pdp .review-head {
display:flex; align-items:center; gap:10px; margin-bottom:8px;
flex-wrap:wrap;
}
body.page-pdp .review-stars { color:#FFCC00; font-size:13px; letter-spacing:1px; }
body.page-pdp .review-author { font-size:13px; font-weight:600; color:var(--ink); }
body.page-pdp .review-verified {
font-size:11px; color:#34C759; font-weight:600;
display:inline-flex; align-items:center; gap:4px;
}
body.page-pdp .review-verified svg { width:11px; height:11px; }
body.page-pdp .review-date { font-size:12px; color:var(--muted-3); margin-left:auto; }
body.page-pdp .review-title { font-size:14.5px; font-weight:600; margin-bottom:4px; color:var(--ink); }
body.page-pdp .review-body { font-size:13.5px; line-height:1.65; color:var(--muted); }
/* ── CUSTOMER REVIEWS (card grid) ── */
body.page-pdp .reviews-section {
padding:64px 0 56px;
border-top:1px solid var(--line);
}
body.page-pdp .reviews-head {
display:flex; align-items:flex-end; justify-content:space-between;
gap:16px; margin-bottom:28px; flex-wrap:wrap;
}
body.page-pdp .reviews-head h2 {
font-size:28px; font-weight:700; letter-spacing:-.5px;
margin-bottom:6px;
}
body.page-pdp .reviews-subhead { font-size:13.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-pdp .reviews-subhead .rh-stars { color:#FFCC00; letter-spacing:1px; font-size:14px; }
body.page-pdp .btn-write-review {
display:inline-flex; align-items:center; gap:8px;
padding:11px 22px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff;
font-size:13px; font-weight:600;
transition:background .2s;
}
body.page-pdp .btn-write-review:hover { background:var(--brand); }
body.page-pdp .btn-write-review svg { width:14px; height:14px; }
/* Summary card */
body.page-pdp .rs-card {
display:grid; grid-template-columns:auto auto 1fr; gap:48px;
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius-md); padding:28px 32px;
margin-bottom:28px; align-items:center;
}
body.page-pdp .rs-rating { text-align:center; padding-right:24px; border-right:1px solid var(--line-soft); }
body.page-pdp .rs-big {
font-size:54px; font-weight:800; letter-spacing:-2px; line-height:1;
color:var(--ink); margin-bottom:6px;
}
body.page-pdp .rs-stars-big { color:#FFCC00; font-size:14px; letter-spacing:1.5px; margin-bottom:4px; }
body.page-pdp .rs-count-big { font-size:12px; color:var(--muted-2); }
body.page-pdp .rs-bars { display:flex; flex-direction:column; gap:7px; min-width:200px; }
body.page-pdp .rs-bar {
display:flex; align-items:center; gap:10px;
font-size:11.5px; color:var(--muted-2);
font-variant-numeric:tabular-nums;
}
body.page-pdp .rs-lbl { width:24px; flex-shrink:0; }
body.page-pdp .rs-bar-track { flex:1; height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
body.page-pdp .rs-bar-fill { height:100%; background:var(--ink); border-radius:3px; }
body.page-pdp .rs-pct { width:32px; text-align:right; flex-shrink:0; }
body.page-pdp .rs-tags h5 {
font-size:11px; font-weight:700; color:var(--muted-2);
text-transform:uppercase; letter-spacing:1.4px; margin-bottom:12px;
}
body.page-pdp .rs-tag-list { display:flex; flex-wrap:wrap; gap:6px; }
body.page-pdp .rs-tag {
display:inline-flex; align-items:center; gap:6px;
padding:6px 11px; border-radius:var(--radius-pill);
background:var(--bg); border:1px solid transparent;
font-size:12px; color:var(--ink); font-weight:500;
transition:border-color .15s,background .15s;
}
body.page-pdp .rs-tag:hover { border-color:var(--ink); }
body.page-pdp .rs-tag span { color:var(--muted-2); font-weight:400; font-variant-numeric:tabular-nums; }
/* Reviews toolbar */
body.page-pdp .reviews-toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:0 0 20px;
}
body.page-pdp .reviews-toolbar-left { font-size:13px; color:var(--muted-2); }
body.page-pdp .reviews-toolbar-left strong { color:var(--ink); font-weight:700; }
body.page-pdp .reviews-toolbar-right {
display:flex; align-items:center; gap:10px;
font-size:13px; color:var(--muted-2);
}
body.page-pdp .reviews-toolbar-right select {
border:1px solid var(--line); border-radius:var(--radius-pill);
padding:8px 14px 8px 14px; background:#fff;
font-size:13px; font-weight:500; color:var(--ink); cursor:pointer;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center;
padding-right:32px;
}
body.page-pdp .reviews-toolbar-right select:hover { border-color:var(--ink); }
/* Reviews grid */
body.page-pdp .reviews-grid {
display:grid; grid-template-columns:1fr 1fr; gap:16px;
margin-bottom:32px;
}
body.page-pdp .review-card {
background:var(--surface); border:1px solid var(--line-soft);
border-radius:var(--radius-md); padding:24px;
transition:border-color .2s,box-shadow .2s,transform .2s;
display:flex; flex-direction:column;
}
body.page-pdp .review-card:hover {
border-color:var(--line);
box-shadow:0 4px 20px rgba(0,0,0,0.05);
transform:translateY(-2px);
}
body.page-pdp .rc-head {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:14px;
}
body.page-pdp .rc-stars { color:#FFCC00; font-size:14px; letter-spacing:1.5px; }
body.page-pdp .rc-stars .empty { color:var(--line); }
body.page-pdp .rc-date { font-size:11.5px; color:var(--muted-3); }
body.page-pdp .rc-title {
font-size:15px; font-weight:700; color:var(--ink);
letter-spacing:-.1px; margin-bottom:8px; line-height:1.3;
}
body.page-pdp .rc-body {
font-size:13.5px; line-height:1.6; color:var(--muted);
margin-bottom:18px; flex:1;
}
body.page-pdp .rc-foot {
display:flex; align-items:center; justify-content:space-between;
padding-top:14px; border-top:1px solid var(--line-soft);
gap:8px;
}
body.page-pdp .rc-author { display:flex; align-items:center; gap:10px; min-width:0; }
body.page-pdp .rc-avatar {
width:36px; height:36px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; color:var(--ink);
letter-spacing:.5px; flex-shrink:0;
text-shadow:0 1px 2px rgba(255,255,255,.4);
}
body.page-pdp .rc-name { font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
body.page-pdp .rc-verified {
font-size:11px; color:#34C759; font-weight:500;
display:inline-flex; align-items:center; gap:3px; margin-top:2px;
}
body.page-pdp .rc-verified svg { width:10px; height:10px; }
body.page-pdp .rc-helpful {
font-size:12px; color:var(--muted-2); font-weight:500;
padding:7px 12px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
transition:color .15s,border-color .15s;
flex-shrink:0;
}
body.page-pdp .rc-helpful:hover { color:var(--ink); border-color:var(--ink); }
body.page-pdp .reviews-load-more { text-align:center; }
body.page-pdp .btn-load-more {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-pdp .btn-load-more:hover {
border-color:var(--ink); transform:translateY(-1px);
box-shadow:var(--shadow-sm);
}
/* ── RELATED PRODUCTS ── */
body.page-pdp .related { padding:60px 0 80px; border-top:1px solid var(--line); }
body.page-pdp .related-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; }
body.page-pdp .related-head h2 {
font-size:24px; font-weight:700; letter-spacing:-.4px;
}
body.page-pdp .related-head a {
font-size:13px; color:var(--muted-2); font-weight:500;
display:inline-flex; align-items:center; gap:4px;
transition:color .2s;
}
body.page-pdp .related-head a:hover { color:var(--ink); }
body.page-pdp .related-head a svg { width:11px; height:11px; }
body.page-pdp .pgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px 18px; }
body.page-pdp .pcard { cursor:pointer; }
body.page-pdp .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-pdp .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-pdp .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-pdp .pcard:hover .pcard-img img { transform:scale(1.05); }
body.page-pdp .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-pdp .bg-new { background:var(--ink); color:#fff; }
body.page-pdp .bg-hot { background:var(--brand); color:#fff; }
body.page-pdp .bg-sale { background:#FF9500; color:#fff; }
body.page-pdp .bg-top { background:#34C759; color:#fff; }
body.page-pdp .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-pdp .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-pdp .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-pdp .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
body.page-pdp .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-pdp .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-pdp .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-pdp .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── HOVER ZOOM (main image) ── */
body.page-pdp .pdp-main-img { cursor:zoom-in; overflow:hidden; }
body.page-pdp .pdp-main-img img {
transition:transform .25s cubic-bezier(.2,.6,.3,1);
transform-origin:center center;
}
body.page-pdp .pdp-main-img.zooming img {
transition:transform-origin 80ms ease-out;
transform:scale(2.2);
}
/* hide the existing :hover scale rule when actively zooming */
body.page-pdp .pdp-main-img.zooming:hover img { transform:scale(2.2); }
/* ── LIGHTBOX ── */
body.page-pdp .lightbox {
position:fixed; inset:0; z-index:9999;
background:rgba(0,0,0,0.92);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
visibility:hidden; opacity:0;
transition:opacity .3s,visibility .3s;
display:flex; align-items:center; justify-content:center;
}
body.page-pdp .lightbox.on { visibility:visible; opacity:1; }
body.page-pdp .lb-stage {
position:relative;
width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
padding:64px 80px;
}
body.page-pdp .lb-img {
max-width:100%; max-height:100%;
width:auto; height:auto;
border-radius:var(--radius-md);
user-select:none; -webkit-user-drag:none;
box-shadow:0 24px 80px rgba(0,0,0,0.4);
animation:lbFade .35s ease-out;
}
@keyframes lbFade {
body.page-pdp from { opacity:0; transform:scale(.96); }
body.page-pdp to { opacity:1; transform:scale(1); }
}
body.page-pdp .lb-close, body.page-pdp .lb-nav {
position:absolute;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
color:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer; border-radius:50%;
transition:background .2s,border-color .2s,transform .2s;
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.page-pdp .lb-close:hover, body.page-pdp .lb-nav:hover {
background:rgba(255,255,255,0.18);
border-color:rgba(255,255,255,0.25);
}
body.page-pdp .lb-close { top:24px; right:24px; width:44px; height:44px; }
body.page-pdp .lb-close:hover { transform:rotate(90deg); }
body.page-pdp .lb-close svg { width:18px; height:18px; }
body.page-pdp .lb-nav { top:50%; transform:translateY(-50%); width:52px; height:52px; }
body.page-pdp .lb-nav:hover { transform:translateY(-50%) scale(1.06); }
body.page-pdp .lb-prev { left:24px; }
body.page-pdp .lb-next { right:24px; }
body.page-pdp .lb-nav svg { width:20px; height:20px; }
body.page-pdp .lb-counter {
position:absolute; left:50%; bottom:24px;
transform:translateX(-50%);
color:rgba(255,255,255,0.7);
font-size:13px; letter-spacing:1.5px;
font-variant-numeric:tabular-nums;
display:flex; align-items:center; gap:14px;
}
body.page-pdp .lb-counter .dots { display:flex; gap:6px; }
body.page-pdp .lb-counter .dot {
width:6px; height:6px; border-radius:50%;
background:rgba(255,255,255,0.25);
transition:background .2s,transform .2s;
cursor:pointer;
border:none; padding:0;
}
body.page-pdp .lb-counter .dot.on { background:#fff; transform:scale(1.4); }
body.page-pdp .lb-counter .dot:hover { background:rgba(255,255,255,0.55); }
@media (max-width:768px) {
body.page-pdp .lb-stage { padding:60px 16px; }
body.page-pdp .lb-close { top:14px; right:14px; width:38px; height:38px; }
body.page-pdp .lb-nav { width:44px; height:44px; }
body.page-pdp .lb-prev { left:8px; }
body.page-pdp .lb-next { right:8px; }
body.page-pdp .lb-counter { bottom:20px; font-size:12px; }
/* on touch, hover zoom is N/A — disable the cursor hint */
body.page-pdp .pdp-main-img { cursor:pointer; }
}
@media (hover:none) {
body.page-pdp .pdp-main-img.zooming img { transform:none !important; }
}
/* ── MOBILE STICKY CTA ── */
body.page-pdp .pdp-sticky { display:none; }
/* ── FOOTER ── */
body.page-pdp footer { background:#1D1D1F; padding:56px 0 36px; }
body.page-pdp .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-pdp .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-pdp .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-pdp .flogo em { color:var(--brand); font-style:normal; }
body.page-pdp .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-pdp .fsocs { display:flex; gap:8px; }
body.page-pdp .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-pdp .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-pdp .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-pdp .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-pdp .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-pdp .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-pdp .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-pdp .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-pdp .fpay { display:flex; gap:8px; }
body.page-pdp .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ─────────── TABLET ≤ 1024px ─────────── */
@media (max-width:1024px) {
body.page-pdp .wrap, body.page-pdp .fw { padding:0 28px; }
body.page-pdp header { width:calc(100% - 32px); }
body.page-pdp .hw { padding:0 16px 0 22px; gap:14px; }
body.page-pdp header nav { gap:0; }
body.page-pdp .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-pdp .search-pill span { display:none; }
body.page-pdp .search-pill { padding:8px 10px; }
body.page-pdp .pdp-grid { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; }
body.page-pdp .rs-card { gap:32px; padding:24px; }
body.page-pdp .rs-rating { padding-right:18px; }
body.page-pdp .rs-big { font-size:46px; }
body.page-pdp .pgrid { grid-template-columns:repeat(3, 1fr); gap:20px 14px; }
body.page-pdp .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-pdp .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ─────────── MOBILE ≤ 768px ─────────── */
@media (max-width:768px) {
body.page-pdp .hamburger { display:flex; }
body.page-pdp header nav, body.page-pdp header .search-pill, body.page-pdp .ib[title="Wishlist"], body.page-pdp .ib[title="Account"] { display:none; }
body.page-pdp header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-pdp .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-pdp .logo { font-size:17px; }
body.page-pdp .ib { width:40px; height:40px; }
body.page-pdp .ib svg { width:18px; height:18px; }
body.page-pdp .ann-bar { padding:8px 0; }
body.page-pdp .ann-track { gap:36px; }
body.page-pdp .ann-track span { font-size:11px; }
body.page-pdp .wrap, body.page-pdp .fw { padding:0 16px; }
body.page-pdp .bcrumb { padding:16px 0 18px; font-size:12px; }
/* PDP grid stacks */
body.page-pdp .pdp-grid { grid-template-columns:1fr; gap:22px; padding-bottom:32px; }
/* gallery: main image first, thumbs row below */
body.page-pdp .pdp-gallery { grid-template-columns:1fr; gap:10px; }
body.page-pdp .pdp-thumbs {
flex-direction:row; order:2;
overflow-x:auto; scrollbar-width:none;
padding-bottom:2px; -webkit-overflow-scrolling:touch;
}
body.page-pdp .pdp-thumbs::-webkit-scrollbar { display:none; }
body.page-pdp .pdp-thumb { width:60px; flex-shrink:0; border-radius:10px; }
body.page-pdp .pdp-main-img { border-radius:var(--radius-md); }
body.page-pdp .pdp-zoom-hint { display:none; }
body.page-pdp .pdp-badge { top:12px; left:12px; font-size:10px; padding:4px 10px; }
body.page-pdp .pdp-info { padding-top:0; }
body.page-pdp .pdp-info h1 { font-size:25px; }
body.page-pdp .pdp-tagline { font-size:13.5px; margin-bottom:18px; }
body.page-pdp .pdp-price { font-size:26px; }
body.page-pdp .pdp-price-row { padding-bottom:18px; margin-bottom:18px; }
/* hide desktop-only Add-to-Cart row, replaced by mobile sticky */
body.page-pdp .pdp-cta-row { display:none; }
body.page-pdp .pdp-wish { margin-bottom:20px; height:42px; }
body.page-pdp .pdp-trust { gap:9px; padding:16px 0; margin-bottom:20px; }
body.page-pdp .pdp-features ul { grid-template-columns:1fr; gap:9px; }
/* tabs */
body.page-pdp .pdp-tabs { padding:32px 0 40px; margin-top:14px; }
body.page-pdp .tab-nav { gap:22px; margin-bottom:24px; }
body.page-pdp .tab-btn { font-size:13px; padding:12px 0; }
body.page-pdp .spec-grid { grid-template-columns:130px 1fr; }
body.page-pdp .spec-grid > div { padding:11px 0; font-size:13px; }
/* reviews section mobile */
body.page-pdp .reviews-section { padding:36px 0 32px; }
body.page-pdp .reviews-head h2 { font-size:22px; }
body.page-pdp .btn-write-review { padding:9px 16px; font-size:12px; }
body.page-pdp .btn-write-review svg { width:13px; height:13px; }
body.page-pdp .rs-card {
grid-template-columns:1fr; gap:24px;
padding:22px; margin-bottom:22px;
}
body.page-pdp .rs-rating {
text-align:left; padding-right:0; padding-bottom:20px;
border-right:none; border-bottom:1px solid var(--line-soft);
display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
body.page-pdp .rs-big { font-size:40px; margin-bottom:0; }
body.page-pdp .rs-stars-big { font-size:13px; margin-bottom:0; }
body.page-pdp .rs-count-big { width:100%; }
body.page-pdp .rs-bars { min-width:0; }
body.page-pdp .reviews-toolbar { flex-direction:column; align-items:stretch; gap:10px; }
body.page-pdp .reviews-toolbar-right { justify-content:space-between; }
body.page-pdp .reviews-grid { grid-template-columns:1fr; gap:14px; margin-bottom:24px; }
body.page-pdp .review-card { padding:20px; }
body.page-pdp .rc-helpful { padding:6px 10px; font-size:11px; }
/* Woo meta block */
body.page-pdp .pdp-meta-row { font-size:12px; }
body.page-pdp .pdp-meta-row .lbl { min-width:64px; font-size:10px; }
/* related */
body.page-pdp .related { padding:36px 0 100px; } /* extra bottom for sticky cta */
body.page-pdp .related-head h2 { font-size:20px; }
body.page-pdp .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-pdp .pcard-img { border-radius:var(--radius-sm); }
body.page-pdp .pcard-name { font-size:13px; }
body.page-pdp .pcard-p { font-size:14px; }
/* footer */
body.page-pdp footer { padding:40px 0 28px; }
body.page-pdp .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-pdp .ftop > div:first-child { grid-column:1/-1; }
body.page-pdp .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* Mobile sticky CTA bar */
body.page-pdp .pdp-sticky {
display:flex; align-items:center; gap:10px;
position:fixed; left:0; right:0; bottom:0; z-index:700;
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
background:rgba(255,255,255,0.94);
backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
border-top:1px solid var(--line);
}
body.page-pdp .pdp-sticky-price { display:flex; flex-direction:column; line-height:1.1; flex-shrink:0; }
body.page-pdp .pdp-sticky-price .pp { font-size:16px; font-weight:700; }
body.page-pdp .pdp-sticky-price .po { font-size:11px; color:var(--muted-3); text-decoration:line-through; }
body.page-pdp .pdp-sticky-cart {
flex:1; height:46px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff;
font-size:14px; font-weight:600; letter-spacing:.3px;
display:flex; align-items:center; justify-content:center;
}
body.page-pdp .pdp-sticky-cart:active { background:var(--brand); }
}
@media (max-width:380px) {
body.page-pdp .hw { padding:0 4px 0 14px; }
body.page-pdp .logo { font-size:16px; }
body.page-pdp .pgrid { gap:14px 10px; }
}
/* ============================================================
contact.html
============================================================ */
/* ===== contact.html ===== */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-contact body.no-scroll { overflow:hidden; }
body.page-contact a { text-decoration:none; color:inherit; }
body.page-contact button { border:none; cursor:pointer; font-family:inherit; background:none; }
body.page-contact img { display:block; max-width:100%; }
body.page-contact input, body.page-contact select { font-family:inherit; }
body.page-contact a:focus-visible, body.page-contact button:focus-visible, body.page-contact input:focus-visible, body.page-contact summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-contact .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-contact .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-contact .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-contact .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-contact .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER CAPSULE ── */
body.page-contact header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800; border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-contact .hw { padding:0 24px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-contact .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-contact .logo em { color:#FF2D55; font-style:normal; }
body.page-contact header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-contact .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-contact .ni > a:hover { color:#1D1D1F; background:rgba(0,0,0,0.05); }
body.page-contact .chev { width:11px; height:11px; opacity:.4; transition:transform .2s; }
body.page-contact .ni:hover .chev { transform:rotate(180deg); }
body.page-contact .dg { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
body.page-contact .di { padding:11px; border-radius:10px; transition:background .15s; cursor:pointer; }
body.page-contact .di:hover { background:#F5F5F7; }
body.page-contact .di-name { font-size:13px; font-weight:600; margin-bottom:2px; }
body.page-contact .di-desc { font-size:11px; color:#86868B; line-height:1.4; }
body.page-contact .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-contact .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-contact .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-contact .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-contact .search-pill span { font-size:13px; color:#86868B; }
body.page-contact .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-contact .ib:hover { background:rgba(0,0,0,0.05); }
body.page-contact .ib svg { width:17px; height:17px; }
body.page-contact .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:#FF2D55; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
/* ── WRAPPER ── */
body.page-contact .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-contact .wrap > *:first-child { padding-top:24px; }
/* ── SHARED ── */
body.page-contact .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-contact .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-contact .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
/* ── PAGE HERO ── */
body.page-contact .page-hero {
padding:48px 0 0;
position:relative;
}
body.page-contact .page-hero-inner {
background:#1D1D1F; border-radius:28px;
padding:72px 72px 0;
display:grid; grid-template-columns:1fr 1fr;
gap:60px; align-items:flex-end;
overflow:hidden; position:relative; min-height:380px;
}
body.page-contact .page-hero-inner::before {
content:''; position:absolute; top:-100px; right:-100px;
width:500px; height:500px; border-radius:50%;
background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%);
filter:blur(60px);
}
body.page-contact .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-contact .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-contact .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-contact .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-contact .hero-badges { display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
body.page-contact .hero-badge {
display:inline-flex; align-items:center; gap:6px;
background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
border-radius:100px; padding:6px 14px;
font-size:12px; color:rgba(255,255,255,0.6); font-weight:500;
}
body.page-contact .hero-badge .dot { width:6px; height:6px; border-radius:50%; background:#34C759; flex-shrink:0; }
body.page-contact .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-contact .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }
/* ── CONTACT GRID ── */
body.page-contact .contact-s { padding:64px 0 72px; }
body.page-contact .contact-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
/* Contact Form */
body.page-contact .form-card {
background:#fff; border-radius:24px; padding:48px;
box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
body.page-contact .form-card h2 { font-size:24px; font-weight:700; letter-spacing:-.3px; margin-bottom:6px; }
body.page-contact .form-card .sub { font-size:13px; color:#86868B; margin-bottom:36px; line-height:1.6; }
body.page-contact .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
body.page-contact .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
body.page-contact .form-group label { font-size:12px; font-weight:600; color:#515154; letter-spacing:.3px; }
body.page-contact .form-input, body.page-contact .form-select, body.page-contact .form-textarea {
padding:13px 16px; border-radius:12px;
border:1.5px solid #E8E8ED; background:#FAFAFA;
font-size:14px; color:#1D1D1F; font-family:inherit;
outline:none; transition:border-color .2s, background .2s;
width:100%;
}
body.page-contact .form-input:focus, body.page-contact .form-select:focus, body.page-contact .form-textarea:focus {
border-color:#FF2D55; background:#fff;
}
body.page-contact .form-input::placeholder, body.page-contact .form-textarea::placeholder { color:#AEAEB2; }
body.page-contact .form-select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23AEAEB2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
body.page-contact .form-textarea { resize:vertical; min-height:130px; line-height:1.6; }
/* File upload */
body.page-contact .upload-zone {
border:1.5px dashed #E8E8ED; border-radius:12px;
padding:24px; text-align:center; cursor:pointer;
transition:border-color .2s, background .2s; background:#FAFAFA;
}
body.page-contact .upload-zone:hover { border-color:#FF2D55; background:#FFF5F7; }
body.page-contact .upload-zone-icon { display:flex; justify-content:center; margin-bottom:8px; }
body.page-contact .upload-zone-text { font-size:13px; color:#86868B; line-height:1.5; }
body.page-contact .upload-zone-text strong { color:#1D1D1F; font-weight:600; }
/* Privacy note */
body.page-contact .form-privacy { display:flex; align-items:flex-start; gap:10px; margin:20px 0; }
body.page-contact .form-privacy input[type="checkbox"] { width:16px; height:16px; margin-top:1px; accent-color:#FF2D55; flex-shrink:0; cursor:pointer; }
body.page-contact .form-privacy label { font-size:12px; color:#86868B; line-height:1.55; cursor:pointer; }
body.page-contact .form-privacy a { color:#FF2D55; }
body.page-contact .btn-submit {
width:100%; padding:16px; border-radius:14px;
background:#1D1D1F; color:#fff;
font-size:15px; font-weight:700; cursor:pointer;
transition:all .25s; font-family:inherit;
display:flex; align-items:center; justify-content:center; gap:8px;
}
body.page-contact .btn-submit:hover { background:#3a3a3c; transform:scale(1.01); }
body.page-contact .btn-submit svg { width:16px; height:16px; transition:transform .2s; }
body.page-contact .btn-submit:hover svg { transform:translateX(3px); }
/* Success message */
body.page-contact .form-success {
display:none; text-align:center; padding:40px 20px;
}
body.page-contact .form-success-icon { display:flex; justify-content:center; margin-bottom:16px; }
body.page-contact .form-success h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
body.page-contact .form-success p { font-size:13px; color:#86868B; line-height:1.6; }
/* Right sidebar */
body.page-contact .contact-sidebar { display:flex; flex-direction:column; gap:16px; }
/* Info card */
body.page-contact .info-card {
background:#fff; border-radius:20px; padding:32px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
body.page-contact .info-card h3 { font-size:16px; font-weight:700; margin-bottom:20px; }
body.page-contact .info-item { display:flex; gap:14px; margin-bottom:20px; }
body.page-contact .info-item:last-child { margin-bottom:0; }
body.page-contact .info-icon {
width:40px; height:40px; border-radius:12px; background:#F5F5F7;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.page-contact .info-label { font-size:11px; font-weight:600; color:#86868B; letter-spacing:.5px; text-transform:uppercase; margin-bottom:3px; }
body.page-contact .info-val { font-size:14px; font-weight:600; color:#1D1D1F; }
body.page-contact .info-sub { font-size:12px; color:#86868B; margin-top:1px; }
/* Response time card */
body.page-contact .resp-card {
background:#1D1D1F; border-radius:20px; padding:28px;
position:relative; overflow:hidden;
}
body.page-contact .resp-card::before { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.25) 0%,transparent 70%); filter:blur(30px); }
body.page-contact .resp-card h3 { font-size:15px; font-weight:700; color:#fff; margin-bottom:14px; position:relative; z-index:1; }
body.page-contact .resp-items { display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
body.page-contact .resp-item { display:flex; justify-content:space-between; align-items:center; }
body.page-contact .resp-ch { font-size:13px; color:rgba(255,255,255,0.55); }
body.page-contact .resp-time { font-size:12px; font-weight:600; color:#fff; background:rgba(255,255,255,0.1); padding:4px 10px; border-radius:100px; }
body.page-contact .resp-time.fast { background:rgba(52,199,89,0.2); color:#34C759; }
/* Social card */
body.page-contact .social-card {
background:#F0EDE8; border-radius:20px; padding:28px;
}
body.page-contact .social-card h3 { font-size:15px; font-weight:700; margin-bottom:16px; }
body.page-contact .social-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.page-contact .soc-link {
display:flex; align-items:center; gap:10px;
background:#fff; border-radius:12px; padding:12px 14px;
font-size:13px; font-weight:600; color:#1D1D1F;
transition:all .2s; cursor:pointer; border:1.5px solid transparent;
}
body.page-contact .soc-link:hover { border-color:#FF2D55; color:#FF2D55; }
body.page-contact .soc-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* ── MAP SECTION ── */
body.page-contact .map-s { padding:0 0 72px; }
body.page-contact .map-card {
background:#fff; border-radius:24px; overflow:hidden;
box-shadow:0 2px 12px rgba(0,0,0,0.04);
display:grid; grid-template-columns:1fr 340px;
min-height:400px;
}
body.page-contact .map-embed { position:relative; overflow:hidden; min-height:400px; }
body.page-contact .map-embed iframe,
body.page-contact .map-embed svg { width:100%; height:100%; border:none; min-height:400px; display:block; }
body.page-contact .map-embed iframe { filter:grayscale(15%) contrast(1.05); }
body.page-contact .map-info { padding:40px 36px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
body.page-contact .map-info h2 { font-size:22px; font-weight:700; letter-spacing:-.3px; }
body.page-contact .map-info p { font-size:13px; color:#86868B; line-height:1.7; }
body.page-contact .map-detail { display:flex; flex-direction:column; gap:14px; }
body.page-contact .map-item { display:flex; gap:12px; align-items:flex-start; }
body.page-contact .map-item-icon { width:34px; height:34px; background:#F5F5F7; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.page-contact .map-item-label { font-size:11px; font-weight:600; color:#86868B; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
body.page-contact .map-item-val { font-size:13px; font-weight:600; color:#1D1D1F; }
body.page-contact .btn-directions {
display:inline-flex; align-items:center; gap:8px;
background:#1D1D1F; color:#fff; padding:12px 22px;
border-radius:100px; font-size:13px; font-weight:600;
transition:all .2s; align-self:flex-start;
}
body.page-contact .btn-directions:hover { background:#3a3a3c; transform:scale(1.02); }
/* ── FAQ SECTION ── */
body.page-contact .faq-s { padding:0 0 72px; }
body.page-contact .faq-grid { display:grid; grid-template-columns:360px 1fr; gap:64px; align-items:start; }
body.page-contact .faq-left { position:sticky; top:100px; }
body.page-contact .faq-left .st { margin-bottom:16px; }
body.page-contact .faq-left p { font-size:13px; color:#86868B; line-height:1.7; margin-bottom:24px; }
body.page-contact .faq-cats { display:flex; flex-direction:column; gap:6px; }
body.page-contact .faq-cat {
padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500;
color:#515154; cursor:pointer; transition:all .2s; text-align:left;
border:1.5px solid transparent;
}
body.page-contact .faq-cat.on { background:#fff; color:#1D1D1F; font-weight:600; border-color:#E8E8ED; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-contact .faq-cat:hover:not(.on) { background:rgba(0,0,0,0.03); color:#1D1D1F; }
body.page-contact .faq-list { display:flex; flex-direction:column; gap:12px; }
body.page-contact .faq-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-contact .faq-q {
display:flex; justify-content:space-between; align-items:center;
padding:20px 24px; cursor:pointer; gap:16px;
transition:background .2s;
}
body.page-contact .faq-q:hover { background:#FAFAFA; }
body.page-contact .faq-q-text { font-size:14px; font-weight:600; color:#1D1D1F; line-height:1.4; }
body.page-contact .faq-chevron {
width:28px; height:28px; border-radius:50%; background:#F5F5F7;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
transition:background .2s, transform .25s;
}
body.page-contact .faq-chevron svg { width:12px; height:12px; color:#515154; }
body.page-contact .faq-item.open .faq-chevron { background:#FF2D55; transform:rotate(180deg); }
body.page-contact .faq-item.open .faq-chevron svg { color:#fff; }
body.page-contact .faq-a {
max-height:0; overflow:hidden;
transition:max-height .35s cubic-bezier(.25,1,.5,1);
}
body.page-contact .faq-item.open .faq-a { max-height:300px; }
body.page-contact .faq-a-inner { padding:0 24px 22px; font-size:13px; color:#86868B; line-height:1.75; border-top:1px solid #F5F5F7; padding-top:18px; }
body.page-contact .faq-a-inner a { color:#FF2D55; font-weight:500; }
/* ── SUPPORT CHANNELS ── */
body.page-contact .channels-s { padding:0 0 72px; }
body.page-contact .channels-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.page-contact .ch-card {
background:#fff; border-radius:20px; padding:32px 28px;
display:flex; flex-direction:column; gap:16px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
transition:all .3s; cursor:pointer;
border:1.5px solid transparent;
}
body.page-contact .ch-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.09); border-color:#FF2D55; }
body.page-contact .ch-icon-wrap {
width:52px; height:52px; border-radius:16px; background:#F5F5F7;
display:flex; align-items:center; justify-content:center;
transition:background .2s;
}
body.page-contact .ch-card:hover .ch-icon-wrap { background:#FFF0F3; }
body.page-contact .ch-title { font-size:16px; font-weight:700; }
body.page-contact .ch-desc { font-size:12px; color:#86868B; line-height:1.6; }
body.page-contact .ch-action { font-size:13px; font-weight:600; color:#FF2D55; margin-top:auto; display:flex; align-items:center; gap:4px; }
body.page-contact .ch-action::after { content:'→'; transition:transform .2s; }
body.page-contact .ch-card:hover .ch-action::after { transform:translateX(3px); }
body.page-contact .ch-badge { font-size:10px; font-weight:700; background:#E8FFF0; color:#34C759; padding:3px 8px; border-radius:100px; letter-spacing:.3px; display:inline-block; }
/* ── TRUST STRIP ── */
body.page-contact .trust-s {
margin-bottom:72px;
background:#fff; border-radius:20px; padding:36px 48px;
display:flex; align-items:center; justify-content:space-between; gap:24px;
box-shadow:0 2px 8px rgba(0,0,0,0.04); flex-wrap:wrap;
}
body.page-contact .trust-item { display:flex; align-items:center; gap:12px; }
body.page-contact .trust-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; }
body.page-contact .trust-title { font-size:13px; font-weight:700; }
body.page-contact .trust-sub { font-size:11px; color:#86868B; }
body.page-contact .trust-divider { width:1px; height:40px; background:#E8E8ED; flex-shrink:0; }
/* ── NEWSLETTER MINI ── */
body.page-contact .nl-s { padding:0 0 72px; }
body.page-contact .nl-banner {
background:#1D1D1F; border-radius:24px; padding:52px 64px;
display:flex; align-items:center; gap:80px;
position:relative; overflow:hidden;
}
body.page-contact .nl-banner::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.2) 0%,transparent 70%); filter:blur(40px); }
body.page-contact .nl-left { flex:1; position:relative; z-index:1; }
body.page-contact .nl-left .sl { color:rgba(255,255,255,0.3); }
body.page-contact .nl-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-contact .nl-left p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.65; }
body.page-contact .nl-right { min-width:380px; position:relative; z-index:1; }
body.page-contact .nl-form { display:flex; gap:10px; }
body.page-contact .nl-in { flex:1; padding:12px 18px; border-radius:100px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; outline:none; font-family:inherit; }
body.page-contact .nl-in::placeholder { color:rgba(255,255,255,0.3); }
body.page-contact .nl-in:focus { border-color:rgba(255,45,85,0.6); }
body.page-contact .nl-btn { background:#FF2D55; color:#fff; padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .2s; }
body.page-contact .nl-btn:hover { background:#FF4D6A; }
/* ── FOOTER ── */
body.page-contact footer { background:#1D1D1F; padding:56px 0 36px; }
body.page-contact .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-contact .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-contact .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-contact .flogo em { color:#FF2D55; font-style:normal; }
body.page-contact .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-contact .fsocs { display:flex; gap:8px; }
body.page-contact .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; transition:all .2s; color:rgba(255,255,255,.5); font-weight:600; }
body.page-contact .fsoc:hover { background:#FF2D55; border-color:#FF2D55; color:#fff; }
body.page-contact .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-contact .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-contact .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-contact .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-contact .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-contact .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-contact .fpay { display:flex; gap:8px; }
body.page-contact .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ── SCROLL REVEAL ── */
body.page-contact .rv { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
body.page-contact .rv.show { opacity:1; transform:translateY(0); }
body.page-contact .rv2 { opacity:0; transform:translateY(20px); transition:opacity .65s ease .1s,transform .65s ease .1s; }
body.page-contact .rv2.show { opacity:1; transform:translateY(0); }
/* ─────────────────────────────────────
RESPONSIVE
───────────────────────────────────── */
/* Tablet landscape ≤1100px */
@media (max-width:1024px) {
body.page-contact .wrap { padding:0 28px; }
body.page-contact .hw { padding:0 20px 0 24px; }
body.page-contact .page-hero-inner { padding:56px 56px 0; gap:40px; }
body.page-contact .hero-left h1 { font-size:44px; }
body.page-contact .channels-grid { grid-template-columns:repeat(2,1fr); }
body.page-contact .contact-grid { grid-template-columns:1fr 320px; gap:16px; }
body.page-contact .form-card { padding:36px; }
body.page-contact .faq-grid { grid-template-columns:280px 1fr; gap:40px; }
body.page-contact .map-card { grid-template-columns:1fr 300px; }
body.page-contact .ftop { grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; }
body.page-contact .ftop > div:last-child { display:none; }
body.page-contact .nl-banner { padding:40px 48px; gap:48px; }
}
/* Tablet portrait ≤860px */
@media (max-width:768px) {
/* Capsule header collapses nav */
body.page-contact header { top:10px; width:calc(100% - 32px); border-radius:100px; }
body.page-contact .hw { height:54px; padding:0 14px 0 20px; gap:8px; }
body.page-contact header nav { display:none; }
body.page-contact .search-pill span { display:none; }
body.page-contact .search-pill { padding:7px 10px; }
body.page-contact .wrap { padding:0 20px; }
body.page-contact .wrap > *:first-child { margin-top:80px; }
/* Hero */
body.page-contact .page-hero-inner {
grid-template-columns:1fr;
padding:48px 36px 0;
min-height:auto;
}
body.page-contact .hero-right { display:none; }
body.page-contact .hero-left { padding-bottom:48px; }
body.page-contact .hero-left h1 { font-size:38px; }
body.page-contact .hero-left p { font-size:14px; }
/* Channels */
body.page-contact .channels-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
body.page-contact .ch-card { padding:24px 20px; }
/* Contact grid */
body.page-contact .contact-grid { grid-template-columns:1fr; }
body.page-contact .contact-sidebar { flex-direction:row; flex-wrap:wrap; gap:12px; }
body.page-contact .contact-sidebar > * { flex:1 1 calc(50% - 6px); min-width:260px; }
body.page-contact .form-card { padding:28px; }
/* FAQ */
body.page-contact .faq-grid { grid-template-columns:1fr; gap:24px; }
body.page-contact .faq-left { position:static; }
body.page-contact .faq-cats { flex-direction:row; flex-wrap:wrap; gap:6px; }
body.page-contact .faq-cat { padding:7px 14px; }
/* Map */
body.page-contact .map-card { grid-template-columns:1fr; }
body.page-contact .map-embed iframe { min-height:280px; }
body.page-contact .map-info { padding:28px; }
/* Trust strip */
body.page-contact .trust-s { padding:24px 28px; flex-wrap:wrap; gap:16px; justify-content:flex-start; }
body.page-contact .trust-divider { display:none; }
body.page-contact .trust-item { flex:1 1 calc(50% - 8px); min-width:140px; }
/* Newsletter */
body.page-contact .nl-banner { flex-direction:column; gap:28px; padding:40px 36px; }
body.page-contact .nl-right { min-width:unset; width:100%; }
/* Footer */
body.page-contact .ftop { grid-template-columns:1fr 1fr; gap:28px 36px; }
body.page-contact .ftop > div:first-child { grid-column:span 2; }
body.page-contact .ftop > div:last-child { display:block; }
}
/* Mobile ≤560px */
@media (max-width:380px) {
body.page-contact header { width:calc(100% - 24px); }
body.page-contact .hw { gap:6px; }
body.page-contact .logo { font-size:17px; }
body.page-contact .wrap { padding:0 16px; }
body.page-contact .wrap > *:first-child { margin-top:72px; }
/* Hero */
body.page-contact .page-hero-inner { padding:36px 24px 0; }
body.page-contact .hero-left h1 { font-size:32px; letter-spacing:-1px; }
body.page-contact .hero-badges { gap:6px; }
body.page-contact .hero-badge { font-size:11px; padding:5px 10px; }
/* Channels */
body.page-contact .channels-grid { grid-template-columns:1fr; }
/* Form */
body.page-contact .form-row { grid-template-columns:1fr; }
body.page-contact .form-card { padding:22px 20px; }
body.page-contact .form-card h2 { font-size:20px; }
/* Sidebar */
body.page-contact .contact-sidebar { flex-direction:column; }
body.page-contact .contact-sidebar > * { flex:none; width:100%; }
/* FAQ */
body.page-contact .faq-cats { }
body.page-contact .faq-q { padding:16px 18px; }
body.page-contact .faq-q-text { font-size:13px; }
body.page-contact .faq-a-inner { padding:14px 18px 18px; }
/* Map */
body.page-contact .map-info { padding:22px; }
body.page-contact .map-info h2 { font-size:18px; }
body.page-contact .sh .st { font-size:26px; }
/* Trust */
body.page-contact .trust-item { flex:1 1 100%; }
/* Newsletter */
body.page-contact .nl-banner { padding:32px 24px; }
body.page-contact .nl-form { flex-direction:column; }
body.page-contact .nl-btn { width:100%; padding:13px; }
body.page-contact .nl-left h2 { font-size:22px; }
/* Footer */
body.page-contact .ftop { grid-template-columns:1fr; gap:24px; }
body.page-contact .ftop > div:first-child { grid-column:span 1; }
body.page-contact .fbot { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* ── HAMBURGER & MOBILE DRAWER (added for consistency) ── */
body.page-contact .hamburger { display:none; }
body.page-contact .mobile-drawer { display:none; }
@media (max-width:1024px) {
body.page-contact .hamburger { display:flex; }
body.page-contact header nav { display:none; }
}
@media (max-width:1024px) {
body.page-contact .mobile-drawer { display:block; }
body.page-contact .mobile-drawer .md-back { position:fixed; inset:0; background:rgba(0,0,0,0); backdrop-filter:blur(0); z-index:998; transition:background .4s, backdrop-filter .4s; pointer-events:none; }
body.page-contact .mobile-drawer.on .md-back { background:rgba(0,0,0,.28); backdrop-filter:blur(6px); pointer-events:auto; }
body.page-contact .md-panel { position:fixed; top:0; right:0; width:min(420px,85vw); height:100vh; background:var(--surface); z-index:999; transform:translateX(100%); transition:transform .5s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; border-left:1.5px solid var(--line); }
body.page-contact .mobile-drawer.on .md-panel { transform:translateX(0); }
body.page-contact .md-head { display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:72px; border-bottom:1.5px solid var(--line); }
body.page-contact .md-head .logo { font-size:22px; font-weight:700; letter-spacing:-.5px; }
body.page-contact .md-head .logo em { color:var(--brand); font-style:normal; }
body.page-contact .md-close { width:36px; height:36px; border-radius:50%; background:var(--line-soft); display:flex; align-items:center; justify-content:center; }
body.page-contact .md-body { flex:1; overflow-y:auto; padding:20px 24px 40px; }
}
@media (max-width:768px) {
body.page-contact .hamburger { display:flex; }
body.page-contact header nav { display:none; }
body.page-contact .search-pill { display:none; }
}
/* ============================================================
faq.html
============================================================ */
/* ===== faq.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-faq body.no-scroll { overflow:hidden; }
body.page-faq input, body.page-faq select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-faq body.no-scroll { overflow:hidden; }
body.page-faq a { text-decoration:none; color:inherit; }
body.page-faq button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-faq img { display:block; max-width:100%; }
body.page-faq input, body.page-faq select { font-family:inherit; }
body.page-faq a:focus-visible, body.page-faq button:focus-visible, body.page-faq input:focus-visible, body.page-faq summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-faq .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-faq .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-faq .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-faq .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-faq .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-faq header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-faq header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-faq .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-faq .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-faq .logo em { color:var(--brand); font-style:normal; }
body.page-faq header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-faq .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-faq .ni > a:hover, body.page-faq .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-faq .ni.active > a { color:var(--brand); }
body.page-faq .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-faq .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-faq .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-faq .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-faq .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-faq .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-faq .ib:hover { background:rgba(0,0,0,0.05); }
body.page-faq .ib svg { width:17px; height:17px; }
body.page-faq .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-faq .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-faq .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-faq .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-faq .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-faq .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-faq .bcrumb a:hover { color:var(--ink); }
body.page-faq .bcrumb .sep { color:var(--muted-3); }
body.page-faq .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-faq .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-faq .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-faq .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-faq .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-faq .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-faq .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-faq .chips-row:empty { padding:0; }
body.page-faq .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-faq .fchip:hover { border-color:var(--ink); }
body.page-faq .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-faq .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-faq .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-faq .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-faq .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-faq .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-faq .filters::-webkit-scrollbar { width:5px; }
body.page-faq .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-faq .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-faq .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-faq .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-faq .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-faq .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-faq .fgroup { border-top:1px solid var(--line-soft); }
body.page-faq .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-faq .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-faq .fgroup > summary::-webkit-details-marker { display:none; }
body.page-faq .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-faq .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-faq .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-faq .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-faq .fopt:hover { color:var(--ink); }
body.page-faq .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-faq .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-faq .fopt-mark.radio { border-radius:50%; }
body.page-faq .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-faq .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-faq .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-faq .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-faq .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-faq .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-faq .fopt-text { flex:1; }
body.page-faq .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-faq .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-faq .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-faq .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-faq .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-faq .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-faq .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-faq .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-faq .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-faq .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-faq .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-faq .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-faq .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-faq .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-faq .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-faq .results { min-width:0; }
body.page-faq .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-faq .t-left { display:flex; align-items:center; gap:14px; }
body.page-faq .t-count { font-size:13px; color:var(--muted-2); }
body.page-faq .t-count strong { color:var(--ink); font-weight:700; }
body.page-faq .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-faq .sortdrop { position:relative; z-index:10; }
body.page-faq .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-faq .sortbtn:hover { border-color:var(--ink); }
body.page-faq .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-faq .sortbtn .val { font-weight:600; }
body.page-faq .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-faq .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-faq .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-faq .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-faq .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-faq .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-faq .sortopt.on { color:var(--ink); font-weight:600; }
body.page-faq .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-faq .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-faq .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-faq .vbtn:hover { color:var(--ink); }
body.page-faq .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-faq .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-faq .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-faq .fbtn-mobile svg { width:14px; height:14px; }
body.page-faq .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-faq .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-faq .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-faq .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-faq .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-faq .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-faq .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-faq .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-faq .pgrid.list-view .pcard-quick { display:none; }
body.page-faq .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-faq .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-faq .pgrid.list-view .pcard-name { font-size:16px; }
body.page-faq .pgrid.list-view .pcard-var { font-size:13px; }
body.page-faq .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-faq .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-faq .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-faq .pcard { cursor:pointer; }
body.page-faq .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-faq .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-faq .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-faq .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-faq .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-faq .bg-new { background:var(--ink); color:#fff; }
body.page-faq .bg-hot { background:var(--brand); color:#fff; }
body.page-faq .bg-sale { background:#FF9500; color:#fff; }
body.page-faq .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-faq .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-faq .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-faq .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-faq .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-faq .pcard:hover .pcard-quick { bottom:12px; }
body.page-faq .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-faq .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-faq .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-faq .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-faq .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-faq .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-faq .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-faq .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-faq .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-faq .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-faq .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-faq .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-faq .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-faq footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-faq .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-faq .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-faq .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-faq .flogo em { color:var(--brand); font-style:normal; }
body.page-faq .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-faq .fsocs { display:flex; gap:8px; }
body.page-faq .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-faq .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-faq .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-faq .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-faq .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-faq .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-faq .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-faq .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-faq .fpay { display:flex; gap:8px; }
body.page-faq .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-faq .wrap, body.page-faq .fw { padding:0 28px; }
body.page-faq header { width:calc(100% - 32px); }
body.page-faq .hw { padding:0 16px 0 22px; gap:14px; }
body.page-faq header nav { gap:0; }
body.page-faq .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-faq .search-pill span { display:none; }
body.page-faq .search-pill { padding:8px 10px; }
body.page-faq .shop-title { font-size:34px; }
body.page-faq .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-faq .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-faq .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-faq .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-faq .hamburger { display:flex; }
body.page-faq header nav, body.page-faq header .search-pill, body.page-faq .ib[title="Wishlist"], body.page-faq .ib[title="Account"] { display:none; }
body.page-faq header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-faq .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-faq .logo { font-size:17px; }
body.page-faq .ib { width:40px; height:40px; }
body.page-faq .ib svg { width:18px; height:18px; }
body.page-faq .ann-bar { padding:8px 0; }
body.page-faq .ann-track { gap:36px; }
body.page-faq .ann-track span { font-size:11px; }
body.page-faq .wrap, body.page-faq .fw { padding:0 16px; }
/* hero */
body.page-faq .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-faq .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-faq .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-faq .shop-meta { padding-bottom:0; }
body.page-faq .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-faq .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-faq .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-faq .filters.on { transform:translateY(0); }
body.page-faq .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-faq .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-faq .fgroup > summary { padding:18px 20px 14px; }
body.page-faq .fgroup-body { padding:0 20px 18px; }
body.page-faq .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-faq .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-faq .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-faq .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-faq .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-faq .toolbar { gap:10px; padding-bottom:14px; }
body.page-faq .t-left { gap:10px; flex:1; }
body.page-faq .sortbtn .lbl { display:none; }
body.page-faq .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-faq .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-faq .pcard-img { border-radius:var(--radius-sm); }
body.page-faq .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-faq .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-faq .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-faq .pcard-name { font-size:13px; }
body.page-faq .pcard-p { font-size:14px; }
/* footer */
body.page-faq footer { padding:40px 0 28px; margin-top:48px; }
body.page-faq .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-faq .ftop > div:first-child { grid-column:1/-1; }
body.page-faq .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-faq .filters .f-head-clear-desktop { display:none; }
body.page-faq .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-faq .hw { padding:0 4px 0 14px; }
body.page-faq .logo { font-size:16px; }
body.page-faq .ib { width:36px; height:36px; }
body.page-faq .pgrid { gap:14px 10px; }
body.page-faq .pcard-name, body.page-faq .pcard-p { font-size:12.5px; }
}
/* ── PAGE HERO ── */
body.page-faq .page-hero { padding:24px 0 0; }
body.page-faq .page-hero-inner {
background:#1D1D1F; border-radius:28px; padding:72px 72px 0;
display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-end;
overflow:hidden; position:relative; min-height:380px;
}
body.page-faq .page-hero-inner::before {
content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px);
}
body.page-faq .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-faq .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-faq .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-faq .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-faq .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-faq .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }
/* ── FAQ SECTION ── */
body.page-faq .faq-s { padding:64px 0 72px; }
body.page-faq .faq-grid { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
body.page-faq .faq-left { position:sticky; top:100px; }
body.page-faq .faq-left .st { margin-bottom:16px; }
body.page-faq .faq-left p { font-size:13px; color:#86868B; line-height:1.7; margin-bottom:24px; }
body.page-faq .faq-cats { display:flex; flex-direction:column; gap:6px; }
body.page-faq .faq-cat {
padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500;
color:#515154; cursor:pointer; transition:all .2s; text-align:left; border:1.5px solid transparent; background:none;
}
body.page-faq .faq-cat.on { background:#fff; color:#1D1D1F; font-weight:600; border-color:#E8E8ED; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
body.page-faq .faq-cat:hover:not(.on) { background:rgba(0,0,0,0.03); color:#1D1D1F; }
body.page-faq .faq-list { display:flex; flex-direction:column; gap:12px; }
body.page-faq .faq-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-faq .faq-q {
display:flex; justify-content:space-between; align-items:center;
padding:20px 24px; cursor:pointer; gap:16px; transition:background .2s; border:none; background:none; width:100%; text-align:left; font:inherit;
}
body.page-faq .faq-q:hover { background:#FAFAFA; }
body.page-faq .faq-q-text { font-size:14px; font-weight:600; color:#1D1D1F; line-height:1.4; }
body.page-faq .faq-chevron {
width:28px; height:28px; border-radius:50%; background:#F5F5F7;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
transition:background .2s, transform .25s;
}
body.page-faq .faq-chevron svg { width:12px; height:12px; color:#515154; }
body.page-faq .faq-item.open .faq-chevron { background:#FF2D55; transform:rotate(180deg); }
body.page-faq .faq-item.open .faq-chevron svg { color:#fff; }
body.page-faq .faq-a {
max-height:0; overflow:hidden;
transition:max-height .35s cubic-bezier(.25,1,.5,1);
}
body.page-faq .faq-item.open .faq-a { max-height:400px; }
body.page-faq .faq-a-inner { padding:0 24px 22px; font-size:13px; color:#86868B; line-height:1.75; border-top:1px solid #F5F5F7; padding-top:18px; }
body.page-faq .faq-a-inner a { color:#FF2D55; font-weight:500; }
/* ── CTA BANNER ── */
body.page-faq .cta-s { padding:0 0 72px; }
body.page-faq .cta-banner {
background:#1D1D1F; border-radius:24px; padding:52px 64px;
display:flex; align-items:center; justify-content:space-between; gap:48px;
position:relative; overflow:hidden;
}
body.page-faq .cta-banner::before {
content:''; position:absolute; top:-80px; right:-80px; width:350px; height:350px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(50px);
}
body.page-faq .cta-left { position:relative; z-index:1; }
body.page-faq .cta-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:8px; }
body.page-faq .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); line-height:1.6; }
body.page-faq .cta-right { position:relative; z-index:1; display:flex; gap:12px; flex-shrink:0; }
body.page-faq .btn-w { background:#fff; color:#1D1D1F; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; }
body.page-faq .btn-w:hover { transform:scale(1.03); }
body.page-faq .btn-o { background:rgba(255,255,255,0.08); color:#fff; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:500; border:1px solid rgba(255,255,255,0.15); transition:all .2s; }
body.page-faq .btn-o:hover { background:rgba(255,255,255,0.15); }
/* ── SHARED LABELS ── */
body.page-faq .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-faq .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-faq .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-faq .page-hero-inner { padding:56px 56px 0; gap:40px; }
body.page-faq .hero-left h1 { font-size:44px; }
body.page-faq .faq-grid { grid-template-columns:240px 1fr; gap:32px; }
body.page-faq .cta-banner { padding:40px 48px; }
}
@media (max-width:768px) {
body.page-faq .page-hero-inner { grid-template-columns:1fr; padding:48px 36px 0; min-height:auto; }
body.page-faq .hero-right { display:none; }
body.page-faq .hero-left { padding-bottom:48px; }
body.page-faq .hero-left h1 { font-size:38px; }
body.page-faq .faq-grid { grid-template-columns:1fr; gap:24px; }
body.page-faq .faq-left { position:static; }
body.page-faq .faq-cats { flex-direction:row; flex-wrap:wrap; gap:6px; }
body.page-faq .faq-cat { padding:7px 14px; }
body.page-faq .cta-banner { flex-direction:column; align-items:flex-start; gap:24px; padding:36px 28px; }
body.page-faq .cta-right { width:100%; flex-direction:column; }
body.page-faq .btn-w, body.page-faq .btn-o { width:100%; text-align:center; }
}
@media (max-width:380px) {
body.page-faq .page-hero-inner { padding:36px 24px 0; }
body.page-faq .hero-left h1 { font-size:32px; }
body.page-faq .faq-q { padding:16px 18px; }
body.page-faq .faq-q-text { font-size:13px; }
body.page-faq .faq-a-inner { padding:14px 18px 18px; }
}
/* ============================================================
blog.html
============================================================ */
/* ===== blog.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-blog body.no-scroll { overflow:hidden; }
body.page-blog input, body.page-blog select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-blog body.no-scroll { overflow:hidden; }
body.page-blog a { text-decoration:none; color:inherit; }
body.page-blog button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-blog img { display:block; max-width:100%; }
body.page-blog input, body.page-blog select { font-family:inherit; }
body.page-blog a:focus-visible, body.page-blog button:focus-visible, body.page-blog input:focus-visible, body.page-blog summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-blog .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-blog .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-blog .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-blog .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-blog .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-blog header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-blog header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-blog .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-blog .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-blog .logo em { color:var(--brand); font-style:normal; }
body.page-blog header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-blog .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-blog .ni > a:hover, body.page-blog .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-blog .ni.active > a { color:var(--brand); }
body.page-blog .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-blog .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-blog .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-blog .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-blog .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-blog .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-blog .ib:hover { background:rgba(0,0,0,0.05); }
body.page-blog .ib svg { width:17px; height:17px; }
body.page-blog .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-blog .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-blog .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-blog .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-blog .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-blog .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-blog .bcrumb a:hover { color:var(--ink); }
body.page-blog .bcrumb .sep { color:var(--muted-3); }
body.page-blog .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-blog .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-blog .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-blog .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-blog .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-blog .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-blog .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-blog .chips-row:empty { padding:0; }
body.page-blog .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-blog .fchip:hover { border-color:var(--ink); }
body.page-blog .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-blog .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-blog .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-blog .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-blog .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-blog .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-blog .filters::-webkit-scrollbar { width:5px; }
body.page-blog .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-blog .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-blog .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-blog .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-blog .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-blog .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-blog .fgroup { border-top:1px solid var(--line-soft); }
body.page-blog .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-blog .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-blog .fgroup > summary::-webkit-details-marker { display:none; }
body.page-blog .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-blog .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-blog .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-blog .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-blog .fopt:hover { color:var(--ink); }
body.page-blog .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-blog .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-blog .fopt-mark.radio { border-radius:50%; }
body.page-blog .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-blog .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-blog .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-blog .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-blog .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-blog .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-blog .fopt-text { flex:1; }
body.page-blog .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-blog .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-blog .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-blog .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-blog .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-blog .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-blog .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-blog .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-blog .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-blog .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-blog .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-blog .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-blog .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-blog .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-blog .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-blog .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-blog .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-blog .results { min-width:0; }
body.page-blog .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-blog .t-left { display:flex; align-items:center; gap:14px; }
body.page-blog .t-count { font-size:13px; color:var(--muted-2); }
body.page-blog .t-count strong { color:var(--ink); font-weight:700; }
body.page-blog .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-blog .sortdrop { position:relative; z-index:10; }
body.page-blog .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-blog .sortbtn:hover { border-color:var(--ink); }
body.page-blog .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-blog .sortbtn .val { font-weight:600; }
body.page-blog .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-blog .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-blog .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-blog .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-blog .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-blog .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-blog .sortopt.on { color:var(--ink); font-weight:600; }
body.page-blog .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-blog .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-blog .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-blog .vbtn:hover { color:var(--ink); }
body.page-blog .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-blog .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-blog .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-blog .fbtn-mobile svg { width:14px; height:14px; }
body.page-blog .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-blog .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-blog .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-blog .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-blog .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-blog .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-blog .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-blog .pgrid.list-view .pcard-quick { display:none; }
body.page-blog .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-blog .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-blog .pgrid.list-view .pcard-name { font-size:16px; }
body.page-blog .pgrid.list-view .pcard-var { font-size:13px; }
body.page-blog .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-blog .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-blog .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-blog .pcard { cursor:pointer; }
body.page-blog .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-blog .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-blog .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-blog .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-blog .bg-new { background:var(--ink); color:#fff; }
body.page-blog .bg-hot { background:var(--brand); color:#fff; }
body.page-blog .bg-sale { background:#FF9500; color:#fff; }
body.page-blog .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-blog .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-blog .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-blog .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-blog .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-blog .pcard:hover .pcard-quick { bottom:12px; }
body.page-blog .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-blog .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-blog .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-blog .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-blog .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-blog .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-blog .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-blog .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-blog .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-blog .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-blog .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-blog .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-blog .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-blog footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-blog .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-blog .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-blog .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-blog .flogo em { color:var(--brand); font-style:normal; }
body.page-blog .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-blog .fsocs { display:flex; gap:8px; }
body.page-blog .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-blog .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-blog .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-blog .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-blog .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-blog .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-blog .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-blog .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-blog .fpay { display:flex; gap:8px; }
body.page-blog .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-blog .wrap, body.page-blog .fw { padding:0 28px; }
body.page-blog header { width:calc(100% - 32px); }
body.page-blog .hw { padding:0 16px 0 22px; gap:14px; }
body.page-blog header nav { gap:0; }
body.page-blog .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-blog .search-pill span { display:none; }
body.page-blog .search-pill { padding:8px 10px; }
body.page-blog .shop-title { font-size:34px; }
body.page-blog .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-blog .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-blog .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-blog .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-blog .hamburger { display:flex; }
body.page-blog header nav, body.page-blog header .search-pill, body.page-blog .ib[title="Wishlist"], body.page-blog .ib[title="Account"] { display:none; }
body.page-blog header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-blog .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-blog .logo { font-size:17px; }
body.page-blog .ib { width:40px; height:40px; }
body.page-blog .ib svg { width:18px; height:18px; }
body.page-blog .ann-bar { padding:8px 0; }
body.page-blog .ann-track { gap:36px; }
body.page-blog .ann-track span { font-size:11px; }
body.page-blog .wrap, body.page-blog .fw { padding:0 16px; }
/* hero */
body.page-blog .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-blog .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-blog .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-blog .shop-meta { padding-bottom:0; }
body.page-blog .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-blog .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-blog .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-blog .filters.on { transform:translateY(0); }
body.page-blog .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-blog .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-blog .fgroup > summary { padding:18px 20px 14px; }
body.page-blog .fgroup-body { padding:0 20px 18px; }
body.page-blog .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-blog .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-blog .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-blog .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-blog .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-blog .toolbar { gap:10px; padding-bottom:14px; }
body.page-blog .t-left { gap:10px; flex:1; }
body.page-blog .sortbtn .lbl { display:none; }
body.page-blog .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-blog .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-blog .pcard-img { border-radius:var(--radius-sm); }
body.page-blog .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-blog .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-blog .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-blog .pcard-name { font-size:13px; }
body.page-blog .pcard-p { font-size:14px; }
/* footer */
body.page-blog footer { padding:40px 0 28px; margin-top:48px; }
body.page-blog .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-blog .ftop > div:first-child { grid-column:1/-1; }
body.page-blog .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-blog .filters .f-head-clear-desktop { display:none; }
body.page-blog .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-blog .hw { padding:0 4px 0 14px; }
body.page-blog .logo { font-size:16px; }
body.page-blog .ib { width:36px; height:36px; }
body.page-blog .pgrid { gap:14px 10px; }
body.page-blog .pcard-name, body.page-blog .pcard-p { font-size:12.5px; }
}
/* ── PAGE HERO ── */
body.page-blog .page-hero { padding:24px 0 0; }
body.page-blog .page-hero-inner {
background:#1D1D1F; border-radius:28px; padding:72px 72px 0;
display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-end;
overflow:hidden; position:relative; min-height:380px;
}
body.page-blog .page-hero-inner::before {
content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px);
}
body.page-blog .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-blog .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-blog .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-blog .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-blog .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-blog .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }
/* ── FILTER TABS ── */
body.page-blog .blog-filters { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; }
body.page-blog .bf { padding:8px 18px; border-radius:100px; font-size:13px; font-weight:500; cursor:pointer; border:1.5px solid #E8E8ED; color:#86868B; transition:all .2s; background:#fff; }
body.page-blog .bf.on { background:#1D1D1F; color:#fff; border-color:#1D1D1F; }
body.page-blog .bf:hover:not(.on) { border-color:#1D1D1F; color:#1D1D1F; }
/* ── BLOG GRID ── */
body.page-blog .blog-s { padding:0 0 72px; }
body.page-blog .blogrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.page-blog .blogc { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; }
body.page-blog .blogc:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-blog .blogc:first-child { grid-column:span 2; }
body.page-blog .blogc:first-child .bimg { height:320px; }
body.page-blog .bimg { position:relative; height:220px; overflow:hidden; }
body.page-blog .bimg img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-blog .blogc:hover .bimg img { transform:scale(1.06); }
body.page-blog .bcat {
position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
padding:5px 12px; border-radius:100px; font-size:11px; font-weight:600; color:#1D1D1F; z-index:2;
}
body.page-blog .bbody2 { padding:22px 24px 24px; }
body.page-blog .bdate { font-size:12px; color:#86868B; margin-bottom:8px; }
body.page-blog .btitle2 { font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.2px; margin-bottom:10px; color:#1D1D1F; }
body.page-blog .blogc:first-child .btitle2 { font-size:22px; }
body.page-blog .bexc { font-size:13px; color:#86868B; line-height:1.6; margin-bottom:14px; }
body.page-blog .bmore { font-size:13px; font-weight:600; color:#FF2D55; transition:opacity .2s; }
body.page-blog .bmore:hover { opacity:.75; }
body.page-blog .bmeta { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid #F5F5F7; }
body.page-blog .bav { width:24px; height:24px; border-radius:50%; object-fit:cover; }
body.page-blog .bauth { font-size:12px; font-weight:600; color:#515154; }
body.page-blog .btime { font-size:11px; color:#AEAEB2; margin-left:auto; }
/* ── NEWSLETTER ── */
body.page-blog .nl-s { padding:0 0 72px; }
body.page-blog .nl-banner {
background:#1D1D1F; border-radius:24px; padding:52px 64px;
display:flex; align-items:center; gap:80px; position:relative; overflow:hidden;
}
body.page-blog .nl-banner::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.2) 0%,transparent 70%); filter:blur(40px); }
body.page-blog .nl-left { flex:1; position:relative; z-index:1; }
body.page-blog .nl-left .sl { color:rgba(255,255,255,0.3); }
body.page-blog .nl-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-blog .nl-left p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.65; }
body.page-blog .nl-right { min-width:380px; position:relative; z-index:1; }
body.page-blog .nl-form { display:flex; gap:10px; }
body.page-blog .nl-in { flex:1; padding:12px 18px; border-radius:100px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; outline:none; font-family:inherit; }
body.page-blog .nl-in::placeholder { color:rgba(255,255,255,0.3); }
body.page-blog .nl-in:focus { border-color:rgba(255,45,85,0.6); }
body.page-blog .nl-btn { background:#FF2D55; color:#fff; padding:12px 22px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .2s; }
body.page-blog .nl-btn:hover { background:#FF4D6A; }
/* ── SHARED ── */
body.page-blog .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-blog .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-blog .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-blog .page-hero-inner { padding:56px 56px 0; gap:40px; }
body.page-blog .hero-left h1 { font-size:44px; }
body.page-blog .blogrid { grid-template-columns:1fr 1fr; }
body.page-blog .blogc:first-child { grid-column:span 2; }
body.page-blog .nl-banner { padding:40px 48px; gap:48px; }
}
@media (max-width:768px) {
body.page-blog .page-hero-inner { grid-template-columns:1fr; padding:48px 36px 0; min-height:auto; }
body.page-blog .hero-right { display:none; }
body.page-blog .hero-left { padding-bottom:48px; }
body.page-blog .hero-left h1 { font-size:38px; }
body.page-blog .blogrid { grid-template-columns:1fr; }
body.page-blog .blogc:first-child { grid-column:span 1; }
body.page-blog .blogc:first-child .bimg { height:220px; }
body.page-blog .bimg { height:200px; }
body.page-blog .nl-banner { flex-direction:column; gap:28px; padding:36px 28px; }
body.page-blog .nl-right { min-width:unset; width:100%; }
}
@media (max-width:380px) {
body.page-blog .page-hero-inner { padding:36px 24px 0; }
body.page-blog .hero-left h1 { font-size:32px; }
body.page-blog .blog-filters { gap:6px; }
body.page-blog .bf { padding:6px 12px; font-size:12px; }
body.page-blog .nl-banner { padding:32px 24px; }
body.page-blog .nl-form { flex-direction:column; }
body.page-blog .nl-btn { width:100%; padding:13px; }
body.page-blog .nl-left h2 { font-size:22px; }
}
/* ============================================================
blog-post.html
============================================================ */
/* ===== blog-post.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-blog-post body.no-scroll { overflow:hidden; }
body.page-blog-post input, body.page-blog-post select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-blog-post body.no-scroll { overflow:hidden; }
body.page-blog-post a { text-decoration:none; color:inherit; }
body.page-blog-post button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-blog-post img { display:block; max-width:100%; }
body.page-blog-post input, body.page-blog-post select { font-family:inherit; }
body.page-blog-post a:focus-visible, body.page-blog-post button:focus-visible, body.page-blog-post input:focus-visible, body.page-blog-post summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-blog-post .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-blog-post .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-blog-post .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-blog-post .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-blog-post .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-blog-post header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-blog-post header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-blog-post .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-blog-post .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-blog-post .logo em { color:var(--brand); font-style:normal; }
body.page-blog-post header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-blog-post .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-blog-post .ni > a:hover, body.page-blog-post .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-blog-post .ni.active > a { color:var(--brand); }
body.page-blog-post .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-blog-post .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-blog-post .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-blog-post .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-blog-post .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-blog-post .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-blog-post .ib:hover { background:rgba(0,0,0,0.05); }
body.page-blog-post .ib svg { width:17px; height:17px; }
body.page-blog-post .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-blog-post .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-blog-post .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-blog-post .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-blog-post .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-blog-post .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-blog-post .bcrumb a:hover { color:var(--ink); }
body.page-blog-post .bcrumb .sep { color:var(--muted-3); }
body.page-blog-post .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-blog-post .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-blog-post .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-blog-post .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-blog-post .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-blog-post .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-blog-post .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-blog-post .chips-row:empty { padding:0; }
body.page-blog-post .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-blog-post .fchip:hover { border-color:var(--ink); }
body.page-blog-post .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-blog-post .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-blog-post .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-blog-post .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-blog-post .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-blog-post .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-blog-post .filters::-webkit-scrollbar { width:5px; }
body.page-blog-post .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-blog-post .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-blog-post .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-blog-post .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-blog-post .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-blog-post .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-blog-post .fgroup { border-top:1px solid var(--line-soft); }
body.page-blog-post .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-blog-post .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-blog-post .fgroup > summary::-webkit-details-marker { display:none; }
body.page-blog-post .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-blog-post .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-blog-post .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-blog-post .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-blog-post .fopt:hover { color:var(--ink); }
body.page-blog-post .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-blog-post .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-blog-post .fopt-mark.radio { border-radius:50%; }
body.page-blog-post .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-blog-post .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-blog-post .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-blog-post .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-blog-post .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-blog-post .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-blog-post .fopt-text { flex:1; }
body.page-blog-post .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-blog-post .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-blog-post .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-blog-post .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-blog-post .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-blog-post .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-blog-post .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-blog-post .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-blog-post .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-blog-post .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-blog-post .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-blog-post .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-blog-post .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-blog-post .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-blog-post .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-blog-post .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-blog-post .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-blog-post .results { min-width:0; }
body.page-blog-post .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-blog-post .t-left { display:flex; align-items:center; gap:14px; }
body.page-blog-post .t-count { font-size:13px; color:var(--muted-2); }
body.page-blog-post .t-count strong { color:var(--ink); font-weight:700; }
body.page-blog-post .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-blog-post .sortdrop { position:relative; z-index:10; }
body.page-blog-post .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-blog-post .sortbtn:hover { border-color:var(--ink); }
body.page-blog-post .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-blog-post .sortbtn .val { font-weight:600; }
body.page-blog-post .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-blog-post .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-blog-post .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-blog-post .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-blog-post .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-blog-post .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-blog-post .sortopt.on { color:var(--ink); font-weight:600; }
body.page-blog-post .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-blog-post .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-blog-post .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-blog-post .vbtn:hover { color:var(--ink); }
body.page-blog-post .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-blog-post .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-blog-post .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-blog-post .fbtn-mobile svg { width:14px; height:14px; }
body.page-blog-post .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-blog-post .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-blog-post .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-blog-post .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-blog-post .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog-post .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-blog-post .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-blog-post .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-blog-post .pgrid.list-view .pcard-quick { display:none; }
body.page-blog-post .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-blog-post .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-blog-post .pgrid.list-view .pcard-name { font-size:16px; }
body.page-blog-post .pgrid.list-view .pcard-var { font-size:13px; }
body.page-blog-post .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-blog-post .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-blog-post .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-blog-post .pcard { cursor:pointer; }
body.page-blog-post .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-blog-post .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-blog-post .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-blog-post .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-blog-post .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-blog-post .bg-new { background:var(--ink); color:#fff; }
body.page-blog-post .bg-hot { background:var(--brand); color:#fff; }
body.page-blog-post .bg-sale { background:#FF9500; color:#fff; }
body.page-blog-post .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-blog-post .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-blog-post .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-blog-post .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-blog-post .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-blog-post .pcard:hover .pcard-quick { bottom:12px; }
body.page-blog-post .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-blog-post .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-blog-post .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-blog-post .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-blog-post .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-blog-post .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-blog-post .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-blog-post .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-blog-post .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-blog-post .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-blog-post .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-blog-post .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-blog-post .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-blog-post footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-blog-post .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-blog-post .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-blog-post .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-blog-post .flogo em { color:var(--brand); font-style:normal; }
body.page-blog-post .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-blog-post .fsocs { display:flex; gap:8px; }
body.page-blog-post .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-blog-post .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-blog-post .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-blog-post .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-blog-post .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-blog-post .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-blog-post .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-blog-post .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-blog-post .fpay { display:flex; gap:8px; }
body.page-blog-post .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-blog-post .wrap, body.page-blog-post .fw { padding:0 28px; }
body.page-blog-post header { width:calc(100% - 32px); }
body.page-blog-post .hw { padding:0 16px 0 22px; gap:14px; }
body.page-blog-post header nav { gap:0; }
body.page-blog-post .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-blog-post .search-pill span { display:none; }
body.page-blog-post .search-pill { padding:8px 10px; }
body.page-blog-post .shop-title { font-size:34px; }
body.page-blog-post .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-blog-post .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-blog-post .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-blog-post .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-blog-post .hamburger { display:flex; }
body.page-blog-post header nav, body.page-blog-post header .search-pill, body.page-blog-post .ib[title="Wishlist"], body.page-blog-post .ib[title="Account"] { display:none; }
body.page-blog-post header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-blog-post .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-blog-post .logo { font-size:17px; }
body.page-blog-post .ib { width:40px; height:40px; }
body.page-blog-post .ib svg { width:18px; height:18px; }
body.page-blog-post .ann-bar { padding:8px 0; }
body.page-blog-post .ann-track { gap:36px; }
body.page-blog-post .ann-track span { font-size:11px; }
body.page-blog-post .wrap, body.page-blog-post .fw { padding:0 16px; }
/* hero */
body.page-blog-post .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-blog-post .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-blog-post .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-blog-post .shop-meta { padding-bottom:0; }
body.page-blog-post .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-blog-post .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-blog-post .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-blog-post .filters.on { transform:translateY(0); }
body.page-blog-post .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-blog-post .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-blog-post .fgroup > summary { padding:18px 20px 14px; }
body.page-blog-post .fgroup-body { padding:0 20px 18px; }
body.page-blog-post .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-blog-post .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-blog-post .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-blog-post .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-blog-post .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-blog-post .toolbar { gap:10px; padding-bottom:14px; }
body.page-blog-post .t-left { gap:10px; flex:1; }
body.page-blog-post .sortbtn .lbl { display:none; }
body.page-blog-post .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-blog-post .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-blog-post .pcard-img { border-radius:var(--radius-sm); }
body.page-blog-post .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-blog-post .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-blog-post .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-blog-post .pcard-name { font-size:13px; }
body.page-blog-post .pcard-p { font-size:14px; }
/* footer */
body.page-blog-post footer { padding:40px 0 28px; margin-top:48px; }
body.page-blog-post .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-blog-post .ftop > div:first-child { grid-column:1/-1; }
body.page-blog-post .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-blog-post .filters .f-head-clear-desktop { display:none; }
body.page-blog-post .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-blog-post .hw { padding:0 4px 0 14px; }
body.page-blog-post .logo { font-size:16px; }
body.page-blog-post .ib { width:36px; height:36px; }
body.page-blog-post .pgrid { gap:14px 10px; }
body.page-blog-post .pcard-name, body.page-blog-post .pcard-p { font-size:12.5px; }
}
/* ── ARTICLE HERO ── */
body.page-blog-post .post-hero { padding:24px 0 0; }
body.page-blog-post .post-hero-inner {
position:relative; border-radius:28px; overflow:hidden; min-height:520px;
display:flex; align-items:flex-end;
}
body.page-blog-post .post-hero-img {
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
body.page-blog-post .post-hero-overlay {
position:absolute; inset:0;
background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}
body.page-blog-post .post-hero-content {
position:relative; z-index:2; padding:64px 72px 48px; max-width:800px;
}
body.page-blog-post .post-hero-content .bcat {
display:inline-flex; background:var(--brand); color:#fff; padding:5px 14px; border-radius:100px;
font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:16px;
}
body.page-blog-post .post-hero-content h1 { font-size:48px; font-weight:800; letter-spacing:-1.2px; line-height:1.05; color:#fff; margin-bottom:20px; }
body.page-blog-post .post-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
body.page-blog-post .post-meta img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
body.page-blog-post .post-meta-name { font-size:14px; font-weight:600; color:#fff; }
body.page-blog-post .post-meta-date { font-size:13px; color:rgba(255,255,255,0.55); }
body.page-blog-post .post-meta-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.4); }
/* ── ARTICLE BODY ── */
body.page-blog-post .post-s { padding:48px 0 72px; }
body.page-blog-post .post-grid { display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; }
body.page-blog-post .post-content { font-size:15px; line-height:1.75; color:var(--ink-2); }
body.page-blog-post .post-content h2 { font-size:26px; font-weight:700; letter-spacing:-.4px; margin:40px 0 16px; color:var(--ink); line-height:1.2; }
body.page-blog-post .post-content h3 { font-size:19px; font-weight:700; margin:28px 0 12px; color:var(--ink); }
body.page-blog-post .post-content p { margin-bottom:16px; }
body.page-blog-post .post-content blockquote {
border-left:3px solid var(--brand); padding:12px 24px; margin:24px 0;
background:var(--brand-soft); border-radius:0 12px 12px 0; font-style:italic;
}
body.page-blog-post .post-content blockquote p { margin:0; color:var(--ink-2); }
body.page-blog-post .post-content ul { margin:16px 0; padding-left:24px; }
body.page-blog-post .post-content li { margin-bottom:8px; }
body.page-blog-post .post-content img { width:100%; border-radius:16px; margin:24px 0; }
body.page-blog-post .post-content figcaption { font-size:12px; color:var(--muted-2); text-align:center; margin-top:-16px; margin-bottom:24px; }
/* ── SHARE BAR ── */
body.page-blog-post .share-bar { display:flex; align-items:center; gap:12px; padding:20px 0; margin:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
body.page-blog-post .share-label { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
body.page-blog-post .share-btn { width:36px; height:36px; border-radius:50%; background:var(--line-soft); display:flex; align-items:center; justify-content:center; transition:background .2s; }
body.page-blog-post .share-btn:hover { background:var(--brand); color:#fff; }
body.page-blog-post .share-btn svg { width:15px; height:15px; }
/* ── AUTHOR CARD ── */
body.page-blog-post .author-card { background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); margin-top:32px; }
body.page-blog-post .author-card-inner { display:flex; gap:18px; }
body.page-blog-post .author-card img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
body.page-blog-post .author-info { }
body.page-blog-post .author-name { font-size:16px; font-weight:700; margin-bottom:2px; }
body.page-blog-post .author-role { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
body.page-blog-post .author-bio { font-size:13px; color:var(--muted); line-height:1.6; }
/* ── SIDEBAR ── */
body.page-blog-post .post-sidebar { display:flex; flex-direction:column; gap:24px; position:sticky; top:100px; }
body.page-blog-post .sidebar-block { background:#fff; border-radius:20px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-blog-post .sidebar-title { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
body.page-blog-post .sidebar-link { display:block; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px; font-weight:500; color:var(--ink); transition:color .2s; }
body.page-blog-post .sidebar-link:hover { color:var(--brand); }
body.page-blog-post .sidebar-link:last-child { border-bottom:none; }
body.page-blog-post .sidebar-tags { display:flex; flex-wrap:wrap; gap:8px; }
body.page-blog-post .tag { padding:6px 14px; border-radius:100px; background:var(--line-soft); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; transition:all .2s; }
body.page-blog-post .tag:hover { background:var(--brand); color:#fff; }
/* ── RELATED ARTICLES ── */
body.page-blog-post .related-s { padding:0 0 72px; }
body.page-blog-post .related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.page-blog-post .rcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; }
body.page-blog-post .rcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-blog-post .rcard-img { height:160px; overflow:hidden; }
body.page-blog-post .rcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-blog-post .rcard:hover .rcard-img img { transform:scale(1.06); }
body.page-blog-post .rcard-body { padding:18px 20px 22px; }
body.page-blog-post .rcard-date { font-size:11px; color:var(--muted-2); margin-bottom:6px; }
body.page-blog-post .rcard-title { font-size:15px; font-weight:700; line-height:1.3; color:var(--ink); }
/* ── SHARED ── */
body.page-blog-post .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-blog-post .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-blog-post .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-blog-post .post-hero-content { padding:48px 48px 36px; }
body.page-blog-post .post-hero-content h1 { font-size:40px; }
body.page-blog-post .post-grid { grid-template-columns:1fr 260px; gap:32px; }
body.page-blog-post .related-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
body.page-blog-post .post-hero-inner { min-height:420px; }
body.page-blog-post .post-hero-content { padding:36px 28px 28px; }
body.page-blog-post .post-hero-content h1 { font-size:32px; letter-spacing:-.8px; }
body.page-blog-post .post-grid { grid-template-columns:1fr; }
body.page-blog-post .post-sidebar { position:static; }
body.page-blog-post .related-grid { grid-template-columns:1fr; }
body.page-blog-post .share-bar { flex-wrap:wrap; }
}
@media (max-width:380px) {
body.page-blog-post .post-hero-content { padding:28px 20px 22px; }
body.page-blog-post .post-hero-content h1 { font-size:26px; }
body.page-blog-post .post-content h2 { font-size:22px; }
body.page-blog-post .author-card-inner { flex-direction:column; align-items:center; text-align:center; }
}
/* ============================================================
about.html
============================================================ */
/* ===== about.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-about body.no-scroll { overflow:hidden; }
body.page-about input, body.page-about select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-about body.no-scroll { overflow:hidden; }
body.page-about a { text-decoration:none; color:inherit; }
body.page-about button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-about img { display:block; max-width:100%; }
body.page-about input, body.page-about select { font-family:inherit; }
body.page-about a:focus-visible, body.page-about button:focus-visible, body.page-about input:focus-visible, body.page-about summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-about .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-about .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-about .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-about .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-about .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-about header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-about header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-about .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-about .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-about .logo em { color:var(--brand); font-style:normal; }
body.page-about header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-about .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-about .ni > a:hover, body.page-about .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-about .ni.active > a { color:var(--brand); }
body.page-about .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-about .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-about .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-about .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-about .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-about .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-about .ib:hover { background:rgba(0,0,0,0.05); }
body.page-about .ib svg { width:17px; height:17px; }
body.page-about .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-about .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-about .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-about .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-about .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-about .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-about .bcrumb a:hover { color:var(--ink); }
body.page-about .bcrumb .sep { color:var(--muted-3); }
body.page-about .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-about .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-about .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-about .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-about .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-about .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-about .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-about .chips-row:empty { padding:0; }
body.page-about .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-about .fchip:hover { border-color:var(--ink); }
body.page-about .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-about .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-about .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-about .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-about .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-about .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-about .filters::-webkit-scrollbar { width:5px; }
body.page-about .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-about .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-about .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-about .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-about .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-about .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-about .fgroup { border-top:1px solid var(--line-soft); }
body.page-about .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-about .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-about .fgroup > summary::-webkit-details-marker { display:none; }
body.page-about .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-about .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-about .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-about .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-about .fopt:hover { color:var(--ink); }
body.page-about .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-about .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-about .fopt-mark.radio { border-radius:50%; }
body.page-about .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-about .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-about .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-about .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-about .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-about .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-about .fopt-text { flex:1; }
body.page-about .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-about .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-about .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-about .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-about .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-about .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-about .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-about .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-about .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-about .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-about .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-about .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-about .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-about .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-about .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-about .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-about .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-about .results { min-width:0; }
body.page-about .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-about .t-left { display:flex; align-items:center; gap:14px; }
body.page-about .t-count { font-size:13px; color:var(--muted-2); }
body.page-about .t-count strong { color:var(--ink); font-weight:700; }
body.page-about .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-about .sortdrop { position:relative; z-index:10; }
body.page-about .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-about .sortbtn:hover { border-color:var(--ink); }
body.page-about .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-about .sortbtn .val { font-weight:600; }
body.page-about .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-about .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-about .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-about .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-about .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-about .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-about .sortopt.on { color:var(--ink); font-weight:600; }
body.page-about .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-about .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-about .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-about .vbtn:hover { color:var(--ink); }
body.page-about .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-about .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-about .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-about .fbtn-mobile svg { width:14px; height:14px; }
body.page-about .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-about .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-about .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-about .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-about .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-about .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-about .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-about .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-about .pgrid.list-view .pcard-quick { display:none; }
body.page-about .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-about .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-about .pgrid.list-view .pcard-name { font-size:16px; }
body.page-about .pgrid.list-view .pcard-var { font-size:13px; }
body.page-about .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-about .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-about .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-about .pcard { cursor:pointer; }
body.page-about .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-about .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-about .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-about .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-about .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-about .bg-new { background:var(--ink); color:#fff; }
body.page-about .bg-hot { background:var(--brand); color:#fff; }
body.page-about .bg-sale { background:#FF9500; color:#fff; }
body.page-about .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-about .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-about .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-about .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-about .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-about .pcard:hover .pcard-quick { bottom:12px; }
body.page-about .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-about .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-about .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-about .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-about .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-about .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-about .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-about .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-about .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-about .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-about .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-about .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-about .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-about footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-about .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-about .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-about .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-about .flogo em { color:var(--brand); font-style:normal; }
body.page-about .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-about .fsocs { display:flex; gap:8px; }
body.page-about .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-about .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-about .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-about .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-about .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-about .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-about .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-about .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-about .fpay { display:flex; gap:8px; }
body.page-about .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-about .wrap, body.page-about .fw { padding:0 28px; }
body.page-about header { width:calc(100% - 32px); }
body.page-about .hw { padding:0 16px 0 22px; gap:14px; }
body.page-about header nav { gap:0; }
body.page-about .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-about .search-pill span { display:none; }
body.page-about .search-pill { padding:8px 10px; }
body.page-about .shop-title { font-size:34px; }
body.page-about .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-about .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-about .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-about .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-about .hamburger { display:flex; }
body.page-about header nav, body.page-about header .search-pill, body.page-about .ib[title="Wishlist"], body.page-about .ib[title="Account"] { display:none; }
body.page-about header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-about .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-about .logo { font-size:17px; }
body.page-about .ib { width:40px; height:40px; }
body.page-about .ib svg { width:18px; height:18px; }
body.page-about .ann-bar { padding:8px 0; }
body.page-about .ann-track { gap:36px; }
body.page-about .ann-track span { font-size:11px; }
body.page-about .wrap, body.page-about .fw { padding:0 16px; }
/* hero */
body.page-about .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-about .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-about .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-about .shop-meta { padding-bottom:0; }
body.page-about .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-about .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-about .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-about .filters.on { transform:translateY(0); }
body.page-about .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-about .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-about .fgroup > summary { padding:18px 20px 14px; }
body.page-about .fgroup-body { padding:0 20px 18px; }
body.page-about .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-about .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-about .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-about .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-about .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-about .toolbar { gap:10px; padding-bottom:14px; }
body.page-about .t-left { gap:10px; flex:1; }
body.page-about .sortbtn .lbl { display:none; }
body.page-about .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-about .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-about .pcard-img { border-radius:var(--radius-sm); }
body.page-about .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-about .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-about .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-about .pcard-name { font-size:13px; }
body.page-about .pcard-p { font-size:14px; }
/* footer */
body.page-about footer { padding:40px 0 28px; margin-top:48px; }
body.page-about .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-about .ftop > div:first-child { grid-column:1/-1; }
body.page-about .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-about .filters .f-head-clear-desktop { display:none; }
body.page-about .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-about .hw { padding:0 4px 0 14px; }
body.page-about .logo { font-size:16px; }
body.page-about .ib { width:36px; height:36px; }
body.page-about .pgrid { gap:14px 10px; }
body.page-about .pcard-name, body.page-about .pcard-p { font-size:12.5px; }
}
/* ── PAGE HERO ── */
body.page-about .page-hero { padding:24px 0 0; }
body.page-about .page-hero-inner {
background:#1D1D1F; border-radius:28px; padding:72px 72px 0;
display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:flex-end;
overflow:hidden; position:relative; min-height:400px;
}
body.page-about .page-hero-inner::before {
content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px);
}
body.page-about .hero-left { position:relative; z-index:2; padding-bottom:72px; }
body.page-about .hero-left .sl { color:rgba(255,255,255,0.3); }
body.page-about .hero-left h1 { font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.0; color:#fff; margin-bottom:16px; }
body.page-about .hero-left p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-about .hero-right { position:relative; z-index:2; align-self:flex-end; }
body.page-about .hero-right img { width:100%; max-width:480px; border-radius:20px 20px 0 0; object-fit:cover; height:340px; margin-left:auto; }
/* ── MISSION ── */
body.page-about .mission-s { padding:72px 0 64px; }
body.page-about .mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
body.page-about .mission-left { }
body.page-about .mission-left .sl { margin-bottom:12px; }
body.page-about .mission-left h2 { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; margin-bottom:18px; }
body.page-about .mission-left p { font-size:15px; color:#86868B; line-height:1.75; margin-bottom:16px; }
body.page-about .mission-right { border-radius:24px; overflow:hidden; }
body.page-about .mission-right img { width:100%; height:420px; object-fit:cover; }
/* ── VALUES (BENTO) ── */
body.page-about .values-s { padding:0 0 72px; }
body.page-about .values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
body.page-about .vcard { background:#fff; border-radius:20px; padding:32px; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; }
body.page-about .vcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-about .vicon { width:48px; height:48px; border-radius:14px; background:#F5F5F7; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
body.page-about .vicon svg { width:22px; height:22px; }
body.page-about .vtitle { font-size:17px; font-weight:700; margin-bottom:8px; }
body.page-about .vdesc { font-size:13px; color:#86868B; line-height:1.65; }
/* ── TIMELINE ── */
body.page-about .timeline-s { padding:0 0 72px; }
body.page-about .timeline { display:flex; flex-direction:column; gap:0; position:relative; }
body.page-about .timeline::before { content:''; position:absolute; left:24px; top:0; bottom:0; width:2px; background:#E8E8ED; }
body.page-about .titem { display:flex; gap:24px; padding:28px 0; position:relative; }
body.page-about .tdot { width:16px; height:16px; border-radius:50%; background:#FF2D55; border:3px solid #F5F5F7; flex-shrink:0; margin-top:4px; position:relative; z-index:1; margin-left:16px; }
body.page-about .tcontent { flex:1; background:#fff; border-radius:16px; padding:24px 28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-about .tyear { font-size:12px; font-weight:700; color:#FF2D55; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
body.page-about .ttitle { font-size:18px; font-weight:700; margin-bottom:6px; }
body.page-about .tdesc { font-size:13px; color:#86868B; line-height:1.6; }
/* ── TEAM ── */
body.page-about .team-s { padding:0 0 72px; }
body.page-about .team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-about .tcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); text-align:center; transition:transform .3s; }
body.page-about .tcard:hover { transform:translateY(-4px); }
body.page-about .tcard-img { height:220px; overflow:hidden; }
body.page-about .tcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-about .tcard:hover .tcard-img img { transform:scale(1.06); }
body.page-about .tcard-body { padding:20px 16px 24px; }
body.page-about .tname { font-size:15px; font-weight:700; margin-bottom:2px; }
body.page-about .trole { font-size:12px; color:#86868B; }
/* ── STATS ── */
body.page-about .stats-s { padding:0 0 72px; }
body.page-about .stats-bar { background:#fff; border-radius:24px; padding:40px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; box-shadow:0 2px 8px rgba(0,0,0,0.04); flex-wrap:wrap; }
body.page-about .stat-item { text-align:center; flex:1; min-width:120px; }
body.page-about .stat-num { font-size:36px; font-weight:800; letter-spacing:-1.5px; color:#FF2D55; line-height:1; }
body.page-about .stat-label { font-size:12px; color:#86868B; margin-top:6px; }
/* ── CTA BANNER ── */
body.page-about .cta-s { padding:0 0 72px; }
body.page-about .cta-banner {
background:#1D1D1F; border-radius:24px; padding:52px 64px;
display:flex; align-items:center; justify-content:space-between; gap:48px;
position:relative; overflow:hidden;
}
body.page-about .cta-banner::before {
content:''; position:absolute; top:-80px; right:-80px; width:350px; height:350px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(50px);
}
body.page-about .cta-left { position:relative; z-index:1; }
body.page-about .cta-left h2 { font-size:28px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:8px; }
body.page-about .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); line-height:1.6; }
body.page-about .cta-right { position:relative; z-index:1; display:flex; gap:12px; flex-shrink:0; }
body.page-about .btn-w { background:#fff; color:#1D1D1F; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; }
body.page-about .btn-w:hover { transform:scale(1.03); }
body.page-about .btn-o { background:rgba(255,255,255,0.08); color:#fff; padding:14px 28px; border-radius:100px; font-size:14px; font-weight:500; border:1px solid rgba(255,255,255,0.15); transition:all .2s; }
body.page-about .btn-o:hover { background:rgba(255,255,255,0.15); }
/* ── SHARED ── */
body.page-about .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#FF2D55; display:block; margin-bottom:8px; }
body.page-about .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-about .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-about .page-hero-inner { padding:56px 56px 0; gap:40px; }
body.page-about .hero-left h1 { font-size:44px; }
body.page-about .mission-grid { gap:32px; }
body.page-about .values-grid { grid-template-columns:1fr 1fr; }
body.page-about .team-grid { grid-template-columns:1fr 1fr; }
body.page-about .stats-bar { padding:32px 36px; }
body.page-about .cta-banner { padding:40px 48px; }
}
@media (max-width:768px) {
body.page-about .page-hero-inner { grid-template-columns:1fr; padding:48px 36px 0; min-height:auto; }
body.page-about .hero-right { display:none; }
body.page-about .hero-left { padding-bottom:48px; }
body.page-about .hero-left h1 { font-size:38px; }
body.page-about .mission-grid { grid-template-columns:1fr; }
body.page-about .mission-right img { height:280px; }
body.page-about .values-grid { grid-template-columns:1fr; }
body.page-about .team-grid { grid-template-columns:1fr 1fr; }
body.page-about .timeline::before { left:18px; }
body.page-about .tdot { margin-left:10px; }
body.page-about .stats-bar { flex-direction:column; gap:24px; padding:32px; }
body.page-about .cta-banner { flex-direction:column; align-items:flex-start; gap:24px; padding:36px 28px; }
body.page-about .cta-right { width:100%; flex-direction:column; }
body.page-about .btn-w, body.page-about .btn-o { width:100%; text-align:center; }
}
@media (max-width:380px) {
body.page-about .page-hero-inner { padding:36px 24px 0; }
body.page-about .hero-left h1 { font-size:32px; }
body.page-about .team-grid { grid-template-columns:1fr; }
body.page-about .tcard-img { height:200px; }
body.page-about .stats-bar { padding:24px; }
body.page-about .stat-num { font-size:28px; }
body.page-about .cta-banner { padding:32px 24px; }
}
/* ============================================================
cart.html
============================================================ */
/* ===== cart.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-cart body.no-scroll { overflow:hidden; }
body.page-cart input, body.page-cart select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-cart body.no-scroll { overflow:hidden; }
body.page-cart a { text-decoration:none; color:inherit; }
body.page-cart button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-cart img { display:block; max-width:100%; }
body.page-cart input, body.page-cart select { font-family:inherit; }
body.page-cart a:focus-visible, body.page-cart button:focus-visible, body.page-cart input:focus-visible, body.page-cart summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-cart .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-cart .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-cart .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-cart .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-cart .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-cart header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-cart header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-cart .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-cart .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-cart .logo em { color:var(--brand); font-style:normal; }
body.page-cart header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-cart .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-cart .ni > a:hover, body.page-cart .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-cart .ni.active > a { color:var(--brand); }
body.page-cart .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-cart .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-cart .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-cart .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-cart .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-cart .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-cart .ib:hover { background:rgba(0,0,0,0.05); }
body.page-cart .ib svg { width:17px; height:17px; }
body.page-cart .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-cart .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-cart .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-cart .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-cart .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-cart .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-cart .bcrumb a:hover { color:var(--ink); }
body.page-cart .bcrumb .sep { color:var(--muted-3); }
body.page-cart .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-cart .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-cart .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-cart .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-cart .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-cart .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-cart .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-cart .chips-row:empty { padding:0; }
body.page-cart .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-cart .fchip:hover { border-color:var(--ink); }
body.page-cart .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-cart .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-cart .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-cart .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-cart .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-cart .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-cart .filters::-webkit-scrollbar { width:5px; }
body.page-cart .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-cart .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-cart .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-cart .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-cart .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-cart .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-cart .fgroup { border-top:1px solid var(--line-soft); }
body.page-cart .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-cart .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-cart .fgroup > summary::-webkit-details-marker { display:none; }
body.page-cart .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-cart .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-cart .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-cart .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-cart .fopt:hover { color:var(--ink); }
body.page-cart .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-cart .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-cart .fopt-mark.radio { border-radius:50%; }
body.page-cart .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-cart .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-cart .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-cart .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-cart .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-cart .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-cart .fopt-text { flex:1; }
body.page-cart .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-cart .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-cart .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-cart .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-cart .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-cart .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-cart .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-cart .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-cart .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-cart .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-cart .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-cart .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-cart .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-cart .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-cart .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-cart .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-cart .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-cart .results { min-width:0; }
body.page-cart .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-cart .t-left { display:flex; align-items:center; gap:14px; }
body.page-cart .t-count { font-size:13px; color:var(--muted-2); }
body.page-cart .t-count strong { color:var(--ink); font-weight:700; }
body.page-cart .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-cart .sortdrop { position:relative; z-index:10; }
body.page-cart .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-cart .sortbtn:hover { border-color:var(--ink); }
body.page-cart .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-cart .sortbtn .val { font-weight:600; }
body.page-cart .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-cart .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-cart .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-cart .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-cart .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-cart .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-cart .sortopt.on { color:var(--ink); font-weight:600; }
body.page-cart .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-cart .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-cart .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-cart .vbtn:hover { color:var(--ink); }
body.page-cart .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-cart .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-cart .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-cart .fbtn-mobile svg { width:14px; height:14px; }
body.page-cart .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-cart .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-cart .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-cart .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-cart .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-cart .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-cart .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-cart .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-cart .pgrid.list-view .pcard-quick { display:none; }
body.page-cart .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-cart .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-cart .pgrid.list-view .pcard-name { font-size:16px; }
body.page-cart .pgrid.list-view .pcard-var { font-size:13px; }
body.page-cart .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-cart .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-cart .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-cart .pcard { cursor:pointer; }
body.page-cart .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-cart .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-cart .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-cart .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-cart .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-cart .bg-new { background:var(--ink); color:#fff; }
body.page-cart .bg-hot { background:var(--brand); color:#fff; }
body.page-cart .bg-sale { background:#FF9500; color:#fff; }
body.page-cart .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-cart .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-cart .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-cart .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-cart .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-cart .pcard:hover .pcard-quick { bottom:12px; }
body.page-cart .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-cart .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-cart .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-cart .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-cart .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-cart .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-cart .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-cart .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-cart .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-cart .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-cart .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-cart .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-cart .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-cart footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-cart .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-cart .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-cart .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-cart .flogo em { color:var(--brand); font-style:normal; }
body.page-cart .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-cart .fsocs { display:flex; gap:8px; }
body.page-cart .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-cart .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-cart .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-cart .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-cart .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-cart .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-cart .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-cart .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-cart .fpay { display:flex; gap:8px; }
body.page-cart .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-cart .wrap, body.page-cart .fw { padding:0 28px; }
body.page-cart header { width:calc(100% - 32px); }
body.page-cart .hw { padding:0 16px 0 22px; gap:14px; }
body.page-cart header nav { gap:0; }
body.page-cart .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-cart .search-pill span { display:none; }
body.page-cart .search-pill { padding:8px 10px; }
body.page-cart .shop-title { font-size:34px; }
body.page-cart .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-cart .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-cart .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-cart .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-cart .hamburger { display:flex; }
body.page-cart header nav, body.page-cart header .search-pill, body.page-cart .ib[title="Wishlist"], body.page-cart .ib[title="Account"] { display:none; }
body.page-cart header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-cart .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-cart .logo { font-size:17px; }
body.page-cart .ib { width:40px; height:40px; }
body.page-cart .ib svg { width:18px; height:18px; }
body.page-cart .ann-bar { padding:8px 0; }
body.page-cart .ann-track { gap:36px; }
body.page-cart .ann-track span { font-size:11px; }
body.page-cart .wrap, body.page-cart .fw { padding:0 16px; }
/* hero */
body.page-cart .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-cart .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-cart .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-cart .shop-meta { padding-bottom:0; }
body.page-cart .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-cart .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-cart .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-cart .filters.on { transform:translateY(0); }
body.page-cart .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-cart .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-cart .fgroup > summary { padding:18px 20px 14px; }
body.page-cart .fgroup-body { padding:0 20px 18px; }
body.page-cart .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-cart .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-cart .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-cart .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-cart .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-cart .toolbar { gap:10px; padding-bottom:14px; }
body.page-cart .t-left { gap:10px; flex:1; }
body.page-cart .sortbtn .lbl { display:none; }
body.page-cart .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-cart .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-cart .pcard-img { border-radius:var(--radius-sm); }
body.page-cart .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-cart .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-cart .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-cart .pcard-name { font-size:13px; }
body.page-cart .pcard-p { font-size:14px; }
/* footer */
body.page-cart footer { padding:40px 0 28px; margin-top:48px; }
body.page-cart .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-cart .ftop > div:first-child { grid-column:1/-1; }
body.page-cart .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-cart .filters .f-head-clear-desktop { display:none; }
body.page-cart .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-cart .hw { padding:0 4px 0 14px; }
body.page-cart .logo { font-size:16px; }
body.page-cart .ib { width:36px; height:36px; }
body.page-cart .pgrid { gap:14px 10px; }
body.page-cart .pcard-name, body.page-cart .pcard-p { font-size:12.5px; }
}
/* ── BREADCRUMB ── */
body.page-cart .bcrumb-row { padding-top:28px; padding-bottom:12px; }
body.page-cart .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-cart .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-cart .bcrumb a:hover { color:var(--ink); }
body.page-cart .bcrumb .sep { color:var(--muted-3); }
body.page-cart .bcrumb .cur { color:var(--ink); font-weight:500; }
/* ── CART LAYOUT ── */
body.page-cart .cart-s { padding: 24px 0 72px; }
body.page-cart .cart-head {
display: flex; align-items: baseline; gap: 14px;
margin-bottom: 20px;
}
body.page-cart .cart-title {
font-size: 34px; font-weight: 700; letter-spacing: -.7px; line-height: 1.1;
color: var(--ink);
}
body.page-cart .cart-count {
font-size: 14px; color: var(--muted-2); font-weight: 500;
}
/* ── Free-shipping progress ── */
body.page-cart .ship-bar {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 14px 18px;
margin-bottom: 20px;
transition: background .3s, border-color .3s;
}
body.page-cart .ship-bar.done {
background: linear-gradient(180deg, rgba(255, 224, 232, 0.55) 0%, rgba(255, 240, 244, 0.45) 100%);
border-color: rgba(255, 45, 85, 0.18);
}
body.page-cart .ship-bar-text {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; color: var(--muted);
margin-bottom: 10px;
}
body.page-cart .ship-bar-text strong { color: var(--ink); font-weight: 700; }
body.page-cart .ship-bar.done .ship-bar-text { color: var(--brand); }
body.page-cart .ship-bar.done .ship-bar-text strong { color: var(--brand); }
body.page-cart .ship-icon {
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
color: var(--muted);
}
body.page-cart .ship-bar.done .ship-icon { color: var(--brand); }
body.page-cart .ship-icon svg { width: 18px; height: 18px; }
body.page-cart .ship-bar-track {
height: 6px; border-radius: 100px;
background: rgba(0, 0, 0, 0.06);
overflow: hidden;
}
body.page-cart .ship-bar-fill {
height: 100%;
background: linear-gradient(90deg, #FF99B0 0%, #FF2D55 100%);
border-radius: 100px;
transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
/* ── Cart grid ── */
body.page-cart .cart-grid {
display: grid; grid-template-columns: 1fr 400px; gap: 32px;
align-items: start;
}
/* ── Items list ── */
body.page-cart .cart-items {
display: flex; flex-direction: column; gap: 12px;
}
body.page-cart .cart-item {
display: grid;
grid-template-columns: 110px 1fr;
gap: 18px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 18px;
padding: 18px;
position: relative;
overflow: hidden;
transition: box-shadow .2s, border-color .2s;
}
body.page-cart .cart-item:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.1);
}
body.page-cart .ci-img-link {
display: block;
width: 110px; height: 110px;
border-radius: 14px;
overflow: hidden;
background: var(--bg);
flex-shrink: 0;
}
body.page-cart .ci-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
body.page-cart .ci-img-link:hover .ci-img { transform: scale(1.04); }
body.page-cart .ci-main {
display: flex; flex-direction: column;
min-width: 0;
justify-content: space-between;
gap: 10px;
}
body.page-cart .ci-name-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
}
body.page-cart .ci-name {
font-size: 15.5px; font-weight: 600; color: var(--ink);
line-height: 1.35; letter-spacing: -.1px;
text-decoration: none;
flex: 1; min-width: 0;
}
body.page-cart .ci-name:hover { color: var(--brand); }
body.page-cart .ci-meta {
display: flex; flex-wrap: wrap; gap: 6px;
font-size: 12px; color: var(--muted-2);
align-items: center;
}
body.page-cart .ci-variant {
font-size: 12.5px; color: var(--muted-2);
margin-right: 4px;
}
body.page-cart .ci-tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
background: rgba(0, 0, 0, 0.04);
border-radius: 100px;
font-size: 11px; font-weight: 500; color: var(--muted);
}
body.page-cart .ci-tag-stock {
background: rgba(40, 167, 90, 0.1);
color: #1f8048;
font-weight: 600;
}
body.page-cart .ci-tag-stock .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #28a75a;
}
body.page-cart .ci-bottom {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-top: 4px;
}
/* Stepper */
body.page-cart .ci-qty {
display: inline-flex; align-items: center;
border: 1px solid var(--line);
border-radius: 100px;
background: #fff;
overflow: hidden;
height: 36px;
}
body.page-cart .ci-qty-btn {
width: 34px; height: 34px;
background: transparent;
border: none;
font-size: 16px; font-weight: 500;
color: var(--ink);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body.page-cart .ci-qty-btn:hover { background: rgba(0, 0, 0, 0.05); }
body.page-cart .ci-qty-btn:active { background: rgba(0, 0, 0, 0.08); }
body.page-cart .ci-qty-val {
width: 38px; height: 34px;
text-align: center;
font-size: 14px; font-weight: 600;
color: var(--ink);
background: transparent;
border: none;
outline: none;
font-family: inherit;
-moz-appearance: textfield;
}
body.page-cart .ci-qty-val::-webkit-inner-spin-button,
body.page-cart .ci-qty-val::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0;
}
body.page-cart .ci-prices {
text-align: right;
display: flex; flex-direction: column; gap: 2px;
}
body.page-cart .ci-unit {
font-size: 11.5px; color: var(--muted-2); font-weight: 500;
}
body.page-cart .ci-total {
font-size: 17px; font-weight: 700; color: var(--ink);
letter-spacing: -.2px;
font-variant-numeric: tabular-nums;
}
body.page-cart .ci-remove {
width: 28px; height: 28px;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--muted-3);
transition: background .15s, color .15s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
body.page-cart .ci-remove svg { width: 14px; height: 14px; }
body.page-cart .ci-remove:hover {
background: rgba(255, 45, 85, 0.1);
color: var(--brand);
}
/* Cart actions */
body.page-cart .cart-actions {
display: flex; justify-content: space-between; align-items: center;
padding: 24px 4px 0;
}
body.page-cart .continue-shop {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 500; color: var(--ink);
text-decoration: none;
padding: 8px 0;
transition: color .15s;
}
body.page-cart .continue-shop:hover { color: var(--brand); }
body.page-cart .continue-shop svg { transition: transform .2s; }
body.page-cart .continue-shop:hover svg { transform: translateX(-3px); }
body.page-cart .clear-cart {
background: transparent;
border: none;
font-size: 13px; color: var(--muted-2);
cursor: pointer;
padding: 8px 14px;
border-radius: 100px;
transition: background .15s, color .15s;
}
body.page-cart .clear-cart:hover {
background: rgba(255, 45, 85, 0.08);
color: var(--brand);
}
/* Empty cart state */
body.page-cart .cart-empty {
background: #fff;
border: 1px dashed rgba(0, 0, 0, 0.12);
border-radius: 18px;
padding: 64px 24px;
text-align: center;
}
body.page-cart .cart-empty-icon {
width: 80px; height: 80px;
border-radius: 50%;
background: var(--bg);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
color: var(--muted-3);
}
body.page-cart .cart-empty h3 {
font-size: 22px; font-weight: 700; color: var(--ink);
margin-bottom: 8px;
}
body.page-cart .cart-empty p {
font-size: 14px; color: var(--muted-2);
margin-bottom: 24px;
}
body.page-cart .cart-empty-btn {
display: inline-block;
padding: 12px 28px;
background: var(--ink);
color: #fff;
border-radius: 100px;
text-decoration: none;
font-size: 14px; font-weight: 600;
transition: background .2s;
}
body.page-cart .cart-empty-btn:hover { background: var(--brand); }
/* ── Order summary card ── */
body.page-cart .cart-right { position: sticky; top: 96px; }
body.page-cart .summary {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: 22px;
padding: 26px;
display: flex; flex-direction: column;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
body.page-cart .sum-title {
font-size: 19px; font-weight: 700; color: var(--ink);
margin-bottom: 18px;
letter-spacing: -.2px;
}
body.page-cart .sum-rows {
display: flex; flex-direction: column; gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
body.page-cart .sum-row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 14px; color: var(--muted);
}
body.page-cart .sum-row[hidden] { display: none; }
body.page-cart .sum-row > span:last-child {
color: var(--ink); font-weight: 500;
font-variant-numeric: tabular-nums;
}
body.page-cart .sum-row-meta {
font-size: 12px; color: var(--muted-2);
font-weight: 400;
margin-left: 4px;
}
body.page-cart .sum-row-discount > span:last-child {
color: var(--brand);
font-weight: 600;
}
body.page-cart .sum-shipping.is-free {
color: #1f8048 !important;
font-weight: 700;
letter-spacing: 0.5px;
}
body.page-cart .sum-total {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 20px; font-weight: 800; color: var(--ink);
letter-spacing: -.3px;
margin-bottom: 18px;
font-variant-numeric: tabular-nums;
}
body.page-cart .sum-discount {
display: flex; gap: 8px;
margin-bottom: 6px;
}
body.page-cart .sum-discount input {
flex: 1; min-width: 0;
padding: 11px 16px;
border: 1px solid var(--line);
border-radius: 100px;
font-size: 13px;
font-family: inherit;
outline: none;
transition: border-color .15s, box-shadow .15s;
background: #fff;
}
body.page-cart .sum-discount input:focus {
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
body.page-cart .sum-discount button {
padding: 11px 20px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 100px;
font-size: 13px; font-weight: 600; color: var(--ink);
cursor: pointer;
transition: background .15s, border-color .15s;
}
body.page-cart .sum-discount button:hover {
background: #ECECF0;
border-color: rgba(0, 0, 0, 0.15);
}
body.page-cart .sum-discount-msg {
font-size: 12px;
margin: 0 0 6px;
padding: 0 4px;
}
body.page-cart .sum-discount-msg.ok { color: #1f8048; font-weight: 600; }
body.page-cart .sum-discount-msg.err { color: var(--brand); }
body.page-cart .checkout-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 20px;
background: var(--ink);
color: #fff;
border-radius: 100px;
text-decoration: none;
font-size: 14.5px; font-weight: 700;
transition: background .2s, transform .15s, box-shadow .2s;
letter-spacing: 0.1px;
margin-top: 10px;
}
body.page-cart .checkout-btn:hover {
background: var(--brand);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(255, 45, 85, 0.25);
}
body.page-cart .checkout-btn svg { transition: transform .2s; }
body.page-cart .checkout-btn:hover svg { transform: translateX(3px); }
body.page-cart .sum-deliv {
display: flex; align-items: center; gap: 7px;
font-size: 12.5px; color: var(--muted);
margin-top: 14px; padding: 10px 12px;
background: var(--bg);
border-radius: 10px;
justify-content: center;
}
body.page-cart .sum-deliv strong { color: var(--ink); font-weight: 600; }
body.page-cart .sum-deliv svg { color: var(--muted-2); }
body.page-cart .sum-trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
body.page-cart .trust-item {
display: flex; flex-direction: column; align-items: center;
gap: 6px;
text-align: center;
font-size: 10.5px; font-weight: 500; color: var(--muted);
line-height: 1.4;
}
body.page-cart .trust-item svg { color: var(--muted-2); }
body.page-cart .sum-pays {
display: flex; flex-wrap: wrap; gap: 5px;
justify-content: center;
margin-top: 14px;
}
body.page-cart .pay-pill {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px;
padding: 4px 8px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 5px;
color: var(--muted);
}
/* ── Recommended ── */
body.page-cart .rec-s { padding: 8px 0 64px; }
body.page-cart .rec-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
body.page-cart .rec-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 18px;
overflow: hidden;
cursor: pointer;
transition: transform .25s, box-shadow .25s, border-color .2s;
display: flex; flex-direction: column;
text-decoration: none;
color: inherit;
}
body.page-cart .rec-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.1);
}
body.page-cart .rec-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg);
}
body.page-cart .rec-img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .4s;
}
body.page-cart .rec-card:hover .rec-img img { transform: scale(1.05); }
body.page-cart .rec-body {
padding: 14px 16px 16px;
display: flex; flex-direction: column;
flex: 1;
}
body.page-cart .rec-name {
font-size: 14px; font-weight: 600; color: var(--ink);
line-height: 1.35;
margin-bottom: 3px;
}
body.page-cart .rec-meta {
font-size: 11.5px; color: var(--muted-2);
margin-bottom: 12px;
}
body.page-cart .rec-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: auto;
gap: 8px;
}
body.page-cart .rec-price {
font-size: 15px; font-weight: 700; color: var(--ink);
letter-spacing: -.1px;
}
body.page-cart .rec-add {
padding: 7px 14px;
border-radius: 100px;
background: var(--ink);
color: #fff;
font-size: 12px; font-weight: 600;
border: none; cursor: pointer;
transition: background .2s;
}
body.page-cart .rec-add:hover { background: var(--brand); }
body.page-cart .rec-add.added { background: #1f8048; }
/* ── Mobile ── */
@media (max-width: 960px) {
body.page-cart .cart-grid {
grid-template-columns: 1fr; gap: 24px;
}
body.page-cart .cart-right { position: static; }
body.page-cart .rec-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
body.page-cart .cart-title { font-size: 26px; }
body.page-cart .cart-head { gap: 10px; flex-wrap: wrap; }
body.page-cart .ship-bar { padding: 12px 14px; }
body.page-cart .ship-bar-text { font-size: 12.5px; }
body.page-cart .cart-item {
grid-template-columns: 84px 1fr;
gap: 14px;
padding: 14px;
border-radius: 16px;
}
body.page-cart .ci-img-link { width: 84px; height: 84px; border-radius: 12px; }
body.page-cart .ci-name { font-size: 14px; }
body.page-cart .ci-bottom { gap: 8px; }
body.page-cart .ci-qty { height: 34px; }
body.page-cart .ci-qty-btn { width: 30px; height: 32px; }
body.page-cart .ci-qty-val { width: 32px; height: 32px; font-size: 13px; }
body.page-cart .ci-total { font-size: 16px; }
body.page-cart .ci-unit { display: none; }
body.page-cart .summary { padding: 22px; border-radius: 18px; }
body.page-cart .rec-grid { grid-template-columns: repeat(2, 1fr); }
body.page-cart .sum-trust { grid-template-columns: repeat(3, 1fr); gap: 4px; }
body.page-cart .trust-item { font-size: 9.5px; }
body.page-cart .cart-empty { padding: 48px 20px; }
}
/* ── SUMMARY ── */
body.page-cart .summary { position:sticky; top:96px; background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-cart .sum-title { font-size:18px; font-weight:700; margin-bottom:20px; }
body.page-cart .sum-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:12px; color:var(--muted); }
body.page-cart .sum-row.total { font-size:18px; font-weight:700; color:var(--ink); padding-top:12px; border-top:1px solid var(--line-soft); margin-top:12px; }
body.page-cart .sum-discount { display:flex; gap:8px; margin:16px 0; }
body.page-cart .sum-discount input { flex:1; padding:10px 14px; border-radius:8px; border:1px solid var(--line); font-size:13px; outline:none; font-family:inherit; }
body.page-cart .sum-discount input:focus { border-color:var(--brand); }
body.page-cart .sum-discount button { padding:10px 16px; border-radius:8px; background:var(--bg); font-size:13px; font-weight:600; border:none; cursor:pointer; transition:background .2s; }
body.page-cart .sum-discount button:hover { background:var(--line); }
body.page-cart .checkout-btn {
width:100%; padding:16px; border-radius:100px; background:var(--brand); color:#fff;
font-size:15px; font-weight:700; border:none; cursor:pointer; transition:background .2s; margin-top:8px;
}
body.page-cart .checkout-btn:hover { background:var(--brand-hover); }
body.page-cart .secure-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; font-size:12px; color:var(--muted-2); }
body.page-cart .secure-note svg { width:14px; height:14px; }
/* ── EMPTY STATE ── */
body.page-cart .empty-cart { text-align:center; padding:80px 20px; }
body.page-cart .empty-cart svg { width:64px; height:64px; color:var(--muted-3); margin-bottom:20px; }
body.page-cart .empty-cart h3 { font-size:22px; font-weight:700; margin-bottom:8px; }
body.page-cart .empty-cart p { font-size:14px; color:var(--muted); margin-bottom:24px; }
body.page-cart .empty-btn { display:inline-block; padding:14px 32px; border-radius:100px; background:var(--ink); color:#fff; font-size:14px; font-weight:600; transition:background .2s; }
body.page-cart .empty-btn:hover { background:var(--brand); }
/* ── SHARED ── */
body.page-cart .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
body.page-cart .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-cart .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-cart .cart-grid { grid-template-columns:1fr 320px; gap:32px; }
body.page-cart .rec-grid { grid-template-columns:repeat(2,1fr); }
body.page-cart .cart-item { grid-template-columns:80px 1fr auto auto; gap:14px; }
body.page-cart .ci-img { width:80px; height:80px; }
}
@media (max-width:768px) {
body.page-cart .cart-grid { grid-template-columns:1fr; gap:24px; }
body.page-cart .summary { position:static; }
body.page-cart .cart-item { grid-template-columns:70px 1fr auto; row-gap:8px; }
body.page-cart .ci-img { width:70px; height:70px; }
body.page-cart .ci-price { display:none; }
body.page-cart .ci-total { grid-column:3; }
body.page-cart .ci-remove { grid-column:3; justify-self:end; }
body.page-cart .ci-qty-wrap { grid-column:2; justify-self:start; margin-top:4px; }
body.page-cart .rec-grid { grid-template-columns:1fr 1fr; }
body.page-cart .cart-title { font-size:26px; }
}
@media (max-width:380px) {
body.page-cart .cart-item { grid-template-columns:60px 1fr; }
body.page-cart .ci-img { width:60px; height:60px; }
body.page-cart .ci-qty-wrap { grid-column:2; }
body.page-cart .ci-total { grid-column:2; justify-self:start; font-size:14px; }
body.page-cart .ci-remove { grid-column:2; justify-self:end; margin-top:-28px; }
body.page-cart .rec-grid { grid-template-columns:1fr; }
}
/* ============================================================
checkout.html
============================================================ */
/* ===== checkout.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-checkout body.no-scroll { overflow:hidden; }
body.page-checkout input, body.page-checkout select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-checkout body.no-scroll { overflow:hidden; }
body.page-checkout a { text-decoration:none; color:inherit; }
body.page-checkout button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-checkout img { display:block; max-width:100%; }
body.page-checkout input, body.page-checkout select { font-family:inherit; }
body.page-checkout a:focus-visible, body.page-checkout button:focus-visible, body.page-checkout input:focus-visible, body.page-checkout summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-checkout .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-checkout .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-checkout .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-checkout .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-checkout .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-checkout header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-checkout header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-checkout .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-checkout .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-checkout .logo em { color:var(--brand); font-style:normal; }
body.page-checkout header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-checkout .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-checkout .ni > a:hover, body.page-checkout .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-checkout .ni.active > a { color:var(--brand); }
body.page-checkout .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-checkout .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-checkout .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-checkout .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-checkout .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-checkout .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-checkout .ib:hover { background:rgba(0,0,0,0.05); }
body.page-checkout .ib svg { width:17px; height:17px; }
body.page-checkout .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-checkout .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-checkout .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-checkout .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-checkout .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-checkout .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-checkout .bcrumb a:hover { color:var(--ink); }
body.page-checkout .bcrumb .sep { color:var(--muted-3); }
body.page-checkout .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-checkout .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-checkout .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-checkout .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-checkout .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-checkout .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-checkout .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-checkout .chips-row:empty { padding:0; }
body.page-checkout .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-checkout .fchip:hover { border-color:var(--ink); }
body.page-checkout .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-checkout .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-checkout .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-checkout .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-checkout .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-checkout .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-checkout .filters::-webkit-scrollbar { width:5px; }
body.page-checkout .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-checkout .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-checkout .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-checkout .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-checkout .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-checkout .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-checkout .fgroup { border-top:1px solid var(--line-soft); }
body.page-checkout .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-checkout .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-checkout .fgroup > summary::-webkit-details-marker { display:none; }
body.page-checkout .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-checkout .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-checkout .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-checkout .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-checkout .fopt:hover { color:var(--ink); }
body.page-checkout .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-checkout .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-checkout .fopt-mark.radio { border-radius:50%; }
body.page-checkout .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-checkout .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-checkout .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-checkout .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-checkout .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-checkout .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-checkout .fopt-text { flex:1; }
body.page-checkout .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-checkout .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-checkout .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-checkout .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-checkout .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-checkout .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-checkout .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-checkout .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-checkout .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-checkout .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-checkout .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-checkout .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-checkout .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-checkout .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-checkout .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-checkout .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-checkout .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-checkout .results { min-width:0; }
body.page-checkout .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-checkout .t-left { display:flex; align-items:center; gap:14px; }
body.page-checkout .t-count { font-size:13px; color:var(--muted-2); }
body.page-checkout .t-count strong { color:var(--ink); font-weight:700; }
body.page-checkout .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-checkout .sortdrop { position:relative; z-index:10; }
body.page-checkout .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-checkout .sortbtn:hover { border-color:var(--ink); }
body.page-checkout .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-checkout .sortbtn .val { font-weight:600; }
body.page-checkout .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-checkout .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-checkout .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-checkout .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-checkout .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-checkout .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-checkout .sortopt.on { color:var(--ink); font-weight:600; }
body.page-checkout .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-checkout .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-checkout .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-checkout .vbtn:hover { color:var(--ink); }
body.page-checkout .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-checkout .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-checkout .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-checkout .fbtn-mobile svg { width:14px; height:14px; }
body.page-checkout .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-checkout .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-checkout .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-checkout .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-checkout .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-checkout .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-checkout .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-checkout .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-checkout .pgrid.list-view .pcard-quick { display:none; }
body.page-checkout .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-checkout .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-checkout .pgrid.list-view .pcard-name { font-size:16px; }
body.page-checkout .pgrid.list-view .pcard-var { font-size:13px; }
body.page-checkout .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-checkout .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-checkout .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-checkout .pcard { cursor:pointer; }
body.page-checkout .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-checkout .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-checkout .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-checkout .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-checkout .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-checkout .bg-new { background:var(--ink); color:#fff; }
body.page-checkout .bg-hot { background:var(--brand); color:#fff; }
body.page-checkout .bg-sale { background:#FF9500; color:#fff; }
body.page-checkout .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-checkout .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-checkout .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-checkout .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-checkout .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-checkout .pcard:hover .pcard-quick { bottom:12px; }
body.page-checkout .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-checkout .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-checkout .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-checkout .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-checkout .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-checkout .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-checkout .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-checkout .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-checkout .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-checkout .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-checkout .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-checkout .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-checkout .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-checkout footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-checkout .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-checkout .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-checkout .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-checkout .flogo em { color:var(--brand); font-style:normal; }
body.page-checkout .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-checkout .fsocs { display:flex; gap:8px; }
body.page-checkout .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-checkout .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-checkout .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-checkout .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-checkout .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-checkout .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-checkout .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-checkout .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-checkout .fpay { display:flex; gap:8px; }
body.page-checkout .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-checkout .wrap, body.page-checkout .fw { padding:0 28px; }
body.page-checkout header { width:calc(100% - 32px); }
body.page-checkout .hw { padding:0 16px 0 22px; gap:14px; }
body.page-checkout header nav { gap:0; }
body.page-checkout .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-checkout .search-pill span { display:none; }
body.page-checkout .search-pill { padding:8px 10px; }
body.page-checkout .shop-title { font-size:34px; }
body.page-checkout .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-checkout .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-checkout .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-checkout .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-checkout .hamburger { display:flex; }
body.page-checkout header nav, body.page-checkout header .search-pill, body.page-checkout .ib[title="Wishlist"], body.page-checkout .ib[title="Account"] { display:none; }
body.page-checkout header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-checkout .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-checkout .logo { font-size:17px; }
body.page-checkout .ib { width:40px; height:40px; }
body.page-checkout .ib svg { width:18px; height:18px; }
body.page-checkout .ann-bar { padding:8px 0; }
body.page-checkout .ann-track { gap:36px; }
body.page-checkout .ann-track span { font-size:11px; }
body.page-checkout .wrap, body.page-checkout .fw { padding:0 16px; }
/* hero */
body.page-checkout .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-checkout .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-checkout .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-checkout .shop-meta { padding-bottom:0; }
body.page-checkout .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-checkout .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-checkout .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-checkout .filters.on { transform:translateY(0); }
body.page-checkout .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-checkout .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-checkout .fgroup > summary { padding:18px 20px 14px; }
body.page-checkout .fgroup-body { padding:0 20px 18px; }
body.page-checkout .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-checkout .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-checkout .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-checkout .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-checkout .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-checkout .toolbar { gap:10px; padding-bottom:14px; }
body.page-checkout .t-left { gap:10px; flex:1; }
body.page-checkout .sortbtn .lbl { display:none; }
body.page-checkout .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-checkout .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-checkout .pcard-img { border-radius:var(--radius-sm); }
body.page-checkout .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-checkout .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-checkout .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-checkout .pcard-name { font-size:13px; }
body.page-checkout .pcard-p { font-size:14px; }
/* footer */
body.page-checkout footer { padding:40px 0 28px; margin-top:48px; }
body.page-checkout .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-checkout .ftop > div:first-child { grid-column:1/-1; }
body.page-checkout .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-checkout .filters .f-head-clear-desktop { display:none; }
body.page-checkout .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-checkout .hw { padding:0 4px 0 14px; }
body.page-checkout .logo { font-size:16px; }
body.page-checkout .ib { width:36px; height:36px; }
body.page-checkout .pgrid { gap:14px 10px; }
body.page-checkout .pcard-name, body.page-checkout .pcard-p { font-size:12.5px; }
}
/* ── BREADCRUMB ── */
body.page-checkout .bcrumb-row { padding-top:28px; padding-bottom:8px; }
body.page-checkout .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-checkout .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-checkout .bcrumb a:hover { color:var(--ink); }
body.page-checkout .bcrumb .sep { color:var(--muted-3); }
body.page-checkout .bcrumb .cur { color:var(--ink); font-weight:500; }
/* ── STEPPER ── */
body.page-checkout .stepper { display:flex; align-items:center; gap:0; margin-bottom:32px; }
body.page-checkout .step { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--muted-3); }
body.page-checkout .step.on { color:var(--ink); font-weight:700; }
body.page-checkout .step.on .step-num { background:var(--brand); color:#fff; }
body.page-checkout .step.done { color:var(--brand); }
body.page-checkout .step.done .step-num { background:var(--brand-soft); color:var(--brand); }
body.page-checkout .step-num { width:28px; height:28px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
body.page-checkout .step-line { width:40px; height:1px; background:var(--line); margin:0 8px; }
body.page-checkout .step-line.done { background:var(--brand); }
/* ── CHECKOUT LAYOUT ── */
body.page-checkout .checkout-s { padding:12px 0 72px; }
body.page-checkout .checkout-grid { display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }
/* ── FORM SECTIONS ── */
body.page-checkout .form-section { background:#fff; border-radius:20px; padding:28px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-checkout .form-title { font-size:16px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
body.page-checkout .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
body.page-checkout .form-row.full { grid-template-columns:1fr; }
body.page-checkout .form-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
body.page-checkout .form-input {
width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; background:#fff; font-family:inherit;
}
body.page-checkout .form-input:focus { border-color:var(--brand); }
body.page-checkout .form-input::placeholder { color:var(--muted-3); }
body.page-checkout select.form-input { appearance:none; background-image:url('data:image/svg+xml,'); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
/* ── RADIO OPTIONS ── */
body.page-checkout .radio-option {
display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line);
border-radius:12px; margin-bottom:10px; cursor:pointer; transition:border-color .2s,background .2s;
}
body.page-checkout .radio-option:hover { border-color:var(--muted-3); }
body.page-checkout .radio-option.on { border-color:var(--brand); background:var(--brand-soft); }
body.page-checkout .radio-option input { width:18px; height:18px; accent-color:var(--brand); flex-shrink:0; }
body.page-checkout .ro-content { flex:1; }
body.page-checkout .ro-title { font-size:14px; font-weight:600; }
body.page-checkout .ro-desc { font-size:12px; color:var(--muted-2); margin-top:2px; }
body.page-checkout .ro-price { font-size:14px; font-weight:700; }
/* ── PAYMENT CARDS ── */
body.page-checkout .pay-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:14px; }
body.page-checkout .pay-card { border:1.5px solid var(--line); border-radius:10px; padding:12px; text-align:center; cursor:pointer; transition:border-color .2s; }
body.page-checkout .pay-card:hover { border-color:var(--muted-3); }
body.page-checkout .pay-card.on { border-color:var(--brand); }
body.page-checkout .pay-card svg { width:28px; height:28px; margin-bottom:4px; }
body.page-checkout .pay-card span { display:block; font-size:12px; font-weight:600; }
/* ── SUMMARY ── */
body.page-checkout .summary { position:sticky; top:96px; background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-checkout .sum-title { font-size:18px; font-weight:700; margin-bottom:20px; }
body.page-checkout .sum-item { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
body.page-checkout .sum-item img { width:48px; height:48px; border-radius:8px; object-fit:cover; }
body.page-checkout .sum-item-info { flex:1; }
body.page-checkout .sum-item-name { font-size:13px; font-weight:600; }
body.page-checkout .sum-item-qty { font-size:12px; color:var(--muted-2); }
body.page-checkout .sum-item-price { font-size:13px; font-weight:700; }
body.page-checkout .sum-divider { height:1px; background:var(--line-soft); margin:16px 0; }
body.page-checkout .sum-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--muted); }
body.page-checkout .sum-row.total { font-size:18px; font-weight:700; color:var(--ink); padding-top:10px; border-top:1px solid var(--line-soft); margin-top:10px; }
body.page-checkout .place-order-btn {
width:100%; padding:16px; border-radius:100px; background:var(--brand); color:#fff;
font-size:15px; font-weight:700; border:none; cursor:pointer; transition:background .2s; margin-top:8px;
}
body.page-checkout .place-order-btn:hover { background:var(--brand-hover); }
body.page-checkout .secure-note { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; font-size:12px; color:var(--muted-2); }
/* ── SHARED ── */
body.page-checkout .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-checkout .checkout-grid { grid-template-columns:1fr 300px; gap:32px; }
body.page-checkout .pay-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
body.page-checkout .checkout-grid { grid-template-columns:1fr; gap:24px; }
body.page-checkout .summary { position:static; }
body.page-checkout .form-row { grid-template-columns:1fr; }
body.page-checkout .pay-row { grid-template-columns:1fr 1fr; }
body.page-checkout .stepper { font-size:12px; }
body.page-checkout .step-line { width:20px; }
}
@media (max-width:380px) {
body.page-checkout .form-section { padding:20px; }
body.page-checkout .stepper { display:none; }
}
/* ============================================================
login.html
============================================================ */
/* ===== login.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-login body.no-scroll { overflow:hidden; }
body.page-login input, body.page-login select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-login body.no-scroll { overflow:hidden; }
body.page-login a { text-decoration:none; color:inherit; }
body.page-login button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-login img { display:block; max-width:100%; }
body.page-login input, body.page-login select { font-family:inherit; }
body.page-login a:focus-visible, body.page-login button:focus-visible, body.page-login input:focus-visible, body.page-login summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-login .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-login .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-login .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-login .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-login .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-login header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-login header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-login .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-login .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-login .logo em { color:var(--brand); font-style:normal; }
body.page-login header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-login .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-login .ni > a:hover, body.page-login .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-login .ni.active > a { color:var(--brand); }
body.page-login .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-login .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-login .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-login .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-login .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-login .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-login .ib:hover { background:rgba(0,0,0,0.05); }
body.page-login .ib svg { width:17px; height:17px; }
body.page-login .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-login .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-login .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-login .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-login .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-login .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-login .bcrumb a:hover { color:var(--ink); }
body.page-login .bcrumb .sep { color:var(--muted-3); }
body.page-login .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-login .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-login .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-login .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-login .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-login .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-login .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-login .chips-row:empty { padding:0; }
body.page-login .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-login .fchip:hover { border-color:var(--ink); }
body.page-login .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-login .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-login .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-login .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-login .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-login .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-login .filters::-webkit-scrollbar { width:5px; }
body.page-login .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-login .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-login .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-login .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-login .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-login .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-login .fgroup { border-top:1px solid var(--line-soft); }
body.page-login .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-login .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-login .fgroup > summary::-webkit-details-marker { display:none; }
body.page-login .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-login .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-login .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-login .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-login .fopt:hover { color:var(--ink); }
body.page-login .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-login .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-login .fopt-mark.radio { border-radius:50%; }
body.page-login .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-login .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-login .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-login .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-login .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-login .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-login .fopt-text { flex:1; }
body.page-login .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-login .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-login .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-login .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-login .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-login .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-login .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-login .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-login .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-login .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-login .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-login .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-login .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-login .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-login .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-login .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-login .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-login .results { min-width:0; }
body.page-login .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-login .t-left { display:flex; align-items:center; gap:14px; }
body.page-login .t-count { font-size:13px; color:var(--muted-2); }
body.page-login .t-count strong { color:var(--ink); font-weight:700; }
body.page-login .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-login .sortdrop { position:relative; z-index:10; }
body.page-login .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-login .sortbtn:hover { border-color:var(--ink); }
body.page-login .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-login .sortbtn .val { font-weight:600; }
body.page-login .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-login .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-login .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-login .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-login .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-login .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-login .sortopt.on { color:var(--ink); font-weight:600; }
body.page-login .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-login .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-login .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-login .vbtn:hover { color:var(--ink); }
body.page-login .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-login .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-login .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-login .fbtn-mobile svg { width:14px; height:14px; }
body.page-login .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-login .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-login .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-login .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-login .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-login .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-login .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-login .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-login .pgrid.list-view .pcard-quick { display:none; }
body.page-login .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-login .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-login .pgrid.list-view .pcard-name { font-size:16px; }
body.page-login .pgrid.list-view .pcard-var { font-size:13px; }
body.page-login .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-login .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-login .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-login .pcard { cursor:pointer; }
body.page-login .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-login .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-login .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-login .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-login .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-login .bg-new { background:var(--ink); color:#fff; }
body.page-login .bg-hot { background:var(--brand); color:#fff; }
body.page-login .bg-sale { background:#FF9500; color:#fff; }
body.page-login .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-login .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-login .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-login .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-login .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-login .pcard:hover .pcard-quick { bottom:12px; }
body.page-login .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-login .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-login .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-login .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-login .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-login .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-login .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-login .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-login .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-login .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-login .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-login .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-login .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-login footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-login .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-login .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-login .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-login .flogo em { color:var(--brand); font-style:normal; }
body.page-login .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-login .fsocs { display:flex; gap:8px; }
body.page-login .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-login .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-login .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-login .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-login .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-login .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-login .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-login .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-login .fpay { display:flex; gap:8px; }
body.page-login .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-login .wrap, body.page-login .fw { padding:0 28px; }
body.page-login header { width:calc(100% - 32px); }
body.page-login .hw { padding:0 16px 0 22px; gap:14px; }
body.page-login header nav { gap:0; }
body.page-login .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-login .search-pill span { display:none; }
body.page-login .search-pill { padding:8px 10px; }
body.page-login .shop-title { font-size:34px; }
body.page-login .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-login .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-login .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-login .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-login .hamburger { display:flex; }
body.page-login header nav, body.page-login header .search-pill, body.page-login .ib[title="Wishlist"], body.page-login .ib[title="Account"] { display:none; }
body.page-login header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-login .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-login .logo { font-size:17px; }
body.page-login .ib { width:40px; height:40px; }
body.page-login .ib svg { width:18px; height:18px; }
body.page-login .ann-bar { padding:8px 0; }
body.page-login .ann-track { gap:36px; }
body.page-login .ann-track span { font-size:11px; }
body.page-login .wrap, body.page-login .fw { padding:0 16px; }
/* hero */
body.page-login .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-login .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-login .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-login .shop-meta { padding-bottom:0; }
body.page-login .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-login .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-login .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-login .filters.on { transform:translateY(0); }
body.page-login .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-login .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-login .fgroup > summary { padding:18px 20px 14px; }
body.page-login .fgroup-body { padding:0 20px 18px; }
body.page-login .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-login .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-login .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-login .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-login .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-login .toolbar { gap:10px; padding-bottom:14px; }
body.page-login .t-left { gap:10px; flex:1; }
body.page-login .sortbtn .lbl { display:none; }
body.page-login .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-login .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-login .pcard-img { border-radius:var(--radius-sm); }
body.page-login .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-login .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-login .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-login .pcard-name { font-size:13px; }
body.page-login .pcard-p { font-size:14px; }
/* footer */
body.page-login footer { padding:40px 0 28px; margin-top:48px; }
body.page-login .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-login .ftop > div:first-child { grid-column:1/-1; }
body.page-login .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-login .filters .f-head-clear-desktop { display:none; }
body.page-login .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-login .hw { padding:0 4px 0 14px; }
body.page-login .logo { font-size:16px; }
body.page-login .ib { width:36px; height:36px; }
body.page-login .pgrid { gap:14px 10px; }
body.page-login .pcard-name, body.page-login .pcard-p { font-size:12.5px; }
}
/* ── LOGIN LAYOUT ── */
body.page-login .login-wrap { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
body.page-login .login-left {
background:#1D1D1F; display:flex; flex-direction:column; justify-content:center; align-items:center;
padding:48px; position:relative; overflow:hidden;
}
body.page-login .login-left::before {
content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.22) 0%,transparent 70%); filter:blur(60px);
}
body.page-login .login-visual { position:relative; z-index:1; text-align:center; }
body.page-login .login-visual .logo { font-size:32px; font-weight:800; color:#fff; margin-bottom:24px; display:block; }
body.page-login .login-visual .logo em { color:#FF2D55; font-style:normal; }
body.page-login .login-visual p { font-size:16px; color:rgba(255,255,255,0.5); line-height:1.7; max-width:360px; margin:0 auto 32px; }
body.page-login .login-stats { display:flex; gap:32px; position:relative; z-index:1; }
body.page-login .login-stat { text-align:center; }
body.page-login .login-stat-num { font-size:32px; font-weight:800; color:#FF2D55; line-height:1; }
body.page-login .login-stat-label { font-size:12px; color:rgba(255,255,255,0.4); margin-top:6px; }
body.page-login .login-right {
display:flex; flex-direction:column; justify-content:center; padding:48px 64px;
background:var(--bg);
}
body.page-login .login-box { width:100%; max-width:420px; margin:0 auto; }
body.page-login .login-tabs { display:flex; gap:0; margin-bottom:28px; border-bottom:2px solid var(--line); }
body.page-login .login-tab { flex:1; padding:12px; text-align:center; font-size:15px; font-weight:600; color:var(--muted-2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; }
body.page-login .login-tab.on { color:var(--ink); border-bottom-color:var(--brand); }
body.page-login .login-tab:hover:not(.on) { color:var(--ink); }
body.page-login .login-form { display:none; }
body.page-login .login-form.on { display:block; }
body.page-login .form-group { margin-bottom:18px; }
body.page-login .form-group label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
body.page-login .form-group input {
width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; background:#fff; font-family:inherit;
}
body.page-login .form-group input:focus { border-color:var(--brand); }
body.page-login .form-group input::placeholder { color:var(--muted-3); }
body.page-login .login-options { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
body.page-login .remember { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; }
body.page-login .remember input { accent-color:var(--brand); }
body.page-login .forgot { font-size:13px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-login .forgot:hover { opacity:.75; }
body.page-login .login-btn {
width:100%; padding:14px; border-radius:100px; background:var(--ink); color:#fff;
font-size:15px; font-weight:700; border:none; cursor:pointer; transition:background .2s; margin-bottom:20px;
}
body.page-login .login-btn:hover { background:var(--brand); }
body.page-login .divider { display:flex; align-items:center; gap:16px; margin-bottom:20px; color:var(--muted-3); font-size:13px; }
body.page-login .divider::before, body.page-login .divider::after { content:''; flex:1; height:1px; background:var(--line); }
body.page-login .social-row { display:flex; gap:12px; }
body.page-login .social-btn {
flex:1; padding:12px; border-radius:12px; border:1.5px solid var(--line); background:#fff;
display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:500;
color:var(--ink); cursor:pointer; transition:border-color .2s,background .2s; font-family:inherit;
}
body.page-login .social-btn:hover { border-color:var(--ink); background:var(--bg); }
body.page-login .social-btn svg { width:18px; height:18px; }
body.page-login .login-foot { text-align:center; margin-top:24px; font-size:13px; color:var(--muted); }
body.page-login .login-foot a { color:var(--brand); font-weight:500; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-login .login-right { padding:40px; }
}
@media (max-width:768px) {
body.page-login .login-wrap { grid-template-columns:1fr; }
body.page-login .login-left { display:none; }
body.page-login .login-right { padding:32px 24px; min-height:100vh; }
body.page-login .login-box { max-width:100%; }
}
/* ============================================================
order-confirmation.html
============================================================ */
/* ===== order-confirmation.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-order-confirmation body.no-scroll { overflow:hidden; }
body.page-order-confirmation input, body.page-order-confirmation select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-order-confirmation body.no-scroll { overflow:hidden; }
body.page-order-confirmation a { text-decoration:none; color:inherit; }
body.page-order-confirmation button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-order-confirmation img { display:block; max-width:100%; }
body.page-order-confirmation input, body.page-order-confirmation select { font-family:inherit; }
body.page-order-confirmation a:focus-visible, body.page-order-confirmation button:focus-visible, body.page-order-confirmation input:focus-visible, body.page-order-confirmation summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-order-confirmation .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-order-confirmation .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-order-confirmation .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-order-confirmation .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-order-confirmation .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-order-confirmation header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-order-confirmation header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-order-confirmation .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-order-confirmation .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-order-confirmation .logo em { color:var(--brand); font-style:normal; }
body.page-order-confirmation header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-order-confirmation .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-order-confirmation .ni > a:hover, body.page-order-confirmation .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-order-confirmation .ni.active > a { color:var(--brand); }
body.page-order-confirmation .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-order-confirmation .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-order-confirmation .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-order-confirmation .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-order-confirmation .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-order-confirmation .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-order-confirmation .ib:hover { background:rgba(0,0,0,0.05); }
body.page-order-confirmation .ib svg { width:17px; height:17px; }
body.page-order-confirmation .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-order-confirmation .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-order-confirmation .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-order-confirmation .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-order-confirmation .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-order-confirmation .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-order-confirmation .bcrumb a:hover { color:var(--ink); }
body.page-order-confirmation .bcrumb .sep { color:var(--muted-3); }
body.page-order-confirmation .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-order-confirmation .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-order-confirmation .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-order-confirmation .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-order-confirmation .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-order-confirmation .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-order-confirmation .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-order-confirmation .chips-row:empty { padding:0; }
body.page-order-confirmation .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-order-confirmation .fchip:hover { border-color:var(--ink); }
body.page-order-confirmation .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-order-confirmation .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-order-confirmation .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-order-confirmation .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-order-confirmation .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-order-confirmation .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-order-confirmation .filters::-webkit-scrollbar { width:5px; }
body.page-order-confirmation .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-order-confirmation .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-order-confirmation .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-order-confirmation .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-order-confirmation .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-order-confirmation .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-order-confirmation .fgroup { border-top:1px solid var(--line-soft); }
body.page-order-confirmation .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-order-confirmation .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-order-confirmation .fgroup > summary::-webkit-details-marker { display:none; }
body.page-order-confirmation .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-order-confirmation .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-order-confirmation .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-order-confirmation .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-order-confirmation .fopt:hover { color:var(--ink); }
body.page-order-confirmation .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-order-confirmation .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-order-confirmation .fopt-mark.radio { border-radius:50%; }
body.page-order-confirmation .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-order-confirmation .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-order-confirmation .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-order-confirmation .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-order-confirmation .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-order-confirmation .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-order-confirmation .fopt-text { flex:1; }
body.page-order-confirmation .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-order-confirmation .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-order-confirmation .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-order-confirmation .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-order-confirmation .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-order-confirmation .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-order-confirmation .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-order-confirmation .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-order-confirmation .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-order-confirmation .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-order-confirmation .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-order-confirmation .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-order-confirmation .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-order-confirmation .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-order-confirmation .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-order-confirmation .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-order-confirmation .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-order-confirmation .results { min-width:0; }
body.page-order-confirmation .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-order-confirmation .t-left { display:flex; align-items:center; gap:14px; }
body.page-order-confirmation .t-count { font-size:13px; color:var(--muted-2); }
body.page-order-confirmation .t-count strong { color:var(--ink); font-weight:700; }
body.page-order-confirmation .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-order-confirmation .sortdrop { position:relative; z-index:10; }
body.page-order-confirmation .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-order-confirmation .sortbtn:hover { border-color:var(--ink); }
body.page-order-confirmation .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-order-confirmation .sortbtn .val { font-weight:600; }
body.page-order-confirmation .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-order-confirmation .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-order-confirmation .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-order-confirmation .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-order-confirmation .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-order-confirmation .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-order-confirmation .sortopt.on { color:var(--ink); font-weight:600; }
body.page-order-confirmation .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-order-confirmation .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-order-confirmation .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-order-confirmation .vbtn:hover { color:var(--ink); }
body.page-order-confirmation .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-order-confirmation .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-order-confirmation .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-order-confirmation .fbtn-mobile svg { width:14px; height:14px; }
body.page-order-confirmation .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-order-confirmation .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-order-confirmation .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-order-confirmation .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-order-confirmation .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-order-confirmation .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-order-confirmation .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-order-confirmation .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-order-confirmation .pgrid.list-view .pcard-quick { display:none; }
body.page-order-confirmation .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-order-confirmation .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-order-confirmation .pgrid.list-view .pcard-name { font-size:16px; }
body.page-order-confirmation .pgrid.list-view .pcard-var { font-size:13px; }
body.page-order-confirmation .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-order-confirmation .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-order-confirmation .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-order-confirmation .pcard { cursor:pointer; }
body.page-order-confirmation .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-order-confirmation .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-order-confirmation .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-order-confirmation .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-order-confirmation .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-order-confirmation .bg-new { background:var(--ink); color:#fff; }
body.page-order-confirmation .bg-hot { background:var(--brand); color:#fff; }
body.page-order-confirmation .bg-sale { background:#FF9500; color:#fff; }
body.page-order-confirmation .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-order-confirmation .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-order-confirmation .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-order-confirmation .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-order-confirmation .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-order-confirmation .pcard:hover .pcard-quick { bottom:12px; }
body.page-order-confirmation .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-order-confirmation .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-order-confirmation .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-order-confirmation .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-order-confirmation .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-order-confirmation .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-order-confirmation .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-order-confirmation .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-order-confirmation .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-order-confirmation .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-order-confirmation .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-order-confirmation .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-order-confirmation .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-order-confirmation footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-order-confirmation .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-order-confirmation .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-order-confirmation .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-order-confirmation .flogo em { color:var(--brand); font-style:normal; }
body.page-order-confirmation .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-order-confirmation .fsocs { display:flex; gap:8px; }
body.page-order-confirmation .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-order-confirmation .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-order-confirmation .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-order-confirmation .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-order-confirmation .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-order-confirmation .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-order-confirmation .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-order-confirmation .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-order-confirmation .fpay { display:flex; gap:8px; }
body.page-order-confirmation .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-order-confirmation .wrap, body.page-order-confirmation .fw { padding:0 28px; }
body.page-order-confirmation header { width:calc(100% - 32px); }
body.page-order-confirmation .hw { padding:0 16px 0 22px; gap:14px; }
body.page-order-confirmation header nav { gap:0; }
body.page-order-confirmation .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-order-confirmation .search-pill span { display:none; }
body.page-order-confirmation .search-pill { padding:8px 10px; }
body.page-order-confirmation .shop-title { font-size:34px; }
body.page-order-confirmation .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-order-confirmation .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-order-confirmation .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-order-confirmation .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-order-confirmation .hamburger { display:flex; }
body.page-order-confirmation header nav, body.page-order-confirmation header .search-pill, body.page-order-confirmation .ib[title="Wishlist"], body.page-order-confirmation .ib[title="Account"] { display:none; }
body.page-order-confirmation header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-order-confirmation .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-order-confirmation .logo { font-size:17px; }
body.page-order-confirmation .ib { width:40px; height:40px; }
body.page-order-confirmation .ib svg { width:18px; height:18px; }
body.page-order-confirmation .ann-bar { padding:8px 0; }
body.page-order-confirmation .ann-track { gap:36px; }
body.page-order-confirmation .ann-track span { font-size:11px; }
body.page-order-confirmation .wrap, body.page-order-confirmation .fw { padding:0 16px; }
/* hero */
body.page-order-confirmation .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-order-confirmation .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-order-confirmation .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-order-confirmation .shop-meta { padding-bottom:0; }
body.page-order-confirmation .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-order-confirmation .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-order-confirmation .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-order-confirmation .filters.on { transform:translateY(0); }
body.page-order-confirmation .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-order-confirmation .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-order-confirmation .fgroup > summary { padding:18px 20px 14px; }
body.page-order-confirmation .fgroup-body { padding:0 20px 18px; }
body.page-order-confirmation .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-order-confirmation .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-order-confirmation .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-order-confirmation .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-order-confirmation .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-order-confirmation .toolbar { gap:10px; padding-bottom:14px; }
body.page-order-confirmation .t-left { gap:10px; flex:1; }
body.page-order-confirmation .sortbtn .lbl { display:none; }
body.page-order-confirmation .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-order-confirmation .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-order-confirmation .pcard-img { border-radius:var(--radius-sm); }
body.page-order-confirmation .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-order-confirmation .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-order-confirmation .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-order-confirmation .pcard-name { font-size:13px; }
body.page-order-confirmation .pcard-p { font-size:14px; }
/* footer */
body.page-order-confirmation footer { padding:40px 0 28px; margin-top:48px; }
body.page-order-confirmation .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-order-confirmation .ftop > div:first-child { grid-column:1/-1; }
body.page-order-confirmation .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-order-confirmation .filters .f-head-clear-desktop { display:none; }
body.page-order-confirmation .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-order-confirmation .hw { padding:0 4px 0 14px; }
body.page-order-confirmation .logo { font-size:16px; }
body.page-order-confirmation .ib { width:36px; height:36px; }
body.page-order-confirmation .pgrid { gap:14px 10px; }
body.page-order-confirmation .pcard-name, body.page-order-confirmation .pcard-p { font-size:12.5px; }
}
/* ── BREADCRUMB ── */
body.page-order-confirmation .bcrumb-row { padding-top:28px; padding-bottom:8px; }
body.page-order-confirmation .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-order-confirmation .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-order-confirmation .bcrumb a:hover { color:var(--ink); }
body.page-order-confirmation .bcrumb .sep { color:var(--muted-3); }
body.page-order-confirmation .bcrumb .cur { color:var(--ink); font-weight:500; }
/* ── SUCCESS HERO ── */
body.page-order-confirmation .success-hero { padding:48px 0 32px; text-align:center; }
body.page-order-confirmation .success-icon {
width:80px; height:80px; border-radius:50%; background:var(--brand-soft); display:flex; align-items:center; justify-content:center;
margin:0 auto 20px; animation:scaleIn .5s cubic-bezier(.25,1,.5,1);
}
@keyframes scaleIn { from{transform:scale(0)} to{transform:scale(1)} }
body.page-order-confirmation .success-icon svg { width:36px; height:36px; color:var(--brand); }
body.page-order-confirmation .success-hero h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-order-confirmation .success-hero p { font-size:15px; color:var(--muted); max-width:460px; margin:0 auto 20px; line-height:1.6; }
body.page-order-confirmation .order-num { display:inline-block; background:var(--bg); padding:8px 20px; border-radius:100px; font-size:14px; font-weight:600; color:var(--ink); }
body.page-order-confirmation .order-num span { color:var(--muted-2); font-weight:500; }
/* ── CONFIRMATION LAYOUT ── */
body.page-order-confirmation .confirm-s { padding:0 0 72px; }
body.page-order-confirmation .confirm-grid { display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }
/* ── INFO CARDS ── */
body.page-order-confirmation .info-card { background:#fff; border-radius:20px; padding:28px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-order-confirmation .info-title { font-size:16px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
body.page-order-confirmation .info-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
body.page-order-confirmation .info-row:last-child { border-bottom:none; }
body.page-order-confirmation .info-label { color:var(--muted); }
body.page-order-confirmation .info-value { font-weight:600; color:var(--ink); }
body.page-order-confirmation .info-address { font-size:14px; color:var(--ink-2); line-height:1.7; }
body.page-order-confirmation .info-address strong { display:block; color:var(--ink); margin-bottom:4px; }
/* ── TIMELINE ── */
body.page-order-confirmation .delivery-track { display:flex; justify-content:space-between; position:relative; margin:24px 0 8px; }
body.page-order-confirmation .delivery-track::before { content:''; position:absolute; top:14px; left:0; right:0; height:2px; background:var(--line); z-index:0; }
body.page-order-confirmation .dstep { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; z-index:1; }
body.page-order-confirmation .dstep-dot { width:28px; height:28px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; }
body.page-order-confirmation .dstep-dot svg { width:14px; height:14px; color:#fff; }
body.page-order-confirmation .dstep-dot.pending { background:var(--bg); border:2px solid var(--line); }
body.page-order-confirmation .dstep-dot.pending svg { display:none; }
body.page-order-confirmation .dstep-label { font-size:11px; font-weight:600; color:var(--muted); text-align:center; }
body.page-order-confirmation .dstep.on .dstep-label { color:var(--brand); }
/* ── SUMMARY ── */
body.page-order-confirmation .summary { position:sticky; top:96px; background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-order-confirmation .sum-title { font-size:18px; font-weight:700; margin-bottom:20px; }
body.page-order-confirmation .sum-item { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
body.page-order-confirmation .sum-item img { width:48px; height:48px; border-radius:8px; object-fit:cover; }
body.page-order-confirmation .sum-item-info { flex:1; }
body.page-order-confirmation .sum-item-name { font-size:13px; font-weight:600; }
body.page-order-confirmation .sum-item-qty { font-size:12px; color:var(--muted-2); }
body.page-order-confirmation .sum-item-price { font-size:13px; font-weight:700; }
body.page-order-confirmation .sum-divider { height:1px; background:var(--line-soft); margin:16px 0; }
body.page-order-confirmation .sum-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--muted); }
body.page-order-confirmation .sum-row.total { font-size:18px; font-weight:700; color:var(--ink); padding-top:10px; border-top:1px solid var(--line-soft); margin-top:10px; }
/* ── ACTION BUTTONS ── */
body.page-order-confirmation .action-row { display:flex; gap:12px; margin-top:20px; }
body.page-order-confirmation .action-btn {
flex:1; padding:14px; border-radius:100px; text-align:center; font-size:14px; font-weight:600;
transition:all .2s; cursor:pointer; text-decoration:none;
}
body.page-order-confirmation .action-btn.primary { background:var(--ink); color:#fff; border:none; }
body.page-order-confirmation .action-btn.primary:hover { background:var(--brand); }
body.page-order-confirmation .action-btn.secondary { background:var(--bg); color:var(--ink); border:1.5px solid var(--line); }
body.page-order-confirmation .action-btn.secondary:hover { border-color:var(--ink); }
/* ── SHARED ── */
body.page-order-confirmation .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-order-confirmation .confirm-grid { grid-template-columns:1fr 300px; gap:32px; }
}
@media (max-width:768px) {
body.page-order-confirmation .confirm-grid { grid-template-columns:1fr; gap:24px; }
body.page-order-confirmation .summary { position:static; }
body.page-order-confirmation .success-hero h1 { font-size:28px; }
body.page-order-confirmation .delivery-track { gap:8px; }
body.page-order-confirmation .dstep-label { font-size:10px; }
body.page-order-confirmation .action-row { flex-direction:column; }
}
@media (max-width:380px) {
body.page-order-confirmation .success-hero { padding:32px 0 20px; }
body.page-order-confirmation .success-icon { width:64px; height:64px; }
body.page-order-confirmation .success-icon svg { width:28px; height:28px; }
body.page-order-confirmation .success-hero h1 { font-size:24px; }
body.page-order-confirmation .info-card { padding:20px; }
}
/* ============================================================
wishlist.html
============================================================ */
/* ===== wishlist.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-wishlist body.no-scroll { overflow:hidden; }
body.page-wishlist input, body.page-wishlist select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-wishlist body.no-scroll { overflow:hidden; }
body.page-wishlist a { text-decoration:none; color:inherit; }
body.page-wishlist button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-wishlist img { display:block; max-width:100%; }
body.page-wishlist input, body.page-wishlist select { font-family:inherit; }
body.page-wishlist a:focus-visible, body.page-wishlist button:focus-visible, body.page-wishlist input:focus-visible, body.page-wishlist summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-wishlist .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-wishlist .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-wishlist .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-wishlist .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-wishlist .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-wishlist header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-wishlist header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-wishlist .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-wishlist .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-wishlist .logo em { color:var(--brand); font-style:normal; }
body.page-wishlist header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-wishlist .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-wishlist .ni > a:hover, body.page-wishlist .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-wishlist .ni.active > a { color:var(--brand); }
body.page-wishlist .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-wishlist .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-wishlist .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-wishlist .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-wishlist .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-wishlist .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-wishlist .ib:hover { background:rgba(0,0,0,0.05); }
body.page-wishlist .ib svg { width:17px; height:17px; }
body.page-wishlist .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-wishlist .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-wishlist .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-wishlist .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-wishlist .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-wishlist .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-wishlist .bcrumb a:hover { color:var(--ink); }
body.page-wishlist .bcrumb .sep { color:var(--muted-3); }
body.page-wishlist .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-wishlist .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-wishlist .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-wishlist .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-wishlist .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-wishlist .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-wishlist .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-wishlist .chips-row:empty { padding:0; }
body.page-wishlist .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-wishlist .fchip:hover { border-color:var(--ink); }
body.page-wishlist .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-wishlist .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-wishlist .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-wishlist .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-wishlist .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-wishlist .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-wishlist .filters::-webkit-scrollbar { width:5px; }
body.page-wishlist .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-wishlist .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-wishlist .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-wishlist .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-wishlist .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-wishlist .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-wishlist .fgroup { border-top:1px solid var(--line-soft); }
body.page-wishlist .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-wishlist .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-wishlist .fgroup > summary::-webkit-details-marker { display:none; }
body.page-wishlist .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-wishlist .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-wishlist .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-wishlist .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-wishlist .fopt:hover { color:var(--ink); }
body.page-wishlist .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-wishlist .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-wishlist .fopt-mark.radio { border-radius:50%; }
body.page-wishlist .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-wishlist .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-wishlist .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-wishlist .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-wishlist .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-wishlist .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-wishlist .fopt-text { flex:1; }
body.page-wishlist .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-wishlist .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-wishlist .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-wishlist .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-wishlist .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-wishlist .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-wishlist .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-wishlist .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-wishlist .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-wishlist .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-wishlist .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-wishlist .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-wishlist .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-wishlist .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-wishlist .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-wishlist .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-wishlist .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-wishlist .results { min-width:0; }
body.page-wishlist .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-wishlist .t-left { display:flex; align-items:center; gap:14px; }
body.page-wishlist .t-count { font-size:13px; color:var(--muted-2); }
body.page-wishlist .t-count strong { color:var(--ink); font-weight:700; }
body.page-wishlist .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-wishlist .sortdrop { position:relative; z-index:10; }
body.page-wishlist .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-wishlist .sortbtn:hover { border-color:var(--ink); }
body.page-wishlist .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-wishlist .sortbtn .val { font-weight:600; }
body.page-wishlist .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-wishlist .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-wishlist .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-wishlist .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-wishlist .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-wishlist .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-wishlist .sortopt.on { color:var(--ink); font-weight:600; }
body.page-wishlist .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-wishlist .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-wishlist .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-wishlist .vbtn:hover { color:var(--ink); }
body.page-wishlist .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-wishlist .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-wishlist .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-wishlist .fbtn-mobile svg { width:14px; height:14px; }
body.page-wishlist .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-wishlist .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-wishlist .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-wishlist .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-wishlist .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-wishlist .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-wishlist .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-wishlist .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-wishlist .pgrid.list-view .pcard-quick { display:none; }
body.page-wishlist .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-wishlist .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-wishlist .pgrid.list-view .pcard-name { font-size:16px; }
body.page-wishlist .pgrid.list-view .pcard-var { font-size:13px; }
body.page-wishlist .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-wishlist .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-wishlist .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-wishlist .pcard { cursor:pointer; }
body.page-wishlist .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-wishlist .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-wishlist .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-wishlist .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-wishlist .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-wishlist .bg-new { background:var(--ink); color:#fff; }
body.page-wishlist .bg-hot { background:var(--brand); color:#fff; }
body.page-wishlist .bg-sale { background:#FF9500; color:#fff; }
body.page-wishlist .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-wishlist .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-wishlist .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-wishlist .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-wishlist .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-wishlist .pcard:hover .pcard-quick { bottom:12px; }
body.page-wishlist .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-wishlist .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-wishlist .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-wishlist .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-wishlist .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-wishlist .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-wishlist .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-wishlist .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-wishlist .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-wishlist .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-wishlist .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-wishlist .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-wishlist .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-wishlist footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-wishlist .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-wishlist .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-wishlist .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-wishlist .flogo em { color:var(--brand); font-style:normal; }
body.page-wishlist .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-wishlist .fsocs { display:flex; gap:8px; }
body.page-wishlist .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-wishlist .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-wishlist .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-wishlist .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-wishlist .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-wishlist .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-wishlist .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-wishlist .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-wishlist .fpay { display:flex; gap:8px; }
body.page-wishlist .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-wishlist .wrap, body.page-wishlist .fw { padding:0 28px; }
body.page-wishlist header { width:calc(100% - 32px); }
body.page-wishlist .hw { padding:0 16px 0 22px; gap:14px; }
body.page-wishlist header nav { gap:0; }
body.page-wishlist .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-wishlist .search-pill span { display:none; }
body.page-wishlist .search-pill { padding:8px 10px; }
body.page-wishlist .shop-title { font-size:34px; }
body.page-wishlist .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-wishlist .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-wishlist .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-wishlist .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-wishlist .hamburger { display:flex; }
body.page-wishlist header nav, body.page-wishlist header .search-pill, body.page-wishlist .ib[title="Wishlist"], body.page-wishlist .ib[title="Account"] { display:none; }
body.page-wishlist header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-wishlist .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-wishlist .logo { font-size:17px; }
body.page-wishlist .ib { width:40px; height:40px; }
body.page-wishlist .ib svg { width:18px; height:18px; }
body.page-wishlist .ann-bar { padding:8px 0; }
body.page-wishlist .ann-track { gap:36px; }
body.page-wishlist .ann-track span { font-size:11px; }
body.page-wishlist .wrap, body.page-wishlist .fw { padding:0 16px; }
/* hero */
body.page-wishlist .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-wishlist .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-wishlist .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-wishlist .shop-meta { padding-bottom:0; }
body.page-wishlist .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-wishlist .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-wishlist .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-wishlist .filters.on { transform:translateY(0); }
body.page-wishlist .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-wishlist .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-wishlist .fgroup > summary { padding:18px 20px 14px; }
body.page-wishlist .fgroup-body { padding:0 20px 18px; }
body.page-wishlist .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-wishlist .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-wishlist .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-wishlist .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-wishlist .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-wishlist .toolbar { gap:10px; padding-bottom:14px; }
body.page-wishlist .t-left { gap:10px; flex:1; }
body.page-wishlist .sortbtn .lbl { display:none; }
body.page-wishlist .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-wishlist .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-wishlist .pcard-img { border-radius:var(--radius-sm); }
body.page-wishlist .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-wishlist .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-wishlist .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-wishlist .pcard-name { font-size:13px; }
body.page-wishlist .pcard-p { font-size:14px; }
/* footer */
body.page-wishlist footer { padding:40px 0 28px; margin-top:48px; }
body.page-wishlist .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-wishlist .ftop > div:first-child { grid-column:1/-1; }
body.page-wishlist .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-wishlist .filters .f-head-clear-desktop { display:none; }
body.page-wishlist .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-wishlist .hw { padding:0 4px 0 14px; }
body.page-wishlist .logo { font-size:16px; }
body.page-wishlist .ib { width:36px; height:36px; }
body.page-wishlist .pgrid { gap:14px 10px; }
body.page-wishlist .pcard-name, body.page-wishlist .pcard-p { font-size:12.5px; }
}
/* ── BREADCRUMB ── */
body.page-wishlist .bcrumb-row { padding-top:28px; padding-bottom:12px; }
body.page-wishlist .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
body.page-wishlist .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-wishlist .bcrumb a:hover { color:var(--ink); }
body.page-wishlist .bcrumb .sep { color:var(--muted-3); }
body.page-wishlist .bcrumb .cur { color:var(--ink); font-weight:500; }
/* ── WISHLIST SECTION ── */
body.page-wishlist .wish-s { padding:12px 0 72px; }
body.page-wishlist .wish-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
body.page-wishlist .wish-title { font-size:32px; font-weight:700; letter-spacing:-.6px; }
body.page-wishlist .wish-count { font-size:15px; color:var(--muted-2); font-weight:500; }
body.page-wishlist .wish-actions { display:flex; gap:10px; }
body.page-wishlist .wish-btn { padding:10px 20px; border-radius:100px; font-size:13px; font-weight:600; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition:all .2s; font-family:inherit; }
body.page-wishlist .wish-btn:hover { border-color:var(--ink); }
body.page-wishlist .wish-btn.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
body.page-wishlist .wish-btn.primary:hover { background:var(--brand); border-color:var(--brand); }
/* ── PRODUCT GRID ── */
body.page-wishlist .wish-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-wishlist .wcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; position:relative; }
body.page-wishlist .wcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-wishlist .wimg { position:relative; height:260px; overflow:hidden; }
body.page-wishlist .wimg img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-wishlist .wcard:hover .wimg img { transform:scale(1.06); }
body.page-wishlist .wbadge { position:absolute; top:12px; left:12px; background:rgba(255,45,85,0.9); color:#fff; padding:4px 10px; border-radius:100px; font-size:11px; font-weight:700; }
body.page-wishlist .wheart {
position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all .2s; border:none;
}
body.page-wishlist .wheart:hover { background:var(--brand); color:#fff; }
body.page-wishlist .wheart svg { width:16px; height:16px; }
body.page-wishlist .wbody { padding:18px 20px 22px; }
body.page-wishlist .wbrand { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
body.page-wishlist .wname { font-size:15px; font-weight:700; line-height:1.3; margin-bottom:6px; }
body.page-wishlist .wmeta { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
body.page-wishlist .wstars { display:flex; gap:2px; }
body.page-wishlist .wstars svg { width:12px; height:12px; color:#FFB800; }
body.page-wishlist .wrev { font-size:12px; color:var(--muted-2); }
body.page-wishlist .wfoot { display:flex; align-items:center; justify-content:space-between; }
body.page-wishlist .wprice { font-size:17px; font-weight:700; }
body.page-wishlist .wprice .was { font-size:13px; color:var(--muted-3); text-decoration:line-through; font-weight:500; margin-left:6px; }
body.page-wishlist .wadd { padding:8px 18px; border-radius:100px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:background .2s; }
body.page-wishlist .wadd:hover { background:var(--brand); }
/* ── EMPTY STATE ── */
body.page-wishlist .empty-wish { text-align:center; padding:80px 20px; }
body.page-wishlist .empty-wish svg { width:64px; height:64px; color:var(--muted-3); margin-bottom:20px; }
body.page-wishlist .empty-wish h3 { font-size:22px; font-weight:700; margin-bottom:8px; }
body.page-wishlist .empty-wish p { font-size:14px; color:var(--muted); margin-bottom:24px; }
/* ── RECOMMENDED ── */
body.page-wishlist .rec-s { padding:0 0 72px; }
body.page-wishlist .rec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* ── SHARED ── */
body.page-wishlist .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
body.page-wishlist .st { font-size:34px; font-weight:700; letter-spacing:-.5px; line-height:1.1; }
body.page-wishlist .sh { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-wishlist .wish-grid { grid-template-columns:repeat(3,1fr); }
body.page-wishlist .rec-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
body.page-wishlist .wish-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
body.page-wishlist .wish-head { flex-direction:column; align-items:flex-start; }
body.page-wishlist .rec-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:380px) {
body.page-wishlist .wish-grid { grid-template-columns:1fr; }
body.page-wishlist .wimg { height:220px; }
body.page-wishlist .rec-grid { grid-template-columns:1fr; }
body.page-wishlist .wish-title { font-size:26px; }
}
/* ============================================================
search.html
============================================================ */
/* ===== search.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-search body.no-scroll { overflow:hidden; }
body.page-search input, body.page-search select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-search body.no-scroll { overflow:hidden; }
body.page-search a { text-decoration:none; color:inherit; }
body.page-search button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-search img { display:block; max-width:100%; }
body.page-search input, body.page-search select { font-family:inherit; }
body.page-search a:focus-visible, body.page-search button:focus-visible, body.page-search input:focus-visible, body.page-search summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-search .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-search .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-search .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-search .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-search .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-search header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-search header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-search .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-search .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-search .logo em { color:var(--brand); font-style:normal; }
body.page-search header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-search .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-search .ni > a:hover, body.page-search .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-search .ni.active > a { color:var(--brand); }
body.page-search .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-search .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-search .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-search .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-search .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-search .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-search .ib:hover { background:rgba(0,0,0,0.05); }
body.page-search .ib svg { width:17px; height:17px; }
body.page-search .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-search .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-search .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-search .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-search .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-search .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-search .bcrumb a:hover { color:var(--ink); }
body.page-search .bcrumb .sep { color:var(--muted-3); }
body.page-search .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-search .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-search .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-search .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-search .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-search .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-search .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-search .chips-row:empty { padding:0; }
body.page-search .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-search .fchip:hover { border-color:var(--ink); }
body.page-search .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-search .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-search .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-search .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-search .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-search .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-search .filters::-webkit-scrollbar { width:5px; }
body.page-search .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-search .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-search .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-search .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-search .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-search .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-search .fgroup { border-top:1px solid var(--line-soft); }
body.page-search .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-search .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-search .fgroup > summary::-webkit-details-marker { display:none; }
body.page-search .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-search .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-search .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-search .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-search .fopt:hover { color:var(--ink); }
body.page-search .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-search .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-search .fopt-mark.radio { border-radius:50%; }
body.page-search .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-search .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-search .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-search .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-search .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-search .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-search .fopt-text { flex:1; }
body.page-search .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-search .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-search .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-search .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-search .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-search .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-search .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-search .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-search .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-search .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-search .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-search .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-search .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-search .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-search .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-search .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-search .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-search .results { min-width:0; }
body.page-search .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-search .t-left { display:flex; align-items:center; gap:14px; }
body.page-search .t-count { font-size:13px; color:var(--muted-2); }
body.page-search .t-count strong { color:var(--ink); font-weight:700; }
body.page-search .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-search .sortdrop { position:relative; z-index:10; }
body.page-search .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-search .sortbtn:hover { border-color:var(--ink); }
body.page-search .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-search .sortbtn .val { font-weight:600; }
body.page-search .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-search .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-search .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-search .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-search .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-search .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-search .sortopt.on { color:var(--ink); font-weight:600; }
body.page-search .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-search .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-search .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-search .vbtn:hover { color:var(--ink); }
body.page-search .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-search .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-search .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-search .fbtn-mobile svg { width:14px; height:14px; }
body.page-search .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-search .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-search .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-search .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-search .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-search .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-search .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-search .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-search .pgrid.list-view .pcard-quick { display:none; }
body.page-search .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-search .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-search .pgrid.list-view .pcard-name { font-size:16px; }
body.page-search .pgrid.list-view .pcard-var { font-size:13px; }
body.page-search .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-search .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-search .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-search .pcard { cursor:pointer; }
body.page-search .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-search .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-search .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-search .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-search .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-search .bg-new { background:var(--ink); color:#fff; }
body.page-search .bg-hot { background:var(--brand); color:#fff; }
body.page-search .bg-sale { background:#FF9500; color:#fff; }
body.page-search .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-search .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-search .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-search .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-search .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-search .pcard:hover .pcard-quick { bottom:12px; }
body.page-search .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-search .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-search .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-search .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-search .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-search .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-search .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-search .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-search .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-search .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-search .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-search .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-search .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-search footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-search .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-search .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-search .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-search .flogo em { color:var(--brand); font-style:normal; }
body.page-search .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-search .fsocs { display:flex; gap:8px; }
body.page-search .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-search .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-search .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-search .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-search .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-search .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-search .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-search .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-search .fpay { display:flex; gap:8px; }
body.page-search .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-search .wrap, body.page-search .fw { padding:0 28px; }
body.page-search header { width:calc(100% - 32px); }
body.page-search .hw { padding:0 16px 0 22px; gap:14px; }
body.page-search header nav { gap:0; }
body.page-search .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-search .search-pill span { display:none; }
body.page-search .search-pill { padding:8px 10px; }
body.page-search .shop-title { font-size:34px; }
body.page-search .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-search .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-search .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-search .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-search .hamburger { display:flex; }
body.page-search header nav, body.page-search header .search-pill, body.page-search .ib[title="Wishlist"], body.page-search .ib[title="Account"] { display:none; }
body.page-search header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-search .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-search .logo { font-size:17px; }
body.page-search .ib { width:40px; height:40px; }
body.page-search .ib svg { width:18px; height:18px; }
body.page-search .ann-bar { padding:8px 0; }
body.page-search .ann-track { gap:36px; }
body.page-search .ann-track span { font-size:11px; }
body.page-search .wrap, body.page-search .fw { padding:0 16px; }
/* hero */
body.page-search .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-search .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-search .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-search .shop-meta { padding-bottom:0; }
body.page-search .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-search .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-search .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-search .filters.on { transform:translateY(0); }
body.page-search .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-search .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-search .fgroup > summary { padding:18px 20px 14px; }
body.page-search .fgroup-body { padding:0 20px 18px; }
body.page-search .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-search .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-search .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-search .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-search .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-search .toolbar { gap:10px; padding-bottom:14px; }
body.page-search .t-left { gap:10px; flex:1; }
body.page-search .sortbtn .lbl { display:none; }
body.page-search .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-search .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-search .pcard-img { border-radius:var(--radius-sm); }
body.page-search .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-search .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-search .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-search .pcard-name { font-size:13px; }
body.page-search .pcard-p { font-size:14px; }
/* footer */
body.page-search footer { padding:40px 0 28px; margin-top:48px; }
body.page-search .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-search .ftop > div:first-child { grid-column:1/-1; }
body.page-search .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-search .filters .f-head-clear-desktop { display:none; }
body.page-search .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-search .hw { padding:0 4px 0 14px; }
body.page-search .logo { font-size:16px; }
body.page-search .ib { width:36px; height:36px; }
body.page-search .pgrid { gap:14px 10px; }
body.page-search .pcard-name, body.page-search .pcard-p { font-size:12.5px; }
}
/* ── SEARCH HERO ── */
body.page-search .search-hero { padding:48px 0 32px; text-align:center; }
body.page-search .search-hero h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-search .search-hero p { font-size:15px; color:var(--muted); }
body.page-search .search-box { max-width:640px; margin:24px auto 0; position:relative; }
body.page-search .search-box input {
width:100%; padding:16px 24px 16px 52px; border-radius:100px; border:1.5px solid var(--line);
font-size:16px; color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s;
background:#fff; font-family:inherit;
}
body.page-search .search-box input:focus { border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,45,85,0.08); }
body.page-search .search-box svg { position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted-3); }
body.page-search .search-box button {
position:absolute; right:6px; top:50%; transform:translateY(-50%);
padding:10px 22px; border-radius:100px; background:var(--ink); color:#fff;
font-size:14px; font-weight:600; border:none; cursor:pointer; transition:background .2s;
}
body.page-search .search-box button:hover { background:var(--brand); }
/* ── RESULTS META ── */
body.page-search .results-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
body.page-search .results-count { font-size:14px; color:var(--muted); }
body.page-search .results-count strong { color:var(--ink); }
body.page-search .sort-select { padding:8px 14px; border-radius:8px; border:1.5px solid var(--line); font-size:13px; color:var(--ink); background:#fff; font-family:inherit; outline:none; }
/* ── RESULTS LAYOUT ── */
body.page-search .results-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:72px; }
body.page-search .rcard { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; }
body.page-search .rcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-search .rcard-img { position:relative; height:260px; overflow:hidden; }
body.page-search .rcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-search .rcard:hover .rcard-img img { transform:scale(1.06); }
body.page-search .rcard-body { padding:18px 20px 22px; }
body.page-search .rcard-brand { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
body.page-search .rcard-name { font-size:15px; font-weight:700; line-height:1.3; margin-bottom:8px; }
body.page-search .rcard-meta { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
body.page-search .rcard-stars { display:flex; gap:2px; }
body.page-search .rcard-stars svg { width:12px; height:12px; color:#FFB800; }
body.page-search .rcard-rev { font-size:12px; color:var(--muted-2); }
body.page-search .rcard-foot { display:flex; align-items:center; justify-content:space-between; }
body.page-search .rcard-price { font-size:17px; font-weight:700; }
body.page-search .rcard-add { padding:8px 18px; border-radius:100px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:background .2s; }
body.page-search .rcard-add:hover { background:var(--brand); }
/* ── NO RESULTS ── */
body.page-search .no-results { text-align:center; padding:60px 20px; }
body.page-search .no-results svg { width:56px; height:56px; color:var(--muted-3); margin-bottom:16px; }
body.page-search .no-results h3 { font-size:20px; font-weight:700; margin-bottom:6px; }
body.page-search .no-results p { font-size:14px; color:var(--muted); margin-bottom:20px; }
body.page-search .no-results a { color:var(--brand); font-weight:600; }
/* ── SHARED ── */
body.page-search .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-search .results-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
body.page-search .search-hero h1 { font-size:28px; }
body.page-search .results-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
body.page-search .rcard-img { height:220px; }
}
@media (max-width:380px) {
body.page-search .search-hero { padding:32px 0 20px; }
body.page-search .search-box input { padding:14px 20px 14px 44px; font-size:15px; }
body.page-search .results-grid { grid-template-columns:1fr; }
body.page-search .rcard-img { height:280px; }
}
/* ============================================================
account.html
============================================================ */
/* ===== account.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-account body.no-scroll { overflow:hidden; }
body.page-account input, body.page-account select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-account body.no-scroll { overflow:hidden; }
body.page-account a { text-decoration:none; color:inherit; }
body.page-account button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-account img { display:block; max-width:100%; }
body.page-account input, body.page-account select { font-family:inherit; }
body.page-account a:focus-visible, body.page-account button:focus-visible, body.page-account input:focus-visible, body.page-account summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-account .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-account .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-account .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-account .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-account .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-account header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-account header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-account .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-account .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-account .logo em { color:var(--brand); font-style:normal; }
body.page-account header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-account .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-account .ni > a:hover, body.page-account .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-account .ni.active > a { color:var(--brand); }
body.page-account .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-account .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-account .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-account .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-account .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-account .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-account .ib:hover { background:rgba(0,0,0,0.05); }
body.page-account .ib svg { width:17px; height:17px; }
body.page-account .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-account .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-account .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-account .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-account .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-account .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-account .bcrumb a:hover { color:var(--ink); }
body.page-account .bcrumb .sep { color:var(--muted-3); }
body.page-account .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-account .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-account .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-account .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-account .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-account .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-account .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-account .chips-row:empty { padding:0; }
body.page-account .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-account .fchip:hover { border-color:var(--ink); }
body.page-account .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-account .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-account .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-account .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-account .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-account .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-account .filters::-webkit-scrollbar { width:5px; }
body.page-account .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-account .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-account .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-account .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-account .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-account .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-account .fgroup { border-top:1px solid var(--line-soft); }
body.page-account .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-account .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-account .fgroup > summary::-webkit-details-marker { display:none; }
body.page-account .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-account .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-account .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-account .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-account .fopt:hover { color:var(--ink); }
body.page-account .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-account .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-account .fopt-mark.radio { border-radius:50%; }
body.page-account .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-account .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-account .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-account .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-account .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-account .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-account .fopt-text { flex:1; }
body.page-account .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-account .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-account .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-account .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-account .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-account .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-account .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-account .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-account .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-account .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-account .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-account .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-account .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-account .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-account .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-account .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-account .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-account .results { min-width:0; }
body.page-account .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-account .t-left { display:flex; align-items:center; gap:14px; }
body.page-account .t-count { font-size:13px; color:var(--muted-2); }
body.page-account .t-count strong { color:var(--ink); font-weight:700; }
body.page-account .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-account .sortdrop { position:relative; z-index:10; }
body.page-account .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-account .sortbtn:hover { border-color:var(--ink); }
body.page-account .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-account .sortbtn .val { font-weight:600; }
body.page-account .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-account .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-account .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-account .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-account .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-account .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-account .sortopt.on { color:var(--ink); font-weight:600; }
body.page-account .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-account .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-account .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-account .vbtn:hover { color:var(--ink); }
body.page-account .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-account .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-account .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-account .fbtn-mobile svg { width:14px; height:14px; }
body.page-account .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-account .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-account .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-account .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-account .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-account .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-account .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-account .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-account .pgrid.list-view .pcard-quick { display:none; }
body.page-account .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-account .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-account .pgrid.list-view .pcard-name { font-size:16px; }
body.page-account .pgrid.list-view .pcard-var { font-size:13px; }
body.page-account .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-account .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-account .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-account .pcard { cursor:pointer; }
body.page-account .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-account .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-account .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-account .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-account .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-account .bg-new { background:var(--ink); color:#fff; }
body.page-account .bg-hot { background:var(--brand); color:#fff; }
body.page-account .bg-sale { background:#FF9500; color:#fff; }
body.page-account .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-account .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-account .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-account .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-account .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-account .pcard:hover .pcard-quick { bottom:12px; }
body.page-account .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-account .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-account .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-account .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-account .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-account .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-account .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-account .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-account .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-account .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-account .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-account .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-account .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-account footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-account .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-account .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-account .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-account .flogo em { color:var(--brand); font-style:normal; }
body.page-account .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-account .fsocs { display:flex; gap:8px; }
body.page-account .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-account .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-account .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-account .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-account .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-account .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-account .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-account .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-account .fpay { display:flex; gap:8px; }
body.page-account .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-account .wrap, body.page-account .fw { padding:0 28px; }
body.page-account header { width:calc(100% - 32px); }
body.page-account .hw { padding:0 16px 0 22px; gap:14px; }
body.page-account header nav { gap:0; }
body.page-account .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-account .search-pill span { display:none; }
body.page-account .search-pill { padding:8px 10px; }
body.page-account .shop-title { font-size:34px; }
body.page-account .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-account .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-account .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-account .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-account .hamburger { display:flex; }
body.page-account header nav, body.page-account header .search-pill, body.page-account .ib[title="Wishlist"], body.page-account .ib[title="Account"] { display:none; }
body.page-account header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-account .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-account .logo { font-size:17px; }
body.page-account .ib { width:40px; height:40px; }
body.page-account .ib svg { width:18px; height:18px; }
body.page-account .ann-bar { padding:8px 0; }
body.page-account .ann-track { gap:36px; }
body.page-account .ann-track span { font-size:11px; }
body.page-account .wrap, body.page-account .fw { padding:0 16px; }
/* hero */
body.page-account .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-account .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-account .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-account .shop-meta { padding-bottom:0; }
body.page-account .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-account .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-account .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-account .filters.on { transform:translateY(0); }
body.page-account .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-account .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-account .fgroup > summary { padding:18px 20px 14px; }
body.page-account .fgroup-body { padding:0 20px 18px; }
body.page-account .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-account .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-account .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-account .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-account .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-account .toolbar { gap:10px; padding-bottom:14px; }
body.page-account .t-left { gap:10px; flex:1; }
body.page-account .sortbtn .lbl { display:none; }
body.page-account .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-account .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-account .pcard-img { border-radius:var(--radius-sm); }
body.page-account .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-account .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-account .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-account .pcard-name { font-size:13px; }
body.page-account .pcard-p { font-size:14px; }
/* footer */
body.page-account footer { padding:40px 0 28px; margin-top:48px; }
body.page-account .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-account .ftop > div:first-child { grid-column:1/-1; }
body.page-account .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-account .filters .f-head-clear-desktop { display:none; }
body.page-account .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-account .hw { padding:0 4px 0 14px; }
body.page-account .logo { font-size:16px; }
body.page-account .ib { width:36px; height:36px; }
body.page-account .pgrid { gap:14px 10px; }
body.page-account .pcard-name, body.page-account .pcard-p { font-size:12.5px; }
}
/* ── ACCOUNT LAYOUT ── */
body.page-account .acct-wrap { min-height:calc(100vh - 80px); padding:24px 0 72px; }
body.page-account .acct-grid { display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }
/* ── SIDEBAR ── */
body.page-account .acct-sidebar { background:#fff; border-radius:20px; padding:28px; box-shadow:0 2px 8px rgba(0,0,0,0.04); position:sticky; top:96px; }
body.page-account .acct-user { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line-soft); }
body.page-account .acct-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--bg); }
body.page-account .acct-name { font-size:16px; font-weight:700; }
body.page-account .acct-email { font-size:12px; color:var(--muted-2); }
body.page-account .acct-nav { display:flex; flex-direction:column; gap:2px; }
body.page-account .acct-nav-btn {
display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px;
font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; transition:all .2s;
background:none; border:none; text-align:left; font-family:inherit;
}
body.page-account .acct-nav-btn:hover { background:var(--bg); color:var(--ink); }
body.page-account .acct-nav-btn.on { background:var(--brand-soft); color:var(--brand); font-weight:600; }
body.page-account .acct-nav-btn svg { width:18px; height:18px; flex-shrink:0; }
/* ── CONTENT PANEL ── */
body.page-account .acct-panel { display:none; }
body.page-account .acct-panel.on { display:block; }
body.page-account .acct-card { background:#fff; border-radius:20px; padding:28px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
body.page-account .acct-card-title { font-size:18px; font-weight:700; margin-bottom:20px; }
/* ── ORDERS ── */
body.page-account .order-item { display:grid; grid-template-columns:1fr auto auto auto; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line-soft); }
body.page-account .order-item:last-child { border-bottom:none; }
body.page-account .order-info { }
body.page-account .order-num { font-size:14px; font-weight:600; color:var(--ink); }
body.page-account .order-date { font-size:12px; color:var(--muted-2); margin-top:2px; }
body.page-account .order-status { padding:4px 12px; border-radius:100px; font-size:12px; font-weight:600; }
body.page-account .order-status.delivered { background:#e8f5e9; color:#2e7d32; }
body.page-account .order-status.shipped { background:#fff3e0; color:#ef6c00; }
body.page-account .order-status.processing { background:#e3f2fd; color:#1565c0; }
body.page-account .order-total { font-size:15px; font-weight:700; }
body.page-account .order-view { font-size:13px; font-weight:600; color:var(--brand); cursor:pointer; transition:opacity .2s; }
body.page-account .order-view:hover { opacity:.75; }
/* ── ADDRESS ── */
body.page-account .addr-card { border:1.5px solid var(--line); border-radius:14px; padding:20px; position:relative; transition:border-color .2s; }
body.page-account .addr-card:hover { border-color:var(--muted-3); }
body.page-account .addr-card.default { border-color:var(--brand); background:var(--brand-soft); }
body.page-account .addr-badge { position:absolute; top:12px; right:12px; padding:3px 10px; border-radius:100px; background:var(--brand); color:#fff; font-size:11px; font-weight:700; }
body.page-account .addr-name { font-size:15px; font-weight:700; margin-bottom:4px; }
body.page-account .addr-line { font-size:13px; color:var(--muted); line-height:1.6; }
body.page-account .addr-actions { display:flex; gap:12px; margin-top:14px; }
body.page-account .addr-actions button { font-size:13px; font-weight:600; color:var(--brand); cursor:pointer; background:none; border:none; transition:opacity .2s; }
body.page-account .addr-actions button:hover { opacity:.75; }
body.page-account .addr-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
body.page-account .add-addr {
border:2px dashed var(--line); border-radius:14px; padding:24px; text-align:center;
cursor:pointer; transition:border-color .2s,background .2s; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:14px; font-weight:500;
}
body.page-account .add-addr:hover { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
body.page-account .add-addr svg { width:24px; height:24px; }
/* ── PROFILE FORM ── */
body.page-account .prof-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
body.page-account .prof-row.full { grid-template-columns:1fr; }
body.page-account .prof-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
body.page-account .prof-input {
width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
font-size:14px; color:var(--ink); outline:none; transition:border-color .2s; background:#fff; font-family:inherit;
}
body.page-account .prof-input:focus { border-color:var(--brand); }
body.page-account .save-btn { padding:14px 32px; border-radius:100px; background:var(--ink); color:#fff; font-size:14px; font-weight:700; border:none; cursor:pointer; transition:background .2s; }
body.page-account .save-btn:hover { background:var(--brand); }
/* ── SECURITY ── */
body.page-account .sec-item { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line-soft); }
body.page-account .sec-item:last-child { border-bottom:none; }
body.page-account .sec-label { font-size:14px; font-weight:600; }
body.page-account .sec-desc { font-size:12px; color:var(--muted-2); margin-top:2px; }
body.page-account .sec-btn { padding:8px 18px; border-radius:8px; border:1.5px solid var(--line); background:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
body.page-account .sec-btn:hover { border-color:var(--ink); }
/* ── SHARED ── */
body.page-account .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
/* ── RESPONSIVE ── */
@media (max-width:1024px) {
body.page-account .acct-grid { grid-template-columns:240px 1fr; gap:28px; }
body.page-account .addr-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
body.page-account .acct-grid { grid-template-columns:1fr; }
body.page-account .acct-sidebar { position:static; }
body.page-account .acct-nav { flex-direction:row; flex-wrap:wrap; gap:6px; }
body.page-account .acct-nav-btn { padding:8px 14px; border-radius:100px; font-size:13px; }
body.page-account .acct-nav-btn.on { background:var(--ink); color:#fff; }
body.page-account .prof-row { grid-template-columns:1fr; }
body.page-account .order-item { grid-template-columns:1fr auto; row-gap:8px; }
body.page-account .order-status { justify-self:start; }
body.page-account .order-total { grid-column:2; }
body.page-account .order-view { grid-column:1; }
}
@media (max-width:380px) {
body.page-account .acct-card { padding:20px; }
body.page-account .acct-sidebar { padding:20px; }
}
/* ============================================================
404.html
============================================================ */
/* ===== 404.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, body.page-404 *::before, body.page-404 *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-404 body.no-scroll { overflow:hidden; }
body.page-404 input, body.page-404 select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-404 body.no-scroll { overflow:hidden; }
body.page-404 a { text-decoration:none; color:inherit; }
body.page-404 button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-404 img { display:block; max-width:100%; }
body.page-404 input, body.page-404 select { font-family:inherit; }
body.page-404 a:focus-visible, body.page-404 button:focus-visible, body.page-404 input:focus-visible, body.page-404 summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, body.page-404 *::before, body.page-404 *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-404 .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-404 .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-404 .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-404 .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-404 .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-404 header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-404 header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-404 .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-404 .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-404 .logo em { color:var(--brand); font-style:normal; }
body.page-404 header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-404 .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-404 .ni > a:hover, body.page-404 .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-404 .ni.active > a { color:var(--brand); }
body.page-404 .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-404 .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-404 .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-404 .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-404 .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-404 .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-404 .ib:hover { background:rgba(0,0,0,0.05); }
body.page-404 .ib svg { width:17px; height:17px; }
body.page-404 .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-404 .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-404 .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-404 .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-404 .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-404 .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-404 .bcrumb a:hover { color:var(--ink); }
body.page-404 .bcrumb .sep { color:var(--muted-3); }
body.page-404 .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-404 .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-404 .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-404 .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-404 .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-404 .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-404 .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-404 .chips-row:empty { padding:0; }
body.page-404 .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-404 .fchip:hover { border-color:var(--ink); }
body.page-404 .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-404 .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-404 .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-404 .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-404 .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-404 .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-404 .filters::-webkit-scrollbar { width:5px; }
body.page-404 .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-404 .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-404 .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-404 .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-404 .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-404 .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-404 .fgroup { border-top:1px solid var(--line-soft); }
body.page-404 .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-404 .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-404 .fgroup > summary::-webkit-details-marker { display:none; }
body.page-404 .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-404 .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-404 .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-404 .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-404 .fopt:hover { color:var(--ink); }
body.page-404 .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-404 .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-404 .fopt-mark.radio { border-radius:50%; }
body.page-404 .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-404 .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-404 .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-404 .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-404 .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-404 .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-404 .fopt-text { flex:1; }
body.page-404 .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-404 .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-404 .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-404 .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-404 .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-404 .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-404 .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-404 .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-404 .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-404 .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-404 .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-404 .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-404 .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-404 .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-404 .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-404 .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-404 .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-404 .results { min-width:0; }
body.page-404 .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-404 .t-left { display:flex; align-items:center; gap:14px; }
body.page-404 .t-count { font-size:13px; color:var(--muted-2); }
body.page-404 .t-count strong { color:var(--ink); font-weight:700; }
body.page-404 .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-404 .sortdrop { position:relative; z-index:10; }
body.page-404 .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-404 .sortbtn:hover { border-color:var(--ink); }
body.page-404 .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-404 .sortbtn .val { font-weight:600; }
body.page-404 .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-404 .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-404 .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-404 .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-404 .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-404 .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-404 .sortopt.on { color:var(--ink); font-weight:600; }
body.page-404 .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-404 .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-404 .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-404 .vbtn:hover { color:var(--ink); }
body.page-404 .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-404 .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-404 .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-404 .fbtn-mobile svg { width:14px; height:14px; }
body.page-404 .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-404 .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-404 .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-404 .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-404 .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-404 .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-404 .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-404 .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-404 .pgrid.list-view .pcard-quick { display:none; }
body.page-404 .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-404 .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-404 .pgrid.list-view .pcard-name { font-size:16px; }
body.page-404 .pgrid.list-view .pcard-var { font-size:13px; }
body.page-404 .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-404 .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-404 .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-404 .pcard { cursor:pointer; }
body.page-404 .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-404 .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-404 .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-404 .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-404 .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-404 .bg-new { background:var(--ink); color:#fff; }
body.page-404 .bg-hot { background:var(--brand); color:#fff; }
body.page-404 .bg-sale { background:#FF9500; color:#fff; }
body.page-404 .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-404 .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-404 .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-404 .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-404 .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-404 .pcard:hover .pcard-quick { bottom:12px; }
body.page-404 .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-404 .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-404 .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-404 .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-404 .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-404 .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-404 .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-404 .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-404 .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-404 .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-404 .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-404 .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-404 .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-404 footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-404 .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-404 .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-404 .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-404 .flogo em { color:var(--brand); font-style:normal; }
body.page-404 .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-404 .fsocs { display:flex; gap:8px; }
body.page-404 .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-404 .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-404 .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-404 .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-404 .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-404 .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-404 .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-404 .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-404 .fpay { display:flex; gap:8px; }
body.page-404 .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-404 .wrap, body.page-404 .fw { padding:0 28px; }
body.page-404 header { width:calc(100% - 32px); }
body.page-404 .hw { padding:0 16px 0 22px; gap:14px; }
body.page-404 header nav { gap:0; }
body.page-404 .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-404 .search-pill span { display:none; }
body.page-404 .search-pill { padding:8px 10px; }
body.page-404 .shop-title { font-size:34px; }
body.page-404 .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-404 .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-404 .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-404 .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-404 .hamburger { display:flex; }
body.page-404 header nav, body.page-404 header .search-pill, body.page-404 .ib[title="Wishlist"], body.page-404 .ib[title="Account"] { display:none; }
body.page-404 header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-404 .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-404 .logo { font-size:17px; }
body.page-404 .ib { width:40px; height:40px; }
body.page-404 .ib svg { width:18px; height:18px; }
body.page-404 .ann-bar { padding:8px 0; }
body.page-404 .ann-track { gap:36px; }
body.page-404 .ann-track span { font-size:11px; }
body.page-404 .wrap, body.page-404 .fw { padding:0 16px; }
/* hero */
body.page-404 .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-404 .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-404 .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-404 .shop-meta { padding-bottom:0; }
body.page-404 .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-404 .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-404 .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-404 .filters.on { transform:translateY(0); }
body.page-404 .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-404 .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-404 .fgroup > summary { padding:18px 20px 14px; }
body.page-404 .fgroup-body { padding:0 20px 18px; }
body.page-404 .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-404 .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-404 .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-404 .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-404 .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-404 .toolbar { gap:10px; padding-bottom:14px; }
body.page-404 .t-left { gap:10px; flex:1; }
body.page-404 .sortbtn .lbl { display:none; }
body.page-404 .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-404 .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-404 .pcard-img { border-radius:var(--radius-sm); }
body.page-404 .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-404 .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-404 .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-404 .pcard-name { font-size:13px; }
body.page-404 .pcard-p { font-size:14px; }
/* footer */
body.page-404 footer { padding:40px 0 28px; margin-top:48px; }
body.page-404 .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-404 .ftop > div:first-child { grid-column:1/-1; }
body.page-404 .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-404 .filters .f-head-clear-desktop { display:none; }
body.page-404 .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-404 .hw { padding:0 4px 0 14px; }
body.page-404 .logo { font-size:16px; }
body.page-404 .ib { width:36px; height:36px; }
body.page-404 .pgrid { gap:14px 10px; }
body.page-404 .pcard-name, body.page-404 .pcard-p { font-size:12.5px; }
}
/* ── 404 PAGE ── */
body.page-404 .e404-wrap { min-height:calc(100vh - 80px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 20px; }
body.page-404 .e404-num { font-size:160px; font-weight:800; letter-spacing:-8px; color:var(--brand); line-height:1; opacity:.9; }
body.page-404 .e404-title { font-size:32px; font-weight:700; letter-spacing:-.6px; margin:16px 0 12px; }
body.page-404 .e404-desc { font-size:15px; color:var(--muted); max-width:420px; line-height:1.7; margin-bottom:32px; }
body.page-404 .e404-actions { display:flex; gap:12px; }
body.page-404 .e404-btn { padding:14px 32px; border-radius:100px; font-size:14px; font-weight:600; transition:all .2s; cursor:pointer; text-decoration:none; }
body.page-404 .e404-btn.p { background:var(--ink); color:#fff; }
body.page-404 .e404-btn.p:hover { background:var(--brand); }
body.page-404 .e404-btn.s { background:var(--bg); color:var(--ink); border:1.5px solid var(--line); }
body.page-404 .e404-btn.s:hover { border-color:var(--ink); }
body.page-404 .e404-ill { width:280px; height:200px; margin-bottom:32px; opacity:.8; }
@media (max-width:768px) {
body.page-404 .e404-num { font-size:120px; }
body.page-404 .e404-title { font-size:26px; }
body.page-404 .e404-actions { flex-direction:column; width:100%; max-width:300px; }
body.page-404 .e404-btn { width:100%; text-align:center; }
}
/* ============================================================
shipping.html
============================================================ */
/* ===== shipping.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-shipping body.no-scroll { overflow:hidden; }
body.page-shipping input, body.page-shipping select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-shipping body.no-scroll { overflow:hidden; }
body.page-shipping a { text-decoration:none; color:inherit; }
body.page-shipping button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-shipping img { display:block; max-width:100%; }
body.page-shipping input, body.page-shipping select { font-family:inherit; }
body.page-shipping a:focus-visible, body.page-shipping button:focus-visible, body.page-shipping input:focus-visible, body.page-shipping summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-shipping .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-shipping .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-shipping .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-shipping .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-shipping .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-shipping header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-shipping header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-shipping .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-shipping .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-shipping .logo em { color:var(--brand); font-style:normal; }
body.page-shipping header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-shipping .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-shipping .ni > a:hover, body.page-shipping .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-shipping .ni.active > a { color:var(--brand); }
body.page-shipping .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-shipping .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-shipping .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-shipping .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-shipping .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-shipping .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-shipping .ib:hover { background:rgba(0,0,0,0.05); }
body.page-shipping .ib svg { width:17px; height:17px; }
body.page-shipping .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-shipping .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-shipping .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-shipping .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-shipping .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-shipping .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-shipping .bcrumb a:hover { color:var(--ink); }
body.page-shipping .bcrumb .sep { color:var(--muted-3); }
body.page-shipping .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-shipping .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-shipping .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-shipping .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-shipping .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-shipping .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-shipping .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-shipping .chips-row:empty { padding:0; }
body.page-shipping .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-shipping .fchip:hover { border-color:var(--ink); }
body.page-shipping .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-shipping .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-shipping .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-shipping .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-shipping .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-shipping .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-shipping .filters::-webkit-scrollbar { width:5px; }
body.page-shipping .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-shipping .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-shipping .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-shipping .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-shipping .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-shipping .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-shipping .fgroup { border-top:1px solid var(--line-soft); }
body.page-shipping .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-shipping .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-shipping .fgroup > summary::-webkit-details-marker { display:none; }
body.page-shipping .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-shipping .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-shipping .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-shipping .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-shipping .fopt:hover { color:var(--ink); }
body.page-shipping .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-shipping .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-shipping .fopt-mark.radio { border-radius:50%; }
body.page-shipping .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-shipping .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-shipping .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-shipping .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-shipping .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-shipping .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-shipping .fopt-text { flex:1; }
body.page-shipping .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-shipping .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-shipping .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-shipping .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-shipping .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-shipping .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-shipping .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-shipping .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-shipping .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-shipping .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-shipping .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-shipping .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-shipping .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-shipping .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-shipping .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-shipping .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-shipping .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-shipping .results { min-width:0; }
body.page-shipping .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-shipping .t-left { display:flex; align-items:center; gap:14px; }
body.page-shipping .t-count { font-size:13px; color:var(--muted-2); }
body.page-shipping .t-count strong { color:var(--ink); font-weight:700; }
body.page-shipping .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-shipping .sortdrop { position:relative; z-index:10; }
body.page-shipping .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-shipping .sortbtn:hover { border-color:var(--ink); }
body.page-shipping .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-shipping .sortbtn .val { font-weight:600; }
body.page-shipping .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-shipping .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-shipping .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-shipping .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-shipping .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-shipping .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-shipping .sortopt.on { color:var(--ink); font-weight:600; }
body.page-shipping .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-shipping .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-shipping .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-shipping .vbtn:hover { color:var(--ink); }
body.page-shipping .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-shipping .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-shipping .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-shipping .fbtn-mobile svg { width:14px; height:14px; }
body.page-shipping .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-shipping .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-shipping .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-shipping .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-shipping .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-shipping .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-shipping .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-shipping .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-shipping .pgrid.list-view .pcard-quick { display:none; }
body.page-shipping .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-shipping .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-shipping .pgrid.list-view .pcard-name { font-size:16px; }
body.page-shipping .pgrid.list-view .pcard-var { font-size:13px; }
body.page-shipping .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-shipping .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-shipping .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-shipping .pcard { cursor:pointer; }
body.page-shipping .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-shipping .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-shipping .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-shipping .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-shipping .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-shipping .bg-new { background:var(--ink); color:#fff; }
body.page-shipping .bg-hot { background:var(--brand); color:#fff; }
body.page-shipping .bg-sale { background:#FF9500; color:#fff; }
body.page-shipping .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-shipping .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-shipping .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-shipping .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-shipping .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-shipping .pcard:hover .pcard-quick { bottom:12px; }
body.page-shipping .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-shipping .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-shipping .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-shipping .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-shipping .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-shipping .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-shipping .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-shipping .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-shipping .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-shipping .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-shipping .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-shipping .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-shipping .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-shipping footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-shipping .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-shipping .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-shipping .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-shipping .flogo em { color:var(--brand); font-style:normal; }
body.page-shipping .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-shipping .fsocs { display:flex; gap:8px; }
body.page-shipping .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-shipping .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-shipping .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-shipping .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-shipping .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-shipping .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-shipping .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-shipping .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-shipping .fpay { display:flex; gap:8px; }
body.page-shipping .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-shipping .wrap, body.page-shipping .fw { padding:0 28px; }
body.page-shipping header { width:calc(100% - 32px); }
body.page-shipping .hw { padding:0 16px 0 22px; gap:14px; }
body.page-shipping header nav { gap:0; }
body.page-shipping .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-shipping .search-pill span { display:none; }
body.page-shipping .search-pill { padding:8px 10px; }
body.page-shipping .shop-title { font-size:34px; }
body.page-shipping .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-shipping .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-shipping .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-shipping .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-shipping .hamburger { display:flex; }
body.page-shipping header nav, body.page-shipping header .search-pill, body.page-shipping .ib[title="Wishlist"], body.page-shipping .ib[title="Account"] { display:none; }
body.page-shipping header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-shipping .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-shipping .logo { font-size:17px; }
body.page-shipping .ib { width:40px; height:40px; }
body.page-shipping .ib svg { width:18px; height:18px; }
body.page-shipping .ann-bar { padding:8px 0; }
body.page-shipping .ann-track { gap:36px; }
body.page-shipping .ann-track span { font-size:11px; }
body.page-shipping .wrap, body.page-shipping .fw { padding:0 16px; }
/* hero */
body.page-shipping .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-shipping .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-shipping .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-shipping .shop-meta { padding-bottom:0; }
body.page-shipping .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-shipping .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-shipping .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-shipping .filters.on { transform:translateY(0); }
body.page-shipping .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-shipping .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-shipping .fgroup > summary { padding:18px 20px 14px; }
body.page-shipping .fgroup-body { padding:0 20px 18px; }
body.page-shipping .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-shipping .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-shipping .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-shipping .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-shipping .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-shipping .toolbar { gap:10px; padding-bottom:14px; }
body.page-shipping .t-left { gap:10px; flex:1; }
body.page-shipping .sortbtn .lbl { display:none; }
body.page-shipping .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-shipping .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-shipping .pcard-img { border-radius:var(--radius-sm); }
body.page-shipping .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-shipping .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-shipping .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-shipping .pcard-name { font-size:13px; }
body.page-shipping .pcard-p { font-size:14px; }
/* footer */
body.page-shipping footer { padding:40px 0 28px; margin-top:48px; }
body.page-shipping .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-shipping .ftop > div:first-child { grid-column:1/-1; }
body.page-shipping .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-shipping .filters .f-head-clear-desktop { display:none; }
body.page-shipping .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-shipping .hw { padding:0 4px 0 14px; }
body.page-shipping .logo { font-size:16px; }
body.page-shipping .ib { width:36px; height:36px; }
body.page-shipping .pgrid { gap:14px 10px; }
body.page-shipping .pcard-name, body.page-shipping .pcard-p { font-size:12.5px; }
}
/* ── SHIPPING PAGE ── */
body.page-shipping .ship-hero { padding:24px 0 0; }
body.page-shipping .ship-hero-inner {
background:#1D1D1F; border-radius:28px; padding:56px 56px 0;
display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-end;
overflow:hidden; position:relative; min-height:320px;
}
body.page-shipping .ship-hero-inner::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px); }
body.page-shipping .ship-hl { position:relative; z-index:2; padding-bottom:48px; }
body.page-shipping .ship-hl .sl { color:rgba(255,255,255,0.3); }
body.page-shipping .ship-hl h1 { font-size:42px; font-weight:800; letter-spacing:-1px; line-height:1.05; color:#fff; margin-bottom:12px; }
body.page-shipping .ship-hl p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-shipping .ship-hr { position:relative; z-index:2; align-self:flex-end; }
body.page-shipping .ship-hr img { width:100%; max-width:400px; border-radius:16px 16px 0 0; object-fit:cover; height:260px; margin-left:auto; }
body.page-shipping .ship-s { padding:48px 0 72px; }
body.page-shipping .ship-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
body.page-shipping .ship-block { margin-bottom:40px; }
body.page-shipping .ship-block h2 { font-size:22px; font-weight:700; margin-bottom:16px; }
body.page-shipping .ship-block p { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:14px; }
body.page-shipping .ship-table { width:100%; border-collapse:collapse; margin:16px 0; }
body.page-shipping .ship-table th { text-align:left; padding:12px 14px; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--line); }
body.page-shipping .ship-table td { padding:14px; font-size:14px; border-bottom:1px solid var(--line-soft); }
body.page-shipping .ship-table td strong { color:var(--ink); }
body.page-shipping .ship-table tr:last-child td { border-bottom:none; }
body.page-shipping .ship-note { background:var(--brand-soft); border-radius:14px; padding:18px 22px; font-size:13px; color:var(--ink-2); line-height:1.7; margin:20px 0; }
body.page-shipping .ship-note strong { color:var(--brand); }
body.page-shipping .ship-icon-row { display:flex; gap:24px; margin:24px 0; flex-wrap:wrap; }
body.page-shipping .ship-icon-item { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; }
body.page-shipping .ship-icon-item svg { width:22px; height:22px; color:var(--brand); flex-shrink:0; }
body.page-shipping .cta-s { padding:0 0 72px; }
body.page-shipping .cta-banner { background:#1D1D1F; border-radius:24px; padding:48px 56px; display:flex; align-items:center; justify-content:space-between; gap:48px; position:relative; overflow:hidden; }
body.page-shipping .cta-banner::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(40px); }
body.page-shipping .cta-left { position:relative; z-index:1; }
body.page-shipping .cta-left h2 { font-size:26px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-shipping .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); }
body.page-shipping .cta-right { position:relative; z-index:1; }
body.page-shipping .cta-btn { display:inline-block; padding:14px 28px; border-radius:100px; background:#fff; color:#1D1D1F; font-size:14px; font-weight:600; transition:all .2s; text-decoration:none; }
body.page-shipping .cta-btn:hover { transform:scale(1.03); }
body.page-shipping .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
@media (max-width:1024px) {
body.page-shipping .ship-hero-inner { padding:40px 40px 0; min-height:280px; }
body.page-shipping .ship-hl h1 { font-size:36px; }
body.page-shipping .ship-grid { gap:32px; }
}
@media (max-width:768px) {
body.page-shipping .ship-hero-inner { grid-template-columns:1fr; padding:40px 32px 0; min-height:auto; }
body.page-shipping .ship-hr { display:none; }
body.page-shipping .ship-hl { padding-bottom:40px; }
body.page-shipping .ship-grid { grid-template-columns:1fr; }
body.page-shipping .ship-hl h1 { font-size:30px; }
body.page-shipping .cta-banner { flex-direction:column; align-items:flex-start; gap:20px; padding:36px 28px; }
body.page-shipping .ship-table th, body.page-shipping .ship-table td { padding:10px 8px; font-size:13px; }
}
@media (max-width:380px) {
body.page-shipping .ship-hero-inner { padding:32px 24px 0; }
body.page-shipping .ship-hl h1 { font-size:26px; }
body.page-shipping .ship-icon-row { gap:14px; }
}
/* ============================================================
returns.html
============================================================ */
/* ===== returns.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-returns body.no-scroll { overflow:hidden; }
body.page-returns input, body.page-returns select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-returns body.no-scroll { overflow:hidden; }
body.page-returns a { text-decoration:none; color:inherit; }
body.page-returns button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-returns img { display:block; max-width:100%; }
body.page-returns input, body.page-returns select { font-family:inherit; }
body.page-returns a:focus-visible, body.page-returns button:focus-visible, body.page-returns input:focus-visible, body.page-returns summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-returns .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-returns .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-returns .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-returns .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-returns .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-returns header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-returns header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-returns .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-returns .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-returns .logo em { color:var(--brand); font-style:normal; }
body.page-returns header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-returns .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-returns .ni > a:hover, body.page-returns .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-returns .ni.active > a { color:var(--brand); }
body.page-returns .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-returns .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-returns .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-returns .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-returns .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-returns .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-returns .ib:hover { background:rgba(0,0,0,0.05); }
body.page-returns .ib svg { width:17px; height:17px; }
body.page-returns .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-returns .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-returns .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-returns .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-returns .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-returns .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-returns .bcrumb a:hover { color:var(--ink); }
body.page-returns .bcrumb .sep { color:var(--muted-3); }
body.page-returns .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-returns .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-returns .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-returns .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-returns .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-returns .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-returns .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-returns .chips-row:empty { padding:0; }
body.page-returns .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-returns .fchip:hover { border-color:var(--ink); }
body.page-returns .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-returns .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-returns .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-returns .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-returns .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-returns .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-returns .filters::-webkit-scrollbar { width:5px; }
body.page-returns .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-returns .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-returns .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-returns .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-returns .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-returns .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-returns .fgroup { border-top:1px solid var(--line-soft); }
body.page-returns .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-returns .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-returns .fgroup > summary::-webkit-details-marker { display:none; }
body.page-returns .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-returns .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-returns .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-returns .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-returns .fopt:hover { color:var(--ink); }
body.page-returns .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-returns .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-returns .fopt-mark.radio { border-radius:50%; }
body.page-returns .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-returns .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-returns .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-returns .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-returns .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-returns .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-returns .fopt-text { flex:1; }
body.page-returns .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-returns .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-returns .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-returns .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-returns .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-returns .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-returns .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-returns .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-returns .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-returns .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-returns .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-returns .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-returns .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-returns .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-returns .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-returns .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-returns .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-returns .results { min-width:0; }
body.page-returns .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-returns .t-left { display:flex; align-items:center; gap:14px; }
body.page-returns .t-count { font-size:13px; color:var(--muted-2); }
body.page-returns .t-count strong { color:var(--ink); font-weight:700; }
body.page-returns .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-returns .sortdrop { position:relative; z-index:10; }
body.page-returns .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-returns .sortbtn:hover { border-color:var(--ink); }
body.page-returns .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-returns .sortbtn .val { font-weight:600; }
body.page-returns .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-returns .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-returns .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-returns .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-returns .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-returns .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-returns .sortopt.on { color:var(--ink); font-weight:600; }
body.page-returns .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-returns .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-returns .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-returns .vbtn:hover { color:var(--ink); }
body.page-returns .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-returns .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-returns .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-returns .fbtn-mobile svg { width:14px; height:14px; }
body.page-returns .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-returns .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-returns .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-returns .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-returns .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-returns .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-returns .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-returns .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-returns .pgrid.list-view .pcard-quick { display:none; }
body.page-returns .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-returns .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-returns .pgrid.list-view .pcard-name { font-size:16px; }
body.page-returns .pgrid.list-view .pcard-var { font-size:13px; }
body.page-returns .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-returns .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-returns .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-returns .pcard { cursor:pointer; }
body.page-returns .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-returns .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-returns .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-returns .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-returns .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-returns .bg-new { background:var(--ink); color:#fff; }
body.page-returns .bg-hot { background:var(--brand); color:#fff; }
body.page-returns .bg-sale { background:#FF9500; color:#fff; }
body.page-returns .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-returns .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-returns .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-returns .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-returns .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-returns .pcard:hover .pcard-quick { bottom:12px; }
body.page-returns .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-returns .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-returns .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-returns .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-returns .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-returns .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-returns .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-returns .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-returns .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-returns .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-returns .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-returns .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-returns .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-returns footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-returns .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-returns .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-returns .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-returns .flogo em { color:var(--brand); font-style:normal; }
body.page-returns .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-returns .fsocs { display:flex; gap:8px; }
body.page-returns .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-returns .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-returns .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-returns .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-returns .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-returns .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-returns .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-returns .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-returns .fpay { display:flex; gap:8px; }
body.page-returns .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-returns .wrap, body.page-returns .fw { padding:0 28px; }
body.page-returns header { width:calc(100% - 32px); }
body.page-returns .hw { padding:0 16px 0 22px; gap:14px; }
body.page-returns header nav { gap:0; }
body.page-returns .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-returns .search-pill span { display:none; }
body.page-returns .search-pill { padding:8px 10px; }
body.page-returns .shop-title { font-size:34px; }
body.page-returns .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-returns .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-returns .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-returns .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-returns .hamburger { display:flex; }
body.page-returns header nav, body.page-returns header .search-pill, body.page-returns .ib[title="Wishlist"], body.page-returns .ib[title="Account"] { display:none; }
body.page-returns header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-returns .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-returns .logo { font-size:17px; }
body.page-returns .ib { width:40px; height:40px; }
body.page-returns .ib svg { width:18px; height:18px; }
body.page-returns .ann-bar { padding:8px 0; }
body.page-returns .ann-track { gap:36px; }
body.page-returns .ann-track span { font-size:11px; }
body.page-returns .wrap, body.page-returns .fw { padding:0 16px; }
/* hero */
body.page-returns .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-returns .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-returns .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-returns .shop-meta { padding-bottom:0; }
body.page-returns .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-returns .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-returns .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-returns .filters.on { transform:translateY(0); }
body.page-returns .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-returns .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-returns .fgroup > summary { padding:18px 20px 14px; }
body.page-returns .fgroup-body { padding:0 20px 18px; }
body.page-returns .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-returns .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-returns .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-returns .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-returns .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-returns .toolbar { gap:10px; padding-bottom:14px; }
body.page-returns .t-left { gap:10px; flex:1; }
body.page-returns .sortbtn .lbl { display:none; }
body.page-returns .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-returns .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-returns .pcard-img { border-radius:var(--radius-sm); }
body.page-returns .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-returns .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-returns .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-returns .pcard-name { font-size:13px; }
body.page-returns .pcard-p { font-size:14px; }
/* footer */
body.page-returns footer { padding:40px 0 28px; margin-top:48px; }
body.page-returns .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-returns .ftop > div:first-child { grid-column:1/-1; }
body.page-returns .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-returns .filters .f-head-clear-desktop { display:none; }
body.page-returns .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-returns .hw { padding:0 4px 0 14px; }
body.page-returns .logo { font-size:16px; }
body.page-returns .ib { width:36px; height:36px; }
body.page-returns .pgrid { gap:14px 10px; }
body.page-returns .pcard-name, body.page-returns .pcard-p { font-size:12.5px; }
}
/* ── RETURNS PAGE ── */
body.page-returns .ret-hero { padding:24px 0 0; }
body.page-returns .ret-hero-inner {
background:#1D1D1F; border-radius:28px; padding:56px 56px 0;
display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-end;
overflow:hidden; position:relative; min-height:320px;
}
body.page-returns .ret-hero-inner::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px); }
body.page-returns .ret-hl { position:relative; z-index:2; padding-bottom:48px; }
body.page-returns .ret-hl .sl { color:rgba(255,255,255,0.3); }
body.page-returns .ret-hl h1 { font-size:42px; font-weight:800; letter-spacing:-1px; line-height:1.05; color:#fff; margin-bottom:12px; }
body.page-returns .ret-hl p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-returns .ret-hr { position:relative; z-index:2; align-self:flex-end; }
body.page-returns .ret-hr img { width:100%; max-width:400px; border-radius:16px 16px 0 0; object-fit:cover; height:260px; margin-left:auto; }
body.page-returns .ret-s { padding:48px 0 72px; }
body.page-returns .ret-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
body.page-returns .ret-block { margin-bottom:40px; }
body.page-returns .ret-block h2 { font-size:22px; font-weight:700; margin-bottom:16px; }
body.page-returns .ret-block p { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:14px; }
body.page-returns .ret-steps { display:flex; flex-direction:column; gap:0; margin:20px 0; position:relative; }
body.page-returns .ret-steps::before { content:''; position:absolute; left:19px; top:0; bottom:0; width:2px; background:var(--line); }
body.page-returns .ret-step { display:flex; gap:16px; padding:18px 0; position:relative; }
body.page-returns .ret-step-num { width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; position:relative; z-index:1; }
body.page-returns .ret-step-body { flex:1; padding-top:2px; }
body.page-returns .ret-step-title { font-size:15px; font-weight:700; margin-bottom:4px; }
body.page-returns .ret-step-desc { font-size:13px; color:var(--muted); line-height:1.6; }
body.page-returns .ret-note { background:var(--bg); border-radius:14px; padding:18px 22px; font-size:13px; color:var(--muted); line-height:1.7; margin:16px 0; border:1.5px solid var(--line); }
body.page-returns .ret-note strong { color:var(--ink); }
body.page-returns .ret-eligible { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
body.page-returns .ret-eligible-item { display:flex; align-items:center; gap:10px; font-size:14px; }
body.page-returns .ret-eligible-item svg { width:18px; height:18px; color:var(--brand); flex-shrink:0; }
body.page-returns .ret-not-eligible { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
body.page-returns .ret-not-eligible-item { display:flex; align-items:center; gap:10px; font-size:14px; }
body.page-returns .ret-not-eligible-item svg { width:18px; height:18px; color:var(--muted-3); flex-shrink:0; }
body.page-returns .cta-s { padding:0 0 72px; }
body.page-returns .cta-banner { background:#1D1D1F; border-radius:24px; padding:48px 56px; display:flex; align-items:center; justify-content:space-between; gap:48px; position:relative; overflow:hidden; }
body.page-returns .cta-banner::before { content:''; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(40px); }
body.page-returns .cta-left { position:relative; z-index:1; }
body.page-returns .cta-left h2 { font-size:26px; font-weight:700; letter-spacing:-.4px; color:#fff; margin-bottom:6px; }
body.page-returns .cta-left p { font-size:14px; color:rgba(255,255,255,0.45); }
body.page-returns .cta-btn { display:inline-block; padding:14px 28px; border-radius:100px; background:#fff; color:#1D1D1F; font-size:14px; font-weight:600; transition:all .2s; text-decoration:none; }
body.page-returns .cta-btn:hover { transform:scale(1.03); }
body.page-returns .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
@media (max-width:1024px) {
body.page-returns .ret-hero-inner { padding:40px 40px 0; min-height:280px; }
body.page-returns .ret-hl h1 { font-size:36px; }
body.page-returns .ret-grid { gap:32px; }
}
@media (max-width:768px) {
body.page-returns .ret-hero-inner { grid-template-columns:1fr; padding:40px 32px 0; min-height:auto; }
body.page-returns .ret-hr { display:none; }
body.page-returns .ret-hl { padding-bottom:40px; }
body.page-returns .ret-grid { grid-template-columns:1fr; }
body.page-returns .ret-hl h1 { font-size:30px; }
body.page-returns .cta-banner { flex-direction:column; align-items:flex-start; gap:20px; padding:36px 28px; }
}
@media (max-width:380px) {
body.page-returns .ret-hero-inner { padding:32px 24px 0; }
body.page-returns .ret-hl h1 { font-size:26px; }
}
/* ============================================================
privacy.html
============================================================ */
/* ===== privacy.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-privacy body.no-scroll { overflow:hidden; }
body.page-privacy input, body.page-privacy select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-privacy body.no-scroll { overflow:hidden; }
body.page-privacy a { text-decoration:none; color:inherit; }
body.page-privacy button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-privacy img { display:block; max-width:100%; }
body.page-privacy input, body.page-privacy select { font-family:inherit; }
body.page-privacy a:focus-visible, body.page-privacy button:focus-visible, body.page-privacy input:focus-visible, body.page-privacy summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-privacy .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-privacy .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-privacy .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-privacy .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-privacy .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-privacy header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-privacy header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-privacy .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-privacy .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-privacy .logo em { color:var(--brand); font-style:normal; }
body.page-privacy header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-privacy .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-privacy .ni > a:hover, body.page-privacy .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-privacy .ni.active > a { color:var(--brand); }
body.page-privacy .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-privacy .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-privacy .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-privacy .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-privacy .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-privacy .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-privacy .ib:hover { background:rgba(0,0,0,0.05); }
body.page-privacy .ib svg { width:17px; height:17px; }
body.page-privacy .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-privacy .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-privacy .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-privacy .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-privacy .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-privacy .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-privacy .bcrumb a:hover { color:var(--ink); }
body.page-privacy .bcrumb .sep { color:var(--muted-3); }
body.page-privacy .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-privacy .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-privacy .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-privacy .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-privacy .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-privacy .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-privacy .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-privacy .chips-row:empty { padding:0; }
body.page-privacy .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-privacy .fchip:hover { border-color:var(--ink); }
body.page-privacy .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-privacy .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-privacy .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-privacy .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-privacy .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-privacy .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-privacy .filters::-webkit-scrollbar { width:5px; }
body.page-privacy .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-privacy .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-privacy .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-privacy .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-privacy .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-privacy .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-privacy .fgroup { border-top:1px solid var(--line-soft); }
body.page-privacy .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-privacy .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-privacy .fgroup > summary::-webkit-details-marker { display:none; }
body.page-privacy .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-privacy .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-privacy .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-privacy .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-privacy .fopt:hover { color:var(--ink); }
body.page-privacy .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-privacy .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-privacy .fopt-mark.radio { border-radius:50%; }
body.page-privacy .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-privacy .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-privacy .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-privacy .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-privacy .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-privacy .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-privacy .fopt-text { flex:1; }
body.page-privacy .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-privacy .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-privacy .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-privacy .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-privacy .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-privacy .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-privacy .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-privacy .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-privacy .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-privacy .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-privacy .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-privacy .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-privacy .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-privacy .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-privacy .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-privacy .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-privacy .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-privacy .results { min-width:0; }
body.page-privacy .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-privacy .t-left { display:flex; align-items:center; gap:14px; }
body.page-privacy .t-count { font-size:13px; color:var(--muted-2); }
body.page-privacy .t-count strong { color:var(--ink); font-weight:700; }
body.page-privacy .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-privacy .sortdrop { position:relative; z-index:10; }
body.page-privacy .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-privacy .sortbtn:hover { border-color:var(--ink); }
body.page-privacy .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-privacy .sortbtn .val { font-weight:600; }
body.page-privacy .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-privacy .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-privacy .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-privacy .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-privacy .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-privacy .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-privacy .sortopt.on { color:var(--ink); font-weight:600; }
body.page-privacy .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-privacy .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-privacy .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-privacy .vbtn:hover { color:var(--ink); }
body.page-privacy .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-privacy .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-privacy .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-privacy .fbtn-mobile svg { width:14px; height:14px; }
body.page-privacy .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-privacy .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-privacy .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-privacy .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-privacy .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-privacy .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-privacy .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-privacy .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-privacy .pgrid.list-view .pcard-quick { display:none; }
body.page-privacy .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-privacy .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-privacy .pgrid.list-view .pcard-name { font-size:16px; }
body.page-privacy .pgrid.list-view .pcard-var { font-size:13px; }
body.page-privacy .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-privacy .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-privacy .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-privacy .pcard { cursor:pointer; }
body.page-privacy .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-privacy .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-privacy .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-privacy .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-privacy .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-privacy .bg-new { background:var(--ink); color:#fff; }
body.page-privacy .bg-hot { background:var(--brand); color:#fff; }
body.page-privacy .bg-sale { background:#FF9500; color:#fff; }
body.page-privacy .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-privacy .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-privacy .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-privacy .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-privacy .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-privacy .pcard:hover .pcard-quick { bottom:12px; }
body.page-privacy .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-privacy .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-privacy .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-privacy .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-privacy .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-privacy .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-privacy .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-privacy .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-privacy .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-privacy .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-privacy .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-privacy .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-privacy .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-privacy footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-privacy .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-privacy .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-privacy .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-privacy .flogo em { color:var(--brand); font-style:normal; }
body.page-privacy .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-privacy .fsocs { display:flex; gap:8px; }
body.page-privacy .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-privacy .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-privacy .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-privacy .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-privacy .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-privacy .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-privacy .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-privacy .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-privacy .fpay { display:flex; gap:8px; }
body.page-privacy .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-privacy .wrap, body.page-privacy .fw { padding:0 28px; }
body.page-privacy header { width:calc(100% - 32px); }
body.page-privacy .hw { padding:0 16px 0 22px; gap:14px; }
body.page-privacy header nav { gap:0; }
body.page-privacy .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-privacy .search-pill span { display:none; }
body.page-privacy .search-pill { padding:8px 10px; }
body.page-privacy .shop-title { font-size:34px; }
body.page-privacy .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-privacy .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-privacy .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-privacy .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-privacy .hamburger { display:flex; }
body.page-privacy header nav, body.page-privacy header .search-pill, body.page-privacy .ib[title="Wishlist"], body.page-privacy .ib[title="Account"] { display:none; }
body.page-privacy header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-privacy .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-privacy .logo { font-size:17px; }
body.page-privacy .ib { width:40px; height:40px; }
body.page-privacy .ib svg { width:18px; height:18px; }
body.page-privacy .ann-bar { padding:8px 0; }
body.page-privacy .ann-track { gap:36px; }
body.page-privacy .ann-track span { font-size:11px; }
body.page-privacy .wrap, body.page-privacy .fw { padding:0 16px; }
/* hero */
body.page-privacy .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-privacy .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-privacy .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-privacy .shop-meta { padding-bottom:0; }
body.page-privacy .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-privacy .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-privacy .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-privacy .filters.on { transform:translateY(0); }
body.page-privacy .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-privacy .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-privacy .fgroup > summary { padding:18px 20px 14px; }
body.page-privacy .fgroup-body { padding:0 20px 18px; }
body.page-privacy .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-privacy .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-privacy .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-privacy .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-privacy .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-privacy .toolbar { gap:10px; padding-bottom:14px; }
body.page-privacy .t-left { gap:10px; flex:1; }
body.page-privacy .sortbtn .lbl { display:none; }
body.page-privacy .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-privacy .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-privacy .pcard-img { border-radius:var(--radius-sm); }
body.page-privacy .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-privacy .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-privacy .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-privacy .pcard-name { font-size:13px; }
body.page-privacy .pcard-p { font-size:14px; }
/* footer */
body.page-privacy footer { padding:40px 0 28px; margin-top:48px; }
body.page-privacy .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-privacy .ftop > div:first-child { grid-column:1/-1; }
body.page-privacy .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-privacy .filters .f-head-clear-desktop { display:none; }
body.page-privacy .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-privacy .hw { padding:0 4px 0 14px; }
body.page-privacy .logo { font-size:16px; }
body.page-privacy .ib { width:36px; height:36px; }
body.page-privacy .pgrid { gap:14px 10px; }
body.page-privacy .pcard-name, body.page-privacy .pcard-p { font-size:12.5px; }
}
/* ── PRIVACY PAGE ── */
body.page-privacy .legal-wrap { padding:32px 0 72px; }
body.page-privacy .legal-head { margin-bottom:40px; }
body.page-privacy .legal-head h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-privacy .legal-head p { font-size:14px; color:var(--muted); }
body.page-privacy .legal-head .updated { font-size:12px; color:var(--muted-2); margin-top:6px; }
body.page-privacy .legal-grid { display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
body.page-privacy .legal-toc { position:sticky; top:100px; }
body.page-privacy .legal-toc-title { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
body.page-privacy .legal-toc a { display:block; padding:8px 0; font-size:13px; font-weight:500; color:var(--muted-2); border-bottom:1px solid var(--line-soft); transition:color .2s; }
body.page-privacy .legal-toc a:hover { color:var(--brand); }
body.page-privacy .legal-toc a:last-child { border-bottom:none; }
body.page-privacy .legal-body { font-size:14px; line-height:1.85; color:var(--ink-2); }
body.page-privacy .legal-body h2 { font-size:22px; font-weight:700; color:var(--ink); margin:36px 0 14px; line-height:1.2; }
body.page-privacy .legal-body h3 { font-size:16px; font-weight:700; color:var(--ink); margin:24px 0 10px; }
body.page-privacy .legal-body p { margin-bottom:14px; }
body.page-privacy .legal-body ul { margin:12px 0; padding-left:24px; }
body.page-privacy .legal-body li { margin-bottom:8px; }
body.page-privacy .legal-body strong { color:var(--ink); }
body.page-privacy .legal-highlight { background:var(--brand-soft); border-left:3px solid var(--brand); padding:14px 20px; border-radius:0 12px 12px 0; margin:20px 0; font-size:13px; }
body.page-privacy .legal-highlight strong { color:var(--brand); }
@media (max-width:1024px) {
body.page-privacy .legal-grid { grid-template-columns:220px 1fr; gap:32px; }
}
@media (max-width:768px) {
body.page-privacy .legal-grid { grid-template-columns:1fr; }
body.page-privacy .legal-toc { position:static; margin-bottom:24px; }
body.page-privacy .legal-head h1 { font-size:28px; }
}
/* ============================================================
terms.html
============================================================ */
/* ===== terms.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-terms body.no-scroll { overflow:hidden; }
body.page-terms input, body.page-terms select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-terms body.no-scroll { overflow:hidden; }
body.page-terms a { text-decoration:none; color:inherit; }
body.page-terms button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-terms img { display:block; max-width:100%; }
body.page-terms input, body.page-terms select { font-family:inherit; }
body.page-terms a:focus-visible, body.page-terms button:focus-visible, body.page-terms input:focus-visible, body.page-terms summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-terms .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-terms .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-terms .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-terms .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-terms .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-terms header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-terms header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-terms .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-terms .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-terms .logo em { color:var(--brand); font-style:normal; }
body.page-terms header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-terms .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-terms .ni > a:hover, body.page-terms .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-terms .ni.active > a { color:var(--brand); }
body.page-terms .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-terms .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-terms .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-terms .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-terms .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-terms .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-terms .ib:hover { background:rgba(0,0,0,0.05); }
body.page-terms .ib svg { width:17px; height:17px; }
body.page-terms .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-terms .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-terms .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-terms .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-terms .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-terms .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-terms .bcrumb a:hover { color:var(--ink); }
body.page-terms .bcrumb .sep { color:var(--muted-3); }
body.page-terms .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-terms .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-terms .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-terms .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-terms .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-terms .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-terms .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-terms .chips-row:empty { padding:0; }
body.page-terms .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-terms .fchip:hover { border-color:var(--ink); }
body.page-terms .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-terms .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-terms .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-terms .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-terms .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-terms .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-terms .filters::-webkit-scrollbar { width:5px; }
body.page-terms .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-terms .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-terms .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-terms .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-terms .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-terms .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-terms .fgroup { border-top:1px solid var(--line-soft); }
body.page-terms .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-terms .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-terms .fgroup > summary::-webkit-details-marker { display:none; }
body.page-terms .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-terms .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-terms .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-terms .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-terms .fopt:hover { color:var(--ink); }
body.page-terms .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-terms .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-terms .fopt-mark.radio { border-radius:50%; }
body.page-terms .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-terms .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-terms .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-terms .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-terms .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-terms .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-terms .fopt-text { flex:1; }
body.page-terms .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-terms .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-terms .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-terms .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-terms .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-terms .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-terms .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-terms .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-terms .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-terms .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-terms .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-terms .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-terms .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-terms .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-terms .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-terms .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-terms .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-terms .results { min-width:0; }
body.page-terms .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-terms .t-left { display:flex; align-items:center; gap:14px; }
body.page-terms .t-count { font-size:13px; color:var(--muted-2); }
body.page-terms .t-count strong { color:var(--ink); font-weight:700; }
body.page-terms .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-terms .sortdrop { position:relative; z-index:10; }
body.page-terms .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-terms .sortbtn:hover { border-color:var(--ink); }
body.page-terms .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-terms .sortbtn .val { font-weight:600; }
body.page-terms .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-terms .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-terms .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-terms .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-terms .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-terms .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-terms .sortopt.on { color:var(--ink); font-weight:600; }
body.page-terms .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-terms .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-terms .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-terms .vbtn:hover { color:var(--ink); }
body.page-terms .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-terms .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-terms .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-terms .fbtn-mobile svg { width:14px; height:14px; }
body.page-terms .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-terms .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-terms .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-terms .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-terms .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-terms .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-terms .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-terms .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-terms .pgrid.list-view .pcard-quick { display:none; }
body.page-terms .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-terms .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-terms .pgrid.list-view .pcard-name { font-size:16px; }
body.page-terms .pgrid.list-view .pcard-var { font-size:13px; }
body.page-terms .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-terms .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-terms .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-terms .pcard { cursor:pointer; }
body.page-terms .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-terms .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-terms .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-terms .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-terms .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-terms .bg-new { background:var(--ink); color:#fff; }
body.page-terms .bg-hot { background:var(--brand); color:#fff; }
body.page-terms .bg-sale { background:#FF9500; color:#fff; }
body.page-terms .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-terms .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-terms .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-terms .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-terms .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-terms .pcard:hover .pcard-quick { bottom:12px; }
body.page-terms .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-terms .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-terms .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-terms .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-terms .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-terms .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-terms .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-terms .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-terms .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-terms .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-terms .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-terms .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-terms .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-terms footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-terms .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-terms .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-terms .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-terms .flogo em { color:var(--brand); font-style:normal; }
body.page-terms .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-terms .fsocs { display:flex; gap:8px; }
body.page-terms .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-terms .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-terms .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-terms .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-terms .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-terms .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-terms .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-terms .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-terms .fpay { display:flex; gap:8px; }
body.page-terms .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-terms .wrap, body.page-terms .fw { padding:0 28px; }
body.page-terms header { width:calc(100% - 32px); }
body.page-terms .hw { padding:0 16px 0 22px; gap:14px; }
body.page-terms header nav { gap:0; }
body.page-terms .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-terms .search-pill span { display:none; }
body.page-terms .search-pill { padding:8px 10px; }
body.page-terms .shop-title { font-size:34px; }
body.page-terms .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-terms .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-terms .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-terms .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-terms .hamburger { display:flex; }
body.page-terms header nav, body.page-terms header .search-pill, body.page-terms .ib[title="Wishlist"], body.page-terms .ib[title="Account"] { display:none; }
body.page-terms header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-terms .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-terms .logo { font-size:17px; }
body.page-terms .ib { width:40px; height:40px; }
body.page-terms .ib svg { width:18px; height:18px; }
body.page-terms .ann-bar { padding:8px 0; }
body.page-terms .ann-track { gap:36px; }
body.page-terms .ann-track span { font-size:11px; }
body.page-terms .wrap, body.page-terms .fw { padding:0 16px; }
/* hero */
body.page-terms .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-terms .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-terms .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-terms .shop-meta { padding-bottom:0; }
body.page-terms .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-terms .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-terms .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-terms .filters.on { transform:translateY(0); }
body.page-terms .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-terms .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-terms .fgroup > summary { padding:18px 20px 14px; }
body.page-terms .fgroup-body { padding:0 20px 18px; }
body.page-terms .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-terms .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-terms .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-terms .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-terms .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-terms .toolbar { gap:10px; padding-bottom:14px; }
body.page-terms .t-left { gap:10px; flex:1; }
body.page-terms .sortbtn .lbl { display:none; }
body.page-terms .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-terms .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-terms .pcard-img { border-radius:var(--radius-sm); }
body.page-terms .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-terms .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-terms .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-terms .pcard-name { font-size:13px; }
body.page-terms .pcard-p { font-size:14px; }
/* footer */
body.page-terms footer { padding:40px 0 28px; margin-top:48px; }
body.page-terms .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-terms .ftop > div:first-child { grid-column:1/-1; }
body.page-terms .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-terms .filters .f-head-clear-desktop { display:none; }
body.page-terms .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-terms .hw { padding:0 4px 0 14px; }
body.page-terms .logo { font-size:16px; }
body.page-terms .ib { width:36px; height:36px; }
body.page-terms .pgrid { gap:14px 10px; }
body.page-terms .pcard-name, body.page-terms .pcard-p { font-size:12.5px; }
}
/* ── TERMS PAGE ── */
body.page-terms .legal-wrap { padding:32px 0 72px; }
body.page-terms .legal-head { margin-bottom:40px; }
body.page-terms .legal-head h1 { font-size:36px; font-weight:700; letter-spacing:-.8px; margin-bottom:8px; }
body.page-terms .legal-head p { font-size:14px; color:var(--muted); }
body.page-terms .legal-head .updated { font-size:12px; color:var(--muted-2); margin-top:6px; }
body.page-terms .legal-grid { display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start; }
body.page-terms .legal-toc { position:sticky; top:100px; }
body.page-terms .legal-toc-title { font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
body.page-terms .legal-toc a { display:block; padding:8px 0; font-size:13px; font-weight:500; color:var(--muted-2); border-bottom:1px solid var(--line-soft); transition:color .2s; }
body.page-terms .legal-toc a:hover { color:var(--brand); }
body.page-terms .legal-toc a:last-child { border-bottom:none; }
body.page-terms .legal-body { font-size:14px; line-height:1.85; color:var(--ink-2); }
body.page-terms .legal-body h2 { font-size:22px; font-weight:700; color:var(--ink); margin:36px 0 14px; line-height:1.2; }
body.page-terms .legal-body h3 { font-size:16px; font-weight:700; color:var(--ink); margin:24px 0 10px; }
body.page-terms .legal-body p { margin-bottom:14px; }
body.page-terms .legal-body ul { margin:12px 0; padding-left:24px; }
body.page-terms .legal-body li { margin-bottom:8px; }
body.page-terms .legal-body strong { color:var(--ink); }
body.page-terms .legal-highlight { background:var(--brand-soft); border-left:3px solid var(--brand); padding:14px 20px; border-radius:0 12px 12px 0; margin:20px 0; font-size:13px; }
body.page-terms .legal-highlight strong { color:var(--brand); }
@media (max-width:1024px) {
body.page-terms .legal-grid { grid-template-columns:220px 1fr; gap:32px; }
}
@media (max-width:768px) {
body.page-terms .legal-grid { grid-template-columns:1fr; }
body.page-terms .legal-toc { position:static; margin-bottom:24px; }
body.page-terms .legal-head h1 { font-size:28px; }
}
/* ============================================================
new-arrivals.html
============================================================ */
/* ===== new-arrivals.html ===== */
/* ── DESIGN TOKENS ── */
:root {
--bg:#F5F5F7;
--surface:#FFFFFF;
--ink:#1D1D1F;
--ink-2:#3a3a3c;
--muted:#515154;
--muted-2:#86868B;
--muted-3:#AEAEB2;
--line:#E8E8ED;
--line-soft:#F0F0F2;
--brand:#FF2D55;
--brand-soft:#FFF0F3;
--brand-hover:#FF4D6A;
--radius-lg:24px;
--radius-md:20px;
--radius-sm:16px;
--radius-pill:100px;
--shadow-sm:0 2px 8px rgba(0,0,0,.05);
--shadow-md:0 8px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 40px rgba(0,0,0,.12);
--header-h:80px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.page-new-arrivals body.no-scroll { overflow:hidden; }
body.page-new-arrivals input, body.page-new-arrivals select { font-family:inherit; }
body {
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink);
-webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
overflow-x:hidden;
}
body.page-new-arrivals body.no-scroll { overflow:hidden; }
body.page-new-arrivals a { text-decoration:none; color:inherit; }
body.page-new-arrivals button { border:none; cursor:pointer; font-family:inherit; background:none; color:inherit; }
body.page-new-arrivals img { display:block; max-width:100%; }
body.page-new-arrivals input, body.page-new-arrivals select { font-family:inherit; }
body.page-new-arrivals a:focus-visible, body.page-new-arrivals button:focus-visible, body.page-new-arrivals input:focus-visible, body.page-new-arrivals summary:focus-visible {
outline:2px solid var(--brand); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.page-new-arrivals .ann-track { animation:none !important; }
}
/* ── ANNOUNCEMENT BAR ── */
body.page-new-arrivals .ann-bar { background:#1D1D1F; padding:9px 0; overflow:hidden; }
body.page-new-arrivals .ann-track { display:flex; gap:56px; width:max-content; animation:ann 30s linear infinite; white-space:nowrap; }
body.page-new-arrivals .ann-track span { font-size:12px; color:rgba(255,255,255,0.6); }
body.page-new-arrivals .ann-track .sep { color:rgba(255,255,255,0.18); }
@keyframes ann { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ── HEADER ── */
body.page-new-arrivals header {
position:sticky; top:16px; margin:10px auto 0;
width:calc(100% - 64px); max-width:1360px;
z-index:800;
border-radius:100px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
border:1px solid rgba(255,255,255,0.6);
box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow .3s;
}
body.page-new-arrivals header:hover { box-shadow:0 8px 32px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.8) inset; }
body.page-new-arrivals .hw { padding:0 28px 0 32px; height:64px; display:flex; align-items:center; gap:20px; }
body.page-new-arrivals .logo { font-size:19px; font-weight:800; flex-shrink:0; letter-spacing:.2px; }
body.page-new-arrivals .logo em { color:var(--brand); font-style:normal; }
body.page-new-arrivals header nav { display:flex; gap:1px; flex:1; justify-content:center; }
body.page-new-arrivals .ni > a { display:flex; align-items:center; gap:3px; padding:7px 13px; border-radius:100px; font-size:13px; font-weight:500; color:#515154; transition:color .2s,background .2s; }
body.page-new-arrivals .ni > a:hover, body.page-new-arrivals .ni.active > a { color:var(--ink); background:rgba(0,0,0,0.05); }
body.page-new-arrivals .ni.active > a { color:var(--brand); }
body.page-new-arrivals .hr { display:flex; align-items:center; gap:4px; margin-left:auto; }
body.page-new-arrivals .search-pill { display:flex; align-items:center; gap:7px; background:rgba(0,0,0,0.05); border-radius:100px; padding:6px 14px; cursor:pointer; transition:background .2s; }
body.page-new-arrivals .search-pill:hover { background:rgba(0,0,0,0.08); }
body.page-new-arrivals .search-pill svg { width:13px; height:13px; opacity:.4; }
body.page-new-arrivals .search-pill span { font-size:13px; color:var(--muted-2); }
body.page-new-arrivals .ib { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
body.page-new-arrivals .ib:hover { background:rgba(0,0,0,0.05); }
body.page-new-arrivals .ib svg { width:17px; height:17px; }
body.page-new-arrivals .cdot { position:absolute; top:5px; right:5px; width:14px; height:14px; border-radius:50%; background:var(--brand); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
body.page-new-arrivals .hamburger { display:none; }
/* ── MOBILE DRAWER ── */
/* ── WRAP ── */
body.page-new-arrivals .wrap { max-width:1360px; margin:0 auto; padding:0 40px; }
/* ── BREADCRUMB / PAGE HERO ── */
body.page-new-arrivals .shop-hero { padding-top:28px; padding-bottom:8px; }
body.page-new-arrivals .bcrumb { font-size:12.5px; color:var(--muted-2); display:flex; align-items:center; gap:6px; margin-bottom:18px; }
body.page-new-arrivals .bcrumb a { color:var(--muted-2); transition:color .2s; }
body.page-new-arrivals .bcrumb a:hover { color:var(--ink); }
body.page-new-arrivals .bcrumb .sep { color:var(--muted-3); }
body.page-new-arrivals .bcrumb .cur { color:var(--ink); font-weight:500; }
body.page-new-arrivals .shop-title-row {
display:flex; align-items:baseline; justify-content:flex-start;
gap:18px; flex-wrap:wrap; margin-bottom:6px;
}
body.page-new-arrivals .shop-title { font-size:32px; font-weight:700; letter-spacing:-.6px; line-height:1.1; }
body.page-new-arrivals .shop-meta { font-size:11px; color:var(--muted-2); letter-spacing:1.4px; text-transform:uppercase; }
body.page-new-arrivals .shop-meta strong { color:var(--ink); font-weight:700; }
body.page-new-arrivals .shop-sub { font-size:14px; color:var(--muted-2); max-width:560px; line-height:1.55; }
/* ── ACTIVE FILTER CHIPS (top toolbar) ── */
body.page-new-arrivals .chips-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:18px 0 0; }
body.page-new-arrivals .chips-row:empty { padding:0; }
body.page-new-arrivals .fchip {
display:inline-flex; align-items:center; gap:6px;
background:var(--surface); border:1px solid var(--line);
padding:5px 6px 5px 12px; border-radius:var(--radius-pill);
font-size:12px; font-weight:500; color:var(--ink);
transition:border-color .2s,background .2s;
}
body.page-new-arrivals .fchip:hover { border-color:var(--ink); }
body.page-new-arrivals .fchip-x {
width:17px; height:17px; border-radius:50%;
background:var(--bg); color:var(--muted-2);
display:flex; align-items:center; justify-content:center;
font-size:11px; line-height:1; transition:background .2s,color .2s;
}
body.page-new-arrivals .fchip-x:hover { background:var(--brand); color:#fff; }
body.page-new-arrivals .fchip-clear {
font-size:12px; font-weight:600; color:var(--brand);
padding:5px 4px; transition:opacity .2s;
}
body.page-new-arrivals .fchip-clear:hover { opacity:.75; }
/* ── SHOP LAYOUT ── */
body.page-new-arrivals .shop-grid {
display:grid;
grid-template-columns:240px 1fr;
gap:48px;
padding:20px 0 80px;
align-items:flex-start;
}
/* ── FILTER SIDEBAR ── */
body.page-new-arrivals .filters {
position:sticky; top:96px;
background:transparent;
max-height:calc(100vh - 116px);
overflow-y:auto;
scrollbar-width:thin;
}
body.page-new-arrivals .filters::-webkit-scrollbar { width:5px; }
body.page-new-arrivals .filters::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
body.page-new-arrivals .filters::-webkit-scrollbar-thumb:hover { background:var(--muted-3); }
body.page-new-arrivals .f-head {
display:flex; align-items:center; justify-content:space-between;
padding:0 0 12px;
}
body.page-new-arrivals .f-head h3 { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
body.page-new-arrivals .f-head-clear { font-size:12px; color:var(--brand); font-weight:500; transition:opacity .2s; }
body.page-new-arrivals .f-head-clear:hover { opacity:.7; }
/* filter group (details/summary) */
body.page-new-arrivals .fgroup { border-top:1px solid var(--line-soft); }
body.page-new-arrivals .fgroup:first-of-type { border-top:1px solid var(--line); }
body.page-new-arrivals .fgroup > summary {
list-style:none; cursor:pointer; user-select:none;
display:flex; align-items:center; justify-content:space-between;
padding:14px 0 12px;
font-size:13px; font-weight:600; color:var(--ink);
letter-spacing:.1px;
}
body.page-new-arrivals .fgroup > summary::-webkit-details-marker { display:none; }
body.page-new-arrivals .fgroup > summary .chev {
width:11px; height:11px; opacity:.4; transition:transform .25s;
flex-shrink:0;
}
body.page-new-arrivals .fgroup[open] > summary .chev { transform:rotate(180deg); }
body.page-new-arrivals .fgroup-body { padding:2px 0 14px; }
/* checkbox/radio rows */
body.page-new-arrivals .fopt {
display:flex; align-items:center; gap:11px;
padding:6px 0; font-size:13px; color:var(--muted); cursor:pointer;
transition:color .15s;
}
body.page-new-arrivals .fopt:hover { color:var(--ink); }
body.page-new-arrivals .fopt input { position:absolute; opacity:0; pointer-events:none; }
body.page-new-arrivals .fopt-mark {
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--line); flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all .15s;
position:relative;
background:#fff;
}
body.page-new-arrivals .fopt-mark.radio { border-radius:50%; }
body.page-new-arrivals .fopt:hover .fopt-mark { border-color:var(--ink-2); }
body.page-new-arrivals .fopt-mark::after {
content:''; opacity:0; transition:opacity .15s;
}
body.page-new-arrivals .fopt input:checked ~ .fopt-mark {
background:var(--brand); border-color:var(--brand);
}
body.page-new-arrivals .fopt input:checked ~ .fopt-mark::after {
opacity:1;
width:4px; height:7px;
border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) translate(-1px,-1px);
}
body.page-new-arrivals .fopt input:checked ~ .fopt-mark.radio::after {
width:6px; height:6px; border:none; background:#fff;
border-radius:50%; transform:none;
}
body.page-new-arrivals .fopt input:checked ~ .fopt-text { color:var(--ink); font-weight:500; }
body.page-new-arrivals .fopt-text { flex:1; }
body.page-new-arrivals .fopt-count { font-size:11.5px; color:var(--muted-3); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* ── PRICE ── */
body.page-new-arrivals .price-readout {
display:flex; align-items:baseline; gap:10px;
font-size:14px; color:var(--ink); font-weight:600;
margin:4px 0 18px;
font-variant-numeric:tabular-nums;
letter-spacing:.2px;
}
body.page-new-arrivals .price-readout .dash { color:var(--muted-3); font-weight:400; }
body.page-new-arrivals .price-slider {
position:relative; height:22px; margin:0 0 4px;
}
body.page-new-arrivals .price-track {
position:absolute; top:50%; left:0; right:0;
transform:translateY(-50%);
height:2px; background:var(--line); border-radius:1px;
}
body.page-new-arrivals .price-fill {
position:absolute; top:50%; transform:translateY(-50%);
height:2px; background:var(--ink); border-radius:1px;
left:10%; right:50%;
}
body.page-new-arrivals .price-slider input[type=range] {
position:absolute; top:0; left:0; right:0; width:100%;
-webkit-appearance:none; appearance:none;
background:none; pointer-events:none; height:22px; margin:0;
}
body.page-new-arrivals .price-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
transition:transform .15s,box-shadow .15s;
}
body.page-new-arrivals .price-slider input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.08); }
body.page-new-arrivals .price-slider input[type=range]::-webkit-slider-thumb:active { cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 1.5px var(--brand), 0 2px 8px rgba(0,0,0,.12); }
body.page-new-arrivals .price-slider input[type=range]::-moz-range-thumb {
width:18px; height:18px; border-radius:50%;
background:#fff; border:none;
cursor:grab; pointer-events:auto;
box-shadow:0 0 0 1.5px var(--ink), 0 2px 6px rgba(0,0,0,.08);
}
/* ── TOGGLES ── */
body.page-new-arrivals .fopt.toggle { justify-content:space-between; padding:8px 0; }
body.page-new-arrivals .toggle-sw {
width:34px; height:20px; border-radius:100px; background:var(--line);
position:relative; transition:background .2s; flex-shrink:0;
}
body.page-new-arrivals .toggle-sw::before {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%; background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s;
}
body.page-new-arrivals .fopt input:checked ~ .toggle-sw { background:var(--brand); }
body.page-new-arrivals .fopt input:checked ~ .toggle-sw::before { transform:translateX(14px); }
/* mobile-only "Show results" button: hidden by default, shown in @media ≤768 */
body.page-new-arrivals .f-mobile-apply { display:none; }
/* ── RESULTS / TOOLBAR ── */
body.page-new-arrivals .results { min-width:0; }
body.page-new-arrivals .toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:16px; padding-bottom:18px; flex-wrap:wrap;
}
body.page-new-arrivals .t-left { display:flex; align-items:center; gap:14px; }
body.page-new-arrivals .t-count { font-size:13px; color:var(--muted-2); }
body.page-new-arrivals .t-count strong { color:var(--ink); font-weight:700; }
body.page-new-arrivals .t-right { display:flex; align-items:center; gap:8px; }
/* custom sort dropdown */
body.page-new-arrivals .sortdrop { position:relative; z-index:10; }
body.page-new-arrivals .sortbtn {
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:500; color:var(--ink);
cursor:pointer; transition:border-color .15s;
}
body.page-new-arrivals .sortbtn:hover { border-color:var(--ink); }
body.page-new-arrivals .sortbtn .lbl { color:var(--muted-2); margin-right:-2px; }
body.page-new-arrivals .sortbtn .val { font-weight:600; }
body.page-new-arrivals .sortbtn .chev { width:11px; height:11px; opacity:.55; transition:transform .2s; }
body.page-new-arrivals .sortdrop.on .sortbtn .chev { transform:rotate(180deg); }
body.page-new-arrivals .sortmenu {
position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
padding:6px; box-shadow:var(--shadow-md);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity .18s,transform .18s,visibility .18s;
z-index:50;
}
body.page-new-arrivals .sortdrop.on .sortmenu { opacity:1; visibility:visible; transform:translateY(0); }
body.page-new-arrivals .sortopt {
width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:8px;
font-size:13px; color:var(--muted); transition:background .15s,color .15s;
cursor:pointer;
}
body.page-new-arrivals .sortopt:hover { background:var(--bg); color:var(--ink); }
body.page-new-arrivals .sortopt.on { color:var(--ink); font-weight:600; }
body.page-new-arrivals .sortopt.on::after { content:''; width:14px; height:8px; border:solid var(--brand); border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-2px); }
/* view toggle */
body.page-new-arrivals .viewtog {
display:flex; gap:2px; padding:2px;
background:var(--bg); border-radius:var(--radius-pill);
}
body.page-new-arrivals .vbtn {
width:30px; height:30px; border-radius:var(--radius-pill);
display:flex; align-items:center; justify-content:center;
color:var(--muted-2); transition:all .15s;
}
body.page-new-arrivals .vbtn:hover { color:var(--ink); }
body.page-new-arrivals .vbtn.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
body.page-new-arrivals .vbtn svg { width:14px; height:14px; }
/* mobile filter button */
body.page-new-arrivals .fbtn-mobile {
display:none; align-items:center; gap:8px;
padding:8px 14px; border-radius:var(--radius-pill);
border:1px solid var(--line); background:#fff;
font-size:13px; font-weight:600;
}
body.page-new-arrivals .fbtn-mobile svg { width:14px; height:14px; }
body.page-new-arrivals .fbtn-mobile .badge {
background:var(--brand); color:#fff; font-size:10px; font-weight:700;
width:18px; height:18px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
/* ── PRODUCT GRID ── */
body.page-new-arrivals .pgrid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 18px;
}
body.page-new-arrivals .pgrid.list-view { grid-template-columns:1fr; gap:14px; }
/* list-view card: horizontal, small image on left, info on right */
body.page-new-arrivals .pgrid.list-view .pcard {
display:flex; gap:20px; padding:14px;
background:#fff; border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
align-items:center;
transition:box-shadow .2s,transform .2s;
}
body.page-new-arrivals .pgrid.list-view .pcard:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-new-arrivals .pgrid.list-view .pcard-img {
width:140px; flex-shrink:0; aspect-ratio:1; margin-bottom:0;
border-radius:var(--radius-sm); box-shadow:none;
}
body.page-new-arrivals .pgrid.list-view .pcard:hover .pcard-img { transform:none; }
body.page-new-arrivals .pgrid.list-view .pcard > *:not(.pcard-img) { /* info column */ }
body.page-new-arrivals .pgrid.list-view .pcard-quick { display:none; }
body.page-new-arrivals .pgrid.list-view .pcard-badge { font-size:9px; padding:3px 7px; letter-spacing:.4px; top:9px; left:9px; }
body.page-new-arrivals .pgrid.list-view .pcard-wish { width:28px; height:28px; font-size:12px; top:9px; right:9px; }
body.page-new-arrivals .pgrid.list-view .pcard-name { font-size:16px; }
body.page-new-arrivals .pgrid.list-view .pcard-var { font-size:13px; }
body.page-new-arrivals .pgrid.list-view .pcard-pr { margin-top:4px; }
body.page-new-arrivals .pgrid.list-view .pcard-p { font-size:18px; }
/* wrap text content in implicit "rest" */
.pgrid.list-view .pcard-stars,
.pgrid.list-view .pcard-name,
.pgrid.list-view .pcard-var,
body.page-new-arrivals .pgrid.list-view .pcard-pr { flex-shrink:1; }
body.page-new-arrivals .pcard { cursor:pointer; }
body.page-new-arrivals .pcard-img {
background:#fff; border-radius:var(--radius-md); aspect-ratio:1/1;
overflow:hidden; margin-bottom:12px; position:relative;
box-shadow:var(--shadow-sm); transition:box-shadow .3s,transform .3s;
}
body.page-new-arrivals .pcard:hover .pcard-img { box-shadow:var(--shadow-md); transform:translateY(-2px); }
body.page-new-arrivals .pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
body.page-new-arrivals .pcard:hover .pcard-img img { transform:scale(1.05); }
/* badges */
body.page-new-arrivals .pcard-badge {
position:absolute; top:12px; left:12px; z-index:2;
padding:4px 10px; border-radius:var(--radius-pill);
font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
body.page-new-arrivals .bg-new { background:var(--ink); color:#fff; }
body.page-new-arrivals .bg-hot { background:var(--brand); color:#fff; }
body.page-new-arrivals .bg-sale { background:#FF9500; color:#fff; }
body.page-new-arrivals .bg-top { background:#34C759; color:#fff; }
/* wishlist */
body.page-new-arrivals .pcard-wish {
position:absolute; top:12px; right:12px; z-index:2;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:background .2s,color .2s,transform .2s;
color:var(--ink);
}
body.page-new-arrivals .pcard-wish:hover { background:var(--brand); color:#fff; transform:scale(1.08); }
body.page-new-arrivals .pcard-wish.on { background:var(--brand); color:#fff; }
/* quick view */
body.page-new-arrivals .pcard-quick {
position:absolute; left:12px; right:12px; bottom:-44px; z-index:2;
background:rgba(29,29,31,0.94); backdrop-filter:blur(12px);
color:#fff; padding:11px; border-radius:var(--radius-pill);
font-size:12px; font-weight:600; transition:bottom .3s cubic-bezier(.25,1,.5,1);
text-align:center;
}
body.page-new-arrivals .pcard:hover .pcard-quick { bottom:12px; }
body.page-new-arrivals .pcard-quick:hover { background:var(--brand); }
/* meta */
body.page-new-arrivals .pcard-stars { font-size:12px; color:#FFCC00; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
body.page-new-arrivals .pcard-stars span { color:var(--muted-3); font-size:11px; }
body.page-new-arrivals .pcard-name { font-size:14px; font-weight:600; margin-bottom:2px; line-height:1.35; }
body.page-new-arrivals .pcard-var { font-size:12px; color:var(--muted-2); margin-bottom:8px; }
/* price */
body.page-new-arrivals .pcard-pr { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
body.page-new-arrivals .pcard-p { font-size:15px; font-weight:700; color:var(--ink); }
body.page-new-arrivals .pcard-o { font-size:12px; color:var(--muted-3); text-decoration:line-through; }
body.page-new-arrivals .pcard-off { font-size:11px; font-weight:700; color:var(--brand); }
/* ── LOAD MORE ── */
body.page-new-arrivals .lmore-wrap { text-align:center; padding:48px 0 16px; }
body.page-new-arrivals .lmore {
padding:13px 32px; border-radius:var(--radius-pill);
border:1.5px solid var(--line); background:#fff;
font-size:13px; font-weight:600; color:var(--ink);
transition:all .2s;
}
body.page-new-arrivals .lmore:hover { border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
body.page-new-arrivals .lmore-meta { font-size:12px; color:var(--muted-2); margin-top:12px; }
/* ── FOOTER ── */
body.page-new-arrivals footer { background:#1D1D1F; padding:56px 0 36px; margin-top:80px; }
body.page-new-arrivals .fw { max-width:1360px; margin:0 auto; padding:0 40px; }
body.page-new-arrivals .ftop { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:32px; }
body.page-new-arrivals .flogo { font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:13px; }
body.page-new-arrivals .flogo em { color:var(--brand); font-style:normal; }
body.page-new-arrivals .ftag { font-size:13px; color:rgba(255,255,255,0.28); line-height:1.7; margin-bottom:22px; }
body.page-new-arrivals .fsocs { display:flex; gap:8px; }
body.page-new-arrivals .fsoc { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; transition:all .2s; color:rgba(255,255,255,.5); }
body.page-new-arrivals .fsoc:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
body.page-new-arrivals .fctit { font-size:11px; font-weight:700; color:rgba(255,255,255,0.45); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
body.page-new-arrivals .flinks { display:flex; flex-direction:column; gap:9px; }
body.page-new-arrivals .flinks a { font-size:13px; color:rgba(255,255,255,0.32); transition:color .2s; }
body.page-new-arrivals .flinks a:hover { color:rgba(255,255,255,0.72); }
body.page-new-arrivals .fbot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
body.page-new-arrivals .flegal { font-size:11px; color:rgba(255,255,255,0.18); line-height:1.65; max-width:580px; }
body.page-new-arrivals .fpay { display:flex; gap:8px; }
body.page-new-arrivals .fpb { background:rgba(255,255,255,0.07); border-radius:6px; padding:5px 9px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.38); }
/* ───────────────────────────────────────────────
TABLET — ≤ 1024px
─────────────────────────────────────────────── */
@media (max-width:1024px) {
body.page-new-arrivals .wrap, body.page-new-arrivals .fw { padding:0 28px; }
body.page-new-arrivals header { width:calc(100% - 32px); }
body.page-new-arrivals .hw { padding:0 16px 0 22px; gap:14px; }
body.page-new-arrivals header nav { gap:0; }
body.page-new-arrivals .ni > a { padding:7px 10px; font-size:12.5px; }
body.page-new-arrivals .search-pill span { display:none; }
body.page-new-arrivals .search-pill { padding:8px 10px; }
body.page-new-arrivals .shop-title { font-size:34px; }
body.page-new-arrivals .shop-grid { grid-template-columns:200px 1fr; gap:32px; }
body.page-new-arrivals .pgrid { grid-template-columns:repeat(2, 1fr); gap:20px 14px; }
body.page-new-arrivals .ftop { grid-template-columns:1fr 1fr 1fr; gap:36px 28px; }
body.page-new-arrivals .ftop > div:first-child { grid-column:1/-1; max-width:520px; }
}
/* ───────────────────────────────────────────────
MOBILE — ≤ 768px
─────────────────────────────────────────────── */
@media (max-width:768px) {
body.page-new-arrivals .hamburger { display:flex; }
body.page-new-arrivals header nav, body.page-new-arrivals header .search-pill, body.page-new-arrivals .ib[title="Wishlist"], body.page-new-arrivals .ib[title="Account"] { display:none; }
body.page-new-arrivals header { top:8px; width:calc(100% - 16px); border-radius:18px; }
body.page-new-arrivals .hw { padding:0 8px 0 18px; height:54px; gap:6px; }
body.page-new-arrivals .logo { font-size:17px; }
body.page-new-arrivals .ib { width:40px; height:40px; }
body.page-new-arrivals .ib svg { width:18px; height:18px; }
body.page-new-arrivals .ann-bar { padding:8px 0; }
body.page-new-arrivals .ann-track { gap:36px; }
body.page-new-arrivals .ann-track span { font-size:11px; }
body.page-new-arrivals .wrap, body.page-new-arrivals .fw { padding:0 16px; }
/* hero */
body.page-new-arrivals .shop-hero { padding-top:22px; padding-bottom:16px; }
body.page-new-arrivals .shop-title { font-size:26px; letter-spacing:-.5px; }
body.page-new-arrivals .shop-sub { font-size:13.5px; margin-top:6px; }
body.page-new-arrivals .shop-meta { padding-bottom:0; }
body.page-new-arrivals .shop-title-row { gap:14px; }
/* convert sidebar to bottom-sheet */
body.page-new-arrivals .shop-grid { grid-template-columns:1fr; gap:0; padding:8px 0 60px; }
body.page-new-arrivals .filters {
position:fixed; bottom:0; left:0; right:0; top:auto;
width:100%; max-height:85vh; max-width:100%;
border-radius:24px 24px 0 0; padding:0;
transform:translateY(100%); transition:transform .35s cubic-bezier(.25,1,.5,1);
z-index:960; display:flex; flex-direction:column;
box-shadow:0 -8px 32px rgba(0,0,0,0.18);
background:#fff;
}
body.page-new-arrivals .filters.on { transform:translateY(0); }
body.page-new-arrivals .filters::before {
content:''; position:sticky; top:0; left:50%; transform:translateX(-50%);
width:40px; height:4px; background:var(--line); border-radius:2px;
margin:8px auto; flex-shrink:0;
}
/* mobile: re-add horizontal padding inside sections (desktop has 0 since the column is its own width) */
body.page-new-arrivals .f-head { padding:6px 20px 14px; margin-bottom:0; }
body.page-new-arrivals .fgroup > summary { padding:18px 20px 14px; }
body.page-new-arrivals .fgroup-body { padding:0 20px 18px; }
body.page-new-arrivals .f-mobile-apply {
display:block;
position:sticky; bottom:0; padding:14px 20px 18px;
background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
margin-top:auto;
}
body.page-new-arrivals .f-mobile-apply button {
width:100%; padding:14px; border-radius:var(--radius-pill);
background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}
body.page-new-arrivals .filter-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
z-index:955;
}
body.page-new-arrivals .filter-backdrop.on { opacity:1; visibility:visible; }
/* show mobile filter trigger */
body.page-new-arrivals .fbtn-mobile { display:inline-flex; }
/* toolbar layout */
body.page-new-arrivals .toolbar { gap:10px; padding-bottom:14px; }
body.page-new-arrivals .t-left { gap:10px; flex:1; }
body.page-new-arrivals .sortbtn .lbl { display:none; }
body.page-new-arrivals .sortbtn { padding:8px 12px; }
/* products: 2 cols */
body.page-new-arrivals .pgrid { grid-template-columns:1fr 1fr; gap:18px 12px; }
body.page-new-arrivals .pcard-img { border-radius:var(--radius-sm); }
body.page-new-arrivals .pcard-quick { display:none; } /* tap goes to PDP, less clutter */
body.page-new-arrivals .pcard-wish { opacity:1; width:30px; height:30px; font-size:12px; top:9px; right:9px; }
body.page-new-arrivals .pcard-badge { top:9px; left:9px; padding:3px 8px; font-size:9px; }
body.page-new-arrivals .pcard-name { font-size:13px; }
body.page-new-arrivals .pcard-p { font-size:14px; }
/* footer */
body.page-new-arrivals footer { padding:40px 0 28px; margin-top:48px; }
body.page-new-arrivals .ftop { grid-template-columns:1fr 1fr; gap:28px 20px; padding-bottom:32px; margin-bottom:24px; }
body.page-new-arrivals .ftop > div:first-child { grid-column:1/-1; }
body.page-new-arrivals .fbot { flex-direction:column; align-items:flex-start; gap:14px; }
/* hide mobile-only-hidden things */
body.page-new-arrivals .filters .f-head-clear-desktop { display:none; }
body.page-new-arrivals .desktop-only { display:none; }
}
/* small mobile */
@media (max-width:380px) {
body.page-new-arrivals .hw { padding:0 4px 0 14px; }
body.page-new-arrivals .logo { font-size:16px; }
body.page-new-arrivals .ib { width:36px; height:36px; }
body.page-new-arrivals .pgrid { gap:14px 10px; }
body.page-new-arrivals .pcard-name, body.page-new-arrivals .pcard-p { font-size:12.5px; }
}
/* ── NEW ARRIVALS PAGE ── */
body.page-new-arrivals .na-hero { padding:24px 0 0; }
body.page-new-arrivals .na-hero-inner {
background:#1D1D1F; border-radius:28px; padding:56px 56px 0;
display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:flex-end;
overflow:hidden; position:relative; min-height:320px;
}
body.page-new-arrivals .na-hero-inner::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px;
border-radius:50%; background:radial-gradient(circle,rgba(255,45,85,0.18) 0%,transparent 70%); filter:blur(60px); }
body.page-new-arrivals .na-hl { position:relative; z-index:2; padding-bottom:48px; }
body.page-new-arrivals .na-hl .sl { color:rgba(255,255,255,0.3); }
body.page-new-arrivals .na-hl h1 { font-size:42px; font-weight:800; letter-spacing:-1px; line-height:1.05; color:#fff; margin-bottom:12px; }
body.page-new-arrivals .na-hl p { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.7; max-width:400px; }
body.page-new-arrivals .na-hr { position:relative; z-index:2; align-self:flex-end; }
body.page-new-arrivals .na-hr img { width:100%; max-width:400px; border-radius:16px 16px 0 0; object-fit:cover; height:260px; margin-left:auto; }
body.page-new-arrivals .na-s { padding:48px 0 72px; }
body.page-new-arrivals .na-filters { display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
body.page-new-arrivals .na-filter { padding:8px 18px; border-radius:100px; font-size:13px; font-weight:500; border:1.5px solid var(--line); color:var(--muted-2); cursor:pointer; transition:all .2s; background:#fff; }
body.page-new-arrivals .na-filter.on { background:var(--ink); color:#fff; border-color:var(--ink); }
body.page-new-arrivals .na-filter:hover:not(.on) { border-color:var(--ink); color:var(--ink); }
body.page-new-arrivals .na-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body.page-new-arrivals .na-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:transform .3s, box-shadow .3s; cursor:pointer; position:relative; }
body.page-new-arrivals .na-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
body.page-new-arrivals .na-img { position:relative; height:260px; overflow:hidden; }
body.page-new-arrivals .na-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body.page-new-arrivals .na-card:hover .na-img img { transform:scale(1.06); }
body.page-new-arrivals .na-badge { position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:100px; font-size:11px; font-weight:700; }
body.page-new-arrivals .na-badge.new { background:var(--brand); color:#fff; }
body.page-new-arrivals .na-badge.pre { background:var(--ink); color:#fff; }
body.page-new-arrivals .na-heart { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; border:none; }
body.page-new-arrivals .na-heart:hover { background:var(--brand); color:#fff; }
body.page-new-arrivals .na-heart svg { width:16px; height:16px; }
body.page-new-arrivals .na-body { padding:18px 20px 22px; }
body.page-new-arrivals .na-brand { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--brand); margin-bottom:4px; }
body.page-new-arrivals .na-name { font-size:15px; font-weight:700; line-height:1.3; margin-bottom:6px; }
body.page-new-arrivals .na-desc { font-size:12px; color:var(--muted-2); line-height:1.5; margin-bottom:10px; }
body.page-new-arrivals .na-meta { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
body.page-new-arrivals .na-stars { display:flex; gap:2px; }
body.page-new-arrivals .na-stars svg { width:12px; height:12px; color:#FFB800; }
body.page-new-arrivals .na-rev { font-size:12px; color:var(--muted-2); }
body.page-new-arrivals .na-foot { display:flex; align-items:center; justify-content:space-between; }
body.page-new-arrivals .na-price { font-size:17px; font-weight:700; }
body.page-new-arrivals .na-add { padding:8px 18px; border-radius:100px; background:var(--ink); color:#fff; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:background .2s; }
body.page-new-arrivals .na-add:hover { background:var(--brand); }
body.page-new-arrivals .sl { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px; }
@media (max-width:1024px) {
body.page-new-arrivals .na-hero-inner { padding:40px 40px 0; min-height:280px; }
body.page-new-arrivals .na-hl h1 { font-size:36px; }
body.page-new-arrivals .na-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
body.page-new-arrivals .na-hero-inner { grid-template-columns:1fr; padding:40px 32px 0; min-height:auto; }
body.page-new-arrivals .na-hr { display:none; }
body.page-new-arrivals .na-hl { padding-bottom:40px; }
body.page-new-arrivals .na-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
body.page-new-arrivals .na-img { height:220px; }
body.page-new-arrivals .na-hl h1 { font-size:30px; }
}
@media (max-width:380px) {
body.page-new-arrivals .na-hero-inner { padding:32px 24px 0; }
body.page-new-arrivals .na-hl h1 { font-size:26px; }
body.page-new-arrivals .na-grid { grid-template-columns:1fr; }
body.page-new-arrivals .na-img { height:280px; }
}
/* ============================================================
SQUARE IMAGE RATIO (1:1) - Global override
============================================================ */
/* Product card images - square */
.pcimg, .pc-img, .product-img, .product-image,
.pcard-img, .pcard-image, .product-card-img,
.ci-img, .cart-item-img, .cart-img,
.rec-img, .related-img, .suggestion-img,
.wishlist-img, .wish-img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* Blog card images - square */
.bcard-img, .blog-img, .blog-card-img, .journal-img,
.blog-image, .article-img, .article-image,
.bci, .blog-cover, .post-img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* PDP gallery images - square */
.pdp-img, .pdp-image, .pdp-gallery-img,
.gallery-img, .gallery-image, .product-detail-img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* Search result images */
.sr-img, .result-img, .search-img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* Cart and checkout item images */
.ci-img img, .cart-item-img, .cart-img,
.order-item-img, .checkout-item-img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* Also enforce on direct img elements within card structures */
.pgrid .pcimg img,
.product-grid .product-img img,
.blog-grid .blog-img img,
.blog-list .blog-card-img img,
.bgrid .bcard-img img,
.results .sr-img img {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
/* ════════ LUXE LIVE SEARCH (added) ════════ */
.search-pill {
position: relative;
display: flex;
align-items: center;
gap: 9px;
background: rgba(0, 0, 0, 0.04);
border-radius: 100px;
padding: 8px 14px;
cursor: text;
transition: background .2s ease;
width: 220px;
min-width: 0;
flex-shrink: 0;
}
.search-pill:hover { background: rgba(0, 0, 0, 0.06); }
.search-pill:focus-within {
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
/* Override the global a11y focus ring on the header search input only —
the pill itself is the focus indicator (changes background to white). */
.luxe-search-input:focus,
.luxe-search-input:focus-visible {
outline: none !important;
outline-offset: 0 !important;
border-radius: 0 !important;
}
.search-pill > svg:first-of-type {
width: 16px;
height: 16px;
color: #86868B;
flex-shrink: 0;
pointer-events: none;
}
.luxe-search-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font: inherit;
font-size: 14px;
color: #1D1D1F;
padding: 0;
margin: 0;
-webkit-appearance: none;
}
.luxe-search-input::placeholder { color: #86868B; }
.luxe-search-input::-webkit-search-cancel-button { display: none; }
.luxe-search-clear {
display: none;
width: 18px;
height: 18px;
padding: 0;
border: none;
background: rgba(0, 0, 0, 0.08);
border-radius: 50%;
cursor: pointer;
align-items: center;
justify-content: center;
color: #515154;
flex-shrink: 0;
transition: background .15s, color .15s;
}
.luxe-search-clear svg { width: 10px; height: 10px; }
.luxe-search-clear:hover { background: rgba(0, 0, 0, 0.15); color: #1D1D1F; }
.search-pill.has-value .luxe-search-clear { display: inline-flex; }
.luxe-search-dropdown {
position: absolute;
top: calc(100% + 12px);
left: 0;
right: 0;
background: #fff;
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 20px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.04);
max-height: 480px;
overflow-y: auto;
z-index: 1000;
display: none;
padding: 10px;
}
.luxe-search-dropdown.open { display: block; }
.luxe-sd-section { padding: 6px 6px 4px; }
.luxe-sd-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.2px;
color: #86868B;
text-transform: uppercase;
padding: 6px 8px 4px;
}
.luxe-sd-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: background .12s;
}
.luxe-sd-item:hover, .luxe-sd-item.active { background: #F5F5F7; }
.luxe-sd-thumb {
width: 44px;
height: 44px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: #F5F5F7;
}
.luxe-sd-text { flex: 1; min-width: 0; }
.luxe-sd-name {
font-size: 13px;
font-weight: 600;
color: #1D1D1F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.luxe-sd-name mark {
background: rgba(255, 45, 85, 0.18);
color: inherit;
padding: 0 2px;
border-radius: 3px;
}
.luxe-sd-meta {
font-size: 11.5px;
color: #86868B;
margin-top: 2px;
}
.luxe-sd-price {
font-size: 13px;
font-weight: 700;
color: #1D1D1F;
flex-shrink: 0;
white-space: nowrap;
}
.luxe-sd-empty {
padding: 24px 16px;
text-align: center;
font-size: 13px;
color: #86868B;
}
.luxe-sd-suggest {
display: inline-block;
margin: 4px 4px 0 0;
padding: 5px 11px;
border-radius: 100px;
background: #F5F5F7;
font-size: 12px;
color: #515154;
cursor: pointer;
transition: background .15s;
}
.luxe-sd-suggest:hover { background: #ECECF0; color: #1D1D1F; }
/* Don't let the focus-expand width overflow on smaller header widths */
@media (max-width: 1180px) {
.search-pill { width: 200px; }
}
@media (max-width: 1000px) {
.search-pill { width: 180px; }
}
@media (max-width: 900px) {
.search-pill { display: none; }
.luxe-search-dropdown { display: none !important; }
}
/* ════════ /LUXE LIVE SEARCH ════════ */
/* ════════ Universal nav-button improvements (added) ════════ */
header .ib, header .hamburger {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
@media (max-width: 768px) {
header .ib, header .hamburger {
width: 44px !important;
height: 44px !important;
}
header .ib svg, header .hamburger svg {
width: 20px !important;
height: 20px !important;
}
/* Ensure hamburger is above any decorative overlays */
header .hamburger { z-index: 5; position: relative; }
}
/* ════════ MOBILE DRAWER (consolidated, page-agnostic) ════════ */
/* Hoisted out of per-page sections so any page that contains the drawer
markup gets the styles automatically — no need to remember to copy
page-specific rules when adding a new section. */
.mdrawer-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; z-index:900;
}
.mdrawer-backdrop.on { opacity:1; visibility:visible; }
.mdrawer {
position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
background:#fff; z-index:950; transform:translateX(100%);
transition:transform .35s cubic-bezier(.25,1,.5,1);
display:flex; flex-direction:column;
box-shadow:-8px 0 32px rgba(0,0,0,0.12);
overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mdrawer.on { transform:translateX(0); }
.mdrawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #F0F0F2; }
.mdrawer-search { display:flex; align-items:center; gap:8px; margin:14px 16px 6px; padding:10px 14px; background:#F5F5F7; border-radius:var(--radius-pill); }
.mdrawer-search svg { width:14px; height:14px; opacity:.45; flex-shrink:0; }
.mdrawer-search input { flex:1; border:none; outline:none; background:transparent; font-size:14px; font-family:inherit; color:var(--ink); min-width:0; }
.mnav { display:block; padding:8px 8px 16px; flex:1; }
.mni, .mni-flat { display:block; border-bottom:1px solid #F5F5F7; }
.mni summary, .mni-flat {
list-style:none; cursor:pointer; padding:14px 14px;
font-size:15px; font-weight:600; color:var(--ink);
display:flex; align-items:center; justify-content:space-between;
}
.mni summary::-webkit-details-marker { display:none; }
.mni summary .chev { width:13px; height:13px; opacity:.5; transition:transform .2s; }
.mni[open] summary .chev { transform:rotate(180deg); }
.mni a { display:block; padding:10px 14px 10px 26px; font-size:14px; color:var(--muted); border-radius:8px; }
.mni a:active, .mni a:hover { background:#F5F5F7; color:var(--ink); }
.mni-flat:active, .mni-flat:hover { background:#F5F5F7; }
.mdrawer-foot { padding:16px 20px 24px; border-top:1px solid #F0F0F2; display:flex; gap:18px; }
.mdrawer-ftlink { font-size:13px; color:var(--muted-2); }
/* ════════ /MOBILE DRAWER ════════ */
/* ════════ NAV ITEM POSITIONING (added) ════════ */
/* Make every nav item the positioning context for its dropdown.
Without this, .drop's absolute `left:50%` resolves against a
different ancestor and floats to the wrong place. */
.ni { position: relative; }
/* ════════ /NAV ITEM POSITIONING ════════ */
/* ════════ SIMPLE DROPDOWN MENUS (added) ════════ */
/* Page-class-agnostic so any page picks them up. Plain vertical link lists,
easy to port to a WordPress wp_nav_menu() at theme-conversion time. */
.drop {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
background: #fff;
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.10);
padding: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 800;
min-width: 200px;
width: max-content;
max-width: 260px;
white-space: nowrap;
}
/* Hover bridge: a transparent strip filling the gap between the trigger and
the dropdown. Without this, the mouse loses contact with both elements
while crossing the 10px gap, and the dropdown closes. With it, the gap
is part of .drop's hit area — dropdown stays open. */
.drop::before {
content: "";
position: absolute;
top: -12px; /* slightly more than the gap, no leak risk */
left: -8px; /* extend past the rounded corners */
right: -8px;
height: 14px;
/* No background — invisible. */
}
.ni:hover > .drop,
.ni:focus-within > .drop {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.drop-link {
display: block;
padding: 9px 14px;
border-radius: 8px;
font-size: 13.5px;
font-weight: 500;
color: #1D1D1F;
text-decoration: none;
transition: background .12s, color .12s;
}
.drop-link:hover {
background: #F5F5F7;
color: #1D1D1F;
}
/* Active nav-item indicator (subtle, neutral — the brand-pink chip felt
too loud for a static list). Leave it gentle so it survives a port to
a WP custom-menu walker without surprises. */
.ni.active > a {
color: #1D1D1F;
}
@media (max-width: 1024px) {
.drop { display: none !important; }
}
/* ════════ /SIMPLE DROPDOWN MENUS ════════ */
/* Make product cards clickable (redirect handled by inline onclick). */
.pcard { cursor: pointer; }
/* Homepage product cards — clickable. */
.cprod { cursor: pointer; }
.tprod { cursor: pointer; }
.bprod { cursor: pointer; }
/* Homepage category cards — clickable. */
.cc { cursor: pointer; }