/* ============================================================
   STAF GROS — catalogue.css  v3.1.1
   Brand: red #e63128  ·  dark #0d1b2a
   ============================================================ */

/* ── Design tokens ────────────────────────────────────────── */
/* Scoped CSS variables — only inside plugin elements, NOT global :root */
.sg-catalogue,
.sg-shop,
.sg-filters,
.sg-sidebar,
.sg-main,
.sg-breadcrumb,
.sg-catnav,
.sg-pagination,
.sg-shop__pagination,
.sg-pages,
.sg-chips,
.sg-empty {
  --sg-red:      #e63128;
  --sg-red-bg:   rgba(230,49,40,.07);
  --sg-red-mid:  rgba(230,49,40,.22);
  --sg-red-soft: rgba(230,49,40,.12);
  --sg-dark:     #0d1b2a;
  --sg-mid:      #4a5568;
  --sg-muted:    #718096;
  --sg-border:   #dde3ea;
  --sg-bg:       #f7f9fb;
  --sg-white:    #fff;
  --sg-green:    #0ea970;
  --sg-amber:    #f59e0b;
  --sg-r-sm:     4px;
  --sg-r:        8px;
  --sg-r-lg:     12px;
  --sg-pill:     999px;
  --sg-ease:     cubic-bezier(.4,0,.2,1);
  --sg-t:        .22s;
  --sg-s1:       0 1px 3px rgba(0,0,0,.06);
  --sg-s2:       0 2px 10px rgba(0,0,0,.09);
  --sg-s3:       0 6px 28px rgba(0,0,0,.11);
  --sg-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sg-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; border: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   FULL THEME-PROOF ISOLATION
   Every element inside plugin containers is reset so that
   no WordPress theme or WooCommerce CSS can alter the layout,
   colors, fonts, or spacing of this plugin.
   Selectors are intentionally broad with !important to
   guarantee highest specificity wins.
   ══════════════════════════════════════════════════════════════ */

/* ── Box model baseline ──────────────────────────────────────── */
.sg-catalogue *,
.sg-sidebar *,
.sg-main *,
.sg-filters *,
.sg-chips *,
.sg-toolbar * {
  box-sizing: border-box !important;
}

/* ── Root container reset — prevent theme/Elementor padding bleed ── */
/* Targets the containers themselves (not just their children).
   Themes (Astra, OceanWP, Divi…) and Elementor sections often
   add padding-top / margin-top to .main, article, section, or any
   element matching their selectors. Force-zero it here. */
.sg-catalogue,
.sg-main,
.sg-main--standalone {
  padding: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .sg-catalogue,
  .sg-main,
  .sg-main--standalone {
    padding: 0 !important;
    margin-top: 0 !important;
  }
}

/* ── Font normalisation ──────────────────────────────────────── */
.sg-catalogue,
.sg-sidebar,
.sg-main,
.sg-filters,
.sg-chips,
.sg-toolbar {
  font-family: var(--sg-font) !important;
  font-size: var(--sg-font-size, 14px) !important;
  line-height: 1.5 !important;
  color: var(--sg-dark) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Headings inside plugin scope ────────────────────────────── */
.sg-catalogue h1, .sg-catalogue h2, .sg-catalogue h3,
.sg-catalogue h4, .sg-catalogue h5, .sg-catalogue h6,
.sg-sidebar h1, .sg-sidebar h2, .sg-sidebar h3,
.sg-main h1, .sg-main h2, .sg-main h3 {
  font-family: var(--sg-font) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sg-dark) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── Paragraphs ──────────────────────────────────────────────── */
.sg-catalogue p, .sg-sidebar p, .sg-main p, .sg-filters p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

/* ── Lists ───────────────────────────────────────────────────── */
.sg-catalogue ul, .sg-catalogue ol,
.sg-sidebar ul, .sg-sidebar ol,
.sg-main ul, .sg-main ol,
.sg-filters ul, .sg-filters ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sg-catalogue li, .sg-sidebar li, .sg-main li, .sg-filters li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Links ───────────────────────────────────────────────────── */
.sg-catalogue a, .sg-sidebar a, .sg-main a, .sg-filters a {
  color: inherit !important;
  text-decoration: none !important;
  font-family: inherit !important;
}

/* ── Images ──────────────────────────────────────────────────── */
.sg-catalogue img, .sg-sidebar img, .sg-main img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  vertical-align: middle !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.sg-filters button,
.sg-filters label,
.sg-filters input,
.sg-filters select,
.sg-filters textarea,
.sg-sidebar button,
.sg-sidebar label,
.sg-sidebar input,
.sg-sidebar select,
.sg-sidebar textarea,
.sg-catalogue button,
.sg-catalogue label,
.sg-catalogue select,
.sg-catalogue textarea,
.sg-main button,
.sg-main label,
.sg-main select {
  font-family: var(--sg-font) !important;
  font-size: inherit !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.sg-filters button,
.sg-sidebar button,
.sg-catalogue button,
.sg-main button {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  min-width: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── wcdd-btn: restore quote button styles killed by the reset above ── */
/* These rules must come AFTER the reset and use !important to win */
.wcdd-btn,
.sg-main .wcdd-btn,
.sg-catalogue .wcdd-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 9px 14px !important;
  margin-top: 8px !important;
  background: var(--wcdd-primary, #e63128) !important;
  color: #fff !important;
  border: 2px solid var(--wcdd-primary, #e63128) !important;
  border-radius: var(--wcdd-r, 10px) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s, transform .15s !important;
  text-decoration: none !important;
  letter-spacing: .02em !important;
  line-height: 1.4 !important;
  position: relative !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: unset !important;
  min-width: unset !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.wcdd-btn:hover,
.sg-main .wcdd-btn:hover,
.sg-catalogue .wcdd-btn:hover {
  background: var(--wcdd-primary-hover, #c52a22) !important;
  border-color: var(--wcdd-primary-hover, #c52a22) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}
.wcdd-btn.is-in-list,
.sg-main .wcdd-btn.is-in-list,
.sg-catalogue .wcdd-btn.is-in-list {
  background: var(--wcdd-accent, #0ea970) !important;
  border-color: var(--wcdd-accent, #0ea970) !important;
}
.wcdd-btn.is-loading,
.sg-main .wcdd-btn.is-loading {
  opacity: .65 !important;
  pointer-events: none !important;
  transform: none !important;
}
.wcdd-btn .wcdd-btn__icon,
.wcdd-btn .wcdd-btn__check,
.wcdd-btn .wcdd-btn__text,
.wcdd-btn .wcdd-btn__arrow {
  pointer-events: none !important;
}
.wcdd-btn.is-in-list .wcdd-btn__icon  { display: none !important; }
.wcdd-btn.is-in-list .wcdd-btn__check { display: inline-flex !important; }
.wcdd-btn:not(.is-in-list) .wcdd-btn__check { display: none !important; }

/* ── WooCommerce overrides ───────────────────────────────────── */
.sg-main .woocommerce-loop-product__link,
.sg-main .button,
.sg-main .wc-block-grid__product-onsale,
.sg-main .product_type_simple,
.sg-main .product_type_variable,
.sg-catalogue .button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* ── Inputs & range sliders ──────────────────────────────────── */
.sg-filters input[type="range"],
.sg-sidebar input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 20px !important;
  cursor: pointer !important;
}

.sg-filters input[type="checkbox"],
.sg-sidebar input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Then we re-apply our own styles below with !important where needed */

/* Scrollbar */
.sg-checklist, .sg-checklist--tree, .sg-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--sg-border) transparent;
}
.sg-checklist::-webkit-scrollbar, .sg-sidebar::-webkit-scrollbar { width: 4px; }
.sg-checklist::-webkit-scrollbar-thumb, .sg-sidebar::-webkit-scrollbar-thumb { background: var(--sg-border); border-radius: 4px; }


/* ================================================================
   PART 1 — [sg_category_nav] PILLS
   ================================================================ */

.sg-catnav {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--sg-font);
}
.sg-catnav__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; position: relative;
}
.sg-catnav__row--d1, .sg-catnav__row--d2 { padding-left: 22px; }
.sg-catnav__row--d1::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 16px; height: 1.5px; background: var(--sg-border); transform: translateY(-50%);
}
.sg-catnav__row--d2 { padding-left: 40px; }
.sg-catnav__row--d2::before {
  content: ''; position: absolute; left: 18px; top: 50%;
  width: 16px; height: 1.5px; background: var(--sg-border); transform: translateY(-50%);
}

.sg-catnav__item {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  padding: 7px 14px !important; background: var(--sg-white) !important;
  border: 1.5px solid var(--sg-border) !important; border-radius: var(--sg-pill) !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--sg-mid) !important;
  text-decoration: none !important; white-space: nowrap;
  transition: border-color var(--sg-t), color var(--sg-t), background var(--sg-t), box-shadow var(--sg-t), transform var(--sg-t);
}
@media (hover: hover) {
  .sg-catnav__item:hover {
    border-color: var(--sg-red) !important; color: var(--sg-red) !important;
    background: var(--sg-red-bg) !important; transform: translateY(-2px); box-shadow: var(--sg-s2) !important;
  }
}
.sg-catnav__item:active { transform: scale(.97); }
.sg-catnav__item.is-active {
  background: var(--sg-red) !important; border-color: var(--sg-red) !important;
  color: #fff !important; box-shadow: 0 3px 14px var(--sg-red-mid) !important; font-weight: 600 !important;
}
.sg-catnav__item:focus-visible { outline: 2px solid var(--sg-red) !important; outline-offset: 2px; }
.sg-catnav__item.is-ancestor { border-color: var(--sg-red) !important; color: var(--sg-red) !important; }

.sg-catnav__thumb {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  background: var(--sg-bg); border: 1.5px solid rgba(255,255,255,.35); flex-shrink: 0;
}
.sg-catnav__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-catnav__count { font-size: 11px; color: var(--sg-muted); opacity: .8; }
.sg-catnav__item.is-active .sg-catnav__count { color: rgba(255,255,255,.7); }
.sg-catnav__row--d0 .sg-catnav__item { padding: 8px 16px !important; font-size: 13.5px !important; }
.sg-catnav__row--d2 .sg-catnav__item { padding: 6px 11px !important; font-size: 12px !important; }


/* ================================================================
   PART 2 — CATALOGUE LAYOUT
   ================================================================ */

.sg-catalogue {
  display: grid; grid-template-columns: 260px 1fr;
  align-items: start; gap: 28px;
  font-family: var(--sg-font);
}

/* ── SIDEBAR ──────────────────────────────────────────────── */

.sg-sidebar {
  position: sticky; top: 24px;
  max-height: calc(100svh - 48px);
  overflow-y: auto; overflow-x: hidden;
}

.sg-filters {
  background: var(--sg-white);
  border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-lg);
  overflow: hidden;
  box-shadow: var(--sg-s1);
}

.sg-filters__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 13px;
  border-bottom: 1.5px solid var(--sg-border);
  background: var(--sg-white);
}
.sg-filters__title {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px !important; font-weight: 700 !important; color: var(--sg-dark) !important;
}
.sg-filters__title svg { color: var(--sg-red); flex-shrink: 0; }

.sg-clear-all {
  background: var(--sg-red-bg) !important;
  border: 1.5px solid var(--sg-red-soft) !important;
  padding: 5px 14px !important;
  border-radius: var(--sg-pill) !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  color: var(--sg-red) !important;
  transition: all var(--sg-t) !important;
}
@media (hover: hover) {
  .sg-clear-all:hover {
    background: var(--sg-red) !important; color: #fff !important;
    border-color: var(--sg-red) !important;
  }
}
.sg-clear-all:active { transform: scale(.95); }


/* ── Filter panels ─────────────────────────────────────────── */

.sg-panel {
  border-bottom: 1px solid var(--sg-border);
}
.sg-panel:last-child { border-bottom: none; }

.sg-panel__btn {
  display: flex !important; align-items: center !important; gap: 8px !important;
  width: 100% !important; padding: 14px 18px !important;
  background: none !important; border: none !important; border-radius: 0 !important;
  font-size: 13px !important; font-weight: 600 !important; color: var(--sg-dark) !important;
  text-align: left !important;
  transition: background var(--sg-t) !important;
}
@media (hover: hover) {
  .sg-panel__btn:hover { background: var(--sg-bg) !important; }
}
.sg-panel__btn > span:first-child { flex: 1; }

.sg-panel__badge {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 20px !important; height: 20px !important; padding: 0 6px !important;
  background: var(--sg-red) !important; color: #fff !important;
  border-radius: var(--sg-pill) !important; border: none !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  line-height: 1 !important;
}

.sg-chevron {
  color: var(--sg-muted); flex-shrink: 0;
  transition: transform var(--sg-t) var(--sg-ease);
}
.sg-panel__btn[aria-expanded="false"] .sg-chevron {
  transform: rotate(-90deg);
}

.sg-panel__body {
  padding: 6px 18px 18px;
  overflow: hidden;
  max-height: 600px;
  transition: max-height .32s var(--sg-ease), padding .3s var(--sg-ease), opacity .2s;
}
.sg-panel__btn[aria-expanded="false"] + .sg-panel__body,
.sg-panel__body--closed {
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
}


/* ── Price slider ──────────────────────────────────────────── */

.sg-price-slider { padding: 4px 2px 0; }

.sg-price-track {
  position: relative; height: 5px;
  background: var(--sg-border); border-radius: 3px;
  margin: 20px 8px 8px;
}
.sg-price-fill {
  position: absolute; height: 100%;
  background: var(--sg-red); border-radius: 3px;
}

.sg-price-inputs { position: relative; height: 0; }
.sg-price-range {
  position: absolute;
  width: calc(100% + 16px); left: -8px; top: -22px;
  height: 5px; background: transparent !important; border: none !important; outline: none !important;
  pointer-events: none; -webkit-appearance: none !important; appearance: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
.sg-price-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sg-white); border: 3px solid var(--sg-red);
  box-shadow: 0 1px 6px rgba(0,0,0,.15); cursor: grab;
  transition: transform var(--sg-t), box-shadow var(--sg-t);
}
.sg-price-range::-webkit-slider-thumb:active {
  transform: scale(1.25); cursor: grabbing;
  box-shadow: 0 0 0 6px var(--sg-red-soft), 0 1px 6px rgba(0,0,0,.15);
}
.sg-price-range::-moz-range-thumb {
  pointer-events: all; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sg-white); border: 3px solid var(--sg-red);
  box-shadow: 0 1px 6px rgba(0,0,0,.15); cursor: grab;
}
.sg-price-range::-moz-range-track { background: transparent; border: none; }

