@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-block-size: 100vh; -webkit-font-smoothing: antialiased; }
  img, svg, picture { display: block; max-inline-size: 100%; }
  [hidden] { display: none; }
  input, button, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  :where(h1, h2, h3, h4) { font-weight: 500; }
  :where(p) { text-wrap: pretty; }
}

@layer tokens {
  :root {
    --violet-800: #43206b;
    --violet-700: #5b2c82;
    --violet-600: #6f3d99;
    --violet-200: #d9c8ea;
    --violet-100: #e9dff3;
    --violet-050: #f5f0fa;
    
    --green-800: #33453a;
    --green-100: #e3eae4;

    --ink-900: #1c1b20;
    --ink-600: #56515e;
    --ink-400: #8d8794;
    --ink-100: #e8e4ee;
    --ink-050: #f5f3f7;

    --forest-800: #263a2e;
    --moss-050: #edf1e9;
    --night-900: #1e2430;
    --success: #2f8b58;
    --danger: #c9302c;
    --paper: #fff;
    --page: #fcfbfd;

    --step--2: .72rem;
    --step--1: clamp(.78rem, .76rem + .1vw, .83rem);
    --step-0: clamp(.88rem, .86rem + .12vw, .94rem);
    --step-1: clamp(1rem, .96rem + .2vw, 1.13rem);
    --step-2: clamp(1.25rem, 1.15rem + .5vw, 1.6rem);
    --step-3: clamp(1.9rem, 1.45rem + 2vw, 3.15rem);

    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-s: .75rem;
    --space-m: 1.25rem;
    --space-l: 2rem;
    --space-xl: 3.25rem;

    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 20px;
    --radius-pill: 999px;

    --shell: 1260px;
    --font-sans: "Manrope", system-ui, sans-serif;
    --font-display: "Literata", Georgia, serif;

    --ms3f-button-active: #e0457c;
    --ms3f-bg: #fff;
    --ms3f-border: #e8e4ee;
    --ms3f-color: #8d8794;
  }
}

@layer base {
  body { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.55; color: var(--ink-900); background: #fefdfc; overflow-x: hidden; }
  :where(p, li, a) { overflow-wrap: break-word; }
  :focus-visible { outline: 2px solid var(--violet-700); outline-offset: 2px; border-radius: 4px; }
  ::selection { background: var(--violet-100); }
  .icon { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
}

@layer layout {
  .shell { inline-size: min(100% - 2rem, var(--shell)); margin-inline: auto; }
  .section { padding-block: var(--space-xl); }
  @media (width < 48rem) { .section { padding-block: var(--space-l); } }
  .section + .section { padding-block-start: 0; }
  .section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); margin-block-end: var(--space-m); }
  .section__title { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: var(--step-2); }
  @media (width < 40rem) { .section__title { font-size: var(--step-1); } }
}

