/* ============================================================
 *  Rugsville PDP Redesign — premium 65/35 image-to-info layout
 *
 *  Reuses Hyvä's existing `initGallery()` Alpine factory (which
 *  already handles the click-to-fullscreen lightbox). We only
 *  re-grid, re-style typography, and add hover-zoom + thumb strip
 *  polish via CSS.
 *
 *  Loaded ONLY on `catalog_product_view` layout handle via
 *  Rugsville_PdpRedesign/view/frontend/layout/catalog_product_view.xml,
 *  so PLP / cart / checkout / home are untouched.
 *
 *  Token reuse: the rest of the site exposes `--rv-*` Apple-style
 *  tokens scoped under `.rv-ap`. Here we re-publish the subset we
 *  need at the page level so the rules stand alone even when the
 *  Hyvä parent's `:root` block hasn't loaded yet.
 * ============================================================ */

body.catalog-product-view {
    --rv-pdp-page-bg:     #ffffff;
    --rv-pdp-card-bg:     #ffffff;
    --rv-pdp-tile-bg:     #f5f5f7;
    --rv-pdp-ink:         #1d1d1f;
    --rv-pdp-ink-2:       #424245;
    --rv-pdp-mute:        #6e6e73;
    --rv-pdp-hairline:    #ebebed;
    --rv-pdp-border:      #d2d2d7;
    --rv-pdp-accent:      #b8924c;
    --rv-pdp-sale:        #c4242c;   /* used sparingly — only on sale-price + Save% badge */

    --rv-pdp-sans: -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI",
                   system-ui, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    --rv-pdp-ease: cubic-bezier(0.28, 0.11, 0.32, 1);

    --rv-pdp-radius-img:  12px;
    --rv-pdp-radius-pill: 980px;
    --rv-pdp-radius-card: 8px;

    --rv-pdp-sticky-top:  24px;
}

/* =============================================================
 * 1. THE GRID — override Hyvä's `lg:grid-cols-2` to 65/35
 *
 * Hyvä's existing parent container uses Tailwind utilities:
 *   class="grid grid-rows-auto grid-cols-1
 *          md:grid-cols-[42%_minmax(0,_1fr)]
 *          md:grid-rows-[min-content_minmax(0,_1fr)]
 *          lg:grid-cols-2 w-full"
 *
 * We target it via `:has()` (good browser support since 2023),
 * matching the unique combination "grid container that holds
 * #rvGalleryWrap as a direct child".
 * ============================================================= */
/* IMPORTANT: use `fr` units, not `%`.
 *
 * `grid-template-columns: 65% 35%` defines tracks as a percentage
 * of the GRID CONTAINER's width BEFORE the gap is subtracted. Adding
 * a `column-gap: 48px` on top forces the total row width to
 * `100% + 48px` — i.e. the right column overflows by exactly the
 * gap amount at every breakpoint (1440 → 48px overflow, 1280 → 40px,
 * 1024 → 32px). The visual audit confirmed this math precisely.
 *
 * `fr` units split the REMAINING space after gap is subtracted, so
 * 65fr + 35fr with any gap value always sums to 100% of available
 * space. `minmax(0, …fr)` also prevents children with hard min-content
 * widths from inflating the track past its assigned share.
 */
@media (min-width: 1024px) {
    body.catalog-product-view .grid:has(> #rvGalleryWrap) {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr) !important;
        column-gap: 32px !important;
        align-items: start !important;          /* required for `position: sticky` to pin */
    }
}
@media (min-width: 1280px) {
    body.catalog-product-view .grid:has(> #rvGalleryWrap) {
        grid-template-columns: minmax(0, 62fr) minmax(0, 38fr) !important;
        column-gap: 40px !important;
    }
}
@media (min-width: 1440px) {
    body.catalog-product-view .grid:has(> #rvGalleryWrap) {
        grid-template-columns: minmax(0, 65fr) minmax(0, 35fr) !important;
        column-gap: 48px !important;
    }
}

