/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
  /* --- BRAND COLORS --- */
  --dv-color-brand:           #E12025;       /* primary red - використовуємо точково */
  --dv-color-brand-hover:     #C71920;       /* hover стан червоної кнопки */
  --dv-color-brand-soft:      #FCEBEC;       /* фон для tag/highlight */
  
  /* --- NEUTRAL COLORS --- */
  --dv-color-text:            #1d1d1d;       /* основний текст */
  --dv-color-text-secondary:  #6b6b6b;       /* мета-інформація, описи */
  --dv-color-text-tertiary:   #9a9a9a;       /* підказки, плейсхолдери */
  --dv-color-text-on-dark:    #ffffff;       /* білий текст на dark фоні */
  
  /* --- BACKGROUNDS --- */
  --dv-color-bg:              #ffffff;       /* основний фон */
  --dv-color-bg-soft:         #faf7f2;       /* секондарі - картки на сторінці */
  --dv-color-bg-cream:        #f0e9d8;       /* хіро-блок, cream акценти */
  --dv-color-bg-warm:         #FAEEDA;       /* промо-полоси, акційні секції */
  --dv-color-bg-dark:         #1d1d1d;       /* footer, dark секції (AI) */
  --dv-color-bg-darker:       #0f0f0f;       /* footer bottom-strip */
  --dv-color-bg-media:        #ffffff;       /* фон медіа-зони карток (за товарами) */
  
  /* --- BORDERS --- */
  --dv-color-border:          #d0d0d0;       /* основні бордери (input, divider) */
  --dv-color-border-soft:     #ebebeb;       /* легкі бордери (картки) */
  --dv-color-border-strong:   #1d1d1d;       /* акцентний бордер (active, focus) */
  
  /* --- STATUS COLORS --- */
  --dv-color-success:         #1d9e75;       /* "В наявності", live status зелений */
  --dv-color-warning:         #d97706;       /* "Закінчуємо роботу" */
  --dv-color-rating:          #f5b800;       /* зірочки рейтингу */
  
  /* --- SPACING (4px base) --- */
  --dv-space-1:   4px;
  --dv-space-2:   8px;
  --dv-space-3:   12px;
  --dv-space-4:   14px;
  --dv-space-5:   18px;
  --dv-space-6:   22px;
  --dv-space-7:   28px;
  --dv-space-8:   36px;
  --dv-space-9:   48px;
  --dv-space-10:  64px;
  
  /* --- TYPOGRAPHY SIZES --- */
  --dv-text-xs:    11px;        /* мікро лейбли uppercase */
  --dv-text-sm:    12px;        /* meta, small print */
  --dv-text-base:  13px;        /* основний body */
  --dv-text-md:    14px;        /* кнопки, sub-headings */
  --dv-text-lg:    15px;        /* акценти, ціни в картках */
  --dv-text-xl:    16px;        /* sub headings */
  --dv-text-2xl:   18px;        /* H2 */
  --dv-text-3xl:   22px;        /* H1, секційні заголовки */
  --dv-text-4xl:   28px;        /* категорійні заголовки */
  --dv-text-5xl:   36px;        /* hero на сторінках продукту */
  --dv-text-6xl:   48px;        /* головна hero */
  --dv-text-7xl:   56px;        /* головна hero - найбільший */
  
  /* --- LINE HEIGHTS --- */
  --dv-leading-tight:   1.15;
  --dv-leading-snug:    1.35;
  --dv-leading-normal:  1.55;
  --dv-leading-loose:   1.75;
  
  /* --- FONT WEIGHTS --- */
  --dv-weight-normal:    400;
  --dv-weight-medium:    500;
  --dv-weight-semibold:  600;
  --dv-weight-bold:      700;
  
  /* --- BORDER RADIUS --- */
  --dv-radius-xs:    4px;
  --dv-radius-sm:    6px;
  --dv-radius-md:    8px;
  --dv-radius-lg:    12px;
  --dv-radius-xl:    16px;
  --dv-radius-pill:  9999px;
  
  /* --- TRANSITIONS --- */
  --dv-transition-fast:    120ms ease;
  --dv-transition-normal:  200ms ease;
  --dv-transition-slow:    320ms ease;
  
  /* --- Z-INDEX LAYERS --- */
  --dv-z-base:      0;
  --dv-z-raised:    10;
  --dv-z-sticky:    100;
  --dv-z-overlay:   200;
  --dv-z-modal:     300;
  --dv-z-toast:     400;
  
  /* --- BREAKPOINTS (для довідки в коментарях, JS читає з matchMedia) --- */
  /* mobile:  до 767px */
  /* tablet:  768-1023 */
  /* desktop: 1024+ */
}


