/* =========================================================
   sasangraphic — single product (صفحه محصول) styles
   Reuses the front-page design system (style.css): tokens,
   .container, .eyebrow, .cta-btn, .ghost-btn, .glass, reveal
   animations and the 980px/600px breakpoints. The .sg-product
   scope carries the WooCommerce design-token remap (the same
   deal as .sg-account in account.css) + the shell padding.
   This file styles the native WooCommerce single product page:
   the two-column hero (RTL: the information/purchase area on
   the RIGHT, the native gallery on the LEFT), the breadcrumb,
   notices, the canonical summary callbacks (title, excerpt,
   rating, price, add-to-cart), the purchase area extras and
   the data tabs. Selectors keep WC's specificity so they win
   the cascade.
   ========================================================= */

/* ----- WooCommerce design tokens → site tokens (product page) -----
   WooCommerce ships its own :root palette (--wc-*). Remapping those
   variables on .sg-product (a descendant element) makes every WC
   surface inside follow the night/day theme without duplicated CSS. */
.sg-product {
  --wc-primary: var(--accent);
  --wc-primary-text: var(--on-accent);
  --wc-secondary: var(--surface-strong);
  --wc-secondary-text: var(--text);
  --wc-highlight: var(--accent);
  --wc-content-bg: transparent;
  --wc-subtext: var(--text-muted);
  --wc-form-border-color: var(--border-strong);
  --wc-form-border-radius: var(--radius-sm);
  --wc-red: #e5484d;
  --wc-green: #30a46c;
  --wc-blue: var(--accent);
}

html[data-theme="night"] .sg-product {
  --wc-red: #f2555a;
  --wc-green: #4cc38a;
}

/* ===================== SHELL ===================== */
.sg-product {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2rem, 4vw, 3rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  min-height: 72vh;
}

/* subtle corner glow (same treatment as the shop hero, violet) */
.sg-product::after {
  content: "";
  position: absolute;
  inset-inline-start: -12%;
  top: -35%;
  width: 52%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--glow-violet), transparent 65%);
  filter: blur(12px);
  opacity: 0.28;
  pointer-events: none;
}

/* subtle grid background over the hero area (the same treatment as the
   account dashboard welcome — masked so it fades out below the fold) */
.sg-product::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 82% 8%, #000, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 82% 8%, #000, transparent 68%);
  opacity: 0.4;
  pointer-events: none;
}

.sg-product > .container {
  position: relative;
  z-index: 1;
}

