/* ==========================================================================
   Product detail — WooCommerce markup the approved design has never seen.

   `assets/css/product-detail.css` is the UI team's file and describes the prototype's markup, which
   was drawn against one simple product with a brand, a fixed price and no options. Making the page
   real introduces elements that file has no rules for at all — verified before writing this: no
   theme stylesheet defines `.stock`, `.variations`, `.woocommerce-variation`, `.shop_attributes` or
   `.woocommerce-notices-wrapper`.

   So they are described here instead, the same arrangement as `mini-cart.css`, `search.css` and
   `newsletter.css`, and for the same reason — see decisions.md, 2026-08-21. Enqueued straight after
   `product-detail` in includes/assets.php, so it inherits that file's cascade position.

   Every rule below names the design rule it mirrors, or the WooCommerce behaviour that makes it
   necessary. Nothing here restyles anything the design already draws.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The loop card's ruleset, kept off the product page
   --------------------------------------------------------------------------
   `wc_product_class()` puts `product type-product` on the product wrapper, which is what WooCommerce
   itself does and what extensions, structured-data scrapers and woocommerce-layout.css all look for.
   But `home.css:279` styles `.product.type-product` — **the loop card** — unscoped, with
   `display: flex !important`, `flex-direction: column`, a border, a shadow and a 13px margin. That
   file loads on this page for the related-products rail, so the page wrapper matched a card rule and
   the gallery and the summary stacked into one column inside a white bordered box.

   Found by measuring the rendered page rather than by reading the CSS: both flex children reported
   x=174, with the summary at y=961 instead of beside the gallery.

   woocommerce/content-single-product.php keeps the design's `.product-detail-row` in a div of its
   own, so the *row* can never inherit this. What is left is neutralising the wrapper itself.
   `display` needs `!important` because the card rule carries it.
   -------------------------------------------------------------------------- */
