/*
 * RahkarTheme — two-column ("split") product layout overrides.
 *
 * Loaded ONLY on the product page when Configuration RAHKAR_PRODUCT_LAYOUT='split'
 * (registered by the rahkarchrome module, priority 67 = after the verbatim base
 * product-single*.css). This file ONLY adds the `.rh-psplit*` arrangement; every
 * component (price, swatches, add-to-cart button, flags, rail, fade, reviews,
 * lightbox, desc modal) is reused VERBATIM from product-single.css /
 * product-single-ps.css / product-reviews.css / fade-block.css — so colours and
 * fonts come straight from the theme tokens. No new palette, no new font.
 *
 * Perf: the sticky gallery is pure CSS (no scroll listener); the desktop
 * side-thumb layout is gated behind a min-width media query so mobile reuses the
 * base gallery untouched; product-split.js only handles the few things CSS can't
 * (sticky-bar proxy click, wishlist relocation, reviews bottom-sheet).
 */

/* ── Tokens (mirror .rh-product so the reused component CSS resolves) ─────── */
.rh-psplit {
  --rh-pd-fg:      var(--wp--preset--color--text, #1a1d23);
  --rh-pd-muted:   var(--wp--preset--color--text-muted, #5b6271);
  --rh-pd-bg:      var(--wp--preset--color--base, #fff);
  --rh-pd-surface: var(--wp--preset--color--surface, #f7f7f8);
  --rh-pd-border:  var(--wp--preset--color--border, #e2e4e9);
  --rh-pd-primary: var(--wp--preset--color--primary, #0a66c2);
  --rh-psplit-sticky-top: 96px;
  --rh-psplit-mh-h: 56px;

  color: var(--rh-pd-fg);
}

.rh-psplit-main { display: block; }

/* ── Breadcrumb — sits directly above the product title on every viewport
 *    (product-layout-split.tpl renders it as the first thing in .rh-psplit__info,
 *    right before .rh-psplit__title-row). Desktop gap matches the archive
 *    desktop crumb (.rpa-archive__head padding-block-start: 22px); mobile gets
 *    a tighter margin since .rh-psplit__info already carries its own 18px top
 *    padding there (see the mobile block below). ───────────────────────── */
.rh-psplit__crumbs { margin: 22px 0 16px; }

/* ====================================================================== *
 *  DESKTOP layout (≥ 901px)
 * ====================================================================== */
@media (min-width: 901px) {
  /* Two columns: gallery (RTL inline-start = right) takes 60%, info 40%. */
  .rh-psplit__top {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: start;
  }

  /* Sticky gallery — the sticky must be on the GRID ITEM (.rh-psplit__media) so
     it sticks within the tall grid (driven by the info column). align-self:start
     keeps the item its own height (not stretched) so it has room to move. The
     inner box stays `position: relative` as the flags anchor. Pure CSS. */
  .rh-psplit__media {
    position: sticky;
    top: var(--rh-psplit-sticky-top);
    align-self: start;
  }
  .rh-psplit__media-sticky { position: relative; }

  /* Discount badge onto the MAIN image's top-right: clear the thumb rail
     (72px) + gap (12px) on the inline-start (right in RTL). !important beats the
     later base `.rh-psplit .rh-product__flags { inset-inline-start:12px }` rule. */
  .rh-psplit .rh-product__flags {
    inset-block-start: 16px !important;
    inset-inline-start: calc(72px + 12px + 14px) !important;
  }

  /* Collection chip clears the 84px thumb rail so it aligns to the photo's
     right edge (same inline inset as the flag). Base rule owns the overlay
     look; this only shifts it past the rail. The `.rh-psplit` scope raises
     specificity (0,2,0) so it beats the later, single-class base rule
     (`.rh-coll-link{ inset-inline-start:12px }`) which would otherwise win on
     source order and drop the chip back onto the rail. */
  .rh-psplit .rh-coll-link {
    inset-inline-start: calc(72px + 12px + 14px);
    max-width: calc(100% - 84px - 28px);
  }

  /* Side-thumbnail gallery: a fixed-width vertical rail PINNED to the full
   * height of the square main image, so the thumbs never out-grow the photo.
   * The viewport is the only in-flow child → it defines `.rh-gallery` height;
   * the rail is absolutely `inset-block:0` (= viewport height) and scrolls.
   * Reuses the existing .rh-gallery markup so PS's combination-swap is unchanged. */
  .rh-psplit .rh-gallery {
    position: relative;
    display: block;
    padding-inline-start: 84px; /* 72px rail + 12px gap, on inline-start (right in RTL) */
  }
  /* One photo (or none): there are no thumbnails, so drop the rail's room and
     put the badge / collection chip back at the photo's own edge. */
  .rh-psplit .rh-gallery[data-total="0"],
  .rh-psplit .rh-gallery[data-total="1"] { padding-inline-start: 0; }
  .rh-psplit__media:has(.rh-gallery[data-total="0"], .rh-gallery[data-total="1"]) .rh-product__flags { inset-inline-start: 14px !important; }
  .rh-psplit__media:has(.rh-gallery[data-total="0"], .rh-gallery[data-total="1"]) .rh-coll-link { inset-inline-start: 14px; max-width: calc(100% - 28px); }
  .rh-psplit .rh-gallery__viewport { margin: 0; }
  .rh-psplit .rh-gallery__dots { display: none; }
  .rh-psplit .rh-gallery__thumbs-wrap {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 72px;
    margin: 0;
  }
  .rh-psplit .rh-gallery__thumbs {
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;           /* hide the scrollbar line */
    /* Bottom room so the last tile ("گالری تصاویر") clears the scroll chevron
       when scrolled to the end — the button sits in this padding, not over it. */
    padding-block: 0 40px;
  }
  .rh-psplit .rh-gallery__thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .rh-psplit .rh-gallery__thumb { width: 72px; height: 72px; flex: 0 0 auto; }
  /* Horizontal paging arrows are meaningless in a vertical rail. */
  .rh-psplit .rh-gallery__thumbs-nav { display: none !important; }

  /* Vertical scroll affordance instead of a scrollbar: a chevron pinned at the
   * rail's bottom. JS toggles `is-up` (rotates it) when scrolled to the end and
   * hides it (via [hidden]) when the rail doesn't overflow. */
  .rh-psplit .rh-gallery__thumbs-scroll {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    margin-inline: auto;
    width: 72px;
    height: 30px;
    padding-bottom: 3px;
    border: 0;
    background: linear-gradient(to top, var(--rh-pd-bg) 45%, rgba(255, 255, 255, 0));
    color: var(--rh-pd-fg);
    cursor: pointer;
    z-index: 3;
  }
  .rh-psplit .rh-gallery__thumbs-scroll[hidden] { display: none; }
  /* At the bottom (up-chevron) there's nothing below to fade over — drop the
     white gradient so it never washes over the "گالری تصاویر" tile. */
  .rh-psplit .rh-gallery__thumbs-scroll.is-up { background: transparent; }
  .rh-psplit .rh-gallery__thumbs-scroll-icon { transition: transform 160ms ease; }
  .rh-psplit .rh-gallery__thumbs-scroll.is-up .rh-gallery__thumbs-scroll-icon { transform: rotate(180deg); }
}

/* Hidden by default (mobile keeps its current horizontal rail untouched). */
.rh-gallery__thumbs-scroll { display: none; }

/* "گالری تصاویر" tile — the last item in the thumb rail; opens the images
 * modal (rh-product.js binds its data-gallery-expand). Square, matches a thumb. */
.rh-gallery__thumb--all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--rh-pd-border, #e2e4e9);
  border-radius: 8px;
  background: var(--rh-pd-surface, #f7f7f8);
  color: var(--rh-pd-primary, #0a66c2);
  font-size: 10px;
  font-weight: var(--rh-fw-strong);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  padding: 4px;
}
.rh-gallery__thumb--all:hover { border-color: var(--rh-pd-primary, #0a66c2); }
.rh-gallery__thumb-all-text { display: block; }

/* ── Collection chip floated over the gallery ───────────────────────────────
   A small, LOW-priority pill (it should not pull the eye) linking to the
   کالکشن(s) this product belongs to. Lives inside .rh-psplit__media — which is
   `position: sticky` on BOTH viewports (desktop & mobile), so it's the
   containing block — and is pinned to the photo's bottom-right corner. Desktop
   overrides the inline inset to clear the 84px thumb rail. */
.rh-coll-link {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px; /* mobile default (no side rail); desktop clears the rail */
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(15, 17, 21, 0.05);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 17, 21, 0.06);
  backdrop-filter: blur(3px);
  font-size: 10px;
  line-height: 1.5;
}
.rh-coll-link__icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--rh-pd-muted, #5b6271); /* muted, not primary — keeps the accent quiet */
}
.rh-coll-link__label { color: var(--rh-pd-muted, #5b6271); }
.rh-coll-link__names { min-width: 0; }
.rh-coll-link__item {
  color: var(--rh-pd-primary, #0a66c2);
  font-weight: var(--rh-fw-base); /* thinner — the name no longer shouts */
  text-decoration: none;
}
.rh-coll-link__item:hover { text-decoration: none; }
.rh-coll-link__sep { color: var(--rh-pd-muted, #5b6271); margin-inline-start: -2px; }

/* ── Flags pinned over the gallery (anchor = the relative media box) ─────── */
.rh-psplit__media-sticky { position: relative; }
.rh-psplit .rh-product__flags {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 3;
}
/* Discount badge in the theme primary colour. !important + all discount types,
   because classic theme.css `.product-flags li.product-flag.discount-percentage`
   (0,3,1) is orange (#f39d72) and outranks a plain class selector. */
.rh-psplit .rh-product__flag.discount,
.rh-psplit .rh-product__flag.discount-percentage,
.rh-psplit .rh-product__flag.discount-amount,
.rh-psplit .rh-product__flag.on-sale { background: var(--rh-pd-primary, #0a66c2) !important; }

/* Base pill look. Classic theme.css `.product-flags li.product-flag` (0,2,1)
   forces a BIG 1rem uppercase teal (#24b9d7) badge — the rahkar `.rh-product__flag`
   (0,1,0) loses to it, so the "جدید" flag rendered huge + PrestaShop-teal. Pin the
   compact rahkar pill here and recolour `new`/out-of-stock with !important (same
   approach as the discount rule above). "جدید" uses the brand primary so it matches
   the product-card "جدید" badge across the site. */
.rh-psplit .rh-product__flag {
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: var(--rh-fw-strong) !important;
  line-height: 1.6 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  color: #fff !important;
}
.rh-psplit .rh-product__flag.new { background: var(--rh-pd-primary, #0a66c2) !important; }
.rh-psplit .rh-product__flag.out_of_stock,
.rh-psplit .rh-product__flag.out-of-stock { background: var(--rh-pd-muted, #5b6271) !important; }

/* ── Info column ─────────────────────────────────────────────────────────── */
.rh-psplit__info { min-width: 0; }

.rh-psplit__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.rh-psplit__brand-logo img { max-height: 26px; width: auto; display: block; }
.rh-psplit__brand-name {
  font-size: 13px;
  font-weight: var(--rh-fw-strong);
  color: var(--rh-pd-muted);
  text-decoration: none;
}
.rh-psplit__brand-name:hover { color: var(--rh-pd-primary); }

/* Title row: product name on the inline-start (right in RTL); a compact actions
   cluster (wishlist + share) on the inline-end (left). The cluster is MOBILE-ONLY
   (shown in the mobile media query); on desktop the heart lives in the buybox so
   it stays hidden here. */
.rh-psplit__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rh-psplit__title {
  font-size: clamp(18px, 1.4vw + 12px, 24px);
  font-weight: var(--rh-fw-strong);
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--rh-pd-fg);
  min-width: 0;
}
.rh-psplit__title-actions { display: none; } /* desktop: hidden (heart is in the buybox) */

/* Rating row: the rating/reviews badge on the inline-start (right in RTL). */
.rh-psplit__rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

/* Rating + reviews badge (productcomments displayProductListReviews). */
.rh-psplit__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-decoration: none;
  color: var(--rh-pd-muted);
  font-size: 13px;
}
.rh-psplit__rating:hover { color: var(--rh-pd-primary); }
.rh-psplit__rating .comments_note,
.rh-psplit__rating .star_content { display: inline-flex; align-items: center; }

/* Price directly under the title/rating, right-aligned (راستچین). The base
 * .rh-product__price aligns to the physical-left for the classic narrow column
 * ("end = left in RTL"); the split's wide info column wants it on the start
 * (right) edge instead. */
.rh-psplit__info > .product-prices {
  margin: 2px 0 18px;
  text-align: right;
}
.rh-psplit__info > .product-prices .rh-product__price-top { justify-content: flex-start; }

/* ── Buybox: add-to-cart + ONLY the wishlist button on one row ───────────── */
.rh-psplit__form { margin: 0; }
/* Tighten the gap between the size chips and the relocated size-guide link. */
.rh-psplit .rh-variations { margin-bottom: 0; }
.rh-psplit__cart-bar { margin-top: 14px; }

/* product-add-to-cart.tpl nests the wishlist (displayProductActions) inside the
 * quantity wrapper. display:contents dissolves that wrapper so the add button +
 * wishlist become direct flex siblings; the qty input stays in the DOM (hidden)
 * so the form still submits quantity=1.
 *
 * !important on both `display` values: product-single-ps.css sets the EXACT
 * opposite pair for the classic layout — `.product-add-to-cart{display:contents}`
 * + `.rh-product__qty-select{display:flex}` (its own comment: "dissolve the
 * product-add-to-cart box... its children flow into the cart-bar"). Our
 * selectors here are already more specific (.rh-psplit ...) and load later, so
 * this SHOULD already win on cascade rules alone — but empirically it wasn't
 * (buybox rendered as three stacked blocks instead of one row), so force it
 * rather than keep chasing why. */
.rh-psplit .product-add-to-cart {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.rh-psplit .rh-product__qty-select { display: contents !important; }
.rh-psplit .rh-product__qty-select .control-label,
.rh-psplit .product-quantity .qty { display: none; }
/* .rh-product__qty-select also carries Bootstrap's "clearfix" class (theme.css:
 * `.clearfix::after{content:"";display:table;clear:both}`) — meaningless once
 * display:contents dissolves the box it was meant to contain floats in, but the
 * generated ::after doesn't go away on its own: it gets promoted into the flex
 * row as flex item #0 right alongside the stepper (confirmed in the DevTools
 * flex inspector), and a `display:table` box sitting in a flex row is exactly
 * the kind of leftover that can throw off sizing. It has no job here — kill it. */
.rh-psplit .rh-product__qty-select::after { content: none !important; display: none !important; }
/* add-to-cart fills the row up to the right edge (aligned with the chips/price
   above); flex:1 1 0 lets it share the line so the heart never wraps below. The
   10px spacing goes ONLY on the button's inline-end (its LEFT in RTL, toward the
   heart) — NOT a container gap — so the button's right edge stays flush. Its
   label is centred (base .rh-product__add-btn already justify-content:center). */
/* width:100% below cancels product-single.css's UNSCOPED `.rh-product__cart{width:100%}`
 * (its own comment there: "Full-width row on desktop" — written for the classic
 * layout's column-stacked cart-bar). That rule is never touched by `flex`
 * alone: once is-in-cart sets `flex: 0 0 auto`, a flex-basis of `auto` falls
 * back to the `width` property per spec — so without this override,
 * .rh-product__cart's basis silently becomes 100% of the row, and everything
 * after it (the heart) gets pushed onto its own line. This is THE actual root
 * cause chased across the last several fixes. */
.rh-psplit .rh-product__cart { order: 1; flex: 1 1 0; width: auto; min-width: 0; margin: 0 0 0 10px; margin-inline: 0 10px; }
.rh-psplit .rh-product__cart .add { display: block; width: 100%; }
.rh-psplit .rh-product__cart .rh-product__add-btn { width: 100%; justify-content: center; }

/* In-cart stepper: order:0 → inline-start (RIGHT in RTL), filling the row; the
   cart button collapses to a square icon to its inline-end (left). 10px gap goes
   on the stepper's inline-end so it never butts against the button.
   max-width: the row's real width leaves EXACTLY enough for cart(52px) +
   wishlist(52px) + their two 10px gaps = 124px, zero px to spare — any
   sub-pixel rounding on a non-integer container width (measured e.g. 499.2px
   in DevTools) tips flex-wrap into wrapping cart/wishlist onto their own
   lines, which is the "stacked instead of one row" bug this was chasing.
   Capping the stepper's grow leaves real headroom instead of an exact-fit
   race. */
/* margin-left (not margin-inline) on purpose: .rh-qtystep forces `direction:ltr`
 * on ITSELF (base rule, product-single-ps.css) so the +/value/−  order stays
 * fixed regardless of page direction — but that also means ITS OWN logical
 * margin-inline-end resolves against ITS ltr direction, i.e. the PHYSICAL
 * RIGHT, not the left. `margin-inline: 0 10px` was therefore putting the gap
 * on the wrong (right) side; a plain physical margin sidesteps that entirely.
 *
 * Width only, height/buttons/font stay at the shared base size (owner wants
 * the stepper's footprint narrower, not shorter — flex:0 0 auto here means it
 * hugs its own content (3 buttons + value) instead of stretching to fill the
 * row's leftover space; max-width is just a hard backstop. */
.rh-psplit .product-add-to-cart .rh-qtystep {
  order: 0;
  flex: 0 0 auto;
  min-width: 0;
  max-width: calc(100% - 140px);
  margin-left: 10px;
  margin-right: 0;
}
.rh-psplit .product-add-to-cart.is-in-cart .rh-product__cart { flex: 0 0 auto; }
.rh-psplit .product-add-to-cart.is-in-cart .rh-product__cart .add,
.rh-psplit .product-add-to-cart.is-in-cart .rh-product__cart .rh-product__add-btn {
  width: var(--wp--custom--button--h--lg, 52px);
  min-width: 0;
  padding-inline: 0;
}
.rh-psplit .product-add-to-cart.is-in-cart .rh-product__add-btn-icon { margin: 0; }
.rh-psplit .product-add-to-cart.is-in-cart .rh-product__add-btn-text { display: none; }
/* Heart: a fixed SQUARE matching the add button's height, on its inline-end
   (LEFT in RTL). */
.rh-psplit .rh-wishlist {
  order: 2;
  flex: 0 0 auto;
  width: var(--wp--custom--button--h--lg, 52px);
  height: var(--wp--custom--button--h--lg, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rh-pd-border);
  border-radius: 12px;
  background: var(--rh-pd-bg);
  color: var(--rh-pd-fg);
  padding: 0;
  cursor: pointer;
}
/* Red wins here: this sheet loads AFTER product-single-ps.css, so its
   `.rh-psplit .rh-wishlist { color }` would otherwise override the red and the
   filled heart (fill: currentColor) would render black. */
.rh-psplit .rh-wishlist:hover,
.rh-psplit .rh-wishlist.is-wished { color: #e3342f; }
.rh-psplit #product-availability,
.rh-psplit .product-minimal-quantity {
  order: 3;
  flex: 1 1 100%;
  margin: 8px 0 0;
}
.rh-psplit .product-minimal-quantity:empty { display: none; }
/* Hide the redundant in-stock ("موجود") line under the cart button — the
   out-of-stock message still shows (it has .out-of-stock, not .in-stock). */
.rh-psplit #product-availability:has(.in-stock) { display: none; }

.rh-psplit__reassurance { margin-top: 16px; }
.rh-psplit__reassurance:empty { display: none; }

/* ── Sections (short desc / long desc / specifications) ──────────────────── */
.rh-psplit__section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rh-pd-border);
}
.rh-psplit__section-title {
  font-size: 17px;
  font-weight: var(--rh-fw-strong);
  margin: 0 0 14px;
  color: var(--rh-pd-fg);
}
.rh-psplit__section-subtitle { font-size: 14px; font-weight: var(--rh-fw-strong); margin: 16px 0 8px; }

/* ── Specs accordion (native <details>, closed by default, no JS) ─────────── */
/* interpolate-size lets the open/close height animate to/from `auto` (Chrome
   129+, Safari 18.4+); where unsupported it simply toggles instantly. */
.rh-acc { display: block; interpolate-size: allow-keywords; }
.rh-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;                 /* override .rh-psplit__section-title's bottom margin */
  cursor: pointer;
  list-style: none;          /* drop the default disclosure triangle (FF) */
  user-select: none;
}
.rh-acc__summary::-webkit-details-marker { display: none; }  /* Safari/Chrome marker */
/* Chevron at the row's inline-end (LEFT in RTL). PHYSICAL borders (right+bottom)
   so the rotation reads the same in RTL: points down when closed, up when open.
   (Logical border-inline-end flips to the LEFT side in RTL and broke the shape.) */
.rh-acc__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-block-end: 3px;          /* nudge the rotated box onto the text baseline */
  border-right: 2px solid var(--rh-pd-muted);
  border-bottom: 2px solid var(--rh-pd-muted);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.rh-acc[open] .rh-acc__summary::after {
  margin-block: 3px 0;
  transform: rotate(-135deg);
}
.rh-acc[open] .rh-acc__summary { margin-bottom: 14px; }

/* Smooth-expand: animate the disclosed content's height so opening the section
   slides instead of snapping — which also stops the sticky gallery from jumping
   as the info column suddenly grows. ::details-content is the box wrapping all
   non-summary content. */
.rh-acc::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 240ms ease, content-visibility 240ms allow-discrete;
}
.rh-acc[open]::details-content { block-size: auto; }
.rh-acc__body { min-width: 0; }

/* product-details.tpl keeps its bootstrap `tab-pane fade` classes (so the
 * #product-details node + data-product payload survive core's swap). Force it
 * visible outside a real tab context. */
.rh-psplit__specs .js-product-details.tab-pane { display: block; opacity: 1; }
/* Hide the redundant "Data sheet" (مشخصات) sub-heading: classic theme.css sizes
   `.h6` at 1.5rem (≈24px) so it reads as a second, oversized "مشخصات" under the
   section title. The .rh-psplit__section-title already labels the section. */
.rh-psplit__specs .product-features > .h6 { display: none; }

.rh-psplit__specs .data-sheet {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 24px;
  margin: 0;
  font-size: 14px;
}
/* Reset the classic theme.css cell styling (min-height:2.5rem, padding, margins,
   #f6f6f6 background, capitalize) that bloated the rows and pushed the names off
   the right edge. The extra `.product-features` class is REQUIRED: theme.css's
   `.product-features>dl.data-sheet dt.name` is (0,3,2) and outranks a 3-class
   selector — so the name kept its margin-right + min-height without it. Clean
   grid rows, hairline divider, font matched to the rest of the page. */
.rh-psplit__specs .product-features .data-sheet .name,
.rh-psplit__specs .product-features .data-sheet .value {
  min-height: 0;
  margin: 0;
  padding: 6px 0;
  background: none;
  text-transform: none;
  line-height: 1.7;
  border-block-end: 1px solid var(--rh-pd-border);
}
.rh-psplit__specs .product-features .data-sheet .name { font-weight: var(--rh-fw-strong); color: var(--rh-pd-muted); }
.rh-psplit__specs .product-features .data-sheet .value { color: var(--rh-pd-fg); font-weight: var(--rh-fw-base); }
/* Drop the divider on the last row. */
.rh-psplit__specs .product-features .data-sheet .name:nth-last-child(2),
.rh-psplit__specs .product-features .data-sheet .value:last-child { border-block-end: 0; }
.rh-psplit__specs .product-features { margin-bottom: 14px; }
/* Hide the brand logo/name from the specs (per request). */
.rh-psplit__specs .product-manufacturer { display: none; }
/* Clean rows: label muted, value normal, on one line. */
.rh-psplit__specs .product-reference,
.rh-psplit__specs .product-condition,
.rh-psplit__specs .product-quantities {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 14px;
}
.rh-psplit__specs .product-reference .label,
.rh-psplit__specs .product-condition .label,
.rh-psplit__specs .product-quantities .label { color: var(--rh-pd-muted); font-weight: var(--rh-fw-strong); margin: 0; }
.rh-psplit__attachments .attachment { margin-bottom: 10px; }

/* ── Description lists: tidy RTL bullets, not over-indented from the right ── */
.rh-psplit__short .rh-fade__body ol,
.rh-psplit__desc .rh-fade__body ol { margin: 8px 0; padding-inline-start: 1.3em; }
.rh-psplit__short .rh-fade__body ul,
.rh-psplit__desc .rh-fade__body ul { margin: 8px 0; padding: 0; list-style: none; }
.rh-psplit__short .rh-fade__body ul > li,
.rh-psplit__desc .rh-fade__body ul > li {
  position: relative;
  padding-inline-start: 1.25em;
  margin-bottom: 7px;
  line-height: 1.9;
}
.rh-psplit__short .rh-fade__body ul > li::before,
.rh-psplit__desc .rh-fade__body ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15em;
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rh-pd-primary, #0a66c2);
}

/* ── Full-width blocks below the two columns ─────────────────────────────── */
.rh-psplit__related,
.rh-psplit__reviews {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--rh-pd-border);
}

/* ── Mobile single-product header (shown only ≤ 900px) ───────────────────── */
.rh-psplit-mh { display: none; }

/* Dedicated search wrap: visually hidden while CLOSED, but still laid out
   (position:absolute, not display:none) so its input keeps an offsetParent —
   header-search.js's [data-rh-search-focus] trigger only opens an instance whose
   input is "visible" (offsetParent !== null). When .is-open is added it drops
   this rule and header-search.css's `.rh-search-wrap.is-open` takes over (fixed,
   full-screen). Only ever rendered on mobile (the parent header is display:none
   above 900px). */
.rh-psplit-mh__search:not(.is-open) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Mobile fixed add-to-cart bar (shown only ≤ 900px) ───────────────────── */
.rh-psplit__stickybar { display: none; }

/* ====================================================================== *
 *  MOBILE layout (≤ 900px)
 * ====================================================================== */
@media (max-width: 900px) {
  /* Replace the global site header + bottom dock with the page-specific product
   * header + fixed add-to-cart bar. Hide the WHOLE site header (not just its
   * rows): even with the rows hidden it kept a ~68px shell, and — critically —
   * the off-canvas mobile-nav drawer + its backdrop are nested INSIDE it. That
   * orphaned drawer was the stray white panel + the source of the horizontal
   * scroll on the product page (its hamburger trigger is hidden here, so it can
   * never be opened/closed properly). Scoped via :has so it only affects the
   * split product page (this sheet only loads there). */
  body:has(.rh-psplit) .rahkar-site-header { display: none; }
  body:has(.rh-psplit) .rh-mobile-nav,
  body:has(.rh-psplit) .rh-mobile-backdrop { display: none !important; }
  body:has(.rh-psplit) .rh-bnav { display: none; }
  /* Classic theme.css puts padding-top:1.563rem on #wrapper — drop it on the
     product page so the sticky "درباره کالا" header sits flush at the very top. */
  body:has(.rh-psplit) #wrapper { padding-top: 0; }
  /* Drop the .container side padding so the gallery + white sheet span the full
     viewport width (full-bleed). The readable content keeps its OWN inner inset
     (--rh-psplit-edge on .rh-psplit__info / __related / __reviews above), so
     text never touches the screen edge — only the backgrounds go edge-to-edge.
     `!important`: global.css's own `#wrapper > .container` gutter rule is
     ALSO `!important` (needed there to beat classic's `.container` reset) —
     without matching it here, that rule wins on specificity's `!important`
     tier regardless of this selector's higher specificity, and the 12–28px
     gutter leaks back in on every side (header, gallery, everything). */
  body:has(.rh-psplit) #wrapper > .container { padding-inline: 0 !important; }

  /* .rh-psplit__info already carries 18px top padding here, so the crumb only
     needs a little breathing room below it, not the desktop 22px/16px gap. */
  .rh-psplit__crumbs { margin: 0 0 10px; }

  /* Sticky page header. margin-bottom gives the gallery photo a little breathing
     room instead of the border sitting flush against it. */
  .rh-psplit-mh {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    margin-bottom: 8px;
    background: var(--rh-pd-bg);
    border-bottom: 1px solid var(--rh-pd-border);
  }
  .rh-psplit-mh__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: var(--rh-psplit-mh-h);
    padding: 0 12px;
  }
  .rh-psplit-mh__lead { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .rh-psplit-mh__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rh-pd-fg);
    cursor: pointer;
  }
  .rh-psplit-mh__title {
    font-size: 15px;
    font-weight: var(--rh-fw-strong);
    color: var(--rh-pd-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rh-psplit-mh__actions { display: flex; align-items: center; gap: 2px; }
  .rh-psplit-mh__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--rh-pd-fg);
    text-decoration: none;
    /* Reset the UA <button> chrome (grey fill + border) — this is a <button>,
       so without this it renders as a grey box. */
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
  }
  /* Stack the two columns; DOM order already gives gallery → title → rating →
   * variants → price → … (matches the requested mobile order). The base
   * .rh-gallery mobile styles (dots + horizontal mosaic) apply untouched. */
  .rh-psplit__top { display: block; }

  /* "عکس ثابت بمونه و همه‌چی روش اسکرول بشه": the gallery sticks at the viewport
     top (the opaque sticky header, z-40, sits over its upper edge), and the
     white content sheet (z-2) scrolls UP over it. */
  .rh-psplit__media {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    /* Safety net: the gallery's horizontal mosaic track is very wide; clip it
       here so it can never bleed out and trigger page-wide horizontal scroll.
       `clip` (not `hidden`) so it never becomes a scroll container. */
    overflow-x: clip;
  }
  .rh-psplit__media-sticky { position: static; }

  /* Collection chip even smaller on mobile (it was oversized over the photo). */
  .rh-coll-link {
    inset-block-end: 8px;
    inset-inline-start: 8px;
    gap: 4px;
    padding: 3px 7px;
    font-size: 9px;
  }
  .rh-coll-link__icon { width: 11px; height: 11px; }

  /* Title-row actions (mobile): the relocated wishlist heart + the share button,
     small equal-size bordered icon buttons on the title's inline-end (left in
     RTL). The `.rh-psplit__title-actions .rh-wishlist` selector (0,2,0) sits
     LATER in source than the buybox `.rh-psplit .rh-wishlist` (0,2,0) rule, so
     it wins and shrinks the relocated heart from the 52px buybox square. */
  .rh-psplit__title-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .rh-psplit__wish-slot { display: inline-flex; flex: 0 0 auto; }
  .rh-psplit__title-actions .rh-wishlist,
  .rh-psplit__share {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--rh-pd-border);
    border-radius: 10px;
    background: var(--rh-pd-bg);
    color: var(--rh-pd-muted);
    cursor: pointer;
  }
  .rh-psplit__title-actions .rh-wishlist svg,
  .rh-psplit__share svg { width: 18px; height: 18px; }
  .rh-psplit__share:hover { color: var(--rh-pd-primary); border-color: var(--rh-pd-primary); }
  /* Red wins for the wished state (same reason as the buybox heart rule). */
  .rh-psplit__title-actions .rh-wishlist:hover,
  .rh-psplit__title-actions .rh-wishlist.is-wished { color: #e3342f; border-color: #e3342f; }

  /* White content sheet that rises over the fixed image. Square top (no rounded
     corner) + a soft top shadow read the "sheet over photo" edge. The sheet is
     full-bleed (the .container side padding is dropped below) so it keeps its
     OWN inner inset (--rh-psplit-edge) — text/controls never touch the screen. */
  .rh-psplit__info {
    position: relative;
    z-index: 2;
    background: var(--rh-pd-bg, #fff);
    margin-top: 0;
    padding: 18px var(--rh-psplit-edge, 14px) 20px;
    box-shadow: 0 -6px 18px rgba(15, 17, 21, 0.08);
  }
  /* The full-width blocks below continue the same white sheet (so nothing shows
     through from the fixed image as you scroll past it) and carry the same inner
     inset. */
  .rh-psplit__related,
  .rh-psplit__reviews,
  .rh-psplit__footer-modules {
    position: relative;
    z-index: 2;
    background: var(--rh-pd-bg, #fff);
    padding-inline: var(--rh-psplit-edge, 14px);
  }

  /* Size / age-range chips (the non-colour `button` swatch group): a tidy
     EQUAL-WIDTH grid instead of the ragged flex-wrap. minmax(96px,1fr) →
     ~3 per row for these longer labels ("۱۲ تا ۱۳ سال"), and auto-fits more
     columns for short numeric sizes. Bigger 44px tap targets for mobile.
     Colour swatches keep their image-pill layout (unchanged). */
  .rh-psplit .rh-swatch-group--button {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }
  .rh-psplit .rh-swatch-group--button .rh-swatch--button {
    min-width: 0;
    width: 100%;
    height: 44px;
  }

  /* The fixed bottom bar owns the add-to-cart + wishlist on mobile, so hide the
   * inline button/wishlist (kept in the DOM: the bar proxies the real add
   * button, and product-split.js relocates the wishlist into the bar). */
  .rh-psplit .rh-product__cart { display: none; }
  .rh-psplit .product-add-to-cart .wishlist-button { display: none; }

  /* Leave room so the fixed bar never covers the last section. */
  .rh-psplit { padding-bottom: 76px; }

  .rh-psplit__stickybar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 45;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--rh-pd-bg);
    border-top: 1px solid var(--rh-pd-border);
    box-shadow: 0 -4px 16px rgba(15, 17, 21, 0.08);
  }
  /* Compact the mirrored price: drop the tax/delivery/unit sub-labels. */
  .rh-psplit__stickybar-price {
    flex: 1 1 auto;
    min-width: 0;
  }
  .rh-psplit__stickybar-price .tax-shipping-delivery-label,
  .rh-psplit__stickybar-price .product-unit-price,
  .rh-psplit__stickybar-price .product-without-taxes,
  .rh-psplit__stickybar-price .delivery-information { display: none; }
  /* Discount row (old price + % badge): the base rule is justify-content:flex-end
     (= physical LEFT in RTL), which left-aligns it in the bar. Pin it to flex-start
     (= RIGHT in RTL) so it sits on the right, in line with the current price. */
  .rh-psplit__stickybar-price .rh-product__price-top { margin: 0; justify-content: flex-start; }
  .rh-psplit__stickybar-wish {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--rh-pd-border);
    border-radius: 12px;
    background: var(--rh-pd-bg);
  }
  .rh-psplit__stickybar-wish .wishlist-button {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .rh-psplit__stickybar-add {
    flex: 0 0 auto;
    min-width: 150px;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--rh-pd-primary);
    color: #fff;
    font-size: 15px;
    font-weight: var(--rh-fw-strong);
    cursor: pointer;
  }
  .rh-psplit__stickybar-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .rh-psplit__stickybar-add[disabled] { opacity: 0.5; cursor: not-allowed; }
  .rh-psplit__stickybar-add-icon { display: none; align-items: center; }

  /* The inline buy-box stepper is desktop-only; the fixed bar owns it on mobile. */
  .rh-psplit .product-add-to-cart .rh-qtystep { display: none; }

  /* Bar stepper: fills the strip; the add button collapses to a square cart
     icon once the item is in the cart. */
  .rh-psplit__stickybar .rh-qtystep { height: 48px; flex: 1 1 auto; }
  .rh-psplit__stickybar:not(.is-in-cart) .rh-qtystep { display: none; }
  .rh-psplit__stickybar.is-in-cart .rh-psplit__stickybar-add {
    flex: 0 0 auto;
    min-width: 0;
    width: 48px;
    padding: 0;
  }
  .rh-psplit__stickybar.is-in-cart .rh-psplit__stickybar-add-icon { display: inline-flex; }
  .rh-psplit__stickybar.is-in-cart .rh-psplit__stickybar-add-text { display: none; }

  /* ── Fullscreen search overlay vs this page's stacking ──────────────────
   * The fullscreen mobile search overlay (.rh-search-wrap.is-open → fixed,
   * inset:0, z-index:1100, header-search.css) is rendered INSIDE this page's
   * sticky mini-header (.rh-psplit-mh below). `position:sticky` + z-index:40
   * makes that header its OWN stacking context, so the overlay's z-1100 is
   * capped at 40 relative to the rest of the page. The fixed add-to-cart bar
   * (.rh-psplit__stickybar, z-index:45) lives OUTSIDE the header, so it paints
   * ABOVE the whole header subtree — the overlay still fills the viewport, but
   * the buy-bar punches through at the bottom, so it reads as "not full screen"
   * (other pages have no buy-bar, hence the bug is product-only).
   *
   * While the overlay is open (header-search.js adds html.rh-search-open, mobile
   * only) we (1) drop the mini-header out of its sticky stacking context so the
   * z-1100 overlay escapes above everything, and (2) hide the buy-bar, which is
   * useless behind a fullscreen search anyway. Mirrors the same-class fix for
   * the global header in header-glass.css / product-mini-header.css. */
  html.rh-search-open .rh-psplit-mh { position: static; z-index: auto; }
  html.rh-search-open .rh-psplit__stickybar { display: none; }

  /* Reviews on mobile render inline (rahkarchrome + rh-reviews.js handle the
     responsive list / load-more / form themselves) — no relocation needed. */
}

/* ====================================================================== *
 *  Trust / reassurance block (above the specs, under the buybox)
 *
 *  A "روش و مدت زمان ارسال" tappable row, two static guarantees, and an
 *  optional KidzCoin earn row. Tappable rows open a bottom-sheet (mobile) /
 *  centered dialog (desktop) reusing the .rh-desc-modal skin via RHSheet.
 *  Token-driven (mirrors .rh-psplit) + RTL-safe logical properties.
 * ====================================================================== */
.rh-trust {
  --rh-trust-coin: #c8861a;
  margin: 18px 0 4px;
  padding: 6px 0;
  border-block: 1px solid var(--rh-pd-border);
  display: flex;
  flex-direction: column;
}

/* Tappable action rows (shipping / coin). */
.rh-trust__action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  background: transparent;
  color: var(--rh-pd-fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 120ms linear;
}
.rh-trust__action:hover,
.rh-trust__action:focus-visible {
  background: var(--rh-pd-surface);
  outline: none;
}
.rh-trust__action + .rh-trust__list,
.rh-trust__list + .rh-trust__action {
  border-block-start: 1px solid var(--rh-pd-border);
}

.rh-trust__action-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rh-pd-primary) 10%, transparent);
  color: var(--rh-pd-primary);
}
.rh-trust__action-icon svg { width: 22px; height: 22px; }
.rh-trust__action-icon--coin {
  background: color-mix(in srgb, var(--rh-trust-coin) 14%, transparent);
  color: var(--rh-trust-coin);
}

.rh-trust__action-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rh-trust__action-title {
  font-size: 14px;
  font-weight: var(--rh-fw-strong);
  line-height: 1.6;
}
.rh-trust__action--coin .rh-trust__coin-amount { color: var(--rh-trust-coin); }
.rh-trust__action-sub {
  font-size: 12px;
  font-weight: var(--rh-fw-base);
  color: var(--rh-pd-muted);
  line-height: 1.5;
}

.rh-trust__action-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--rh-pd-muted);
}
.rh-trust__action-chevron svg { width: 18px; height: 18px; }
/* The chevron points toward the inline-start (RTL: visual LEFT); flip the
   left-pointing glyph for LTR contexts so it always reads "opens a panel". */
[dir="ltr"] .rh-trust__action-chevron svg { transform: scaleX(-1); }

/* Static guarantees. */
.rh-trust__list {
  list-style: none;
  margin: 0;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rh-trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rh-trust__item-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--rh-pd-primary);
}
.rh-trust__item-icon svg { width: 24px; height: 24px; }
.rh-trust__item-label {
  font-size: 14px;
  font-weight: var(--rh-fw-base);
  color: var(--rh-pd-fg);
  line-height: 1.6;
}

/* ── Bottom-sheet content (inside the reused .rh-desc-modal skin) ───────── */
.rh-trust-sheet {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rh-trust-sheet__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rh-trust-sheet__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--rh-pd-surface);
  color: var(--rh-pd-primary);
}
.rh-trust-sheet__icon svg { width: 22px; height: 22px; }
.rh-trust-sheet__title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: var(--rh-fw-strong);
}
.rh-trust-sheet__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--rh-pd-muted);
}

