/**
 * New World TCG — WooCommerce Skin
 *
 * Mobile-first. Relies on --nw-* tokens defined in theme.css :root.
 * Shared components (.nw-btn, .nw-card, .nw-badge, .nw-chip, .nw-price,
 * .nw-heading, .nw-divider, .nw-container) live in theme.css — not redefined here.
 *
 * Contents:
 *  1.  Shop page chrome (background, hero title bar)
 *  2.  Shop layout: sidebar + content grid
 *  3.  Sidebar: filter groups, category list, chip groups
 *  4.  Product grid (loop / archive)
 *  5.  Product card (.nw-product-card)
 *  6.  Single product page
 *  7.  Pagination
 *  8.  Notices
 *  9.  Result count & ordering bar
 * 10.  Cart page skin
 * 11.  Checkout page skin
 * 12.  Account page skin
 * 13.  Mobile sidebar drawer / overlay
 * 14.  Reduced-motion overrides
 */

/* ============================================================
   1. SHOP PAGE CHROME
   ============================================================ */

.nw-shop-main {
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a1d13 0%, transparent 60%),
    linear-gradient(180deg, #1a130d 0%, var(--nw-bg) 100%);
  min-height: 100vh;
  padding-bottom: 4rem;
}

/* ── Hero title bar ── */
.nw-shop-hero {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
  text-align: center;
}

.nw-shop-title {
  font-size: clamp(1.2rem, 4vw, 2rem);
  letter-spacing: .06em;
  margin-bottom: .6em;
}

/* Divider with subtitle label */
.nw-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  margin-block: .75rem;
  color: var(--nw-text-inv-soft);
}

.nw-divider::before,
.nw-divider::after {
  content: '';
  flex: 1 1 3rem;
  max-width: 160px;
  height: 1px;
  background: var(--nw-line);
}

.nw-divider__label {
  font-family: var(--nw-font-body);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nw-text-inv-soft);
  white-space: nowrap;
}

/* ============================================================
   2. SHOP LAYOUT: TWO-COLUMN (sidebar + grid)
   ============================================================ */

.nw-shop-layout {
  padding-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;       /* Mobile: single column */
  grid-template-rows: auto auto 1fr;
  gap: 0;
  position: relative;
}

/* Filter toggle bar row (mobile) */
.nw-shop-filter-toggle-bar {
  margin-bottom: 1rem;
  grid-column: 1 / -1;
}

.nw-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-inline: 1.25rem;
  height: 44px;
}

.nw-filters-toggle__icon {
  flex-shrink: 0;
}

/* Content area (WC injects .nw-shop-content from inc/woocommerce.php) */
.nw-shop-content {
  min-width: 0;
}

/* ── md+: two-column sidebar+content ── */
@media (min-width: 900px) {

  .nw-shop-filter-toggle-bar {
    display: none; /* Sidebar always visible on desktop */
  }

  .nw-shop-layout {
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 2rem;
    align-items: start;
  }

  /* Sidebar spans both rows (title + content) */
  .nw-shop-sidebar {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  /* Content spans from row 1 */
  .nw-shop-content {
    grid-column: 2;
    grid-row: 1 / 3;
  }

}

@media (min-width: 1200px) {
  .nw-shop-layout {
    grid-template-columns: 260px 1fr;
    gap: 0 2.5rem;
  }
}

/* No-sidebar pages (single product, cart, checkout, account): one column.
   Declared AFTER the 1200px base rule so it overrides the 260px|1fr split at
   every width ≥900px (same specificity → later source wins). */
@media (min-width: 900px) {
  .nw-shop-layout--full {
    grid-template-columns: 1fr;
  }
  .nw-shop-layout--full .nw-shop-content {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ============================================================
   3. SIDEBAR
   ============================================================ */

/* Mobile sidebar: off-canvas drawer from left */
.nw-shop-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 90vw;
  background: var(--nw-panel);
  border-right: 1px solid var(--nw-line);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9000;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}

.nw-shop-sidebar.is-open {
  transform: translateX(0);
}

/* Desktop sidebar: static sticky panel */
@media (min-width: 900px) {
  .nw-shop-sidebar {
    position: sticky;
    top: 80px;       /* Below sticky header */
    transform: none;
    z-index: auto;
    background: var(--nw-panel);
    border: 1px solid var(--nw-line);
    border-radius: var(--nw-radius);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    transition: none;
    width: auto;
    max-width: none;
  }
}

/* ── Sidebar inner container ── */
.nw-sidebar-inner {
  padding: 1.25rem 1rem 2rem;
}

/* Close button (mobile only) */
.nw-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nw-text-inv-soft);
  padding: .25rem .25rem .75rem;
  min-height: 44px;
  transition: color .15s;
}