/* ============================================================================
   2. BASE STYLES — застосовуються ТІЛЬКИ до елементів з .dv- класом
   Не перетинається з рештою сайту (Bootstrap 3, старий CSS)
   ============================================================================ */
[class^="dv-"],
[class*=" dv-"],
[class^="dv-"] *,
[class*=" dv-"] * {
  box-sizing: border-box;
}

/* font-family на корені опціонально, краще явно через .dv-typography */
.dv-typography,
.dv-typography * {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================================
   3. LAYOUT PRIMITIVES
   ============================================================================ */

/* Container — заміна Bootstrap .container, але без bootstrap'івських gutter */
.dv-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dv-space-4);
  padding-right: var(--dv-space-4);
}

@media (min-width: 768px) {
  .dv-container {
    padding-left: var(--dv-space-6);
    padding-right: var(--dv-space-6);
  }
}

@media (min-width: 1024px) {
  .dv-container {
    padding-left: var(--dv-space-8);
    padding-right: var(--dv-space-8);
  }
}

/* Stack — вертикальне розташування з gap */
.dv-stack {
  display: flex;
  flex-direction: column;
}
.dv-stack--gap-1 { gap: var(--dv-space-1); }
.dv-stack--gap-2 { gap: var(--dv-space-2); }
.dv-stack--gap-3 { gap: var(--dv-space-3); }
.dv-stack--gap-4 { gap: var(--dv-space-4); }
.dv-stack--gap-5 { gap: var(--dv-space-5); }
.dv-stack--gap-6 { gap: var(--dv-space-6); }
.dv-stack--gap-7 { gap: var(--dv-space-7); }
.dv-stack--gap-8 { gap: var(--dv-space-8); }

/* Cluster — горизонтальний flex з wrap і gap (для тегів, кнопок) */
.dv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.dv-cluster--gap-1 { gap: var(--dv-space-1); }
.dv-cluster--gap-2 { gap: var(--dv-space-2); }
.dv-cluster--gap-3 { gap: var(--dv-space-3); }
.dv-cluster--gap-4 { gap: var(--dv-space-4); }
.dv-cluster--start  { justify-content: flex-start; }
.dv-cluster--end    { justify-content: flex-end; }
.dv-cluster--center { justify-content: center; }
.dv-cluster--between{ justify-content: space-between; }

/* Row — flex горизонтальний без wrap (для grid-замін) */
.dv-row {
  display: flex;
  align-items: center;
}

/* Grid — для product cards 4-в-ряд адаптивно */
.dv-grid {
  display: grid;
  gap: var(--dv-space-4);
}
.dv-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.dv-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.dv-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Catalog grid: 4 колонки на desktop, 3 на tablet, 2 на mobile */
.dv-grid--catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dv-space-4);
}
@media (max-width: 1023px) {
  .dv-grid--catalog { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .dv-grid--catalog { grid-template-columns: repeat(2, 1fr); gap: var(--dv-space-2); }
}


/* ============================================================================
   4. ATOMS — кнопки, пілли, бейджі
   ============================================================================ */

/* --- PILL (rounded label tag) --- */
.dv-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-2);
  height: 24px;
  padding: 0 var(--dv-space-3);
  border-radius: var(--dv-radius-pill);
  background: var(--dv-color-bg-soft);
  color: var(--dv-color-text-secondary);
  font-size: var(--dv-text-xs);
  font-weight: var(--dv-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.dv-pill--brand {
  background: var(--dv-color-brand);
  color: var(--dv-color-text-on-dark);
}
.dv-pill--dark {
  background: var(--dv-color-bg-dark);
  color: var(--dv-color-text-on-dark);
}
.dv-pill--ghost {
  background: transparent;
  color: var(--dv-color-text);
  border: 1px solid var(--dv-color-border-soft);
}

/* --- BADGE (мала кругла мітка для лічильників) --- */
.dv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--dv-space-1);
  border-radius: var(--dv-radius-pill);
  background: var(--dv-color-brand);
  color: var(--dv-color-text-on-dark);
  font-size: 9px;
  font-weight: var(--dv-weight-medium);
  line-height: 1;
}

