/* Styles WooCommerce's own default markup (checkout, my-account, single-product
   tabs, notices, pagination) with the theme's existing design tokens, since the
   default WooCommerce stylesheet is disabled (see inc/woocommerce-hooks.php)
   and no original 1:1 design exists for these screens. */

/* components.css locks product-card images to a fixed box via `aspect-ratio`
   on the <img> itself; that's fragile for a replaced element whose own
   width/height HTML attributes vary a lot across this catalog's source
   photos (some are 2048x2560, some 150x150) — some cards (home page's
   "Most popular items", shop grids) were rendering far taller than their
   neighbors as a result. Moving the aspect-ratio to the (plain-div) wrapper
   and having the image fill it via object-fit gives the same visual result
   without being sensitive to the image's own intrinsic size.

   This general rule covers every .product-img-wrap (home page featured
   products, single-product, etc) with the original 4:3/cover treatment;
   the more specific .shop-results rule below overrides it with the shop
   grid's own 1:1/contain treatment on Shop/category archive pages. */
.product-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.product-img-wrap img {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

.shop-results .product-img-wrap {
  aspect-ratio: 1 / 1;
  background: #f5f7ff;
}
.shop-results .product-img-wrap img {
  aspect-ratio: unset;
  box-sizing: border-box;
}

/* Price filter — components.css's .sidebar-price-track::before/::after draw two
   fixed decorative dots (the original design never made this slider actually
   draggable). Once assets/js/price-filter.js turns the track into a real
   jQuery UI range slider, those fixed dots are hidden and replaced by real,
   draggable .ui-slider-handle elements styled to look the same. */
.sidebar-price-track.ui-slider {
  cursor: pointer;
}
.sidebar-price-track.ui-slider::before,
.sidebar-price-track.ui-slider::after {
  display: none;
}
.sidebar-price-track .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-cyan));
}
.sidebar-price-track .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-violet);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  cursor: grab;
  outline: none;
  touch-action: none;
}
.sidebar-price-track .ui-slider-handle:active {
  cursor: grabbing;
}
.sidebar-price-form {
  margin: 0;
}

.woocommerce-breadcrumb {
  font-family: "Rajdhani", sans-serif;
  color: var(--text-muted);
  margin: 1.5rem 0 1rem;
}
.woocommerce-breadcrumb a {
  color: var(--text-muted);
  text-decoration: underline;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin: 0 0 1.5rem;
  list-style: none;
  color: var(--text);
}
.woocommerce-error {
  border-left-color: #ff5d5d;
}

.woocommerce-form-row,
.form-row {
  margin-bottom: 1rem;
}
.woocommerce-form-row label,
.form-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
/* The review/comment form (#respond, from WP core's comment_form()) renders
   its Name/Email/Website inputs with no "input-text" class at all — that
   class is a WooCommerce-only convention used on checkout/billing fields —
   so those inputs fell through to the browser's default white style. */
.woocommerce #respond input[type="text"],
.woocommerce #respond input[type="email"],
.woocommerce #respond input[type="url"] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-family: "Rajdhani", sans-serif;
  width: 100%;
}

/* WooCommerce's own frontend.js wraps every password field in
   <span class="password-input"> and appends a <button class="show-password-input">
   eye toggle (assets/js/frontend/woocommerce.js) — but the plugin's default
   stylesheet that positions/icons it (woocommerce-layout.css) is dequeued
   along with the rest of WC's default styles (see nc_dequeue_astra_woocommerce_styles
   in inc/enqueue.php), so it rendered as a bare, unstyled <button> sitting
   below the field instead of an eye icon inside it. */
.password-input {
  position: relative;
  display: block;
}
.password-input input[type="password"],
.password-input input[type="text"] {
  padding-right: 2.5rem;
}
.password-input input::-ms-reveal {
  display: none;
}
.show-password-input {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 0.7em;
  transform: translateY(-50%);
  cursor: pointer;
  line-height: 0;
}
.show-password-input::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%236fdc7d"/></svg>');
}
.show-password-input.display-password::before {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%236fdc7d"/></svg>');
}