/* =============================================================
 * 2. STICKY RIGHT RAIL — info column pins to the top of the
 *    viewport on scroll, exactly like our checkout summary.
 *
 *    Notes on what we DO NOT do, with reasons:
 *      - No `overflow-y: auto` here. It implicitly sets
 *        `overflow-x: hidden`, which silently clips long titles,
 *        the "67% OFF" badge, and the SKU on the right edge —
 *        exactly the bug screenshot we just fixed.
 *      - No `max-height: calc(100vh - 48px)`. With a height cap
 *        the browser triggers the inner scrollbar (see above).
 *        Without one, sticky still works: the column pins at
 *        `top: 24px` until it scrolls past the bottom of its
 *        grid container, then natural page scroll takes over.
 *      - `min-width: 0` is CRITICAL on a grid child. Without it,
 *        CSS Grid refuses to shrink the column below its
 *        min-content size, which on long product titles forces
 *        the track wider than its declared 35% and pushes
 *        content past the visible viewport.
 * ============================================================= */
@media (min-width: 1024px) {
    body.catalog-product-view .product-info-main {
        position: sticky !important;
        top: var(--rv-pdp-sticky-top) !important;
        align-self: start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
    /* Also reset min-width on the GRID itself so its 35% track is
       honored even when product titles are long. */
    body.catalog-product-view .grid:has(> #rvGalleryWrap) > * {
        min-width: 0;
    }
}

/* Make sure ANY text inside the info column wraps cleanly — long
   product names, SKUs with no spaces, URLs in descriptions.       */
body.catalog-product-view .product-info-main,
body.catalog-product-view .product-info-main * {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* But don't break standalone numeric prices apart */
body.catalog-product-view .product-info-main .price,
body.catalog-product-view .product-info-main .price-wrapper {
    overflow-wrap: normal;
    word-break: normal;
}

/* =============================================================
 * 3. HERO IMAGE — aspect ratio, subtle hover-zoom, click-to-zoom
 *    cursor. The actual click-to-fullscreen is handled by Hyvä's
 *    `initGallery()` Alpine factory we inherit.
 * ============================================================= */
body.catalog-product-view #rvGalleryWrap {
    overflow: hidden;
    border-radius: var(--rv-pdp-radius-img);
    background: var(--rv-pdp-tile-bg);
    cursor: zoom-in;
}
body.catalog-product-view #rvGalleryWrap .main-image,
body.catalog-product-view #rvGalleryWrap [data-main-image],
body.catalog-product-view #gallery img {
    transition: transform 0.5s var(--rv-pdp-ease) !important;
    transform-origin: center center;
    will-change: transform;
}
body.catalog-product-view #rvGalleryWrap:hover .main-image,
body.catalog-product-view #rvGalleryWrap:hover [data-main-image],
body.catalog-product-view #rvGalleryWrap:hover #gallery img {
    transform: scale(1.04);
}
/* Don't apply the hover-zoom while the customer is in the
   fullscreen lightbox (Hyvä sets fullscreen=true on the gallery,
   adding a `fixed top-0 left-0` style). */
body.catalog-product-view #gallery [class*="fixed"][class*="top-0"] img {
    transform: none !important;
}

/* =============================================================
 * 4. THUMBNAIL STRIP — neutralise Hyvä's defaults and restyle
 *    to a clean horizontal scroller with 80px square thumbs,
 *    active-state ink border. The strip lives inside #gallery
 *    after the hero (Hyvä injects it).
 * ============================================================= */
body.catalog-product-view #gallery [role="tablist"],
body.catalog-product-view #gallery nav {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 12px 0 4px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--rv-pdp-hairline) transparent;
}
body.catalog-product-view #gallery [role="tab"],
body.catalog-product-view #gallery nav button {
    flex: 0 0 auto !important;
    width: 80px !important;
    height: 80px !important;
    border: 1px solid var(--rv-pdp-hairline) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--rv-pdp-card-bg) !important;
    transition: border-color 0.2s var(--rv-pdp-ease),
                box-shadow 0.2s var(--rv-pdp-ease) !important;
    cursor: pointer;
}
body.catalog-product-view #gallery [role="tab"] img,
body.catalog-product-view #gallery nav button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
body.catalog-product-view #gallery [role="tab"]:hover,
body.catalog-product-view #gallery nav button:hover {
    border-color: var(--rv-pdp-border) !important;
}
body.catalog-product-view #gallery [role="tab"][aria-selected="true"],
body.catalog-product-view #gallery nav button[aria-current="true"],
body.catalog-product-view #gallery nav button.is-active {
    border-color: var(--rv-pdp-ink) !important;
    box-shadow: 0 0 0 1px var(--rv-pdp-ink) inset !important;
}

