/* ============================================================
   GAPER THEME - OpenCart 4 CSS
   A premium, Journal-inspired theme built on Bootstrap 5
   Uses CSS Custom Properties for full admin customization
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {
  /* Brand Colors */
  --gaper-primary: #2563eb;
  --gaper-primary-rgb: 37, 99, 235;
  --gaper-secondary: #1e40af;
  --gaper-accent: #f59e0b;

  /* Text & Background */
  --gaper-text: #1f2937;
  --gaper-text-light: #374151;
  --gaper-muted: #6b7280;
  --gaper-bg: #f3f4f6;
  --gaper-surface: #ffffff;
  --gaper-border: #e5e7eb;
  --gaper-border-light: #f0f0f0;

  /* Status Colors */
  --gaper-success: #10b981;
  --gaper-danger: #ef4444;
  --gaper-warning: #f59e0b;
  --gaper-info: #3b82f6;

  /* Typography */
  --gaper-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gaper-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gaper-font-size: 15px;
  --gaper-line-height: 1.6;

  /* Borders & Radius */
  --gaper-radius: 8px;
  --gaper-radius-sm: 4px;
  --gaper-radius-lg: 12px;
  --gaper-btn-radius: 6px;

  /* Layout */
  --gaper-container: 1320px;

  /* Top Bar */
  --gaper-topbar-bg: #1e293b;
  --gaper-topbar-text: #cbd5e1;
  --gaper-topbar-link: #94a3b8;

  /* Header */
  --gaper-header-bg: #ffffff;

  /* Navigation */
  --gaper-nav-bg: var(--gaper-primary);
  --gaper-nav-hover: rgba(255, 255, 255, 0.15);

  /* Footer */
  --gaper-footer-bg: #111827;
  --gaper-footer-text: #9ca3af;
  --gaper-footer-heading: #f9fafb;
  --gaper-footer-link: #d1d5db;
  --gaper-footer-border: rgba(255, 255, 255, 0.08);

  /* Newsletter */
  --gaper-newsletter-bg: #1e40af;

  /* Shadows */
  --gaper-shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --gaper-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --gaper-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .05);
  --gaper-shadow-lg: 0 10px 25px rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .04);
  --gaper-shadow-xl: 0 20px 40px rgba(0, 0, 0, .12);

  /* Transitions */
  --gaper-transition: 0.25s ease;
  --gaper-transition-slow: 0.35s ease;
}

/* ------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--gaper-font-body);
  font-size: var(--gaper-font-size);
  line-height: var(--gaper-line-height);
  color: var(--gaper-text);
  background-color: var(--gaper-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Override OC4 default absolute positioning layout.
   OC4 uses #container{position:absolute} + footer{position:absolute;bottom:-1px}
   which conflicts with Gaper's normal-flow layout. */
#container {
  position: static;
  min-height: auto;
  margin-bottom: 0;
}

#content, #column-left, #column-right {
  padding-bottom: 0;
}

/* Home Layout Builder: subtle visual separation for multi-column rows */
@media (min-width: 768px) {
  .gaper-home-row--multi {
    --bs-gutter-x: 1.5rem;
  }
  .gaper-home-row--multi > .gaper-home-col {
    position: relative;
  }
  .gaper-home-row--multi > .gaper-home-col + .gaper-home-col::before {
    content: "";
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, .14), transparent);
    pointer-events: none;
  }
  .gaper-dark .gaper-home-row--multi > .gaper-home-col + .gaper-home-col::before {
    background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, .38), transparent);
  }
}

footer {
  position: static;
  bottom: auto;
  border: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--gaper-font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--gaper-text);
  margin-bottom: 0.5rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

a {
  color: var(--gaper-primary);
  text-decoration: none;
  transition: color var(--gaper-transition);
}

a:hover {
  color: var(--gaper-secondary);
}

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

.container {
  max-width: var(--gaper-container);
}

hr {
  border-color: var(--gaper-border);
  opacity: 0.5;
}

::selection {
  background: var(--gaper-primary);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--gaper-primary);
  outline-offset: 2px;
}

/* Alert container */
#alert .alert {
  border-radius: var(--gaper-radius);
  border: none;
  margin: 0.5rem 1rem;
}

/* ------------------------------------------------------------
   3. TOP BAR  (nav#top.gaper-topbar)
   Z-INDEX: 1030 — highest in header stack so dropdowns
   (currency, language, account) appear ABOVE the header below.
   ------------------------------------------------------------ */
#top,
#top.gaper-topbar,
.gaper-topbar {
  background: var(--gaper-topbar-bg);
  color: var(--gaper-topbar-text);
  font-size: 12px;
  height: 36px;
  line-height: 36px;
  padding: 0;
  position: relative;
  z-index: 1040;
}
#top {
  margin-bottom: 0px !important;
  border-bottom: 1px solid var(--gaper-border);
}

.gaper-topbar .container {
  height: 36px;
}

.gaper-topbar .row {
  height: 36px;
}

.gaper-topbar a {
  color: var(--gaper-topbar-text);
  font-size: 12px;
  transition: color var(--gaper-transition);
}

.gaper-topbar a:hover {
  color: #ffffff;
}

.gaper-topbar .list-inline a,
.gaper-topbar .list-inline .btn-link {
  color: var(--gaper-topbar-link);
}
.gaper-topbar .list-inline a:hover,
.gaper-topbar .list-inline .btn-link:hover {
  color: #ffffff;
}

.gaper-topbar .list-inline {
  margin: 0;
  line-height: 36px;
}

.gaper-topbar .list-inline-item {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 0.75rem;
  line-height: 36px;
}

.gaper-topbar .list-inline-item:last-child {
  border-right: none;
  padding-right: 0;
}

.gaper-topbar .list-inline-item i {
  font-size: 11px;
  opacity: 0.7;
}

/* Account dropdown in top bar */
.gaper-topbar .dropdown {
  display: inline-block;
}

.gaper-topbar .dropdown-toggle {
  cursor: pointer;
}

.gaper-topbar .dropdown-toggle::after {
  display: none;
}

.gaper-topbar .fa-caret-down {
  font-size: 9px;
  opacity: 0.6;
  margin-left: 2px;
}

/* Top bar dropdown menus — z-index MUST be above header */
#top .dropdown-menu,
.gaper-topbar .dropdown-menu {
  background: var(--gaper-surface);
  border: 1px solid var(--gaper-border);
  border-radius: var(--gaper-radius);
  box-shadow: var(--gaper-shadow-lg);
  font-size: 0.8125rem;
  min-width: 170px;
  padding: 0.4rem 0;
  z-index: 1041;
  margin-top: 0;
  margin-left: -12px;    
}

.gaper-topbar .dropdown-menu .dropdown-item {
  color: var(--gaper-text);
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  transition: all var(--gaper-transition);
}

.gaper-topbar .dropdown-menu .dropdown-item:hover {
  background: var(--gaper-bg);
  color: var(--gaper-primary);
}

/* Hover dropdowns — mobile: click-toggle, positioned correctly */
@media (max-width: 991.98px) {
  .gaper-topbar .gaper-hover-dropdown,
  .gaper-topbar .btn-group,
  .gaper-topbar .dropdown {
    position: relative;
  }

  .gaper-topbar .gaper-hover-dropdown > .dropdown-menu,
  .gaper-topbar .btn-group > .dropdown-menu,
  .gaper-topbar .dropdown > .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    min-width: 160px;
    max-width: calc(100vw - 20px);
    margin-top: 0 !important;
    z-index: 1050;
    display: none;
    text-align: left;
  }

  /* My Account dropdown (right side) — align to right edge */
  .gaper-topbar .gaper-hover-dropdown > .dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
  }

  .gaper-topbar .gaper-hover-dropdown > .dropdown-menu.show,
  .gaper-topbar .btn-group > .dropdown-menu.show,
  .gaper-topbar .dropdown > .dropdown-menu.show {
    display: block !important;
  }

  /* Ensure dropdown items are left-aligned */
  .gaper-topbar .dropdown-menu .dropdown-item {
    text-align: left !important;
    justify-content: flex-start !important;
    padding: 0.4rem 1rem;
  }
}

/* Hover dropdowns — desktop: open on hover, positioned flush at topbar bottom edge */
@media (min-width: 992px) {
  .gaper-topbar .gaper-hover-dropdown,
  .gaper-topbar .btn-group,
  .gaper-topbar .dropdown {
    position: relative;
  }

  .gaper-topbar .gaper-hover-dropdown > .dropdown-menu,
  .gaper-topbar .btn-group > .dropdown-menu,
  .gaper-topbar .dropdown > .dropdown-menu {
    /* JS sets --dd-top to align dropdown flush with topbar bottom edge */
    top: var(--dd-top, 100%) !important;
    left: 0;
    margin-top: 0 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    opacity: 0;
    visibility: hidden;
    display: block !important;
    transform: translateY(4px);
    pointer-events: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    z-index: 1050;
  }

  /* For dropdown-menu-end, anchor to right side */
  .gaper-topbar .gaper-hover-dropdown > .dropdown-menu-end,
  .gaper-topbar .dropdown > .dropdown-menu-end {
    left: auto;
    right: 0;
  }

  .gaper-topbar .gaper-hover-dropdown:hover > .dropdown-menu,
  .gaper-topbar .btn-group:hover > .dropdown-menu,
  .gaper-topbar .dropdown:hover > .dropdown-menu,
  .gaper-topbar .gaper-hover-dropdown > .dropdown-menu.show,
  .gaper-topbar .btn-group > .dropdown-menu.show,
  .gaper-topbar .dropdown > .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* OC4 currency & language selectors in topbar */
.gaper-topbar .btn-group > .btn,
.gaper-topbar .btn-link,
.gaper-topbar .dropdown > a.dropdown-toggle,
.gaper-topbar .dropdown > span.dropdown-toggle,
.gaper-topbar .dropdown > .dropdown-toggle[role="button"] {
  color: var(--gaper-topbar-text);
  font-size: 12px;
  padding: 0;
  text-decoration: none;
  border: none;
  background: none;
  line-height: 36px;
  box-shadow: none;
  cursor: pointer;
}

.gaper-topbar .btn-group > .btn:hover,
.gaper-topbar .btn-link:hover,
.gaper-topbar .dropdown > a.dropdown-toggle:hover,
.gaper-topbar .dropdown > span.dropdown-toggle:hover,
.gaper-topbar .dropdown > .dropdown-toggle[role="button"]:hover {
  color: #ffffff;
}

.gaper-topbar .btn-group > .btn:focus,
.gaper-topbar .btn-link:focus,
.gaper-topbar .dropdown > a.dropdown-toggle:focus,
.gaper-topbar .dropdown > span.dropdown-toggle:focus,
.gaper-topbar .dropdown > .dropdown-toggle[role="button"]:focus {
  box-shadow: none;
}

.gaper-topbar .btn-group .dropdown-menu,
.gaper-topbar .dropdown .dropdown-menu {
  z-index: 1041;
}

/* Topbar flexbox layout */
.gaper-topbar__left,
.gaper-topbar__right {
  white-space: nowrap;
  flex-shrink: 0;
}

.gaper-topbar__left a,
.gaper-topbar__right a {
  color: var(--gaper-topbar-link, var(--gaper-topbar-text));
  font-size: 12px;
  text-decoration: none;
  transition: color var(--gaper-transition);
}

.gaper-topbar__left a:hover,
.gaper-topbar__right a:hover {
  color: var(--gaper-accent, #ffffff);
}

/* Touch-friendly icon spacing on mobile */
@media (max-width: 991.98px) {
  .gaper-topbar__right a,
  .gaper-topbar__right .dropdown > a,
  .gaper-topbar__right .gaper-hover-dropdown > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    font-size: 14px;
  }
}

.gaper-topbar__divider {
  opacity: 0.3;
  font-size: 10px;
}

.gaper-topbar__center {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ------------------------------------------------------------
   4. HEADER  (header.gaper-header)
   Z-INDEX: 1020 — below topbar, above navigation.
   ------------------------------------------------------------ */
header.gaper-header,
.gaper-header {
  background: var(--gaper-header-bg);
  padding: 20px 0px 20px 0px;
  position: relative;
  z-index: 1020;
  box-shadow: none;
}

/* Sticky header — Flatsome-style: single header, no clone.
   Normal: scrolls with page. Once out of viewport: becomes fixed + compact. */
header.gaper-header.gaper-header--sticky-enabled,
.gaper-header.gaper-header--sticky-enabled {
  position: relative;
  z-index: 1030;
  background: var(--gaper-header-bg);
  transition: padding 0.35s cubic-bezier(.4,0,.2,1),
              box-shadow 0.3s ease;
}

/* When header becomes fixed (out of viewport) */
header.gaper-header.gaper-header--fixed,
.gaper-header.gaper-header--fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  will-change: transform;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1),
              padding 0.35s cubic-bezier(.4,0,.2,1),
              box-shadow 0.3s ease;
}

/* Compact scrolled state — slide into view */
header.gaper-header.gaper-header--scrolled,
.gaper-header.gaper-header--scrolled {
  transform: translateY(0);
  padding: 8px 0 !important;
  box-shadow: var(--gaper-shadow-md);
}

/* Placeholder keeps page content from jumping when header becomes fixed */
.gaper-header-placeholder {
  display: none;
}

/* Mobile sticky: snap to top without slide animation */
@media (max-width: 991.98px) {
  .gaper-header.gaper-header--mobile-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 1030;
    background: var(--gaper-header-bg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0 !important;
  }

  .gaper-header--mobile-fixed .gaper-mobile-header {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Hide desktop elements in mobile sticky */
  .gaper-header--mobile-fixed .d-none.d-lg-block {
    display: none !important;
  }
}

/* ── Compact mode: shrink logo ── */
.gaper-header--scrolled #logo img {
  max-height: 36px !important;
  width: auto;
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
}

/* Compact search inputs */
.gaper-header--scrolled #search .form-control {
  height: 34px;
  font-size: 0.8125rem;
}
.gaper-header--scrolled #search .btn {
  height: 34px;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
}

/* ── Style2 Centered: Collapse two rows into single-row grid when scrolled ── */
.gaper-header--scrolled .gaper-hc {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.gaper-header--scrolled .gaper-hc__row-logo {
  display: contents;
}

.gaper-header--scrolled .gaper-hc__row-logo > * {
  grid-column: 2;
  padding: 0 !important;
  text-align: center;
}

.gaper-header--scrolled .gaper-hc__row-logo #logo img {
  max-height: 32px !important;
}

.gaper-header--scrolled .gaper-hc__row-controls {
  display: contents;
}

.gaper-header--scrolled .gaper-hc__search {
  grid-column: 1;
  grid-row: 1;
  max-width: 280px;
  padding: 0 !important;
}

.gaper-header--scrolled .gaper-hc__cart {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  padding: 0 !important;
}

/* Mobile scrolled compact */
@media (max-width: 767.98px) {
  .gaper-header--scrolled .gaper-hc {
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
  }
  .gaper-header--scrolled .gaper-hc__search {
    max-width: 160px;
  }
}

/* Cart dropdown inside header — must be above nav bar */
header .dropdown-menu,
header.gaper-header .dropdown-menu,
#cart .dropdown-menu {
  z-index: 1025;
}

/* Logo */
#logo {
  text-align: left;
}

#logo img {
  max-height: 50px;
  width: auto;
  transition: opacity var(--gaper-transition);
}

#logo img:hover {
  opacity: 0.85;
}

#logo h1 {
  margin: 0;
  font-size: 1.5rem;
}

#logo h1 a {
  color: var(--gaper-text);
  font-weight: 700;
  letter-spacing: -0.5px;
}

#logo h1 a:hover {
  color: var(--gaper-primary);
}

/* Search form — OC4 renders {{ search }} as #search with .input-group */
#search {
  max-width: 100%;
}

#search .input-group {
  border: 2px solid var(--gaper-border);
  border-radius: 50px;
  overflow: hidden;
  transition: border-color var(--gaper-transition), box-shadow var(--gaper-transition);
  background: var(--gaper-surface);
}

#search .input-group:focus-within {
  border-color: var(--gaper-primary);
  box-shadow: 0 0 0 3px rgba(var(--gaper-primary-rgb), 0.1);
}

#search .form-control {
  border: none;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  background: transparent;
  box-shadow: none;
  height: auto;
}

#search .form-control:focus {
  box-shadow: none;
  outline: none;
}

#search .form-control::placeholder {
  color: var(--gaper-muted);
  font-size: 0.875rem;
}

#search .input-group .btn {
  border: none;
  background: var(--gaper-primary);
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  transition: background var(--gaper-transition);
  border-radius: 0 50px 50px 0 !important;
  font-size: 0.9375rem;
}

#search .input-group .btn:hover {
  background: var(--gaper-secondary);
}

/* Compact search — icon toggle with expandable search bar */
.gaper-search-compact {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.gaper-search-toggle {
  width: 42px;
  height: 42px;
  border: 2px solid var(--gaper-border);
  border-radius: 50%;
  background: var(--gaper-surface);
  color: var(--gaper-text);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.gaper-search-toggle:hover {
  border-color: var(--gaper-primary);
  color: var(--gaper-primary);
}

.gaper-search-bar {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  width: 320px;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

.gaper-search-bar--open {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
  visibility: visible;
}

/* Hide toggle icon when search bar is open */
.gaper-search-bar--open + .gaper-search-toggle,
.gaper-search-compact:has(.gaper-search-bar--open) .gaper-search-toggle {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .gaper-search-bar {
    width: 240px;
  }
}

/* Cart mini-cart (#cart .gaper-minicart) */
#cart {
  text-align: right;
  margin-bottom: 0 !important;
}

.gaper-minicart {
  display: inline-block;
}

.gaper-minicart__btn {
  background: var(--gaper-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 50px;
  padding: 0.55rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all var(--gaper-transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.3);
}

.gaper-minicart__btn:hover,
.gaper-minicart__btn:focus {
  background: var(--gaper-secondary);
  box-shadow: 0 4px 14px rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.4);
  transform: translateY(-1px);
}

.gaper-minicart__btn::after {
  display: none;
}

.gaper-minicart__icon-wrap {
  position: relative;
  font-size: 1.1rem;
  line-height: 1;
}

.gaper-minicart__badge {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--gaper-danger);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Badge only visible on mobile — desktop mini-cart shows item count in text */
@media (min-width: 992px) {
  .gaper-minicart__badge {
    display: none;
  }
}

.gaper-minicart__dropdown {
  min-width: 380px;
  max-width: 420px;
  border: none !important;
  border-radius: var(--gaper-radius-lg) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08) !important;
  padding: 0 !important;
  overflow: hidden;
  animation: gaperDropIn 0.15s ease-in-out;
}

.gaper-minicart__header {
  background: linear-gradient(135deg, var(--gaper-primary), var(--gaper-secondary));
  color: #fff;
  padding: 0.875rem 1.25rem;
}

.gaper-minicart__title {
  font-weight: 600;
  font-size: 0.875rem;
}

.gaper-minicart__items {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.gaper-minicart__items::-webkit-scrollbar {
  width: 4px;
}
.gaper-minicart__items::-webkit-scrollbar-thumb {
  background: var(--gaper-border);
  border-radius: 4px;
}

.gaper-minicart__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  transition: background 0.15s ease;
  position: relative;
}

.gaper-minicart__item:hover {
  background: var(--gaper-bg);
}

.gaper-minicart__item + .gaper-minicart__item {
  border-top: 1px solid var(--gaper-border-light);
}

.gaper-minicart__item-img {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--gaper-radius);
  overflow: hidden;
  background: var(--gaper-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gaper-minicart__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gaper-minicart__item-info {
  flex: 1;
  min-width: 0;
}

.gaper-minicart__item-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gaper-text);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gaper-minicart__item-name:hover {
  color: var(--gaper-primary);
}

.gaper-minicart__item-options {
  margin-bottom: 0.2rem;
}

.gaper-minicart__item-options small {
  display: block;
  color: var(--gaper-muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.gaper-minicart__item-price {
  font-size: 0.8125rem;
}

.gaper-minicart__qty {
  color: var(--gaper-muted);
}

.gaper-minicart__total {
  font-weight: 700;
  color: var(--gaper-primary);
}

.gaper-minicart__remove {
  flex-shrink: 0;
}

.gaper-minicart__remove-btn {
  background: none;
  border: none;
  color: var(--gaper-muted);
  font-size: 0.75rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gaper-minicart__remove-btn:hover {
  background: rgba(239,68,68,0.1);
  color: var(--gaper-danger);
}

.gaper-minicart__totals {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--gaper-border);
  background: var(--gaper-bg);
}

.gaper-minicart__totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  padding: 0.2rem 0;
  color: var(--gaper-muted);
}

.gaper-minicart__totals-row--grand {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--gaper-text);
  padding-top: 0.4rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--gaper-border);
}

.gaper-minicart__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--gaper-border);
}

