/* ================================================================
   ZOONUM — SHOP PAGE CSS v2.1 (ADDITIVE)
   This file ONLY styles shop-specific sections.
   Everything else (buttons, stats bar, product grid, labels,
   sections, disclaimer) inherits from the Homepage CSS.
   ──────────────────────────────────────────────────────────────
   CHANGES FROM v2.0:
   - Ensured the WooCommerce shortcode wrapper (now nested INSIDE
     .zn-block-1) is fully transparent, so the hex texture on
     .zn-block-1::after shows through the products grid.
   - Added padding-bottom on the shortcode wrapper so products
     aren't flush against the next section (CTA).
   ──────────────────────────────────────────────────────────────
   Paste into: WPCode > Add Snippet > CSS Snippet
   Requires:   Homepage CSS snippet must also be active
================================================================ */

/* ================================================================
   SHOP HERO BANNER
   ──────────────────────────────────────────────────────────────
   In the HTML, replace these two image URLs:
   1. <img src="Set via the page's Featured Image (desktop 2000x822).
   2. <source srcset="Mobile crop is handled by object-fit.
================================================================ */
/* ── Parent wrapper override — allow hero to break out ── */
.zn-wrap.zn-block-1 {
  overflow-x: visible !important;
  overflow:   visible !important;
}

.zn-shop-hero {
  position:    relative;
  width:       100vw !important;
  max-width:   100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  min-height:  580px;
  display:     flex;
  align-items: center;
  overflow:    hidden;
  margin-top:  0 !important;
}
.zn-shop-hero__bg {
  position:        absolute;
  top:             0;
  left:            0;
  width:           100% !important;
  height:          100% !important;
  object-fit:      cover !important;
  object-position: center center;
  z-index:         0;
  display:         block !important;
}
.zn-shop-hero__overlay {
  position:   absolute;
  top:        0;
  left:       0;
  width:      100% !important;
  height:     100% !important;
  background: linear-gradient(90deg,
    rgba(8,12,20,0.85) 0%,
    rgba(8,12,20,0.55) 38%,
    rgba(8,12,20,0.15) 68%,
    transparent 100%);
  z-index:    1;
}
.zn-shop-hero__inner {
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            16px;
  padding-top:    64px;
  padding-bottom: 64px;
}

/* Breadcrumbs */
.zn-shop-hero__crumbs {
  font-family:    'Montserrat', sans-serif;
  font-size:      12px;
  font-weight:    500;
  color:          rgba(255,255,255,0.5);
  display:        flex;
  align-items:    center;
  gap:            6px;
}
.zn-shop-hero__crumbs a {
  color:      rgba(255,255,255,0.7) !important;
  transition: color 0.2s;
}
.zn-shop-hero__crumbs a:hover { color: #fff !important; }

/* Title */
.zn-shop-hero__title {
  font-family:    'Montserrat', sans-serif;
  font-size:      clamp(34px, 5vw, 62px);
  font-weight:    800;
  color:          #fff;
  line-height:    1.05;
  letter-spacing: -0.025em;
  text-shadow:    0 2px 20px rgba(0,0,0,0.3);
}

/* Subtitle */
.zn-shop-hero__sub {
  font-family: 'Montserrat', sans-serif;
  font-size:   16px;
  font-weight: 400;
  color:       rgba(255,255,255,0.72);
  max-width:   460px;
  line-height: 1.72;
}

/* CTA button — blue-tinted glass like homepage hero */
.zn-shop-hero .zn-btn--cta {
  background:  rgba(var(--zn-primary-rgb), 0.2) !important;
  border:      1px solid rgba(var(--zn-primary-rgb), 0.4) !important;
  color:       #fff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.zn-shop-hero .zn-btn--cta:hover {
  background: rgba(var(--zn-primary-rgb), 0.35) !important;
  color:      #fff !important;
}
.zn-shop-hero .zn-btn__cta-circle {
  background: #fff;
}
.zn-shop-hero .zn-btn__cta-circle svg {
  stroke: var(--zn-primary) !important;
}
.zn-shop-hero .zn-btn--cta:hover .zn-btn__cta-circle {
  background: #f1f5f9;
}

/* ================================================================
   ★ NEW v2.1: Transparent shortcode wrapper INSIDE .zn-block-1
   Since the shortcode is now nested inside .zn-block-1, we need
   to make sure the WooCommerce wrapper doesn't paint its own bg
   on top of the hex texture. Also adds bottom padding so products
   don't flush against the next section.
================================================================ */
.zn-wrap.zn-block-1 .wp-block-shortcode,
.zn-wrap.zn-block-1 > .woocommerce,
.zn-wrap.zn-block-1 > .woocommerce.columns-4,
.zn-wrap.zn-block-1 .woocommerce,
.zn-wrap.zn-block-1 .woocommerce-page {
  background:       transparent !important;
  background-color: transparent !important;
}
/* Bottom breathing room before CTA section */
.zn-wrap.zn-block-1 {
  padding-bottom: 72px !important;
}

/* ── Sorting bar — constrained inside the WooCommerce wrapper ── */
.woocommerce-result-count,
.wp-block-shortcode .woocommerce-result-count,
.woocommerce .woocommerce-result-count,
.woocommerce-js .woocommerce-result-count {
  font-family:   'Montserrat', sans-serif !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  color:         var(--zn-text-muted) !important;
  margin:        20px 0 16px 0 !important;
  padding:       0 !important;
  float:         left !important;
  width:         auto !important;
  max-width:     none !important;
  position:      relative !important;
}
.woocommerce-ordering,
.wp-block-shortcode .woocommerce-ordering,
.woocommerce .woocommerce-ordering,
.woocommerce-js .woocommerce-ordering {
  margin:  20px 0 16px 0 !important;
  padding: 0 !important;
  float:   right !important;
  width:   auto !important;
}
.woocommerce-ordering select,
.wp-block-shortcode .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select,
.woocommerce-js .woocommerce-ordering select {
  font-family:   'Montserrat', sans-serif !important;
  font-size:     13px !important;
  font-weight:   500 !important;
  color:         var(--zn-text) !important;
  background:    #fff !important;
  border:        1px solid var(--zn-border) !important;
  border-radius: 8px !important;
  padding:       8px 36px 8px 14px !important;
  cursor:        pointer;
  outline:       none !important;
  transition:    border-color 0.2s;
}
.woocommerce-ordering select:focus,
.wp-block-shortcode .woocommerce-ordering select:focus {
  border-color: var(--zn-primary) !important;
}







/* ── Shop summary wrapper ── */

.zn-shop-summary-wrap {
  padding: 14px 18px 6px !important;
}








/* ================================================================
   BOTTOM CTA SECTION
================================================================ */
.zn-shop-cta__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   64px;
  align-items:           center;
}
.zn-shop-cta__text {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}
.zn-shop-cta__body {
  font-family:   'Montserrat', sans-serif;
  font-size:     16px;
  color:         var(--zn-text-muted);
  line-height:   1.78;
  margin-bottom: 28px;
  max-width:     440px;
}

