/*
 * woocommerce.css — WooCommerce-specific visual overrides.
 * Loaded only on WooCommerce pages (shop, product, cart, checkout, account).
 * Depends on main.css (loaded after it).
 * Matches real site: white bg, #eee borders, Outfit titles, DM Sans body,
 * black buttons → green hover, portrait product images.
 *
 * @package nostrofumo
 */

/* ============================================================
   1. Global WooCommerce resets
   ============================================================ */
.woocommerce-page { background: var(--nf-white); }

.woocommerce .col2-set,
.woocommerce-page .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 767.98px) {
  .woocommerce .col2-set,
  .woocommerce-page .col2-set { grid-template-columns: 1fr; }
}

/* ============================================================
   2. Notices
   ============================================================ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: relative;
  list-style: none;
  padding: 1rem 1.25rem 1rem 3.75rem;
  border-radius: var(--nf-radius-sm);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* WooCommerce renders the notice icon with an absolutely positioned
   pseudo-element. Reserve its own left column so it cannot overlap text. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  left: 1.25rem;
  top: 50%;
  margin: 0;
  position: absolute;
  transform: translateY(-50%);
}
.woocommerce-message { background: rgba(49,173,27,0.08); border: 1px solid rgba(49,173,27,0.3); color: var(--nf-green-dark); }
.woocommerce-error   { background: rgba(255,42,19,0.06); border: 1px solid rgba(255,42,19,0.3); color: var(--nf-red); }
.woocommerce-info    { background: rgba(0,0,0,0.03); border: 1px solid var(--nf-border); color: var(--nf-text); }

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  min-height: unset;
  background: var(--nf-black);
  color: var(--nf-white);
  border-radius: var(--nf-radius-sm);
  text-decoration: none;
}
.woocommerce-message .button:hover { background: var(--nf-green); color: var(--nf-black); }

/* ============================================================
   3. Product Loop / Archive Grid
   ============================================================ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 991.98px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
/* Mobile floor stays at 2 columns (matches the homepage grid's `col-6`,
   which is always 2-per-row down to the smallest phones) — do not
   collapse to a single column below 480px. */

/* WooCommerce core (woocommerce.css) ships a legacy float clearfix:
     .woocommerce ul.products::before,
     .woocommerce ul.products::after { content:" "; display:table; }
   That clearfix is harmless in a float-based layout, but once we switch
   `ul.products` to `display: grid` above, those two pseudo-elements
   become real grid items. `::before` lands in the DOM before any <li>,
   so it occupies grid cell 1 — pushing every actual product one column
   to the right (3 products showing right-aligned in a 4-col row on
   desktop, 2-of-3 on tablet, 1-of-2 on mobile). Neutralise them here so
   only real <li class="product"> elements participate in the grid. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products li.product:hover {
  box-shadow: none;
  transform: none;
}

.woocommerce ul.products li.product .product-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  display: block;
  transition: transform var(--nf-transition);
  height: auto;
}
.woocommerce ul.products li.product:hover .product-card-img-wrap img {
  transform: scale(1.04);
}

/* Loop product title */
/* Loop product title (fallback for third-party hooks) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--nf-font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--nf-black);
  padding: 0.85rem 1rem 0.25rem;
  margin: 0;
}
@media (max-width: 767.98px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9rem; }
}

/* Loop price (fallback for third-party hooks) */
.woocommerce ul.products li.product .price {
  padding: 0 1rem;
  font-family: var(--nf-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nf-dark);
  display: block;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 700; }
.woocommerce ul.products li.product .price del { opacity: 0.5; font-size: 0.8rem; }

/* Loop add-to-cart button (fallback for third-party hooks) */
.woocommerce ul.products li.product .button {
  display: block;
  width: calc(100% - 2rem);
  margin: 0.85rem 1rem 1rem;
  text-align: center;
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 0.65rem 1rem;
  font-family: var(--nf-font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--nf-transition), color var(--nf-transition);
  text-decoration: none;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* Sale badge on loop (fallback for third-party hooks) */
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--nf-red);
  color: #fff;
  font-family: var(--nf-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  z-index: 2;
  line-height: 1.4;
}

/* ============================================================
   4. Single Product
   ============================================================ */