.gaper-minicart__btn-cart {
  background: var(--gaper-surface) !important;
  color: var(--gaper-text) !important;
  border: 1px solid var(--gaper-border) !important;
  border-radius: var(--gaper-btn-radius) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: all var(--gaper-transition);
}

.gaper-minicart__btn-cart:hover {
  border-color: var(--gaper-primary) !important;
  color: var(--gaper-primary) !important;
}

.gaper-minicart__btn-checkout {
  background: var(--gaper-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--gaper-btn-radius) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: all var(--gaper-transition);
}

.gaper-minicart__btn-checkout:hover {
  background: var(--gaper-secondary) !important;
  box-shadow: 0 4px 12px rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.3);
}

.gaper-minicart__empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--gaper-muted);
}

.gaper-minicart__empty i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
  opacity: 0.3;
}

.gaper-minicart__empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Legacy OC4 cart overrides */
#cart > .btn-group > .btn,
#cart .btn-lg {
  background: var(--gaper-primary);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 0.55rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.3);
}

#cart > .btn-group > .btn:hover,
#cart .btn-lg:hover {
  background: var(--gaper-secondary);
}

#cart .dropdown-menu {
  min-width: 380px;
  border: none;
  border-radius: var(--gaper-radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
  padding: 1.25rem;
  right: 0;
  left: auto;
}

#cart .dropdown-menu table img {
  width: 50px;
  border-radius: var(--gaper-radius);
}

/* ------------------------------------------------------------
   5. NAVIGATION  (nav#menu.gaper-nav)
   Z-INDEX: 1010 — lowest in header stack.
   ------------------------------------------------------------ */
nav#menu.gaper-nav,
.gaper-nav {
  background: var(--gaper-nav-bg);
  padding: 0;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  position: relative;
  z-index: 1010;
}

/* Add spacing below nav only on homepage (no breadcrumb) */
main:has(#common-home) .gaper-nav {
  margin-bottom: 30px;
}

/* Show navbar-collapse on desktop (Bootstrap collapse hides by default) */
@media (min-width: 992px) {
  #menu .navbar-collapse,
  .gaper-nav .navbar-collapse {
    display: flex !important;
  }
}

#menu .gaper-nav__inner,
.gaper-nav__inner {
  display: flex;
  align-items: center;
}

#menu .gaper-nav__list,
.gaper-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#menu .gaper-nav__item,
.gaper-nav__item {
  position: relative;
}

#menu .gaper-nav__link,
.gaper-nav__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.85rem 1.15rem;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
  transition: background var(--gaper-transition);
}

#menu .gaper-nav__link:hover,
#menu .gaper-nav__link:focus,
.gaper-nav__link:hover,
.gaper-nav__link:focus {
  background: var(--gaper-nav-hover);
  color: #ffffff;
}

.gaper-nav__arrow {
  font-size: 0.6rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.gaper-nav__item--has-children:hover .gaper-nav__arrow {
  transform: rotate(180deg);
}

/* Category label (mobile only) */
#menu #category,
.gaper-nav__label {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.8rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Navbar toggler (hamburger on mobile) */
#menu .navbar-toggler,
.gaper-nav .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 0.4rem 0.7rem;
  font-size: 1.125rem;
  margin-left: auto;
  transition: background var(--gaper-transition);
}

#menu .navbar-toggler:hover,
.gaper-nav .navbar-toggler:hover {
  background: rgba(255, 255, 255, 0.1);
}

#menu .navbar-toggler:focus,
.gaper-nav .navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Mega menu dropdown panels */
#menu .gaper-nav__mega,
.gaper-nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--gaper-surface);
  border: none;
  border-radius: 0 0 var(--gaper-radius-lg) var(--gaper-radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  margin-top: 0;
  border-top: 3px solid var(--gaper-primary);
  animation: gaperDropIn 0.2s ease-out;
  z-index: 1050;
  display: none;
}

#menu .gaper-nav__item--has-children:hover > .gaper-nav__mega,
.gaper-nav__item--has-children:hover > .gaper-nav__mega,
#menu .gaper-nav__mega.show,
.gaper-nav__mega.show {
  display: block;
}

/* Right-align mega menu for items near the right edge */
#menu .gaper-nav__item:nth-last-child(-n+2) > .gaper-nav__mega,
.gaper-nav__item:nth-last-child(-n+2) > .gaper-nav__mega {
  left: auto;
  right: 0;
}

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

.gaper-nav__mega-grid {
  display: flex;
  gap: 1rem;
}

.dropdown-column-1 .gaper-nav__mega-grid { min-width: 200px; }
.dropdown-column-2 .gaper-nav__mega-grid { min-width: 420px; }
.dropdown-column-3 .gaper-nav__mega-grid { min-width: 620px; }
.dropdown-column-4 .gaper-nav__mega-grid { min-width: 820px; }

.gaper-nav__mega-col {
  flex: 1;
}

.gaper-nav__mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu .gaper-nav__mega-col ul li a,
.gaper-nav__mega-col ul li a {
  display: block;
  color: var(--gaper-text-light);
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 0.4rem 0.75rem;
  border-radius: var(--gaper-radius-sm);
  transition: all var(--gaper-transition);
  line-height: 1.5;
  text-decoration: none;
}

#menu .gaper-nav__mega-col ul li a:hover,
.gaper-nav__mega-col ul li a:hover {
  background: var(--gaper-bg);
  color: var(--gaper-primary);
  padding-left: 1rem;
}

.gaper-nav__mega-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gaper-border);
}

.gaper-nav__mega-footer a {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gaper-primary);
  text-decoration: none;
  transition: color var(--gaper-transition);
}

.gaper-nav__mega-footer a:hover {
  color: var(--gaper-secondary);
}

/* ------------------------------------------------------------
   6. BREADCRUMB — Full-width centered bar (Journal style)
   Override OC4 default stylesheet.css breadcrumb completely
   ------------------------------------------------------------ */
.breadcrumb {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 !important;
  margin: 0 -15px 1.25rem -15px !important;
  font-size: 0.8125rem;
  justify-content: center;
  list-style: none;
  z-index: 0;
}

/* Breadcrumb background — extends full width to match navbar.
   calc() compensates for container padding so bg goes edge-to-edge. */
.breadcrumb::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Stretch beyond container padding to viewport edges */
  left: calc(-1 * ((100vw - 100%) / 2));
  width: 100vw;
  background: #f5f5f5;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  z-index: -1;
}

/* Kill OC4 default arrow chevrons and padding */
.breadcrumb > li.breadcrumb-item,
.breadcrumb-item {
  padding: 0 !important;
  position: static !important;
  text-shadow: none !important;
  white-space: normal !important;
  font-size: 0.8125rem !important;
}

/* Kill OC4 default :after chevron pseudo-element */
.breadcrumb > li.breadcrumb-item:after,
.breadcrumb > li.breadcrumb-item::after,
.breadcrumb-item:after,
.breadcrumb-item::after {
  content: none !important;
  display: none !important;
}

/* Separator: / */
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.25rem !important;
}

.breadcrumb > li.breadcrumb-item + li::before,
.breadcrumb > li.breadcrumb-item + li:before,
.breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  color: #999 !important;
  font-size: 0.75rem;
  padding: 0 0.5rem !important;
  display: inline !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  transform: none !important;
  float: none !important;
}

.breadcrumb-item a,
.breadcrumb > li.breadcrumb-item > a {
  color: #666 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.breadcrumb-item a:hover,
.breadcrumb > li.breadcrumb-item > a:hover {
  color: var(--gaper-primary) !important;
}

.breadcrumb-item.active,
.breadcrumb-item:last-child,
.breadcrumb > li.breadcrumb-item:last-child,
.breadcrumb > li.breadcrumb-item:last-child > a {
  color: #666 !important;
}

/* ------------------------------------------------------------
   7a. DEFAULT OC4 PRODUCT CARD OVERRIDE (.product-thumb)
   Forces vertical layout: image on top, text below.
   Applies when the default OC4 template is rendered.
   ------------------------------------------------------------ */
.product-thumb {
  background: var(--gaper-surface);
  border: 1px solid var(--gaper-border);
  border-radius: var(--gaper-radius);
  overflow: hidden;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow var(--gaper-transition), transform var(--gaper-transition);
}

.product-thumb:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
  border-color: transparent;
}

.product-thumb .image {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  overflow: hidden;
  background: #fafafa;
}

.product-thumb .image a {
  display: block;
  width: 100%;
  height: 100%;
}

.product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.product-thumb:hover .image img {
  transform: scale(1.05);
}

.product-thumb .content,
.product-thumb .caption {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-thumb .content h4,
.product-thumb .caption h4 {
  font-family: var(--gaper-font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.product-thumb .content h4 a,
.product-thumb .caption h4 a {
  color: var(--gaper-text);
  text-decoration: none;
}

.product-thumb .content h4 a:hover,
.product-thumb .caption h4 a:hover {
  color: var(--gaper-primary);
}

.product-thumb .content p,
.product-thumb .caption p {
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-thumb .price {
  font-weight: 700;
  color: var(--gaper-primary);
  font-size: 1.0625rem;
  margin-top: auto;
}

.product-thumb .price-old {
  text-decoration: line-through;
  color: var(--gaper-muted);
  font-weight: 400;
  font-size: 0.8125rem;
  margin-right: 0.25rem;
}

.product-thumb .price-new {
  color: var(--gaper-danger);
  font-weight: 700;
}

.product-thumb .price .price-tax {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gaper-muted);
}

.product-thumb .button-group {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--gaper-border);
  display: flex;
  gap: 0.25rem;
}

.product-thumb .button-group button {
  flex: 1;
  font-size: 0.75rem;
}

/* List view override for default OC4 cards */
#product-list.row-cols-1 .product-thumb {
  flex-direction: row !important;
}

#product-list.row-cols-1 .product-thumb .image {
  max-width: 250px;
  min-width: 200px;
  aspect-ratio: auto;
}

/* ------------------------------------------------------------
   7b. GAPER PRODUCT CARD  (.gaper-product-card)
   The most important element — Journal-quality design
   ------------------------------------------------------------ */
.gaper-product-card {
  background: var(--gaper-surface);
  border: 1px solid var(--gaper-border);
  border-radius: var(--gaper-radius);
  overflow: hidden;
  transition: box-shadow var(--gaper-transition), transform var(--gaper-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Card hover: lift + shadow for zoom/fade/slide; shadow-only for none */
.gaper-product-card:not([data-hover="none"]):hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
  border-color: transparent;
}
.gaper-product-card[data-hover="none"]:hover {
  box-shadow: var(--gaper-shadow-md);
  border-color: transparent;
}

/* --- Product image --- */
.gaper-product-card__image {
  position: relative;
  overflow: hidden;
  background: #fafafa;
  aspect-ratio: 1 / 1;
}

.gaper-product-card__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.gaper-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.gaper-product-card[data-ratio="1:1"] .gaper-product-card__image { aspect-ratio: 1/1; }
.gaper-product-card[data-ratio="4:3"] .gaper-product-card__image { aspect-ratio: 4/3; }
.gaper-product-card[data-ratio="3:4"] .gaper-product-card__image { aspect-ratio: 3/4; }
.gaper-product-card[data-ratio="16:9"] .gaper-product-card__image { aspect-ratio: 16/9; }
.gaper-product-card__image { overflow: hidden; }
.gaper-product-card__image img { width: 100%; height: 100%; object-fit: cover; }

/* --- Sale / status badges --- */
.gaper-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--gaper-radius-sm);
  z-index: 2;
  letter-spacing: 0.75px;
  line-height: 1.6;
}

.gaper-badge--sale {
  background: var(--gaper-danger);
  color: #ffffff;
}

.gaper-badge--new {
  background: var(--gaper-success);
  color: #ffffff;
}

/* --- Hover action buttons overlay --- */
.gaper-product-card__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 2rem 0.75rem 0.75rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 3;
}

.gaper-product-card__actions form {
  display: flex;
  justify-content: center;
  width: 100%;
}

.gaper-product-card:hover .gaper-product-card__actions {
  transform: translateY(0);
}

.gaper-action-btn {
  background: #ffffff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--gaper-text);
  font-size: 0.875rem;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gaper-action-btn:hover {
  background: var(--gaper-primary);
  color: #ffffff;
  transform: scale(1.1);
}

/* --- Product body --- */
.gaper-product-card__body {
  padding: 1rem 1rem 1.125rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- Product title --- */
.gaper-product-card__title {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gaper-product-card__title a {
  color: var(--gaper-text);
  transition: color var(--gaper-transition);
}

.gaper-product-card__title a:hover {
  color: var(--gaper-primary);
}

/* --- Product description (hidden in grid, shown in list) --- */
.gaper-product-card__description {
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  display: none;
}

/* --- Price --- */
.gaper-product-card__price {
  margin-top: auto;
  margin-bottom: 0.35rem;
  padding-top: 0.35rem;
}

.gaper-price {
  font-weight: 700;
  color: var(--gaper-text);
  font-size: 1.0625rem;
}

.gaper-price--old {
  text-decoration: line-through;
  color: var(--gaper-muted);
  font-weight: 400;
  font-size: 0.8125rem;
  margin-right: 0.35rem;
}

.gaper-price--new {
  color: var(--gaper-danger);
  font-weight: 700;
}

.gaper-price--tax {
  display: block;
  font-size: 0.6875rem;
  color: var(--gaper-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* --- Star rating --- */
.gaper-product-card__rating {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  letter-spacing: 1px;
}

.gaper-product-card__rating .fa-star,
.gaper-product-card__rating .fa-regular {
  margin-right: 1px;
}

.gaper-star--active {
  color: var(--gaper-accent);
}

.gaper-product-card__rating .fa-regular.fa-star {
  color: #d1d5db;
}

.gaper-product-card__brand {
  font-size: 0.75rem;
  color: var(--gaper-muted, #6b7280);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.gaper-product-card__sku {
  font-size: 0.6875rem;
  color: var(--gaper-muted, #6b7280);
  margin-bottom: 0.25rem;
  opacity: 0.75;
}

/* Product share buttons */
.gaper-product__share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gaper-muted, #6b7280);
}

.gaper-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gaper-surface, #f3f4f6);
  color: var(--gaper-text, #1f2937);
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}

.gaper-share-btn:hover { color: #fff; }
.gaper-share-btn--facebook:hover  { background: #1877f2; }
.gaper-share-btn--x:hover         { background: #000000; }
.gaper-share-btn--pinterest:hover  { background: #e60023; }
.gaper-share-btn--whatsapp:hover   { background: #25d366; }
.gaper-share-btn--email:hover      { background: var(--gaper-primary, #4f46e5); }

/* ------------------------------------------------------------
   8. CATEGORY PAGE  (#product-category)
   ------------------------------------------------------------ */
#product-category {
  padding-top: 0;
  padding-bottom: 2rem;
}

.gaper-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-category__info {
  margin-bottom: 1.5rem;
  padding: 1rem 0;
}

.gaper-category__info img {
  border-radius: var(--gaper-radius);
  border-color: var(--gaper-border);
}

.gaper-category__info p {
  color: var(--gaper-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* --- Toolbar (sort / limit / grid-list toggle) --- */
.gaper-toolbar {
  background: var(--gaper-surface);
  border: 1px solid var(--gaper-border);
  border-radius: var(--gaper-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
  box-shadow: var(--gaper-shadow-xs);
}

.gaper-toolbar .btn-group .btn {
  padding: 0.375rem 0.625rem;
  border-radius: var(--gaper-radius-sm);
  border: 1px solid var(--gaper-border);
  color: var(--gaper-muted);
  transition: all var(--gaper-transition);
}

.gaper-toolbar .btn-group .btn.active,
.gaper-toolbar .btn-group .btn:hover {
  background: var(--gaper-primary);
  color: #ffffff;
  border-color: var(--gaper-primary);
}

.gaper-toolbar .input-group {
  margin-bottom: 0 !important;
}

.gaper-toolbar .input-group-text {
  background: var(--gaper-bg);
  border-color: var(--gaper-border);
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  font-weight: 500;
}

.gaper-toolbar .form-select {
  border-color: var(--gaper-border);
  font-size: 0.8125rem;
}

.gaper-toolbar #compare-total {
  font-size: 0.8125rem;
  padding: 0.45rem 1rem;
  border-radius: var(--gaper-btn-radius);
}

/* --- Product list grid --- */
#product-list {
  margin-bottom: 1.5rem;
}

#product-list > .col {
  margin-bottom: 0;
}

/* Products per row — CSS-variable enforcement (overrides Bootstrap row-cols-*)
   --gaper-cat-columns is injected by the startup controller via :root CSS vars.
   Ensures the admin "Products Per Row" setting always takes effect. */
@media (min-width: 992px) {
  #product-list:not(.gaper-view--list) > * {
    flex: 0 0 auto !important;
    width: calc(100% / var(--gaper-cat-columns, 4)) !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #product-list:not(.gaper-view--list) > * {
    flex: 0 0 auto !important;
    width: calc(100% / clamp(2, var(--gaper-cat-columns, 4) - 1, 5)) !important;
  }
}

/* --- Pagination --- */
.gaper-pagination {
  padding-top: 1rem;
  border-top: 1px solid var(--gaper-border);
  align-items: center;
}

.gaper-pagination .pagination {
  margin-bottom: 0;
  gap: 4px;
}

.gaper-pagination .page-link {
  color: var(--gaper-text);
  border: 1px solid var(--gaper-border);
  padding: 0.4rem 0.8rem;
  font-size: 0.8125rem;
  border-radius: 50px !important;
  transition: all var(--gaper-transition);
  min-width: 36px;
  text-align: center;
}

.gaper-pagination .page-link:hover {
  background: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #ffffff;
}

.gaper-pagination .page-item.active .page-link {
  background: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #ffffff;
  font-weight: 600;
}

.gaper-pagination .page-item.disabled .page-link {
  color: var(--gaper-muted);
  background: var(--gaper-bg);
  border-color: var(--gaper-border);
}

.gaper-pagination .text-end {
  font-size: 0.8125rem;
  color: var(--gaper-muted);
}

/* No results */
.gaper-no-results {
  text-align: center;
  padding: 3rem 1rem;
  background: var(--gaper-surface);
  border-radius: var(--gaper-radius);
  border: 1px dashed var(--gaper-border);
}

.gaper-no-results p {
  color: var(--gaper-muted);
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

/* Refine categories list */
#product-category h3 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

#product-category ul {
  list-style: none;
  padding-left: 0;
}

#product-category ul li {
  padding: 0.25rem 0;
}

#product-category ul li a {
  color: var(--gaper-text-light);
  transition: color var(--gaper-transition), padding-left var(--gaper-transition);
}

#product-category ul li a:hover {
  color: var(--gaper-primary);
  padding-left: 4px;
}

/* ------------------------------------------------------------
   9. PRODUCT PAGE  (#product-info)
   ------------------------------------------------------------ */
#product-info {
  padding-top: 0;
  padding-bottom: 2rem;
}

/* Gallery */
#product-info .image {
  text-align: center;
}

#product-info .image > a > img,
#product-info .magnific-popup > a > img {
  border-radius: var(--gaper-radius);
  border: 1px solid var(--gaper-border);
  max-width: 100%;
  cursor: zoom-in;
  transition: box-shadow var(--gaper-transition);
}

#product-info .image > a > img:hover {
  box-shadow: var(--gaper-shadow-md);
}

/* Thumbnails row */
#product-info .image img.img-thumbnail {
  border-radius: var(--gaper-radius);
  border: 1px solid var(--gaper-border);
  padding: 0.2rem;
  transition: border-color var(--gaper-transition), box-shadow var(--gaper-transition);
  cursor: pointer;
}

#product-info .image img.img-thumbnail:hover {
  border-color: var(--gaper-primary);
  box-shadow: 0 0 0 2px rgba(var(--gaper-primary-rgb), 0.15);
}

/* Gaper Product Gallery (zoom-enabled) */
.gaper-product-gallery .gaper-product-image-main {
  overflow: hidden;
  border-radius: var(--gaper-radius);
  /* border: 1px solid var(--gaper-border); */
  cursor: zoom-in;
  position: relative;
}

.gaper-product-gallery .gaper-product-image-main img {
  width: 100%;
  display: block;
  transition: transform 0.15s ease;
  transform-origin: center center;
}

.gaper-product-gallery .gaper-product-image-main.gaper-zoom-active img {
  transform: scale(2);
}

.gaper-product-gallery .gaper-product-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.gaper-product-gallery .gaper-product-thumbs .gaper-thumb {
  width: 70px;
  height: 70px;
  border-radius: var(--gaper-radius-sm);
  border: 2px solid var(--gaper-border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--gaper-transition);
}

.gaper-product-gallery .gaper-product-thumbs .gaper-thumb:hover,
.gaper-product-gallery .gaper-product-thumbs .gaper-thumb--active {
  border-color: var(--gaper-primary);
}

.gaper-product-gallery .gaper-product-thumbs .gaper-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lightbox */
.gaper-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.gaper-lightbox--open {
  display: flex;
}

.gaper-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.gaper-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gaper-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--gaper-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: gaperLightboxIn 0.25s ease;
}

@keyframes gaperLightboxIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.gaper-lightbox__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  line-height: 1;
  padding: 0 0.5rem;
}