/* ===================== BREADCRUMB ===================== */
/* native WooCommerce breadcrumb — themed with the site tokens */
.sg-product .woocommerce-breadcrumb {
  color: var(--text-faint);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.sg-product .woocommerce-breadcrumb a {
  color: var(--text-muted);
  transition: color var(--dur-fast);
}
.sg-product .woocommerce-breadcrumb a:hover {
  color: var(--accent);
}

/* ===================== NOTICES ===================== */
/* native WC notices (add-to-cart confirmations…) — the same glass panel
   language as the rest of the store */
.sg-product .woocommerce-message,
.sg-product .woocommerce-info,
.sg-product .woocommerce-error {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.8;
  list-style: none;
  margin: 0 0 1.4rem;
}
.sg-product .woocommerce-message::before {
  color: var(--wc-green);
}
.sg-product .woocommerce-info::before {
  color: var(--accent);
}
.sg-product .woocommerce-error::before {
  color: var(--wc-red);
}
.sg-product .woocommerce-message .button,
.sg-product .woocommerce-info .button,
.sg-product .woocommerce-error .button {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.sg-product .woocommerce-message .button:hover,
.sg-product .woocommerce-info .button:hover,
.sg-product .woocommerce-error .button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===================== PRODUCT HERO ===================== */
/* the canonical content-single-product markup: the gallery renders inside
   the product wrapper BEFORE the summary — the two-column hero is a CSS
   grid on the wrapper (Blocksy's product-entry-wrapper buffer; without
   Blocksy the :has() fallback grids the product wrapper itself) with
   grid-template-areas, so the RTL flow is explicit: the information/
   purchase area on the RIGHT (the first area/column in RTL), the gallery
   on the LEFT. */
.sg-product .product-entry-wrapper,
.sg-product .product:has(> .woocommerce-product-gallery) {
  display: grid;
  grid-template-areas: "info gallery";
  grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.sg-product .woocommerce-product-gallery {
  grid-area: gallery;
}
.sg-product .summary {
  grid-area: info;
}

/* ---------- sale flash (native WC) — the same pill language as the shop
   badge: solid + mode-aware, over the gallery's outer corner ---------- */
.sg-product .onsale {
  grid-area: gallery;
  position: relative;
  z-index: 5;
  justify-self: end; /* RTL: the outer (left) corner of the gallery cell */
  align-self: start;
  margin-top: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-inline-end: clamp(0.9rem, 1.6vw, 1.4rem);
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
html[data-theme="day"] .sg-product .onsale {
  background: var(--paper);
  color: var(--charcoal);
}
/* ---------- information/purchase column (RIGHT in RTL) ---------- */
.sg-product .summary {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* chips row (category + product type) — the same pill language as the
   shop hero badge */
.sg-product .sg-product-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sg-product .sg-product-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.7;
}
.sg-product .sg-product-chip--digital {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}

/* product title (native WC title template) */
.sg-product .product_title {
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.9rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.9rem;
}

/* short description (native WC excerpt template) */
.sg-product .woocommerce-product-details__short-description {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.8;
  margin-bottom: 1.1rem;
}
.sg-product .woocommerce-product-details__short-description p {
  margin: 0;
}

/* rating / reviews (native WC rating template — renders only when the
   product has ratings). The star glyphs come from WooCommerce's own icon
   font (re-declared by sg_woo_product_star_font); the fill anchors to the
   inline-start edge, so in RTL the rating fills right-to-left (WC's own
   RTL behaviour). */
.sg-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.sg-product .star-rating {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.15em;
  line-height: 1;
  width: 5.4em;
  font-family: WooCommerce;
  font-size: 1rem;
  font-weight: 400;
}
.sg-product .star-rating::before {
  content: "sssss";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  color: var(--border-strong);
}
.sg-product .star-rating span {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  overflow: hidden;
  padding-top: 1.6em; /* WC's trick: pushes the span's text out of the
                          visible band; its ::before renders in view */
}
.sg-product .star-rating span::before {
  content: "SSSSS";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  color: var(--accent);
}
.sg-product .woocommerce-review-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur-fast);
}
.sg-product .woocommerce-review-link:hover {
  color: var(--accent);
}
.sg-product .woocommerce-review-link .count {
  font-weight: 700;
}
/* ===================== PRICING ===================== */
/* native WooCommerce pricing — the Persian digit/separator formatting comes
   from sg_woo_fa_price (wc_price filter, already applied site-wide) */
.sg-product .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  color: var(--text);
  font-size: clamp(1.4rem, 1.6vw + 0.9rem, 1.9rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.sg-product .price del {
  color: var(--text-faint);
  font-size: 0.62em;
  font-weight: 600;
  text-decoration: line-through;
  opacity: 1;
}
.sg-product .price del .woocommerce-Price-amount {
  color: var(--text-faint);
}
.sg-product .price ins {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
.sg-product .price .woocommerce-Price-amount {
  color: inherit;
}
.sg-product .price .woocommerce-Price-currencySymbol {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--text-muted);
}

/* discount pill (computed from the product's own prices, Persian digits) */
.sg-product .sg-product-discount {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

/* ===================== PURCHASE AREA ===================== */
/* the native WC add-to-cart form (every product type stays compatible) —
   themed like .cta-btn/.ghost-btn. The divider above mirrors the shop
   cards' internal separation. Blocksy's .ct-cart-actions buffer wraps the
   quantity + button on this view — themed like the form itself (without
   Blocksy the form's own children are flexed directly). */
.sg-product form.cart .ct-cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  flex: 1 1 auto;
}
.sg-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 1.2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
/* the quantity selector is HIDDEN on this view — the site sells digital
   /downloadable products, so the customer-facing UI has no visible
   quantity controls anywhere. WooCommerce's internal quantity handling
   stays intact behind the scenes: the input keeps its default value 1 and
   the form still submits it, so the native add-to-cart, the buy-now and
   any variation flow work unchanged. The cart page's own quantities are
   NOT matched by this selector (form.cart is the product form's class) */
.sg-product form.cart .quantity {
  display: none;
}
.sg-product form.cart .quantity .qty {
  width: 4.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font-weight: 700;
  text-align: center;
  transition: border-color var(--dur-fast);
}
.sg-product form.cart .quantity .qty:focus {
  border-color: var(--accent);
  outline: none;
}

/* add-to-cart (WC's own button + AJAX flow) — themed like .cta-btn */
.sg-product form.cart .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 10px 26px -10px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease);
}
.sg-product form.cart .button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px -12px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sg-product form.cart .button:active {
  transform: translateY(-1px) scale(0.99);
}
.sg-product form.cart .button.loading {
  opacity: 0.75;
  pointer-events: none;
}
/* the "view cart" link WC's JS appends after a successful AJAX add */
.sg-product form.cart .added_to_cart {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.sg-product form.cart .added_to_cart:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* the add button once the product is already in the cart («در سبد خرید
   شما») — a status, not an action: no pointer cursor and no hover lift */
.sg-product .single_add_to_cart_button.sg-in-cart {
  cursor: default;
  opacity: 0.92;
}
.sg-product .single_add_to_cart_button.sg-in-cart:hover {
  transform: none;
  filter: none;
}

/* "خرید مستقیم" (secondary CTA) — inside the form, after WC's own button;
   themed like .ghost-btn */
.sg-product .sg-buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  min-height: 48px;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-product .sg-buy-now:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--surface-strong);
  box-shadow: 0 14px 34px -18px var(--accent-glow);
}
.sg-product .sg-buy-now svg {
  width: 19px;
  height: 19px;
  color: var(--accent);
  flex-shrink: 0;
}
/* ---------- purchase reassurance (digital products only) ---------- */
.sg-product .sg-product-reassurance {
  width: 100%;
  margin-top: 1.1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: var(--accent-soft);
}
.sg-product .sg-product-reassurance-claims {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
}
.sg-product .sg-product-claim {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.7;
}
.sg-product .sg-product-claim svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}
.sg-product .sg-product-reassurance-note {
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.8;
}