.nw-sidebar-close:hover,
.nw-sidebar-close:focus-visible {
  color: var(--nw-gold);
}

.nw-sidebar-close:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (min-width: 900px) {
  .nw-sidebar-close {
    display: none;
  }
}

/* ── Filter group (accordion header + collapsible body) ── */
.nw-filter-group {
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--nw-line);
}

.nw-filter-group:last-child {
  border-bottom: none;
}

.nw-filter-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: .9rem .25rem;
  color: var(--nw-text-inv);
  font-family: var(--nw-font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: left;
  min-height: 44px;
  transition: color .15s;
}

.nw-filter-group__header:hover,
.nw-filter-group__header:focus-visible {
  color: var(--nw-gold);
}

.nw-filter-group__header:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.nw-filter-group__chevron {
  flex-shrink: 0;
  color: var(--nw-gold);
  transition: transform .2s ease;
}

.nw-filter-group__header[aria-expanded="false"] .nw-filter-group__chevron {
  transform: rotate(-90deg);
}

/* ── Category list ── */
.nw-filter-cat-list {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
}

.nw-filter-cat-list[hidden] {
  display: none;
}

.nw-filter-cat-list__item {
  margin: 0;
}

.nw-filter-cat-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .4rem .45rem 1rem;
  min-height: 40px;
  color: var(--nw-text-inv-soft);
  font-family: var(--nw-font-body);
  font-size: .85rem;
  text-decoration: none;
  border-radius: 6px;
  transition: color .15s, background .15s;
  position: relative;
}

.nw-filter-cat-list__link::before {
  content: '◆';
  position: absolute;
  left: .1rem;
  font-size: .4rem;
  color: var(--nw-gold);
  opacity: 0;
  transition: opacity .15s;
}

.nw-filter-cat-list__link:hover,
.nw-filter-cat-list__link:focus-visible {
  color: var(--nw-cream);
  background: rgba(201,162,39,.08);
}

.nw-filter-cat-list__link:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
}

.nw-filter-cat-list__item.is-active .nw-filter-cat-list__link,
.nw-filter-cat-list__item.is-active .nw-filter-cat-list__link:hover {
  color: var(--nw-gold);
  font-weight: 600;
}

.nw-filter-cat-list__item.is-active .nw-filter-cat-list__link::before {
  opacity: 1;
}

.nw-filter-cat-list__count {
  font-size: .75rem;
  color: var(--nw-text-inv-soft);
  opacity: .6;
}

/* ── Chip groups (TAAL / BESCHIKBAARHEID) ── */
.nw-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0 .25rem .9rem;
}

.nw-filter-chips[hidden] {
  display: none;
}

/* .nw-chip comes from theme.css; extend here for sidebar context */
.nw-filter-chips .nw-chip {
  font-size: .75rem;
  padding: .3rem .75rem;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: rgba(201,162,39,.06);
  color: var(--nw-text-inv-soft);
  border: 1px solid var(--nw-line);
  border-radius: 999px;
  font-family: var(--nw-font-body);
  font-weight: 500;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.nw-filter-chips .nw-chip:hover,
.nw-filter-chips .nw-chip:focus-visible {
  background: rgba(201,162,39,.15);
  color: var(--nw-gold);
  border-color: var(--nw-gold);
}

.nw-filter-chips .nw-chip:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
}

.nw-filter-chips .nw-chip--active,
.nw-filter-chips .nw-chip[aria-pressed="true"] {
  background: var(--nw-gold);
  color: var(--nw-ink);
  border-color: var(--nw-gold);
  font-weight: 700;
}

/* Overlay behind mobile sidebar */
.nw-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 8999;
  opacity: 0;
  transition: opacity .25s ease;
}

