/* Product page, and the same styles for its quick view (the colour chooser a listing's cart button opens, Carlos 26-oct):
   selectors use :is(#product, .quickview), which keeps the id's weight in both. */
/* One corner radius for the whole product page (Carlos 25-oct): the official --rtg-radius (roentgen-header.css; 14px,
   12px on phones), description photos included (their rule sits in @layer utilities below). Circles, pill steppers
   and the listing cards keep their own shapes. */
:is(#product, .quickview) .product__additional-info { margin-top: 12px; gap: 12px; }
/* Purchase facts as a list with hairline dividers between items, no box (Carlos 25-oct). The dividers (#e6edf0, the
   boxes' stroke) start at the text column. Rows: 13.5/20 text, 10px above and below (40px for one line), a 24px icon
   column with each icon centred on the first line. */
:is(#product, .quickview) .rtg-product-facts { display: grid; gap: 0; margin: 0; padding: 0; border: 0; }
:is(#product, .quickview) .rtg-product-fact,
:is(#product, .quickview) .rtg-product-lease { position: relative; margin: 0; padding: 10px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:is(#product, .quickview) :is(.rtg-product-fact, .rtg-product-lease) + :is(.rtg-product-fact, .rtg-product-lease)::before { content: ''; position: absolute; top: 0; right: 0; left: 36px; height: 1px; background: #e6edf0; }
:is(#product, .quickview) .rtg-product-fact,
:is(#product, .quickview) .rtg-product-lease summary { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: 12px; color: var(--rtg-800); font-size: 13.5px; font-weight: 600; line-height: 20px; }
:is(#product, .quickview) .rtg-product-fact__icon { width: 24px; color: var(--rtg-600); font: 900 18px/20px 'RTG Line Awesome'; text-align: center; }
:is(#product, .quickview) .rtg-product-fact__payment { display: inline-block; width: auto; height: 18px; margin-left: 10px; vertical-align: -4px; } /* the card logos follow the text on its line */
/* The PayPal 12 MSI banner is the row's only content: no lead-in margin, and it shrinks to the column (712:40 art,
   about 330px at 18px tall, wider than a phone's 322px column). */
:is(#product, .quickview) .rtg-product-fact__payment--banner { display: block; width: 100%; max-width: 320px; height: auto; margin: 1px 0 0; }
:is(#product, .quickview) .rtg-product-lease summary { grid-template-columns: 24px minmax(0, 1fr) 20px; cursor: pointer; list-style: none; }
:is(#product, .quickview) .rtg-product-lease summary::-webkit-details-marker { display: none; }
:is(#product, .quickview) .rtg-product-lease summary::after { content: '+'; color: var(--rtg-600); font-size: 20px; font-weight: 500; line-height: 20px; text-align: center; }
:is(#product, .quickview) .rtg-product-lease[open] summary::after { content: '−'; }
:is(#product, .quickview) .rtg-product-lease summary:focus-visible { outline: 2px solid var(--rtg-600); outline-offset: 4px; border-radius: 4px; }
:is(#product, .quickview) .rtg-product-lease__body { margin: 8px 0 0 36px; padding: 0 0 0 12px; border-left: 2px solid var(--rtg-200); color: var(--rtg-800); font-size: 13px; font-weight: 500; line-height: 20px; }
:is(#product, .quickview) .rtg-product-lease__body p { margin: 0 0 4px; }
:is(#product, .quickview) .rtg-product-lease__body a { color: var(--rtg-700); font-weight: 600; }
:is(#product, .quickview) .rtg-product-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; padding: 0 0 0 36px; border: 0; font-size: 13px; } /* on the facts' text column, wrapped buttons too */
:is(#product, .quickview) .rtg-product-downloads strong { margin-right: 2px; text-transform: uppercase; }
:is(#product, .quickview) .rtg-product-downloads strong::before { content: '\f019'; display: inline-block; width: 24px; margin: 0 12px 0 -36px; color: #626f73; font: 900 15px/1 'RTG Line Awesome'; text-align: center; } /* in the facts' icon column */
:is(#product, .quickview) .rtg-product-downloads a { padding: 7px 10px; border: 1px solid #b9d7dc; border-radius: var(--rtg-radius); color: #315a68; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
:is(#product, .quickview) .rtg-product-downloads a::before { content: '\f1c1'; margin-right: 6px; color: #366fe2; font: 900 12px/1 'RTG Line Awesome'; }
:is(#product, .quickview) .rtg-product-downloads a:hover, :is(#product, .quickview) .rtg-product-downloads a:focus-visible { border-color: #168fa3; background: #eef8fa; }
:is(#product, .quickview) .rtg-product-downloads a span { color: #72828a; font-weight: 400; }
:is(#product, .quickview) .product__bottom { display: block; }
:is(#product, .quickview) .product__bottom-left { width: 100%; max-width: none; }
:is(#product, .quickview) .product__bottom-right { display: none; }
:is(#product, .quickview) .product__description.rich-text img { max-width: 100%; height: auto; }

/* Product composition, using Hummingbird's gallery, price, variant and cart controls. */
:is(#product, .quickview) .product__container { align-items: start; margin-top: 40px; }

:is(#product, .quickview) .rtg-product-heading { position: relative; padding-right: 128px; margin-bottom: 20px; }
:is(#product, .quickview) .rtg-product-heading .product__name { grid-area: title; margin: 0; color: var(--rtg-900); /* palette 900 #1C505D, one step lighter than 950 (Carlos 25-oct) */ font-size: 33px; font-weight: 700; line-height: 1.2; }
:is(#product, .quickview) .rtg-product-heading .product__manufacturer { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 112px; min-height: 70px; margin: 0; border: 1px solid #edf0f1; border-radius: var(--rtg-radius); } /* the photos' corners (Carlos 25-oct) */
:is(#product, .quickview) .rtg-product-heading .product__manufacturer a { display: block; line-height: 0; }
:is(#product, .quickview) .rtg-product-heading .product__manufacturer img { display: block; width: 90px; height: auto; max-height: 50px; object-fit: contain; }

:is(#product, .quickview) .product__prices { margin: 0 0 6px; }
:is(#product, .quickview) .product__prices-block { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
:is(#product, .quickview) .product__prices-block > .product__prices-inline:not(.product__discount-price) { order: 1; width: auto; margin: 0; }
:is(#product, .quickview) .product__prices-block > .product__tax-infos { order: 2; width: auto; margin: 0; color: #777; font-size: 11px; }
/* On promotion the list price comes first, on its own line above the selling price (Carlos 25-oct). */
:is(#product, .quickview) .product__prices-block > .product__discount-price { order: 0; flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; margin: 0 0 2px; }
:is(#product, .quickview) .product__prices-block > .product__pack-price { order: 4; }
:is(#product, .quickview) .product__price { color: var(--rtg-950); font-size: 25px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; } /* palette 950, from the price-colour research */
:is(#product, .quickview) .product__regular-label { color: var(--rtg-price-was); font-size: 13px; }
:is(#product, .quickview) .product__regular-price { color: var(--rtg-price-was); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
:is(#product, .quickview) .product__tax-infos { color: #7a7a7a; font-size: 10.5px; white-space: nowrap; }
:is(#product, .quickview) .rtg-product-currency { color: #585858; font-weight: 600; }
:is(#product, .quickview) .rtg-product-currency-separator { margin: 0 3px; }
:is(#product, .quickview) :is(.product__discount-percentage, .product__discount-amount) { display: inline-flex; padding: 2px 9px; border-radius: calc(var(--rtg-radius) - 6px); background: var(--rtg-price-sale); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; }
:is(#product, .quickview) .product__description-short { margin: 0 0 18px; color: #747474; font-size: 14px; line-height: 1.5; }
:is(#product, .quickview) .product__description-short p { margin-bottom: 14px; }
:is(#product, .quickview) .product__description-short strong { color: #626262; }

/* Photo and thumbnails share the listing card's box (proposal E / the app's .r-card): 1px #e6edf0, 14px corners
   (12px on phones), faint shadow tinted with palette 900 (Carlos 25-oct). */
:is(#product, .quickview) .product__carousel { aspect-ratio: 1; overflow: hidden; border: 1px solid #e6edf0; border-radius: var(--rtg-radius); box-shadow: 0 1px 3px rgba(28, 80, 93, .06); }
:is(#product, .quickview) .product__carousel .carousel-inner,
:is(#product, .quickview) .product__carousel .carousel-item,
:is(#product, .quickview) .product__carousel .carousel-item picture { height: 100%; }
:is(#product, .quickview) .product__carousel .carousel-item img { width: 100%; height: 100%; object-fit: contain; }
:is(#product, .quickview) .product__zoom { right: auto; bottom: 14px; left: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px #1b2b3320; }
:is(#product, .quickview) .product__thumbnails { margin-top: 10px; }
:is(#product, .quickview) .product__thumbnails-list { display: flex; gap: 10px; width: calc(100% + 6px); margin: 0 -3px -4px; padding: 0 3px 4px; overflow-x: auto; scrollbar-width: none; } /* room for the thumbnails' shadow inside the scroller */
:is(#product, .quickview) .product__thumbnails-list::-webkit-scrollbar { display: none; }
:is(#product, .quickview) .product__thumbnail { flex: 0 0 calc((100% - 30px) / 4); width: calc((100% - 30px) / 4); aspect-ratio: 1; height: auto; margin: 0; padding: 0; overflow: hidden; border: 1px solid #e6edf0; border-radius: var(--rtg-radius); background: #fff; box-shadow: 0 1px 3px rgba(28, 80, 93, .06); transition: border-color .35s ease; }
:is(#product, .quickview) .product__thumbnail:hover { border-color: var(--rtg-200); }
:is(#product, .quickview) .product__thumbnail.active { border-color: var(--rtg-600); }
/* The theme marks the active thumbnail with a square blue outline on the image; the rounded border above replaces it. */
:is(#product, .quickview) .product__thumbnail img { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; outline: 0; object-fit: contain; }
:is(#product, .quickview) .product__thumbnail:focus-visible { outline: 2px solid var(--rtg-600); outline-offset: 2px; }
:is(#product, .quickview) .rtg-product-thumb-controls { display: none; }

:is(#product, .quickview) .product__variants { max-width: 390px; margin: 0 0 15px; }
:is(#product, .quickview) .product-variant { margin: 0; padding: 0; border: 0; }
@media (min-width: 1200px) {
  :is(#product, .quickview) .product__variants:has(> .product-variant + .product-variant) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: none; width: 100%; }
  :is(#product, .quickview) .product-variant { min-width: 0; }
  :is(#product, .quickview) .product-variant select, :is(#product, .quickview) .product-variant__colors { width: 100%; max-width: 100%; }
}
:is(#product, .quickview) .product-variant__label { display: flex; align-items: baseline; gap: 3px; min-height: 18px; margin: 0 0 4px; } /* the selected colour name makes a label 18px; the same floor keeps side-by-side boxes level */
:is(#product, .quickview) .product-variant__legend { margin: 0; color: #657c85; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
:is(#product, .quickview) .product-variant__selected { color: #168c9d; font-size: 12px; font-weight: 700; }
:is(#product, .quickview) .product-variant__colors { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 40px; padding: 5px 10px; border: 1px solid #e6edf0; border-radius: var(--rtg-radius); background: #fff; box-shadow: 0 1px 3px rgba(28, 80, 93, .06); } /* the listing card's stroke (Carlos 25-oct) */
:is(#product, .quickview) .product-variant__color { width: 22px; height: 22px; }
:is(#product, .quickview) .product-variant__color .input-color__label { display: block; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
:is(#product, .quickview) .product-variant__color .color { display: block; width: 22px; height: 22px; border: 2px solid #26323820; border-radius: 50%; background-size: cover; }
:is(#product, .quickview) .product-variant__color .input-color__input:checked + .input-color__label .color { border-color: #168c9d; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #168c9d; }
:is(#product, .quickview) .product__actions-qty-add { justify-content: flex-start; gap: 10px; }
/* Quantity: the listing card's stepper (proposal E, official radius; Carlos 25-oct): 36px buttons and a 64px field, 40px tall like
   «Añadir al carrito», palette-200 hairline, palette-900 signs and number. */
:is(#product, .quickview) .product__quantity { flex: 0 0 134px; width: 134px; }
:is(#product, .quickview) .product__quantity .quantity-button__group { display: flex; flex-wrap: nowrap; width: 134px; }
:is(#product, .quickview) .product__quantity .quantity-button__group > * { height: 40px; border-color: var(--rtg-200); }
:is(#product, .quickview) .product__quantity .quantity-button__group button { flex: 0 0 36px; width: 36px; min-width: 36px; padding: 0; background: #fff; color: var(--rtg-900); }
:is(#product, .quickview) .product__quantity .quantity-button__group button:first-child { border-radius: var(--rtg-radius) 0 0 var(--rtg-radius); }
:is(#product, .quickview) .product__quantity .quantity-button__group button:last-child { border-radius: 0 var(--rtg-radius) var(--rtg-radius) 0; }
:is(#product, .quickview) .product__quantity .quantity-button__group button .material-icons { color: inherit; font-size: 20px; }
:is(#product, .quickview) .product__quantity .quantity-button__group input { flex: 0 0 64px; width: 64px; min-width: 0; padding: 6px 2px; color: var(--rtg-900); font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
:is(#product, .quickview) .product__quantity .quantity-button__group > :focus-visible { z-index: 3; outline: 2px solid var(--rtg-600); outline-offset: 2px; }
:is(#product, .quickview) .product__add-to-cart { flex: 0 0 auto; }
/* The calculator button's shape (Carlos 25-oct): 12px corners, 40px, 14px semibold, here in palette 900. */
:is(#product, .quickview) .product__add-to-cart-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 178px; min-height: 40px; padding: 0 16px; border: 1px solid var(--rtg-cart-action); border-radius: var(--rtg-radius); background: var(--rtg-cart-action); color: var(--rtg-cart-action-ink); font-size: 14px; font-weight: 600; white-space: nowrap; text-transform: none; transition: background .15s, border-color .15s; }
:is(#product, .quickview) .product__add-to-cart-button:hover:not(:disabled) { border-color: var(--rtg-cart-action-hover); background: var(--rtg-cart-action-hover); color: var(--rtg-cart-action-ink); }
:is(#product, .quickview) .product__add-to-cart-button:focus-visible { outline: 2px solid var(--rtg-600); outline-offset: 2px; box-shadow: none; }
/* The listing card's cart glyph (Material Icons e854, 21px; Carlos 25-oct) in place of the theme's e547, drawn from CSS
   so Hummingbird's add-to-cart template stays stock. */
:is(#product, .quickview) .product__add-to-cart-button .material-icons { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; font-size: 0; }
:is(#product, .quickview) .product__add-to-cart-button .material-icons::before { content: '\e854'; font-size: 21px; line-height: 1; }

/* Shipping calculator in the clean style (Carlos 25-oct): the «Galería de instalaciones» box (white, 1px #e6edf0,
   14px corners, faint palette-900 shadow), a quiet palette-50 icon disc instead of the pulsing teal one, and 40px
   controls with 12px corners; «Calcular» in the official main green (palette 600). */
:is(#product, .quickview) .rtg-shipping-estimate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 12px 12px 12px 14px; border: 1px solid #e6edf0; border-radius: var(--rtg-radius); background: #fff; box-shadow: 0 1px 3px rgba(28, 80, 93, .06); }
:is(#product, .quickview) .rtg-shipping-estimate__intro { display: flex; flex: 1 1 282px; align-items: center; min-width: 0; gap: 12px; }
:is(#product, .quickview) .rtg-shipping-estimate__intro > span:first-child { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--rtg-600); background: var(--rtg-50); font-size: 16px; }
:is(#product, .quickview) .rtg-shipping-estimate__intro .rtg-shipping-estimate__icon { font-family: 'RTG Font Awesome 5 Free'; font-weight: 900; line-height: 1; }
/* The old pulse, redrawn for the light disc (Carlos 25-oct): a thin palette-600 ring that leaves the disc's edge and
   fades as it grows, every 2.6s; still for people who ask for reduced motion. */
:is(#product, .quickview) .rtg-shipping-estimate__intro > span:first-child { position: relative; }
:is(#product, .quickview) .rtg-shipping-estimate__icon::after { content: ''; position: absolute; inset: 0; border: 1.5px solid rgb(22 147 165 / 45%); border-radius: 50%; animation: rtg-shipping-pulse 2.6s cubic-bezier(.16, 1, .3, 1) infinite; pointer-events: none; }
@keyframes rtg-shipping-pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :is(#product, .quickview) .rtg-shipping-estimate__icon::after { animation: none; opacity: 0; } }
:is(#product, .quickview) .rtg-shipping-estimate__intro strong { display: block; color: var(--rtg-900); font-size: 15px; font-weight: 600; line-height: 20px; }
:is(#product, .quickview) .rtg-shipping-estimate__intro small { display: block; margin-top: 2px; color: #5b7178; font-size: 13px; font-weight: 400; line-height: 18px; }
:is(#product, .quickview) .rtg-shipping-estimate__controls { display: flex; flex: 0 1 auto; gap: 8px; margin: 0; }
:is(#product, .quickview) .rtg-shipping-estimate__controls input { flex: 0 0 150px; width: 150px; height: 40px; padding: 0 14px; border: 1px solid #d5dfe3; border-radius: var(--rtg-radius); background: #fff; color: var(--rtg-950); font-size: 14px; text-align: center; transition: border-color .15s, box-shadow .15s; }
:is(#product, .quickview) .rtg-shipping-estimate__controls input::placeholder { color: #8a9ba1; }
:is(#product, .quickview) .rtg-shipping-estimate__controls input:focus { outline: none; border-color: var(--rtg-600); box-shadow: 0 0 0 3px rgb(22 147 165 / 15%); }
:is(#product, .quickview) .rtg-shipping-estimate__controls button { height: 40px; padding: 0 20px; border: 0; border-radius: var(--rtg-radius); background: var(--rtg-600); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; } /* the official main green, palette 600 (Carlos 25-oct) */
:is(#product, .quickview) .rtg-shipping-estimate__controls button:hover { background: var(--rtg-700); }
:is(#product, .quickview) .rtg-shipping-estimate__controls button:focus-visible { outline: 2px solid var(--rtg-600); outline-offset: 2px; }
:is(#product, .quickview) .rtg-shipping-estimate__status, :is(#product, .quickview) .rtg-shipping-estimate__results { flex: 1 1 100%; margin: 0; }
:is(#product, .quickview) .rtg-shipping-estimate__status { color: #5b7178; font-size: 13px; line-height: 18px; }
:is(#product, .quickview) .rtg-shipping-estimate__status:empty, :is(#product, .quickview) .rtg-shipping-estimate__results:empty { display: none; }
/* Rates read as the facts list: hairline rows instead of white tiles inside the (now white) box. */
:is(#product, .quickview) .rtg-shipping-estimate__results { gap: 0; }
:is(#product, .quickview) .rtg-shipping-estimate__results li { padding: 10px 0; border-top: 1px solid #e6edf0; border-radius: 0; background: none; color: var(--rtg-800); font-size: 14px; line-height: 20px; }
:is(#product, .quickview) .rtg-shipping-estimate__results strong { color: var(--rtg-900); font-weight: 600; }
:is(#product, .quickview) .rtg-shipping-estimate__details small { color: #5b7178; }

/* Stock-based delivery date (deliverymessage module) as rows of the facts list instead of grey boxes (Carlos 25-oct):
   same 24px icon column, 13.5/20 text and hairline dividers. When the colour changes, its script still flags the rows;
   the flag is a palette-50 wash instead of the yellow ring. */
:is(#product, .quickview) #delivery-message-container .product-features-icons { margin: 0; }
:is(#product, .quickview) #delivery-message-container .feature-icon { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: 12px; margin: 0; padding: 10px 0; border-radius: 6px; background: none; color: var(--rtg-800); font-size: 13.5px; line-height: 20px; transition: background-color .3s ease, box-shadow .3s ease; }
:is(#product, .quickview) #delivery-message-container .feature-icon + .feature-icon::before { content: ''; position: absolute; top: 0; right: 0; left: 36px; height: 1px; background: #e6edf0; }
:is(#product, .quickview) #delivery-message-container .feature-icon strong { margin: 0; color: inherit; font-weight: 600; }
:is(#product, .quickview) #delivery-message-container .delivery-icon { display: block; width: 24px; margin: 0; color: var(--rtg-600); font: normal 900 18px/20px 'RTG Line Awesome'; text-align: center; }
:is(#product, .quickview) #delivery-message-container .delivery-highlight { background: var(--rtg-50); box-shadow: 0 0 0 6px var(--rtg-50); }
/* Dental units: cashback first, then the calculator, then the delivery rows joined to the facts as one list (Carlos 28-oct). */
:is(#product, .quickview) .rtg-additional--unit #loyalty { order: -2; }
/* Cashback and calculator read as one group: only the 12px flex gap between them (Carlos 28-oct). */
:is(#product, .quickview) .rtg-additional--unit #loyalty.rtg-cashback--product { margin-bottom: 0; }
:is(#product, .quickview) .rtg-additional--unit .rtg-shipping-estimate { order: -1; margin-bottom: 20px; } /* + the 12px flex gap = the 32px around the cashback */
:is(#product, .quickview) .rtg-additional--unit #delivery-message-container { margin-bottom: -12px; }
:is(#product, .quickview) .rtg-additional--unit #delivery-message-container ~ .rtg-product-facts > :first-child::before { content: ''; position: absolute; top: 0; right: 0; left: 36px; height: 1px; background: #e6edf0; }

/* PS8 pattern: one always-open description, with native details kept inside. */
/* The heading is drawn as the description's own .backSec boxes («VIDEO PROMOCIONAL»): #f9f9f9, 15px corners, title
   centred 23px/700 with 17px of air (their 7px padding + the h3's 10px margin), here on both sides (Carlos 25-oct). */
:is(#product, .quickview) .rtg-product-description__heading { margin: 10px 0 24px; padding: 17px 7px; border-radius: var(--rtg-radius); background: #f9f9f9; color: var(--rtg-800); font-size: 23px; font-weight: 700; line-height: 1.25; text-align: center; text-transform: uppercase; }
/* Same width as those boxes: they sit in a Bootstrap .row, which bleeds half a gutter past the text from 576px up. */
@media (min-width: 576px) { :is(#product, .quickview) .rtg-product-description__heading { margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5); } }
:is(#product, .quickview) .rtg-product-description__extra { margin-top: 24px; }

/* Keep the product content aligned with the header shell. */
@media (min-width: 768px) {
  :is(#product, .quickview) .columns-container.container {
    width: var(--rtg-shell-width);
    max-width: none;
    padding-inline: 0;
  }
  :is(#product, .quickview) .product__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  :is(#product, .quickview) .product__left,
  :is(#product, .quickview) .product__right { min-width: 0; }
}

@media (min-width: 1200px) {
  :is(#product, .quickview) .product__container {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); /* a wider photo: 45.8% instead of 5/7's 41.7% (Carlos 25-oct) */
    gap: 24px;
  }
}

@media (max-width: 1199px) {
  :is(#product, .quickview) .product__container { margin-top: 20px; }
  :is(#product, .quickview) .rtg-product-heading { padding-right: 106px; }
  :is(#product, .quickview) .rtg-product-heading .product__manufacturer { width: 90px; min-height: 58px; }
  :is(#product, .quickview) .rtg-product-heading .product__manufacturer img { width: 78px; }
}

@media (max-width: 767px) {
  :is(#product, .quickview) .columns-container.container { width: var(--rtg-shell-width); max-width: none; margin-inline: auto; padding-inline: 0; }
  :is(#product, .quickview) .product__container { margin-top: 10px; }
  :is(#product, .quickview) .rtg-product-heading { display: flex; flex-direction: column; gap: 14px; padding-right: 0; margin-bottom: 20px; }
  :is(#product, .quickview) .rtg-product-heading .product__manufacturer { position: static; display: block; order: -1; width: 90px; min-height: 0; border: 0; }
  :is(#product, .quickview) .rtg-product-heading .product__manufacturer img { width: 90px; }
  :is(#product, .quickview) .product__thumbnails-list { gap: 5px; }
  :is(#product, .quickview) .product__thumbnail { flex-basis: calc((100% - 15px) / 4); width: calc((100% - 15px) / 4); }
  :is(#product, .quickview) .rtg-product-thumb-controls { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  :is(#product, .quickview) .rtg-product-thumb-controls button { display: grid; place-items: center; width: 39px; height: 39px; padding: 0; border: 0; color: #888; background: #fafafa; cursor: pointer; }
  :is(#product, .quickview) .rtg-product-thumb-controls button::before { content: ''; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
  :is(#product, .quickview) .rtg-product-thumb-controls button:first-child::before { transform: rotate(-135deg); }
  :is(#product, .quickview) .rtg-product-thumb-controls button:focus-visible { outline: 2px solid #1693a5; outline-offset: 2px; }
  :is(#product, .quickview) .product__variants { max-width: none; }
  :is(#product, .quickview) .rtg-shipping-estimate__controls { flex: 1 1 100%; min-width: 0; width: 100%; }
  :is(#product, .quickview) .rtg-shipping-estimate__controls input { flex: 1 1 0; min-width: 0; width: auto; }
}

@media (max-width: 575px) {
  :is(#product, .quickview) .product__actions-qty-add { flex-wrap: wrap; }
  :is(#product, .quickview) .product__quantity { flex: 0 0 134px; width: 134px; }
  :is(#product, .quickview) .product__add-to-cart { flex: 1 1 auto; }
  :is(#product, .quickview) .product__add-to-cart-button { width: 100%; }
}

@media (max-width: 575px) {
  :is(#product, .quickview) .product__description.rich-text .row { margin-inline: 0 !important; }
  :is(#product, .quickview) .product__description.rich-text table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767px) {
  /* The original autoclave comparison reserves a third, empty column on mobile. */
  body#product:is(.product-id-2702, .product-id-6299) .product__description .row.align-items-end.text-center {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-inline: 0 !important;
  }
  body#product:is(.product-id-2702, .product-id-6299) .product__description .row.align-items-end.text-center > .col-4:first-child { display: none; }
  body#product:is(.product-id-2702, .product-id-6299) .product__description .row.align-items-end.text-center > .col-4 { width: auto; min-width: 0; padding: 0; }
  body#product:is(.product-id-2702, .product-id-6299) .product__description .row.align-items-end.text-center p {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word;
  }
}

@media (max-width: 991px) {
  /* Three legacy feature columns ("Incluye monitor PC todo en uno": 6330, 6331, 7373, 7377, 7382)
     become readable rows in the narrow description; their rem sizes overflowed on mobile. */
  body#product .product__description .row[style*="align-items: stretch"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-inline: 0 !important;
  }
  body#product .product__description .row[style*="align-items: stretch"] > .col-4.text-center {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 8px !important;
    text-align: left !important;
  }
  body#product .product__description .row[style*="align-items: stretch"] > .col-4.text-center img {
    max-width: 76px;
    height: auto;
  }
  body#product .product__description .row[style*="align-items: stretch"] > .col-4.text-center p {
    min-width: 0;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }
}

/* Compact discovery shelves; the catalogue card remains the shared component. */
/* Recommendation shelves: at most six cards, wrapping grid (6 / 3 / 2 columns), no carousel or paging. */
:is(#product, .quickview) .rtg-recommendations { min-width: 0; margin-top: 30px; }
/* A hairline between the end of the product (description, specs) and the suggestions, with air on both sides
   (Carlos 25-oct). */
:is(#product, .quickview) .product__bottom + .rtg-recommendations { margin-top: var(--rtg-section-gap); padding-top: var(--rtg-section-gap); border-top: 1px solid #e6edf0; }
@media (max-width: 767px) { :is(#product, .quickview) .product__bottom + .rtg-recommendations { margin-top: 40px; padding-top: 32px; } }
.rtg-recommendations__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
:is(#product, .quickview) .rtg-recommendations h2 { margin: 0; color: #28343b; font-size: clamp(17px, 1.35vw, 21px); font-weight: 650; line-height: 1.35; }
.rtg-recommendations__all { display: inline-flex; align-items: center; gap: 2px; padding: 6px 0; color: var(--rtg-700); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.rtg-recommendations__all:hover { color: var(--rtg-900); text-decoration: underline; }
.rtg-recommendations__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rtg-recommendations__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:is(#product, .quickview) .rtg-recommendations .product-miniature { width: 100%; min-width: 0; margin: 0; }
.rtg-recommendations :is(a, button):focus-visible { outline: 2px solid #1693a5; outline-offset: 2px; }
@media (min-width: 768px) { .rtg-recommendations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rtg-recommendations__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { :is(#product, .quickview) .rtg-recommendations .product-miniature { transition: none; } }

/* Postcode and button stack on phones, as in production; side by side the placeholder clips at 320. */
@media (max-width: 576px) {
  :is(#product, .quickview) .rtg-shipping-estimate__controls { flex-wrap: wrap; }
  :is(#product, .quickview) .rtg-shipping-estimate__controls :is(input, button) { flex: 1 1 100%; }
}

/* Color guide: installation gallery button and its modal (production parity). */
:is(#product, .quickview) .product-variant--gallery .product-variant__legend { color: #1693a5; }
:is(#product, .quickview) .rtg-real-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; margin: 0; padding: 0 14px; border: 1px solid #e6edf0; border-radius: var(--rtg-radius); background: #fff; box-shadow: 0 1px 3px rgba(28, 80, 93, .06); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; } /* the listing card's stroke (Carlos 25-oct) */
:is(#product, .quickview) .rtg-real-btn:hover, :is(#product, .quickview) .rtg-real-btn:focus-visible { border-color: #1693a5; box-shadow: 0 2px 10px rgb(22 147 165 / 15%); }
:is(#product, .quickview) .rtg-real-btn__icon { display: flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #1693a5; color: #fff; font: 900 12px/1 'RTG Line Awesome'; }
:is(#product, .quickview) .rtg-real-btn__icon::before { content: '\f030'; }
:is(#product, .quickview) .rtg-real-btn__text { overflow: hidden; color: #1693a5; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:is(#product, .quickview) .rtg-real-btn__arrow { flex: 0 0 9px; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid #1693a5; border-bottom: 2px solid #1693a5; transform: rotate(-45deg); }
/* The modal is created in document.body, outside #product. */
.ipm-ovl { position: fixed; inset: 0; z-index: 1000001; display: none; align-items: center; justify-content: center; padding: 2dvh 2vw; background: rgb(20 30 34 / 72%); }
.ipm-box { position: relative; width: min(800px, 96vw); height: min(800px, 92dvh); overflow: hidden; border-radius: var(--rtg-radius); background: #fff; box-shadow: 0 12px 48px rgb(0 0 0 / 35%); }
.ipm-x { position: absolute; top: 8px; right: 10px; z-index: 3; width: 44px; height: 44px; border: 1px solid #e2e8ea; border-radius: 50%; background: #fff; color: #243238; font-size: 20px; line-height: 1; cursor: pointer; }
.ipm-spin { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: #fff; }
.ipm-spin span { width: 44px; height: 44px; border: 4px solid #d8e6e9; border-top-color: #1693a5; border-radius: 50%; animation: ipmspin .8s linear infinite; }
@keyframes ipmspin { to { transform: rotate(360deg); } }
.ipm-ifr { display: block; width: 100%; height: 100%; border: 0; }

/* Legacy Akira description markup (its rem was 10px, so sizes are written in px). */
:is(#product, .quickview) .product__description { color: #7a7a7a; font-size: 14px; line-height: 1.5; }
:is(#product, .quickview) .product__description p { margin: 0 0 15px; }
:is(#product, .quickview) .product__description h2 { margin-bottom: 5px !important; color: #1d5f6d; font-size: 20px; font-weight: 700; line-height: 1.25; }
:is(#product, .quickview) .product__description h4 { margin: 0 0 20px; color: #1d5f6d; font-size: 16px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
:is(#product, .quickview) .product__description .backSec { padding: 7px; border-radius: var(--rtg-radius); background: #f9f9f9; color: #1d5f6d; font-size: 25px; font-weight: 700; text-align: center; }
:is(#product, .quickview) .product__description .backSec h3 { margin: 10px 0 0 !important; color: #1d5f6d; font-size: 23px; font-weight: 700; line-height: 1.25; text-align: center; text-transform: none; }
:is(#product, .quickview) .product__description .backSec p { margin: 0 0 15px; font-size: 22px; font-weight: 300; line-height: 1.5; }
/* Hummingbird utilities live in @layer utilities with !important; only the same layer can override them. */
@layer utilities {
  :is(#product, .quickview) .product__description .mt-1 { margin-top: 16px !important; }
  :is(#product, .quickview) .product__description .mt-2 { margin-top: 24px !important; }
  :is(#product, .quickview) .product__description .mt-3 { margin-top: 48px !important; }
  :is(#product, .quickview) .product__description .mb-1 { margin-bottom: 16px !important; }
  :is(#product, .quickview) .product__description .mb-2 { margin-bottom: 24px !important; }
  :is(#product, .quickview) .product__description .mb-3 { margin-bottom: 48px !important; }
  :is(#product, .quickview) .product__description .rounded-4 { border-radius: var(--rtg-radius) !important; } /* the official radius, not Akira's 20px */
  /* Akira never defined .mt-4, so production renders it as 0. */
  :is(#product, .quickview) .product__description .mt-4 { margin-top: 0 !important; }
}
:is(#product, .quickview) .product__description .videoWrapper { display: flex; justify-content: center; align-items: center; width: 80%; margin-inline: auto; }
:is(#product, .quickview) .product__description .videoWrapper video { width: 100%; height: auto; }
@media (max-width: 1199px) { :is(#product, .quickview) .product__description .videoWrapper { width: 100%; } }
/* Specification tables (Akira table-bordered/table-striped). */
:is(#product, .quickview) .product__description table { margin-bottom: 15px; color: inherit; border-collapse: collapse; }
:is(#product, .quickview) .product__description :is(th, td) { padding: 12px; border: 1px solid #e6e6e6; background: transparent; color: inherit; }
/* Legacy "Descargas" block inside descriptions (banner-style / fichapro / btn-success). */
:is(#product, .quickview) .product__description .banner-style .nopadding { padding: 5px !important; }
:is(#product, .quickview) .product__description .fichapro { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; }
:is(#product, .quickview) .product__description .fichapro span { font-size: 30px; font-weight: 700; }
:is(#product, .quickview) .product__description .banner-style .btn { align-items: center; min-height: 42px; margin-top: 20px; padding: 0 20px 0 10px; border-radius: var(--rtg-radius); font-size: 13px; line-height: 20px; text-transform: uppercase; }
:is(#product, .quickview) .product__description .btn-success { border-color: #4cbb6c; background: #4cbb6c; color: #fff; }
:is(#product, .quickview) .product__description .btn-success:is(:hover, :focus-visible) { border-color: #3a9a56; background: #3a9a56; }

/* Package selects carry "— Incluido / — +$N MXN" after the model; a smaller face keeps it inside the field. */
:is(#product, .quickview) .js-product-variants[data-rtg-combinations] .form-select { font-size: 14px; }
@media (max-width: 359px) { :is(#product, .quickview) .js-product-variants[data-rtg-combinations] .form-select { font-size: 13px; } }

/* Quick view only: its title outside the product heading, no maker link (the page shows the logo), the footer link and
   the dialog in the palette with the official radius. */
.quickview .quickview__content { border: 0; border-radius: calc(var(--rtg-radius) + 4px); }
.quickview .product__name { margin: 0 0 10px; color: var(--rtg-900); font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.quickview .product__manufacturer { display: none; }
.quickview .quickview__details-link { display: inline-flex; align-items: center; gap: 2px; color: var(--rtg-700); font-weight: 600; text-decoration: none; }
.quickview .quickview__details-link:hover { color: var(--rtg-900); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  /* On phones the colour chooser comes right after the photo: no thumbnails or summary in between. */
  .quickview :is(.product__thumbnails, .product__description-short) { display: none; }
}

/* Product status stays in the details column, never over the gallery. */
:is(#product, .quickview) .rtg-product-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
:is(#product, .quickview) .rtg-product-status:not(:has(li)) { display: none; }
:is(#product, .quickview) .rtg-product-status__item { padding: 4px 10px; border-radius: calc(var(--rtg-radius) - 6px); background: var(--rtg-50); color: var(--rtg-900); font-size: 12px; font-weight: 600; line-height: 1.4; }
:is(#product, .quickview) .rtg-product-status__item--out_of_stock { background: #fce8e8; color: #a52626; }