.woocommerce div.product,
.single-product-page .product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 767.98px) {
  .woocommerce div.product,
  .single-product-page .product {
    /* minmax(0, 1fr) prevents tracks from blowing out wider than the
       container on narrow viewports (intrinsic img width inside). */
    grid-template-columns: minmax(0, 1fr);
  }
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products,
.single-product-page .product-tabs-related {
  grid-column: 1 / -1;
}

.product-gallery-col,
.product-summary-col {
  min-width: 0;
  /* Prevent the gallery from blowing past its grid track on narrow
     viewports — `width: 100%` + intrinsic image size pushes 1fr tracks
     wider than the container without this clamp. */
  max-width: 100%;
}

/* Single breadcrumb style */
.wc-breadcrumb {
  font-family: var(--nf-font-body);
  font-size: 0.85rem;
  color: var(--nf-text-muted);
}
.wc-breadcrumb a { color: var(--nf-text-muted); }
.wc-breadcrumb a:hover { color: var(--nf-green); }
.wc-breadcrumb .breadcrumb-sep { margin: 0 0.4rem; color: var(--nf-text-muted); }

/* ── Product Gallery — FlexSlider-compatible portrait frame ────────────────
   The product images are typically 5:6, so the gallery reserves that space
   before JavaScript initialises. FlexSlider alone owns the dimensions of its
   viewport, track and slides; overriding them breaks its position reset after
   WooCommerce swaps a variation image.
   ────────────────────────────────────────────────────────────────────────── */

/* Outer images div: contains the gallery plus its thumbnail controls. */
.woocommerce div.product div.images {
  position: relative;
  width: 100%;
  border-radius: var(--nf-radius);
  background: var(--nf-off-white);
}

/* The gallery reserves its initial portrait frame. Overflow belongs to the
   viewport below so WooCommerce thumbnail controls are not clipped. */
.woocommerce div.product .woocommerce-product-gallery {
  width: 100% !important;
  aspect-ratio: 5 / 6;
  border-radius: var(--nf-radius);
  overflow: visible;
  position: relative;
  background: var(--nf-off-white);
  min-height: 200px;
  max-height: 760px;
}

@media (max-width: 991.98px) {
  .woocommerce div.product .woocommerce-product-gallery {
    max-height: 560px;
  }
}

@media (max-width: 767.98px) {
  .woocommerce div.product .woocommerce-product-gallery {
    max-height: 520px;
  }
}

@media (max-width: 479.98px) {
  .woocommerce div.product .woocommerce-product-gallery {
    max-height: calc(100vw * 1.15);
  }
}

/* FlexSlider writes the viewport height and track/slide widths inline. Keep
   those values intact; only the viewport receives visual clipping. */
.woocommerce div.product div.images .flex-viewport {
  border-radius: var(--nf-radius);
  overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery__image {
  position: relative;
}

/* Images fill their FlexSlider slide while retaining their intrinsic ratio. */
.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce div.product div.images .flex-viewport img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery__image a img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--nf-radius);
  cursor: zoom-in;
}

.woocommerce div.product .woocommerce-product-gallery__image a {
  display: block;
}

.woocommerce div.product div.images figure {
  margin: 0;
}
/* ── Gallery thumbnail picker ─────────────────────────────────────────────
   A distinct, white panel keeps each available image easy to scan and gives
   the current selection an unambiguous green outline. */
.woocommerce div.product ol.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
  list-style: none;
  padding: 0.65rem;
  margin: 1rem 0 0;
  background: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.woocommerce div.product ol.flex-control-thumbs li {
  width: auto !important;
  min-width: 0;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  float: none !important;
}
.woocommerce div.product ol.flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 2px;
  background: var(--nf-off-white);
  border: 2px solid transparent;
  border-radius: var(--nf-radius-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: border-color var(--nf-transition), box-shadow var(--nf-transition), transform var(--nf-transition);
}
.woocommerce div.product ol.flex-control-thumbs li img:hover {
  border-color: rgba(49, 173, 27, 0.55);
  box-shadow: 0 4px 10px rgba(49, 173, 27, 0.16);
  transform: translateY(-2px);
}
.woocommerce div.product ol.flex-control-thumbs li img.flex-active {
  border-color: var(--nf-green);
  box-shadow: 0 0 0 2px rgba(49, 173, 27, 0.18), 0 4px 10px rgba(49, 173, 27, 0.16);
}
@media (max-width: 479.98px) {
  .woocommerce div.product ol.flex-control-thumbs {
    gap: 0.5rem;
    padding: 0.5rem;
  }
}

