@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/cormorant-300.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB,
    U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+04C0, U+04CF,
    U+2013-2014, U+2019, U+201C-201D, U+2026, U+20BD, U+2116, U+2190,
    U+2192, U+2212;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-400.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB,
    U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+04C0, U+04CF,
    U+2013-2014, U+2019, U+201C-201D, U+2026, U+20BD, U+2116, U+2190,
    U+2192, U+2212;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope-400.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB,
    U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+04C0, U+04CF,
    U+2013-2014, U+2019, U+201C-201D, U+2026, U+20BD, U+2116, U+2190,
    U+2192, U+2212;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope-500.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB,
    U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+04C0, U+04CF,
    U+2013-2014, U+2019, U+201C-201D, U+2026, U+20BD, U+2116, U+2190,
    U+2192, U+2212;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope-600.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB,
    U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+04C0, U+04CF,
    U+2013-2014, U+2019, U+201C-201D, U+2026, U+20BD, U+2116, U+2190,
    U+2192, U+2212;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/manrope-800.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00B7, U+00BB,
    U+0401-040C, U+040E-044F, U+0451-045C, U+045E-045F, U+04C0, U+04CF,
    U+2013-2014, U+2019, U+201C-201D, U+2026, U+20BD, U+2116, U+2190,
    U+2192, U+2212;
}

