/* ============================================================
   BagIT Dropshop — Upgrade CSS Additions
   Append this to the END of your existing style.css
   ============================================================ */

/* ---- STICKY HEADER ---- */
header#main-header {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
header#main-header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  background: var(--bg, #0a0a0a);
}
header#main-header.sticky.hidden {
  transform: translateY(-100%);
}
/* Push content down when header is sticky */
header#main-header.sticky + nav {
  margin-top: 70px;
}

/* ---- BREADCRUMBS ---- */
.breadcrumbs {
  padding: 12px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #666;
}
.breadcrumbs ol li::after {
  content: '›';
  margin: 0 8px;
  color: #444;
}
.breadcrumbs ol li:last-child::after {
  content: '';
  margin: 0;
}
.breadcrumbs ol li a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs ol li a:hover {
  color: var(--accent, #f5c400);
}
.breadcrumbs .breadcrumb-current {
  color: #ccc;
}

/* ---- TRUST BADGES ---- */
.trust-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 20px;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  margin: 40px 0 0;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
  font-weight: 500;
}
.trust-badge span {
  color: #aaa;
}

/* ---- PRODUCT PAGE: Trust badges inline ---- */
.product-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.product-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  font-size: 11px;
  color: #999;
  white-space: nowrap;
}

/* ---- IMPORT DUTY NOTICE ---- */
.duty-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(245,196,0,0.08);
  border: 1px solid rgba(245,196,0,0.2);
  border-radius: 8px;
  font-size: 12px;
  color: #cca800;
  margin: 12px 0;
}

/* ---- LAZY LOADING IMAGE FADE-IN ---- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
  opacity: 1;
}
/* Fallback: show after short delay even without JS */
@keyframes lazyShow {
  to { opacity: 1; }
}
img[loading="lazy"] {
  animation: lazyShow 0.5s ease 0.5s forwards;
}

/* ---- PRODUCT CARD: loading="lazy" already set ---- */
/* Already in product-card.php via the upgrade */

/* ---- SHIPPING BADGE (Ships From) ---- */
.ships-from-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(0,229,195,0.1);
  border: 1px solid rgba(0,229,195,0.3);
  border-radius: 4px;
  font-size: 11px;
  color: #00e5c3;
  font-weight: 600;
}

/* ---- OUT OF STOCK OVERLAY ---- */
.product-card.out-of-stock .product-img::after {
  content: 'OUT OF STOCK';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  color: #ff4444;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
.product-card.out-of-stock .product-img {
  position: relative;
}
.product-card.out-of-stock .product-img img {
  opacity: 0.4;
}

/* ---- POLICY PAGES ---- */
.policy-content h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.5px;
}
.policy-content p {
  margin-bottom: 12px;
}
.policy-content a {
  color: var(--accent, #f5c400);
  text-decoration: none;
}
.policy-content a:hover {
  text-decoration: underline;
}

/* ---- RESPONSIVE FIXES ---- */
@media (max-width: 768px) {
  .trust-badges {
    gap: 12px;
    padding: 20px 12px;
  }
  .trust-badge {
    font-size: 11px;
  }
  .breadcrumbs {
    padding: 8px 12px;
  }
  .breadcrumbs ol {
    font-size: 11px;
  }
  header#main-header.sticky + nav {
    margin-top: 60px;
  }
}