.nw-sidebar-overlay.is-visible {
  display: block;
}

.nw-sidebar-overlay.is-active {
  opacity: 1;
}

/* ============================================================
   4. PRODUCT GRID (WooCommerce loop / archive)
   ============================================================ */

/* WooCommerce wraps the loop in <ul class="products"> */
.woocommerce ul.products,
.woocommerce-page ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;        /* Mobile: 1 col */
  gap: 1.25rem;
}

/* WooCommerce core adds clearfix ::before/::after on ul.products. In a CSS
   grid those pseudo-elements become grid ITEMS, occupying the first (and a
   trailing) cell — which pushes the real first card into column 2 and wraps
   the rest. Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}

@media (min-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr); /* sm: 2 col */
  }
}

@media (min-width: 900px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr); /* md: 3 col (sidebar present) */
    gap: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr); /* lg: stays 3 with sidebar */
    gap: 1.75rem;
  }
}

/* No-sidebar pages (cart, checkout, account) — let grid fill */
.nw-single-product-main .woocommerce ul.products,
.nw-single-product-main .woocommerce-page ul.products {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .nw-single-product-main .woocommerce ul.products,
  .nw-single-product-main .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   5. PRODUCT CARD (.nw-product-card)
   ============================================================ */

/* li.nw-card reset — theme.css defines .nw-card; WC adds .product.
   WooCommerce core CSS (woocommerce.css) sets `ul.products li.product`
   to `float:left; width:30.75%`. Inside our CSS grid that width resolves
   against the grid CELL (e.g. 30.75% of 260px ≈ 80px), collapsing every
   card to a sliver. Override with higher specificity so each card fills
   its grid track. */
.woocommerce ul.products li.product.nw-card,
.woocommerce-page ul.products li.product.nw-card {
  width: 100%;
  float: none;
  margin: 0;
}

li.nw-card.product {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--nw-cream);
  border: 1px solid var(--nw-line-light);
  border-radius: var(--nw-radius);
  box-shadow: var(--nw-shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

li.nw-card.product:hover {
  box-shadow: 0 8px 32px rgba(28,20,16,.18);
  transform: translateY(-2px);
}

/* ── Thumbnail area ── */
.nw-product-card__thumb-link {
  display: block;
  position: relative;
}

.nw-product-card__thumb-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--nw-cream-2);
  overflow: hidden;
}

.nw-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .3s ease;
}

li.nw-card.product:hover .nw-product-card__img {
  transform: scale(1.03);
}

/* ── Badge (top-left overlay) ── */
.nw-product-card__badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 2;
  font-size: .65rem;
  padding: .2rem .6rem;
  letter-spacing: .08em;
  pointer-events: none;
}

/* .nw-badge variants from theme.css —
   --available: crimson bg / cream text
   --preorder:  gold outline
   --soldout:   muted grey */

/* ── Card body ── */
.nw-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .85rem .9rem 1rem;
  gap: .3rem;
}