.sg-price-labels {
  display: flex; justify-content: space-between;
  margin-top: 16px; padding: 0 2px;
}
.sg-price-labels > span {
  font-size: 13px; font-weight: 700; color: var(--sg-dark);
  background: var(--sg-bg);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--sg-border);
  min-width: 65px;
  text-align: center;
}


/* ── Checkbox list ─────────────────────────────────────────── */

.sg-checklist {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 230px; overflow-y: auto;
  padding-right: 2px !important;
}

.sg-check-row {
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 8px 8px !important; border-radius: 6px !important;
  cursor: pointer; background: none !important;
  transition: background var(--sg-t), opacity .3s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .sg-check-row:hover { background: var(--sg-bg) !important; }
}
.sg-check-row:active { background: var(--sg-red-bg) !important; }

.sg-checkbox {
  flex-shrink: 0; width: 17px; height: 17px;
  border: 1.5px solid var(--sg-border) !important; border-radius: 4px !important;
  background: var(--sg-white) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: background var(--sg-t), border-color var(--sg-t), transform .15s;
  padding: 0 !important; margin: 0 !important;
  box-shadow: none !important;
}
.sg-filter-cb:checked ~ .sg-checkbox,
.sg-filter-cb:checked + .sg-checkbox {
  background: var(--sg-red) !important; border-color: var(--sg-red) !important;
  transform: scale(1.05);
}
.sg-filter-cb:checked ~ .sg-checkbox::after,
.sg-filter-cb:checked + .sg-checkbox::after {
  content: '';
  width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}
