/* =====================================================================
   FORSIGHT — Premium Product Detail Page  ·  v1.1
   Built against the real product_details template markup.
   No HTML changes. Existing classes only (.col-product-info,
   .product-images-carousel, .price, .product-card, #floatingAddToCart,
   .btn-add-to-cart, etc). CSS variables drive the whole system.

   v1.1 changes are marked ✦ CHANGED / ✦ NEW. Everything else is your
   original code, untouched. Type scale and font stack are unchanged.
   ===================================================================== */

:root {
  /* Luxury warm-neutral system */
  --color-primary: #A48D78;
  --color-primary-hover: #8E7866;
  --color-secondary: #CBB9A4;
  --color-surface: #E6DAC8;
  --color-background: #F4F1EA;
  --color-white: #FAF9F6;
  --color-text: #3B342E;

  /* ✦ CHANGED: #7A7066 measured 4.3:1 on the ivory background — below
     the 4.5:1 accessible floor, and several rules dropped it further
     with opacity. #6B6157 measures 5.7:1 and looks near-identical. */
  --color-text-light: #6B6157;

  /* ✦ NEW: action colour.
     #A48D78 behind #FAF9F6 text measures 3.0:1 — a fail on the most
     important control on the site. Espresso measures 10.2:1 and reads
     more premium against ivory. --color-primary stays exactly as it
     was and keeps its job as the decorative brand accent. */
  --color-cta: #4A3B2E;
  --color-cta-hover: #5C4A3A;

  /* ✦ NEW: clay dark enough to use as text/icons (5.2:1) */
  --color-accent-deep: #7C6650;

  /* ✦ NEW: semantic colours — the palette had no warm/cool contrast
     at all, so nothing on the page drew the eye */
  --color-rust: #8C4A32;
  --color-olive: #5E6A4E;

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, .06);
  --radius: 20px;

  --pdp-bg: var(--color-white);
  --pdp-ivory: var(--color-background);
  --pdp-warm-gray: var(--color-text-light);
  --pdp-charcoal: var(--color-text);
  --pdp-border: rgba(59, 52, 46, 0.10);

  --pdp-radius-lg: var(--radius);
  --pdp-radius-md: 16px;
  --pdp-radius-sm: 10px;
  --pdp-radius-pill: 999px;

  --pdp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pdp-fast: 200ms var(--pdp-ease);
  --pdp-medium: 380ms var(--pdp-ease);
  --pdp-slow: 600ms var(--pdp-ease);

  --pdp-shadow-soft: var(--shadow-soft);
  --pdp-shadow-lift: 0 20px 50px rgba(74, 59, 46, 0.24);

  --pdp-sticky-offset: 96px;
  --pdp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ✦ NEW (optional, inert until used): collection accents.
   Paste one hidden marker into a product description and that
   product's icons, focus rings and title rule pick up the colour:
   <span class="fs-c-kafd"></span>  ·  fs-c-redsea  ·  fs-c-optical
   Do nothing and everything stays warm clay exactly as before. */
