/* WallCentury — static reference site. One stylesheet, no framework. */

:root{
  --bg:#f3f2f2; --surface:#eae9e9; --ink:#201e1d; --accent:#ec3013;
  --accent-hover:#dd2b0f; --accent-press:#ae1800; --link:#ae1800;
  --divider:rgba(32,30,29,.4);
  --divider-soft:rgba(32,30,29,.22); --rule-soft:1px solid var(--divider-soft);
  /* Horizontal dividers only — #d5d4d4 is the ground stepped down ~30%.
     Vertical borders keep --divider; mixing the two is what made the
     page feel drawn in black. */
  --hline:#d5d4d4; --rule-h:2px solid var(--hline); --rule-h-thin:1px solid var(--hline);
  /* Every horizontal rule on the site is the navbar's rule — one line, one
     weight, one colour. Vertical borders use --divider. */
  --rule:var(--rule-h);
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;font-synthesis-weight:none}
img{max-width:100%;display:block;height:auto}
[hidden]{display:none!important}
h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:0 0 8px}
h1{font-size:clamp(32px,5vw,44px)}h2{font-size:28px}h3{font-size:20px}h4{font-size:16px}
p{margin:0 0 14px;text-wrap:pretty}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
.muted{opacity:.68}
.small{font-size:13px}
.rule{border:0;margin:0;height:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:800;font-size:14px;line-height:1.2;padding:13px 22px;border:1px solid transparent;background:var(--accent);color:var(--bg);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent-hover);color:var(--bg)}
.btn:active{background:var(--accent-press)}
.btn-2{background:transparent;color:var(--ink);border-color:var(--divider)}
.btn-2:hover{background:rgba(32,30,29,.07);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent;padding:8px 10px}
.btn-ghost:hover{background:rgba(32,30,29,.07)}
.btn-icon{padding:9px}
.btn-block{width:100%;justify-content:flex-start}

/* forms */
input,textarea,select{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--divider);padding:9px 11px;min-height:42px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
label{display:block;font-size:12px;opacity:.7;margin-bottom:4px}
.field{margin-bottom:14px}

/* tags */
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;background:var(--ink);color:var(--bg)}
.tag-out{background:transparent;color:var(--ink);border:1px solid var(--divider);font-weight:600}
.tag-accent{background:var(--accent);color:var(--bg)}

/* header */
.salebar{background:var(--accent);color:var(--bg);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:9px 0}
.salebar .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.salebar span.note{opacity:.85;letter-spacing:.03em;text-transform:none;font-weight:400}
.site-header{border-bottom:var(--rule-h);background:var(--bg);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;gap:16px 28px;padding-block:14px;flex-wrap:wrap}
.brand{font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--accent)}
.nav{display:flex;gap:22px;align-items:center;margin-right:auto}
.nav a{font-weight:600;font-size:14px;text-decoration:none;color:var(--ink)}
.nav a:hover,.nav a[aria-current]{color:var(--accent)}
.utils{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;justify-content:flex-end}
.searchbox{display:flex;align-items:center;gap:6px;border:1px solid var(--divider);padding:6px 10px;flex:1 1 120px;min-width:0;max-width:220px}
.searchbox input{border:0;background:transparent;min-height:20px;padding:0;font-size:13px;min-width:0}
.navtoggle{display:none}

/* layout helpers */
.section{padding-block:48px}
.grid{display:grid;gap:32px}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.crumbs{font-size:12px;opacity:.65;margin-bottom:20px}

/* image protection — background-image artwork with a blank pixel on top,
   so right-click "Save image as" and drag-to-desktop get nothing usable.
   Switch it off with window.WC_PROTECT_IMAGES = false in products.js. */