.sg-filter-cb:focus-visible ~ .sg-checkbox,
.sg-filter-cb:focus-visible + .sg-checkbox {
  outline: 2px solid var(--sg-red) !important; outline-offset: 2px;
}

.sg-check-name {
  flex: 1; font-size: 13px !important; color: var(--sg-mid) !important;
  line-height: 1.3; font-weight: 400 !important;
}
.sg-check-count {
  font-size: 11px !important; color: var(--sg-muted) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Zero-count filter items ─────────────────────────────── */
.sg-filter-zero,
.sg-disabled {
  opacity: 0.35;
  pointer-events: none;
  order: 999; /* push to end of list */
}
.sg-filter-zero .sg-check-count,
.sg-disabled .sg-check-count {
  color: var(--sg-border) !important;
}


/* ── Colour swatches ───────────────────────────────────────── */

.sg-swatches {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 2px;
}
.sg-swatch-wrap {
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.sg-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2.5px solid transparent;
  outline: 1.5px solid var(--sg-border);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  transition: all var(--sg-t);
  display: block; flex-shrink: 0;
}
/* Multicolor gradient swatches */
.sg-swatch[style*="gradient"] {
  border-radius: 50%;
}
@media (hover: hover) {
  .sg-swatch:hover { transform: scale(1.15); box-shadow: var(--sg-s2), inset 0 0 0 1px rgba(0,0,0,.08); }
}
.sg-filter-cb:checked ~ .sg-swatch {
  border-color: var(--sg-red);
  outline: 2.5px solid var(--sg-red);
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--sg-red-soft), inset 0 0 0 1px rgba(0,0,0,.08);
}
.sg-swatch-name {
  font-size: 10.5px !important; color: var(--sg-muted) !important; font-weight: 500 !important;
  text-align: center; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* ── Tag cloud ─────────────────────────────────────────────── */

.sg-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.sg-tag-wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sg-tag {
  display: inline-block !important;
  padding: 5px 13px !important;
  border: 1.5px solid var(--sg-border) !important; border-radius: var(--sg-pill) !important;
  font-size: 12px !important; color: var(--sg-mid) !important; background: var(--sg-white) !important;
  font-weight: 500 !important;
  transition: all var(--sg-t);
}
@media (hover: hover) {
  .sg-tag-wrap:hover .sg-tag { border-color: var(--sg-red) !important; color: var(--sg-red) !important; background: var(--sg-red-bg) !important; }
}
.sg-filter-cb:checked ~ .sg-tag {
  background: var(--sg-red) !important; border-color: var(--sg-red) !important; color: #fff !important;
  box-shadow: 0 2px 8px var(--sg-red-mid) !important;
}


/* ── Category tree ─────────────────────────────────────────── */

.sg-checklist--tree {
  max-height: 280px; overflow-y: auto; padding-right: 2px !important;
}
.sg-sub-list {
  list-style: none !important; margin: 0 !important; padding: 3px 0 3px 14px !important;
  border-left: 1.5px solid var(--sg-border);
  margin-left: 8px !important;
}
.sg-tree-d0 > .sg-check-row .sg-check-name { font-weight: 500 !important; }
.sg-tree-d1 > .sg-check-row .sg-check-name { font-size: 12.5px !important; }
.sg-tree-d2 > .sg-check-row .sg-check-name { font-size: 12px !important; color: var(--sg-muted) !important; }


/* ── Term search input ─────────────────────────────────────── */

.sg-term-search-wrap { position: relative; margin-bottom: 10px; }
.sg-term-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--sg-muted); pointer-events: none;
}
.sg-term-search {
  width: 100% !important;
  padding: 8px 12px 8px 32px !important;
  border: 1.5px solid var(--sg-border) !important; border-radius: var(--sg-r) !important;
  font-size: 12.5px !important; color: var(--sg-dark) !important; background: var(--sg-bg) !important;
  transition: border-color var(--sg-t), background var(--sg-t), box-shadow var(--sg-t);
}
.sg-term-search:focus {
  outline: none !important; border-color: var(--sg-red) !important;
  background: var(--sg-white) !important; box-shadow: 0 0 0 3px var(--sg-red-soft) !important;
}
.sg-term-search::placeholder { color: var(--sg-muted) !important; }


