@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

@font-face {
  font-family: "Vollkorn";
  src: url("../fonts/vollkorn/Vollkorn-Regular.woff2") format("woff2"), url("../fonts/vollkorn/Vollkorn-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vollkorn";
  src: url("../fonts/vollkorn/Vollkorn-SemiBold.woff2") format("woff2"), url("../fonts/vollkorn/Vollkorn-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vollkorn";
  src: url("../fonts/vollkorn/Vollkorn-Bold.woff2") format("woff2"), url("../fonts/vollkorn/Vollkorn-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-white: #ffffff;
  --color-border: #191919;
  --color-deep: #0f0f0f;
  --color-grey1: #7a7a7a;
  --color-grey3: #e5e5e5;
  --color-grey6: #cccccc;
  --divider-light: #f0f0f0;
  --color-grey-bg: #f7f7f7;
  --color-red: #f93943;
  --color-red-active: #e8101b;
  --color-premium-gold: #d1ba48;
  --color-premium-gold-text: #8a6d1a;
  --color-success: #1c8055;
  --color-error: #c20626;
  --bg-placeholder: #f0ede9;
  --bg-strip: #fafaf8;
  --bg-notice: #fffbf2;
  --border-notice: #e8dfc2;
  --bg-success: #f0f8f3;
  --border-success: #c6e2d0;
  --bg-error: #fbf1f1;
  --border-error: #e8c6c6;
  --overlay: rgba(0, 0, 0, 0.55);
  --fg-1: var(--color-border);
  --fg-2: #393e41;
  --fg-3: var(--color-grey1);
  --fg-4: #949494;
  --fg-inverse: var(--color-white);
  --bg-app: var(--color-white);
  --bg-muted: var(--color-grey-bg);
  --bg-dark: var(--color-border);
  --bg-deep: var(--color-deep);
  --border-default: var(--color-grey6);
  --border-strong: var(--color-border);
  --border-input: var(--color-grey1);
  --color-link: var(--color-border);
  --color-sale: var(--color-red);
  --color-discount: var(--color-red);
  --tile-slate: #3d4a5c;
  --tile-graphite: #2a2a2a;
  --tile-camel: #c9a582;
  --tile-olive: #5c6a4b;
  --tile-taupe: #a89b8b;
  --tile-wine: #7a1a2b;
  --dresses-bg: #faf6f0;
  --dresses-bg-deep: #f2ebe0;
  --dresses-rose: #d4a5a0;
  --dresses-rose-soft: #e8cdc8;
  --dresses-deep: #5c3a3e;
  --dresses-deep-ink: #3d2629;
  --dresses-text: #2a2426;
  --dresses-muted: #7a6f71;
  --dresses-line: #e8ddd4;
  --ev-bg: #fcfaf7;
  --ev-bg-deep: #f4efe7;
  --ev-blush: #e8c9c0;
  --ev-blush-soft: #f2dcd5;
  --ev-sand: #c9b89e;
  --ev-deep: #5c3a3e;
  --ev-deep-ink: #3d2629;
  --ev-text: #2a2426;
  --ev-muted: #7a6f71;
  --ev-line: #e8ddd4;
  --ad-bg: #0f0d0e;
  --ad-surface: #1a1618;
  --ad-surface-2: #221c1e;
  --ad-accent: #6b2b33;
  --ad-accent-deep: #4a1e25;
  --ad-highlight: #b8956a;
  --ad-text: #f2ede8;
  --ad-muted: #a89b8e;
  --ad-line: #2b2528;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-68: 68px;
  --space-90: 90px;
  --radius-0: 0;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --border-thin: 1px;
  --border-base: 2px;
  --border-strong-w: 3px;
  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.12);
  --shadow-fixed-header: 0 1px 3px 1px #dddddd;
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.18);
  --shadow-drawer: -4px 0 20px rgba(0, 0, 0, 0.12);
  --shadow-sheet: 0 -4px 20px rgba(0, 0, 0, 0.12);
  --wrapper-max: 1256px;
  --wrapper-large: 1330px;
  --wrapper-inner: 1164px;
  --wrapper-pct: 90%;
  --gutter-mobile: 16px;
  --bp-desktop: 1200px;
  --bp-tablet-h: 1024px;
  --bp-tablet-v: 768px;
  --bp-phone-h: 640px;
  --bp-phone-v: 480px;
  --bp-phone-s: 359px;
  --duration-fast: 0.25s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;
  --font-sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Cormorant Infant', Georgia, serif;
  --font-serif: 'Vollkorn', Georgia, serif;
}

/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/  - modified by Studio X */
html {
  color: var(--fg-2);
  font-size: 1em;
  line-height: 1.2;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

a {
  text-decoration: none;
}

address {
  font-style: normal;
}

ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  cursor: pointer;
  border: 0;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

/* Author's custom styles  */
*,
*:before,
*:after {
  box-sizing: inherit;
  flex-shrink: 1;
}

*:focus {
  outline: none;
}

html,
body {
  height: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

body {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.025em;
  color: var(--fg-2);
  padding-bottom: calc(constant(safe-area-inset-bottom) + 1.25rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
}

.wrapper {
  width: auto;
  max-width: 1256px;
  margin: 0 auto;
  width: 90%;
}

.main-content {
  flex-grow: 1;
  flex-shrink: 0;
}

.link {
  position: relative;
  text-decoration: none;
}
.link::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bg-dark);
  transition: all var(--duration-base) ease;
  transform: scale(0);
  transform-origin: center center;
}
.link:hover::after {
  transform: scale(1);
}

.required {
  color: var(--color-error);
  line-height: 1;
  flex-grow: 0;
  display: block;
  height: 7px;
  position: relative;
  top: 2px;
  margin-left: 3px;
}

.p-68 {
  padding: 68px 0;
}
@media screen and (max-width: 768px) {
  .p-68 {
    padding: 30px 0;
  }
}

.pb-60 {
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .pb-60 {
    padding-bottom: 30px;
  }
}

.block {
  display: block;
}

.label {
  color: var(--fg-inverse);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  padding: 2px 3px 2px 40px;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
  .label {
    font-size: 14px;
    padding-left: 20px;
  }
}

.step {
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  margin-right: 8px;
}

.text-section .wrapper {
  position: relative;
}

.text-section .text {
  max-width: 916px;
  width: 100%;
  margin: 0 auto;
  padding: 0 43px;
}
@media screen and (max-width: 480px) {
  .text-section .text {
    padding: 0 30px 0 0;
  }
}

.block-ui > .block-ui-container {
  display: none;
}

.block-ui-active > .block-ui-container {
  display: block;
}

.page-loader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  position: relative;
  width: 233px;
  margin: 0 auto;
}

.clearfix:after {
  display: block;
  content: "";
  height: 0;
  clear: both;
  zoom: 1;
}

/* arroows */
/* pagination */
body.app {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.025em;
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-wrap {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}
.t-wrap--large {
  max-width: var(--wrapper-large);
}
.t-wrap--inner {
  max-width: var(--wrapper-inner);
}
@media screen and (max-width: 768px) {
  .t-wrap {
    width: 100%;
    max-width: none;
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
    box-sizing: border-box;
  }
}

.ds-hidden-loader {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.ds-home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media screen and (max-width: 1024px) {
  .ds-home-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}
@media screen and (max-width: 768px) {
  .ds-home-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media screen and (max-width: 640px) {
  .ds-home-grid {
    grid-template-columns: 1fr;
  }
}
.ds-home-grid__item {
  min-width: 0;
}

.ds-brand-strip {
  padding: 40px 0;
  border-top: 1px solid var(--color-grey3);
  border-bottom: 1px solid var(--color-grey3);
}
.ds-brand-strip t-home-brands {
  display: block;
  width: 100%;
}
.ds-brand-strip__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: center;
  justify-items: center;
  gap: 30px 20px;
}
@media screen and (max-width: 768px) {
  .ds-brand-strip__track {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 24px 16px;
  }
}
.ds-brand-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
}
.ds-brand-strip__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: var(--duration-base) ease;
  text-decoration: none;
}
.ds-brand-strip__link:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.ds-brand-strip__link img,
.ds-brand-strip__link t-form-image-static img {
  display: block;
  max-height: 36px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* end of custom check radio */
.form {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  text-align: left;
}
.form__item {
  min-width: 240px;
  padding: 0 15px 25px;
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media (max-width: 768px) {
  .form__item {
    max-width: 100%;
    flex-basis: auto;
    padding: 0 10px 15px;
  }
}
@media (max-width: 480px) {
  .form__item {
    min-width: 100%;
  }
}
.form__label {
  display: block;
  color: var(--fg-3);
  font-family: "Jost", sans-serif;
  font-size: 14px;
  top: 0;
  font-weight: 400;
  flex-shrink: 0;
  position: relative;
  transform: translateY(11px);
  transition: all var(--duration-base) ease;
  margin-bottom: -18px;
  z-index: 20;
  transform-origin: left top;
}
.form__element {
  display: flex;
  width: 100%;
  color: var(--fg-1);
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 400;
  border: 0;
  border-bottom: 2px solid var(--border-input);
  appearance: none;
  outline: none;
  border-radius: 0;
  padding: 10px 0px 5px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .form__element {
    font-size: 16px;
  }
}
.form input::-ms-clear,
.form input::-ms-reveal {
  display: none;
}
.form select::-ms-expand {
  display: none;
}

.date-selects {
  display: flex;
}

.title {
  margin: 0;
}

.transperent_button {
  display: block;
  font-size: 14px;
  color: var(--fg-2);
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 110px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.38px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.transperent_button:hover::after {
  transform: scale(1);
}
.transperent_button:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--fg-2);
  transition: all ease var(--duration-base);
  transform: scale(0);
  transform-origin: center center;
}

.button__cont {
  display: flex;
}
.button__cont--center {
  justify-content: center;
}

.button-scroll-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  width: 43px;
  border-left: 3px solid var(--border-strong);
  background: var(--bg-app);
  color: var(--fg-1);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}
@media screen and (max-width: 480px) {
  .button-scroll-top {
    width: 32px;
    height: 32px;
  }
}
.non-touch .button-scroll-top:hover {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.banner {
  position: relative;
  display: flex;
  text-decoration: none;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.banner picture,
.banner img {
  width: 100%;
}
.banner__cont {
  height: 100%;
}

@media only screen and (min-width: 1200px) {
  .banner_container {
    min-height: 361px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .banner_container {
    min-height: 308px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .banner_container {
    min-height: 232px;
  }
}
@media screen and (min-width: 640px) and (max-width: 768px) {
  .banner_container {
    min-height: 196px;
  }
}
@media screen and (min-width: 480px) and (max-width: 640px) {
  .banner_container {
    min-height: 146px;
  }
}
@media screen and (min-width: 359px) and (max-width: 480px) {
  .banner_container {
    min-height: 109px;
  }
}
@media screen and (max-width: 359px) {
  .banner_container {
    min-height: 100px;
  }
}
.breadcrumb_wrapper {
  min-height: 35px;
}

.breadcrumb {
  padding: 18px 0 0;
  font-family: var(--font-sans);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  content: "/"/"";
  margin: 0 8px;
  color: var(--fg-4);
}

.breadcrumb__item > a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.breadcrumb__item > a:hover,
.breadcrumb__item > a.is-hover {
  color: var(--fg-1);
}

.breadcrumb__item:last-child > a,
.breadcrumb__item:last-child > span {
  color: var(--fg-1);
}

@media (max-width: 768px) {
  .breadcrumb_wrapper,
  .breadcrumb {
    display: none;
  }
}
.section__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 21px;
}
@media screen and (max-width: 768px) {
  .section__header {
    margin-bottom: 10px;
  }
}
.section__title {
  width: 100%;
  color: var(--fg-2);
  font-size: 18px;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
}
.section__title-mid {
  color: var(--fg-1);
  font-family: var(--font-sans);
}
.section__title-mid {
  font-size: 20px;
}
@media screen and (min-width: 769px) {
  .section__title-mid {
    font-size: 24px;
  }
}
.section__title-mid {
  font-weight: 400;
  text-align: center;
  margin: 0;
  margin-bottom: 1.3333333333em;
}
@media screen and (max-width: 768px) {
  .section__title-mid {
    line-height: 1.2;
    padding-top: 1.3333333333em;
  }
}

.preview {
  overflow: hidden;
}
.preview__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -19px -38px;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .preview__list {
    margin: 0 -12px -24px;
  }
}
.preview__anchor {
  text-decoration: none;
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}
.preview__anchor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-grey3);
  z-index: 20;
}
.preview__anchor::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  transform: translateX(100%);
  opacity: 0;
  height: 4px;
  background-color: var(--bg-dark);
  transition: all var(--duration-base) ease;
  z-index: 21;
}
.non-touch .preview__anchor:hover::before {
  transform: translateX(0%);
  opacity: 1;
}
.preview__item {
  min-width: 210px;
  width: 33.333333%;
  flex-grow: 1;
  padding: 0 19px 38px;
}
@media screen and (max-width: 768px) {
  .preview__item {
    padding: 0 12px 30px;
  }
}
.preview__img {
  margin-bottom: 16px;
}
.preview__img img {
  max-width: 100%;
  width: 100%;
}
.preview__text {
  color: var(--fg-2);
  font-family: "Jost", sans-serif;
  font-size: 18px;
}
.preview__text {
  font-size: 14px;
}
@media screen and (min-width: 769px) {
  .preview__text {
    font-size: 18px;
  }
}
.preview__text {
  font-weight: 400;
  line-height: 1.44;
  margin: 0;
  padding-bottom: 1.1111111111em;
}

.images {
  overflow: hidden;
}

.preview_images_container {
  width: 80px;
  margin: 0px 5px;
  display: flex;
  flex-direction: column;
}
.preview_images_container .preview_image_radio_container {
  width: 80px;
  margin: 10px 0px;
  padding: 0px 30px;
}
.preview_images_container .preview_image_radio_container .preview_image_container_radio {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-strong);
  opacity: 1;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border-radius: var(--radius-circle);
  position: relative;
}
.preview_images_container .preview_image_radio_container .preview_image_container_radio .preview_image_container_radio_dot {
  display: none;
}
.preview_images_container .preview_image_radio_container .preview_image_container_radio .preview_image_container_radio_selected {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-strong);
  opacity: 1;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border-radius: var(--radius-circle);
  position: relative;
}
.preview_images_container .preview_image_radio_container .preview_image_container_radio .preview_image_container_radio_selected .preview_image_container_radio_dot {
  position: absolute;
  border-radius: var(--radius-circle);
  top: 3px;
  left: 3px;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  background-color: var(--bg-dark);
}

.preview_image_container {
  width: 80px;
  margin: 0px 0px 10px 0px;
  padding: 5px;
}

.preview_image_container_selected {
  border-style: solid;
  border-width: 1px;
  border-color: var(--border-input);
}

.preview_image_container_not_selected {
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
}

.preview_image_arrow_container {
  display: flex;
  height: 40px;
  justify-content: center;
}

.preview_image_arrow_prev:after {
  transform: rotate(-45deg);
}

.preview_image_arrow_next:after {
  transform: rotate(135deg);
}

.preview_image_arrow:after {
  display: block;
  content: "";
  height: 15px;
  width: 15px;
  border-top: 5px solid var(--border-strong);
  border-right: 5px solid var(--border-strong);
  transition: all var(--duration-fast) linear;
}

.preview_image_arrow {
  height: 40px;
  width: 40px;
  display: block;
  position: absolute;
  padding-top: 12px;
  background: var(--bg-app);
  opacity: 0.5;
  z-index: 1;
  padding-left: 12px;
}

.preview_image_arrow:hover {
  opacity: 1;
}

.cards {
  overflow: hidden;
}
.cards__cont {
  padding: 0 10px 10px;
  margin: 0 -10px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .cards__cont {
    overflow: auto;
    padding: 0;
    margin: 0;
  }
}
.cards__slider {
  display: flex;
  padding: 10px 0;
  margin: 0 -20px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .cards__slider {
    overflow: auto;
    margin: 0;
  }
  .cards__slider::-webkit-scrollbar {
    height: 6px;
  }
  .cards__slider::-webkit-scrollbar-thumb {
    background: var(--color-grey1);
    border-radius: 0;
  }
  .cards__slider::-webkit-scrollbar-track {
    background: var(--color-grey3);
    border-radius: 0;
  }
}
.cards__slider-controls {
  width: 100%;
  display: none;
}
.cards__slider-controls .cards__slider-arrow--prev {
  left: -25px;
}
.cards__slider-controls .cards__slider-arrow--next {
  right: -25px;
}
.cards__slider-arrow {
  height: 17px;
  width: 42px;
  display: block;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: transparent;
  z-index: 1;
  font-size: 28px;
  color: var(--fg-1);
}
.cards__slider-arrow svg {
  height: 17px;
}
.cards__slider-arrow:hover {
  opacity: 1;
}
.cards__item {
  padding: 0 20px;
  width: 100%;
  max-width: 260px;
  flex-grow: 1;
  flex-shrink: 0;
}
@media only screen and (max-width: 480px) {
  .cards__item {
    padding: 0 10px;
    max-width: 160px;
  }
}
.cards__slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}
@media screen and (max-width: 768px) {
  .cards__slider-dots {
    display: none;
  }
}
.cards__slider-dots {
  position: absolute;
  bottom: 30px;
  width: 100%;
}
.cards__slider-dots-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 -8px;
  padding: 0 32px;
}
.cards__slider-dots-list li {
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-base) ease;
}
.non-touch .cards__slider-dots-list li:hover {
  opacity: 0.8;
}
.cards__slider-dots-list li.is-active button {
  width: 6px;
  height: 6px;
  background-color: var(--bg-dark);
}
.cards__slider-dots-list button {
  width: 6px;
  height: 6px;
  background-color: rgba(59, 59, 59, 0.2);
  border-radius: 0;
}
.non-touch .cards__cont:hover .cards__slider-arrow {
  opacity: 1;
}
.touch .cards__slider {
  overflow: auto;
  margin: 0;
}
.touch .cards__slider-dots {
  display: none;
}
.touch .cards__slider-arrow {
  opacity: 1;
  margin: 0 20px;
}
.touch .cards__slider-dots-list {
  display: none;
}

.cards:hover .cards__slider-controls {
  display: block;
}

.cards.pb-60 {
  padding-bottom: 50px;
}

@media only screen and (min-width: 1200px) {
  #section_last_view {
    min-height: 377px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  #section_last_view {
    min-height: 377px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #section_last_view {
    min-height: 377px;
  }
}
@media only screen and (min-width: 640px) and (max-width: 768px) {
  #section_last_view {
    min-height: 356px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 640px) {
  #section_last_view {
    min-height: 356px;
  }
}
@media only screen and (min-width: 359px) and (max-width: 480px) {
  #section_last_view {
    min-height: 381px;
  }
}
@media only screen and (max-width: 359px) {
  #section_last_view {
    min-height: 381px;
  }
}

/* text - typography */
.text {
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
}
.text > *:last-child {
  margin-bottom: 0 !important;
}
.text small {
  font-size: 12px;
}
.text a,
.text span,
.text strong {
  display: inline-block;
}
.text a {
  transition: var(--duration-fast) ease;
  text-decoration: underline;
  display: inline-block;
  color: currentcolor;
}
.non-touch .text a:hover {
  text-decoration-color: currentcolor;
}
.text p {
  font-size: inherit;
  margin-bottom: 20px;
  line-height: 1.4;
}
.text {
  /* Titles styles */
}
.text h2 {
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 32px;
}
.text h3 {
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 32px;
}
.text h4 {
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
}
.text h5 {
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 16px;
}
.text h6 {
  font-size: 16px;
  font-weight: 700;
}
.text h2,
.text h3,
.text h4 {
  line-height: 1.62;
  margin-top: 0;
  margin-bottom: 20px;
}
@media (max-width: 480px) {
  .text h2,
  .text h3,
  .text h4 {
    margin-bottom: 15px;
  }
}
.text h5,
.text h6 {
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.62;
}
@media (max-width: 480px) {
  .text h5,
  .text h6 {
    margin-bottom: 10px;
  }
}
.text {
  /* image styles */
}
.text img[style*="float: left"], .text img[style*="float:left"] {
  margin: 20px 20px 20px 0;
}
@media (max-width: 1024px) {
  .text img[style*="float: left"], .text img[style*="float:left"] {
    max-width: 50%;
  }
}
@media (max-width: 480px) {
  .text img[style*="float: left"], .text img[style*="float:left"] {
    max-width: 100%;
    float: none !important;
    margin: 20px 0;
    display: block;
  }
}
.text img[style*="float: right"], .text img[style*="float:right"] {
  margin: 20px 0 20px 20px;
}
@media (max-width: 1024px) {
  .text img[style*="float: right"], .text img[style*="float:right"] {
    max-width: 50%;
  }
}
@media (max-width: 480px) {
  .text img[style*="float: right"], .text img[style*="float:right"] {
    max-width: 100%;
    float: none !important;
    margin: 20px 0;
    display: block;
  }
}
.text {
  /* List styles */
}
.text li {
  color: var(--fg-1);
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.33;
  margin-bottom: 15px;
  position: relative;
}
.text li:last-child {
  margin-bottom: 0;
}
.text {
  /* Ol counter 1, 1.1, 1.1.1 ... */
}
.text ol {
  counter-reset: section;
  list-style-type: none;
}
.text ol li:before {
  counter-increment: section;
  content: counters(section, ".") ".";
  margin-right: 7px;
  color: currentcolor;
}
.text ol ol {
  margin: 10px 0 0 0;
  padding: 0 0 0 15px;
}
.text {
  /* Ul styles */
}
.text ul ul {
  margin: 10px 0 0;
}
.text ul li {
  padding-left: 20px;
  position: relative;
}
@media (max-width: 768px) {
  .text ul li {
    padding-left: 16px;
  }
}
.text ul li:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 0;
  background-color: var(--bg-dark);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 6px;
}
.text {
  /* Table styles  */
}
.text table {
  border-collapse: collapse;
  margin-bottom: 20px;
  width: 100%;
  color: var(--fg-1);
  border: 1px solid var(--border-strong);
}
@media (max-width: 1024px) {
  .text table {
    display: block;
  }
}
.text table thead th {
  text-align: center;
}
.text table thead th:first-child {
  text-align: left;
}
@media (max-width: 1024px) {
  .text table thead {
    display: none;
  }
}
@media (max-width: 1024px) {
  .text table tbody {
    display: block;
    width: 100%;
    border: none;
  }
}
.text table tbody td {
  text-align: center;
}
@media (max-width: 1024px) {
  .text table tbody td {
    text-align: left;
  }
}
.text table td,
.text table th {
  padding: 16px 12px;
}
.text table th {
  background-color: var(--color-grey6);
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .text table tr {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--border-strong);
  }
  .text table tr:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
}
.text table td {
  font-size: 16px;
  position: relative;
}
@media (max-width: 1024px) {
  .text table td {
    font-size: 14px;
  }
}
@media (max-width: 1024px) {
  .text table td {
    border: none;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 5px 12px;
  }
  .text table td:first-child {
    padding-top: 12px;
  }
  .text table td:last-child {
    padding-bottom: 12px;
  }
}
.text {
  /* blockquote */
}
.text blockquote {
  font-size: 16px;
  padding: 50px 20px 30px 20px;
  margin-bottom: 25px;
}

@supports (-ms-ime-align: auto) {
  .text a {
    text-decoration: none;
  }
  .non-touch .text a:hover {
    text-decoration: underline;
  }
}
@media all and (-ms-high-contrast: none) {
  .text a {
    text-decoration: none;
  }
  .non-touch .text a:hover {
    text-decoration: underline;
  }
}
/* end - typography */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
.modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  transition: background ease var(--duration-base);
  z-index: 10;
}
.modal__cont {
  transform: translateX(100%);
  transition: transform ease-out var(--duration-base);
  transition-delay: 0.2s;
  background-color: var(--bg-app);
  position: relative;
  z-index: 12;
}
.modal.is-visible .modal__cont {
  transform: translateX(0);
}
.modal.is-visible .modal__bg {
  background-color: var(--overlay);
}
.modal--sided .modal__cont {
  max-width: 454px;
  width: 100%;
  max-height: 100vh;
  margin-left: auto;
  padding: 36px 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.modal--large .modal__cont {
  max-width: 665px;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
}

.ds-brands {
  padding: var(--space-40) 0 var(--space-90);
}
@media screen and (max-width: 768px) {
  .ds-brands {
    padding: var(--space-24) 0 var(--space-60);
  }
}
.ds-brands *, .ds-brands *::before, .ds-brands *::after {
  box-sizing: border-box;
}
.ds-brands__header {
  max-width: 640px;
  margin: 0 auto var(--space-30);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .ds-brands__header {
    margin-bottom: var(--space-24);
  }
}
.ds-brands__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--space-12);
}
.ds-brands__title {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0;
}
@media screen and (max-width: 640px) {
  .ds-brands__title {
    font-size: 28px;
  }
}
.ds-brands__subtitle {
  font-size: 14px;
  letter-spacing: 0.3px;
  color: var(--fg-3);
  margin: var(--space-12) 0 0;
}
.ds-brands__subtitle strong {
  color: var(--fg-1);
  font-weight: 600;
}
.ds-brands__search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 420px;
  margin: 0 auto var(--space-30);
}
@media screen and (max-width: 768px) {
  .ds-brands__search {
    margin-bottom: var(--space-24);
  }
}
.ds-brands__search-icon {
  position: absolute;
  left: 16px;
  display: inline-flex;
  pointer-events: none;
  color: var(--fg-3);
}
.ds-brands__search-input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 46px;
  border: 1px solid var(--color-grey6);
  border-radius: 0;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  outline: none;
  -webkit-appearance: none;
  transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.ds-brands__search-input::placeholder {
  color: var(--fg-4);
}
.ds-brands__search-input:focus {
  border-color: var(--fg-1);
  box-shadow: 0 0 0 3px rgba(25, 25, 25, 0.06);
}
.ds-brands__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.ds-brands__search-clear {
  position: absolute;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--duration-base) ease;
}
.non-touch .ds-brands__search-clear:hover {
  background: var(--color-grey-bg);
}
.ds-brands__index {
  position: sticky;
  top: 52px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-10) 0;
  margin-bottom: var(--space-40);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-grey3);
}
@media screen and (max-width: 1024px) {
  .ds-brands__index {
    top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .ds-brands__index {
    gap: 2px;
    margin-bottom: var(--space-30);
  }
}
.ds-brands__index-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg-1);
  cursor: pointer;
  transition: color var(--duration-base) ease, background var(--duration-base) ease;
}
@media screen and (max-width: 768px) {
  .ds-brands__index-item {
    min-width: 28px;
    height: 28px;
    font-size: 13px;
  }
}
.non-touch .ds-brands__index-item:not(:disabled):hover {
  color: var(--color-red);
  background: var(--color-grey-bg);
}
.ds-brands__index-item:disabled {
  color: var(--color-grey6);
  cursor: default;
}
.ds-brands__index-item.is-active {
  color: var(--color-white);
  background: var(--color-red);
}
.ds-brands__index-item:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.ds-brands__group {
  padding-bottom: var(--space-40);
  margin-bottom: var(--space-40);
  border-bottom: 1px solid var(--color-grey3);
  scroll-margin-top: 120px;
}
.ds-brands__group:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
@media screen and (max-width: 768px) {
  .ds-brands__group {
    padding-bottom: var(--space-24);
    margin-bottom: var(--space-24);
    scroll-margin-top: 100px;
  }
}
.ds-brands__group-head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}
@media screen and (max-width: 768px) {
  .ds-brands__group-head {
    margin-bottom: var(--space-16);
  }
}
.ds-brands__group-letter {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-1);
}
@media screen and (max-width: 640px) {
  .ds-brands__group-letter {
    font-size: 32px;
  }
}
.ds-brands__group-letter--word {
  font-family: var(--font-sans);
  font-size: 24px;
  letter-spacing: 0.4px;
}
.ds-brands__group-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-grey3);
}
.ds-brands__group-count {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-4);
}
.ds-brands__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-12) var(--space-30);
}
@media screen and (max-width: 640px) {
  .ds-brands__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-16);
  }
}
.ds-brands__brand {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: var(--fg-2);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--fg-1), var(--fg-1));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--duration-base) ease, background-size var(--duration-base) ease;
}
.non-touch .ds-brands__brand:hover {
  color: var(--fg-1);
  background-size: 100% 1px;
}
.ds-brands__brand:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}
.ds-brands__skeleton-group {
  margin-bottom: var(--space-40);
}
.ds-brands__skeleton-letter {
  display: block;
  width: 48px;
  height: 40px;
  margin-bottom: var(--space-24);
  border-radius: 0;
  background: var(--color-grey3);
}
.ds-brands__skeleton-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-12) var(--space-30);
}
@media screen and (max-width: 640px) {
  .ds-brands__skeleton-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ds-brands__skeleton-bar {
  height: 14px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--color-grey3) 25%, var(--bg-muted) 37%, var(--color-grey3) 63%);
  background-size: 400% 100%;
  animation: ds-brands-shimmer 1.4s ease infinite;
}

@keyframes ds-brands-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.admin-bar {
  position: fixed;
  left: 0;
  bottom: 0;
}

.admin-bar .btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* ─── Админ панел за бърз достъп на продуктовата страница ─────────────────
   Долу вляво, само за администратори (виж product.html / ProductModifier).
   Тъмна карта, radius 0, червеното — само като акцент (бранд). */
.ds-adminbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1200;
  width: 230px;
  max-width: 70vw;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-family: "Jost", sans-serif;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.ds-adminbar__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ds-adminbar.is-collapsed .ds-adminbar__head {
  border-bottom: 0;
}

.ds-adminbar__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--color-red); /* бранд червено — само акцент */
}

.ds-adminbar__label {
  font-weight: 600;
}

.ds-adminbar__sku {
  margin-left: auto;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-4);
}

.ds-adminbar__chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-left: 6px;
  fill: var(--fg-3);
  transition: transform var(--duration-fast) ease;
}

.ds-adminbar.is-collapsed .ds-adminbar__chevron {
  transform: rotate(180deg);
}

.ds-adminbar__sku + .ds-adminbar__chevron {
  margin-left: 4px;
}

.ds-adminbar__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--fg-inverse);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.ds-adminbar__btn + .ds-adminbar__btn {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ds-adminbar__btn:hover,
.ds-adminbar__btn:focus {
  background: var(--bg-dark);
  color: var(--fg-inverse);
  text-decoration: none;
}

.ds-adminbar__btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

@media screen and (max-width: 767px) {
  .display-desktop {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .display-mobile {
    display: none;
  }
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role=button]:focus-visible,
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* Стилове на текста */
/* Display */
.t-display-120 {
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.t-display-96 {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.t-display {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.t-display-72 {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.t-display-56 {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.t-display-48 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.t-display-40 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Заглавия */
.t-h1 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}

.t-title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.9px;
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.9px;
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0.9px;
}

.t-h5 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.4px;
}

/* Текст */
.t-prose {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0;
}

.t-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.35px;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.33px;
}

.t-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* Етикети и интерфейс */
.t-nav {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.t-button {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.75px;
}

.t-link-action {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.6px;
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.t-label {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.6px;
}

.t-micro {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 1.4px;
}

.t-price {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
}

.t-price-lg {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
}

/* Цифри */
.t-serif-step {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}

/* ─── Типография: ВЕРСАЛ за стиловете, които го изискват ─────────────────
   Токените не носят text-transform, затова е тук. */
.t-display,
.t-title, .t-h2, .t-h3, .t-h4, .t-h5,
.t-nav, .t-button, .t-link-action,
.t-eyebrow, .t-label, .t-micro {
  text-transform: uppercase;
}

/* Акцентна дума в заглавие: курсив + червено (една на заглавие). */
.t-accent {
  font-style: italic;
  color: var(--color-red);
}

/* Стара цена и други зачеркнати стойности. */
.t-strike {
  text-decoration: line-through;
  color: var(--fg-3);
}

@media (max-width: 768px) {
  .t-title {
    font-size: 24px;
  }
  .t-h2 {
    font-size: 18px;
    letter-spacing: 0.4px;
  }
  .t-prose {
    font-size: 16px;
  }
  .t-display-96, .t-display-120 {
    font-size: 48px;
  }
  .t-display, .t-display-72 {
    font-size: 40px;
  }
  .t-display-56 {
    font-size: 40px;
  }
  .t-display-48 {
    font-size: 40px;
  }
}
.ds-icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  color: inherit;
  vertical-align: middle;
  fill: none !important;
  stroke: currentColor;
}

.ds-icon--sm {
  width: 18px;
  height: 18px;
}

.ds-icon--xs {
  width: 14px;
  height: 14px;
}

.ds-icon--lg {
  width: 32px;
  height: 32px;
}

.ds-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-circle);
  vertical-align: middle;
  animation: ds-spin var(--duration-slow) linear infinite;
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 24px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: var(--border-base) solid var(--border-strong);
  border-radius: var(--radius-0);
  background: var(--bg-app);
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease, color var(--duration-base) ease;
}
.ds-btn:hover {
  text-decoration: none;
}
.ds-btn--primary {
  background: var(--color-red);
  color: var(--fg-inverse);
  border-color: var(--color-red);
}
.ds-btn--primary:hover {
  background: var(--color-red-active);
  border-color: var(--color-red-active);
  color: var(--fg-inverse);
}
.ds-btn--ghost {
  background: var(--bg-app);
  color: var(--fg-1);
  border-color: var(--border-strong);
}
.ds-btn--ghost:hover {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}
.ds-btn--full {
  width: 100%;
}

.ds-btn .icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.ds-btn .icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.ds-btn .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-btn--sm {
  min-height: 36px;
  padding: 0 16px;
  font-size: 12px;
  letter-spacing: 0.8px;
}

.ds-btn--lg {
  min-height: 48px;
  padding: 0 32px;
}

.ds-btn--primary:active,
.ds-btn--primary.is-hover {
  background: var(--color-red-active);
  border-color: var(--color-red-active);
  color: var(--fg-inverse);
}

.ds-btn--dark,
.ds-btn--secondary {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}

.ds-btn--dark:hover,
.ds-btn--dark:active,
.ds-btn--dark.is-hover,
.ds-btn--secondary:hover,
.ds-btn--secondary:active {
  background: var(--color-red-active);
  border-color: var(--color-red-active);
  color: var(--fg-inverse);
}

.ds-btn--ghost:active,
.ds-btn--ghost.is-hover {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}

.ds-btn--light {
  background: transparent;
  border-color: var(--color-white);
  color: var(--fg-inverse);
}

.ds-btn--light:hover,
.ds-btn--light:active,
.ds-btn--light.is-hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--fg-1);
}

.ds-btn:disabled,
.ds-btn.is-disabled,
.ds-btn[aria-disabled=true] {
  background: var(--bg-muted);
  border-color: var(--color-grey3);
  color: var(--fg-4);
  cursor: not-allowed;
}

.ds-btn--icon {
  width: 42px;
  padding: 0;
}

.ds-btn--icon.ds-btn--sm {
  width: 36px;
}

.ds-btn--icon.ds-btn--lg {
  width: 48px;
}

.ds-btn--light:focus-visible {
  outline-color: var(--color-white);
}

.ds-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg-1);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.ds-arrow .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-arrow:hover,
.ds-arrow.is-hover {
  background: var(--color-white);
  color: var(--color-red);
}

.ds-arrow:disabled,
.ds-arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
}

.ds-arrow--on-dark {
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--fg-inverse);
  border-color: rgba(255, 255, 255, 0.35);
}

.ds-arrow--on-dark:hover,
.ds-arrow--on-dark.is-hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--fg-inverse);
}

.ds-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-base) ease, opacity var(--duration-base) ease;
}

.ds-icon-btn:hover,
.ds-icon-btn.is-hover {
  opacity: 0.6;
}

.ds-icon-btn.is-active {
  color: var(--color-red);
  opacity: 1;
}

.ds-icon-btn--on-dark {
  color: var(--fg-inverse);
}

.ds-count {
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.t-link {
  position: relative;
  display: inline-block;
  color: var(--color-link);
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

.t-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) ease;
}

.t-link:hover::after,
.t-link.is-hover::after,
.t-link.is-active::after {
  transform: scaleX(1);
}

.t-link-action {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid currentColor;
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.t-link-action:hover,
.t-link-action.is-hover {
  opacity: 0.6;
}

.t-link-action--on-dark {
  color: var(--fg-inverse);
}

button.t-link-action {
  margin: 0;
  padding: 0 0 var(--space-2);
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid currentColor;
  border-radius: 0;
}

.t-link-underline {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.t-link-inline {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.t-link-inline:hover {
  color: var(--color-red);
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--color-white);
  color: var(--fg-1);
  border: var(--border-thin) solid var(--border-strong);
  border-radius: var(--radius-0);
}

/* -30% — solid red, white text, no visible border */
.ds-badge--discount {
  background: var(--color-discount);
  color: var(--color-white);
  border-color: var(--color-discount);
}

/* SALE — white, red text and border */
.ds-badge--sale {
  background: var(--color-white);
  color: var(--color-red);
  border-color: var(--color-red);
}

/* NEW IN and custom labels (Plus Size, Еко) — white, dark text and border */
.ds-badge--new {
  background: var(--color-white);
  color: var(--fg-1);
  border-color: var(--border-strong);
}

/* PREMIUM — gold border; the text uses color-premium-gold-text for contrast */
.ds-badge--premium {
  background: var(--color-white);
  color: var(--color-premium-gold-text);
  border-color: var(--color-premium-gold);
}

/* ИЗЧЕРПАН (sold out) — solid dark */
.ds-badge--soldout {
  background: var(--bg-dark);
  color: var(--color-white);
  border-color: var(--bg-dark);
}

/* 18+ (After Dark) — gold on dark */
.ds-badge--adult {
  background: transparent;
  color: var(--ad-highlight);
  border-color: var(--ad-highlight);
}

/* Label row on the photo: top left, 10px from the edge, 6px apart */
.ds-badges {
  position: absolute;
  top: var(--space-10);
  left: var(--space-10);
  right: var(--space-10);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  pointer-events: none;
}

.ds-badges > * {
  pointer-events: auto;
}

.t-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  font-family: var(--font-sans);
  line-height: 1;
  letter-spacing: 0;
}

.t-price__old {
  order: 1;
}

.t-price__current {
  order: 2;
}

.t-price > :not(.t-price__old):not(.t-price__current) {
  order: 2;
}

.t-price__current {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
}

.t-price__old {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-3);
  text-decoration: line-through;
}

.t-price--sale .t-price__current {
  color: var(--color-sale);
}

.t-price--lg {
  column-gap: 14px;
  row-gap: 6px;
}

.t-price--lg .t-price__current {
  font-size: 28px;
  font-weight: 500;
}

.t-price--lg .t-price__old {
  font-size: 16px;
}

.t-price--inverse .t-price__current {
  color: var(--fg-inverse);
}

.t-price--inverse .t-price__old {
  color: rgba(255, 255, 255, 0.6);
}

/* A discounted price on dark stays red (5.2:1 on bg-deep) */
.t-price--inverse.t-price--sale .t-price__current {
  color: var(--color-sale);
}

.ds-field {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding-top: 18px;
}

.ds-field__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: var(--border-base) solid var(--border-input);
  border-radius: var(--radius-0);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color var(--duration-base) ease;
}

.ds-field__input::placeholder {
  color: transparent;
}

.ds-field__input:focus,
.ds-field.is-focus .ds-field__input {
  border-bottom-color: var(--fg-1);
}

.ds-field__label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
  pointer-events: none;
  transition: top var(--duration-base) ease, font-size var(--duration-base) ease, color var(--duration-base) ease, letter-spacing var(--duration-base) ease;
}

.ds-field__input:placeholder-shown:not(:focus) ~ .ds-field__label {
  top: 27px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--fg-2);
}

.ds-field.is-focus .ds-field__input ~ .ds-field__label {
  top: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-field__hint,
.ds-field__error {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.4px;
  color: var(--fg-3);
}

.ds-field__error {
  color: var(--color-error);
}

.ds-field.is-error .ds-field__input {
  border-bottom-color: var(--color-error);
}

.ds-field.is-error .ds-field__label,
.ds-field.is-error .ds-field__input:placeholder-shown:not(:focus) ~ .ds-field__label {
  color: var(--color-error);
}

.ds-field.is-valid .ds-field__input {
  border-bottom-color: var(--color-success);
}

.ds-field.is-disabled .ds-field__input,
.ds-field__input:disabled {
  color: var(--fg-4);
  border-bottom-color: var(--color-grey3);
  cursor: not-allowed;
}

/* Action inside the field on the right: „Покажи“ for passwords, clear */
.ds-field--action .ds-field__input {
  padding-right: 72px;
}

.ds-field__action {
  position: absolute;
  right: 0;
  top: 24px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--duration-base) ease;
}

.ds-field__action:hover {
  color: var(--fg-1);
}

/* Multi-line field */
.ds-field__input--area {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .ds-field__input:placeholder-shown:not(:focus) ~ .ds-field__label {
    top: 28px;
    font-size: 16px;
  }
}
.ds-select {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 18px;
  font-family: var(--font-sans);
}

.ds-select__label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: var(--border-base) solid var(--border-input);
  border-radius: var(--radius-0);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  text-align: left;
  cursor: pointer;
}

.ds-select__trigger .ds-icon {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-base) ease;
}

.ds-select__value--placeholder {
  color: var(--fg-3);
}

.ds-select.is-open .ds-select__trigger {
  border-bottom-color: var(--fg-1);
}

.ds-select.is-open .ds-select__trigger .ds-icon {
  transform: rotate(180deg);
}

.ds-select__list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin: 0;
  padding: 8px 0 12px;
  list-style: none;
  max-height: 140px;
  overflow-y: auto;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--border-default);
  border-top: 0;
}

.ds-select.is-open .ds-select__list {
  display: block;
}

.ds-select__option {
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--duration-base) ease;
}

.ds-select__option:hover,
.ds-select__option.is-hover {
  background: var(--bg-muted);
}

.ds-select__option.is-selected {
  color: var(--fg-1);
  font-weight: 500;
}

.ds-select.is-error .ds-select__trigger {
  border-bottom-color: var(--color-error);
}

.ds-select.is-error .ds-select__label {
  color: var(--color-error);
}

.ds-check,
.ds-radio {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  cursor: pointer;
}

.ds-check__input,
.ds-radio__input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.ds-check__box,
.ds-radio__dot {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--bg-app);
  border: var(--border-base) solid var(--border-input);
  transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease;
}

.ds-radio__dot {
  border-radius: var(--radius-circle);
}

.ds-check:hover .ds-check__box,
.ds-radio:hover .ds-radio__dot {
  border-color: var(--fg-1);
}

.ds-check__input:checked + .ds-check__box {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
}

.ds-check__input:checked + .ds-check__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 10px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ds-radio__input:checked + .ds-radio__dot {
  border-color: var(--bg-dark);
}

.ds-radio__input:checked + .ds-radio__dot::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--bg-dark);
}

.ds-check__input:focus-visible + .ds-check__box,
.ds-radio__input:focus-visible + .ds-radio__dot {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.ds-check__input:disabled + .ds-check__box,
.ds-radio__input:disabled + .ds-radio__dot {
  background: var(--bg-muted);
  border-color: var(--color-grey3);
}

.ds-check.is-disabled,
.ds-radio.is-disabled {
  color: var(--fg-4);
  cursor: not-allowed;
}

.ds-check.is-error .ds-check__box {
  border-color: var(--color-error);
}

.ds-check.is-error {
  color: var(--color-error);
}

.ds-check__count {
  margin-left: 4px;
  color: var(--fg-3);
  font-size: 12px;
}

.ds-qty {
  display: inline-flex;
  align-items: stretch;
  height: 48px;
  border: var(--border-thin) solid var(--border-default);
  background: var(--bg-app);
  font-family: var(--font-sans);
  transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease;
}

.ds-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  border: 0;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-qty__btn .ds-icon {
  width: 16px;
  height: 16px;
}

.ds-qty__btn:hover:not([disabled]) {
  background: var(--bg-muted);
}

.ds-qty__btn[disabled],
.ds-qty__btn.is-disabled {
  color: var(--fg-4);
  background: transparent;
  cursor: not-allowed;
}

.ds-qty__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

.ds-qty--sm {
  height: 36px;
}

.ds-qty--sm .ds-qty__btn {
  width: 32px;
}

.ds-qty--sm .ds-qty__value {
  width: 32px;
  font-size: 13px;
}

.ds-qty.is-locked {
  border-color: var(--color-grey3);
  background: var(--bg-muted);
  cursor: not-allowed;
}

.ds-qty.is-locked .ds-qty__btn {
  background: transparent;
  color: var(--fg-4);
  cursor: not-allowed;
}

.ds-qty.is-locked .ds-qty__value {
  color: var(--fg-4);
}

.ds-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: var(--font-sans);
  color: var(--fg-2);
}

.ds-modal__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  transition: background-color var(--duration-base) ease;
}

.ds-modal.is-visible .ds-modal__bg {
  background: var(--overlay);
}

.ds-modal__cont {
  position: relative;
  top: 50%;
  z-index: 2;
  width: 90%;
  max-width: 460px;
  max-height: calc(100vh - 60px);
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  background: var(--bg-app);
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-modal);
  transform: translateY(-250%);
  transition: transform var(--duration-base) ease;
}

.ds-modal.is-visible .ds-modal__cont {
  transform: translateY(-50%);
}

.ds-modal--wide .ds-modal__cont {
  max-width: 556px;
}

.ds-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.ds-modal__close .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-modal__close:hover,
.ds-modal__close.is-hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.ds-modal__body {
  padding: 36px 32px 32px;
  text-align: center;
}

.ds-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-1);
}

.ds-modal__icon--success {
  background: var(--bg-success);
  border-color: var(--border-success);
  color: var(--color-success);
}

.ds-modal__icon--error {
  background: var(--bg-error);
  border-color: var(--border-error);
  color: var(--color-error);
}

.ds-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-modal__eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.ds-modal__title {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-modal__text {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.ds-modal__text strong {
  font-weight: 500;
  color: var(--fg-1);
}

.ds-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ds-modal__title + .ds-modal__actions {
  margin-top: 22px;
}

.ds-modal__actions .ds-btn {
  min-width: 160px;
}

/* A modal with a form (quick order, profile, address) */
.ds-modal__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.ds-modal__form .ds-btn {
  margin-top: 6px;
}

.ds-modal__legal {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  text-align: center;
  color: var(--fg-3);
}

/* A notice (error / success) right above the form or the actions */
.ds-modal__body > .ds-notice {
  margin: 0 0 18px;
  text-align: left;
}

@media (max-width: 480px) {
  .ds-modal__body {
    padding: 28px 20px 24px;
  }
  .ds-modal__title {
    font-size: 18px;
  }
  .ds-modal__actions {
    flex-direction: column;
  }
  .ds-modal__actions .ds-btn {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 640px) {
  /* Bottom sheet for the form modals and the confirmations */
  .ds-modal--sheet .ds-modal__cont {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    max-height: 90vh;
    margin: 0;
    box-shadow: var(--shadow-sheet);
    transform: translateY(100%);
    transition: transform var(--duration-fast) ease;
  }
  .ds-modal--sheet.is-visible .ds-modal__cont {
    transform: translateY(0);
  }
  .ds-modal--sheet .ds-modal__cont::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    background: var(--color-grey3);
  }
  .ds-modal--sheet .ds-modal__close {
    top: 18px;
    right: 18px;
  }
  .ds-modal--sheet .ds-modal__body {
    padding-top: 20px;
  }
  .ds-modal--sheet .ds-modal__actions .ds-btn {
    min-height: 48px;
  }
}
.ds-toast {
  position: fixed;
  top: var(--space-20);
  right: var(--space-20);
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  width: auto;
  min-width: 280px;
  max-width: 360px;
  padding: 14px var(--space-16);
  background: var(--bg-dark);
  color: var(--fg-inverse);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-sans);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + var(--space-20)));
  transition: transform var(--duration-base) ease, opacity var(--duration-base) ease;
}

.ds-toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.ds-toast__icon {
  flex: none;
  color: var(--color-success);
}

.ds-toast__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-toast__title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-inverse);
}

.ds-toast__product,
.ds-toast__text {
  max-width: 100%;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.7);
}

/* The product name stays on one line; an error text may take two */
.ds-toast__product {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: -4px -4px -4px 0;
  padding: 4px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color var(--duration-base) ease;
}

.ds-toast__close .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-toast__close:hover {
  color: var(--fg-inverse);
}

.ds-toast--error {
  background: var(--bg-error);
  border: var(--border-thin) solid var(--border-error);
  color: var(--fg-1);
}

.ds-toast--error .ds-toast__icon,
.ds-toast--error .ds-toast__title {
  color: var(--color-error);
}

.ds-toast--error .ds-toast__product,
.ds-toast--error .ds-toast__text {
  color: var(--fg-2);
}

.ds-toast--error .ds-toast__close {
  color: var(--fg-3);
}

.ds-toast--error .ds-toast__close:hover {
  color: var(--fg-1);
}

body:has(.ds-basket-modal) .ds-toast:not(.ds-toast--error) {
  visibility: hidden;
}

@media (max-width: 640px) {
  .ds-toast {
    top: max(8px, env(safe-area-inset-top));
    right: var(--space-8);
    left: var(--space-8);
    min-width: 0;
    max-width: none;
  }
}
.ds-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-notice);
  border: var(--border-thin) solid var(--border-notice);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--fg-2);
  text-align: left;
}

.ds-notice__icon {
  flex: none;
  color: var(--fg-1);
}

.ds-notice__body {
  flex: 1 1 0;
  min-width: 0;
}

.ds-notice__title {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-notice__text {
  margin: 0;
}

.ds-notice__body strong {
  font-weight: 500;
  color: var(--fg-1);
}

.ds-notice__action {
  flex: none;
}

.ds-notice--success {
  background: var(--bg-success);
  border-color: var(--border-success);
}

.ds-notice--success .ds-notice__icon {
  color: var(--color-success);
}

.ds-notice--error {
  background: var(--bg-error);
  border-color: var(--border-error);
}

.ds-notice--error .ds-notice__icon,
.ds-notice--error .ds-notice__title {
  color: var(--color-error);
}

@media (max-width: 640px) {
  .ds-notice {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
  }
  .ds-notice__action {
    flex-basis: 100%;
  }
}
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
  font-family: var(--font-sans);
  text-align: center;
  color: var(--fg-2);
}

.ds-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  margin: 0 0 24px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-1);
}

.ds-empty__eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-empty__title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-empty__text {
  max-width: 380px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.ds-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-top: 28px;
}

.ds-empty__actions .ds-btn {
  min-width: 200px;
}

/* 404: the big „404“ instead of the icon, t-h1 title, popular sections */
.ds-empty--404 {
  padding: 64px 0 80px;
}

.ds-empty__code {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.ds-empty--404 .ds-empty__title {
  margin-bottom: 14px;
  font-size: 32px;
  letter-spacing: 0;
  text-transform: none;
}

.ds-empty--404 .ds-empty__text {
  max-width: 460px;
}

.ds-empty--404 .ds-empty__actions {
  margin-top: 32px;
}

.ds-empty__links {
  width: 100%;
  margin-top: 48px;
  padding-top: 24px;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-empty__links-label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-empty__links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

.ds-empty__links-row .t-link {
  font-size: 14px;
  color: var(--fg-1);
}

/* Boxed — the empty sections of the profile (orders, wallet, addresses) */
.ds-empty--boxed {
  padding: 40px var(--space-24);
  background: var(--bg-muted);
  border: var(--border-thin) solid var(--color-grey3);
}

.ds-empty--boxed .ds-empty__icon {
  margin-bottom: 16px;
}

.ds-empty--boxed .ds-empty__title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.4px;
}

.ds-empty--boxed .ds-empty__text {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.3px;
}

.ds-empty--boxed .ds-empty__actions {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .ds-empty__code {
    font-size: 96px;
  }
  .ds-empty--boxed {
    padding: var(--space-30) var(--space-20);
  }
}
@media (max-width: 640px) {
  .ds-empty {
    padding: var(--space-40) var(--gutter-mobile) var(--space-60);
  }
  .ds-empty__title {
    font-size: 20px;
  }
  .ds-empty__text {
    max-width: 280px;
    font-size: 13px;
  }
  .ds-empty__actions {
    flex-direction: column;
    width: 100%;
  }
  .ds-empty__actions .ds-btn {
    width: 100%;
    min-width: 0;
  }
  .ds-empty--404 .ds-empty__title {
    font-size: 24px;
  }
  .ds-empty--boxed {
    padding: var(--space-30) var(--space-20);
  }
  .ds-empty--boxed .ds-empty__title {
    font-size: 16px;
  }
  .ds-empty--boxed .ds-empty__text {
    font-size: 12px;
  }
}
.ds-plp-pagination {
  margin-top: var(--space-60);
}

.paginator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}

.paginator__page,
.paginator__separator,
.paginator_arr {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-0);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.paginator__page:hover,
.paginator__page.is-hover {
  color: var(--fg-1);
}

.paginator__page.is-active {
  color: var(--fg-1);
  border-color: var(--border-strong);
  cursor: default;
}

.paginator__separator {
  cursor: default;
}

.paginator_arr {
  color: var(--fg-1);
  cursor: pointer;
}

.paginator_arr .ds-icon {
  width: 18px;
  height: 18px;
}

.paginator_arr.is-disabled,
.paginator_arr[aria-disabled=true] {
  color: var(--fg-4);
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .ds-plp-pagination {
    margin-top: var(--space-40);
  }
}
@media (max-width: 480px) {
  .paginator {
    gap: var(--space-4);
  }
  .paginator__page,
  .paginator__separator,
  .paginator_arr {
    width: 32px;
    height: 32px;
  }
}
.ds-accordion {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}

.ds-accordion__item {
  position: relative;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.ds-accordion__item:first-child {
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-accordion__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ds-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 18px 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--fg-1);
  cursor: pointer;
}

.ds-accordion__input:focus-visible + .ds-accordion__head {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.ds-accordion__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-accordion__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fg-1);
}

/* Вертикалната черта на „+“ се завърта и ляга върху хоризонталната: „−“ */
.ds-accordion__icon-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--duration-base) ease;
}

.ds-accordion__item.is-open .ds-accordion__icon-v,
.ds-accordion__head[aria-expanded=true] .ds-accordion__icon-v,
.ds-accordion__input:checked + .ds-accordion__head .ds-accordion__icon-v {
  transform: rotate(90deg);
}

.ds-accordion__panel {
  display: none;
  padding: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.15px;
  color: var(--fg-2);
}

.ds-accordion__item.is-open .ds-accordion__panel,
.ds-accordion__input:checked ~ .ds-accordion__panel {
  display: block;
}

.ds-accordion__panel p {
  margin: 0 0 10px;
}

.ds-accordion__panel p:last-child {
  margin-bottom: 0;
}

.ds-accordion__panel strong {
  font-weight: 600;
  color: var(--fg-1);
}

.ds-accordion__panel a:not([class]) {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--fg-1);
  padding-bottom: 1px;
  transition: opacity var(--duration-base) ease;
}

.ds-accordion__panel a:not([class]):hover {
  opacity: 0.6;
}

/* ЧЗВ: въпросът е изречение, не етикет */
.ds-accordion--faq .ds-accordion__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-transform: none;
}

.ds-accordion--faq .ds-accordion__panel {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

/* ─── Съдържание на детайлите в PDP (акордеон и табове) ──────────────────── */
.ds-pdp-details__desc {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.15px;
  color: var(--fg-2);
}

.ds-pdp-details__desc:empty {
  display: none;
  margin: 0;
}

.ds-pdp-details__desc p {
  margin: 0 0 10px;
}

.ds-pdp-details__desc p:last-child {
  margin-bottom: 0;
}

.ds-pdp-details__desc ul,
.ds-pdp-details__desc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-pdp-details__desc li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 16px;
  line-height: 1.55;
}

.ds-pdp-details__desc li:last-child {
  margin-bottom: 0;
}

/* Квадратче 5×5 вместо точка */
.ds-pdp-details__desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--fg-1);
}

.ds-pdp-details__desc strong {
  font-weight: 600;
  color: var(--fg-1);
}

/* Характеристики: две колони (етикет | стойност) */
.ds-pdp-specs {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 12px 24px;
  margin: 0 0 18px;
  padding: 18px 0 0;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-pdp-specs:empty {
  display: none;
  border-top: 0;
}

.ds-pdp-specs__row {
  display: contents;
}

.ds-pdp-specs__key {
  align-self: baseline;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-pdp-specs__val {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.15px;
  color: var(--fg-1);
}

.ds-pdp-specs__val a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--fg-1);
  padding-bottom: 1px;
  transition: opacity var(--duration-base) ease;
}

.ds-pdp-specs__val a:hover {
  opacity: 0.6;
}

.ds-pdp-specs__val--popover {
  border-bottom: var(--border-thin) dotted var(--fg-3);
  padding-bottom: 1px;
  cursor: help;
}

.ds-pdp-specs__note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--bg-muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.15px;
  color: var(--fg-3);
}

/* Доставка / Връщане: етикет над стойността */
.delivery_info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
}

.delivery_info strong {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.delivery_info > span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.15px;
  color: var(--fg-2);
}

@media (max-width: 480px) {
  .ds-pdp-specs {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ds-pdp-specs__row {
    display: block;
    margin-bottom: 12px;
  }
  .ds-pdp-specs__row:last-child {
    margin-bottom: 0;
  }
  .ds-pdp-specs__key {
    margin-bottom: 2px;
  }
}
.ds-pdp__tabs-m {
  margin-top: var(--space-24);
  font-family: var(--font-sans);
}

.ds-pdp__tabs-m__nav {
  display: flex;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.ds-pdp__tabs-m__btn {
  flex: 1;
  margin: 0 0 -1px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-base) solid transparent;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.ds-pdp__tabs-m__btn.is-active,
.ds-pdp__tabs-m__btn[aria-selected=true] {
  color: var(--fg-1);
  border-bottom-color: var(--border-strong);
}

.ds-pdp__tabs-m__panel {
  padding: var(--space-16) 0 var(--space-8);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.ds-pdp__tabs-m__panel p {
  margin: 0 0 10px;
}

.ds-pdp__tabs-m__panel p:last-child {
  margin-bottom: 0;
}

.ds-pdp__tabs-m__panel strong {
  font-weight: 600;
  color: var(--fg-1);
}

/* Същото съдържание като в акордеона, подредено в колона */
.ds-pdp__tabs-m__panel .ds-pdp-details__desc {
  margin: 0 0 var(--space-16);
}

.ds-pdp__tabs-m__panel .ds-pdp-specs {
  grid-template-columns: 1fr;
  gap: 4px;
  margin: 0;
  padding: var(--space-12) 0 0;
}

.ds-pdp__tabs-m__panel .ds-pdp-specs__row {
  display: block;
  margin-bottom: 12px;
}

.ds-pdp__tabs-m__panel .ds-pdp-specs__key {
  display: block;
  margin: 0 0 2px;
  font-size: 10px;
  line-height: 1.4;
}

.ds-pdp__tabs-m__panel .ds-pdp-specs__val {
  display: block;
}

.ds-pdp__tabs-m__panel .ds-pdp-specs__note {
  padding: 10px 12px;
  font-size: 11px;
}

.ds-pdp__tabs-m__panel .delivery_info {
  margin: 0 0 12px;
}

.ds-pdp__tabs-m__panel .delivery_info strong {
  font-size: 10px;
  color: var(--fg-1);
}

@media (max-width: 768px) {
  /* Панелите не менят височината при смяна на таба */
  .ds-pdp__tabs-m__panel {
    min-height: 280px;
  }
}
@media (min-width: 769px) {
  .ds-pdp__tabs-m {
    display: none;
  }
}
@media (min-width: 1025px) {
  :root {
    scroll-padding-top: 52px;
  }
}
body.has-mobile-menu {
  overflow: hidden;
}

.ds-header__nav-item:has(:focus-visible) .ds-mega {
  display: block;
}

/* Основният ред е единственият sticky елемент: промо лентата и категориите
   се скролват. Затова обвивката на header-а е без кутия. */
.ds-header:not(.ds-header--checkout) {
  display: contents;
}

.ds-header {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
}

/* ─── Промо лента ────────────────────────────────────────────────────────── */
.ds-header__promo {
  padding: 8px 0;
  background: var(--bg-muted);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.ds-header__promo-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ─── Основен ред: търсене | лого | икони ────────────────────────────────── */
.ds-header__main {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-app);
  border-bottom: var(--border-strong-w) solid var(--border-strong);
}

.ds-header__main-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
}

/* Търсене (само десктоп) */
.ds-header__search {
  display: flex;
  align-items: center;
  max-width: 320px;
}

.ds-header__search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 240px;
  margin: 0;
  padding: 8px 14px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--border-default);
  transition: border-color var(--duration-base) ease;
}

.ds-header__search-form:focus-within {
  border-color: var(--border-strong);
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.ds-header__search-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--fg-1);
}

.ds-header__search-icon .ds-icon {
  width: 16px;
  height: 16px;
}

.ds-header__search-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.ds-header__search-input::placeholder {
  color: var(--fg-3);
}

/* Подсказки при търсене - падащ панел под полето */
.ds-header__suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  border-top: var(--border-strong-w) solid var(--border-strong);
  box-shadow: var(--shadow-card);
}

.ds-header__suggest-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.ds-header__suggest-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.ds-header__suggest-link:hover {
  color: var(--color-red);
}

.ds-header__suggest-count {
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--fg-3);
}

.ds-header__suggest-products {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 0;
}

.ds-header__suggest-product {
  min-width: 140px;
}

.ds-header__suggest-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 12px;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-header__suggest-filters a {
  font-size: 12px;
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.ds-header__suggest-filters a:hover {
  color: var(--color-red);
}

.ds-header__suggest-filters small {
  margin-left: 4px;
  font-size: 11px;
  color: var(--fg-3);
}

/* Лого в центъра */
.ds-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ds-header__logo-img {
  display: block;
  width: auto;
  height: 32px;
}

/* Икони вдясно. Всяка е ds-icon-btn (40×40); 4px между кутиите дават същите
   44px от център до център като днешните 22px икони с 22px разстояние. */
.ds-header__icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.ds-header__icon {
  color: var(--fg-1);
}

/* Хамбургер - само ≤1024px, с надпис „Меню“ под иконата */
.ds-header__icon--menu {
  display: none;
}

.ds-header__menu-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Профил: иконата отваря падащо меню (hover или .is-open) */
.ds-header__icon--profile > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  transition: opacity var(--duration-base) ease;
}

.ds-header__icon--profile:hover,
.ds-header__icon--profile.is-open {
  opacity: 1;
  z-index: 1100;
}

.ds-header__icon--profile > a:hover {
  opacity: 0.6;
}

.ds-header__icon--profile .ds-header__submenu {
  display: none;
}

.ds-header__icon--profile:hover .ds-header__submenu,
.ds-header__icon--profile.is-open .ds-header__submenu {
  display: block;
}

/* Горната 3px линия на менюто ляга точно върху линията под header-а
   (18px = долният отстъп на реда). ::before е „мост“, за да не се губи
   hover, докато мишката слиза от иконата. */
.ds-header__submenu {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  z-index: 1100;
  min-width: 220px;
  padding: 8px 0;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  border-top: var(--border-strong-w) solid var(--border-strong);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.ds-header__submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 21px;
}

.ds-header__submenu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-header__submenu-list > li {
  display: block;
}

.ds-header__submenu-link {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-header__submenu-link:hover,
.ds-header__submenu-link.is-hover {
  background: var(--bg-muted);
  color: var(--color-red);
}

.ds-header__submenu-link--muted {
  margin-top: 4px;
  padding-top: 12px;
  border-top: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-3);
}

.ds-header__submenu-amount {
  font-weight: 500;
  color: var(--fg-1);
}

/* ─── Ред с категории ────────────────────────────────────────────────────── */
.ds-header__nav-row {
  position: relative;
}

.ds-header__nav-wrap {
  display: flex;
  justify-content: center;
}

.ds-header__nav {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
}

/* padding-bottom е на li, за да „мостът“ до мега менюто остане в :hover */
.ds-header__nav-item {
  position: static;
  padding-bottom: 14px;
}

.ds-header__nav-link {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  transition: border-color var(--duration-base) ease;
}

.ds-header__nav-link:hover,
.ds-header__nav-link.is-hover,
.ds-header__nav-item.is-open > .ds-header__nav-link {
  border-bottom-color: var(--border-strong);
}

/* Намаления - единствената червена категория */
.ds-header__nav-item--sale .ds-header__nav-link {
  color: var(--color-sale);
  font-weight: 600;
}

/* Скелет докато менюто се зарежда */
.ds-header__nav-link--ghost {
  width: 100%;
  height: 19px;
  background: transparent;
}

.ds-header__nav-item.is-open .ds-mega {
  display: block;
}

/* ─── Мега меню ──────────────────────────────────────────────────────────── */
.ds-mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-app);
  border-top: var(--border-strong-w) solid var(--border-strong);
  box-shadow: var(--shadow-card);
  text-align: left;
  animation: dsMegaIn var(--duration-fast) ease;
}

.ds-mega__inner {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: 30px 0 36px;
}

/* Колони + банер 320px вдясно */
.ds-mega__inner--with-banner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: stretch;
}

.ds-mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-content: start;
  gap: 40px;
}

.ds-mega__col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-mega__col-title {
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-mega__col-title-link {
  color: inherit;
  text-decoration: none;
}

.ds-mega__col-title-link--brand {
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.ds-mega__link {
  display: inline-block;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.ds-mega__link:hover,
.ds-mega__link.is-hover {
  color: var(--color-red);
}

.ds-mega__link--bold {
  font-weight: 700;
}

/* „Виж всички →“ - линкът е t-link-action */
.ds-mega__view-all {
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-mega__banner {
  align-self: stretch;
  width: 320px;
  max-width: 100%;
}

.ds-mega__banner a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Банер 320×480 (2:3). cover пази реда, ако качената снимка е в друг формат. */
.ds-mega__banner img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  margin-bottom: 10px;
  background: var(--bg-placeholder);
}

.ds-mega__banner-title {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-1);
}

.ds-mega__banner-subtitle {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

@keyframes dsMegaIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ─── Checkout header: само логото в центъра ─────────────────────────────── */
.ds-header--checkout {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.ds-header--checkout .ds-header__main-wrap--checkout {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 22px 0;
}

.ds-header--checkout__back,
.ds-header--checkout__spacer,
.ds-header--checkout__title-row {
  display: none;
}

/* ─── Таблет и телефон (≤1024px): хамбургер | лого | кошница ─────────────── */
@media (max-width: 1024px) {
  .ds-header__main {
    border-bottom: var(--border-thin) solid var(--color-grey3);
  }
  .ds-header__main-wrap {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 10px 0;
  }
  .ds-header__search {
    display: none;
  }
  .ds-header__icon--menu {
    display: inline-flex;
    grid-column: 1;
    justify-self: start;
    flex-direction: column;
    gap: 3px;
  }
  .ds-header__icon--favourite,
  .ds-header__icon--profile {
    display: none;
  }
  .ds-header__nav-wrap {
    display: none;
  }
  /* Checkout не е закачен на таблет и телефон */
  .ds-header--checkout,
  .ds-header--checkout .ds-header__main {
    position: static;
  }
}
@media (max-width: 768px) {
  .ds-header__promo {
    display: none;
  }
  .ds-header__main {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .ds-header__main-wrap {
    width: 100%;
    max-width: none;
    padding: 10px 12px;
  }
  .ds-header__logo-img {
    height: 24px;
  }
  .ds-header--checkout .ds-header__main-wrap--checkout {
    padding: 14px 0;
  }
}
/* Checkout на телефон: „‹ Назад“ вляво, лого в центъра, заглавие отдолу */
@media (max-width: 640px) {
  .ds-header--checkout .ds-header__main-wrap--checkout {
    position: relative;
    align-items: center;
    gap: 0;
    min-height: 44px;
    padding: 12px;
  }
  .ds-header--checkout__back {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: transparent;
    border: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--fg-1);
    text-decoration: none;
    cursor: pointer;
  }
  .ds-header--checkout__back .ds-icon {
    width: 20px;
    height: 20px;
  }
  .ds-header--checkout__title-row {
    display: block;
    padding: 4px 16px 14px;
    background: var(--bg-app);
    border-top: var(--border-thin) solid var(--divider-light);
  }
  .ds-header--checkout__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--fg-1);
  }
}
/* ─── Закачен компактен ред (след скрол) ─────────────────────────────────────
   HeaderCtrl слага is-scrolled на <html>; в прегледите - на .ds-header. */
@media (min-width: 1025px) {
  .ds-header__main {
    transition: box-shadow var(--duration-fast) ease;
  }
  .ds-header__main-wrap {
    transition: padding var(--duration-fast) ease;
  }
  .ds-header__logo-img {
    transition: height var(--duration-fast) ease;
  }
  .ds-header__search-form {
    transition: padding var(--duration-fast) ease, border-color var(--duration-base) ease;
  }
  .ds-header__icons {
    transition: gap var(--duration-fast) ease;
  }
  .ds-header__icon.ds-icon-btn {
    transition: color var(--duration-base) ease, opacity var(--duration-base) ease, width var(--duration-fast) ease, height var(--duration-fast) ease;
  }
  .ds-header__icon .ds-icon {
    transition: width var(--duration-fast) ease, height var(--duration-fast) ease;
  }
  html.is-scrolled .ds-header__main,
  .ds-header.is-scrolled .ds-header__main {
    box-shadow: var(--shadow-fixed-header);
  }
  html.is-scrolled .ds-header:not(.ds-header--checkout) .ds-header__main-wrap,
  .ds-header.is-scrolled:not(.ds-header--checkout) .ds-header__main-wrap {
    padding: 9px 0;
  }
  html.is-scrolled .ds-header .ds-header__logo-img,
  .ds-header.is-scrolled .ds-header__logo-img {
    height: 24px;
  }
  html.is-scrolled .ds-header .ds-header__search-form,
  .ds-header.is-scrolled .ds-header__search-form {
    padding: 5px 14px;
  }
  html.is-scrolled .ds-header .ds-header__icons,
  .ds-header.is-scrolled .ds-header__icons {
    gap: 6px;
  }
  html.is-scrolled .ds-header .ds-header__icon.ds-icon-btn,
  .ds-header.is-scrolled .ds-header__icon.ds-icon-btn {
    width: 32px;
    height: 32px;
  }
  html.is-scrolled .ds-header .ds-header__icon .ds-icon,
  .ds-header.is-scrolled .ds-header__icon .ds-icon {
    width: 20px;
    height: 20px;
  }
  html.is-scrolled .ds-header .ds-header__submenu,
  .ds-header.is-scrolled .ds-header__submenu {
    top: calc(100% + 9px);
  }
  html.is-scrolled .ds-header .ds-header__submenu::before,
  .ds-header.is-scrolled .ds-header__submenu::before {
    height: 12px;
  }
  /* Checkout: 22px -> 12px */
  .ds-header--checkout .ds-header__main-wrap--checkout {
    transition: padding var(--duration-fast) ease;
  }
  html.is-scrolled .ds-header--checkout .ds-header__main-wrap--checkout,
  .ds-header--checkout.is-scrolled .ds-header__main-wrap--checkout {
    padding: 12px 0;
  }
}
@media (max-width: 1024px) {
  .ds-header__main {
    transition: box-shadow var(--duration-fast) ease;
  }
  .ds-header__main-wrap {
    transition: padding var(--duration-fast) ease;
  }
  html.is-scrolled .ds-header:not(.ds-header--checkout) .ds-header__main,
  .ds-header.is-scrolled:not(.ds-header--checkout) .ds-header__main {
    box-shadow: var(--shadow-fixed-header);
  }
  html.is-scrolled .ds-header:not(.ds-header--checkout) .ds-header__main-wrap,
  .ds-header.is-scrolled:not(.ds-header--checkout) .ds-header__main-wrap {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  /* Горната лента на чекмеджето следва височината на свития ред */
  html.is-scrolled .ds-mobilemenu__topbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + 5px);
    padding-bottom: 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-header__main,
  .ds-header__main-wrap,
  .ds-header__logo-img,
  .ds-header__search-form,
  .ds-header__icons,
  .ds-header__icon.ds-icon-btn,
  .ds-header__icon .ds-icon,
  .ds-header--checkout .ds-header__main-wrap--checkout {
    transition: none;
  }
  .ds-mega {
    animation: none;
  }
}
/* =============================================================================
   MobileMenu - ds-mobilemenu
   Чекмедже на цял екран (≤1024px), отваря се от хамбургера. Горна лента
   „× | лого | празно“ (61px, колкото мобилния header), тъмен блок за профила,
   поле за търсене, редове с категории (стрелка вдясно), „Моят профил“ с
   икони, контакти. Навигацията е „stack-push“: влизане в категория показва
   „‹ Назад“, заглавие и трасе. Сивите фонове са bg-muted (не bg-strip).
   ============================================================================= */
.ds-mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  font-family: var(--font-sans);
  line-height: 1.4;
  color: var(--fg-1);
  animation: dsMobileMenuIn var(--duration-fast) ease;
}

/* ─── Горна лента ────────────────────────────────────────────────────────── */
.ds-mobilemenu__topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: var(--bg-app);
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

/* Бутоните са ds-icon-btn (40×40) */
.ds-mobilemenu__iconbtn {
  flex: 0 0 auto;
  color: var(--fg-1);
}

.ds-mobilemenu__iconbtn--back {
  width: auto;
  max-width: 140px;
  gap: 4px;
  padding: 0 10px 0 8px;
}

.ds-mobilemenu__iconbtn--ghost {
  pointer-events: none;
}

.ds-mobilemenu__iconbtn-label {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-mobilemenu__brand {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--fg-1);
}

.ds-mobilemenu__brand--title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-mobilemenu__brand-img {
  display: block;
  width: auto;
  height: 24px;
}

/* ─── Трасе (от второ ниво навътре) ──────────────────────────────────────── */
.ds-mobilemenu__crumbs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 22px;
  overflow-x: auto;
  white-space: nowrap;
  background: var(--bg-muted);
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
  scrollbar-width: none;
}

.ds-mobilemenu__crumbs::-webkit-scrollbar {
  display: none;
}

.ds-mobilemenu__crumb {
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--fg-3);
  cursor: pointer;
}

.ds-mobilemenu__crumb--current {
  color: var(--fg-1);
  cursor: default;
}

.ds-mobilemenu__crumb-sep {
  color: var(--fg-4);
}

.ds-mobilemenu__crumb-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─── Тяло (скролва се) ──────────────────────────────────────────────────── */
.ds-mobilemenu__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-mobilemenu__body--in {
  animation: dsDrillIn var(--duration-fast) ease;
}

.ds-mobilemenu__body--out {
  animation: dsDrillOut var(--duration-fast) ease;
}

.ds-mobilemenu__frame {
  display: block;
}

/* ─── Профил: тъмен блок най-горе ────────────────────────────────────────── */
.ds-mobilemenu__auth {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: var(--bg-deep);
  color: var(--fg-inverse);
  text-decoration: none;
}

.ds-mobilemenu__auth-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ds-mobilemenu__auth-greet {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg-inverse);
}

.ds-mobilemenu__auth-link {
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
}

.ds-mobilemenu__auth-link a {
  color: var(--fg-inverse);
  text-decoration: none;
  border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.5);
}

.ds-mobilemenu__auth-sep {
  margin: 0 4px;
}

.ds-mobilemenu__auth-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--border-thin) solid rgba(255, 255, 255, 0.3);
  color: var(--fg-inverse);
}

/* ─── Търсене ────────────────────────────────────────────────────────────── */
.ds-mobilemenu__search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 22px 6px;
  padding: 12px 14px;
  background: var(--bg-muted);
  border: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-3);
  cursor: text;
}

/* Лупата е submit; зоната за докосване се разширява върху отстъпа на полето */
.ds-mobilemenu__search-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -12px 0 -12px -14px;
  padding: 12px 0 12px 14px;
  background: none;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ds-mobilemenu__search-icon .ds-icon {
  width: 20px;
  height: 20px;
}

/* 16px, за да не увеличава iOS страницата при фокус */
.ds-mobilemenu__search-input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  -webkit-appearance: none;
  appearance: none;
}

.ds-mobilemenu__search-input::placeholder {
  color: var(--fg-4);
}

.ds-mobilemenu__search-input::-webkit-search-cancel-button,
.ds-mobilemenu__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* „Търси“ се появява щом има дума. Тъмен, червен при натискане. */
.ds-mobilemenu__search-go {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin: -7px -8px -7px 0;
  padding: 0 14px;
  background: var(--bg-dark);
  border: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-inverse);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--duration-base) ease;
}

.ds-mobilemenu__search-go:hover,
.ds-mobilemenu__search-go:active,
.ds-mobilemenu__search-go.is-hover {
  background: var(--color-red-active);
}

.ds-mobilemenu__search-go::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -4px;
}

/* ─── Раздели и надписи ──────────────────────────────────────────────────── */
.ds-mobilemenu__section {
  margin-top: 22px;
  background: var(--bg-muted);
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-mobilemenu__eyebrow {
  padding: 22px 22px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-mobilemenu__eyebrow--inline {
  padding: 18px 22px 8px;
}

.ds-mobilemenu__eyebrow--footer {
  padding: 0 0 12px;
}

/* ─── Редове ─────────────────────────────────────────────────────────────── */
.ds-mobilemenu__rows {
  padding-top: 6px;
}

.ds-mobilemenu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.ds-mobilemenu__section .ds-mobilemenu__row {
  border-bottom-color: var(--color-grey3);
}

.ds-mobilemenu__row:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
}

.ds-mobilemenu__row-label {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-1);
}

.ds-mobilemenu__row-label .ds-badge {
  flex: none;
}

.ds-mobilemenu__row--sale .ds-mobilemenu__row-label {
  color: var(--color-sale);
}

.ds-mobilemenu__row--profile .ds-mobilemenu__row-label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
}

.ds-mobilemenu__row--muted {
  margin-top: 4px;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-mobilemenu__row--muted .ds-mobilemenu__row-label,
.ds-mobilemenu__row--muted .ds-mobilemenu__row-icon {
  color: var(--fg-3);
}

/* Нива: 0 - 16/500 ВЕРСАЛ, 1 - 14/400 ВЕРСАЛ, 2+ - 14/400 нормално */
.ds-mobilemenu__body[data-depth="1"] .ds-mobilemenu__row-label {
  font-size: 14px;
  font-weight: 400;
}

.ds-mobilemenu__body[data-depth="2"] .ds-mobilemenu__row-label,
.ds-mobilemenu__body[data-depth="3"] .ds-mobilemenu__row-label,
.ds-mobilemenu__body[data-depth="4"] .ds-mobilemenu__row-label {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
}

.ds-mobilemenu__row-icon {
  display: inline-flex;
  flex: none;
  color: var(--fg-1);
}

.ds-mobilemenu__row-icon .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-mobilemenu__row-end {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds-mobilemenu__row-amount {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

.ds-mobilemenu__chevron {
  width: 14px;
  height: 14px;
  color: var(--fg-3);
}

/* ─── Категория (ниво 1+): банер и „Виж всичко в …“ ──────────────────────── */
.ds-mobilemenu__hero {
  position: relative;
  height: 148px;
  overflow: hidden;
  background: var(--bg-placeholder) center/cover no-repeat;
}

.ds-mobilemenu__hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5));
}

.ds-mobilemenu__hero-body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  color: var(--fg-inverse);
}

.ds-mobilemenu__hero-eyebrow {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.85;
}

.ds-mobilemenu__hero-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}

/* Бутонът е ds-btn ds-btn--dark; тук само мястото му */
.ds-mobilemenu__cta {
  display: flex;
  margin: 14px 22px 6px;
}

.ds-mobilemenu__custom-html {
  padding: 14px 22px;
}

.ds-mobilemenu__custom-html > div {
  margin: 0;
}

/* ─── Контакти най-долу ──────────────────────────────────────────────────── */
.ds-mobilemenu__footer {
  margin-top: 22px;
  padding: 22px 22px 28px;
  background: var(--bg-muted);
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-mobilemenu__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-1);
  text-decoration: none;
  transition: opacity var(--duration-base) ease;
}

.ds-mobilemenu__contact:last-of-type {
  border-bottom: 0;
}

.ds-mobilemenu__contact:hover {
  opacity: 0.6;
}

.ds-mobilemenu__contact-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--fg-1);
}

.ds-mobilemenu__contact-icon .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-mobilemenu__contact-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ds-mobilemenu__contact-value {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-1);
}

.ds-mobilemenu__contact-meta {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

@keyframes dsMobileMenuIn {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes dsDrillIn {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes dsDrillOut {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-mobilemenu,
  .ds-mobilemenu__body--in,
  .ds-mobilemenu__body--out {
    animation: none;
  }
}
.ds-summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--font-sans);
  color: var(--fg-2);
}

.ds-summary__box {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--bg-app);
  border: var(--border-base) solid var(--border-strong);
}

.ds-summary__title {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Продуктите (до 3) - миниатюра 48px 3:4 с брояч в кръг */
.ds-summary__items {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.ds-summary__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
}

.ds-summary__items > li + li > .ds-summary__item {
  border-top: var(--border-thin) solid var(--divider-light);
}

.ds-summary__thumb {
  position: relative;
  display: block;
  width: 48px;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-placeholder);
}

.ds-summary__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-summary__qty {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-circle);
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.ds-summary__item-body {
  min-width: 0;
}

.ds-summary__item-brand {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-summary__item-title {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-1);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ds-summary__item-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-3);
}

.ds-summary__item .t-price {
  justify-content: flex-end;
}

.ds-summary__item .t-price__current {
  font-size: 12px;
}

.ds-summary__more {
  padding: 8px 0;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

/* Промо код: ds-field + ds-btn ds-btn--dark ds-btn--sm */
.ds-summary__promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--space-12);
  margin-bottom: 14px;
  padding: 4px 0 14px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.ds-summary__coupon {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

/* Приложеният код е зелен (с икона check), при грешка - color-error, както в кода */
.ds-summary__coupon-code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-success);
}

.ds-summary__coupon-code .ds-icon {
  width: 14px;
  height: 14px;
}

.ds-summary__coupon.is-error .ds-summary__coupon-code {
  color: var(--color-error);
}

.ds-summary__coupon-remove {
  padding: 1px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--border-default);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.ds-summary__coupon-remove:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}

/* Редове: етикет 13px fg-2, стойност 14px/500 fg-1 */
.ds-summary__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.ds-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.ds-summary__label {
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.ds-summary__label-note {
  margin-left: 4px;
  font-size: 11px;
  color: var(--fg-3);
}

.ds-summary__value {
  flex: none;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  text-align: right;
  white-space: nowrap;
}

.ds-summary__value .t-price {
  justify-content: flex-end;
}

.ds-summary__value .t-price__current {
  font-size: 14px;
}

.ds-summary__value--ok {
  color: var(--color-success);
}

.ds-summary__row--sale .t-price__current {
  color: var(--color-sale);
}

.ds-summary__hint {
  position: relative;
  top: -0.35em;
  margin-left: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: help;
}

/* Общо */
.ds-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: var(--border-base) solid var(--border-strong);
}

.ds-summary__total-label {
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-summary__items + .ds-summary__total {
  margin-top: 0;
}

.ds-summary__total .t-price {
  justify-content: flex-end;
}

.ds-summary__total .t-price__current {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* „Плати с карта и спести ...“ - като „Цена с карта“ на PDP (ds-pdp__cardstrip):
   бял фон, 1px рамка color-grey3, без цветна черта; червен е само чипът с %
   (ds-badge--discount) в началото на пояснението. */
.ds-summary__nudge {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 13px 16px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
}

.ds-summary__nudge > .ds-icon {
  flex: none;
  color: var(--fg-1);
}

.ds-summary__nudge-body {
  flex: 1 1 0;
  min-width: 0;
}

.ds-summary__nudge-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

/* Чипът с % стои пред текста; текстът се пренася в своя колона до него */
.ds-summary__nudge-sub {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.ds-summary__nudge-sub .ds-badge {
  flex: none;
}

.ds-summary__nudge > .ds-btn {
  flex: none;
  margin-left: auto;
}

.ds-summary__cta {
  margin-top: 16px;
}

.ds-summary__note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.ds-summary__continue {
  align-self: flex-start;
  margin-top: 14px;
}

/* Редове за доверие под кутията - линейни икони 18px */
.ds-summary__trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
}

.ds-summary__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ds-summary__trust-item > .ds-icon {
  width: 18px;
  height: 18px;
  color: var(--fg-3);
}

.ds-summary__trust-title {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.ds-summary__trust-sub {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

/* Без рамка - в чекмеджето на мобилно */
.ds-summary--flat .ds-summary__box {
  padding: 0;
  border: 0;
}

@media (max-width: 640px) {
  .ds-summary__box {
    padding: 18px 16px;
  }
  .ds-summary__item {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: var(--space-10);
    padding: 6px 0;
  }
  .ds-summary__thumb {
    width: 40px;
  }
  .ds-summary__qty {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
  }
  .ds-summary__total {
    margin-top: 12px;
    padding-top: 12px;
  }
  .ds-summary__total-label {
    font-size: 13px;
    letter-spacing: 0.6px;
  }
  .ds-summary__nudge {
    flex-wrap: wrap;
  }
  .ds-summary__nudge > .ds-btn {
    width: 100%;
    margin: 8px 0 0;
  }
  .ds-summary__trust {
    padding-top: var(--space-16);
    gap: var(--space-8);
  }
  .ds-summary__trust-item {
    align-items: flex-start;
  }
  .ds-summary__trust-item > .ds-icon {
    margin-top: 2px;
  }
}
/* =============================================================================
   BasketDrawer - ds-basket-modal / ds-basket__*
   Чекмедже отдясно 440px върху затъмнение overlay, сянка shadow-drawer.
   Горе заглавие, после лента „до безплатна доставка“ с прогрес, редове
   продукти (скрол), долу междинна сума, бележка и червеният бутон
   „Завърши поръчката“ (ds-btn--primary).
   Мобилно (до 640px) заема целия екран и добавя брой, промо код и
   разбивка на сумата (ds-qty, ds-field, ds-summary).
   ============================================================================= */
.ds-basket-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  font-family: var(--font-sans);
}

.ds-basket-modal__bg {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.ds-basket-modal__cont {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 100vw;
  background: var(--bg-app);
  color: var(--fg-2);
  box-shadow: var(--shadow-drawer);
}

.ds-basket__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-24) 28px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.ds-basket__title-main {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-basket__title-count {
  margin-left: 4px;
  font-weight: 400;
  color: var(--fg-3);
}

/* Бутонът е ds-icon-btn (40×40); отрицателното поле пази височината на реда. */
.ds-basket__close {
  margin: -8px -10px -8px 0;
}

.ds-basket__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-basket__body::-webkit-scrollbar {
  width: 4px;
}

.ds-basket__body::-webkit-scrollbar-track {
  background: transparent;
}

.ds-basket__body::-webkit-scrollbar-thumb {
  background: var(--color-grey3);
}

/* Лента „до безплатна доставка“: текст + 3px прогрес (bg-dark върху grey3). */
.ds-basket__shipping {
  padding: 14px 28px;
  background: var(--bg-muted);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.ds-basket__shipping-text strong {
  font-weight: 600;
  color: var(--fg-1);
}

/* „Имаш безплатна доставка!“ - удебеленото е зелено, както в кода */
.ds-basket__shipping-text--ok strong {
  color: var(--color-success);
}

.ds-basket__shipping-courier {
  display: inline-block;
  height: 16px;
  width: auto;
  margin-left: 3px;
  vertical-align: middle;
}

.ds-basket__shipping-bar {
  position: relative;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--color-grey3);
}

.ds-basket__shipping-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--bg-dark);
  transition: width var(--duration-base) ease;
}

/* Празна кошница */
.ds-basket__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: var(--space-40);
  text-align: center;
}

.ds-basket__empty-icon {
  width: 32px;
  height: 32px;
  color: var(--fg-3);
}

.ds-basket__empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

/* Редове продукти */
.ds-basket__list {
  padding: 4px 28px var(--space-12);
}

.ds-basket__item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: var(--border-thin) solid var(--divider-light);
}

.ds-basket__item:last-child {
  border-bottom: 0;
}

.ds-basket__item.is-unavailable {
  opacity: 0.55;
}

.ds-basket__img {
  position: relative;
  display: block;
  width: 90px;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-placeholder);
}

.ds-basket__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-basket__sold-out {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
}

.ds-basket__body-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-basket__brand {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-basket__title {
  margin: 4px 0 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.ds-basket__title:hover,
.ds-basket__title.is-hover {
  color: var(--color-red);
}

.ds-basket__meta {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.ds-basket__meta strong {
  font-weight: 500;
  color: var(--fg-1);
  border-bottom: var(--border-thin) solid var(--fg-1);
}

.ds-basket__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.ds-basket__price .t-price__current {
  font-size: 14px;
}

.ds-basket__delete {
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--duration-base) ease;
}

.ds-basket__delete:hover,
.ds-basket__delete.is-hover {
  color: var(--color-red);
}

/* Долна част: междинна сума, бележка, бутон */
.ds-basket__footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-24) 28px;
  background: var(--bg-app);
  border-top: var(--border-thin) solid var(--color-grey3);
}

.ds-basket__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-12);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
}

.ds-basket__subtotal-label {
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ds-basket__subtotal .t-price {
  justify-content: flex-end;
}

.ds-basket__subtotal .t-price__current {
  font-size: 14px;
}

.ds-basket__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

/* =============================================================================
   CartLine - cart-item
   Ред продукт в кошницата: снимка 3:4 (140px), марка, име, цвят и срок,
   размер (ds-select) и брой (ds-qty ds-qty--sm), премахни (trash), цена
   (t-price, намалената е червена) и отделна доставка, ако има.
   ============================================================================= */
.cart-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-24);
  align-items: start;
  padding: 28px 0;
  border-bottom: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
  color: var(--fg-2);
}

.cart-item--removed {
  opacity: 0.7;
}

.cart-item__image {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-placeholder);
  text-decoration: none;
}

.cart-item__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item--unavailable .cart-item__image img {
  filter: grayscale(1);
  opacity: 0.55;
}

.cart-item__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 6px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
}

.cart-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-width: 0;
}

.cart-item__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-16);
}

.cart-item__head-text {
  min-width: 0;
}

.cart-item__brand {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.cart-item__title {
  display: inline-block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.cart-item__title:hover,
.cart-item__title.is-hover {
  color: var(--color-red);
}

.cart-item__meta {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

.cart-item__meta-value {
  color: var(--fg-2);
}

/* Премахни: линейна икона trash 18px, fg-3 -> fg-1 при hover */
.cart-item__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -6px -6px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--duration-base) ease;
}

.cart-item__remove .ds-icon {
  width: 18px;
  height: 18px;
}

.cart-item__remove:hover,
.cart-item__remove.is-hover {
  color: var(--fg-1);
}

/* Размер (ds-select) и брой (ds-qty--sm) - долните линии се подравняват */
.cart-item__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-12);
  margin-top: 6px;
}

.cart-item__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 110px;
}

.cart-item__control-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.cart-item__control--qty {
  min-width: 0;
}

.cart-item__restore {
  padding: 2px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--fg-1);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.cart-item__restore:hover,
.cart-item__restore.is-hover {
  opacity: 0.6;
}

/* Изчерпан продукт: кутия за грешка под контролите */
.cart-item__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-error);
  border: var(--border-thin) solid var(--border-error);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

.cart-item__alert .ds-icon {
  width: 18px;
  height: 18px;
  color: var(--color-error);
}

.cart-item__footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 6px;
}

.cart-item__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.cart-item__price .t-price {
  justify-content: flex-end;
  row-gap: 4px;
}

.cart-item__price .t-price__current {
  font-size: 18px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.cart-item__price .t-price__old {
  white-space: nowrap;
}

.cart-item__shipping {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.cart-item__shipping s {
  color: var(--fg-3);
}

.cart-item__shipping--help {
  cursor: help;
  border-bottom: var(--border-thin) dotted var(--fg-3);
}

@media (min-width: 641px) {
  .cart-item__size-meta,
  .cart-item__remove-link {
    display: none;
  }
}
@media (max-width: 640px) {
  .cart-item {
    grid-template-columns: 92px 1fr;
    gap: var(--space-12);
    padding: var(--space-16);
    border-bottom-color: var(--divider-light);
  }
  .cart-item__body {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-12);
    row-gap: var(--space-8);
  }
  .cart-item__head {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .cart-item__brand {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.6px;
  }
  .cart-item__title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .cart-item__remove {
    display: none;
  }
  .cart-item__size-meta {
    grid-row: 2;
    grid-column: 1/-1;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.3px;
    color: var(--fg-3);
  }
  .cart-item__size-meta strong {
    font-weight: 500;
    color: var(--fg-1);
    border-bottom: var(--border-thin) solid var(--fg-1);
  }
  .cart-item__control--size,
  .cart-item__control-label {
    display: none;
  }
  .cart-item__controls {
    grid-row: 3;
    grid-column: 1;
    align-self: center;
    margin-top: 0;
    gap: var(--space-10);
  }
  .cart-item__control {
    min-width: 0;
  }
  .cart-item__footer {
    grid-row: 3;
    grid-column: 2;
    justify-self: end;
    align-self: center;
    margin-top: 0;
  }
  .cart-item__remove-link {
    grid-row: 4;
    grid-column: 1/-1;
    justify-self: start;
    padding: var(--space-8) 0;
    background: transparent;
    border: 0;
    border-bottom: var(--border-thin) solid var(--fg-3);
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.3px;
    color: var(--fg-3);
    cursor: pointer;
    transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
  }
  .cart-item__remove-link:hover {
    color: var(--fg-1);
    border-bottom-color: var(--fg-1);
  }
  .cart-item__alert {
    grid-row: 5;
    grid-column: 1/-1;
  }
  .cart-item__price .t-price__current {
    font-size: 14px;
  }
  .cart-item__shipping {
    font-size: 11px;
  }
}
/* =============================================================================
   DeliveryModePicker - checkout-page__mode-*, __promo-banner, __courier*
   Превключвател „До автомат / До адрес / До офис на куриер“ (1px рамка
   border-strong, избраният е bg-dark), промо лента за BOX NOW, списък с
   куриери (ds-radio, лого 38×30, срок, цена) и бележки на bg-notice.
   ============================================================================= */
.checkout-page__mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: var(--space-16);
  font-family: var(--font-sans);
}

.checkout-page__mode-toggle--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.checkout-page__mode-btn {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 18px 20px;
  background: var(--bg-app);
  color: var(--fg-1);
  border: var(--border-thin) solid var(--border-strong);
  border-radius: var(--radius-0);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.checkout-page__mode-btn + .checkout-page__mode-btn {
  border-left: 0;
}

.checkout-page__mode-btn--selected,
.checkout-page__mode-btn.is-selected {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.checkout-page__mode-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.checkout-page__mode-sub {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  opacity: 0.75;
}

.checkout-page__mode-btn--locker .checkout-page__mode-label {
  padding-right: 104px;
}

/* „Безплатна доставка“ - плътно color-success, горе вдясно */
.checkout-page__mode-badge {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100px;
  padding: 3px 7px;
  background: var(--color-success);
  color: var(--fg-inverse);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: right;
}

/* Промо лента под превключвателя: bg-dark, чип ds-badge--sale, стрелка */
.checkout-page__promo-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: calc(-1 * var(--space-16)) 0 var(--space-16);
  padding: 11px 18px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  border: var(--border-thin) solid var(--bg-dark);
  border-top: 0;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.checkout-page__promo-banner:hover,
.checkout-page__promo-banner.is-hover {
  opacity: 0.92;
}

.checkout-page__promo-banner .ds-badge {
  flex: none;
}

.checkout-page__promo-text {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
}

.checkout-page__promo-text strong {
  font-weight: 600;
}

.checkout-page__promo-detail {
  opacity: 0.7;
}

.checkout-page__promo-arrow {
  flex: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.checkout-page__subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.checkout-page__subhead--spaced {
  margin-top: 28px;
}

/* Куриери: ds-radio · лого · име и срок · „Доставка“ · цена */
.checkout-page__courier-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-16);
}

.checkout-page__subhead + .checkout-page__courier-list {
  margin-top: 0;
}

.checkout-page__courier {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: var(--space-16);
  padding: 14px 18px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  border-top: 0;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.checkout-page__courier:first-child {
  border-top: var(--border-thin) solid var(--color-grey3);
}

.checkout-page__courier:hover .ds-radio__dot {
  border-color: var(--fg-1);
}

.checkout-page__courier--selected,
.checkout-page__courier.is-selected {
  background: var(--bg-muted);
  border-left: var(--border-strong-w) solid var(--border-strong);
}

.checkout-page__courier--static {
  cursor: default;
}

.checkout-page__courier-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 30px;
}

.checkout-page__courier-logo {
  display: inline-block;
  width: 38px;
  height: 30px;
  object-fit: contain;
}

.checkout-page__courier-logo-fallback {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.checkout-page__courier-info {
  min-width: 0;
}

.checkout-page__courier-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.checkout-page__courier-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.checkout-page__courier-eta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

.checkout-page__courier-eta--promo {
  color: var(--fg-2);
}

.checkout-page__courier-price-label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--fg-3);
}

.checkout-page__courier-price {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-1);
  white-space: nowrap;
  text-align: right;
}

.checkout-page__courier-price .t-price {
  justify-content: flex-end;
}

.checkout-page__courier-price .t-price__current {
  font-size: 14px;
}

.checkout-page__courier-price--free {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-success);
}

/* „Trendo избира куриера за теб“ (До адрес) - информационна кутия */
.checkout-page__auto-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--bg-notice);
  border: var(--border-thin) solid var(--border-notice);
  font-family: var(--font-sans);
}

/* иконата е като в ds-notice: линейна 24px, без рамка */
.checkout-page__auto-note-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--fg-1);
}

.checkout-page__auto-note-icon .ds-icon {
  width: 24px;
  height: 24px;
}

.checkout-page__auto-note-body {
  flex: 1 1 auto;
  min-width: 0;
}

.checkout-page__auto-note-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.checkout-page__auto-note-text {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.checkout-page__auto-note-aside {
  flex-shrink: 0;
  text-align: right;
}

.checkout-page__auto-note-eyebrow {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.checkout-page__auto-note-price {
  margin-top: 2px;
}

.checkout-page__auto-note-price .t-price {
  justify-content: flex-end;
}

.checkout-page__auto-note-price .t-price__current {
  font-size: 16px;
}

/* Полето за адрес под бележката (ds-field) */
.checkout-page__field--full {
  margin-top: 18px;
}

/* Бележки „Първо избери населено място“ / „Няма намерени офиси“ */
.checkout-page__office-prompt,
.checkout-page__office-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-16);
  padding: 16px 20px;
  background: var(--bg-notice);
  border: var(--border-thin) solid var(--border-notice);
  font-family: var(--font-sans);
}

.checkout-page__office-prompt > .ds-icon,
.checkout-page__office-empty > .ds-icon {
  flex: none;
  color: var(--fg-1);
}

.checkout-page__office-empty > .ds-icon {
  color: var(--color-error);
}

.checkout-page__office-alert-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.checkout-page__office-alert-title {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.checkout-page__office-empty .checkout-page__office-alert-title {
  color: var(--color-error);
}

.checkout-page__office-alert-link {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--fg-1);
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.checkout-page__office-alert-link:hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

@media (max-width: 640px) {
  .checkout-page__mode-toggle {
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-12);
  }
  .checkout-page__mode-toggle--three {
    grid-template-columns: 1fr;
  }
  .checkout-page__mode-toggle--three .checkout-page__mode-btn + .checkout-page__mode-btn {
    border-left: var(--border-thin) solid var(--border-strong);
    border-top: 0;
  }
  .checkout-page__mode-btn {
    padding: 14px 12px;
  }
  .checkout-page__mode-label {
    font-size: 11px;
  }
  .checkout-page__mode-sub {
    margin-top: 3px;
    font-size: 11px;
  }
  .checkout-page__promo-banner {
    gap: var(--space-8);
    margin-top: calc(-1 * var(--space-12));
    padding: 10px 14px;
  }
  .checkout-page__promo-text {
    font-size: 11px;
    line-height: 1.35;
  }
  .checkout-page__courier {
    grid-template-columns: auto auto 1fr auto;
    column-gap: var(--space-10);
    row-gap: 0;
    padding: 12px 14px;
  }
  .checkout-page__courier-price-label {
    display: none;
  }
  .checkout-page__courier-logo-wrap,
  .checkout-page__courier-logo,
  .checkout-page__courier-logo-fallback {
    width: 28px;
    height: 28px;
  }
  .checkout-page__courier-logo-fallback {
    display: inline-flex;
  }
  .checkout-page__courier-name {
    font-size: 12px;
  }
  .checkout-page__courier-price .t-price__current {
    font-size: 12px;
  }
  .checkout-page__auto-note {
    gap: var(--space-12);
    margin-top: 14px;
    padding: 14px 16px;
  }
  .checkout-page__auto-note-icon {
    width: 30px;
    height: 30px;
  }
  .checkout-page__auto-note-title {
    font-size: 10px;
  }
  .checkout-page__auto-note-price .t-price__current {
    font-size: 14px;
  }
  .checkout-page__office-prompt,
  .checkout-page__office-empty {
    align-items: flex-start;
  }
}
/* =============================================================================
   AuthCard - карта за вход, регистрация и забравена парола
   Бяла страница, карта 460px (регистрация 520px) без рамка и сянка.
   Заглавие Cormorant Infant 40px (стил t-display-40) на десктоп и мобилно.
   „Влез“ и „Създай профил“ са ds-btn--primary (финално действие).
   Решения 26.09.2026: без вход с външен профил (Google, Facebook) и без
   „или“; без мобилна лента над формата - картата започва под header-а.
   Маркировка:
   <section class="auth-minimal"><div class="auth-minimal__card">
     [<div class="auth-tabs">…</div>] или eyebrow + title + subtitle
     <form class="auth-form">ds-field… .auth-screen__row… ds-btn--primary</form>
   </div></section>
   ============================================================================= */
.auth-minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 72px 24px;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
}

.auth-minimal__card {
  width: 100%;
  max-width: 460px;
  font-family: var(--font-sans);
  color: var(--fg-1);
}

.auth-minimal__card--wide {
  max-width: 520px;
}

.auth-minimal__eyebrow {
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* 36px Jost ВЕРСАЛ (десктоп) и 30px Cormorant (мобилно) -> един стил t-display-40 */
.auth-minimal__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--fg-1);
}

.auth-minimal__subtitle {
  margin: 0 0 36px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

.auth-minimal__hint {
  margin: 28px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.auth-minimal__alt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

/* Центрирано състояние: „Провери имейла си“, „Паролата е сменена“ */
.auth-minimal__centered {
  text-align: center;
}

.auth-minimal__centered .auth-state-icon {
  margin-left: auto;
  margin-right: auto;
}

/* Табове „Имам профил“ / „Нова регистрация“ (модалът за вход) */
.auth-tabs {
  display: flex;
  margin: 0 0 32px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.auth-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 -1px;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-bottom: var(--border-base) solid transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--fg-2);
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.auth-tabs__tab:hover,
.auth-tabs__tab.is-hover {
  color: var(--fg-1);
  border-bottom-color: var(--border-default);
}

.auth-tabs__tab.is-active,
.auth-tabs__tab[aria-selected=true] {
  color: var(--fg-1);
  border-bottom-color: var(--border-strong);
}

/* Формата: полета ds-field през 24px */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: var(--font-sans);
}

/* „Запомни ме“ + „Забравена парола?“ */
.auth-screen__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-2);
}

/* Пол: два бутона-превключвателя (Жена / Мъж) */
.auth-toggle-group__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.auth-toggle-group {
  display: grid;
  gap: 8px;
}

.auth-toggle-group--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-toggle-group--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-toggle {
  min-height: 42px;
  padding: 14px 10px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-0);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease, color var(--duration-base) ease;
}

.auth-toggle:hover,
.auth-toggle.is-hover {
  border-color: var(--border-strong);
}

.auth-toggle.is-selected,
.auth-toggle[aria-pressed=true] {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}

.auth-field-group--error .auth-toggle-group__label {
  color: var(--color-error);
}

.auth-field-group--error .auth-toggle:not(.is-selected) {
  border-color: var(--color-error);
}

/* Сила на паролата: 4 черти 3px, надпис и 4 правила с линейни икони.
   Скалата е error -> fg-3 -> fg-1 -> success; „средна“ е неутрална fg-3 -
   без топъл цвят за предупреждение (решение 26.09.2026, кехлибареното и
   жълтото от кода отпадат). Цветът е само в чертите; надписът е fg-1
   (слаба - error). */
.auth-password-strength {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--font-sans);
}

.auth-password-strength__bars {
  display: flex;
  gap: 4px;
}

.auth-password-strength__bar {
  flex: 1;
  height: 3px;
  background: var(--color-grey3);
  transition: background-color var(--duration-base) ease;
}

.auth-password-strength__bar--score-1 {
  background: var(--color-error);
}

.auth-password-strength__bar--score-2 {
  background: var(--fg-3);
}

.auth-password-strength__bar--score-3 {
  background: var(--fg-1);
}

.auth-password-strength__bar--score-4 {
  background: var(--color-success);
}

.auth-password-strength__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.auth-password-strength__hint {
  color: var(--fg-3);
}

.auth-password-strength__label {
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.auth-password-strength__label--score-1 {
  color: var(--color-error);
}

.auth-password-strength__rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-password-strength__rule {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.auth-password-strength__rule .ds-icon {
  width: 14px;
  height: 14px;
  color: var(--fg-4);
}

.auth-password-strength__rule.is-ok {
  color: var(--fg-1);
}

.auth-password-strength__rule.is-ok .ds-icon {
  color: var(--color-success);
}

/* „Паролите съвпадат“ под второто поле */
.auth-match {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -12px;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  color: var(--fg-1);
}

.auth-match .ds-icon {
  width: 14px;
  height: 14px;
}

.auth-match--ok .ds-icon {
  color: var(--color-success);
}

.auth-match--mismatch {
  color: var(--color-error);
}

/* Забравена парола - „Провери имейла си“: икона в квадрат и стъпки 01-03 */
.auth-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-1);
}

.auth-state-icon--success {
  background: var(--bg-success);
  border-color: var(--border-success);
  color: var(--color-success);
}

.auth-state-icon--error {
  background: var(--bg-error);
  border-color: var(--border-error);
  color: var(--color-error);
}

.auth-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.auth-steps > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.auth-steps__num {
  flex: none;
  min-width: 18px;
  padding-bottom: 2px;
  border-bottom: var(--border-thin) solid var(--border-strong);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--fg-1);
}

.auth-steps__text {
  line-height: 1.65;
}

@media (max-width: 480px) {
  .auth-screen__row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}
/* Мобилно: без лента над формата (решение 26.09.2026) - картата започва
   веднага под header-а, eyebrow, заглавие и подзаглавие са като на десктоп. */
@media (max-width: 640px) {
  .auth-minimal {
    min-height: 0;
    padding: 30px var(--gutter-mobile) 48px;
    align-items: stretch;
    justify-content: flex-start;
  }
  .auth-minimal__card,
  .auth-minimal__card--wide {
    max-width: none;
  }
  .auth-minimal__subtitle {
    margin-bottom: 26px;
  }
  .auth-minimal__hint {
    margin-top: 20px;
  }
  .auth-form {
    gap: 22px;
  }
  .auth-minimal .ds-btn {
    min-height: 48px;
  }
  .auth-minimal .auth-form > .ds-check {
    padding: 8px 0;
  }
  .auth-toggle {
    min-height: 44px;
    padding: 12px 10px;
  }
  .auth-match {
    margin-top: 0;
    font-size: 12px;
    letter-spacing: 0.3px;
  }
  .auth-steps {
    max-width: none;
    gap: 12px;
    margin-bottom: 28px;
  }
}
/* =============================================================================
   AccountNav - навигация „Моят профил“ и ред от списъка с поръчки
   Десктоп: странична колона 220px - редове 13px/500 ВЕРСАЛ с линейна икона в
   квадрат 28px, активният ред е тъмен (bg-dark). Под 768px колоната става
   хоризонтална лента, под 640px - текстови табове с 2px линия.
   Мобилни редове (хъб на профила, същите като „Моят профил“ в менюто): икона
   20px, 14px текст, хеърлайн divider-light, шеврон 14px fg-3.
   Ред поръчка: рамка 1px color-grey3, номер + статус + мета вляво, „Общо“ и
   „Детайли“ (ds-btn--ghost ds-btn--sm) вдясно.
   ============================================================================= */
.profile-page__shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-40);
  align-items: start;
  font-family: var(--font-sans);
  color: var(--fg-2);
}

.profile-page__content {
  min-width: 0;
}

/* Странична колона */
.profile-page__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  min-width: 0;
}

.profile-page__sidebar-nav {
  display: flex;
  flex-direction: column;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.profile-page__sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.profile-page__sidebar-link:hover:not(.is-active),
.profile-page__sidebar-link.is-hover {
  background: var(--bg-muted);
  color: var(--fg-1);
}

.profile-page__sidebar-link.is-active {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.profile-page__sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  background: var(--bg-muted);
  color: var(--fg-2);
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.profile-page__sidebar-icon .ds-icon {
  width: 18px;
  height: 18px;
}

.profile-page__sidebar-link.is-active .profile-page__sidebar-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--fg-inverse);
}

/* Брояч - хапче (radius-pill е разрешен само тук и в лентата за прогрес) */
.profile-page__sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  margin-left: auto;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.profile-page__sidebar-link.is-active .profile-page__sidebar-badge {
  background: var(--color-white);
  color: var(--fg-1);
}

/* При hover редът става bg-muted - квадратът и броячът минават на бяло, за да не се слеят */
.profile-page__sidebar-link:hover:not(.is-active) .profile-page__sidebar-icon,
.profile-page__sidebar-link.is-hover .profile-page__sidebar-icon {
  background: var(--bg-app);
  color: var(--fg-1);
}

.profile-page__sidebar-link:hover:not(.is-active) .profile-page__sidebar-badge,
.profile-page__sidebar-link.is-hover .profile-page__sidebar-badge {
  background: var(--bg-app);
}

/* Помощ под колоната */
.profile-page__sidebar-help {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-20);
  padding: 20px;
  background: var(--bg-muted);
}

.profile-page__sidebar-help .profile-page__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.profile-page__sidebar-help-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.profile-page__sidebar-help .t-link-action {
  align-self: flex-start;
  margin-top: var(--space-4);
}

/* Мобилни редове с икони („Моят профил“ в менюто и хъб на профила) */
.profile-page__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-app);
  font-family: var(--font-sans);
}

.profile-page__nav-list > li {
  display: block;
}

.profile-page__nav-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 16px;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-family: var(--font-sans);
  text-align: left;
  text-decoration: none;
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--duration-base) ease;
}

.profile-page__nav-row:active,
.profile-page__nav-row.is-active {
  background: var(--bg-muted);
}

.profile-page__nav-list > li:last-child > .profile-page__nav-row {
  border-bottom: 0;
}

.profile-page__nav-row:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
}

.profile-page__nav-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--fg-1);
}

.profile-page__nav-row-icon .ds-icon {
  width: 20px;
  height: 20px;
}

.profile-page__nav-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-1);
}

.profile-page__nav-row-badge {
  flex: none;
  min-width: 22px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--fg-2);
}

.profile-page__nav-row-amount {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

.profile-page__nav-row-chev {
  display: inline-flex;
  flex: none;
  color: var(--fg-3);
}

.profile-page__nav-row-chev .ds-icon {
  width: 14px;
  height: 14px;
}

/* „Изход“ - приглушен, с линия отгоре */
.profile-page__nav-row--muted {
  margin-top: 4px;
  border-top: var(--border-thin) solid var(--divider-light);
}

.profile-page__nav-row--muted .profile-page__nav-row-label,
.profile-page__nav-row--muted .profile-page__nav-row-icon {
  color: var(--fg-3);
}

/* Заглавие на секцията („Поръчки · 3 поръчки общо“) */
.profile-page__page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin: 0 0 var(--space-20);
  padding-bottom: 14px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.profile-page__page-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.profile-page__page-count {
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--fg-3);
}

/* Филтър по статус над списъка */
.profile-page__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0 0 var(--space-24);
}

.profile-page__tab {
  padding: 10px 18px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.profile-page__tab:hover:not(.is-active),
.profile-page__tab.is-hover {
  border-color: var(--border-strong);
  color: var(--fg-1);
}

.profile-page__tab.is-active {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}

.profile-page__tab-count {
  margin-left: 6px;
  font-weight: 400;
  opacity: 0.7;
}

/* Ред от списъка с поръчки */
.profile-page__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-page__order-card {
  margin-bottom: var(--space-12);
  padding: 20px 24px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
  transition: border-color var(--duration-base) ease;
}

.profile-page__order-card:last-child {
  margin-bottom: 0;
}

.profile-page__order-card:hover,
.profile-page__order-card.is-hover {
  border-color: var(--fg-2);
}

.profile-page__order-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-20);
  align-items: start;
}

.profile-page__order-info {
  min-width: 0;
}

.profile-page__order-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

/* Статус: версален етикет 10px с фон и рамка по състоянието.
   „В обработка“ е неутрален - bg-notice и fg-1, без топъл цвят за
   предупреждение (решение 26.09.2026). „Доставена“ - bg-success с текст
   fg-1; „Отказана“ - color-error (5.7:1 на bg-error). */
.profile-page__order-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-muted);
  border: var(--border-thin) solid var(--color-grey3);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-2);
}

.profile-page__order-card--progress .profile-page__order-status {
  background: var(--bg-notice);
  border-color: var(--border-notice);
  color: var(--fg-1);
}

.profile-page__order-card--delivered .profile-page__order-status {
  background: var(--bg-success);
  border-color: var(--border-success);
  color: var(--fg-1);
}

.profile-page__order-card--refused .profile-page__order-status {
  background: var(--bg-error);
  border-color: var(--border-error);
  color: var(--color-error);
}

.profile-page__order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.profile-page__order-meta-item {
  position: relative;
  padding-right: 14px;
}

.profile-page__order-meta-item::after {
  content: "·";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--border-default);
}

.profile-page__order-meta-item:last-child {
  padding-right: 0;
}

.profile-page__order-meta-item:last-child::after {
  display: none;
}

.profile-page__order-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 160px;
}

.profile-page__order-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.profile-page__order-total-label {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Сумата е само в евро (решение 26.09.2026) */
.profile-page__order-total-amount {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

/* „Детайли“ е ds-btn ds-btn--ghost ds-btn--sm; шевронът се обръща при отваряне */
.profile-page__order-dropdown .ds-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-base) ease;
}

.profile-page__order-dropdown.is-open .ds-icon {
  transform: rotate(180deg);
}

.profile-page__order-body {
  margin-top: var(--space-20);
  padding-top: var(--space-20);
  border-top: var(--border-thin) solid var(--color-grey3);
}

@media (max-width: 1024px) {
  .profile-page__shell {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-30);
  }
}
@media (max-width: 768px) {
  .profile-page__shell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-24);
  }
  .profile-page__sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-bottom: var(--space-8);
    background: var(--bg-app);
  }
  .profile-page__sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    border-top: 0;
    border-bottom: var(--border-thin) solid var(--color-grey3);
    scrollbar-width: none;
  }
  .profile-page__sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .profile-page__sidebar-link {
    flex-shrink: 0;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .profile-page__sidebar-link + .profile-page__sidebar-link {
    margin-left: var(--space-8);
  }
  .profile-page__sidebar-help {
    display: none;
  }
  .profile-page__order-head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-12);
  }
  .profile-page__order-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
  }
  .profile-page__order-total {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  /* Колоната става текстови табове: без икони, активният с 2px линия */
  .profile-page__sidebar {
    gap: 0;
    padding-bottom: 0;
  }
  .profile-page__sidebar-link,
  .profile-page__sidebar-link.is-active {
    position: relative;
    gap: 0;
    margin-bottom: -1px;
    padding: 14px 16px;
    background: transparent;
    border-bottom: var(--border-base) solid transparent;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.8px;
    color: var(--fg-2);
    transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
  }
  .profile-page__sidebar-link + .profile-page__sidebar-link {
    margin-left: 0;
  }
  .profile-page__sidebar-link:hover:not(.is-active),
  .profile-page__sidebar-link.is-hover {
    background: transparent;
    color: var(--fg-1);
  }
  .profile-page__sidebar-link.is-active {
    font-weight: 500;
    color: var(--fg-1);
    border-bottom-color: var(--border-strong);
  }
  .profile-page__sidebar-link .profile-page__sidebar-icon {
    display: none;
  }
  .profile-page__sidebar-link .profile-page__sidebar-badge,
  .profile-page__sidebar-link.is-active .profile-page__sidebar-badge {
    min-width: 0;
    height: auto;
    margin-left: 6px;
    padding: 0;
    border-radius: var(--radius-0);
    background: transparent;
    font-size: 11px;
    font-weight: 400;
    color: inherit;
    opacity: 0.65;
  }
  .profile-page__sidebar-badge::before {
    content: "(";
  }
  .profile-page__sidebar-badge::after {
    content: ")";
  }
  .profile-page__page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }
  .profile-page__page-title {
    align-self: flex-start;
  }
  .profile-page__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-4);
    margin-bottom: var(--space-16);
    padding: 4px 0 2px;
    scrollbar-width: none;
  }
  .profile-page__tabs::-webkit-scrollbar {
    display: none;
  }
  .profile-page__tab {
    padding: 9px 14px;
    font-size: 11px;
  }
  .profile-page__tab-count {
    margin-left: 4px;
  }
  .profile-page__order-card {
    margin-bottom: var(--space-10);
    padding: 14px 16px;
  }
  .profile-page__order-head {
    row-gap: var(--space-10);
  }
  .profile-page__order-title {
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
  }
  .profile-page__order-status {
    padding: 3px 8px;
    letter-spacing: 0.6px;
  }
  .profile-page__order-meta {
    gap: 2px 10px;
    font-size: 11px;
  }
  .profile-page__order-meta-item {
    padding-right: 0;
  }
  .profile-page__order-meta-item::after {
    display: none;
  }
  .profile-page__order-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-12);
    border-top: var(--border-thin) solid var(--color-grey3);
  }
  .profile-page__order-total-label {
    letter-spacing: 1px;
  }
  .profile-page__order-total-amount {
    font-size: 16px;
  }
  .profile-page__order-body {
    margin-top: var(--space-16);
    padding-top: var(--space-16);
  }
}
.order-result {
  --or-accent: var(--color-success);
  --or-accent-bg: var(--bg-success);
  --or-accent-border: var(--border-success);
  background: var(--bg-app);
  color: var(--fg-2);
  font-family: var(--font-sans);
  line-height: 1.2;
  letter-spacing: normal;
}

.order-result--complete {
  --or-accent: var(--fg-1);
  --or-accent-bg: var(--bg-notice);
  --or-accent-border: var(--border-notice);
}

.order-result--failed {
  --or-accent: var(--color-error);
  --or-accent-bg: var(--bg-error);
  --or-accent-border: var(--border-error);
}

.order-result__wrap {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}

/* Hero */
.order-result__hero {
  background: var(--or-accent-bg);
  border-bottom: var(--border-thin) solid var(--or-accent-border);
}

.order-result__hero-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 36px;
  padding: 60px 0 56px;
}

.order-result__hero-body {
  min-width: 0;
}

.order-result__mark {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: var(--color-white);
  border: var(--border-base) solid var(--or-accent);
  color: var(--or-accent);
}

.order-result__mark::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  width: 14px;
  height: 14px;
  background: var(--or-accent);
}

.order-result__mark .ds-icon {
  width: 40px;
  height: 40px;
}

.order-result__eyebrow {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--or-accent);
}

.order-result__title {
  max-width: 720px;
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.order-result__sub {
  max-width: 560px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.order-result__hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.order-result__hero-meta strong {
  font-weight: 600;
  color: var(--fg-1);
}

.order-result__hero-meta-sep {
  opacity: 0.4;
}

/* Тяло: основна колона + обобщение 380px */
.order-result__body {
  padding: 56px 0 90px;
}

.order-result__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: start;
  gap: 50px;
}

.order-result--failed .order-result__layout {
  grid-template-columns: 1.4fr 1fr;
}

.order-result__main {
  min-width: 0;
}

.order-result__aside {
  position: sticky;
  top: 20px;
  align-self: start;
}

.order-result__section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.order-result__section-eyebrow {
  margin-bottom: 6px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.order-result__section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Стъпки „Какво следва“: 4 квадрата 28px върху 1px линия */
.order-result__timeline {
  position: relative;
  display: grid;
  column-gap: var(--space-16);
  margin: 0 0 50px;
  padding: 0;
  list-style: none;
}

.order-result__timeline--4 {
  grid-template-columns: repeat(4, 1fr);
}

.order-result__timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--color-grey3);
}

.order-result__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.order-result__step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-white);
  color: var(--fg-1);
  border: var(--border-thin) solid var(--border-default);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.order-result__step-num .ds-icon {
  width: 14px;
  height: 14px;
}

.order-result__step--done .order-result__step-num {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}

.order-result__step--active .order-result__step-num {
  background: var(--or-accent);
  border-color: var(--or-accent);
  color: var(--fg-inverse);
}

.order-result__step-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.order-result__step--todo .order-result__step-label {
  color: var(--fg-3);
}

.order-result__step-at {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

/* Инструкции за банков превод (--complete) */
.order-result__instructions {
  margin-bottom: 50px;
  padding: 22px 26px;
  background: var(--bg-notice);
  border: var(--border-thin) solid var(--border-notice);
}

.order-result__instructions-eyebrow {
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.order-result__instructions-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.order-result__instructions-intro strong {
  font-weight: 600;
  color: var(--fg-1);
}

.order-result__copy-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: var(--border-thin) solid var(--border-notice);
  font-size: 13px;
  line-height: 1.4;
}

.order-result__copy-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.order-result__copy-value {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--fg-1);
  word-break: break-all;
}

.order-result__copy-value--mono {
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.order-result__copy.is-copied {
  background: var(--or-accent);
  border-color: var(--or-accent);
  color: var(--fg-inverse);
}

.order-result__alert {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--color-white);
  border-left: var(--border-strong-w) solid var(--or-accent);
  font-size: 12px;
  line-height: 1.65;
  color: var(--fg-2);
}

.order-result__alert strong {
  font-weight: 600;
  color: var(--fg-1);
}

/* Доставка: полета в 2 колони */
.order-result__delivery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 50px;
  padding: 24px 26px;
  border: var(--border-thin) solid var(--color-grey3);
}

.order-result__field-label {
  margin-bottom: 4px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.order-result__field-value {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.order-result__field-value--accent {
  font-weight: 500;
  color: var(--or-accent);
}

/* Поръчани продукти */
.order-result__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-result__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: var(--border-thin) solid var(--divider-light);
}

.order-result__item:last-child {
  border-bottom: 0;
}

.order-result__item-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-placeholder);
}

.order-result__item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-result__item-body {
  min-width: 0;
}

.order-result__item-brand {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.order-result__item-title {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.order-result__item-meta {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-3);
}

.order-result__item-price {
  text-align: right;
}

.order-result__item-price .t-price {
  justify-content: flex-end;
}

.order-result__item-price .t-price__current {
  font-size: 14px;
}

/* Обобщението е ds-summary; тук е само блокът с начин на плащане и имейл */
.order-result__summary-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.order-result__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.order-result__support {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--bg-muted);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.order-result__support a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: var(--border-thin) solid var(--fg-1);
}

.order-result__support-eyebrow {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Неуспешна: причина, какво да опиташ, бутони */
.order-result__reason-card {
  margin-bottom: 32px;
  padding: 24px 26px;
  background: var(--or-accent-bg);
  border: var(--border-thin) solid var(--or-accent-border);
}

.order-result__reason-eyebrow {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--or-accent);
}

.order-result__reason-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

.order-result__reason-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.order-result__troubleshoot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.order-result__troubleshoot-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.order-result__troubleshoot-num {
  flex: none;
  min-width: 18px;
  padding-bottom: 2px;
  border-bottom: var(--border-thin) solid var(--fg-1);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--fg-1);
}

.order-result__troubleshoot-text {
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.order-result__actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.order-result__skeleton {
  padding: 80px 0;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg-3);
}

@media (max-width: 1200px) {
  .order-result__layout {
    grid-template-columns: 1fr 340px;
    gap: var(--space-40);
  }
  .order-result--failed .order-result__layout {
    grid-template-columns: 1.3fr 1fr;
  }
}
@media (max-width: 1024px) {
  .order-result__layout,
  .order-result--failed .order-result__layout {
    grid-template-columns: 1fr;
    gap: var(--space-30);
  }
  .order-result__aside {
    position: static;
  }
}
@media (max-width: 768px) {
  .order-result__hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 0 28px;
  }
  .order-result__mark {
    width: 64px;
    height: 64px;
  }
  .order-result__title {
    font-size: 32px;
  }
  .order-result__body {
    padding: 32px 0 60px;
  }
  .order-result__timeline {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .order-result__timeline::before {
    display: none;
  }
  .order-result__step {
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .order-result__delivery {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 22px;
  }
}
@media (max-width: 640px) {
  .order-result__hero-inner {
    gap: 16px;
    padding: 28px 0 22px;
  }
  .order-result__title {
    font-size: 24px;
  }
  .order-result__sub {
    font-size: 12px;
    line-height: 1.6;
  }
  .order-result__eyebrow {
    font-size: 10px;
    letter-spacing: 1.4px;
  }
  .order-result__hero-meta {
    gap: 12px;
    margin-top: 16px;
    font-size: 10px;
  }
  .order-result__body {
    padding: 22px 0 32px;
  }
  .order-result__section-head {
    gap: var(--space-12);
    margin-bottom: 16px;
    padding-bottom: 10px;
  }
  .order-result__section-title {
    font-size: 16px;
  }
  .order-result__step-num {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  .order-result__step-label {
    font-size: 11px;
  }
  .order-result__instructions {
    margin-bottom: 32px;
    padding: 16px 18px;
  }
  .order-result__instructions-intro {
    font-size: 12px;
  }
  .order-result__copy-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
  }
  .order-result__copy-label {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .order-result__copy-value {
    grid-row: 2;
    grid-column: 1;
    font-size: 12px;
  }
  .order-result__copy {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
  }
  .order-result__alert {
    padding: 12px 14px;
    font-size: 11px;
  }
  .order-result__delivery {
    gap: 14px;
    margin-bottom: 32px;
    padding: 16px 18px;
  }
  .order-result__field-value {
    font-size: 12px;
  }
  .order-result__items {
    margin-bottom: 24px;
  }
  .order-result__item {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 6px 14px;
    padding: 10px 0;
  }
  .order-result__item-img {
    grid-row: 1/span 2;
  }
  .order-result__item-price {
    grid-row: 2;
    grid-column: 2;
  }
  .order-result__item-title {
    font-size: 12px;
  }
  .order-result__summary-meta {
    margin-top: 16px;
    padding-top: 12px;
  }
  .order-result__actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .order-result__actions-row .ds-btn {
    width: 100%;
  }
  .order-result__support {
    margin-top: 16px;
    padding: 14px 16px;
  }
  .order-result__reason-card {
    margin-bottom: 22px;
    padding: 16px 18px;
  }
}
t-product,
t-product-banner,
t-collection-redirect {
  display: block;
}

.ds-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
}

.ds-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-placeholder);
}

.ds-card__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ds-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--duration-base) ease;
}

.ds-card:hover .ds-card__img,
.ds-card.is-hover .ds-card__img {
  transform: scale(1.03);
}

/* Етикетите не влизат под „любими“: 10px ръб + 36px бутон + 6px разстояние. */
.ds-card__media .ds-badges {
  right: 52px;
}

/* Процентът намаление е винаги първи в реда (order: -1 в кода). */
.ds-card .ds-badge--discount {
  order: -1;
}

/* Собствена значка на админа в реда с етикети (качена картинка).
   Височина 22px - колкото чип; до 140px широка. */
.ds-card__custom-badge {
  display: inline-flex;
  align-items: center;
  max-width: 140px;
  max-height: 28px;
  overflow: hidden;
}

img.ds-card__custom-badge {
  display: block;
  width: auto;
  height: 22px;
}

/* Значки на админа в ъгъл на снимката: 10px от ръба, до 45% от ширината
   (HTML значка - до 60%) и до 56px височина. Не се слагат горе вдясно. */
.ds-card__corner-badges {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.ds-card__corner-badge {
  position: absolute;
  max-width: 45%;
  max-height: 56px;
  overflow: hidden;
  pointer-events: auto;
}

img.ds-card__corner-badge {
  display: block;
  width: auto;
  height: auto;
}

div.ds-card__corner-badge {
  max-width: 60%;
}

.ds-card__corner-badge--top-left {
  top: var(--space-10);
  left: var(--space-10);
}

.ds-card__corner-badge--top-right {
  top: var(--space-10);
  right: var(--space-10);
}

.ds-card__corner-badge--bottom-left {
  bottom: var(--space-10);
  left: var(--space-10);
}

.ds-card__corner-badge--bottom-right {
  bottom: var(--space-10);
  right: var(--space-10);
}

.ds-card__fav {
  position: absolute;
  top: var(--space-10);
  right: var(--space-10);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-card__fav .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-card__fav:hover,
.ds-card__fav.is-hover {
  background: var(--color-white);
  color: var(--color-red);
}

.ds-card__fav.is-active {
  color: var(--color-red);
}

.ds-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 80px;
}

/* Марка: един ред, отрязва се с многоточие (както стария .card__title). */
.ds-card__brand {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Име: най-много 2 реда. */
.ds-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
}

.ds-card__info .t-price {
  margin-top: 4px;
}

/* Изчерпан: сива снимка, лента „ИЗЧЕРПАН“, зачеркната цена, линк „Уведоми ме“.
   Снимката и името не водят към продукта; „любими“ остава („Запази за по-късно“). */
.ds-card.is-sold-out .ds-card__img {
  filter: grayscale(1) brightness(1.04);
  opacity: 0.55;
}

.ds-card.is-sold-out .ds-badges {
  display: none;
}

.ds-card.is-sold-out .ds-card__link,
.ds-card.is-sold-out .ds-card__name {
  pointer-events: none;
  cursor: default;
}

.ds-card.is-sold-out .ds-card__brand,
.ds-card.is-sold-out .ds-card__name {
  color: var(--fg-3);
}

.ds-card.is-sold-out .t-price__current {
  color: var(--fg-3);
  text-decoration: line-through;
}

.ds-card.is-sold-out .t-price__old {
  opacity: 0.6;
}

.ds-card__soldout {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  pointer-events: none;
}

.ds-card__soldout-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.ds-card__soldout-en {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.ds-card__notify {
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
  padding-bottom: 1px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: var(--border-thin) solid currentColor;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.ds-card__notify:hover,
.ds-card__notify.is-hover {
  opacity: 0.6;
}

/* На реда с цената: 8px (разстоянието в .t-price) + 4px = 12px след нея. */
.t-price .ds-card__notify {
  align-self: baseline;
  margin: 0 0 0 4px;
}

/* Скелет при зареждане: топъл фон на мястото на снимката, сиви ленти за
   марка, име и цена. Височината е като на заредена карта (min-height 80px). */
.ds-card.is-loading {
  pointer-events: none;
}

.ds-card.is-loading .ds-card__img,
.ds-card.is-loading .ds-card__fav {
  display: none;
}

.ds-card.is-loading .ds-card__brand,
.ds-card.is-loading .ds-card__name,
.ds-card.is-loading .t-price {
  display: block;
  color: transparent;
  background: var(--bg-muted);
  border-radius: 0;
}

.ds-card.is-loading .ds-card__brand {
  width: 45%;
  height: 13px;
}

.ds-card.is-loading .ds-card__name {
  width: 85%;
  height: 17px;
}

.ds-card.is-loading .t-price {
  width: 35%;
  height: 13px;
}

/* Върху тъмен фон („Бранд на фокус“, bg-deep): без „любими“, светъл текст,
   по-дребен шрифт. Етикетите остават светли - стоят върху снимката. */
.ds-card--on-dark .ds-card__fav {
  display: none;
}

.ds-card--on-dark .ds-card__media {
  background: var(--bg-dark);
}

.ds-card--on-dark .ds-card__media .ds-badges {
  right: var(--space-10);
}

.ds-card--on-dark .ds-badge {
  padding: 3px 7px;
  font-size: 10px;
}

.ds-card--on-dark .ds-card__brand {
  font-size: 10px;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

.ds-card--on-dark .ds-card__name {
  font-size: 12px;
  color: var(--fg-inverse);
}

.ds-card--on-dark .t-price__current {
  font-size: 12px;
  color: var(--fg-inverse);
}

.ds-card--on-dark .t-price__old {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.ds-card--on-dark .t-price--sale .t-price__current {
  color: var(--color-red);
}

/* Изчерпан на тъмно: лентата е обърната (бяла), текстът е приглушено бял. */
.ds-card--on-dark .ds-card__soldout {
  padding: 9px 12px;
  background: var(--color-white);
  color: var(--fg-1);
}

.ds-card--on-dark .ds-card__soldout-label {
  font-size: 10px;
  letter-spacing: 2.2px;
}

.ds-card--on-dark .ds-card__soldout-en {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fg-3);
}

.ds-card--on-dark.is-sold-out .ds-card__brand {
  color: rgba(255, 255, 255, 0.35);
}

.ds-card--on-dark.is-sold-out .ds-card__name {
  color: rgba(255, 255, 255, 0.55);
}

.ds-card--on-dark.is-sold-out .t-price__current {
  color: rgba(255, 255, 255, 0.4);
}

.ds-card--on-dark .ds-card__notify {
  color: var(--fg-inverse);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Решетка от карти (4 колони по подразбиране; 24px между редовете, 18px
   между колоните - TProductGrid и листингът). */
.ds-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 24px 18px;
}

@media (max-width: 1024px) {
  .ds-card-grid {
    gap: 20px 16px;
  }
}
@media (max-width: 768px) {
  .ds-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }
}
/* Мобилен листинг (.ds-plp-grid под 768px): по-малки „любими“, етикети,
   лента и шрифтове. 9px от кода става 10px (най-малкият размер). */
@media (max-width: 768px) {
  .ds-plp-grid .ds-card__fav {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.94);
  }
  .ds-plp-grid .ds-card__media .ds-badges {
    top: 8px;
    left: 8px;
    right: 44px;
    gap: 4px;
  }
  .ds-plp-grid .ds-card .ds-badge {
    padding: 2px 6px;
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  .ds-plp-grid .ds-card .ds-badge--discount {
    font-weight: 700;
    letter-spacing: 0.4px;
  }
  .ds-plp-grid .ds-card__soldout {
    padding: 7px 10px;
  }
  .ds-plp-grid .ds-card__soldout-label {
    font-size: 10px;
    letter-spacing: 1.6px;
  }
  .ds-plp-grid .ds-card__soldout-en {
    font-size: 10px;
    letter-spacing: 0.8px;
  }
  .ds-plp-grid .ds-card__brand {
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  .ds-plp-grid .ds-card__name {
    font-size: 12px;
    letter-spacing: 0.3px;
  }
  .ds-plp-grid .ds-card .t-price {
    column-gap: 6px;
    row-gap: 1px;
  }
  .ds-plp-grid .ds-card .t-price__current {
    font-weight: 600;
  }
  .ds-plp-grid .ds-card .t-price__old {
    font-size: 11px;
  }
  /* Изглед „1 колона“: снимка 140px вляво, текстът до нея. */
  .ds-plp-grid[data-cols="1"] .ds-card {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
  }
  .ds-plp-grid[data-cols="1"] .ds-card__media {
    flex: none;
    width: 140px;
    align-self: flex-start;
  }
  .ds-plp-grid[data-cols="1"] .ds-card__info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 0;
    justify-content: center;
  }
}
.ds-product-rail {
  padding: var(--space-90) 0 0;
  font-family: var(--font-sans);
}

@media (max-width: 1200px) {
  .ds-product-rail {
    padding-top: var(--space-60);
  }
}
/* Заглавието е SectionTitle (t-section-title, 30-marketing.css): eyebrow +
   заглавие вляво, стрелки или „Виж всички“ вдясно, 1px линия отдолу.
   Стрелките са долу вдясно, на линията на заглавието (нямат текстова база). */
.ds-product-rail__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: none;
  align-self: flex-end;
}

.ds-product-rail__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.ds-product-rail__track::-webkit-scrollbar {
  display: none;
}

.ds-product-rail__item {
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}

/* Място за карта, докато препоръките се заредят: 3:4 + 56px за текста. */
.ds-product-rail__skeleton {
  width: 100%;
  aspect-ratio: 3/4;
  margin-bottom: 56px;
  background: var(--bg-placeholder);
}

/* Точки за страниците: черти 28×2px, активната е 40px и тъмна fg-1, не
   червена (решение 26.09.2026). */
.ds-product-rail__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-24);
}

.ds-product-rail__dot {
  padding: 6px;
  margin: 0;
  background: transparent;
  border: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ds-product-rail__dot::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--border-default);
  transition: background-color var(--duration-base) ease, width var(--duration-base) ease;
}

.ds-product-rail__dot:hover::before,
.ds-product-rail__dot.is-hover::before {
  background: var(--fg-1);
}

.ds-product-rail__dot.is-active::before {
  width: 40px;
  background: var(--fg-1);
}

@media (max-width: 1024px) {
  .ds-product-rail__item {
    flex-basis: calc((100% - 36px) / 3);
  }
}
@media (max-width: 768px) {
  .ds-product-rail__nav,
  .ds-product-rail__dots {
    display: none;
  }
  .ds-product-rail__track {
    gap: 12px;
  }
  .ds-product-rail__item {
    flex-basis: calc((100% - 12px) / 2);
  }
  /* Вариант „решетка на мобилно“ („Оферти на фокус“): 2 колони, до 10 карти. */
  .ds-product-rail--mobile-grid .ds-product-rail__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .ds-product-rail--mobile-grid .ds-product-rail__item {
    flex: initial;
    scroll-snap-align: none;
  }
  .ds-product-rail--mobile-grid .ds-product-rail__item:nth-child(n+11) {
    display: none;
  }
}
@media (max-width: 640px) {
  .ds-product-rail__item {
    flex-basis: 65%;
  }
  .ds-product-rail--mobile-grid .ds-product-rail__item {
    flex-basis: auto;
  }
}
/* =============================================================================
   Carousel - ds-carousel (общ хоризонтален ред със стрелки върху картите)
   Елементи 280px (220px под 640px), 18px между тях. Стрелките ds-arrow стоят
   10px извън ръба и се показват при hover (на тъч екрани са винаги видими).
   Източник: _home.scss (.ds-carousel, .ds-carousel--rail).
   ============================================================================= */
.ds-carousel {
  position: relative;
}

.ds-carousel__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.ds-carousel__track::-webkit-scrollbar {
  display: none;
}

.ds-carousel__item {
  flex: 0 0 280px;
  min-width: 0;
  scroll-snap-align: start;
}

.ds-carousel__nav-btn {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--duration-base) ease, background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-carousel__nav-btn--prev {
  left: -10px;
}

.ds-carousel__nav-btn--next {
  right: -10px;
}

.ds-carousel:hover .ds-carousel__nav-btn,
.ds-carousel.is-hover .ds-carousel__nav-btn,
.ds-carousel__nav-btn:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .ds-carousel__nav-btn {
    opacity: 0.85;
  }
}
@media (max-width: 640px) {
  .ds-carousel__item {
    flex-basis: 220px;
  }
}
/* =============================================================================
   Страница на листинга - ds-plp, ds-plp__layout, ds-plp-grid
   Колона с филтри 260px (240px под 1024px) + решетка с 3 колони.
   Под 768px филтрите се отварят в панел отдолу, решетката е 2 колони
   (или 1 - превключвателят в ds-plp-toolbar сменя data-cols).
   ============================================================================= */
.ds-plp {
  padding-bottom: var(--space-90);
  font-family: var(--font-sans);
}

.ds-plp__layout {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: var(--space-30) 0 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-40);
  align-items: start;
}

.ds-plp__content {
  min-width: 0;
}

.ds-plp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1024px) {
  .ds-plp__layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-30);
  }
  .ds-plp-grid {
    gap: 20px 16px;
  }
}
@media (max-width: 768px) {
  .ds-plp {
    padding-bottom: var(--space-30);
  }
  .ds-plp__layout {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: var(--space-16) 0 0;
  }
  .ds-plp .ds-plp-filters {
    display: none;
  }
  .ds-plp-grid,
  .ds-plp-grid[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
    padding: 18px var(--gutter-mobile) 0;
  }
  .ds-plp-grid[data-cols="1"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
/* =============================================================================
   PLPToolbar
   1) ds-plp__header - заглавие (t-title), брой продукти, „Сортирай по“ с две
      падащи менюта (брой на страница, подредба). 1px линия отдолу.
   2) ds-plp-select - кутия с 1px рамка, 12px ВЕРСАЛ, шеврон вдясно.
   3) ds-plp-toolbar - мобилната лента: Сортирай | Филтри | колони.
   4) ds-plp-chips - активни филтри (десктоп: сиви чипове; мобилно: лента
      на bg-strip с тъмни чипове).
   5) ds-plp-guide - лента с подкатегории на bg-strip.
   6) ds-plp-sort-sheet - панел за подредба отдолу (мобилно).
   ============================================================================= */
.ds-plp__header {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: var(--space-10) 0 var(--space-30);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-24);
  border-bottom: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-plp__header-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.ds-plp__header-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-plp__header-count {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.4px;
  color: var(--fg-3);
}

.ds-plp__header-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.ds-plp__header-controls-label {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media (max-width: 768px) {
  .ds-plp__header {
    padding: var(--space-16) 0 var(--space-20);
    gap: var(--space-16);
  }
  .ds-plp__header-title {
    font-size: 24px;
    letter-spacing: 0.3px;
    line-height: 1.15;
  }
  .ds-plp__header-count {
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  .ds-plp__header-controls {
    display: none;
  }
}
/* Падащо меню в заглавния ред (брой на страница, подредба). */
.ds-plp-select {
  position: relative;
  min-width: 160px;
  font-family: var(--font-sans);
}

.ds-plp-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 36px 10px 14px;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-0);
  background: var(--bg-app);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color var(--duration-base) ease;
}

.ds-plp-select__trigger .ds-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  transition: transform var(--duration-base) ease;
}

.ds-plp-select__trigger:hover,
.ds-plp-select.is-hover .ds-plp-select__trigger,
.ds-plp-select.is-open .ds-plp-select__trigger {
  border-color: var(--border-strong);
}

.ds-plp-select.is-open .ds-plp-select__trigger .ds-icon {
  transform: rotate(180deg);
}

.ds-plp-select__list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  max-height: 176px; /* 5 реда по 30.4px + отстъпите; повече - скрол */
  overflow-y: auto;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--border-default);
  border-top: 0;
  border-bottom-color: var(--border-strong);
}

.ds-plp-select.is-open .ds-plp-select__list {
  display: block;
}

.ds-plp-select__option {
  padding: 8px 14px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-plp-select__option:hover,
.ds-plp-select__option.is-hover {
  color: var(--fg-1);
  background: var(--bg-muted);
}

.ds-plp-select__option.is-selected {
  color: var(--fg-1);
  font-weight: 500;
}

/* Мобилна лента: Сортирай | Филтри | колони. 56px висока, линии 1px отгоре,
   отдолу и между бутоните. Лепи се горе при скрол. */
.ds-plp-toolbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: 1fr 1fr 56px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  border-top: var(--border-thin) solid var(--color-grey3);
  border-bottom: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-plp .ds-plp-toolbar--mobile {
  display: none;
}

@media (max-width: 768px) {
  .ds-plp .ds-plp-toolbar--mobile {
    display: grid;
  }
}
.ds-plp-toolbar__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 10px 8px;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
  cursor: pointer;
}

.ds-plp-toolbar__btn .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-plp-toolbar__btn--cols .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-plp-toolbar__btn--filter {
  border-left: var(--border-thin) solid var(--color-grey3);
  border-right: var(--border-thin) solid var(--color-grey3);
}

.ds-plp-toolbar__btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
}

.ds-plp-toolbar__label {
  margin-top: 3px;
}

/* Избраната подредба под „Сортирай“: 11px, обикновен регистър. */
.ds-plp-toolbar__sub {
  max-width: 100%;
  margin-top: 2px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--fg-3);
}

/* Брой активни филтри: „ФИЛТРИ · 4“. Броят е текст fg-3 на реда на надписа,
   без фон и без кръг (решение 26.09.2026 - червеният брояч отпада, както
   „Филтри · 4“ в панела). Бутонът „Филтри“ е решетка: иконата горе, надписът
   и броят един до друг под нея. Точката идва от CSS - шаблонът не се сменя. */
.ds-plp-toolbar__btn--filter {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  row-gap: 2px;
  column-gap: 0;
}

.ds-plp-toolbar__btn--filter .ds-icon {
  grid-column: 1/-1;
  justify-self: center;
}

.ds-plp-toolbar__badge {
  margin-top: 3px;
  color: var(--fg-3);
  white-space: nowrap;
}

.ds-plp-toolbar__badge::before {
  content: " · ";
}

/* Активни филтри. Първият елемент е линкът „Изчисти всички филтри“. */
.ds-plp-chips {
  width: 100%;
  margin: var(--space-20) 0 var(--space-24);
  padding: 0;
  font-family: var(--font-sans);
}

.ds-plp-chips__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-plp-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 6px 12px;
  background: var(--bg-muted);
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease, opacity var(--duration-base) ease;
}

.ds-plp-chips__chip .ds-icon {
  width: 12px;
  height: 12px;
  color: var(--fg-3);
  transition: color var(--duration-base) ease;
}

.ds-plp-chips__chip:hover,
.ds-plp-chips__chip.is-hover {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.ds-plp-chips__chip:hover .ds-icon,
.ds-plp-chips__chip.is-hover .ds-icon {
  color: var(--fg-inverse);
}

.ds-plp-chips__clear {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.ds-plp-chips__clear:hover,
.ds-plp-chips__clear.is-hover {
  opacity: 0.6;
}

@media (max-width: 768px) {
  /* Мобилно: лента от ръб до ръб на bg-strip, чиповете се скролват. */
  .ds-plp-chips {
    margin: 0;
    min-height: 45px;
    background: var(--bg-strip);
    border-bottom: var(--border-thin) solid var(--color-grey3);
  }
  .ds-plp-chips__list {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 12px var(--gutter-mobile);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .ds-plp-chips__list::-webkit-scrollbar {
    display: none;
  }
  .ds-plp-chips__list > * {
    flex: none;
  }
  .ds-plp-chips__chip {
    gap: 6px;
    padding: 7px 10px 7px 12px;
    background: var(--bg-dark);
    border: var(--border-thin) solid var(--border-strong);
    color: var(--fg-inverse);
    letter-spacing: 0.2px;
  }
  .ds-plp-chips__chip .ds-icon {
    margin-left: 2px;
    color: var(--fg-inverse);
    opacity: 0.7;
  }
  .ds-plp-chips__chip:hover {
    background: var(--bg-dark);
    opacity: 0.85;
  }
  .ds-plp-chips__clear {
    padding: 7px 12px;
    border: var(--border-thin) solid var(--border-strong);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
  }
  .ds-plp-chips__clear:hover {
    opacity: 0.7;
  }
}
/* Лента с подкатегории: над решетката, на bg-strip, скролва се хоризонтално.
   Всяка подкатегория: квадратна снимка 95×95 и име 12px под нея
   (решение 26.09.2026 - кръглите снимки отпадат). */
.ds-plp-guide {
  position: relative;
  width: 100%;
  margin: 0 0 var(--space-24);
  background: var(--bg-strip);
  border-top: var(--border-thin) solid var(--color-grey3);
  border-bottom: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-plp-guide__track {
  display: flex;
  gap: var(--space-20);
  margin: 0;
  padding: var(--space-16);
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}

.ds-plp-guide__track::-webkit-scrollbar {
  display: none;
}

.ds-plp-guide__item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 95px;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
}

.ds-plp-guide__img {
  display: block;
  width: 95px;
  height: 95px;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-placeholder);
}

.ds-plp-guide__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--fg-1);
  text-underline-offset: 3px;
}

.ds-plp-guide__item:hover .ds-plp-guide__label,
.ds-plp-guide__item.is-hover .ds-plp-guide__label {
  text-decoration: underline;
}

.ds-plp-guide__item.is-active .ds-plp-guide__label {
  font-weight: 500;
}

@media (max-width: 768px) {
  .ds-plp-guide {
    margin: 0;
    border-top: 0;
  }
  .ds-plp-guide__track {
    gap: var(--space-12);
  }
}
/* Панел отдолу (мобилно) - общо за подредба и филтри: затъмнение overlay,
   сянка shadow-sheet, плъзга се нагоре за duration-fast. */
.ds-plp-sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--overlay);
}

@keyframes ds-plp-sheet-up {
  from {
    transform: translateY(20%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.ds-plp-filter-modal-window .modal-backdrop,
.ds-plp-sort-modal-window .modal-backdrop {
  background: var(--overlay);
  opacity: 1;
}

.ds-plp-filter-modal-window .modal-content,
.ds-plp-sort-modal-window .modal-content {
  animation: ds-plp-sheet-up var(--duration-fast) ease;
}

/* Панел за подредба: списък, избор = прилагане и затваряне. */
.ds-plp-sort-sheet {
  position: relative;
  z-index: 31;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-app);
  box-shadow: var(--shadow-sheet);
  font-family: var(--font-sans);
  color: var(--fg-1);
}

.ds-plp-sort-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 14px 16px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.ds-plp-sort-sheet__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-plp-sort-sheet__close,
.ds-plp-filter-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--fg-1);
  cursor: pointer;
}

.ds-plp-sort-sheet__close .ds-icon,
.ds-plp-filter-sheet__close .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-plp-sort-sheet__list {
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  list-style: none;
}

.ds-plp-sort-sheet__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-align: left;
  color: var(--fg-2);
  cursor: pointer;
}

.ds-plp-sort-sheet__option.is-active {
  color: var(--fg-1);
  font-weight: 500;
}

.ds-plp-sort-sheet__option-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-plp-sort-sheet__option-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.ds-plp-sort-sheet__option-mark .ds-icon {
  width: 14px;
  height: 14px;
}

/* SEO текст под листинга: „За колекцията“ + заглавие вляво, текст вдясно,
   скрит след 180px с преливане; „Прочети повече“. Мобилно: лента на bg-strip. */
.ds-plp-seo {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 80px auto var(--space-60);
  padding: var(--space-40) 0 0;
  border-top: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-plp-seo__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-40);
}

.ds-plp-seo__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.ds-plp-seo__eyebrow {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-plp-seo__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-plp-seo__body {
  position: relative;
  max-height: 180px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.1px;
  color: var(--fg-2);
}

.ds-plp-seo__body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-app) 100%);
  pointer-events: none;
}

.ds-plp-seo__body.is-expanded {
  max-height: none;
}

.ds-plp-seo__body.is-expanded::after {
  display: none;
}

.ds-plp-seo__body p {
  margin: 0 0 var(--space-16);
}

.ds-plp-seo__body strong,
.ds-plp-seo__body b {
  font-weight: 600;
  color: var(--fg-1);
}

.ds-plp-seo__body a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: var(--border-thin) solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--duration-base) ease;
}

.ds-plp-seo__body a:hover {
  opacity: 0.6;
}

.ds-plp-seo__toggle {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-20);
}

.ds-plp-seo__toggle-btn {
  margin: 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--fg-1);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-1);
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.ds-plp-seo__toggle-btn:hover {
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .ds-plp-seo__layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-30);
  }
}
@media (max-width: 768px) {
  .ds-plp-seo {
    width: 100%;
    max-width: none;
    margin: var(--space-30) 0 0;
    padding: 24px var(--gutter-mobile) 30px;
    background: var(--bg-strip);
  }
  .ds-plp-seo__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
  .ds-plp-seo__lead {
    gap: var(--space-8);
  }
  .ds-plp-seo__eyebrow {
    font-size: 10px;
    color: var(--color-red);
  }
  .ds-plp-seo__title {
    font-size: 18px;
  }
  .ds-plp-seo__body {
    max-height: 140px;
    font-size: 13px;
    line-height: 1.7;
  }
  .ds-plp-seo__body::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-strip) 100%);
  }
  .ds-plp-seo__toggle {
    justify-content: flex-start;
    margin-top: 14px;
  }
}
/* =============================================================================
   Filters
   1) ds-plp-filters - колоната вляво (десктоп): дърво на категориите
      (ds-plp-cat-tree) и групи ds-filter с 1px линия и 18px отгоре/отдолу.
   2) ds-filter - една група: заглавие 13px/500 ВЕРСАЛ с +/−, списък с
      отметки (ds-check, брой вдясно), размери (решетка от клетки), цветове
      (кръгли мостри), търсене в марките.
   3) ds-plp-filter-sheet - панел отдолу (мобилно): списък с групите ->
      една група на цял екран, отдолу „Изчисти“ и „Покажи N продукта“.
   ============================================================================= */
.ds-plp-filters {
  width: 100%;
  min-width: 0;
  font-family: var(--font-sans);
}

/* Скелет, докато филтрите се заредят: сиви блокове по 60px. */
.ds-plp-filters__slot {
  min-height: 60px;
  margin-bottom: 18px;
  background: var(--bg-muted);
}

.ds-filter {
  position: relative;
  margin: 0;
  padding: 18px 0;
  border-bottom: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-filter__head {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 22px 0 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.ds-filter__title {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-filter__toggle {
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: var(--fg-3);
  transition: color var(--duration-base) ease;
}

.ds-filter__head:hover .ds-filter__toggle {
  color: var(--fg-1);
}

.ds-filter__body {
  display: none;
  margin-top: var(--space-16);
}

.ds-filter.is-open .ds-filter__body {
  display: block;
}

.ds-filter__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0 4px 0 0;
  list-style: none;
}

.ds-filter__list::-webkit-scrollbar,
.ds-filter__sizes::-webkit-scrollbar {
  width: 4px;
}

.ds-filter__list::-webkit-scrollbar-thumb,
.ds-filter__sizes::-webkit-scrollbar-thumb {
  background: var(--color-grey3);
  border-radius: 0;
}

.ds-filter__list::-webkit-scrollbar-track,
.ds-filter__sizes::-webkit-scrollbar-track {
  background: transparent;
}

.ds-filter__item {
  margin: 0;
  padding: 0;
}

/* Ред с отметка: ds-check на цялата ширина, броят продукти вдясно. */
.ds-filter .ds-check,
.ds-filter .ds-radio {
  display: flex;
  width: 100%;
  align-items: center;
  color: var(--fg-2);
  letter-spacing: 0.2px;
}

.ds-filter .ds-check.is-selected,
.ds-filter .ds-radio.is-selected {
  color: var(--fg-1);
  font-weight: 500;
}

.ds-filter .ds-check__count {
  flex: none;
  margin-left: auto;
  padding-left: var(--space-8);
  font-weight: 400;
}

/* Размери: решетка 5 колони, клетка 56px висока, 1px рамка; избраният е тъмен. */
.ds-filter__sizes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 0 4px 0 0;
  list-style: none;
}

.ds-filter__size {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 14px 6px;
  overflow: hidden;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-0);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  word-break: break-word;
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-filter__size:hover,
.ds-filter__size.is-hover {
  border-color: var(--border-strong);
}

.ds-filter__size.is-selected,
.ds-filter__size[aria-pressed=true] {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}

/* Цвят: кръгла мостра 18px до името; тънък вътрешен контур за бяло. */
.ds-filter__swatch {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Търсене в марките: поле на bg-strip с лупа вляво. */
.ds-filter__search {
  position: relative;
  margin: 0 0 var(--space-12);
}

.ds-filter__search .ds-icon {
  position: absolute;
  top: 50%;
  left: 9px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: var(--fg-3);
  pointer-events: none;
}

.ds-filter__search-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 12px 9px 32px;
  border: var(--border-thin) solid var(--color-grey3);
  border-radius: var(--radius-0);
  background: var(--bg-strip);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--duration-base) ease;
}

.ds-filter__search-input::placeholder {
  color: var(--fg-3);
}

.ds-filter__search-input:focus {
  border-color: var(--border-strong);
}

/* Дърво на категориите: „Назад“, текущата категория с брой, подкатегориите. */
.ds-plp-cat-tree {
  font-family: var(--font-sans);
}

.ds-plp-cat-tree__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0 0 var(--space-12);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-base) ease;
}

.ds-plp-cat-tree__back:hover,
.ds-plp-cat-tree__back.is-hover {
  color: var(--fg-1);
}

.ds-plp-cat-tree__back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: var(--border-thin) solid var(--border-strong);
  color: var(--fg-1);
}

.ds-plp-cat-tree__back-icon .ds-icon {
  width: 12px;
  height: 12px;
}

.ds-plp-cat-tree__current {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 2px 0 var(--space-12);
}

.ds-plp-cat-tree__name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-plp-cat-tree__count {
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--fg-3);
}

.ds-plp-cat-tree__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-plp-cat-tree__item {
  margin: 0;
  padding: 0;
}

.ds-plp-cat-tree__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 11px 0;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-align: left;
  text-decoration: none;
  color: var(--fg-2);
  cursor: pointer;
  transition: color var(--duration-base) ease;
}

.ds-plp-cat-tree__link:hover,
.ds-plp-cat-tree__link.is-hover {
  color: var(--fg-1);
}

.ds-plp-cat-tree__link.is-selected {
  color: var(--fg-1);
  font-weight: 500;
}

.ds-plp-cat-tree__link-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-10);
  flex: 1 1 auto;
  min-width: 0;
}

.ds-plp-cat-tree__link-count {
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--fg-3);
}

.ds-plp-cat-tree__link .ds-icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: var(--space-10);
  color: var(--fg-3);
}

.ds-plp-cat-tree__leaf-msg {
  padding: 4px 0 2px;
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

/* Панел с филтри отдолу (мобилно). До 88% от височината на екрана. */
.ds-plp-filter-sheet {
  position: relative;
  z-index: 31;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  background: var(--bg-app);
  box-shadow: var(--shadow-sheet);
  font-family: var(--font-sans);
  color: var(--fg-1);
}

.ds-plp-filter-sheet__header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 56px;
  padding: 14px 16px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
  background: var(--bg-app);
}

.ds-plp-filter-sheet__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 0;
  padding: 4px 8px 4px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
  cursor: pointer;
}

.ds-plp-filter-sheet__back .ds-icon {
  width: 20px;
  height: 20px;
}

.ds-plp-filter-sheet__title {
  flex: 0 1 auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: left;
  color: var(--fg-1);
}

.ds-plp-filter-sheet__title-count {
  font-weight: 500;
  color: var(--fg-3);
}

/* Отворена група: заглавието е в средата между „Филтри“ и затварянето. */
.ds-plp-filter-sheet.is-drill .ds-plp-filter-sheet__title {
  flex: 1 1 auto;
  font-size: 13px;
  text-align: center;
}

.ds-plp-filter-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-app);
}

.ds-plp-filter-sheet__overview {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-plp-filter-sheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 18px 16px;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-family: var(--font-sans);
  text-align: left;
  color: var(--fg-1);
  cursor: pointer;
}

.ds-plp-filter-sheet__row-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.ds-plp-filter-sheet__row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--fg-3);
}

.ds-plp-filter-sheet__row-meta .ds-icon {
  width: 14px;
  height: 14px;
}

.ds-plp-filter-sheet__row-summary {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

.ds-plp-filter-sheet__footer {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: var(--border-thin) solid var(--color-grey3);
  background: var(--bg-app);
}

/* Бутоните са ds-btn ds-btn--sm (12px/0.8px), но 42px високи; дълъг текст
   („Покажи 1 248 продукта“) минава на 2 реда вместо да излиза от бутона. */
.ds-plp-filter-sheet__footer .ds-btn {
  width: 100%;
  min-height: 42px;
  padding: 0 8px;
  line-height: 1.2;
  white-space: normal;
}

/* Отворена група в панела: без собствено заглавие, редове от ръб до ръб. */
.ds-plp-filter-sheet__drill .ds-filter {
  padding: 0;
  border: 0;
}

.ds-plp-filter-sheet__drill .ds-filter__head {
  display: none;
}

.ds-plp-filter-sheet__drill .ds-filter__body {
  display: block;
  margin: 0;
}

.ds-plp-filter-sheet__drill .ds-filter__list {
  gap: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.ds-plp-filter-sheet__drill .ds-filter__item {
  border-bottom: var(--border-thin) solid var(--divider-light);
}

.ds-plp-filter-sheet__drill .ds-filter .ds-check,
.ds-plp-filter-sheet__drill .ds-filter .ds-radio {
  gap: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.ds-plp-filter-sheet__drill .ds-filter .ds-check__count {
  font-size: 11px;
  letter-spacing: 0;
}

.ds-plp-filter-sheet__drill .ds-filter__item.is-selected {
  background: var(--bg-strip);
}

.ds-plp-filter-sheet__drill .ds-filter--colors .ds-check {
  padding: 12px 16px;
}

.ds-plp-filter-sheet__drill .ds-filter__swatch {
  width: 24px;
  height: 24px;
  box-shadow: none;
  border: var(--border-thin) solid var(--color-grey3);
}

.ds-plp-filter-sheet__drill .ds-filter__sizes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 18px 16px;
}

.ds-plp-filter-sheet__drill .ds-filter__size {
  min-height: 0;
  padding: 14px 0;
  font-size: 13px;
  letter-spacing: 0.6px;
}

.ds-plp-filter-sheet__drill .ds-filter__search {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 16px;
  background: var(--bg-strip);
  border-bottom: var(--border-thin) solid var(--divider-light);
}

.ds-plp-filter-sheet__drill .ds-filter__search .ds-icon {
  left: 28px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--fg-1);
}

/* 16px в полето - иначе iOS увеличава страницата при фокус. */
.ds-plp-filter-sheet__drill .ds-filter__search-input {
  padding: 12px 14px 12px 38px;
  background: var(--bg-app);
  font-size: 16px;
  line-height: 1.25;
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__back {
  display: flex;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-strip);
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--fg-1);
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__back-icon {
  width: auto;
  height: auto;
  border: 0;
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__back-icon .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__current {
  display: block;
  padding: 16px 16px 8px;
  line-height: 1;
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__name {
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--fg-3);
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__count {
  display: none;
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__link {
  gap: 12px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--fg-1);
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__link.is-selected {
  background: var(--bg-strip);
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__link-label {
  gap: var(--space-8);
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__link-count {
  letter-spacing: 0;
}

.ds-plp-filter-sheet__drill .ds-plp-cat-tree__link .ds-icon {
  width: 18px;
  height: 18px;
  margin-left: 0;
}

/* ─── Оформление на страницата ───────────────────────────────────────────
   Две колони: галерия (гъвкава) + информация 480px (420px под 1024px).
   Галерията е „залепена“ при скрол, за да не остава празно място вляво. */
.ds-pdp {
  padding-bottom: 90px;
  font-family: var(--font-sans);
  color: var(--fg-2);
}

.ds-pdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 40px;
  align-items: start;
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: 10px 0 0;
}

.ds-pdp__col-gallery {
  position: sticky;
  top: var(--space-20);
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - var(--space-30));
  overflow-y: auto;
  scrollbar-width: thin;
}

.ds-pdp__col-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 1024px) {
  .ds-pdp__layout {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .ds-pdp {
    padding-bottom: 40px;
  }
  .ds-pdp__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .ds-pdp__col-gallery {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .ds-pdp__col-info {
    padding: var(--space-16);
  }
}
/* =============================================================================
   PDPGallery - ds-pdp-gallery
   Миниатюри 80px вляво + основна снимка 3:4. Етикети горе вляво, брояч
   долу вляво, „увеличи“ и „любими“ горе вдясно, стрелки ds-arrow по средата.
   Клик върху снимката отваря lightbox. На мобилно: снимката от край до край,
   миниатюри отдолу, точки вместо стрелки и брояч.
   ============================================================================= */
.ds-pdp-gallery {
  position: relative;
  width: 100%;
  font-family: var(--font-sans);
}

.ds-pdp-gallery__grid {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 14px;
}

.ds-pdp-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ds-pdp-gallery__thumb {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 3/4;
  padding: 0;
  overflow: hidden;
  background: var(--bg-placeholder);
  border: var(--border-thin) solid var(--color-grey3);
  cursor: pointer;
  transition: border-color var(--duration-base) ease;
}

.ds-pdp-gallery__thumb:hover:not(.is-active),
.ds-pdp-gallery__thumb.is-hover {
  border-color: var(--fg-2);
}

.ds-pdp-gallery__thumb.is-active {
  border: var(--border-base) solid var(--border-strong);
}

.ds-pdp-gallery__thumb-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-pdp-gallery__main {
  position: relative;
  min-width: 0;
}

.ds-pdp-gallery__viewport {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-placeholder);
  cursor: zoom-in;
}

.ds-pdp-gallery__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Етикетите са ds-badges + ds-badge; тук само мястото: 14px от ръба и
   свободно място вдясно за двата бутона. */
.ds-pdp-gallery__labels {
  top: 14px;
  left: 14px;
  right: auto;
  z-index: 3;
  max-width: calc(100% - 28px - 110px);
}

.ds-pdp-gallery__counter {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg-1);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
}

.ds-pdp-gallery__fav,
.ds-pdp-gallery__fullscreen {
  position: absolute;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-pdp-gallery__fav .ds-icon,
.ds-pdp-gallery__fullscreen .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-pdp-gallery__fav {
  right: 14px;
}

.ds-pdp-gallery__fullscreen {
  right: 62px;
}

.ds-pdp-gallery__fav:hover,
.ds-pdp-gallery__fav.is-hover,
.ds-pdp-gallery__fullscreen:hover,
.ds-pdp-gallery__fullscreen.is-hover {
  background: var(--color-white);
}

/* В любими: пълно сърце (heart-filled) в червено - както на ds-card. */
.ds-pdp-gallery__fav.is-active {
  color: var(--color-red);
}

/* Стрелките са ds-arrow (44×44); тук само позицията. */
.ds-pdp-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.ds-pdp-gallery__arrow--prev {
  left: 14px;
}

.ds-pdp-gallery__arrow--next {
  right: 14px;
}

/* Точки - само на мобилно (виж по-долу). */
.ds-pdp-gallery__dots {
  display: none;
}

@media (max-width: 768px) {
  .ds-pdp-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ds-pdp-gallery__main {
    order: 1;
  }
  .ds-pdp-gallery__viewport {
    touch-action: pan-y;
    cursor: default;
  }
  .ds-pdp-gallery__thumbs {
    order: 2;
    flex-direction: row;
    gap: 6px;
    max-height: none;
    padding: 10px 16px 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ds-pdp-gallery__thumb {
    width: 54px;
  }
  .ds-pdp-gallery__arrow,
  .ds-pdp-gallery__counter,
  .ds-pdp-gallery__fullscreen {
    display: none;
  }
  .ds-pdp-gallery__fav {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
  .ds-pdp-gallery__labels {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px - 56px);
  }
  .ds-pdp-gallery__labels .ds-badge {
    font-size: 10px;
  }
  .ds-pdp-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    pointer-events: none;
  }
  .ds-pdp-gallery__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    pointer-events: auto;
    transition: width var(--duration-base) ease, background-color var(--duration-base) ease;
  }
  .ds-pdp-gallery__dot.is-active {
    width: 20px;
    background: var(--color-white);
  }
}
/* ─── Lightbox: цял екран, тъмен фон 92%, увеличение и влачене ─────────── */
.ds-pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(0, 0, 0, 0.92);
  color: var(--fg-inverse);
  font-family: var(--font-sans);
}

.ds-pdp-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
}

.ds-pdp-lightbox__counter {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.ds-pdp-lightbox__close,
.ds-pdp-lightbox__zoom-btn,
.ds-pdp-lightbox__reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: var(--border-thin) solid rgba(255, 255, 255, 0.4);
  color: var(--fg-inverse);
  cursor: pointer;
  transition: background-color var(--duration-base) ease;
}

.ds-pdp-lightbox__close .ds-icon,
.ds-pdp-lightbox__zoom-btn .ds-icon {
  width: 18px;
  height: 18px;
}

.ds-pdp-lightbox__close:hover,
.ds-pdp-lightbox__zoom-btn:hover,
.ds-pdp-lightbox__reset-btn:hover,
.ds-pdp-lightbox__close.is-hover {
  background: rgba(255, 255, 255, 0.1);
}

.ds-pdp-lightbox__reset-btn {
  width: auto;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ds-pdp-lightbox__stage {
  position: relative;
  overflow: hidden;
}

.ds-pdp-lightbox__image {
  position: absolute;
  inset: 4% 12%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: zoom-in;
  transition: transform var(--duration-base) ease;
}

.ds-pdp-lightbox__image.is-zoomed {
  cursor: grab;
}

.ds-pdp-lightbox__image.is-zoomed:active {
  cursor: grabbing;
}

.ds-pdp-lightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: var(--border-thin) solid rgba(255, 255, 255, 0.3);
  color: var(--fg-inverse);
  cursor: pointer;
  transition: background-color var(--duration-base) ease;
}

.ds-pdp-lightbox__arrow:hover,
.ds-pdp-lightbox__arrow.is-hover {
  background: rgba(255, 255, 255, 0.2);
}

.ds-pdp-lightbox__arrow--prev {
  left: 24px;
}

.ds-pdp-lightbox__arrow--next {
  right: 24px;
}

.ds-pdp-lightbox__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
}

.ds-pdp-lightbox__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ds-pdp-lightbox__zoom-pct {
  min-width: 50px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.ds-pdp-lightbox__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ds-pdp-lightbox__strip-thumb {
  width: 48px;
  aspect-ratio: 3/4;
  padding: 0;
  background-color: var(--bg-placeholder);
  background-position: center;
  background-size: cover;
  border: var(--border-thin) solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.ds-pdp-lightbox__strip-thumb.is-active {
  border: var(--border-base) solid var(--color-white);
}

/* =============================================================================
   PDPBuyBox - информационната колона (ds-pdp__col-info)
   Марка + име, цена (само евро), „Цена с карта“, варианти и размери,
   брой + „Добави в кошницата“, линк „Бърза поръчка по телефон“, доставка,
   детайли. „Любими“ е сърцето върху снимката (PDPGallery).
   ============================================================================= */
/* ─── Марка и име ───────────────────────────────────────────────────────── */
.ds-pdp__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  margin: 0 0 var(--space-12);
}

.ds-pdp__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.ds-pdp__brand {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
}

.ds-pdp__name {
  display: block;
  color: var(--fg-1);
}

.ds-pdp__logo-link {
  flex-shrink: 0;
  display: block;
}

.ds-pdp__logo {
  display: block;
  max-width: 90px;
  max-height: 32px;
  object-fit: contain;
}

/* ─── Цена: t-price t-price--lg, само евро ───────────────────────────────
   Текущата цена 28px/500 (t-price-lg), старата 16px fg-3 зачеркната.
   Левовете и курсът отпадат (решение 26.09.2026). */
.ds-pdp__price {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 8px 0 var(--space-20);
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

/* ─── „Цена с карта“: −5% при плащане с карта ─────────────────────────────
   Канон (решение 26.09.2026): червен е само чипът с процента. Рамката е
   хеърлайн (днес червена), иконата е линейната „card“ в fg-1 (днес
   червена). Същото правило важи и за „Плати с карта“ в кошницата. */
.ds-pdp__cardstrip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--space-16) 0 0;
  padding: 13px 16px;
  border: var(--border-thin) solid var(--color-grey3);
  background: var(--bg-app);
  font-family: var(--font-sans);
}

.ds-pdp__cardstrip-glyph {
  flex: none;
  line-height: 0;
  color: var(--fg-1);
}

.ds-pdp__cardstrip-main {
  min-width: 0;
}

.ds-pdp__cardstrip-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-pdp__cardstrip-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 3px;
}

.ds-pdp__cardstrip-eur {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.ds-pdp__cardstrip-right {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  text-align: right;
}

.ds-pdp__cardstrip-save {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

.ds-pdp__cardstrip-save strong {
  font-weight: 600;
  color: var(--fg-1);
}

/* ─── Изчерпан продукт ───────────────────────────────────────────────── */
.ds-pdp__sold-out {
  margin: var(--space-16) 0;
  padding: 20px;
  border: var(--border-thin) solid var(--border-strong);
  text-align: center;
}

.ds-pdp__sold-out-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* ─── Брой + „Добави в кошницата“ ──────────────────────────────────────
   Броят е ds-qty (48px), бутонът е ds-btn ds-btn--dark ds-btn--lg и заема
   останалото място. Докато няма избран размер, броят е .is-locked. */
.ds-pdp__buy {
  margin: 0;
  padding: 0;
}

.ds-pdp__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: var(--space-12) 0 0;
}

.ds-pdp__qty {
  display: flex;
  flex-shrink: 0;
}

/* Етикетът „Брой“ се вижда само на мобилно; на десктоп е за екранни четци. */
.ds-pdp__qty-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ds-pdp__cta {
  flex: 1 1 0;
  min-width: 0;
}

/* ─── „Бърза поръчка по телефон“ - текстов линк, не бутон ───────────────── */
.ds-pdp__phone {
  padding-top: var(--space-16);
  text-align: center;
  font-family: var(--font-sans);
}

.ds-pdp__phone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 4px 2px;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-base) ease;
}

.ds-pdp__phone-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ds-pdp__phone-link:hover,
.ds-pdp__phone-link.is-hover {
  color: var(--fg-1);
}

.ds-pdp__phone-note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

/* ─── Детайли: „Описание“, „Доставка“, „Връщане“ ─────────────────────────
   Акордеонът е ds-accordion, съдържанието (.ds-pdp-details__desc,
   .ds-pdp-specs, .delivery_info) и мобилните табове (.ds-pdp__tabs-m) са
   в 20-navigation.css. Тук е само мястото му в колоната: 30px под доставката;
   под 768px акордеонът се скрива и на негово място са табовете. */
.ds-pdp-details {
  margin-top: var(--space-30);
}

/* ─── Скелет при зареждане (същата височина като заредената колона) ───── */
.ds-pdp-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 600px;
}

.ds-pdp-skeleton > div,
.ds-pdp-skeleton__size-grid > span {
  background: linear-gradient(90deg, var(--color-grey3) 0%, var(--bg-muted) 50%, var(--color-grey3) 100%);
  background-size: 200% 100%;
  animation: ds-pdp-skeleton-shimmer 1.6s ease-in-out infinite;
}

.ds-pdp-skeleton__brand {
  width: 80px;
  height: 12px;
  margin-bottom: 4px;
}

.ds-pdp-skeleton__title {
  width: 90%;
  height: 26px;
}

.ds-pdp-skeleton__title--short {
  width: 60%;
  margin-bottom: 8px;
}

.ds-pdp-skeleton__price {
  width: 50%;
  height: 36px;
  margin-bottom: 4px;
}

.ds-pdp-skeleton__variants {
  width: 100%;
  height: 72px;
}

.ds-pdp-skeleton__size-head {
  width: 35%;
  height: 12px;
}

.ds-pdp-skeleton > .ds-pdp-skeleton__size-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  height: 46px;
  background: none;
  animation: none;
}

.ds-pdp-skeleton__size-grid > span {
  display: block;
  height: 100%;
}

.ds-pdp-skeleton__cta {
  width: 100%;
  height: 48px;
  margin-top: 8px;
}

.ds-pdp-skeleton__accents {
  width: 100%;
  height: 70px;
  margin-top: 12px;
}

.ds-pdp-skeleton__accordion {
  width: 100%;
  height: 150px;
  margin-top: 18px;
}

@keyframes ds-pdp-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (max-width: 768px) {
  .ds-pdp-skeleton {
    min-height: 580px;
  }
  .ds-pdp-skeleton > .ds-pdp-skeleton__size-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 42px;
  }
  .ds-pdp-skeleton__size-grid > span:nth-child(5) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ds-pdp-skeleton > div,
  .ds-pdp-skeleton__size-grid > span {
    animation: none;
  }
}
/* ─── Закачен CTA (само мобилно) ──────────────────────────────────────────
   Изплува отдолу, когато вграденият бутон излезе от екрана (.is-visible). */
.ds-pdp__sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--bg-app);
  border-top: var(--border-thin) solid var(--color-grey3);
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--duration-base) ease;
  font-family: var(--font-sans);
}

.ds-pdp__sticky-cta.is-visible {
  transform: translateY(0);
}

.ds-pdp__sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.ds-pdp__sticky-cta__thumb {
  flex: none;
  width: 32px;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-placeholder);
}

.ds-pdp__sticky-cta__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-pdp__sticky-cta__meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.ds-pdp__sticky-cta__brand {
  overflow: hidden;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-3);
}

.ds-pdp__sticky-cta__price {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--fg-1);
}

.ds-pdp__sticky-cta__btn {
  flex: none;
}

@media (min-width: 769px) {
  .ds-pdp__sticky-cta {
    display: none;
  }
}
@media (max-width: 768px) {
  .ds-pdp__header {
    gap: var(--space-12);
  }
  .ds-pdp__title {
    gap: 6px;
  }
  .ds-pdp__brand {
    font-size: 10px;
    font-weight: 500;
  }
  .ds-pdp__name {
    letter-spacing: 0.3px;
  }
  .ds-pdp__logo {
    max-width: 64px;
    max-height: 24px;
  }
  .ds-pdp__price {
    padding: 6px 0 var(--space-16);
  }
  .ds-pdp__price .t-price--lg {
    column-gap: 10px;
  }
  .ds-pdp__price .t-price--lg .t-price__current {
    font-size: 24px;
  }
  .ds-pdp__price .t-price--lg .t-price__old {
    font-size: 14px;
  }
  .ds-pdp__sold-out {
    margin: var(--space-12) 0 0;
    padding: 14px;
  }
  .ds-pdp__sold-out-title {
    font-size: 14px;
  }
  /* Броят е над бутона, с етикет „Брой“; бутонът е на цяла ширина. */
  .ds-pdp__cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    padding-top: var(--space-16);
  }
  .ds-pdp__qty {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .ds-pdp__qty-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--fg-1);
  }
  .ds-pdp__cta {
    flex: none;
    width: 100%;
  }
  /* Линкът за поръчка по телефон: ВЕРСАЛ 12px, без икона и без бележка. */
  .ds-pdp__phone {
    padding-top: 8px;
  }
  .ds-pdp__phone-link {
    padding: 10px 0;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .ds-pdp__phone-link .ds-icon,
  .ds-pdp__phone-note {
    display: none;
  }
  .ds-pdp-details {
    display: none;
  }
}
@media (max-width: 480px) {
  .ds-pdp__cardstrip {
    gap: 10px;
    padding: 12px 13px;
  }
  .ds-pdp__cardstrip-eur {
    font-size: 20px;
  }
}
/* =============================================================================
   VariantPicker - цвят (квадратни мостри) и размер (плочки в решетка)
   Мостра 56×56 със снимката на варианта; текущият е с 2px рамка fg-1 и
   бяла вътрешна линия. Размер: 5 колони, 46px, 1px рамка; избран - 2px
   рамка (мобилно - тъмен фон). Изчерпан - зачеркнат, сив фон. Последни
   бройки - бележка под стойността. Изчерпан и „Остават N“ са нови
   състояния (решение 26.09.2026); искат наличност по размер от API.
   ============================================================================= */
.ds-pdp__variants {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  font-family: var(--font-sans);
}

.ds-pdp__variants-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--space-12);
}

.ds-pdp__variants-label,
.ds-pdp__size-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-pdp__variants-current {
  margin-left: 4px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.ds-pdp__variants-count {
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.ds-pdp__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-20);
  padding: 0;
  list-style: none;
}

.ds-pdp__swatch {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  background: var(--bg-placeholder);
  border: var(--border-thin) solid var(--color-grey6);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--duration-base) ease;
}

.ds-pdp__swatch:hover,
.ds-pdp__swatch.is-hover {
  border-color: var(--border-strong);
}

.ds-pdp__swatch.is-active {
  border: var(--border-base) solid var(--border-strong);
  cursor: default;
}

.ds-pdp__swatch.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-thin) solid var(--bg-app);
  pointer-events: none;
}

.ds-pdp__swatch-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.ds-pdp__sizes {
  margin-top: var(--space-20);
  padding: var(--space-24) 0 var(--space-12);
  font-family: var(--font-sans);
}

.ds-pdp__variants + .ds-pdp__sizes {
  margin-top: 0;
}

.ds-pdp__size-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  margin-bottom: var(--space-12);
}

.ds-pdp__size-head + .ds-pdp__size-list + .ds-pdp__size-head {
  margin-top: var(--space-20);
}

/* „Размерна таблица“: икона ruler 14px + t-link-underline. */
.ds-pdp__size-guide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.ds-pdp__size-guide:hover,
.ds-pdp__size-guide.is-hover {
  opacity: 0.7;
}

.ds-pdp__size-guide .t-link-underline {
  letter-spacing: 0.3px;
}

.ds-pdp__size-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-pdp__size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 8px 6px;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey6);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-base) ease, background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-pdp__size:hover,
.ds-pdp__size.is-hover {
  border-color: var(--border-strong);
}

.ds-pdp__size.is-selected {
  padding: 7px 5px;
  border: var(--border-base) solid var(--border-strong);
}

/* Изчерпан: остава видим, но зачеркнат и неактивен. */
.ds-pdp__size.is-soldout,
.ds-pdp__size:disabled {
  background: var(--bg-muted);
  border-color: var(--color-grey3);
  color: var(--fg-4);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Последни бройки: бележка „Остават 2“ под стойността (10px ВЕРСАЛ, fg-3). */
.ds-pdp__size-note {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-3);
}

.ds-pdp__size.is-selected .ds-pdp__size-note {
  color: var(--fg-2);
}

/* Двуосни размери (горнище + долнище): невалидна комбинация. */
.ds-pdp__combo-invalid {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-error);
}

@media (max-width: 768px) {
  .ds-pdp__variants {
    margin-top: var(--space-12);
  }
  .ds-pdp__variants-label,
  .ds-pdp__size-title {
    font-size: 11px;
    letter-spacing: 1.2px;
  }
  .ds-pdp__swatches {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .ds-pdp__swatch {
    width: 52px;
    height: 52px;
  }
  .ds-pdp__sizes {
    margin-top: var(--space-12);
    padding: var(--space-20) 0 var(--space-12);
  }
  .ds-pdp__size-guide .t-link-underline {
    padding-bottom: 1px;
    border-bottom: var(--border-thin) solid var(--border-strong);
    font-size: 11px;
    text-decoration: none;
  }
  .ds-pdp__size {
    min-height: 42px;
    padding: 10px 4px;
    font-size: 12px;
    letter-spacing: 0.6px;
  }
  /* На мобилно избраният размер е с тъмен фон. */
  .ds-pdp__size.is-selected {
    padding: 10px 4px;
    background: var(--bg-dark);
    border: var(--border-thin) solid var(--border-strong);
    color: var(--fg-inverse);
  }
  .ds-pdp__size.is-selected .ds-pdp__size-note {
    color: rgba(255, 255, 255, 0.7);
  }
}
@media (max-width: 480px) {
  .ds-pdp__size-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ─── Модал „Информация за размери“ (таблица) ─────────────────────────────
   Десктоп: панел отдясно, до 880px. Мобилно: лист отдолу до 92vh. */
.sizes {
  background: var(--bg-app);
  font-family: var(--font-sans);
}

.sizes__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.sizes__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.sizes__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: var(--border-thin) solid var(--color-grey3);
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.sizes__close .ds-icon {
  width: 18px;
  height: 18px;
}

.sizes__close:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.sizes__table-cont {
  padding: 20px 24px 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sizes__table {
  width: 100%;
  margin-bottom: 28px;
  border-collapse: collapse;
  font-size: 13px;
}

.sizes__table:last-child {
  margin-bottom: 0;
}

.sizes__table th {
  padding: 12px 16px;
  background: var(--bg-muted);
  border-bottom: var(--border-thin) solid var(--color-grey3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-1);
}

.sizes__table td {
  padding: 12px 16px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.sizes__table tbody tr:hover td,
.sizes__table tbody tr.is-hover td {
  background: var(--bg-muted);
}

.sizes__table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 768px) {
  .sizes__header {
    padding: 16px;
  }
  .sizes__title {
    font-size: 14px;
  }
  .sizes__table-cont {
    padding: 16px;
  }
  .sizes__table {
    font-size: 12px;
  }
  .sizes__table th,
  .sizes__table td {
    padding: 8px 10px;
  }
}
/* =============================================================================
   DeliveryBlock - ds-pdp__delivery (под бутоните за поръчка)
   Статус с цветна точка, дата „При теб …“ и срок в работни дни; под тях
   ред „Още X до безплатна доставка“ с лента за прогрес (ds-pdp__shipping,
   решение 26.09.2026); долу ред за безплатна доставка до автомат.
   Акцентът идва от --dlv-*:
   .is-order (по поръчка) - злато; .is-instock (на склад) - зелено.
   ============================================================================= */
.ds-pdp__delivery {
  --dlv-accent: var(--color-premium-gold);
  --dlv-accent-txt: var(--color-premium-gold-text);
  --dlv-accent-soft: var(--border-notice);
  margin-top: var(--space-24);
  background: var(--bg-app);
  border: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-pdp__delivery.is-instock {
  --dlv-accent: var(--color-success);
  --dlv-accent-txt: var(--color-success);
  --dlv-accent-soft: var(--border-success);
}

.ds-pdp__delivery-main {
  padding: 16px 18px 15px;
}

.ds-pdp__delivery-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.ds-pdp__delivery-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}

.ds-pdp__delivery-eyebrow {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-pdp__delivery-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Квадратна точка 9px с 3px светъл ореол (outline, не сянка).
   Квадрат, не кръг - решение 26.09.2026. */
.ds-pdp__delivery-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--dlv-accent);
  outline: 3px solid var(--dlv-accent-soft);
}

.ds-pdp__delivery-status-text {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dlv-accent-txt);
}

.ds-pdp__delivery-date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
}

.ds-pdp__delivery-date-lead {
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.ds-pdp__delivery-date-value {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--fg-1);
}

.ds-pdp__delivery-range {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

.ds-pdp__delivery-sep {
  color: var(--color-grey6);
}

.ds-pdp__delivery-range-text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  color: var(--dlv-accent-txt);
}

/* ─── „Още X до безплатна доставка“ (решение 26.09.2026) ─────────────────
   Същият вид като в кошницата (ds-basket__shipping), в собствени класове:
   ред на цялата ширина на блока с фон bg-muted, текст 12px fg-2, сумата
   600 fg-1; лента за прогрес 3px - писта color-grey3, запълване bg-dark
   (без червено). Три състояния по данните:
   под прага - текст + лента (ширина = сума / праг); достигнат праг -
   __shipping-text--ok с икона check-circle и удебелено в color-success
   и пълна лента; празна кошница - само „Безплатна доставка над 76,69 €“,
   без лента. Стои между датата и реда за автомата. */
.ds-pdp__shipping {
  padding: 14px 18px;
  background: var(--bg-muted);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}

.ds-pdp__shipping-text {
  display: block;
}

.ds-pdp__shipping-text strong {
  font-weight: 600;
  color: var(--fg-1);
}

/* Достигнат праг: удебеленото е зелено, както в кошницата. */
.ds-pdp__shipping-text--ok strong {
  color: var(--color-success);
}

.ds-pdp__shipping-bar {
  position: relative;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--color-grey3);
}

.ds-pdp__shipping-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--bg-dark);
  transition: width var(--duration-base) ease;
}

.ds-pdp__delivery-promo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-top: var(--border-thin) solid var(--divider-light);
}

/* След сивия ред линията е излишна - фонът му сам разделя редовете. */
.ds-pdp__shipping + .ds-pdp__delivery-promo {
  border-top: 0;
}

.ds-pdp__delivery-promo-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--fg-1);
}

.ds-pdp__delivery-promo-text {
  font-size: 12px;
  letter-spacing: 0.1px;
  color: var(--fg-1);
}

.ds-pdp__delivery-promo-text strong {
  font-weight: 600;
  color: var(--color-success);
}

@media (max-width: 768px) {
  .ds-pdp__delivery {
    margin-top: var(--space-20);
  }
  .ds-pdp__delivery-main {
    padding: 14px 14px 13px;
  }
  .ds-pdp__delivery-date-value {
    font-size: 16px;
  }
  .ds-pdp__shipping {
    padding: 12px 14px;
  }
  .ds-pdp__delivery-promo {
    padding: 10px 14px;
  }
}
/* =============================================================================
   OutfitBand - „Завърши своя аутфит“ (ds-pdp-outfit-band)
   Лента на цяла ширина под PDP: фон bg-strip, горна хеърлайн линия,
   заглавие + брояч, 2 колони с хоризонтални карти. Картата е ds-card
   (снимка 120px 3:4 + информация) с размери и бутон „Добави“.
   Свързана лента: „Още от марката“ (ds-pdp-brand-more).
   ============================================================================= */
.ds-pdp-outfit-band {
  padding: 48px 0 56px;
  background: var(--bg-strip);
  border-top: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-pdp-outfit-band__inner {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}

.ds-pdp-outfit-band__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: 24px;
}

.ds-pdp-outfit-band__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-pdp-outfit-band__count {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-3);
}

.ds-pdp-outfit-band__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ds-pdp-outfit-band__grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 600px;
}

/* Картата: ds-card, подредена хоризонтално (снимка 120px + информация). */
.ds-pdp-outfit-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-grey3);
  transition: border-color var(--duration-base) ease;
}

.ds-pdp-outfit-card:hover,
.ds-pdp-outfit-card:focus-within,
.ds-pdp-outfit-card.is-hover,
.ds-pdp-outfit-card.is-added {
  border-color: var(--border-strong);
}

.ds-pdp-outfit-card .ds-card__media {
  align-self: start;
}

.ds-pdp-outfit-card .ds-badges {
  top: 8px;
  left: 8px;
  right: 8px;
}

.ds-pdp-outfit-card .ds-card__info {
  gap: 6px;
  min-height: 0;
}

.ds-pdp-outfit-card .ds-card__brand {
  margin-top: 0;
}

.ds-pdp-outfit-card__color {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--fg-3);
}

.ds-pdp-outfit-card__color strong {
  font-weight: 500;
  color: var(--fg-1);
}

.ds-pdp-outfit-card__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.ds-pdp-outfit-card__size {
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-grey6);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.ds-pdp-outfit-card__size:hover:not(:disabled):not(.is-out),
.ds-pdp-outfit-card__size.is-hover {
  border-color: var(--border-strong);
}

.ds-pdp-outfit-card__size.is-selected {
  background: var(--bg-dark);
  border-color: var(--border-strong);
  color: var(--color-white);
}

.ds-pdp-outfit-card__size.is-out,
.ds-pdp-outfit-card__size:disabled {
  background: var(--bg-muted);
  border-color: var(--color-grey3);
  color: var(--fg-4);
  text-decoration: line-through;
  cursor: not-allowed;
}

.ds-pdp-outfit-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.ds-pdp-outfit-card__footer .t-price {
  margin-top: 0;
}

.ds-pdp-outfit-card__cta {
  flex: none;
  min-width: 96px;
}

.ds-pdp-outfit-card__hint {
  margin: -2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

@media (max-width: 768px) {
  .ds-pdp-outfit-band {
    padding: 28px 0 32px;
  }
  .ds-pdp-outfit-band__inner {
    width: 100%;
    max-width: none;
    padding: 0 var(--space-16);
  }
  .ds-pdp-outfit-band__header {
    margin-bottom: var(--space-12);
    padding-bottom: 12px;
    border-bottom: var(--border-thin) solid var(--color-grey3);
  }
  .ds-pdp-outfit-band__title {
    letter-spacing: 0.6px;
  }
  .ds-pdp-outfit-band__count {
    font-size: 10px;
  }
  /* 2+ продукта: две колони с обикновени вертикални ds-card. */
  .ds-pdp-outfit-band__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 12px;
  }
  .ds-pdp-outfit-band__grid .ds-pdp-outfit-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .ds-pdp-outfit-band__grid .ds-pdp-outfit-card .ds-card__media {
    align-self: stretch;
  }
  .ds-pdp-outfit-band__grid .ds-pdp-outfit-card__color,
  .ds-pdp-outfit-band__grid .ds-pdp-outfit-card__hint {
    display: none;
  }
  .ds-pdp-outfit-card__sizes {
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ds-pdp-outfit-card__size {
    flex: none;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
  }
  .ds-pdp-outfit-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 4px;
  }
  .ds-pdp-outfit-card__cta {
    width: 100%;
    min-width: 0;
  }
  /* 1 продукт: компактна хоризонтална карта (снимка 100px). */
  .ds-pdp-outfit-band__grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  .ds-pdp-outfit-band__grid--single .ds-pdp-outfit-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding: 10px;
    overflow: hidden;
    background: var(--color-white);
    border: var(--border-thin) solid var(--color-grey3);
  }
  .ds-pdp-outfit-band__grid--single .ds-pdp-outfit-card .ds-card__media {
    flex: 0 0 100px;
    align-self: flex-start;
    width: 100px;
  }
  .ds-pdp-outfit-band__grid--single .ds-pdp-outfit-card__hint {
    display: block;
    margin: 4px 0 0;
  }
  .ds-pdp-outfit-band__grid--single .ds-pdp-outfit-card__size {
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
  }
  .ds-pdp-outfit-band__grid--single .ds-pdp-outfit-card__footer {
    margin-top: auto;
    gap: 6px;
  }
}
/* ─── „Още от марката“ - 3 карти + банер на марката 3:4 ───────────────
   Заглавието е t-section-title (надпис „Колекция“ + „Още от <марка>“),
   картите са ds-card, бутонът е ds-btn ds-btn--ghost ds-btn--lg. */
.ds-pdp-brand-more {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: 56px 0;
  border-top: var(--border-thin) solid var(--color-grey3);
  font-family: var(--font-sans);
}

.ds-pdp-brand-more__listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.ds-pdp-brand-more__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-pdp-brand-more__banner {
  display: block;
  aspect-ratio: 3/4;
  background: var(--bg-placeholder) center/cover no-repeat;
}

.ds-pdp-brand-more__cta {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

@media (max-width: 1024px) {
  .ds-pdp-brand-more__listing {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 16px;
  }
  .ds-pdp-brand-more__cards {
    gap: 14px;
  }
}
@media (max-width: 768px) {
  .ds-pdp-brand-more {
    width: 100%;
    padding: 24px var(--space-16) 32px;
  }
  .ds-pdp-brand-more .t-section-title {
    margin-bottom: 20px;
  }
  .ds-pdp-brand-more__listing {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .ds-pdp-brand-more__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .ds-pdp-brand-more__banner {
    order: -1;
    aspect-ratio: 16/9;
  }
  .ds-pdp-brand-more__cta {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .ds-pdp-brand-more__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* =============================================================================
   SectionTitle - t-section-title
   Надпис (eyebrow) + заглавие ВЕРСАЛ + линк-действие вдясно, 1px линия отдолу.
   Линкът е t-link-action (10-actions.css); тук е само мобилният му размер.
   .ds-home-section дава ритъма между секциите на началната страница.
   ============================================================================= */
.ds-home-section {
  padding: var(--space-90) 0 0;
}

.t-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-30);
  padding-bottom: 14px;
  border-bottom: var(--border-thin) solid var(--color-grey3);
}

.t-section-title__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.t-section-title__eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-section-title__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-section-title__action {
  flex: none;
}

/* Секция с „Бранд на фокус“ тип II: червен надпис с 18px черта отпред. */
.ds-feature-section .t-section-title__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-red);
}

.ds-feature-section .t-section-title__eyebrow::before {
  content: "";
  flex: none;
  width: 18px;
  height: 1px;
  background: var(--color-red);
}

@media (max-width: 1200px) {
  .ds-home-section {
    padding-top: var(--space-60);
  }
}
@media (max-width: 768px) {
  .ds-home-section {
    padding-top: 34px;
  }
  .t-section-title__eyebrow {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--color-red);
  }
  .t-section-title__title {
    font-size: 18px;
    letter-spacing: 0.4px;
  }
  .t-section-title__action {
    font-size: 10px;
    letter-spacing: 0.8px;
  }
}
/* =============================================================================
   USPRow - ds-usp
   Сива лента (bg-muted) веднага под hero: 4 обещания с линейна икона 30px,
   заглавие ВЕРСАЛ и кратък текст. Мобилно: бяла лента с хеърлайни, 3 колони
   само с текст, 4-тото обещание се скрива.
   ============================================================================= */
.ds-usp {
  margin-top: 0;
  padding: var(--space-40) 0;
  background: var(--bg-muted);
}

.ds-usp__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-30);
}

.ds-usp__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
}

.ds-usp__item--link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-base) ease;
}

.ds-usp__item--link:hover,
.ds-usp__item--link.is-hover {
  opacity: 0.65;
}

.ds-usp__icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: var(--fg-1);
}

.ds-usp__title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ds-usp__text {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-3);
}

@media (max-width: 1200px) {
  .ds-usp {
    padding: 28px 0;
  }
}
@media (max-width: 1024px) {
  .ds-usp__inner {
    gap: var(--space-20);
  }
}
@media (max-width: 768px) {
  .ds-usp {
    padding: 0;
    background: var(--bg-app);
    border-top: var(--border-thin) solid var(--color-grey3);
    border-bottom: var(--border-thin) solid var(--color-grey3);
  }
  .ds-usp__inner.t-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .ds-usp__item {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 14px 8px;
    text-align: center;
  }
  .ds-usp__item + .ds-usp__item {
    border-left: var(--border-thin) solid var(--divider-light);
  }
  .ds-usp__item:nth-child(4) {
    display: none;
  }
  .ds-usp__icon {
    display: none;
  }
  .ds-usp__title {
    font-size: 10px;
  }
  .ds-usp__text {
    font-size: 11px;
  }
}
@media (max-width: 640px) {
  /* Само ако редът е без t-wrap: една колона. */
  .ds-usp__inner {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}
/* =============================================================================
   TopCollections - ds-top-collections
   6 плочки 3:4 в ред (3 под 1200px, 2 под 768px). Фонът е корицата на
   колекцията (collection.images.cover, 1256×419; cover, center) - от нея
   остава средата x 471-785. Отдолу затъмняване и HTML текст: надпис,
   заглавие, брой. Без корица плочката взима резервен цвят tile-* по позиция.
   Шаблон: templates/club.html (limitTo:6).
   ============================================================================= */
.ds-top-collections__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-10);
}

.ds-top-collections__item {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--bg-placeholder);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--fg-inverse);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-base) ease, background-color var(--duration-base) ease;
}

/* Резервни цветове - само след като данните са дошли (.is-loaded). */
.ds-top-collections__item.is-loaded:nth-child(6n+1) {
  background-color: var(--tile-slate);
}

.ds-top-collections__item.is-loaded:nth-child(6n+2) {
  background-color: var(--tile-graphite);
}

.ds-top-collections__item.is-loaded:nth-child(6n+3) {
  background-color: var(--tile-camel);
}

.ds-top-collections__item.is-loaded:nth-child(6n+4) {
  background-color: var(--tile-olive);
}

.ds-top-collections__item.is-loaded:nth-child(6n+5) {
  background-color: var(--tile-taupe);
}

.ds-top-collections__item.is-loaded:nth-child(6n+6) {
  background-color: var(--tile-wine);
}

.ds-top-collections__item:hover,
.ds-top-collections__item.is-hover {
  transform: translateY(-2px);
}

.ds-top-collections__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.ds-top-collections__meta {
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ds-top-collections__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.ds-top-collections__title {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-inverse);
  transition: color var(--duration-base) ease;
}

.ds-top-collections__item:hover .ds-top-collections__title,
.ds-top-collections__item.is-hover .ds-top-collections__title {
  color: var(--color-red);
}

.ds-top-collections__count {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1200px) {
  .ds-top-collections__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
  }
}
@media (max-width: 768px) {
  .ds-top-collections__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .ds-top-collections__meta {
    left: var(--space-10);
    right: var(--space-10);
    bottom: var(--space-10);
  }
  .ds-top-collections__eyebrow {
    color: rgba(255, 255, 255, 0.7);
  }
  .ds-top-collections__title {
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .ds-top-collections__grid {
    gap: var(--space-12);
  }
}
@media (max-width: 480px) {
  .ds-top-collections__grid {
    gap: var(--space-10);
  }
}
/* =============================================================================
   BrandFeature - ds-brand-feature („Бранд на фокус“)
   Тъмен блок bg-deep в t-wrap: банер (визията и текстът са в снимката) ->
   лента с името на марката и стрелки -> хоризонтален карусел от
   ds-card--on-dark (220px) -> червена лента за прогрес.
   Тип II: вместо банера - split с HTML текст (Cormorant Infant) и корицата
   на колекцията (collections.carosel2[0].images.cover), изрязана в колона.
   Тип III (--light): същият блок на bg-muted.
   Мобилно: каруселът става решетка 2 колони (до 10 карти), без стрелки и прогрес.
   ============================================================================= */
.ds-brand-feature {
  margin-top: var(--space-24);
  background: var(--bg-deep);
  color: var(--fg-inverse);
}

.ds-brand-feature__inner {
  padding: 0;
}

.ds-brand-feature__shell {
  position: relative;
  width: 100%;
}

.ds-brand-feature t-home-collections {
  display: block;
  width: 100%;
}

/* Тип I - банер. Една снимка за всички ширини. */
.ds-brand-feature__banner {
  position: relative;
  display: block;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: var(--bg-dark);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.ds-brand-feature__banner:focus-visible {
  outline-offset: -3px;
}

.ds-brand-feature__banner-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity var(--duration-base) ease, transform var(--duration-slow) ease;
}

.ds-brand-feature__banner.is-loaded .ds-brand-feature__banner-img {
  opacity: 1;
}

.ds-brand-feature__banner.is-loaded:hover .ds-brand-feature__banner-img,
.ds-brand-feature__banner.is-loaded.is-hover .ds-brand-feature__banner-img {
  transform: scale(1.02);
}

/* Тип II - редакционен split: текст вляво, корицата на колекцията вдясно. */
.ds-brand-feature__split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: stretch;
}

.ds-brand-feature__split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 52px;
}

.ds-brand-feature__split-eyebrow {
  margin-bottom: var(--space-20);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-red);
}

.ds-brand-feature__split-headline {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: var(--fg-inverse);
}

.ds-brand-feature__split-text {
  max-width: 430px;
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.78);
}

.ds-brand-feature__split-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.ds-brand-feature__split-link {
  padding-bottom: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--fg-inverse);
  text-decoration: none;
  border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.5);
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.ds-brand-feature__split-link:hover,
.ds-brand-feature__split-link.is-hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

.ds-brand-feature__split-media {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: var(--bg-dark);
}

.ds-brand-feature__split-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}

.ds-brand-feature__split-media.is-loaded .ds-brand-feature__split-img {
  opacity: 1;
}

/* Надпис върху снимката - само със затъмняване отдолу. */
.ds-brand-feature__split-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 40px 22px 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Лента - мост между банера и карусела. */
.ds-brand-feature__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
  padding: 18px 26px;
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.08);
  border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.08);
}

.ds-brand-feature__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ds-brand-feature__eyebrow-bar {
  flex: none;
  width: 18px;
  height: 1px;
  background: var(--color-red);
}

.ds-brand-feature__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-red);
}

.ds-brand-feature__brand-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--fg-inverse);
}

.ds-brand-feature__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ds-brand-feature__nav-btn:active {
  background: rgba(255, 255, 255, 0.15);
}

/* Карусел: карти 220px, 14px между тях, прилепване при скрол. */
.ds-brand-feature__track {
  display: flex;
  gap: 14px;
  padding: 26px 26px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 26px;
  scroll-padding-right: 26px;
  scrollbar-width: none;
}

.ds-brand-feature__track::-webkit-scrollbar {
  display: none;
}

.ds-brand-feature__card {
  display: flex;
  flex-direction: column;
  flex: 0 0 220px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  cursor: pointer;
}

.ds-brand-feature__card-skeleton {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg-dark);
}

/* Прогрес: 1px линия, червена лента 28% × 3px; left се задава от скрола. */
.ds-brand-feature__progress {
  position: relative;
  height: 1px;
  margin: 0 26px 26px;
  background: rgba(255, 255, 255, 0.08);
}

.ds-brand-feature__progress-bar {
  position: absolute;
  top: -1px;
  left: 0;
  width: 28%;
  height: 3px;
  background: var(--color-red);
  transition: left var(--duration-fast) ease;
}

/* Тип III - светъл вариант (bg-muted); картите са обикновен ds-card. */
.ds-brand-feature--light {
  background: var(--bg-muted);
  color: var(--fg-1);
}

.ds-brand-feature--light .ds-brand-feature__split-headline {
  color: var(--fg-1);
}

.ds-brand-feature--light .ds-brand-feature__split-text {
  color: var(--fg-2);
}

.ds-brand-feature--light .ds-brand-feature__split-link {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}

.ds-brand-feature--light .ds-brand-feature__split-link:hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

.ds-brand-feature--light .ds-brand-feature__header {
  border-top-color: var(--color-grey3);
  border-bottom-color: var(--color-grey3);
}

.ds-brand-feature--light .ds-brand-feature__brand-name {
  color: var(--fg-1);
}

.ds-brand-feature--light .ds-brand-feature__nav-btn {
  border-color: var(--border-default);
  color: var(--fg-1);
}

.ds-brand-feature--light .ds-brand-feature__nav-btn:hover,
.ds-brand-feature--light .ds-brand-feature__nav-btn.is-hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--border-input);
  color: var(--fg-1);
}

.ds-brand-feature--light .ds-brand-feature__progress {
  background: var(--color-grey3);
}

.ds-brand-feature--light .ds-brand-feature__card-skeleton {
  background: var(--bg-placeholder);
}

@media (max-width: 1200px) {
  .ds-brand-feature__banner {
    height: 320px;
  }
  .ds-brand-feature__split-copy {
    padding: 44px 38px;
  }
  .ds-brand-feature__split-headline {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  .ds-brand-feature__banner {
    height: 260px;
  }
  .ds-brand-feature__split {
    grid-template-columns: 1fr;
  }
  .ds-brand-feature__split-media {
    min-height: 0;
    aspect-ratio: 3/2;
  }
  .ds-brand-feature__nav {
    display: none;
  }
  .ds-brand-feature__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    padding: 18px 16px 20px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .ds-brand-feature__card {
    flex: initial;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .ds-brand-feature__card:nth-child(n+11) {
    display: none;
  }
  .ds-brand-feature__progress {
    display: none;
  }
}
@media (max-width: 640px) {
  .ds-brand-feature__banner {
    height: 200px;
  }
  .ds-brand-feature__split-copy {
    padding: 32px 20px;
  }
  .ds-brand-feature__header {
    padding: 14px 16px;
  }
  .ds-brand-feature__track {
    gap: var(--space-10);
    padding: 18px 16px 16px;
  }
}
/* =============================================================================
   HeroSlider - ds-home-hero, ds-hero
   Един слайд = една кликаема снимка. Текстът и бутонът са част от самото
   изображение (банерът е цялата визия), HTML върху снимката няма.
   Десктоп (над 768px): t-wrap (90%, до 1256px), 480px / 380px под 1200px,
   стрелки ds-arrow при hover, таймер долу вдясно в един ред.
   Мобилно (до 768px): отделен rn-carousel на цялата ширина, 340 / 280 / 220px,
   автоматична смяна на 10 s, без стрелки; таймерът е на 2 реда.
   Точки под банера няма (решение 26.09.2026) - под hero веднага е USPRow.
   ============================================================================= */
/* Секцията пази височината, докато дойде първият слайд (без скок - CLS). */
.ds-home-hero {
  margin-top: 0;
  padding-top: 0;
  min-height: 480px;
  background: var(--bg-muted);
}

.ds-hero {
  position: relative;
}

.ds-hero--desktop {
  display: block;
}

.ds-hero--mobile {
  display: none;
}

.ds-hero__stage {
  position: relative;
  overflow: hidden;
  background: var(--bg-muted);
}

.ds-hero__slide {
  position: relative;
  display: block;
  width: 100%;
  height: 480px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.ds-hero__slide:focus-visible {
  outline-offset: -3px;
}

.ds-hero__slide picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.ds-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--duration-slow) ease;
}

.ds-hero__slide:hover .ds-hero__image,
.ds-hero__slide.is-hover .ds-hero__image {
  transform: scale(1.02);
}

/* Стрелки: ds-arrow (44×44) + позиция. Скрити до hover върху банера. */
.ds-hero__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  opacity: 0;
  text-decoration: none;
  transition: opacity var(--duration-base) ease, background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-hero__nav--prev {
  left: 18px;
}

.ds-hero__nav--next {
  right: 18px;
}

.ds-hero__stage:hover .ds-hero__nav,
.ds-hero__stage.is-hover .ds-hero__nav,
.ds-hero__nav:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .ds-hero__nav {
    opacity: 0.85;
  }
}
/* Таймер на кампания: тъмна плочка долу вдясно върху снимката.
   Вътрешните класове идват от directives/campaign_timer.html.
   Над 768px - един ред (≈380×51px); до 768px - 2 реда (виж по-долу). */
.ds-hero__timer {
  position: absolute;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 4;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--fg-inverse);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.ds-hero__timer .timer {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.ds-hero__timer .timer_text {
  white-space: nowrap;
}

.ds-hero__timer .boxes {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ds-hero__timer .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 24px;
}

.ds-hero__timer .number {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ds-hero__timer .text {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.6);
}

.ds-hero__timer .box_devider {
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
}

/* Мобилен hero (rn-carousel): слайдът запълва сцената. */
.ds-hero--mobile .ds-hero__stage {
  height: 340px;
}

.ds-hero__mobile-track {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-hero__mobile-track > li {
  width: 100%;
  height: 100%;
  list-style: none;
}

.ds-hero--mobile .ds-hero__slide {
  height: 100%;
}

@media (max-width: 1200px) {
  .ds-home-hero {
    min-height: 380px;
  }
  .ds-hero__slide {
    height: 380px;
  }
}
@media (max-width: 768px) {
  .ds-home-hero {
    min-height: 340px;
  }
  /* На мобилно hero е на цялата ширина на екрана, без отстъп 16px. */
  .ds-home-hero .t-wrap {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .ds-hero--desktop {
    display: none;
  }
  .ds-hero--mobile {
    display: block;
  }
  /* Мобилен таймер (целият мобилен hero, 320-768px): 2 реда - текстът над
     цифрите, 12px от ъгъла, ≈178×63px. */
  .ds-hero__timer {
    right: var(--space-12);
    bottom: var(--space-12);
    padding: 8px 10px;
    font-size: 10px;
  }
  .ds-hero__timer .timer {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .ds-hero__timer .number {
    font-size: 14px;
  }
}
@media (max-width: 640px) {
  .ds-home-hero {
    min-height: 280px;
  }
  .ds-hero--mobile .ds-hero__stage {
    height: 280px;
  }
}
@media (max-width: 480px) {
  .ds-home-hero {
    min-height: 220px;
  }
  .ds-hero--mobile .ds-hero__stage {
    height: 220px;
  }
}
/* =============================================================================
   CookieBanner - ds-cookie
   Тъмна лента (bg-dark) над header-а: заглавие, текст с линк, бутон вдясно.
   Не е закачена - изчезва при скрол. Бутонът е ds-btn--light ds-btn--sm
   (решение 26.09.2026; не червен: съгласието не е финално действие в поток).
   ============================================================================= */
.ds-cookie {
  padding: var(--space-16) 0;
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.ds-cookie__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}

.ds-cookie__body {
  min-width: 0;
}

.ds-cookie__title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-inverse);
}

.ds-cookie__text {
  max-width: 720px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.ds-cookie__link {
  color: var(--fg-inverse);
  text-decoration: none;
  border-bottom: var(--border-thin) solid currentColor;
}

.ds-cookie__link strong {
  font-weight: 500;
}

.ds-cookie__wrap > .ds-btn {
  flex: none;
}

@media (max-width: 768px) {
  .ds-cookie__wrap {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}
/* =============================================================================
   Footer - ds-footer
   Тъмен (bg-dark). Бяло тясно лого, мото, социални мрежи; три колони с
   линкове; ред с поддръжка, плащане, доставка и фирма; долна лента с
   копирайт. Логата на плащания и куриери са в бели плочки 44×28.
   ============================================================================= */
.ds-footer {
  margin-top: 90px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-family: var(--font-sans);
  line-height: 1.4;
}

.ds-footer__wrap {
  padding: 60px 0 30px;
}

.ds-footer__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

/* Колони с категории (линкове за обхождане), под основните колони */
.ds-footer__cols--cats {
  margin-top: 8px;
  padding-top: 24px;
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.12);
}

.ds-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ds-footer__logo {
  display: block;
  align-self: flex-start;
  width: auto;
  height: 28px;
}

.ds-footer__tagline {
  max-width: 320px;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
}

.ds-footer__social {
  display: flex;
  gap: 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.ds-footer__social > li {
  display: inline-flex;
}

.ds-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--fg-inverse);
  text-decoration: none;
  transition: opacity var(--duration-base) ease;
}

/* Марковите знаци са тъмни - правят се бели */
.ds-footer__social-link img {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.ds-footer__social-link:hover,
.ds-footer__social-link.is-hover {
  opacity: 0.6;
}

.ds-footer__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ds-footer__col-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-inverse);
}

.ds-footer__col-title a {
  color: inherit;
  text-decoration: none;
}

.ds-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-footer__link {
  font-size: 13px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--duration-base) ease;
}

.ds-footer__link:hover,
.ds-footer__link.is-hover {
  color: var(--fg-inverse);
}

.ds-footer__link--strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-inverse);
}

.ds-footer__line {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.55);
}

/* Поддръжка · Плащане · Доставка · Компания */
.ds-footer__contact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  padding: 40px 0;
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.12);
}

.ds-footer__contact-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-footer__payments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Лога на плащания и куриери: бяла плочка 44×28, логото до 36×20 */
.ds-footer__payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ds-footer__payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  background: var(--color-white);
}

.ds-footer__payment-icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 36px;
  max-height: 20px;
}

.ds-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1200px) {
  .ds-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .ds-footer__contact {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 768px) {
  .ds-footer {
    margin-top: 60px;
  }
  .ds-footer__wrap {
    padding: 40px 20px 24px;
  }
  .ds-footer__cols {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
  }
  .ds-footer__contact {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 0;
  }
  .ds-footer__bottom {
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
  }
}
/* =============================================================================
   CollectionBanner - ds-collection-banner
   Корицата на колекция (collection.images.cover, 1256×419) на цялата ширина
   на контейнера. Над 768px - по пропорция (aspect-ratio 1256/419): височината
   следва ширината и нищо не се реже. До 768px - 240px, снимката се реже
   (cover, center). Текстът и бутонът са в самото изображение.
   Решение 26.09.2026. Източник: _banners.scss (#large_colection picture -
   мъртъв код), products_collections.html (#collection_page_header_banner).
   ============================================================================= */
.ds-collection-banner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1256/419;
  overflow: hidden;
  background: var(--bg-placeholder);
  color: inherit;
  text-decoration: none;
}

.ds-collection-banner:focus-visible {
  outline-offset: -3px;
}

.ds-collection-banner picture {
  position: absolute;
  inset: 0;
  display: block;
}

.ds-collection-banner__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .ds-collection-banner {
    height: 240px;
    aspect-ratio: auto;
  }
}
#collection_page_header_banner {
  padding-bottom: 10px;
}

/* =============================================================================
   Newsletter - newsletter
   Центриран блок на bg-muted: заглавие ВЕРСАЛ, подзаглавие, поле ds-field +
   ds-btn--dark „Изпрати“ на един ред, съгласие ds-check. Колона до 445px.
   Блокът се връща (решение 26.09.2026): <subscribe-block> в layout.html,
   над footer-а, при PageSettings.showSubscribe и само за гости.
   Източник: _newsletter.scss, directives/subscribe_block.html (закоментиран).
   ============================================================================= */
.newsletter {
  overflow: hidden;
  background: var(--bg-muted);
  text-align: center;
}

.newsletter__cont {
  max-width: 445px;
  margin: 0 auto;
  padding: 65px 0 62px;
}

.newsletter__header {
  margin-bottom: var(--space-20);
}

.newsletter__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.newsletter__subtitle {
  display: block;
  font-weight: 400;
  color: var(--fg-2);
}

.newsletter__fields {
  width: 100%;
  text-align: left;
}

.newsletter__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);
}

.newsletter__item {
  flex: 1 1 auto;
  min-width: 0;
}

.newsletter__button {
  flex: none;
}

.newsletter__button .ds-btn {
  min-width: 120px;
}

.newsletter__consent {
  margin-top: var(--space-10);
  font-size: 12px;
  color: var(--fg-2);
}

.newsletter__success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-12) var(--space-16);
  background: var(--bg-success);
  border: var(--border-thin) solid var(--border-success);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-1);
  text-align: left;
}

.newsletter__success .ds-icon {
  width: 18px;
  height: 18px;
  color: var(--color-success);
}

@media (max-width: 768px) {
  .newsletter__cont {
    padding: 50px var(--gutter-mobile) 40px;
  }
  .newsletter__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-20);
  }
  .newsletter__button .ds-btn {
    width: 100%;
  }
}
/* =============================================================================
   TravelCard - Пътувания (.tv): карта на оферта, решетка, хапчета за
   филтри, кръглите стрелки в hero. Бутоните са ds-btn (виж Button).
   Без снимка: bg-placeholder - 17-те тона [data-tone] отпадат.
   Токените --tv-* отпадат: те са копия на основните (fg-1, fg-2, fg-3,
   color-grey3, bg-muted, color-red, font-sans, font-display, font-serif).
   ============================================================================= */
.tv {
  font-family: var(--font-sans);
  color: var(--fg-2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.tv-section__head {
  position: relative;
  margin-bottom: 28px;
}

.tv-section__title {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.tv-offer-grid {
  display: grid;
  gap: 18px;
}

.tv-offer-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tv-offer-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tv-card {
  display: block;
  min-width: 0;
  color: var(--fg-1);
  text-decoration: none;
}

.tv-card__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg-placeholder);
}

.tv-card__media--wide {
  aspect-ratio: 16/10;
}

.tv-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tv-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tv-card__soldout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  color: var(--fg-1);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tv-card__body {
  padding: 12px 2px;
}

.tv-card__meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.tv-card__title {
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-1);
  overflow-wrap: break-word;
}

.tv-card__dates {
  font-size: 12px;
  color: var(--fg-3);
}

/* Цената не е намаление - тъмна, не червена. Само в евро (решение 26.09.2026). */
.tv-card__price {
  margin-top: 6px;
}

.tv-card__price .t-price__current {
  font-size: 14px;
}

.tv-card__excerpt {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-3);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ─── Хапчета за филтри (дестинации, категории в блога) ──────────────────
   Остри ъгли (radius-0), както всичко друго (решение 26.09.2026); в кода
   са заоблени с border-radius: 20px. */
.tv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tv-pills button {
  padding: 6px 14px;
  border: var(--border-thin) solid var(--color-grey3);
  border-radius: var(--radius-0);
  background: var(--bg-app);
  color: inherit;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  text-transform: capitalize;
  cursor: pointer;
}

.tv-pills button.is-active {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--fg-inverse);
}

.tv-pills__count {
  font-size: 11px;
  color: var(--fg-3);
}

.tv-pills button.is-active .tv-pills__count {
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Кръгли стрелки и точки на слайдера в hero (изключение за кръг) ───── */
.tv-hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border-thin) solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-circle);
  background: rgba(0, 0, 0, 0.28);
  color: var(--fg-inverse);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color var(--duration-base) ease;
}

.tv-hero-slider__arrow:hover,
.tv-hero-slider__arrow.is-hover {
  background: rgba(0, 0, 0, 0.55);
}

.tv-hero-slider__arrow--prev {
  left: 18px;
}

.tv-hero-slider__arrow--next {
  right: 18px;
}

.tv-hero-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tv-hero-slider__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: var(--border-thin) solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.tv-hero-slider__dots button.is-active {
  background: var(--color-white);
}

@media (max-width: 1024px) {
  .tv-offer-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .tv-offer-grid--3,
  .tv-offer-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tv-card__title {
    font-size: 18px;
  }
  .tv-card__meta {
    font-size: 10px;
  }
  .tv-card__price .t-price__current {
    font-size: 13px;
  }
}
@media (max-width: 359px) {
  .tv-offer-grid--3,
  .tv-offer-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* =============================================================================
   BlogArticle - hero на статия (bl-hero), текст (bl-prose + t-prose),
   карти в листинга (tv-card с tv-card__media--wide и __excerpt) и филтър по
   категория (tv-pills от TravelCard - остри ъгли, решение 26.09.2026).
   Без снимка: bg-placeholder, без цветни тонове.
   ============================================================================= */
.bl-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 46vh;
  margin-bottom: 36px;
  overflow: hidden;
  background: var(--bg-placeholder);
}

.bl-hero__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затъмняване отдолу - белият текст се чете върху всяка снимка. */
.bl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.3));
}

.bl-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 44px;
  color: var(--fg-inverse);
}

/* Трасето е каноничният breadcrumb, тук върху снимка: бяло вместо fg-3/fg-1. */
.bl-hero__crumbs {
  padding: 22px 0;
}

.bl-hero__crumbs .breadcrumb__list,
.bl-hero__crumbs .breadcrumb__item > a {
  color: rgba(255, 255, 255, 0.85);
}

.bl-hero__crumbs .breadcrumb__item + .breadcrumb__item::before {
  color: rgba(255, 255, 255, 0.5);
}

.bl-hero__crumbs .breadcrumb__item > a:hover,
.bl-hero__crumbs .breadcrumb__item > a.is-hover,
.bl-hero__crumbs .breadcrumb__item:last-child > a,
.bl-hero__crumbs .breadcrumb__item:last-child > span {
  color: var(--fg-inverse);
}

.bl-hero__eyebrow {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-inverse);
}

.bl-hero__title {
  max-width: 18ch;
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.05;
}

.bl-hero__meta {
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.92;
}

/* Текстът на статията (HTML от CKEditor). Шрифтът идва от t-prose. */
.bl-prose {
  max-width: 720px;
  margin: 0 auto;
  color: var(--fg-2);
}

.bl-prose > :first-child {
  margin-top: 0;
}

.bl-prose p {
  margin: 0 0 22px;
}

.bl-prose h2 {
  margin: 40px 0 14px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--fg-1);
}

.bl-prose h3 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg-1);
}

.bl-prose a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--duration-base) ease;
}

.bl-prose a:hover {
  color: var(--color-red);
}

.bl-prose ul,
.bl-prose ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.bl-prose li {
  margin: 6px 0;
}

.bl-prose blockquote {
  margin: 28px 0;
  padding: 6px 0 6px 22px;
  border-left: var(--border-strong-w) solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.4;
  color: var(--fg-1);
}

.bl-prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: 28px 0;
}

.bl-prose figure {
  margin: 28px 0;
}

.bl-prose figure img {
  margin: 0;
}

.bl-prose figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--fg-3);
}

.bl-prose hr {
  margin: 36px 0;
  border: 0;
  border-top: var(--border-thin) solid var(--color-grey3);
}

.bl-prose strong {
  color: var(--fg-1);
}

.bl-related {
  padding-top: 56px;
}

.bl-article__foot {
  padding-top: 40px;
  padding-bottom: 64px;
  font-size: 13px;
}

.bl-article__foot a {
  color: var(--fg-1);
  text-decoration: none;
}

@media (max-width: 768px) {
  .bl-hero {
    min-height: 38vh;
  }
  .bl-hero__title {
    font-size: 40px;
  }
  .bl-prose h2 {
    font-size: 28px;
  }
  .bl-prose h3 {
    font-size: 20px;
  }
  .bl-prose blockquote {
    font-size: 20px;
  }
}
/* =============================================================================
   LoyaltySteps - trendo & friends (.tf-page)
   Нивата (10% / 20%) и стъпките (01-02-03) с големите цифри 120px
   (t-display-120, тегло 300). Токените --tf-* са копия на основните.
   ============================================================================= */
.tf-page {
  background: var(--bg-app);
  color: var(--fg-2);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.tf-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.tf-eyebrow--muted {
  color: var(--fg-3);
}

.tf-eyebrow--dark {
  color: rgba(255, 255, 255, 0.55);
}

.tf-eyebrow--centered {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.tf-eyebrow__rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--fg-1);
}

/* ─── Hero: марката и нивата ─────────────────────────────────────────── */
.tf-hero {
  position: relative;
  width: 100%;
  padding: 140px 0 120px;
  overflow: hidden;
  text-align: center;
  background: var(--bg-app);
}

/* Декоративен знак „&“ зад текста (графика, не текст). */
.tf-hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 900px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.035);
  pointer-events: none;
  user-select: none;
}

.tf-hero__inner {
  position: relative;
  z-index: 1;
  width: var(--wrapper-pct);
  max-width: var(--wrapper-large);
  margin: 0 auto;
}

.tf-wordmark {
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 120px;
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.tf-wordmark i {
  font-style: italic;
  font-weight: 300;
  opacity: 0.85;
}

.tf-tiers {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 80px;
  margin-top: 64px;
}

.tf-tier {
  text-align: center;
}

.tf-tier__pct {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.tf-tier__label {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.tf-tier__divider {
  width: 1px;
  background: var(--fg-1);
  opacity: 0.25;
}

.tf-tier__or {
  display: none;
  align-self: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  color: var(--fg-1);
  opacity: 0.6;
}

.tf-tier--accent .tf-tier__pct {
  color: var(--color-red);
}

.tf-disclaimer {
  margin: 48px 0 0;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.3px;
  color: var(--fg-1);
  opacity: 0.65;
}

/* ─── Как работи: три стъпки ─────────────────────────────────────────── */
.tf-steps {
  padding: 40px 0 140px;
}

.tf-steps__inner {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-large);
  margin: 0 auto;
}

.tf-steps__head {
  margin-bottom: 100px;
  text-align: center;
}

.tf-steps__head .tf-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
}

.tf-steps__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--fg-1);
}

.tf-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) 60px minmax(0, 1fr);
  align-items: center;
}

.tf-step {
  text-align: center;
}

.tf-step__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 120px;
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.tf-step__kicker {
  margin: 24px 0 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-1);
}

.tf-step__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--fg-1);
}

.tf-step__body {
  max-width: 280px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.2px;
  color: var(--fg-2);
}

.tf-step__arrow {
  display: flex;
  justify-content: center;
  color: var(--fg-1);
  opacity: 0.4;
}

.tf-step__arrow svg {
  display: block;
}

.tf-step--accent .tf-step__num,
.tf-step--accent .tf-step__kicker {
  color: var(--color-red);
}

@media (max-width: 1200px) {
  .tf-hero {
    padding: 100px 0 90px;
  }
  .tf-hero__watermark {
    font-size: 640px;
  }
  .tf-steps__title {
    font-size: 48px;
  }
}
@media (max-width: 768px) {
  .tf-hero {
    padding: 60px 0 50px;
  }
  .tf-hero__watermark {
    font-size: 360px;
  }
  .tf-wordmark {
    font-size: 72px;
  }
  .tf-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
  }
  .tf-eyebrow__rule {
    width: 22px;
  }
  .tf-tiers {
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
  }
  .tf-tier__label {
    font-size: 12px;
    letter-spacing: 1.6px;
  }
  .tf-tier__divider {
    display: none;
  }
  .tf-tier__or {
    display: block;
  }
  .tf-disclaimer {
    margin-top: 32px;
    padding: 0 16px;
  }
  .tf-steps {
    padding: 30px 0 100px;
  }
  .tf-steps__head {
    margin-bottom: 60px;
  }
  .tf-steps__title {
    font-size: 40px;
  }
  .tf-steps__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
  }
  .tf-step__arrow {
    display: none;
  }
}
@media (max-width: 480px) {
  .tf-wordmark {
    font-size: 48px;
  }
  .tf-tier__pct {
    font-size: 96px;
  }
}
/* =============================================================================
   Скинове - тематичните лендинги и редакционните страници
   LandingHero, LandingSections, TwoWorlds, Lookbook, TravelCard, BlogArticle,
   LoyaltySteps.

   Източници (apps3):
   - scss/ui-components/_landing-foundations.scss   (секции, hero, плочки, value props)
   - scss/ui-components/_landing-dresses-skin.scss  (.brand-dresses)
   - scss/ui-components/_landing-intimate-skin.scss (.brand-intimate, .tier-after-dark,
                                                    „Два свята“)
   - scss/ui-components/_landing-lookbook.scss      (лукбук, hotspots, shop the look)
   - scss/ui-components/_travel.scss                (.tv - Пътувания)
   - scss/ui-components/_blog.scss                  (.bl-* - блог)
   - scss/layout/_layout.scss, ред 806-1612         (#landing_lp.tf-page - trendo & friends)
   - templates/landingpage/category_landing.html, sections/*.html, _tile.html,
     lookbook_page.html, trendo_friends.html; templates/travel/*.html;
     templates/blog/*.html
   - design-system/ui_kits/web/DressesPrimitives.jsx, IntimatePrimitives.jsx,
     PatuvaniaPrimitives.jsx

   Как работят скиновете: .brand-dresses и .brand-intimate (на <main>) задават
   генеричните --d-* от токените dresses-*, ev-* и ad-*. Всички секции четат
   само --d-*, затова една и съща маркировка се преоблича без нови правила.
   Canon: един display шрифт (Cormorant Infant, истински курсив), размери само
   от скалата, ъгли 0, бутоните са ds-btn (в скина тъмният бутон е бордо).
   Места без снимка (решение 26.09.2026): един неутрален фон --d-placeholder -
   bg-placeholder, в After Dark ad-surface-2. Цветни тонове ([data-tone]) няма.
   ============================================================================= */
/* ─── Скин токени ─────────────────────────────────────────────────────────── */
.brand-dresses {
  --d-bg: var(--dresses-bg);
  --d-bg-deep: var(--dresses-bg-deep);
  --d-rose: var(--dresses-rose);
  --d-rose-soft: var(--dresses-rose-soft);
  --d-deep: var(--dresses-deep);
  --d-deep-ink: var(--dresses-deep-ink);
  --d-text: var(--dresses-text);
  --d-muted: var(--dresses-muted);
  --d-line: var(--dresses-line);
  --d-placeholder: var(--bg-placeholder);
  --d-display: var(--font-display);
  --d-display-weight: 400;
  --d-display-tracking: -0.01em;
  background: var(--d-bg);
  color: var(--d-text);
}

/* „Бельо“: по подразбиране светът Everyday. */
.brand-intimate {
  --d-bg: var(--ev-bg);
  --d-bg-deep: var(--ev-bg-deep);
  --d-rose: var(--ev-blush);
  --d-rose-soft: var(--ev-blush-soft);
  --d-deep: var(--ev-deep);
  --d-deep-ink: var(--ev-deep-ink);
  --d-text: var(--ev-text);
  --d-muted: var(--ev-muted);
  --d-line: var(--ev-line);
  --d-placeholder: var(--bg-placeholder);
  --d-display: var(--font-display);
  --d-display-weight: 400;
  --d-display-tracking: -0.01em;
  background: var(--d-bg);
  color: var(--d-text);
}

/* After Dark (изданието е с 18+): същите --d-*, но от ad-*. */
.brand-intimate.tier-after-dark {
  --d-bg: var(--ad-bg);
  --d-bg-deep: var(--ad-surface);
  --d-rose: var(--ad-accent);
  --d-rose-soft: var(--ad-accent-deep);
  --d-deep: var(--ad-highlight);
  --d-deep-ink: var(--ad-text);
  --d-text: var(--ad-text);
  --d-muted: var(--ad-muted);
  --d-line: var(--ad-line);
  --d-placeholder: var(--ad-surface-2);
}

/* ─── Бутони в скин: ds-btn чете --d-* ──────────────────────────────────────
   landing-btn--primary -> ds-btn--dark (бордо, hover d-deep-ink)
   landing-btn--ghost   -> ds-btn--ghost (рамка d-deep)
   landing-btn--onDark  -> ds-btn--light (върху снимка)
   Червеният ds-btn--primary не се ползва в скин. */
:is(.brand-dresses, .brand-intimate) .ds-btn--dark {
  background: var(--d-deep);
  border-color: var(--d-deep);
  color: var(--d-bg);
}

:is(.brand-dresses, .brand-intimate) .ds-btn--dark:hover,
:is(.brand-dresses, .brand-intimate) .ds-btn--dark:active,
:is(.brand-dresses, .brand-intimate) .ds-btn--dark.is-hover {
  background: var(--d-deep-ink);
  border-color: var(--d-deep-ink);
  color: var(--d-bg);
}

:is(.brand-dresses, .brand-intimate) .ds-btn--ghost {
  background: transparent;
  border-color: var(--d-deep);
  color: var(--d-deep);
}

:is(.brand-dresses, .brand-intimate) .ds-btn--ghost:hover,
:is(.brand-dresses, .brand-intimate) .ds-btn--ghost:active,
:is(.brand-dresses, .brand-intimate) .ds-btn--ghost.is-hover {
  background: var(--d-deep);
  border-color: var(--d-deep);
  color: var(--d-bg);
}

:is(.brand-dresses, .brand-intimate) .ds-btn--light {
  background: transparent;
  border-color: var(--d-bg);
  color: var(--d-bg);
}

:is(.brand-dresses, .brand-intimate) .ds-btn--light:hover,
:is(.brand-dresses, .brand-intimate) .ds-btn--light:active,
:is(.brand-dresses, .brand-intimate) .ds-btn--light.is-hover {
  background: var(--d-bg);
  border-color: var(--d-bg);
  color: var(--d-deep);
}

/* After Dark: вино за основния бутон, злато за рамките. */
.brand-intimate.tier-after-dark .ds-btn--dark {
  background: var(--ad-accent);
  border-color: var(--ad-accent);
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .ds-btn--dark:hover,
.brand-intimate.tier-after-dark .ds-btn--dark:active,
.brand-intimate.tier-after-dark .ds-btn--dark.is-hover {
  background: var(--ad-accent-deep);
  border-color: var(--ad-accent-deep);
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .ds-btn--light {
  border-color: var(--ad-highlight);
  color: var(--ad-highlight);
}

.brand-intimate.tier-after-dark .ds-btn--light:hover,
.brand-intimate.tier-after-dark .ds-btn--light.is-hover {
  background: var(--ad-highlight);
  border-color: var(--ad-highlight);
  color: var(--ad-bg);
}

/* Изключен бутон в скин - сив като навсякъде, и при hover (и в After Dark). */
:is(.brand-dresses, .brand-intimate, .brand-intimate.tier-after-dark) .ds-btn:is(:disabled, .is-disabled) {
  background: var(--color-grey3);
  border-color: var(--color-grey3);
  color: var(--color-white);
}

/* Текстов линк в скин („Виж всички →“, CTA в editorial split). */
.landing-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--d-deep, var(--fg-1));
  text-decoration: none;
  border-bottom: var(--border-thin) solid currentColor;
  transition: color var(--duration-base) ease;
}

.landing-link:hover,
.landing-link.is-hover {
  color: var(--d-rose, var(--fg-3));
}

.brand-intimate.tier-after-dark .landing-link:hover,
.brand-intimate.tier-after-dark .landing-link.is-hover {
  color: var(--ad-text);
}

/* =============================================================================
   LandingHero - landing-hero
   Три варианта: --photo (снимка на цял екран, панел отгоре), --split (снимка
   1.2fr | панел 1fr), --typographic (центрирано заглавие 120px + лента снимка).
   Заглавие: Cormorant italic 96px (92 -> 96), typographic 120px (132 -> 120).
   ============================================================================= */
.landing-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  background: var(--d-bg, var(--bg-app));
  color: var(--d-deep, var(--fg-1));
}

.landing-hero__media {
  position: absolute;
  inset: 0;
  background: var(--d-placeholder, var(--bg-placeholder)) center/cover no-repeat;
}

.landing-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
}

.landing-hero__panel {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 80px 64px;
}

.landing-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--d-muted, var(--fg-3));
}

.landing-hero__eyebrow-lead {
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.landing-hero__title {
  margin: 0 0 14px;
  font-family: var(--d-display, var(--font-display));
  font-style: italic;
  font-weight: var(--d-display-weight, 400);
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--d-deep, var(--fg-1));
  text-wrap: balance;
}

.landing-hero__sub {
  max-width: 480px;
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.landing-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* photo - снимката е фон, текстът е светъл */
.landing-hero--photo .landing-hero__title,
.landing-hero--photo .landing-hero__sub,
.landing-hero--photo .landing-hero__eyebrow {
  color: var(--d-bg, var(--fg-inverse));
}

/* split - снимка вляво (1.2fr), панел вдясно (1fr) */
.landing-hero--split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
}

.landing-hero--split .landing-hero__media {
  position: relative;
}

.landing-hero--split .landing-hero__panel {
  align-self: center;
}

/* typographic - без снимка отзад; голямо центрирано заглавие */
.landing-hero--typographic {
  display: block;
  min-height: 0;
  padding: 90px 0 0;
  text-align: center;
}

.landing-hero--typographic .landing-hero__panel {
  max-width: none;
}

.landing-hero--typographic .landing-hero__title {
  max-width: 1100px;
  margin: 24px auto;
  font-size: 120px;
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.landing-hero--typographic .landing-hero__sub {
  margin-left: auto;
  margin-right: auto;
}

.landing-hero--typographic .landing-hero__ctas {
  justify-content: center;
}

.landing-hero__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.landing-hero__strip-item {
  height: 360px;
  background: var(--d-placeholder, var(--bg-placeholder)) center/cover no-repeat;
}

/* „Подсказка за скрол“ (After Dark hero) */
.landing-hero__scroll-cue {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ad-text) 55%, transparent);
}

.landing-hero__scroll-cue-lead {
  flex: none;
  width: 32px;
  height: 1px;
  background: currentColor;
}

/* After Dark: редакционно hero - долу подравнено, по-тежко затъмняване */
.brand-intimate.tier-after-dark .landing-hero {
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .landing-hero__title {
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .landing-hero__eyebrow {
  color: var(--ad-highlight);
}

.brand-intimate.tier-after-dark .landing-hero--typographic .landing-hero__title {
  color: var(--ad-highlight);
}

.brand-intimate.tier-after-dark .landing-hero--photo {
  min-height: 680px;
  align-items: flex-end;
}

.brand-intimate.tier-after-dark .landing-hero--photo .landing-hero__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.92) 100%);
}

.brand-intimate.tier-after-dark .landing-hero--photo .landing-hero__panel {
  max-width: 820px;
  padding-bottom: 90px;
}

.brand-intimate.tier-after-dark .landing-hero--photo .landing-hero__eyebrow {
  color: var(--ad-highlight);
}

.brand-intimate.tier-after-dark .landing-hero--photo .landing-hero__title {
  font-size: 120px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .landing-hero--photo .landing-hero__sub {
  color: color-mix(in srgb, var(--ad-text) 78%, transparent);
}

@media (max-width: 768px) {
  .landing-hero__panel {
    padding: 48px 24px;
  }
  .landing-hero__title {
    font-size: 48px;
  }
  .landing-hero--split {
    grid-template-columns: 1fr;
  }
  .landing-hero--split .landing-hero__media {
    aspect-ratio: 4/5;
  }
  .landing-hero--typographic .landing-hero__title {
    font-size: 56px;
  }
  .brand-intimate.tier-after-dark .landing-hero--photo .landing-hero__title {
    font-size: 56px;
  }
}
@media (max-width: 480px) {
  .landing-hero__title,
  .landing-hero--typographic .landing-hero__title,
  .brand-intimate.tier-after-dark .landing-hero--photo .landing-hero__title {
    font-size: 40px;
  }
}
/* =============================================================================
   LandingSections - секциите на лендинга
   Атоми (landing-section, __head, __eyebrow, __title), плочки (landing-tile),
   value props, продуктова решетка (ds-card) и идеи за стилизиране.
   ============================================================================= */
.landing-section {
  padding: 80px 0;
  background: var(--d-bg, var(--bg-app));
  color: var(--d-text, var(--fg-2));
}

.landing-section__inner {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}

.landing-section__head {
  padding-bottom: 32px;
  margin-bottom: 36px;
  border-bottom: var(--border-thin) solid var(--d-line, var(--color-grey3));
}

.landing-section__head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.landing-section__head--center {
  text-align: center;
}

.landing-section__head--center .landing-section__eyebrow {
  justify-content: center;
}

.landing-section__head--center .landing-section__sub {
  margin-left: auto;
  margin-right: auto;
}

.landing-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--d-muted, var(--fg-3));
}

.landing-section__eyebrow > span {
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.landing-section__title {
  margin: 0;
  font-family: var(--d-display, var(--font-display));
  font-style: italic;
  font-weight: var(--d-display-weight, 400);
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: var(--d-display-tracking, -0.01em);
  color: var(--d-deep, var(--fg-1));
  text-wrap: balance;
}

.landing-section__sub,
.landing-section__body {
  max-width: 520px;
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--d-text, var(--fg-2));
}

/* ─── Плочки (section type „tiles“) ───────────────────────────────────── */
.landing-tiles__grid {
  display: grid;
  gap: 24px;
}

.landing-tiles__grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-tiles__grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-tiles__grid[data-cols="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.landing-tiles__grid[data-cols="6"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

/* Асиметрична решетка (Everyday): 4 колони, широките плочки заемат 2. */
.landing-tiles__grid[data-grid=asymmetric] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.landing-tiles__grid[data-grid=asymmetric] .landing-tile[data-span="2"] {
  grid-column: span 2;
}

t-landing-tile {
  display: contents;
}

.landing-tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.landing-tile[data-ratio="4/5"] {
  aspect-ratio: 4/5;
}

.landing-tile[data-ratio="1/1"] {
  aspect-ratio: 1/1;
}

.landing-tile[data-ratio="3/4"] {
  aspect-ratio: 3/4;
}

.landing-tile[data-ratio="16/9"] {
  aspect-ratio: 16/9;
}

.landing-tile[data-ratio="8/5"] {
  aspect-ratio: 8/5;
}

.landing-tile__image {
  position: absolute;
  inset: 0;
  background: var(--d-placeholder, var(--bg-placeholder)) center/cover no-repeat;
  transition: transform 0.6s ease;
}

.landing-tile:hover .landing-tile__image,
.landing-tile.is-hover .landing-tile__image {
  transform: scale(1.04);
}

/* Затъмняване отдолу („преливаща фаша“) - силата идва от data-scrim. */
.landing-tile__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 24%, rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0) 68%);
}

.landing-tile__overlay[data-scrim=soft] {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.22) 26%, rgba(0, 0, 0, 0) 56%);
}

.landing-tile__overlay[data-scrim=strong] {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.64) 18%, rgba(0, 0, 0, 0.32) 38%, rgba(0, 0, 0, 0.08) 58%, rgba(0, 0, 0, 0) 76%);
}

.landing-tile__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  color: var(--d-bg, var(--fg-inverse));
}

.landing-tile__sub {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--d-bg, var(--fg-inverse)) 78%, transparent);
}

.landing-tile__label {
  margin: 0 0 8px;
  font-family: var(--d-display, var(--font-display));
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: inherit;
}

.landing-tile__phrase {
  max-width: 280px;
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: color-mix(in srgb, var(--d-bg, var(--fg-inverse)) 85%, transparent);
}

.landing-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: var(--border-thin) solid currentColor;
  opacity: 0.85;
  transition: opacity var(--duration-base) ease;
}

.landing-tile:hover .landing-tile__cta,
.landing-tile.is-hover .landing-tile__cta {
  opacity: 1;
}

/* Асиметрична решетка: по-големи отстъпи и етикет 40/48px. */
.landing-tiles__grid[data-grid=asymmetric] .landing-tile__caption {
  left: 28px;
  right: 28px;
  bottom: 28px;
}

.landing-tiles__grid[data-grid=asymmetric] .landing-tile__phrase {
  max-width: 320px;
}

.landing-tiles__grid[data-grid=asymmetric] .landing-tile[data-span="2"] .landing-tile__label {
  font-size: 48px;
}

/* ─── Value props („Защо Trendo Dresses“) ─────────────────────────────── */
.landing-value-props {
  text-align: center;
  background: var(--d-bg-deep, var(--bg-muted));
}

.landing-value-props__grid {
  display: grid;
  gap: 48px;
  margin-top: 20px;
}

.landing-value-props__grid[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-value-props__grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-value-props__grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-value-props__item {
  padding: 0 12px;
  text-align: center;
}

.landing-value-props__number {
  margin-bottom: 18px;
  font-family: var(--d-display, var(--font-display));
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--d-rose, var(--fg-3));
}

.landing-value-props__heading {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--d-deep, var(--fg-1));
}

.landing-value-props__body {
  max-width: 300px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--d-text, var(--fg-2));
}

/* ─── Продуктова решетка: ds-card в 3 или 4 колони ──────────────────────
   Картата не се преоблича от скина: цената с намаление е червена
   (color-sale) и в „Рокли“, цените са само в евро (решения 26.09.2026). */
.landing-product-grid__grid {
  display: grid;
  gap: 40px 24px;
}

.landing-product-grid__grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-product-grid__grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ─── Идеи за стилизиране (журнал) ───────────────────────────────────── */
.landing-styling-ideas {
  background: var(--d-bg-deep, var(--bg-muted));
}

.landing-styling-ideas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.landing-styling-ideas__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: inherit;
  text-decoration: none;
}

.landing-styling-ideas__card-image {
  aspect-ratio: 4/3;
  background: var(--d-placeholder, var(--bg-placeholder)) center/cover no-repeat;
}

.landing-styling-ideas__card-cat {
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--d-muted, var(--fg-3));
}

.landing-styling-ideas__card h3 {
  margin: 0 0 10px;
  font-family: var(--d-display, var(--font-display));
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--d-deep, var(--fg-1));
}

.landing-styling-ideas__card-read {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--d-muted, var(--fg-3));
}

/* ─── After Dark: секции ──────────────────────────────────────────────── */
.brand-intimate.tier-after-dark .landing-section__eyebrow {
  color: var(--ad-highlight);
}

.brand-intimate.tier-after-dark .landing-section__title {
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .landing-section__sub,
.brand-intimate.tier-after-dark .landing-section__body {
  color: var(--ad-muted);
}

.brand-intimate.tier-after-dark .landing-tile__caption {
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .landing-tile__sub,
.brand-intimate.tier-after-dark .landing-tile__cta {
  color: var(--ad-highlight);
}

.brand-intimate.tier-after-dark .landing-value-props__number {
  color: var(--ad-accent);
}

.brand-intimate.tier-after-dark .landing-value-props__heading {
  color: var(--ad-text);
}

.brand-intimate.tier-after-dark .landing-value-props__body,
.brand-intimate.tier-after-dark .landing-styling-ideas__card-read {
  color: var(--ad-muted);
}

.brand-intimate.tier-after-dark .landing-styling-ideas__card-cat {
  color: var(--ad-highlight);
}

.brand-intimate.tier-after-dark .landing-styling-ideas__card h3 {
  color: var(--ad-text);
}

@media (max-width: 768px) {
  .landing-section {
    padding: 48px 0;
  }
  .landing-section__inner {
    width: 92%;
  }
  .landing-section__head {
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .landing-section__title {
    font-size: 40px;
  }
  .landing-section__sub {
    font-size: 13px;
  }
  .landing-tiles__grid[data-cols="3"],
  .landing-tiles__grid[data-cols="4"],
  .landing-tiles__grid[data-cols="5"],
  .landing-tiles__grid[data-grid=asymmetric] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .landing-tiles__grid[data-cols="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .landing-tiles__grid[data-grid=asymmetric] .landing-tile[data-span="2"] {
    aspect-ratio: 4/5;
  }
  .landing-tile__caption,
  .landing-tiles__grid[data-grid=asymmetric] .landing-tile__caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
  .landing-tile__label,
  .landing-tiles__grid[data-grid=asymmetric] .landing-tile[data-span="2"] .landing-tile__label {
    font-size: 28px;
  }
  .landing-tile__phrase {
    font-size: 12px;
  }
  .landing-tile__sub {
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 1.6px;
  }
  .landing-value-props__grid[data-cols] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }
  .landing-value-props__number {
    font-size: 40px;
  }
  .landing-value-props__body {
    font-size: 12px;
  }
  .landing-product-grid__grid[data-cols] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }
  .landing-styling-ideas__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .landing-section {
    padding: 40px 0;
  }
  .landing-tiles__grid[data-cols],
  .landing-tiles__grid[data-grid=asymmetric] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .landing-tile__label,
  .landing-tiles__grid[data-grid=asymmetric] .landing-tile[data-span="2"] .landing-tile__label {
    font-size: 24px;
  }
  .landing-value-props__grid[data-cols] {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
/* =============================================================================
   TwoWorlds - landing-two-worlds („Два свята“ на „Бельо“)
   50/50: Everyday (крем, бордо) | After Dark (меко черно, злато, 18+).
   Снимката е фон на панела; отдолу затъмняване в цвета на света.
   ============================================================================= */
.landing-two-worlds {
  padding: 0;
  background: var(--ev-bg);
}

.landing-two-worlds__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 680px;
}

.landing-two-worlds__panel {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.landing-two-worlds__panel--everyday {
  background: var(--ev-bg);
  color: var(--ev-text);
}

.landing-two-worlds__panel--after-dark {
  background: var(--ad-bg);
  color: var(--ad-text);
}

/* Без снимка: bg-placeholder в Everyday, ad-surface-2 в After Dark. */
.landing-two-worlds__panel--after-dark {
  --d-placeholder: var(--ad-surface-2);
}

.landing-two-worlds__media {
  position: absolute;
  inset: 0;
  background-color: var(--d-placeholder, var(--bg-placeholder));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform var(--duration-slow) ease;
}

.landing-two-worlds__panel:hover .landing-two-worlds__media,
.landing-two-worlds__panel.is-hover .landing-two-worlds__media {
  transform: scale(1.03);
}

.landing-two-worlds__overlay {
  position: absolute;
  inset: 0;
}

.landing-two-worlds__panel--everyday .landing-two-worlds__overlay {
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--ev-bg) 85%, transparent) 100%);
}

.landing-two-worlds__panel--after-dark .landing-two-worlds__overlay {
  background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--ad-bg) 92%, transparent) 100%);
}

.landing-two-worlds__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 680px;
  padding: 80px 64px;
}

.landing-two-worlds__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.landing-two-worlds__panel--everyday .landing-two-worlds__kicker {
  color: var(--ev-deep);
}

.landing-two-worlds__panel--after-dark .landing-two-worlds__kicker {
  color: var(--ad-highlight);
}

.landing-two-worlds__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.landing-two-worlds__panel--everyday .landing-two-worlds__title {
  color: var(--ev-deep);
}

.landing-two-worlds__panel--after-dark .landing-two-worlds__title {
  color: var(--ad-text);
}

.landing-two-worlds__body {
  max-width: 420px;
  margin: 0 0 26px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.landing-two-worlds__panel--everyday .landing-two-worlds__body {
  color: var(--ev-text);
}

.landing-two-worlds__panel--after-dark .landing-two-worlds__body {
  color: color-mix(in srgb, var(--ad-text) 78%, transparent);
}

.landing-two-worlds__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: var(--border-thin) solid currentColor;
}

.landing-two-worlds__panel--everyday .landing-two-worlds__cta {
  color: var(--ev-deep);
}

.landing-two-worlds__panel--after-dark .landing-two-worlds__cta {
  color: var(--ad-highlight);
}

@media (max-width: 768px) {
  .landing-two-worlds__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .landing-two-worlds__panel {
    min-height: 480px;
  }
  .landing-two-worlds__content {
    min-height: 480px;
    padding: 48px 24px;
  }
  .landing-two-worlds__title {
    font-size: 56px;
    line-height: 0.95;
  }
  .landing-two-worlds__body {
    max-width: none;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .landing-two-worlds__title {
    font-size: 48px;
  }
}
/* =============================================================================
   Lookbook - lookbook-hero, look-*__stage с точки (look-hotspot),
   look-caption-row и панелът „Shop the look“.
   ============================================================================= */
.lookbook-hero {
  position: relative;
  min-height: 680px;
  background: var(--d-placeholder, var(--bg-placeholder)) center/cover no-repeat;
  color: var(--d-bg, var(--fg-inverse));
}

.lookbook-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
}

.lookbook-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  max-width: 1400px;
  min-height: 680px;
  margin: 0 auto;
  padding: 72px 64px;
}

.lookbook-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--d-bg, var(--fg-inverse)) 85%, transparent);
}

.lookbook-hero__title {
  max-width: 920px;
  margin: 0 0 18px;
  font-family: var(--d-display, var(--font-display));
  font-style: italic;
  font-weight: 400;
  font-size: 96px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lookbook-hero__subtitle {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--d-bg, var(--fg-inverse)) 85%, transparent);
}

.lookbook-hero__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--d-bg, var(--fg-inverse)) 70%, transparent);
}

/* ─── Визии (looks) ──────────────────────────────────────────────────────
   Сцената пази пропорцията на снимката (решение 26.09.2026): aspect-ratio
   идва inline от ширината и височината на снимката, височина в px няма.
   Така снимката не се реже на тесен екран и точките (left/top в %) остават
   върху продукта. Стойностите тук са резерва, ако размерите липсват. */
.lookbook-look {
  padding: 40px 0;
}

.look-fullbleed__stage,
.look-centered__stage {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  aspect-ratio: 1400/720;
  background: var(--d-placeholder, var(--bg-placeholder)) center/cover no-repeat;
}

.look-centered__stage {
  max-width: 980px;
  aspect-ratio: 980/660;
}

.look-caption-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 32px;
  max-width: var(--wrapper-max);
  margin: 24px auto 0;
  padding: 0 24px;
  color: var(--d-text, var(--fg-1));
}

.look-caption-row__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.look-caption-row__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.look-caption-row__caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
  color: var(--d-muted, var(--fg-3));
}

/* ─── Точка върху снимката (hotspot) ──────────────────────────────────────
   Поле 36×36 за клик, видима точка 14px с „+“ и пулсиращ пръстен.
   Позицията идва от данните: left/top в % от снимката. */
.look-hotspot {
  position: absolute;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.look-hotspot__pulse {
  position: absolute;
  inset: 0;
  border: var(--border-thin) solid var(--d-bg, var(--color-white));
  border-radius: var(--radius-circle);
  animation: lookHotspotPulse 2s ease infinite;
}

.look-hotspot__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-circle);
  background: var(--d-bg, var(--color-white));
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--d-deep, var(--fg-1));
}

@keyframes lookHotspotPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .look-hotspot__pulse {
    animation: none;
  }
}
/* ─── Shop the look - панел отдолу при клик на точка ──────────────────── */
.shop-the-look {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--overlay);
}

.shop-the-look__sheet {
  width: min(540px, 92vw);
  padding: 28px 32px 36px;
  background: var(--d-bg, var(--bg-app));
  color: var(--d-text, var(--fg-1));
  box-shadow: var(--shadow-sheet);
  animation: shopSheetUp var(--duration-base) ease;
}

.shop-the-look__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.shop-the-look__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--d-muted, var(--fg-3));
}

.shop-the-look__close {
  margin: -8px -8px -8px 0;
  color: inherit;
}

.shop-the-look__body {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
}

.shop-the-look__image {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  background: var(--d-placeholder, var(--bg-placeholder));
}

.shop-the-look__brand {
  margin-bottom: 6px;
  font-family: var(--d-display, var(--font-display));
  font-style: italic;
  font-size: 14px;
  line-height: 1.2;
  color: var(--d-muted, var(--fg-3));
}

.shop-the-look__title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

/* Цената е само в евро (решение 26.09.2026). */
.shop-the-look__price {
  margin-bottom: 16px;
}

.shop-the-look__price .t-price__current {
  font-size: 18px;
}

@keyframes shopSheetUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .lookbook-hero {
    min-height: 480px;
  }
  .lookbook-hero__inner {
    min-height: 480px;
    padding: 48px 24px;
  }
  .lookbook-hero__title {
    font-size: 56px;
  }
  .lookbook-hero__credits {
    flex-direction: column;
    align-items: flex-start;
  }
  .look-caption-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .look-caption-row__caption {
    text-align: left;
  }
}
/* На телефон колоната до снимката е тясна: снимка 96px, бутонът на цялата
   ширина на колоната и може да е на 2 реда. */
@media (max-width: 640px) {
  .shop-the-look__body {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
  }
  .shop-the-look__info .ds-btn {
    width: 100%;
    padding: 8px 12px;
    white-space: normal;
  }
}
.header-content {
  display: contents;
}

.app-content {
  isolation: isolate;
}

/* Typography */
.text p {
  margin: 0 0 10px;
}
.text p:last-child {
  margin-bottom: 0;
}
.text .text > :last-child {
  margin-bottom: 0;
}
.text {
  /* floating images */
}
.text img {
  margin-bottom: 1.25em;
  max-width: 100%;
}
.center .text img {
  margin-left: auto;
  margin-right: auto;
}
.text img[style*="float: left"] {
  margin: 0.5em 1.25em 1.25em 0;
  max-width: 50%;
}
.text img[style*="float: right"] {
  margin: 0.5em 0 1.25em 1.25em;
  max-width: 50%;
}
@media (max-width: 480px) {
  .text img[style*="float: left"],
  .text img[style*="float: right"] {
    margin: 0 0em 1.25em 0;
    max-width: 100%;
    float: none !important;
  }
}
.text {
  /* end of floating images */
  /* Video embed */
}
.text .video-embed-wrapper {
  width: 50%;
  margin: 0.5em auto 1.25em auto;
}
.text .video-embed-wrapper--left {
  float: left;
  margin-right: 1.25em;
}
.text .video-embed-wrapper--right {
  float: right;
  margin-left: 1.25em;
}
.text .video-embed-wrapper--full {
  width: 100%;
}
.text .video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin: 0 auto;
}
.text .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.text {
  /* end of Video embed */
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.center {
  text-align: center !important;
}

.align-left {
  text-align: left !important;
}

.align-right {
  text-align: right !important;
}

.no-margin {
  margin: 0 !important;
}

.hidden {
  display: none !important;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* end of upgrade browser */
/* Print styles */
@media print {
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  a[href]:empty::before {
    content: attr(href);
  }
}
.ds-plp .banner_container {
  margin-bottom: var(--space-20);
}

.ds-plp .banner_container:not(:empty) {
  min-height: 120px;
}

.ds-plp .ds-plp-filters {
  min-height: 500px;
}

@media (min-width: 769px) {
  .ds-plp .ds-plp-filters.is-sticky {
    align-self: stretch;
  }
  .ds-plp .ds-plp-filters.is-sticky > .ds-plp-filters__rail {
    position: sticky;
    --sticky-gap-top: var(--space-24);
    --sticky-gap-bottom: var(--space-24);
    overflow-anchor: none;
  }
}
@media (max-width: 768px) {
  .ds-plp .ds-plp-toolbar--mobile {
    top: 61px;
  }
  html.is-scrolled .ds-plp .ds-plp-toolbar--mobile {
    top: 51px;
  }
}
.ds-plp t-releva-listing {
  display: block;
}

.ds-plp-grid--popular {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .ds-plp-grid--popular {
    margin-bottom: 6px;
  }
}
@media (max-width: 768px) {
  .ds-plp-guide .ds-carousel__nav-btn {
    display: none;
  }
}
@keyframes ds-plp-sheet-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ds-plp-filter-modal-window ~ .modal-backdrop,
.ds-plp-sort-modal-window ~ .modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  opacity: 1;
  animation: ds-plp-sheet-fade var(--duration-fast) ease;
}

.ds-plp-filter-modal-window .modal-dialog,
.ds-plp-sort-modal-window .modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0;
  pointer-events: none;
}

.ds-plp-filter-modal-window .modal-content,
.ds-plp-sort-modal-window .modal-content {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  pointer-events: auto;
}

.ds-plp-related {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: var(--space-8) auto var(--space-30);
  font-family: var(--font-sans);
}

.ds-plp-related__title {
  margin: 0 0 var(--space-12);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ds-plp-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-plp-related__link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-muted);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
  text-decoration: none;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.ds-plp-related__link:hover {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.ds-plp-related__link.is-current {
  font-weight: 500;
  color: var(--fg-1);
}

@media (max-width: 768px) {
  .ds-plp-related {
    width: auto;
    margin: var(--space-24) var(--gutter-mobile);
  }
}
.ds-plp .ds-plp-grid t-collection-redirect {
  display: block;
  width: 100%;
}

.ds-card__redirect {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  background: var(--bg-muted);
  border: var(--border-thin) solid var(--color-grey3);
  transition: border-color var(--duration-base) ease;
}

.ds-card--redirect:hover .ds-card__redirect {
  border-color: var(--border-strong);
}

.ds-card__redirect-title {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}

.ds-pdp-carousel {
  width: 100%;
  padding: 56px 0;
  border-top: 1px solid var(--color-grey3);
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ds-pdp-carousel {
    padding: 40px 0;
  }
}
.ds-pdp-carousel__inner {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}
.ds-pdp-carousel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: var(--space-30);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-grey3);
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .ds-pdp-carousel__header {
    gap: 16px;
    margin-bottom: 20px;
  }
}
.ds-pdp-carousel__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ds-pdp-carousel__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  line-height: 1;
}
.ds-pdp-carousel__eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--color-red);
}
.ds-pdp-carousel__title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ds-pdp-carousel__title {
    font-size: 24px;
  }
}
.ds-pdp-carousel__subtitle {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
  letter-spacing: 0.3px;
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}
.ds-pdp-carousel__arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media screen and (max-width: 480px) {
  .ds-pdp-carousel__arrows {
    display: none;
  }
}
.ds-pdp-carousel__arrow {
  width: 38px;
  height: 38px;
  background: var(--bg-app);
  border: 1px solid var(--fg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--duration-base) ease, color var(--duration-base) ease;
}
.ds-pdp-carousel__arrow:hover {
  background: var(--fg-1);
  color: var(--fg-inverse);
}
.ds-pdp-carousel__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}
.ds-pdp-carousel__arrow[disabled]:hover {
  background: var(--bg-app);
  color: var(--fg-1);
}
.ds-pdp-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ds-pdp-carousel__track::-webkit-scrollbar {
  display: none;
}
.ds-pdp-carousel__track > * {
  scroll-snap-align: start;
  min-width: 0;
}
.ds-pdp-carousel__progress {
  height: 1px;
  background: var(--color-grey3);
  position: relative;
}
.ds-pdp-carousel__progress-fill {
  position: absolute;
  top: -1px;
  height: 3px;
  background: var(--fg-1);
  width: 30%;
  left: 0;
  transition: left var(--duration-fast) ease;
}

.ds-pdp-carousel a:focus-visible,
.ds-pdp-carousel button:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.ds-pdp-carousel__cell {
  min-width: 0;
  scroll-snap-align: start;
}

.ds-pdp-carousel .ds-pdp-carousel__track.ds-product-rail {
  padding: 0;
}

body.ds-pdp-lightbox-open {
  overflow: hidden;
}

.modal--sided:has(.sizes) .modal__bg {
  background: var(--overlay);
}
.modal--sided:has(.sizes) .modal__cont {
  background: var(--bg-app);
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  max-width: 880px;
}

.ds-pdp-cls-reserve {
  width: 100%;
  background: transparent;
  pointer-events: none;
}

.ds-pdp-cls-reserve--outfit {
  min-height: 280px;
}
@media screen and (max-width: 768px) {
  .ds-pdp-cls-reserve--outfit {
    min-height: 220px;
  }
}

.ds-pdp-cls-reserve--carousels {
  min-height: 480px;
}
@media screen and (max-width: 768px) {
  .ds-pdp-cls-reserve--carousels {
    min-height: 400px;
  }
}

@media screen and (max-width: 768px) {
  .ds-pdp-carousel {
    padding: 32px 0;
  }
  .ds-pdp-carousel__inner {
    width: 100%;
    max-width: none;
    padding: 0 var(--space-16);
  }
  .modal.modal--sided.modal--large {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .modal.modal--sided.modal--large .modal__cont {
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 92vh;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform var(--duration-fast) ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal.modal--sided.modal--large .modal__cont::before {
    content: "";
    display: block;
    flex: none;
    width: 40px;
    height: 4px;
    background: var(--color-grey6);
    margin: 8px auto 0;
  }
  .modal.modal--sided.modal--large.is-visible .modal__cont {
    transform: translateY(0);
  }
  .modal.modal--sided.modal--large .sizes {
    padding: 20px 16px 24px;
    margin: 0;
    overflow-y: auto;
    flex: 1;
  }
  .modal.modal--sided.modal--large .sizes__header {
    margin-bottom: var(--space-16);
  }
  .modal.modal--sided.modal--large .sizes__title {
    font-size: 14px;
    justify-content: flex-start;
    padding-right: 0;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  .modal.modal--sided.modal--large .sizes__close {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .modal.modal--sided.modal--large .sizes__table {
    font-size: 12px;
  }
  .modal.modal--sided.modal--large .sizes__table th, .modal.modal--sided.modal--large .sizes__table td {
    padding: 8px 10px;
  }
}
.cart-page {
  background: var(--bg-app);
  font-family: var(--font-sans);
  color: var(--fg-2);
  padding-bottom: var(--space-90);
}
.cart-page__wrap {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}
.cart-page__header {
  border-bottom: 1px solid var(--color-grey3);
  padding: var(--space-40) 0 var(--space-24);
}
@media screen and (max-width: 768px) {
  .cart-page__header {
    padding: var(--space-24) 0 var(--space-16);
  }
}
.cart-page__breadcrumb {
  padding: 0;
  margin-bottom: 14px;
}
.cart-page__title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .cart-page__title {
    font-size: 28px;
  }
}
.cart-page__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-60);
  align-items: start;
  padding-top: 36px;
}
@media screen and (max-width: 1024px) {
  .cart-page__layout {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
}
@media screen and (max-width: 768px) {
  .cart-page__layout {
    padding-top: var(--space-24);
    gap: var(--space-30);
  }
}
.cart-page__main {
  min-width: 0;
}
.cart-page__aside {
  position: sticky;
  top: var(--space-24);
}
@media screen and (max-width: 1024px) {
  .cart-page__aside {
    position: static;
  }
}
.cart-page__shipping {
  background: var(--bg-muted);
  padding: 18px 22px;
  margin-bottom: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-page__shipping-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.cart-page__shipping-text {
  color: var(--fg-2);
}
.cart-page__shipping-text strong {
  color: var(--fg-1);
  font-weight: 600;
}
.cart-page__shipping-text--ok strong {
  color: var(--color-success);
}
.cart-page__shipping-courier {
  display: inline-block;
  height: 16px;
  width: auto;
  margin-left: 3px;
  vertical-align: middle;
}
.cart-page__shipping-bar {
  position: relative;
  height: 3px;
  background: var(--color-grey3);
  overflow: hidden;
}
.cart-page__shipping-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--bg-dark);
  transition: width var(--duration-base) ease;
}
.cart-page__delivery-split {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: var(--space-24);
  padding: 16px 18px;
  background: var(--bg-muted);
  border-left: 3px solid var(--fg-1);
}
.cart-page__delivery-split-icon {
  flex: none;
  color: var(--fg-1);
  line-height: 0;
  margin-top: 1px;
}
.cart-page__delivery-split-icon svg {
  display: block;
}
.cart-page__delivery-split-body {
  min-width: 0;
}
.cart-page__delivery-split-title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: 0.2px;
  line-height: 1.4;
}
.cart-page__delivery-split-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.55;
  letter-spacing: 0.2px;
}
.cart-page__delivery-split-text strong {
  color: var(--fg-1);
  font-weight: 600;
}
.cart-page__delivery-split-note {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.55;
  letter-spacing: 0.2px;
}
.cart-page__delivery-split-phone {
  color: var(--fg-1);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--fg-1);
  white-space: nowrap;
  transition: opacity var(--duration-base) ease;
}
.cart-page__delivery-split-phone:hover {
  opacity: 0.6;
}
.cart-page__items {
  margin: 0 0 var(--space-24);
}
.cart-page__items-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
  margin-bottom: var(--space-8);
}
.cart-page__items-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--fg-1);
}
.cart-page__items-count {
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.4px;
}
.cart-page__items-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-page__additional-shipping {
  margin: var(--space-16) 0 0;
  padding: var(--space-12) var(--space-16);
  background: var(--bg-muted);
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.5;
}
.cart-page__additional-shipping strong {
  color: var(--fg-1);
}
.cart-page__additional-shipping-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg-3);
}

@media screen and (max-width: 640px) {
  .cart-page {
    padding-bottom: 0;
  }
  .cart-page__wrap {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .cart-page__header {
    background: var(--bg-app);
    padding: 0;
    border-bottom: 1px solid var(--color-grey3);
  }
  .cart-page__header .cart-page__wrap {
    padding: 14px var(--space-16);
  }
  .cart-page__breadcrumb {
    display: none;
  }
  .cart-page__title {
    font-size: 18px;
    letter-spacing: 0.4px;
    line-height: 1.2;
  }
  .cart-page__shipping {
    padding: 14px var(--space-16);
    margin-bottom: 0;
    background: var(--bg-strip);
    border-bottom: 1px solid var(--color-grey3);
    gap: 8px;
  }
  .cart-page__shipping-row {
    font-size: 11px;
    letter-spacing: 0.3px;
  }
  .cart-page__shipping-text {
    color: var(--fg-1);
  }
  .cart-page__delivery-split {
    margin: 0;
    padding: 14px var(--space-16);
    gap: 12px;
    border-bottom: 1px solid var(--color-grey3);
  }
  .cart-page__layout {
    padding-top: 0;
    gap: 0;
  }
  .cart-page__main {
    min-width: 0;
  }
  .cart-page__items {
    margin: 0;
  }
  .cart-page__items-head {
    padding: var(--space-16) var(--space-16) var(--space-12);
    margin: 0;
    border-bottom: 1px solid var(--color-grey3);
  }
  .cart-page__items-title {
    font-size: 12px;
  }
  .cart-page__items-count {
    font-size: 11px;
  }
  .cart-page__additional-shipping {
    margin: 0;
    border-bottom: 1px solid var(--color-grey3);
  }
  .cart-page__aside .ds-summary__cta, .cart-page__aside .ds-summary__note, .cart-page__aside .ds-summary__continue {
    display: none;
  }
  .cart-page__mobile-cta {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--bg-app);
    padding: var(--space-16);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-grey3);
    box-shadow: var(--shadow-sheet);
  }
  .cart-page__checkout-mobile {
    width: 100%;
  }
}
@media screen and (min-width: 641px) {
  .cart-page__mobile-cta {
    display: none;
  }
  .is-mobile-only {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .is-desktop-only {
    display: none;
  }
}
t-checkout-couriers,
t-checkout-payment-methods,
t-checkout-multi-address-form,
t-checkout-single-address-form,
t-checkout-additional,
t-checkout-firm,
t-checkout-firm-single,
t-checkout-right-menu,
t-checkout-process,
t-autocomplete-select {
  display: block;
}

.checkout-page {
  --checkout-info-bg: var(--bg-notice);
  --checkout-info-border: var(--border-notice);
  --bg-selected: var(--bg-muted);
  --transition-fast: var(--duration-fast) ease;
  background: var(--bg-app);
  color: var(--fg-2);
  font-family: var(--font-sans);
  letter-spacing: normal;
  line-height: 1.2;
  padding-bottom: var(--space-90);
}
.checkout-page strong {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .checkout-page {
    padding-bottom: var(--space-60);
  }
}
.checkout-page__wrap {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}
.checkout-page__user-strip {
  background: var(--bg-selected);
  border-bottom: 1px solid var(--color-grey3);
  padding: var(--space-10) 0;
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
}
.checkout-page__user-strip--guest {
  background: var(--color-border);
  color: var(--color-white);
  border-bottom-color: transparent;
}
.checkout-page__user-strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.checkout-page__user-strip-name {
  color: var(--fg-1);
  font-weight: 600;
}
.checkout-page__user-strip--guest .checkout-page__user-strip-name {
  color: var(--color-white);
}
.checkout-page__user-strip-pill {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  margin-right: var(--space-10);
}
.checkout-page__user-strip-action {
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid var(--color-grey6);
  padding-bottom: 1px;
  cursor: pointer;
  margin-left: 6px;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.checkout-page__user-strip-action:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}
.checkout-page__user-strip--guest .checkout-page__user-strip-action {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
}
.checkout-page__user-strip--guest .checkout-page__user-strip-action:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}
.checkout-page__header {
  padding: 18px 0 30px;
}
@media screen and (max-width: 768px) {
  .checkout-page__header {
    padding: var(--space-20) 0 var(--space-24);
  }
}
.checkout-page__breadcrumb {
  padding: 0;
  margin-bottom: 28px;
}
.checkout-page__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.checkout-page__title {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .checkout-page__title {
    font-size: 28px;
  }
}
.checkout-page__back {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  border-bottom: 1px solid var(--color-grey6);
  padding-bottom: 1px;
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.checkout-page__back:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}
.checkout-page__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 50px;
  align-items: start;
  padding-bottom: 80px;
}
@media screen and (max-width: 1200px) {
  .checkout-page__layout {
    grid-template-columns: 1fr 340px;
    gap: var(--space-40);
  }
}
@media screen and (max-width: 1024px) {
  .checkout-page__layout {
    grid-template-columns: 1fr;
    gap: var(--space-30);
  }
}
@media screen and (max-width: 768px) {
  .checkout-page__layout {
    padding-bottom: var(--space-60);
  }
}
.checkout-page__main {
  min-width: 0;
}
.checkout-page__aside {
  position: sticky;
  top: var(--space-24);
}
@media screen and (max-width: 1024px) {
  .checkout-page__aside {
    position: static;
  }
}
.checkout-page__section {
  margin-bottom: 28px;
}
.checkout-page__section:last-of-type {
  margin-bottom: var(--space-24);
}
.checkout-page__section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
}
.checkout-page__section-num {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0.4px;
  padding-bottom: 1px;
  line-height: normal;
}
.checkout-page__section-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: normal;
}
.checkout-page .ds-field__hint.checkout-page__field-hint--full {
  width: calc(200% + 22px);
  max-width: none;
}
.checkout-page__field--autocomplete.is-error .form__element {
  border-bottom-color: var(--color-error);
}
.checkout-page__field--autocomplete.is-error .form__label, .checkout-page__field--autocomplete.is-error t-autocomplete-select:has(.form__element:placeholder-shown:not(:focus)) .form__label {
  color: var(--color-error);
}
.checkout-page .form__item .required {
  display: none;
}
.checkout-page__field--autocomplete t-autocomplete-select {
  display: block;
}
.checkout-page__field--autocomplete .form__label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fg-3);
  pointer-events: none;
  transform: none;
  margin: 0;
  z-index: 1;
  transition: all var(--duration-base) ease;
}
.checkout-page__field--autocomplete .form__label.hidden {
  display: block;
}
.checkout-page__field--autocomplete .form__element {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: var(--border-base) solid var(--border-input);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--fg-1);
  letter-spacing: 0.3px;
  padding: 8px 24px 8px 0;
  outline: none;
  transition: border-color var(--duration-base) ease;
  border-radius: 0;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .checkout-page__field--autocomplete .form__element {
    font-size: 16px;
  }
}
.checkout-page__field--autocomplete .form__element:focus {
  border-bottom-color: var(--fg-1);
}
.checkout-page__field--autocomplete .form__element::placeholder {
  color: transparent;
  opacity: 1;
}
.checkout-page__field--autocomplete .form__element:focus::placeholder {
  color: var(--fg-4);
}
.checkout-page__field--autocomplete .t-autocomplete__icon {
  position: absolute;
  right: 0;
  top: 28px;
  width: 14px;
  height: 14px;
  color: var(--fg-3);
  pointer-events: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}
.checkout-page__field--autocomplete .form__element:not(:placeholder-shown) ~ .t-autocomplete__icon {
  opacity: 0;
}
.checkout-page__field--autocomplete .form__element:focus ~ .t-autocomplete__icon {
  color: var(--fg-1);
  opacity: 1;
}
.checkout-page__field--autocomplete .t-autocomplete__close {
  display: none;
}
.checkout-page__field--autocomplete .t-autocomplete__panel {
  position: relative;
}
.checkout-page__field--autocomplete .t-autocomplete__list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 280px;
  margin: 4px 0 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background: var(--bg-app);
  border: var(--border-thin) solid var(--border-strong);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
.checkout-page__field--autocomplete .t-autocomplete__list::-webkit-scrollbar {
  width: 6px;
}
.checkout-page__field--autocomplete .t-autocomplete__list::-webkit-scrollbar-thumb {
  background: var(--color-grey6);
  border-radius: 0;
}
.checkout-page__field--autocomplete .t-autocomplete__list::-webkit-scrollbar-track {
  background: var(--bg-muted);
}
.checkout-page__field--autocomplete .t-autocomplete__panel.is-open .t-autocomplete__list {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.checkout-page__field--autocomplete .t-autocomplete__option {
  display: block;
  padding: 12px 16px;
  border-bottom: var(--border-thin) solid var(--divider-light);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.checkout-page__field--autocomplete .t-autocomplete__option:last-child {
  border-bottom: 0;
}
.checkout-page__field--autocomplete .t-autocomplete__option:hover, .checkout-page__field--autocomplete .t-autocomplete__option.is-active {
  background: var(--bg-muted);
  color: var(--fg-1);
}
.checkout-page__field--autocomplete .t-autocomplete__option.is-selected {
  font-weight: 500;
  color: var(--fg-1);
}
.checkout-page__field--autocomplete t-autocomplete-select:has(.form__element:placeholder-shown:not(:focus)) .form__label {
  top: 27px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}
@media screen and (max-width: 768px) {
  .checkout-page__field--autocomplete t-autocomplete-select:has(.form__element:placeholder-shown:not(:focus)) .form__label {
    top: 28px;
    font-size: 16px;
  }
}
.checkout-page__form-extras {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-grey3);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.checkout-page__check-label.checkout-page__check-label--strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0.3px;
}
.checkout-page__check-aside {
  font-weight: 400;
  color: var(--fg-3);
  margin-left: 4px;
}
.checkout-page__create-account {
  margin-top: -4px;
  margin-left: 28px;
}
@media screen and (max-width: 640px) {
  .checkout-page__create-account {
    margin-left: 0;
  }
}
.checkout-page__create-account-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-muted);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.checkout-page__create-account-tick {
  color: var(--color-success);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.checkout-page__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 22px;
}
@media screen and (max-width: 768px) {
  .checkout-page__grid {
    grid-template-columns: 1fr;
  }
}
.checkout-page__grid-half {
  min-width: 0;
}
.checkout-page__grid-full {
  grid-column: 1/-1;
  min-width: 0;
}
.checkout-page__form-panel {
  padding: 22px 24px;
  background: var(--bg-selected);
  border: 1px solid var(--color-grey3);
}
.checkout-page__form-panel + .checkout-page__form-panel {
  margin-top: var(--space-16);
}
@media screen and (max-width: 640px) {
  .checkout-page__form-panel {
    padding: var(--space-20);
  }
}
.checkout-page__form-panel--guest {
  background: var(--bg-app);
}
.checkout-page__addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.checkout-page__address-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 18px 20px;
  background: var(--bg-app);
  border: 1px solid var(--color-grey3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease;
  font-family: var(--font-sans);
  position: relative;
}
.checkout-page__address-card:hover .ds-radio__dot {
  border-color: var(--fg-1);
}
.checkout-page__address-card--selected {
  background: var(--bg-muted);
  border-left: var(--border-strong-w) solid var(--border-strong);
}
.checkout-page__address-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.checkout-page__address-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.checkout-page__address-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 7px;
  border: 1px solid var(--color-border);
  line-height: 1;
}
.checkout-page__address-badge--home {
  color: var(--color-border);
  background: var(--bg-app);
}
.checkout-page__address-badge--office {
  color: var(--color-white);
  background: var(--color-border);
}
.checkout-page__address-courier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg-3);
}
.checkout-page__address-courier-logo {
  height: 15px;
  width: auto;
  max-width: 42px;
  object-fit: contain;
  display: block;
}
.checkout-page__address-courier-name {
  line-height: 1;
}
.checkout-page__address-price {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-1);
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.checkout-page__address-price--free {
  color: var(--color-success);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.checkout-page__address-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0.3px;
}
.checkout-page__cheapest-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 16px;
  background: var(--bg-success);
  border: 1px solid var(--border-success);
}
.checkout-page__cheapest-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--fg-1);
}
.checkout-page__cheapest-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.checkout-page__cheapest-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--fg-1);
}
.checkout-page__cheapest-detail {
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.checkout-page__cheapest-price {
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-success);
  white-space: nowrap;
  flex-shrink: 0;
}
.checkout-page__cheapest-price--free {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.checkout-page__address-detail {
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 5px;
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.checkout-page__address-phone {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 5px;
  letter-spacing: 0.3px;
}
.checkout-page__address-edit {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--color-grey6);
  text-decoration: none;
  padding: 1px 0;
  align-self: flex-start;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.checkout-page__address-edit:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}
.checkout-page__add-address {
  width: 100%;
  padding: 18px 20px;
  background: var(--bg-app);
  border: 1px dashed var(--color-border);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  transition: all var(--transition-fast);
}
.checkout-page__add-address-icon {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  color: var(--fg-1);
  line-height: 1;
  flex-shrink: 0;
}
.checkout-page__add-address-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.checkout-page__add-address-sub {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 3px;
  letter-spacing: 0.3px;
}
.checkout-page__add-address-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--space-16);
  gap: var(--space-16);
}
.checkout-page__add-address-header .checkout-page__add-address-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fg-1);
}
.checkout-page__add-address-cancel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg-2);
  cursor: pointer;
  border-bottom: 1px solid var(--color-grey6);
  line-height: 1.4;
  transition: color var(--transition-fast), border-bottom-color var(--transition-fast);
}
.checkout-page__add-address-cancel:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}
.checkout-page__map-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-app);
  color: var(--fg-1);
  border: 2px solid var(--color-border);
  padding: 11px 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: all var(--duration-base) ease;
}
.checkout-page__map-btn:hover {
  background: var(--color-border);
  color: var(--color-white);
}
.checkout-page__map-btn .ds-icon {
  width: 16px;
  height: 16px;
}
.checkout-page__subhead-note {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-3);
}
.checkout-page__subhead--muted {
  color: var(--fg-3);
}
.checkout-page__boxnow-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
}
.checkout-page__boxnow-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-grey3);
}
.checkout-page__boxnow-bar-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fg-1);
}
.checkout-page__boxnow-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--fg-1);
  padding: 0 6px;
}
.checkout-page__boxnow-map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}
.checkout-page__boxnow-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.checkout-page__notice {
  margin-top: var(--space-16);
}
.checkout-page__notice--top {
  margin: 0 0 var(--space-16);
}
.checkout-page__payments {
  display: flex;
  flex-direction: column;
}
.checkout-page__wallet-control {
  padding: 12px 18px 14px;
  background: var(--bg-selected);
  border: 1px solid var(--color-grey3);
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-sans);
}
.checkout-page__wallet-full {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-1);
  letter-spacing: 0.3px;
  cursor: pointer;
}
.checkout-page__wallet-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checkout-page__wallet-amount-label {
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
}
.checkout-page__wallet-amount-input {
  width: 96px;
  max-width: 96px;
  text-align: right;
}
.checkout-page__wallet-amount-suffix {
  font-size: 12px;
  color: var(--fg-2);
}
.checkout-page__wallet-amount-all {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fg-1);
  font-size: 11px;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--font-sans);
}
.checkout-page__wallet-applied {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.3px;
}
.checkout-page__wallet-applied strong {
  color: var(--fg-1);
}
.checkout-page__payment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-16);
  align-items: center;
  padding: 16px 18px;
  background: var(--bg-app);
  border: 1px solid var(--color-grey3);
  border-top: 0;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
  position: relative;
}
.checkout-page__payment:first-of-type {
  border-top: 1px solid var(--color-grey3);
}
.checkout-page__payment:hover .ds-radio__dot, .checkout-page__payment:hover .ds-check__box {
  border-color: var(--fg-1);
}
.checkout-page__payment--selected {
  background: var(--bg-muted);
  border-left: var(--border-strong-w) solid var(--border-strong);
}
.checkout-page__payment ~ .checkout-page__payment-list > .checkout-page__payment:first-child {
  border-top: 0;
}
.checkout-page__payment-body {
  min-width: 0;
}
.checkout-page__payment-name-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.checkout-page__payment-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0.3px;
}
.checkout-page__payment-sub {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.3px;
  margin-top: 3px;
}
.checkout-page__payment-sub strong {
  color: var(--fg-1);
}
.checkout-page__payment-sub--card {
  color: var(--fg-3);
}
.checkout-page__payment-sub--card strong {
  color: var(--fg-1);
  font-weight: 600;
}
.checkout-page__payment-brands {
  display: flex;
  gap: 6px;
  align-items: center;
}
.checkout-page__brand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.checkout-page__brand {
  width: 44px;
  height: 28px;
  border: 1px solid var(--color-grey3);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.checkout-page__brand img {
  display: block;
  width: auto;
  height: auto;
  max-width: 36px;
  max-height: 20px;
}
.checkout-page__extras {
  padding: 18px 20px;
  background: var(--bg-app);
  border: 1px solid var(--color-grey3);
}
@media screen and (max-width: 640px) {
  .checkout-page__extras {
    padding: 16px 18px;
  }
}
.checkout-page__extras-row + .checkout-page__extras-row {
  margin-top: var(--space-16);
}
.checkout-page__note-label {
  display: block;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  margin-bottom: 8px;
  font-family: var(--font-sans);
}
.checkout-page__check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.checkout-page__check-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-2);
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.checkout-page__check-label strong {
  color: var(--fg-1);
  font-weight: 500;
}
.checkout-page__check-title {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-2);
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.checkout-page__check-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.checkout-page__textarea {
  margin-top: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid var(--color-grey6);
  background: var(--bg-app);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-1);
  outline: none;
  resize: vertical;
  letter-spacing: 0.3px;
  transition: border-color var(--duration-base) ease;
}
.checkout-page__textarea::placeholder {
  color: var(--fg-4);
}
.checkout-page__textarea:focus {
  border-color: var(--fg-1);
}
.checkout-page__firm {
  margin-top: var(--space-20);
  padding-top: var(--space-20);
  border-top: 1px dashed var(--color-grey6);
}
.checkout-page__firm-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-16);
}
.checkout-page__firm-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-12);
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-app);
  border: 1px solid var(--color-grey3);
  border-top: 0;
  font-family: var(--font-sans);
  position: relative;
  cursor: pointer;
}
.checkout-page__firm-row:first-of-type {
  border-top: 1px solid var(--color-grey3);
}
.checkout-page__firm-row:hover .ds-radio__dot {
  border-color: var(--fg-1);
}
.checkout-page__firm-row--selected {
  background: var(--bg-muted);
  border-left: var(--border-strong-w) solid var(--border-strong);
  padding-left: 11px;
}
.checkout-page__firm-info {
  min-width: 0;
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
}
.checkout-page__firm-info strong {
  color: var(--fg-1);
  font-weight: 500;
}
.checkout-page__firm-edit {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--color-grey6);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.checkout-page__firm-edit:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}
.checkout-page__firm-add {
  margin-top: var(--space-12);
  background: transparent;
  color: var(--fg-1);
  border: 1px dashed var(--color-border);
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: background var(--duration-base) ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.checkout-page__firm-add:hover {
  background: var(--bg-muted);
}
.checkout-page__terms {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--color-grey3);
}
.checkout-page__terms-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: var(--space-20);
}
.checkout-page__terms-row.is-error .checkout-page__terms-text {
  color: var(--color-error);
}
.checkout-page__terms-error {
  display: block;
  margin: -12px 0 var(--space-20) 28px;
  font-size: 11px;
  color: var(--color-error);
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.checkout-page__terms-text {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.6;
  letter-spacing: 0.2px;
}
.checkout-page__submit {
  width: 100%;
}
.checkout-page__loyalty {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-muted);
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.2px;
  line-height: 1.5;
}
.checkout-page__loyalty-link, .checkout-page__loyalty-more {
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fg-1);
  font: inherit;
  color: var(--fg-1);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.checkout-page__loyalty-link:hover, .checkout-page__loyalty-more:hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}
.checkout-page__loyalty-more {
  margin-left: 8px;
  font-size: 11px;
}
.checkout-page__skeleton {
  background: var(--color-grey3);
  animation: checkout-skeleton-pulse 1.4s ease-in-out infinite;
}
.checkout-page__skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.checkout-page__skeleton--card {
  height: 88px;
}
.checkout-page .form__item {
  padding: 0;
}

.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.checkout-overlay[hidden] {
  display: none;
}

.checkout-overlay__inner {
  text-align: center;
  max-width: 320px;
  font-family: var(--font-sans);
  color: var(--fg-2);
}

.checkout-overlay__spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-grey3);
  border-top-color: var(--color-red);
  border-radius: var(--radius-circle);
  margin-bottom: 18px;
  animation: checkout-overlay-spin 0.9s linear infinite;
}

@keyframes checkout-overlay-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.checkout-overlay__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.checkout-overlay__sub {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
  letter-spacing: 0.2px;
}

@media (max-width: 640px) {
  .checkout-page__courier-logo-fallback {
    display: none;
  }
}
.checkout-result {
  background: var(--bg-app);
  color: var(--fg-2);
  font-family: var(--font-sans);
  padding: var(--space-60) 0 var(--space-90);
}
.checkout-result__wrap {
  width: var(--wrapper-pct);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}
.checkout-result__hero {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
}
.checkout-result__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
@media screen and (max-width: 768px) {
  .checkout-result__title {
    font-size: 28px;
  }
}
.checkout-result__sub {
  margin: 0;
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1.6;
  max-width: 520px;
  letter-spacing: 0.2px;
}
.checkout-result--processing .checkout-result__title {
  animation: checkout-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes checkout-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
@media screen and (min-width: 641px) {
  .checkout-page__section-head--summary {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .checkout-page__header {
    display: none;
  }
  .checkout-page__user-strip {
    padding: var(--space-10) 0;
    font-size: 11px;
  }
  .checkout-page__user-strip .checkout-page__wrap {
    width: 100%;
    padding: 0 var(--space-16);
  }
  .checkout-page__user-strip-inner {
    gap: var(--space-8);
    flex-wrap: nowrap;
    align-items: center;
  }
  .checkout-page__user-strip-inner > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .checkout-page__user-strip-phone {
    display: none;
  }
  .checkout-page__user-strip-action {
    flex: 0 0 auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .checkout-page__user-strip--guest .checkout-page__user-strip-pill {
    font-size: 10px;
    padding: 2px 6px;
    letter-spacing: 1.2px;
    margin-right: var(--space-8);
  }
  .checkout-page__user-strip-prompt {
    display: none;
  }
  .checkout-page__section {
    margin-bottom: 0;
  }
  .checkout-page__section-head {
    margin: 22px 0 14px;
    gap: var(--space-12);
  }
  .checkout-page__section-num {
    font-size: 12px;
  }
  .checkout-page__section-title {
    font-size: 18px;
  }
  .checkout-page__addresses {
    gap: var(--space-8);
  }
  .checkout-page__address-card {
    padding: 14px 16px;
    gap: var(--space-12);
  }
  .checkout-page__address-name {
    font-size: 12px;
  }
  .checkout-page__address-detail {
    font-size: 11px;
  }
  .checkout-page__address-phone {
    font-size: 11px;
    margin-top: 2px;
  }
  .checkout-page__address-edit {
    font-size: 10px;
  }
  .checkout-page__add-address {
    padding: 14px 16px;
    gap: var(--space-12);
  }
  .checkout-page__add-address-title {
    font-size: 12px;
  }
  .checkout-page__add-address-sub {
    display: none;
  }
  .checkout-page__add-address-icon {
    font-size: 16px;
  }
  .checkout-page__form-panel--guest {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .checkout-page__form-extras {
    margin-top: 18px;
    padding-top: 16px;
    gap: var(--space-12);
  }
  .checkout-page__create-account-note {
    padding: 8px 10px;
    font-size: 10px;
  }
  .checkout-page__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--space-12);
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1100;
    margin: 0;
    padding: 18px 16px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-app);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: var(--shadow-sheet), 0 0 0 100vmax var(--overlay);
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open)::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--color-grey3);
    border-radius: var(--radius-pill);
    margin: 0 auto 14px;
    flex: 0 0 auto;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) t-autocomplete-select {
    display: contents;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .form__label {
    position: static;
    display: block;
    opacity: 1;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fg-1);
    margin: 0 40px 14px 0;
    line-height: 1.2;
    flex: 0 0 auto;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .form__label.hidden {
    display: block;
    opacity: 1;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .form__element {
    border: 1px solid var(--color-grey6);
    border-bottom-width: 1px;
    background-color: var(--bg-app);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><circle cx='6' cy='6' r='4.5' stroke='%237a7a7a' stroke-width='1.5'/><line x1='9.5' y1='9.5' x2='13' y2='13' stroke='%237a7a7a' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 14px 14px;
    padding: 12px 14px 12px 38px;
    font-size: 16px;
    font-family: var(--font-sans);
    color: var(--fg-1);
    line-height: 1.3;
    margin: 0 0 12px;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    outline: none;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .form__element:focus {
    border-color: var(--fg-1);
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .form__element::placeholder {
    color: var(--fg-4);
    opacity: 1;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .t-autocomplete__icon {
    display: none;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .t-autocomplete__close {
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--fg-1);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .t-autocomplete__close .ds-icon {
    width: 18px;
    height: 18px;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .t-autocomplete__panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .t-autocomplete__list {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    border: 0;
    border-top: var(--border-thin) solid var(--color-grey3);
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .checkout-page__field--autocomplete:has(.t-autocomplete__panel.is-open) .t-autocomplete__option {
    padding: 14px 6px;
    font-size: 14px;
    color: var(--fg-1);
  }
  .checkout-page__payment {
    padding: 14px;
    column-gap: var(--space-10);
  }
  .checkout-page__payment-name {
    font-size: 12px;
  }
  .checkout-page__payment-sub {
    font-size: 11px;
    margin-top: 2px;
  }
  .checkout-page__extras {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .checkout-page__note-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    color: var(--fg-3);
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--color-grey6);
    padding-bottom: 1px;
    line-height: 1.4;
  }
  .checkout-page__note-toggle-plus {
    font-size: 13px;
    line-height: 1;
  }
  .checkout-page__extras-row--note:not(.checkout-page__extras-row--note-open) .checkout-page__note-label,
  .checkout-page__extras-row--note:not(.checkout-page__extras-row--note-open) .checkout-page__note-textarea {
    display: none;
  }
  .checkout-page__extras-row--note-open .checkout-page__note-toggle {
    display: none;
  }
  .checkout-page__section-head--summary {
    margin: 22px 0 14px;
  }
  .checkout-page__aside .ds-summary__title {
    display: none;
  }
  .checkout-page__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
  }
  .checkout-page__main {
    display: contents;
  }
  .checkout-page__aside {
    order: 1;
  }
  .checkout-page__terms {
    order: 2;
  }
  .checkout-page__terms {
    padding: 18px 0 16px;
    border-top: 0;
  }
  .checkout-page__terms-row {
    gap: var(--space-10);
    margin-bottom: 0;
  }
  .checkout-page__terms-text {
    font-size: 11px;
    line-height: 1.55;
  }
  .checkout-page__terms-error {
    margin: 6px 0 12px 28px;
    font-size: 11px;
  }
  .checkout-page__sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--bg-app);
    border-top: 1px solid var(--color-grey3);
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    display: none;
  }
  .checkout-page__sticky-bar.is-visible {
    display: block;
  }
  .checkout-page__sticky-bar .checkout-page__submit {
    width: 100%;
    margin: 0;
  }
  .checkout-page {
    padding-bottom: 96px;
  }
  .checkout-page__wrap {
    width: 100%;
    max-width: none;
    padding: 0 var(--space-16);
    box-sizing: border-box;
  }
}
.profile-page {
  background: var(--bg-app);
  color: var(--fg-2);
  font-family: var(--font-sans);
  padding-bottom: var(--space-90);
}
@media screen and (max-width: 768px) {
  .profile-page {
    padding-bottom: var(--space-60);
  }
}
.profile-page *,
.profile-page *::before,
.profile-page *::after {
  box-sizing: border-box;
}
.profile-page [class*=profile-page__][class*=-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.profile-page :where([class*=profile-page__][class*=-icon]) > svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
:where(.profile-page) a {
  text-decoration: none;
  color: inherit;
}

.profile-page button {
  font-family: inherit;
}
.profile-page__wrap {
  width: var(--wrapper-pct);
  max-width: var(--wrapper-max);
  margin: 0 auto;
}
.profile-page__pagination {
  margin-top: var(--space-30);
}
.profile-page__breadcrumb {
  padding-top: var(--space-20);
}
@media screen and (max-width: 768px) {
  .profile-page__breadcrumb {
    padding-top: var(--space-12);
  }
}
.profile-page__welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-20);
  padding: var(--space-40) 0 var(--space-40);
}
@media screen and (max-width: 640px) {
  .profile-page__welcome-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-24) 0 var(--space-24);
  }
}
.profile-page__welcome-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.profile-page__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: none;
  display: inline-block;
}
.profile-page__welcome-header .profile-page__eyebrow::before {
  content: "— ";
}
.profile-page__welcome-title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .profile-page__welcome-title {
    font-size: 28px;
  }
}
.profile-page__welcome-meta {
  font-size: 13px;
  color: var(--fg-3);
  letter-spacing: 0.3px;
  margin: 4px 0 0;
  line-height: 1.5;
}
.profile-page__welcome-meta span + span::before {
  content: " · ";
  opacity: 0.6;
}
.profile-page__logout {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  border-bottom: 1px solid var(--fg-3);
  padding: 2px 0;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
  flex-shrink: 0;
}
.profile-page__logout:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}
.profile-page__sidebar-help .profile-page__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.profile-page__page-action {
  font-size: 11px;
  padding: 10px 18px;
  min-width: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.profile-page__card {
  background: var(--bg-app);
  border: 1px solid var(--color-grey3);
  padding: 28px 32px;
  margin-bottom: var(--space-16);
}
.profile-page__card:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 640px) {
  .profile-page__card {
    padding: var(--space-20);
  }
}
.profile-page__card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}
@media screen and (max-width: 640px) {
  .profile-page__card-head {
    margin-bottom: var(--space-20);
  }
}
.profile-page__card-titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.profile-page__card-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1;
}
.profile-page__card-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0;
}
.profile-page__card-action {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--fg-3);
  background: transparent;
  padding: 2px 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.profile-page__card-action:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}
.profile-page__card-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--color-success);
  color: var(--color-success);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  flex-shrink: 0;
  line-height: 1;
}
.profile-page__card-text {
  font-size: 13px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
  line-height: 1.55;
  margin: 0;
}
.profile-page__card-text + .profile-page__card-text {
  margin-top: var(--space-8);
}
.profile-page__card-actions-row {
  margin-top: var(--space-20);
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.profile-page__card-actions-row .ds-btn {
  min-width: 200px;
}
@media screen and (max-width: 640px) {
  .profile-page__card-actions-row .ds-btn {
    width: 100%;
    min-width: 0;
  }
}
.profile-page__field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
}
@media screen and (max-width: 640px) {
  .profile-page__field-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}
.profile-page__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.profile-page__field-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1;
}
.profile-page__field-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: 0.3px;
  line-height: 1.4;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--color-grey6);
  display: block;
  word-break: break-word;
}
.profile-page__section {
  margin-bottom: var(--space-30);
}
.profile-page__section:last-child {
  margin-bottom: 0;
}
.profile-page__order-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-bottom: var(--space-20);
}
@media screen and (max-width: 768px) {
  .profile-page__order-details {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 640px) {
  .profile-page__order-details {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}
.profile-page__order-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.profile-page__order-detail-title {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
  margin: 0 0 4px;
}
.profile-page__order-detail-item {
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.profile-page__order-detail-item b, .profile-page__order-detail-item strong {
  color: var(--fg-1);
  font-weight: 500;
}
.profile-page__order-detail-item--total {
  margin-top: 4px;
  padding-top: var(--space-8);
  border-top: 1px dashed var(--color-grey3);
  color: var(--fg-1);
  font-weight: 500;
}
.profile-page__order-note {
  background: var(--bg-muted);
  border: 1px solid var(--color-grey3);
  padding: var(--space-12) var(--space-16);
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
  line-height: 1.5;
  margin-bottom: var(--space-16);
}
.profile-page__order-note b {
  color: var(--fg-1);
  font-weight: 500;
}
.profile-page__order-products {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-bottom: var(--space-20);
}
.profile-page__order-products:last-child {
  margin-bottom: 0;
}
.profile-page__order-product {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-16);
  align-items: flex-start;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-grey3);
}
.profile-page__order-product:first-child {
  border-top: 0;
  padding-top: 0;
}
@media screen and (max-width: 640px) {
  .profile-page__order-product {
    grid-template-columns: 56px 1fr;
  }
  .profile-page__order-product-price {
    grid-column: 1/-1;
    text-align: left;
    padding-top: var(--space-8);
    border-top: 1px dashed var(--color-grey3);
  }
}
.profile-page__order-product-img {
  width: 64px;
  height: 80px;
  overflow: hidden;
  background: var(--color-grey-bg);
  display: block;
}
.profile-page__order-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 640px) {
  .profile-page__order-product-img {
    width: 56px;
    height: 72px;
  }
}
.profile-page__order-product-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}
.profile-page__order-product-brand {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.profile-page__order-product-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
  letter-spacing: 0.2px;
  line-height: 1.4;
}
.profile-page__order-product-title:hover {
  text-decoration: underline;
}
.profile-page__order-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.2px;
  margin-top: 2px;
}
.profile-page__order-product-flag {
  color: var(--color-error);
  font-weight: 500;
}
.profile-page__order-product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
  padding-top: 2px;
}
.profile-page__order-product-price-old {
  font-size: 11px;
  color: var(--fg-3);
  text-decoration: line-through;
}
.profile-page__order-product-price-main {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0.2px;
}
.profile-page__order-action-btn {
  min-width: 200px;
  font-size: 11px;
  padding: 11px 20px;
}
.profile-page__order-bank {
  background: var(--bg-notice);
  border: 1px solid var(--border-notice);
  padding: var(--space-16) var(--space-20);
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.3px;
  line-height: 1.6;
  margin-bottom: var(--space-16);
}
.profile-page__order-bank b {
  color: var(--fg-1);
  font-weight: 500;
}
.profile-page__order-bank p {
  margin: 0;
}
.profile-page__order-bank p + p {
  margin-top: var(--space-8);
}
.profile-page__order-bank-title {
  font-size: 10px;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 700;
  display: block;
  margin: 0 0 var(--space-8);
}
.profile-page__order-bank-note {
  font-size: 11px;
  color: var(--fg-3);
}
.profile-page__order-actions-row {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-20);
}
@media screen and (max-width: 480px) {
  .profile-page__order-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
}
.profile-page__order-actions-note {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.3px;
  margin: 0;
}
.profile-page__addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-16);
}
.profile-page__address-card {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 0;
  background: var(--bg-app);
  border: 1px solid var(--color-grey3);
  transition: border-color var(--duration-base) ease;
}
.profile-page__address-card:hover {
  border-color: var(--fg-2);
}
.profile-page__address-card--featured {
  border-left: 3px solid var(--fg-1);
  padding-left: 18px;
}
.profile-page__address-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.profile-page__address-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid var(--fg-1);
  line-height: 1;
  white-space: nowrap;
}
.profile-page__address-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.profile-page__address-card-courier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg-3);
  min-width: 0;
}
.profile-page__address-card-courier-logo {
  height: 15px;
  width: auto;
  max-width: 42px;
  object-fit: contain;
  display: block;
}
.profile-page__address-card-courier-name {
  line-height: 1;
  white-space: nowrap;
}
.profile-page__address-card-default {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  align-self: center;
}
.profile-page__address-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
  padding-bottom: var(--space-16);
}
.profile-page__address-card-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.3;
  letter-spacing: 0.2px;
  margin: 0 0 6px;
}
.profile-page__address-card-line {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
  letter-spacing: 0.2px;
  word-break: break-word;
}
.profile-page__address-card-phone {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
  letter-spacing: 0.2px;
  margin-top: 4px;
}
.profile-page__address-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  padding: 14px 0;
  margin-top: auto;
  border-top: 1px solid var(--color-grey3);
}
.profile-page__address-card-edit, .profile-page__address-card-delete {
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 2px 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-base) ease, opacity var(--duration-base) ease;
}
.profile-page__address-card-edit {
  color: var(--fg-3);
}
.profile-page__address-card-edit:hover {
  color: var(--fg-1);
}
.profile-page__address-card-delete {
  color: var(--fg-3);
}
.profile-page__address-card-delete:hover {
  color: var(--color-error);
}
.profile-page__add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: 24px 20px;
  min-height: 200px;
  background: var(--bg-app);
  border: 1px dashed var(--color-grey6);
  color: var(--fg-1);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--duration-base) ease, background var(--duration-base) ease;
  text-decoration: none;
  text-align: center;
  width: 100%;
}
.profile-page__add-card:hover {
  border-color: var(--fg-1);
  background: var(--color-grey-bg);
}
.profile-page__add-card-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-grey6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  color: var(--fg-1);
  line-height: 1;
  flex-shrink: 0;
  background: var(--bg-app);
}
.profile-page__add-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.profile-page__add-card-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
}
.profile-page__add-card-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-3);
  text-transform: none;
  letter-spacing: 0.2px;
  line-height: 1.4;
  max-width: 200px;
}
.profile-page__wallet-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-24);
  padding: 28px 32px;
  background: var(--bg-app);
  border: 2px solid var(--fg-1);
  margin-bottom: var(--space-12);
}
@media screen and (max-width: 640px) {
  .profile-page__wallet-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: var(--space-16);
  }
}
.profile-page__wallet-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.profile-page__wallet-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  line-height: 1;
}
.profile-page__wallet-amount-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-page__wallet-amount {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 400;
  color: var(--fg-1);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.4px;
}
@media screen and (max-width: 768px) {
  .profile-page__wallet-amount {
    font-size: 32px;
  }
}
.profile-page__wallet-cta {
  min-width: 220px;
}
@media screen and (max-width: 640px) {
  .profile-page__wallet-cta {
    width: 100%;
  }
}
.profile-page__wallet-note {
  margin-bottom: var(--space-24);
}
@media screen and (max-width: 640px) {
  .profile-page__wallet-note {
    margin-bottom: var(--space-16);
  }
}
.profile-page__transactions {
  margin-top: var(--space-30);
}
.profile-page__transactions-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  line-height: 1;
  margin: 0 0 var(--space-20);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-grey3);
}
.profile-page__transaction {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  column-gap: var(--space-16);
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-grey3);
}
.profile-page__transaction:last-child {
  border-bottom: 0;
}
@media screen and (max-width: 640px) {
  .profile-page__transaction {
    column-gap: var(--space-12);
    padding: 14px 2px;
  }
}
.profile-page__transaction::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--border-default);
  align-self: center;
}
.profile-page__transaction--credit::before {
  background: var(--fg-1);
}
.profile-page__transaction--debit::before {
  background: var(--fg-3);
}
.profile-page__transaction-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.profile-page__transaction-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-1);
  margin: 0;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.profile-page__transaction-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.2px;
}
.profile-page__transaction-meta > span + span::before {
  content: "· ";
  margin-right: 4px;
  color: var(--border-default);
}
.profile-page__transaction-amount {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  white-space: nowrap;
  text-align: right;
  letter-spacing: 0.2px;
}
.profile-page__transaction--credit .profile-page__transaction-amount {
  color: var(--fg-1);
}
.profile-page__transaction--credit .profile-page__transaction-amount::before {
  content: "+";
  margin-right: 1px;
}
.profile-page__transaction--debit .profile-page__transaction-amount {
  color: var(--fg-1);
}
.profile-page__transaction--debit .profile-page__transaction-amount::before {
  content: "−";
  margin-right: 1px;
}
.profile-page__transaction-expired {
  color: var(--fg-3);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.8px;
}
.profile-page__stepper {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
  padding: var(--space-16) 0 var(--space-20);
}
@media screen and (max-width: 768px) {
  .profile-page__stepper {
    gap: var(--space-12);
    padding: var(--space-12) 0 var(--space-16);
  }
}
.profile-page__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--fg-4);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  transition: color var(--duration-base) ease;
}
.profile-page__step.is-active {
  color: var(--fg-1);
}
.profile-page__step.is-active .profile-page__step-num {
  color: var(--fg-1);
  border-bottom-color: var(--border-strong);
}
.profile-page__step.is-done {
  color: var(--fg-2);
}
.profile-page__step.is-done .profile-page__step-num {
  color: var(--fg-2);
  border-bottom-color: var(--fg-2);
}
.profile-page__step-num {
  display: inline-flex;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-4);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 1px;
  letter-spacing: 0.4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--duration-base) ease, border-color var(--duration-base) ease;
}
@media screen and (max-width: 640px) {
  .profile-page__step-label {
    display: none;
  }
}
.profile-page__step-separator {
  flex: 1;
  height: 1px;
  background: var(--color-grey3);
  max-width: 80px;
}
.profile-page__return-product {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-grey3);
}
.profile-page__return-product:first-child {
  padding-top: 0;
}
.profile-page__return-product:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
@media screen and (max-width: 640px) {
  .profile-page__return-product {
    grid-template-columns: 64px 1fr;
    gap: var(--space-12);
  }
}
.profile-page__return-product-img {
  width: 80px;
  height: 100px;
  overflow: hidden;
  background: var(--bg-placeholder);
}
.profile-page__return-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 640px) {
  .profile-page__return-product-img {
    width: 64px;
    height: 80px;
  }
}
.profile-page__return-product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.profile-page__return-product-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
  text-decoration: none;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.profile-page__return-product-title:hover {
  text-decoration: underline;
}
.profile-page__return-product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.3px;
}
.profile-page__return-product-meta span {
  display: inline-block;
}
.profile-page__return-product-price {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: 0.3px;
}
.profile-page__return-product-actions {
  margin-top: var(--space-8);
  padding-top: var(--space-12);
  border-top: 1px dashed var(--color-grey3);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.profile-page__return-radios {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.profile-page__return-clear {
  background: transparent;
  border: 0;
  padding: 2px 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-3);
  font-family: var(--font-sans);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color var(--duration-base) ease;
}
.profile-page__return-clear svg, .profile-page__return-clear use {
  width: 8px;
  height: 8px;
}
.profile-page__return-clear:hover {
  color: var(--fg-1);
}
.profile-page__return-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.profile-page__return-blocked {
  color: var(--fg-3);
  font-size: 12px;
  letter-spacing: 0.3px;
}
.profile-page__refund {
  padding: var(--space-24);
  background: var(--bg-app);
  border: 1px solid var(--color-grey3);
}
@media screen and (max-width: 768px) {
  .profile-page__refund {
    padding: var(--space-20);
  }
}
.profile-page__refund-methods {
  display: flex;
  gap: var(--space-20);
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: var(--space-20);
  margin-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-grey3);
}
.profile-page__refund-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-20);
  text-align: center;
}
.profile-page__refund-total {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  color: var(--fg-1);
  line-height: 1.1;
  letter-spacing: 0.4px;
}
@media screen and (max-width: 768px) {
  .profile-page__refund-total {
    font-size: 28px;
  }
}
.profile-page__refund-total-label {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-weight: 600;
}
.profile-page__refund-info {
  color: var(--fg-2);
  font-size: 12px;
  max-width: 540px;
  margin: 0 auto;
  letter-spacing: 0.3px;
  line-height: 1.5;
  text-align: center;
}
.profile-page__refund-info p {
  margin: 0;
}
.profile-page__refund-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.profile-page__refund-actions {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-24);
}
.profile-page__skeleton {
  background: var(--bg-muted);
  border: 1px solid var(--color-grey3);
  border-top: 0;
  height: 72px;
  position: relative;
  overflow: hidden;
}
.profile-page__skeleton:first-child {
  border-top: 1px solid var(--color-grey3);
}
.profile-page__skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  animation: profilePageSkeleton 1.2s infinite;
}
@keyframes profilePageSkeleton {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.profile-page__modal-date {
  display: flex;
  flex-direction: column;
}
.profile-page__modal-date > t-date-selects > .date-selects {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 12px;
  width: 100%;
}
.profile-page__modal-date .form__item {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.profile-page__modal-date .ds-select {
  padding-top: 0;
}
.profile-page__modal-date.has-error .ds-select__trigger {
  border-bottom-color: var(--color-error);
}
.profile-page__modal-group-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 10px;
  display: block;
}
.has-error .profile-page__modal-group-label {
  color: var(--color-error);
}
.profile-page__modal-group-error {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-error);
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.profile-page__modal-group.has-error .auth-toggle {
  border-color: var(--color-error);
}
.profile-page__modal-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.profile-page__modal-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media screen and (max-width: 640px) {
  .profile-page__modal-field-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.profile-page__modal-static-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--color-grey6);
}
.profile-page__modal-static-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.profile-page__modal-static-value {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-1);
  letter-spacing: 0.2px;
}
.profile-page__modal-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.2px;
  line-height: 1.5;
  margin: 0;
}

.profile-page--wishlist .ds-plp {
  padding-bottom: 0;
}
.profile-page--wishlist .ds-plp .ds-plp__header {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: var(--space-30);
}
@media screen and (max-width: 768px) {
  .profile-page--wishlist .ds-plp .ds-plp__header {
    padding-top: var(--space-20);
  }
}
.profile-page--wishlist .ds-plp .ds-plp-pagination {
  margin-top: var(--space-40);
}
@media screen and (max-width: 768px) {
  .profile-page--wishlist .ds-plp .ds-plp-grid {
    padding-left: 0;
    padding-right: 0;
  }
}

.auth-form__group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 480px) {
  .auth-form__group {
    grid-template-columns: 1fr;
  }
}

.auth-screen__messages:not(:has(*)) {
  display: none;
}

.auth-minimal__small-action {
  align-self: center;
}

.auth-validity-badge {
  padding: 10px 14px;
  background: var(--bg-muted);
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.4px;
}
.auth-validity-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--color-success);
}
.auth-validity-badge strong {
  color: var(--fg-1);
  font-weight: 500;
}

.auth-checkout {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: "Jost", sans-serif;
}
.auth-checkout *,
.auth-checkout *::before,
.auth-checkout *::after {
  box-sizing: border-box;
}

.auth-checkout__intro {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
  padding: 64px 0 0;
  text-align: center;
}

.auth-checkout__intro-title {
  font: 300 56px/1.05 var(--font-display);
  margin: 0;
  color: var(--fg-1);
  letter-spacing: -0.5px;
}

.auth-checkout__hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-strip);
  padding: 56px 0 64px;
  text-align: center;
}
.auth-checkout__hero::before {
  content: "&";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 560px;
  line-height: 1;
  color: rgba(25, 25, 25, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.auth-checkout__hero-inner {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 720px;
  margin: 0 auto;
}

.auth-checkout__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--fg-1);
  margin-bottom: 22px;
}

.auth-checkout__hero-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--bg-dark);
}

.auth-checkout__hero-title {
  font: 300 96px/0.92 var(--font-display);
  margin: 0 0 20px;
  color: var(--fg-1);
  letter-spacing: -2px;
}

.auth-checkout__hero-amp {
  font-style: italic;
  opacity: 0.85;
}

.auth-checkout__hero-text {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.65;
  margin: 0 auto 36px;
  max-width: 540px;
  letter-spacing: 0.2px;
}

.auth-checkout__hero-perks {
  display: inline-flex;
  gap: 48px;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto;
}

.auth-checkout__hero-perk {
  text-align: center;
}

.auth-checkout__hero-perk-num {
  font: 300 96px/0.9 var(--font-display);
  color: var(--fg-1);
  letter-spacing: -2px;
}
.auth-checkout__hero-perk-num--accent {
  color: var(--color-red);
}

.auth-checkout__hero-perk-label {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-1);
  font-weight: 600;
  margin-top: 10px;
}

.auth-checkout__hero-perk-sep {
  width: 1px;
  height: 90px;
  background: var(--bg-dark);
  opacity: 0.25;
  margin-bottom: 12px;
}

.auth-checkout__hero-fineprint {
  font-size: 11px;
  color: var(--fg-1);
  margin: 30px 0 0;
  opacity: 0.6;
  letter-spacing: 0.3px;
  font-style: italic;
}

.auth-checkout__grid-wrap {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
  padding: 36px 0 40px;
}

.auth-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  border: 1px solid var(--color-grey3);
  background: var(--bg-app);
}

.auth-checkout__path {
  padding: 36px;
  border-right: 1px solid var(--color-grey3);
  display: flex;
  flex-direction: column;
}
.auth-checkout__path:last-child {
  border-right: none;
}

.auth-checkout__path-title {
  font: 400 18px/1.2 "Jost", sans-serif;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fg-1);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.auth-checkout__path-num {
  font: 400 13px var(--font-serif);
  color: var(--color-red);
  letter-spacing: 0.4px;
}

.auth-checkout__path-text {
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 22px;
  letter-spacing: 0.3px;
  color: var(--fg-2);
}
.auth-checkout__path-text em {
  font-style: italic;
  color: var(--fg-1);
}

.auth-checkout__perks {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-checkout__perks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--fg-1);
}
.auth-checkout__perks li em {
  font-style: italic;
  color: var(--fg-1);
}

.auth-checkout__perk-mark {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 3px;
  background: var(--color-red);
  color: var(--fg-inverse);
}
.auth-checkout__perk-mark--ok {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg-1);
}
.auth-checkout__perk-mark--off {
  background: transparent;
  border: 1px solid var(--border-input);
  color: var(--fg-3);
}

.auth-checkout__path--register {
  background: var(--bg-dark);
  color: var(--fg-inverse);
}
.auth-checkout__path--register .auth-checkout__path-title {
  color: var(--fg-inverse);
}
.auth-checkout__path--register .auth-checkout__path-text {
  color: rgba(255, 255, 255, 0.78);
}
.auth-checkout__path--register .auth-checkout__path-text em {
  color: var(--fg-inverse);
}
.auth-checkout__path--register .auth-checkout__perks li {
  color: rgba(255, 255, 255, 0.9);
}
.auth-checkout__path--register .auth-checkout__perks li em {
  color: var(--fg-inverse);
}

.auth-checkout__path--login .auth-form {
  max-width: none;
  gap: 18px;
}
.auth-checkout__path--login .auth-screen__row {
  font-size: 11px;
}

.auth-checkout__path--guest .ds-btn {
  margin-top: auto;
}

.auth-checkout__path--register .ds-btn {
  margin-top: auto;
}

.auth-checkout__path--login .auth-form {
  margin-top: auto;
}

.contact-page {
  background: var(--bg-app);
  padding: 48px 24px 96px;
  font-family: "Jost", sans-serif;
  color: var(--fg-1);
}
@media (max-width: 768px) {
  .contact-page {
    padding: 28px 16px 60px;
  }
}
.contact-page *, .contact-page *::before, .contact-page *::after {
  box-sizing: border-box;
}

.contact-page__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.contact-page__header {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
@media (max-width: 768px) {
  .contact-page__header {
    margin-bottom: 36px;
  }
}

.contact-page__eyebrow {
  font: 400 13px/1 var(--font-sans);
  letter-spacing: 0.6px;
  color: var(--fg-3);
  margin-bottom: 14px;
}

.contact-page__title {
  font: 400 40px/1.1 "Jost", sans-serif;
  margin: 0 0 14px;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
@media (max-width: 640px) {
  .contact-page__title {
    font-size: 28px;
  }
}

.contact-page__subtitle {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-3);
  letter-spacing: 0.3px;
  margin: 0;
}

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-page__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.contact-page__info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-page__info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-page__info-label {
  font: 400 13px/1 var(--font-sans);
  letter-spacing: 0.6px;
  color: var(--fg-3);
}

.contact-page__info-value {
  font: 400 18px/1.3 "Jost", sans-serif;
  color: var(--fg-1);
  text-decoration: none;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.contact-page__info-value:hover {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

.contact-page__info-meta {
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.2px;
  margin-top: 4px;
}

.contact-page__social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.contact-page__social-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  color: var(--fg-1);
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.contact-page__social-link:hover {
  border-color: var(--border-strong);
  background: var(--bg-dark);
  color: var(--fg-inverse);
}

.contact-page__form-card {
  background: var(--bg-strip);
  padding: 48px;
  position: relative;
}
@media (max-width: 640px) {
  .contact-page__form-card {
    padding: 28px 20px;
  }
}
.contact-page__form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 64px;
  background: var(--bg-dark);
}

.contact-page__form-title {
  font: 400 24px/1.2 "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 28px;
  color: var(--fg-1);
}

.contact-page__form {
  max-width: none;
}

.contact-page__messages {
  margin-bottom: 18px;
}

.contact-page__success {
  text-align: center;
  padding: 24px 8px 8px;
}

.contact-page__success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: var(--color-success);
  color: var(--fg-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 400 32px/1 "Jost", sans-serif;
  border-radius: 0;
}

.contact-page__success-title {
  font: 400 28px/1.15 "Jost", sans-serif;
  margin: 0 0 14px;
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
@media (max-width: 640px) {
  .contact-page__success-title {
    font-size: 24px;
  }
}

.contact-page__success-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-2);
  letter-spacing: 0.2px;
  margin: 0 auto 28px;
  max-width: 360px;
}
.contact-page__success-text strong {
  color: var(--fg-1);
  font-weight: 500;
}

.contact-page__success-button {
  min-width: 240px;
}

.cms-page-content {
  line-height: 1.6;
  color: var(--fg-1);
  font-size: 16px;
}
.cms-page-content h1, .cms-page-content h2, .cms-page-content h3, .cms-page-content h4, .cms-page-content h5, .cms-page-content h6 {
  margin: 24px 0 12px;
  line-height: 1.25;
}
.cms-page-content h1 {
  font-size: 28px;
}
.cms-page-content h2 {
  font-size: 24px;
}
.cms-page-content h3 {
  font-size: 20px;
}
.cms-page-content h4 {
  font-size: 18px;
}
.cms-page-content p {
  margin: 0 0 14px;
}
.cms-page-content ul, .cms-page-content ol {
  margin: 0 0 14px 24px;
}
.cms-page-content li {
  margin-bottom: 6px;
}
.cms-page-content a {
  color: var(--fg-1);
  text-decoration: underline;
}
.cms-page-content a:hover {
  text-decoration: none;
}
.cms-page-content blockquote {
  border-left: 3px solid var(--border-default);
  margin: 16px 0;
  padding: 4px 16px;
  color: var(--fg-2);
  font-style: italic;
}
.cms-page-content img {
  max-width: 100%;
  height: auto;
}
.cms-page-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 16px;
}
.cms-page-content table th, .cms-page-content table td {
  border: 1px solid var(--color-grey3);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.cms-page-content table th {
  background: var(--bg-muted);
  font-weight: 600;
}
.cms-page-content hr {
  border: 0;
  border-top: 1px solid var(--color-grey3);
  margin: 24px 0;
}

.cms-faq-list {
  margin-top: 40px;
}

.faq-page__topic {
  max-width: 860px;
  margin: var(--space-40) auto 0;
}

.faq-page__topic-title {
  margin: 0 0 var(--space-12);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media screen and (max-width: 640px) {
  .profile-page__breadcrumb {
    display: none;
  }
  .profile-page,
  .profile-page__wrap {
    overflow-x: clip;
  }
  .profile-page__welcome-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 22px 16px;
    margin: 0;
    border-bottom: 1px solid var(--color-grey3);
    background: var(--bg-app);
  }
  .profile-page__welcome-header .profile-page__eyebrow {
    display: none;
  }
  .profile-page__welcome-body {
    grid-column: 2;
    min-width: 0;
    gap: 3px;
  }
  .profile-page__welcome-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--fg-1);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .profile-page__welcome-meta {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--fg-3);
    letter-spacing: 0.2px;
    margin: 3px 0 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .profile-page__welcome-meta span + span::before {
    content: " · ";
    opacity: 0.6;
  }
  .profile-page__welcome-avatar {
    grid-column: 1;
    width: 54px;
    height: 54px;
    border-radius: 0;
    background: var(--bg-placeholder);
    color: var(--fg-1);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    user-select: none;
    letter-spacing: 0;
  }
  .profile-page__logout {
    grid-column: 3;
    justify-self: end;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-base) ease, color var(--duration-base) ease;
  }
  a.profile-page__logout {
    color: var(--color-border);
  }
  .profile-page__logout:hover, .profile-page__logout:active {
    background: var(--color-border);
    color: var(--color-white);
    border-color: var(--color-border);
  }
  a.profile-page__logout:hover,
  a.profile-page__logout:active {
    color: var(--color-white);
  }
  .profile-page__card {
    margin-bottom: var(--space-12);
  }
  .profile-page__card-head {
    margin-bottom: var(--space-16);
  }
  .profile-page__field-label {
    font-size: 10px;
    letter-spacing: 1.4px;
  }
  .profile-page__field-value {
    font-size: 13px;
    padding: 4px 0 8px;
  }
  .profile-page__address-card {
    padding: 16px 18px 0;
  }
  .profile-page__address-card-head {
    margin-bottom: 12px;
  }
  .profile-page__address-card-actions {
    padding: 14px 0;
  }
  .profile-page__address-card-edit, .profile-page__address-card-delete {
    padding: 8px 0;
  }
  .profile-page__add-card {
    min-height: 140px;
    padding: 20px 18px;
  }
  .profile-page__order-details {
    gap: var(--space-12);
    margin-bottom: var(--space-12);
  }
  .profile-page__order-detail-title {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .profile-page__order-detail-item {
    font-size: 12px;
    line-height: 1.45;
  }
  .profile-page__order-products {
    gap: var(--space-12);
    margin-bottom: var(--space-16);
  }
  .profile-page__order-product {
    gap: var(--space-12);
    padding: var(--space-12) 0;
  }
  .profile-page__order-product-brand {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .profile-page__order-product-title {
    font-size: 13px;
    line-height: 1.35;
  }
  .profile-page__order-product-meta {
    font-size: 11px;
  }
  .profile-page__order-product-price-main {
    font-size: 13px;
  }
  .profile-page__order-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }
  .profile-page__order-actions-row > * {
    width: 100%;
    min-width: 0;
  }
  .profile-page__order-action-btn {
    min-width: 0;
    width: 100%;
    padding: 12px 16px;
    min-height: 44px;
  }
  .profile-page__order-bank {
    padding: var(--space-12) var(--space-16);
    font-size: 11px;
    line-height: 1.55;
    word-break: break-word;
  }
  .profile-page__order-bank-title {
    font-size: 10px;
    letter-spacing: 1.2px;
  }
  .profile-page__order-note {
    padding: var(--space-10) var(--space-12);
    font-size: 11px;
    line-height: 1.5;
  }
  .profile-page--wishlist .ds-plp .ds-plp__header {
    padding: var(--space-12) 0 var(--space-16);
  }
  .profile-page--wishlist .ds-plp {
    padding-bottom: var(--space-30);
  }
  .profile-page__wallet-hero {
    padding: 20px 18px;
    gap: var(--space-12);
    margin-bottom: var(--space-10);
  }
  .profile-page__wallet-eyebrow {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .profile-page__wallet-amount-row {
    gap: 8px;
  }
  .profile-page__wallet-amount {
    font-size: 28px;
    letter-spacing: 0.3px;
  }
  .profile-page__wallet-cta {
    min-height: 48px;
  }
  .profile-page__transactions {
    margin-top: var(--space-20);
  }
  .profile-page__transactions-title {
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: var(--space-12);
    padding-bottom: 10px;
  }
  .profile-page__transaction {
    padding: 12px 2px;
    column-gap: var(--space-10);
  }
  .profile-page__transaction-title {
    font-size: 13px;
    line-height: 1.3;
  }
  .profile-page__transaction-meta {
    font-size: 11px;
    gap: 2px 6px;
  }
  .profile-page__transaction-amount {
    font-size: 14px;
  }
  .profile-page__transaction-expired {
    font-size: 10px;
    letter-spacing: 0.6px;
  }
}
@media screen and (max-width: 640px) and (max-width: 480px) {
  .profile-page__wallet-amount {
    font-size: 24px;
  }
  .profile-page__wallet-hero {
    padding: 18px 16px;
  }
}
@media screen and (max-width: 640px) {
  .profile-page--wizard .profile-page__header {
    padding-top: var(--space-16);
    padding-bottom: 0;
  }
  .profile-page--wizard .profile-page__stepper {
    padding: var(--space-10) 0 var(--space-16);
    gap: var(--space-10);
    margin-bottom: var(--space-16);
  }
  .profile-page--wizard .profile-page__step {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .profile-page--wizard .profile-page__step-num {
    font-size: 12px;
  }
  .profile-page--wizard .profile-page__step-separator {
    max-width: 40px;
  }
  .profile-page--wizard .profile-page__refund {
    padding: var(--space-16);
  }
  .profile-page--wizard .profile-page__refund-methods {
    gap: var(--space-12);
    padding-bottom: var(--space-16);
    margin-bottom: var(--space-16);
  }
  .profile-page--wizard .profile-page__refund-summary {
    margin-bottom: var(--space-16);
  }
  .profile-page--wizard .profile-page__refund-total {
    font-size: 24px;
  }
  .profile-page--wizard .profile-page__refund-total-label {
    font-size: 10px;
    letter-spacing: 1.2px;
  }
  .profile-page--wizard .profile-page__refund-info {
    font-size: 11px;
    line-height: 1.5;
  }
  .profile-page--wizard .profile-page__order-actions-row,
  .profile-page--wizard .profile-page__refund-actions {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: var(--space-16) calc(-1 * var(--space-16)) 0;
    padding: var(--space-12) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-app);
    border-top: 1px solid var(--color-grey3);
    display: flex;
    gap: var(--space-10);
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
  }
  .profile-page--wizard .profile-page__order-actions-row > *,
  .profile-page--wizard .profile-page__refund-actions > * {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 48px;
  }
  .profile-page--wizard .profile-page__refund-actions > .profile-page__refund-back {
    flex: 0 0 48px;
    padding: 0;
  }
  .profile-page--wizard .profile-page__refund-back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}
@media screen and (max-width: 640px) {
  .auth-checkout__intro {
    width: 100%;
    padding: 28px 16px 0;
  }
  .auth-checkout__intro-title {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.4px;
  }
  .auth-checkout__hero {
    padding: 32px 16px 36px;
  }
  .auth-checkout__hero::before {
    display: none;
  }
  .auth-checkout__hero-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 16px;
  }
  .auth-checkout__hero-rule {
    width: 24px;
  }
  .auth-checkout__hero-title {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -1.2px;
    margin-bottom: 14px;
  }
  .auth-checkout__hero-text {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: none;
  }
  .auth-checkout__hero-perks {
    gap: 28px;
  }
  .auth-checkout__hero-perk-num {
    font-size: 56px;
    letter-spacing: -1.4px;
  }
  .auth-checkout__hero-perk-label {
    font-size: 10px;
    letter-spacing: 1.2px;
    margin-top: 6px;
  }
  .auth-checkout__hero-perk-sep {
    height: 60px;
  }
  .auth-checkout__hero-fineprint {
    font-size: 11px;
    margin-top: 22px;
    line-height: 1.5;
  }
  .auth-checkout__grid-wrap {
    width: 100%;
    padding: 24px 16px 40px;
  }
  .auth-checkout__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: none;
    background: transparent;
  }
  .auth-checkout__path {
    padding: 24px 20px;
    border: 1px solid var(--color-grey3);
    border-right: 1px solid var(--color-grey3);
  }
  .auth-checkout__path-title {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .auth-checkout__path-num {
    font-size: 12px;
  }
  .auth-checkout__path-text {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .auth-checkout__perks {
    gap: 10px;
    margin-bottom: 22px;
  }
  .auth-checkout__perks li {
    font-size: 13px;
  }
  .auth-checkout__path--register .auth-checkout__path-text {
    color: rgba(255, 255, 255, 0.85);
  }
}
/* ============================================================================
   Category landing — generic foundations
   ----------------------------------------------------------------------------
   Brand-agnostic structural styles for sections that exist regardless of
   skin. The `.brand-{key}` SCSS files override tokens (colors, fonts) but
   inherit layout rules from here. Keep this file SHORT — only structural
   rules that won't change between Dresses, Intimate, and any future skin.
   ============================================================================ */
/* ---------------------------------------------------------------------------
   FOUC kill (defense in depth):

   Two body classes cooperate to eliminate the PLP-flash window:

     · `.has-active-landing` is set server-side via the preflight when the
        landing IS confirmed active for the current URL. Stays on through the
        whole pageview. Hides PLP permanently.

     · `.landing-pending` is a transient state. Server sets it on initial load
        whenever the URL even POTENTIALLY has a landing. Client (`landing.js`
        .run block) keeps it through every ui-router transition and only
        removes it when the LandingApi resolves. This kills the in-SPA flash
        (PDP → category, home → category, hover prefetch → click).

   Both classes hide `.ds-plp` so the product grid never paints before
   we've decided which surface (landing or PLP) should win.
   --------------------------------------------------------------------------- */
body.has-active-landing .ds-plp,
body.landing-pending .ds-plp {
  display: none;
}

/* Suppress the breadcrumb + template HTML that sit alongside .ds-plp while
   the landing decision is pending — they belong to the PLP context. */
body.landing-pending .breadcrumb_wrapper,
body.landing-pending .banner_container,
body.has-active-landing .breadcrumb_wrapper,
body.has-active-landing .banner_container {
  display: none;
}

/* Mirror the body class on <main> too — the brand skin SCSS hooks off
   `.brand-{skin}` directly on <main>, and we want the surface flipped to the
   landing tone (cream / blush / etc.) immediately rather than after Angular
   ng-class evaluates. */
body.has-active-landing main.app-content,
body.landing-pending main.app-content {
  min-height: 100vh;
}

.category-landing {
  width: 100%;
}
.category-landing__sections {
  display: block;
}
.category-landing__section {
  position: relative;
}
.category-landing__section--hidden {
  display: none;
}
.category-landing__preview-badge {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  padding: 8px 14px;
  background: rgba(255, 196, 0, 0.95);
  color: var(--fg-1);
  font: 500 12px/1 "Jost", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: var(--shadow-popover);
}

/* ── Tile atom ─────────────────────────────────────────────────────────── */
.landing-tile {
  /* When a scrim/overlay is shown, the caption sits over a darkened band, so
     caption text must be light to stay legible. Base default; skins whose
     labels are otherwise dark (e.g. swimwear --sw-ink) override this inside
     their own scope at higher specificity. */
}

/* The t-landing-tile directive renders as an outer <t-landing-tile> custom
   element wrapping the inner <a class="landing-tile">. CSS Grid would treat
   the wrapper as the grid item, ignoring inline grid-column declarations on
   the inner anchor. `display: contents` tells the layout engine to skip the
   wrapper entirely so the <a> becomes the direct grid child and respects
   span declarations from _tile.html. */
t-landing-tile {
  display: contents;
}

/* ── Featured lookbook ────────────────────────────────────────────────── */
.landing-featured-lookbook__layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.landing-featured-lookbook__cover {
  position: relative;
  min-height: 520px;
}
.landing-featured-lookbook__cover-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--dresses-rose);
}
.landing-featured-lookbook__cover-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 6px 12px;
  background: var(--dresses-bg);
  font: italic 400 14px var(--font-display);
}
.landing-featured-lookbook__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.landing-featured-lookbook__minis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.landing-featured-lookbook__mini {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-placeholder);
}

/* ── Editorial split ──────────────────────────────────────────────────── */
.landing-editorial-split__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.landing-editorial-split__media {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-placeholder);
}
.landing-editorial-split__panel {
  max-width: 440px;
}
.landing-editorial-split__step {
  font: italic 300 56px/1 serif;
  margin-bottom: 18px;
}
.landing-editorial-split[data-direction=right] .landing-editorial-split__layout > .landing-editorial-split__panel {
  order: -1;
}

/* ── Cross-sell bridge ────────────────────────────────────────────────── */
.landing-cross-sell__strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.landing-cross-sell__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.landing-cross-sell__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  padding: 36px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: var(--dresses-bg-deep);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.landing-cross-sell__card--photo {
  background: transparent;
  border: none;
}
.landing-cross-sell__card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.landing-cross-sell__card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(31, 27, 24, 0.65) 100%);
}
.landing-cross-sell__card-body {
  position: relative;
  z-index: 1;
}
.landing-cross-sell__card h3 {
  margin: 0 0 12px;
  font: 400 40px/1 "Jost", sans-serif;
}
.landing-cross-sell__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 11px/1 "Jost", sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.landing-cross-sell__card--photo .landing-cross-sell__card-body {
  color: var(--dresses-bg);
}
.landing-cross-sell__card--photo .landing-cross-sell__card-body h3 {
  color: var(--dresses-bg);
}

/* ── Personal shopper ─────────────────────────────────────────────────── */
.landing-personal-shopper__layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px 48px;
  background: var(--dresses-bg-deep);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.landing-personal-shopper__title {
  margin: 14px 0 10px;
  font: 400 32px/1.1 "Jost", sans-serif;
}
.landing-personal-shopper__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.landing-personal-shopper__footnote {
  font: 400 12px "Jost", sans-serif;
  color: var(--overlay);
}

/* ── Newsletter ───────────────────────────────────────────────────────── */
.landing-newsletter {
  --landing-error-on-dark: #ffb3b3;
  padding: 90px 0;
  color: inherit;
}
.landing-newsletter__layout {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.landing-newsletter__form {
  display: flex;
  max-width: 520px;
  margin: 32px auto 0;
  border-bottom: 1px solid currentColor;
  opacity: 0.95;
}
.landing-newsletter__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: 400 16px "Jost", sans-serif;
  padding: 12px 0;
  letter-spacing: 0.2px;
}
.landing-newsletter__button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font: 500 12px "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 12px 0;
}
.landing-newsletter__consent {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font: 400 12px "Jost", sans-serif;
  opacity: 0.75;
  cursor: pointer;
}
.landing-newsletter__consent input[type=checkbox] {
  margin: 0;
  cursor: pointer;
}
.landing-newsletter__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-newsletter__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.landing-newsletter__error {
  margin: 16px auto 0;
  max-width: 520px;
  font: 400 12px "Jost", sans-serif;
  color: var(--landing-error-on-dark);
}

/* ── Sub-brand sub-nav ─────────────────────────────────────────────────── */
.landing-subnav {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.landing-subnav__inner {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 18px 0;
  gap: 32px;
}
.landing-subnav__brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.landing-subnav__brand-pre {
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
}
.landing-subnav__brand-mark {
  font: italic 400 24px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.landing-subnav__shortcuts {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.landing-subnav__shortcut {
  position: relative;
  text-decoration: none;
  font: 500 12px/1 "Jost", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: inherit;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: all var(--duration-fast) ease;
}
.landing-subnav__shortcut:hover {
  opacity: 0.7;
}
.landing-subnav__edit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid currentColor;
  font: italic 400 14px/1 var(--font-display);
  transition: all var(--duration-fast) ease;
}
.landing-subnav__edit-badge {
  font: 500 10px "Jost", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 2px 5px;
  background: currentColor;
}

/* ============================================================================
   MOBILE BREAKPOINTS
   ----------------------------------------------------------------------------
   Two-tier mobile strategy:
     · ≤768px (tablet portrait + smaller) — main mobile breakpoint. Stack
       multi-column layouts, shrink fonts, tighten paddings.
     · ≤480px (small phone) — extra-tight overrides where the 768px values
       still feel too generous.

   Each skin can tighten further inside its own file (use the same breakpoint
   values for consistency). Where a skin styles a section more specifically
   (.brand-swimwear .landing-ugc …), the skin repeats these collapses in its
   own mobile block instead of this file forcing them with !important.
   ============================================================================ */
@media (max-width: 768px) {
  /* ── Hero slider (Swimwear) — stack to 1-col, smaller everything ── */
  .landing-hero-slider {
    min-height: auto;
  }
  .landing-hero-slider__slide {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .landing-hero-slider__media {
    min-height: 280px;
    aspect-ratio: 4/5;
  }
  .landing-hero-slider__slide-eyebrow {
    top: 16px;
    left: 20px;
    font-size: 10px;
    letter-spacing: 2px;
  }
  .landing-hero-slider__slide-number {
    bottom: 16px;
    left: 20px;
    font-size: 40px;
  }
  .landing-hero-slider__slide-number small {
    font-size: 11px;
    margin-left: 8px;
  }
  .landing-hero-slider__panel {
    padding: 32px 20px 40px;
    gap: 14px;
  }
  .landing-hero-slider__title {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  .landing-hero-slider__sub {
    font-size: 13px;
    line-height: 1.6;
  }
  .landing-hero-slider__actions {
    gap: 12px;
    margin-top: 8px;
  }
  .landing-hero-slider__promo {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .landing-hero-slider__dots {
    /* Re-position dots to bottom of media (now top half of slide) */
    bottom: auto;
    top: 256px;
    left: 50%;
    transform: translateX(-50%);
  }
  .landing-hero-slider__arrows {
    top: 16px;
    right: 16px;
  }
  .landing-hero-slider__arrow {
    width: 36px;
    height: 36px;
  }
  /* ── SubNav (legacy + Swimwear) ─────────────────────────────────── */
  .landing-subnav > div, .landing-subnav__inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .category-landing__section--subnav {
    /* Sticky is keep but we make it more compact on mobile */
  }
  .category-landing__section--subnav .landing-subnav {
    padding: 8px 0;
  }
  .landing-subnav__inner,
  .landing-subnav > div {
    padding: 10px 0;
  }
  .landing-subnav__shortcuts,
  .landing-subnav nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 16px;
  }
  .landing-subnav__shortcuts::-webkit-scrollbar,
  .landing-subnav nav::-webkit-scrollbar {
    display: none;
  }
  .landing-subnav__shortcuts a,
  .landing-subnav nav a {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 1px;
    padding-bottom: 4px;
  }
  .landing-subnav__edit,
  .landing-subnav a[href="#all"] {
    display: none; /* hide the "All" pill on mobile to save space */
  }
  /* ── Single-image / 2-col layouts → stack ───────────────────────── */
  .landing-featured-lookbook__layout,
  .landing-editorial-split__layout,
  .landing-cross-sell__cards,
  .landing-personal-shopper__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* ── Color picker — 5-col instead of 10 ─────────────────────────── */
  .landing-color-picker {
    padding: 56px 0;
  }
  .landing-color-picker__inner {
    width: 92%;
  }
  .landing-color-picker__head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }
  .landing-color-picker__title {
    font-size: 28px;
  }
  .landing-color-picker__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .landing-color-picker__name {
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  /* ── UGC grid — 3-col ──────────────────────────────────────────── */
  .landing-ugc {
    padding: 56px 0 32px;
  }
  .landing-ugc__inner {
    width: 92%;
  }
  .landing-ugc__head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .landing-ugc__title {
    font-size: 32px;
  }
  .landing-ugc__body {
    font-size: 13px;
  }
  .landing-ugc__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .landing-ugc__tile-meta {
    opacity: 1; /* always visible on touch */
    font-size: 11px;
  }
  /* ── Finish the look — stack ────────────────────────────────────── */
  .landing-finish-the-look {
    padding: 48px 0;
  }
  .landing-finish-the-look__inner {
    width: 92%;
  }
  .landing-finish-the-look__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .landing-finish-the-look__editorial {
    min-height: 380px;
  }
  .landing-finish-the-look__editorial-copy {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .landing-finish-the-look__editorial-title {
    font-size: 28px;
  }
  .landing-finish-the-look__editorial-body {
    font-size: 12px;
  }
  .landing-finish-the-look__items {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .landing-finish-the-look__item {
    height: 200px;
  }
  /* ── SEO footer — stack ─────────────────────────────────────────── */
  .landing-seo-footer {
    padding: 48px 0 56px;
  }
  .landing-seo-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    width: 92%;
  }
  .landing-seo-footer__title {
    font-size: 28px;
    margin-bottom: 14px;
  }
  .landing-seo-footer__body {
    font-size: 13px;
  }
  .landing-seo-footer__crosslink-label {
    font-size: 18px;
  }
  /* ── Shop by Need (Intimate Everyday) — 3-col instead of 6 ───────── */
  .landing-shop-by-need__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .landing-shop-by-need__tile {
    padding: 18px 8px;
    gap: 10px;
  }
  .landing-shop-by-need__icon {
    width: 24px;
    height: 24px;
  }
  .landing-shop-by-need__label {
    font-size: 10px;
    letter-spacing: 0.8px;
  }
  /* ── Reviews — stack to single column ──────────────────────────── */
  .landing-reviews__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .landing-reviews__card {
    padding: 24px;
  }
  .landing-reviews__quote {
    font-size: 16px;
    line-height: 1.45;
  }
}
/* ── Small phones (≤480px) — extra tightening where needed ────────── */
@media (max-width: 480px) {
  .landing-hero-slider__title {
    font-size: 40px;
  }
  .landing-hero-slider__media {
    min-height: 240px;
  }
  .landing-hero-slider__dots {
    top: 218px;
  }
  /* Color picker — 4-col on the smallest phones so swatches stay tappable */
  .landing-color-picker__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  /* UGC — drop from 3-col to 2-col on the smallest phones */
  .landing-ugc__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-shop-by-need__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-finish-the-look__items {
    grid-template-columns: 1fr;
  }
  .landing-finish-the-look__item {
    height: 180px;
  }
}
.landing-tile[data-span="2"] {
  grid-column: span 2;
}

.landing-section.landing-featured-lookbook {
  background: var(--d-bg-deep, var(--bg-muted));
}

.brand-intimate .landing-section.landing-editorial-split {
  background: var(--d-bg-deep);
}

.landing-newsletter[data-variant=on-dark] .landing-section__title {
  color: var(--d-bg, var(--fg-inverse));
}

.landing-newsletter[data-variant=on-dark] .landing-section__eyebrow,
.landing-newsletter[data-variant=on-dark] .landing-section__body {
  color: color-mix(in srgb, var(--d-bg, var(--fg-inverse)) 70%, transparent);
}

.brand-intimate .landing-reviews .landing-section__head {
  padding-bottom: 20px;
  border-bottom: none;
  text-align: center;
}

/* ============================================================================
   Lookbook page — generic foundations
   ----------------------------------------------------------------------------
   Structural layout for /category/.../editions/{slug}/. Brand-specific
   typography / colour is overridden by .brand-{key} SCSS files (see
   _landing-dresses-skin.scss for the Dresses overrides).

   Hotspot pulse animation lives here so it works even when no brand skin is
   active (e.g. preview before publishing the parent landing settings).
   ============================================================================ */
.lookbook {
  width: 100%;
}

/* ── Hero without its photo ──────────────────────────────────────────────
   The canon hero is light text for a photo; on the light placeholder the text
   takes the skin's deep colour (After Dark: gold on the dark placeholder). The
   hero, the looks, the dots and the sheet are the canon's (ds/_lookbook.scss). */
.lookbook-hero--no-image {
  color: var(--d-deep, var(--fg-1));
}

.lookbook-hero--no-image .lookbook-hero__overlay {
  display: none;
}

.lookbook-hero--no-image .lookbook-hero__eyebrow,
.lookbook-hero--no-image .lookbook-hero__subtitle,
.lookbook-hero--no-image .lookbook-hero__credits {
  color: var(--d-muted, var(--fg-3));
}

/* ── Intro pull-quote ─────────────────────────────────────────────────── */
.lookbook-intro {
  padding: 100px 0 80px;
}
.lookbook-intro__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.lookbook-intro__open-quote {
  font: italic 400 56px/1 serif;
  margin-bottom: 24px;
  color: rgba(0, 0, 0, 0.4);
}
.lookbook-intro__body {
  margin: 0 0 24px;
  font: 400 18px/1.85 "Jost", sans-serif;
  text-wrap: pretty;
}
.lookbook-intro__attr {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: italic 400 14px serif;
  color: var(--overlay);
}
.lookbook-intro__attr > span {
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ── Diptych ──────────────────────────────────────────────────────────── */
.look-diptych {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 24px;
}
.look-diptych__media {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-placeholder);
}
.look-diptych__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: baseline;
}
.look-diptych__label {
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.look-diptych__text {
  font: 400 13px "Jost", sans-serif;
}

/* ── Text+Image ───────────────────────────────────────────────────────── */
.look-text-image {
  max-width: 1256px;
  margin: 0 auto;
  padding: 70px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.look-text-image__media {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-placeholder);
}
.look-text-image__eyebrow {
  display: inline-block;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.look-text-image__title {
  margin: 0 0 24px;
  font: 400 48px/1.05 "Jost", sans-serif;
}
.look-text-image__body {
  margin: 0;
  font: 400 14px/1.8 "Jost", sans-serif;
  max-width: 440px;
}
.look-text-image[data-direction=right] > .look-text-image__panel {
  order: -1;
}

/* ── Related edits ────────────────────────────────────────────────────── */
.lookbook-related {
  padding: 90px 0 100px;
}
.lookbook-related__inner {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
}
.lookbook-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.lookbook-related__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.lookbook-related__card-image {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-placeholder);
}
.lookbook-related__card-eyebrow {
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.lookbook-related__card h3 {
  margin: 0;
  font: 400 28px/1.2 "Jost", sans-serif;
}

@media (max-width: 768px) {
  .look-diptych,
  .look-text-image,
  .lookbook-related__grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================
   Trendo Dresses — brand skin
   ----------------------------------------------------------------------------
   All overrides scoped under `.brand-dresses` on <main>. The class is added
   by AppCtrl after the t-category-landing directive resolves the per-category
   config (skin = 'dresses'). When the user navigates away from a Dresses
   category, the class is removed and the default Trendo achromatic-and-red
   surface returns.

   Tokens live as CSS custom properties so the admin's palette tweak (admin
   can pick bordeaux | sage | mocha | noir) is one CSS variable swap away —
   no recompile.

   Sourced from design-system/ui_kits/web/DressesPrimitives.jsx:
     bordeaux palette + the display serif, var(--font-display) (Cormorant Infant).
   ============================================================================ */
.brand-dresses {
  /* ── Sub-brand sub-nav ─────────────────────────────────────────────── */
}
.brand-dresses .landing-subnav {
  background: var(--d-bg);
  border-bottom-color: var(--d-line);
  color: var(--d-text);
}
.brand-dresses .landing-subnav__brand-pre {
  color: var(--d-muted);
}
.brand-dresses .landing-subnav__brand-mark {
  color: var(--d-deep);
}
.brand-dresses .landing-subnav__shortcut {
  color: var(--d-text);
}
.brand-dresses .landing-subnav__shortcut:hover {
  color: var(--d-deep);
  opacity: 1;
}
.brand-dresses .landing-subnav__edit {
  color: var(--d-deep);
  border-color: var(--d-deep);
}
.brand-dresses .landing-subnav__edit:hover {
  background: var(--d-deep);
  color: var(--d-bg);
}
.brand-dresses .landing-subnav__edit-badge {
  color: var(--d-bg);
}
.brand-dresses {
  /* ── Featured lookbook ─────────────────────────────────────────────── */
}
.brand-dresses .landing-featured-lookbook__cover-badge {
  background: var(--d-bg);
  color: var(--d-deep);
  font: italic 400 14px var(--d-display);
}
.brand-dresses {
  /* ── Editorial split ───────────────────────────────────────────────── */
}
.brand-dresses .landing-editorial-split {
  background: var(--d-bg-deep);
}
.brand-dresses .landing-editorial-split__step {
  font: italic 300 56px/1 var(--d-display);
  color: var(--d-rose);
}
.brand-dresses {
  /* ── Cross-sell bridge ─────────────────────────────────────────────── */
}
.brand-dresses .landing-cross-sell__card {
  background: var(--d-bg-deep);
  border-color: var(--d-line);
}
.brand-dresses .landing-cross-sell__card h3 {
  font: italic 400 40px/1 var(--d-display);
  color: var(--d-deep);
}
.brand-dresses {
  /* ── Personal shopper ──────────────────────────────────────────────── */
}
.brand-dresses .landing-personal-shopper__layout {
  background: var(--d-bg-deep);
  border-color: var(--d-line);
}
.brand-dresses .landing-personal-shopper__title {
  font: italic 400 32px/1.1 var(--d-display);
  color: var(--d-deep);
}
.brand-dresses {
  /* ── Newsletter ────────────────────────────────────────────────────── */
  /* design-system DressesNewsletter: burgundy band, cream text, italic
     serif title (~48px), bottom-only input rule, uppercase "ЗАПИШИ СЕ →"
     submit, consent checkbox at 12px / muted cream below.                 */
}
.brand-dresses .landing-newsletter[data-variant=on-dark] {
  background: var(--d-deep);
  color: var(--d-bg);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__form {
  border-bottom-color: rgba(250, 246, 240, 0.4);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__input::placeholder {
  color: rgba(250, 246, 240, 0.55);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent {
  color: rgba(250, 246, 240, 0.55);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent a {
  color: rgba(250, 246, 240, 0.85);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent input[type=checkbox] {
  accent-color: var(--d-rose);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent.has-error {
  color: var(--d-rose);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__form.has-error {
  border-bottom-color: var(--d-rose);
}
.brand-dresses .landing-newsletter[data-variant=on-dark] .landing-newsletter__error {
  color: var(--d-rose);
}
.brand-dresses {
  /* PLP header — editorial replacement for the default ds-plp__header */
}
.brand-dresses .ds-plp__header-title {
  font: italic 400 72px/1 var(--d-display);
  letter-spacing: var(--d-display-tracking);
  color: var(--d-deep);
}
.brand-dresses .ds-plp__header-count {
  font: italic 400 14px var(--d-display);
  color: var(--d-muted);
}
.brand-dresses {
  /* Filter bar */
}
.brand-dresses .ds-plp-filters {
  border-color: var(--d-line);
}
.brand-dresses .ds-plp-filters .ds-filter__title {
  font: 500 12px "Jost", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--d-text);
}
.brand-dresses .ds-plp-filters .ds-filter__title:hover, .brand-dresses .ds-plp-filters .ds-filter__title.is-active {
  color: var(--d-deep);
}
.brand-dresses {
  /* Mobile sticky filter bar */
}
.brand-dresses .ds-plp-toolbar {
  background: var(--d-bg);
  border-color: var(--d-line);
}

/* ============================================================================
   Trendo Intimate — brand skin
   ----------------------------------------------------------------------------
   Sister-brand of Dresses (shares the display serif, Cormorant Infant, and
   the burgundy --i-deep token, deliberately the same as --d-deep) but with
   TWO tonal tiers:

     --ev-*  Everyday   — warm cream off-white, blush + sand accents
     --ad-*  After Dark — soft-black surface, wine + muted gold (used by the
                          TwoWorldsSplit section only on the master landing;
                          full /after-dark sub-landing TBD in v1.1)

   Mirrored 1:1 from design-system/ui_kits/web/IntimatePrimitives.jsx tokens.
   ============================================================================ */
.brand-intimate {
  /* ── Sub-brand sub-nav — wordmark "Intimate" in italic serif ──────── */
}
.brand-intimate .landing-subnav {
  background: var(--ev-bg);
  border-bottom-color: var(--ev-line);
  color: var(--ev-text);
}
.brand-intimate .landing-subnav__brand-pre {
  color: var(--ev-muted);
}
.brand-intimate .landing-subnav__brand-mark {
  color: var(--ev-deep);
}
.brand-intimate .landing-subnav__shortcut {
  color: var(--ev-text);
}
.brand-intimate .landing-subnav__shortcut:hover {
  color: var(--ev-deep);
  opacity: 1;
}
.brand-intimate .landing-subnav__edit {
  color: var(--ev-deep);
  border-color: var(--ev-deep);
}
.brand-intimate .landing-subnav__edit:hover {
  background: var(--ev-deep);
  color: var(--ev-bg);
}
.brand-intimate .landing-subnav__edit-badge {
  color: var(--ev-bg);
}
.brand-intimate {
  /* ── Featured lookbook ─────────────────────────────────────────────── */
}
.brand-intimate .landing-featured-lookbook__cover-badge {
  background: var(--ev-bg);
  color: var(--ev-deep);
  font: italic 400 14px var(--font-display);
}
.brand-intimate {
  /* ── Editorial split ───────────────────────────────────────────────── */
}
.brand-intimate .landing-editorial-split {
  background: var(--ev-bg-deep);
}
.brand-intimate .landing-editorial-split__step {
  font: italic 300 56px/1 var(--font-display);
  color: var(--ev-blush);
}
.brand-intimate {
  /* ── Cross-sell bridge ─────────────────────────────────────────────── */
}
.brand-intimate .landing-cross-sell__card {
  background: var(--ev-bg-deep);
  border-color: var(--ev-line);
}
.brand-intimate .landing-cross-sell__card h3 {
  font: italic 400 40px/1 var(--font-display);
  color: var(--ev-deep);
}
.brand-intimate {
  /* ── Personal shopper ──────────────────────────────────────────────── */
}
.brand-intimate .landing-personal-shopper__layout {
  background: var(--ev-bg-deep);
  border-color: var(--ev-line);
}
.brand-intimate .landing-personal-shopper__title {
  font: italic 400 32px/1.1 var(--font-display);
  color: var(--ev-deep);
}
.brand-intimate {
  /* ── Newsletter ────────────────────────────────────────────────────── */
}
.brand-intimate .landing-newsletter[data-variant=on-dark] {
  background: var(--ev-deep);
  color: var(--ev-bg);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__form {
  border-bottom-color: rgba(252, 250, 247, 0.4);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__input::placeholder {
  color: rgba(252, 250, 247, 0.55);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent {
  color: rgba(252, 250, 247, 0.55);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent a {
  color: rgba(252, 250, 247, 0.85);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent input[type=checkbox] {
  accent-color: var(--ev-blush);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__consent.has-error {
  color: var(--ev-blush);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__form.has-error {
  border-bottom-color: var(--ev-blush);
}
.brand-intimate .landing-newsletter[data-variant=on-dark] .landing-newsletter__error {
  color: var(--ev-blush);
}
.brand-intimate {
  /* ── PLP overrides (when intimate skin is on a filtered category PLP) ─ */
}
.brand-intimate .ds-plp__header-title {
  font: italic 400 72px/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ev-deep);
}
.brand-intimate .ds-plp__header-count {
  font: italic 400 14px var(--font-display);
  color: var(--ev-muted);
}
.brand-intimate {
  /* ──────────────────────────────────────────────────────────────────────
     TWO-WORLDS SPLIT — the signature block of the master Intimate landing.
     50/50 grid: Everyday (cream, blush) left, After Dark (soft-black, gold)
     right. Equal weight, hover scale 1.03 on each panel.
     ────────────────────────────────────────────────────────────────────── */
  /* ──────────────────────────────────────────────────────────────────────
     SHOP BY NEED — Everyday alternative taxonomy block. 6 bordered icon
     tiles, single SVG + uppercase label. Hover ramps border + background
     to deep burgundy. Mirrors design-system/IntimateEveryday ShopByNeed.
     ────────────────────────────────────────────────────────────────────── */
}
.brand-intimate .landing-shop-by-need {
  background: var(--ev-bg);
}
.brand-intimate .landing-shop-by-need__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, 1fr);
}
.brand-intimate .landing-shop-by-need__grid[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.brand-intimate .landing-shop-by-need__grid[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.brand-intimate .landing-shop-by-need__grid[data-cols="5"] {
  grid-template-columns: repeat(5, 1fr);
}
.brand-intimate .landing-shop-by-need__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 14px;
  border: 1px solid var(--ev-line);
  background: var(--ev-bg);
  color: var(--ev-text);
  text-decoration: none;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.brand-intimate .landing-shop-by-need__tile:hover {
  border-color: var(--ev-deep);
  background: var(--ev-bg-deep);
}
.brand-intimate .landing-shop-by-need__tile:hover .landing-shop-by-need__icon {
  color: var(--ev-deep);
}
.brand-intimate .landing-shop-by-need__icon {
  color: var(--ev-deep);
}
.brand-intimate .landing-shop-by-need__label {
  font: 500 12px/1.3 "Jost", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ev-text);
}
.brand-intimate {
  /* ──────────────────────────────────────────────────────────────────────
     CUSTOMER REVIEWS — Everyday social proof block. 3 review cards in a
     centered row, each with quote icon, italic Cormorant quote, customer
     name + product reference footer. Mirrors design-system/IntimateEveryday
     EverydayReviews 1:1.
     ────────────────────────────────────────────────────────────────────── */
}
.brand-intimate .landing-reviews {
  background: var(--ev-bg);
}
.brand-intimate .landing-reviews__grid {
  display: grid;
  gap: 24px;
  margin-top: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.brand-intimate .landing-reviews__grid[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}
.brand-intimate .landing-reviews__grid[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}
.brand-intimate .landing-reviews__card {
  background: var(--ev-bg-deep);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.brand-intimate .landing-reviews__quote-icon {
  color: var(--ev-deep);
}
.brand-intimate .landing-reviews__quote {
  margin: 0;
  font: italic 400 20px/1.5 var(--font-display);
  color: var(--ev-deep);
  text-wrap: pretty;
}
.brand-intimate .landing-reviews__footer {
  border-top: 1px solid var(--ev-line);
  padding-top: 14px;
}
.brand-intimate .landing-reviews__who {
  font: 500 12px "Jost", sans-serif;
  letter-spacing: 1.2px;
  color: var(--ev-text);
  text-transform: uppercase;
}
.brand-intimate .landing-reviews__product {
  margin-top: 3px;
  font: italic 400 13px var(--font-display);
  color: var(--ev-muted);
}
.brand-intimate {
  /* ─────────────────────────────────────────────────────────────────
     MOBILE OVERRIDES — Intimate Everyday tier. Font/padding adjustments
     on top of the generic foundations breakpoints.
     ───────────────────────────────────────────────────────────────── */
}
@media (max-width: 768px) {
  .brand-intimate {
    /* Reviews — quote text + author/product */
  }
  .brand-intimate .landing-reviews__quote {
    font: italic 400 16px/1.5 var(--font-display);
  }
  .brand-intimate .landing-reviews__who {
    font-size: 11px;
  }
  .brand-intimate .landing-reviews__product {
    font-size: 12px;
  }
  .brand-intimate {
    /* Shop by need — center-aligned head, smaller fonts */
  }
  .brand-intimate .landing-shop-by-need__tile {
    padding: 16px 8px;
  }
  .brand-intimate .landing-shop-by-need__label {
    font-size: 10px;
    letter-spacing: 0.8px;
    line-height: 1.2;
  }
  .brand-intimate {
    /* Cross-sell bridge cards */
  }
  .brand-intimate .landing-cross-sell__card h3 {
    font: italic 400 28px/1 var(--font-display);
  }
  .brand-intimate {
    /* The foundations' column collapses: the grids above (and their
       [data-cols] variants) are more specific. */
  }
  .brand-intimate .landing-shop-by-need__grid,
  .brand-intimate .landing-shop-by-need__grid[data-cols] {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand-intimate .landing-reviews__grid,
  .brand-intimate .landing-reviews__grid[data-cols] {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .brand-intimate .landing-shop-by-need__grid,
  .brand-intimate .landing-shop-by-need__grid[data-cols] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* After-dark tier mobile fixes — apply inside the tier-after-dark scope */
@media (max-width: 768px) {
  .brand-intimate.tier-after-dark .landing-reviews__quote {
    color: var(--ad-text);
  }
}

/* ============================================================================
   AFTER DARK TIER — applied IN ADDITION to .brand-intimate when an Edition
   opts into requires_age_gate (LookbookCtrl broadcasts 'landing.brandTier' →
   'after-dark', AppCtrl appends the .tier-after-dark class). All Everyday
   tokens are remapped to the After Dark palette so every landing section
   automatically picks up the dark surface, wine accent and muted gold
   highlight without needing per-section overrides.

   Selector specificity: `.brand-intimate.tier-after-dark` so it always wins
   over the bare `.brand-intimate` defaults on the body.
   ============================================================================ */
.brand-intimate.tier-after-dark {
  /* Sub-nav — wordmark "After Dark" in gold */
}
.brand-intimate.tier-after-dark .landing-subnav {
  background: var(--ad-bg);
  border-bottom-color: var(--ad-line);
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark .landing-subnav__brand-pre {
  color: var(--ad-muted);
}
.brand-intimate.tier-after-dark .landing-subnav__brand-mark {
  color: var(--ad-highlight);
}
.brand-intimate.tier-after-dark .landing-subnav__shortcut {
  color: var(--ad-muted);
}
.brand-intimate.tier-after-dark .landing-subnav__shortcut:hover {
  color: var(--ad-highlight);
  opacity: 1;
}
.brand-intimate.tier-after-dark .landing-subnav__edit {
  color: var(--ad-highlight);
  border-color: var(--ad-highlight);
}
.brand-intimate.tier-after-dark .landing-subnav__edit:hover {
  background: var(--ad-highlight);
  color: var(--ad-bg);
}
.brand-intimate.tier-after-dark {
  /* Editorial split */
}
.brand-intimate.tier-after-dark .landing-editorial-split {
  background: var(--ad-surface);
}
.brand-intimate.tier-after-dark .landing-editorial-split__step {
  color: var(--ad-accent);
}
.brand-intimate.tier-after-dark {
  /* Cross-sell bridge */
}
.brand-intimate.tier-after-dark .landing-cross-sell__card {
  background: var(--ad-surface);
  border-color: var(--ad-line);
}
.brand-intimate.tier-after-dark .landing-cross-sell__card h3 {
  color: var(--ad-highlight);
}
.brand-intimate.tier-after-dark {
  /* Personal shopper */
}
.brand-intimate.tier-after-dark .landing-personal-shopper__layout {
  background: var(--ad-surface);
  border-color: var(--ad-line);
}
.brand-intimate.tier-after-dark .landing-personal-shopper__title {
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark {
  /* Reviews — dark surface variant */
}
.brand-intimate.tier-after-dark .landing-reviews {
  background: var(--ad-bg);
}
.brand-intimate.tier-after-dark .landing-reviews__card {
  background: var(--ad-surface);
}
.brand-intimate.tier-after-dark .landing-reviews__quote-icon {
  color: var(--ad-highlight);
}
.brand-intimate.tier-after-dark .landing-reviews__quote {
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark .landing-reviews__footer {
  border-top-color: var(--ad-line);
}
.brand-intimate.tier-after-dark .landing-reviews__who {
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark .landing-reviews__product {
  color: var(--ad-muted);
}
.brand-intimate.tier-after-dark {
  /* Shop by Need — dark variant (border + icon in muted gold) */
}
.brand-intimate.tier-after-dark .landing-shop-by-need {
  background: var(--ad-bg);
}
.brand-intimate.tier-after-dark .landing-shop-by-need__tile {
  border-color: var(--ad-line);
  background: var(--ad-bg);
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark .landing-shop-by-need__tile:hover {
  border-color: var(--ad-highlight);
  background: var(--ad-surface);
}
.brand-intimate.tier-after-dark .landing-shop-by-need__tile:hover .landing-shop-by-need__icon {
  color: var(--ad-highlight);
}
.brand-intimate.tier-after-dark .landing-shop-by-need__icon {
  color: var(--ad-highlight);
}
.brand-intimate.tier-after-dark .landing-shop-by-need__label {
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark {
  /* Newsletter — wine on black on-dark variant */
}
.brand-intimate.tier-after-dark .landing-newsletter {
  background: var(--ad-bg);
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark .landing-newsletter__form {
  border-bottom-color: var(--ad-highlight);
}
.brand-intimate.tier-after-dark .landing-newsletter__input, .brand-intimate.tier-after-dark .landing-newsletter__input::placeholder {
  color: rgba(242, 237, 232, 0.78);
}
.brand-intimate.tier-after-dark .landing-newsletter[data-variant=on-dark] {
  background: var(--ad-surface);
}
.brand-intimate.tier-after-dark {
  /* ════════════════════════════════════════════════════════════════════
     After Dark editorial treatment — design-system IntimateAfterDark.jsx.
     Tonal placeholders + editorial hero + mood tiles + journal + privacy.
     ════════════════════════════════════════════════════════════════════ */
  /* Image slots without an uploaded photo: the one neutral placeholder of
     the skin (--d-placeholder = --ad-surface-2 in After Dark) — no tones
     or stripes (canon v2). A real image overrides it via the element's
     inline background-image. */
}
.brand-intimate.tier-after-dark .landing-editorial-split .landing-editorial-split__media {
  background-color: var(--d-placeholder);
  background-size: cover;
  background-position: center;
}
.brand-intimate.tier-after-dark {
  /* ── Mood tiles — gold "mood" eyebrow, italic serif title + phrase ───── */
}
.brand-intimate.tier-after-dark .landing-tile {
  /* Shop-by-category count variant — label left + count right at bottom */
}
.brand-intimate.tier-after-dark .landing-tile__bottom-row {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  color: var(--ad-text);
}
.brand-intimate.tier-after-dark .landing-tile__bottom-label {
  font: italic 400 24px/1 var(--font-display);
}
.brand-intimate.tier-after-dark .landing-tile__count {
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 1.2px;
  color: var(--ad-muted);
  white-space: nowrap;
}

/* After Dark is a fully dark, immersive edition. The global footer carries a
   90px top margin; on light landings it's invisible, but against the near-black
   After Dark surface it reveals the white page background as a strip above the
   footer. Darken the page-container (only when it hosts an After Dark landing)
   so the dark surface runs uninterrupted into the footer. */
.page-container:has(> main.brand-intimate.tier-after-dark) {
  background: var(--ad-bg);
}

/* ============================================================================
   AGE GATE 18+ modal — surfaces in front of any landing content when the
   active Edition has requires_age_gate=1. Tonal palette matches After Dark
   (wine + gold on charcoal) regardless of the host body skin, so the gate
   reads consistently across surfaces. Always-on-top with a full-bleed
   backdrop. Visible only when LookbookCtrl sets $scope.ageGateOpen=true.
   ============================================================================ */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.age-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 14, 0.92);
  backdrop-filter: blur(6px);
}
.age-gate__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  padding: 56px 48px 40px;
  background: var(--ad-bg);
  color: var(--ad-text);
  border: 1px solid rgba(184, 149, 106, 0.4); /* muted gold trim */
  box-shadow: var(--shadow-modal);
  text-align: center;
  font-family: "Jost", sans-serif;
}
.age-gate__eyebrow {
  font: 500 11px/1 "Jost", sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ad-highlight);
  margin-bottom: 18px;
}
.age-gate__title {
  margin: 0 0 18px;
  font: italic 400 40px/1.1 var(--font-display);
  color: var(--ad-text);
  text-wrap: balance;
}
.age-gate__body {
  margin: 0 0 28px;
  font: 400 14px/1.6 "Jost", sans-serif;
  color: rgba(242, 237, 232, 0.75);
}
.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}
.age-gate__legal {
  margin: 0;
  font: 400 11px/1.5 "Jost", sans-serif;
  color: rgba(242, 237, 232, 0.5);
}

/* Edition page in sections-mode — no extra wrapping section needed; we just
   ensure the .edition-sections container has no rogue margin/padding. */
.edition-sections {
  background: var(--d-bg, var(--ev-bg));
  min-height: 100vh;
}

/* ============================================================================
   Trendo Swimwear — brand skin
   ----------------------------------------------------------------------------
   All overrides scoped under `.brand-swimwear` on <main>. The class is added
   by AppCtrl after the t-category-landing directive resolves the per-category
   config (skin = 'swimwear'). When the user navigates away from a Swimwear
   category, the class is removed and the default Trendo achromatic-and-red
   surface returns.

   Sourced from design-system/ui_kits/web/SwimwearPrimitives.jsx +
   SwimwearLanding.jsx. The mood is feed-friendly summer — warm sand surface,
   vibrant coral CTA, turquoise editorial accent, sun-yellow only on badge
   moments. Italic Cormorant Infant display (var(--font-display)), Jost UI sans.
   ============================================================================ */
.brand-swimwear {
  /* ── tokens (mirror of SwimwearPrimitives.jsx SWIMWEAR_TOKENS) ──── */
  --sw-bg: #F8F2E6; /* warm sand — primary surface */
  --sw-bg-deep: #EFE5D0; /* section band */
  --sw-bg-paper: #FCFAF3; /* card / panel */
  --sw-bg-ink: #1F2933; /* deep ink for rare dark sections */
  --sw-coral: #FF6B5C; /* primary CTA + sale */
  --sw-coral-deep: #E04432; /* hover / press */
  --sw-coral-soft: #FFD8CF; /* wash */
  --sw-turq: #2DB8B5; /* editorial / category cards */
  --sw-turq-deep: #147A78;
  --sw-turq-soft: #C9EAE6;
  --sw-sun: #FFC857; /* badge moments (NEW, "5000+") */
  --sw-palm: #3F6E55; /* botanical accent */
  --sw-ink: #1F2933;
  --sw-text: #37424B;
  --sw-muted: #7B7367;
  --sw-line: #E6D9BF;
  --sw-line-soft: #EFE5D0;
  --sw-display: var(--font-display);
  --sw-display-weight: 400;
  /* Alias --d-* tokens to swimwear palette so token-driven sections (the
     generic product_grid / value_props that read --d-* in
     _landing-foundations.scss) automatically pick up the summer palette. */
  --d-bg: var(--sw-bg);
  --d-bg-deep: var(--sw-bg-deep);
  --d-deep: var(--sw-coral);
  --d-deep-ink: var(--sw-coral-deep);
  --d-rose: var(--sw-coral);
  --d-rose-soft: var(--sw-coral-soft);
  --d-text: var(--sw-text);
  --d-muted: var(--sw-muted);
  --d-line: var(--sw-line);
  --d-display: var(--sw-display);
  --d-display-weight: var(--sw-display-weight);
  --d-display-tracking: -0.01em;
  /* Base surface */
  background: var(--sw-bg);
  color: var(--sw-text);
  /* ── Section foundations ───────────────────────────────────────────── */
}
.brand-swimwear .landing-section {
  background: var(--sw-bg);
}
.brand-swimwear .landing-section__head {
  border-bottom-color: var(--sw-line);
}
.brand-swimwear .landing-section__eyebrow {
  color: var(--sw-coral);
}
.brand-swimwear .landing-section__title {
  font: italic var(--sw-display-weight) 46px/1.05 var(--sw-display);
  letter-spacing: -0.01em;
  color: var(--sw-ink);
  text-wrap: balance;
}
.brand-swimwear .landing-section__sub,
.brand-swimwear .landing-section__body {
  color: var(--sw-text);
}
.brand-swimwear .landing-link {
  color: var(--sw-coral);
  border-bottom-color: var(--sw-coral);
}
.brand-swimwear .landing-link:hover {
  color: var(--sw-coral-deep);
  border-bottom-color: var(--sw-coral-deep);
}
.brand-swimwear {
  /* ── Sub-brand sub-nav (sticky variant) ────────────────────────────── */
  /* The wrapping section div is what becomes sticky, not the subnav itself
     — `.landing-subnav` is exactly as tall as its parent, so applying
     sticky to the child leaves it no room to travel. We target the
     category-landing section wrapper instead. */
}
.brand-swimwear .category-landing__section--subnav {
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand-swimwear .landing-subnav {
  background: var(--sw-bg-paper);
  border-bottom-color: var(--sw-line);
  color: var(--sw-ink);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.06);
}
.brand-swimwear .landing-subnav__brand-pre {
  color: var(--sw-muted);
  font: 500 11px/1 "Jost", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.brand-swimwear .landing-subnav__brand-mark {
  color: var(--sw-coral);
  font: italic var(--sw-display-weight) 24px/1 var(--sw-display);
  letter-spacing: -0.01em;
}
.brand-swimwear .landing-subnav__shortcut {
  color: var(--sw-ink);
  font: 500 12px/1 "Jost", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: color var(--duration-fast) ease, border-bottom-color var(--duration-fast) ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 6px;
}
.brand-swimwear .landing-subnav__shortcut:hover {
  color: var(--sw-coral);
  opacity: 1;
  border-bottom-color: var(--sw-coral);
}
.brand-swimwear .landing-subnav__edit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sw-coral);
  border: 1px solid var(--sw-coral);
  padding: 10px 16px;
  font: italic 400 14px/1 var(--sw-display);
  background: transparent;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.brand-swimwear .landing-subnav__edit:hover {
  background: var(--sw-coral);
  color: var(--sw-bg-paper);
}
.brand-swimwear .landing-subnav__edit-badge {
  font: 500 10px "Jost", sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: currentColor;
  color: var(--sw-bg-paper);
}
.brand-swimwear {
  /* ── Hero (legacy single-slide) ────────────────────────────────────── */
}
.brand-swimwear .landing-hero {
  background: var(--sw-bg);
  color: var(--sw-ink);
}
.brand-swimwear .landing-hero__title {
  font: italic var(--sw-display-weight) 92px/0.95 var(--sw-display);
  letter-spacing: -0.02em;
  color: var(--sw-ink);
  text-wrap: balance;
}
.brand-swimwear .landing-hero--photo .landing-hero__title, .brand-swimwear .landing-hero--photo .landing-hero__sub, .brand-swimwear .landing-hero--photo .landing-hero__eyebrow {
  color: var(--sw-bg-paper);
}
.brand-swimwear .landing-hero__eyebrow {
  color: var(--sw-coral);
}
.brand-swimwear {
  /* ── Hero slider (signature multi-slide) ───────────────────────────── */
}
.brand-swimwear .landing-hero-slider {
  position: relative;
  background: var(--sw-bg);
  overflow: hidden;
  min-height: 640px;
}
.brand-swimwear .landing-hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 640px;
}
.brand-swimwear .landing-hero-slider__slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.brand-swimwear .landing-hero-slider__media {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--sw-bg-deep);
}
.brand-swimwear .landing-hero-slider__slide-eyebrow {
  position: absolute;
  top: 32px;
  left: 40px;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sw-ink);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-swimwear .landing-hero-slider__slide-eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: currentColor;
}
.brand-swimwear .landing-hero-slider__slide--palm .brand-swimwear .landing-hero-slider__slide-eyebrow, .brand-swimwear .landing-hero-slider__slide--ocean .brand-swimwear .landing-hero-slider__slide-eyebrow, .brand-swimwear .landing-hero-slider__slide--noir .brand-swimwear .landing-hero-slider__slide-eyebrow {
  color: var(--sw-bg-paper);
}
.brand-swimwear .landing-hero-slider__slide-number {
  position: absolute;
  bottom: 36px;
  left: 40px;
  font: italic 400 56px/1 var(--sw-display);
  color: var(--sw-ink);
  opacity: 0.55;
}
.brand-swimwear .landing-hero-slider__slide-number small {
  font: 500 12px "Jost", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: 14px;
  vertical-align: middle;
}
.brand-swimwear .landing-hero-slider__slide--palm .brand-swimwear .landing-hero-slider__slide-number, .brand-swimwear .landing-hero-slider__slide--ocean .brand-swimwear .landing-hero-slider__slide-number, .brand-swimwear .landing-hero-slider__slide--noir .brand-swimwear .landing-hero-slider__slide-number {
  color: var(--sw-bg-paper);
}
.brand-swimwear .landing-hero-slider__panel {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  background: var(--sw-bg);
}
.brand-swimwear .landing-hero-slider__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sw-coral);
}
.brand-swimwear .landing-hero-slider__eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.brand-swimwear .landing-hero-slider__title {
  margin: 0;
  font: italic var(--sw-display-weight) 96px/0.92 var(--sw-display);
  letter-spacing: -0.02em;
  color: var(--sw-ink);
  text-wrap: balance;
}
.brand-swimwear .landing-hero-slider__title .accent {
  color: var(--sw-coral);
}
.brand-swimwear .landing-hero-slider__sub {
  margin: 8px 0 0;
  max-width: 430px;
  font: 400 15px/1.7 "Jost", sans-serif;
  color: var(--sw-text);
}
.brand-swimwear .landing-hero-slider__actions {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.brand-swimwear .landing-hero-slider__promo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sw-ink);
}
.brand-swimwear .landing-hero-slider__promo::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: var(--sw-sun);
}
.brand-swimwear .landing-hero-slider__dots {
  position: absolute;
  bottom: 36px;
  left: calc(58.3333333333% - 70px);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 2;
}
.brand-swimwear .landing-hero-slider__dot {
  width: 18px;
  height: 3px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: rgba(31, 41, 51, 0.35);
  transition: all var(--duration-base) ease;
}
.brand-swimwear .landing-hero-slider__dot.is-active {
  width: 36px;
  background: var(--sw-coral);
}
.brand-swimwear .landing-hero-slider__arrows {
  position: absolute;
  right: calc(41.6666666667% - 60px);
  top: 36px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.brand-swimwear .landing-hero-slider__arrow {
  width: 44px;
  height: 44px;
  background: rgba(255, 253, 247, 0.9);
  border: 1px solid var(--sw-line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sw-ink);
}
.brand-swimwear .landing-hero-slider__arrow:hover {
  background: var(--sw-bg-paper);
  color: var(--sw-coral);
}
.brand-swimwear {
  /* ── Tiles (Shop by Type / Style / Destination) ────────────────────── */
}
.brand-swimwear .landing-tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
}
.brand-swimwear .landing-tiles__grid[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}
.brand-swimwear .landing-tiles__grid[data-cols="5"] {
  grid-template-columns: repeat(5, 1fr);
}
.brand-swimwear .landing-tiles__grid[data-cols="6"] {
  grid-template-columns: repeat(6, 1fr);
}
.brand-swimwear {
  /* ── t-landing-tile in swimwear context ─────────────────────────── */
}
.brand-swimwear .landing-tile {
  background: var(--sw-bg-paper);
}
.brand-swimwear .landing-tile__label {
  font: italic var(--sw-display-weight) 26px/1.1 var(--sw-display);
  color: var(--sw-ink);
}
.brand-swimwear .landing-tile__phrase {
  color: var(--sw-muted);
  font: 400 13px/1.5 "Jost", sans-serif;
}
.brand-swimwear .landing-tile__cta {
  color: var(--sw-coral);
  border-bottom-color: var(--sw-coral);
}
.brand-swimwear .landing-tile {
  /* "Plus size" / category-meta badge in top-left */
}
.brand-swimwear .landing-tile__plus-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--sw-sun);
  color: var(--sw-ink);
  font: 500 10px "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 5px 9px;
}
.brand-swimwear .landing-tile {
  /* Bottom-row variant — label left + count right, shown for tiles
     with a count field (Swimwear Shop-by-Type). */
}
.brand-swimwear .landing-tile__bottom-row {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  color: var(--sw-bg-paper);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.brand-swimwear .landing-tile__bottom-label {
  font: 500 13px/1.3 "Jost", sans-serif;
  letter-spacing: 0.3px;
  text-wrap: balance;
}
.brand-swimwear .landing-tile__count {
  font: italic 400 18px/1 var(--sw-display);
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}
.brand-swimwear .landing-tile--with-count .brand-swimwear .landing-tile__count {
  color: var(--sw-bg-paper);
}
.brand-swimwear .landing-tile--with-count:hover .brand-swimwear .landing-tile__count {
  color: var(--sw-coral);
}
.brand-swimwear .landing-tile {
  /* Overlay tiles (Shop by Type / Style / Destination) place the caption
     over a bottom scrim, so switch the otherwise dark-ink label/phrase to
     paper-light — readable over both light and busy imagery. Higher
     specificity (.brand-swimwear .landing-tile--overlay …) beats the
     bare `.landing-tile__label { color: --sw-ink }` rule above. The CTA
     keeps its coral accent, which stays vivid over the dark scrim. */
}
.brand-swimwear .landing-tile--overlay .landing-tile__label {
  color: var(--sw-bg-paper);
}
.brand-swimwear .landing-tile--overlay .landing-tile__phrase {
  color: rgba(252, 250, 247, 0.88);
}
.brand-swimwear .landing-tile--overlay .landing-tile__sub {
  color: rgba(252, 250, 247, 0.82);
}
.brand-swimwear {
  /* ── Releva product grid (with chip on header) ─────────────────────── */
}
.brand-swimwear .landing-product-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}
.brand-swimwear {
  /* ── Color picker (swatch row) ─────────────────────────────────────── */
}
.brand-swimwear .landing-color-picker {
  padding: 90px 0;
  background: var(--sw-bg-paper);
}
.brand-swimwear .landing-color-picker__inner {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
}
.brand-swimwear .landing-color-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
}
.brand-swimwear .landing-color-picker__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sw-turq);
  margin: 0;
}
.brand-swimwear .landing-color-picker__eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.brand-swimwear .landing-color-picker__title {
  margin: 14px 0 0;
  font: italic var(--sw-display-weight) 46px/1 var(--sw-display);
  color: var(--sw-ink);
  letter-spacing: -0.01em;
}
.brand-swimwear .landing-color-picker__action {
  font: italic 400 14px/1.3 var(--sw-display);
  color: var(--sw-turq);
  border-bottom: 1px solid var(--sw-turq);
  padding-bottom: 2px;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.brand-swimwear .landing-color-picker__action:hover {
  color: var(--sw-turq-deep);
  border-bottom-color: var(--sw-turq-deep);
}
.brand-swimwear .landing-color-picker__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 14px;
}
.brand-swimwear .landing-color-picker__item {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.brand-swimwear .landing-color-picker__swatch {
  width: 100%;
  aspect-ratio: 1/1;
  transition: transform var(--duration-base) ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.brand-swimwear .landing-color-picker__swatch--ring {
  border: 1px solid var(--sw-line);
}
.landing-color-picker__item:hover .brand-swimwear .landing-color-picker__swatch {
  transform: scale(1.05);
}
.brand-swimwear .landing-color-picker__name {
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sw-ink);
}
.brand-swimwear {
  /* ── UGC grid (#TrendoSwim) ────────────────────────────────────────── */
}
.brand-swimwear .landing-ugc {
  padding: 100px 0 60px;
  background: var(--sw-bg);
}
.brand-swimwear .landing-ugc__inner {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
}
.brand-swimwear .landing-ugc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
}
.brand-swimwear .landing-ugc__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sw-coral);
  margin: 0;
}
.brand-swimwear .landing-ugc__eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.brand-swimwear .landing-ugc__title {
  margin: 14px 0 8px;
  font: italic var(--sw-display-weight) 46px/1.05 var(--sw-display);
  color: var(--sw-ink);
  letter-spacing: -0.01em;
}
.brand-swimwear .landing-ugc__body {
  margin: 0;
  font: 400 14px/1.7 "Jost", sans-serif;
  color: var(--sw-text);
  max-width: 480px;
}
.brand-swimwear .landing-ugc__body strong {
  color: var(--sw-coral);
}
.brand-swimwear .landing-ugc__feed-link {
  font: italic 400 14px/1.3 var(--sw-display);
  color: var(--sw-coral);
  text-decoration: none;
  border-bottom: 1px solid var(--sw-coral);
  padding-bottom: 2px;
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}
.brand-swimwear .landing-ugc__grid {
  display: grid;
  grid-template-columns: repeat(var(--ugc-cols, 6), 1fr);
  gap: 12px;
}
.brand-swimwear .landing-ugc__tile {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--sw-bg-deep);
  background-size: cover;
  background-position: center;
}
.brand-swimwear .landing-ugc__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 51, 0.1);
  transition: background var(--duration-fast) ease;
}
.brand-swimwear .landing-ugc__tile:hover::before {
  background: rgba(31, 41, 51, 0.45);
}
.brand-swimwear .landing-ugc__tile:hover .landing-ugc__tile-meta {
  opacity: 1;
}
.brand-swimwear .landing-ugc__tile-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  color: var(--sw-bg-paper);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  opacity: 0.85;
  transition: opacity var(--duration-fast) ease;
  z-index: 1;
}
.brand-swimwear .landing-ugc__tile-user {
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 0.4px;
}
.brand-swimwear .landing-ugc__tile-verified {
  color: var(--sw-coral);
}
.brand-swimwear {
  /* ── SEO footer (long-form copy + crosslinks + chip cloud) ─────────── */
}
.brand-swimwear .landing-seo-footer {
  padding: 80px 0 100px;
  background: var(--sw-bg-deep);
  border-top: 1px solid var(--sw-line);
}
.brand-swimwear .landing-seo-footer__inner {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
.brand-swimwear .landing-seo-footer__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sw-muted);
  margin: 0;
}
.brand-swimwear .landing-seo-footer__eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.brand-swimwear .landing-seo-footer__title {
  margin: 14px 0 18px;
  font: italic var(--sw-display-weight) 38px/1.1 var(--sw-display);
  color: var(--sw-ink);
}
.brand-swimwear .landing-seo-footer__body {
  margin: 0 0 14px;
  font: 400 14px/1.8 "Jost", sans-serif;
  color: var(--sw-text);
}
.brand-swimwear .landing-seo-footer__body strong {
  color: var(--sw-coral);
}
.brand-swimwear .landing-seo-footer__body p {
  margin: 0 0 14px;
}
.brand-swimwear .landing-seo-footer__body p:last-child {
  margin-bottom: 0;
}
.brand-swimwear .landing-seo-footer__crosslinks {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-swimwear .landing-seo-footer__crosslink {
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sw-line);
}
.brand-swimwear .landing-seo-footer__crosslink-label {
  font: italic var(--sw-display-weight) 22px/1.1 var(--sw-display);
  color: var(--sw-ink);
}
.brand-swimwear .landing-seo-footer__crosslink-sub {
  margin-top: 4px;
  font: 400 12px "Jost", sans-serif;
  color: var(--sw-muted);
}
.brand-swimwear .landing-seo-footer__crosslink-arrow {
  font: 400 18px "Jost", sans-serif;
  color: var(--sw-coral);
}
.brand-swimwear .landing-seo-footer__subcats {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--sw-line);
}
.brand-swimwear .landing-seo-footer__subcats-list {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
}
.brand-swimwear .landing-seo-footer__chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--sw-line);
  background: var(--sw-bg-paper);
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 0.6px;
  color: var(--sw-ink);
  text-decoration: none;
}
.brand-swimwear .landing-seo-footer__chip:hover {
  border-color: var(--sw-coral);
  color: var(--sw-coral);
}
.brand-swimwear {
  /* ── Finish-the-look (editorial + accessory grid) ──────────────────── */
}
.brand-swimwear .landing-finish-the-look {
  padding: 100px 0;
  background: var(--sw-bg-deep);
}
.brand-swimwear .landing-finish-the-look__inner {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
}
.brand-swimwear .landing-finish-the-look__layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.brand-swimwear .landing-finish-the-look__editorial {
  position: relative;
  min-height: 560px;
  background-color: var(--sw-bg-deep);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.brand-swimwear .landing-finish-the-look__editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 41, 51, 0.05) 0%, rgba(31, 41, 51, 0.7) 100%);
}
.brand-swimwear .landing-finish-the-look__editorial-copy {
  position: absolute;
  left: 32px;
  bottom: 32px;
  color: var(--sw-bg-paper);
  max-width: 320px;
  z-index: 1;
}
.brand-swimwear .landing-finish-the-look__editorial-kicker {
  font: 500 10px "Jost", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}
.brand-swimwear .landing-finish-the-look__editorial-title {
  margin: 0 0 10px;
  font: italic var(--sw-display-weight) 38px/1 var(--sw-display);
}
.brand-swimwear .landing-finish-the-look__editorial-body {
  margin: 0;
  font: 400 13px/1.7 "Jost", sans-serif;
  opacity: 0.9;
}
.brand-swimwear .landing-finish-the-look__editorial-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sw-bg-paper);
  color: var(--sw-ink);
  border: none;
  padding: 12px 18px;
  font: 500 11px "Jost", sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.brand-swimwear .landing-finish-the-look__editorial-cta:hover {
  background: var(--sw-coral);
  color: var(--sw-bg-paper);
}
.brand-swimwear .landing-finish-the-look__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.brand-swimwear .landing-finish-the-look__item {
  position: relative;
  display: block;
  height: 268px;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--sw-bg);
  background-size: cover;
  background-position: center;
}
.brand-swimwear .landing-finish-the-look__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(31, 41, 51, 0.65) 100%);
}
.brand-swimwear .landing-finish-the-look__item-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: var(--sw-bg-paper);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
}
.brand-swimwear .landing-finish-the-look__item-name {
  font: 500 13px/1.3 "Jost", sans-serif;
  letter-spacing: 0.3px;
}
.brand-swimwear .landing-finish-the-look__item-count {
  font: italic 400 18px/1 var(--sw-display);
}
.brand-swimwear {
  /* ── PLP overrides (when swimwear skin is on a filtered PLP) ──────── */
}
.brand-swimwear .ds-plp__header-title {
  font: italic var(--sw-display-weight) 76px/1 var(--sw-display);
  letter-spacing: -0.01em;
  color: var(--sw-ink);
}
.brand-swimwear .ds-plp__header-count {
  font: italic 400 14px var(--sw-display);
  color: var(--sw-coral);
}
.brand-swimwear {
  /* ─────────────────────────────────────────────────────────────────
     MOBILE OVERRIDES — Swimwear-specific tightenings on top of the
     generic foundations breakpoints. The base file handles structural
     collapses (grids → 1 or 2 cols); here we override font sizes and
     paddings that need a brand-aware tone.
     ───────────────────────────────────────────────────────────────── */
}
@media (max-width: 768px) {
  .brand-swimwear .landing-section__title {
    font: italic var(--sw-display-weight) 32px/1.1 var(--sw-display);
    color: var(--sw-ink);
  }
  .brand-swimwear .landing-section__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .brand-swimwear .landing-section__head > div {
    max-width: 100%;
  }
  .brand-swimwear {
    /* Hero slider — coral CTA stays prominent, promo line breaks well */
  }
  .brand-swimwear .landing-hero-slider__panel {
    background: var(--sw-bg);
  }
  .brand-swimwear .landing-hero-slider__eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }
  .brand-swimwear .landing-hero-slider__title {
    font-size: 48px;
    color: var(--sw-ink);
  }
  .brand-swimwear .landing-hero-slider__title .accent {
    color: var(--sw-coral);
  }
  .brand-swimwear .landing-hero-slider__sub {
    color: var(--sw-text);
  }
  .brand-swimwear .landing-hero-slider__promo {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--sw-ink);
    width: 100%; /* break onto its own line */
  }
  .brand-swimwear {
    /* SubNav — sticky stays, but layout is single-row scroll */
  }
  .brand-swimwear .landing-subnav > div {
    grid-template-columns: 1fr;
  }
  .brand-swimwear {
    /* Color picker — turq accent eyebrow, smaller swatches */
  }
  .brand-swimwear .landing-color-picker__title {
    font: italic var(--sw-display-weight) 28px/1.05 var(--sw-display);
    color: var(--sw-ink);
  }
  .brand-swimwear .landing-color-picker__action {
    display: none; /* "Всички цветове" link hidden on mobile to declutter */
  }
  .brand-swimwear {
    /* UGC grid */
  }
  .brand-swimwear .landing-ugc__title {
    font: italic var(--sw-display-weight) 32px/1.1 var(--sw-display);
    color: var(--sw-ink);
  }
  .brand-swimwear .landing-ugc__feed-link {
    font-size: 12px;
  }
  .brand-swimwear {
    /* Finish the look — coral CTA prominence */
  }
  .brand-swimwear .landing-finish-the-look__editorial-title {
    font: italic var(--sw-display-weight) 28px/1 var(--sw-display);
  }
  .brand-swimwear .landing-finish-the-look__editorial-cta {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 1.2px;
  }
  .brand-swimwear {
    /* SEO footer */
  }
  .brand-swimwear .landing-seo-footer__title {
    font: italic var(--sw-display-weight) 28px/1.15 var(--sw-display);
  }
  .brand-swimwear .landing-seo-footer__crosslink-label {
    font-size: 18px;
  }
  .brand-swimwear {
    /* The foundations' collapses (stacked layouts, fewer columns,
       tighter paddings): the skin's own rules above are more specific. */
  }
  .brand-swimwear .landing-hero-slider {
    min-height: auto;
  }
  .brand-swimwear .landing-hero-slider__slide {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .brand-swimwear .landing-color-picker {
    padding: 56px 0;
  }
  .brand-swimwear .landing-color-picker__inner {
    width: 92%;
  }
  .brand-swimwear .landing-color-picker__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .brand-swimwear .landing-ugc {
    padding: 56px 0 32px;
  }
  .brand-swimwear .landing-ugc__inner {
    width: 92%;
  }
  .brand-swimwear .landing-ugc__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .brand-swimwear .landing-finish-the-look {
    padding: 48px 0;
  }
  .brand-swimwear .landing-finish-the-look__inner {
    width: 92%;
  }
  .brand-swimwear .landing-finish-the-look__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .brand-swimwear .landing-seo-footer {
    padding: 48px 0 56px;
  }
  .brand-swimwear .landing-seo-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    width: 92%;
  }
  .brand-swimwear {
    /* The canon's own collapses (ds/_landing-sections.scss,
       ds/_landing-hero.scss): this skin's desktop columns and type sizes
       above are more specific, so without these a phone got 4 columns of
       tiles and products with the labels cut off. */
  }
  .brand-swimwear .landing-tiles__grid,
  .brand-swimwear .landing-tiles__grid[data-cols],
  .brand-swimwear .landing-tiles__grid[data-grid=asymmetric] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .brand-swimwear .landing-tiles__grid[data-cols="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .brand-swimwear .landing-tile__label {
    font-size: 28px;
  }
  .brand-swimwear .landing-product-grid__grid,
  .brand-swimwear .landing-product-grid__grid[data-cols] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }
  .brand-swimwear .landing-hero--typographic .landing-hero__title {
    font-size: 56px;
  }
  .brand-swimwear .landing-hero-slider__slide-number {
    font-size: 40px;
  }
  .brand-swimwear .landing-color-picker__name {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .brand-swimwear .landing-hero-slider__title {
    font: italic var(--sw-display-weight) 36px/0.95 var(--sw-display);
  }
  .brand-swimwear .landing-color-picker__name {
    font-size: 8px;
  }
  .brand-swimwear .landing-color-picker__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .brand-swimwear .landing-ugc__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .brand-swimwear .landing-finish-the-look__items {
    grid-template-columns: 1fr;
  }
  .brand-swimwear .landing-tiles__grid,
  .brand-swimwear .landing-tiles__grid[data-cols],
  .brand-swimwear .landing-tiles__grid[data-grid=asymmetric] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .brand-swimwear .landing-tile__label {
    font-size: 24px;
  }
  .brand-swimwear .landing-hero__title,
  .brand-swimwear .landing-hero--typographic .landing-hero__title {
    font-size: 40px;
  }
}

.tv *, .tv *::before, .tv *::after {
  box-sizing: border-box;
}
.tv img {
  max-width: 100%;
  display: block;
}
.tv.is-loading {
  opacity: 0.6;
}
.tv .tv-wrap {
  width: 90%;
  max-width: 1256px;
  margin: 0 auto;
}
.tv .tv-section {
  padding: 64px 0;
}
.tv .tv-section__action {
  position: absolute;
  right: 0;
  bottom: 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-1);
  text-decoration: none;
}
.tv .tv-eyebrow {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tv .tv-eyebrow--accent {
  color: var(--fg-1);
}
.tv [data-tone] {
  background-color: var(--bg-placeholder);
}
.tv .tv-hero {
  position: relative;
  min-height: 520px;
  height: 60vh;
  display: flex;
  align-items: center;
}
.tv .tv-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--overlay), rgba(0, 0, 0, 0) 60%);
}
.tv .tv-hero__inner {
  position: relative;
  color: var(--fg-inverse);
}
.tv .tv-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 72px;
  line-height: 1.02;
  margin: 14px 0 16px;
}
.tv .tv-hero__lede {
  max-width: 460px;
  font-size: 16px;
  opacity: 0.92;
  margin-bottom: 26px;
}
.tv .tv-hero .tv-eyebrow {
  color: var(--fg-inverse);
  border-color: rgba(255, 255, 255, 0.7);
}
.tv .tv-hero-slider {
  position: relative;
  min-height: 520px;
  height: 60vh;
  overflow: hidden;
}
.tv .tv-hero-slider .tv-hero--slide {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease;
  z-index: 0;
}
.tv .tv-hero-slider .tv-hero--slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.tv .tv-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tv .tv-hero__overlay {
  z-index: 1;
}
.tv .tv-hero__inner {
  z-index: 2;
}
.tv .tv-trust {
  background: var(--bg-muted);
}
.tv .tv-trust__inner {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.tv .tv-trust__inner i {
  color: var(--color-grey3);
  font-style: normal;
}
.tv .tv-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tv .tv-cat-tile {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  text-decoration: none;
  overflow: hidden;
}
.tv .tv-cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
}
.tv .tv-cat-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv .tv-cat-tile__label {
  position: relative;
  color: var(--fg-inverse);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tv .tv-dest-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.tv .tv-dest-card {
  position: relative;
  flex: 0 0 280px;
  height: 360px;
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.tv .tv-dest-card--lg {
  flex: none;
  width: 100%;
  aspect-ratio: 4/5;
  height: auto;
}
.tv .tv-dest-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv .tv-dest-card__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  color: var(--fg-inverse);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.tv .tv-dest-card__band strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.tv .tv-dest-card__band span {
  font-size: 12px;
  opacity: 0.9;
}
.tv .tv-dest-card__country {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--fg-1);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
}
.tv .tv-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 64px 0;
}
.tv .tv-editorial__media {
  aspect-ratio: 1/1;
  min-height: 420px;
}
.tv .tv-editorial__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  margin: 10px 0 16px;
  color: var(--fg-1);
}
.tv .tv-trustblock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--color-grey3);
  padding-top: 36px;
}
.tv .tv-trustblock__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tv .tv-trustblock__icon {
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  color: var(--fg-1);
  flex: 0 0 auto;
}
.tv .tv-trustblock__cell strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  color: var(--fg-1);
}
.tv .tv-trustblock__cell span {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.45;
}
.tv .breadcrumb {
  padding-bottom: 22px;
}
.tv .tv-plp__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 10px 0 26px;
  border-bottom: 1px solid var(--color-grey3);
  margin-bottom: 30px;
}
.tv .tv-plp__title {
  font: 400 32px var(--font-sans);
  margin: 0;
  color: var(--fg-1);
  letter-spacing: 0.015em;
}
.tv .tv-plp__title .tv-plp__count {
  color: var(--fg-3);
  font-weight: 400;
}
.tv .tv-plp__sub {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 8px;
  letter-spacing: 0.03em;
}
.tv .tv-plp__sort {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tv .tv-plp__sort > label {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tv .tv-plp__sort .tv-select {
  position: relative;
}
.tv .tv-plp__sort .tv-select select {
  border: 1px solid var(--border-default);
  padding: 10px 36px 10px 14px;
  font: 400 16px var(--font-sans);
  background: var(--bg-app);
  appearance: none;
  -webkit-appearance: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.tv .tv-plp__sort .tv-select__chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-1);
  pointer-events: none;
}
.tv .tv-plp__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}
.tv .tv-plp__layout--full {
  display: block;
  grid-template-columns: none;
}
.tv .tv-plp__mtoolbar {
  display: none;
}
.tv .tv-plp__mtoolbar-sort {
  position: relative;
}
.tv .tv-plp__mtoolbar-sort select {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: var(--bg-app);
  padding: 14px 14px;
  font: 500 16px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  appearance: none;
  -webkit-appearance: none;
}
.tv .tv-plp__mtoolbar-filters {
  background: var(--fg-1);
  color: var(--fg-inverse);
  border: 0;
  padding: 14px 14px;
  font: 500 12px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tv .tv-plp__mtoolbar-filters svg {
  color: var(--fg-inverse);
}
.tv .tv-fsheet {
  display: none;
}
.tv .tv-filters__msheet-head, .tv .tv-filters__msheet-foot {
  display: none;
}
.tv .tv-filters {
  font-size: 13px;
}
.tv .tv-filter-group {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-grey3);
}
.tv .tv-filter-group__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font: 500 11px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-1);
}
.tv .tv-filter-group__toggle {
  font-size: 18px;
  color: var(--fg-3);
  font-weight: 300;
  line-height: 1;
}
.tv .tv-filter-group__body {
  margin-top: 16px;
}
.tv .tv-filter-empty {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}
.tv .tv-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tv .tv-checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
  letter-spacing: 0.015em;
}
.tv .tv-checklist__box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--fg-1);
  background: transparent;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-inverse);
  font-size: 11px;
  line-height: 1;
  user-select: none;
}
.tv .tv-checklist__box.is-checked {
  background: var(--fg-1);
}
.tv .tv-checklist__name {
  flex: 1;
}
.tv .tv-checklist__count {
  font-size: 11px;
  color: var(--fg-3);
}
.tv .tv-myf__years {
  display: flex;
  border: 1px solid var(--color-grey3);
  background: var(--bg-app);
  margin-bottom: 12px;
}
.tv .tv-myf__year-btn {
  flex: 1;
  padding: 8px 0;
  cursor: pointer;
  border: none;
  border-left: 1px solid var(--color-grey3);
  background: transparent;
  color: var(--fg-1);
  font: 500 12px var(--font-sans);
  letter-spacing: 0.05em;
  position: relative;
}
.tv .tv-myf__year-btn:first-child {
  border-left: none;
}
.tv .tv-myf__year-btn.is-active {
  background: var(--fg-1);
  color: var(--fg-inverse);
}
.tv .tv-myf__year-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-circle);
  background: var(--fg-1);
}
.tv .tv-myf__months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tv .tv-myf__month-btn {
  padding: 9px 0;
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: var(--bg-app);
  color: var(--fg-1);
  font: 500 11px var(--font-sans);
  letter-spacing: 0.04em;
}
.tv .tv-myf__month-btn.is-active {
  border: 1.5px solid var(--fg-1);
  color: var(--fg-1);
}
.tv .tv-myf__month-btn.is-past {
  background: var(--bg-muted);
  color: var(--fg-4);
  text-decoration: line-through;
  cursor: not-allowed;
}
.tv .tv-myf__hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.025em;
  line-height: 1.5;
}
.tv .tv-myf__hint-pick {
  color: var(--fg-1);
}
.tv .tv-myf__hint a {
  color: var(--fg-3);
  text-decoration: underline;
  cursor: pointer;
}
.tv .tv-price-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.tv .tv-price-hint {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.025em;
}
.tv .tv-price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tv .tv-price-range input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  font: 400 16px var(--font-sans);
  background: var(--bg-app);
  outline: none;
  color: var(--fg-1);
}
.tv .tv-price-range input:focus {
  border-color: var(--fg-1);
}
.tv .tv-duration-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tv .tv-duration-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
  letter-spacing: 0.015em;
}
.tv .tv-duration-radio {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--fg-1);
  border-radius: var(--radius-circle);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tv .tv-duration-radio__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--fg-1);
}
.tv .tv-duration-label {
  flex: 1;
}
.tv .tv-transport-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tv .tv-transport-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-app);
  color: var(--fg-1);
  cursor: pointer;
  font: 500 11px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tv .tv-transport-btn.is-active {
  border: 1.5px solid var(--fg-1);
  color: var(--fg-1);
  padding: 9.5px 11.5px;
}
.tv .tv-transport-btn__ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.tv .tv-transport-btn__ico--bus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='1.6'%3E%3Crect x='4' y='5' width='16' height='13' rx='1'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Ccircle cx='8' cy='19' r='1.4'/%3E%3Ccircle cx='16' cy='19' r='1.4'/%3E%3C/svg%3E");
}
.tv .tv-transport-btn__ico--plane {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='1.6'%3E%3Cpath d='M3 13l4 1 5-9 1.5.5L11.5 14l4 1 1.5-2 1.5.5-2 4-13-3 0-1.5z'/%3E%3C/svg%3E");
}
.tv .tv-transport-btn__ico--ship {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='1.6'%3E%3Cpath d='M3 16c1 2 3 3 5 3s4-1 5-2c1 1 3 2 5 2s4-1 5-3'/%3E%3Cpath d='M5 13l7-2 7 2-2 4H7l-2-4z'/%3E%3Cpath d='M9 11V7h6v4'/%3E%3C/svg%3E");
}
.tv .tv-transport-btn__ico--car {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='1.6'%3E%3Cpath d='M5 16V11l2-4h10l2 4v5'/%3E%3Cline x1='5' y1='16' x2='19' y2='16'/%3E%3Ccircle cx='8' cy='17' r='1.4'/%3E%3Ccircle cx='16' cy='17' r='1.4'/%3E%3C/svg%3E");
}
.tv .tv-transport-btn__count {
  color: var(--fg-3);
  font-weight: 400;
  margin-left: auto;
}
.tv .tv-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  align-items: center;
}
.tv .tv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-muted);
  font: 400 12px var(--font-sans);
  color: var(--fg-1);
  cursor: pointer;
  letter-spacing: 0.015em;
  transition: background var(--duration-fast) ease;
}
.tv .tv-chip:hover {
  background: var(--bg-muted);
}
.tv .tv-chip__close {
  color: var(--fg-3);
  margin-left: 2px;
}
.tv .tv-chips__clear {
  background: transparent;
  border: none;
  font: 400 12px var(--font-sans);
  color: var(--fg-1);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
}
.tv .tv-pagination {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.tv .tv-pagination__page {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  background: transparent;
  font: 500 13px var(--font-sans);
  cursor: pointer;
  color: var(--fg-3);
  transition: color var(--duration-fast) ease;
}
.tv .tv-pagination__page:hover:not(.is-active):not(.is-ellipsis):not(.is-disabled) {
  color: var(--fg-1);
}
.tv .tv-pagination__page.is-active {
  border-color: var(--fg-1);
  color: var(--fg-1);
}
.tv .tv-pagination__page.is-disabled {
  color: var(--color-grey6);
  cursor: not-allowed;
}
.tv .tv-pagination__page.is-ellipsis {
  cursor: default;
  color: var(--fg-3);
}
.tv .tv-pagination__page--arrow {
  font-size: 18px;
}
.tv .tv-pdp__hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  margin-bottom: 24px;
}
.tv .tv-pdp__gallery {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.tv .tv-pdp__gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv .tv-pdp__buy {
  position: sticky;
  top: 90px;
  align-self: start;
  border: 1px solid var(--color-grey3);
  padding: 24px;
}
.tv .tv-pdp__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  margin: 8px 0 4px;
  color: var(--fg-1);
}
.tv .tv-pdp__sub {
  font-size: 13px;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.tv .tv-pdp__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.tv .tv-pdp__price-label {
  font-size: 12px;
  color: var(--fg-3);
}
.tv .tv-pdp__price-bgn {
  font-size: 32px;
  color: var(--fg-1);
  font-family: var(--font-sans);
}
.tv .tv-pdp__price-note {
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.tv .tv-pdp__operator {
  padding: 14px 0;
  border-top: 1px solid var(--color-grey3);
  border-bottom: 1px solid var(--color-grey3);
  margin-bottom: 18px;
  font-size: 13px;
}
.tv .tv-pdp__operator span {
  color: var(--fg-3);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tv .tv-pdp__operator strong {
  display: block;
}
.tv .tv-pdp__buy-note {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 12px;
  text-align: center;
}
.tv .tv-pdp__summary {
  margin: 0 0 12px;
  font-weight: 500;
  line-height: 1.6;
}
.tv .tv-pdp__text {
  line-height: 1.7;
}
.tv .tv-dest-intro {
  margin: 0 0 24px;
}
.tv .tv-dest-intro__img {
  display: block;
  width: 100%;
  max-height: 340px;
  margin-bottom: 16px;
  object-fit: cover;
}
.tv .tv-dest-intro__summary {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.tv .tv-dest-intro__text {
  line-height: 1.7;
}
.tv .tv-infobar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--color-grey3);
  background: var(--bg-app);
  padding: 14px 0;
  margin-bottom: 28px;
}
.tv .tv-infobar a {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  cursor: pointer;
}
.tv .tv-infobar a.is-active {
  color: var(--fg-1);
  border-bottom: 2px solid var(--fg-1);
  padding-bottom: 12px;
}
.tv .tv-pdp__section {
  padding: 28px 0;
  border-top: 1px solid var(--color-grey3);
}
.tv .tv-pdp__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  margin: 6px 0 18px;
  color: var(--fg-1);
}
.tv .tv-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tv .tv-price-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px;
  border-bottom: 1px solid var(--color-grey3);
}
.tv .tv-price-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--color-grey3);
}
.tv .tv-price-table tbody tr {
  cursor: pointer;
}
.tv .tv-price-table tbody tr:hover {
  background: var(--bg-muted);
}
.tv .tv-price-table .is-soldout {
  opacity: 0.5;
}
.tv .tv-price-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tv .tv-tag {
  background: var(--fg-1);
  color: var(--fg-inverse);
  font-size: 10px;
  padding: 3px 7px;
  text-transform: uppercase;
}
.tv .tv-urgent {
  color: var(--fg-1);
  font-weight: 500;
}
.tv .tv-note {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 10px;
}
.tv .tv-incl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.tv .tv-incl h3 {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.tv .tv-incl__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tv .tv-incl__list li {
  padding: 8px 0 8px 26px;
  position: relative;
  font-size: 14px;
  border-bottom: 1px solid var(--color-grey3);
}
.tv .tv-incl__list--yes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
}
.tv .tv-incl__list--no li::before {
  content: "×";
  position: absolute;
  left: 0;
  color: var(--fg-3);
}
.tv .tv-timeline {
  max-width: 780px;
}
.tv .tv-timeline__day {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding-bottom: 24px;
  position: relative;
}
.tv .tv-timeline__num {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--fg-1);
  color: var(--fg-1);
  font-family: var(--font-serif);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv .tv-timeline__body h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 6px 0 10px;
  color: var(--fg-1);
}
.tv .tv-timeline__event {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
}
.tv .tv-timeline__time {
  color: var(--fg-1);
  min-width: 50px;
  font-variant-numeric: tabular-nums;
}
.tv .tv-accordion__item {
  border-bottom: 1px solid var(--color-grey3);
}
.tv .tv-accordion__head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 16px 0;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-1);
}
.tv .tv-accordion__head i::after {
  content: "+";
  color: var(--fg-3);
}
.tv .tv-accordion__item.is-open .tv-accordion__head i::after {
  content: "−";
}
.tv .tv-accordion__body {
  padding: 0 0 16px;
  font-size: 14px;
  color: var(--fg-2);
}
.tv .tv-disclaimer {
  background: var(--bg-muted);
  padding: 18px;
  font-size: 12px;
  color: var(--fg-3);
  margin: 28px 0;
}
.tv .tv-pdp__mbar {
  display: none;
}
.tv .tv-dest__head {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: end;
  margin-bottom: 26px;
}
.tv .tv-dest__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.05;
  margin: 10px 0;
  color: var(--fg-1);
}
.tv .tv-dest__title em {
  font-style: italic;
}
.tv .tv-dest__lede {
  font-size: 13px;
  color: var(--fg-3);
}
.tv .tv-dest__search {
  position: relative;
}
.tv .tv-dest__search input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 1px solid var(--color-grey3);
  font-family: var(--font-sans);
}
.tv .tv-dest__search button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--fg-3);
}
.tv .tv-dest__search button:hover {
  color: var(--fg-1);
}
.tv .tv-dest__filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--color-grey3);
  border-bottom: 1px solid var(--color-grey3);
  margin-bottom: 28px;
}
.tv .tv-dest__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 36px 0;
  font-size: 13px;
  color: var(--fg-3);
}
.tv .tv-dest__foot a {
  color: var(--fg-1);
  text-decoration: none;
}
.tv .tv-how__hero {
  padding: 48px 0;
  max-width: 720px;
}
.tv .tv-how__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.05;
  margin: 12px 0 14px;
  color: var(--fg-1);
}
.tv .tv-how__title em {
  font-style: italic;
}
.tv .tv-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 24px 0 48px;
}
.tv .tv-step__num {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-circle);
  background: var(--bg-dark);
  color: var(--fg-inverse);
  font-family: var(--font-serif);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.tv .tv-step__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  margin: 6px 0 10px;
  color: var(--fg-1);
}
.tv .tv-step__bullets {
  list-style: none;
  padding: 14px 0 0;
  margin: 10px 0 0;
  border-top: 1px dashed var(--color-grey3);
  font-size: 13px;
  color: var(--fg-3);
}
.tv .tv-step__bullets li {
  padding: 4px 0;
}
.tv .tv-faq {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  padding: 48px 0;
}
.tv .tv-faq__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  color: var(--fg-1);
  margin: 6px 0;
}
.tv .tv-how__cta {
  background: var(--bg-deep);
  color: var(--fg-inverse);
  text-align: center;
  padding: 56px 20px;
}
.tv .tv-how__cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  margin: 10px 0 24px;
}
.tv .tv-how__cta .tv-eyebrow {
  color: rgba(255, 255, 255, 0.7);
}
.tv .tv-how__cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Inquiry Drawer (TInquiryDrawer.jsx 1:1) ───────────────────────────── */
.tv .tv-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}

.tv .tv-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.tv .tv-drawer__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}

.tv .tv-drawer.is-open .tv-drawer__overlay {
  opacity: 1;
}

.tv .tv-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 480px;
  max-width: 100vw;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-fast) cubic-bezier(0.25, 0.8, 0.4, 1);
  box-shadow: var(--shadow-drawer);
}

.tv .tv-drawer.is-open .tv-drawer__panel {
  transform: translateX(0);
}

.tv .tv-drawer__head {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--color-grey3);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}

.tv .tv-drawer__head-text {
  min-width: 0;
  flex: 1;
}

.tv .tv-drawer__head-text .tv-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin-bottom: 8px;
}

.tv .tv-drawer__head-text h3 {
  font: 500 14px/1.4 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: 0.015em;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv .tv-drawer__head-meta {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.025em;
}

.tv .tv-drawer__close {
  position: static;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  padding: 6px;
  color: var(--fg-1);
  cursor: pointer;
  flex: 0 0 auto;
}

.tv .tv-drawer__body {
  flex: 1;
  overflow-y: auto;
}

.tv .tv-stepper {
  padding: 22px 26px 0;
}

.tv .tv-stepper__bar {
  position: relative;
  height: 2px;
  background: var(--color-grey3);
  margin-bottom: 12px;
}

.tv .tv-stepper__progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--fg-1);
  transition: width var(--duration-base) ease;
}

.tv .tv-stepper__labels {
  display: flex;
  justify-content: space-between;
  font: 500 10px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tv .tv-stepper__label--active {
  color: var(--fg-1);
}

.tv .tv-stepper__label--inactive {
  color: var(--fg-3);
}

.tv .tv-drawer__error {
  margin: 16px 26px 0;
}

.tv .tv-drawer__step-body {
  padding: 30px 26px;
}

.tv .tv-drawer__step-title {
  font: 400 24px var(--font-sans);
  margin: 0 0 8px;
  color: var(--fg-1);
  letter-spacing: 0.015em;
}

.tv .tv-drawer__step-lede {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0 0 28px;
  letter-spacing: 0.015em;
  line-height: 1.6;
}

.tv .tv-fieldlabel {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  display: block;
}

/* Step 1 fields: ds-field (base form); 24px between them. */
.tv .tv-drawer__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tv .tv-drawer__next {
  margin-top: 36px;
}

/* Step 2 — counters, select, message, consents */
.tv .tv-counter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
}

.tv .tv-counter__label {
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

/* The counters are ds-qty (base); the block keeps its label above. */
.tv .tv-select {
  position: relative;
  margin-top: 8px;
}

.tv .tv-select select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  padding: 12px 36px 12px 14px;
  font: 400 16px var(--font-sans);
  background: var(--bg-app);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  color: var(--fg-1);
  letter-spacing: 0.015em;
}

.tv .tv-select__chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-1);
  pointer-events: none;
}

.tv .tv-drawer__group {
  display: block;
  margin-bottom: 28px;
}

.tv .tv-consents {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 32px;
  padding-top: 18px;
  border-top: 1px solid var(--color-grey3);
}

/* The consents are ds-check (base). */
.tv .tv-drawer__actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
}

/* „Изпрати запитването“ is ds-btn--dark (owner, 26.09.2026: red only for
   „Завърши заявката“); the spinner sits in it. */
.tv .tv-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: var(--radius-circle);
  animation: tv-spin 0.7s linear infinite;
}

@keyframes tv-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Success panel */
.tv .tv-drawer__success {
  padding: 56px 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tv .tv-drawer__success-check {
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-success);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.tv .tv-drawer__success-check .ds-icon {
  width: 40px;
  height: 40px;
}

.tv .tv-drawer__success h2 {
  font: 400 24px var(--font-sans);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-1);
}

.tv .tv-drawer__success p {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0 0 28px;
  max-width: 320px;
  line-height: 1.7;
  letter-spacing: 0.015em;
}

.tv .tv-drawer__success p strong {
  font-weight: 600;
  color: var(--fg-1);
}

.tv .tv-drawer__ref-box {
  padding: 18px 24px;
  background: var(--bg-muted);
  margin-bottom: 36px;
  min-width: 240px;
}

.tv .tv-drawer__ref-label {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}

.tv .tv-drawer__ref-num {
  font: 400 16px var(--font-serif);
  color: var(--fg-1);
  letter-spacing: 1px;
}

.tv .tv-drawer__success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
}

/* Body scroll-lock helper applied by the controller while drawer is open */
body.tv-drawer-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .tv .tv-hero__title {
    font-size: 48px;
  }
  .tv .tv-cat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tv .tv-pdp__hero {
    grid-template-columns: 1fr;
  }
  .tv .tv-editorial, .tv .tv-faq, .tv .tv-dest__head {
    grid-template-columns: 1fr;
  }
  .tv .tv-steps {
    grid-template-columns: 1fr;
  }
  .tv .tv-infobar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tv .tv-plp__layout {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .tv .tv-plp__sort {
    display: none;
  }
  .tv .tv-plp__head {
    padding-bottom: 16px;
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .tv .tv-plp__title {
    font-size: 24px;
  }
  .tv .tv-plp__title .tv-plp__count {
    font-size: 14px;
  }
  .tv .tv-plp__mtoolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-app);
    border-top: 1px solid var(--color-grey3);
    border-bottom: 1px solid var(--color-grey3);
    margin: 0 -5vw 18px;
  }
  .tv .tv-plp__mtoolbar--full {
    grid-template-columns: 1fr;
  }
  .tv .tv-plp__mtoolbar-sort {
    border-right: 1px solid var(--color-grey3);
  }
  .tv .tv-plp__mtoolbar--full .tv-plp__mtoolbar-sort {
    border-right: 0;
  }
  .tv .tv-plp__mtoolbar-sort::after {
    content: "▾";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--fg-3);
    font-size: 12px;
  }
  .tv .tv-filters {
    position: fixed;
    z-index: 1001;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    background: var(--bg-app);
    transform: translateY(100%);
    transition: transform var(--duration-fast) cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sheet);
  }
  .tv .tv-filters.is-mobile-open {
    transform: translateY(0);
  }
  .tv .tv-filters__msheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-grey3);
    font: 500 13px var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-1);
    flex: 0 0 auto;
  }
  .tv .tv-filters__msheet-head button {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--fg-1);
    padding: 6px;
  }
  .tv .tv-filter-group:first-of-type {
    padding-top: 8px;
  }
  .tv .tv-filters .tv-filter-group:last-of-type {
    border-bottom: 0;
  }
  .tv .tv-filters > .tv-filter-group {
    margin: 0 16px;
  }
  .tv .tv-filters {
    overflow-y: hidden;
  }
  .tv .tv-filters .tv-filter-group:first-child {
    margin-top: 0;
  }
  .tv .tv-filters__msheet-foot {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
    padding: 12px 16px 18px;
    border-top: 1px solid var(--color-grey3);
    background: var(--bg-app);
    flex: 0 0 auto;
  }
  .tv .tv-filters > *:not(.tv-filters__msheet-head):not(.tv-filters__msheet-foot) { /* groups */
    flex: 0 0 auto;
  }
  .tv .tv-filters.is-mobile-open {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tv .tv-fsheet {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 1000;
  }
  .tv .tv-chips {
    padding: 8px 0;
  }
  .tv .tv-pagination {
    margin-top: 32px;
    gap: 4px;
  }
  .tv .tv-pagination__page {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
  .tv .tv-pdp__buy {
    position: static;
    padding: 16px;
    margin-bottom: 18px;
  }
  .tv .tv-pdp__buy .tv-pdp__buy-note {
    margin-top: 8px;
  }
  .tv .tv-infobar {
    gap: 16px;
    padding: 10px 0;
  }
  .tv .tv-pdp__mbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--bg-app);
    border-top: 1px solid var(--color-grey3);
    padding: 10px 14px env(safe-area-inset-bottom, 14px);
    gap: 12px;
    align-items: center;
    box-shadow: var(--shadow-sheet);
  }
  .tv .tv-pdp__mbar-price {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font: 400 13px var(--font-sans);
    color: var(--fg-1);
  }
  .tv .tv-pdp__mbar-from {
    font-size: 11px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .tv .tv-pdp__mbar-price strong {
    font: 500 18px var(--font-sans);
    color: var(--fg-1);
  }
  .tv-pdp {
    padding-bottom: 80px;
  }
  .tv .tv-drawer__panel {
    width: 100%;
    max-width: 100vw;
  }
  .tv .tv-drawer__head {
    padding: 18px 18px 14px;
  }
  .tv .tv-drawer__step-body {
    padding: 24px 18px;
  }
  .tv .tv-drawer__success {
    padding: 40px 20px 30px;
  }
  .tv .tv-stepper {
    padding: 18px 18px 0;
  }
  .tv .tv-drawer__error {
    margin: 14px 18px 0;
  }
  .tv .tv-counter-row {
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .tv .tv-hero__title {
    font-size: 40px;
  }
  .tv .tv-hero {
    min-height: 420px;
    height: 56vh;
  }
  .tv .tv-hero__lede {
    font-size: 14px;
  }
  .tv .tv-trustblock {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .tv .tv-editorial__media {
    min-height: 0;
  }
  .tv .tv-editorial {
    padding: 36px 0;
    gap: 24px;
  }
  .tv .tv-editorial__title {
    font-size: 28px;
  }
  .tv .tv-dest-card {
    flex: 0 0 220px;
    height: 300px;
  }
  .tv .tv-section {
    padding: 40px 0;
  }
  .tv .tv-pdp__gallery {
    aspect-ratio: 4/3;
  }
  .tv .tv-pdp__title {
    font-size: 24px;
  }
  .tv .tv-pdp__price-bgn {
    font-size: 28px;
  }
  .tv .tv-pdp__h2 {
    font-size: 20px;
  }
  .tv .tv-incl {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tv .tv-disclaimer {
    padding: 14px;
    font-size: 11px;
  }
  .tv .tv-how__title {
    font-size: 32px;
  }
  .tv .tv-how__cta h2 {
    font-size: 24px;
  }
  .tv .tv-how__cta {
    padding: 36px 16px;
  }
  .tv .tv-dest__title {
    font-size: 32px;
  }
}
@media (max-width: 359px) {
  .tv .tv-trustblock {
    grid-template-columns: 1fr;
  }
  .tv .tv-hero__title {
    font-size: 32px;
  }
}
.bl-prose ul {
  list-style: disc;
}

.bl-prose ol {
  list-style: decimal;
}

.tv .tv-editorial__media {
  position: relative;
}

.tv .tv-editorial__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf-page .tf-hero .tf-eyebrow--centered {
  display: flex;
  justify-content: center;
}
.tf-page .tf-scroll {
  margin-top: 80px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: var(--fg-1);
}
.tf-page .tf-scroll__label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}
.tf-page .tf-scroll__chevron {
  display: inline-block;
  color: var(--fg-1);
  animation: tfBob 2s ease-in-out infinite;
}
@keyframes tfBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
.tf-page .tf-marketplace {
  padding: 140px 0 120px;
}
.tf-page .tf-marketplace__inner {
  width: 90%;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.tf-page .tf-marketplace__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.15;
  color: var(--fg-1);
  letter-spacing: -0.5px;
  margin: 32px 0 40px;
}
.tf-page .tf-marketplace__body {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.75;
  letter-spacing: 0.2px;
  max-width: 680px;
  margin: 0 auto;
}
.tf-page .tf-marketplace__body p {
  margin: 0 0 18px;
}
.tf-page .tf-marketplace__body p:last-child {
  margin: 0;
}
.tf-page .tf-marketplace__body strong {
  color: var(--fg-1);
  font-weight: 500;
}
.tf-page .tf-inline-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.tf-page .tf-remember {
  padding: 120px 0;
  background: var(--bg-dark);
  color: var(--fg-inverse);
}
.tf-page .tf-remember__inner {
  width: 90%;
  max-width: var(--wrapper-max);
  margin: 0 auto;
}
.tf-page .tf-remember__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: baseline;
  margin-bottom: 80px;
}
.tf-page .tf-remember__head .tf-eyebrow {
  margin-bottom: 24px;
}
.tf-page .tf-remember__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 96px;
  line-height: 0.95;
  color: var(--fg-inverse);
  letter-spacing: -1px;
  margin: 0;
}
.tf-page .tf-remember__lede {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  max-width: 520px;
  padding-top: 8px;
}
.tf-page .tf-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--border-thin) solid rgba(255, 255, 255, 0.18);
}
.tf-page .tf-rule {
  padding: 40px 36px 8px;
  border-right: var(--border-thin) solid rgba(255, 255, 255, 0.18);
}
.tf-page .tf-rule:last-child {
  border-right: none;
}
.tf-page .tf-rule__num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 2px;
  margin-bottom: 24px;
}
.tf-page .tf-rule__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--fg-inverse);
  margin: 0 0 14px;
}
.tf-page .tf-rule__body {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  letter-spacing: 0.2px;
  margin: 0;
}
.tf-page .tf-faq {
  padding: 140px 0 100px;
}
.tf-page .tf-faq__inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}
.tf-page .tf-faq__head {
  text-align: center;
  margin-bottom: 80px;
}
.tf-page .tf-faq__head .tf-eyebrow {
  margin-bottom: 18px;
  display: inline-block;
}
.tf-page .tf-faq__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  color: var(--fg-1);
  letter-spacing: -0.5px;
  margin: 0;
}
.tf-page .tf-register {
  padding: 40px 0 0;
}
.tf-page .tf-register__inner {
  width: 90%;
  max-width: var(--wrapper-max);
  margin: 0 auto;
}
.tf-page .tf-register__split {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  background: var(--bg-app);
}
.tf-page .tf-register__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-placeholder);
}
.tf-page .tf-register__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.tf-page .tf-register__copy {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tf-page .tf-register__copy .tf-eyebrow {
  margin-bottom: 28px;
  display: inline-block;
}
.tf-page .tf-register__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 96px;
  line-height: 0.95;
  color: var(--fg-1);
  letter-spacing: -1.5px;
  margin: 0 0 28px;
}
.tf-page .tf-register__title i {
  font-style: italic;
}
.tf-page .tf-register__body {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.7;
  margin: 0 0 44px;
  max-width: 420px;
}
.tf-page .tf-register__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.tf-page .tf-register__note {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 36px;
  letter-spacing: 0.3px;
}
@media (max-width: 1200px) {
  .tf-page .tf-marketplace {
    padding: 100px 0 90px;
  }
  .tf-page .tf-marketplace__title,
  .tf-page .tf-faq__title {
    font-size: 48px;
  }
  .tf-page .tf-remember__title {
    font-size: 72px;
  }
  .tf-page .tf-remember__head {
    gap: 48px;
  }
  .tf-page .tf-register__copy {
    padding: 60px;
  }
  .tf-page .tf-register__title {
    font-size: 56px;
  }
}
@media (max-width: 1024px) {
  .tf-page .tf-marketplace__title {
    font-size: 40px;
  }
  .tf-page .tf-remember {
    padding: 90px 0;
  }
  .tf-page .tf-remember__head {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 56px;
  }
  .tf-page .tf-remember__title {
    font-size: 56px;
  }
  .tf-page .tf-remember__lede {
    padding-top: 0;
  }
  .tf-page .tf-faq {
    padding: 100px 0 80px;
  }
  .tf-page .tf-faq__head {
    margin-bottom: 56px;
  }
  .tf-page .tf-faq__title {
    font-size: 40px;
  }
  .tf-page .tf-register__split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .tf-page .tf-register__media {
    height: 320px;
  }
  .tf-page .tf-register__copy {
    padding: 56px 40px;
  }
  .tf-page .tf-register__title {
    font-size: 56px;
  }
}
@media (max-width: 768px) {
  .tf-page .tf-scroll {
    margin-top: 48px;
  }
  .tf-page .tf-marketplace {
    padding: 80px 0 70px;
  }
  .tf-page .tf-marketplace__title {
    font-size: 28px;
  }
  .tf-page .tf-marketplace__body {
    font-size: 14px;
  }
  .tf-page .tf-remember {
    padding: 70px 0;
  }
  .tf-page .tf-remember__title {
    font-size: 48px;
  }
  .tf-page .tf-rules {
    grid-template-columns: 1fr;
  }
  .tf-page .tf-rule {
    padding: 32px 20px 24px;
    border-right: none;
    border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.18);
  }
  .tf-page .tf-rule:last-child {
    border-bottom: none;
  }
  .tf-page .tf-rule__num {
    font-size: 48px;
    margin-bottom: 16px;
  }
  .tf-page .tf-faq {
    padding: 80px 0 60px;
  }
  .tf-page .tf-faq__inner {
    width: 92%;
  }
  .tf-page .tf-faq__title {
    font-size: 28px;
  }
  .tf-page .tf-register {
    padding: 24px 0 0;
  }
  .tf-page .tf-register__inner {
    width: 100%;
  }
  .tf-page .tf-register__copy {
    padding: 40px 24px 48px;
  }
  .tf-page .tf-register__title {
    font-size: 48px;
  }
  .tf-page .tf-register__body {
    font-size: 14px;
    margin-bottom: 32px;
  }
  .tf-page .tf-register__media {
    height: 240px;
  }
  .tf-page .tf-register__ctas .ds-btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 480px) {
  .tf-page .tf-marketplace__title {
    font-size: 24px;
  }
  .tf-page .tf-faq__title,
  .tf-page .tf-remember__title,
  .tf-page .tf-register__title {
    font-size: 40px;
  }
}