/* ============================================================
   NORDEN Store — Custom CSS
   Design System: Scandinavian Minimal · Sage Green · Warm Neutral
   ============================================================ */

* { font-family: 'Inter', system-ui, -apple-system, sans-serif; box-sizing: border-box; }

/* ==================== FOUC PREVENTION ==================== */
/* Applied before Tailwind CDN loads — keeps overlays/sidebars hidden during initial render */
.opacity-0 { opacity: 0 }
.pointer-events-none { pointer-events: none }
.-translate-x-full { transform: translateX(-100%) }
.translate-x-full { transform: translateX(100%) }
.hidden { display: none }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #F5F5F3; }
::-webkit-scrollbar-thumb { background: #C5C5C3; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6B8F71; }

/* ==================== SCROLL REVEAL ==================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ==================== PRODUCT DESCRIPTION HTML ==================== */
.product-description p { margin-bottom: 0.75rem; line-height: 1.65; }
.product-description h1,.product-description h2,.product-description h3,.product-description h4 {
  font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #1A1A1A;
}
.product-description ul,.product-description ol { padding-left: 1.4rem; margin-bottom: 0.75rem; }
.product-description ul { list-style: disc; }
.product-description ol { list-style: decimal; }
.product-description li { margin-bottom: 0.3rem; }
.product-description strong,.product-description b { font-weight: 700; }
.product-description em,.product-description i { font-style: italic; }
.product-description a { color: #6B8F71; text-decoration: underline; }
.product-description br + br { display: none; }

/* ==================== CAP PRICE — hidden until JS confirms real discount == */
/* Starts invisible so the crossed-out price never flashes before the check */
.cap-price { opacity: 0; }

/* ==================== FILTER SIDEBAR — DESKTOP STICKY ==================== */
@media (min-width: 1024px) {
  #filtersSidebar {
    position: sticky;
    top: var(--header-h, 108px);
    max-height: calc(100vh - var(--header-h, 108px));
    overflow-y: auto;
    align-self: flex-start;
  }
}

/* ==================== PRODUCT DESCRIPTION HTML ==================== */
.desc-html p { margin-bottom: 0.75rem; color: #555; line-height: 1.7; }
.desc-html p:last-child { margin-bottom: 0; }
.desc-html strong, .desc-html b { font-weight: 700; color: #1A1A1A; }
.desc-html ul { margin: 0.75rem 0 0.75rem 1.5rem; list-style: disc; }
.desc-html ol { margin: 0.75rem 0 0.75rem 1.5rem; list-style: decimal; }
.desc-html li { margin-bottom: 0.35rem; line-height: 1.6; }
.desc-html h1, .desc-html h2, .desc-html h3 { font-weight: 700; color: #1A1A1A; margin: 1rem 0 0.5rem; }
.desc-html br + br { display: none; }

/* ==================== HEADER ==================== */
#siteHeader {
  transition: box-shadow 0.3s ease;
}
#mainNav {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
#mainNav.nav-shadow {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
}
#backToTop {
  transition: opacity 0.3s ease;
}

/* ==================== FILTER ANIMATION ==================== */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.product-card.card-entering {
  animation: cardEnter 0.28s ease forwards;
}

/* ==================== PRODUCT CARD ==================== */
.product-card {
  position: relative;
  border-radius: 18px;
  background: white;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.09);
}
.product-card .card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.product-card .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.product-card:hover .card-img-wrap img {
  transform: scale(1.07);
}
.product-card .atc-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  background: rgba(107, 143, 113, 0.96);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  cursor: pointer;
  letter-spacing: 0.4px;
  border: none;
  width: 100%;
}
.product-card:hover .atc-overlay { transform: translateY(0); }

.product-card .wishlist-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  background: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 2;
}
.product-card:hover .wishlist-btn { opacity: 1; }
.product-card .wishlist-btn:hover { transform: scale(1.15); }

/* ==================== CATEGORY CHIP ==================== */
.cat-chip {
  display: inline-flex; align-items: center;
  padding: 9px 22px;
  border-radius: 50px;
  font-size: 13.5px; font-weight: 500;
  border: 1.5px solid #EAE7E1;
  color: #555;
  background: white;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.22s ease;
}
.cat-chip:hover, .cat-chip.active {
  background: #6B8F71;
  color: white;
  border-color: #6B8F71;
}

/* ==================== RANGE SLIDER ==================== */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%; height: 4px;
  background: #EAE7E1; border-radius: 2px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #6B8F71; cursor: pointer;
  box-shadow: 0 2px 6px rgba(107,143,113,0.4);
}

/* ==================== TESTIMONIAL SLIDER ==================== */
.testimonial-wrap { overflow: hidden; }
#testimonialTrack {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#testimonialTrack > * { min-width: 100%; }