body:has(.fs-c-kafd)    { --color-accent-deep: #4A5560; }
body:has(.fs-c-redsea)  { --color-accent-deep: #2F6B6B; }
body:has(.fs-c-optical) { --color-accent-deep: #3F5A7A; }
.fs-c-kafd, .fs-c-redsea, .fs-c-optical { display: none; }

body {
  background: var(--color-white);
  /* ✦ NEW: stops Samsung Internet / Chrome Android auto-dark from
     inverting the palette into muddy grey */
  color-scheme: only light;
  -webkit-tap-highlight-color: transparent;
}

.product-card,
.box-1-1.product-images-carousel {
  background: var(--color-white);
}

.tab-pane#buy,
#description.tab-pane {
  background: transparent;
}

/* ✦ NEW: every number on the page. Without direction isolation an
   Arabic page can render "276.00 ر.س" with the digits and currency in
   the wrong order. Tabular figures stop the price shifting width. */
.total-price,
.before-price,
.product-formatted-price,
.product-formatted-price-old,
.money-save,
.pdp-qty-value,
.pdp-floating-price,
.product-card-price,
.products-slider .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------
   1. PREMIUM GALLERY
   --------------------------------------------------------------------- */
.box-1-1.product-images-carousel {
  border-radius: var(--pdp-radius-lg);
  overflow: hidden;
  background: var(--pdp-ivory);
}

.box-1-1.product-images-carousel .carousel-img {
  transition: transform var(--pdp-slow);
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
}

/* ✦ CHANGED: will-change moved off the base rule and onto :hover.
   It was permanently holding a compositor layer on every product page,
   which costs real memory on mid-range Android. */
.box-1-1.product-images-carousel .image-link:hover .carousel-img {
  will-change: transform;
  transform: translateZ(0) scale(1.045);
}

.product-images-carousel-thumbs {
  margin-top: 14px;
  gap: 4px;
}

.product-images-carousel-thumbs .box-1-1 {
  border-radius: var(--pdp-radius-sm);
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: border-color var(--pdp-fast), opacity var(--pdp-fast);
  opacity: 0.55;
  cursor: pointer;
}

.product-images-carousel-thumbs .box-1-1:hover {
  opacity: 0.85;
}

.product-images-carousel-thumbs .slick-current .box-1-1,
.product-images-carousel-thumbs .thumb-image-a.is-active .box-1-1 {
  opacity: 1;
  border-color: var(--pdp-charcoal);
}

.product-images-carousel .slick-dots li button:before {
  color: var(--pdp-charcoal);
  opacity: 0.25;
}

.product-images-carousel .slick-dots li.slick-active button:before {
  opacity: 1;
}

.product-images-carousel .slick-arrow {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  box-shadow: var(--pdp-shadow-soft);
  transition: transform var(--pdp-fast), background-color var(--pdp-fast);
}

.product-images-carousel .slick-arrow:hover {
  transform: translateY(-50%) scale(1.06);
  background: #fff;
}

/* ---------------------------------------------------------------------
   2. STICKY PRODUCT INFORMATION
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .col-product-info {
    position: sticky;
    top: var(--pdp-sticky-offset);
    align-self: flex-start;
    /* ✦ CHANGED: removed `transition: transform` — it fought the
       browser's own sticky repositioning and caused micro-jitter */
  }
}

/* ---------------------------------------------------------------------
   3. LUXURY PRODUCT TITLE
   --------------------------------------------------------------------- */
.col-product-info h1.h3.fw-bold {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--pdp-charcoal);
  margin-bottom: 4px;
}

/* ✦ NEW: a single hairline accent under the title — the one piece of
   colour in the info column */
.col-product-info h1.h3.fw-bold::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--color-accent-deep);
  margin-top: 14px;
}

/* ---------------------------------------------------------------------
   4. PREMIUM PRICE SECTION
   --------------------------------------------------------------------- */
.price.my-1 {
  margin: 22px 0 26px !important;
  padding: 0;
}

.price .d-flex.align-items-center.gap-2 {
  align-items: baseline !important;
  gap: 12px !important;
  flex-wrap: wrap;
}

.total-price.product-formatted-price {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pdp-charcoal);
}

.before-price.product-formatted-price-old {
  font-size: 14px;
  color: var(--pdp-warm-gray);
  /* ✦ CHANGED: removed opacity: 0.75 — it pushed an already-borderline
     contrast ratio below the accessible floor. Strikethrough carries
     the "old price" meaning on its own. */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.product-save {
  margin-inline-start: 2px;
}

/* ✦ CHANGED: the discount badge was sand-on-sand and disappeared into
   the page. A rust tint gives the page its only warm signal colour. */
.product-save .money-save,
.product-save .money-save.bg-danger {
  border-radius: var(--pdp-radius-pill) !important;
  background: rgba(140, 74, 50, 0.12) !important;
  color: var(--color-rust) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px !important;
}

/* ---------------------------------------------------------------------
   5. INSTALLMENT BADGE
   (reuses .product-features — currently empty in markup; styled so
   it slots in cleanly the moment content is present, JS or CMS-side)
   --------------------------------------------------------------------- */
.product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.product-features:empty {
  display: none;
}

/* ---------------------------------------------------------------------
   6. PRODUCT HIGHLIGHTS / TRUST BADGES
   (injected by initTrustBadges() — see JS module — now premium cards
   instead of a flat icon row)
   --------------------------------------------------------------------- */
.pdp-trust-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

.pdp-trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--pdp-charcoal);
  background: var(--pdp-ivory);
  border-radius: var(--pdp-radius-md);
  padding: 14px 12px;
  opacity: 0;
  transform: translateY(6px);
  animation: pdpFadeUp var(--pdp-medium) forwards;
  transition: transform var(--pdp-fast), box-shadow var(--pdp-fast);
}