/* ── Stock status dots ─────────────────────────────────────── */

.sg-stock-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-left: auto;
}
.sg-stock-dot--in  { background: var(--sg-green); box-shadow: 0 0 0 3px rgba(14,169,112,.15); }
.sg-stock-dot--out { background: var(--sg-red); box-shadow: 0 0 0 3px var(--sg-red-soft); }
.sg-stock-dot--back{ background: var(--sg-amber); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

@keyframes sg-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(14,169,112,.15); }
  50%      { box-shadow: 0 0 0 6px rgba(14,169,112,.08); }
}
.sg-stock-dot--in { animation: sg-pulse 2.5s ease infinite; }


/* ── Sale toggle switch ────────────────────────────────────── */

.sg-toggle-switch {
  display: flex !important; align-items: center !important; gap: 12px !important;
  cursor: pointer; padding: 8px 6px !important; border-radius: 6px !important;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--sg-t);
}
@media (hover: hover) { .sg-toggle-switch:hover { background: var(--sg-bg) !important; } }

.sg-toggle-switch input[type="checkbox"] {
  position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important;
}
.sg-toggle-track {
  position: relative; display: inline-block;
  width: 44px; height: 24px;
  background: var(--sg-border); border-radius: 24px;
  flex-shrink: 0; transition: background .25s var(--sg-ease);
}
.sg-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: var(--sg-white); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .25s var(--sg-ease);
}
.sg-toggle-switch input:checked ~ .sg-toggle-track { background: var(--sg-red); }
.sg-toggle-switch input:checked ~ .sg-toggle-track .sg-toggle-thumb { transform: translateX(20px); }
.sg-toggle-switch input:focus-visible ~ .sg-toggle-track { outline: 2px solid var(--sg-red); outline-offset: 2px; }
.sg-toggle-label { font-size: 13px !important; color: var(--sg-mid) !important; font-weight: 500 !important; }


/* ── Disabled / Hidden ─────────────────────────────────────── */

.sg-check-row.sg-disabled { opacity: .28; pointer-events: none; transition: opacity .4s; }
.sg-checklist li.sg-search-hidden { display: none; }


/* ================================================================
   PART 3 — PRODUCTS AREA
   ================================================================ */

.sg-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding-bottom: 14px; border-bottom: 1.5px solid var(--sg-border); margin-bottom: 14px;
}
.sg-count { margin: 0; font-size: 13px; color: var(--sg-muted); font-weight: 500; min-height: 1em; }
.sg-toolbar__controls { display: flex; align-items: center; gap: 8px; }

/* Sort */
.sg-sort-wrap { position: relative; display: inline-flex; align-items: center; }
.sg-sort {
  padding: 9px 32px 9px 12px !important;
  border: 1.5px solid var(--sg-border) !important; border-radius: var(--sg-r) !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--sg-dark) !important;
  background: var(--sg-white) !important; appearance: none !important; -webkit-appearance: none !important;
  min-width: 155px;
  transition: border-color var(--sg-t);
}
@media (hover: hover) { .sg-sort:hover { border-color: var(--sg-red) !important; } }
.sg-sort:focus { outline: 2px solid var(--sg-red) !important; outline-offset: 1px; }
.sg-sort-caret { position: absolute; right: 10px; pointer-events: none; color: var(--sg-muted); }

/* View toggle */
.sg-view-toggle {
  display: flex; gap: 2px;
  background: var(--sg-bg) !important;
  border: 1.5px solid var(--sg-border) !important; border-radius: var(--sg-r) !important;
  padding: 3px !important;
}
.sg-view-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important;
  border: none !important; border-radius: var(--sg-r-sm) !important;
  background: transparent !important; color: var(--sg-muted) !important;
  transition: all var(--sg-t);
}
@media (hover: hover) { .sg-view-btn:hover { background: var(--sg-white) !important; color: var(--sg-dark) !important; } }
.sg-view-btn.is-on {
  background: var(--sg-white) !important; color: var(--sg-red) !important;
  box-shadow: var(--sg-s1) !important;
}


/* ── Active chips ──────────────────────────────────────────── */

.sg-chips {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-bottom: 12px;
}
.sg-chips:empty { margin-bottom: 0; }

.sg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 13px;
  background: var(--sg-dark); color: #fff;
  border-radius: var(--sg-pill); font-size: 12px; font-weight: 500;
  max-width: 200px;
  animation: sg-pop .22s var(--sg-ease) both;
}
.sg-chip__x {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 18px !important; height: 18px !important; flex-shrink: 0;
  background: rgba(255,255,255,.18) !important; border: none !important; border-radius: 50% !important;
  color: #fff !important; padding: 0 !important;
  transition: background var(--sg-t), transform .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .sg-chip__x:hover { background: rgba(255,255,255,.36) !important; transform: scale(1.15); } }


/* ── Grid ──────────────────────────────────────────────────── */

