/* ================================================================
   ZOONUM — SINGLE PRODUCT PAGE CSS v1.1
   WPCode: CSS Snippet
   Styles WooCommerce single product pages
   ================================================================
   v1.1 — Removed Add to Cart ::after plus-circle icon
          (replaced by the custom +/− quantity stepper)
   ================================================================ */

/* ════════════════════════════════════════════════════════
   BACKGROUND — replaceable overlay image
   Replace the URL below with your desired background image
   ════════════════════════════════════════════════════════ */
body.single-product {
  position: relative;
}
body.single-product::before {
  content:             '';
  position:            absolute;
  inset:               0;
  z-index:             0;
  background-image:    var(--zn-bg-product, none);
  background-size:     cover;
  background-position: right center;
  background-repeat:   no-repeat;
  opacity:             0.5;
  pointer-events:      none;
}
/* Page content above overlay */
body.single-product .site-content,
body.single-product #content,
body.single-product #primary {
  position: relative;
  z-index:  1;
}

/* ════════════════════════════════════════════════════════
   BREADCRUMB
   ════════════════════════════════════════════════════════ */
body.single-product .woocommerce-breadcrumb {
  font-family: 'Montserrat', sans-serif !important;
  font-size:   12px !important;
  font-weight: 500 !important;
  color:       var(--zn-text-muted) !important;
  margin-bottom: 24px !important;
}
body.single-product .woocommerce-breadcrumb a {
  color:           var(--zn-primary) !important;
  text-decoration: none !important;
  transition:      color 0.2s;
}
body.single-product .woocommerce-breadcrumb a:hover {
  color: var(--zn-primary-dark) !important;
}

/* ════════════════════════════════════════════════════════
   PRODUCT IMAGE
   ════════════════════════════════════════════════════════ */
body.single-product .woocommerce-product-gallery {
  background:    #fff !important;
  border:        1px solid var(--zn-border) !important;
  border-radius: 16px !important;
  overflow:      hidden !important;
  padding:       0 !important;
}
body.single-product .woocommerce-product-gallery img {
  border-radius: 16px !important;
}
body.single-product .woocommerce-product-gallery__trigger {
  background:    #fff !important;
  border:        1px solid var(--zn-border) !important;
  border-radius: 8px !important;
  width:         36px !important;
  height:        36px !important;
  top:           12px !important;
  right:         12px !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
}

/* ════════════════════════════════════════════════════════
   PRODUCT SUMMARY
   ════════════════════════════════════════════════════════ */
body.single-product .summary.entry-summary {
  padding-left: 20px !important;
}

/* Product Title */
body.single-product h1.product_title,
body.single-product .product_title.entry-title {
  font-family:    'Montserrat', sans-serif !important;
  font-size:      clamp(24px, 3vw, 32px) !important;
  font-weight:    800 !important;
  color:          var(--zn-text) !important;
  letter-spacing: -0.02em !important;
  margin-bottom:  12px !important;
  line-height:    1.2 !important;
}