.pdp-trust-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--pdp-shadow-soft);
}

.pdp-trust-badge:nth-child(2) { animation-delay: 50ms; }
.pdp-trust-badge:nth-child(3) { animation-delay: 100ms; }
.pdp-trust-badge:nth-child(4) { animation-delay: 150ms; }
.pdp-trust-badge:nth-child(5) { animation-delay: 200ms; }

.pdp-trust-badge svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* ✦ CHANGED: --color-primary was too light to read as an icon */
  color: var(--color-accent-deep);
}

@keyframes pdpFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 480px) {
  .pdp-trust-badges {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------------------------
   7. VARIANT SELECTOR (.size-box)
   --------------------------------------------------------------------- */
.size-box {
  gap: 10px;
  margin: 20px 0;
}

.size-box .variant-option,
.size-box button {
  border-radius: var(--pdp-radius-pill);
  border: 1px solid var(--pdp-border);
  padding: 10px 20px;
  font-size: 13.5px;
  transition: border-color var(--pdp-fast), background-color var(--pdp-fast), transform var(--pdp-fast), box-shadow var(--pdp-fast);
  transform: translateZ(0);
}

.size-box .variant-option:hover,
.size-box button:hover {
  border-color: var(--color-accent-deep);
  transform: translateY(-1px) translateZ(0);
}

.size-box .variant-option:focus-visible,
.size-box button:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

/* ✦ CHANGED: selected chip was clay behind white text — same 3.0:1
   failure as the buy button */
.size-box .variant-option.active,
.size-box button.active {
  border-color: var(--color-cta);
  background: var(--color-cta);
  color: var(--color-white);
  box-shadow: var(--pdp-shadow-soft);
}

/* ---------------------------------------------------------------------
   8. QUANTITY SELECTOR
   --------------------------------------------------------------------- */
.select-quantity-div {
  display: inline-block;
}

.select-quantity-div .product-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--pdp-warm-gray);
  margin-bottom: 6px;
}

.select-quantity {
  border-radius: var(--pdp-radius-sm);
  border: 1px solid var(--pdp-border);
  padding: 10px 14px;
  transition: border-color var(--pdp-fast);
}

.select-quantity:focus {
  border-color: var(--pdp-charcoal);
  outline: none;
}

/* JS-enhanced stepper (added by initQuantitySelector) */
.pdp-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--pdp-ivory);
  border: 1px solid var(--pdp-border);
  border-radius: var(--pdp-radius-pill);
  overflow: hidden;
  padding: 2px;
}

.pdp-qty-stepper button {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: background-color var(--pdp-fast), transform var(--pdp-fast);
  color: var(--pdp-charcoal);
}

.pdp-qty-stepper button:hover {
  background: var(--color-white);
}

.pdp-qty-stepper button:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

.pdp-qty-stepper button:active {
  transform: scale(0.9);
}