/* ===================== GALLERY ===================== */
/* the native WooCommerce product gallery (main image + thumbnails + zoom +
   lightbox, all rendered by WooCommerce itself) — only the surfaces are
   themed with the site tokens */
.sg-product .woocommerce-product-gallery {
  position: relative;
}
.sg-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
}
.sg-product .woocommerce-product-gallery .flex-viewport {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sg-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sg-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  user-select: none;
  -webkit-user-drag: none;
}
/* zoom-enabled images get the magnifier cursor (the zoom itself is WC's own) */
.sg-product .woocommerce-product-gallery .woocommerce-product-gallery__image--zoom,
.sg-product .woocommerce-product-gallery .woocommerce-product-gallery__image--zoom img {
  cursor: zoom-in;
}

/* thumbnails (flexslider control nav) — the same strip language as the
   shop hero dots / category pills */
.sg-product .woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.sg-product .woocommerce-product-gallery .flex-control-thumbs li {
  float: none;
  width: auto;
  list-style: none;
}
.sg-product .woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity var(--dur-fast),
    border-color var(--dur-fast);
}
.sg-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
  opacity: 1;
}
.sg-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--accent);
}

/* ===================== DATA TABS ===================== */
/* native WC tabs (description + additional information) — full width below
   the hero, the same glass panel language as the shop cards */
.sg-product .woocommerce-tabs {
  clear: both;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sg-product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  border: none;
}
.sg-product .woocommerce-tabs ul.tabs::before,
.sg-product .woocommerce-tabs ul.tabs::after {
  display: none;
}
.sg-product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 999px;
}
.sg-product .woocommerce-tabs ul.tabs li::before,
.sg-product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.sg-product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.7;
  transition:
    border-color var(--dur-fast),
    color var(--dur-fast),
    background var(--dur-fast);
}
.sg-product .woocommerce-tabs ul.tabs li a:hover {
  border-color: var(--accent);
  color: var(--text);
}
.sg-product .woocommerce-tabs ul.tabs li.active a {
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.sg-product .woocommerce-tabs .panel {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-ambient);
}
.sg-product .woocommerce-tabs .panel h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.sg-product .woocommerce-tabs .panel p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.9;
}

/* ===================== PRODUCT INFORMATION (ACF) ===================== */
/* the per-product extras (subtitle, highlights, specs, contents, how it
   works + delivery) — the same card/pill/icon language as the rest of the
   store. Sections hide themselves when the product has no data. */

/* ---------- subtitle (ACF) — under the native title ---------- */
.sg-product .sg-product-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 0.9rem;
}

/* ---------- highlights (ACF) — the compact benefits strip in the purchase
   column, above the add-to-cart form ---------- */
.sg-product .sg-product-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.sg-product .sg-product-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
}
.sg-product .sg-product-highlight-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent-soft), rgba(64, 11, 255, 0.16));
  border: 1px solid var(--border);
}
.sg-product .sg-product-highlight-icon svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent);
}
.sg-product .sg-product-highlight-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sg-product .sg-product-highlight-name {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}
.sg-product .sg-product-highlight-text {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.7;
  margin-top: 0.15rem;
}

/* ---------- shared section heading (specs / contents / how it works) */
.sg-product .sg-product-section-title {
  font-size: clamp(1.3rem, 1.8vw + 0.8rem, 1.8rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.1rem;
}

/* ---------- specifications (ACF) — a clean reference table ---------- */
.sg-product .sg-product-specs {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sg-product .sg-product-specs-panel {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.5vw, 1.8rem);
}
.sg-product .sg-product-specs-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 2.2rem;
  margin: 0;
}
.sg-product .sg-product-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--border);
}
.sg-product .sg-product-spec-row:last-child {
  border-bottom: none;
}
.sg-product .sg-product-spec-row dt {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  flex-shrink: 0;
}
.sg-product .sg-product-spec-row dd {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: start;
  min-width: 0;
}
/* ---------- «چه چیزی دریافت می‌کنید؟» (ACF) — the contents checklist ---------- */
.sg-product .sg-product-contents {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sg-product .sg-product-contents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-product .sg-product-content-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
}
.sg-product .sg-product-content-check {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
.sg-product .sg-product-content-check svg {
  width: 13px;
  height: 13px;
  stroke: var(--accent);
}
.sg-product .sg-product-content-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sg-product .sg-product-content-name {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
}
.sg-product .sg-product-content-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-top: 0.2rem;
}
/* ---------- «روش خرید و دریافت» — the three purchase steps + delivery ---- */
.sg-product .sg-product-howitworks {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sg-product .sg-product-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  counter-reset: sg-step;
}
.sg-product .sg-product-step {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
}
.sg-product .sg-product-step-num {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: 800;
}
.sg-product .sg-product-step-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sg-product .sg-product-step-name {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.6;
}
.sg-product .sg-product-step-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-top: 0.15rem;
}