.sg-grid { transition: opacity .2s; min-height: 200px; position: relative; }
.sg-grid.is-loading { opacity: .35; pointer-events: none; }
.sg-grid.is-loading::after {
  content: ''; position: absolute;
  top: max(80px, 20%); left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px;
  border: 3px solid var(--sg-border); border-top-color: var(--sg-red); border-radius: 50%;
  animation: sg-spin .65s linear infinite; z-index: 10;
}
@keyframes sg-spin { to { transform: translateX(-50%) rotate(360deg); } }

.sg-grid__inner {
  display: grid;
  grid-template-columns: repeat( var(--cols, 3), 1fr );
  gap: 18px;
}
.sg-grid__inner--1 { --cols: 1; }
.sg-grid__inner--2 { --cols: 2; }
.sg-grid__inner--3 { --cols: 3; }
.sg-grid__inner--4 { --cols: 4; }
.sg-grid__inner--5 { --cols: 5; }


/* ================================================================
   PART 4 — PRODUCT CARDS
   ================================================================ */

.sg-card {
  display: flex; flex-direction: column;
  background: var(--sg-white);
  border: 1.5px solid var(--sg-border); border-radius: var(--sg-r-lg);
  overflow: hidden; box-shadow: var(--sg-s1);
  transition: transform .3s var(--sg-ease), box-shadow .3s var(--sg-ease);
}
@media (hover: hover) {
  .sg-card:hover { transform: translateY(-4px); box-shadow: var(--sg-s3); }
}

.sg-card__img-link {
  position: relative;
  display: block; text-decoration: none;
  overflow: hidden;
  background: #ffffff;
}
/* .sg-card__img-wrap handles aspect-ratio (set inline from PHP) */
.sg-card__img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; display: block !important;
  padding: 8px !important;
  transition: transform .42s var(--sg-ease) !important;
}
@media (hover: hover) { .sg-card:hover .sg-card__img { transform: scale(1.05) !important; } }

.sg-card__img-link::before {
  content: ''; position: absolute; top: 0; left: 0; z-index: 2;
  border-top: 2.5px solid var(--sg-red); border-left: 2.5px solid var(--sg-red);
  border-radius: var(--sg-r-sm) 0 0 0;
  clip-path: polygon(0 0, 46px 0, 0 46px); pointer-events: none;
  transition: clip-path var(--sg-t);
}
@media (hover: hover) { .sg-card:hover .sg-card__img-link::before { clip-path: polygon(0 0, 62px 0, 0 62px); } }

