/*
 * WooCommerce.
 *
 * WooCommerce's own general/layout/smallscreen stylesheets are dequeued in
 * inc/woocommerce.php, so everything the shop needs is declared here against
 * the design system. That avoids the !important war that made the previous
 * theme unmaintainable.
 */

.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--k-space-7) var(--k-space-5);
  list-style: none;
  margin: var(--k-space-6) 0 0;
  padding: 0;
}

ul.products::before,
ul.products::after { content: none; }

.k-card__actions { margin-top: var(--k-space-3); }

/* The loop button is full width on the card so the buy action is unmistakably
   the primary control — the failure Sheena's product page demonstrates. */
.k-card__cta { width: 100%; }

.woocommerce-result-count,
.woocommerce-ordering { font-size: var(--k-size-small); color: var(--k-ink-muted); }

.woocommerce-ordering select {
  min-height: 48px;
  padding: 0 var(--k-space-3);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
}

.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-1);
  list-style: none;
  padding: 0;
  margin: var(--k-space-7) 0 0;
  border: 0;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--k-space-2);
  border: 1px solid var(--k-rule);
  color: var(--k-ink);
  text-decoration: none;
  font-size: var(--k-size-small);
  font-variant-numeric: tabular-nums;
}

.woocommerce-pagination .page-numbers.current {
  border-color: var(--k-ink);
  background-color: var(--k-surface);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--k-space-3) var(--k-space-4);
  border-left: 2px solid var(--k-forest);
  background-color: var(--k-forest-tint);
  color: var(--k-ink);
  font-size: var(--k-size-small);
  list-style: none;
  margin-bottom: var(--k-space-5);
}

.woocommerce-error { border-left-color: var(--k-rose); }

@media (max-width: 60rem) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-space-6) var(--k-space-4); }
}

@media (max-width: 34rem) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: 1fr; }
}

/* Titles wrap to different depths across the grid, so the actions are pushed to
   a common baseline and every buy control lines up across a row. */
.k-card { height: 100%; }
.k-card__actions { margin-top: auto; padding-top: var(--k-space-3); }

/* ---------------------------------------------------------------------------
   Product detail.
--------------------------------------------------------------------------- */
.k-product__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--k-space-7);
  align-items: start;
  margin-top: var(--k-space-5);
}

/* The plate, same device as the card: two warm tones meeting at a hard edge
   with a hairline rule set inside the trim. */
.k-plate {
  position: relative;
  /* Square, not 4:5. On a half-width column a 4:5 plate stands far taller than
     the summary beside it and the bottle floats in the upper third. */
  aspect-ratio: 1;
  max-width: 36rem;
  overflow: hidden;
}

.k-plate::before {
  content: "";
  position: absolute;
  inset: 14px;
  background-image: linear-gradient(
    to bottom,
    var(--k-paper) 0%,
    var(--k-paper) 74%,
    var(--k-paper-sunk) 74%,
    var(--k-paper-sunk) 100%
  );
}

.k-plate::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--k-rule);
  pointer-events: none;
}

/* Held near 480px so the 2014-era photography stays close to 2x rather than
   being blown up and going soft. */
.k-plate img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin-inline: auto;
  object-fit: contain;
  padding: clamp(1.5rem, 5%, 3rem);
}

.k-product__title {
  font-size: var(--k-size-h1);
  margin-block: var(--k-space-2) var(--k-space-3);
}

.k-product__excerpt { margin-bottom: var(--k-space-4); }

/* The buy action is the only rose element on the page and is deliberately
   dominant over the stepper — the hierarchy failure the Sheena audit found. */
.k-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--k-space-3);
  margin-block: var(--k-space-5);
}

.k-product form.cart .quantity { flex: 0 0 auto; }

.k-product form.cart .quantity input.qty {
  width: 5rem;
  min-height: 58px;
  padding: 0 var(--k-space-2);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.k-product form.cart .single_add_to_cart_button { flex: 1 1 16rem; }

/* Spec block: labels in the small-caps voice, values in body, ruled rows. */
.k-spec { border-top: 1px solid var(--k-rule); margin-top: var(--k-space-5); }

.k-spec__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--k-space-4);
  padding-block: var(--k-space-3);
  border-bottom: 1px solid var(--k-rule);
}

.k-spec__label {
  font-family: var(--k-font-body);
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  margin: 0;
  line-height: 1.8;
}

.k-spec__value { margin: 0; max-width: none; }

@media (max-width: 60rem) {
  .k-product__layout { grid-template-columns: 1fr; gap: var(--k-space-5); }
  .k-spec__row { grid-template-columns: 1fr; gap: var(--k-space-1); }
}

/* WooCommerce renders the single add-to-cart from a core template whose class
   is not filterable, so the buy-button treatment is applied by selector.
   Scoped through form.cart deliberately: the later cart layer styles
   `.woocommerce .button` as the quiet tier at equal specificity, and without
   the extra selector it wins and the buy action loses its fill entirely. */
.k-product form.cart .single_add_to_cart_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 1rem 2.5rem;
  border: 1px solid var(--k-rose);
  border-radius: 0;
  background-color: var(--k-rose);
  color: var(--k-surface);
  font-family: var(--k-font-body);
  font-size: var(--k-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--k-duration) var(--k-ease);
}

