/* ================================================================
   ZOONUM — WOOCOMMERCE NOTICES CSS v1.0
   WPCode: CSS Snippet
   Styles all WooCommerce notice types: error, success, info
   ================================================================ */


/* ════════════════════════════════════════════════════════
   SHARED BASE — applies to all three notice types
   ════════════════════════════════════════════════════════ */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  font-family:   'Montserrat', sans-serif !important;
  font-size:     14px !important;
  font-weight:   600 !important;
  line-height:   1.5 !important;
  list-style:    none !important;
  margin:        0 0 24px !important;
  padding:       16px 20px 16px 52px !important;
  border-radius: 12px !important;
  border-width:  1px !important;
  border-style:  solid !important;
  position:      relative !important;
  box-shadow:    none !important;
  background-image: none !important;
}

/* Icon slot — shared ::before base */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  position:     absolute !important;
  left:         18px !important;
  top:          50% !important;
  transform:    translateY(-50%) !important;
  font-size:    18px !important;
  font-weight:  700 !important;
  line-height:  1 !important;
  width:        24px !important;
  height:       24px !important;
  display:      flex !important;
  align-items:  center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

/* List items inside notices */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  font-family: 'Montserrat', sans-serif !important;
  font-size:   14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
}

/* Multiple list items spacing */
.woocommerce-error li + li,
.woocommerce-message li + li,
.woocommerce-info li + li {
  margin-top: 6px !important;
}

/* Links inside notices */
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
  text-decoration: underline !important;
  font-weight:     700 !important;
  transition:      opacity 0.2s !important;
}

.woocommerce-error a:hover,
.woocommerce-message a:hover,
.woocommerce-info a:hover {
  opacity: 0.8 !important;
}

/* "Undo?" and action buttons inside notices */
.woocommerce-message .restore-item,
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  font-family:     'Montserrat', sans-serif !important;
  font-size:       12px !important;
  font-weight:     700 !important;
  text-transform:  uppercase !important;
  letter-spacing:  0.04em !important;
  border-radius:   6px !important;
  padding:         6px 14px !important;
  margin-left:     12px !important;
  text-decoration: none !important;
  display:         inline-block !important;
  transition:      background 0.2s, transform 0.15s !important;
  float:           right !important;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
  transform: translateY(-1px) !important;
}


/* ════════════════════════════════════════════════════════
   ERROR — red tones
   ════════════════════════════════════════════════════════ */
.woocommerce-error {
  background:   #fef2f2 !important;
  border-color: #fecaca !important;
  color:        #991b1b !important;
}

.woocommerce-error::before {
  content:    '!' !important;
  background: #ef4444 !important;
  color:      #ffffff !important;
  font-size:  14px !important;
}

.woocommerce-error li {
  color: #991b1b !important;
}

.woocommerce-error a {
  color: #b91c1c !important;
}

.woocommerce-error .button {
  background:   #fee2e2 !important;
  color:        #991b1b !important;
  border:       1px solid #fecaca !important;
}

.woocommerce-error .button:hover {
  background: #fecaca !important;
}


/* ════════════════════════════════════════════════════════
   SUCCESS — green tones
   ════════════════════════════════════════════════════════ */
.woocommerce-message {
  background:   #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color:        #166534 !important;
}

.woocommerce-message::before {
  content:    '✓' !important;
  background: #10b981 !important;
  color:      #ffffff !important;
  font-size:  13px !important;
}

.woocommerce-message li {
  color: #166534 !important;
}

.woocommerce-message a {
  color: #15803d !important;
}

.woocommerce-message .button,
.woocommerce-message .restore-item {
  background:   #dcfce7 !important;
  color:        #166534 !important;
  border:       1px solid #bbf7d0 !important;
}

.woocommerce-message .button:hover,
.woocommerce-message .restore-item:hover {
  background: #bbf7d0 !important;
}


/* ════════════════════════════════════════════════════════
   INFO — ZN signature blue tones
   ════════════════════════════════════════════════════════ */
.woocommerce-info {
  background:   #eff6ff !important;
  border-color: #bfdbfe !important;
  color:        #1e40af !important;
}

.woocommerce-info::before {
  content:    'i' !important;
  background: var(--zn-primary) !important;
  color:      #ffffff !important;
  font-size:  13px !important;
  font-style: italic !important;
}

.woocommerce-info li {
  color: #1e40af !important;
}

.woocommerce-info a {
  color: var(--zn-primary) !important;
}

.woocommerce-info .button {
  background:   #dbeafe !important;
  color:        #1e40af !important;
  border:       1px solid #bfdbfe !important;
}

.woocommerce-info .button:hover {
  background: #bfdbfe !important;
}