.gaper-lightbox__close:hover { opacity: 1; }

.gaper-lightbox__prev,
.gaper-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  line-height: 1;
}

.gaper-lightbox__prev:hover,
.gaper-lightbox__next:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.25);
}

.gaper-lightbox__prev { left: -60px; }
.gaper-lightbox__next { right: -60px; }

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

/* Product title */
.gaper-product__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Product meta info */
.gaper-product__meta {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gaper-border);
}

.gaper-product__meta li {
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  padding: 0.2rem 0;
}

.gaper-product__meta li a {
  color: var(--gaper-primary);
  font-weight: 500;
}

/* Product rating */
.gaper-product__rating {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gaper-border);
    
}

.gaper-product__rating .fa-stack {
  width: 1.25em;
  height: 1.25em;
  line-height: 1.25em;
}

.gaper-product__rating .fa-solid.fa-star {
  color: var(--gaper-accent);
}

.gaper-product__rating .fa-regular.fa-star {
  color: #d1d5db;
}

.gaper-product__rating a {
  font-size: 0.8125rem;
  margin-left: 0.5rem;
}

/* Product price block */
.gaper-product__price-block {
  margin-bottom: 1.25rem;
}

.gaper-product__price-block li {
  padding: 0.15rem 0;
}

.gaper-product__price-block .price-new {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--gaper-primary);
}

.gaper-product__price-block .price-old {
  text-decoration: line-through;
  color: var(--gaper-muted);
  font-size: 1rem;
}

.gaper-product__price-block h2 {
  margin: 0;
}

/* Product options */
#product .mb-3 {
  margin-bottom: 1rem !important;
}

#product .form-label {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Quantity & Add to cart */
.gaper-qty-cart-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.gaper-qty-control {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--gaper-border, #dee2e6);
  border-radius: var(--gaper-btn-radius, 6px);
  overflow: hidden;
  flex-shrink: 0;
}

.gaper-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 42px;
  border: none;
  background: var(--gaper-surface, #f8f9fa);
  color: var(--gaper-text, #333);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gaper-qty-btn:hover {
  background: var(--gaper-primary);
  color: #111;
}

.gaper-qty-input {
  width: 48px;
  height: 42px;
  border: none;
  border-left: 1px solid var(--gaper-border, #dee2e6);
  border-right: 1px solid var(--gaper-border, #dee2e6);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  background: var(--gaper-surface, #fff);
  color: var(--gaper-text, #333);
  -moz-appearance: textfield;
}

.gaper-qty-input::-webkit-outer-spin-button,
.gaper-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gaper-btn-cart {
  flex: 1;
  min-width: 180px;
  height: 42px;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--gaper-btn-radius, 6px) !important;
}

#product-info #input-quantity {
  text-align: center;
  max-width: 80px;
  font-weight: 600;
}

#product-info #button-cart {
  background: var(--gaper-primary);
  border-color: var(--gaper-primary);
  font-weight: 600;
  letter-spacing: 0.25px;
  padding: 0.6rem 1.5rem;
  transition: all var(--gaper-transition);
  text-transform: uppercase;
  font-size: 0.875rem;
}

#product-info #button-cart:hover {
  background: var(--gaper-secondary);
  border-color: var(--gaper-secondary);
  box-shadow: 0 4px 12px rgba(var(--gaper-primary-rgb), 0.3);
}

/* Wishlist / compare buttons */
#product-info .btn-group > .btn-light {
  border: 1px solid var(--gaper-border);
  color: var(--gaper-muted);
  transition: all var(--gaper-transition);
}

#product-info .btn-group > .btn-light:hover {
  color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  background: rgba(var(--gaper-primary-rgb), 0.05);
}

/* Product tabs */
#product-info .nav-tabs {
  border-bottom: 2px solid var(--gaper-border);
  margin-top: 2rem;
  gap: 0;
}

#product-info .nav-tabs .nav-link {
  color: var(--gaper-muted);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--gaper-transition);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

#product-info .nav-tabs .nav-link:hover {
  color: var(--gaper-primary);
  border-bottom-color: rgba(var(--gaper-primary-rgb), 0.3);
}

#product-info .nav-tabs .nav-link.active {
  color: var(--gaper-primary);
  border-bottom-color: var(--gaper-primary);
  background: none;
}

#product-info .tab-content {
  padding: 1.5rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gaper-text);
}

#product-info .tab-content .table {
  font-size: 0.8125rem;
}

#product-info .tab-content .table td {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}

#product-info .tab-content .table thead td {
  font-weight: 600;
  background: var(--gaper-bg);
}

/* Review form inside tab */
#tab-review .mb-3 {
  margin-bottom: 1rem !important;
}

/* Related products heading */
#product-info h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
}

/* Product main layout */
.gaper-product__main {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   10. HOME PAGE  (#common-home)
   ------------------------------------------------------------ */
#common-home {
  padding-top: 0;
  padding-bottom: 2rem;
}

#common-home #content {
  padding-top: 0;
}

/* OC4 slideshow module */
#common-home .swiper,
/* Override Bootstrap carousel default border */
.carousel {
  border: none;
}

#common-home .carousel:not(.gaper-module .carousel) {
  border-radius: var(--gaper-radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--gaper-shadow-md);
}

#common-home .gaper-module .carousel {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* Module headings */
#common-home h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gaper-border);
  position: relative;
}

/* Product rows on homepage */
#common-home .row > .col {
  margin-bottom: 1rem;
}

/* Banner modules */
#common-home .img-fluid {
  border-radius: var(--gaper-radius);
}

/* ------------------------------------------------------------
   11. CART PAGE  (#checkout-cart)
   ------------------------------------------------------------ */
#checkout-cart {
  padding-top: 0;
  padding-bottom: 2rem;
}

#checkout-cart .table {
  background: var(--gaper-surface);
  border-radius: var(--gaper-radius);
  overflow: hidden;
  box-shadow: var(--gaper-shadow-xs);
}

#checkout-cart .table > thead {
  background: var(--gaper-bg);
}

#checkout-cart .table th {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--gaper-muted);
  text-transform: uppercase;
  letter-spacing: 0.75px;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--gaper-border);
}

#checkout-cart .table td {
  vertical-align: middle;
  padding: 1rem;
  border-color: var(--gaper-border);
}

#checkout-cart .table img {
  border-radius: var(--gaper-radius-sm);
  width: 70px;
}

#checkout-cart .input-group {
  max-width: 150px;
}

#checkout-cart .table td .btn-danger {
  background: var(--gaper-danger);
  border-color: var(--gaper-danger);
}

/* Cart totals */
#checkout-cart tfoot td {
  font-size: 0.9375rem;
}

#checkout-cart tfoot tr:last-child td {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--gaper-primary);
}

/* Coupon, voucher, shipping estimate panels */
#checkout-cart .accordion-button {
  font-weight: 500;
  font-size: 0.875rem;
}

/* ------------------------------------------------------------
   12. ACCOUNT PAGES
   ------------------------------------------------------------ */
#account-login,
#account-register,
#account-account,
#account-edit,
#account-password,
#account-address,
#account-wishlist,
#account-order,
#account-return {
  padding-top: 0;
  padding-bottom: 2rem;
}

/* Login page two-column layout */
#account-login .col-mb-12,
#account-login .col-md-6 {
  margin-bottom: 1.5rem;
}

#account-login .card,
#account-register .card {
  border: 1px solid var(--gaper-border);
  border-radius: var(--gaper-radius);
  box-shadow: var(--gaper-shadow);
  overflow: hidden;
}

#account-login .card-header,
#account-register .card-header {
  background: var(--gaper-bg);
  border-bottom: 1px solid var(--gaper-border);
  font-weight: 600;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
}

#account-login .card-body,
#account-register .card-body {
  padding: 1.25rem;
}

/* Account dashboard */
#account-account .list-group-item {
  border-color: var(--gaper-border);
  padding: 0.75rem 1rem;
  transition: all var(--gaper-transition);
}

#account-account .list-group-item:hover {
  background: var(--gaper-bg);
  padding-left: 1.25rem;
}

#account-account .list-group-item a {
  color: var(--gaper-text);
}

#account-account .list-group-item a:hover {
  color: var(--gaper-primary);
}

/* Order history table */
#account-order .table,
#account-return .table {
  font-size: 0.8125rem;
}

#account-order .table th,
#account-return .table th {
  font-weight: 600;
  background: var(--gaper-bg);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.75px;
}

/* ------------------------------------------------------------
   13. INFORMATION PAGES
   ------------------------------------------------------------ */
#information-information,
#information-contact,
#information-sitemap {
  padding-top: 0;
  padding-bottom: 2rem;
}

#information-information #content,
#information-contact #content {
  font-size: 0.9375rem;
  line-height: 1.8;
}

#information-contact .card {
  border: 1px solid var(--gaper-border);
  border-radius: var(--gaper-radius);
}

/* Contact form */
#information-contact .form-control,
#information-contact .form-select {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------
   14. NEWSLETTER SECTION  (.gaper-newsletter)
   ------------------------------------------------------------ */
.gaper-newsletter {
  background: linear-gradient(135deg, var(--gaper-newsletter-bg), var(--gaper-primary));
  color: #ffffff;
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
  margin-top: -56px;
  margin-bottom: 30px;
}

.gaper-newsletter::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.gaper-newsletter__title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.gaper-newsletter__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.gaper-newsletter .gaper-btn--outline {
  border-color: #ffffff;
  color: #ffffff;
  background: transparent;
  border-radius: 50px;
  padding: 0.6rem 2rem;
  font-weight: 600;
}

.gaper-newsletter .gaper-btn--outline:hover {
  background: #ffffff;
  color: var(--gaper-newsletter-bg);
}

.gaper-newsletter-form {
  display: flex;
  max-width: 500px;
  margin: 1rem auto 0;
  gap: 0.5rem;
}
.gaper-newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--gaper-btn-radius);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.875rem;
}
.gaper-newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,0.6);
}
.gaper-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
}
.gaper-newsletter-form button {
  white-space: nowrap;
}
.gaper-newsletter-msg {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  display: none;
}

/* ------------------------------------------------------------
   15. FOOTER  (footer.gaper-footer)
   ------------------------------------------------------------ */
footer.gaper-footer,
.gaper-footer {
  background: var(--gaper-footer-bg);
  color: var(--gaper-footer-text);
  padding: 3.5rem 0 1.5rem;
}

.gaper-footer__col {
  margin-bottom: 1.5rem;
}

.gaper-footer__heading {
  color: var(--gaper-footer-heading);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 0.75rem;
}

.gaper-footer__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--gaper-primary);
  border-radius: 2px;
}

.gaper-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gaper-footer__links li {
  margin-bottom: 0.6rem;
}

.gaper-footer__links a {
  color: var(--gaper-footer-link);
  font-size: 0.8125rem;
  transition: color var(--gaper-transition), padding-left var(--gaper-transition);
  display: inline-block;
}

.gaper-footer__links a:hover {
  color: #ffffff;
  padding-left: 5px;
}

/* Social icons */
.gaper-footer__social {
  text-align: center;
  padding: 1.5rem 0 1rem;
  border-top: 1px solid var(--gaper-footer-border);
  margin-top: 1rem;
}

.gaper-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gaper-footer-link);
  margin: 0 0.35rem;
  transition: all var(--gaper-transition);
  font-size: 0.875rem;
}

.gaper-social-icons a:hover {
  background: var(--gaper-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Payment icons */
.gaper-footer__payments {
  text-align: center;
  padding: 0.75rem 0;
}

.gaper-payment-icons img {
  height: 24px;
  margin: 0 0.35rem;
  opacity: 0.6;
  transition: opacity var(--gaper-transition);
  filter: grayscale(1);
}

.gaper-payment-icons img:hover {
  opacity: 1;
  filter: grayscale(0);
}

.gaper-payment-icons i {
  font-size: 2rem;
  color: var(--gaper-footer-link);
  margin: 0 0.5rem;
  opacity: 0.6;
  transition: opacity var(--gaper-transition);
}
.gaper-payment-icons i:hover {
  opacity: 1;
}

/* Footer bottom / copyright */
.gaper-footer__bottom {
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gaper-footer-border);
  margin-top: 0.75rem;
}

.gaper-footer__bottom p {
  color: var(--gaper-footer-text);
  font-size: 0.75rem;
  margin: 0;
  letter-spacing: 0.2px;
}

/* ── Cookie Consent Banner ── */
.gaper-cookie-consent {
  position: fixed;
  z-index: 9999;
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.2);
  animation: gaperCookieSlideIn 0.4s ease;
}

.gaper-cookie-consent--bottom {
  left: 0; right: 0; bottom: 0;
}

.gaper-cookie-consent--bottom-left {
  left: 1rem; bottom: 1rem; right: auto;
  max-width: 420px;
  border-radius: var(--gaper-radius, 8px);
}

.gaper-cookie-consent--bottom-right {
  right: 1rem; bottom: 1rem; left: auto;
  max-width: 420px;
  border-radius: var(--gaper-radius, 8px);
}

.gaper-cookie-consent__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.gaper-cookie-consent__text {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.gaper-cookie-consent__btn {
  background: var(--gaper-primary, #2563eb);
  color: #fff;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--gaper-btn-radius, 6px);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.gaper-cookie-consent__buttons {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.gaper-cookie-consent__btn--decline {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}

.gaper-cookie-consent__btn:hover {
  opacity: 0.85;
}

@keyframes gaperCookieSlideIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.gaper-footer__bottom a {
  color: var(--gaper-footer-link);
}

.gaper-footer__bottom a:hover {
  color: #ffffff;
}

/* ------------------------------------------------------------
   16. BACK TO TOP  (.gaper-back-to-top)
   ------------------------------------------------------------ */
.gaper-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gaper-primary);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--gaper-transition);
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(var(--gaper-primary-rgb), 0.3);
}

.gaper-back-to-top.gaper-back-to-top--visible,
.gaper-back-to-top:focus {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gaper-back-to-top:hover {
  background: var(--gaper-secondary);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(var(--gaper-primary-rgb), 0.4);
}

/* ------------------------------------------------------------
   17. BUTTONS  (.gaper-btn + Bootstrap overrides)
   ------------------------------------------------------------ */
.gaper-btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  padding: 0.55rem 1.25rem;
  font-size: 0.875rem;
  border-radius: var(--gaper-btn-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--gaper-transition);
  text-decoration: none;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

.gaper-btn--primary {
  background: var(--gaper-primary);
  color: #ffffff;
  border-color: var(--gaper-primary);
}

.gaper-btn--primary:hover {
  background: var(--gaper-secondary);
  border-color: var(--gaper-secondary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(var(--gaper-primary-rgb), 0.25);
}

.gaper-btn--outline {
  background: transparent;
  color: var(--gaper-primary);
  border-color: var(--gaper-primary);
}

.gaper-btn--outline:hover {
  background: var(--gaper-primary);
  color: #ffffff;
}

.gaper-btn--lg {
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

/* Override Bootstrap primary to match theme */
.btn-primary {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  transition: all var(--gaper-transition);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--gaper-secondary);
  border-color: var(--gaper-secondary);
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--gaper-primary-rgb), 0.35);
}

/* Outline primary */
.btn-outline-primary {
  color: var(--gaper-primary);
  border-color: var(--gaper-primary);
}

.btn-outline-primary:hover {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #ffffff;
}

/* Light buttons */
.btn-light {
  background: var(--gaper-bg);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.btn-light:hover {
  background: var(--gaper-border);
  border-color: var(--gaper-border);
}

/* Danger / success buttons */
.btn-danger {
  background-color: var(--gaper-danger);
  border-color: var(--gaper-danger);
}

.btn-success {
  background-color: var(--gaper-success);
  border-color: var(--gaper-success);
}

/* ------------------------------------------------------------
   18. FORMS
   ------------------------------------------------------------ */
.form-control {
  border-color: var(--gaper-border);
  border-radius: var(--gaper-btn-radius);
  padding: 0.55rem 0.875rem;
  font-size: 0.875rem;
  color: var(--gaper-text);
  transition: border-color var(--gaper-transition), box-shadow var(--gaper-transition);
}

.form-control:focus {
  border-color: var(--gaper-primary);
  box-shadow: 0 0 0 3px rgba(var(--gaper-primary-rgb), 0.1);
}

.form-select {
  border-color: var(--gaper-border);
  border-radius: var(--gaper-btn-radius);
  padding: 0.55rem 2.25rem 0.55rem 0.875rem;
  font-size: 0.875rem;
  color: var(--gaper-text);
  transition: border-color var(--gaper-transition), box-shadow var(--gaper-transition);
}

.form-select:focus {
  border-color: var(--gaper-primary);
  box-shadow: 0 0 0 3px rgba(var(--gaper-primary-rgb), 0.1);
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  color: var(--gaper-text-light);
}

.form-check-input:checked {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
}

.input-group-text {
  background: var(--gaper-bg);
  border-color: var(--gaper-border);
  color: var(--gaper-muted);
  font-size: 0.8125rem;
}

.required .form-label::after {
  content: " *";
  color: var(--gaper-danger);
  font-weight: 700;
}

/* Invalid feedback */
.invalid-feedback {
  font-size: 0.8125rem;
}

.is-invalid {
  border-color: var(--gaper-danger) !important;
}

.form-control::placeholder {
  color: #adb5bd;
  font-size: 0.8125rem;
}

/* Textarea */
textarea.form-control {
  min-height: 100px;
}

/* ------------------------------------------------------------
   19. CARDS & PANELS (Bootstrap overrides)
   ------------------------------------------------------------ */
.card {
  border-color: var(--gaper-border);
  border-radius: var(--gaper-radius);
  box-shadow: var(--gaper-shadow);
  overflow: hidden;
}

.card-header {
  background: var(--gaper-bg);
  border-bottom-color: var(--gaper-border);
  font-weight: 600;
  font-size: 0.9375rem;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  background: var(--gaper-bg);
  border-top-color: var(--gaper-border);
}

/* ------------------------------------------------------------
   20. TABLES
   ------------------------------------------------------------ */
.table {
  border-color: var(--gaper-border);
}

.table > thead {
  background: var(--gaper-bg);
}

.table > thead > tr > th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: var(--gaper-muted);
  border-bottom-width: 2px;
  padding: 0.75rem 1rem;
}

.table > tbody > tr > td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-color: var(--gaper-border);
  font-size: 0.875rem;
}

.table-bordered {
  border-color: var(--gaper-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(0, 0, 0, 0.015);
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--gaper-primary-rgb), 0.03);
}

/* ------------------------------------------------------------
   21. ALERTS (left colored border style)
   ------------------------------------------------------------ */
.alert {
  border-radius: var(--gaper-radius);
  border: none;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-left: 4px solid transparent;
}

.alert-success {
  background: rgba(16, 185, 129, 0.08);
  color: #065f46;
  border-left-color: var(--gaper-success);
}

.alert-danger {
  background: rgba(239, 68, 68, 0.08);
  color: #991b1b;
  border-left-color: var(--gaper-danger);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  border-left-color: var(--gaper-warning);
}

.alert-info {
  background: rgba(59, 130, 246, 0.08);
  color: #1e40af;
  border-left-color: var(--gaper-info);
}

.alert .btn-close {
  font-size: 0.75rem;
}

/* ------------------------------------------------------------
   22. SIDEBAR / COLUMN LEFT & RIGHT
   ------------------------------------------------------------ */
#column-left,
#column-right {
  padding-top: 1rem;
}

#column-left .list-group,
#column-right .list-group {
  border-radius: var(--gaper-radius);
  overflow: hidden;
  box-shadow: var(--gaper-shadow-xs);
}

#column-left .list-group-item,
#column-right .list-group-item {
  border-color: var(--gaper-border);
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  transition: all var(--gaper-transition);
}

#column-left .list-group-item:hover,
#column-right .list-group-item:hover {
  background: var(--gaper-bg);
  padding-left: 1.25rem;
}

#column-left .list-group-item a,
#column-right .list-group-item a {
  color: var(--gaper-text);
}

#column-left .list-group-item a:hover,
#column-right .list-group-item a:hover {
  color: var(--gaper-primary);
}

#column-left .list-group-item.active,
#column-right .list-group-item.active {
  background: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #ffffff;
}

/* Sidebar module headings */
#column-left h3,
#column-right h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gaper-border);
}

/* ------------------------------------------------------------
   23. CHECKOUT / GENERIC PAGES
   ------------------------------------------------------------ */
