/* =====================================================================
   mantoamigol.ir: product-page UX fixes (Oct 2026 audit)
   Where to paste: Elementor > Site Settings > Custom CSS
                   (or Appearance > Customize > Additional CSS).
   Pair with: amigol-product-page.php (Code Snippets / child functions.php)
   All selectors were taken from the live DOM on 2026-10-18.
   RTL-safe: uses logical properties (inset-inline-*, margin-inline-*, ...).
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Shared tokens. Change brand colours here once.
   --amg-brand defaults to the Elementor Kit "Primary" global colour
   (#0B1A33) so the button matches the rest of the site.
   --------------------------------------------------------------------- */
:root{
  --amg-brand: var(--e-global-color-primary, #0B1A33);
  --amg-brand-text: #fff;
  --amg-price: #0B1A33;      /* v1.3.2: brand navy, 17:1 on white (was olive) */
  --amg-old-price: #6B6B6B;  /* grey, 5.3:1 on white (was #958E09 @70% opacity = 2.3:1) */
  --amg-bottom-menu-h: 63px; /* #wp-bottom-menu height; JS overwrites this with the real value */
}

/* ---------------------------------------------------------------------
   1. Site font + Persian digits on the WooCommerce product template.
   Root cause of the "mixed digits": the single-product page is rendered
   by the classic Woo template (#primary.content-area), which inherits
   Hello Elementor's system font stack, not the Kit font. The Kit font
   "iranyekanwebregular_FaNum" (already loaded by the site) draws ۰-۹
   glyphs for 0-9, so this switches the whole product page to the site
   font AND to Persian digits with no markup change.
   --------------------------------------------------------------------- */
body.single-product #primary,
body.single-product .amg-sticky-bar,
body.single-product .woocommerce-variation-price,
body.single-product .torobpay-widget,
body.single-product [class*="snapppay"]{
  font-family: var(--e-global-typography-text-font-family, "iranyekanwebregular_FaNum"), Tahoma, sans-serif;
}
body.single-product #primary h1.product_title{
  font-family: var(--e-global-typography-primary-font-family, "iranyekanwebextrabold_FaNum"), Tahoma, sans-serif;
  font-size: clamp(1.4rem, 5.2vw, 2rem);   /* title was ~46px on a 390px screen */
  line-height: 1.5;
  margin-block-end: .4em;
}

/* ---------------------------------------------------------------------
   2. Price contrast (WCAG 2.2 SC 1.4.3, >= 4.5:1).
   del (old price) measured 2.26:1 (#958E09 at opacity .7 on #fff),
   ins (current) 3.41:1. New values: del 5.33:1, ins 6.02:1.
   --------------------------------------------------------------------- */