.pdp-qty-stepper .pdp-qty-value {
  min-width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   9. LUXURY ADD TO CART
   --------------------------------------------------------------------- */
/* ✦ CHANGED: background moved from --color-primary to --color-cta.
   This is the single most important fix in the file — 3.0:1 → 10.2:1
   on the button customers have to press to buy anything. */
.btn-add-to-cart {
  border-radius: 18px !important;
  min-height: 60px;
  background: var(--color-cta) !important;
  color: var(--color-white) !important;
  border: none !important;
  padding: 0 28px !important;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: transform var(--pdp-fast), box-shadow var(--pdp-fast), background-color var(--pdp-fast);
  transform: translateZ(0);
}

.btn-add-to-cart:hover {
  background: var(--color-cta-hover) !important;
  transform: translateY(-2px) translateZ(0);
  box-shadow: var(--pdp-shadow-lift);
  will-change: transform;
}

.btn-add-to-cart:active,
.btn-add-to-cart.pdp-pressed {
  transform: scale(0.98) translateZ(0);
}

/* ✦ NEW: disabled state — out-of-stock products currently render a
   live-looking button */
.btn-add-to-cart[disabled],
.btn-add-to-cart.disabled {
  background: var(--color-surface) !important;
  color: var(--pdp-warm-gray) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-add-to-cart.pdp-success {
  background: var(--color-olive) !important;
}

.pdp-cart-label {
  transition: opacity var(--pdp-fast);
}

.btn-add-to-cart.pdp-loading {
  cursor: progress;
  animation: pdpCartPulse 900ms ease-in-out infinite;
}

@keyframes pdpCartPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ---------------------------------------------------------------------
   10. STICKY MOBILE BUY BAR (#floatingAddToCart already exists —
   upgraded here into a full price + button bar; initMobileStickyBar()
   injects the price span and gates visibility on the gallery having
   scrolled out of view)
   --------------------------------------------------------------------- */
/* ✦ CHANGED: left/right → inset-inline (correct on an RTL page), and
   an explicit background. The bar set its price text to --color-white
   but never painted a background behind it, so the price relied
   entirely on whatever the theme happened to draw. */
#floatingAddToCart {
  position: fixed !important;
  inset-inline: 16px !important;
  bottom: calc(var(--pdp-bottomnav-height, 0px) + var(--pdp-safe-bottom) + 12px) !important;
  width: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 18px !important;
  min-height: 72px;
  background: var(--color-cta) !important;
  color: var(--color-white) !important;
  box-shadow: var(--pdp-shadow-lift);
  transform: translate3d(0, 130%, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--pdp-medium), opacity var(--pdp-medium);
  backface-visibility: hidden;
  z-index: 90;
}

/* Both classes required: `.visible` is the theme's own scroll-driven
   toggle (fires early); `.pdp-bar-ready` is ours, set once the gallery
   has actually scrolled out of view. Together they give the "appears
   after scrolling past the images" behaviour without a second scroll
   listener. */
#floatingAddToCart.visible.pdp-bar-ready {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
  will-change: transform, opacity;
}

.pdp-floating-price {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-white);
  order: -1;
  margin-inline-end: auto;
}

.pdp-legacy-hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------
   PRODUCT INFORMATION — premium accordion (replaces the old tabs UI)
   ---------------------------------------------------------------------
   Height reveal uses the grid-template-rows 0fr→1fr technique — the
   only reliable way to animate to "auto" height smoothly. Every other
   motion here (chevron, hover, opacity) is transform/opacity only. */
.pdp-accordion {
  margin-top: 32px;
  border-radius: var(--pdp-radius-lg);
  background: var(--color-white);
  box-shadow: var(--pdp-shadow-soft);
  overflow: hidden;
}

.pdp-accordion-item {
  border-bottom: 1px solid var(--pdp-border);
}

.pdp-accordion-item:last-child {
  border-bottom: none;
}

.pdp-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  padding: 20px 22px;
  cursor: pointer;
  text-align: start;
  transition: background-color var(--pdp-fast);
}

.pdp-accordion-trigger:hover {
  background: var(--pdp-ivory);
}

.pdp-accordion-trigger:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: -2px;
}

.pdp-accordion-icon {
  display: flex;
  color: var(--color-accent-deep);
  flex-shrink: 0;
}

.pdp-accordion-icon svg {
  width: 20px;
  height: 20px;
}

.pdp-accordion-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--pdp-charcoal);
}

.pdp-accordion-chevron {
  display: flex;
  color: var(--pdp-warm-gray);
  transform: rotate(0deg) translateZ(0);
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pdp-accordion-chevron svg {
  width: 18px;
  height: 18px;
}

.pdp-accordion-item.is-open .pdp-accordion-chevron {
  transform: rotate(180deg) translateZ(0);
}

/* ✦ CHANGED: open-state title was clay on white — 3.0:1 on 15px text */
.pdp-accordion-item.is-open .pdp-accordion-title {
  color: var(--color-accent-deep);
}

.pdp-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pdp-accordion-item.is-open .pdp-accordion-panel {
  grid-template-rows: 1fr;
}

.pdp-accordion-content {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  padding: 0 22px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--pdp-warm-gray);
}

