/*
Theme Name: Oakwright
Theme URI: http://64.83.17.10/
Author: Jiaxing Miaozi E-Commerce Co., Ltd.
Description: OAKWRIGHT — wooden mechanism atelier. Editorial catalogue theme for
             premium wooden construction sets. Warm bone paper, hairline rules,
             engraved type, zero decoration that does not carry information.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietary
Text Domain: oakwright
*/

@import url("fonts/fonts.css");

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:#F4EFE5;
  --paper-2:#FAF6ED;
  --card:#FBF8F1;
  --bone:#E8DFCD;
  --bone-2:#DCD0B6;
  --ink:#17181A;
  --ink-2:#45433C;
  --ink-3:#7B7568;
  --line:#D9CFBC;
  --line-2:#C2B49A;
  --clay:#A6482A;
  --clay-2:#8B3A20;
  --slate:#1E2E33;
  --slate-2:#16242A;
  --ok:#3E5B45;
  --maxw:1280px;
  --gut:32px;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:6px;
  --shadow:0 1px 0 rgba(23,24,26,.04),0 18px 40px -28px rgba(23,24,26,.35);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.06;
  letter-spacing:-.012em;font-variation-settings:"SOFT" 0,"WONK" 0}
h1{font-size:clamp(40px,5.2vw,72px)}
h2{font-size:clamp(28px,3.3vw,44px)}
h3{font-size:clamp(20px,2vw,26px)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--clay);color:#fff}

/* ---------------------------------------------------------------- helpers */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:880px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--ink-3)}
.mono--ink{color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--clay);display:block}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.sec{padding:92px 0}
.sec--tight{padding:56px 0}
.sec--top{padding-top:64px}
.rule{height:1px;background:var(--line);width:100%}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--clay);border-color:var(--clay);color:#fff;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--clay{background:var(--clay);border-color:var(--clay);color:#fff}
.btn--clay:hover{background:var(--clay-2);border-color:var(--clay-2)}
.btn--wide{width:100%}
.btn--sm{padding:11px 20px;font-size:10.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------------------------------------------------------------- header */
.topbar{background:var(--slate);color:#DCD3C0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;
  min-height:36px;padding-top:6px;padding-bottom:6px}
.topbar .mono{color:#C9BFA9;font-size:10px;letter-spacing:.14em}
.topbar__links{display:flex;gap:26px}

.site-head{position:sticky;top:0;z-index:60;background:rgba(244,239,229,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:36px;height:76px}
.brand{display:flex;align-items:baseline;gap:12px}
.brand__mark{font-family:var(--serif);font-size:23px;letter-spacing:.13em;text-transform:uppercase;
  font-variation-settings:"SOFT" 0,"WONK" 1}
.brand__sub{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink-3);
  text-transform:uppercase}
.nav{margin-left:auto}
.nav ul{display:flex;gap:28px;margin:0;padding:0;list-style:none}
.nav li{margin:0}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 0;position:relative;color:var(--ink-2)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--clay);transition:right .22s ease}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]{right:0}
.head-tools{display:flex;align-items:center;gap:18px;margin-left:8px}
.head-tools a{font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  border-radius:999px;background:var(--ink);color:var(--paper);font-size:9.5px;
  font-family:var(--mono);padding:0 6px;margin-left:6px}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:6px;
  background:transparent;align-items:center;justify-content:center;margin-left:auto}
.burger span{display:block;width:16px;height:1px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1px;
  background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.drawer{position:fixed;inset:0;background:var(--paper);z-index:99;padding:28px var(--gut);
  display:none;flex-direction:column}
.drawer[open]{display:flex}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav a{font-family:var(--serif);font-size:26px;padding:12px 0;border-bottom:1px solid var(--line)}
.drawer__close{background:none;border:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer}

/* ---------------------------------------------------------------- hero */
.hero{border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center;
  padding-top:66px;padding-bottom:66px}
.hero__copy{max-width:560px}
.hero h1{margin:20px 0 22px}
.hero h1 em{font-style:italic;color:var(--clay)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 34px}
.hero__notes{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);padding-top:20px}
.hero__notes div{flex:1 1 120px;padding-right:18px}
.hero__notes b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink);margin-bottom:3px}
.hero__notes span{font-size:12.5px;color:var(--ink-3);line-height:1.4;display:block}
.hero__media{position:relative}
.hero__media img{border-radius:var(--r);box-shadow:var(--shadow)}
.dim{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dim__line{flex:1;height:1px;background:var(--line-2);position:relative}
.dim__line::before,.dim__line::after{content:"";position:absolute;top:-3px;width:1px;height:7px;
  background:var(--line-2)}
.dim__line::before{left:0}.dim__line::after{right:0}
.dim span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}

