/* Don Gelato 2027 — component styles. Every value comes from tokens.css. Prefix: dg- */

.dg, .dg * { box-sizing: border-box; }
.dg { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; color: var(--text-ink); background: var(--bg-page); -webkit-font-smoothing: antialiased; }
.dg img { max-width: 100%; display: block; }
.dg :focus-visible { outline: var(--focus-ring) solid var(--text-accent); outline-offset: 2px; }
.dg-icon { width: 24px; height: 24px; stroke-width: 1.75; color: var(--icon); flex: none; }

/* A01 Header */
.dg-header { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-height); padding-inline: var(--space-3); background: var(--bg-surface); }
.dg-header--scrolled { box-shadow: var(--shadow-header); }
.dg-header__logo { height: 44px; width: auto; justify-self: center; }
.dg-header__end { display: flex; justify-content: flex-end; gap: var(--space-1); }
.dg-header__btn { position: relative; display: inline-grid; place-items: center; width: var(--hit-min); height: var(--hit-min); border: 0; background: none; border-radius: var(--radius-pill); cursor: pointer; color: var(--icon); }
.dg-header__btn .dg-icon { width: 28px; height: 28px; }
.dg-header__count { position: absolute; top: 0; right: -2px; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: var(--radius-pill); background: var(--action); color: var(--text-on-action); font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; }

/* A02 Hero — title left, photo right, same height on every page */
.dg-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--hero-photo-width); grid-template-rows: minmax(0, 1fr); height: var(--hero-height); overflow: hidden; background: var(--bg-page); }
.dg-hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-width: 0; padding: var(--space-4) var(--space-2) var(--space-4) var(--space-4); }
.dg-hero__back { position: absolute; top: var(--space-1); left: var(--space-3); z-index: 2; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--hit-min); padding-right: var(--space-2); white-space: nowrap; color: var(--text-link); font-size: 17px; text-decoration: none; }
.dg-hero__back + .dg-hero__title { margin-top: var(--space-5); }
.dg-hero__title { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 7.6vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; color: var(--text-heading); text-wrap: balance; }
.dg-hero__title--ink { color: var(--text-ink); }
.dg-hero__title--statement { font-size: clamp(23px, 6vw, 40px); line-height: 1.15; }
.dg-hero__title em { display: block; font-style: normal; color: var(--text-accent); }
.dg-hero__lead { margin: 0; font-size: clamp(17px, 4.4vw, 20px); line-height: 1.4; color: var(--text-subtle); }
.dg-hero__rule { width: 72px; height: 4px; border-radius: var(--radius-pill); background: var(--gold-rule); }
.dg-hero__photo { position: relative; margin-left: -12%; min-width: 0; }
.dg-hero__photo img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.dg-hero__note { position: absolute; top: var(--space-3); right: var(--space-2); z-index: 2; max-width: 40%; text-align: right; text-shadow: 0 0 6px var(--bg-page), 0 0 2px var(--bg-page); }
@media (min-width: 768px) { .dg-hero__note { top: var(--space-5); right: var(--space-5); max-width: 32%; } }
@media (max-width: 400px) { .dg-hero { grid-template-columns: minmax(0, 1fr) 40%; } }
@media (min-width: 768px) { .dg-hero { height: 420px; } .dg-hero__text { padding-left: var(--space-6); } }

/* A03 Section title */
.dg-section-title { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); text-align: center; padding-block: var(--space-4); }
.dg-section-title__main { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.dg-section-title h2 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 7vw, 40px); line-height: 1.12; font-weight: 700; color: var(--text-heading); text-wrap: balance; }
.dg-section-title p { margin: 0; font-size: 18px; line-height: 1.4; color: var(--text-subtle); }
.dg-section-title__side--start { grid-column: 1; justify-self: start; }
.dg-section-title__side--end { grid-column: 3; justify-self: end; }

/* A04 Script note */
.dg-script { display: inline-block; font-family: var(--font-script); font-size: 24px; line-height: 1.15; color: var(--gold-script); transform: rotate(-6deg); }
.dg-script--lg { font-size: 30px; transform: none; }
.dg-script--blue { color: var(--script-blue); }
.dg-script__heart { font-family: var(--font-sans); font-size: 0.9em; margin-left: 2px; }

/* A05–A07 Buttons */
.dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--button-height); padding-inline: 28px; border-radius: var(--radius-pill); border: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.2; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.dg-btn .dg-icon { width: 20px; height: 20px; color: currentColor; }
.dg-btn--primary { background: var(--action); color: var(--text-on-action); box-shadow: var(--shadow-button); }
.dg-btn--primary:hover, .dg-btn--primary.is-hover { background: var(--action-hover); }
.dg-btn--outline { background: var(--bg-surface); color: var(--action); box-shadow: inset 0 0 0 2px var(--action); }
.dg-btn--outline:hover, .dg-btn--outline.is-hover { background: var(--bg-panel); }
.dg-btn--white { background: var(--bg-surface); color: var(--text-heading); box-shadow: var(--shadow-card); }
.dg-btn--white .dg-icon { color: var(--icon); }
.dg-btn--block { display: flex; width: 100%; }
.dg-btn--sm { min-height: var(--hit-min); padding-inline: 20px; font-size: 17px; }
.dg-btn:disabled, .dg-btn.is-disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }

/* A08 Icon button (round) */
.dg-icon-btn { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--bg-surface); box-shadow: var(--shadow-card); cursor: pointer; color: var(--icon); }
.dg-icon-btn .dg-icon { width: 26px; height: 26px; }
.dg-icon-btn__label { font-weight: 700; font-size: 22px; color: var(--text-heading); }

/* A09 Panel (light blue) */
.dg-panel { border-radius: var(--radius-lg); background: var(--bg-panel); border: 1px solid var(--border-cool); padding: var(--space-5) var(--space-4); }
.dg-panel--row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dg-panel__title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--text-heading); }
.dg-panel__text { margin: 2px 0 0; font-size: 16px; color: var(--text-subtle); }
.dg-panel__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* A10 Category card */
.dg-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); container: dgcat / inline-size; }
.dg-cat-card { display: grid; grid-template-columns: 52% 1fr auto; align-items: center; gap: var(--space-1); min-height: 92px; padding-right: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface-warm); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); color: var(--text-heading); text-decoration: none; overflow: hidden; }
.dg-cat-card img { width: 100%; height: 92px; object-fit: cover; object-position: left center; }
.dg-cat-card__name { font-family: var(--font-display); font-size: 17px; line-height: 1.2; font-weight: 700; }
.dg-cat-card .dg-icon { width: 20px; height: 20px; }
/* Narrow grid: a 17px name does not fit beside the photo in a card under ~260px, so the photo goes on top */
@container dgcat (max-width: 540px) {
  .dg-cat-card { grid-template-columns: 1fr auto; grid-template-rows: 96px auto; gap: 0; padding-right: 0; }
  .dg-cat-card img { grid-column: 1 / -1; height: 96px; object-fit: cover; object-position: center 40%; }
  .dg-cat-card__name { padding: var(--space-2) 0 var(--space-2) var(--space-3); min-height: 56px; display: flex; align-items: center; }
  .dg-cat-card .dg-icon { margin-right: var(--space-2); }
}

/* A11 Solution card */
.dg-solution { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 168px; border-radius: var(--radius-md); background: var(--bg-surface-warm); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); overflow: hidden; }
.dg-solution--blue { background: var(--bg-panel); border-color: var(--border-cool); }
.dg-solution__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
.dg-solution__title { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--text-heading); }
.dg-solution__tags { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-ink); }
.dg-solution__photo { position: absolute; inset: 0 0 0 38%; }
.dg-solution__photo img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }

/* A12 Product card (horizontal) */
.dg-product { display: grid; grid-template-columns: 42% 1fr; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); }
.dg-product__media { position: relative; }
.dg-product__media img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; object-position: 32% center; border-radius: var(--radius-sm); }
.dg-product__media .dg-badge { position: absolute; top: var(--space-2); left: var(--space-1); z-index: 1; white-space: nowrap; }
.dg-product__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding-block: var(--space-1); }
.dg-product__name { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--text-heading); }
.dg-product__facts { margin: 0; font-size: 16px; line-height: 1.4; color: var(--text-subtle); }
.dg-product__price-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.dg-product__price { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.dg-product__buy { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }

/* A13 Quantity stepper */
.dg-qty { display: inline-flex; align-items: center; height: var(--hit-min); border-radius: var(--radius-pill); background: var(--bg-surface); border: 1px solid var(--border-cool); }
.dg-qty button { display: grid; place-items: center; width: var(--hit-min); height: var(--hit-min); border: 0; background: none; border-radius: var(--radius-pill); cursor: pointer; color: var(--text-heading); }
.dg-qty button:disabled { opacity: .35; cursor: not-allowed; }
.dg-qty output { min-width: 32px; text-align: center; font-size: 19px; font-weight: 600; color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* A14 Badge (gold, crown) */
.dg-badge { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px 16px; border-radius: var(--radius-pill); background: var(--gold-badge); color: #ffffff; font-size: 19px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(120, 70, 10, .25); }
.dg-badge .dg-icon { width: 18px; height: 18px; color: #ffffff; fill: #ffffff; }
.dg-price-chip { display: inline-flex; align-items: center; min-height: 34px; padding-inline: 14px; border-radius: var(--radius-pill); background: var(--gold-soft); color: #7a4a0c; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* A15 Info chip */
.dg-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding-inline: 16px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--text-heading); font-size: 16px; font-weight: 500; }
.dg-chip--blue { background: var(--bg-chip); }
.dg-chip .dg-icon { width: 20px; height: 20px; color: var(--gold-badge); }
.dg-chip--blue .dg-icon { color: var(--icon); }

/* A16–A17 Promo card */
.dg-promo { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); min-height: 300px; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-warm); box-shadow: var(--shadow-raised); overflow: hidden; }
.dg-promo--md { min-height: 200px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.dg-promo__media { position: relative; min-height: 200px; }
.dg-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.dg-promo__media .dg-badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.dg-promo__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3); }
.dg-promo__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--text-heading); }
.dg-promo--md .dg-promo__title { font-size: 22px; }
.dg-promo__sub { margin: 0; font-size: 17px; line-height: 1.4; color: var(--text-subtle); }
.dg-promo__body .dg-btn { margin-top: var(--space-2); align-self: flex-start; }

/* A18 Info card (pastel) */
.dg-info { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--space-3); min-height: 116px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
.dg-info--pink { background: var(--pastel-pink); }
.dg-info--blue { background: var(--pastel-blue); border-color: var(--border-cool); }
.dg-info--cream { background: var(--pastel-cream); }
.dg-info--green { background: var(--pastel-green); }
.dg-info img { width: 96px; height: 84px; object-fit: contain; mix-blend-mode: multiply; }
.dg-info__title { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--text-heading); }
.dg-info__text { margin: 2px 0 0; font-size: 16px; line-height: 1.45; color: var(--text-subtle); }

/* A19 Help strip */
.dg-help { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); }
.dg-help .dg-icon { width: 36px; height: 36px; }
.dg-help__text { flex: 1 1 180px; min-width: 0; }
.dg-help__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-heading); }
.dg-help__sub { margin: 0; font-size: 15px; color: var(--text-subtle); }

/* A20 Benefit card */
.dg-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.dg-benefit { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-card); }
.dg-benefit--cream { background: var(--pastel-cream); }
.dg-benefit--blue { background: var(--pastel-blue); }
.dg-benefit--green { background: var(--pastel-green); }
.dg-benefit--peach { background: var(--pastel-peach); }
.dg-benefit__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; }
.dg-benefit--cream .dg-benefit__icon { background: var(--icon-circle-cream); }
.dg-benefit--blue .dg-benefit__icon { background: var(--icon-circle-blue); }
.dg-benefit--green .dg-benefit__icon { background: var(--icon-circle-green); }
.dg-benefit--peach .dg-benefit__icon { background: var(--icon-circle-peach); }
.dg-benefit__icon .dg-icon { width: 30px; height: 30px; color: var(--text-ink); }
.dg-benefit__title { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--text-ink); }
.dg-benefit__text { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-ink); }

/* A21 Review card */
.dg-review { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface-warm); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); }
.dg-review__top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dg-review__quote { font-family: var(--font-display); font-size: 48px; line-height: .6; height: 24px; color: var(--text-accent); }
.dg-review__stars { display: flex; gap: 2px; }
.dg-review__stars .dg-icon { width: 22px; height: 22px; color: var(--star); fill: var(--star); }
.dg-review__text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-link); }
.dg-review__author { display: flex; align-items: center; gap: var(--space-3); }
.dg-review__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--bg-chip); display: grid; place-items: center; }
.dg-review__role { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-link); }
.dg-review__name { margin: 0; font-size: 15px; color: var(--text-subtle); }

/* Brand-mark placeholder (official files not supplied yet) */
.dg-mark { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 6px; border-radius: 6px; border: 1px dashed var(--border-cool); background: var(--bg-surface); color: var(--text-subtle); font-size: 11px; font-weight: 700; letter-spacing: .02em; }

/* A22 Quick link tile */
.dg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.dg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 92px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); background: var(--bg-surface); box-shadow: var(--shadow-card); color: var(--text-heading); text-decoration: none; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.2; }
.dg-tile .dg-icon { width: 28px; height: 28px; }

/* A23 Accordion */
.dg-acc { border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.dg-acc + .dg-acc { margin-top: var(--space-2); }
.dg-acc summary { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding-inline: var(--space-4); list-style: none; cursor: pointer; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--text-heading); }
.dg-acc summary::-webkit-details-marker { display: none; }
.dg-acc summary .dg-acc__chev { margin-left: auto; transition: transform .2s ease; }
.dg-acc[open] summary .dg-acc__chev { transform: rotate(180deg); }
.dg-acc__list { margin: 0; padding: 0 var(--space-4) var(--space-2) 56px; list-style: none; }
.dg-acc__list a { display: flex; align-items: center; justify-content: space-between; min-height: var(--hit-min); border-top: 1px solid var(--border-cool); color: var(--text-ink); text-decoration: none; font-size: 17px; }

/* A24 Contact card */
.dg-contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-panel); border: 1px solid var(--border-cool); }
.dg-contact__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-heading); }
.dg-contact__row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--hit-min); color: var(--text-heading); text-decoration: none; font-size: 17px; }
.dg-contact__dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--action); flex: none; }
.dg-contact__dot .dg-icon { width: 18px; height: 18px; color: #ffffff; }
.dg-contact__dot--wa { background: var(--brand-whatsapp); }
.dg-contact__hours { padding-left: var(--space-4); border-left: 1px solid var(--border-cool); }
.dg-contact__hours h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 18px; font-weight: 600; color: var(--text-heading); }
.dg-contact__hours p { margin: 0; font-size: 16px; color: var(--text-ink); }
.dg-contact__hours strong { display: block; font-size: 19px; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.dg-contact__hours hr { border: 0; border-top: 1px solid var(--border-cool); margin: var(--space-2) 0; }
/* Phones: working hours move under the contacts so 17–19px text keeps its size */
@media (max-width: 459px) {
  .dg-contact { grid-template-columns: 1fr; }
  .dg-contact__hours { padding: var(--space-3) 0 0; border-left: 0; border-top: 1px solid var(--border-cool); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .dg-contact__hours h4 { grid-column: 1 / -1; }
  .dg-contact__hours hr { display: none; }
}

/* A25 Payment methods */
.dg-pay { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--pastel-cream); border: 1px solid var(--border-warm); }
.dg-pay__head, .dg-social__head, .dg-partners__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.dg-pay__title, .dg-social__title, .dg-partners__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-heading); }
.dg-pay__list { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dg-pay__item { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 1.25; color: var(--text-heading); }
.dg-pay__item .dg-icon { width: 30px; height: 30px; }
.dg-pay__sep { width: 1px; align-self: stretch; background: var(--border-warm); }
.dg-pay__marks { display: flex; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border-warm); }

/* A26 Social row */
.dg-social { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-panel); border: 1px solid var(--border-cool); }
.dg-social__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dg-social__icons { display: flex; gap: var(--space-3); }
.dg-social__icons .dg-mark { width: 48px; height: 48px; border-radius: 12px; }
.dg-social__text { flex: 1 1 160px; margin: 0; padding-left: var(--space-3); border-left: 1px solid var(--border-cool); font-size: 15px; color: var(--text-ink); }

/* A27 Partner card */
.dg-partners { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.dg-partners__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); }
.dg-partner { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-2); min-height: 64px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border-cool); color: var(--text-heading); text-decoration: none; }
.dg-partner img { width: 64px; height: 40px; object-fit: contain; }
.dg-partner__name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.dg-partner__url { margin: 0; font-size: 14px; color: var(--text-subtle); }

/* A28 Footer bar */
.dg-footer-bar { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4) var(--space-5); background: var(--footer-band); color: #ffffff; text-align: center; }
.dg-footer-bar__logo { width: 220px; }
.dg-footer-bar__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-3) 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .35); width: 100%; }
.dg-footer-bar__links a { display: inline-flex; align-items: center; min-height: 36px; color: #ffffff; text-decoration: none; font-size: 15px; }
.dg-footer-bar__copy { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .85); }

/* A29 Wave divider */
.dg-wave { display: block; width: 100%; height: 48px; }
.dg-wave path { fill: var(--wave-fill, var(--bg-surface-warm)); }

/* A30 Decor photo */
.dg-decor { position: relative; overflow: hidden; }
.dg-decor img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%); mask-image: linear-gradient(180deg, transparent 0, #000 28%); }

/* A31 Text link */
.dg-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--hit-min); color: var(--text-link); font-size: 17px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dg-link--plain { text-decoration: none; }
.dg-link .dg-icon { width: 18px; height: 18px; color: currentColor; }

/* ===== Motion — subtle, premium, never in the way =====
   Hover effects only on devices with a real pointer; touch gets a short press.
   Everything stops under prefers-reduced-motion. */
.dg {
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --dur-reveal: 700ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.34, 1.32, 0.64, 1);
  --lift: -4px;
  --img-zoom: 1.05;
  --shade: rgba(5, 44, 100, 0.12);
}

/* Shared hoverable surfaces */
.dg-cat-card, .dg-product, .dg-promo, .dg-solution, .dg-info, .dg-benefit, .dg-review, .dg-partner, .dg-tile, .dg-acc, .dg-icon-btn {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.dg-cat-card img, .dg-product__media img, .dg-promo__media img, .dg-solution__photo img, .dg-info img, .dg-decor img, .dg-hero__photo img {
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
.dg-cat-card, .dg-promo__media, .dg-solution, .dg-partner { position: relative; overflow: hidden; }
.dg .dg-icon { transition: transform var(--dur-base) var(--ease-soft); }

/* Photo darkening: a soft navy veil that deepens on hover */
.dg-promo__media::after, .dg-solution__photo::after, .dg-cat-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, var(--shade));
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .dg-cat-card:hover, .dg-product:hover, .dg-promo:hover, .dg-solution:hover, .dg-info:hover, .dg-review:hover, .dg-partner:hover, .dg-tile:hover,
  .dg-cat-card.is-hover, .dg-product.is-hover, .dg-promo.is-hover, .dg-info.is-hover, .dg-tile.is-hover {
    transform: translateY(var(--lift)); box-shadow: var(--shadow-raised);
  }
  .dg-benefit:hover, .dg-benefit.is-hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
  .dg-benefit:hover .dg-benefit__icon .dg-icon, .dg-benefit.is-hover .dg-benefit__icon .dg-icon { transform: scale(1.12) rotate(-6deg); }
  .dg-cat-card:hover img, .dg-product:hover .dg-product__media img, .dg-promo:hover .dg-promo__media img, .dg-solution:hover .dg-solution__photo img, .dg-info:hover img,
  .dg-cat-card.is-hover img, .dg-product.is-hover .dg-product__media img, .dg-promo.is-hover .dg-promo__media img, .dg-info.is-hover img {
    transform: scale(var(--img-zoom)); filter: saturate(1.08);
  }
  .dg-cat-card:hover::after, .dg-promo:hover .dg-promo__media::after, .dg-solution:hover .dg-solution__photo::after,
  .dg-cat-card.is-hover::after, .dg-promo.is-hover .dg-promo__media::after { opacity: 1; }
  /* Arrows nudge toward where they lead */
  .dg-cat-card:hover > .dg-icon, .dg-info:hover > .dg-icon, .dg-partner:hover > .dg-icon, .dg-acc__list a:hover .dg-icon,
  .dg-btn:hover .dg-icon:last-child, .dg-link:hover .dg-icon,
  .dg-cat-card.is-hover > .dg-icon, .dg-info.is-hover > .dg-icon, .dg-btn.is-hover .dg-icon:last-child { transform: translateX(3px); }
  .dg-hero__back:hover .dg-icon { transform: translateX(-3px); }
  /* Buttons rise a hair and their shadow deepens */
  .dg-btn--primary:hover, .dg-btn--primary.is-hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(5, 44, 100, 0.32); }
  .dg-btn--outline:hover, .dg-btn--white:hover { transform: translateY(-1px); }
  .dg-icon-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
  .dg-header__btn:hover, .dg-qty button:not(:disabled):hover { background: var(--bg-panel); }
  .dg-acc:hover { border-color: var(--text-subtle); }
  .dg-acc__list a:hover { color: var(--text-heading); }
  .dg-review:hover .dg-review__stars .dg-icon { transform: scale(1.12); }
  .dg-review:hover .dg-review__stars .dg-icon:nth-child(2) { transition-delay: 40ms; }
  .dg-review:hover .dg-review__stars .dg-icon:nth-child(3) { transition-delay: 80ms; }
  .dg-review:hover .dg-review__stars .dg-icon:nth-child(4) { transition-delay: 120ms; }
  .dg-review:hover .dg-review__stars .dg-icon:nth-child(5) { transition-delay: 160ms; }
  .dg-footer-bar__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.dg-btn { transition: background-color var(--dur-fast) ease, box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }

/* Plain links: the underline slides in from the left */
.dg-link--plain { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size var(--dur-base) var(--ease-out); }
.dg-link--plain:hover { background-size: calc(100% - 22px) 1px; }

/* Press feedback for touch and click */
.dg-btn:active:not(:disabled), .dg-icon-btn:active, .dg-qty button:active:not(:disabled), .dg-header__btn:active { transform: scale(0.97); transition-duration: 80ms; }
.dg-cat-card:active, .dg-info:active, .dg-tile:active, .dg-partner:active { transform: scale(0.985); transition-duration: 80ms; }

/* Gold badge: one soft sheen when its card is hovered */
.dg-badge { overflow: hidden; }
.dg-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.dg-badge { position: relative; }
.dg-product__media .dg-badge, .dg-promo__media .dg-badge { position: absolute; }
@media (hover: hover) and (pointer: fine) {
  .dg-product:hover .dg-badge::after, .dg-promo:hover .dg-badge::after, .dg-badge.is-shine::after { transform: translateX(120%); transition: transform 900ms var(--ease-out); }
}

