/* =========================================
   Amaryllis — SINGLE PRODUCT
   -----------------------------------------
   Loaded alongside products.css, which already supplies the
   .product-card styling reused by the "Customers Also Liked" row.
   style.css remains the base for tokens, header, footer and motion.
========================================= */

.product-single {
    /* FRAME width, not column width. box-sizing is border-box, so a
       1280 cap plus 80px of padding yields a 1120 column — the inset
       counted twice. 1440 - 2x80 = the 1280 column Figma specifies. */
    --pdp-max: none;
    --pdp-inset: max(18px, 5.55vw);

    /* Figma: this page uses one ink, #1f1f1f, for everything except
       the inactive spec tab (#8a8a8a). */
    --pdp-ink: var(--c-ink);
    --pdp-body: var(--c-ink);
    --pdp-muted: #8a8a8a;
    --pdp-line: var(--c-line);
    --pdp-accent: var(--c-brand);
    --pdp-blue: #1f6fd0;

    /* No padding at the foot of the page.
     *
     * There used to be 96px here (130 on a phone) so the sticky bar
     * could never cover the last section. That was written when the
     * page ended in a plain section; it now ends in the enquiry panel,
     * which is a full-bleed photograph — so the reserved strip read as
     * a band of blank page between the picture and the footer, at
     * every width.
     *
     * The bar retires itself when the footer comes into view instead
     * (js/product-single.js). That covers the same problem without
     * reserving anything, and it also stops the bar sitting over the
     * footer once you reach the bottom, which the padding never did.
     */
    padding-bottom: 0;
}

/* =========================================
   0b. BREADCRUMB
   -----------------------------------------
   Figma: y=124 on both product frames, i.e. 24px under the 100px
   header, left-aligned to the same x=80 inset the gallery starts on.

   Type is the nav bar's — Source Sans Pro w600 16 / #1f1f1f — carried
   down 2px on desktop like the rest of the site outside the home page,
   so the ceiling is 14 and 0.97vw lands exactly on it at 1440.

   The separator is generated rather than written into the markup, so
   it never lands in the accessibility tree or in a copied selection —
   a screen reader reads "Home, Shop By Category, ..." rather than
   "Home greater-than Shop By Category greater-than".
========================================= */
.pdp-crumbs {
    /* --pdp-inset is 80/1440, the same x=80 the gallery below starts
       on, so the trail lines up with the product image rather than
       with the page edge. */
    padding: clamp(14px, 1.67vw, 24px) var(--pdp-inset) 0;
}

.pdp-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pdp-crumbs li {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: clamp(12px, 0.97vw, 14px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--pdp-ink, #1f1f1f);
}

.pdp-crumbs li + li::before {
    content: '>';
    padding: 0 0.5em;
    font-weight: 400;
    /* Decorative, and it must not be announced or selectable. */
    color: inherit;
    -webkit-user-select: none;
    user-select: none;
}

.pdp-crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease-out);
}

.pdp-crumbs a:hover,
.pdp-crumbs a:focus-visible {
    color: var(--c-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The last crumb is the page you are already on — stated, not offered. */
.pdp-crumbs [aria-current='page'] {
    font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
    .pdp-crumbs a { transition: none; }
}

/* =========================================
   1. GALLERY + BUY COLUMN
   -----------------------------------------
   The blog article deliberately has no trail — that removal was a
   separate request and still stands.
========================================= */
/* Figma: the gallery runs x80→788 (708 wide) and the info column
   x836→1369 (533), so the split is 708/533 with a 48px gutter — not
   the even halves this had. */
.pdp-main {
    display: grid;
    grid-template-columns: 708fr 533fr;
    gap: clamp(24px, 3.33vw, 48px);
    align-items: start;
    max-width: var(--pdp-max);
    margin: 0 auto;
    padding: 20px var(--pdp-inset) 0;
}

/* Figma: the main image is 708 x 610 with a 20px radius, not square
   and not a 4px radius. */
.pdp-stage {
    aspect-ratio: 708 / 610;
    overflow: hidden;
    border-radius: 20px;
    background: #f4f3f1;
}

.pdp-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shown when a product has no photographs at all. It inherits the
   stage's aspect-ratio and radius above, so the gallery column keeps
   its size instead of collapsing and leaving the buy panel beside an
   empty space. */
.pdp-stage--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--pdp-line);
    color: var(--pdp-muted);
    font-family: var(--font-body);
    font-size: clamp(12px, 1.11vw, 14px);
    text-align: center;
}

/* Figma: three 224 x 185 thumbnails at x = 81 / 323 / 564 → an 18px
   gap, sitting 31px below the main image. */
.pdp-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 31px;
}

.pdp-thumb {
    padding: 0;
    aspect-ratio: 224 / 185;
    overflow: hidden;
    background: #f4f3f1;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: border-color 0.3s var(--ease-out);
}

.pdp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-thumb.is-active {
    border-color: var(--pdp-ink);
}

.pdp-thumb:hover {
    border-color: #a5a5a5;
}