/* Title */
.nw-product-card__title {
  font-family: var(--nw-font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--nw-ink);
  margin: 0 0 .1em;
  line-height: 1.3;

  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nw-product-card__title-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.nw-product-card__title-link:hover,
.nw-product-card__title-link:focus-visible {
  color: var(--nw-red);
}

.nw-product-card__title-link:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Language note */
.nw-product-card__lang {
  font-family: var(--nw-font-body);
  font-size: .78rem;
  color: var(--nw-text-soft);
  margin: 0;
}

/* Price — .nw-price from theme.css; extend for card */
.nw-product-card__price {
  margin: .25rem 0 .5rem;
}

.nw-product-card__price .price,
.nw-product-card__price .woocommerce-Price-amount {
  font-family: var(--nw-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nw-gold);
}

.nw-product-card__price .price del {
  color: var(--nw-text-soft);
  font-size: .85rem;
  font-weight: 400;
  margin-right: .3em;
}

.nw-product-card__price .price ins {
  text-decoration: none;
}

/* CTA button — pushes to bottom via flex */
.nw-product-card__cta {
  margin-top: auto;
}

.nw-product-card__cta .nw-btn {
  font-size: .8rem;
  padding-block: .55rem;
  min-height: 44px;
}

/* Outline CTA (out-of-stock / pre-order) sits on the CREAM card, where the
   theme's default --nw-cream button text is invisible. Use dark ink text with
   a gold-deep border so it reads, and fill on hover/focus. */
.nw-product-card__cta .nw-btn--outline {
  color: var(--nw-ink);
  border-color: var(--nw-gold-deep);
  background: transparent;
}
.nw-product-card__cta .nw-btn--outline:hover,
.nw-product-card__cta .nw-btn--outline:focus-visible {
  background: var(--nw-gold-deep);
  color: var(--nw-paper);
  border-color: var(--nw-gold-deep);
}

/* WooCommerce sometimes injects its own add-to-cart button inside .product;
   hide it so our custom button is the only CTA. */
li.nw-card.product .button:not(.nw-btn),
li.nw-card.product .add_to_cart_button:not(.nw-btn) {
  display: none !important;
}

/* ── Onsale flash badge (WC default) — hide: we use our .nw-badge ── */
li.nw-card.product .onsale {
  display: none;
}

/* ============================================================
   6. SINGLE PRODUCT PAGE
   ============================================================ */

.nw-single-product-main {
  padding-bottom: 3rem;
}

/* Cream content panel on dark page */
.nw-single-product-panel {
  background: var(--nw-cream);
  border-radius: var(--nw-radius-lg);
  padding: 1.5rem 1.25rem;
  margin-top: 1.5rem;
  box-shadow: var(--nw-shadow);
}

@media (min-width: 600px) {
  .nw-single-product-panel {
    padding: 2rem;
  }
}

@media (min-width: 900px) {
  .nw-single-product-panel {
    padding: 2.5rem 2rem;
    margin-top: 2rem;
  }
}

/* Two-column gallery + summary layout */
.nw-single-product__layout {
  display: grid;
  grid-template-columns: 1fr;  /* Mobile: stacked */
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .nw-single-product__layout {
    grid-template-columns: 1fr 1fr;  /* md+: gallery | summary */
    gap: 2.5rem;
    align-items: start;
  }
}

/* ── Gallery column ── */
.nw-single-product__gallery {
  position: relative;
}

/* WooCommerce gallery images */
.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  border-radius: var(--nw-radius);
  overflow: hidden;
}

.woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--nw-radius);
  display: block;
}

/* WC sale flash on single — style it */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  background: var(--nw-red);
  color: #fff;
  font-family: var(--nw-font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 999px;
  padding: .3rem .75rem;
  min-height: auto;
  line-height: 1;
  top: .75rem;
  left: .75rem;
  right: auto;
}

/* ── Summary column ── */
.nw-single-product__summary {
  color: var(--nw-ink);
}

/* Product title */
.nw-single-product__summary .product_title {
  font-family: var(--nw-font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--nw-ink);
  letter-spacing: .03em;
  margin: 0 0 .6rem;
  line-height: 1.15;
}

/* Price on single */
.nw-single-product__summary .price,
.nw-single-product__summary .woocommerce-Price-amount {
  font-family: var(--nw-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--nw-gold);
}

.nw-single-product__summary p.price,
.nw-single-product__summary span.price {
  margin: .75rem 0 1rem;
}

/* Rating */
.nw-single-product__summary .woocommerce-product-rating {
  margin-bottom: .75rem;
}

.star-rating {
  color: var(--nw-gold);
}

.star-rating::before,
.star-rating span::before {
  color: var(--nw-gold);
}

/* Short description */
.nw-single-product__summary .woocommerce-product-details__short-description {
  font-family: var(--nw-font-body);
  font-size: .9rem;
  color: var(--nw-text);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Add to cart form */
.nw-single-product__summary form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.nw-single-product__summary .quantity .qty {
  width: 70px;
  height: 48px;
  border: 1.5px solid var(--nw-line-light);
  border-radius: var(--nw-radius);
  background: #fff;
  color: var(--nw-ink);
  font-family: var(--nw-font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 0 .5rem;
  outline: none;
  transition: border-color .15s;
}

.nw-single-product__summary .quantity .qty:focus {
  border-color: var(--nw-gold);
  box-shadow: 0 0 0 2px rgba(201,162,39,.2);
}

/* Add-to-cart button — skin native WC button to match .nw-btn--primary */
.nw-single-product__summary .single_add_to_cart_button {
  background: var(--nw-red);
  color: #fff;
  font-family: var(--nw-font-body);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--nw-radius);
  padding: .75rem 1.5rem;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease;
  flex: 1 1 auto;
}

.nw-single-product__summary .single_add_to_cart_button:hover,
.nw-single-product__summary .single_add_to_cart_button:focus-visible {
  background: var(--nw-red-2);
}

.nw-single-product__summary .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
}

