/* MasnoonHub Express — homepage page shells + the single responsive switch.
 * The homepage ships two DOMs: a phone-style mobile column (.stagebg / .device,
 * tagged .mh-mobile) and a desktop page card (.dkpage, tagged .mh-desktop).
 * Exactly one shows, decided by ONE breakpoint at 960px. Every component's
 * own styling lives in home.css; this file is just frame + switch.
 */

/* ---- page backdrop: app-grey on mobile, white on desktop ---- */
body.home{ background:var(--app-bg); }
@media (min-width:960px){ body.home{ background:#fff; } }

/* ============================================================
   MOBILE SHELL (< 960px) — full-bleed app column
   The mobile DOM fills the WHOLE viewport up to the 960px desktop switch.
   It used to cap at a centered 480px "phone card", which left the grey page
   background peeking on both sides whenever the viewport was wider than 480
   (landscape, larger phones, zoomed-out / small-text). Now it always fills,
   so there is no side gap at any width. Paper bg + matching backdrop mean any
   sub-pixel rounding can never show a seam either.
   ============================================================ */
.stagebg{ min-height:100vh; padding:0; background:var(--paper); }
.device{ width:100%; max-width:100%; margin:0; background:var(--paper); min-height:100vh;
  position:relative; overflow-x:hidden; box-shadow:none; }
/* keep the sticky bottom tab above content with a soft lift */
.device > .mtab{ z-index:20; box-shadow:0 -6px 18px -12px rgba(20,29,51,.3); }

/* ============================================================
   DESKTOP SHELL (>= 960px) — full-bleed page, centred content
   The page fills the viewport like a real marketplace (Alibaba/Amazon):
   coloured chrome + section backgrounds run edge-to-edge, while each band's
   CONTENT stays centred in a fixed column. This replaces the old floating
   1240px card, which left large empty white gutters on wide monitors.
   ============================================================ */
.dkpage{ max-width:1240px; margin:0 auto; background:#fff; min-height:100vh;
  box-shadow:0 0 60px -20px rgba(20,29,51,.15); }
.dkpage > section + section,
.dkpage > div + section,
.dkpage > section + div{ border-top:1px solid var(--line); }
.dkpage > .dk-flash + div,
.dkpage > .dk-faq,
.dkpage > .dk-faq + .appwait,
.dkpage > .appwait + .dk-trustb{ border-top:0; }
.promostrip + .dk-flash{ border-top:0; }

/* --- the full-bleed override (desktop only) --- */
@media (min-width:960px){
  /* drop the card cap + drop shadow: the page now spans the full viewport */
  .dkpage{ max-width:none; box-shadow:none; }

  /* Centre every band's content in a 1240px column. The symmetric padding
     grows from a 24px floor on smaller desktops to (50% - 620px) on wide
     screens, so content centres while the band's own background bleeds to
     both edges. (border-box so the % math is against the full band width.) */
  .dkpage > *{
    box-sizing:border-box;
    padding-left: max(24px, calc(50% - 620px));
    padding-right: max(24px, calc(50% - 620px));
  }

  /* Footer + app-notify already centre their own inner wrapper (.ftd has
     full-width sub-bands at the bottom; .appwait centres a 480px column), so
     let their backgrounds bleed full width without the column padding. */
  .dkpage > .ftd,
  .dkpage > .appwait{ padding-left:0; padding-right:0; }
}

/* app-notify desktop variant */
.appwait.dk{ display:grid; grid-template-columns:1fr; text-align:center; padding:36px 24px; }
.appwait.dk .appwait__in{ max-width:480px; }
.appwait.dk h3{ font-size:28px; }
.appwait.dk p{ font-size:15px; max-width:46ch; }
.appwait.dk .appwait__field input{ font-size:15px; padding:14px 18px; }
.appwait.dk .appwait__field button{ font-size:14px; padding:14px 22px; }

/* desktop header language toggle active state */
.dk-lang{ user-select:none; transition:color .15s ease; }
.dk-lang.is-bn{ color:var(--brand); font-weight:700; }

/* floating utility rail — a 56px icon pill is flush to the right edge AT ALL TIMES
   (all icons visible, hairline dividers). On hover/focus the pill grows leftward to
   212px and each label fades in to the LEFT of its icon; icons stay pinned to the
   right edge and never shift. Desktop only. (ID+class raises specificity so home.css
   can't override the width transition.) */
#sidetool.sidetool{ position:fixed; right:0; bottom:28px; z-index:100;
  display:flex; flex-direction:column; gap:0; width:56px;
  background:#fff; border:1px solid var(--line); border-right:0;
  border-radius:14px 0 0 14px;
  box-shadow:-2px 2px 8px rgba(20,29,51,.08), -8px 12px 32px -12px rgba(20,29,51,.18);
  overflow:hidden;
  transition:width .28s cubic-bezier(.4,0,.2,1); }
#sidetool.sidetool:hover, #sidetool.sidetool:focus-within{ width:212px; }

.sidetool__btn{ position:relative; display:block; box-sizing:border-box; width:100%; height:54px;
  color:var(--ink-2); text-decoration:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-body); transition:background .15s ease;
  border-bottom:1px solid var(--line); }