/* ── Custom magnifier lens (dwp-cvmelhor style) ────────────────────────────
   Injected by single-product.js into each gallery slide. Hidden by default;
   shown on .is-visible, follows cursor with absolute pixel offset. Image is
   preloaded into lens background at ZOOM× the original displayed width.
   ────────────────────────────────────────────────────────────────────────── */
.nm-magnifier-lens {
  position: absolute;
  display: none;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background-color: var(--nf-off-white);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 9;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  /* JS updates left/top/background-size/background-position every frame */
  transition: opacity 0.18s ease;
  opacity: 0;
}
.nm-magnifier-lens.is-visible {
  display: block;
  opacity: 1;
}

/* Slightly smaller on touch/laptops */
@media (max-width: 991.98px) {
  .nm-magnifier-lens { width: 160px; height: 160px; }
}

.nm-magnifier-hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--nf-dark, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 8;
}
.nm-magnifier-hint.is-visible { opacity: 1; }

/* Category label above title */
.product-category-label {
  display: inline-block;
  font-family: var(--nf-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nf-green);
  margin-bottom: 0.5rem;
}

/* Inline sale badge in summary */
.product-sale-badge {
  display: inline-block;
  background: var(--nf-red);
  color: #fff;
  font-family: var(--nf-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  vertical-align: middle;
}

/* Stock status */
.product-stock-status {
  display: block;
  font-family: var(--nf-font-body);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.product-stock-status.stock-in { color: var(--nf-green-dark); }
.product-stock-status.stock-backorder { color: var(--nf-text-muted); }
.product-stock-status.stock-out { color: var(--nf-red); }

/* SKU */
.product-meta-sku {
  font-size: 0.8rem;
  color: var(--nf-text-muted);
  margin-bottom: 1rem;
}
.product-meta-sku .meta-label { font-weight: 600; }
.product-meta-sku .meta-value { margin-left: 0.3rem; }

/* Benefits strip */
.product-meta-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nf-border);
}
.meta-benefit-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--nf-text-muted);
}
.meta-benefit-item svg { color: var(--nf-green); flex-shrink: 0; }

/* ── Price wrapper in custom summary (woocommerce/content-single-product.php) ──
   Real markup rendered here is FLAT — there is no `.price` wrapper element:

     <div class="product-price-wrap">
       [<del>...</del> <ins>...</ins>]  OR  <span class="woocommerce-Price-amount">...</span>
       <span class="pix-price-wrap">...</span>
     </div>

   Selectors below target the actual direct children so the main price
   renders clearly larger/bolder than the PIX line beneath it. Base PIX
   badge/line styling (shared with product cards site-wide) lives in
   main.css; only size overrides for the single-product context live here.
   ────────────────────────────────────────────────────────────────────────── */
.product-price-wrap {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.product-price-wrap > .woocommerce-Price-amount,
.product-price-wrap > ins {
  font-family: var(--nf-font-body);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--nf-dark);
  line-height: 1.15;
}
.product-price-wrap > ins {
  text-decoration: none;
}
.product-price-wrap > del {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--nf-text-muted);
  text-decoration: line-through;
  opacity: 0.7;
}

/* PIX price — secondary line, intentionally smaller than the main price above */
.product-price-wrap .pix-price-wrap {
  font-size: 1rem;
  margin-top: 0.1rem;
}
.product-price-wrap .pix-price-wrap .woocommerce-Price-amount {
  font-size: 1.15rem;
}
.product-price-wrap .pix-price-wrap small {
  font-size: 0.8rem;
}

/* Fallback for WooCommerce's own default markup (p.price/span.price),
   in case a hook restores the default template on any page. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--nf-font-body);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--nf-dark);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  line-height: 1.15;
}
.woocommerce div.product p.price del { color: var(--nf-text-muted); font-size: 1.1rem; font-weight: 400; opacity: 0.7; }
.woocommerce div.product p.price ins { text-decoration: none; }

/* Price amount styling — base rule used everywhere (cards, cart, checkout, mini-cart) */
.woocommerce-Price-amount {
  font-weight: 700;
  color: var(--nf-dark);
}
.woocommerce-Price-currencySymbol {
  font-weight: 400;
  font-size: 0.65em;
  vertical-align: baseline;
  margin-right: 0.05em;
}

/* Product title */
.woocommerce div.product .product_title {
  font-family: var(--nf-font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--nf-black);
  margin-bottom: 0.5rem;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--nf-font-body);
  color: var(--nf-text);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Add to cart form */