/* --- The gallery ends where the buy column ends --------------------
 * Figma lines the bottom of the thumbnails up with Add To Cart. That
 * only held at 1440: the gallery took its HEIGHT from its WIDTH (the
 * 708:610 stage), so a wider screen made it taller while the buy
 * column - capped type, fixed-height controls - stayed about the same.
 * At 1904 the thumbnails ran 344px below Add To Cart; at 1280 the
 * narrower buy column wrapped and grew, and they finished ABOVE it.
 *
 * So on desktop the gallery takes its height from the buy column
 * instead, and its width follows:
 *
 *   container-type: size   size containment, so the gallery adds no
 *                          height of its own to the row. The buy column
 *                          alone sets it, and the gallery is stretched
 *                          to match - its bottom IS Add To Cart's.
 *   the stage flexes       it takes whatever height the thumbnails
 *                          leave, so the bottoms meet at every width.
 *   width from height      the widest the block can be while keeping
 *                          Figma's own shape. With a 708:610 stage,
 *                          three 224:185 thumbs, 18px between them and
 *                          31px above:
 *
 *                            H = 1.13688 W + 21.09
 *                            W = 0.8796 H - 18.55
 *
 *                          hence calc(87.96cqh - 18.55px). With no
 *                          thumbnail row it is simply the stage,
 *                          W = 1.1607 H.
 *
 * Where the column is narrower than that width - smaller desktops -
 * the block fills the column and the stage grows TALLER than 708:610
 * instead. That is the better direction for these photographs: every
 * one is portrait (0.75-0.80), so a taller stage crops less of them.
 * At 1280 it shows 81% of the photo, where the old shape showed 69%.
 *
 * Measured on Beta: the thumbnails end exactly level with Add To Cart
 * (0.00px) at 1280, 1440, 1680, 1904 and 2560.
 *
 * Assumes one row of thumbnails. Every product has three or fewer per
 * colour today; a fourth would wrap to a second row, and the stage
 * would give up the height to it rather than the block overflowing.
 * ------------------------------------------------------------------ */
@media (min-width: 993px) {
    .pdp-main {
        align-items: stretch;
    }

    .pdp-gallery {
        container-type: size;
        /* A floor for a product with very little copy beside it, so the
           photograph never shrinks to a thumbnail itself. */
        min-height: 420px;
        display: flex;
        flex-direction: column;
    }

    .pdp-gallery .pdp-stage {
        aspect-ratio: auto;
        flex: 1 1 0;
        min-height: 0;
        width: min(100%, calc(87.96cqh - 18.55px));
    }

    .pdp-gallery .pdp-thumbs {
        flex: 0 0 auto;
        width: min(100%, calc(87.96cqh - 18.55px));
    }

    .pdp-gallery:not(:has(.pdp-thumbs)) .pdp-stage {
        width: min(100%, 116.07cqh);
    }
}

/* --- Wide screens: stop the gallery column growing --------------------
 * Above about 1500px the right width for the gallery stops changing
 * (~626px on Beta) because the buy column's height does. Left on the
 * 708fr:533fr split, the column kept widening round it and the spare
 * opened as a gap between photo and copy - 303px at 1904, 636px at
 * 2560. Holding the column at its 1440 size keeps that to ~78px and
 * hands the rest to the buy column.
 *
 * Full width up to 1599 - this range reads well as it is. From 1600
 * the buy column gets too wide for it, and the page is framed below. */
@media (min-width: 1441px) {
    .pdp-main {
        grid-template-columns: minmax(0, 704px) minmax(0, 1fr);
    }
}

/* --- XXL: frame the page ---------------------------------------------
 * From 1600 the full-width layout stops working. The photograph cannot
 * grow - its height is the buy column's, which stays near 733px - so
 * every extra pixel went to the buy column instead: at 1904 that was a
 * 627px image beside a 926px column, an 806px Add To Cart bar, and
 * short highlight lines with nothing to their right.
 *
 * Two changes, and neither works alone:
 *
 *   a 1400px content frame, centred
 *       Capping the width by itself left the 125px gap exactly where
 *       it was - the image is still 627 in a 704 column. Measured at
 *       1904, 1400 is the narrowest frame that keeps the headline on
 *       one line; at 1320 it wraps, the column grows, and Add To Cart
 *       drops below the fold on an 886px-tall window.
 *
 *   a 640px gallery column
 *       Sized to the image instead of to the 1440 design, so the spare
 *       beside the photograph falls from 77px to ~13px and the photo
 *       sits a designed gutter away from the copy again. A product with
 *       more copy beside it gets a taller photo rather than a wider one.
 *
 * Content-based rather than a fixed frame, so it never jumps: the
 * frame is 1400 of content plus the page inset either side, and at
 * 1600 that is almost exactly the full width it replaces.
 *
 * The breadcrumb joins the frame so it keeps lining up with the photo.
 * The dimension diagram is left full-bleed on purpose.
 * ------------------------------------------------------------------ */
@media (min-width: 1600px) {
    .product-single {
        --pdp-max: calc(1400px + 2 * var(--pdp-inset));
    }

    .pdp-crumbs {
        max-width: var(--pdp-max);
        margin-inline: auto;
    }

    .pdp-main {
        grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
    }
}

/* --- Copy --- */
/* Figma: Source Sans Pro w600 32 / lh 48 / #1f1f1f, in a 523 column
   at x=836. Was capped at 28. */