.pdp-accordion-item.is-open .pdp-accordion-content {
  opacity: 1;
  padding: 0 22px 22px;
}

.pdp-accordion-content p {
  margin: 0 0 12px;
}

.pdp-accordion-content p:last-child {
  margin-bottom: 0;
}

/* ✦ NEW: images inside the description get contained rather than
   free-floating at their natural width */
.pdp-accordion-content img,
#description.tab-pane img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pdp-radius-sm);
  margin: 16px 0;
}

/* ---------------------------------------------------------------------
   11. TRUST BADGES ROW — see section 6 (.pdp-trust-badges)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   12. EDITORIAL DESCRIPTION SECTIONS
   --------------------------------------------------------------------- */
.product-card {
  border: none;
  border-radius: var(--pdp-radius-lg);
  box-shadow: var(--pdp-shadow-soft);
  overflow: hidden;
  background: var(--color-white);
}

.product-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--pdp-border);
  padding: 14px 14px 0;
}

#productTabs {
  position: relative;
  border-bottom: none;
  gap: 4px;
}

.product-card .nav-tabs .nav-link {
  position: relative;
  z-index: 1;
  border: none;
  color: var(--pdp-warm-gray);
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--pdp-radius-pill);
  transition: color var(--pdp-fast);
  background: transparent;
}

.product-card .nav-tabs .nav-link.active {
  color: var(--color-white);
  font-weight: 600;
  background: transparent;
}

/* GPU-animated pill that slides under the active tab — positioned by
   positionTabIndicator() in the JS module, driven purely by transform */
/* ✦ CHANGED: `left: 0` anchored the pill to the wrong edge on an
   Arabic page. inset-inline-start follows the text direction.
   Background also moved to --color-cta so the active tab label is
   readable against it. */
.pdp-tab-indicator {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 100%;
  border-radius: var(--pdp-radius-pill);
  background: var(--color-cta);
  transform: translate3d(0, 0, 0);
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), width 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, width;
  backface-visibility: hidden;
  z-index: 0;
}

.tab-pane {
  animation: pdpTabFade 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes pdpTabFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#description.tab-pane {
  font-size: 15px;
  line-height: 1.85;
  color: var(--pdp-charcoal);
  padding: 24px 8px;
}

#description.tab-pane p {
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   13. PREMIUM REVIEWS (relocated below Related Products by
   relocateReviews() — wrapped in .pdp-reviews-section)
   --------------------------------------------------------------------- */
.pdp-reviews-section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--pdp-border);
}

.pdp-reviews-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--pdp-charcoal);
  margin-bottom: 20px;
}

.pdp-reviews-relocated {
  background: var(--pdp-ivory);
  border-radius: var(--pdp-radius-lg);
  padding: 8px;
}

.questions-card-init {
  padding: 40px 20px;
}

.questions-card-init .image-box svg {
  opacity: 0.5;
}

/* ✦ CHANGED: an empty state should invite the action, so the button
   now carries real weight instead of inheriting theme defaults */
.questions-card-init .add-review-btn {
  border-radius: var(--pdp-radius-pill) !important;
  background: transparent !important;
  border: 1px solid var(--pdp-charcoal) !important;
  color: var(--pdp-charcoal) !important;
  padding: 12px 32px !important;
  transition: transform var(--pdp-fast), background-color var(--pdp-fast), color var(--pdp-fast);
}

.questions-card-init .add-review-btn:hover {
  background: var(--pdp-charcoal) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
   14. RELATED PRODUCTS CAROUSEL
   --------------------------------------------------------------------- */
#related-products.products-slider .slick-slide {
  transition: opacity var(--pdp-fast);
  padding: 0 6px;
}

#related-products.products-slider .slick-slide > div > div {
  border-radius: var(--pdp-radius-md);
  overflow: hidden;
  transition: transform var(--pdp-fast), box-shadow var(--pdp-fast);
}

#related-products.products-slider .slick-slide:hover > div > div {
  transform: translateY(-4px);
  box-shadow: var(--pdp-shadow-soft);
}