.woocommerce div.product form.cart {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 0.75rem 1.5rem;
  font-family: var(--nf-font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 40px;
  height: 40px;
  transition: background var(--nf-transition), color var(--nf-transition);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  align-self: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  flex-shrink: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}

/* Variation button wrap */
.variation_button_wrap {
  display: flex;
  align-items: center;
}

/* ── Quantity selector — custom +/- buttons ────────────────────────────────
   Template override: woocommerce/single-product/add-to-cart/simple.php
   Structure:
     div.quantity-selector-wrap
       span.quantity-label
       div.quantity-input-wrap
         button.qty-btn.qty-minus
         input.qty
         button.qty-btn.qty-plus
   ────────────────────────────────────────────────────────────────────────── */

.quantity-selector-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.quantity-selector-wrap .quantity-label {
  font-family: var(--nf-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nf-dark);
  white-space: nowrap;
}

/* The control row is shared by the simple-product template and WooCommerce's
   variable-product markup. The border lives on the wrapper; children have no
   outer border. */
.quantity-input-wrap,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  overflow: hidden;          /* clips child hover backgrounds to rounded corners */
  height: 44px;
  background: var(--nf-white);
  float: none !important;
  margin: 0 !important;
}

/* Input */
.quantity-input-wrap .qty,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty {
  width: 52px !important;
  min-width: 52px;
  height: 100% !important;
  text-align: center;
  border: none !important;
  border-left: 1px solid var(--nf-border) !important;
  border-right: 1px solid var(--nf-border) !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  margin: 0 !important;
  font-size: 1rem !important;
  font-family: var(--nf-font-body) !important;
  font-weight: 600;
  color: var(--nf-dark) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -moz-appearance: textfield;
  appearance: textfield;
}
.quantity-input-wrap .qty::-webkit-inner-spin-button,
.quantity-input-wrap .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-input-wrap .qty:focus,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty:focus {
  background: var(--nf-off-white) !important;
}

/* +/- buttons */
.quantity-input-wrap .qty-btn,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty-btn {
  width: 40px;
  min-width: 40px;
  height: 100%;
  border: none;
  border-radius: 0;
  background: var(--nf-bg, #f5f5f5);
  color: var(--nf-dark);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--nf-transition), color var(--nf-transition);
  flex-shrink: 0;
  user-select: none;
  padding: 0;
  outline: none;
}
.quantity-input-wrap .qty-btn:hover,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty-btn:hover {
  background: var(--nf-green);
  color: #fff;
}
.quantity-input-wrap .qty-btn:active,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty-btn:active {
  background: var(--nf-green-dark, #259318);
  color: #fff;
}
.quantity-input-wrap .qty-btn:focus-visible,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart > .quantity .qty-btn:focus-visible {
  outline: 2px solid var(--nf-green);
  outline-offset: -2px;
}

/* Also reset WC's own .woocommerce div.product form.cart div.quantity
   in case WC default template is used instead of the override */
.woocommerce div.product form.cart div.quantity {
  margin: 0 !important;
}

/* Tabs */
.woocommerce-tabs { margin-top: 3rem; }
.woocommerce-tabs .tabs {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid var(--nf-border);
  flex-wrap: wrap;
}
.woocommerce-tabs .tabs li a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-family: var(--nf-font-heading);
  color: var(--nf-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--nf-transition);
}
.woocommerce-tabs .tabs li a:hover { color: var(--nf-green); }
.woocommerce-tabs .tabs li.active a {
  color: var(--nf-black);
  border-bottom-color: var(--nf-green);
}
.woocommerce-tabs .panel {
  padding: 2rem 0;
  font-family: var(--nf-font-body);
  color: var(--nf-text);
  font-size: 0.9rem;
  line-height: 1.8;
}
.woocommerce-tabs .panel h2 {
  font-family: var(--nf-font-heading);
  color: var(--nf-black);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Additional Information tab — product attributes table */
.woocommerce-tabs .panel .woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nf-font-body);
  font-size: 0.9rem;
}
.woocommerce-tabs .panel .woocommerce-product-attributes th,
.woocommerce-tabs .panel .woocommerce-product-attributes td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--nf-border);
  text-align: left;
  color: var(--nf-text);
  vertical-align: middle;
}
.woocommerce-tabs .panel .woocommerce-product-attributes th {
  font-weight: 600;
  color: var(--nf-dark);
  width: 40%;
  background: var(--nf-off-white);
}
.woocommerce-tabs .panel .woocommerce-product-attributes td {
  background: var(--nf-white);
}