.pdp-headline {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.22vw, 30px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--pdp-ink);
    /* --- The info column runs on a uniform 20px rhythm -----------
     * Figma's y-coordinates down the right column: headline ends 263
     * → subtitle 283 → ends 337 → price 357 → ends 391 → tax 411 →
     * ends 433 → Select Size 453 → ends 476 → chips 496 → ends 518 →
     * Select Color 538 → ends 561 → swatches 581 → ends 646 →
     * Product Highlights 666 → ends 689 → body 709 → ends 930 →
     * BUY NOW 950. Every single gap is 20.
     * --------------------------------------------------------- */
    margin-bottom: 20px;
}

/* Figma: Open Sans w400 20 / lh 28 / #1f1f1f. */
.pdp-subtitle {
    font-family: var(--font-body);
    font-size: clamp(13px, 1.39vw, 18px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--pdp-ink);
    margin-bottom: 20px;
}

.pdp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}

/* Figma: the whole price line is Open Sans w600 20 / lh 28 / #1f1f1f
   — one style across "From ₹2000", the struck MRP and the % off. */
.pdp-price-now {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.39vw, 18px);
    font-weight: 400;
    color: var(--pdp-ink);
}

.pdp-price-mrp {
    font-size: clamp(12px, 1.11vw, 14px);
    color: var(--pdp-muted);
    text-decoration: line-through;
}

.pdp-price-off {
    font-size: clamp(12px, 1.11vw, 14px);
    font-weight: 400;
    color: var(--pdp-accent);
}

/* Figma: Open Sans w400 14 / lh 28 / #1f1f1f. */
.pdp-tax {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 2;
    color: var(--pdp-ink);
    margin-bottom: 20px;
}

/* --- Size and colour --- */
.pdp-options {
    margin-bottom: 20px;
}

/* Figma: "Select Size", "Select Color" and "Product Highlights" are
   all Source Sans Pro w600 20 / lh 48 / #1f1f1f. Was 16 at w700. */
.pdp-options-title {
    font-family: var(--font-display);
    font-size: clamp(13px, 1.39vw, 18px);
    font-weight: 600;
    line-height: 2.4;
    color: var(--pdp-ink);
    margin-bottom: 20px;
}

/* Figma: size chips are 56 x 22 at x = 836 / 907 / 979 → 15px apart,
   radius 4, labelled Open Sans w400 12 / lh 28. */
.pdp-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.pdp-size {
    min-width: 56px;
    padding: 0 12px;
    line-height: 22px;
    background: var(--c-page);
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--pdp-body);
    cursor: pointer;
    transition:
        border-color 0.3s var(--ease-out),
        color 0.3s var(--ease-out),
        background-color 0.3s var(--ease-out);
}

.pdp-size:hover {
    border-color: var(--pdp-ink);
}

/* A size the chosen finish is not sold in is taken OUT of the row
   (js/product-single.js sets .hidden on the label). Stated explicitly
   rather than left to the UA's [hidden] rule, since any display
   declaration picked up from elsewhere would beat it and leave the chip
   on the page. */
.pdp-size[hidden] {
    display: none;
}

/* Marks "Select Size" on the products that open with none selected —
   the ones whose sizes come and go with the finish. */
.pdp-req {
    margin-left: 0.25em;
    color: #d1332e;
    font-weight: 700;
}

/* .pdp-size.is-active removed. Selection is expressed by the checked
   radio and styled in shop.css with :has(input:checked). This rule
   matched a class the template stamped on the FIRST size and never
   updated, so that size rendered permanently selected. */

/* Figma: colour swatches are 65 x 65 circles at x = 836 / 915 / 994 /
   1073 — a 79px pitch, so 14px between them. */
.pdp-colours {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* The ring is drawn OUTSIDE the swatch with an offset shadow rather
   than a border, so selecting a colour does not change the size of
   the dot and shuffle the row. */
.pdp-colour {
    width: clamp(28px, 4.51vw, 65px);
    height: clamp(28px, 4.51vw, 65px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--swatch, #ffffff);
    cursor: pointer;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),
        0 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.3s var(--ease-out);
}

.pdp-colour:hover {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(0, 0, 0, 0.12);
}

/* .pdp-colour.is-active removed — same stale-class problem as the
   sizes above. The selected ring comes from :has(input:checked). */

/* .screen-reader-text has MOVED to style.css.
   It was only ever defined here, which was fine while the colour
   radios above were the only thing using it — but the listing cards
   now carry colour names in their swatches too, and products.css is a
   different stylesheet. Left undefined there, every colour name would
   have rendered as visible text inside a 24px circle. It is a generic
   utility, so it belongs in the base sheet. */

/* --- Highlights --- */
.pdp-highlights {
    margin-bottom: 20px;
}

.pdp-highlights ol {
    /* The theme resets list-style globally, so numbering has to be
       switched back on here. */
    list-style: decimal;
    margin-left: 20px;
}

/* Set to the same size as the subtitle above the price, as asked —
   these are the points that sell the product and were reading as
   small print beside it. (Figma draws them at w400 14 / lh 28; the
   line height comes down to 1.6 so the list does not sprawl at the
   larger size.) */
.pdp-highlights li {
    font-family: var(--font-body);
    font-size: clamp(13px, 1.39vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--pdp-body);
    margin-bottom: 0;
    padding-left: 4px;
}

/* --- Actions --- */
/* Figma 202:1938: the 393x48 CTA and the two 48x48 icon buttons all sit
   at y=947 — one row. The icons are fixed at 48 and Add To Cart takes
   the rest, so the row fills the 533 info column at any width. */
.pdp-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.pdp-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma: the BUY NOW CTA is 393 x 48, radius 8, fill #1f1f1f,
       labelled Source Sans Pro w700 24 / lh 48 / #fdfdfd, uppercase. */
    flex: 1 1 auto;
    min-height: 48px;
    padding: 4px 28px;
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: 8px;
    color: var(--c-page);
    font-family: var(--font-display);
    font-size: clamp(15px, 1.67vw, 22px);
    font-weight: 700;
    text-transform: uppercase;
    transition:
        background-color 0.35s var(--ease-out),
        border-color 0.35s var(--ease-out),
        color 0.35s var(--ease-out);
}