/* Price */
body.single-product .price,
body.single-product p.price {
  font-family: 'Montserrat', sans-serif !important;
  font-size:   26px !important;
  font-weight: 700 !important;
  color:       #000000 !important;
  margin-bottom: 8px !important;
}
body.single-product .price del {
  color:       var(--zn-text-muted) !important;
  opacity:     0.5 !important;
  font-size:   18px !important;
  font-weight: 500 !important;
}
body.single-product .price ins {
  text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════
   QUANTITY INPUT (default — overridden when stepper loads)
   ════════════════════════════════════════════════════════ */
body.single-product .quantity {
  margin-right: 12px !important;
}
body.single-product .quantity input[type="number"],
body.single-product .quantity .qty {
  font-family:   'Montserrat', sans-serif !important;
  font-size:     14px !important;
  font-weight:   600 !important;
  color:         var(--zn-text) !important;
  background:    #f1f5f9 !important;
  border:        1px solid var(--zn-border) !important;
  border-radius: 10px !important;
  width:         64px !important;
  height:        46px !important;
  text-align:    center !important;
  outline:       none !important;
  transition:    border-color 0.2s !important;
}
body.single-product .quantity input[type="number"]:focus {
  border-color: var(--zn-primary) !important;
}

/* ════════════════════════════════════════════════════════
   ADD TO CART BUTTON — clean pill (no plus icon)
   The plus-circle ::after has been removed because
   the custom +/− quantity stepper makes it redundant.
   ════════════════════════════════════════════════════════ */
body.single-product button.single_add_to_cart_button,
body.single-product .single_add_to_cart_button {
  font-family:        'Montserrat', sans-serif !important;
  font-size:          13px !important;
  font-weight:        700 !important;
  text-transform:     uppercase !important;
  letter-spacing:     0.06em !important;
  background:         var(--zn-primary) !important;
  color:              #fff !important;
  border:             none !important;
  border-radius:      50px !important;
  padding:            14px 32px !important;
  cursor:             pointer !important;
  transition:         background 0.25s, transform 0.2s, box-shadow 0.25s !important;
  box-shadow:         0 4px 14px rgba(var(--zn-primary-rgb), 0.3) !important;
  line-height:        1.2 !important;
  position:           relative !important;
  display:            inline-flex !important;
  align-items:        center !important;
}
body.single-product button.single_add_to_cart_button:hover {
  background:   var(--zn-primary-dark) !important;
  transform:    translateY(-2px) !important;
  box-shadow:   0 6px 20px rgba(var(--zn-primary-rgb), 0.4) !important;
}

/* Kill the old plus-circle pseudo-element */
body.single-product button.single_add_to_cart_button::after,
body.single-product .single_add_to_cart_button::after {
  content: none !important;
  display: none !important;
}

/* ════════════════════════════════════════════════════════
   PRODUCT META (category, tags, SKU)
   ════════════════════════════════════════════════════════ */
body.single-product .product_meta {
  font-family: 'Montserrat', sans-serif !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  color:       var(--zn-text-muted) !important;
  margin-top:  20px !important;
  padding-top: 20px !important;
  border-top:  1px solid var(--zn-border) !important;
}
body.single-product .product_meta a {
  color:           var(--zn-primary) !important;
  text-decoration: none !important;
  font-weight:     600 !important;
  transition:      color 0.2s;
}
body.single-product .product_meta a:hover {
  color: var(--zn-primary-dark) !important;
}

/* ════════════════════════════════════════════════════════
   TABS (Description, Reviews, etc.)
   ════════════════════════════════════════════════════════ */
body.single-product .woocommerce-tabs {
  margin-top:    48px !important;
  border-top:    1px solid var(--zn-border) !important;
  padding-top:   0 !important;
}
body.single-product .woocommerce-tabs ul.tabs,
body.single-product .woocommerce-tabs ul.wc-tabs {
  display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
  display: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li {
  background:    transparent !important;
  border:        none !important;
  border-radius: 0 !important;
  margin:        0 !important;
  padding:       0 !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition:    border-color 0.2s;
}
body.single-product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--zn-primary) !important;
}
body.single-product .woocommerce-tabs ul.tabs li a {
  font-family:     'Montserrat', sans-serif !important;
  font-size:       14px !important;
  font-weight:     600 !important;
  color:           var(--zn-text-muted) !important;
  text-decoration: none !important;
  padding:         14px 24px !important;
  display:         block !important;
  transition:      color 0.2s;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--zn-text) !important;
}
body.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--zn-text) !important;
}

/* Tab content */
body.single-product .woocommerce-tabs .panel,
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
  font-family: 'Montserrat', sans-serif !important;
  font-size:   14px !important;
  color:       var(--zn-text-muted) !important;
  line-height: 1.8 !important;
}
body.single-product .woocommerce-tabs .panel h2 {
  display: none !important;
}

/* ════════════════════════════════════════════════════════
   RELATED PRODUCTS
   ════════════════════════════════════════════════════════ */
