/* ===========================
   DIABLO — MOBILE OVERRIDES
   (Keep desktop.css untouched)
=========================== */

:root{
  --nav-h: 84px; /* mobile navbar height */
}

/* Background fixed can lag on mobile */
body{
  background-attachment: scroll !important;
  padding-top: var(--nav-h) !important;
}

/* Make sure overlay doesn't swallow content */
body::after{
  z-index: 0;
}

/* ===========================
   NAVBAR (mobile)
=========================== */
.d-nav{
  min-height: var(--nav-h) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.d-brand-icon{
  height: 68px !important;
}

.d-brand-name{
  font-size: 14px !important;
}
.d-brand-sub{
  font-size: 9px !important;
  letter-spacing: .22em !important;
}

.d-nav-container{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.d-nav .navbar-collapse{
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(10,12,18,.82);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.d-nav-menu{
  justify-content: flex-start !important;
}

.d-nav-right{
  gap: 10px !important;
  flex-wrap: wrap;
}

.d-pill-select,
.d-pill-btn{
  width: 100%;
}

/* ===========================
   HERO (mobile)
=========================== */
.d-hero{
  min-height: calc(100vh - var(--nav-h)) !important;
  padding: calc(var(--nav-h) + 16px) 0 26px !important;
}

.d-hero .lp-container{
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.d-kicker{
  font-size: 10px !important;
  margin-bottom: 10px !important;
}

.d-title{
  font-size: 38px !important;
  line-height: 1.03 !important;
  letter-spacing: -0.5px !important;
}

.d-sub{
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin-bottom: 16px !important;
}

/* CTA stacked */
.d-cta{
  gap: 10px !important;
}
.d-btn{
  width: 100%;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

/* Hide heavy hero images on mobile (saves space + performance) */
.d-hero-devices,
.d-hero-energy{
  display: none !important;
}

/* ===========================
   BANNER STRIP (mobile)
=========================== */
.d-banner-strip{
  padding: 14px 0 0 !important;
}

.d-banner-strip .d-banner-inner{
  width: calc(100% - 22px) !important;
}

.d-banner-strip .hero-banner.slider{
  width: 100% !important;
  border-radius: 16px !important;
  height: 160px !important;
}

.d-banner-strip .hero-slide{
  height: 160px !important;
}

.d-banner-strip .hero-slide img{
  object-fit: cover !important;
}

/* ===========================
   PLANS (mobile)
=========================== */
.d-plans{
  padding: 46px 0 54px !important;
}

.d-h2{
  font-size: 26px !important;
}

.d-lead{
  font-size: 14px !important;
  padding: 0 8px;
}

.d-plans-panel{
  width: calc(100% - 22px) !important;
  padding: 18px 14px 16px !important;
  border-radius: 18px !important;
  transform: none !important;
}

.d-pricing{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  max-width: 100% !important;
}

.d-card{
  min-height: unset !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

.d-card-title{
  font-size: 18px !important;
}

.d-card-desc{
  font-size: 14px !important;
  margin: 8px 0 10px !important;
}

.d-card-media img{
  width: 140px !important;
}

/* ===========================
   WHY / TRUST (mobile)
=========================== */
.d-why{
  padding: 52px 0 !important;
}

.d-why-title{
  font-size: 28px !important;
}

.d-why-sub{
  font-size: 14px !important;
  padding: 0 10px;
}

.d-why-proof{
  max-width: calc(100% - 22px) !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

.d-why-grid{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: calc(100% - 22px);
  margin: 0 auto;
}

.d-why-card{
  border-radius: 16px !important;
  padding: 16px !important;
}

/* ===========================
   CATEGORY LIST SECTION (hero-streaming)
=========================== */
.hero-home-bg.hero-streaming{
  padding: 48px 0 56px !important;
}

.hero-home-bg.hero-streaming .hero-copy h1{
  font-size: 30px !important;
}

.hero-home-bg.hero-streaming .hero-copy p{
  font-size: 14px !important;
}

/* Cards */
.service-card{
  border-radius: 18px !important;
  padding: 14px !important;
}

.service-card img{
  max-width: 220px !important;
  padding: 10px !important;
}

.service-card span{
  font-size: 16px !important;
}

/* ===========================
   CATEGORY PAGE (products grid)
=========================== */
.hero-products{
  padding: 44px 0 50px !important;
}

.hero-products .hero-wrapper{
  width: calc(100% - 22px) !important;
}

.hero-products .hero-wrapper > div{
  padding: 16px !important;
  border-radius: 18px !important;
}

.products-grid{
  grid-template-columns: 1fr !important;
  width: calc(100% - 22px) !important;
  gap: 12px !important;
}

.product-card{
  border-radius: 18px !important;
  padding: 16px !important;
}

.product-img{
  width: 140px !important;
  height: 140px !important;
}

.product-title{
  font-size: 18px !important;
}

.product-desc{
  font-size: 14px !important;
  min-height: unset !important;
}

/* ===========================
   PRODUCT PAGE (MAC inputs)
=========================== */
.mac-inputs{
  gap: 5px !important;
  flex-wrap: wrap;
}
.mac-field{
  width: 34px !important;
  height: 36px !important;
  font-size: 14px !important;
}

/* ===========================
   CART (mobile)
=========================== */
.cart-page{
  z-index: 5 !important;
}

.cart-page .cart-desktop,
.cart-page .cart-summary-desktop{
  width: calc(100% - 22px);
  margin: 0 auto;
}

/* Tables overflow */
.cart-page .table-responsive{
  border-radius: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Buttons full width */
.cart-page a.btn.btn-primary.btn-lg{
  width: 100%;
}

/* ===========================
   LOGIN / SIGNUP / ACCOUNT (mobile)
=========================== */
.login-wrap,
.page-shield,
.container.py-5,
.account-page{
  width: calc(100% - 22px);
  margin-left: auto;
  margin-right: auto;
}

.login-wrap form,
.page-shield form,
.container.py-5 .p-4.rounded,
.account-card.sw-card{
  border-radius: 16px !important;
}

/* Account grid single column already, but ensure spacing */
.account-grid{
  gap: 12px !important;
}

/* ===========================
   DEVICES (mobile)
=========================== */
.hero-devices{
  padding: 54px 0 40px !important;
}
.hero-devices-inner{
  width: calc(100% - 22px) !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
.hero-devices-content h1{
  font-size: 30px !important;
  margin-bottom: 14px !important;
}
.hero-devices-spacer{
  min-height: 220px !important;
  border-radius: 16px !important;
}

/* ===========================
   FOOTER (mobile)
=========================== */
footer.lp-footer{
  position: relative;
  z-index: 1;
  padding: 28px 0 26px;
  margin-top: 46px;
  overflow: visible;
}

.lp-footer .lp-container{
  padding: 0 14px;
}

.lp-footer-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  text-align: left !important;
}

.lp-footer-legal{
  text-align: left !important;
}
/* ===== HOME MOBILE POLISH (fix banner + hero spacing) ===== */
@media (max-width: 991px){

  /* Le hero ne doit pas forcer 100vh sur mobile */
  .d-hero{
    min-height: auto !important;
    padding: calc(var(--nav-h) + 16px) 0 18px !important;
  }

  /* Le slider/banner: hauteur stricte + pas de débordement */
  .d-banner-strip .hero-banner.slider{
    height: 140px !important;
    border-radius: 14px !important;
  }
  .d-banner-strip .hero-slide{
    height: 140px !important;
  }
  .d-banner-strip .hero-slide img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Rapprocher la bannière du hero */
  .d-banner-strip{
    padding-top: 10px !important;
    margin-top: -6px !important;
  }
}

@media (max-width: 991px){

  .d-nav .navbar-toggler{
    border: 1px solid rgba(255,255,255,.25) !important;
    background: rgba(0,0,0,.25) !important;
  }

  /* IMPORTANT: desktop.css met filter: invert(1) → ça rend le blanc NOIR */
  .d-nav .navbar-toggler-icon{
    filter: none !important;
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

}
/* =========================================
   CART — MOBILE LAYOUT (no zoom, no cut)
   Works with your current cart.php markup
========================================= */
@media (max-width: 991px){

  /* Give breathing room */
  .cart-page{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Kill any clipping from containers */
  .cart-page,
  .cart-page .cart-layout,
  .cart-page .cart-desktop,
  .cart-page .cart-summary-desktop{
    overflow: visible !important;
  }

  /* Stack columns */
  .cart-page .cart-layout{
    display: block;
  }
  .cart-page .cart-desktop,
  .cart-page .cart-summary-desktop{
    width: 100%;
    max-width: 100%;
  }

  /* ===== TABLE -> CARDS ===== */

  /* table becomes a simple block wrapper */
  .cart-page .cart-desktop table{
    width: 100% !important;
    display: block;
    border: 0 !important;
    background: transparent !important;
  }

  /* hide header row on mobile */
  .cart-page .cart-desktop thead{
    display: none !important;
  }

  /* tbody as block stack */
  .cart-page .cart-desktop tbody{
    display: block;
    width: 100%;
  }

  /* each row becomes a card */
  .cart-page .cart-desktop tbody tr{
    display: grid !important;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    align-items: start;
    width: 100%;
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 18px;

    background: rgba(10,12,18,.68) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* remove table cell borders/width constraints */
  .cart-page .cart-desktop tbody tr td{
    display: block !important;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    vertical-align: top;
  }

  /* Product cell (image + name) */
  .cart-page .cart-desktop tbody tr td:nth-child(1){
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(1) img{
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;

    border-radius: 16px;
    padding: 10px;
    background: radial-gradient(circle at 30% 30%, rgba(255,70,70,.18), rgba(10,12,18,.82));
    border: 1px solid rgba(255,70,70,.22);
    box-shadow: 0 12px 35px rgba(0,0,0,.45);
  }
  .cart-page .cart-desktop tbody tr td:nth-child(1) .mt-2{
    margin-top: 10px !important;
    text-align: left !important;
    font-weight: 900;
    color: rgba(255,255,255,.92);
    line-height: 1.25;
  }

  /* Details */
  .cart-page .cart-desktop tbody tr td:nth-child(2){
    grid-column: 2;
    grid-row: 1;
    font-size: 13px !important;
    color: rgba(255,255,255,.82);
  }
  .cart-page .cart-desktop tbody tr td:nth-child(2) ul{
    margin: 6px 0 0 !important;
    padding-left: 16px !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(2) li{
    margin: 3px 0;
  }

  /* Qty + OK (compact) */
  .cart-page .cart-desktop tbody tr td:nth-child(3){
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(3) form{
    justify-content: flex-start !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(3) input[type="number"]{
    width: 74px !important;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #fff !important;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(3) .btn{
    border-radius: 12px !important;
    font-weight: 900;
    padding: 9px 14px !important;
  }

  /* Price */
  .cart-page .cart-desktop tbody tr td:nth-child(4){
    grid-column: 2;
    grid-row: 3;
    margin-top: 10px;
    text-align: left !important;
    font-weight: 950;
    font-size: 16px;
    color: rgba(255,255,255,.92);
  }
  .cart-page .cart-desktop tbody tr td:nth-child(4)::before{
    content: "Prix: ";
    opacity: .75;
    font-weight: 800;
    margin-right: 6px;
  }

  /* Delete button as top-right pill */
  .cart-page .cart-desktop tbody tr td:nth-child(5){
    position: absolute;
    right: 12px;
    top: 12px;
    width: auto !important;
  }
  .cart-page .cart-desktop tbody tr{
    position: relative;
  }
  .cart-page .cart-desktop tbody tr td:nth-child(5) .btn{
    width: 40px;
    height: 40px;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }

  /* ===== SUMMARY card ===== */
  .cart-page .cart-summary-desktop{
    margin-top: 14px;
  }
  .cart-page .cart-summary-desktop .card{
    border-radius: 18px;
    background: rgba(10,12,18,.68) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Summary table spacing */
  .cart-page .cart-summary-desktop .table{
    margin-bottom: 0;
  }
  .cart-page .cart-summary-desktop .table td,
  .cart-page .cart-summary-desktop .table th{
    padding: 10px 0 !important;
  }

  /* Make “continue” button always visible and comfy */
  .cart-page .cart-summary-desktop .btn.btn-primary.btn-lg{
    border-radius: 16px !important;
    padding: 14px 16px !important;
    font-weight: 950;
  }
}