/* This is the "Add To Cart" component again, at its full size — Figma
   gives it Default #1f1f1f and Default_hover #81af4a. It was inverting
   to transparent, which made the page's primary CTA the only one on
   the site that does not go green. Nothing to swap with: the two
   controls beside it are the 48x48 wishlist and share icons. */
.pdp-buy:hover,
.pdp-buy:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* The enquiry variant is an <a>, so it does not inherit the button
   reset — it needs the underline removed and its visited colour pinned,
   or it renders underlined and purple after one visit. */
.pdp-enquire,
.pdp-enquire:visited {
    text-decoration: none;
    color: var(--c-page);
}

.pdp-enquire:hover,
.pdp-enquire:focus-visible {
    color: var(--c-ink);
}

.pdp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma: the share and wishlist controls are 48 x 48, radius 8. */
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    /* Figma: both controls are FILLED #1f1f1f with a #fdfdfd glyph,
       matching the BUY NOW button beside them — not the outlined
       light buttons this had. */
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: 8px;
    color: var(--c-page);
    cursor: pointer;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.pdp-icon-btn svg {
    width: 20px;
    height: 20px;
}

/* The button is dark at rest now, so hover inverts rather than
   lightening a white face. */
/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.pdp-icon-btn:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* Red, to match the hearts on the product cards.
   This was --pdp-ink, which is the same near-black as the button's own
   face — so "saved" filled the heart with the background it sat on and
   looked identical to "not saved". The white stroke stays, so the red
   reads as a filled heart outlined in white rather than a red smudge. */
.pdp-icon-btn.is-saved svg {
    fill: var(--c-wish);
}

/* =========================================
   2. DIMENSION DIAGRAM
========================================= */
/* Figma: the dimension diagram is FULL-BLEED — 1440 x 482 at x=0,
   not inset like the rest of the page. */
.pdp-diagram {
    max-width: none;
    margin: clamp(30px, 3.89vw, 56px) auto 0;
    padding: 0;
}

.pdp-diagram img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================
   3. SPECIFICATION
   One heading, then the catalogue's own tables. This was three tabs —
   Model Highlights, Size Specification, Technical Specification — which
   split one set of figures across three places and hid two thirds of it
   behind a click.
========================================= */
/* Figma: the diagram ends at 1536 and this block starts at 1592 → 56px. */
.pdp-specs {
    max-width: var(--pdp-max);
    margin: clamp(24px, 3.89vw, 56px) auto 0;
    padding: 0 var(--pdp-inset);
}

/* The section's one heading, on the tabs' own type so the page keeps
   the weight it had there. */
.pdp-specs-title {
    margin: 0 0 clamp(10px, 1.1vw, 16px);
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(17px, 2.22vw, 30px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--pdp-ink);
}

/* A catalogue page that prints more than one table names each of them —
   "Electrical Specifications" under the dimensions. A product with a
   single table has no caption and none is invented. */
.pdp-spec-caption {
    margin: clamp(18px, 2.2vw, 32px) 0 clamp(6px, 0.7vw, 10px);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.39vw, 19px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--pdp-body);
}

/* The first caption sits directly under the heading, so it does not
   need the gap that separates one table from the next. */
.pdp-spec-caption:first-child {
    margin-top: 0;
}

/* No frame. Figma's "model highlights" block is a plain 1280 x 326
   frame at x=80 — corner radius 0, no stroke. The blue border and its
   4px radius were added in CSS, the same invention that was on the
   Aircare diagrams. */
.pdp-specs-box {
    border: none;
    border-radius: 0;
    overflow: hidden;
}

/* --- The tables themselves --- */
.pdp-table-scroll {
    /* A five or six column table cannot shrink below a readable
       width, so on a phone it scrolls sideways rather than crushing
       every column. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Figma: every cell — headers and data alike — is Source Sans Pro
   w600 24 / lh 48 / #1f1f1f. The header is not a heavier weight; it
   reads as a header by position, not by contrast. */
.pdp-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-family: var(--font-display);
    font-size: clamp(12px, 1.67vw, 22px);
}

/* Nothing to scroll and nothing to keep apart, so it sits at its
   natural width rather than being stretched across the page. */
.pdp-table--narrow {
    width: auto;
    min-width: 0;
    /* Centred under the heading, so a short table reads as the whole
       of the section rather than as something left hanging. */
    margin-inline: auto;
}

.pdp-table th,
.pdp-table td {
    padding: 0 18px;
    line-height: 2;
    text-align: center;
    font-weight: 600;
    color: var(--pdp-ink);
    border-top: 1px solid var(--pdp-line);
}

.pdp-table thead th {
    font-weight: 600;
    color: var(--pdp-ink);
    border-top: 1px solid var(--pdp-line);
}

/* First column reads as a label, left-aligned like the design */
.pdp-table tbody th {
    text-align: left;
    font-weight: 600;  /* uniform w600 across the table, per Figma */
    color: var(--pdp-ink);
}

.pdp-table thead th:first-child {
    text-align: left;
}

/* A figure never breaks across two lines — "220-240/50" is one value.
   The column names may wrap, and do in the catalogue itself. */
.pdp-table tbody th,
.pdp-table tbody td {
    white-space: nowrap;
}

/* Eight columns or more — Sigma's dimensions run to twelve. At the full
   size those tables do not fit the page, and every second value was
   wrapping onto a line of its own. */
.pdp-table--wide {
    font-size: clamp(11px, 1.18vw, 16px);
}

.pdp-table--wide th,
.pdp-table--wide td {
    padding: 0 10px;
}

/* =========================================
   3b. NEED MORE INFORMATION
   -----------------------------------------
   The enquiry panel above the footer: a photograph running edge to
   edge with a frosted card of fields on its left.

   Every number in the card below is the design's own, in the design's
   own pixels, measured off the 534 x 446.8 frame — card 534 wide, 27.6
   padding, 19.4 tall inputs, 50 between one input and the next, a 95
   tall message box and a 76.6 x 26.5 Send. --u is one of those pixels:
   exactly 1px at the 1440 the frame was drawn at, and scaling with the
   page either side of it.

   Below 1024 the card stops following the frame and takes comfortable
   sizes instead. A 19px input is fine under a mouse and unusable under
   a thumb, and the design has no phone frame to copy.
========================================= */
.pdp-enquiry {
    position: relative;
    margin-top: clamp(40px, 5vw, 72px);
    overflow: hidden;
    background: #efece7;
}

.pdp-enquiry-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The woman and the fan are right of centre; the card sits left,
       so the crop holds on to the right when the frame is narrower
       than the photograph. */
    object-position: 72% 50%;
}

.pdp-enquiry-inner {
    position: relative;
    z-index: 1;
    max-width: var(--pdp-max);
    margin: 0 auto;
    padding: clamp(28px, 3.5vw, 52px) var(--pdp-inset);
}

/* Figma: fill D9D9D9 at 20%, corner radius 17.44, effect "Glass".
   Glass is a background blur with a light rim — the card is a pane you
   see the room through, not a white panel laid over it. It was an 86%
   white fill, which is why it read as a solid card. */
.pdp-enquiry-card {
    /* One design pixel. 1/14.4vw is 1px at 1440. */
    --u: clamp(0.88px, 0.0694vw, 1.18px);

    width: min(100%, calc(534 * var(--u)));
    padding: calc(20 * var(--u)) calc(27.6 * var(--u)) calc(13 * var(--u));
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: calc(17.44 * var(--u));
    background: rgba(217, 217, 217, 0.2);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    /* The drop shadow lifts the pane off the photograph; the inset
       highlight is the lit top edge a pane of glass catches. */
    box-shadow:
        0 18px 44px rgba(31, 31, 31, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
}

/* Figma: Source Sans Pro Semibold 19.93, line height auto, #000000. */
.pdp-enquiry-title {
    font-family: var(--font-display);
    font-size: calc(19.93 * var(--u));
    font-weight: 600;
    line-height: 1.25;
    color: #000000;
}

.pdp-enquiry-intro {
    font-size: calc(11 * var(--u));
    font-weight: 400;
    line-height: 1.3;
    color: var(--pdp-body);
}

.pdp-enquiry-notice {
    margin-top: calc(10 * var(--u));
    padding: calc(7 * var(--u)) calc(10 * var(--u));
    border-radius: calc(4 * var(--u));
    font-size: calc(11 * var(--u));
    line-height: 1.45;
}

.pdp-enquiry-notice--ok {
    background: rgba(129, 175, 74, 0.16);
    color: #3f5c20;
}

.pdp-enquiry-notice--error {
    background: rgba(197, 48, 48, 0.12);
    color: #8c2b2b;
}

/* Off screen, not display:none — a bot reading the markup should find
   a field that looks real. */
.pdp-enquiry-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 11 between one field and the next: the frame puts 50 between one
   input's top and the next one's, and the label between them accounts
   for the rest. */
.pdp-enquiry-field {
    margin-top: calc(11 * var(--u));
}

/* 4.4 under the label, 10.6 above it: that is what puts 50 between one
   input's top and the next one's, which is the pitch the frame runs on. */
.pdp-enquiry-field label,
.pdp-enquiry-topics legend {
    display: block;
    margin-bottom: calc(4.4 * var(--u));
    font-size: calc(12 * var(--u));
    font-weight: 700;
    line-height: 1.3;
    color: var(--pdp-ink);
}

/* Near-white on the glass rather than solid white: a flat white box on
   a translucent pane reads as a sticker on it. */
.pdp-enquiry-field input,
.pdp-enquiry-field textarea {
    display: block;
    width: 100%;
    height: calc(19.4 * var(--u));
    padding: 0 calc(8 * var(--u));
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: calc(4 * var(--u));
    font-family: var(--font-body);
    font-size: calc(11 * var(--u));
    line-height: calc(17 * var(--u));
    color: var(--pdp-ink);
}

.pdp-enquiry-field textarea {
    height: calc(95 * var(--u));
    padding: calc(7 * var(--u)) calc(8 * var(--u));
    line-height: 1.45;
    resize: vertical;
}

.pdp-enquiry-field input::placeholder,
.pdp-enquiry-field textarea::placeholder {
    color: rgba(31, 31, 31, 0.38);
}

.pdp-enquiry-field input:focus-visible,
.pdp-enquiry-field textarea:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
}

