/*
 * Product detail page.
 *
 * Two columns on a desktop: gallery on the left, everything needed to decide on
 * the right - what it is, what it costs, and the button - in that order, with
 * the buy panel sticking as the details scroll past.
 */
.pdp { padding: 14px 0 48px; background: var(--white); }

/* ---- breadcrumb ---- */

.pdp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-light);
    /* Tighter than the 20px it had across the top of the page: it now sits
       directly above the category and the name it belongs to. */
    margin-bottom: 10px;
}

.pdp-crumbs a { color: var(--text-light); text-decoration: none; }
.pdp-crumbs a:hover { color: var(--primary-maroon); }
.pdp-crumbs .is-current { color: var(--text-dark); font-weight: 600; }

.pdp-alert {
    background: #f8e6e3;
    color: #a81e12;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
}

/* ---- top: gallery and buy panel ---- */

/*
 * The photo gets less than half the row.
 *
 * It was an even split, and with a square stage that made the picture as tall
 * as the screen on a wide monitor — a column of photograph beside a short buy
 * panel, then a band of nothing under the panel, then the rest of the page
 * starting below the bottom of the picture. The photo is evidence; the panel
 * is the decision.
 */
/*
 * Two columns for the whole of the top of the page.
 *
 * The left is the photograph and everything that describes the thing; the
 * right is the decision — price, button, delivery. The right is the shorter of
 * the two, which is why the description now sits in the left column rather than
 * below both: with the sections underneath, the page could not start them until
 * the taller column had ended, and the gap under the gallery was that wait made
 * visible.
 */
.pdp-top {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 26px;
    border-bottom: 1px solid #eeece7;
}

.pdp-left { min-width: 0; }

/* Inside a column the cards need no width of their own, and the first sits
   right under the photograph. */
.pdp-left .pdp-block { max-width: none; }
.pdp-left .pdp-block:first-of-type { margin-top: 18px; }

.pdp-gallery {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
}

/*
 * A product with one picture has no thumbnail strip, so without this the stage
 * becomes the first grid child and lands in the 68px thumbnail track - the
 * photo renders as a postage stamp. Most of the catalogue has one image.
 */
.pdp-gallery.is-single { grid-template-columns: minmax(0, 1fr); }

.pdp-thumbs { display: flex; flex-direction: column; gap: 10px; }

.pdp-thumb {
    position: relative;
    display: block;
    width: 68px;
    height: 68px;
    border: 1px solid #e4e4e0;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    background: var(--light-bg);
}

.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb input { position: absolute; opacity: 0; pointer-events: none; }
.pdp-thumb:has(input:checked) { border-color: var(--primary-maroon); }

/* Square, but never taller than a screenful: a portrait photograph in a
   square box on a wide monitor pushed everything else below the fold. */
.pdp-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 460px;
    border: 1px solid #eeece7;
    border-radius: 14px;
    overflow: hidden;
    background: var(--light-bg);
}

/*
 * Every image is in the DOM and the checked thumbnail decides which one shows.
 * No script, so the gallery works before the JavaScript lands and on a browser
 * that blocks it. The rules are written out per index rather than generated
 * because CSS has no arithmetic; six covers the catalogue with room to spare,
 * and a seventh image simply falls back to showing the first.
 */
.pdp-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
}

.pdp-main[data-index="0"] { display: block; }

.pdp-gallery:has(.pdp-thumb input[value="1"]:checked) .pdp-main[data-index="0"],
.pdp-gallery:has(.pdp-thumb input[value="2"]:checked) .pdp-main[data-index="0"],
.pdp-gallery:has(.pdp-thumb input[value="3"]:checked) .pdp-main[data-index="0"],
.pdp-gallery:has(.pdp-thumb input[value="4"]:checked) .pdp-main[data-index="0"],
.pdp-gallery:has(.pdp-thumb input[value="5"]:checked) .pdp-main[data-index="0"] { display: none; }

.pdp-gallery:has(.pdp-thumb input[value="1"]:checked) .pdp-main[data-index="1"],
.pdp-gallery:has(.pdp-thumb input[value="2"]:checked) .pdp-main[data-index="2"],
.pdp-gallery:has(.pdp-thumb input[value="3"]:checked) .pdp-main[data-index="3"],
.pdp-gallery:has(.pdp-thumb input[value="4"]:checked) .pdp-main[data-index="4"],
.pdp-gallery:has(.pdp-thumb input[value="5"]:checked) .pdp-main[data-index="5"] { display: block; }

.pdp-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--primary-maroon);
    color: var(--accent-gold);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- the buy panel ---- */

/* Sticky, now that the column beside it is the long one: the price and the
   button stay in view while the description is read. 160px clears the site
   header, which is sticky itself. */
.pdp-buy { position: sticky; top: 160px; }

.pdp-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-maroon);
    text-decoration: none;
    margin-bottom: 8px;
}

.pdp-title {
    font-size: 25px;
    line-height: 1.3;
    color: var(--text-dark);
    margin: 0 0 6px;
    text-wrap: balance;
}

.pdp-unit { font-size: 14px; color: var(--text-light); margin: 0 0 12px; }

/* The green "same-day delivery" pill that used to sit under the title is gone
   — the delivery card answers for the shopper's own PIN code instead — and its
   rule went with it. Left in place it still matched the new card, which shares
   the class name, and turned that card into a single flex row: the heading, the
   PIN box and the answer all squeezed side by side. */

/* ---- Select Unit ---- */

.pdp-packs { margin: 0 0 18px; }

.pdp-packs-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 10px;
}

.pdp-pack-list { display: flex; flex-wrap: wrap; gap: 10px; }

.pdp-pack { position: relative; cursor: pointer; }

/* Off-screen rather than display:none, so the chip is still reachable by
   keyboard and the radio group behaves like a radio group. */
.pdp-pack input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.pdp-pack-box {
    display: block;
    position: relative;
    min-width: 88px;
    padding: 14px 12px 10px;
    border: 1.5px solid #e2ded6;
    border-radius: 10px;
    background: var(--white);
    text-align: center;
    line-height: 1.35;
}

.pdp-pack:hover .pdp-pack-box { border-color: #c9c2b9; }

.pdp-pack:has(input:checked) .pdp-pack-box {
    border-color: #2e6b4f;
    background: #f2f9f5;
}

.pdp-pack:has(input:focus-visible) .pdp-pack-box { outline: 2px solid var(--primary-maroon); outline-offset: 2px; }

.pdp-pack-off {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--primary-maroon);
    color: var(--white);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pdp-pack-label { display: block; font-size: 13px; color: var(--text-dark); }

.pdp-pack-price { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-dark); margin-top: 3px; }

.pdp-pack-price s { font-weight: 400; font-size: 11.5px; color: var(--text-light); margin-left: 3px; }

/*
 * One panel per pack size, and the checked chip decides which one is on screen.
 * is-default shows first so a browser that cannot evaluate :has() still gets a
 * price and an Add button rather than an empty column; where :has() does work
 * the rules below hide every panel and then show the chosen one, which is more
 * specific and therefore wins. Written out per index 0-5 because CSS cannot
 * count - the same reason the gallery is, and why Product::MAX_VARIANTS is 6.
 */
.pdp-variant { display: none; }
.pdp-variant.is-default { display: block; }

.pdp-buy:has(.pdp-pack input:checked) .pdp-variant { display: none; }

.pdp-buy:has(.pdp-pack input[value="0"]:checked) .pdp-variant[data-pack="0"],
.pdp-buy:has(.pdp-pack input[value="1"]:checked) .pdp-variant[data-pack="1"],
.pdp-buy:has(.pdp-pack input[value="2"]:checked) .pdp-variant[data-pack="2"],
.pdp-buy:has(.pdp-pack input[value="3"]:checked) .pdp-variant[data-pack="3"],
.pdp-buy:has(.pdp-pack input[value="4"]:checked) .pdp-variant[data-pack="4"],
.pdp-buy:has(.pdp-pack input[value="5"]:checked) .pdp-variant[data-pack="5"] { display: block; }

