/*
 * 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(var(--wp--preset--color--primary-rgb),  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-oos-bg, 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; }
}