#checkout-checkout {
  padding-top: 0;
  padding-bottom: 2rem;
}

#checkout-checkout .accordion {
  border-radius: var(--gaper-radius);
  overflow: hidden;
  box-shadow: var(--gaper-shadow-xs);
}

#checkout-checkout .accordion-item {
  border-color: var(--gaper-border);
}

#checkout-checkout .accordion-button {
  font-weight: 500;
  font-size: 0.9375rem;
}

#checkout-checkout .accordion-button:not(.collapsed) {
  background: rgba(var(--gaper-primary-rgb), 0.05);
  color: var(--gaper-primary);
  box-shadow: none;
}

/* Search page — reuses category page grid */
#product-search {
  padding-top: 0;
  padding-bottom: 2rem;
}

#product-search #product-list {
  margin-bottom: 1.5rem;
}

/* Special offers page — reuses category page grid */
#product-special {
  padding-top: 0;
  padding-bottom: 2rem;
}

/* Manufacturer page */
#product-manufacturer {
  padding-top: 0;
  padding-bottom: 2rem;
}

/* Compare page */
#product-compare {
  padding-top: 0;
  padding-bottom: 2rem;
}

#product-compare .table img {
  max-width: 120px;
  border-radius: var(--gaper-radius-sm);
}

/* Wishlist page */
#account-wishlist .table img {
  max-width: 80px;
  border-radius: var(--gaper-radius-sm);
}

/* ------------------------------------------------------------
   24. LIST / GRID VIEW TOGGLE
   ------------------------------------------------------------ */
/* List view (single column) */
#product-list.row-cols-1 .gaper-product-card {
  flex-direction: column;
}

#product-list.row-cols-1 .gaper-product-card__image {
  max-width: 325px;
  min-width: 200px;
  aspect-ratio: auto;
  margin: auto;
}

#product-list.row-cols-1 .gaper-product-card__body {
  padding: 1.25rem;
}

#product-list.row-cols-1 .gaper-product-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Grid mode: cards vertical — description hidden */
#product-list:not(.row-cols-1) .gaper-product-card {
  flex-direction: column;
}

#product-list:not(.row-cols-1) .gaper-product-card__description {
  display: none;
}

/* ------------------------------------------------------------
   25. MODALS & TOOLTIPS
   ------------------------------------------------------------ */
.modal-content {
  border-radius: var(--gaper-radius-lg);
  border: none;
  box-shadow: var(--gaper-shadow-xl);
}

.modal-header {
  border-bottom-color: var(--gaper-border);
  padding: 1rem 1.25rem;
}

.modal-header .modal-title {
  font-size: 1.125rem;
  font-weight: 600;
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  border-top-color: var(--gaper-border);
  padding: 0.75rem 1.25rem;
}

.tooltip-inner {
  font-size: 0.75rem;
  border-radius: var(--gaper-radius-sm);
  padding: 0.35rem 0.65rem;
}

/* Magnific Popup overlay */
.mfp-bg {
  background: rgba(0, 0, 0, 0.88);
}

/* ------------------------------------------------------------
   26. IMAGE THUMBNAILS
   ------------------------------------------------------------ */
.img-thumbnail {
  border-color: var(--gaper-border);
  border-radius: var(--gaper-radius-sm);
  padding: 0.2rem;
  transition: border-color var(--gaper-transition), box-shadow var(--gaper-transition);
}

.img-thumbnail:hover {
  border-color: var(--gaper-primary);
  box-shadow: 0 0 0 2px rgba(var(--gaper-primary-rgb), 0.1);
}

/* ------------------------------------------------------------
   27. UTILITY CLASSES
   ------------------------------------------------------------ */
.gaper-section {
  padding: 2.5rem 0;
}

.gaper-section-title {
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.gaper-section-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--gaper-primary);
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

.text-primary { color: var(--gaper-primary) !important; }
.text-muted { color: var(--gaper-muted) !important; }
.bg-surface { background: var(--gaper-surface) !important; }

/* Smooth transition helper */
.gaper-transition {
  transition: all var(--gaper-transition);
}

/* Loading spinner */
.gaper-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--gaper-border);
  border-top-color: var(--gaper-primary);
  border-radius: 50%;
  animation: gaperSpin 0.6s linear infinite;
}

@keyframes gaperSpin {
  to { transform: rotate(360deg); }
}

/* Divider */
.gaper-divider {
  height: 1px;
  background: var(--gaper-border);
  margin: 1.5rem 0;
}

/* Badge count (e.g. cart count) */
.gaper-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  background: var(--gaper-danger);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  line-height: 1;
}

/* ------------------------------------------------------------
   28. RESPONSIVE
   ------------------------------------------------------------ */

/* Large desktops (down from 1200px) */
@media (max-width: 1199.98px) {
  .dropdown-column-4 .gaper-nav__mega-grid {
    min-width: 620px;
  }

  .dropdown-column-3 .gaper-nav__mega-grid {
    min-width: 500px;
  }

  .gaper-product__title {
    font-size: 1.375rem;
  }
}

/* Tablets (down from 992px) */
@media (max-width: 991.98px) {
  /* Toolbar view toggle */
  .gaper-toolbar .btn-group {
    display: none;
  }

  /* Product page gallery */
  #product-info .image {
    margin-bottom: 1.5rem;
  }

  /* Footer columns */
  .gaper-footer__col {
    margin-bottom: 1.5rem;
  }

  /* List view card */
  #product-list.row-cols-1 .gaper-product-card__image {
    max-width: 180px;
    min-width: 150px;
  }
}

/* Small tablets / large phones (down from 768px) */
@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }

  h1, .gaper-page-title {
    font-size: 1.375rem;
  }

  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }

  /* Product card — show actions on touch devices */
  .gaper-product-card__actions {
    transform: translateY(0);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    padding: 1.5rem 0.5rem 0.5rem;
  }

  .gaper-action-btn {
    width: 34px;
    height: 34px;
    font-size: 0.8125rem;
  }

  /* Product grid: tighter gutter */
  #product-list {
    --bs-gutter-x: 0.75rem;
  }

  .gaper-product-card__body {
    padding: 0.75rem;
  }

  .gaper-product-card__title {
    font-size: 0.8125rem;
  }

  .gaper-product-card__image {
    aspect-ratio: 1 / 1;
  }

  .gaper-price {
    font-size: 0.9375rem;
  }

  /* List view stacks on mobile */
  #product-list.row-cols-1 .gaper-product-card {
    flex-direction: column;
  }

  #product-list.row-cols-1 .gaper-product-card__image {
    max-width: 100%;
    min-width: auto;
  }

  /* Newsletter */
  .gaper-newsletter {
    padding: 2rem 0;
  }

  .gaper-newsletter__title {
    font-size: 1.25rem;
  }

  /* Footer */
  .gaper-footer {
    padding: 2rem 0 1rem;
  }

  .gaper-footer__heading {
    margin-bottom: 0.75rem;
    cursor: pointer;
  }

  .gaper-footer__heading::after {
    display: none;
  }

  /* Product page */
  .gaper-product__title {
    font-size: 1.25rem;
  }

  .gaper-product__price-block .price-new {
    font-size: 1.375rem;
  }

  .gaper-product__price-block {
    padding: 0.75rem 1rem;
  }

  #product-info .nav-tabs .nav-link {
    padding: 0.6rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Cart page */
  #checkout-cart .table td {
    padding: 0.6rem 0.5rem;
    font-size: 0.8125rem;
  }

  #checkout-cart .table img {
    width: 50px;
  }

  /* Back to top */
  .gaper-back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    font-size: 0.875rem;
  }
}

/* Phones (down from 576px) */
@media (max-width: 575.98px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .gaper-topbar {
    font-size: 11px;
    height: 32px;
    line-height: 32px;
  }

  .gaper-topbar .container,
  .gaper-topbar .row {
    height: 32px;
  }

  .gaper-topbar .list-inline {
    line-height: 32px;
  }

  .gaper-topbar .list-inline-item {
    padding-right: 0.5rem;
    margin-right: 0.25rem !important;
    line-height: 32px;
  }

  /* Toolbar stacking */
  .gaper-toolbar .col-lg-3,
  .gaper-toolbar .col-lg-4,
  .gaper-toolbar .col-lg-1,
  .gaper-toolbar .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Pagination stacking */
  .gaper-pagination .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center !important;
    margin-bottom: 0.5rem;
  }

  /* Product page quantity */
  #product-info .input-group {
    max-width: 100%;
  }

  /* Cart page responsive */
  #checkout-cart .table {
    font-size: 0.75rem;
  }

  #checkout-cart .input-group {
    max-width: 120px;
  }

  /* Account pages */
  #account-login .card-body,
  #account-register .card-body {
    padding: 1rem;
  }

  /* Footer bottom */
  .gaper-footer__bottom p {
    font-size: 0.6875rem;
  }

  /* Product card on very small screens */
  .gaper-product-card__title {
    font-size: 0.8125rem;
    -webkit-line-clamp: 1;
  }

  .gaper-price {
    font-size: 0.875rem;
  }

  .gaper-price--old {
    font-size: 0.75rem;
  }

  .gaper-product-card__rating {
    font-size: 0.6875rem;
  }
}

/* ------------------------------------------------------------
   29. MOBILE HEADER & OFF-CANVAS MENU
   ------------------------------------------------------------ */

/* ── Mobile Header Bar ── */
.gaper-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 12px;
}

.gaper-mobile-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--gaper-text);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gaper-radius-sm);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.gaper-mobile-toggle:hover {
  background: var(--gaper-bg);
}

.gaper-mobile-header__logo {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.gaper-mobile-header__logo img {
  max-height: 36px;
  width: auto;
}

.gaper-mobile-header__brand {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gaper-text);
  text-decoration: none;
}

.gaper-mobile-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.gaper-mobile-header__icon {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--gaper-text);
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gaper-radius-sm);
  transition: background 0.2s ease;
  text-decoration: none;
  position: relative;
}

.gaper-mobile-header__icon:hover {
  background: var(--gaper-bg);
  color: var(--gaper-primary);
}

.gaper-mobile-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 50px;
  background: var(--gaper-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ── Mobile Search Bar (expandable below header) ── */
.gaper-mobile-search {
  position: relative;
  z-index: 1060;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
}

.gaper-mobile-search--open {
  max-height: 84px;
  overflow: visible;
  padding: 0 0 10px 0;
}

.gaper-mobile-search #search {
  max-width: 100%;
}

.gaper-mobile-search #search .input-group {
  border-radius: var(--gaper-radius);
}

.gaper-mobile-search #search .form-control {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}

.gaper-mobile-search #search .btn {
  border-radius: 0 var(--gaper-radius) var(--gaper-radius) 0 !important;
}

/* ── Off-Canvas Mobile Menu ── */
.gaper-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: var(--gaper-surface, #fff);
  z-index: 1080;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
}

.gaper-mobile-menu--open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}

.gaper-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gaper-border);
  flex-shrink: 0;
}

.gaper-mobile-menu__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gaper-text);
}

.gaper-mobile-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--gaper-bg);
  color: var(--gaper-text);
  font-size: 1.125rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.gaper-mobile-close:hover {
  background: var(--gaper-danger);
  color: #fff;
}

.gaper-mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Account section */
.gaper-mobile-menu__account {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gaper-border);
}

.gaper-mobile-menu__account a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gaper-text);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.gaper-mobile-menu__account a:hover {
  background: var(--gaper-bg);
  color: var(--gaper-primary);
}

.gaper-mobile-menu__account a + a {
  border-left: 1px solid var(--gaper-border);
}

/* Navigation items */
.gaper-mobile-nav {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.gaper-mobile-nav > li {
  border-bottom: 1px solid var(--gaper-border);
}

.gaper-mobile-nav > li:last-child {
  border-bottom: none;
}

/* Row with link + toggle button (split: link navigates, button toggles accordion) */
.gaper-mobile-nav__row {
  display: flex;
  align-items: center;
}

.gaper-mobile-nav__link {
  flex: 1;
  display: block;
  padding: 12px 12px 12px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gaper-text);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  min-width: 0;
}

.gaper-mobile-nav__link:hover {
  color: var(--gaper-primary);
}

.gaper-submenu--open > .gaper-mobile-nav__row .gaper-mobile-nav__link {
  color: var(--gaper-primary);
}

.gaper-mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--gaper-border);
  background: transparent;
  color: var(--gaper-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.gaper-mobile-nav__toggle:hover {
  background: var(--gaper-bg);
  color: var(--gaper-primary);
}

.gaper-mobile-arrow {
  font-size: 0.75rem;
  transition: transform 0.25s ease, color 0.25s ease;
}

.gaper-submenu--open > .gaper-mobile-nav__row .gaper-mobile-arrow {
  transform: rotate(90deg);
  color: var(--gaper-primary);
}

/* Sub-menu items */
.gaper-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--gaper-bg);
}

.gaper-submenu > li {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.gaper-submenu > li > .gaper-mobile-nav__row .gaper-mobile-nav__link {
  padding: 9px 12px 9px 40px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gaper-muted);
}

.gaper-submenu > li > .gaper-mobile-nav__row .gaper-mobile-nav__toggle {
  width: 40px;
  height: 40px;
}

.gaper-submenu--lvl-3 > li > .gaper-mobile-nav__row .gaper-mobile-nav__link {
  padding-left: 56px;
  font-size: 0.79rem;
}

.gaper-submenu li a {
  display: block;
  padding: 9px 20px 9px 40px;
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.gaper-submenu li a:hover {
  color: var(--gaper-primary);
  padding-left: 44px;
}

/* Footer links */
.gaper-mobile-menu__footer {
  padding: 12px 0;
  border-top: 1px solid var(--gaper-border);
}

.gaper-mobile-menu__footer a {
  display: block;
  padding: 10px 20px;
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.gaper-mobile-menu__footer a:hover {
  background: var(--gaper-bg);
  color: var(--gaper-primary);
}

/* ── Mobile Cart Slide Panel (from right) ── */
.gaper-mobile-cart {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: var(--gaper-surface, #fff);
  z-index: 1080;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
}

.gaper-mobile-cart--open {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}

.gaper-mobile-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gaper-border);
  flex-shrink: 0;
}

.gaper-mobile-cart__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gaper-text);
}

.gaper-mobile-cart__close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--gaper-bg);
  color: var(--gaper-text);
  font-size: 1.125rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.gaper-mobile-cart__close:hover {
  background: var(--gaper-danger);
  color: #fff;
}

.gaper-mobile-cart__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

.gaper-mobile-cart__items {
  padding: 8px 0;
}

.gaper-mobile-cart__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gaper-border);
  position: relative;
}

.gaper-mobile-cart__item-img {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--gaper-radius-sm);
  overflow: hidden;
  border: 1px solid var(--gaper-border);
}

.gaper-mobile-cart__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gaper-mobile-cart__item-info {
  flex: 1;
  min-width: 0;
}

.gaper-mobile-cart__item-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gaper-text);
  text-decoration: none;
  line-height: 1.3;
}

.gaper-mobile-cart__item-name:hover {
  color: var(--gaper-primary);
}

.gaper-mobile-cart__item-qty {
  font-size: 0.75rem;
  color: var(--gaper-muted);
  margin-top: 2px;
}

.gaper-mobile-cart__item-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gaper-primary);
  margin-top: 2px;
}

.gaper-mobile-cart__item-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--gaper-bg);
  color: var(--gaper-muted);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: background 0.2s, color 0.2s;
}

.gaper-mobile-cart__item-remove:hover {
  background: var(--gaper-danger);
  color: #fff;
}

.gaper-mobile-cart__totals {
  padding: 12px 20px;
  border-top: 1px solid var(--gaper-border);
}

.gaper-mobile-cart__total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: var(--gaper-muted);
}

.gaper-mobile-cart__total-row--grand {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--gaper-text);
  border-top: 1px solid var(--gaper-border);
  padding-top: 8px;
  margin-top: 4px;
}

/* Inner content — re-style the OC4 rendered cart template for mobile panel */
.gaper-mobile-cart__content {
  width: 100%;
}

.gaper-mobile-cart__inner {
  padding: 0;
  width: 100%;
  overflow: hidden;
}

.gaper-mobile-cart__inner .gaper-minicart {
  width: 100% !important;
}

/* Force all dropdown menus inside the panel to be static and full-width */
.gaper-mobile-cart__inner .dropdown-menu,
.gaper-mobile-cart__inner .gaper-minicart__dropdown,
.gaper-mobile-cart__inner .dropdown-menu[data-bs-popper],
.gaper-mobile-cart__inner .dropdown-menu.show {
  position: static !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  inset: auto !important;
  float: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

/* Hide the cart toggle button (it's the "2 item(s) - $xxx" button) */
.gaper-mobile-cart__inner .dropdown-toggle,
.gaper-mobile-cart__inner .gaper-minicart__btn,
.gaper-mobile-cart__inner > .gaper-minicart > button,
.gaper-mobile-cart__inner > .dropdown > button,
.gaper-mobile-cart__inner > .dropdown > a {
  display: none !important;
}

/* Hide the duplicate "Shopping Cart" header — panel already has its own */
.gaper-mobile-cart__inner .gaper-minicart__header {
  display: none !important;
}

.gaper-mobile-cart__inner .gaper-minicart__items {
  max-height: none !important;
  overflow: visible !important;
}

.gaper-mobile-cart__inner .gaper-minicart__item {
  padding: 12px 16px;
  gap: 10px;
}

/* Truncate long product names to 2 lines in mobile cart */
.gaper-mobile-cart__inner .gaper-minicart__item-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Ensure item info doesn't overflow */
.gaper-mobile-cart__inner .gaper-minicart__item-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Full-width totals row */
.gaper-mobile-cart__inner .gaper-minicart__totals {
  padding: 12px 16px;
}

.gaper-mobile-cart__inner .gaper-minicart__totals-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Hide the checkout/cart buttons — panel footer has them */
.gaper-mobile-cart__inner .gaper-minicart__actions {
  display: none !important;
}

/* Fix table layout if OC4 uses table for cart items */
.gaper-mobile-cart__inner table {
  width: 100% !important;
  font-size: 0.8125rem;
}

.gaper-mobile-cart__inner table img {
  max-width: 50px;
  height: auto;
}

/* Empty cart styling */
.gaper-mobile-cart__inner .gaper-minicart__empty {
  padding: 2rem 1rem;
  text-align: center;
}

.gaper-mobile-cart__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--gaper-border);
  flex-shrink: 0;
}

/* ── Overlay ── */
.gaper-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1070;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gaper-mobile-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* Body scroll lock */
.gaper-no-scroll {
  overflow: hidden !important;
}

/* ── Topbar mobile tweaks ── */
@media (max-width: 991.98px) {
  /* Hide desktop header, show mobile header */
  .gaper-header .d-none.d-lg-block {
    display: none !important;
  }

  .gaper-mobile-header {
    display: flex !important;
  }

  /* Topbar: simplify on mobile */
  .gaper-topbar__center {
    display: none !important;
  }

  .gaper-topbar__right .d-none.d-lg-inline {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  /* Topbar: hide phone/email, keep only currency + account icons */
  .gaper-topbar__divider,
  .gaper-topbar a[href^="tel:"],
  .gaper-topbar a[href^="mailto:"] {
    display: none !important;
  }

  .gaper-topbar {
    font-size: 12px;
  }

  /* Even smaller logo on very small screens */
  .gaper-mobile-header__logo img {
    max-height: 30px;
  }
}

/* ── Hide redundant topbar links that are now in mobile menu ── */
@media (max-width: 991.98px) {
  .gaper-topbar__right a[href*="product/compare"],
  .gaper-topbar__right a[title*="Shopping Cart"],
  .gaper-topbar__right a[title*="Checkout"] {
    display: none;
  }
}

/* ------------------------------------------------------------
   30. PRINT STYLES
   ------------------------------------------------------------ */
@media print {
  .gaper-topbar,
  #menu,
  .gaper-newsletter,
  .gaper-footer,
  .gaper-back-to-top,
  .breadcrumb,
  .gaper-toolbar .btn-group,
  .gaper-product-card__actions {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .container {
    max-width: 100%;
  }

  a {
    color: #000;
  }

  .gaper-product-card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  .gaper-header {
    box-shadow: none;
    border-bottom: 1px solid #ddd;
  }
}

/* ------------------------------------------------------------
   ADDITIONAL RULES
   ------------------------------------------------------------ */

/* Boxed layout — use body flex to guarantee centering */
body:has(.gaper-layout-boxed) {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #d1d5db;
}

.gaper-layout-boxed {
  width: 100%;
  max-width: var(--gaper-container);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
  background: var(--gaper-surface);
  overflow: hidden;
}

/* Breadcrumb in boxed mode — constrain to box width instead of 100vw */
.gaper-layout-boxed .breadcrumb::before {
  width: 100%;
  left: 0;
  transform: none;
}

/* Header shadow modifier */
.gaper-header--shadow {
  box-shadow: var(--gaper-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
}

/* Topbar announcement message */
.gaper-topbar__message {
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--gaper-topbar-text);
  opacity: 0.9;
}

/* Action buttons wrapper — HORIZONTAL layout */
.gaper-action-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* Social icon (individual link in footer) */
.gaper-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gaper-footer-link);
  margin: 0 0.35rem;
  transition: all var(--gaper-transition);
  font-size: 0.9375rem;
}