.pdp-chosen { font-size: 14px; font-weight: 600; color: var(--text-dark); margin: 0 0 6px; }

.pdp-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }

.pdp-price {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

.pdp-mrp {
    font-size: 16px;
    color: var(--text-light);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.pdp-off {
    background: #e8f3ec;
    color: #2e6b4f;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 700;
}

.pdp-tax { font-size: 12.5px; color: var(--text-light); margin: 4px 0 0; }

.pdp-low { font-size: 13px; font-weight: 600; color: #9a6a12; margin: 10px 0 0; }

.pdp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* The shared cart button grows up here: this is the page's one decision. */
.pdp-actions .cart-btn,
.pdp-actions .cart-stepper { min-height: 46px; font-size: 15px; }
.pdp-actions .cart-btn { padding: 0 30px; }
.pdp-actions .cart-stepper button { width: 42px; height: 46px; font-size: 19px; }
.pdp-actions .cart-stepper-count { min-width: 34px; font-size: 15px; }

/*
 * Buy Now, beside Add to Cart.
 *
 * Outlined rather than filled: two solid buttons side by side make a shopper
 * stop and choose between them, and the one that fills the basket is the one
 * this page is for. This is the shortcut, and it should read as one.
 */
.pdp-buy-now-form { display: contents; }

.pdp-buy-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 26px;
    border: 1px solid var(--primary-maroon);
    border-radius: 8px;
    background: var(--white);
    color: var(--primary-maroon);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.pdp-buy-now:hover {
    background: var(--primary-maroon);
    color: var(--accent-gold);
}



.pdp-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    list-style: none;
    margin: 26px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #eeece7;
}

.pdp-trust li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.35;
}

.pdp-trust i { font-size: 19px; color: var(--primary-maroon); }

/* ---- details ---- */

/* The details section is one of four cards now; the shape they share lives in
   .pdp-block at the foot of this file. What is left here is what belongs to
   this card alone. */

.pdp-spec { margin: 0 0 26px; }

/*
 * A label column, not a band of nothing.
 *
 * The label sat in a 170px column with a 14px gap after it, so a short label
 * like "SKU" left a hand's width of blank between it and its value — an empty
 * strip down the left of the table that read as a mistake. The column is still
 * there, because the values have to line up with each other, but it is now
 * tinted and butts up against the value: what was a gap is now the shape of
 * the table.
 */
.pdp-spec > div {
    display: grid;
    grid-template-columns: minmax(120px, 26%) minmax(0, 1fr);
    border-bottom: 1px solid #f2f0eb;
    font-size: 14px;
}

.pdp-spec dt {
    padding: 10px 14px;
    background: #faf8f5;
    color: var(--text-light);
}

.pdp-spec dd {
    padding: 10px 14px;
    margin: 0;
    color: var(--text-dark);
    overflow-wrap: anywhere;
}

.pdp-copy { margin-bottom: 26px; }

.pdp-copy h3 { font-size: 15px; color: var(--text-dark); margin: 0 0 10px; }

.pdp-copy p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-light);
    margin: 0 0 12px;
}

.pdp-features { list-style: none; margin: 0; padding: 0; }

.pdp-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--text-light);
    padding: 5px 0;
}

.pdp-features i { color: var(--primary-maroon); margin-top: 3px; }

/* ---- similar ---- */

.pdp-similar {
    max-width: var(--pdp-column, none);
    padding: 28px 0 0;
    border-top: 1px solid #eeece7;
    margin-top: 14px;
}
.pdp-similar h2 { font-size: 19px; color: var(--text-dark); margin: 0 0 18px; }

/*
 * Flex, not `grid-auto-columns: minmax(182px, 1fr)`.
 *
 * With six cards that shared the width and gave 182px each; with one it
 * handed the whole 1fr to that card, and the square photograph inside it
 * became the size of the page. A card has a size of its own — it does not
 * depend on how many happen to be beside it.
 */
.pdp-similar-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.pdp-similar-card {
    /* Grows to share a wide row, never past a size a photograph looks
       right at, and never shrinks below readable. */
    flex: 1 1 182px;
    min-width: 182px;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    border: 1px solid #eeece7;
    border-radius: 12px;
    padding: 12px;
    background: var(--white);
}

.pdp-similar-card:hover { border-color: var(--primary-maroon); }

.pdp-similar-link { display: block; text-decoration: none; }

.pdp-similar-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--light-bg);
    overflow: hidden;
    margin-bottom: 9px;
    color: #c9c2b9;
}

.pdp-similar-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The corner flag, same rule as the buy panel: computed from the two prices. */
.pdp-similar-off {
    position: absolute;
    top: 0;
    left: 6px;
    padding: 4px 6px 7px;
    background: var(--primary-maroon);
    color: var(--white);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    letter-spacing: 0.02em;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
}

.pdp-similar-eta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 5px;
}

.pdp-similar-eta i { color: #d99a1e; }

/*
 * Two lines, then an ellipsis. The catalogue has product names that are whole
 * sentences written for search engines, and one of them left the price of its
 * card four lines below every other price in the row.
 */
.pdp-similar-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    min-height: 35px;
    color: var(--text-dark);
    margin-bottom: 3px;
}

.pdp-similar-unit { display: block; font-size: 12px; color: var(--text-light); }

/* margin-top: auto is what lines the prices up across cards of unequal text. */
.pdp-similar-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.pdp-similar-prices { display: flex; flex-direction: column; line-height: 1.25; }

.pdp-similar-price { font-size: 14px; font-weight: 700; color: var(--text-dark); }

.pdp-similar-mrp {
    font-size: 11.5px;
    color: var(--text-light);
    text-decoration: line-through;
}

/* The shared cart control shrinks to card size in here. */
.pdp-similar-buy .cart-btn,
.pdp-similar-buy .cart-stepper { min-height: 32px; font-size: 12px; }
.pdp-similar-buy .cart-btn { padding: 0 12px; }
.pdp-similar-buy .cart-btn i { display: none; }
.pdp-similar-buy .cart-stepper button { width: 26px; height: 32px; font-size: 15px; }
.pdp-similar-buy .cart-stepper-count { min-width: 22px; font-size: 12px; }

@media (max-width: 900px) {
    .pdp-top { grid-template-columns: 1fr; gap: 24px; }
    .pdp-buy { position: static; }
    .pdp-title { font-size: 21px; }
    .pdp-price { font-size: 25px; }
}

@media (max-width: 560px) {
    /* Thumbnails go under the picture, where a thumb can reach them. */
    .pdp-gallery { grid-template-columns: 1fr; }
    .pdp-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
    .pdp-stage { order: 1; }
    .pdp-thumb { width: 58px; height: 58px; flex: none; }
    .pdp-spec > div { grid-template-columns: 1fr; gap: 2px; }
    .pdp-actions .cart-btn { flex: 1; }
}

/* ===========================================================================
   The sections below the buy panel — delivery, highlights, all details,
   ratings.

   Each is a card of its own rather than one long run of text, because they are
   answers to four separate questions and a shopper reads only the one they are
   asking. Same width as the panel above, same corner radius, so the page reads
   as one document and not as four widgets.
   ========================================================================= */
/*
 * Every section below the fold is the width of the page.
 *
 * They were capped — first at 760px, then 900 — which left the cards ending
 * well short of the delivery card above them: two right edges that should have
 * been one line. The width now comes from the container, like everything else
 * on the page, and the one thing that genuinely needs a limit is the running
 * prose, which is capped by its own measure below rather than by boxing in the
 * cards that hold it.
 */
.pdp-block {
    max-width: var(--pdp-column, none);
    margin-top: 14px;
    padding: 20px 22px;
    border: 1px solid #eeece7;
    border-radius: 14px;
    background: var(--white);
}

.pdp-block > h2 {
    margin: 0 0 14px;
    font-size: 17px;
    color: var(--text-dark);
}

.pdp-block > h2 + * { margin-top: 0; }

/* ---- delivery ---- */

.pdp-pin label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 9px;
}