/* ---------------------------------------------------------------- index table */
.idx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}
.idx-head h2{max-width:20ch}
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;font-weight:400;padding:0 12px 12px 0;border-bottom:1px solid var(--ink)}
.tbl tbody td{padding:17px 12px 17px 0;border-bottom:1px solid var(--line);vertical-align:middle;
  font-size:14px;color:var(--ink-2)}
.tbl tbody tr{transition:background .16s ease}
.tbl tbody tr:hover{background:var(--card)}
.tbl .t-no{font-family:var(--mono);font-size:11px;color:var(--ink-3);width:44px}
.tbl .t-name{font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.2}
.tbl .t-name small{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-3);
  letter-spacing:0;margin-top:3px}
.tbl .t-line,.tbl .t-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.tbl .t-price{text-align:right;font-family:var(--mono);font-size:14px;color:var(--ink);white-space:nowrap}
.tbl .t-go{width:30px;text-align:right;color:var(--line-2)}
.tbl tr:hover .t-go{color:var(--clay)}

/* ---------------------------------------------------------------- cards */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:56px}
.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--paper)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .pcard__media img{transform:scale(1.035)}
.pcard__no{position:absolute;top:12px;left:12px;background:rgba(244,239,229,.9);
  border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.1em;color:var(--ink-2)}
.pcard__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__name{font-family:var(--serif);font-size:19px;line-height:1.15}
.pcard__meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.pcard__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;
  padding-top:10px;border-top:1px solid var(--line)}
.pcard__price{font-family:var(--mono);font-size:13px}
.pcard__arrow{font-family:var(--mono);font-size:11px;color:var(--clay)}

