.banks-v3 .banks-track, .banks-v2 .banks-track {
    gap: 0px;
}
.banks-v3 .banks-track img, .banks-v2 .banks-track img {
    background: transparent;
    padding: 20px 10px;
    width: auto;
    box-sizing: content-box;
    margin: 0 0px;
    border: 1px solid #dcdcdc;
}
.banks-v2 .banks-track img, .banks-v3 .banks-track img
{border-radius: 0px;
    }
    .banks-v3, .banks-v2 {
    padding: 60px 0 0px;
}
.banks-v2 .banks-loop, .banks-v3 .banks-loop {
    padding: 0px 0;
}
@media (max-width: 768px) {
    .lang-link-mobile {
         width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f3f3f3;
    color: #1A1A1A;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    text-decoration: none;
    }
        .lang-link-mobile img {
       width: 100%;
    height: 100%;
    object-fit: none;
    }
}
      
      
@media (max-width: 768px) 
{
  .topbar {
    display: none;
  }
  
  
  
.hero-slider .row > [class*="col-"]:not(.hero-slide-text) {
    flex: unset !important;
}
.ps-nav-prev {
    right: 300px !important;
}
.ps-nav-next {
    left: 330px !important;
}
.promo-slider .promo-slide img, .promo-slider .promo-slide video {
    object-fit: contain !important;
}
.promo-slider {
    padding: 0px 0 !important;
}
.ps-section {
    padding: 60px 0 0px !important;
}
.ps-card-info {
    padding: 28px 5px 24px !important;
}
.hero-slide-media img, .hero-slide-media video {
    height: 270px !important;
}
.features-v2, .features-v3 {
    padding: 0px 0 15px !important;
}
} /* <-- MISSING brace: closes @media(max-width:768px) opened at line 48. Without
       it, every rule below was nested inside the mobile query, so all desktop
       (min-width:769px) overrides in this file never applied. */


/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header .container {
    padding: 0 16px;
  }

  .header-main {
    gap: 10px;
    flex-wrap: wrap;
  }

  .brand img {
    height: 64px;
    width: auto;
  }

  .search {
    order: 3;
    width: 100%;
    flex: unset;
  }

  .search input {
    width: 100%;
    font-size: 14px;
  }

  .cart-total {
    display: none;
  }
}

/* ═══════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-slider {
    padding: 0;
  }

  .hero-slider .container {
    padding: 0;
    max-width: 100%;
  }

  .hero-counter-top {
    padding: 20px 16px 0;
  }

  .counter-row {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .counter-item {
    flex: 1;
    text-align: center;
    min-width: 0;
  }

  .counter-num {
    font-size: 20px;
  }

  .counter-label {
    font-size: 9px;
    letter-spacing: 0;
  }

  .counter-dash {
    display: none;
  }

  .hero-swiper {
    border-radius: 0;
  }

  /* الـ row داخل الـ slide يصير عمودي */
  .hero-slide .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .hero-slide .col-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
  }

  .hero-slide-text {
    padding: 28px 20px 16px;
    text-align: center;
    order: 1;
  }

  .hero-slide-text h1 {
    font-size: 24px;
    line-height: 1.25;
  }

  .eyebrow-v2 {
    font-size: 11px;
  }

  .hero-sub {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hero-slide-media {
    order: 2;
    width: 100%;
    max-height: 270px;
    overflow: hidden;
    border-radius: 0;
  }

  .hero-slide-media img,
  .hero-slide-media video {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════
   FEATURES V3
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .features-v2.features-v3 .container .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  .features-v2.features-v3 .col-3 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .features-v2.features-v3 .feature-item {
    padding: 14px 12px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .features-v2.features-v3 .feat-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
  }
  .features-v2.features-v3 .feat-icon img {
    width: 56px;
    height: 56px;
  }
  .features-v2.features-v3 .feat-icon i {
    font-size: 30px;
  }

  .features-v2.features-v3 .feat-title {
    font-size: 13px;
  }

  .features-v2.features-v3 .feat-desc {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════
   PRODUCT SLIDER (ps-section)
═══════════════════════════════════════════ */
@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;
  }

  /* Shell — نزيل الـ padding الجانبي الكبير */
  .ps-shell {
    padding: 0 12px;
  }

  /* الـ slide تاخذ 88% من العرض */
  .ps-slide {
    width: 88%;
  }

  /* الكارد يصير عمودي */
  .ps-card {
    flex-direction: column;
    min-height: unset;
  }

  /* الصورة فوق */
  .ps-card-media {
    width: 100% !important;
    min-width: unset !important;
    min-height: 200px;
    padding: 20px;
    order: -1;
  }

  .ps-card-media img {
    max-height: 180px;
  }

  /* المعلومات تحت */
  .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: 12px;
    flex-wrap: wrap;
  }

  .ps-feat-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .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%;
  }

  /* أسهم التنقل */
  .ps-nav-prev {
    left: -4px;
    width: 36px;
    height: 36px;
  }

  .ps-nav-next {
    right: -4px;
    width: 36px;
    height: 36px;
  }

  .ps-nav-prev svg,
  .ps-nav-next svg {
    width: 14px;
    height: 14px;
  }

  .ps-wishlist {
    top: 14px;
    right: 14px;
  }

  .ps-viewall {
    margin-top: 24px;
  }

  .ps-viewall-btn {
    font-size: 13px;
    padding: 10px 22px;
  }
}