:root {
  color-scheme: light;

  --amb-bg: #FFFAFC;
  --amb-surface: #FFFFFF;
  --amb-blush: #FBDDEC;
  --amb-blush-soft: #FDEBF4;
  --amb-blush-tint: #FDF0F7;
  --amb-photo-bg: #FDF1F7;

  --amb-raspberry: #C21B72;
  --amb-plum: #8E1F5F;
  --amb-plum-grad-end: #E0559F;
  --amb-pink-bright: #EE5FA7;
  --amb-rose-light: #F193C6;

  --amb-ink: #2A1520;
  --amb-ink-70: #46293A;
  --amb-ink-50: #6B4E5D;
  --amb-ink-40: #8A6C7B;
  --amb-ink-40-alt: #9A7C8B;
  --amb-ink-30: #A98BA0;
  --amb-ink-20: #C0A6B6;
  --amb-ink-20-alt: #B8A2AF;

  --amb-line: #F6E3EE;
  --amb-line-strong: #EFD8E6;
  --amb-line-soft: #F4DFEB;
  --amb-line-soft-alt: #F9EAF2;
  --amb-btn-line: #EBCEE0;
  --amb-btn-line-hover: #E2B9D2;
  --amb-card-hover-line: #EBB8D5;

  --amb-eco: #4A9E4E;
  --amb-eco-deep: #3F7F45;
  --amb-eco-tint: #E9F4E9;

  --amb-admin-bg: #FBF6F9;
  --amb-admin-row-hover: #FFF9FC;
  --amb-admin-head: #FDF4F9;
  --amb-admin-line: #F2DEEA;

  --amb-on-ink: #FDEAF3;
  --amb-btn-ink: #FFF6FA;

  --amb-promo-ink: #8E2C64;
  --amb-numeral: #CFA3BD;
  --amb-line-on-blush: rgba(42, 21, 32, 0.1);

  --amb-hatch-a: #F6DCEA;
  --amb-hatch-b: #FDF1F7;

  --amb-badge-new-bg: #F3E1EE;      --amb-badge-new-ink: #7A2E64;
  --amb-badge-sale-bg: #F7F0E2;     --amb-badge-sale-ink: #8E7231;
  --amb-badge-way-bg: #E9EFF3;      --amb-badge-way-ink: #4E6B7C;
  --amb-badge-ok-bg: #E9F4E9;       --amb-badge-ok-ink: #3F7F45;
  --amb-badge-off-bg: #FAE3E8;      --amb-badge-off-ink: #B03A5B;

  --amb-danger: #B03A5B;

  --amb-on-ink-78: rgba(253, 234, 243, 0.78);
  --amb-on-ink-60: rgba(253, 234, 243, 0.6);
  --amb-on-ink-40: rgba(253, 234, 243, 0.4);
  --amb-on-ink-line: rgba(255, 250, 252, 0.22);
  --amb-on-ink-fill: rgba(253, 234, 243, 0.1);
  --amb-on-photo-line: rgba(255, 250, 252, 0.4);
  --amb-on-photo-fill: rgba(255, 250, 252, 0.14);
  --amb-on-photo-text: rgba(255, 250, 252, 0.76);

  --amb-ink-40-text: #785E6B;
  --amb-ink-40-alt-text: #876878;
  --amb-ink-30-text: #7D5C73;
  --amb-ink-20-text: #916781;
  --amb-ink-20-alt-text: #8B6A7D;
  --amb-eco-text: #3C8140;
  --amb-eco-deep-text: #3C7A42;
  --amb-numeral-text: #AA5C8A;
  --amb-badge-sale-ink-text: #83692D;
  --amb-badge-ok-ink-text: #3C7A42;

  --amb-on-ink-faint-text: rgba(253, 234, 243, 0.52);
  --amb-hatch-note: #795C6D;

  --color-bg: var(--amb-bg);
  --color-surface: var(--amb-surface);
  --color-surface-alt: var(--amb-blush);
  --color-surface-soft: var(--amb-blush-soft);
  --color-surface-tint: var(--amb-blush-tint);
  --color-surface-photo: var(--amb-photo-bg);

  --color-text: var(--amb-ink);
  --color-text-strong: var(--amb-ink);
  --color-text-nav: var(--amb-ink-70);
  --color-text-body: var(--amb-ink-50);
  --color-text-muted: var(--amb-ink-40-text);
  --color-text-label: var(--amb-ink-30-text);
  --color-text-faint: var(--amb-ink-20-text);
  --color-text-on-dark: var(--amb-on-ink);
  --color-text-on-dark-soft: var(--amb-on-ink-78);
  --color-text-on-dark-faint: var(--amb-on-ink-faint-text);

  --color-border: var(--amb-line);
  --color-border-strong: var(--amb-line-strong);
  --color-border-soft: var(--amb-line-soft);
  --color-border-row: var(--amb-line-soft-alt);
  --color-border-card-hover: var(--amb-card-hover-line);

  --color-accent: var(--amb-raspberry);
  --color-accent-hover: var(--amb-plum);
  --color-accent-light: var(--amb-rose-light);
  --color-accent-bright: var(--amb-pink-bright);
  --color-accent-contrast: var(--amb-btn-ink);
  --color-accent-soft: var(--amb-blush-soft);
  --color-accent-text: var(--amb-raspberry);
  --color-accent-text-hover: var(--amb-plum);
  --color-accent-fill: var(--amb-raspberry);
  --color-accent-fill-hover: var(--amb-plum);

  --color-good: var(--amb-eco-text);
  --color-good-mark: var(--amb-eco);
  --color-good-deep: var(--amb-eco-deep-text);
  --color-good-soft: var(--amb-eco-tint);
  --color-danger: var(--amb-danger);

  --color-focus: var(--amb-plum);

  --color-stub-text: #7A4A2C;
  --color-stub-border: #A5673A;
  --color-stub-bg: #FDF1E6;

  --scrim-hero: linear-gradient(100deg,
    rgba(42, 21, 32, 0.94) 0%,
    rgba(42, 21, 32, 0.88) 38%,
    rgba(42, 21, 32, 0.52) 62%,
    rgba(42, 21, 32, 0.06) 100%);
  --scrim-tile: linear-gradient(180deg,
    rgba(42, 21, 32, 0) 38%,
    rgba(42, 21, 32, 0.78) 100%);

  --scrim-hero-bottom: linear-gradient(180deg,
    rgba(42, 21, 32, 0.22) 0%,
    rgba(42, 21, 32, 0.62) 40%,
    rgba(42, 21, 32, 0.88) 72%,
    rgba(42, 21, 32, 0.94) 100%);

  --grad-logo: linear-gradient(135deg,
    var(--amb-plum) 0%, var(--amb-plum-grad-end) 100%);

  --font-display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-text);
  --font-mono: ui-monospace, Menlo, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-logo: 800;

  --text-h1-hero: clamp(2.5rem, 5.6vw, 4.375rem);
  --text-h1: clamp(2.25rem, 5.2vw, 4.125rem);
  --text-h1-sm: clamp(2.125rem, 4.7vw, 3.75rem);
  --text-h1-about: clamp(2.25rem, 5.3vw, 4.125rem);

  --text-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --text-h2-sale: clamp(2.25rem, 4.9vw, 3.875rem);
  --text-h3: 1.5rem;
  --text-h4: 1.4375rem;
  --text-h5: 1.1875rem;
  --text-h6: 1.0625rem;
  --text-numeral: clamp(1.625rem, 3vw, 2.875rem);

  --text-lead: 1.0625rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.8125rem;
  --text-2xs: 0.75rem;
  --text-3xs: 0.6875rem;
  --text-4xs: 0.625rem;

  --leading-h1: 1.02;
  --leading-h2: 1.05;
  --leading-tight: 1.2;
  --leading-body: 1.62;
  --leading-flat: 1;
  --leading-logo: 0.88;

  --tracking-h1: -0.01em;
  --tracking-kicker: 0.22em;
  --tracking-label: 0.1em;
  --tracking-btn: 0.06em;
  --tracking-brandline: 0.16em;
  --tracking-logo: -0.015em;
  --tracking-tagline: 0.14em;
  --tracking-promo: 0.08em;
  --tracking-mono: 0.14em;
  --tracking-table: 0.14em;
  --tracking-footer-head: 0.18em;

  --text-h2-product: clamp(1.75rem, 4vw, 3.125rem);
  --leading-h2-product: 1.04;

  --text-price: 1.625rem;
  --text-price-row: 1.125rem;
  --text-price-total: 1.75rem;

  --text-result: 1.375rem;

  --spread-cols: 1.04fr 1fr;
  --spread-gap: 56px;

  --spread-pad-first: 76px;
  --spread-pad: 88px;

  --spread-photo-gap: 16px;

  --ratio-photo-main: 4 / 5;
  --ratio-photo-mini: 1 / 1;
  --ratio-portrait: 3 / 4;

  --thumb-cart: 104px;
  --thumb-extra: 72px;
  --thumb-summary: 52px;
  --thumb-admin: 44px;

  --field-h: 48px;

  --about-cover-h: 420px;

  --container-max: 1240px;
  --container-pad: 40px;
  --section-gap: 88px;
  --section-gap-sm: 64px;
  --heading-gap: 34px;
  --grid-gap-products: 22px;
  --grid-gap-articles: 26px;
  --grid-gap-tiles: 20px;
  --pad-card: 18px;
  --pad-section: 56px;
  --pad-section-sm: 32px;
  --pad-panel: 24px;

  --hero-h: 660px;
  --hero-h-lg: 560px;
  --hero-h-md: 480px;
  --hero-h-sm: 420px;

  --radius-input: 12px;
  --radius-choice: 14px;
  --radius-panel: 16px;
  --radius-card: 20px;
  --radius-card-sm: 18px;
  --radius-section: 24px;
  --radius-pill: 999px;

  --shadow-card-hover: 0 22px 44px -30px rgba(120, 20, 70, 0.3);
  --shadow-float: 0 18px 40px -24px rgba(120, 20, 70, 0.22);

  --btn-h: 52px;
  --btn-pad-x: 30px;
  --btn-h-card: 44px;
  --btn-h-admin: 40px;
  --radius-btn-admin: 10px;

  --promo-h: 40px;
  --header-h: 82px;
  --header-top: 41px;
  --header-bg: rgba(255, 250, 252, 0.94);
  --header-blur: 10px;

  --admin-side-w: 246px;
  --admin-topbar-h: 72px;

  --motion: 170ms;
  --motion-ease: ease-out;

  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lead);
  --font-size-xl: var(--text-h6);
  --font-size-2xl: var(--text-h3);
  --font-size-3xl: var(--text-h2);
  --font-weight-normal: var(--weight-regular);
  --font-weight-medium: var(--weight-medium);

  --font-weight-bold: var(--weight-semibold);
  --line-height-tight: var(--leading-tight);
  --line-height-normal: var(--leading-body);
  --line-height-loose: 1.7;
  --letter-spacing-wide: var(--tracking-btn);
  --letter-spacing-kicker: var(--tracking-kicker);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: var(--radius-input);
  --radius-lg: var(--radius-choice);
  --border-width: 1px;
  --container-padding: var(--container-pad);
  --container-text-max: 44rem;
  --shadow-header: 0 1px 0 rgba(42, 21, 32, 0.05);

  --tap-min: 44px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  --mob-nav-h: 0px;
  --mob-nav-total: 0px;
}