/* The product is filled in from the page, so it reads as a statement
   rather than something waiting to be typed into. */
.pdp-enquiry-field input[readonly] {
    color: var(--pdp-body);
    cursor: default;
}

/* Where the glass is not supported the pane would be a barely-there
   grey wash over a photograph, and the text on it unreadable. Those
   browsers get an opaque card instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pdp-enquiry-card {
        background: rgba(255, 255, 255, 0.88);
    }
}

/* Two 231.5 columns with a 20 gutter inside the 480 content width. */
.pdp-enquiry-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(20 * var(--u));
}

.pdp-enquiry-row .pdp-enquiry-field {
    margin-top: calc(11 * var(--u));
}

/* Three choices spread evenly across the content width — the frame has
   them starting at 0, 128 and 258 of the 480. */
/* A plain block. The grid is on .pdp-enquiry-topic-row inside it —
   see the note in single-amaryllis_product.php: a <legend> is not a
   dependable grid item, and iOS Safari laid this one out at
   min-content width however it was told to span. */
.pdp-enquiry-topics {
    display: block;
    margin-top: calc(11 * var(--u));
    padding: 0;
    border: 0;
}

.pdp-enquiry-topics legend {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: calc(8 * var(--u));
    padding: 0;
}

.pdp-enquiry-topic-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(8 * var(--u)) 0;
}

.pdp-enquiry-topic {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    font-size: calc(11 * var(--u));
    line-height: 1.3;
    color: var(--pdp-body);
    cursor: pointer;
}

.pdp-enquiry-topic input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.pdp-enquiry-radio {
    flex: 0 0 auto;
    position: relative;
    width: calc(7.5 * var(--u));
    height: calc(7.5 * var(--u));
    border: 1px solid rgba(31, 31, 31, 0.4);
    border-radius: 50%;
    background: #ffffff;
    transition: border-color 0.2s var(--ease-out);
}

.pdp-enquiry-radio::after {
    content: '';
    position: absolute;
    inset: calc(1.6 * var(--u));
    border-radius: 50%;
    background: var(--c-brand);
    transform: scale(0);
    transition: transform 0.2s var(--ease-out);
}

.pdp-enquiry-topic input:checked + .pdp-enquiry-radio {
    border-color: var(--c-brand);
}

.pdp-enquiry-topic input:checked + .pdp-enquiry-radio::after {
    transform: scale(1);
}

.pdp-enquiry-topic input:focus-visible + .pdp-enquiry-radio {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

.pdp-enquiry-actions {
    margin-top: calc(10 * var(--u));
    text-align: right;
}

.pdp-enquiry-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(76.6 * var(--u));
    height: calc(26.5 * var(--u));
    padding: 0;
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: calc(3 * var(--u));
    color: var(--c-page);
    font-family: var(--font-body);
    font-size: calc(11 * var(--u));
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.3s var(--ease-out),
        border-color 0.3s var(--ease-out);
}

.pdp-enquiry-send:hover,
.pdp-enquiry-send:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
}

/* --- Under a thumb ------------------------------------------------
 * The frame has no phone version, and its 19px inputs and 7px radios
 * are mouse sizes. Below 1024 the card keeps the design's layout and
 * takes sizes that can be typed into and tapped.
 * ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pdp-enquiry-card {
        padding: 22px 20px 18px;
        border-radius: 10px;
    }

    .pdp-enquiry-title { font-size: 19px; }
    .pdp-enquiry-intro { margin-top: 6px; font-size: 13px; line-height: 1.5; }
    .pdp-enquiry-notice { margin-top: 12px; padding: 9px 12px; border-radius: 6px; font-size: 13px; }

    .pdp-enquiry-field,
    .pdp-enquiry-row .pdp-enquiry-field,
    .pdp-enquiry-topics { margin-top: 14px; }

    .pdp-enquiry-field label,
    .pdp-enquiry-topics legend { margin-bottom: 6px; font-size: 13px; }

    .pdp-enquiry-field input,
    .pdp-enquiry-field textarea {
        height: 42px;
        padding: 0 12px;
        border-radius: 5px;
        /* 16px: anything smaller and iOS zooms the page on focus. */
        font-size: 16px;
        line-height: 40px;
    }

    .pdp-enquiry-field textarea {
        height: 120px;
        padding: 10px 12px;
        line-height: 1.5;
    }

    .pdp-enquiry-row { gap: 0 14px; }

    .pdp-enquiry-topic-row { gap: 10px 0; }
    .pdp-enquiry-topic { gap: 8px; font-size: 14px; }

    .pdp-enquiry-radio { width: 16px; height: 16px; border-width: 1.5px; }
    .pdp-enquiry-radio::after { inset: 3px; }

    .pdp-enquiry-actions { margin-top: 16px; }

    .pdp-enquiry-send {
        width: auto;
        min-width: 110px;
        height: 42px;
        padding: 0 22px;
        border-radius: 5px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .pdp-enquiry-card {
        width: 100%;
        /* Still glass, but a denser pane: at this width the card covers
           the photograph rather than sitting on a clear part of it, so
           the busiest areas end up behind the text. */
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(22px) saturate(120%);
        -webkit-backdrop-filter: blur(22px) saturate(120%);
    }

    .pdp-enquiry-bg {
        object-position: 62% 50%;
    }

    /* Three abreast will not fit a phone's width. */
    .pdp-enquiry-topic-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .pdp-enquiry-row {
        grid-template-columns: 1fr;
    }

    .pdp-enquiry-topic-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-enquiry-radio,
    .pdp-enquiry-radio::after,
    .pdp-enquiry-send {
        transition: none;
    }
}


