/* Tapeçaria Lab — one page in two states: Antes (worn cloth) under Depois (green velvet), split by a seam of tacks */
:root {
  --seam: 50%;
  --greige: #cfc7b8; --greige-2: #c3bba9; --ash: #6f6a60; --ash-ink: #4d4942; --foam: #e6c65c; --foam-2: #c9a43e;
  --velvet: #1f4a3a; --velvet-2: #173a2d; --velvet-3: #12301f; --cream: #f3ead6; --cream-2: #d9d0bb; --brass: #c9a24b; --brass-2: #a8832f; --brass-hi: #ecd28c;
  --slab: 'Zilla Slab', 'Rockwell', 'Georgia', serif; --sans: 'Karla', 'Segoe UI', sans-serif;
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-io: cubic-bezier(.87, 0, .13, 1); --e-q: cubic-bezier(.25, 1, .5, 1);
  --pad: clamp(18px, 6vw, 96px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .24 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --fade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .93 0 0 0 0 .88 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='900' height='700' filter='url(%23f)'/%3E%3C/svg%3E");
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 .5H4M.5 0V4' stroke='%23000' stroke-opacity='.025'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--velvet); color: var(--cream); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
::selection { background: var(--brass); color: var(--velvet-3); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---------- language tab ---------- */
.lang { position: fixed; top: 14px; right: 14px; z-index: 30; display: flex; background: var(--velvet-3); border: 1px dashed rgba(201,162,75,.7); outline: 3px solid var(--velvet-3); }
.lang button { font: 700 12px/1 var(--sans); letter-spacing: .12em; padding: 9px 11px; color: var(--cream-2); }
.lang button[aria-pressed="true"] { background: var(--brass); color: var(--velvet-3); }

/* ---------- the two layers ---------- */
.stage { position: relative; display: grid; isolation: isolate; }
.layer { grid-area: 1 / 1; min-width: 0; background-color: var(--bg); background-image: var(--grain), var(--weave); color: var(--ink); }
.depois { --bg: var(--velvet); --ink: var(--cream); --ink-2: var(--cream-2); --rule: var(--brass); --accent: var(--brass); z-index: 2; clip-path: inset(0 0 0 var(--seam)); background-blend-mode: soft-light, normal; }
.antes  { --bg: var(--greige); --ink: var(--ash); --ink-2: var(--ash-ink); --rule: #a39b8c; --accent: #8d8576; z-index: 1; background-image: var(--grain-soft), var(--weave), var(--fade); background-blend-mode: soft-light, normal, normal; }
.antes .row.done { --bg: var(--velvet); --ink: var(--cream); --ink-2: var(--cream-2); --rule: var(--brass); --accent: var(--brass); background-color: var(--velvet); background-image: var(--grain); background-blend-mode: soft-light; }
.cloth { padding: 0 var(--pad) 72px; max-width: 1560px; margin: 0 auto; position: relative; }

/* ---------- brand row ---------- */
.brand { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 26px 0 0; }
.logo { height: 46px; width: auto; }
.brand-line, .brand-place { margin: 0; font: 500 14px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-2); }
.brand-line { padding-left: 22px; border-left: 2px dotted var(--rule); }

/* ---------- headline ---------- */
.top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px 5vw; align-items: end; padding: clamp(44px, 9vh, 110px) 0 clamp(44px, 7vh, 84px); }
.head { margin: 0; font: 700 clamp(52px, 8.6vw, 148px)/.9 var(--slab); letter-spacing: -.035em; }
.head-b { text-align: left; cursor: default; }
.antes .head-b { cursor: pointer; }
.sag { display: inline; }
.sag .w { display: inline-block; white-space: nowrap; }
.sag .ch { display: inline-block; white-space: pre; transition: transform .9s var(--e-out); }
.depois .sag .ch { transform: none !important; }
.antes .head { color: #7a7469; }
.lede { max-width: 44ch; padding-bottom: .6em; }
.lede p { margin: 0 0 14px; }
.lede-a { font: 500 19px/1.5 var(--sans); color: var(--ink); }
.lede-b { font-size: 15px; color: var(--ink-2); }
.lede-b b { font: 600 1.05em var(--slab); color: var(--ink); }

/* ---------- service rows ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row { color: var(--ink); position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(170px, 230px) auto; gap: 0 clamp(16px, 2.4vw, 40px); align-items: center; padding: 26px clamp(10px, 1.4vw, 22px); border-top: 3px dashed var(--rule); transition: background-color .7s var(--e-out), color .7s var(--e-out); }
.depois .row { border-top-style: solid; box-shadow: inset 0 1px 0 var(--velvet-3), inset 0 4px 0 -2px rgba(236,210,140,.18); }
.antes .row.done { border-top-style: solid; }
.rows .row:last-child { border-bottom: 3px dashed var(--rule); }
.depois .rows .row:last-child { border-bottom-style: solid; }
.r-main { min-width: 0; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 8px; }
.r-n { font: 500 15px/2.4 var(--slab); color: var(--ink-2); grid-row: 1 / 3; }
.r-t { margin: 0; font: 600 clamp(26px, 2.7vw, 42px)/1.05 var(--slab); letter-spacing: -.015em; }
.r-open { text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); transition: text-decoration-color .3s var(--e-q); }
.r-open:hover { text-decoration-color: var(--accent); }
.r-d { margin: 8px 0 0; max-width: 54ch; font-size: 16px; color: var(--ink-2); grid-column: 2; }
.r-p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-2); }
.r-p b { font: 600 22px/1.15 var(--slab); color: var(--ink); }
.mark { font: italic 400 12.5px/1.3 var(--sans); color: var(--ink-2); border-left: 2px solid var(--accent); padding-left: 7px; margin-top: 5px; }
.prints { display: flex; gap: 10px; min-width: 0; }
.prints figure { margin: 0; width: 160px; flex: none; padding: 5px; background: var(--cream); box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 10px 18px -12px rgba(0,0,0,.6); }
.prints figure:nth-child(2) { transform: rotate(1.4deg) translateY(4px); }
.prints figure:nth-child(3) { transform: rotate(-1.2deg); }
.prints img { width: 150px; height: 150px; }
.antes .prints figure { background: #e4ddcf; }
.antes .prints img { filter: saturate(.55) contrast(.92); }
.antes .row.done .prints img { filter: none; }

/* the tack of a row */
.tack { width: 64px; display: grid; justify-items: center; gap: 6px; padding: 6px 0; }
.tk { width: 30px; height: 30px; border-radius: 50%; position: relative; transition: transform .5s var(--e-out), background-color .4s var(--e-q); }
.antes .tk { background: #9b9384; transform: rotate(-24deg) translate(3px, -3px) scale(.86); box-shadow: 2px 3px 0 -1px rgba(60,52,40,.35); }
.antes .tk::after { content: ''; position: absolute; left: 7px; top: 6px; width: 8px; height: 5px; border-radius: 50%; background: #b5ad9e; }
.depois .tk, .antes .done .tk { background: var(--velvet-3); box-shadow: inset 0 0 0 3px var(--brass); transform: none; }
.depois .tk::after { content: none; }
.tack[aria-pressed="true"] .tk { background: var(--brass); box-shadow: 0 2px 0 var(--brass-2), 0 6px 10px -4px rgba(0,0,0,.6); transform: none; }
.tack[aria-pressed="true"] .tk::after { content: ''; position: absolute; left: 7px; top: 6px; width: 9px; height: 6px; border-radius: 50%; background: var(--brass-hi); }
.tk-l { font: 700 11px/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.tack:hover .tk { transform: scale(1.08); }
.tk-on, .tack[aria-pressed="true"] .tk-off { display: none; }
.tack[aria-pressed="true"] .tk-on { display: inline; }

/* ---------- the defects (Antes only) ---------- */
.wear { position: absolute; z-index: 2; }
.depois .wear, .antes .row.done .wear { display: none; }
.thread { width: 40px; height: 82px; left: 23%; bottom: -78px; pointer-events: none; z-index: 3; }
.tear { left: 37%; top: 14%; width: min(240px, 21%); transform: rotate(-5deg); cursor: pointer; filter: drop-shadow(0 1px 0 rgba(255,250,240,.45)); }
.tear svg { width: 100%; height: auto; display: block; overflow: visible; }
.tear .t-edge { fill: #8e8676; }
.tear .t-foam { fill: var(--foam); }
.tear .t-pore circle { fill: var(--foam-2); }
.tear .t-fray path { stroke: #8e8676; stroke-width: 1.4; stroke-linecap: round; }
.tear:hover .t-foam { fill: #efd273; }
.stain { width: 150px; height: 150px; right: 30%; top: 50%; transform: translateY(-50%); cursor: pointer; border-radius: 50%; }
.stain svg { width: 100%; height: 100%; }
.antes .head-b:hover .ch { color: #5f5a51; }

/* ---------- proof: the firm's own pair ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 590px) minmax(0, 1fr); gap: 32px clamp(28px, 5vw, 80px); align-items: center; padding: clamp(56px, 9vh, 104px) 0 clamp(48px, 7vh, 80px); }
.jx-l { position: absolute; top: 12px; z-index: 2; font: 700 12px/1 var(--slab); letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px; pointer-events: none; }
.jx-la { left: 12px; background: var(--greige); color: #3f3b35; }
.jx-lb { right: 12px; background: var(--velvet-3); color: var(--cream); box-shadow: inset 0 0 0 1px var(--brass); }
.jx { --jx: 50%; position: relative; width: 100%; max-width: 590px; aspect-ratio: 590 / 212; overflow: hidden; box-shadow: 0 0 0 6px var(--cream), 0 0 0 7px var(--rule), 0 22px 36px -22px rgba(0,0,0,.7); touch-action: pan-y; user-select: none; }
.antes .jx { box-shadow: 0 0 0 6px #e4ddcf, 0 0 0 7px var(--rule); }
.jx-a, .jx-b { position: absolute; inset: 0; overflow: hidden; }
.jx img { width: 100%; height: auto; max-width: none; pointer-events: none; }
.jx-b { clip-path: inset(0 0 0 var(--jx)); }
.jx-b img { transform: translateY(-50.1%); }
.jx-h { position: absolute; top: 0; bottom: 0; left: var(--jx); width: 32px; margin-left: -16px; cursor: ew-resize; touch-action: none; display: grid; place-items: center; }
.jx-h::before { content: ''; position: absolute; top: 0; bottom: 0; left: 15px; width: 2px; background: var(--brass); }
.jx-h span { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--brass); box-shadow: 0 2px 0 var(--brass-2), 0 0 0 3px rgba(18,48,31,.55); }
.proof-t { max-width: 46ch; }
.proof-t h2 { margin: 0 0 14px; font: 600 clamp(30px, 3.4vw, 52px)/1.02 var(--slab); letter-spacing: -.02em; }
.proof-t p { margin: 0 0 12px; color: var(--ink-2); }
.proof-n { font-size: 14px; }

/* ---------- my order (in the cloth) ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; padding: 34px 0 40px; border-top: 3px dashed var(--rule); }
.depois .order { border-top-style: solid; }
.order h2 { margin: 0 0 6px; font: 700 clamp(34px, 4vw, 60px)/1 var(--slab); letter-spacing: -.02em; }
.order-empty { margin: 0; color: var(--ink-2); }
.order-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 600 20px/1.3 var(--slab); }
.order-list li::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); margin-right: 9px; vertical-align: 1px; }
.order.has .order-empty { display: none; }
.order-go { font: 700 16px/1 var(--sans); letter-spacing: .02em; padding: 18px 26px; background: var(--ink); color: var(--bg); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--ink); outline-offset: 4px; }
.depois .order-go { background: var(--brass); color: var(--velvet-3); box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 4px var(--velvet-3); }
.antes .order-go { background: #8d8576; color: #f0ebe1; box-shadow: none; }

/* ---------- sewn label at the foot of the seam ---------- */
.label { position: relative; max-width: 640px; margin: 40px auto 0; padding: 26px 30px 22px; background: var(--cream); color: #2a2a22; outline: 2px dashed rgba(31,74,58,.55); outline-offset: -9px; box-shadow: 0 16px 28px -18px rgba(0,0,0,.7); }
.antes .label { background: #e4ddcf; color: #4a463f; outline-color: rgba(111,106,96,.45); transform: rotate(-.8deg); }
.label::before, .label::after { content: ''; position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-2); }
.label::before { left: 12px; } .label::after { right: 12px; }
.antes .label::before, .antes .label::after { background: #9b9384; }
.label p, .label address { margin: 0 0 8px; font-style: normal; }
.lb-k { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #5b5648; }
.lb-n { font: 700 30px/1.05 var(--slab); color: var(--velvet); }
.antes .lb-n { color: #5a564d; }
.lb-c { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; }
.lb-c a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lb-h { font: italic 500 15px var(--sans); }
.lb-s { font-size: 13px; color: #4f4b42; }

/* ---------- the seam and its handle ---------- */
.seam { position: absolute; top: 0; bottom: 0; left: var(--seam); width: 18px; margin-left: -9px; z-index: 5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='30'%3E%3Ccircle cx='9' cy='15' r='6.5' fill='%23a8832f'/%3E%3Ccircle cx='9' cy='14' r='6' fill='%23c9a24b'/%3E%3Cellipse cx='7' cy='11.8' rx='2.6' ry='1.7' fill='%23ecd28c'/%3E%3C/svg%3E") center top / 18px 30px repeat-y; }
.seam::before { content: ''; position: absolute; top: 0; bottom: 0; left: 8px; width: 2px; background: rgba(18,48,31,.55); z-index: -1; }
.handle { position: fixed; z-index: 20; top: 64vh; left: var(--seam); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; touch-action: none; user-select: none; cursor: ew-resize; transition: opacity .35s var(--e-q); }
.handle.off { opacity: 0; pointer-events: none; }
.handle.edge-l .hl-a, .handle.edge-r .hl-d { visibility: hidden; }
.knob { width: 58px; height: 58px; border-radius: 50%; background: var(--brass); box-shadow: 0 3px 0 var(--brass-2), 0 0 0 4px rgba(18,48,31,.75), 0 14px 22px -8px rgba(0,0,0,.6); position: relative; flex: none; }
.knob::before { content: ''; position: absolute; left: 14px; top: 12px; width: 16px; height: 10px; border-radius: 50%; background: var(--brass-hi); }
.knob::after { content: ''; position: absolute; inset: 22px 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M8 1 2 7l6 6M20 1l6 6-6 6' fill='none' stroke='%2312301f' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.hl { font: 700 13px/1 var(--slab); letter-spacing: .14em; text-transform: uppercase; padding: 7px 9px; white-space: nowrap; }
.hl-a { background: var(--greige); color: #3f3b35; }
.hl-d { background: var(--velvet-3); color: var(--cream); box-shadow: inset 0 0 0 1px var(--brass); }
.handle:focus-visible { outline: none; } .handle:focus-visible .knob { box-shadow: 0 3px 0 var(--brass-2), 0 0 0 4px var(--cream), 0 0 0 7px var(--velvet-3); }

/* order bag */
.bag { position: fixed; z-index: 25; right: 112px; top: 14px; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; background: var(--velvet-3); color: var(--cream); font: 700 13px/1 var(--sans); letter-spacing: .06em; border: 1px dashed rgba(201,162,75,.7); outline: 3px solid var(--velvet-3); }
.bag b { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--brass); color: var(--velvet-3); font: 700 13px/1 var(--sans); }
.bag[data-n="0"] b { background: transparent; color: var(--cream-2); box-shadow: inset 0 0 0 1.5px var(--cream-2); }

/* ---------- bottom sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(12,26,20,.55); }
.sheet[hidden] { display: none; }
.sh-in { position: relative; width: min(980px, 100%); max-height: 88vh; overflow: auto; background: var(--velvet); background-image: var(--grain); background-blend-mode: soft-light; color: var(--cream); padding: 34px clamp(20px, 4vw, 52px) 30px; border-top: 4px solid var(--brass); box-shadow: 0 -2px 0 var(--velvet-3), 0 -30px 60px -30px rgba(0,0,0,.7); animation: rise .6s var(--e-out) both; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.sh-x { position: absolute; right: 18px; top: 16px; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; border: 1px dashed var(--brass); color: var(--cream); }
.svc-body h2 { margin: 0 0 4px; font: 700 clamp(32px, 4.4vw, 58px)/1 var(--slab); letter-spacing: -.02em; padding-right: 100px; }
.svc-for { font: 500 19px/1.45 var(--sans); max-width: 52ch; margin: 12px 0 22px; }
.svc-g { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 44px; }
.svc-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.svc-steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 9px 0; border-top: 1px dashed rgba(201,162,75,.45); }
.svc-steps li::before { content: counter(s, decimal-leading-zero); font: 600 14px/1.6 var(--slab); color: var(--brass); }
.svc-k { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 8px; }
.svc-side p { margin: 0 0 16px; }
.svc-price { font: 600 26px/1.15 var(--slab); }
.svc-side .mark { display: inline-block; color: var(--cream-2); border-color: var(--brass); }
.svc-prints { display: flex; gap: 10px; overflow-x: auto; margin: 6px 0 4px; }
.svc-prints img { width: 120px; height: 120px; flex: none; outline: 4px solid var(--cream); outline-offset: -1px; margin: 4px; }
.svc-act { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--brass); }
.btn { font: 700 15px/1 var(--sans); padding: 15px 20px; background: var(--brass); color: var(--velvet-3); border-radius: 3px; text-decoration: none; display: inline-block; }
.btn.ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream-2); }

#askf h2 { margin: 0 0 6px; font: 700 clamp(34px, 4.4vw, 58px)/1 var(--slab); }
.ask-sub { margin: 0 0 18px; color: var(--cream-2); }
.ask-s { border: 0; padding: 0; margin: 0 0 18px; }
.ask-s legend { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.ask-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-list label { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px dashed rgba(201,162,75,.6); cursor: pointer; font-size: 15px; }
.ask-list input { appearance: none; width: 18px; height: 18px; border-radius: 50%; margin: 0; box-shadow: inset 0 0 0 2px var(--brass); }
.ask-list input:checked { background: var(--brass); box-shadow: 0 0 0 2px var(--velvet), 0 0 0 3px var(--brass); }
.ask-list label:has(input:checked) { border-style: solid; background: rgba(201,162,75,.12); }
.ask-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.ask-f label span { display: block; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-2); margin-bottom: 8px; }
.ask-f input { width: 100%; font: 400 17px/1.3 var(--sans); color: var(--cream); background: var(--velvet-3); border: 0; border-bottom: 2px solid var(--brass); padding: 12px 12px 10px; border-radius: 0; }
.ask-f input::placeholder { color: #a9ae9c; }
.ask-law { margin: 18px 0; font: italic 500 16px/1.5 var(--slab); max-width: 62ch; padding-left: 14px; border-left: 3px solid var(--brass); }
.ask-b { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.send { font: 700 16px/1 var(--sans); padding: 17px 24px; background: var(--brass); color: var(--velvet-3); border-radius: 3px; }
.call { font-weight: 700; text-underline-offset: 3px; }
.ask-ok { min-height: 1.4em; margin: 8px 0 0; color: var(--brass-hi); font-weight: 500; }

/* ---------- load choreography ---------- */
.js:not(.static) .head .ch { animation: drop .9s var(--e-out) both; animation-delay: calc(var(--i, 0) * 18ms + 120ms); }
@keyframes drop { from { opacity: 0; translate: 0 .3em; } }
.js:not(.static) .lede, .js:not(.static) .rows { animation: fadeup 1s var(--e-out) .55s both; }
@keyframes fadeup { from { opacity: 0; translate: 0 18px; } }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- legal pages: the sewn label, page size ---------- */
body.legal { background: var(--velvet); background-image: var(--grain); background-blend-mode: soft-light; color: #2a2a22; padding: 0 16px 60px; }
.legal-top { max-width: 860px; margin: 0 auto; padding: 26px 0 22px; }
.legal-top img { height: 44px; width: auto; }
.legal-main { max-width: 860px; margin: 0 auto; background: var(--cream); padding: clamp(24px, 5vw, 56px); outline: 2px dashed rgba(31,74,58,.5); outline-offset: -10px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.legal-main h1 { font: 700 clamp(30px, 5vw, 48px)/1.05 var(--slab); color: var(--velvet); margin: 18px 0 12px; }
.legal-main h2 { font: 600 22px/1.2 var(--slab); color: var(--velvet); margin: 30px 0 8px; }
.legal-main a { color: #1f4a3a; font-weight: 700; }

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  .row { grid-template-columns: 64px minmax(0, 1fr) minmax(150px, 200px); }
  .prints { grid-column: 2 / -1; margin-top: 16px; }
  .tear { left: 34%; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .top { grid-template-columns: 1fr; padding-top: 70px; }
  .brand { padding-top: 66px; }
  .logo { height: 40px; }
  .brand-line { padding-left: 0; border-left: 0; width: 100%; }
  .row { grid-template-columns: 60px minmax(0, 1fr); padding: 22px 4px; column-gap: 12px; }
  .tack { width: 60px; align-self: start; }
  .tk-l { font-size: 10px; letter-spacing: .04em; }
  .r-main { grid-template-columns: minmax(0, 1fr); }
  .r-n { grid-row: auto; line-height: 1.3; }
  .r-d { grid-column: 1; }
  .r-p { grid-column: 2; margin-top: 14px; }
  .prints { grid-column: 1 / -1; overflow-x: auto; padding: 4px 4px 10px; margin: 14px -4px 0; scroll-snap-type: x mandatory; }
  .prints figure { scroll-snap-align: start; }
  .tear { left: auto; right: 2px; width: 42%; top: 6px; }
  .stain { right: 6%; width: 120px; height: 120px; top: 34%; }
  .thread { left: 40%; }
  .proof { grid-template-columns: 1fr; }
  .order { grid-template-columns: 1fr; }
  .ask-f { grid-template-columns: 1fr; }
  .svc-g { grid-template-columns: minmax(0, 1fr); }
  .svc-g > *, .svc-side, .svc-prints { min-width: 0; }
  /* phone: the handle rests in a band of its own along the bottom edge; the page is padded for it */
  body { padding-bottom: 68px; position: relative; }
  .handle { top: auto; bottom: 0; left: 0; right: 0; height: 68px; transform: none; display: block; gap: 0; background: var(--velvet-3); box-shadow: inset 0 3px 0 var(--brass), 0 -10px 20px -12px rgba(0,0,0,.6); }
  .handle::before { content: ''; position: absolute; left: var(--seam); top: 3px; bottom: 0; width: 2px; margin-left: -1px; background: rgba(201,162,75,.45); }
  .handle .knob { position: absolute; left: var(--seam); top: 50%; transform: translate(-50%, -50%); }
  .handle .hl { position: absolute; top: 50%; transform: translateY(-50%); }
  .handle .hl-a { right: calc(100% - var(--seam) + 34px); }
  .handle .hl-d { left: calc(var(--seam) + 34px); }
  .lang, .bag { position: absolute; }
  .knob { width: 52px; height: 52px; }
  .knob::before { left: 12px; top: 10px; }
  .knob::after { inset: 19px 13px; }
  .hl { font-size: 11px; padding: 6px 7px; }
  .label { padding: 24px 22px 20px; }
}

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: tapecaria-gerci */
.ck { left: 0; right: 0; bottom: 0; max-width: none; width: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr) auto; gap: 6px 28px; align-items: center; padding: 26px clamp(18px, 4vw, 56px) 26px clamp(26px, 5vw, 70px); background-color: #c49b5f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 2h8M0 6h8' stroke='%235a3d17' stroke-opacity='.22' stroke-width='1.6'/%3E%3Cpath d='M2 0v8M6 0v8' stroke='%23fff3d6' stroke-opacity='.16' stroke-width='1.4'/%3E%3C/svg%3E"); color: #261c12; font-family: 'Karla', 'Segoe UI', sans-serif; box-shadow: 0 -2px 0 #8f6a35, 0 -14px 26px -14px rgba(0,0,0,.6); animation: tg-ck-pull .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes tg-ck-pull { from { transform: translateX(-30%); opacity: 0; } }
html.static .ck { animation: none; }
.ck::before, .ck::after { content: ''; position: absolute; left: 0; right: 0; height: 5px; background: #9e2f26; box-shadow: 0 1px 0 rgba(60,20,10,.3); }
.ck::before { top: 9px; } .ck::after { bottom: 9px; }
.ck .ck-k { grid-column: 1; font: 700 11px/1.2 'Karla', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #4a3115; }
.ck .ck-t { grid-column: 1; }
.ck .ck-t b { display: block; font: 700 21px/1.12 'Zilla Slab', Georgia, serif; color: #1f150c; letter-spacing: -.01em; }
.ck .ck-p { grid-column: 2; grid-row: 1 / 3; font-size: 13.5px; line-height: 1.45; color: #2b1f12; max-width: 62ch; }
.ck .b { grid-column: 3; grid-row: 1 / 3; margin: 0; display: grid; grid-template-columns: auto auto; gap: 10px 22px; align-items: center; }
.ck button.ok, .ck button.no { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 2px; font: 700 15px/1.1 'Karla', sans-serif; color: #1f150c; cursor: pointer; }
.ck button.ok::before, .ck button.no::before { content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #c9a24b; box-shadow: inset -5px -6px 0 -2px #a8832f, inset 6px 5px 0 -3px #ecd28c, 0 3px 0 #6e521c, 0 6px 8px -3px rgba(0,0,0,.5); transition: transform .3s cubic-bezier(.25,1,.5,1); }
.ck button.no::before { background: #b7aa8a; box-shadow: inset -5px -6px 0 -2px #8f8468, inset 6px 5px 0 -3px #ddd3ba, 0 3px 0 #5f563f, 0 6px 8px -3px rgba(0,0,0,.45); }
.ck button.ok:hover::before, .ck button.no:hover::before { transform: translateY(2px); }
.ck button:focus-visible { outline: 2px solid #1f150c; outline-offset: 3px; }
.ck a.more { grid-column: 1 / -1; justify-self: end; font: 600 13px/1.2 'Karla', sans-serif; color: #1f150c; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .ck { grid-template-columns: 1fr; padding: 24px 18px 24px; gap: 6px; bottom: 68px; --ck-bottom: 68px; }
  .ck .ck-p { grid-column: 1; grid-row: auto; }
  .ck .b { grid-column: 1; grid-row: auto; grid-template-columns: auto auto 1fr; margin-top: 8px; }
  .ck a.more { grid-column: auto; justify-self: end; }
}
footer.seller { background: #12301f; color: #f3ead6; border-top: 4px solid #c9a24b; }
footer.seller p, footer.seller span, footer.seller li, footer.seller dt, footer.seller dd, footer.seller small, footer.seller strong, footer.seller b, footer.seller h2, footer.seller h3 { color: #f3ead6; }
footer.seller a { color: #ecd28c; }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }