/*
 * RahkarTheme PrestaShop port — product page PS bridge sheet (Phase 5).
 *
 * NET-NEW (not in the WP source) — exactly the handful of rules needed to make
 * PrestaShop-specific markup sit inside the ported `rh-*` design without
 * touching `product-single.css` (which stays a byte-for-byte verbatim copy).
 * Scope: hide the real PS combination radios behind the swatch labels, lay out
 * the PS quantity selector + add CTA, colour the PS flag pills, and present the
 * accessories rail. Keyed off the same `--rh-pd-*` / `--wp--preset--*` tokens.
 */

/* ── Colour swatch showing the combination's product photo ───────────────────
 *  When a colour has an image (.rh-swatch--img label, set by product-variants.tpl),
 *  drop the pill chrome and present a clean vertical chip: a LARGE photo with the
 *  colour name beneath it. No border-in-border — only the photo carries a hairline,
 *  and the selected state rings the photo (not the pill). */
.rh-swatch.rh-swatch--img {
  flex-direction: column;
  gap: 7px;
  height: auto;
  min-width: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
}
.rh-swatch.rh-swatch--img:hover:not(.is-selected) { border-color: transparent; }
.rh-swatch.rh-swatch--img.is-selected {
  border: 0;
  box-shadow: none;
  color: var(--rh-pd-primary);
}
.rh-swatch__dot--img {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: box-shadow 120ms ease;
}
/* Smaller (but still legible) on mobile so a row of colours fits the screen. */
@media (max-width: 900px) {
  .rh-swatch__dot--img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }
}
.rh-swatch.rh-swatch--img.is-selected .rh-swatch__dot--img {
  box-shadow: 0 0 0 2px var(--rh-pd-primary);
}
/* Caption row under the photo: tiny colour dot + name. */
.rh-swatch__cap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rh-swatch__mini {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rh-swatch-color, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
}
.rh-swatch--img .rh-swatch__name {
  font-size: 12px;
  font-weight: var(--rh-fw-base);
  line-height: 1.4;
  color: var(--rh-pd-fg);
}
.rh-swatch.rh-swatch--img.is-selected .rh-swatch__name { color: var(--rh-pd-primary); }

/* ── Combination-switch loading state ──────────────────────────────────────
 *  Toggled by rh-product.js (.rh-prd-loading on the product root) between PS's
 *  `updateProduct` and `updatedProduct` events. A soft veil + spinner over the
 *  gallery (the part that visibly changes) and a gentle dim on the price /
 *  add-to-cart, so the shopper sees the page is updating — calm, no layout shift. */
/* Per the UX review: the combination-switch loading shows ON the swatch the
   shopper just tapped (localized "applying your choice") — NOT as a veil over
   the hero image (jarring, and the image changes anyway) and NOT on the
   add-to-cart button (its loading state must mean "adding to cart", or it
   confuses the buyer at the conversion moment). The hero image simply swaps. */
.rh-swatch.is-loading,
.rh-variations__select.is-loading { cursor: progress; pointer-events: none; }
.rh-swatch.is-loading > * { opacity: 0.3; }
.rh-swatch.is-loading::after {
  content: "";
  position: absolute;
  /* inset:0 + margin:auto centres a fixed-size box in BOTH directions and is
   * RTL-safe (the old top/inset-inline-start + physical margin mis-centred in
   * RTL — the arc sat to one side). */
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(15, 17, 21, 0.18);
  border-top-color: var(--rh-pd-primary);
  animation: rh-prd-spin 0.6s linear infinite;
  z-index: 2;
}
/* Image swatch is a vertical chip (76px photo on top, caption below) — centre
 * the spinner ON THE PHOTO, not the full box (which would drop it onto the
 * caption). Horizontal centre is RTL-safe via inset-inline:0 + margin:auto. */
.rh-swatch.rh-swatch--img.is-loading::after {
  inset: calc(4px + 38px) 0 auto 0;  /* 4px swatch padding + half of the 76px photo */
  width: 22px;
  height: 22px;
  margin: -11px auto 0;              /* pull up half the spinner → centred on photo */
}
@media (max-width: 900px) {
  /* photo is 56px on mobile → centre = 4px padding + 28px */
  .rh-swatch.rh-swatch--img.is-loading::after {
    inset-block-start: calc(4px + 28px);
  }
}
.rh-variations__select.is-loading { opacity: 0.6; }
@keyframes rh-prd-spin { to { transform: rotate(360deg); } }
/* The price genuinely changes per combination → a gentle dim signals the update.
   The add-to-cart is only made inert (no visual loading cue) so it can't submit
   a half-resolved combination mid-swap. */
.rh-prd-loading .js-product-prices,
.rh-prd-loading [data-price-mirror] {
  opacity: 0.5;
  transition: opacity 160ms ease;
}
.rh-prd-loading .product-add-to-cart { pointer-events: none; }

/* Unavailable / sold-out swatches (rh-product.js adds these classes and, for
 * `is-unavailable` only, disables the radio). product-single.css already mutes
 * the name/dot; dim the combination PHOTO too so image-swatches read as
 * unavailable, and mark the truly-impossible ones not-allowed. */
.rh-swatch.is-unavailable { cursor: not-allowed; }
.rh-swatch.is-unavailable .rh-swatch__dot--img,
.rh-swatch.is-sold-out .rh-swatch__dot--img { opacity: 0.4; filter: grayscale(0.6); }

/* ── Wishlist heart colour ──────────────────────────────────────────────────
 *  Neutral outline by default; RED once the product is in a wishlist.
 *  blockwishlist only swaps the icon glyph (favorite ↔ favorite_border) with no
 *  state class, so rh-product.js toggles `.is-wished` from the filled glyph. */