/* delivery + support note — the actual digital delivery process, connected
   to the native My Account downloads area */
.sg-product .sg-product-delivery {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: var(--accent-soft);
}
.sg-product .sg-product-delivery-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
}
.sg-product .sg-product-delivery-icon svg {
  width: 19px;
  height: 19px;
}
.sg-product .sg-product-delivery-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sg-product .sg-product-delivery-text {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
}
.sg-product .sg-product-delivery-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.sg-product .sg-product-delivery-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.sg-product .sg-product-delivery-link svg {
  width: 15px;
  height: 15px;
}
.sg-product .sg-product-support-text {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.8;
}
.sg-product .sg-product-support-text svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
  align-self: center;
}
/* ---------- description editor content (the native WP/WooCommerce editor:
   H2, H3, paragraphs, lists, images, links, tables, video embeds) ---------- */
.sg-product .woocommerce-tabs .panel h2,
.sg-product .woocommerce-tabs .panel h3 {
  color: var(--text);
  font-weight: 700;
  line-height: 1.4;
  margin: 1.6rem 0 0.7rem;
}
.sg-product .woocommerce-tabs .panel > h2:first-child,
.sg-product .woocommerce-tabs .panel > h3:first-child {
  margin-top: 0;
}
.sg-product .woocommerce-tabs .panel h2 {
  font-size: 1.25rem;
}
.sg-product .woocommerce-tabs .panel h3 {
  font-size: 1.1rem;
}
.sg-product .woocommerce-tabs .panel ul,
.sg-product .woocommerce-tabs .panel ol {
  margin: 0.8rem 0;
  padding-inline-start: 1.5rem;
}
.sg-product .woocommerce-tabs .panel ul {
  list-style: disc;
}
.sg-product .woocommerce-tabs .panel ol {
  list-style: decimal;
}
.sg-product .woocommerce-tabs .panel li {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.9;
  margin-bottom: 0.35rem;
}
.sg-product .woocommerce-tabs .panel a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sg-product .woocommerce-tabs .panel img {
  border-radius: var(--radius-md);
  margin: 1rem 0;
}
.sg-product .woocommerce-tabs .panel table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.94rem;
  display: block;
  overflow-x: auto;
}
.sg-product .woocommerce-tabs .panel th,
.sg-product .woocommerce-tabs .panel td {
  border: 1px solid var(--border);
  padding: 0.6rem 0.9rem;
  text-align: start;
  color: var(--text-muted);
}
.sg-product .woocommerce-tabs .panel th {
  background: var(--surface-strong);
  color: var(--text);
  font-weight: 700;
}
.sg-product .woocommerce-tabs .panel iframe,
.sg-product .woocommerce-tabs .panel embed,
.sg-product .woocommerce-tabs .panel video {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 1rem 0;
}

/* ===================== REVIEWS ===================== */
/* WooCommerce's native review system (comments + the native review
   templates) — the average + breakdown header is computed from WC's own
   review data; the list, the form and the empty state are WC's own
   templates. The hero's rating link (#reviews) lands here. */
.sg-product .sg-product-reviews {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.sg-product .sg-product-reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.8rem);
  margin-bottom: 1.2rem;
}

.sg-product .sg-product-reviews-average {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.sg-product .sg-product-reviews-average-num {
  font-size: clamp(2.2rem, 3vw + 1rem, 3.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.sg-product .sg-product-reviews-average .star-rating {
  font-size: 1.15rem;
}
.sg-product .sg-product-reviews-average-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* rating breakdown — the per-star histogram, RTL-safe bars */
.sg-product .sg-product-reviews-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: min(320px, 100%);
  flex: 1 1 320px;
  max-width: 460px;
}
.sg-product .sg-product-reviews-breakdown-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sg-product .sg-product-reviews-breakdown-stars {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  min-width: 2.6rem;
}
.sg-product .sg-product-reviews-breakdown-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-strong);
  overflow: hidden;
}
.sg-product .sg-product-reviews-breakdown-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.sg-product .sg-product-reviews-breakdown-count {
  color: var(--text-faint);
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 1.6rem;
  text-align: end;
}