body.single-product section.related.products {
  margin-top:  56px !important;
  padding-top: 40px !important;
  border-top:  1px solid var(--zn-border) !important;
}
body.single-product section.related.products > h2 {
  font-family:    'Montserrat', sans-serif !important;
  font-size:      22px !important;
  font-weight:    700 !important;
  color:          var(--zn-text) !important;
  margin-bottom:  28px !important;
  letter-spacing: -0.02em;
}

















/* ════════════════════════════════════════════════════════
   RELATED PRODUCTS — OUT OF STOCK TREATMENT
   ════════════════════════════════════════════════════════ */

body.single-product section.related.products li.product.outofstock .woocommerce-LoopProduct-link,
body.single-product section.related.products li.product.outofstock a.woocommerce-LoopProduct-link,
body.single-product section.related.products li.product.outofstock .zn-shop-thumbnail-wrap,
body.single-product section.related.products li.product.outofstock .product-image {
  position:  relative !important;
  overflow:  hidden !important;
  display:   block !important;
  isolation: isolate;
}

body.single-product section.related.products li.product.outofstock .woocommerce-LoopProduct-link::before,
body.single-product section.related.products li.product.outofstock a.woocommerce-LoopProduct-link::before,
body.single-product section.related.products li.product.outofstock .zn-shop-thumbnail-wrap::before,
body.single-product section.related.products li.product.outofstock .product-image::before {
  content:                 '' !important;
  position:                absolute !important;
  inset:                   0 !important;
  background:              rgba(255, 255, 255, 0.25) !important;
  backdrop-filter:         blur(4px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.1) !important;
  z-index:                 2 !important;
  pointer-events:          none !important;
  border-radius:           12px 12px 0 0 !important;
}

body.single-product section.related.products li.product.outofstock .woocommerce-LoopProduct-link::after,
body.single-product section.related.products li.product.outofstock a.woocommerce-LoopProduct-link::after,
body.single-product section.related.products li.product.outofstock .zn-shop-thumbnail-wrap::after,
body.single-product section.related.products li.product.outofstock .product-image::after {
  content:         'OUT OF STOCK' !important;
  position:        absolute !important;
  inset:           0 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       clamp(10px, 2.2vw, 14px) !important;
  font-weight:     800 !important;
  letter-spacing:  0.12em !important;
  text-transform:  uppercase !important;
  color:           #ffffff !important;
  text-shadow:     0 2px 12px rgba(0, 0, 0, 0.45) !important;
  text-align:      center !important;
  z-index:         3 !important;
  pointer-events:  none !important;
  white-space:     nowrap !important;
}






/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.single-product::before {
    background-size: 120% auto !important;
  }
  body.single-product .summary.entry-summary {
    padding-left: 0 !important;
    margin-top:   24px !important;
  }
  body.single-product h1.product_title {
    font-size: clamp(22px, 5vw, 28px) !important;
  }
  body.single-product .price {
    font-size: 22px !important;
  }
  body.single-product section.related.products > h2 {
    font-size: 18px !important;
  }
  
}

@media (max-width: 480px) {
  body.single-product::before {
    background-size: 160% auto !important;
  }
  body.single-product h1.product_title {
    font-size: 22px !important;
  }
  body.single-product .price {
    font-size: 20px !important;
  }
  body.single-product button.single_add_to_cart_button {
    width:           100% !important;
    padding:         14px 32px !important;
    justify-content: center !important;
  }
  
  
  
}/* ================================================================
   ZOONUM — TRUST SECTIONS CSS v1.1
   WPCode: CSS Snippet
   Append to existing ZN single-product CSS OR add as new snippet
   ================================================================

   Styles three injected features:
   1. .zn-trust-bar        → 3-column icon row below Add to Cart
   1b..zn-coa-card         → COA Library CTA card
   2. .zn-notices-wrap      → "IMPORTANT" card + 2×2 trust badges
   3. .zn-qty-stepper       → Custom +/− quantity stepper
   ================================================================ */