/* Country/State on checkout are enhanced by WooCommerce's bundled Select2
   widget (assets/css/select2.css, its own separate style handle — not
   covered by the woocommerce_enqueue_styles filter this theme disables
   everything else through). Select2 hides the real <select> and renders its
   own .select2-container markup instead, so the "select { background }"
   rule above never reaches it — Select2's stock white/gray default theme
   showed through untouched. Restyled to match every other field here. */
.select2-container {
  width: 100% !important;
}
.select2-container--default .select2-selection--single {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  height: auto;
  padding: 0.6rem 0.8rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text);
  line-height: 1.4;
  padding: 0 1.2rem 0 0;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.6rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-muted) transparent;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--accent-cyan);
}
.select2-dropdown {
  background-color: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
}
.select2-container--default .select2-results__option {
  color: var(--text);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--surface-alt);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--accent-cyan);
  color: #000;
}

/* Cart/checkout/my-account tables (cart.php etc.) — one bordered, rounded box
   around the whole table with thin lines between rows, instead of every th/td
   boxed individually. The old rule above gave every cell its own
   border + border-radius, plus border-spacing put a visible gap between
   rows — together that read as a busy per-cell grid rather than one table. */
.woocommerce table.shop_table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  background: var(--surface);
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1rem;
  font-family: "Rajdhani", sans-serif;
  text-align: left;
}
.woocommerce table.shop_table thead th {
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
}
.woocommerce table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button {
  border: 1.5px solid var(--accent-cyan);
  border-radius: 999px;
  background: #000;
  color: var(--accent-cyan);
  padding: 0.7rem 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(61, 255, 122, 0.4);
  transition: transform 140ms ease, background-color 180ms ease, color 180ms ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover {
  background: var(--accent-cyan);
  color: #000;
  transform: translateY(-1px);
}

.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs li {
  padding: 0.6rem 1rem;
}
.woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
}
.woocommerce-tabs .panel {
  padding: 1.5rem 0;
  color: var(--text-muted);
}

/* Shop pagination now reuses the site's real .pagination/.page-btn markup
   (see woocommerce/loop/pagination.php) via components.css — no bridging needed. */
nav.woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.single-product-card {
  padding: 2rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .single-product-card {
    grid-template-columns: 1fr 1fr;
  }
}
.woocommerce-product-rating .star-rating {
  color: var(--accent-lime);
}

/* Product image gallery: WooCommerce's own gallery JS (FlexSlider) still runs
   and builds this markup (main viewport + .flex-control-nav thumbnail strip,
   an <ol> — that's why unstyled thumbnails were showing as a plain numbered
   list), but its layout comes entirely from WC's bundled woocommerce.css,
   which is dequeued site-wide (see nc_disable_wc_styles() in
   inc/woocommerce-hooks.php). This rebuilds just the layout that gallery
   needs, styled to match the theme instead of stock WooCommerce. */
.woocommerce-product-gallery {
  opacity: 1 !important; /* Template ships this hidden (opacity:0) pending WC's own CSS transition, which is dequeued. */
}
.woocommerce-product-gallery__wrapper,
.flex-viewport {
  overflow: hidden;
  border-radius: 12px;
}
.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
ol.flex-control-nav.flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.flex-control-thumbs li {
  width: 70px;
  height: 70px;
}
.flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.flex-control-thumbs img:hover {
  opacity: 0.9;
}
.flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--accent-cyan);
}

/* Trust badges (Top Rated / Secure Payment / Safe Packaging) — see
   nc_single_product_trust_badges() in inc/woocommerce-hooks.php. */
.nc-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
}
.nc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px;
  background: rgba(15, 29, 18, 0.85);
  color: #e8f5e0;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.nc-trust-badge-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Quantity input + Add to Cart button in one row instead of stacking (both
   are just block-level default elements once WC's own CSS is dequeued).
   Simple products (add-to-cart/simple.php) put .quantity + the button
   directly inside form.cart, so flexing the form itself works. Variable
   products (add-to-cart/variable.php) instead put a <table class="variations">
   (the "Size" row) and a .single_variation_wrap as form.cart's direct
   children — flexing the form there put that whole wrap (price + qty +
   button all stacked inside it) as a second column next to "Size" instead
   of a normal block below it, which is what looked broken. Their qty+button
   pair has its own wrapper (.woocommerce-variation-add-to-cart, from
   variation-add-to-cart-button.php) — that's flexed instead, one row below
   the Size selector. */
