/* The toning package's PURCHASE-EXPERIENCE styles (ADR-0025 §13, D.1 lane B): the fandeck wizard and the tint line chip, which the tinting extension renders behind the base's seam. Served from THIS package's wwwroot (the host's composite web root) and linked by the base's layout because the extension's IPurchaseExperience names it — the base ships no vendor's styles and names no file. Moved here verbatim from the base's storefront.css; the dialog frame (.pc-lightbox-dialog.has-configurator) and the generic chip wrapper (.od-variant*) stayed in the base, because every configurator uses them. */ /* §7 package ORDER ROWS in the configurator: balení báze | ks | kg/ks | celkem kg | cena. */ /* ONE GRID for the head and every row (client, 2026-09-17): each row used to be a grid of its own, so its `auto` tracks were measured against its own contents — the headings sat over nothing in particular and „8 kg" and „16 kg" stood in different places. The columns are declared here, once, and each row is a subgrid of them; the head keeps a transparent border so its content box is the rows' content box. SYMMETRICALLY (client, 2026-09-17, second pass): the four columns are EQUAL fractions of the row, so the data is spread evenly across its whole width instead of huddling on the left with the price pushed out to the right. Each cell then reads under its own heading: balení left, počet ks and celkem kg centred in their tracks, cena right at the row's edge. FIVE EQUAL COLUMNS (client, 21 October 2026): „kg/ks" — one tinted unit — joins between „Počet ks" and „Celkem kg". Every NUMBER (kg/ks, celkem kg, cena) is right-aligned under a right-aligned heading in tabular figures, so the decimal places stand in one place from row to row; the label reads left and the count control sits centred. */ .tw-rows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 6px; column-gap: 12px; margin-top: 10px; } .tw-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); /* fallback: no subgrid, still one grid */ grid-template-columns: subgrid; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 80%, transparent); } .tw-row-head { border-color: transparent; background: none; padding: 2px 12px; color: var(--muted); font-size: .8rem; } /* each heading over what it counts: the count is centred, the three numbers are right-aligned */ .tw-row-head span:nth-child(2) { text-align: center; } .tw-row-head span:nth-child(n+3) { text-align: right; } .tw-row-size { font-weight: 600; } /* A two-component product's two tables (PD-70): „Včetně tužidla" over the tins with their hardener, „Bez tužidla" over the tins alone. The title reads like the rows' own heading, a step stronger; under the size, the hardener the row includes. */ .tw-rows-title { margin: 16px 0 0; font-size: .95rem; font-weight: 700; } .tw-rows-title + .tw-rows { margin-top: 4px; } .tw-row-hardener { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); } .tw-qty { display: flex; align-items: center; justify-content: center; gap: 4px; } .tw-qty input { width: 56px; text-align: center; padding: 5px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; } .tw-step { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; } .tw-step:disabled { opacity: .4; cursor: default; } /* The SUM on the right — the filled tin, báze + tónování — reads as loudly as the balení on the left (client, 2026-09-17): same size, same weight, not a muted aside. */ .tw-row-unit, .tw-row-kg { color: var(--ink); font-weight: 600; white-space: nowrap; text-align: right; } .tw-row-unit.muted, .tw-row-kg.muted { color: var(--muted); font-weight: 400; } .tw-row-price { text-align: right; white-space: nowrap; font-weight: 600; } .tw-row-unit, .tw-row-kg, .tw-row-price { font-variant-numeric: tabular-nums; } .tw-row-price small { display: block; font-weight: 400; color: var(--muted); white-space: normal; } /* the note wraps in its column; the amount stays on one line (7 Nov 2026: „bez DPH · orientačně · informativní cena" ran past the row) */ /* ONE save, under the rows (Frank, 2026-09-05). The per-row cart glyph is gone: the rows ARE the order's content for this shade, and this writes them as they stand. The old .tw-row-add rule went with it — the row grid above dropped to four columns to match (five since „kg/ks", 21 October 2026). */ .tw-save { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; } .tw-save-note { color: var(--muted); } .tw-save-btn { padding: 9px 20px; font-weight: 600; } .tw-save-btn:disabled { opacity: .5; cursor: default; } /* §6 shade grid with visible codes under every swatch. */ .tc-grid-labeled { gap: 8px; } .tc-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; } .tc-cell.selected { border-color: var(--accent, var(--ochre)); } .tc-cell .tc-swatch { width: 100%; aspect-ratio: 1.6; border-radius: 7px; display: block; } /* The WHOLE name of the shade, its number included, stands under its swatch (client, 2026-09-17): it WRAPS onto as many lines as it needs and is never clipped and never ellipsised. The one-line rule this replaces turned a RAL deck into a grid of „RAL …". */ .tc-code { font-size: .68rem; color: var(--muted); max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.18; text-align: center; } /* ── the wizard: a horizontal track of 4 full-width slides, translated by the current page ── */ .tw { height: 100%; overflow: hidden; } .tw-track { display: flex; width: 400%; /* 4 slides */ height: 100%; transform: translateX(calc(var(--tw-page) * -25%)); transition: transform .34s var(--ease); } .tw-slide { width: 25%; /* = 100% of the dialog */ height: 100%; display: flex; flex-direction: column; min-height: 0; } .tw-nav { display: flex; align-items: center; gap: 10px; padding: 14px 18px 8px; flex: 0 0 auto; border-bottom: 1px solid var(--line); } .tw-back { background: none; border: none; cursor: pointer; font: inherit; color: var(--accent); font-weight: 600; padding: 4px 6px; border-radius: 8px; } .tw-back:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .tw-nav-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; } .tw-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; scrollbar-width: thin; min-height: 0; } .tw-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--card); } /* page A/D hero */ .tw-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; } .tw-hero img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: var(--panel); flex: 0 0 auto; } .tw-glyph { width: 96px; height: 96px; display: grid; place-items: center; font-size: 2.4rem; background: var(--panel); border-radius: 10px; flex: 0 0 auto; } .tw-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.16; } .tw-sub { color: var(--muted); font-size: .9rem; margin-top: 2px; } .tw-desc { font-size: .9rem; line-height: 1.5; color: color-mix(in srgb, var(--ink) 86%, var(--muted)); max-height: 8.5em; overflow-y: auto; margin: 0 0 12px; scrollbar-width: thin; } .tw-head { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 14px 0 8px; } /* page A — deck chooser (wrapping) */ .tw-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .tw-deck { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, background .15s, transform .1s; } .tw-deck:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); } .tw-deck:active { transform: scale(.98); } .tw-deck span { font-weight: 600; } .tw-deck small { color: var(--muted); font-size: .76rem; } /* page C — packages as full-width rows */ .tw-packages { display: flex; flex-direction: column; gap: 8px; } .tw-pack { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font: inherit; text-align: left; transition: border-color .15s, background .15s, transform .1s; } .tw-pack:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); } .tw-pack:active { transform: scale(.99); } .tw-pack span { font-weight: 600; font-size: 1.02rem; } .tw-pack small { color: var(--muted); font-size: .8rem; } /* recap chip (pages C, D) */ .tw-recap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .tw-recap.big { margin: 6px 0 0; } .tw-recap > div { display: flex; flex-direction: column; line-height: 1.25; } .tw-recap small { color: var(--muted); font-size: .8rem; } .tw-price { font-family: var(--font-display); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .tw-price.big { font-size: 1.05rem; } .tw-price.big b { font-size: 1.5rem; } .tw-price small { font-size: .78rem; color: var(--muted); font-weight: 500; } .tw-price.muted, .tw-price.quoting { color: var(--muted); } /* ── page B: the pickers get the whole dialog to breathe (Frank, 2026-07-24) ── */ .tw .tc-filters { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 18px; } .tw .tc-search { flex: none; width: 100%; font-size: 1rem; padding: 12px 14px; } .tw .tc-family-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tw .tc-family-label { font-size: .85rem; color: var(--muted); font-weight: 600; } .tw .tc-families { gap: 9px; flex-wrap: wrap; } .tw .tc-family { width: 32px; height: 32px; } .tw .tc-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; max-height: min(50vh, 440px); padding: 10px; background: var(--card); } /* A labelled cell is as wide as its NAME needs, not as wide as its swatch: 46px fitted „RAL" and an ellipsis, and the name under the swatch is the point of this grid (client, 2026-09-17). */ .tw .tc-grid.tc-grid-labeled { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .tw .tc-swatch { border-radius: 9px; } .tw .tc-swatch.no-preview { min-height: 44px; font-size: .74rem; } .tw .tc-more { margin-top: 10px; font-size: .82rem; } /* ── page D: a proud, generous confirmation — big centred image, title, colour, price ── */ .tw-summary { display: flex; flex-direction: column; align-items: center; text-align: center; } .tw-summary .tw-hero { flex-direction: column; gap: 14px; margin: 10px 0 20px; } .tw-summary .tw-hero img, .tw-summary .tw-hero .tw-glyph { width: min(240px, 60vw); height: min(240px, 60vw); border-radius: 14px; } .tw-summary .tw-hero .tw-glyph { font-size: 4rem; } .tw-summary .tw-title { font-size: 1.55rem; } .tw-summary .tw-sub { font-size: 1rem; } .tw-summary .tw-recap.big { justify-content: center; } .tw-summary .tw-recap.big .tc-big-swatch { width: 66px; height: 66px; } .tw-summary .tw-recap.big b { font-size: 1.1rem; } /* The summary is the screen the customer commits from, so the SHADE and the MONEY must be on it without scrolling. Between mobile and desktop the dialog is short (it tracks viewport height) and the 240px hero alone pushed the recap and the price breakdown below the fold. Scale the hero to the space available instead — the picture is the one thing on this screen that can afford to be smaller (Frank, 2026-08-08). */ @media (max-height: 860px) { .tw-summary .tw-hero { margin: 4px 0 12px; gap: 10px; } .tw-summary .tw-hero img, .tw-summary .tw-hero .tw-glyph { width: min(150px, 40vw); height: min(150px, 40vw); } .tw-summary .tw-hero .tw-glyph { font-size: 3rem; } .tw-summary .tw-title { font-size: 1.3rem; } .tw-summary .tw-sub { font-size: .92rem; } .tw-summary .tw-recap.big .tc-big-swatch { width: 50px; height: 50px; } } @media (max-height: 680px) { .tw-summary .tw-hero img, .tw-summary .tw-hero .tw-glyph { width: min(104px, 30vw); height: min(104px, 30vw); } .tw-summary .tw-title { font-size: 1.15rem; } .tw-summary .tw-recap.big .tc-big-swatch { width: 42px; height: 42px; } } .tw-breakdown { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 8px 18px 0; font-size: .85rem; color: var(--muted); } .tw-breakdown b { color: var(--ink); font-weight: 600; } .tw-breakdown.estimate { display: block; text-align: center; font-size: .8rem; line-height: 1.4; max-width: 40ch; margin: 0 auto; } /* The buyer's price policy on the last screen before "Přidat natónované" — named and quantified. */ .tw-breakdown.discount { color: #2f8f4e; } .tw-breakdown.discount b { color: #2f8f4e; } /* Signed-out price CTAs inside the wizard: the same live „Přihlásit se pro ceny" link the base's cards use. */ .tw-price-cta, .tc-more-cta { border: none; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-align: left; } .tw-price-cta:hover, .tc-more-cta:hover { color: var(--ink); } .tw-price-cta { font-size: inherit; font-weight: 600; } .tc-more-cta { font-size: inherit; } .tw-pack small.muted { color: var(--muted); opacity: .75; } /* Discount anchor on the summary: the seller's standard price, struck, so the saving has a referent. */ .tw-breakdown.anchor { color: var(--muted); } .tw-breakdown.anchor s { color: var(--muted); } .tw-price .tw-your { display: block; width: 100%; font-size: .72rem; font-weight: 500; color: #2f8f4e; } /* ══ ADR-0016 — tint configurator (BAL Tónování) ═══════════════════════════════════════════════ */ .tc { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 4px; border-top: 1px solid var(--line); } .tc-head { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; } /* fandeck strip: WRAPPING rows of card chips, capped height so a long list scrolls vertically rather than hiding cards off the right in a single horizontal rail (Frank, 2026-07-23). */ .tc-cards { display: flex; flex-wrap: wrap; gap: 6px; max-height: 108px; overflow-y: auto; padding: 2px 2px 4px; scrollbar-width: thin; } .tc-card { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; color: var(--ink); background: var(--card); transition: background .15s, border-color .15s; } .tc-card small { color: var(--muted); margin-left: 4px; } .tc-card:hover { border-color: var(--accent); } .tc-card.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .tc-card.active small { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); } /* filters: text + the colour-family dots (the closed vocabulary, shared with the agent's tags) */ .tc-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .tc-search { flex: 1 1 150px; min-width: 130px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; font: inherit; font-size: .88rem; color: var(--ink); background: var(--card); } .tc-families { display: flex; gap: 5px; } .tc-family { width: 22px; height: 22px; border-radius: 999px; cursor: pointer; padding: 0; border: 2px solid var(--line); background: var(--fam); transition: transform .12s var(--ease), border-color .15s; } .tc-family:hover { transform: scale(1.12); } .tc-family.active { border-color: var(--ink); transform: scale(1.12); } /* a family with no shades in the current card is disabled, not a dead click into "nothing matches" */ .tc-family:disabled { opacity: .28; cursor: default; filter: grayscale(.5); } .tc-family:disabled:hover { transform: none; } /* the swatch grid — hue-sorted, reads like a fan deck */ .tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; max-height: 190px; overflow-y: auto; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); scrollbar-width: thin; } .tc-swatch { aspect-ratio: 1; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); cursor: pointer; padding: 0; transition: transform .1s var(--ease); } .tc-swatch:hover { transform: scale(1.18); z-index: 1; } .tc-swatch.selected { outline: 3px solid var(--accent); outline-offset: 1px; transform: scale(1.12); } /* a no-preview shade (Telurmix rgb(0,0,0) sentinel), reachable by code search: a neutral labelled chip, never a black square. Wider so the short code reads; auto-flows in the grid. */ .tc-swatch.no-preview { grid-column: span 3; aspect-ratio: auto; min-height: 26px; background: var(--panel); border-style: dashed; color: var(--muted); font-size: .64rem; font-weight: 600; display: grid; place-items: center; overflow: hidden; padding: 0 2px; } .tc-swatch.no-preview:hover { transform: none; } .tc-big-swatch.no-preview { background: var(--panel); border: 1px dashed var(--line); } /* Add clicked before a package was chosen: pulse the picker and harden the hint — the guided alternative to a vivid-but-dead disabled button (Frank, 2026-07-24). */ .tc-packages.nudge { animation: tcNudge 0.9s ease-in-out 2; border-radius: 8px; } .tc-price.muted.nudge { color: var(--accent); font-weight: 700; } @keyframes tcNudge { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } } .tc-more { font-size: .78rem; color: var(--muted); margin-top: 2px; } /* selection row: big swatch + shade identity + package pills */ .tc-selection { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .tc-big-swatch { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: var(--shadow-sm); } .tc-sel-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 90px; } .tc-sel-meta small { color: var(--muted); font-size: .78rem; } .tc-packages { display: flex; gap: 6px; flex-wrap: wrap; } .tc-pack { border: 1px solid var(--line); border-radius: 10px; padding: 6px 11px; font: inherit; font-size: .84rem; cursor: pointer; color: var(--ink); background: var(--card); transition: background .15s, border-color .15s; } .tc-pack:hover { border-color: var(--accent); } .tc-pack.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* price + add — a STICKY footer of the scrolling details panel, so the price and CTA are ALWAYS on screen no matter how tall the fandeck/grid pushes the panel (Frank, 2026-07-23: price pushed off the bottom). Backed by the panel colour so swatches don't show through as it sticks. */ .tc-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; bottom: 0; z-index: 2; padding: 10px 0 2px; margin-top: 2px; background: linear-gradient(to top, var(--card) 74%, transparent); } .tc-price { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tc-price small { font-size: .78rem; color: var(--muted); font-family: inherit; font-weight: 500; } .tc-price.muted, .tc-price.quoting { color: var(--muted); font-size: 1rem; } .tc-estimate { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--ochre); border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; } /* ── ONE cart pictogram on the shelf (client, 2026-09-17) ───────────────────────────────────────── A tinted line's card wears the base's „configured to order" glyph (.pc-add.pc-basket, the base's storefront.css) — a WICKER BASKET, while every other place a customer adds something shows a shopping cart. The glyph is the base's markup and a tenant may not edit the base, so this package restates it: this sheet is linked AFTER the base's, so the cart wins. */ .pc-add.pc-basket { font-size: 0; } .pc-add.pc-basket::before { content: "🛒"; font-size: 1.05rem; line-height: 1; } /* the tint LINE CHIP (this extension's slot): card + shade, then the size */ .tint-chip-shade { font-weight: 600; color: var(--ink); } .tint-chip-size { color: var(--muted); } /* ── THE PHONE (26 Sep 2026 — the owner tests on his phone): the wizard held in one hand ───────────────────────────── The dialog's ✕ stands over the right end of every page's head, so the head stops short of it (the page titles ran under it). A balení row is a card: its size and its price, its weights, then the count — a thumb's-size stepper (a two-line card until „kg/ks" joined, 21 October 2026); in four equal columns the stepper overflowed its quarter of a phone and the − and + were 28px. The one save spans the width. Fields at 16px, so the page never zooms when one takes focus. */ @media (max-width: 760px) { .tw-nav { padding: 12px 60px 8px 12px; gap: 6px; } .tw-back { min-height: 40px; padding: 4px 8px; } .tw-nav-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-body { padding: 12px 14px; } .tw-hero { padding-right: 44px; } .tw-deck { min-height: 52px; } .tw .tc-search { font-size: 16px; } .tw .tc-family { width: 36px; height: 36px; } /* Two EQUAL halves (21 October 2026): the unit's facts on the left (balení báze, kg/ks), the row's totals on the right (cena, celkem kg), the stepper across the card under them. The head is hidden here, so each weight carries its own caption from data-label. */ .tw-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "size price" "unit kg" "qty qty"; row-gap: 10px; padding: 10px 12px; } .tw-row-head { display: none; } .tw-row-size { grid-area: size; } .tw-row-price { grid-area: price; } .tw-qty { grid-area: qty; justify-content: center; } .tw-row-unit { grid-area: unit; align-self: center; text-align: left; } .tw-row-kg { grid-area: kg; align-self: center; text-align: right; } .tw-row-unit::before, .tw-row-kg::before { content: attr(data-label) " "; color: var(--muted); font-weight: 400; } .tw-step { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 10px; } .tw-qty input { width: 64px; height: 44px; font-size: 16px; } .tw-save { flex-wrap: wrap; } .tw-save-btn { flex: 1 1 100%; min-height: 48px; } .tw-save-note { flex: 1 1 100%; text-align: center; } } /* ── THE FOOT'S TYPE GOES BACK TO THE BASE'S (client, 2026-09-30, fifth pass) ──────────────────────── The enlargement is REVERTED. Tasks 78 / 81 / 87 had dressed all three .shop-foot-link buttons in var(--font-display) at 1.3125rem / 700 in #000, with `white-space: nowrap` and a min() floor to keep the two long labels unbroken and on one row. The client has now asked for „Obchodní podmínky" and „Ochrana osobních údajů" to read as the SMALL PRINT they were, so the whole treatment goes: family, size, weight, the black pin on rest and hover, and with them the nowrap and the min() — those two existed ONLY to make 1.3125rem fit (task 87's own note says so), and at the base's .8rem the foot's `flex-wrap: wrap` row needs neither. The ≤760px rung was already gone in task 87. WHAT THE TWO LINKS WEAR NOW is the base's own rule and nothing of ours: `font: inherit` over .shop-foot's .8rem, colour var(--muted), var(--ink) with an underline on :hover/:focus-visible. THE THIRD LINK, „Kontakty", IS NOT IN THE FOOT ANY MORE — see the block after the next one. */ /* ── …EXCEPT THE ESPRESSO THEME'S READABILITY (task 79, kept) ──────────────────────────────────────── Task 79's fix stands, and the client asked for it to stand. The foot carries no background of its own, so it sits on .shop's, which under [data-theme="dark"] is --bg #18120e (the bal skin overrides only the accent family and the LIGHT theme — never the dark theme's bg/ink). WHAT THE REVERT CHANGES ABOUT IT, STATED HONESTLY: task 79 was rescuing #000 (1.13:1 there), and the black is gone, so the base's own resting colour is back — var(--muted) #b6a48d, which measures 7.8:1 on that flat panel and already clears AA. This rule is therefore no longer a RESCUE; it is kept because it was asked to be kept, and what it now does is lift the two links from the theme's quiet grey to its full foreground, var(--ink) #f3e7d4 (15:1 on the flat panel), at rest and on hover. A TOKEN AND NOT A HAND-PICKED COLOUR, so a later retune of the theme carries the foot with it; it is also exactly what the base does for the foot link on :hover, and one screen up for `.btn.ghost`. ONE SELECTOR IS THE WHOLE OF IT: the base has four themes (ThemeKind — Light / Dark / Contrast / Elder) and only Dark is dark; the other three keep the base's own muted/ink behaviour untouched. At (0,3,0) it outranks the base's `.shop-foot-link:hover` (0,2,0), so it holds at rest and on hover; it does NOT reach the relocated „Kontakty" pill below, whose selector is (0,5,0). */ .shop[data-theme="dark"] .shop-foot-link { color: var(--ink); } /* ── „KONTAKTY" MOVES OUT OF THE FOOT AND INTO THE TOP BAR, AS A BLUE BUTTON (client, 2026-09-30) ──── THE TOP BAR IS THE BASE'S, AND THIS PACKAGE CANNOT PUT MARKUP IN IT. ShopView draws the header itself — the logo, .page-head, the actions cluster (Vzhled · the sign-in card · the basket · the burger) and the burger's dropdown — and the tenant tier offers no slot there: IPurchaseExperience contributes exactly three COMPONENTS (Configurator, LineChip, ShelfBadge) plus a list of Stylesheets, and tenant.json carries no chrome entry for a header action. Nothing we can write renders inside .topbar. WHAT WE CAN DO: THE BUTTON ALREADY EXISTS. The foot's first .shop-foot-link IS „Kontakty" — the very control that opens the document page, carrying the base's own click handler. This block draws no new button: it MOVES that one into the header row and dresses it as a top-bar pill. There is still exactly one Kontakty control on the page and it still opens the page it always opened. WHICH ONE IT IS. The foot is `