/* ==========================================================================
   WOOCOMMERCE — PLP, PDP, cart, checkout, account.
   WooCommerce's own "general" stylesheet is dequeued (see inc/enqueue.php),
   so everything a shop page needs is here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shop header
   ------------------------------------------------------------------------ */
/* Brand banner above the shop landing page. Shown at its native 16:9 — both
   letterbox crops were tested and each clipped the top of the wordmark, so this
   asset cannot be cropped tighter than it was authored. */
.g1-shop-banner {
  margin-top: var(--g1-space-5);
  border-radius: var(--g1-radius-sm);
  overflow: hidden;
  background: var(--g1-surface-2);
}
.g1-shop-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.g1-shop-head { padding-block: var(--g1-space-8) var(--g1-space-6); }
.g1-shop-head__title { margin-bottom: var(--g1-space-4); }
.g1-shop-head__desc { color: var(--g1-text-muted); max-width: 60ch; }


/* --------------------------------------------------------------------------
   Filter bar
   ------------------------------------------------------------------------ */
.g1-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g1-space-4);
  padding-block: var(--g1-space-4);
  border-block: var(--g1-border);
  margin-bottom: var(--g1-space-7);
}
.g1-filters__count { font-size: var(--g1-text-body-s); color: var(--g1-text-subtle); }

/* WooCommerce's ordering dropdown is not one of the theme's own .g1-field
   controls, so it needs styling explicitly — it was rendering as a bare white
   box on the dark shop page. */
.g1-filters__sort form,
.woocommerce-ordering { margin: 0; }

.g1-filters__sort select,
.woocommerce-ordering select {
  min-height: 44px;
  padding: 0 var(--g1-space-8) 0 var(--g1-space-4);
  background-color: var(--g1-bg);
  border: var(--g1-border-strong);
  border-radius: var(--g1-radius-sm);
  color: var(--g1-text);
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-semibold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--g1-space-4) center;
}

.g1-filters__sort select:focus-visible,
.woocommerce-ordering select:focus-visible {
  outline: none;
  border-color: var(--g1-red);
  box-shadow: 0 0 0 3px var(--g1-red-glow);
}

/* Native dropdown options render with the OS palette; force the dark one. */
.g1-filters__sort select option,
.woocommerce-ordering select option {
  background: var(--g1-bg);
  color: var(--g1-text);
}

/* --------------------------------------------------------------------------
   Product grid
   ------------------------------------------------------------------------ */
ul.products.g1-products {
  display: grid;
  gap: var(--g1-grid-gap);
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

@media (min-width: 768px) { ul.products.g1-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { ul.products.g1-products { grid-template-columns: repeat(4, 1fr); } }

/* WooCommerce adds float and width utilities to loop items.
   `min-width: 0` is load-bearing: a grid item defaults to `min-width: auto`, so
   a `1fr` track is really `minmax(auto, 1fr)` and any child that refuses to
   shrink below its min-content width pushes the whole track past its share.
   At 360px that produced tracks of 183px and 196px inside a 328px grid. */
ul.products li.product { float: none; width: auto; min-width: 0; margin: 0; }

.woocommerce-no-products-found { padding-block: var(--g1-space-9); text-align: center; color: var(--g1-text-muted); }

/* --------------------------------------------------------------------------
   Notices
   ------------------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  padding: var(--g1-space-4) var(--g1-space-5);
  margin-bottom: var(--g1-space-5);
  background: var(--g1-surface-2);
  border-left: 3px solid var(--g1-red);
  border-radius: var(--g1-radius-sm);
  font-size: var(--g1-text-body-s);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g1-space-3);
}
.woocommerce-message { border-left-color: var(--g1-success); }
.woocommerce-error { border-left-color: var(--g1-error); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; height: 40px; font-size: var(--g1-text-label); }

/*
 * Coupon errors are a separate path. WooCommerce deliberately keeps them out of
 * the notices wrapper and renders them under the input instead — see the
 * comment in assets/js/frontend/cart.js: "Coupon errors are shown under the
 * input." It ships no styling for the element outside its block stylesheet, so
 * it arrived as plain 16px black body text that did not read as an error.
 */
.coupon-error-notice {
  display: block;
  width: 100%;
  margin-top: var(--g1-space-2);
  color: var(--g1-error);
  font-size: var(--g1-text-body-s);
}
.coupon-error-notice::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-right: var(--g1-space-2);
  background: var(--g1-error);
  vertical-align: -0.15em;
}

/* Woo's default star font is replaced by the theme's own rating component. */
.woocommerce .star-rating { display: none; }