.single-product .summary p.price,
.single-product .woocommerce-variation-price .price,
.related.products .price,
.amg-sticky-bar__price{
  color: var(--amg-price);
}
.single-product .summary p.price ins,
.single-product .woocommerce-variation-price ins,
.related.products .price ins,
.amg-sticky-bar__price ins{
  color: var(--amg-price);
  text-decoration: none;
  font-weight: 700;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce ul.products li.product .price del,
.single-product .summary p.price del,
.single-product .woocommerce-variation-price del,
.related.products .price del,
.amg-sticky-bar__price del{
  color: var(--amg-old-price);
  opacity: 1;
  font-size: .8em;
  margin-inline-end: .35em;
}
.single-product .price del .amount,
.related.products .price del .amount,
.amg-sticky-bar__price del .amount{ color: var(--amg-old-price); }

/* ---------------------------------------------------------------------
   3. Promo lines in the short description.
   The short description uses two <h5> lines (free shipping, Rubika
   channel). These render as large red and pink headings. Restyle them as a
   compact list with bullet markers. The PHP snippet also converts them to
   <ul class="amg-promos"> for correct semantics; this CSS covers both.
   --------------------------------------------------------------------- */
.woocommerce-product-details__short-description h5,
.woocommerce-product-details__short-description .amg-promos li{
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 0 .35rem;
  padding-inline-start: 1.4em;
}
.woocommerce-product-details__short-description h5::before,
.woocommerce-product-details__short-description .amg-promos li::before{
  content: "";
  position: absolute;
  inset-inline-start: .2em;
  inset-block-start: .65em;
  inline-size: .5em; block-size: .5em;
  border-radius: 50%;
  background: currentColor;
}
.woocommerce-product-details__short-description h5 span[style*="color"],
.woocommerce-product-details__short-description .amg-promos span[style*="color"]{
  color: #2B3445 !important;          /* v1.3.2: calm dark text instead of red/pink */
}
.woocommerce-product-details__short-description .amg-promos{
  list-style: none; margin: 0 0 .8rem; padding: 0;
}
.woocommerce-product-details__short-description a{ text-underline-offset: .2em; }
.woocommerce-product-details__short-description p{ margin-block: 0 .35rem; }

/* ---------------------------------------------------------------------
   4. Colour swatches: 44px tap targets with a visible colour name.
   Woo Variation Swatches sets 30x30 via CSS vars; raise them and print
   the term name (data-title) under each swatch.
   (Also set WVS > Settings > Single product: width/height = 44 so the
   plugin's own CSS agrees.)
   --------------------------------------------------------------------- */
.woo-variation-swatches .variable-items-wrapper{
  --wvs-single-product-item-width: 44px;
  --wvs-single-product-item-height: 44px;
  gap: 14px 30px;                     /* wide column gap so long names (طوسی(خاکی)) don't collide */
  padding-block-end: 4px;
  padding-inline: 14px;
}
.woo-variation-swatches .single-product .variable-items-wrapper .variable-item,
.woo-variation-swatches.single-product .variable-items-wrapper .variable-item{
  inline-size: 44px; block-size: 44px;
  margin: 0 0 1.6rem !important;      /* room for the name below */
  overflow: visible;
}
/* WVS uses li::before/::after for its hover tooltip (opacity:0, font-size:0,
   arrow borders). Turn the tooltip off for colour swatches and reuse ::after as a
   permanent label, because the name is now always visible. */
.woo-variation-swatches.single-product .color-variable-items-wrapper .variable-item[data-wvstooltip]::before{
  display: none !important;
}
.woo-variation-swatches.single-product .color-variable-items-wrapper .variable-item[data-wvstooltip]::after{
  content: attr(data-title) !important;
  display: block !important;
  position: absolute;
  inset-block-start: calc(100% + 4px) !important;
  inset-block-end: auto !important;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(50%) !important;   /* RTL: centre under the swatch */
  inline-size: max-content !important; block-size: auto !important;
  border: 0 !important; background: none !important;
  opacity: 1 !important; visibility: visible !important;
  white-space: nowrap;
  font-size: 12px !important; line-height: 1.3 !important; color: #333;
  pointer-events: none;
}
.woo-variation-swatches.single-product .color-variable-items-wrapper .variable-item.selected[data-wvstooltip]::after,
.woo-variation-swatches.single-product .color-variable-items-wrapper .variable-item[aria-checked="true"][data-wvstooltip]::after{
  font-weight: 700; color: #000;
}
.woo-variation-swatches.single-product .color-variable-items-wrapper .variable-item.selected{
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--amg-brand) !important;
}
/* "رنگ:" row label + selected name, slightly bigger */
.single-product table.variations th.label{ font-size: 1rem; padding-block-end: .5rem; }
.single-product .woo-selected-variation-item-name{ font-weight: 700; }

/* ---------------------------------------------------------------------
   5. Add-to-cart: clear enabled vs "pick a colour first" state.
   Before: Woo-default purple #7F54B3 at opacity .5 (white text 2.1:1).
   It looks broken, not "waiting for a choice".
   Now: enabled = solid brand colour; needs-selection = outlined, full
   contrast, with a hint line (text comes from the PHP snippet).
   --------------------------------------------------------------------- */