@media (max-width: 767.98px) {
  :root {

    --mob-gap-xs: 12px;
    --mob-gap-sm: 20px;
    --mob-gap: 22px;
    --mob-gap-md: 24px;
    --mob-gap-lg: 26px;
    --mob-pad-card: 12px;
    --mob-pad-block: 20px;
    --mob-pad-section: 22px;

    --text-h1-hero: 40px;
    --text-h1-about: 36px;
    --mob-text-h1-product: 34px;
    --mob-leading-h1-product: 1.04;
    --text-h2: 28px;
    --mob-text-h2-sm: 24px;
    --mob-text-card-title: 19px;
    --mob-text-row-title: 17px;
    --mob-text-form-title: 21px;
    --mob-leading-card: 1.15;

    --text-price: 22px;
    --text-price-total: 24px;
    --mob-text-price-card: 17px;
    --mob-text-price-row: 15px;

    --mob-text-body: 14px;
    --mob-text-body-sm: 12.5px;
    --mob-leading-body: 1.55;
    --mob-text-kicker: 9px;
    --mob-text-label: 11px;
    --mob-text-btn: 11px;
    --mob-text-nav: 9.5px;
    --mob-tracking-kicker: 0.18em;
    --mob-tracking-btn: 0.09em;
    --mob-tracking-nav: 0.05em;

    --radius-section: 22px;
    --radius-card-sm: 18px;
    --radius-choice: 14px;
    --mob-radius-block: 16px;
    --mob-radius-thumb: 12px;

    --btn-h: 52px;
    --mob-btn-h: 50px;
    --mob-icon-btn: 44px;
    --mob-stepper: 42px;
    --mob-stepper-sm: 36px;

    --mob-header-h: 70px;
    --mob-header-h-back: 68px;
    --mob-nav-h: 67px;
    --mob-nav-total: calc(67px + env(safe-area-inset-bottom, 0px));

    --mob-nav-bg: rgba(255, 250, 252, 0.96);

    --mob-sticky-top: calc(var(--mob-header-h) + 8px);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}