/* =========================================================
   MOBILE ONLY (loads only <= 900px)
   This will NOT affect desktop at all.
========================================================= */

html, body { overflow-x: hidden; }

/* Top promo */
.Top-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
}
.promo-text{
  font-size:12px;
  line-height:1.2;
  max-width:70%;
}
.contact-link{
  font-size:12px;
  padding:8px 10px;
  white-space:nowrap;
}

/* Header row */
.inner_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Hide desktop nav on mobile (we will open it as drawer) */
.site-nav{
  position: fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  width: min(86vw, 380px);
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255,255,255,0.12);
  padding: 86px 16px 18px;
  transition: right .25s ease;
  z-index: 9999;
}
.site-nav.open{ right: 0; }

/* ===========================
   Hamburger Button
=========================== */

.nav-toggle{
  display: flex;
  flex-direction: column;     /* STACK LINES */
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.15);
  border-radius: 12px;

  cursor: pointer;
  padding: 10px;
  gap: 6px;

  transition: background .2s ease, border .2s ease;
}

/* White Lines */

.nav-toggle span{
  display: block;
  width: 22px;
  height: 2px;

  background: #ffffff;        /* PURE WHITE */
  border-radius: 2px;

  box-shadow: 0 0 1px rgba(255,255,255,.8);
}

/* Hover luxury effect */

.nav-toggle:hover{
  background: rgba(201,162,77,0.12);
  border-color: rgba(201,162,77,0.4);
}


/* Nav list in drawer */
.navigation{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}

.site-nav .nav-link,
.site-nav .dropdown-toggle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:14px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size:16px;
  color:#fff;
  text-decoration:none;
}

/* dropdown menu inside drawer */
.site-nav .dropdown-menu{
  position: static !important;
  display:none;
  margin-top:8px;
  padding:10px;
  border-radius:14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.site-nav .nav-item.dropdown.open .dropdown-menu{ display:block; }

.site-nav .dropdown-menu a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
}

/* cart button style in drawer */
.site-nav .nav-icon .cart-link{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Backdrop */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.nav-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

/* Hero */
.hero-slider{
  height:72vh;
  min-height:520px;
}
.hero-overlay{ padding:18px 14px; }
.hero-copy{ max-width:92%; }
.hero-caption{
  font-size: clamp(16px, 4.6vw, 22px);
  line-height:1.25;
}
.shop-now{
  display:inline-block;
  padding:12px 16px;
  border-radius:999px;
  font-size:14px;
}
.nav-btn{
  width:40px;
  height:40px;
  font-size:28px;
}

/* Who we are */
.who-we-are{ padding:56px 16px; }
.who-title{ font-size: clamp(20px, 5.4vw, 28px); }
.who-text{ font-size:14px; line-height:1.7; }
.who-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.who-btn, .who-link{
  width:100%;
  text-align:center;
}

/* Services home */
.collections-home{ padding:52px 16px; }
.collections-title{ font-size: clamp(20px, 5vw, 28px); }
.collections-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.collections-list a{
  display:block;
  padding:14px 12px;
  border-radius:14px;
}

/* =========================
   BEST PRODUCTS (MOBILE)
   Clean full-image cards
========================= */
@media (max-width: 900px){

  .best-products{ padding:56px 16px; }

  .best-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .best-card{
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
  }

  /* make a nice “frame” so no big empty space */
  .best-card img{
    width: 100%;
    aspect-ratio: 4 / 3;        /* change to 1/1 if you want square */
    height: auto;              /* aspect-ratio handles height */
    display: block;
    object-fit: contain;       /* full image visible */
    object-position: center;
    background: #0a0a0a;        /* clean fill behind image */
  }

  /* badge overlays the image (no giant empty box below) */
  .best-badge{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    text-align: center;

    background: rgba(0,0,0,0.60);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
  }

  .best-badge h3{
    margin: 0;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
  }

  .best-badge span{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #caa24a; /* your gold vibe */
  }
}

/* small phones -> 1 column */
@media (max-width: 520px){
  .best-grid{ grid-template-columns: 1fr; }
  .best-card img{ aspect-ratio: 16 / 10; }
}


/* Footer */
.footer-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 30px 16px;
}
.footer-col{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
}
.footer-bottom{
  padding:16px;
  text-align:center;
}


