/* --- DISCOUNT BADGE --- */
.dv-discount {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--dv-space-2);
  border-radius: var(--dv-radius-pill);
  background: var(--dv-color-brand);
  color: var(--dv-color-text-on-dark);
  font-size: 10px;
  font-weight: var(--dv-weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* --- BUTTON BASE --- */
.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dv-space-2);
  height: 42px;
  padding: 0 var(--dv-space-5);
  border: 0;
  border-radius: var(--dv-radius-md);
  background: transparent;
  color: var(--dv-color-text);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--dv-text-md);
  font-weight: var(--dv-weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dv-transition-fast),
              color var(--dv-transition-fast),
              border-color var(--dv-transition-fast);
  white-space: nowrap;
  user-select: none;
}

/* Sizes */
.dv-btn--sm  { height: 34px; padding: 0 var(--dv-space-4); font-size: var(--dv-text-base); }
.dv-btn--md  { height: 42px; }
.dv-btn--lg  { height: 50px; padding: 0 var(--dv-space-7); font-size: var(--dv-text-lg); }

/* Variants */
.dv-btn--primary {
  background: var(--dv-color-brand);
  color: var(--dv-color-text-on-dark);
}
.dv-btn--primary:hover {
  background: var(--dv-color-brand-hover);
}

.dv-btn--secondary {
  background: var(--dv-color-text);
  color: var(--dv-color-text-on-dark);
}
.dv-btn--secondary:hover {
  background: #333;
}

.dv-btn--outline {
  background: transparent;
  color: var(--dv-color-text);
  border: 1px solid var(--dv-color-text);
}
.dv-btn--outline:hover {
  background: var(--dv-color-text);
  color: var(--dv-color-text-on-dark);
}

.dv-btn--ghost {
  background: transparent;
  color: var(--dv-color-text);
}
.dv-btn--ghost:hover {
  background: var(--dv-color-bg-soft);
}

.dv-btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 0.5px solid var(--dv-color-border-soft);
}

.dv-btn--full {
  width: 100%;
}

/* --- INPUT BASE --- */
.dv-input {
  height: 42px;
  padding: 0 var(--dv-space-3);
  border: 0.5px solid var(--dv-color-border);
  border-radius: var(--dv-radius-md);
  background: var(--dv-color-bg);
  color: var(--dv-color-text);
  font-family: 'Montserrat', sans-serif;
  font-size: var(--dv-text-md);
  outline: none;
  transition: border-color var(--dv-transition-fast);
  box-sizing: border-box;
}
.dv-input:focus {
  border-color: var(--dv-color-text);
}
.dv-input::placeholder {
  color: var(--dv-color-text-tertiary);
}


/* ============================================================================
   5. COLOR SWATCHES (для нової картки товару)
   Використовуються в продукт-картках і фільтрах
   ============================================================================ */

/* Swatch container - для картки товару (mini, 14px) */
.dv-swatch-mini {
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  vertical-align: top;
  background-size: cover;
  background-position: center;
}
.dv-swatch-mini__sale {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 6px;
  height: 6px;
  background: var(--dv-color-brand);
  border-radius: 50%;
  border: 1px solid var(--dv-color-bg);
  box-sizing: content-box;
}