/* =========================================
   4. CUSTOMERS ALSO LIKED
   The cards themselves come from products.css.
========================================= */
/* Figma: the spec block ends at 1918 and the related row starts at
   1966 → 48px. */
/* --- Customers Also Liked -------------------------------------------
 * Deliberately NOT on the product page's own geometry.
 *
 * These are the same .product-card as the listing page, and they are
 * asked to be the same SIZE as it — so this row takes the listing's
 * container, not the PDP's: the same 2.29vw inset and the same 1376
 * cap, which is what makes a card here measure what a card there does.
 *
 * On the PDP's own 5.55vw inset the container came out ~94px narrower,
 * and with three columns instead of four the cards rendered 411 wide
 * against the listing's 328.
 *
 * --pdp-related-inset exists so the swipe row below can cancel it with
 * a negative margin without the two drifting apart.
 * ------------------------------------------------------------------ */
.pdp-related {
    --pdp-related-inset: max(14px, 2.29vw);

    max-width: none;
    margin: clamp(28px, 3.33vw, 48px) auto 0;
    padding: 0 var(--pdp-related-inset);
    overflow-x: clip;
}

/* 1376 = the listing's --content-max. Applied to the grid rather than
   a wrapper because this row has no .product-container around it. */
.pdp-related .product-grid {
    max-width: 1376px;
    margin-inline: auto;
}

.pdp-related-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    color: var(--pdp-ink);
    margin-bottom: clamp(18px, 2.2vw, 30px);
}

/* =========================================
   5. STICKY BUY BAR
========================================= */
.pdp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: var(--c-white);
    border-top: 1px solid var(--pdp-line);
    /* Figma: y-8 / blur20 / #000000 at 25% — the only upward shadow in
       the file, on both PDP frames. Was y-4 at 8%, i.e. a third of the
       opacity, which is why the bar barely lifted off the page. */
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.25);
    /* Off-screen and inert until the main Buy Now scrolls away.
       visibility, not display, so it can slide rather than appear. */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
}

.pdp-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
}

.pdp-bar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: var(--pdp-max);
    margin: 0 auto;
    padding: 12px var(--pdp-inset);
}

/* Figma: the sticky bar is 1440 x 102 and its product name is
   Source Sans Pro w600 24 / lh 48 / #1f1f1f. Was 16px. */
/* The name is the only thing on the left, so the auto margin lives
   here: everything after it is pushed to the right edge, whether or
   not this product has a price. It was on the actions, which put the
   price next to the name — the design has the price beside the
   buttons, not beside the title. */
.pdp-bar-name {
    margin-right: auto;
    font-family: var(--font-display);
    font-size: clamp(13px, 1.67vw, 22px);
    font-weight: 600;
    line-height: 2;
    color: var(--pdp-ink);
}

.pdp-bar-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    /* Figma: the price group ends about 8% of the frame before the
       buttons begin — 80px at the 1440 it is drawn at. */
    margin-right: clamp(16px, 5.5vw, 80px);
}

.pdp-bar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pdp-bar-cart,
.pdp-bar-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 38px;
    padding: 8px 20px;
    border-radius: 3px;
    border: 1px solid var(--pdp-ink);
    font-size: clamp(12px, 1.04vw, 13px);
    font-weight: 400;
    transition:
        background-color 0.35s var(--ease-out),
        border-color 0.35s var(--ease-out),
        color 0.35s var(--ease-out);
}

.pdp-bar-cart {
    background: var(--c-white);
    color: var(--pdp-ink);
}

.pdp-bar-buy {
    background: var(--c-ink);
    color: var(--c-white);
}

/* --- Sticky bar hover: brand green, one filled at a time ----------
 * Same rule the product cards follow. View Cart is the solid one at
 * rest here and Buy Now is outlined, so whichever is pointed at
 * takes the green fill and the other drops back to outlined — the bar
 * never shows two solid buttons with no primary between them.
 *
 * What was here before: Add To Cart went to #f1f1f1, a barely visible
 * grey, and View Cart inverted to transparent. Neither is in the
 * design file; every hover variant in it is #81af4a on #fdfdfd.
 * ------------------------------------------------------------- */