.sg-badge {
  position: absolute; padding: 4px 10px; border-radius: var(--sg-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; z-index: 3;
}
.sg-badge--sale { background: var(--sg-red); color: #fff; top: 10px; left: 10px; }
.sg-badge--oos  { background: rgba(0,0,0,.52); color: #fff; bottom: 10px; left: 10px; backdrop-filter: blur(4px); }

.sg-card__body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.sg-card__cats {
  margin: 0; font-size: 10.5px; color: var(--sg-muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-card__cats a { color: inherit; text-decoration: none; }
.sg-card__name { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.sg-card__name a { color: var(--sg-dark); text-decoration: none; }
@media (hover: hover) { .sg-card__name a:hover { color: var(--sg-red); } }
.sg-card__desc { font-size: 12.5px; color: var(--sg-muted); line-height: 1.5; margin: 4px 0 0; }
.sg-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 10px; gap: 6px;
}
.sg-card__price { font-size: 15px; font-weight: 700; color: var(--sg-dark); }
.sg-card__price .price ins { text-decoration: none; color: var(--sg-red); }
.sg-card__price .price del { font-size: .82em; font-weight: 400; color: var(--sg-muted); }

.sg-atc, .sg-view-btn-link {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 36px !important; height: 36px !important;
  border-radius: var(--sg-r) !important; border: none !important;
  background: var(--sg-dark) !important; color: #fff !important;
  font-family: inherit; text-decoration: none; flex-shrink: 0;
  transition: background var(--sg-t), transform var(--sg-t);
  -webkit-tap-highlight-color: transparent;
}
.sg-view-btn-link { width: auto !important; padding: 0 14px !important; font-size: 11.5px !important; font-weight: 600 !important; }
@media (hover: hover) { .sg-atc:hover, .sg-view-btn-link:hover { background: var(--sg-red) !important; transform: scale(1.08); } }
.sg-atc:active { transform: scale(.92); }
.sg-atc.is-busy { opacity: .5; pointer-events: none; }
.sg-atc.is-done { background: var(--sg-green) !important; }


/* ── LIST VIEW ─────────────────────────────────────────────── */

.sg-view--list.sg-grid__inner { grid-template-columns: 1fr !important; gap: 12px; }
.sg-card--list { flex-direction: row; }
.sg-card--list .sg-card__img-link { width: 180px; min-width: 180px; flex-shrink: 0; border-radius: var(--sg-r-lg) 0 0 var(--sg-r-lg); }
.sg-card--list .sg-card__img-wrap { aspect-ratio: unset !important; height: 100%; min-height: 160px; }
.sg-card--list .sg-card__body { padding: 16px 18px; justify-content: center; }
.sg-card--list .sg-card__name { font-size: 15px; }


/* ── EMPTY / ERROR / SKELETON ──────────────────────────────── */

.sg-empty {
  grid-column: 1/-1; text-align: center; padding: 60px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--sg-bg); border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-lg); margin: 4px 0;
}
.sg-empty svg { color: var(--sg-muted); width: 48px; height: 48px; opacity: .5; }
.sg-empty p   { margin: 0; font-size: 14.5px; color: var(--sg-mid); font-weight: 500; max-width: 320px; }
.sg-empty-btn {
  margin-top: 8px; padding: 10px 26px !important;
  background: var(--sg-dark) !important; color: #fff !important; border: none !important;
  border-radius: var(--sg-pill) !important; font-size: 13px !important; font-weight: 600 !important;
}
@media (hover: hover) { .sg-empty-btn:hover { background: var(--sg-red) !important; } }

.sg-error {
  padding: 16px 20px; background: #fef2f2; border: 1.5px solid #fca5a5;
  border-radius: var(--sg-r); color: var(--sg-red); font-size: 13px; text-align: center;
}

@keyframes sg-shimmer { 0% { background-position: -300% center; } 100% { background-position: 300% center; } }
.sg-skeleton { pointer-events: none; }
.sg-skel-card { border: 1.5px solid var(--sg-border); border-radius: var(--sg-r-lg); overflow: hidden; }
.sg-sk {
  border-radius: var(--sg-r-sm);
  background: linear-gradient(90deg, #eff1f4 25%, #e4e7ea 50%, #eff1f4 75%);
  background-size: 300% 100%; animation: sg-shimmer 1.5s ease infinite;
}
.sg-sk-img   { aspect-ratio: 1/1; display: block; border-radius: 0; }
.sg-sk-cat   { height: 10px; width: 45%; margin: 12px 14px 4px; }
.sg-sk-title { height: 13px; width: 75%; margin: 6px 14px 6px; }
.sg-sk-price { height: 18px; width: 40%; margin: 0 14px 14px; }


/* ── PAGINATION ────────────────────────────────────────────── */

.sg-pagination { margin-top: 28px; }
.sg-pages {
  display: flex; flex-wrap: wrap; gap: 5px;
  list-style: none; margin: 0; padding: 0; justify-content: center;
}
.sg-pages .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1.5px solid var(--sg-border); border-radius: var(--sg-r);
  color: var(--sg-dark); text-decoration: none; font-size: 13px; font-weight: 500;
  background: var(--sg-white); transition: all var(--sg-t);
}
@media (hover: hover) { .sg-pages .page-numbers:hover { border-color: var(--sg-red); color: var(--sg-red); } }
.sg-page.is-on .page-numbers,
.sg-pages .page-numbers.current {
  background: var(--sg-red); border-color: var(--sg-red); color: #fff;
  box-shadow: 0 2px 8px var(--sg-red-mid);
}


/* ── ANIMATIONS ────────────────────────────────────────────── */

@keyframes sg-pop { from { transform: scale(.75); opacity: 0; } 60% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } }
@keyframes sg-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sg-anim { animation: sg-fadein .3s var(--sg-ease) both; }


/* ── MOBILE CATEGORY DROPDOWN ──────────────────────────────── */

/* Toggle: hidden on desktop */
.sg-catnav-toggle {
  display: none !important;
}

/* Desktop: nav is always visible, wrapper has no effect */
.sg-catnav-wrap {
  margin-bottom: 22px;
}

@media (max-width: 768px) {
  .sg-catnav-wrap {
    margin-bottom: 16px;
    position: relative;
  }

  /* Show toggle button */
  .sg-catnav-toggle {
    display: flex !important; align-items: center !important; gap: 8px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    background: var(--sg-white) !important;
    border: 1.5px solid var(--sg-border) !important;
    border-radius: var(--sg-r-lg) !important;
    font-size: 14px !important; font-weight: 600 !important; color: var(--sg-dark) !important;
    box-shadow: var(--sg-s1) !important;
    transition: border-color var(--sg-t), box-shadow var(--sg-t) !important;
  }
  .sg-catnav-toggle:active {
    border-color: var(--sg-red) !important;
  }
  .sg-catnav-toggle__label {
    flex: 1; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sg-catnav-toggle__count {
    font-size: 11px; font-weight: 700;
    background: var(--sg-bg); color: var(--sg-muted);
    padding: 2px 8px; border-radius: var(--sg-pill);
    flex-shrink: 0;
  }
  .sg-catnav-toggle__chevron {
    color: var(--sg-muted); flex-shrink: 0;
    transition: transform .25s var(--sg-ease);
  }

  /* Collapse the nav by default */
  .sg-catnav-wrap .sg-catnav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s var(--sg-ease), opacity .2s, padding .3s;
    padding: 0;
    margin: 0;
  }

  /* Expanded state */
  .sg-catnav-wrap.is-expanded .sg-catnav {
    max-height: 600px;
    opacity: 1;
    padding: 12px 14px 14px;
    margin-top: 0;
    background: var(--sg-white);
    border: 1.5px solid var(--sg-red);
    border-top: none;
    border-radius: 0 0 var(--sg-r-lg) var(--sg-r-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
  }
  .sg-catnav-wrap.is-expanded .sg-catnav-toggle {
    border-color: var(--sg-red) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
  }
  .sg-catnav-wrap.is-expanded .sg-catnav-toggle__chevron {
    transform: rotate(180deg);
  }

  /* Tighter pills inside dropdown */
  .sg-catnav-wrap .sg-catnav__item {
    padding: 6px 12px !important; font-size: 12px !important;
  }
  .sg-catnav-wrap .sg-catnav__row--d0 .sg-catnav__item {
    padding: 7px 14px !important; font-size: 12.5px !important;
  }
  .sg-catnav-wrap .sg-catnav__thumb {
    width: 22px; height: 22px;
  }

  /* Remove connector lines in dropdown */
  .sg-catnav-wrap .sg-catnav__row--d1::before,
  .sg-catnav-wrap .sg-catnav__row--d2::before { display: none; }
  .sg-catnav-wrap .sg-catnav__row--d1 { padding-left: 8px; }
  .sg-catnav-wrap .sg-catnav__row--d2 { padding-left: 16px; }
}

@media (max-width: 480px) {
  .sg-catnav-toggle {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .sg-catnav-wrap .sg-catnav__item {
    padding: 5px 10px !important; font-size: 11.5px !important;
  }
  .sg-catnav-wrap .sg-catnav__thumb {
    width: 20px; height: 20px;
  }
}


/* ── [sg_products] standalone wrapper — theme padding isolation ── */
/* The shortcode renders .sg-main.sg-main--standalone as the root
   element. WordPress/Elementor themes often inject padding-top on
   .sg-main (or its parent) which causes excessive spacing above the
   product grid on mobile. These rules neutralise that inheritance. */

.sg-main--standalone {
  padding: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .sg-main--standalone {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure the mobile filter button is the first visual element —
     no ghost space above it from theme or WooCommerce resets */
  .sg-main--standalone > .sg-mobile-btn:first-child,
  .sg-main--standalone > .sg-catnav-wrap:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* When [sg_filters] and [sg_products] are used separately,
     the products wrapper should not inherit column spacing */
  .sg-main--standalone .sg-toolbar {
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  .sg-main--standalone {
    padding: 0 !important;
    margin: 0 !important;
  }
}


/* ── MOBILE ────────────────────────────────────────────────── */

.sg-mobile-btn {
  display: none !important;
  align-items: center; gap: 7px; padding: 11px 20px; margin-bottom: 14px;
  background: var(--sg-dark); color: #fff; border: none;
  border-radius: var(--sg-pill); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sg-mobile-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--sg-red); border-radius: var(--sg-pill); font-size: 10px; font-weight: 700;
}

body.sg-overlay-open { overflow: hidden; }
body.sg-overlay-open::after {
  content: ''; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  z-index: 398; animation: sg-fadein .2s ease both;
}

@media (max-width: 1024px) { .sg-catalogue { grid-template-columns: 230px 1fr; gap: 20px; } }
@media (max-width: 900px)  { .sg-catalogue { grid-template-columns: 210px 1fr; gap: 16px; } .sg-grid__inner { gap: 14px; } }

@media (max-width: 768px) {
  .sg-catalogue { grid-template-columns: 1fr; }
  .sg-sidebar {
    position: fixed !important; inset: 0 auto 0 0;
    width: min(88vw, 320px) !important; max-height: 100svh; top: 0 !important;
    background: var(--sg-white); box-shadow: var(--sg-s3); z-index: 400;
    border-radius: 0 var(--sg-r-lg) var(--sg-r-lg) 0;
    transform: translateX(-110%); transition: transform .32s var(--sg-ease);
  }
  .sg-sidebar.is-open { transform: translateX(0); }
  .sg-filters { border: none; border-radius: 0; box-shadow: none; min-height: 100%; }
  .sg-mobile-btn { display: inline-flex !important; }
  .sg-grid__inner { --cols: 2 !important; gap: 12px; }
  .sg-card--list { flex-direction: column; }
  .sg-card--list .sg-card__img-link { width: 100%; min-width: unset; border-radius: var(--sg-r-lg) var(--sg-r-lg) 0 0; }
  .sg-sort { min-width: 130px !important; font-size: 12px !important; }
  .sg-chip { padding: 6px 10px 6px 12px; } .sg-chip__x { width: 18px !important; height: 18px !important; }
}

@media (max-width: 600px) {
  .sg-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .sg-toolbar__controls { justify-content: space-between; }
  .sg-sort { flex: 1; min-width: 0 !important; }
  .sg-grid__inner { --cols: 2 !important; gap: 10px; }
  .sg-card__body { padding: 9px 10px 12px; }
  .sg-card__name { font-size: 12.5px; } .sg-card__cats { font-size: 9.5px; } .sg-card__price { font-size: 14px; }
  .sg-atc { width: 32px !important; height: 32px !important; }
  .sg-card__img-link::before { clip-path: polygon(0 0, 32px 0, 0 32px); }
  .sg-swatch { width: 26px; height: 26px; }
  .sg-price-labels > span { font-size: 12px; padding: 3px 8px; min-width: 52px; }
}

@media (max-width: 420px) {
  .sg-grid__inner { --cols: 2 !important; gap: 8px; }
  .sg-view-toggle { display: none !important; }
  .sg-chip { font-size: 11px; max-width: 160px; }
  .sg-card__body { padding: 6px 8px 8px; }
  .sg-card__name { font-size: 11.5px; }
  .sg-card__price { font-size: 12.5px; }
  .sg-atc { width: 28px !important; height: 28px !important; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print {
  .sg-sidebar, .sg-toolbar, .sg-pagination, .sg-chips, .sg-mobile-btn { display: none !important; }
  .sg-catalogue { grid-template-columns: 1fr; }
  .sg-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════════
   NEW v3.2 — Admin-configurable layout additions
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar position: right ─────────────────────────────────── */
.sg-catalogue--right {
  flex-direction: row-reverse !important;
}
.sg-catalogue--right .sg-sidebar {
  margin-left: 0;
  margin-right: 0;
}

/* ── Sidebar width (controlled via --sg-sidebar-width CSS var) ── */
.sg-sidebar {
  width: var(--sg-sidebar-width, 280px) !important;
  min-width: var(--sg-sidebar-width, 280px) !important;
  flex-shrink: 0 !important;
}

/* ── Sticky sidebar — desktop only ───────────────────────────── */
/* CRITICAL: wrapped in min-width so mobile never inherits
   position:sticky !important. Without this guard, JS adding
   data-sticky="1" beats the mobile position:fixed drawer rule
   (which has no !important) → sidebar stays in flow →
   massive gap above the product grid on mobile.                */
@media (min-width: 768px) {
  .sg-sidebar[data-sticky="1"] {
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
  .sg-sidebar[data-sticky="1"]::-webkit-scrollbar { width: 4px; }
  .sg-sidebar[data-sticky="1"]::-webkit-scrollbar-thumb {
    background: var(--sg-border); border-radius: 2px;
  }
}
@media (max-width: 767px) {
  .sg-sidebar[data-sticky="1"] {
    position: fixed !important;
    top: 0 !important;
    max-height: 100svh !important;
  }
}

/* ── Sidebar background (from settings) ─────────────────────── */
.sg-sidebar {
  background: var(--sg-sidebar-bg, var(--sg-white)) !important;
}

/* ── Catalogue background (from settings) ───────────────────── */
.sg-catalogue,
.sg-shop {
  background: var(--sg-bg, #f7f9fb) !important;
}

/* ── Mobile behavior modes ───────────────────────────────────── */

/* Drawer: slides from the same side as sidebar position */
@media (max-width: 767px) {
  .sg-filters[data-mobile="drawer"] ~ .sg-mobile-btn,
  .sg-sidebar .sg-filters[data-mobile="drawer"] ~ .sg-mobile-btn {
    display: inline-flex !important;
  }
  .sg-catalogue .sg-sidebar,
  .sg-sidebar--standalone {
    position: fixed !important;
    top: 0 !important;
    left: -110% !important;
    width: min(320px, 90vw) !important;
    min-width: min(320px, 90vw) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    transition: left var(--sg-t) var(--sg-ease), box-shadow var(--sg-t) !important;
    padding: 20px 16px !important;
    box-shadow: none !important;
  }
  .sg-catalogue--right .sg-catalogue .sg-sidebar,
  .sg-catalogue--right .sg-sidebar--standalone {
    left: auto !important;
    right: -110% !important;
    transition: right var(--sg-t) var(--sg-ease), box-shadow var(--sg-t) !important;
  }
  .sg-catalogue .sg-sidebar.is-open,
  .sg-sidebar--standalone.is-open {
    left: 0 !important;
    box-shadow: 4px 0 40px rgba(0,0,0,.18) !important;
  }
  .sg-catalogue--right .sg-catalogue .sg-sidebar.is-open,
  .sg-catalogue--right .sg-sidebar--standalone.is-open {
    left: auto !important;
    right: 0 !important;
    box-shadow: -4px 0 40px rgba(0,0,0,.18) !important;
  }
}

/* Overlay: centered modal */
@media (max-width: 767px) {
  .sg-filters[data-mobile="overlay"] {
    /* JS adds data-mobile="overlay" to sidebar */
  }
  .sg-catalogue .sg-sidebar[data-mobile="overlay"],
  .sg-sidebar--standalone[data-mobile="overlay"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -60%) scale(.96) !important;
    width: min(400px, 94vw) !important;
    min-width: unset !important;
    max-height: 82vh !important;
    height: auto !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .25s var(--sg-ease), opacity .2s !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.22) !important;
  }
  .sg-catalogue .sg-sidebar[data-mobile="overlay"].is-open,
  .sg-sidebar--standalone[data-mobile="overlay"].is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  body.sg-overlay-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 9998;
    animation: sg-fadeIn .2s ease;
  }
}

/* Accordion: inline, no fixed positioning */
@media (max-width: 767px) {
  .sg-catalogue .sg-sidebar[data-mobile="accordion"],
  .sg-sidebar--standalone[data-mobile="accordion"] {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .sg-sidebar[data-mobile="accordion"].is-open .sg-filters {
    display: block !important;
  }
  .sg-sidebar[data-mobile="accordion"]:not(.is-open) .sg-panel {
    display: none !important;
  }
}

/* ── Price text inputs (inputs / both mode) ──────────────────── */
.sg-price-text-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.sg-price-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sg-price-text-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sg-muted);
}
.sg-price-text {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-sm);
  font-size: 13px;
  color: var(--sg-dark);
  background: var(--sg-white);
  font-family: var(--sg-font);
  -moz-appearance: textfield;
}
.sg-price-text::-webkit-inner-spin-button,
.sg-price-text::-webkit-outer-spin-button { -webkit-appearance: none; }
.sg-price-text:focus {
  outline: none;
  border-color: var(--sg-red);
  box-shadow: 0 0 0 3px var(--sg-red-soft);
}
.sg-price-text-sep {
  font-size: 14px;
  color: var(--sg-muted);
  padding-top: 18px;
  flex-shrink: 0;
}

/* Image ratio: handled by .sg-card__img-wrap inline aspect-ratio from PHP */

/* ── View toggle hidden ──────────────────────────────────────── */
.sg-view-toggle[data-hidden] { display: none !important; }

/* ── Border radius from --sg-r ───────────────────────────────── */
/* Buttons already use var(--sg-r) — this covers cards */
.sg-card { border-radius: var(--sg-r, 8px) !important; }
.sg-panel__btn { border-radius: var(--sg-r-sm, 4px) !important; }
.sg-sort { border-radius: var(--sg-r-sm, 4px) !important; }
.sg-view-btn { border-radius: calc(var(--sg-r-sm, 4px) - 1px) !important; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD ENHANCEMENTS v3.2
   ═══════════════════════════════════════════════════════════════ */

/* ── Image wrap with aspect-ratio ────────────────────────────── */
.sg-card__img-wrap {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: var(--sg-r) var(--sg-r) 0 0 !important;
  /* aspect-ratio set inline from PHP */
}
.sg-card__img-wrap .sg-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  transition: transform .35s var(--sg-ease) !important;
}
.sg-card:hover .sg-card__img {
  transform: scale(1.04) !important;
}

/* ── Brand on card ───────────────────────────────────────────── */
.sg-card__brand {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--sg-muted) !important;
  margin: 0 0 2px !important;
}
.sg-card__brand a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color var(--sg-t) !important;
}
.sg-card__brand a:hover {
  color: var(--sg-red) !important;
}

/* ── Star rating on card ─────────────────────────────────────── */
.sg-card__rating {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 3px 0 5px !important;
}
.sg-stars {
  position: relative !important;
  display: inline-block !important;
  font-size: 0 !important;
  width: 68px !important;
  height: 13px !important;
}
.sg-stars::before,
.sg-stars__fill::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 13px !important;
  width: 68px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 13'%3E%3Ctext y='12' font-size='13' fill='%23dde3ea'%3E★★★★★%3C/text%3E%3C/svg%3E") !important;
  background-size: 68px 13px !important;
  background-repeat: no-repeat !important;
}
.sg-stars::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 13'%3E%3Ctext y='12' font-size='13' fill='%23dde3ea'%3E★★★★★%3C/text%3E%3C/svg%3E") !important;
}
.sg-stars__fill {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: var(--pct, 80%) !important;
  height: 13px !important;
  overflow: hidden !important;
}
.sg-stars__fill::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 13'%3E%3Ctext y='12' font-size='13' fill='%23f59e0b'%3E★★★★★%3C/text%3E%3C/svg%3E") !important;
}
.sg-card__rating-count {
  font-size: 11px !important;
  color: var(--sg-muted) !important;
  font-weight: 500 !important;
}