/* ====================================================================== *
 *  SnappPay instalment hint (under the price) — minimal, low-priority.
 *
 *  A small inline chip (NOT full-width): logo + one compact line. Themed
 *  with our tokens; the only brand colour is the Snapp wordmark image.
 * ====================================================================== */
.rh-snapppay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0 2px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--rh-pd-surface);
}
.rh-snapppay__logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.rh-snapppay__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.5;
}
.rh-snapppay__line1 {
  font-size: 13px;
  font-weight: var(--rh-fw-strong);
  color: var(--rh-pd-fg);
}
.rh-snapppay__line2 {
  font-size: 11.5px;
  font-weight: var(--rh-fw-base);
  color: var(--rh-pd-muted);
}

/* KidzCoin sheet hero. */
.rh-trust-coin { display: flex; flex-direction: column; gap: 18px; }
.rh-trust-coin__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, #c8861a 8%, var(--rh-pd-surface));
}
.rh-trust-coin__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #c8861a;
  color: #fff;
}
.rh-trust-coin__badge svg { width: 30px; height: 30px; }
.rh-trust-coin__lead {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.8;
}
.rh-trust-coin__lead b { color: #a36e12; }
.rh-trust-coin__note {
  margin: 0;
  font-size: 12px;
  color: var(--rh-pd-muted);
}

/* ── Share bottom-sheet (copy-link only) ─────────────────────────────────── */
.rh-share-sheet__lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--rh-pd-muted);
}
.rh-share-sheet__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--rh-pd-border);
  border-radius: 12px;
  background: var(--rh-pd-bg);
  color: var(--rh-pd-fg);
  font: inherit;
  font-size: 14px;
  font-weight: var(--rh-fw-strong);
  cursor: pointer;
  transition: border-color 120ms linear, color 120ms linear, background-color 120ms linear;
}
.rh-share-sheet__copy:hover,
.rh-share-sheet__copy:focus-visible {
  border-color: var(--rh-pd-primary);
  color: var(--rh-pd-primary);
  outline: none;
}
.rh-share-sheet__copy-icon { flex: 0 0 auto; }
/* Confirmed state after copying. */
.rh-share-sheet__copy.is-copied {
  border-color: #1f9d57;
  color: #1f9d57;
  background: rgba(31, 157, 87, 0.06);
}