/* single-product.css — editorial PDP */
.single-product div.product { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: start; }
/* Gallery scrolls with the page (was sticky — removed so it no longer pins over the long color sections while scrolling). */
/* Deterministic 2:3 image box (mirrors the color gallery) so any source size — incl. low-res
   placeholders — fills a fixed box and can't collapse the gallery onto the title. */
.single-product .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top center; background: var(--color-background); display: block; border-radius: var(--radius-md); }
.single-product .summary { display: flex; flex-direction: column; gap: var(--space-md); }
.single-product .product_title { font-family: var(--font-heading-ar); font-size: 2rem; line-height: 1.2; }
.single-product .price { color: var(--color-accent-strong); font-weight: 700; font-size: 1.5rem; }
.single-product .single_add_to_cart_button { background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius-sm); padding: 14px 28px; font-size: 1rem; transition: background-color .2s var(--ease); }
.single-product .single_add_to_cart_button:hover { background: var(--color-primary-hover); }
/* Disabled (variation not yet chosen): an intentional muted fill instead of a washed-out
   half-opacity purple that read as "broken". */
.single-product .single_add_to_cart_button.button.alt.disabled,
.single-product .single_add_to_cart_button.button.alt:disabled,
.single-product .single_add_to_cart_button.button.alt.disabled:hover {
  background: var(--color-text-muted); color: #fff; opacity: 1; cursor: not-allowed; }

/* Variation pills (progressive enhancement of native selects) */
.mdmoda-swatches { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.mdmoda-swatch { border: 1px solid var(--color-accent-hover); background: var(--color-surface); border-radius: 999px;
  padding: 6px 16px; cursor: pointer; font-size: .9rem; transition: all .15s var(--ease); }
.mdmoda-swatch[aria-checked="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
/* !important to beat WooCommerce's high-specificity .woocommerce div.product form.cart .variations select { display:inline-block } */
.single-product .mdmoda-native-hidden { display: none !important; }
.single-product form.mdmoda-pills-active table.variations a.reset_variations { display: none; }
.mdmoda-swatch[aria-disabled="true"] { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.mdmoda-swatch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Variation rows: stack each label above its pills. WooCommerce's native <table> layout put the
   label cell beside the wrapped pills, so the label floated mid-height and collided on mobile. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th.label,
.single-product table.variations td.value { display: block; width: auto; padding: 0; }
.single-product table.variations tr { margin-block-end: var(--space-md); }
.single-product table.variations th.label { margin-block-end: var(--space-sm); text-align: start; }
.single-product table.variations th.label label { font-family: var(--font-heading-ar); font-size: 1.05rem; font-weight: 600; color: var(--color-foreground); }

/* Trust micro-row */
.pdp-trust { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; padding: var(--space-md) 0; margin: 0;
  border-block: 1px solid var(--color-border); font-size: .85rem; color: var(--color-foreground); }
.pdp-trust li { position: relative; padding-inline-start: 18px; }
.pdp-trust li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--color-accent-strong); }

/* Designed sections */
.pdp-sections { grid-column: 1 / -1; margin-block-start: var(--space-2xl); margin-inline: auto; display: grid; gap: var(--space-2xl); max-width: 880px; width: 100%; }
.pdp-section h2 { font-family: var(--font-heading-ar); font-size: 1.35rem; margin-block-end: var(--space-md);
  padding-block-end: var(--space-sm); border-block-end: 1px solid var(--color-accent); }
.pdp-specs { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-sm) var(--space-lg); margin: 0; }
.pdp-specs dt { color: var(--color-text-muted); font-weight: 500; }
.pdp-specs dd { margin: 0; }
.pdp-care { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-lg); }

/* Scroll reveal (reduced-motion safe: revealed state is the default until JS opts in) */
.pdp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pdp-reveal.pdp-revealed { opacity: 1; transform: none; }
.pdp-care li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-align: center; font-size: .8rem; color: var(--color-foreground); }
.pdp-care svg { color: var(--color-primary); }
.pdp-model { color: var(--color-text-muted); margin-block-end: var(--space-md); }
.btn-outline { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: var(--radius-sm); padding: 10px 20px; cursor: pointer; }

/* Size-guide modal */
.pdp-sizeguide:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(42,24,48,0.45); padding: var(--space-lg); }
/* Size-guide dialog inner panel. */
.pdp-sizeguide-inner { position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-xl); max-width: 540px; width: 100%; max-height: 85vh; overflow: auto; box-shadow: var(--shadow-xl); }
.pdp-sizeguide-inner h3 { margin-top: 0; outline: none; }
.pdp-sizeguide-inner table { width: 100%; border-collapse: collapse; }
.pdp-sizeguide-inner th, .pdp-sizeguide-inner td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: center; }
.pdp-sizeguide-close { position: absolute; inset-inline-end: var(--space-md); inset-block-start: var(--space-md); border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-primary); }

/* Mobile sticky add-to-cart bar */
.pdp-stickybar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 800; display: none;
  align-items: center; justify-content: space-between; gap: var(--space-md);
  background: var(--color-background); border-block-start: 1px solid var(--color-border);
  padding: 10px var(--space-md); box-shadow: 0 -4px 16px rgba(0,0,0,.08); transform: translateY(100%); transition: transform .25s var(--ease); }
.pdp-stickybar.is-visible { transform: translateY(0); }
.pdp-stickybar .price { font-size: 1.1rem; }
.pdp-stickybar button { background: var(--color-primary); color: var(--color-on-primary); border: 0; border-radius: var(--radius-sm); padding: 12px 22px; cursor: pointer; }