/* ════════════════════════════════════════════════════════
   1. TRUST ICONS BAR (below Add to Cart)
   ════════════════════════════════════════════════════════ */
body.single-product .zn-trust-bar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              16px;
  margin-top:       24px;
  padding:          18px 24px;
  background:       #f5f7fa;
  border:           1px solid var(--zn-border);
  border-radius:    12px;
}

body.single-product .zn-trust-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex:        1;
}

/* Divider between items */
body.single-product .zn-trust-item + .zn-trust-item {
  border-left:  1px solid var(--zn-border);
  padding-left: 16px;
}

/* Icon circle */
body.single-product .zn-trust-icon {
  width:           42px;
  height:          42px;
  min-width:       42px;
  background:      rgba(var(--zn-primary-rgb), 0.08);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--zn-primary);
  transition:      background 0.2s, transform 0.2s;
}

body.single-product .zn-trust-item:hover .zn-trust-icon {
  background: rgba(var(--zn-primary-rgb), 0.14);
  transform:  scale(1.05);
}

/* Text stack */
body.single-product .zn-trust-text {
  display:        flex;
  flex-direction: column;
}

body.single-product .zn-trust-title {
  font-family:   'Montserrat', sans-serif;
  font-size:     13px;
  font-weight:   700;
  color:         var(--zn-text);
  line-height:   1.2;
}

body.single-product .zn-trust-sub {
  font-family: 'Montserrat', sans-serif;
  font-size:   11px;
  font-weight: 500;
  color:       var(--zn-text-muted);
  line-height: 1.3;
  margin-top:  2px;
}


/* ════════════════════════════════════════════════════════
   1b. COA LIBRARY CARD (below trust bar)
   ════════════════════════════════════════════════════════ */
body.single-product .zn-coa-card {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           20px;
  margin-top:    14px;
  padding:       22px 24px;
  background:    #f5f7fa;
  border:        1px solid var(--zn-border);
  border-radius: 12px;
}

body.single-product .zn-coa-content {
  flex: 1;
}

body.single-product .zn-coa-heading {
  font-family:    'Montserrat', sans-serif;
  font-size:      16px;
  font-weight:    800;
  color:          var(--zn-text);
  letter-spacing: -0.01em;
  line-height:    1.2;
  margin:         0 0 4px;
}

body.single-product .zn-coa-sub {
  font-family: 'Montserrat', sans-serif;
  font-size:   12px;
  font-weight: 500;
  color:       var(--zn-text-muted);
  line-height: 1.4;
  margin:      0;
}

/* CTA button — mirrors the Add to Cart pill style */
body.single-product .zn-coa-btn {
  font-family:        'Montserrat', sans-serif !important;
  font-size:          13px !important;
  font-weight:        700 !important;
  text-transform:     uppercase !important;
  letter-spacing:     0.06em !important;
  background:         var(--zn-primary) !important;
  color:              #fff !important;
  border:             none !important;
  border-radius:      50px !important;
  padding:            14px 56px 14px 24px !important;
  cursor:             pointer !important;
  transition:         background 0.25s, transform 0.2s, box-shadow 0.25s !important;
  box-shadow:         0 4px 14px rgba(var(--zn-primary-rgb), 0.3) !important;
  line-height:        1.2 !important;
  position:           relative !important;
  display:            inline-flex !important;
  align-items:        center !important;
  text-decoration:    none !important;
  white-space:        nowrap !important;
  flex-shrink:        0;
}

body.single-product .zn-coa-btn:hover {
  background:  var(--zn-primary-dark) !important;
  color:       #fff !important;
  transform:   translateY(-2px) !important;
  box-shadow:  0 6px 20px rgba(var(--zn-primary-rgb), 0.4) !important;
}

/* Arrow icon circle (matches Add to Cart plus-circle) */
body.single-product .zn-coa-btn::after {
  content:             '' !important;
  position:            absolute !important;
  right:               6px !important;
  top:                 50% !important;
  transform:           translateY(-50%) !important;
  width:               34px !important;
  height:              34px !important;
  background-color:    rgba(255,255,255,0.2) !important;
  border-radius:       50% !important;
  transition:          background-color 0.2s !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: center !important;
  background-size:     16px 16px !important;
}