.gaper-social-icon:hover {
  background: var(--gaper-primary);
  color: #ffffff;
  transform: translateY(-3px);
}

/* Product card hover effect variants */

/* Zoom: image scales up inside its container */
.gaper-product-card[data-hover="zoom"] .gaper-product-card__image img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gaper-product-card[data-hover="zoom"]:hover .gaper-product-card__image img {
  transform: scale(1.12);
}

/* Fade: image fades with a brightness shift */
.gaper-product-card[data-hover="fade"] .gaper-product-card__image img {
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.gaper-product-card[data-hover="fade"]:hover .gaper-product-card__image img {
  opacity: 0.75;
  filter: brightness(1.1);
}

/* Slide: image shifts upward revealing bottom gap */
.gaper-product-card[data-hover="slide"] .gaper-product-card__image img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gaper-product-card[data-hover="slide"]:hover .gaper-product-card__image img {
  transform: translateY(-10px);
}

/* Flip: 3D flip to second image on hover */
.gaper-product-card[data-hover="flip"] .gaper-product-card__image a {
  perspective: 1000px;
  display: block;
  position: relative;
}
.gaper-product-card[data-hover="flip"] .gaper-product-card__img-front,
.gaper-product-card[data-hover="flip"] .gaper-product-card__img-back {
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gaper-product-card[data-hover="flip"] .gaper-product-card__img-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotateY(180deg);
}
.gaper-product-card[data-hover="flip"]:hover .gaper-product-card__img-front {
  transform: rotateY(-180deg);
}
.gaper-product-card[data-hover="flip"]:hover .gaper-product-card__img-back {
  transform: rotateY(0deg);
}

/* None: no image animation, no card lift */
.gaper-product-card[data-hover="none"] .gaper-product-card__image img {
  transition: none !important;
}
.gaper-product-card[data-hover="none"]:hover .gaper-product-card__image img {
  transform: none !important;
  opacity: 1 !important;
}

/* Product accordion tab style */
.gaper-product-accordion .accordion-button {
  font-weight: 600;
  font-family: var(--gaper-font-heading);
}

.gaper-product-accordion .accordion-button:not(.collapsed) {
  background-color: rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.05);
  color: var(--gaper-primary);
}

.gaper-product-accordion .accordion-body {
  padding: 1.25rem;
}