@layer components {
  .topbar { background: var(--ink-050); border-block-end: 1px solid var(--ink-100); font-size: var(--step--1); color: var(--ink-600); }
  .topbar__list { display: flex; justify-content: space-between; gap: var(--space-m); padding-block: .65rem; }
  .topbar__item { display: flex; align-items: center; gap: .45rem; }
  .topbar__item .icon { inline-size: 16px; block-size: 16px; color: var(--ink-400); }
  .topbar__item--accent { color: var(--violet-700); font-weight: 700; }
  .topbar__item--accent .icon { color: var(--violet-700); }
  @media (width < 64rem) { .topbar { display: none; } }

  .masthead { background: var(--paper); border-block-end: 1px solid var(--ink-100); position: sticky; inset-block-start: 0; z-index: 20; }
  .masthead__row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-m); padding-block: var(--space-s); }
  .logo { display: block; inline-size: clamp(200px, 17vw, 244px); }
  .logo img { inline-size: 100%; block-size: auto; }
  @media (width < 72rem) {
    .masthead__row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: var(--space-s); gap: var(--space-s); }
    .masthead__search { grid-column: 1 / -1; order: 3; }
    .contact { display: none; }
    .catalog-btn { padding: .8rem; }
    .catalog-btn__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
  @media (width < 30rem) {
    .masthead__row { gap: var(--space-xs); }
    .logo { inline-size: clamp(120px, 38vw, 160px); }
    .action { padding: .4rem .5rem; }
  }

  .catalog-btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--violet-700); color: #fff; padding: .9rem 1.5rem; border-radius: var(--radius-m); font-weight: 600; transition: background .18s; }
  .catalog-btn:hover, .catalog-btn[aria-expanded="true"] { background: var(--violet-600); }
  .catalog-btn .icon { transition: transform .2s; }
  .catalog-btn[aria-expanded="true"] .icon { transform: rotate(90deg); }

  .megamenu { position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 30;
    background: var(--paper); border-block-end: 1px solid var(--ink-100); box-shadow: 0 24px 48px -28px #43206b66;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .megamenu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .megamenu__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-l); padding-block: var(--space-l); }
  @media (width < 62rem) { .megamenu__grid { grid-template-columns: 1fr; } .megamenu { max-block-size: 70vh; overflow-y: auto; } }
  .megamenu h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-400); margin-block-end: var(--space-s); }
  .megamenu ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .15rem .75rem; }
  .megamenu a { display: block; padding: .45rem .6rem; border-radius: var(--radius-s); transition: background .15s, color .15s; }
  .megamenu a:hover { background: var(--violet-050); color: var(--violet-700); }
  .megamenu__col--ritual { border-inline-start: 1px solid var(--ink-100); padding-inline-start: var(--space-l); }
  @media (width < 62rem) { .megamenu__col--ritual { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--ink-100); padding-block-start: var(--space-m); } }

  .masthead__search { position: relative; }
  .masthead__search input { inline-size: 100%; padding: .9rem 3rem .9rem 1.15rem; border: 1px solid var(--ink-100); border-radius: var(--radius-m); background: var(--paper); font-size: max(16px, var(--step-0)); }
  .masthead__search input::placeholder { color: var(--ink-400); }
  .masthead__search input:hover { border-color: var(--violet-100); }
  .masthead__search button { position: absolute; inset-block: 4px; inset-inline-end: 4px; inline-size: 42px; display: grid; place-items: center; border-radius: var(--radius-s); color: var(--ink-600); }
  .masthead__search button:hover { background: var(--violet-050); color: var(--violet-700); }

  .contact { text-align: end; font-size: var(--step--1); line-height: 1.45; white-space: nowrap; }
  .contact__phone { display: block; font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; color: var(--violet-800); }
  .contact__phone:hover { color: var(--violet-700); }
  .contact__mail { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-600); font-weight: 500; }
  .contact__mail:hover { color: var(--violet-700); }
  .contact__mail .icon { inline-size: 16px; block-size: 16px; color: var(--violet-600); }

  .actions { display: flex; gap: .35rem; }
  .action { position: relative; display: grid; justify-items: center; gap: .2rem; padding: .45rem .8rem; border-radius: var(--radius-s); font-size: var(--step--2); color: var(--ink-600); transition: background .18s, color .18s; }
  .action:hover { background: var(--violet-050); color: var(--violet-700); }
  .action .icon { inline-size: 23px; block-size: 23px; }
  .action__count { position: absolute; inset-block-start: .1rem; inset-inline-end: .35rem; min-inline-size: 17px; padding-inline: 4px; block-size: 17px; border-radius: var(--radius-pill); background: var(--violet-700); color: #fff; font-size: .63rem; font-weight: 700; line-height: 17px; text-align: center; }
  .action__count:empty::before { content: "0"; }
  .action--muted .action__count { background: var(--ink-400); }
  @media (width < 40rem) { .action span:not(.action__count) { display: none; } }

  .mainnav { background: var(--violet-600); border-block-end: 1px solid var(--violet-700); position: relative; }
  .mainnav__list { display: flex; align-items: center; gap: .15rem; overflow-x: auto; scrollbar-width: none; padding-block: .55rem; }
  .mainnav__list > li { flex: none; }
  .mainnav__list::-webkit-scrollbar { display: none; }
  .mainnav__link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: var(--radius-s); white-space: nowrap; font-weight: 500; line-height: 1; color: #fff; transition: background .18s, color .18s; }
  .mainnav__link:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
  .mainnav__link .icon { inline-size: 17px; block-size: 17px; color: #fff; }
  .mainnav__link .caret { inline-size: 13px; block-size: 13px; color: #fff; opacity: .6; }
  .mainnav__link:hover .icon,
  .mainnav__link:hover .caret { color: #fff; opacity: 1; }
  .mainnav__link--ritual { margin-inline-start: auto; background: #fff; border: 1px solid #fff; color: var(--violet-700); padding-inline: 1.1rem; border-radius: var(--radius-pill); }
  .mainnav__link--ritual .icon { color: inherit; }

  .mainnav__nav {
    position: absolute;
    inset-block: 0;
    z-index: 2;
    inline-size: 2.5rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: opacity .15s ease;
  }
  .mainnav__nav[hidden] { display: flex; opacity: 0; }
  .mainnav__nav--prev { inset-inline-start: 0; justify-content: flex-start; background: linear-gradient(90deg, var(--violet-600) 55%, transparent); }
  .mainnav__nav--next { inset-inline-end: 0; justify-content: flex-end; background: linear-gradient(270deg, var(--violet-600) 55%, transparent); }
  .mainnav__nav[hidden] .mainnav__nav-btn { pointer-events: none; }
  .mainnav__nav-btn {
    pointer-events: auto;
    inline-size: 26px; block-size: 26px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1); color: #fff;
    backdrop-filter: blur(2px);
    transition: background .15s, border-color .15s;
  }
  .mainnav__nav-btn .icon { inline-size: 14px; block-size: 14px; }
  .mainnav__nav-btn:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .6); }
  .mainnav__nav--prev .mainnav__nav-btn { margin-inline-start: .3rem; }
  .mainnav__nav--next .mainnav__nav-btn { margin-inline-end: .3rem; }

  @media (width < 72rem) {
    .mainnav__list { gap: .35rem; scroll-padding-inline: 1rem; }
    .mainnav__link .caret { display: none; }
    .mainnav__link--ritual { margin-inline-start: .35rem; }
  }

  .news-strip { background: linear-gradient(155deg, var(--moss-050), #e3eade); border-block-end: 1px solid #d5e8cc; }
  .news-strip__row { display: flex; align-items: center; gap: var(--space-m); padding-block: .75rem; font-size: var(--step--1); }
  .news-strip__badge { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .35rem .85rem; border-radius: var(--radius-pill); background: #267f10; color: #fff; font-weight: 700; font-size: var(--step--2); letter-spacing: .03em; text-transform: uppercase; line-height: 1; transition: background .18s; }
  .news-strip__badge .icon { inline-size: 15px; block-size: 15px; }
  .news-strip__text { flex: 1; min-inline-size: 0; color: #50604b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .news-strip__text strong { color: #182115; font-weight: 600; }
  .news-strip__divider { color: #a5bf9a; margin-inline: .2rem; }
  .news-strip__link { flex: none; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: #267f10; white-space: nowrap; line-height: 1; transition: color .18s; }
  .news-strip__link:hover { color: #2f9414; }
  .news-strip__link .icon { inline-size: 16px; block-size: 16px; }

  @media (width < 62rem) {
    .news-strip__row { flex-wrap: wrap; row-gap: .55rem; padding-block: .65rem; }
    .news-strip__badge { order: 1; }
    .news-strip__link { order: 2; margin-inline-start: auto; }
    .news-strip__text {
      order: 3;
      flex-basis: 100%;
      white-space: normal;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
    }
  }

  @media (width < 40rem) {
    .news-strip__row { gap: var(--space-xs); }
    .news-strip__badge { padding: .3rem .7rem; font-size: .62rem; }
    .news-strip__link { font-size: .72rem; }
  }

  .hero { position: relative; isolation: isolate; background: #f8f3ed; overflow: hidden; }
  .hero__media { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 56%; z-index: -2; }
  .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 42% 50%; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f8f3ed 0%, #f8f3ed 8%, #f8f3edcc 18%, #f8f3ed66 30%, #f8f3ed1f 42%, transparent 55%); }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; gap: var(--space-l); padding-block: var(--space-xl); min-block-size: 32rem; }
  @media (width < 62rem) {
    .hero__grid { grid-template-columns: 1fr; min-block-size: 0; padding-block: var(--space-l) var(--space-xl); }
    .hero__media { inline-size: 100%; opacity: .3; }
    .hero__media::after { background: linear-gradient(180deg, #f5eefae6, #f5eefacc); }
  }
  .hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--forest-800); font-size: var(--step--1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-block-end: var(--space-m); }
  .hero__eyebrow .icon { inline-size: 17px; block-size: 17px; }
  .hero__title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; letter-spacing: -.02em; color: var(--green-800); max-inline-size: 13ch; }
  .hero__lede { margin-block: var(--space-m) var(--space-l); color: var(--ink-600); max-inline-size: 38ch; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-s); }
  .hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-m); margin-block: var(--space-xl) var(--space-l); }
  @media (width < 62rem) { .hero__facts > :nth-child(3) { display: none; } }

  .fact { display: flex; gap: .6rem; font-size: var(--step--1); line-height: 1.35; }
  .fact .icon { inline-size: 21px; block-size: 21px; color: var(--violet-600); margin-block-start: 1px; }
  .fact b { display: block; font-weight: 600; }
  .fact span { color: var(--ink-600); }

  .btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border-radius: var(--radius-m); font-weight: 600; transition: background .18s, border-color .18s, color .18s; }
  .btn .icon { inline-size: 18px; block-size: 18px; }
  .btn--solid { background: var(--forest-800); color: #fff; }
  .btn--solid:hover { background: #16261c; }
  .btn--ghost { background: var(--paper); border: 1px solid var(--ink-100); }
  .btn--ghost:hover { border-color: var(--violet-700); color: var(--violet-700); }
  .btn--wide { inline-size: 100%; justify-content: center; }
  .btn[disabled] { opacity: .4; pointer-events: none; }

  .terms-band { position: relative; z-index: 5; margin-block-start: -3rem; }
  .terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); box-shadow: 0 18px 44px -30px #43206b59; }
  .terms__item { display: flex; align-items: center; gap: .85rem; padding: var(--space-m) var(--space-m); }
  .terms__item + .terms__item { box-shadow: inset 1px 0 0 var(--ink-100); }
  @media (width < 62rem) {
    .terms-band { margin-block-start: -1.5rem; }
    .terms__item + .terms__item { box-shadow: inset 0 1px 0 var(--ink-100); }
  }
  .terms__icon { inline-size: 44px; block-size: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-m); background: var(--violet-050); color: var(--violet-700); }
  .terms__icon .icon { inline-size: 22px; block-size: 22px; stroke-width: 1.6; }
  .terms b { display: block; font-weight: 600; font-size: var(--step--1); line-height: 1.3; }
  .terms span { color: var(--ink-400); font-size: var(--step--1); }

  .rubrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-m); }
  .rubric { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-block-size: 17.5rem; padding: var(--space-m) var(--space-m) var(--space-s); border-radius: var(--radius-l); overflow: hidden; isolation: isolate; transition: transform .2s, box-shadow .2s; }
  .rubric:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px #43206b73; }
  .rubric__photo { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 66%; max-block-size: 68%; object-fit: contain; object-position: bottom right; z-index: -1; }
  .rubric h3 { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; max-inline-size: 12ch; text-wrap: balance; }
  .rubric p { font-size: var(--step--1); color: var(--ink-600); max-inline-size: 19ch; margin-block-start: var(--space-xs); }
  .rubric__more { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); font-weight: 600; margin-block-start: var(--space-m); }
  .rubric__more .icon { inline-size: 16px; block-size: 16px; }
  .rubric--flowers { background: linear-gradient(155deg, #f8eff9, #efe3f5); }
  .rubric--greens { background: linear-gradient(155deg, var(--moss-050), #e3eade); }
  .rubric--compositions { background: linear-gradient(155deg, #f9f5f0, #f1e9e0); }
  .rubric--ritual { background: var(--night-900); color: #fff; }
  .rubric--ritual p { color: #b4bbc7; }

  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 1fr); gap: var(--space-s); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: .25rem; }
  .rail::-webkit-scrollbar { display: none; }
  @media (width < 48rem) { .rail { grid-auto-columns: minmax(10.5rem, 1fr); } }
  .rail__nav { display: flex; align-items: center; gap: .4rem; }
  .rail__all { font-size: var(--step--1); color: var(--ink-600); margin-inline-end: .4rem; }
  .rail__all:hover { color: var(--violet-700); }
  .rail__nav button { inline-size: 34px; block-size: 34px; display: grid; place-items: center; border: 1px solid var(--ink-100); border-radius: var(--radius-s); background: var(--paper); color: var(--ink-600); }
  .rail__nav button:hover { border-color: var(--violet-700); color: var(--violet-700); }

  .card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-m); overflow: hidden; transition: border-color .18s; }
  .card:hover { border-color: var(--violet-200); }
  .card__media { position: relative; isolation: isolate; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
  .card__photo { inline-size: 90%; block-size: auto; object-fit: contain; margin-inline: auto; }
  .card__badge { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; padding: .2rem .6rem; border-radius: var(--radius-s); font-size: .68rem; font-weight: 700; color: #fff; }
  .card__badge--hit { display: inline-flex; align-items: center; gap: .25rem;
    background: linear-gradient(135deg, #e0483f, var(--danger)); box-shadow: 0 4px 12px -4px #c9302c99; }
  .card__badge--hit .icon { inline-size: 13px; block-size: 13px; stroke-width: 1.8; }
  .card__badge--new { background: var(--success); }
  .card__fav { position: absolute; inset-block-start: .45rem; inset-inline-end: .45rem; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--ink-400); }
  @media (pointer: coarse) {
    .card__fav { inline-size: 40px; block-size: 40px; }
    .rail__nav button { inline-size: 40px; block-size: 40px; }
  }
  .card__fav:hover { color: var(--violet-700); background: #fff; }
  .card__fav.ms3f--active { color: var(--violet-700); }
  .card__fav .ms3f__icon { inline-size: 18px; block-size: 18px; }
  .card__fav.ms3f--active .ms3f__icon { fill: currentColor; }
  .card__body { display: flex; flex-direction: column; gap: .28rem; padding: var(--space-s); flex: 1; }
  .card__name { font-size: var(--step-0); line-height: 1.3; }
  .card__sku { font-size: .7rem; color: var(--ink-400); }
  .card__price { font-size: var(--step-1); font-weight: 700; letter-spacing: -.01em; margin-block-start: var(--space-2xs); }
  .card__price small { font-weight: 500; font-size: .72rem; color: var(--ink-400); }
  .card__pack { font-size: .72rem; color: var(--ink-600); }
  .card__stock { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--success); }
  .card__stock .icon { inline-size: 15px; block-size: 15px; stroke-width: 2.2; }
  .card__stock--out { color: var(--danger); }
  .card__stock-dot { flex: none; inline-size: 8px; block-size: 8px; margin-inline: 3.5px; border-radius: 50%; background: currentColor; }
  .card__buy { display: flex; gap: .4rem; margin-block-start: auto; padding-block-start: var(--space-s); }
  .card__buy[data-cart-state="change"] { display: none; }
  .card.ms3-in-cart .card__buy[data-cart-state="change"] { display: flex; }
  .card.ms3-in-cart .card__buy[data-cart-state="add"] { display: none; }

  .stepper { display: flex; align-items: center; border: 1px solid var(--ink-100); border-radius: var(--radius-s); flex: 1; }
  .stepper button { inline-size: 34px; min-block-size: 38px; display: grid; place-items: center; color: var(--ink-600); }
  .stepper .stepper__btn:hover:not(:disabled) { color: var(--violet-700); }
  .stepper .stepper__btn:disabled { opacity: .3; cursor: default; }
  .stepper .icon { inline-size: 15px; block-size: 15px; }
  .stepper input { inline-size: 100%; min-inline-size: 0; border: 0; text-align: center; font-size: max(16px, var(--step--1)); font-weight: 600; background: none; -moz-appearance: textfield; }
  .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .stepper.is-disabled { background: var(--ink-050); }
  .stepper.is-disabled input:disabled { color: var(--ink-400); cursor: not-allowed; opacity: .7; }
  .stepper.is-disabled .stepper__btn:disabled { cursor: not-allowed; }
  .card__cart { inline-size: 44px; min-block-size: 40px; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--violet-700); color: #fff; transition: background .18s; }
  .card__cart:hover:not(:disabled) { background: var(--violet-600); }
  .card__cart:disabled { background: var(--ink-100); color: var(--ink-400); cursor: not-allowed; }

  .perks { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-m); }
  @media (width < 62rem) { .perks { grid-template-columns: 1fr; } }
  .perk { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--space-m); row-gap: var(--space-2xs); padding: var(--space-m); border-radius: var(--radius-l); overflow: hidden; isolation: isolate; min-block-size: 10rem; }
  .perk--lilac { background: linear-gradient(145deg, #f7f1fb, #efe4f7); }
  .perk--moss { background: linear-gradient(145deg, #f0f4ec, #e6ede2); }
  .perk--blush { background: linear-gradient(145deg, #f9f2fb, #f2e7f6); }
  .perk__photo { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 40%; max-block-size: 92%; object-fit: contain; object-position: bottom right; z-index: -1; }
  .perk__icon { grid-column: 1; grid-row: 1 / 4; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: 14px; background: #fffffff2; box-shadow: 0 4px 14px -8px #43206b66; color: var(--violet-700); }
  .perk__icon .icon { inline-size: 24px; block-size: 24px; stroke-width: 1.5; }
  .perk h3 { grid-column: 2; grid-row: 1; font-size: var(--step-1); line-height: 1.25; max-inline-size: 20ch; }
  .perk p { grid-column: 2; grid-row: 2; font-size: var(--step--1); color: var(--ink-600); max-inline-size: 26ch; }
  .perk a { grid-column: 2; grid-row: 3; justify-self: start; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--step--1); font-weight: 600; color: var(--violet-700); margin-block-start: var(--space-xs); }
  .perk a .icon { inline-size: 15px; block-size: 15px; }

  .seo { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); padding: var(--space-l); }
  @media (width < 48rem) { .seo { padding: var(--space-m); } }
  .seo h2 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.72rem); line-height: 1.2; letter-spacing: -.015em; color: var(--violet-800); text-wrap: balance; }
  .seo h2::after { content: ""; display: block; inline-size: 58px; block-size: 3px; border-radius: 2px; margin-block-start: .75rem; background: linear-gradient(90deg, var(--violet-700), var(--violet-200)); }
  .seo h3 { font-size: var(--step-1); margin-block-start: var(--space-m); }
  .seo p { color: var(--ink-600); margin-block-start: var(--space-xs); max-inline-size: 76ch; }
  .seo ul { margin-block-start: var(--space-xs); color: var(--ink-600); }
  .seo li { position: relative; padding-inline-start: 1.1rem; margin-block-start: .3rem; }
  .seo li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--violet-200); }
  .seo a { color: var(--violet-700); font-weight: 600; }
  .seo a:hover { text-decoration: underline; }
  .seo img { border-radius: var(--radius-m); box-shadow: 0 10px 24px -14px #1c1b2040; }
  .seo p:has(> img:only-child) {display: inline-block; vertical-align: top; inline-size: calc(50% - .375rem);margin: 0 .75rem .75rem 0;}
  .seo p:has(> img:only-child) img { inline-size: 100%; block-size: auto; }
  @media (width < 40rem) {
    .seo p:has(> img:only-child) { inline-size: 100%; margin-inline-end: 0; }
  }

  .section:has(.cart-hero) { padding-block-start: var(--space-l); }

  .cart-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
    padding: var(--space-l) var(--space-l);
    margin-block-end: var(--space-l);
    border-radius: var(--radius-l);
    background: linear-gradient(128deg, #f8f4fc 0%, #f2eaf9 55%, #f9f7fb 100%);
  }
  @media (width < 62rem) {
    .cart-hero { flex-direction: column; align-items: flex-start; }
  }
  @media (width < 30rem) {
    .cart-hero { padding: var(--space-m); }
  }

  .cart-hero__flower {
    position: absolute;
    z-index: -1;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: clamp(200px, 22vw, 360px);
    block-size: auto;
    opacity: .6;
    pointer-events: none;
    transform: translate(12%, 18%);
  }
  @media (width < 62rem) {
    .cart-hero__flower { opacity: .35; inline-size: clamp(150px, 34vw, 240px); transform: translate(18%, 22%); }
  }

  .cart-hero__main { min-inline-size: 0; }
  .crumbs { min-inline-size: 0; }

  .cart-hero .crumbs__list { background: none; padding: 0; margin-block-end: var(--space-s); }

  .cart-hero__title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; letter-spacing: -.02em; color: var(--violet-800); }
  @media (width < 40rem) { .cart-hero__title { font-size: clamp(1.5rem, 1.15rem + 2.6vw, 2.1rem); } }
  .cart-hero__lede { margin-block-start: var(--space-xs); color: var(--ink-600); font-size: var(--step--1); }

  .cart-hero__actions {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-m);
    padding: .85rem 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--paper);
    box-shadow: 0 16px 34px -22px #43206b52;
  }
  @media (width < 40rem) {
    .cart-hero__actions { flex-wrap: wrap; inline-size: 100%; border-radius: var(--radius-l); }
  }

  .cart-hero__count { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 600; color: var(--violet-700); white-space: nowrap; }
  .cart-hero__count .icon { inline-size: 18px; block-size: 18px; }

  .cart-hero__divider { inline-size: 1px; block-size: 1.3rem; background: var(--ink-100); }
  @media (width < 40rem) { .cart-hero__divider { display: none; } }

  .stock-toggle { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--step--1); font-weight: 600; color: var(--ink-600); white-space: nowrap; cursor: pointer; user-select: none; transition: color .15s; }
  .stock-toggle__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
  .stock-toggle__track { position: relative; flex: none; inline-size: 34px; block-size: 20px; border-radius: var(--radius-pill); background: var(--ink-100); transition: background .18s; }
  .stock-toggle__track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #1c1b2040; transition: transform .18s; }
  .stock-toggle:hover { color: var(--violet-700); }
  .stock-toggle:hover .stock-toggle__input:not(:checked) + .stock-toggle__track { background: var(--violet-200); }
  .stock-toggle:has(.stock-toggle__input:checked) { color: var(--violet-700); }
  .stock-toggle__input:checked + .stock-toggle__track { background: var(--violet-700); }
  .stock-toggle__input:checked + .stock-toggle__track::after { transform: translateX(14px); }
  .stock-toggle__input:focus-visible + .stock-toggle__track { outline: 2px solid var(--violet-700); outline-offset: 2px; }
  [data-has-results="0"] .stock-toggle,
  [data-has-results="0"] .stock-toggle-divider { display: none; }

  .cart-hero__clean { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--step--1); color: var(--ink-600); transition: color .18s; white-space: nowrap; }
  .cart-hero__clean:hover { color: var(--danger); }
  .cart-hero__clean .icon { inline-size: 17px; block-size: 17px; }
  .cart-hero__clean[disabled] { opacity: .5; pointer-events: none; }

  .crumbs__list { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .95rem; border-radius: var(--radius-pill); background: var(--ink-050); font-size: var(--step--1); font-weight: 500; color: var(--ink-400); margin-block-end: var(--space-l); overflow-x: auto; scrollbar-width: none; }
  .crumbs__list::-webkit-scrollbar { display: none; }
  .crumbs__item { display: flex; align-items: center; gap: .45rem; flex: none; white-space: nowrap; }
  .crumbs__item + .crumbs__item::before { content: ""; inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--violet-200); flex: none; }
  .crumbs__item a { transition: color .15s; }
  .crumbs__item a:hover { color: var(--violet-700); }
  .crumbs__item--current { color: var(--violet-700); font-weight: 700; }

  @media (width < 40rem) {
    .crumbs__list { overflow-x: visible; }
    .crumbs__item:not(:nth-last-child(-n+2)) { display: none; }
    .crumbs__item:nth-last-child(2)::before { content: none; }
  }

  .cart { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; align-items: start; gap: var(--space-l); }
  @media (width < 68rem) { .cart { grid-template-columns: 1fr; gap: var(--space-m); } }
  .cart__main { min-inline-size: 0; }

  .cart__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); overflow: hidden; }
  .cart__th { padding: .85rem 1rem; background: var(--ink-050); font-size: var(--step--1); font-weight: 500; color: var(--ink-400); text-align: center; white-space: nowrap; }
  .cart__th--name { text-align: start; }
  .cart__th--tools { inline-size: 3.5rem; }

  .cartrow + .cartrow .cartrow__cell { border-block-start: 1px solid var(--ink-100); }
  .cartrow__cell { padding: var(--space-s) 1rem; vertical-align: middle; text-align: center; }
  .cartrow__cell--name { display: flex; align-items: center; gap: .85rem; text-align: start; }
  .cartrow__media { inline-size: 72px; block-size: 72px; flex: none; border-radius: var(--radius-m); overflow: hidden; background: radial-gradient(circle at 50% 46%, #fdfbfe, #f3edf8); }
  .cartrow__media img, .cartrow__ph { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .cartrow__info { display: flex; flex-direction: column; gap: .18rem; min-inline-size: 0; }
  .cartrow__name { font-weight: 600; line-height: 1.3; }
  .cartrow__name:hover { color: var(--violet-700); }
  .cartrow__sku, .cartrow__pack { font-size: .72rem; font-weight:600; color: var(--ink-600); }
  .cartrow__opts { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--ink-400); }
  .cartrow__stock { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--success); }
  .cartrow__stock .icon { inline-size: 15px; block-size: 15px; stroke-width: 2.2; }
  .cartrow__stock--out { color: var(--ink-400); }
  .cartrow__cell--price b { font-weight: 700; white-space: nowrap; }
  .cartrow__cell--price small { font-size: .72rem; color: var(--ink-400); }
  .cartrow__cell--price del { display: block; font-size: .72rem; color: var(--ink-400); }
  .cartrow__pack { display: block; }
  .cartrow__cell--cost { position: relative; }
  .cartrow__cell--cost b { font-weight: 700; white-space: nowrap; }
  .cartrow:has(.stepper--cart[data-pending="true"]) .cartrow__cell--cost > *,
  .cartrow:has(.stepper--cart[aria-busy="true"]) .cartrow__cell--cost > * {
    opacity: 0;
  }
  .cartrow:has(.stepper--cart[data-pending="true"]) .cartrow__cell--cost::after,
  .cartrow:has(.stepper--cart[aria-busy="true"]) .cartrow__cell--cost::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    border: 2px solid var(--ink-100);
    border-top-color: var(--violet-700);
    animation: ms3-spin .7s linear infinite;
  }
  @keyframes ms3-spin { to { transform: rotate(360deg); } }
  .cartrow__save { display: block; font-size: .7rem; color: var(--success); }
  .cartrow__remove { inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--radius-s); color: var(--ink-400); transition: background .18s, color .18s; }
  .cartrow__remove:hover { background: var(--ink-050); color: var(--danger); }
  .cartrow__remove .icon { inline-size: 16px; block-size: 16px; }

  .stepper--cart { position: relative; inline-size: 8.5rem; flex: none; margin-inline: auto; background: var(--paper); }
  .stepper--cart[aria-busy="true"] { opacity: .5; pointer-events: none; }

  .summary { display: grid; gap: var(--space-s); align-self: start; }
  .summary__box { padding: var(--space-m); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); }
  .summary__rows { display: grid; gap: .55rem; }
  .summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); font-size: var(--step--1); }
  .summary__row dt { color: var(--ink-400); }
  .summary__row dd { font-weight: 600; text-align: end; }
  .summary__save { color: var(--success); }
  .summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); margin-block-start: var(--space-m); padding-block-start: var(--space-s); border-block-start: 1px solid var(--ink-100); font-size: var(--step-1); font-weight: 600; }
  .summary__total strong { font-size: var(--step-2); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
  .summary__note { font-size: .72rem; color: var(--ink-400); margin-block-start: var(--space-xs); }
  .summary__note--warn { color: var(--violet-700); }
  .summary__note b { font-weight: 700; }
  .summary__bar { inline-size: 100%; block-size: 5px; margin-block-start: var(--space-xs); border: 0; border-radius: var(--radius-pill); background: var(--ink-100); appearance: none; }
  .summary__bar::-webkit-progress-bar { background: var(--ink-100); border-radius: var(--radius-pill); }
  .summary__bar::-webkit-progress-value { background: var(--violet-700); border-radius: var(--radius-pill); }
  .summary__bar::-moz-progress-bar { background: var(--violet-700); border-radius: var(--radius-pill); }
  .summary .btn--wide { margin-block-start: var(--space-m); }
  .summary__label { font-size: var(--step--1); color: var(--ink-400); margin-block-end: var(--space-xs); }

  .cart-empty { display: grid; justify-items: center; gap: var(--space-s); padding: var(--space-xl) var(--space-m); text-align: center; background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); }
  .cart-empty__icon { inline-size: 56px; block-size: 56px; fill: none; stroke: var(--violet-200); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .cart-empty__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--violet-800); }
  .cart-empty__text { color: var(--ink-600); max-inline-size: 42ch; }
  .cart-empty .btn { margin-block-start: var(--space-xs); }

  @media (width < 48rem) {
    .cart__table, .cart__table tbody { display: block; }
    .cart__table thead { display: none; }
    .cart__table { border: 0; background: none; border-radius: 0; overflow: visible; }

    .cartrow {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "name  name"
        "price price"
        "count cost";
      align-items: center;
      gap: var(--space-xs) var(--space-s);
      padding: var(--space-s);
      margin-block-end: var(--space-xs);
      background: var(--paper);
      border: 1px solid var(--ink-100);
      border-radius: var(--radius-m);
    }
    .cartrow + .cartrow .cartrow__cell { border-block-start: 0; }
    .cartrow .cartrow__cell { padding: 0; text-align: start; }

    .cartrow__cell--name { grid-area: name; padding-inline-end: 2.25rem; }
    .cartrow__cell--price { grid-area: price; }
    .cartrow__cell--count { grid-area: count; }
    .cartrow__cell--cost { grid-area: cost; text-align: end; }
    .cartrow__cell--tools { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; }

    .stepper--cart { inline-size: 100%; max-inline-size: 9.5rem; margin-inline: 0; }
  }

  .order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; align-items: start; gap: var(--space-l); }
  @media (width < 68rem) { .order-layout { grid-template-columns: 1fr; gap: var(--space-m); } }

  .order-form { display: grid; gap: var(--space-m); }
  .order-panel { padding: var(--space-m); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); }
  .order-panel__title { font-size: var(--step-1); font-weight: 600; margin-block-end: var(--space-m); }

  .order-delivery-list { display: grid; gap: .65rem; margin-block-end: var(--space-m); }
  .order-delivery { position: relative; display: flex; align-items: flex-start; gap: .85rem; padding: var(--space-s) var(--space-m); border: 1px solid var(--ink-100); border-radius: var(--radius-m); cursor: pointer; transition: border-color .15s, background .15s; }
  .order-delivery:hover { border-color: var(--violet-200); }
  .order-delivery--active { border-color: var(--violet-700); background: var(--violet-050); }
  .order-delivery input[type="radio"] { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .order-delivery__icon { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-m); background: var(--violet-050); color: var(--violet-700); }
  .order-delivery--active .order-delivery__icon { background: var(--paper); }
  .order-delivery__body { flex: 1; min-inline-size: 0; display: grid; gap: .2rem; }
  .order-delivery__name { font-weight: 600; }
  .order-delivery__desc { font-size: var(--step--1); color: var(--ink-600); }
  .order-delivery__check { flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1px solid var(--ink-100); color: transparent; margin-block-start: .1rem; }
  .order-delivery__check .icon { inline-size: 13px; block-size: 13px; }
  .order-delivery--active .order-delivery__check { background: var(--violet-700); border-color: var(--violet-700); color: #fff; }
  .order-delivery--disabled { cursor: default; opacity: .55; }
  .order-delivery--disabled:hover { border-color: var(--ink-100); }
  .order-delivery__lock { display: block; font-size: .72rem; color: var(--danger); margin-block-start: .2rem; }

  .order-address { padding-block-start: var(--space-s); border-block-start: 1px solid var(--ink-100); }
  .order-address[hidden] { display: none; }
  .order-address__title { font-size: var(--step-0); font-weight: 600; margin-block-end: var(--space-s); }

  .order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); margin-block-end: var(--space-s); }
  @media (width < 30rem) { .order-grid { grid-template-columns: 1fr; } }

  .order-checkbox { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--step--1); color: var(--ink-600); cursor: pointer; }
  .order-checkbox input { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: .1rem; accent-color: var(--violet-700); }
  .order-checkbox a { color: var(--violet-700); font-weight: 600; }
  .order-checkbox a:hover { text-decoration: underline; }

  .order-summary-card { padding: var(--space-m); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); display: grid; gap: var(--space-m); align-self: start; }
  .order-summary-card h2 { font-size: var(--step-1); font-weight: 600; }

  .order-items { display: grid; gap: var(--space-s); max-block-size: 24rem; overflow-y: auto; }
  .order-item { display: flex; align-items: center; gap: .7rem; }
  .order-item__media { flex: none; inline-size: 44px; block-size: 44px; border-radius: var(--radius-s); overflow: hidden; background: radial-gradient(circle at 50% 46%, #fdfbfe, #f3edf8); }
  .order-item__media img, .order-item__ph { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .order-item__body { flex: 1; min-inline-size: 0; display: grid; gap: .1rem; }
  .order-item__name { font-size: var(--step--1); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .order-item__opts { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--ink-400); }
  .order-item__meta { font-size: .72rem; color: var(--ink-400); }
  .order-item__cost { flex: none; font-size: var(--step--1); font-weight: 600; white-space: nowrap; }

  .order-items-total { display: flex; align-items: baseline; justify-content: space-between; margin-block-start: var(--space-s); padding-block-start: var(--space-s); border-block-start: 1px solid var(--ink-100); font-weight: 600; }
  .order-items-total strong { font-size: var(--step-2); font-weight: 700; letter-spacing: -.01em; }
  .order-items-empty { color: var(--ink-400); font-size: var(--step--1); }

  .order-field { display: grid; gap: .35rem; min-inline-size: 0; }
  .order-field label { font-size: var(--step--1); font-weight: 500; color: var(--ink-600); }
  .order-req { color: var(--danger); }
  .order-input {
    inline-size: 100%; padding: .75rem .9rem; border: 1px solid var(--ink-100); border-radius: var(--radius-m);
    background: var(--paper); font-size: max(16px, var(--step-0)); font-family: inherit; color: inherit;
    transition: border-color .15s;
  }
  .order-input:hover { border-color: var(--violet-100); }
  .order-input:focus-visible { border-color: var(--violet-700); }
  .order-input--invalid { border-color: var(--danger); }
  textarea.order-input { resize: vertical; min-block-size: 5rem; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: hidden; }

  .order-submit { inline-size: 100%; justify-content: center; }
  .order-submit[disabled] { opacity: .6; pointer-events: none; }
  .order-submit.is-loading .icon { animation: ms3-spin .7s linear infinite; }

  .order-empty { display: grid; justify-items: center; gap: var(--space-s); padding: var(--space-xl) var(--space-m); text-align: center; background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); }
  .order-empty__icon { inline-size: 56px; block-size: 56px; fill: none; stroke: var(--violet-200); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .order-empty p { color: var(--ink-600); }

  .order-thanks { display: grid; justify-items: center; gap: var(--space-s); padding: var(--space-xl) var(--space-m); text-align: center; background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); }
  .order-thanks[hidden] { display: none; }
  .order-thanks__icon { inline-size: 52px; block-size: 52px; padding: 12px; border-radius: 50%; background: var(--violet-050); color: var(--violet-700); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .order-thanks h2 { font-family: var(--font-display); font-size: var(--step-2); color: var(--violet-800); }
  .order-thanks p { color: var(--ink-600); max-inline-size: 34ch; }

  .toast {
    position: fixed; z-index: 90;
    inset-block-end: var(--space-m); inset-inline-end: var(--space-m);
    max-inline-size: 22rem;
    padding: .85rem 1.1rem;
    background: var(--paper);
    border: 1px solid var(--ink-100);
    border-inline-start: 3px solid var(--success);
    border-radius: var(--radius-m);
    box-shadow: 0 16px 34px -20px #1c1b2073;
    font-size: var(--step--1);
    color: var(--ink-900);
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .toast--visible { opacity: 1; transform: translateY(0); }
  .toast--error { border-inline-start-color: var(--danger); }
  @media (width < 40rem) { .toast { inset-inline: var(--space-s); max-inline-size: none; } }

  .order-popup {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    padding: var(--space-m);
    background: rgba(28, 27, 32, .45);
    animation: ms3-fade .2s ease;
  }
  @keyframes ms3-fade { from { opacity: 0; } to { opacity: 1; } }
  .order-popup__card {
    display: grid; justify-items: center; gap: var(--space-s);
    max-inline-size: 26rem;
    padding: var(--space-l) var(--space-m);
    text-align: center;
    background: var(--paper);
    border-radius: var(--radius-l);
    box-shadow: 0 24px 60px -20px #1c1b2073;
  }
  .order-popup__icon { inline-size: 52px; block-size: 52px; padding: 12px; border-radius: 50%; background: var(--violet-050); color: var(--violet-700); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .order-popup__card h2 { font-family: var(--font-display); font-size: var(--step-2); color: var(--violet-800); }
  .order-popup__card p { color: var(--ink-600); }

  .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-s); list-style: none; padding: 0; margin: 0 0 var(--space-xl); }

  .catalog-toolbar {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-s);
    padding: var(--space-s); margin-block-end: var(--space-l);
    background: var(--ink-050); border-radius: var(--radius-l);
  }
  .sort-chip { flex: 1; min-inline-size: 14rem; display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem .5rem .5rem; background: var(--paper); border-radius: var(--radius-m); }
  .sort-chip__icon { flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: var(--radius-s); background: var(--violet-600); color: var(--paper); }
  .sort-chip__icon .icon { inline-size: 18px; block-size: 18px; }
  .sort-chip__body { display: grid; gap: .15rem; flex: 1; min-inline-size: 0; }
  .sort-chip__label { font-size: var(--step--1); color: var(--ink-400); }
  .sort-chip__select {
    appearance: none; -webkit-appearance: none; border: 0; padding: 0 1.4rem 0 0; margin: 0;
    background: none; font-size: var(--step--1); font-weight: 600; color: var(--ink-900); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b3a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center; background-size: 14px;
  }
  .sort-chip__select:focus-visible { outline: none; }

  .sort-chip--check { flex: 0 1 auto; min-inline-size: 0; padding-inline-end: 1.3rem; cursor: pointer; position: relative; }
  .sort-chip__check { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
  .sort-chip__value { font-size: var(--step--1); font-weight: 600; color: var(--ink-900); white-space: nowrap; }
  .sort-chip--check .sort-chip__icon { background: var(--ink-050); color: var(--ink-400); transition: background .15s, color .15s; }
  .sort-chip--check .sort-chip__icon .icon { stroke-width: 2.2; }
  .sort-chip--check:hover .sort-chip__icon { background: var(--violet-050); color: var(--violet-700); }
  .sort-chip__check:checked ~ .sort-chip__icon { background: var(--violet-700); color: #fff; }
  .sort-chip__check:focus-visible ~ .sort-chip__icon { outline: 2px solid var(--violet-700); outline-offset: 2px; }

  .sort-reset {
    display: inline-flex; align-items: center; gap: .5rem; padding-inline: 1.3rem;
    font-size: var(--step-0); font-weight: 700; color: var(--violet-800); transition: color .15s;
  }
  .sort-reset .icon { inline-size: 17px; block-size: 17px; }

  @media (width < 62rem) {
    .catalog-toolbar { flex-direction: column; }
    .sort-chip { min-inline-size: 0; }
    .sort-reset { justify-content: center; padding-block: .4rem; }
  }

  #pdopage { position: relative; }
  #pdopage .pagination { display: none; }
  #pdopage.loading .catalog-grid { margin-block-end: var(--space-xl); }
  #pdopage.loading::after {
    content: "";
    display: block;
    inline-size: 34px;
    block-size: 34px;
    margin: calc(var(--space-xl) * -1 + var(--space-m)) auto 0;
    border-radius: 50%;
    border: 3px solid var(--ink-100);
    border-top-color: var(--violet-700);
    animation: ms3-spin .7s linear infinite;
  }
  .page-search #pdopage.loading::after { display: none; }

  #pdopage.is-sorting .catalog-grid { opacity: .35; pointer-events: none; transition: opacity .15s; }
  #pdopage.is-sorting::after {
    content: "";
    position: absolute;
    inset-block-start: 3rem;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    border: 3px solid var(--ink-100);
    border-top-color: var(--violet-700);
    animation: ms3-spin .7s linear infinite;
  }

  .footer { position: relative; isolation: isolate; overflow: hidden; color: #c8cddb; padding-block: var(--space-xl) var(--space-m); font-size: var(--step--1);
    background: linear-gradient(112deg, #1c2230 0%, #241d38 52%, #2e2049 100%); }
  .footer__deco { position: absolute; inset-block-end: 1.5rem; inset-inline-end: 2rem; inline-size: clamp(180px, 20%, 280px); block-size: auto; object-fit: contain; opacity: .28; z-index: -1; pointer-events: none; }
  .footer a:hover { color: #fff; }
  .footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: var(--space-l); }
  @media (width < 72rem) {
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); }
    .footer__deco { inline-size: 170px; inset-block-end: 1rem; inset-inline-end: 1rem; opacity: .16; }
  }
  @media (width < 34rem) {
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--space-s); }
    .footer__deco { display: none; }
  }
  .footer h3 { color: #fff; font-size: var(--step-0); margin-block-end: var(--space-s); }
  .footer li + li { margin-block-start: .4rem; }
  .footer__contact { display: flex; gap: .5rem; }
  .footer__contact .icon { inline-size: 16px; block-size: 16px; margin-block-start: 3px; color: #9b8fbe; }
  .footer__bottom { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-s) var(--space-l); margin-block-start: var(--space-l); padding-block-start: var(--space-m); border-block-start: 1px solid #3a3352; color: #9096a8; }
  .footer__disclaimer { font-size: var(--step--2); line-height: 1.5; color: #7d8296; max-inline-size: 62ch; }
  .footer__bottom > a { white-space: nowrap; }

  .cookie { position: fixed; inset-block-end: var(--space-m); inset-inline-end: var(--space-m); z-index: 60;
    inline-size: min(100% - 2rem, 23rem);
    padding: var(--space-m); border: 1px solid var(--ink-100); border-radius: var(--radius-l);
    background: var(--paper); box-shadow: 0 20px 44px -24px #43206b73;
    transition: opacity .25s ease, transform .25s ease; }
  .cookie[hidden] { display: none; }
  .cookie[data-state="hiding"] { opacity: 0; transform: translateY(12px); }
  .cookie p { font-size: var(--step--1); line-height: 1.5; color: var(--ink-600); }
  .cookie a { color: var(--violet-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  .cookie button { margin-block-start: var(--space-s); padding: .6rem 1.3rem; border-radius: var(--radius-m); background: var(--violet-700); color: #fff; font-weight: 600; font-size: var(--step--1); transition: background .18s; }
  .cookie button:hover { background: var(--violet-600); }
  @media (width < 40rem) { .cookie { inset-inline: var(--space-xs); inline-size: auto; } .cookie button { inline-size: 100%; } }

  .iziToast-wrapper {
    position: fixed !important;
    inset: auto 0 0 auto !important;
    inline-size: auto !important;
    max-inline-size: 22rem !important;
    padding: 1rem !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
    gap: .5rem !important;
    pointer-events: none;
  }
  .iziToast-wrapper > * { pointer-events: auto; }

  .iziToast {
    inline-size: 100% !important;
    min-block-size: 0 !important;
    margin: 0 !important;
    padding: .8rem 1rem !important;
    border: 1px solid var(--ink-100) !important;
    border-radius: var(--radius-m) !important;
    background: var(--paper) !important;
    box-shadow: 0 14px 32px -20px #43206b8c !important;
    font-family: var(--font-sans) !important;
  }
  .iziToast::after,
  .iziToast > .iziToast-progressbar,
  .iziToast > .iziToast-cover,
  .iziToast > .iziToast-body .iziToast-title,
  .iziToast > .iziToast-body .iziToast-buttons { display: none !important; }

  .iziToast > .iziToast-body {
    margin: 0 !important;
    padding: 0 1.5rem 0 1.6rem !important;
    min-block-size: 0 !important;
  }
  .iziToast > .iziToast-body .iziToast-texts { margin: 0 !important; }
  .iziToast > .iziToast-body .iziToast-message {
    margin: 0 !important;
    font-size: var(--step--1) !important;
    line-height: 1.35 !important;
    color: var(--ink-900) !important;
    opacity: 1 !important;
  }

  .iziToast > .iziToast-body .iziToast-icon {
    inline-size: 7px !important;
    block-size: 7px !important;
    inset-inline-start: 0 !important;
    inset-block-start: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: var(--success) !important;
    font-size: 0 !important;
    text-indent: -999px !important;
    overflow: hidden !important;
  }
  .iziToast.iziToast-color-red > .iziToast-body .iziToast-icon { background: #d6455c !important; }

  .iziToast > .iziToast-close {
    inline-size: 22px !important;
    block-size: 22px !important;
    inset-inline-end: 4px !important;
    inset-block-start: 50% !important;
    transform: translateY(-50%) !important;
    opacity: .3 !important;
    filter: none !important;
    background-size: 8px !important;
  }
  .iziToast > .iziToast-close:hover { opacity: .75 !important; }

  @media (width < 40rem) {
    .iziToast-wrapper { inset-inline: 0 !important; max-inline-size: none !important; padding: .6rem !important; }
  }

  .product {
    display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: var(--space-xl); margin-block: var(--space-l);
  }
  @media (width < 62rem) { .product { grid-template-columns: minmax(0, 1fr); } }

  .product__info {
    max-inline-size: 40rem; padding: var(--space-l);
    background: rgba(245, 240, 250, 0.5); border-radius: var(--radius-l);
  }
  @media (width < 62rem) { .product__info { max-inline-size: none; padding: var(--space-m); } }

  .product-gallery {
    position: sticky; inset-block-start: var(--space-m); display: grid; gap: var(--space-m);
    padding: var(--space-m); background: var(--ink-050); border-radius: var(--radius-l);
  }
  @media (width < 62rem) { .product-gallery { position: static; } }

  .product-gallery__main {
    position: relative; aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden;
    background: var(--paper); box-shadow: 0 20px 44px -26px #1c1b2059;
  }
  .product-gallery__main img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: var(--space-l); cursor: zoom-in; }

  .product-gallery__zoom, .product-gallery__nav {
    position: absolute; display: grid; place-items: center; inline-size: 42px; block-size: 42px;
    border-radius: 50%; background: var(--paper); color: var(--ink-600);
    box-shadow: 0 10px 24px -10px #1c1b2050; transition: transform .15s, color .15s;
  }
  .product-gallery__zoom:hover { color: var(--violet-700); transform: scale(1.06); }
  .product-gallery__nav:hover { color: var(--violet-700); transform: translateY(-50%) scale(1.06); }
  .product-gallery__zoom { inset-block-start: var(--space-s); inset-inline-end: var(--space-s); }
  .product-gallery__zoom .icon { inline-size: 17px; block-size: 17px; }
  .product-gallery__nav { inset-block-start: 50%; transform: translateY(-50%); }
  .product-gallery__nav--prev { inset-inline-start: var(--space-s); }
  .product-gallery__nav--next { inset-inline-end: var(--space-s); }

  .product-gallery__thumbs { display: flex; gap: .7rem; flex-wrap: wrap; }
  .product-gallery__thumb {
    inline-size: 4.75rem; block-size: 4.75rem; flex: none; border-radius: var(--radius-m);
    overflow: hidden; border: 2px solid transparent; background: var(--paper);
    box-shadow: 0 6px 16px -10px #1c1b2040; transition: border-color .15s, transform .15s;
  }
  .product-gallery__thumb:hover { transform: translateY(-2px); }
  .product-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: .3rem; }
  .product-gallery__thumb.is-active { border-color: var(--violet-700); }

  .product-gallery--empty .product-gallery__main { display: grid; place-items: center; }
  .product-gallery__placeholder { inline-size: 40%; block-size: 40%; color: var(--ink-100); }

  .product-hero { padding-block: var(--space-l); }
  .product-hero .cart-hero__main { inline-size: 100%; display: flex; align-items: center; }
  .product-hero .crumbs__list { margin-block-end: 0; }
  .product-hero .cart-hero__flower { inline-size: clamp(120px, 14vw, 200px); opacity: .5; transform: translate(14%, 22%); }
  @media (width < 62rem) { .product-hero .cart-hero__flower { opacity: .28; inline-size: clamp(90px, 26vw, 150px); transform: translate(18%, 26%); } }

  .product__badges { display: flex; gap: .5rem; }
  .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; font-size: var(--step--2); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
  .badge .icon { inline-size: 12px; block-size: 12px; }
  .badge--new { background: #e8f6ec; color: #1f7a44; }
  .badge--hit { background: #fdecec; color: #c73a3a; }

  .product__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-m); margin-block-end: var(--space-s); }
  .product__top-actions { display: flex; align-items: center; gap: .7rem; margin-inline-start: auto; }
  .product__article-badge { padding: .7rem 1.2rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--violet-100); color: var(--ink-600); font-size: var(--step--1); white-space: nowrap; }
  .product__article-badge b { color: var(--violet-800); font-weight: 700; }

  .product__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.15rem); color: #2c1b4d; line-height: 1.15; letter-spacing: -.01em; margin-block-end: var(--space-m); }
  .product__title .badge { vertical-align: middle; margin-inline-start: .6rem; }
  .product__fav {
    flex: none; display: grid; place-items: center; inline-size: 46px; block-size: 46px;
    border-radius: 50%; border: 1px solid var(--ink-100); color: var(--ink-400); background: var(--paper);
    box-shadow: 0 6px 16px -10px #1c1b2040; transition: color .15s, border-color .15s;
  }
  .product__fav.ms3f--active { color: #e0457c; border-color: #f2c3d6; background: #fdf1f6; }
  .product__fav .ms3f__icon { inline-size: 20px; block-size: 20px; }
  .product__fav.ms3f--active .ms3f__icon { fill: currentColor; }
  .product__fav .icon { inline-size: 20px; block-size: 20px; }

  .product__perks { display: flex; gap: 0; margin-block: var(--space-l); padding: var(--space-m); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); }
  .product__perks li { display: flex; align-items: center; gap: .7rem; flex: 1; min-inline-size: 0; padding-inline: var(--space-s); font-size: var(--step--1); color: var(--ink-600); font-weight: 500; line-height: 1.25; }
  .product__perks .perk-text { min-inline-size: 0; }
  .product__perks li + li { border-inline-start: 1px solid var(--ink-100); }
  .product__perks li:first-child { padding-inline-start: 0; }
  .product__perks .icon-badge {
    flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px;
    border-radius: var(--radius-m); background: var(--violet-050);
  }
  .product__perks li:nth-child(2) .icon-badge { background: #e8f6ec; }
  .product__perks .icon { inline-size: 19px; block-size: 19px; color: var(--violet-700); }
  .product__perks li:nth-child(2) .icon { color: #1f7a44; }
  @media (width < 40rem) {
    .product__perks { flex-direction: column; gap: var(--space-s); padding: var(--space-s); }
    .product__perks li + li { border-inline-start: none; padding-inline-start: 0; }
  }

  .product__buy {
    display: grid; gap: var(--space-m); padding: var(--space-l);
    background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l);
    box-shadow: 0 24px 50px -32px #1c1b2059;
  }
  .product__price { display: flex; align-items: baseline; gap: .6rem; }
  .product__price b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem); color: #2c1b4d; letter-spacing: -.01em; }
  .product__price span { color: var(--ink-400); font-size: var(--step-0); }

  .product__stock { display: flex; align-items: center; gap: .5rem; font-size: var(--step-0); font-weight: 600; }
  .product__stock--out { color: var(--danger); }
  .product__stock .card__stock-dot { inline-size: 10px; block-size: 10px; margin-inline: 0; }

  .product__buy-row { display: flex; align-items: center; gap: var(--space-m); }
  .stepper--product { flex: none; inline-size: 9.5rem; }
  .product__cart-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.6rem;
    background: var(--violet-700); color: #fff; border-radius: var(--radius-m); font-weight: 600;
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--violet-700) 70%, transparent);
    transition: background .15s, transform .15s;
  }
  .product__cart-btn:hover:not(:disabled) { background: var(--violet-800); transform: translateY(-1px); }
  .product__cart-btn:disabled { background: var(--ink-100); color: var(--ink-400); box-shadow: none; transform: none; opacity: 1; cursor: not-allowed; }
  .product__cart-btn .icon { inline-size: 18px; block-size: 18px; }
  @media (width < 30rem) {
    .product__buy-row { flex-direction: column; align-items: stretch; }
    .stepper--product { inline-size: 100%; }
  }

  .product__pack-banner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
    padding: .9rem 1.2rem; border-radius: 999px; background: #eaf7ef; color: #1f7a44;
  }
  .product__pack-banner-label { display: flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 600; }
  .product__pack-banner-label .icon { inline-size: 17px; block-size: 17px; }
  .product__pack-banner-price { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
  .product__pack-banner-price .icon { inline-size: 15px; block-size: 15px; }
  @media (width < 30rem) { .product__pack-banner { flex-direction: column; align-items: flex-start; gap: .3rem; border-radius: var(--radius-m); } }

  .product__specs { margin-block-start: var(--space-l); }
  .product__specs-title { font-size: var(--step-1); font-weight: 600; margin-block-end: var(--space-s); }
  .product__specs-list {
    display: grid; border-radius: var(--radius-m); overflow: hidden;
    background: var(--paper); border: 1px solid var(--ink-100);
  }
  .product__specs-row {
    display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-s);
    padding-block: .85rem;
  }
  .product__specs-row:nth-child(odd) { background: var(--ink-050); }
  .product__specs-row dt { padding-inline-start: 1rem; color: var(--ink-600); }
  .product__specs-row dd { padding-inline-end: 1rem; font-weight: 600; color: var(--ink-900); }
  @media (width < 30rem) {
    .product__specs-row { grid-template-columns: 1fr; gap: .2rem; padding-inline: .8rem; }
    .product__specs-row dt, .product__specs-row dd { padding-inline: 0; }
  }

  .product__option-select {
    appearance: none; -webkit-appearance: none;
    padding: .55rem 2.3rem .55rem 1rem; border: 1px solid var(--ink-100); border-radius: 999px;
    background-color: var(--paper); font-size: var(--step--1); font-weight: 500; color: var(--ink-900);
    cursor: pointer; transition: border-color .15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b3a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center; background-size: 14px;
  }
  .product__option-select:hover, .product__option-select:focus-visible { border-color: var(--violet-700); }
  .product__option-select:focus-visible { outline: 2px solid var(--violet-700); outline-offset: 1px; }

  .product__specs-row dd { display: flex; align-items: center; gap: .6rem; }
  .color-dot {
    flex: none; inline-size: 13px; block-size: 13px; border-radius: 50%;
    border: 2px solid var(--paper); box-shadow: 0 0 0 1.5px var(--ink-100);
  }
  .product__specs-row .color-dot { inline-size: 18px; block-size: 18px; }

  .product__description { margin-block-start: var(--space-xl); padding: var(--space-l); background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--radius-l); }
  .product__description h2 { font-size: var(--step-1); font-weight: 600; margin-block-end: var(--space-s); }
  .product__description-text { color: var(--ink-600); line-height: 1.6; }

  .search-empty {
    display: grid; justify-items: center; gap: var(--space-s); text-align: center;
    padding: var(--space-xl) var(--space-m); background: var(--paper); border: 1px solid var(--ink-100);
    border-radius: var(--radius-l); margin-block: var(--space-l);
  }
  .search-empty__icon { inline-size: 56px; block-size: 56px; fill: none; stroke: var(--violet-200); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .search-empty__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--violet-800); }
  .search-empty__lede { color: var(--ink-600); max-inline-size: 42ch; }
  .search-empty .btn { margin-block-start: var(--space-xs); }

  .catalog-empty,
  .catalog-empty__when-filtered { display: none; }
  #pdopage.is-empty .catalog-empty { display: grid; margin-block-start: 0; }
  #pdopage.is-empty .catalog-grid { display: none; }
  #pdopage.is-filtered .catalog-empty p.catalog-empty__when-filtered { display: block; }
  #pdopage.is-filtered .catalog-empty .btn.catalog-empty__when-filtered { display: inline-flex; }
  #pdopage.is-filtered .catalog-empty__when-all { display: none; }

  .product__related { margin-block: var(--space-xl); }

  .lightbox {
    position: fixed; inset: 0; z-index: 85; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center;
    padding: var(--space-l); background: #100c1acc; opacity: 0; transition: opacity .2s ease;
  }
  .lightbox--visible { opacity: 1; }
  .lightbox img { max-inline-size: min(100%, 60rem); max-block-size: 100%; object-fit: contain; border-radius: var(--radius-m); }
  .lightbox__close {
    position: absolute; inset-block-start: var(--space-m); inset-inline-end: var(--space-m);
    display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%;
    background: var(--paper); color: var(--ink-600);
  }
  .lightbox__close .icon { inline-size: 18px; block-size: 18px; }
}

@layer utilities {
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
}