.single-product .single_add_to_cart_button.button.alt{
  background: var(--amg-brand);
  color: var(--amg-brand-text);
  border: 2px solid var(--amg-brand);
  border-radius: 10px;
  min-block-size: 48px;
  padding-inline: 1.5rem;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  opacity: 1;
  flex: 1 1 auto;
}
.single-product .single_add_to_cart_button.button.alt:hover,
.single-product .single_add_to_cart_button.button.alt:focus-visible{
  filter: brightness(1.15);
  outline: 3px solid color-mix(in srgb, var(--amg-brand) 35%, transparent);
  outline-offset: 2px;
}
.single-product .single_add_to_cart_button.button.alt.disabled,
.single-product .single_add_to_cart_button.button.alt.wc-variation-selection-needed{
  background: #fff;
  color: var(--amg-brand);
  border: 2px solid var(--amg-brand);  /* v1.3.1: solid, no dashed outline */
  opacity: 1;
  cursor: pointer;                     /* WooCommerce shows "please select" on click */
}
.single-product .woocommerce-variation-add-to-cart{
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
}
.single-product .woocommerce-variation-add-to-cart .quantity input.qty{
  min-block-size: 48px; border-radius: 10px;
}
.amg-pick-hint{
  flex-basis: 100%;
  margin: 0; font-size: .85rem; color: #555;
}
.woocommerce-variation-add-to-cart-enabled .amg-pick-hint{ display: none; }

/* ---------------------------------------------------------------------
   6. Trust row under the button (markup from PHP hook
   woocommerce_after_add_to_cart_button): size guide, returns, Rubika.
   --------------------------------------------------------------------- */
.amg-trust{
  flex-basis: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-block: 6px 4px; padding: 0; list-style: none;
}
.amg-trust a{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-block-size: 56px; padding: 6px 4px;
  border: 1px solid #E3E5EA; border-radius: 10px; background: #FAFAFB;
  color: #1F2430; font-size: 12px; line-height: 1.4; text-align: center; text-decoration: none;
}
.amg-trust a:focus-visible{ outline: 2px solid var(--amg-brand); outline-offset: 2px; }
.amg-trust svg{ inline-size: 20px; block-size: 20px; flex: none; }

/* ---------------------------------------------------------------------
   7. Mobile sticky buy bar (markup + JS from PHP snippet).
   Sits ABOVE the existing #wp-bottom-menu (63px) and respects the
   iPhone home-indicator safe area. Hidden while the real button is on
   screen (.is-hidden, set by IntersectionObserver).
   --------------------------------------------------------------------- */