/* Swatch normal — для картки товару на product page (32-36px) */
.dv-swatch {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform var(--dv-transition-fast);
  background-size: cover;
  background-position: center;
}
.dv-swatch:hover {
  transform: scale(1.05);
}
.dv-swatch--active {
  box-shadow: 0 0 0 2px var(--dv-color-bg), 0 0 0 3.5px var(--dv-color-text);
}
.dv-swatch__sale {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--dv-color-brand);
  border-radius: 50%;
  border: 2px solid var(--dv-color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dv-color-text-on-dark);
  font-size: 8px;
  font-weight: var(--dv-weight-bold);
  box-sizing: content-box;
  pointer-events: none;
}
.dv-swatch__sale::before {
  content: "%";
}
.dv-swatch--unavailable {
  opacity: 0.4;
}
.dv-swatch--unavailable::after {
  content: "";
  position: absolute;
  inset: 30%;
  background: var(--dv-color-bg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><line x1='4' y1='4' x2='20' y2='20'/><line x1='20' y1='4' x2='4' y2='20'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><line x1='4' y1='4' x2='20' y2='20'/><line x1='20' y1='4' x2='4' y2='20'/></svg>") center/contain no-repeat;
}

/* Swatch overflow indicator "+5" */
.dv-swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--dv-color-text-tertiary);
  vertical-align: top;
  margin-left: var(--dv-space-1);
  height: 14px;
}


/* ============================================================================
   6. TYPOGRAPHY HELPERS
   ============================================================================ */
.dv-h1 {
  font-size: var(--dv-text-3xl);
  font-weight: var(--dv-weight-medium);
  line-height: var(--dv-leading-tight);
  letter-spacing: -0.005em;
  color: var(--dv-color-text);
  margin: 0;
}
.dv-h2 {
  font-size: var(--dv-text-2xl);
  font-weight: var(--dv-weight-medium);
  line-height: var(--dv-leading-snug);
  color: var(--dv-color-text);
  margin: 0;
}
.dv-h3 {
  font-size: var(--dv-text-xl);
  font-weight: var(--dv-weight-medium);
  line-height: var(--dv-leading-snug);
  color: var(--dv-color-text);
  margin: 0;
}
.dv-text-meta {
  font-size: var(--dv-text-sm);
  color: var(--dv-color-text-secondary);
  line-height: var(--dv-leading-snug);
}
.dv-text-eyebrow {
  font-size: var(--dv-text-xs);
  font-weight: var(--dv-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dv-color-text-secondary);
}
.dv-text-strikethrough {
  text-decoration: line-through;
  color: var(--dv-color-text-tertiary);
}


/* ============================================================================
   7. PRICE — ціна стандартизована для всіх місць
   ============================================================================ */
.dv-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dv-space-2);
  font-size: var(--dv-text-lg);
  font-weight: var(--dv-weight-medium);
  color: var(--dv-color-text);
  line-height: 1;
}
.dv-price--lg {
  font-size: var(--dv-text-3xl);
}
.dv-price--sale {
  color: var(--dv-color-brand);
}
.dv-price__old {
  font-size: var(--dv-text-sm);
  color: var(--dv-color-text-tertiary);
  text-decoration: line-through;
  font-weight: var(--dv-weight-normal);
}


/* ============================================================================
   8. RATING — зірочки уніфіковані
   ============================================================================ */
.dv-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-1);
  font-size: var(--dv-text-sm);
  color: var(--dv-color-text-secondary);
}
.dv-rating__star {
  color: var(--dv-color-rating);
  font-size: var(--dv-text-md);
  line-height: 1;
}


/* ============================================================================
   9. UTILITY CLASSES (точкові, не зловживати)
   ============================================================================ */
.dv-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dv-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dv-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



.dv-grid--catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dv-space-4);
  margin-bottom: var(--dv-space-7);
}