/* ── Related / upsells — real carousel (woocommerce/single-product/related.php
   and up-sells.php overrides render .product-carousel-wrap, the same markup
   used by the homepage carousel). Sizing/track/nav/dots CSS lives in main.css
   section 29 (shared with the homepage); only section spacing lives here. ── */
.related.products,
.upsells.products {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--nf-border);
}
.related.products h2,
.upsells.products h2 {
  font-family: var(--nf-font-heading);
  font-size: 1.3rem;
  color: var(--nf-black);
  margin-bottom: 1.5rem;
}
.product-carousel-section .product-carousel-wrap {
  padding-bottom: 0;
}

/* ============================================================
   5. Cart Page
   ============================================================ */
.shop_table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}
.shop_table th,
.shop_table td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--nf-border);
  vertical-align: middle;
}
.shop_table th {
  font-family: var(--nf-font-heading);
  color: var(--nf-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  background: var(--nf-bg);
}
.shop_table td { color: var(--nf-dark); }
.shop_table tbody tr:hover td { background: rgba(49,173,27,0.03); }
.shop_table .product-thumbnail img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--nf-border);
}
.shop_table .qty {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  padding: 0.4rem 0.6rem;
  width: 70px;
  text-align: center;
}

/* Cart totals */
.cart_totals {
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  padding: 1.5rem;
}
.cart_totals h2 {
  font-family: var(--nf-font-heading);
  font-size: 1.1rem;
  color: var(--nf-black);
  margin-bottom: 1.25rem;
}
.cart_totals table { width: 100%; }
.cart_totals table th {
  color: var(--nf-text);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.6rem 0;
  width: 40%;
}
.cart_totals table td { color: var(--nf-dark); padding: 0.6rem 0; }
.cart_totals .order-total th,
.cart_totals .order-total td {
  border-top: 1px solid var(--nf-border);
  padding-top: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.wc-proceed-to-checkout { margin-top: 1.25rem; }
.wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--nf-black);
  color: var(--nf-white);
  padding: 0.9rem 1.5rem;
  border-radius: var(--nf-radius-sm);
  font-family: var(--nf-font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background var(--nf-transition), color var(--nf-transition);
}
.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}

/* ── Cart cross-sells (WooCommerce Cart BLOCK — the /carrinho/ page content
   is `<!-- wp:woocommerce/cart -->`, rendered client-side by WC Blocks, not
   the classic woocommerce/cart/cart.php template above. That template's
   markup (.shop_table, .cart_totals) never actually reaches the DOM here —
   only the "Cart & Checkout Blocks" markup below does. Recommended products
   ("Você pode estar interessado…") come from this block and use WC's own
   `wc-block-components-product-*` classes, entirely outside this theme's
   product-card.php design system, which is why they previously showed up
   unstyled (no card frame, no uniform image height, plain button). ─────── */
.wp-block-woocommerce-cart-cross-sells-block {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--nf-border);
}
.wp-block-woocommerce-cart-cross-sells-block h2 {
  font-family: var(--nf-font-heading);
  font-size: 1.3rem;
  color: var(--nf-black);
  margin-bottom: 1.25rem;
}
.wp-block-woocommerce-cart-cross-sells-block > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
}
.cross-sells-product {
  background: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow var(--nf-transition), transform var(--nf-transition);
}
.cross-sells-product:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.cross-sells-product .wc-block-components-product-image {
  aspect-ratio: 5 / 6;
  background: var(--nf-bg);
  overflow: hidden;
}
.cross-sells-product .wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cross-sells-product .wc-block-components-product-title {
  font-family: var(--nf-font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--nf-black);
  margin: 0.85rem 1rem 0.4rem;
}
.cross-sells-product .wc-block-components-product-title a {
  color: inherit;
  text-decoration: none;
}
.cross-sells-product .wc-block-components-product-title a:hover { color: var(--nf-green); }
.cross-sells-product .wc-block-components-product-rating-stars {
  display: none; /* no reviews configured — keep the card compact */
}
.cross-sells-product .wc-block-components-product-price {
  display: block;
  margin: 0 1rem;
  font-family: var(--nf-font-body);
  font-size: 1rem;
  font-weight: 800;
  color: var(--nf-dark);
}
.cross-sells-product .wp-block-cart-cross-sells-product__product-add-to-cart {
  margin: auto 1rem 1rem;
  padding-top: 0.75rem;
}
.cross-sells-product .wc-block-components-product-button__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 0.6rem 1rem;
  font-family: var(--nf-font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--nf-transition), color var(--nf-transition);
}
.cross-sells-product .wc-block-components-product-button__button::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  flex-shrink: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
}
.cross-sells-product .wc-block-components-product-button__button:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}