#related-products.products-slider .slick-arrow {
  border-radius: 50%;
  box-shadow: var(--pdp-shadow-soft);
  transition: transform var(--pdp-fast);
}

#related-products.products-slider .slick-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}

/* ---------------------------------------------------------------------
   15. FLOATING CTA — reuses #floatingAddToCart, see section 10
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   16 / 17. MICRO INTERACTIONS & LUXURY ANIMATIONS
   --------------------------------------------------------------------- */
.thumb-image-a,
.a-shopping-cart,
.product-social a {
  transition: transform var(--pdp-fast), opacity var(--pdp-fast);
}

/* ✦ CHANGED: share icons were bare links with a hover nudge and no
   affordance that they were tappable */
.product-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--pdp-warm-gray);
  background: var(--pdp-ivory);
  transition: transform var(--pdp-fast), background-color var(--pdp-fast), color var(--pdp-fast);
}

.product-social a:hover {
  transform: translateY(-2px);
  background: var(--color-surface);
  color: var(--pdp-charcoal);
}

.col-product-info a:focus-visible,
.col-product-info button:focus-visible,
.product-card a:focus-visible,
.product-card button:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

/* ✦ NEW: consistent focus ring everywhere else in the store —
   keyboard users were getting browser defaults or nothing */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

::selection {
  background: var(--color-accent-deep);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------
   18. RESPONSIVE LAYOUT / WHITE SPACE / TYPOGRAPHY (mobile-first)
   --------------------------------------------------------------------- */
.col-product-info {
  padding-inline: 4px;
}

.col-product-info > section:first-child {
  margin-bottom: 4px;
}

.col-product-info h1.h3.fw-bold {
  line-height: 1.3;
}

#description.tab-pane,
.pdp-accordion-content {
  letter-spacing: 0.01em;
}

.product-card,
.pdp-accordion,
.pdp-reviews-section {
  margin-inline: 4px;
}

/* Keep the fixed sticky bar from ever covering page content on mobile */
/* ✦ CHANGED: was `body { ... }`, which applied this padding to every
   page in the store — leaving dead space under the homepage and
   category grids where no sticky bar exists. Now scoped to pages that
   actually contain the bar. */
@media (max-width: 767.98px) {
  body:has(#floatingAddToCart) {
    padding-bottom: calc(72px + var(--pdp-bottomnav-height, 0px) + var(--pdp-safe-bottom) + 24px);
  }
}

@media (max-width: 991.98px) {
  .col-product-info {
    margin-top: 32px;
  }

  .btn-add-to-cart {
    width: 100%;
  }

  .pdp-accordion,
  .product-card {
    margin-top: 28px;
  }
}

@media (max-width: 575.98px) {
  .col-product-info h1.h3.fw-bold {
    font-size: 22px;
  }

  .total-price.product-formatted-price {
    font-size: 26px;
  }

  .pdp-trust-badges {
    gap: 10px;
    margin-top: 24px;
  }

  .pdp-accordion-trigger {
    padding: 18px 16px;
  }

  .pdp-accordion-content {
    padding-inline: 16px;
  }

  .pdp-accordion-item.is-open .pdp-accordion-content {
    padding: 0 16px 18px;
  }

  .box-1-1.product-images-carousel .carousel-img {
    transform: none;
  }

  .box-1-1.product-images-carousel .image-link:active .carousel-img {
    transform: scale(1.03);
  }
}

/* ---------------------------------------------------------------------
   19. PERFORMANCE
   --------------------------------------------------------------------- */
.box-1-1.product-images-carousel .carousel-img,
#floatingAddToCart,
.btn-add-to-cart,
.pdp-accordion-panel {
  contain: paint;
}

/* ✦ NEW: below-the-fold blocks skip layout and paint until they
   approach the viewport */
.pdp-reviews-section,
#related-products {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ---------------------------------------------------------------------
   20. ✦ NEW — REDUCED MOTION
   Was entirely absent. Anyone who has switched on Reduce Motion in
   iOS or Android was still getting the full animation set.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .pdp-trust-badge {
    opacity: 1;
    transform: none;
  }
}


