/*
 * sn-override.css  v1.9.0
 * Ucitava se POSLE sn-base.css i WooCommerce stilova.
 * Ovi stilovi uvek pobedjuju.
 *
 * GRID: Desktop 4 kolone | Tablet 3 kolone | Mobilni 2 kolone
 */

/* ══════════════════════════════════════════════════════════
   KILL WC CLEARFIX — ::before/::after postaju ghost grid items
   woocommerce-general.css dodaje clearfix koji zauzima prvu celiju
══════════════════════════════════════════════════════════ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
#sn-products-grid ul.products::before,
#sn-products-grid ul.products::after {
  display: none !important;
  content: none !important;
}

/* ══════════════════════════════════════════════════════════
   SHOP GRID — DESKTOP (≥1024px, sa sidebarem)
══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Layout: sidebar + main */
  .sn-collection-layout {
    display: grid !important;
    grid-template-columns: 180px 1fr !important;
    gap: 20px !important;
    padding: 24px 20px !important;
  }
  .sn-filters { display: block !important; }
  .sn-mobile-filter-btn { display: none !important; }

  /* Product grid: 4 kolone */
  .sn-collection-main ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products[class*="columns-"],
  .woocommerce-page ul.products[class*="columns-"],
  #sn-products-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  /* Svaki product item — puna sirina grid celije */
  .sn-collection-main ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  #sn-products-grid ul.products li.product {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
  }

  /* Kartice kompaktnije za 4 kolone */
  .sn-product-img img { padding: 10px !important; }
  .sn-product-body { padding: 8px 10px 10px !important; }
  .sn-product-title { font-size: 12px !important; line-height: 1.3 !important; }
  .sn-atc { font-size: 12px !important; padding: 9px 8px !important; }
}

/* ══════════════════════════════════════════════════════════
   SHOP GRID — TABLET (768–1023px)
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .sn-collection-layout {
    display: block !important;
    padding: 16px !important;
  }

  /* Product grid: 3 kolone */
  .sn-collection-main ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products[class*="columns-"],
  .woocommerce-page ul.products[class*="columns-"],
  #sn-products-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .sn-collection-main ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  #sn-products-grid ul.products li.product {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SHOP GRID — MOBILNI (≤767px)
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body { overflow-x: hidden !important; }

  .sn-collection-layout {
    display: block !important;
    padding: 10px 12px !important;
  }

  /* Product grid: 2 kolone */
  .sn-collection-main ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce ul.products[class*="columns-"],
  .woocommerce-page ul.products[class*="columns-"],
  #sn-products-grid ul.products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .sn-collection-main ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  #sn-products-grid ul.products li.product {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
  }

  /* Kartice */
  .sn-product-img img { padding: 8px !important; }
  .sn-product-body { padding: 8px 8px 10px !important; }
  .sn-product-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .woocommerce-Price-amount { font-size: 14px !important; }
  .sn-atc { font-size: 11px !important; padding: 8px 4px !important; }
}