/* Sticky add-to-cart bar */
.gaper-sticky-cart {
  position: fixed;
  bottom: -80px;
  left: 0;
  right: 0;
  background: var(--gaper-surface);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  padding: 0.75rem 0;
  z-index: 1010;
  transition: bottom 0.3s ease;
}
.gaper-sticky-cart--visible {
  bottom: 0;
}
.gaper-sticky-cart .container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gaper-sticky-cart__title {
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.gaper-sticky-cart__price {
  font-weight: 700;
  color: var(--gaper-primary);
  font-size: 1.125rem;
  white-space: nowrap;
}
.gaper-sticky-cart__btn {
  margin-left: auto;
}

/* Price row: price on left, countdown on right */
.gaper-price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.gaper-price-row > .gaper-product__price-block {
  flex-shrink: 0;
}

/* Modern option cards — radio & checkbox */
.gaper-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gaper-option-card {
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.gaper-option-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gaper-option-card__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 80px;
  padding: 12px 16px;
  border: 2px solid var(--gaper-border, #dee2e6);
  border-radius: var(--gaper-radius, 8px);
  background: var(--gaper-surface, #fff);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.gaper-option-card__box:hover {
  border-color: var(--gaper-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.08);
}

/* Selected state */
.gaper-option-card__input:checked + .gaper-option-card__box {
  border-color: var(--gaper-primary, #2563eb);
  background: rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.04);
  box-shadow: 0 0 0 3px rgba(var(--gaper-primary-rgb, 37, 99, 235), 0.12);
}

/* Checkmark badge — hidden by default, visible when selected */
.gaper-option-card__check {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gaper-primary, #2563eb);
  color: #fff;
  font-size: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gaper-option-card__input:checked + .gaper-option-card__box .gaper-option-card__check {
  opacity: 1;
  transform: scale(1);
}

.gaper-option-card__img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
  margin-bottom: 6px;
}

.gaper-option-card__name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gaper-text, #212529);
  line-height: 1.3;
}

.gaper-option-card__price {
  display: block;
  font-size: 0.75rem;
  color: var(--gaper-muted, #6c757d);
  margin-top: 2px;
}

/* Focus visible for keyboard navigation */
.gaper-option-card__input:focus-visible + .gaper-option-card__box {
  outline: 2px solid var(--gaper-primary, #2563eb);
  outline-offset: 2px;
}

/* Error state */
.is-invalid + .gaper-option-grid .gaper-option-card__box,
.gaper-option-grid.is-invalid .gaper-option-card__box {
  border-color: var(--gaper-danger, #dc3545);
}

/* Sale countdown — card style */
.gaper-countdown {
  background: var(--gaper-bg, #f5f5f7);
  border: 2px solid var(--gaper-border, #dee2e6);
  border-radius: var(--gaper-radius-lg, 10px);
  padding: 0.75rem 1rem;
  flex-shrink: 0;
  max-width: 300px;
}

.gaper-countdown__header {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gaper-text, #212529);
  margin-bottom: 0.5rem;
}

.gaper-countdown__timer {
  display: flex;
  gap: 0;
  background: var(--gaper-surface, #fff);
  border-radius: var(--gaper-radius, 6px);
  overflow: hidden;
  border: 1px solid var(--gaper-border, #dee2e6);
}

.gaper-countdown__item {
  text-align: center;
  padding: 0.5rem 0.625rem;
  min-width: 58px;
  flex: 1;
  position: relative;
}

.gaper-countdown__item + .gaper-countdown__item {
  border-left: 1px solid var(--gaper-border, #dee2e6);
}

.gaper-countdown__number {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--gaper-text, #212529);
  line-height: 1.2;
}

.gaper-countdown__label {
  display: block;
  font-size: 0.6875rem;
  color: var(--gaper-muted, #6c757d);
  text-transform: capitalize;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Responsive: stack below price on small screens */
@media (max-width: 575.98px) {
  .gaper-price-row {
    flex-direction: column;
  }
  .gaper-countdown {
    max-width: 100%;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   CART POPUP (Journal-style slide-in notification)
   ------------------------------------------------------------ */
.gaper-cart-popup {
  position: fixed;
  top: 20px;
  right: -460px;
  width: 420px;
  max-width: calc(100vw - 20px);
  z-index: 1060;
  transition: right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gaper-cart-popup--visible {
  right: 20px;
}

.gaper-cart-popup__inner {
  background: #fff;
  border-radius: var(--gaper-radius);
  box-shadow: var(--gaper-shadow-xl);
  overflow: hidden;
}

.gaper-cart-popup__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: var(--gaper-success);
  color: #fff;
}

.gaper-cart-popup__check {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.gaper-cart-popup__title {
  font-weight: 600;
  font-size: 0.875rem;
  flex: 1;
  letter-spacing: 0.2px;
}

.gaper-cart-popup__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.gaper-cart-popup__close:hover {
  color: #fff;
}

.gaper-cart-popup__body {
  padding: 1rem;
}

.gaper-cart-popup__product {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.gaper-cart-popup__img-wrap {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--gaper-radius-sm);
  overflow: hidden;
  border: 1px solid var(--gaper-border);
  background: var(--gaper-bg);
}

.gaper-cart-popup__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gaper-cart-popup__img[src=""] {
  display: none;
}

.gaper-cart-popup__info {
  flex: 1;
  min-width: 0;
}

.gaper-cart-popup__name {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.3rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gaper-cart-popup__meta {
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  margin-bottom: 0.25rem;
}

.gaper-cart-popup__price {
  color: var(--gaper-primary);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0;
}

.gaper-cart-popup__tax {
  color: #999;
  font-size: 0.75rem;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 2px;
}

.gaper-cart-popup__footer {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--gaper-border);
  background: var(--gaper-bg);
  align-items: center;
}

.gaper-cart-popup__footer .btn {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}

.gaper-cart-popup__continue {
  font-size: 0.8rem;
  color: var(--gaper-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  margin-right: auto;
}

.gaper-cart-popup__continue:hover {
  color: var(--gaper-text);
}

/* Progress bar auto-close indicator */
.gaper-cart-popup__progress {
  height: 3px;
  background: var(--gaper-primary);
  width: 100%;
  animation: gaperPopupProgress 6s linear forwards;
}

@keyframes gaperPopupProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

@media (max-width: 479px) {
  .gaper-cart-popup {
    top: auto;
    bottom: -300px;
    right: 0;
    width: 100%;
    max-width: 100%;
    transition: bottom 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .gaper-cart-popup--visible {
    bottom: 0;
    right: 0;
  }
}

/* ------------------------------------------------------------
   QUICK VIEW MODAL (inner content rendered from JSON)
   ------------------------------------------------------------ */

/* Hide native number spinner — custom +/- buttons are used */
.gaper-qv-product input[type="number"]::-webkit-outer-spin-button,
.gaper-qv-product input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gaper-qv-product input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.gaper-qv-product {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.gaper-qv-gallery {
  flex: 0 0 auto;
  width: 260px;
  max-width: 100%;
}

.gaper-qv-gallery img {
  width: 100%;
  border-radius: var(--gaper-radius);
  border: 1px solid var(--gaper-border);
}

.gaper-qv-details {
  flex: 1;
  min-width: 200px;
}

.gaper-qv-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--gaper-text);
}

.gaper-qv-title a {
  color: inherit;
  text-decoration: none;
}

.gaper-qv-title a:hover {
  color: var(--gaper-primary);
}

.gaper-qv-price-wrap {
  margin-bottom: 0.875rem;
}

.gaper-qv-price {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--gaper-primary);
}

.gaper-qv-price-old {
  font-size: 0.9375rem;
  text-decoration: line-through;
  color: var(--gaper-muted);
  margin-left: 0.5rem;
}

.gaper-qv-meta {
  font-size: 0.8125rem;
  color: var(--gaper-muted);
  margin-bottom: 0.25rem;
}

.gaper-qv-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--gaper-success);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.gaper-qv-divider {
  border: 0;
  border-top: 1px solid var(--gaper-border);
  margin: 0.875rem 0;
}

.gaper-qv-option-label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--gaper-text-light);
}

.gaper-qv-actions {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.gaper-qv-actions .btn {
  flex: 1;
  min-width: 120px;
}

.gaper-qv-view-full {
  display: block;
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--gaper-muted);
}

.gaper-qv-view-full:hover {
  color: var(--gaper-primary);
}

/* Quick View – file upload option */
.gaper-qv-file-wrap .input-group {
  max-width: 320px;
}
.gaper-qv-file-status {
  font-size: 0.75rem;
  min-height: 1.1em;
}

/* ------------------------------------------------------------
   CATEGORY ACCORDION MODULE (sidebar – 3 levels)
   ------------------------------------------------------------ */
.gaper-cat-accordion {
  background: var(--gaper-surface, #fff);
  border: 1px solid var(--gaper-border, #e5e7eb);
  border-radius: var(--gaper-radius, 10px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin-bottom:30px;
}

.gaper-cat-accordion__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.875rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gaper-text, #1e293b);
  background: var(--gaper-surface, #fff);
  border-bottom: 1px solid var(--gaper-border, #e5e7eb);
  letter-spacing: 0.01em;
}

.gaper-cat-accordion__header i {
  color: var(--gaper-primary, #2563eb);
  font-size: 1rem;
}

.gaper-cat-accordion__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gaper-cat-accordion__item {
  border-bottom: 1px solid color-mix(in srgb, var(--gaper-border, #e5e7eb) 50%, transparent);
}

.gaper-cat-accordion__item:last-child {
  border-bottom: 0;
}

/* Row – shared layout for all levels */
.gaper-cat-accordion__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: background .18s ease, border-color .18s ease;
}

/* Level 1 */
.gaper-cat-accordion__row--l1 {
  padding: 0.6875rem 1.125rem;
}

.gaper-cat-accordion__row--l1 > .gaper-cat-accordion__link {
  font-weight: 600;
  font-size: 0.875rem;
}

.gaper-cat-accordion__row--l1:hover {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 5%, transparent);
}

.gaper-cat-accordion__row--l1.is-active {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 8%, transparent);
  border-left: 3px solid var(--gaper-primary, #2563eb);
}

.gaper-cat-accordion__row--l1.is-active > .gaper-cat-accordion__link {
  color: var(--gaper-primary, #2563eb);
}

/* Level 2 */
.gaper-cat-accordion__row--l2 {
  padding: 0.5rem 1.125rem 0.5rem 2rem;
}

.gaper-cat-accordion__row--l2 > .gaper-cat-accordion__link {
  font-weight: 500;
  font-size: 0.8125rem;
}

.gaper-cat-accordion__row--l2:hover {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 4%, transparent);
}

.gaper-cat-accordion__row--l2.is-active {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 7%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--gaper-primary, #2563eb) 60%, transparent);
}

.gaper-cat-accordion__row--l2.is-active > .gaper-cat-accordion__link {
  color: var(--gaper-primary, #2563eb);
}

/* Level 3 */
.gaper-cat-accordion__row--l3 {
  padding: 0.4rem 1.125rem 0.4rem 3rem;
}

.gaper-cat-accordion__row--l3 > .gaper-cat-accordion__link {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--gaper-muted, #64748b);
}

.gaper-cat-accordion__row--l3:hover {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 3%, transparent);
}

.gaper-cat-accordion__row--l3:hover > .gaper-cat-accordion__link {
  color: var(--gaper-primary, #2563eb);
}

.gaper-cat-accordion__row--l3.is-active > .gaper-cat-accordion__link {
  color: var(--gaper-primary, #2563eb);
  font-weight: 600;
}

/* Link */
.gaper-cat-accordion__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gaper-text, #1e293b);
  text-decoration: none;
  line-height: 1.4;
  transition: color .15s ease;
}

.gaper-cat-accordion__link:hover {
  color: var(--gaper-primary, #2563eb);
}

/* Product count badge */
.gaper-cat-accordion__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gaper-muted, #64748b);
  background: color-mix(in srgb, var(--gaper-border, #e5e7eb) 60%, transparent);
  border-radius: 999px;
  flex-shrink: 0;
}

.is-active > .gaper-cat-accordion__row .gaper-cat-accordion__count {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 12%, transparent);
  color: var(--gaper-primary, #2563eb);
}

/* Toggle button (chevron) */
.gaper-cat-accordion__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gaper-muted, #94a3b8);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s ease, color .18s ease, transform .3s ease;
}

.gaper-cat-accordion__toggle:hover {
  background: color-mix(in srgb, var(--gaper-border, #e5e7eb) 70%, transparent);
  color: var(--gaper-text, #1e293b);
}

.gaper-cat-accordion__toggle i {
  font-size: 0.65rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.is-open > .gaper-cat-accordion__row > .gaper-cat-accordion__toggle i {
  transform: rotate(180deg);
}

/* Sub-list animation */
.gaper-cat-accordion__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
  background: color-mix(in srgb, var(--gaper-bg, #f8fafc) 60%, var(--gaper-surface, #fff));
}

/* Nested sub indentation visual cue */
.gaper-cat-accordion__sub .gaper-cat-accordion__sub {
  background: color-mix(in srgb, var(--gaper-bg, #f8fafc) 80%, var(--gaper-surface, #fff));
}

/* Responsive */
@media (max-width: 991.98px) {
  .gaper-cat-accordion__row--l2 { padding-left: 1.5rem; }
  .gaper-cat-accordion__row--l3 { padding-left: 2.25rem; }
}

/* ------------------------------------------------------------
   GRID / LIST VIEW TOGGLE
   ------------------------------------------------------------ */
#product-list.gaper-view--list {
  row-gap: 0;
}

#product-list.gaper-view--list > .col,
#product-list.gaper-view--list > div[class*="col"] {
  flex: 0 0 100%;
  max-width: 100%;
}

#product-list.gaper-view--list .gaper-product-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1rem;
  border-bottom: 1px solid var(--gaper-border);
  border-radius: 0;
  box-shadow: none;
}

#product-list.gaper-view--list .gaper-product-card:hover {
  box-shadow: var(--gaper-shadow);
}

#product-list.gaper-view--list .gaper-product-card .gaper-product-card__img-wrap {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
}

#product-list.gaper-view--list .gaper-product-card .gaper-product-card__body {
  flex: 1;
  min-width: 0;
}

#product-list.gaper-view--list .gaper-product-card .gaper-product-card__desc {
  display: block !important;
  -webkit-line-clamp: 3;
}

/* Active state on grid/list buttons */
#button-grid,
#button-list {
  border-radius: var(--gaper-btn-radius);  
  padding: 0.375rem 0.725rem !important;    
}
#button-grid.active,
#button-list.active {
  background: var(--gaper-primary);
  color: #fff;
  border-color: var(--gaper-primary);
  border-radius: var(--gaper-btn-radius);  
}

/* ------------------------------------------------------------
   SUBCATEGORY GRID (thumbnail mode)
   ------------------------------------------------------------ */
.gaper-subcat-item {
  color: var(--gaper-text);
  transition: color var(--gaper-transition);
}

.gaper-subcat-item:hover {
  color: var(--gaper-primary);
}

.gaper-subcat-item__img-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--gaper-radius);
  border: 1px solid var(--gaper-border);
  margin-bottom: 0.5rem;
  background: var(--gaper-bg);
  transition: box-shadow var(--gaper-transition);
}

.gaper-subcat-item:hover .gaper-subcat-item__img-wrap {
  box-shadow: var(--gaper-shadow-md);
}

.gaper-subcat-item__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gaper-subcat-item:hover .gaper-subcat-item__img-wrap img {
  transform: scale(1.05);
}

.gaper-subcat-item__name {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================================
   BANNER MODULE
   ============================================================ */

.gaper-banner {
  position: relative;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: var(--gaper-radius-lg, 12px);
}

.gaper-banner__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--gaper-radius, 8px);
  background: var(--gaper-surface);
  border: 1px solid var(--gaper-border);
  box-shadow: var(--gaper-shadow);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.gaper-banner__item:hover {
  box-shadow: var(--gaper-shadow-md);
  border-color: var(--gaper-primary);
}

.gaper-banner__link {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.gaper-banner__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

a.gaper-banner__link:hover .gaper-banner__img {
  transform: scale(1.05);
}

/* Overlay that appears on hover (linked banners only) */
.gaper-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}

a.gaper-banner__link:hover .gaper-banner__overlay {
  opacity: 1;
}

.gaper-banner__cta {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.5rem 1.25rem;
  border: 2px solid #fff;
  border-radius: var(--gaper-btn-radius, 6px);
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

a.gaper-banner__link:hover .gaper-banner__cta {
  background: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #fff;
}

/* Navigation controls */
.gaper-banner__control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--gaper-text, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gaper-banner:hover .gaper-banner__control {
  opacity: 1;
}

.gaper-banner__control:hover {
  background: var(--gaper-primary);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.gaper-banner__control--prev {
  left: 12px;
}

.gaper-banner__control--next {
  right: 12px;
}

/* Dot indicators — override Bootstrap carousel-indicators defaults */
.gaper-banner__indicators.carousel-indicators {
  position: absolute;
  bottom: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gaper-banner__dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 2px solid #fff;
  background: transparent !important;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  margin: 0 !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  text-indent: 0;
}

.gaper-banner__dot.active,
.gaper-banner__dot:hover {
  background: var(--gaper-primary) !important;
  border-color: var(--gaper-primary);
}

/* Responsive */
@media (max-width: 767.98px) {
  .gaper-banner__control {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .gaper-banner__control--prev { left: 8px; }
  .gaper-banner__control--next { right: 8px; }

  .gaper-banner__cta {
    font-size: 0.8125rem;
    padding: 0.4rem 1rem;
  }

  .gaper-banner__overlay {
    padding: 1rem;
  }
}

/* ============================================================
   ONE PAGE CHECKOUT (OPC)
   ============================================================ */

/* OPC Sections */
.gaper-opc-section {
  background: var(--gaper-surface, #fff);
  border: 1px solid var(--gaper-border, #e5e7eb);
  border-radius: var(--gaper-radius, 8px);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.gaper-opc-section__header {
  padding: 1rem 1.25rem;
  background: var(--gaper-surface, #f8f9fa);
  border-bottom: 1px solid var(--gaper-border, #e5e7eb);
}

.gaper-opc-section__header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gaper-text, #1f2937);
}

.gaper-opc-section__body {
  padding: 1.25rem;
}

.gaper-opc-section__body fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.gaper-opc-section__body fieldset legend {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gaper-border-light, #f1f5f9);
  color: var(--gaper-text, #1f2937);
}

/* Shipping/Payment Method Cards (inline) */
.gaper-opc-method-group {
  margin-bottom: 1rem;
}

.gaper-opc-method-group__title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--gaper-text, #1f2937);
}

.gaper-opc-method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--gaper-border, #e5e7eb);
  border-radius: var(--gaper-radius, 8px);
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--gaper-surface, #fff);
}

.gaper-opc-method:hover {
  border-color: var(--gaper-primary, #2563eb);
  background: rgba(var(--gaper-primary-rgb, 37,99,235), 0.03);
}

.gaper-opc-method--selected {
  border-color: var(--gaper-primary, #2563eb);
  background: rgba(var(--gaper-primary-rgb, 37,99,235), 0.06);
  box-shadow: 0 0 0 1px var(--gaper-primary, #2563eb);
}

.gaper-opc-method input[type="radio"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--gaper-primary, #2563eb);
}

.gaper-opc-method__info {
  flex: 1;
}

.gaper-opc-method__name {
  font-weight: 500;
  color: var(--gaper-text, #1f2937);
}

.gaper-opc-method__price {
  font-weight: 600;
  color: var(--gaper-primary, #2563eb);
  white-space: nowrap;
}

.gaper-opc-method__icon {
  color: var(--gaper-muted, #6c757d);
  font-size: 1.25rem;
}

/* Loading State */
.gaper-opc-loading {
  padding: 2rem;
  text-align: center;
  color: var(--gaper-muted, #6c757d);
  font-size: 0.95rem;
}

/* Order Summary Sidebar */
.gaper-opc-summary {
  position: sticky;
  top: 100px;
  background: var(--gaper-surface, #fff);
  border: 1px solid var(--gaper-border, #e5e7eb);
  border-radius: var(--gaper-radius, 8px);
  overflow: hidden;
}

.gaper-opc-summary__header {
  padding: 1rem 1.25rem;
  background: var(--gaper-primary, #2563eb);
  color: #fff;
}

.gaper-opc-summary__header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.gaper-opc-summary__body {
  padding: 1.25rem;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Order Items (in confirm) */
.gaper-opc-order__items {
  margin-bottom: 1rem;
}

.gaper-opc-order__item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gaper-border-light, #f1f5f9);
  align-items: flex-start;
}

.gaper-opc-order__item:last-child {
  border-bottom: none;
}

.gaper-opc-order__item-qty {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--gaper-muted, #6c757d);
  min-width: 30px;
}

.gaper-opc-order__item-info {
  flex: 1;
  min-width: 0;
}

.gaper-opc-order__item-info a {
  color: var(--gaper-text, #1f2937);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gaper-opc-order__item-info a:hover {
  color: var(--gaper-primary, #2563eb);
}

.gaper-opc-order__item-total {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--gaper-text, #1f2937);
  font-size: 0.9rem;
}

/* Order Totals */
.gaper-opc-order__totals {
  border-top: 2px solid var(--gaper-border, #e5e7eb);
  padding-top: 0.75rem;
}

.gaper-opc-order__total {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--gaper-text-light, #4b5563);
}

.gaper-opc-order__total--grand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gaper-text, #1f2937);
  border-top: 1px solid var(--gaper-border, #e5e7eb);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

/* OPC Confirm Payment Button */
#checkout-payment .btn-primary,
#checkout-confirm .btn-primary {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--gaper-btn-radius, 6px);
}

/* Agreement checkbox */
.gaper-opc-agree {
  padding: 0.75rem;
  background: var(--gaper-surface, #f8f9fa);
  border-radius: var(--gaper-radius, 8px);
  border: 1px solid var(--gaper-border, #e5e7eb);
}

.gaper-opc-agree .form-check-label {
  font-size: 0.875rem;
  color: var(--gaper-text-light, #4b5563);
}

.gaper-opc-agree .form-check-label a {
  color: var(--gaper-primary, #2563eb);
  font-weight: 500;
}

/* OPC Form Styling */
#checkout-checkout .form-control,
#checkout-checkout .form-select {
  border-radius: var(--gaper-radius, 8px);
  border-color: var(--gaper-border, #e5e7eb);
  padding: 0.6rem 0.875rem;
}

#checkout-checkout .form-control:focus,
#checkout-checkout .form-select:focus {
  border-color: var(--gaper-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(var(--gaper-primary-rgb, 37,99,235), 0.15);
}

#checkout-checkout .form-label {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
  color: var(--gaper-text, #1f2937);
}

/* OPC Summary: not sticky on mobile */
@media (max-width: 991.98px) {
  .gaper-opc-summary {
    position: static;
    margin-top: 1.5rem;
  }
}

/* ============================================================
   DARK MODE OVERRIDES
   Applied when admin selects a dark background color.
   Class "gaper-dark" is added to <html> by startup controller.
   ============================================================ */

/* --- Base & Body --- */
.gaper-dark body {
  background-color: var(--gaper-bg);
  color: var(--gaper-text);
}

/* --- Topbar --- */
.gaper-dark .gaper-topbar {
  color: var(--gaper-muted);
}

.gaper-dark .gaper-topbar a,
.gaper-dark .gaper-topbar .dropdown-toggle,
.gaper-dark .gaper-topbar__left a,
.gaper-dark .gaper-topbar__right a {
  color: var(--gaper-muted);
}

.gaper-dark .gaper-topbar__left a:hover,
.gaper-dark .gaper-topbar__right a:hover,
.gaper-dark .gaper-topbar a:hover,
.gaper-dark .gaper-topbar .dropdown-toggle:hover {
  color: var(--gaper-accent);
}

.gaper-dark .gaper-topbar .list-inline-item {
  border-right-color: var(--gaper-border);
}

/* --- Bootstrap Component Overrides --- */
.gaper-dark .card,
.gaper-dark .list-group-item,
.gaper-dark .accordion-item,
.gaper-dark .accordion-button,
.gaper-dark .modal-content,
.gaper-dark .offcanvas {
  background-color: var(--gaper-surface);
  color: var(--gaper-text);
  border-color: var(--gaper-border);
}

.gaper-dark .accordion-button:not(.collapsed) {
  background-color: var(--gaper-surface);
  color: var(--gaper-primary);
}

.gaper-dark .accordion-button::after {
  filter: invert(1);
}

.gaper-dark .card-header,
.gaper-dark .card-footer {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--gaper-border);
}

.gaper-dark .breadcrumb {
  background-color: transparent;
}

/* Breadcrumb full-width background for dark mode */
.gaper-dark .breadcrumb::before {
  background: var(--gaper-surface);
  border-top-color: var(--gaper-border);
  border-bottom-color: var(--gaper-border);
}

.gaper-dark .breadcrumb-item a {
  color: var(--gaper-muted);
}

.gaper-dark .breadcrumb-item.active {
  color: var(--gaper-text);
}

.gaper-dark .breadcrumb-item + .breadcrumb-item::before {
  color: var(--gaper-muted);
}

/* --- Forms --- */
.gaper-dark .form-control,
.gaper-dark .form-select,
.gaper-dark .input-group-text {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.gaper-dark .form-control:focus,
.gaper-dark .form-select:focus {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-primary);
  color: var(--gaper-text);
  box-shadow: 0 0 0 0.2rem rgba(var(--gaper-primary-rgb), 0.15);
}

.gaper-dark .form-control::placeholder {
  color: var(--gaper-muted);
}

.gaper-dark .form-check-input {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
}

.gaper-dark .form-check-input:checked {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
}

.gaper-dark .form-label,
.gaper-dark label {
  color: var(--gaper-text);
}

/* --- Dropdowns --- */
.gaper-dark .dropdown-menu {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.gaper-dark .dropdown-item {
  color: var(--gaper-text);
}

.gaper-dark .dropdown-item:hover,
.gaper-dark .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--gaper-primary);
}

.gaper-dark .dropdown-divider {
  border-color: var(--gaper-border);
}

/* --- Tables --- */
.gaper-dark .table {
  color: var(--gaper-text);
  border-color: var(--gaper-border);
}

.gaper-dark .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.02);
}

.gaper-dark .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.04);
}

.gaper-dark .table thead {
  border-bottom-color: var(--gaper-border);
}

.gaper-dark .table thead th {
  color: var(--gaper-text);
  background-color: rgba(255, 255, 255, 0.03);
}

/* --- Buttons --- */
.gaper-dark .btn-outline-secondary {
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--gaper-muted);
  color: var(--gaper-text);
}

.gaper-dark .btn-light {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .btn-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Pagination --- */
.gaper-dark .page-link {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .page-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--gaper-border);
  color: var(--gaper-primary);
}

.gaper-dark .page-item.active .page-link {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
}

.gaper-dark .page-item.disabled .page-link {
  background-color: var(--gaper-bg);
  border-color: var(--gaper-border);
  color: var(--gaper-muted);
}

/* --- Alerts --- */
.gaper-dark .alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.gaper-dark .alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.gaper-dark .alert-warning {
  background-color: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.2);
  color: #fde047;
}

.gaper-dark .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* --- Product Card --- */
.gaper-dark .gaper-product-card {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-product-card:hover {
  border-color: var(--gaper-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.gaper-dark .gaper-product-card__name {
  color: var(--gaper-primary);
}

.gaper-dark .gaper-product-card__desc {
  color: var(--gaper-muted);
}

.gaper-dark .gaper-product-card__actions {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

/* Action buttons (circle icons) in product card */
.gaper-dark .gaper-action-btn {
  background: var(--gaper-surface);
  color: var(--gaper-text);
  border: 1px solid var(--gaper-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gaper-dark .gaper-action-btn:hover {
  background: var(--gaper-primary);
  color: #fff;
  border-color: var(--gaper-primary);
}

/* Bootstrap .btn-primary text contrast for dark mode (gold bg needs dark text) */
.gaper-dark .btn-primary {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #111;
}

.gaper-dark .btn-primary:hover {
  background-color: var(--gaper-accent);
  border-color: var(--gaper-accent);
  color: #111;
}

/* Compare total button on category/manufacturer page */
.gaper-dark #compare-total {
  color: #fff;
  background-color: transparent;
  border-color: var(--gaper-primary);
}

.gaper-dark #compare-total:hover {
  background-color: var(--gaper-primary);
  color: #111;
}

/* --- Category Sidebar --- */
.gaper-dark .gaper-category-sidebar .list-group-item {
  background-color: var(--gaper-surface);
  color: var(--gaper-text);
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-category-sidebar .list-group-item:hover,
.gaper-dark .gaper-category-sidebar .list-group-item.active {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--gaper-primary);
}

/* --- Product Page --- */
.gaper-dark .gaper-product__title {
  color: var(--gaper-text);
}

.gaper-dark .gaper-product__meta {
  color: var(--gaper-muted);
}

.gaper-dark .price-old {
  color: var(--gaper-muted);
}

/* --- Quantity buttons --- */
.gaper-dark .gaper-qty-btn {
  background: var(--gaper-surface);
  color: var(--gaper-text);
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-qty-btn:hover {
  background: var(--gaper-primary);
  color: #111;
}

.gaper-dark .gaper-qty-input {
  background: var(--gaper-surface);
  color: var(--gaper-text);
  border-left-color: var(--gaper-border);
  border-right-color: var(--gaper-border);
}

/* --- Tabs --- */
.gaper-dark .nav-tabs {
  border-color: var(--gaper-border);
}

.gaper-dark .nav-tabs .nav-link {
  color: var(--gaper-muted);
}

.gaper-dark .nav-tabs .nav-link:hover {
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .nav-tabs .nav-link.active {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border) var(--gaper-border) var(--gaper-surface);
  color: var(--gaper-primary);
}

.gaper-dark .tab-content {
  background-color: var(--gaper-surface);
  color: var(--gaper-text);
}

/* --- Gaper Tab Pills (product page) --- */
.gaper-dark .gaper-tab-pills .nav-link {
  color: var(--gaper-muted);
  background-color: transparent;
}

.gaper-dark .gaper-tab-pills .nav-link.active {
  background-color: var(--gaper-primary);
  color: #fff;
}

/* --- Gaper Tab Underline --- */
.gaper-dark .gaper-tab-underline .nav-link {
  color: var(--gaper-muted);
}

.gaper-dark .gaper-tab-underline .nav-link.active {
  color: var(--gaper-primary);
}

/* --- Mini Cart --- */
.gaper-dark .gaper-minicart__dropdown {
  background-color: var(--gaper-surface) !important;
  border-color: var(--gaper-border) !important;
}

.gaper-dark .gaper-minicart__item:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.gaper-dark .gaper-minicart__totals {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--gaper-border);
}

/* --- Quickview Modal --- */
.gaper-dark .gaper-qv-overlay .gaper-qv-content {
  background-color: var(--gaper-surface);
  color: var(--gaper-text);
}

.gaper-dark .gaper-qv-close {
  color: var(--gaper-text);
}

/* --- Cart Popup --- */
.gaper-dark .gaper-cart-popup__inner {
  background-color: var(--gaper-surface);
}

.gaper-dark .gaper-cart-popup__name {
  color: var(--gaper-text);
}

.gaper-dark .gaper-cart-popup__footer {
  border-color: var(--gaper-border);
}

/* --- Mobile Elements --- */
.gaper-dark .gaper-mobile-menu {
  background-color: var(--gaper-surface);
}

.gaper-dark .gaper-mobile-nav__link {
  color: var(--gaper-text);
}

.gaper-dark .gaper-mobile-nav__toggle {
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .gaper-submenu > li {
  border-top-color: rgba(148, 163, 184, 0.2);
}

.gaper-dark .gaper-mobile-cart {
  background-color: var(--gaper-surface);
}

.gaper-dark .gaper-mobile-cart__header,
.gaper-dark .gaper-mobile-cart__footer {
  border-color: var(--gaper-border);
}

/* --- Misc Content Areas --- */
.gaper-dark #content,
.gaper-dark #column-left,
.gaper-dark #column-right {
  color: var(--gaper-text);
}

.gaper-dark h1, .gaper-dark h2, .gaper-dark h3,
.gaper-dark h4, .gaper-dark h5, .gaper-dark h6 {
  color: var(--gaper-text);
}

.gaper-dark a {
  color: var(--gaper-primary);
}

.gaper-dark a:hover {
  color: var(--gaper-accent);
}

.gaper-dark hr {
  border-color: var(--gaper-border);
}

/* --- Well / Info boxes --- */
.gaper-dark .well,
.gaper-dark .panel,
.gaper-dark .panel-body {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

/* --- OPC / Checkout --- */
.gaper-dark .gaper-opc-section {
  background: var(--gaper-surface);
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-section__header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-section__body fieldset legend {
  border-bottom-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-method {
  background: var(--gaper-bg);
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-method:hover {
  border-color: var(--gaper-primary);
  background: rgba(var(--gaper-primary-rgb), 0.08);
}

.gaper-dark .gaper-opc-method--selected {
  border-color: var(--gaper-primary);
  background: rgba(var(--gaper-primary-rgb), 0.12);
}

.gaper-dark .gaper-opc-summary {
  background: var(--gaper-surface);
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-summary__header {
  background: var(--gaper-primary);
  color: #111;
}

.gaper-dark .gaper-opc-summary__header h3 {
  color: #111;
}

.gaper-dark .gaper-opc-order__item {
  border-bottom-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-order__totals {
  border-top-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-order__total--grand {
  border-top-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-agree {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-opc-agree .form-check-label a {
  color: var(--gaper-primary);
}

/* Radio buttons in dark OPC */
.gaper-dark .gaper-opc-section__body input[type="radio"] {
  accent-color: var(--gaper-primary);
}

.gaper-dark .gaper-opc-section__body .form-check-label {
  color: var(--gaper-text);
}

/* Confirm button dark */
.gaper-dark #checkout-payment .btn-primary,
.gaper-dark #checkout-confirm .btn-primary {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #111;
}

.gaper-dark #checkout-payment .btn-primary:hover,
.gaper-dark #checkout-confirm .btn-primary:hover {
  background-color: var(--gaper-accent);
  border-color: var(--gaper-accent);
}

/* --- Contact / Information pages --- */
.gaper-dark .card-body {
  color: var(--gaper-text);
}

/* --- Login / Account pages --- */
.gaper-dark .well {
  background-color: var(--gaper-surface);
}

/* --- Refine Search subcategory images --- */
.gaper-dark .gaper-refine-item {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
}

/* --- Shadows override for dark — make them stronger --- */
.gaper-dark {
  --gaper-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --gaper-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --gaper-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --gaper-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
  --gaper-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* --- Sticky header dark --- */
.gaper-dark .gaper-header--scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* --- Bootstrap close button invert --- */
.gaper-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Compare bar / product compare --- */
.gaper-dark .gaper-compare-bar {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
}

/* --- Category filter / Sort bar --- */
.gaper-dark .gaper-sort-bar {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
}

/* --- Image backgrounds that need dark treatment --- */
.gaper-dark .gaper-product-card__img {
  background-color: #2a2a2a;
}

/* --- Scroll to top button --- */
.gaper-dark .gaper-scroll-top {
  background-color: var(--gaper-primary);
}

/* --- Text selection --- */
.gaper-dark ::selection {
  background-color: var(--gaper-primary);
  color: #fff;
}

/* --- Nav bar override for dark --- */
.gaper-dark .gaper-nav__link {
  color: #fff;
}

.gaper-dark .gaper-nav__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.gaper-dark .gaper-nav__dropdown {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.gaper-dark .gaper-nav__dropdown a {
  color: var(--gaper-text);
}

.gaper-dark .gaper-nav__dropdown a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--gaper-primary);
}

/* --- Newsletter section --- */
.gaper-dark .gaper-newsletter .form-control {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.gaper-dark .gaper-newsletter .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* --- Countdown timer (product page) --- */
.gaper-dark .gaper-countdown {
  border-color: var(--gaper-primary);
}

.gaper-dark .gaper-countdown__items {
  background-color: var(--gaper-surface);
}

/* --- Option cards (modern style) --- */
.gaper-dark .gaper-option-card {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .gaper-option-card:hover {
  border-color: var(--gaper-muted);
}

.gaper-dark .gaper-option-card.active {
  border-color: var(--gaper-primary);
}

/* --- Wishlist / Compare icon buttons --- */
.gaper-dark .btn-wishlist,
.gaper-dark .btn-compare {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

/* --- Search bar --- */
.gaper-dark .gaper-search-bar .form-control {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

/* --- Review section --- */
.gaper-dark #review .review-item {
  border-color: var(--gaper-border);
}

/* --- Banner Module dark --- */
.gaper-dark .gaper-banner__item {
  border-color: var(--gaper-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gaper-dark .gaper-banner__item:hover {
  border-color: var(--gaper-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.gaper-dark .gaper-banner__control {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.gaper-dark .gaper-banner__control:hover {
  background: var(--gaper-primary);
}

.gaper-dark .gaper-banner__cta {
  border-color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   PRODUCT MODULES (Featured, Latest, Bestseller, Specials)
   ============================================================ */

.gaper-module {
  margin-bottom: 1.5rem;
}

.gaper-module__title {
  font-family: var(--gaper-font-heading, inherit);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gaper-heading, var(--gaper-text));
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gaper-primary);
}

/* Carousel controls */
.gaper-module .carousel {
  border: none;
  position: relative;
  box-shadow: none;
}

/* Give cards headroom so hover-lift (translateY) + box-shadow are not clipped by .carousel-inner's overflow:hidden */
.gaper-module .carousel-inner {
  padding-top: 8px;
  padding-bottom: 16px;
  margin-top: -8px;
  margin-bottom: -16px;
}

.gaper-module .carousel-item {
  box-shadow: none;
}

.gaper-module__control {
  width: 40px;
  height: 40px;
  background: var(--gaper-surface, #fff) !important;
  border: 1px solid var(--gaper-border, #e5e7eb);
  border-radius: 50%;
  opacity: 0.85;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  z-index: 2;
}

.gaper-module__control:hover {
  opacity: 1;
  background: var(--gaper-primary) !important;
  border-color: var(--gaper-primary);
}

.gaper-module__control:hover .carousel-control-prev-icon,
.gaper-module__control:hover .carousel-control-next-icon {
  filter: brightness(0);
}

.gaper-module__control.carousel-control-prev {
  left: -20px;
  right: auto;
}

.gaper-module__control.carousel-control-next {
  right: -20px;
  left: auto;
}

.gaper-module__control .carousel-control-prev-icon,
.gaper-module__control .carousel-control-next-icon {
  width: 14px;
  height: 14px;
}

/* Dark mode module overrides */
.gaper-dark .gaper-module__title {
  color: var(--gaper-text);
}

.gaper-dark .gaper-module__control {
  background: var(--gaper-surface) !important;
  border-color: var(--gaper-border);
}

.gaper-dark .gaper-module__control .carousel-control-prev-icon,
.gaper-dark .gaper-module__control .carousel-control-next-icon {
  filter: invert(1);
}

.gaper-dark .gaper-module__control:hover {
  background: var(--gaper-primary) !important;
  border-color: var(--gaper-primary);
}

.gaper-dark .gaper-module__control:hover .carousel-control-prev-icon,
.gaper-dark .gaper-module__control:hover .carousel-control-next-icon {
  filter: brightness(0);
}

/* ============================================================
   CMS / BLOG / ARTICLES
   ============================================================ */

/* --- Blog listing (cms/blog) --- */
#product-category h1,
#cms-blog h1 {
  font-family: var(--gaper-font-heading, inherit);
  color: var(--gaper-heading, var(--gaper-text));
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Article cards in listing */
#product-category .mb-3 > h2 > a,
#content .mb-3 > h2 > a {
  color: var(--gaper-primary);
  text-decoration: none;
  font-family: var(--gaper-font-heading, inherit);
  font-weight: 600;
  transition: color 0.2s ease;
}

#product-category .mb-3 > h2 > a:hover,
#content .mb-3 > h2 > a:hover {
  color: var(--gaper-accent, var(--gaper-primary));
}

/* Article meta info */
#product-category .list-inline,
#cms-blog .list-inline {
  color: var(--gaper-muted, #6b7280);
  font-size: 0.875rem;
}

#product-category .list-inline a,
#cms-blog .list-inline a {
  color: var(--gaper-primary);
}

/* Article image in listing */
#product-category .img-thumbnail,
#cms-blog .img-thumbnail {
  border-color: var(--gaper-border, #e5e7eb);
  border-radius: var(--gaper-radius, 0.5rem);
  background-color: transparent;
}

/* Refine / search section */
#product-category h3 {
  font-family: var(--gaper-font-heading, inherit);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gaper-text);
  margin-bottom: 0.75rem;
}

/* --- Blog detail (cms/blog_info) --- */
#cms-blog .description,
#cms-blog > .row > .col > div {
  line-height: 1.7;
  color: var(--gaper-text);
}

#cms-blog p a {
  color: var(--gaper-primary);
}

#cms-blog p a:hover {
  color: var(--gaper-accent, var(--gaper-primary));
}

/* Tags */
#cms-blog .text-tags a,
#cms-blog p:last-of-type a {
  color: var(--gaper-primary);
  text-decoration: none;
}

/* --- Comment section --- */
#comment-container .btn-secondary {
  border-radius: var(--gaper-radius, 0.375rem);
  transition: all 0.2s ease;
}

#comment-container .btn-secondary:hover {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #fff;
}

/* Comment cards */
#comment .border {
  border-color: var(--gaper-border, #e5e7eb) !important;
  border-radius: var(--gaper-radius, 0.5rem);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

#comment .border:hover {
  border-color: var(--gaper-primary) !important;
}

#comment .border .p-2 p:first-child {
  color: var(--gaper-muted, #6b7280);
  font-size: 0.875rem;
}

/* Reply section */
#comment .border-top {
  border-color: var(--gaper-border, #e5e7eb) !important;
}

#comment .ps-5 {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Comment modal */
#modal-comment .modal-header {
  background-color: var(--gaper-primary);
  color: #fff;
  border-bottom-color: var(--gaper-border, #e5e7eb);
}

#modal-comment .modal-header .btn-close {
  filter: brightness(0) invert(1);
}

#modal-comment .modal-footer {
  border-top-color: var(--gaper-border, #e5e7eb);
}

/* Separator */
#cms-blog hr,
#product-category hr {
  border-color: var(--gaper-border, #e5e7eb);
  opacity: 0.5;
}

/* --- Blog module widget --- */
.product-thumb .content {
  padding: 0.75rem;
}

.product-thumb .content h4 a {
  color: var(--gaper-primary);
  text-decoration: none;
  font-family: var(--gaper-font-heading, inherit);
  font-weight: 600;
}

.product-thumb .content h4 a:hover {
  color: var(--gaper-accent, var(--gaper-primary));
}

.product-thumb .content .description p {
  color: var(--gaper-muted, #6b7280);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* --- Topic module sidebar --- */
.list-group .list-group-item {
  border-color: var(--gaper-border, #e5e7eb);
  transition: all 0.2s ease;
}

.list-group .list-group-item:hover {
  color: var(--gaper-primary);
  background-color: rgba(var(--gaper-primary-rgb, 79, 70, 229), 0.05);
}

.list-group .list-group-item.active {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #fff;
}

/* ============================================================
   CMS DARK MODE
   ============================================================ */

/* --- General dark borders --- */
.gaper-dark .border,
.gaper-dark .border-top,
.gaper-dark .border-bottom,
.gaper-dark .border-start,
.gaper-dark .border-end {
  border-color: var(--gaper-border) !important;
}

.gaper-dark hr {
  border-color: var(--gaper-border);
  opacity: 0.3;
}

.gaper-dark .img-thumbnail {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
}

/* --- Dark btn-secondary --- */
.gaper-dark .btn-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .btn-secondary:hover {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #111;
}

/* --- Dark blog listing --- */
.gaper-dark #product-category .list-inline,
.gaper-dark #cms-blog .list-inline {
  color: var(--gaper-muted);
}

.gaper-dark #product-category .img-thumbnail,
.gaper-dark #cms-blog .img-thumbnail {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
}

/* --- Dark blog detail --- */
.gaper-dark #cms-blog .description,
.gaper-dark #cms-blog > .row > .col > div {
  color: var(--gaper-text);
}

/* --- Dark comment section --- */
.gaper-dark #comment .border {
  border-color: var(--gaper-border) !important;
  background-color: var(--gaper-surface);
}

.gaper-dark #comment .border:hover {
  border-color: var(--gaper-primary) !important;
}

.gaper-dark #comment .border .p-2 p:first-child {
  color: var(--gaper-muted);
}

.gaper-dark #comment .border .p-2 p:nth-child(2) {
  color: var(--gaper-text);
}

.gaper-dark #comment .ps-5 {
  background-color: rgba(255, 255, 255, 0.03);
}

.gaper-dark #comment .border-top {
  border-color: var(--gaper-border) !important;
}

/* Dark comment modal */
.gaper-dark #modal-comment .modal-header {
  background-color: var(--gaper-primary);
  color: #111;
  border-bottom-color: var(--gaper-border);
}

.gaper-dark #modal-comment .modal-footer {
  background-color: var(--gaper-surface);
  border-top-color: var(--gaper-border);
}

/* --- Dark blog module widget (.product-thumb) --- */
.gaper-dark .product-thumb {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  border: 1px solid var(--gaper-border);
  border-radius: var(--gaper-radius, 0.5rem);
  overflow: hidden;
}

.gaper-dark .product-thumb:hover {
  border-color: var(--gaper-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.gaper-dark .product-thumb .content h4 a {
  color: var(--gaper-primary);
}

.gaper-dark .product-thumb .content .description p {
  color: var(--gaper-muted);
}

/* --- Dark topic module sidebar --- */
.gaper-dark .list-group .list-group-item {
  background-color: var(--gaper-surface);
  border-color: var(--gaper-border);
  color: var(--gaper-text);
}

.gaper-dark .list-group .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--gaper-primary);
}

.gaper-dark .list-group .list-group-item.active {
  background-color: var(--gaper-primary);
  border-color: var(--gaper-primary);
  color: #111;
}

/* ============================================================
   GAPER THEMOD — Featured Categories
   ============================================================ */
.gaper-fcat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: var(--gaper-card-bg, #fff);
  border: 1px solid var(--gaper-border, rgba(0, 0, 0, .08));
  border-radius: var(--gaper-radius, .5rem);
  padding: .75rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
  perspective: 1000px;
}
.gaper-fcat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--gaper-shadow-md, 0 6px 18px rgba(0, 0, 0, .08));
  border-color: var(--gaper-primary);
  color: var(--gaper-primary);
}
.gaper-fcat-card__media {
  position: relative;
  width: 100%;
  max-width: calc(var(--gaper-fcat-w, 200) * 1px);
  aspect-ratio: var(--gaper-fcat-w, 200) / var(--gaper-fcat-h, 200);
  margin-bottom: .65rem;
  border-radius: var(--gaper-radius-sm, .25rem);
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.gaper-fcat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.gaper-fcat-card__img--front {
  transform: rotateY(0deg);
}
.gaper-fcat-card__img--back {
  transform: rotateY(180deg);
}
.gaper-fcat-card--flip:hover .gaper-fcat-card__media {
  transform: rotateY(180deg);
}
.gaper-fcat-card:not(.gaper-fcat-card--flip) .gaper-fcat-card__img--front {
  transition: transform .5s ease;
}
.gaper-fcat-card:not(.gaper-fcat-card--flip):hover .gaper-fcat-card__img--front {
  transform: scale(1.06);
}
.gaper-fcat-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .15rem;
}
.gaper-fcat-card__name {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
}
.gaper-fcat-card__subtitle {
  font-size: .8rem;
  color: var(--gaper-muted, #6c757d);
  line-height: 1.2;
}

/* ============================================================
   GAPER THEMOD — Featured Manufacturers
   ============================================================ */
.gaper-fmfr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: var(--gaper-card-bg, #fff);
  border: 1px solid var(--gaper-border, rgba(0, 0, 0, .08));
  border-radius: var(--gaper-radius, .5rem);
  padding: .75rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
  perspective: 1000px;
}
.gaper-fmfr-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--gaper-shadow-md, 0 6px 18px rgba(0, 0, 0, .08));
  border-color: var(--gaper-primary);
  color: var(--gaper-primary);
}
.gaper-fmfr-card__media {
  position: relative;
  width: 100%;
  max-width: calc(var(--gaper-fmfr-w, 200) * 1px);
  aspect-ratio: var(--gaper-fmfr-w, 200) / var(--gaper-fmfr-h, 200);
  margin-bottom: .65rem;
  border-radius: var(--gaper-radius-sm, .25rem);
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.gaper-fmfr-card__img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.gaper-fmfr-card__img--front {
  transform: rotateY(0deg);
}
.gaper-fmfr-card__img--back {
  transform: rotateY(180deg);
}
.gaper-fmfr-card--flip:hover .gaper-fmfr-card__media {
  transform: rotateY(180deg);
}
.gaper-fmfr-card:not(.gaper-fmfr-card--flip) .gaper-fmfr-card__img--front {
  transition: transform .5s ease;
}
.gaper-fmfr-card:not(.gaper-fmfr-card--flip):hover .gaper-fmfr-card__img--front {
  transform: scale(1.06);
}
.gaper-fmfr-card__name {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
  text-align: center;
}

/* ============================================================
   GAPER THEMOD — Pill Tabs (Product by Category / Manufacturer)
   ============================================================ */
.gaper-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .35rem;
  background: var(--gaper-muted-bg, #f1f3f5);
  border-radius: 999px;
  border: 0;
}
.gaper-pills .nav-item {
  margin: 0;
}
.gaper-pills__link {
  border: 0 !important;
  background: transparent;
  color: var(--gaper-text, #222);
  font-weight: 600;
  font-size: .95rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  line-height: 1.2;
}
.gaper-pills__link:hover {
  color: var(--gaper-primary);
  background: rgba(0, 0, 0, .03);
}
.gaper-pills__link.active {
  background: var(--gaper-primary);
  color: #fff;
  box-shadow: var(--gaper-shadow-sm, 0 2px 6px rgba(0, 0, 0, .1));
}
.gaper-pills__link.active:hover {
  color: #fff;
}
.gaper-dark .gaper-pills {
  background: rgba(255, 255, 255, .06);
}
.gaper-dark .gaper-pills__link {
  color: #e6e6e6;
}
.gaper-dark .gaper-pills__link:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--gaper-primary);
}
.gaper-dark .gaper-pills__link.active {
  color: #111;
}

/* ============================================================
   Gallery Images module
   ============================================================ */
.gaper-gal-card {
  display: block;
  border-radius: var(--gaper-radius, 6px);
  overflow: hidden;
  background: var(--gaper-card-bg, #fff);
  box-shadow: var(--gaper-shadow-sm, 0 2px 6px rgba(0, 0, 0, .06));
  transition: transform .3s ease, box-shadow .3s ease;
}
.gaper-gal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gaper-shadow-md, 0 8px 20px rgba(0, 0, 0, .12));
}
.gaper-gal-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  aspect-ratio: var(--gaper-gal-w, 200) / var(--gaper-gal-h, 200);
  overflow: hidden;
  cursor: zoom-in;
}
.gaper-gal-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .3s ease;
}
.gaper-gal-card:hover .gaper-gal-card__img {
  transform: scale(1.05);
  opacity: .85;
}
.gaper-gal-card__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--gaper-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.gaper-gal-card:hover .gaper-gal-card__zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.gaper-gal-card__body {
  padding: .75rem 1rem;
}
.gaper-gal-card__title {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--gaper-text, #222);
  text-decoration: none;
  transition: color .2s ease;
}
a.gaper-gal-card__title:hover {
  color: var(--gaper-primary);
}
.gaper-gal-modal .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.gaper-gal-modal__img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: var(--gaper-radius, 6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.gaper-gal-modal__caption {
  margin-top: .75rem;
  color: #fff;
  text-align: center;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.gaper-gal-modal__close {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 2;
  background-color: #fff;
  border-radius: 50%;
  padding: .5rem;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

/* ============================================================
   Gallery Videos module
   ============================================================ */
.gaper-vid-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--gaper-card-bg, #fff);
  border-radius: var(--gaper-radius, 6px);
  overflow: hidden;
  text-align: left;
  box-shadow: var(--gaper-shadow-sm, 0 2px 6px rgba(0, 0, 0, .06));
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.gaper-vid-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gaper-shadow-md, 0 8px 20px rgba(0, 0, 0, .12));
}
.gaper-vid-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--gaper-vid-w, 320) / var(--gaper-vid-h, 180);
  overflow: hidden;
  background: #000;
}
.gaper-vid-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .3s ease;
}
.gaper-vid-card:hover .gaper-vid-card__img {
  transform: scale(1.05);
  opacity: .85;
}
.gaper-vid-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--gaper-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding-left: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.gaper-vid-card:hover .gaper-vid-card__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--gaper-primary);
  color: #fff;
}
.gaper-vid-card__body {
  padding: .75rem 1rem;
}
.gaper-vid-card__title {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--gaper-text, #222);
  display: block;
}
.gaper-dark .gaper-gal-card,
.gaper-dark .gaper-vid-card {
  background: var(--gaper-card-bg, #1e1e1e);
}
.gaper-dark .gaper-gal-card__title,
.gaper-dark .gaper-vid-card__title {
  color: #e6e6e6;
}
.gaper-vid-modal .modal-content {
  background: #000;
  color: #fff;
  border: 0;
}
.gaper-vid-modal .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gaper-vid-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================
   Mega Menu (frontend)
   ============================================================ */
.gaper-mmenu-nav .gaper-mmenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.gaper-mmenu-nav .gaper-mmenu-item {
  position: relative;
}
.gaper-mmenu-nav .gaper-mmenu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gaper-mmenu-icon {
  font-size: .9em;
  line-height: 1;
}
.gaper-mmenu-icon--left { margin-right: 2px; }
.gaper-mmenu-icon--right { margin-left: 2px; }

/* Badges */
.gaper-mmenu-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 999px;
  color: #fff;
  background: var(--gaper-primary, #2563eb);
  white-space: nowrap;
}
.gaper-mmenu-badge--primary   { background: var(--gaper-primary, #2563eb); }
.gaper-mmenu-badge--success   { background: var(--gaper-success, #16a34a); }
.gaper-mmenu-badge--danger    { background: var(--gaper-danger, #dc2626); }
.gaper-mmenu-badge--warning   { background: var(--gaper-warning, #f59e0b); color: #1f2937; }
.gaper-mmenu-badge--info      { background: var(--gaper-info, #0ea5e9); }
.gaper-mmenu-badge--dark      { background: #1f2937; }
.gaper-mmenu-badge--light     { background: #e5e7eb; color: #1f2937; }
.gaper-mmenu-badge--secondary { background: #6b7280; }

/* Heading + Divider items */
.gaper-mmenu-heading {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gaper-muted, #6b7280);
  cursor: default;
}
.gaper-mmenu-divider {
  width: 1px;
  margin: 10px 6px;
  background: rgba(0, 0, 0, .1);
}

/* Simple Dropdown */
.gaper-mmenu-nav { --mm-speed: .22s; }
.gaper-mmenu-nav--speed-fast { --mm-speed: .12s; }
.gaper-mmenu-nav--speed-normal { --mm-speed: .22s; }
.gaper-mmenu-nav--speed-slow { --mm-speed: .36s; }

.gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 220px;
  padding: 6px 0;
  margin: 0;
  background: var(--gaper-nav-dropdown-bg, #fff);
  color: var(--gaper-nav-dropdown-color, #1f2937);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--gaper-radius, 8px);
  box-shadow: var(--gaper-shadow-lg, 0 12px 24px rgba(0, 0, 0, .12));
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transform-origin: top center;
  transition: opacity var(--mm-speed) ease, visibility var(--mm-speed), transform var(--mm-speed) ease;
  pointer-events: none;
}

/* Animation variants — initial state */
.gaper-mmenu-nav--anim-fade .gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown { transform: none; }
.gaper-mmenu-nav--anim-slide .gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown { transform: translateY(-10px); }
.gaper-mmenu-nav--anim-zoom .gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown { transform: scale(.94); }
.gaper-mmenu-nav--anim-none .gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown { transform: none; transition: none; }

/* Hover/focus trigger */
.gaper-mmenu-nav--trigger-hover .gaper-mmenu-item--dropdown:hover > .gaper-mmenu-dropdown,
.gaper-mmenu-nav--trigger-hover .gaper-mmenu-item--dropdown:focus-within > .gaper-mmenu-dropdown,
.gaper-mmenu-item--dropdown.is-open > .gaper-mmenu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* Fallback (no class on nav yet) for backward compatibility */
.gaper-mmenu-nav:not([data-mm-trigger]) .gaper-mmenu-item--dropdown:hover > .gaper-mmenu-dropdown,
.gaper-mmenu-nav:not([data-mm-trigger]) .gaper-mmenu-item--dropdown:focus-within > .gaper-mmenu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Edge overflow: flip dropdown to the right edge of the trigger item */
.gaper-mmenu-item--dropdown.gaper-mmenu-item--flip-left > .gaper-mmenu-dropdown {
  left: auto;
  right: 0;
}

/* Active item highlight */
.gaper-mmenu-nav .gaper-mmenu-item--active > .gaper-mmenu-link,
.gaper-mmenu-nav .gaper-mmenu-item--child-active > .gaper-mmenu-link {
  color: var(--gaper-primary, #2563eb);
}
.gaper-mmenu-nav .gaper-mmenu-item--active > .gaper-mmenu-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--gaper-primary, #2563eb);
  border-radius: 2px;
}
.gaper-mmenu-nav .gaper-mmenu-item { position: relative; }
.gaper-mmenu-nav .gaper-mmenu-link { position: relative; }
.gaper-mmenu-sub-link--active {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 10%, transparent) !important;
  color: var(--gaper-primary, #2563eb) !important;
  font-weight: 600;
}
.gaper-mmenu-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gaper-mmenu-sub > li > .gaper-mmenu-sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: inherit;
  text-decoration: none;
  font-size: .92rem;
  transition: background .15s ease, color .15s ease;
}
.gaper-mmenu-sub > li > .gaper-mmenu-sub-link:hover,
.gaper-mmenu-sub > li > .gaper-mmenu-sub-link:focus {
  background: var(--gaper-nav-dropdown-hover-bg, rgba(37, 99, 235, .08));
  color: var(--gaper-primary, #2563eb);
  text-decoration: none;
}
.gaper-mmenu-sub-item--has-children > .gaper-mmenu-sub-link {
  justify-content: space-between;
}
.gaper-mmenu-sub-item--has-children {
  position: relative;
}
.gaper-mmenu-sub-arrow {
  margin-left: auto;
  font-size: .72rem;
  opacity: .7;
}
.gaper-mmenu-sub--lvl-2,
.gaper-mmenu-sub--lvl-3 {
  display: none;
  position: absolute;
  top: -6px;
  left: calc(100% - 4px);
  min-width: 220px;
  margin: 0;
  padding: 6px 0;
  background: var(--gaper-nav-dropdown-bg, #fff);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--gaper-radius, 8px);
  box-shadow: var(--gaper-shadow-lg, 0 12px 24px rgba(0, 0, 0, .12));
  z-index: 20;
}
.gaper-mmenu-sub-item--has-children:hover > .gaper-mmenu-sub--lvl-2,
.gaper-mmenu-sub-item--has-children:focus-within > .gaper-mmenu-sub--lvl-2,
.gaper-mmenu-sub-item--has-children:hover > .gaper-mmenu-sub--lvl-3,
.gaper-mmenu-sub-item--has-children:focus-within > .gaper-mmenu-sub--lvl-3 {
  display: block;
}
.gaper-mmenu-sub--lvl-3 > li > .gaper-mmenu-sub-link {
  font-size: .86rem;
}
.gaper-mmenu-sub-heading {
  padding: 10px 16px 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gaper-muted, #6b7280);
}
.gaper-mmenu-sub-divider {
  height: 1px;
  margin: 6px 0;
  background: rgba(0, 0, 0, .08);
}

/* Mega Panel */
.gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown--mega {
  min-width: 520px;
  padding: 18px 20px;
}
.gaper-mmenu-dropdown--mega.gaper-mmenu-dropdown--cols-2 { min-width: 480px; }
.gaper-mmenu-dropdown--mega.gaper-mmenu-dropdown--cols-3 { min-width: 680px; }
.gaper-mmenu-dropdown--mega.gaper-mmenu-dropdown--cols-4 { min-width: 860px; }
/* Container-width: anchor panel to nav instead of the item */
.gaper-mmenu-nav .gaper-mmenu-item--dropdown:has(.gaper-mmenu-dropdown--w-container) {
  position: static;
}
.gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown--w-container {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
}
.gaper-mmenu-mega-grid {
  display: grid;
  grid-template-columns: repeat(var(--gaper-mmenu-cols, 3), 1fr);
  gap: 10px 28px;
}
.gaper-mmenu-dropdown--cols-2 .gaper-mmenu-mega-grid { grid-template-columns: repeat(2, 1fr); }
.gaper-mmenu-dropdown--cols-3 .gaper-mmenu-mega-grid { grid-template-columns: repeat(3, 1fr); }
.gaper-mmenu-dropdown--cols-4 .gaper-mmenu-mega-grid { grid-template-columns: repeat(4, 1fr); }
.gaper-mmenu-mega-col > .gaper-mmenu-sub > li > .gaper-mmenu-sub-link {
  padding: 6px 4px;
  border-radius: 6px;
}
.gaper-mmenu-mega-col .gaper-mmenu-sub-heading {
  padding: 4px 4px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Image Panel */
.gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown--image {
  min-width: 560px;
  padding: 18px 20px;
}
.gaper-mmenu-image-panel {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.gaper-mmenu-dropdown--imgpos-right .gaper-mmenu-image-panel {
  flex-direction: row-reverse;
}
.gaper-mmenu-image-side {
  flex: 0 0 260px;
  max-width: 260px;
}
.gaper-mmenu-image-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--gaper-radius, 8px);
  overflow: hidden;
}
.gaper-mmenu-image-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--gaper-radius, 8px);
  transition: transform .3s ease;
}
.gaper-mmenu-image-link:hover .gaper-mmenu-image-img {
  transform: scale(1.03);
}
.gaper-mmenu-image-caption {
  margin-top: 10px;
}
.gaper-mmenu-image-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gaper-heading, #111827);
  line-height: 1.3;
}
.gaper-mmenu-image-desc {
  margin-top: 4px;
  font-size: .85rem;
  color: var(--gaper-muted, #6b7280);
  line-height: 1.45;
}
.gaper-mmenu-image-links {
  flex: 1 1 auto;
  min-width: 0;
}

/* Featured Products Panel */
.gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown--featured {
  min-width: 560px;
  padding: 18px 20px;
}
.gaper-mmenu-dropdown--featured.gaper-mmenu-dropdown--cols-2 { min-width: 420px; }
.gaper-mmenu-dropdown--featured.gaper-mmenu-dropdown--cols-3 { min-width: 600px; }
.gaper-mmenu-dropdown--featured.gaper-mmenu-dropdown--cols-4 { min-width: 780px; }
.gaper-mmenu-feat-grid {
  display: grid;
  gap: 16px;
}
.gaper-mmenu-dropdown--featured.gaper-mmenu-dropdown--cols-2 .gaper-mmenu-feat-grid { grid-template-columns: repeat(2, 1fr); }
.gaper-mmenu-dropdown--featured.gaper-mmenu-dropdown--cols-3 .gaper-mmenu-feat-grid { grid-template-columns: repeat(3, 1fr); }
.gaper-mmenu-dropdown--featured.gaper-mmenu-dropdown--cols-4 .gaper-mmenu-feat-grid { grid-template-columns: repeat(4, 1fr); }

.gaper-mmenu-feat-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--gaper-radius, 8px);
  transition: background .15s ease, box-shadow .15s ease;
}
.gaper-mmenu-feat-card:hover {
  background: var(--gaper-nav-dropdown-hover-bg, rgba(37, 99, 235, .06));
  box-shadow: var(--gaper-shadow-sm, 0 2px 8px rgba(0, 0, 0, .06));
  text-decoration: none;
  color: inherit;
}
.gaper-mmenu-feat-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--gaper-radius-sm, 6px);
  overflow: hidden;
  background: #f8fafc;
  margin-bottom: 8px;
}
.gaper-mmenu-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.gaper-mmenu-feat-card:hover .gaper-mmenu-feat-img img {
  transform: scale(1.05);
}
.gaper-mmenu-feat-name {
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gaper-heading, #111827);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gaper-mmenu-feat-price {
  margin-top: 4px;
  font-size: .85rem;
  line-height: 1.2;
}
.gaper-mmenu-feat-price-regular {
  font-weight: 700;
  color: var(--gaper-primary, #2563eb);
}
.gaper-mmenu-feat-price-special {
  font-weight: 700;
  color: var(--gaper-danger, #dc2626);
  margin-right: 6px;
}
.gaper-mmenu-feat-price-old {
  color: var(--gaper-muted, #9ca3af);
  text-decoration: line-through;
  font-size: .78rem;
}

/* Brands Panel */
.gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown--brands {
  min-width: 480px;
  padding: 16px 20px;
}
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-3 { min-width: 420px; }
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-4 { min-width: 520px; }
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-5 { min-width: 640px; }
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-6 { min-width: 760px; }
.gaper-mmenu-brands-grid {
  display: grid;
  gap: 10px;
}
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-3 .gaper-mmenu-brands-grid { grid-template-columns: repeat(3, 1fr); }
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-4 .gaper-mmenu-brands-grid { grid-template-columns: repeat(4, 1fr); }
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-5 .gaper-mmenu-brands-grid { grid-template-columns: repeat(5, 1fr); }
.gaper-mmenu-dropdown--brands.gaper-mmenu-dropdown--bcols-6 .gaper-mmenu-brands-grid { grid-template-columns: repeat(6, 1fr); }

.gaper-mmenu-brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--gaper-radius-sm, 6px);
  background: #fff;
  text-decoration: none;
  color: var(--gaper-heading, #111827);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gaper-mmenu-brand-card:hover {
  border-color: var(--gaper-primary, #2563eb);
  box-shadow: var(--gaper-shadow-sm, 0 2px 8px rgba(0, 0, 0, .08));
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--gaper-primary, #2563eb);
}
.gaper-mmenu-brand-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter .2s ease;
}
.gaper-mmenu-brand-card:hover .gaper-mmenu-brand-img {
  filter: grayscale(0);
}
.gaper-mmenu-brand-name {
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Edge-safe clipping for wide dropdowns */
.gaper-mmenu-nav {
  position: relative;
}
.gaper-mmenu-list {
  position: static;
}

/* Visibility helpers */
.gaper-mmenu-desktop-only { }
.gaper-mmenu-mobile-only { display: none !important; }
@media (max-width: 991.98px) {
  .gaper-mmenu-desktop-only { display: none !important; }
  .gaper-mmenu-mobile-only { display: block !important; }
}

/* Dark Theme support for Mega Menu dropdowns */
.gaper-dark .gaper-mmenu-item--dropdown > .gaper-mmenu-dropdown {
  background: var(--gaper-surface, #111827);
  color: var(--gaper-text, #e5e7eb);
  border-color: var(--gaper-border, #334155);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
}
.gaper-dark .gaper-mmenu-sub > li > .gaper-mmenu-sub-link {
  color: var(--gaper-text, #e5e7eb);
}
.gaper-dark .gaper-mmenu-sub > li > .gaper-mmenu-sub-link:hover,
.gaper-dark .gaper-mmenu-sub > li > .gaper-mmenu-sub-link:focus {
  background: rgba(255, 255, 255, .08);
  color: var(--gaper-primary, #60a5fa);
}
.gaper-dark .gaper-mmenu-sub-heading {
  color: var(--gaper-muted, #94a3b8);
}
.gaper-dark .gaper-mmenu-sub-divider {
  background: var(--gaper-border, #334155);
}
.gaper-dark .gaper-mmenu-sub--lvl-2,
.gaper-dark .gaper-mmenu-sub--lvl-3 {
  background: var(--gaper-surface, #111827);
  border-color: var(--gaper-border, #334155);
}
.gaper-dark .gaper-mmenu-mega-col .gaper-mmenu-sub-heading {
  border-bottom-color: var(--gaper-border, #334155);
}
.gaper-dark .gaper-mmenu-image-title,
.gaper-dark .gaper-mmenu-feat-name,
.gaper-dark .gaper-mmenu-brand-name {
  color: var(--gaper-text, #e5e7eb);
}
.gaper-dark .gaper-mmenu-image-desc {
  color: var(--gaper-muted, #94a3b8);
}
.gaper-dark .gaper-mmenu-feat-img {
  background: rgba(255, 255, 255, .04);
}
.gaper-dark .gaper-mmenu-brand-card {
  background: rgba(255, 255, 255, .02);
  border-color: var(--gaper-border, #334155);
  color: var(--gaper-text, #e5e7eb);
}
.gaper-dark .gaper-mmenu-brand-card:hover {
  border-color: var(--gaper-primary, #60a5fa);
  color: var(--gaper-primary, #60a5fa);
}

/* ============================================================
   SMART SEARCH (Fase 1)
   ============================================================ */
.gaper-ss-wrap {
  position: relative;
  width: 100%;
}
.gaper-ss-form {
  position: relative;
  flex-wrap: nowrap !important;
}
.gaper-ss-scope {
  flex: 0 0 146px;
  min-width: 146px;
  max-width: 188px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 1px solid #d7dee8 !important;
  font-size: .9rem;
  padding-right: 30px !important;
  line-height: 1.2;
}
/* Wrapper around input — holds absolute-positioned kbd/clear so Bootstrap input-group flex doesn't wrap them */
.gaper-ss-input-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}
.gaper-ss-input {
  padding-right: 124px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  width: 100%;
}
/* Kbd hint (Ctrl+K) */
.gaper-ss-kbd {
  position: absolute;
  right: 82px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: none;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  color: #64748b;
}
.gaper-ss-kbd.d-md-inline-flex { display: none !important; }
@media (min-width: 768px) {
  .gaper-ss-kbd.d-md-inline-flex { display: inline-flex !important; }
}
.gaper-ss-kbd kbd {
  padding: 2px 6px;
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: .7rem;
  font-family: inherit;
  line-height: 1;
  box-shadow: none;
}
.gaper-ss-kbd-sep { color: #94a3b8; font-size: .7rem; }

/* Clear button (X) */
.gaper-ss-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #64748b;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.gaper-ss-clear:hover {
  background: #f1f5f9;
  color: #334155;
}
.gaper-ss-wrap.gaper-ss-has-value .gaper-ss-clear { display: inline-flex; }
.gaper-ss-wrap.gaper-ss-has-value .gaper-ss-kbd { display: none !important; }
.gaper-ss-wrap.gaper-ss-no-voice .gaper-ss-input { padding-right: 88px !important; }
.gaper-ss-wrap.gaper-ss-no-voice .gaper-ss-kbd { right: 46px; }
.gaper-ss-voice {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gaper-ss-voice:hover { background: #f1f5f9; color: #334155; }
.gaper-ss-voice.is-listening { color: #ef4444; background: #fee2e2; }
.gaper-ss-submit {
  flex: 0 0 auto;
}

/* Hidden by default; only shown in mobile fullscreen mode */
.gaper-ss-fs-close {
  display: none;
}

/* Dropdown */
.gaper-ss-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1040;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  background: #fff;
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--gaper-radius, 10px);
  box-shadow: var(--gaper-shadow-lg, 0 12px 32px rgba(0, 0, 0, .14));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.gaper-ss-wrap.gaper-ss-open .gaper-ss-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Group header */
.gaper-ss-group { padding: 6px 0; }
.gaper-ss-group + .gaper-ss-group { border-top: 1px solid #f1f5f9; }
.gaper-ss-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
}
.gaper-ss-group-header .gaper-ss-group-count {
  font-weight: 500;
  color: #94a3b8;
}

/* Result item base */
.gaper-ss-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}
.gaper-ss-item:hover,
.gaper-ss-item.is-active {
  background: #f8fafc;
  color: inherit;
}
.gaper-ss-item mark {
  background: color-mix(in srgb, var(--gaper-primary, #2563eb) 20%, transparent);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* Product item */
.gaper-ss-product__thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: #f8fafc;
  object-fit: cover;
  border: 1px solid #f1f5f9;
}
.gaper-ss-product__body {
  flex: 1;
  min-width: 0;
}
.gaper-ss-product__name {
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gaper-ss-product__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: .82rem;
}
.gaper-ss-product__price {
  font-weight: 600;
  color: var(--gaper-primary, #2563eb);
}
.gaper-ss-product__price-old {
  color: #94a3b8;
  text-decoration: line-through;
  font-size: .78rem;
}
.gaper-ss-product__rating {
  color: #f59e0b;
  font-size: .78rem;
  letter-spacing: .04em;
}
.gaper-ss-product__rating .fa-star-o,
.gaper-ss-product__rating .empty { color: #e2e8f0; }

/* Badges */
.gaper-ss-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.4;
}
.gaper-ss-badge--new { background: #0ea5e9; color: #fff; }
.gaper-ss-badge--sale { background: #ef4444; color: #fff; }
.gaper-ss-badge--oos { background: #64748b; color: #fff; }

/* Category / brand / info items */
.gaper-ss-mini-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: .9rem;
}
.gaper-ss-mini-thumb {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #f1f5f9;
  padding: 2px;
}
.gaper-ss-mini-name {
  font-size: .9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gaper-ss-mini-path {
  font-size: .76rem;
  color: #94a3b8;
  margin-top: 1px;
}

/* View all footer */
.gaper-ss-footer {
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
  background: #f8fafc;
  border-radius: 0 0 var(--gaper-radius, 10px) var(--gaper-radius, 10px);
  position: sticky;
  bottom: 0;
}
.gaper-ss-footer a {
  color: var(--gaper-primary, #2563eb);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.gaper-ss-footer a:hover { text-decoration: underline; }

/* Empty state */
.gaper-ss-empty-section { padding: 10px 14px; }
.gaper-ss-empty-section + .gaper-ss-empty-section { border-top: 1px solid #f1f5f9; }
.gaper-ss-empty-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 8px;
}
.gaper-ss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gaper-ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: .82rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.gaper-ss-chip:hover {
  background: var(--gaper-primary, #2563eb);
  color: #fff;
}
.gaper-ss-chip-remove {
  opacity: .6;
  margin-left: 2px;
  font-size: .7rem;
}
.gaper-ss-chip-remove:hover { opacity: 1; }

/* No results */
.gaper-ss-noresult {
  padding: 22px 14px;
  text-align: center;
  color: #64748b;
}
.gaper-ss-noresult__icon {
  font-size: 2rem;
  color: #cbd5e1;
  margin-bottom: 8px;
}
.gaper-ss-noresult__title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #334155;
}
.gaper-ss-didyoumean {
  margin: 0 0 6px;
  font-size: .85rem;
  color: #475569;
}
.gaper-ss-didyoumean a {
  color: var(--gaper-primary, #2563eb);
  font-weight: 600;
  text-decoration: none;
}
.gaper-ss-didyoumean a:hover {
  text-decoration: underline;
}

/* Skeleton loading */
.gaper-ss-skeleton {
  padding: 6px 0;
}
.gaper-ss-skel-row {
  display: flex;
  gap: 10px;
  padding: 8px 14px;
  align-items: center;
}
.gaper-ss-skel-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.gaper-ss-skel-lines { flex: 1; }
.gaper-ss-skel-line {
  height: 10px;
  border-radius: 3px;
  margin-bottom: 6px;
}
.gaper-ss-skel-line:last-child { width: 60%; margin-bottom: 0; }
.gaper-ss-skel-thumb,
.gaper-ss-skel-line {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: gaper-ss-shimmer 1.3s infinite;
}
@keyframes gaper-ss-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dark Theme support for Smart Search dropdown */
.gaper-dark .gaper-ss-dropdown {
  background: var(--gaper-surface, #111827);
  color: var(--gaper-text, #e5e7eb);
  border-color: var(--gaper-border, #334155);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}
.gaper-dark .gaper-ss-group + .gaper-ss-group,
.gaper-dark .gaper-ss-empty-section + .gaper-ss-empty-section,
.gaper-dark .gaper-ss-footer {
  border-top-color: var(--gaper-border, #334155);
}
.gaper-dark .gaper-ss-group-header {
  color: var(--gaper-muted, #94a3b8);
}
.gaper-dark .gaper-ss-group-header .gaper-ss-group-count,
.gaper-dark .gaper-ss-mini-path {
  color: #8ea0b7;
}
.gaper-dark .gaper-ss-item:hover,
.gaper-dark .gaper-ss-item.is-active {
  background: rgba(255, 255, 255, .06);
}
.gaper-dark .gaper-ss-product__thumb {
  background: rgba(255, 255, 255, .04);
  border-color: var(--gaper-border, #334155);
}
.gaper-dark .gaper-ss-product__price-old {
  color: #93a4bb;
}
.gaper-dark .gaper-ss-product__rating .fa-star-o,
.gaper-dark .gaper-ss-product__rating .empty {
  color: #475569;
}
.gaper-dark .gaper-ss-mini-icon {
  background: rgba(255, 255, 255, .06);
  color: #a9b7ca;
}
.gaper-dark .gaper-ss-mini-thumb {
  background: rgba(255, 255, 255, .03);
  border-color: var(--gaper-border, #334155);
}
.gaper-dark .gaper-ss-footer {
  background: rgba(255, 255, 255, .02);
}
.gaper-dark .gaper-ss-empty-title,
.gaper-dark .gaper-ss-noresult {
  color: var(--gaper-muted, #94a3b8);
}
.gaper-dark .gaper-ss-noresult__icon {
  color: #5b6b7f;
}
.gaper-dark .gaper-ss-noresult__title {
  color: var(--gaper-text, #e5e7eb);
}
.gaper-dark .gaper-ss-didyoumean {
  color: #a4b2c5;
}
.gaper-dark .gaper-ss-chip {
  background: rgba(255, 255, 255, .06);
  color: var(--gaper-text, #e5e7eb);
}
.gaper-dark .gaper-ss-chip:hover {
  background: var(--gaper-primary, #2563eb);
  color: #fff;
}

/* Mobile full-screen overlay */
@media (max-width: 767.98px) {
  .gaper-ss-scope {
    flex-basis: 118px;
    min-width: 118px;
    max-width: 126px;
    font-size: .82rem;
  }
  .gaper-ss-wrap.gaper-ss-fs-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: #fff;
    padding: 12px;
    display: flex;
    flex-direction: column;
  }
  .gaper-ss-wrap.gaper-ss-fs-active .gaper-ss-form {
    flex: 0 0 auto;
    margin-right: 0;
  }
  .gaper-ss-wrap.gaper-ss-fs-active .gaper-ss-dropdown {
    position: static;
    max-height: none;
    flex: 1;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin-top: 12px;
  }
  .gaper-ss-fs-close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1090;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #f1f5f9;
    color: #334155;
    display: none;
  }
  .gaper-ss-wrap.gaper-ss-fs-active .gaper-ss-fs-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    align-self: flex-end;
    margin: 0 0 8px 0;
    z-index: auto;
  }
  .gaper-ss-wrap.gaper-ss-fs-active .gaper-ss-submit { min-width: 44px; padding-left: 12px; padding-right: 12px; }
  .gaper-ss-wrap.gaper-ss-fs-active .gaper-ss-input { padding-right: 56px; }
  .gaper-ss-wrap.gaper-ss-fs-active .gaper-ss-scope { max-width: 124px; font-size: .82rem; }
  .gaper-ss-wrap.gaper-ss-fs-active .gaper-ss-voice { right: 44px; }
  .gaper-ss-wrap.gaper-ss-fs-active.gaper-ss-no-voice .gaper-ss-input { padding-right: 56px !important; }
  body.gaper-ss-fs-lock { overflow: hidden; }
}

/* ============================================================
   END OF GAPER THEME CSS
   ============================================================ */