/* ============================================================
   6. Checkout
   ============================================================ */
.woocommerce-checkout .woocommerce-form-login {
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.woocommerce-checkout-review-order-table thead th {
  font-family: var(--nf-font-heading);
  color: var(--nf-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.woocommerce-checkout-review-order-table .order-total td .amount {
  color: var(--nf-green);
  font-size: 1.1rem;
  font-weight: 700;
}

#place_order {
  display: block;
  width: 100%;
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 1rem 1.5rem;
  font-family: var(--nf-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 54px;
  transition: background var(--nf-transition), color var(--nf-transition);
}
#place_order:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}
#place_order:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   7. My Account — Layout + Form fields
   ============================================================ */

/* ── Authenticated account: nav sidebar + endpoint content ─ */
/* This wrapper exists only in woocommerce/myaccount/my-account.php.
   Keeping the outer WooCommerce shortcode wrapper in normal flow prevents
   the guest login/register form from inheriting the authenticated layout. */
.woocommerce-my-account-layout {
  align-items: start;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  width: 100%;
}
@media (max-width: 767.98px) {
  .woocommerce-my-account-layout {
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Navigation sidebar ───────────────────────────────────── */
.woocommerce-my-account-layout .woocommerce-MyAccount-navigation {
  position: sticky;
  top: 1.5rem;
}

/* ── Content area — prevent overflow on narrow viewports ─── */
.woocommerce-my-account-layout .woocommerce-MyAccount-content { min-width: 0; }

/* ── Address cards — dark themed ─────────────────────────── */
.address-card {
  background: var(--nf-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color var(--nf-transition), box-shadow var(--nf-transition);
}
.address-card:hover {
  border-color: rgba(49, 173, 27, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.address-card address {
  font-style: normal;
  line-height: 1.7;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}
.address-card .h5 { color: var(--nf-white); }

/* ── Form fields ──────────────────────────────────────────── */
.woocommerce-account .woocommerce-input-wrapper { width: 100%; }
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  padding: 0.65rem 0.9rem;
  width: 100%;
  font-family: var(--nf-font-body);
}
.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  border-color: var(--nf-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(49, 173, 27, 0.12);
}
.woocommerce-account label {
  font-family: var(--nf-font-heading);
  color: var(--nf-dark);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.woocommerce-account .form-row { margin-bottom: 1rem; }

/* ── Shared account buttons ───────────────────────────────── */
.woocommerce-Button,
.woocommerce-button {
  background: var(--nf-black);
  color: var(--nf-white);
  border: none;
  border-radius: var(--nf-radius-sm);
  padding: 0.65rem 1.5rem;
  font-family: var(--nf-font-heading);
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--nf-transition), color var(--nf-transition);
  display: inline-block;
  text-decoration: none;
}
.woocommerce-Button:hover,
.woocommerce-button:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}

/* ── Dashboard section heading ────────────────────────────── */
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content table {
  font-size: 0.9rem;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--nf-font-heading);
  font-size: 1.1rem;
  color: var(--nf-black);
  margin-bottom: 1rem;
}

/* ── Orders table ─────────────────────────────────────────── */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.woocommerce-orders-table th {
  font-family: var(--nf-font-heading);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nf-text-muted);
  padding: 0.75rem 0.5rem;
  border-bottom: 2px solid var(--nf-border);
  text-align: left;
  font-weight: 700;
}
.woocommerce-orders-table td {
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--nf-border);
  color: var(--nf-dark);
  vertical-align: middle;
}
.woocommerce-orders-table tr:last-child td { border-bottom: none; }
.woocommerce-orders-table .button {
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  min-height: unset;
  background: var(--nf-black);
  color: var(--nf-white);
  border-radius: var(--nf-radius-sm);
  text-decoration: none;
  display: inline-block;
  font-family: var(--nf-font-heading);
  font-weight: 600;
  transition: background var(--nf-transition);
}
.woocommerce-orders-table .button:hover { background: var(--nf-green); color: var(--nf-black); }

/* Responsive: horizontal scroll for orders table on small screens */
@media (max-width: 575.98px) {
  .woocommerce-MyAccount-content .woocommerce-orders-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   8. woo-custom-installments plugin styling
   ============================================================ */
.woo-custom-installments-group {
  font-family: var(--nf-font-body);
}
.woo-custom-installments-group-main-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nf-dark);
}
.woo-custom-installments-details {
  font-size: 0.8rem;
  color: var(--nf-text-muted);
}
.woo-custom-installments-offer {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  margin-top: 0.2rem;
}
.woo-custom-installments-offer .wci-icon-main-price {
  color: var(--nf-green);
}
.woo-custom-installments-offer .discount-before-price {
  color: var(--nf-text-muted);
  margin-right: 0.25rem;
}
.woo-custom-installments-offer .discounted-price {
  font-weight: 700;
  color: var(--nf-green-dark);
}
.woo-custom-installments-offer .discount-after-price {
  color: var(--nf-text-muted);
  margin-left: 0.25rem;
}
.woo-custom-installments-card-container {
  display: block;
  margin-top: 0.2rem;
}
.woo-custom-installments-details-without-fee {
  font-size: 0.78rem;
  color: var(--nf-text-muted);
}
.woo-custom-installments-details-without-fee i {
  color: var(--nf-text-muted);
  margin-right: 0.3rem;
}

/* ============================================================
   9. Star rating
   ============================================================ */
.star-rating {
  color: var(--nf-yellow);
  font-size: 0.85rem;
}
.star-rating::before { color: var(--nf-yellow); }
.star-rating span::before { color: var(--nf-yellow); }

/* ============================================================
   10. Variation swatches (woo-variation-swatches plugin)
   ============================================================ */
.wvs-archive-product-wrapper .variations_form {
  padding: 0.5rem 1rem;
}


/* ============================================================
   11. Customer flows — Account, Cart Block and Checkout
   ============================================================ */

/* My Account — the WooCommerce login template uses .col-1/.col-2,
   which conflict with Bootstrap's 8.33%/16.67% grid utilities. Keep the
   approved account navigation layout for authenticated customers only. */
.woocommerce-account .woocommerce:has(#customer_login),
.woocommerce-account .woocommerce:has(> .woocommerce-form-login) {
  display: block;
}

.woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  max-width: 1040px;
  margin: 0 auto;
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2,
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
  float: none;
  width: 100%;
  min-width: 0;
  flex: initial;
}

.woocommerce-account #customer_login h2,
.woocommerce-account .woocommerce > .woocommerce-form-login > h2 {
  color: var(--nf-black);
  font-family: var(--nf-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  text-align: center;
}

.woocommerce-account #customer_login .woocommerce-form,
.woocommerce-account .woocommerce > .woocommerce-form-login {
  background: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  margin: 0;
  padding: 1.75rem;
}

.woocommerce-account .woocommerce > .woocommerce-form-login {
  max-width: 480px;
  margin: 0 auto;
}

.woocommerce-account #customer_login .form-row {
  width: 100%;
}

.woocommerce-account #customer_login .woocommerce-form__label-for-checkbox {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  text-transform: none;
}

.woocommerce-account #customer_login .woocommerce-form__input-checkbox {
  width: auto;
}