/* Cart count: a short bump when the number changes (add .is-bump from JS, remove on animationend) */
@keyframes dg-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.dg-header__count.is-bump { animation: dg-bump 420ms var(--ease-soft); }

/* Hero: the photo settles in slowly, the text rises once on page load */
@keyframes dg-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes dg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dg-hero__photo img { animation: dg-settle 1400ms var(--ease-out) both; }
.dg-hero__text > :not(.dg-hero__back) { animation: dg-rise var(--dur-reveal) var(--ease-out) both; }
.dg-hero__text > :nth-child(2) { animation-delay: 80ms; }
.dg-hero__text > :nth-child(3) { animation-delay: 160ms; }
.dg-hero__text > :nth-child(4) { animation-delay: 240ms; }

/* Script note: writes itself in, left to right */
@keyframes dg-write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.dg-script.is-animated { animation: dg-write 1100ms var(--ease-out) both; }

/* Scroll reveal: add .dg-reveal (one block) or .dg-reveal-group (its children one after another).
   A small observer adds .is-visible. The hidden start state applies only when <html> has .dg-js,
   so without JavaScript everything stays visible. */
.dg-js .dg-reveal, .dg-js .dg-reveal-group > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.dg-js .dg-reveal.is-visible, .dg-js .dg-reveal-group.is-visible > * { opacity: 1; transform: none; }
.dg-js .dg-reveal-group.is-visible > :nth-child(2) { transition-delay: 70ms; }
.dg-js .dg-reveal-group.is-visible > :nth-child(3) { transition-delay: 140ms; }
.dg-js .dg-reveal-group.is-visible > :nth-child(4) { transition-delay: 210ms; }
.dg-js .dg-reveal-group.is-visible > :nth-child(5) { transition-delay: 280ms; }
.dg-js .dg-reveal-group.is-visible > :nth-child(6) { transition-delay: 350ms; }
.dg-js .dg-reveal-group.is-visible > :nth-child(7) { transition-delay: 420ms; }
.dg-js .dg-reveal-group.is-visible > :nth-child(8) { transition-delay: 490ms; }

/* Accordion body fades down when opened */
@keyframes dg-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dg-acc[open] .dg-acc__list { animation: dg-drop var(--dur-base) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .dg *, .dg *::before, .dg *::after { animation: none !important; transition: none !important; }
  .dg-js .dg-reveal, .dg-js .dg-reveal-group > * { opacity: 1; transform: none; }
}

/* Brand marks (official logos, never recoloured) */
.dg-brand { display: block; width: 26px; height: 26px; object-fit: contain; }
.dg-brand--sm { width: 20px; height: 20px; }
.dg-brand--pay { width: auto; height: 22px; max-width: 48px; }
.dg-review__top .dg-brand { width: 24px; height: 24px; }
.dg-social__icons .dg-brand { width: 44px; height: 44px; }

/* ===================== B components — from the other approved previews, in the Screen 01–08 language ===================== */

/* B-PageHeader: compact title row for account and checkout flows */
.dg-page-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); }
.dg-page-head__back { display: grid; place-items: center; width: var(--hit-min); height: var(--hit-min); border-radius: 50%; color: var(--icon); text-decoration: none; }
.dg-page-head__back .dg-icon { width: 26px; height: 26px; }
.dg-page-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 7vw, 40px); line-height: 1.1; font-weight: 700; color: var(--text-heading); }

/* Status alert */
.dg-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-size: 17px; line-height: 1.45; }
.dg-alert .dg-icon { width: 24px; height: 24px; margin-top: 1px; }
.dg-alert--success { background: var(--success-soft); border-color: #bfe3cb; color: var(--success); font-weight: 600; }
.dg-alert--success .dg-icon { color: var(--success); }
.dg-alert--info { background: var(--bg-panel); border-color: var(--border-cool); color: var(--text-ink); }
.dg-alert--info .dg-icon { color: var(--icon); }
.dg-alert--error { background: var(--danger-soft); border-color: #f3b9bc; color: var(--danger); font-weight: 600; }
.dg-alert--error .dg-icon { color: var(--danger); }
.dg-alert--warning { background: var(--warning-soft); border-color: #f2d49b; color: var(--warning); font-weight: 600; }
.dg-alert--warning .dg-icon { color: var(--warning-icon); }

/* Status badge (orders, stock, address) */
.dg-status { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; }
.dg-status .dg-icon { width: 22px; height: 22px; }
.dg-status--done { color: var(--success); }
.dg-status--progress { color: var(--warning); }
.dg-status--progress .dg-icon { color: var(--warning-icon); }
.dg-status--stop { color: var(--danger); }
.dg-tag { display: inline-flex; align-items: center; height: 28px; padding-inline: 12px; border-radius: var(--radius-pill); background: var(--bg-chip); color: var(--text-link); font-size: 15px; font-weight: 600; }
.dg-tag--success { background: var(--success-soft); color: var(--success); }
.dg-tag--success::before { content: ""; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--success); }

/* B02 Search field */
.dg-search { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding-inline: var(--space-4) var(--space-2); border-radius: var(--radius-pill); background: var(--bg-panel); border: 1.5px solid var(--border-cool); transition: border-color var(--dur-base, .26s) ease, box-shadow var(--dur-base, .26s) ease, background-color var(--dur-base, .26s) ease; }
.dg-search:focus-within { background: var(--bg-surface); border-color: var(--text-link); box-shadow: 0 0 0 4px rgba(26, 58, 174, 0.12); }
.dg-search > .dg-icon { width: 26px; height: 26px; color: var(--icon); }
.dg-search input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; font: inherit; font-size: 18px; color: var(--text-ink); outline: none; }
.dg-search input::placeholder { color: var(--text-subtle); opacity: .85; }
.dg-search__clear { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--bg-chip); color: var(--icon); cursor: pointer; }
.dg-search__clear .dg-icon { width: 18px; height: 18px; }
.dg-search__close { border: 0; background: none; padding: 0 var(--space-2); min-height: var(--hit-min); font: 600 18px var(--font-sans); color: var(--text-heading); cursor: pointer; }

/* B10 Search suggestions panel */
.dg-suggest { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-raised); }
.dg-suggest__label { margin: 0 0 var(--space-2); font-size: 16px; font-weight: 600; color: var(--text-subtle); }
.dg-suggest__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-cool); }
.dg-suggest__row { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--border-cool); color: inherit; text-decoration: none; }
.dg-suggest__row:first-of-type { border-top: 0; }
.dg-suggest__row img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--bg-surface-warm); }
.dg-suggest__name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text-heading); }
.dg-suggest__facts { margin: 0; font-size: 15px; color: var(--text-subtle); }
.dg-suggest__price { font-size: 18px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.dg-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); text-align: center; }
.dg-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--bg-panel); }
.dg-empty__icon .dg-icon { width: 34px; height: 34px; }
.dg-empty__title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-heading); }
.dg-empty__text { margin: 0; font-size: 16px; color: var(--text-subtle); max-width: 30ch; }

/* Selectable chip (filters, popular searches, category shortcuts) */
.dg-pick { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--hit-min); padding-inline: 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-cool); background: var(--bg-surface); color: var(--text-heading); font: 500 17px var(--font-sans); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.dg-pick .dg-icon { width: 22px; height: 22px; }
.dg-pick[aria-pressed="true"], .dg-pick.is-active { background: var(--action); border-color: var(--action); color: var(--text-on-action); }
.dg-pick[aria-pressed="true"] .dg-icon, .dg-pick.is-active .dg-icon { color: var(--text-on-action); }
.dg-pick--soft { background: var(--bg-chip); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .dg-pick:not(.is-active):hover { border-color: var(--text-link); background: var(--bg-panel); } }

/* B03–B04 Filter bar: "Изберете вид" select + search button */
.dg-filterbar { display: grid; grid-template-columns: 1fr 56px; gap: var(--space-2); }
.dg-select { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 56px; padding-inline: var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--border-cool); background: var(--bg-panel); color: var(--text-heading); font: 600 18px var(--font-sans); cursor: pointer; text-align: left; }
.dg-select .dg-icon { width: 22px; height: 22px; transition: transform var(--dur-base, .26s) var(--ease-out, ease); }
.dg-select[aria-expanded="true"] { background: var(--bg-surface); border-color: var(--text-link); }
.dg-select[aria-expanded="true"] .dg-icon { transform: rotate(180deg); }
.dg-square-btn { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); border: 1.5px solid var(--border-cool); background: var(--bg-panel); color: var(--icon); cursor: pointer; }
.dg-square-btn .dg-icon { width: 26px; height: 26px; }
.dg-options { margin-top: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-raised); list-style: none; }
.dg-options li button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding-inline: var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; font: 500 17px var(--font-sans); color: var(--text-ink); text-align: left; cursor: pointer; }
.dg-options li button small { display: block; font-size: 14px; font-weight: 400; color: var(--text-subtle); }
.dg-options li button[aria-selected="true"] { background: var(--bg-panel); color: var(--text-heading); font-weight: 700; }
.dg-options li button .dg-icon { width: 20px; height: 20px; color: var(--success); }

/* B05 Product tile (category grid, approved C01 29.10.2026) */
.dg-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: var(--space-3); }
.dg-tile-p { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); transition: transform var(--dur-base, .26s) var(--ease-out, ease), box-shadow var(--dur-base, .26s) var(--ease-out, ease); }
.dg-tile-p__media { position: relative; border-radius: var(--radius-sm); background: var(--bg-surface-warm); overflow: hidden; aspect-ratio: 1 / 1; }
.dg-tile-p__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow, .48s) var(--ease-out, ease); }
.dg-tile-p__facts { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dg-tile-p__facts span { padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border-cool); color: var(--text-heading); font-size: 13px; font-weight: 600; line-height: 1.25; text-align: right; }
.dg-tile-p__name { margin: 0; min-height: 2.5em; font-family: var(--font-display); font-size: 17px; line-height: 1.25; font-weight: 700; color: var(--text-heading); text-align: center; text-wrap: balance; }
.dg-tile-p .dg-qty { width: 100%; justify-content: space-between; }
.dg-hint { display: grid; place-items: center; min-height: 56px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-panel); color: var(--text-heading); font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; }
.dg-hint small { display: block; font-weight: 500; color: var(--text-subtle); }
.dg-hint--active { background: var(--success-soft); color: var(--success); }
.dg-hint--max { background: var(--gold-soft); color: #7a4a0c; }
.dg-hint--stock { background: var(--danger-soft); color: var(--danger); }
.dg-buy { display: grid; grid-template-columns: 1fr auto; align-items: stretch; min-height: 52px; border: 0; border-radius: var(--radius-md); background: var(--action); color: var(--text-on-action); box-shadow: var(--shadow-button); font: 600 16px var(--font-sans); overflow: hidden; cursor: pointer; transition: background-color var(--dur-fast, .15s) ease, transform var(--dur-base, .26s) var(--ease-out, ease), box-shadow var(--dur-base, .26s) ease; }
.dg-buy__label { display: flex; align-items: center; justify-content: center; gap: 6px; padding-inline: var(--space-2); }
.dg-buy__label .dg-icon { width: 20px; height: 20px; color: currentColor; }
.dg-buy__sum { display: grid; place-items: center; padding-inline: var(--space-3); background: rgba(0, 0, 0, 0.16); border-left: 1px solid rgba(255, 255, 255, 0.25); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dg-buy--block { width: 100%; font-size: 18px; min-height: 56px; }
.dg-buy--notify { display: flex; justify-content: center; gap: var(--space-2); align-items: center; background: var(--bg-surface); color: var(--action); box-shadow: inset 0 0 0 2px var(--action); }
.dg-buy--notify .dg-icon { width: 20px; height: 20px; color: currentColor; }
.dg-buy.is-loading .dg-buy__label { opacity: .75; }
@keyframes dg-spin { to { transform: rotate(360deg); } }
.dg-buy.is-loading .dg-icon { animation: dg-spin 900ms linear infinite; }
.dg-tile-p.is-out .dg-tile-p__media img { filter: grayscale(.55) opacity(.75); }
@media (hover: hover) and (pointer: fine) {
  .dg-tile-p:hover { transform: translateY(var(--lift, -4px)); box-shadow: var(--shadow-raised); }
  .dg-tile-p:hover .dg-tile-p__media img { transform: scale(var(--img-zoom, 1.05)); }
  .dg-buy:hover { background: var(--action-hover); transform: translateY(-1px); }
  .dg-buy--notify:hover { background: var(--bg-panel); }
}
.dg-buy:active { transform: scale(.98); }

/* B07 Help banner (category) */
.dg-helpbox { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-panel); border: 1px solid var(--border-cool); }
.dg-helpbox__title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--text-heading); }
.dg-helpbox__text { margin: 4px 0 0; font-size: 16px; color: var(--text-ink); }
.dg-helpbox__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 16px; color: var(--text-heading); }
.dg-helpbox__list li { display: inline-flex; align-items: center; gap: 6px; }
.dg-helpbox__list .dg-icon { width: 20px; height: 20px; }

/* B09 SEO info block */
.dg-seo { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.dg-seo__eyebrow { margin: 0 0 var(--space-2); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.dg-seo h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: clamp(26px, 7vw, 36px); line-height: 1.12; color: var(--text-heading); text-wrap: balance; }
.dg-seo p { margin: 0 0 var(--space-3); font-size: 18px; line-height: 1.6; color: var(--text-ink); max-width: 65ch; }
.dg-seo p strong { color: var(--text-heading); }
.dg-seo__more { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-cool); }
.dg-seo__more h3 { margin: 0 0 var(--space-3); font-size: 18px; font-weight: 700; color: var(--text-heading); }
.dg-seo__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dg-seo__links a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--hit-min); padding-inline: 18px 12px; border-radius: var(--radius-pill); background: var(--bg-chip); color: var(--text-heading); font-size: 16px; text-decoration: none; }
.dg-seo__links a .dg-icon { width: 18px; height: 18px; }

/* Sheet / modal base (Quick View, login, confirmations) */
.dg-scrim { background: var(--scrim); }
.dg-sheet { position: relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg-surface); box-shadow: 0 -10px 40px rgba(15, 24, 82, 0.18); padding: var(--space-3) var(--space-4) var(--space-5); }
.dg-sheet--card { border-radius: var(--radius-lg); }
.dg-sheet__handle { display: block; width: 44px; height: 5px; margin: 0 auto var(--space-2); border-radius: var(--radius-pill); background: var(--border-cool); }
.dg-sheet__close { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: var(--hit-min); height: var(--hit-min); border: 0; border-radius: 50%; background: var(--bg-surface); color: var(--icon); cursor: pointer; }
.dg-sheet__close .dg-icon { width: 26px; height: 26px; }
.dg-sheet__icon { display: grid; place-items: center; width: 72px; height: 72px; margin: var(--space-2) auto var(--space-3); border-radius: 50%; background: var(--bg-panel); }
.dg-sheet__icon .dg-icon { width: 34px; height: 34px; }
.dg-sheet__icon--danger { background: var(--danger-soft); }
.dg-sheet__icon--danger .dg-icon { color: var(--danger); }
.dg-sheet__icon--success { background: var(--success-soft); }
.dg-sheet__icon--success .dg-icon { color: var(--success); }
.dg-sheet__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--text-heading); text-align: center; }
.dg-sheet__text { margin: var(--space-2) auto var(--space-4); max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--text-subtle); text-align: center; }
.dg-sheet__note { margin: var(--space-3) 0 0; font-size: 15px; color: var(--text-subtle); text-align: center; }
.dg-sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.dg-btn--soft { background: var(--bg-panel); color: var(--text-heading); box-shadow: inset 0 0 0 1px var(--border-cool); }
.dg-btn--danger { background: var(--danger); color: #ffffff; box-shadow: 0 6px 16px rgba(212, 33, 43, 0.28); }
.dg-btn--danger-soft { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1.5px #f3b9bc; }
@media (hover: hover) and (pointer: fine) { .dg-btn--danger:hover { background: #b81b24; transform: translateY(-1px); } .dg-btn--soft:hover { background: var(--bg-chip); } }
@keyframes dg-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dg-sheet.is-entering { animation: dg-sheet-in var(--dur-reveal, .7s) var(--ease-out, ease) both; }

/* B11 Quick View content */
.dg-qv__title { margin: 0 var(--space-6) var(--space-3) 0; font-family: var(--font-display); font-size: 26px; line-height: 1.15; font-weight: 700; color: var(--text-heading); }
.dg-qv__gallery { display: grid; gap: var(--space-2); }
.dg-qv__main { border-radius: var(--radius-md); background: var(--bg-surface-warm); aspect-ratio: 1 / 1; overflow: hidden; }
.dg-qv__main img { width: 100%; height: 100%; object-fit: contain; }
.dg-qv__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; }
.dg-qv__thumbs button { flex: none; width: 60px; height: 60px; padding: 0; border-radius: 10px; border: 2px solid transparent; background: var(--bg-surface-warm); overflow: hidden; cursor: pointer; }
.dg-qv__thumbs button[aria-current="true"] { border-color: var(--text-link); }
.dg-qv__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dg-facts { display: grid; gap: 0; margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-panel); list-style: none; }
.dg-facts li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; border-top: 1px solid var(--border-cool); font-size: 17px; color: var(--text-ink); }
.dg-facts li:first-child { border-top: 0; }
.dg-facts .dg-icon { width: 22px; height: 22px; }
.dg-qv__buy { display: grid; gap: var(--space-2); }
.dg-qv__buy .dg-qty { width: 100%; justify-content: space-between; }
.dg-steps { margin: var(--space-4) 0 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); }
.dg-steps h3 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 21px; color: var(--text-heading); }
.dg-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--space-3); }
.dg-steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; font-size: 17px; line-height: 1.5; color: var(--text-ink); counter-increment: s; }
.dg-steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-panel); color: var(--text-heading); font-weight: 700; }

/* B14 Drawer menu */
.dg-drawer { width: min(100%, 360px); padding: var(--space-3); background: var(--bg-surface); box-shadow: 20px 0 50px rgba(15, 24, 82, 0.18); }
.dg-drawer__top { display: grid; grid-template-columns: var(--hit-min) 1fr var(--hit-min); align-items: center; margin-bottom: var(--space-3); }
.dg-drawer__top img { height: 46px; justify-self: center; }
.dg-drawer__nav { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.dg-drawer__item { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding-inline: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); color: var(--text-heading); font-size: 19px; font-weight: 600; text-decoration: none; }
.dg-drawer__item > .dg-icon:first-child { width: 28px; height: 28px; }
.dg-drawer__item > .dg-icon:last-child { margin-left: auto; width: 20px; height: 20px; }
.dg-drawer details { border-radius: var(--radius-md); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); background: var(--bg-surface); }
.dg-drawer details summary { list-style: none; border: 0; box-shadow: none; cursor: pointer; }
.dg-drawer details summary::-webkit-details-marker { display: none; }
.dg-drawer details[open] summary > .dg-icon:last-child { transform: rotate(180deg); }
.dg-drawer__sub { margin: 0; padding: 0 var(--space-3) var(--space-2) var(--space-3); list-style: none; }
.dg-drawer__sub a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-top: 1px solid var(--border-cool); color: var(--text-link); font-size: 17px; text-decoration: none; }
.dg-drawer__sub a .dg-icon { width: 18px; height: 18px; }
.dg-drawer__quick { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-cool); }
.dg-drawer__quick h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 22px; color: var(--text-heading); }
.dg-drawer__quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.dg-drawer__util { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); font-size: 16px; color: var(--text-heading); }
.dg-lang { display: inline-flex; border-radius: var(--radius-pill); border: 1px solid var(--border-cool); overflow: hidden; }
.dg-lang a { display: grid; place-items: center; min-width: 48px; min-height: 40px; color: var(--text-heading); font-weight: 700; text-decoration: none; }
.dg-lang a[aria-current="true"] { background: var(--action); color: var(--text-on-action); }
@media (hover: hover) and (pointer: fine) { .dg-drawer__item:hover { border-color: var(--text-link); } .dg-drawer__sub a:hover .dg-icon { transform: translateX(3px); } }

/* B15–B20 Cart */
.dg-cart-line { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); }
.dg-cart-line img { width: 84px; height: 84px; border-radius: var(--radius-sm); object-fit: contain; background: var(--bg-surface-warm); }
.dg-cart-line__top { display: flex; justify-content: space-between; gap: var(--space-2); }
.dg-cart-line__name { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--text-heading); }
.dg-cart-line__sum { font-size: 20px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dg-cart-line__unit { margin: 2px 0 0; font-size: 15px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.dg-cart-line__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.dg-cart-line .dg-hint { grid-column: 1 / -1; min-height: 0; padding: var(--space-2) var(--space-3); justify-items: start; text-align: left; }
.dg-remove { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit-min); border: 0; background: none; color: var(--danger); font: 500 16px var(--font-sans); cursor: pointer; }
.dg-remove .dg-icon { width: 20px; height: 20px; }
.dg-more-row { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px dashed var(--border-cool); color: var(--text-link); font-size: 17px; font-weight: 500; text-decoration: none; }
.dg-more-row .dg-icon { width: 20px; height: 20px; }

.dg-gifts { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-panel); border: 1px solid var(--border-cool); }
.dg-gifts__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dg-gifts__head .dg-icon { width: 34px; height: 34px; color: var(--gold-badge); }
.dg-gifts__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-heading); }
.dg-gifts__sub { margin: 2px 0 0; font-size: 16px; color: var(--text-ink); }
.dg-progress { position: relative; height: 10px; margin: var(--space-6) var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: #dbe6f2; }
.dg-progress__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold-rule), var(--gold-badge)); transition: width var(--dur-slow, .48s) var(--ease-out, ease); }
.dg-progress__stop { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.dg-progress__dot { width: 22px; height: 22px; border-radius: 50%; background: #dbe6f2; border: 3px solid var(--bg-panel); }
.dg-progress__stop.is-done .dg-progress__dot { background: var(--gold-badge); }
.dg-progress__stop .dg-icon { position: absolute; bottom: 26px; width: 24px; height: 24px; color: var(--text-subtle); }
.dg-progress__stop.is-done .dg-icon { color: var(--gold-badge); }
.dg-progress__stop span { position: absolute; top: 24px; font-size: 14px; font-weight: 700; color: var(--text-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }

.dg-summary { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.dg-summary__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-heading); }
.dg-summary__title .dg-icon { width: 26px; height: 26px; }
.dg-summary dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); margin: 0; font-size: 17px; }
.dg-summary dt { color: var(--text-ink); }
.dg-summary dd { margin: 0; text-align: right; color: var(--text-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-summary dd s { margin-right: 6px; color: var(--text-subtle); font-weight: 400; }
.dg-summary dd.is-good { color: var(--success); }
.dg-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-cool); }
.dg-summary__total span { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-heading); }
.dg-summary__total strong { font-size: 30px; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.dg-summary__note { margin: 4px 0 var(--space-3); font-size: 15px; color: var(--text-subtle); text-align: right; }

.dg-mini { display: grid; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); }
.dg-mini img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-surface-warm); }
.dg-mini__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--text-heading); }
.dg-mini__price { font-size: 18px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.dg-mini-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }

.dg-inforow { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); color: inherit; text-decoration: none; }
.dg-inforow > .dg-icon:first-child { width: 28px; height: 28px; }
.dg-inforow > .dg-icon:last-child { margin-left: auto; width: 20px; height: 20px; }
.dg-inforow strong { display: block; font-size: 17px; color: var(--text-heading); }
.dg-inforow span { font-size: 15px; color: var(--text-subtle); }

.dg-sticky { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--border-cool); box-shadow: 0 -8px 24px rgba(15, 24, 82, 0.10); backdrop-filter: blur(6px); }
.dg-sticky__sum small { display: block; font-size: 14px; color: var(--text-subtle); }
.dg-sticky__sum strong { font-size: 24px; color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* B21 Gift picker */
.dg-gift { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); }
.dg-gift img, .dg-gift__ph { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: contain; background: var(--bg-surface-warm); display: grid; place-items: center; }
.dg-gift__ph .dg-icon { width: 30px; height: 30px; color: var(--gold-badge); }
.dg-gift__name { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading); }
.dg-gift__price { margin: 2px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.dg-gift__price s { color: var(--text-subtle); margin-right: 6px; }
.dg-gift__price b { color: var(--success); }
.dg-gift.is-chosen { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

/* B22 Form fields */
.dg-field { display: grid; gap: 6px; }
.dg-field label, .dg-field__label { font-size: 16px; font-weight: 600; color: var(--text-heading); }
.dg-field label .dg-req { color: var(--danger); }
.dg-field label small { font-weight: 400; color: var(--text-subtle); }
.dg-input { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding-inline: var(--space-3); border-radius: var(--radius-sm); border: 1.5px solid var(--border-cool); background: var(--bg-surface); transition: border-color .2s ease, box-shadow .2s ease; }
.dg-input:focus-within { border-color: var(--text-link); box-shadow: 0 0 0 4px rgba(26, 58, 174, 0.12); }
.dg-input .dg-icon { width: 22px; height: 22px; }
.dg-input input, .dg-input select, .dg-input textarea { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 18px; color: var(--text-ink); outline: none; padding-block: 14px; }
.dg-input textarea { min-height: 96px; resize: vertical; }
.dg-input select { appearance: none; cursor: pointer; }
.dg-input input::placeholder, .dg-input textarea::placeholder { color: var(--text-subtle); opacity: .8; }
.dg-field.is-error .dg-input { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(212, 33, 43, 0.10); }
.dg-field__error { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; color: var(--danger); }
.dg-field__error .dg-icon { width: 18px; height: 18px; color: var(--danger); }
.dg-field__help { margin: 0; font-size: 15px; color: var(--text-subtle); }
.dg-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); }

/* B23 Choice: segmented, radio cards, checkbox, toggle */
.dg-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
.dg-segment button { min-height: 52px; padding-inline: var(--space-2); border-radius: var(--radius-sm); border: 1.5px solid var(--border-cool); background: var(--bg-surface); color: var(--text-heading); font: 500 16px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.dg-segment button[aria-pressed="true"] { border-color: var(--action); background: var(--bg-panel); font-weight: 700; box-shadow: inset 0 0 0 1px var(--action); }
.dg-radio-card { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--border-cool); background: var(--bg-surface); cursor: pointer; transition: all .2s ease; }
.dg-radio-card input { appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; border: 2px solid var(--text-subtle); display: grid; place-items: center; }
.dg-radio-card input:checked { border-color: var(--action); }
.dg-radio-card input:checked::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--action); }
.dg-radio-card:has(input:checked) { border-color: var(--action); background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--action); }
.dg-radio-card strong { display: block; font-size: 18px; color: var(--text-heading); }
.dg-radio-card span { font-size: 15px; color: var(--text-subtle); }
.dg-radio-card .dg-icon { width: 28px; height: 28px; }
.dg-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--hit-min); font-size: 17px; color: var(--text-ink); cursor: pointer; }
.dg-check input { appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 7px; border: 2px solid var(--text-subtle); background: var(--bg-surface); display: grid; place-items: center; flex: none; }
.dg-check input:checked { background: var(--action); border-color: var(--action); }
.dg-check input:checked::after { content: ""; width: 7px; height: 13px; margin-top: -3px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.dg-check a { color: var(--text-link); font-weight: 600; }
.dg-toggle { position: relative; width: 60px; height: 34px; flex: none; }
.dg-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dg-toggle span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: #c6d3e2; transition: background-color .2s ease; pointer-events: none; }
.dg-toggle span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform var(--dur-base, .26s) var(--ease-soft, ease); }
.dg-toggle input:checked + span { background: var(--action); }
.dg-toggle input:checked + span::after { transform: translateX(26px); }
.dg-toggle input:focus-visible + span { outline: var(--focus-ring) solid var(--text-accent); outline-offset: 2px; }

/* B24 Checkout progress */
.dg-steps-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); list-style: none; margin: 0; }
.dg-steps-bar li { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-subtle); white-space: nowrap; }
.dg-steps-bar li + li::before { content: ""; width: 18px; height: 2px; margin-right: 4px; background: var(--border-cool); }
.dg-steps-bar b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-chip); color: var(--text-heading); font-size: 14px; }
.dg-steps-bar li.is-current { color: var(--text-heading); }
.dg-steps-bar li.is-current b { background: var(--action); color: #fff; }
.dg-steps-bar li.is-done { color: var(--success); }
.dg-steps-bar li.is-done b { background: var(--success-soft); color: var(--success); }

/* Section card used across checkout and account */
.dg-section { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); display: grid; gap: var(--space-3); }
.dg-section__head { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-heading); }
.dg-section__head .dg-section__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-panel); }
.dg-section__head .dg-icon { width: 22px; height: 22px; }
.dg-review-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border-cool); }
.dg-review-row strong { display: block; font-size: 16px; color: var(--text-heading); }
.dg-review-row span { font-size: 15px; color: var(--text-subtle); }

/* B25 Order confirmation */
.dg-confirm { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-3) var(--space-3); text-align: center; }
.dg-confirm__icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--success-soft); }
.dg-confirm__icon .dg-icon { width: 44px; height: 44px; color: var(--success); }
.dg-confirm h1 { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 30px; line-height: 1.15; color: var(--text-heading); }
.dg-confirm p { margin: 0; font-size: 17px; color: var(--text-subtle); }
.dg-confirm p b { color: var(--text-heading); }
@keyframes dg-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.dg-confirm__icon { animation: dg-pop 600ms var(--ease-soft, ease) both; }
.dg-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.dg-channel { display: grid; justify-items: center; gap: 6px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-cool); background: var(--bg-surface); color: var(--text-heading); font-size: 16px; font-weight: 600; text-decoration: none; }
.dg-channel img, .dg-channel .dg-icon { width: 30px; height: 30px; }
@media (hover: hover) and (pointer: fine) { .dg-channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); } }

/* B28 Account menu */
.dg-profile-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-panel); border: 1px solid var(--border-cool); }
.dg-avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--bg-chip); flex: none; }
.dg-avatar .dg-icon { width: 36px; height: 36px; }
.dg-profile-card p { margin: 0; font-size: 17px; color: var(--text-subtle); }
.dg-profile-card strong { display: block; font-size: 20px; color: var(--text-heading); }
.dg-menu-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--space-3); min-height: 84px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: transform var(--dur-base, .26s) var(--ease-out, ease), box-shadow var(--dur-base, .26s) ease; }
.dg-menu-row__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-panel); }
.dg-menu-row__ic .dg-icon { width: 26px; height: 26px; }
.dg-menu-row strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--text-heading); }
.dg-menu-row span { font-size: 16px; color: var(--text-subtle); }
.dg-menu-row > .dg-icon { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .dg-menu-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); } .dg-menu-row:hover > .dg-icon { transform: translateX(3px); } }

/* B29 Setting card with toggle */
.dg-setting { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.dg-setting__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-panel); }
.dg-setting__ic .dg-icon { width: 30px; height: 30px; }
.dg-setting strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--text-heading); }
.dg-setting p { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--text-subtle); }
.dg-setting .dg-tag { margin-top: var(--space-2); }

/* B30 Address card */
.dg-address { border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); overflow: hidden; }
.dg-address__body { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); padding: var(--space-4); }
.dg-address__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-panel); }
.dg-address__ic .dg-icon { width: 30px; height: 30px; }
.dg-address strong { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-family: var(--font-display); font-size: 21px; color: var(--text-heading); }
.dg-address p { margin: 4px 0 0; font-size: 16px; color: var(--text-subtle); }
.dg-address__actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-cool); }
.dg-address__actions button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; border: 0; background: none; font: 600 17px var(--font-sans); color: var(--text-link); cursor: pointer; }
.dg-address__actions button + button { border-left: 1px solid var(--border-cool); color: var(--danger); }
.dg-address__actions .dg-icon { width: 20px; height: 20px; color: currentColor; }
.dg-add-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 56px; border-radius: var(--radius-md); border: 1.5px solid var(--action); background: var(--bg-surface); color: var(--text-heading); font: 600 18px var(--font-sans); cursor: pointer; }
.dg-add-btn .dg-icon { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .dg-add-btn:hover { background: var(--bg-panel); } .dg-address__actions button:hover { background: var(--bg-panel); } .dg-address__actions button + button:hover { background: var(--danger-soft); } }

