/* ============================================================
   ShopIT Theme for OpenCart 3.0.5.0
   Main Stylesheet — CSS Variables + Base Styles
   All visual settings are injected by PHP from admin panel
   via <style> tag in header with CSS custom properties
   ============================================================ */

/* ---- CSS Custom Properties (defaults, overridden by PHP) ---- */
:root {
  /* Colors */
  --color-primary:       #1a1a1a;
  --color-secondary:     #e53935;
  --color-accent:        #4caf50;
  --color-bg:            #f5f5f5;
  --color-surface:       #ffffff;
  --color-text:          #212121;
  --color-text-muted:    #757575;
  --color-border:        #e0e0e0;
  --color-header-bg:     #1a1a1a;
  --color-header-text:   #ffffff;
  --color-topbar-bg:     #111111;
  --color-topbar-text:   #9e9e9e;
  --color-footer-bg:     #1a1a1a;
  --color-footer-text:   #9e9e9e;
  --color-price:         #212121;
  --color-price-old:     #9e9e9e;
  --color-badge-sale:    #e53935;
  --color-badge-new:     #4caf50;
  --color-badge-excl:    #9c27b0;
  --color-badge-gift:    #2196f3;
  --color-badge-limit:   #ff9800;

  /* Typography */
  --font-family:         'Inter', 'Segoe UI', Arial, sans-serif;
  --font-family-heading: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-size-base:      15px;
  --font-size-sm:        13px;
  --font-size-lg:        17px;
  --font-size-xl:        20px;
  --font-size-2xl:       24px;
  --font-size-3xl:       30px;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --line-height-base:    1.6;

  /* Borders & Radius */
  --border-width:        1px;
  --border-style:        solid;
  --border-radius-sm:    4px;
  --border-radius-md:    8px;
  --border-radius-lg:    12px;
  --border-radius-xl:    16px;
  --border-radius-full:  9999px;
  --card-radius:         12px;
  --button-radius:       8px;
  --input-radius:        8px;
  --badge-radius:        4px;

  /* Shadows */
  --shadow-sm:           0 1px 3px rgba(0,0,0,.08);
  --shadow-md:           0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:           0 8px 30px rgba(0,0,0,.12);
  --card-shadow:         0 2px 8px rgba(0,0,0,.08);
  --card-shadow-hover:   0 8px 24px rgba(0,0,0,.14);

  /* Spacing */
  --container-max-width: 1280px;
  --container-padding:   16px;
  --section-gap:         48px;
  --card-padding:        12px;
  --header-height:       72px;
  --topbar-height:       40px;

  /* Transitions */
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
  --transition-slow:     400ms ease;

  /* Product Card specific */
  --product-card-bg:          #ffffff;
  --product-card-border:      1px solid #f0f0f0;
  --product-card-radius:      12px;
  --product-card-shadow:      0 2px 8px rgba(0,0,0,.06);
  --product-card-shadow-hover:0 8px 28px rgba(0,0,0,.13);
  --product-card-img-bg:      #f8f8f8;
  --product-card-action-color:#e53935;

  /* Header specific */
  --header-search-bg:    #2a2a2a;
  --header-search-border:#3a3a3a;
  --header-search-focus: #e53935;
  --header-icon-color:   #9e9e9e;

  /* Cart / Mini-cart */
  --cart-bg:             #ffffff;
  --cart-border:         #f0f0f0;
  --cart-btn-bg:         #e53935;
  --cart-btn-text:       #ffffff;
  --cart-btn-radius:     8px;

  /* Category sidebar */
  --sidebar-bg:          #ffffff;
  --sidebar-border:      #f0f0f0;
  --sidebar-radius:      12px;
  --sidebar-filter-accent:#e53935;

  /* Buttons */
  --btn-primary-bg:      #e53935;
  --btn-primary-text:    #ffffff;
  --btn-primary-radius:  8px;
  --btn-primary-hover-bg:#c62828;
  --btn-secondary-bg:    #ffffff;
  --btn-secondary-text:  #212121;
  --btn-secondary-border:#e0e0e0;
  --btn-secondary-radius:8px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  background: var(--color-topbar-bg);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-secondary); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--color-text);
}
h1 { font-size: var(--font-size-h1, 32px); }
h2 { font-size: var(--font-size-h2, 26px); }
h3 { font-size: var(--font-size-h3, 20px); }

/* ============================================================
   CONTAINER
   ============================================================ */
.shopit-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.shopit-topbar {
  background: var(--color-topbar-bg);
  color: var(--color-topbar-text);
  font-size: var(--font-size-sm);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  position: static;
}

.shopit-topbar a {
  color: var(--color-topbar-text);
  transition: color var(--transition-fast);
}
.shopit-topbar a:hover { color: #ffffff; }

.shopit-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.shopit-topbar__menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.shopit-topbar__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ============================================================
   HEADER
   ============================================================ */
.shopit-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  position: relative;
  z-index: 1000;
  margin-top: 0 !important;
  border-top: 0 !important;
}

.shopit-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.shopit-header.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.shopit-topbar + .shopit-header {
  margin-top: 0 !important;
  border-top: 0 !important;
}

.shopit-header.shopit-header--hidden {
  transform: translateY(calc(-100% - var(--topbar-height)));
}

.shopit-topbar.shopit-topbar--hidden-mobile {
  transform: translateY(-100%);
}

main {
  padding-top: 0;
}

@media (max-width: 991px) {
}

.shopit-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-height);
}

/* Logo */
.shopit-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.shopit-logo__icon {
  width: 40px;
  height: 40px;
  background: var(--logo-icon-bg, linear-gradient(135deg, #ef5350, #b71c1c));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.shopit-logo__text {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-header-text);
  letter-spacing: -0.5px;
}
.shopit-footer__logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-footer-text, #ffffff);
  letter-spacing: -0.5px;
}

/* Categories dropdown button */
.shopit-header__cats-btn {
  display: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--button-radius);
  color: var(--color-header-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.shopit-header__cats-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.4);
}
@media (min-width: 992px) { .shopit-header__cats-btn { display: flex; } }

/* Search */
.shopit-search {
  flex: 1;
  max-width: 640px;
  position: relative;
}

.shopit-search__form {
  display: flex;
  position: relative;
}

.shopit-search__input {
  width: 100%;
  height: 44px;
  padding: 0 50px 0 16px;
  background: var(--header-search-bg);
  border: 1px solid var(--header-search-border);
  border-radius: var(--input-radius);
  color: #fff;
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast);
  outline: none;
}
.shopit-search__input::placeholder { color: #666; }
.shopit-search__input:focus { border-color: var(--header-search-focus); }

.shopit-search__btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  width: 44px;
  background: var(--color-secondary);
  border: none;
  border-radius: 0 var(--input-radius) var(--input-radius) 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.shopit-search__btn:hover { background: var(--btn-primary-hover-bg); }

.shopit-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: none;
}
.shopit-search__results.active { display: block; }
.shopit-search__result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  transition: background var(--transition-fast);
  cursor: pointer;
}
.shopit-search__result-item:hover { background: #f5f5f5; }
.shopit-search__result-img { width: 40px; height: 40px; object-fit: contain; }
.shopit-search__result-name { font-size: var(--font-size-sm); color: var(--color-text); }
.shopit-search__result-price { font-weight: var(--font-weight-bold); color: var(--color-secondary); margin-left: auto; font-size: var(--font-size-sm); white-space: nowrap; }

/* Header actions */
.shopit-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.shopit-header__action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--header-icon-color);
  font-size: 11px;
  border-radius: var(--border-radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
}
.shopit-header__action:hover { color: #fff; background: rgba(255,255,255,.08); }
.shopit-header__action svg { width: 22px; height: 22px; }

.shopit-header__badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-secondary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopit-header__phone {
  display: none;
  align-items: center;
  gap: 8px;
  color: #fff;
  padding: 0 12px;
}
.shopit-header__phone a { color: #fff; font-weight: 600; font-size: 15px; }
@media (min-width: 1200px) { .shopit-header__phone { display: flex; } }

/* Mobile toggle */
.shopit-header__toggle {
  display: flex;
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px;
  border-radius: var(--border-radius-md);
}
@media (min-width: 992px) { .shopit-header__toggle { display: none; } }

/* ============================================================
   MOBILE HEADER  (≤ 991 px)
   Phone top-row + cart positioned in that row
   ============================================================ */
@media (max-width: 991px) {
  /* Reveal mobile phone top-row */
  .shopit-mobile-toprow { display: flex !important; }

  /* Collapse desktop actions container so it takes zero flex space */
  .shopit-header__actions {
    margin-left: 0 !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    overflow: visible !important;
  }
  /* Hide phone / wishlist / account inside actions on mobile */
  .shopit-header__phone { display: none !important; }
  .shopit-header__actions > a.shopit-header__action { display: none !important; }

  /* Lift cart-drop into the mobile top-row area via absolute positioning
     (.shopit-header has position:sticky which acts as containing block) */
  .shopit-cart-drop {
    position: absolute !important;
    top: 0 !important;
    right: 6px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1050 !important;
  }

  /* Cart button: icon-only (hide label text, keep badge) */
  #shopit-cart-btn > span:not(.shopit-header__badge) { display: none !important; }

  /* Cart panel: fixed, opens directly below the cart button (toprow = 42px),
     full width with equal 8px padding on both sides */
  .shopit-cart-panel {
    position: fixed !important;
    top: 42px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Hide the arrow pointer on mobile (it would be off-center on full-width panel) */
  .shopit-cart-panel::before { display: none !important; }
}

/* ============================================================
   NAVIGATION (Desktop mega menu)
   ============================================================ */
.shopit-nav {
  background: var(--color-surface);
  border-bottom: var(--nav-border, 1px solid var(--color-border));
  display: none;
}
@media (min-width: 992px) { .shopit-nav { display: block; } }

.shopit-nav__inner {
  display: flex;
  align-items: center;
}

.shopit-nav__item {
  position: relative;
}

.shopit-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--transition-fast);
  border-bottom: 2px solid transparent;
}
.shopit-nav__link:hover,
.shopit-nav__item.active .shopit-nav__link {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* Dropdown */
.shopit-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.shopit-nav__item:hover .shopit-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.shopit-nav__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.shopit-nav__dropdown-link:hover {
  background: #f5f5f5;
  color: var(--color-secondary);
}
.shopit-nav__dropdown-count {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ============================================================
   MOBILE MENU
   ============================================================ */
.shopit-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  pointer-events: none;
}
.shopit-mobile-menu.active { pointer-events: all; }

.shopit-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.shopit-mobile-menu.active .shopit-mobile-menu__overlay { opacity: 1; }

.shopit-mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: var(--color-surface);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  padding-bottom: 40px;
}
.shopit-mobile-menu.active .shopit-mobile-menu__panel { transform: translateX(0); }

.shopit-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--color-primary);
  color: #fff;
}

.shopit-mobile-menu__close {
  background: transparent;
  border: none;
  color: #fff;
  padding: 4px;
  display: flex;
}

.shopit-mobile-menu__nav { padding: 8px 0; }

.shopit-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  color: var(--color-text);
  font-size: var(--font-size-base);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.shopit-mobile-menu__link:hover { background: #f5f5f5; color: var(--color-secondary); }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.shopit-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: #000;
}

.shopit-slider__track {
  display: flex;
  transition: none;
  will-change: transform;
}

.shopit-slider__slide {
  min-width: 100%;
  position: relative;
  height: var(--hero-height, 500px);
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.shopit-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopit-slider__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 60px;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, transparent 70%);
}