/* =============================================================
 * 5. INFO COLUMN TYPOGRAPHY — Apple-aligned
 *    (system stack, ink ink, tight tracking on display sizes)
 * ============================================================= */
body.catalog-product-view .product-info-main {
    font-family: var(--rv-pdp-sans) !important;
    color: var(--rv-pdp-ink) !important;
    letter-spacing: -0.005em;
}
body.catalog-product-view .product-info-main * {
    font-family: var(--rv-pdp-sans) !important;
}

/* H1 product title */
body.catalog-product-view .product-info-main .page-title-wrapper > h1,
body.catalog-product-view .product-info-main h1.page-title,
body.catalog-product-view .product-info-main .product-info-main__title,
body.catalog-product-view .product-info-main h1 {
    font-size: clamp(24px, 2.4vw, 32px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.15 !important;
    color: var(--rv-pdp-ink) !important;
    margin: 0 0 12px !important;
    text-transform: none !important;
}

/* Star rating + review count */
body.catalog-product-view .product-info-main .rating-summary,
body.catalog-product-view .product-info-main .product-reviews-summary {
    margin: 0 0 16px !important;
    font-size: 13px !important;
    color: var(--rv-pdp-mute) !important;
}
body.catalog-product-view .product-info-main .product-reviews-summary .action.view {
    color: var(--rv-pdp-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* =============================================================
 * 6. PRICE BLOCK — big ink sale, strikethrough mute regular,
 *    SAVE-% badge with brand gold accent (no shouty red).
 * ============================================================= */
body.catalog-product-view .product-info-main .price-box,
body.catalog-product-view .product-info-main .product-info-price {
    margin: 0 0 20px !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--rv-pdp-hairline) !important;
    border-bottom: 1px solid var(--rv-pdp-hairline) !important;
    background: transparent !important;
}
body.catalog-product-view .product-info-main .price-box .special-price .price,
body.catalog-product-view .product-info-main .price-box .price-wrapper .price {
    font-size: clamp(24px, 2.4vw, 30px) !important;
    font-weight: 600 !important;
    color: var(--rv-pdp-ink) !important;
    letter-spacing: -0.012em !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.1 !important;
}
body.catalog-product-view .product-info-main .price-box .old-price .price {
    font-size: 16px !important;
    color: var(--rv-pdp-mute) !important;
    text-decoration: line-through !important;
    margin-left: 12px !important;
    font-weight: 400 !important;
}
/* Save % badge (Magento renders inline; we tint it gold) */
body.catalog-product-view .product-info-main .special-price + .savings,
body.catalog-product-view .product-info-main .product-info-price .savings,
body.catalog-product-view .product-info-main .price-box .price-percent {
    display: inline-block;
    padding: 4px 10px;
    margin-left: 12px;
    background: color-mix(in srgb, var(--rv-pdp-accent) 12%, transparent);
    color: var(--rv-pdp-accent) !important;
    border-radius: var(--rv-pdp-radius-pill);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Tax note (small, mute, under price) */
body.catalog-product-view .product-info-main .price-including-tax,
body.catalog-product-view .product-info-main .price-excluding-tax {
    font-size: 12px !important;
    color: var(--rv-pdp-mute) !important;
    margin-top: 4px !important;
}

/* =============================================================
 * 7. SIZE / SWATCH SELECTOR — pill buttons with price inline
 *    (Apple HIG: never hide price-affecting choices in a dropdown)
 * ============================================================= */
body.catalog-product-view .product-info-main .product-options-wrapper {
    margin: 0 0 20px !important;
}
body.catalog-product-view .product-info-main .swatch-attribute-label,
body.catalog-product-view .product-info-main .field.configurable > .label,
body.catalog-product-view .product-info-main label.product-option-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rv-pdp-mute) !important;
    letter-spacing: 0.01em;
    text-transform: uppercase !important;
    margin: 0 0 10px !important;
    display: block;
}
body.catalog-product-view .product-info-main .swatch-option,
body.catalog-product-view .product-info-main .swatch-attribute .swatch-option.text {
    background: var(--rv-pdp-card-bg) !important;
    border: 1px solid var(--rv-pdp-border) !important;
    border-radius: var(--rv-pdp-radius-card) !important;
    color: var(--rv-pdp-ink) !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin: 0 8px 8px 0 !important;
    cursor: pointer;
    transition: border-color 0.2s var(--rv-pdp-ease),
                background 0.2s var(--rv-pdp-ease),
                box-shadow 0.2s var(--rv-pdp-ease) !important;
}
body.catalog-product-view .product-info-main .swatch-option:hover {
    border-color: var(--rv-pdp-ink-2) !important;
}
body.catalog-product-view .product-info-main .swatch-option.selected,
body.catalog-product-view .product-info-main .swatch-option[aria-checked="true"] {
    border-color: var(--rv-pdp-ink) !important;
    box-shadow: 0 0 0 1px var(--rv-pdp-ink) inset !important;
    background: var(--rv-pdp-tile-bg) !important;
}
body.catalog-product-view .product-info-main .swatch-option.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}

