/* ── 6a FilterTray — "clean toolbar, filters slide in from the right" ───────────────────────────── ⛔ THIS SHEET IS COMPLETE AND SELF-CONTAINED. Ruling R2 / ADR-046: each buyer skin owns its whole stylesheet, so the eight FilterTray pages load THIS FILE AND NOTHING ELSE. They no longer link css/storefront-t6.css, which is left BYTE-UNTOUCHED and still serves the 13 out-of-lease ed-* / vr-* / editorial / viewingroom / preview pages. The accepted cost is duplicated chrome across skin sheets; the owner chose that trade over a shared-CSS blast radius. ⛔ THE ABSORB IS ADDITIVE AND PROVED, NOT FREE (D26). R2's premise is that the fork removes the blast radius; measured, ONE out-of-lease consumer survives it — storefront-preview.html:13, :17, :18 loads app.css AND storefront-t6.css AND this sheet, THIS SHEET LAST — so a rule that merely TIES on specificity would now win there by source position, invisibly, on a page nobody on this run opens. Two disciplines answer that, and every rule below obeys one of them: (a) it is BYTE-IDENTICAL to the storefront-t6.css rule it duplicates (a duplicate declaration cannot change a computed value), or (b) it is SCOPED under the FilterTray root hook `body.t6-doc`, which storefront-preview.html's (:154) does not carry. The proof is a CACHE-BUSTED getComputedStyle DIFF of storefront-preview.html, pasted into html/portal/changes/0157 — never a screenshot. The instruments here have lied before: an alpha-blind contrast check, a cached stylesheet and a selector that matches nothing all report false results. ⛔ NO ft-* CLASS IS RENAMED. 11 out-of-lease pages reference ft-* class names while being styled from css/storefront-t6.css; a rename is a three-skin change ruling R1 forbids (S14). ⛔ NO TENANT BRAND LITERAL LIVES IN THIS FILE (ADR-042 / S17). The brand reads from PublishedStorefrontConfigs.BrandingJson at run time. */ /* ══════════════════════════════════════════════════════════════════════════════════════════════════ ABSORBED FROM css/storefront-t6.css, lines 18–246, BYTE FOR BYTE (R2 / D26 discipline (a)). ⛔ DO NOT EDIT ANYTHING BETWEEN THIS FENCE AND THE ONE THAT CLOSES IT. If a value here must change for the FilterTray skin, add a SCOPED override BELOW the closing fence under `body.t6-doc` — editing in place breaks byte-identity and with it the only cheap proof that storefront-preview.html did not move. css/storefront-t6.css itself stays byte-untouched (R2, criterion 41). ⭐ R2-D32 — the ten .ft-img-* fills at the end of this block are COPIED, not moved; the originals stay in storefront-t6.css because ed-browse.html reuses the literal .ft-img-* class names off that sheet. Their url()s are `../img/storefront/.jpg` and that `../` is LOAD-BEARING: a CSS url() resolves against the STYLESHEET, not the page, and this sheet lives in css/ (G513). Do not "tidy" it. ══════════════════════════════════════════════════════════════════════════════════════════════════ */ :root { /* Ground and ink */ --t6-bone: #F5F3EE; --t6-ink: #1E1A14; --t6-ink-link: #221E17; --t6-surface: #FFFFFF; --t6-placeholder: #E7E2D7; /* Accent — the only non-neutral in the system */ --t6-gold: #C9A45C; --t6-gold-deep: #A8834B; /* Secondary text */ --t6-muted: #6E6A5E; --t6-faint: #9A968C; /* Lines */ --t6-hairline: #D8D3C8; --t6-divider: #E3DED2; --t6-scrim: rgba(26, 22, 16, .38); /* Dark ground — 6c ViewingRoom only, kept here so one palette answers both grounds */ --t6-dark: #17130E; --t6-dark-raise: #221D16; --t6-dark-ink: #F1EDE4; --t6-dark-line: #3A332A; /* Type. Archivo only; the fallback chain is what a page shows for the ~200ms before the webfont lands. */ --t6-font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif; /* ⛔ 10px FLOOR. --t6-fs-eyebrow is the smallest size in the system and it is the floor itself. */ --t6-fs-eyebrow: 10px; --t6-fs-micro: 11.5px; --t6-fs-meta: 12.5px; --t6-fs-body: 13.5px; --t6-fs-lead: 15px; --t6-fs-h3: 19px; --t6-fs-h2: 26px; --t6-fs-h1: 38px; --t6-ls-eyebrow: .2em; --t6-ls-tight: -.01em; /* ⛔ 5px CAP. --t6-r-round is 50% and is ONLY for a true circle (an avatar, a dot). */ --t6-r: 4px; --t6-r-sm: 3px; --t6-r-max: 5px; --t6-r-round: 50%; --t6-gutter: 40px; } /* ── Document ───────────────────────────────────────────────────────────────────────────────────── */ body.t6-doc { margin: 0; background: var(--t6-bone); color: var(--t6-ink); font-family: var(--t6-font); font-size: var(--t6-fs-body); -webkit-font-smoothing: antialiased; } body.t6-doc a { color: inherit; text-decoration: none; } body.t6-doc a:hover { opacity: .75; } /* ── Topbar: brand left, actions right, StoreFront mark bare at the far right (no panel) ─────────── */ .t6-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--t6-gutter); border-bottom: 1px solid var(--t6-ink); } .t6-bar__brand img { height: 38px; display: block; } .t6-bar__right { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .t6-bar__mark { height: 26px; display: block; } /* The header pills (SAVED / QUOTE). The canvas set 8.5px here; the floor lifts it to 10px and the extra tracking is what keeps the label the same visual weight at the larger size. */ .t6-pill { cursor: pointer; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--t6-ink); } .t6-pill:hover { opacity: .7; } .t6-pill__lbl { font-size: var(--t6-fs-eyebrow); font-weight: 700; letter-spacing: var(--t6-ls-eyebrow); } .t6-pill__ico { position: relative; display: flex; } /* The count badge. The canvas used a 999px pill; a two-digit count is not a circle, so it takes the cap. */ .t6-badge { position: absolute; top: -7px; right: -10px; min-width: 16px; height: 16px; padding: 0 3px; display: flex; align-items: center; justify-content: center; background: var(--t6-gold); color: var(--t6-ink); font-size: var(--t6-fs-eyebrow); font-weight: 800; border-radius: var(--t6-r-max); } /* ── Ship-to. ⛔ THIS CONTROL SHIPS TODAY and three of this run's reads depend on it: public-layout.component.html:36-48 sets state.shipTo(), and browse, the saved-cards read and the detail read all send it. No turn-6 canvas option drew it, and a skin that omits it makes the out-of-territory copy the browse spec asserts UNREACHABLE. It is chrome, so it lives here, once. */ .t6-shipto { display: flex; align-items: center; gap: 7px; font-size: var(--t6-fs-meta); color: var(--t6-muted); } .t6-shipto__l { font-size: var(--t6-fs-eyebrow); font-weight: 700; letter-spacing: var(--t6-ls-eyebrow); text-transform: uppercase; } .t6-shipto select { font-family: var(--t6-font); font-size: var(--t6-fs-meta); font-weight: 700; color: var(--t6-ink); background: none; border: 0; border-bottom: 1px solid var(--t6-hairline); padding: 3px 0; } /* ── The signed-in cluster (topbar shape 3). D28: the topbar has exactly THREE shapes and all three are drawn — anonymous with registration on, anonymous with it off, and signed in. */ .t6-acct { display: flex; align-items: center; gap: 9px; font-size: var(--t6-fs-meta); font-weight: 700; } .t6-avatar { width: 26px; height: 26px; border-radius: var(--t6-r-round); background: var(--t6-gold); color: var(--t6-ink); display: flex; align-items: center; justify-content: center; font-size: var(--t6-fs-eyebrow); font-weight: 800; } /* ── Eyebrow label (SHELVES, CURATED BY THE SALES DESK, LOT 4218) ────────────────────────────────── */ .t6-eyebrow { font-size: var(--t6-fs-eyebrow); font-weight: 700; letter-spacing: var(--t6-ls-eyebrow); color: var(--t6-gold-deep); text-transform: uppercase; } /* ── Buttons. Text-style only — the brand file bans big filled boxes in headers. ─────────────────── */ .t6-btn { cursor: pointer; background: none; border: 0; padding: 0 1px 6px; font-family: var(--t6-font); font-size: var(--t6-fs-meta); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t6-ink); border-bottom: 1px solid var(--t6-gold); } .t6-btn:hover { border-bottom-color: var(--t6-ink); } .t6-btn[disabled] { color: var(--t6-faint); border-bottom-color: var(--t6-divider); cursor: not-allowed; } /* The ONE filled button in the system, for Request Access — the second half of a two-control cluster needs to read as the secondary path, and two identical underlined labels do not. Capped at 5px. */ .t6-btn--solid { background: var(--t6-ink); color: var(--t6-bone); border-bottom: 0; padding: 8px 14px; border-radius: var(--t6-r-max); } .t6-btn--solid:hover { background: var(--t6-gold-deep); } .t6-link { cursor: pointer; background: none; border: 0; padding: 0; color: var(--t6-ink-link); font-family: var(--t6-font); font-weight: 700; font-size: var(--t6-fs-meta); text-decoration: underline; text-underline-offset: 3px; } /* ── Callout — the carrier for every named empty/gone/refused/failed state in all three skins ────── */ .t6-callout { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--t6-hairline); border-left: 3px solid var(--t6-gold); border-radius: var(--t6-r); background: var(--t6-surface); padding: 18px 20px; margin: 24px 0; font-size: var(--t6-fs-body); line-height: 1.55; } /* ⛔ `.t6-callout` sets `display:flex`, which BEATS the `hidden` attribute — an element carrying `hidden` still rendered. Found 2026-08-26: ed-browse's #edZero zero-state was painted on top of a full result grid. The attribute is the API every one of these panels is toggled by, so it has to win for any element, not just this one. */ [hidden] { display: none !important; } .t6-callout strong { font-weight: 800; } .t6-callout a { text-decoration: underline; text-underline-offset: 3px; } /* A FAILURE is not an EMPTY. The left rule turns warm-red so a buyer can tell "we could not load your list" from "your list is empty" without reading — the two are indistinguishable today. */ .t6-callout--fail { border-left-color: #8C3A2E; } /* ── Modal — the carrier for the per-product Sample and Visit dialogs (L6: the basket is QUOTES ONLY, and Sample and Visit keep their own per-product modals). Used by ft/ed/vr-product.html. ─────────── */ .t6-scrim { position: fixed; inset: 0; z-index: 60; background: var(--t6-scrim); display: none; } .t6-scrim.is-open { display: block; } .t6-modal { position: fixed; z-index: 61; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; } .t6-modal.is-open { display: flex; } .t6-modal__panel { background: var(--t6-surface); border-radius: var(--t6-r-max); border: 1px solid var(--t6-hairline); box-shadow: 0 30px 70px rgba(26, 22, 16, .28); width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; } .t6-modal__hd { display: flex; justify-content: space-between; align-items: baseline; } .t6-modal__title { font-size: var(--t6-fs-h3); font-weight: 900; letter-spacing: var(--t6-ls-tight); } .t6-modal__x { cursor: pointer; background: none; border: 0; font-size: 16px; color: var(--t6-ink); } /* ── Form fields — the "who is asking" block on the anonymous paths. The endpoint's Name, Email and Company are NON-NULLABLE (BuyerRequestDtos.cs:19-29); this is where a stranger types them. ─────── */ .t6-field { display: flex; flex-direction: column; gap: 5px; } .t6-field > label { font-size: var(--t6-fs-eyebrow); font-weight: 700; letter-spacing: var(--t6-ls-eyebrow); text-transform: uppercase; color: var(--t6-gold-deep); } /* memory.md §13: a control never sits on its panel's own colour, and .t6-modal__panel's surface IS --t6-surface (#FFFFFF) — the old `background:none` + hairline border-bottom was a white field on a white card. Filled per the canvas (Verona Storefront.dc.html:239-241, the Request-Access fields on this same white panel: `background:#F5F3EE;border:1px solid #D8D3C8;border-radius:2px`), radius capped at --t6-r-sm (3px) per the 5px cap. ⚠ DARK-SKIN DEPENDENCY: css/storefront-viewingroom.css's `body.vr-doc .t6-input` rule overrides `color`/`border-bottom-color` for the dark ground but NOT `background` — that file is outside this lease, so on ViewingRoom this literal --t6-bone fill sits under --t6-dark-ink (near-white) text with no background override, which can read low-contrast. Flagged for lease escalation; not fixed here. */ .t6-input { font-family: var(--t6-font); font-size: var(--t6-fs-body); color: var(--t6-ink); background: var(--t6-bone); border: 1px solid var(--t6-hairline); border-radius: var(--t6-r-sm); padding: 9px 10px; outline: none; } .t6-input:focus { border-color: var(--t6-gold); } .t6-hint { font-size: var(--t6-fs-micro); color: var(--t6-muted); } /* ── Footer band — "Powered by VavaStone". Small, plain weight, never bold, never ".com". ────────── */ .t6-foot { border-top: 1px solid var(--t6-hairline); background: rgba(30, 26, 20, .04); padding: 22px var(--t6-gutter); text-align: center; font-size: var(--t6-fs-micro); font-weight: 400; color: var(--t6-muted); } .t6-foot a { text-decoration: underline; text-underline-offset: 3px; } /* ── Price slot. [P13] — when the storefront hides prices, this slot RESERVES SPACE and draws NOTHING. Do NOT put "Sign in for Pricing" here: under OR-4 the mask is a CONJUNCTION (StorefrontMapper.cs:71-85 — "ShowPrice = Off now means NOBODY sees a price"), so there is no branch for that CTA to live in and shipping it would re-ship a control a ruling removed. ───────────────── */ .t6-price { font-size: var(--t6-fs-meta); font-weight: 800; min-height: 1.2em; } .t6-price--masked { visibility: hidden; } /* ── Shared per-skin chrome — consolidated here (#101) from css/storefront-filtertray.css and the interim duplicate css/storefront-editorial.css carried under a lease-escalation comment (Task 7). These rules must reach ft-*, ed-* AND vr-* pages without any skin loading another skin's sheet. DECISION (two later tasks depend on this): a GROUPED SELECTOR, not a new neutral class. Verified against markup — ed-browse.html reuses the literal .ft-img-* class names (Task 7 copied them verbatim rather than inventing .ed-img-*), so the editorial skin is already reached by the .ft-img-* prefix. Only two prefixes exist in the tree: .ft-img-* (filtertray + editorial pages) and .vr-img-* (viewing-room pages). Do not invent .ed-img-* — nothing in html/portal/ uses it. ── */ /* SHELVES nav — the five collections strip. D43: prototype-only static markup, shared by 6a and 6b. */ .ft-shelves { display: flex; align-items: baseline; gap: 12px 26px; flex-wrap: wrap; padding: 16px var(--t6-gutter) 0; } .ft-shelf { cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 2px 1px 5px; font-family: var(--t6-font); font-size: var(--t6-fs-body); font-weight: 500; color: var(--t6-muted); border-bottom: 1.5px solid transparent; } .ft-shelf.is-current { font-weight: 800; color: var(--t6-ink); border-bottom-color: var(--t6-gold); } .ft-shelfnote { padding: 12px var(--t6-gutter) 0; font-size: var(--t6-fs-meta); color: var(--t6-muted); line-height: 1.5; } /* Pager note — the "Showing X of Y" line, shared chrome across all three skins' pagers. */ .ft-pager__note { font-size: var(--t6-fs-meta); color: var(--t6-faint); } /* Locale control inside the ship-to cluster — hides the caption label under 900px on every skin. */ @media (max-width: 900px) { .t6-shipto--lang .t6-shipto__l { display: none; } } /* Per-stone image fills. One rule per stone reaches every skin via its own class prefix, so no page loads another skin's sheet to get a picture. Files are not yet dropped under img/storefront/; --t6-placeholder shows through until they are. */ .ft-img-cipollino-rosso, .vr-img-cipollino-rosso { background-image: url('../img/storefront/cipollino-rosso.jpg'); } .ft-img-ivory-travertine, .vr-img-ivory-travertine { background-image: url('../img/storefront/ivory-travertine.jpg'); } .ft-img-nero-marquina, .vr-img-nero-marquina { background-image: url('../img/storefront/nero-marquina.jpg'); } .ft-img-creole-blue-white, .vr-img-creole-blue-white { background-image: url('../img/storefront/creole-blue-white.jpg'); } .ft-img-silver-travertine, .vr-img-silver-travertine { background-image: url('../img/storefront/silver-travertine.jpg'); } .ft-img-etowah-fleuri, .vr-img-etowah-fleuri { background-image: url('../img/storefront/etowah-fleuri.jpg'); } .ft-img-romblon-white, .vr-img-romblon-white { background-image: url('../img/storefront/romblon-white.jpg'); } .ft-img-bianco-carrara-c, .vr-img-bianco-carrara-c { background-image: url('../img/storefront/bianco-carrara-c.jpg'); } .ft-img-connemara-verde, .vr-img-connemara-verde { background-image: url('../img/storefront/connemara-verde.jpg'); } .ft-img-emperador-dark, .vr-img-emperador-dark { background-image: url('../img/storefront/emperador-dark.jpg'); } /* ══════════════ END OF THE ABSORBED BLOCK — everything below is 6a's own ══════════════════════════ */ /* ── R3 / [Q15] — RAW WINS, AND THE COST IS RECORDED ───────────────────────────────────────────── Canvas 6a lines :30 and :34 set the topbar's WISHLIST / QUOTES caps at `font:700 8.5px 'Archivo'`. R3 is an EXPLICIT OWNER OVERRIDE of memory.md §4 (nothing below 10px) for these eight pages, and it requires REPORTING rather than silence: both declarations go into changes/0157's divergence register with file:line. Flooring them at 10px would be a knowing deviation FROM R3 and is not an agent's call. ⛔ SCOPED TWICE. It touches ONLY the two topbar pill labels — never --t6-fs-eyebrow, which stays the system floor at 10px for every other eyebrow in the skin — and it hangs off `body.t6-doc`, which storefront-preview.html does not carry (:154). Markup: Tasks 2, 3, 4, 5, 6, 7, 8 — SEVEN pages; ft-share.html draws no Saved/Quote pills, because a link-bearer has no account and no basket. */ body.t6-doc .t6-pill__lbl { font-size: 8.5px; } /* Toolbar: search, the filter trigger, the count, Reset */ .ft-tools { display: flex; align-items: flex-end; gap: 24px; padding: 18px var(--t6-gutter) 14px; border-bottom: 1px solid var(--t6-hairline); } .ft-search { font-family: var(--t6-font); font-size: var(--t6-fs-lead); font-weight: 500; color: var(--t6-ink); background: none; border: 0; border-bottom: 1px solid var(--t6-ink); padding: 8px 2px; width: 420px; outline: none; } .ft-search::placeholder { color: inherit; opacity: .45; } .ft-trigger { cursor: pointer; background: none; border: 0; padding: 0; position: relative; display: flex; align-items: center; align-self: center; color: var(--t6-ink); } .ft-trigger:hover { opacity: .7; } .ft-count { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: var(--t6-fs-meta); font-weight: 600; color: var(--t6-muted); } /* ⛔ SORT and TYPE, the two controls the first plan draft dropped. Both exist in the SHIPPED tree — sd-browse.html:131-134 draws a three-way sort strip, and browse.component.ts:81 derives the product type tabs from the published set and filters on ?t=. The published projection carries SortRelevance/SortPriceAmount/SortAvailability/SortPopularity and the console publishes DefaultSort, which is on the buyer wire (PublicStorefrontDtos.cs:13) and consumed by NOTHING. Dropping them would have shipped three new skins that lost two live controls. [P15]. */ .ft-strip { display: flex; align-items: baseline; gap: 12px 26px; flex-wrap: wrap; padding: 12px var(--t6-gutter); border-bottom: 1px solid var(--t6-hairline); } .ft-strip__grp { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; } .ft-tab { cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 2px 1px 5px; font-family: var(--t6-font); font-size: var(--t6-fs-body); font-weight: 500; color: var(--t6-muted); border-bottom: 1.5px solid transparent; } .ft-tab.is-on { font-weight: 800; color: var(--t6-ink); border-bottom-color: var(--t6-gold); } .ft-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; } .ft-sort select { font-family: var(--t6-font); font-size: var(--t6-fs-meta); font-weight: 700; color: var(--t6-ink); background: none; border: 0; border-bottom: 1px solid var(--t6-hairline); padding: 3px 0; } /* SHELVES strip (.ft-shelves / .ft-shelf / .ft-shelfnote) — now ABSORBED above, byte-identical to css/storefront-t6.css:219-226 (R2). It is still defined there too, for the ed-* / vr-* pages that keep loading that sheet; that duplication is the trade R2 accepted. Do not redefine it here. */ /* The tray. Slides over the grid from the right; the scrim closes it. */ .ft-stage { position: relative; } .ft-tray { position: absolute; inset: 0; z-index: 45; display: none; } .ft-tray.is-open { display: block; } .ft-tray__scrim { position: absolute; inset: 0; background: var(--t6-scrim); cursor: pointer; } .ft-tray__panel { position: absolute; right: 0; top: 0; bottom: 0; width: 330px; background: var(--t6-surface); box-shadow: -30px 0 70px rgba(26, 22, 16, .22); padding: 28px 32px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; } .ft-tray__hd { display: flex; justify-content: space-between; align-items: baseline; } .ft-tray__title { font-size: var(--t6-fs-h3); font-weight: 900; letter-spacing: var(--t6-ls-tight); } .ft-tray__x { cursor: pointer; background: none; border: 0; font-size: 16px; color: var(--t6-ink); } .ft-group { display: flex; flex-direction: column; gap: 9px; } .ft-opts { display: flex; gap: 10px 18px; flex-wrap: wrap; } .ft-opt { cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 2px 1px 5px; font-family: var(--t6-font); font-size: var(--t6-fs-body); font-weight: 500; color: var(--t6-muted); border-bottom: 1.5px solid transparent; } .ft-opt.is-on { font-weight: 800; color: var(--t6-ink); border-bottom-color: var(--t6-gold); } .ft-tray__ft { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-top: 1px solid var(--t6-divider); padding-top: 18px; font-size: var(--t6-fs-meta); color: var(--t6-faint); } /* The grid — a PUBLIC INVENTORY, image-forward, never an index or a table (the brand file). */ .ft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px; padding: 30px var(--t6-gutter) 60px; } .ft-card { position: relative; display: flex; flex-direction: column; gap: 10px; } .ft-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--t6-r); border: 1px solid var(--t6-hairline); background: var(--t6-placeholder); } .ft-card__img > span { position: absolute; inset: -14%; background-size: cover; background-position: center; } .ft-card__line { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .ft-card__name { font-size: var(--t6-fs-lead); font-weight: 800; letter-spacing: var(--t6-ls-tight); } .ft-card__low { font-size: var(--t6-fs-eyebrow); font-weight: 800; color: var(--t6-gold-deep); letter-spacing: .06em; text-transform: uppercase; } .ft-card__meta { font-size: var(--t6-fs-micro); font-weight: 500; color: var(--t6-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ft-card__open { position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer; } .ft-heart { cursor: pointer; margin-left: auto; background: none; border: 0; padding: 0; display: flex; align-self: center; position: relative; z-index: 2; color: var(--t6-ink); } .ft-heart:hover { opacity: .7; } /* Per-card image fills (.ft-img-*) — ABSORBED above, byte-identical to css/storefront-t6.css:237-246 (R2-D32: COPIED, not moved — ed-browse.html reuses the literal .ft-img-* names off that sheet). */ /* Pager */ .ft-pager { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 var(--t6-gutter) 60px; } .ft-pager__pages { display: flex; gap: 14px; align-items: baseline; } /* .ft-pager__note — ABSORBED above, byte-identical to css/storefront-t6.css:229. */ /* [P16] language/ship-to media rule — ABSORBED above, byte-identical to css/storefront-t6.css:232. */ /* ── ft-product.html — the lot detail page (Task 4). ───────────────────────────────────────────── 1.55fr/.95fr two-column grid: media left (wide), buy-side rail right (narrow); collapses to one column under 820px. No new tokens — everything is a --t6-* var already defined in storefront-t6.css. */ .ft-lot { padding: 30px var(--t6-gutter) 60px; } .ft-lot__hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; } .ft-lot__hdr { display: flex; align-items: baseline; gap: 14px; } .ft-lot__cols { display: grid; grid-template-columns: 1.55fr .95fr; gap: 40px; } .ft-lot__media { min-width: 0; } .ft-lot__side { display: flex; flex-direction: column; gap: 16px; } .ft-lot__name { font-size: var(--t6-fs-h2); font-weight: 900; letter-spacing: var(--t6-ls-tight); } /* D46 — the combination picker: a vertical radiogroup of full-width rows, distinct from the tag-style .ft-opt used in the filter tray (same class, different container context, scoped here). */ .ft-combo { display: flex; flex-direction: column; gap: 8px; } .ft-combo .ft-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--t6-hairline); border-radius: var(--t6-r); background: var(--t6-surface); font-weight: 600; color: var(--t6-ink); } .ft-combo .ft-opt.is-on { border-color: var(--t6-gold); background: var(--t6-bone); font-weight: 800; } /* D8/L10 — the computed 0–3 action rail. Buttons reuse .t6-btn; this just governs the row. */ .ft-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 4px; } .ft-lot__contact { font-size: var(--t6-fs-body); color: var(--t6-muted); line-height: 1.5; margin-top: 4px; } /* The lot page's larger, labelled Save control — a modifier on the grid card's icon-only .ft-heart. */ .ft-heart--lot { align-self: flex-start; margin-left: 0; gap: 8px; font-family: var(--t6-font); font-size: var(--t6-fs-meta); font-weight: 700; color: var(--t6-ink); border: 1px solid var(--t6-hairline); border-radius: var(--t6-r); padding: 10px 16px; } .ft-heart--lot:hover { opacity: 1; border-color: var(--t6-gold); } .ft-heart--lot[aria-pressed="true"] { border-color: var(--t6-gold); color: var(--t6-gold-deep); } /* ── ft-quote.html — the basket (Task 5). Quotes only (L6); zero storage, zero endpoint. ────────── */ .ft-quote { padding: 30px var(--t6-gutter) 60px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .ft-qlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .ft-qline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 18px; border: 1px solid var(--t6-hairline); border-radius: var(--t6-r); background: var(--t6-surface); } .ft-qty { display: flex; align-items: center; gap: 8px; font-size: var(--t6-fs-meta); color: var(--t6-muted); margin-left: auto; } .ft-qty input { width: 56px; font-family: var(--t6-font); font-size: var(--t6-fs-body); color: var(--t6-ink); background: var(--t6-bone); border: 1px solid var(--t6-hairline); border-radius: var(--t6-r-sm); padding: 5px 6px; text-align: center; } .ft-qline__sum { font-weight: 800; } .ft-qfoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--t6-divider); } /* ── ft-account.html + ft-confirm.html — the account shell (Task 6). ───────────────────────────── .ft-acct is the shared page wrapper: three tabs (Saved/Requests/Account) on ft-account.html, the seven confirm-link states on ft-confirm.html. .ft-kv/.ft-reqs/.ft-req are the Account/Requests tabs. */ .ft-acct { padding: 30px var(--t6-gutter) 60px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .ft-kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; } .ft-kv dt { font-size: var(--t6-fs-eyebrow); font-weight: 700; letter-spacing: var(--t6-ls-eyebrow); text-transform: uppercase; color: var(--t6-gold-deep); align-self: center; } .ft-kv dd { margin: 0; font-size: var(--t6-fs-body); color: var(--t6-ink); align-self: center; } .ft-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ft-req { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid var(--t6-hairline); border-radius: var(--t6-r); background: var(--t6-surface); } .ft-req a { display: flex; align-items: baseline; gap: 10px; font-weight: 700; color: var(--t6-ink); } /* ⛔ Mobile. memory.md's responsive rule and the prototype responsive skill: the 4-up grid collapses, the tray becomes full-bleed, and the 420px search field cannot stay 420px at 375px. */ @media (max-width: 1100px) { .ft-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .ft-grid { grid-template-columns: repeat(2, 1fr); } .ft-tools { flex-wrap: wrap; gap: 14px; } .ft-search { width: 100%; } .ft-sort { margin-left: 0; } .ft-lot__cols { grid-template-columns: 1fr; } .ft-qline { gap: 10px 14px; } .ft-qty { margin-left: 0; } } @media (max-width: 520px) { :root { --t6-gutter: 18px; } .ft-grid { grid-template-columns: 1fr; } .ft-tray__panel { width: 100%; padding: 22px 18px; } .ft-shelves { gap: 10px 16px; } .ft-kv { grid-template-columns: 1fr; } .ft-req { flex-direction: column; align-items: flex-start; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════════ NEW FOR 2026-08-27. ⛔ EVERY RULE BELOW NAMES THE TASK THAT SHIPS ITS MARKUP. A rule with no markup is half of G499 — CSS shipped in three sheets with no markup anywhere, 178 rules matching nothing, while build and tests stayed green and the change file asserted the opposite. If you add a rule here, name its consumer; if the consumer never ships, ESCALATE rather than leave the rule. ══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* D19 — the three-owner card meta. The separator is CSS, not text, so an EMPTY span (a gated Availability, a masked axis) leaves no orphan " · ". Markup: Tasks 2, 3, 4, 6. */ .ft-card__meta > span:not(:empty) ~ span:not(:empty)::before { content: ' · '; } /* D18b — a pager edge is DISABLED, never a silent clamp. The absorbed block styles .t6-btn[disabled] but not .t6-link[disabled], and Previous / Next are .t6-link. Markup: Task 3. */ .t6-link[disabled] { color: var(--t6-faint); text-decoration-color: var(--t6-divider); cursor: not-allowed; } /* D19 — the lot's origin / quarry / block line, split off the three-owner meta above it so each half can carry its own owner comment. Markup: Task 4. */ .ft-lot__origin { font-size: var(--t6-fs-micro); font-weight: 500; color: var(--t6-muted); } /* R5 / R2-D26 / D13 — the SENDER'S SHARE PREVIEW: an in-page state on ft-product.html, never a page. ⛔ TWO SHARE THINGS, AND THEY MUST NOT BE MERGED: this previews a LOT for its sender; ft-share.html is the RECIPIENT's landing page and shows a PROJECT. Markup: Task 4. */ .ft-share { padding: 30px var(--t6-gutter) 60px; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .ft-share__url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ft-share__url input { flex: 1 1 320px; min-width: 0; font-family: var(--t6-font); font-size: var(--t6-fs-meta); color: var(--t6-muted); background: var(--t6-bone); border: 1px solid var(--t6-hairline); border-radius: var(--t6-r-sm); padding: 9px 10px; } /* D7 — the request DETAIL, an in-page state on ft-account.html at ?req=#requests. Markup: Task 6. */ .ft-detail { display: flex; flex-direction: column; gap: 16px; } .ft-detail__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ── D12 — ft-project.html. EVERY rule from here down replaces something the source page got from css/app.css, which the two new pages deliberately DO NOT LOAD. A dialog ported onto the absent js/app.js engine opens for nobody and throws nothing — the G499 shape this module has already shipped three times. Markup: Task 8 unless stated otherwise. */ .ft-prj { padding: 24px var(--t6-gutter) 60px; display: flex; flex-direction: column; gap: 18px; } .ft-prj__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .ft-prj__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ft-prj__sub { font-size: var(--t6-fs-meta); color: var(--t6-muted); } .ft-prj__pick { display: flex; align-items: center; gap: 8px; } .ft-prj__pick select { font-family: var(--t6-font); font-size: var(--t6-fs-meta); font-weight: 700; color: var(--t6-ink); background: none; border: 0; border-bottom: 1px solid var(--t6-hairline); padding: 3px 0; } /* Room / area tabs — the same visual grammar as .ft-shelf so the family reads as one system. Replaces app.css's .subtabs, whose [data-tabs] engine lives in js/app.js, is NOT loaded here, and is document-wide rather than scoped to the strip that was clicked (G438). Markup: Task 8. */ .ft-rooms { display: flex; align-items: baseline; gap: 12px 26px; flex-wrap: wrap; border-bottom: 1px solid var(--t6-hairline); padding-bottom: 10px; } .ft-room { cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 2px 1px 5px; font-family: var(--t6-font); font-size: var(--t6-fs-body); font-weight: 500; color: var(--t6-muted); border-bottom: 1.5px solid transparent; } .ft-room.is-on { font-weight: 800; color: var(--t6-ink); border-bottom-color: var(--t6-gold); } /* D10 — the project card's status badge and the R14.3 promotion control. The control is a LOCAL forward-and-back cycle with NO PERSISTENCE, bucket C: the alternative is a column, and a nullable ProjectId on the saved row needs TWO partial unique indexes rather than one wider one, or it silently stops enforcing anything for un-projected saves. Markup: Task 8. */ .ft-status { display: inline-flex; align-items: center; gap: 6px; } .ft-status__now { font-size: var(--t6-fs-eyebrow); font-weight: 800; letter-spacing: var(--t6-ls-eyebrow); text-transform: uppercase; color: var(--t6-gold-deep); } .ft-status__step { cursor: pointer; background: none; border: 1px solid var(--t6-hairline); border-radius: var(--t6-r-sm); color: var(--t6-ink); font-family: var(--t6-font); font-size: var(--t6-fs-eyebrow); font-weight: 700; line-height: 1; padding: 3px 6px; } .ft-status__step:hover { border-color: var(--t6-gold); } /* The sender's per-item note — bucket C on both new pages (R12's Product Note has no owning field anywhere). Markup: Tasks 8 and 9. */ .ft-note { font-size: var(--t6-fs-micro); color: var(--t6-muted); line-height: 1.5; border-left: 2px solid var(--t6-divider); padding-left: 10px; } /* ⭐ R15's switch — "Visible to Your Client in the Shared View" on the Product Note dialog. Its markup is deliberately OUTSIDE .t6-field (that selector's ">label" child rule uppercases and letter-spaces a full sentence, G477), which is right — but it then had NO rule at all, so the checkbox and its sentence rendered as bare inline content. memory.md §5: a toggle is [switch][label] on one row, small gap, and the label is NOT bold. Markup: Task 8 (ft-project.html:440). Read by Task 9's ft-share.html — this is the visible half of a two-part obligation, so it may not look like an afterthought. */ .ft-note-vis { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--t6-fs-meta); font-weight: 400; color: var(--t6-ink); line-height: 1.45; margin: 2px 0 10px; } .ft-note-vis input { margin: 2px 0 0; flex: none; accent-color: var(--t6-gold); cursor: pointer; } /* Pushes the trailing action in a card's meta row to the far edge — without it the two .t6-link buttons (Note / Remove) render flush against each other, which reads as one control. Markup: Task 8, 7 uses in ft-project.html's cards. ⛔ SCOPED WITH :has(), NOT BY PAGE OR POSITION, and the reason matters. `.ft-card__meta` is a NOWRAP TEXT row everywhere else (it carries the ' · ' separators at :455 and ellipsises), so making it flex unconditionally would change the meta line on all eight pages. Scoping to `.ft-prj` would still catch ft-project's own TWO text-shaped meta rows (:158, :254) among its fifteen. Only the seven rows that actually hold a spacer become flex. `:has()` is house idiom here — 24 uses in html/portal/css. Named rather than `margin-left:auto` on the last child, because a third action would silently re-point a positional rule (the same reason the project bans nth-child column selectors). */ .ft-card__meta:has(> .spacer) { display: flex; align-items: center; } .ft-card__meta > .spacer { flex: 1 1 auto; } /* Segmented picker — the Share dialog's Can Comment / View Only (the control that PRODUCES ft-share.html's two variants) and the Quote dialog's Request a Quote / Register Interest. Replaces app.css's .seg. Markup: Tasks 8 and 9. */ .ft-seg { display: flex; border: 1px solid var(--t6-hairline); border-radius: var(--t6-r); overflow: hidden; width: max-content; max-width: 100%; } .ft-seg button { cursor: pointer; background: var(--t6-surface); border: 0; padding: 8px 14px; font-family: var(--t6-font); font-size: var(--t6-fs-meta); font-weight: 700; color: var(--t6-muted); } .ft-seg button + button { border-left: 1px solid var(--t6-hairline); } .ft-seg button.is-on { background: var(--t6-bone); color: var(--t6-ink); } /* Room chips in the New Project dialog. Replaces app.css's .ff-chip. ⚠ NOT .subtabs--choice, which is a TWO-COLUMN grid on purpose and orphans a third option (G434) — five rooms would render 2+2+1. Markup: Task 8. */ .ft-chips { display: flex; gap: 8px; flex-wrap: wrap; } .ft-chip { cursor: pointer; background: var(--t6-surface); border: 1px solid var(--t6-hairline); border-radius: var(--t6-r); padding: 6px 12px; font-family: var(--t6-font); font-size: var(--t6-fs-meta); font-weight: 600; color: var(--t6-muted); } .ft-chip.is-on { border-color: var(--t6-gold); color: var(--t6-ink); font-weight: 800; } /* Compare Products table. ⚠ SKILL DEVIATION, FLAGGED NOT IGNORED: the html-css SKILL's table HARD CONSTRAINTS (mono uppercase headers on var(--bg-2), right-aligned last column, .data-table) describe the PORTAL surface and its token system. This sheet has none of those tokens and the buyer skin ships no .data-table anywhere. Markup: Task 8. */ .ft-cmp__wrap { overflow-x: auto; } .ft-cmp { width: 100%; border-collapse: collapse; font-size: var(--t6-fs-meta); } .ft-cmp th, .ft-cmp td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--t6-divider); vertical-align: top; } .ft-cmp thead th { font-size: var(--t6-fs-eyebrow); font-weight: 800; letter-spacing: var(--t6-ls-eyebrow); text-transform: uppercase; color: var(--t6-gold-deep); } .ft-cmp td.ft-cmp__attr { font-weight: 700; color: var(--t6-muted); white-space: nowrap; } /* Multi-line input. app.css's .textarea does not exist here. Markup: Tasks 8 and 9. */ .ft-textarea { font-family: var(--t6-font); font-size: var(--t6-fs-body); color: var(--t6-ink); background: var(--t6-bone); border: 1px solid var(--t6-hairline); border-radius: var(--t6-r-sm); padding: 9px 10px; outline: none; resize: vertical; } .ft-textarea:focus { border-color: var(--t6-gold); } /* D13 — ft-share.html, the RECIPIENT's landing page. Markup: Task 9. */ .ft-shr { max-width: 1000px; margin: 0 auto; padding: 0 var(--t6-gutter) 60px; display: flex; flex-direction: column; gap: 26px; } .ft-shr__hero { display: flex; flex-direction: column; gap: 8px; padding-top: 28px; } .ft-shr__ro { display: inline-flex; align-items: center; gap: 7px; } .ft-shr__prep { font-size: var(--t6-fs-body); color: var(--t6-muted); } .ft-shr__meta { display: flex; gap: 10px 18px; flex-wrap: wrap; font-size: var(--t6-fs-meta); color: var(--t6-muted); } .ft-shr__room { display: flex; flex-direction: column; gap: 12px; } .ft-shr__room h2 { margin: 0; font-size: var(--t6-fs-h3); font-weight: 900; letter-spacing: var(--t6-ls-tight); } .ft-fb { border: 1px solid var(--t6-hairline); border-radius: var(--t6-r); background: var(--t6-surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; } .ft-fb__acts { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } /* .ft-grid carries the page's own gutter padding; inside these two wrappers the wrapper already owns it. Markup: Tasks 8 and 9. */ .ft-prj .ft-grid, .ft-shr .ft-grid { padding: 0; } /* Mobile for everything added above — memory.md's responsive rule and the prototype responsive skill. */ @media (max-width: 820px) { .ft-prj__hd { align-items: flex-start; } .ft-cmp { font-size: var(--t6-fs-micro); } } @media (max-width: 520px) { .ft-prj { padding: 18px var(--t6-gutter) 48px; } .ft-rooms { gap: 10px 16px; } .ft-seg { width: 100%; } .ft-seg button { flex: 1; text-align: center; } .ft-detail__hd { flex-direction: column; align-items: flex-start; } .ft-share__url input { flex-basis: 100%; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════════ TASK 11 — THE CANVAS FIDELITY CORRECTIONS (R10: the canvas owns LOOK). Every rule below closes ONE numbered row of docs/superpowers/runs/2026-08-27-storefront-6a-filtertray/06-canvas-fidelity.md § "Divergence rows", and names the canvas file:line it was measured from. The measurement tool is .../tools/canvas-fidelity.mjs; re-running it re-proves every one of them. ⛔ ALL OF THEM HANG OFF `body.t6-doc`, which storefront-preview.html's (:154) does not carry — so the one out-of-lease consumer of this sheet cannot move (D26). ⛔ NOTHING HERE CHANGES PAGE STRUCTURE. Rows classed `structure` or `proportion` are recorded in the MD and NOT corrected here: a CSS rule with no markup is the other half of G499. ⚠ THREE CANVAS COLOURS ARE DELIBERATELY *NOT* ADOPTED (rows 5, 6-colour, 9-colour, 40) because compositing them measured BELOW the 4.5:1 floor. They are OPEN rows carrying their measured ratio, for the owner — never silently normalised, never silently defended (R3). ══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* Row 1 — the topbar caps track at .12em, not the system eyebrow's .2em. Verona Storefront.dc.html:30,:34 */ body.t6-doc .t6-pill__lbl { letter-spacing: .12em; } /* Rows 6 (size half) + 7 — the Powered-by band's type size and its band padding. ⚠ The band's GROUND (#EAE6DC) and INK (#8A857A) are rows 5 and 6-colour and are NOT applied: measured, #8A857A on #EAE6DC is 2.95:1 and even the current #6E6A5E on #EAE6DC is 4.33:1, both under the floor. Verona Storefront.dc.html:251 */ body.t6-doc .t6-foot { font-size: 11px; padding: 13px var(--t6-gutter); } /* Row 8 — the "{count} of {total} lots" line. Verona Storefront.dc.html:47 */ body.t6-doc .ft-count { font-size: 13px; } /* Row 9 — the shelf strip. TWO defects in one row and only one of them is a canvas value: (a) `.ft-shelf` is an , and the absorbed `body.t6-doc a { color: inherit }` (:99, specificity 0-1-2) BEATS `.ft-shelf { color: var(--t6-muted) }` (0-1-0) — so every inactive shelf renders at full INK and the active shelf's only remaining signal is its 1.5px gold underline. This restores the rule the sheet already meant to apply. `:not(.is-current)` keeps the ACTIVE shelf's own colour winning. (b) size 13px, not --t6-fs-body's 13.5px. ⚠ The canvas's literal inactive colour is #9A968C, measured at 2.71:1 on the bone ground — NOT adopted. That half stays an OPEN row. Verona Storefront.dc.html:54 + T3.d.off at :823 */ body.t6-doc .ft-shelf { font-size: 13px; } body.t6-doc .ft-shelf:not(.is-current) { color: var(--t6-muted); } /* Row 11 — the shelf note's eyebrow tracks tighter than the system eyebrow. Verona Storefront.dc.html:58 */ body.t6-doc .ft-shelfnote .t6-eyebrow { letter-spacing: .16em; } /* Rows 14 + 15 — the tray's facet options: 13px, and the ACTIVE weight is T3.d.on's 700, not 800. Scoped to `.ft-opts` so ft-product.html's `.ft-combo .ft-opt` radiogroup (a different control that happens to share the class) is untouched. Verona Storefront.dc.html:73 + T3.d at :819-824 */ body.t6-doc .ft-opts .ft-opt { font-size: 13px; } body.t6-doc .ft-opts .ft-opt.is-on, body.t6-doc .ft-shelf.is-current { font-weight: 700; } /* Row 16 — "{n} lots match" in the tray footer. Verona Storefront.dc.html:79 */ body.t6-doc .ft-tray__ft { font-size: 12px; } /* Rows 22 + 23 — the lot page's top padding and its two-column gutter. Verona Storefront.dc.html:110,:114 */ body.t6-doc .ft-lot { padding-top: 24px; } body.t6-doc .ft-lot__cols { column-gap: 44px; } /* Rows 25 + 26 — the lot H1. 46px/-.025em is the single largest LOOK difference the pass measured: the page shipped at --t6-fs-h2 (26px), which is 20px smaller than the canvas's headline. ⛔ Scoped INSIDE `.ft-lot` on purpose — ft-product.html's share-preview H1 carries the same class from OUTSIDE that container (its own comment says so), and the canvas gives that one 27px (row 49, a `structure` row left uncorrected). Verona Storefront.dc.html:117 */ body.t6-doc .ft-lot .ft-lot__name { font-size: 46px; letter-spacing: -.025em; } /* Row 37 — the back link. TWO defects, same family as row 9(a): `a.t6-link` loses `.t6-link`'s underline to `body.t6-doc a { text-decoration: none }` (:99, 0-1-2 beats 0-1-0), so the three in the family (ft-account, ft-product, ft-share) render as undecorated text. Restored, plus the canvas's 13.5px on the lot page's own back link. Verona Storefront.dc.html:112 */ body.t6-doc a.t6-link { text-decoration: underline; } body.t6-doc .ft-lot__hd .t6-link { font-size: 13.5px; } /* Rows 42 + 43 + 44 — the share URL field. The canvas sets it in ui-monospace on WHITE at 12/14 padding; a URL is a machine string and the canvas types it as one. Verona Storefront.dc.html:146 */ body.t6-doc .ft-share__url input { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--t6-surface); color: var(--t6-ink); padding: 12px 14px; } /* Rows 52 + 53 — the basket page's top padding and its H1. Verona Storefront.dc.html:171,:176 */ body.t6-doc .ft-quote { padding-top: 26px; } body.t6-doc .ft-quote .ft-lot__name { font-size: 34px; } /* Rows 55 + 56 + 57 + 59 — the basket line. The canvas's line card is a 2px-radius white strip on the lighter divider hairline, padded asymmetrically to sit tight against its thumbnail. Verona Storefront.dc.html:183,:185 */ body.t6-doc .ft-qline { border-color: var(--t6-divider); border-radius: 2px; padding: 10px 16px 10px 10px; } body.t6-doc .ft-qline .ft-card__name { font-size: 14.5px; } /* Row 66 — the DIALOG scrim is .55, not the tray scrim's .38. `--t6-scrim` correctly serves the tray (canvas :62, also .38); only `.t6-scrim`, the modal one, moves. Verona Storefront.dc.html:231 */ body.t6-doc .t6-scrim { background: rgba(26, 22, 16, .55); } /* Rows 68 + 69 + 71 — the dialog panel and its title. Verona Storefront.dc.html:232,:234 */ body.t6-doc .t6-modal__panel { border-radius: 4px; padding: 30px 32px; gap: 14px; } body.t6-doc .t6-modal__title { font-size: 21px; } /* Rows 73 + 74 — the dialog fields. ⭐ The sheet's own comment at :205 CITES this exact canvas line for the fill and then caps the radius at --t6-r-sm (3px); the canvas says 2px, which is inside the 5px cap, so there was nothing to cap. Verona Storefront.dc.html:239-241 */ body.t6-doc .t6-input { padding: 12px 14px; border-radius: 2px; } /* Row 76 — the topbar caps are UPPERCASE in the canvas ("WISHLIST" / "QUOTES"); the labels themselves are the SHIPPED vocabulary (Saved / Quote — R8 owns the words, R10 owns the case). Verona Storefront.dc.html:30,:34 */ body.t6-doc .t6-pill__lbl { text-transform: uppercase; } /* Row 77 — the dossier column's stack rhythm. Verona Storefront.dc.html:116 */ body.t6-doc .ft-lot__side { row-gap: 13px; }