body.single-product .zn-coa-btn:hover::after {
  background-color: rgba(255,255,255,0.3) !important;
}


/* ════════════════════════════════════════════════════════
   2. IMPORTANT NOTICE + TRUST BADGES WRAPPER
   ════════════════════════════════════════════════════════ */
body.single-product .zn-notices-wrap {
  max-width:    1140px;
  margin:       40px auto 0;
  padding:      0 28px;
}


/* ──────────────────────────────────────
   2a. IMPORTANT Card
   ────────────────────────────────────── */
body.single-product .zn-important-card {
  background:    #f8f9fb;
  border:        1px solid var(--zn-border);
  border-radius: 14px;
  padding:       0 0 20px;
  overflow:      hidden;
  margin-bottom: 28px;
}

/* Blue banner strip */
body.single-product .zn-important-banner {
  background:    var(--zn-primary);
  padding:       14px 24px;
  margin-bottom: 16px;
}

body.single-product .zn-important-label {
  font-family:    'Montserrat', sans-serif;
  font-size:      15px;
  font-weight:    800;
  color:          #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Bullet list */
body.single-product .zn-important-list {
  list-style:  disc;
  margin:      0;
  padding:     0 24px 0 48px;
}

body.single-product .zn-important-list li {
  font-family:   'Montserrat', sans-serif;
  font-size:     14px;
  font-weight:   600;
  color:         var(--zn-text);
  line-height:   1.6;
  padding:       3px 0;
  margin:        0;
}

body.single-product .zn-important-list li::marker {
  color: var(--zn-text-muted);
}


/* ──────────────────────────────────────
   2b. TRUST BADGES 2×2 Grid
   ────────────────────────────────────── */
body.single-product .zn-badges-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

/* Individual badge card */
body.single-product .zn-badge-card {
  display:       flex;
  align-items:   center;
  gap:           14px;
  background:    #f8f9fb;
  border:        1px solid var(--zn-border);
  border-radius: 12px;
  padding:       18px 20px;
  transition:    border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

body.single-product .zn-badge-card:hover {
  border-color: var(--zn-primary-bdr);
  box-shadow:   0 4px 16px rgba(var(--zn-primary-rgb), 0.06);
  transform:    translateY(-2px);
}

/* Badge icon circle */
body.single-product .zn-badge-icon {
  width:           46px;
  height:          46px;
  min-width:       46px;
  background:      rgba(var(--zn-primary-rgb), 0.08);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--zn-primary);
  transition:      background 0.2s, transform 0.2s;
}

body.single-product .zn-badge-card:hover .zn-badge-icon {
  background: rgba(var(--zn-primary-rgb), 0.14);
  transform:  scale(1.05);
}

/* Badge text */
body.single-product .zn-badge-text {
  display:        flex;
  flex-direction: column;
}

body.single-product .zn-badge-title {
  font-family: 'Montserrat', sans-serif;
  font-size:   14px;
  font-weight: 700;
  color:       var(--zn-text);
  line-height: 1.2;
}

body.single-product .zn-badge-sub {
  font-family: 'Montserrat', sans-serif;
  font-size:   12px;
  font-weight: 500;
  color:       var(--zn-text-muted);
  line-height: 1.3;
  margin-top:  3px;
}

body.single-product .quantity.zn-qty-stepper {
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           0 !important;
  margin-right:  12px !important;
  background:    #f1f5f9 !important;
  border:        1px solid var(--zn-border) !important;
  border-radius: 10px !important;
  padding:       0 !important;
  overflow:      hidden !important;
  height:        46px !important;
}

/* +/− buttons */
body.single-product .zn-qty-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           38px !important;
  height:          46px !important;
  padding:         0 !important;
  margin:          0 !important;
  border:          none !important;
  background:      transparent !important;
  color:           var(--zn-text) !important;
  cursor:          pointer !important;
  transition:      background 0.15s, color 0.15s !important;
  outline:         none !important;
  flex-shrink:     0 !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
  line-height:     1 !important;
  font-size:       0 !important;
}