/* Коли є sidebar (column_left) — 3 колонки */
.dv-grid--catalog--narrow {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1199px) {
  .dv-grid--catalog,
  .dv-grid--catalog--narrow {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .dv-grid--catalog,
  .dv-grid--catalog--narrow {
    grid-template-columns: 1fr;
    gap: var(--dv-space-3);
  }
}


/* ============================================================================
   2. PRODUCT CARD
   ============================================================================ */
.dv-card {
  position: relative;
  background: var(--dv-color-bg);
  border-radius: var(--dv-radius-lg);
  border: 0.5px solid var(--dv-color-border-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dv-transition-fast);
  font-family: 'Montserrat', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dv-card:hover {
  border-color: var(--dv-color-border);
}

.dv-card * {
  box-sizing: border-box;
}


/* --- BADGES (sale, hit) — позиціонуються поверх media --- */
.dv-card__badge {
  position: absolute;
  top: var(--dv-space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--dv-space-2);
  border-radius: var(--dv-radius-pill);
  font-size: 11px;
  font-weight: var(--dv-weight-medium);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
}
.dv-card__badge--sale {
  left: var(--dv-space-2);
  background: var(--dv-color-brand);
  color: var(--dv-color-text-on-dark);
}
.dv-card__badge--hit {
  left: var(--dv-space-2);
  background: var(--dv-color-bg-dark);
  color: var(--dv-color-text-on-dark);
}
/* Якщо є і sale і hit — hit зміщується вправо */
.dv-card__badge--sale + .dv-card__badge--hit {
  left: auto;
  right: var(--dv-space-2);
}


/* --- 360° INDICATOR (bottom-right поверх media, pill з іконкою + текстом) --- */
.dv-card__360 {
  position: absolute;
  bottom: var(--dv-space-2);
  right: var(--dv-space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 8px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--dv-radius-pill);
  color: var(--dv-color-text);
  font-size: 11px;
  font-weight: var(--dv-weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.dv-card__360 svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .dv-card__360 {
    height: 24px;
    padding: 0 8px 0 6px;
    font-size: 10px;
    gap: 3px;
  }
  .dv-card__360 svg {
    width: 13px;
    height: 13px;
  }
}


/* --- MEDIA AREA (зображення, галерея) --- */
.dv-card__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dv-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--dv-color-bg-media);
  overflow: hidden;
}

/* Fallback для браузерів без aspect-ratio (Safari < 15) */
@supports not (aspect-ratio: 4 / 3) {
  .dv-card__media {
    height: 0;
    padding-top: 75%;
  }
  .dv-card__media > * {
    position: absolute;
    inset: 0;
  }
}

.dv-card__gallery {
  width: 100%;
  height: 100%;
  position: relative;
}

.dv-card__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- SLICK CAROUSEL ADJUSTMENTS --- */
.dv-card__gallery.slick-initialized {
  outline: none;
}
.dv-card__gallery .slick-list,
.dv-card__gallery .slick-track {
  height: 100%;
}
.dv-card__gallery .slick-slide > div {
  height: 100%;
  outline: none;
}
.dv-card__gallery .slick-slide img {
  display: block !important;
}

/* Slick dots — широкі рівномірні риски на всю ширину картки.
   Тап-зона висока (16px), видима частина тонша (3px) для естетики */
.dv-card__gallery .slick-dots {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  display: flex !important;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1;
}
.dv-card__gallery .slick-dots li {
  flex: 1;            /* кожна риска розтягується рівномірно */
  height: 16px;       /* висока тап-зона */
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv-card__gallery .slick-dots li button {
  display: none;
}
/* Видима частина риски — через ::before */
.dv-card__gallery .slick-dots li::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.15);
  transition: background var(--dv-transition-fast);
}
.dv-card__gallery .slick-dots li.slick-active::before {
  background: var(--dv-color-text);
  height: 4px;        /* активна риска трохи товща */
}

/* --- BODY (текстова частина картки) --- */
.dv-card__body {
  padding: var(--dv-space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;  /* щоб всі картки в ряду були одинакові */
}


/* --- NAME --- */
/* !important потрібен бо старий CSS має правила на h3/h4 в каталозі з вищим селектором */
.dv-card__name {
  font-size: var(--dv-text-base) !important;
  font-weight: var(--dv-weight-medium) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--dv-text-base) * 1.35 * 2);
}
.dv-card__name a {
  color: var(--dv-color-text) !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
}
.dv-card__name a:hover {
  text-decoration: underline !important;
}


/* --- RATING (зірочки) --- */
.dv-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 13px;
  line-height: 1;
}
.dv-card__star {
  color: var(--dv-color-border-soft);
}
.dv-card__star--filled {
  color: var(--dv-color-rating);
}