/* lines */
.linecard{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--bone)}
.linecard img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease}
.linecard:hover img{transform:scale(1.04)}
.linecard__in{position:absolute;inset:auto 0 0 0;padding:26px;
  background:linear-gradient(to top,rgba(23,24,26,.93),rgba(23,24,26,.42) 58%,rgba(23,24,26,.08));
  color:#F4EFE5}
.linecard__in h3{color:#fff;margin-bottom:6px}
.linecard__in p{color:rgba(244,239,229,.78);font-size:13.5px;line-height:1.5;margin:0;max-width:34ch}
.linecard__kicker{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,239,229,.92);background:rgba(23,24,26,.62);
  border:1px solid rgba(244,239,229,.22);border-radius:999px;padding:4px 10px;margin-bottom:12px;
  backdrop-filter:blur(2px)}

/* ---------------------------------------------------------------- dark band */
.band{background:var(--slate);color:#EFE9DC}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding-top:84px;padding-bottom:84px}
.band img{border-radius:var(--r)}
.band h2{color:#FBF8F1}
.band .lede{color:rgba(239,233,220,.76)}
.band .eyebrow{color:#D8A07E}
.band .eyebrow::before{background:#D8A07E}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 26px;margin:26px 0 30px;
  border-top:1px solid rgba(239,233,220,.2);padding-top:22px}
.dl dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,233,220,.55);padding-top:3px}
.dl dd{margin:0;font-size:14px;color:#EFE9DC}

/* ---------------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:28px 26px 6px 0;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--clay);
  margin-bottom:14px}
.step h3{font-size:20px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--ink-3);margin:0}

/* ---------------------------------------------------------------- spec grid */
.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mat{background:var(--card);padding:26px}
.mat b{display:block;font-family:var(--serif);font-size:19px;font-weight:400;margin-bottom:6px}
.mat p{font-size:13.5px;color:var(--ink-3);margin:0}
.mat .mono{display:block;margin-bottom:12px}

/* ---------------------------------------------------------------- quotes */
.quote{border-top:1px solid var(--ink);padding-top:22px}
.quote p{font-family:var(--serif);font-size:19px;line-height:1.45;margin-bottom:16px}
.quote cite{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-style:normal;color:var(--ink-3)}
.stars{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--clay);margin-bottom:10px}

/* ---------------------------------------------------------------- faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--serif);font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-family:var(--mono);
  font-size:18px;color:var(--clay)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);font-size:14.5px;max-width:70ch;padding-bottom:20px;margin:0}

/* ---------------------------------------------------------------- PDP */
.crumb{padding:20px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.crumb a:hover{color:var(--clay)}
.pdp{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;padding:26px 0 84px;align-items:start}
.gallery__main{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.gallery__main img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.gallery__thumbs button{padding:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--card);cursor:pointer;transition:border-color .18s ease}
.gallery__thumbs button[aria-current="true"]{border-color:var(--ink)}
.gallery__thumbs img{aspect-ratio:1/1;object-fit:cover;width:100%}
.summary{padding-top:6px}
.summary h1{font-size:clamp(32px,3.5vw,46px);margin:12px 0 14px}
.summary__hook{font-size:16px;color:var(--ink-2);line-height:1.6;max-width:44ch}
.summary__code{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap}
.summary__code span{display:inline-flex;align-items:center;gap:7px}
.summary__code span::before{content:"";width:4px;height:4px;background:var(--line-2);border-radius:50%}
.price{font-family:var(--mono);font-size:30px;letter-spacing:-.01em;margin:22px 0 6px}
.price small{font-size:12px;color:var(--ink-3);letter-spacing:.08em;margin-left:8px}
.price__note{font-size:12.5px;color:var(--ink-3);margin-bottom:24px}

.buy{border-top:1px solid var(--line);padding-top:22px;margin-top:6px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.oak-select{width:100%;appearance:none;background:var(--card);border:1px solid var(--line-2);
  border-radius:4px;padding:14px 40px 14px 14px;font-family:var(--sans);font-size:14.5px;
  color:var(--ink);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.oak-select:focus{outline:2px solid var(--clay);outline-offset:2px}
.buy__row{display:flex;gap:12px;align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.qty button{width:42px;height:52px;background:transparent;border:0;cursor:pointer;font-size:16px;
  color:var(--ink-2)}
.qty button:hover{background:var(--bone)}
.qty input{width:46px;height:52px;border:0;text-align:center;background:transparent;
  font-family:var(--mono);font-size:14px}
.buy__row .btn{flex:1}
.buy__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:12.5px;color:var(--ink-3)}
.buy__meta span{display:inline-flex;align-items:center;gap:7px}
.buy__meta span::before{content:"";width:5px;height:5px;border:1px solid var(--clay);
  border-radius:50%;display:block}
.acc{margin-top:26px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:4px;top:13px;color:var(--clay);font-size:15px}
.acc details[open] summary::after{content:"–"}
.acc ul{padding-bottom:18px}
.acc li{font-size:14px;color:var(--ink-2);padding-left:16px;position:relative;line-height:1.55}
.acc li::before{content:"—";position:absolute;left:0;color:var(--line-2)}

.diff{display:flex;align-items:center;gap:10px;margin:4px 0 0}
.diff i{display:block;width:26px;height:5px;background:var(--bone-2);border-radius:1px}
.diff i.on{background:var(--clay)}
.diff span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-left:6px}

/* pdp sections */
.pdp-body{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;padding:64px 0;border-top:1px solid var(--line)}
.pdp-body h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:20px}
.pdp-body p{color:var(--ink-2);font-size:15.5px;line-height:1.68;max-width:60ch}
.spec{width:100%;border-collapse:collapse}
.spec td{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.spec td:first-child{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);width:42%;padding-right:18px}
.featurelist li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;
  color:var(--ink-2)}
.featurelist li b{font-family:var(--mono);font-size:10px;color:var(--clay);padding-top:4px;font-weight:400}

/* ---------------------------------------------------------------- archive */
.arch-head{padding:52px 0 34px;border-bottom:1px solid var(--line)}
.arch-head h1{font-size:clamp(34px,4.2vw,56px)}
.arch-head p{color:var(--ink-2);max-width:60ch;margin-top:14px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;color:var(--ink-2);
  transition:all .16s ease}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:44px 0 84px}

/* ---------------------------------------------------------------- page */
.page-head{padding:60px 0 34px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(34px,4.4vw,58px);max-width:24ch}
.page-head .lede{margin-top:18px}
.page-body{padding:56px 0 84px}
.page-body h2{font-size:clamp(22px,2.3vw,30px);margin:44px 0 14px}
.page-body h2:first-child{margin-top:0}
.page-body h3{font-size:19px;margin:30px 0 10px}
.page-body p,.page-body li{color:var(--ink-2);font-size:15.5px;line-height:1.72;overflow-wrap:break-word}
.page-body ul{list-style:none;margin:0 0 18px}
.page-body ul li{padding-left:18px;position:relative;margin-bottom:8px}
.page-body ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--clay)}
.page-body a{color:var(--clay);border-bottom:1px solid rgba(166,72,42,.35)}
.page-body strong{color:var(--ink)}
.page-body blockquote{margin:28px 0;padding:22px 26px;background:var(--card);border-left:2px solid var(--clay);
  font-family:var(--serif);font-size:18px;color:var(--ink)}
