/* KAWEN — print / save-as-PDF layer (H16).
   Loaded with media="print" only. Nothing here touches the screen.

   Why it exists: the screen site is an art-directed composition of
   absolutely positioned marks, cropped hero media, spray fields, lazy
   images and live 3D. iOS/WebKit pagination pulls absolutely positioned
   boxes into normal flow, drops their widths, and lets `width:100%`
   images fill the paper: one 22-page export, one giant crown per page.
   Paper gets its own, simpler structure: header, static hero, a compact
   catalogue grid, plain workflow cards, a bordered CTA, one footer line.

   Rules of the layer: no viewport units, no sticky/fixed, no absolute
   positioning for anything decorative (hidden instead), every card is an
   unbreakable block, all colour survives "print backgrounds: off". */

@page { size: auto; margin: 14mm 12mm 16mm; }

/* ---------------------------------------------------------------- base */
html, body { background: #fff !important; color: #000 !important; }
body { font-size: 11pt; line-height: 1.35; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
*, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }
.js .rv, .rv { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.wrap, .hz-in, .mh-in, .ez-in { max-width: none !important; padding-inline: 0 !important; margin-inline: 0 !important; }
.sec { padding-block: 5mm !important; position: static !important; }
.sec-bone, .bone, .band-soft { background: transparent !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -.02em; break-after: avoid; page-break-after: avoid; color: #000 !important; }
h1 { font-size: 30pt !important; line-height: 1 !important; }
h2 { font-size: 20pt !important; line-height: 1.05 !important; }
h3 { font-size: 13pt !important; line-height: 1.15 !important; }
.lede, .hz-line, .sub, .muted, p { color: #222 !important; }
.lede { font-size: 12pt !important; max-width: none !important; }
.kicker { font-size: 8.5pt !important; letter-spacing: .14em; color: #555 !important; }
em { color: #000 !important; }
img { max-width: 100%; }

/* --------------------------------------------- decoration: not on paper */
.mark, .hz-spray, [class*="hz-spray-"], .bloom, .grain, .sig-dim, .hz-dim, .ig-dim, .up-dim, .ghost-ar, img.ghost,
.cue3d, .stage-chips, .fz-go, .wz-go, .go, .arrow, .hov::after, .review-chip, .skip, .hint, .t-hint, .pm-tile-vis.is-burst svg,
.hz-pic::after, .stage-obj::before, .stage-obj::after, .masthead::before, .masthead::after, .band::before, .band::after, .cfg-gate::before, .cfg-gate::after,
.r3-tag, .sig-tag, .r3-tabs, .r3-scrub, .r3-cap, .gal-wash, .gal-thumbs, .ez-facts li::before, .up-phase, .up-cue, .sec > .wrap > .sec-link, .pd-back, .md-back { display: none !important; }
.stage-obj, .pm-tile-vis, .fz-img, .ez-grid figure, .gal-main, .hz-pic, .bz-vis, .up-stage { background: #F1EEE8 !important; }

/* ------------------------------------------------------ header / footer */
.nav { position: static !important; top: auto !important; background: #fff !important; border-bottom: 1px solid #000; padding: 0 0 4mm !important; margin: 0 0 6mm !important; height: auto !important; backdrop-filter: none !important; }
.nav-in { display: flex !important; align-items: baseline !important; justify-content: space-between !important; padding: 0 !important; min-height: 0 !important; height: auto !important; }
.nav-links, .nav-toggle, .nav-side, .nav-panel, .nav-menu, .nav-lang, .nav .btn, .site-banner, .nav-search, .md-like { display: none !important; }
.brand { font-size: 14pt !important; color: #000 !important; }
.nav-in[data-print-title]::after { content: attr(data-print-title); font-size: 10pt; color: #444; letter-spacing: .02em; }
.foot { border-top: 1px solid #000 !important; padding: 4mm 0 0 !important; margin-top: 6mm !important; break-inside: avoid; page-break-inside: avoid; background: #fff !important; }
.foot-links, .foot-row .brand { display: none !important; }
.foot-row { margin: 0 !important; }
.foot-bot { display: flex !important; justify-content: space-between !important; align-items: baseline !important; font-size: 9pt !important; color: #333 !important; }
.foot-bot p[data-print-host]::after { content: " · " attr(data-print-host); }

/* ------------------------------------------------- chips, buttons, links */
.chip, .badge, .fz-kind, .pc-kind, .pd-kind, .cm-tag, .cm-fixture { display: inline-block !important; position: static !important; background: #fff !important; color: #000 !important; border: 1px solid #000 !important; font-size: 7.5pt !important; letter-spacing: .1em; padding: 1px 6px !important; border-radius: 999px !important; text-transform: uppercase; }
.chip .dot, .chip::before { display: none !important; }
.btn, .btn-primary, .btn-ghost, .btn-lg { display: inline-block !important; background: #fff !important; color: #000 !important; border: 1px solid #000 !important; border-radius: 999px !important; padding: 2mm 5mm !important; font-size: 10pt !important; font-weight: 700; width: auto !important; }
.cta-row, .hz-cta, .up-submit { gap: 3mm !important; }

/* ---------------------------------------------------------------- hero */
.hz { display: block !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; break-inside: avoid; page-break-inside: avoid; }
.hz-pic { position: static !important; inset: auto !important; margin: 0 0 5mm !important; height: 70mm !important; aspect-ratio: auto !important; border-radius: 3mm !important; overflow: hidden !important; z-index: auto !important; }
.hz-pic img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 55% 60% !important; display: block; }
.hz-in { position: static !important; display: block !important; padding: 0 !important; }
.hz-copy { max-width: none !important; display: block !important; }
.hz-k { margin-bottom: 2mm !important; }
.hz-h1 { font-size: 28pt !important; line-height: .95 !important; position: static !important; }
.hz-h1::after { display: none !important; }
.hz-line { display: block !important; margin-top: 3mm !important; }
.hz-prod { margin-top: 4mm !important; width: auto !important; display: flex !important; gap: 4mm !important; align-items: baseline !important; }
.hz-cta { margin-top: 4mm !important; }
.hz-cta .btn-ghost { display: inline-block !important; }

/* ------------------------------------------------------------- masthead */
.masthead { position: static !important; min-height: 0 !important; padding: 0 0 5mm !important; overflow: visible !important; background: #fff !important; }
.masthead h1 { font-size: 26pt !important; }
.masthead h1::after, .masthead .line { display: none !important; }
.mh-row { display: flex !important; gap: 4mm !important; align-items: baseline !important; flex-wrap: wrap; }

/* ------------------------------------------------ catalogue: fz cards */
.sec-head { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin-bottom: 4mm !important; }
.sec-head .sec-link { font-size: 9pt !important; }
.fz-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6mm 5mm !important; }
.fz-card { display: block !important; position: static !important; break-inside: avoid; page-break-inside: avoid; }
.fz-link { display: none !important; }
.fz-img { position: static !important; aspect-ratio: auto !important; overflow: visible !important; border-radius: 0 !important; background: transparent !important; }
.fz-img img { width: 100% !important; height: auto !important; aspect-ratio: 1 !important; object-fit: cover !important; border-radius: 2.5mm !important; display: block; transform: none !important; background: #F1EEE8; }
.fz-img .fz-kind { margin-top: 1.5mm !important; }
.fz-card h3 { margin-top: 2.5mm !important; font-size: 12pt !important; }
.fz-card p { font-size: 9.5pt !important; margin: 0 !important; }
.fz-foot { display: flex !important; justify-content: flex-start !important; gap: 3mm !important; margin-top: 1.5mm !important; }
.fz-foot .price { font-size: 11pt !important; }

/* --------------------------------------------- workflow: wz / pm tiles */
.wz-grid, .pm-tiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4mm !important; }
.wz-way, .pm-tile { position: static !important; display: block !important; border: 1px solid #000 !important; border-radius: 3mm !important; padding: 4mm !important; background: #fff !important; break-inside: avoid; page-break-inside: avoid; overflow: visible !important; }
.wz-way::before, .wz-way::after, .pm-tile::before, .pm-tile::after, .wz-ico, .wz-way .bloom, .pm-tile-link { display: none !important; }
.pm-tile-vis { position: static !important; aspect-ratio: 2/1 !important; border-radius: 2mm !important; overflow: hidden !important; margin-bottom: 3mm !important; }
.pm-tile-vis img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.pm-tile-vis.is-burst { display: flex !important; align-items: center; justify-content: center; background: #fff !important; border: 1px dashed #999 !important; }
.pm-tile-vis::before, .fz-img::after, .fz-img::before { display: none !important; }
.pm-tile-vis:not(.is-burst)::after { display: none !important; }
.pm-tile-vis.is-burst::after { content: "NOT BUILT"; display: block !important; position: static !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; background: none !important; border-radius: 0 !important; font-size: 8pt; letter-spacing: .14em; color: #666; }
.pm-tile-vis.is-burst { filter: none !important; }
.pm-tile > .chip { margin-bottom: 2mm !important; }
.pm-tile-body { display: block !important; padding: 0 !important; }
.wz-way h3, .pm-tile h3 { font-size: 12pt !important; margin: 0 0 1mm !important; }
.wz-way p, .pm-tile p { font-size: 9.5pt !important; margin: 0 !important; }
.wz-way .chip { margin-bottom: 2mm !important; }

/* ------------------------------------------------- editorial collage */
.ez-in { display: block !important; }
.ez-copy { margin-bottom: 5mm !important; }
.ez-copy .btn { margin-top: 3mm !important; }
.ez-facts { display: flex !important; flex-wrap: wrap; gap: 2mm 6mm !important; margin: 3mm 0 0 !important; padding: 0 !important; list-style: none !important; font-size: 9pt !important; }
.ez-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: auto !important; grid-template-areas: none !important; gap: 3mm !important; position: static !important; break-inside: avoid; page-break-inside: avoid; }
.ez-grid figure { grid-area: auto !important; aspect-ratio: 1 !important; min-height: 0 !important; height: auto !important; border-radius: 2.5mm !important; overflow: hidden !important; position: relative !important; }
.ez-grid figure img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.ez-grid figure .fz-kind { position: absolute !important; left: 2mm; bottom: 2mm; }

/* ---------------------------------------------- community teaser (tz) */
.tz .cm-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4mm !important; }
.cm-card { break-inside: avoid; page-break-inside: avoid; position: static !important; }
.cm-card .cm-vis, .cm-vis { aspect-ratio: 1 !important; border-radius: 2.5mm !important; overflow: hidden !important; }
.cm-caps { font-size: 7.5pt !important; }

/* ------------------------------------------------- dark CTA band (bz) */
.bz .band, .band { display: block !important; min-height: 0 !important; background: #fff !important; color: #000 !important; border: 1px solid #000 !important; border-radius: 3mm !important; overflow: visible !important; break-inside: avoid; page-break-inside: avoid; }
.bz-copy, .band > div:not(.bz-vis) { padding: 4mm 6mm !important; color: #000 !important; }
.band h2, .band p, .bz-copy h2, .bz-copy p, .bz-fmt { color: #000 !important; }
.bz-vis, .band-b1, .band-b2, .band .bloom { display: none !important; }
.band .btn { margin-top: 3mm !important; }

/* --------------------------------------------------- shop status block */
.readout { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3mm !important; border-top: 1px solid #000; padding-top: 3mm; }
.readout dt { font-size: 8pt !important; letter-spacing: .12em; color: #555 !important; }
.readout dd { font-size: 11pt !important; margin: 0 !important; }
.families { padding-left: 4mm !important; }
.families li { padding-block: 1.5mm !important; margin: 0 !important; }
.families dl, .families .spec { gap: 1mm 4mm !important; font-size: 9pt !important; }

/* ------------------------------------- product detail (production) */
.obj { display: flow-root !important; }
.obj .gal { float: left !important; width: 46% !important; margin: 0 5% 4mm 0 !important; }
.obj .obj-side { display: block !important; overflow: hidden; }
.gal { position: static !important; }
.gal-main { position: relative !important; aspect-ratio: 1 !important; height: auto !important; border-radius: 3mm !important; overflow: hidden !important; }
.gal-main img { display: none !important; }
.gal-main img.on { display: block !important; position: static !important; width: 100% !important; height: 100% !important; object-fit: contain !important; opacity: 1 !important; }
.obj-side h1 { font-size: 24pt !important; margin-top: 2mm !important; }
.opts { gap: 3mm !important; margin: 4mm 0 !important; }
.swatches { gap: 2mm !important; }
.price-row .val { font-size: 12pt !important; }
.note { border: 1px solid #ccc !important; border-radius: 2mm !important; padding: 2.5mm 3mm !important; background: #fff !important; font-size: 9.5pt !important; }
.details { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3mm !important; margin-top: 6mm !important; border-top: 1px solid #000; padding-top: 3mm; }

/* ------------------------------------- product detail (showcase, pd) */
.pd, .h14 .pd { display: flow-root !important; }
.pd-stage-wrap, .h14 .pd-stage-wrap { float: left !important; width: 46% !important; margin: 0 5% 4mm 0 !important; }
.pd-side, .h14 .pd-side { display: block !important; overflow: hidden; }
.pd-side > * + * { margin-top: 3mm !important; }
.pd-stage-wrap, .h14 .pd-stage-wrap { position: static !important; top: auto !important; margin: 0 !important; }
.pd-stage-tools { margin-top: 2mm !important; }
.pd-actions, .h14 .pd-actions { position: static !important; background: none !important; padding: 3mm 0 0 !important; }
.pd-side, .h14 .pd-side { gap: 4mm !important; }
.pd-side h1 { font-size: 24pt !important; }
.pd-price .big, .pd-price .val { font-size: 16pt !important; }
.pd-opts { gap: 3mm !important; }
.pd-below { margin-top: 6mm !important; break-before: auto; }
.mchip i { -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1px solid #999 !important; }
.pd-state { font-size: 9pt !important; }

/* -------------------------------------- showcase shop (ed-layout, pc) */
.ed-layout, .h14 .ed-layout, .ed-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-areas: none !important; grid-template-rows: auto !important; gap: 6mm 5mm !important; }
.pc, .pc-lg { grid-area: auto !important; position: static !important; display: block !important; break-inside: avoid; page-break-inside: avoid; }
.pc-link, .pc-over, .pc .badge { display: none !important; }
.pc .stage-obj, .pc-lg .stage-obj, .h14 .ed-layout .pc .stage-obj { aspect-ratio: 1 !important; min-height: 0 !important; height: auto !important; transform: none !important; border-radius: 2.5mm !important; }
.pc-body { display: block !important; padding: 2.5mm 0 0 !important; }
.pc-body h3 { font-size: 12pt !important; }
.pc-body p { font-size: 9.5pt !important; }
.pc-price, .price { font-size: 11pt !important; margin-top: 1mm !important; }

/* --------------------------------------------- 3D stages → static poster */
.stage-obj { position: relative !important; overflow: hidden !important; transform: none !important; border-radius: 3mm !important; }
.stage-obj model-viewer, model-viewer, canvas { display: none !important; }
.stage-obj > img { position: static !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; z-index: auto !important; }
[hidden].print-poster, .print-poster { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; z-index: 1 !important; }
.print-no-poster { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 40mm; }
.print-no-poster::after { content: "3D PREVIEW"; display: block !important; font-size: 9pt; letter-spacing: .18em; color: #555; border: 1px solid #999; border-radius: 999px; padding: 1.5mm 4mm; }

/* ------------------------------------------------------ drawn-then-built */
.reveal3 { display: grid !important; grid-template-columns: 2fr 3fr !important; gap: 6mm !important; align-items: center !important; break-inside: avoid; page-break-inside: avoid; }
.r3-stage { position: relative !important; aspect-ratio: 1 !important; height: auto !important; min-height: 0 !important; border-radius: 3mm !important; overflow: hidden !important; background: #F1EEE8 !important; }
.r3-stage img { display: none !important; }
.r3-stage img.on { display: block !important; position: static !important; width: 100% !important; height: 100% !important; object-fit: contain !important; opacity: 1 !important; }
.r3-line { font-size: 16pt !important; min-height: 0 !important; }
.r3-line span { font-size: 10pt !important; }

/* ------------------------------------------------------ Upload & Print */
.up-head { margin-bottom: 4mm !important; }
.up-h1 { font-size: 28pt !important; }
.up-formats span { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
.up-stage, .pm .up-stage, .pm .up-stage[data-state="idle"] { position: relative !important; display: block !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; border: 1px dashed #999 !important; border-radius: 3mm !important; overflow: hidden !important; }
.up-stage:not([data-state="ready"]) .up-view { display: none !important; }
.up-stage[data-state="ready"] { aspect-ratio: 4/3 !important; border-style: solid !important; border-color: #ddd !important; }
.up-stage[data-state="ready"] .up-view { position: absolute !important; inset: 0 !important; display: block !important; }
.up-stage[data-state="ready"] .up-drop { display: none !important; }
.up-drop, .drop { position: static !important; display: block !important; padding: 10mm !important; text-align: center !important; opacity: 1 !important; }
.drop-title { font-size: 16pt !important; }
.drop-sub { font-size: 9pt !important; }
.drop input[type="file"] { display: none !important; }
.up-tools, .up-note, .up-picked .up-change { display: none !important; }
.up-picked { position: static !important; margin: 2mm 0 !important; font-size: 10pt !important; background: none !important; }
.up-stage:not([data-state="ready"]) .up-picked { display: none !important; }
.up-stage[data-state="ready"] .up-picked { display: flex !important; }
.up-dec, .up-contact, .up-field { position: static !important; }
.up-grid3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 3mm !important; }
input, select, textarea { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; border-radius: 1.5mm !important; }
.up-more { border: 1px solid #ccc !important; border-radius: 2mm !important; padding: 2mm 3mm !important; }
.up-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 3mm !important; border-top: 1px solid #000; padding-top: 3mm; margin-top: 5mm !important; }
.up-community { display: grid !important; grid-template-columns: 30mm 1fr !important; gap: 4mm !important; border: 1px solid #000 !important; border-radius: 3mm !important; padding: 3mm !important; }
.up-community[hidden] { display: none !important; }

/* ---------------------------------------------- Design & Print doorway */
.cfg-gate, .pm .cfg-gate { min-height: 0 !important; display: block !important; position: static !important; overflow: visible !important; padding: 0 !important; }
.cfg-gate-in { display: block !important; }
.gate-words { display: flex !important; flex-wrap: wrap; gap: 2mm 6mm !important; list-style: none !important; padding: 0 !important; margin: 3mm 0 !important; font-size: 10pt !important; }
.cfg-gate-form { display: none !important; }
.cfg-gate-note:empty { display: none !important; }
.gate-vis, .pm .gate-vis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-areas: none !important; grid-template-rows: auto !important; gap: 3mm !important; margin-top: 5mm !important; position: static !important; }
.gate-vis figure, .pm .gate-vis .ga, .pm .gate-vis .gb, .pm .gate-vis .gc { grid-area: auto !important; aspect-ratio: 4/3 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; border-radius: 2.5mm !important; overflow: hidden !important; position: relative !important; }
.gate-vis figure img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* -------------------------------------------------------- community */
.md-stage-wrap, .cu-side { position: static !important; top: auto !important; }
.cm-filters, .cm-tabs, .md-tabs { display: none !important; }
.cm-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5mm !important; }
.md, .cu { display: flow-root !important; }
.md-stage-wrap { float: left !important; width: 46% !important; margin: 0 5% 4mm 0 !important; }
.md-stage { aspect-ratio: 1 !important; position: relative !important; border-radius: 3mm !important; overflow: hidden !important; }
.md-stage model-viewer { display: none !important; }
.md-stage img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; }

/* --------------------------------------------------------- page breaks */
.hz, .masthead, .fz-card, .wz-way, .pm-tile, .pc, .cm-card, .band, .readout, .reveal3, .foot, .up-community { break-inside: avoid; page-break-inside: avoid; }
.obj, .pd { break-inside: auto; page-break-inside: auto; }
.sec-head, h2 + p { break-after: avoid; page-break-after: avoid; }