.pdp-pin label i { color: var(--primary-maroon); }

.pdp-pin-row { display: flex; gap: 8px; max-width: 340px; }

.pdp-pin-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 13px;
    border: 1px solid #ddd8d0;
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: 14px;
}

.pdp-pin-row input:focus { outline: none; border-color: var(--primary-maroon); }

.pdp-pin-row button {
    flex: none;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: var(--primary-maroon);
    color: var(--accent-gold);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pdp-pin-row button:hover { background: var(--dark-maroon, #5f0000); }

.pdp-delivery-yes,
.pdp-delivery-no,
.pdp-delivery-hint,
.pdp-delivery-cod {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
}

.pdp-delivery-yes { color: #2e6b4f; }
.pdp-delivery-no { color: #a81e12; }
.pdp-delivery-hint,
.pdp-delivery-cod { color: var(--text-light); }

.pdp-delivery-yes i,
.pdp-delivery-no i,
.pdp-delivery-hint i,
.pdp-delivery-cod i { margin-top: 3px; }

.pdp-delivery-options {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    border-top: 1px solid #f1eee9;
}

.pdp-delivery-options li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #f1eee9;
    font-size: 14px;
    color: var(--text-dark);
}

.pdp-delivery-name small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-light);
}

.pdp-delivery-charge { white-space: nowrap; font-size: 13.5px; }
.pdp-delivery-charge .is-free { color: #2e6b4f; font-weight: 700; }

/* ---- highlights ---- */

.pdp-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
}

.pdp-highlight-grid > div {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--light-bg, #FFF8F0);
}

.pdp-highlight-grid dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.pdp-highlight-grid dd {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-dark);
}

.pdp-highlights .pdp-features { margin-top: 14px; }

/* ---- ratings ---- */

.pdp-review-summary {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.pdp-review-score {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.pdp-review-stars { color: var(--accent-gold, #FFD700); font-size: 18px; letter-spacing: 2px; }
.pdp-review-count { font-size: 13px; color: var(--text-light); }

.pdp-review-none {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
}

.pdp-review-ask {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 16px;
    border: 1px solid #25d366;
    border-radius: 8px;
    color: #1a9e4b;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.pdp-review-ask:hover { background: #25d366; color: var(--white); }

@media (max-width: 560px) {
    .pdp-block { padding: 16px 15px; }
    .pdp-pin-row { max-width: none; }
}

/* The delivery card, inside the buy column.

   It fills the space that used to sit empty beside the photo, and it is where
   the question belongs: "can you get it to me" is part of deciding, not
   something to scroll for. Flush with the panel above it rather than indented
   like the sections below. */
.pdp-buy .pdp-block {
    max-width: none;
    margin-top: 22px;
    padding: 16px 18px;
}

.pdp-buy .pdp-block > h2 { font-size: 15px; margin-bottom: 12px; }

/* ===========================================================================
   The buy panel, in the order a shopper reads it — name, how it was rated,
   what it costs, what could make it cost less, and when it would arrive.

   Borrowed from the large marketplaces because that order is now what people
   expect, and a shop that arranges the same facts differently makes its
   visitors hunt for them.
   ========================================================================= */

/* ---- rating and badge ---- */

.pdp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
}

/* The green pill: a rating is a fact about the product, and green reads as
   "settled" where the shop's maroon reads as "ours". */
.pdp-score {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 5px;
    background: #1a9e4b;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
}

.pdp-score i { font-size: 10px; }

.pdp-score-count {
    font-size: 13px;
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 1px solid #ddd8d0;
}

.pdp-score-count:hover { color: var(--primary-maroon); }

.pdp-flag {
    padding: 3px 9px;
    border-radius: 5px;
    background: var(--light-gold, #FFF8DC);
    color: var(--primary-maroon);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ---- offers ---- */

.pdp-offers {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid #e6efe9;
    border-radius: 12px;
    background: #f7fcf9;
}

.pdp-offers-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.pdp-offers-title i { color: #1a9e4b; }

.pdp-offers ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-offers li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 7px 0;
    border-top: 1px dashed #dcebe2;
    font-size: 13.5px;
    color: var(--text-dark);
}

.pdp-offers li:first-child { border-top: 0; padding-top: 0; }

.pdp-offers li strong {
    padding: 2px 8px;
    border: 1px dashed #b6d3c2;
    border-radius: 5px;
    background: var(--white);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: #1a7f43;
}

.pdp-offers li small {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--text-light);
}

.pdp-offers-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-light);
}

/* ---- the description, in the shape it was written in ---- */

.pdp-copy h4 {
    margin: 20px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.pdp-copy h4:first-child { margin-top: 0; }

.pdp-copy p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-light);
}

/* A lead in bold and the sentence after it — how the writer meant these to be
   read, and unreadable as four identical lines. */
.pdp-points {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.pdp-points li {
    position: relative;
    padding: 0 0 8px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
}

.pdp-points li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-gold, #FFD700);
}

.pdp-points strong { color: var(--text-dark); }

/* The specification table, tighter and banded so the eye can run down the
   values without losing the row. */
.pdp-spec > div:last-child { border-bottom: 0; }

.pdp-copy .pdp-spec { margin: 0 0 14px; border: 1px solid #f2efea; border-radius: 10px; overflow: hidden; }

/* ---- folds ----------------------------------------------------------------

   A native <details>. The arrow is drawn here rather than left to the browser
   so it looks the same in all of them, and the marker is turned off both ways
   browsers ask for it.
   ------------------------------------------------------------------------ */
.pdp-fold {
    border-top: 1px solid #f2efea;
}

.pdp-fold:first-of-type { border-top: 0; }

.pdp-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
}

.pdp-fold > summary::-webkit-details-marker { display: none; }
.pdp-fold > summary::marker { content: ""; }

.pdp-fold > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid #b9b1a5;
    border-bottom: 2px solid #b9b1a5;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}

.pdp-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.pdp-fold > summary:hover { color: var(--primary-maroon); }

.pdp-fold-body { padding: 0 2px 16px; }
.pdp-fold-body > *:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .pdp-fold > summary::after { transition: none; }
}

/* A line of prose past about ninety characters is hard to come back to at the
   end of, so the text keeps a measure even where its card does not. */
.pdp-copy p,
.pdp-points li { max-width: 92ch; }

/* ---- ratings and reviews — A-04R -----------------------------------------

   The score, the spread and the reviews themselves. The shape is the one every
   large shop now uses, because it is the one a shopper reads without being
   taught: a number they can take in at a glance, then the bars that say whether
   the number is agreed on, then the words.
   ------------------------------------------------------------------------ */
.pdp-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f2efea;
}

.pdp-review-score-box { min-width: 130px; }

.pdp-review-score {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dark);
}

.pdp-review-score i { font-size: 20px; color: #1a9e4b; }

.pdp-review-word {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: #1a9e4b;
}

.pdp-review-count { margin: 4px 0 0; font-size: 12.5px; color: var(--text-light); }

.pdp-review-bars {
    flex: 1;
    min-width: 220px;
    max-width: 420px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-review-bars li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-size: 12.5px;
    color: var(--text-light);
}

.pdp-review-star i { font-size: 9px; }

.pdp-review-bar {
    height: 7px;
    border-radius: 4px;
    background: #efece7;
    overflow: hidden;
}

/* Green for the top two, amber for the middle, red for the bottom: the colour
   says the same thing as the number, for anyone reading the shape and not the
   figures. */
.pdp-review-bar > span {
    display: block;
    height: 100%;
    background: #d9a441;
}

.pdp-review-bar > span.is-high { background: #1a9e4b; }
.pdp-review-bar > span.is-low { background: #d05a4a; }

.pdp-review-bar-count { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- the reviews ---- */

.pdp-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-review-list li {
    padding: 16px 0;
    border-bottom: 1px solid #f2efea;
}

.pdp-review-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.pdp-review-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #1a9e4b;
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
}

.pdp-review-rating i { font-size: 9px; }

.pdp-review-top strong { font-size: 14.5px; color: var(--text-dark); }

.pdp-review-when {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-light);
}

.pdp-review-body {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 92ch;
}

.pdp-review-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12.5px;
    color: var(--text-light);
}

.pdp-review-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1a9e4b;
    font-weight: 600;
}

