/**
 * Product page extras.
 *
 * assets/css/product-detail.css is the UI team's file and is not edited, so rules the dynamic
 * template needs that the prototype never had live here instead — the same arrangement as
 * assets/js/product-extras.js beside product-detail.js.
 */

/**
 * Hide the quantity control when there is no quantity to choose.
 *
 * WooCommerce renders the input as `type="hidden"` whenever the customer has no choice — one item
 * in stock, or a "sold individually" product — because min and max are then the same
 * (wc-template-functions.php:4879). The input still posts `quantity=1`, which is correct, but it
 * stops being visible, and the theme's `−` / `+` buttons are added on
 * `woocommerce_before/after_quantity_input_field` regardless. The result was a Quantity label over
 * an empty box with two buttons that did nothing.
 *
 * **Keyed off the rendered `type`, not off a stock count.** The alternative is re-deriving
 * WooCommerce's `min === max` test in PHP, which is a second copy of a rule that can drift; this
 * cannot disagree with the markup because it reads it. One rule covers both add-to-cart templates,
 * simple and variable, and every reason the input goes hidden — one in stock, or Sold Individually.
 *
 * Scoped to `.qty-wrp`, which is the design's wrapper and exists only in those two templates
 * (add-to-cart/simple.php:36, add-to-cart/variation-add-to-cart-button.php:21). The cart's own
 * quantity field has no such wrapper and is not touched.
 *
 * Not covered, because it is decided before a variation is chosen: a **variable** product resolves
 * min/max from the parent at render, so picking a variation with one left still shows a number
 * input capped at 1. That is WooCommerce's behaviour, not the theme's.
 *
 * `:has()` is the whole trick, and it degrades to today's behaviour on a browser without it.
 */
.qty-wrp:has(.quantity input[type="hidden"]) {
    display: none;
}

/**
 * Hover affordance on the brand link under the product title.
 *
 * The brand name became a link to its archive (templates/blocks/product/header.php). It already
 * reads as interactive — `.brand-wr span` colours it `var(--theme)` against the grey "Brand:" label
 * — but with the global `a` rule setting `text-decoration: none` and nothing else, it had no hover
 * state at all, so nothing confirmed it was clickable before the click.
 *
 * Underline on hover only, which leaves the resting state exactly as the design draws it. The rule
 * lives here rather than in product-detail.css because that sheet is the UI team's.
 */
.brand-wr a:hover span {
    text-decoration: underline;
}

/**
 * The SDS control beside the price, when a product carries more than one sheet.
 *
 * Two products do: a two-part system has a sheet per part, and a product sold both dry and
 * ready-mixed has one per form. One sheet still renders a plain `.pr-sds-btn` that downloads on
 * click — 36 of the 38 products, drawn exactly as the UI team drew it. Several render a `<details>`
 * whose `<summary>` carries the same class, so the closed state is pixel-identical to the single
 * case and the row still holds the two children `.prc-stk-wrap` is built for.
 *
 * `<details>` rather than a scripted dropdown because it works with no JavaScript at all, and these
 * are safety documents. product-extras.js only adds closing on outside click, Escape and selection.
 *
 * The rules live here because product-detail.css is the UI team's file.
 */
.pr-sds-dd {
    position: relative;
}

/* Both are needed to drop the disclosure triangle: Safari still wants the pseudo-element. */
.pr-sds-dd > summary {
    list-style: none;
    cursor: pointer;
}

.pr-sds-dd > summary::-webkit-details-marker {
    display: none;
}

/**
 * The caret, drawn rather than fetched so it can use `currentColor` — `.pr-sds-btn:hover` swaps the
 * text to var(--cream) on var(--theme), and an SVG file would keep its own stroke and disappear.
 */
.pr-sds-dd > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.pr-sds-dd[open] > summary::after {
    transform: translateY(1px) rotate(-135deg);
}

/**
 * Absolute, so opening the list lays it over the page instead of pushing the stock line and the
 * quantity stepper down. Nothing clips it — the only `overflow: hidden` rules in product-detail.css
 * are `.quantity` and `.pr-usps-grid`, and neither is an ancestor.
 */
.pr-sds-dd__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);

    /**
     * `width: max-content` between the two bounds, so a row sizes to its own text rather than
     * wrapping "Rockcote Marrakesh 16Kg (Dry)" onto a second line inside a half-empty panel. The
     * bounds keep it at least as wide as the button it drops from, and never wider than the column.
     */
    width: max-content;
    min-width: 100%;
    max-width: 320px;

    /**
     * Explicit, because reset.css:107 already says `ol, ul { list-style: none }` and it does NOT
     * win: includes/assets.php:32-33 loads reset before normalize, and normalize.css:38 sets
     * `ul { list-style-type: disc }` at the same specificity. Without this the markers render
     * outside the panel, floating to the left of it. Any new list in this theme needs the same.
     */
    list-style: none;

    padding: 6px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-default);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pr-sds-dd__list a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-default);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--text-color);
}

.pr-sds-dd__list a:hover,
.pr-sds-dd__list a:focus-visible {
    background-color: var(--cream);
    color: var(--theme);
}

/**
 * Which edge the list hangs from follows the button, which moves.
 *
 * `.prc-stk-wrap` is `flex-wrap: wrap; justify-content: space-between`, so while the price and the
 * button share a line the button sits hard right and the list has to open leftward into the column.
 * Once the row wraps the button is left-aligned on a line of its own and the list has to open
 * rightward instead, or it hangs off the side of the screen.
 *
 * 991.98px is where product-detail.css:1059 stacks the two columns — the same pixel the trust
 * factors above swap at, and in practice where this row wraps. Checked at 1440px and 390px.
 */
.pr-sds-dd__list {
    right: 0;
}

@media (max-width: 991.98px) {
    .pr-sds-dd__list {
        right: auto;
        left: 0;
        max-width: calc(100vw - 40px);
    }
}

/**
 * Trust factors: under the gallery on desktop, below the description on mobile.
 *
 * The block is rendered twice from templates/blocks/product/usps.php — once in each column — because
 * the two positions have different parents and CSS `order` only sorts siblings inside one container.
 * These two rules are what make exactly one of them visible.
 *
 * **`grid`, not `block`.** `.pr-usps-grid` (product-detail.css:292) is a two-column grid whose
 * :before and :after draw the dividing cross at the 50% lines. Restoring it as `block` would stack
 * the four tiles in a single column and leave the rules across empty space.
 *
 * 991.98px is the breakpoint product-detail.css:1059 already stacks the columns at, so the swap
 * happens on the same pixel rather than one either side of it — at any other value there would be a
 * width where both copies show, or neither.
 *
 * Not `.pr-visible-mobile` / `.pr-visible-desktop`: those are scoped to the columns and written for
 * the opposite direction. See the partial's docblock.
 */
.pr-usps-grid.pr-usps--mobile {
    display: none;
}

@media (max-width: 991.98px) {
    .pr-usps-grid.pr-usps--desktop {
        display: none;
    }

    .pr-usps-grid.pr-usps--mobile {
        display: grid;
    }
}

/**
 * A lone button in the product page's button row keeps its own width.
 *
 * product-detail.css:523 gives each button `flex: 1` so Add to Cart and Request a Quote split the
 * row. When a product cannot be added to the cart (out of stock, or $0 and quote-only — D-026) the
 * quote button is alone and would stretch across the column.
 */
.product-detail-right .btnlist .button:only-child {
    flex: 0 0 auto;
}