/* the native review templates (list + form) — themed with the site tokens */
.sg-product .sg-product-reviews-body .woocommerce-Reviews > #comments {
  margin-bottom: 2rem;
}
.sg-product .sg-product-reviews-body .woocommerce-Reviews-title {
  font-size: clamp(1.3rem, 1.8vw + 0.8rem, 1.8rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.sg-product .sg-product-reviews-body .woocommerce-Reviews-title span {
  color: var(--accent);
}

/* the comment list — the same glass card language as the store */
.sg-product .sg-product-reviews-body .commentlist {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-product .sg-product-reviews-body .commentlist > li {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
  list-style: none;
}
.sg-product .sg-product-reviews-body .commentlist .comment_container {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.sg-product .sg-product-reviews-body .commentlist .comment_container img.avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  padding: 0;
  flex-shrink: 0;
}
.sg-product .sg-product-reviews-body .commentlist .comment-text {
  min-width: 0;
  flex: 1;
  border: none;
  padding: 0;
}
.sg-product .sg-product-reviews-body .commentlist .comment-text .comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.4rem;
}
.sg-product .sg-product-reviews-body .commentlist .comment-text .comment-author {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}
.sg-product .sg-product-reviews-body .commentlist .comment-text .comment-author a {
  color: var(--accent);
}
.sg-product .sg-product-reviews-body .commentlist .comment-text .comment-metadata {
  color: var(--text-faint);
  font-size: 0.8rem;
  font-weight: 500;
}
.sg-product .sg-product-reviews-body .commentlist .comment-text .comment-metadata a {
  color: var(--text-faint);
}
.sg-product .sg-product-reviews-body .commentlist .comment-text .description {
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.9;
}
.sg-product .sg-product-reviews-body .commentlist .comment-text .description p {
  margin: 0;
}
.sg-product .sg-product-reviews-body .commentlist .star-rating {
  font-size: 0.95rem;
  margin: 0;
}
/* the review form (native comment_form) — the same input language as the
   rest of the store; eligible customers only (WC's own logic) */
.sg-product .sg-product-reviews-body .review_form_wrapper {
  padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.8rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
}
/* the review form's editable fields — clearly visible in BOTH modes. The
   fields are WordPress's comment_form output REBUILT by Blocksy (the
   comment-form-field-* classes, has-labels-outside) and BOTH stylesheets
   that would style them are absent on this view (Blocksy empties
   WooCommerce's style queue; Blocksy's own stylesheet is dequeued on the
   product view), so the fields previously rendered with bare browser
   defaults. Scoped tokens give every editable field a clearly contrasting
   background and boundary PER MODE — night: a clearly lighter glass inset
   against the panel; day: a clean white input — each with a visible
   border, readable text, a visible placeholder and caret, and the design
   system's accent focus ring. Scoped to the review form ONLY — no other
   form field or component is touched */
.sg-product .sg-product-reviews-body #review_form {
  --sg-review-field-bg: rgba(247, 247, 247, 0.12);
  --sg-review-field-border: rgba(247, 247, 247, 0.32);
  --sg-review-field-placeholder: rgba(247, 247, 247, 0.55);
}
html[data-theme="day"] .sg-product .sg-product-reviews-body #review_form {
  --sg-review-field-bg: #ffffff;
  --sg-review-field-border: rgba(26, 19, 97, 0.3);
  --sg-review-field-placeholder: rgba(54, 52, 53, 0.55);
}
.sg-product .sg-product-reviews-body #review_form .comment-reply-title {
  display: block;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating {
  margin-bottom: 1rem;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating label {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--sg-review-field-border);
  border-radius: var(--radius-sm);
  background: var(--sg-review-field-bg);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-comment {
  margin-bottom: 1rem;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-comment label {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}
/* the comment field — BOTH class sets: Blocksy's rebuilt
   comment-form-field-textarea (what actually renders on this view) and
   the classic comment-form-comment (the graceful no-Blocksy fallback) */
.sg-product .sg-product-reviews-body #review_form .comment-form-comment textarea,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-textarea textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--sg-review-field-border);
  border-radius: var(--radius-sm);
  background: var(--sg-review-field-bg);
  color: var(--text);
  caret-color: var(--accent); /* the text cursor is always visible and on-brand */
  line-height: 1.8;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-comment textarea::placeholder,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-textarea textarea::placeholder {
  color: var(--sg-review-field-placeholder);
  opacity: 1; /* Firefox dims placeholders — keep the exact color */
}
.sg-product .sg-product-reviews-body #review_form .comment-form-comment textarea:focus,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-textarea textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
/* the name/email fields — BOTH class sets (Blocksy's rebuilt
   comment-form-field-input-* is what renders on this view; the classic
   comment-form-* is the no-Blocksy fallback) — side by side with a clear
   gap (the extra 0.25rem per field absorbs the whitespace WP's default
   output adds between the fields, so the row never wraps) */
.sg-product .sg-product-reviews-body #review_form .comment-form-author,
.sg-product .sg-product-reviews-body #review_form .comment-form-email,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-author,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-email {
  display: inline-block;
  width: calc(50% - 0.75rem);
  margin-bottom: 1rem;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-email,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-email {
  margin-inline-start: 1rem; /* the gap between the two fields, in both directions */
}
.sg-product .sg-product-reviews-body #review_form .comment-form-author label,
.sg-product .sg-product-reviews-body #review_form .comment-form-email label {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-author input,
.sg-product .sg-product-reviews-body #review_form .comment-form-email input,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-author input,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-email input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--sg-review-field-border);
  border-radius: var(--radius-sm);
  background: var(--sg-review-field-bg);
  color: var(--text);
  caret-color: var(--accent);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-author input::placeholder,
.sg-product .sg-product-reviews-body #review_form .comment-form-email input::placeholder,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-author input::placeholder,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-email input::placeholder {
  color: var(--sg-review-field-placeholder);
  opacity: 1;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-author input:focus,
.sg-product .sg-product-reviews-body #review_form .comment-form-email input:focus,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-author input:focus,
.sg-product .sg-product-reviews-body #review_form .comment-form-field-input-email input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.sg-product .sg-product-reviews-body #review_form .form-submit .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sg-product .sg-product-reviews-body #review_form .form-submit .submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sg-product .sg-product-reviews-body #review_form .must-log-in,
.sg-product .sg-product-reviews-body #review_form .logged-in-as {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}
.sg-product .sg-product-reviews-body #review_form .must-log-in a,
.sg-product .sg-product-reviews-body #review_form .logged-in-as a {
  color: var(--accent);
}
/* the notes (the email privacy note) + the cookies consent — muted, so
   they read as supporting text and never compete with the fields */
.sg-product .sg-product-reviews-body #review_form .comment-notes,
.sg-product .sg-product-reviews-body #review_form .comment-form-cookies-consent {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* the clean empty state (no reviews yet) + the verification note */
.sg-product .sg-product-reviews-body .woocommerce-noreviews,
.sg-product .sg-product-reviews-body .woocommerce-verification-required {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: var(--accent-soft);
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.8;
  margin-bottom: 1.2rem;
}
/* ===================== RELATED / RECENTLY VIEWED ===================== */
/* the native WC loops (related products + recently viewed) — the same card
   design as the shop page (the same card component markup, the same visual
   language; the styles are scoped here because shop.css is not loaded on
   this view). Selectors keep WC's specificity so they win the cascade. */
.sg-product .related.products,
.sg-product .sg-product-recent {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sg-product .related.products > h2 {
  font-size: clamp(1.3rem, 1.8vw + 0.8rem, 1.8rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.1rem;
}

/* the card grid — the same auto-fit grid as the shop listing */
.sg-product .related.products ul.products,
.sg-product .sg-product-recent-list ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-product .related.products ul.products li.product,
.sg-product .sg-product-recent-list ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto;
  float: none;
  margin: 0;
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
  overflow: hidden;
  position: relative;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-product .related.products ul.products li.product:hover,
.sg-product .sg-product-recent-list ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow:
    0 26px 54px -24px var(--accent-glow),
    var(--shadow-ambient);
}

/* the card surfaces — the same treatment as the shop cards */
.sg-product .related.products ul.products li.product > a,
.sg-product .sg-product-recent-list ul.products li.product > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.sg-product .related.products ul.products li.product img,
.sg-product .sg-product-recent-list ul.products li.product img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: 0.8rem;
  user-select: none;
  -webkit-user-drag: none;
}
.sg-product .related.products ul.products li.product .onsale,
.sg-product .sg-product-recent-list ul.products li.product .onsale {
  position: absolute;
  inset-inline-end: 1rem;
  top: 1rem;
  z-index: 2;
  margin: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.6;
}
html[data-theme="day"] .sg-product .related.products ul.products li.product .onsale,
html[data-theme="day"] .sg-product .sg-product-recent-list ul.products li.product .onsale {
  background: var(--paper);
  color: var(--charcoal);
}
/* the card internals (badge/cat/title/excerpt/price/buttons — the shared
   card callbacks render them) */
.sg-product .related.products ul.products li.product .shop-badge,
.sg-product .sg-product-recent-list ul.products li.product .shop-badge {
  position: absolute;
  inset-inline-end: 1rem;
  top: 1rem;
  z-index: 2;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--ink);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.6;
}
html[data-theme="day"] .sg-product .related.products ul.products li.product .shop-badge,
html[data-theme="day"] .sg-product .sg-product-recent-list ul.products li.product .shop-badge {
  background: var(--paper);
  color: var(--charcoal);
}
.sg-product .related.products ul.products li.product .shop-product-cat,
.sg-product .sg-product-recent-list ul.products li.product .shop-product-cat {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.76rem;
  font-weight: 600;
}
.sg-product .related.products ul.products li.product .woocommerce-loop-product__title,
.sg-product .sg-product-recent-list ul.products li.product .woocommerce-loop-product__title {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.45rem;
}
.sg-product .related.products ul.products li.product .shop-product-excerpt,
.sg-product .sg-product-recent-list ul.products li.product .shop-product-excerpt {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0 0 0.8rem;
  flex: 1;
}
.sg-product .related.products ul.products li.product .price,
.sg-product .sg-product-recent-list ul.products li.product .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 0.9rem;
}
.sg-product .related.products ul.products li.product .price del,
.sg-product .sg-product-recent-list ul.products li.product .price del {
  color: var(--text-faint);
  font-size: 0.7em;
  font-weight: 600;
  opacity: 1;
}
.sg-product .related.products ul.products li.product .price ins,
.sg-product .sg-product-recent-list ul.products li.product .price ins {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
.sg-product .related.products ul.products li.product .sale-price,
.sg-product .sg-product-recent-list ul.products li.product .sale-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
}
.sg-product .related.products ul.products li.product .button,
.sg-product .sg-product-recent-list ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 0.62rem 1.2rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast),
    background var(--dur-fast);
}
.sg-product .related.products ul.products li.product .button:hover,
.sg-product .sg-product-recent-list ul.products li.product .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -14px var(--accent-glow);
}
.sg-product .related.products ul.products li.product .button.loading,
.sg-product .sg-product-recent-list ul.products li.product .button.loading {
  opacity: 0.75;
  pointer-events: none;
}
/* ===================== TRUST ELEMENTS ===================== */
/* the store's own claims (the same ACF benefits the shop page shows) — a
   compact strip lower on the page */