/* Remove inherited ::after decorations */
.woocommerce-error::after,
.woocommerce-message::after,
.woocommerce-info::after {
  content: none !important;
  display: none !important;
}


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

  .woocommerce-error,
  .woocommerce-message,
  .woocommerce-info {
    font-size:     13px !important;
    padding:       14px 16px 14px 46px !important;
    border-radius: 10px !important;
  }

  .woocommerce-error::before,
  .woocommerce-message::before,
  .woocommerce-info::before {
    left:   14px !important;
    width:  22px !important;
    height: 22px !important;
  }

  .woocommerce-message .button,
  .woocommerce-error .button,
  .woocommerce-info .button {
    float:       none !important;
    display:     block !important;
    margin:      8px 0 0 !important;
    text-align:  center !important;
    width:       100% !important;
  }
}

@media (max-width: 480px) {

  .woocommerce-error,
  .woocommerce-message,
  .woocommerce-info {
    font-size: 12px !important;
    padding:   12px 14px 12px 42px !important;
  }

  .woocommerce-error::before,
  .woocommerce-message::before,
  .woocommerce-info::before {
    left:      12px !important;
    width:     20px !important;
    height:    20px !important;
    font-size: 11px !important;
  }
}/* ================================================================
   ZOONUM — OUT OF STOCK TREATMENT (CSS)
   WPCode: CSS Snippet
   - Frosted white blur on OOS thumbnails
   - Centered "OUT OF STOCK" label overlay
   - Unified disabled button styling (text swap handled by JS)
   - Hides the default OOS badge
   ================================================================ */

/* ---------- 1. Thumbnail wrapper: anchor for overlay ---------- */
li.product.outofstock .woocommerce-LoopProduct-link,
li.product.outofstock a.woocommerce-LoopProduct-link,
li.product.outofstock .zn-shop-thumbnail-wrap,
li.product.outofstock .product-image,
.product.outofstock .woocommerce-LoopProduct-link,
.product.outofstock a.woocommerce-LoopProduct-link,
.product.outofstock .zn-shop-thumbnail-wrap,
.product.outofstock .product-image {
  position: relative !important;
  overflow: hidden !important;
  display:  block !important;
}

/* ---------- 2. Frosted white blur layer ---------- */
li.product.outofstock .woocommerce-LoopProduct-link::before,
li.product.outofstock a.woocommerce-LoopProduct-link::before,
li.product.outofstock .zn-shop-thumbnail-wrap::before,
li.product.outofstock .product-image::before,
.product.outofstock .woocommerce-LoopProduct-link::before,
.product.outofstock a.woocommerce-LoopProduct-link::before,
.product.outofstock .zn-shop-thumbnail-wrap::before,
.product.outofstock .product-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter:         blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
  z-index: 2;
  pointer-events: none;
}

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

/* ---------- 4. Unified disabled OOS button (JS swaps the text) ---------- */
a.zn-oos-btn,
button.zn-oos-btn,
.zn-oos-btn {
  background:      #94a3b8 !important;
  border-color:    #94a3b8 !important;
  color:           #4b5563 !important;
  cursor:          not-allowed !important;
  opacity:         0.6 !important;
  box-shadow:      none !important;
  pointer-events:  none !important;
  transform:       none !important;
  font-family:     'Montserrat', sans-serif !important;
  font-size:       11px !important;
  font-weight:     700 !important;
  letter-spacing:  0.05em !important;
  text-transform:  uppercase !important;
  text-align:      center !important;
  text-indent:     0 !important;
  line-height:     normal !important;
  overflow:        visible !important;
}

/* Kill any legacy ::after/::before on the button (prevents overlap) */
a.zn-oos-btn::before,
a.zn-oos-btn::after,
button.zn-oos-btn::before,
button.zn-oos-btn::after,
.zn-oos-btn::before,
.zn-oos-btn::after {
  content: none !important;
  display: none !important;
}
/* ══════════════════════════════════════════════════════════
   PRODUCT ARCHIVE LAYOUT
   Used by woocommerce/archive-product.php (category/tag pages and
   the Woo shop page when the "Zoonum — Shop" page template is not
   in use). Optional filter sidebar comes from the Shop Sidebar
   widget area.
   ══════════════════════════════════════════════════════════ */
.shop-layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   calc(var(--zn-gap) * 1.5);
}

.has-shop-sidebar .shop-layout {
  grid-template-columns: 260px minmax(0, 1fr);
}

.shop-main {
  min-width: 0;
}

.shop-sidebar .widget {
  background:    var(--zn-light-card);
  border:        1px solid var(--zn-border);
  border-radius: var(--zn-radius);
  padding:       18px;
  margin-bottom: var(--zn-gap);
}

.shop-sidebar .widget-title {
  font-family:    var(--zn-font-heading);
  font-size:      13px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--zn-primary);
  margin:         0 0 14px;
}

.shop-sidebar ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

.shop-sidebar li {
  margin-bottom: 8px;
}

.shop-toolbar {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   var(--zn-gap);
}