.shopit-slider__title {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.shopit-slider__subtitle {
  font-size: clamp(14px, 2vw, 22px);
  color: rgba(255,255,255,.85);
  margin-bottom: 24px;
}

.shopit-slider__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 28px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--button-radius);
  font-weight: 600;
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast), transform var(--transition-fast);
  align-self: flex-start;
}
.shopit-slider__btn:hover { background: var(--btn-primary-hover-bg); color: #fff; transform: translateY(-1px); }

/* Slider controls */
.shopit-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.7;
  box-shadow: var(--shadow-md);
}
.shopit-slider__arrow:hover { background: #fff; opacity: 1; }
.shopit-slider__arrow--prev { left: 12px; }
.shopit-slider__arrow--next { right: 12px; }

.shopit-slider__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  align-items: center;
}
.shopit-slider__dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast), border-radius var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
}
.shopit-slider__dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--hero-dot-active-color, var(--color-secondary, #e53935));
}
.shopit-slider--no-arrows .shopit-slider__arrow { display: none !important; }
/* Drag cursor */
.shopit-slider__track { cursor: grab; }
.shopit-slider__track.dragging { cursor: grabbing; }

/* Slider desktop / mobile visibility */
.shopit-slider--desktop { display: block; }
.shopit-slider--mobile  { display: none; }
@media (max-width: 767px) {
  .shopit-slider--desktop { display: none !important; }
  .shopit-slider--mobile  { display: block !important; }
}
/* Mobile slider: portret */
.shopit-slider--mobile .shopit-slider__slide { height: var(--hero-mobile-height, 400px); }
.shopit-slider--mobile .shopit-slider__caption {
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 55%);
  justify-content: flex-end;
  padding: 28px 20px;
  align-items: center;
  text-align: center;
}
.shopit-slider__caption--center { align-items: center !important; text-align: center !important; }
.shopit-slider__caption--center .shopit-slider__title,
.shopit-slider__caption--center .shopit-slider__subtitle { text-align: center; }
/* Overlay personaliz per slide */
.shopit-slider__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.shopit-slider__caption { z-index: 2; position: relative; }
/* Badge */
.shopit-slider__badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  align-self: flex-start;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.shopit-slider__caption--center .shopit-slider__badge { align-self: center; }
/* Grup butoane slider */
.shopit-slider__btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.shopit-slider__caption--center .shopit-slider__btns { justify-content: center; }
/* Buton outline */
.shopit-slider__btn--outline {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.85);
  color: #fff !important;
}
.shopit-slider__btn--outline:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* ============================================================
   FEATURES BAR
   ============================================================ */
.shopit-features {
  background: var(--color-surface);
  border: var(--features-border, 1px solid var(--color-border));
  border-radius: var(--border-radius-md);
  padding: 20px 24px;
}

/* Scroll wrapper */
.shopit-features__scroll-wrap {
  position: relative;
}

/* Base grid — no scroll */
.shopit-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 576px) { .shopit-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .shopit-features__grid { grid-template-columns: repeat(4, 1fr); } }

/* Desktop scroll mode */
@media (min-width: 992px) {
  .shopit-features__grid--scroll-desktop {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 1px;
    scroll-padding-right: 1px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding-left: 1px;
    padding-right: 1px;
    padding-bottom: 4px;
    cursor: grab;
  }
  .shopit-features__grid--scroll-desktop:active { cursor: grabbing; }
  .shopit-features__grid--scroll-desktop::-webkit-scrollbar { display: none; }
  .shopit-features__grid--scroll-desktop .shopit-features__item {
    flex: 0 0 calc((100% - (16px * 3)) / 4);
    scroll-snap-align: start;
  }
}

/* Mobile scroll mode */
@media (max-width: 991px) {
  .shopit-features__grid--scroll-mobile {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 4px;
    cursor: grab;
  }
  .shopit-features__grid--scroll-mobile:active { cursor: grabbing; }
  .shopit-features__grid--scroll-mobile::-webkit-scrollbar { display: none; }
  .shopit-features__grid--scroll-mobile .shopit-features__item {
    flex: 0 0 160px;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Arrows + scrollbar row */
.shopit-features__arrows {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
/* Hide arrow row when scroll not active on that breakpoint */
@media (min-width: 992px) {
  .shopit-features__scroll-wrap:not(.shopit-features__scroll-wrap--desktop) .shopit-features__arrows { display: none; }
}
@media (max-width: 991px) {
  .shopit-features__scroll-wrap:not(.shopit-features__scroll-wrap--mobile) .shopit-features__arrows { display: none; }
}

.shopit-features__arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.shopit-features__arrow:hover {
  background: var(--color-bg);
  border-color: var(--arr-color, var(--color-secondary));
}
.shopit-features__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.shopit-features__arrow svg { width: 16px; height: 16px; }

.shopit-features__scrollbar-track {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: height 0.2s ease;
  cursor: pointer;
}
.shopit-features__scrollbar-track:hover {
  height: 6px;
}
.shopit-features__scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--sb-color, var(--color-secondary));
  border-radius: 2px;
  min-width: 20%;
  transition: left 0.15s, width 0.15s;
}

.shopit-features__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}

.shopit-features__icon {
  width: 44px;
  height: 44px;
  background: var(--feature-icon-bg, rgba(229,57,53,.1));
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shopit-features__icon svg { width: 22px; height: 22px; color: var(--color-secondary); }

.shopit-features__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.2;
}
.shopit-features__desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.shopit-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.shopit-section-head__titles {}
.shopit-section-head__title {
  font-size: var(--font-size-h2, 26px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.2;
}
.shopit-section-head__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.shopit-section-head__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--button-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.shopit-section-head__link:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background: rgba(229,57,53,.04);
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.shopit-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 576px) { .shopit-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .shopit-cat-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .shopit-cat-grid { grid-template-columns: repeat(6, 1fr); } }

.shopit-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  background: var(--color-surface);
  border: var(--cat-item-border, 1px solid var(--color-border));
  border-radius: var(--border-radius-md);
  text-align: center;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
  cursor: pointer;
}
.shopit-cat-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-secondary);
}

.shopit-cat-item__img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
}

.shopit-cat-item__icon {
  width: 56px;
  height: 56px;
  background: var(--feature-icon-bg, rgba(229,57,53,.08));
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopit-cat-item__icon svg { width: 28px; height: 28px; color: var(--color-secondary); }

.shopit-cat-item__name {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1.3;
}
.shopit-cat-item:hover .shopit-cat-item__name { color: var(--color-secondary); }

.shopit-cat-item__count {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ── Category grid scroll ── */
.shopit-cat-grid-wrap {
  position: relative;
}

/* Desktop scroll mode */
@media (min-width: 992px) {
  .shopit-cat-grid--scroll-desktop {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 1px;
    scroll-padding-right: 1px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding-left: 1px;
    padding-right: 1px;
    padding-bottom: 4px;
    cursor: grab;
  }
  .shopit-cat-grid--scroll-desktop:active { cursor: grabbing; }
  .shopit-cat-grid--scroll-desktop::-webkit-scrollbar { display: none; }
  .shopit-cat-grid--scroll-desktop .shopit-cat-item {
    flex: 0 0 calc((100% - (12px * 5)) / 6);
    scroll-snap-align: start;
  }
}

/* Mobile scroll mode */
@media (max-width: 991px) {
  .shopit-cat-grid--scroll-mobile {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding-bottom: 4px;
    cursor: grab;
  }
  .shopit-cat-grid--scroll-mobile:active { cursor: grabbing; }
  .shopit-cat-grid--scroll-mobile::-webkit-scrollbar { display: none; }
  .shopit-cat-grid--scroll-mobile .shopit-cat-item {
    flex: 0 0 calc((100% - 20px) / 3);
    scroll-snap-align: start;
  }
}

/* Arrows row */
.shopit-cats__arrows {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
/* Hide arrows when scroll not active on that breakpoint */
@media (min-width: 992px) {
  .shopit-cat-grid-wrap:not(.shopit-cat-grid-wrap--desktop) .shopit-cats__arrows { display: none; }
}
@media (max-width: 991px) {
  .shopit-cat-grid-wrap:not(.shopit-cat-grid-wrap--mobile) .shopit-cats__arrows { display: none; }
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.shopit-product-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr);
}
.shopit-product-grid-wrap {
  position: relative;
}
/* Admin-controlled: 2-col mobile override */
.shopit-product-grid--m2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px)  { .shopit-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px)  { .shopit-product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px)  { .shopit-product-grid--desktop-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px)  { .shopit-product-grid--desktop-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .shopit-product-grid--desktop-5 { grid-template-columns: repeat(5, 1fr); } }

/* Product sections scroll mode (single-row like categories) */
@media (min-width: 992px) {
  .shopit-product-grid--scroll-desktop {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding-bottom: 4px;
    cursor: grab;
  }
  .shopit-product-grid--scroll-desktop:active { cursor: grabbing; }
  .shopit-product-grid--scroll-desktop::-webkit-scrollbar { display: none; }
  .shopit-product-grid--scroll-desktop .shopit-product-card {
    flex: 0 0 calc((100% - (16px * 3)) / 4);
    min-width: 220px;
    scroll-snap-align: start;
  }
  .shopit-product-grid--scroll-desktop.shopit-product-grid--desktop-3 .shopit-product-card {
    flex: 0 0 calc((100% - (16px * 2)) / 3);
  }
  .shopit-product-grid--scroll-desktop.shopit-product-grid--desktop-5 .shopit-product-card {
    flex: 0 0 calc((100% - (16px * 4)) / 5);
  }
}
@media (max-width: 991px) {
  .shopit-product-grid--scroll-mobile {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding-bottom: 4px;
    cursor: grab;
  }
  .shopit-product-grid--scroll-mobile:active { cursor: grabbing; }
  .shopit-product-grid--scroll-mobile::-webkit-scrollbar { display: none; }
  .shopit-product-grid--scroll-mobile .shopit-product-card {
    flex: 0 0 calc((100% - 10px) / 2);
    min-width: 160px;
    scroll-snap-align: start;
  }
}

/* Hide section arrows when scroll is inactive on the current breakpoint */
@media (min-width: 992px) {
  .shopit-product-grid-wrap:not(.shopit-product-grid-wrap--desktop) .shopit-sections__arrows { display: none; }
}
@media (max-width: 991px) {
  .shopit-product-grid-wrap:not(.shopit-product-grid-wrap--mobile) .shopit-sections__arrows { display: none; }
}

.shopit-product-card {
  background: var(--product-card-bg);
  border: var(--product-card-border);
  border-radius: var(--product-card-radius);
  box-shadow: var(--product-card-shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
}
.shopit-product-card:hover {
  box-shadow: var(--product-card-shadow-hover);
}

/* Image area */
.shopit-product-card__img-wrap {
  position: relative;
  background: var(--product-card-img-bg);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 16px;
}

.shopit-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Badges */
.shopit-product-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.shopit-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--badge-radius);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
}
.shopit-badge--sale   { background: var(--color-badge-sale); }
.shopit-badge--new    { background: var(--color-badge-new); }
.shopit-badge--excl   { background: var(--color-badge-excl); }
.shopit-badge--gift   { background: var(--color-badge-gift); }
.shopit-badge--limit  { background: var(--color-badge-limit); }

/* Quick actions (wishlist, compare) */
.shopit-product-card__quick {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 1;
}
.shopit-product-card:hover .shopit-product-card__quick { opacity: 1; }

