/* mouldshop-buybox.css — the PDP right column. TASK-0050, DEC-0026 ruling 36, Figma D.
   Loaded via MouldshopHead. Tokens from mouldshop.css (--ms-*). Zero colour literals. */

:root {
    --ms-buybox-gap: 1.25rem;
    --ms-buybox-radius: 999px;
    --ms-buybox-divider: 1px;
}

.ms-buybox {
    display: flex;
    flex-direction: column;
    gap: var(--ms-buybox-gap);
}

/* --- title ------------------------------------------------------------- */

.ms-buybox-title {
    margin: 0;
    font-family: var(--ms-font-head);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    line-height: 1.15;
    color: var(--ms-ink);
}

/* --- price ------------------------------------------------------------- */

.ms-buybox-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ms-buybox-price-now {
    font-family: var(--ms-font-head);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--ms-ink);
}

/* Figma D: the superseded price is grey and struck through. It is NOT red and it is
   NOT the emphasis — the current price is. Order in the DOM puts "was" first so a
   screen reader reads the old price before the new one, which is the way round that
   makes the sentence true. */
.ms-buybox-price-was {
    font-family: var(--ms-font-body);
    font-size: 1.05rem;
    color: var(--ms-navy-40);
    text-decoration: line-through;
}

/* --- From £X, variant products (image A) -------------------------------- */

.ms-buybox-from {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
}

.ms-buybox-from-label {
    font-family: var(--ms-font-body);
    font-size: 0.95rem;
    color: var(--ms-navy-60);
}

.ms-buybox-from-value {
    font-family: var(--ms-font-head);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ms-ink);
}

/* --- buttons ------------------------------------------------------------ */

.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--ms-buybox-radius);
    font-family: var(--ms-font-head);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.ms-btn--primary {
    background: var(--ms-navy);
    border-color: var(--ms-navy);
    color: var(--ms-white);
}

.ms-btn--primary:hover {
    background: var(--ms-blue);
    border-color: var(--ms-blue);
    color: var(--ms-white);
}

.ms-btn--ghost {
    background: transparent;
    border-color: var(--ms-ink);
    color: var(--ms-ink);
}

.ms-btn--ghost:hover {
    background: var(--ms-navy);
    color: var(--ms-white);
}

.ms-btn:focus-visible {
    outline: 2px solid var(--ms-blue);
    outline-offset: 2px;
}

.ms-buybox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Both buttons share the row on a variant product (image A) and each takes half. */
.ms-buybox-actions > .ms-btn {
    flex: 1 1 12rem;
}

/* --- qty + basket ------------------------------------------------------- */

.ms-buybox-cart {
    margin: 0;
}

.ms-buybox-cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

/* The quantity control is vendor's partial. It is given a pill shell here rather than
   restyled internally: reaching inside another component's markup couples this file to
   markup we do not own and did not write, and vendor is free to change it at any
   upgrade. The shell is ours; what sits in it stays theirs. */
.ms-buybox-qty {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--ms-rule);
    border-radius: var(--ms-buybox-radius);
    padding: 0 0.35rem;
    background: var(--ms-white);
}

.ms-buybox-qty input {
    border: 0;
    background: transparent;
    text-align: center;
    max-width: 3.5rem;
}

.ms-buybox-add {
    flex: 1 1 12rem;
}

/* --- favourites --------------------------------------------------------- */

/* The wrapper is always emitted; vendor's partial renders NOTHING for a signed-out
   shopper. An empty flex container with a gap would otherwise leave a phantom gap in
   the column, so the wrapper collapses when it has no children. */
.ms-buybox-fav:empty {
    display: none;
}

/* FIGMA D DRAWS THIS AS A LIGHT PILL WITH A HEART, AND THAT IS ALSO THE FIX.
   Measured at 1440: vendor's button sits flush at the column's left edge (721px, same as
   the title and the "From" label) but carries `padding: 8px 24px` with a TRANSPARENT
   background and a TRANSPARENT border. So the heart itself starts 24px in while every
   line above it starts at 0, and the control reads as an indented stray icon rather than
   as a button. The operator reported it as "the heart sits indented".

   The padding was never wrong — the missing surface was. Giving the pill the light fill
   Figma D specifies makes the same 24px read as the button's inside, which is what it is.
   Everything here is set on vendor's own .btn inside our wrapper, so no vendor file is
   touched and the control keeps its behaviour. */
.ms-buybox-fav .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 46px;
    border-radius: var(--ms-buybox-radius);
    border: 1px solid var(--ms-rule);
    background: var(--ms-grey-5);
    color: var(--ms-ink);
    font-family: var(--ms-font-head);
    font-weight: 600;
    font-size: 0.875rem;
}

.ms-buybox-fav .btn:hover {
    border-color: var(--ms-navy-40);
    background: var(--ms-white);
    color: var(--ms-ink);
}

.ms-buybox-fav .btn:focus-visible {
    outline: 2px solid var(--ms-blue);
    outline-offset: 2px;
}

/* --- document links ----------------------------------------------------- */

.ms-buybox-docs {
    padding-block-start: var(--ms-buybox-gap);
    border-top: var(--ms-buybox-divider) solid var(--ms-rule);
}

.ms-buybox-docs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-buybox-doc {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ms-font-body);
    font-size: 0.95rem;
    color: var(--ms-ink);
    text-decoration: none;
}

.ms-buybox-doc:hover {
    text-decoration: underline;
}

.ms-buybox-doc-icon {
    flex: 0 0 auto;
    color: var(--ms-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
    .ms-btn {
        transition: none;
    }
}

/* TASK-0137 item 3 (Q-0190) — the old price's strike line through the middle of the digits,
   the same fix as the cards (104207a, mouldshop-card-content.css). Roboto's own strikeout sits
   0.275em above the baseline and a digit's centre is 0.355em, so a line-through runs 0.08em low
   and CSS cannot move it. The line is drawn as an UNDERLINE placed from the baseline instead:
   offset -0.38em = digit centre + half the line, thickness 0.05em = the font's strike thickness,
   skip-ink none so it stays unbroken. Colour is currentColor, the same grey as before. */
.ms-buybox-price-was {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: .05em;
    text-decoration-skip-ink: none;
    text-underline-position: auto;
    text-underline-offset: -.38em;
}