/* =============================================================
 * 8. QTY + ADD-TO-CART — Apple ink-black pill, full-width
 * ============================================================= */
body.catalog-product-view .product-info-main .box-tocart {
    margin: 0 0 16px !important;
}
body.catalog-product-view .product-info-main .box-tocart .field.qty {
    margin-right: 12px !important;
}
body.catalog-product-view .product-info-main .box-tocart .input-text.qty,
body.catalog-product-view .product-info-main .qty input[type="number"] {
    width: 72px !important;
    height: 48px !important;
    border: 1px solid var(--rv-pdp-border) !important;
    border-radius: var(--rv-pdp-radius-card) !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--rv-pdp-ink) !important;
    font-variant-numeric: tabular-nums;
}
body.catalog-product-view .product-info-main .action.tocart,
body.catalog-product-view .product-info-main button.action.primary.tocart,
body.catalog-product-view .product-info-main button[id^="product-addtocart-button"] {
    flex: 1 1 auto !important;
    background: var(--rv-pdp-ink) !important;
    background-image: none !important;
    border: 1px solid var(--rv-pdp-ink) !important;
    color: #fff !important;
    border-radius: var(--rv-pdp-radius-pill) !important;
    font-family: var(--rv-pdp-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    height: 48px !important;
    min-width: 0 !important;
    padding: 0 28px !important;
    box-shadow: none !important;
    transition: opacity 0.2s var(--rv-pdp-ease),
                transform 0.12s var(--rv-pdp-ease) !important;
    cursor: pointer;
    text-transform: none !important;
}
body.catalog-product-view .product-info-main .action.tocart:hover:not(:disabled),
body.catalog-product-view .product-info-main button[id^="product-addtocart-button"]:hover:not(:disabled) {
    opacity: 0.86 !important;
}
body.catalog-product-view .product-info-main .action.tocart:active:not(:disabled),
body.catalog-product-view .product-info-main button[id^="product-addtocart-button"]:active:not(:disabled) {
    transform: translateY(1px) !important;
}
body.catalog-product-view .product-info-main .box-tocart .actions {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100%;
}

/* =============================================================
 * 9. TRUST STRIP — 3-line below CTA, hairline-bordered
 *    (uses existing Hyvä `.rv-pdp-trust` or falls back to
 *    common selectors; selectors are duplicated to handle
 *    Hyvä's "additional info" block variations.)
 * ============================================================= */
body.catalog-product-view .product-info-main .rv-pdp-trust,
body.catalog-product-view .product-info-main .product-info-trust {
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid var(--rv-pdp-hairline) !important;
}
body.catalog-product-view .product-info-main .rv-pdp-trust li,
body.catalog-product-view .product-info-main .product-info-trust li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    color: var(--rv-pdp-ink-2) !important;
    padding: 6px 0 !important;
    list-style: none !important;
}
body.catalog-product-view .product-info-main .rv-pdp-trust li::before,
body.catalog-product-view .product-info-main .product-info-trust li::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3 3 7-7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* =============================================================
 * 10. SHORT DESCRIPTION & ADDITIONAL META — capped line length
 * ============================================================= */
