/* Static katalog pages (seo.py). Tokens and components copied from katalog/index.html
   so a visitor arriving from Google sees the same shop; only what these pages use. */
:root{
  --paper:#EFE9DF; --paper2:#E7E0D4; --stone:#F7F3EC; --ink:#17130D; --muted:#5F574B; --dim:#706659;
  --brass:#7E6039; --sand:#CDBDA6; --night:#1C1915; --night-text:#E9E3D8; --night-dim:#9C9384;
  --tile:#EAE4D9;
  --line:rgba(23,19,13,.16); --line2:rgba(23,19,13,.08);
  --serif:'Newsreader',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:6vw; --hdh:72px; --cg:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
main:focus{outline:none}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}
button{cursor:pointer;color:inherit}
img{display:block}
ol,ul{list-style:none}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;font-size:14px}
.skip:focus{top:10px}

/* header */
.hd{position:sticky;top:0;z-index:50;height:var(--hdh);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gut);background:rgba(239,233,223,.96);border-bottom:1px solid var(--line2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hd-brand,.ft-brand{display:flex;align-items:baseline;gap:14px;line-height:1;white-space:nowrap}
.hd-brand .b1{font-weight:300;font-size:24px;letter-spacing:.34em}
.hd-brand .b2{font-size:10.5px;letter-spacing:.36em;color:var(--muted)}
.hd-r{display:flex;align-items:center;gap:32px}
.hd-nav{display:flex;align-items:center;gap:28px}
.hd-nav a{position:relative;font-size:14.5px;padding:4px 0}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
@media (hover:hover){.hd-nav a:hover::after{transform:scaleX(1)}}
.hsrch{display:flex;align-items:center;gap:8px;height:40px;width:clamp(180px,16vw,260px);border-bottom:1px solid var(--line)}
.hsrch:focus-within{border-bottom-color:var(--ink)}
.hsrch input{flex:1;min-width:0;border:0;background:none;font-size:15px;color:var(--ink);outline:none;padding:4px 0}
.hsrch input::placeholder{color:var(--dim)}
.hsrch button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:none;border:0;color:var(--ink)}
.hsrch svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.4;fill:none}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.hd-kat{display:none;font-size:14.5px;border-bottom:1px solid var(--line);padding-bottom:1px}
.cart-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:108px;border:1px solid var(--ink);padding:11px 22px;font-size:14.5px;white-space:nowrap;transition:background-color .2s,color .2s}
@media (hover:hover){.cart-btn:hover{background:var(--ink);color:var(--paper)}}
.cart-btn .n{font-variant-numeric:tabular-nums}
.cart-btn.has{background:var(--ink);color:var(--paper)}