.page-body table{width:100%;border-collapse:collapse;margin:22px 0}
.page-body th,.page-body td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);text-align:left;
  font-size:14px}
.page-body th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400}

/* ---------------------------------------------------------------- woocommerce */
.woo-wrap{padding:44px 0 84px}
.woocommerce-notices-wrapper{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--card);border:1px solid var(--line);border-left:2px solid var(--clay);
  border-radius:4px;padding:14px 18px;margin:18px 0;font-size:14px;list-style:none;color:var(--ink-2)}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:999px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--clay);border-color:var(--clay)}
table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:var(--card)}
table.shop_table th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:400}
table.shop_table td{padding:16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
table.shop_table img{width:64px;border-radius:4px}
.cart-collaterals{margin-top:26px}
.cart_totals{width:100%;max-width:420px;margin-left:auto}
.cart_totals h2{font-size:22px;margin-bottom:12px}
.woocommerce-billing-fields h3,.woocommerce-additional-fields h3{font-family:var(--serif);font-size:22px;
  margin:26px 0 12px}
.woocommerce form .form-row{margin-bottom:16px}
.woocommerce form .form-row label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;display:block}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:4px;background:var(--card);
  font-family:var(--sans);font-size:14.5px;color:var(--ink)}
.woocommerce form .form-row input.input-text:focus{outline:2px solid var(--clay);outline-offset:1px}
#payment{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:6px 18px}
#payment ul.payment_methods{border-bottom:1px solid var(--line);padding:10px 0}
.woocommerce-checkout #place_order{width:100%;margin-top:16px}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--paper-2);border-top:1px solid var(--line);margin-top:0}
.site-foot .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding:60px 0 46px}
.site-foot h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px;font-weight:400}
.site-foot li{margin-bottom:9px}
.site-foot a{font-size:13.5px;color:var(--ink-2)}
.site-foot a:hover{color:var(--clay)}
.foot-brand .brand__mark{font-size:20px}
.foot-brand p{font-size:13px;color:var(--ink-3);margin:14px 0 0;max-width:34ch;line-height:1.6}
.foot-legal{border-top:1px solid var(--line);padding:20px 0 26px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px 28px;align-items:center}
.foot-legal p{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.foot-legal .mono{font-size:9.5px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .hero__media{order:-1}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .band .wrap{grid-template-columns:1fr;gap:34px}
  .pdp{grid-template-columns:1fr;gap:34px}
  .pdp-body{grid-template-columns:1fr;gap:36px}
  .arch-grid{grid-template-columns:repeat(2,1fr)}
  .site-foot .top{grid-template-columns:1fr 1fr;gap:34px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .mats{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr;gap:34px}
}
@media (max-width:900px){
  .nav,.head-tools .desk{display:none}
  .burger{display:flex}
  .site-head .wrap{height:66px;gap:14px}
  .brand__sub{display:none}
  .brand__mark{font-size:20px;letter-spacing:.11em}
  .head-tools{gap:12px;margin-left:0}
  .topbar__links span:nth-child(n+2){display:none}
  .topbar .mono{white-space:nowrap}
  .grid-3{grid-template-columns:1fr 1fr;gap:20px}
  .tbl .t-hide{display:none}
}
@media (max-width:680px){
  :root{--gut:18px}
  .topbar__links{display:none}
  .topbar .wrap{justify-content:center;min-height:30px}
  .topbar .mono{font-size:9px;letter-spacing:.12em}
  .sec{padding:56px 0}
  .hero .wrap{padding-top:34px;padding-bottom:40px}
  .hero__notes{gap:14px 0}
  .hero__notes div{flex:1 1 50%;padding-right:12px;margin-bottom:10px}
  .grid-4,.grid-3,.arch-grid,.mats{grid-template-columns:1fr}
  .idx-head{flex-direction:column;align-items:flex-start;gap:14px}
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:grid;grid-template-columns:1fr auto;gap:3px 14px;padding:16px 0;
    border-bottom:1px solid var(--line)}
  .tbl tbody td{padding:0;border:0}
  .tbl .t-no{grid-column:1/-1;font-size:9.5px;letter-spacing:.1em;color:var(--ink-3)}
  .tbl .t-name{font-size:18px}
  .tbl .t-name small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:11.5px;line-height:1.4;margin-top:4px}
  .tbl .t-price{grid-column:2;grid-row:2;align-self:start;font-size:14px}
  .tbl .t-go{display:none}
  .pdp{padding-bottom:52px}
  .gallery__thumbs{grid-template-columns:repeat(5,1fr);gap:6px}
  .price{font-size:26px}
  .site-foot .top{grid-template-columns:1fr;padding:40px 0 30px;gap:26px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:22px 0}
  .step:last-child{border-bottom:0}
  .page-head{padding:34px 0 24px}
  .page-body table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .page-body th,.page-body td{font-size:12.5px;padding:10px 12px 10px 0;min-width:88px;white-space:normal}
  .page-body h2{font-size:22px}
  .band .wrap{padding-top:52px;padding-bottom:52px}
  .buy__row{flex-wrap:wrap}
  .qty{flex:1 1 100%;justify-content:space-between}
  .buy__row .btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------- woo: cart */
table.shop_table .product-remove{width:34px;text-align:center}
table.shop_table .product-remove a{display:inline-flex;width:24px;height:24px;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--ink-3);
  font-size:13px;line-height:1}