form.cart:not(.variations_form) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
form.cart .quantity {
  margin: 0;
}
.quantity .qty {
  width: 80px;
}

table.variations {
  width: 100%;
  margin: 0 0 1rem;
}
table.variations tr {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.6rem;
}
table.variations th.label {
  font-weight: 700;
  white-space: nowrap;
}
table.variations td.value {
  flex: 1;
}
table.variations select {
  width: 100%;
  max-width: 260px;
}
.woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.4rem;
}
.woocommerce-variation-add-to-cart .quantity {
  margin: 0;
}
.woocommerce-variation-price {
  margin: 0 0 0.8rem;
}

.my-account-orders table,
.woocommerce-MyAccount-content table {
  width: 100%;
}

/* My Account dashboard (woocommerce/myaccount/my-account.php, not overridden):
   it prints <nav class="woocommerce-MyAccount-navigation"> and
   <div class="woocommerce-MyAccount-content"> as plain siblings inside the
   shortcode's own <div class="woocommerce"> wrapper — nothing turned that
   pair into an actual two-column layout, so the nav just sat above the
   content as a wrapping row of pills. Grid applies to that shared
   .woocommerce wrapper, scoped to the My Account page via the woocommerce-account
   body class WooCommerce already adds, so it doesn't affect shop/cart/etc. */
/* :has() scopes this to the actual logged-in dashboard (nav + content as
   siblings) — body.woocommerce-account is present on the logged-out
   login/register view too, and that page's .woocommerce wrapper has
   completely different children (an always-present-even-when-empty
   .woocommerce-notices-wrapper, then #customer_login), which this same
   selector without :has() was turning into a 240px/1fr grid too, landing
   the empty notices div in its own visible left-hand column. */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 782px) {
  body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: 240px 1fr;
  }
}
.woocommerce-notices-wrapper:empty {
  display: none;
}
.woocommerce-MyAccount-navigation {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.7rem;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  color: var(--text-muted);
  text-decoration: none;
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  transition: color 180ms ease, background 180ms ease, padding-left 180ms ease;
}
.woocommerce-MyAccount-navigation-link a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-cyan);
  transform: scaleY(0);
  transition: transform 180ms ease;
}
.woocommerce-MyAccount-navigation-link a:hover {
  background: rgba(34, 197, 94, 0.08);
  color: var(--text);
  padding-left: 1.3rem;
}
.woocommerce-MyAccount-navigation-link a:hover::before,
.woocommerce-MyAccount-navigation-link.is-active a::before {
  transform: scaleY(1);
}
.woocommerce-MyAccount-navigation-link.is-active a {
  background: rgba(34, 197, 94, 0.12);
  border-color: var(--line);
  color: var(--accent-cyan);
}
.woocommerce-MyAccount-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem;
}
@media (max-width: 781px) {
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .woocommerce-MyAccount-navigation-link a {
    border-radius: 999px;
    padding: 0.4rem 1rem;
  }
  .woocommerce-MyAccount-navigation-link a::before {
    display: none;
  }
  .woocommerce-MyAccount-navigation-link a:hover {
    padding-left: 1rem;
  }
}

/* Category archive banner — shows the category's WooCommerce "Thumbnail" image
   and/or its Extra Information field (Products → Categories → edit a category). */
.category-banner p {
  margin: 0;
  color: var(--text-muted);
}
.category-banner--with-image {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem;
}
.category-banner-img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .category-banner--with-image {
    flex-direction: column;
    text-align: center;
  }
}

/* Shown briefly while shop-ajax.js is fetching a filtered/sorted/paged view. */
.shop-layout.nc-shop-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Review-form star rating. WooCommerce's own single-product.js turns the
   #rating <select> into <p class="stars"><a class="star-1">1 of 5 stars</a>...
   links — that link text is meant to be hidden and replaced by a star glyph
   via CSS, which only existed in the default WC stylesheet this theme
   disables. Uses a plain Unicode star instead of WC's icon font so no extra
   font asset needs enqueuing.

   single-product.js only ever adds .active to the exact star clicked (and
   .selected to the container) — it never touches the other <a> elements, so
   "fill every star up to the one clicked" has to be pure CSS. The trick:
   hovering/selecting colors *every* star, then un-colors whichever ones come
   after (later in DOM = higher star number) the one actually hovered/active,
   via the `~` general sibling combinator — leaving exactly stars 1..N lit. */