body.catalog-product-view .product-info-main .product.attribute.overview,
body.catalog-product-view .product-info-main .product-info-main__short-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--rv-pdp-ink-2) !important;
    max-width: 65ch;
    margin: 16px 0 0 !important;
}

/* SKU + availability strip (small, mute) */
body.catalog-product-view .product-info-main .product.attribute.sku,
body.catalog-product-view .product-info-main .product-info-stock-sku {
    font-size: 12px !important;
    color: var(--rv-pdp-mute) !important;
    margin: 4px 0 12px !important;
    letter-spacing: 0;
}
body.catalog-product-view .product-info-main .stock.available {
    color: var(--rv-pdp-ink-2) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    font-weight: 500;
}

/* Wishlist + share row (compact, secondary) */
body.catalog-product-view .product-info-main .product-social-links {
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--rv-pdp-hairline);
    display: flex;
    gap: 16px;
    font-size: 13px;
}
body.catalog-product-view .product-info-main .product-social-links a {
    color: var(--rv-pdp-ink-2) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s var(--rv-pdp-ease);
}
body.catalog-product-view .product-info-main .product-social-links a:hover {
    opacity: 0.7 !important;
}

/* =============================================================
 * 11. SECTIONS BELOW THE FOLD — full-width, ungrid the parent
 *     after the hero+info two-column area so reviews, related,
 *     description tabs span the full container.
 *
 *     Hyvä typically renders these as siblings AFTER the grid
 *     container so this is automatic — we just ensure they
 *     respect the container width.
 * ============================================================= */
body.catalog-product-view .product.info.detailed,
body.catalog-product-view .related,
body.catalog-product-view .upsell,
body.catalog-product-view .product-info-bottom {
    max-width: 1280px !important;
    margin: 64px auto 0 !important;
    padding: 0 clamp(16px, 3vw, 32px) !important;
}

/* =============================================================
 * 12. RESPONSIVE — stack at <1024
 * ============================================================= */
@media (max-width: 1023px) {
    body.catalog-product-view .grid:has(> #rvGalleryWrap) {
        grid-template-columns: 1fr !important;
        row-gap: 24px !important;
    }
    body.catalog-product-view .product-info-main {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.catalog-product-view #rvGalleryWrap {
        max-width: 100%;
    }
}
@media (max-width: 767px) {
    body.catalog-product-view .product-info-main {
        padding: 20px 16px !important;
    }
    body.catalog-product-view .product-info-main h1 {
        font-size: 22px !important;
    }
    body.catalog-product-view .product-info-main .price-box .special-price .price,
    body.catalog-product-view .product-info-main .price-box .price-wrapper .price {
        font-size: 24px !important;
    }
    body.catalog-product-view #gallery [role="tab"],
    body.catalog-product-view #gallery nav button {
        width: 64px !important;
        height: 64px !important;
    }
    body.catalog-product-view .product-info-main .box-tocart .actions {
        flex-direction: column;
    }
    body.catalog-product-view .product-info-main .action.tocart {
        width: 100% !important;
    }
}

/* =============================================================
 * 12b. SAFETY — any flex row inside the info column wraps so a
 *      long combination of (rating + badge + SKU) doesn't overflow
 *      and clip on the right edge. Same for the price block.
 * ============================================================= */
