/* ============================================================ Ink Fusion v28 — page-specific blocks (comparison tables, verdict, checklists, calculators, wizard, tiers) ============================================================ */ /* ---- verdict banner (vs pages) ---- */ .verdict { border: 2.5px solid var(--ink); background: var(--ink); color: var(--paper); padding: 26px 30px; box-shadow: 8px 8px 0 var(--cyan); } .verdict p { font-size: 16px; line-height: 1.6; margin: 0; } .verdict strong { color: var(--yel); } /* ---- comparison table ---- */ .cmp { width: 100%; border-collapse: collapse; border: 2.5px solid var(--ink); font-size: 14.5px; } .cmp th, .cmp td { border: 2px solid var(--ink); padding: 12px 14px; text-align: left; vertical-align: top; } .cmp thead th { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-size: 16px; } .cmp thead th:nth-child(2) { background: var(--cyan); } .cmp thead th:nth-child(3) { background: var(--mag-ground); color: var(--paper); } .cmp thead th:nth-child(4) { background: var(--yel); } .cmp thead th:nth-child(5) { background: var(--orange); color: var(--ink); } .cmp tbody th { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--paper-2); white-space: nowrap; } .cmp tbody td:nth-child(2) { background: rgba(0,167,225,0.12); } .cmp-wrap { overflow-x: auto; } /* ---- choose-if checklist ---- */ .vs-check { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .vs-check .col { border: 2.5px solid var(--ink); padding: 26px; box-shadow: 6px 6px 0 var(--ink); } .vs-check .col.dtf { background: var(--cyan); } .vs-check .col.alt { background: var(--paper-2); } .vs-check h3, .vs-check h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 22px; margin-bottom: 14px; letter-spacing: -0.01em; } .vs-check ul { list-style: none; } .vs-check li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; border-top: 1px solid rgba(21,19,16,0.15); } .vs-check li:first-child { border-top: 0; } .vs-check li::before { content: "→"; position: absolute; left: 0; font-weight: 700; } @media (max-width: 760px) { .vs-check { grid-template-columns: 1fr; } } /* ---- Custom DTF calculator ---- */ .calc { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 30px; align-items: start; } @media (max-width: 900px) { .calc { grid-template-columns: 1fr; } } /* ── Garment switcher ────────────────────────────────────────────────────── Sits above the size grid because garment is the question a customer can answer instantly, and answering it makes every size below legible. It costs one row and changes no price. */ .gswitch-wrap { margin-bottom: 20px; } .gswitch-label { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .gswitch { display: flex; flex-wrap: wrap; gap: 8px; } .gopt { flex: 1 1 auto; min-width: 104px; padding: 10px 12px; cursor: pointer; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; transition: background var(--dur-state) var(--ease-state), box-shadow var(--dur-state) var(--ease-state); } @media (pointer: fine) { .gopt:hover { box-shadow: 3px 3px 0 var(--ink); } } .gopt:active { box-shadow: 1px 1px 0 var(--ink); } .gopt:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* Selected inverts to ink-on-paper rather than taking a colour. An inversion survives greyscale and colour blindness on its own, which a cyan fill does not — the same reason the preset tile carries an inset bar as well as its fill. The pattern already exists on .dtf-ai__preset.on. */ .gopt.on { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--cyan); } @media (max-width: 480px) { /* Five across cannot hold "LONG SLEEVE" on a phone; two columns can. */ .gswitch { display: grid; grid-template-columns: repeat(2, 1fr); } .gopt { min-width: 0; } } /* ── Garment preview ─────────────────────────────────────────────────────── Shows the chosen size WHERE IT ACTUALLY GOES: Mini on a sleeve, Square on the back. The point is to answer "how big is 21 x 29.7cm" in a form a person can read, which a number cannot do. The box is RESERVED. aspect-ratio holds the space before any image loads and object-fit: contain means a garment of a different shape letterboxes inside it rather than resizing it — the tiles below must never jump while someone is choosing. Nothing here may set a background: the plates are keyed to transparency, so a white fill would put a white box back behind them. */ .gpreview { margin: 0 0 20px; border: 2.5px solid var(--ink); background: var(--paper-2); box-shadow: 6px 6px 0 var(--ink); } .gpreview[hidden] { display: none; } /* The box holds its height whether or not an image is in it. Revealing the panel on first selection used to push the tile grid down 383px — the same shift-under-the-cursor problem the price rail had, and caused by the same instinct to hide a thing until it has content. The empty state fills the space AND says what the panel is for. */ .gpreview__box { height: 320px; display: flex; align-items: center; justify-content: center; } .gpreview__box img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .gpreview__box img[hidden] { display: none; } /* #6f675a measured 4.20:1 on --paper-2 at 11.5px — under the 4.5 floor for normal-size text. #67625a is 5.00 on paper and is already the grey used elsewhere in this file, so this closes the gap without adding a ninth. */ .gpreview__empty { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #67625a; } .gpreview figcaption { border-top: 2.5px solid var(--ink); background: var(--paper); padding: 9px 12px; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: #4a443a; } .gpreview figcaption b { color: var(--ink); font-family: var(--f-body); font-weight: 700; font-size: 12.5px; } @media (max-width: 620px) { .gpreview img { height: 240px; } } .presetgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .preset { border: 2.5px solid var(--ink); background: var(--paper); padding: 14px; cursor: pointer; text-align: left; font-family: var(--f-body); /* Was `transition: 0.12s` — the `all` shorthand, which also animated the background and the .preset.on colour swap below. The cyan then FADED in on select, which reads as loading rather than committing. Scoped to the two properties that actually move. */ transition: transform var(--dur-state) var(--ease-state), box-shadow var(--dur-state) var(--ease-state); } /* Hover is gated on a FINE POINTER. On touch, :hover latches after a tap and persists until the next tap elsewhere — and because the hover shadow used to be byte-identical to .preset.on's, tapping tile A then tile B left BOTH looking selected. Gate on pointer, never on width: a touchscreen laptop at 1440px is a coarse-pointer device and a width query gets it wrong. */ @media (pointer: fine) { .preset:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } } /* Touch needs its own acknowledgement now that hover is gated away: the tile presses INTO its own offset shadow, the inverse of the hover lift. */ .preset:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); } /* The primary control on the page had no focus style at all. This is the convention already used by .dtf-drop, .dtf-ai__preset and .customsize input. */ .preset:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* Selected carries THREE signals, not one: the cyan fill, a solid ink bar down the leading edge, and no transform. Colour alone failed greyscale, failed under the latched-hover bug, and failed anyone who cannot separate cyan from paper. The inset bar survives all three. */ .preset.on { background: var(--cyan); box-shadow: inset 5px 0 0 var(--ink), 4px 4px 0 var(--ink); } /* The selected tile swaps to cyan, and the muted greys chosen for the paper ground drop to ~3.49 on it. Scope the darker ink to the .on state so the unselected tiles keep their hierarchy. */ .preset.on .dim, .preset.on span { color: #151310; } /* 6.72 on --cyan */ /* 15px at line-height 1.2, not 16px at the inherited 1.5. Display type set at body leading is what made the tile read slack — a 16px Syne line was occupying 24px, roughly 11px of it leading nobody asked for. */ .preset .nm { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 15px; line-height: 1.2; letter-spacing: -0.01em; } .preset .dim { display: block; font-family: var(--f-mono); font-size: 11px; line-height: 1.4; color: #4a443a; margin: 3px 0 0; } /* What the size is FOR. One line, 22 characters max — see PRESET_USE in custom-dtf.js for why that budget exists and why the copy lives there. */ .preset .use { display: block; font-size: 11px; line-height: 1.35; color: #4a443a; margin: 5px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Price and area share one baseline, divided from the text above. This row is the whole reason the area figure is legible: Square and A4 both read $10.95, and 625 cm² / 624 cm² sitting opposite makes that read as deliberate. */ .preset .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(21,19,16,0.16); } .preset .pr { font-family: var(--f-display); font-weight: 800; font-size: 18px; line-height: 1.1; } .preset .area { font-family: var(--f-mono); font-size: 11px; color: #4a443a; white-space: nowrap; } /* The selected tile's cyan ground needs the darker ink on the footer rule too, or it sits at ~3.49:1 like the greys the rule above already fixes. */ .preset.on .foot { border-top-color: rgba(21,19,16,0.34); } @media (max-width: 620px) { .presetgrid { grid-template-columns: repeat(2, 1fr); } /* The placement line goes at 2-col. Ten repeated 22-character captions cost ~170px of phone scroll to say something the tile above already implies, and the cell is too narrow to hold it beside the name without truncating. */ .preset .use { display: none; } .preset .nm { font-size: 14px; } /* The price and the area figure sat on ONE baseline row with the area set to `white-space: nowrap`, so at 320px every one of the ten tiles pushed its area figure 17-25px PAST the card's own 2.5px border and into the gutter — measured, and sliced, because body carries `overflow-x: hidden` so there is no page-level symptom to notice. Letting the row wrap drops the figure onto its own line instead. */ .preset .foot { flex-wrap: wrap; } .preset .area { white-space: normal; } } /* ── 2026-07-14 mobile audit sent this to ONE column ≤440px, because the preset name "Oversized" at 16px could not fit a 2-col cell on a phone. ── 2026-09-16: the single-column rule is GONE. The name now steps to 14px at ≤620px, and re-measured in a browser at 320px in a 2-col grid (123px tile, 91px usable) "Oversized" fits on one line — the stated cause is removed, so the workaround goes with it. Ten stacked full-width cards cost ~1288px of scroll against ~638px two-up. Measured, not assumed, because this reverses a decision made from a real audit. What the re-measure DID find: "Full Chest" wraps to two lines at 320px — two words, not a length problem the font size can fix. Nothing truncates or overflows, and grid stretches its row, so this is accepted as cosmetic rather than papered over. If it ever needs fixing, shorten the label, don't restore the column rule. ── */ @media (max-width: 440px) { .pricepanel { padding: 22px; } } .customsize { margin-top: 22px; border-top: 2px solid var(--ink); padding-top: 22px; } .customsize .frow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: end; } .customsize label { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .customsize input, .customsize select { width: 100%; font-family: var(--f-body); font-size: 15px; padding: 11px 12px; border: 2px solid var(--ink); background: var(--paper); } .customsize input:focus, .customsize select:focus { outline: 3px solid var(--ink); } @media (max-width: 620px) { .customsize .frow { grid-template-columns: 1fr; } } .pricepanel { border: 2.5px solid var(--ink); background: var(--ink); color: var(--paper); padding: 28px; box-shadow: 10px 10px 0 var(--mag); position: sticky; top: 90px; } .pricepanel h3, .pricepanel h2 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #b7b1a4; margin-bottom: 6px; } .pricepanel .total { font-family: var(--f-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--yel); } .pricepanel .per { font-family: var(--f-mono); font-size: 12px; color: #c9c3b6; margin-top: 6px; } /* RESERVED HEIGHT. #dtf-add sits below this block inside a sticky rail, and the money rows genuinely come and go — express only when chosen, the volume discount only past a tier, add-on lines only when bought. Each is ~31px, so changing quantity across a tier boundary physically moved the buy button under the customer's cursor mid-click. 170px = FOUR ROWS, MEASURED ON PRODUCTION, not derived from the font size: a row is 37px (not the 31px this was first written for) and .lines carries ~22px of its own border and margin, so 3 rows = 133px and 4 rows = 170px. The first value tried here was 124px, which is BELOW the three-row height and therefore never bound at all — the button still moved 37px. Measure before changing it. Four rows, not the worst case: the transition that actually happens under the customer's hand is 3 -> 4, when quantity crosses the first volume tier at 10. Reserving all six possible rows would leave a dead gap on every simple order, which is the objection UI raised. Express and add-ons can still grow the panel past this, but those are deliberate choices made once, not something that moves while someone is adjusting a number. */ .pricepanel .lines { margin: 20px 0; border-top: 1px solid rgba(239,233,219,0.2); min-height: 170px; } .pricepanel .lines .l { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid rgba(239,233,219,0.12); } /* space-between alone only separates these when the value is SHORT. The shipping line's value is a sentence that fills the row, so it ran straight into its label and painted "Shipping$10.00". The gap is what actually guarantees the separation; the label must not collapse either. */ .pricepanel .lines .l > span:first-child { flex: 0 0 auto; } .pricepanel .lines .l.save { color: var(--cyan); } /* D4 — a condition on the promise (the express cut-off), not a charge. Muted so it reads as a qualifier beside the money, but #c9c3b6 on the panel's ink ground is 10.56:1 — quiet is not the same as low-contrast. */ .pricepanel .lines .l.note { color: #c9c3b6; font-size: 12.5px; } .pricepanel .lines .l b { font-family: var(--f-mono); } /* The advisory block. One paragraph, sentences joined by a middot, instead of four separate rows that each added or removed ~31px above the buy button. #c9c3b6 on --ink is 10.56:1 (already documented above) - quiet, not low contrast. min-height holds two lines so the common case does not resize the panel as conditions change; longer runs still wrap and grow, once. */ .pricepanel__fine { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: #c9c3b6; min-height: 2.9em; } .pricepanel__fine .pricepanel__stale { display: block; margin-bottom: 6px; padding-left: 9px; border-left: 3px solid var(--mag); color: var(--paper); } /* ---- trade savings calculator ---- */ .savecalc { border: 2.5px solid var(--ink); background: var(--paper-2); padding: 30px; box-shadow: 8px 8px 0 var(--cyan); } .savecalc label { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 10px; } .savecalc input[type=range] { width: 100%; accent-color: var(--mag); } .savecalc .spend { font-family: var(--f-display); font-weight: 800; font-size: 40px; } .savecalc .out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } .savecalc .out .box { border: 2.5px solid var(--ink); padding: 18px; text-align: center; } .savecalc .out .box:nth-child(1) { background: var(--cyan); } .savecalc .out .box:nth-child(2) { background: var(--mag-ground); color: var(--paper); } .savecalc .out .box:nth-child(3) { background: var(--yel); } .savecalc .out .box .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .savecalc .out .box .v { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1.1; margin-top: 4px; } /* ── 2026-07-14 mobile audit: 3 stat boxes always in a row → stack ≤560px; shrink the DTF price figure so its min-content can't widen the calc panel; min-width:0 stops any card/track from blowing past a narrow viewport. ── */ .savecalc .out > *, .tiercards > *, .calc > *, .presetgrid > * { min-width: 0; } @media (max-width: 560px) { .savecalc .out { grid-template-columns: 1fr; } .pricepanel .total { font-size: clamp(30px, 9vw, 44px); } } /* ---- tier detail cards ---- */ .tiercards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; } .tiercard { border: 2.5px solid var(--ink); padding: 24px; box-shadow: 6px 6px 0 var(--ink); } .tiercard:nth-child(1) { background: var(--paper-2); } .tiercard:nth-child(2) { background: var(--cyan); } .tiercard:nth-child(3) { background: var(--mag-ground); color: var(--paper); } .tiercard:nth-child(4) { background: var(--yel); } .tiercard .pct { font-family: var(--f-display); font-weight: 800; font-size: 44px; line-height: 1; } /* Clamped exactly like `.tier h4` in content.css: 20px flat broke "Enterprise" onto two lines in a narrow card. Same cap, so wide screens are unchanged. */ .tiercard h4, .tiercard h3, .tiercard h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.55vw, 20px); margin: 6px 0 4px; } .tiercard .th { font-family: var(--f-mono); font-size: 11px; margin-bottom: 14px; } .tiercard ul { list-style: none; } .tiercard li { font-size: 13px; padding: 6px 0 6px 18px; position: relative; border-top: 1px solid rgba(21,19,16,0.15); } .tiercard:nth-child(3) li { border-top-color: rgba(239,233,219,0.25); } .tiercard li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; } /* 820px, NOT 900px. `.tiercard` (here) and `.tier` (content.css) are the SAME four-card trade ladder with two stylesheets, and their 2-column breakpoints had drifted apart — so between 821px and 900px the identical component rendered 4-up on /pricing/ and 2-up on /trade-account/. Matched to content.css. ⚠ These two must move together; better still, collapse them into one component. The remaining differences are the `.pct` size (44 here vs 46) and the per-tier perk bullets, which only exist on this page. */ @media (max-width: 820px) { .tiercards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tiercards { grid-template-columns: 1fr; } } /* ---- multi-step wizard ---- */ .wizard { border: 2.5px solid var(--ink); background: var(--paper-2); padding: 30px; box-shadow: 8px 8px 0 var(--mag); max-width: 760px; } .stepsind { display: flex; gap: 8px; margin-bottom: 24px; } .stepsind .dot { flex: 1; height: 8px; background: var(--paper); border: 2px solid var(--ink); } .stepsind .dot.on { background: var(--cyan); } .wstep { display: none; } .wstep.on { display: block; } .wstep h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 22px; margin-bottom: 16px; letter-spacing: -0.01em; } .wnav { display: flex; justify-content: space-between; margin-top: 24px; gap: 14px; } .wdone { display: none; text-align: center; padding: 20px 0; } .wdone.on { display: block; } .wdone .tick { width: 60px; height: 60px; border: 3px solid var(--ink); background: var(--cyan); display: grid; place-items: center; font-size: 30px; margin: 0 auto 18px; } /* Mobile headline scale (must load AFTER components.css base .op clamp) */ @media (max-width: 560px) { .op { font-size: clamp(24px, 9.5vw, 38px); } .page-hero .op { font-size: clamp(24px, 9vw, 38px); } /* `white-space: normal` moved to the BASE `.op .ln` rule in components.css 2026-09-18 — it was needed at every width, not just here. */ /* multiply overprint layers turn wrapped lines into mush on small screens — swap to a single offset shadow (still reads as misregistration) */ .op .ln .c, .op .ln .m, .op .ln .y { display: none; } .op .ln .base { text-shadow: 3px 3px 0 var(--mag); } } /* Mobile nav width + stray-decoration guard */ body { overflow-x: hidden; } @media (max-width: 560px) { .nav { padding: 12px 14px; gap: 8px; } .brand { font-size: 17px; gap: 7px; } .brand .sq i { width: 6px; height: 15px; } .nav .links { gap: 10px; } .nav .cta { padding: 8px 11px; font-size: 12px; } } /* ── Custom DTF ordering UI (v28, 2026-07-09 — turnaround / add-ons / upload / notes / cart) ── */ .dtf-block { margin-top: 18px; } .dtf-block > label { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .dtf-block .opt { color: #67625a; font-weight: 400; } /* 5.00 on #efe9db (was 3.11) */ .dtf-block .req { color: var(--mag-ground); font-weight: 700; } /* 4.53 on #efe9db (was 3.45) */ .dtf-seg { display: flex; gap: 10px; flex-wrap: wrap; } /* The transition here listed `transform`, which nothing on this control ever changes, and omitted `background`, which .on DOES change — so the cyan snapped while the shadow faded and the segment transitioned inconsistently with itself. Both halves now name what actually moves. */ .dtf-seg__opt { flex: 1; min-width: 150px; text-align: left; padding: 12px 14px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; font-family: var(--f-body); transition: background var(--dur-state) var(--ease-state), box-shadow var(--dur-state) var(--ease-state); } .dtf-seg__opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .dtf-seg__opt b { display: block; font-weight: 700; font-size: 14px; } .dtf-seg__opt span { font-family: var(--f-mono); font-size: 11px; color: #4a443a; } .dtf-seg__opt.on { background: var(--cyan); box-shadow: 3px 3px 0 var(--ink); } /* Same cyan-ground problem as .preset.on: #4a443a reads 3.49 on --cyan. */ .dtf-seg__opt.on span { color: #151310; } /* 6.72 on --cyan */ .dtf-addons { display: flex; flex-direction: column; gap: 10px; } .dtf-addon { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--ink); background: var(--paper); cursor: pointer; } .dtf-addon input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--cyan); } .dtf-addon__t { font-weight: 600; font-size: 14px; } .dtf-addon__t b { font-family: var(--f-mono); } .dtf-addon__g { font-family: var(--f-mono); font-size: 11px; color: #8a8375; } .dtf-addon__n { display: block; font-size: 12px; color: #4a443a; margin-top: 3px; line-height: 1.4; } .dtf-addon.gated { opacity: 0.45; cursor: not-allowed; } .dtf-drop { border: 2px dashed var(--ink); background: var(--paper); padding: 22px 18px; text-align: center; cursor: pointer; transition: background var(--dur-state) var(--ease-state), border-color var(--dur-state) var(--ease-state); } .dtf-drop:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .dtf-drop.drag { background: #e6dfcd; } .dtf-drop.has { border-style: solid; box-shadow: 3px 3px 0 var(--ink); } /* Was a
inside a role="button" wrapper — a button containing the Remove button is a nested-interactive failure. The wrapper is now a plain drag target and THIS is the real control, so it needs the UA styles removed. */ .dtf-drop__idle { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; cursor: pointer; } .dtf-drop__idle:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; } .dtf-drop__t { display: block; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: -0.01em; } .dtf-drop__s { display: block; font-size: 12px; color: #4a443a; margin-top: 5px; line-height: 1.45; } .dtf-drop__has { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } /* paintArtwork() swaps these two panes with the `hidden` PROPERTY, but a class selector setting `display` outranks the UA's [hidden] rule, so `hidden` had no visual effect: the Remove button and filename row rendered even with no file chosen. The class+attribute selector below outranks the plain class and restores the intent for BOTH panes — __idle needs it too now that it carries its own display:block for the