/**
 * Critical CSS - inlined in head for first paint.
 *
 * Scope intentionally limited to:
 * - baseline reset/typography
 * - header shell/fixed offsets
 * - hero frame
 * - first product card frame
 * - initial add-to-cart stock text hiding
 *
 * Non-critical component styling lives in feature files
 * (e.g. brands-swiper.css, numart_main.css, main-gallery.css).
 */

/* Base reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html font-size / text-size-adjust: set in base.css (overrides this when loaded); omit here to avoid overridden duplicate */
body {
  margin: 0;
  line-height: 1.5;
  color: var(--nm-primary-color) !important;
  background-color: var(--nm-body-bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Basic layout containers (safe base only) */


/* Header shell (first paint) */


/* .region-header background/box-shadow: defined in header-fixed.css (desktop + mobile) to avoid overridden duplicate rules */


@media (max-width: 768px) {
  body {
    padding-top: 0 !important;
  }
}


.site-logo img,
.header-logo img {
  width: auto;
  height: 60px;
}

/* Hero frame */


.main-gallery-swiper,
.swiper-slide {
  width: 100%;
}


/* First visible products row frame */


.product-teaser,
article.product {
  border-radius: 8px;
  overflow: visible;
  transition: box-shadow 0.3s ease;
}


.product-image {
  position: relative;
  overflow: hidden;
  background: #f8f8f8;
  border-radius: 10px;
  width: 320px;
  height: 340px;
}

.product-teaser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image .swatch-overlay-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.product-image .swatch-overlay-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.product-info {
  padding-right: 10px;
}

.product-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f0f0f0;
  z-index: -1;
}

/* Prevent add-to-cart stock text flash before JS state resolves */


.commerce-order-item-add-to-cart-form .button--add-to-cart.stock-ready,
.cart-modal .button--add-to-cart.stock-ready,
.cart-modal .form-submit.stock-ready {
  color: #fff !important;
}

.form-select {
background-color: transparent !important;
}
/* Mobile critical adjustments */
@media (max-width: 768px) {
  .header-container {
    padding: 8px 10px;
  }

  .site-logo img,
  .header-logo img {
    height: 45px;
  }

  .gallery-slide-content img {
    height: calc(100vh - 100px);
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .product-info {
    padding: 10px;
  }

  .product-title {
    font-size: 13px;
  }
}