.art{container-type:inline-size;overflow:hidden;content-visibility:auto;background-size:cover;-webkit-print-color-adjust:exact;print-color-adjust:exact;background-position:center;background-repeat:no-repeat}
.art .decoy{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.shot.art{aspect-ratio:4/5}
.rshot{position:relative}
.rshot.art{aspect-ratio:4/5;width:100%}
.rshot img:not(.decoy){width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.pshot.art{aspect-ratio:4/5;width:100%}
.jshot{position:relative;aspect-ratio:3/2;width:100%;background-color:var(--surface)}
.ashot{position:relative;aspect-ratio:3/4;width:100%;background-color:var(--surface)}

/* image protection — live overlay on top of the baked-in watermark */
.shot,.pshot{position:relative}
/* One list, used by every artwork holder on the site: product cards (.shot),
   the product hero (.pshot), room tiles (.rshot), journal cards (.jshot),
   the about photo (.ashot) and bundle previews (.bshot). Add any new holder
   here or it ships unprotected. */
.shot::after,.pshot::after,.rshot::after,.jshot::after,.ashot::after,.bshot::after,.vart::after{z-index:1}
.shot::after,.pshot::after,.rshot::after,.jshot::after,.ashot::after,.bshot::after,.vart::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-30deg,rgba(255,255,255,.13) 0 1px,transparent 1px 26px)
}
.shot img,.pshot img,.rshot img,.jshot img,.ashot img,.bshot img,.vart img,.room img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.art .stamp{
  position:absolute;inset:0;pointer-events:none;z-index:2;display:grid;place-items:center;
  font-weight:800;font-size:clamp(5px,10.4cqw,16px);letter-spacing:.14em;text-transform:uppercase;
  width:100%;overflow:hidden;text-align:center;
  color:rgba(255,255,255,.34);transform:rotate(-30deg)
}

/* product card */
.card{text-decoration:none;color:inherit;display:block}
.card .shot{position:relative;background-color:var(--surface)}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.card .flash{position:absolute;top:10px;left:10px;background:var(--bg);color:var(--ink);font-weight:600}
.card .meta{display:flex;justify-content:space-between;gap:12px;padding-top:9px;border-top:var(--rule-h-thin);margin-top:10px}
.card .name{font-weight:800;font-size:16px}
.card .cat{font-size:12px;opacity:.65}
.card .price{font-weight:800;font-size:16px;white-space:nowrap;text-align:right}
.card .bundle{font-size:11px;opacity:.6}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-block:64px 56px}
.hero h1{font-size:clamp(38px,5vw,62px);line-height:1.02;letter-spacing:-.03em;margin-bottom:20px}
.hero p{font-size:17px;max-width:46ch;margin-bottom:28px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:var(--rule);padding-top:20px}
.stats b{display:block;font-weight:800;font-size:22px}
.stats span{font-size:12px;opacity:.7}
.herofig{position:relative}
.herofig .cap{position:absolute;left:0;bottom:0;background:var(--bg);border-top:2px solid var(--ink);padding:12px 18px;display:flex;gap:18px;align-items:baseline}
.herofig .cap b{font-weight:800;font-size:15px}

/* hero motion. Everything here is opacity or transform only — no layout
   property animates, so the hero cannot shift while it cycles. */
.herolink{display:block;position:relative;text-decoration:none;color:inherit}
/* Image and caption share ONE duration, and the script waits exactly that
   long before swapping - a longer image fade than the swap delay is what
   made the change look like it stalled. */
.herolink .pshot,.herolink .cap{transition:opacity .32s ease}
.herolink[data-fading="1"] .pshot{opacity:0}
.herolink[data-fading="1"] .cap{opacity:0}
.herofig .cap span[data-hero-price]{font-weight:800;color:var(--accent-press)}
.herolink:hover .cap b{color:var(--accent-press)}
.herorail{display:flex;gap:4px;margin-top:4px}
.herorail button{flex:1 1 0;height:20px;border:0;padding:0;background:transparent;cursor:pointer;display:flex;align-items:center}
.herorail button::before{content:"";display:block;width:100%;height:3px;background:var(--hline);transition:background .25s}
.herorail button[aria-current="true"]::before{background:var(--ink)}
.herorail button:hover::before{background:var(--accent)}
.herorail button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* the delivery-proof line */
.proof{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.02em;margin:-14px 0 28px;min-height:20px}
.proof-dot{width:7px;height:7px;background:var(--accent);flex:none;animation:proofpulse 2s ease-in-out infinite}
.proof-caret{width:2px;height:13px;background:var(--ink);animation:proofblink 1s step-end infinite}
@keyframes proofpulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes proofblink{0%,100%{opacity:1}50%{opacity:0}}