.woocommerce-account #customer_login .woocommerce-button,
.woocommerce-account .woocommerce > .woocommerce-form-login .woocommerce-button {
  width: 100%;
}

/* Cart Block — [woocommerce_cart] renders the modern block markup. */
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
  align-items: start;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-main,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar {
  min-width: 0;
  width: auto;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar {
  position: sticky;
  top: 1.5rem;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__totals {
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  padding: 1.5rem;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  overflow: hidden;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__header,
.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart-items__row {
  padding-left: 1rem;
  padding-right: 1rem;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  border-color: var(--nf-border);
  border-radius: var(--nf-radius-sm);
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-quantity-selector input {
  color: var(--nf-dark);
  min-width: 2.5rem;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-button {
  background: var(--nf-black);
  border-radius: var(--nf-radius-sm);
  color: var(--nf-white);
  font-family: var(--nf-font-heading);
  font-weight: 700;
}

.woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-button:hover {
  background: var(--nf-green);
  color: var(--nf-black);
}

/* Checkout — Billing and delivery/details have equal usable widths.
   The order review is a full-width panel below them, with the native
   #order_review wrapper kept intact for WooCommerce AJAX updates. */
.woocommerce-checkout .checkout-customer-details {
  margin-bottom: 2.5rem;
}

.woocommerce-checkout .checkout-section {
  background: var(--nf-white);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius);
  padding: 1.75rem;
}

.woocommerce-checkout .checkout-section-title {
  border-bottom: 1px solid var(--nf-border);
  color: var(--nf-black);
  font-family: var(--nf-font-heading);
  font-weight: 700;
  padding-bottom: 0.9rem;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  min-width: 0;
  width: 100%;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  column-gap: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce-checkout .form-row {
  clear: none;
  float: none;
  margin-bottom: 1rem;
  min-width: 0;
  width: auto;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
  grid-column: 1 / -1;
}

.woocommerce-checkout .form-row label {
  color: var(--nf-dark);
  display: block;
  font-family: var(--nf-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  color: var(--nf-dark);
  padding: 0.65rem 0.9rem;
  width: 100%;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--nf-green);
  box-shadow: 0 0 0 3px rgba(49, 173, 27, 0.12);
  outline: none;
}

.woocommerce-checkout .checkout-order-review-row {
  margin-top: 0.5rem;
}

.woocommerce-checkout #order_review {
  max-width: none;
  width: 100%;
}

.woocommerce-checkout #order_review .shop_table {
  margin-bottom: 1.5rem;
}

.woocommerce-checkout #payment {
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: var(--nf-radius-sm);
  padding: 1.25rem;
}

@media (max-width: 991.98px) {
  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .woocommerce-account #customer_login {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .woocommerce-checkout .checkout-section {
    padding: 1.25rem;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-checkout .form-row-wide,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    grid-column: auto;
  }
}


/* ============================================================
   12. Desktop conflict fixes — Account and Cart
   ============================================================ */

@media (min-width: 768px) {
  /* Keep the outer shortcode wrapper neutral for both guest and authenticated
     states. The authenticated two-column layout is owned by the dedicated
     .woocommerce-my-account-layout wrapper above. */
  .woocommerce-account .woocommerce {
    display: block !important;
    width: 100% !important;
  }

  /* Bootstrap's .col-1/.col-2 utilities must not size WooCommerce's native
     login and registration columns. */
  .woocommerce-account #customer_login {
    display: grid !important;
    gap: 2rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 0 auto !important;
    max-width: 1040px !important;
    width: 100% !important;
  }

  /* #customer_login is also WooCommerce's legacy .col2-set. Its clearfix
     pseudo-elements become grid items and would occupy the first column,
     pushing Login to the right and Register onto the following row. */
  .woocommerce-account #customer_login::before,
  .woocommerce-account #customer_login::after {
    content: none !important;
    display: none !important;
  }

  .woocommerce-account #customer_login > .u-column1,
  .woocommerce-account #customer_login > .u-column2,
  .woocommerce-account #customer_login > .col-1,
  .woocommerce-account #customer_login > .col-2 {
    float: none !important;
    grid-column: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .woocommerce-my-account-layout .woocommerce-MyAccount-navigation,
  .woocommerce-my-account-layout .woocommerce-MyAccount-content {
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .woocommerce-my-account-layout .woocommerce-MyAccount-content > *,
  .woocommerce-my-account-layout .woocommerce-MyAccount-content .woocommerce-Addresses,
  .woocommerce-my-account-layout .woocommerce-MyAccount-content form {
    max-width: none !important;
    width: 100% !important;
  }

  /* [woocommerce_cart] is the active cart implementation. Its totals use
     the classic .cart-collaterals markup, so remove legacy floats and make
     the panel span the complete row below the item table. */
  .woocommerce-cart .woocommerce-cart-wrap .cart-collaterals {
    clear: both !important;
    display: block !important;
    margin-top: 2rem !important;
    width: 100% !important;
  }

  .woocommerce-cart .woocommerce-cart-wrap .cart-collaterals .cart_totals {
    box-sizing: border-box !important;
    float: none !important;
    width: 100% !important;
  }

  /* Keep the fallback ready if the cart page is ever converted to a Cart
     Block: totals still flow below the items in a single full-width column. */
  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-main,
  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar {
    grid-column: 1 !important;
    width: 100% !important;
  }

  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-sidebar {
    position: static !important;
  }

  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-components-totals-wrapper,
  .woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__totals {
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* WooCommerce's more-specific form-row-first/last rules otherwise retain
     a legacy 48% width inside each half of the approved checkout field grid. */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
    float: none !important;
    grid-column: auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}