.k-product form.cart .single_add_to_cart_button::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  opacity: 0.32;
  pointer-events: none;
  transition: inset var(--k-duration) var(--k-ease), opacity var(--k-duration) var(--k-ease);
}

.k-product form.cart .single_add_to_cart_button:hover,
.k-product form.cart .single_add_to_cart_button:focus-visible {
  background-color: var(--k-rose-deep);
  border-color: var(--k-rose-deep);
}

.k-product form.cart .single_add_to_cart_button:hover::after { inset: 3px; opacity: 0.5; }

/* The rail carries short values only; a long one wraps within its own cell
   rather than forcing the row to break. */
.k-rail__value { overflow-wrap: anywhere; }

/* WooCommerce renders its own breadcrumb on shop and product pages, so it gets
   the theme's breadcrumb treatment rather than being left unstyled. */
.woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--k-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  margin-bottom: var(--k-space-3);
}

.woocommerce-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--k-ink-muted);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover { color: var(--k-ink); text-decoration: underline; }

/* -------------------------------------------------------------------------
 * Third-party summary controls (wishlist and similar).
 *
 * Styled defensively, not required. Production runs YITH Wishlist, whose button
 * ships as a dark #333 pill with a 16px radius — neither of which exists
 * anywhere in this design, sitting directly beneath the one control that is
 * allowed to be loud.
 *
 * Themed through the plugin's own custom properties rather than by overriding
 * its declarations, so this works with its API instead of against it. The two
 * properties it does not expose as variables (border width, layout) are set on
 * a three-class selector, which outranks the plugin's
 * `.yith-wcwl-add-to-wishlist-button:is(button):not(...)` — that reads as
 * (0,2,1), and class count is compared before element count, so (0,3,0) wins
 * without `!important` and without depending on stylesheet order.
 *
 * A PHP filter route exists (`yith_wcwl_add_to_wishlist_button_classes`) but is
 * useless here: this button is built client-side from a data attribute, so no
 * server-side class filter ever touches it.
 *
 * If the plugin is absent, none of this matches anything.
 * ---------------------------------------------------------------------- */
.k-product .yith-add-to-wishlist-button-block,
.k-product .yith-wcwl-add-to-wishlist {
  --color-add-to-wishlist-background: transparent;
  --color-add-to-wishlist-background-hover: transparent;
  --color-add-to-wishlist-text: var(--k-ink);
  --color-add-to-wishlist-text-hover: var(--k-forest);
  --color-add-to-wishlist-border: var(--k-rule-strong);
  --color-add-to-wishlist-border-hover: var(--k-forest);
  --rounded-corners-radius: 0;

  margin-top: var(--k-space-3);
}

.k-product .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button,
.k-product .yith-wcwl-add-to-wishlist .add_to_wishlist {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.5rem 1.15rem;
  font-family: inherit;
  font-size: var(--k-size-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-width: 1px;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--k-duration) var(--k-ease), color var(--k-duration) var(--k-ease);
}

/* The heart is ornament beside the label, so it takes the muted tone rather
   than competing with the text it sits next to. */
.k-product .yith-wcwl-icon-svg,
.k-product .yith-wcwl-add-to-wishlist-button-icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--k-ink-muted);
}

.k-product .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button:focus-visible {
  outline: 2px solid var(--k-forest);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Shop category navigation.
 *
 * The sidebar's product-categories widget, rebuilt as a rail: small caps,
 * hairline rules, counts set quieter than the names. Horizontal so the
 * catalogue keeps the full measure, and scrollable rather than wrapping into a
 * block of links on narrow screens — the grid below is what the page is for.
 * ---------------------------------------------------------------------- */
.k-catnav {
  margin-bottom: var(--k-space-5);
  border-block: 1px solid var(--k-rule);
}

.k-catnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-catnav__item + .k-catnav__item {
  border-left: 1px solid var(--k-rule);
}

.k-catnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  /* A short label like "All" is only 46px wide on padding alone, which fails
     the target size by 2px. The minimum is set explicitly rather than tuned
     through padding, so it holds whatever the category is called. */
  min-width: 48px;
  justify-content: center;
  padding-inline: var(--k-space-3);
  font-size: var(--k-size-meta);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--k-ink-muted);
  transition: color var(--k-duration) var(--k-ease), background-color var(--k-duration) var(--k-ease);
}

.k-catnav__link:hover,
.k-catnav__link:focus-visible {
  color: var(--k-ink);
  background-color: var(--k-paper-sunk);
}

/* The current category is marked by weight and ink, not by a fill: a filled
   chip here would read as a control competing with the buy action. */
.k-catnav__link.is-current {
  color: var(--k-forest);
  box-shadow: inset 0 -2px 0 var(--k-forest);
}

.k-catnav__count {
  font-size: 0.85em;
  letter-spacing: 0.04em;
  color: var(--k-ink-muted);
}

.k-catnav__link.is-current .k-catnav__count {
  color: var(--k-forest);
}

@media (max-width: 48rem) {
  /* One row that scrolls, rather than a stack of links pushing the grid down. */
  .k-catnav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .k-catnav__link { white-space: nowrap; }
}