/* Product meta (category, tags, SKU) */
.nw-single-product__summary .product_meta {
  font-size: .82rem;
  color: var(--nw-text-soft);
  border-top: 1px solid var(--nw-line-light);
  padding-top: .9rem;
  margin-top: .9rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.nw-single-product__summary .product_meta a {
  color: var(--nw-red);
  text-decoration: none;
}

.nw-single-product__summary .product_meta a:hover {
  text-decoration: underline;
}

/* Product data tabs */
.woocommerce-tabs {
  margin-top: 2rem;
}

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  list-style: none;
  margin: 0 0 0;
  padding: 0;
  border-bottom: 2px solid var(--nw-line-light);
}

.woocommerce-tabs ul.tabs li {
  margin: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: .6rem 1.1rem;
  min-height: 44px;
  font-family: var(--nw-font-body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--nw-text-soft);
  text-decoration: none;
  border-radius: var(--nw-radius) var(--nw-radius) 0 0;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
}

.woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li.active a {
  color: var(--nw-ink);
  background: var(--nw-cream-2);
}

.woocommerce-tabs ul.tabs li.active a {
  border-bottom: 2px solid var(--nw-red);
  margin-bottom: -2px;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 1.25rem 0;
  color: var(--nw-text);
  font-size: .9rem;
  line-height: 1.7;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-family: var(--nw-font-display);
  font-size: 1rem;
  color: var(--nw-ink);
  margin-bottom: .75rem;
}

/* Related products section */
.nw-related-products-section {
  padding-top: 2.5rem;
}

.nw-related-products-section .related.products > h2 {
  font-family: var(--nw-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nw-text-inv);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  text-align: center;
}

/* ============================================================
   7. PAGINATION
   ============================================================ */

.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
  margin-top: 2rem;
  text-align: center;
}

.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.woocommerce-pagination ul.page-numbers li,
.woocommerce nav.woocommerce-pagination ul li {
  margin: 0;
}

.woocommerce-pagination ul.page-numbers .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .4rem;
  font-family: var(--nw-font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--nw-text-inv-soft);
  border: 1px solid var(--nw-line);
  border-radius: 6px;
  text-decoration: none;
  background: rgba(255,255,255,.04);
  transition: background .15s, color .15s, border-color .15s;
}

.woocommerce-pagination ul.page-numbers .page-numbers:hover,
.woocommerce-pagination ul.page-numbers .page-numbers:focus-visible,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible {
  background: rgba(201,162,39,.12);
  color: var(--nw-gold);
  border-color: var(--nw-gold);
}

.woocommerce-pagination ul.page-numbers .page-numbers:focus-visible,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
}

.woocommerce-pagination ul.page-numbers .current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--nw-gold);
  color: var(--nw-ink);
  border-color: var(--nw-gold);
  font-weight: 700;
}

/* Chevron links (prev / next) */
.woocommerce-pagination ul.page-numbers .prev,
.woocommerce-pagination ul.page-numbers .next,
.woocommerce nav.woocommerce-pagination ul li a[class*="prev"],
.woocommerce nav.woocommerce-pagination ul li a[class*="next"] {
  font-size: 1rem;
  letter-spacing: 0;
}

/* ============================================================
   8. NOTICES
   ============================================================ */

.woocommerce-notices-wrapper,
.woocommerce .woocommerce-notices-wrapper {
  margin-bottom: 1.25rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--nw-radius);
  padding: .85rem 1.1rem;
  margin: 0 0 .75rem;
  font-family: var(--nw-font-body);
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.woocommerce-message {
  background: rgba(160, 30, 30, .1);
  border-left: 3px solid var(--nw-red);
  color: var(--nw-cream);
}