/* ══════════════════════════════════════════════════════════
   li.product — resetuj WC default link styling
   <a> child od <li> mora ispuniti ceo li
══════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product .sn-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ══════════════════════════════════════════════════════════
   COLLECTION HEADER: filter + sort alignment
══════════════════════════════════════════════════════════ */
.sn-collection-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
  flex-wrap: nowrap !important;
}
.sn-mobile-filter-btn {
  height: 40px !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.woocommerce-ordering {
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.woocommerce-ordering select {
  height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
.sn-collection-header .woocommerce-ordering { margin-left: auto !important; }

@media (max-width: 767px) {
  .sn-collection-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .sn-mobile-filter-btn {
    flex: 0 0 auto !important;
    height: 38px !important;
  }
  .woocommerce-ordering { flex: 1 !important; min-width: 0 !important; }
  .woocommerce-ordering select { width: 100% !important; height: 38px !important; }
}

/* ══════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════════════════════════ */
.sn-ann {
  height: 36px !important;
  overflow: hidden !important;
  position: relative !important;
}
.sn-ann-track {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  width: calc(100vw * 4) !important;
  -webkit-animation: sn-ticker 20s step-start infinite !important;
          animation: sn-ticker 20s step-start infinite !important;
}
:root .sn-ann-track {
  animation-name: sn-ticker !important;
  -webkit-animation-name: sn-ticker !important;
}
.sn-ann-msg {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 16px !important;
  flex-shrink: 0 !important;
}
@-webkit-keyframes sn-ticker {
  0%   { -webkit-transform: translateX(0); }
  25%  { -webkit-transform: translateX(calc(-1 * 100vw)); }
  50%  { -webkit-transform: translateX(calc(-2 * 100vw)); }
  75%  { -webkit-transform: translateX(calc(-3 * 100vw)); }
  100% { -webkit-transform: translateX(0); }
}
@keyframes sn-ticker {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(calc(-1 * 100vw)); }
  50%  { transform: translateX(calc(-2 * 100vw)); }
  75%  { transform: translateX(calc(-3 * 100vw)); }
  100% { transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════
   HORIZONTALNI FILTER BAR — select dropdowni
══════════════════════════════════════════════════════════ */
.sn-collection-page {
  background: #f5f5f7;
  min-height: 60vh;
}
.sn-hfilter-bar {
  background: #fff;
  border-bottom: 1px solid var(--sn-border);
  padding: 14px 0;
}
.sn-hfilter-inner {
  max-width: var(--sn-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.sn-hfilter-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border: 1.5px solid var(--sn-border);
  border-radius: var(--sn-radius-sm);
  padding: 9px 36px 9px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  color: var(--sn-text);
  cursor: pointer;
  min-width: 160px;
  max-width: 220px;
  transition: border-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
.sn-hfilter-select:hover { border-color: var(--sn-primary); }
.sn-hfilter-select:focus { outline: none; border-color: var(--sn-primary); box-shadow: 0 0 0 3px rgba(0,112,243,0.1); }
.sn-hfilter-sort .woocommerce-ordering { margin: 0 !important; }
.sn-hfilter-sort .woocommerce-ordering select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border: 1.5px solid var(--sn-border);
  border-radius: var(--sn-radius-sm);
  padding: 9px 36px 9px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  color: var(--sn-text);
  cursor: pointer;
  min-width: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  transition: border-color 0.15s;
}
.sn-hfilter-sort .woocommerce-ordering select:hover { border-color: var(--sn-primary); }

/* Obriši dugme */
.sn-hfilter-clear {
  font-size: 12px;
  font-weight: 700;
  color: #dc2626;
  text-decoration: none;
  padding: 8px 14px;
  border: 1.5px solid #dc2626;
  border-radius: var(--sn-radius-sm);
  transition: all 0.15s;
  white-space: nowrap;
}
.sn-hfilter-clear:hover { background: #dc2626; color: #fff; }

/* Grid ispod filter bara */
.sn-hfilter-grid {
  max-width: var(--sn-max);
  margin: 0 auto;
  padding: 24px;
}

/* ── Responsive horizontal filter ── */
@media (max-width: 767px) {
  .sn-hfilter-inner {
    padding: 0 12px;
    gap: 8px;
  }
  .sn-hfilter-select {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
    font-size: 12px;
    padding: 8px 28px 8px 10px;
  }
  .sn-hfilter-sort {
    flex: 1 1 calc(50% - 4px);
  }
  .sn-hfilter-sort .woocommerce-ordering select {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    padding: 8px 28px 8px 10px;
  }
  .sn-hfilter-clear {
    font-size: 11px;
    padding: 7px 10px;
  }
  .sn-hfilter-grid {
    padding: 12px;
  }
}

/* ══════════════════════════════════════════════════════════
   SAFARI FIX — filter sidebar
══════════════════════════════════════════════════════════ */

/* Desktop sidebar — uvek vidljiv, sticky */
@media (min-width: 1024px) {
  .sn-filters {
    display: block !important;
    position: sticky !important;
    top: 80px !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    -webkit-transform: translateZ(0) !important;
    will-change: auto !important;
  }
}

/* Mobilni/tablet — slideout panel */
@media (max-width: 1023px) {
  .sn-filters {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(300px, 85vw) !important;
    height: 100% !important;
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    background: #fff !important;
    z-index: 500 !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    -webkit-overscroll-behavior: contain !important;
    -webkit-transform: translateX(-100%) !important;
    transform: translateX(-100%) !important;
    -webkit-transition: -webkit-transform 0.3s ease, visibility 0.3s !important;
    transition: transform 0.3s ease, visibility 0.3s !important;
    border-radius: 0 !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    box-sizing: border-box !important;
  }

  .sn-filters.open {
    visibility: visible !important;
    pointer-events: auto !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }

  .sn-mobile-filter-btn { display: flex !important; }

  /* Filter group body — Safari flex fix */
  .sn-filter-group-body.open {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
  }

  /* Checkbox box — Safari border-radius fix */
  .sn-cb-box {
    -webkit-border-radius: 4px !important;
    border-radius: 4px !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }

  /* Label red — Safari inline-flex fix */
  .sn-filter-cb {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .sn-filter-cb-label {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center !important;
    align-items: center !important;
  }

  /* Toggle dugme */
  .sn-filter-group-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: -webkit-flex !important;
    display: flex !important;
    width: 100% !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
  }

  /* Overlay */
  .sn-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.4);
    z-index: 499;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .sn-filter-overlay.open { display: block; }

  body.sn-filter-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════
   LIVE FILTER: spinner, count, no-products
══════════════════════════════════════════════════════════ */
.sn-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--sn-border);
  border-top-color: var(--sn-primary);
  border-radius: 50%;
  animation: sn-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes sn-spin { to { transform: rotate(360deg); } }

.sn-filter-active-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--sn-primary);
  background: var(--sn-primary-light);
  padding: 4px 10px;
  border-radius: 20px;
}

#sn-products-grid { transition: opacity 0.2s; }

.sn-no-products {
  padding: 60px 20px;
  text-align: center;
  color: var(--sn-muted);
  font-size: 15px;
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════
   CART DRAWER — iOS safe area + dynamic viewport height
══════════════════════════════════════════════════════════ */
@supports (height: 100dvh) {
  .sn-cart-drawer {
    height: 100dvh !important;
  }
  .admin-bar .sn-cart-drawer {
    height: calc(100dvh - 32px) !important;
  }
  @media (max-width: 782px) {
    .admin-bar .sn-cart-drawer {
      height: calc(100dvh - 46px) !important;
    }
  }
}

@supports (padding: env(safe-area-inset-bottom)) {
  .sn-cart-drawer .sn-cart-footer,
  .sn-cart-drawer #sn-cart-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  @media (max-width: 767px) {
    .sn-cart-drawer .sn-cart-footer,
    .sn-cart-drawer #sn-cart-footer {
      padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
  }
}