/* ── SKU on card (list view) ─────────────────────────────────── */
.sg-card__sku {
  font-size: 11.5px !important;
  color: var(--sg-muted) !important;
  margin: 4px 0 0 !important;
}

/* ── Variant badge ───────────────────────────────────────────── */
.sg-badge--variant {
  background: rgba(124,58,237,.12) !important;
  color: #5b21b6 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: var(--sg-pill) !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  pointer-events: none !important;
}

/* ── Category & brand labels hidden (user preference) ─────── */
.sg-card__cats,
.sg-card__brand { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   PURE WHITE IMAGE BACKGROUNDS — no cropping, no off-white gaps
   Forces contain + #ffffff on every product card image context
   ═══════════════════════════════════════════════════════════════ */

/* Card image link wrappers */
.sg-card__img-link,
.sgpw-card-img-wrap,
.sg-card__img-wrap {
  background: #ffffff !important;
}

/* All product card images: contain (no cropping), white fill */
.sg-card__img,
.sgpw-card-img-wrap img,
.sg-card__img-wrap img,
.sg-card__img-link img {
  object-fit: contain !important;
  background: #ffffff !important;
}

/* Quick-pick modal image area */
.sg-qp-single__media {
  background: #ffffff !important;
}

/* Single product gallery */
#productimages .flex-viewport img,
#productimages .woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image img {
  background: #ffffff !important;
  object-fit: contain !important;
}