.sg-product .sg-product-trust {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sg-product .sg-product-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-product .sg-product-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.2rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px) saturate(135%);
}
.sg-product .sg-product-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent-soft), rgba(64, 11, 255, 0.16));
  border: 1px solid var(--border);
}
.sg-product .sg-product-trust-icon svg {
  width: 19px;
  height: 19px;
  stroke: var(--accent);
}
.sg-product .sg-product-trust-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sg-product .sg-product-trust-name {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
}
.sg-product .sg-product-trust-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-top: 0.2rem;
}

/* ===================== STICKY PURCHASE BOX ===================== */
/* compact floating purchase box on the LEFT side of the viewport (top,
   below the nav) — the site sells digital/downloadable products, so it
   carries only the product thumbnail + the two purchase actions (no
   quantity selector anywhere; WooCommerce's internal quantity handling
   stays intact behind the scenes). Hidden by default, revealed by the
   IntersectionObserver in product.js only while the page's purchase form is
   out of view — it never covers the real CTA */
.sg-sticky-purchase {
  position: fixed;
  left: clamp(0.9rem, 1.6vw, 1.4rem);
  top: calc(var(--nav-h) + 10px);
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.sg-sticky-purchase.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}

.sg-sticky-purchase-inner {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: max-content;
  min-width: 11rem;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-ambient);
}