p.stars {
  margin: 0.3rem 0 1rem;
}
p.stars a {
  position: relative;
  display: inline-block;
  width: 1.3em;
  height: 1.2em;
  overflow: hidden;
  text-indent: -999px;
  margin-right: 2px;
}
p.stars a::before {
  content: "★";
  position: absolute;
  inset: 0;
  text-indent: 0;
  color: rgba(232, 245, 224, 0.35);
  font-size: 1.15rem;
  line-height: 1.2;
}
p.stars:hover a::before,
p.stars.selected a::before {
  color: #ffd700;
}
p.stars a:hover ~ a::before,
p.stars.selected a.active ~ a::before {
  color: rgba(232, 245, 224, 0.35);
}
.star-rating {
  overflow: hidden;
  position: relative;
  height: 1.2em;
  line-height: 1.2em;
  width: 5.4em;
  font-family: inherit;
}
.star-rating::before {
  content: "★★★★★";
  color: rgba(232, 245, 224, 0.35);
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}
.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.2em;
}
.star-rating span::before {
  content: "★★★★★";
  top: 0;
  position: absolute;
  left: 0;
  color: var(--accent-cyan);
}

/* Related/up-sell products (single-product.php, cart.php) render through
   WooCommerce's own woocommerce_product_loop_start()/_end(), which outputs
   plain <ul class="products columns-N"> — this never got a grid layout once
   the default WC stylesheet was disabled, so every product stacked one per
   row. inc/woocommerce-hooks.php sets related products to 4 columns/4 total;
   this is the grid that actually lays them out 4-per-row. */
.related.products h2 {
  margin: 0 0 1.2rem;
}
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.products.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  ul.products.columns-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 782px) {
  ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  ul.products.columns-4 {
    grid-template-columns: 1fr;
  }
}

/* Cart page (woocommerce/templates/cart/cart.php — no custom theme template
   exists for it, unlike mini-cart.php). The generic ".shop_table td { width:
   100% }" rule above is meant for simple 1-column rows (checkout/my-account
   tables); forcing it onto the cart table's remove/thumbnail columns too
   fights the browser's table layout and leaves the thumbnail <img> with no
   size of its own — same fix as .cart-row img in the mini-cart drawer. */
.woocommerce table.shop_table th.product-remove,
.woocommerce table.shop_table th.product-thumbnail,
.woocommerce table.shop_table td.product-remove,
.woocommerce table.shop_table td.product-thumbnail {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.woocommerce table.shop_table td.product-thumbnail img {
  display: block;
  width: 72px;
  max-width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}
.woocommerce table.shop_table td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}
.woocommerce table.shop_table td.product-remove a.remove:hover {
  color: #ff5d5d;
  border-color: #ff5d5d;
}
.woocommerce table.shop_table td.product-name a {
  color: var(--text);
  font-weight: 600;
}
/* cart.php's <tr> around this cell has no class of its own — only the <td>
   does (<td colspan="6" class="actions">) — so these rules never matched
   anything as "tr.actions", and the coupon input fell through to the
   generic .woocommerce input.input-text { width: 100% } rule instead,
   stretching it across the whole cart table. */