.wishlist-button .wishlist-button-add { color: var(--rh-pd-fg, #1a1d23); transition: color 120ms ease; }
.wishlist-button .wishlist-button-add:hover { color: #e3342f; }
.wishlist-button.is-wished .wishlist-button-add { color: #e3342f; }
.wishlist-button-add .material-icons { font-size: 22px; line-height: 1; }

/* Our own product-page heart (.rh-wishlist, blockwishlist override). Outline by
 * default; RED + filled when the product is in the wishlist (rh-product.js
 * toggles .is-wished after a successful direct add). */
.rh-wishlist { position: relative; color: var(--rh-pd-fg, #1a1d23); transition: color 120ms ease; }
.rh-wishlist:hover { color: #e3342f; }
.rh-wishlist.is-wished { color: #e3342f; }
.rh-wishlist__icon { display: block; }
.rh-wishlist.is-wished .rh-wishlist__icon { fill: currentColor; }
/* Loading: hide the heart, show a spinner while the add/remove request runs. */
.rh-wishlist.is-loading { cursor: progress; }
.rh-wishlist.is-loading .rh-wishlist__icon { opacity: 0; }
.rh-wishlist.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(15, 17, 21, 0.2);
  border-top-color: var(--rh-pd-primary, #0a66c2);
  border-radius: 50%;
  animation: rh-prd-spin 0.7s linear infinite;
}

/* ── Knowband size-chart (sizechart module) ─────────────────────────────────
 *  Trigger shown as a plain TEXT link (rh-product.js relocates it under the
 *  variants), plus a cleaner fancybox popup + chart table keyed off our tokens.
 *  Higher-specificity selectors (+ a few !important) beat the module's front.css. */
/* Scoped under .product-actions (where rh-product.js relocates the link) so it
   beats the module's front.css regardless of load order. Plain right-aligned
   TEXT link in our primary colour + a trailing chevron (matches the reference). */
.product-actions .kbchart_link_display {
  margin: 0 0 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  text-align: right;       /* راستچین */
  width: auto;
  padding: 0 !important;
  /* Hidden on first paint until rh-product.js relocates it under the variants
     (it renders in a default position first). display:none — NOT visibility —
     so it reserves no space and nothing around it shifts; JS adds .rh-sc-placed
     to reveal it already in its final spot, killing the load + combination-swap
     "jump". */
  display: none;
}
.product-actions .kbchart_link_display.rh-sc-placed { display: block; }
.product-actions .kbchart_link_display p { margin: 0 !important; padding: 0 !important; }
.product-actions .kbchart_link_display #kbchart_preview_link,
.product-actions .kbchart_link_display .kbchart_link {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  color: var(--rh-pd-primary, #0a66c2) !important;
  font-weight: var(--rh-fw-strong);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.product-actions .kbchart_link_display #kbchart_preview_link:hover,
.product-actions .kbchart_link_display .kbchart_link:hover { text-decoration: none; }

/* fancybox popup shell */
.fancybox-skin { border-radius: 14px !important; box-shadow: 0 24px 70px rgba(15, 17, 21, 0.28) !important; }
.fancybox-inner { border-radius: 14px; }
.fancybox-inner .bootstrap { padding: 18px !important; }
/* chart table */
.fancybox-inner .chart-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.fancybox-inner .chart-table thead td { background: var(--rh-pd-primary, #0a66c2); color: #fff; font-weight: var(--rh-fw-strong); padding: 10px 12px; border: 0; }
.fancybox-inner .chart-table td { padding: 9px 12px; border: 1px solid var(--rh-pd-border, #e2e4e9); text-align: center; }
.fancybox-inner .chart-table tbody tr:nth-child(odd) td { background: var(--rh-pd-surface, #f7f7f8); }
.fancybox-inner .chart-table .vss-td-hovered { background: var(--rh-pd-primary, #0a66c2) !important; color: #fff; }
.fancybox-inner .chart-table .vss-td-hovered-neighbour { background: rgba(109, 189, 186, 0.12) !important; }

/* Current price always in the theme foreground (near-black), even on sale —
 * overrides the classic theme.css `.current-price-value` orange sale colour. */
.rh-product__price-current,
.rh-product__price-current .current-price-value,
.rh-product__price-current .current-price-value *,
.rh-product__price-current .woocommerce-Price-amount,
.rh-product__price-current bdi {
  color: var(--rh-pd-fg, #1a1d23) !important;
}

/* The classic base theme.css ships `.product-actions .add-to-cart { height:2.75rem;
 * padding-top:0.625rem }`. Now that our form is wrapped in `.product-actions`, that
 * top padding pushes the button's label off-centre. Override it (higher specificity
 * via the extra `.add-to-cart` class) so the label stays vertically centred. */
.product-actions .rh-product__add-btn.add-to-cart {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
}

/* Spacing between variant groups (colour group → size group, …). Loads after
 * the classic theme.css (priority 66 > 50) so it overrides it without editing
 * that verbatim base file. */
.product-variants > .product-variants-item {
  margin: 1.25rem 0 0;
}

/* ── Variation swatches: the real PS radio sits invisibly inside the label ── */
.rh-swatch input[type="radio"],
.rh-swatch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
/* Instant feedback before the AJAX round-trip re-renders `is-selected`. */
.rh-swatch:has(input:checked) {
  border-color: var(--rh-pd-primary);
  color: var(--rh-pd-primary);
  box-shadow: inset 0 0 0 0.5px var(--rh-pd-primary);
}
.rh-variations__select { width: 100%; max-width: 320px; }

/* ── Quantity selector + add-to-cart CTA layout ─────────────────────────────
 * The verbatim WP cart-bar expects `.rh-product__price` + `.rh-product__cart`
 * as DIRECT flex children. PS splits price (product-prices) and cart
 * (product-add-to-cart) into separate AJAX-swapped partials, so we dissolve the
 * product-add-to-cart box with display:contents — its children (qty-select,
 * .rh-product__cart, #product-availability, .product-minimal-quantity) then
 * flow straight into the cart-bar, giving the WP layout on both axes. */
.product-add-to-cart { display: contents; }
.rh-product__qty-select {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rh-product__qty-label { font-size: 13px; font-weight: var(--rh-fw-strong); }
.rh-product__qty-select .qty { display: inline-flex; }
.rh-product__qty-select #quantity_wanted {
  width: 64px;
  height: 40px;
  text-align: center;
  font: inherit;
  color: inherit;
  border: 1px solid var(--rh-pd-border);
  border-radius: 8px;
  background: var(--rh-pd-bg);
}
.rh-product__cart, .rh-product__cart .add { width: 100%; }
.rh-product__cart .add .rh-product__add-btn { width: 100%; }
#product-availability.rh-product__stock { display: block; margin-top: 4px; }
.product-minimal-quantity { font-size: 12px; color: var(--rh-pd-muted); margin: 4px 0 0; }
.product-minimal-quantity:empty { display: none; }

/* ── In-cart quantity stepper (qty-stepper.tpl) ─────────────────────────────
 * Base appearance, layout-agnostic; product-split.css wires it into the buy-box
 * row + mobile bar. Hidden until product-qtystep.js reveals it for a product/
 * combination that is already in the cart. `direction:ltr` pins the visual order
 * to  + | n | −/trash  regardless of the page's RTL flow. */
.rh-qtystep {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: var(--wp--custom--button--h--lg, 52px);
  padding: 0 4px;
  border: 1px solid var(--rh-pd-border);
  border-radius: 12px;
  background: var(--rh-pd-bg);
  color: var(--rh-pd-fg);
}
.rh-qtystep[hidden] { display: none; }
.rh-qtystep__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rh-qtystep__btn:hover { background: rgba(15, 17, 21, 0.06); }
.rh-qtystep__btn:active { background: rgba(15, 17, 21, 0.12); }
.rh-qtystep__val {
  flex: 1 1 auto;
  min-width: 28px;
  text-align: center;
  font-weight: var(--rh-fw-strong);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* Decrement glyph: trash at quantity 1 (.is-min), minus at 2+. */
.rh-qtystep .rh-qtystep__icon-minus { display: none; }
.rh-qtystep .rh-qtystep__icon-trash { display: inline-flex; }
.rh-qtystep:not(.is-min) .rh-qtystep__icon-trash { display: none; }
.rh-qtystep:not(.is-min) .rh-qtystep__icon-minus { display: inline-flex; }
/* A cart write is in flight — freeze the stepper so taps can't race. */
[data-qtystep-host].is-busy .rh-qtystep { pointer-events: none; opacity: 0.55; }

/* On mobile the cart-bar is a fixed bottom strip (verbatim CSS) sized for just
 * price + add button. Keep the qty selector / availability / min-qty out of that
 * tight strip — qty defaults to 1 (still submitted), stock shows on desktop.
 * (Mobile stock-indicator placement is a documented Phase-5 polish item.) */
@media (max-width: 900px) {
  .rh-product__cart-bar > .rh-product__qty-select,
  .rh-product__cart-bar > #product-availability,
  .rh-product__cart-bar > .product-minimal-quantity { display: none; }
}

/* ── Flag pills over the gallery ────────────────────────────────────────── */
.rh-product__col--gallery { position: relative; }
.rh-product__flags {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-product__flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--rh-fw-strong);
  line-height: 1.6;
  color: #fff;
  background: var(--rh-pd-primary);
  width: fit-content;
}
.rh-product__flag.discount,
.rh-product__flag.on-sale { background: #e3342f; }
.rh-product__flag.new { background: #1a8745; }
.rh-product__flag.out_of_stock { background: var(--rh-pd-muted); }

/* ── Reassurance block (PS displayReassurance hook) ─────────────────────── */
.rh-product__reassurance { margin-top: 16px; }
.rh-product__reassurance:empty { display: none; }

/* product-details.tpl keeps its bootstrap `tab-pane fade` classes (kept so the
 * `#product-details` node + its `data-product` payload survive for core.js).
 * Outside a real tab context bootstrap would `display:none` / `opacity:0` it, so
 * force it visible inside our always-open attrs section. */
.rh-section .js-product-details.tab-pane { display: block; opacity: 1; }

/* ── Section subtitle + product-details data sheet inside the attrs box ─── */
.rh-section__subtitle { font-size: 14px; font-weight: var(--rh-fw-strong); margin: 16px 0 8px; }
.rh-section__body .data-sheet { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.rh-section__body .data-sheet .name { font-weight: var(--rh-fw-strong); color: var(--rh-pd-muted); }
.rh-section__body .product-manufacturer,
.rh-section__body .product-reference,
.rh-section__body .product-condition { margin-bottom: 10px; font-size: 14px; }

/* ── Accessories rail ("کالاهای مشابه") ─────────────────────────────────── */
.rh-rail { margin: 0; }
.rh-rail__title { font-size: 18px; font-weight: var(--rh-fw-strong); margin: 0 0 14px; }
.rh-rail__track {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rh-rail__track::-webkit-scrollbar { height: 6px; }
.rh-rail__track > .rpc-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .rh-rail__track > .rpc-card { width: 150px; }
}

/* =============================================================================
 * GALLERY MODE 3 — «ستونی»: refinements on the side rail the split layout
 * already has.
 *
 * IMPORTANT, because it cost a round of guessing: the vertical rail is NOT new.
 * `product-split.css` has built it since before this mode existed — a 72px rail
 * absolutely pinned to the viewport's height, with `.rh-psplit .rh-gallery`
 * carrying `padding-inline-start: 84px` (72 rail + 12 gap) to make room for it.
 * That sheet is loaded from rahkarchrome.php (registerStylesheet), NOT from
 * theme.yml, which is why grepping theme.yml made it look dead.
 *
 * So this mode does NOT re-lay-out the gallery. An earlier attempt made
 * `.rh-gallery` a grid and put the rail in a column — which left the sheet's
 * 84px padding reserving space for a rail that had moved, i.e. the empty band
 * down the right-hand side. Nothing here touches the geometry any more; it only
 * changes the CONTROLS, which is what was actually asked for:
 *
 *   • the two chevrons come back as one bordered box UNDER the rail, and page
 *     through the PICTURES (see isColumnsMode/stepImage in rh-product.js);
 *   • the scroll chevron and the «گالری تصاویر» tile go — the arrow box does
 *     their job and the reference has neither;
 *   • the flag pills move off the rail onto the photo's far corner;
 *   • the zoom button follows them.
 *
 * Colours are the page's own --rh-pd-* tokens throughout.
 * ========================================================================== */
@media (min-width: 901px) {
  /* The rail is a plain BLOCK, not a grid.
   *
   * It was a grid, and the list was capped with `max-height: calc(100% - 38px)`
   * — but inside a grid that percentage resolves against the ROW, and the row
   * is sized from the very item being measured. The circular reference
   * collapsed the cap to roughly two and a half tiles no matter how much room
   * the rail actually had.
   *
   * As a block the wrap has a definite height (it is absolutely positioned with
   * inset-block: 0, so it is exactly as tall as the photo), so `100%` on the
   * list means what it says. The list then takes its NATURAL height while the
   * thumbs fit — the arrow box following directly underneath — and only starts
   * scrolling once they would run past the photo, at which point the box lands
   * at the bottom because there is nowhere else left.
   *
   * The two buttons are inline-flex, so they sit side by side on the line after
   * the (block-level) list with no wrapper element. `font-size: 0` on the wrap
   * kills the whitespace gap between those two inline boxes; the tiles carry
   * images, and the one tile with text is hidden in this mode. */
  /* WHY flex-wrap and not a block or a grid — both were tried.
   *
   * The markup is  prev button → thumb list → next button  (that order suits
   * the horizontal rail the other modes use). As a plain block that put one
   * chevron ABOVE the thumbs and one BELOW them. As a grid, the list's
   * `max-height: 100% - box` resolved against its own grid ROW — a circular
   * reference that collapsed the rail to about two and a half tiles.
   *
   * A wrapping flex ROW solves both at once:
   *   • `order` puts the list first and the two buttons after it, without
   *     touching markup that the other gallery modes share;
   *   • the list is `flex-basis: 100%`, so it takes a line of its own and the
   *     two 36px buttons wrap onto the next line SIDE BY SIDE;
   *   • percentages on a flex item resolve against the FLEX CONTAINER, whose
   *     height is definite here (the wrap is absolutely positioned with
   *     inset-block: 0, i.e. exactly as tall as the photo) — so the cap means
   *     what it says;
   *   • `align-content: flex-start` packs the lines at the top, so the button
   *     row follows the last thumb while the thumbs fit, and only sinks to the
   *     bottom once they fill the rail and it starts scrolling. */
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-wrap {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    padding-block-end: 0;
  }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs {
    order: 1;
    flex: 0 1 100%;
    display: flex;
    height: auto;
    min-height: 0;
    max-height: calc(100% - 46px);
    padding-block: 0;
    margin-block-end: 8px;
  }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav--prev { order: 2; }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav--next { order: 3; }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumb {
    width: 72px;
    height: auto;
    aspect-ratio: var(--rh-product-ratio, 0.8);
    border: 1px solid var(--rh-pd-border);
    border-radius: var(--wp--custom--radius--sm, 0.25rem);
    overflow: hidden;
  }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumb.is-active { border-color: var(--rh-pd-fg); }

  /* Neither belongs here: the arrows below replace the scroll chevron, and the
     lightbox is reachable from the loupe over the photo. */
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-scroll { display: none !important; }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumb--all { display: none !important; }

  /* The arrow box: two halves of one bordered rectangle under the rail.
     `display: flex !important` overrides product-split.css's
     `.rh-gallery__thumbs-nav { display: none !important }`, which is correct
     for its own layout (horizontal paging is meaningless in a vertical rail) —
     here they mean something different. */
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav {
    display: inline-flex !important;
    position: static;
    vertical-align: top;
    transform: none;
    width: 36px;
    height: 38px;
    border: 1px solid var(--rh-pd-border);
    border-radius: var(--wp--custom--radius--sm, 0.25rem);
    background: var(--rh-pd-bg);
    box-shadow: none;
    color: var(--rh-pd-fg);
    z-index: 4;
  }
  /* prev = up, next = down: the chevrons are drawn pointing sideways, so each
     gets a quarter turn rather than a second icon. */
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav--prev { border-inline-end: 0; }
  /* Both chevrons are drawn horizontally, so each needs a quarter turn — and
     they need DIFFERENT turns. `prev` points inline-forward and `next` points
     inline-back, so rotating both the same way lands them both pointing UP,
     which is what was on screen. Turn each toward its own direction instead. */
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav--prev svg { transform: rotate(-90deg); }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav--next svg { transform: rotate(-90deg); }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav:hover:not([disabled]) { background: var(--rh-pd-surface); }
  body.rh-pdp-columns .rh-psplit .rh-gallery__thumbs-nav[disabled] { opacity: 0.32; cursor: default; }

  /* FLAGS. They are absolutely positioned against .rh-psplit__media-sticky and
     product-split.css nudges them past the rail on the inline START. Put them
     on the photo's FAR corner instead — where the reference puts its pill, and
     where they cannot collide with the rail whatever its width. */
  body.rh-pdp-columns .rh-psplit .rh-product__flags {
    inset-block-start: 16px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 16px !important;
    align-items: flex-end;
  }

  /* The zoom button sits over the photo, not over the rail. */
  body.rh-pdp-columns .rh-psplit .rh-gallery__expand {
    inset-inline-start: auto;
    inset-inline-end: 14px;
  }
}

 * RahkarTheme PrestaShop port — product page PS bridge sheet (Phase 5).
 *
 * NET-NEW (not in the WP source) — exactly the handful of rules needed to make
 * PrestaShop-specific markup sit inside the ported `rh-*` design without
 * touching `product-single.css` (which stays a byte-for-byte verbatim copy).
 * Scope: hide the real PS combination radios behind the swatch labels, lay out
 * the PS quantity selector + add CTA, colour the PS flag pills, and present the
 * accessories rail. Keyed off the same `--rh-pd-*` / `--wp--preset--*` tokens.
 */

/* ── Colour swatch showing the combination's product photo ───────────────────
 *  When a colour has an image (.rh-swatch--img label, set by product-variants.tpl),
 *  drop the pill chrome and present a clean vertical chip: a LARGE photo with the
 *  colour name beneath it. No border-in-border — only the photo carries a hairline,
 *  and the selected state rings the photo (not the pill). */
.rh-swatch.rh-swatch--img {
  flex-direction: column;
  gap: 7px;
  height: auto;
  min-width: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
}
.rh-swatch.rh-swatch--img:hover:not(.is-selected) { border-color: transparent; }
.rh-swatch.rh-swatch--img.is-selected {
  border: 0;
  box-shadow: none;
  color: var(--rh-pd-primary);
}
.rh-swatch__dot--img {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: box-shadow 120ms ease;
}
/* Smaller (but still legible) on mobile so a row of colours fits the screen. */
@media (max-width: 900px) {
  .rh-swatch__dot--img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }
}
.rh-swatch.rh-swatch--img.is-selected .rh-swatch__dot--img {
  box-shadow: 0 0 0 2px var(--rh-pd-primary);
}
/* Caption row under the photo: tiny colour dot + name. */
.rh-swatch__cap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rh-swatch__mini {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rh-swatch-color, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex: 0 0 auto;
}
.rh-swatch--img .rh-swatch__name {
  font-size: 12px;
  font-weight: var(--rh-fw-base);
  line-height: 1.4;
  color: var(--rh-pd-fg);
}
.rh-swatch.rh-swatch--img.is-selected .rh-swatch__name { color: var(--rh-pd-primary); }

/* ── Combination-switch loading state ──────────────────────────────────────
 *  Toggled by rh-product.js (.rh-prd-loading on the product root) between PS's
 *  `updateProduct` and `updatedProduct` events. A soft veil + spinner over the
 *  gallery (the part that visibly changes) and a gentle dim on the price /
 *  add-to-cart, so the shopper sees the page is updating — calm, no layout shift. */
/* Per the UX review: the combination-switch loading shows ON the swatch the
   shopper just tapped (localized "applying your choice") — NOT as a veil over
   the hero image (jarring, and the image changes anyway) and NOT on the
   add-to-cart button (its loading state must mean "adding to cart", or it
   confuses the buyer at the conversion moment). The hero image simply swaps. */
.rh-swatch.is-loading,
.rh-variations__select.is-loading { cursor: progress; pointer-events: none; }
.rh-swatch.is-loading > * { opacity: 0.3; }
.rh-swatch.is-loading::after {
  content: "";
  position: absolute;
  /* inset:0 + margin:auto centres a fixed-size box in BOTH directions and is
   * RTL-safe (the old top/inset-inline-start + physical margin mis-centred in
   * RTL — the arc sat to one side). */
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(15, 17, 21, 0.18);
  border-top-color: var(--rh-pd-primary);
  animation: rh-prd-spin 0.6s linear infinite;
  z-index: 2;
}
/* Image swatch is a vertical chip (76px photo on top, caption below) — centre
 * the spinner ON THE PHOTO, not the full box (which would drop it onto the
 * caption). Horizontal centre is RTL-safe via inset-inline:0 + margin:auto. */
.rh-swatch.rh-swatch--img.is-loading::after {
  inset: calc(4px + 38px) 0 auto 0;  /* 4px swatch padding + half of the 76px photo */
  width: 22px;
  height: 22px;
  margin: -11px auto 0;              /* pull up half the spinner → centred on photo */
}
@media (max-width: 900px) {
  /* photo is 56px on mobile → centre = 4px padding + 28px */
  .rh-swatch.rh-swatch--img.is-loading::after {
    inset-block-start: calc(4px + 28px);
  }
}
.rh-variations__select.is-loading { opacity: 0.6; }
@keyframes rh-prd-spin { to { transform: rotate(360deg); } }
/* The price genuinely changes per combination → a gentle dim signals the update.
   The add-to-cart is only made inert (no visual loading cue) so it can't submit
   a half-resolved combination mid-swap. */
.rh-prd-loading .js-product-prices,
.rh-prd-loading [data-price-mirror] {
  opacity: 0.5;
  transition: opacity 160ms ease;
}
.rh-prd-loading .product-add-to-cart { pointer-events: none; }

/* Unavailable / sold-out swatches (rh-product.js adds these classes and, for
 * `is-unavailable` only, disables the radio). product-single.css already mutes
 * the name/dot; dim the combination PHOTO too so image-swatches read as
 * unavailable, and mark the truly-impossible ones not-allowed. */
.rh-swatch.is-unavailable { cursor: not-allowed; }
.rh-swatch.is-unavailable .rh-swatch__dot--img,
.rh-swatch.is-sold-out .rh-swatch__dot--img { opacity: 0.4; filter: grayscale(0.6); }

/* ── Wishlist heart colour ──────────────────────────────────────────────────
 *  Neutral outline by default; RED once the product is in a wishlist.
 *  blockwishlist only swaps the icon glyph (favorite ↔ favorite_border) with no
 *  state class, so rh-product.js toggles `.is-wished` from the filled glyph. */
.wishlist-button .wishlist-button-add { color: var(--rh-pd-fg, #1a1d23); transition: color 120ms ease; }
.wishlist-button .wishlist-button-add:hover { color: #e3342f; }
.wishlist-button.is-wished .wishlist-button-add { color: #e3342f; }
.wishlist-button-add .material-icons { font-size: 22px; line-height: 1; }

/* Our own product-page heart (.rh-wishlist, blockwishlist override). Outline by
 * default; RED + filled when the product is in the wishlist (rh-product.js
 * toggles .is-wished after a successful direct add). */
.rh-wishlist { position: relative; color: var(--rh-pd-fg, #1a1d23); transition: color 120ms ease; }
.rh-wishlist:hover { color: #e3342f; }
.rh-wishlist.is-wished { color: #e3342f; }
.rh-wishlist__icon { display: block; }
.rh-wishlist.is-wished .rh-wishlist__icon { fill: currentColor; }
/* Loading: hide the heart, show a spinner while the add/remove request runs. */
.rh-wishlist.is-loading { cursor: progress; }
.rh-wishlist.is-loading .rh-wishlist__icon { opacity: 0; }
.rh-wishlist.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(15, 17, 21, 0.2);
  border-top-color: var(--rh-pd-primary, #0a66c2);
  border-radius: 50%;
  animation: rh-prd-spin 0.7s linear infinite;
}

/* ── Knowband size-chart (sizechart module) ─────────────────────────────────
 *  Trigger shown as a plain TEXT link (rh-product.js relocates it under the
 *  variants), plus a cleaner fancybox popup + chart table keyed off our tokens.
 *  Higher-specificity selectors (+ a few !important) beat the module's front.css. */
/* Scoped under .product-actions (where rh-product.js relocates the link) so it
   beats the module's front.css regardless of load order. Plain right-aligned
   TEXT link in our primary colour + a trailing chevron (matches the reference). */
.product-actions .kbchart_link_display {
  margin: 0 0 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  text-align: right;       /* راستچین */
  width: auto;
  padding: 0 !important;
  /* Hidden on first paint until rh-product.js relocates it under the variants
     (it renders in a default position first). display:none — NOT visibility —
     so it reserves no space and nothing around it shifts; JS adds .rh-sc-placed
     to reveal it already in its final spot, killing the load + combination-swap
     "jump". */
  display: none;
}
.product-actions .kbchart_link_display.rh-sc-placed { display: block; }
.product-actions .kbchart_link_display p { margin: 0 !important; padding: 0 !important; }
.product-actions .kbchart_link_display #kbchart_preview_link,
.product-actions .kbchart_link_display .kbchart_link {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  color: var(--rh-pd-primary, #0a66c2) !important;
  font-weight: var(--rh-fw-strong);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.product-actions .kbchart_link_display #kbchart_preview_link:hover,
.product-actions .kbchart_link_display .kbchart_link:hover { text-decoration: none; }

/* fancybox popup shell */
.fancybox-skin { border-radius: 14px !important; box-shadow: 0 24px 70px rgba(15, 17, 21, 0.28) !important; }
.fancybox-inner { border-radius: 14px; }
.fancybox-inner .bootstrap { padding: 18px !important; }
/* chart table */
.fancybox-inner .chart-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.fancybox-inner .chart-table thead td { background: var(--rh-pd-primary, #0a66c2); color: #fff; font-weight: var(--rh-fw-strong); padding: 10px 12px; border: 0; }
.fancybox-inner .chart-table td { padding: 9px 12px; border: 1px solid var(--rh-pd-border, #e2e4e9); text-align: center; }
.fancybox-inner .chart-table tbody tr:nth-child(odd) td { background: var(--rh-pd-surface, #f7f7f8); }
.fancybox-inner .chart-table .vss-td-hovered { background: var(--rh-pd-primary, #0a66c2) !important; color: #fff; }
.fancybox-inner .chart-table .vss-td-hovered-neighbour { background: rgba(109, 189, 186, 0.12) !important; }

/* Current price always in the theme foreground (near-black), even on sale —
 * overrides the classic theme.css `.current-price-value` orange sale colour. */
.rh-product__price-current,
.rh-product__price-current .current-price-value,
.rh-product__price-current .current-price-value *,
.rh-product__price-current .woocommerce-Price-amount,
.rh-product__price-current bdi {
  color: var(--rh-pd-fg, #1a1d23) !important;
}

/* The classic base theme.css ships `.product-actions .add-to-cart { height:2.75rem;
 * padding-top:0.625rem }`. Now that our form is wrapped in `.product-actions`, that
 * top padding pushes the button's label off-centre. Override it (higher specificity
 * via the extra `.add-to-cart` class) so the label stays vertically centred. */
.product-actions .rh-product__add-btn.add-to-cart {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
}

/* Spacing between variant groups (colour group → size group, …). Loads after
 * the classic theme.css (priority 66 > 50) so it overrides it without editing
 * that verbatim base file. */
.product-variants > .product-variants-item {
  margin: 1.25rem 0 0;
}

/* ── Variation swatches: the real PS radio sits invisibly inside the label ── */
.rh-swatch input[type="radio"],
.rh-swatch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
/* Instant feedback before the AJAX round-trip re-renders `is-selected`. */
.rh-swatch:has(input:checked) {
  border-color: var(--rh-pd-primary);
  color: var(--rh-pd-primary);
  box-shadow: inset 0 0 0 0.5px var(--rh-pd-primary);
}
.rh-variations__select { width: 100%; max-width: 320px; }

/* ── Quantity selector + add-to-cart CTA layout ─────────────────────────────
 * The verbatim WP cart-bar expects `.rh-product__price` + `.rh-product__cart`
 * as DIRECT flex children. PS splits price (product-prices) and cart
 * (product-add-to-cart) into separate AJAX-swapped partials, so we dissolve the
 * product-add-to-cart box with display:contents — its children (qty-select,
 * .rh-product__cart, #product-availability, .product-minimal-quantity) then
 * flow straight into the cart-bar, giving the WP layout on both axes. */
.product-add-to-cart { display: contents; }
.rh-product__qty-select {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rh-product__qty-label { font-size: 13px; font-weight: var(--rh-fw-strong); }
.rh-product__qty-select .qty { display: inline-flex; }
.rh-product__qty-select #quantity_wanted {
  width: 64px;
  height: 40px;
  text-align: center;
  font: inherit;
  color: inherit;
  border: 1px solid var(--rh-pd-border);
  border-radius: 8px;
  background: var(--rh-pd-bg);
}
.rh-product__cart, .rh-product__cart .add { width: 100%; }
.rh-product__cart .add .rh-product__add-btn { width: 100%; }
#product-availability.rh-product__stock { display: block; margin-top: 4px; }
.product-minimal-quantity { font-size: 12px; color: var(--rh-pd-muted); margin: 4px 0 0; }
.product-minimal-quantity:empty { display: none; }

/* ── In-cart quantity stepper (qty-stepper.tpl) ─────────────────────────────
 * Base appearance, layout-agnostic; product-split.css wires it into the buy-box
 * row + mobile bar. Hidden until product-qtystep.js reveals it for a product/
 * combination that is already in the cart. `direction:ltr` pins the visual order
 * to  + | n | −/trash  regardless of the page's RTL flow. */
.rh-qtystep {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: var(--wp--custom--button--h--lg, 52px);
  padding: 0 4px;
  border: 1px solid var(--rh-pd-border);
  border-radius: 12px;
  background: var(--rh-pd-bg);
  color: var(--rh-pd-fg);
}
.rh-qtystep[hidden] { display: none; }
.rh-qtystep__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rh-qtystep__btn:hover { background: rgba(15, 17, 21, 0.06); }
.rh-qtystep__btn:active { background: rgba(15, 17, 21, 0.12); }
.rh-qtystep__val {
  flex: 1 1 auto;
  min-width: 28px;
  text-align: center;
  font-weight: var(--rh-fw-strong);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
/* Decrement glyph: trash at quantity 1 (.is-min), minus at 2+. */
.rh-qtystep .rh-qtystep__icon-minus { display: none; }
.rh-qtystep .rh-qtystep__icon-trash { display: inline-flex; }
.rh-qtystep:not(.is-min) .rh-qtystep__icon-trash { display: none; }
.rh-qtystep:not(.is-min) .rh-qtystep__icon-minus { display: inline-flex; }
/* A cart write is in flight — freeze the stepper so taps can't race. */
[data-qtystep-host].is-busy .rh-qtystep { pointer-events: none; opacity: 0.55; }

/* On mobile the cart-bar is a fixed bottom strip (verbatim CSS) sized for just
 * price + add button. Keep the qty selector / availability / min-qty out of that
 * tight strip — qty defaults to 1 (still submitted), stock shows on desktop.
 * (Mobile stock-indicator placement is a documented Phase-5 polish item.) */
@media (max-width: 900px) {
  .rh-product__cart-bar > .rh-product__qty-select,
  .rh-product__cart-bar > #product-availability,
  .rh-product__cart-bar > .product-minimal-quantity { display: none; }
}

/* ── Flag pills over the gallery ────────────────────────────────────────── */
.rh-product__col--gallery { position: relative; }
.rh-product__flags {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-product__flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--rh-fw-strong);
  line-height: 1.6;
  color: #fff;
  background: var(--rh-pd-primary);
  width: fit-content;
}
.rh-product__flag.discount,
.rh-product__flag.on-sale { background: #e3342f; }
.rh-product__flag.new { background: #1a8745; }
.rh-product__flag.out_of_stock { background: var(--rh-pd-muted); }

/* ── Reassurance block (PS displayReassurance hook) ─────────────────────── */
.rh-product__reassurance { margin-top: 16px; }
.rh-product__reassurance:empty { display: none; }

/* product-details.tpl keeps its bootstrap `tab-pane fade` classes (kept so the
 * `#product-details` node + its `data-product` payload survive for core.js).
 * Outside a real tab context bootstrap would `display:none` / `opacity:0` it, so
 * force it visible inside our always-open attrs section. */
.rh-section .js-product-details.tab-pane { display: block; opacity: 1; }

/* ── Section subtitle + product-details data sheet inside the attrs box ─── */
.rh-section__subtitle { font-size: 14px; font-weight: var(--rh-fw-strong); margin: 16px 0 8px; }
.rh-section__body .data-sheet { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.rh-section__body .data-sheet .name { font-weight: var(--rh-fw-strong); color: var(--rh-pd-muted); }
.rh-section__body .product-manufacturer,
.rh-section__body .product-reference,
.rh-section__body .product-condition { margin-bottom: 10px; font-size: 14px; }

/* ── Accessories rail ("کالاهای مشابه") ─────────────────────────────────── */
.rh-rail { margin: 0; }
.rh-rail__title { font-size: 18px; font-weight: var(--rh-fw-strong); margin: 0 0 14px; }
.rh-rail__track {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rh-rail__track::-webkit-scrollbar { height: 6px; }
.rh-rail__track > .rpc-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
}
@media (max-width: 900px) {
  .rh-rail__track > .rpc-card { width: 150px; }
}

/* Stage arrows are opt-in: only the mobile half of «ستونی» shows them. */
.rh-gallery__step { display: none; }

/* ---- Columns mode on MOBILE ------------------------------------------------
 * The stock mobile gallery is a horizontal scroll-snap mosaic — a different
 * idea from the side rail, and the shop asked for one gallery, not two. So
 * below 901px this rebuilds the same shape at phone scale: a narrow vertical
 * rail at the inline start, one picture beside it, the arrow box underneath.
 *
 * The mosaic is dismantled by putting its three moving parts back the way the
 * desktop has them: blocks stop being grid containers, only the active slide
 * renders, and the viewport stops scrolling. Everything else — the thumb
 * click, the arrows, the lightbox — is the same code that already runs on
 * desktop, so nothing new had to be written for the small screen.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* 64px rail box for a 52px tile = an even 6px of air on BOTH sides of the
     thumbnails: one to the page edge, one to the photo. Mirror that same 6px
     on the photo's OTHER edge (padding-inline-end) so it sits centred in its
     own space instead of touching the page edge on one side only. */
  body.rh-pdp-columns .rh-gallery { position: relative; padding-inline: 64px 6px; }
  /* One photo (or none): no thumbnails, so no rail to keep room for — the
     64px were an empty strip beside the picture. Same 6px air both sides. */
  body.rh-pdp-columns .rh-gallery[data-total="0"],
  body.rh-pdp-columns .rh-gallery[data-total="1"] { padding-inline: 6px; }

  /* Undo the mosaic. */
  body.rh-pdp-columns .rh-gallery__block { display: contents !important; }
  body.rh-pdp-columns .rh-gallery__slide { display: none; width: auto; height: auto; }
  body.rh-pdp-columns .rh-gallery__slide.is-active { display: block; }
  body.rh-pdp-columns .rh-gallery__viewport {
    overflow: visible;
    aspect-ratio: var(--rh-product-ratio, 0.8);
    max-width: none;
    background: var(--rh-pd-surface);
    border-radius: var(--wp--custom--radius--lg, 0.75rem);
  }
  body.rh-pdp-columns .rh-gallery__track { display: block; width: auto; padding: 0; }
  /* Radius on the IMAGE itself, not a clipping container: .rh-gallery__viewport
     stays `overflow: visible` on purpose (the stage arrows sit at its edges),
     so a wrapper's radius would never actually clip anything — an <img> can
     carry its own border-radius directly, independent of what contains it. */
  body.rh-pdp-columns .rh-gallery__slide .rh-gallery__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--wp--custom--radius--lg, 0.75rem);
  }
  /* The counter and the swipe dots both describe a rail that no longer exists. */
  body.rh-pdp-columns .rh-gallery__counter,
  body.rh-pdp-columns .rh-gallery__dots { display: none !important; }

  /* The rail, at phone scale. */
  /* Same wrapping-flex reasoning as the desktop rail above. */
  body.rh-pdp-columns .rh-gallery__thumbs-wrap {
    display: flex !important;
    flex-flow: row wrap;
    align-content: flex-start;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 64px;
    padding-inline: 6px;
    margin: 0;
  }
  body.rh-pdp-columns .rh-gallery__thumbs {
    order: 1;
    flex: 0 1 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    margin-block-end: 6px;
    padding: 0;
  }
  body.rh-pdp-columns .rh-gallery__thumbs::-webkit-scrollbar { display: none; }
  body.rh-pdp-columns .rh-gallery__thumb {
    flex: 0 0 auto;
    width: 52px;
    height: auto;
    aspect-ratio: var(--rh-product-ratio, 0.8);
    border: 1px solid var(--rh-pd-border);
    border-radius: var(--wp--custom--radius--sm, 0.25rem);
    overflow: hidden;
  }
  body.rh-pdp-columns .rh-gallery__thumb.is-active { border-color: var(--rh-pd-fg); }
  body.rh-pdp-columns .rh-gallery__thumb--all,
  body.rh-pdp-columns .rh-gallery__thumbs-scroll { display: none !important; }

  /* No arrow box down here on a phone: it would eat rail height that the
     thumbnails need, and a thumb-width button is a poor tap target. The pair
     moves onto the photo instead, where there is room and where the thumb is
     already heading. */
  body.rh-pdp-columns .rh-gallery__thumbs-nav { display: none !important; }

  /* Stage arrows: centred on the photo's two edges. Deliberately LOW-key — a
     faint glass chip, not a solid high-contrast button — so they read as a
     secondary affordance (the thumbs + swipe are the primary way to browse)
     instead of competing with the product photo for attention. */
  body.rh-pdp-columns .rh-gallery__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: var(--rh-pd-fg);
    box-shadow: 0 1px 4px rgba(15, 17, 21, 0.08);
    backdrop-filter: blur(3px);
    opacity: 0.85;
    cursor: pointer;
    z-index: 4;
  }
  /* 8px from each edge — and NOT 64+8 on the start side. The buttons live
     inside .rh-gallery__viewport, which is the photo alone; the 64px rail sits
     outside it, in the thumbs wrap. Adding the rail width here pushed the
     "previous" arrow 64px into the middle of the picture. */
  body.rh-pdp-columns .rh-gallery__step--prev { inset-inline-start: 8px; }
  body.rh-pdp-columns .rh-gallery__step--next { inset-inline-end: 8px; }
  body.rh-pdp-columns .rh-gallery__step[disabled] { opacity: 0.35; }

  /* The zoom button is hidden on the stock mobile gallery; here there is a
     single steady picture to zoom, so it earns its place back. */
  body.rh-pdp-columns .rh-gallery__expand {
    display: inline-flex;
    inset-inline-start: auto;
    inset-inline-end: 10px;
  }

  /* The flags are `position: absolute`, and their containing block is
     .rh-psplit__media-sticky — but that box is only made `relative` inside
     product-split.css's `min-width: 901px` block. Below that the pills escaped
     to whatever ancestor happened to be positioned, which is why they landed on
     the thumbnails instead of on the photo. Give them the context here. */
  body.rh-pdp-columns .rh-psplit__media-sticky { position: relative; }
  body.rh-pdp-columns .rh-psplit .rh-product__flags {
    inset-block-start: 10px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 10px !important;
    align-items: flex-end;
  }
}