/* Contact cards (right column) */
.zn-shop-cta__visual {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}
.zn-shop-cta__card {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       20px 22px;
  background:    var(--zn-light);
  border:        1px solid var(--zn-border);
  border-radius: 14px;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.zn-shop-cta__card:hover {
  border-color: var(--zn-primary-bdr);
  box-shadow:   0 4px 16px rgba(0,0,0,0.04);
}
.zn-shop-cta__card-icon {
  width:           46px;
  height:          46px;
  min-width:       46px;
  background:      var(--zn-primary-bg);
  border:          1px solid var(--zn-primary-bdr);
  border-radius:   12px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--zn-primary);
}
.zn-shop-cta__card-icon svg { width: 20px; height: 20px; }
.zn-shop-cta__card-label {
  font-family: 'Montserrat', sans-serif;
  font-size:   14px;
  font-weight: 700;
  color:       var(--zn-text);
  display:     block;
  line-height: 1.2;
}
.zn-shop-cta__card-sub {
  font-family: 'Montserrat', sans-serif;
  font-size:   12px;
  font-weight: 400;
  color:       var(--zn-text-muted);
  display:     block;
  margin-top:  2px;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
  .zn-shop-cta__inner { gap: 40px; }
}

@media (max-width: 768px) {
  /* Hero */
  .zn-shop-hero {
    min-height: 420px;
  }
  .zn-shop-hero__overlay {
    background: linear-gradient(180deg,
      rgba(8,12,20,0.72) 0%,
      rgba(8,12,20,0.65) 100%) !important;
  }
  .zn-shop-hero__inner {
    align-items:    center;
    text-align:     center;
    padding-top:    40px;
    padding-bottom: 40px;
  }
  .zn-shop-hero__sub {
    max-width: 100%;
    font-size: 14px;
  }
  .zn-shop-hero__crumbs { justify-content: center; }

  /* ★ v2.1 Mobile: tighter bottom padding on block-1 */
  .zn-wrap.zn-block-1 {
    padding-bottom: 56px !important;
  }

  

  /* CTA: stack */
  .zn-shop-cta__inner {
    display:        flex !important;
    flex-direction: column !important;
    gap:            28px;
    text-align:     center;
  }
  .zn-shop-cta__text { align-items: center; }
  .zn-shop-cta__body { max-width: 100%; }
}

@media (max-width: 480px) {
  .zn-shop-hero {
    min-height: 360px;
  }
  .zn-shop-hero__title {
    font-size: clamp(26px, 8vw, 36px);
  }
  .zn-shop-hero__sub { font-size: 13px; }
  .zn-shop-hero__inner {
    padding-top:    32px;
    padding-bottom: 32px;
    gap:            12px;
  }

  /* ★ v2.1 Phone: tighter bottom padding */
  .zn-wrap.zn-block-1 {
    padding-bottom: 44px !important;
  }

  

  /* Card padding */
  .zn-shop-summary-wrap {
    padding: 10px 14px 4px !important;
  }
  

  .zn-shop-cta__card {
    padding: 16px 18px;
  }
  .zn-shop-cta__card-icon {
    width:     40px;
    height:    40px;
    min-width: 40px;
  }
  .zn-shop-cta__card-icon svg { width: 18px; height: 18px; }
}