body.catalog-product-view .product-info-main .flex,
body.catalog-product-view .product-info-main [class*="flex-row"],
body.catalog-product-view .product-info-main .product-info-stock-sku,
body.catalog-product-view .product-info-main .product-reviews-summary,
body.catalog-product-view .product-info-main .price-box {
    flex-wrap: wrap !important;
}

/* =============================================================
 * 12c. CRITICAL — collapse over-wide descendant grids so the
 *      info column's intrinsic min-content stays under its
 *      35% grid track. The "Free Shipping / Cash on Delivery /
 *      7-Day Returns / Machine Made" row renders as Tailwind
 *      `lg:grid-cols-4` (4 fixed-min columns) which forces the
 *      info column to be ~577px wide regardless of viewport —
 *      exactly the bug the visual audit caught. Same trick for
 *      the pin-code "Check Delivery" form.
 *
 *      We override these grids to 2 columns at <1280px and to
 *      a stacked form on the pin-code input below 1024px.
 * ============================================================= */
body.catalog-product-view .product-info-main .grid {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Force any 3+ column descendant grid to 2 cols at <1280; cap
   1280–1439 at 3 cols max so cards don't get crushed. */
@media (max-width: 1279px) {
    body.catalog-product-view .product-info-main .grid[class*="grid-cols-3"],
    body.catalog-product-view .product-info-main .grid[class*="grid-cols-4"],
    body.catalog-product-view .product-info-main .grid[class*="md:grid-cols-3"],
    body.catalog-product-view .product-info-main .grid[class*="md:grid-cols-4"],
    body.catalog-product-view .product-info-main .grid[class*="lg:grid-cols-3"],
    body.catalog-product-view .product-info-main .grid[class*="lg:grid-cols-4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Pin-code "Check Delivery" form — input + button. Stack at
   narrow widths so the row never forces extra width. */
body.catalog-product-view .product-info-main form[class*="pin"],
body.catalog-product-view .product-info-main form[class*="delivery"],
body.catalog-product-view .product-info-main [class*="pin-code"],
body.catalog-product-view .product-info-main [class*="check-delivery"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
body.catalog-product-view .product-info-main form[class*="pin"] input,
body.catalog-product-view .product-info-main [class*="pin-code"] input,
body.catalog-product-view .product-info-main [class*="check-delivery"] input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* =============================================================
 * 12d. DEFENSIVE CLIP — the info column should NEVER allow its
 *      children to bleed past its own width. Combined with the
 *      grid-track honoring rules above, this guarantees no
 *      horizontal scroll at any viewport.
 *
 *      `overflow: hidden` here is SAFE because the column has
 *      no popouts/tooltips that exit the column — the lightbox
 *      lives in the gallery (left column), not here.
 * ============================================================= */
body.catalog-product-view .product-info-main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Ensure ANY descendant fits — last-resort safety net. */
body.catalog-product-view .product-info-main > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* =============================================================
 * 12e. MOBILE — make sure single-column stack actually engages
 *      below 1024px and content fits the 414px viewport without
 *      any horizontal scroll. The visual audit found the grid
 *      was rendering as 577px even at 414px because of the
 *      oversized child; the rules above remove that, but we
 *      also force the parent grid to a clean single track here.
 * ============================================================= */
@media (max-width: 1023px) {
    body.catalog-product-view .grid:has(> #rvGalleryWrap) {
        grid-template-columns: minmax(0, 1fr) !important;   /* hard 1-col, no intrinsic sizing */
        column-gap: 0 !important;
        row-gap: 24px !important;
    }
    body.catalog-product-view .product-info-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
@media (max-width: 767px) {
    /* Belt + braces: prevent any rogue child from pushing
       horizontal scroll on phones. */
    body.catalog-product-view {
        overflow-x: hidden;
    }
}

/* =============================================================
 * 13. MISC — kill Luma's blue focus + apply ink focus uniformly
 * ============================================================= */
body.catalog-product-view .product-info-main *:focus-visible {
    outline: 2px solid var(--rv-pdp-ink) !important;
    outline-offset: 2px !important;
}
body.catalog-product-view ::selection {
    background: rgba(29, 29, 31, 0.18);
}