/* =====================================================================
   FORSIGHT — Welcome Popup
   Only the popup module — everything else from the earlier CSS pass
   (header, logo, nav, icons, hero polish) has been removed as requested.
   ===================================================================== */


/* =====================================================================
   POPUP VARIABLES
   ===================================================================== */
/* ✦ CHANGED: this block used to re-declare --color-primary and the
   whole palette a second time with identical values. Because it sits
   after the main :root, it silently overrode any change made above —
   so the colour edits in this file would never have taken effect.
   Only genuinely popup-specific variables remain. */
:root {
  --transition-fast: 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-medium: 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 650ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --color-charcoal: var(--color-text);
  --color-warm-gray: var(--color-text-light);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --popup-overlay-bg: rgba(59, 52, 46, 0.50);
  --popup-bg: rgba(250, 249, 246, 0.88);
  --popup-blur: 24px;
  --popup-border: rgba(164, 141, 120, 0.28);
  --popup-radius: 28px;
  --popup-radius-sm: 14px;
  --popup-cta-radius: 18px;
  --popup-cta-height: 60px;
  --popup-max-width: 420px;
  --popup-shadow: 0 24px 60px rgba(59, 52, 46, 0.18);
  --popup-code-bg: var(--color-surface);
  --popup-code-border: var(--color-accent-deep);
  --popup-logo-max-width: 110px;
}


/* =====================================================================
   POPUP LAYOUT
   ===================================================================== */
.pixela-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--popup-overlay-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* ✦ CHANGED: added visibility to the transition — without it the
     overlay snapped out instead of fading */
  transition: opacity var(--transition-medium), visibility var(--transition-medium);
  padding-top: calc(24px + var(--safe-top));
  padding-bottom: calc(24px + var(--safe-bottom));
}

.pixela-popup-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pixela-popup-card {
  position: relative;
  width: 100%;
  max-width: var(--popup-max-width);
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow);
  backdrop-filter: blur(var(--popup-blur));
  -webkit-backdrop-filter: blur(var(--popup-blur));
  padding: 40px 36px 32px;
  text-align: center;
  transform: translate3d(0, 14px, 0) scale(0.97);
  opacity: 0;
  transition:
    transform var(--transition-slow),
    opacity var(--transition-slow);
}

.pixela-popup-overlay.is-visible .pixela-popup-card {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.pixela-popup-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-charcoal);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.pixela-popup-close:hover {
  background: rgba(164, 141, 120, 0.14);
  transform: rotate(90deg);
}

.pixela-popup-logo {
  display: flex;
  justify-content: center;
  margin: 4px 0 24px;
}

.pixela-popup-logo img {
  max-width: var(--popup-logo-max-width);
  width: 100%;
  height: auto;
  display: block;
}

.pixela-popup-code-row {
  margin: 24px 0 28px;
}

/* ✦ CHANGED: `padding: 12px 12px 12px 20px` put the wide side on the
   left, which is the wrong edge on an Arabic page. Logical padding
   follows the direction automatically. */
.pixela-popup-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-block: 12px;
  padding-inline: 20px 12px;
  background: var(--popup-code-bg);
  border: 1px dashed var(--popup-code-border);
  border-radius: var(--popup-radius-sm);
}

.pixela-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* =====================================================================
   POPUP TYPOGRAPHY
   ===================================================================== */
.pixela-popup-eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
  margin-bottom: 10px;
}

.pixela-popup-headline {
  font-size: 30px;
  line-height: 1.15;
  color: var(--color-charcoal);
  margin: 0 0 10px;
  font-weight: 600;
}

.pixela-popup-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-warm-gray);
  margin: 0;
}

.pixela-popup-code-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-warm-gray);
}

.pixela-popup-code-value {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-charcoal);
  direction: ltr;
  unicode-bidi: isolate;
}


/* =====================================================================
   POPUP BUTTONS
   ===================================================================== */
/* ✦ CHANGED: both popup buttons were clay behind white text — the
   same 3.0:1 failure as the main CTA */
.pixela-popup-copy {
  border: none;
  background: var(--color-cta);
  color: var(--color-white);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--popup-radius-sm);
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  transform: translateZ(0);
}

