/* --- /hh/hh-tokens.css --- */
/* HT design tokens (--dz-*) — HH-цвета для страниц, портированных с PD Medusa
 * (карт-драйер, одностраничный чекаут). Порт 2026-09-10. Имена ролей — как в
 * PD src/styles/dozo-tokens.css, чтобы портированный CSS читал те же токены;
 * значения — палитра HT, снятая с живого hippy-trippy.com:
 *   страница крем #FFFFFF, фиолетовый #000000 (панели/кнопки), тёмный #000000
 *   (блоки внутри панелей), жёлтый #F2FF00 (акцент ВНУТРИ фиолетовых панелей),
 *   текст на креме rgba(0,0,0,.75) / #000000, шрифты Outfit + Montserrat 800.
 * Семантика :root — «фиолетовая панель» (текст белый, акцент жёлтый). Светлые
 * области (тело драйера, форма кассы на креме) переобъявляют токены в своей
 * области — см. cart-drawer.css и checkout.css. Лежит в public/hh (не в
 * public/theme — то зеркало Shopify-темы). */
:root {
  --dz-bg: #FFFFFF;
  --dz-bar: #000000;
  --dz-card: #000000;
  --dz-tile: #000000;
  --dz-photo-gradient: linear-gradient(180deg, #000000 0%, #000000 100%);
  --dz-accent: #F2FF00;
  --dz-accent-hover: #F2FF00;
  --dz-on-accent: #000000;
  --dz-pink: #F2FF00;
  --dz-rule: #F2FF00;
  --dz-gold: #F2FF00;
  --dz-success: #22a447;
  --dz-fg: #ffffff;
  --dz-fg-body: rgba(255, 255, 255, 0.92);
  --dz-fg-muted: rgba(255, 255, 255, 0.7);
  --dz-fg-faint: rgba(255, 255, 255, 0.55);
  --dz-fg-on-light: #000000;
  --dz-line: rgba(255, 255, 255, 0.16);
  --dz-line-strong: rgba(255, 255, 255, 0.22);
  --dz-r-card: 20px;
  --dz-r-ctl: 12px;
  --dz-r-pill: 999px;
  --dz-hit: 44px;
  --dz-cta-h: 52px;
  --dz-cta-h-sticky: 56px;
  --dz-cta-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  --dz-selected-border: 2px solid var(--dz-accent);
  --dz-selected-bg: rgba(242, 255, 0, 0.1);
  --dz-font-display: var(--font-heading-family, "Alfa Slab One"), "Gowun Batang", system-ui, sans-serif;
  --dz-font-body: "Gowun Batang", system-ui, sans-serif;
  --dz-body-size: 16px;
  --dz-body-size-min: 14px;
  --dz-input-size: 16px;
  --dz-line-height: 1.6;
  --dz-track-label: 0.08em;
  --dz-track-cta: 0.04em;
  --dz-track-bar: 0.12em;
  --dz-pad-card: 24px;
  --dz-pad-tile: 16px;
  --dz-gap-sm: 12px;
  --dz-gap: 16px;
  --dz-gap-lg: 24px;
}

/* --- /hh/cart-drawer.css --- */
/* ============================================================================
   HT — CART DRAWER (порт PD public/dozo/cart-drawer-dozo.css 1-в-1 по структуре,
   2026-09-10). Геометрия, классы и порядок правил — PD; цвета и шрифты — HH:
     PD #f6f3fb (тело)        → #FFFFFF крем страницы HH
     PD #ffffff (карточки)    → #ffffff
     PD #000000 / #210048 / #1e0045 / #2e005f (фиолетовые) → #000000 / #000000
     PD #f2ff00 (CTA/акцент)  → #F2FF00
     PD #f49bf9 / #000000 (розовый/магента текстом) → #000000
     PD градиент rgb(243,243,243)→rgb(243,243,243) → фиолетовый HT #000000→#000000
     "chillax" → var(--font-heading-family, Montserrat); Outfit остаётся
   Лежит в public/hh/ (НЕ в public/theme — то зеркало Shopify-темы с rsync --delete).
   Подключается через local/scripts/sections-css-list.txt (/hh/cart-drawer.css).
   ============================================================================ */
/* ============================================================================
   СТИЛИ ДРОВЕРА КОРЗИНЫ MEDUSA — ЖИВОЙ ИСТОЧНИК. Правьте ЭТОТ файл.
   ----------------------------------------------------------------------------
   Файл переехал сюда 2026-08-30 из public/theme/, потому что public/theme —
   ЗЕРКАЛО темы Shopify: local/scripts/copy-theme-assets.sh делает туда
   rsync -a --delete из PUREDOZO/theme/assets. Замер того же дня: копия в
   зеркале отличалась от темы Shopify на 583 строки, содержала 115 обращений к
   токенам --dz-* (в теме Shopify — ноль), а тема принесла бы обратно 13
   вхождений запрещённого брифом синего #000000. То есть ЛЮБОЙ прогон
   синхронизации темы молча отменил бы весь редизайн корзины цикла 2 и стили
   order bump цикла 3 — и заметили бы это по внешнему виду, а не по ошибке.

   Это третье срабатывание одного и того же капкана: цикл 0 — dozo-features.json,
   цикл 2 — dozo-cart-rules.json, цикл 3 — этот файл. Правило прежнее: всё, чем
   владеет витрина Medusa, лежит ВНЕ public/theme.

   Подключается через local/scripts/sections-css-list.txt (/dozo/…), сторож
   пути — local/scripts/features-gate-check.mjs.
   ============================================================================ */

/* =============================================================
   DOZO Native Cart Drawer — M2
   M1: base drawer, items, qty/remove, subtotal, reward bar, consent, checkout
   M2: upsells (FBT), free gift block, trust badges
   Target: 1:1 with Monster Upsells visual audit (mu-cart-audit-mobile.png)
   Scoped to #dozo-cart-drawer-root to avoid conflicts with MU / Shopify default
   ============================================================= */

/* ----- Reset MU drawer on testovoya ----- */
#monster-cart-wrapper { display: none !important; }

/* Theme base.css hides ALL empty divs (div:empty{display:none}). Force-show our
   intentionally-empty styled boxes: overlay backdrop, reward-bar fill, spinner. */
#dozo-cart-overlay,
#dozo-cart-drawer-root .dz-reward-bar__fill,
#dozo-cart-drawer-root .dz-spinner { display: block; }
/* Недостигнутая веха — пустой div без галочки; без этого правила тема прятала
   её целиком (поймано снимком 2026-09-04: при 1 товаре точек не было). */
#dozo-cart-drawer-root .dz-reward-bar__dot { display: flex; }

/* ----- Overlay ----- */
#dozo-cart-overlay {
  font-weight: 500; /* HH: как у PD (тема HT даёт body 700) */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#dozo-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ----- Drawer panel ----- */
/* «Стиль»-скин 2026-08-30. Файл — порт из темы Shopify и остаётся структурным
   источником; переписаны только цвета, радиусы, рамки и плотность, имена
   классов не тронуты. Все значения берутся из --dz-* (src/styles/dozo-tokens.css),
   поэтому цвет не может разъехаться между дровером и React-страницами. */
/* ★★ v3 «БЕЛЫЙ ДРОВЕР» 2026-09-04. Решение владельца на развилке «лавандовый в
   той же семье или совсем светлый»: «давай совсем светлый». Файл красится
   через var(--dz-*), поэтому светлая тема — ПЕРЕОБЪЯВЛЕНИЕ токенов в области
   дровера, а не второй набор правил: шапка остаётся фиолетовой (#000000, ниже
   явным цветом), всё остальное — белые карточки на #FFFFFF, текст #000000,
   жёлтый только заливкой кнопки Checkout (жёлтый ТЕКСТ на белом не читается,
   поэтому все места, где --dz-accent был цветом текста или рамки, ниже
   переведены на --dz-fg). Глобальные токены в src/styles/dozo-tokens.css не
   тронуты — остальные страницы по-прежнему тёмные. */
#dozo-cart-drawer-root {
  /* HH: тело драйера — Outfit 500, как на живом PD по замеру (тема HT даёт body 700) */
  font-weight: 500;
  --dz-bg: #FFFFFF; /* тело дровера: белый с фиолетовым оттенком */
  --dz-bar: #ffffff; /* полоса доставки и футер; шапка задана явно ниже */
  --dz-card: #ffffff;
  --dz-tile: rgba(0, 0, 0, 0.06); /* чипы, дорожка прогресса, плашки */
  --dz-fg: #000000;
  --dz-fg-body: rgba(0, 0, 0, 0.85);
  --dz-fg-muted: rgba(0, 0, 0, 0.62);
  --dz-fg-faint: rgba(0, 0, 0, 0.45);
  --dz-line: rgba(0, 0, 0, 0.12);
  --dz-line-strong: rgba(0, 0, 0, 0.18);
  /* Розовый #000000 на белом даёт контраст 1.6 — нечитаемо. Внутри дровера
     роль «магента текстом» играет --dz-rule #000000 из того же брифа. */
  --dz-pink: #000000;
  --dz-cta-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  /* HH: светлый драйер на креме — акцент, успех и градиент фото в своей области */
  --dz-accent: #F2FF00;
  --dz-on-accent: #000000;
  --dz-gold: #000000;
  --dz-success: #22a447;
  --dz-photo-gradient: linear-gradient(180deg, #000000 0%, #000000 100%);
  --dz-r-card: 20px;
  --dz-r-ctl: 12px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%; /* mobile: full screen */
  max-width: 100vw;
  background: var(--dz-bg, #FFFFFF);
  color: var(--dz-fg, #000000);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid var(--dz-line, rgba(255, 255, 255, 0.16));
  font-family: "Gowun Batang", system-ui, sans-serif;
}

/* Тень рисуется ТОЛЬКО у открытого дровера. Закрытый стоит за краем экрана,
   но его тень доставала до страницы и красила 11 пикселей у правого края на
   каждой странице сайта — поймано попиксельным сравнением цикла 1 с циклом 2. */
#dozo-cart-drawer-root.is-open {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
}

@media screen and (min-width: 768px) {
  #dozo-cart-drawer-root {
    width: 440px; /* борд: 440px */
  }
}

/* ----- Header ----- */
.dz-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* 64 → 48. Владелец 2026-08-30 о верхе корзины: «у него высокая, большая
     высота слишком … чтобы все отображалось самым верху и компактно».
     Замер до правки: шапка 64 + полоса 136 = 200 px, то есть 24% экрана. */
  height: 48px;
  padding: 0 4px 0 16px;
  /* v3: единственная фиолетовая полоса светлого дровера — как шапка сайта. */
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}
.dz-cart__title {
  /* PD: Chillax (display) → HH: Montserrat (--font-heading-family) */
  font-family: var(--font-heading-family, "Alfa Slab One"), "Gowun Batang", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0;
}

.dz-cart__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 44px;   /* hit target >= 44px, при высоте шапки 48 всё ещё влезает */
  height: 44px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dz-cart__close:hover { color: #ffffff; }

/* ----- Reward / Goal bar ----- */
/* Было КАРТОЧКОЙ с борда: поля 16, рамка, радиус 20, текст, дорожка и ряд
   подписей — 136 px. Владелец 2026-08-30: «Лучше его на весь, ну, блок
   расположить, чтобы он как бы одной строчкой был». Стало лентой во всю
   ширину: текст слева, дорожка справа, обе в ОДНОЙ строке.
   ★ Ряд подписей («Free Shipping» / «Free Gift») убран: он повторял то, что
   сказано в самом тексте ленты. */
/* v3.1 2026-09-04 — владелец: «сделай понятнее, чтобы там были точки,
   обозначающие цель на графике». Текст сверху, шкала во всю ширину, на ней
   точка на каждую веху, подписи вех под шкалой. Было 40 px, стало ~66. */
.dz-reward-bar {
  display: block;
  margin: 0;
  padding: 6px 16px 7px;
  background: var(--dz-bar, #ffffff);
  border-bottom: 1px solid var(--dz-line, rgba(0, 0, 0, 0.12));
  flex-shrink: 0;
}

.dz-reward-bar__text {
  font-size: 13px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  text-align: left;
  margin-bottom: 0;
  min-height: 0;
  /* Однорядная лента: длинный текст обрезается, а не роняет вёрстку. Тексты
     сокращены в rules.ts, поэтому обрезка — страховка, а не рабочий режим. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.dz-reward-bar__text .dz-tier-emoji {
  margin-right: 6px;
}

/* Шкала: дорожка + точки поверх. Правый край с запасом под последнюю точку,
   чтобы её не резало краем дровера. */
.dz-reward-bar__scale {
  position: relative;
  margin: 5px 8px 0 0;
  height: 14px;
}
.dz-reward-bar__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 6px;
  background: var(--dz-tile, rgba(0, 0, 0, 0.06));
  border: 1px solid var(--dz-line-strong, rgba(0, 0, 0, 0.18));
  border-radius: 999px;
  overflow: hidden;
  box-sizing: border-box;
}
.dz-reward-bar__dot {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--dz-line-strong, rgba(0, 0, 0, 0.18));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.dz-reward-bar__dot.is-achieved {
  background: var(--dz-fg, #000000);
  border-color: var(--dz-fg, #000000);
}

.dz-reward-bar__fill {
  height: 100%;
  /* v3: заливка — брендовый градиент (тот же, что под пак-шотами). */
  background: linear-gradient(90deg, #000000, #000000);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

/* Подписи вех — под точками, центрированы по точке; последняя прижата к
   правому краю, чтобы не вылезать за дровер. */
.dz-reward-bar__markers {
  position: relative;
  height: 14px;
  margin: 3px 8px 0 0;
}
.dz-reward-bar__marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 14px;
  color: var(--dz-fg-muted, rgba(0, 0, 0, 0.62));
  font-weight: 600;
  white-space: nowrap;
}
.dz-reward-bar__marker.is-last {
  transform: translateX(-100%);
  padding-left: 0;
}
.dz-reward-bar__marker.is-unlocked {
  color: var(--dz-fg, #000000);
  font-weight: 700;
}

.dz-reward-bar__marker .dz-reward-check {
  color: var(--dz-success, #22a447);
  font-weight: 800;
}

/* ----- Scrollable body ----- */
.dz-cart__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}

/* ----- Empty state ----- */
.dz-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
}

.dz-cart__empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.dz-cart__empty-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--dz-fg-body, rgba(255, 255, 255, 0.92));
}

/* ----- Line items list ----- */
/* Каждая строка — своя карточка, поэтому список только расставляет промежутки. */
/* v3.1: строки на всю ширину, между ними разделитель — карточек с полями
   больше нет (владелец 2026-09-04: «чтобы всю ширину использовать»). */
.dz-cart__items {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ----- Single line item ----- */
/* v3.1 2026-09-04: строка во всю ширину; картинка — «линейка»: она
   растягивается ровно на высоту содержимого (align-items: stretch +
   absolute-картинка внутри), поэтому высота строки всегда равна высоте
   картинки — как просил владелец. Содержимое: название (переносится, не
   режется) · чип вкуса · цена + степпер ≈ 92 px при однострочном названии. */
/* 2026-09-08, направление A «Плотная таблица» (канвас, выбор владельца):
   картинка ФИКСИРОВАННАЯ 76×84 и не тянется за плашкой — «картинка зажимается
   и удлиняется, и только часть продукции видно … должна быть стандартного
   размера». Отменяет v3.1 «картинка = высота строки» (align-items: stretch).
   object-fit: contain — виден весь пак, подложка под ним — брендовый градиент. */
.dz-cart-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 16px;
  background: var(--dz-card, #ffffff);
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(0, 0, 0, 0.12));
  border-radius: 0;
  align-items: start;
}
.dz-cart-item__image-wrap {
  position: relative;
  width: 76px;
  height: 84px;
  align-self: start;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #000000);
}
.dz-cart-item__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dz-cart-item__details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}
/* Строка названия: название · «× N» · цена · корзинка. Отдельной нижней
   строки с ценой больше нет — это и даёт −36 px на плашке. */
.dz-cart-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
}
.dz-cart-item__head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 18px;
}
/* Корзинка в строке названия: видимых 18 px, площадь нажатия 32 px за счёт
   отрицательных полей — строка не растёт. */
.dz-cart-item__head .dz-cart-item__trash {
  width: 32px;
  height: 32px;
  margin: -7px -10px -7px -6px;
}
.dz-cart-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-fg, #000000);
  line-height: 18px;
  word-break: break-word;
  min-width: 0;
  /* Длинное название переносится на вторую строку, не режется (v3.1). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dz-cart-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.dz-cart-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
/* Вкус — чипом, как на борде. */
.dz-cart-item__variant {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--dz-tile, rgba(0, 0, 0, 0.06));
  color: var(--dz-fg, #000000);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dz-cart-item__selling-plan {
  font-size: 12px;
  color: var(--dz-pink, #000000);
  font-weight: 600;
}

.dz-cart-item__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 0;
  flex-shrink: 0;
}
.dz-cart-item__price {
  font-size: 16px;
  font-weight: 600;
  color: var(--dz-fg, #000000);
  font-family: "Gowun Batang", system-ui, sans-serif;
}

.dz-cart-item__compare {
  font-size: 13px;
  color: var(--dz-fg-faint, rgba(255, 255, 255, 0.55));
  text-decoration: line-through;
  font-weight: 400;
}

.dz-cart-item__free {
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-success, #22a447);
}

.dz-cart-item__save-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-pink, #000000);
  background: var(--dz-tile, #000000);
  border: 1px solid var(--dz-line-strong, rgba(255, 255, 255, 0.22));
  border-radius: var(--dz-r-ctl, 12px);
  padding: 0 8px;
  height: 24px;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.dz-cart-item__save-badge .dz-save-icon { flex-shrink: 0; }

/* qty stepper + trash col */
.dz-cart-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dz-cart-item__trash {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dz-fg-faint, rgba(0, 0, 0, 0.45));
  width: 36px;
  height: 36px;
  /* Стоит справа от степпера в строке цены; отрицательное поле прижимает её
     к краю строки. */
  margin: 0 -8px 0 0;
  padding: 0;
  flex: none; /* иначе flex-строка сжимала кнопку до 22 px на 390 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.dz-cart-item__trash:hover { color: var(--dz-fg, #000000); }

/* v3: степпер 40/28/40 — кнопки 40 px остаются целями касания, плашка
   помещается в две строки. */
.dz-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--dz-line-strong, rgba(0, 0, 0, 0.18));
  background: var(--dz-card, #ffffff);
  border-radius: 10px;
  overflow: hidden;
  height: 40px;
}
.dz-qty-stepper__btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.dz-qty-stepper__btn:hover { background: var(--dz-tile, rgba(0, 0, 0, 0.06)); }
.dz-qty-stepper__btn:disabled {
  color: var(--dz-fg-faint, rgba(255, 255, 255, 0.55));
  cursor: not-allowed;
}

.dz-qty-stepper__count {
  min-width: 28px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  padding: 0 4px;
  user-select: none;
}

/* Loading state for item row */
.dz-cart-item.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ----- Footer (fixed at bottom of drawer) ----- */
/* Замер до правки: низ 391 px — 46% экрана. Владелец 2026-08-30: «Checkout и
   под checkout три разные строчки. И это ужасно. Они невероятно много места
   занимают». */
.dz-cart__footer {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--dz-line, rgba(255, 255, 255, 0.16));
  flex-shrink: 0;
  background: var(--dz-bar, #000000);
}

/* ----- Savings row (shown only when discounted) ----- */
.dz-savings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dz-savings-row__label,
.dz-savings-row__amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-pink, #000000);
}

/* ----- Subtotal row ----- */
.dz-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.dz-subtotal__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--dz-fg, #fff);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-subtotal__amount {
  font-size: 20px;
  font-weight: 600;
  color: var(--dz-fg, #fff);
}

/* Была отдельным абзацем на 23 px под подытогом. Стала припиской В строке
   подытога: смысл сохранён, высота — ноль. */
.dz-subtotal-note {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  white-space: nowrap;
}

/* ----- Consent checkbox ----- */
/* На бордах этого блока нет. Решение владельца 2026-08-30: «Оставить как есть» —
   предвыбранным и блокирующим кнопку чекаута. */
.dz-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.dz-consent__checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--dz-fg, #000000);
}
.dz-consent__label {
  font-size: 12px; /* PD по замеру 12px/700; тема HT перебивала label до 13px */
  font-weight: 700;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  line-height: 1.4;
  cursor: pointer;
}

.dz-consent__label a {
  color: var(--dz-fg, #000000);
  text-decoration: none;
  font-weight: 600;
}

.dz-consent__label a:hover { text-decoration: underline; }

/* ----- Одна строка вместо двух: доставка И доверие ----- */
/* Было два абзаца по 23 px («Ships in 1 business day» и «⭐ 4.8 (342k) |
   Secure Checkout»). Владелец 2026-08-30 назвал их среди «трёх разных
   строчек», которые «невероятно много места занимают». */
.dz-ship-line {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* ★ 11.5 → 10.5. При 11.5 склеенная строка не помещалась в 358 px и
     обрезалась С ОБЕИХ сторон (текст центрован): справа терялось «Secure
     Checkout», слева торчал огрызок «)». Замер снимком, а не на глаз. */
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dz-fg-body, rgba(255, 255, 255, 0.92));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-ship-line svg { flex-shrink: 0; }

/* Правила .dz-continue удалены вместе с кнопкой «Continue shopping»
   2026-08-31 (команда владельца): 49 px за действие, которое делают крестик и
   тап мимо дровера. */

/* ----- Header cart count ----- */
#dozo-cart-title-count { color: rgba(255, 255, 255, 0.75); font-weight: 600; }

/* ----- Checkout button ----- */
/* Плоская жёлтая, радиус 12, высота 56 — вариант A, выбранный владельцем.
   Без 3D-тени и без pill-радиуса. */
.dz-checkout-btn {
  display: block;
  width: 100%;
  background: var(--dz-accent, #F2FF00);
  color: var(--dz-on-accent, #000000);
  border: none;
  border-radius: var(--dz-r-ctl, 12px);
  height: 56px;
  font-size: 18px;
  font-weight: 600;
  font-family: "Gowun Batang", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: var(--dz-cta-shadow, 0 1px 2px rgba(0, 0, 0, 0.18));
  transition: opacity 0.15s;
  text-align: center;
}

.dz-checkout-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.dz-checkout-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dz-checkout-btn.is-processing {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ----- Trust line ----- */
.dz-trust-line {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  font-weight: 500;
}

.dz-trust-line .dz-star {
  color: var(--dz-gold, #F2FF00);
}

/* ----- Loading spinner overlay on drawer (initial fetch) ----- */
.dz-cart__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.dz-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--dz-line-strong, rgba(0, 0, 0, 0.18));
  border-top-color: var(--dz-fg, #000000);
  border-radius: 50%;
  animation: dz-spin 0.7s linear infinite;
}

@keyframes dz-spin {
  to { transform: rotate(360deg); }
}

/* ----- Cart icon bubble update ----- */
#cart-icon-bubble .cart-count-bubble {
  transition: transform 0.2s ease;
}

/* ----- Error toast ----- */
.dz-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #e53;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  white-space: nowrap;
}

.dz-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================================
   M2 NEW STYLES
   ===================================================================== */

/* ----- Подарочная строка ----- */
/* ★★ Было `background: #f8fff8` — почти белая карточка. Стиль портирован из
   темы Shopify под СВЕТЛЫЙ фон и в Medusa не показывался ни разу: подарка не
   существовало до 2026-08-31, пока не появился механизм «3+1». Как только он
   заработал, строка вышла на экран нечитаемой — белый текст темы на белой
   карточке. Найдено снимком, ворота 16 из 16 об этом молчали: они меряют
   деньги и состав, а не читаемость.
   Стало: тёмная плашка в цвет темы с зелёной рамкой — подарок по-прежнему
   выделен, текст остаётся белым и читается. */
.dz-cart-item.is-gift {
  background: rgba(34, 164, 71, 0.08);
  box-shadow: inset 3px 0 0 var(--dz-success, #22a447);
}

/* ----- Kill Monster Upsells overlay (belt-and-suspenders) ----- */
[class*="monster_upsell_overlay"],[class*="monster-upsell-overlay"],#monster-cart-wrapper{display:none!important;visibility:hidden!important;}

/* Чип в строке вкуса, той же высоты, что чип вкуса. */
.dz-cart-item__gift-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  background: var(--dz-success, #22a447);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 0 8px;
  border-radius: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* static qty chip on gift lines (no stepper there) */
.dz-gift-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 34px;
  padding: 0 8px;
  border: 1.5px solid var(--dz-success, #22a447);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #22a447;
  user-select: none;
}

/* ----- Gift teaser block ----- */
/* v3.1: подарок-тизер — та же строка, что и товар: картинка-линейка, текст,
   на всю ширину, разделитель снизу. */
#dozo-gift-block {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(0, 0, 0, 0.12));
  border-radius: 0;
  padding: 0;
  background: var(--dz-card, #ffffff);
}
.dz-gift-teaser__card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 10px 16px;
  align-items: stretch;
}
.dz-gift-teaser__img-wrap {
  position: relative;
  width: 76px;
  min-height: 64px;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #000000);
}
.dz-gift-teaser__img,
.dz-gift-teaser__img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: transparent;
}
.dz-gift-teaser__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.dz-gift-teaser__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-fg, #000000);
  line-height: 1.3;
}
.dz-gift-teaser__header {
  font-size: 12px;
  font-weight: 500;
  color: var(--dz-fg-muted, rgba(0, 0, 0, 0.62));
  margin: 0;
}

.dz-gift-teaser__price {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-gift-teaser__compare {
  font-size: 12px;
  color: var(--dz-fg-faint, rgba(255,255,255,.55));
  text-decoration: line-through;
}

.dz-gift-teaser__free {
  font-size: 13px;
  font-weight: 700;
  color: var(--dz-success, #22a447);
}

/* ----- Upsell (FBT) section ----- */
/* v3.1: апселлы — те же строки на всю ширину, что и товары; заголовок —
   плоская полоска-кикер, не карточка. */
#dozo-upsell-section {
  margin: 0;
  border-top: 0;
  padding: 0;
}
.dz-upsell__heading {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dz-fg-muted, rgba(0, 0, 0, 0.62));
  margin: 0;
  text-align: left;
  background: var(--dz-tile, rgba(0, 0, 0, 0.06));
  border-radius: 0;
  padding: 7px 16px;
}
.dz-upsell__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}
.dz-upsell-card {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: stretch;
  gap: 12px;
  background: var(--dz-card, #ffffff);
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(0, 0, 0, 0.12));
  border-radius: 0;
  padding: 10px 16px;
}
.dz-upsell-card--loading {
  height: 84px;
  background: linear-gradient(90deg, var(--dz-card, #ffffff) 25%, var(--dz-tile, rgba(0, 0, 0, 0.06)) 50%, var(--dz-card, #ffffff) 75%);
  background-size: 200% 100%;
  animation: dz-shimmer 1.2s ease infinite;
  border: none;
}

@keyframes dz-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dz-upsell-card__img-wrap {
  position: relative;
  width: 76px;
  min-height: 64px;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #000000);
}
.dz-upsell-card__img,
.dz-upsell-card__img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: transparent;
}
.dz-upsell-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.dz-upsell-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dz-fg, #000000);
  line-height: 1.3;
  word-break: break-word;
}

.dz-upsell-card__price-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.dz-upsell-card__compare {
  font-size: 11px;
  color: var(--dz-fg-faint, rgba(255,255,255,.55));
  text-decoration: line-through;
}

.dz-upsell-card__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--dz-fg, #000000);
  font-family: "Gowun Batang", system-ui, sans-serif;
}

.dz-upsell-card__details {
  font-size: 11px;
  color: var(--dz-fg-muted, rgba(0, 0, 0, 0.62));
  text-decoration: underline;
  font-weight: 500;
  margin-top: 1px;
  display: inline-block;
}

.dz-upsell-card__add-btn {
  background: var(--dz-card, #ffffff);
  color: var(--dz-fg, #000000);
  border: 1.5px solid var(--dz-fg, #000000);
  border-radius: 10px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  font-family: "Gowun Batang", system-ui, sans-serif;
  flex-shrink: 0;
  align-self: center;
}

.dz-upsell-card__add-btn:hover { background: var(--dz-fg, #000000); color: #ffffff; }
.dz-upsell-card__add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Payment / trust badge cards (footer bottom) ----- */
#dozo-trust-section {
  margin-top: 8px;
}

.dz-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
}

.dz-trust-badge {
  /* Чипов теперь ЧЕТЫРЕ: Lab-tested и Discreet убраны 2026-08-31 по команде
     владельца — они повторяли строку доверия над ними. Высота 44 → 32:
     это не кнопки, нажимать их не надо, требование к площади нажатия к ним
     не относится. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--dz-line-strong, rgba(255,255,255,.22));
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  background: var(--dz-card, #000000);
}

.dz-trust-badge--brand {
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.01em;
  font-size: 13px;
  color: var(--dz-fg, #fff);
}

.dz-trust-badge__label {
  font-size: 9.5px;
  white-space: nowrap;
  color: var(--dz-fg-muted, rgba(255,255,255,.7));
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}


/* ----- Save-my-cart box (email capture for anonymous baskets) ----- */
.dz-save-cart {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--dz-line, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  background: var(--dz-card, #ffffff);
}

.dz-save-cart__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  margin-bottom: 6px;
}

.dz-save-cart__row { display: flex; gap: 6px; }

.dz-save-cart__input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid var(--dz-line-strong, rgba(0, 0, 0, 0.18));
  border-radius: 8px;
  background: #ffffff;
  color: var(--dz-fg, #000000);
}

.dz-save-cart__input[aria-invalid="true"] { border-color: #e53; }

.dz-save-cart__btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: var(--dz-fg, #000000);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.dz-save-cart__btn:disabled { opacity: 0.6; cursor: default; }

.dz-save-cart__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--dz-fg-body, rgba(255,255,255,.92));
  cursor: pointer;
}

.dz-save-cart__opt input { accent-color: var(--dz-fg, #000000); }

.dz-save-cart__error { margin: 6px 0 0; font-size: 12px; color: #e53; }

.dz-save-cart__done {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #22a447;
}

/* ----- Returning-visitor cart reminder ----- */
.dz-reminder {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 14px;
  background: #111;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.dz-reminder__text { flex: 1; min-width: 0; }

.dz-reminder__btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  background: var(--dz-card, #000000);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.dz-reminder__close {
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  color: #aaa;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ----- Order bump в корзине («Add one more — save $N on the second») -----
   Рисуется только когда сервер прислал включённый флаг order_bump. */
.dz-bump {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  background: var(--dz-card, #ffffff);
  border: 0;
  border-bottom: 1px solid var(--dz-line, rgba(0, 0, 0, 0.12));
  border-radius: 0;
}
.dz-bump__thumb {
  position: relative;
  width: 76px;
  min-height: 64px;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile, #000000);
}
.dz-bump__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-bump__body { align-self: center; }
.dz-bump__btn { align-self: center; }

.dz-bump__body { min-width: 0; }

.dz-bump__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
  line-height: 1.3;
}

/* Магента — только текстом, заливок ею на тёмном бриф не разрешает. */
.dz-bump__save { color: var(--dz-pink, #000000); }

.dz-bump__note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  line-height: 1.35;
}

.dz-bump__btn {
  min-width: 72px;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  /* v3: на белом вторичная кнопка — фиолетовый контур, жёлтый контур не виден. */
  border: 1.5px solid var(--dz-fg, #000000);
  border-radius: 10px;
  color: var(--dz-fg, #000000);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dz-bump__btn:hover:not(:disabled) {
  background: var(--dz-fg, #000000);
  color: #ffffff;
}

.dz-bump__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Order bump, цикл 3: карточка предлагает КОНКРЕТНЫЙ товар по цене,
   которую посчитал сервер (метаполе bump_price_cents на варианте), и умеет
   показать, что позиция уже добавлена, с возможностью снять её. ----- */

.dz-bump__price {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.35;
}

.dz-bump__now {
  font-size: 15px;
  font-weight: 700;
  color: var(--dz-fg, #fff);
}

.dz-bump__was {
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
  text-decoration: line-through;
}

/* Состояние «уже в корзине»: кнопка перестаёт звать и начинает отпускать. */
.dz-bump.is-added {
  border-color: var(--dz-line-strong, rgba(255, 255, 255, 0.28));
}

.dz-bump__btn--remove {
  border-color: var(--dz-line-strong, rgba(255, 255, 255, 0.28));
  color: var(--dz-fg-muted, rgba(255, 255, 255, 0.7));
}

.dz-bump__btn--remove:hover:not(:disabled) {
  background: transparent;
  border-color: var(--dz-fg, #fff);
  color: var(--dz-fg, #fff);
}

@media (max-width: 480px) {
  /* HT 2026-09-10: у PD колонка 44px при картинке 76px — картинка наезжала на
     текст (замер 390: заголовок x=73 при картинке 17..93). Здесь колонка и
     картинка одной ширины. */
  .dz-bump { grid-template-columns: 56px 1fr; row-gap: 10px; }
  .dz-bump__thumb { width: 56px; min-height: 56px; }
  .dz-bump__btn { grid-column: 1 / -1; width: 100%; }
}

/* ═══ Одна плашка на товар (владелец 2026-09-07) ═══════════════════════════
   «должен быть один товар, количество должно быть три. И там должно указано
   быть три разных вкуса … всё как бы в одном товаре, одна строчка занята».
   Строки Medusa (по варианту) свёрнуты в плашку товара: заголовок с «× N»,
   строка на каждый вкус со своим мини-степпером, внизу сумма и корзинка. */
.dz-cart-item__head {
  align-items: center;
}
.dz-cart-item__qty-total {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--dz-tile, rgba(0, 0, 0, 0.06));
  color: var(--dz-fg, #000000);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
/* «× N» подарка — зелёный, как его цена и бейдж. */
.dz-cart-item__qty-total--gift {
  background: rgba(34, 164, 71, 0.12);
  border: 1.5px solid var(--dz-success, #22a447);
  color: var(--dz-success, #22a447);
  height: 22px;
  box-sizing: border-box;
}
.dz-cart-item__flavors {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dz-cart-item__flavor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  height: 28px;
}
.dz-cart-item__flavor.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.dz-cart-item__flavor .dz-cart-item__variant {
  flex: 1 1 auto;
  min-width: 0;
}
/* Пустой чип у одновариантного товара — держит степпер справа, сам не виден.
   ★ Тема прячет пустые div (div:empty), поэтому это span с display:flex. */
.dz-cart-item__variant--blank {
  display: flex;
  background: transparent;
  padding: 0;
}
.dz-qty-stepper--mini {
  height: 28px;
  border-radius: 8px;
}
.dz-qty-stepper--mini .dz-qty-stepper__btn {
  width: 30px;
  height: 28px;
  font-size: 16px;
}
.dz-qty-stepper--mini .dz-qty-stepper__count {
  min-width: 22px;
  font-size: 14px;
}
.dz-cart-item__each {
  font-size: 12px;
  font-weight: 500;
  color: var(--dz-fg-muted, rgba(0, 0, 0, 0.62));
  white-space: nowrap;
}

/* ═══ Подарочная плашка акции (1+1 / 2+1 / 3+1) ═══════════════════════════
   Владелец 2026-09-07: «бесплатные … обязательно должна быть какая-то
   анимация, сама строчка должна выглядеть, что это бесплатное, другие цвета …
   цена должна быть ноль … понятно, что типа подарок добавлен. Это важно».
   Плашка — зелёная подложка с брендовым отливом, зелёная полоса слева, ярлык
   на картинке, бейдж «FREE · BUY 1 GET 1» с бликом, «$0.00» и зачёркнутая
   стоимость подарка, «You save $X». При появлении — въезд и двойная зелёная
   пульсация. Текст остаётся тёмным: контраст ≥ 4.5:1 держат ворота
   cart-drawer-measure. */
.dz-cart-item.is-free-unit {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(34, 164, 71, 0.16),
    rgba(34, 164, 71, 0.06) 62%,
    rgba(0, 0, 0, 0.06)
  );
  box-shadow: inset 3px 0 0 var(--dz-success, #22a447);
}
.dz-cart-item.is-free-unit .dz-cart-item__image-wrap {
  outline: 2px solid var(--dz-success, #22a447);
  outline-offset: -2px;
}
.dz-cart-item__gift-ribbon {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--dz-success, #22a447);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dz-cart-item__gift-badge {
  position: relative;
  overflow: hidden;
  gap: 5px;
}
.dz-cart-item__gift-badge svg {
  flex-shrink: 0;
}
/* Медленный блик по бейджу — «это подарок» видно и после въезда. */
.dz-cart-item__gift-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: dz-badge-shine 3.2s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.dz-cart-item.is-free-unit .dz-cart-item__free {
  font-size: 16px;
  font-family: "Gowun Batang", system-ui, sans-serif;
}
.dz-cart-item__gift-saved {
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-success, #22a447);
  white-space: nowrap;
  margin-left: auto;
}
.dz-cart-item.is-free-unit .dz-gift-qty {
  height: 24px;
  min-width: 0;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(34, 164, 71, 0.12);
}
.dz-cart-item.is-just-added {
  animation:
    dz-gift-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    dz-gift-glow 1.1s ease-in-out 0.45s 2;
}
@keyframes dz-gift-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dz-gift-glow {
  0%,
  100% {
    box-shadow:
      inset 3px 0 0 var(--dz-success, #22a447),
      0 0 0 0 rgba(34, 164, 71, 0);
  }
  50% {
    box-shadow:
      inset 3px 0 0 var(--dz-success, #22a447),
      0 0 0 5px rgba(34, 164, 71, 0.24);
  }
}
@keyframes dz-badge-shine {
  0% {
    transform: translateX(-120%);
  }
  35%,
  100% {
    transform: translateX(120%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dz-cart-item.is-just-added {
    animation: none;
  }
  .dz-cart-item__gift-badge::after {
    animation: none;
    display: none;
  }
}

/* ── FBT «Frequently Bought Together» (2026-09-08) ─────────────────────────
   Карточка предложения: зачёркнутая обычная цена, цена −N%, чип «Save N%».
   Плашка FBT-строки в корзине: бейдж «Bought together · Save $X (N%)»,
   «+» у такой строки выключен — скидка ровно на одну штуку. */
#dozo-cart-drawer-root .dz-upsell-card__save {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(34, 164, 71, 0.14);
  color: #15803d;
  white-space: nowrap;
}
#dozo-cart-drawer-root .dz-cart-item[data-fbt="1"] .dz-cart-item__save-badge {
  background: rgba(34, 164, 71, 0.14);
  color: #15803d;
}
#dozo-cart-drawer-root .dz-qty-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* #21 (ported from PUREDOZO 511694e): the line being added, painted at the
   click (pending row, settled by the add action). Same anatomy as a cart row;
   a soft pulse says "on its way"; no price until the server answers. */
#dozo-cart-drawer-root .dz-cart__items--pending {
  margin-bottom: 0;
}
#dozo-cart-drawer-root .dz-cart-item.is-pending {
  animation: dz-pending-pulse 1.1s ease-in-out infinite;
}
#dozo-cart-drawer-root .dz-cart-item__pending-note {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dz-fg, #000000);
  opacity: 0.75;
}
@keyframes dz-pending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  #dozo-cart-drawer-root .dz-cart-item.is-pending { animation: none; }
}

/* --- /hh/checkout.css --- */
/* ============================================================================
   HT — ОДНОСТРАНИЧНАЯ КАССА (порт PD public/dozo/checkout.css 1-в-1 по структуре,
   2026-09-10). Классы dz-ck-*, геометрия и порядок правил — PD; палитра — HT,
   решение владельца: КРЕМОВАЯ страница #FFFFFF с ФИОЛЕТОВЫМИ карточками
   (#000000, текст белый, акцент жёлтый #F2FF00) и фиолетовым CTA — как страница
   коллекции. Механика перекраски: PD-правила читают токены --dz-*; здесь
   (1) область .dz-ck объявляет СВЕТЛЫЕ токены (текст тёмный, акцент = фиолетовый —
   жёлтый текст/рамка на креме нечитаемы), (2) фиолетовые карточки (сводка,
   правая колонка, бамп, мобильная полоса/панель, шапка) переобъявляют токены
   на «фиолетовую панель» (текст белый, акцент жёлтый). Chillax → Montserrat.
   Лежит в public/hh (public/theme — зеркало Shopify-темы с rsync --delete).
   ============================================================================ */
/* КАССА ПО КАНВАСУ «СТИЛЬ» (2026-09-08).
 * Борды: design-audit-2026-08-22/canvas/CheckoutStyleOnepageDesktop.dc.html
 * (1440×1700) и CheckoutStyleOnepageMobile.dc.html (390×2400). Числа ниже
 * сняты с бордов; мобильные значения — базовые, десктопные — от 1024.
 *
 * ★ Только классы dz-ck-*. Тема Shopify объявляет `.grid` и `.hidden` с
 * !important и перебивает утилиты Tailwind (замер 2026-08-30: сводки заказа
 * на кассе не было вовсе). Своих имён тема не знает и знать не может.
 *
 * Шрифты: типографика зеркала (typography.css) красит всё Outfit'ом, а
 * h2 и класс .dz-display — Chillax. Здесь шрифт нигде не назначается
 * напрямую: заголовки — <h2>, кнопка и итог носят .dz-display.
 *
 * Файл едет в sections-bundle.css (scripts/sections-css-list.txt) и в
 * отпечаток ?v= (scripts/stamp-dozo-css-version.mjs, NAMES).
 */

/* ── Показ по ширине. Только прячем; сам display элемент задаёт себе. ──── */
@media (max-width: 1023px) {
  .dz-ck .dz-ck-desk { display: none; }
}
@media (min-width: 1024px) {
  .dz-ck .dz-ck-mob { display: none; }
}

/* ── Корень ─────────────────────────────────────────────────────────────── */
.dz-ck {
  /* ── HH: светлая страница ─────────────────────────────────────────────── */
  font-weight: 500; /* как PD по замеру; тема HT даёт body 700 */
  --dz-bg: #FFFFFF;
  --dz-bar: #000000;
  --dz-card: #ffffff;
  --dz-tile: #ffffff;
  --dz-accent: #000000;
  --dz-accent-hover: #000000;
  --dz-on-accent: #ffffff;
  --dz-pink: #000000;
  --dz-rule: #000000;
  --dz-gold: #000000;
  --dz-success: #1f8f3a;
  --dz-error: #C62828;
  --dz-fg: #000000;
  --dz-fg-body: rgba(0, 0, 0, 0.85);
  --dz-fg-muted: rgba(0, 0, 0, 0.62);
  --dz-fg-faint: rgba(0, 0, 0, 0.45);
  --dz-line: rgba(0, 0, 0, 0.16);
  --dz-line-strong: rgba(0, 0, 0, 0.28);
  --dz-selected-bg: rgba(0, 0, 0, 0.06);
  --dz-cta-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  --dz-photo-gradient: linear-gradient(180deg, #000000 0%, #000000 100%);
  --dz-ck-pad: clamp(24px, calc((100vw - 1200px) / 2), 120px);
  background: var(--dz-bg);
  color: var(--dz-fg);
  min-height: 100vh;
}
.dz-ck *,
.dz-ck *::before,
.dz-ck *::after {
  box-sizing: border-box;
}
.dz-ck a { color: var(--dz-accent); }
.dz-ck-contents { display: contents; }
.dz-ck-muted { font-size: 13px; color: var(--dz-fg-muted); }


/* ── HH: фиолетовые панели внутри кремовой страницы ─────────────────────────
   Шапка, сводка заказа, карточки правой колонки, бамп, мобильная полоса и
   панель сводки, мини-итоги: текст белый, акцент жёлтый, плитки #000000. */
.dz-ck-head,
.dz-ck-sum,
.dz-ck-card,
.dz-ck-bump,
.dz-ck-mbar,
.dz-ck-mpanel,
.dz-ck-mini {
  --dz-card: #000000;
  --dz-tile: #000000;
  --dz-accent: #F2FF00;
  --dz-accent-hover: #F2FF00;
  --dz-on-accent: #000000;
  --dz-pink: #F2FF00;
  --dz-gold: #F2FF00;
  --dz-success: #6FE39B;
  --dz-error: #ff8a8a;
  --dz-fg: #ffffff;
  --dz-fg-body: rgba(255, 255, 255, 0.92);
  --dz-fg-muted: rgba(255, 255, 255, 0.72);
  --dz-fg-faint: rgba(255, 255, 255, 0.55);
  --dz-line: rgba(255, 255, 255, 0.16);
  --dz-line-strong: rgba(255, 255, 255, 0.26);
  --dz-selected-bg: rgba(242, 255, 0, 0.1);
  color: var(--dz-fg);
}

/* ── Шапка: логотип + «Secure checkout» ─────────────────────────────────── */
.dz-ck-head {
  background: var(--dz-bar);
  border-bottom: 1px solid var(--dz-line);
}
.dz-ck-head__in {
  max-width: 1440px;
  margin: 0 auto;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* HH: широкий wordmark «HIPPY TRIPPY» (~7.6:1) — ограничиваем ширину, иначе на
   390 «Secure checkout» переносится; высота считается от ширины. */
.dz-ck-logo { display: block; height: auto; width: 180px; max-width: 48vw; }
.dz-ck-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dz-fg);
}
.dz-ck-secure svg { width: 18px; height: 18px; }

/* ── Мобильная полоса «Show order summary · $N» ─────────────────────────── */
.dz-ck-mbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--dz-card);
  border: 0;
  border-bottom: 1px solid var(--dz-line);
  color: var(--dz-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dz-ck-mbar__l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dz-accent);
  font-size: 14px;
  font-weight: 600;
}
.dz-ck-mbar__l svg { flex: none; }
.dz-ck-mbar__l svg:first-child { width: 20px; height: 20px; }
.dz-ck-mbar__l svg:last-child { width: 18px; height: 18px; }
.dz-ck-mbar__t { font-size: 16px; font-weight: 700; }
.dz-ck-mpanel {
  background: var(--dz-card);
  border-bottom: 1px solid var(--dz-line);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Контейнер и колонки ────────────────────────────────────────────────── */
.dz-ck-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 16px 0;
}
.dz-ck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.dz-ck-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.dz-ck-side { min-width: 0; }

/* ── Секция формы ───────────────────────────────────────────────────────── */
.dz-ck-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.dz-ck-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
}
/* HH: PD получал Chillax для h2/.dz-display из глобальных стилей PD; у HT глобальный
   h2 — Outfit, поэтому display-шрифт (Montserrat) назначаем здесь явно. */
.dz-ck h2,
.dz-ck .dz-display {
  font-family: var(--font-heading-family, "Alfa Slab One"), "Gowun Batang", sans-serif;
}
.dz-ck-h2 {
  margin: 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: normal;
  color: var(--dz-fg);
}
.dz-ck-aside {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--dz-fg-muted);
  white-space: nowrap;
}
.dz-ck-aside svg { width: 16px; height: 16px; flex: none; }
.dz-ck-link {
  color: var(--dz-accent);
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.dz-ck-stack { display: flex; flex-direction: column; gap: 8px; }

/* ── Поле с плавающей меткой ────────────────────────────────────────────── */
.dz-ck-field { position: relative; min-width: 0; }
.dz-ck-field__box {
  position: relative;
  height: 48px;
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: var(--dz-r-ctl);
  transition: border-color 0.15s;
}
.dz-ck-field:focus-within .dz-ck-field__box { border-color: var(--dz-accent); }
.dz-ck-field.is-invalid .dz-ck-field__box { border-color: var(--dz-error, #C62828); }
.dz-ck-field__ctl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 18px 14px 4px;
  background: transparent;
  border: 0;
  border-radius: inherit;
  outline: none;
  box-shadow: none;
  font-size: 16px; /* меньше 16 — iPhone зумит страницу при фокусе */
  line-height: 1.3;
  color: var(--dz-fg);
  -webkit-appearance: none;
  appearance: none;
}
.dz-ck-field__ctl::placeholder { color: transparent; }
.dz-ck-field__ctl:-webkit-autofill,
.dz-ck-field__ctl:-webkit-autofill:hover,
.dz-ck-field__ctl:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dz-tile) inset;
  -webkit-text-fill-color: var(--dz-fg);
  caret-color: var(--dz-fg);
  transition: background-color 9999s ease-out;
}
/* ★ (0,4,1) и здесь: в Firefox тот же стартерный файл компилируется в
   `input:not(…):not(:-moz-placeholder) ~ label` — устаревший псевдокласс не
   совпадает никогда, поэтому 10px там красили и ПУСТУЮ метку
   (замер Camoufox 2026-09-08 на medusa-pd). */
.dz-ck .dz-ck-field .dz-ck-field__box > .dz-ck-field__ctl ~ .dz-ck-field__lab,
.dz-ck-field__lab {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--dz-fg-faint);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: top 0.12s, font-size 0.12s, transform 0.12s;
}
/* ★ Специфичность (0,4,1) не случайна: globals.css витрины (стартер Medusa)
   держит своё правило плавающей метки
   `input:not([type=radio]):not([type=checkbox]):not(:placeholder-shown) ~ label`
   с весом (0,3,2) и кеглем 10px — оно перебивало наши 11px/16px
   (замер 2026-09-08 на :8001). */
.dz-ck .dz-ck-field__box .dz-ck-field__ctl:focus ~ .dz-ck-field__lab,
.dz-ck .dz-ck-field__box .dz-ck-field__ctl:not(:placeholder-shown) ~ .dz-ck-field__lab,
.dz-ck .dz-ck-field.is-filled .dz-ck-field__box .dz-ck-field__lab {
  top: 8px;
  transform: none;
  font-size: 11px;
  line-height: 1;
  color: var(--dz-fg-muted);
}
.dz-ck-field--select .dz-ck-field__ctl { padding-right: 40px; cursor: pointer; }
.dz-ck-field--select .dz-ck-field__ctl option { color: #000000; background: #fff; }
.dz-ck-field__chev {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--dz-fg-muted);
}
.dz-ck-field__adorn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: var(--dz-fg-muted);
}
.dz-ck-field__adorn svg { width: 18px; height: 18px; }
.dz-ck-field--adorn .dz-ck-field__ctl { padding-right: 120px; }
.dz-ck-field--adorn .dz-ck-field__lab { right: 120px; }
.dz-ck-field--adorn-sm .dz-ck-field__ctl { padding-right: 44px; }
.dz-ck-field--adorn-sm .dz-ck-field__lab { right: 44px; }
.dz-ck-err {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--dz-error, #C62828);
}
.dz-ck-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font-size: 13px;
  color: var(--dz-fg-muted);
}
.dz-ck-hint svg { flex: none; width: 14px; height: 14px; }

/* Ряды полей. */
.dz-ck-row2,
.dz-ck-row3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dz-ck-row3 > :first-child { grid-column: 1 / -1; } /* город во всю ширину */

/* ── Строка выбора (доставка, другой способ оплаты) ─────────────────────── */
.dz-ck-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 14px;
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: var(--dz-r-ctl);
  color: var(--dz-fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.dz-ck-choice:hover { border-color: var(--dz-accent); }
.dz-ck-choice.is-selected {
  border: 2px solid var(--dz-accent);
  background: var(--dz-selected-bg);
  padding: 7.5px 13.5px;
}
.dz-ck-radio {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dz-ck-radio i {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dz-accent);
}
.dz-ck-radio.is-on { border-color: var(--dz-accent); }
.dz-ck-radio.is-on i { display: block; }
.dz-ck-choice__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}
.dz-ck-choice__t { font-size: 15px; font-weight: 700; line-height: 1.2; }
.dz-ck-choice__s { font-size: 13px; color: var(--dz-fg-muted); line-height: 1.3; }
.dz-ck-choice__p {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.dz-ck-choice__p s { color: var(--dz-fg-muted); font-weight: 500; }

/* ── Оплата: карточка с жёлтой рамкой ───────────────────────────────────── */
.dz-ck-pay {
  border: 1.5px solid var(--dz-line-strong);
  background: var(--dz-card);
  border-radius: var(--dz-r-card);
  overflow: hidden;
}
.dz-ck-pay.is-selected { border-color: var(--dz-accent); }
.dz-ck-pay__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  background: var(--dz-tile);
  border: 0;
  color: var(--dz-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dz-ck-pay__t { font-size: 15px; font-weight: 600; }
.dz-ck-pay__chips { margin-left: auto; display: none; }
.dz-ck-pay__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--dz-line);
  background: var(--dz-card);
}
/* Единственный способ оплаты на мобильном — без обёртки, как на борде. */
@media (max-width: 1023px) {
  .dz-ck-pay.is-solo { border: 0; border-radius: 0; background: transparent; }
  .dz-ck-pay.is-solo .dz-ck-pay__head { display: none; }
  .dz-ck-pay.is-solo .dz-ck-pay__body { padding: 0; border-top: 0; background: transparent; }
}
.dz-ck-chips { display: inline-flex; gap: 4px; }
.dz-ck-chip {
  display: inline-block;
  border: 1px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--dz-fg);
  white-space: nowrap;
}
.dz-ck-note-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--dz-fg-muted);
}
.dz-ck-note-sm svg { flex: none; width: 16px; height: 16px; }

/* Чекбокс: настоящий <input> лежит поверх квадрата и ловит клик. */
.dz-ck-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dz-fg-body);
  cursor: pointer;
}
.dz-ck-check__box {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--dz-line-strong);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dz-on-accent);
  transition: background-color 0.12s, border-color 0.12s;
}
.dz-ck-check__box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
.dz-ck-check__box svg { display: none; width: 12px; height: 12px; }
.dz-ck-check__box input:checked + svg { display: block; }
.dz-ck-check__box:has(input:checked) {
  background: var(--dz-accent);
  border-color: var(--dz-accent);
}
.dz-ck-check__box:has(input:focus-visible) {
  outline: 2px solid var(--dz-accent);
  outline-offset: 2px;
}
.dz-ck-check__lab .dz-ck-muted { margin-left: 2px; }
.dz-ck-billing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--dz-line-strong);
  background: var(--dz-card);
  border-radius: var(--dz-r-ctl);
}
.dz-ck-billing__t { font-size: 14px; font-weight: 600; }

/* ── Order bump ─────────────────────────────────────────────────────────── */
.dz-ck-bump {
  display: grid;
  grid-template-columns: 24px 56px minmax(0, 1fr);
  grid-template-areas:
    "chk img t"
    "p p p"
    "tag tag tag";
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  padding: 16px;
  border: 1.5px solid var(--dz-accent);
  background: var(--dz-card);
  border-radius: 16px;
  cursor: pointer;
}
.dz-ck-bump.is-busy { opacity: 0.7; pointer-events: none; }
.dz-ck-bump__chk { grid-area: chk; width: 24px; height: 24px; border-radius: 6px; }
.dz-ck-bump__chk svg { width: 14px; height: 14px; }
.dz-ck-bump__img {
  grid-area: img;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile);
}
.dz-ck-bump__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dz-ck-bump__t { grid-area: t; font-size: 15px; font-weight: 700; line-height: 1.3; }
.dz-ck-bump__p { grid-area: p; font-size: 14px; line-height: 1.4; color: var(--dz-fg-body); }
.dz-ck-bump__p b { color: var(--dz-accent); font-weight: 700; }
.dz-ck-bump__p s { color: var(--dz-fg-faint); }
.dz-ck-bump__tag {
  grid-area: tag;
  justify-self: end;
  background: var(--dz-tile);
  border: 1px solid var(--dz-line-strong);
  color: var(--dz-pink);
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* ── Кнопка, ошибки, строки доверия ─────────────────────────────────────── */
.dz-ck-after { display: flex; flex-direction: column; gap: 14px; }
.dz-ck-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--dz-r-ctl);
  background: var(--dz-accent);
  color: var(--dz-on-accent);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--dz-cta-shadow);
  cursor: pointer;
  transition: opacity 0.15s;
}
.dz-ck-submit:hover { opacity: 0.92; }
.dz-ck-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.dz-ck-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--dz-on-accent);
  border-top-color: transparent;
  animation: dz-ck-spin 0.8s linear infinite;
}
@keyframes dz-ck-spin { to { transform: rotate(360deg); } }
.dz-ck-alert {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--dz-error, #C62828);
  border-radius: var(--dz-r-ctl);
  color: var(--dz-error, #C62828);
  font-size: 14px;
}
.dz-ck-alert--warn { border-color: var(--dz-accent); color: var(--dz-accent); }
.dz-ck-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--dz-fg-muted);
}
.dz-ck-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}
.dz-ck-trust svg { flex: none; width: 15px; height: 15px; }
.dz-ck-trust .is-strong { color: var(--dz-fg-body); font-weight: 500; }

/* ── Сводка заказа ──────────────────────────────────────────────────────── */
.dz-ck-sum {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--dz-card);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-card);
}
.dz-ck-sum__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 22px;
}
.dz-ck-sum__title { font-size: 16px; font-weight: 700; }
.dz-ck-items { display: flex; flex-direction: column; gap: 12px; }
.dz-ck-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dz-ck-item__thumb { position: relative; display: block; width: 64px; height: 64px; flex: none; }
.dz-ck-item__img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid var(--dz-line);
  overflow: hidden;
  background: var(--dz-photo-gradient), var(--dz-tile);
}
.dz-ck-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dz-ck-item__qty {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--dz-accent);
  color: var(--dz-on-accent);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dz-ck-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dz-ck-item__t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dz-ck-item__s { font-size: 13px; color: var(--dz-fg-muted); }
.dz-ck-item__p { flex: none; font-size: 15px; font-weight: 700; }

.dz-ck-ship {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--dz-tile);
  border: 1px solid var(--dz-line-strong);
  border-radius: var(--dz-r-ctl);
}
.dz-ck-ship__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 20px;
}
.dz-ck-ship__msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dz-pink);
}
.dz-ck-ship__msg svg { flex: none; width: 18px; height: 18px; }
.dz-ck-ship__of { font-size: 12px; color: var(--dz-fg-muted); white-space: nowrap; }
.dz-ck-ship__bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--dz-line-strong);
  overflow: hidden;
}
/* <span>, не <div>: тема прячет пустые div (div:empty{display:none}). */
.dz-ck-ship__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--dz-accent);
  transition: width 0.3s;
}

.dz-ck-code {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--dz-line);
  border-bottom: 1px solid var(--dz-line);
}
.dz-ck-code__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dz-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.dz-ck-code__row u { text-decoration: underline; }
.dz-ck-code__row svg { flex: none; width: 20px; height: 20px; }
.dz-ck-code__form { display: flex; gap: 8px; }
.dz-ck-code__form .dz-ck-field { flex: 1; min-width: 0; }
.dz-ck-code__apply {
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  border: 1.5px solid var(--dz-accent);
  background: transparent;
  color: var(--dz-accent);
  border-radius: var(--dz-r-ctl);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.dz-ck-code__apply:disabled { opacity: 0.5; cursor: not-allowed; }
.dz-ck-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dz-ck-tag {
  border: 1px solid var(--dz-line-strong);
  background: var(--dz-tile);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dz-pink);
}
.dz-ck-tags button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--dz-fg-muted);
  text-decoration: underline;
  cursor: pointer;
}

.dz-ck-tot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--dz-fg-body);
}
.dz-ck-tot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
}
.dz-ck-tot__row > span:last-child { font-weight: 600; color: var(--dz-fg); }
.dz-ck-tot__row.is-accent > span:last-child { color: var(--dz-pink); }
.dz-ck-tot__grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--dz-line);
}
.dz-ck-tot__grand > span:first-child { font-size: 16px; font-weight: 700; color: var(--dz-fg); }
.dz-ck-tot__amt { display: inline-flex; align-items: baseline; gap: 8px; }
.dz-ck-tot__cur { font-size: 13px; color: var(--dz-fg-muted); }
.dz-ck-tot__val { font-size: 22px; font-weight: 600; color: var(--dz-accent); }

/* Мини-итоги на мобильном — перед бампом и кнопкой. */
.dz-ck-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--dz-card);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-card);
}
.dz-ck-mini .dz-ck-code { border-top: 0; padding-top: 0; }

/* Чипы «в каждом заказе» — мобильная панель сводки. */
.dz-ck-mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-ck-mchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  background: var(--dz-tile);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-ctl);
  color: var(--dz-fg-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.dz-ck-mchip svg { flex: none; width: 16px; height: 16px; }

/* ── Правая колонка: подпись и карточки ─────────────────────────────────── */
.dz-ck-note {
  margin: 16px 0 0;
  padding: 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dz-fg-muted);
  text-align: center;
}
.dz-ck-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding: 24px;
  background: var(--dz-card);
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r-card);
}
.dz-ck-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dz-fg-muted);
}
.dz-ck-inc { display: flex; align-items: flex-start; gap: 12px; }
.dz-ck-inc svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--dz-accent); }
.dz-ck-inc__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dz-ck-inc__t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.dz-ck-inc__n { font-size: 13px; line-height: 1.4; color: var(--dz-fg-muted); }
.dz-ck-card__t { font-size: 16px; font-weight: 700; }
.dz-ck-card__p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dz-fg-muted); }
.dz-ck-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border: 1.5px solid var(--dz-accent);
  border-radius: var(--dz-r-ctl);
  color: var(--dz-accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.dz-ck-ghost:hover { background: var(--dz-accent); color: var(--dz-on-accent); }
.dz-ck-ghost svg { width: 18px; height: 18px; }

/* Экспресс-оплата — блок появляется только со включённым флагом. */
.dz-ck-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--dz-fg-muted);
}
.dz-ck-or::before,
.dz-ck-or::after { content: ""; flex: 1; height: 1px; background: var(--dz-line); }

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.dz-ck-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 16px 0 20px;
  font-size: 12px;
  color: var(--dz-fg-muted);
}
.dz-ck-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.dz-ck-foot a { color: inherit; text-decoration: none; }
.dz-ck-foot a:hover { color: var(--dz-fg); }

/* ══ Десктоп (от 1024) — числа борда 1440 ═══════════════════════════════ */
@media (min-width: 1024px) {
  .dz-ck-head__in { height: 64px; padding: 0 var(--dz-ck-pad); }
  .dz-ck-logo { width: 240px; max-width: none; }
  .dz-ck-secure { gap: 8px; font-size: 14px; }
  .dz-ck-secure svg { width: 20px; height: 20px; }

  .dz-ck-wrap { padding: 32px var(--dz-ck-pad) 0; }
  .dz-ck-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
  .dz-ck-form { gap: 28px; }
  .dz-ck-side { position: sticky; top: 24px; }

  .dz-ck-sec { gap: 12px; }
  .dz-ck-sec__head { min-height: 26px; }
  .dz-ck-h2 { font-size: 20px; }
  .dz-ck-aside { font-size: 14px; }

  .dz-ck-field__box { height: 52px; }
  .dz-ck-field__ctl { padding: 20px 16px 4px; }
  .dz-ck-field__lab { left: 16px; right: 16px; }
  .dz-ck .dz-ck-field__box .dz-ck-field__ctl:focus ~ .dz-ck-field__lab,
  .dz-ck .dz-ck-field__box .dz-ck-field__ctl:not(:placeholder-shown) ~ .dz-ck-field__lab,
  .dz-ck .dz-ck-field.is-filled .dz-ck-field__box .dz-ck-field__lab { top: 9px; }
  .dz-ck-field__adorn { right: 16px; }
  .dz-ck-hint svg { width: 15px; height: 15px; }
  .dz-ck-row2, .dz-ck-row3 { gap: 12px; }
  .dz-ck-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dz-ck-row3 > :first-child { grid-column: auto; }

  .dz-ck-choice { min-height: 60px; padding: 8px 18px; gap: 14px; }
  .dz-ck-choice.is-selected { padding: 7.5px 17.5px; }
  .dz-ck-choice__t, .dz-ck-choice__p { font-size: 16px; }

  .dz-ck-pay__head { min-height: 64px; padding: 0 20px; gap: 14px; }
  .dz-ck-pay__t { font-size: 16px; }
  .dz-ck-pay__chips { display: inline-flex; gap: 6px; }
  .dz-ck-pay__body { padding: 22px; gap: 14px; }
  .dz-ck-chips { gap: 6px; }
  .dz-ck-chip { padding: 2px 7px; font-size: 11px; background: var(--dz-card); }
  .dz-ck-check { gap: 10px; font-size: 14px; }
  .dz-ck-check__box { width: 20px; height: 20px; }
  .dz-ck-check__box svg { width: 14px; height: 14px; }
  .dz-ck-billing { padding: 16px; gap: 12px; }

  .dz-ck-bump {
    grid-template-columns: 24px 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "chk img t tag"
      "chk img p tag";
    column-gap: 16px;
    row-gap: 5px;
    padding: 18px 20px;
  }
  .dz-ck-bump__t { font-size: 16px; }
  .dz-ck-bump__tag { align-self: center; font-size: 13px; padding: 6px 12px; }

  .dz-ck-after { gap: 16px; }
  .dz-ck-trust svg { width: 16px; height: 16px; }

  .dz-ck-item { gap: 14px; }
  .dz-ck-item__t { font-size: 15px; }
  .dz-ck-ship { padding: 14px 16px; }
  .dz-ck-ship__of { font-size: 13px; }
  .dz-ck-tot__val { font-size: 24px; }

  .dz-ck-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
    padding: 16px 0 32px;
    border-top: 1px solid var(--dz-line);
    font-size: 13px;
  }
  .dz-ck-foot__links { justify-content: flex-start; gap: 24px; }
}
@media (min-width: 1200px) {
  .dz-ck-grid { grid-template-columns: minmax(0, 1fr) 456px; gap: 48px; }
}

/* ══ Чекаутный бамп v2: кикер, мета-строка с отсчётом (2026-09-08) ═══════
 * Владелец: «товар недорогой с хорошей скидкой который просто глупо не
 * добавить», окно 90 с. Сетка: мобильный — четыре ряда, десктоп — три ряда
 * в третьей колонке, чекбокс/картинка/чип тянутся на всю высоту. */
.dz-ck-bump {
  grid-template-areas:
    "chk img t"
    "p p p"
    "m m m"
    "tag tag tag";
}
.dz-ck-bump__head {
  grid-area: t;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dz-ck-bump__k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dz-pink);
}
.dz-ck-bump__m {
  grid-area: m;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dz-fg-muted);
}
.dz-ck-bump__m b {
  color: var(--dz-accent);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* HH: добавленный бамп — тёмнее фиолетового, текст остаётся белым (PD-подсветка
   rgba(жёлтый,.06) на фиолетовой карточке делала белый текст нечитаемым). */
.dz-ck-bump.is-added { background: var(--dz-tile); }
@media (min-width: 1024px) {
  .dz-ck-bump {
    grid-template-areas:
      "chk img t tag"
      "chk img p tag"
      "chk img m tag";
  }
}

/* ══ Подарок в сводке — как в дровере (cart-drawer-dozo.css .is-free-unit) ═
 * Зелёная подложка с полосой слева, зелёная рамка картинки + лента, бейдж
 * «FREE · BUY 6 GET 2» с бликом, «You save $X», «$0.00» зелёным Chillax,
 * въезд + двойное свечение при появлении. */
.dz-ck-item.is-gift {
  position: relative;
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: var(--dz-r-ctl);
  background: linear-gradient(
    90deg,
    rgba(34, 164, 71, 0.16),
    rgba(34, 164, 71, 0.06) 62%,
    rgba(242, 255, 0, 0.08)
  );
  box-shadow: inset 3px 0 0 var(--dz-success);
  animation:
    dz-ck-gift-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    dz-ck-gift-glow 1.1s ease-in-out 0.45s 2;
}
.dz-ck-item.is-gift .dz-ck-item__img {
  outline: 2px solid var(--dz-success);
  outline-offset: -2px;
}
.dz-ck-item.is-gift .dz-ck-item__qty {
  background: var(--dz-success);
  color: #fff;
}
.dz-ck-item__ribbon {
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--dz-success);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.dz-ck-item__ribbon svg { width: 12px; height: 12px; }
.dz-ck-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.dz-ck-item__badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--dz-success);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dz-ck-item__badge svg { width: 12px; height: 12px; flex: none; }
/* Медленный блик по бейджу — «это подарок» видно и после въезда. */
.dz-ck-item__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: dz-ck-badge-shine 3.2s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.dz-ck-item__saved {
  font-size: 12px;
  font-weight: 700;
  color: var(--dz-success);
  white-space: nowrap;
}
.dz-ck-item.is-gift .dz-ck-item__p {
  color: var(--dz-success);
  font-size: 16px;
}
@keyframes dz-ck-gift-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes dz-ck-gift-glow {
  0%, 100% { box-shadow: inset 3px 0 0 var(--dz-success), 0 0 0 0 rgba(34, 164, 71, 0); }
  50% { box-shadow: inset 3px 0 0 var(--dz-success), 0 0 0 5px rgba(34, 164, 71, 0.24); }
}
@keyframes dz-ck-badge-shine {
  0% { transform: translateX(-120%); }
  35%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-ck-item.is-gift, .dz-ck-item__badge::after { animation: none; }
}

/* ══ Анимация бампа (владелец 2026-09-09: «чтоб глаз цеплялся») ═══════════
 * Появление: въезд + два «вдоха» жёлтым по рамке; чип «Only on this page» —
 * блик раз в ~4 с; последние 15 с окна — отсчёт пульсирует, рамка мигает. */
.dz-ck-bump {
  animation:
    dz-ck-bump-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    dz-ck-bump-glow 1.2s ease-in-out 0.45s 2;
}
.dz-ck-bump__tag {
  position: relative;
  overflow: hidden;
}
.dz-ck-bump__tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: dz-ck-badge-shine 4s ease-in-out 2s infinite;
  pointer-events: none;
}
.dz-ck-bump.is-urgent {
  animation: dz-ck-bump-urgent 1s ease-in-out infinite;
}
.dz-ck-bump.is-urgent .dz-ck-bump__m b {
  display: inline-block;
  font-size: 15px;
  animation: dz-ck-timer-pulse 1s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes dz-ck-bump-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes dz-ck-bump-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 255, 0, 0); }
  50% { box-shadow: 0 0 0 6px rgba(242, 255, 0, 0.28); }
}
@keyframes dz-ck-bump-urgent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 255, 0, 0); border-color: var(--dz-accent); }
  50% { box-shadow: 0 0 0 5px rgba(242, 255, 0, 0.22); border-color: #fff; }
}
@keyframes dz-ck-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-ck-bump, .dz-ck-bump.is-urgent, .dz-ck-bump__tag::after, .dz-ck-bump.is-urgent .dz-ck-bump__m b { animation: none; }
}

/* Bank review 2026-09-23 (port of PD checkout.css 567-579): who sells
   (Visa 5.8.4.1 / Mastercard 5.5.1) and the consent + descriptor lines at the
   button (Visa 5.4.2.5). Plain <p>, not .dz-ck-trust: checkout-gate counts its spans. */
.dz-ck-merchant,
.dz-ck-ack {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dz-fg-muted);
}
.dz-ck-merchant { margin-bottom: 10px; }
.dz-ck-merchant strong, .dz-ck-ack strong { color: var(--dz-fg-body); font-weight: 600; }
.dz-ck-ack a,
.dz-ck-merchant a { text-decoration: underline; text-underline-offset: 2px; }
.dz-ck-descriptor { font-size: 12px; }
.dz-ck-brandrow { margin: 0 0 10px; }

/* --- /theme/categories.css --- */
/* === Perks-styled categories grid (ported from Hippy Trippy, recolored) === */

.pcats {
  background: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 18px;
  padding: 26px 60px 34px;
  margin: 36px 0;
}

.pcats--no-padding {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

.pcats__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.pcats__title-main {
  margin: 0;
  font-family: 'Alfa Slab One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 1.05;
  color: #000000;
}

.pcats__shop-all:link,
.pcats__shop-all:visited {
  flex-shrink: 0;
  background: #F2FF00;
  color: #000000;
  border: 2px solid #000000;
  border-radius: 12px;
  font-family: 'Alfa Slab One', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.4;
  padding: 8px 56px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.pcats__shop-all:hover,
.pcats__shop-all:active {
  background: #000000;
  color: #F2FF00;
}

.pcats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pcats__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  background: #000000;
  border: 2px solid #000000;
  border-radius: 16px;
  padding: 22px 16px 18px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pcats__card:hover {
  transform: translateY(-4px);
  border-color: #F2FF00;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.pcats__icon {
  width: 100%;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcats__icon img {
  width: 60%;
  max-width: 150px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.pcats__label {
  margin: 14px 0 0;
  text-align: center;
  font-family: 'Gowun Batang', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #FFFFFF;
}

.pcats__shop-all--mobile {
  display: none;
}

@media screen and (max-width: 1100px) {
  .pcats {
    padding: 22px 36px 30px;
  }
  .pcats__title-main {
    font-size: 30px;
  }
  .pcats__shop-all:link,
  .pcats__shop-all:visited {
    font-size: 20px;
    padding: 8px 34px;
  }
}

@media screen and (max-width: 860px) {
  .pcats {
    padding: 20px 18px 26px;
    border-radius: 14px;
  }
  .pcats__top {
    margin-bottom: 18px;
    justify-content: center;
  }
  .pcats__title-main {
    font-size: 24px;
    text-align: center;
  }
  .pcats__top .pcats__shop-all {
    display: none;
  }
  .pcats__shop-all--mobile {
    display: inline-block;
    margin: 22px auto 0;
    text-align: center;
  }
  .pcats__grid {
    gap: 12px;
  }
  .pcats__card {
    padding: 14px 8px 12px;
    border-radius: 12px;
  }
  .pcats__icon img {
    width: 72%;
  }
  .pcats__label {
    margin-top: 9px;
    font-size: 12px;
  }
  .pcats--no-padding {
    text-align: center;
  }
}

@media screen and (max-width: 420px) {
  .pcats__label {
    font-size: 11px;
  }
}

/* --- /theme/collage.css --- */
.collage-wrapper-title {
  margin-top: 0;
  margin-bottom: 3rem;
}

.collage {
  display: grid;
}

.collage__item > * {
  width: 100%;
}

.collage__item .card__content {
  flex-grow: initial;
}

@media screen and (max-width: 749px) {
  .collage {
    grid-column-gap: var(--grid-mobile-horizontal-spacing);
    grid-row-gap: var(--grid-mobile-vertical-spacing);
  }

  .collage--mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collage--mobile .collage__item--left:nth-child(3n - 2) {
    grid-column: span 2;
  }

  .collage--mobile .collage__item--left:nth-child(3n - 2):nth-last-child(2) {
    grid-column: span 1;
  }

  .collage--mobile .collage__item--left:nth-child(3n) {
    grid-column-start: 2;
  }

  .collage--mobile .collage__item--right:nth-child(3n - 2) {
    grid-column-start: 1;
  }

  .collage--mobile .collage__item--right:nth-child(3n - 2):last-child {
    grid-column: span 2;
  }

  .collage--mobile .collage__item--right:nth-child(3n - 1) {
    grid-column-start: 2;
  }

  .collage--mobile .collage__item--right:nth-child(3n) {
    grid-column: 1 / span 2;
  }
}

@media screen and (min-width: 750px) {
  .collage {
    grid-auto-flow: column;
    grid-column-gap: var(--grid-desktop-horizontal-spacing);
    grid-row-gap: var(--grid-desktop-vertical-spacing);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .collage__item--left:nth-child(3n - 2) {
    grid-column: 1 / span 2;
    grid-row: span 2;
  }

  .collage__item--left:nth-child(3n - 2):last-child {
    grid-column: 1 / span 3;
  }

  .collage__item--left:nth-child(3n - 1),
  .collage__item--left:nth-child(3n) {
    grid-column-start: 3;
  }

  .collage__item--left:nth-child(3n - 1):last-child {
    grid-row: span 2;
  }

  .collage__item--right:nth-child(3n - 2) {
    grid-column: 1 / span 1;
    grid-row: span 1;
  }

  .collage__item--right:nth-child(3n - 2):last-child {
    grid-column: 1 / span 3;
  }

  .collage__item--right:nth-child(3n - 1) {
    grid-column-start: 1;
  }

  .collage__item--right:nth-child(3n-1):last-child {
    grid-column: span 2;
  }

  .collage__item--right:nth-child(3n) {
    grid-column: 2 / span 2;
    grid-row: span 2;
  }

  .collage__item--collection:only-child,
  .collage__item--product:only-child {
    justify-self: center;
    max-width: 73rem;
    width: 100%;
  }
}

.collage-card {
  height: 100%;
  position: relative;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
  padding: var(--image-padding);
}

/* Needed for gradient continuity with or without animation, background-attachment: local scopes the gradient to its container which happens automatically when a transform is applied (animation on scroll) */
.collage-card.gradient {
  transform: perspective(0);
}

.collage-card:after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
  width: calc(var(--border-width) * 2 + 100%);
  height: calc(var(--border-width) * 2 + 100%);
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
}

.collage-card.product-card-wrapper {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
}

.collage-card .media {
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
}

.collage-card .deferred-media {
  height: 100%;
  overflow: visible;
}

.collage-card__link {
  display: block;
  height: 100%;
}

.collage-card .deferred-media__poster {
  background-color: transparent;
  border: 0;
}

.collage-card .deferred-media__poster:after {
  content: '';
  position: absolute;
  z-index: 1;
  outline-offset: 0.3rem;
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  right: calc(var(--border-width) * -1);
  top: calc(var(--border-width) * -1);
}

.collage-card .deferred-media__poster:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.collage-card .deferred-media__poster:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.collage-card .deferred-media__poster:focus:not(:focus-visible),
.collage-card .deferred-media__poster:focus:not(:focus-visible):after {
  outline: none;
  box-shadow: none;
}

.collage-card .deferred-media__poster:focus {
  outline: none;
  box-shadow: none;
}

/* --- /theme/collapsible-content.css --- */
.collapsible-content {
  position: relative;
  z-index: 0;
}

.collapsible-section-layout {
  padding-bottom: 5rem;
  padding-top: 5rem;
}

@media screen and (min-width: 750px) {
  .collapsible-section-layout {
    padding-bottom: 7rem;
    padding-top: 7rem;
  }
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.collapsible-content__media {
  background: transparent;
}

.collapsible-content__media--small {
  height: 19.4rem;
}

.collapsible-content__media--large {
  height: 43.5rem;
}

@media screen and (min-width: 750px) {
  .collapsible-content__media--small {
    height: 31.4rem;
  }

  .collapsible-content__media--large {
    height: 69.5rem;
  }
}

@media screen and (min-width: 750px) {
  .collapsible-content__grid--reverse {
    flex-direction: row-reverse;
  }
}

.collapsible-content-wrapper-narrow {
  margin: 0 auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  max-width: 73.4rem;
}

.collapsible-content__header {
  word-break: break-word;
}

.collapsible-content__heading {
  margin-bottom: 2rem;
  margin-top: 0;
}

@media screen and (min-width: 750px) {
  .collapsible-content__heading {
    margin-bottom: 3rem;
  }
}

.collapsible-none-layout .accordion + .accordion {
  border-top: 0;
}

.collapsible-row-layout .accordion:not(:first-child):not(.color-scheme-1) {
  margin-top: 1rem;
}

.caption-with-letter-spacing + h2 {
  margin-top: 1rem;
}

@media screen and (min-width: 750px) {
  .collapsible-content .accordion {
    margin-top: 0;
  }
}

.collapsible-row-layout .accordion {
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  margin-bottom: 1.5rem;
  /* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
  transform: perspective(0);
}

.collapsible-row-layout .accordion summary,
.collapsible-row-layout .accordion .accordion__content {
  padding: 1.5rem;
}

.collapsible-row-layout .accordion .accordion__content {
  padding-top: 0;
}

.collapsible-content summary:hover {
  background: rgba(var(--color-foreground), 0.04);
}

.collapsible-content summary:hover .accordion__title {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  @media screen and (min-width: 750px) {
    .collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,
    .collapsible-content__grid--reverse .collapsible-content__grid-item {
      padding-left: 5rem;
      padding-right: 0;
    }
  }

  @media screen and (min-width: 990px) {
    .collapsible-content__grid:not(.collapsible-content__grid--reverse) .grid__item:last-child,
    .collapsible-content__grid--reverse .collapsible-content__grid-item {
      padding-left: 7rem;
    }
  }
}

/* --- /theme/component-accordion.css --- */
.accordion svg path{
  fill:#fff;
}
.accordion summary {
  display: flex;
  position: relative;
  line-height: 1;
  padding: 1.5rem 0;
}

.accordion .summary__title {
  display: flex;
  flex: 1;
}

.accordion .summary__title+.icon-caret {
  height: calc(var(--font-heading-scale) * 0.6rem);
}

.accordion+.accordion {
  margin-top: 0;
  border-top: none;
}

.accordion {
    margin-top: 2.5rem;
    margin-bottom: 0;
    border-top: .5px solid #fff;
    border-bottom: .5px solid #fff;
    background-color: #000000;
}

.accordion__title {
  display: inline-block;
  max-width: calc(100% - 6rem);
  min-height: 1.6rem;
  margin: 0;
  word-break: break-word;
  color:#fff;
}

.accordion .svg-wrapper {
  align-self: center;
  fill: rgb(var(--color-foreground));
  height: calc(var(--font-heading-scale) * 2rem);
  margin-right: calc(var(--font-heading-scale) * 1rem);
  width: calc(var(--font-heading-scale) * 2rem);
}

.accordion details[open]>summary .icon-caret {
  transform: rotate(180deg);
}

.accordion__content {
    margin-bottom: 1.5rem;
    word-break: break-word;
    overflow-x: auto;
    padding: 0 .6rem;
    color: #fff;
    font-weight: 400;
    font-size: 17px;
    line-height: 120%;
}

.accordion__content img {
  max-width: 100%;
}
/* --- /theme/component-article-card.css --- */
@media screen and (max-width: 749px) {
  .articles-wrapper .article {
    width: 100%;
  }
}

.article {
  display: flex;
  align-items: center;
}

.article.grid__item {
  padding: 0;
}

.grid--peek .article-card {
  box-sizing: border-box;
}

.article-card__image-wrapper > a {
  display: block;
}

.article-card__title {
  text-decoration: none;
  word-break: break-word;
}

.article-card__title a:after {
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

.article-card__link.link {
  padding: 0;
}

.article-card__link {
  text-underline-offset: 0.3rem;
}

.article-card .card__heading {
  margin-bottom: 0.6rem;
}

.blog-articles .article-card .card__information,
.blog__posts .article-card .card__information {
  padding-left: 2rem;
  padding-right: 2rem;
}

.article-card__info {
  padding-top: 0.4rem;
}

.article-card__footer {
  letter-spacing: 0.1rem;
  font-size: 1.4rem;
}

.article-card__footer:not(:last-child) {
  margin-bottom: 1rem;
}

.article-card__footer:last-child {
  margin-top: auto;
}

.article-card__excerpt {
  width: 100%;
  margin-top: 1.2rem;
}

.article-card__link:not(:only-child) {
  margin-right: 3rem;
}

@media screen and (min-width: 990px) {
  .article-card__link:not(:only-child) {
    margin-right: 4rem;
  }
}

.article-card__image--small .ratio::before {
  padding-bottom: 11rem;
}

.article-card__image--medium .ratio::before {
  padding-bottom: 22rem;
}

.article-card__image--large .ratio::before {
  padding-bottom: 33rem;
}

@media screen and (min-width: 750px) {
  .article-card__image--small .ratio::before {
    padding-bottom: 14.3rem;
  }

  .article-card__image--medium .ratio::before {
    padding-bottom: 21.9rem;
  }

  .article-card__image--large .ratio::before {
    padding-bottom: 27.5rem;
  }
}

@media screen and (min-width: 990px) {
  .article-card__image--small .ratio::before {
    padding-bottom: 17.7rem;
  }

  .article-card__image--medium .ratio::before {
    padding-bottom: 30.7rem;
  }

  .article-card__image--large .ratio::before {
    padding-bottom: 40.7rem;
  }
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .articles-wrapper.grid {
    margin: 0 0 5rem 0;
  }

  @media screen and (min-width: 750px) {
    .articles-wrapper.grid {
      margin-bottom: 7rem;
    }
  }
}

/* --- /theme/component-card.css --- */
.card-wrapper {
  color: inherit;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.card {
  text-decoration: none;
  text-align: var(--text-alignment);
}

.card:not(.ratio) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.card--horizontal {
  --text-alignment: left;
  --image-padding: 0rem;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

.card--horizontal.ratio:before {
  padding-bottom: 0;
}

.card--card.card--horizontal {
  padding: 1.2rem;
}

.card--card.card--horizontal.card--text {
  column-gap: 0;
}

.card--card {
  height: 100%;
}

.card--card,
.card--standard .card__inner {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
  border-radius: 27px;
  border: 1px solid #000000;
}

.card--card:after,
.card--standard .card__inner:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: calc(var(--border-width) * 2 + 100%);
  height: calc(var(--border-width) * 2 + 100%);
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.card--card.gradient,
.card__inner.gradient {
  transform: perspective(0);
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.card__inner.color-scheme-1 {
  background: transparent;
}

.card .card__inner .card__media {
  overflow: hidden;
  /* Fix for Safari border bug on hover */
  z-index: 0;
  border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding));
  border-radius: 27px;
}

.card--card .card__inner .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card--standard.card--text {
  background-color: transparent;
}

.card-information {
  text-align: var(--text-alignment);
}

.card__media,
.card .media {
  bottom: 0;
  position: absolute;
  top: 0;
}

.card .media {
  width: 100%;
}

.card__media {
  margin: var(--image-padding);
  width: calc(100% - 2 * var(--image-padding));
}

.card--standard .card__media {
  margin: var(--image-padding);
}

.card__inner {
  width: 100%;
}

.card--media .card__inner .card__content {
  position: relative;
  padding: calc(var(--image-padding) + 1rem);
}

.card__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) max-content minmax(0, 1fr);
  padding: 1rem;
  width: 100%;
  flex-grow: 1;
}

.card__content--auto-margins {
  grid-template-rows: minmax(0, auto) max-content minmax(0, auto);
}

.card__information {
  grid-row-start: 2;
  padding: 1.3rem 1rem;
}

.card:not(.ratio) > .card__content {
  grid-template-rows: max-content minmax(0, 1fr) max-content auto;
}

.card-information .card__information-volume-pricing-note {
  margin-top: 0.6rem;
  line-height: calc(0.5 + 0.4 / var(--font-body-scale));
  color: rgba(var(--color-foreground), 0.75);
}

.card__information-volume-pricing-note--button,
.card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-align: var(--text-alignment);
  min-width: auto;
}

.card__information-volume-pricing-note--button:hover {
  text-decoration: underline;
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
  transform: initial;
  top: auto;
  bottom: 4rem;
  max-width: 20rem;
  width: calc(95% + 2rem);
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info span:first-of-type {
  padding-right: 0.3rem;
}

.card__information-volume-pricing-note--button-right + .global-settings-popup.quantity-popover__info {
  right: 0;
  left: auto;
}

.card__information-volume-pricing-note--button-center + .global-settings-popup.quantity-popover__info {
  left: 50%;
  transform: translate(-50%);
}

.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info .quantity__rules {
  text-align: left;
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .card__content quick-add-bulk .quantity {
    width: auto;
  }

  .grid--6-col-desktop .card__content quick-add-bulk .quantity__button {
    width: calc(3rem / var(--font-body-scale));
  }

  .grid--6-col-desktop .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
    width: calc(100% + var(--border-width) + 3.5rem);
  }

  .grid--6-col-desktop
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 1rem);
  }
}

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity__button {
    width: calc(3.5rem / var(--font-body-scale));
  }

  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info,
  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    left: 50%;
    transform: translate(-50%);
  }

  .grid--2-col-tablet-down
    .card--standard
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: 100%;
  }

  .grid--2-col-tablet-down
    .card--card
    .card__information-volume-pricing-note--button
    + .global-settings-popup.quantity-popover__info {
    width: calc(100% + var(--border-width) + 4rem);
  }

  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity {
    width: auto;
  }
}

.card-information quantity-popover volume-pricing {
  margin-top: 0;
}

@media screen and (max-width: 989px) {
  .card-information quantity-popover .quantity__rules ~ volume-pricing {
    margin-top: 0;
  }

  .card-information quantity-popover volume-pricing {
    margin-top: 4.2rem;
  }
}

@media screen and (min-width: 750px) {
  .card__information {
    padding-bottom: 1.7rem;
    padding-top: 1.7rem;
  }
}

.card__badge {
  align-self: flex-end;
  grid-row-start: 3;
  justify-self: flex-start;
}

.card__badge.top {
  align-self: flex-start;
  grid-row-start: 1;
}

.card__badge.right {
  justify-self: flex-end;
}

.card:not(.card--horizontal) > .card__content > .card__badge {
  margin: 1.3rem;
}

.card__media .media img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.card__inner:not(.ratio) > .card__content {
  height: 100%;
}

.card__heading {
  margin-top: 0;
  margin-bottom: 0;
}

.card__heading:last-child {
  margin-bottom: 0;
}

.card--horizontal .card__heading,
.card--horizontal .price__container .price-item,
.card--horizontal__quick-add {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

.card--horizontal
  .card-information
  > *:not(.visually-hidden:first-child)
  + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0;
}

.card--horizontal__quick-add:before {
  box-shadow: none;
}

@media only screen and (min-width: 750px) {
  .card--horizontal .card__heading,
  .card--horizontal .price__container .price-item,
  .card--horizontal__quick-add {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

.card--card.card--media > .card__content {
  margin-top: calc(0rem - var(--image-padding));
}

.card--standard.card--text a::after,
.card--card .card__heading a::after {
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  right: calc(var(--border-width) * -1);
  top: calc(var(--border-width) * -1);
}

.card__heading a::after {
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.card__heading a:after {
  outline-offset: 0.3rem;
}

.card__heading a:focus:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus-visible:after {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
}

.card__heading a:focus:not(:focus-visible):after {
  box-shadow: none;
  outline: 0;
}

.card__heading a:focus {
  box-shadow: none;
  outline: 0;
}

@media screen and (min-width: 990px) {
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--duration-long) ease;
  }

  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(1.03);
  }

  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity: 1;
    transition: transform var(--duration-long) ease;
    transform: scale(1.03);
  }

  .underline-links-hover:hover a {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }
}

.card--standard.card--media .card__inner .card__information,
.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading:not(.card__heading--placeholder),
.card--standard:not(.card--horizontal) > .card__content .card__badge,
.card--standard.card--text.article-card > .card__content .card__information,
.card--standard > .card__content .card__caption {
  display: none;
}

.card--standard:not(.card--horizontal) .placeholder-svg {
  width: 100%;
}

.card--standard > .card__content {
  padding: 0;
}

.card--standard > .card__content .card__information {
  padding-left: 0;
  padding-right: 0;
}

.card--card.card--media .card__inner .card__information,
.card--card.card--text .card__inner,
.card--card.card--media > .card__content .card__badge {
  display: none;
}

.card--horizontal .card__badge,
.card--horizontal.card--text .card__inner {
  display: none;
}

.card--extend-height {
  height: 100%;
}

.card--extend-height.card--standard.card--text,
.card--extend-height.card--media {
  display: flex;
  flex-direction: column;
}

.card--extend-height.card--standard.card--text .card__inner,
.card--extend-height.card--media .card__inner {
  flex-grow: 1;
}

.card .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
  transition: transform var(--duration-short) ease;
  overflow: hidden;
}

.card-information > * + * {
  margin-top: 0.5rem;
}

.card-information {
  width: 100%;
}

.card-information > * {
  line-height: calc(1 + 0.4 / var(--font-body-scale));
  color: rgb(var(--color-foreground));
}

.card-information > .price {
  color: rgb(var(--color-foreground));
}

.card--horizontal .card-information > .price {
  color: rgba(var(--color-foreground), 0.75);
}

.card-information > .rating {
  margin-top: 0.4rem;
}

/* Specificity needed due to the changes below */
.card-information
  > *:not(.visually-hidden:first-child)
  + quantity-popover:not(.rating):not(.card__information-volume-pricing-note),
.card-information .card__information-volume-pricing-note.card__information-volume-pricing-note--button {
  margin-top: 0;
}

.card-information > *:not(.visually-hidden:first-child) + *:not(.rating):not(.card__information-volume-pricing-note) {
  margin-top: 0.7rem;
}

.card-information .caption {
  letter-spacing: 0.07rem;
}

.card-article-info {
  margin-top: 1rem;
}

/* Card Shapes */

.card--shape .card__content {
  padding-top: 0;
}

.card--shape.card--standard:not(.card--text) .card__inner {
  border: 0;
  /* Border is not currently compatible with image shapes for standard cards. */
  background-color: transparent;
  filter: drop-shadow(
    var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
      rgba(var(--color-shadow), var(--shadow-opacity))
  );
}

.card--shape.card--standard:not(.card--text) .card__inner:after {
  display: none;
}

.grid__item:nth-child(2n) .shape--blob {
  clip-path: polygon(var(--shape--blob-2));
}

.grid__item:nth-child(3n) .shape--blob {
  clip-path: polygon(var(--shape--blob-3));
}

.grid__item:nth-child(4n) .shape--blob {
  clip-path: polygon(var(--shape--blob-4));
}

.grid__item:nth-child(5n) .shape--blob {
  clip-path: polygon(var(--shape--blob-5));
}

.grid__item:nth-child(7n) .shape--blob {
  clip-path: polygon(var(--shape--blob-6));
}

.grid__item:nth-child(8n) .shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

/* Card Shape Hover Rules */

@media (prefers-reduced-motion: no-preference) {
  .product-card-wrapper .shape--round {
    transition: clip-path var(--duration-long) ease;
  }

  .product-card-wrapper:hover .shape--round {
    clip-path: ellipse(47% 47% at 50% 50%);
  }

  .product-card-wrapper .shape--blob {
    transition: clip-path var(--duration-long) ease-in-out;
  }

  .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }

  .grid__item:nth-child(2n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-6));
  }

  .grid__item:nth-child(3n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-1));
  }

  .grid__item:nth-child(4n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-2));
  }

  .grid__item:nth-child(5n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-3));
  }

  .grid__item:nth-child(7n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-4));
  }

  .grid__item:nth-child(8n) .product-card-wrapper:hover .shape--blob {
    clip-path: polygon(var(--shape--blob-5));
  }
}

/* --- /theme/component-collection-hero.css --- */
.collection-banner {
  width: 100%;
  position: relative;
  line-height: 0;
}

.collection-title {
  position: absolute;
  top: 48px;
  display: block;
  padding: 4px 15px;
  background-color: #000;
  color: #fff;
  border-radius: 50px;
  font-family: 'Gowun Batang', serif;
  font-weight: 700;
  font-size: 23px;
  left: 91px;
  line-height: 1.7;
}

.collection-bg,
.collection-bg_mob {
  width: 100%;
}

.collection-bg_mob {
  display: none;
}

.collection-promo {
  display: flex;
  padding: 10px 90px;
  gap: 20px;
  background-color: #F2FF00EB;
  align-items: center;
  justify-content: space-between;
}

.collection-promo-icon-container img {
  width: 100%;
}

.collection-promo-button:link,
.collection-promo-button:visited {
  padding: 4px 15px;
  background-color: #000;
  color: #fff;
  border-radius: 50px;
  font-family: "Gowun Batang", sans-serif;
  text-decoration: none;
  font-weight: 400;
  font-size: 26px;
  transition: all 0.3s;
  line-height: 1.7;
  border: 0.5px solid #000;
  text-wrap: nowrap;
}

.collection-promo-button:active,
.collection-promo-button:hover {
  background-color: #f2ff00eb;
  color: #000;

}

.collection-promo-content {
  display: flex;
  align-items: center;
}

.collection-promo-text {
  font-size: 36px;
  font-family: "Gowun Batang", sans-serif;
  font-weight: 400;
  color: #000;
  line-height: 1.4;
}

@media screen and (max-width:1100px) {
  .collection-promo-text {
    font-size: 26px;
  }

  .collection-promo {
    padding: 0px 36px;
  }

  .collection-promo-button:link,
  .collection-promo-button:visited {
    font-size: 20px;
  }

  .collection-title {
    top: 30px;
    left: 50px;
    line-height: 1.7;
  }
}

@media screen and (max-width:820px) {

  .collection-bg {
    display: none;
  }

  .collection-bg_mob {
    display: block;
  }

  .collection-promo-icon-container {
    max-width: 70px;
  }

  .collection-promo-text {
    font-size: 16px;
  }

  .collection-promo-button:link,
  .collection-promo-button:visited {
    font-size: 10px;
  }

  .collection-title {
    top: 20px;
    left: 20px;
    font-size: 12px;
    line-height: 1.7;
  }
}

@media screen and (max-width:400px) {
  .collection-promo-icon-container {
    max-width: 70px;
  }

  .collection-promo {
    padding: 0px 20px;
  }

  .collection-promo-text {
    font-size: 14px;
  }

  .collection-promo-button:link,
  .collection-promo-button:visited {
    font-size: 10px;
  }

  .collection-title {
    top: 20px;
    left: 20px;
    font-size: 12px;
    line-height: 1.7;
  }
}
/* --- /theme/component-complementary-products.css --- */
.complementary-products__container {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

product-recommendations:not(.is-accordion) .complementary-products__container {
  margin-top: 1.5rem;
}

.complementary-products__container > details[open] {
  padding-bottom: 1.5rem;
}

.complementary-slider {
  margin-top: 0;
  gap: 0;
}

.complementary-slide {
  --shadow-padding-sides: calc((var(--shadow-horizontal-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
  --shadow-padding-sides-negative: calc(
    (var(--shadow-horizontal-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible)
  );
}

.complementary-slide > ul {
  display: flex;
  flex-direction: column;
  gap: var(--grid-mobile-vertical-spacing);
}

.complementary-slide.complementary-slide--standard > ul {
  gap: calc(var(--grid-mobile-vertical-spacing) + 8px);
}

@media screen and (min-width: 750px) {
  .complementary-slide > ul {
    gap: var(--grid-desktop-vertical-spacing);
  }

  .complementary-slide.complementary-slide--standard > ul {
    gap: calc(var(--grid-desktop-vertical-spacing) + 8px);
  }
}

.complementary-slide.grid__item {
  width: 100%;
  padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
  padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  padding-right: max(var(--focus-outline-padding), var(--shadow-padding-sides));
  padding-left: max(var(--focus-outline-padding), var(--shadow-padding-sides-negative));
}

.complementary-slide .card-wrapper {
  height: auto;
}

.complementary-products > .summary__title {
  display: flex;
  line-height: 1;
  padding: 1.5rem 0;
}

.accordion + product-recommendations .accordion,
product-recommendations.is-accordion + .accordion {
  margin-top: 0;
  border-top: none;
}

.complementary-products > .summary__title .icon-accordion {
  fill: rgb(var(--color-foreground));
  height: calc(var(--font-heading-scale) * 2rem);
  margin-right: calc(var(--font-heading-scale) * 1rem);
  width: calc(var(--font-heading-scale) * 2rem);
}

.complementary-products__container .card--card .card__content,
.complementary-products__container .card--horizontal .card__information {
  padding: 0;
}

.complementary-products__container .card--horizontal .card__inner {
  max-width: 20%;
}

@media screen and (min-width: 750px) and (max-width: 1200px) {
  .complementary-products__container .card--horizontal .card__inner {
    max-width: 25%;
  }
}

.complementary-slide .card--text .card__content {
  grid-template-rows: minmax(0, 1fr) max-content auto;
}

.complementary-products__container .card--card.card--media > .card__content {
  margin-top: 0;
}

.complementary-products-contains-quick-add .underline-links-hover:hover a {
  text-decoration: initial;
}

.complementary-products-contains-quick-add .card__heading:hover a {
  text-decoration: underline;
}

.complementary-products__container .card--card .card__inner .card__media {
  border-radius: calc(var(--corner-radius) - var(--border-width) - var(--image-padding));
}

.complementary-products__container .card--horizontal .quick-add {
  margin: 0;
  max-width: 20rem;
}

.complementary-products__container .quick-add__submit {
  padding: 1.5rem 0;
  min-height: inherit;
}

.complementary-products__container .quick-add__submit .icon-plus {
  width: 1.2rem;
}

.complementary-products__container .icon-wrap {
  display: flex;
}

.complementary-products .sold-out-message:not(.hidden) + .icon-wrap {
  display: none;
}

.complementary-products__container .quick-add__submit:not(.animate-arrow) .icon-wrap {
  transition: transform var(--duration-short) ease;
}

.complementary-products__container .quick-add__submit:not(.animate-arrow):hover .icon-wrap {
  transform: rotate(90deg);
}

.complementary-products__container .quick-add__submit:after,
.complementary-products__container .quick-add__submit:hover:after {
  box-shadow: none;
}

.complementary-products__container .card--horizontal .quick-add,
.complementary-products__container .card__badge {
  justify-self: var(--text-alignment);
}

.product--no-media .complementary-products__container .price {
  text-align: var(--text-alignment);
}

@media screen and (min-width: 750px) {
  .complementary-products__container .price--on-sale .price-item--regular {
    font-size: 1.3rem;
  }
}

/* --- /theme/component-deferred-media.css --- */
.deferred-media__poster {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--border-radius) - var(--border-width));
}

.media > .deferred-media__poster {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.deferred-media {
  overflow: hidden;
}

.deferred-media:not([loaded]) template {
  z-index: -1;
}

.deferred-media[loaded] > .deferred-media__poster {
  display: none;
}

.deferred-media__poster:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)),
    0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),
    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5);
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.deferred-media__poster:focus {
  outline: none;
  box-shadow: 0 0 0 var(--media-border-width) rgba(var(--color-foreground), var(--media-border-opacity)),
    0 0 0 calc(var(--media-border-width) + 0.3rem) rgb(var(--color-background)),
    0 0 0 calc(var(--media-border-width) + 0.5rem) rgba(var(--color-foreground), 0.5);
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.global-media-settings--full-width .deferred-media__poster,
.global-media-settings--full-width .deferred-media__poster:is(:focus, :focus-visible) {
  border-radius: 0;
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .deferred-media__poster:focus {
    outline: transparent solid 1px;
  }
}
.deferred-media__poster:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

.deferred-media__poster-button {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.2rem;
  width: 6.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--duration-short) ease, color var(--duration-short) ease;
  z-index: 1;
}

.deferred-media__poster-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.deferred-media__poster-button .icon {
  width: 2rem;
  height: 2rem;
}

.deferred-media__poster-button .icon-play {
  margin-left: 0.2rem;
}

/* --- /theme/component-facets.css --- */
.facets-container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  padding-top: 1rem;
}

.active-facets-mobile {
  margin-bottom: 0.5rem;
}

.mobile-facets__list {
  overflow-y: auto;
}

@media screen and (min-width: 750px) {
  .facets-container > * + * {
    margin-top: 0;
  }

  .facets__form .product-count {
    grid-column-start: 3;
    align-self: flex-start;
  }
}

@media screen and (max-width: 989px) {
  .facets-container {
    grid-template-columns: auto minmax(0, max-content);
    column-gap: 2rem;
  }
}

.facet-filters {
  align-items: flex-start;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  padding-left: 2.5rem;
}

@media screen and (min-width: 990px) {
  .facet-filters {
    padding-left: 3rem;
  }
}

.facet-filters__label {
  display: block;
  color: rgba(var(--color-foreground), 0.85);
  font-size: 1.4rem;
  margin: 0 2rem 0 0;
}

.facet-filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.4rem;
  cursor: pointer;
  height: 4.5rem;
  padding: 0 1.5rem;
  min-width: 25rem;
  margin-top: 2.4rem;
  border: 0.1rem solid rgba(var(--color-foreground), 0.55);
}

.facet-filters__summary::after {
  position: static;
}

.facet-filters__field {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.facet-filters__field .select {
  width: auto;
}

.facet-filters__field .select:after,
.facet-filters__field .select:before,
.mobile-facets__sort .select:after,
.mobile-facets__sort .select:before {
  content: none;
}

.facet-filters__field .select__select,
.mobile-facets__sort .select__select {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.select .icon-caret {
  width: 10px;
}

.facet-filters button {
  margin-left: 2.5rem;
}

.facet-filters__sort {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: 1.4rem;
  height: auto;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  margin: 0;
  padding-left: 0;
  padding-right: 1.75rem;
}

.facet-filters__sort + .icon-caret {
  right: 0;
}

@media screen and (forced-colors: active) {
  .facet-filters__sort {
    border: none;
  }
}

.facet-filters__sort,
.facet-filters__sort:hover {
  box-shadow: none;
  filter: none;
  transition: none;
}

.mobile-facets__sort .select__select:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.mobile-facets__sort .select__select.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.facet-filters__sort:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.facet-filters__sort.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.facets {
  display: block;
  grid-column-start: span 2;
}

.facets__form {
  display: grid;
  gap: 0 3.5rem;
  grid-template-columns: 1fr max-content max-content;
  margin-bottom: 0.5rem;
}

.facets__wrapper {
  align-items: center;
  align-self: flex-start;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
}

.facets__heading {
  display: block;
  color: rgba(var(--color-foreground), 0.85);
  font-size: 1.4rem;
  margin: -1.5rem 2rem 0 0;
}

.facets__reset {
  margin-left: auto;
}

.facets__disclosure {
  margin-right: 3.5rem;
}

.facets__summary {
  color: rgba(var(--color-foreground), 0.75);
  font-size: 1.4rem;
  padding: 0 1.75rem 0 0;
  margin-bottom: 1.5rem;
}

.facets__summary .svg-wrapper {
  height: auto;
  width: auto;
}

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

.facets__disclosure[open] .facets__summary,
.facets__summary:hover {
  color: rgb(var(--color-foreground));
}

.facets__disclosure[open] .facets__display,
.facets__disclosure-vertical[open] .facets__display-vertical {
  animation: animateMenuOpen var(--duration-default) ease;
}

.facets__summary span:first-of-type {
  transition: text-decoration var(--duration-short) ease;
}

.facets__summary:hover .facets__summary-label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.facets__and-helptext {
  color: rgba(var(--color-foreground), 0.5);
  font-size: calc(var(--font-heading-scale) * 1.2rem);
  line-height: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  .facets__and-helptext {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
    line-height: calc(var(--font-heading-scale) * 1.3rem);
  }
}

.facets__disclosure .facets__and-helptext,
.facets__disclosure-vertical .facets__and-helptext {
  display: none;
}

.facets__disclosure[open] .facets__and-helptext,
.facets__disclosure-vertical[open] .facets__and-helptext {
  display: block;
}

.disclosure-has-popup[open] > .facets__summary::before {
  z-index: 2;
}

.facets__summary > span {
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.facets__summary .icon-caret {
  right: 0;
}

.facets__display {
  border-width: var(--popup-border-width);
  border-style: solid;
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-radius: var(--popup-corner-radius);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  background-color: rgb(var(--color-background));
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -1.2rem;
  width: 35rem;
  max-height: 55rem;
  overflow-y: auto;
}

.facets__header {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  position: sticky;
  top: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
}

.facets__header facet-remove {
  align-self: center;
}

.facets__list {
  padding: 0.5rem 2rem;
}

.facets-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
  padding: 2rem 2.4rem;
}

.facets-layout-list--swatch {
  --swatch-input--size: 2.4rem;
}

.facets-layout-grid.facets-layout-grid {
  gap: 1rem;
}

.facets-layout-grid.facets__list--vertical {
  padding: 1rem 0;
}

.facets__item {
  display: flex;
  align-items: center;
}

/* Hover/focus state */
.facets-layout-list .facets__label:hover .facet-checkbox__text-label,
.facets-layout-list input:focus ~ .facet-checkbox__text-label {
  text-decoration: underline;
}

.facets-layout-grid > * {
  align-items: flex-start;
}

.facets-layout-grid .facets__label {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
  font-size: 1.3rem;
}

/* Image filter specific styles */
.facets-layout-grid .facets__image-wrapper {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0.4rem;
}

.facets__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Default state */
.facets-layout-grid--image .facets__label {
  outline-style: solid;
  outline-color: transparent;
  transition-property: outline-color, outline-width, box-shadow;
  transition-duration: var(--duration-short);
  transition-timing-function: ease;
}

.facets-layout-grid--image .facet-checkbox__text {
  padding: 0.4rem;
}

/* Active state */
.facets-layout-grid--image .facets__label.active {
  outline-color: rgb(var(--color-foreground));
  outline-width: 0.1rem;
}

/* Hover state */
.facets-layout-grid--image .facets__label:hover {
  outline-color: rgba(var(--color-foreground), 0.4);
  outline-width: 0.2rem;
}

/* Focus visible */
.facets-layout-grid--image .facets__label:has(:focus-visible) {
  outline-color: rgba(var(--color-foreground), 0.5);
  outline-width: 0.2rem;
  box-shadow: 0px 0px 3px 1px rgba(var(--color-foreground), 0.25);
}

/* Focused state */
.facets-layout-grid--image .facets__label.active:has(:focus-visible) {
  outline-color: rgb(var(--color-foreground));
  outline-width: 0.1rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.7rem 0.1rem rgba(var(--color-foreground), 0.25);
}

/* Disabled state */
.facets-layout-grid--image .facets__label.disabled {
  /* Note: disabled gets its transparency set by a parent, so no need to set an alpha here. Also, we move the outline to the child when disabled */
  outline: none;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
  outline: 0.1rem solid rgb(var(--color-foreground));
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* 100% * square root of 2, this is not a magic number, it is math! */
  width: 141.4%;
  height: 0.1rem;
  background-color: rgb(var(--color-foreground));
  transform: rotate(-45deg);
  transform-origin: left;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  margin: 0;
}

.facets-layout-grid--image .facets__label.disabled .disabled-line line {
  stroke: rgb(var(--color-foreground));
  stroke-width: 1;
}

/* End of image filter specific styles */

.list-menu__item label,
.list-menu__item input[type='checkbox'] {
  cursor: pointer;
}

.facet-checkbox {
  padding: 1rem 2rem 1rem 0;
  flex-grow: 1;
  position: relative;
  font-size: 1.4rem;
  display: flex;
  word-break: break-word;
}

/* Hover, active, and focus states */
.facets__label:hover,
.facets__label.active,
.facets__label:has(:focus-visible) {
  color: rgba(var(--color-foreground), 1);
}

/* Disabled state */
.facets-layout .facets__label.disabled {
  pointer-events: none;
}

.facets-layout:not(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled {
  opacity: 0.4;
}

.facets-layout-grid--image .facets__label.disabled .facets__image-wrapper {
  opacity: 0.2;
}

:is(.facets-layout-list--swatch, .facets-layout-grid--image) .facets__label.disabled .facet-checkbox__text {
  opacity: 0.4;
}

/* End disabled state */

.facets-layout-list--text input[type='checkbox'] {
  position: absolute;
  opacity: 1;
  width: 1.6rem;
  height: 1.6rem;
  top: 0.7rem;
  left: -0.4rem;
  z-index: -1;
  appearance: none;
  -webkit-appearance: none;
}

.facets-layout-grid input[type='checkbox'],
.facets-layout-list--swatch input[type='checkbox'] {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.facets-layout-list--swatch .facets__label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.swatch-input-wrapper {
  display: flex;
}

.facet-checkbox > svg,
.facet-checkbox > .svg-wrapper {
  background-color: rgb(var(--color-background));
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.facet-checkbox .svg-wrapper {
  visibility: hidden;
  position: absolute;
  left: 0.3rem;
  z-index: 5;
  top: 1.4rem;
  width: 1.1rem;
  height: 0.7rem;
}

.facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
  visibility: visible;
}

@media screen and (forced-colors: active) {
  .facet-checkbox > svg {
    background-color: inherit;
    border: 0.1rem solid rgb(var(--color-background));
  }

  .facet-checkbox > input[type='checkbox']:checked ~ .svg-wrapper > .icon-checkmark {
    border: none;
  }
}

.facets__price {
  display: flex;
  padding: 2rem;
}

.facets__price .field + .field-currency {
  margin-left: 2rem;
}

.facets__price .field {
  align-items: center;
}

.facets__price .field-currency {
  align-self: center;
  margin-right: 0.6rem;
}

.facets__price .field__label {
  left: 1.5rem;
}

button.facets__button {
  min-height: 0;
  margin: 0 0 0 0.5rem;
  box-shadow: none;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.active-facets {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -0.5rem;
}

.active-facets__button {
  display: block;
  margin-right: 1.5rem;
  margin-top: 1.5rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  text-decoration: none;
}

span.active-facets__button-inner {
  color: rgb(var(--color-foreground));
  box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground));
  border-radius: 2.6rem;
  font-size: 1rem;
  min-height: 0;
  min-width: 0;
  padding: 0.25rem 1.25rem;
  display: flex;
  align-items: center;
}

span.active-facets__button-inner:before,
span.active-facets__button-inner:after {
  display: none;
}

.active-facets__button-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}

.active-facets__button-wrapper * {
  font-size: 1rem;
}

@media screen and (min-width: 990px) {
  .active-facets__button {
    margin-right: 1.5rem;
  }

  .active-facets__button-wrapper *,
  span.active-facets__button-inner {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 989px) {
  .active-facets {
    margin: 0 -1.2rem -1.2rem;
  }

  .active-facets__button,
  .active-facets__button-remove {
    margin: 0;
    padding: 1.2rem;
  }

  span.active-facets__button-inner {
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
  }

  .active-facets__button-wrapper {
    padding-top: 0;
    margin-left: 1.2rem;
  }
}

.active-facets__button:hover .active-facets__button-inner {
  box-shadow: 0 0 0 0.2rem rgb(var(--color-foreground));
}

.active-facets__button--light .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
}

.active-facets__button--light:hover .active-facets__button-inner {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.4);
}

a.active-facets__button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* outline styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  a.active-facets__button:focus-visible {
    outline: transparent solid 1px;
  }
}
a.active-facets__button.focused {
  outline: none;
  box-shadow: none;
}

a.active-facets__button:focus-visible .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
    0 0 0 0.4rem rgb(var(--color-foreground));
  outline: none;
}

a.active-facets__button.focused .active-facets__button-inner {
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
    0 0 0 0.4rem rgb(var(--color-foreground));
  outline: none;
}

.active-facets__button .svg-wrapper {
  align-self: center;
  flex-shrink: 0;
  margin-left: 0.6rem;
  margin-right: -0.2rem;
  pointer-events: none;
  width: 1.2rem;
}

@media all and (min-width: 990px) {
  .active-facets__button .svg-wrapper {
    margin-right: -0.4rem;
    margin-top: 0.1rem;
    width: 1.2rem;
  }
}

.active-facets facet-remove:only-child {
  display: none;
}

.facets-vertical .active-facets .active-facets-vertical-filter:only-child > facet-remove {
  display: none;
}

.facets-vertical .active-facets-vertical-filter {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.facets-vertical .active-facets-vertical-filter .active-facets__button-wrapper {
  padding-top: 0;
  display: flex;
  align-items: flex-start;
}

.facets-vertical .active-facets__button {
  margin-top: 0;
}

.active-facets__button.disabled,
.mobile-facets__clear.disabled {
  pointer-events: none;
}

.mobile-facets__clear-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

.mobile-facets {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(var(--color-foreground), 0.5);
  pointer-events: none;
}

.mobile-facets__disclosure {
  display: flex;
}

.mobile-facets__wrapper {
  margin-left: 0;
  display: flex;
}

.mobile-facets__wrapper .disclosure-has-popup[open] > summary::before {
  height: 100vh;
  z-index: 3;
}

.mobile-facets__inner {
  background-color: rgb(var(--color-background));
  width: calc(100% - 5rem);
  margin-left: auto;
  height: 100%;
  overflow-y: auto;
  pointer-events: all;
  transition: transform var(--duration-default) ease;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  border-style: solid;
  border-width: 0 0 0 var(--drawer-border-width);
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

.menu-opening .mobile-facets__inner {
  transform: translateX(0);
}

.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
  transform: translateX(105vw);
}

.mobile-facets__header {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding: 1rem 2.5rem;
  text-align: center;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 2;
}

.mobile-facets__header-inner {
  flex-grow: 1;
  position: relative;
}

.mobile-facets__info {
  padding: 0 2.6rem;
}

.mobile-facets__heading {
  font-size: calc(var(--font-heading-scale) * 1.4rem);
  margin: 0;
}

.mobile-facets__count {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.3rem;
  margin: 0;
  flex-grow: 1;
}

.mobile-facets__open-wrapper {
  display: inline-block;
}

.mobile-facets__open {
  text-align: left;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  color: rgba(var(--color-link), var(--alpha-link));
}

.mobile-facets__open:hover {
  color: rgb(var(--color-link));
}

.mobile-facets__open:hover line,
.mobile-facets__open:hover circle {
  stroke: rgb(var(--color-link));
}

.mobile-facets__open-label {
  transition: text-decoration var(--duration-short) ease;
}

.mobile-facets__open:hover .mobile-facets__open-label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.mobile-facets__open > * + * {
  margin-left: 1rem;
}

.mobile-facets__open .svg-wrapper {
  width: 2rem;
}

.mobile-facets__open line,
.mobile-facets__open circle {
  stroke: rgba(var(--color-link), var(--alpha-link));
}

.mobile-facets__close {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0.7rem;
  right: 1rem;
  width: 4.4rem;
  height: 4.4rem;
  z-index: 101;
  opacity: 0;
  transition: opacity var(--duration-short) ease;
}

.mobile-facets__close .svg-wrapper {
  width: 2.2rem;
}

details.menu-opening .mobile-facets__close {
  display: flex;
  opacity: 1;
}

details.menu-opening .mobile-facets__close .svg-wrapper {
  margin: 0;
}

.mobile-facets__close-button {
  align-items: center;
  background-color: transparent;
  font-size: 1.4rem;
  font: inherit;
  letter-spacing: inherit;
  margin-top: 1.5rem;
  padding: 1.2rem 2.6rem;
  text-decoration: none;

  display: grid;
  grid-template-columns: min-content 1fr;
  text-align: start;
}

.mobile-facets__close-button > .facets__and-helptext {
  grid-column-start: 2;
}

.mobile-facets__close-button .icon-arrow {
  transform: rotate(180deg);
  margin-right: 1rem;
}

.mobile-facets__main {
  padding: 2.7rem 0 0;
  position: relative;
  z-index: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-facets__details[open] .icon-caret {
  transform: rotate(180deg);
}

.mobile-facets__highlight {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
  background-color: rgba(var(--color-foreground), 0.04);
  opacity: 0;
  visibility: hidden;
}

.mobile-facets__checkbox:checked + .mobile-facets__highlight {
  opacity: 1;
  visibility: visible;
}

.mobile-facets__summary {
  padding: 1.3rem 2.5rem;
}

.mobile-facets__summary .svg-wrapper {
  margin-left: auto;
}

.mobile-facets__summary > div {
  display: flex;
  align-items: center;
}

.js .mobile-facets__submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 3;
  transform: translateX(100%);
  visibility: hidden;
  display: flex;
  flex-direction: column;
}

.js details[open] > .mobile-facets__submenu {
  transition: transform 0.4s cubic-bezier(0.29, 0.63, 0.44, 1), visibility 0.4s cubic-bezier(0.29, 0.63, 0.44, 1);
}

.js details[open].menu-opening > .mobile-facets__submenu {
  transform: translateX(0);
  visibility: visible;
}

.js .menu-drawer__submenu .mobile-facets__submenu {
  overflow-y: auto;
}

.js .mobile-facets .submenu-open {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

.mobile-facets__item {
  position: relative;
}

input.mobile-facets__checkbox {
  border: 0;
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  left: 2.1rem;
  top: 1.2rem;
  z-index: 0;
  appearance: none;
  -webkit-appearance: none;
}

.mobile-facets__label {
  padding: 1.5rem 2rem 1.5rem 2.5rem;
  width: 100%;
  transition: background-color 0.2s ease;
  word-break: break-word;
  display: flex;
}

.mobile-facets__label > svg {
  background-color: rgb(var(--color-background));
  position: relative;
  z-index: 2;
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.mobile-facets__label .icon-checkmark {
  position: absolute;
  top: 1.9rem;
  left: 2.8rem;
  visibility: hidden;
  width: 11px;
  height: 9px;
}

.mobile-facets__label > input[type='checkbox']:checked ~ .icon-checkmark {
  visibility: visible;
}

.mobile-facets__arrow,
.mobile-facets__summary .icon-caret {
  margin-left: auto;
  display: block;
}

.mobile-facets__footer {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding: 2rem;
  bottom: 0;
  position: sticky;
  display: flex;
  z-index: 2;
  margin-top: auto;
  background-color: rgb(var(--color-background));
  background: var(--gradient-background);
}

.mobile-facets__footer > * + * {
  margin-left: 1rem;
}

.mobile-facets__footer > * {
  width: 50%;
}

.mobile-facets__sort {
  display: flex;
  justify-content: space-between;
}

.mobile-facets__sort label {
  flex-shrink: 0;
}

.mobile-facets__sort .select {
  width: auto;
}

.mobile-facets__sort .select .icon-caret {
  right: 0;
}

.mobile-facets__sort .select__select {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 1.5rem;
}

.product-count {
  align-self: center;
  position: relative;
  text-align: right;
}

.product-count__text {
  font-size: 1.4rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  margin: 0;
}

#ProductCountDesktop.loading,
#ProductCount.loading {
  visibility: hidden;
}

.product-count .loading__spinner,
.product-count-vertical .loading__spinner {
  position: absolute;
  padding-top: 0.6rem;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.8rem;
}

@media screen and (min-width: 750px) {
  .facets-vertical {
    display: flex;
  }

  .facets-wrap-vertical {
    border: none;
    padding-left: 0;
  }

  .facets__form-vertical {
    display: flex;
    flex-direction: column;
    width: 26rem;
  }

  .facets__disclosure-vertical {
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.1);
    margin-right: 0;
  }

  .facets-vertical .facets__summary {
    padding-top: 1.5rem;
    margin-bottom: 0;
    padding-bottom: 1.5rem;
  }

  .facets__heading--vertical {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
  }

  .facets__header-vertical {
    padding: 1.5rem 2rem 1.5rem 0;
    font-size: 1.4rem;
  }

  .facets__display-vertical {
    padding-bottom: 1.5rem;
  }

  .facets-vertical .facets-wrapper {
    padding-right: 3rem;
  }

  .facets-vertical .facets-wrapper--no-filters {
    display: none;
  }

  .facets-vertical .product-grid-container {
    width: 100%;
  }

  .facets-vertical-form {
    display: flex;
    justify-content: flex-end;
  }

  .product-count-vertical {
    margin-left: 3.5rem;
    position: relative;
  }

  .facets-vertical .active-facets__button-wrapper {
    margin-bottom: 2rem;
  }

  .facets-vertical .facets__price {
    padding: 0.5rem 0.5rem 0.5rem 0;
  }

  .facets-vertical .facets__price .field:last-of-type {
    margin-left: 1rem;
  }

  .facets-vertical .active-facets__button {
    margin-bottom: 1.5rem;
  }

  .facets-vertical .facet-checkbox input[type='checkbox'] {
    z-index: 0;
  }

  .facets-vertical .active-facets facet-remove:last-of-type {
    margin-bottom: 1rem;
  }

  .facets-vertical .active-facets {
    margin: 0;
    align-items: flex-start;
  }

  .facets__disclosure-vertical[open] .facets__summary .icon-caret {
    transform: rotate(180deg);
  }

  .facets-container-drawer {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 0;
  }

  .facets-container-drawer .mobile-facets__wrapper {
    margin-right: 2rem;
    flex-grow: 1;
  }

  .facets-container-drawer .product-count {
    margin: 0 0 0.5rem 3.5rem;
  }

  .facets-container-drawer .facets-pill {
    width: 100%;
  }

  .facets-container-drawer .facets__form {
    display: block;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .facets-vertical .active-facets__button {
    padding: 1rem;
    margin-bottom: 0;
    margin-left: -0.5rem;
  }

  .facets-vertical .active-facets__button-remove {
    padding: 0 1rem 1rem;
  }
}

/* --- /theme/component-image-with-text.css --- */
.image-with-text .grid {
  margin-bottom: 0;
}

.image-with-text .grid__item {
  position: relative;
}

@media screen and (min-width: 750px) {
  .image-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.image-with-text__media {
  min-height: 100%;
  overflow: visible;
}

.image-with-text__media--small {
  height: 19.4rem;
}

.image-with-text__media--medium {
  height: 29.6rem;
}

.image-with-text__media--large {
  height: 43.5rem;
}

@media screen and (min-width: 750px) {
  .image-with-text__media--small {
    height: 31.4rem;
  }

  .image-with-text__media--medium {
    height: 46rem;
  }

  .image-with-text__media--large {
    height: 69.5rem;
  }
}

.image-with-text__media--placeholder {
  position: relative;
  overflow: hidden;
}

.image-with-text__media--placeholder:after {
  content: '';
  position: absolute;
  background: rgba(var(--color-foreground), 0.04);
}

.image-with-text__media--placeholder.image-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .image-with-text__media--placeholder.image-with-text__media--adapt {
    height: 30rem;
  }
}

.image-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.image-with-text__media--placeholder:is(.animate--ambient, .animate--zoom-in) > .svg-wrapper {
  top: 0;
  left: 0;
  transform: translate(0);
}

.image-with-text__content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-self: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
  position: relative;
  z-index: 1;
}

.image-with-text .grid__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item:after {
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
}

.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item:after {
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
}

.image-with-text .image-with-text__media-item > * {
  border-radius: var(--media-radius);
  overflow: hidden;
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
}

.image-with-text .global-media-settings {
  overflow: hidden !important;
}

.image-with-text .image-with-text__text-item > * {
  border-radius: var(--text-boxes-radius);
  overflow: hidden;
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
}

.image-with-text:not(.image-with-text--overlap) .image-with-text__media-item > *,
.image-with-text:not(.image-with-text--overlap) .image-with-text__text-item > * {
  box-shadow: none;
}

@media screen and (max-width: 749px) {
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__media,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media img,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__media .placeholder-svg {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__text-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .image-with-text.collapse-borders:not(.image-with-text--overlap) .image-with-text__content {
    border-top: 0;
  }
}

.image-with-text__content--mobile-right > * {
  align-self: flex-end;
  text-align: right;
}

.image-with-text__content--mobile-center > * {
  align-self: center;
  text-align: center;
}

.image-with-text--overlap .image-with-text__content {
  width: 90%;
  margin: -3rem auto 0;
}

@media screen and (min-width: 750px) {
  .image-with-text__grid--reverse .image-with-text__content {
    margin-left: auto;
  }

  .image-with-text__content--bottom {
    justify-content: flex-end;
    align-self: flex-end;
  }

  .image-with-text__content--top {
    justify-content: flex-start;
    align-self: flex-start;
  }

  .image-with-text__content--desktop-right > * {
    align-self: flex-end;
    text-align: right;
  }

  .image-with-text__content--desktop-left > * {
    align-self: flex-start;
    text-align: left;
  }

  .image-with-text__content--desktop-center > * {
    align-self: center;
    text-align: center;
  }

  .image-with-text--overlap .image-with-text__text-item {
    display: flex;
    padding: 3rem 0;
  }

  .image-with-text--overlap .image-with-text__content {
    height: auto;
    width: calc(100% + 4rem);
    min-width: calc(100% + 4rem);
    margin-top: 0;
    margin-left: -4rem;
  }

  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__content {
    margin-left: 0;
    margin-right: -4rem;
  }

  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__text-item {
    justify-content: flex-end;
  }

  .image-with-text--overlap .image-with-text__media-item--top {
    align-self: flex-start;
  }

  .image-with-text--overlap .image-with-text__media-item--middle {
    align-self: center;
  }

  .image-with-text--overlap .image-with-text__media-item--bottom {
    align-self: flex-end;
  }

  .image-with-text__media-item--small,
  .image-with-text__media-item--large + .image-with-text__text-item {
    flex-grow: 0;
  }

  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media
    img,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__media
    .placeholder-svg,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__text-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__content,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__content:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__text-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__content,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__content:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media-item:after,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media
    img,
  .image-with-text.collapse-corners:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__media
    .placeholder-svg {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .image-with-text.collapse-borders:not(.image-with-text--overlap)
    .grid:not(.image-with-text__grid--reverse)
    .image-with-text__content {
    border-left: 0;
  }

  .image-with-text.collapse-borders:not(.image-with-text--overlap)
    .image-with-text__grid--reverse
    .image-with-text__content {
    border-right: 0;
  }
}

.image-with-text:not(.collapse-corners, .image-with-text--overlap) .image-with-text__media-item {
  z-index: 2;
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.image-with-text.image-with-text--overlap .backround-transparent,
.image-with-text:not(.image-with-text--overlap) .background-transparent {
  background: transparent;
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.image-with-text .gradient {
  transform: perspective(0);
}

.image-with-text__content {
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  word-break: break-word;
}

@media screen and (min-width: 990px) {
  .image-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.image-with-text__content > * + * {
  margin-top: 2rem;
}

.image-with-text__content > .image-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.image-with-text__content > :first-child:is(.image-with-text__heading),
.image-with-text__text--caption + .image-with-text__heading,
.image-with-text__text--caption:first-child {
  margin-top: 0;
}

.image-with-text__content :last-child:is(.image-with-text__heading),
.image-with-text__text--caption {
  margin-bottom: 0;
}

.image-with-text__content .button + .image-with-text__text {
  margin-top: 2rem;
}

.image-with-text__content .image-with-text__text + .button {
  margin-top: 3rem;
}

.image-with-text__heading {
  margin-bottom: 0;
}

.image-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

@media screen and (max-width: 749px) {
  .collapse-padding .image-with-text__grid .image-with-text__content {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 750px) {
  .collapse-padding
    .image-with-text__grid:not(.image-with-text__grid--reverse)
    .image-with-text__content:not(.image-with-text__content--desktop-center) {
    padding-right: 0;
  }

  .collapse-padding
    .image-with-text__grid--reverse
    .image-with-text__content:not(.image-with-text__content--desktop-center) {
    padding-left: 0;
  }
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .image-with-text .grid {
    margin-left: 0;
  }
}

/*
  Multirow
  note: consider removing from this stylesheet if multirow-specific styles increase signficantly
*/
.multirow__inner {
  display: flex;
  flex-direction: column;
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .multirow__inner {
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

/* --- /theme/component-list-menu.css --- */
.list-menu--right {
  right: 0;
}

.list-menu--disclosure {
  position: absolute;
  min-width: 100%;
  width: 20rem;
  border: 1px solid rgba(var(--color-foreground), 0.2);
}

.list-menu--disclosure:focus {
  outline: none;
}

.list-menu__item--active {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.list-menu__item--active:hover {
  text-decoration-thickness: 0.2rem;
}

.list-menu--disclosure.localization-selector {
  max-height: 18rem;
  overflow: auto;
  width: 10rem;
  padding: 0.5rem;
}

/* --- /theme/component-list-payment.css --- */
.list-payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -0.5rem 0;
  padding-top: 1rem;
  padding-left: 0;
}

@media screen and (min-width: 750px) {
  .list-payment {
    justify-content: flex-end;
    margin: -0.5rem;
    padding-top: 0;
  }
}

.list-payment__item {
  align-items: center;
  display: flex;
  padding: 0.5rem;
}

/* --- /theme/component-list-social.css --- */
.list-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media only screen and (max-width: 749px) {
  .list-social {
    justify-content: center;
  }
}

.list-social__item .icon {
  height: 2.2rem;
  width: 2.2rem;
}

.list-social__link {
  align-items: center;
  display: flex;
  padding: 1.1rem;
  color: rgb(var(--color-foreground));
}

.utility-bar .list-social__link {
  padding: 0 0.8rem;
  height: 3.8rem;
}

.list-social__link:hover .icon {
  transform: scale(1.07);
}

/* --- /theme/component-modal-video.css --- */
.modal-video {
  background: rgba(var(--color-foreground), 0.2);
  box-sizing: border-box;
  height: 100%;
  left: 0;
  margin: 0 auto;
  opacity: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: -1;
}

.modal-video[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}

.modal-video__content {
  background-color: rgb(var(--color-background));
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  width: 100%;
}

.modal-video__toggle {
  align-items: center;
  background-color: rgb(var(--color-background));
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  color: rgba(var(--color-foreground), 0.55);
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0 0 0 auto;
  padding: 1.2rem;
  position: fixed;
  right: 0.5rem;
  top: 2rem;
  width: 4rem;
  z-index: 2;
}

@media screen and (min-width: 750px) {
  .modal-video__toggle {
    right: 4.8rem;
    top: 3.5rem;
  }
}

@media screen and (min-width: 990px) {
  .modal-video__toggle {
    right: 4.3rem;
    top: 3rem;
  }
}

.modal-video__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

.modal-video__content-info {
  height: calc(100% - 6rem);
  margin: 0 auto;
  padding-top: 8rem;
  width: calc(100% - 1rem);
}

@media screen and (min-width: 750px) {
  .modal-video__content-info {
    height: calc(100% - 7.5rem);
    padding-top: 9.5rem;
    width: calc(100% - 9.6rem);
  }
}

@media screen and (min-width: 990px) {
  .modal-video__content-info {
    height: calc(100% - 7rem);
    padding-top: 9rem;
    width: calc(100% - 8.6rem);
  }
}

.modal-video__video,
.modal-video__video iframe {
  height: 100%;
  width: 100%;
}

.modal-video__video iframe {
  position: static;
  border: 0;
}

/* --- /theme/component-model-viewer-ui.css --- */
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
  background: rgb(var(--color-background));
  border-color: rgba(var(--color-foreground), 0.04);
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
  color: rgba(var(--color-foreground), 0.75);
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
  color: rgba(var(--color-foreground), 0.55);
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active,
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus {
  color: rgba(var(--color-foreground), 0.55);
  background: rgba(var(--color-foreground), 0.04);
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
  border-color: rgba(var(--color-foreground), 0.04);
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
  border-radius: 50%;
  color: rgb(var(--color-foreground));
  background: rgb(var(--color-background));
  border-color: rgba(var(--color-foreground), 0.1);
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--duration-short) ease, color var(--duration-short) ease;
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon {
  width: 4.8rem;
  height: 4.8rem;
  margin-top: 0.3rem;
}

.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover,
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
  transform: translate(-50%, -50%) scale(1.1);
}

/* --- /theme/component-pagination.css --- */
.svg-wrapper-grid{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
}
.pagination-wrapper {
  margin-top: 4rem;
  color: #000;
  font-family: "Gowun Batang", sans-serif;
  font-weight: 400;
}

.pagination__item-arrow {
background-color: #F2FF00;
    background-color: transparent;
    height: 45px;
    width: 45px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    border: .5px solid #fff;
    transition: .3s ease;
    
}
.product_count{
  display: none;
}
.pagination__item-arrow:hover,
.pagination__item-arrow:active {
  background-color: #F2FF00;
  border-color:#F2FF00;
}
.pagination__item-arrow:hover svg path,
.pagination__item-arrow:active svg path {
    fill:#000000;
}

.pagination__item[aria-current="page"] {
    background-color: #F2FF00;
    color: #000000;
    opacity: 1;
    border-radius: 20px;
}

.pagination__item[aria-current="page"]::after {
  display: none;
}

@media screen and (min-width: 990px) {
  .pagination-wrapper {
    margin-top: 5rem;
  }
}

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

.pagination__list>li {
  flex: 1 0 4.4rem;
  max-width: 4.4rem;
}

.pagination__list>li:not(:last-child) {
  margin-right: 1rem;
}

.pagination__item {
  color: rgb(var(--color-foreground));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 4.4rem;
  width: 100%;
  padding: 0;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 20px;
}

a.pagination__item:hover::after {
  height: 0.1rem;
}

.pagination__item .icon-caret {
  height: 0.6rem;
}

.pagination__item--current::after {
  height: 0.1rem;
}



.pagination__item--next .icon {
  margin-left: -0.2rem;
  transform: rotate(90deg);
}

.pagination__item--next:hover .icon {
  transform: rotate(90deg) scale(1.07);
}

.pagination__item--prev .icon {
  margin-right: -0.2rem;
  transform: rotate(-90deg);
}

.pagination__item--prev:hover .icon {
  transform: rotate(-90deg) scale(1.07);
}

.pagination__item-arrow:hover::after {
  display: none;
}

.load_btn {
  display: none;
}

@media screen and (max-width:750px) {
  .pagination {
    display: none;
  }
.product_count{
  display: block;
  color: #000000;
}
  .load_btn {
        display: block;
        font-family: "Gowun Batang", sans-serif;
        font-weight: 400;
        font-style: normal;
        border: 0.5px solid #000000;
        background-color: #000000;
        color: #FFFFFF;
        border-radius: 13px;
        width: 80%;
        font-size: 20px;
        text-transform: uppercase;
        padding: 7px;
        cursor: pointer;
        margin: 15px auto 0;
        transition: all .3s;
  }

  .load_btn:hover,
  .load_btn:active {
background-color: transparent;
        color: #000000;
        border: 1px solid #000000;
  }

 .pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px !important;
  }
}
@media screen and (max-width:860px) {
  .pagination__item {
    color: #000000;
    
}
  .pagination__item-arrow{
    border: .5px solid #000000;
  }
  .svg-wrapper-grid path{
    fill: #000000;
  }
}
/* --- /theme/component-pickup-availability.css --- */
pickup-availability {
  display: block;
}

pickup-availability[available] {
  min-height: 8rem;
}

.pickup-availability-preview {
  align-items: flex-start;
  display: flex;
  gap: 0.2rem;
  padding: 1rem 2rem 0 0;
}

.pickup-availability-preview .icon {
  flex-shrink: 0;
  height: 1.8rem;
}

.pickup-availability-preview .icon-unavailable {
  height: 1.6rem;
  margin-top: 0.1rem;
}

.pickup-availability-button {
  background-color: transparent;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.06rem;
  padding: 0 0 0.2rem;
  text-align: left;
  text-decoration: underline;
}

.pickup-availability-button:hover {
  color: rgb(var(--color-foreground));
}

.pickup-availability-info * {
  margin: 0 0 0.6rem;
}

pickup-availability-drawer {
  background-color: rgb(var(--color-background));
  height: 100%;
  opacity: 0;
  overflow-y: auto;
  padding: 2rem;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4;
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
  transform: translateX(100%);
  width: 100%;
  border-width: 0 0 0 var(--drawer-border-width);
  border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  border-style: solid;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

pickup-availability-drawer[open] {
  transform: translateX(0);
  opacity: 1;
}

@media screen and (min-width: 750px) {
  pickup-availability-drawer {
    transform: translateX(100%);
    width: 37.5rem;
  }

  pickup-availability-drawer[open] {
    opacity: 1;
    transform: translateX(0);
    animation: animateDrawerOpen var(--duration-default) ease;
  }
}

.pickup-availability-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.pickup-availability-drawer-title {
  margin: 0.5rem 0 0;
}

.pickup-availability-header .icon {
  width: 2rem;
}

.pickup-availability-drawer-button {
  background-color: transparent;
  border: none;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  display: block;
  height: 4.4rem;
  padding: 1.2rem;
  width: 4.4rem;
}

.pickup-availability-drawer-button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.pickup-availability-variant {
  font-size: 1.3rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  margin: 0 0 1.2rem;
  text-transform: capitalize;
}

.pickup-availability-variant > * + strong {
  margin-left: 1rem;
}

.pickup-availability-list__item {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding: 2rem 0;
}

.pickup-availability-list__item:first-child {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.pickup-availability-list__item > * {
  margin: 0;
}

.pickup-availability-list__item > * + * {
  margin-top: 1rem;
}

.pickup-availability-address {
  font-style: normal;
  font-size: 1.2rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
}

.pickup-availability-address p {
  margin: 0;
}

@keyframes animateDrawerOpen {
  @media screen and (max-width: 749px) {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @media screen and (min-width: 750px) {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* --- /theme/component-product-model.css --- */
.product__xr-button {
  background: rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));
  margin: 1rem auto;
  box-shadow: none;
  display: flex;
}

.button.product__xr-button:hover {
  box-shadow: none;
}

.product__xr-button[data-shopify-xr-hidden] {
  visibility: hidden;
}

.shopify-design-mode .product__xr-button[data-shopify-xr-hidden] {
  display: none;
}

@media screen and (max-width: 749px) {
  slider-component .product__xr-button {
    display: none;
  }

  .active .product__xr-button:not([data-shopify-xr-hidden]) {
    display: block;
  }
}

@media screen and (min-width: 750px) {
  slider-component + .button.product__xr-button {
    display: none;
  }

  .product__xr-button[data-shopify-xr-hidden] {
    display: none;
  }
}

.product__xr-button .icon {
  width: 1.4rem;
  margin-right: 1rem;
}

/* --- /theme/component-product-variant-picker.css --- */
variant-selects {
  display: block;
}

.product--no-media .product-form__input--pill,
.product--no-media .product-form__input--swatch,
.product--no-media .product-form__input--dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product--no-media .product-form__input.product-form__input--pill,
.product--no-media .product-form__input.product-form__input--swatch {
  flex-wrap: wrap;
  margin: 0 auto 1.2rem auto;
}

.product--no-media .product-form__input--dropdown {
  flex-direction: column;
  max-width: 100%;
}

:is(.product-form__input--pill, .product-form__input--swatch) .form__label {
  margin-bottom: 0.2rem;
}

.product-form__input input[type='radio'] {
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

.product-form__input input[type='radio']:not(.disabled):not(.visually-disabled) + label > .label-unavailable {
  display: none;
}

.product-form__input--dropdown {
  --swatch-input--size: 2rem;
  margin-bottom: 1.6rem;
}

.product-form__input--dropdown .dropdown-swatch + select {
  padding-left: calc(2.4rem + var(--swatch-input--size));
}

.product-form__input--dropdown .dropdown-swatch {
  position: absolute;
  left: 1.6rem;
  top: calc(50% - var(--swatch-input--size) / 2);
  width: var(--swatch-input--size);
  height: var(--swatch-input--size);
  z-index: 1;
}

/* Custom styles for Pill display type */
.product-form__input--pill input[type='radio'] + label {
  border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}

.product-form__input--pill input[type='radio'] + label:before {
  content: '';
  position: absolute;
  top: calc(var(--variant-pills-border-width) * -1);
  right: calc(var(--variant-pills-border-width) * -1);
  bottom: calc(var(--variant-pills-border-width) * -1);
  left: calc(var(--variant-pills-border-width) * -1);
  z-index: -1;
  border-radius: var(--variant-pills-radius);
  box-shadow: var(--variant-pills-shadow-horizontal-offset) var(--variant-pills-shadow-vertical-offset)
    var(--variant-pills-shadow-blur-radius) rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
}

.product-form__input--pill input[type='radio'] + label:hover {
  border-color: rgb(var(--color-foreground));
}

.product-form__input--pill input[type='radio']:checked + label {
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

@media screen and (forced-colors: active) {
  .product-form__input--pill input[type='radio']:checked + label {
    text-decoration: underline;
  }

  .product-form__input--pill input[type='radio']:focus-visible + label {
    outline: transparent solid 1px;
    outline-offset: 2px;
  }
}

.product-form__input--pill input[type='radio']:checked + label::selection {
  background-color: rgba(var(--color-background), 0.3);
}

.product-form__input--pill input[type='radio']:disabled + label,
.product-form__input--pill input[type='radio'].disabled + label {
  border-color: rgba(var(--color-foreground), 0.1);
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: line-through;
}

.product-form__input--pill input[type='radio'].disabled:checked + label,
.product-form__input--pill input[type='radio']:disabled:checked + label {
  color: rgba(var(--color-background), 0.6);
}
.product-form__input--pill input[type='radio']:focus-visible + label {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

/* Fallback */
.product-form__input--pill input[type='radio'].focused + label {
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
}

/* Custom styles for Swatch display type */
.product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
}

.product-form__input--swatch .swatch-input__input + .swatch-input__label {
  --swatch-input--size: 3.6rem;

  margin: 0.7rem 1.2rem 0.2rem 0;
}

@media screen and (min-width: 750px) {
  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    --swatch-input--size: 2.8rem;
  }
}
/* End custom styles for Swatch display type */

/* --- /theme/component-rating.css --- */
.product--no-media .rating-wrapper {
  text-align: center;
}

.rating {
  display: inline-block;
  margin: 0;
}

.product .rating-star {
  --letter-spacing: 0.8;
  --font-size: 1.7;
}

.card-wrapper .rating-star {
  --letter-spacing: 0.7;
  --font-size: 1.4;
}

.rating-star {
  --color-rating-star: rgb(var(--color-foreground));
  --percent: calc(
    (
        var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--font-size) /
          (var(--rating-max) * (var(--letter-spacing) + var(--font-size)))
      ) * 100%
  );
  letter-spacing: calc(var(--letter-spacing) * 1rem);
  font-size: calc(var(--font-size) * 1rem);
  line-height: 1;
  display: inline-block;
  font-family: Times;
  margin: 0;
}

.rating-star::before {
  content: '★★★★★';
  background: linear-gradient(
    90deg,
    var(--color-rating-star) var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rating-text {
  display: none;
}

.rating-count {
  display: inline-block;
  margin: 0;
}

@media (forced-colors: active) {
  .rating {
    display: none;
  }

  .rating-text {
    display: block;
  }
}

/* --- /theme/component-search.css --- */
.search__input.field__input {
  padding-right: 9.8rem;
}

.search__button {
  right: var(--inputs-border-width);
  top: var(--inputs-border-width);
}

.reset__button {
  right: calc(var(--inputs-border-width) + 4.4rem);
  top: var(--inputs-border-width);
}

.reset__button:not(:focus-visible)::after {
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
  display: block;
  height: calc(100% - 1.6rem);
  content: '';
  position: absolute;
  right: 0;
}

.reset__button:not(:focus)::after {
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
  display: block;
  height: calc(100% - 1.8rem);
  content: '';
  position: absolute;
  right: 0;
}

.search__button:focus-visible,
.reset__button:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 4;
}

.search__button:focus,
.reset__button:focus {
  background-color: rgb(var(--color-background));
  z-index: 4;
}

.search__button:not(:focus-visible):not(.focused),
.reset__button:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.search__button:hover .icon,
.reset__button:hover .icon {
  transform: scale(1.07);
}

.search__button .icon {
  height: 1.8rem;
  width: 1.8rem;
}

.reset__button .icon.icon-close {
  height: 1.8rem;
  width: 1.8rem;
  stroke-width: 0.1rem;
}

/* Remove extra spacing for search inputs in Safari */
input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.template-search__results {
  position: relative;
}

/* --- /theme/component-show-more.css --- */
.button-show-more {
  padding-left: 0;
  justify-content: flex-start;
  padding-bottom: 1.1rem;
}

.button-show-more,
.button-show-less {
  margin-top: 1.5rem;
}

/* --- /theme/component-slider.css --- */
.slider{
  padding: 0 !important;
}
slider-component {
  --desktop-margin-left-first-item: max(
    5rem,
    calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
  );
  position: relative;
  display: block;
}

slider-component.slider-component-full-width {
  --desktop-margin-left-first-item: 1.5rem;
}

@media screen and (max-width: 749px) {
  slider-component.page-width {
    padding: 0 1.5rem;
  }
}

@media screen and (min-width: 749px) and (max-width: 990px) {
  slider-component.page-width {
    padding: 0 5rem;
  }
}

.slider__slide {
  --focus-outline-padding: 0.5rem;
  --shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
  --shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
  scroll-snap-align: start;
  flex-shrink: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 860px) {
  .slider.slider--mobile {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--mobile:after {
    content: '';
    width: 0;
    padding-left: 1.5rem;
  }

  .slider.slider--mobile .slider__slide {
    margin-bottom: 0;
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }

  .slider.slider--mobile.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media screen and (min-width: 860px) {
  .slider.slider--tablet-up {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .slider.slider--tablet-up .slider__slide {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 989px) {
  .slider.slider--tablet {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .slider--tablet:after {
    content: '';
    width: 0;
    padding-left: 1.5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }

  .slider.slider--tablet .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }

  .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
  }
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
    max-width: 49%;
  }
}

  .slider.slider--tablet.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

.slider--everywhere {
  position: relative;
  flex-wrap: inherit;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.slider.slider--everywhere .slider__slide {
  margin-bottom: 0;
  scroll-snap-align: center;
}

@media screen and (min-width: 990px) {
    .slider--desktop:after {
    content: '';
    width: 0;
    padding-left: 5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }
  .slider-component-desktop.page-width {
    max-width: none;
  }

  .slider--desktop {
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    scroll-padding-left: var(--desktop-margin-left-first-item);
  }

  /* Fix to show some space at the end of our sliders in all browsers */
/*  .slider--desktop:after {
    content: '';
    width: 0;
    padding-left: 5rem;
    margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
  }
*/
  .slider.slider--desktop .slider__slide {
    margin-bottom: 0;
    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
  }


  .slider-component-full-width .slider--desktop {
    scroll-padding-left: 1.5rem;
  }


  /* Fix to show some space at the end of our sliders in all browsers */
  .slider-component-full-width .slider--desktop:after {
    padding-left: 1.5rem;
  }

  .slider--desktop.grid--5-col-desktop .grid__item {
    width: calc(100% / 5 - var(--grid-desktop-horizontal-spacing) * 2);
  }

  .slider--desktop.grid--4-col-desktop .grid__item {
    width: calc(100%  / 4 - var(--grid-desktop-horizontal-spacing) * 3);
  }

  .slider--desktop.grid--3-col-desktop .grid__item {
    width: calc(100%  / 3 - var(--grid-desktop-horizontal-spacing) * 4);
  }
  [class*="_video"] .slider--desktop.grid--3-col-desktop .grid__item {
    width: 100%;
  }

  .slider--desktop.grid--2-col-desktop .grid__item {
    width: calc(100%  / 2 - var(--grid-desktop-horizontal-spacing) * 5);
  }

  .slider--desktop.grid--1-col-desktop .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) * 9);
  }

  .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
    padding-bottom: var(--focus-outline-padding);
    padding-left: 5px;
    padding-right: 5px;
  }

  .slider.slider--desktop.contains-content-container .slider__slide {
    --focus-outline-padding: 0rem;
  }
}

@media (prefers-reduced-motion) {
  .slider {
    scroll-behavior: auto;
  }
}

/* Scrollbar */

.slider {
  scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  height: 0.4rem;
  width: 0.4rem;
  display: none;
}

.slider::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground));
  border-radius: 0.4rem;
  border: 0;
}

.slider::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0.4rem;
}

.slider-counter {
  display: none;
  justify-content: center;
  min-width: 4.4rem;
}

@media screen and (min-width: 750px) {
  .slider-counter--dots {
    margin: 0 1.2rem;
  }
}

.slider-counter__link {
  padding: 1rem;
}

@media screen and (max-width: 749px) {
  .slider-counter__link {
    padding: 0.7rem;
  }
}

.slider-counter__link--dots .dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.1rem solid rgba(var(--color-foreground), 0.5);
  padding: 0;
  display: block;
}

.slider-counter__link--active.slider-counter__link--dots .dot {
  background-color: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: CanvasText;
  }
}

.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
  border-color: rgb(var(--color-foreground));
}

.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
  transition: transform 0.2s ease-in-out;
}

.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover {
  transform: scale(1.1);
}

.slider-counter__link--numbers {
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: none;
}

.slider-counter__link--numbers:hover {
  color: rgb(var(--color-foreground));
}

.slider-counter__link--active.slider-counter__link--numbers {
  text-decoration: underline;
  color: rgb(var(--color-foreground));
}

.slider-buttons {
  display: flex;
  align-items: center;
  gap:10px;
  justify-content: space-between;
}
@media(min-width:860px){
.slider-buttons-padding{
  padding: 0 80px 0 80px;
}
}
.slider-buttons_wrapper{
    display: flex;
  align-items: center;
  gap:10px;
}


@media screen and (max-width: 860px) {
  
.slider-buttons_wrapper{
}
  .progress-bar{
    width: 55% !important;
    border: 1px solid #000000 !important;
  }
  .progress-bar-fill{
    background-color: #000000;
  }
.slider-buttons {
  display: flex;
  align-items: center;
  gap:10px;
  justify-content: space-between;
}
}

.slider-button {
  color: rgba(var(--color-foreground), 0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

.slider-button .icon {
  height: 0.6rem;
}

.slider-button[disabled] .icon {
  color: rgba(var(--color-foreground), 0.3);
  cursor: not-allowed;
}

.slider-button--next .icon {
  transform: rotate(-90deg);
}

.slider-button--prev .icon {
  transform: rotate(90deg);
}

.slider-button--next:not([disabled]):hover .icon {
  transform: rotate(-90deg) scale(1.1);
}

.slider-button--prev:not([disabled]):hover .icon {
  transform: rotate(90deg) scale(1.1);
}



/* --- /theme/component-slideshow.css --- */
slideshow-component {
  position: relative;
  display: flex;
  flex-direction: column;
}

slideshow-component .slideshow.banner {
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  gap: 0;
  overflow-y: hidden;
}

.slideshow__slide {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  visibility: visible;
}

@media screen and (max-width: 749px) {
  .slideshow--placeholder.banner--mobile-bottom.banner--adapt_image .slideshow__media,
  .slideshow--placeholder.banner--adapt_image:not(.banner--mobile-bottom) {
    height: 28rem;
  }
}

@media screen and (min-width: 750px) {
  .slideshow--placeholder.banner--adapt_image {
    height: 56rem;
  }
}

.slideshow__text.banner__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 54.5rem;
}

.slideshow__text > * {
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  slideshow-component.page-width .slideshow__text {
    border-right: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
    border-left: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  }

  .banner--mobile-bottom .slideshow__text.banner__box {
    max-width: 100%;
  }

  .banner--mobile-bottom .slideshow__text-wrapper {
    flex-grow: 1;
  }

  .banner--mobile-bottom .slideshow__text.banner__box {
    height: 100%;
  }

  .banner--mobile-bottom .slideshow__text .button {
    flex-grow: 0;
  }

  .slideshow__text.slideshow__text-mobile--left {
    align-items: flex-start;
    text-align: left;
  }

  .slideshow__text.slideshow__text-mobile--right {
    align-items: flex-end;
    text-align: right;
  }
}

@media screen and (min-width: 750px) {
  .slideshow__text.slideshow__text--left {
    align-items: flex-start;
    text-align: left;
  }

  .slideshow__text.slideshow__text--right {
    align-items: flex-end;
    text-align: right;
  }
}

.slideshow:not(.banner--mobile-bottom) .slideshow__text-wrapper {
  height: 100%;
}

@media screen and (min-width: 750px) {
  .slideshow__text-wrapper.banner__content {
    height: 100%;
    padding: 5rem;
  }
}

.slideshow__controls {
  border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.slideshow__controls--top {
  order: 2;
  z-index: 1;
}

@media screen and (max-width: 749px) {
  .slideshow__controls--border-radius-mobile {
    border-bottom-right-radius: var(--text-boxes-radius);
    border-bottom-left-radius: var(--text-boxes-radius);
  }
}

.spaced-section--full-width:last-child slideshow-component:not(.page-width) .slideshow__controls {
  border-bottom: none;
}

@media screen and (min-width: 750px) {
  .slideshow__controls {
    position: relative;
  }
}

slideshow-component:not(.page-width) .slider-buttons {
  border-right: 0;
  border-left: 0;
}

.slideshow__control-wrapper {
  display: flex;
}

.slideshow__autoplay {
  position: absolute;
  right: 0;
  border-left: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 749px) {
  slideshow-component.page-width .slideshow__autoplay {
    right: 1.5rem;
  }
}

@media screen and (min-width: 750px) {
  .slideshow__autoplay.slider-button {
    position: inherit;
    margin-left: 0.6rem;
    padding: 0 0 0 0.6rem;
    border-left: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.slideshow__autoplay .icon.icon-play,
.slideshow__autoplay .icon.icon-pause {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
  width: 0.8rem;
  height: 1.2rem;
}

.slideshow__autoplay .icon.icon-play {
  height: 1rem;
}

.slideshow__autoplay path {
  fill: rgba(var(--color-foreground), 0.75);
}

.slideshow__autoplay:hover path {
  fill: rgb(var(--color-foreground));
}

@media screen and (forced-colors: active) {
  .slideshow__autoplay path,
  .slideshow__autoplay:hover path {
    fill: CanvasText;
  }
}

.slideshow__autoplay:hover .svg-wrapper {
  transform: scale(1.1);
}

.slideshow__autoplay--paused .icon-pause,
.slideshow__autoplay:not(.slideshow__autoplay--paused) .icon-play {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

/* --- /theme/component-swatch-input.css --- */
/* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
.swatch-input__input + .swatch-input__label {
  --swatch-input--border-radius: 50%;
  display: inline-block;
  max-width: 100%;
  border-radius: var(--swatch-input--border-radius);
  cursor: pointer;
  outline-offset: 0.2rem;
  outline-color: transparent;
  outline-style: solid;
  transition-property: outline-color, outline-width, box-shadow;
  transition-duration: var(--duration-short);
  transition-timing-function: ease;
  forced-color-adjust: none;
}

.swatch-input__input + .swatch-input__label.swatch-input__label--square {
  --swatch-input--border-radius: 0.2rem;
}

/* Active state */
.swatch-input__input:active + .swatch-input__label,
.swatch-input__input:checked + .swatch-input__label {
  outline: 0.1rem solid rgb(var(--color-foreground));
}

/* Hover state */
.swatch-input__input + .swatch-input__label:hover,
.swatch-input__input:hover + .swatch-input__label {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
}

/* Focus visible */
.swatch-input__input:focus-visible + .swatch-input__label {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0.1rem 0.5rem rgba(var(--color-foreground), 0.25);
}

/* Active and focused */
.swatch-input__input:active:focus-visible + .swatch-input__label,
.swatch-input__input:checked:focus-visible + .swatch-input__label {
  outline: 0.1rem solid rgb(var(--color-foreground));
  box-shadow: 0 0 0 0.2rem rgb(var(--color-background)), 0 0 0.1rem 0.4rem rgba(var(--color-foreground), 0.25);
}

/* Visually disabled */
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label {
  transition: none;
}
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label:hover {
  outline: none;
}

/* Actually disabled */
.swatch-input__input:disabled + .swatch-input__label {
  pointer-events: none;
}

/* Overrides for swatch snippet when used inside disabled swatch-input */
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
  position: relative;
  overflow: hidden;
}

/* Disabled styles */
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
  opacity: 0.4;
}

/* Display crossed out line over swatch when input is disabled */
.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch::after {
  /* Diagonal of a square = length of the side * sqrt(2)  */
  --diagonal--size: calc(var(--swatch-input--size) * 1.414);
  --crossed-line--size: 0.1rem;
  content: '';
  position: absolute;
  bottom: calc(var(--crossed-line--size) * -0.5);
  left: 0;
  width: var(--diagonal--size);
  height: var(--crossed-line--size);
  background-color: rgb(var(--color-foreground));
  transform: rotate(-45deg);
  transform-origin: left;
}

/* --- /theme/component-swatch.css --- */
/* swatch lives in its own file for reusability of the swatch in swatch-input and dropdown */
.swatch {
  --swatch--size: var(--swatch-input--size, 4.4rem);
  --swatch--border-radius: var(--swatch-input--border-radius, 50%);

  display: block;
  width: var(--swatch--size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--swatch--background);
  background-position: var(--swatch-focal-point, initial);
  background-size: cover;
  background-origin: border-box;
  border: 0.1rem solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--swatch--border-radius);
}

.swatch--square {
  --swatch--border-radius: var(--swatch-input--border-radius, 0.2rem);
}

.swatch--unavailable {
  border-style: dashed;
  border-color: rgba(var(--color-foreground), 0.5);
}

/* --- /theme/component-volume-pricing.css --- */
volume-pricing {
  display: block;
  margin-top: 2rem;
}

volume-pricing li:nth-child(odd) {
  background: rgba(var(--color-foreground), 0.04);
}

volume-pricing ul {
  margin-top: 1.2rem;
}

volume-pricing li {
  font-size: 1.4rem;
  letter-spacing: 0.06rem;
  padding: 0.6rem 0.8rem;
  display: flex;
  justify-content: space-between;
}

div.volume-pricing-note {
  margin-top: -2.6rem;
}

.product--no-media .volume-pricing-note {
  text-align: center;
}

.product--no-media volume-pricing {
  width: 30rem;
}

.volume-pricing-note span,
volume-pricing .label-show-more {
  font-size: 1.2rem;
  letter-spacing: 0.07rem;
}

volume-pricing show-more-button {
  margin-top: 0.8rem;
}

.product-form__input price-per-item,
.price-per-item__container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.product-form__input .price-per-item {
  color: rgba(var(--color-foreground));
  font-size: 1.4rem;
  letter-spacing: 0.06rem;
}

.price-per-item dl {
  margin: 0;
}

.price-per-item dd {
  margin-left: 0;
}

.price-per-item__container .variant-item__old-price,
.price__regular .variant-item__old-price {
  color: rgba(var(--color-foreground), 0.75);
  font-size: 1.2rem;
  letter-spacing: 0.07rem;
}

/* --- /theme/customer.css --- */
.customer:not(.account):not(.order) {
  margin: 0 auto;
  max-width: 33.4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .customer:not(.account):not(.order) {
    max-width: 47.8rem;
  }
}

.customer > h1,
.customer__title {
  margin-top: 0;
}

.customer form {
  margin-top: 4rem;
}

.customer button {
  margin: 4rem 0 1.5rem;
}

.customer ul {
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding-left: 4.4rem;
  text-align: left;
  margin-bottom: 4rem;
}

.customer ul a {
  display: inline;
}

.customer strong {
  font-weight: normal;
  color: rgb(var(--color-foreground));
}

.customer h2.form__message {
  font-size: calc(var(--font-heading-scale) * 1.8rem);
}

@media only screen and (min-width: 750px) {
  .customer h2.form__message {
    font-size: calc(var(--font-heading-scale) * 2.2rem);
  }
}

.customer .field {
  margin: 2rem 0 0 0;
}

.customer .field:first-of-type {
  margin-top: 0;
}

/* Customer Table */
.customer table {
  table-layout: auto;
  border-collapse: collapse;
  border-bottom: 0.01rem solid rgba(var(--color-foreground), 0.08);
  box-shadow: none;
  width: 100%;
  font-size: 1.6rem;
  position: relative;
}

@media screen and (min-width: 750px) {
  .customer table {
    border: none;
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.08);
  }
}

@media screen and (forced-colors: active) {
  .customer table {
    border-top: 0.1rem solid transparent;
    border-bottom: 0.1rem solid transparent;
  }
}

.customer tbody {
  color: rgb(var(--color-foreground));
}

.customer th,
.customer td {
  font-weight: 400;
  line-height: 1;
  border: none;
  padding: 0;
}

@media screen and (min-width: 750px) {
  .customer td {
    padding-right: 2.2rem;
  }
}

.customer tbody td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.customer td:empty {
  display: initial;
}

.customer thead th {
  font-size: 1.2rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
}

.customer tbody td:first-of-type {
  padding-top: 4rem;
}

@media screen and (min-width: 750px) {
  .customer th,
  .customer td:first-of-type {
    text-align: left;
    padding-left: 0;
    padding-right: 2.2rem;
  }

  .customer thead th,
  .customer tbody td {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  .customer th:first-of-type,
  .customer td:first-of-type {
    padding-left: 2.2rem;
  }

  .customer tbody td {
    vertical-align: top;
  }

  .customer tbody td:first-of-type {
    padding-top: 2.4rem;
  }
}

.customer tbody td:last-of-type {
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  .customer tbody td:last-of-type {
    padding-bottom: 0;
  }
}

.customer tbody tr {
  border-top: 0.01rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 750px) {
  .customer tbody tr:first-of-type {
    border-top: none;
  }
}

@media screen and (forced-colors: active) {
  .customer tbody tr {
    border-top: 0.1rem solid transparent;
  }
}

.customer tfoot td:first-of-type,
.customer tfoot td {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.customer tfoot td:first-of-type {
  text-align: left;
}

.customer tfoot tr:first-of-type td {
  padding-top: 4rem;
}

@media screen and (min-width: 750px) {
  .customer tfoot tr:first-of-type td,
  .customer tfoot tr:first-of-type th {
    padding-top: 2.4rem;
  }
}

.customer tfoot tr:last-of-type td {
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  .customer tfoot tr:last-of-type td,
  .customer tfoot tr:last-of-type th {
    padding-bottom: 2.4rem;
  }
}

/* works around colspan phantom border issues */
.customer thead::after,
.customer tfoot::before {
  content: ' ';
  height: 0.1rem;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  background: rgba(var(--color-foreground), 0.08);
}

@media screen and (forced-colors: active) {
  .customer thead::after,
  .customer tfoot::before {
    background: CanvasText;
  }
}

/* mobile table overrides */
@media screen and (max-width: 749px) {
  .customer thead,
  .customer th,
  .customer tfoot td:first-of-type {
    display: none;
  }

  .customer td {
    display: flex;
    text-align: right;
  }

  .customer td::before {
    color: rgba(var(--color-foreground), 0.75);
    content: attr(data-label);
    font-size: 1.4rem;
    padding-right: 2rem;
    text-transform: uppercase;
    flex-grow: 1;
    text-align: left;
  }

  .customer td:first-of-type {
    display: flex;
    align-items: center;
  }

  .customer tr {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }
}

/* Pagination */
.customer .pagination {
  margin-top: 5rem;
  margin-bottom: 7rem;
}

@media screen and (min-width: 990px) {
  .customer .pagination {
    margin-top: 7rem;
    margin-bottom: 10rem;
  }
}

.customer .pagination ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.customer .pagination li {
  flex: 1 1;
  max-width: 4rem;
}

.customer .pagination li:not(:last-child) {
  margin-right: 1rem;
}

.customer .pagination li :first-child {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 4rem;
  width: 100%;
  padding: 0;
  text-decoration: none;
}

.customer .pagination li :first-child .svg-wrapper {
  height: 0.6rem;
}

.customer .pagination li:first-of-type .svg-wrapper {
  margin-left: -0.2rem;
  transform: rotate(90deg);
}

.customer .pagination li:last-of-type .svg-wrapper {
  margin-right: -0.2rem;
  transform: rotate(-90deg);
}

.customer .pagination li [aria-current]::after {
  content: '';
  display: block;
  width: 2rem;
  height: 0.01rem;
  position: absolute;
  bottom: 0.08rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: currentColor;
}

/* Login */
.login a {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

.login a[href='#recover'] {
  margin-left: 0;
  margin-right: 0;
}

.login .field + a {
  margin-top: 1rem;
}

.login p {
  margin: 1.5rem 0;
}

.login h3 {
  margin-top: 1.5rem;
  text-align: left;
  font-size: calc(var(--font-heading-scale) * 1.6rem);
}

#customer_login_guest button {
  margin-top: 0;
}

#recover,
#recover + div {
  display: none;
}

#recover:target {
  display: block;
}

#recover:target + div {
  display: block;
}

#recover:target ~ #login,
#recover:target ~ #login + div {
  display: none;
}

#recover,
#login {
  scroll-margin-top: 20rem;
}

#recover {
  margin-bottom: 0;
}

.activate button[name='decline'],
.addresses li > button,
.addresses form button[type] {
  background-color: rgba(var(--color-background), var(--alpha-button-background));
  color: rgb(var(--color-link));
}

@media only screen and (min-width: 750px) {
  .activate button[name='decline'] {
    margin-top: inherit;
    margin-left: 1rem;
  }
}

/* Account/Order */
:is(.account, .order) {
  margin: 0 auto;
  max-width: var(--page-width);
  padding-left: 2rem;
  padding-right: 2rem;
}

@media screen and (min-width: 750px) {
  :is(.account, .order) {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media screen and (min-width: 990px) {
  :is(.account, .order) > div:nth-of-type(2) {
    display: flex;
    margin-top: 5rem;
  }
}

@media screen and (min-width: 990px) {
  :is(.account, .order) > div:nth-of-type(2) > div:first-of-type {
    flex-grow: 1;
    padding-right: 3.2rem;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .order > div:nth-of-type(2) > div:last-of-type {
    display: flex;
  }

  .order > div:nth-of-type(2) > div:last-of-type div {
    padding-right: 3.2rem;
  }
}

:is(.account, .order) p {
  margin: 0 0 2rem;
  font-size: 1.6rem;
}

:is(.account, .order) h1 {
  margin-bottom: 1rem;
}

:is(.account, .order) h2 {
  margin-top: 4rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  :is(.account, .order) h2 {
    margin-top: 0;
  }
}

.account h1 + a {
  display: inline-flex;
  align-items: center;
}

.account a .svg-wrapper {
  width: 1.5rem;
  margin-bottom: -0.03rem;
  margin-right: 1rem;
}

@media screen and (min-width: 750px) {
  .account thead th:last-child,
  .account td:last-child {
    text-align: right;
  }

  .account table td:first-of-type {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}

.account table td:first-of-type a {
  padding: 1.1rem 1.5rem;
  text-decoration: none;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-link), 0.2);
  border: 0.1rem solid transparent;
  font-size: 1.2rem;
}

.account table td:first-of-type a:hover {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-link), 0.2);
}

.order td:first-of-type {
  align-items: initial;
}

@media screen and (min-width: 750px) {
  .order thead th:nth-last-child(-n + 3),
  .order td:nth-last-child(-n + 3) {
    text-align: right;
  }
}

.order tfoot tr:last-of-type td,
.order tfoot tr:last-of-type th {
  font-size: 2.2rem;
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

@media screen and (min-width: 750px) {
  .order tfoot tr:last-of-type td,
  .order tfoot tr:last-of-type th {
    padding-bottom: 2.4rem;
  }
}

.order tfoot tr:last-of-type td:before {
  font-size: 2.2rem;
}

.order table p,
.order > div:nth-of-type(2) > div:first-of-type h2,
.order > div:nth-of-type(2) > div:last-of-type h2 + p {
  margin-bottom: 0;
}

.order > div:nth-of-type(2) > div:first-of-type h2 ~ p {
  margin-bottom: 0;
  font-size: 1.4rem;
}

.order > div:nth-of-type(2) > div:first-of-type h2 ~ p:last-of-type {
  margin-bottom: 3rem;
}

.order .item-props {
  font-size: 1.4rem;
  margin-top: 0.05px;
  display: flex;
  flex-direction: column;
}

.order .item-props > span {
  word-break: break-all;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.order .fulfillment {
  width: fit-content;
  border: 0.01rem solid rgba(var(--color-foreground), 0.2);
  padding: 1rem;
  margin-top: 1rem;
  font-size: 1.4rem;
  text-align: left;
}

.order .fulfillment a {
  margin: 0.7rem 0;
}

.order .fulfillment span {
  display: block;
}

.order .cart-discount {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

@media screen and (min-width: 750px) {
  .order td .cart-discount {
    display: none;
  }
}

.order tbody ul {
  list-style: none;
  font-size: 1.2rem;
  text-align: right;
  padding-left: 0;
  margin-top: 1rem;
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .order tbody ul {
    text-align: left;
  }
}

.order table a {
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.order tbody tr:first-of-type td:first-of-type > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

@media screen and (min-width: 750px) {
  .order tbody tr:first-of-type td:first-of-type > div {
    align-items: flex-start;
  }
}

.order .properties {
  font-size: 1.4rem;
  margin-top: 1rem;
}

.order .properties span {
  display: block;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.order .svg-wrapper {
  width: 1.1rem;
  color: rgb(var(--color-foreground));
  margin-right: 0.5rem;
}

.order dl {
  margin: 0;
}

.order dd {
  margin-left: 0;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.order dd s {
  color: rgba(var(--color-foreground), 0.7);
}

.order .unit-price {
  font-size: 1.1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  margin-top: 0.2rem;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.7);
}

.order .regular-price {
  font-size: 1.3rem;
}

/* Addresses */
.addresses li > button {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.addresses li > button + button,
.addresses form button + button {
  margin-top: 0rem;
}

@media screen and (min-width: 750px) {
  .addresses li > button:first-of-type {
    margin-top: 3rem;
  }
}

.addresses form button:first-of-type {
  margin-right: 1rem;
}

label[for='AddressCountryNew'],
label[for='AddressProvinceNew'] {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.addresses form {
  display: flex;
  flex-flow: row wrap;
}

.addresses form > div {
  width: 100%;
  text-align: left;
}

.addresses ul {
  list-style: none;
  padding-left: 0;
  text-align: center;
}

li[data-address] {
  margin-top: 5rem;
}

.addresses [aria-expanded='false'] ~ div[id] {
  display: none;
}

.addresses [aria-expanded='true'] ~ div[id] {
  display: block;
}

.addresses h2 {
  text-align: left;
}

li[data-address] > h2 {
  text-align: center;
  font-size: calc(var(--font-heading-scale) * 1.8rem);
  margin-bottom: 0;
}

@media only screen and (min-width: 750px) {
  li[data-address] > h2 {
    font-size: calc(var(--font-heading-scale) * 2.2rem);
  }
}

.addresses ul p {
  margin-bottom: 0;
}

.addresses input[type='checkbox'] {
  margin-top: 2rem;
  margin-left: 0;
}

@media only screen and (min-width: 750px) {
  .addresses form > div:nth-of-type(1) {
    margin-right: 2rem;
  }

  .addresses form > div:nth-of-type(2) {
    margin-top: 0;
  }

  .addresses form > div:nth-of-type(1),
  .addresses form > div:nth-of-type(2) {
    box-sizing: border-box;
    flex-basis: calc(50% - 1rem);
  }
}

.addresses form > div:nth-of-type(7),
.addresses form > div:nth-of-type(7) + div[id] {
  margin-top: 1.5rem;
}

/* --- /theme/faq.css --- */
.faq-section {
    background-color: #000000;
    margin-top: 20px;
    position: relative;
}

.faq-section>div {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 50px
}

.faq_blocks {
    padding: 70px 0;
    max-width: 50%;
}

.faq_title {
    color: #fff;
    font-size: 36px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.faq-block {
    color: #fff;
margin-bottom: 25px;
    font-size: 25px;
    cursor: pointer;
    font-family: "Gowun Batang", sans-serif;
}

.faq-block_title {
    color: #fff;
    font-family: "Gowun Batang", sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-end;
}

.faq-block_text {
    margin: 10px 0 0 0;
    transition: all 0.3s;
    overflow: hidden;
    font-weight: 400;
    max-height: 0;
    max-width: 75%;
    line-height: 114.99999999999999%;
}

.faq-block_title svg {
    transition: all 0.3s;
    margin-bottom: 15px;
}

.open .faq-block_text {
    max-height: 200px;
}

.open .faq-block_title svg {
    transform: rotate(180deg);
}

.faq_image-container {
    padding-top: 70px;
}

.faq_image-container img {
    width: 100%;
}

@media screen and (max-width:1100px) {

    .faq-block_text,
    .faq-block_title {
        font-size: 20px;
    }
}

@media screen and (max-width:960px) {

    .faq-block_text,
    .faq-block_title {
        font-size: 16px;
    }
}

@media screen and (max-width:860px) {

    .faq_image-container {
        display: none;
    }

    .faq_blocks {
        max-width: 100%;
        padding: 20px 36px;
    }
}
/* --- /theme/featured-collection-two-blocks.css --- */
.ts-two-blocks-padding {
  padding: 0 15rem;
}
.ts-two-blocks_grid-image{
  max-width: 73%;
}
.ts-two-blocks_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  justify-items: center;
  gap: 20px;
}

.ts-two-blocks_button-container {
  display: flex;
  justify-content: center;
}

.ts-two-blocks_item:link,
.ts-two-blocks_item:visited {
    position: relative;
    line-height: 0;
    padding: 40px 30px 20px;
    background-color: #FFFFFF;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: all .3s;
    justify-content: space-between;
    border: 1px solid #000000;
}

.ts-two-blocks_item:hover {
  background-color: #000000;
}

.ts-two-blocks_item .overlay {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  background-color: #F2FF00CC;
  opacity: 0;
  border: 0.5px solid #000000;
}

.ts-two-blocks_item:active .overlay,
.ts-two-blocks_item:hover .overlay {
  opacity: 1;
}

.ts-two-blocks_item:active .ts-two-blocks_collection-title,
.ts-two-blocks_item:hover .ts-two-blocks_collection-title {
  color: #000000;
  background-color: #F2FF00;
}

.ts-two-blocks_section {
  padding: 20px 0;
  margin: 36px 0;
}

.ts-two-blocks_section_no-padding {
  border: none;
  margin: 0;
}

.ts-two-blocks_item img {
  width: 100%;
  border-radius: 15px;
}

.ts-two-blocks_top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ts-two-blocks_title {
  font-size: 36px;
  color: #000000;
  margin: 0;
  text-transform: uppercase;
}

.ts-two-blocks_button:link,
.ts-two-blocks_button:visited {
color: #fff;
    background-color: #000000;
    border-radius: 11px;
    line-height: 1.5;
    font-family: "Gowun Batang", sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s;
    width: 100%;
    text-align: center;
}

.ts-two-blocks_button:hover,
.ts-two-blocks_button:active {
color: #000000;
    background-color: #F2FF00;
}

.ts-two-blocks_button-mobile {
  display: none;
}

.ts-two-blocks_collection-title {
  font-size: 18px;
  color: #fff;
  background-color: #000000;
  border-radius: 10px;
  padding: 20px 20px;
  font-family: "Gowun Batang", sans-serif;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  transition: all .3s;
  margin-top: 15px;
  width: 75%;
}
@media screen and (min-width: 860px) and (max-width: 1024px) {
  .ts-two-blocks_collection-title {
  font-size: 18px;
  color: #fff;
  background-color: #000000;
  border-radius: 10px;
  padding: 20px 20px;
  font-family: "Gowun Batang", sans-serif;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  transition: all .3s;
  margin-top: 15px;
  width: 100%;
}
}
@media screen and (max-width: 1150px) {
  .ts-two-blocks_button {
    padding: 8px 60px;
    font-size: 20px;
  }

  .ts-two-blocks_title {
    font-size: 40px;
  }
}

@media screen and (max-width: 950px) {
  .ts-two-blocks_button {
    padding: 8px 40px;
  }
}

@media screen and (max-width: 860px) {
  .ts-two-blocks_grid-image{
  max-width: 100%;
}
  .ts-two-blocks_grid {
    display: flex;
    justify-content: space-between;
    justify-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .ts-two-blocks_button-mobile {
    text-align: center;
    margin-top: 20px;
  }

  .ts-two-blocks_section {
    border: none;
  }

  .ts-two-blocks_title {
    margin: 0 auto;
  }

  .ts-two-blocks_collection-title {
        font-size: 14px;
        padding: 14px 8px;
        color: #fff;
        white-space: nowrap;
        width: fit-content;
        height: fit-content;
        line-height: 1;
        border-radius: 5px;
        min-width: 100%;
  }
  .ts-two-blocks_title{
    font-size:40px;
    text-align: center;
        line-height: 45px;
    margin-bottom: 10px;
  }
  .ts-two-blocks_top a {
    display: none;
  }

  .ts-two-blocks_item:link,
  .ts-two-blocks_item:visited {
        padding: 13px 15px 13px; 
        min-height: 250px;
        position: relative;
        line-height: 0;
        border-radius: 11px;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        transition: all .3s;
        align-items: center;
        justify-content: space-between;
        width: 50%;
        background-color: #FFFFFF;
  }
.ts-two-blocks_item:hover {
    background-color: #000000;
}

  .ts-two-blocks_item:active .ts-two-blocks_collection-title,
  .ts-two-blocks_item:hover .ts-two-blocks_collection-title {
        color: #000000;
        background-color: #F2FF00;
        border-radius: 5px;
  }

  .ts-two-blocks-padding {
    padding: 0 26px;
  }
}

@media screen and (max-width: 400px) {
    .ts-two-blocks_collection-title {
        font-size: 12px;
    }
}
/* --- /theme/footer.css --- */
.footer-dropdown_open svg path{
  stroke: #000000;
}
.svg-wrapper svg path{
  stroke:#000000;
}
footer {
    background-color: #F2FF00;
    border-top: 1px solid #000;
}

.footer_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.footer-cta_block {
    padding-right: 30px;
    padding-bottom: 80px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
      border-right: 1px solid #000;
  padding-top: 50px;
}

.footer-dropdown_open svg {
    transition: all 0.3s;
    
}


.opened svg {
    transform: rotate(180deg);
}

.field:hover.field::after {
    border-radius: 12px;
}

.footer-cta_title {
    font-size: 30px;
    color: #000000;
    line-height: 1.2;
    text-transform: uppercase;
}

.footer-block__newsletter {
    width: 100%;
    max-width: 360px;
}

.footer-menu_block {
    padding-left: 30px;
  padding-top: 50px;
}

.footer-menu {
    max-width: 360px;
}

.footer-menu_block ul {
    padding: 0;
    list-style: none;
}

.footer-menu_block a:link,
.footer-menu_block a:visited {
    font-family: "Gowun Batang", sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 17px;
    text-decoration: underline;
    letter-spacing: 0;
}
.footer-menu_block a:hover {
    font-family: "Gowun Batang", sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 17px;
    text-decoration: none;
    
}

.footer-menu_block p {
    margin: 0;
    cursor: pointer;
    font-family: "Gowun Batang", sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.footer-link {
    margin: 12px 0;
}

.footer-dropdown {
    margin: 12px 0;
}

.footer-dropdown_menu {
    padding-left: 20px !important;
    transition: all 0.3s;
    max-height: 0;
    overflow: hidden;

}

.footer-dropdown_menu a:link,
.footer-dropdown_menu a:visited {
    font-weight: 400;
}

.footer-dropdown_menu_open {
    max-height: 300px;
}

.footer-block__newsletter input {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
    height: 55px;
}

.footer-links {
    display: flex;
    justify-content: end;
    gap: 16px
}

.field__input:focus {
    border-radius: 12px;
}


.field__label {
    top: 50%;
    transform: translateY(-50%);
    font-family: "Gowun Batang", sans-serif;
    color: #000000;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.field__input:focus ~ .field__label {
  top: 10px;
}

.newsletter-form__button {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

@media screen and (max-width:860px) {
    .footer_container {
        padding: 20px 36px 0;
        grid-template-columns: 1fr;
    }

    .footer-cta_block {
        padding: 0;
        border: none;
    }

    .footer-menu_block {
        padding: 0 0 30px;
        border: none;
    }

    .footer-cta_title {
        font-size: 20px;
    }

    .field__label {

        color: #000;
        font-size: 13px;

    }

    .newsletter-form__button {
        right: 5px;
    }
}
/* --- /theme/hippy-header.css --- */
.hippy-header {
    background-color: #F2FF00;
    height: 90px;
}

.header-transparent {
    background-color: #00000000;
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    height: 90px;
    padding: 5px 26px;
}

.hippy-header_container {
    position: relative;
    height: 100%;

}

.mobile-menu {
    display: none;
}

.hippy-header_container--nav {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.hippy-header_container--links {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.hippy-header_container--logo_container {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}

.hippy-header_container--logo_container img {
    width: 100%;
}

.hippy-header_container--nav_items {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 3rem;
}

.hippy-header_container--logo_container {
    line-height: 1;
}

.hippy-header_container--nav_item:not(:last-child) {
    margin-right: 40px
}

.hippy-header_container--nav_item,
.hippy-header_container--nav_item a:link,
.hippy-header_container--nav_item a:visited {
    color: #000000;
    font-size: 20px;
    font-family: 'Alfa Slab One', sans-serif;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
}

.hippy-header_container--links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
@media(min-width:860px){
  .hippy-header_container--links {

    padding-right: 3rem;
}
}
.hippy-header_container--nav_item:hover,
.hippy-header_container--nav_item:active,
.hippy-header_container--nav_item a:hover,
.hippy-header_container--nav_item a:active {
    color: #000000;
}

.mega-menu_category_title {
    margin: 0 0 14px;
    font-size: 17px;
      color: #fff;
}

.hippy-header_container--links a {
    display: block;
    box-sizing: border-box;
    line-height: 0;
}

/* Solid yellow header: recolor white logo + icons to menu purple #000000 */
.hippy-header_container--logo {
    filter: brightness(0) saturate(100%) invert(10%) sepia(89%) saturate(6492%) hue-rotate(276deg) brightness(85%) contrast(112%);
}
.hippy-header_container--links a,
.hippy-header_container--links svg,
.hippy-header_container--links svg path {
    color: #000000;
    fill: #000000;
}

.mega-menu {
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;
    width: 100%;
    background-color: #000000;
    padding: 40px 45px;
    display: flex;
    justify-content: space-between;
  padding-right: 300px;
}

.mega-menu {}

.mega-menu_open {
    opacity: 1;
    pointer-events: all;
}

.mega-menu a:link,
.mega-menu a:visited,
.mega-menu p {
    font-family: 'Alfa Slab One', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    font-size: 12px;
    padding: 2px 10px;
    transition: all 0.3s;
}

.hippy-header_container--nav_burger {
    display: none;
}

.mega-menu_category_top-level_item,
.mega-menu_category_second-level_item {
    transition: all 0.3s;
}

.mega-menu .mega-menu_category_top-level_item:hover,
.mega-menu .mega-menu_category_top-level_item:active,
.mega-menu .mega-menu_category_second-level_item:hover,
.mega-menu .mega-menu_category_second-level_item:active {
    background-color: #F2FF00;
    border-radius: 10px;
    padding: 2px;
}

.mega-menu .mega-menu_category_top-level_item:hover a,
.mega-menu .mega-menu_category_top-level_item:active a,
.mega-menu .mega-menu_category_second-level_item:hover a,
.mega-menu .mega-menu_category_second-level_item:active a {
    color: #000000;
    border-radius: 10px;
}


.mega-menu_category_second-level a:link,
.mega-menu_category_second-level a:visited {
    font-size: 12px;
    font-weight: 700;
}

.mega-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu .mega-menu_category_second-level {
    padding-left: 20px;
    max-height: 0px;
    transition: all 0.6s;
    overflow: hidden;
}

.mega-menu_category_second-level-title_open+.mega-menu_category_second-level {
    max-height: 400px;
}

.mega-menu_category_second-level-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mega-menu_category_second-level-title span {
    display: flex;
    transition: all 0.6s;
}

.mega-menu_category_second-level-title_open span {
    transform: rotate(180deg);
}

.mega-menu_category_top-level li {
    margin-bottom: 15px;
      padding: 2px;
    border-radius: 10px;
}

@media screen and (max-width:1050px) {
    .mega-menu {
        padding: 30px 35px;
    }

    .mega-menu_category_title {
        font-size: 15px;
    }

    .mega-menu a:link,
    .mega-menu a:visited,
    .mega-menu p {
        font-size: 15px;
        padding: 2px 6px;
    }

    .mega-menu_category_second-level a:link,
    .mega-menu_category_second-level a:visited {
        font-size: 12px;
        font-weight: 700;
    }
}

@media screen and (max-width:900px) {
    .mega-menu {
        padding: 20px 25px;
    }

    .mega-menu_category_title {
        font-size: 15px;
    }

    .mega-menu a:link,
    .mega-menu a:visited,
    .mega-menu p {
        font-size: 15px;
        padding: 2px 6px;
    }

    .mega-menu_category_second-level a:link,
    .mega-menu_category_second-level a:visited {
        font-size: 12px;
        font-weight: 700;
    }


}

@media screen and (max-width:700px) {
    .hippy-header {
        top: 47px;
        height: 57px;
    }
}

@media screen and (max-width:860px) {


    .hippy-header_container--nav_burger {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .header-transparent .hippy-header_container--nav {
        left: 0rem;
    }

    .header-transparent .hippy-header_container--links {
        right: 0rem;
    }

    .hippy-header_container--nav_items {
        display: none;
    }

    .hippy-header_container--links a svg {
        max-width: 22px;
    }

    .hippy-header_account-link {
        display: none !important;
    }


    .hippy-header_container--logo_container {
        max-width: 140px;
    }

    .mobile-menu {
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #000000;
        z-index: 10;
        padding: 26px;
        overflow-y: scroll;
        transform: translateX(-100%);
        transition: all 0.5s;
    }

    .mobile-menu_title {
        color: #fff;
        font-size: 20px;
        text-transform: uppercase;
        margin: 0 0 16px;
        text-decoration: none;
        transition:0,3s ease;
    }
    .mobile-menu_category--single:hover {
        color: #F2FF00;
    }

    .mobile-menu_account {
        display: block;
        padding-bottom: 18px;
        margin-bottom: 22px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .mobile-menu-close_container {
        margin-bottom: 35px;
        display: flex;
    }

    .mobile-menu-close_icon {
        line-height: 1;
        cursor: pointer;
    }

    .mobile-menu_grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: start;
        gap: 40px 20px;
        margin-bottom: 30px;
    }

    .mobile-menu_grid .mobile-menu_link:link,
    .mobile-menu_grid .mobile-menu_link:visited {
        display: flex;
        flex-direction: column;
        color: #fff;
        transition: all 0.3s;
        text-decoration: none;

        font-size: 12px;
        text-align: center;
    }

    .mobile-menu_flex {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }

    .mobile-menu_flex .mobile-menu_link:link,
    .mobile-menu_flex .mobile-menu_link:visited {
        display: block;
        padding: 7px 20px;
        border: 0.5px solid #fff;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
        border-radius: 10px;
         transition:0.3s ease;
    }

    .mobile-menu_flex .mobile-menu_link .mobile-menu_link_image-container {
        display: none;
    }

    .mobile-menu_link_image-container {
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #FFFFFF;
        padding: 20px;
        margin-bottom: 5px;
        transition: .3s ease;
    }

    .mobile-menu_link_image-container img {}

    .mobile-menu_grid .mobile-menu_link_active .mobile-menu_link_image-container,
    .mobile-menu_grid .mobile-menu_link:active .mobile-menu_link_image-container,
    .mobile-menu_grid .mobile-menu_link:hover .mobile-menu_link_image-container {
        background-color:#F2FF00;
        border: 1px solid #F2FF00;
    }

    .mobile-menu_grid .mobile-menu_link_active,
    .mobile-menu_grid .mobile-menu_link:active,
    .mobile-menu_grid .mobile-menu_link:hover {
        font-weight: 700;
        color: #F2FF00;
    }

    .mobile-menu_flex .mobile-menu_link:active,
    .mobile-menu_flex .mobile-menu_link_active,
    .mobile-menu_flex .mobile-menu_link:hover {
        border: .5px solid #F2FF00 !important;
        background-color: #F2FF00;
        color: #000000;
    }

}
@media screen and (max-width:350px) {
      .mobile-menu_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 40px 20px;
        margin-bottom: 30px;
    }
}
.header-transparent svg path{
  fill:#fff;
}
/* --- /theme/mask-blobs.css --- */
:root {
    --shape--blob-1: 97.686% 33.617%, 98.392% 36.152%, 98.960% 38.721%, 99.398% 41.315%, 99.712% 43.928%, 99.909% 46.552%, 99.995% 49.182%, 99.974% 51.813%, 99.852% 54.441%, 99.630% 57.063%, 99.311% 59.675%, 98.897% 62.274%, 98.389% 64.856%, 97.787% 67.417%, 97.091% 69.955%, 96.299% 72.464%, 95.411% 74.941%, 94.422% 77.379%, 93.329% 79.773%, 92.127% 82.114%, 90.812% 84.393%, 89.377% 86.598%, 87.813% 88.714%, 86.114% 90.723%, 84.272% 92.600%, 82.279% 94.317%, 80.125% 95.828%, 77.832% 97.117%, 75.423% 98.172%, 72.920% 98.983%, 70.352% 99.552%, 67.743% 99.887%, 65.115% 100.000%, 62.485% 99.907%, 59.869% 99.627%, 57.277% 99.176%, 54.717% 98.571%, 52.193% 97.825%, 49.711% 96.954%, 47.271% 95.967%, 44.877% 94.876%, 42.529% 93.689%, 40.227% 92.414%, 37.972% 91.058%, 35.764% 89.626%, 33.604% 88.123%, 31.491% 86.555%, 29.426% 84.924%, 27.410% 83.234%, 25.441% 81.487%, 23.522% 79.687%, 21.651% 77.836%, 19.832% 75.935%, 18.064% 73.986%, 16.350% 71.990%, 14.691% 69.947%, 13.090% 67.859%, 11.549% 65.726%, 10.073% 63.547%, 8.665% 61.324%, 7.331% 59.056%, 6.076% 56.744%, 4.907% 54.386%, 3.832% 51.984%, 2.861% 49.539%, 2.006% 47.050%, 1.280% 44.521%, 0.699% 41.955%, 0.280% 39.358%, 0.044% 36.738%, 0.014% 34.107%, 0.212% 31.484%, 0.660% 28.892%, 1.371% 26.359%, 2.338% 23.913%, 3.540% 21.574%, 4.951% 19.354%, 6.546% 17.261%, 8.300% 15.300%, 10.191% 13.471%, 12.199% 11.771%, 14.307% 10.197%, 16.502% 8.746%, 18.771% 7.414%, 21.104% 6.198%, 23.493% 5.094%, 25.930% 4.101%, 28.408% 3.217%, 30.922% 2.439%, 33.466% 1.768%, 36.036% 1.203%, 38.627% 0.744%, 41.235% 0.394%, 43.855% 0.152%, 46.483% 0.023%, 49.114% 0.008%, 51.744% 0.103%, 54.366% 0.315%, 56.977% 0.648%, 59.569% 1.100%, 62.137% 1.672%, 64.676% 2.363%, 67.179% 3.173%, 69.642% 4.101%, 72.056% 5.147%, 74.416% 6.310%, 76.715% 7.590%, 78.946% 8.985%, 81.102% 10.494%, 83.174% 12.115%, 85.156% 13.846%, 87.039% 15.684%, 88.815% 17.625%, 90.477% 19.664%, 92.017% 21.797%, 93.429% 24.017%, 94.707% 26.318%, 95.844% 28.690%, 96.838% 31.126%, 97.686% 33.617%;
    --shape--blob-2: 85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%;
    --shape--blob-3: 78.621% 12.736%, 80.746% 14.354%, 82.710% 16.163%, 84.520% 18.127%, 86.187% 20.215%, 87.721% 22.401%, 89.134% 24.668%, 90.437% 27.000%, 91.639% 29.386%, 92.748% 31.816%, 93.770% 34.284%, 94.714% 36.783%, 95.583% 39.309%, 96.382% 41.858%, 97.112% 44.428%, 97.770% 47.017%, 98.353% 49.624%, 98.858% 52.248%, 99.279% 54.886%, 99.611% 57.536%, 99.847% 60.197%, 99.977% 62.865%, 99.991% 65.537%, 99.879% 68.205%, 99.626% 70.865%, 99.217% 73.504%, 98.635% 76.111%, 97.863% 78.668%, 96.879% 81.151%, 95.683% 83.538%, 94.291% 85.818%, 92.717% 87.976%, 90.974% 89.999%, 89.075% 91.878%, 87.033% 93.599%, 84.860% 95.151%, 82.567% 96.520%, 80.167% 97.692%, 77.673% 98.647%, 75.100% 99.364%, 72.469% 99.819%, 69.805% 99.997%, 67.136% 99.893%, 64.491% 99.529%, 61.884% 98.946%, 59.324% 98.186%, 56.807% 97.290%, 54.329% 96.293%, 51.880% 95.225%, 49.451% 94.114%, 47.030% 92.984%, 44.607% 91.858%, 42.173% 90.757%, 39.719% 89.701%, 37.245% 88.695%, 34.756% 87.723%, 32.263% 86.763%, 29.775% 85.790%, 27.301% 84.782%, 24.852% 83.715%, 22.441% 82.564%, 20.085% 81.306%, 17.802% 79.919%, 15.615% 78.386%, 13.549% 76.694%, 11.627% 74.839%, 9.875% 72.824%, 8.296% 70.669%, 6.878% 68.406%, 5.612% 66.054%, 4.489% 63.630%, 3.502% 61.148%, 2.645% 58.618%, 1.914% 56.049%, 1.304% 53.448%, 0.812% 50.823%, 0.437% 48.178%, 0.177% 45.519%, 0.033% 42.852%, 0.004% 40.181%, 0.091% 37.511%, 0.299% 34.847%, 0.634% 32.197%, 1.088% 29.565%, 1.657% 26.955%, 2.344% 24.374%, 3.150% 21.827%, 4.078% 19.322%, 5.133% 16.868%, 6.321% 14.475%, 7.651% 12.159%, 9.134% 9.937%, 10.780% 7.835%, 12.604% 5.883%, 14.615% 4.127%, 16.820% 2.622%, 19.214% 1.442%, 21.758% 0.633%, 24.387% 0.168%, 27.052% 0.002%, 29.721% 0.082%, 32.378% 0.357%, 35.016% 0.781%, 37.632% 1.318%, 40.231% 1.936%, 42.817% 2.607%, 45.396% 3.304%, 47.975% 4.002%, 50.561% 4.673%, 53.163% 5.278%, 55.778% 5.822%, 58.401% 6.329%, 61.027% 6.821%, 63.650% 7.326%, 66.264% 7.878%, 68.858% 8.515%, 71.418% 9.281%, 73.919% 10.217%, 76.332% 11.362%, 78.621% 12.736%;
    --shape--blob-4: 80.628% 3.397%, 82.907% 4.713%, 85.051% 6.239%, 87.055% 7.945%, 88.916% 9.806%, 90.636% 11.799%, 92.213% 13.907%, 93.650% 16.112%, 94.946% 18.403%, 96.102% 20.768%, 97.115% 23.198%, 97.983% 25.683%, 98.702% 28.215%, 99.256% 30.788%, 99.652% 33.390%, 99.898% 36.011%, 99.998% 38.642%, 99.953% 41.274%, 99.765% 43.899%, 99.436% 46.511%, 98.966% 49.101%, 98.355% 51.662%, 97.602% 54.184%, 96.703% 56.658%, 95.658% 59.074%, 94.459% 61.417%, 93.104% 63.674%, 91.610% 65.841%, 89.994% 67.919%, 88.274% 69.912%, 86.469% 71.828%, 84.595% 73.677%, 82.668% 75.471%, 80.701% 77.221%, 78.709% 78.941%, 76.701% 80.644%, 74.690% 82.343%, 72.683% 84.048%, 70.680% 85.756%, 68.669% 87.455%, 66.637% 89.129%, 64.575% 90.765%, 62.468% 92.344%, 60.307% 93.847%, 58.080% 95.251%, 55.778% 96.528%, 53.396% 97.648%, 50.934% 98.576%, 48.398% 99.281%, 45.809% 99.751%, 43.186% 99.976%, 40.555% 99.967%, 37.933% 99.738%, 35.337% 99.303%, 32.781% 98.675%, 30.276% 97.865%, 27.834% 96.884%, 25.462% 95.741%, 23.171% 94.446%, 20.969% 93.004%, 18.866% 91.420%, 16.874% 89.700%, 14.991% 87.861%, 13.220% 85.913%, 11.560% 83.870%, 10.011% 81.742%, 8.574% 79.537%, 7.246% 77.263%, 6.029% 74.929%, 4.921% 72.541%, 3.923% 70.106%, 3.034% 67.628%, 2.256% 65.113%, 1.587% 62.566%, 1.033% 59.993%, 0.595% 57.397%, 0.275% 54.784%, 0.076% 52.159%, 0.001% 49.528%, 0.052% 46.896%, 0.236% 44.270%, 0.556% 41.657%, 1.019% 39.066%, 1.631% 36.506%, 2.398% 33.988%, 3.328% 31.525%, 4.412% 29.127%, 5.654% 26.806%, 7.044% 24.570%, 8.571% 22.426%, 10.224% 20.378%, 11.993% 18.429%, 13.868% 16.581%, 15.840% 14.837%, 17.900% 13.198%, 20.041% 11.666%, 22.255% 10.243%, 24.540% 8.937%, 26.891% 7.752%, 29.296% 6.680%, 31.746% 5.718%, 34.235% 4.860%, 36.755% 4.099%, 39.300% 3.427%, 41.865% 2.833%, 44.444% 2.306%, 47.035% 1.836%, 49.633% 1.412%, 52.237% 1.025%, 54.847% 0.677%, 57.463% 0.383%, 60.086% 0.162%, 62.715% 0.029%, 65.348% 0.006%, 67.978% 0.112%, 70.597% 0.372%, 73.193% 0.808%, 75.747% 1.446%, 78.234% 2.304%, 80.628% 3.397%;
    --shape--blob-5: 80.452% 2.197%, 82.761% 3.507%, 84.885% 5.101%, 86.818% 6.922%, 88.568% 8.920%, 90.147% 11.056%, 91.569% 13.300%, 92.848% 15.628%, 93.997% 18.023%, 95.026% 20.472%, 95.944% 22.966%, 96.759% 25.494%, 97.476% 28.053%, 98.100% 30.635%, 98.634% 33.238%, 99.082% 35.856%, 99.444% 38.489%, 99.714% 41.132%, 99.893% 43.782%, 99.986% 46.438%, 99.992% 49.094%, 99.909% 51.750%, 99.736% 54.401%, 99.472% 57.045%, 99.113% 59.677%, 98.656% 62.294%, 98.098% 64.892%, 97.435% 67.465%, 96.663% 70.007%, 95.776% 72.511%, 94.769% 74.969%, 93.636% 77.373%, 92.372% 79.709%, 90.970% 81.966%, 89.423% 84.125%, 87.728% 86.170%, 85.898% 88.095%, 83.943% 89.894%, 81.873% 91.560%, 79.701% 93.088%, 77.435% 94.475%, 75.087% 95.718%, 72.666% 96.811%, 70.182% 97.753%, 67.645% 98.540%, 65.063% 99.165%, 62.446% 99.622%, 59.804% 99.904%, 57.150% 100.000%, 54.495% 99.900%, 51.855% 99.607%, 49.242% 99.128%, 46.668% 98.471%, 44.142% 97.651%, 41.669% 96.680%, 39.254% 95.572%, 36.900% 94.342%, 34.605% 93.002%, 32.370% 91.566%, 30.193% 90.044%, 28.067% 88.450%, 25.999% 86.782%, 23.993% 85.040%, 22.054% 83.224%, 20.182% 81.338%, 18.380% 79.387%, 16.644% 77.375%, 14.972% 75.310%, 13.360% 73.198%, 11.802% 71.046%, 10.288% 68.863%, 8.816% 66.651%, 7.404% 64.400%, 6.063% 62.107%, 4.809% 59.765%, 3.656% 57.371%, 2.624% 54.923%, 1.730% 52.421%, 0.998% 49.868%, 0.451% 47.268%, 0.112% 44.634%, 0.000% 41.980%, 0.117% 39.327%, 0.446% 36.691%, 0.976% 34.088%, 1.696% 31.531%, 2.600% 29.033%, 3.682% 26.607%, 4.941% 24.268%, 6.375% 22.032%, 7.986% 19.921%, 9.775% 17.957%, 11.743% 16.173%, 13.876% 14.591%, 16.156% 13.229%, 18.548% 12.073%, 21.017% 11.094%, 23.538% 10.255%, 26.091% 9.521%, 28.664% 8.858%, 31.248% 8.240%, 33.837% 7.642%, 36.426% 7.045%, 39.011% 6.431%, 41.589% 5.787%, 44.157% 5.109%, 46.720% 4.407%, 49.281% 3.701%, 51.846% 3.006%, 54.418% 2.339%, 57.001% 1.717%, 59.598% 1.157%, 62.212% 0.680%, 64.842% 0.309%, 67.488% 0.072%, 70.144% 0.002%, 72.797% 0.137%, 75.424% 0.521%, 77.992% 1.197%, 80.452% 2.197%;
    --shape--blob-6: 71.914% 1.829%, 74.287% 2.884%, 76.559% 4.144%, 78.723% 5.581%, 80.777% 7.171%, 82.721% 8.894%, 84.557% 10.733%, 86.284% 12.673%, 87.906% 14.703%, 89.423% 16.812%, 90.838% 18.991%, 92.151% 21.233%, 93.364% 23.531%, 94.477% 25.878%, 95.492% 28.270%, 96.406% 30.702%, 97.222% 33.169%, 97.938% 35.666%, 98.555% 38.190%, 99.069% 40.737%, 99.476% 43.303%, 99.771% 45.884%, 99.948% 48.476%, 99.999% 51.073%, 99.914% 53.670%, 99.680% 56.257%, 99.287% 58.825%, 98.717% 61.360%, 97.957% 63.844%, 96.984% 66.252%, 95.807% 68.567%, 94.448% 70.781%, 92.930% 72.889%, 91.273% 74.890%, 89.499% 76.788%, 87.625% 78.587%, 85.668% 80.296%, 83.642% 81.923%, 81.560% 83.477%, 79.431% 84.967%, 77.266% 86.402%, 75.071% 87.793%, 72.854% 89.148%, 70.624% 90.481%, 68.375% 91.783%, 66.103% 93.044%, 63.803% 94.253%, 61.470% 95.396%, 59.100% 96.459%, 56.688% 97.425%, 54.232% 98.272%, 51.732% 98.978%, 49.190% 99.518%, 46.616% 99.866%, 44.022% 99.999%, 41.427% 99.904%, 38.848% 99.589%, 36.304% 99.067%, 33.806% 98.353%, 31.365% 97.465%, 28.988% 96.417%, 26.680% 95.223%, 24.446% 93.897%, 22.289% 92.450%, 20.209% 90.892%, 18.210% 89.233%, 16.286% 87.487%, 14.442% 85.656%, 12.685% 83.743%, 11.018% 81.750%, 9.446% 79.682%, 7.974% 77.541%, 6.608% 75.331%, 5.354% 73.056%, 4.218% 70.719%, 3.208% 68.325%, 2.331% 65.880%, 1.594% 63.389%, 0.996% 60.861%, 0.535% 58.304%, 0.216% 55.726%, 0.039% 53.134%, 0.005% 50.536%, 0.119% 47.941%, 0.385% 45.356%, 0.814% 42.794%, 1.416% 40.267%, 2.207% 37.793%, 3.204% 35.394%, 4.427% 33.103%, 5.887% 30.956%, 7.572% 28.979%, 9.454% 27.190%, 11.490% 25.576%, 13.637% 24.114%, 15.862% 22.773%, 18.137% 21.517%, 20.438% 20.310%, 22.744% 19.113%, 25.034% 17.885%, 27.285% 16.589%, 29.485% 15.207%, 31.628% 13.738%, 33.730% 12.210%, 35.812% 10.656%, 37.898% 9.106%, 40.011% 7.595%, 42.174% 6.156%, 44.403% 4.820%, 46.707% 3.621%, 49.090% 2.587%, 51.535% 1.709%, 54.034% 0.998%, 56.576% 0.466%, 59.152% 0.129%, 61.746% 0.001%, 64.342% 0.097%, 66.918% 0.430%, 69.450% 1.007%, 71.914% 1.829%;
}

/* --- /theme/newsletter-section.css --- */
.newsletter__wrapper {
  padding-right: calc(4rem / var(--font-body-scale));
  padding-left: calc(4rem / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .newsletter__wrapper {
    padding-right: 9rem;
    padding-left: 9rem;
  }
}

.newsletter__wrapper > * {
  margin-top: 0;
  margin-bottom: 0;
}

.newsletter__wrapper > * + * {
  margin-top: 2rem;
}

.newsletter__wrapper > * + .newsletter-form {
  margin-top: 3rem;
}

.newsletter__subheading {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
}

.newsletter__wrapper .newsletter-form__field-wrapper {
  max-width: 36rem;
}

.newsletter-form__field-wrapper .newsletter-form__message {
  margin-top: 1.5rem;
}

.newsletter__button {
  margin-top: 3rem;
  width: fit-content;
}

@media screen and (min-width: 750px) {
  .newsletter__button {
    flex-shrink: 0;
    margin: 0 0 0 1rem;
  }
}

/* --- /theme/pagefly.blog.css --- */
.pf-article__tags,
.pf-article__comment {
  background-color: #fff;
  padding: 30px 0;
}
.pf-article__tags ul,
.pf-article__comment ul {
  margin: 0;
  padding: 0;
}

.pf-article__header {
  text-align: center;
  padding: 20px 15px 30px;
}
.pf-article__header h1 {
  margin-bottom: 10px;
}
.pf-article__header .pf-article__author {
  margin-right: 10px;
}

.pf-article__image {
  margin-bottom: 30px;
  text-align: center;
}

.pf-comment__list {
  margin-bottom: 30px;
}

.pf-comment__form label {
  display: block;
  margin-bottom: 10px;
}
.pf-comment__form input:not([type=submit]), .pf-comment__form textarea {
  width: 100%;
}

.pf-article__tags li {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}
.pf-article__tags li a {
  display: inline-block;
  padding: 5px 10px;
  background-color: #f5f5f5;
}
.pf-article__tags + .pf-article__comment {
  padding-top: 0;
}

.pf-comment__list li {
  list-style: none;
  margin-bottom: 30px;
}
.pf-comment__list li:last-child {
  margin-bottom: 0;
}

.pf-comment__author {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebebeb;
}
.pf-comment__author > span {
  padding-right: 15px;
  font-weight: 700;
}
/* --- /theme/quantity-popover.css --- */
quantity-popover {
  position: relative;
  display: block;
}

quantity-popover volume-pricing li:nth-child(odd) {
  background: rgba(var(--color-foreground), 0.03);
}

quantity-popover volume-pricing li {
  font-size: 1.2rem;
  letter-spacing: 0.06rem;
  padding: 0.6rem 0.8rem;
  display: flex;
  justify-content: space-between;
}

.quantity-popover__info.global-settings-popup {
  width: 100%;
  z-index: 3;
  position: absolute;
  background-color: rgb(var(--color-background));
  max-width: 36rem;
}

.quantity-popover__info .button-close,
.variant-remove-total quick-order-list-remove-all-button .button,
.quick-order-list-total__confirmation quick-order-list-remove-all-button .button,
quantity-popover .quick-order-list-remove-button .button {
  --shadow-opacity: 0;
  --border-opacity: 0;
}

.quantity-popover__info-button {
  display: flex;
  align-items: center;
  margin: 0 0.4rem 0 0;
  min-width: 1.5rem;
  min-height: 1.5rem;
  --shadow-opacity: 0;
  --border-opacity: 0;
}

.quantity-popover__info-button--icon-with-label {
  text-align: left;
}

.quantity-popover__info-button--icon-with-label svg {
  flex-shrink: 0;
  width: 15px;
  height: 14px;
}

.quantity-popover__info-button--open {
  text-decoration: underline;
}

.quantity-popover__info-button span {
  padding-left: 1rem;
}

.quantity-popover__info-button--icon-only--animation svg {
  transform: scale(1.25);
}

.quantity-popover__info-button--icon-only svg {
  transition: transform var(--duration-default) ease;
  width: 15px;
  height: 14px;
}

@media screen and (max-width: 989px) {
  .quantity-popover__info.global-settings-popup {
    left: 0;
    top: 100%;
  }

  .quantity-popover__info-button {
    padding-left: 0;
  }
}

.quantity-popover__info .quantity__rules {
  margin-top: 1.2rem;
  margin-bottom: 1rem;
}

.quantity-popover__info .volume-pricing-label {
  display: block;
  margin-left: 1.2rem;
  margin-top: 1.2rem;
  font-size: 1.2rem;
}

.quantity-popover__info .button {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  top: 0.4rem;
  right: 0;
  padding: 0 1.2rem 0 0;
  display: flex;
  justify-content: flex-end;
}

.quantity-popover__info .volume-pricing-label ~ .button {
  top: -0.2rem;
}

.quantity-popover__info .button .icon {
  width: 1.5rem;
  height: 1.5rem;
}

quantity-popover volume-pricing {
  margin-top: 1.2rem;
  display: block;
}

quantity-popover .quantity__rules span:first-of-type {
  display: block;
}

.quantity-popover-container {
  display: flex;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.quantity-popover-container:not(.quantity-popover-container--hover) {
  align-items: center;
}

@media screen and (min-width: 990px) {
  .quantity-popover-container--empty {
    margin-right: 2.7rem;
  }

  .quantity-popover__info.global-settings-popup {
    width: 20rem;
  }

  .quantity-popover-container {
    width: auto;
    max-width: 20rem;
  }

  .quantity-popover__info.global-settings-popup {
    transform: translateX(-100%);
    top: 0.5rem;
  }
}

quantity-popover .quantity {
  background: rgb(var(--color-background));
}

quantity-popover .quantity__rules {
  margin-left: 0.8rem;
}

quantity-popover .quantity__rules .divider:nth-child(2)::before {
  content: none;
}

quantity-popover .quantity__button:not(:focus-visible):not(.focused),
quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
  background-color: initial;
}

/* --- /theme/quick-add.css --- */
.quick-add {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card--card .quick-add {
  margin: 0 1.3rem 1rem;
}

.quick-add-modal {
  box-sizing: border-box;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(var(--color-foreground), 0.2);
  height: 100%;
}

.quick-add-modal[open] {
  opacity: 1;
  visibility: visible;
  z-index: 101;
}

.quick-add-modal .scroll-trigger.scroll-trigger {
  animation: none;
  opacity: 1;
  transform: none;
}

.quick-add-modal .quick-order-list__container {
  padding-bottom: 1.5rem;
}

.quick-add-modal__content.quick-add-modal__content--bulk {
  width: 90%;
}

.quick-add-modal__content {
  --modal-height-offset: 3.2rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: var(--modal-height-offset) auto 0;
  width: 100%;
  background-color: rgb(var(--color-background));
  overflow: hidden;
  max-width: var(--page-width);
  width: calc(100% - 3rem);
}

@media screen and (min-width: 750px) {
  .quick-add-modal__content {
    --modal-height-offset: 10rem;
    margin-top: var(--modal-height-offset);
    width: 80%;
    max-height: calc(100% - var(--modal-height-offset) * 2);
    overflow-y: auto;
  }

  quick-add-modal .quick-add-modal__toggle {
    top: 2rem;
    right: 2rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content {
    width: 70%;
  }
}

.quick-add-modal__content img {
  max-width: 100%;
}

.quick-add-modal__content-info.quick-add-modal__content-info--bulk {
  padding-bottom: 0;
}

.quick-add-modal__content-info--bulk h3 {
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.quick-add-modal__content-info--bulk .price,
.quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
  display: inline-block;
}

.section-bulk-quick-order-list-padding {
  padding-top: 2.7rem;
  padding-bottom: 2.7rem;
}

@media screen and (min-width: 750px) {
  .section-bulk-quick-order-list-padding {
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  .quick-add-modal__content-info--bulk .card__information-volume-pricing-note {
    padding-left: 1.6rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    overflow-y: initial;
  }

  .quick-add-modal__content-info--bulk .quick-order-list__table th {
    padding-top: 2.5rem;
  }

  .quick-add-modal__content-info--bulk thead {
    position: sticky;
    z-index: 3;
    top: 0;
    background-color: rgb(var(--color-background));
  }
}

.quick-add-modal__content-info--bulk .quick-add__product-media,
.quick-add-modal__content-info--bulk .quick-add__product-container,
.quick-add-modal__content-info--bulk .quick-add__info {
  width: 4.8rem;
  height: 7rem;
}

.quick-add-modal__content-info--bulk-details {
  padding-left: 1rem;
}

.quick-add-modal__content-info--bulk-details > a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info--bulk .quick-add__product-media,
  .quick-add-modal__content-info--bulk .quick-add__product-container,
  .quick-add-modal__content-info--bulk .quick-add__info {
    width: 17rem;
    height: 22rem;
  }

  .quick-add-modal__content-info--bulk-details,
  .quick-add-modal__content-info--bulk quick-order-list {
    padding: 0 2.5rem;
  }
}

.quick-add__product-media {
  margin-bottom: 1rem;
}

.quick-add-modal__content-info--bulk .quick-add__product-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-add-modal__content-info--bulk .quick-add__info {
  display: flex;
}

.quick-add-modal__content-info--bulk .quick-add__content-info__media {
  width: auto;
}

@media screen and (max-width: 989px) {
  .quick-add-modal__content-info--bulk .quick-add__content-info__media {
    display: flex;
    margin: 0;
  }

  .quick-add-modal__content-info--bulk quick-order-list {
    padding-left: 0;
    padding-right: 0;
  }

  .quick-add-modal__content-info.quick-add-modal__content-info--bulk {
    --modal-padding: 1.5rem;
  }
}

@media screen and (min-width: 990px) {
  .quick-add-modal__content-info--bulk .quick-add__info {
    flex-direction: column;
    position: sticky;
    top: 0;
    margin-top: -2.5rem;
    padding-top: 2.5rem;
  }
}

@media screen and (max-width: 989px) {
  .quick-add-modal__content-info--bulk {
    flex-direction: column;
  }
}

.quick-add-modal__content-info {
  --modal-padding: 2.5rem;
  padding-right: 4.4rem;
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--modal-padding);
  height: 100%;
}

.quick-add-modal__content-info > * {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.quick-add-modal__content-info > product-info {
  padding: 0;
}

@media screen and (max-width: 749px) {
  quick-add-modal .slider .product__media-item.grid__item {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .quick-add-modal__content {
    bottom: var(--modal-height-offset);
  }

  .quick-add-modal__content-info > * {
    max-height: 100%;
  }

  quick-add-modal .product--mobile-columns .product__media-item {
    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
  }
}

.quick-add-modal__toggle {
  background-color: rgb(var(--color-background));
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-radius: 50%;
  color: rgba(var(--color-foreground), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1.2rem;
  z-index: 5;
  width: 4rem;
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
}

.quick-add-modal__toggle:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.quick-add-modal__toggle .icon {
  height: auto;
  margin: 0;
  width: 2.2rem;
}

quick-add-modal .product:not(.featured-product) .product__view-details {
  display: block;
}

.quick-add-modal__content--bulk .product__view-details .icon {
  margin-left: 1.2rem;
}

quick-add-modal .quick-add-hidden,
quick-add-modal .product__modal-opener:not(.product__modal-opener--image),
quick-add-modal .product__media-item:not(:first-child) {
  display: none !important;
}

quick-add-modal .slider.slider--mobile {
  overflow: visible;
}

quick-add-modal .product__column-sticky .product__media-list {
  margin-bottom: 0;
}

quick-add-modal .product__media-list .deferred-media {
  display: block;
  width: 100%;
}

quick-add-modal .product__column-sticky {
  top: 0;
  position: relative;
}

@media screen and (min-width: 750px) {
  quick-add-modal .product:not(.product--no-media) .product__media-wrapper {
    max-width: 45%;
    width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  quick-add-modal .product:not(.product--no-media) .product__info-wrapper {
    padding-top: 2rem;
    padding-left: 4rem;
    max-width: 54%;
    width: calc(54% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  quick-add-modal .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
    max-width: 100%;
    width: 100%;
  }

  quick-add-modal .thumbnail-slider .thumbnail-list.slider--tablet-up {
    display: none;
  }
}

quick-add-modal .page-width {
  padding: 0;
}

quick-add-modal .product__title > h1 {
  display: none;
}

quick-add-modal .product__title > a {
  display: block;
  text-decoration: none;
}

quick-add-modal .product__title > a:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.3rem;
}

quick-add-modal .product-form__buttons {
  max-width: initial;
}

.quick-add__submit {
  padding: 0.8rem;
  min-width: 100%;
  box-sizing: border-box;
}

quick-add-modal .product-media-container.constrain-height {
  --viewport-offset: calc((var(--modal-height-offset) + var(--modal-padding) + var(--popup-border-width)) * 2);
}

@media screen and (min-width: 750px) {
  quick-add-modal .product-media-container.constrain-height {
    --constrained-min-height: 400px;
  }
}

quick-add-bulk {
  position: relative;
  grid-row-start: 4;
  margin: 0 0 1rem;
  z-index: 1;
}

.card__content quick-add-bulk .quantity {
  width: 100%;
}

quick-add-bulk .progress-bar-container {
  position: absolute;
  height: 100%;
  display: flex;
  overflow: hidden;
  border-radius: var(--inputs-radius-outset);
  border: var(--inputs-border-width) solid transparent;
  z-index: -1;
}

quick-add-bulk quantity-input {
  justify-content: space-between;
}

quick-add-bulk .quantity__input {
  max-width: calc(6.5rem / var(--font-body-scale));
  flex-grow: 0;
}

.quantity__input-disabled {
  pointer-events: none;
}

/* --- /theme/quick-order-list.css --- */
quick-order-list {
  display: block;
}

quick-order-list .quantity {
  width: calc(11rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  min-height: calc((var(--inputs-border-width) * 2) + 3.5rem);
}

quick-order-list .quantity__button {
  width: calc(3.5rem / var(--font-body-scale));
}

quick-order-list .pagination-wrapper {
  margin-top: 2rem;
}

.quick-order-list__contents {
  position: relative;
  padding-bottom: 2rem;
}

.quick-order-list__container--disabled {
  pointer-events: none;
  opacity: 0.5;
}

.quick-order-list__total {
  padding-top: 2rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.variant-item__quantity .quantity:before {
  z-index: 0;
}

.variant-item__quantity .quantity__button {
  z-index: 1;
}

.variant-item__image-container.global-media-settings::after {
  content: none;
}

@media screen and (min-width: 990px) {
  .quick-order-list__total {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background-color: rgb(var(--color-background));
  }

  .variant-item__quantity-wrapper--no-info,
  .variant-item__error {
    padding-left: calc(15px + 3.4rem);
  }

  .variant-item__error {
    margin-left: 0.3rem;
  }

  .variant-item--unit-price .variant-item__totals {
    vertical-align: top;
  }

  .variant-item--unit-price .variant-item__totals .loading__spinner {
    padding-top: 1.7rem;
  }
}

.quick-order-list__table td,
.quick-order-list__table th {
  padding: 0;
  border: none;
}

.quick-order-list__table th {
  text-align: left;
  padding-bottom: 2rem;
  opacity: 0.85;
  font-weight: normal;
  font-size: 1.1rem;
}

.variant-item__quantity-wrapper {
  display: flex;
}

.variant-item__totals,
.variant-item__details,
.variant-item__price {
  position: relative;
}

.variant-item__price .price,
.variant-item__totals .price {
  display: block;
}

.quick-order-list__table *.right {
  text-align: right;
}

.variant-item__image-container {
  display: inline-flex;
  align-items: flex-start;
  height: 4.5rem;
  width: 4.5rem;
}

.variant-item__media {
  width: 4.5rem;
  height: 4.5rem;
  margin-right: 1.2rem;
}

.variant-item__image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media screen and (min-width: 990px) {
  .variant-item__image {
    max-width: 100%;
  }

  .variant-item__inner .small-hide {
    display: flex;
    flex-direction: column;
    align-self: center;
  }

  .variant-item:not(.variant-item--no-media) .variant-item__inner {
    display: flex;
  }

  .variant-item__discounted-prices {
    justify-content: flex-end;
  }
}

.variant-item__details {
  font-size: 1.6rem;
  line-height: calc(1 + 0.4 / var(--font-body-scale));
}

.variant-item__details > * {
  margin: 0;
  max-width: 30rem;
}

.variant-item__info {
  position: relative;
  padding-bottom: 0.5rem;
}

.variant-item__name {
  display: block;
  font-size: 1.6rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
}

.variant-item__sku {
  font-size: 1.1rem;
  letter-spacing: 0.04rem;
  margin-top: 0.2rem;
}

.variant-item__discounted-prices {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.variant-item__discounted-prices dd {
  margin: 0;
}

.variant-item__discounted-prices dd:first-of-type {
  margin-right: 0.8rem;
}

.variant-item__discounted-prices .variant-item__old-price {
  font-size: 1.4rem;
}

.variant-item__old-price {
  opacity: 0.7;
}

.variant-item__final-price {
  font-weight: 400;
}

.variant-item__sold-out {
  opacity: 0.7;
  font-size: 1.6rem;
  color: rgb(var(--color-foreground));
}

.quick-order-list-remove-button {
  display: flex;
  margin: 0 0 0 1.2rem;
  align-self: center;
}

.quick-order-list__button-cancel {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .quick-order-list-remove-button {
    width: 1.5rem;
    height: 1.5rem;
  }

  .quick-order-list-total__column.large-up-hide .loading__spinner {
    margin-top: 2.5rem;
  }

  quick-order-list-remove-all-button {
    margin-left: -1.5rem;
    margin-top: 1rem;
  }

  .quick-order-list-total__column {
    flex-wrap: wrap;
  }

  .quick-order-list__message,
  .quick-order-list-error {
    padding-bottom: 1rem;
  }
}

.quick-order-list-remove-button .button {
  min-width: calc(1.5rem / var(--font-body-scale));
  min-height: 1.5rem;
  padding: 0;
  margin: 0 0.1rem 0.1rem 0;
}

.quick-order-list-remove-button .button:not([disabled]):hover {
  color: rgb(var(--color-foreground));
}

.quick-order-list-remove-button .icon-remove {
  height: 1.5rem;
  width: 1.5rem;
  transition: transform var(--duration-default) ease;
}

.variant-item .loading__spinner {
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  padding: 0;
}

.variant-remove-total {
  position: relative;
  align-self: center;
}

.variant-remove-total .button--tertiary {
  width: max-content;
}

.variant-remove-total .icon-remove {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
}

.quick-order-list__message {
  margin-top: 1rem;
  display: block;
}

.quick-order-list__message .svg-wrapper {
  margin-right: 1rem;
  width: 1.3rem;
}

.quick-order-list-error {
  margin-top: 1rem;
  display: flex;
}

.quick-order-list-error .svg-wrapper {
  flex-shrink: 0;
  margin-right: 0.7rem;
  align-self: flex-start;
}

@media screen and (min-width: 990px) {
  .variant-item .loading__spinner {
    padding-top: 3rem;
    bottom: auto;
  }

  .variant-item .loading__spinner--error {
    padding-top: 5rem;
  }

  .variant-remove-total .loading__spinner {
    left: 2rem;
    top: 1.2rem;
  }

 .variant-remove-total--empty .loading__spinner {
    top: -1rem;
  }
}

.quick-order-list-remove-button:hover .icon-remove {
  transform: scale(1.25);
}

.quick-order-list-total__info quick-order-list-remove-all-button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.variant-remove-total {
  position: relative;
  align-self: center;
}

.variant-item .loading__spinner:not(.hidden) ~ *,
.variant-remove-total .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

.quick-order-list-total__info .loading__spinner:not(.hidden) + quick-order-list-remove-all-button {
  visibility: hidden;
}

.variant-item__error {
  display: flex;
  align-items: flex-start;
  margin-top: 0.2rem;
  width: min-content;
  min-width: 100%;
}

.variant-item__error-text {
  font-size: 1.2rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  order: 1;
}

.variant-item__error-text + .svg-wrapper {
  flex-shrink: 0;
  width: 1.2rem;
  margin-right: 0.5rem;
  margin-top: 0.1rem;
}

.variant-item__error-text:empty + .svg-wrapper {
  display: none;
}

.quick-order-list__table thead th {
  text-transform: uppercase;
}

.variant-item__image-container--no-img {
  border: 0;
}

@media screen and (max-width: 989px) {
  .quick-order-list-total__info {
    flex-direction: column;
    align-items: center;
  }

  .variant-item__details .loading__spinner {
    left: 0;
    top: auto;
  }

  .quick-order-list__table,
  .quick-order-list__table thead,
  .quick-order-list__table tbody {
    display: block;
    width: 100%;
  }

  .quick-order-list__table thead tr {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
    margin-bottom: 4rem;
  }

  .variant-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-rows: repeat(2, auto);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
  }

  .variant-item--no-media {
    grid-template: repeat(2, auto) / repeat(3, auto);
  }

  .variant-item:last-child {
    margin-bottom: 0;
  }

  .variant-item__totals {
    grid-column: 5 / 3;
  }

  .variant-item--no-media .variant-item__inner ~ .variant-item__quantity {
    grid-column: 1 / 5;
  }

  .variant-item__quantity {
    grid-column: 2 / 5;
  }

  .variant-item__quantity-wrapper {
    flex-wrap: wrap;
  }

  .variant-item--no-media .variant-item__inner {
    display: none;
  }

  .variant-remove-total {
    margin-top: 1rem;
    text-align: center;
  }

  .quick-order-list__message {
    text-align: center;
  }

  .quick-order-list-total__column,
  .quick-order-list-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .quick-order-list__button {
    max-width: 36rem;
  }
}

.quick-order-list__button-text {
  text-align: center;
}

.quick-order-list-total__confirmation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -2rem;
}

@media screen and (min-width: 990px) {
  .quick-order-list__table {
    border-spacing: 0;
    border-collapse: separate;
    box-shadow: none;
    width: 100%;
    display: table;
  }

  .quick-order-list__table th {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }

  .quick-order-list__table th + th {
    padding-left: 5.4rem;
  }

  .quick-order-list__table .quick-order-list__table-heading--wide + .quick-order-list__table-heading--wide {
    padding-left: 10rem;
    text-align: right;
  }

  .quick-order-list__table td {
    padding-top: 1.6rem;
  }

  .quick-order-list__table .desktop-row-error td {
    padding-top: 0;
  }

  .quick-order-list__table .desktop-row-error td {
    padding-top: 0;
  }

  .quick-order-list__table .variant-item--unit-price td {
    vertical-align: middle;
  }

  .variant-item {
    display: table-row;
  }

  .variant-item .variant-item__price {
    text-align: right;
  }

  .variant-item__info {
    width: 20rem;
    display: flex;
    padding: 0.5rem;
  }

  .quick-order-list-total__confirmation span {
    margin-right: 3rem;
  }

  .quick-order-list__total-items {
    width: calc(((11rem / var(--font-body-scale) + var(--inputs-border-width) * 2)));
    margin-left: calc(15px + 3.4rem);
    flex-direction: column;
  }
}

@media screen and (min-width: 990px) {
  .quick-order-list__table thead th:first-child,
  .quick-order-list-total__column {
    width: 37%;
  }

  .quick-order-list-buttons {
    display: flex;
  }

  quick-order-list-remove-all-button {
    margin-left: 0.9rem;
  }
}

.quick-order-list-total__column.large-up-hide .variant-remove-total {
  display: flex;
  justify-content: center;
  margin: 0;

  .loading__spinner {
    margin-top: 1.5rem;
  }
}

.quick-order-list__total-items {
  display: flex;
  align-items: center;
}

.quick-order-list__total-items span,
.totals__subtotal-value {
  margin-top: 0;
  margin-bottom: 0;
  color: rgb(var(--color-foreground));
}

.quick-order-list__total-items p,
.totals__subtotal {
  margin-top: 0.2rem;
  opacity: 0.75;
  margin-bottom: 0;
}

.quick-order-list__total-items p {
  text-align: center;
}

.quick-order-list-total__info {
  display: flex;
}

.quick-order-list-total__info,
.quick-order-list-total__confirmation {
  min-height: 10rem;
}

.quick-order-list-total__price {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-grow: 1;
  text-align: right;
  width: min-content;
}

.quick-order-list-total__price .button {
  margin-right: 2rem;
}

@media screen and (max-width: 989px) {
  .quick-order-list-total__price {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .totals__product-total {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    padding-bottom: 2rem;
  }

  .totals__subtotal-value,
  .quick-order-list__total-items span {
    margin-right: 1.2rem;
  }

  .quick-order-list__total-items {
    margin-top: 1rem;
    margin-bottom: 1.3rem;
  }

  .quick-order-list-total__price .button {
    margin-bottom: 2rem;
  }

  .quick-order-list-total__confirmation quick-order-list-remove-all-button button {
    margin-top: 1rem;
  }

  .quick-order-list-total__confirmation {
    flex-direction: column;
    margin-top: 2rem;
  }

  .quick-order-list__button-confirm {
    width: 100%;
    max-width: 36rem;
  }

  quick-order-list .tax-note {
    text-align: center;
  }
}

quick-order-list .tax-note {
  margin: 0 0 2rem;
  display: block;
  width: 100%;
}

/* --- /theme/section-blog-post.css --- */
.article-template > *:first-child:not(.article-template__hero-container) {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .article-template > *:first-child:not(.article-template__hero-container) {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.article-template__hero-container {
  max-width: 130rem;
  margin: 0 auto;
}

.article-template__hero-small {
  height: 11rem;
}

.article-template__hero-medium {
  height: 22rem;
}

.article-template__hero-large {
  height: 33rem;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .article-template__hero-small {
    height: 22rem;
  }

  .article-template__hero-medium {
    height: 44rem;
  }

  .article-template__hero-large {
    height: 66rem;
  }
}

@media screen and (min-width: 990px) {
  .article-template__hero-small {
    height: 27.5rem;
  }

  .article-template__hero-medium {
    height: 55rem;
  }

  .article-template__hero-large {
    height: 82.5rem;
  }
}

.article-template header {
  margin-top: 4.4rem;
  margin-bottom: 2rem;
  line-height: calc(0.8 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .article-template header {
    margin-top: 5rem;
  }
}

.article-template__title {
  margin: 0;
}

.article-template__title:not(:only-child) {
  margin-bottom: 1rem;
}

.article-template__link {
  font-size: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.article-template__link .icon-wrap {
  display: flex;
  margin-right: 1rem;
  transform: rotate(180deg);
}

.article-template__content {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.article-template__social-sharing {
  margin-top: 3rem;
}

.article-template__social-sharing + header,
.article-template__social-sharing + .article-template__content {
  margin-top: 1.5rem;
}

.article-template__comment-wrapper {
  margin-top: 5rem;
  padding: 2.7rem 0;
}

@media screen and (min-width: 750px) {
  .article-template__comment-wrapper {
    margin-top: 6rem;
    padding: 3.6rem 0;
  }
}

.article-template__comment-wrapper h2 {
  margin-top: 0;
}

.article-template__comments {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .article-template__comments {
    margin-bottom: 7rem;
  }
}

.article-template__comments-fields {
  margin-bottom: 4rem;
}

.article-template__comments-comment {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
  margin-bottom: 1.5rem;
  padding: 2rem 2rem 1.5rem;
}

@media screen and (min-width: 750px) {
  .article-template__comments-comment {
    padding: 2rem 2.5rem;
  }
}

.article-template__comments-comment p {
  margin: 0 0 1rem;
}

.article-template__comment-fields > * {
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .article-template__comment-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 4rem;
  }
}

.article-template__comment-warning {
  margin: 2rem 0 2.5rem;
}

@media screen and (min-width: 990px) {
  .article-template__comments .pagination-wrapper {
    margin: 5rem 0 8rem;
  }
}

.article-template__back:last-child {
  margin-bottom: 3.2rem;
}

/* --- /theme/section-collection-list.css --- */
.collection-list {
  margin-top: 0;
  margin-bottom: 0;
}

.collection-list-title {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .collection-list:not(.slider) {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section-collection-list .page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .collection-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.collection-list__item:only-child {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .slider.collection-list--1-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider.collection-list--1-items,
  .slider.collection-list--2-items,
  .slider.collection-list--3-items,
  .slider.collection-list--4-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection-list__item a:hover {
    box-shadow: none;
  }
}

@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 100%;
  }
}

.collection-list-view-all {
  margin-top: 2rem;
}

/* --- /theme/section-email-signup-banner.css --- */
.email-signup-banner .newsletter-form,
.email-signup-banner .newsletter-form__field-wrapper {
  display: inline-block;
}

@media only screen and (min-width: 750px) {
  .email-signup-banner:not(.banner--desktop-transparent) .email-signup-banner__box {
    width: 100%;
  }
}

.email-signup-banner__box .email-signup-banner__heading {
  margin-bottom: 0;
}

.email-signup-banner__box > * + .newsletter__subheading {
  margin-top: 2rem;
}

.email-signup-banner__box .newsletter__subheading p {
  margin: 0;
}

.email-signup-banner-background {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 749px) {
  .email-signup-banner:not(.banner--mobile-bottom) .banner__box:not(.email-signup-banner__box--no-image) {
    background-color: transparent;
    --color-foreground: 255, 255, 255;
    --color-button: 255, 255, 255;
    --color-button-text: 0, 0, 0;
  }
}

@media only screen and (min-width: 750px) {
  .banner--desktop-transparent .email-signup-banner__box--no-image * {
    color: rgb(var(--color-foreground));
  }

  .banner--desktop-transparent .email-signup-banner__box .field__input {
    background-color: transparent;
  }

  .banner--desktop-transparent .email-signup-banner__box--no-image .field__input {
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  }

  .banner--desktop-transparent .email-signup-banner__box--no-image .field__input:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
  }

  .banner--desktop-transparent .email-signup-banner__box--no-image .field__button:focus-visible {
    outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
    box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  }
}

@media only screen and (min-width: 750px) {
  .email-signup-banner-background-mobile {
    display: none;
  }
}

@media only screen and (max-width: 749px) {
  .email-signup-banner-background:not(.email-signup-banner-background-mobile) {
    display: none;
  }
}

.email-signup-banner .banner__media {
  overflow: hidden;
}

@media screen and (max-width: 749px) {
  .banner--mobile-content-align-left .newsletter-form__message {
    justify-content: flex-start;
  }

  .banner--mobile-content-align-right .newsletter-form__message {
    justify-content: right;
  }
}

@media screen and (min-width: 750px) {
  .banner--content-align-center .newsletter-form__message {
    justify-content: center;
  }

  .banner--content-align-right .newsletter-form__message {
    justify-content: right;
  }
}

/* --- /theme/section-featured-blog.css --- */
.blog-placeholder-svg {
  height: 100%;
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop .article-card .card__content {
    text-align: center;
  }
}

.blog__title {
  margin: 0;
}

.blog__posts.articles-wrapper {
  margin-bottom: 1rem;
}

@media screen and (min-width: 990px) {
  .blog__posts.articles-wrapper {
    margin-bottom: 0;
  }
}

.blog__posts.articles-wrapper .article {
  scroll-snap-align: start;
}

@media screen and (max-width: 749px) {
  .blog__post.article {
    width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing));
  }
}

.background-secondary .blog-placeholder__content {
  background-color: rgb(var(--color-background));
}

.blog__posts .card-wrapper {
  width: 100%;
}

.blog__button {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .blog__button {
    margin-top: 5rem;
  }
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  @media screen and (min-width: 750px) {
    .blog__posts .article + .article {
      margin-left: var(--grid-desktop-horizontal-spacing);
    }
  }
}

/* --- /theme/section-featured-product.css --- */
.featured-product .product__media-list {
  width: 100%;
  margin: 0;
  padding-bottom: 0;
}

.featured-product .product-media-container {
  margin-bottom: var(--media-shadow-vertical-offset);
  max-width: 100%;
}

.featured-product .product__media-item {
  padding-left: 0;
}

.featured-product .placeholder-svg {
  display: block;
  height: auto;
  width: 100%;
}

.background-secondary .featured-product {
  padding: 2.5rem;
}

.featured-product .share-button:nth-last-child(2) {
  display: inline-flex;
}

.share-button + .product__view-details {
  display: inline-flex;
  float: right;
  align-items: center;
  min-height: 4.4rem;
}

.share-button + .product__view-details::after {
  content: '';
  clear: both;
  display: table;
}

@media screen and (min-width: 750px) {
  .featured-product .product__media-item {
    padding-bottom: 0;
  }

  .background-secondary .featured-product {
    padding: 5rem;
  }

  .product--right .product__media-wrapper {
    order: 2;
  }
}

@media screen and (min-width: 990px) {
  .background-secondary .featured-product:not(.product--no-media) > .product__info-wrapper {
    padding: 0 0 0 5rem;
  }

  .background-secondary .featured-product:not(.product--no-media).product--right > .product__info-wrapper {
    padding: 0 5rem 0 0;
  }

  .featured-product:not(.product--no-media) > .product__info-wrapper {
    padding: 0 7rem;
  }

  .background-secondary .featured-product {
    padding: 6rem 7rem;
    position: relative;
    z-index: 1;
  }
}

/* --- /theme/section-image-banner.css --- */
.banner {
  display: flex;
  position: relative;
  flex-direction: column;
  z-index: auto;
  isolation: isolate;
}

.banner__box {
  text-align: center;
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.banner__box.gradient {
  transform: perspective(0);
}

@media only screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__box {
    text-align: right;
  }

  .banner--content-align-mobile-left .banner__box {
    text-align: left;
  }
}

@media only screen and (min-width: 750px) {
  .banner--content-align-right .banner__box {
    text-align: right;
  }

  .banner--content-align-left .banner__box {
    text-align: left;
  }

  .banner--content-align-left.banner--desktop-transparent .banner__box,
  .banner--content-align-right.banner--desktop-transparent .banner__box,
  .banner--medium.banner--desktop-transparent .banner__box {
    max-width: 68rem;
  }
}

.banner__media.animate--zoom-in {
  clip-path: inset(0px);
}

.banner__media.animate--zoom-in > img:not(.zoom):not(.deferred-media__poster-button),
.banner__media.animate--zoom-in > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

@media screen and (max-width: 749px) {
  .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 28rem;
  }

  .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 34rem;
  }

  .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 39rem;
  }

  .banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 28rem;
  }

  .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 34rem;
  }

  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 39rem;
  }
}

@media screen and (min-width: 750px) {
  .banner {
    flex-direction: row;
  }

  .banner--small:not(.banner--adapt) {
    min-height: 42rem;
  }

  .banner--medium:not(.banner--adapt) {
    min-height: 56rem;
  }

  .banner--large:not(.banner--adapt) {
    min-height: 72rem;
  }

  .banner__content.banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content.banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content.banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content.banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content.banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content.banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content.banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content.banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content.banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .banner:not(.banner--stacked) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .banner--stacked {
    height: auto;
  }

  .banner--stacked .banner__media {
    flex-direction: column;
  }
}

.banner__media {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.banner__media-half {
  width: 50%;
}

.banner__media-half + .banner__media-half {
  right: 0;
  left: auto;
}

.banner__media-half.animate--fixed:first-child > img,
.banner__media-half.animate--zoom-in:first-child > img {
  width: 50%;
}

.banner__media-half.animate--fixed:nth-child(2) > img,
.banner__media-half.animate--zoom-in:nth-child(2) > img {
  left: 50%;
  width: 50%;
}

@media screen and (max-width: 749px) {
  .banner--stacked .animate--fixed:first-child > img,
  .banner--stacked .animate--zoom-in:first-child > img {
    width: 100%;
  }

  .banner--stacked .banner__media-half.animate--fixed:nth-child(2) > img,
  .banner--stacked .banner__media-half.animate--zoom-in:nth-child(2) > img {
    left: 0;
    width: 100%;
  }

  .banner--stacked .banner__media-half {
    width: 100%;
  }

  .banner--stacked .banner__media-half + .banner__media-half {
    order: 1;
  }
}

@media screen and (min-width: 750px) {
  .banner__media {
    height: 100%;
  }
}

.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
  height: auto;
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom .banner__media,
  .banner--stacked:not(.banner--mobile-bottom) .banner__media {
    position: relative;
  }

  .banner--stacked.banner--adapt .banner__content {
    height: auto;
  }

  .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: transparent;
  }

  .banner:not(.banner--mobile-bottom) .banner__box {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner:not(.banner--mobile-bottom) .button--secondary {
    --alpha-button-background: 0;
  }

  .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    position: absolute;
    height: auto;
  }

  .banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
    max-height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .banner--stacked:not(.banner--adapt) .banner__media {
    position: relative;
  }

  .banner::before {
    display: none !important;
  }

  .banner--stacked .banner__media-image-half {
    width: 100%;
  }
}

.banner__content {
  padding: 0;
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@media screen and (min-width: 750px) {
  .banner__content {
    padding: 5rem;
  }

  .banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 2;
  }

  .banner:not(.banner--mobile-bottom) .field__input,
  .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
    background: transparent;
  }
}

.banner__box {
  padding: 4rem 1.5rem;
  position: relative;
  height: fit-content;
  align-items: center;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  z-index: 1;
}

.banner--mobile-bottom .banner__box {
  padding: 4rem 3.5rem;
}

@media screen and (min-width: 750px) {
  .banner__box {
    padding: 4rem 3.5rem;
  }

  .banner--desktop-transparent .banner__box {
    padding: 4rem 0;
    background: transparent;
    max-width: 89rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner--desktop-transparent .button--secondary {
    --alpha-button-background: 0;
  }

  .banner--desktop-transparent .content-container:after {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .banner--mobile-bottom::after,
  .banner--mobile-bottom .banner__media::after {
    display: none;
  }
}

.banner::after,
.banner__media::after {
  content: '';
  position: absolute;
  top: 0;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.banner__box > * + .banner__text {
  margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
  .banner__box > * + .banner__text {
    margin-top: 2rem;
  }
}

.banner__box > * + * {
  margin-top: 1rem;
}

.banner__box > *:first-child {
  margin-top: 0;
}

@media screen and (max-width: 749px) {
  .banner--stacked .banner__box {
    width: 100%;
  }
}

@media screen and (min-width: 750px) {
  .banner__box {
    width: auto;
    max-width: 71rem;
    min-width: 45rem;
  }
}

@media screen and (min-width: 1400px) {
  .banner__box {
    max-width: 90rem;
  }
}

.banner__heading {
  margin-bottom: 0;
}

.banner__box .banner__heading + * {
  margin-top: 1rem;
}

.banner__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 45rem;
  word-break: break-word;
}

@media screen and (max-width: 749px) {
  .banner--content-align-mobile-right .banner__buttons--multiple {
    justify-content: flex-end;
  }

  .banner--content-align-mobile-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }
}

@media screen and (min-width: 750px) {
  .banner--content-align-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }

  .banner--content-align-right .banner__buttons--multiple {
    justify-content: flex-end;
  }
}

.banner__box > * + .banner__buttons {
  margin-top: 2rem;
}

@media screen and (max-width: 749px) {
  .banner:not(.slideshow) .rte a,
  .banner:not(.slideshow) .inline-richtext a:hover,
  .banner:not(.slideshow) .rte a:hover {
    color: currentColor;
  }
}

@media screen and (min-width: 750px) {
  .banner--desktop-transparent .rte a,
  .banner--desktop-transparent .inline-richtext a:hover,
  .banner--desktop-transparent .rte a:hover {
    color: currentColor;
  }
}

/* --- /theme/section-main-blog.css --- */
.blog-articles {
  display: grid;
  grid-gap: 1rem;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

.blog-articles .card-wrapper {
  width: 100%;
}

@media screen and (min-width: 750px) {
  .blog-articles {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }

  .blog-articles--collage > *:nth-child(3n + 1),
  .blog-articles--collage > *:nth-child(3n + 2):last-child {
    grid-column: span 2;
    text-align: center;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .card,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .card {
    text-align: center;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio::before {
    padding-bottom: 22rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
    padding-bottom: 44rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
    padding-bottom: 66rem;
  }
}

@media screen and (min-width: 990px) {
  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio .ratio::before {
    padding-bottom: 27.5rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
    padding-bottom: 55rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
    padding-bottom: 82.5rem;
  }
}

/* --- /theme/section-main-page.css --- */
.page-title {
  margin-top: 0;
}

.main-page-title {
  margin-bottom: 3rem;
}

@media screen and (min-width: 750px) {
  .main-page-title {
    margin-bottom: 4rem;
  }
}

.page-placeholder-wrapper {
  display: flex;
  justify-content: center;
}

.page-placeholder {
  width: 52.5rem;
  height: 52.5rem;
}

/* --- /theme/section-multicolumn.css --- */
.multicolumn .title {
  margin: 0;
}

.multicolumn.no-heading .title {
  display: none;
}

.multicolumn .title-wrapper-with-link {
  margin-top: 0;
}

@media screen and (max-width: 749px) {
  .multicolumn .title-wrapper-with-link {
    margin-bottom: 3rem;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .multicolumn__title {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media screen and (max-width: 989px) {
  .multicolumn .page-width {
    padding-left: 0;
    padding-right: 0;
  }
}

.multicolumn-card__image-wrapper--third-width {
  width: 33%;
}

.multicolumn-card__image-wrapper--half-width {
  width: 50%;
}

.multicolumn-list__item.center .multicolumn-card__image-wrapper:not(.multicolumn-card__image-wrapper--full-width),
.multicolumn-list__item:only-child {
  margin-left: auto;
  margin-right: auto;
}

.multicolumn .button {
  margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
  .multicolumn .button {
    margin-top: 4rem;
  }
}

.multicolumn-list {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

.multicolumn-list__item:only-child {
  max-width: 72rem;
}

.multicolumn-list__item--empty {
  display: none;
}

.multicolumn:not(.background-none) .multicolumn-card {
  background: rgb(var(--color-background));
  height: 100%;
}

.multicolumn.background-primary .multicolumn-card {
  background: rgb(var(--color-background))
    linear-gradient(rgba(var(--color-foreground), 0.04), rgba(var(--color-foreground), 0.04));
}

.multicolumn-list h3 {
  line-height: calc(1 + 0.5 / max(1, var(--font-heading-scale)));
}

.multicolumn-list h3,
.multicolumn-list p {
  margin: 0;
}

.multicolumn-card-spacing {
  padding-top: 2.5rem;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.multicolumn-card__info > :nth-child(2) {
  margin-top: 1rem;
}

.multicolumn-list__item.center .media--adapt,
.multicolumn-list__item .media--adapt .multicolumn-card__image {
  width: auto;
}

.multicolumn-list__item.center .media--adapt img {
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 749px) {
  .multicolumn-list {
    margin: 0;
    width: 100%;
  }

  .multicolumn-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .multicolumn-list:not(.slider) {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media screen and (min-width: 750px) {
  .multicolumn-list.slider {
    padding: 0;
  }

  .multicolumn-list__item,
  .grid--4-col-desktop .multicolumn-list__item {
    padding-bottom: 0;
  }

  .background-none .grid--2-col-tablet .multicolumn-list__item {
    margin-top: 4rem;
  }
}

.background-none .multicolumn-card-spacing {
  padding: 0;
  margin: 0;
}

.multicolumn-card__info {
  padding: 2.5rem;
}

.background-none .multicolumn-card__info {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.background-none .slider .multicolumn-card__info {
  padding-bottom: 0;
}

.background-none .multicolumn-card__image-wrapper + .multicolumn-card__info {
  padding-top: 2.5rem;
}

.background-none .slider .multicolumn-card__info {
  padding-left: 0.5rem;
}

.background-none .slider .multicolumn-card__image-wrapper + .multicolumn-card__info {
  padding-left: 1.5rem;
}

.background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

@media screen and (max-width: 749px) {
  .background-none .slider .multicolumn-card__info {
    padding-bottom: 1rem;
  }

  .multicolumn.background-none .slider.slider--mobile {
    margin-bottom: 0rem;
  }
}

@media screen and (min-width: 750px) {
  .background-none .multicolumn-card__image-wrapper {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .background-none .multicolumn-list .multicolumn-card__info,
  .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.multicolumn-card {
  position: relative;
  box-sizing: border-box;
}

.multicolumn-card > .multicolumn-card__image-wrapper--full-width:not(.multicolumn-card-spacing) {
  border-top-left-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
  border-top-right-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
  overflow: hidden;
}

.multicolumn.background-none .multicolumn-card {
  border-radius: 0;
}

.multicolumn-card__info .link {
  text-decoration: none;
  font-size: inherit;
  margin-top: 1.5rem;
}

.multicolumn-card__info .icon-wrap {
  margin-left: 0.8rem;
  white-space: nowrap;
}

@media screen and (min-width: 990px) {
  .multicolumn-list__item--empty {
    display: list-item;
  }
}

/* --- /theme/section-rich-text.css --- */
.show-more-description svg path{
  fill:#000;
}
.show-more-description svg {
  width: 18px;
  height: 20px;
}
.show-more-description:hover svg path{
  fill:#000000;
}
.rich-text {
  z-index: 1;
}
.rich-text__text {
  overflow:hidden;
  transition:all 0.4s;
  color: #000;
    font-weight: 400;
    font-size: 24px;
}

.rich-text__wrapper {
  display: flex;
  justify-content: center;
}

.rich-text:not(.rich-text--full-width) .rich-text__wrapper {
  margin: auto;
  width: calc(100% - 8rem / var(--font-body-scale));
}
.rich-text__heading {
  font-size:36px;
  color:#000000 !important;
  text-transform: uppercase;
}
.rich-text__blocks {
  width: 100%;
  font-size: 18px;
}
.show-more-description {
    color: #000;
    display: inline-flex;
    gap: 15px;
    font-size: 24px;
    align-items: center;
  
}
.show-more-description:hover {
    color: #000000;
    display: inline-flex;
    gap: 15px;
    align-items: center;
}

@media screen and (min-width: 750px) {
  .rich-text__wrapper {
    width: 100%;
  }
  .rich-text__heading {
}
  .rich-text__blocks {
  width: 100%;
  font-size: 15px;
}

  .rich-text__wrapper--left {
    justify-content: flex-start;
  }

  .rich-text__wrapper--right {
    justify-content: flex-end;
  }

}
@media screen and (max-width: 750px) {
.rich-text__heading {
  font-size:20px
}
.rich-text__text {
  font-size:16px
}
.show-more-description{
  text-transform: uppercase;
  display:inline-flex;
  gap:15px;
  font-size:15px; 
  align-items: center;
  letter-spacing: 2px;
}
}


.rich-text__blocks * {
  overflow-wrap: break-word;
}

.rich-text__blocks > * {
  margin-top: 0;
  margin-bottom: 0;
}

.rich-text__blocks > * + * {
  margin-top: 2rem;
}

.rich-text__blocks > * + a {
  margin-top: 3rem;
}

.rich-text__buttons {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  max-width: 45rem;
  word-break: break-word;
}

.rich-text__buttons--multiple > * {
  flex-grow: 1;
  min-width: 22rem;
}

.rich-text__buttons + .rich-text__buttons {
  margin-top: 1rem;
}

.rich-text__blocks.left .rich-text__buttons {
  justify-content: flex-start;
}

.rich-text__blocks.right .rich-text__buttons {
  justify-content: flex-end;
}
.description-wrapper {
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.description-wrapper.collapsed {
  max-height: 140px; 
}

.description-wrapper.expanded {
  max-height: 9999px;
}


  .rich-text__text.truncated span,
  .rich-text__text.truncated p {
    display: inline;
  }
/* --- /theme/template-collection.css --- */
.collection__title h2{
  color:#fff;
}

.collection__description p{
  color:#fff;
}
@media(max-width:860px){
  .collection__title h2{
  color:#000000 !important;
}
  .collection__description p{
  color:#000000;
}
}
.background-image{
   background-image: url('/theme-generated/back_perks-1440.webp') !important;
   background-image: image-set(url('/theme-generated/back_perks-1440.avif') type('image/avif'), url('/theme-generated/back_perks-1440.webp') type('image/webp')) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important; 
    background-color: #fff !important;
}
@media screen and (max-width: 749px) {
  .collection .grid__item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 989px) {
  .collection .slider.slider--tablet {
    margin-bottom: 1.5rem;
  }
}

.collection .loading-overlay {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

@media screen and (max-width: 749px) {
  .collection .loading-overlay {
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    left: 0;
  }
}

.collection .loading-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 0 1.5rem;
  opacity: 0.7;
}

@media screen and (min-width: 750px) {
  .collection .loading-overlay {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.collection.loading .loading-overlay {
  display: block;
}

.collection--empty .title-wrapper {
  margin-top: 10rem;
  margin-bottom: 15rem;
}

@media screen and (max-width: 989px) {
  .collection .slider--tablet.product-grid {
    scroll-padding-left: 1.5rem;
  }
}

.collection__description > * {
  margin: 0;
}


  .collection__title h2{
    color:#fff;
  }
  .collection__title--desktop-slider .title,.collection__title {
    margin-bottom: 0;
    text-transform: uppercase;
    line-height: 1;
    font-size: 38px;
    padding: 0;
    text-align: center;
    color: #fff;
    font-family: 'Alfa Slab One', 'Alfa Slab One', 'Alfa Slab One', 'Gowun Batang', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
  }
  .collection__title--desktop-slider p .title,.collection__title p{
    font-size: 25px;
  }
@media screen and (min-width: 990px) {
  .collection__title--desktop-slider p .title,.collection__title p{
    font-size: 20px;
  }

  .collection slider-component:not(.page-width-desktop) {
    padding: 0;
  }

  .collection--full-width slider-component:not(.slider-component-desktop) {
    padding: 0 1.5rem;
    max-width: none;
  }
}

.collection__view-all a:not(.link) {
  margin-top: 1rem;
}
@media screen and (max-width:860px){
  .collection__title--desktop-slider .title,.collection__title {
    margin-bottom: 15px;
    text-transform: uppercase;
    line-height: 1;
    font-size: 40px !important;
    font-family: 'Alfa Slab One', 'Alfa Slab One', 'Alfa Slab One', 'Gowun Batang', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  .collection__title--desktop-slider p .title,.collection__title p{
    font-size: 16px;
  }
}

/* --- /theme/updated-featured-collection.css --- */
.updated-featured-collection_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    justify-items: center;
    gap: 50px;
    margin-bottom: 10px;
}
.button-container{
    display: flex;
    justify-content: center;
}
.updated-featured-collection:link,
.updated-featured-collection:visited {
    position: relative;
    line-height: 0;
    padding: 60px 35px 20px;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: all .3s;
    min-height: 450px;
    justify-content: space-between;
}

.updated-featured-collection:hover {
    background-color: #000000;
}

.overlay {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    background-color: #F2FF00CC;
    opacity: 0;
    border: 0.5px solid #000000;
}

.updated-featured-collection:active .overlay,
.updated-featured-collection:hover .overlay {
    opacity: 1;
}

.updated-featured-collection:active .collection-title,
.updated-featured-collection:hover .collection-title {
    color: #000000;
    background-color: #fff;
}

.updated-featured-collection_section {
    padding: 20px 0px;
    margin-top: 36px;
    margin-bottom: 36px;
  
}

.updated-featured-collection_section_no-padding {
    border-top: none;
    margin: 0;
    border-bottom: none;

}

.updated-featured-collection img {
    width: 100%;
    border-radius: 15px;
}

.updated-featured-collection_top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.updated-featured-collection_title {
    font-size: 36px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

.updated-featured-collection_button:link,
.updated-featured-collection_button:visited {
       color: #fff;
    background-color: #000000;
    padding: 8px 100px;
    border-radius: 15px;
    line-height: 1.5;
    font-family: "Gowun Batang", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 26px;
    text-decoration: none;
    transition: all .3s;

}

.collection-title {
    font-size: 18px;
    color: #fff;
    font-family: "Gowun Batang", sans-serif;
    font-weight: 400;
    line-height: 1;
    font-weight: 700;
    transition: all .3s;
    background-color: #000000;
    border-radius: 10px;
    padding: 10px 60px;
    text-align: center;
    display: inline-block;
}


.updated-featured-collection_button:active,
.updated-featured-collection_button:hover {
    color: #000000;
    background-color: #fff;
}

.updated-featured-collection_button-mobile {
    display: none;
}

@media screen and (max-width:1150px) {

    .updated-featured-collection_button:link,
    .updated-featured-collection_button:visited {
        padding: 8px 60px;
        font-size: 20px;
    }

    .updated-featured-collection_title {
        font-size: 30px;
    }
}

@media screen and (max-width:950px) {

    .updated-featured-collection_button:link,
    .updated-featured-collection_button:visited {
        padding: 8px 40px;
    }


}

@media screen and (max-width:860px) {
  .updated-featured-collection_grid{
    gap:20px;
  }
    .updated-featured-collection_button-mobile {
       /* display: block; */
        text-align: center;
        margin-top: 20px;
    }

    .updated-featured-collection_section {
        padding-left: 40px;
        padding-right: 40px;
        border: none;
    }

    .updated-featured-collection_grid {
        grid-template-columns:1fr;
    }

    .updated-featured-collection_title {
        margin: 0 auto;
        font-size: 20px;
    }

    .collection-title {
        font-size: 14px;
    }

    .updated-featured-collection_top a {
        display: none;
    }
  .updated-featured-collection:link,
.updated-featured-collection:visited {
    padding: 20px 25px;
    flex-direction: row; 
    gap: 0px;
    min-height: 0;
    justify-content: space-around;
}
  .updated-featured-collection img {
    width: 60%;
}
  .collection-title {
    font-size: 18px;
    color: #000000;
    font-family: "Gowun Batang", sans-serif;
    font-weight: 400;
    line-height: 1;
    transition: all .3s;
    border-radius: 15px;
    padding: 0; 
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    background-color: transparent;
}
  .updated-featured-collection:active .collection-title, .updated-featured-collection:hover .collection-title {
    color: #F5333F;
    background-color: transparent;
}
  .updated-featured-collection_top {
    margin-bottom: 0px;
}
}
/* --- /theme/video-section.css --- */

.video-section__media {
  --ratio-percent: 56.25%;
  position: relative;
  padding-bottom: calc(var(--ratio-percent) - var(--media-border-width));
}

/* Needed for gradient continuity with or without animation so that transparent PNG images come up as we would expect */
.scroll-trigger:where(.gradient.video-section__media) {
  background: transparent;
}

.video-section__media.global-media-settings--full-width {
  padding-bottom: var(--ratio-percent);
}

.video-section__media.deferred-media {
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
}

.video-section__media.deferred-media:after {
  content: none;
}

.video-section__poster.deferred-media__poster:focus {
  outline-offset: 0.3rem;
}

.video-section__media iframe {
  background-color: rgba(var(--color-foreground), 0.03);
  border: 0;
}

.video-section__poster,
.video-section__media iframe,
.video-section__media video {
  position: absolute;
  width: 100%;
  height: 100%;
}

.video-section__media video {
  background: #000000;
}

.video-section__media.media-fit-cover video {
  object-fit: cover;
}

/* --- /hh/home.css --- */
/* public/hh/home.css — ГЛАВНАЯ HT В СТИЛЕ PD, ЦВЕТА HT. СГЕНЕРИРОВАНО scripts/build-home-css.py
 * 2026-09-16 из PUREDOZO-MEDUSA public/dozo/{product-card-badges,product-card-v2,carousels,home,sections}.css.
 * НЕ ПРАВИТЬ РУКАМИ — перегенерировать. Скоуп: каждое правило под .hh-home (обёртка главной, display:contents),
 * поэтому на коллекцию/PDP/кассу не влияет. Карта цветов PD → HT — в скрипте (COLOR_MAP).
 * Ручные правки главной HT (секции без близнеца в PD) — в public/hh/home-hh.css. */

/* ═══════════ public/dozo/product-card-badges.css ═══════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   БЕЙДЖИ КАРТОЧКИ ТОВАРА — не наезжают друг на друга НИКОГДА.

   Владелец 2026-08-30: «на некоторых товарах бейджи наезжают друг на друга.
   Тебе надо сделать так, чтобы между бейджами всегда было расстояние. Ну,
   наверное, это надо регулировать размером шрифта. […] Что внизу, что сверху».

   ЗАМЕР ДО (зазор между парой бейджей на одной стороне; минус — наезд):

       ширина   /d9-smashers      /all          /delta-9-gummies
       320 px   верх −17 низ −24  −17 / −24     верх −30 низ −36
       360 px   верх   3 низ  −9    3 /  −9     верх −10 низ −16
       390 px   верх  18 низ   6   18 /   6     верх   5 низ  −1

   ★ ПОЧЕМУ ЭТО ВООБЩЕ СЛУЧИЛОСЬ. В теме заплатка на этот же наезд УЖЕ БЫЛА, но
   прибитая к имени одного товара:

       .updated-product-card[href*="d9-smasher"] .upc__badge--bl{ max-width:44% }
       .updated-product-card[href*="d9-smasher"] … .upc__badge-lg{ font-size:13px }

   Она чинила ровно D9 Smashers и молчала про всех остальных — поэтому владелец
   и увидел наезд «на некоторых товарах». Список товаров в CSS всегда отстаёт
   от каталога: «6,250mg pack» из delta-9-gummies под него не попал.

   ЛЕЧЕНИЕ — правило, а не список. Бейдж не шире половины плитки минус половина
   зазора, значит два бейджа на одной стороне не могут встретиться АРИФМЕТИЧЕСКИ,
   какой бы длины ни был текст.

   ★ Подключается глобально (modules/theme/theme-global.tsx) после зеркала темы:
   карточка одна и та же на коллекциях, главной и в подборках карточки товара.
   Своё живёт в public/dozo — зеркало темы перезаливают целиком.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ★ Класс удвоен НАРОЧНО. Без этого правило перебивалось фиксированной
   шириной промо-бейджа из темы (`.upc__badge--promo { max-width: 78px }`):
   замер на 320 px показал у него maxW 80 px при плитке 154 — то есть больше
   половины, и он въезжал в левый бейдж на 11 px. Ограничение обязано быть
   сильнее любого частного значения, иначе «никогда» превращается в «почти
   всегда». */
.hh-home .upc__badge.upc__badge {
  /* Половина плитки минус 16 px. ★ Первая формула была `50% - 8px` и дала
     зазор РОВНО НОЛЬ: половину запаса съедали отступы бейджей от края плитки
     (`--upc-inset` с каждой стороны). Наезда уже не было, но и «расстояния»,
     которое просил владелец, тоже. При `50% - 16px` между парой остаётся
     16 px минус два отступа, то есть заметный зазор при любой длине текста.
     ★ !important здесь — не лень, а СМЫСЛ правила. Ширину промо-бейджа тема
     задаёт через идентификатор:
         #product-grid .updated-product-card .upc__badge--promo{ max-width:80px }
     а идентификатор перебивает любую разумную комбинацию классов. Замер после
     удвоения класса: тот же наезд −11 px, потому что 80 > половины плитки в
     154 px. Ограничение «не шире половины» обязано быть сильнее ЛЮБОГО
     частного значения, иначе «никогда не наезжают» превращается в «почти
     никогда» — и мы возвращаемся к заплаткам по имени товара. */
  max-width: calc(50% - 16px) !important;
  box-sizing: border-box;
}

/* Нижний правый умел ТОЛЬКО одну строку (`white-space: nowrap`, поставленный
   2026-07-03 против «огромного» бейджа) — с ограничением ширины он бы обрезал
   «20 cubes». Разрешаем перенос: бейдж растёт вверх, в картинку, а не вбок в
   соседа. Высоту он и так держит min-height 46. */
.hh-home .upc__badge--br {
  white-space: normal;
}

/* Длинные числа («10,000mg», «6,250mg») переносить некуда — их уменьшаем.
   Это и есть то, что предложил владелец: «наверное, это надо регулировать
   размером шрифта». Но НЕ по имени товара, а по факту длины: длинное значение
   само не помещается, короткое остаётся крупным. */
@media screen and (max-width: 749px) {
  .hh-home .upc__badge-lg {
    font-size: 16px;
  }
  .hh-home .upc__badge-sm {
    font-size: 13px;
  }
  .hh-home .upc__badge--br .upc__badge-sm {
    font-size: 13px;
  }
}


/* ═══════════ public/dozo/product-card-v2.css ═══════════ */
/* КАРТОЧКА ТОВАРА v2 — борд ProductCardSpec канваса (цикл 5 редизайна).
 *
 * Карточка одна на весь магазин: главная, коллекции, подборки на PDP.
 * Владелец: «2 везде» — поэтому файл глобальный, как product-card-badges.css.
 *
 * ★ Грузится ПОСЛЕ зеркала темы и после product-card-badges.css: тема задаёт
 *   часть значений через ИДЕНТИФИКАТОР #product-grid, который перебивает
 *   любую разумную комбинацию классов, — там, где это так, стоит !important.
 * ★ Ширину бейджей (не шире половины плитки) держит product-card-badges.css
 *   с цикла 4 видеоразбора; здесь её НЕ переопределяем, иначе вернутся
 *   наезды, которые тот файл чинил.
 *
 * desktop 302 · mobile 172 (ширину даёт сетка секции, не карточка)
 */

.hh-home .updated-product-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

/* ── Фото ─────────────────────────────────────────────────────────────── */
.hh-home .updated-product-card .upc__image {
  position: relative;
  height: 367px;
  background: linear-gradient(180deg, rgb(243, 243, 243), rgb(243, 243, 243));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hh-home .updated-product-card .upc__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Бейджи ───────────────────────────────────────────────────────────── */
.hh-home .updated-product-card .upc__badge--tl, .hh-home .updated-product-card .upc__badge--bl, .hh-home .updated-product-card .upc__badge--br {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
/* ★ Владелец: «2 верхнии маленькие а 2 нижнии отличного размера - сделай
   2 верхнии тоже норм размера». Замер подтвердил: верхний левый был
   65×37 (13/700 + 11/500, поля 5/9), а нижние — 106×54 и 123×54
   (16/600 + 19/500, поля 8/13). Числа спеки канваса (13+11) на живой
   карточке читаются мелко рядом с портированными нижними, поэтому верхние
   подтянуты к нижним: те же поля и близкий кегль. */
.hh-home .updated-product-card .upc__badge--tl {
  padding: 8px 13px;
}
.hh-home .updated-product-card .upc__badge--tl .upc__badge-lg {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
}
.hh-home .updated-product-card .upc__badge--tl .upc__badge-sm {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
}
.hh-home .updated-product-card .upc__badge--bl, .hh-home .updated-product-card .upc__badge--br {
  font-size: 12px;
  font-weight: 700;
}
.hh-home .updated-product-card .upc__badge--promo {
  background: rgba(242, 255, 0, 0.85) !important;
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 8px 13px;
  text-transform: uppercase;
  border-radius: 10px;
}

/* ── Подпись и мета ───────────────────────────────────────────────────── */
.hh-home .updated-product-card .upc__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}
.hh-home .updated-product-card .upc__title {
  margin: 0;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #ffffff;
  text-transform: none;
}
/* ★ Владелец: «а че тут колво флейворс справа». На канвасе рейтинг и
   вкусы стоят РЯДОМ слева с зазором 12; тема растаскивала их по краям
   через justify-content: space-between (замер: рейтинг 97..182, вкусы
   290..365). */
.hh-home .updated-product-card .upc__meta {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
}
.hh-home .updated-product-card .upc__ico--star {
  width: 14px;
  height: 14px;
}
.hh-home .updated-product-card .upc__ico--flavor {
  width: 13px;
  height: 13px;
}

/* ── Цена ─────────────────────────────────────────────────────────────── */
.hh-home .updated-product-card .upc__price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hh-home .updated-product-card .upc__price-from {
  font-size: 16px;
  font-weight: 500;
  color: rgb(255, 255, 255);
}
.hh-home .updated-product-card .upc__price-val {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}
.hh-home .updated-product-card .upc__price-was {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
}
.hh-home .updated-product-card .upc__price-save {
  font-size: 12px;
  font-weight: 800;
  color: #F2FF00;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── Кнопка «+» ───────────────────────────────────────────────────────── */
.hh-home .updated-product-card .upc__add {
  width: 40px;
  height: 40px;
  flex: none;
  margin-left: auto;
  border: none;
  border-radius: 999px;
  background: #F2FF00;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hh-home .updated-product-card .upc__add svg {
  width: 18px;
  height: 18px;
}
.hh-home .updated-product-card .upc__add[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

@media screen and (max-width: 989px) {
  .hh-home .updated-product-card {
    border-radius: 16px;
  }
  .hh-home .updated-product-card .upc__image {
    height: 209px;
  }
  .hh-home .updated-product-card .upc__info {
    padding: 10px 12px 12px;
    gap: 8px;
  }
  .hh-home .updated-product-card .upc__title {
    font-size: 13px !important;
    height: 34px;
  }
  /* На узком экране нижние плашки темы набраны 16/600 + 13/500 при полях
     6/10 — верхнюю ведём теми же числами, иначе она вдвое мельче
     (замер: 38 px против 60). */
  .hh-home .updated-product-card .upc__badge--tl {
    padding: 6px 10px;
  }
  .hh-home .updated-product-card .upc__badge--tl .upc__badge-lg {
    font-size: 16px;
  }
  .hh-home .updated-product-card .upc__badge--tl .upc__badge-sm {
    font-size: 13px;
  }
  .hh-home .updated-product-card .upc__badge--promo {
    font-size: 13px !important;
    padding: 6px 10px;
  }
  .hh-home .updated-product-card .upc__badge--bl, .hh-home .updated-product-card .upc__badge--br {
    font-size: 9px;
  }
  .hh-home .updated-product-card .upc__add {
    width: 32px;
    height: 32px;
  }
  .hh-home .updated-product-card .upc__add svg {
    width: 15px;
    height: 15px;
  }
}


/* ═══════════ public/dozo/carousels.css ═══════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   ГОРИЗОНТАЛЬНЫЕ КАРУСЕЛИ — колесо и палец листают СТРАНИЦУ, а не карусель.

   Владелец 2026-08-31: «в пк версии таже проблема осталась — я щас на макбуке
   с тачпада когда курсор был на карусели товаров на главной странице хотел
   проскролить вниз а получилось что как бы карточку товара пытался скролить а
   не страницу».

   ═══ ПРИЧИНА — ТА ЖЕ, ЧТО НА КАРТОЧКЕ ТОВАРА, НО ШИРЕ ═══
   Правило CSS: если одна ось `auto`/`scroll`, а вторая `visible`, вторая
   ВЫЧИСЛЯЕТСЯ в `auto`. Слайдеры темы объявляют только `overflow-x`, поэтому
   каждый из них молча становится ещё и вертикальным прокрутчиком.

   ЗАМЕР 2026-08-31, главная, 1440×900:

       горизонтальных прокрутчиков: 9
       у ВСЕХ overflow-y: auto
       из них с вертикальным запасом > 0: 1   (запас 1 px — она и перехватывала)

   ★ Остальные восемь имели запас РОВНО НОЛЬ. Это не «всё хорошо», а «пока
   совпало»: любой сдвиг вёрстки — другой шрифт, зум, длинное название товара —
   даёт им тот же 1 px, и перехват возвращается. Ровно поэтому лечим ПОРОДУ,
   а не ту одну карусель, на которую показал владелец.

   ═══ ПОЧЕМУ ПРИЗНАК `.slider`, А НЕ СПИСОК ═══
   Замер: класс `.slider` есть у всех девяти каруселей и НЕТ у обычной сетки
   коллекции (там `overflow-x: visible`, 1101 против 1100 — просто округление).
   То же решение, что с бейджами карточек: правило по признаку живёт дольше,
   чем список мест, потому что список отстаёт от каталога и от вёрстки.

   ★ Почему не `touch-action`: проверено настоящим касанием в этом же проекте —
   `touch-action: pan-x` не отдаёт вертикальный жест странице, а ЗАПРЕЩАЕТ его
   (страница сдвинулась на 0 px). Работает именно снятие второй оси.

   Подключается глобально в modules/theme/theme-global.tsx, после зеркала темы.
   ═══════════════════════════════════════════════════════════════════════════ */

.hh-home .slider {
  /* !important — потому что зеркало темы объявляет overflow каждому слайдеру
     собственным правилом, и частное значение обязано проигрывать общему
     запрету. Тот же довод, что у ширины бейджей. */
  overflow-y: hidden !important;
}


/* ═══════════ public/dozo/home.css ═══════════ */
/* ГЛАВНАЯ СТРАНИЦА ПО КАНВАСУ.
 * Файл накапливает блоки главной по циклам редизайна; каждый блок отделён
 * заголовком с номером цикла и числами, снятыми с бордов.
 * Грузится ПОСЛЕ зеркала темы (см. theme-global.tsx).
 */

/* ══ Цикл 3. Строка под баннерами: заголовок + чипсы ═══════════════════
 * desktop: высота 128, поля 0 80 20, сетка 1fr auto, промежуток 40
 *          H1 34/600 var(--dz-font-display) lh 1.12 · подзаголовок 16/1.6, ширина ≤ 560
 *          чипсы 44 высотой, поля 0 16, радиус 12, фон #000000,
 *          рамка 1px rgba(255,255,255,.16), 13/600, промежуток 10
 * mobile:  поля 18 16 16, колонка, промежуток 12 · H1 26/600 lh 1.18
 *          подзаголовок 15/1.6 · чипсы переносятся, промежуток 8
 *          кнопка «Shop Bestsellers» 48, контурная — ТОЛЬКО здесь
 */
.hh-home .dz-hero-copy {
  background: #000000;
}
.hh-home .dz-hc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  padding: 0 80px 20px;
  box-sizing: border-box;
  min-height: 128px;
}
.hh-home .dz-hc__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hh-home .dz-hc__h1 {
  margin: 0;
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.12;
  color: #ffffff;
  letter-spacing: normal;
  text-transform: none;
}
.hh-home .dz-hc__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
}
.hh-home .dz-hc__chips {
  display: flex;
  gap: 10px;
  align-items: center;
}
.hh-home .dz-hc__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  box-sizing: border-box;
}
.hh-home .dz-hc__ico {
  width: 16px;
  height: 16px;
  flex: none;
}
/* Кнопка мобильного ряда: контурная по TokensSpec. */
.hh-home .dz-hc__cta {
  display: none;
}

@media screen and (max-width: 989px) {
  .hh-home .dz-hc__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 18px 16px 16px;
    min-height: 0;
  }
  .hh-home .dz-hc__h1 {
    font-size: 26px;
    line-height: 1.18;
  }
  .hh-home .dz-hc__sub {
    font-size: 15px;
    max-width: none;
  }
  .hh-home .dz-hc__chips {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hh-home .dz-hc__chip {
    min-height: 44px;
    height: auto;
    padding: 0 14px;
  }
  .hh-home .dz-hc__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid #F2FF00;
    background: transparent;
    color: #F2FF00;
    font-family: var(--dz-font-display, var(--dz-font-display), sans-serif);
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    box-sizing: border-box;
  }
}

/* ══ Цикл 4. Категории ════════════════════════════════════════════════
 * desktop: контейнер 1280 (поля 80), сетка 5 колонок, gap 14
 *          чипс 76 высотой, радиус 12, фон #000000,
 *          рамка 1px rgba(255,255,255,.22), поля 0 14
 *          иконка 20×20 (обводка 2), зазор 8, текст 14/600 в одну строку
 *          шеврон 14×14, прозрачность .6, прижат вправо
 *          наведение: рамка #F2FF00, фон #000000
 *          нажатие: фон #000000, текст и рамка #F2FF00
 * mobile:  контейнер 358 (поля 16), 3 колонки, gap 8
 *          плитка 104 высотой, иконка 24 сверху, зазор 6,
 *          подпись 12/600 по центру, до двух строк
 */
.hh-home .dz-categories {
  background: #000000;
  padding: 0 80px 24px;
  box-sizing: border-box;
}
.hh-home .dz-cat__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}
.hh-home .dz-cat__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 76px;
  padding: 0 14px;
  border-radius: 12px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hh-home .dz-cat__ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.hh-home .dz-cat__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hh-home .dz-cat__chev {
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: auto;
  opacity: 0.6;
}
.hh-home .dz-cat__chip:hover {
  border-color: #F2FF00;
  background: #000000;
  color: #ffffff;
}
.hh-home .dz-cat__chip:active {
  background: #000000;
  border-color: #F2FF00;
  color: #F2FF00;
}
/* Чипс без коллекции не притворяется ссылкой. */
.hh-home .dz-cat__chip--nolink {
  cursor: default;
}
.hh-home .dz-cat__chip--nolink:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: #000000;
}

@media screen and (max-width: 989px) {
  .hh-home .dz-categories {
    padding: 0 16px 20px;
  }
  .hh-home .dz-cat__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .hh-home .dz-cat__chip {
    height: 104px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    text-align: center;
  }
  .hh-home .dz-cat__ico {
    width: 24px;
    height: 24px;
  }
  .hh-home .dz-cat__label {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Шеврон — приём десктопной строки, на плитке он лишний. */
  .hh-home .dz-cat__chev {
    display: none;
  }
}

/* ══ Цикл 5. Ряд акции «Buy 3, Get 1 Free» ════════════════════════════
 * Геометрия канваса: поля страницы 80, сетка 1280, четыре колонки с
 * промежутком 24 → карточка ровно 302 (4×302 + 3×24 = 1280).
 * ★ Ширину режут ДВА контейнера сразу: сама секция (max-width 1200,
 *   поля 50) и slider-component.page-width-desktop внутри неё (те же 1200
 *   и 50). Правка одного давала 244 вместо 302 — поля складывались.
 *   Поэтому поля живут только на секции, а внутренние обнулены.
 */
.hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1).shopify-section {
  max-width: none !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .page-width, .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .page-width-desktop, .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) slider-component {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) #product-grid, .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .grid {
  gap: 24px !important;
  column-gap: 24px !important;
}
/* ★ Сетка темы — не grid, а flex со слайдерной арифметикой:
   li { max-width: calc(25% - 6px) } посчитано под промежуток 8. С нашим
   промежутком 24 карточка выходила 314 и ряд переполнялся. Ширина обязана
   считаться от того же промежутка: 25% − 18 при gap 24. */
.hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) #product-grid > li, .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .grid > li {
  max-width: calc(25% - 18px) !important;
  width: calc(25% - 18px) !important;
}
.hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .collection__title h2 {
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
}
/* ★ Канвас показывает статичный ряд из четырёх: стрелок и полосы прокрутки
   под ним нет. Заголовок ряда прижат влево, как на борде. */
.hh-home .slider-buttons, .hh-home .slider-counter, .hh-home .slider__button, .hh-home .collection__slider-progress-bar, .hh-home progress.slider-progress-bar {
  display: none !important;
}
.hh-home .collection__title, .hh-home .collection__title h2, .hh-home .title-wrapper--self-padded-tablet-down {
  text-align: left !important;
  justify-content: flex-start !important;
}

@media screen and (max-width: 989px) {
  /* ряд «More prerolls» под тройкой: на мобильном карточки начинались на x=27 при
     секции на 16 — тот же контейнер, что у рядов акций */
  .hh-home #shopify-section-template--featured_collection_NQkVkD.shopify-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hh-home #shopify-section-template--featured_collection_NQkVkD .page-width, .hh-home #shopify-section-template--featured_collection_NQkVkD .page-width-desktop, .hh-home #shopify-section-template--featured_collection_NQkVkD slider-component {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1).shopify-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* тема даёт padding_top/bottom только ≥861px; на мобильном три ряда подряд
       слипались (кнопка «Shop the deal» в 4 px от заголовка следующего ряда) */
    padding-bottom: 22px !important;
  }
  .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) #product-grid, .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .grid {
    gap: 12px !important;
    column-gap: 12px !important;
  }
  .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) #product-grid > li, .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .grid > li {
    max-width: calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
  }
  .hh-home :is(#shopify-section-template--dz_deal_row_b3g1, .hh-home #shopify-section-template--dz_deal_row_b2g1, .hh-home #shopify-section-template--dz_deal_row_b1g1) .collection__title h2 {
    font-size: 22px;
  }
}

/* ══ Цикл 6. Полоса доверия и отзывов ═════════════════════════════════
 * desktop: карточка 80 высотой, фон #000000, рамка 1px rgba(255,255,255,.16),
 *          радиус 20, поля 0 28, промежуток 24
 *          звёзды 18 (#F2FF00), обещание 13/600 с щитом 15
 *          разделитель 1×44 rgba(255,255,255,.2)
 *          кружок инициалов 40, фон #000000, рамка rgba(255,255,255,.22), 13/800
 *          цитата 14/1.4 rgba(255,255,255,.92) · подпись 12 rgba(255,255,255,.65)
 * mobile:  карточка 172, колонка, поля 14 16, промежуток 7, звёзды 16,
 *          отзывы одной строкой 13/1.45 с «— Имя»
 */
.hh-home .dz-reviews {
  background: #000000;
  padding: 8px 80px 24px;
  box-sizing: border-box;
}
.hh-home .dz-rv__card {
  max-width: 1280px;
  margin: 0 auto;
  height: 80px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  box-sizing: border-box;
}
.hh-home .dz-rv__promise {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
}
.hh-home .dz-rv__stars {
  display: flex;
  gap: 3px;
  align-items: center;
}
.hh-home .dz-rv__star {
  width: 18px;
  height: 18px;
  flex: none;
}
.hh-home .dz-rv__promise-txt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
.hh-home .dz-rv__shield {
  width: 15px;
  height: 15px;
  flex: none;
}
.hh-home .dz-rv__divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  flex: none;
}
.hh-home .dz-rv__item {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.hh-home .dz-rv__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  flex: none;
  box-sizing: border-box;
}
.hh-home .dz-rv__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hh-home .dz-rv__quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.hh-home .dz-rv__name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.hh-home .dz-rv__line {
  display: none;
}

@media screen and (max-width: 989px) {
  .hh-home .dz-reviews {
    padding: 8px 16px 16px;
  }
  .hh-home .dz-rv__card {
    height: auto;
    min-height: 172px;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 14px 16px;
    border-radius: 20px;
  }
  .hh-home .dz-rv__promise {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .hh-home .dz-rv__star {
    width: 16px;
    height: 16px;
  }
  .hh-home .dz-rv__stars {
    gap: 2px;
  }
  .hh-home .dz-rv__divider {
    display: none;
  }
  .hh-home .dz-rv__item {
    display: block;
    flex: none;
  }
  /* На узком экране кружок и двухстрочный блок уступают место строке. */
  .hh-home .dz-rv__avatar, .hh-home .dz-rv__body {
    display: none;
  }
  .hh-home .dz-rv__line {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
  }
  .hh-home .dz-rv__line-name {
    color: rgba(255, 255, 255, 0.65);
  }
}

/* ══ Цикл 7. «Shop by collections» — лента из двадцати чипсов ══════════
 * desktop: блок 132, поля 20 0 8 80, промежуток 14
 *          H2 26/600 var(--dz-font-display) · круглая стрелка 40, рамка 1.5px #F2FF00
 *          чипс 44, поля 0 16, радиус 12, фон #000000,
 *          рамка 1px rgba(255,255,255,.22), 14/600, промежуток 10
 * mobile:  блок 118, поля 16 0 8 16, H2 22, чипсы те же
 * ★ Последний чипс обрезан краем — это и есть указатель прокрутки.
 */
.hh-home .dz-collections {
  background: #000000;
  padding: 20px 0 8px 80px;
  box-sizing: border-box;
}
.hh-home .dz-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding-right: 80px;
}
.hh-home .dz-col__title {
  margin: 0;
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  color: #ffffff;
  text-transform: none;
  letter-spacing: normal;
}
.hh-home .dz-col__more {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  border: 1.5px solid #F2FF00;
  color: #F2FF00;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.hh-home .dz-col__more svg {
  width: 18px;
  height: 18px;
}
.hh-home .dz-col__strip {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden; /* иначе колесо листает ленту, а не страницу */
  scrollbar-width: none;
  padding-bottom: 4px;
}
.hh-home .dz-col__strip::-webkit-scrollbar {
  display: none;
}
.hh-home .dz-col__chip {
  flex: none;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  text-decoration: none;
  box-sizing: border-box;
}
.hh-home .dz-col__chip:hover {
  border-color: #F2FF00;
  background: #000000;
}

@media screen and (max-width: 989px) {
  .hh-home .dz-collections {
    padding: 16px 0 8px 16px;
  }
  .hh-home .dz-col__head {
    height: 32px;
    padding-right: 16px;
  }
  .hh-home .dz-col__title {
    font-size: 22px;
  }
  .hh-home .dz-col__more {
    width: 32px;
    height: 32px;
  }
  .hh-home .dz-col__strip {
    margin-top: 10px;
  }
}

/* ══ Цикл 8. Промо-блоки (шесть пар «текст + ряд карточек») ════════════
 * Канвас показывает ОДИН такой блок — «The new 3.5g Smashers are here» —
 * и владелец сказал: «также должны выглядеть все остальны такие же блоки».
 * Поэтому правила общие для всех промо-блоков главной, а не для одного id.
 *
 * desktop: блок 420, поля 28 80, сетка 1fr 520, промежуток 40
 *          кикер 12/800 ls .1em #F2FF00
 *          H2 var(--dz-font-display) 600 · 32 · lh 1.12
 *          текст 15/1.55 rgba(255,255,255,.92), ширина ≤ 440
 *          цена: From var(--dz-font-display) 600 22 · зачёркнутая 14 · Save 13/800 #F2FF00
 *          кнопка контурная 52, поля 0 28, радиус 12, рамка 1.5px #F2FF00
 *          картинка ≤ 364 в высоту
 *   ряд:   поля 8 80 24, заголовок 22, сетка 4 колонки, промежуток 24
 * mobile:  одна колонка, поля 16, H2 24, кнопка 48
 */
/* ★★ Портированная секция кладёт картинку и текст СТОЛБИКОМ: её сетка —
   flex-wrap, и media-item занимает всю ширину (940×940). Канвас требует
   两 колонки: текст слева, картинка справа 520. Поэтому сетку переводим в
   grid принудительно, а «резиновую» подложку картинки (padding-bottom +
   абсолютное позиционирование) отключаем — иначе высота блока считается от
   пропорций картинки, а не от содержимого. */
/* ★★ Доводка 2026-09-01 по снимкам владельца: «картинка вправо сдвинута, а
   текст и кнопка влево — не нравится». Сетка 1fr 520 на всю ширину 1280
   разводила половины по краям, посередине оставалось ~500 px пустоты.
   Теперь блок — ПАНЕЛЬ шириной ≤ 1200 (фон #000000, рамка, радиус 20 —
   словарь FAQ/отзывов), колонки 1fr 440 с промежутком 48: картинка стоит
   вплотную к текстовой колонке, а не к краю экрана. */
.hh-home div[class*="image_with_text"] .page-width {
  max-width: 1360px !important; /* 1200 панели + поля 80 с двух сторон */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.hh-home .image-with-text {
  max-width: none !important;
  margin: 0 !important;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 40px 56px;
  box-sizing: border-box;
}
.hh-home .image-with-text__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 48px;
  align-items: center;
  min-height: 0;
}
/* ★ Ритм: над панелью было 80 px + пустота центровки внутри блока 420 —
   владелец: «очень большие расстояния сверху и снизу». Панель сама несёт
   воздух (поля 40), поэтому зазор до соседей меньше: сверху 48, а ряд
   карточек под панелью начинается через 24. */
.hh-home [class*="image_with_text"][class*="-padding"] {
  padding-top: 48px !important;
  padding-bottom: 0 !important;
}
.hh-home [class*="featured_collection_"][class*="-padding"] {
  padding-top: 24px !important;
}
/* ★ Ряд карточек перед панелью тащит за собой margin 25 от `.collection`
   темы — над панелью получалось 73 вместо 48. Снимаем только у рядов, за
   которыми идёт промо-блок: остальные швы страницы не трогаем. */
.hh-home .section-featured-product:has(+ [id*="image_with_text"]) .collection, .hh-home .section-featured-product:has(+ [id*="image_with_text"]) .grid {
  margin-bottom: 0 !important;
}
/* ★ Два экземпляра везли из Shopify custom_css с `text-align: right` и
   `<strong>` в заголовке — блоки выглядели по-разному. Один вид на все. */
.hh-home .image-with-text__content > *, .hh-home .image-with-text__content .image-with-text__text {
  text-align: left !important;
  align-self: flex-start !important;
}
.hh-home .image-with-text__heading strong {
  font-weight: inherit;
}
.hh-home .image-with-text__media-item {
  order: 2;
  max-width: none !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hh-home .image-with-text__text-item {
  order: 1;
  max-width: none !important;
  width: auto !important;
}
.hh-home .image-with-text__media {
  position: static !important;
  padding-bottom: 0 !important;
  height: auto !important;
  background: transparent !important;
}
.hh-home .image-with-text__media img {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-height: 320px;
  max-width: 100%;
  object-fit: contain;
}
.hh-home .image-with-text__content {
  gap: 12px;
  padding: 0;
  align-items: flex-start;
}
.hh-home .image-with-text__heading {
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif) !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  line-height: 1.12 !important;
  margin: 0;
  text-transform: none;
}
/* ★ Тема даёт тексту margin 20px 140px — на канвасе абзац стоит по одной
   левой кромке с заголовком и кнопкой, поэтому боковые поля снимаем. */
.hh-home .image-with-text__text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 440px;
  margin: 0 !important;
}
.hh-home .image-with-text__heading {
  margin-bottom: 0 !important;
}
/* ★ У двух блоков кнопка уезжала вправо на 567 px: это поле из
   собственного custom_css экземпляра секции, доехавшего с Shopify.
   Канвас держит кнопку по левой кромке, поэтому боковые поля снимаем. */
.hh-home .image-with-text__content .button {
  margin: 4px 0 0 0 !important;
}
.hh-home .image-with-text__content .button {
  height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  border: 1.5px solid #F2FF00 !important;
  background: transparent !important;
  color: #F2FF00 !important;
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif) !important;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.hh-home .dz-promo-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hh-home .dz-promo-price__from {
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif);
  font-weight: 600;
  font-size: 22px;
  color: #ffffff;
}
.hh-home .dz-promo-price__was {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
}
.hh-home .dz-promo-price__save {
  color: #F2FF00;
  font-size: 13px;
  font-weight: 800;
}
.hh-home .image-with-text__media img {
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 989px) {
  .hh-home div[class*="image_with_text"] .page-width {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hh-home .image-with-text__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
  }
  .hh-home .image-with-text__media-item {
    order: 1;
  }
  .hh-home .image-with-text__text-item {
    order: 2;
  }
  .hh-home .image-with-text {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .hh-home .image-with-text__media img {
    max-height: 240px;
  }
  .hh-home .image-with-text__content {
    padding: 0;
  }
  .hh-home [class*="image_with_text"][class*="-padding"] {
    padding-top: 32px !important;
  }
  /* Тема центрирует абзац и цену на мобильном, заголовок при этом слева —
     один край на всё. */
  .hh-home .image-with-text__content *, .hh-home .image-with-text__text p {
    text-align: left !important;
  }
  .hh-home .image-with-text__heading {
    font-size: 24px !important;
  }
  .hh-home .image-with-text__content .button {
    height: 48px;
    font-size: 15px;
  }
}


/* ══ Цикл 11. Тройки промо-баннеров (2026-09-12) ═══════════════════════
 * Замена шести блоков image-with-text: один широкий баннер + две плитки,
 * та же сетка, что у hero (1500 / промежуток 12 / радиус 10), чтобы
 * читались одной семьёй. Картинка без текста; заголовок, подпись и
 * кнопка — HTML снизу по центру, как у hero-баннеров.
 * ★ Пропорции карточек фиксированы aspect-ratio — иначе до загрузки
 *   картинки блок схлопывается и страница прыгает (CLS).
 * ★ Подложка-градиент снизу держит контраст текста на любом фоне.
 */
.hh-home .dz-promo {
  /* тот же контейнер, что у рядов карточек (поля 80 → сетка 1280): ревью 2026-09-12
     поймало «тройка во всю ширину, ряд под ней в контейнере» */
  max-width: none;
  margin: 0 auto;
  /* 2026-09-16 партия 8: воздух сверху 56 — тройка открывает пару «тройка + её ряд»,
     а ряд под ней (padding 0, кнопка «View all» упирается в низ секции) даёт лишь 8 px;
     раньше между парами было 8/4 px, внутри пары 24 — группы слипались не там */
  padding: 56px 80px 8px;
  box-sizing: border-box;
}
.hh-home .dz-promo__head { padding: 0 0 12px; }
.hh-home .dz-promo__title {
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
  color: #fff;
  text-align: left;
}
.hh-home .dz-promo__grid {
  display: grid;
  /* ★ minmax(0, 1fr): с голым 1fr колонка не ужимается ниже min-content, а у
     широкой карточки min-content = ширина по aspect-ratio от высоты ряда
     (818 при плитках по 345). Как в hero: широкая берёт высоту плиток,
     картинка режется по бокам (object-fit: cover), пропорция только на
     мобильном, где она одна в столбце. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.hh-home .dz-promo__tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.hh-home .dz-promo__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #000000;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}
.hh-home .dz-promo__card--big { aspect-ratio: auto; min-height: 0; }
.hh-home .dz-promo__card--tile { aspect-ratio: 880 / 1168; }
.hh-home .dz-promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.hh-home .dz-promo__card:hover .dz-promo__img { transform: scale(1.025); }
.hh-home .dz-promo__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .2) 14%, rgba(0, 0, 0, 0) 28%);
  pointer-events: none;
}
.hh-home .dz-promo__txt {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 5.5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.hh-home .dz-promo__headline {
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .45);
  text-wrap: balance;
}
.hh-home .dz-promo__card--big .dz-promo__headline { font-size: clamp(24px, 3.4vw, 54px); }
.hh-home .dz-promo__card--tile .dz-promo__headline { font-size: clamp(16px, 1.75vw, 30px); }
/* заголовок запечён в картинку (стиль hero): в HTML остаётся только для
   читалок и как текст ссылки — визуально скрыт, без display:none */
.hh-home .dz-promo__headline--baked {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hh-home .dz-promo__card--baked .dz-promo__txt { bottom: 4.5%; gap: 0; }
.hh-home .dz-promo__card--baked .dz-promo__sub { display: none; }
.hh-home .dz-promo__sub {
  font-family: var(--dz-font-body, "Gowun Batang", sans-serif);
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.hh-home .dz-promo__card--big .dz-promo__sub { font-size: clamp(13px, 1.1vw, 18px); }
.hh-home .dz-promo__card--tile .dz-promo__sub { font-size: clamp(11px, .85vw, 14px); }
.hh-home .dz-promo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 4px;
  height: 44px; /* = кнопка hero: одна семья на странице */
  padding: 0 26px;
  border-radius: var(--dz-r-ctl, 12px);
  background: var(--dz-accent, #F2FF00);
  color: var(--dz-on-accent, #000000);
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--dz-cta-shadow, 0 1px 2px rgba(0, 0, 0, .25));
  transition: background .15s, transform .15s;
}
.hh-home .dz-promo__card--tile .dz-promo__cta { height: 44px; padding: 0 22px; font-size: 15px; }
/* заголовок запечён в картинку → снизу остаётся только кнопка, на той же высоте, что у hero */
.hh-home .dz-promo__card--baked .dz-promo__txt { bottom: 16px; }
.hh-home .dz-promo__card:hover .dz-promo__cta { background: var(--dz-accent-hover, #F2FF00); transform: translateY(-1px); }

@media screen and (max-width: 989px) {
  .hh-home .dz-promo { padding: 48px 16px 8px; }
  .hh-home .dz-promo__cta { height: 36px; padding: 0 16px; font-size: 12px; }
  .hh-home .dz-promo__card--tile .dz-promo__cta { height: 32px; padding: 0 12px; font-size: 11px; }
  .hh-home .dz-promo__card--baked .dz-promo__txt { bottom: 12px; }
  .hh-home .dz-promo__title { font-size: 22px; }
}
@media screen and (max-width: 749px) {
  .hh-home .dz-promo { padding: 40px 16px 8px; }
  .hh-home .dz-promo__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* мобильная картинка широкой карточки — своя, почти квадратная (1000×1100):
     в 16:9 при ширине 366 текст съедал бы половину высоты */
  /* 2026-09-16 (владелец): широкий баннер тройки на мобильном = пропорция hero-слайда (1765/1000), та же 16:9-картинка, что на десктопе */
  .hh-home .dz-promo__card--big { aspect-ratio: 1765 / 1000; }
  /* 2026-09-14 (владелец): на мобильном в тройке только широкий баннер; hero не трогаем */
  .hh-home .dz-promo__tiles { display: none; }
  .hh-home .dz-promo__card--big .dz-promo__headline { font-size: clamp(22px, 7vw, 34px); }
  .hh-home .dz-promo__card--big .dz-promo__sub { font-size: 13px; }
  .hh-home .dz-promo__card--big .dz-promo__cta { height: 24px; padding: 0 10px; font-size: 10px; }
  .hh-home .dz-promo__card--tile .dz-promo__headline { font-size: clamp(13px, 4.2vw, 18px); }
  .hh-home .dz-promo__card--tile .dz-promo__sub { display: none; }
  .hh-home .dz-promo__card--tile .dz-promo__cta { height: 28px; padding: 0 10px; font-size: 10px; }
  .hh-home .dz-promo__txt { gap: 4px; bottom: 5%; }
  .hh-home .dz-promo__card--baked .dz-promo__txt { bottom: 6px; }
}

/* ── Партия 12 (2026-09-16): на мобильном блок категорий стоит ПОД отзывами, на ПК — где был.
   Владелец: «блок меню в мобильном перенеси в область под отзывы… на пк пусть будет где есть».
   Разметка и index.json не тронуты: обёртка .vp2-home (в page.tsx у неё inline display: contents)
   на ≤749 становится колонкой-flex, порядок задаётся order: всё до отзывов = 0, категории = 1,
   всё после отзывов = 2. Откат — удалить этот блок. */
@media screen and (max-width: 749px) {
  .hh-home.dz-page { display: flex !important; flex-direction: column; }
  /* у троек margin: 0 auto — во flex-колонке авто-поля отменяют растяжение, секция сжималась до 119 px */
  .hh-home.dz-page > * { width: 100%; min-width: 0; flex: none; }
  /* + 12 px сверху: между карточкой отзывов и плитками было 17 px — тесно рядом с 46 px под блоком */
  .hh-home > #shopify-section-template--dz_categories_main { order: 1; padding-top: 12px; }
  .hh-home > #shopify-section-template--dz_reviews_main ~ * { order: 2; }
}


/* ═══════════ public/dozo/sections.css ═══════════ */
/* ОБЩИЕ СЕКЦИИ САЙТА — один стиль на всех страницах.
 *
 * Владелец 2026-09-04: «на сайте везде должен быть единый стиль одних и тех
 * же секций и отступы между секциями и тд». До этого правила рядов карточек,
 * видео, FAQ и нижнего текста жили в home.css под классом .vp2-home и на
 * карточку товара не доезжали — там эти же секции рендерились старой темой
 * Shopify (жёлтые рамки у видео, маджентовый FAQ, карусель 3×335).
 *
 * Правила перенесены сюда БЕЗ изменений (только .vp2-home → .dz-page); класс
 * dz-page носят обёртки главной (.vp2-home) и карточки товара (.vp2-pdp).
 * Новая страница с этими секциями получает тот же вид, добавив класс.
 */

/* ══ Ряды карточек товара (перенос из home.css, цикл 8) ═══════════════ */
/* Ряды карточек под промо-блоками — та же геометрия, что у ряда акции. */
.hh-home .shopify-section.section-featured-product {
  max-width: none !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.hh-home .shopify-section.section-featured-product .page-width, .hh-home .shopify-section.section-featured-product .page-width-desktop, .hh-home .shopify-section.section-featured-product slider-component {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hh-home .shopify-section.section-featured-product #product-grid, .hh-home .shopify-section.section-featured-product .grid {
  gap: 24px !important;
  column-gap: 24px !important;
}
.hh-home .shopify-section.section-featured-product #product-grid > li, .hh-home .shopify-section.section-featured-product .grid > li {
  max-width: calc(25% - 18px) !important;
  width: calc(25% - 18px) !important;
}
.hh-home .shopify-section.section-featured-product .collection__title h2 {
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.1;
  margin: 0;
  text-transform: none;
}

@media screen and (max-width: 989px) {
  .hh-home .shopify-section.section-featured-product {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hh-home .shopify-section.section-featured-product #product-grid, .hh-home .shopify-section.section-featured-product .grid {
    gap: 12px !important;
    column-gap: 12px !important;
  }
  .hh-home .shopify-section.section-featured-product #product-grid > li, .hh-home .shopify-section.section-featured-product .grid > li {
    max-width: calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
  }
}

/* ══ Цикл 9. Остальные секции главной под новые токены ════════════════
 * Владелец: «3 перекрась под новые токены» — про блоки, которых на канвасе
 * нет: видео, FAQ и нижний текстовый блок. Канвас их не рисует, поэтому
 * берём его словарь, а не выдумываем новый: фон карточек #000000, рамка
 * 1px rgba(255,255,255,.16), радиус 20/12, заголовки var(--dz-font-display) 26 (моб. 22),
 * текст Outfit 15/1.6, акцент #F2FF00.
 * ★ Структуру и разметку секций НЕ трогаем — это порт темы; меняются
 *   только цвета, кегли и радиусы.
 */
/* ★ У секции видео тот же класс section-featured-product, что у рядов
   карточек, и правило цикла 8 (там заголовок ряда 22) перебивало это по
   специфичности. Поэтому селектор видео усилен родителем-секцией. */
.hh-home .faq_title, .hh-home .shopify-section .video-section-container .collection__title h2, .hh-home .rich-text__heading {
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  text-transform: none;
  margin: 0 0 16px;
}

/* ★★ Доводка 2026-09-01 по снимку владельца: «этот блок тоже ужасный».
   Было: маджентовая заливка #F2FF00 во всю ширину (единственная на странице,
   с новыми токенами не вяжется), заголовок 26 тёмным по мадженте, картинка
   550 в ширину и ~600 в высоту с полями 70 сверху, колонки по верхнему краю
   — снизу под вопросами ~300 px пустоты.
   Стало: та же панель, что у промо-блоков — 1200 по центру на #000000,
   рамка, радиус 20, поля 40/56; сетка 1fr 440, промежуток 48, колонки по
   центру; картинка 440 × ≤ 440 с радиусом 16; карточки вопросов на #000000
   (цвет чипсов), чтобы не сливались с панелью. */
.hh-home .faq-section {
  background: transparent !important;
  margin-top: 48px !important;
  padding: 0 80px !important;
}
.hh-home .faq-section > .page-width {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px 56px !important;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 48px;
  align-items: center;
}
.hh-home .faq_blocks {
  padding: 0 !important;
  max-width: none !important;
}
.hh-home .faq_title {
  color: #ffffff !important;
  margin: 0 0 20px !important;
}
.hh-home .faq_image-container {
  padding: 0 !important;
}
.hh-home .faq_image-container img {
  display: block;
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 16px;
}
/* FAQ: вопрос — карточка, ответ — обычный текст */
.hh-home .faq-block {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.hh-home .faq-block_title {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hh-home .faq-block_title svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #F2FF00;
}
.hh-home .faq-block_p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 8px 0 0;
}

/* Видео: радиус по токенам (было 26) */
.hh-home .video-section-container video, .hh-home .video-section-container .grid__item video {
  border-radius: 20px !important;
}
/* ★★ Доводка 2026-09-01 по снимку владельца: «почему видео такие огромные».
   Было: три колонки на 1280 → плитка 415×697 (выше экрана), четвёртое видео
   пряталось в карусель, и вокруг каждого — ДВОЙНАЯ рамка темы: жёлтый контур
   .video с полями 20 + скруглённое видео внутри.
   Стало: все четыре в ряд (columns_desktop 4 в раскладке — карусель и её
   стрелки исчезают сами), плитка 270 → 9:16 даёт 480, ряд и заголовок по
   центру, рамка одна — само видео с радиусом 20. */
/* ★ Только десктоп: на мобильном остаётся слайдер темы, а центровка
   flex-ленты с переполнением ПРЯЧЕТ первую плитку за левым краем. */
@media screen and (min-width: 990px) {
  .hh-home .videos_section .collection__title {
    text-align: center !important;
    justify-content: center !important; /* заголовок ряда — flex, и правило
                                           цикла 5 держит его слева с !important */
  }
  .hh-home .videos_section .grid {
    justify-content: center;
  }
  .hh-home .videos_section.section-featured-product .grid > li {
    width: 270px !important;
    max-width: 270px !important;
    flex: 0 0 270px !important;
  }
}
.hh-home .videos_section .video {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden;
}

/* Нижний текстовый блок */
.hh-home .rich-text .rte, .hh-home .rich-text p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.hh-home .rich-text a {
  color: #F2FF00;
}

@media screen and (max-width: 989px) {
  .hh-home .faq_title, .hh-home .shopify-section .video-section-container .collection__title h2, .hh-home .rich-text__heading {
    font-size: 22px !important;
  }
  .hh-home .faq-section {
    margin-top: 32px !important;
    padding: 0 16px !important;
  }
  .hh-home .faq-section > .page-width {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 20px 16px !important;
    border-radius: 16px;
  }
  /* картинку FAQ ≤ 860 прячет сама тема (.faq_image-container display:none) */
}


/* ══ Стрелки карусели — по краям ряда, не под ним ═════════════════════
 * Владелец 2026-09-04: «внизу … две стрелочки влево-вправо и такая шкала …
 * мне не нравится абсолютно это решение. Давай лучше просто добавим …
 * слева и справа … стрелочки легкие, которые просто будут давать понять,
 * что можно влево, можно вправо скроллить».
 * Разметка темы остаётся (slider.tsx ищет кнопки по name и ставит
 * disabled на краях) — обёртки схлопываются через display: contents, полоса
 * прячется, сами кнопки становятся кругами 44 в полях страницы на уровне
 * середины карточек. Ниже 990 стрелок нет — там свайп.
 */
.hh-home .section-featured-product slider-component.slider-component-desktop {
  position: relative;
}
.hh-home .section-featured-product .slider-component-desktop .slider-buttons, .hh-home .section-featured-product .slider-component-desktop .slider-buttons_wrapper {
  display: contents !important;
}
.hh-home .section-featured-product .slider-component-desktop .progress-bar {
  display: none !important;
}
.hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button[name="previous"] {
  left: -22px;
}
.hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button[name="next"] {
  right: -22px;
}
.hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button:not([disabled]):hover {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.35);
}
.hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button[disabled] {
  opacity: 0.3;
  cursor: default;
}
.hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button svg {
  width: 18px;
  height: 14px;
  display: block;
}
/* the theme's arrow is a filled path, not a stroke */
.hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button svg path {
  fill: currentColor;
}
@media screen and (max-width: 989px) {
  .hh-home .section-featured-product .slider-component-desktop .updated-featured-products_button {
    display: none !important;
  }
}

/* ══ Секция «картинка + текст» (image_text) — панель, как промо на главной ═
 * Владелец 2026-09-04: «три абзаца разных с тремя картинками … причесать
 * всю эту секцию, все отступы … более подходящую по стилю к всем страницам».
 * Тот же словарь, что у промо-блоков главной и FAQ: панель ≤1200 на #000000,
 * рамка .16, радиус 20, поля 40/56, колонки 1fr + 440 с промежутком 48,
 * картинка ≤440 с радиусом 16, заголовок var(--dz-font-display) 32, текст 15/1.55.
 * Чередование «картинка слева / справа» из настроек секции сохраняется.
 * Разметка секции (sections/image-text/index.tsx) не трогается — её
 * инлайн-стили перекрываются здесь весом селектора.
 */
.hh-home .shopify-section:has(> .page-width > .image_text) {
  padding-top: 48px;
}
.hh-home .shopify-section:has(> .page-width > .image_text)
  + .shopify-section:has(> .page-width > .image_text) {
  padding-top: 24px;
}
.hh-home .shopify-section:has(> .page-width > .image_text) > .page-width {
  max-width: 1360px !important; /* 1200 панели + поля 80 */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.hh-home .image_text {
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 40px 56px !important;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-sizing: border-box;
  display: grid;
  gap: 48px;
  align-items: center;
}
.hh-home .image_text--image-left {
  grid-template-columns: 440px minmax(0, 1fr);
}
.hh-home .image_text--image-right {
  grid-template-columns: minmax(0, 1fr) 440px;
}
.hh-home .image_text .image_text-content {
  margin: 0 !important;
  max-width: none;
  text-align: left !important;
}
.hh-home .image_text .image_text-text {
  font-family: var(--dz-font-display, var(--dz-font-display), sans-serif) !important;
  font-weight: 600 !important;
  font-size: 32px;
  line-height: 1.12;
  color: #ffffff;
  text-transform: none;
  margin: 0 0 12px;
  text-align: left !important;
}
.hh-home .image_text .image_text-paragraph {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  max-width: 440px;
  margin: 0;
  text-align: left !important;
}
.hh-home .image_text .image_text-paragraph + .image_text-paragraph {
  margin-top: 12px;
}
.hh-home .image_text .image_text-image {
  margin: 0;
  display: flex;
  justify-content: center;
}
.hh-home .image_text img {
  display: block;
  width: 100%;
  max-width: 440px;
  max-height: 440px;
  object-fit: contain;
  border-radius: 16px;
}
@media screen and (max-width: 989px) {
  .hh-home .shopify-section:has(> .page-width > .image_text) {
    padding-top: 32px;
  }
  .hh-home .shopify-section:has(> .page-width > .image_text)
    + .shopify-section:has(> .page-width > .image_text) {
    padding-top: 16px;
  }
  .hh-home .shopify-section:has(> .page-width > .image_text) > .page-width {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hh-home .image_text, .hh-home .image_text--image-left, .hh-home .image_text--image-right {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    padding: 20px 16px !important;
    border-radius: 16px;
  }
  .hh-home .image_text .image_text-image {
    order: 0 !important;
  }
  .hh-home .image_text .image_text-content {
    order: 1 !important;
  }
  .hh-home .image_text img {
    max-height: 240px;
  }
  .hh-home .image_text .image_text-text {
    font-size: 24px;
  }
}


/* --- /hh/home-hh.css --- */
/* public/hh/home-hh.css — ГЛАВНАЯ HT ПО ОБРАЗЦУ PD: РУЧНЫЕ ПРАВИЛА (план home-port-plan-2026-09-11).
 * Идёт в sections-bundle ПОСЛЕ сгенерированного /hh/home.css (слой PD в цветах HH).
 * Здесь — то, чего у PD нет или что у HT устроено иначе:
 *   · страница у HT кремовая, у PD фиолетовая → каждая секция PD-вида становится
 *     ФИОЛЕТОВОЙ ПАНЕЛЬЮ (#000000, радиус 20, ширина 1280) на креме; заголовки
 *     вне панелей — фиолетовые, внутри — белые;
 *   · секции без близнеца в PD (решение владельца 2026-09-11): collection-list →
 *     чипсы dz-collections с миниатюрой; categories → чипсы dz-categories с иконками HH;
 *     two-blocks → панели как image-with-text; reviews-feed → карточки dz-reviews сеткой;
 *     home-seo-intro → раскладка rich-text; home-faq → панель FAQ PD;
 *   · videos: панель вместо жёлтой полосы темы, 4 плитки 270 в ряд, стрелок нет.
 * Все правила под .hh-home — на другие страницы не влияют. Цвета — только токены HT. */

.hh-home {
  --hh-panel: #000000;
  --hh-panel-dark: #000000;
  --hh-accent: #F2FF00;
  --hh-on-cream: #000000;
  --hh-line: rgba(255, 255, 255, 0.16);
  --hh-line-strong: rgba(255, 255, 255, 0.22);
  --hh-radius: 20px;
  --hh-width: 1280px;
  --hh-gap: 56px;
}

/* ── Ритм: между группами 56, у HT нет промо-баннера над каруселью ─────── */
.hh-home [class*="featured_collection_"][class*="-padding"] {
  padding-top: var(--hh-gap);
}
/* Панель карусели (тема HH: .collection с полями 80) — поля 28, чтобы карточки
   были ближе к ширине PD (302 при ряде 1280; у HT 288 внутри панели 1280) */
.hh-home .section-featured-product .collection[class*="-padding"] {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.hh-home .section-featured-product .grid > li {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media screen and (max-width: 989px) {
  .hh-home .section-featured-product .collection[class*="-padding"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
.hh-home .section-featured-product .collection__title h2,
.hh-home .title.title {
  color: #ffffff;
}

/* ── Заголовки секций ВНЕ панелей — фиолетовые, PD-размер 26/600 ────────── */
.hh-home .dz-col__title,
.hh-home .ts-two-blocks_title,
.hh-home .hhrv__title,
.hh-home .hh-seo__title {
  font-family: var(--dz-font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.18;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

/* ══ collection-list → чипсы «Shop by collections» с миниатюрами ═══════════ */
.hh-home .dz-collections.hh-col {
  max-width: var(--hh-width);
  margin: var(--hh-gap) auto 0;
  background: var(--hh-panel);
  border-radius: var(--hh-radius);
  padding: 24px 0 20px 28px;
  box-sizing: border-box;
}
.hh-home .hh-col .dz-col__head {
  padding-right: 28px;
}
.hh-home .hh-col .dz-col__title {
  color: #ffffff;
  text-transform: capitalize;
}
.hh-home .hh-col .dz-col__chip {
  height: 56px;
  gap: 10px;
  padding: 0 18px 0 8px;
  background: var(--hh-panel-dark);
  border-color: var(--hh-line-strong);
}
.hh-home .hh-col .dz-col__chip:hover {
  border-color: var(--hh-accent);
  background: #000000;
}
.hh-home .dz-col__thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: #ffffff;
  flex: none;
}
.hh-home .dz-col__chip--all {
  border-color: var(--hh-accent);
  color: var(--hh-accent);
}
@media screen and (max-width: 989px) {
  .hh-home .dz-collections.hh-col {
    margin: 32px 16px 0;
    padding: 16px 0 14px 16px;
    border-radius: 16px;
  }
  .hh-home .hh-col .dz-col__head {
    padding-right: 16px;
  }
}

/* ══ categories → чипсы dz-categories с иконками HT, 4 колонки ══════════════ */
.hh-home .dz-categories.hh-cats {
  max-width: var(--hh-width);
  margin: var(--hh-gap) auto 0;
  background: var(--hh-panel);
  border-radius: var(--hh-radius);
  padding: 24px 28px 28px;
  box-sizing: border-box;
}
.hh-home .dz-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.hh-home .dz-cat__title {
  margin: 0;
  font-family: var(--dz-font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.18;
  color: #ffffff;
  text-transform: none;
  letter-spacing: normal;
}
.hh-home .dz-cat__all {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--hh-accent);
  color: var(--hh-accent);
  font-family: var(--dz-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.hh-home .dz-cat__all:hover {
  background: var(--hh-accent);
  color: var(--hh-panel-dark);
}
.hh-home .hh-cats .dz-cat__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.hh-home .hh-cats .dz-cat__chip {
  background: var(--hh-panel-dark);
  border-color: var(--hh-line-strong);
}
.hh-home .hh-cats .dz-cat__chip:hover {
  border-color: var(--hh-accent);
  background: #000000;
}
.hh-home .dz-cat__ico--img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.hh-home .hh-cats .dz-cat__label {
  font-size: 15px;
}
@media screen and (max-width: 989px) {
  .hh-home .dz-categories.hh-cats {
    margin: 32px 16px 0;
    padding: 16px 16px 16px;
    border-radius: 16px;
  }
  .hh-home .dz-cat__title {
    font-size: 22px;
  }
  .hh-home .dz-cat__all {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }
  .hh-home .hh-cats .dz-cat__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .hh-home .dz-cat__ico--img {
    width: 44px;
    height: 44px;
  }
  .hh-home .hh-cats .dz-cat__label {
    font-size: 13px;
  }
}

/* ══ two-blocks → две панели как image-with-text PD ═════════════════════════ */
.hh-home .ts-two-blocks-padding {
  padding-top: var(--hh-gap) !important;
  padding-bottom: 0 !important;
}
.hh-home .ts-two-blocks_section,
.hh-home .ts-two-blocks_section_no-padding {
  margin: 0 !important;
  padding: 0 !important;
}
.hh-home .ts-two-blocks_top {
  margin-bottom: 16px;
  text-align: left;
  justify-content: flex-start;
}
.hh-home .ts-two-blocks_title {
  color: var(--hh-on-cream);
  text-align: left;
}
.hh-home .ts-two-blocks_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hh-home .ts-two-blocks_item {
  background: var(--hh-panel-dark);
  border: 1px solid var(--hh-line);
  border-radius: var(--hh-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-decoration: none;
}
.hh-home .ts-two-blocks_grid-image {
  max-width: 62%;
}
.hh-home .ts-two-blocks_grid-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}
.hh-home .ts-two-blocks_collection-title {
  width: auto;
  min-width: 220px;
  height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid var(--hh-accent);
  color: var(--hh-accent);
  font-family: var(--dz-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hh-home .ts-two-blocks_item:hover .ts-two-blocks_collection-title {
  background: var(--hh-accent);
  color: var(--hh-panel-dark);
}
.hh-home .ts-two-blocks_button-container,
.hh-home .ts-two-blocks_button-mobile {
  display: none !important;
}
@media screen and (max-width: 749px) {
  .hh-home .ts-two-blocks-padding {
    padding-top: 32px !important;
  }
  .hh-home .ts-two-blocks_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .hh-home .ts-two-blocks_item {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 16px;
    gap: 14px;
  }
  .hh-home .ts-two-blocks_grid-image {
    max-width: 70%;
  }
  .hh-home .ts-two-blocks_collection-title {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .hh-home .ts-two-blocks_title {
    font-size: 22px;
  }
}

/* ══ videos → панель вместо жёлтой полосы, 4 плитки 270, без стрелок ═══════ */
.hh-home .videos_section {
  background: transparent !important;
  margin-bottom: 0 !important;
  padding-top: var(--hh-gap) !important;
}
.hh-home .videos_section.section-featured-product .page-width.video-section-container {
  max-width: var(--hh-width);
  background: var(--hh-panel);
  border-radius: var(--hh-radius);
  padding: 28px 28px 32px !important; /* слой PD обнуляет padding у .page-width — панели нужны поля */
  box-sizing: border-box;
}
.hh-home .videos_section .grid,
.hh-home .videos_section slider-component,
.hh-home .videos_section .slider-mobile-gutter {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.hh-home .videos_section .collection__title,
.hh-home .videos_section .title-wrapper {
  padding-left: 0;
  padding-right: 0;
}
.hh-home .videos_section .collection__title h2,
.hh-home .videos_section .collection__title h2.title {
  color: #ffffff !important;
}
/* внутренние отступы темы (.section-<id>-padding на .collection, поля .video-section-container .title) — в ноль,
   ритм задаёт панель */
.hh-home .videos_section .collection[class*="-padding"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.hh-home .videos_section .collection__title {
  margin-bottom: 16px;
}
.hh-home .videos_section .video video,
.hh-home .videos_section .video {
  border: 0 !important;
}
/* стрелки/прогресс темы (updated-videos_button) — на десктопе не нужны: все
   четыре плитки помещаются; на мобильном свайп, стрелки тема и так не показывает */
.hh-home .videos_section .slider-buttons,
.hh-home .videos_section .videos-progress-bar,
.hh-home .videos_section .slider-buttons_wrapper {
  display: none !important;
}
@media screen and (min-width: 990px) {
  .hh-home .videos_section .slider-component-desktop .grid.slider--desktop {
    overflow: visible;
    justify-content: center;
    gap: 14px;
  }
}
@media screen and (max-width: 989px) {
  .hh-home .videos_section {
    padding-top: 32px !important;
  }
  .hh-home .videos_section.section-featured-product .page-width.video-section-container {
    margin: 0 16px;
    padding: 16px 0 16px 16px !important;
    border-radius: 16px;
  }
}

/* ══ featured-collections (табы брендов) — панель уже есть (тема), заголовок ═ */
.hh-home [class*="featured_collections_"][class*="-padding"] {
  padding-top: var(--hh-gap);
}

/* ══ reviews-feed → карточки dz-reviews сеткой внутри панели ═══════════════ */
.hh-home .hhrv--home {
  max-width: var(--hh-width);
  margin: var(--hh-gap) auto 0;
  background: var(--hh-panel);
  border-radius: var(--hh-radius);
  padding: 28px 28px 32px;
  box-sizing: border-box;
}
.hh-home .hhrv--home .hhrv__head {
  margin-bottom: 16px;
}
.hh-home .hhrv--home .hhrv__title {
  color: #ffffff;
}
.hh-home .hhrv--home .hhrv__grid {
  display: block;
  columns: 3;
  column-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hh-home .hhrv--home .hhrv__grid > li {
  break-inside: avoid;
  margin: 0 0 14px;
}
.hh-home .hhrv--home .hhrv-card {
  background: var(--hh-panel-dark);
  border: 1px solid var(--hh-line);
  border-radius: 16px;
  padding: 16px 18px;
  color: #ffffff;
  box-shadow: none;
}
.hh-home .hhrv--home .hhrv-card__head {
  margin-bottom: 10px;
}
.hh-home .hhrv--home .hhrv-stars svg path[fill="#F5A623"] {
  fill: var(--hh-accent);
}
.hh-home .hhrv--home .hhrv-stars svg path[fill="#D9D9D9"] {
  fill: rgba(255, 255, 255, 0.25);
}
.hh-home .hhrv--home .hhrv-card__date {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.hh-home .hhrv--home .hhrv-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.hh-home .hhrv-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hh-panel);
  border: 1px solid var(--hh-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  flex: none;
  box-sizing: border-box;
}
.hh-home .hhrv--home .hhrv-card__name {
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
}
.hh-home .hhrv--home .hhrv-card__verified {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 500;
}
.hh-home .hhrv--home .hhrv-card__title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}
.hh-home .hhrv--home .hhrv-card__body {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  margin: 0;
}
.hh-home .hhrv--home .hhrv-card__product {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hh-line);
  color: var(--hh-accent);
  font-size: 13px;
  font-weight: 600;
}
.hh-home .hhrv--home .hhrv-card__product img {
  border-radius: 8px;
  background: #ffffff;
}
.hh-home .hhrv--home .hhrv-card__photos img {
  border-radius: 10px;
}
@media screen and (max-width: 989px) {
  .hh-home .hhrv--home {
    margin: 32px 16px 0;
    padding: 16px;
    border-radius: 16px;
  }
  .hh-home .hhrv--home .hhrv__grid {
    columns: 1;
  }
  .hh-home .hhrv--home .hhrv__grid > li {
    margin-bottom: 10px;
  }
  .hh-home .hhrv--home .hhrv__title {
    font-size: 22px;
  }
}

/* ══ home-seo-intro → раскладка rich-text PD: заголовок слева, текст справа ══ */
.hh-home .hh-seo {
  max-width: var(--hh-width);
  margin: var(--hh-gap) auto 0;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
  line-height: 1.6;
  box-sizing: border-box;
}
.hh-home .hh-seo__title {
  color: var(--hh-on-cream);
  font-size: 26px;
}
.hh-home .hh-seo__body {
  color: rgba(0, 0, 0, 0.8);
  font-size: 15px;
}
.hh-home .hh-seo h2 {
  font-family: var(--dz-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 18px 0 8px;
  color: var(--hh-on-cream);
}
.hh-home .hh-seo h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 14px 0 6px;
}
.hh-home .hh-seo p {
  margin: 0 0 10px;
}
/* лаймовая подсветка ссылок — как на живом HT */
.hh-home .hh-seo a {
  color: #0a0a0a;
  background: #F2FF00;
  padding: 1px 5px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
}
.hh-home .hh-seo a:hover {
  background: #F2FF00;
}
/* свёртка PD (show-more-text.tsx): 120 px + затухание низа, когда не влезает */
.hh-home .hh-seo .description-wrapper {
  position: relative;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.hh-home .hh-seo .description-wrapper.collapsed {
  max-height: 120px;
}
.hh-home .hh-seo .description-wrapper.collapsed.dz-overflow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF);
  pointer-events: none;
}
.hh-home .hh-seo .show-more-description {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--hh-on-cream);
  font-size: 14px;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.hh-home .hh-seo .show-more-description svg {
  transition: transform 0.3s ease;
}
.hh-home .hh-seo .show-more-description svg path {
  fill: var(--hh-on-cream);
}
@media screen and (max-width: 989px) {
  .hh-home .hh-seo {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 32px;
    padding: 0 16px;
  }
  .hh-home .hh-seo__title {
    font-size: 22px;
  }
}

/* ══ home-faq → панель FAQ PD: тёмная панель, вопросы-карточки, картинка ═════ */
.hh-home .hh-home-faq {
  background: transparent;
  margin: var(--hh-gap) 0 0;
  padding: 0;
  color: #ffffff;
  line-height: 1.5;
}
.hh-home .hh-home-faq__inner {
  max-width: var(--hh-width);
  margin: 0 auto;
  background: var(--hh-panel-dark);
  border: 1px solid var(--hh-line);
  border-radius: var(--hh-radius);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 48px;
  align-items: center;
  box-sizing: border-box;
}
.hh-home .hh-home-faq__content {
  padding-top: 0;
}
.hh-home .hh-home-faq__title {
  font-family: var(--dz-font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.18;
  text-transform: none;
  margin: 0 0 20px;
}
.hh-home .hh-home-faq details {
  background: var(--hh-panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 12px;
}
.hh-home .hh-home-faq details:last-child {
  margin-bottom: 0;
}
.hh-home .hh-home-faq summary {
  font-family: var(--dz-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  gap: 16px;
}
.hh-home .hh-home-faq summary::after {
  width: 16px;
  height: 10px;
  flex-basis: 16px;
}
.hh-home .hh-home-faq details p {
  max-width: none;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}
.hh-home .hh-home-faq__image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}
@media screen and (max-width: 989px) {
  .hh-home .hh-home-faq {
    margin: 32px 16px 0;
  }
  .hh-home .hh-home-faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 20px 16px;
    border-radius: 16px;
  }
  .hh-home .hh-home-faq__title {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .hh-home .hh-home-faq details {
    padding: 14px 16px;
  }
  .hh-home .hh-home-faq summary {
    font-size: 15px;
  }
}

/* ══ Карточки на узком экране: промо-бейдж «BUY 3 GET 1» в две строки, как у PD ═ */
@media screen and (max-width: 749px) {
  .hh-home .updated-product-card .upc__badge.upc__badge--promo,
  .hh-home .updated-product-card .upc__badge--promo .upc__badge-lg,
  .hh-home .updated-product-card .upc__badge--promo span {
    font-size: 11px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* ══ home2 (2026-09-16): главная в порядке секций PD ═══════════════════════
 * Новые секции PD (dz-hero-copy, dz-reviews, dz-promo-banners) у PD лежат на
 * тёмной странице; у HT страница кремовая, поэтому полосы без фона, текст —
 * фиолетовый, а контейнер тот же, что у панелей HT (1280). */
.hh-home .dz-hero-copy,
.hh-home .dz-reviews {
  background: transparent;
}
.hh-home .dz-hc__inner,
.hh-home .dz-promo {
  max-width: calc(var(--hh-width) + 160px);
  margin-left: auto;
  margin-right: auto;
}
.hh-home .dz-hc__inner {
  padding-top: 20px;
}
.hh-home .dz-hc__h1 {
  color: var(--hh-panel);
}
.hh-home .dz-hc__sub {
  color: var(--hh-panel-dark);
}
.hh-home .dz-hc__cta {
  background: var(--hh-panel);
  border-color: var(--hh-panel);
  color: #F2FF00;
}
.hh-home .dz-promo__title {
  color: var(--hh-panel);
}
/* Shop by Brands идёт сразу за панелью видео — без зазора панели слипались */
.hh-home #shopify-section-template--featured_collections_WxKJwW {
  margin-top: var(--hh-gap);
}
@media screen and (max-width: 989px) {
  .hh-home #shopify-section-template--featured_collections_WxKJwW {
    margin-top: 32px;
  }
}

/* --- /hh/header-menu-fix.css --- */
/* Выпадающее меню SHOP в шапке.
 *
 * В теме `.mega-menu` лежит в обычном потоке и переключается только прозрачностью
 * (opacity 0 → 1) — ни position, ни z-index у него нет. Пока под шапкой стоял
 * контент, он рисовался ПОВЕРХ меню: класс `mega-menu_open` появлялся, меню
 * становилось непрозрачным, но покупатель видел вместо него страницу.
 * Достаточно поднять саму шапку в отдельный слой — меню лежит внутри неё.
 */
.hippy-header {
  position: relative;
  z-index: 50;
}

/* --- /hh/pdp-tabs.css --- */
/* NC-9 (ported from PUREDOZO 7e7956b): one format for the PDP accordion tab
   texts (collapsible_tab blocks, blocks/metafield-liquid.ts renderTabText):
   paragraphs, real bullet lists, bold, links. Structure only; colours come
   from the accordion text (the bullet dot uses currentColor), so the HT theme
   colours stay as they are. Overrides the theme's .rte ul (list inside,
   padding 2rem) only inside the tab text. */
.accordion__content .metafield-multi_line_text_field p {
  margin: 0 0 10px;
}
.accordion__content .metafield-multi_line_text_field ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 10px;
}
.accordion__content .metafield-multi_line_text_field ul > li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 6px;
  list-style: none;
}
.accordion__content .metafield-multi_line_text_field ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.accordion__content .metafield-multi_line_text_field :is(p, ul):last-child,
.accordion__content .metafield-multi_line_text_field ul > li:last-child {
  margin-bottom: 0;
}
.accordion__content .metafield-multi_line_text_field strong {
  font-weight: 700;
}
.accordion__content .metafield-multi_line_text_field a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- /hh/account.css --- */
/* NC-13: порт кабинета PUREDOZO (7b9058a) на Hippy Trippy, 2026-10-02. Разметка и правила — как на PD,
 * цвета — палитра HT (как hh-tokens.css: фиолетовый #000000, тёмный #000000, жёлтый #F2FF00).
 * Ниже — исходная шапка PD.
 *
 * ЛИЧНЫЙ КАБИНЕТ В СТИЛЕ ПРИЛОЖЕНИЯ (2026-09-28, plans/account-checkout-2026-09-28-plan.md Ц1).
 * Образец — экраны PUREDOZO-APP (shots-2026-09-10: 12-account, 13-orders,
 * 14-order-tracking, 11-reorder): тёмно-фиолетовый фон, карточки со скруглением,
 * группы-списки «YOUR ORDERS / ACCOUNT / HELP», жёлтые кнопки.
 *
 * ★ Только классы dz-ac-*. Тема Shopify объявляет `.grid` (display:flex) и
 * `.hidden` (display:none !important) — старый кабинет на Tailwind из-за этого
 * был пустым у всех. Своих имён тема не знает.
 *
 * Телефон — базовые значения; компьютер — от 1024 (как касса).
 * HH: файл едет в sections-bundle.css (scripts/sections-css-list.txt) и в
 * отпечаток HH_SECTIONS_CSS_VERSION (scripts/stamp-collection-css.mjs).
 */

.dz-ac {
  --ac-bg: #000000;
  --ac-card: #000000;
  --ac-card-2: #000000;
  --ac-line: rgba(255, 255, 255, 0.14);
  --ac-line-strong: rgba(255, 255, 255, 0.24);
  --ac-fg: #ffffff;
  --ac-body: rgba(255, 255, 255, 0.92);
  --ac-muted: rgba(255, 255, 255, 0.68);
  --ac-faint: rgba(255, 255, 255, 0.45);
  --ac-accent: #F2FF00;
  --ac-accent-hover: #F2FF00;
  --ac-on-accent: #000000;
  --ac-pink: #F2FF00;
  --ac-ok: #7cf5a0;
  --ac-danger: #ff8fa3;
  --ac-radius: 22px;
  --ac-radius-sm: 14px;
  background: var(--ac-bg);
  color: var(--ac-fg);
  font-family: var(--dz-font-body, "Gowun Batang", system-ui, sans-serif);
  padding: 16px 16px 56px;
  min-height: 70vh;
}
.dz-ac *,
.dz-ac *::before,
.dz-ac *::after {
  box-sizing: border-box;
}
.dz-ac a {
  color: inherit;
  text-decoration: none;
}
.dz-ac button {
  font: inherit;
  color: inherit;
}
.dz-ac p,
.dz-ac h1,
.dz-ac h2,
.dz-ac ul,
.dz-ac ol {
  margin: 0;
  padding: 0;
}
.dz-ac ul,
.dz-ac ol {
  list-style: none;
}
.dz-ac-ico {
  flex: none;
  display: block;
}

.dz-ac__in {
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Каркас: на телефоне меню живёт на главной кабинета ─────────────────── */
.dz-ac__side {
  display: none;
}
.dz-ac__main {
  min-width: 0;
}
@media (min-width: 1024px) {
  .dz-ac {
    padding: 40px 32px 80px;
  }
  .dz-ac__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .dz-ac__side {
    display: block;
    position: sticky;
    top: 96px;
  }
  .dz-ac-home__menu {
    display: none;
  }
  .dz-ac-back {
    display: none !important;
  }
}

/* ── Типографика ────────────────────────────────────────────────────────── */
.dz-ac-h1 {
  font-family: var(--dz-font-display, "Gowun Batang", "Gowun Batang", sans-serif);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ac-fg);
  letter-spacing: 0;
}
.dz-ac-h2 {
  font-family: var(--dz-font-display, "Gowun Batang", "Gowun Batang", sans-serif);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ac-fg);
}
.dz-ac-sub,
.dz-ac-muted {
  color: var(--ac-muted);
  font-size: 14px;
  line-height: 1.5;
}
.dz-ac-hint {
  color: var(--ac-faint);
  font-size: 13px;
  line-height: 1.5;
}
.dz-ac-center {
  text-align: center;
}
@media (min-width: 1024px) {
  .dz-ac-h1 {
    font-size: 32px;
  }
}

/* ── Шапка страницы ─────────────────────────────────────────────────────── */
.dz-ac-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.dz-ac-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dz-ac-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--ac-muted);
  font-size: 15px;
  align-self: flex-start;
}

/* ── Карточки и блоки ───────────────────────────────────────────────────── */
.dz-ac-card {
  background: var(--ac-card);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  padding: 20px;
}
.dz-ac-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.dz-ac-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dz-ac-page > * + * {
  margin-top: 16px;
}
.dz-ac-home {
  display: flex;
  flex-direction: column;
}

/* приветствие */
.dz-ac-hello {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dz-ac-avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dz-font-display, "Gowun Batang", sans-serif);
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(145deg, #000000 0%, #000000 55%, #000000 100%);
}
.dz-ac-hello__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dz-ac-hello__text .dz-ac-muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Меню-группы (как в приложении) ─────────────────────────────────────── */
.dz-ac-home__menu {
  margin-top: 24px;
}
.dz-ac-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dz-ac-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dz-ac-group__title {
  font-family: var(--dz-font-body, "Gowun Batang", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-faint);
}
.dz-ac-list {
  background: var(--ac-card);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  overflow: hidden;
}
.dz-ac-list > li + li {
  border-top: 1px solid var(--ac-line);
}
.dz-ac-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ac-fg);
  font-size: 17px;
  line-height: 1.3;
  transition: background 0.15s ease;
}
.dz-ac-row .dz-ac-ico:first-child {
  color: var(--ac-pink);
}
.dz-ac-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.dz-ac-row.is-active {
  background: rgba(242, 255, 0, 0.1);
}
.dz-ac-row.is-active .dz-ac-row__label {
  color: var(--ac-accent);
}
.dz-ac-row__label {
  flex: 1;
  min-width: 0;
}
.dz-ac-row__value {
  color: var(--ac-muted);
  font-size: 15px;
  white-space: nowrap;
}
.dz-ac-row > .dz-ac-ico:last-child {
  color: var(--ac-faint);
}
.dz-ac-row--home,
.dz-ac-row--logout {
  background: var(--ac-card);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
}
.dz-ac-row--logout .dz-ac-ico:first-child {
  color: var(--ac-muted);
}
.dz-ac-row--logout:disabled {
  opacity: 0.6;
}
@media (min-width: 1024px) {
  .dz-ac-nav--side .dz-ac-row {
    min-height: 52px;
    font-size: 16px;
  }
}

/* ── Кнопки и ссылки ────────────────────────────────────────────────────── */
.dz-ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--dz-font-display, "Gowun Batang", "Gowun Batang", sans-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.dz-ac-btn:active {
  transform: translateY(1px);
}
.dz-ac-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.dz-ac-btn--primary {
  background: var(--ac-accent);
  color: var(--ac-on-accent) !important;
}
.dz-ac-btn--primary:hover:not(:disabled) {
  background: var(--ac-accent-hover);
}
.dz-ac-btn--outline {
  background: transparent;
  border-color: var(--ac-accent);
  color: var(--ac-accent) !important;
}
.dz-ac-btn--ghost {
  background: transparent;
  border-color: var(--ac-line-strong);
  color: var(--ac-fg) !important;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}
.dz-ac-btn--wide {
  width: 100%;
}
.dz-ac-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ac-accent) !important;
  font-size: 15px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dz-ac-link--danger {
  color: var(--ac-danger) !important;
}
.dz-ac-link:disabled {
  opacity: 0.5;
}
.dz-ac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.dz-ac-actions--stack {
  flex-direction: column;
  margin-top: 20px;
}
.dz-ac-actions--stack > *,
.dz-ac-actions--stack .dz-ac-btn {
  width: 100%;
}
.dz-ac-reorder {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dz-ac-note {
  font-size: 13px;
  color: var(--ac-muted);
  max-width: 320px;
}

/* ── Заказы ─────────────────────────────────────────────────────────────── */
.dz-ac-orders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dz-ac-order {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 44px;
  transition: border-color 0.15s ease;
}
.dz-ac-order:hover {
  border-color: var(--ac-line-strong);
}
.dz-ac-order__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dz-ac-order__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dz-ac-order__id {
  font-size: 18px;
  font-weight: 600;
}
.dz-ac-order__total {
  font-size: 16px;
  font-weight: 600;
  color: var(--ac-accent);
  margin-top: 4px;
}
.dz-ac-order__go {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ac-faint);
}
.dz-ac-thumbs {
  display: flex;
}
.dz-ac-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(145deg, #000000, #000000);
  border: 2px solid var(--ac-card);
}
.dz-ac-thumb + .dz-ac-thumb {
  margin-left: -14px;
}
.dz-ac-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.dz-ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dz-ac-chip--waiting {
  color: var(--ac-muted);
}
.dz-ac-chip--moving {
  color: var(--ac-pink);
}
.dz-ac-chip--done {
  color: var(--ac-accent);
}
.dz-ac-chip--canceled {
  color: var(--ac-danger);
}
.dz-ac-addr__name .dz-ac-chip {
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 11px;
}
.dz-ac-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.dz-ac-bar__fill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
  background: var(--ac-accent);
}

@media (min-width: 768px) {
  .dz-ac-order {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "thumbs meta chip" "bar bar bar";
    align-items: center;
    column-gap: 18px;
    padding-right: 52px;
  }
  .dz-ac-order__top {
    display: contents;
  }
  .dz-ac-order__top .dz-ac-thumbs {
    grid-area: thumbs;
  }
  .dz-ac-order__top .dz-ac-chip {
    grid-area: chip;
  }
  .dz-ac-order__meta {
    grid-area: meta;
  }
  .dz-ac-order .dz-ac-bar {
    grid-area: bar;
    margin-top: 6px;
  }
}

/* заказ: статус и шаги */
.dz-ac-status {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dz-ac-status__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dz-ac-steps {
  display: flex;
  flex-direction: column;
}
.dz-ac-step {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
}
.dz-ac-step:last-child {
  padding-bottom: 0;
}
.dz-ac-step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.18);
}
.dz-ac-step:last-child::before {
  display: none;
}
.dz-ac-step.is-done::before {
  background: var(--ac-accent);
}
.dz-ac-step__dot {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-on-accent);
}
.dz-ac-step.is-done .dz-ac-step__dot {
  background: var(--ac-accent);
  border-color: var(--ac-accent);
}
.dz-ac-step.is-current .dz-ac-step__dot {
  border-color: var(--ac-pink);
  box-shadow: 0 0 0 5px rgba(242, 255, 0, 0.18);
}
.dz-ac-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 3px;
}
.dz-ac-step__label {
  font-size: 17px;
}
.dz-ac-step:not(.is-done) .dz-ac-step__label {
  color: var(--ac-muted);
}
.dz-ac-track {
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dz-ac-track__num {
  font-size: 18px;
  letter-spacing: 0.08em;
  word-break: break-all;
}
.dz-ac-track__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* позиции */
.dz-ac-items {
  padding: 4px 20px;
}
.dz-ac-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.dz-ac-item + .dz-ac-item {
  border-top: 1px solid var(--ac-line);
}
.dz-ac-item__img {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(145deg, #000000, #000000);
}
.dz-ac-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dz-ac-item__title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.dz-ac-item .dz-ac-reorder {
  flex: none;
}
@media (max-width: 420px) {
  .dz-ac-item {
    flex-wrap: wrap;
  }
  .dz-ac-item .dz-ac-reorder {
    width: 100%;
    padding-left: 86px;
  }
}

/* итоги, адрес доставки */
.dz-ac-totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.dz-ac-total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ac-body);
  font-size: 15px;
}
.dz-ac-total-row--grand {
  border-top: 1px solid var(--ac-line);
  padding-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ac-fg);
}
.dz-ac-total-row--grand span:last-child {
  color: var(--ac-accent);
}
.dz-ac-ship {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.5;
}

/* Buy again */
.dz-ac-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dz-ac-repeat__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* пустые состояния */
.dz-ac-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
}

/* ── Формы ──────────────────────────────────────────────────────────────── */
.dz-ac-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dz-ac-form__row {
  display: flex;
  gap: 12px;
}
.dz-ac-form__row > * {
  flex: 1;
  min-width: 0;
}
@media (max-width: 560px) {
  .dz-ac-form__row--3 {
    flex-wrap: wrap;
  }
  .dz-ac-form__row--3 > :first-child {
    flex-basis: 100%;
  }
}
.dz-ac-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ac-muted);
}
.dz-ac-field input,
.dz-ac-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--ac-radius-sm);
  border: 1.5px solid var(--ac-line-strong);
  background: var(--ac-card-2);
  color: var(--ac-fg);
  font: inherit;
  font-size: 16px;
  outline: none;
}
.dz-ac-field select {
  appearance: auto;
}
.dz-ac-field select option {
  color: #000000;
}
.dz-ac-field input:focus,
.dz-ac-field select:focus {
  border-color: var(--ac-accent);
}
.dz-ac-field input[readonly] {
  color: var(--ac-muted);
  cursor: default;
}
.dz-ac-error {
  color: var(--ac-danger);
  font-size: 14px;
}
.dz-ac-ok {
  color: var(--ac-ok);
  font-size: 14px;
}
.dz-ac-notice {
  border: 1px solid var(--ac-line-strong);
  border-radius: var(--ac-radius-sm);
  padding: 14px;
  font-size: 14px;
  color: var(--ac-body);
}

/* адреса */
.dz-ac-addresses {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dz-ac-addr-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dz-ac-addr {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dz-ac-addr__name {
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.dz-ac-addr__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dz-ac-addr__btns {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .dz-ac-addr-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dz-ac-addr-list > li:has(form) {
    grid-column: 1 / -1;
  }
}

/* сохранённые карты */
.dz-ac-cards .dz-ac-list {
  padding: 0;
}
.dz-ac-savedcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.dz-ac-savedcard > .dz-ac-ico {
  color: var(--ac-pink);
}
.dz-ac-savedcard__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* вход / регистрация */
.dz-ac--guest .dz-ac__in {
  max-width: 480px;
}
.dz-ac-auth {
  padding-top: 8px;
}
.dz-ac-authcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dz-ac-form--bare {
  margin-top: 6px;
}
@media (min-width: 1024px) {
  .dz-ac-authcard {
    padding: 32px;
  }
}