/* buttons, links, crumbs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--ink);color:var(--paper);border:0;font-weight:500;font-size:15px;line-height:1.2;padding:18px 28px;white-space:nowrap;transition:background-color .25s}
@media (hover:hover){.btn:hover{background:var(--brass)}}
.ghost{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--ink);color:var(--ink);font-weight:500;font-size:15px;line-height:1.2;padding:15px 24px;white-space:nowrap;transition:background-color .2s,color .2s}
@media (hover:hover){.ghost:hover{background:var(--ink);color:var(--paper)}}
.ulink{font-size:14.5px;border-bottom:1px solid var(--line);padding-bottom:1px;white-space:nowrap;transition:border-color .2s}
@media (hover:hover){.ulink:hover{border-bottom-color:var(--ink)}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:1.5;color:var(--muted)}
@media (hover:hover){.crumbs a:hover{color:var(--ink)}}
.crumbs .sep{color:var(--dim)}
.crumbs [aria-current]{color:var(--ink);min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* cards */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px var(--cg);padding-top:24px}
.grid.g6{grid-template-columns:repeat(6,minmax(0,1fr));gap:40px var(--cg);padding-top:0}
.cw{min-width:0}
.card{display:block;min-width:0}
.ci{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper2);isolation:isolate}
.ci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ci.w{background:var(--tile)}
.ci.w .m{object-fit:contain;padding:8%;mix-blend-mode:multiply}
.card .cn{font-weight:400;font-size:15px;line-height:1.4;margin-top:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
@media (hover:hover){.card:hover .cn{text-decoration-color:currentColor}}
.cw .cp{font-size:16px;font-weight:500;line-height:1.4;margin-top:4px;font-variant-numeric:tabular-nums}
.cw .cp .od{font-weight:400;color:var(--muted)}
.cw .cp.na{font-size:15px;font-weight:400;color:var(--muted)}

/* category and room pages */
.lhead{padding-top:26px}
.ltitle{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;margin-top:12px}
.ltitle h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.5vw,52px);line-height:1.05;letter-spacing:-.012em;min-width:0;max-width:100%;overflow-wrap:anywhere}
.ltitle .lc{font-size:14px;color:var(--muted);white-space:nowrap}
.sibs{display:flex;align-items:center;gap:30px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:10px calc(-1 * var(--gut)) 0;padding:4px var(--gut)}
.sibs::-webkit-scrollbar{display:none}
.sib{flex:none;display:inline-flex;align-items:center;gap:9px;height:46px;font-size:14.5px;color:var(--muted);white-space:nowrap;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.sib .c{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
@media (hover:hover){.sib:hover{color:var(--ink)}}
.sib.on{color:var(--ink);border-bottom-color:var(--ink)}
.lintro{max-width:72ch;margin-top:18px}
.lintro p{font-size:16px;line-height:1.65;color:var(--muted)}
.lintro p+p{margin-top:8px}
.lintro a{color:var(--ink);border-bottom:1px solid var(--line)}
.lapp{margin-top:22px}
.cats{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:36px 16px;margin-top:32px}
.tile{display:block;min-width:0}
.tile .ti{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#F5F1EA;isolation:isolate}
.tile .ti img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.tile .ti.w{background:var(--tile)}
.tile .ti.w img{object-fit:contain;padding:10%}
.tile .tn{display:block;font-size:15px;line-height:1.35;margin-top:11px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
@media (hover:hover){.tile:hover .tn{text-decoration-color:currentColor}}
.tile .tp{display:block;font-size:15px;font-weight:500;line-height:1.4;margin-top:1px;font-variant-numeric:tabular-nums}
.tile .tp .od{font-weight:400;color:var(--muted)}
.tile .tm{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:1px}
.hsec{padding-top:clamp(64px,7vw,104px)}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:22px}
.sec-hd h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.08;letter-spacing:-.012em}
@media (hover:hover){.sec-hd h2 a:hover{color:var(--brass)}}
.hsec .grid{padding-top:0}
.how{margin-top:clamp(80px,8.5vw,128px);padding-top:36px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gut)}
.how h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.8vw,42px);line-height:1.08;letter-spacing:-.012em}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px var(--cg);padding-top:6px}
.steps .sn{display:block;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:10px}
.steps h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2}
.steps p{font-size:15px;line-height:1.55;color:var(--muted);margin-top:6px;max-width:32ch}
.how-fine{grid-column:2;font-size:13.5px;line-height:1.55;color:var(--dim);max-width:62ch;margin-top:32px}