/* Shop all prints — the label slides, the fill arrives from the left */
.btn-live{position:relative;overflow:hidden;isolation:isolate}
.btn-live::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-press);transform:translateX(-101%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-live:hover::before{transform:translateX(0)}
.btn-live>span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-live:hover>span{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){
  .herolink .pshot,.herolink .cap,.btn-live::before,.btn-live>span{transition:none}
  .proof-dot,.proof-caret{animation:none}
  .proof-caret{opacity:0}
}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:var(--rule-h)}
.steps>div{padding:24px}
.steps>div:first-child{padding-left:0}
.steps>div:last-child{padding-right:0}
.steps>div+div{border-left:1px solid var(--divider)}
.steps .n{font-weight:800;font-size:13px;color:var(--accent);letter-spacing:.1em}

/* rooms */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.room{display:grid;place-items:center;aspect-ratio:1/1;padding:18%;border:1px solid var(--divider)}
.room .frame{background:var(--bg);padding:7px;box-shadow:0 3px 10px rgba(45,43,43,.16);width:100%}
.room img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* poster */
.poster{background:var(--accent);color:var(--bg);padding:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:center}
.poster h2{color:var(--bg);font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em}
.poster p{margin:0;font-size:16px;opacity:.95}
.poster .row{display:flex;gap:8px;flex-wrap:wrap}
.poster input{flex:1 1 200px;background:var(--bg);border-color:var(--bg)}
.poster .btn{background:var(--ink)}
.poster .btn:hover{background:#000}

/* filters */
.filters{display:flex;align-items:center;gap:24px;justify-content:space-between;padding-bottom:12px;flex-wrap:wrap}
.filters .tabs{display:flex;gap:20px;flex-wrap:wrap}
.filters a{font-weight:600;font-size:14px;text-decoration:none;color:var(--ink)}
.filters a:hover,.filters a[aria-current]{color:var(--accent)}
.filters select{width:auto;min-height:36px;font-size:13px}

/* product page */
.product-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.swatch{border:1px solid var(--divider);background:transparent;color:var(--ink);font-weight:800;font-size:13px;padding:9px 14px;cursor:pointer}
.swatch[aria-pressed="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.opt{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--divider);border-left:4px solid transparent;cursor:pointer;text-align:left;background:transparent;font:inherit;width:100%}
.opt:hover{background:rgba(32,30,29,.04)}
.opt[aria-pressed="true"]{border-left-color:var(--accent)}
.opt b{display:block;font-weight:800;font-size:14px}
.opt em{font-style:normal;font-size:12px;opacity:.7}
.opt .p{font-weight:800;font-size:14px;white-space:nowrap}
.pricebar{display:flex;align-items:baseline;gap:12px;border-top:var(--rule);border-bottom:var(--rule);padding:16px 0;margin:20px 0}
.pricebar .big{font-weight:800;font-size:34px}
.legend{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;margin-bottom:10px}
.trust{border-top:var(--rule-h);margin-top:24px;padding-top:16px;display:grid;gap:12px;font-size:13px}
/* the view switcher under the artwork */
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:8px}
.vthumb{border:1px solid var(--divider);background:var(--bg);padding:0;cursor:pointer;display:block;text-align:left;font:inherit;color:inherit}
.vthumb-img{display:block;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:var(--surface)}
.vthumb-frame .vthumb-img{background-size:62%;background-repeat:no-repeat;box-shadow:inset 0 0 0 9px var(--bg),inset 0 0 0 11px rgba(32,30,29,.35)}
.vthumb-scale .vthumb-img{background-size:34%;background-repeat:no-repeat;background-position:center 38%;box-shadow:inset 0 0 0 5px var(--bg),inset 0 0 0 6px rgba(32,30,29,.3)}
.vthumb-label{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;padding:6px 7px;border-top:1px solid var(--divider-soft)}
.vthumb[aria-selected="true"]{border-color:var(--ink)}
.vthumb[aria-selected="true"] .vthumb-label{background:var(--ink);color:var(--bg)}
.vthumb:hover{border-color:var(--accent)}
.vthumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the framed and to-scale stages, built from the same preview */
.vstage{position:relative;background:var(--surface);display:grid;place-items:center;padding:9%;aspect-ratio:4/5}
/* the to-scale wall: one stated dimension, everything derived from it */
.vstage-wall{padding:8% 8% 13%;place-items:center stretch}
.vwall{position:relative;width:100%;aspect-ratio:96/100;align-self:center;background:var(--surface)}
.vframe-wall{position:absolute;left:50%;transform:translateX(-50%);aspect-ratio:24/36;padding:2.5%;display:flex;box-shadow:0 6px 16px rgba(45,43,43,.22)}
.vframe-wall .vmat{flex:1;padding:7%;display:flex}
.vframe-wall .vart{aspect-ratio:auto;flex:1;height:auto}
.veye{position:absolute;left:0;right:0;bottom:57%;border-top:1px dashed rgba(32,30,29,.35)}
.veye span{position:absolute;right:0;top:3px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.vfloor{position:absolute;left:0;right:0;bottom:0;height:0;border-top:2px solid var(--ink)}
.vdim{position:absolute;left:0;right:0;bottom:-7%;height:1px;background:var(--ink);display:flex;justify-content:center}
.vdim::before,.vdim::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--ink)}
.vdim::before{left:0}
.vdim::after{right:0}
.vdim span{position:relative;top:-7px;background:var(--surface);padding:0 7px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.vframe{background:var(--bg);padding:3.4%;box-shadow:0 10px 26px rgba(45,43,43,.18);width:78%}

.vmat{background:var(--bg);padding:9%;box-shadow:inset 0 0 0 1px var(--divider-soft)}
.vart{aspect-ratio:4/5;width:100%;background-size:cover;background-position:center;position:relative}
/* size guide: every size in every ratio, one shared scale */
.vstage-guide{padding:6% 6% 5%;place-items:stretch}
.vguide{display:grid;grid-auto-rows:1fr;gap:6px;width:100%;height:100%}
.grow{display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:stretch;min-height:0}
.grow-r{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;align-self:end;padding-bottom:15px;opacity:.75}
.grow-b{display:flex;flex-direction:column;min-height:0}
.gboxes{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:0}
.gbox{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--ink);flex:none}
.grow-s{font-size:9.5px;font-weight:600;letter-spacing:.02em;opacity:.7;padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vthumb-sizes .vthumb-img{background-image:none!important;position:relative}
.vthumb-sizes .vthumb-img::after{content:"";position:absolute;left:22%;right:22%;bottom:26%;top:34%;box-shadow:inset 0 0 0 2px var(--ink),9px -9px 0 -7px var(--ink),16px -16px 0 -14px var(--ink)}

/* the floor line — geometry only, no drawn furniture */
.vsofa{position:absolute;left:0;right:0;bottom:0;height:30%;background:var(--bg);box-shadow:inset 0 1px 0 var(--divider)}

/* "every ratio included" statement, replaces the old ratio picker */
.incl{border:1px solid var(--divider);border-left:4px solid var(--accent);padding:14px 16px;margin:0 0 20px}
.incl-head{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.incl-list{display:flex;flex-wrap:wrap;gap:6px}
.incl-chip{font-size:12px;font-weight:600;letter-spacing:.03em;border:1px solid var(--divider);background:var(--surface);padding:5px 9px;white-space:nowrap}
.incl-note{font-size:12.5px;margin:10px 0 0;opacity:.75;max-width:52ch}

/* room bundles */
.bshot{position:relative;background-color:var(--surface)}
.bshot.art{aspect-ratio:4/5;width:100%}
.bundle{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:20px;align-items:start;text-decoration:none;color:inherit;border:1px solid var(--divider);border-left:4px solid transparent;padding:16px;transition:border-color .15s,background .15s}
.bundle:hover{background:rgba(32,30,29,.03);border-left-color:var(--accent);color:inherit}
.bundle-strip{display:grid;gap:5px}
.bundle-strip-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bundle-strip-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bundle-strip-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.bundle-strip .bthumb{min-width:0}
.bundle-strip .bthumb .bshot{box-shadow:var(--shadow-sm,0 1px 4px rgba(45,43,43,.14))}
.bundle-kicker{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bundle-count{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;font-weight:600}
.bundle-title{font-weight:800;font-size:19px;letter-spacing:-.015em;margin-bottom:6px}
.bundle-blurb{font-size:13.5px;margin:0 0 12px;opacity:.85;max-width:56ch}
.bundle-foot{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bundle-price{font-weight:800;font-size:22px}
.bundle-save{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--bg);padding:4px 8px}
.bundle-go{margin-left:auto;font-weight:800;font-size:13px;color:var(--accent)}
.bundles{display:grid;gap:14px}

/* bundle detail page */
.bgrid{display:grid;gap:10px}
.bgrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bgrid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
.bthumb-lg .bshot{box-shadow:var(--shadow-md,0 3px 10px rgba(45,43,43,.16))}
.bthumb-name{font-weight:800;font-size:13px;padding-top:8px;border-top:var(--rule-h-thin);margin-top:8px}
.bthumb-cat{font-size:11.5px;opacity:.65}
.bincluded{list-style:none;padding:0;margin:0 0 20px;border-top:var(--rule-h)}
.bincluded li{border-bottom:var(--rule-h-thin);padding:10px 0;font-size:13.5px}
.bincluded a{text-decoration:none;color:inherit}
.bincluded a:hover strong{color:var(--accent)}
.bwas{font-size:15px;opacity:.55;text-decoration:line-through}
.price .was,span[data-hero-price] .was{font-weight:600;opacity:.5;text-decoration:line-through;margin-right:6px}

@media(max-width:620px){
  .bundle{grid-template-columns:1fr}
  .bundle-strip{max-width:220px}
}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-align:left;border-bottom:var(--rule-h);padding:8px}
td{border-bottom:var(--rule-h-thin);padding:12px 8px;vertical-align:top}
.summary{border:2px solid var(--ink);padding:24px}
.srow{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:var(--rule-h-thin)}
.stotal{display:flex;justify-content:space-between;font-weight:800;font-size:22px;padding:14px 0 18px}

/* accordion */
details{border-bottom:var(--rule-h-thin);padding:14px 0}
summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
details p{margin:10px 0 0;font-size:14px;opacity:.85}

/* footer */
.site-footer{background:#ffffff;border-top:var(--rule-h);margin-top:24px}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding-block:48px}
.site-footer h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.site-footer a{display:block;font-size:13px;margin-bottom:6px;text-decoration:none}
.site-footer .base{padding:16px 0 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;opacity:.75}
.pay{display:flex;gap:14px;font-weight:600;letter-spacing:.06em}

@media(max-width:860px){
  .hero,.two,.product-layout{grid-template-columns:1fr;gap:32px}
  .steps>div{padding:20px 0}
  .steps>div+div{border-left:0;border-top:var(--rule-h-thin)}
}
@media(max-width:720px){
  .navtoggle{display:inline-flex}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:2px;order:9;margin:0}
  .nav.open{display:flex}
  .nav a{padding:10px 0;width:100%;border-bottom:var(--rule-h-thin)}
  .searchbox{display:none}
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px}
  .poster{padding:28px}
  .stats{grid-template-columns:1fr;gap:12px}
}
@media print{
  .site-header,.salebar,.site-footer{display:none}
  /* A forced print shows the wordmark, not a usable poster. */
  .shot::after,.pshot::after,.rshot::after,.jshot::after,.ashot::after,.bshot::after,.vart::after{
    background:repeating-linear-gradient(-30deg,rgba(255,255,255,.55) 0 2px,transparent 2px 18px)!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
  .art .stamp{color:rgba(255,255,255,.8)!important;font-size:26px}
  .pshot::before,.jshot::before,.ashot::before,.bthumb-lg .bshot::before{
    content:"WallCentury — preview only";position:absolute;left:0;right:0;bottom:0;z-index:2;
    background:var(--ink);color:var(--bg);font-weight:800;font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;padding:8px 12px;text-align:center
  }
}