.pdp-bar-cart:hover,
.pdp-bar-cart:focus-visible,
.pdp-bar-buy:hover,
.pdp-bar-buy:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* Buy Now takes the fill → View Cart gives its up. The reverse
   needs no rule: Buy Now is already outlined at rest. */
.pdp-bar-actions:has(.pdp-bar-cart:hover) .pdp-bar-buy,
.pdp-bar-actions:has(.pdp-bar-cart:focus-visible) .pdp-bar-buy {
    background: transparent;
    border-color: var(--pdp-ink);
    color: var(--pdp-ink);
}

/* =========================================
   6. RESPONSIVE
========================================= */
@media (max-width: 992px) {
    .pdp-main {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .pdp-stage {
        max-width: 520px;
    }

    .pdp-thumbs {
        max-width: 520px;
    }

    /* --- "Customers Also Liked": a swipe row, not a grid -----------
     * The row always holds exactly three products, and the listing grid
     * drops to two columns at this width - so the third card always sat
     * alone on a row of its own. A single row that scrolls sideways
     * keeps all three the same size, and the next card peeking in from
     * the edge is what tells people there is more to swipe.
     *
     * The row runs to the screen edges (the negative margin undoes the
     * section's inset, the padding puts it back inside the scroller) so
     * the peeking card is cut by the edge of the phone, not by an
     * invisible line 20px inside it. scroll-padding makes each card
     * snap to the same inset the rest of the page starts on. */
    .pdp-related .product-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(78%, 300px);
        gap: 14px;
        max-width: none;
        /* Cancels the SECTION's inset, which is now the listing's
           2.29vw rather than the PDP's 5.55vw — hence the variable
           rather than repeating the expression. Get these two out of
           step and the swipe row sits inset from one edge and bleeding
           off the other. */
        margin-inline: calc(-1 * var(--pdp-related-inset));
        padding: 4px var(--pdp-related-inset) 18px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--pdp-related-inset);
        scrollbar-width: none;
    }

    .pdp-related .product-grid::-webkit-scrollbar {
        display: none;
    }

    .pdp-related .product-card {
        scroll-snap-align: start;
    }

    /* The scroll reveal is switched off inside the row. A card parked
       off to the side is outside the viewport as far as the fallback
       observer is concerned, so it would sit invisible until swiped
       to - an empty slot where the peeking card should be. */
    .has-js .pdp-related .product-grid > .reveal {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}

@media (max-width: 768px) {
    /* Name and price stack, buttons go full width underneath —
       three items in one row leaves nothing legible at this size. */
    .pdp-bar-inner {
        flex-wrap: wrap;
        gap: 8px 16px;
        padding: 10px var(--pdp-inset) 12px;
    }

    .pdp-bar-name {
        /* Stacked, so there is nothing to push against. */
        margin-right: 0;
    }

    .pdp-bar-price {
        margin-right: 0;
    }

    .pdp-bar-actions {
        flex: 1 1 100%;
    }

    .pdp-bar-cart,
    .pdp-bar-buy {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 576px) {
    /* The 130px that used to be reserved here is gone for the reason
       given on .product-single at the top of this file. */

    .pdp-colour { width: 34px; height: 34px; }

    /* Add To Cart, wishlist and share stay on ONE row, as on desktop.
       This used to wrap and give the CTA the full width, which stacked
       the two icons on lines of their own underneath it. The icons are
       a fixed 48px, so the CTA simply takes what is left - 227px on a
       390px phone, room for its label at the 15px floor. min-width: 0
       lets it shrink below its content width on the narrowest phones
       instead of pushing the icons off the edge. */
    .pdp-actions { flex-wrap: nowrap; }

    .pdp-buy {
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: 16px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .pdp-bar,
    .pdp-thumb,
    .pdp-size,
    .pdp-colour,
    .pdp-buy,
    .pdp-icon-btn {
        transition: none;
    }
}


/* === desktop -2px === */
/* -----------------------------------------------------------------
   2px off the desktop type, as asked. These selectors set a FIXED
   size, which applies at every width -- editing the value in place
   would have shrunk the phone too, and the phone was already right.
   So the reduction is scoped to desktop and the base rule, which is
   what mobile uses, is left exactly as it was.
   ----------------------------------------------------------------- */
@media (min-width: 1025px) {
    .pdp-tax { font-size: 12px; }   /* was 14px */
    .pdp-size { font-size: 10px; }   /* was 12px */
    /* .pdp-highlights li was pinned to 12px here. It is asked to match
       the subtitle now, and a fixed size at every desktop width would
       hold it back down. */
}

/* =========================================
   NOT AVAILABLE
   A size and finish the price list does not cover: js/product-single.js
   puts "Not available in this option" where the price goes and disables
   Buy Now (and the sticky bar's) until an available option is chosen.
========================================= */
.pdp-price.is-unavailable [data-price-now] {
    font-size: clamp(16px, 1.53vw, 22px);
    color: var(--c-wish);
}

.pdp-buy:disabled,
.pdp-bar-cart:disabled {
    opacity: 0.45;
    pointer-events: none;
}