/* the product thumbnail — the actual WooCommerce product image, the
   original aspect ratio (object-fit: contain — never stretched, never
   cropped); product.js swaps it to the selected variation's image through
   WC's own events where applicable */
.sg-sticky-purchase-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.sg-sticky-purchase-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* the two purchase actions, stacked — each full width of the box */
.sg-sticky-purchase-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sg-sticky-purchase-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.62rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px var(--accent-glow);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sg-sticky-purchase-actions .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px var(--accent-glow);
}
.sg-sticky-purchase-actions .button.loading {
  opacity: 0.75;
  pointer-events: none;
}
/* the "view cart" link WC's JS appends after a successful AJAX add */
.sg-sticky-purchase-actions .added_to_cart {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.sg-sticky-purchase-actions .added_to_cart:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* the sticky buy-now — the same ghost-pill language as the hero's CTA,
   full width of the box */
.sg-sticky-purchase-actions .sg-buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-sticky-purchase-actions .sg-buy-now:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--surface-strong);
  box-shadow: 0 14px 34px -18px var(--accent-glow);
}
.sg-sticky-purchase-actions .sg-buy-now svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
/* the variable-product controls — the add uses the same accent pill as the
   AJAX button, the buy the same ghost pill; both full width of the box; the
   disabled state (no variation selected yet / the variation's stock)
   mirrors the hero's button */
.sg-sticky-purchase-actions .sg-sticky-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.62rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px var(--accent-glow);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    opacity var(--dur-fast);
}
.sg-sticky-purchase-actions .sg-sticky-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px var(--accent-glow);
}
.sg-sticky-purchase-actions .sg-sticky-submit--buy {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}
.sg-sticky-purchase-actions .sg-sticky-submit--buy:hover {
  border-color: var(--accent);
  background: var(--surface-strong);
  box-shadow: 0 14px 34px -18px var(--accent-glow);
}
.sg-sticky-purchase-actions .sg-sticky-submit svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.sg-sticky-purchase-actions .sg-sticky-submit:disabled,
.sg-sticky-purchase-actions .sg-sticky-submit.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
/* mobile (≤600px): the two purchase actions permanently fixed to the bottom
   of the viewport — always visible, no scroll dependence; the thumbnail
   stays in the hero (the bar carries only the actions); the buttons are
   sized for comfortable tapping and the padding respects the mobile safe
   area */