/* --- COLOR SWATCHES --- */
.dv-card__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  /* Резерв висоти, навіть якщо у товару немає кольорів */
  min-height: 14px;
}


/* --- PRICE --- */
/* !important бо існує старий .price + .price-new з більшим розміром і червоним */
.dv-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--dv-space-2);
  margin-top: var(--dv-space-1);
}
.dv-card__price .dv-price,
.dv-card__price .dv-price--sale {
  font-size: var(--dv-text-lg) !important;
  font-weight: var(--dv-weight-medium) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.dv-card__price .dv-price {
  color: var(--dv-color-text) !important;
}
.dv-card__price .dv-price--sale {
  color: var(--dv-color-brand) !important;
}
.dv-card__price .dv-price__old {
  font-size: var(--dv-text-sm) !important;
  color: var(--dv-color-text-tertiary) !important;
  text-decoration: line-through !important;
  font-weight: var(--dv-weight-normal) !important;
}


/* --- STOCK INDICATOR --- */
.dv-card__stock {
  font-size: var(--dv-text-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.dv-card__stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.dv-card__stock--available {
  color: var(--dv-color-success);
}
.dv-card__stock--made-to-order {
  color: var(--dv-color-warning);
}


/* --- GIFT INDICATOR --- */
.dv-card__gift {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8B5A1C;
  background: var(--dv-color-bg-warm);
  padding: 4px 8px;
  border-radius: var(--dv-radius-sm);
  align-self: flex-start;
  line-height: 1.2;
  font-weight: var(--dv-weight-medium);
}

/* --- INSTALLMENTS (оплата частинами) — притискається до низу картки --- */
.dv-card__installments {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-2);
  padding-top: var(--dv-space-3);
  border-top: 0.5px solid var(--dv-color-border-soft);
  margin-top: auto;  /* ← ось це робить магію — притискає до низу */
  font-size: var(--dv-text-sm);
  color: var(--dv-color-text-secondary);
}
.dv-card__installments-text {
  line-height: 1.2;
}
.dv-card__installments-text strong {
  color: var(--dv-color-text);
  font-weight: var(--dv-weight-medium);
}
.dv-card__installments-icons {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-space-2);
  flex-shrink: 0;
}
.dv-card__pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  border-radius: 3px;
  line-height: 1;
}
.dv-card__pay-icon--mono {
  background: #1d1d1d;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 0 5px;
  letter-spacing: 0.02em;
}
.dv-card__pay-icon--privat {
  width: 18px;
  background: transparent;
}

@media (max-width: 767px) {
  .dv-card__installments {
    font-size: 11px;
    padding: 6px 0;
  }
  .dv-card__pay-icon--mono {
    font-size: 8px;
    height: 16px;
  }
  .dv-card__pay-icon--privat {
    height: 16px;
    width: 16px;
  }
  .dv-card__pay-icon--privat svg {
    width: 12px;
    height: 12px;
  }
}

/* ============================================================================
   3. MOBILE ADJUSTMENTS — компактніші картки для одноколонкового layout
   ============================================================================ */
