/* ==========================================================================
   Nevoura — Shop Archive Redesign v1
   Applies to the WooCommerce shop page and product category/tag archives.
   No template overrides: this restyles the default WooCommerce loop markup
   (ul.products > li.product) with the exact same token system already used
   on the single product page (assets/css/product-page.css), so the shop
   grid and the product page feel like one continuous design.
   Everything is scoped under body.woocommerce (or archive body classes)
   with !important on a handful of high-specificity theme collisions, same
   reasoning documented in product-page.css re: theme button/price styles.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap");

.woocommerce ul.products,
.woocommerce-page ul.products {
  --nv-sp-ink:      #0c0c0c;
  --nv-sp-mid:      #3a3a3a;
  --nv-sp-muted:    #8a8a8a;
  --nv-sp-border:   #e3e3e3;
  --nv-sp-surface:  #f7f6f4;
  --nv-sp-accent:   var(--nv-accent, #d7fe03);
  --nv-sp-card-bg:  #e7e7e4;
  --nv-sp-radius:   20px;
  --nv-sp-radius-sm: 12px;

  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Hide any leftover default page title the theme prints on top of our
   own header (belt-and-braces alongside the woocommerce_show_page_title
   filter added in PHP — some themes render their own title outside of
   that filter's reach). */
.woocommerce-products-header__title.page-title { display: none !important; }

/* ---------- Shop header (eyebrow / title / rule) ---------- */
/* Mirrors the "Choose Your Theme" header 1:1 via the shared .nvp4-header /
   .nv-eyebrow / .nv-section-title / .nv-rule / .nv-rule-dot classes, which
   are already styled site-wide. These rules are a fallback only — they
   won't override the site's existing styling for those classes, they just
   make sure the header still looks right if this page is ever the first
   place those classes are used. */
.nv-shop-header {
  max-width: 1280px;
  margin: 0 auto !important;
  margin-top: 56px !important;
  padding: 0 20px 32px !important;
  text-align: center;
}
@media (max-width: 600px) {
  .nv-shop-header { margin-top: 36px !important; padding-bottom: 24px !important; }
}
.nv-shop-header .nv-eyebrow {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nv-sp-muted, #8a8a8a);
  margin: 0 0 12px;
}
.nv-shop-header .nv-section-title {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--nv-sp-ink, #0c0c0c);
  margin: 0 0 20px;
  line-height: 1.1;
}
.nv-shop-header .nv-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 240px;
  margin: 0 auto;
}
.nv-shop-header .nv-rule::before,
.nv-shop-header .nv-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nv-sp-border, #e3e3e3);
}
.nv-shop-header .nv-rule-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nv-sp-ink, #0c0c0c);
  flex: none;
  transform: rotate(45deg);
}

/* ---------- Toolbar: result count + sort dropdown ---------- */
.woocommerce-result-count,
.woocommerce-ordering {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 1280px;
  margin: 0 auto 20px !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}
@media (max-width: 960px) {
  .woocommerce-result-count,
  .woocommerce-ordering { padding: 0 16px !important; }
}
.woocommerce-result-count {
  font-size: .82rem;
  color: #8a8a8a;
}
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: #0c0c0c;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  padding: 9px 36px 9px 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\' fill=\'none\'%3E%3Cpath d=\'M5 8l5 5 5-5\' stroke=\'%23888888\' stroke-width=\'1.6\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.woocommerce-ordering select.orderby:focus { outline: none; border-color: #0c0c0c; }

/* ---------- Grid ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 32px 24px;
  max-width: 1280px;
  margin: 0 auto 48px !important;
  padding: 0 20px !important;
  list-style: none !important;
  box-sizing: border-box;
}
@media (max-width: 960px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; padding: 0 16px !important; }
}
@media (max-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: 1fr; gap: 32px; padding: 0 16px !important; }
}

/* ---------- Card ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  color: var(--nv-sp-ink);
  position: relative;
}

/* Image block: same rounded / muted-backdrop treatment as the gallery on
   the single product page, so a shopper lands on a card that feels like
   a preview of the product page they're about to open. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  text-decoration: none !important;
  color: inherit;
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--nv-sp-radius) !important;
  background: var(--nv-sp-card-bg);
  margin: 0 0 16px !important;
  display: block;
}

/* Sale badge, repositioned to float over the image like a price tag
   rather than the theme's default top-left square. */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: var(--nv-sp-ink) !important;
  color: var(--nv-sp-accent) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--nv-sp-ink) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-size: .88rem !important;
  color: var(--nv-sp-mid) !important;
  margin: 0 0 8px !important;
  display: block;
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  color: var(--nv-sp-muted) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
  color: var(--nv-sp-ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Short description (product excerpt), when the theme prints one into
   the loop — sits between price and the CTA button. */
.woocommerce ul.products li.product > p,
.woocommerce-page ul.products li.product > p {
  font-size: .82rem !important;
  color: var(--nv-sp-muted) !important;
  line-height: 1.5;
  margin: 0 0 16px !important;
  flex: 1 0 auto;
}

/* Rating stars — hide the empty placeholder WooCommerce prints even
   when a product has zero reviews, rather than showing a dead row. */
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
  display: none !important;
}

/* CTA button — identical flat/outline/accent treatment as the single
   product page's Add to Cart button, so the two pages read as one
   family rather than two different button systems. */
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button {
  font-family: inherit !important;
  background: var(--nv-sp-accent) !important;
  color: var(--nv-sp-ink) !important;
  border: 1.5px solid var(--nv-sp-ink) !important;
  border-radius: var(--nv-sp-radius-sm) !important;
  padding: 0 20px !important;
  height: 46px;
  min-height: 46px;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: auto !important;
  transition: background .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.button:hover {
  background: #fff !important;
}
.woocommerce ul.products li.product a.button:active,
.woocommerce-page ul.products li.product a.button:active {
  transform: scale(.98);
}
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce-page ul.products li.product a.added_to_cart {
  font-size: .75rem !important;
  color: var(--nv-sp-mid) !important;
  margin-top: 8px !important;
  text-decoration: underline;
}

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
  max-width: 1280px;
  margin: 8px auto 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
  border: none !important;
  gap: 8px;
  display: flex !important;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span {
  font-family: "DM Sans", sans-serif !important;
  font-size: .82rem !important;
  font-weight: 600;
  color: var(--nv-sp-ink) !important;
  border: 1px solid var(--nv-sp-border) !important;
  border-radius: 10px !important;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
  background: var(--nv-sp-ink) !important;
  color: #fff !important;
  border-color: var(--nv-sp-ink) !important;
}