table.shop_table .product-remove a:hover{border-color:var(--clay);color:var(--clay)}
table.shop_table .product-thumbnail{width:96px}
table.shop_table .product-thumbnail img{width:72px;height:72px;object-fit:cover;border-radius:4px}
table.shop_table td.product-name{font-family:var(--serif);font-size:17px}
table.shop_table td.product-name a{color:var(--ink)}
table.shop_table td.product-price,table.shop_table td.product-subtotal{font-family:var(--mono);font-size:13px}
table.shop_table input.qty{width:66px;height:42px;padding:0 8px;border:1px solid var(--line-2);
  border-radius:4px;background:var(--card);font-family:var(--mono);font-size:13px;text-align:center}
table.shop_table .coupon{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
table.shop_table .coupon label{display:none}
table.shop_table .coupon input#coupon_code{width:168px;height:42px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--card);font-size:13.5px}
table.shop_table .coupon .button{height:42px;padding:0 22px}
table.shop_table .actions .button{height:42px;padding:0 22px}
.cart_totals{max-width:420px}
.cart_totals table.shop_table{border:1px solid var(--line)}
.cart_totals table.shop_table th{width:44%;vertical-align:middle}
.cart_totals table.shop_table td{font-family:var(--mono);font-size:13px;text-align:right}
.cart_totals .wc-proceed-to-checkout{padding:16px 0 0}
.cart_totals .wc-proceed-to-checkout a.button{width:100%;justify-content:center}
.woocommerce-shipping-totals td{font-size:13px}
.woocommerce-cart .cart-empty{font-family:var(--serif);font-size:22px}
.return-to-shop .button{margin-top:14px}

/* ---------------------------------------------------------------- woo: checkout */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0;margin:0 0 20px;
  font-size:13.5px;color:var(--ink-3)}