/* ═══════════════════════════════════════════
   PROMO SLIDER
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .promo-slider .container {
    padding: 0;
    max-width: 100%;
  }

  .promo-slide img,
  .promo-slide video {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════
   BANKS SECTION
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .banks-v2,
  .banks-v3 {
    padding: 36px 0 0;
  }

  .banks-title {
    font-size: 14px;
    padding: 0 16px;
    text-align: center;
  }

  .banks-v3 .banks-track img,
  .banks-v2 .banks-track img {
    padding: 14px 8px;
    max-height: 50px;
  }
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-footer .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .site-footer .col-4,
  .site-footer .col-3,
  .site-footer .col-2 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-brand img {
    height: 36px;
  }

  .footer-brand p {
    font-size: 13px;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 8px;
  }

  .newsletter-form input {
    width: 100%;
    border-radius: 6px !important;
  }

  .newsletter-form button {
    width: 100%;
    border-radius: 6px !important;
  }

  .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .pay-icons-v4 {
    font-size: 28px;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════
   WHATSAPP FLOAT
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .wa-float {
    bottom: 16px;
    right: 16px;
  }
}

/* ═══════════════════════════════════════════
   MEGA MENU
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .mega-menu {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════
   GENERAL — تصحيح عام للـ rows
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .ps-slide {
    width: 92%;
  }

  .ps-shell {
    padding: 0 8px;
  }

  .ps-feats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1288px) {

  .site-header {
    position: relative;
    z-index: 9999999999999 !important;
    background: #ffffffde;
    border-bottom: 0px solid #f0f0f0;
  }

  .hero-slider {
    margin-top: -99px !important;
  }

}
.btn-primary:hover {
    background: #f9a842 !important;
}

@media (max-width: 768px) {
    .dropdown-panel.cart-popup {
        position: fixed !important;
        left: 50% !important;
        top: 30% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 24px);
        max-width: 420px;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 20px;
        z-index: 999999999;
        box-shadow:
            0 20px 60px rgba(0,0,0,.25);
    }
    .has-dropdown.open .dropdown-panel {
        display: block;
    }
}

@media (max-width: 768px) {
    .dropdown-panel.profile-popup {
        position: fixed !important;
        left: 50% !important;
        top: 24% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 24px);
        max-width: 380px;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 20px;
        z-index: 999999999;
        box-shadow:
            0 20px 60px rgba(0,0,0,.25);
    }
    .has-dropdown.open .dropdown-panel {
        display: block;
    }
}

@media (max-width: 768px) {
  /* كل سلايد يأخذ العرض الكامل */
  .ps-slide {
    width: 100% !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    padding: 0 !important;
  }

  /* نلغي الـ padding على الـ shell عشان ما يطلع شي جانبي */
  .ps-shell {
    padding: 0 16px !important;
    overflow: hidden;
  }
  .ps-clip {
    overflow: hidden;
  }

  /* الأسهم تتموضع فوق الكارد */
  .ps-nav-prev {
    left: 8px !important;
    right: auto !important;
  }
  .ps-nav-next {
    right: 8px !important;
    left: auto !important;
  }
}


@media (max-width: 767px) {
    .header-actions {
           display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0 !important;
    }
}