@media (max-width: 767px) {

  .dv-card {
    border-radius: var(--dv-radius-md);
    border-width: 1px;
  }

  /* Media area — нижча, щоб не займала весь екран */
  .dv-card__media {
    aspect-ratio: 16 / 10;
  }
  @supports not (aspect-ratio: 16 / 10) {
    .dv-card__media {
      padding-top: 62.5%;
    }
  }

  /* Body — більше повітря між елементами */
  .dv-card__body {
    padding: var(--dv-space-4) var(--dv-space-4) var(--dv-space-3);
    gap: 10px;
  }

  /* Назва — крупніше, читабельніше */
  .dv-card__name {
    font-size: 17px !important;
    line-height: 1.3 !important;
    min-height: calc(17px * 1.3) !important;
    -webkit-line-clamp: 2;
  }

  /* Бейдж −13% — більший і помітніший */
  .dv-card__badge {
    font-size: 12px;
    height: 26px;
    padding: 0 10px;
    top: var(--dv-space-3);
    left: var(--dv-space-3);
  }

  /* 360° — більший pill з зрозумілим текстом */
  .dv-card__360 {
    height: 32px;
    padding: 0 12px 0 10px;
    bottom: var(--dv-space-3);
    right: var(--dv-space-3);
    font-size: 12px;
    gap: 5px;
  }
  .dv-card__360 svg {
    width: 18px;
    height: 18px;
  }

  /* Color swatches — більші для тапу пальцем */
  .dv-card__swatches {
    gap: 8px;
    min-height: 18px;
  }
  .dv-swatch-mini {
    width: 18px;
    height: 18px;
  }
  .dv-swatch-mini__sale {
    width: 8px;
    height: 8px;
  }
  .dv-swatch-more {
    font-size: 12px;
    height: 18px;
    margin-left: 3px;
  }

  /* Stock — крупніше */
  .dv-card__stock {
    font-size: 14px;
  }
  .dv-card__stock-dot {
    width: 7px;
    height: 7px;
  }

  /* Зірочки рейтингу — крупніше */
  .dv-card__rating {
    font-size: 16px;
  }

  /* Ціна — велика і помітна */
  .dv-card__price {
    gap: var(--dv-space-2);
    margin-top: 2px;
  }
  .dv-card__price .dv-price,
  .dv-card__price .dv-price--sale {
    font-size: 22px !important;
    font-weight: 600 !important;
  }
  .dv-card__price .dv-price__old {
    font-size: 14px !important;
  }

  /* Installments — добре читається */
  .dv-card__installments {
    padding-top: var(--dv-space-3);
    margin-top: var(--dv-space-2);
    font-size: 14px;
  }
  .dv-card__pay-icon--mono {
    font-size: 11px;
    height: 22px;
    padding: 0 7px;
  }
  .dv-card__pay-icon--privat {
    height: 22px;
    width: 22px;
  }
  .dv-card__pay-icon--privat svg {
    width: 16px;
    height: 16px;
  }

/* Gallery dots — той самий стиль що десктоп, але тап-зона вища і відступ більший */
  .dv-card__gallery .slick-dots {
    bottom: 12px;
    left: 16px;
    right: 16px;
    gap: 5px;
  }
  .dv-card__gallery .slick-dots li {
    height: 24px;       /* висока тап-зона на мобайлі — палець попадає легко */
  }
  .dv-card__gallery .slick-dots li::before {
    height: 4px;
    border-radius: 2px;
  }
  .dv-card__gallery .slick-dots li.slick-active::before {
    height: 5px;
  }

  /* Між картками в grid — більше простору */
  .dv-grid--catalog,
  .dv-grid--catalog--narrow {
    gap: var(--dv-space-5);
  }
}
/* FontAwesome inside .dv-typography (Montserrat universal override turned .fa icons into tofu) */
.dv-typography .fa { font-family: 'FontAwesome' !important; }
/* ============================================================================
   CONTACTS 2026  (.dv-) — прев'ю ?re=1 (information/contact2.twig)
   Аддитивно, не зачіпає старі класи.
   ============================================================================ */
.dv-contacts-page { padding: var(--dv-space-6) 0 var(--dv-space-9); }

/* breadcrumbs */
.dv-breadcrumbs { font-size: var(--dv-text-sm); color: var(--dv-color-text-tertiary); margin-bottom: var(--dv-space-4); }
.dv-breadcrumbs a { color: var(--dv-color-text-secondary); text-decoration: none; }
.dv-breadcrumbs a:hover { color: var(--dv-color-brand); }
.dv-breadcrumbs__sep { margin: 0 var(--dv-space-2); color: var(--dv-color-border); }
.dv-breadcrumbs__current { color: var(--dv-color-text); }

.dv-page-title {
  font-size: var(--dv-text-3xl); font-weight: var(--dv-weight-semibold);
  color: var(--dv-color-text); margin: 0 0 var(--dv-space-6); line-height: var(--dv-leading-tight);
}

/* layout: info | map */
.dv-contacts { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--dv-space-6); align-items: start; }