/* ==================== FORM INPUTS ==================== */
.form-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #EAE7E1;
  border-radius: 12px;
  font-size: 14px;
  color: #1A1A1A;
  background: white;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.form-input:focus {
  border-color: #6B8F71;
  box-shadow: 0 0 0 3px rgba(107,143,113,0.12);
}
.form-input::placeholder { color: #aaa; }

/* ==================== STARS ==================== */
.stars { color: #F5A623; letter-spacing: 1px; }

/* ==================== BADGES ==================== */
.badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.badge-new { background: #6B8F71; color: white; }
.badge-sale { background: #E85D5D; color: white; }
.badge-hot { background: #F59E0B; color: white; }

/* ==================== SCROLLBAR HIDE ==================== */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.animate-fade-in    { animation: fadeIn 0.4s ease forwards; }

/* ==================== GALLERY THUMB ==================== */
.gallery-thumb {
  border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: ring 0.2s ease, opacity 0.2s ease;
  border: 2px solid transparent;
}
.gallery-thumb.active { border-color: #6B8F71; }
.gallery-thumb img { transition: transform 0.4s ease; }
.gallery-thumb:hover img { transform: scale(1.06); }

/* ==================== HERO BLOB ==================== */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  pointer-events: none;
}

/* ==================== CART SIDEBAR ==================== */
#cartSidebar {
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
#cartOverlay, #mobileMenuOverlay, #searchOverlay {
  transition: opacity 0.3s ease;
}

/* ==================== OVERLAY ==================== */
.overlay-bg {
  background: rgba(26, 26, 26, 0.45);
  backdrop-filter: blur(2px);
}

/* ==================== CHECKOUT STEPS ==================== */
.step-connector {
  flex: 1; height: 2px; background: #EAE7E1; margin: 0 8px;
}
.step-connector.done { background: #6B8F71; }

/* ==================== CTA BUTTON ==================== */
.btn-primary {
  background: #6B8F71; color: white;
  padding: 14px 32px; border-radius: 50px;
  font-weight: 600; font-size: 15px;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; border: none;
}
.btn-primary:hover {
  background: #5a7860;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107,143,113,0.35);
}
.btn-secondary {
  background: transparent; color: #1A1A1A;
  padding: 13px 30px; border-radius: 50px;
  font-weight: 600; font-size: 15px;
  border: 1.5px solid #1A1A1A;
  transition: all 0.25s ease;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.btn-secondary:hover {
  background: #1A1A1A; color: white;
  transform: translateY(-2px);
}

/* ==================== LINE CLAMP ==================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================== PROMO BADGE ==================== */
.promo-circle {
  width: 90px; height: 90px;
  background: #6B8F71; color: white;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(107,143,113,0.4);
}

/* ==================== PAGINATION ==================== */
.page-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500;
  border: 1.5px solid #EAE7E1;
  color: #555; background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}
.page-btn:hover, .page-btn.active {
  background: #6B8F71; color: white; border-color: #6B8F71;
}

/* ==================== BRAND LOGO STRIP ==================== */
.brand-logo {
  filter: grayscale(100%) opacity(0.45);
  transition: filter 0.3s ease;
  cursor: pointer;
}
.brand-logo:hover { filter: grayscale(0%) opacity(1); }

/* ==================== MOBILE MENU ==================== */
#mobileMenu {
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== STICKY FILTER SIDEBAR ==================== */
@media (min-width: 1024px) {
  .filter-sidebar { position: sticky; top: 100px; }
}

/* ==================== SHOPIFY CART — NORDEN THEME ==================== */
shopify-cart::part(dialog) {
  border-radius: 0;
  max-width: 420px;
  border-left: none;
}
shopify-cart::part(primary-button) {
  background: #6B8F71;
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.25s ease;
}
shopify-cart::part(primary-button):hover { background: #5a7860; }
shopify-cart::part(secondary-button) {
  background: white;
  color: #1A1A1A;
  fill: #1A1A1A;
  border: 1.5px solid #EAE7E1;
  border-radius: 8px;
  cursor: pointer;
}

/* ==================== SHOPIFY VARIANT SELECTOR — NORDEN THEME ==================== */
shopify-variant-selector::part(form) {
  gap: 8px;
  flex-wrap: wrap;
}
shopify-variant-selector::part(label) {
  font-size: 12px;
  font-weight: 700;
  color: #1A1A1A;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  display: block;
}
shopify-variant-selector::part(radio) {
  border: 1.5px solid #EAE7E1;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: white;
  color: #555;
  transition: all 0.2s ease;
}
shopify-variant-selector::part(radio):hover { border-color: #6B8F71; color: #6B8F71; }
shopify-variant-selector::part(radio-selected) {
  border-color: #6B8F71;
  background: #6B8F71;
  color: white;
}
shopify-variant-selector::part(radio-disabled) {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
shopify-variant-selector::part(color-swatch) {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #EAE7E1;
  cursor: pointer;
}
shopify-variant-selector::part(color-swatch-selected) {
  border-color: #6B8F71;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #6B8F71;
}

/* ==================== COMPARE-AT / SALE PRICE ==================== */
.cap-price { display: inline; }
.cap-price shopify-money:empty { display: none; }
.atc-overlay:disabled {
  background: rgba(170,170,170,0.85);
  cursor: not-allowed;
}
.btn-primary:disabled,.btn-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-secondary:disabled,.btn-secondary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}