/* B32 Orders */
.dg-order { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.dg-order__top { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3); }
.dg-order__no { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-heading); }
.dg-order__date { font-size: 15px; color: var(--text-subtle); text-align: right; font-variant-numeric: tabular-nums; }
.dg-order__sum { font-size: 24px; font-weight: 700; color: var(--text-heading); text-align: right; font-variant-numeric: tabular-nums; }
.dg-order__count { font-size: 16px; color: var(--text-subtle); }
.dg-order__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.dg-meta-bar { display: flex; align-items: center; justify-content: space-around; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-panel); font-size: 16px; color: var(--text-heading); }
.dg-meta-bar > span { display: inline-flex; align-items: center; gap: 6px; }
.dg-meta-bar .dg-icon { width: 22px; height: 22px; }
.dg-item-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-cool); }
.dg-item-row strong { display: block; font-size: 17px; line-height: 1.3; color: var(--text-heading); }
.dg-item-row span { font-size: 15px; color: var(--text-subtle); }
.dg-item-row b { display: block; margin-top: 4px; font-size: 19px; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.dg-icon-danger { display: grid; place-items: center; width: var(--hit-min); height: var(--hit-min); border: 0; border-radius: 50%; background: none; color: var(--danger); cursor: pointer; }
.dg-icon-danger .dg-icon { color: var(--danger); }
@media (hover: hover) and (pointer: fine) { .dg-icon-danger:hover { background: var(--danger-soft); } .dg-order:hover { box-shadow: var(--shadow-raised); } }

/* Narrow-screen fixes for B components */
.dg-buy { font-size: 15px; }
.dg-buy__label { min-width: 0; padding-inline: 8px; text-align: center; }
.dg-buy__sum { padding-inline: 10px; }
.dg-buy--block { font-size: 18px; }
.dg-mini { min-width: 0; }
.dg-mini .dg-btn { width: 100%; padding-inline: 8px; font-size: 15px; gap: 4px; }
.dg-field { min-width: 0; }
.dg-input input, .dg-input select, .dg-input textarea { width: 100%; }
.dg-steps-bar { flex-wrap: wrap; }
.dg-steps-bar b .dg-icon { width: 16px; height: 16px; color: currentColor; }
@media (max-width: 459px) { .dg-steps-bar li:not(.is-current) span { display: none; } .dg-steps-bar { justify-content: center; } }
.dg-options li button { display: block; position: relative; padding-block: 8px; padding-right: 44px; }
.dg-options li button .dg-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
/* Narrow tiles: the price moves under the label so both stay on one line each */
.dg-tile-p { container-type: inline-size; }
@container (max-width: 200px) {
  .dg-tile-p .dg-buy:not(.dg-buy--notify) { grid-template-columns: 1fr; }
  .dg-tile-p .dg-buy__label { padding-block: 8px 2px; }
  .dg-tile-p .dg-buy__sum { border-left: 0; background: none; padding-block: 0 8px; font-size: 17px; }
}
.dg-cart-line .dg-hint { display: flex; align-items: flex-start; gap: var(--space-2); }
.dg-cart-line .dg-hint .dg-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.dg-progress { margin: 48px var(--space-4) 40px; }

/* ===================== Screens at preview proportions (owner decisions 01.11.2026) =====================
   Visual language of Homepage Screen 01–08 on every page (menu and inner pages too); structure of each screen's
   approved preview; sizes = the preview's pixels times a column unit (--px, --q, --d). Text never sits on a photo. */

/* Overlay shell used by menu, search, Quick View, notify and sheets */
.pt-overlay { position: fixed; inset: 0; z-index: 100; display: flex; }
.pt-overlay[hidden] { display: none; }
.pt-scrim-fill { flex: 1; }
.pt-social-link { display: inline-grid; place-items: center; }
@keyframes pt-drawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Homepage + footer, laid out after Screen 01–08 FINAL LOCKED.
   Every size is the PNG measurement (941px-wide frame) times --px, so the phone layout keeps the PNG proportions.
   Text never goes below 15px (owner rule for older customers): max(15px, …). */

/* --px follows the page column (container units), never the viewport, so a wide element cannot feed back into the scale */
.hp, .hf { container-type: inline-size; }
.hp > *, .hf > * { --px: calc(min(100cqw, 560px) / 941); }
.hp { max-width: 560px; margin-inline: auto; overflow: hidden; }
.hp img { display: block; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared type */
.hp-h2 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.06; color: var(--text-heading); text-wrap: balance; }
.hp-sub { margin: calc(8 * var(--px)) 0 0; font-size: max(15px, calc(22 * var(--px))); line-height: 1.35; color: var(--text-subtle); }
.hp-note { position: absolute; z-index: 2; font-family: var(--font-script); font-size: max(16px, calc(27 * var(--px))); line-height: 1.12; color: var(--gold-script); transform: rotate(-9deg); pointer-events: none; }
.hp-note--blue { color: var(--script-blue); }
.hp-title { position: relative; text-align: center; }
.hp-title .dg-chip { margin-top: calc(14 * var(--px)); }

/* Buttons sized from the PNG */
.hp .dg-btn { min-height: max(44px, calc(56 * var(--px))); padding-inline: max(16px, calc(36 * var(--px))); font-size: max(15px, calc(21 * var(--px))); white-space: nowrap; }

/* ---------- Screen 01 ---------- */
.hp-hero { margin: calc(4 * var(--px)) calc(18 * var(--px)) 0; aspect-ratio: 904 / 456; border-radius: calc(30 * var(--px)); overflow: hidden; box-shadow: var(--shadow-card); }
.hp-hero img { width: 100%; height: 100%; object-fit: cover; animation: dg-settle 1400ms var(--ease-out) both; }
.hp-h1 { margin: calc(26 * var(--px)) calc(14 * var(--px)) 0; font-family: var(--font-display); font-size: max(21px, calc(55 * var(--px))); line-height: 1.08; font-weight: 700; text-align: center; color: var(--text-heading); }
.hp-h1sub { margin: calc(8 * var(--px)) 0 0; text-align: center; font-size: max(15px, calc(26 * var(--px))); letter-spacing: .03em; color: var(--text-subtle); }
.hp-regular { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: calc(26 * var(--px)) calc(22 * var(--px)) 0; padding: calc(26 * var(--px)) calc(34 * var(--px)) calc(26 * var(--px)) calc(40 * var(--px)); border-radius: calc(28 * var(--px)); background: var(--bg-panel); }
.hp-regular p { margin: 0; }
.hp-regular__title { font-size: max(17px, calc(35 * var(--px))); font-weight: 600; line-height: 1.2; color: var(--text-heading); }
.hp-regular__sub { font-size: max(15px, calc(22 * var(--px))); letter-spacing: .02em; color: var(--text-subtle); }
.hp-regular__btns { display: flex; gap: max(6px, calc(36 * var(--px))); flex: none; }
.hp-regular .dg-icon-btn { width: max(44px, calc(78 * var(--px))); height: max(44px, calc(78 * var(--px))); }
.hp-regular .dg-icon-btn .dg-icon, .hp-regular .dg-brand { width: 22px; height: 22px; }

.hp-band { margin: calc(24 * var(--px)) calc(4 * var(--px)) 0; padding: calc(30 * var(--px)) calc(18 * var(--px)) calc(34 * var(--px)); border-radius: calc(44 * var(--px)) calc(44 * var(--px)) 0 0; background: linear-gradient(180deg, #ffffff 0, var(--bg-surface-warm) 30%, var(--bg-page) 100%); box-shadow: 0 -4px 16px rgba(60, 40, 20, .05); }
.hp-band .hp-h2 { font-size: max(23px, calc(50 * var(--px))); text-align: center; }
.hp-band__script { display: block; margin-top: calc(4 * var(--px)); text-align: center; font-family: var(--font-script); font-size: max(17px, calc(32 * var(--px))); color: var(--script-blue); }
.hp-cats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--px)); margin-top: calc(22 * var(--px)); }
.hp-cat { position: relative; display: flex; align-items: center; min-height: max(62px, calc(130 * var(--px))); padding: 6px calc(12 * var(--px)) 6px 37%; border-radius: calc(20 * var(--px)); background: var(--bg-surface-warm); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); color: var(--text-heading); text-decoration: none; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hp-cat img { position: absolute; left: 0; top: 0; width: 58%; height: 100%; object-fit: cover; object-position: left center; -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%); mask-image: linear-gradient(90deg, #000 62%, transparent 100%); transition: transform var(--dur-slow) var(--ease-out); }
.hp-cat span { position: relative; flex: 1; min-width: 0; padding-left: 4px; font-family: var(--font-display); font-size: max(15px, calc(26 * var(--px))); line-height: 1.12; font-weight: 700; text-shadow: 0 0 6px var(--bg-surface-warm), 0 0 3px var(--bg-surface-warm); }
.hp-cat .dg-icon { position: relative; width: 18px; height: 18px; flex: none; }
.hp-wave { display: block; width: 100%; height: calc(70 * var(--px)); margin-top: -1px; }

/* ---------- Screen 02 ---------- */
.hp-s02 { padding-top: calc(30 * var(--px)); background: linear-gradient(180deg, var(--bg-page), #fdf9f4 50%, var(--bg-page)); }
.hp-s02 .hp-title { padding: 0 17%; }
.hp-s02 .hp-h2 { font-size: max(21px, calc(54 * var(--px))); }
.hp-sols { display: grid; gap: calc(10 * var(--px)); margin: calc(22 * var(--px)) calc(22 * var(--px)) 0; }
.hp-sol { position: relative; min-height: max(150px, calc(180 * var(--px))); border-radius: calc(26 * var(--px)); background: rgba(255, 255, 255, .78); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hp-sol__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; object-fit: cover; object-position: left center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); transition: transform var(--dur-slow) var(--ease-out); }
.hp-sol__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--px)); width: 62%; padding: calc(16 * var(--px)) 0 calc(18 * var(--px)) calc(34 * var(--px)); }
.hp-sol__title { margin: 0; font-family: var(--font-display); font-size: max(20px, calc(44 * var(--px))); line-height: 1.02; font-weight: 700; color: var(--text-heading); }
.hp-sol__tags { margin: 0 0 calc(10 * var(--px)); font-size: max(15px, calc(19 * var(--px))); line-height: 1.3; color: var(--text-ink); text-shadow: 0 0 6px #fff; }
.hp-sol--blue { background: var(--bg-panel); border-color: var(--border-cool); }
.hp-sol--blue .hp-sol__photo { width: 42%; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.hp-sol--blue .hp-sol__body { width: 64%; }
.hp-s02 .hp-foot-img { width: 100%; margin-top: calc(-4 * var(--px)); }

/* ---------- Screen 03 ---------- */
.hp-s03 { padding-top: calc(40 * var(--px)); }
.hp-s03 .hp-h2 { font-size: max(28px, calc(76 * var(--px))); }
.hp-s03 .hp-sub { max-width: 66%; margin-inline: auto; }
.hp-prods { display: grid; gap: calc(16 * var(--px)); margin: calc(26 * var(--px)) calc(28 * var(--px)) 0; }
.hp-prod { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: calc(24 * var(--px)); padding: calc(5 * var(--px)); border-radius: calc(24 * var(--px)); background: rgba(255, 255, 255, .86); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hp-prod__media { border-radius: calc(18 * var(--px)); overflow: hidden; }
.hp-prod__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: left top; transition: transform var(--dur-slow) var(--ease-out); }
.hp-prod__body { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-width: 0; padding: calc(12 * var(--px)) calc(10 * var(--px)) calc(10 * var(--px)) 0; }
.hp-prod__name { margin: 0; font-family: var(--font-display); font-size: max(17px, calc(37 * var(--px))); line-height: 1.04; font-weight: 700; color: var(--text-heading); }
.hp-prod__facts { margin: 0; font-size: max(15px, calc(22 * var(--px))); color: var(--text-subtle); }
.hp-prod__price { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.hp-prod__price strong { font-size: max(22px, calc(42 * var(--px))); line-height: 1.1; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.hp-prod__price .dg-price-chip { min-height: 0; padding: 3px 10px; font-size: max(15px, calc(20 * var(--px))); }
.hp-prod__buy { display: flex; align-items: center; gap: calc(20 * var(--px)); flex-wrap: wrap; }
.hp-prod__buy .dg-qty { height: max(44px, calc(58 * var(--px))); }
.hp-prod__buy .dg-qty button { width: 40px; }
.hp-prod__buy .dg-btn { flex: 1 1 auto; min-height: max(44px, calc(62 * var(--px))); padding-inline: 14px; font-size: max(16px, calc(24 * var(--px))); }
.hp-prod .dg-link { min-height: 36px; font-size: max(15px, calc(22 * var(--px))); }
.hp-wide-cta { display: flex !important; width: auto; margin: calc(16 * var(--px)) calc(72 * var(--px)) 0; }

/* ---------- Screen 04 ---------- */
.hp-s04 { padding-top: calc(44 * var(--px)); }
.hp-s04 .hp-title { padding: 0 15%; }
.hp-s04 .hp-h2 { font-size: max(26px, calc(70 * var(--px))); }
.hp-promos { display: grid; gap: calc(18 * var(--px)); margin: calc(22 * var(--px)) calc(26 * var(--px)) 0; }
.hp-promo { position: relative; min-height: calc(460 * var(--px)); border-radius: calc(26 * var(--px)); background: #fffdfa; border: 1px solid var(--border-warm); box-shadow: var(--shadow-raised); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hp-promo__photo { position: absolute; left: 0; top: 0; width: 62%; height: 100%; object-fit: cover; object-position: left top; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, #000 78%, transparent 100%); transition: transform var(--dur-slow) var(--ease-out); }
.hp-promo__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: calc(8 * var(--px)); margin-left: 62%; padding: calc(40 * var(--px)) calc(16 * var(--px)) calc(110 * var(--px)) 4px; }
.hp-promo__title { margin: 0; font-family: var(--font-display); font-size: max(20px, calc(52 * var(--px))); line-height: 1.04; font-weight: 700; color: var(--text-heading); }
.hp-promo__sub { margin: 0; font-size: max(15px, calc(23 * var(--px))); line-height: 1.3; color: var(--text-subtle); }
.hp-promo__sub--serif { font-family: var(--font-display); font-weight: 600; color: var(--text-heading); }
.hp-promo .dg-btn { position: absolute; z-index: 2; right: calc(18 * var(--px)); bottom: calc(22 * var(--px)); }
.hp-promo--md { min-height: calc(310 * var(--px)); box-shadow: var(--shadow-card); }
.hp-promo--md .hp-promo__photo { width: 60%; }
.hp-promo--md .hp-promo__body { margin-left: 60%; padding-top: calc(28 * var(--px)); padding-bottom: calc(100 * var(--px)); }
.hp-promo--md .hp-promo__title { font-size: max(18px, calc(40 * var(--px))); }
.hp-promo--md .hp-promo__sub { font-size: max(15px, calc(18 * var(--px))); }
.hp-promo--md .hp-promo__sub--serif { font-size: max(15px, calc(26 * var(--px))); }
.hp-more { position: relative; margin: calc(18 * var(--px)) calc(26 * var(--px)) 0; padding: calc(30 * var(--px)) calc(30 * var(--px)) calc(26 * var(--px)); border-radius: calc(26 * var(--px)); background: var(--bg-panel); border: 1px solid var(--border-cool); text-align: center; }
.hp-more .hp-h2 { padding: 0 18%; font-size: max(22px, calc(50 * var(--px))); }
.hp-more__btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(26 * var(--px)); margin-top: calc(26 * var(--px)); }
.hp-more .dg-btn { justify-content: center; gap: 6px; padding-inline: 10px; white-space: normal; line-height: 1.15; min-height: max(52px, calc(70 * var(--px))); }

/* ---------- Screen 05 ---------- */
.hp-s05 { padding-top: calc(50 * var(--px)); }
.hp-s05 .hp-h2 { font-size: max(29px, calc(78 * var(--px))); }
.hp-s05 .hp-sub { font-size: max(16px, calc(32 * var(--px))); color: var(--text-ink); max-width: 76%; margin-inline: auto; }
.hp-infos { display: grid; gap: calc(22 * var(--px)); margin: calc(26 * var(--px)) calc(34 * var(--px)) 0; }
.hp-infos .dg-info { min-height: max(96px, calc(190 * var(--px))); border-radius: calc(26 * var(--px)); grid-template-columns: max(84px, calc(200 * var(--px))) 1fr auto; padding-right: calc(30 * var(--px)); }
.hp-infos .dg-info img { width: 100%; height: auto; max-height: 84px; }
.hp-infos .dg-info__title { font-size: max(18px, calc(35 * var(--px))); }
.hp-infos .dg-info__text { font-size: max(15px, calc(24 * var(--px))); }
.hp-infos .dg-info > .dg-icon { width: 24px; height: 24px; }
.hp-infos .dg-help { flex-wrap: nowrap; padding: calc(22 * var(--px)) calc(18 * var(--px)) calc(22 * var(--px)) calc(30 * var(--px)); border-radius: calc(26 * var(--px)); }
.hp-infos .dg-help > .dg-icon { width: 30px; height: 30px; }
.hp-infos .dg-help .dg-btn { flex: none; }
.hp-decor { width: 100%; height: auto; margin-top: calc(-8 * var(--px)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }

/* ---------- Screen 06 ---------- */
.hp-s06 { position: relative; padding-top: calc(60 * var(--px)); }
.hp-why__photo { position: absolute; top: calc(10 * var(--px)); right: 0; width: 37.1%; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 20%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 20%); mask-composite: intersect; }
.hp-why__text { position: relative; z-index: 1; width: 66%; padding-left: calc(62 * var(--px)); }
.hp-why__text .hp-h2 { font-size: max(22px, calc(56 * var(--px))); line-height: 1.12; color: var(--text-ink); }
.hp-why__text .hp-h2 em { display: block; font-style: normal; font-weight: 600; color: var(--text-accent); }
.hp-why__rule { display: block; width: calc(140 * var(--px)); height: 4px; margin: calc(30 * var(--px)) 0 calc(24 * var(--px)); border-radius: 99px; background: var(--gold-rule); }
.hp-why__text p { margin: 0; font-size: max(16px, calc(27 * var(--px))); line-height: 1.4; color: var(--text-ink); }
.hp-s06 .dg-benefits { position: relative; z-index: 1; gap: calc(16 * var(--px)); margin: calc(44 * var(--px)) calc(50 * var(--px)) 0; }
.hp-s06 .dg-benefit { border-radius: calc(26 * var(--px)); padding: calc(18 * var(--px)) 8px calc(24 * var(--px)); }
.hp-s06 .dg-benefit__icon { width: max(52px, calc(120 * var(--px))); height: max(52px, calc(120 * var(--px))); }
.hp-s06 .dg-benefit__title { font-size: max(16px, calc(31 * var(--px))); }
.hp-s06 .dg-benefit__text { font-size: max(15px, calc(23 * var(--px))); }
.hp-center-cta { display: flex; justify-content: center; margin-top: calc(26 * var(--px)); }
.hp-center-cta .dg-btn { min-width: min(100%, calc(632 * var(--px))); min-height: max(48px, calc(80 * var(--px))); font-size: max(17px, calc(28 * var(--px))); }

/* ---------- Screen 07 ---------- */
.hp-s07 { position: relative; padding-top: calc(40 * var(--px)); }
.hp-s07__head { position: relative; padding: 0 calc(34 * var(--px)) 0 calc(58 * var(--px)); }
.hp-s07 .hp-h2 { width: 68%; font-size: max(26px, calc(66 * var(--px))); }
.hp-s07__sub { margin: calc(10 * var(--px)) 0 0; width: 64%; font-size: max(16px, calc(30 * var(--px))); line-height: 1.3; color: var(--text-link); }
.hp-revs { display: grid; gap: calc(16 * var(--px)); margin: calc(20 * var(--px)) calc(24 * var(--px)) 0; }
.hp-revs .dg-review { gap: calc(14 * var(--px)); padding: calc(26 * var(--px)) calc(26 * var(--px)) calc(22 * var(--px)) calc(56 * var(--px)); border-radius: calc(26 * var(--px)); }
.hp-revs .dg-review__top { gap: 10px; flex-wrap: nowrap; }
.hp-revs .dg-review__quote { font-size: max(40px, calc(80 * var(--px))); height: 20px; line-height: .55; }
.hp-revs .dg-review__stars .dg-icon { width: max(16px, calc(32 * var(--px))); height: max(16px, calc(32 * var(--px))); }
.hp-revs .dg-review__top .dg-brand { width: 20px; height: 20px; }
.hp-revs .dg-chip { min-height: 30px; padding-inline: 10px; font-size: 15px; white-space: nowrap; }
.hp-revs .dg-review__text { font-size: max(16px, calc(31 * var(--px))); line-height: 1.35; }
.hp-revs .dg-review__avatar { width: max(44px, calc(76 * var(--px))); height: max(44px, calc(76 * var(--px))); }
.hp-revs .dg-review__role { font-size: max(15px, calc(21 * var(--px))); }
.hp-revs .dg-review__name { font-size: max(15px, calc(19 * var(--px))); }
.hp-cta-stack { display: grid; justify-items: center; gap: calc(10 * var(--px)); margin-top: calc(10 * var(--px)); }
.hp-cta-stack .dg-btn { width: max(260px, calc(505 * var(--px))); min-height: max(44px, calc(64 * var(--px))); font-size: max(16px, calc(25 * var(--px))); }

/* ---------- Footer (Screen 08) ---------- */
.hf { position: relative; max-width: 560px; margin-inline: auto; padding-top: calc(20 * var(--px)); background: radial-gradient(120% 40% at 20% 0, #ffffff 0, transparent 60%), linear-gradient(180deg, var(--bg-page) 0, #f1f7fd 30%, #eaf4fc 100%); overflow: hidden; }
.hf h2, .hf h3 { font-family: var(--font-sans); font-weight: 700; color: var(--text-heading); }
.hf-head { position: relative; padding: calc(20 * var(--px)) calc(40 * var(--px)) 0 calc(58 * var(--px)); }
.hf-head h2 { margin: 0; width: 62%; font-size: max(24px, calc(50 * var(--px))); line-height: 1.02; letter-spacing: -.01em; }
.hf-head p { margin: calc(10 * var(--px)) 0 0; width: 72%; font-size: max(15px, calc(25 * var(--px))); line-height: 1.3; color: var(--text-ink); }
.hf-rule { display: block; width: calc(112 * var(--px)); height: 4px; margin-top: 6px; border-radius: 99px; background: var(--gold-rule); }
.hf-body { display: grid; gap: calc(16 * var(--px)); padding: calc(28 * var(--px)) calc(40 * var(--px)) calc(40 * var(--px)); }
.hf .dg-tiles { gap: calc(14 * var(--px)); }
.hf .dg-tile { min-height: max(76px, calc(128 * var(--px))); border-radius: calc(22 * var(--px)); font-size: 15px; padding-inline: 2px; }
.hf .dg-tile .dg-icon { width: 26px; height: 26px; }
.hf-acc { display: grid; gap: calc(14 * var(--px)); }
.hf-acc .dg-acc + .dg-acc { margin-top: 0; }
.hf-acc .dg-acc { border-radius: calc(20 * var(--px)); }
.hf-acc .dg-acc summary { min-height: max(52px, calc(68 * var(--px))); font-size: max(15px, calc(26 * var(--px))); padding-inline: calc(32 * var(--px)); gap: calc(40 * var(--px)); }
.hf-card { border-radius: calc(26 * var(--px)); padding: calc(22 * var(--px)) calc(26 * var(--px)); }
.hf-card h3 { margin: 0; font-size: max(20px, calc(37 * var(--px))); line-height: 1.15; }
.hf-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.hf-card__head .dg-link { min-height: 32px; font-size: 15px; }
.hf-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: calc(26 * var(--px)); background: var(--bg-panel); border: 1px solid var(--border-cool); }
.hf-contact .dg-contact__row { gap: 8px; min-height: max(44px, calc(58 * var(--px))); font-size: max(15px, calc(26 * var(--px))); line-height: 1.2; }
.hf-contact .dg-contact__dot { width: max(30px, calc(52 * var(--px))); height: max(30px, calc(52 * var(--px))); }
.hf-hours { padding-left: calc(26 * var(--px)); border-left: 1px solid var(--border-cool); }
.hf-hours h4 { display: flex; align-items: center; gap: 6px; margin: calc(10 * var(--px)) 0 calc(14 * var(--px)); font-size: max(15px, calc(24 * var(--px))); color: var(--text-heading); }
.hf-hours h4 .dg-icon { width: 20px; height: 20px; }
.hf-hours p { margin: 0; font-size: max(15px, calc(23 * var(--px))); color: var(--text-ink); }
.hf-hours strong { display: block; font-size: max(16px, calc(26 * var(--px))); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.hf-hours hr { margin: calc(14 * var(--px)) 0; border: 0; border-top: 1px solid var(--border-cool); }
.hf-pay { background: var(--pastel-cream); border: 1px solid var(--border-warm); }
.hf-pay__row { display: flex; align-items: center; gap: calc(16 * var(--px)) 8px; flex-wrap: wrap; margin-top: calc(18 * var(--px)); }
.hf-pay__row .dg-pay__item { gap: 6px; font-size: 15px; }
.hf-pay__row .dg-pay__item .dg-icon { width: 26px; height: 26px; }
.hf-social { background: var(--bg-panel); border: 1px solid var(--border-cool); }
.hf-social__row { display: flex; align-items: center; gap: 10px; margin-top: calc(14 * var(--px)); }
.hf-social__icons { display: flex; gap: max(4px, calc(26 * var(--px))); flex: none; }
.hf-social__icons .dg-brand { width: max(30px, calc(58 * var(--px))); height: max(30px, calc(58 * var(--px))); }
.hf-social__text { flex: 1; min-width: 0; margin: 0; padding-left: 10px; border-left: 1px solid var(--border-cool); font-size: 15px; line-height: 1.3; color: var(--text-ink); }
.hf-heart { flex: none; font-size: 24px; color: var(--gold-rule); }
.hf-partners { position: relative; z-index: 1; background: #ffffff; border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.hf-partners__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--px)); margin-top: calc(14 * var(--px)); }
.hf-partners .dg-partner { grid-template-columns: max(40px, calc(120 * var(--px))) 1fr auto; gap: 6px; padding: 6px; }
.hf-partners .dg-partner img { width: 100%; height: 34px; }
.hf-partners .dg-partner__name { font-size: 15px; }
.hf-partners .dg-partner__url { font-size: 15px; overflow-wrap: anywhere; }
.hf-partners .dg-partner > .dg-icon { width: 16px; height: 16px; }
.hf-band { position: relative; margin-top: calc(-70 * var(--px)); padding: calc(90 * var(--px)) calc(56 * var(--px)) calc(30 * var(--px)); background: linear-gradient(180deg, #0a5a86 0, var(--footer-band) 40%, #013e5f 100%); color: #ffffff; text-align: center; }
.hf-band::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-40 * var(--px)); height: calc(80 * var(--px)); background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hf-band > * { position: relative; }
.hf-band__logo { width: max(150px, calc(320 * var(--px))); margin: 0 auto; }
.hf-band__heart { position: absolute; right: calc(54 * var(--px)); top: calc(150 * var(--px)); font-size: max(24px, calc(44 * var(--px))); color: var(--gold-rule); }
.hf-band ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; margin: calc(14 * var(--px)) 0 0; padding: calc(14 * var(--px)) 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .55); }
.hf-band li { display: flex; align-items: center; }
.hf-band li + li::before { content: "|"; margin-inline: 8px; opacity: .8; }
.hf-band a { display: inline-flex; align-items: center; min-height: 36px; color: #ffffff; text-decoration: none; font-size: 15px; }
.hf-band__copy { margin: calc(14 * var(--px)) 0 0; font-size: 15px; color: rgba(255, 255, 255, .9); }

/* Hover (mouse only) */
@media (hover: hover) and (pointer: fine) {
  .hp-cat:hover, .hp-sol:hover, .hp-prod:hover, .hp-promo:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-raised); }
  .hp-cat:hover img, .hp-sol:hover .hp-sol__photo, .hp-prod:hover .hp-prod__media img, .hp-promo:hover .hp-promo__photo { transform: scale(var(--img-zoom)); }
  .hp-cat:hover .dg-icon { transform: translateX(3px); }
  .hf-band a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* ===== Desktop: the same compositions, PNG pixels at 1:1, wider grids ===== */
@media (min-width: 900px) {
  .hp, .hf { max-width: var(--content-max); }
  .hp > *, .hf > * { --px: 1px; }
  .hp-hero { aspect-ratio: auto; height: 456px; }
  .hp-cats { grid-template-columns: repeat(4, 1fr); }
  .hp-sols { grid-template-columns: 1fr 1fr; }
  .hp-sol--blue { grid-column: 1 / -1; }
  .hp-sol--blue .hp-sol__photo { width: 38%; }
  .hp-prods { grid-template-columns: 1fr 1fr; }
  .hp-promos { grid-template-columns: 1fr 1fr; }
  .hp-promos > :first-child { grid-column: 1 / -1; }
  .hp-promo:first-child .hp-promo__photo { width: 48%; }
  .hp-promo:first-child .hp-promo__body { margin-left: 50%; }
  .hp-promo--md { min-height: 340px; }
  .hp-more__btns { max-width: 860px; margin-inline: auto; }
  .hp-infos { grid-template-columns: 1fr 1fr; }
  .hp-infos .dg-help { grid-column: 1 / -1; }
  .hp-s06 .dg-benefits { grid-template-columns: repeat(4, 1fr); margin-top: 60px; }
  .hp-why__photo { width: 30%; right: 4%; }
  .hp-why__text { padding-top: 40px; }
  .hp-revs { grid-template-columns: repeat(3, 1fr); }
  .hp-decor, .hp-s02 .hp-foot-img { height: 300px; object-fit: cover; }
  .hp-s07 .hp-h2, .hp-s07__sub { width: 60%; }
  .hf-body { grid-template-columns: 1fr 1fr; }
  .hf-body > .dg-tiles, .hf-body > .hf-acc, .hf-body > .hf-partners { grid-column: 1 / -1; }
  .hf-acc { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .hf-head h2 { width: 50%; }
}

/* Phone fixes after the side-by-side check with the PNGs */
.hp-regular__btns { gap: 8px; }
.hp-regular > div:first-child { min-width: 0; }
.hp-cat { padding-left: 33%; }
.hp-cat span { letter-spacing: -.01em; }
.hf-body > * { min-width: 0; }
.hf .dg-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hp-sol__photo { height: 100%; }
.hp-note { max-width: 21%; }
.hp-s02 .hp-title, .hp-s04 .hp-title { padding-inline: 21%; }
@media (min-width: 900px) { .hp-note { max-width: 18%; } .hp-s02 .hp-title, .hp-s04 .hp-title { padding-inline: 20%; } }
.hp-sol__photo { object-position: 35% center; }
.hp-sol__body { width: 66%; }
.hp-prod__media { position: relative; }
.hp-prod__media img { object-position: 30% center; }
.hp-prod__media .dg-badge { position: absolute; top: 8px; left: 6px; height: 30px; padding-inline: 8px 12px; font-size: 16px; }
.hp-s03 .hp-sub { max-width: 56%; }
.hp-promo__body, .hp-promo--md .hp-promo__body { padding-bottom: calc(max(44px, calc(56 * var(--px))) + calc(22 * var(--px)) + 14px); }
.hp-s04 .hp-h2 { font-size: max(24px, calc(64 * var(--px))); }
.hf-social__icons { gap: 6px; }
.hf-social__icons .dg-brand { width: 34px; height: 34px; }
.hf-social__icons .pt-social-link { min-width: 40px; }
@media (max-width: 599px) {
  .hf-partners__grid { grid-template-columns: 1fr; }
  .hf-band ul { gap: 0 16px; }
  .hf-band li + li::before { content: none; }
}
.hp-revs > *, .hp-prods > *, .hp-promos > *, .hp-sols > *, .hp-cats > *, .hp-infos > * { min-width: 0; }
@media (min-width: 900px) {
  .hp-revs .dg-review__top { flex-wrap: wrap; }
  .hp-revs .dg-review { padding-left: 28px; }
  .hp-revs .dg-review__text { font-size: 20px; }
  .hp-cat { padding-left: 46%; }
  .hp-cat span { font-size: 21px; }
}
@media (min-width: 900px) { .hp-s02 .hp-foot-img { height: auto; } }

/* ===== Owner rule (01.11.2026): text never sits on a photo. Photo and text get separate zones. ===== */
/* Categories: photo column takes what the name leaves; the name column is as wide as its longest line */
.hp-cat { display: grid; grid-template-columns: minmax(0, 1fr) max-content 16px; gap: 6px; padding: 0 8px 0 0; }
.hp-cat img { position: static; width: 100%; height: 100%; min-height: max(62px, calc(130 * var(--px))); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, #000 85%, transparent 100%); }
.hp-cat span { padding: 6px 0; text-shadow: none; letter-spacing: 0; }
@media (min-width: 900px) { .hp-cat { padding-left: 0; } }

/* Solutions: the photo starts where the text column ends */
.hp-sol__body, .hp-sol--blue .hp-sol__body { width: 60%; padding-right: 8px; }
.hp-sol__photo, .hp-sol--blue .hp-sol__photo { width: 40%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.hp-sol__tags { text-shadow: none; }
@media (min-width: 900px) { .hp-sol--blue .hp-sol__body { width: 60%; } .hp-sol--blue .hp-sol__photo { width: 40%; } }

/* Promos: photo | text in one row, the button in its own row under them (never over the photo) */
.hp-promo { display: grid; grid-template-columns: 58% minmax(0, 1fr); grid-template-rows: 1fr auto; }
.hp-promo__photo, .hp-promo--md .hp-promo__photo { position: static; grid-row: 1; grid-column: 1; width: 100%; height: 100%; min-height: max(150px, calc(300 * var(--px))); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
.hp-promo__body, .hp-promo--md .hp-promo__body { grid-row: 1; grid-column: 2; margin-left: 0; padding: calc(30 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)) 8px; }
.hp-promo .dg-btn { position: static; grid-row: 2; grid-column: 1 / -1; justify-self: end; margin: 0 calc(18 * var(--px)) calc(18 * var(--px)); }
@media (min-width: 900px) {
  .hp-promo:first-child { grid-template-columns: 50% 1fr; }
  .hp-promo:first-child .hp-promo__photo { width: 100%; }
  .hp-promo:first-child .hp-promo__body { margin-left: 0; }
}

/* Screen 06: the statement column stops before the photo */
.hp-why__text { width: 61%; }
/* "Още идеи": the button is wider than the text column on phones, so the photo goes under the text */
@media (max-width: 599px) {
  .hp-sol--blue { display: flex; flex-direction: column; }
  .hp-sol--blue .hp-sol__body { width: 100%; padding-right: calc(34 * var(--px)); }
  .hp-sol--blue .hp-sol__photo { position: static; width: 100%; height: 120px; object-position: center; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
}
@media (min-width: 900px) {
  .hp-s06 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 24px; }
  .hp-s06 > * { grid-column: 1 / -1; }
  .hp-s06 .hp-why__photo { position: static; grid-column: 2; grid-row: 1; width: 100%; height: 440px; object-fit: cover; object-position: center top; }
  .hp-s06 .hp-why__text { grid-column: 1; grid-row: 1; width: auto; align-self: center; }
}
.hp-decor { margin-top: 12px; }

/* ===== Owner request 01.11.2026: Screen 02, buttons and category names at the exact PNG proportions (no 15px floor) ===== */
.hp .dg-btn { min-height: calc(54 * var(--px)); padding-inline: calc(36 * var(--px)); font-size: calc(21 * var(--px)); gap: calc(14 * var(--px)); }
.hp .dg-btn .dg-icon { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.hp-cat span { font-size: calc(26 * var(--px)); }
.hp-cat img { min-height: calc(130 * var(--px)); }
.hp-cat { min-height: calc(130 * var(--px)); }
.hp-cat .dg-icon { width: calc(30 * var(--px)); height: calc(30 * var(--px)); }

.hp-s02 .hp-title { padding-inline: 19%; }
.hp-s02 .hp-h2 { font-size: calc(52 * var(--px)); line-height: 1.08; }
.hp-s02 .hp-sub { font-size: calc(21 * var(--px)); }
.hp-s02 .hp-note { font-size: calc(27 * var(--px)); }
.hp-sol { min-height: calc(172 * var(--px)); border-radius: calc(24 * var(--px)); }
.hp-sol:first-child { min-height: calc(196 * var(--px)); }
.hp-sol__body, .hp-sol--blue .hp-sol__body { width: 43%; gap: calc(4 * var(--px)); padding: calc(14 * var(--px)) 0 calc(16 * var(--px)) calc(34 * var(--px)); }
.hp-sol__title { font-size: calc(44 * var(--px)); line-height: 1; }
.hp-sol__tags { margin-bottom: calc(14 * var(--px)); font-size: calc(18.5 * var(--px)); line-height: 1.25; white-space: nowrap; }
.hp-sol__photo { left: 41%; width: 59%; object-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.hp-sol--blue { display: block; min-height: calc(190 * var(--px)); }
.hp-sol--blue .hp-sol__body { width: 50%; padding-right: 0; }
.hp-sol--blue .hp-sol__photo { position: absolute; left: 50%; width: 50%; height: 100%; object-position: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
.hp-sol--blue .hp-sol__tags { white-space: normal; }
.hp-s02 .hp-title { padding-inline: 16%; }
.hp-s02 .hp-h2 { font-size: calc(49 * var(--px)); white-space: nowrap; }
.hp-s02 .hp-note { max-width: 16%; font-size: calc(25 * var(--px)); }
.hp-sol__title { white-space: nowrap; }
.hp-sol:not(.hp-sol--blue) .hp-sol__photo { object-position: right center; }
.hp-s02 .hp-note { white-space: nowrap; max-width: none; }
.hp-sol--blue .hp-sol__title { font-size: calc(40 * var(--px)); }

/* ===== Screen 03 at the exact PNG proportions (owner request 01.11.2026) ===== */
.hp-s03 .hp-h2 { font-size: calc(76 * var(--px)); }
.hp-s03 .hp-sub { max-width: none; font-size: calc(25 * var(--px)); }
.hp-s03 .dg-chip { min-height: calc(46 * var(--px)); padding-inline: calc(24 * var(--px)); gap: calc(14 * var(--px)); font-size: calc(22 * var(--px)); }
.hp-s03 .dg-chip .dg-icon { width: calc(34 * var(--px)); height: calc(34 * var(--px)); }
.hp-s03 .hp-note { font-size: calc(25 * var(--px)); white-space: nowrap; max-width: none; }
.hp-prods { gap: calc(16 * var(--px)); }
.hp-prod { grid-template-columns: calc(377 * var(--px)) minmax(0, 1fr); gap: calc(24 * var(--px)); padding: calc(5 * var(--px)); }
.hp-prod__media { align-self: start; aspect-ratio: 377 / 298; }
.hp-prod__media img { height: 100%; object-fit: cover; object-position: center; }
.hp-prod__body { gap: calc(5 * var(--px)); padding: calc(8 * var(--px)) calc(10 * var(--px)) calc(4 * var(--px)) 0; justify-content: center; }
.hp-prod__name { font-size: calc(36 * var(--px)); line-height: 1.02; }
.hp-prod__facts { font-size: calc(22 * var(--px)); }
.hp-prod__price { flex-wrap: nowrap; }
.hp-prod__price strong { font-size: calc(41 * var(--px)); }
.hp-prod__price .dg-price-chip { min-height: 0; padding: calc(5 * var(--px)) calc(18 * var(--px)); font-size: calc(20 * var(--px)); white-space: nowrap; }
.hp-prod__buy { flex-wrap: nowrap; gap: calc(20 * var(--px)); }
.hp-prod__buy .dg-qty { flex: none; width: calc(180 * var(--px)); height: calc(58 * var(--px)); justify-content: space-between; }
.hp-prod__buy .dg-qty button { width: calc(60 * var(--px)); height: calc(58 * var(--px)); }
.hp-prod__buy .dg-qty .dg-icon { width: calc(28 * var(--px)); height: calc(28 * var(--px)); }
.hp-prod__buy .dg-qty output { min-width: 0; font-size: calc(26 * var(--px)); }
.hp .hp-prod__buy .dg-btn { flex: 1 1 0; min-width: 0; min-height: calc(62 * var(--px)); padding-inline: calc(14 * var(--px)); font-size: calc(24 * var(--px)); gap: calc(16 * var(--px)); }
.hp .hp-prod__buy .dg-btn .dg-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.hp-prod .dg-link { min-height: 0; font-size: calc(22 * var(--px)); }
.hp-prod .dg-link .dg-icon { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.hp .hp-wide-cta { min-height: calc(66 * var(--px)); font-size: calc(23 * var(--px)); margin: calc(16 * var(--px)) calc(72 * var(--px)) 0; }
.hp .pt-proto-tag { font-size: max(11px, calc(18 * var(--px))); height: auto; padding-block: 2px; }
/* Desktop: Screen 02 and 03 cards keep the PNG composition 1:1 in a centred 941px column */
@media (min-width: 900px) {
  .hp-sols, .hp-prods { grid-template-columns: 1fr; max-width: 941px; margin-inline: auto; }
  .hp-sols > .hp-sol--blue { grid-column: auto; }
  .hp .hp-wide-cta { max-width: 800px; margin-inline: auto; }
}

/* Owner request 01.11.2026: Screens 01, 04–08 at the exact PNG proportions (no 15px floor).
   Loaded after home.css; selectors repeat the ones there so these sizes win. */

/* 01 */
.hp-h1 { font-size: calc(55 * var(--px)); }
.hp-h1sub { font-size: calc(26 * var(--px)); }
.hp-regular__title { font-size: calc(35 * var(--px)); }
.hp-regular__sub { font-size: calc(22 * var(--px)); }
.hp-regular__btns { gap: calc(36 * var(--px)); }
.hp-regular .dg-icon-btn { width: calc(78 * var(--px)); height: calc(78 * var(--px)); }
.hp-regular .dg-icon-btn .dg-icon, .hp-regular .dg-brand { width: calc(36 * var(--px)); height: calc(36 * var(--px)); }
.hp-band .hp-h2 { font-size: calc(50 * var(--px)); }
.hp-band__script { font-size: calc(32 * var(--px)); }

/* 04 */
.hp-s04 .hp-title { padding-inline: 18%; }
.hp-s04 .hp-h2 { font-size: calc(70 * var(--px)); white-space: nowrap; }
.hp-s04 .hp-sub { font-size: calc(22 * var(--px)); }
.hp-s04 .hp-note, .hp-more .hp-note { font-size: calc(26 * var(--px)); white-space: nowrap; max-width: none; }
.hp-promo { grid-template-columns: 62.3% minmax(0, 1fr); grid-template-rows: auto; min-height: calc(460 * var(--px)); }
.hp-promo__photo, .hp-promo--md .hp-promo__photo { min-height: 0; }
.hp-promo__body, .hp-promo--md .hp-promo__body { display: flex; flex-direction: column; gap: calc(8 * var(--px)); padding: calc(40 * var(--px)) calc(18 * var(--px)) calc(22 * var(--px)) calc(4 * var(--px)); }
.hp-promo__title { font-size: calc(52 * var(--px)); line-height: 1.02; }
.hp-promo__sub { font-size: calc(22 * var(--px)); }
.hp .hp-promo .dg-btn { grid-row: auto; grid-column: auto; margin: auto 0 0; align-self: flex-end; min-height: calc(60 * var(--px)); padding-inline: calc(30 * var(--px)); font-size: calc(22 * var(--px)); }
.hp-promo--md { grid-template-columns: 59.4% minmax(0, 1fr); min-height: calc(306 * var(--px)); }
.hp-promo--md .hp-promo__body { padding-top: calc(26 * var(--px)); }
.hp-promo--md .hp-promo__title { font-size: calc(38 * var(--px)); }
.hp-promo--md .hp-promo__sub { font-size: calc(17 * var(--px)); }
.hp-promo--md .hp-promo__sub--serif { font-size: calc(25 * var(--px)); }
.hp .hp-promo--md .dg-btn { min-height: calc(64 * var(--px)); font-size: calc(23 * var(--px)); }
.hp-more .hp-h2 { font-size: calc(50 * var(--px)); }
.hp .hp-more .dg-btn { min-height: calc(70 * var(--px)); font-size: calc(22 * var(--px)); white-space: nowrap; gap: calc(14 * var(--px)); }
.hp .hp-more .dg-btn .dg-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }

/* 05 */
.hp-s05 .hp-h2 { font-size: calc(78 * var(--px)); white-space: nowrap; }
.hp-s05 .hp-sub { font-size: calc(32 * var(--px)); max-width: 64%; }
.hp-s05 .hp-note { font-size: calc(30 * var(--px)); white-space: nowrap; max-width: none; }
.hp-infos .dg-info { min-height: calc(190 * var(--px)); grid-template-columns: calc(200 * var(--px)) 1fr calc(40 * var(--px)); gap: calc(22 * var(--px)); padding: calc(10 * var(--px)) calc(30 * var(--px)) calc(10 * var(--px)) calc(16 * var(--px)); }
.hp-infos .dg-info img { max-height: none; width: 100%; height: auto; }
.hp-infos .dg-info__title { font-size: calc(34 * var(--px)); }
.hp-infos .dg-info__text { font-size: calc(24 * var(--px)); }
.hp-infos .dg-info > .dg-icon { width: calc(40 * var(--px)); height: calc(40 * var(--px)); }
.hp-infos .dg-help { gap: calc(22 * var(--px)); padding: calc(22 * var(--px)) calc(18 * var(--px)) calc(22 * var(--px)) calc(34 * var(--px)); }
.hp-infos .dg-help > .dg-icon { width: calc(60 * var(--px)); height: calc(60 * var(--px)); }
.hp-infos .dg-help__title { font-size: calc(25 * var(--px)); }
.hp-infos .dg-help__sub { font-size: calc(19 * var(--px)); }
.hp .hp-infos .dg-help .dg-btn { min-height: calc(76 * var(--px)); padding-inline: calc(44 * var(--px)); font-size: calc(25 * var(--px)); }

/* 06 */
.hp-why__text .hp-h2 { font-size: calc(56 * var(--px)); }
.hp-why__rule { height: calc(5 * var(--px)); }
.hp-why__text p { font-size: calc(27 * var(--px)); }
.hp-s06 .dg-benefit { gap: calc(10 * var(--px)); }
.hp-s06 .dg-benefit__icon { width: calc(120 * var(--px)); height: calc(120 * var(--px)); }
.hp-s06 .dg-benefit__icon .dg-icon { width: calc(56 * var(--px)); height: calc(56 * var(--px)); }
.hp-s06 .dg-benefit__title { font-size: calc(31 * var(--px)); }
.hp-s06 .dg-benefit__text { font-size: calc(23 * var(--px)); }
.hp .hp-center-cta .dg-btn { min-width: calc(632 * var(--px)); min-height: calc(80 * var(--px)); font-size: calc(28 * var(--px)); }

/* 07 */
.hp-s07 .hp-h2 { font-size: calc(66 * var(--px)); }
.hp-s07__sub { font-size: calc(30 * var(--px)); }
.hp-s07 .hp-note { font-size: calc(30 * var(--px)); white-space: nowrap; max-width: none; }
.hp-revs .dg-review { gap: calc(14 * var(--px)); }
.hp-revs .dg-review__top { gap: calc(26 * var(--px)); }
.hp-revs .dg-review__quote { font-size: calc(90 * var(--px)); height: calc(40 * var(--px)); }
.hp-revs .dg-review__stars .dg-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.hp-revs .dg-review__top .dg-brand { width: calc(34 * var(--px)); height: calc(34 * var(--px)); }
.hp-revs .dg-chip { min-height: calc(38 * var(--px)); padding-inline: calc(18 * var(--px)); font-size: calc(18 * var(--px)); }
.hp-revs .dg-review__text { font-size: calc(30 * var(--px)); }
.hp-revs .dg-review__author { gap: calc(30 * var(--px)); }
.hp-revs .dg-review__avatar { width: calc(76 * var(--px)); height: calc(76 * var(--px)); }
.hp-revs .dg-review__avatar .dg-icon { width: calc(40 * var(--px)); height: calc(40 * var(--px)); }
.hp-revs .dg-review__role { font-size: calc(21 * var(--px)); }
.hp-revs .dg-review__name { font-size: calc(19 * var(--px)); }
.hp .hp-cta-stack .dg-btn { width: calc(505 * var(--px)); min-height: calc(66 * var(--px)); font-size: calc(25 * var(--px)); }

/* 08 footer */
.hf-head h2 { font-size: calc(50 * var(--px)); }
.hf-head p { font-size: calc(25 * var(--px)); }
.hf-head .hp-note { font-size: calc(30 * var(--px)); white-space: nowrap; max-width: none; }
.hf-rule { height: calc(5 * var(--px)); }
.hf .dg-tile { min-height: calc(128 * var(--px)); gap: calc(8 * var(--px)); font-size: calc(21 * var(--px)); }
.hf .dg-tile .dg-icon { width: calc(44 * var(--px)); height: calc(44 * var(--px)); }
.hf-acc .dg-acc summary { min-height: calc(68 * var(--px)); font-size: calc(26 * var(--px)); }
.hf-acc .dg-acc summary .dg-icon { width: calc(40 * var(--px)); height: calc(40 * var(--px)); }
.hf-acc .dg-acc summary .dg-acc__chev { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.hf-acc .dg-acc__list a { min-height: calc(56 * var(--px)); font-size: calc(22 * var(--px)); }
.hf-card h3 { font-size: calc(37 * var(--px)); }
.hf-card__head .dg-link { min-height: 0; font-size: calc(20 * var(--px)); }
.hf-contact .dg-contact__row { min-height: calc(58 * var(--px)); gap: calc(26 * var(--px)); font-size: calc(26 * var(--px)); }
.hf-contact .dg-contact__dot { width: calc(52 * var(--px)); height: calc(52 * var(--px)); }
.hf-contact .dg-contact__dot .dg-icon, .hf-contact .dg-contact__dot .dg-brand { width: calc(26 * var(--px)); height: calc(26 * var(--px)); }
.hf-hours h4 { font-size: calc(24 * var(--px)); }
.hf-hours h4 .dg-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.hf-hours p { font-size: calc(23 * var(--px)); }
.hf-hours strong { font-size: calc(26 * var(--px)); }
.hf-pay__row { flex-wrap: nowrap; gap: calc(14 * var(--px)); }
.hf-pay__row .dg-pay__item { gap: calc(14 * var(--px)); font-size: calc(20 * var(--px)); white-space: nowrap; }
.hf-pay__row .dg-pay__item .dg-icon { width: calc(52 * var(--px)); height: calc(52 * var(--px)); }
.hf-pay__row .dg-pay__marks { gap: calc(8 * var(--px)); padding: calc(8 * var(--px)) calc(10 * var(--px)); }
.hf-pay__row .dg-brand--pay { height: calc(26 * var(--px)); }
.hf-social__icons { gap: calc(30 * var(--px)); }
.hf-social__icons .pt-social-link { min-width: 0; min-height: 0; }
.hf-social__icons .dg-brand { width: calc(58 * var(--px)); height: calc(58 * var(--px)); }
.hf-social__text { padding-left: calc(30 * var(--px)); font-size: calc(19 * var(--px)); }
.hf-heart { font-size: calc(44 * var(--px)); }
.hf-partners__grid { grid-template-columns: 1fr 1fr; }
.hf-partners .dg-partner { grid-template-columns: calc(120 * var(--px)) 1fr auto; min-height: calc(78 * var(--px)); gap: calc(14 * var(--px)); padding: calc(8 * var(--px)); }
.hf-partners .dg-partner img { height: calc(56 * var(--px)); }
.hf-partners .dg-partner__name { font-size: calc(20 * var(--px)); }
.hf-partners .dg-partner__url { font-size: calc(19 * var(--px)); }
.hf-partners .dg-partner > .dg-icon { width: calc(26 * var(--px)); height: calc(26 * var(--px)); }
.hf-band a { min-height: 0; font-size: calc(19 * var(--px)); }
.hf-band ul { gap: calc(4 * var(--px)) 0; }
.hf-band li + li::before { content: "|"; margin-inline: calc(16 * var(--px)); }
.hf-band__copy { font-size: calc(18 * var(--px)); }

/* clip, not hidden: the column must never become a sideways scroll box (anchor jumps used to shift it) */
.hp, .hf { overflow: clip; }
.hp-s04 .hp-title { padding-inline: 14%; }

/* Promo: photo fills the whole card height; the button fits inside the text column */
.hp-promo { position: relative; }
.hp-promo__photo, .hp-promo--md .hp-promo__photo { position: absolute; left: 0; top: 0; bottom: 0; width: 62.3%; height: 100%; }
.hp-promo--md .hp-promo__photo { width: 59.4%; }
.hp-promo__body, .hp-promo--md .hp-promo__body { grid-column: 2; padding-right: calc(10 * var(--px)); }
.hp .hp-promo .dg-btn { align-self: stretch; padding-inline: calc(12 * var(--px)); gap: calc(8 * var(--px)); }
.hp-promo { grid-template-rows: 1fr auto; }
.hp-promo__body, .hp-promo--md .hp-promo__body { grid-row: 1; padding-bottom: calc(10 * var(--px)); }
.hp .hp-promo .dg-btn { grid-row: 2; grid-column: 2; justify-self: stretch; margin: 0 calc(10 * var(--px)) calc(22 * var(--px)) calc(4 * var(--px)); }
/* Desktop: promo cards keep the PNG composition 1:1 in the centred 941px column, like 02 and 03 */
@media (min-width: 900px) {
  .hp-promos { grid-template-columns: 1fr; max-width: 941px; margin-inline: auto; }
  .hp-promo:first-child { grid-template-columns: 62.3% minmax(0, 1fr); }
  .hp-promo:first-child .hp-promo__photo { width: 62.3%; }
  .hp-more { max-width: 941px; margin-inline: auto; }
}
.hp-cat { grid-template-columns: minmax(0, 1fr) max-content calc(30 * var(--px)); }
@media (min-width: 900px) { .hf-pay__row { flex-wrap: wrap; } }
@media (min-width: 900px) {
  .hp-infos { grid-template-columns: 1fr; max-width: 941px; margin-inline: auto; }
  .hf-body { grid-template-columns: 1fr; max-width: 941px; margin-inline: auto; }
  .hf-acc { grid-template-columns: 1fr; }
  .hf-pay__row { flex-wrap: nowrap; }
}

/* Stage 2 — shopping screens. Look of Homepage Screen 01–08 (warm cards, navy actions, serif headings),
   layout and proportions of each screen's approved preview.
   --q  = column / 390  (C01 catalogue and Quick View, previews drawn at 390 px)
   --px = column / 941  (search, notify, product page, previews drawn at 941 px)
   --d  = column / 800  (menu, preview drawn inside an 800 px phone screen)
   Text never sits on a photo. */

.c1, .pp { container-type: inline-size; max-width: 560px; margin-inline: auto; }
.c1 > * { --q: calc(min(100cqw, 560px) / 390); }
.pp > * { --px: calc(min(100cqw, 560px) / 941); }
.qv-mask, .nt-mask, .sr-mask, .dr-mask, .c1-sheet-mask { container-type: inline-size; }
.qv-mask > *, .c1-sheet-mask > * { --q: calc(min(100cqw, 560px) / 390); }
.nt-mask > *, .sr-mask > * { --px: calc(min(100cqw, 560px) / 941); }
.dr-mask > * { --d: calc(min(100cqw, 560px) / 800); }
.c1 img, .pp img, .qv-panel img, .nt-sheet img, .sr-sheet img { display: block; }

/* ---------- C01 catalogue ---------- */
.c1-hero { position: relative; height: calc(150 * var(--q)); overflow: hidden; background: linear-gradient(90deg, var(--bg-page) 45%, #fdf3e4 100%); }
.c1-hero__photo { position: absolute; top: 0; right: 0; width: 45%; height: 100%; object-fit: cover; object-position: 30% center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.c1-back { position: absolute; left: calc(14 * var(--q)); top: calc(4 * var(--q)); display: inline-flex; align-items: center; gap: calc(4 * var(--q)); min-height: calc(28 * var(--q)); color: var(--text-link); font-size: calc(13 * var(--q)); text-decoration: none; }
.c1-back .dg-icon { width: calc(14 * var(--q)); height: calc(14 * var(--q)); }
.c1-hero h1 { position: absolute; left: calc(22 * var(--q)); top: calc(32 * var(--q)); width: 54%; margin: 0; font-family: var(--font-display); font-size: calc(25 * var(--q)); line-height: 1.1; font-weight: 700; color: var(--text-heading); }
.c1-hero p { position: absolute; left: calc(22 * var(--q)); top: calc(94 * var(--q)); width: 50%; margin: 0; font-size: calc(13.5 * var(--q)); line-height: 1.35; color: var(--text-subtle); }
.c1-bar { display: grid; grid-template-columns: minmax(0, 1fr) calc(47 * var(--q)); gap: calc(9 * var(--q)); margin: calc(8 * var(--q)) calc(14 * var(--q)) calc(4 * var(--q)) calc(16 * var(--q)); }
.c1-select, .c1-mag { height: calc(47 * var(--q)); border-radius: calc(12 * var(--q)); border: 1.5px solid var(--border-cool); background: var(--bg-panel); color: var(--text-heading); cursor: pointer; }
.c1-select { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 0 calc(12 * var(--q)); font: 600 calc(13.5 * var(--q)) var(--font-sans); text-align: left; }
.c1-select > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c1-select .dg-icon, .c1-mag .dg-icon { flex: none; width: calc(20 * var(--q)); height: calc(20 * var(--q)); }
.c1-mag { display: grid; place-items: center; }
.c1-searchbox { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(8 * var(--q)); height: calc(47 * var(--q)); padding: 0 calc(6 * var(--q)) 0 calc(12 * var(--q)); border-radius: calc(12 * var(--q)); border: 1.5px solid var(--text-link); background: var(--bg-surface); }
.c1-searchbox .dg-icon { width: calc(20 * var(--q)); height: calc(20 * var(--q)); }
.c1-searchbox input { flex: 1; min-width: 0; border: 0; background: none; font: calc(14 * var(--q)) var(--font-sans); color: var(--text-ink); outline: none; }
.c1-searchbox button { display: grid; place-items: center; width: calc(36 * var(--q)); height: calc(36 * var(--q)); border: 0; border-radius: 50%; background: var(--bg-chip); color: var(--icon); cursor: pointer; }
.c1-demo { margin: calc(4 * var(--q)) 0 calc(8 * var(--q)); text-align: center; }
.c1-demo .pt-proto-tag { height: auto; padding: 2px 8px; font-size: calc(10.5 * var(--q)); }
.c1-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--q)) calc(11 * var(--q)); margin: 0 calc(14 * var(--q)) calc(30 * var(--q)) calc(16 * var(--q)); }
.c1-card { display: flex; flex-direction: column; gap: calc(8 * var(--q)); padding-bottom: calc(6 * var(--q)); border-radius: calc(14 * var(--q)); background: var(--bg-surface); border: 1px solid var(--border-warm); box-shadow: var(--shadow-card); overflow: hidden; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.c1-card.is-out { cursor: default; }
.c1-card__photo { position: relative; aspect-ratio: 182 / 185; background: var(--bg-surface-warm); overflow: hidden; }
.c1-card__photo img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
.c1-card.is-out .c1-card__photo img { filter: grayscale(.5) opacity(.75); }
.c1-badges { position: absolute; top: calc(6 * var(--q)); right: calc(6 * var(--q)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--q)); }
.c1-badges span { padding: calc(3 * var(--q)) calc(7 * var(--q)); border-radius: calc(8 * var(--q)); background: rgba(255, 255, 255, .94); border: 1px solid var(--border-cool); color: var(--text-heading); font-size: calc(11 * var(--q)); font-weight: 700; line-height: 1.2; text-align: right; }
.c1-card__name { min-height: 2.45em; margin: 0; padding: 0 calc(8 * var(--q)); font-family: var(--font-display); font-size: calc(14.5 * var(--q)); line-height: 1.2; font-weight: 700; color: var(--text-heading); text-align: center; text-wrap: balance; }
.c1-qty, .qv-qty { display: grid; grid-template-columns: calc(48 * var(--q)) 1fr calc(48 * var(--q)); height: calc(50 * var(--q)); border-radius: calc(10 * var(--q)); border: 1.5px solid var(--border-cool); background: var(--bg-surface); overflow: hidden; }
.c1-qty { margin: 0 calc(8 * var(--q)); }
.c1-qty button, .qv-qty button { display: grid; place-items: center; border: 0; background: var(--bg-panel); color: var(--text-heading); cursor: pointer; }
.c1-qty button:last-child, .qv-qty button:last-child { background: var(--bg-chip); }
.c1-qty button:disabled, .qv-qty button:disabled { color: var(--text-subtle); opacity: .45; cursor: not-allowed; }
.c1-qty .dg-icon, .qv-qty .dg-icon { width: calc(20 * var(--q)); height: calc(20 * var(--q)); color: currentColor; }
.c1-qty output, .qv-qty output { display: grid; place-items: center; font-size: calc(21 * var(--q)); font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.c1-hint, .qv-hint { display: grid; place-content: center; gap: 2px; min-height: calc(62 * var(--q)); padding: calc(6 * var(--q)); border-radius: calc(10 * var(--q)); background: var(--bg-panel); border: 1px solid var(--border-cool); color: var(--text-heading); text-align: center; }
.c1-hint { margin: 0 calc(8 * var(--q)); }
.c1-hint b, .qv-hint b { font-size: calc(12.5 * var(--q)); line-height: 1.3; }
.c1-hint small, .qv-hint small { font-size: calc(11 * var(--q)); font-weight: 600; color: var(--text-subtle); }
.c1-hint.is-active, .qv-hint.is-active { background: var(--success-soft); border-color: #bfe3cb; color: var(--success); }
.c1-hint.is-max, .qv-hint.is-max { background: var(--gold-soft); border-color: #f2d49b; color: #7a4a0c; }
.c1-hint.is-out { background: var(--danger-soft); border-color: #f3b9bc; color: var(--danger); }
.c1-add, .qv-add { display: grid; grid-template-columns: 1fr auto; align-items: stretch; height: calc(54 * var(--q)); padding: 0; border: 0; border-radius: calc(9 * var(--q)); background: var(--action); color: var(--text-on-action); box-shadow: var(--shadow-button); overflow: hidden; cursor: pointer; font-family: var(--font-sans); }
.c1-add { margin: 0 calc(4 * var(--q)); }
.c1-add__l, .qv-add__l { display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--q)); padding-inline: calc(4 * var(--q)); font-size: calc(11.5 * var(--q)); font-weight: 700; white-space: nowrap; }
.c1-add__l .dg-icon, .qv-add__l .dg-icon { width: calc(15 * var(--q)); height: calc(15 * var(--q)); color: currentColor; }
.c1-add__p, .qv-add__p { display: grid; place-items: center; padding-inline: calc(9 * var(--q)); background: rgba(0, 0, 0, .2); border-left: 1px solid rgba(255, 255, 255, .25); font-size: calc(12.5 * var(--q)); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c1-add--notify { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--q)); background: var(--bg-surface); color: var(--action); box-shadow: inset 0 0 0 2px var(--action); font-size: calc(13 * var(--q)); font-weight: 700; }
.c1-add--notify .dg-icon { width: calc(16 * var(--q)); height: calc(16 * var(--q)); color: currentColor; }
.c1-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: calc(30 * var(--q)) calc(16 * var(--q)); border-radius: calc(14 * var(--q)); background: var(--bg-surface); border: 1px solid var(--border-cool); color: var(--text-ink); font-size: calc(14 * var(--q)); text-align: center; }
.c1-sheet-mask { align-items: flex-end; justify-content: center; }
.c1-sheet { width: min(100%, 560px); max-height: 85vh; overflow-y: auto; padding: calc(14 * var(--q)) calc(16 * var(--q)) calc(24 * var(--q)); border-radius: calc(18 * var(--q)) calc(18 * var(--q)) 0 0; background: var(--bg-surface); box-shadow: 0 -10px 40px rgba(15, 24, 82, .18); }
.c1-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: calc(10 * var(--q)); }
.c1-sheet__head h3 { margin: 0; font-family: var(--font-display); font-size: calc(19 * var(--q)); line-height: 1.2; color: var(--text-heading); }
.c1-x, .qv-close { display: grid; place-items: center; width: calc(44 * var(--q)); height: calc(44 * var(--q)); flex: none; border-radius: calc(10 * var(--q)); border: 1px solid var(--border-cool); background: var(--bg-surface); color: var(--icon); cursor: pointer; }
.c1-x .dg-icon, .qv-close .dg-icon { width: calc(22 * var(--q)); height: calc(22 * var(--q)); }
.c1-sheet__item { display: grid; gap: 2px; width: 100%; padding: calc(10 * var(--q)) calc(12 * var(--q)); margin-top: calc(6 * var(--q)); border-radius: calc(10 * var(--q)); border: 1px solid var(--border-cool); background: var(--bg-surface); text-align: left; cursor: pointer; font-family: var(--font-sans); }
.c1-sheet__item b { font-size: calc(15 * var(--q)); color: var(--text-heading); }
.c1-sheet__item span { font-size: calc(13 * var(--q)); color: var(--text-subtle); }
.c1-sheet__item.is-sel { border-color: var(--action); background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--action); }
@media (hover: hover) and (pointer: fine) {
  .c1-card:not(.is-out):hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-raised); }
  .c1-card:not(.is-out):hover .c1-card__photo img { transform: scale(var(--img-zoom)); }
  .c1-add:hover, .qv-add:hover { background: var(--action-hover); }
}

/* ---------- Quick View ---------- */
.qv-mask { justify-content: center; align-items: flex-end; }
.qv-panel { position: relative; width: min(calc(100% - 16px), 560px); height: calc(100% - 22 * var(--q)); overflow-y: auto; overscroll-behavior: contain; padding: calc(10 * var(--q)) calc(16 * var(--q)) calc(28 * var(--q)); border-radius: calc(16 * var(--q)) calc(16 * var(--q)) 0 0; background: var(--bg-surface); box-shadow: 0 -10px 40px rgba(15, 24, 82, .2); animation: dg-sheet-in var(--dur-reveal) var(--ease-out) both; }
.qv-close { position: sticky; top: 0; z-index: 3; margin: 0 0 calc(-44 * var(--q)) auto; box-shadow: var(--shadow-card); }
.qv-gallery { display: block; margin: 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in; }
.qv-main { width: calc(240 * var(--q)); height: calc(240 * var(--q)); object-fit: contain; margin: 0 auto; }
.qv-big { width: 100%; height: auto; margin-top: calc(10 * var(--q)); border-radius: calc(12 * var(--q)); }
.qv-thumbs { display: flex; gap: calc(8 * var(--q)); margin-top: calc(6 * var(--q)); overflow-x: auto; }
.qv-thumbs button { flex: none; width: calc(46 * var(--q)); height: calc(46 * var(--q)); padding: 0; border: 2px solid var(--border-cool); border-radius: calc(6 * var(--q)); background: var(--bg-surface-warm); overflow: hidden; cursor: pointer; }
.qv-thumbs button[aria-current="true"] { border-color: var(--text-link); }
.qv-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.qv-title { margin: calc(14 * var(--q)) 0 calc(8 * var(--q)); font-family: var(--font-display); font-size: calc(22 * var(--q)); line-height: 1.2; color: var(--text-heading); }
.qv-facts { margin: 0; font-size: calc(14 * var(--q)); line-height: 1.55; color: var(--text-subtle); }
.qv-buy { display: grid; gap: calc(10 * var(--q)); margin-top: calc(16 * var(--q)); }
.qv-qty output { font-size: calc(18 * var(--q)); }
.qv-hint { min-height: calc(88 * var(--q)); }
.qv-hint b { font-size: calc(14 * var(--q)); }
.qv-hint small { font-size: calc(12.5 * var(--q)); }
.qv-add__l { font-size: calc(15 * var(--q)); gap: calc(8 * var(--q)); }
.qv-add__l .dg-icon { width: calc(20 * var(--q)); height: calc(20 * var(--q)); }
.qv-add__p { padding-inline: calc(14 * var(--q)); font-size: calc(16 * var(--q)); }
.qv-sec { margin-top: calc(14 * var(--q)); padding: calc(13 * var(--q)); border-radius: calc(12 * var(--q)); border: 1px solid var(--border-cool); background: var(--bg-surface); }
.qv-sec h3 { margin: 0 0 calc(8 * var(--q)); font-family: var(--font-display); font-size: calc(19 * var(--q)); color: var(--text-heading); }
.qv-sec ol { margin: 0 0 calc(12 * var(--q)); padding-left: calc(20 * var(--q)); font-size: calc(14 * var(--q)); line-height: 1.55; color: var(--text-ink); }
.qv-secondary { display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--q)); min-height: calc(42 * var(--q)); padding: 0 calc(12 * var(--q)); border-radius: calc(8 * var(--q)); border: 1px solid var(--border-cool); background: var(--bg-panel); color: var(--text-heading); font: 700 calc(13 * var(--q)) var(--font-sans); text-decoration: none; cursor: pointer; }
.qv-secondary .dg-icon { width: calc(14 * var(--q)); height: calc(14 * var(--q)); }
.qv-secondary--block { width: 100%; margin-top: calc(10 * var(--q)); min-height: calc(48 * var(--q)); font-size: calc(15 * var(--q)); }
.qv-related-head { display: flex; align-items: center; justify-content: space-between; }
.qv-related-head > div { display: flex; gap: calc(6 * var(--q)); }
.qv-nav { display: grid; place-items: center; width: calc(44 * var(--q)); height: calc(44 * var(--q)); border-radius: calc(8 * var(--q)); border: 1px solid var(--border-cool); background: var(--bg-panel); color: var(--icon); cursor: pointer; }
.qv-nav .dg-icon { width: calc(18 * var(--q)); height: calc(18 * var(--q)); }
.qv-rail { display: flex; gap: calc(10 * var(--q)); margin-top: calc(10 * var(--q)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.qv-rel { flex: none; display: grid; gap: calc(8 * var(--q)); width: calc(210 * var(--q)); padding: calc(8 * var(--q)); border-radius: calc(10 * var(--q)); border: 1px solid var(--border-cool); scroll-snap-align: start; }
.qv-rel__link { display: grid; gap: calc(8 * var(--q)); padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.qv-rel__photo { position: relative; display: block; height: calc(110 * var(--q)); }
.qv-rel__photo img { width: 100%; height: 100%; object-fit: contain; }
.qv-rel__photo span { position: absolute; top: 0; right: 0; padding: 2px calc(6 * var(--q)); border-radius: calc(6 * var(--q)); background: #fff; border: 1px solid var(--border-cool); color: var(--text-heading); font-size: calc(11 * var(--q)); font-weight: 700; }
.qv-rel__name { min-height: 2.6em; font-size: calc(13 * var(--q)); font-weight: 700; line-height: 1.3; color: var(--text-heading); }
.qv-rel .qv-add { height: calc(46 * var(--q)); }
.qv-rel .qv-add__l { font-size: calc(13 * var(--q)); }
.qv-rel .qv-add__p { font-size: calc(13 * var(--q)); padding-inline: calc(8 * var(--q)); }
.qv-status { margin: calc(10 * var(--q)) 0 0; font-size: calc(11 * var(--q)); color: var(--text-subtle); }
.qv-acc { margin-top: calc(10 * var(--q)); border-radius: calc(10 * var(--q)); border: 1px solid var(--border-cool); background: var(--bg-surface); }
.qv-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: calc(52 * var(--q)); padding: 0 calc(13 * var(--q)); list-style: none; cursor: pointer; font-size: calc(15 * var(--q)); font-weight: 700; color: var(--text-heading); }
.qv-acc summary::-webkit-details-marker { display: none; }
.qv-acc summary .dg-icon { width: calc(18 * var(--q)); height: calc(18 * var(--q)); transition: transform var(--dur-base) var(--ease-out); }
.qv-acc[open] summary .dg-icon { transform: rotate(180deg); }
.qv-acc > p { margin: 0; padding: 0 calc(13 * var(--q)) calc(13 * var(--q)); font-size: calc(14 * var(--q)); line-height: 1.55; color: var(--text-ink); }
.qv-form { display: grid; gap: calc(10 * var(--q)); padding: 0 calc(13 * var(--q)) calc(13 * var(--q)); }
.qv-form label { display: grid; gap: 4px; font-size: calc(13 * var(--q)); font-weight: 600; color: var(--text-heading); }
.qv-form input, .qv-form textarea { min-height: calc(44 * var(--q)); padding: calc(8 * var(--q)) calc(10 * var(--q)); border-radius: calc(8 * var(--q)); border: 1.5px solid var(--border-cool); font: calc(14 * var(--q)) var(--font-sans); color: var(--text-ink); }
.qv-form textarea { min-height: calc(80 * var(--q)); resize: vertical; }
.qv-result { margin: 0; font-size: calc(13 * var(--q)); color: var(--text-subtle); }
.qv-primary { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--q)); width: 100%; min-height: calc(48 * var(--q)); border: 0; border-radius: calc(9 * var(--q)); background: var(--action); color: var(--text-on-action); box-shadow: var(--shadow-button); font: 700 calc(15 * var(--q)) var(--font-sans); text-decoration: none; cursor: pointer; }
.qv-primary .dg-icon { width: calc(18 * var(--q)); height: calc(18 * var(--q)); color: currentColor; }
.qv-empty { padding: calc(13 * var(--q)) calc(12 * var(--q)); border-radius: calc(10 * var(--q)); background: var(--bg-panel); border: 1px solid var(--border-cool); font-size: calc(13 * var(--q)); line-height: 1.5; color: var(--text-subtle); }
.qv-empty strong { display: block; margin-bottom: 4px; color: var(--text-heading); }
.qv-back { display: inline-flex; align-items: center; gap: 6px; min-height: calc(44 * var(--q)); padding: 0; border: 0; background: none; color: var(--text-link); font: 600 calc(14 * var(--q)) var(--font-sans); cursor: pointer; }
.qv-back .dg-icon { width: calc(18 * var(--q)); height: calc(18 * var(--q)); }
.qv-price { margin: calc(8 * var(--q)) 0 calc(12 * var(--q)); font-size: calc(24 * var(--q)); font-weight: 700; color: var(--text-heading); }
.qv-note { margin: calc(8 * var(--q)) 0 0; font-size: calc(12 * var(--q)); color: var(--text-subtle); text-align: center; }
.qv-confirm { display: grid; justify-items: center; gap: calc(8 * var(--q)); padding-top: calc(40 * var(--q)); text-align: center; }
.qv-confirm__mark { display: grid; place-items: center; width: calc(64 * var(--q)); height: calc(64 * var(--q)); border-radius: 50%; background: var(--success-soft); animation: dg-pop 600ms var(--ease-soft) both; }
.qv-confirm__mark .dg-icon { width: calc(32 * var(--q)); height: calc(32 * var(--q)); color: var(--success); }
.qv-confirm h2 { margin: 0; font-family: var(--font-display); font-size: calc(22 * var(--q)); color: var(--text-heading); }
.qv-confirm img { width: calc(160 * var(--q)); height: calc(160 * var(--q)); object-fit: contain; }
.qv-confirm p { margin: 0; font-size: calc(14 * var(--q)); color: var(--text-ink); }

/* ---------- Notify me (preview 941 px) ---------- */
.nt-mask { align-items: flex-end; justify-content: center; }
.nt-sheet { position: relative; width: min(100%, 560px); max-height: 92vh; overflow-y: auto; padding: calc(20 * var(--px)) calc(70 * var(--px)) calc(44 * var(--px)); border-radius: calc(46 * var(--px)) calc(46 * var(--px)) 0 0; background: var(--bg-surface); box-shadow: 0 -10px 40px rgba(15, 24, 82, .2); animation: dg-sheet-in var(--dur-reveal) var(--ease-out) both; }
.nt-handle { display: block; width: calc(74 * var(--px)); height: calc(10 * var(--px)); margin: 0 auto calc(20 * var(--px)); border-radius: 99px; background: var(--border-cool); }
.nt-x { position: absolute; top: calc(18 * var(--px)); right: calc(22 * var(--px)); display: grid; place-items: center; width: calc(66 * var(--px)); height: calc(66 * var(--px)); border: 0; border-radius: 50%; background: var(--bg-panel); color: var(--icon); cursor: pointer; }
.nt-x .dg-icon { width: calc(34 * var(--px)); height: calc(34 * var(--px)); }
.nt-title { margin: 0; font-family: var(--font-display); font-size: calc(50 * var(--px)); line-height: 1.1; color: var(--text-heading); }
.nt-sub { margin: calc(14 * var(--px)) 0 calc(22 * var(--px)); font-size: calc(21 * var(--px)); color: var(--text-subtle); }
.nt-prod { display: grid; grid-template-columns: calc(250 * var(--px)) 1fr; align-items: center; gap: calc(30 * var(--px)); }
.nt-prod img { width: 100%; height: calc(180 * var(--px)); object-fit: contain; }
.nt-prod__name { margin: 0 0 calc(12 * var(--px)); font-family: var(--font-display); font-size: calc(31 * var(--px)); line-height: 1.1; font-weight: 700; color: var(--text-heading); }
.nt-pill { display: inline-flex; align-items: center; gap: calc(14 * var(--px)); padding: calc(8 * var(--px)) calc(20 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px)); border-radius: calc(14 * var(--px)); background: var(--danger-soft); color: var(--danger); font-size: calc(24 * var(--px)); }
.nt-pill .dg-icon { width: calc(42 * var(--px)); height: calc(42 * var(--px)); color: #fff; fill: var(--danger); }
.nt-form { display: grid; gap: calc(12 * var(--px)); margin-top: calc(26 * var(--px)); }
.nt-form label { font-size: calc(24 * var(--px)); font-weight: 600; color: var(--text-heading); }
.nt-input { display: flex; align-items: center; gap: calc(26 * var(--px)); height: calc(78 * var(--px)); padding: 0 calc(28 * var(--px)); border-radius: calc(12 * var(--px)); border: 1.5px solid var(--border-cool); background: var(--bg-surface); }
.nt-input:focus-within { border-color: var(--text-link); box-shadow: 0 0 0 4px rgba(26, 58, 174, .12); }
.nt-input .dg-icon { width: calc(40 * var(--px)); height: calc(40 * var(--px)); }
.nt-input input { flex: 1; min-width: 0; border: 0; background: none; font: calc(24 * var(--px)) var(--font-sans); color: var(--text-ink); outline: none; }
.nt-form.is-error .nt-input { border-color: var(--danger); }
.nt-form.is-error .nt-help { color: var(--danger); font-weight: 600; }
.nt-help { margin: 0 0 calc(18 * var(--px)); font-size: calc(19 * var(--px)); color: var(--text-subtle); }
.nt-primary, .nt-outline { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(68 * var(--px)); border-radius: calc(16 * var(--px)); font: 700 calc(26 * var(--px)) var(--font-sans); cursor: pointer; }
.nt-primary { border: 0; background: var(--action); color: var(--text-on-action); box-shadow: var(--shadow-button); }
.nt-outline { margin-top: calc(4 * var(--px)); border: 2px solid var(--action); background: var(--bg-surface); color: var(--action); font-weight: 600; }
.nt-done { display: grid; grid-template-columns: calc(90 * var(--px)) 1fr; align-items: center; gap: calc(40 * var(--px)); margin: calc(14 * var(--px)) 0 calc(20 * var(--px)); padding: calc(30 * var(--px)); border-radius: calc(20 * var(--px)); background: var(--bg-panel); }
.nt-done__mark { display: grid; place-items: center; width: calc(90 * var(--px)); height: calc(90 * var(--px)); border-radius: 50%; background: var(--action); }
.nt-done__mark .dg-icon { width: calc(46 * var(--px)); height: calc(46 * var(--px)); color: #fff; stroke-width: 3; }
.nt-done p { margin: 0; padding-left: calc(40 * var(--px)); border-left: 1px solid var(--text-link); font-size: calc(26 * var(--px)); line-height: 1.45; color: var(--text-link); }

/* ---------- Search overlay (preview 941 px) ---------- */
.sr-mask { z-index: 45; flex-direction: column; align-items: center; overflow-y: auto; }
.sr-sheet { width: min(calc(100% - 70 * var(--px)), 560px); margin-top: calc(105 * var(--px)); padding: calc(18 * var(--px)) calc(26 * var(--px)) calc(30 * var(--px)); border-radius: calc(42 * var(--px)); background: #fffaf4; box-shadow: var(--shadow-raised); animation: dg-sheet-in var(--dur-reveal) var(--ease-out) both; }
.sr-handle { display: block; width: calc(92 * var(--px)); height: calc(9 * var(--px)); margin: 0 auto calc(30 * var(--px)); border-radius: 99px; background: #e7ddd2; }
.sr-top { display: flex; align-items: center; gap: calc(30 * var(--px)); }
.sr-field { flex: 1; display: flex; align-items: center; gap: calc(30 * var(--px)); height: calc(100 * var(--px)); padding: 0 calc(30 * var(--px)); border-radius: 99px; border: 1.5px solid var(--border-cool); background: var(--bg-panel); }
.sr-field:focus-within { background: var(--bg-surface); border-color: var(--text-link); }
.sr-field > .dg-icon { width: calc(44 * var(--px)); height: calc(44 * var(--px)); }
.sr-field input { flex: 1; min-width: 0; border: 0; background: none; font: calc(26 * var(--px)) var(--font-sans); color: var(--text-ink); outline: none; }
.sr-field input::placeholder { color: var(--text-subtle); }
.sr-clear { display: grid; place-items: center; width: calc(52 * var(--px)); height: calc(52 * var(--px)); border: 0; border-radius: 50%; background: var(--bg-chip); color: var(--icon); cursor: pointer; }
.sr-clear .dg-icon { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.sr-close { padding: 0; border: 0; background: none; color: var(--text-heading); font: 700 calc(29 * var(--px)) var(--font-sans); cursor: pointer; }
.sr-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--px)); margin: calc(28 * var(--px)) 0 calc(24 * var(--px)); }
.sr-cat { display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--px)); height: calc(74 * var(--px)); padding: 0 calc(10 * var(--px)); border-radius: 99px; border: 1px solid #efe6db; background: #fffdf9; color: var(--text-heading); font: 500 calc(25 * var(--px)) var(--font-sans); cursor: pointer; white-space: nowrap; }
.sr-cat .dg-icon { width: calc(40 * var(--px)); height: calc(40 * var(--px)); flex: none; }
.sr-cat.is-sel { background: var(--bg-panel); border-color: var(--border-cool); }
#pt-results { display: grid; gap: calc(18 * var(--px)); }
.sr-row { display: grid; grid-template-columns: calc(188 * var(--px)) minmax(0, 1fr) auto; align-items: center; gap: calc(28 * var(--px)); width: 100%; padding: calc(14 * var(--px)) calc(20 * var(--px)) calc(14 * var(--px)) calc(16 * var(--px)); border: 0; border-radius: calc(26 * var(--px)); background: var(--bg-surface); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; text-align: left; font-family: var(--font-sans); cursor: pointer; }
.sr-row img { width: 100%; height: calc(138 * var(--px)); object-fit: cover; border-radius: calc(14 * var(--px)); }
.sr-row__text { display: grid; gap: calc(6 * var(--px)); min-width: 0; }
.sr-row__name { font-size: calc(32 * var(--px)); font-weight: 600; line-height: 1.18; color: var(--text-heading); }
.sr-row__facts { font-size: calc(25 * var(--px)); color: var(--text-subtle); }
.sr-row__price { font-size: calc(32 * var(--px)); font-weight: 700; color: var(--text-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-empty { display: grid; justify-items: center; gap: 8px; padding: 24px 12px; border-radius: calc(26 * var(--px)); background: var(--bg-surface); text-align: center; }
@media (hover: hover) and (pointer: fine) { .sr-row:hover { box-shadow: var(--shadow-raised); } .sr-cat:not(.is-sel):hover { border-color: var(--border-cool); } }

/* ---------- Menu (preview: 800 px phone screen) ---------- */
.dr-mask { z-index: 120; }
.dr { width: min(73.1cqw, 410px); height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(36 * var(--d)) calc(26 * var(--d)) calc(40 * var(--d)); background: var(--bg-surface); box-shadow: 20px 0 50px rgba(15, 24, 82, .18); animation: pt-drawer-in var(--dur-base) var(--ease-out) both; }
.dr-top { position: relative; display: flex; justify-content: center; align-items: center; min-height: calc(130 * var(--d)); }
.dr-x { position: absolute; left: calc(4 * var(--d)); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: calc(64 * var(--d)); height: calc(64 * var(--d)); border: 0; background: none; color: var(--icon); cursor: pointer; }
.dr-x .dg-icon { width: calc(52 * var(--d)); height: calc(52 * var(--d)); stroke-width: 1.5; }
.dr-logo { width: calc(352 * var(--d)); height: auto; display: block; }
.dr-search { display: flex; align-items: center; gap: calc(22 * var(--d)); height: calc(90 * var(--d)); margin: calc(18 * var(--d)) 0 calc(36 * var(--d)); padding: 0 calc(26 * var(--d)); border-radius: 99px; border: 1px solid var(--border-cool); background: var(--bg-panel); }
.dr-search .dg-icon { width: calc(38 * var(--d)); height: calc(38 * var(--d)); }
.dr-search input { flex: 1; min-width: 0; border: 0; background: none; font: calc(22 * var(--d)) var(--font-sans); color: var(--text-ink); outline: none; }
.dr-card { display: block; margin-bottom: calc(16 * var(--d)); border-radius: calc(22 * var(--d)); border: 1px solid var(--border-cool); background: var(--bg-surface); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
.dr-item { display: flex; align-items: center; gap: calc(30 * var(--d)); min-height: calc(88 * var(--d)); padding: 0 calc(26 * var(--d)) 0 calc(22 * var(--d)); list-style: none; cursor: pointer; color: var(--text-heading); font-size: calc(31 * var(--d)); font-weight: 600; }
.dr-item::-webkit-details-marker { display: none; }
.dr-item > .dg-icon:first-child { width: calc(52 * var(--d)); height: calc(52 * var(--d)); stroke-width: 1.6; }
.dr-item > span { flex: 1; }
.dr-chev { width: calc(30 * var(--d)); height: calc(30 * var(--d)); transition: transform var(--dur-base) var(--ease-out); }
details[open] > .dr-item .dr-chev { transform: rotate(180deg); }
.dr-sub { margin: 0; padding: 0 calc(16 * var(--d)) calc(8 * var(--d)) calc(28 * var(--d)); list-style: none; }
.dr-sub a { display: flex; align-items: center; justify-content: space-between; min-height: calc(62 * var(--d)); border-top: 1px solid var(--border-cool); color: var(--text-link); font-size: calc(25 * var(--d)); text-decoration: none; }
.dr-sub a .dg-icon { width: calc(26 * var(--d)); height: calc(26 * var(--d)); }
.dr-quick { margin-top: calc(30 * var(--d)); padding-top: calc(24 * var(--d)); border-top: 2px solid var(--border-cool); }
.dr-quick h3 { margin: 0 0 calc(12 * var(--d)); font-family: var(--font-sans); font-size: calc(33 * var(--d)); font-weight: 700; color: var(--text-heading); }
.dr-quick__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 * var(--d)); }
.dr-qbtn { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--d)); min-height: calc(92 * var(--d)); padding: 0 calc(10 * var(--d)); border-radius: calc(22 * var(--d)); border: 1px solid var(--border-cool); background: var(--bg-surface); box-shadow: var(--shadow-card); color: var(--text-heading); font-size: calc(23 * var(--d)); font-weight: 500; text-decoration: none; white-space: nowrap; }
.dr-qbtn .dg-icon:first-child { width: calc(46 * var(--d)); height: calc(46 * var(--d)); }
.dr-qbtn .dg-icon:last-child { width: calc(24 * var(--d)); height: calc(24 * var(--d)); }
.dr-util { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: calc(30 * var(--d)); }
.dr-util .dg-lang a { min-width: calc(76 * var(--d)); min-height: calc(60 * var(--d)); font-size: calc(23 * var(--d)); }
.dr-phone { display: inline-flex; align-items: center; gap: calc(10 * var(--d)); color: var(--text-heading); font-size: calc(23 * var(--d)); font-weight: 600; text-decoration: none; }
.dr-phone .dg-icon { width: calc(30 * var(--d)); height: calc(30 * var(--d)); }
@media (hover: hover) and (pointer: fine) { a.dr-card:hover, .dr-qbtn:hover { border-color: var(--text-link); } .dr-sub a:hover .dg-icon { transform: translateX(3px); } }

/* ---------- Product page (preview 941 px) ---------- */
.pp { padding-bottom: calc(30 * var(--px)); }
.pp-back { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); margin: calc(8 * var(--px)) 0 0 calc(60 * var(--px)); min-height: calc(36 * var(--px)); color: var(--text-link); font-size: calc(19 * var(--px)); text-decoration: none; }
.pp-back .dg-icon { width: calc(26 * var(--px)); height: calc(26 * var(--px)); }
.pp-title { margin: calc(6 * var(--px)) calc(40 * var(--px)) calc(18 * var(--px)); font-family: var(--font-display); font-size: calc(45 * var(--px)); line-height: 1.1; color: var(--text-heading); text-align: center; }
.pp-grid { display: grid; grid-template-columns: calc(356 * var(--px)) minmax(0, 1fr); gap: calc(22 * var(--px)); margin: 0 calc(48 * var(--px)) 0 calc(55 * var(--px)); }
.pp-main { aspect-ratio: 352 / 380; border-radius: calc(22 * var(--px)); overflow: hidden; box-shadow: var(--shadow-card); }
.pp-main img { width: 100%; height: 100%; object-fit: cover; }
.pp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--px)) calc(11 * var(--px)); margin-top: calc(14 * var(--px)); }
.pp-thumbs button { aspect-ratio: 109 / 94; padding: 0; border: calc(3 * var(--px)) solid transparent; border-radius: calc(14 * var(--px)); background: var(--bg-surface-warm); overflow: hidden; cursor: pointer; }
.pp-thumbs button[aria-current="true"] { border-color: var(--text-link); }
.pp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pp-rating { display: flex; align-items: center; gap: calc(10 * var(--px)); margin: calc(14 * var(--px)) 0 0; font-size: calc(18 * var(--px)); color: var(--text-heading); }
.pp-stars { display: inline-flex; gap: calc(4 * var(--px)); }
.pp-stars .dg-icon { width: calc(24 * var(--px)); height: calc(24 * var(--px)); color: var(--star); fill: var(--star); }
.pp-facts { margin: 0 0 calc(16 * var(--px)); padding: calc(6 * var(--px)) calc(24 * var(--px)); list-style: none; border-radius: calc(20 * var(--px)); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.pp-facts li { display: flex; align-items: center; gap: calc(30 * var(--px)); min-height: calc(50 * var(--px)); font-size: calc(19 * var(--px)); color: var(--text-ink); }
.pp-facts li + li { border-top: 1px solid var(--border-cool); }
.pp-facts .dg-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.pp-card { padding: calc(14 * var(--px)) calc(16 * var(--px)) calc(20 * var(--px)); border-radius: calc(20 * var(--px)); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.pp-h { margin: 0 0 calc(14 * var(--px)); font-family: var(--font-display); font-size: calc(26 * var(--px)); line-height: 1.15; color: var(--text-heading); }
.pp-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--px)); }
.pp-tier { min-height: calc(78 * var(--px)); padding: 0 2px; border-radius: calc(16 * var(--px)); border: 1px solid var(--border-cool); background: var(--bg-surface); color: var(--text-heading); font: 500 calc(19 * var(--px)) / 1.35 var(--font-sans); cursor: pointer; font-variant-numeric: tabular-nums; }
.pp-tier.is-sel { border-color: var(--action); background: var(--action); color: var(--text-on-action); }
.pp-row { display: flex; align-items: center; gap: calc(22 * var(--px)); margin-top: calc(18 * var(--px)); }
.pp-qty { display: grid; grid-template-columns: calc(70 * var(--px)) 1fr calc(70 * var(--px)); width: calc(230 * var(--px)); height: calc(60 * var(--px)); border-radius: 99px; border: 1px solid var(--border-cool); background: var(--bg-surface); overflow: hidden; }
.pp-qty button { display: grid; place-items: center; border: 0; background: none; color: var(--text-heading); cursor: pointer; }
.pp-qty button:disabled { opacity: .35; cursor: not-allowed; }
.pp-qty .dg-icon { width: calc(28 * var(--px)); height: calc(28 * var(--px)); }
.pp-qty output { display: grid; place-items: center; border-inline: 1px solid var(--border-cool); font-size: calc(26 * var(--px)); font-weight: 600; color: var(--text-heading); }
.pp-ok { display: inline-flex; align-items: center; gap: calc(12 * var(--px)); padding: calc(10 * var(--px)) calc(14 * var(--px)); border-radius: calc(14 * var(--px)); background: var(--success-soft); color: var(--success); font-size: calc(16 * var(--px)); line-height: 1.3; }
.pp-ok .dg-icon { flex: none; width: calc(36 * var(--px)); height: calc(36 * var(--px)); color: #fff; fill: var(--success); }
.pp-unit { margin: calc(14 * var(--px)) 0 0; font-size: calc(38 * var(--px)); font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.pp-unit small { font-family: var(--font-display); font-size: calc(28 * var(--px)); }
.pp-total { margin: calc(4 * var(--px)) 0 0; font-size: calc(25 * var(--px)); font-weight: 700; color: var(--text-heading); }
.pp-vat { margin: 0; font-size: calc(16 * var(--px)); color: var(--text-ink); }
.pp-cta { display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--px)); width: 100%; height: calc(60 * var(--px)); margin-top: calc(20 * var(--px)); border: 0; border-radius: 99px; background: var(--action); color: var(--text-on-action); box-shadow: var(--shadow-button); font: 600 calc(23 * var(--px)) var(--font-sans); cursor: pointer; white-space: nowrap; }
.pp-cta .dg-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); color: currentColor; }
.pp-stock { display: flex; align-items: center; gap: calc(12 * var(--px)); margin: calc(18 * var(--px)) 0 0; font-size: calc(20 * var(--px)); font-weight: 600; color: var(--success); }
.pp-stock .dg-icon { width: calc(28 * var(--px)); height: calc(28 * var(--px)); color: #fff; fill: var(--success); }
.pp-box { margin: calc(18 * var(--px)) calc(48 * var(--px)) 0 calc(50 * var(--px)); padding: calc(14 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)); border-radius: calc(22 * var(--px)); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.pp-box__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-h2 { margin: 0 0 calc(12 * var(--px)); font-family: var(--font-display); font-size: calc(28 * var(--px)); color: var(--text-heading); }
.pp-box__head .pp-h2 { margin: 0; }
.pp-video { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); height: calc(34 * var(--px)); padding: 0 calc(16 * var(--px)); border-radius: 99px; border: 1.5px solid var(--action); background: var(--bg-surface); color: var(--action); font: 500 calc(16 * var(--px)) var(--font-sans); cursor: pointer; }
.pp-video .dg-icon { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.pp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--px)); margin-top: calc(12 * var(--px)); }
.pp-step { position: relative; display: grid; justify-items: center; align-content: start; gap: calc(6 * var(--px)); min-height: calc(124 * var(--px)); padding: calc(14 * var(--px)) calc(8 * var(--px)); border-radius: calc(18 * var(--px)); border: 1px solid var(--border-cool); text-align: center; font-size: calc(17 * var(--px)); line-height: 1.25; color: var(--text-heading); }
.pp-step__n { position: absolute; top: calc(10 * var(--px)); left: calc(10 * var(--px)); display: grid; place-items: center; width: calc(38 * var(--px)); height: calc(38 * var(--px)); border-radius: 50%; background: var(--bg-panel); font-size: calc(22 * var(--px)); font-weight: 700; }
.pp-step .dg-icon { width: calc(50 * var(--px)); height: calc(50 * var(--px)); stroke-width: 1.4; }
.pp-xsell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--px)); }
.pp-xs { display: grid; grid-template-columns: calc(96 * var(--px)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--px)); padding: calc(8 * var(--px)); border-radius: calc(16 * var(--px)); border: 1px solid var(--border-cool); color: inherit; text-decoration: none; }
.pp-xs img { width: 100%; height: calc(82 * var(--px)); object-fit: contain; }
.pp-xs b { display: block; font-size: calc(18 * var(--px)); color: var(--text-heading); }
.pp-xs span span { font-size: calc(17 * var(--px)); line-height: 1.25; color: var(--text-subtle); }
.pp-xs > .dg-icon { width: calc(26 * var(--px)); height: calc(26 * var(--px)); }
.pp-fit { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: calc(18 * var(--px)); }
.pp-fit span { display: flex; align-items: center; gap: calc(14 * var(--px)); min-height: calc(38 * var(--px)); padding: 0 calc(14 * var(--px)); border-radius: calc(12 * var(--px)); border: 1px solid var(--border-cool); font-size: calc(17 * var(--px)); color: var(--text-heading); }
.pp-fit .dg-icon { flex: none; width: calc(28 * var(--px)); height: calc(28 * var(--px)); color: #fff; fill: var(--success); }
.pp-accs { margin: calc(14 * var(--px)) calc(48 * var(--px)) 0 calc(50 * var(--px)); border-radius: calc(18 * var(--px)); border: 1px solid var(--border-cool); background: var(--bg-surface); box-shadow: var(--shadow-card); overflow: hidden; }
.pp-acc + .pp-acc { border-top: 1px solid var(--border-cool); }
.pp-acc summary { display: flex; align-items: center; gap: calc(22 * var(--px)); min-height: calc(37 * var(--px)); padding: 0 calc(26 * var(--px)); list-style: none; cursor: pointer; font-size: calc(18 * var(--px)); font-weight: 600; color: var(--text-heading); }
.pp-acc summary::-webkit-details-marker { display: none; }
.pp-acc summary > span { flex: 1; }
.pp-acc summary .dg-icon { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.pp-chev { transition: transform var(--dur-base) var(--ease-out); }
.pp-acc[open] .pp-chev { transform: rotate(180deg); }
.pp-acc p { margin: 0; padding: 0 calc(26 * var(--px)) calc(12 * var(--px)) calc(72 * var(--px)); font-size: calc(17 * var(--px)); color: var(--text-subtle); }
.pp-help { display: grid; grid-template-columns: calc(184 * var(--px)) minmax(0, 1fr) calc(236 * var(--px)); gap: calc(14 * var(--px)); align-items: center; margin: calc(14 * var(--px)) calc(46 * var(--px)) 0 calc(48 * var(--px)); padding: calc(6 * var(--px)) calc(6 * var(--px)) calc(6 * var(--px)) 0; border-radius: calc(22 * var(--px)); background: var(--bg-panel); border: 1px solid var(--border-cool); overflow: hidden; }
.pp-help__img { width: 100%; height: auto; }
.pp-help__body h2 { margin: 0; font-family: var(--font-display); font-size: calc(25 * var(--px)); color: var(--text-heading); }
.pp-help__body p { margin: calc(4 * var(--px)) 0 calc(8 * var(--px)); font-size: calc(16 * var(--px)); line-height: 1.35; color: var(--text-ink); }
.pp-help__btn { display: inline-flex; align-items: center; gap: calc(12 * var(--px)); height: calc(40 * var(--px)); padding: 0 calc(22 * var(--px)); border: 0; border-radius: 99px; background: var(--action); color: var(--text-on-action); font: 600 calc(18 * var(--px)) var(--font-sans); white-space: nowrap; cursor: pointer; }
.pp-help__btn .dg-icon { width: calc(22 * var(--px)); height: calc(22 * var(--px)); color: currentColor; }
.pp-help__list { display: grid; gap: calc(12 * var(--px)); margin: 0; padding: calc(14 * var(--px)); list-style: none; border-radius: calc(16 * var(--px)); background: var(--bg-surface); font-size: calc(16 * var(--px)); line-height: 1.3; color: var(--text-heading); }
.pp-help__list li { display: flex; align-items: flex-start; gap: calc(14 * var(--px)); }
.pp-help__list .dg-icon { flex: none; width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.pp-rev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(20 * var(--px)); margin: calc(10 * var(--px)) calc(46 * var(--px)) 0 calc(48 * var(--px)); padding: calc(10 * var(--px)) calc(24 * var(--px)); border-radius: calc(22 * var(--px)); background: var(--bg-surface); border: 1px solid var(--border-cool); box-shadow: var(--shadow-card); }
.pp-rev__star { width: calc(44 * var(--px)); height: calc(44 * var(--px)); color: var(--star); fill: var(--star); }
.pp-rev h2 { margin: 0; font-family: var(--font-display); font-size: calc(23 * var(--px)); color: var(--text-heading); }
.pp-rev p { display: flex; align-items: center; gap: calc(8 * var(--px)); margin: 0; font-size: calc(17 * var(--px)); color: var(--text-heading); }
.pp-rev > a { display: inline-flex; align-items: center; gap: calc(10 * var(--px)); color: var(--text-heading); font-size: calc(17 * var(--px)); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pp-rev > a .dg-icon { width: calc(22 * var(--px)); height: calc(22 * var(--px)); }
.pp-demo { margin: calc(14 * var(--px)) 0 0; text-align: center; }
.pp-demo .pt-proto-tag { height: auto; padding: 2px 8px; font-size: max(10px, calc(16 * var(--px))); white-space: normal; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .c1 { max-width: var(--content-max); }
  .c1 > * { --q: 1.25px; }
  .c1-hero { height: 220px; }
  .c1-hero__photo { width: 40%; }
  .c1-bar { max-width: 700px; }
  .c1-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp { max-width: 941px; }
  .pp > * { --px: 1px; }
}
/* Cards in one row keep their controls on the same line, whatever the name length */
.c1-card__name { flex: 1; }

/* ===== Owner request 01.11.2026: more compact controls (same quantity and discount logic) ===== */
.c1-card { gap: calc(6 * var(--q)); }
.c1-qty { height: calc(36 * var(--q)); grid-template-columns: calc(36 * var(--q)) 1fr calc(36 * var(--q)); border-radius: calc(8 * var(--q)); }
.c1-qty .dg-icon { width: calc(16 * var(--q)); height: calc(16 * var(--q)); }
.c1-qty output { font-size: calc(16 * var(--q)); }
.c1-hint { min-height: calc(40 * var(--q)); padding: calc(4 * var(--q)) calc(6 * var(--q)); border-radius: calc(8 * var(--q)); }
.c1-hint b { font-size: calc(11.5 * var(--q)); line-height: 1.25; }
.c1-hint small { font-size: calc(10.5 * var(--q)); }
.c1-add { height: calc(40 * var(--q)); margin: 0 calc(8 * var(--q)); border-radius: calc(8 * var(--q)); box-shadow: 0 3px 8px rgba(5, 44, 100, .22); }
.c1-add__l { gap: calc(4 * var(--q)); font-size: calc(11 * var(--q)); }
.c1-add__l .dg-icon { width: calc(13 * var(--q)); height: calc(13 * var(--q)); }
.c1-add__p { padding-inline: calc(7 * var(--q)); font-size: calc(11.5 * var(--q)); }
.c1-add--notify { font-size: calc(12 * var(--q)); box-shadow: inset 0 0 0 1.5px var(--action); }
.c1-add--notify .dg-icon { width: calc(14 * var(--q)); height: calc(14 * var(--q)); }
.qv-buy { gap: calc(8 * var(--q)); }
.qv-qty { height: calc(42 * var(--q)); grid-template-columns: calc(42 * var(--q)) 1fr calc(42 * var(--q)); border-radius: calc(8 * var(--q)); }
.qv-qty output { font-size: calc(17 * var(--q)); }
.qv-hint { min-height: calc(52 * var(--q)); padding: calc(6 * var(--q)); border-radius: calc(8 * var(--q)); }
.qv-hint b { font-size: calc(13 * var(--q)); }
.qv-hint small { font-size: calc(11.5 * var(--q)); }
.qv-add { height: calc(46 * var(--q)); border-radius: calc(8 * var(--q)); }
.qv-add__l { font-size: calc(14 * var(--q)); }
.qv-add__l .dg-icon { width: calc(18 * var(--q)); height: calc(18 * var(--q)); }
.qv-add__p { font-size: calc(15 * var(--q)); }
.qv-rel .qv-add { height: calc(38 * var(--q)); }
.qv-primary { min-height: calc(42 * var(--q)); font-size: calc(14 * var(--q)); }
.qv-secondary { min-height: calc(36 * var(--q)); }
.qv-secondary--block { min-height: calc(42 * var(--q)); }
.qv-nav { width: calc(36 * var(--q)); height: calc(36 * var(--q)); }

/* Owner request 01.11.2026 (second pass): every control a little more compact.
   Same logic and texts; only heights, paddings and type sizes change. Loaded last. */

/* ---- C01 product tile ---- */
.c1-card { gap: calc(5 * var(--q)); padding-bottom: calc(8 * var(--q)); }
.c1-card__name { font-size: calc(13.5 * var(--q)); padding-inline: calc(6 * var(--q)); }
.c1-qty { height: calc(30 * var(--q)); grid-template-columns: calc(32 * var(--q)) 1fr calc(32 * var(--q)); border-radius: calc(7 * var(--q)); border-width: 1px; }
.c1-qty .dg-icon { width: calc(14 * var(--q)); height: calc(14 * var(--q)); }
.c1-qty output { font-size: calc(14.5 * var(--q)); }
.c1-hint { min-height: calc(34 * var(--q)); padding: calc(3 * var(--q)) calc(6 * var(--q)); border-radius: calc(7 * var(--q)); }
.c1-hint b { font-size: calc(10.5 * var(--q)); }
.c1-hint small { font-size: calc(9.5 * var(--q)); }
.c1-add { height: calc(34 * var(--q)); border-radius: calc(7 * var(--q)); box-shadow: 0 2px 6px rgba(5, 44, 100, .2); }
.c1-add__l { font-size: calc(10.5 * var(--q)); }
.c1-add__l .dg-icon { width: calc(12 * var(--q)); height: calc(12 * var(--q)); }
.c1-add__p { font-size: calc(11 * var(--q)); padding-inline: calc(6 * var(--q)); }
.c1-add--notify { font-size: calc(11 * var(--q)); }
.c1-select, .c1-mag { height: calc(40 * var(--q)); border-radius: calc(10 * var(--q)); }
.c1-bar { grid-template-columns: minmax(0, 1fr) calc(40 * var(--q)); }
.c1-searchbox { height: calc(40 * var(--q)); }

/* ---- Quick View ---- */
.qv-qty { height: calc(36 * var(--q)); grid-template-columns: calc(38 * var(--q)) 1fr calc(38 * var(--q)); }
.qv-qty output { font-size: calc(15 * var(--q)); }
.qv-hint { min-height: calc(42 * var(--q)); }
.qv-hint b { font-size: calc(12 * var(--q)); }
.qv-hint small { font-size: calc(10.5 * var(--q)); }
.qv-add { height: calc(40 * var(--q)); }
.qv-add__l { font-size: calc(13 * var(--q)); }
.qv-add__p { font-size: calc(13.5 * var(--q)); }
.qv-rel .qv-add { height: calc(32 * var(--q)); }
.qv-acc summary { min-height: calc(44 * var(--q)); font-size: calc(14 * var(--q)); }
.qv-primary, .qv-secondary--block { min-height: calc(38 * var(--q)); font-size: calc(13 * var(--q)); }
.qv-secondary { min-height: calc(32 * var(--q)); font-size: calc(12 * var(--q)); }
.qv-close { width: calc(38 * var(--q)); height: calc(38 * var(--q)); margin-bottom: calc(-38 * var(--q)); }
.c1-x { width: calc(38 * var(--q)); height: calc(38 * var(--q)); }
.c1-sheet__item { padding: calc(8 * var(--q)) calc(12 * var(--q)); }

/* ---- Homepage buttons ---- */
.hp .dg-btn { min-height: calc(46 * var(--px)); }
.hp .hp-prod__buy .dg-btn { min-height: calc(52 * var(--px)); }
.hp-prod__buy .dg-qty { height: calc(50 * var(--px)); }
.hp-prod__buy .dg-qty button { height: calc(50 * var(--px)); }
.hp .hp-wide-cta { min-height: calc(56 * var(--px)); }
.hp .hp-promo .dg-btn, .hp .hp-promo--md .dg-btn { min-height: calc(52 * var(--px)); }
.hp .hp-more .dg-btn { min-height: calc(58 * var(--px)); }
.hp .hp-infos .dg-help .dg-btn { min-height: calc(62 * var(--px)); }
.hp .hp-center-cta .dg-btn { min-height: calc(66 * var(--px)); }
.hp .hp-cta-stack .dg-btn { min-height: calc(56 * var(--px)); }
.hp-regular .dg-icon-btn { width: calc(66 * var(--px)); height: calc(66 * var(--px)); }
.hp-cat, .hp-cat img { min-height: calc(116 * var(--px)); }

/* ---- Footer ---- */
.hf .dg-tile { min-height: calc(108 * var(--px)); }
.hf-acc .dg-acc summary { min-height: calc(58 * var(--px)); }
.hf-contact .dg-contact__row { min-height: calc(50 * var(--px)); }

/* ---- Menu: lower rows ---- */
.dr-top { min-height: calc(110 * var(--d)); }
.dr-logo { width: calc(300 * var(--d)); }
.dr-search { height: calc(74 * var(--d)); margin: calc(12 * var(--d)) 0 calc(26 * var(--d)); }
.dr-card { margin-bottom: calc(12 * var(--d)); }
.dr-item { min-height: calc(70 * var(--d)); font-size: calc(29 * var(--d)); gap: calc(24 * var(--d)); }
.dr-item > .dg-icon:first-child { width: calc(44 * var(--d)); height: calc(44 * var(--d)); }
.dr-sub a { min-height: calc(52 * var(--d)); font-size: calc(24 * var(--d)); }
.dr-qbtn { min-height: calc(72 * var(--d)); }
.dr-qbtn .dg-icon:first-child { width: calc(38 * var(--d)); height: calc(38 * var(--d)); }
.dr-quick { margin-top: calc(22 * var(--d)); padding-top: calc(18 * var(--d)); }
.dr-util .dg-lang a { min-height: calc(50 * var(--d)); }

/* ---- Search ---- */
.sr-field { height: calc(84 * var(--px)); }
.sr-cat { height: calc(62 * var(--px)); }
.sr-row { padding-block: calc(10 * var(--px)); }
.sr-row img { height: calc(118 * var(--px)); }

/* ---- Notify ---- */
.nt-input { height: calc(66 * var(--px)); }
.nt-primary, .nt-outline { height: calc(58 * var(--px)); }
.nt-x { width: calc(56 * var(--px)); height: calc(56 * var(--px)); }

/* ---- Product page ---- */
.pp-tier { min-height: calc(64 * var(--px)); }
.pp-qty { height: calc(50 * var(--px)); }
.pp-cta { height: calc(52 * var(--px)); }
.pp-help__btn { height: calc(36 * var(--px)); }
.pp-video { height: calc(30 * var(--px)); }
.c1-add--notify { box-shadow: inset 0 0 0 1.5px var(--action); }

/* ---- Quick View, third pass: lower overall (owner request 01.11.2026) ---- */
.qv-panel { padding: calc(8 * var(--q)) calc(14 * var(--q)) calc(20 * var(--q)); }
.qv-main { width: calc(180 * var(--q)); height: calc(180 * var(--q)); }
.qv-thumbs { gap: calc(6 * var(--q)); margin-top: calc(4 * var(--q)); }
.qv-thumbs button { width: calc(38 * var(--q)); height: calc(38 * var(--q)); }
.qv-title { margin: calc(8 * var(--q)) 0 calc(4 * var(--q)); font-size: calc(18 * var(--q)); }
.qv-facts { font-size: calc(12.5 * var(--q)); line-height: 1.4; }
.qv-buy { gap: calc(6 * var(--q)); margin-top: calc(10 * var(--q)); }
.qv-qty { height: calc(32 * var(--q)); grid-template-columns: calc(34 * var(--q)) 1fr calc(34 * var(--q)); }
.qv-qty .dg-icon { width: calc(15 * var(--q)); height: calc(15 * var(--q)); }
.qv-qty output { font-size: calc(14 * var(--q)); }
.qv-hint { min-height: calc(32 * var(--q)); padding: calc(4 * var(--q)) calc(6 * var(--q)); }
.qv-hint b { font-size: calc(11.5 * var(--q)); }
.qv-add { height: calc(36 * var(--q)); }
.qv-add__l { font-size: calc(12.5 * var(--q)); }
.qv-add__l .dg-icon { width: calc(15 * var(--q)); height: calc(15 * var(--q)); }
.qv-add__p { font-size: calc(13 * var(--q)); }
.qv-sec { margin-top: calc(10 * var(--q)); padding: calc(10 * var(--q)); border-radius: calc(10 * var(--q)); }
.qv-sec h3 { margin-bottom: calc(6 * var(--q)); font-size: calc(16 * var(--q)); }
.qv-sec ol { margin-bottom: calc(8 * var(--q)); font-size: calc(12.5 * var(--q)); line-height: 1.45; }
.qv-owner { margin: 0; font-size: calc(12.5 * var(--q)); color: var(--text-subtle); }
.qv-secondary { min-height: calc(28 * var(--q)); font-size: calc(11.5 * var(--q)); }
.qv-nav { width: calc(30 * var(--q)); height: calc(30 * var(--q)); }
.qv-rail { gap: calc(8 * var(--q)); margin-top: calc(6 * var(--q)); }
.qv-rel { width: calc(160 * var(--q)); padding: calc(6 * var(--q)); gap: calc(6 * var(--q)); }
.qv-rel__photo { height: calc(80 * var(--q)); }
.qv-rel__name { font-size: calc(11.5 * var(--q)); }
.qv-rel .qv-add { height: calc(28 * var(--q)); }
.qv-rel .qv-add__l, .qv-rel .qv-add__p { font-size: calc(11 * var(--q)); }
.qv-status { margin-top: calc(6 * var(--q)); font-size: calc(10 * var(--q)); }
.qv-acc { margin-top: calc(6 * var(--q)); border-radius: calc(8 * var(--q)); }
.qv-acc summary { min-height: calc(34 * var(--q)); padding: 0 calc(10 * var(--q)); font-size: calc(12.5 * var(--q)); }
.qv-acc summary .dg-icon { width: calc(15 * var(--q)); height: calc(15 * var(--q)); }
.qv-acc > p { padding: 0 calc(10 * var(--q)) calc(10 * var(--q)); font-size: calc(12.5 * var(--q)); line-height: 1.45; }
.qv-form { gap: calc(6 * var(--q)); padding: 0 calc(10 * var(--q)) calc(10 * var(--q)); }
.qv-form label { font-size: calc(11.5 * var(--q)); }
.qv-form input { min-height: calc(32 * var(--q)); padding: calc(4 * var(--q)) calc(8 * var(--q)); font-size: calc(12.5 * var(--q)); }
.qv-form textarea { min-height: calc(52 * var(--q)); font-size: calc(12.5 * var(--q)); }
.qv-primary, .qv-secondary--block { min-height: calc(34 * var(--q)); font-size: calc(12.5 * var(--q)); }
.qv-empty { padding: calc(8 * var(--q)) calc(10 * var(--q)); font-size: calc(11.5 * var(--q)); }
.qv-close { width: calc(34 * var(--q)); height: calc(34 * var(--q)); margin-bottom: calc(-34 * var(--q)); }
.qv-close .dg-icon { width: calc(18 * var(--q)); height: calc(18 * var(--q)); }

/* ---- Menu: everything 12% larger (owner request 01.11.2026); the drawer width stays the same ---- */
.dr-mask > * { --d: calc(min(100cqw, 560px) / 800 * 1.12); }
.dr-quick__row { gap: calc(12 * var(--d)); }
.dr-qbtn { gap: calc(8 * var(--d)); padding: 0 calc(6 * var(--d)); font-size: calc(21 * var(--d)); min-width: 0; }
.dr-qbtn .dg-icon:first-child { width: calc(32 * var(--d)); height: calc(32 * var(--d)); }
.dr-qbtn .dg-icon:last-child { width: calc(18 * var(--d)); height: calc(18 * var(--d)); }


/* ===================== Desktop ≥1024px (owner request 01.11.2026: premium wide-screen layout) =====================
   Copied 1:1 from PROTOTYPE/src/desktop.css. Phones and tablets are not affected. */
/* Wide screens (≥1024px), owner request 01.11.2026: a real desktop layout, premium feel.
   Loaded last. Phones and tablets keep the PNG layout untouched; the .pt-hd-* header parts and .hp-top__cta exist only here.
   Rules: content column 1200px, backgrounds run full width; cards keep the PNG composition, scaled by the width of their grid column. */

.pt-hd-bar, .pt-hd-search, .pt-hd-login, .pt-hd-nav, .pt-hd-label, .hp-top__cta { display: none; }

@media (min-width: 1024px) {
  /* ---------- Header: info bar · menu, logo, search, login, cart · category row ---------- */
  .pt-header { box-shadow: 0 1px 0 var(--border-warm); }
  .pt-hd-bar { display: block; max-height: 40px; overflow: hidden; background: var(--action); color: #ffffff; transition: max-height var(--dur-base) var(--ease-out); }
  .pt-header.is-scrolled .pt-hd-bar { max-height: 0; }
  .pt-hd-bar__in { display: flex; align-items: center; gap: 28px; max-width: var(--content-max); height: 40px; margin-inline: auto; padding-inline: 24px; font-size: 15px; }
  .pt-hd-bar a, .pt-hd-bar span { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; white-space: nowrap; }
  .pt-hd-bar .dg-icon { width: 16px; height: 16px; opacity: .85; }
  .pt-hd-bar__end { margin-left: auto; gap: 24px !important; }
  .pt-hd-bar__end a { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .3); }
  .pt-hd-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }

  .pt-header .dg-header { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 28px; height: 84px; padding-inline: 24px; }
  .pt-header .dg-header > .dg-header__btn { width: auto; gap: 8px; padding-inline: 14px 18px; height: 46px; display: inline-flex; border: 1px solid var(--border-cool); color: var(--text-heading); }
  .pt-hd-label { display: inline; font: 600 16px var(--font-sans); }
  .pt-hd-logo { justify-self: start !important; }
  .pt-header .dg-header__logo { height: 54px; }
  .pt-hd-search { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 600px; height: 52px; justify-self: center; padding-inline: 22px; border: 1.5px solid var(--border-cool); border-radius: var(--radius-pill); background: var(--bg-page); color: var(--text-subtle); font: 400 17px var(--font-sans); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .pt-hd-search .dg-icon { width: 22px; height: 22px; color: var(--text-heading); }
  .pt-hd-search:hover { border-color: var(--text-link); box-shadow: var(--shadow-card); }
  .pt-header .dg-header__end { align-items: center; gap: 18px; }
  .pt-hd-mob { display: none !important; }
  .pt-hd-login { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; color: var(--text-heading); text-decoration: none; font: 600 16px/1.15 var(--font-sans); }
  .pt-hd-login > .dg-icon { width: 26px; height: 26px; }
  .pt-hd-login small { display: block; font-size: 15px; font-weight: 400; color: var(--text-subtle); }
  .pt-hd-login:hover span { color: var(--text-link); }

  .pt-hd-nav { display: block; border-top: 1px solid var(--border-warm); background: var(--bg-surface); }
  .pt-hd-nav ul { display: flex; justify-content: space-between; max-width: var(--content-max); margin: 0 auto; padding: 0 24px; list-style: none; }
  .pt-hd-nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 50px; color: var(--text-heading); font: 600 16px var(--font-sans); text-decoration: none; white-space: nowrap; }
  .pt-hd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; border-radius: 99px; background: var(--gold-rule); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out); }
  .pt-hd-nav a:hover::after { transform: scaleX(1); }
  .pt-hd-nav__promo a { color: var(--gold-badge); }
  .pt-hd-nav__promo .dg-icon { width: 18px; height: 18px; }
  .pt-anchor { scroll-margin-top: 150px; }

  /* ---------- Page frame ---------- */
  .hp, .hf { max-width: none; }
  /* --px: section scale; --gut: side padding that keeps content in a 1200px column; --cpx: scale of a card in a two-column grid */
  .hp > *, .hf > * { --px: .72px; --gut: max(40px, calc((100cqw - var(--content-max)) / 2)); --cpx: calc((min(100cqw, var(--content-max) + 80px) - 108px) / 2 / 941); }
  .hp > section { padding-inline: var(--gut); }
  .hp-title { max-width: var(--content-max); margin-inline: auto; }
  .hp-note { font-size: 24px !important; }
  .hp-sols, .hp-prods, .hp-promos, .hp-infos, .hp-revs, .hp-more, .hp-cats { max-width: none; margin-inline: 0; }
  .hp-decor, .hp-s02 .hp-foot-img { max-width: var(--content-max); height: 240px; margin: 40px auto 0; object-fit: cover; border-radius: 28px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }

  /* ---------- Screen 01: text left, photo right; categories in a full-width warm band ---------- */
  .hp-top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px; align-items: center; max-width: var(--content-max); margin: 36px auto 0; }
  .hp-hero img { object-position: 30% center; }
  .hp-hero { grid-column: 2; grid-row: 1; height: 440px; margin: 0; aspect-ratio: auto; border-radius: 32px; box-shadow: var(--shadow-raised); }
  .hp-top__text { grid-column: 1; grid-row: 1; }
  .hp-h1 { margin: 0; text-align: left; font-size: clamp(30px, 2.9vw, 40px); line-height: 1.14; }
  .hp-h1::after { content: ""; display: block; width: 96px; height: 5px; margin-top: 22px; border-radius: 99px; background: var(--gold-rule); }
  .hp-h1sub { margin-top: 18px; text-align: left; font-size: 20px; letter-spacing: .01em; }
  .hp-top__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .hp .hp-top__cta .dg-btn { min-height: 54px; padding-inline: 28px; font-size: 17px; gap: 10px; }
  .hp .hp-top__cta .dg-btn .dg-icon { width: 20px; height: 20px; }
  .hp-regular { margin: 32px 0 0; padding: 18px 20px 18px 26px; border-radius: 22px; }

  .hp-band { margin: 64px calc(-1 * var(--gut)) 0; padding: 56px var(--gut) 64px; border-radius: 48px 48px 0 0; }
  .hp-cats { --px: .9px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: var(--content-max); margin: 36px auto 0; }
  .hp-wave { width: calc(100% + 2 * var(--gut)); margin-inline: calc(-1 * var(--gut)); height: 48px; }

  /* ---------- Screens 02–05: cards two per row at the phone proportions ---------- */
  .hp-s02 { padding-top: 64px; }
  .hp-s03, .hp-s04, .hp-s05 { padding-top: 88px; }
  .hp-s02 .hp-title, .hp-s04 .hp-title { padding-inline: 22%; }
  .hp-sols, .hp-prods, .hp-infos { --px: var(--cpx); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: var(--content-max); margin: 40px auto 0; }
  .hp-sol__title { white-space: normal; }
  .hp-sols > .hp-sol--blue { grid-column: 1 / -1; min-height: 180px; }
  .hp-sol--blue .hp-sol__body { width: 46%; padding-left: 40px; justify-content: center; height: 100%; }
  .hp-sol--blue .hp-sol__photo { left: 42%; width: 58%; }
  .hp .hp-wide-cta { max-width: 520px; margin: 36px auto 0; }

  .hp-promos { --px: var(--cpx); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 28px; max-width: var(--content-max); margin: 40px auto 0; }
  .hp-promos > :first-child { grid-column: 1; grid-row: 1 / 3; }
  .hp-more { max-width: var(--content-max); margin: 28px auto 0; padding: 36px 40px 32px; }
  .hp-more__btns { max-width: 760px; margin-inline: auto; }

  .hp-infos .dg-help { grid-column: 1 / -1; }

  /* ---------- Screen 06: statement + photo, four benefits in a row ---------- */
  .hp-s06 { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 64px; max-width: none; padding-top: 104px; }
  .hp-s06 > * { max-width: var(--content-max); }
  .hp-s06 .hp-why__photo { height: 420px; border-radius: 32px; -webkit-mask-image: none; mask-image: none; box-shadow: var(--shadow-raised); }
  .hp-s06 .hp-why__text { padding: 0; }
  .hp-s06 .dg-benefits { margin: 56px 0 0; gap: 24px; }
  .hp-s06 .hp-center-cta { margin-top: 36px; }

  /* ---------- Screen 07: heading left with the note, three reviews in a row ---------- */
  .hp-s07 { padding-top: 104px; }
  .hp-s07__head { max-width: var(--content-max); margin-inline: auto; padding: 0; }
  .hp-s07 .hp-h2, .hp-s07__sub { width: 62%; }
  .hp-revs { --px: .6px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: var(--content-max); margin: 40px auto 0; }
  .hp-cta-stack { grid-auto-flow: column; justify-content: center; gap: 16px; margin-top: 36px; }

  /* ---------- Footer (Screen 08): link columns open, cards in pairs ---------- */
  .hf { padding-top: 72px; }
  .hf-head, .hf-body { --px: .66px; max-width: var(--content-max); margin-inline: auto; padding-inline: 0; box-sizing: content-box; }
  .hf-head, .hf-body { padding-inline: 40px; }
  .hf-head h2, .hf-head p { width: 60%; }
  .hf-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 36px; padding-bottom: 120px; }
  .hf-body > .dg-tiles, .hf-body > .hf-acc { grid-column: 1 / -1; }
  .hf-body > .hf-partners { grid-column: auto; }
  .hf-acc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  .hf-acc .dg-acc summary { pointer-events: none; }
  .hf-acc .dg-acc summary .dg-acc__chev { display: none; }
  .hf-partners__grid { grid-template-columns: 1fr; }
  .hf-band { padding: 110px var(--gut) 36px; }
  .hf-band ul { max-width: var(--content-max); margin-inline: auto; }
}

/* 1024–1199px: the header loses its least needed parts so nothing runs off the screen */
@media (min-width: 1024px) and (max-width: 1199px) {
  .pt-hd-bar__in > span:not(.pt-hd-bar__end), .pt-hd-login small, .pt-hd-nav__promo { display: none !important; }
  .pt-header .dg-header { gap: 20px; }
  .pt-hd-nav ul { padding-inline: 16px; }
  .pt-hd-nav a { font-size: 15px; }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .hp-hero img { object-position: 28% center; transition: transform 1200ms var(--ease-out); }
  .hp-hero:hover img { transform: scale(1.02); }
}