@media (max-width: 600px) {
  .sg-sticky-purchase {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  }

  .sg-sticky-purchase-inner {
    width: auto;
    max-width: 100%;
    flex-direction: row;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
  }

  .sg-sticky-purchase-thumb {
    display: none;
  }

  .sg-sticky-purchase-actions {
    flex-direction: row;
    flex: 1 1 auto;
    gap: 0.6rem;
  }
  .sg-sticky-purchase-actions .button,
  .sg-sticky-purchase-actions .sg-buy-now,
  .sg-sticky-purchase-actions .sg-sticky-submit {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: center;
    min-height: 48px;
    padding: 0.65rem 0.8rem;
    font-size: 0.88rem;
  }
}

/* the fixed mobile bar would otherwise sit over the footer — the page's
   bottom padding keeps every element (the footer, the reviews, the trust
   notes) reachable above the bar; body:has() releases it on pages without
   the bar (and product.js removes the box entirely for products with no
   purchase form) */
@media (max-width: 600px) {
  body:has(.sg-sticky-purchase) {
    padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ===================== ACCESSIBILITY UTILITIES ===================== */
/* the WP screen-reader-text utility (WooCommerce's own copy is filtered out
   with its stylesheet) — visually hidden, screen-reader/assistive only */
.sg-product .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}

/* ===================== REVIEW FORM STAR RATING ===================== */
/* the native review-form rating: WooCommerce's JS converts the rating select
   into this radio group (role="radio", keyboard focus, aria-checked) — the
   glyphs come from the WooCommerce font (re-declared by
   sg_woo_product_star_font), themed with the site tokens */
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars {
  display: inline-block;
  margin: 0;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars a {
  position: relative;
  height: 1em;
  width: 1em;
  text-indent: -999em;
  display: inline-block;
  text-decoration: none;
  font-size: 24px;
  color: var(--border-strong);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars a::before {
  display: block;
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-family: WooCommerce;
  content: "\e021";
  text-indent: 0;
  color: var(--border-strong);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars a:hover ~ a::before {
  content: "\e021";
  color: var(--border-strong);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars:hover a::before {
  content: "\e020";
  color: var(--accent);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars.selected a.active::before {
  content: "\e020";
  color: var(--accent);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars.selected a.active ~ a::before {
  content: "\e021";
  color: var(--border-strong);
}
.sg-product .sg-product-reviews-body #review_form .comment-form-rating .stars.selected a:not(.active)::before {
  content: "\e020";
  color: var(--accent);
}

/* the reviews' pagination (the native comment pagination) — themed like the
   shop's pagination */
.sg-product .sg-product-reviews-body .woocommerce-pagination {
  margin-top: 1.4rem;
  text-align: center;
}
.sg-product .sg-product-reviews-body .woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
}
.sg-product .sg-product-reviews-body .woocommerce-pagination ul li {
  float: none;
  border: none;
}
.sg-product .sg-product-reviews-body .woocommerce-pagination a,
.sg-product .sg-product-reviews-body .woocommerce-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color var(--dur-fast),
    color var(--dur-fast),
    background var(--dur-fast);
}
.sg-product .sg-product-reviews-body .woocommerce-pagination a:hover {
  border-color: var(--accent);
  color: var(--text);
}
.sg-product .sg-product-reviews-body .woocommerce-pagination span.current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .sg-product .product-entry-wrapper,
  .sg-product .product:has(> .woocommerce-product-gallery) {
    grid-template-areas:
      "gallery"
      "info";
    grid-template-columns: 1fr;
  }

  .sg-product .onsale {
    margin-top: 0.9rem;
    margin-inline-end: 0.9rem;
  }

  .sg-product .sg-product-highlights,
  .sg-product .sg-product-specs-list,
  .sg-product .sg-product-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sg-product .sg-product-reviews-header {
    flex-direction: column;
    align-items: stretch;
  }
  .sg-product .sg-product-reviews-breakdown {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .sg-product form.cart .button,
  .sg-product .sg-buy-now {
    flex-basis: 100%;
  }

  /* the review form's name/email fields stack full width on phones —
     two half-width inputs are too cramped on a small screen */
  .sg-product .sg-product-reviews-body #review_form .comment-form-author,
  .sg-product .sg-product-reviews-body #review_form .comment-form-email,
  .sg-product .sg-product-reviews-body #review_form .comment-form-field-input-author,
  .sg-product .sg-product-reviews-body #review_form .comment-form-field-input-email {
    display: block;
    width: 100%;
    margin-inline-start: 0;
  }

  .sg-product .sg-product-highlights,
  .sg-product .sg-product-specs-list,
  .sg-product .sg-product-steps,
  .sg-product .sg-product-contents-grid {
    grid-template-columns: 1fr;
  }
}