" to every | .
============================================================ */
@media (max-width: 640px) {
/* Neutralise the scroll wrapper — cards carry their own borders */
.table-wrap {
overflow-x: visible;
border: none;
background: transparent;
}
/* Visually hide thead while keeping it in the accessibility tree */
.table-standard thead,
.table-compact thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Flatten table structure to block flow */
.table-standard,
.table-compact,
.table-standard tbody,
.table-compact tbody,
.table-standard tr,
.table-compact tr,
.table-standard td,
.table-compact td {
display: block;
width: 100%;
}
/* Each row becomes a card */
.table-standard tr,
.table-compact tr {
border: 1px solid var(--color-border-default);
border-radius: var(--card-radius);
margin-bottom: var(--spacing-sm);
background: var(--table-row-bg);
padding: var(--table-padding-compact-y) 0;
}
/* Remove zebra-stripe — card border defines the row boundary */
.table-standard tr:nth-child(even) td,
.table-compact tr:nth-child(even) td {
background: transparent;
}
/* Each cell is a label/value flex row */
.table-standard td,
.table-compact td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--spacing-md);
background: transparent;
border-bottom: none;
padding: var(--table-padding-compact-y) var(--table-padding-compact-x);
text-align: right;
}
/* Remove the last-child border override (no per-td borders in card mode) */
.table-standard tr:last-child td,
.table-compact tr:last-child td {
border-bottom: none;
}
/* Column label rendered from data-label attribute — mirrors | styling */
.table-standard td::before,
.table-compact td::before {
content: attr(data-label);
flex-shrink: 0;
text-align: left;
color: var(--table-header-text);
font-weight: var(--table-header-font-weight);
font-size: var(--font-size-micro);
letter-spacing: var(--letter-spacing-allcaps);
text-transform: uppercase;
}
/* Suppress empty cells — no ghost rows */
.table-standard td:empty,
.table-compact td:empty {
display: none;
}
/* ----------------------------------------------------------
TFOOT TOTALS ROW — stack-to-card mode
----------------------------------------------------------
In card mode | rows render as cards alongside
cards. The spanning label cell (e.g. Общо | )
has no data-label so its ::before pseudo-element produces an
empty string — it renders as a right-aligned orphan.
Fix: give the tfoot card a stronger top border so it reads as
"the summary of this stack", then restyle the colspan/label
cell as a full-width left-aligned uppercase section heading
(matching the column-label micro type already used in ::before).
Value cells keep the normal label/value flex row layout.
Selector logic:
tfoot tr — the card container (stronger top border)
tfoot td[colspan] — the spanning label (e.g. "Общо")
tfoot td:not([colspan]) — value cells (keep flex row, normal)
td:empty { display:none } does NOT hide the "Общо" cell because
it contains text — the selector targets truly empty elements only.
-- ---------------------------------------------------------- */
.table-standard tfoot,
.table-compact tfoot {
display: block;
width: 100%;
}
/* Totals card: same card shell as tbody rows but with a stronger
top border that visually anchors it as the summary card. */
.table-standard tfoot tr,
.table-compact tfoot tr {
border-top: 2px solid var(--color-border-strong);
border-color: var(--color-border-strong);
margin-top: var(--spacing-xs);
}
/* The spanning label cell ("Общо" / "Всичко") — render as a
full-width uppercase micro heading, left-aligned, not a
data row. The flex layout is overridden to block so it
spans the full card width without a right-side value slot. */
.table-standard tfoot td[colspan],
.table-compact tfoot td[colspan] {
display: block;
text-align: left;
color: var(--table-header-text);
font-weight: var(--table-header-font-weight);
font-size: var(--font-size-micro);
letter-spacing: var(--letter-spacing-allcaps);
text-transform: uppercase;
padding-bottom: var(--table-padding-compact-y);
border-bottom: 1px solid var(--color-border-default);
margin-bottom: var(--table-padding-compact-y);
}
/* Suppress the ::before pseudo on the colspan cell — it has no
data-label attribute so content:attr(data-label) would be empty,
producing a ghost label slot before "Общо". */
.table-standard tfoot td[colspan]::before,
.table-compact tfoot td[colspan]::before {
content: none;
}
}
}
@layer components {
/* === components/form-field/form-field.css === */
/* ============================================================
FORM FIELDS
============================================================ */
.form-group { margin-bottom: var(--spacing-lg); }
.form-label {
display: block;
font-size: var(--input-label-font-size);
font-weight: var(--input-label-font-weight);
color: var(--input-label-color);
margin-bottom: var(--spacing-sm);
}
.form-input,
.form-select,
.form-textarea {
display: block;
width: 100%;
min-width: 0;
min-height: var(--input-min-height);
padding: var(--input-padding-y) var(--input-padding-x);
font-family: var(--input-font-family);
font-size: var(--input-font-size);
color: var(--input-text);
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--input-radius);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--input-border-hover); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--input-border-focus);
box-shadow: var(--input-focus-ring);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-hint { font-size: var(--font-size-micro); color: var(--input-hint-color); margin-top: var(--spacing-xs); }
.form-error { font-size: var(--font-size-micro); color: var(--input-error-color); margin-top: var(--spacing-xs); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
}
@layer components {
/* === components/split-layout/split-layout.css === */
/* ============================================================
RESPONSIVE SPLIT LAYOUTS
Two-column layouts that collapse to a single column on mobile.
minmax(0, …) lets each track shrink below its content's
intrinsic width, so long strings (IBANs, prices) never force
horizontal page overflow before the collapse breakpoint.
Replaces hardcoded inline `grid-template-columns` in templates.
============================================================ */
.split-detail { /* main content + sidebar (order / product review) */
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: var(--spacing-xl);
align-items: start;
}
.split-summary { /* cart / checkout: content + order summary */
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: var(--spacing-xl);
align-items: start;
}
.split-even { /* generic two-up that should stack on mobile */
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--spacing-md);
align-items: start;
}
/* Auto-collapsing metric grid — no fixed column count, no breakpoint needed. */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-md);
}
/* Label/value spec list (replaces inline `140px 1fr` dl grids).
Flexible label column + shrinkable value column so long values never
force overflow; stacks to a single column on small phones. */
.spec-list {
display: grid;
grid-template-columns: minmax(80px, max-content) minmax(0, 1fr);
gap: var(--spacing-sm) var(--spacing-lg);
}
@media (max-width: 480px) {
.spec-list { grid-template-columns: 1fr; gap: var(--spacing-xs); }
.spec-list dt { margin-top: var(--spacing-sm); }
.spec-list dt:first-child { margin-top: 0; }
}
}
@layer components {
/* === components/age-gate/age-gate.css === */
/* ============================================================
AGE GATE MODAL
============================================================ */
.age-gate-overlay {
position: fixed;
inset: 0;
background: var(--modal-overlay-bg);
z-index: var(--z-modal-overlay);
display: flex;
align-items: center;
justify-content: center;
}
.age-gate-overlay[hidden] {
/* Respect the native hidden attribute — without this, `display: flex` above wins
and the modal stays open even after JS sets [hidden] on confirm. */
display: none;
}
.age-gate-modal {
background: var(--modal-bg);
border-radius: var(--modal-radius);
box-shadow: var(--modal-shadow);
max-width: var(--modal-max-width-sm);
width: 90%;
padding: var(--modal-padding);
text-align: center;
}
.age-gate-modal__logo {
margin: 0 auto var(--spacing-lg);
width: 48px;
}
.age-gate-modal__title {
font-family: var(--font-display);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-display-light);
margin-bottom: var(--spacing-md);
}
.age-gate-modal__copy {
font-size: var(--font-size-small);
color: var(--color-text-muted);
margin-bottom: var(--spacing-xl);
line-height: var(--line-height-editorial);
}
.age-gate-modal__year-input {
width: 120px;
margin: 0 auto var(--spacing-lg);
text-align: center;
font-size: var(--font-size-h4);
}
.age-gate-modal__note {
font-size: var(--font-size-micro);
color: var(--color-text-muted); /* was: text-subtle (oak 3.88:1 on white — WCAG FAIL); muted (walnut) ≈ 5.6:1 passes AA */
margin-top: var(--spacing-lg);
}
/* Generic Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: var(--modal-overlay-bg);
z-index: var(--z-modal-overlay);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.modal {
background: var(--modal-bg);
border-radius: var(--modal-radius);
box-shadow: var(--modal-shadow);
max-width: var(--modal-max-width-md);
width: 90%;
padding: var(--modal-padding);
max-height: 90vh;
overflow-y: auto;
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-lg);
}
.modal__title {
font-family: var(--font-display);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-display-regular);
margin: 0;
}
.modal__close {
background: none;
border: none;
font-size: var(--font-size-h4); /* M3 fix: was bare 1.5rem → --font-size-h4 (icon/glyph close × button) */
color: var(--color-text-muted);
cursor: pointer;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: background var(--duration-fast);
}
.modal__close:hover { background: var(--color-surface-sunk); }
}
@layer components {
/* === components/pagination/pagination.css === */
/* ============================================================
PAGINATION
============================================================ */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-xl) 0;
}
.pagination__item {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
font-size: var(--font-size-small);
color: var(--color-text-primary);
text-decoration: none;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.pagination__item:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); text-decoration: none; }
.pagination__item--active { background: var(--color-accent-primary); border-color: var(--color-accent-primary); color: var(--color-text-on-accent); }
}
@layer components {
/* === components/breadcrumb/breadcrumb.css === */
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-small);
color: var(--color-text-muted);
padding: var(--spacing-md) 0;
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-primary); text-decoration: underline; }
.breadcrumb__sep { color: var(--color-text-subtle); }
.breadcrumb__current { color: var(--color-text-primary); }
}
@layer components {
/* === components/bundle-selector/bundle-selector.css === */
/* ============================================================
BUNDLE SELECTOR
============================================================ */
.bundle-selector {
display: flex;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
overflow: hidden;
}
.bundle-option {
flex: 1;
padding: var(--spacing-md);
text-align: center;
cursor: pointer;
border-right: 1px solid var(--color-border-default);
background: var(--color-surface-primary);
transition: background var(--duration-fast), color var(--duration-fast);
}
.bundle-option:last-child { border-right: none; }
.bundle-option--active { background: var(--color-accent-primary); color: var(--color-text-on-accent); }
.bundle-option:hover:not(.bundle-option--active) { background: var(--color-surface-sunk); }
.bundle-option__qty { font-weight: var(--font-weight-ui-semibold); font-size: var(--font-size-body); }
.bundle-option__price { font-size: var(--font-size-micro); color: inherit; opacity: 0.8; }
}
@layer components {
/* === components/region-map/region-map.css === */
/* ============================================================
REGION MAP (BG)
============================================================ */
.region-map-wrap {
max-width: 600px;
margin: 0 auto;
/* Reduced top whitespace above "Открий вина по регион" (home + izbi). */
padding: var(--spacing-sm) 0 var(--spacing-xl);
}
.region-map-wrap h2 {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.region-map svg {
width: 100%;
height: auto;
}
.region-path {
cursor: pointer;
transition: opacity var(--duration-fast);
}
.region-path:hover { opacity: 0.8; }
.region-label {
font-family: var(--font-ui);
font-size: 11px;
fill: var(--color-text-primary);
pointer-events: none;
}
/* M2 fix: Region map semantic token classes consume the region tokens shipped by UI Designer. */
.region-dunav {
fill: var(--color-region-dunav-fill);
stroke: var(--color-region-dunav-stroke);
}
.region-trakiya {
fill: var(--color-region-trakiya-fill);
stroke: var(--color-region-trakiya-stroke);
}
.region-chernomorie {
fill: var(--color-region-chernomorie-fill);
stroke: var(--color-region-chernomorie-stroke);
}
}
@layer components {
/* === components/info-bar/info-bar.css === */
/* ============================================================
INFO BAR
============================================================ */
.info-bar {
background: var(--color-surface-sunk);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-size-small);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
}
@layer components {
/* === components/tabs/tabs.css === */
/* ============================================================
TABS
============================================================ */
.tabs {
display: flex;
border-bottom: 2px solid var(--color-border-default);
gap: 0;
margin-bottom: var(--spacing-xl);
/* Horizontal scroll instead of overflow when tabs exceed viewport (mobile). */
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
/*
* Scroll-shadow affordance — signals that more tabs exist beyond the
* right edge. Technique: dual background-attachment (local + scroll).
*
* Two radial-gradient layers are stacked per edge:
* - The "cover" layer uses background-attachment:local so it moves with
* the scroll position. At the left edge it sits over the left shadow;
* at the right edge it sits over the right shadow. When the container
* is scrolled to an edge the cover matches the page surface colour and
* hides that side's shadow — so the fade only appears where there IS
* more content to scroll to.
* - The "shadow" layers use background-attachment:scroll so they are
* fixed to the element box and always rendered, but the covers mask
* them at the natural scroll stops.
*
* The fade colour is var(--color-surface-primary) — the page background
* token — so it remaps automatically for dark mode without any extra rule.
* The gradient renders behind the flex children (below the tab buttons)
* and behind the border-bottom underline, so neither the tab strip line
* nor the active-tab indicator is affected.
*
* At viewports wide enough that no tabs overflow, the container does not
* scroll at all: both covers sit on top of both shadows from the start,
* so nothing is visible. No JS, no observer, pure CSS.
*/
background:
/* Right-edge cover: solid surface colour at right, fades left.
Uses local attachment so it moves with the scrollable content.
When scrolled fully right, this layer sits over the right shadow
and hides it — telling the user there is nothing more to the right. */
linear-gradient(to left, var(--color-surface-primary), transparent)
right center / 40px 100% no-repeat local,
/* Left-edge cover: solid surface colour at left, fades right.
Hides the left shadow when scrolled fully left (start position). */
linear-gradient(to right, var(--color-surface-primary), transparent)
left center / 40px 100% no-repeat local,
/* Right overflow shadow: fixed to element box, always rendered.
Visible only when the right cover does not reach this position
(i.e. when there is scrollable content to the right). */
linear-gradient(to left, var(--color-border-default), transparent)
right center / 40px 100% no-repeat scroll,
/* Left overflow shadow: visible only when scrolled away from left edge. */
linear-gradient(to right, var(--color-border-default), transparent)
left center / 40px 100% no-repeat scroll;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
flex-shrink: 0;
white-space: nowrap;
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
background: none;
font-family: var(--font-ui);
font-size: var(--font-size-small);
font-weight: var(--font-weight-ui-semibold);
color: var(--color-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
text-decoration: none;
transition: color var(--duration-fast), border-color var(--duration-fast);
}
.tab:hover { color: var(--color-accent-primary); text-decoration: none; }
.tab--active { color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); }
/* ── Dark theme overrides — WCAG AA contrast fix
accent-primary (#8B2D3D) on dark surface-primary (#1A1410) = 2.21:1 — FAIL (need ≥4.5:1 text).
accent-link (#C4706C) on dark surface-primary (#1A1410) = 5.11:1 — PASS.
── */
[data-theme="dark"] .tab:hover { color: var(--color-accent-link); }
[data-theme="dark"] .tab--active { color: var(--color-accent-link); border-bottom-color: var(--color-accent-link); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tab:hover { color: var(--color-accent-link); }
:root:not([data-theme="light"]) .tab--active { color: var(--color-accent-link); border-bottom-color: var(--color-accent-link); }
}
}
@layer components {
/* === components/hero/hero.css === */
/* ============================================================
HERO SECTIONS
============================================================ */
.hero {
background: var(--color-surface-sunk);
padding: var(--spacing-editorial-lg) 0;
position: relative;
}
.hero--editorial {
background-image: linear-gradient(135deg, var(--color-surface-sunk) 0%, var(--color-surface-primary) 100%);
}
.hero__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-editorial-md);
align-items: center;
}
.hero__text { }
.hero__eyebrow {
font-size: var(--font-size-small);
font-weight: var(--font-weight-ui-semibold);
letter-spacing: var(--letter-spacing-allcaps);
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--spacing-md);
}
.hero__title {
font-family: var(--font-display);
font-size: var(--font-size-h1);
font-weight: var(--font-weight-display-light);
color: var(--color-text-primary);
line-height: var(--line-height-display);
margin-bottom: var(--spacing-md);
}
.hero__subtitle {
font-size: var(--font-size-body);
color: var(--color-text-muted);
line-height: var(--line-height-editorial);
margin-bottom: var(--spacing-xl);
}
.hero__ctas {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.hero__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hero__image-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: var(--color-surface-sunk);
border-radius: var(--card-radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-subtle);
font-size: 4rem;
border: 1px solid var(--color-border-default);
}
}
@layer components {
/* === components/pdp/pdp.css === */
/* ============================================================
@layer context (Phase 2 — layer-taxonomy.md §!important audit)
This file is assigned to @layer components by css-build.
The !important declarations below target CloudImage/lightbox elements
that inject inline style="" attributes via JavaScript at runtime.
Inline styles have specificity 1000 and are NOT part of any stylesheet
layer — they are unlayered in the cascade sense. @layer !important
rules from the components layer lose to inline styles: an unlayered
non-!important rule beats a layered !important rule when the unlayered
rule is an inline style. This means the !important declarations here
continue to lose to CloudImage inline overrides exactly as they did
before Phase 2. Behavior is unchanged.
If CloudImage ever moves its overrides to a