.shopit-product-card__quick-btn {
  width: 34px;
  height: 34px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.shopit-product-card__quick-btn:hover {
  background: #fff0f0;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.shopit-product-card__quick-btn svg { width: 16px; height: 16px; }

/* Content */
.shopit-product-card__body {
  padding: var(--card-padding);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shopit-product-card__cat {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--product-card-cat-size, 11px);
  font-weight: var(--product-card-cat-weight, 400);
  color: var(--product-card-cat-color, var(--color-text-muted));
  margin-bottom: 4px;
  transition: color var(--transition-fast);
}
.shopit-product-card__cat:hover { color: var(--color-secondary); }

.shopit-product-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
  margin: 0 0 4px;
  padding: 0;
}
.shopit-product-card__name a {
  color: var(--color-text);
  text-decoration: none;
  display: block;
  transition: color var(--transition-fast);
}
.shopit-product-card__name a:hover { color: var(--color-secondary); }

.shopit-product-card__attrs {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
}

.shopit-product-card__footer {
  margin-top: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--card-footer-pt, 6px) var(--card-footer-pr, 0px) var(--card-footer-pb, 10px) var(--card-footer-pl, 0px);
}

.shopit-product-card__prices {
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.shopit-product-card__price-old {
  line-height: 1;
  margin-bottom: 2px;
}
.shopit-product-card__price {
  line-height: 1;
}
.shopit-product-card__price--discount { color: var(--color-secondary); }

/* ── JS-injected price structure ── */
.sp-old-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 18px;
  width: 100%;
  line-height: 1;
}
.sp-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--card-footer-gap, 8px);
}
.sp-num {
  display: inline-block;
  font-size: var(--price-num-size, 17px);
  font-weight: var(--price-num-weight, 700);
  background: var(--price-num-color, var(--color-price));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sp-cur {
  display: inline-block;
  font-size: var(--price-cur-size, 13px);
  font-weight: var(--price-cur-weight, 400) !important;
  background: var(--price-cur-color, var(--color-price));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sp-price-old {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  color: var(--price-old-num-color, var(--color-price-old));
}
.sp-price-old::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.sp-old-num { font-size: var(--price-old-num-size, 12px); line-height: 1; background: var(--price-old-num-color, var(--color-price-old)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sp-old-cur { font-size: var(--price-old-cur-size, 11px); line-height: 1; background: var(--price-old-cur-color, var(--color-price-old)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sp-diff {
  display: inline-block;
  font-size: var(--price-diff-size, 12px);
  font-weight: 600;
  color: var(--price-diff-color, #e53935);
  white-space: nowrap;
}

.shopit-product-card__installment {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.shopit-product-card__installment strong { color: var(--color-text); }

.shopit-product-card__cart-btn {
  width: 38px;
  height: 38px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--btn-primary-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.shopit-product-card__cart-btn:hover { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-text); }
.shopit-product-card__cart-btn svg { width: 18px; height: 18px; }

/* Rating */
.shopit-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.shopit-rating__stars { display: flex; gap: 2px; }
.shopit-rating__star { width: 13px; height: 13px; color: #ffa000; }
.shopit-rating__star--empty { color: #e0e0e0; }
.shopit-rating__count { font-size: 11px; color: var(--color-text-muted); }

/* ============================================================
   PRODUCT LIST VIEW (Category page toggle)
   ============================================================ */
.shopit-product-list .shopit-product-card {
  flex-direction: row;
}
.shopit-product-list .shopit-product-card__img-wrap {
  width: 200px;
  flex-shrink: 0;
  aspect-ratio: auto;
}
.shopit-product-list .shopit-product-card__body { padding: 20px; }
.shopit-product-list .shopit-product-card__name {
  -webkit-line-clamp: 3;
  font-size: var(--font-size-base);
  min-height: auto;
  margin-top: 0;
}
.shopit-product-list .shopit-product-card__footer { flex-direction: column; align-items: flex-start; gap: 12px; }
.shopit-product-list .shopit-product-card__cart-btn { width: auto; padding: 0 20px; font-size: var(--font-size-sm); font-weight: 600; gap: 6px; }

/* ============================================================
   CATEGORY PAGE LAYOUT
   ============================================================ */
.shopit-category-layout {
  display: grid;
  gap: 24px;
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .shopit-category-layout--sidebar {
    grid-template-columns: minmax(220px, var(--category-sidebar-width, 20%)) minmax(0, 1fr);
  }

  .shopit-category-layout--sidebar .shopit-product-grid {
    gap: 18px;
  }

  .shopit-category-layout--sidebar .shopit-product-grid--desktop-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shopit-category-layout--sidebar .shopit-product-grid--desktop-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .shopit-category-layout--sidebar .shopit-product-grid--desktop-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .shopit-category-layout--sidebar .shopit-product-grid--desktop-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  .shopit-category-layout--sidebar .shopit-product-grid--desktop-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sidebar */
.shopit-sidebar {
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--sidebar-radius);
  padding: 20px;
}

@media (min-width: 992px) {
  .shopit-sidebar {
    position: sticky;
    top: 16px;
  }

  .shopit-sidebar.shopit-sidebar--scrollable {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
  }

  .shopit-sidebar.shopit-sidebar--scrollable::-webkit-scrollbar {
    width: 8px;
  }

  .shopit-sidebar.shopit-sidebar--scrollable::-webkit-scrollbar-track {
    background: transparent;
  }

  .shopit-sidebar.shopit-sidebar--scrollable::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
  }

  .shopit-sidebar.shopit-sidebar--scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.28);
  }
}

.shopit-sidebar__mobile-head {
  display: none;
}

.shopit-btn.shopit-mobile-filters-btn {
  display: none;
  align-items: center;
  gap: 8px;
}

.shopit-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  z-index: 1999;
}

.shopit-sidebar__section { margin-bottom: 24px; }
.shopit-sidebar__section:last-child { margin-bottom: 0; }

.shopit-sidebar__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

.shopit-sidebar #cp-module-zone {
  display: block;
}

.shopit-sidebar #cp-module-zone .panel {
  margin: 0 0 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.shopit-sidebar #cp-module-zone .panel:last-child {
  margin-bottom: 0;
}

.shopit-sidebar #cp-module-zone .panel-heading,
.shopit-sidebar #cp-module-zone .panel-body {
  padding: 0;
  background: transparent;
  border: 0;
}

.shopit-sidebar #cp-module-zone .panel-heading {
  margin-bottom: 14px;
}

.shopit-sidebar #cp-module-zone .panel-heading strong {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.shopit-sidebar #cp-module-zone .cp-presets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shopit-sidebar #cp-module-zone .cp-preset-chip {
  margin: 0;
  white-space: nowrap;
}

.shopit-sidebar #cp-module-zone .form-control {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  background: #fff;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  outline: none;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.shopit-sidebar #cp-module-zone .form-control:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(0, 156, 235, 0.12);
}

.shopit-sidebar #cp-module-zone .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 14px;
  border-radius: var(--button-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.shopit-sidebar #cp-module-zone .btn-sm {
  min-height: 32px;
  padding: 7px 12px;
  font-size: var(--font-size-xs);
  border-radius: calc(var(--button-radius) - 2px);
}

.shopit-sidebar #cp-module-zone .btn:hover,
.shopit-sidebar #cp-module-zone .btn:focus {
  text-decoration: none;
}

.shopit-sidebar #cp-module-zone .btn-default {
  background: #f3f4f6;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.shopit-sidebar #cp-module-zone .btn-primary {
  background: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  color: #fff;
}

.shopit-sidebar #cp-module-zone .buttons.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shopit-sidebar #cp-module-zone .buttons.clearfix > div {
  flex: 1 1 0;
}

.shopit-sidebar #cp-module-zone .buttons.clearfix::before,
.shopit-sidebar #cp-module-zone .buttons.clearfix::after {
  display: none;
}

.shopit-sidebar #cp-module-zone .pull-left,
.shopit-sidebar #cp-module-zone .pull-right {
  float: none !important;
}

.shopit-sidebar #cp-module-zone .pull-left .btn,
.shopit-sidebar #cp-module-zone .pull-right .btn,
.shopit-sidebar #cp-module-zone .pull-right button {
  width: 100%;
}

.shopit-sidebar #cp-module-zone .alert {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(0, 156, 235, 0.18);
  background: rgba(0, 156, 235, 0.08);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.shopit-sidebar #cp-module-zone .cp-filter-empty {
  text-align: center;
}

.shopit-sidebar #cp-module-zone .text-muted,
.shopit-sidebar #cp-module-zone .small.text-muted {
  color: var(--color-text-muted) !important;
}

body.shopit-no-scroll {
  overflow: hidden;
}