.woocommerce-info {
  background: rgba(201,162,39,.1);
  border-left: 3px solid var(--nw-gold);
  color: var(--nw-cream);
}

.woocommerce-error {
  background: rgba(180, 40, 40, .15);
  border-left: 3px solid var(--nw-red-2);
  color: var(--nw-cream);
  list-style: none;
  margin: 0;
  padding: .85rem 1.1rem;
}

.woocommerce-message a,
.woocommerce-info a {
  color: var(--nw-gold);
  font-weight: 600;
  text-decoration: none;
  margin-left: auto;
  padding: .3rem .8rem;
  border: 1px solid var(--nw-gold);
  border-radius: 6px;
  font-size: .8rem;
  transition: background .15s;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover {
  background: rgba(201,162,39,.15);
}

/* ============================================================
   9. RESULT COUNT & ORDERING BAR
   ============================================================ */

.woocommerce-result-count {
  color: var(--nw-text-inv-soft);
  font-family: var(--nw-font-body);
  font-size: .82rem;
  margin: 0 0 .75rem;
}

.woocommerce-ordering {
  margin: 0 0 .75rem;
}

.woocommerce-ordering select.orderby {
  background: var(--nw-bg-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  color: var(--nw-text-inv);
  font-family: var(--nw-font-body);
  font-size: .85rem;
  padding: .5rem .85rem;
  height: 40px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a227' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2rem;
}

.woocommerce-ordering select.orderby:focus {
  border-color: var(--nw-gold);
  box-shadow: 0 0 0 2px rgba(201,162,39,.2);
}

/* Wrap count + ordering in a flex row */
.nw-shop-content .woocommerce-result-count,
.nw-shop-content .woocommerce-ordering {
  display: inline-block;
}

.woocommerce-ordering + .woocommerce-result-count,
.woocommerce-result-count + .woocommerce-ordering {
  margin-left: .75rem;
}

/* ============================================================
   10. CART PAGE SKIN
   ============================================================ */

.woocommerce-cart .nw-shop-main,
.woocommerce-checkout .nw-shop-main {
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a1d13 0%, transparent 60%),
    linear-gradient(180deg, #1a130d 0%, var(--nw-bg) 100%);
}

.woocommerce-cart .nw-shop-content,
.woocommerce-checkout .nw-shop-content {
  max-width: 860px;
  margin-inline: auto;
}

/* Cart table wrapper */
.woocommerce .cart-collaterals {
  margin-top: 2rem;
}

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nw-font-body);
  font-size: .88rem;
  color: var(--nw-text-inv);
  background: var(--nw-panel);
  border-radius: var(--nw-radius);
  overflow: hidden;
}

.woocommerce table.shop_table thead {
  background: var(--nw-bg-2);
}

.woocommerce table.shop_table th {
  font-family: var(--nw-font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nw-gold);
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--nw-line);
  text-align: left;
}

.woocommerce table.shop_table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--nw-line);
  vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td {
  border-bottom: none;
}

.woocommerce table.shop_table td.product-name a {
  color: var(--nw-text-inv);
  text-decoration: none;
  font-weight: 600;
}

.woocommerce table.shop_table td.product-name a:hover {
  color: var(--nw-gold);
}

.woocommerce table.shop_table td.product-price .amount,
.woocommerce table.shop_table td.product-subtotal .amount {
  color: var(--nw-gold);
  font-weight: 700;
  font-family: var(--nw-font-display);
}

/* Cart totals box */
.woocommerce .cart_totals {
  background: var(--nw-panel);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  padding: 1.25rem 1.5rem;
}

.woocommerce .cart_totals h2 {
  font-family: var(--nw-font-display);
  font-size: .9rem;
  letter-spacing: .08em;
  color: var(--nw-gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.woocommerce .cart_totals table.shop_table {
  background: none;
  border-radius: 0;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: .5rem 0;
}

/* Proceed-to-checkout button */
.woocommerce a.checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--nw-red);
  color: #fff;
  font-family: var(--nw-font-body);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--nw-radius);
  padding: .85rem 1.5rem;
  min-height: 48px;
  text-decoration: none;
  transition: background .18s;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woocommerce a.checkout-button:hover {
  background: var(--nw-red-2);
}