/* product page */
.pv-top{padding-top:26px}
.pv{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gut);padding-top:26px;align-items:start}
.pg{min-width:0;position:sticky;top:calc(var(--hdh) + 28px)}
.gal-main{position:relative;width:100%;aspect-ratio:1/1;max-height:calc(100vh - var(--hdh) - 150px);min-height:320px;background:var(--paper2);overflow:hidden;isolation:isolate}
.gal-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal-main.w{background:var(--tile)}
.gal-main.w img{object-fit:contain;padding:6%;mix-blend-mode:multiply}
.gal-main.sm img{object-fit:contain;mix-blend-mode:multiply}
.thumbs{display:grid;grid-template-columns:repeat(var(--tn,8),minmax(0,72px));gap:8px;margin-top:10px}
.thumbs a{display:block;aspect-ratio:1/1;border:1px solid transparent;background:var(--paper2);overflow:hidden;opacity:.72;isolation:isolate;transition:opacity .2s,border-color .2s}
.thumbs a.w{background:var(--tile)}
.thumbs a.w img{object-fit:contain;padding:6%;mix-blend-mode:multiply}
@media (hover:hover){.thumbs a:hover{opacity:1}}
.thumbs a.on{opacity:1;border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pi{min-width:0}
.pi h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3vw,46px);line-height:1.08;letter-spacing:-.012em}
.pi .code{font-size:13.5px;color:var(--dim);margin-top:10px}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.price .v{font-family:var(--serif);font-size:40px;line-height:1}
.price .t{font-size:13px;color:var(--muted)}
.fld{margin-top:26px}
.fld label,.fld .flab{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.fld select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:0;background:#FCFAF6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317130D' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 16px center/10px 6px;padding:14px 40px 14px 16px;font-size:15.5px;color:var(--ink);cursor:pointer}
.fld select:focus{outline:none;border-color:var(--ink)}
.one{font-size:15.5px;padding:2px 0}
.adds label{display:flex;align-items:baseline;gap:12px;font-size:15px;color:var(--ink);margin:0 0 8px;cursor:pointer}
.adds input{accent-color:var(--ink);transform:translateY(1px)}
.adds .ap{color:var(--muted);margin-left:auto;white-space:nowrap}
.na-note{margin-top:28px;font-size:15px;line-height:1.65;color:var(--muted)}
.buy{display:flex;gap:12px;margin-top:32px}
.qty{display:flex;align-items:stretch;border:1px solid var(--line);background:#FCFAF6}
.qty button{width:44px;border:0;background:none;font-size:20px;font-weight:300}
.qty input{width:52px;border:0;background:none;text-align:center;font-size:16px;color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none}
.qty:focus-within{border-color:var(--ink)}
.qty .qu{align-self:center;font-size:14px;color:var(--muted);padding:0 2px 0 0}
.buy .btn{flex:1}
.added{min-height:24px;margin-top:14px;font-size:14px;color:var(--muted)}
.added a{color:var(--ink);border-bottom:1px solid var(--ink)}
.assure{margin-top:18px;border-top:1px solid var(--line2)}
.assure li{padding:11px 0;border-bottom:1px solid var(--line2);font-size:13.5px;line-height:1.5;color:var(--muted)}
.specs{margin-top:34px;border-top:1px solid var(--line)}
.specs div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line2);font-size:14.5px;line-height:1.55}
.specs dt{color:var(--muted)}
.specs dd a{border-bottom:1px solid var(--line)}
.vars{margin-top:clamp(64px,7vw,96px);max-width:900px}
.vars h2,.related h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.08;letter-spacing:-.012em}
.vars .tw{margin-top:18px;overflow-x:auto}
.vars table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.vars th{text-align:left;font-weight:400;color:var(--muted);padding:10px 16px 10px 0;border-bottom:1px solid var(--line)}
.vars td{padding:10px 16px 10px 0;border-bottom:1px solid var(--line2);vertical-align:top}
.vars .r{text-align:right;white-space:nowrap;padding-right:0;font-variant-numeric:tabular-nums}
.vars .fine{font-size:13px;color:var(--dim);margin-top:12px}
.related{margin-top:clamp(72px,8vw,110px)}