@media (max-width: 991px) {
  .shopit-mobile-filters-btn {
    display: inline-flex;
  }

  .shopit-sidebar {
    display: none;
    position: static;
    top: auto;
  }

  .shopit-sidebar--mobile-open {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    overflow-y: auto;
    padding: 0 0 24px;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 2000;
    background: #fff;
  }

  .shopit-sidebar--mobile-open .shopit-sidebar__mobile-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 3;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: #3c3c3c;
    color: #fff;
  }

  .shopit-sidebar__mobile-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
  }

  .shopit-sidebar__mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .shopit-sidebar--mobile-open > :not(.shopit-sidebar__mobile-head) {
    margin-left: 18px;
    margin-right: 18px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone {
    padding-top: 16px;
    padding-bottom: 96px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .panel {
    margin-bottom: 20px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .panel-heading {
    margin-bottom: 12px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-presets-grid {
    gap: 10px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-accordion {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-section {
    padding-bottom: 18px;
    margin-bottom: 18px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-content-inner {
    padding-top: 16px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-price-grid {
    gap: 10px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-price-input,
  .shopit-sidebar--mobile-open #cp-module-zone .form-control {
    height: 44px;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-actions,
  .shopit-sidebar--mobile-open #cp-module-zone .buttons.clearfix {
    position: sticky;
    bottom: 0;
    z-index: 4;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    margin: 18px -18px 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, #ffffff 28%);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
  }

  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-actions .btn,
  .shopit-sidebar--mobile-open #cp-module-zone .buttons.clearfix .btn,
  .shopit-sidebar--mobile-open #cp-module-zone .buttons.clearfix button {
    min-height: 46px;
    width: 100%;
  }

  .shopit-sidebar--mobile-open #cp-module-zone .buttons.clearfix > div,
  .shopit-sidebar--mobile-open #cp-module-zone .cp-filter-actions > * {
    width: 100%;
  }
}

/* Price slider */
.shopit-price-range {
  max-width: 100%;
  padding: 0 4px;
  overflow: visible;
}
.shopit-price-range__inputs { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.shopit-price-range__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  font-size: var(--font-size-sm);
  text-align: center;
  outline: none;
  transition: border-color var(--transition-fast);
}
.shopit-price-range__input:focus { border-color: var(--sidebar-filter-accent); }

.shopit-price-dual-slider {
  position: relative;
  height: 34px;
  margin: 14px 0 2px;
  --shopit-price-slider-edge: 13px;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
}

.shopit-price-dual-slider__track,
.shopit-price-dual-slider__range {
  position: absolute;
  left: var(--shopit-price-slider-edge);
  right: var(--shopit-price-slider-edge);
  top: 14px;
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
}

.shopit-price-dual-slider__track {
  background: #d9dde3;
}

.shopit-price-dual-slider__range {
  background: var(--sidebar-filter-accent);
}

.shopit-price-dual-slider__thumb {
  position: absolute;
  top: 6px;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 999px;
  background: var(--sidebar-filter-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.shopit-price-dual-slider__thumb:active {
  cursor: grabbing;
}

.shopit-price-dual-slider input[type="range"] {
  position: absolute;
  left: var(--shopit-price-slider-edge);
  top: 4px;
  z-index: 3;
  width: calc(100% - (var(--shopit-price-slider-edge) * 2));
  height: 24px;
  margin: 0;
  background: transparent;
  outline: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.shopit-price-dual-slider input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
}

.shopit-price-dual-slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.shopit-price-dual-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.shopit-price-dual-slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: transparent;
}

/* Range slider */
.shopit-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--sidebar-filter-accent) 0%, var(--sidebar-filter-accent) 50%, var(--color-border) 50%);
  border-radius: 2px;
  outline: none;
}
.shopit-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--sidebar-filter-accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Filter checkbox */
.shopit-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.shopit-filter-option:hover { color: var(--sidebar-filter-accent); }
.shopit-filter-option__check {
  width: 17px;
  height: 17px;
  border: 2px solid var(--color-border);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.shopit-filter-option input:checked + .shopit-filter-option__check {
  background: var(--sidebar-filter-accent);
  border-color: var(--sidebar-filter-accent);
}
.shopit-filter-option__count { margin-left: auto; font-size: 11px; color: var(--color-text-muted); }

/* Sort bar */
.shopit-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  flex-wrap: wrap;
}

.shopit-sort-bar__info { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.shopit-sort-bar__info strong { color: var(--color-text); }

.shopit-sort-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

@media (max-width: 991px) {
  .shopit-sort-bar {
    gap: 12px;
    padding: 12px;
  }

  .shopit-sort-bar__info {
    display: none;
  }

  .shopit-sort-bar__right {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    gap: 12px;
  }

  .shopit-sort-bar__right .shopit-sort-select {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
  }

  .shopit-sort-bar__right .shopit-mobile-filters-btn {
    display: inline-flex;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
  }
}

.shopit-sort-select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  font-size: var(--font-size-sm);
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.shopit-sort-select:focus { border-color: var(--color-secondary); }

.shopit-view-toggle { display: flex; gap: 4px; }
.shopit-view-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.shopit-view-btn.active,
.shopit-view-btn:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.shopit-view-btn svg { width: 16px; height: 16px; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.shopit-product-page {
  display: grid;
  gap: 32px;
  align-items: start;
  /* Defaults — overridden by inline style from admin settings */
  --shopit-gallery-width: 60%;
  --shopit-gallery-border-color: var(--color-border);
  --shopit-gallery-border-width: 1px;
}

/* Desktop: gallery occupies admin-defined width, info takes the rest */
@media (min-width: 768px) {
  .shopit-product-page {
    grid-template-columns: minmax(220px, var(--shopit-gallery-width, 60%)) minmax(0, 1fr);
  }
}

/* Gallery */

.shopit-gallery {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  row-gap: 16px;
  min-width: 0;
  align-self: start;
}

.shopit-gallery__main {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0;
  border: var(--shopit-gallery-border-width) solid var(--shopit-gallery-border-color);
  grid-column: 1;
  grid-row: 1;
  order: 1;
  min-width: 0;
}

.shopit-gallery__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  grid-column: 1;
  grid-row: 2;
  order: 2;
}

/* TOP position: thumbs above main image */
.shopit-gallery--top {
  grid-template-rows: auto auto;
}

.shopit-gallery--top .shopit-gallery__main {
  grid-row: 2;
  order: 2;
}

.shopit-gallery--top .shopit-gallery__thumbs {
  grid-row: 1;
  order: 1;
}

/* LEFT position: thumbs on left side of main image.
   Outer grid uses the same var(--shopit-gallery-width) 1fr as bottom/top.
   Inner gallery is flex: thumb (100px) | main image (flex:1). */
.shopit-gallery--left {
  display: flex;
  gap: 12px;
}

.shopit-gallery--left .shopit-gallery__main {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.shopit-gallery--left .shopit-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100px;
  flex-shrink: 0;
  order: -1;
}

/* RIGHT position: thumbs on right side of main image.
   Outer grid uses the same var(--shopit-gallery-width) 1fr as bottom/top.
   Inner gallery is flex: main image (flex:1) | thumb (100px). */
.shopit-gallery--right {
  display: flex;
  gap: 12px;
}

.shopit-gallery--right .shopit-gallery__main {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.shopit-gallery--right .shopit-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100px;
  flex-shrink: 0;
}

.shopit-gallery__sale-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  pointer-events: none;
}
.shopit-gallery__main-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform var(--transition-slow);
}
.shopit-gallery__main-img:hover { transform: scale(1.06); }

.shopit-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.shopit-gallery__thumb {
  width: 76px;
  height: 76px;
  background: var(--color-surface);
  border: var(--shopit-gallery-border-width, 1px) solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 6px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.shopit-gallery__thumb.active,
.shopit-gallery__thumb:hover {
  border-color: var(--shopit-gallery-border-color, var(--color-secondary));
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}
.shopit-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Product info panel */
.shopit-product-info { }

.shopit-product-info__brand {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
  margin-bottom: 6px;
}
.shopit-product-info__brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-decoration: none;
  margin-bottom: 0;
}
.shopit-product-info__brand-logo {
  max-width: 100px;
  max-height: 50px;
  min-width: 22px;
  min-height: 22px;
  font-size: 16px;
  border-radius: 6px;
  background: transparent;
  border: none;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 700;
}
.shopit-product-info__brand-logo img {
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 50px;
  object-fit: contain;
  display: block;
}
.shopit-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.shopit-product-meta__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.shopit-product-meta__code {
  font-size: 13px;
  color: var(--color-text-muted);
}
.shopit-product-meta__compare {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #cfd8e3;
  background: #fff;
  color: #526074;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.shopit-product-info__sku { font-size: 12px; color: var(--color-text-muted); margin-left: 16px; }

.shopit-brand-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
}

.shopit-brand-hero__logo {
  width: 92px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  flex: 0 0 auto;
}

.shopit-brand-hero__logo img {
  max-width: 78px;
  max-height: 44px;
  object-fit: contain;
  display: block;
}

.shopit-brand-hero__logo span {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-secondary);
}

.shopit-brand-hero__body {
  display: flex;
  align-items: center;
  min-height: 56px;
}

.shopit-brand-hero__eyebrow {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.shopit-brand-hero h1 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-3xl);
  line-height: 1.18;
}

.shopit-brand-hero h1 span {
  margin-left: 8px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  font-weight: 400;
}

.shopit-brand-list-hero {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
}

.shopit-brand-list-hero__label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shopit-brand-list-hero h1 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}

.shopit-brand-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.shopit-brand-index a {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: color .15s ease, background .15s ease;
}

.shopit-brand-index a:hover {
  background: var(--color-secondary);
  color: #fff;
}

.shopit-brand-groups {
  display: grid;
  gap: 24px;
}

.shopit-brand-group {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
}

.shopit-brand-group h2 {
  margin: 0 0 16px;
  color: var(--color-text);
  font-size: var(--font-size-xl);
}

.shopit-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.shopit-brand-card {
  min-height: 88px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}

.shopit-brand-card:hover {
  color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.shopit-brand-card__logo {
  width: 58px;
  height: 42px;
  border-radius: 12px;
  background: #f7f8fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.shopit-brand-card__logo img {
  max-width: 48px;
  max-height: 34px;
  object-fit: contain;
  display: block;
}

.shopit-brand-card__logo span {
  font-weight: 800;
  color: var(--color-secondary);
}

.shopit-brand-card__name {
  font-weight: 700;
}

.shopit-manufacturer-filter__list {
  display: grid;
  gap: 8px;
}

.shopit-manufacturer-filter__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--color-text);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.shopit-manufacturer-filter__item:hover,
.shopit-manufacturer-filter__item.is-selected {
  background: rgba(229, 57, 53, .08);
  color: var(--color-secondary);
}