/* Update cart button */
.woocommerce .actions input[type="submit"] {
  background: transparent;
  border: 1.5px solid var(--nw-gold);
  color: var(--nw-gold);
  font-family: var(--nw-font-body);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--nw-radius);
  padding: .55rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.woocommerce .actions input[type="submit"]:hover {
  background: rgba(201,162,39,.15);
}

/* Coupon input + button */
.woocommerce .coupon {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.woocommerce .coupon input[type="text"] {
  background: var(--nw-bg-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  color: var(--nw-text-inv);
  font-family: var(--nw-font-body);
  font-size: .88rem;
  padding: .55rem .9rem;
  height: 44px;
  outline: none;
  flex: 1 1 140px;
  transition: border-color .15s;
}

.woocommerce .coupon input[type="text"]::placeholder {
  color: var(--nw-text-inv-soft);
}

.woocommerce .coupon input[type="text"]:focus {
  border-color: var(--nw-gold);
}

.woocommerce .coupon input[type="submit"] {
  background: var(--nw-bg-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  color: var(--nw-text-inv-soft);
  font-family: var(--nw-font-body);
  font-size: .82rem;
  padding: .55rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.woocommerce .coupon input[type="submit"]:hover {
  color: var(--nw-gold);
  border-color: var(--nw-gold);
}

/* ============================================================
   11. CHECKOUT PAGE SKIN
   ============================================================ */

.woocommerce-checkout h3 {
  font-family: var(--nw-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--nw-text-inv);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Checkout form fields */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea {
  background: var(--nw-bg-2);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  color: var(--nw-text-inv);
  font-family: var(--nw-font-body);
  font-size: .88rem;
  padding: .6rem .9rem;
  width: 100%;
  min-height: 44px;
  outline: none;
  transition: border-color .15s;
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus {
  border-color: var(--nw-gold);
  box-shadow: 0 0 0 2px rgba(201,162,39,.15);
}

.woocommerce-checkout label {
  color: var(--nw-text-inv-soft);
  font-size: .82rem;
  margin-bottom: .3rem;
  display: block;
}

/* Place order button */
#place_order {
  background: var(--nw-red);
  color: #fff;
  font-family: var(--nw-font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--nw-radius);
  padding: .9rem 2rem;
  min-height: 52px;
  width: 100%;
  cursor: pointer;
  transition: background .18s;
}

#place_order:hover,
#place_order:focus-visible {
  background: var(--nw-red-2);
}

#place_order:focus-visible {
  outline: 2px solid var(--nw-gold);
  outline-offset: 2px;
}

/* ============================================================
   12. ACCOUNT PAGE SKIN
   ============================================================ */

.woocommerce-account .nw-shop-content {
  max-width: 860px;
  margin-inline: auto;
}

.woocommerce-MyAccount-navigation {
  background: var(--nw-panel);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  padding: .75rem 0;
  margin-bottom: 1.5rem;
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
  }

  .woocommerce-MyAccount-navigation {
    margin-bottom: 0;
  }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: .6rem 1.25rem;
  font-family: var(--nw-font-body);
  font-size: .88rem;
  color: var(--nw-text-inv-soft);
  text-decoration: none;
  transition: color .15s, background .15s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--nw-gold);
  background: rgba(201,162,39,.06);
}

.woocommerce-MyAccount-content {
  color: var(--nw-text-inv);
  font-family: var(--nw-font-body);
  font-size: .9rem;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--nw-font-display);
  color: var(--nw-gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
}

/* ============================================================
   13. MOBILE SIDEBAR DRAWER
   ============================================================ */

/* Sidebar open state managed by JS (shop-filters.js) */
body.nw-filters-open {
  overflow: hidden; /* Prevent scroll when drawer is open */
}

/* ============================================================
   14. REDUCED-MOTION OVERRIDES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .nw-shop-sidebar,
  .nw-sidebar-overlay,
  li.nw-card.product,
  .nw-product-card__img,
  .nw-filters-toggle,
  .woocommerce-pagination ul.page-numbers .page-numbers,
  .nw-filter-group__chevron {
    transition: none !important;
  }

  li.nw-card.product:hover {
    transform: none;
  }

  li.nw-card.product:hover .nw-product-card__img {
    transform: none;
  }
}