.woocommerce table.shop_table td.actions {
  background: transparent;
  border: none;
  padding: 1rem 1rem 1.3rem;
}
.woocommerce table.shop_table td.actions .coupon {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.woocommerce table.shop_table td.actions .coupon .input-text {
  width: auto;
  max-width: 240px;
  min-width: 180px;
  flex: 1 1 200px;
}
.woocommerce table.shop_table td.actions .coupon label {
  margin: 0;
}
.cart-collaterals {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}
.cart-collaterals .cart_totals {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.cart_totals h2 {
  margin: 0 0 1rem;
}
.cart_totals table {
  width: 100%;
  border-collapse: collapse;
}
.cart_totals th,
.cart_totals td {
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0;
  color: var(--text);
  background: none;
}
/* cart-totals.php's table also carries class="shop_table" — the generic
   table.shop_table rule above would otherwise give it its own border/radius
   too, nesting a second box inside this card. Boosted specificity
   (.woocommerce .cart_totals table.shop_table) over that generic rule turns
   the inner table back into a plain row list, so only this outer card has
   a border — matching the cart items table above it instead of duplicating it. */
.woocommerce .cart_totals table.shop_table {
  border: none;
  border-radius: 0;
  overflow: visible;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0;
}
.woocommerce .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart_totals table.shop_table tr:last-child td {
  border-bottom: none;
}
.cart_totals .wc-proceed-to-checkout {
  margin-top: 1.2rem;
}

/* Checkout page — billing/shipping fields live inside the multi-step wizard's
   own .nc-checkout-wrap grid now (see the "MULTI-STEP CHECKOUT" block below);
   this just keeps the two field columns inside step 1 spaced apart. */
.col2-set .col-1,
.col2-set .col-2 {
  margin-bottom: 1.5rem;
}

/* My Account → Login/Register (woocommerce/myaccount/form-login.php, not
   overridden — it already wraps both forms in .col2-set#customer_login /
   .u-column1 / .u-column2, same generic 2-column classes checkout reuses
   above, but nothing ever gave the pair an actual side-by-side layout, so
   they just stacked as plain divs, each field spanning the full page width. */
#customer_login.col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  #customer_login.col2-set {
    grid-template-columns: 1fr 1fr;
  }
}
#customer_login .u-column1,
#customer_login .u-column2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.8rem;
}
#customer_login h2 {
  margin: 0 0 1.2rem;
}
#customer_login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
}
#customer_login input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  width: 16px;
  height: 16px;
}
#customer_login .lost_password {
  margin-top: 1rem;
}
#customer_login .lost_password a {
  color: var(--text-muted);
  text-decoration: underline;
}

.woocommerce-error {
  padding-left: 1.2rem;
  list-style-type: none;
}
.woocommerce-error li {
  list-style: none;
}
.cart_totals .order-total .amount {
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════
   MULTI-STEP CHECKOUT (woocommerce/checkout/form-checkout.php)
   ═══════════════════════════════════════════════ */
.nc-checkout-wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .nc-checkout-wrap {
    grid-template-columns: 1fr;
  }
}

.nc-checkout-main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2rem;
}

.nc-checkout-progress {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  position: relative;
}
.nc-checkout-progress::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: var(--line);
  z-index: 0;
  opacity: 0.4;
}
.nc-checkout-progress-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  cursor: pointer;
}
.nc-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--text-muted);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.nc-checkout-progress-step.is-active .nc-step-dot,
.nc-checkout-progress-step.is-done .nc-step-dot {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  border-color: var(--accent-cyan);
  color: #000;
  box-shadow: 0 0 16px rgba(78, 255, 78, 0.4);
}
.nc-step-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.nc-checkout-progress-step.is-active .nc-step-label,
.nc-checkout-progress-step.is-done .nc-step-label {
  color: var(--text);
}

.nc-checkout-step[hidden] {
  display: none !important;
}

.nc-shipping-methods {
  margin-bottom: 1rem;
}
.nc-shipping-method-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  color: var(--text);
}
.nc-shipping-method-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.woocommerce-checkout-payment ul.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.woocommerce-checkout-payment ul.payment_methods > li {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
}
.woocommerce-checkout-payment .payment_box {
  margin-top: 0.8rem;
  padding: 1rem;
  background: rgba(78, 255, 78, 0.06);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.woocommerce-checkout-payment .payment_box::before {
  display: none;
}
.woocommerce-checkout-payment .form-row.place-order {
  margin-top: 1.2rem;
}
.woocommerce-checkout-payment #place_order {
  width: 100%;
}

.nc-checkout-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 2rem;
}
.nc-checkout-nav [hidden] {
  display: none !important;
}

.nc-checkout-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  position: sticky;
  top: 100px;
}
.nc-checkout-sidebar h3 {
  margin: 0 0 1.2rem;
  color: var(--text);
  font-size: 1.1rem;
}

.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
  accent-color: var(--accent-cyan);
}

.nc-field-invalid input,
.nc-field-invalid select,
.nc-field-invalid textarea {
  border-color: #ff5d5d !important;
}
.nc-field-invalid label {
  color: #ff5d5d;
}