:root{
  --paper:#F5F2EC;--paper-2:#EFEBE2;--paper-3:#E7E2D6;--paper-4:#DDD7C8;
  --ink:#1F1E1B;--ink-2:#4A4640;--ink-3:#6F6A62;--ink-4:#968F84;
  --line:rgba(31,30,27,0.14);--line-2:rgba(31,30,27,0.20);--line-3:rgba(31,30,27,0.28);
  --sand:#B59F6A;--sand-2:#C8B88A;--sand-dim:rgba(181,159,106,0.16);
  --moss:#6E7D5E;--clay:#B06A4E;--rust:#944A34;
  --f-sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --f-serif:'Fraunces','Iowan Old Style',Georgia,serif;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:var(--f-sans);font-size:17px;color:var(--ink);background:var(--paper);line-height:1.5;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.14  0 0 0 0 0.12  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");opacity:0.045;pointer-events:none;mix-blend-mode:multiply}
::selection{background:var(--sand-dim)}
.app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
.topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklab, var(--paper) 82%, transparent);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid var(--line);padding:12px 40px;display:flex;align-items:center;gap:24px}
.topnav .brand{padding:0;border:0;gap:10px;flex:none}
.topnav .brand .m{font-size:20px}
.topnav .sep{width:1px;height:22px;background:var(--line-2);flex:none}
.topnav .nav{display:flex;align-items:center;gap:2px;flex:none}
.topnav .nav .nav-item{padding:7px 12px;font-size:13px;gap:8px}
.topnav .nav .nav-item .it{display:none}
.topnav .nav .nav-item .badge{margin-left:4px}
.topnav .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.topnav .account{padding:6px 16px 6px 6px;background:var(--paper-2);border-radius:999px;display:flex;gap:10px;align-items:center;cursor:pointer;transition:background .15s}
.topnav .account:hover{background:var(--paper-3)}
.topnav .account .avatar{width:28px;height:28px;font-size:11px}
.topnav .account__meta{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;line-height:1}
.topnav .account__meta b{display:inline;font-size:13px;font-weight:500;color:var(--ink)}
.topnav .account__meta span{font-size:12px;color:var(--ink-3)}
.topnav .account__meta .account__sep{color:var(--ink-4)}
.subbar{position:sticky;top:57px;z-index:19;background:color-mix(in oklab, var(--paper) 85%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:10px 40px;display:flex;align-items:center;gap:14px}
.subbar .search{flex:1;height:36px;background:var(--paper);border:1px solid var(--line-2)}
.main{padding:28px 40px 120px;max-width:1280px;width:100%;margin:0 auto}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .m{font-family:var(--f-serif);font-weight:400;font-size:22px;letter-spacing:-0.015em}
.brand .s{font-size:11px;color:var(--ink-3)}
.nav-item{display:inline-flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--ink-2);text-decoration:none;cursor:pointer;white-space:nowrap}
.nav-item:hover{background:var(--paper-2);color:var(--ink)}
.nav-item.on{background:var(--paper-3);color:var(--ink)}
.nav-item .badge{min-width:18px;height:18px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:10.5px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.avatar{width:34px;height:34px;border-radius:999px;background:var(--paper-4);display:grid;place-items:center;font:500 12px var(--f-sans);color:var(--ink-2);flex:none}
.account__meta{line-height:1.3;overflow:hidden}
.account__meta b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.account__meta span{font-size:11px;color:var(--ink-3)}
.search{display:flex;align-items:center;gap:10px;padding:0 14px;height:40px;background:var(--paper-2);border-radius:999px;color:var(--ink-3);font-size:13px}
.search .kbd{margin-left:auto;font-size:11px;color:var(--ink-3);background:var(--paper);padding:2px 8px;border-radius:4px;border:1px solid var(--line-2)}
.searchbar{flex:1;position:relative}
.searchbar .search{flex:1;margin-left:0}
.search__input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;color:var(--ink);padding:0;font-size:13.5px}
.search__input::placeholder{color:var(--ink-3)}
.search__clear{border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:4px;display:grid;place-items:center;border-radius:999px}
.search__clear:hover{background:var(--paper-3);color:var(--ink)}
.search__results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--paper);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 20px 60px rgba(43,42,38,0.14);max-height:70vh;overflow:auto;z-index:40;padding:6px}
.search__empty{padding:28px 16px;text-align:center;color:var(--ink-3);font-size:13px}
.search__group{padding:6px 0 8px}
.search__group + .search__group{border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.search__group-label{display:flex;align-items:center;justify-content:space-between;font:500 10.5px/1 var(--f-sans);letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);padding:6px 12px}
.search__group-label span{color:var(--ink-4);font-variant-numeric:tabular-nums}
.search__result{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;background:transparent;cursor:pointer;border-radius:8px;font:inherit;color:var(--ink);text-align:left}
.search__result:hover{background:var(--paper-2)}
.search__thumb{width:36px;height:36px;border-radius:6px;background:repeating-linear-gradient(135deg,rgba(43,42,38,0.04) 0 6px,transparent 6px 12px),var(--paper-3);flex:none}
.search__footer{padding:10px 12px 4px;border-top:1px solid var(--line);margin-top:6px;display:flex;justify-content:flex-end}
.search__footer kbd{font-family:var(--f-sans);background:var(--paper-2);padding:1px 6px;border-radius:3px;border:1px solid var(--line-2);font-size:10px}
.h-eyebrow{font-size:12px;color:var(--ink-3);letter-spacing:0.02em;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.h-eyebrow .num{display:inline-block;width:20px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.h1{font-family:var(--f-serif);font-weight:300;font-size:46px;line-height:1.05;letter-spacing:-0.022em;margin:0}
.h1 i{font-style:italic;font-weight:300;color:var(--ink-3);font-size:26px;margin-left:12px}
.h2{font-family:var(--f-serif);font-weight:400;font-size:28px;letter-spacing:-0.012em;margin:0}
.h2 i{font-style:italic;font-weight:300;color:var(--ink-3);font-size:18px;margin-left:10px}
.h3{font-weight:500;font-size:16px;margin:0}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:28px}
.page-head__sub{margin-top:10px;color:var(--ink-2);font-size:14px;max-width:620px}
.variants{display:inline-flex;padding:4px;background:var(--paper-2);border-radius:999px;gap:2px;margin-bottom:24px}
.variants button{border:0;background:transparent;font:500 12.5px/1 var(--f-sans);color:var(--ink-3);padding:8px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.variants button:hover{color:var(--ink-2)}
.variants button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(43,42,38,0.04)}
.variants .num{font-size:10.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.variants .label{font-size:11px;color:var(--ink-3);padding:0 10px 0 6px}
.wf{display:none}.wf.on{display:block}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font:500 13.5px/1 var(--f-sans);border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-decoration:none}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--sand{background:var(--sand);border-color:var(--sand);color:#fff}
.btn--sand:hover{background:transparent;color:var(--ink);border-color:var(--sand)}
.btn--sm{height:32px;padding:0 12px;font-size:12.5px}
.btn--lg{height:48px;padding:0 22px;font-size:14px}
.btn--square{width:40px;padding:0;justify-content:center}
.btn--square.btn--sm{width:32px}
.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:1px}
.lnk:hover{color:var(--ink-2);border-color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:11px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);border:1px solid transparent}
.pill--sand{background:var(--sand-dim);color:#6B5A34}
.pill--moss{background:rgba(110,125,94,0.15);color:#475041}
.pill--clay{background:rgba(176,106,78,0.15);color:#82503D}
.pill--rust{background:rgba(148,74,52,0.15);color:#79392A}
.pill--ghost{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
.pill .dot{width:6px;height:6px;border-radius:999px;background:currentColor}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px}
.card--tone{background:var(--paper-2);border-color:transparent}
.card--sand{background:var(--sand-dim);border-color:transparent}
.card--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card--ink .muted{color:rgba(245,242,236,0.6)}
.input,.select{height:40px;background:var(--paper);border:1px solid var(--line-2);border-radius:8px;color:var(--ink);padding:0 14px;font:500 13.5px/1 var(--f-sans);outline:none;width:100%}
.input:focus,.select:focus{border-color:var(--ink)}
.input::placeholder{color:var(--ink-3);font-weight:400}
label.fld{display:flex;flex-direction:column;gap:6px}
label.fld span{font-size:12px;color:var(--ink-3)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;height:36px;background:var(--paper);overflow:hidden}
.stepper button{border:0;background:transparent;width:34px;height:34px;font:500 14px var(--f-sans);color:var(--ink);cursor:pointer}
.stepper button:hover{background:var(--paper-2)}
.stepper input{width:44px;border:0;background:transparent;text-align:center;font:500 13.5px var(--f-sans);font-variant-numeric:tabular-nums;color:var(--ink);outline:none}
.ph{position:relative;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(43,42,38,0.028) 0 10px,transparent 10px 22px),linear-gradient(180deg,var(--paper-3),var(--paper-2));display:grid;place-items:center;color:var(--ink-4);font-size:11px}
.ph--scene{background:radial-gradient(ellipse at 30% 30%,rgba(200,184,138,0.35),transparent 70%),repeating-linear-gradient(160deg,rgba(43,42,38,0.03) 0 14px,transparent 14px 28px),linear-gradient(180deg,var(--paper-3),var(--paper-4))}
.ph--dark{background:repeating-linear-gradient(135deg,rgba(245,242,236,0.04) 0 10px,transparent 10px 22px),linear-gradient(180deg,#3a3832,#2B2A26);color:rgba(245,242,236,0.4)}
.ph .ph-label{position:absolute;left:14px;bottom:12px;font-size:11px;color:var(--ink-3);display:flex;gap:6px;align-items:center}
.row{display:flex;align-items:center;gap:12px}.col{display:flex;flex-direction:column}
.spacer,.grow{flex:1}.muted{color:var(--ink-3)}.small{font-size:14.5px}.xs{font-size:13px}
.tab-nums{font-variant-numeric:tabular-nums}.grid{display:grid;gap:20px}
.serif{font-family:var(--f-serif)}.italic{font-family:var(--f-serif);font-style:italic;font-weight:300}
hr.sep{height:1px;border:0;background:var(--line);margin:20px 0}
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{text-align:left;font:500 11.5px/1 var(--f-sans);letter-spacing:0.02em;color:var(--ink-3);padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl thead th.num{text-align:right}
.tbl tbody td{padding:16px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.line{display:grid;grid-template-columns:72px 1fr 140px 130px 150px 36px;align-items:center;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.line:last-of-type{border-bottom:1px solid var(--line)}
.line__img{width:72px;height:72px;border-radius:10px;background:repeating-linear-gradient(135deg,rgba(43,42,38,0.03) 0 6px,transparent 6px 14px),linear-gradient(180deg,var(--paper-3),var(--paper))}
.line__name{font-size:15px;font-weight:500}
.line__name em{font-family:var(--f-serif);font-style:italic;font-weight:300;color:var(--ink-3);font-size:13px;margin-left:8px}
.line__sku{font-size:12px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.tweaks{position:fixed;right:20px;bottom:20px;z-index:80;width:260px;padding:18px;background:var(--paper);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 10px 32px rgba(43,42,38,0.1);display:none}
.tweaks.open{display:block}
.tweaks h4{font:500 11px/1 var(--f-sans);letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.tweaks label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-2);margin:10px 0 4px}
.tweaks label .v{color:var(--ink-3);font-variant-numeric:tabular-nums}
.tweaks input[type=range]{width:100%;accent-color:var(--sand)}
.tweaks .opts{display:flex;gap:6px;margin-top:4px}
.tweaks .opts button{flex:1;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font:500 11px var(--f-sans);padding:6px 0;border-radius:6px;cursor:pointer}
.tweaks .opts button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.langswitch{display:inline-flex;padding:3px;background:var(--paper-2);border-radius:999px;gap:2px}
.langswitch button{border:0;background:transparent;font:600 11.5px/1 var(--f-sans);color:var(--ink-3);padding:6px 10px;border-radius:999px;cursor:pointer;letter-spacing:0.04em}
.langswitch button:hover{color:var(--ink-2)}
.langswitch button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 rgba(43,42,38,0.04)}

/* =================== CATALOG FILTERS =================== */
.filterbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;padding:10px 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.filterbar > .fd{flex:1 1 140px;min-width:0}
.filterbar__reset{flex:0 0 auto}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:999px;font:500 11.5px/1 var(--f-sans);cursor:pointer;transition:all .12s}
.filter-chip:hover{border-color:var(--line-3);color:var(--ink)}
.filter-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter-chip.on svg{color:var(--paper)}

/* Filter dropdown trigger + popover */
.fd{position:relative;display:inline-block}
.fd__trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 12px;height:36px;background:var(--paper);border:1px solid var(--line-2);border-radius:8px;color:var(--ink-2);font:500 13px/1 var(--f-sans);cursor:pointer;transition:all .12s;white-space:nowrap}
.fd__trigger > span:first-child{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1}
.fd__trigger:hover{border-color:var(--line-3);color:var(--ink)}
.fd--active .fd__trigger{background:var(--paper-3);border-color:var(--line-3);color:var(--ink);font-weight:500}
.fd--open .fd__trigger{border-color:var(--ink);color:var(--ink);background:var(--paper)}
.fd__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:var(--ink);color:var(--paper);border-radius:999px;font:500 10.5px/1 var(--f-sans);font-variant-numeric:tabular-nums}
.fd__chev{display:inline-flex;color:var(--ink-3);transition:transform .15s;transform:rotate(90deg)}
.fd__chev--up{transform:rotate(-90deg)}
.fd__panel{position:absolute;top:calc(100% + 6px);left:0;background:var(--paper);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 16px 48px rgba(43,42,38,0.14);padding:12px;z-index:30;min-width:200px}
.fd__panel--right{left:auto;right:0}
.fd__footer{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.filter-list{display:flex;flex-direction:column;gap:1px}
.filter-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:6px;font-size:13px;text-decoration:none;color:var(--ink-2);cursor:pointer;gap:10px}
.filter-row:hover{background:var(--paper-2);color:var(--ink)}
.filter-row.on{background:var(--paper-3);color:var(--ink);font-weight:500}
.filter-row.empty{opacity:0.4}
.filter-row__count{font-size:11.5px;color:var(--ink-4);font-weight:400}
.filter-row.on .filter-row__count{color:var(--ink-3)}
.filter-row input[type=checkbox]{margin:0;accent-color:var(--ink)}
.filter-pills{display:flex;flex-wrap:wrap;gap:6px}
.filter-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);border-radius:6px;font:500 12px/1 var(--f-sans);cursor:pointer;transition:all .12s}
.filter-pill:hover:not(:disabled){border-color:var(--line-3);color:var(--ink)}
.filter-pill.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter-pill:disabled{opacity:0.35;cursor:not-allowed}
.filter-pill span{font-size:10.5px;color:var(--ink-4);font-weight:400}
.filter-pill.on span{color:rgba(245,242,236,0.7)}
.filter-pill--sm{padding:5px 8px;font-size:11px}
.filter-toggle{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;cursor:pointer;color:var(--ink-2)}
.filter-toggle:hover{color:var(--ink)}
.filter-toggle input{accent-color:var(--ink)}
.filter-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.price-bounds{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink-3);padding:4px 0}
.price-bounds__track{flex:1;height:4px;background:var(--paper-3);border-radius:999px;position:relative;overflow:hidden}
.price-bounds__range{position:absolute;top:0;bottom:0;background:var(--sand)}
.link-sm{border:0;background:transparent;color:var(--ink-3);font:500 11px/1 var(--f-sans);cursor:pointer;padding:4px;text-decoration:underline;text-underline-offset:3px}
.link-sm:hover{color:var(--ink)}