/* 404 */
.nf{padding-top:clamp(48px,6vw,96px);max-width:900px}
.nf h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.5vw,52px);line-height:1.05}
.nf p{margin-top:14px;color:var(--muted)}
.nf-s{display:flex;gap:10px;margin-top:24px;max-width:560px}
.nf-s input{flex:1;min-width:0;border:1px solid var(--line);background:#FCFAF6;padding:14px 16px;font-size:15.5px;color:var(--ink)}
.nf-s input:focus{outline:none;border-color:var(--ink)}
.nf-cats{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;font-size:15px}
.nf-cats a{border-bottom:1px solid var(--line)}

/* footer */
.ft{background:var(--night);color:var(--night-text);margin-top:110px}
.ft .wrap{padding-top:64px;padding-bottom:40px}
.ft-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px var(--gut);padding-bottom:52px;margin-bottom:44px;border-bottom:1px solid rgba(233,227,216,.12)}
.ft-cats h2{font-weight:400;font-size:15px;line-height:1.4}
.ft-cats h2 a{color:var(--night-text)}
.ft-cats ul{margin-top:8px}
.ft-cats li{font-size:14px;line-height:1.5;padding:3px 0}
.ft-cats li a{color:var(--night-dim)}
@media (hover:hover){.ft-cats a:hover{color:var(--sand)}}
.ft-top{display:flex;justify-content:space-between;gap:32px 48px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid rgba(233,227,216,.12)}
.ft-brand .b1{font-weight:300;font-size:26px;letter-spacing:.34em}
.ft-brand .b2{font-size:11px;letter-spacing:.36em;color:var(--sand)}
.ft-links{display:flex;gap:14px 36px;flex-wrap:wrap;font-size:15px}
@media (hover:hover){.ft-links a:hover{color:var(--sand)}}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;font-size:13px;color:var(--night-dim)}

/* responsive */
@media (max-width:1300px){.hd-nav{gap:22px}.hd-r{gap:24px}.grid.g6{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1100px){
  .hd-nav{display:none}
  .hd-kat{display:inline}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(var(--n),minmax(150px,1fr));overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut)}
  .cats::-webkit-scrollbar{display:none}
  .how{grid-template-columns:1fr;row-gap:26px}
  .how-fine{grid-column:auto;margin-top:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:940px){
  .pv{grid-template-columns:minmax(0,1fr)}
  .pg{position:static}
  .pi{margin-top:36px}
  .gal-main{max-height:none}
}
@media (max-width:760px){.hsrch{display:none}}
@media (max-width:640px){
  :root{--gut:5vw;--hdh:58px;--cg:12px}
  .hd{gap:12px}
  .hd-r{gap:16px}
  .hd-brand{gap:9px}
  .hd-brand .b1{font-size:18px;letter-spacing:.28em}
  .hd-brand .b2{font-size:9px;letter-spacing:.3em}
  .cart-btn{padding:8px 12px;font-size:14px;gap:8px;min-width:78px}
  .grid,.grid.g6{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--cg);padding-top:16px}
  .card .cn{font-size:14px;margin-top:9px}
  .cw .cp{font-size:14.5px}
  .lhead,.pv-top,.pv{padding-top:18px}
  .lintro p{font-size:15px}
  .lapp .ghost{width:100%}
  .cats{grid-template-columns:repeat(var(--n),36vw);gap:24px var(--cg)}
  .hsec{padding-top:56px}
  .sec-hd{margin-bottom:14px}
  .how{margin-top:64px;padding-top:28px}
  .steps{grid-template-columns:1fr;gap:22px}
  .steps h3{font-size:21px}
  .pg{margin:0 calc(-1 * var(--gut))}
  .thumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 var(--gut)}
  .thumbs::-webkit-scrollbar{display:none}
  .thumbs a{flex:none;width:56px;height:56px}
  .price .v{font-size:34px}
  .buy .btn{min-width:0;padding-left:12px;padding-right:12px}
  .buy .qty button{width:38px}
  .buy .qty input{width:42px}
  .ft{margin-top:96px}
  .ft-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:380px){
  .hd-brand .b1{font-size:16px;letter-spacing:.24em}
  .hd-kat{display:none}
  .cart-btn{padding:8px 10px;min-width:70px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}