.sidetool__btn:last-child{ border-bottom:0; }
.sidetool__btn:hover{ background:var(--brand-soft); }
/* icon: a fixed 56px box pinned to the right edge — always visible at the 56px default width */
.sidetool__ic{ position:absolute; right:0; top:0; width:56px; height:100%;
  display:grid; place-items:center; color:var(--ink-2); transition:color .15s ease; }
.sidetool__ic svg{ width:20px; height:20px; }
.sidetool__btn:hover .sidetool__ic{ color:var(--brand); }
/* label: sits just left of the icon, clipped + faded until the rail expands on hover */
.sidetool__lbl{ position:absolute; right:56px; top:0; height:100%;
  display:flex; align-items:center; padding-left:18px; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--ink); opacity:0; transition:opacity .18s ease; }
#sidetool.sidetool:hover .sidetool__lbl,
#sidetool.sidetool:focus-within .sidetool__lbl{ opacity:1; }
/* Rehnuma (AI) — brand-tinted sparkle, stays branded on hover */
.sidetool__btn.ai .sidetool__ic, .sidetool__btn.ai:hover .sidetool__ic{ color:var(--brand); }
/* Chat — WhatsApp green with a live pulse dot */
.sidetool__btn.chat .sidetool__ic, .sidetool__btn.chat:hover .sidetool__ic{ color:#1d8a5c; }
.sidetool__btn.chat .sidetool__ic::after{ content:""; position:absolute; top:13px; right:15px;
  width:7px; height:7px; border-radius:50%; background:#27c763; border:1.5px solid #fff;
  animation:sidetool-pulse 1.9s ease-out infinite; }
@keyframes sidetool-pulse{ 0%{ box-shadow:0 0 0 0 rgba(39,199,99,.5);} 70%{ box-shadow:0 0 0 7px rgba(39,199,99,0);} 100%{ box-shadow:0 0 0 0 rgba(39,199,99,0);} }
/* Back to top — quieter ink, navy on hover */
.sidetool__btn.top .sidetool__ic{ color:var(--ink-3); }
.sidetool__btn.top:hover{ background:var(--line-2); }
.sidetool__btn.top:hover .sidetool__ic{ color:var(--navy); }
@media (prefers-reduced-motion: reduce){
  #sidetool.sidetool{ transition:none; }
  .sidetool__btn.chat .sidetool__ic::after{ animation:none; }
}

/* ============================================================
   PLUGIN CHROME SUPPRESSION
   Some plugins inject footer/overlay markup (coupon drawer, side cart, mega
   menu) regardless of theme. The bespoke homepage has its own cart/menu UI and
   we strip those plugins' CSS for performance, so hide any markup they leak
   here. Scoped to the homepage only.
   ============================================================ */
body.home [class*="power-coupons"],
body.home [id*="power-coupons"],
body.home [class*="moderncart"],
body.home [id*="moderncart"],
body.home [class*="modern-cart"],
body.home [id*="modern-cart"],
body.home .max-mega-menu,
body.home #mega-menu-wrap,
body.home .ti-wishlist-popup,
body.home .woosq-popup{ display:none !important; }

/* ============================================================
   THE RESPONSIVE SWITCH — one breakpoint, 960px
   ============================================================ */
@media (max-width:959.98px){ .mh-desktop, .sidetool{ display:none !important; } }
@media (min-width:960px){ .mh-mobile{ display:none !important; } }