/* картки */
.dv-card {
  background: var(--dv-color-bg); border: 1px solid var(--dv-color-border-soft);
  border-radius: var(--dv-radius-lg); padding: var(--dv-space-6);
}
.dv-contact-block + .dv-contact-block { margin-top: var(--dv-space-5); }
.dv-contact-lead { font-size: var(--dv-text-md); color: var(--dv-color-text-secondary); margin: 0 0 var(--dv-space-5); }

/* рядок із іконкою */
.dv-contact-row { display: flex; gap: var(--dv-space-3); align-items: flex-start; padding: var(--dv-space-3) 0; border-top: 1px solid var(--dv-color-border-soft); }
.dv-contact-row:first-of-type { border-top: 0; padding-top: 0; }
.dv-contact-row__icon { color: var(--dv-color-brand); font-size: var(--dv-text-lg); width: 22px; text-align: center; margin-top: 2px; flex: 0 0 auto; }
.dv-contact-row > div { display: flex; flex-direction: column; gap: 2px; }
.dv-contact-row__title { font-weight: var(--dv-weight-semibold); color: var(--dv-color-text); }
.dv-contact-muted { color: var(--dv-color-text-secondary); font-size: var(--dv-text-base); }

/* відділи */
.dv-depts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dv-space-5); }
.dv-dept__title {
  font-size: var(--dv-text-xs); font-weight: var(--dv-weight-bold); text-transform: uppercase;
  letter-spacing: .04em; color: var(--dv-color-text-tertiary); margin-bottom: var(--dv-space-3);
}
.dv-dept__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dv-space-2); }
.dv-phone {
  display: inline-flex; align-items: center; gap: var(--dv-space-2);
  color: var(--dv-color-text); text-decoration: none; font-weight: var(--dv-weight-medium);
  font-size: var(--dv-text-md); transition: color var(--dv-transition-fast);
}
.dv-phone:hover { color: var(--dv-color-brand); }
.dv-phone .fa { color: var(--dv-color-text-tertiary); font-size: var(--dv-text-sm); }

/* корпоративна пошта */
.dv-contact-email {
  display: flex; align-items: center; gap: var(--dv-space-3);
  margin-top: var(--dv-space-5); padding: var(--dv-space-4) var(--dv-space-5);
  background: var(--dv-color-bg-soft); border: 1px solid var(--dv-color-border-soft); border-radius: var(--dv-radius-md);
  text-decoration: none; transition: background var(--dv-transition-fast);
}
.dv-contact-email:hover { border-color: var(--dv-color-border); background: #ffffff; }
.dv-contact-email .fa { color: var(--dv-color-text-secondary); font-size: var(--dv-text-2xl); flex: 0 0 auto; }
.dv-contact-email > span { display: flex; flex-direction: column; }
.dv-contact-email__label { font-size: var(--dv-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--dv-color-text-secondary); }
.dv-contact-email__value { font-size: var(--dv-text-lg); font-weight: var(--dv-weight-semibold); color: var(--dv-color-text); }

/* карта */
.dv-map {
  width: 100%; min-height: 480px; height: 100%;
  border: 1px solid var(--dv-color-border-soft); border-radius: var(--dv-radius-lg); display: block;
}

/* адаптив */
@media (max-width: 900px) {
  .dv-contacts { grid-template-columns: 1fr; }
  .dv-map { min-height: 320px; }
}
@media (max-width: 560px) {
  .dv-depts { grid-template-columns: 1fr; gap: var(--dv-space-4); }
}

/* CONTACTS 2026 — телефони відділів (дані = готовий <a href="tel:"> з адмінки) */
.dv-dept__list a {
  display: inline-flex; align-items: center; gap: var(--dv-space-2);
  color: var(--dv-color-text); text-decoration: none; font-weight: var(--dv-weight-medium);
  font-size: var(--dv-text-md); transition: color var(--dv-transition-fast);
}
.dv-dept__list a:hover { color: var(--dv-color-brand); }
.dv-dept__list a::before { content: "\f095"; font-family: "FontAwesome"; color: var(--dv-color-text-tertiary); font-size: var(--dv-text-sm); }