.amg-sticky-bar{ display: none; }
@media (max-width: 767px){
  .amg-sticky-bar{
    display: flex; align-items: center; gap: 10px;
    position: fixed; z-index: 998;
    inset-inline: 0;
    inset-block-end: calc(var(--amg-bottom-menu-h) + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px;
    background: #fff;
    border-block-start: 1px solid #E6E6E6;
    box-shadow: 0 -4px 14px rgba(0,0,0,.08);
    transition: transform .25s ease, opacity .25s ease;
  }
  body.amg-no-bottom-menu .amg-sticky-bar{
    inset-block-end: 0;
    padding-block-end: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .amg-sticky-bar.is-hidden{ transform: translateY(120%); opacity: 0; pointer-events: none; }
  .amg-sticky-bar__info{ flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
  .amg-sticky-bar__price{ font-size: 1rem; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .amg-sticky-bar__price del{ display: none; }   /* keep the bar to one clean price */
  .amg-sticky-bar__price .screen-reader-text{ position: absolute !important; clip: rect(1px,1px,1px,1px); }
  .amg-sticky-bar__meta{ font-size: 12px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .amg-sticky-bar__btn{
    flex: 0 0 auto; min-block-size: 46px; padding-inline: 18px;
    border: 0; border-radius: 10px;
    background: var(--amg-brand); color: var(--amg-brand-text);
    font: 700 15px/1 inherit; font-family: inherit;
  }
  .amg-sticky-bar__btn.is-choose{ background: #fff; color: var(--amg-brand); border: 2px solid var(--amg-brand); }
  body.single-product.amg-has-sticky-bar{ padding-block-end: 72px; }   /* keep footer reachable */
  .amg-flash{ animation: amg-flash 1.2s ease 1; border-radius: 8px; }
  @keyframes amg-flash{ 0%,100%{ box-shadow: none; } 30%{ box-shadow: 0 0 0 3px var(--amg-brand); } }
}

/* ---------------------------------------------------------------------
   8. Slimmer, shrinking mobile header.
   Header container .elementor-element-373bfd6 (Elementor Pro sticky,
   template 51357) is 134px fixed = 16% of an 844px screen. It has two rows:
   77590bb (menu/logo/account/cart, 77px) + fe90efc (search, 57px).
   At rest: tighter paddings (~110px). After 40px scroll (body.amg-scrolled,
   set by the PHP snippet's JS) the search row collapses: ~60px.
   --------------------------------------------------------------------- */
@media (max-width: 767px){
  .elementor-51357 .elementor-element.elementor-element-77590bb{
    --padding-top: 8px; --padding-bottom: 8px;
    padding-block: 8px; min-block-size: 0;
    transition: padding .2s ease;
  }
  .elementor-51357 .elementor-element.elementor-element-fe90efc{
    --padding-top: 0px; --padding-bottom: 8px;
    padding-block: 0 8px;
    max-block-size: 60px; overflow: hidden;
    transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
  }
  body.amg-scrolled .elementor-51357 .elementor-element.elementor-element-77590bb{ padding-block: 4px; }
  body.amg-scrolled .elementor-51357 .elementor-element.elementor-element-fe90efc{
    max-block-size: 0; padding-block: 0; opacity: 0;
  }
  body.amg-scrolled .elementor-51357 .elementor-element-373bfd6{ box-shadow: 0 2px 10px rgba(0,0,0,.08); }
}

/* ---------------------------------------------------------------------
   9. Torob Pay badge on product cards.
   Plugin CSS: .torobpay-product-badge{position:absolute;top:8px;right:8px;z-index:99}.
   z-index 99 overlays the photo corner (and can slide over the sticky
   header). Move it out of the photo: below the image as a small inline
   chip that also shows its installment text.
   --------------------------------------------------------------------- */
.related.products .torobpay-product-badge,
.up-sells .torobpay-product-badge,
ul.products li.product .torobpay-product-badge{
  position: static;
  z-index: auto;
  display: flex; justify-content: flex-start;
  order: 2;
  margin-block: 6px 2px;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link{ display: flex; flex-direction: column; }
.woocommerce ul.products li.product a.woocommerce-loop-product__link > img{ order: 1; margin-block-end: 0; }
.woocommerce ul.products li.product a.woocommerce-loop-product__link > .woocommerce-loop-product__title{ order: 3; }
.woocommerce ul.products li.product a.woocommerce-loop-product__link > .price{ order: 4; }
ul.products li.product .torobpay-product-badge-inner{ padding-inline-end: 8px; gap: 4px; }
ul.products li.product .torobpay-product-badge-icon{ block-size: 20px !important; }
ul.products li.product .torobpay-product-badge-text{
  max-width: none; opacity: 1; font-size: 11px; color: #2B3A1E;
}
/* JetEngine listing cards (homepage/shop): keep badge in-photo but low */
.jet-listing-grid .torobpay-product-badge{ z-index: 2; }

/* ---------------------------------------------------------------------
   10. Homepage cards: stray "تومان".
   In the JetEngine listing item each card has the dynamic price field
   (.elementor-element-ddf9927, which already contains a currency symbol
   that the site hides) PLUS a separate static Heading "تومان"
   (.elementor-element-0098b21, 12px #9D9D9D). The heading is detached
   from the number, light grey, and stays visible when a price is empty.
   Fix: hide the static heading, show the real symbol once after the
   current price. (Cleaner: delete the heading in the listing template,
   see ELEMENTOR-STEPS.md.)
   --------------------------------------------------------------------- */
.elementor-element.elementor-element-0098b21{ display: none !important; }
.elementor-element-ddf9927 .woocommerce-Price-currencySymbol{
  display: inline !important;
  font-size: .8em; color: #6B6B6B; margin-inline-start: .25em;
}
.elementor-element-ddf9927 del .woocommerce-Price-currencySymbol{ display: none !important; }

/* ---------------------------------------------------------------------
   11. (Optional) Interim swatch colour correction for Parva.
   The swatch colours come from the colour attribute terms and do not match
   the fabric in the photos (sampled from gallery images):
     سبز سدری  swatch #A0D67A (lime)    vs fabric ~#9AA092 (sage grey-green)
     آبی نفتی  swatch #2D7BBF (bright)  vs fabric ~#3E4E62 (dusty navy)
   Proper fix: Products > Attributes > رنگ > edit term colour.
   Uncomment ONLY if those terms are not shared with products whose
   fabric really is lime / bright blue.
   --------------------------------------------------------------------- */
/*
.color-variable-item-blue-navy .variable-item-span-color{ background-color:#3E4E62 !important; }
.color-variable-item-سبز-سدری .variable-item-span-color{ background-color:#9AA58F !important; }
*/

/* v1.2: single-row RTL swatches. Only the row scrolls, never the page.
   Equal 44px targets for colours; auto-width size chips fit XXL / فری سایز. */
body.single-product form.variations_form .variable-items-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  gap: 14px;
  max-inline-size: 100%; min-inline-size: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  padding-block: 8px 12px;
  padding-inline: 8px;
}
body.single-product form.variations_form .variable-items-wrapper::-webkit-scrollbar { display:none; }
body.single-product form.variations_form .variable-item {
  flex: 0 0 auto; scroll-snap-align: start;
}
/* Reserve horizontal and vertical space for existing always-visible colour labels. */
body.single-product form.variations_form .color-variable-items-wrapper {
  gap: 30px; padding-inline: 16px; padding-block-end: 12px;
}
body.single-product form.variations_form .button-variable-items-wrapper .button-variable-item {
  inline-size: auto !important; min-inline-size: 48px;
  block-size: auto !important; min-block-size: 44px;
  box-sizing: border-box;
  padding-inline: 12px;
  margin: 0 !important;
  border: 2px solid #697080; border-radius: 8px !important;
  background: #fff; color: #0B1A33;
  font-family: inherit; font-size: 15px; line-height: 1.4;
}
body.single-product form.variations_form .button-variable-item .variable-item-contents {
  inline-size: auto; min-block-size: 40px;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; padding: 0;
}
body.single-product form.variations_form .button-variable-item .variable-item-span-button {
  white-space: nowrap; font-size: 15px; line-height: 1.4; color: inherit;
}
body.single-product form.variations_form .button-variable-item.selected,
body.single-product form.variations_form .button-variable-item[aria-checked="true"] {
  background: #0B1A33; color: #fff; border-color: #0B1A33;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0B1A33;
}
body.single-product form.variations_form .variable-item:focus-visible { outline: 3px solid #0B1A33; outline-offset: 3px; }
body.single-product form.variations_form .button-variable-item.disabled,
body.single-product form.variations_form .button-variable-item[aria-disabled="true"] {
  background: #eee; color: #666; opacity: .65;
  text-decoration: line-through; cursor: not-allowed;
}
/* Prevent flex/table ancestors from imposing their content's min-width on the row. */
body.single-product .summary, body.single-product form.variations_form,
body.single-product form.variations_form td.value { min-inline-size: 0; }
body.single-product form.variations_form table.variations { table-layout: fixed; inline-size: 100%; }

/* v1.2: Woo FlexSlider thumbnails must stay beneath the main viewport, one row.
   Never override the initialized slider's wrapper transform or slide widths. */
body.single-product .woocommerce-product-gallery { position: relative; }
body.single-product .woocommerce-product-gallery .flex-viewport { inline-size: 100%; }
body.single-product .woocommerce-product-gallery ol.flex-control-thumbs,
body.single-product .amg-gallery-thumbs {
  clear: both; display: flex !important; flex-wrap: nowrap !important;
  gap: 8px; inline-size: 100%; max-inline-size: 100%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-inline: contain; scroll-snap-type: inline proximity;
  margin-block: 10px 0 !important; padding: 4px !important; list-style: none;
}
body.single-product .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar,
body.single-product .amg-gallery-thumbs::-webkit-scrollbar { display:none; }
body.single-product .woocommerce-product-gallery ol.flex-control-thumbs li,
body.single-product .amg-gallery-thumbs > button {
  float: none !important; flex: 0 0 68px;
  inline-size: 68px !important; margin: 0 !important;
  scroll-snap-align: start;
}
body.single-product .woocommerce-product-gallery ol.flex-control-thumbs img,
body.single-product .amg-gallery-thumbs img {
  display: block; inline-size: 100%; block-size: 80px;
  object-fit: cover; border-radius: 6px;
}
body.single-product .amg-gallery-thumbs > button { padding: 0; background: none; border: 2px solid transparent; }
body.single-product .amg-gallery-thumbs > button[aria-current="true"] { border-color: #0B1A33; }
/* Native scroll-snap fallback is applied only when FlexSlider isn't initialized.
   Jet gallery fallback is opt-in with Elementor class amg-gallery-fallback. */
body.single-product .amg-gallery-track {
  display: flex !important; flex-wrap: nowrap !important;
  inline-size: 100% !important; max-inline-size: 100%;
  overflow-x: auto !important; overflow-y: hidden;
  scroll-snap-type: inline mandatory; scrollbar-width: none;
  overscroll-behavior-inline: contain; touch-action: pan-x pan-y;
  transform: none !important; gap: 0;
}
body.single-product .amg-gallery-track::-webkit-scrollbar { display:none; }
body.single-product .amg-gallery-track > .amg-gallery-slide {
  flex: 0 0 100%; inline-size: 100% !important; min-inline-size: 0;
  position: relative !important; float: none !important;
  margin: 0 !important; scroll-snap-align: start; scroll-snap-stop: always;
}
body.single-product .amg-gallery-slide img:not(.zoomImg) { display: block; inline-size: 100%; block-size: auto; }
body.single-product .amg-gallery-nav {
  display: flex; gap: 8px; justify-content: center; margin-block: 8px;
}
body.single-product .amg-gallery-nav button {
  min-inline-size: 44px; min-block-size: 44px;
  padding: 6px 14px; border: 1px solid #0B1A33;
  border-radius: 8px; color: #0B1A33; background: #fff;
  font: inherit; font-size: 20px;
}
@media (prefers-reduced-motion: reduce) {
  body.single-product .amg-gallery-track { scroll-behavior: auto; }
}
/* Hidden stale lists must not be resurrected by the flex display override. */
body.single-product .woocommerce-product-gallery ol.flex-control-thumbs[hidden] { display: none !important; }
/* WVS skins can paint an inner white face; inherit the chip's selected fill. */
body.single-product form.variations_form .button-variable-item .variable-item-contents {
  background: inherit !important; color: inherit !important; opacity: 1 !important;
}
body.single-product form.variations_form .button-variable-item.selected .variable-item-span-button,
body.single-product form.variations_form .button-variable-item[aria-checked="true"] .variable-item-span-button {
  color: #fff !important;
}
body.single-product form.variations_form .button-variable-item.disabled .variable-item-span-button { opacity: 1 !important; }


/* =====================================================================
   v1.3.1 fixes
   ===================================================================== */

/* A. Variation table: label ABOVE the options, full width.
   table-layout:fixed split the row 50/50, squeezing the size options into a
   narrow column so their text wrapped onto several lines. */
body.single-product form.variations_form table.variations,
body.single-product form.variations_form table.variations tbody,
body.single-product form.variations_form table.variations tr,
body.single-product form.variations_form table.variations th,
body.single-product form.variations_form table.variations td {
  display: block; inline-size: 100%; table-layout: auto;
}
body.single-product form.variations_form table.variations th.label { padding: 0 0 4px; text-align: start; }
body.single-product form.variations_form table.variations td.value { padding: 0 0 10px; }

/* B. Size options use Woo Variation Swatches RADIO style
   (.radio-variable-items-wrapper, labels like «سایز 1 مناسب 38 و40").
   Turn each one into a one-line chip; the row scrolls sideways if needed. */
body.single-product form.variations_form .radio-variable-items-wrapper { gap: 8px; box-sizing: border-box; inline-size: 100%; }
body.single-product form.variations_form .radio-variable-item {
  position: relative; /* keeps the hidden radio inside the scrolling row */
  flex: 0 0 auto; inline-size: auto !important; block-size: auto !important;
  margin: 0 !important; padding: 0 !important;
  border: 2px solid #697080; border-radius: 10px !important;
  background: #fff; color: #0B1A33; box-shadow: none !important;
}
body.single-product form.variations_form .radio-variable-item .variable-item-contents { padding: 0; background: transparent !important; }
body.single-product form.variations_form .radio-variable-item .variable-item-radio-input-wrapper {
  display: flex; align-items: center; justify-content: center;
  min-block-size: 44px; padding-inline: 14px; margin: 0; cursor: pointer;
  white-space: nowrap;
}
/* hide the round radio dot; the whole chip is the control */
body.single-product form.variations_form .radio-variable-item .variable-item-radio-input {
  position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none;
}
body.single-product form.variations_form .radio-variable-item .variable-item-radio-value-wrapper {
  white-space: nowrap; font-size: 14px; line-height: 1.4; font-weight: 600; color: inherit;
}
body.single-product form.variations_form .radio-variable-item.selected,
body.single-product form.variations_form .radio-variable-item[aria-checked="true"] {
  background: #0B1A33; color: #fff; border-color: #0B1A33;
}
body.single-product form.variations_form .radio-variable-item.disabled,
body.single-product form.variations_form .radio-variable-item[aria-disabled="true"] {
  background: #f1f1f1; color: #777; border-color: #ccc; opacity: .7;
  text-decoration: line-through;
}
body.single-product form.variations_form .radio-variable-item.disabled .variable-item-radio-input-wrapper { cursor: not-allowed; }

/* C. Gallery arrows INSIDE the thumbnail strip, at both ends, as ‹ ›. */
body.single-product .amg-gallery-nav { display: none !important; } /* old v1.2 buttons under the strip */
body.single-product .amg-thumbs-wrap { position: relative; margin-block-start: 10px; }
body.single-product .amg-thumbs-wrap > ol.flex-control-thumbs,
body.single-product .amg-thumbs-wrap > .amg-gallery-thumbs {
  margin-block: 0 !important; padding-inline: 40px !important; scroll-padding-inline: 40px;
  box-sizing: border-box; inline-size: 100% !important;
}
body.single-product .amg-thumbs-arrow {
  position: absolute; inset-block: 4px; z-index: 2;
  inline-size: 34px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: rgba(255,255,255,.92); color: #0B1A33;
  font-size: 28px; line-height: 1; font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer;
}
body.single-product .amg-thumbs-arrow:hover,
body.single-product .amg-thumbs-arrow:focus-visible { background: #0B1A33; color: #fff; outline: none; }
body.single-product .amg-thumbs-prev { inset-inline-start: 0; }
body.single-product .amg-thumbs-next { inset-inline-end: 0; }


/* =====================================================================
   v1.3.2: price, promo lines, rounded main image
   ===================================================================== */

/* Price: bigger, bold navy; old price smaller grey with a line through it. */
.single-product .summary p.price,
.single-product .woocommerce-variation-price .price {
  font-size: 1.35rem; font-weight: 800; line-height: 1.6;
}
.single-product .summary p.price .woocommerce-Price-currencySymbol,
.single-product .woocommerce-variation-price .woocommerce-Price-currencySymbol {
  font-size: .75em; font-weight: 500; margin-inline-start: .2em;
}

/* Promo lines (free shipping, Rubika channel): their colours came from inline
   colour styles typed into each product's short description (red and pink).
   Override them so the lines share one calm style in a soft box. */
.woocommerce-product-details__short-description .amg-promos {
  background: #F5F7FA; border: 1px solid #E3E8EF; border-radius: 12px;
  padding: 10px 14px; margin: 0 0 1rem;
}
.woocommerce-product-details__short-description .amg-promos li,
.woocommerce-product-details__short-description h5 {
  color: #2B3445 !important; font-size: .92rem; font-weight: 600; margin-block: .25rem;
}
.woocommerce-product-details__short-description .amg-promos li *,
.woocommerce-product-details__short-description h5 * {
  color: inherit !important; background: none !important;
  font-size: inherit !important; font-weight: inherit !important;
}
.woocommerce-product-details__short-description .amg-promos li::before,
.woocommerce-product-details__short-description h5::before { background: #1E7B34; } /* green dots */
.woocommerce-product-details__short-description .amg-promos a,
.woocommerce-product-details__short-description h5 a {
  color: #0B5CAD !important; text-decoration: underline; text-underline-offset: .25em;
}

/* Main product image: rounded corners. */
body.single-product .woocommerce-product-gallery .flex-viewport,
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .amg-gallery-track {
  border-radius: 14px; overflow: hidden;
}
body.single-product .woocommerce-product-gallery__image img:not(.zoomImg) { border-radius: 14px; }
body.single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 8px; }


/* =====================================================================
   v1.3.3
   ===================================================================== */

/* A. Thumbnail arrows: just the arrow, no box; only its colour changes on hover. */
body.single-product .amg-thumbs-arrow,
body.single-product .amg-thumbs-arrow:hover,
body.single-product .amg-thumbs-arrow:focus,
body.single-product .amg-thumbs-arrow:focus-visible,
body.single-product .amg-thumbs-arrow:active {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
}
body.single-product .amg-thumbs-arrow { color: #8A93A6; font-size: 34px; transition: color .15s; }
body.single-product .amg-thumbs-arrow:hover,
body.single-product .amg-thumbs-arrow:focus-visible { color: #0B1A33; }
body.single-product .amg-thumbs-arrow:focus-visible { outline: 2px solid #0B1A33; outline-offset: -2px; }

/* B. Free-shipping line: an inviting green "good news" chip with a truck icon. */
.woocommerce-product-details__short-description .amg-promos li.amg-promo--ship {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .8em; padding-inline-start: .8em; margin-block-end: .5rem;
  background: #E8F5EC; border-radius: 999px;
  color: #14653A !important; font-weight: 700;
}
.woocommerce-product-details__short-description .amg-promos li.amg-promo--ship::before {
  position: static; flex: 0 0 auto; inline-size: 1.25em; block-size: 1.25em;
  border-radius: 0; background: #14653A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 17V6H3v11h2'/%3E%3Cpath d='M14 9h4l3 4v4h-2'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3Cpath d='M9.5 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 17V6H3v11h2'/%3E%3Cpath d='M14 9h4l3 4v4h-2'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3Cpath d='M9.5 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* C. Desktop/tablet: sizes and colours wrap onto more rows when they don't fit
   (phones keep the single sideways-scrolling row). */
@media (min-width: 768px) {
  body.single-product form.variations_form .variable-items-wrapper {
    flex-wrap: wrap !important; overflow: visible; scroll-snap-type: none;
    row-gap: 10px;
  }
}

/* D. No WooCommerce purple: Woo's "alt" (buy) buttons use the navy palette in
   every state. Woo's own ".button.alt.disabled:hover" rule turned the
   add-to-cart button purple on hover. Plain grey Woo buttons are untouched. */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--amg-brand); border-color: var(--amg-brand); color: #fff;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover,
.single-product .single_add_to_cart_button.button.alt:hover,
.amg-sticky-bar__btn:hover {
  background-color: #1F3A66; border-color: #1F3A66; color: #fff; filter: none;
}
/* "pick a size/colour first" state stays outlined, also on hover */
.woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled:hover,
.single-product .single_add_to_cart_button.button.alt.disabled:hover,
.single-product .single_add_to_cart_button.button.alt.wc-variation-selection-needed:hover {
  background-color: #fff; border-color: var(--amg-brand); color: var(--amg-brand); filter: none;
}
.amg-sticky-bar__btn.is-choose:hover { background-color: #fff; color: var(--amg-brand); }

/* v1.4.0: no list bullets beside size/colour chips */
body.single-product ul.variable-items-wrapper,
body.single-product ul.variable-items-wrapper > li { list-style: none; }
body.single-product ul.variable-items-wrapper > li::marker { content: ""; }