.woocommerce form.checkout_coupon{border:1px solid var(--line);border-radius:6px;background:var(--card);
  padding:20px;margin:0 0 26px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.woocommerce form.checkout_coupon p{margin:0}
.woocommerce form.checkout_coupon input.input-text{width:220px;height:44px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:14px}
.woocommerce form.checkout_coupon button{height:44px}

form.checkout{display:grid;grid-template-columns:1.04fr .96fr;gap:0 56px;align-items:start;margin-top:8px}
.woocommerce form .col2-set,.woocommerce-page form .col2-set{width:100%;display:block;float:none}
.woocommerce form .col2-set .col-1,.woocommerce form .col2-set .col-2{width:100%;float:none;padding:0}
.woocommerce-additional-fields{grid-column:1;grid-row:2;margin-top:22px}
.woocommerce form .form-row,.woocommerce form .form-row-first,.woocommerce form .form-row-last{
  width:100%;float:none;padding:0;margin:0 0 14px}
.woocommerce-billing-fields__field-wrapper .form-row{margin-bottom:14px}
#order_review_heading{font-size:22px}
form.checkout #customer_details{grid-column:1;grid-row:1 / span 3}
form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 12px;align-self:start}
form.checkout #order_review{grid-column:2;grid-row:2}
.woocommerce-billing-fields h3{margin-top:0}
.woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.woocommerce-billing-fields__field-wrapper p.form-row-wide,
.woocommerce-billing-fields__field-wrapper p#billing_address_1_field,
.woocommerce-billing-fields__field-wrapper p#billing_address_2_field,
.woocommerce-billing-fields__field-wrapper p#billing_country_field,
.woocommerce-billing-fields__field-wrapper p#billing_email_field,
.woocommerce-billing-fields__field-wrapper p#billing_phone_field{grid-column:1 / -1}
.woocommerce-additional-fields h3{margin-top:8px}
#order_review table.shop_table{margin-bottom:18px}
#order_review table.shop_table td{font-family:var(--mono);font-size:12.5px}
#order_review table.shop_table td.product-name{font-family:var(--sans);font-size:14px}
#payment ul.payment_methods{margin:0 0 14px}
#payment .payment_box{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  font-size:13px;color:var(--ink-2);margin:0 0 12px}
.woocommerce-terms-and-conditions-wrapper{font-size:12.5px;color:var(--ink-3);margin-bottom:14px}
#place_order{width:100%;height:52px;justify-content:center}

@media (max-width:960px){
  form.checkout{grid-template-columns:1fr;gap:26px}
  form.checkout #customer_details{grid-column:1;grid-row:auto}
  form.checkout #order_review_heading{grid-column:1;grid-row:auto;margin-top:18px}
  form.checkout #order_review{grid-column:1;grid-row:auto}
  .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
}
@media (max-width:680px){
  table.shop_table thead{display:none}
  table.shop_table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  table.shop_table td{display:flex;justify-content:space-between;gap:14px;border:0;padding:4px 0}
  table.shop_table td::before{content:attr(data-title);font-family:var(--mono);font-size:9.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  table.shop_table td.product-remove::before{content:""}
  table.shop_table td.product-thumbnail{display:none}
  table.shop_table .coupon{width:100%;margin-bottom:10px}
  table.shop_table .coupon input#coupon_code{flex:1}
  table.shop_table .actions{display:block;padding-top:8px}
  table.shop_table .actions .button{width:100%;margin-top:10px}
  .cart_totals{max-width:none}
}