body.single-product .zn-qty-btn:hover {
  background: rgba(var(--zn-primary-rgb), 0.08) !important;
  color:      var(--zn-primary) !important;
}

body.single-product .zn-qty-btn:active {
  background: rgba(var(--zn-primary-rgb), 0.14) !important;
}

/* Disabled state at min/max */
body.single-product .zn-qty-btn.zn-qty-disabled {
  opacity:        0.3 !important;
  cursor:         default !important;
  pointer-events: none !important;
}

/* Left border on qty input, right border on qty input */
body.single-product .zn-qty-stepper .zn-qty-minus {
  border-right: 1px solid var(--zn-border) !important;
}

body.single-product .zn-qty-stepper .zn-qty-plus {
  border-left: 1px solid var(--zn-border) !important;
}

/* Qty number input inside stepper — override existing styles */
body.single-product .quantity.zn-qty-stepper input[type="number"],
body.single-product .quantity.zn-qty-stepper .qty {
  display:            inline-block !important;
  visibility:         visible !important;
  opacity:            1 !important;
  position:           static !important;
  font-family:        'Montserrat', sans-serif !important;
  font-size:          15px !important;
  font-weight:        700 !important;
  color:              var(--zn-text) !important;
  background:         transparent !important;
  border:             none !important;
  border-radius:      0 !important;
  width:              44px !important;
  min-width:          44px !important;
  height:             46px !important;
  text-align:         center !important;
  outline:            none !important;
  padding:            0 !important;
  margin:             0 !important;
  box-shadow:         none !important;
  -moz-appearance:    textfield !important;
  -webkit-appearance: none !important;
  appearance:         none !important;
}

/* Hide native spinner arrows */
body.single-product .quantity.zn-qty-stepper input[type="number"]::-webkit-outer-spin-button,
body.single-product .quantity.zn-qty-stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin:             0 !important;
}

/* ── Layout: stepper + button sit inline ── */
body.single-product form.cart {
  display:     flex !important;
  align-items: center !important;
  flex-wrap:   wrap !important;
  gap:         0 !important;
}


/* ════════════════════════════════════════════════════════
   5. VARIATION PILLS (replaces dropdown)
   ════════════════════════════════════════════════════════ */

/* Hide the native select when pills are present */
body.single-product .variations select {
  display: none !important;
}

/* Variation label */
body.single-product .variations .label label,
body.single-product .zn-var-label {
  font-family:    'Montserrat', sans-serif !important;
  font-size:      13px !important;
  font-weight:    700 !important;
  color:          var(--zn-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom:  8px !important;
  display:        block !important;
}

/* Pill container */
body.single-product .zn-var-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin:    4px 0 16px;
}

/* Individual pill */
body.single-product .zn-var-pill {
  font-family:     'Montserrat', sans-serif !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  color:           var(--zn-text) !important;
  background:      #f1f5f9 !important;
  border:          2px solid var(--zn-border) !important;
  border-radius:   50px !important;
  padding:         10px 22px !important;
  cursor:          pointer !important;
  transition:      all 0.2s ease !important;
  outline:         none !important;
  line-height:     1.2 !important;
  white-space:     nowrap !important;
  -webkit-appearance: none !important;
  appearance:      none !important;
}

body.single-product .zn-var-pill:hover {
  border-color: var(--zn-primary) !important;
  color:        var(--zn-primary) !important;
  background:   rgba(var(--zn-primary-rgb), 0.04) !important;
}

/* Active / selected pill */
body.single-product .zn-var-pill.zn-var-active {
  background:   var(--zn-primary) !important;
  border-color: var(--zn-primary) !important;
  color:        #ffffff !important;
  box-shadow:   0 2px 8px rgba(var(--zn-primary-rgb), 0.25) !important;
}