@media (max-width: 900px) {
  .single-product div.product { grid-template-columns: 1fr; }
  /* Neutralise the desktop sticky offset on mobile. WooCommerce core forces the gallery to
     position:relative (beating our `static`), so the inherited inset-block-start would shift it
     down ~100px and overlap the title — explicitly reset the offset. */
  .single-product .woocommerce-product-gallery,
  .single-product .mdmoda-gallery { position: static; inset-block-start: auto; }
  /* Stack: full-width stage on top, extra images below. `align-items:stretch` overrides the
     desktop `flex-start` so the stage fills the viewport width — without it the column
     cross-axis lets the stage collapse to the image's intrinsic width and overflow. */
  .mdmoda-gallery { flex-direction: column-reverse; align-items: stretch; gap: var(--space-md); }
  /* Extra images as a neat wrapping grid inside a soft container — all visible, no side-scroll. */
  .mdmoda-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--space-sm); max-width: 100%; padding: var(--space-sm);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .mdmoda-gallery__thumb { width: 100%; }
  .mdmoda-gallery__thumb img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .pdp-stickybar { display: flex; }
}

/* Quantity stepper inline with add-to-cart (simple products + variable add-to-cart wrap). */
.single-product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-sm); }
.single-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-sm); }
.single-product .mdmoda-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--color-accent-hover); border-radius: 999px; overflow: hidden; }
.single-product .mdmoda-qty .mdmoda-qty-btn { width: 42px; border: 0; background: var(--color-surface); color: var(--color-primary); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.single-product .mdmoda-qty .mdmoda-qty-btn:hover { background: var(--color-muted); }
.single-product .mdmoda-qty input.qty { width: 48px; border: 0; text-align: center; background: transparent; -moz-appearance: textfield; }
.single-product .mdmoda-qty input.qty::-webkit-outer-spin-button,
.single-product .mdmoda-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* PDP meta line: labeled category as a rose-gold tag; SKU only when present. */
.pdp-meta { margin-block-start: var(--space-md); display: grid; gap: var(--space-xs); }
.pdp-meta-row { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.pdp-meta-label { color: var(--color-text-muted); }
.pdp-meta-cats a { display: inline-block; padding: 2px 10px; margin-inline-start: 4px; border: 1px solid var(--color-accent-strong); border-radius: 999px; color: var(--color-accent-strong); text-decoration: none; transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.pdp-meta-cats a:hover { background: var(--color-accent-strong); color: var(--color-on-primary); }

/* Related products ("أكملي الإطلالة") — consistent grid + heading rhythm, 4:5 cards reuse cards.css. */
.related.products, .upsells.products { margin-block-start: var(--space-3xl); }
.related.products > h2, .upsells.products > h2 { font-family: var(--font-heading-ar); font-size: clamp(1.4rem, 3vw, 2rem); text-align: center; margin-block-end: var(--space-xl); }
.related.products ul.products, .upsells.products ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-lg); list-style: none; padding: 0; margin: 0; }
@media (max-width: 600px) { .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } }

/* Unified PDP gallery: inline-start thumbnail rail + main stage (RTL-aware). */
.mdmoda-gallery { display: flex; gap: var(--space-md); align-items: flex-start; }
/* Rail is height-capped to the main image via JS (--rail max-height) and scrolls internally
   so a product with many images stays a tidy column beside the photo, not one long strip. */
.mdmoda-gallery__thumbs { display: flex; flex-direction: column; gap: var(--space-sm); flex: 0 0 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mdmoda-gallery__thumb { padding: 0; border: 1px solid var(--color-border); background: none; cursor: pointer; border-radius: 4px; overflow: hidden; line-height: 0; transition: border-color .15s var(--ease); }
.mdmoda-gallery__thumb[aria-current="true"] { border-color: var(--color-primary); }
.mdmoda-gallery__thumb img { width: 64px; height: 80px; object-fit: cover; display: block; }
.mdmoda-gallery__stage { position: relative; flex: 1 1 auto; overflow: hidden; border-radius: var(--radius-md); background: var(--color-background); cursor: zoom-in; }
.mdmoda-gallery__main { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top center; display: block; transform-origin: center center; transition: transform .25s var(--ease); }
.mdmoda-gallery__stage.is-zooming .mdmoda-gallery__main { transform: scale(2); }
.single-product .woocommerce-product-gallery.mdmoda-gallery-hidden { display: none; }

/* Fullscreen lightbox */
.mdmoda-gallery__lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; background: rgba(20,12,24,.9); padding: var(--space-lg); cursor: zoom-out; }
.mdmoda-gallery__lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.mdmoda-gallery__lightbox-close { position: absolute; inset-block-start: var(--space-md); inset-inline-end: var(--space-md); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }

/* Out-of-stock variation swatches (esp. color) */
.mdmoda-swatch--oos {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: line-through;
}
.mdmoda-swatches--color .mdmoda-swatch__banner {
  position: absolute;
  inset-block-end: -0.6em;
  inset-inline-start: 50%;
  transform: translateX(50%);
  white-space: nowrap;
  font-size: 0.62rem;
  line-height: 1.4;
  padding: 0 0.4em;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  text-decoration: none;
}

/* Editorial color-by-color sections */
.pdp-color-head { display: flex; align-items: center; gap: var(--space-md); margin-block-end: var(--space-lg); }
.pdp-color-swatch { width: 48px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); flex: 0 0 auto; }
.pdp-color-head h2 { margin: 0; flex: 1; }
.pdp-color-head .mdmoda-shop-color { flex: 0 0 auto; }
.pdp-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: start; }
.pdp-color-photo { width: 100%; height: auto; display: block; border-radius: var(--radius-md); background: var(--color-background); }
@media (max-width: 640px) { .pdp-color-grid { gap: var(--space-sm); } }