.pdp-review-more { margin: 12px 0 0; font-size: 12.5px; color: var(--text-light); }

/* ---- writing one ---- */

.pdp-review-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.6;
}

.pdp-review-note.is-ok { background: #eef7f1; color: #1a7f43; }
.pdp-review-note.is-bad { background: #fbeae8; color: #a81e12; }

.pdp-review-form { margin-top: 8px; border-top: 1px solid #f2efea; }

.pdp-review-eligible {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
    color: #1a7f43;
}

.pdp-stars-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.pdp-stars-label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-right: 4px; }

.pdp-star-pick { cursor: pointer; }
.pdp-star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }

.pdp-star-pick span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #ddd8d0;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-light);
}

.pdp-star-pick span i { font-size: 10px; }

.pdp-star-pick input:checked + span {
    border-color: #1a9e4b;
    background: #eef7f1;
    color: #1a7f43;
    font-weight: 700;
}

/* The focus ring the hidden input would have had, moved onto what is drawn. */
.pdp-star-pick input:focus-visible + span { outline: 2px solid var(--primary-maroon); outline-offset: 2px; }

.pdp-review-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.pdp-review-fields label,
.pdp-review-field { display: block; margin-bottom: 12px; }

.pdp-review-fields label span,
.pdp-review-field span {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark);
}

.pdp-review-fields input,
.pdp-review-field input,
.pdp-review-field textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #ddd8d0;
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: 14px;
}

.pdp-review-fields input:focus,
.pdp-review-field input:focus,
.pdp-review-field textarea:focus { outline: none; border-color: var(--primary-maroon); }

.pdp-review-held { margin: 10px 0 0; font-size: 12px; color: var(--text-light); }

/* The rule, said before anybody types. Being refused after writing three
   paragraphs is worse than being told at the start. */
.pdp-review-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--light-bg, #FFF8F0);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-light);
}

.pdp-review-rule i { margin-top: 3px; color: var(--primary-maroon); }

/* Nine chips fit a row on a desktop and wrap on a phone. */
.pdp-stars-pick { gap: 6px; }
.pdp-star-pick span { padding: 6px 10px; }

/* Photographs a customer sent with their review. Small, square-cropped
   thumbnails; the full picture is one plain link away. */
.pdp-review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.pdp-review-photos img {
    width: 78px;
    height: 78px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eeece7;
    display: block;
}

.pdp-review-photos a:hover img { border-color: var(--primary-maroon); }

.pdp-review-hint {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-light);
    font-weight: 400;
}

.pdp-review-field input[type="file"] {
    padding: 9px 10px;
    font-size: 13px;
    background: var(--white);
}

/* ---- hover to magnify ---------------------------------------------------

   The panel sits beside the gallery and over the buy column, which is where
   every large shop puts it: the photograph stays where it was, and the detail
   appears next to it rather than replacing it.

   Both parts are drawn only when the script turns them on, so a page without
   JavaScript has neither — and neither leaves a gap where it would have been.
   -------------------------------------------------------------------------- */
.pdp-gallery { position: relative; }

/* Width, height and top are set by the script from where the photograph is
   actually painted and how much room there is beside the gallery — a fixed
   percentage of the box put the panel over the wrong place on a picture that
   does not fill its box, and off the side of the window on a narrow one. */
.pdp-zoom {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 32px);
    z-index: 20;
    border: 1px solid #eeece7;
    border-radius: 14px;
    background-color: var(--white);
    background-repeat: no-repeat;
    box-shadow: 0 14px 40px rgba(90, 60, 30, 0.14);
    pointer-events: none;
}

.pdp-zoom.is-on { display: block; }

/* The part of the photograph the panel is showing. */
.pdp-zoom-lens {
    display: none;
    position: absolute;
    border: 1px solid rgba(128, 0, 0, 0.6);
    background: rgba(255, 223, 0, 0.18);
    pointer-events: none;
}

.pdp-zoom-lens.is-on { display: block; }

/* Where there is no room beside the gallery, there is no zoom: a panel that
   hangs off the edge of the window is worse than none. */
@media (max-width: 1100px) {
    .pdp-zoom,
    .pdp-zoom-lens { display: none !important; }
}

@media (max-width: 900px) {
    .pdp-top { grid-template-columns: minmax(0, 1fr); }
    .pdp-buy { position: static; }
}

/* ---- what is in a combo ----
 *
 * A combo's whole argument is the list. Nobody buys "Shiv Puja Combo" on the
 * name; they buy it once they can see it holds the four things they were about
 * to look for one at a time. So it reads as a list, with the price of each part
 * beside it, and the saving underneath is something the shopper can check
 * rather than be told.
 */
.pdp-combo .combo-contents {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.combo-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f2efe9;
    font-size: 14px;
}

.combo-row:last-child { border-bottom: 0; }

.combo-qty {
    flex: 0 0 auto;
    min-width: 26px;
    font-weight: 700;
    color: var(--primary-maroon);
    font-variant-numeric: tabular-nums;
}

/* The name takes the slack, so the prices line up down the right. */
.combo-name { flex: 1 1 auto; min-width: 0; }
.combo-name a { color: var(--text-dark); text-decoration: none; }
.combo-name a:hover { color: var(--primary-maroon); text-decoration: underline; }

