/* ==========================================================================
   Marji — Products section V2 (.ps-section)
   Custom vanilla-JS product carousel (replaces the old .products-slider).
   Ported from the izzatmarji2 design sandbox.
   ========================================================================== */


    .ps-section {
      padding: 60px 0 50px;
    }

    .ps-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ═══════════════════════════════════════════════
       SECTION HEAD
    ═══════════════════════════════════════════════ */
    .ps-head {
      margin-bottom: 36px;
    }
    .ps-eyebrow {
      display: block;
      color: #f5a623;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 10px;
    }
    .ps-heading {
      font-size: 38px;
      font-weight: 800;
      color: #111827;
      line-height: 1.2;
    }

    /* ═══════════════════════════════════════════════
       SHELL + CLIP
    ═══════════════════════════════════════════════ */
    .ps-shell {
      position: relative;
      padding: 0 60px;
    }
    .ps-clip {
      overflow: hidden;
     padding: 0px 0 10px;
    }

    /* ═══════════════════════════════════════════════
       SLIDER TRACK (الـ overflow يظهر الكاردات الجانبية الباهتة)
    ═══════════════════════════════════════════════ */
    .ps-track {
      display: flex;
      align-items: center;   /* centre each slide vertically so the nav arrows
                                (top:50%) line up with the card's middle even when
                                cards differ in height */
      transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
      /* overflow مش hidden — الـ clip يعمل ذلك */
    }

    /* ═══════════════════════════════════════════════
       SLIDE
    ═══════════════════════════════════════════════ */
    .ps-slide {
      flex-shrink: 0;
      width: 75%;               /* الكارد الرئيسي يأخذ 75% */
      padding: 0 12px;
      opacity: 0.38;
      transform: scale(0.97);
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
    }
    .ps-slide.ps-active {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    /* ═══════════════════════════════════════════════
       PRODUCT CARD
    ═══════════════════════════════════════════════ */
    .ps-card {
      display: flex;
      flex-direction: row;
      background: #fff;
      border-radius: 0px;
      /*box-shadow: 0 2px 24px rgba(0,0,0,0.08);*/
      overflow: hidden;
      min-height: 340px;
      border: 1px solid #f0f0f0;
    }

    /* ── Left: info ── */
    .ps-card-info {
      flex: 1;
      padding: 28px 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    /* Wishlist */
    .ps-wishlist {
      position: absolute;
      top: 22px;
      right: 22px;
      color: #aaa;
      font-size: 18px;
      text-decoration: none;
          line-height: 1.5;
      transition: color .2s;
      background: #f8f8f8;
      border: none;
      cursor: pointer;
      border-radius: 8px;
    }
    .ps-wishlist:hover { color: #f5a623; }
    .ps-wishlist svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
    .ps-wishlist.ps-wished svg { fill: #f5a623; stroke: #f5a623; }

    /* Title & desc */
    .ps-card-title {
      font-size: 20px;
      font-weight: 700;
      color: #111827;
      padding-right: 28px;
    }
    .ps-card-desc {
      font-size: 13px;
      color: #6b7280;
      line-height: 1.5;
      max-width: 320px;
      /* Uniform description height across cards: cap at 4 lines (ellipsis) and
         reserve that height so short and long descriptions occupy the same space. */
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 6em; /* 4 lines × 1.5 line-height */
    }

    /* Technology features — clean, borderless icons (no chip/circle, no box in
       any state). Brand-tinted, they lift + scale on hover; labels clamp to two
       lines and reveal in full on hover via the title tooltip. */
    .ps-feats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ps-feat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 74px;
    }
    .ps-feat-icon {
      width: 42px;
      height: 42px;
      /* Explicitly reset the box — home.css still declares a grey circle + border
         for .ps-feat-icon, and CSS cascades per-property, so these resets are
         required to match the clean product-detail Technology icons. */
      background: none;
      border: 0;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
      color: #64748b;
      transition: transform .2s ease, color .2s ease;
    }
    .ps-feat-icon svg { width:25px; height:25px; fill:currentColor; }
    .ps-feat-icon img { width:38px; height:38px; object-fit:contain; }
    .ps-feat:hover .ps-feat-icon { color: var(--color-primary, #f9a842); }
    .ps-feat-lbl {
      font-size: 11px;
      color: #6b7280;
      font-weight: 600;
      text-align: center;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.5em;
    }

    /* Capacity */
    .ps-cap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ps-cap-lbl,
    .ps-col-lbl {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
    }
    .ps-chip {
      padding: 4px 12px;
      border-radius: 20px;
      border: 1.5px solid #d1d5db;
      background: #fff;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      cursor: pointer;
      transition: border-color .2s, color .2s, background .2s;
    }
    .ps-chip.ps-chip-on,
    .ps-chip:hover {
      border-color: #f5a623;
      color: #f5a623;
      background: #fff8ee;
    }
    .ps-size-link {
      font-size: 12px;
      color: #f5a623;
      text-decoration: none;
      font-weight: 500;
      margin-left: 4px;
    }
    .ps-size-link:hover { text-decoration: underline; }

    /* Color swatches */
    .ps-cols {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ps-swatches {
      display: flex;
      gap: 6px;
    }
    .ps-swatch {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: outline .15s;
      display: inline-block;
    }
    .ps-swatch[data-col="white"]  { background: #f3f4f6; border-color: #d1d5db; }
    .ps-swatch[data-col="black"]  { background: #1f2937; }
    .ps-swatch[data-col="gold"]   { background: #f5a623; }
    .ps-swatch[data-col="silver"] { background: #9ca3af; }
    .ps-swatch.ps-swatch-on,
    .ps-swatch:hover {
      outline: 2px solid #f5a623;
      outline-offset: 2px;
    }

    /* Price */
    .ps-price {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .ps-price-lbl  { font-size: 13px; color: #6b7280; }
    .ps-price-now  { font-size: 22px; font-weight: 800; color: #111827; }
    .ps-price-old  { font-size: 14px; color: #9ca3af; text-decoration: line-through; }

    /* Action buttons */
    .ps-actions {
      display: flex;
      gap: 10px;
      margin-top: 4px;
    }
    .ps-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 5px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: background .2s;
      letter-spacing: .3px;
      flex: 1;
    }
    .ps-btn svg { width:13px; height:13px; fill:currentColor; }
    .ps-btn-buy  { background: #f5a623; color: #fff; }
    .ps-btn-buy:hover  { background: #e09510; }
    .ps-btn-cart { background: #1f2937; color: #fff; }
    .ps-btn-cart:hover { background: #374151; }

    /* ── Right: media ── */
    .ps-card-media {
      width: 50%;
      min-width: 280px;
      background: #f7f7f7;
      aspect-ratio: 4 / 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      position: relative;
    }
    .ps-card-media img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .ps-img-dots {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
    }
    .ps-img-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d1d5db;
      display: inline-block;
      cursor: pointer;
      transition: background .2s;
    }
    .ps-img-dot.ps-dot-on { background: #f5a623; }

    /* ═══════════════════════════════════════════════
       NAV ARROWS
    ═══════════════════════════════════════════════ */
    .ps-nav-prev,
    .ps-nav-next {
      width: 44px;
      height: 44px;
      background: #f5a623;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99999999;
      box-shadow: 0 2px 12px rgba(245,166,35,.35);
      transition: background .2s;
    }
    @media (max-width: 768px) {
  .ps-nav-prev,
  .ps-nav-next {
    top: 33%;
  }
}



    .ps-nav-prev:hover,
    .ps-nav-next:hover { background: #e09510; }
    /* Sit in the gap just outside the active (centred) card's edge: the card is
       75% wide so there's a 12.5% peek each side — place the arrow there (+ a
       small offset) so it hugs the card edge without covering its text.
       Percentage-based so it tracks the card edge across screen widths. */
    .ps-nav-prev { left: calc(12.5% + 23px); }
    .ps-nav-next { right: calc(12.5% + 23px); }
    .ps-nav-prev svg,
    .ps-nav-next svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

    /* ═══════════════════════════════════════════════
       PAGINATION DOTS
    ═══════════════════════════════════════════════ */
    .ps-pagination {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 20px;
    }
    .ps-pg-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d1d5db;
      border: none;
      cursor: pointer;
      transition: background .2s;
      padding: 0;
    }
    .ps-pg-dot.ps-pg-on { background: #f5a623; }

    /* ═══════════════════════════════════════════════
       VIEW ALL
    ═══════════════════════════════════════════════ */
    .ps-viewall {
      text-align: center;
      margin-top: 34px;
    }
    .ps-viewall-btn {
      background: #f5a623;
      color: #fff;
      padding: 12px 28px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background .2s;
    }
    .ps-viewall-btn svg { width:13px; height:13px; fill:currentColor; }
    .ps-viewall-btn:hover { background: #e09510; }

    /* ═══════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .ps-slide       { width: 88%; }
      .ps-shell       { padding: 0 44px; }
      .ps-card        { flex-direction: column; }
      .ps-card-media  { width: 100%; min-width: unset; min-height: 200px; }
      .ps-heading     { font-size: 28px; }
    }
    
    
    @media (max-width: 576px) {

    i.fas.fa-play {
        font-size: 18px !important;
    }

    .promo-slider .promo-slide .promo-play {
        width: 44px !important;
        height: 44px !important;
    }

}

/* ==========================================================================
   RELATED-PRODUCTS / PRODUCT-SLIDER mobile refinements.
   Mirrors the home page's .ps-* mobile design (home.css) so the related-products
   carousel on the product-detail page matches the home product cards: image on
   top (order:-1), stacked full-width buttons, refined typography. This lives in
   ps-products.css (loaded by BOTH the home and the detail page) so the look is
   identical everywhere the .ps-section slider appears, and the redundant nav
   arrows are hidden on phones (swipe + dots instead). Placed after the older,
   thinner mobile block above so these win the overlaps.
   ========================================================================== */
@media (max-width: 768px) {
  .ps-section { padding: 36px 0 30px; }
  .ps-container { padding: 0 16px; }
  .ps-heading { font-size: 22px; line-height: 1.25; }
  .ps-eyebrow { font-size: 11px; }
  .ps-shell { padding: 0 12px; }
  .ps-slide { width: 88%; }
  .ps-card { flex-direction: column; min-height: unset; }
  /* Definite height + object-fit:contain shows the WHOLE image (no crop). The <img> is
     wrapped in an <a>, so the <a> must be a block that fills the media box — otherwise the
     img's height:100% resolves against the INLINE <a>'s auto (content) height, the tall
     image renders at full size and gets clipped. Making the <a> block:100%x100% propagates
     the definite 300px height down so object-fit:contain can fit the whole image. */
  .ps-card-media { width: 100% !important; min-width: unset !important; height: 300px; min-height: 0; aspect-ratio: auto; padding: 12px; order: -1; overflow: hidden; }
  .ps-card-media a { display: block; width: 100%; height: 100%; }
  .ps-card-media img { width: 100%; height: 100%; object-fit: contain; }
  .ps-card-info { padding: 18px 16px 16px; gap: 10px; }
  .ps-card-title { font-size: 16px; padding-right: 36px; }
  .ps-card-desc { font-size: 12px; max-width: 100%; }
  .ps-feats { gap: 8px; flex-wrap: wrap; }
  .ps-feat { width: 68px; }
  .ps-feat-icon { width: 38px; height: 38px; font-size: 23px; }
  .ps-feat-icon img { width:34px; height:34px; }
  .ps-feat-lbl { font-size: 10px; }
  .ps-cap { flex-wrap: wrap; gap: 6px; }
  .ps-chip { padding: 4px 10px; font-size: 11px; }
  .ps-price-now { font-size: 18px; }
  .ps-price-old { font-size: 12px; }
  .ps-actions { flex-direction: column; gap: 8px; }
  .ps-btn { padding: 11px 14px; font-size: 12px; flex: unset; width: 100%; }
  /* Hide the carousel arrows on phones (swipe + dots remain). */
  .ps-nav-prev,
  .ps-nav-next { display: none !important; }
  .ps-wishlist { top: 14px; right: 14px; }
  .ps-viewall { margin-top: 24px; }
  .ps-viewall-btn { font-size: 13px; padding: 10px 22px; }
}

/* ==========================================================================
   PROMO slider (full-width banner before the footer) — mobile refinements.
   The default Swiper dots sat too low and blended into the banner on phones,
   and the slide framing was inconsistent. Give the banner a clean 16:9 frame
   with a dark matte (so any letterboxing reads as intentional) and make the
   dots clearly visible + centered (active = brand orange pill). Loaded after
   style-v4.css / style-mobile.css so these win.
   ========================================================================== */
/* ==========================================================================
   PROMO slider (banner strip before the footer) — FULL-BLEED, whole artwork.
   The 4 banners are all 2644×715 (≈3.70:1), so the slide is pinned to that exact
   ratio: the image fills the strip edge-to-edge with NO crop (complete artwork
   shown), spans the FULL page width, and has NO frame / border / rounding /
   letterbox. Same ratio on every slide → uniform height, no layout shift, works
   at every breakpoint (no JS needed).
   ========================================================================== */
.promo-slider { padding: 0 !important; margin: 44px 0 0 !important; }
.promo-slider .container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.promo-slider .promo-swiper { border-radius: 0 !important; border: 0 !important; background: transparent !important; overflow: hidden; max-height: none !important; }
.promo-slider .promo-slide { aspect-ratio: 2644 / 715 !important; height: auto !important; max-height: none !important; background: transparent !important; display: block; }
.promo-slider .promo-slide img,
.promo-slider .promo-slide video { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; border: 0 !important; border-radius: 0 !important; max-height: none !important; }
.promo-slider .swiper-pagination { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 7px; z-index: 6; }
.promo-slider .swiper-pagination-bullet { width: 9px; height: 9px; margin: 0 !important; background: rgba(255,255,255,.72); opacity: 1; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: width .2s, background .2s; }
.promo-slider .swiper-pagination-bullet-active { width: 24px; border-radius: 5px; background: var(--color-primary, #f9a842); }
/* Breathing room above the full-bleed banner so it doesn't touch the
   "VIEW ALL PRODUCTS" button — a touch tighter on phones. */
@media (max-width: 768px) { .promo-slider { margin-top: 28px !important; } }

/* ==========================================================================
   RTL overrides (Arabic home). The slider math in the JS assumes an LTR
   flex track, so we keep the shell/clip/track LTR and only mirror the
   card's *content* + the few physically-positioned bits.
   ========================================================================== */
html[dir="rtl"] .ps-shell,
html[dir="rtl"] .ps-clip,
html[dir="rtl"] .ps-track,
html[dir="rtl"] .ps-img-dots { direction: ltr; }

html[dir="rtl"] .ps-card { direction: rtl; text-align: right; }
html[dir="rtl"] .ps-card-title { padding-right: 0; padding-left: 28px; }
html[dir="rtl"] .ps-wishlist { right: auto; left: 22px; }
html[dir="rtl"] .ps-size-link { margin-left: 0; margin-right: 4px; }

/* ==========================================================================
   MOBILE — wishlist heart OVER the image.
   On mobile the card is a column (image on top via order:-1). The heart is
   markup-inside .ps-card-info, so when that block is the positioning context
   the heart drops to the title row. Re-anchor it to the whole .ps-card so the
   existing top/right (LTR) / left (RTL) values land it at the top corner OVER
   the image — uniform across every product card, on home and product pages.
   ========================================================================== */
@media (max-width: 768px) {
  /* .ps-card-media is position:relative and comes AFTER .ps-card-info in the
     DOM, so once the heart anchors to .ps-card (over the image) the positioned
     media paints on top of it. Make .ps-card a stacking context (z-index:0) and
     lift the heart above the media so it stays visible over the image. */
  .ps-card { position: relative; z-index: 0; }
  .ps-card-info { position: static; }
  /* Clearly-visible white circular badge over the image (the base grey-on-grey
     chip was too faint against the near-white image tile). */
  .ps-wishlist {
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    color: #444;
    font-size: 16px;
  }
}

/* ==========================================================================
   Technology feature row — IDENTICAL to the product-detail .pd-tech Technology:
   a clean flex-wrap row of fixed-width (74px) items with two-line clamped labels
   (full text on hover via the title tooltip). This block is last-in-file and was
   previously a 3-column grid with auto-width items, which is what made the slider
   Technology look different from the product-detail Technology.
   ========================================================================== */
.ps-feats {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.ps-feat { width: 74px; }
.ps-feat-lbl {
  text-align: center;
  text-transform: capitalize;
  white-space: normal;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}