.product-detail-wrapper .product.type-product {
  display: block !important;
  margin: 0 !important;
  padding: 0;
  overflow: visible;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

/* Same ruleset, one level in: `.product.type-product .sale` pins the badge to the top-left corner of
   the card. The design puts this one in the meta row beside the SKU, in normal flow —
   product-detail.css:271 gives it everything except its position. Left alone it lands over the
   gallery, which is exactly where `woocommerce_show_product_sale_flash` was unhooked from. */
.product-detail-wrapper .product-info__badges .sale {
  position: static;
}

/* --------------------------------------------------------------------------
   Meta row — the divider with nothing after it
   --------------------------------------------------------------------------
   product-detail.css:293 puts a right-hand divider on `.product-info__meta span:first-child`,
   because the design shows two spans there: `SKU : CN183-1` and `Brand : Kegking`.

   `product_brand` has no terms in this catalogue, so **every product renders exactly one span** and
   the divider is a 16px stub hanging off the end of the SKU. This is the ordinary case today, not an
   edge case. `:only-of-type` matches only when there is no second span — the badges beside it are a
   div — so the divider returns by itself the day brands exist.
   -------------------------------------------------------------------------- */
/* .product-info__meta span:only-of-type {
  padding-right: 0;
  border-right: 0;
} */

/* --------------------------------------------------------------------------
   Short description — wpautop's paragraph
   --------------------------------------------------------------------------
   The `woocommerce_short_description` filter runs wpautop, so the copy arrives wrapped in <p> even
   when it is the single plain line 1,074 of these products carry. product-detail.css:299 sets the
   type on `.product-info__short-desc` itself and was written for the design's bare <p>, so the inner
   paragraph only needs its browser-default margins removed to render as that one paragraph.
   -------------------------------------------------------------------------- */
.product-info__short-desc p {
  margin: 0;
}

.product-info__short-desc p + p {
  margin-top: var(--space-12);
}

/* --------------------------------------------------------------------------
   Stock line
   --------------------------------------------------------------------------
   `wc_get_stock_html()` emits `<p class="stock in-stock">16 in stock</p>` from the add-to-cart
   template. The design shows stock only as the badge in the meta row, so this sits in the gap the
   design gave to `.product-info__points` — the loyalty line, which is not rendered because the site
   has no loyalty plugin (backlog.md).

   It is kept rather than dropped because it is the only thing that speaks for a product that is out
   of stock or on backorder, and because plugins filter it. Deliberately quiet.
   -------------------------------------------------------------------------- */
.product-info .stock {
  margin: var(--space-16) 0 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  color: #333;
}

.product-info .stock.out-of-stock {
  color: #df341d;
}

/* --------------------------------------------------------------------------
   Variation selects
   --------------------------------------------------------------------------
   **The design has no variation selector at all** — it was drawn against a simple product. 21 of the
   1,277 products are variable (the grain and malt products, two attributes each), and without a
   selector they cannot be bought, so this is the minimum that makes them purchasable and consistent
   with the rest of the column. It is a gap in the approved design and is reported as one; the UI
   team owns what it should finally look like.

   The label copies `.product-info__qty label` (product-detail.css:351) and the select copies the
   `.quantitybox` border, radius and height, so the block reads as part of the same form.
   -------------------------------------------------------------------------- */
.product-info__variations {
  margin-top: var(--space-30);
}

.product-info__variation + .product-info__variation {
  margin-top: var(--space-20);
}

.product-info__variation label {
  display: block;
  margin-bottom: var(--space-10);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: 1.44;
  color: #333;
}

.product-info__variation select {
  width: 100%;
  max-width: 360px;
  height: 50px;
  padding: 0 var(--space-40) 0 var(--space-16);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  color: #333;
  cursor: pointer;
  appearance: none;
  background-image: url("../images/svg/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: 14px 14px;
  transition: var(--transition);
}

.product-info__variation select:focus {
  outline: none;
  border-color: var(--primary);
}

/* `.reset_variations` is hidden by WooCommerce's own script until a selection is made, which it does
   with an inline `display`, so this only describes it once it is shown. */
.product-info__variations .reset_variations {
  display: inline-block;
  margin-top: var(--space-10);
  font-size: var(--fs-14);
  color: #6b6b6b;
  text-decoration: underline;
  transition: var(--transition);
}

.product-info__variations .reset_variations:hover {
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   The chosen variation's own price and stock
   --------------------------------------------------------------------------
   add-to-cart-variation.js writes into `.woocommerce-variation` when a combination is selected. The
   price inside it is the same `get_price_html()` markup as `.product-info__price`, so it borrows
   that block's type (product-detail.css:313) rather than inventing a second price style.
   -------------------------------------------------------------------------- */
.woocommerce-variation {
  margin-top: var(--space-20);
}

.woocommerce-variation .woocommerce-variation-price .price {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
}

.woocommerce-variation .woocommerce-variation-price ins {
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  text-decoration: none;
}

.woocommerce-variation .woocommerce-variation-price del {
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  color: #6b6b6b;
}

.woocommerce-variation .woocommerce-variation-price .amount {
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

/* WooCommerce toggles this class on the wrapper while no variation is chosen, and sets the button's
   `disabled` attribute with it. Without a rule the button looks live and does nothing on click. */
.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Notices
   --------------------------------------------------------------------------
   `woocommerce_output_all_notices` renders `<div class="woocommerce-notices-wrapper">` at the top of
   the page — "added to cart", cart errors, and anything a plugin adds. It is already inset by the
   `.container` that content-single-product.php wraps it in; this is what makes the message legible.
   -------------------------------------------------------------------------- */
.product-detail-page .woocommerce-notices-wrapper .woocommerce-message,
.product-detail-page .woocommerce-notices-wrapper .woocommerce-info,
.product-detail-page .woocommerce-notices-wrapper .woocommerce-error {
  margin: 0 0 2em 0;
  /* padding: var(--space-16) var(--space-20); */
  background-color: var(--bg-alt);
  /* border-left: 4px solid var(--primary); */
  /* border-radius: var(--radius-sm); */
  list-style: none;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: #333;
  outline: none !important;
}

.product-detail-page .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: #df341d;
}

.product-detail-page .woocommerce-notices-wrapper a {
  color: var(--primary);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .product-info__variation select {
    max-width: 100%;
    font-size: var(--fs-14);
  }

  .product-info .stock,
  .product-info__variation label {
    font-size: var(--fs-14);
  }
}