.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;
      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 */
    }

    /* Features */
    .ps-feats {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .ps-feat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .ps-feat-icon {
      width: 36px;
      height: 36px;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #f5a623;
    }
    .ps-feat-icon svg { width:16px; height:16px; fill:currentColor; }
    .ps-feat-lbl {
      font-size: 11px;
      color: #6b7280;
      font-weight: 500;
      white-space: nowrap;
    }

    /* 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: #f4f6f6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      position: relative;
    }
    .ps-card-media img {
      max-width: 100%;
      max-height: 220px;
      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: 60px;
      height: 60px;
      background: #f5a623;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-56%);
      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; }
    .ps-nav-prev { left: 213px; }
    .ps-nav-next { right: 213px; }
    .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;
    }

}

/* ==========================================================================
   Hero slider nav arrows — themed circular buttons (QA fix).
   The CMS hero can have >1 slide; style its Swiper arrows to match the
   theme instead of relying on the default (unstyled/blue) ones.
   ========================================================================== */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  --swiper-navigation-size: 18px;
}
.hero-slider .swiper-button-prev:after,
.hero-slider .swiper-button-next:after { font-size: 18px; font-weight: 900; color: var(--color-primary); }
.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover { background: #fff; }
@media (max-width: 767px) {
  .hero-slider .swiper-button-prev,
  .hero-slider .swiper-button-next { width: 38px; height: 38px; --swiper-navigation-size: 14px; }
}

/* ==========================================================================
   HOME MOBILE — hide the redundant product-slider arrows (swipe + dots work),
   and make the hero-slider nav a comfortable tap target (an earlier rule
   shrank it to 38px). Appended last so these override the earlier blocks.
   ========================================================================== */
@media (max-width: 768px) {
  /* Product carousel: hide arrows on phones; swipe + pagination remain. */
  .ps-nav-prev,
  .ps-nav-next { display: none !important; }
}
@media (max-width: 767px) {
  /* Hero slider: 48px tap targets + larger pagination dots. */
  .hero-slider .swiper-button-prev,
  .hero-slider .swiper-button-next { width: 48px; height: 48px; --swiper-navigation-size: 18px; }
  .hero-slider .swiper-button-prev:after,
  .hero-slider .swiper-button-next:after { font-size: 18px; }
  .hero-slider .swiper-pagination-bullet { width: 11px; height: 11px; }
}

/* ==========================================================================
   HOME DESKTOP — the promo video spans the full content width on laptop/desktop.
   The global (unscoped) `object-fit:contain !important` near the top of this
   file (the promo-slide img/video rule) letterboxes the video; re-assert
   `cover` for >=769px. !important is required to beat that equal-specificity
   !important; mobile keeps `contain` (this override is min-width scoped).
   ========================================================================== */
@media (min-width: 769px) {
  .promo-slider .promo-slide img,
  .promo-slider .promo-slide video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ==========================================================================
   HOME DESKTOP — Features strip (Delivery / Warranty / Installation) tidy-up.
   1) Drop the per-item side padding so the first/last item align flush with the
      container edges (no extra inset before/after the row).
   2) Slightly smaller icon + title so every title stays on ONE line
      (e.g. "Delivery And Installation" no longer wraps).
   3) Top-align icon + text and give the description a consistent rhythm so all
      four cards line up even when one description runs longer.
   ========================================================================== */
@media (min-width: 769px) {
  /* Reduce the side gap a touch: a slightly wider container for this strip only
     (1280 -> 1440) so the first/last items sit closer to the screen edges. */
  .features-v2.features-v3 .container { max-width: 1440px; }
  /* Symmetric edges: distribute the four items with space-between and let each
     shrink to its content, so the LAST item ends flush at the right edge just
     like the FIRST starts flush at the left (equal margins on both sides). */
  .features-v2.features-v3 .row {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    /* Not glued to the edges: zero the grid's negative gutter, then 15px inset
       on each side so the first/last items breathe symmetrically. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .features-v2.features-v3 .row > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .features-v2.features-v3 .feature-item {
    padding: 16px 0 !important;
    gap: 16px !important;
    align-items: center !important;
  }
  /* Icon keeps its original size (74px from style-v3/v4) — no size override here. */
  .features-v2.features-v3 .feat-title {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin: 0 0 2px !important;
    white-space: nowrap !important;
  }
  .features-v2.features-v3 .feat-desc {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   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 values land it at the top-right OVER the image — uniform
   across every product card.
   ========================================================================== */
@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;
  }
}

/* ==========================================================================
   Product-card feature row — keep it tidy: 3 uniform columns, labels centred
   and capped at 2 lines (with reserved height) so the icons + names line up no
   matter how long a feature name is (e.g. "Powered by Artificial Intelligence").
   ========================================================================== */
/* Match the product-detail Technology layout exactly: a clean flex-wrap row of
   fixed-width items (was a 3-column grid). */
.ps-feats {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.ps-feat { width: 74px; }
.ps-feat-lbl {
  text-align: center;
  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;
}

/* ==========================================================================
   HOMEPAGE FEATURED SLIDE — base styles for the featured-product card used by
   Views/Shared/_HomeProductSlide.cshtml (.hp-card / .hp-media / .hp-info).
   These classes previously had NO css, so the markup rendered unstyled.
   ========================================================================== */
.hp-media {
  aspect-ratio: 4 / 3;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 12px;
}
.hp-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
}
.hp-info {
  padding: 18px 20px;
}