/* =========================================================
   CONTACT PAGE (MOBILE ONLY)  <=900px
   Adds responsiveness WITHOUT changing desktop styles.
========================================================= */

.contact-layout{
  padding: 28px 16px 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.contact-left{
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
}

.home-contact{
  font-size: 12px;
  opacity: .8;
  margin: 0 0 10px;
}

.Contacts-text{
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.1;
  margin: 0 0 10px;
}

.Contact-text2{
  font-size: 14px;
  line-height: 1.6;
  opacity: .9;
  margin: 0 0 14px;
}

.whatsapp-link{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.whatsapp-icon{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Form card */
.contact-form{
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
}

.contact-form label{
  display: block;
  font-size: 13px;
  opacity: .9;
  margin: 0 0 12px;
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  color: #fff;
  outline: none;
}

.contact-form textarea{
  resize: vertical;
  min-height: 140px;
}

.contact-form button{
  width: 100%;
  margin-top: 8px;
  padding: 14px 12px;
  border-radius: 999px;
}

/* Selected items row */
.pickedRow{
  margin: 6px 0 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.pickedLabel{
  display: block;
  font-size: 12px;
  opacity: .8;
  margin-bottom: 8px;
}

.pickedItems{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pickedItems .chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Map spacing */
main iframe{
  display: block;
  width: 100%;
  height: 420px;
  margin: 10px 0 0;
}

@media (max-width: 520px){
  main iframe{ height: 360px; }
}

















/* =========================================================
   CART — MOBILE ONLY (<= 900px)
   Add this at the END of mobile.css
========================================================= */

html, body { overflow-x: hidden; }

/* keep cart content from overflowing */
.shopPage,
.gridWrap,
.shopTopInner,
#cartList,
.productGrid{
  max-width: 100%;
}

/* tighter top section on phone */
.shopTop{ padding-left:16px; padding-right:16px; }
.shopHeadingRow{ gap:10px; }
.shopTitle{ font-size: clamp(20px, 5.4vw, 28px); }
.shopSub{ font-size: 14px; line-height: 1.6; }

/* cart list becomes 1 column (cards) */
#cartList.productGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* each cart item layout */
.cartItem{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius: 16px;
  padding: 12px;
}

/* image sizing (no style change, just constraints) */
.cartItem .cartImg{
  width: 92px;
  flex: 0 0 92px;
  border-radius: 14px;
  overflow:hidden;
}
.cartItem .cartImg img{
  width:100%;
  height:92px;
  object-fit: cover;
  display:block;
}

/* text + actions */
.cartItem .cartInfo{
  flex: 1;
  min-width: 0;
}
.cartItem .cartName{
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 6px;
  word-break: break-word;
}
.cartItem .cartMeta{
  font-size: 12px;
  opacity: .9;
  margin: 0 0 10px;
  word-break: break-word;
}

/* action row */
.cartItem .cartRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap: wrap;
}
.cartItem .qty{
  display:flex;
  align-items:center;
  gap:8px;
}
.cartItem .qty button{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cartItem .qty input{
  width: 54px;
  height: 34px;
  border-radius: 12px;
  text-align:center;
}

/* remove button */
.cartItem .removeBtn{
  padding: 10px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

/* bottom actions row on mobile */
#cartActions{
  width: 100%;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
#cartActions .goldBtn,
#cartActions .ghostBtn{
  width: 100%;
}

/* badge safe */
.cart-badge{
  min-width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
}













/* =========================================================
   ABOUT — MOBILE ONLY (<= 900px)
   Add this at the END of mobile.css
========================================================= */

html, body { overflow-x: hidden; }

/* hero */
.about-hero{
  padding: 56px 16px;
}
.about-hero-inner{
  max-width: 100%;
}
.about-title{
  font-size: clamp(26px, 7vw, 38px);
  line-height: 1.08;
}
.about-subtitle{
  font-size: 14px;
  line-height: 1.7;
}

/* blocks */
.about-block{
  padding: 52px 16px;
}
.about-row{
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.about-text{
  min-width: 0;
}
.about-text h3{
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1.2;
}
.about-text p{
  font-size: 14px;
  line-height: 1.75;
}

/* media */
.about-media{
  width: 100%;
  border-radius: 18px;
  overflow:hidden;
}
.about-media img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: cover;
}

/* alt blocks keep same look, just spacing */
.about-block.alt{
  padding: 52px 16px;
}





/* =========================================================
   LIGHT DESIGN — MOBILE ONLY (<= 900px)
   Add this at the END of mobile.css
========================================================= */

html, body { overflow-x: hidden; }

/* general safe padding for sections on phones */
.ld-hero,
.ld-section{
  padding-left: 16px;
  padding-right: 16px;
}

/* HERO */
.ld-hero{
  padding-top: 56px;
  padding-bottom: 46px;
}
.ld-hero-inner{
  max-width: 100%;
}
.ld-title{
  font-size: clamp(28px, 7.4vw, 44px);
  line-height: 1.05;
}
.ld-sub{
  font-size: 14px;
  line-height: 1.75;
}

/* highlight pills wrap nicely */
.ld-highlights{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ld-pill{
  max-width: 100%;
  white-space: nowrap;
}

/* SECTION HEAD */
.ld-head{
  max-width: 100%;
}
.ld-h2{
  font-size: clamp(20px, 5.6vw, 30px);
  line-height: 1.15;
}
.ld-p{
  font-size: 14px;
  line-height: 1.75;
}

/* CARDS -> 1 column */
.ld-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ld-card{
  padding: 14px;
  border-radius: 16px;
}

/* STEPS -> 1 column */
.ld-steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ld-step{
  padding: 14px;
  border-radius: 16px;
}
.ld-num{
  width: 38px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* APPLICATIONS grid -> 2 cols then 1 col */
.ld-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 520px){
  .ld-grid{ grid-template-columns: 1fr; }
}

/* PORTFOLIO images -> 1 column */
.ld-portfolio{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ld-ph{
  border-radius: 16px;
  overflow:hidden;
}
.ld-ph img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: cover;
}

/* FINAL CTA card */
.ld-final{
  margin-top: 16px;
}
.ld-finalCard{
  width: 100%;
  max-width: 100%;
  padding: 16px;
  border-radius: 18px;
}
.ld-btn{
  display:block;
  width: 100%;
  text-align:center;
}













/* =========================================================
   CUSTOMIZATION — MOBILE ONLY (<= 900px)
   Add this at the END of mobile.css
========================================================= */

html, body { overflow-x: hidden; }

/* HERO spacing */
.cc-hero{
  padding: 56px 16px 46px;
}
.cc-hero-inner{
  max-width: 100%;
}
.cc-title{
  font-size: clamp(26px, 7.2vw, 44px);
  line-height: 1.06;
}
.cc-sub{
  font-size: 14px;
  line-height: 1.75;
}

/* CTA buttons stack */
.cc-cta{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.cc-btn{
  width: 100%;
  text-align: center;
}

/* badges wrap */
.cc-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-badge{
  max-width: 100%;
}

/* SECTION spacing */
.cc-section{
  padding: 52px 16px;
}
.cc-wrap,
.cc-head{
  max-width: 100%;
}
.cc-h2{
  font-size: clamp(20px, 5.6vw, 30px);
  line-height: 1.15;
}
.cc-p{
  font-size: 14px;
  line-height: 1.75;
}

/* gallery -> 1 column */
.cc-gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.cc-poster{
  border-radius: 16px;
  overflow:hidden;
}
.cc-poster img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: cover;
}

/* note boxes -> stack */
.cc-note{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.cc-noteBox{
  width: 100%;
  border-radius: 16px;
  padding: 14px;
}
.cc-noteBox ul{
  padding-left: 18px;
}

/* steps -> 1 column */
.cc-steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.cc-step{
  border-radius: 16px;
  padding: 14px;
}
.cc-stepNum{
  width: 38px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* final card */
.cc-finalCta{
  margin-top: 16px;
}
.cc-finalCard{
  width: 100%;
  max-width: 100%;
  padding: 16px;
  border-radius: 18px;
}

















/* =========================================================
   SMART SYSTEMS — MOBILE ONLY (<= 900px)
   Add this at the END of mobile.css
========================================================= */

html, body { overflow-x: hidden; }

/* general section padding */
.ss-hero,
.ss-section{
  padding-left: 16px;
  padding-right: 16px;
}

/* HERO */
.ss-hero{
  padding-top: 56px;
  padding-bottom: 46px;
}
.ss-hero-inner{
  max-width: 100%;
}
.ss-title{
  font-size: clamp(28px, 7.4vw, 44px);
  line-height: 1.05;
}
.ss-sub{
  font-size: 14px;
  line-height: 1.75;
}

/* pills wrap */
.ss-pills{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ss-pill{
  max-width: 100%;
  white-space: nowrap;
}

/* headings */
.ss-h2{
  font-size: clamp(20px, 5.6vw, 30px);
  line-height: 1.15;
}
.ss-p{
  font-size: 14px;
  line-height: 1.75;
}

/* cards -> 1 column */
.ss-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ss-card{
  padding: 14px;
  border-radius: 16px;
}

/* steps -> 1 column */
.ss-steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ss-step{
  padding: 14px;
  border-radius: 16px;
}
.ss-num{
  width: 38px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* gallery single */
.ss-gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ss-ph{
  border-radius: 16px;
  overflow:hidden;
}
.ss-ph img{
  width:100%;
  height:auto;
  display:block;
}

/* final card */
.ss-finalCard{
  width: 100%;
  max-width: 100%;
  padding: 16px;
  border-radius: 18px;
}
.ss-btn{
  display:block;
  width:100%;
  text-align:center;
}




















/* =========================================================
   MOBILE.CSS (ADD THIS ONCE - if you already have it, skip)
   This is your drawer nav system (same as before)
========================================================= */

html, body { overflow-x: hidden; }

/* Top promo */
.Top-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
}
.promo-text{
  font-size:12px;
  line-height:1.2;
  max-width:70%;
}
.contact-link{
  font-size:12px;
  padding:8px 10px;
  white-space:nowrap;
}

/* Header row */
.inner_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Hide desktop nav on mobile (we will open it as drawer) */
.site-nav{
  position: fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  width: min(86vw, 380px);
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255,255,255,0.12);
  padding: 86px 16px 18px;
  transition: right .25s ease;
  z-index: 9999;
}
.site-nav.open{ right: 0; }

/* Hamburger */
.nav-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.15);
  border-radius:12px;
  cursor:pointer;
  padding:10px;
}
.nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:#fff;
  margin:6px 0;
  border-radius:2px;
}

/* Nav list in drawer */
.navigation{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}

.site-nav .nav-link,
.site-nav .dropdown-toggle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:14px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size:16px;
  color:#fff;
  text-decoration:none;
}

/* dropdown menu inside drawer */
.site-nav .dropdown-menu{
  position: static !important;
  display:none;
  margin-top:8px;
  padding:10px;
  border-radius:14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.site-nav .nav-item.dropdown.open .dropdown-menu{ display:block; }

.site-nav .dropdown-menu a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
}

/* cart button style in drawer */
.site-nav .nav-icon .cart-link{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:14px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Backdrop */
.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.nav-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

/* =========================================================
   IMPORTANT PART: 2 cards next to each on mobile
   (Gift items grid only)
========================================================= */

.gridWrap{ padding: 18px 16px; }

#productGrid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* make sure cards don’t overflow */
.productCard{ width: 100%; }
.cardImg img{
  width:100%;
  height:auto;
  display:block;
}

/* very small phones -> 1 column */
@media (max-width: 520px){
  #productGrid{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   ADD THIS TO THE END OF mobile.css
   (This makes 2 cards next to each on mobile)
========================================================= */

.gridWrap{ padding: 18px 16px; }

#productGrid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.productCard{ width:100%; }
.cardImg img{
  width:100%;
  height:auto;
  display:block;
}

/* very small phones -> 1 column */
@media (max-width: 520px){
  #productGrid{ grid-template-columns: 1fr !important; }
}


/* =========================================================
   ADD THIS TO THE END OF mobile.css
   (2 cards next to each on mobile for Furniture page)
========================================================= */

.gridWrap{ padding: 18px 16px; }

#productGrid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.productCard{ width:100%; }
.cardImg img{
  width:100%;
  height:auto;
  display:block;
}

/* very small phones -> 1 column */
@media (max-width: 520px){
  #productGrid{ grid-template-columns: 1fr !important; }
}




















/* ================================
   SHOP PRODUCT GRID (MOBILE)
   2 cards per row
================================ */
@media (max-width: 900px){

  /* IMPORTANT: target only the SHOP grid, not the cart grid */
  .shopPage #productGrid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 10px !important;
  }

  .shopPage #productGrid .productCard{
    width: 100% !important;
    margin: 0 !important;
  }

  .shopPage #productGrid .cardImg{
    width: 100% !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .shopPage #productGrid .cardImg img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
}

/* super small phones -> 1 column */
@media (max-width: 380px){
  .shopPage #productGrid{
    grid-template-columns: 1fr !important;
  }
}







/* ================================
   CART GRID (MOBILE) – 2 COLUMNS
   Put this at VERY BOTTOM of mobile.css
================================ */
@media (max-width: 900px){

  /* override the old 1-column cart rule */
  #cartList.productGrid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* make each cart item behave like a card (stack inside) */
  #cartList .cartItem{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* cart image full width */
  #cartList .cartItem .cartImg{
    width: 100% !important;
    flex: 0 0 auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #cartList .cartItem .cartImg img{
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* prevent text overflow */
  #cartList .cartItem .cartInfo{
    min-width: 0 !important;
  }
}

/* super small phones -> back to 1 column */
@media (max-width: 380px){
  #cartList.productGrid{
    grid-template-columns: 1fr !important;
  }
}

















/* =========================================
   FIX: stop horizontal scroll + slim drawer
   (use transform instead of right:-xxx)
========================================= */
@media (max-width: 900px){

  html, body{
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* slim drawer */
  .site-nav{
    right: 0 !important;                 /* NEVER negative */
    width: 240px !important;             /* slim */
    max-width: 70vw !important;          /* safety on tiny phones */
    height: 100vh !important;

    transform: translateX(110%) !important; /* hidden off-screen */
    transition: transform .25s ease !important;

    padding: 76px 12px 14px !important;
  }

  .site-nav.open{
    transform: translateX(0) !important; /* slide in */
  }

  /* lighter overlay so it doesn't feel huge */
  .nav-backdrop{
    background: rgba(0,0,0,0.18) !important;
  }
}



















/* =========================================
   BEST PRODUCTS (MOBILE) – FIX TALL CARD LINE
   Put at VERY END of mobile.css
========================================= */
@media (max-width: 900px){

  .best-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* kill any desktop fixed height that makes the long border/line */
  .best-card{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    border-radius: 18px !important;
    overflow: hidden !important;

    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    text-decoration: none !important;
  }

  /* image becomes the “top block” */
  .best-card img{
    width: 100% !important;
    height: 230px !important;          /* adjust if you want */
    display: block !important;

    object-fit: contain !important;     /* full image visible */
    object-position: center !important;

    background: #0a0a0a !important;     /* clean fill */
  }

  /* badge sits directly under image (no huge empty space) */
  .best-badge{
    position: static !important;        /* IMPORTANT */
    margin: 0 !important;
    width: 90% !important;

    padding: 14px 12px !important;
    border-radius: 0 !important;

    background: transparent !important; /* keep your look clean */
    border: 0 !important;
    text-align: center !important;
  }
}

/* very small phones -> 1 column */
@media (max-width: 520px){
  .best-grid{ grid-template-columns: 1fr !important; }
  .best-card img{ height: 260px !important; }
}










/* =========================================
   BEST PRODUCTS (MOBILE) – NO EXTRA EMPTY AREA
   Put this at VERY END of mobile.css
========================================= */
@media (max-width: 900px){

  .best-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .best-card{
    position: relative !important;
    display: block !important;

    /* kill desktop “tall card” behavior */
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    justify-content: flex-start !important;

    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;

    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    text-decoration: none !important;
  }

  /* image defines the card height */
  .best-card img{
    width: 100% !important;
    height: 250px !important;        /* <- change this if you want taller */
    display: block !important;

    object-fit: contain !important;  /* full image */
    object-position: center !important;
    background: #0a0a0a !important;
  }

  /* put badge ON the image (so nothing below = no long line) */
  .best-badge{
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;

    margin: 0 !important;
    padding: 12px 12px !important;
    border-radius: 16px !important;
    text-align: center !important;

    background: rgba(0,0,0,0.60) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(10px) !important;
  }
}

@media (max-width: 520px){
  .best-grid{ grid-template-columns: 1fr !important; }
  .best-card img{ height: 280px !important; }
}







/* =========================================
   CONTACT (MOBILE) – STOP INPUTS OVERFLOWING
   Put at END of mobile.css
========================================= */
@media (max-width: 900px){

  /* safest fix: include padding/border in width */
  .contact-form,
  .contact-form *{
    box-sizing: border-box;
  }

  /* make sure form card itself never exceeds screen */
  .contact-form{
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* keeps everything inside rounded corners */
  }

  /* inputs/textarea/buttons fit perfectly */
  .contact-form input,
  .contact-form textarea,
  .contact-form button{
    width: 100%;
    max-width: 100%;
    display: block;
  }

  /* OPTIONAL: slightly shorter fields like your screenshot */
  .contact-form input{
    padding: 10px 12px;
    border-radius: 14px;
  }

  .contact-form textarea{
    min-height: 120px; /* was 140px */
  }
}







/* =========================================
   CONTACT (MOBILE) – FIX WHATSAPP BUTTON OVERFLOW
   Put at VERY END of mobile.css
========================================= */
@media (max-width: 900px){

  .contact-left,
  .whatsapp-link{
    box-sizing: border-box;
    max-width: 100%;
  }

  .whatsapp-link{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 12px 12px !important;
    border-radius: 14px !important;

    overflow: hidden !important;     /* keeps inside the rounded card */
  }

  /* allow flex children to shrink (KEY FIX) */
  .whatsapp-link > *{
    min-width: 0 !important;
  }

  /* stop the long text from forcing the button wider */
  .whatsapp-link span{
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    letter-spacing: normal !important;  /* if your desktop adds big spacing */
  }

  .whatsapp-icon{
    flex: 0 0 22px !important;
  }
}

















/* =========================================
   WHO WE ARE (MOBILE) – FIX BUTTON OVERFLOW
   Put at VERY END of mobile.css
========================================= */
@media (max-width: 900px){

  .who-we-are,
  .who-inner{
    box-sizing: border-box;
    max-width: 100%;
  }

  .who-actions{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .who-actions .who-btn,
  .who-actions .who-link{
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;

    padding: 12px 14px !important;     /* slightly smaller */
    letter-spacing: normal !important;  /* kills any huge spacing */
    white-space: nowrap !important;     /* keeps it 1 line */
    overflow: hidden !important;        /* prevents spilling */
    text-overflow: ellipsis !important; /* if it’s too long, it clips nicely */
  }
}










/* =========================================
   MODAL (MOBILE) – FIX INQUIRE NOW HUGE
   Put at VERY END of mobile.css
========================================= */
@media (max-width: 900px){

  /* buttons container */
  .modalActions{
    display:flex !important;
    flex-direction:column !important;
    gap: 12px !important;
    width:100% !important;
  }

  /* force BOTH to same exact size */
  .modalActions .goldBtn.wide,
  .modalActions .ghostBtn.wide,
  .modalActions a.ghostBtn.wide{
    width:100% !important;
    max-width:100% !important;

    height:56px !important;     /* <-- SAME HEIGHT */
    padding:0 !important;       /* <-- KILLS BIG PADDING THAT MAKES IT HUGE */
    margin:0 !important;

    display:flex !important;    /* center text perfectly */
    align-items:center !important;
    justify-content:center !important;

    line-height:1 !important;   /* <-- stops tall text line */
    font-size:16px !important;  /* keep consistent */
    letter-spacing: normal !important;

    box-sizing:border-box !important;
    text-decoration:none !important;
  }
}







/* =========================================
   MODAL (MOBILE) – CLOSE (X) PERFECTLY INSIDE TOP BAR
   Put at VERY END of mobile.css
========================================= */
@media (max-width: 900px){

  /* ensure modal is reference */
  .productModal{
    position: relative !important;
    overflow: hidden !important;
  }

  /* make the promo bar the anchor for the X */
  .modalPromo{
    position: relative !important;
    padding-right: 56px !important; /* space for the X button */
  }

  /* place X INSIDE the top promo bar */
  .modalClose{
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;

    width: 34px !important;
    height: 34px !important;

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

    border-radius: 10px !important;
    background: rgba(0,0,0,0.55) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;

    font-size: 18px !important;
    line-height: 1 !important;

    z-index: 50 !important;
  }
}




/* keep cart + language nicely aligned in mobile nav */
.nav-item.nav-icon,
.nav-item.nav-lang{
  display: flex;
  align-items: center;
}



/* =========================================
   MOBILE NAV – SHORTER buttons + keep text inside
   Put at VERY END of mobile.css
========================================= */
@media (max-width: 900px){

  .site-nav .nav-link,
  .site-nav .dropdown-toggle{
    box-sizing: border-box !important;
    width: 100% !important;

    height: 44px !important;          /* <-- SHORTER */
    padding: 0 12px !important;       /* <-- NO vertical padding */
    border-radius: 12px !important;

    display: flex !important;
    align-items: center !important;   /* vertical center */
    justify-content: space-between !important;
    gap: 10px !important;

    font-size: 14px !important;
    line-height: 1 !important;        /* stops tall text */
    overflow: hidden !important;      /* nothing can stick out */
  }

  /* keep the label on one line (Arabic/English) */
  .site-nav .nav-link{
    white-space: nowrap !important;
  }

  /* caret smaller + never overflow */
  .site-nav .caret{
    flex: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
}


/* SHOWROOM TOUR (MOBILE) */
.showroom-inner{
  grid-template-columns: 1fr;
  gap: 18px;
}

.showroom-title{
  font-size: 26px;
}

.showroom-tour{
  padding: 48px 0;
}



/* Hide mobile-only items on desktop */
.mobile-only{
  display:none !important;
}

/* Show them only on mobile */
@media (max-width: 900px){
  .mobile-only{
    display:block !important;
  }

  /* Hide top Contact on mobile */
  .Top-header .contact-link{
    display:none;
  }
}







@media (max-width: 900px) {
  .ld-btn,
  .cc-btn,
  .ss-btn{
    display: inline-block;
    width: auto;
    padding: 14px 170px;   /* wide enough, NOT breaking mobile */
    font-size: 16px;
    margin: 12px auto 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ld-finalCard,
  .cc-finalCard,
  .ss-finalCard{
    text-align: center;
  }
}






.nav-toggle{
  display:flex !important;
  flex-direction:column !important;
  align-items:center;
  justify-content:center;

  width:44px;
  height:44px;

  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.2);
  border-radius:12px;

  cursor:pointer;
  padding:0;
}


.nav-toggle span{
  display:block !important;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;

  margin: -1px 0;   /* THIS is tighter than gap 0 */
}