.combo-each {
    flex: 0 0 auto;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.combo-saving {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f1f8f2;
    color: #1e6b32;
    font-size: 13.5px;
}

.combo-blocked {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdf1f0;
    color: #a81e12;
    font-size: 13.5px;
}

/* The card badge, so a combo is recognisable in a grid of ordinary products. */
.product-badge.is-combo { background: #1e6b32; color: #fff; }

/* ===========================================================================
   Phones and tablets - below 1024px - as in the mobile design
   (product details.pdf, drawn at 390px wide). The markup is
   partials/mobile-detail.blade.php; the page above is hidden here and is
   untouched from 1024px up, where this block is hidden instead.
   ========================================================================= */
@media (min-width: 1024px) {
    .mp { display: none; }
}

@media not all and (min-width: 1024px) {
    body:has(.mp) { background: #f0f0f0; }
    body:has(.mp) > .header, body:has(.mp) .footer { display: none; }
    .pdp { display: none; }

    /* The full reviews (list and form) show on their own when asked for. */
    body:has(#reviews:target) .pdp, body:has([data-mp-reviews]) .pdp { display: block; padding-top: 12px; }
    body:has(#reviews:target) .pdp .container > :not(#reviews),
    body:has([data-mp-reviews]) .pdp .container > :not(#reviews) { display: none; }
    body:has(#reviews:target) .mp > :not(.mp-appbar),
    body:has([data-mp-reviews]) .mp > :not(.mp-appbar) { display: none; }

    /* Room for both bars, so the last line of the page is not under them. */
    .mp { padding-bottom: calc(80px + var(--mh-nav-h, 0px)); background: #f0f0f0; color: #1e1e1e; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
    .mp [data-mp-pack]:not(.is-default) { display: none; }

    .mp-appbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; height: 49px; padding: 0 17px; background: #fff; }
    .mp-back { margin-right: auto; }
    .mp-ic { display: flex; width: 23px; height: 23px; color: #1e1e1e; text-decoration: none; }
    .mp-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .mp-ic[data-mp-cart] svg circle { fill: currentColor; stroke: none; }

    .mp-alert { margin: 10px 11px 0; padding: 10px 12px; border-radius: 5px; background: #fdecea; color: #8a1c12; font-size: 13px; }

    .mp-gallery { position: relative; background: #fff; }
    .mp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .mp-track::-webkit-scrollbar { display: none; }
    .mp-slide { flex: 0 0 100%; width: 100%; aspect-ratio: 390 / 205; object-fit: cover; scroll-snap-align: start; }
    .mp-dots { position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); display: flex; gap: 4px; padding: 2px 4px; border-radius: 10px; background: #fff; }
    .mp-dots span { width: 5px; height: 5px; border-radius: 50%; background: #d4d4d4; }
    .mp-dots span.is-on { background: #800000; }

    .mp-card { display: block; margin: 13px 11px 0; background: #fff; border-radius: 5px; }

    .mp-info { padding: 6px 6px 9px 7px; }
    .mp-info-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 17px; }
    .mp-brand { font-size: 11px; color: #800000; }
    .mp-rate { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #1e1e1e; text-decoration: none; }
    .mp-rate i { font-size: 12px; color: #f5bd00; }
    .mp-rate b { width: 1px; height: 12px; background: #1e1e1e; }
    .mp-rate span { color: #9a9a9a; }
    .mp-title { margin: 2px 0 0; font-size: 15px; font-weight: 400; line-height: 1.3; color: #1e1e1e; }
    .mp-price-row { margin-top: 4px; }
    .mp-prices { margin: 0; }
    .mp-now { font-size: 19.5px; font-weight: 500; color: #800000; }
    .mp-was { margin-left: 3px; font-size: 12px; color: #8a8a8a; }
    .mp-offtag { display: table; margin-top: 4px; padding: 2px 4px; border-radius: 1px; background: #008000; color: #fff; font-size: 9.5px; }

    .mp-packs { margin-top: 14px; padding: 9px 8px 10px; }
    .mp-packs-title { margin: 0; font-size: 14px; font-weight: 400; }
    .mp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
    .mp-chip { position: relative; }
    .mp-chip input { position: absolute; opacity: 0; pointer-events: none; }
    .mp-chip span { display: flex; align-items: center; justify-content: center; min-width: 56px; height: 27px; padding: 0 9px; border: 1px solid #d9d9d9; border-radius: 2px; font-size: 11.5px; color: #b3b3b3; cursor: pointer; }
    .mp-chip input:checked + span { border-color: #800000; background: #800000; color: #fff; }
    .mp-chip input:focus-visible + span { outline: 2px solid #800000; outline-offset: 2px; }

    .mp-details { margin-top: 14px; padding: 10px 16px 16px 10px; }
    .mp-details h2 { margin: 0 0 4px; font-size: 15px; font-weight: 400; color: #1e1e1e; }
    .mp-combo { margin: 6px 0 4px; font-size: 12px; }
    .mp-fold { border-bottom: 1px solid #9a9a9a; }
    .mp-fold summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; list-style: none; font-size: 12.5px; color: #1e1e1e; cursor: pointer; }
    .mp-fold summary::-webkit-details-marker { display: none; }
    .mp-fold summary::after { content: ""; width: 6px; height: 6px; margin: 0 4px 3px 0; border-right: 2px solid #444; border-bottom: 2px solid #444; transform: rotate(45deg); }
    .mp-fold[open] summary::after { margin-bottom: 0; transform: rotate(-135deg); }
    .mp-fold[open] summary { padding-bottom: 6px; }
    .mp-fold-body { padding: 0 0 12px; font-family: "Poppins", system-ui, sans-serif; font-size: 10.5px; line-height: 1.55; color: #6b6b6b; }
    .mp-fold-body p, .mp-fold-body ul, .mp-fold-body ol { margin: 0 0 6px; }
    .mp-fold-body ul, .mp-fold-body ol { padding-left: 16px; }
    .mp-fold-body h3, .mp-fold-body h4 { margin: 8px 0 4px; font-size: 11px; font-weight: 600; color: #333; }
    .mp-spec { margin: 0; }
    .mp-spec div { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #e5e5e5; }
    .mp-spec dt { flex: 0 0 40%; color: #8a8a8a; }
    .mp-spec dd { margin: 0; color: #333; }

    .mp-also { margin-top: 35px; }
    .mp-also h2 { margin: 0 0 20px 20px; font-size: 15.5px; font-weight: 400; color: #1e1e1e; }
    .mp-rail { display: flex; gap: 15px; overflow-x: auto; padding: 0 11px 2px; scroll-snap-type: x proximity; scroll-padding: 0 11px; scrollbar-width: none; }
    .mp-rail::-webkit-scrollbar { display: none; }
    .mp-p { flex: 0 0 130px; min-width: 0; scroll-snap-align: start; }
    .mp-photo { position: relative; padding: 4px; border-radius: 5px; background: #fff; }
    .mp-photo-link { display: block; }
    .mp-photo-link img { display: block; width: 100%; aspect-ratio: 121 / 153; object-fit: cover; border-radius: 4px; }
    .mp-heart { position: absolute; top: 9px; right: 9px; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 2px; background: #fff; color: #800000; font-size: 8px; text-decoration: none; }
    .mp-off { position: absolute; left: 0; bottom: -4px; padding: 1px 3px; border-radius: 1px; background: #008000; color: #fff; font-size: 7px; line-height: 1.3; }
    .mp-p-name { display: block; margin-top: 6px; overflow: hidden; font-size: 10px; color: #1e1e1e; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
    .mp-p-price { margin: 1px 0 0; font-size: 12px; }
    .mp-p-price b { font-weight: 600; color: #800000; }
    .mp-p-price s { margin-left: 4px; font-size: 11px; color: #9a9a9a; }
    .mp-p-actions { display: flex; gap: 6px; margin-top: 5px; }
    .mp-p-actions > form, .mp-p-actions .cart-control { display: block; flex: 1 1 0; min-width: 0; margin: 0; }
    .mp-p-actions .cart-control form { margin: 0; }
    .mp-p-buy button, .mp-p-actions .cart-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 23px; min-height: 0; padding: 0 2px; border: 1px solid #800000; border-radius: 2px; font-family: inherit; font-size: 9px; font-weight: 400; white-space: nowrap; }
    .mp-p-buy button { background: #800000; color: #fff; cursor: pointer; }
    .mp-p-actions .cart-btn.is-add { background: #fff; color: #800000; }
    .mp-p-actions .cart-btn i { display: none; }
    .mp-p-actions .cart-btn.is-out { border-color: #ddd; background: #f3f3f3; color: #888; }
    .mp-p-actions .cart-stepper { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 23px; border-radius: 2px; }
    .mp-p-actions .cart-stepper button { width: 20px; height: 23px; }

    .mp-rating { position: relative; margin-top: 19px; padding: 9px 30px 10px 11px; color: #1e1e1e; text-decoration: none; }
    .mp-rating-title { display: block; font-size: 14.5px; }
    .mp-rating .fa-chevron-right { position: absolute; top: 14px; right: 9px; font-size: 10px; color: #555; }
    .mp-rating-sub { display: block; margin-top: 2px; font-size: 11.5px; color: #9a9a9a; }
    .mp-stars-row { display: flex; align-items: center; gap: 3px; margin-top: 9px; font-size: 10px; }
    .mp-stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; line-height: 1; color: #e3e3e3; }
    .mp-stars span { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #f5bd00; }
    .mp-rating-count { display: block; margin-top: 3px; font-size: 11px; color: #9a9a9a; }

    /* Above the site's navigation bar, not under it.

       Both are fixed to the foot of the screen, and this one was laid
       underneath: share, save and add-to-cart were all unreachable, which on a
       phone meant the product could not be bought at all. The fallback of 0 is
       for a page drawn without the navigation bar, where the foot is free. */
    .mp-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--mh-nav-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; height: 60px; padding: 0 11px; background: #fff; box-shadow: 0 -1px 0 #ececec; }
    .mp-bar-btn { display: flex; flex: 0 0 38px; align-items: center; justify-content: center; height: 38px; border: 0; border-radius: 3px; background: #ebebeb; color: #222; cursor: pointer; }
    .mp-bar-btn + .mp-bar-btn { margin-left: 15px; }
    /* Kept: the heart fills and the button takes the shop's colour, so the
       tap is answered by something other than nothing happening. */
    .mp-bar-save.is-saved { background: #fdecee; color: #b3131b; }
    .mp-bar-save.is-saved svg { fill: currentColor; }
    .mp-heart.is-saved { color: #b3131b; }
    .mp-heart.is-saved svg { fill: currentColor; }
    .mp-bar-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .mp-bar-cart { flex: 1; min-width: 0; margin-left: 11px; }
    .mp-bar-cart .cart-control { display: block; width: 100%; }
    .mp-bar-cart .cart-control form { margin: 0; }
    .mp-bar-cart .cart-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 37px; min-height: 0; border: 0; border-radius: 2px; background: #800000; color: #fff; font-family: inherit; font-size: 16px; font-weight: 400; }
    .mp-bar-cart .cart-btn i { display: none; }
    .mp-bar-cart .cart-btn.is-out { background: #e5e5e5; color: #888; }
    .mp-bar-cart .cart-stepper { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 37px; border-radius: 2px; }

    body:has(#reviews:target) .mp, body:has([data-mp-reviews]) .mp { padding-bottom: 0; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    .mp { max-width: 640px; margin: 0 auto; }
    .mp-bar { max-width: 640px; margin: 0 auto; }
    .mp-slide { aspect-ratio: 16 / 9; }
    .mp-p { flex-basis: 160px; }
    .mp-title { font-size: 18px; }
    .mp-now { font-size: 22px; }
    .mp-fold-body { font-size: 12px; }
    .mp-p-name { font-size: 11px; }
    .mp-p-buy button, .mp-p-actions .cart-btn, .mp-p-actions .cart-stepper { height: 26px; font-size: 10.5px; }
}

@media not all and (min-width: 1024px) {
    /* Whole photo in the slider: product pictures are square on white, and a crop cut their tops off. */
    .mp-slide { object-fit: contain; background: #fff; }

    /* Description blocks come from the shared partial with the desktop's sizes; here they read at the design's size. */
    .mp .pdp-points { margin: 0 0 6px; padding: 0; list-style: none; }
    .mp .pdp-points li { max-width: none; padding: 0 0 3px 11px; font-size: inherit; line-height: inherit; color: inherit; }
    .mp .pdp-points li::before { top: 6px; left: 1px; width: 4px; height: 4px; background: #800000; }
    .mp .pdp-points strong { font-weight: 500; color: #333; }
    .mp .pdp-spec { margin: 0 0 6px; border: 0; border-radius: 0; }
    .mp .pdp-spec > div { display: flex; grid-template-columns: none; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #e5e5e5; font-size: inherit; }
    .mp .pdp-spec dt, .mp .pdp-spec dd { padding: 0; background: none; }
    .mp .pdp-spec dt { flex: 0 0 40%; color: #8a8a8a; }
    .mp .pdp-spec dd { margin: 0; color: #333; }

    /* Reviews view: the page's top bar stays at the top, over the reviews card. */
    body:has(#reviews:target) .mp-appbar, body:has([data-mp-reviews]) .mp-appbar { position: fixed; left: 0; right: 0; }
    body:has(#reviews:target) .pdp, body:has([data-mp-reviews]) .pdp { padding-top: 61px; background: #f0f0f0; }
    body:has(#reviews:target) .pdp .container, body:has([data-mp-reviews]) .pdp .container { padding-left: 11px; padding-right: 11px; }
}

@media not all and (min-width: 1024px) {
    /* Top bar: the logo beside the back arrow, and a line under the bar so it is
       not mistaken for part of a white product photo. */
    .mp-appbar { border-bottom: 1px solid #e6e6e6; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
    .mp-back { margin-right: 0; }
    .mp-logo { display: flex; flex: 0 0 auto; align-items: center; margin-right: auto; }
    .mp-logo img { display: block; width: auto; height: 32px; }
    .mp-logo i { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f4b400; color: #800000; font-size: 16px; }
}


/* ---------------------------------------------------------------------------
   Save and Share, on a computer.

   Drawn as quiet text rather than buttons. The column already asks one thing —
   Add to Cart — with Buy Now beside it as the second way to say yes; a third
   and fourth outlined pill underneath made four shapes of the same weight and
   no way to tell which mattered. These two are neither a yes nor a no, so they
   read as the small print of the decision: an icon, a word, and a hairline
   between them.
   ------------------------------------------------------------------------ */
.pdp-keep {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0 0;
}

.pdp-keep-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--text-light, #6b7280);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}

/* A hairline instead of a second gap: it says the two belong together without
   drawing a box around either. */
.pdp-keep-btn + .pdp-keep-btn {
    padding-left: 16px;
    border-left: 1px solid #e6e1db;
}

.pdp-keep-btn:hover,
.pdp-keep-btn:focus-visible { color: #b3131b; }

.pdp-keep-btn i,
.pdp-keep-btn svg { width: 15px; height: 15px; font-size: 15px; }

.pdp-keep-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kept: the heart fills and the words take the shop's colour, so the tap is
   answered by something other than nothing happening. */
.pdp-keep-btn.is-saved { color: #b3131b; font-weight: 600; }
.pdp-keep-btn.is-saved i { font-weight: 900; }

/* The phone has its own pair in the bar at the foot of the screen; two of each
   would be one too many, and this pair belongs to the wide layout. */
@media (max-width: 1023.98px) {
    .pdp-keep { display: none; }
}

/* ---------------------------------------------------------------------------
   The buy column, as drawn.

   A line saying what it is, three ticks, the price, a quantity beside the
   button, and a strip of assurances under the quiet actions. Each piece is
   quieter than the one above it, so the column reads downwards and the one
   thing it asks for — Add to Cart — stays the loudest thing in it.
   ------------------------------------------------------------------------ */
.pdp-blurb {
    margin: 10px 0 0;
    max-width: 52ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-light, #6b7280);

    /* Three lines and an ellipsis. Some of these descriptions run to a
       paragraph, and a paragraph here pushes the price off the screen; cut by
       the browser, so it ends with … rather than in the middle of a word. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- a closer look -------------------------------------------------------

   A separate thing from .pdp-zoom above, which is the panel that follows the
   mouse: a finger has no hover, so a touch screen had no way to see the
   picture larger at all. This is the button that opens it full size. */
.pdp-bigger {
    position: absolute;
    right: 14px;
    bottom: 14px;
    /* Above the photograph: the images fill the stage, and without this the
       button is drawn but every click lands on the picture behind it. */
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e6e1db;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #4a4a4a;
    font-size: 14px;
    cursor: pointer;
}

.pdp-bigger:hover { color: #7d0a0a; border-color: #7d0a0a; }
.pdp-bigger[hidden] { display: none; }

.pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(18, 18, 18, .82);
}

.pdp-lightbox[hidden] { display: none; }
.pdp-lightbox img { max-width: min(92vw, 1100px); max-height: 88vh; border-radius: 10px; }

.pdp-lightbox button {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #1e1e1e;
    font-size: 18px;
    cursor: pointer;
}

.pdp-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.pdp-ticks li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #3f3f3f;
}

.pdp-ticks i { color: #1f8a4c; font-size: 14px; }

/* ---- how many ------------------------------------------------------------ */
.cart-qty {
    display: inline-flex;
    align-items: center;
    height: 46px;
    border: 1px solid #e0d9d2;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.cart-qty button {
    width: 38px;
    height: 100%;
    border: 0;
    background: none;
    color: #4a4a4a;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.cart-qty button:hover { color: #7d0a0a; background: #faf6f2; }

.cart-qty input {
    width: 38px;
    height: 100%;
    border: 0;
    border-left: 1px solid #efeae4;
    border-right: 1px solid #efeae4;
    background: none;
    text-align: center;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #1e1e1e;
    -moz-appearance: textfield;
}

.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The add form holds the two side by side. */
.pdp-actions form { display: inline-flex; align-items: center; gap: 10px; }

/* ---- the strip of assurances --------------------------------------------- */
.pdp-trust {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: #f8f5f1;
}

.pdp-trust li {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #4a4a4a;
}

.pdp-trust i { color: #1f8a4c; font-size: 13px; }

/* ---- what the delivery card is for --------------------------------------- */
.pdp-delivery-lede {
    margin: -6px 0 14px;
    font-size: 13px;
    color: var(--text-light, #6b7280);
}

/* ---- the four promises --------------------------------------------------- */
.pdp-promises {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.pdp-promises li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-light, #6b7280);
}

.pdp-promises i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fdf1ec;
    color: #7d0a0a;
    font-size: 14px;
}

/* ---- the row of other things --------------------------------------------- */
.pdp-similar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.pdp-similar-head h2 { margin: 0; }

.pdp-similar-more {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pdp-similar-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #7d0a0a;
    text-decoration: none;
}

.pdp-similar-all:hover { text-decoration: underline; }

.pdp-similar-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e6e1db;
    border-radius: 50%;
    background: #fff;
    color: #4a4a4a;
    font-size: 12px;
    cursor: pointer;
}

.pdp-similar-arrow:hover { border-color: #7d0a0a; color: #7d0a0a; }
.pdp-similar-arrow[disabled] { opacity: .35; cursor: default; }
/* The arrows ship hidden and are shown by script; display: grid above would
   otherwise beat the attribute and draw buttons that scroll nothing. */
.pdp-similar-arrow[hidden] { display: none; }

@media (max-width: 1023.98px) {
    .pdp-ticks,
    .pdp-promises,
    .pdp-blurb,
    .pdp-similar-more { display: none; }
}

/* ===========================================================================
   The product page, as drawn in new-mobile-version-design/product-details-page.png

   The design has a language of its own, and it is the language rather than any
   one element that makes the page look like the drawing:

     · a warm cream page, with the cards lifted off it in white
     · headings set in a display serif, in maroon, each with a small gold mark
     · gold for ornament and for the small icons; maroon for anything that acts
     · tinted pills for the three things said about the product

   Everything below is under .pdp, which is the wide layout only — a phone has
   its own page (.mp) and is left alone.
   ======================================================================== */
.pdp {
    --pd-cream: #fdf7ee;
    --pd-ivory: #fffdf9;
    --pd-gold: #c89a3c;
    --pd-maroon: #7d0a0a;
    --pd-line: #efe4d2;
    --pd-serif: "Playfair Display", Georgia, "Times New Roman", serif;

    background: var(--pd-cream);
}

/* ---- cards ---------------------------------------------------------------- */
.pdp .pdp-block,
.pdp .pdp-reviews,
.pdp .pdp-highlights {
    border-color: var(--pd-line);
    background: var(--pd-ivory);
    box-shadow: 0 1px 2px rgba(122, 88, 40, .04);
}

/* ---- headings ------------------------------------------------------------- */
.pdp .pdp-block > h2,
.pdp .pdp-similar h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pd-serif);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--pd-maroon);
}

.pdp .pdp-block > h2 > i,
.pdp .pdp-similar h2 > i { color: var(--pd-gold); font-size: 17px; }

/* ---- the name, and what it costs ------------------------------------------ */
.pdp .pdp-title {
    font-family: var(--pd-serif);
    font-weight: 700;
    color: #5c1111;
    letter-spacing: .005em;
}

.pdp .pdp-price {
    font-family: var(--pd-serif);
    font-weight: 700;
    color: var(--pd-maroon);
}

.pdp-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
}

.pdp-eyebrow .pdp-category { margin: 0; }

.pdp-sku {
    padding-left: 10px;
    border-left: 1px solid var(--pd-line);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a89275;
}

/* ---- the three things said about it ---------------------------------------
   Pills rather than a row of ticks, each in its own tint, as drawn. */
.pdp .pdp-ticks { gap: 10px; }

.pdp .pdp-ticks li {
    padding: 7px 14px;
    border-radius: 22px;
    background: #eef7ef;
    border: 1px solid #dceadf;
    color: #2f6b41;
    font-size: 12.5px;
}

.pdp .pdp-ticks li i { color: #3f9557; }

.pdp .pdp-ticks li:nth-child(2) {
    background: #fdf4e3;
    border-color: #f0e2c4;
    color: #8a6614;
}

.pdp .pdp-ticks li:nth-child(2) i { color: var(--pd-gold); }

.pdp .pdp-ticks li:nth-child(3) {
    background: #fdeef0;
    border-color: #f4dade;
    color: #93303a;
}

.pdp .pdp-ticks li:nth-child(3) i { color: #b3131b; }

/* ---- the strip under the two quiet actions -------------------------------- */
.pdp .pdp-trust {
    padding: 14px 6px;
    border: 1px solid var(--pd-line);
    border-radius: 12px;
    background: var(--pd-ivory);
}

.pdp .pdp-trust li { color: #6d5b43; }
.pdp .pdp-trust li + li { border-left: 1px solid var(--pd-line); }
.pdp .pdp-trust i { color: var(--pd-gold); font-size: 15px; }

/* ---- the folds ------------------------------------------------------------ */
/* The mark, the label and the chevron: the first two together at the left,
   the chevron pushed to the far right. The rule underneath spaces all three
   evenly, which put the label in the middle of the row. */
.pdp .pdp-fold > summary { justify-content: flex-start; }
.pdp .pdp-fold > summary::after { margin-left: auto; }

.pdp .pdp-fold summary::before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
    color: var(--pd-gold);
    font-size: 12px;
}

/* ---- the delivery card ---------------------------------------------------- */
.pdp .pdp-delivery-lede { margin-top: -8px; }

.pdp .pdp-pin-row input {
    border-color: var(--pd-line);
    border-radius: 10px;
    background: #fff;
}

.pdp .pdp-pin-row button {
    border-radius: 10px;
    background: linear-gradient(180deg, #8d1212, #6d0707);
}

/* The answer, when a PIN code has been given: the peach box from the drawing.
   It is drawn only where the shop has actually answered — the design shows it
   filled in, and an empty one saying "available" would be a promise nobody
   made. */
.pdp .pdp-delivery-yes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fdeae1;
    color: var(--pd-maroon);
    font-weight: 600;
}

/* ---- the four promises ---------------------------------------------------- */
.pdp .pdp-promises {
    gap: 0;
    padding: 18px 0 4px;
}

.pdp .pdp-promises li {
    padding: 0 10px;
    color: #6d5b43;
}

.pdp .pdp-promises li + li { border-left: 1px solid var(--pd-line); }

.pdp .pdp-promises i {
    width: 40px;
    height: 40px;
    border: 1px solid #ecdcc0;
    background: #fdf6e9;
    color: var(--pd-gold);
    font-size: 15px;
}

/* ---- ratings -------------------------------------------------------------- */
.pdp .pdp-reviews { position: relative; }

.pdp .pdp-review-score {
    font-family: var(--pd-serif);
    font-size: 44px;
    color: var(--pd-maroon);
}

.pdp .pdp-review-score i { color: var(--pd-gold); }
.pdp .pdp-review-star i { color: var(--pd-gold); }
.pdp .pdp-review-bar span.is-high { background: #f0a92a; }

/* ---- the row of other things ---------------------------------------------- */
.pdp-similar-title p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #8a7a63;
}

.pdp .pdp-similar-all { color: var(--pd-maroon); }

.pdp .pdp-similar-arrow {
    width: 34px;
    height: 34px;
    border-color: var(--pd-line);
    color: var(--pd-maroon);
}

.pdp .pdp-similar-card {
    border-color: var(--pd-line);
    background: var(--pd-ivory);
}

/* ---- the last two touches from the drawing --------------------------------

   The ratings card is drawn with a gold bracket in each corner, and the cards
   under "You may also need" put their price on one line with the button full
   width beneath it rather than beside it.
   ------------------------------------------------------------------------ */
.pdp .pdp-reviews::before,
.pdp .pdp-reviews::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid #e6cfa2;
    pointer-events: none;
}

.pdp .pdp-reviews::before {
    top: 10px;
    left: 10px;
    border-right: 0;
    border-bottom: 0;
    border-radius: 10px 0 0 0;
}

.pdp .pdp-reviews::after {
    right: 10px;
    bottom: 10px;
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 10px 0;
}

.pdp .pdp-similar-buy {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.pdp .pdp-similar-prices { flex-direction: row; align-items: baseline; gap: 8px; }
.pdp .pdp-similar-price { font-size: 15px; }

/* The button takes the width of the card, as drawn. */
.pdp .pdp-similar-buy .cart-control,
.pdp .pdp-similar-buy form { display: block; }
.pdp .pdp-similar-buy .cart-btn { width: 100%; justify-content: center; }
.pdp .pdp-similar-buy .cart-stepper { width: 100%; justify-content: space-between; }

/* ---------------------------------------------------------------------------
   Room at the foot of the page for BOTH bars.

   A product's page on a phone ends with two things fixed to the bottom of the
   screen: its own bar — share, save, add to cart — and the site's navigation
   under it. The page was given room for the navigation alone, so the last
   band of the footer, the row of payment marks, sat underneath the action bar
   and could be neither read nor tapped.

   Written with two :has() so it outweighs the rule in dh-page.css that makes
   room for the navigation by itself, whichever of the two stylesheets the page
   happens to load last.
   ------------------------------------------------------------------------ */
@media not all and (min-width: 1024px) {
    body:has(.mp-bar):has(.mh-nav) {
        padding-bottom: calc(var(--mh-nav-h, 64px) + 60px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------------------------
   The spacing of the buy column, measured off the drawing.

   The drawing was measured rather than eyeballed: its right-hand column was
   read pixel by pixel for the bands of ink and the gaps between them, and
   those gaps scaled to this page's width (the drawing is 348px wide for a
   1440px screen, so ×4.14). The page was measured the same way, and these are
   the five places the two disagreed — every one of them the page being tighter
   than it was drawn.

        step                  drawn      was      now
        category -> name       25px       6px     18px
        chips -> price         33px       0px     28px
        taxes -> buttons       37px      22px     32px
        buttons -> save        37px      16px     30px
        save -> the strip      62px      18px     52px

   Only the wide layout: the phone's page is a different design and is not
   touched by any of this.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .pdp .pdp-eyebrow { margin-bottom: 18px; }

    /* The name and the line under it are set as one block in the drawing:
       the title carries no space of its own, the line carries ten. */
    .pdp .pdp-title { margin-bottom: 0; }
    .pdp .pdp-blurb { margin-top: 10px; }

    .pdp .pdp-ticks { margin-bottom: 28px; }
    .pdp .pdp-tax { margin-top: 10px; }
    .pdp .pdp-actions { margin-top: 32px; }
    .pdp .pdp-keep { margin-top: 30px; }
    .pdp .pdp-trust { margin-top: 52px; }
}

/* ---------------------------------------------------------------------------
   "People also bought", on a phone: two to a screen, and the homepage's heart.

   The rail was drawn with 130px cards, which put two and a half on a 390px
   screen and squeezed the words down to 9–10px. Two across gives each card
   half the screen — the same 176px the homepage's rails now use — and the
   type can go back to a readable size.

   The heart is the homepage's: a white rounded square with a maroon outline
   heart, big enough for a thumb. It was a 15px pale mark in the corner, which
   is smaller than the finger meant to press it.
   ------------------------------------------------------------------------ */
@media (max-width: 639.98px) {
    .mp-rail { gap: 12px; padding: 0 14px 4px; scroll-padding: 0 14px; }
    .mp-p { flex: 0 0 calc((100% - 12px) / 2); }

    .mp-photo { padding: 5px; border-radius: 8px; }
    .mp-photo-link img { border-radius: 6px; }

    .mp-heart {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        border: 1px solid rgba(125, 10, 10, .14);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
        color: #7d0a0a;
        font-size: 13px;
        line-height: 1;
    }

    .mp-heart i { display: block; line-height: 1; }

    .mp-off { font-size: 9px; padding: 2px 5px; border-radius: 3px; bottom: -2px; }
    /* The cards line up.

       A name that runs to two lines used to push its own price and buttons
       further down than the card beside it, so a row of them stepped up and
       down. Each card is now a column of its own height: the name always
       takes two lines' worth of room whether it needs it or not, and the
       buttons are pushed to the bottom, so every card's price sits on the
       same line as its neighbour's. */
    .mp-p { display: flex; flex-direction: column; }
    .mp-p-name { margin-top: 7px; font-size: 12px; white-space: normal; line-height: 1.3;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                 overflow: hidden; min-height: calc(2 * 1.3em); }
    .mp-p-price { margin-top: 3px; font-size: 15px; }
    .mp-p-price s { font-size: 12px; }
    .mp-p-actions { gap: 8px; margin-top: auto; padding-top: 8px; }

    .mp-p-buy button,
    .mp-p-actions .cart-btn,
    .mp-p-actions .cart-stepper { height: 30px; border-radius: 6px; font-size: 11.5px; }

    .mp-p-actions .cart-stepper button { font-size: 14px; }
}

/* The heart on the cards in the rail: the mark alone, as on every other card
   in the shop. See the note in products.css. */
.mp-heart {
    border: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.mp-heart.is-saved { background: none; color: #b3131b; }

/* The heart in the rail: the same size and the same corner as the rest. */
.mp-heart { top: 6px; right: 6px; width: 30px; height: 30px; font-size: 16px; }

/* On the cards in the rails, Add to Cart is the basket alone — as on every
   other card in the shop. The words stay on the page's own big button. */
.mp-p-actions .cart-btn.is-add .cart-btn-label,
.pdp-similar-buy .cart-btn.is-add .cart-btn-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.mp-p-actions .cart-btn.is-add i,
.pdp-similar-buy .cart-btn.is-add i { display: inline-block; font-size: 1.1em; margin: 0; }

.mp-p-actions .cart-control { flex: 0 0 auto; }
.mp-p-actions .cart-btn.is-add { min-width: 42px; padding: 0 10px; }

/* Buy Now keeps its width once the item is in the basket, on the cards in the
   rails as on every other card in the shop. See the note in products.css. */
.mp-p-actions > form, .mp-p-actions > .mp-p-buy { flex: 1 1 auto; min-width: 0; }
.mp-p-actions .cart-control { flex: 0 0 auto; min-width: 0; }

.mp-p-actions .cart-stepper,
.pdp .pdp-similar-buy .cart-stepper {
    width: auto;
    justify-content: center;
    gap: 2px;
    padding: 0 2px;
}

.pdp-similar-buy .cart-control { flex: 0 0 auto; min-width: 0; }

/* The count between the two signs was stretching to fill; it only needs room
   for a number, so the whole stepper stays as narrow as the icon it replaced. */
.mp-p-actions .cart-stepper-count { flex: 0 0 auto; min-width: 14px; text-align: center; }

/* The count between the two signs was stretching to fill; it only needs room
   for a number, so the whole stepper stays as narrow as the icon it replaced. */
.pdp .pdp-similar-buy .cart-stepper-count { flex: 0 0 auto; min-width: 14px; text-align: center; }

/* On a computer the cards in the rails say "Add to Cart" in words; the basket
   on its own is for the phone. See the note in products.css. */
@media (min-width: 1024px) {
    .mp-p-actions .cart-btn.is-add .cart-btn-label,
    .pdp-similar-buy .cart-btn.is-add .cart-btn-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }

    .mp-p-actions .cart-btn.is-add { min-width: 0; gap: 6px; }
    .pdp-similar-buy .cart-btn.is-add { gap: 6px; }
}

/* ---------------------------------------------------------------------------
   The hidden label must stay inside its button.

   Clipping the words puts them in a box one pixel wide, but an absolutely
   positioned box belongs to the nearest positioned ancestor — and there was
   none, so the words belonged to the page. A rail clips what is inside it;
   it does not clip something that belongs to the page, so those hidden words
   sat far off to the right and made the document wider than the screen. The
   fixed bars stretched to that width, and the page could be dragged sideways.

   Positioning the button gives the label somewhere of its own to hide.
   ------------------------------------------------------------------------ */
.cart-btn { position: relative; }