body.single-product .zn-var-pill.zn-var-active:hover {
  background:   var(--zn-primary-dark) !important;
  border-color: var(--zn-primary-dark) !important;
  color:        #ffffff !important;
}

/* Hide default variation table styling */
body.single-product .variations {
  border:      none !important;
  margin:      0 0 8px !important;
  padding:     0 !important;
  background:  transparent !important;
}

body.single-product .variations td,
body.single-product .variations tr,
body.single-product .variations th {
  display:    block !important;
  border:     none !important;
  padding:    0 !important;
  background: transparent !important;
}

body.single-product .variations .value {
  margin-bottom: 0 !important;
}

/* Style the "Clear" reset link */
body.single-product .reset_variations {
  font-family:     'Montserrat', sans-serif !important;
  font-size:       12px !important;
  font-weight:     600 !important;
  color:           var(--zn-text-muted) !important;
  text-decoration: none !important;
  margin-left:     4px !important;
  transition:      color 0.2s !important;
}

body.single-product .reset_variations:hover {
  color: #ef4444 !important;
}


/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Trust bar → stack vertical */
  body.single-product .zn-trust-bar {
    flex-direction: column;
    align-items:    flex-start;
    gap:            14px;
    padding:        16px 20px;
  }

  body.single-product .zn-trust-item + .zn-trust-item {
    border-left:   none;
    padding-left:  0;
    border-top:    1px solid var(--zn-border);
    padding-top:   14px;
  }

  body.single-product .zn-trust-item {
    width: 100%;
  }

  /* COA card → stack vertical */
  body.single-product .zn-coa-card {
    flex-direction: column;
    align-items:    flex-start;
    gap:            14px;
    padding:        18px 20px;
  }

  body.single-product .zn-coa-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Notices wrapper padding */
  body.single-product .zn-notices-wrap {
    padding: 0 16px;
    margin-top: 28px;
  }

  /* Badges grid → single column */
  body.single-product .zn-badges-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {

  /* Variation pills — smaller on mobile */
  body.single-product .zn-var-pills {
    gap: 6px;
  }

  body.single-product .zn-var-pill {
    font-size: 12px !important;
    padding:   8px 16px !important;
  }

  body.single-product .zn-trust-bar {
    padding: 14px 16px;
    gap:     12px;
  }

  body.single-product .zn-trust-icon {
    width:     36px;
    height:    36px;
    min-width: 36px;
  }

  body.single-product .zn-trust-icon svg {
    width:  18px;
    height: 18px;
  }

  body.single-product .zn-coa-card {
    padding: 16px;
  }

  body.single-product .zn-coa-heading {
    font-size: 14px;
  }

  body.single-product .zn-coa-sub {
    font-size: 11px;
  }

  body.single-product .zn-notices-wrap {
    padding: 0 12px;
    margin-top: 20px;
  }

  body.single-product .zn-important-banner {
    padding: 12px 18px;
  }

  body.single-product .zn-important-label {
    font-size: 13px;
  }

  body.single-product .zn-important-list {
    padding: 0 18px 0 38px;
  }

  body.single-product .zn-important-list li {
    font-size: 13px;
  }

  body.single-product .zn-badge-card {
    padding: 14px 16px;
    gap:     12px;
  }

  body.single-product .zn-badge-icon {
    width:     40px;
    height:    40px;
    min-width: 40px;
  }

  body.single-product .zn-badge-title {
    font-size: 13px;
  }

  body.single-product .zn-badge-sub {
    font-size: 11px;
  }

  /* Stepper + button → full width stacked */
  body.single-product form.cart {
    flex-direction: column !important;
    align-items:    stretch !important;
    gap:            10px !important;
  }

  body.single-product .quantity.zn-qty-stepper {
    width:           100% !important;
    justify-content: center !important;
    margin-right:    0 !important;
  }

  body.single-product .quantity.zn-qty-stepper .qty {
    flex: 1 !important;
  }

  body.single-product .zn-qty-btn {
    width: 48px !important;
  }
}