.pixela-popup-copy:hover {
  background: var(--color-cta-hover);
  transform: translateY(-1px) translateZ(0);
}

.pixela-popup-copy.is-copied {
  background: var(--color-olive);
}

.pixela-popup-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--color-cta);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
  min-height: var(--popup-cta-height);
  padding: 0 24px;
  border-radius: var(--popup-cta-radius);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  transform: translateZ(0);
}

.pixela-popup-shop:hover {
  background: var(--color-cta-hover);
  color: var(--color-white);
  transform: translateY(-2px) translateZ(0);
  box-shadow: var(--shadow-soft);
}

.pixela-popup-later {
  border: none;
  background: transparent;
  color: var(--color-warm-gray);
  font-size: 13px;
  padding: 6px;
  cursor: pointer;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.pixela-popup-later:hover {
  color: var(--color-charcoal);
}

/* ✦ NEW: the popup had no focus states at all */
.pixela-popup-close:focus-visible,
.pixela-popup-copy:focus-visible,
.pixela-popup-shop:focus-visible,
.pixela-popup-later:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}


/* =====================================================================
   POPUP ANIMATIONS
   ===================================================================== */
/* ✦ CHANGED: will-change scoped to the visible state. It was pinned
   permanently on five elements, holding compositor layers alive for
   a popup that is closed almost all of the time. */
.pixela-popup-overlay.is-visible,
.pixela-popup-overlay.is-visible .pixela-popup-card {
  will-change: transform, opacity;
}

.pixela-popup-card,
.pixela-popup-close,
.pixela-popup-copy,
.pixela-popup-shop {
  backface-visibility: hidden;
}


/* =====================================================================
   POPUP RESPONSIVE
   ===================================================================== */
@media (max-width: 575.98px) {
  .pixela-popup-card {
    padding: 32px 24px 26px;
    border-radius: 22px;
  }

  .pixela-popup-headline {
    font-size: 26px;
  }

  .pixela-popup-code {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }

  .pixela-popup-copy {
    width: 100%;
  }
}


/* =====================================================================
   POPUP PERFORMANCE
   ===================================================================== */
.pixela-popup-overlay {
  contain: layout paint style;
}

.pixela-popup-card {
  contain: layout paint;
}

/* ===== توحيد ألوان الأزرار في كل المتجر ===== */
:root {
  --primary-color: #4A3B2E !important;
  --text-color-primary-bg: #FAF9F6 !important;  /* ضروري */
}

.btn-primary,
.btn-addtocart,
.btn-add-to-cart,
a.btn.btn-primary.btn-addtocart {
  background: #4A3B2E !important;
  background-color: #4A3B2E !important;
  border-color: #4A3B2E !important;
  color: #FAF9F6 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-addtocart:hover,
.btn-addtocart:focus,
.btn-add-to-cart:hover,
a.btn.btn-primary.btn-addtocart:hover {
  background: #5C4A3A !important;
  background-color: #5C4A3A !important;
  border-color: #5C4A3A !important;
  color: #FAF9F6 !important;
}

/* إخفاء النشرة البريدية مع إبقاء أيقونات التواصل */
.footer-newsletter { display: none !important; }

/* توسيط الأيقونات بعد اختفاء النشرة */
.footer-top { justify-content: center !important; }

/* إخفاء قسم التقييمات */
.pdp-reviews-section,
.pdp-reviews-relocated,
.pdp-reviews-heading,
.questions-card-init,
#reviews,
#productTabs a[href="#reviews"],
a[href*="/reviews/new"] {
  display: none !important;
}

 /* whatsapp */

.whatsapp_float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #4d3c3ccf;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 39px;
    padding-left: 6px;
    z-index: 100;
  }
  .whatsapp_float:hover{
    color:#ffffff !important;
    background-color: #2f8a50;
  }
  .whatsapp-icon {
    margin-top: 16px;
  }

  /* for mobile */
  @media screen and (max-width: 767px){
    .whatsapp-icon {
      margin-top: 10px;
    }
    .whatsapp_float {
    width: 50px;
    height: 50px;
    bottom: 55px;
    right: 0px;
    font-size: 32px;
    padding-left: 5px;
    border-radius: 50px 5px 5px 50px;
    }
  }