@media (max-width: 900px) {
  .has-shop-sidebar .shop-layout {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD  (template-parts/components/product-card.php)
   Renders in every product loop: shop, archives, related,
   upsells and the homepage featured grid.
   ══════════════════════════════════════════════════════════ */

/* ── Grid ── */
ul.products {
  display:               grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   24px;
  list-style:            none !important;
  margin:                0 0 32px !important;
  padding:               0 !important;
}

ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products::before,
ul.products::after { display: none !important; }

@media (max-width: 1024px) {
  ul.products,
  ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  ul.products,
  ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* ── Card shell ── */
ul.products li.product.zn-card {
  display:        flex;
  flex-direction: column;
  width:          auto !important;
  float:          none !important;
  margin:         0 !important;
  padding:        0 !important;
  background:     var(--zn-light);
  border:         1px solid var(--zn-border);
  border-radius:  var(--zn-radius);
  overflow:       hidden;
  transition:     box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

ul.products li.product.zn-card:hover {
  border-color: var(--zn-primary-bdr);
  box-shadow:   0 10px 32px rgba(15, 23, 42, 0.10);
  transform:    translateY(-3px);
}

/* ── Media ── */
.zn-card__media {
  position:   relative;
  display:    block;
  background: var(--zn-light-alt);
}

.zn-card__media img {
  display:      block !important;
  width:        100% !important;
  height:       auto !important;
  aspect-ratio: 1 / 1;
  object-fit:   cover;
  margin:       0 !important;
}

.zn-card__badge {
  position:       absolute;
  top:            12px;
  left:           12px;
  z-index:        3;
  background:     var(--zn-primary);
  color:          #fff;
  font-family:    var(--zn-font-heading);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:        4px 10px;
  border-radius:  999px;
}

/* The card renders its own badge — hide Woo's default flash */
ul.products li.product.zn-card .onsale {
  display: none !important;
}

/* ── Body ── */
.zn-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  gap:            6px;
  padding:        14px 16px 16px;
}

.zn-card__title {
  margin:      0 !important;
  padding:     0 !important;
  font-size:   14px;
  line-height: 1.35;
}

.zn-card__title a {
  font-family:     var(--zn-font-heading);
  font-weight:     700;
  color:           var(--zn-dark);
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
}

.zn-card__title a:hover {
  color: var(--zn-primary);
}

.zn-card__price {
  font-family: var(--zn-font-body);
  font-size:   15px;
  font-weight: 600;
  color:       var(--zn-dark);
  line-height: 1.3;
}

.zn-card__price .price {
  margin: 0 !important;
  color:  inherit !important;
}

.zn-card__price del {
  color:        var(--zn-text-light);
  font-weight:  400;
  font-size:    13px;
  margin-right: 6px;
}

.zn-card__price ins {
  text-decoration: none;
  color:           var(--zn-primary);
}

/* ── Button (below the price, full width) ── */
.zn-card__button {
  margin-top: auto;
  padding-top: 8px;
}

.zn-card__button .button,
.zn-card__button a.button {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  margin:          0 !important;
  padding:         10px 14px !important;
  background:      var(--zn-primary-bg) !important;
  color:           var(--zn-primary) !important;
  border:          1px solid var(--zn-primary-bdr) !important;
  border-radius:   8px !important;
  font-family:     var(--zn-font-heading) !important;
  font-size:       12.5px !important;
  font-weight:     700 !important;
  letter-spacing:  0.02em;
  text-transform:  none;
  transition:      background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.zn-card__button .button:hover,
.zn-card__button a.button:hover {
  background:   var(--zn-primary) !important;
  color:        #fff !important;
  border-color: var(--zn-primary) !important;
}

.zn-card__button .added_to_cart {
  display:     block;
  margin-top:  8px;
  text-align:  center;
  font-size:   12.5px;
  font-weight: 600;
  color:       var(--zn-primary);
}

/* Out-of-stock cards: dim the button */
li.product.outofstock .zn-card__button .button {
  opacity:        0.55;
  pointer-events: none;
}

/* ── Pagination under grids ── */
.zn-products-pagination {
  display:         flex;
  justify-content: center;
  gap:             6px;
  margin:          8px 0 40px;
}

.zn-products-pagination .page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       40px;
  height:          40px;
  padding:         0 12px;
  border:          1px solid var(--zn-border);
  border-radius:   8px;
  background:      var(--zn-light);
  color:           var(--zn-text);
  font-family:     var(--zn-font-heading);
  font-size:       13px;
  font-weight:     600;
  text-decoration: none;
  transition:      border-color 0.2s ease, color 0.2s ease;
}

.zn-products-pagination .page-numbers:hover {
  border-color: var(--zn-primary);
  color:        var(--zn-primary);
}

.zn-products-pagination .page-numbers.current {
  background:   var(--zn-primary);
  border-color: var(--zn-primary);
  color:        #fff;
}