.shopit-manufacturer-filter__count {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.shopit-manufacturer-filter__apply,
.shopit-manufacturer-filter__reset {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.shopit-manufacturer-filter__apply {
  margin-top: 12px;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

.shopit-manufacturer-filter__reset {
  margin-top: 12px;
  background: #f3f4f6;
  color: var(--color-text-muted);
}

.shopit-price-range__inputs--compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.shopit-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--color-surface);
  border-radius: var(--border-radius-lg);
  border: 1px dashed var(--color-border);
}

.cp-ajax-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-ajax-spinner {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: shopit-spin .75s linear infinite;
}

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

@media (max-width: 575px) {
  .shopit-brand-hero {
    align-items: flex-start;
    padding: 14px;
  }

  .shopit-brand-hero__logo {
    width: 68px;
    height: 48px;
  }
}

.shopit-product-info__title {
  font-size: var(--font-size-h1, 32px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 12px;
}

.shopit-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.shopit-product-head .shopit-product-meta {
  margin-bottom: 0;
}

.shopit-product-info__price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.shopit-product-info__price {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-price);
}
.shopit-product-info__price .sp-num { font-size: var(--product-price-num-size, 28px); font-weight: var(--product-price-num-weight, 800); background: var(--product-price-num-color, var(--color-price)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-product-info__price .sp-cur { font-size: var(--product-price-cur-size, 18px); font-weight: var(--product-price-cur-weight, 400) !important; background: var(--product-price-cur-color, var(--color-price)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-product-info__price-old {
  font-size: var(--product-price-old-num-size, 18px);
  font-weight: var(--product-price-old-num-weight, 500);
  color: var(--product-price-old-num-color, var(--color-price-old));
  text-decoration: line-through;
  opacity: .88;
}
.shopit-product-info__price-old .sp-num { font-size: var(--product-price-old-num-size, 18px); font-weight: var(--product-price-old-num-weight, 500); background: var(--product-price-old-num-color, var(--color-price-old)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-product-info__price-old .sp-cur { font-size: var(--product-price-old-cur-size, 14px); font-weight: var(--product-price-old-cur-weight, 400); background: var(--product-price-old-cur-color, var(--color-price-old)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-product-info__price-old .sp-num,
.shopit-product-info__price-old .sp-cur {
  text-decoration: line-through;
}
.shopit-product-info__price-save {
  font-size: var(--product-price-save-num-size, 15px);
  font-weight: var(--product-price-save-num-weight, 700);
  color: var(--product-price-save-num-color, #d32f2f);
  white-space: nowrap;
}
.shopit-product-info__price-save .sp-num { font-size: var(--product-price-save-num-size, 15px); font-weight: var(--product-price-save-num-weight, 700); background: var(--product-price-save-num-color, #d32f2f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-product-info__price-save .sp-cur { font-size: var(--product-price-save-cur-size, 13px); font-weight: var(--product-price-save-cur-weight, 500); background: var(--product-price-save-cur-color, #d32f2f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-product-info__price-discount {
  background: var(--color-secondary);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--badge-radius);
  font-size: 13px;
  font-weight: 700;
}

.shopit-product-info__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: 20px;
}
.shopit-product-info__stock--in { color: var(--shopit-stock-color, #388e3c); }
.shopit-product-info__stock--out { color: var(--shopit-stock-color, #d32f2f); }
.shopit-product-info__stock--preorder { color: var(--shopit-stock-color, #f9a825); }
.shopit-product-info__stock-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.shopit-product-info__stock--mode-color .shopit-product-info__stock-label { display: none; }
.shopit-product-info__stock--mode-text { color: var(--color-text-muted); }
.shopit-product-info__stock--mode-text .shopit-product-info__stock-dot { display: none; }

.shopit-product-info__attrs {
  background: #f9f9f9;
  border-radius: var(--border-radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.shopit-product-info__attr {
  display: flex;
  font-size: var(--font-size-sm);
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
.shopit-product-info__attr:last-child { border-bottom: none; }
.shopit-product-info__attr-name { color: var(--color-text-muted); min-width: 130px; }
.shopit-product-info__attr-val { font-weight: var(--font-weight-medium); }

.shopit-product-info__attrs--specs {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.shopit-product-info__attrs--specs .shopit-product-info__attr {
  position: relative;
  border-bottom: 1px solid #edf0f4;
  align-items: baseline;
  gap: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.shopit-product-info__attrs--specs .shopit-product-info__attr:nth-child(odd) {
  background: #f8f9fb;
}
.shopit-product-info__attrs--specs .shopit-product-info__attr:nth-child(even) {
  background: #ffffff;
}
.shopit-product-info__attrs--specs .shopit-product-info__attr-name {
  min-width: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shopit-product-info__attrs--specs .shopit-product-info__attr::before {
  content: '';
  flex: 1 1 auto;
  border-bottom: 1px solid #e8e8e8;
  order: 2;
  align-self: baseline;
  height: 1em;
  transform: translateY(-0.18em);
}
.shopit-product-info__attrs--specs.shopit-product-info__attrs--no-lines .shopit-product-info__attr {
  border-bottom: 0;
}
.shopit-product-info__attrs--specs.shopit-product-info__attrs--no-lines .shopit-product-info__attr::before {
  border-bottom: 0;
}
.shopit-product-info__attrs--specs .shopit-product-info__attr-val {
  order: 3;
  white-space: nowrap;
  font-weight: 700;
}
.shopit-spec-name-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.shopit-spec-tooltip {
  --shopit-spec-tip-size: 1em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--shopit-spec-tip-size);
  height: var(--shopit-spec-tip-size);
  min-width: 16px;
  min-height: 16px;
  color: var(--shopit-spec-tooltip-icon-color, #ffffff);
  background: var(--shopit-spec-tooltip-icon-bg, #111111);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  cursor: help;
  outline: none;
  z-index: 3;
}
.shopit-spec-tooltip__icon {
  transform: translateY(-0.5px);
  line-height: 1;
}
.shopit-spec-tooltip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(350px, 78vw);
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--shopit-spec-tooltip-bg, rgba(15, 15, 18, 0.96));
  color: var(--shopit-spec-tooltip-text-color, #ffffff);
  font-size: var(--shopit-spec-tooltip-font-size, 13px);
  line-height: 1.45;
  font-weight: var(--shopit-spec-tooltip-font-weight, 500);
  text-align: left;
  white-space: normal;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 40;
}
.shopit-spec-tooltip__bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 9px;
  height: 9px;
  background: var(--shopit-spec-tooltip-bg, rgba(15, 15, 18, 0.96));
  transform: translate(-50%, -5px) rotate(45deg);
}
.shopit-spec-tooltip:hover .shopit-spec-tooltip__bubble,
.shopit-spec-tooltip:focus .shopit-spec-tooltip__bubble,
.shopit-spec-tooltip:focus-visible .shopit-spec-tooltip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.shopit-spec-value-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.shopit-spec-value-link:hover,
.shopit-spec-value-link:focus {
  color: var(--color-secondary);
  text-decoration: none;
}
.shopit-spec-columns {
  column-gap: 28px;
  overflow: visible;
}
.shopit-spec-columns--auto,
.shopit-spec-columns--3 {
  column-count: 3;
}
.shopit-spec-columns--2 {
  column-count: 2;
}
.shopit-spec-columns--1 {
  column-count: 1;
}
.shopit-spec-columns--groups-1 {
  column-count: 1;
}
.shopit-spec-group {
  break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
}
.shopit-spec-grid {
  display: block;
}
.shopit-spec-grid--split {
  column-gap: 28px;
}
.shopit-spec-grid--split.shopit-spec-grid--cols-auto,
.shopit-spec-grid--split.shopit-spec-grid--cols-3 {
  column-count: 3;
}
.shopit-spec-grid--split.shopit-spec-grid--cols-2 {
  column-count: 2;
}
.shopit-spec-grid--split.shopit-spec-grid--cols-1 {
  column-count: 1;
}
.shopit-spec-row {
  min-height: 42px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(24px, 1fr) max-content;
  gap: 8px;
  align-items: baseline;
  break-inside: avoid;
  page-break-inside: avoid;
}
.shopit-spec-row:last-child {
  border-bottom: 0 !important;
}
.shopit-spec-row__line {
  align-self: baseline;
  height: 1em;
  border-bottom: var(--shopit-spec-line-width, 1px) solid var(--shopit-spec-line-color, #e8e8e8);
  transform: translateY(-0.18em);
}
.shopit-spec-value-cell {
  text-align: right;
  justify-self: end;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shopit-product-details,
.shopit-product-details__section,
.shopit-spec-grid {
  overflow: visible;
}
.shopit-product-details__section + .shopit-product-details__section {
  border-top: 1px solid var(--color-border);
}
.shopit-product-details__title {
  margin: 0 0 16px;
  font-size: var(--font-size-lg);
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-text);
}
.shopit-product-details__description {
  position: relative;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-text);
  overflow: hidden;
}
.shopit-product-details__description:not(.is-expanded) {
  display: -webkit-box;
  -webkit-line-clamp: var(--shopit-product-desc-lines, 3);
  -webkit-box-orient: vertical;
}
.shopit-product-details__description.is-expanded {
  display: block;
  overflow: visible;
}
@media (max-width: 1199px) {
  .shopit-spec-columns--auto,
  .shopit-spec-columns--3 {
    column-count: 2;
  }
  .shopit-spec-grid--split.shopit-spec-grid--cols-auto,
  .shopit-spec-grid--split.shopit-spec-grid--cols-3 {
    column-count: 2;
  }
}
@media (max-width: 767px) {
  .shopit-spec-columns,
  .shopit-spec-columns--auto,
  .shopit-spec-columns--1,
  .shopit-spec-columns--2,
  .shopit-spec-columns--3 {
    column-count: 1;
    column-gap: 0;
  }
  .shopit-spec-grid--split,
  .shopit-spec-grid--split.shopit-spec-grid--cols-auto,
  .shopit-spec-grid--split.shopit-spec-grid--cols-1,
  .shopit-spec-grid--split.shopit-spec-grid--cols-2,
  .shopit-spec-grid--split.shopit-spec-grid--cols-3 {
    column-count: 1;
    column-gap: 0;
  }
  .shopit-spec-row {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  .shopit-spec-row__line {
    display: none;
  }
}
.shopit-product-details__description[data-shopit-no-toggle="1"] + .shopit-product-details__more {
  display: none;
}
.shopit-product-details__more {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  font-weight: 700;
  cursor: pointer;
}
.shopit-product-details__more:hover,
.shopit-product-details__more:focus {
  text-decoration: underline;
}
@media (max-width: 575px) {
  .shopit-spec-tooltip__bubble {
    left: 0;
    transform: translate(0, 6px);
  }
  .shopit-spec-tooltip:hover .shopit-spec-tooltip__bubble,
  .shopit-spec-tooltip:focus .shopit-spec-tooltip__bubble,
  .shopit-spec-tooltip:focus-visible .shopit-spec-tooltip__bubble {
    transform: translate(0, 0);
  }
  .shopit-spec-tooltip__bubble::after {
    left: 12px;
  }
}

.shopit-product-promo {
  display: block;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(135deg, #eef5ff 0%, #e8f1ff 45%, #f7fbff 100%);
  border: 1px solid #dbe8ff;
  text-decoration: none;
}
.shopit-product-promo__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f2f69;
  margin-bottom: 2px;
}
.shopit-product-promo__meta {
  font-size: 12px;
  color: #4b5e83;
}

.shopit-credit-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
}
.shopit-credit-placeholder__text {
  font-size: 28px;
  color: var(--color-text);
}
.shopit-credit-placeholder__text strong {
  font-weight: 800;
}
.shopit-credit-placeholder__btn {
  min-width: 220px;
  height: 44px;
}

.shopit-buy-card {
  background: #f7f7f8;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 20px 22px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .shopit-buy-card {
    grid-template-columns: 1.15fr .85fr;
    align-items: stretch;
  }
}
.shopit-buy-card__left,
.shopit-buy-card__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-height: 154px;
}
.shopit-buy-card__right {
  justify-content: space-between;
  padding-left: 10px;
  border-left: 0;
}
.shopit-buy-card__right .shopit-credit-placeholder__text {
  order: 1;
}
.shopit-buy-card__right .shopit-buy-card__icons {
  order: 2;
  margin-top: 0;
}
.shopit-buy-card__right .shopit-credit-placeholder__btn {
  order: 3;
}
.shopit-product-info__price-block--card {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shopit-product-info__price-topline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  line-height: 1.15;
  min-height: 22px;
  margin-bottom: 0;
}
.shopit-product-info__price-topline.is-placeholder {
  visibility: hidden;
}
.shopit-product-info__price-topline .shopit-product-info__price-old,
.shopit-product-info__price-topline .shopit-product-info__price-save,
.shopit-product-info__price-topline .shopit-product-info__price-discount {
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.shopit-product-info__price-mainline {
  min-height: 50px;
  display: flex;
  align-items: flex-end;
}
.shopit-product-info__price--special .sp-num {
  color: var(--product-price-num-color, var(--color-text));
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.shopit-product-info__price--special .sp-cur {
  color: var(--product-price-cur-color, var(--color-text));
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 500 !important;
}
.shopit-buy-card__btn-main {
  width: 100%;
  flex: 0 0 auto;
  justify-content: center;
  min-height: 50px;
  border: 1px solid var(--btn-primary-border-color, transparent);
  border-radius: 14px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  margin-top: auto;
}
.shopit-credit-placeholder__btn,
.shopit-buy-card__btn-main {
  min-height: 50px;
}
.shopit-credit-placeholder__text {
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-text);
  text-align: right;
  margin-top: 50px;
}
.shopit-credit-placeholder__text strong {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.shopit-credit-placeholder__btn {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  margin-top: auto;
}
.shopit-buy-card__icons {
  display: flex;
  gap: 8px;
  margin-top: 0;
}
.shopit-buy-card__icons:empty {
  display: none;
}
.shopit-buy-card__left .shopit-buy-card__btn-main,
.shopit-buy-card__right .shopit-credit-placeholder__btn {
  width: 290px;
  max-width: 100%;
  align-self: start;
}
@media (min-width: 1400px) {
  .shopit-buy-card {
    grid-template-columns: 1.2fr .8fr;
  }
  .shopit-product-info__price--special .sp-num {
    font-size: 48px;
  }
}
@media (max-width: 991px) {
  .shopit-buy-card {
    padding: 14px;
    gap: 14px;
  }
  .shopit-buy-card__left,
  .shopit-buy-card__right {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .shopit-buy-card__right {
    padding-left: 0;
    border-left: 0;
  }
  .shopit-product-info__price--special .sp-num {
    font-size: 34px;
  }
  .shopit-product-info__price--special .sp-cur {
    font-size: 22px;
  }
  .shopit-product-info__price-mainline {
    min-height: 50px;
  }
  .shopit-credit-placeholder__text {
    font-size: 16px;
    text-align: left;
    margin-top: 0;
  }
  .shopit-credit-placeholder__text strong {
    font-size: 34px;
  }
  .shopit-buy-card__btn-main,
  .shopit-credit-placeholder__btn {
    min-height: 48px;
    width: 100%;
    align-self: stretch;
  }
}

.shopit-product-info__actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.shopit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--button-radius);
  border: none;
  cursor: pointer;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
  text-decoration: none;
}
.shopit-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: var(--btn-primary-border, none);
  flex: 1;
}
.shopit-btn--primary:hover {
  background: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
  transform: translateY(-1px);
}

.shopit-btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}
.shopit-btn--secondary:hover {
  background: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-text);
  border-color: var(--btn-secondary-hover-border);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.shopit-btn--icon {
  width: 46px;
  height: 46px;
  padding: 0;
  flex: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--button-radius);
}
.shopit-btn--icon:hover { border-color: var(--color-secondary); color: var(--color-secondary); background: #fff0f0; }
.shopit-btn svg { width: 18px; height: 18px; }

.shopit-product-info__benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  margin-top: 4px;
}
.shopit-product-info__benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.shopit-product-info__benefit:nth-child(2n) { border-right: none; }
.shopit-product-info__benefit:nth-last-child(-n+2) { border-bottom: none; }
.shopit-product-info__benefit svg { width: 20px; height: 20px; color: var(--color-secondary); flex-shrink: 0; margin-top: 1px; }
.shopit-product-info__benefit-text { font-size: 12px; color: var(--color-text-muted); }
.shopit-product-info__benefit-text strong { display: block; font-size: var(--font-size-sm); color: var(--color-text); margin-bottom: 1px; }

/* Tabs */
.shopit-tabs { margin-top: 40px; }
.shopit-tabs__nav {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shopit-tabs__nav::-webkit-scrollbar { display: none; }
.shopit-tabs__tab {
  padding: 12px 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.shopit-tabs__tab.active,
.shopit-tabs__tab:hover { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }

.shopit-tabs__content { padding: 24px 0; display: none; }
.shopit-tabs__content.active { display: block; }

/* ============================================================
   CART PAGE
   ============================================================ */
.shopit-cart-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 992px) { .shopit-cart-layout { grid-template-columns: 1fr 360px; } }

.shopit-cart-table {
  background: var(--cart-bg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--cart-border);
  overflow: hidden;
}
.shopit-cart-table__head {
  display: none;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 16px;
  padding: 14px 20px;
  background: #f5f5f5;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) { .shopit-cart-table__head { display: grid; } }

.shopit-cart-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--cart-border);
  transition: background var(--transition-fast);
}
.shopit-cart-row:hover { background: #fafafa; }
/* Mobile: product + remove only, qty below product */
@media (max-width: 767px) {
  .shopit-cart-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .shopit-cart-row > div:nth-child(1) { grid-column: 1; grid-row: 1; } /* product */
  .shopit-cart-row > div:nth-child(2) { display: none; }                /* unit price (shown inline) */
  .shopit-cart-row > div:nth-child(3) { grid-column: 1; grid-row: 2; } /* qty */
  .shopit-cart-row > div:nth-child(4) { display: none; }                /* total (shown inline) */
  .shopit-cart-row > div:nth-child(5) { grid-column: 2; grid-row: 1; } /* remove */
}
.shopit-mobile-prices { display: none; }
@media (max-width: 767px) { .shopit-mobile-prices { display: flex; } }

.shopit-cart-row__product { display: flex; align-items: center; gap: 14px; }
.shopit-cart-row__img { width: 70px; height: 70px; object-fit: contain; border-radius: var(--border-radius-sm); background: #f8f8f8; padding: 6px; flex-shrink: 0; }
.shopit-cart-row__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); line-height: 1.4; }
.shopit-cart-row__name:hover { color: var(--color-secondary); }

.shopit-cart-row__price { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-price); }

.shopit-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--button-radius);
  overflow: hidden;
  width: fit-content;
}
.shopit-qty__btn {
  width: 32px;
  height: 34px;
  background: #f5f5f5;
  border: none;
  font-size: 18px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
  line-height: 1;
}
.shopit-qty__btn:hover { background: var(--color-secondary); color: #fff; }
.shopit-qty__input {
  width: 46px;
  height: 34px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  outline: none;
  background: #fff;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.shopit-qty__input::-webkit-outer-spin-button,
.shopit-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shopit-cart-row__total { font-size: var(--font-size-base); font-weight: 700; color: var(--color-secondary); }

.shopit-cart-row__remove {
  width: 30px;
  height: 30px;
  background: var(--feature-icon-bg, rgba(229,57,53,.08));
  border: 1px solid transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.shopit-cart-row__remove:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.shopit-cart-row__remove svg { width: 14px; height: 14px; }

/* Cart summary */
.shopit-cart-summary {
  background: var(--cart-bg);
  border: 1px solid var(--cart-border);
  border-radius: var(--border-radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
}
.shopit-cart-summary__title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 20px; }
.shopit-cart-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border);
}
.shopit-cart-summary__row:last-of-type { border-bottom: none; }
.shopit-cart-summary__row--total {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  padding: 16px 0;
  border-top: 2px solid var(--color-border);
  margin-top: 8px;
}
.shopit-cart-summary__total-price { color: var(--color-secondary); }
.shopit-cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  background: var(--cart-btn-bg);
  color: var(--cart-btn-text);
  border: none;
  border-radius: var(--cart-btn-radius);
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
  margin-top: 20px;
  transition: background var(--transition-fast);
  text-decoration: none;
}
.shopit-cart-summary__checkout:hover { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-text); }

/* ============================================================
   CART DROPDOWN WIDGET
   ============================================================ */

/* Wrapper — position:relative so dropdown positions relative to it */
.shopit-cart-drop {
  position: relative;
}

/* Cart button active/open state */
#shopit-cart-btn.open,
#shopit-cart-btn:focus-visible {
  color: var(--color-secondary);
}

/* Dropdown panel */
.shopit-cart-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  width: 360px;
  max-height: 520px;
  background: #fff;
  border-radius: var(--border-radius-lg, 12px);
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  border: 1px solid var(--color-border, #e5e7eb);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.shopit-cart-panel::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--color-border, #e5e7eb);
  border-left: 1px solid var(--color-border, #e5e7eb);
  transform: rotate(45deg);
}
.shopit-cart-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

/* Header */
.shopit-cart-panel__header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  flex-shrink: 0;
}
.shopit-cart-panel__title {
  font-size: var(--font-size-base, 15px);
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
}
.shopit-cart-panel__count {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted, #6b7280);
  margin-left: 4px;
}

/* Items scroll area */
.shopit-cart-panel__items {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px;
  min-height: 60px;
  max-height: 300px;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.shopit-cart-panel__items::-webkit-scrollbar { width: 4px; }
.shopit-cart-panel__items::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Single cart item */
.shopit-cart-panel__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.shopit-cart-panel__item:last-child { border-bottom: none; }

.shopit-cart-panel__img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #f9fafb;
  border-radius: var(--border-radius-sm, 6px);
  padding: 4px;
  flex-shrink: 0;
  border: 1px solid var(--color-border, #e5e7eb);
}
.shopit-cart-panel__img--placeholder {
  width: 56px;
  height: 56px;
  background: #f3f4f6;
  border-radius: var(--border-radius-sm, 6px);
  flex-shrink: 0;
}

.shopit-cart-panel__info { flex: 1; min-width: 0; }
.shopit-cart-panel__name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.shopit-cart-panel__name:hover { color: var(--color-secondary, #e22); }
.shopit-cart-panel__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
}
/* Unit price — smaller/muted, shown on left */
.shopit-cart-panel__price {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted, #9ca3af);
  white-space: nowrap;
}
.shopit-cart-panel__price .sp-num { font-size: var(--cart-price-num-size, 12px); font-weight: var(--cart-price-num-weight, 400); background: var(--cart-price-num-color, var(--color-text-muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-cart-panel__price .sp-cur { font-size: var(--cart-price-cur-size, 11px); background: var(--cart-price-cur-color, var(--color-text-muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Line total (unit × qty) — bold, right-aligned, updates live */
.shopit-cart-panel__line-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-secondary, #e22);
  white-space: nowrap;
  margin-left: auto;
  transition: color .15s;
}
.shopit-cart-panel__line-total .sp-num { font-size: var(--cart-line-num-size, 14px); font-weight: var(--cart-line-num-weight, 700); background: var(--cart-line-num-color, var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-cart-panel__line-total .sp-cur { font-size: var(--cart-line-cur-size, 12px); background: var(--cart-line-cur-color, var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-cart-panel__qty {
  font-size: 12px;
  color: var(--color-text-muted, #6b7280);
}

.shopit-cart-panel__remove {
  background: var(--feature-icon-bg, rgba(229,57,53,.08));
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-secondary);
  flex-shrink: 0;
  line-height: 1;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.shopit-cart-panel__remove:hover { color: #fff; background: var(--color-secondary); }
.shopit-cart-panel__remove svg { width: 14px; height: 14px; display: block; }

/* Empty state */
.shopit-cart-panel__empty {
  text-align: center;
  padding: 32px 0 24px;
  color: var(--color-text-muted, #9ca3af);
}
.shopit-cart-panel__empty svg {
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  display: block;
  opacity: .25;
}
.shopit-cart-panel__empty p { font-size: 14px; }

/* Footer / totals + actions */
.shopit-cart-panel__footer {
  border-top: 1px solid var(--color-border, #e5e7eb);
  padding: 12px 16px 14px;
  flex-shrink: 0;
}
.shopit-cart-panel__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.shopit-cart-panel__total {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary, #e22);
}
.shopit-cart-panel__total .sp-num { font-size: var(--cart-total-num-size, 16px); font-weight: var(--cart-total-num-weight, 700); background: var(--cart-total-num-color, var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-cart-panel__total .sp-cur { font-size: var(--cart-total-cur-size, 13px); background: var(--cart-total-cur-color, var(--color-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.shopit-cart-panel__actions {
  display: flex;
  gap: 8px;
}
.shopit-cart-panel__btn-cart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1.5px solid var(--color-secondary, #e22);
  border-radius: var(--button-radius, 8px);
  color: var(--color-secondary, #e22);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.shopit-cart-panel__btn-cart:hover { background: var(--color-secondary, #e22); color: #fff; }
.shopit-cart-panel__btn-checkout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: var(--cart-btn-bg, var(--color-secondary, #e22));
  color: var(--cart-btn-text, #fff);
  border: none;
  border-radius: var(--button-radius, 8px);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.shopit-cart-panel__btn-checkout:hover { background: var(--btn-primary-hover-bg, #c00); color: var(--btn-primary-hover-text, #fff); }

/* ---- Cart item qty row ---- */
.shopit-cart-panel__qty-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.shopit-cart-panel__qty-btn {
  width: 26px; height: 26px;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background: #f9fafb;
  color: var(--color-text, #1a1a1a);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
  flex-shrink: 0; padding: 0;
}
.shopit-cart-panel__qty-btn:hover {
  background: var(--color-secondary, #e22);
  border-color: var(--color-secondary, #e22);
  color: #fff;
}
.shopit-cart-panel__qty-val {
  min-width: 26px;
  text-align: center;
  font-size: 13px; font-weight: 600;
  color: var(--color-text, #1a1a1a);
}
.shopit-cart-panel__remove {
  width: 26px; height: 26px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: var(--feature-icon-bg, rgba(229,57,53,.08));
  color: var(--color-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin-left: auto; flex-shrink: 0;
  transition: color .12s, background .12s, border-color .12s;
}
.shopit-cart-panel__remove:hover { color: #fff; background: var(--color-secondary); border-color: var(--color-secondary); }
.shopit-cart-panel__remove svg { width: 13px; height: 13px; display: block; }

/* ---- Cart quantity popup modal ---- */
.shopit-qty-popup {
  display: none;
  position: fixed; inset: 0;
  z-index: 9000;
  align-items: center; justify-content: center;
}
.shopit-qty-popup.open { display: flex; }
.shopit-qty-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  cursor: pointer;
}
.shopit-qty-popup__box {
  position: relative;
  background: #fff;
  border-radius: var(--border-radius-lg, 12px);
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
  padding: 28px 28px 24px;
  width: 360px; max-width: calc(100vw - 32px);
  text-align: center;
  animation: shopit-popup-in .2s ease;
}
@keyframes shopit-popup-in {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.shopit-qty-popup__close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none;
  font-size: 22px; line-height: 1; color: #aaa;
  cursor: pointer; padding: 2px 6px; border-radius: 6px;
  transition: color .12s, background .12s;
}
.shopit-qty-popup__close:hover { color: #333; background: #f3f4f6; }
.shopit-qty-popup__title { font-size: 17px; font-weight: 700; color: var(--color-text, #1a1a1a); margin: 0 0 6px; }
.shopit-qty-popup__name { font-size: 14px; color: var(--color-text-muted, #6b7280); margin: 0 0 20px; line-height: 1.4; min-height: 20px; }
.shopit-qty-popup__qty { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; }
.shopit-qty-popup__qty button {
  width: 36px; height: 36px;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: 8px; background: #f9fafb; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.shopit-qty-popup__qty button:hover { background: var(--color-secondary, #e22); border-color: var(--color-secondary, #e22); color: #fff; }
.shopit-qty-popup__qty input {
  width: 64px; height: 36px; text-align: center;
  font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: 8px; outline: none;
  -moz-appearance: textfield;
}
.shopit-qty-popup__qty input::-webkit-outer-spin-button,
.shopit-qty-popup__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.shopit-qty-popup__qty input:focus { border-color: var(--color-secondary, #e22); }
.shopit-qty-popup__actions { display: flex; flex-direction: column; gap: 8px; }
.shopit-qty-popup__btn-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px;
  background: var(--cart-btn-bg, var(--color-secondary, #e22));
  color: var(--cart-btn-text, #fff);
  border: none; border-radius: var(--button-radius, 8px);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.shopit-qty-popup__btn-add:hover { background: var(--btn-primary-hover-bg, #c00); }
.shopit-qty-popup__btn-continue {
  display: flex; align-items: center; justify-content: center;
  height: 40px; background: transparent;
  border: 1.5px solid var(--color-border, #e5e7eb);
  border-radius: var(--button-radius, 8px);
  font-size: 13px; font-weight: 500;
  color: var(--color-text-muted, #6b7280); cursor: pointer;
  transition: border-color .12s, color .12s;
}
.shopit-qty-popup__btn-continue:hover { border-color: #aaa; color: var(--color-text, #1a1a1a); }

/* ---- Add to cart button states ---- */
@keyframes shopit-spin {
  to { transform: rotate(360deg); }
}
.shopit-product-card__cart-btn.loading svg,
.shopit-product-card__cart-btn.success svg {
  animation: none;
}
.shopit-product-card__cart-btn.loading {
  opacity: .75;
  pointer-events: none;
}
.shopit-product-card__cart-btn.success {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}
.shopit-product-card__cart-btn.success:hover {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: #fff !important;
}
.shopit-add-to-cart .shopit-btn-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: shopit-spin .6s linear infinite;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.shopit-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 4px 0 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}
.shopit-breadcrumb a { color: var(--color-text-muted); transition: color var(--transition-fast); }
.shopit-breadcrumb a:hover { color: var(--color-secondary); text-decoration: none; }
.shopit-breadcrumb__sep { opacity: .4; font-size: 12px; }
.shopit-breadcrumb__current { color: var(--color-text); font-weight: 500; }

/* ============================================================
   PAGINATION
   ============================================================ */
.shopit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.shopit-pagination__btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.shopit-pagination__btn:hover,
.shopit-pagination__btn.active {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.shopit-pagination__btn.disabled { opacity: .4; pointer-events: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.shopit-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  margin-top: var(--section-gap);
}

.shopit-footer__newsletter {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 48px 0;
}
.shopit-footer__newsletter-inner { max-width: 520px; margin: 0 auto; text-align: center; }
.shopit-footer__newsletter h3 { font-size: var(--font-size-2xl); color: #fff; margin-bottom: 8px; }
.shopit-footer__newsletter p { font-size: var(--font-size-sm); color: rgba(255,255,255,.55); margin-bottom: 24px; }
.shopit-footer__newsletter-form { display: flex; gap: 8px; }
.shopit-footer__newsletter-input {
  flex: 1;
  height: 46px;
  padding: 0 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--input-radius);
  color: #fff;
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}
.shopit-footer__newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.shopit-footer__newsletter-input:focus { border-color: var(--color-secondary); }
.shopit-footer__newsletter-btn {
  height: 46px;
  padding: 0 20px;
  background: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: var(--input-radius);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.shopit-footer__newsletter-btn:hover { background: var(--btn-primary-hover-bg); }

.shopit-footer__main { padding: 48px 0 32px; }
.shopit-footer__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .shopit-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .shopit-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }

.shopit-footer__col-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.shopit-footer__links { display: flex; flex-direction: column; gap: 8px; }
.shopit-footer__link {
  font-size: var(--font-size-sm);
  color: var(--color-footer-text);
  transition: color var(--transition-fast);
}
.shopit-footer__link:hover { color: #fff; }

.shopit-footer__contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: var(--font-size-sm);
}
.shopit-footer__contact-icon { flex-shrink: 0; margin-top: 1px; color: var(--color-secondary); }
.shopit-footer__contact-icon svg { width: 16px; height: 16px; }
.shopit-footer__contact-item a { color: var(--color-footer-text); transition: color var(--transition-fast); }
.shopit-footer__contact-item a:hover { color: #fff; }

.shopit-footer__socials { display: flex; gap: 10px; margin-top: 16px; }
.shopit-footer__social {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-footer-text);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.shopit-footer__social:hover { background: var(--color-secondary); color: #fff; }
.shopit-footer__social svg { width: 16px; height: 16px; }

.shopit-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.4);
}

/* ============================================================
   NOTICES & ALERTS
   ============================================================ */
.shopit-alert {
  padding: 14px 16px;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.shopit-alert--success { background: #e8f5e9; border-left: 4px solid #4caf50; color: #2e7d32; }
.shopit-alert--danger  { background: #ffebee; border-left: 4px solid #f44336; color: #c62828; }
.shopit-alert--warning { background: #fff8e1; border-left: 4px solid #ffb300; color: #e65100; }
.shopit-alert--info    { background: #e3f2fd; border-left: 4px solid #2196f3; color: #1565c0; }

/* ============================================================
   SECTION SPACING
   ============================================================ */
.shopit-section { padding: 16px 0 40px; }
.shopit-section--sm { padding: 24px 0; }
.shopit-section--lg { padding: 64px 0; }
.shopit-section--sm.shopit-hero { padding-top: 24px !important; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.shopit-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-sm);
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.shopit-quick-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.shopit-quick-view-overlay.active { opacity: 1; pointer-events: all; }
.shopit-quick-view {
  background: #fff;
  border-radius: var(--border-radius-xl);
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  transform: scale(.95);
  transition: transform var(--transition-base);
}
.shopit-quick-view-overlay.active .shopit-quick-view { transform: scale(1); }
.shopit-quick-view__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f5f5f5;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 767px) {
  .shopit-header__inner { gap: 8px; }
  .shopit-search { max-width: none; }
  .shopit-slider__caption { padding: 24px 28px; }
  .shopit-cart-table__head { display: none; }
  .shopit-cart-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 10px; }
  .shopit-cart-row__price, .shopit-cart-row__total { display: none; }
  .shopit-product-page { 
    grid-template-columns: 1fr;
  }
  /* Gallery on mobile: always stacked */
  .shopit-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .shopit-gallery--left,
  .shopit-gallery--right {
    flex-direction: column;
    width: 100%;
  }
  .shopit-gallery--left .shopit-gallery__thumbs,
  .shopit-gallery--right .shopit-gallery__thumbs {
    width: 100%;
    flex-direction: row;
    order: auto;
  }
  .shopit-minicart { width: 100%; }
}

@media print {
  .shopit-header, .shopit-footer, .shopit-sidebar, .shopit-nav,
  .shopit-minicart, .shopit-mobile-menu { display: none !important; }
}

/* ============================================================
   EMPTY STATE — coș gol, 404, etc.
   ============================================================ */
.shopit-empty-state {
  max-width: 480px;
  margin: 60px auto 80px;
  text-align: center;
  padding: 0 16px;
}
.shopit-empty-state__icon {
  width: 100px;
  height: 100px;
  background: var(--color-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  color: var(--color-text-muted);
}
.shopit-empty-state__icon--404 {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #c62828 100%);
  color: #fff;
}
.shopit-empty-state__icon--404 span {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
}
.shopit-empty-state__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 10px;
  line-height: 1.3;
}
.shopit-empty-state__text {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: 0 0 30px;
  line-height: var(--line-height-base);
}
.shopit-empty-state .shopit-btn--lg {
  padding: 13px 32px;
  font-size: var(--font-size-base);
  gap: 8px;
}
.shopit-empty-state__links {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.shopit-empty-state__link {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: 1px;
  transition: color var(--transition-fast);
}
.shopit-empty-state__link:hover {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.shopit-empty-state--404 { margin-top: 40px; }

/* ============================================================
   CHECKOUT PAGE — multi-step accordion
   ============================================================ */
.shopit-checkout-section {
  padding: 28px 0 60px;
}
.shopit-checkout {
  max-width: 860px;
  margin: 0 auto;
}

/* Override Bootstrap panel defaults with shopit design */
.shopit-checkout .panel-group {
  margin-bottom: 0;
}
.shopit-checkout .panel {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.shopit-checkout .panel + .panel {
  margin-top: 0;
}

/* Step header */
.shopit-checkout-step__head {
  background: var(--color-bg) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}
.shopit-checkout-step__head .panel-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
}
/* When JS activates a step it inserts an <a> into panel-title */
.shopit-checkout-step__head .panel-title a,
.shopit-checkout-step__head .panel-title a:visited {
  color: var(--color-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shopit-checkout-step__head .panel-title a:hover {
  opacity: 0.85;
}
.shopit-checkout-step__head .panel-title a .fa-caret-down {
  font-size: 12px;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Step body (AJAX content loaded here) */
.shopit-checkout-step__body {
  padding: 24px 20px !important;
}

/* Inputs inside checkout panels – inherit shopit field styles */
.shopit-checkout .panel-body .form-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: 4px;
  display: block;
}
.shopit-checkout .panel-body input[type="text"],
.shopit-checkout .panel-body input[type="email"],
.shopit-checkout .panel-body input[type="tel"],
.shopit-checkout .panel-body input[type="password"],
.shopit-checkout .panel-body textarea,
.shopit-checkout .panel-body select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}
.shopit-checkout .panel-body input:focus,
.shopit-checkout .panel-body select:focus,
.shopit-checkout .panel-body textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(229,57,53,.1);
}
.shopit-checkout .panel-body .btn,
.shopit-checkout .panel-body button[id^="button-"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--button-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.shopit-checkout .panel-body .btn-primary,
.shopit-checkout .panel-body button[id^="button-"] {
  background: var(--color-secondary);
  color: #fff;
}
.shopit-checkout .panel-body .btn-primary:hover,
.shopit-checkout .panel-body button[id^="button-"]:hover {
  opacity: 0.88;
}
.shopit-checkout .panel-body .btn-default {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Error / warning inside step */
.shopit-checkout .panel-body .text-danger {
  font-size: var(--font-size-sm);
  color: #e53935;
  margin-top: 4px;
}
.shopit-checkout .panel-body .has-error input,
.shopit-checkout .panel-body .has-error select,
.shopit-checkout .panel-body .has-error textarea {
  border-color: #e53935;
}

/* Confirm step: order summary table */
.shopit-checkout .panel-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.shopit-checkout .panel-body table td,
.shopit-checkout .panel-body table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
.shopit-checkout .panel-body table tfoot td {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}

/* Mobile responsive */
@media (max-width: 575px) {
  .shopit-checkout-step__body {
    padding: 16px 14px !important;
  }
  .shopit-checkout-step__head {
    padding: 12px 14px !important;
  }
}

/* ============================================================
   CHECKOUT — Bootstrap 3 collapse + form compatibility
   Scoped to .shopit-checkout so no global conflicts
   ============================================================ */

/* Collapse show/hide */
.panel-collapse.collapse { display: none; }
.panel-collapse.collapse.in { display: block; }

/* Bootstrap grid within checkout steps */
.shopit-checkout .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.shopit-checkout [class*="col-sm-"] {
  padding: 0 10px;
  box-sizing: border-box;
  min-height: 1px;
}
.shopit-checkout .col-sm-2  { width: 16.6667%; }
.shopit-checkout .col-sm-3  { width: 25%; }
.shopit-checkout .col-sm-4  { width: 33.3333%; }
.shopit-checkout .col-sm-6  { width: 50%; }
.shopit-checkout .col-sm-8  { width: 66.6667%; }
.shopit-checkout .col-sm-9  { width: 75%; }
.shopit-checkout .col-sm-10 { width: 83.3333%; }
.shopit-checkout .col-sm-12 { width: 100%; }

/* Form groups & labels */
.shopit-checkout .form-group {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.shopit-checkout .form-group > label,
.shopit-checkout .form-group > .control-label {
  width: 100%;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.shopit-checkout .form-horizontal .form-group {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}
.shopit-checkout .form-horizontal .col-sm-2.control-label,
.shopit-checkout .form-horizontal .control-label[class*="col-"] {
  width: 160px;
  min-width: 160px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 38px;
  margin-bottom: 0;
}
.shopit-checkout .form-horizontal [class*="col-sm-"]:not(.control-label) {
  flex: 1;
}
.shopit-checkout .form-group.required .control-label::after,
.shopit-checkout .form-group.required > label:first-child::after {
  content: " *";
  color: var(--color-secondary);
}

/* Inputs inherit from earlier .panel-body rules; add specificity for .form-control */
.shopit-checkout .form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}
.shopit-checkout .form-control:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(229,57,53,.1);
}

/* Radio & Checkbox */
.shopit-checkout .radio,
.shopit-checkout .checkbox {
  margin: 6px 0;
  display: flex;
  align-items: center;
}
.shopit-checkout .radio label,
.shopit-checkout .checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  font-weight: var(--font-weight-normal);
  margin-bottom: 0;
  width: auto;
}
.shopit-checkout .radio input[type="radio"],
.shopit-checkout .checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-secondary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Buttons: .btn class from Bootstrap sub-templates */
.shopit-checkout .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--button-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  text-decoration: none;
  line-height: 1.4;
}
.shopit-checkout .btn-primary {
  background: var(--color-secondary);
  color: #fff !important;
}
.shopit-checkout .btn-primary:hover {
  opacity: .88;
  color: #fff;
}
.shopit-checkout .btn-primary[disabled],
.shopit-checkout .btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.shopit-checkout .btn-default {
  background: var(--color-bg);
  color: var(--color-text) !important;
  border: 1px solid var(--color-border);
}
.shopit-checkout .btn-default:hover { background: var(--color-border); }

/* Fieldset / Legend */
.shopit-checkout fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
.shopit-checkout legend {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-secondary);
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* Headings inside checkout steps */
.shopit-checkout .panel-body h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 10px;
}
.shopit-checkout .panel-body p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

/* Help text */
.shopit-checkout .help-block {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
  display: block;
}

/* Validation error */
.shopit-checkout .has-error .form-control {
  border-color: #e53935;
  box-shadow: 0 0 0 3px rgba(229,57,53,.1);
}
.shopit-checkout .text-danger {
  font-size: 12px;
  color: #e53935;
  margin-top: 3px;
  display: block;
}

/* Alerts inside step panels */
.shopit-checkout .alert {
  padding: 10px 14px;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.shopit-checkout .alert-danger {
  background: #ffeaea;
  border: 1px solid #f5c6cb;
  color: #b71c1c;
}
.shopit-checkout .alert-warning {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #e65100;
}
.shopit-checkout .alert-dismissible .close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  line-height: 1;
}

/* Order confirmation table */
.shopit-checkout .table-responsive {
  overflow-x: auto;
}
.shopit-checkout .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: 16px;
}
.shopit-checkout .table td,
.shopit-checkout .table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.shopit-checkout .table thead td,
.shopit-checkout .table thead th {
  background: var(--color-bg);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  border-bottom: 2px solid var(--color-border);
}
.shopit-checkout .table-bordered {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}
.shopit-checkout .table-bordered td,
.shopit-checkout .table-bordered th {
  border: 1px solid var(--color-border);
}
.shopit-checkout .table tfoot td {
  font-weight: var(--font-weight-bold);
  background: var(--color-bg);
}
.shopit-checkout .table tfoot tr:last-child td {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
}
.shopit-checkout .text-left  { text-align: left !important; }
.shopit-checkout .text-right { text-align: right !important; }
.shopit-checkout .text-center { text-align: center !important; }

/* label/badge for recurring items */
.shopit-checkout .label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--badge-radius);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}
.shopit-checkout .label-info {
  background: #2196f3;
  color: #fff;
}

/* Shipping / Payment method lists */
.shopit-checkout .panel-body .radio + .radio {
  margin-top: 4px;
}

/* Mobile: stack grid columns */
@media (max-width: 575px) {
  .shopit-checkout .row { margin: 0; }
  .shopit-checkout [class*="col-sm-"] { width: 100%; padding: 0; }
  .shopit-checkout .form-horizontal .form-group { flex-wrap: wrap; }
  .shopit-checkout .form-horizontal .col-sm-2.control-label,
  .shopit-checkout .form-horizontal .control-label[class*="col-"] {
    width: 100%;
    text-align: left;
    line-height: 1.4;
    padding-right: 0;
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   INFO / SIMPLE PAGES (information, contact, sitemap)
   ========================================================================== */

.shopit-info-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 0 48px;
}

.shopit-info-page__header {
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 28px;
  padding-bottom: 16px;
}

.shopit-info-page__title {
  font-size: var(--font-size-h1, 28px);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.shopit-info-page__body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}

.shopit-info-page__content h2,
.shopit-info-page__content h3 { font-weight: 700; margin: 24px 0 10px; color: var(--color-text); }
.shopit-info-page__content p  { margin-bottom: 14px; }
.shopit-info-page__content a  { color: var(--color-secondary); text-decoration: none; }
.shopit-info-page__content a:hover { text-decoration: underline; }
.shopit-info-page__content img { max-width: 100%; border-radius: var(--border-radius-md); }

.shopit-info-page__section { margin-top: 40px; }
.shopit-info-page__section h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }

/* Contact page layout */
.shopit-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 767px) {
  .shopit-contact-grid { grid-template-columns: 1fr; gap: 28px; }
}

.shopit-contact-info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 28px;
}
.shopit-contact-info__img img {
  width: 100%;
  border-radius: var(--border-radius-md);
  margin-bottom: 16px;
}
.shopit-contact-info__name {
  font-size: 17px;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
  color: var(--color-text);
}
.shopit-contact-info p {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--color-text-muted);
}

.shopit-contact-form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 28px;
}
.shopit-contact-form-wrap__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--color-text);
}
.shopit-contact-form { display: flex; flex-direction: column; gap: 16px; }

.shopit-form-group { display: flex; flex-direction: column; gap: 6px; }
.shopit-form-group label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.shopit-form-group--error .shopit-input { border-color: var(--color-secondary); }
.shopit-form-error { font-size: 12px; color: var(--color-secondary); }

/* Location cards grid */
.shopit-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.shopit-location-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.shopit-location-card strong { display: block; font-weight: 700; margin-bottom: 8px; }
.shopit-location-card p { margin-bottom: 4px; color: var(--color-text-muted); }
.shopit-location-card__img { width: 100%; border-radius: var(--border-radius-sm); margin-bottom: 12px; }

/* Sitemap */
.shopit-sitemap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 600px) { .shopit-sitemap-grid { grid-template-columns: 1fr; } }
.shopit-sitemap-grid h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--color-text); }
.shopit-sitemap-list { list-style: none; padding: 0; margin: 0; }
.shopit-sitemap-list li { padding: 4px 0; font-size: 14px; }
.shopit-sitemap-list ul { padding-left: 16px; margin-top: 4px; }
.shopit-sitemap-list a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast); }
.shopit-sitemap-list a:hover { color: var(--color-secondary); }

/* ===== Phone Ajax Panel (Dropdown) ===== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.shopit-phone-ajax-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-header-text);
  font-size: 14px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}

.shopit-phone-ajax-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.shopit-phone-ajax-btn.open .shopit-phone-btn__chevron {
  transform: rotate(180deg);
}

.shopit-phone-btn__chevron {
  transition: transform var(--transition-fast);
}

.shopit-phone-ajax-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  background: var(--color-surface);
  border-radius: var(--border-radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-border);
  z-index: 650;
  padding: 0;
  animation: shopitPhoneIn 0.18s ease;
  max-width: calc(100vw - 32px);
}

.shopit-phone-ajax-panel.hidden {
  display: none !important;
}

@keyframes shopitPhoneIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shopit-phone-ajax-content {
  padding: 14px 16px;
}

.shopit-phone-ajax-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.shopit-phone-ajax-row:last-child {
  border-bottom: none;
}

.shopit-phone-ajax-row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--phone-icon-color, var(--color-secondary));
  margin-top: 2px;
}

.shopit-phone-ajax-row__icon svg {
  width: 100%;
  height: 100%;
}

.shopit-phone-ajax-row__content {
  flex: 1;
  min-width: 0;
}

.shopit-phone-ajax-row__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  display: block;
}

.shopit-phone-ajax-row__value {
  color: var(--color-text);
  word-break: break-word;
}

.shopit-phone-ajax-row__value a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.shopit-phone-ajax-row__value a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.shopit-phone-ajax-row__working-hours {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .shopit-phone-ajax-btn {
    font-size: 13px;
    padding: 4px 8px;
  }
  
  .shopit-phone-ajax-panel {
    min-width: 250px;
    right: 0;
    left: auto;
  }
}

@media (max-width: 576px) {
  .shopit-phone-ajax-panel {
    min-width: 240px;
  }
  
  .shopit-phone-ajax-row__label {
    font-size: 10px;
  }
}