/* =========================================================
   COMPUTER 2 DAY — Main Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Rubik:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

:root{
  --bg: #05070D;
  --bg-alt: #0A0D16;
  --card: #10141F;
  --card-2: #141926;
  --border: #232A3A;
  --text: #F2F5FA;
  --text-dim: #8D96AC;
  --blue: #06B6FF;
  --purple: #0B72B9; /* kept as a variable name for compatibility; premium deep-blue, no longer purple */
  --orange: #F5A623; /* reserved ONLY for numbers: prices, stats, counters — never decoration */
  --deepblue: #0284C7;
  --green: #22C55E; /* reserved ONLY for semantic success/in-stock status, never decoration */
  --grad-main: linear-gradient(90deg, var(--blue), var(--deepblue));
  --grad-btn: linear-gradient(135deg, var(--blue), var(--deepblue));
  --grad-btn-2: linear-gradient(135deg, var(--deepblue), var(--blue));
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --font-en: 'Poppins', 'Rubik', sans-serif;
  --font-ur: 'Noto Naskh Arabic', 'Noto Nastaliq Urdu', serif;
  --font-ur-heading: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
}
body[data-theme="light"]{
  --bg: #F6F8FC;
  --bg-alt: #EDF1F8;
  --card: #FFFFFF;
  --card-2: #F7F9FD;
  --border: #DDE3EE;
  --text: #10141F;
  --text-dim: #5B6474;
  --shadow: 0 10px 28px rgba(16,24,52,.08);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
/* These WhatsApp links intentionally have no href (see setWaTarget() in script.js) —
   this stops the browser's normal link-preview status bar from ever showing the
   destination URL / pre-filled message on hover. Cursor + focus style restored here. */
[data-wa]{ cursor: pointer; }
[data-wa]:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
/* Internal #anchor / tel: / mailto: links also lose their href (see sanitizeInternalLinks()
   in script.js) purely to stop the same browser status-bar preview — same treatment. */
[data-nav]{ cursor: pointer; }
[data-nav]:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
}
body.lang-ur{
  font-family: var(--font-ur);
  direction: rtl;
}
body.lang-ur h1, body.lang-ur h2, body.lang-ur .hero-content h1{
  font-family: var(--font-ur-heading);
  line-height: 2.1;
}
body.lang-ur .hero-content h1{ font-size: clamp(24px, 3.6vw, 38px); }
body.lang-ur .section-head h2{ font-size: clamp(22px, 3vw, 32px); }
body.lang-ur .banner-heading{ font-size: clamp(20px, 2.6vw, 32px); }
body.lang-ur .featured-circle-card{ direction:rtl; }
body.lang-ur .hero-visual{ min-width:0; }
body.lang-ur nav.nav-links a, body.lang-ur .btn, body.lang-ur .lang-switch button,
body.lang-ur .filter-tabs button, body.lang-ur input, body.lang-ur textarea, body.lang-ur select{
  font-family: var(--font-ur);
}
img{ max-width:100%; display:block; }
svg{ display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; }
.container{ max-width: var(--c2d-content-width, 1220px); margin:0 auto; padding: 0 20px; }
section{ padding: var(--c2d-section-gap, 90px) 0; position:relative; }
.section-tag{
  display:inline-block; padding:6px 16px; border-radius: 999px;
  background: rgba(6,182,255,.12); border:1px solid rgba(6,182,255,.35);
  color: var(--blue); font-size:13px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:14px;
}
.section-head{ text-align:center; max-width:680px; margin: 0 auto 50px; }
.section-head h2{
  font-size: clamp(28px,4vw,42px); font-weight:800; margin-bottom:12px; color: var(--blue);
}
.section-head p{ color: var(--text-dim); font-size:16px; }

.gradient-text{
  background: var(--grad-main); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 30px;
  border-radius: 999px; font-weight:700; font-size:15px; border:none; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease; white-space:nowrap;
}
.btn-primary{ background: var(--grad-btn); color:#fff; box-shadow: 0 8px 24px rgba(6,182,255,.30); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(6,182,255,.42); }
.btn-outline{ background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover{ border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }
.btn-whatsapp{ background: linear-gradient(135deg,#25D366,#128C7E); color:#fff; box-shadow:0 8px 24px rgba(37,211,102,.35); }
.btn-whatsapp:hover{ transform: translateY(-3px); }
.btn-block{ width:100%; justify-content:center; }

/* ===== Top bar ===== */
.topbar{
  background: linear-gradient(90deg, #05070D, #0D1220, #05070D);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
body[data-theme="light"] .topbar{
  background: linear-gradient(90deg, #F5F7FA, #EDF1F7, #F5F7FA);
}
.topbar-row-1{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:9px; padding-bottom:6px; gap:14px; flex-wrap:wrap;
}
.topbar-row-2{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:6px; padding-bottom:9px; gap:14px; flex-wrap:wrap;
  border-top: 1px solid rgba(255,255,255,.05);
}
.topbar-info{ display:flex; gap:22px; flex-wrap:wrap; flex:1; justify-content:space-between; min-width:0; }
.topbar-info > span{ min-width:0; }
.topbar-center{ display:flex; justify-content:flex-start; min-width:0; }
.topbar-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 1024px){
  .topbar-right{ width:100%; }
}
.topbar-info span{ display:flex; align-items:center; gap:6px; min-width:0; }
.topbar-info span > span, .topbar-info span > a{ min-width:0; }
.topbar-info a{ color: var(--text-dim); overflow-wrap:anywhere; }
.topbar-phones{ min-width:0; }
.topbar-info a:hover{ color: var(--blue); }
.lang-switch{ display:flex; gap:6px; background: var(--card); border:1px solid var(--border); border-radius: 999px; padding:3px; }
.lang-switch button{
  border:none; background:transparent; color: var(--text-dim); padding:5px 14px; border-radius:999px;
  font-size:12px; font-weight:700; cursor:pointer; transition:.25s;
}
.lang-switch button.active{ background: var(--grad-btn-2); color:#fff; }

/* ===== Header / Nav ===== */
header.main-header{
  position: sticky; top:0; z-index: 999; isolation:isolate;
  background: rgba(5,7,13,.88); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 0 rgba(6,182,255,.12);
}
body[data-theme="light"] header.main-header{
  background: rgba(255,255,255,.88);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding-block: 14px; gap:20px; flex-wrap:nowrap; min-width:0; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; min-width:0; position:relative; overflow:hidden; }
.brand::after{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(6,182,255,.35), rgba(255,255,255,.65), rgba(6,182,255,.35), transparent);
  transform: skewX(-20deg); pointer-events:none; transition: left .7s ease;
}
.brand:hover::after{ left:130%; }
body[data-theme="light"] .brand::after{
  background: linear-gradient(120deg, transparent, rgba(6,182,255,.25), rgba(6,182,255,.08), transparent);
}
.brand img{ height:40px; width:auto; flex-shrink:0; }
.brand-name{ font-weight:800; font-size:20px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.brand-name small{ display:block; font-size:11px; font-weight:600; color: var(--blue); letter-spacing:2px; }
nav.nav-links{ display:flex; gap:20px; flex-shrink:0; align-items:center; }
nav.nav-links a{
  font-weight:600; font-size:14px; color: var(--text); position:relative; padding: 6px 0; white-space:nowrap;
}
nav.nav-links a::after{
  content:''; position:absolute; inset-inline-start:0; bottom:0; width:0; height:2px; background: var(--grad-main);
  transition: width .3s ease;
}
nav.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; flex-basis:auto; flex-wrap:nowrap; position:relative; z-index:5; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; flex-shrink:0; }
.menu-toggle span{ width:26px; height:3px; background: var(--text); border-radius:3px; transition: transform .3s ease, opacity .2s ease; }
.menu-toggle.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ===== Hero ===== */
/* ===== Category Menu Bar — directly below the header border. Every category is a
   plain menu item (Home | Laptops ⌄ | Desktops ⌄ | ...). Hovering/tapping any of them
   opens ONE SHARED dropdown, always centered under the bar and capped to the viewport
   width — so it can never spill outside the page, no matter which item opened it.
   Colors/styling here intentionally reuse the site's own theme variables (--card,
   --border, --blue, --purple, --orange) so this bar matches the rest of the brand
   instead of using a one-off custom color. ===== */
.cat-menu-bar{
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position:relative; z-index:190;
  display:flex; align-items:stretch; justify-content:center;
}
.cat-menu-scroll-btn{
  flex:0 0 34px; display:flex; align-items:center; justify-content:center;
  background:var(--card); border:none; border-inline-end:1px solid var(--border);
  color:var(--blue); font-size:20px; font-weight:900; cursor:pointer; z-index:2;
}
.cat-menu-scroll-right{ border-inline-end:none; border-inline-start:1px solid var(--border); }
.cat-menu-scroll-btn:hover{ background:var(--bg-alt); }
.cat-menu-scroll-btn.is-hidden{ visibility:hidden; }
.cat-menu-inner{
  display:flex; align-items:stretch; gap:2px; padding:0; overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; flex:0 1 1220px; width:calc(100% - 68px); min-width:0;
  scroll-behavior:smooth; direction:ltr;
}
.cat-menu-inner::-webkit-scrollbar{ display:none; }
.cat-menu-home{
  display:flex; align-items:center; padding:13px 18px; color: var(--text); font-weight:700; font-size:13.5px;
  border-inline-end:1px solid var(--border); flex-shrink:0; position:relative; transition:.2s;
}
.cat-menu-home::after, .cat-menu-btn::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px;
  background: var(--grad-btn); transform: scaleX(0); transition: transform .25s ease;
}
.cat-menu-home:hover{ color: var(--blue); }
.cat-menu-home:hover::after{ transform: scaleX(1); }
.cat-menu-btn{
  display:flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  color: var(--text); font-weight:600; font-size:13.5px; padding:13px 16px; white-space:nowrap; flex-shrink:0;
  border-inline-end:1px solid var(--border); transition:.2s; position:relative;
}
.cat-menu-btn i{ font-style:normal; font-size:11px; opacity:.7; color: var(--blue); transition: transform .25s ease; }
.cat-menu-btn:hover, .cat-menu-btn.active{ color: var(--blue); background: var(--bg-alt); }
.cat-menu-btn:hover::after, .cat-menu-btn.active::after{ transform: scaleX(1); }
.cat-menu-btn.active i{ transform: rotate(180deg); }

.cat-menu-shared-drop{
  position:absolute; top:100%; left:0; /* left is overridden per-open by JS to sit under the hovered button */
  transform: translateY(10px) scale(.98);
  width:min(680px, calc(100vw - 24px)); max-width:calc(100vw - 24px);
  background: var(--card);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border:1px solid var(--border); border-radius:0 0 16px 16px;
  box-shadow: var(--shadow), 0 24px 50px rgba(0,0,0,.3); opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s; z-index:250;
  padding:16px 22px; column-count:1; column-gap:24px;
  max-height:min(60vh, 420px); overflow-y:auto;
}
.cat-menu-shared-drop::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-btn);
  border-radius:2px 2px 0 0;
}
.cat-menu-shared-drop.open{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1);
}
/* Text-only rows — no icons, no images, no cards, no thumbnails, no previews. */
.cmd-row{
  display:block; break-inside:avoid; padding:10px 4px; font-size:13.5px; font-weight:600;
  color: var(--text); border-bottom:1px solid var(--border); transition: color .18s ease, padding-inline-start .18s ease;
  cursor:pointer;
}
.cmd-row:hover{ color: var(--blue); padding-inline-start:8px; }
.cmd-viewall{
  display:block; column-span:all; text-align:center; margin-top:10px; padding:11px; border-radius:10px;
  background: var(--grad-btn); color:#fff; font-weight:800; font-size:12.5px; transition: box-shadow .2s ease;
  cursor:pointer;
}
.cmd-viewall:hover{ box-shadow: 0 10px 24px rgba(6,182,255,.35); }
.cmd-empty{ column-span:all; color: var(--text-dim); font-size:12.5px; text-align:center; padding:26px 0; }

/* ===== Mega menu: "Products" flat grid (every category, names only, balanced columns) ===== */
.cat-menu-shared-drop.cmd-flat-mode{
  column-count:1; padding:20px 24px;
  width:min(900px, calc(100vw - 24px)); max-width:calc(100vw - 24px);
}
.cmd-flatgrid{
  display:grid; grid-template-columns:1fr; gap:2px 24px; width:100%;
}
.cmd-flatgrid .cmd-row{ border-bottom:1px solid var(--border); }

/* ===== Mega menu: per-category tree list + flyout for nested sub-categories ===== */
.cmd-treelist{ width:100%; }
.cmd-tree-item{ position:relative; break-inside:avoid; }
.cmd-tree-item .cmd-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.cmd-flyout-arrow{ font-style:normal; opacity:.55; font-size:15px; line-height:1; }
.cmd-flyout{
  position:absolute; top:-1px; inset-inline-start:100%; margin-inline-start:10px;
  min-width:200px; background: var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow: var(--shadow), 0 20px 50px rgba(0,0,0,.35); padding:8px 14px;
  opacity:0; visibility:hidden; transform: translateX(-6px); pointer-events:none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s; z-index:260;
}
[dir="rtl"] .cmd-flyout{ transform: translateX(6px); }
.cmd-tree-item.flyout-open .cmd-flyout{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(0);
}
.cmd-tree-item.flyout-open > .cmd-row{ color: var(--blue); }
.cmd-flyout .cmd-row{ border-bottom:1px solid var(--border); white-space:nowrap; }
.cmd-flyout .cmd-row:last-child{ border-bottom:none; }

@media (max-width: 640px){
  .cat-menu-inner{ flex:1 1 auto; width:auto; }
  .cat-menu-home, .cat-menu-btn{ padding:11px 13px; font-size:12.5px; }
  .cat-menu-shared-drop{ column-count:1; }
  .cmd-flatgrid{ grid-template-columns:1fr; } /* was 2-col — caused partial letters on mobile edge */
  .cmd-flyout{ position:static; margin-inline-start:0; margin-top:6px; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none; border-style:dashed; }
}

.hero{
  padding: 60px 0 40px; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 15% 20%, rgba(6,182,255,.12), transparent 40%),
              radial-gradient(circle at 85% 70%, rgba(2,132,199,.10), transparent 45%),
              radial-gradient(circle at 50% 100%, rgba(6,182,255,.07), transparent 45%);
  pointer-events:none;
}
.banner-wrap{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow);
  margin-bottom: 50px; position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(6,182,255,.16), transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(2,132,199,.16), transparent 45%),
    radial-gradient(circle at 60% 5%, rgba(6,182,255,.08), transparent 40%),
    var(--bg-alt);
}
.banner-grid{
  display:grid; grid-template-columns: 1.25fr 1fr; align-items:center; gap:24px;
  padding: 44px 56px; min-height: 320px;
}
.banner-text-block{ min-width:0; }
.banner-heading{
  font-size: clamp(28px, 3.8vw, 50px); font-weight:900; letter-spacing:.5px; line-height:1.25; margin-bottom:12px;
  overflow-wrap:break-word; word-break:break-word; white-space:normal; font-family: 'Poppins', Arial, sans-serif;
  filter: drop-shadow(0 6px 14px rgba(6,182,255,.35));
  position:relative; display:inline-block; cursor:default;
}
.banner-heading::after{
  content:''; position:absolute; top:-10%; left:-60%; width:35%; height:120%;
  background: linear-gradient(120deg, transparent, rgba(6,182,255,.4), rgba(255,255,255,.75), rgba(6,182,255,.4), transparent);
  transform: skewX(-20deg); pointer-events:none; transition: left .8s ease; mix-blend-mode: overlay;
}
.banner-heading:hover::after{ left:130%; }
.banner-tag{
  font-weight:800; font-size: clamp(14px, 1.4vw, 18px); margin-bottom:14px; line-height:1.7; overflow-wrap:break-word;
  background: linear-gradient(90deg, var(--blue), var(--deepblue));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.banner-intel-pill{
  display:inline-block; border:1.5px solid var(--blue); color: var(--blue); font-size:12px; font-weight:700;
  letter-spacing:.5px; padding:6px 16px; border-radius:999px; margin-bottom:16px; text-transform:uppercase;
}
.banner-url-line{ color: var(--blue); font-weight:800; font-size: clamp(15px,1.6vw,20px); margin-bottom:6px; overflow-wrap:break-word; }
.banner-addr-line{ color: var(--text-dim); opacity:.8; font-size: clamp(11px,1.1vw,14px); line-height:1.6; overflow-wrap:break-word; }
.banner-visual{ display:flex; align-items:center; justify-content:center; width:100%; }
.banner-visual img{
  width:auto; height: clamp(240px, 40vw, 420px); max-width:100%; border-radius:14px;
  filter: drop-shadow(0 10px 34px rgba(6,182,255,.28));
}
@media (max-width: 1024px){
  .banner-grid{ padding: 36px 40px; gap:20px; }
}
@media (max-width: 820px){
  .banner-grid{ grid-template-columns: 1fr; padding: 30px 22px; text-align:center; gap:18px; }
  .banner-visual{ order:-1; }
  .banner-visual img{ max-width:320px; }
  .banner-intel-pill{ font-size:10.5px; padding:5px 12px; }
  .banner-addr-line{ font-size:11px; }
}
@media (max-width: 360px){
  .banner-grid{ padding: 26px 16px; }
  .banner-heading{ font-size: 24px; letter-spacing:0; }
}

.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:50px; align-items:center; min-width:0; }
.hero-content .badge{
  display:inline-flex; align-items:center; gap:6px; background: var(--card); border:1px solid var(--border);
  padding: 8px 16px; border-radius: 999px; font-size:13px; font-weight:600; color: var(--blue); margin-bottom:20px;
}
.hero-content{ min-width:0; }
.hero-content h1{ font-size: clamp(32px,5vw,54px); font-weight:900; line-height:1.15; margin-bottom:18px; overflow-wrap:break-word; }
.hero-content p{ color: var(--text-dim); font-size:17px; margin-bottom:30px; max-width:520px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.hero-stats div h3{ font-size:28px; font-weight:800; color: var(--blue); }
.hero-stats div span{ font-size:13px; color: var(--text-dim); }

.hero-visual{ position:relative; margin-bottom: 24px; }
.hero-card{
  background: linear-gradient(160deg, var(--card), var(--card-2));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 30px 40px;
  box-shadow: var(--shadow); position:relative;
}
.hero-card .float-chip{
  position:absolute; background: var(--card); border:1px solid var(--border); border-radius: 999px;
  padding:11px 20px 11px 11px; display:flex; align-items:center; gap:10px; box-shadow: 0 14px 30px rgba(0,0,0,.4);
  font-size:13px; font-weight:700; backdrop-filter: blur(8px); white-space:nowrap; max-width:none;
}
body.lang-ur .hero-card .float-chip{ padding:11px 11px 11px 20px; }
.float-chip .chip-ic{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.chip-1{ top:-20px; inset-inline-end:-16px; color: var(--text); border-image: linear-gradient(135deg, var(--blue), transparent) 1; }
.chip-2{ bottom:-20px; inset-inline-start:-16px; color: var(--text); }
.chip-1 .chip-ic{ background: linear-gradient(135deg, rgba(6,182,255,.25), rgba(6,182,255,.1)); color: var(--blue); }
.chip-2 .chip-ic{ background: linear-gradient(135deg, rgba(6,182,255,.25), rgba(6,182,255,.1)); color: var(--blue); }
.hero-card img{ border-radius: 12px; }
.hero-illustration{ padding: 34px 10px 10px; }
.hero-illustration svg{ width:100%; height:auto; display:block; filter: drop-shadow(0 8px 20px rgba(6,182,255,.20)); }

/* ===== Marquee — now a 3D stylish scrolling card strip ===== */
.brand-strip{
  background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding: 26px 0; overflow:hidden; position:relative; perspective: 900px; direction:ltr;
}
.marquee{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:scroll var(--marquee-duration,40s) linear infinite; animation-play-state:running; transform-style:preserve-3d; will-change:transform; direction:ltr; flex-wrap:nowrap; }
.marquee-group{ display:flex; gap:10px; flex:0 0 auto; width:max-content; white-space:nowrap; align-items:center; }
.marquee-group + .marquee-group{ margin-inline-start:0; }
.marquee:hover{ animation-play-state: running; }
.marquee span{
  flex: 0 0 auto;
  color: var(--text-dim); font-weight:800; letter-spacing:1.5px; font-size:13.5px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; background: var(--card); border:1px solid var(--border);
  padding:9px 14px; border-radius:12px; box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transform: perspective(600px) rotateY(8deg) rotateX(2deg); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease;
}
.marquee span::before{ content:'✦'; color: var(--blue); font-size:11px; }
.marquee span img{ height:22px; width:auto; max-width:120px; object-fit:contain; display:block; }
@media (max-width: 640px){
  .marquee span img{ height:18px; max-width:90px; }
}
.marquee span:hover{
  transform: perspective(600px) rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.06);
  border-color: var(--blue); color: var(--text); box-shadow: 0 18px 34px rgba(6,182,255,.25);
}
.marquee span:nth-child(3n+2){ transform: perspective(600px) rotateY(-8deg) rotateX(-2deg); }
.marquee span:nth-child(3n+2):hover{ transform: perspective(600px) rotateY(0deg) rotateX(0deg) translateY(-6px) scale(1.06); }
.marquee span::after{
  content:""; position:absolute; inset:-5px; border-radius:inherit; pointer-events:none;
  opacity:0; box-shadow:0 0 0 1px rgba(6,182,255,.15), 0 0 18px rgba(6,182,255,.20), 0 0 34px rgba(6,182,255,.10);
  transition:opacity .25s ease, box-shadow .25s ease;
}
.marquee span{ position:relative; isolation:isolate; }
.marquee span:hover::after,
.marquee span.c2d-hover-glow::after,
.marquee span.c2d-tap-glow::after{
  opacity:1; box-shadow:0 0 0 1px rgba(6,182,255,.45), 0 0 18px rgba(6,182,255,.48), 0 0 34px rgba(6,182,255,.24);
}
@media (max-width:640px){
  .marquee-group{gap:7px;}
  .marquee span{padding:8px 11px; font-size:11.5px;}
}
@keyframes c2dBrandScroll{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(calc(-1 * var(--marquee-distance, 0px)),0,0);} }
@keyframes scrollRtl{ from{ transform: translateX(-50%);} to{ transform: translateX(0);} }
@media (max-width: 640px){
  .marquee span{ padding:9px 16px; font-size:12px; border-radius:10px; }
}

/* ===== Salam / greeting banner ===== */
.salam-banner{
  text-align:center; font-family:'Noto Nastaliq Urdu', serif; font-size:26px; font-weight:700; line-height:2.6;
  background: var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  margin-bottom: 18px; direction: rtl;
}
body:not(.lang-ur) .salam-banner{ font-family:'Noto Nastaliq Urdu', serif; font-weight:700; }

/* ===== Services ===== */
.services-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.service-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 30px 24px; transition: .3s ease; position:relative; overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; inset:0; opacity:0; background: var(--grad-main); transition:.3s;
}
.service-card:hover{ transform: translateY(-8px); border-color: transparent; box-shadow: var(--shadow); }
.service-card .icon-wrap{
  width:56px; height:56px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; background: var(--grad-btn-2); color:#fff;
}
.service-card .icon-wrap svg{ width:28px; height:28px; }
.service-card .icon-wrap.service-photo-wrap{
  width:72px; height:72px; background: var(--bg-alt); padding:6px; overflow:hidden;
}
.service-card .icon-wrap.service-photo-wrap img{ width:100%; height:100%; object-fit:contain; }
.service-card:nth-child(4n+2) .icon-wrap{ background: var(--grad-btn); }
.service-card:nth-child(4n+3) .icon-wrap{ background: var(--grad-btn); }
.service-card:nth-child(4n+4) .icon-wrap{ background: var(--grad-btn); }
.service-card h3{ font-size:18px; font-weight:700; margin-bottom:10px; }
.service-card p{ color: var(--text-dim); font-size:14px; }

/* ===== Products / Categories ===== */
.filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom: 40px; }
.filter-tabs button{
  padding: 9px 20px; border-radius:999px; border:1px solid var(--border); background: var(--card);
  color: var(--text-dim); font-weight:600; font-size:13px; cursor:pointer; transition:.25s;
}
.filter-tabs button.active, .filter-tabs button:hover{ background: var(--blue); color:#04101C; border-color:transparent; }

.adv-filter-bar{
  display:flex; flex-wrap:wrap; align-items:end; gap:16px; justify-content:center;
  background: var(--card); border:1px solid var(--border); border-radius:14px;
  padding:16px 20px; margin-bottom:28px;
}
.adv-filter-group{ display:flex; flex-direction:column; gap:5px; min-width:140px; }
.adv-filter-search{ min-width:200px; flex:1 1 220px; }
@media (max-width: 640px){ .adv-filter-search{ flex:0 0 auto; min-width:0; } }
.adv-filter-group label{ font-size:11.5px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
.adv-filter-group select, .adv-filter-group input{
  padding:9px 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg-alt); color:var(--text); font-size:13px;
}
.adv-filter-check{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); padding-bottom:9px; cursor:pointer; }
.adv-filter-check input{ width:16px; height:16px; accent-color: var(--blue); cursor:pointer; }
#filterResetBtn{ padding:9px 18px; font-size:12.5px; }
@media (max-width: 640px){
  .adv-filter-bar{ flex-direction:column; align-items:stretch; }
  .adv-filter-group{ min-width:0; }
}

.products-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.product-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; transition:.3s; display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--blue); }
.product-thumb{
  height:160px; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(6,182,255,.14), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(2,132,199,.12), transparent 55%),
    linear-gradient(160deg, var(--card-2), var(--bg-alt));
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.product-thumb:has(svg)::before{
  content:''; position:absolute; width:92px; height:92px; border-radius:50%;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border), 0 8px 20px rgba(0,0,0,.15);
}
.product-thumb svg{ width:46px; height:46px; color: var(--blue); position:relative; z-index:1; }
.product-thumb img{ position:relative; z-index:1; }
.product-card:nth-child(3n+2) .product-thumb svg{ color: var(--blue); }
.product-card:nth-child(3n+3) .product-thumb svg{ color: var(--blue); }
.product-thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; padding:10px; transition:opacity .16s ease, transform .25s ease; }
.product-thumb img.product-image-switching{ opacity:.35; transform:scale(1.02); }
.sold-badge{
  position:absolute; top:10px; inset-inline-start:10px; z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:28px; max-width:calc(100% - 58px);
  background:linear-gradient(135deg,#ff5b6e,#c9253c);
  color:#fff; font-size:10px; font-weight:900; padding:5px 10px;
  border-radius:999px; letter-spacing:.45px; text-transform:uppercase;
  white-space:nowrap; overflow:visible; text-overflow:clip;
  box-shadow:0 8px 18px rgba(201,37,60,.28);
}
.product-card.is-sold .product-thumb{ /* stays fully visible — no dimming */ }
.product-card.is-sold .product-body{ /* stays fully visible — no dimming */ }
.out-of-stock-line{ font-size:12px; color:#F04444; font-weight:800; margin-bottom:8px; }
.product-body{ padding: 18px; flex:1; display:flex; flex-direction:column; }
.product-cat{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color: var(--blue); font-weight:700; margin-bottom:6px; }
.product-body h4{ font-size:16px; font-weight:700; margin-bottom:8px; }
.product-body p{ font-size:13px; color: var(--text-dim); margin-bottom:16px; flex:1; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; }
.product-foot .price{ font-weight:800; color: var(--orange); }
.mini-btn{
  width:38px; height:38px; border-radius:50%; background: var(--grad-btn-2); display:flex; align-items:center;
  justify-content:center; color:#fff; border:none; cursor:pointer; transition:.25s;
}
.mini-btn:hover{ transform: scale(1.1) rotate(8deg); }
.mini-btn.mini-cart{ background: var(--grad-btn); }
.mini-btn.mini-order{ background: linear-gradient(135deg, #25D366, #128C7E); }
.mini-btn.mini-order{ background: linear-gradient(135deg, #25D366, #128C7E); }
.mini-btn svg{ width:17px; height:17px; }

/* ===== Why Choose Us ===== */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.why-card{ text-align:center; padding: 30px 18px; }
.why-card .num{
  width:64px; height:64px; margin: 0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; background: var(--card); border:2px solid var(--border); color: var(--blue);
}
.why-card h4{ font-weight:700; margin-bottom:8px; font-size:16px; }
.why-card p{ color:var(--text-dim); font-size:13px; }

/* ===== About ===== */
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:60px; align-items:center; }
.about-visual{ position:relative; }
.about-visual .frame{
  border-radius: var(--radius); border:1px solid var(--border); background: linear-gradient(160deg, var(--card), var(--card-2));
  padding: 30px; text-align:center; box-shadow: var(--shadow);
}
.about-visual .frame svg{ width:100%; max-width:320px; height:auto; }
.about-content h2{ font-size: clamp(26px,3.6vw,38px); font-weight:800; margin-bottom:18px; }
.about-content p{ color: var(--text-dim); margin-bottom:20px; }
.about-list{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom: 26px; }
.about-list li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.about-list li .tick{
  width:22px; height:22px; border-radius:50%; background: var(--grad-btn-2); display:flex; align-items:center;
  justify-content:center; font-size:12px; flex-shrink:0;
}

/* ===== Testimonials ===== */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.testi-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.testi-stars{ color: var(--blue); margin-bottom:14px; letter-spacing:2px; }
.testi-card p{ color: var(--text-dim); font-size:14px; margin-bottom:20px; }
.testi-user{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:42px; height:42px; border-radius:50%; background: var(--blue); display:flex; align-items:center;
  justify-content:center; font-weight:800; color:#0B0F19;
}
.testi-user h5{ font-size:14px; font-weight:700; }
.testi-user span{ font-size:12px; color: var(--text-dim); }

/* ===== CTA strip ===== */
.cta-strip{
  background: linear-gradient(120deg, rgba(6,182,255,.12), rgba(2,132,199,.14));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 50px; text-align:center; margin: 0 20px;
}
.cta-strip h2{ font-size: clamp(24px,3.4vw,34px); font-weight:800; margin-bottom:14px; }
.cta-strip p{ color: var(--text-dim); margin-bottom:26px; }
.cta-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ===== Contact — premium glassmorphism cards ===== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
.contact-card{
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--card);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom:18px;
  display:flex; gap:18px; align-items:flex-start; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.contact-card::before{
  content:''; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background: linear-gradient(135deg, rgba(6,182,255,0), rgba(6,182,255,.35), rgba(6,182,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .3s ease; pointer-events:none;
}
.contact-card:hover{ border-color: transparent; transform: translateY(-4px); box-shadow: 0 20px 45px rgba(6,182,255,.16), var(--shadow); }
.contact-card:hover::before{ opacity:1; }
.contact-card .ic{
  width:56px; height:56px; border-radius:18px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:#fff; position:relative; overflow:hidden;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.contact-card:hover .ic{ transform: scale(1.1) rotate(-6deg); }
.contact-card .ic::after{
  content:''; position:absolute; top:-30%; inset-inline-start:-20%; width:70%; height:70%;
  background: rgba(255,255,255,.30); border-radius:50%; filter: blur(6px); transform: rotate(-20deg);
}
.contact-card .ic::before{
  content:''; position:absolute; inset:-2px; border-radius:20px; opacity:0; transition: opacity .35s ease;
  background: inherit; filter: blur(10px); z-index:-1;
}
.contact-card:hover .ic::before{ opacity:.7; }
.contact-card .ic svg{ width:24px; height:24px; position:relative; z-index:1; }
.contact-card .ic.ic-address{ background: linear-gradient(145deg, var(--blue), #0876B0); box-shadow: 0 10px 24px rgba(6,182,255,.4); }
.contact-card .ic.ic-phone1{ background: linear-gradient(145deg, var(--blue), var(--deepblue)); box-shadow: 0 10px 24px rgba(6,182,255,.35); }
.contact-card .ic.ic-phone2{ background: linear-gradient(145deg, var(--blue), var(--deepblue)); box-shadow: 0 10px 24px rgba(6,182,255,.35); }
.contact-card .ic.ic-hours{ background: linear-gradient(145deg, var(--blue), var(--deepblue)); box-shadow: 0 10px 24px rgba(6,182,255,.35); }
.contact-card h4{ font-weight:700; margin-bottom:6px; }
.contact-card p{ color: var(--text-dim); font-size:14px; }
.contact-card a{ color: var(--blue); font-weight:600; transition: color .2s ease; }
.contact-card a:hover{ color: var(--blue); }

.map-frame{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); height:220px; margin-bottom:20px;
  position:relative; box-shadow: var(--shadow); transition: box-shadow .3s ease;
}
.map-frame:hover{ box-shadow: 0 20px 45px rgba(6,182,255,.14), var(--shadow); }
.map-frame iframe{ width:100%; height:100%; border:0; }

form.contact-form{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 30px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; direction:ltr; }
.form-row .form-group{ direction: inherit; }
body.lang-ur .form-row label, body.lang-ur .form-row select, body.lang-ur .form-row textarea,
body.lang-ur .form-row input:not([type="tel"]):not([type="number"]){
  text-align:right; direction:rtl;
}
body.lang-ur .form-row input[type="tel"], body.lang-ur .form-row input[type="number"]{ text-align:left; direction:ltr; }
.form-group{ display:flex; flex-direction:column; gap:8px; width:100%; min-width:0; }
.form-group label{ font-size:13px; font-weight:600; color: var(--text-dim); }
.form-group input, .form-group textarea, .form-group select{
  width:100%; max-width:100%; box-sizing:border-box; min-width:0;
  background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-family: inherit; font-size:14px; outline:none; transition:.25s;
}
.form-group textarea{ resize:vertical; max-height:300px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ border-color: var(--blue); }
.form-note{ font-size:12px; color:var(--text-dim); margin-top:10px; text-align:center; }
#formStatus{ margin-top:12px; font-size:13px; text-align:center; }

/* ===== Footer ===== */
footer{ background: var(--bg-alt); border-top:1px solid var(--border); padding: 60px 0 20px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:40px; }
.footer-col{ min-width:0; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.footer-brand span{ overflow-wrap:break-word; min-width:0; }
.footer-brand img{ height:34px; width:auto; }
.footer-brand span{ font-weight:800; font-size:18px; }
.footer-col p{ color: var(--text-dim); font-size:14px; margin-bottom:16px; }
.footer-col h5{ font-weight:700; margin-bottom:16px; font-size:15px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{ color: var(--text-dim); font-size:14px; transition:.2s; }
.footer-col ul li a:hover{ color: var(--blue); }
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; background: var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition:.25s; color: var(--text-dim);
}
.social-row a svg{ width:18px; height:18px; }
.social-row a:hover{ background: var(--blue); color:#04101C; }

/* ===== Footer Payment Accounts (admin-controlled: left / right placement) ===== */
.footer-payment-row{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:26px 0; margin-bottom:6px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.footer-payment-col{ display:flex; flex-direction:column; gap:10px; }
.footer-payment-card{
  display:flex; align-items:flex-start; gap:10px; background: var(--card); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; font-size:13px;
}
.footer-payment-card .fp-ic{ font-size:18px; flex-shrink:0; }
.footer-payment-card b{ display:block; font-size:13px; color: var(--text); }
.footer-payment-card span{ color: var(--text-dim); font-size:12px; }
.copyable-number{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; border-bottom:1px dashed var(--border);
  transition:.2s;
}
.copyable-number:hover{ color: var(--blue); border-color: var(--blue); }
.copyable-number .copy-ic{ font-size:11px; opacity:.7; }
.copied-flash{ color: #1FA34A !important; border-color: #1FA34A !important; font-weight:700; }
@media (max-width: 640px){
  .footer-payment-row{ grid-template-columns:1fr; gap:14px; padding:20px 0; }
}

.footer-bottom{
  border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:13px; color: var(--text-dim);
}

/* ===== Designer Credit Strip ===== */
.designer-credit{
  background: linear-gradient(90deg, rgba(6,182,255,.08), rgba(2,132,199,.10));
  border-top: 1px solid var(--border);
  padding: 22px 0;
  text-align:center;
}
.designer-credit .dc-inner{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  font-size:14px; font-weight:600; color: var(--text-dim);
}
.designer-credit .dc-label{
  background: linear-gradient(90deg, var(--blue), var(--deepblue));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:700;
}
.designer-credit .dc-by{font-weight:700;color:var(--text-dim);}
.designer-credit .dc-name{
  background: var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  font-weight:800; font-size:15px;
}
.designer-credit a.dc-wa{
  display:inline-flex; align-items:center; gap:6px; background: var(--card); border:1px solid var(--border);
  padding:7px 16px; border-radius:999px; font-size:14px; font-weight:800; transition:.2s;
}
.designer-credit a.dc-wa:hover{ border-color:#25D366; transform: translateY(-2px); }
.designer-credit a.dc-wa svg{ width:15px; height:15px; }

/* ===== Floating WhatsApp ===== */
.wa-float{
  position: fixed; bottom: 26px; z-index: 998;
  inset-inline-end: 26px;
  width:60px; height:60px; border-radius:50%; background: linear-gradient(135deg,#25D366,#128C7E);
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow: 0 10px 30px rgba(37,211,102,.5); animation: pulse 2.2s infinite;
}
.wa-float svg{ width:30px; height:30px; }
.chip-ic svg{ width:16px; height:16px; vertical-align:-3px; }
@keyframes pulse{ 0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.55);} 70%{ box-shadow: 0 0 0 18px rgba(37,211,102,0);} 100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0);} }

/* ===== back to top / back to bottom ===== */
.back-top, .back-bottom{
  position: fixed; inset-inline-start: 26px; z-index: 998; width:46px; height:46px; border-radius:50%;
  background: var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none; transition:.3s; color: var(--text); font-size:18px; box-shadow: var(--shadow);
}
.back-top{ bottom: 26px; }
.back-bottom{ bottom: 82px; }
.back-top.show, .back-bottom.show{ opacity:1; pointer-events:auto; }
.back-top:hover, .back-bottom:hover{ background: var(--blue); color:#fff; border-color:transparent; transform: translateY(-2px); }

/* Defensive fix: grid items default to min-width:auto which can let long text/gradient
   headings overflow into neighboring columns/rows. Force min-width:0 everywhere. */
.services-grid > *, .products-grid > *, .why-grid > *, .testi-grid > *,
.footer-grid > *, .about-grid > *, .contact-grid > *, .hero-grid > *{
  min-width: 0;
}

/* ===== reveal animation ===== */
.reveal{ opacity:0; transform: translateY(30px); transition: all .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* =========================================================
   ===== RESPONSIVE — full device range, big screens to small =====
   Order matters: wider breakpoints first, narrower ones last,
   so narrower rules correctly override wider ones on cascade.
   ========================================================= */
.nav-mobile-quote{ display:none; }

/* ---- Very large / big desktop monitors (1600px+) ---- */
@media (min-width: 1600px){
  .container{ max-width: 1360px; }
}

/* ---- Big laptops / small desktops: hamburger nav kicks in ---- */
@media (max-width: 1320px){
  nav.nav-links{
    position:absolute; inset-inline-start:0; top:100%; width:100%; max-height:85vh;
    background: var(--bg); flex-direction:column; padding: 30px; gap:22px;
    overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--border);
    transform: translateY(-120%); transition:.35s; opacity:0; z-index: 500;
  }
  nav.nav-links.open{ transform: translateY(0); opacity:1; }
  .menu-toggle{ display:flex; }
  .nav-desktop-quote{ display:none; }
  .nav-mobile-quote{ display:inline-flex; margin-top:14px; justify-content:center; }
  .menu-toggle{
    width:40px; height:40px; border-radius:50%; background:var(--card); border:1px solid var(--border);
    align-items:center; justify-content:center; gap:4px; flex-shrink:0;
  }
  .menu-toggle span{ width:18px; height:2px; }
}

/* ---- Tablet landscape / small laptops (iPad Pro, Surface ~1024-1199px) ---- */
@media (max-width: 1024px){
  .container{ padding: 0 18px; }
  section{ padding: 76px 0; }
  .hero-grid{ gap:36px; }
  .services-grid, .why-grid, .products-grid{ grid-template-columns: repeat(3,1fr); }
  .brand{ max-width: 60%; }
  .brand-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---- Tablet portrait (iPad 768-991px) ---- */
@media (max-width: 991px){
  .hero-grid, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .services-grid, .why-grid{ grid-template-columns: repeat(2,1fr); }
  .products-grid{ grid-template-columns: repeat(2,1fr); }
  .testi-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:34px; }
  .form-row{ grid-template-columns:1fr; }
  .about-visual{ max-width:340px; margin:0 auto; }
}

/* ---- Small tablets / large phones landscape (~768px) ---- */
@media (max-width: 800px){
  section{ padding: 64px 0; }
  .navbar{ padding-block: 12px; }
  .hero{ padding: 46px 0 30px; }
  .contact-grid{ gap:26px; }
}

/* ---- Phones, large (600-767px) ---- */
@media (max-width: 640px){
  .services-grid, .why-grid, .products-grid, .testi-grid{ grid-template-columns: 1fr 1fr; }
  section{ padding: 54px 0; }
  .section-head{ margin-bottom:34px; }
  .cta-strip{ padding: 34px 20px; margin:0; }
  .hero-card{ padding:22px; }
  .float-chip{ font-size:11px; padding:8px 10px; }
  .chip-1{ top:-14px; inset-inline-end:-8px; }
  .chip-2{ bottom:-14px; inset-inline-start:-8px; }
  .banner-heading{ font-size: clamp(24px, 7.5vw, 34px); letter-spacing:0; }
  .topbar-info{ font-size:12px; gap:12px; }
  .hero-stats{ gap:20px; }
  .footer-grid{ grid-template-columns: 1fr; gap:30px; }
  .hero-actions{ padding-bottom: 74px; flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .banner-tag{ font-size:13px; }
  .navbar{ gap:8px; }
  .brand{ gap:8px; }
  .brand-name{ font-size:17px; }
  .brand-tagline{ display:none; }
}

/* ---- Phones, medium (481-575px) — topbar stacks cleanly ---- */
@media (max-width: 575px){
  .topbar-info{ flex-direction:column; align-items:flex-start; gap:6px; }
  .topbar-phones{ gap:4px; }
  .topbar-row-1, .topbar-row-2{ padding-left:14px; padding-right:14px; }
  .topbar-right{ flex-wrap:wrap; justify-content:flex-end; width:100%; }
  .live-clock{ font-size:11px; padding:4px 9px; }
  .lang-switch{ padding:2px; }
  .container{ padding: 0 16px; }
  .about-list{ grid-template-columns: 1fr; }
  .rating-summary{ padding: 20px; gap:20px; }
  .contact-card{ padding:20px; gap:14px; }
  .tracker-box{ padding:22px 18px; }
}

@media (max-width: 480px){
  .banner-heading{ font-size: clamp(19px, 6.8vw, 26px); }
  .banner-grid{ padding: 24px 16px; }
  .banner-tag{ font-size:12.5px; }
  .wa-float{ width:50px; height:50px; bottom:18px; inset-inline-end:16px; }
  .wa-float svg{ width:24px; height:24px; }
  .back-top{ width:40px; height:40px; bottom:18px; inset-inline-start:16px; }
  .back-bottom{ width:40px; height:40px; bottom:66px; inset-inline-start:16px; }
  .nav-actions{ gap:6px; }
  .icon-action{ width:34px; height:34px; }
  .icon-action svg{ width:15px; height:15px; }
  .brand img{ height:30px; }
  .brand-name{ font-size:15px; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.15; }
}

/* Extra-safe fallback: if the brand name is still too tight for the row,
   let it wrap onto its own line under the logo rather than ellipsis-hiding text */
@media (max-width: 400px){
  .navbar{ flex-wrap:wrap; }
  .brand{ flex-basis:100%; overflow:visible; }
  .nav-actions{ flex-basis:100%; justify-content:flex-end; margin-top:6px; }
  .brand-name{ white-space:normal; overflow:visible; word-break:break-word; }
}

/* ---- Phones, small (≤420px) — iPhone SE, small Androids ---- */
@media (max-width: 420px){
  .services-grid, .why-grid, .products-grid, .testi-grid, .about-list{ grid-template-columns: 1fr; }
  .hero-content h1{ font-size:26px; }
  .brand-name small{ letter-spacing:1px; font-size:10px; }
  .cta-actions{ flex-direction:column; align-items:stretch; }
  .cta-actions .btn{ justify-content:center; }
  .filter-tabs button{ font-size:12px; padding:7px 14px; }
  .cat-menu-home, .cat-menu-btn{ padding:9px 10px; font-size:12.5px; }
  .tracker-box .form-group{ flex-direction:column; }
  .btn{ padding:12px 22px; font-size:14px; }
  .section-tag{ font-size:12px; padding:5px 13px; }
  .rating-summary{ flex-direction:column; text-align:center; }
  .rating-cta{ align-items:center; }
}

/* Safety net: on phones, never let a button's text get silently clipped —
   wrap it onto a second line instead of relying on nowrap + overflow-x:hidden */
@media (max-width: 640px){
  .cta-actions{ flex-direction:column; align-items:stretch; }
  .cta-actions .btn, .hero-actions .btn{
    white-space:normal; text-align:center; line-height:1.35; justify-content:center;
  }
}

/* ---- Phones, extra small (≤360px) — Galaxy Fold outer, small budget phones ---- */
@media (max-width: 360px){
  .container{ padding: 0 14px; }
  .hero-content h1{ font-size:23px; }
  .hero-content p{ font-size:14.5px; }
  .hero-stats{ gap:14px; }
  .hero-stats div h3{ font-size:22px; }
  .badge{ font-size:11px; padding:6px 12px; }
  .banner-visual img{ max-width:220px; }
  .btn{ padding:11px 18px; font-size:13.5px; gap:6px; }
  .cta-strip{ padding:26px 14px; }
  .cta-strip h2{ font-size:20px; }
  .footer-brand img{ height:28px; }
  .footer-brand span{ font-size:16px; }
  .section-head p{ font-size:14px; }
  form.contact-form{ padding:18px; }
  .contact-card{ padding:16px; gap:12px; }
  .contact-card .ic{ width:44px; height:44px; }
  .map-frame{ height:180px; }
  .adv-filter-bar{ padding:12px 14px; gap:12px; }
}

/* ---- Landscape phones (short viewport height) ---- */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ padding: 26px 0 20px; }
  section{ padding: 40px 0; }
  nav.nav-links{ padding: 16px; gap:14px; overflow-y:auto; }
  .banner-visual img{ height: clamp(140px, 24vw, 220px); }
}

/* Accessibility: visible focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================
   NEW FEATURES: topbar social, theme toggle, search, cart,
   ticket tracker, discount badges, 3D tilt, dot carousel
   ========================================================= */

.social-mini{ display:flex; gap:10px; }
.social-mini a{
  width:32px; height:32px; border-radius:50%; background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:.25s;
}
.social-mini a:hover{ transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.social-mini a svg{ width:15px; height:15px; }
.social-mini a:hover{ transform: translateY(-2px) scale(1.08); }
.social-mini a:hover{ color:#fff; background:var(--grad-btn); border-color:transparent; }

.theme-toggle{
  width:30px; height:30px; border-radius:50%; background:var(--card); border:1px solid var(--border);
  color:var(--blue); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle svg{ width:15px; height:15px; }

.icon-action{
  position:relative; width:40px; height:40px; border-radius:50%; background:var(--card); border:1px solid var(--border);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.icon-action:hover{ color:var(--blue); border-color:var(--blue); }
.icon-action svg{ width:18px; height:18px; }
.cart-count{
  position:absolute; top:-4px; inset-inline-end:-4px; background:var(--grad-btn); color:#fff; font-size:10px;
  font-weight:800; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}

.search-bar{
  max-height:0; overflow:hidden; transition:.3s ease; background:var(--bg-alt); border-bottom:1px solid var(--border);
}
.search-bar.open{ max-height:400px; }
.search-bar-inner{ display:flex; align-items:center; gap:12px; padding:16px 0; direction:ltr; }
body.lang-ur .search-bar-inner input{ direction:rtl; text-align:right; }
.search-bar-inner svg{ width:20px; height:20px; color:var(--text-dim); flex-shrink:0; }
.search-bar-inner input{
  flex:1 1 auto; min-width:0; width:100%; background:none; border:none; outline:none; color:var(--text); font-size:16px; font-family:inherit;
}
.search-bar-inner button{ background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; }
.search-results{ max-width:1220px; margin:0 auto; padding: 0 20px 16px; display:grid; gap:8px; }
.search-result-item{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; background:var(--card);
  border:1px solid var(--border); cursor:pointer;
}
.search-result-item:hover{ border-color:var(--blue); }
.search-result-item svg{ width:20px; height:20px; color:var(--blue); }
.search-empty{ color:var(--text-dim); font-size:13px; padding:10px 14px; }

/* ---------- Cart Drawer ---------- */
.cart-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1400; opacity:0; pointer-events:none; transition:.25s;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; inset-inline-end:0; width:100%; max-width:400px; height:100vh; background:var(--card-2);
  border-inline-start:1px solid var(--border); z-index:1401; display:flex; flex-direction:column;
  transform: translateX(105%); transition:.3s ease;
}
body.lang-ur .cart-drawer{ transform: translateX(-105%); }
.cart-drawer.open{ transform: translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--border); }
.cart-head h3{ font-size:17px; font-weight:800; }
.cart-close{ background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; }
.cart-items{ flex:1; overflow-y:auto; padding:16px 20px; }
.cart-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); align-items:center; }
.cart-item-thumb{ width:48px; height:48px; border-radius:10px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0; }
.cart-item-thumb svg{ width:24px; height:24px; }
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h5{ font-size:13.5px; font-weight:700; margin-bottom:4px; }
.cart-item-info .price{ color:var(--orange); font-weight:700; font-size:13px; }
.qty-control{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.qty-control button{ width:22px; height:22px; border-radius:6px; border:1px solid var(--border); background:var(--bg-alt); color:var(--text); cursor:pointer; }
.cart-item-remove{ background:none; border:none; color:var(--text-dim); cursor:pointer; }
.cart-item-remove svg{ width:15px; height:15px; }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--text-dim); }
.cart-foot{ padding:20px; border-top:1px solid var(--border); }
.cart-total-row{ display:flex; justify-content:space-between; margin-bottom:14px; font-weight:700; }
.cart-total-row span:last-child{ color:var(--orange); }

/* ---------- Checkout Modal ---------- */
.checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:10000;opacity:0;pointer-events:none;transition:.2s;backdrop-filter:blur(2px);}
.checkout-overlay.open{opacity:1;pointer-events:auto;}
.checkout-modal{position:fixed;top:50%;left:50%;inset-inline-start:auto;transform:translate(-50%,-50%) scale(.985);width:min(560px,calc(100vw - 24px));height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);background:var(--card-2);border:1px solid var(--border);border-radius:18px;z-index:10001;opacity:0;pointer-events:none;transition:.2s ease;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55);isolation:isolate;}
.checkout-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.checkout-modal-head{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;min-height:64px;border-bottom:1px solid var(--border);background:var(--card-2);z-index:3;}
.checkout-modal-head h3{font-size:17px;font-weight:800;margin:0;}
.checkout-modal-body{flex:1 1 auto;min-height:0;padding:20px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.checkout-modal-body .form-group{ margin-bottom:14px; }
.checkout-modal-body label{ font-size:12.5px; font-weight:700; color:var(--text-dim); }
.checkout-modal-body input, .checkout-modal-body textarea{
  width:100%; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 13px; color:var(--text); font-size:14px; outline:none; font-family:inherit; margin-top:6px;
}
.checkout-modal-body input:focus, .checkout-modal-body textarea:focus{ border-color:var(--blue); }
.payment-method-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.payment-method-card{
  display:flex; align-items:center; gap:9px; padding:12px; border-radius:12px; border:1.5px solid var(--border);
  background:var(--bg-alt); cursor:pointer; font-size:13px; font-weight:700; transition:.2s;
}
.payment-method-card:hover{ border-color:var(--blue); }
.payment-method-card.selected{ border-color:var(--blue); background: rgba(6,182,255,.1); }
.payment-method-card input{ width:auto; margin:0; }
.payment-method-detail-box{
  margin-top:12px; padding:14px; border-radius:12px; background: rgba(6,182,255,.08); border:1px dashed var(--blue);
  font-size:13px; line-height:1.7;
}
.payment-method-detail-box b{ color: var(--blue); }
.checkout-success{ text-align:center; padding:20px 10px; }
.checkout-success .big-check{ font-size:52px; margin-bottom:10px; }
.checkout-success h4{ font-size:19px; font-weight:800; margin-bottom:6px; }
.checkout-success .order-id-pill{
  display:inline-block; margin:12px 0; padding:9px 20px; border-radius:999px; background: var(--grad-btn);
  color:#fff; font-weight:800; letter-spacing:.5px; font-size:15px;
}
@media (max-width: 600px){
  .checkout-modal{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:none;border-radius:14px;}
  .checkout-modal-head{min-height:58px;padding:13px 15px;}
  .checkout-modal-body{padding:15px;}
  .payment-method-list{grid-template-columns:1fr;}
}
html[dir="rtl"] .checkout-modal-head{direction:rtl;}
html[dir="rtl"] .checkout-modal-body{text-align:right;direction:rtl;}
html.checkout-open, body.checkout-open{overflow:hidden!important;overscroll-behavior:none;}

/* ---------- Discount badge ---------- */
.discount-badge{
  position:absolute; top:10px; inset-inline-start:10px; color:#fff; font-size:11px;
  font-weight:800; padding:4px 9px; border-radius:999px; z-index:2;
}
.sold-badge-inline{
  display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap;
  background:linear-gradient(135deg,#ff5b6e,#c9253c); color:#fff; font-size:10px; font-weight:900;
  padding:3px 9px; border-radius:999px; letter-spacing:.4px; text-transform:uppercase;
  box-shadow:0 4px 10px rgba(201,37,60,.25);
}
.product-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; direction:ltr; }
body.lang-ur .product-title-row{ direction:rtl; }
.product-cat-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; direction:ltr; margin-bottom:4px; }
body.lang-ur .product-cat-row{ direction:rtl; }
.discount-c0, .discount-c1, .discount-c2, .discount-c3{ background: linear-gradient(135deg, var(--blue), var(--deepblue)); }
.old-price{ text-decoration:line-through; color:var(--text-dim); font-size:12px; margin-inline-end:6px; }
.card-wishlist-btn{
  position:absolute; top:10px; inset-inline-end:10px; z-index:3; width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,.92); border:none; cursor:pointer; font-size:16px; line-height:1; color:#8a8f9c;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition: transform .15s ease, color .15s ease;
}
.card-wishlist-btn:hover{ transform: scale(1.12); }
.card-wishlist-btn.active{ color:#E23744; }

/* ---------- 3D tilt ---------- */
.tilt-card{ transition: transform .15s ease; transform-style: preserve-3d; }

/* ---------- Ticket Tracker — full Repair Tracking System ---------- */
.tracker-box{
  max-width:640px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px; text-align:center;
}
.tracker-mode-tabs{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.tracker-mode-btn{
  background:var(--bg-alt); border:1px solid var(--border); color:var(--text-dim); font-weight:700; font-size:12.5px;
  padding:9px 16px; border-radius:999px; cursor:pointer; transition:.2s;
}
.tracker-mode-btn.active{ background: var(--grad-btn); color:#fff; border-color:transparent; }
.tracker-box .form-group{ display:flex; gap:10px; margin-top:16px; text-align:start; }
.tracker-box input{
  flex:1; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px;
  color:var(--text); font-size:14px; outline:none;
}
#trackResult{ margin-top:20px; text-align:start; }
.track-status{
  display:inline-block; padding:6px 16px; border-radius:999px; font-weight:700; font-size:13px; margin-bottom:14px;
  text-transform:capitalize;
}
.status-received{ background:rgba(6,182,255,.12); color:var(--blue); }
.status-in-progress{ background:rgba(79,168,255,.15); color:#4FA8FF; }
.status-ready{ background:rgba(2,132,199,.15); color:var(--deepblue); }
.status-delivered{ background:rgba(6,182,255,.22); color:var(--blue); font-weight:800; }

/* Progress bar + step timeline */
.track-progress-bar{ height:6px; border-radius:4px; background:var(--bg-alt); overflow:hidden; margin-bottom:14px; }
.track-progress-fill{ height:100%; background: var(--grad-btn); border-radius:4px; transition: width .4s ease; }
.track-steps{ display:flex; justify-content:space-between; margin-bottom:20px; gap:4px; }
.track-step{ flex:1; text-align:center; position:relative; }
.track-step-dot{
  width:14px; height:14px; border-radius:50%; background:var(--bg-alt); border:2px solid var(--border);
  margin:0 auto 6px; transition:.3s;
}
.track-step.done .track-step-dot{ background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(6,182,255,.18); }
.track-step-label{ font-size:11px; color:var(--text-dim); display:flex; flex-direction:column; gap:2px; }
.track-step.done .track-step-label{ color:var(--text); font-weight:600; }
.track-step-label span{ font-size:9.5px; color:var(--text-dim); font-weight:400; }

/* Rich detail grid */
.track-details-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:2px 20px; background:var(--bg-alt); border-radius:12px;
  padding:16px; margin-bottom:16px;
}
.track-detail-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.track-detail-row span{ color:var(--text-dim); }
.track-detail-row b{ color:var(--text); text-align:end; }
@media (max-width: 560px){ .track-details-grid{ grid-template-columns: 1fr; } }

.track-receipt-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Track-by-phone results list */
.track-phone-list{ display:flex; flex-direction:column; gap:8px; }
.track-phone-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:start;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:12px 14px; cursor:pointer; transition:.2s;
}
.track-phone-item:hover{ border-color:var(--blue); }
.track-phone-item span{ color:var(--text-dim); font-size:12px; }

/* ---------- Dot carousel (featured products, left side) ---------- */
/* ---------- Featured Products — hover-preview showcase (premium) ---------- */
.feat-showcase{ display:grid; grid-template-columns: 300px 1fr; gap:28px; align-items:start; }
.feat-list{
  display:flex; flex-direction:column; gap:4px; max-height:560px; overflow-y:auto; padding-inline-end:6px;
}
.feat-list::-webkit-scrollbar{ width:6px; }
.feat-list::-webkit-scrollbar-thumb{ background: var(--border); border-radius:99px; }
.feat-list-item{
  display:flex; justify-content:flex-start; align-items:center; gap:12px; width:100%; text-align:start;
  background:transparent; border:none; border-inline-start:3px solid transparent; border-radius:10px;
  padding:13px 14px; cursor:pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.feat-list-item:hover{ background: var(--bg-alt); transform: translateX(2px); }
.feat-list-item.active{
  border-inline-start-color: var(--blue); background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--border);
}
.feat-list-item.active .feat-list-name{ color: var(--blue); }
.feat-list-index{ font-size:11px; font-weight:700; color: var(--text-dim); letter-spacing:.5px; flex-shrink:0; width:20px; }
.feat-list-item.active .feat-list-index{ color: var(--blue); }
.feat-list-name{ font-size:13.5px; font-weight:600; color:var(--text); transition: color .18s ease; flex:1; }
.feat-list-price{ font-size:12.5px; font-weight:800; color:var(--orange); white-space:nowrap; }
.feat-fade-in{ animation: featFadeIn .3s ease; }
@keyframes featFadeIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }
.feat-preview{
  background: var(--card);
  border:1px solid var(--border); border-radius:20px; padding:32px;
  display:grid; grid-template-columns:240px 1fr; gap:30px; min-height:300px;
  box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.feat-preview-img{
  position:relative; border-radius:16px; display:flex; align-items:center; justify-content:center;
  padding:20px; aspect-ratio:1/1;
  background: radial-gradient(circle at 50% 40%, rgba(6,182,255,.14), transparent 70%), var(--bg-alt);
}
.feat-preview-img img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.18)); }
.feat-preview-body{ display:flex; flex-direction:column; }
.feat-preview-cat{
  align-self:flex-start; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color: var(--blue); background: rgba(6,182,255,.1); padding:4px 11px; border-radius:999px; margin-bottom:10px;
}
.feat-preview-body h3{ font-size:20px; font-weight:800; margin-bottom:12px; line-height:1.3; }
.feat-highlights{ list-style:none; padding:0; margin:0 0 16px; }
.feat-highlights li{ font-size:13.5px; color:var(--text-dim); padding:5px 0 5px 20px; position:relative; }
.feat-highlights li::before{ content:'✓'; position:absolute; left:0; color: var(--blue); font-weight:800; }
.feat-desc{ color:var(--text-dim); font-size:13.5px; margin-bottom:16px; }
.feat-preview-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.feat-price{ font-size:22px; font-weight:800; color:var(--text); }
.feat-mrp{ text-decoration:line-through; color:var(--text-dim); font-size:14px; }
.feat-stock{ font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; }
.feat-stock.in{ background:rgba(34,197,94,.12); color:#22C55E; }
.feat-stock.out{ background:rgba(239,68,68,.12); color:#F87171; }
.feat-warranty{ font-size:12.5px; color:var(--text-dim); margin-bottom:18px; }
.feat-preview-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:auto; }
@media (max-width: 1024px){
  .feat-showcase{ grid-template-columns:1fr; }
  .feat-list{ max-height:320px; }
  .feat-preview{ grid-template-columns:1fr; padding:22px; }
  .feat-preview-img{ max-width:220px; margin:0 auto; }
}

@media (max-width: 700px){
  .topbar-right{ gap:6px; }
  .social-mini a{ width:24px; height:24px; }
  .social-mini a svg{ width:11px; height:11px; }
  .topbar-center{ margin: 0 auto; }
  .cart-drawer{ max-width:100%; }
}

.stock-line{ font-size:11px; color: var(--green); font-weight:700; margin-bottom:8px; }

/* ===== Multi-color phone numbers & authentic social brand colors ===== */
.ph-blue, a.ph-blue, span.ph-blue{ color: var(--blue) !important; font-weight:800; }
.ph-orange, a.ph-orange, span.ph-orange{ color: var(--orange) !important; font-weight:800; }
a.ph-blue:hover, a.ph-orange:hover{ text-decoration: underline; }
.tb-phone-link{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:4px 2px; }
.topbar-phones{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; row-gap:6px; }
.tb-ic{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; background: var(--card); border:1.5px solid var(--border); flex-shrink:0;
}
.tb-ic svg{ width:14px; height:14px; vertical-align:0; color:#EF4444; }
.tb-wa{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; background: rgba(37,211,102,.32); border:1.5px solid #25D366; color:#25D366;
  box-shadow: 0 0 8px rgba(37,211,102,.35);
}
.tb-wa svg{ width:14px; height:14px; }
.tb-sep{ color: var(--border); margin: 0 2px; }
/* Bigger, easier-to-tap call/WhatsApp icons on touch screens (44px min recommended tap size) */
@media (hover: none) and (pointer: coarse){
  .tb-ic, .tb-wa{ width:32px; height:32px; }
  .tb-ic svg, .tb-wa svg{ width:17px; height:17px; }
  .tb-phone-link{ padding:8px 2px; }
}

.social-mini a[data-label="WhatsApp"]{ color:#25D366; }
.social-mini a[data-label="Facebook"]{ color:#1877F2; }
.social-mini a[data-label="Instagram"]{ color:#E1306C; }
.social-mini a[data-label="WhatsApp"]:hover{ background:#25D366; color:#fff; }
.social-mini a[data-label="Facebook"]:hover{ background:#1877F2; color:#fff; }
.social-mini a[data-label="Instagram"]:hover{ background: linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); color:#fff; }

.social-row a[data-label="WhatsApp"], .social-row a:has(svg[data-brand="whatsapp"]){ color:#25D366; }
.footer-col .social-row a:nth-child(3){ color:#25D366; }
.footer-col .social-row a:nth-child(1){ color:#1877F2; }
.footer-col .social-row a:nth-child(2){ color:#E1306C; }
.footer-col .social-row a:nth-child(1):hover{ background:#1877F2; color:#fff; }
.footer-col .social-row a:nth-child(2):hover{ background: linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); color:#fff; }
.footer-col .social-row a:nth-child(3):hover{ background:#25D366; color:#fff; }

/* ===== Multi-color "Computer 2 Day" brand wordmark, used everywhere ===== */
.brand-multicolor{
  background: var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  font-weight:800;
}

/* ===== Reviews rating summary ===== */
.rating-summary{
  display:flex; align-items:center; gap:40px; background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding: 26px 32px; margin-bottom:40px; flex-wrap:wrap;
}
.rating-score{ text-align:center; flex-shrink:0; }
.rating-score strong{ font-size:42px; font-weight:900; color: var(--blue); display:block; line-height:1; }
.rating-score .testi-stars{ margin:8px 0 4px; }
.rating-score span{ font-size:12px; color: var(--text-dim); }
.rating-bars{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:6px; }
.rating-bar-row{ display:flex; align-items:center; gap:10px; font-size:12px; color: var(--text-dim); }
.rating-bar-row .bar{ flex:1; height:7px; border-radius:999px; background: var(--bg-alt); overflow:hidden; }
.rating-bar-row .bar div{ height:100%; background: var(--grad-btn); border-radius:999px; }
.rating-cta{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-size:12px; color: var(--text-dim); flex-shrink:0; }
@media (max-width: 700px){
  .rating-summary{ flex-direction:column; text-align:center; }
  .rating-cta{ align-items:center; }
}

/* ===== Light theme extra polish: multi-color accents stay vivid ===== */
body[data-theme="light"] .service-card,
body[data-theme="light"] .product-card,
body[data-theme="light"] .contact-card,
body[data-theme="light"] .why-card{
  box-shadow: 0 4px 16px rgba(16,24,52,.06);
}
body[data-theme="light"] .btn-primary{ box-shadow: 0 8px 22px rgba(6,182,255,.22); }
body[data-theme="light"] .btn-primary:hover{ box-shadow: 0 14px 30px rgba(6,182,255,.32); }
body[data-theme="light"] .hero::before{
  background: radial-gradient(circle at 15% 20%, rgba(6,182,255,.10), transparent 45%),
              radial-gradient(circle at 85% 70%, rgba(2,132,199,.09), transparent 45%),
              radial-gradient(circle at 50% 100%, rgba(6,182,255,.06), transparent 45%);
}
body[data-theme="light"] .cta-strip{
  background: linear-gradient(120deg, rgba(6,182,255,.10), rgba(2,132,199,.12));
}

/* ===== Address links to Google Maps ===== */
.addr-link{ color: inherit; text-decoration: none; border-bottom: 1px dashed transparent; transition:.2s; }
.addr-link:hover{ color: var(--blue); border-bottom-color: var(--blue); }

/* ===== Live Karachi Clock ===== */
.live-clock{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color: var(--text-dim);
  background: var(--card); border:1px solid var(--border); padding:5px 12px; border-radius:999px;
}
.live-clock svg{ width:13px; height:13px; color: var(--blue); }
.live-clock span#liveClockTime{
  background: var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
@media (max-width: 700px){
  .live-clock{ font-size:10.5px; padding:4px 8px; gap:4px; }
  .live-clock svg{ width:11px; height:11px; }
}

/* ---------- Modern Featured Products Circular Auto Slider ---------- */
.featured-circle-section{ overflow:hidden; }
.circle-carousel{ position:relative; display:flex; align-items:center; gap:14px; }
.circle-carousel-viewport{ overflow:hidden; width:100%; padding:12px 4px 22px; direction:ltr; }
.circle-carousel-track{ display:flex; transition:transform .65s cubic-bezier(.22,.61,.36,1); will-change:transform; direction:ltr; }
.featured-circle-card{ flex:0 0 12.5%; min-width:0; border:0; background:transparent; padding:8px 10px; cursor:pointer; text-align:center; color:var(--text); }
.featured-circle-image{ width:min(150px, 100%); aspect-ratio:1; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg-alt); border:1px solid var(--border); box-shadow:0 10px 24px rgba(0,0,0,.08); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.featured-circle-image img{ width:82%; height:82%; object-fit:contain; transition:transform .35s ease; }
.featured-circle-card:hover .featured-circle-image{ transform:translateY(-8px) scale(1.04); border-color:var(--blue); box-shadow:0 18px 34px rgba(6,182,255,.2); }
.featured-circle-card:hover .featured-circle-image img{ transform:scale(1.08); }
.featured-circle-card strong{ display:block; font-size:14px; line-height:1.25; min-height:36px; }
.featured-circle-price{ display:block; color:var(--orange); font-size:13px; font-weight:800; margin-top:6px; }
.circle-carousel-btn{ width:42px; height:42px; flex:0 0 42px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:28px; line-height:1; cursor:pointer; transition:.2s; z-index:2; }
.circle-carousel-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:scale(1.06); }
.circle-carousel-controls{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:2px; }
.circle-control{ border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:8px 16px; cursor:pointer; }
.circle-speed-label{ color:var(--text-dim); font-size:12px; }
@media(max-width:1100px){ .featured-circle-card{ flex-basis:20%; } }
@media(max-width:760px){ .featured-circle-card{ flex-basis:33.3333%; } .circle-carousel{ gap:4px; } .circle-carousel-btn{ width:34px; height:34px; flex-basis:34px; font-size:22px; } }
@media(max-width:520px){ .featured-circle-card{ flex-basis:50%; } .featured-circle-image{ width:120px; } .featured-circle-card strong{ font-size:12px; } }


/* ===================== C2D INTERNATIONAL DESIGN SYSTEM ===================== */
:root{
  --c2d-primary:#0b74ff;
  --c2d-accent:#00b7ff;
  --c2d-gold:#f4a51c;
  --c2d-success:#16a36a;
  --c2d-danger:#e04f5f;
  --c2d-radius:18px;
}
body{scroll-behavior:smooth}
.featured-circle-section{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%)}
.featured-circle-card{background:transparent!important}
.featured-circle-image{border-radius:50%!important;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--card-bg,#f1f4f8);border:1px solid rgba(11,116,255,.12);aspect-ratio:1/1}
.featured-circle-image img{width:100%!important;height:100%!important;object-fit:contain!important;padding:12px;display:block}
.advanced-filter-drawer{margin:18px 0 22px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--card-bg);box-shadow:0 12px 30px rgba(20,35,60,.06)}
.advanced-filter-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:14px;align-items:end}
.advanced-filter-drawer input,.advanced-filter-drawer select{width:100%;min-height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--input-bg,var(--bg));color:var(--text)}
.products-grid.compact-view{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
@media(max-width:900px){.advanced-filter-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.advanced-filter-grid{grid-template-columns:1fr}}
/* Ensure all product media remains fully visible rather than cropped */
.product-card img,.product-image img,.product-card .product-img img{object-fit:contain!important}
html[data-theme="dark"]{
  --bg:#070b12;--bg-alt:#0d1420;--card-bg:#111b2a;--text:#f5f8ff;--text-dim:#9caac0;--border:#263750;--input-bg:#0c1421;
}
html[data-theme="light"]{
  --bg:#f7f9fc;--bg-alt:#eef3f9;--card-bg:#ffffff;--text:#152033;--text-dim:#65748b;--border:#d8e1ed;--input-bg:#ffffff;
}

/* Exact reference-style pagination dots for circular product slider */
.circle-carousel-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px auto 0;min-height:18px}
.circle-carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--border);cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.circle-carousel-dot:hover{transform:scale(1.25);background:var(--blue)}
.circle-carousel-dot.active{background:var(--blue);transform:scale(1.2);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent)}
/* Product images remain complete and uncropped inside the perfect circular frame. */
.featured-circle-image img{object-fit:contain!important;width:88%!important;height:88%!important;object-position:center}

/* International-level theme tokens */
:root{--focus-ring:0 0 0 3px rgba(6,182,255,.22);--surface-glass:rgba(255,255,255,.04)}
body[data-theme="light"]{--blue:#0878F9;--deepblue:#1251B5;--orange:#C87500;--bg:#F5F7FB;--bg-alt:#EDF2F8;--card:#FFFFFF;--card-2:#F8FAFD;--border:#D8E0EB;--text:#111827;--text-dim:#5B6678;--shadow:0 14px 34px rgba(15,23,42,.10)}
body[data-theme="dark"]{--blue:#22B8FF;--deepblue:#3B82F6;--orange:#F6B73C;--bg:#070B12;--bg-alt:#0D1420;--card:#111A28;--card-2:#162235;--border:#263750;--text:#F5F7FB;--text-dim:#A8B4C7;--shadow:0 18px 44px rgba(0,0,0,.38)}


/* ===================== C2D PREMIUM INTERNATIONAL FINISH ===================== */
:root{
  --bg:#07101d;
  --bg-alt:#0d1726;
  --card:#111d2d;
  --card-2:#152337;
  --border:#263a53;
  --text:#f7fbff;
  --text-dim:#a7b5c8;
  --blue:#18b9ff;
  --purple:#7c6cff;
  --orange:#ffb52e;
  --deepblue:#1677d2;
  --green:#20c982;
  --grad-main:linear-gradient(100deg,#18b9ff 0%,#7c6cff 55%,#b57cff 100%);
  --grad-btn:linear-gradient(135deg,#18b9ff,#1677d2);
  --grad-btn-2:linear-gradient(135deg,#1677d2,#18b9ff);
  --shadow:0 18px 48px rgba(0,0,0,.28);
}
body[data-theme="light"]{
  --bg:#f5f8fc;
  --bg-alt:#edf2f8;
  --card:#ffffff;
  --card-2:#f8fbff;
  --border:#d7e1ec;
  --text:#142033;
  --text-dim:#66758a;
  --blue:#087fdb;
  --purple:#6757d9;
  --orange:#c97800;
  --deepblue:#075db4;
  --green:#11875b;
  --grad-main:linear-gradient(100deg,#087fdb 0%,#6757d9 55%,#8d58d8 100%);
  --grad-btn:linear-gradient(135deg,#087fdb,#075db4);
  --grad-btn-2:linear-gradient(135deg,#075db4,#087fdb);
  --shadow:0 18px 42px rgba(31,55,84,.12);
}

/* Premium native dropdowns: clean arrow, stronger focus, consistent dark/light surfaces. */
select,
.adv-filter-group select,
.advanced-filter-drawer select,
.form-group select,
.status-select{
  appearance:none; -webkit-appearance:none;
  background-color:var(--card-2);
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 11px) 50%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  border:1px solid var(--border); color:var(--text); min-height:44px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.04);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
select:hover{border-color:var(--blue);}
select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 16%,transparent);}
select option{ background-color:var(--card); color:var(--text); }
body[data-theme="light"] select{background-color:#fff;}
body[data-theme="light"] select option{ background-color:#fff; color:#10141F; }

/* Buttons feel tactile and fluid instead of flat. */
.btn,.mini-btn,.circle-carousel-btn,.circle-control,.icon-btn,.admin-tab-btn{position:relative;overflow:hidden;isolation:isolate;}
.btn::after,.mini-btn::after,.circle-carousel-btn::after,.circle-control::after,.icon-btn::after,.admin-tab-btn::after{
  content:"";position:absolute;inset:-80% auto -80% -30%;width:24%;transform:skewX(-18deg) translateX(-180%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transition:transform .7s ease;pointer-events:none;z-index:-1;
}
.btn:hover::after,.mini-btn:hover::after,.circle-carousel-btn:hover::after,.circle-control:hover::after,.icon-btn:hover::after,.admin-tab-btn:hover::after{transform:skewX(-18deg) translateX(700%);}
.btn,.circle-control,.admin-tab-btn{box-shadow:0 10px 24px rgba(0,0,0,.10);}
.btn-primary{box-shadow:0 12px 28px color-mix(in srgb,var(--blue) 28%,transparent);}
.btn-primary:hover{box-shadow:0 18px 36px color-mix(in srgb,var(--blue) 38%,transparent);}

/* Sold Out never hides behind the wishlist control. */
.product-thumb{overflow:hidden;}
.product-thumb .card-wishlist-btn{z-index:5;}
.product-thumb .sold-badge{z-index:4;}

/* Circular slider: speed is driven by JS/admin, while movement stays smooth. */
.circle-carousel-track{transition:transform .42s cubic-bezier(.22,.61,.36,1);}
.featured-circle-image{background:linear-gradient(145deg,var(--card-2),var(--bg-alt));box-shadow:0 14px 30px rgba(0,0,0,.12);}
.featured-circle-image img{object-fit:contain!important;object-position:center;padding:12px;}
.circle-carousel-dot{background:color-mix(in srgb,var(--text-dim) 28%,transparent);}
.circle-carousel-dot.active{background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 15%,transparent);}


/* =========================================================
   C2D FINAL MOBILE + PRODUCT CARD HARDENING
   ========================================================= */
.product-thumb .sold-badge{
  inset-inline-start:10px;
  width:max-content;
  max-width:calc(100% - 64px);
  min-width:0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  z-index:6;
}
.product-thumb .card-wishlist-btn{z-index:7;}
.product-thumb img{object-fit:contain!important;object-position:center!important;}

/* Keep the category/navigation strip usable on small screens instead of squeezing text. */
.cat-menu-inner{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  justify-content:flex-start;
  white-space:nowrap;
}
.cat-menu-inner::-webkit-scrollbar{ display:none; }
.cat-menu-inner > *{flex:0 0 auto;}

/* Mobile header: no accidental horizontal squeeze or clipped controls. */
@media (max-width:640px){
  .topbar-row-1,.topbar-row-2{width:100%;}
  .topbar-info{width:100%; overflow-wrap:anywhere;}
  .topbar-info > span:first-child{max-width:100%;}
  .topbar-phones{width:100%; flex-wrap:wrap;}
  .navbar{align-items:center;}
  .brand{min-width:0; flex:1 1 auto;}
  .brand-name{min-width:0;}
  .nav-actions{flex:0 0 auto;}
  .nav-desktop-quote{display:none;}
  .cat-menu-bar{position:relative;}
  .cat-menu-inner{padding-inline:12px; gap:2px;}
  .cat-menu-home,.cat-menu-btn{flex:0 0 auto;}
  .advanced-filter-drawer,.adv-filter-bar{width:100%; max-width:100%; overflow:visible;}
  .advanced-filter-grid{grid-template-columns:1fr!important;}
  .adv-filter-group,.adv-filter-check{width:100%; min-width:0;}
  .adv-filter-group input,.adv-filter-group select{width:100%; min-width:0;}
  .products-grid{grid-template-columns:1fr!important;}
  .product-card{min-width:0;}
  .product-thumb{height:190px;}
}
@media (max-width:420px){
  .topbar-info{font-size:11px;}
  .topbar-phones{gap:3px;}
  .tb-phone-link{font-size:11px;}
  .navbar{padding-inline:12px;}
  .brand-name{font-size:14px;}
  .nav-actions{gap:4px;}
  .icon-action{width:32px;height:32px;}
  .menu-toggle{width:34px;height:34px;}
  .featured-circle-image{width:112px!important;height:112px!important;}
  .featured-circle-card{padding-inline:5px;}
  .featured-circle-card strong{font-size:11px;}
}

/* Premium controls: consistent touch targets and visible focus states. */
button,.btn,select,input{touch-action:manipulation;}
button:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 24%,transparent),0 0 0 1px var(--blue);}


/* ===== FINAL USER-REQUESTED WEBSITE POLISH ===== */
/* Website uses a restrained premium palette; admin panel keeps its own richer controls. */
body:not(.admin-body) .gradient-text,
body:not(.admin-body) .brand-multicolor:not(.designer-credit .brand-multicolor),
body:not(.admin-body) .banner-heading{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--blue)!important;}
body:not(.admin-body) .brand-name{color:var(--text)!important;}
body:not(.admin-body) .brand-name small{color:var(--blue)!important;}
body:not(.admin-body) .btn-primary{background:linear-gradient(135deg,var(--blue),var(--deepblue))!important;color:#fff!important;}
body:not(.admin-body) .btn-whatsapp{background:#12a86b!important;color:#fff!important;}
body:not(.admin-body) .btn-outline{background:transparent!important;border:1px solid var(--blue)!important;color:var(--blue)!important;}
body:not(.admin-body) .cat-menu-shared-drop{border:1px solid var(--border)!important;background:var(--card-2)!important;box-shadow:0 24px 60px rgba(0,0,0,.28)!important;}
body:not(.admin-body) .cmd-row:hover{background:color-mix(in srgb,var(--blue) 12%,transparent)!important;color:var(--blue)!important;}
body:not(.admin-body) .product-thumb{position:relative;overflow:hidden;}
body:not(.admin-body) .product-thumb .sold-badge{left:10px!important;right:auto!important;top:10px!important;max-width:calc(100% - 64px)!important;z-index:8!important;}
body:not(.admin-body) .product-thumb .card-wishlist-btn{inset-inline-end:10px!important;inset-inline-start:auto!important;top:10px!important;z-index:9!important;}
body:not(.admin-body) .product-thumb img{object-fit:contain!important;object-position:center!important;}
body:not(.admin-body) .advanced-filter-drawer{background:var(--card)!important;border-color:var(--border)!important;}
body:not(.admin-body) .advanced-filter-drawer input,
body:not(.admin-body) .advanced-filter-drawer select{background:var(--card-2)!important;color:var(--text)!important;border-color:var(--border)!important;}
body:not(.admin-body) .featured-circle-image{background:var(--card-2)!important;}
body:not(.admin-body) .featured-circle-image img{width:88%!important;height:88%!important;object-fit:contain!important;}
body:not(.admin-body) .featured-circle-card strong{color:var(--text)!important;}
body:not(.admin-body) .featured-circle-price{color:var(--orange)!important;}
body:not(.admin-body) .circle-carousel-dot{background:var(--text-dim)!important;opacity:.35;}
body:not(.admin-body) .circle-carousel-dot.active{background:var(--blue)!important;opacity:1;}
body:not(.admin-body) .cat-menu-inner{scrollbar-width:none; -ms-overflow-style:none;}


/* =========================================================
   C2D PUBLIC WEBSITE — FINAL PREMIUM COLOR / FIT OVERRIDES
   Keep the admin theme independent. The public site uses a restrained
   international palette: graphite/navy + electric blue + warm amber.
   ========================================================= */
:root{
  --c2d-ink:#07111f;
  --c2d-panel:#0d1a2b;
  --c2d-panel-2:#12243a;
  --c2d-line:#29405b;
  --c2d-blue:#28b8ff;
  --c2d-blue-deep:#0878c9;
  --c2d-amber:#f3b33d;
  --c2d-green:#20c981;
}
html[data-theme="light"], body.light-mode, body[data-theme="light"]{
  --c2d-ink:#f6f8fb;
  --c2d-panel:#ffffff;
  --c2d-panel-2:#eef3f8;
  --c2d-line:#d4deea;
  --c2d-blue:#0878c9;
  --c2d-blue-deep:#07579a;
  --c2d-amber:#a86600;
  --c2d-green:#087f52;
}
/* Single-accent headings instead of rainbow/multi-color text on the public site. */
body:not([data-theme="admin"]) .gradient-text,
body:not([data-theme="admin"]) .banner-heading.gradient-text{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--blue) !important;
  text-shadow:0 0 22px rgba(40,184,255,.18);
}
/* V34-safe transient brand/banner backlight: NEVER remains active after leave/click. */
.logo-text, .brand-name, .site-name, .banner-heading, .js-site-logo{ filter:none; }
.c2d-backlight-target{
  cursor:pointer;
  filter:none !important;
  text-shadow:none !important;
  transition:filter .12s ease, text-shadow .12s ease;
}
.c2d-backlight-target.c2d-hover-glow,
.c2d-backlight-target.c2d-tap-glow{
  filter:drop-shadow(0 0 16px rgba(40,184,255,.45)) !important;
  text-shadow:0 0 16px rgba(40,184,255,.42) !important;
}
@media (hover:none){
  .c2d-backlight-target:hover{filter:none !important;text-shadow:none !important;}
}
.c2d-backlight-target:focus,
.c2d-backlight-target:focus-visible{
  outline:none !important;
  filter:none !important;
  text-shadow:none !important;
}
/* Premium glass buttons with a restrained moving highlight. */
.btn, button, .mini-btn, .filter-tabs button, .cat-menu-btn, .cat-menu-home, select{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
}
.btn, .mini-btn, .filter-tabs button, .cat-menu-btn, .cat-menu-home{
  position:relative; overflow:hidden; isolation:isolate;
}
.btn::after, .mini-btn::after, .filter-tabs button::after, .cat-menu-btn::after, .cat-menu-home::after{
  content:""; position:absolute; inset:0 auto 0 -120%; width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-18deg); transition:left .55s ease; pointer-events:none; z-index:-1;
}
.btn:hover::after, .mini-btn:hover::after, .filter-tabs button:hover::after, .cat-menu-btn:hover::after, .cat-menu-home:hover::after{left:130%;}
.btn:hover, .mini-btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--deepblue)) !important; box-shadow:0 10px 26px rgba(8,120,201,.25) !important;}
.btn-outline{border-color:var(--blue) !important; background:rgba(255,255,255,.025) !important;}
.btn-whatsapp{background:linear-gradient(135deg,#21c77a,#0d8f67) !important;}
/* Product images: never crop real product photography. */
.product-thumb{overflow:hidden;}
.product-thumb img{object-fit:contain !important; object-position:center center !important; padding:12px !important; background:transparent;}
.product-thumb .sold-badge{z-index:5; max-width:calc(100% - 72px); white-space:nowrap; overflow:visible;}
.card-wishlist-btn{z-index:6;}
/* Select/dropdown polish. */
select, .adv-filter-group select, .adv-filter-group input{
  border:1px solid var(--border) !important;
  background:var(--card-2) !important;
  color:var(--text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.08);
}
select:focus, .adv-filter-group select:focus, .adv-filter-group input:focus{
  outline:none; border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(40,184,255,.14), 0 8px 20px rgba(0,0,0,.12);
}
select option{ background-color:var(--card) !important; color:var(--text) !important; }
/* Shared dropdown stays centered and feels like a deliberate mega-menu. */
.cat-menu-shared-drop{border:1px solid var(--border) !important; box-shadow:0 24px 60px rgba(0,0,0,.30) !important; background: var(--card) !important;}
.cat-menu-shared-drop::before{background:var(--blue) !important;}
/* Light mode: preserve contrast and premium restraint. */
body.light-mode .btn-outline{color:#17283b !important;}
body.light-mode .product-card, body.light-mode .adv-filter-bar, body.light-mode .cat-menu-shared-drop{box-shadow:0 12px 35px rgba(17,42,70,.08);}
body[data-theme="light"] select, body[data-theme="light"] .adv-filter-group select, body[data-theme="light"] .adv-filter-group input{
  background:#FFFFFF !important; color:#10141F !important; border-color:#D8E0EB !important;
}
body[data-theme="light"] select option{ background-color:#FFFFFF !important; color:#10141F !important; }


/* ===== Targeted RTL cart/search + category-arrow alignment fixes ===== */
html[dir="rtl"] .cart-drawer{
  left:0 !important; right:auto !important;
  transform:translateX(-105%) !important;
  z-index:3001 !important;
}
html[dir="rtl"] .cart-drawer.open{ transform:translateX(0) !important; }
.cart-overlay{ z-index:3000 !important; }
.cart-drawer.open{ visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }
.search-bar-inner button#searchClose{
  flex:0 0 38px; min-width:38px; min-height:38px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:5;
  color:var(--text) !important; opacity:1 !important;
  border:1px solid var(--border); border-radius:50%;
  background:var(--card) !important;
}
body.lang-ur .search-bar-inner button#searchClose{ margin-inline-start:0; margin-inline-end:0; }
@media (max-width:640px){
  .cat-menu-scroll-btn{ flex-basis:34px; width:34px; min-width:34px; }
  .search-bar-inner{ width:100%; max-width:100%; padding-inline:12px; gap:8px; overflow:hidden; }
  .search-bar-inner input{ min-width:0; flex:1 1 0; }
  .search-bar-inner button#searchClose{ flex:0 0 36px; min-width:36px; width:36px; height:36px; padding:0; margin:0; }
}

/* Targeted RTL cart/search reliability fixes */
body.lang-ur .cart-drawer.open{ transform:translateX(0) !important; }
.search-bar-inner button#searchClose{
  flex:0 0 auto; min-width:34px; min-height:34px; display:flex;
  align-items:center; justify-content:center; margin-inline-start:auto;
  position:relative; z-index:3; opacity:1; visibility:visible;
}

/* Targeted checkout review summary */
.checkout-summary{border:1px solid var(--border);background:var(--bg-alt);border-radius:12px;padding:12px;margin-bottom:14px;}
.checkout-summary-item,.checkout-summary-total{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:7px 0;font-size:13px;}
.checkout-summary-item + .checkout-summary-item{border-top:1px solid var(--border);}
.checkout-summary-total{border-top:1px solid var(--border);margin-top:5px;padding-top:10px;font-weight:800;color:var(--text);}
.review-summary{margin-top:12px;margin-bottom:0;text-align:start;}
/* Keep the two physical marquee groups stable while their images load. */
.marquee{contain:layout style;}
.marquee-group{contain:layout style;}
/* Desktop/laptop category arrows stay beside the actual scrollable list, not at page edges. */
.cat-menu-bar{position:relative;padding-inline:max(0px, calc((100vw - 1220px) / 2));}
.cat-menu-inner{flex:1 1 auto;width:100%;max-width:1220px;}
.cat-menu-scroll-btn{position:absolute;top:0;bottom:0;width:34px;min-width:34px;}
.cat-menu-scroll-left{inset-inline-start:max(0px, calc((100vw - 1220px) / 2));}
.cat-menu-scroll-right{inset-inline-end:max(0px, calc((100vw - 1220px) / 2));}
@media (max-width:640px){
  .cat-menu-bar{padding-inline:0;}
  .cat-menu-scroll-left{inset-inline-start:0;}
  .cat-menu-scroll-right{inset-inline-end:0;}
  .cat-menu-inner{padding-inline:42px;max-width:none;}
}

/* ===== Targeted requested fixes: category arrows + uninterrupted brand marquee ===== */
.cat-menu-inner{
  padding-inline:42px !important;
  position:relative;
  z-index:1;
}
.cat-menu-scroll-btn{
  z-index:3;
  pointer-events:auto;
}
.cat-menu-home,
.cat-menu-btn{
  position:relative;
  z-index:1;
}
body.lang-ur .cat-menu-home,
body.lang-ur .cat-menu-btn,
html[dir="rtl"] .cat-menu-home,
html[dir="rtl"] .cat-menu-btn{
  direction:rtl;
  text-align:right;
}
body.lang-ur .cat-menu-btn span,
html[dir="rtl"] .cat-menu-btn span{
  direction:rtl;
  unicode-bidi:plaintext;
  text-align:right;
}

/* The brand strip is a self-contained LTR animation even on the Urdu page.
   The two identical groups touch edge-to-edge, so there is no empty frame,
   disappearing track, or RTL transform calculation to break the loop. */
.marquee{
  direction:ltr !important;
  width:max-content;
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  animation:scroll var(--marquee-duration,40s) linear infinite !important;
  animation-play-state:running !important;
}
.marquee-group{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  white-space:nowrap;
}
.marquee-group + .marquee-group{ margin-inline-start:0; }

/* Keep cart actions crisp/clickable above the card's visual effects. */
.mini-btn{
  position:relative;
  z-index:4;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.mini-btn:hover{ transform:translateZ(0) scale(1.06); }
.mini-btn::after{ pointer-events:none !important; }
.cart-item-remove{
  position:relative;
  z-index:10;
  pointer-events:auto !important;
  touch-action:manipulation;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
}
.cart-item-remove svg{ pointer-events:none; }
.cart-item-remove{
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.cart-item-remove:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

@media (max-width:640px){ .marquee-group{gap:16px;} }

/* Targeted marquee boundary fix: keep the last card of one physical copy and the
   first card of the next copy separated exactly like normal cards. This is especially
   important at the IBM / THINKPAD → DELL loop boundary. */
.marquee-group{ padding-inline-end:22px; }
.marquee-group > span{ box-sizing:border-box; flex:0 0 auto; }
.marquee-group > span img{ display:block; max-width:100%; }

/* English-only Add To Cart sharpness: remove the product-card hover transform
   while an action control is hovered/focused. This prevents browser rasterization
   from making the Add To Cart icon look blurred and keeps its hit area stable. */
html[dir="ltr"] .product-card:has(.mini-cart:hover),
html[dir="ltr"] .product-card:has(.mini-cart:focus-visible),
body:not(.lang-ur) .product-card:has(.mini-cart:hover),
body:not(.lang-ur) .product-card:has(.mini-cart:focus-visible){
  transform:none !important;
}

/* Keep product action controls visually crisp and independently clickable.
   Do not let the parent card's 3D hover rasterization blur these controls. */
.product-card .mini-btn{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate3d(0,0,0) !important;
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
  will-change:auto;
  position:relative;
  z-index:50;
}
.product-card .mini-btn:active,
.product-card .mini-btn:focus-visible{ transform:translate3d(0,0,0) !important; }
.product-card .mini-btn:disabled{ opacity:.45; }
.product-card .mini-btn svg{ filter:none !important; opacity:1; }

/* =========================================================
   C2D SAFE RTL + MARQUEE STABILITY PATCH
   No content/data changes. The brand track has one physical LTR
   coordinate system; Urdu page content remains true RTL.
   ========================================================= */
html[dir="rtl"] body,
body.lang-ur{ direction:rtl; text-align:right; }
html[dir="ltr"] body{ direction:ltr; text-align:left; }

/* Urdu category navigation: first item starts on the RIGHT and menu text stays RTL. */
html[dir="rtl"] .cat-menu-inner,
body.lang-ur .cat-menu-inner{
  direction:rtl !important;
  justify-content:flex-start;
  text-align:right;
}
html[dir="rtl"] .cat-menu-home,
html[dir="rtl"] .cat-menu-btn,
body.lang-ur .cat-menu-home,
body.lang-ur .cat-menu-btn{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext;
}
html[dir="rtl"] .cat-menu-btn i,
body.lang-ur .cat-menu-btn i{ margin-inline-start:4px; margin-inline-end:0; }
html[dir="rtl"] .cmd-row,
body.lang-ur .cmd-row{ direction:rtl; text-align:right; }
html[dir="rtl"] .cmd-tree-item .cmd-row,
body.lang-ur .cmd-tree-item .cmd-row{ flex-direction:row; }
html[dir="rtl"] .cmd-flyout-arrow,
body.lang-ur .cmd-flyout-arrow{ transform:rotate(180deg); }

/* Brand marquee: never let page RTL alter its physical loop geometry. */
.brand-strip{ overflow:hidden; contain:layout paint; direction:ltr; }
.marquee{
  direction:ltr !important;
  flex-direction:row !important;
  gap:0 !important;
  width:max-content !important;
  max-width:none !important;
  flex-wrap:nowrap !important;
  animation:scroll var(--marquee-duration,40s) linear infinite !important;
  animation-play-state:running !important;
  will-change:transform;
  transform-style:flat;
}
.marquee-group{
  direction:ltr !important;
  min-width:100%;
  justify-content:space-around;
  flex-direction:row !important;
  flex:0 0 auto !important;
  width:max-content !important;
  min-width:100%;
  gap:22px;
  padding-inline-end:0 !important;
}
.marquee-group > span{ flex:0 0 auto !important; min-width:max-content; }
/* Keep a real layout gap at the duplicated-group boundary so the transformed
   last/first cards can never paint into one another. No brand is removed/hidden. */
.marquee-group > span:first-child{ margin-inline-start:10px; }
.marquee-group > span:last-child{ margin-inline-end:10px; }

/* Add-to-cart/remove controls stay sharp and above decorative layers. */
.product-card .mini-cart,
.product-card .mini-btn,
.cart-item-remove{
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  isolation:isolate;
}
.product-card .mini-cart{ z-index:20; }
.product-card .mini-cart::before,
.product-card .mini-cart::after{ pointer-events:none !important; }
.cart-item-remove{ z-index:30; }

/* Responsive hardening: prevent horizontal overflow while keeping all content. */
@media (max-width:1100px){
  .container{ padding-inline:18px; }
  .navbar{ gap:12px; }
  nav.nav-links{ gap:12px; }
  .hero-grid,.banner-grid{ gap:22px; }
}
@media (max-width:900px){
  .container{ max-width:100%; }
  .navbar{ flex-wrap:wrap; }
  nav.nav-links{ order:4; width:100%; overflow-x:auto; scrollbar-width:none; }
  nav.nav-links::-webkit-scrollbar{display:none;}
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .container{ padding-inline:12px; }
  section{ padding-block:64px; }
  .brand-strip{ padding-block:20px; }
  .marquee-group{ gap:16px; padding-inline-end:16px; }
  .marquee span{ max-width:none; }
  .why-grid,.services-grid{ grid-template-columns:1fr; }
  .cat-menu-inner{ padding-inline:42px !important; }
  .cat-menu-shared-drop{ width:calc(100vw - 16px); max-width:calc(100vw - 16px); }
  .cmd-flatgrid{ grid-template-columns:1fr; }
  .cart-drawer{ max-width:min(100vw,420px); }
  .cart-item{ gap:9px; }
  .cart-item-info h5{ overflow-wrap:anywhere; }
}
@media (max-width:420px){
  .cmd-flatgrid{ grid-template-columns:1fr; }
  .cat-menu-home,.cat-menu-btn{ padding-inline:11px; }
  .product-foot{ gap:10px; }
  .product-foot .mini-btn{ flex:0 0 38px; }
}


/* =========================================================
   ENGLISH CART POPUP — TARGETED FIX ONLY
   The drawer itself must not be rendered on a transformed GPU
   layer. The old translateX animation could make the complete
   popup look soft/blurred and could create a bad hit-testing
   layer over the remove control. English only; Urdu is untouched.
   ========================================================= */
body:not(.lang-ur) .cart-drawer{
  right:0;
  inset-inline-end:0;
  transform:none !important;
  transition:opacity .18s ease, visibility .18s ease, right .25s ease !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  will-change:right;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:isolate;
  overflow:hidden;
}
body:not(.lang-ur) .cart-drawer.open{
  right:0;
  transform:none !important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
body:not(.lang-ur) .cart-drawer .cart-items{
  position:relative;
  z-index:2;
  overflow-y:auto;
  overflow-x:hidden;
  isolation:isolate;
}
body:not(.lang-ur) .cart-drawer .cart-item{
  position:relative;
  z-index:3;
  overflow:visible;
}
body:not(.lang-ur) .cart-drawer .cart-item-remove{
  position:relative !important;
  z-index:100 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  flex:0 0 34px !important;
  min-width:34px;
  min-height:34px;
  transform:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body:not(.lang-ur) .cart-drawer .cart-item-remove svg{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:18px !important;
  height:18px !important;
  pointer-events:none !important;
}
body:not(.lang-ur) .cart-drawer .cart-item-remove:hover{
  color:var(--blue);
  transform:none !important;
}

/* =========================================================
   ENGLISH CART DRAWER — FINAL TARGETED FIX
   Only the English cart popup/remove control is affected here.
   Keep the drawer on a normal fixed, opaque layer (no transform/filter/
   backdrop blur) and give the native remove button its own hit area.
   ========================================================= */
html[dir="ltr"] .cart-overlay,
body:not(.lang-ur) .cart-overlay{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}
html[dir="ltr"] .cart-drawer,
body:not(.lang-ur) .cart-drawer{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  width:min(400px, 100vw) !important;
  height:100vh !important;
  background-color:var(--card-2) !important;
  background-image:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  will-change:auto !important;
  contain:paint !important;
  isolation:isolate !important;
  overflow:hidden !important;
  z-index:3001 !important;
}
html[dir="ltr"] .cart-drawer.open,
body:not(.lang-ur) .cart-drawer.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}
html[dir="ltr"] .cart-drawer .cart-items,
body:not(.lang-ur) .cart-drawer .cart-items{
  position:relative !important;
  z-index:1 !important;
  opacity:1 !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
html[dir="ltr"] .cart-drawer .cart-item,
body:not(.lang-ur) .cart-drawer .cart-item{
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  filter:none !important;
  overflow:visible !important;
}
html[dir="ltr"] .cart-drawer .cart-item-remove,
body:not(.lang-ur) .cart-drawer .cart-item-remove{
  appearance:none !important;
  -webkit-appearance:none !important;
  position:relative !important;
  z-index:3005 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 40px !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--border) !important;
  border-radius:9px !important;
  background:var(--bg-alt) !important;
  color:var(--text) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  user-select:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
  box-shadow:none !important;
}
html[dir="ltr"] .cart-drawer .cart-item-remove:hover,
body:not(.lang-ur) .cart-drawer .cart-item-remove:hover{
  color:var(--blue) !important;
  border-color:var(--blue) !important;
  background:var(--card) !important;
}
html[dir="ltr"] .cart-drawer .cart-item-remove:active,
body:not(.lang-ur) .cart-drawer .cart-item-remove:active{
  transform:none !important;
}
html[dir="ltr"] .cart-drawer .cart-item-remove svg,
body:not(.lang-ur) .cart-drawer .cart-item-remove svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  max-width:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  color:currentColor !important;
  stroke:currentColor !important;
}


/* =========================================================
   URDU CART POPUP — MATCH THE FIXED ENGLISH CART SYSTEM
   Only Urdu cart behavior is targeted here. The existing RTL document
   direction remains intact, while the drawer uses the same crisp, stable
   fixed rendering/hit-testing behavior as English.
   ========================================================= */
html[dir="rtl"] .cart-overlay,
body.lang-ur .cart-overlay{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}
html[dir="rtl"] .cart-drawer,
body.lang-ur .cart-drawer{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  inset-inline-end:0 !important;
  width:min(400px, 100vw) !important;
  height:100vh !important;
  background-color:var(--card-2) !important;
  background-image:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  will-change:auto !important;
  contain:paint !important;
  isolation:isolate !important;
  overflow:hidden !important;
}
html[dir="rtl"] .cart-drawer.open,
body.lang-ur .cart-drawer.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}
html[dir="rtl"] .cart-drawer .cart-items,
body.lang-ur .cart-drawer .cart-items{
  position:relative !important;
  z-index:1 !important;
  opacity:1 !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
html[dir="rtl"] .cart-drawer .cart-item,
body.lang-ur .cart-drawer .cart-item{
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  filter:none !important;
  overflow:visible !important;
}
html[dir="rtl"] .cart-drawer .cart-item-remove,
body.lang-ur .cart-drawer .cart-item-remove{
  appearance:none !important;
  -webkit-appearance:none !important;
  position:relative !important;
  z-index:3005 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 40px !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--border) !important;
  border-radius:9px !important;
  background:var(--bg-alt) !important;
  color:var(--text) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  user-select:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
  box-shadow:none !important;
}
html[dir="rtl"] .cart-drawer .cart-item-remove:hover,
body.lang-ur .cart-drawer .cart-item-remove:hover{
  color:var(--blue) !important;
  border-color:var(--blue) !important;
  background:var(--card) !important;
}
html[dir="rtl"] .cart-drawer .cart-item-remove:active,
body.lang-ur .cart-drawer .cart-item-remove:active{
  transform:none !important;
}
html[dir="rtl"] .cart-drawer .cart-item-remove svg,
body.lang-ur .cart-drawer .cart-item-remove svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  max-width:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
}
html[dir="rtl"] .cart-drawer .cart-head,
body.lang-ur .cart-drawer .cart-head,
html[dir="rtl"] .cart-drawer .cart-foot,
body.lang-ur .cart-drawer .cart-foot{
  direction:rtl;
}


/* =========================================================
   FINAL BRAND MARQUEE — ENGLISH + URDU
   One physical LTR track is used on both language pages.
   JavaScript measures one complete group and animates exactly
   that pixel distance, so the next DELL follows IBM / THINKPAD
   with the same compact spacing and no visible boundary reset.
   ========================================================= */
.brand-strip{
  overflow:hidden;
  width:100%;
  white-space:nowrap;
  position:relative;
  background:var(--bg-alt);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:26px 0;
  perspective:900px;
  direction:ltr !important;
  contain:layout paint;
}

.brand-strip .marquee{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  max-width:none !important;
  gap:0 !important;
  direction:ltr !important;
  transform-style:preserve-3d;
  will-change:transform;
  animation-name:scroll !important;
  animation-duration:var(--marquee-duration,40s) !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
  animation-fill-mode:none !important;
  animation-play-state:running !important;
}

.brand-strip .marquee-group{
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:row !important;
  align-items:center;
  justify-content:flex-start !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:none !important;
  gap:14px !important;
  padding:0 14px 0 0 !important;
  margin:0 !important;
  direction:ltr !important;
  white-space:nowrap;
  box-sizing:border-box;
  contain:layout style;
}

.brand-strip .marquee-group > span{
  flex:0 0 auto !important;
  min-width:max-content !important;
  margin:0 !important;
  box-sizing:border-box;
  color:var(--text-dim);
  font-weight:800;
  letter-spacing:1.5px;
  font-size:13.5px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--card);
  border:1px solid var(--border);
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transform:none !important;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease;
  white-space:nowrap;
}

.brand-strip .marquee-group > span::before{
  content:'✦';
  color:var(--blue);
  font-size:11px;
  flex:0 0 auto;
}

.brand-strip .marquee-group > span:nth-child(3n+2){
  transform:none !important;
}

 .brand-strip .marquee-group > span:hover{
  border-color:var(--blue);
  color:var(--text);
  box-shadow:0 18px 34px rgba(6,182,255,.25), 0 0 22px rgba(6,182,255,.18);
  z-index:2;
}

.brand-strip .marquee-group img{
  height:22px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  display:block;
}

.brand-strip .marquee-group > span + span{
  margin-inline-start:0 !important;
}

@keyframes scroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(-1 * var(--marquee-distance, 0px)),0,0); }
}

@media (max-width:640px){
  .brand-strip{ padding-block:20px; }
  .brand-strip .marquee-group{
    gap:10px !important;
    padding-right:10px !important;
  }
  .brand-strip .marquee-group > span{
    padding:9px 14px;
    font-size:12px;
    border-radius:10px;
    letter-spacing:1px;
  }
  .brand-strip .marquee-group img{
    height:18px;
    max-width:90px;
  }
}

/* v22 advanced filter polish — additive */
.filter-presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 14px;}
.filter-preset{border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 13px;border-radius:999px;font-weight:800;font-size:12px;cursor:pointer;transition:.2s;}
.filter-preset:hover,.filter-preset.active{border-color:var(--blue);background:rgba(6,182,255,.1);color:var(--blue);}
.filter-active-summary{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;min-height:2px;margin-bottom:18px;}
.filter-chip{border:1px solid rgba(6,182,255,.3);background:rgba(6,182,255,.08);color:var(--text);padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;cursor:pointer;}
.filter-chip.clear-all{border-color:rgba(245,166,35,.45);background:rgba(245,166,35,.08);color:var(--orange);}
.adv-filter-bar.filters-expanded{box-shadow:0 20px 50px rgba(0,0,0,.18);}
@media(max-width:640px){.filter-presets{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}.filter-presets::-webkit-scrollbar{display:none}.filter-preset{flex:0 0 auto}.filter-more-btn{width:100%;}.filter-active-summary{justify-content:flex-start;}.checkout-modal{left:50%!important;right:auto!important;}}
/* Urdu mobile: suppress only touch/focus glow behind header controls; keep logo/banner visual effects intact. */
@media(max-width:600px){html[dir="rtl"] .nav-actions .icon-action,html[dir="rtl"] .nav-actions .menu-toggle,html[dir="rtl"] .nav-actions .icon-action:focus,html[dir="rtl"] .nav-actions .menu-toggle:focus{box-shadow:none!important;filter:none!important;-webkit-tap-highlight-color:transparent!important;}html[dir="rtl"] .nav-actions .icon-action::before,html[dir="rtl"] .nav-actions .icon-action::after,html[dir="rtl"] .nav-actions .menu-toggle::before,html[dir="rtl"] .nav-actions .menu-toggle::after{display:none!important;}}

/* =========================================================
   v23 STABILITY + MOBILE BLINK FIX + ADVANCED FILTER POLISH
   Additive only. Keeps existing visual effects; removes only
   load/focus/pulse flicker that can look like screen blinking.
   ========================================================= */
.reveal,.reveal.in{opacity:1!important;transform:none!important;}
.wa-float{animation:none!important;}
.pd-fade-in{animation:none!important;}
.filter-result-count{display:block;text-align:center;font-size:11.5px;font-weight:800;color:var(--text-dim);margin:4px 0 12px;}
.adv-filter-price-range{min-width:220px;}
.filter-range-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;}
.filter-range-row input[type="range"]{width:100%;accent-color:var(--blue);height:5px;cursor:pointer;}
.filter-range-values{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font-size:10px;font-weight:800;color:var(--text-dim);}
.checkout-overlay{z-index:2147483000!important;}
.checkout-modal{z-index:2147483001!important;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;margin:0!important;transform:translate(-50%,-50%) scale(.985)!important;}
.checkout-modal.open{transform:translate(-50%,-50%) scale(1)!important;}
.checkout-modal-body{scrollbar-gutter:stable both-edges;}
.checkout-modal-body input,.checkout-modal-body textarea,.checkout-modal-body select{box-sizing:border-box;max-width:100%;}
html.checkout-open,body.checkout-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none;}
html[dir="rtl"] .checkout-modal{direction:rtl;text-align:right;}
html[dir="rtl"] .checkout-modal-head{direction:rtl;}
html[dir="rtl"] .checkout-modal-body{text-align:right;direction:rtl;}
html[dir="rtl"] .checkout-summary-item,html[dir="rtl"] .checkout-summary-total{direction:rtl;}
@media(max-width:700px){
  .adv-filter-price-range{min-width:0;}
  .filter-range-row{grid-template-columns:1fr;gap:3px;}
  .filter-range-values{font-size:9.5px;}
  .checkout-modal{width:calc(100vw - 16px)!important;height:min(92dvh,760px)!important;max-height:calc(100dvh - 16px)!important;border-radius:14px!important;}
  .checkout-modal-head{min-height:56px;padding:12px 14px;}
  .checkout-modal-body{padding:14px;}
}
@media(max-width:380px){
  .checkout-modal{width:calc(100vw - 10px)!important;height:calc(100dvh - 10px)!important;max-height:calc(100dvh - 10px)!important;}
  .checkout-modal-body{padding:12px;}
}
/* Admin/public controls: prevent browser tap highlight from creating a false blink. */
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;}
/* v24: checkout must always sit above the sticky navbar; navbar stays visually behind it. */
:root{--c2d-checkout-width:560px;}
html.checkout-open header.main-header{z-index:0 !important;filter:none !important;opacity:1 !important;}
html.checkout-open .cat-menu-bar{z-index:0 !important;}
.checkout-modal{width:min(var(--c2d-checkout-width),calc(100vw - 24px)) !important;}
.checkout-overlay{z-index:2147483640 !important;}
.checkout-modal{z-index:2147483641 !important;}
/* v24: performance mode reduces layout/paint cost without removing brand/banner effects. */
body.c2d-performance-mode #services,
body.c2d-performance-mode #products,
body.c2d-performance-mode #testimonials,
body.c2d-performance-mode #contact,
body.c2d-performance-mode footer{content-visibility:auto;contain-intrinsic-size:600px;}
body:not(.c2d-reveal-animations) .reveal,
body:not(.c2d-reveal-animations) .reveal.in{opacity:1 !important;transform:none !important;animation:none !important;}
@media(max-width:640px){.checkout-modal{width:calc(100vw - 12px) !important;}}

/* v25 — FINAL CHECKOUT STACKING FIX
   The checkout layer is deliberately isolated from sticky navbar stacking contexts. */
body.checkout-open header.main-header,
html.checkout-open header.main-header,
body.checkout-open .cat-menu-bar,
html.checkout-open .cat-menu-bar{
  z-index:1 !important;
}
.checkout-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483646 !important;
  isolation:isolate !important;
}
.checkout-overlay.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.checkout-modal{
  position:fixed !important;
  z-index:2147483647 !important;
  isolation:isolate !important;
}
.checkout-modal.open{visibility:visible !important;}


/* C2D v27 safe layering + responsive filter visibility */
#checkoutModal, .checkout-modal, .checkout-overlay, #checkoutOverlay,
#checkoutModalOverlay, [data-checkout-modal], [data-checkout-overlay]{
  position: fixed !important;
  z-index: 2147483000 !important;
}
#checkoutOverlay, .checkout-overlay, [data-checkout-overlay]{
  inset: 0 !important;
}
#checkoutModal, .checkout-modal, [data-checkout-modal]{
  max-width: min(96vw, 720px) !important;
  max-height: min(92dvh, 900px) !important;
  overflow: auto !important;
  isolation: isolate !important;
}


/* C2D v28 — filter sections and checkout stacking */
#filtersSection[hidden],#filterSection[hidden],.filters-section[hidden],.filter-section[hidden],
.filters-container[hidden],.advanced-filters[hidden],.product-filters[hidden],
.filter-bar[hidden]{display:none!important}
#checkoutModal,#checkoutOverlay,.checkout-modal,.checkout-overlay,
[data-checkout-modal],[data-checkout-overlay]{
  z-index:2147483647!important;
}

/* V33 safe additions: footer QR and transient brand/banner light */
.footer-qr-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:14px;min-height:0;}
.footer-qr-image{width:104px;height:104px;object-fit:contain;border-radius:10px;background:#fff;padding:6px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.footer-qr-label{font-size:12px;color:var(--text-dim);font-weight:700;}
@media(max-width:700px){.footer-qr-wrap{align-items:flex-start}.footer-qr-image{width:92px;height:92px}.c2d-backlight-target:hover,.c2d-backlight-target:focus,.c2d-backlight-target:focus-visible{filter:none !important;text-shadow:none !important}.c2d-backlight-target.c2d-tap-glow{filter:drop-shadow(0 0 16px rgba(40,184,255,.45)) !important;text-shadow:0 0 16px rgba(40,184,255,.42) !important;}}
/* V33 safe mobile cart-button text stabilization */
.cart-drawer .cart-foot .btn,
.cart-drawer .cart-foot .btn span{
  opacity:1 !important;
  visibility:visible !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:none !important;
  animation:none !important;
}
.cart-drawer .cart-foot .btn{
  min-height:44px;line-height:1.25;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,"Noto Naskh Arabic",sans-serif !important;
  text-rendering:optimizeSpeed;font-synthesis:none;white-space:normal;contain:paint;
}
.cart-drawer .cart-foot .btn span{opacity:1 !important;visibility:visible !important;color:inherit !important;text-shadow:none !important;filter:none !important;}


/* V34 safe performance / no-blink layer: keeps all content and functionality,
   but removes expensive reveal/paint animation sources that can look like blinking. */
html.c2d-no-blink .reveal, html.c2d-no-blink .reveal.in{ animation:none !important; opacity:1 !important; transform:none !important; }
html.c2d-no-blink [class*="blink"], html.c2d-no-blink [class*="pulse"]{ animation:none !important; }
body.c2d-performance-mode .reveal, body.c2d-performance-mode .reveal.in{ opacity:1 !important; transform:none !important; }
body.c2d-performance-mode .reveal{ transition:none !important; }
body.c2d-performance-mode .service-card, body.c2d-performance-mode .product-card, body.c2d-performance-mode .contact-card{ transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease !important; }
body.c2d-performance-mode .btn, body.c2d-performance-mode button, body.c2d-performance-mode select, body.c2d-performance-mode input{ transition-duration:.08s !important; }
html.c2d-fast-scroll{ scroll-behavior:auto !important; }
html.c2d-restoring-scroll{ scroll-behavior:auto !important; }
/* Prevent admin/public horizontal clipping without changing content. */
html,body{ box-sizing:border-box; max-width:100%; }
*,*::before,*::after{ box-sizing:border-box; }

/* V34 final stability/performance refinements. */
body.c2d-no-blink .reveal, body.c2d-no-blink .reveal.in{opacity:1 !important;transform:none !important;transition:none !important;}
body.c2d-no-blink [class*="blink"], body.c2d-no-blink [class*="pulse"]{animation:none !important;}
html.c2d-fast-scroll{scroll-behavior:auto !important;}
body.c2d-performance-mode .marquee{will-change:transform;}
.admin-body{overflow-x:hidden !important;overflow-y:auto !important;min-height:100vh;width:100%;}
.admin-body #dashboard{width:100%;min-width:0;overflow:visible;}
.admin-body .admin-wrap{width:min(100% - 24px, 1440px);margin-inline:auto;min-width:0;overflow:visible;}
.admin-body .admin-panel{min-width:0;overflow:visible;}
.admin-body .admin-panel > *, .admin-body .admin-form-row > *, .admin-body .admin-grid > *, .admin-body .control-card, .admin-body .control-fields > *{min-width:0;max-width:100%;}
.admin-body label, .admin-body h1, .admin-body h2, .admin-body h3, .admin-body p, .admin-body td, .admin-body th{overflow-wrap:anywhere;word-break:normal;}
.admin-body input, .admin-body select, .admin-body textarea, .admin-body button{max-width:100%;box-sizing:border-box;}
.admin-body .admin-table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;}
@media(max-width:640px){.admin-body .admin-wrap{width:calc(100% - 16px);}.admin-body .admin-topbar{min-height:auto;flex-wrap:wrap;gap:10px;}.admin-body .admin-topbar>div:last-child{width:100%;flex-wrap:wrap;justify-content:flex-start;}.admin-body .admin-panel{padding:12px !important;}}

@media (max-width:640px){
  .cta-actions .btn{width:100%;max-width:100%;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;}
  .cta-actions .btn span{min-width:0;overflow-wrap:anywhere;}
  .topbar-phones .tb-phone-link{min-width:0;white-space:nowrap;}
}
#backTop,#backBottom{scroll-behavior:auto !important;}

/* V33 requested refinements: compact mobile top bar, card mini-gallery, transient 3D brand backlight, banner message slider. */
.c2d-banner-message-slider{position:relative;min-height:46px;margin:0 0 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:900px;}
.c2d-banner-message-track{position:relative;width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;}
.c2d-banner-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 14px;border:1px solid rgba(40,184,255,.24);border-radius:12px;background:linear-gradient(135deg,rgba(40,184,255,.10),rgba(255,255,255,.03));color:var(--text);font-weight:800;letter-spacing:.3px;opacity:0;transform:translate3d(24px,0,-40px) rotateY(-10deg) scale(.96);transition:opacity .55s ease,transform .55s ease,box-shadow .55s ease;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.12);}
.c2d-banner-message.active{opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1);box-shadow:0 12px 28px rgba(6,182,255,.14),inset 0 0 24px rgba(6,182,255,.04);}
.c2d-banner-dots{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);display:flex;gap:5px;z-index:3;}
.c2d-banner-dot{width:7px;height:7px;padding:0;border:1px solid var(--blue);border-radius:50%;background:transparent;cursor:pointer;box-shadow:none;}
.c2d-banner-dot.active{background:var(--blue);transform:scale(1.18);}
.product-card-related-images{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;position:absolute;left:8px;right:8px;bottom:8px;z-index:4;}
.product-card-related-image{padding:0;width:100%;aspect-ratio:1.35;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:rgba(0,0,0,.18);overflow:hidden;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.12);}
.product-card-related-image img{width:100%!important;height:100%!important;padding:3px!important;object-fit:contain!important;background:var(--card);}
.product-thumb:has(.product-card-related-images){padding-bottom:54px;}
.marquee span.c2d-hover-glow,.marquee span.c2d-tap-glow{transform:perspective(600px) rotateY(0) rotateX(0) translateY(-6px) scale(1.06);border-color:var(--blue);color:var(--text);box-shadow:0 18px 34px rgba(6,182,255,.25);}
@media(max-width:700px){
 .topbar{overflow:visible;}
 .topbar-info{gap:7px;}
 .topbar-info > span{max-width:100%;}
 .topbar-address-item .addr-link{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;}
 .c2d-banner-message{font-size:12px;min-height:42px;padding:7px 10px;}
 .c2d-banner-message-slider,.c2d-banner-message-track{min-height:42px;}
 .product-card-related-images{left:6px;right:6px;bottom:6px;gap:4px;}
 .product-thumb:has(.product-card-related-images){padding-bottom:48px;}
}
@media(max-width:480px){
 .topbar-row-1,.topbar-row-2{padding-left:10px;padding-right:10px;}
 .topbar-info{font-size:11px;}
 .topbar-phones{font-size:11px;}
 .c2d-banner-message{font-size:11px;letter-spacing:0;}
}


/* =========================================================
   V33 CARRY-ON — MOBILE TOP BAR + FOOTER NUMBER SAFETY
   Requested only: compact alignment without hiding existing
   top-bar options, and keep designer WhatsApp number visible.
   ========================================================= */
@media (max-width: 640px){
  .topbar{
    font-size:11px;
  }
  .topbar-row-1{
    padding-top:5px;
    padding-bottom:4px;
    gap:6px;
    align-items:center;
  }
  .topbar-row-2{
    padding-top:4px;
    padding-bottom:5px;
    gap:6px;
    align-items:center;
  }
  .topbar-info{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    justify-content:initial;
  }
  .topbar-info > span{
    min-width:0;
    width:100%;
  }
  .topbar-info span{
    gap:4px;
    line-height:1.2;
  }
  .topbar-address-item{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar-address-item .addr-link{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar-phones{
    width:100%;
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:3px;
    min-width:0;
  }
  .topbar-phones .tb-phone-link{
    min-width:0;
    padding:2px 0;
    font-size:10.5px;
    white-space:nowrap;
  }
  .topbar-phones .tb-phone-link > span:last-child{
    white-space:nowrap;
  }
  .tb-ic,.tb-wa{
    width:23px;
    height:23px;
    flex:0 0 23px;
  }
  .tb-ic svg,.tb-wa svg{
    width:13px;
    height:13px;
  }
  .tb-sep{
    margin:0 1px;
    flex:0 0 auto;
  }
  .topbar-email-item{
    font-size:10px;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .topbar-email-item a{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar-center{
    flex:0 0 auto;
  }
  .topbar-right{
    width:auto;
    flex:1 1 auto;
    gap:5px;
    flex-wrap:nowrap;
    justify-content:flex-end;
  }
  .lang-switch{
    padding:2px;
    gap:2px;
  }
  .lang-switch button{
    padding:4px 9px;
    font-size:10px;
  }
  .topbar-theme-item{
    width:30px;
    height:30px;
  }
  .live-clock{
    font-size:10px;
    padding:4px 7px;
    white-space:nowrap;
  }

  /* Keep every designer-credit item visible; allow clean wrapping
     instead of clipping the phone number on narrow screens. */
  .designer-credit{
    overflow:visible;
    padding:14px 0;
  }
  .designer-credit .dc-inner{
    width:100%;
    min-width:0;
    overflow:visible;
    gap:7px;
    padding-inline:12px;
    line-height:1.35;
  }
  .designer-credit .dc-label,
  .designer-credit .dc-name,
  .designer-credit a.dc-wa{
    flex:0 0 auto;
    max-width:100%;
  }
  .designer-credit a.dc-wa{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    white-space:nowrap;
    overflow:visible;
    padding:6px 11px;
  }
}
@media (max-width:380px){
  .topbar-info{
    gap:3px;
  }
  .topbar-phones{
    gap:2px;
  }
  .topbar-phones .tb-phone-link{
    font-size:9.5px;
  }
  .tb-ic,.tb-wa{
    width:21px;
    height:21px;
    flex-basis:21px;
  }
  .topbar-email-item{
    font-size:9px;
  }
  .live-clock{
    font-size:9px;
    padding-inline:5px;
  }
  .lang-switch button{
    padding-inline:7px;
  }
}

/* =========================================================
   V33 CARRY-ON — REQUESTED MOBILE FIXES ONLY
   Address must remain fully readable; cart text/buttons must
   render together on mobile without delayed paint.
   ========================================================= */
@media (max-width: 640px){
  /* Full English address: wrap instead of clipping/ellipsis. */
  .topbar-address-item{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.25 !important;
    height:auto !important;
    min-height:0 !important;
  }
  .topbar-address-item .addr-link{
    display:inline !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  /* Cart drawer opens as one stable layer on phones; no delayed text paint. */
  .cart-drawer{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
  }
  .cart-drawer .cart-foot .btn,
  .cart-drawer .cart-foot .btn span{
    opacity:1 !important;
    visibility:visible !important;
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
    contain:none !important;
  }
  .cart-drawer .cart-foot .btn span{
    display:inline !important;
  }
  .cart-drawer.open{
    transform:translate3d(0,0,0) !important;
  }
}


/* =========================================================
   V33 CARRY-ON — MOBILE VISIBILITY / ALIGNMENT SAFETY
   Only the specifically requested mobile fixes are scoped here.
   ========================================================= */
@media (max-width: 640px){
  /* Keep the English address fully readable on narrow screens. */
  .topbar-address-item,
  .topbar-address-item .addr-link,
  .topbar-address-item .js-shop-address{
    display:inline !important;
    width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  .topbar-address-item{
    line-height:1.3 !important;
    padding-block:1px !important;
  }

  /* The mobile cart footer paints as one stable layer: icon, button and text
     are visible together instead of waiting for a later repaint. */
  .cart-drawer .cart-foot,
  .cart-drawer .cart-foot .btn,
  .cart-drawer .cart-foot .btn span{
    opacity:1 !important;
    visibility:visible !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
    filter:none !important;
  }
  .cart-drawer .cart-foot .btn span{display:inline !important;}

  /* Compact bottom purchase controls on phones. */
  .product-detail-page .pd-sticky-buy{
    z-index:5000 !important;
    padding-bottom:max(7px, env(safe-area-inset-bottom)) !important;
    min-height:52px !important;
  }
  .product-detail-page .pd-sticky-buy-actions{
    gap:5px !important;
    width:100% !important;
  }
  .product-detail-page .pd-sticky-buy-actions .btn{
    min-height:34px !important;
    height:34px !important;
    padding:5px 7px !important;
    font-size:10.5px !important;
    line-height:1 !important;
    min-width:0 !important;
    flex:1 1 0 !important;
    white-space:nowrap !important;
  }

  /* Keep the product-page Up Arrow above the sticky purchase bar. */
  .product-detail-page #backTop{
    z-index:5005 !important;
    bottom:104px !important;
    width:38px !important;
    height:38px !important;
    opacity:0;
  }
  .product-detail-page #backTop.show{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Never let the designer phone/WhatsApp line disappear behind the fixed bar. */
  .product-detail-page footer{
    padding-bottom:145px !important;
  }
  .product-detail-page .designer-credit,
  .product-detail-page .designer-credit .dc-inner,
  .product-detail-page .designer-credit .dc-label,
  .product-detail-page .designer-credit .dc-name,
  .product-detail-page .designer-credit .dc-wa,
  .product-detail-page .designer-credit .brand-multicolor{
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
  }
  .product-detail-page .designer-credit .dc-inner{
    position:relative;
    z-index:5006 !important;
  }
}
@media (max-width:380px){
  .product-detail-page .pd-sticky-buy-actions .btn{
    font-size:10px !important;
    padding-inline:5px !important;
  }
}


/* =========================================================
   C2D BANNER — FIXED LOGO + ONE CARD PHONE/CUBE 3D MOTION
   Additive override: existing website components remain untouched.
   ========================================================= */
.c2d-phone-banner{position:relative;overflow:hidden;min-height:390px;border-radius:22px;background:linear-gradient(135deg,var(--card),var(--card-2));border:1px solid var(--border);box-shadow:var(--shadow);isolation:isolate;perspective:1400px;}
.c2d-phone-banner-stage{position:relative;min-height:350px;width:100%;overflow:hidden;display:flex;align-items:center;}
.c2d-banner-card-viewport{position:absolute;inset:22px 28px 22px 28px;overflow:visible;z-index:2;pointer-events:none;}
.c2d-banner-card-track{position:relative;width:100%;height:100%;min-height:306px;transform-style:preserve-3d;}
.c2d-banner-card{position:absolute;top:50%;width:min(58%,560px);min-height:250px;transform:translate3d(-125%, -50%, 0) rotateY(18deg) rotateX(2deg) scale(.94);transform-origin:center right;opacity:0;visibility:hidden;pointer-events:none;display:flex;align-items:center;gap:16px;padding:30px 30px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,242,252,.94));border:1px solid rgba(10,60,110,.12);box-shadow:0 26px 55px rgba(4,24,50,.22), inset 0 1px 0 rgba(255,255,255,.9);backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity;}
.c2d-banner-card-content{position:relative;z-index:2;min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.c2d-banner-card-h1{font-weight:950;font-size:clamp(25px,3vw,42px);line-height:1.05;letter-spacing:.4px;color:#07111f;margin-bottom:10px;}
.c2d-banner-card-h2{font-weight:850;font-size:clamp(16px,1.7vw,24px);line-height:1.3;color:#12365b;margin-bottom:14px;overflow-wrap:anywhere;}
.c2d-banner-card-address{font-size:clamp(11px,1.05vw,14px);line-height:1.55;color:#40536b;max-width:100%;overflow-wrap:anywhere;margin-bottom:8px;}
.c2d-banner-card-url{font-size:clamp(13px,1.3vw,18px);font-weight:900;color:#0878dc;letter-spacing:.2px;overflow-wrap:anywhere;}
.c2d-banner-card-image{flex:0 0 120px;max-width:26%;display:flex;justify-content:center;align-items:center;transform:translateZ(22px);}
.c2d-banner-card-image img{width:100%;height:auto;max-height:180px;object-fit:contain;border-radius:14px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.18));}
.c2d-banner-card-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.7) 45%,transparent 70%);transform:translateX(-120%);opacity:.65;}
.c2d-banner-card.is-current{opacity:1;visibility:visible;z-index:4;transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) scale(1);transition:transform .78s cubic-bezier(.18,.78,.2,1),opacity .42s ease,visibility 0s linear 0s;}
.c2d-banner-card.is-current .c2d-banner-card-sheen{animation:c2dBannerSheen 1.2s ease both .12s;}
.c2d-banner-card.is-in-left{opacity:0;visibility:visible;z-index:5;transform:translate3d(-125%,-50%,0) rotateY(18deg) rotateX(2deg) scale(.94);transition:none;}
.c2d-banner-card.is-in-right{opacity:0;visibility:visible;z-index:5;transform:translate3d(125%,-50%,0) rotateY(-18deg) rotateX(2deg) scale(.94);transition:none;}
.c2d-banner-card.is-out-right{opacity:0;visibility:visible;z-index:3;transform:translate3d(80%,-50%,0) rotateY(-34deg) rotateX(-5deg) scale(.72);transition:transform .82s cubic-bezier(.35,.02,.65,.99),opacity .72s ease,visibility 0s linear .82s;}
.c2d-banner-card.is-out-left{opacity:0;visibility:visible;z-index:3;transform:translate3d(-80%,-50%,0) rotateY(34deg) rotateX(-5deg) scale(.72);transition:transform .82s cubic-bezier(.35,.02,.65,.99),opacity .72s ease,visibility 0s linear .82s;}
.c2d-banner-card.is-hidden-complete{opacity:0!important;visibility:hidden!important;z-index:0;}
.c2d-banner-fixed-logo{position:absolute;z-index:10;right:8%;top:50%;width:clamp(170px,25vw,310px);height:clamp(170px,25vw,310px);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;}
.c2d-banner-fixed-logo img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(6,182,255,.25));}
.c2d-logo-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(6,182,255,.18),rgba(6,182,255,.05) 45%,transparent 70%);filter:blur(2px);z-index:1;}
.c2d-banner-card-viewport::after{content:"";position:absolute;top:8%;bottom:8%;right:calc(8% + clamp(70px,12vw,150px));width:120px;pointer-events:none;z-index:8;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),rgba(6,182,255,.1),transparent);filter:blur(10px);opacity:.65;}
.c2d-phone-banner-dots{position:absolute!important;left:50%;bottom:12px;transform:translateX(-50%);z-index:20;display:flex;gap:8px;align-items:center;justify-content:center;min-height:14px;}
.c2d-phone-banner-dots .c2d-banner-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(70,90,115,.32);box-shadow:none;cursor:pointer;transition:transform .22s ease,background .22s ease,box-shadow .22s ease;}
.c2d-phone-banner-dots .c2d-banner-dot.active{background:var(--blue);transform:scale(1.35);box-shadow:0 0 0 4px rgba(6,182,255,.14);}
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card{transform:translate3d(125%,-50%,0) rotateY(-18deg) rotateX(2deg) scale(.94);transform-origin:center left;}
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-current{transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) scale(1);}
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-left{transform:translate3d(-80%,-50%,0) rotateY(34deg) rotateX(-5deg) scale(.72);}
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-right{transform:translate3d(125%,-50%,0) rotateY(-18deg) rotateX(2deg) scale(.94);}
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-left{transform:translate3d(-125%,-50%,0) rotateY(18deg) rotateX(2deg) scale(.94);}
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-right{transform:translate3d(80%,-50%,0) rotateY(-34deg) rotateX(-5deg) scale(.72);}
body.lang-ur .c2d-banner-card-content{align-items:flex-end;text-align:right;direction:rtl;}
body.lang-ur .c2d-banner-card{direction:rtl;}
@keyframes c2dBannerSheen{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (max-width:980px){
  .c2d-phone-banner{min-height:360px}.c2d-phone-banner-stage{min-height:320px}.c2d-banner-card{width:min(62%,520px);padding:25px 24px}.c2d-banner-fixed-logo{right:5%;width:clamp(150px,24vw,250px);height:clamp(150px,24vw,250px)}
}
@media (max-width:760px){
  .c2d-phone-banner{min-height:430px;border-radius:18px}.c2d-phone-banner-stage{min-height:390px;align-items:flex-end}.c2d-banner-card-viewport{inset:18px 14px 60px}.c2d-banner-card{top:52%;width:78%;min-height:220px;padding:20px 18px;border-radius:20px;gap:10px}.c2d-banner-fixed-logo{right:7%;top:19%;width:145px;height:145px;transform:none}.c2d-banner-card-h1{font-size:24px}.c2d-banner-card-h2{font-size:15px}.c2d-banner-card-address{font-size:11px}.c2d-banner-card-url{font-size:14px}.c2d-banner-card-image{flex-basis:78px}.c2d-banner-card-image img{max-height:110px}.c2d-banner-card-viewport::after{display:none}.c2d-phone-banner-dots{bottom:12px}
}
@media (max-width:420px){
  .c2d-phone-banner{min-height:450px}.c2d-phone-banner-stage{min-height:410px}.c2d-banner-fixed-logo{right:5%;width:120px;height:120px}.c2d-banner-card{width:88%;top:54%;min-height:225px;padding:18px 15px}.c2d-banner-card-h1{font-size:22px}.c2d-banner-card-h2{font-size:14px}.c2d-banner-card-address{font-size:10.5px}.c2d-banner-card-url{font-size:13px}.c2d-banner-card-image{display:none}
}
@media (prefers-reduced-motion:reduce){.c2d-banner-card,.c2d-banner-card-sheen{transition:none!important;animation:none!important}.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card,.c2d-banner-card{transform:translate3d(0,-50%,0)!important}.c2d-banner-card:not(.is-current){display:none}.c2d-banner-dot{transition:none!important}}

/* Banner transition presets — all remain inside the same safe card engine. */
.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-card.is-out-right,.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-card.is-out-left{transform:translate3d(0,-50%,0) scale(.98);}
.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-card.is-in-left,.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-card.is-in-right{transform:translate3d(0,-50%,0) scale(1.02);}
.c2d-phone-banner[data-transition="tumble"] .c2d-banner-card.is-out-right{transform:translate3d(70%,-50%,0) rotateY(-48deg) rotateZ(8deg) scale(.72);}
.c2d-phone-banner[data-transition="tumble"] .c2d-banner-card.is-out-left{transform:translate3d(-70%,-50%,0) rotateY(48deg) rotateZ(-8deg) scale(.72);}
.c2d-phone-banner[data-transition="page"] .c2d-banner-card.is-out-right{transform:translate3d(90%,-50%,0) rotateY(-82deg) scale(.82);}
.c2d-phone-banner[data-transition="page"] .c2d-banner-card.is-out-left{transform:translate3d(-90%,-50%,0) rotateY(82deg) scale(.82);}
.c2d-phone-banner[data-transition="cascade"] .c2d-banner-card.is-out-right{transform:translate3d(70%,-58%,0) rotateY(-25deg) rotateZ(3deg) scale(.74);}
.c2d-phone-banner[data-transition="cascade"] .c2d-banner-card.is-out-left{transform:translate3d(-70%,-42%,0) rotateY(25deg) rotateZ(-3deg) scale(.74);}
.c2d-phone-banner[data-transition="rotate"] .c2d-banner-card.is-out-right{transform:translate3d(60%,-50%,0) rotateY(-55deg) rotateZ(18deg) scale(.78);}
.c2d-phone-banner[data-transition="rotate"] .c2d-banner-card.is-out-left{transform:translate3d(-60%,-50%,0) rotateY(55deg) rotateZ(-18deg) scale(.78);}
.c2d-phone-banner[data-transition="cute"] .c2d-banner-card.is-out-right{transform:translate3d(62%,-56%,0) rotateZ(6deg) scale(.82);}
.c2d-phone-banner[data-transition="cute"] .c2d-banner-card.is-out-left{transform:translate3d(-62%,-44%,0) rotateZ(-6deg) scale(.82);}
.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-card.is-current,.c2d-phone-banner[data-transition="tumble"] .c2d-banner-card.is-current,.c2d-phone-banner[data-transition="page"] .c2d-banner-card.is-current,.c2d-phone-banner[data-transition="cascade"] .c2d-banner-card.is-current,.c2d-phone-banner[data-transition="rotate"] .c2d-banner-card.is-current,.c2d-phone-banner[data-transition="cute"] .c2d-banner-card.is-current{transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);}
body.lang-ur .c2d-phone-banner .c2d-banner-card{left:34%;right:auto;}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card{left:0;right:auto;}
@media(max-width:760px){body.lang-ur .c2d-phone-banner .c2d-banner-card{left:7%;right:auto;}body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card{left:0;right:auto;}}

/* =========================================================
   V33 Phone/Cube 3D — merge INTO fixed logo (EN L→R / UR R→L)
   Logo stays fixed; cards travel toward it and disappear behind it.
   ========================================================= */

/* Fixed logo — EN right, UR left */
body:not(.lang-ur) .c2d-banner-fixed-logo{
  right: 4% !important;
  left: auto !important;
}
body.lang-ur .c2d-banner-fixed-logo{
  left: 4% !important;
  right: auto !important;
}
.c2d-banner-fixed-logo{
  z-index: 12 !important;
  width: clamp(160px, 24vw, 300px) !important;
  height: clamp(160px, 24vw, 300px) !important;
  pointer-events: none !important;
}
.c2d-banner-fixed-logo img{
  filter: drop-shadow(0 16px 32px rgba(6,182,255,.30)) !important;
}

/* Card stage positioning */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card{
  left: 4% !important;
  right: auto !important;
  width: min(54%, 520px) !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card{
  left: auto !important;
  right: 4% !important;
  width: min(54%, 520px) !important;
}

/* Phone/Cube 3D default exit — deep into logo zone + scale down */
.c2d-phone-banner[data-transition="phone-cube-3d"] .c2d-banner-card.is-out-right,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 2 !important;
  transform: translate3d(78%, -50%, -80px) rotateY(-42deg) rotateX(-8deg) scale(.38) !important;
  transition: transform .88s cubic-bezier(.32,.02,.58,1), opacity .7s ease .08s, visibility 0s linear .9s !important;
  filter: blur(1px);
}
.c2d-phone-banner[data-transition="phone-cube-3d"] .c2d-banner-card.is-out-left,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 2 !important;
  transform: translate3d(-78%, -50%, -80px) rotateY(42deg) rotateX(-8deg) scale(.38) !important;
  transition: transform .88s cubic-bezier(.32,.02,.58,1), opacity .7s ease .08s, visibility 0s linear .9s !important;
  filter: blur(1px);
}

/* Enter from correct side */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left{
  opacity: 0 !important;
  transform: translate3d(-120%, -50%, 40px) rotateY(22deg) rotateX(4deg) scale(.9) !important;
  transition: none !important;
  z-index: 6 !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right{
  opacity: 0 !important;
  transform: translate3d(120%, -50%, 40px) rotateY(-22deg) rotateX(4deg) scale(.9) !important;
  transition: none !important;
  z-index: 6 !important;
}

/* Settled current card */
.c2d-phone-banner .c2d-banner-card.is-current{
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  transform: translate3d(0, -50%, 0) rotateY(0) rotateX(0) scale(1) !important;
  filter: none !important;
  transition: transform .78s cubic-bezier(.18,.78,.2,1), opacity .4s ease !important;
}

/* Light/dark card surfaces matching site */
body[data-theme="light"] .c2d-banner-card,
html[data-theme="light"] .c2d-banner-card{
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,244,255,.95)) !important;
  border: 1px solid rgba(10,60,110,.10) !important;
  box-shadow: 0 22px 48px rgba(4,24,50,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
body[data-theme="dark"] .c2d-banner-card,
html[data-theme="dark"] .c2d-banner-card{
  background: linear-gradient(145deg, rgba(18,28,48,.96), rgba(10,18,34,.94)) !important;
  border: 1px solid rgba(6,182,255,.22) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body[data-theme="dark"] .c2d-banner-card-h1{ color: #f0f7ff !important; }
body[data-theme="dark"] .c2d-banner-card-h2{ color: #9ecfff !important; }
body[data-theme="dark"] .c2d-banner-card-address{ color: #a8b8cc !important; }
body[data-theme="dark"] .c2d-banner-card-url{ color: #38bdf8 !important; }

/* Gradient H1 accent */
.c2d-banner-card-h1{
  background: linear-gradient(90deg, #06B6FF, #a855f7 55%, #ec4899) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Dots */
.c2d-phone-banner-dots{
  bottom: 14px !important;
  z-index: 20 !important;
}
.c2d-phone-banner-dots .c2d-banner-dot.active{
  background: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(6,182,255,.18) !important;
}

/* Mobile */
@media (max-width: 760px){
  .c2d-phone-banner{ min-height: 420px !important; }
  .c2d-phone-banner-stage{ min-height: 380px !important; flex-direction: column !important; justify-content: center !important; }
  .c2d-banner-fixed-logo{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: clamp(120px, 42vw, 180px) !important;
    height: clamp(120px, 42vw, 180px) !important;
    margin: 8px auto 4px !important;
    order: -1;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card{
    left: 50% !important;
    right: auto !important;
    width: min(92%, 360px) !important;
    min-height: 200px !important;
    transform: translate3d(-50%, -50%, 0) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left{
    transform: translate3d(-150%, -50%, 0) scale(.9) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right{
    transform: translate3d(50%, -50%, 0) scale(.9) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right{
    transform: translate3d(-50%, -50%, 0) scale(.3) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left{
    transform: translate3d(-50%, -50%, 0) scale(.3) !important;
  }
  .c2d-banner-card-content{ align-items: center !important; text-align: center !important; }
  body.lang-ur .c2d-banner-card-content{ align-items: center !important; text-align: center !important; }
  .c2d-banner-card-h1{ font-size: clamp(20px, 6vw, 28px) !important; }
  .c2d-banner-card-h2{ font-size: clamp(13px, 3.6vw, 16px) !important; }
  .c2d-banner-card-address{ font-size: 11px !important; }
  .c2d-banner-card-url{ font-size: 13px !important; }
  .c2d-banner-card-viewport{ inset: 12px 10px 40px 10px !important; }
}

/* =========================================================
   V33 Banner size restore — logo + cards like previous size
   Dots bottom · all-screen alignment · data-safe CSS only
   ========================================================= */

/* Banner stage height matches larger logo */
.c2d-phone-banner{
  min-height: 420px !important;
  padding-bottom: 8px !important;
}
.c2d-phone-banner-stage{
  min-height: 380px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* C2D Logo — previous larger size (like original banner-visual) */
.c2d-banner-fixed-logo{
  position: absolute !important;
  z-index: 12 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(220px, 32vw, 400px) !important;
  height: clamp(220px, 32vw, 400px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}
body:not(.lang-ur) .c2d-banner-fixed-logo{
  right: 3% !important;
  left: auto !important;
}
body.lang-ur .c2d-banner-fixed-logo{
  left: 3% !important;
  right: auto !important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 36px rgba(6,182,255,.30)) !important;
}
.c2d-logo-halo{
  inset: 2% !important;
}

/* Slider cards — balanced to logo size */
.c2d-banner-card-viewport{
  inset: 28px 28px 48px 28px !important;
  z-index: 2 !important;
}
.c2d-banner-card-track{
  min-height: 320px !important;
}
.c2d-banner-card{
  width: min(52%, 540px) !important;
  min-height: 260px !important;
  padding: 28px 30px !important;
  border-radius: 22px !important;
  top: 50% !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card{
  left: 3% !important;
  right: auto !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card{
  left: auto !important;
  right: 3% !important;
}
.c2d-banner-card-h1{
  font-size: clamp(24px, 2.8vw, 38px) !important;
  margin-bottom: 10px !important;
}
.c2d-banner-card-h2{
  font-size: clamp(15px, 1.6vw, 22px) !important;
  margin-bottom: 12px !important;
}
.c2d-banner-card-address{
  font-size: clamp(12px, 1.1vw, 14px) !important;
  margin-bottom: 8px !important;
}
.c2d-banner-card-url{
  font-size: clamp(14px, 1.3vw, 18px) !important;
}

/* Dots — always bottom center under banner */
.c2d-phone-banner-dots,
.c2d-banner-dots.c2d-phone-banner-dots{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 14px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.c2d-phone-banner-dots .c2d-banner-dot{
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(70,90,115,.35) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.c2d-phone-banner-dots .c2d-banner-dot.active{
  width: 22px !important;
  border-radius: 999px !important;
  background: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(6,182,255,.16) !important;
  transform: none !important;
}

/* ---- Tablet ---- */
@media (max-width: 1024px){
  .c2d-phone-banner{ min-height: 400px !important; }
  .c2d-phone-banner-stage{ min-height: 360px !important; }
  .c2d-banner-fixed-logo{
    width: clamp(200px, 30vw, 320px) !important;
    height: clamp(200px, 30vw, 320px) !important;
  }
  .c2d-banner-card{
    width: min(54%, 480px) !important;
    min-height: 240px !important;
    padding: 24px 26px !important;
  }
}

/* ---- Mobile / small tablets ---- */
@media (max-width: 820px){
  .c2d-phone-banner{
    min-height: 480px !important;
    padding-bottom: 10px !important;
  }
  .c2d-phone-banner-stage{
    min-height: 440px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 16px !important;
  }
  /* Logo on top, previous-proportion size */
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: clamp(180px, 48vw, 260px) !important;
    height: clamp(180px, 48vw, 260px) !important;
    margin: 0 auto 8px !important;
    order: -1 !important;
  }
  .c2d-banner-card-viewport{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 220px !important;
    padding: 8px 14px 44px !important;
  }
  .c2d-banner-card-track{
    min-height: 210px !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card{
    left: 50% !important;
    right: auto !important;
    width: min(92%, 380px) !important;
    min-height: 200px !important;
    padding: 20px 18px !important;
    top: 50% !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left{
    transform: translate3d(-160%, -50%, 0) scale(.92) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right{
    transform: translate3d(60%, -50%, 0) scale(.92) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left{
    transform: translate3d(-50%, -50%, 0) scale(.28) !important;
  }
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-card-content{
    align-items: center !important;
    text-align: center !important;
  }
  .c2d-banner-card-h1{ font-size: clamp(20px, 5.5vw, 26px) !important; }
  .c2d-banner-card-h2{ font-size: clamp(13px, 3.5vw, 16px) !important; }
  .c2d-banner-card-address{ font-size: 11px !important; }
  .c2d-banner-card-url{ font-size: 13px !important; }
  .c2d-phone-banner-dots{
    bottom: 12px !important;
  }
}

/* ---- Small phones ---- */
@media (max-width: 420px){
  .c2d-phone-banner{ min-height: 460px !important; }
  .c2d-phone-banner-stage{ min-height: 420px !important; }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    width: clamp(150px, 52vw, 200px) !important;
    height: clamp(150px, 52vw, 200px) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card{
    width: min(94%, 340px) !important;
    min-height: 185px !important;
    padding: 16px 14px !important;
  }
  .c2d-banner-card-h1{ font-size: 19px !important; }
  .c2d-banner-card-h2{ font-size: 13px !important; }
  .c2d-banner-card-address{ font-size: 10.5px !important; }
  .c2d-banner-card-url{ font-size: 12px !important; }
}

/* =========================================================
   V33 FINAL BANNER — match reference screenshot layout
   Large C2D logo LEFT (EN) / RIGHT (UR) · large content card
   opposite side · dots bottom · all-screen responsive
   Data-safe CSS only — no data/product/admin changes
   ========================================================= */

.c2d-phone-banner{
  position: relative !important;
  overflow: hidden !important;
  min-height: 360px !important;
  border-radius: 22px !important;
  isolation: isolate !important;
}
.c2d-phone-banner-stage{
  position: relative !important;
  min-height: 340px !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 28px 40px !important;
  box-sizing: border-box !important;
}

/* ---- Fixed C2D Logo — large like reference image ---- */
.c2d-banner-fixed-logo{
  position: absolute !important;
  z-index: 12 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(240px, 34vw, 420px) !important;
  height: clamp(240px, 34vw, 420px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  margin: 0 !important;
}
/* EN: logo LEFT (matches reference screenshot) */
body:not(.lang-ur) .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo{
  left: 4% !important;
  right: auto !important;
}
/* UR: logo RIGHT (mirror) */
body.lang-ur .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
  right: 4% !important;
  left: auto !important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 40px rgba(6,182,255,.32)) !important;
}
.c2d-logo-halo{
  inset: 0% !important;
  opacity: .9 !important;
}

/* ---- Card viewport ---- */
.c2d-banner-card-viewport{
  position: absolute !important;
  inset: 20px 20px 44px 20px !important;
  overflow: visible !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.c2d-banner-card-track{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  transform-style: preserve-3d !important;
}

/* ---- Content cards — large, balanced with logo ---- */
.c2d-banner-card{
  position: absolute !important;
  top: 50% !important;
  width: min(48%, 520px) !important;
  min-height: 240px !important;
  padding: 28px 30px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}
/* EN: card on RIGHT of logo */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card{
  left: auto !important;
  right: 3% !important;
  transform-origin: center left !important;
}
/* UR: card on LEFT of logo */
body.lang-ur .c2d-phone-banner .c2d-banner-card,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card{
  left: 3% !important;
  right: auto !important;
  transform-origin: center right !important;
}

/* Current state — centered in its half */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-current{
  transform: translate3d(0, -50%, 0) rotateY(0) rotateX(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-current{
  transform: translate3d(0, -50%, 0) rotateY(0) rotateX(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
}

/* EN: enter from right, exit left into logo */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-right{
  transform: translate3d(110%, -50%, 0) rotateY(-16deg) scale(.94) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-left{
  transform: translate3d(-70%, -50%, 0) rotateY(28deg) scale(.7) !important;
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 4 !important;
}

/* UR: enter from left, exit right into logo */
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-left{
  transform: translate3d(-110%, -50%, 0) rotateY(16deg) scale(.94) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-right{
  transform: translate3d(70%, -50%, 0) rotateY(-28deg) scale(.7) !important;
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 4 !important;
}

.c2d-banner-card-content{
  min-width: 0 !important;
  flex: 1 !important;
}
body:not(.lang-ur) .c2d-banner-card-content{
  align-items: flex-start !important;
  text-align: left !important;
}
body.lang-ur .c2d-banner-card-content{
  align-items: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}
.c2d-banner-card-h1{
  font-weight: 950 !important;
  font-size: clamp(22px, 2.6vw, 36px) !important;
  line-height: 1.1 !important;
  color: #07111f !important;
  margin: 0 0 10px !important;
}
.c2d-banner-card-h2{
  font-weight: 800 !important;
  font-size: clamp(14px, 1.5vw, 20px) !important;
  line-height: 1.35 !important;
  color: #12365b !important;
  margin: 0 0 12px !important;
}
.c2d-banner-card-address{
  font-size: clamp(11px, 1.05vw, 13px) !important;
  line-height: 1.5 !important;
  color: #40536b !important;
  margin: 0 0 8px !important;
}
.c2d-banner-card-url{
  font-size: clamp(13px, 1.25vw, 17px) !important;
  font-weight: 900 !important;
  color: #0878dc !important;
  margin: 0 !important;
}

/* Hide merge gradient artifact that can clip logo */
.c2d-banner-card-viewport::after{ display: none !important; }

/* ---- Dots — bottom center ---- */
.c2d-phone-banner-dots,
.c2d-banner-dots.c2d-phone-banner-dots{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 12px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}
.c2d-phone-banner-dots .c2d-banner-dot{
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(70,90,115,.35) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.c2d-phone-banner-dots .c2d-banner-dot.active{
  width: 22px !important;
  border-radius: 999px !important;
  background: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(6,182,255,.16) !important;
  transform: none !important;
}

/* ---- Tablet ---- */
@media (max-width: 1024px){
  .c2d-phone-banner{ min-height: 340px !important; }
  .c2d-phone-banner-stage{ min-height: 320px !important; padding: 20px 22px 38px !important; }
  .c2d-banner-fixed-logo{
    width: clamp(200px, 32vw, 340px) !important;
    height: clamp(200px, 32vw, 340px) !important;
  }
  .c2d-banner-card{
    width: min(50%, 440px) !important;
    min-height: 210px !important;
    padding: 22px 24px !important;
  }
}

/* ---- Mobile: logo top, card below, dots under ---- */
@media (max-width: 820px){
  .c2d-phone-banner{
    min-height: 0 !important;
  }
  .c2d-phone-banner-stage{
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 14px 42px !important;
    gap: 6px !important;
  }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: clamp(170px, 52vw, 240px) !important;
    height: clamp(170px, 52vw, 240px) !important;
    margin: 0 auto 4px !important;
    order: -1 !important;
  }
  .c2d-banner-card-viewport{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 200px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  .c2d-banner-card-track{
    min-height: 190px !important;
    height: 190px !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-card,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-card{
    left: 50% !important;
    right: auto !important;
    width: min(94%, 380px) !important;
    min-height: 170px !important;
    padding: 18px 16px !important;
    top: 50% !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-current,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-current{
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-right,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-right{
    transform: translate3d(60%, -50%, 0) scale(.92) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-left,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-left{
    transform: translate3d(-50%, -50%, 0) scale(.25) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-left,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-left{
    transform: translate3d(-160%, -50%, 0) scale(.92) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-right,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-right{
    transform: translate3d(-50%, -50%, 0) scale(.25) !important;
  }
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-card-content{
    align-items: center !important;
    text-align: center !important;
  }
  .c2d-banner-card-h1{ font-size: clamp(18px, 5.2vw, 24px) !important; }
  .c2d-banner-card-h2{ font-size: clamp(12px, 3.4vw, 15px) !important; }
  .c2d-banner-card-address{ font-size: 11px !important; }
  .c2d-banner-card-url{ font-size: 13px !important; }
  .c2d-phone-banner-dots{ bottom: 10px !important; }
}

/* ---- Small phones ---- */
@media (max-width: 420px){
  .c2d-phone-banner-stage{ padding: 14px 10px 40px !important; }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    width: clamp(140px, 56vw, 190px) !important;
    height: clamp(140px, 56vw, 190px) !important;
  }
  .c2d-banner-card-track{ min-height: 175px !important; height: 175px !important; }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card{
    width: min(96%, 340px) !important;
    min-height: 155px !important;
    padding: 14px 12px !important;
  }
  .c2d-banner-card-h1{ font-size: 17px !important; }
  .c2d-banner-card-h2{ font-size: 12px !important; }
  .c2d-banner-card-address{ font-size: 10px !important; }
  .c2d-banner-card-url{ font-size: 12px !important; }
}

/* =========================================================
   V33 BANNER — BIG SIZE RESTORE (original evening logo scale)
   Logo = previous perfect size clamp(240px, 40vw, 420px)
   Cards same visual weight, centered in content area
   Dots center-bottom under logo+cards
   All screens responsive · data-safe CSS only
   ========================================================= */

/* Bigger banner stage */
.c2d-phone-banner{
  min-height: 480px !important;
  padding: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}
.c2d-phone-banner-stage{
  min-height: 450px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 32px 48px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

/* C2D Logo — ORIGINAL large size (same as old .banner-visual img) */
.c2d-banner-fixed-logo{
  position: absolute !important;
  z-index: 15 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: clamp(240px, 40vw, 420px) !important;
  max-width: 46% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  margin: 0 !important;
}
body:not(.lang-ur) .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo{
  left: 3% !important;
  right: auto !important;
}
body.lang-ur .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
  right: 3% !important;
  left: auto !important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 36px rgba(6,182,255,.30)) !important;
}
.c2d-logo-halo{
  inset: -2% !important;
  opacity: 1 !important;
}

/* Card viewport fills stage */
.c2d-banner-card-viewport{
  position: absolute !important;
  inset: 24px 24px 52px 24px !important;
  z-index: 4 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.c2d-banner-card-track{
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
  position: relative !important;
}

/* Slider cards — same visual scale as logo, centered in free area */
.c2d-banner-card{
  position: absolute !important;
  top: 50% !important;
  width: min(46%, 520px) !important;
  min-height: clamp(220px, 32vw, 360px) !important;
  padding: 32px 34px !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* EN: card centered in right half */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card{
  left: 52% !important;
  right: auto !important;
  transform: translate3d(0, -50%, 0) !important;
}
/* UR: card centered in left half */
body.lang-ur .c2d-phone-banner .c2d-banner-card,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card{
  left: auto !important;
  right: 52% !important;
  transform: translate3d(0, -50%, 0) !important;
}

body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-current{
  transform: translate3d(0, -50%, 0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-current{
  transform: translate3d(0, -50%, 0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
}

/* EN motion: enter right → exit left into logo */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-right{
  transform: translate3d(120%, -50%, 0) scale(.92) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-left{
  transform: translate3d(-90%, -50%, 0) scale(.65) !important;
  opacity: 0 !important;
  visibility: visible !important;
}

/* UR motion: enter left → exit right into logo */
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-left{
  transform: translate3d(-120%, -50%, 0) scale(.92) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-right{
  transform: translate3d(90%, -50%, 0) scale(.65) !important;
  opacity: 0 !important;
  visibility: visible !important;
}

.c2d-banner-card-content{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body:not(.lang-ur) .c2d-banner-card-content{
  align-items: flex-start !important;
  text-align: left !important;
}
body.lang-ur .c2d-banner-card-content{
  align-items: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}
.c2d-banner-card-h1{
  font-size: clamp(24px, 2.8vw, 40px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
  color: #07111f !important;
}
.c2d-banner-card-h2{
  font-size: clamp(15px, 1.6vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 14px !important;
  color: #12365b !important;
}
.c2d-banner-card-address{
  font-size: clamp(12px, 1.1vw, 14px) !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
  color: #40536b !important;
}
.c2d-banner-card-url{
  font-size: clamp(14px, 1.3vw, 18px) !important;
  font-weight: 900 !important;
  margin: 0 !important;
  color: #0878dc !important;
}
.c2d-banner-card-viewport::after{ display: none !important; }

/* Dots — center bottom under logo + cards */
.c2d-phone-banner-dots,
.c2d-banner-dots.c2d-phone-banner-dots{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 14px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  pointer-events: auto !important;
}
.c2d-phone-banner-dots .c2d-banner-dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(70,90,115,.38) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  transition: width .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.c2d-phone-banner-dots .c2d-banner-dot.active{
  width: 24px !important;
  border-radius: 999px !important;
  background: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(6,182,255,.18) !important;
  transform: none !important;
}

/* ---- Tablet ---- */
@media (max-width: 1024px){
  .c2d-phone-banner{ min-height: 440px !important; }
  .c2d-phone-banner-stage{ min-height: 410px !important; padding: 24px 24px 46px !important; }
  .c2d-banner-fixed-logo{
    height: clamp(220px, 36vw, 360px) !important;
    max-width: 44% !important;
  }
  .c2d-banner-card{
    width: min(48%, 460px) !important;
    min-height: clamp(200px, 28vw, 300px) !important;
    padding: 26px 28px !important;
  }
  .c2d-banner-card-track{ min-height: 340px !important; }
}

/* ---- Mobile: stacked, logo big on top, card center, dots bottom ---- */
@media (max-width: 820px){
  .c2d-phone-banner{ min-height: 0 !important; }
  .c2d-phone-banner-stage{
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 20px 14px 46px !important;
    gap: 8px !important;
  }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    height: clamp(200px, 55vw, 280px) !important;
    width: auto !important;
    max-width: 78% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 6px !important;
    order: -1 !important;
  }
  .c2d-banner-card-viewport{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 210px !important;
    height: auto !important;
  }
  .c2d-banner-card-track{
    min-height: 200px !important;
    height: 200px !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-card,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-card{
    left: 50% !important;
    right: auto !important;
    width: min(94%, 400px) !important;
    min-height: 180px !important;
    padding: 20px 18px !important;
    top: 50% !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-right{
    transform: translate3d(70%, -50%, 0) scale(.9) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-left{
    transform: translate3d(-50%, -50%, 0) scale(.2) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-left{
    transform: translate3d(-170%, -50%, 0) scale(.9) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-right{
    transform: translate3d(-50%, -50%, 0) scale(.2) !important;
  }
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-card-content{
    align-items: center !important;
    text-align: center !important;
  }
  .c2d-banner-card-h1{ font-size: clamp(20px, 5.5vw, 26px) !important; }
  .c2d-banner-card-h2{ font-size: clamp(13px, 3.6vw, 16px) !important; }
  .c2d-banner-card-address{ font-size: 11px !important; }
  .c2d-banner-card-url{ font-size: 13px !important; }
  .c2d-phone-banner-dots{ bottom: 12px !important; }
}

/* ---- Small phones ---- */
@media (max-width: 420px){
  .c2d-phone-banner-stage{ padding: 16px 10px 44px !important; }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    height: clamp(170px, 58vw, 220px) !important;
    max-width: 82% !important;
  }
  .c2d-banner-card-track{ min-height: 180px !important; height: 180px !important; }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card{
    width: min(96%, 360px) !important;
    min-height: 160px !important;
    padding: 16px 14px !important;
  }
  .c2d-banner-card-h1{ font-size: 18px !important; }
  .c2d-banner-card-h2{ font-size: 13px !important; }
  .c2d-banner-card-address{ font-size: 10.5px !important; }
  .c2d-banner-card-url{ font-size: 12px !important; }
}

/* =========================================================
   V33 BANNER — FINAL SPEC (user requirements)
   • Bigger banner
   • Logo ALWAYS RIGHT (EN + UR), previous perfect size
   • Cards same scale, left of logo, minimal gap
   • EN L→R into logo · UR R→L
   • Dots center-bottom
   • CSS variables for Admin size control
   ========================================================= */

:root{
  --c2d-banner-min-h: 460px;
  --c2d-banner-pad-y: 28px;
  --c2d-banner-pad-x: 28px;
  --c2d-logo-h: clamp(240px, 38vw, 400px);
  --c2d-logo-max-w: 42%;
  --c2d-logo-right: 3%;
  --c2d-card-w: min(48%, 540px);
  --c2d-card-min-h: clamp(220px, 30vw, 340px);
  --c2d-card-pad: 30px 32px;
  --c2d-card-left: 4%;
  --c2d-dots-bottom: 14px;
  --c2d-dots-size: 10px;
  --c2d-dots-active-w: 24px;
  --c2d-banner-gap: 12px;
}

.c2d-phone-banner{
  position: relative !important;
  overflow: hidden !important;
  min-height: var(--c2d-banner-min-h) !important;
  border-radius: 22px !important;
  isolation: isolate !important;
}
.c2d-phone-banner-stage{
  position: relative !important;
  min-height: calc(var(--c2d-banner-min-h) - 20px) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: var(--c2d-banner-pad-y) var(--c2d-banner-pad-x) calc(var(--c2d-banner-pad-y) + 18px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Logo — ALWAYS RIGHT, previous perfect scale */
.c2d-banner-fixed-logo,
body:not(.lang-ur) .c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
  position: absolute !important;
  z-index: 16 !important;
  top: 50% !important;
  right: var(--c2d-logo-right) !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: var(--c2d-logo-h) !important;
  max-width: var(--c2d-logo-max-w) !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  margin: 0 !important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 36px rgba(6,182,255,.30)) !important;
}
.c2d-logo-halo{ inset: -2% !important; opacity: 1 !important; }

/* Card viewport */
.c2d-banner-card-viewport{
  position: absolute !important;
  inset: 20px calc(var(--c2d-logo-max-w) + var(--c2d-banner-gap)) 48px 16px !important;
  z-index: 5 !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.c2d-banner-card-track{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: calc(var(--c2d-banner-min-h) - 80px) !important;
}

/* Cards — same visual scale, left area, minimal gap to logo */
.c2d-banner-card,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
body.lang-ur .c2d-phone-banner .c2d-banner-card,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card{
  position: absolute !important;
  top: 50% !important;
  left: var(--c2d-card-left) !important;
  right: auto !important;
  width: var(--c2d-card-w) !important;
  min-height: var(--c2d-card-min-h) !important;
  padding: var(--c2d-card-pad) !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  transform-origin: center right !important;
}

/* Current */
.c2d-banner-card.is-current,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
  transform: translate3d(0, -50%, 0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 7 !important;
}

/* EN L→R: enter left, exit right into logo */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-left{
  transform: translate3d(-120%, -50%, 0) rotateY(14deg) scale(.92) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-right{
  transform: translate3d(85%, -50%, 0) rotateY(-30deg) scale(.68) !important;
  opacity: 0 !important;
  visibility: visible !important;
}

/* UR R→L: enter right, exit left */
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-right{
  transform: translate3d(120%, -50%, 0) rotateY(-14deg) scale(.92) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-left{
  transform: translate3d(-85%, -50%, 0) rotateY(30deg) scale(.68) !important;
  opacity: 0 !important;
  visibility: visible !important;
}

.c2d-banner-card-content{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body:not(.lang-ur) .c2d-banner-card-content{
  align-items: flex-start !important;
  text-align: left !important;
  direction: ltr !important;
}
body.lang-ur .c2d-banner-card-content{
  align-items: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}
.c2d-banner-card-h1{
  font-size: clamp(24px, 2.7vw, 38px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
  color: #07111f !important;
}
.c2d-banner-card-h2{
  font-size: clamp(15px, 1.55vw, 21px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
  color: #12365b !important;
}
.c2d-banner-card-address{
  font-size: clamp(12px, 1.05vw, 14px) !important;
  line-height: 1.5 !important;
  margin: 0 0 8px !important;
  color: #40536b !important;
}
.c2d-banner-card-url{
  font-size: clamp(14px, 1.25vw, 17px) !important;
  font-weight: 900 !important;
  margin: 0 !important;
  color: #0878dc !important;
}
.c2d-banner-card-viewport::after{ display: none !important; }

/* Dots — center-bottom */
.c2d-phone-banner-dots,
.c2d-banner-dots.c2d-phone-banner-dots{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: var(--c2d-dots-bottom) !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  pointer-events: auto !important;
}
.c2d-phone-banner-dots .c2d-banner-dot{
  width: var(--c2d-dots-size) !important;
  height: var(--c2d-dots-size) !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(70,90,115,.38) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.c2d-phone-banner-dots .c2d-banner-dot.active{
  width: var(--c2d-dots-active-w) !important;
  border-radius: 999px !important;
  background: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(6,182,255,.18) !important;
  transform: none !important;
}

/* Tablet */
@media (max-width: 1024px){
  :root{
    --c2d-banner-min-h: 420px;
    --c2d-logo-h: clamp(200px, 34vw, 340px);
    --c2d-logo-max-w: 40%;
    --c2d-card-w: min(50%, 460px);
    --c2d-card-min-h: clamp(200px, 26vw, 300px);
  }
}

/* Mobile stack */
@media (max-width: 820px){
  :root{
    --c2d-banner-min-h: 0px;
    --c2d-logo-h: clamp(190px, 52vw, 260px);
    --c2d-logo-max-w: 78%;
    --c2d-card-w: min(94%, 400px);
    --c2d-card-min-h: 180px;
    --c2d-card-pad: 20px 18px;
  }
  .c2d-phone-banner{ min-height: 0 !important; }
  .c2d-phone-banner-stage{
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 14px 46px !important;
    gap: 8px !important;
  }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    height: var(--c2d-logo-h) !important;
    max-width: var(--c2d-logo-max-w) !important;
    margin: 0 auto 6px !important;
    order: -1 !important;
  }
  .c2d-banner-card-viewport{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 200px !important;
  }
  .c2d-banner-card-track{
    min-height: 190px !important;
    height: 190px !important;
  }
  .c2d-banner-card,
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card{
    left: 50% !important;
    right: auto !important;
    width: var(--c2d-card-w) !important;
    min-height: var(--c2d-card-min-h) !important;
    top: 50% !important;
  }
  .c2d-banner-card.is-current,
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left{
    transform: translate3d(-160%, -50%, 0) scale(.9) !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right{
    transform: translate3d(-50%, -50%, 0) scale(.22) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right{
    transform: translate3d(60%, -50%, 0) scale(.9) !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left{
    transform: translate3d(-50%, -50%, 0) scale(.22) !important;
  }
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-card-content{
    align-items: center !important;
    text-align: center !important;
  }
  .c2d-banner-card-h1{ font-size: clamp(20px, 5.4vw, 26px) !important; }
  .c2d-banner-card-h2{ font-size: clamp(13px, 3.5vw, 16px) !important; }
  .c2d-banner-card-address{ font-size: 11px !important; }
  .c2d-banner-card-url{ font-size: 13px !important; }
}

@media (max-width: 420px){
  :root{
    --c2d-logo-h: clamp(160px, 56vw, 210px);
    --c2d-card-min-h: 160px;
    --c2d-card-pad: 16px 14px;
  }
  .c2d-banner-card-track{ min-height: 175px !important; height: 175px !important; }
  .c2d-banner-card-h1{ font-size: 18px !important; }
  .c2d-banner-card-h2{ font-size: 13px !important; }
  .c2d-banner-card-address{ font-size: 10.5px !important; }
  .c2d-banner-card-url{ font-size: 12px !important; }
}

/* =========================================================
   V33 BANNER — VIDEO FIX: BIG hero + tight gap + smooth 3D
   Logo ALWAYS right · EN L→R · UR R→L · no gray ghost
   ========================================================= */

:root{
  --c2d-banner-min-h: 540px;
  --c2d-banner-pad-y: 32px;
  --c2d-banner-pad-x: 36px;
  --c2d-logo-h: clamp(300px, 42vw, 460px);
  --c2d-logo-max-w: 44%;
  --c2d-logo-right: 2.5%;
  --c2d-card-w: min(50%, 560px);
  --c2d-card-min-h: clamp(280px, 36vw, 400px);
  --c2d-card-pad: 36px 38px;
  --c2d-card-left: 3%;
  --c2d-banner-gap: 8px;
  --c2d-dots-bottom: 16px;
  --c2d-dots-size: 10px;
  --c2d-dots-active-w: 26px;
  --c2d-slide-ease: cubic-bezier(.22,.82,.2,1);
  --c2d-slide-dur: .72s;
}

.c2d-phone-banner{
  position: relative !important;
  overflow: hidden !important;
  min-height: var(--c2d-banner-min-h) !important;
  border-radius: 24px !important;
  isolation: isolate !important;
  perspective: 1600px !important;
}
.c2d-phone-banner-stage{
  position: relative !important;
  min-height: calc(var(--c2d-banner-min-h) - 12px) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: var(--c2d-banner-pad-y) var(--c2d-banner-pad-x) calc(var(--c2d-banner-pad-y) + 20px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* LOGO — large, ALWAYS right */
.c2d-banner-fixed-logo,
body:not(.lang-ur) .c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
  position: absolute !important;
  z-index: 20 !important;
  top: 48% !important;
  right: var(--c2d-logo-right) !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: var(--c2d-logo-h) !important;
  max-width: var(--c2d-logo-max-w) !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  margin: 0 !important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 42px rgba(6,182,255,.35)) !important;
}
.c2d-logo-halo{ inset: -4% !important; opacity: 1 !important; }

/* Viewport — fills left side up to logo */
.c2d-banner-card-viewport{
  position: absolute !important;
  top: 18px !important;
  bottom: 50px !important;
  left: 18px !important;
  right: calc(var(--c2d-logo-max-w) + var(--c2d-banner-gap)) !important;
  z-index: 6 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.c2d-banner-card-viewport::after{ display: none !important; }
.c2d-banner-card-track{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  transform-style: preserve-3d !important;
}

/* CARDS — large, fill left area, tight to logo */
.c2d-banner-card,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
body.lang-ur .c2d-phone-banner .c2d-banner-card,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(96%, var(--c2d-card-w)) !important;
  max-width: 100% !important;
  min-height: var(--c2d-card-min-h) !important;
  height: auto !important;
  padding: var(--c2d-card-pad) !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  transform: translate3d(-50%, -50%, 0) scale(.96) !important;
  transform-origin: center center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition:
    transform var(--c2d-slide-dur) var(--c2d-slide-ease),
    opacity .55s ease,
    visibility 0s linear var(--c2d-slide-dur) !important;
}

/* Dark theme friendly card surface */
.c2d-banner-card{
  background: linear-gradient(145deg, rgba(22,32,48,.96), rgba(14,22,36,.94)) !important;
  border: 1px solid rgba(100,160,220,.18) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body:not([data-theme="dark"]):not(.theme-dark) .c2d-banner-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .c2d-banner-card{
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,242,252,.94)) !important;
  border: 1px solid rgba(10,60,110,.12) !important;
  box-shadow: 0 26px 55px rgba(4,24,50,.22), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.c2d-banner-card.is-current{
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 8 !important;
  transform: translate3d(-50%, -50%, 0) rotateY(0) rotateX(0) scale(1) !important;
  transition:
    transform var(--c2d-slide-dur) var(--c2d-slide-ease),
    opacity .4s ease,
    visibility 0s linear 0s !important;
}

/* EN L→R: enter from left, exit right toward logo */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-left{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 9 !important;
  transform: translate3d(-160%, -50%, 0) rotateY(16deg) scale(.9) !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-right{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 7 !important;
  transform: translate3d(70%, -50%, -40px) rotateY(-28deg) scale(.72) !important;
  transition:
    transform var(--c2d-slide-dur) var(--c2d-slide-ease),
    opacity .55s ease,
    visibility 0s linear var(--c2d-slide-dur) !important;
}

/* UR R→L: enter from right, exit left */
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-right{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 9 !important;
  transform: translate3d(60%, -50%, 0) rotateY(-16deg) scale(.9) !important;
  transition: none !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-left{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 7 !important;
  transform: translate3d(-160%, -50%, -40px) rotateY(28deg) scale(.72) !important;
  transition:
    transform var(--c2d-slide-dur) var(--c2d-slide-ease),
    opacity .55s ease,
    visibility 0s linear var(--c2d-slide-dur) !important;
}

.c2d-banner-card.is-hidden-complete{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: none !important;
  transform: translate3d(-50%, -50%, 0) scale(.9) !important;
}

/* Soft sheen — never a solid gray slab */
.c2d-banner-card-sheen{
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.12) 48%, transparent 72%) !important;
  opacity: 0 !important;
  transform: translateX(-130%) !important;
}
.c2d-banner-card.is-current .c2d-banner-card-sheen{
  opacity: .55 !important;
  animation: c2dBannerSheenSmooth 1.15s ease both .08s !important;
}
@keyframes c2dBannerSheenSmooth{
  0%{ transform: translateX(-130%); opacity: 0; }
  30%{ opacity: .55; }
  100%{ transform: translateX(130%); opacity: 0; }
}

.c2d-banner-card-content{
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}
body:not(.lang-ur) .c2d-banner-card-content{
  align-items: flex-start !important;
  text-align: left !important;
  direction: ltr !important;
}
body.lang-ur .c2d-banner-card-content{
  align-items: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}
.c2d-banner-card-h1{
  font-size: clamp(26px, 3vw, 42px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  margin: 0 0 14px !important;
  background: linear-gradient(90deg, #5ec8ff, #c084fc) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.c2d-banner-card-h2{
  font-size: clamp(16px, 1.7vw, 22px) !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  margin: 0 0 14px !important;
  color: rgba(220,232,248,.95) !important;
}
.c2d-banner-card-address{
  font-size: clamp(12px, 1.1vw, 14px) !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
  color: rgba(170,190,210,.85) !important;
}
.c2d-banner-card-url{
  font-size: clamp(14px, 1.3vw, 18px) !important;
  font-weight: 900 !important;
  margin: 0 !important;
  color: #3db8ff !important;
}
/* Light theme text fallback */
body:not([data-theme="dark"]):not(.theme-dark) .c2d-banner-card-h2,
html:not([data-theme="dark"]) body:not(.theme-dark) .c2d-banner-card-h2{ color: #12365b !important; }
body:not([data-theme="dark"]):not(.theme-dark) .c2d-banner-card-address,
html:not([data-theme="dark"]) body:not(.theme-dark) .c2d-banner-card-address{ color: #40536b !important; }
body:not([data-theme="dark"]):not(.theme-dark) .c2d-banner-card-url,
html:not([data-theme="dark"]) body:not(.theme-dark) .c2d-banner-card-url{ color: #0878dc !important; }

/* Dots center-bottom */
.c2d-phone-banner-dots,
.c2d-banner-dots.c2d-phone-banner-dots{
  position: absolute !important;
  left: 50% !important;
  bottom: var(--c2d-dots-bottom) !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
  display: flex !important;
  gap: 9px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.c2d-phone-banner-dots .c2d-banner-dot{
  width: var(--c2d-dots-size) !important;
  height: var(--c2d-dots-size) !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(140,160,190,.4) !important;
  cursor: pointer !important;
  transform: none !important;
  box-shadow: none !important;
  transition: width .22s ease, background .22s ease, box-shadow .22s ease !important;
}
.c2d-phone-banner-dots .c2d-banner-dot.active{
  width: var(--c2d-dots-active-w) !important;
  border-radius: 999px !important;
  background: var(--blue, #06b6ff) !important;
  box-shadow: 0 0 0 4px rgba(6,182,255,.2) !important;
  transform: none !important;
}

/* Tablet */
@media (max-width: 1024px){
  :root{
    --c2d-banner-min-h: 480px;
    --c2d-logo-h: clamp(240px, 36vw, 380px);
    --c2d-logo-max-w: 42%;
    --c2d-card-min-h: clamp(240px, 30vw, 340px);
    --c2d-card-pad: 28px 30px;
  }
}

/* Mobile stack */
@media (max-width: 820px){
  :root{
    --c2d-banner-min-h: 0px;
    --c2d-logo-h: clamp(200px, 54vw, 280px);
    --c2d-logo-max-w: 80%;
    --c2d-card-w: min(96%, 420px);
    --c2d-card-min-h: 200px;
    --c2d-card-pad: 22px 20px;
  }
  .c2d-phone-banner{ min-height: 0 !important; }
  .c2d-phone-banner-stage{
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 14px 48px !important;
    gap: 10px !important;
  }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    height: var(--c2d-logo-h) !important;
    max-width: var(--c2d-logo-max-w) !important;
    margin: 0 auto 4px !important;
    order: -1 !important;
  }
  .c2d-banner-card-viewport{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 220px !important;
    overflow: hidden !important;
  }
  .c2d-banner-card-track{ min-height: 210px !important; height: 210px !important; }
  .c2d-banner-card,
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
  body.lang-ur .c2d-phone-banner .c2d-banner-card{
    left: 50% !important;
    width: var(--c2d-card-w) !important;
    min-height: var(--c2d-card-min-h) !important;
  }
  .c2d-banner-card-h1{ font-size: clamp(22px, 5.8vw, 28px) !important; }
  .c2d-banner-card-h2{ font-size: clamp(14px, 3.6vw, 17px) !important; }
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-card-content{
    align-items: center !important;
    text-align: center !important;
  }
}

@media (max-width: 420px){
  :root{
    --c2d-logo-h: clamp(170px, 58vw, 220px);
    --c2d-card-min-h: 175px;
    --c2d-card-pad: 16px 14px;
  }
  .c2d-banner-card-track{ min-height: 185px !important; height: 185px !important; }
  .c2d-banner-card-h1{ font-size: 20px !important; }
  .c2d-banner-card-h2{ font-size: 13px !important; }
}


/* =========================================================
   C2D BANNER V34 — PREMIUM LARGE HERO / DATA-SAFE OVERRIDE
   Targeted override only. Existing components/data remain untouched.
   ========================================================= */
.c2d-phone-banner{
  --c2d-banner-duration: 820ms;
  --c2d-banner-ease: cubic-bezier(.22,.72,.18,1);
  --c2d-banner-perspective: 1500px;
  --c2d-banner-rotation: 16deg;
  --c2d-banner-depth: 24px;
  --c2d-banner-scale: .94;
  --c2d-banner-shadow: .24;
  --c2d-banner-radius: 26px;
  width: min(100%, var(--c2d-banner-max-width,1320px));
  margin: var(--c2d-banner-margin-top,8px) auto var(--c2d-banner-margin-bottom,22px);
  min-height: var(--c2d-banner-min-h,540px) !important;
  border-radius: var(--c2d-banner-radius);
  overflow: hidden;
  perspective: var(--c2d-banner-perspective);
  box-shadow: 0 26px 70px rgba(5,25,55,.18), var(--shadow);
}
.c2d-phone-banner-stage{
  min-height: calc(var(--c2d-banner-min-h,540px) - 42px) !important;
  padding: var(--c2d-banner-pad-y,30px) var(--c2d-banner-pad-x,30px) 48px !important;
  gap: var(--c2d-banner-gap,22px) !important;
}
.c2d-banner-card-viewport{
  inset: var(--c2d-banner-pad-y,30px) var(--c2d-banner-pad-x,30px) 48px !important;
  right: calc(var(--c2d-banner-pad-x,30px) + var(--c2d-banner-logo-space,31%)) !important;
  overflow: visible !important;
  perspective: var(--c2d-banner-perspective);
}
.c2d-banner-card-track{min-height:calc(var(--c2d-banner-min-h,540px) - 112px) !important;height:100% !important;transform-style:preserve-3d;}
.c2d-banner-card{
  width:min(var(--c2d-banner-card-width,56%),680px) !important;
  min-height:var(--c2d-banner-card-height,310px) !important;
  padding:var(--c2d-banner-card-padding,34px) !important;
  border-radius:var(--c2d-banner-card-radius,26px) !important;
  box-shadow:0 28px 65px rgba(4,24,50,var(--c2d-banner-card-shadow,.24)), inset 0 1px 0 rgba(255,255,255,.92) !important;
  transition:transform var(--c2d-banner-duration) var(--c2d-banner-ease),opacity var(--c2d-banner-duration) ease,visibility 0s linear var(--c2d-banner-duration) !important;
}
.c2d-banner-card.is-current{transition:transform var(--c2d-banner-duration) var(--c2d-banner-ease),opacity calc(var(--c2d-banner-duration)*.82) ease,visibility 0s linear 0s !important;}
.c2d-banner-card.is-in-left{transform:translate3d(-112%,-50%,calc(var(--c2d-banner-depth) * -1)) rotateY(var(--c2d-banner-rotation)) rotateX(2deg) scale(var(--c2d-banner-scale)) !important;}
.c2d-banner-card.is-in-right{transform:translate3d(112%,-50%,calc(var(--c2d-banner-depth) * -1)) rotateY(calc(var(--c2d-banner-rotation) * -1)) rotateX(2deg) scale(var(--c2d-banner-scale)) !important;}
.c2d-banner-card.is-out-right{transform:translate3d(76%,-50%,calc(var(--c2d-banner-depth) * -1)) rotateY(calc(var(--c2d-banner-rotation) * -1.7)) rotateX(-4deg) scale(.82) !important;transition:transform var(--c2d-banner-duration) var(--c2d-banner-ease),opacity var(--c2d-banner-duration) ease,visibility 0s linear var(--c2d-banner-duration) !important;}
.c2d-banner-card.is-out-left{transform:translate3d(-76%,-50%,calc(var(--c2d-banner-depth) * -1)) rotateY(calc(var(--c2d-banner-rotation) * 1.7)) rotateX(-4deg) scale(.82) !important;transition:transform var(--c2d-banner-duration) var(--c2d-banner-ease),opacity var(--c2d-banner-duration) ease,visibility 0s linear var(--c2d-banner-duration) !important;}
.c2d-banner-card-h1{font-size:clamp(27px,3.1vw,44px) !important;margin-bottom:13px !important;}
.c2d-banner-card-h2{font-size:clamp(17px,1.8vw,25px) !important;margin-bottom:15px !important;}
.c2d-banner-card-address{font-size:clamp(12px,1.08vw,15px) !important;}
.c2d-banner-card-url{font-size:clamp(14px,1.3vw,18px) !important;}
.c2d-banner-fixed-logo{
  right:4.5% !important;
  width:clamp(250px,30vw,390px) !important;
  height:clamp(250px,30vw,390px) !important;
  filter:drop-shadow(0 20px 36px rgba(6,182,255,.20));
}
.c2d-banner-fixed-logo img{width:100% !important;height:100% !important;}
.c2d-logo-halo{inset:0 !important;}
.c2d-phone-banner-dots{bottom:var(--c2d-banner-dots-bottom,16px) !important;gap:var(--c2d-banner-dots-gap,9px) !important;}
.c2d-phone-banner-dots .c2d-banner-dot{width:var(--c2d-banner-dots-size,9px) !important;height:var(--c2d-banner-dots-size,9px) !important;}

@media (max-width:1024px){
  .c2d-phone-banner{min-height:var(--c2d-banner-tablet-min-h,500px) !important;}
  .c2d-phone-banner-stage{min-height:calc(var(--c2d-banner-tablet-min-h,500px) - 42px) !important;}
  .c2d-banner-card-viewport{right:calc(var(--c2d-banner-pad-x,26px) + 32%) !important;}
  .c2d-banner-fixed-logo{right:3% !important;width:clamp(230px,32vw,340px) !important;height:clamp(230px,32vw,340px) !important;}
  .c2d-banner-card{width:min(62%,590px) !important;min-height:clamp(270px,30vw,330px) !important;}
}
@media (max-width:820px){
  .c2d-phone-banner{min-height:var(--c2d-banner-mobile-min-h,340px) !important;}
  .c2d-phone-banner-stage{
    min-height:calc(var(--c2d-banner-mobile-min-h,340px) - 30px) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(115px,34%) !important;
    align-items:center !important;
    padding:16px 12px 44px !important;
    gap:10px !important;
  }
  .c2d-banner-card-viewport{position:relative !important;inset:auto !important;width:100% !important;height:250px !important;min-height:250px !important;grid-column:1 !important;overflow:visible !important;}
  .c2d-banner-card-track{height:250px !important;min-height:250px !important;}
  .c2d-banner-card{left:50% !important;width:min(98%,430px) !important;min-height:220px !important;padding:20px 18px !important;}
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{position:relative !important;top:auto !important;right:auto !important;left:auto !important;transform:none !important;width:min(100%,230px) !important;height:auto !important;aspect-ratio:1 !important;max-width:none !important;margin:0 !important;grid-column:2 !important;grid-row:1 !important;order:initial !important;justify-self:end !important;}
  .c2d-banner-card-h1{font-size:clamp(21px,5.5vw,31px) !important;}
  .c2d-banner-card-h2{font-size:clamp(14px,3.7vw,18px) !important;}
  .c2d-banner-card-address{font-size:clamp(11px,2.6vw,13px) !important;}
  .c2d-banner-card-url{font-size:clamp(13px,3vw,16px) !important;}
}
@media (max-width:520px){
  .c2d-phone-banner{min-height:var(--c2d-banner-small-mobile-min-h,300px) !important;}
  .c2d-phone-banner-stage{grid-template-columns:minmax(0,1fr) minmax(92px,35%) !important;min-height:270px !important;padding:12px 9px 40px !important;gap:7px !important;}
  .c2d-banner-card-viewport,.c2d-banner-card-track{height:215px !important;min-height:215px !important;}
  .c2d-banner-card{min-height:185px !important;padding:15px 13px !important;border-radius:20px !important;}
  .c2d-banner-card-h1{font-size:20px !important;margin-bottom:8px !important;}
  .c2d-banner-card-h2{font-size:13px !important;margin-bottom:8px !important;}
  .c2d-banner-card-address{font-size:10.5px !important;line-height:1.35 !important;}
  .c2d-banner-card-url{font-size:12px !important;}
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{width:min(100%,150px) !important;height:auto !important;}
}
@media (prefers-reduced-motion:reduce){
  .c2d-banner-card,.c2d-banner-card.is-current,.c2d-banner-card.is-out-left,.c2d-banner-card.is-out-right{transition-duration:1ms !important;}
}


/* =========================================================
   V34.1 — CARRY-ON SIZE ALIGNMENT
   User-requested refinement: make the banner, logo and cards
   visibly large, keep logo/card heights equal, remove excess
   empty space, and keep dots centered at the absolute bottom.
   This is additive and does not alter content/data structures.
   ========================================================= */
:root{
  --c2d-banner-min-h:620px;
  --c2d-banner-pad-y:22px;
  --c2d-banner-pad-x:22px;
  --c2d-logo-h:420px;
  --c2d-logo-max-w:36%;
  --c2d-logo-right:2.2%;
  --c2d-card-w:min(68%,680px);
  --c2d-card-min-h:420px;
  --c2d-banner-gap:6px;
  --c2d-dots-bottom:14px;
  --c2d-dots-size:10px;
}
.c2d-phone-banner{
  min-height:var(--c2d-banner-min-h)!important;
  margin-top:8px!important;
  margin-bottom:22px!important;
}
.c2d-phone-banner-stage{
  min-height:calc(var(--c2d-banner-min-h) - 34px)!important;
  padding:var(--c2d-banner-pad-y) var(--c2d-banner-pad-x) 48px!important;
}
.c2d-banner-fixed-logo,
body:not(.lang-ur) .c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  right:var(--c2d-logo-right)!important;
  left:auto!important;
  width:var(--c2d-logo-h)!important;
  height:var(--c2d-logo-h)!important;
  max-width:var(--c2d-logo-max-w)!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}
.c2d-banner-fixed-logo img{width:100%!important;height:100%!important;object-fit:contain!important;}
.c2d-banner-card-viewport{
  top:var(--c2d-banner-pad-y)!important;
  left:var(--c2d-banner-pad-x)!important;
  right:calc(var(--c2d-banner-pad-x) + 30.5%)!important;
  bottom:48px!important;
}
.c2d-banner-card-track{min-height:calc(var(--c2d-banner-min-h) - 112px)!important;}
.c2d-banner-card{
  width:min(92%,680px)!important;
  min-height:var(--c2d-card-min-h)!important;
  padding:var(--c2d-banner-card-padding,34px)!important;
}
.c2d-banner-card.is-current{transform:translate3d(-50%,-50%,0) scale(1)!important;}
.c2d-phone-banner-dots{
  left:50%!important;
  right:auto!important;
  bottom:var(--c2d-dots-bottom)!important;
  transform:translateX(-50%)!important;
  justify-content:center!important;
  align-items:center!important;
}
.c2d-phone-banner-dots .c2d-banner-dot{
  width:var(--c2d-dots-size)!important;
  height:var(--c2d-dots-size)!important;
}

@media (max-width:1024px){
  :root{--c2d-banner-min-h:560px;--c2d-logo-h:360px;--c2d-logo-max-w:37%;--c2d-card-min-h:360px;--c2d-card-w:min(70%,620px);}
  .c2d-phone-banner{min-height:var(--c2d-banner-min-h)!important;}
  .c2d-phone-banner-stage{min-height:calc(var(--c2d-banner-min-h) - 34px)!important;}
  .c2d-banner-fixed-logo{width:var(--c2d-logo-h)!important;height:var(--c2d-logo-h)!important;right:2%!important;}
  .c2d-banner-card-viewport{right:calc(22px + 31%)!important;}
  .c2d-banner-card{width:min(94%,620px)!important;min-height:var(--c2d-card-min-h)!important;}
}
@media (max-width:820px){
  :root{--c2d-banner-min-h:400px;--c2d-logo-h:270px;--c2d-logo-max-w:none;--c2d-card-min-h:270px;}
  .c2d-phone-banner{min-height:var(--c2d-banner-min-h)!important;}
  .c2d-phone-banner-stage{
    min-height:calc(var(--c2d-banner-min-h) - 30px)!important;
    grid-template-columns:minmax(0,1fr) minmax(145px,35%)!important;
    padding:14px 12px 44px!important;
    gap:6px!important;
  }
  .c2d-banner-card-viewport{position:relative!important;inset:auto!important;width:100%!important;height:286px!important;min-height:286px!important;grid-column:1!important;overflow:visible!important;}
  .c2d-banner-card-track{height:286px!important;min-height:286px!important;}
  .c2d-banner-card{left:50%!important;width:96%!important;min-height:270px!important;padding:20px 17px!important;}
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position:relative!important;top:auto!important;right:auto!important;left:auto!important;transform:none!important;
    width:270px!important;height:270px!important;max-width:100%!important;aspect-ratio:1!important;
    margin:0!important;grid-column:2!important;grid-row:1!important;justify-self:end!important;align-self:center!important;
  }
  .c2d-banner-card-h1{font-size:clamp(21px,5.4vw,31px)!important;}
  .c2d-banner-card-h2{font-size:clamp(14px,3.5vw,18px)!important;}
}
@media (max-width:520px){
  :root{--c2d-banner-min-h:360px;--c2d-logo-h:235px;--c2d-card-min-h:235px;}
  .c2d-phone-banner{min-height:var(--c2d-banner-min-h)!important;}
  .c2d-phone-banner-stage{
    min-height:320px!important;
    grid-template-columns:minmax(0,1fr) minmax(112px,36%)!important;
    padding:10px 8px 40px!important;
    gap:4px!important;
  }
  .c2d-banner-card-viewport{height:248px!important;min-height:248px!important;}
  .c2d-banner-card-track{height:248px!important;min-height:248px!important;}
  .c2d-banner-card{width:98%!important;min-height:235px!important;padding:15px 12px!important;border-radius:20px!important;}
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{width:235px!important;height:235px!important;}
  .c2d-banner-card-h1{font-size:20px!important;margin-bottom:7px!important;}
  .c2d-banner-card-h2{font-size:13px!important;margin-bottom:9px!important;}
  .c2d-banner-card-address{font-size:10px!important;line-height:1.4!important;margin-bottom:5px!important;}
  .c2d-banner-card-url{font-size:12px!important;}
}
@media (max-width:380px){
  :root{--c2d-banner-min-h:340px;--c2d-logo-h:215px;--c2d-card-min-h:215px;}
  .c2d-phone-banner-stage{min-height:300px!important;grid-template-columns:minmax(0,1fr) minmax(102px,36%)!important;}
  .c2d-banner-card-viewport,.c2d-banner-card-track{height:225px!important;min-height:225px!important;}
  .c2d-banner-card{min-height:215px!important;padding:13px 10px!important;}
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{width:215px!important;height:215px!important;}
}

/* C2D V35 — FINAL LARGE HERO COMPOSITION (targeted override) */
.c2d-phone-banner{min-height:var(--c2d-banner-min-h,620px)!important;}
.c2d-phone-banner-stage{min-height:calc(var(--c2d-banner-min-h,620px) - 42px)!important;padding:var(--c2d-banner-pad-y,26px) var(--c2d-banner-pad-x,26px) 56px!important;}
.c2d-banner-card-viewport{right:calc(var(--c2d-banner-pad-x,26px) + 33%)!important;bottom:56px!important;}
.c2d-banner-card-track{min-height:calc(var(--c2d-banner-min-h,620px) - 138px)!important;}
.c2d-banner-card{width:min(var(--c2d-card-w,min(62%,680px)),680px)!important;min-height:var(--c2d-card-min-h,420px)!important;max-height:calc(var(--c2d-banner-min-h,620px) - 150px)!important;padding:var(--c2d-banner-card-padding,34px)!important;}
.c2d-banner-fixed-logo{right:3.5%!important;width:var(--c2d-logo-h,430px)!important;height:var(--c2d-logo-h,430px)!important;max-width:34%!important;max-height:calc(var(--c2d-banner-min-h,620px) - 120px)!important;top:50%!important;transform:translateY(-50%)!important;}
.c2d-phone-banner-dots{left:50%!important;bottom:var(--c2d-dots-bottom,18px)!important;transform:translateX(-50%)!important;}
body.lang-ur .c2d-banner-fixed-logo{right:3.5%!important;left:auto!important;}

@media (max-width:1024px){
 .c2d-phone-banner{min-height:var(--c2d-banner-tablet-min-h,560px)!important;}
 .c2d-phone-banner-stage{min-height:calc(var(--c2d-banner-tablet-min-h,560px) - 42px)!important;padding:24px 22px 54px!important;}
 .c2d-banner-card-viewport{right:34%!important;bottom:54px!important;}
 .c2d-banner-card{width:min(64%,600px)!important;min-height:350px!important;max-height:400px!important;}
 .c2d-banner-fixed-logo{right:2.5%!important;width:360px!important;height:360px!important;max-width:34%!important;max-height:440px!important;}
}
@media (max-width:820px){
 .c2d-phone-banner{min-height:var(--c2d-banner-mobile-min-h,500px)!important;}
 .c2d-phone-banner-stage{min-height:calc(var(--c2d-banner-mobile-min-h,500px) - 28px)!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(190px,34%)!important;align-items:center!important;padding:18px 14px 52px!important;gap:10px!important;}
 .c2d-banner-card-viewport{position:relative!important;inset:auto!important;width:100%!important;height:290px!important;min-height:290px!important;grid-column:1!important;grid-row:1!important;}
 .c2d-banner-card-track{height:290px!important;min-height:290px!important;}
 .c2d-banner-card{left:50%!important;width:min(100%,440px)!important;min-height:245px!important;max-height:285px!important;padding:20px 18px!important;}
 .c2d-banner-fixed-logo,body.lang-ur .c2d-banner-fixed-logo{position:relative!important;top:auto!important;right:auto!important;left:auto!important;width:min(100%,245px)!important;height:245px!important;max-width:none!important;max-height:none!important;transform:none!important;grid-column:2!important;grid-row:1!important;justify-self:end!important;}
 .c2d-phone-banner-dots{bottom:16px!important;}
}
@media (max-width:520px){
 .c2d-phone-banner{min-height:var(--c2d-banner-small-mobile-min-h,460px)!important;}
 .c2d-phone-banner-stage{min-height:432px!important;grid-template-columns:minmax(0,1fr) minmax(155px,35%)!important;padding:14px 10px 50px!important;gap:7px!important;}
 .c2d-banner-card-viewport,.c2d-banner-card-track{height:265px!important;min-height:265px!important;}
 .c2d-banner-card{width:100%!important;min-height:215px!important;max-height:255px!important;padding:16px 13px!important;}
 .c2d-banner-fixed-logo,body.lang-ur .c2d-banner-fixed-logo{width:min(100%,190px)!important;height:190px!important;}
}


/* V34 FINAL — precise large banner alignment, data-safe additive overrides */
.c2d-phone-banner{width:var(--c2d-banner-width-pct,100%)!important;max-width:var(--c2d-banner-max-width,1320px)!important;min-height:var(--c2d-banner-height,460px)!important;height:var(--c2d-banner-height,460px)!important;margin-top:var(--c2d-banner-margin-top,8px)!important;margin-right:var(--c2d-banner-margin-right,0px)!important;margin-bottom:var(--c2d-banner-margin-bottom,22px)!important;margin-left:var(--c2d-banner-margin-left,0px)!important;padding:0!important;box-sizing:border-box!important;}
.c2d-phone-banner-stage{height:100%!important;min-height:0!important;padding:var(--c2d-banner-padding-top,18px) var(--c2d-banner-padding-right,18px) var(--c2d-banner-padding-bottom,34px) var(--c2d-banner-padding-left,18px)!important;box-sizing:border-box!important;display:block!important;}
.c2d-banner-card-viewport{position:absolute!important;left:var(--c2d-card-viewport-left,18px)!important;right:var(--c2d-card-viewport-right,31%)!important;top:var(--c2d-card-viewport-top,18px)!important;bottom:var(--c2d-card-viewport-bottom,42px)!important;inset-inline:auto!important;width:auto!important;height:auto!important;}
.c2d-banner-card-track{height:100%!important;min-height:0!important;}
.c2d-banner-card{left:var(--c2d-card-left,2%)!important;top:var(--c2d-card-top,50%)!important;width:var(--c2d-card-width,68%)!important;min-width:0!important;min-height:var(--c2d-card-height,380px)!important;height:var(--c2d-card-height,380px)!important;max-height:none!important;padding:var(--c2d-banner-card-padding,28px)!important;gap:var(--c2d-card-gap,18px)!important;box-sizing:border-box!important;transform-origin:center center!important;}
.c2d-banner-card.is-current{transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) scale(1)!important;}
.c2d-banner-card.is-hidden-complete{opacity:0!important;visibility:visible!important;display:flex!important;pointer-events:none!important;}
.c2d-banner-fixed-logo{right:var(--c2d-logo-right,4%)!important;left:auto!important;top:var(--c2d-logo-top,50%)!important;width:var(--c2d-logo-width,380px)!important;height:var(--c2d-logo-height,380px)!important;transform:translateY(-50%)!important;box-sizing:border-box!important;}
.c2d-banner-fixed-logo img{width:100%!important;height:100%!important;object-fit:contain!important;}
.c2d-phone-banner-dots{left:var(--c2d-dots-center,50%)!important;bottom:var(--c2d-dots-bottom,14px)!important;transform:translateX(-50%)!important;}
@media(max-width:1100px){.c2d-phone-banner{height:var(--c2d-banner-tablet-height,430px)!important;min-height:var(--c2d-banner-tablet-height,430px)!important}.c2d-banner-fixed-logo{width:min(var(--c2d-logo-width,340px),34vw)!important;height:min(var(--c2d-logo-height,340px),34vw)!important}.c2d-banner-card{width:min(var(--c2d-card-width,66%),620px)!important;height:min(var(--c2d-card-height,350px),calc(100% - 36px))!important;min-height:min(var(--c2d-card-height,350px),calc(100% - 36px))!important}.c2d-banner-card-viewport{right:30%!important}}
@media(max-width:760px){.c2d-phone-banner{height:var(--c2d-banner-mobile-height,390px)!important;min-height:var(--c2d-banner-mobile-height,390px)!important}.c2d-banner-card-viewport{left:12px!important;right:12px!important;top:16px!important;bottom:42px!important}.c2d-banner-card{left:0!important;width:calc(100% - 18px)!important;height:calc(100% - 8px)!important;min-height:0!important;top:50%!important;padding:18px!important}.c2d-banner-fixed-logo{right:14px!important;top:10%!important;width:clamp(120px,31vw,170px)!important;height:clamp(120px,31vw,170px)!important;transform:none!important}}
@media(max-width:420px){.c2d-phone-banner{height:var(--c2d-banner-small-height,370px)!important;min-height:var(--c2d-banner-small-height,370px)!important}.c2d-banner-fixed-logo{right:10px!important;width:120px!important;height:120px!important}.c2d-banner-card{width:calc(100% - 8px)!important;padding:14px!important}}


/* V34 VIDEO-FOCUSED FINAL ALIGNMENT — source-preserving additive layer.
   Matches the recorded composition: left-anchored large card, large right logo,
   compact hero height, stable center-bottom dots, and non-jumping slide states. */
.c2d-phone-banner{
  height:var(--c2d-banner-height,320px)!important;
  min-height:var(--c2d-banner-height,320px)!important;
  overflow:hidden!important;
}
.c2d-phone-banner-stage{height:100%!important;min-height:0!important;position:relative!important;padding:0!important;display:block!important;}
.c2d-banner-card-viewport{
  left:var(--c2d-card-viewport-left,14px)!important;
  right:var(--c2d-card-viewport-right,34%)!important;
  top:14px!important;bottom:38px!important;
  inset-inline:auto!important;width:auto!important;height:auto!important;overflow:visible!important;
}
.c2d-banner-card-track{height:100%!important;min-height:0!important;width:100%!important;overflow:visible!important;}
.c2d-banner-card{
  left:var(--c2d-card-left,0%)!important;
  top:50%!important;
  width:var(--c2d-card-width,52%)!important;
  height:var(--c2d-card-height,270px)!important;
  min-height:var(--c2d-card-height,270px)!important;
  max-height:none!important;
  margin:0!important;
  padding:var(--c2d-banner-card-padding,26px)!important;
  gap:var(--c2d-card-gap,18px)!important;
  box-sizing:border-box!important;
}
.c2d-banner-card-content{width:100%!important;max-width:none!important;}
.c2d-banner-card-h1{font-size:clamp(24px,2.25vw,34px)!important;}
.c2d-banner-card-h2{font-size:clamp(15px,1.45vw,21px)!important;}
.c2d-banner-card-address{font-size:clamp(10px,.9vw,13px)!important;}
.c2d-banner-card-url{font-size:clamp(12px,1.1vw,16px)!important;}
.c2d-banner-fixed-logo{
  right:var(--c2d-logo-right,4%)!important;left:auto!important;
  top:var(--c2d-logo-top,50%)!important;
  width:var(--c2d-logo-width,285px)!important;
  height:var(--c2d-logo-height,285px)!important;
  transform:translateY(-50%)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.c2d-banner-fixed-logo img{width:100%!important;height:100%!important;object-fit:contain!important;}
.c2d-phone-banner-dots{
  left:var(--c2d-dots-center,50%)!important;
  bottom:var(--c2d-dots-bottom,12px)!important;
  transform:translateX(-50%)!important;
}
/* Never abruptly remove cards during a slide; off-stage cards remain mounted and visible to the compositor. */
.c2d-banner-card.is-hidden-complete{visibility:visible!important;display:flex!important;opacity:0!important;pointer-events:none!important;z-index:0!important;}
.c2d-banner-card.is-current{visibility:visible!important;display:flex!important;opacity:1!important;}
.c2d-banner-card.is-in-left,.c2d-banner-card.is-in-right,.c2d-banner-card.is-out-left,.c2d-banner-card.is-out-right{visibility:visible!important;display:flex!important;}

@media(max-width:1100px){
 .c2d-phone-banner{height:var(--c2d-banner-tablet-height,320px)!important;min-height:var(--c2d-banner-tablet-height,320px)!important;}
 .c2d-banner-card-viewport{left:12px!important;right:32%!important;top:12px!important;bottom:36px!important;}
 .c2d-banner-card{width:var(--c2d-card-width,52%)!important;height:min(var(--c2d-card-height,270px),calc(100% - 28px))!important;min-height:min(var(--c2d-card-height,270px),calc(100% - 28px))!important;}
 .c2d-banner-fixed-logo{width:min(var(--c2d-logo-width,285px),27vw)!important;height:min(var(--c2d-logo-height,285px),27vw)!important;right:4%!important;}
}
@media(max-width:760px){
 .c2d-phone-banner{height:var(--c2d-banner-mobile-height,330px)!important;min-height:var(--c2d-banner-mobile-height,330px)!important;}
 .c2d-banner-card-viewport{left:10px!important;right:34%!important;top:10px!important;bottom:38px!important;}
 .c2d-banner-card{left:0!important;width:calc(100% - 4px)!important;height:calc(100% - 18px)!important;min-height:0!important;padding:16px!important;}
 .c2d-banner-fixed-logo{right:10px!important;top:50%!important;width:clamp(105px,27vw,155px)!important;height:clamp(105px,27vw,155px)!important;transform:translateY(-50%)!important;}
 .c2d-banner-card-h1{font-size:21px!important}.c2d-banner-card-h2{font-size:13px!important}.c2d-banner-card-address{font-size:9.5px!important}.c2d-banner-card-url{font-size:12px!important;}
}
@media(max-width:420px){
 .c2d-phone-banner{height:var(--c2d-banner-small-height,320px)!important;min-height:var(--c2d-banner-small-height,320px)!important;}
 .c2d-banner-card-viewport{right:32%!important;}
 .c2d-banner-card{padding:13px!important;}
 .c2d-banner-fixed-logo{right:7px!important;width:100px!important;height:100px!important;}
 .c2d-banner-card-h1{font-size:18px!important}.c2d-banner-card-h2{font-size:11.5px!important}.c2d-banner-card-address{font-size:8.5px!important}.c2d-banner-card-url{font-size:10.5px!important;}
}


/* ============================================================================
   C2D FINAL BANNER COMPOSITION — VIDEO-REFERENCE / DATA-SAFE LAYER
   This layer is intentionally last so older banner experiments cannot override
   the final composition. It does not remove or alter unrelated website styles.
   ============================================================================ */
.c2d-phone-banner{
  position:relative !important;
  width:min(var(--c2d-banner-width-pct,100%),var(--c2d-banner-max-width,1320px)) !important;
  max-width:var(--c2d-banner-max-width,1320px) !important;
  max-height:var(--c2d-banner-max-height,900px) !important;
  margin:var(--c2d-banner-margin-top,8px) var(--c2d-banner-margin-right,0) var(--c2d-banner-margin-bottom,22px) var(--c2d-banner-margin-left,0) !important;
  min-height:var(--c2d-banner-synced-height,var(--c2d-banner-height,620px)) !important;
  height:var(--c2d-banner-synced-height,var(--c2d-banner-height,620px)) !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,var(--card),var(--card-2)) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
  perspective:var(--c2d-banner-perspective,1600px) !important;
  isolation:isolate !important;
}
.c2d-phone-banner-stage{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:block !important;
  overflow:hidden !important;
}
.c2d-banner-card-viewport{
  position:absolute !important;
  left:var(--c2d-banner-card-viewport-left,12px) !important;
  right:var(--c2d-banner-card-viewport-right,12px) !important;
  top:0 !important;
  bottom:0 !important;
  margin:0 !important;
  overflow:visible !important;
  z-index:4 !important;
  pointer-events:none !important;
}
.c2d-banner-card-track{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  transform-style:preserve-3d !important;
  perspective:var(--c2d-banner-perspective,1600px) !important;
}
.c2d-banner-card{
  position:absolute !important;
  left:var(--c2d-card-left-pos,var(--c2d-card-left,1%)) !important;
  right:var(--c2d-card-right-pos,auto) !important;
  top:50% !important;
  width:var(--c2d-card-width,36%) !important;
  min-width:0 !important;
  max-width:var(--c2d-card-width,36%) !important;
  height:var(--c2d-card-height,420px) !important;
  min-height:var(--c2d-card-height,420px) !important;
  max-height:calc(100% - 100px) !important;
  margin:0 !important;
  padding:var(--c2d-banner-card-padding,28px) !important;
  display:flex !important;
  align-items:center !important;
  gap:var(--c2d-banner-card-gap,12px) !important;
  transform-origin:center center !important;
  border-radius:var(--c2d-banner-card-radius,24px) !important;
  overflow:hidden !important;
  backface-visibility:hidden !important;
  transform-style:preserve-3d !important;
  will-change:transform,opacity !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:visible !important;
  z-index:3 !important;
  transition:transform var(--c2d-banner-duration,900ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),opacity var(--c2d-banner-duration,900ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),filter var(--c2d-banner-duration,900ms) ease !important;
}
.c2d-banner-card.is-current{
  opacity:1 !important;
  visibility:visible !important;
  z-index:5 !important;
  transform:translate3d(var(--c2d-card-current-x,0),-50%,0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) !important;
  filter:none !important;
}
/* English: incoming from left, outgoing to right. */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left{
  opacity:.12 !important;
  transform:translate3d(-115%,-50%,-20px) rotateY(10deg) rotateX(1deg) scale(var(--c2d-banner-scale,.96)) !important;
  z-index:6 !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right{
  opacity:.06 !important;
  transform:translate3d(112%,-50%,-80px) rotateY(-22deg) rotateX(-2deg) scale(.82) !important;
  z-index:4 !important;
}
/* Urdu: incoming from right, outgoing to left. Logo remains on right. */
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right{
  opacity:.12 !important;
  transform:translate3d(115%,-50%,-20px) rotateY(-10deg) rotateX(1deg) scale(var(--c2d-banner-scale,.96)) !important;
  z-index:6 !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left{
  opacity:.06 !important;
  transform:translate3d(-112%,-50%,-80px) rotateY(22deg) rotateX(-2deg) scale(.82) !important;
  z-index:4 !important;
}
.c2d-banner-card.is-hidden-complete{opacity:0 !important;visibility:visible !important;pointer-events:none !important;z-index:0 !important;}
.c2d-banner-card-content{flex:1 1 auto !important;min-width:0 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:flex-start !important;text-align:left !important;direction:ltr !important;}
.c2d-banner-card-h1{font-size:clamp(24px,2.7vw,40px) !important;line-height:1.06 !important;margin-bottom:12px !important;}
.c2d-banner-card-h2{font-size:clamp(15px,1.55vw,22px) !important;line-height:1.3 !important;margin-bottom:12px !important;}
.c2d-banner-card-address{font-size:clamp(11px,1vw,14px) !important;line-height:1.5 !important;margin-bottom:8px !important;}
.c2d-banner-card-url{font-size:clamp(13px,1.2vw,17px) !important;}
body.lang-ur .c2d-banner-card-content{align-items:flex-end !important;text-align:right !important;direction:rtl !important;}
body.lang-ur .c2d-banner-card{direction:rtl !important;}
.c2d-banner-card-image{flex:0 0 clamp(72px,9vw,120px) !important;max-width:28% !important;display:flex !important;align-items:center !important;justify-content:center !important;transform:translateZ(22px) !important;}
.c2d-banner-card-image img{width:100% !important;height:auto !important;max-height:150px !important;object-fit:contain !important;}
.c2d-banner-fixed-logo{
  position:absolute !important;
  z-index:12 !important;
  top:50% !important;
  right:var(--c2d-logo-right-pos,var(--c2d-logo-right,2%)) !important;
  left:var(--c2d-logo-left-pos,auto) !important;
  width:var(--c2d-logo-width,430px) !important;
  height:var(--c2d-logo-height,240px) !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
}
body.lang-ur .c2d-banner-fixed-logo{right:var(--c2d-logo-right-pos,var(--c2d-logo-right,2%)) !important;left:var(--c2d-logo-left-pos,auto) !important;}
.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:100% !important;height:100% !important;object-fit:contain !important;filter:drop-shadow(0 18px 34px rgba(6,182,255,.32)) !important;}
.c2d-logo-halo{inset:0 !important;border-radius:50% !important;background:radial-gradient(ellipse at center,rgba(6,182,255,.18),rgba(6,182,255,.06) 42%,transparent 72%) !important;}
.c2d-banner-card-viewport::after{display:none !important;}
.c2d-phone-banner-dots{position:absolute !important;left:50% !important;right:auto !important;top:auto !important;bottom:var(--c2d-banner-dots-bottom,14px) !important;transform:translateX(-50%) !important;width:max-content !important;margin:0 !important;padding:0 !important;z-index:30 !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:var(--c2d-banner-dots-gap,9px) !important;}
.c2d-phone-banner-dots .c2d-banner-dot{width:var(--c2d-banner-dots-size,9px) !important;height:var(--c2d-banner-dots-size,9px) !important;min-width:var(--c2d-banner-dots-size,9px) !important;border-radius:999px !important;border:0 !important;background:rgba(120,140,165,.35) !important;box-shadow:none !important;padding:0 !important;transition:width .25s ease,background .25s ease,transform .25s ease !important;}
.c2d-phone-banner-dots .c2d-banner-dot.active{width:calc(var(--c2d-banner-dots-size,9px) * 2.3) !important;background:var(--blue) !important;transform:none !important;box-shadow:0 0 0 4px rgba(6,182,255,.14) !important;}
/* Tablet */
@media (max-width:1024px){
  .c2d-phone-banner{height:var(--c2d-banner-synced-height,var(--c2d-banner-tablet-height,500px)) !important;min-height:var(--c2d-banner-synced-height,var(--c2d-banner-tablet-height,500px)) !important;}
  .c2d-banner-fixed-logo{width:var(--c2d-tablet-logo-width,320px) !important;height:var(--c2d-tablet-logo-height,180px) !important;right:2% !important;}
  .c2d-banner-card{width:var(--c2d-tablet-card-width,42%) !important;max-width:var(--c2d-tablet-card-width,42%) !important;height:var(--c2d-tablet-card-height,360px) !important;min-height:0 !important;left:var(--c2d-tablet-card-left,1%) !important;padding:22px !important;}
}
/* Mobile keeps the two-part composition instead of stacking: card left, logo right. */
@media (max-width:760px){
  .c2d-phone-banner{height:var(--c2d-banner-mobile-height,380px) !important;min-height:var(--c2d-banner-mobile-height,380px) !important;border-radius:18px !important;}
  .c2d-banner-card-viewport{left:8px !important;right:8px !important;}
  .c2d-banner-card{left:var(--c2d-mobile-card-left,1%) !important;width:var(--c2d-mobile-card-width,58%) !important;max-width:var(--c2d-mobile-card-width,58%) !important;height:var(--c2d-mobile-card-height,260px) !important;min-height:0 !important;padding:18px 16px !important;}
  .c2d-banner-fixed-logo{right:1.5% !important;width:var(--c2d-mobile-logo-width,170px) !important;height:var(--c2d-mobile-logo-height,100px) !important;}
  .c2d-banner-card-h1{font-size:clamp(18px,5.2vw,28px) !important;}
  .c2d-banner-card-h2{font-size:clamp(12px,3.5vw,16px) !important;}
  .c2d-banner-card-address{font-size:10px !important;}
  .c2d-banner-card-url{font-size:12px !important;}
  .c2d-banner-card-image{display:none !important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:var(--c2d-banner-synced-height,var(--c2d-banner-small-height,350px)) !important;min-height:var(--c2d-banner-synced-height,var(--c2d-banner-small-height,350px)) !important;}
  .c2d-banner-card{left:var(--c2d-small-card-left,1%) !important;width:var(--c2d-small-card-width,60%) !important;max-width:var(--c2d-small-card-width,60%) !important;height:var(--c2d-small-card-height,245px) !important;padding:14px 12px !important;}
  .c2d-banner-fixed-logo{width:var(--c2d-small-logo-width,145px) !important;height:var(--c2d-small-logo-height,90px) !important;right:1% !important;}
  .c2d-banner-card-h1{font-size:18px !important;}
  .c2d-banner-card-h2{font-size:12px !important;}
  .c2d-banner-card-address{font-size:9.5px !important;}
  .c2d-banner-card-url{font-size:11px !important;}
}
@media (prefers-reduced-motion:reduce){.c2d-banner-card{transition:none !important}.c2d-banner-card.is-current{transform:translate3d(0,-50%,0) !important}.c2d-banner-card:not(.is-current){display:none !important;}}

/* Safe final composition correction.
   Keep the archived slider logic and admin variables, but make the desktop
   composition unambiguous: cards own the left side and the logo owns the
   right side in both languages. */
.c2d-phone-banner .c2d-banner-card-viewport{
  left:var(--c2d-banner-card-viewport-left,18px) !important;
  right:var(--c2d-banner-card-viewport-right,34%) !important;
}
.c2d-phone-banner .c2d-banner-card{
  left:var(--c2d-card-left-pos,0%) !important;
  right:auto !important;
  transform-origin:center center !important;
}
.c2d-phone-banner .c2d-banner-card.is-current{
  transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) scale(1) !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card,
body.lang-ur .c2d-phone-banner .c2d-banner-card{
  left:var(--c2d-card-left-pos,0%) !important;
  right:auto !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
  transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) !important;
}
.c2d-phone-banner .c2d-banner-fixed-logo,
body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo{
  left:auto !important;
  right:var(--c2d-logo-right-pos,var(--c2d-logo-right,2%)) !important;
  top:var(--c2d-logo-top,50%) !important;
  transform:translateY(-50%) !important;
}
@media (max-width:760px){
  .c2d-phone-banner .c2d-banner-card-viewport{
    left:10px !important;
    right:10px !important;
  }
  .c2d-phone-banner .c2d-banner-card{
    left:var(--c2d-mobile-card-left,1%) !important;
    right:auto !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
    transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) !important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo,
  body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo{
    left:auto !important;
    right:var(--c2d-logo-right-pos,1.5%) !important;
    top:var(--c2d-logo-top,10%) !important;
    transform:none !important;
  }
}
@media (max-width:420px){
  .c2d-phone-banner .c2d-banner-card{
    left:var(--c2d-small-card-left,1%) !important;
    right:auto !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-current,
  body.lang-ur .c2d-phone-banner .c2d-banner-card.is-current{
    transform:translate3d(0,-50%,0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1) !important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo,
  body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo{
    left:auto !important;
    right:var(--c2d-logo-right-pos,1%) !important;
    top:var(--c2d-logo-top,10%) !important;
  }
}


/* ================================================================
   C2D REFERENCE-VIDEO HERO SLIDER — FINAL SAFE OVERRIDES
   ----------------------------------------------------------------
   Existing .c2d-banner-card rules are intentionally left in place
   for backward compatibility. The public banner no longer renders
   those card components; it renders full HERO SLIDES instead.
   ================================================================ */

.c2d-phone-banner{
  position:relative !important;
  width:var(--c2d-banner-width-pct,100%) !important;
  max-width:var(--c2d-banner-max-width,1320px) !important;
  height:var(--c2d-banner-height,560px) !important;
  min-height:var(--c2d-banner-height,560px) !important;
  margin:var(--c2d-banner-margin-top,8px) var(--c2d-banner-margin-right,0px) var(--c2d-banner-margin-bottom,22px) var(--c2d-banner-margin-left,0px) !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  border-radius:clamp(18px,2vw,30px) !important;
  border:1px solid rgba(74,182,255,.14) !important;
  background:
    radial-gradient(circle at 83% 50%, rgba(7,160,255,.13), transparent 30%),
    radial-gradient(circle at 12% 20%, rgba(92,64,255,.10), transparent 34%),
    linear-gradient(120deg,#06111c 0%,#071724 48%,#08131e 100%) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.c2d-phone-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,182,255,.055),transparent 42%,rgba(6,182,255,.035)),
    repeating-linear-gradient(115deg,transparent 0 80px,rgba(255,255,255,.018) 81px,transparent 82px);
  opacity:.7;
}

.c2d-phone-banner::after{
  content:"";
  position:absolute;
  width:42%;
  height:75%;
  right:4%;
  top:13%;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle,rgba(7,188,255,.14),rgba(7,188,255,.035) 45%,transparent 72%);
  filter:blur(16px);
}

.c2d-phone-banner-stage{
  position:absolute !important;
  inset:0 !important;
  height:100% !important;
  min-height:0 !important;
  padding:var(--c2d-banner-padding-top,18px) var(--c2d-banner-padding-right,18px) var(--c2d-banner-padding-bottom,44px) var(--c2d-banner-padding-left,18px) !important;
  display:block !important;
  box-sizing:border-box !important;
  z-index:1 !important;
}

.c2d-banner-card-viewport{
  position:absolute !important;
  left:var(--c2d-banner-card-viewport-left,28px) !important;
  right:var(--c2d-banner-card-viewport-right,34%) !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  perspective:var(--c2d-banner-perspective,1600px) !important;
  perspective-origin:50% 50% !important;
  z-index:3 !important;
  direction:ltr !important;
}

.c2d-banner-card-track{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:visible !important;
  transform-style:preserve-3d !important;
}

.c2d-banner-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:clamp(12px,2vw,34px) !important;
  padding:clamp(28px,4vw,58px) clamp(22px,3.5vw,58px) clamp(52px,5vw,72px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(-108%,0,0) rotateY(0deg) scale(.985) !important;
  transform-origin:center center !important;
  transform-style:preserve-3d !important;
  transition:
    transform var(--c2d-banner-duration,900ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),
    opacity var(--c2d-banner-duration,900ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),
    visibility 0s linear var(--c2d-banner-duration,900ms) !important;
  will-change:transform,opacity !important;
  z-index:1 !important;
}

.c2d-banner-slide.is-hidden{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  z-index:1 !important;
}

.c2d-banner-slide.is-current{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate3d(0,0,0) rotateY(0deg) scale(1) !important;
  z-index:5 !important;
  transition:
    transform var(--c2d-banner-duration,900ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),
    opacity var(--c2d-banner-duration,900ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)) !important;
}

.c2d-banner-slide.is-in-left{
  opacity:0 !important;
  visibility:visible !important;
  transform:translate3d(-108%,0,0) rotateY(7deg) scale(.965) !important;
  z-index:6 !important;
}

.c2d-banner-slide.is-in-right{
  opacity:0 !important;
  visibility:visible !important;
  transform:translate3d(108%,0,0) rotateY(-7deg) scale(.965) !important;
  z-index:6 !important;
}

.c2d-banner-slide.is-out-right{
  opacity:0 !important;
  visibility:visible !important;
  transform:translate3d(108%,0,0) rotateY(-7deg) scale(.965) !important;
  z-index:4 !important;
}

.c2d-banner-slide.is-out-left{
  opacity:0 !important;
  visibility:visible !important;
  transform:translate3d(-108%,0,0) rotateY(7deg) scale(.965) !important;
  z-index:4 !important;
}

/* Subtle depth without a separate card shell. */
.c2d-banner-slide::before{
  content:"";
  position:absolute;
  left:2%;
  top:14%;
  width:52%;
  height:72%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(9,183,255,.10),transparent 68%);
  filter:blur(18px);
  pointer-events:none;
  z-index:-1;
}

.c2d-banner-slide-copy{
  position:relative !important;
  z-index:3 !important;
  width:min(100%,760px) !important;
  max-width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  direction:ltr !important;
}

.c2d-banner-slide-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:0 0 12px;
  padding:7px 13px;
  border:1px solid rgba(6,182,255,.38);
  border-radius:999px;
  background:rgba(6,182,255,.075);
  color:#7fdcff;
  font-size:clamp(10px,.85vw,13px);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 0 24px rgba(6,182,255,.07);
}

.c2d-banner-slide-h1{
  max-width:100%;
  margin:0 0 9px;
  color:#f4fbff;
  font-size:clamp(30px,4.15vw,58px);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 8px 30px rgba(0,0,0,.26);
}

.c2d-banner-slide-h2{
  max-width:92%;
  margin:0;
  color:#bcecff;
  font-size:clamp(17px,1.7vw,27px);
  line-height:1.24;
  font-weight:750;
  text-wrap:balance;
}

.c2d-banner-slide-accent{
  width:clamp(72px,8vw,116px);
  height:4px;
  margin:18px 0 15px;
  border-radius:999px;
  background:linear-gradient(90deg,#08b9ff,#6f5cff,transparent);
  box-shadow:0 0 18px rgba(6,182,255,.28);
}

.c2d-banner-slide-address{
  max-width:92%;
  color:rgba(219,235,245,.72);
  font-size:clamp(11px,.92vw,14px);
  line-height:1.55;
  margin:0 0 6px;
}

.c2d-banner-slide-url{
  color:#23bfff;
  font-size:clamp(13px,1.12vw,17px);
  line-height:1.35;
  font-weight:850;
}

.c2d-banner-slide-image{
  position:absolute !important;
  right:2%;
  top:50%;
  width:min(38%,360px);
  max-height:78%;
  transform:translateY(-50%) translateZ(var(--c2d-banner-depth,24px));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  pointer-events:none;
}

.c2d-banner-slide-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.34));
}

.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  position:absolute !important;
  z-index:12 !important;
  right:var(--c2d-logo-right,5%) !important;
  left:auto !important;
  top:var(--c2d-logo-top,50%) !important;
  width:var(--c2d-logo-width,310px) !important;
  height:var(--c2d-logo-height,310px) !important;
  max-width:31% !important;
  max-height:calc(100% - 70px) !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
}

.c2d-banner-fixed-logo .c2d-logo-halo{
  position:absolute;
  inset:4%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,255,.12),transparent 65%);
  filter:blur(9px);
  z-index:0;
}

.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  position:relative;
  z-index:1;
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 18px 34px rgba(6,182,255,.34)) !important;
}

.c2d-phone-banner-dots{
  position:absolute !important;
  z-index:30 !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:var(--c2d-banner-dots-bottom,14px) !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:var(--c2d-banner-dots-gap,9px) !important;
  margin:0 !important;
  padding:0 !important;
}

.c2d-phone-banner-dots .c2d-banner-dot{
  width:var(--c2d-banner-dots-size,9px) !important;
  height:var(--c2d-banner-dots-size,9px) !important;
  min-width:var(--c2d-banner-dots-size,9px) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(185,211,227,.36) !important;
  box-shadow:none !important;
  transition:transform .25s ease,background .25s ease,width .25s ease !important;
}

.c2d-phone-banner-dots .c2d-banner-dot.active{
  width:calc(var(--c2d-banner-dots-size,9px) * 2.35) !important;
  background:#12bfff !important;
  transform:none !important;
  box-shadow:0 0 0 4px rgba(6,182,255,.12),0 0 18px rgba(6,182,255,.2) !important;
}

/* RTL affects slide text and direction only — never the fixed logo. */
body.lang-ur .c2d-banner-slide-copy{
  align-items:flex-end !important;
  text-align:right !important;
  direction:rtl !important;
}
body.lang-ur .c2d-banner-slide-kicker{letter-spacing:0;text-transform:none;}
body.lang-ur .c2d-banner-slide-accent{background:linear-gradient(270deg,#08b9ff,#6f5cff,transparent);}
body.lang-ur .c2d-banner-slide-image{right:auto;left:2%;}
body.lang-ur .c2d-banner-slide{
  direction:rtl !important;
  justify-content:flex-end !important;
}

/* Tablet */
@media (max-width:1100px){
  .c2d-phone-banner{
    height:var(--c2d-banner-tablet-height,500px) !important;
    min-height:var(--c2d-banner-tablet-height,500px) !important;
  }
  .c2d-banner-card-viewport{
    left:22px !important;
    right:34% !important;
  }
  .c2d-banner-slide{padding:32px 34px 62px !important;}
  .c2d-banner-slide-h1{font-size:clamp(28px,4.7vw,48px);}
  .c2d-banner-slide-h2{font-size:clamp(15px,2vw,22px);}
  .c2d-banner-fixed-logo{
    width:var(--c2d-tablet-logo-width,250px) !important;
    height:var(--c2d-tablet-logo-height,250px) !important;
    right:3% !important;
  }
}

/* Mobile: keep the same hero concept, not a stacked popup/card. */
@media (max-width:760px){
  .c2d-phone-banner{
    height:var(--c2d-banner-mobile-height,400px) !important;
    min-height:var(--c2d-banner-mobile-height,400px) !important;
    border-radius:18px !important;
  }
  .c2d-banner-card-viewport{
    left:10px !important;
    right:10px !important;
    top:0 !important;
    bottom:0 !important;
  }
  .c2d-banner-slide{
    padding:24px 20px 58px !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }
  .c2d-banner-slide-copy{
    width:66% !important;
    padding-top:12px;
  }
  .c2d-banner-slide-kicker{font-size:9px;padding:6px 9px;margin-bottom:9px;}
  .c2d-banner-slide-h1{font-size:clamp(23px,6.5vw,34px);line-height:1.04;}
  .c2d-banner-slide-h2{font-size:clamp(13px,3.9vw,18px);max-width:100%;}
  .c2d-banner-slide-accent{height:3px;margin:12px 0 10px;}
  .c2d-banner-slide-address{font-size:9.5px;line-height:1.4;}
  .c2d-banner-slide-url{font-size:11px;}
  .c2d-banner-fixed-logo{
    right:2% !important;
    top:50% !important;
    width:var(--c2d-mobile-logo-width,190px) !important;
    height:var(--c2d-mobile-logo-height,190px) !important;
    max-width:36% !important;
    max-height:calc(100% - 82px) !important;
    transform:translateY(-50%) !important;
  }
  body.lang-ur .c2d-banner-slide{
    justify-content:flex-start !important;
  }
  body.lang-ur .c2d-banner-slide-copy{
    width:66% !important;
  }
  body.lang-ur .c2d-banner-slide-image{display:none !important;}
}

/* Small mobile */
@media (max-width:420px){
  .c2d-phone-banner{
    height:var(--c2d-banner-small-height,360px) !important;
    min-height:var(--c2d-banner-small-height,360px) !important;
  }
  .c2d-banner-slide{padding:20px 14px 54px !important;}
  .c2d-banner-slide-copy{width:67% !important;padding-top:8px;}
  .c2d-banner-slide-kicker{font-size:8px;padding:5px 8px;}
  .c2d-banner-slide-h1{font-size:22px;}
  .c2d-banner-slide-h2{font-size:12px;}
  .c2d-banner-slide-address{font-size:8.5px;}
  .c2d-banner-slide-url{font-size:10.5px;}
  .c2d-banner-fixed-logo{
    right:1% !important;
    width:var(--c2d-small-logo-width,150px) !important;
    height:var(--c2d-small-logo-height,150px) !important;
    max-width:35% !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .c2d-banner-slide{
    transition:none !important;
  }
}


/* =========================================================
   C2D V34 FINAL BANNER POLISH — theme-aware + large logo + responsive
   Additive override only; existing slider engine/data remain intact.
   ========================================================= */
.c2d-phone-banner{
  --c2d-banner-surface:linear-gradient(135deg,#07111c 0%,#0b2030 48%,#07101b 100%);
  --c2d-banner-border:rgba(73,183,255,.24);
  --c2d-banner-copy:#f6fbff;
  --c2d-banner-sub:#c6edff;
  --c2d-banner-muted:#a9bacb;
  --c2d-banner-accent:#12bfff;
  position:relative!important;
  width:100%!important;
  max-width:var(--c2d-banner-max-width,1320px)!important;
  margin:var(--c2d-banner-margin-top,8px) auto var(--c2d-banner-margin-bottom,22px)!important;
  min-height:var(--c2d-banner-min-h,600px)!important;
  height:var(--c2d-banner-height,600px)!important;
  max-height:var(--c2d-banner-max-height,1000px)!important;
  border-radius:24px!important;
  border:1px solid var(--c2d-banner-border)!important;
  background:var(--c2d-banner-surface)!important;
  box-shadow:0 26px 70px rgba(2,20,36,.28),inset 0 1px 0 rgba(255,255,255,.06)!important;
  isolation:isolate!important;
}
.c2d-phone-banner::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 84% 48%,rgba(0,191,255,.16),transparent 28%),radial-gradient(circle at 18% 60%,rgba(112,75,255,.10),transparent 30%);z-index:0;}
.c2d-phone-banner-stage{z-index:1!important;}
.c2d-banner-card-viewport{left:28px!important;right:33%!important;top:0!important;bottom:0!important;}
.c2d-banner-slide{padding:clamp(34px,4.4vw,66px) clamp(28px,4.2vw,68px) 76px!important;}
.c2d-banner-slide-copy{width:min(100%,780px)!important;}
.c2d-banner-slide-kicker{font-size:clamp(11px,1vw,14px)!important;padding:8px 15px!important;margin-bottom:14px!important;color:#8fe2ff!important;background:rgba(18,191,255,.08)!important;border-color:rgba(18,191,255,.42)!important;}
.c2d-banner-slide-h1{font-size:clamp(38px,4.6vw,66px)!important;line-height:1.02!important;margin-bottom:13px!important;letter-spacing:-.04em!important;color:var(--c2d-banner-copy)!important;text-shadow:0 10px 34px rgba(0,0,0,.28)!important;}
.c2d-banner-slide-h2{font-size:clamp(20px,2.05vw,31px)!important;line-height:1.22!important;max-width:96%!important;color:var(--c2d-banner-sub)!important;}
.c2d-banner-slide-accent{width:clamp(90px,10vw,135px)!important;height:5px!important;margin:21px 0 17px!important;background:linear-gradient(90deg,#08b9ff,#7c5cff,transparent)!important;}
.c2d-banner-slide-address{font-size:clamp(12px,1.02vw,15px)!important;line-height:1.55!important;color:var(--c2d-banner-muted)!important;max-width:96%!important;}
.c2d-banner-slide-url{font-size:clamp(15px,1.35vw,20px)!important;color:#39c7ff!important;}
.c2d-banner-fixed-logo,.c2d-banner-fixed-logo img{max-width:none!important;}
.c2d-banner-fixed-logo{right:2.5%!important;width:430px!important;height:430px!important;max-height:calc(100% - 90px)!important;}
.c2d-banner-fixed-logo img{filter:drop-shadow(0 22px 44px rgba(6,182,255,.38))!important;}
.c2d-banner-slide-image{width:min(34%,var(--c2d-slide-image-w,640px))!important;height:min(76%,var(--c2d-slide-image-h,420px))!important;max-width:var(--c2d-slide-image-w,640px)!important;max-height:var(--c2d-slide-image-h,420px)!important;}
.c2d-banner-slide-image img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;}
.c2d-phone-banner-dots{bottom:var(--c2d-banner-dots-bottom,16px)!important;}

/* Automatic banner surface/readability in Light Mode. */
body[data-theme="light"] .c2d-phone-banner,html[data-theme="light"] .c2d-phone-banner{
  --c2d-banner-surface:linear-gradient(135deg,#f7fbff 0%,#eaf5ff 52%,#f8fbff 100%);
  --c2d-banner-border:rgba(12,92,150,.16);
  --c2d-banner-copy:#071827;
  --c2d-banner-sub:#16446b;
  --c2d-banner-muted:#50657a;
  background:var(--c2d-banner-surface)!important;
  box-shadow:0 22px 58px rgba(15,55,85,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body[data-theme="light"] .c2d-phone-banner::after,html[data-theme="light"] .c2d-phone-banner::after{background:radial-gradient(circle at 84% 48%,rgba(0,163,255,.11),transparent 28%),radial-gradient(circle at 18% 60%,rgba(116,80,255,.08),transparent 30%);}
body[data-theme="light"] .c2d-banner-slide-kicker,html[data-theme="light"] .c2d-banner-slide-kicker{color:#0875b6!important;background:rgba(8,120,220,.07)!important;border-color:rgba(8,120,220,.22)!important;}
body[data-theme="light"] .c2d-banner-slide-h1,html[data-theme="light"] .c2d-banner-slide-h1{color:#071827!important;text-shadow:0 8px 24px rgba(31,71,105,.10)!important;}
body[data-theme="light"] .c2d-banner-slide-h2,html[data-theme="light"] .c2d-banner-slide-h2{color:#16446b!important;}
body[data-theme="light"] .c2d-banner-slide-address,html[data-theme="light"] .c2d-banner-slide-address{color:#50657a!important;}

/* Dark mode: high contrast, no washed-out text. */
body[data-theme="dark"] .c2d-phone-banner,html[data-theme="dark"] .c2d-phone-banner{--c2d-banner-surface:linear-gradient(135deg,#050b12 0%,#0a1b2a 48%,#040a11 100%);}

@media (max-width:1100px){
  .c2d-phone-banner{height:var(--c2d-banner-tablet-height,520px)!important;min-height:var(--c2d-banner-tablet-height,520px)!important;}
  .c2d-banner-card-viewport{left:22px!important;right:34%!important;}
  .c2d-banner-fixed-logo{right:2%!important;width:330px!important;height:330px!important;max-width:34%!important;max-height:calc(100% - 80px)!important;}
  .c2d-banner-slide-h1{font-size:clamp(34px,5.1vw,56px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(18px,2.25vw,26px)!important;}
}
@media (max-width:760px){
  .c2d-phone-banner{height:var(--c2d-banner-mobile-height,440px)!important;min-height:var(--c2d-banner-mobile-height,440px)!important;border-radius:18px!important;}
  .c2d-banner-card-viewport{left:10px!important;right:10px!important;}
  .c2d-banner-slide{padding:28px 20px 62px!important;}
  .c2d-banner-slide-copy{width:64%!important;padding-top:10px!important;}
  .c2d-banner-slide-h1{font-size:clamp(27px,7.5vw,40px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(15px,4.3vw,20px)!important;}
  .c2d-banner-slide-address{font-size:10px!important;}
  .c2d-banner-slide-url{font-size:12px!important;}
  .c2d-banner-fixed-logo{right:1.5%!important;width:220px!important;height:220px!important;max-width:35%!important;max-height:calc(100% - 100px)!important;}
  .c2d-banner-slide-image{display:none!important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:var(--c2d-banner-small-height,390px)!important;min-height:var(--c2d-banner-small-height,390px)!important;}
  .c2d-banner-slide{padding:24px 14px 58px!important;}
  .c2d-banner-slide-copy{width:65%!important;padding-top:6px!important;}
  .c2d-banner-slide-h1{font-size:24px!important;}
  .c2d-banner-slide-h2{font-size:13px!important;}
  .c2d-banner-slide-address{font-size:9px!important;}
  .c2d-banner-slide-url{font-size:11px!important;}
  .c2d-banner-fixed-logo{right:1%!important;width:185px!important;height:185px!important;max-width:37%!important;}
}


/* =========================================================
   C2D REFERENCE IMAGE SCALE — FINAL DATA-SAFE POLISH
   Uses the existing hero slider engine; no replacement slider/card system.
   The supplied reference image is used as the visual target for logo scale.
   ========================================================= */
.c2d-phone-banner{
  --c2d-banner-surface:linear-gradient(135deg,#06101a 0%,#0b2233 52%,#07111b 100%);
  --c2d-banner-border:rgba(91,193,255,.25);
  --c2d-banner-copy:#f7fbff;
  --c2d-banner-sub:#c9eeff;
  --c2d-banner-muted:#a9bdcf;
  position:relative!important;
  width:100%!important;
  max-width:var(--c2d-banner-max-width,1320px)!important;
  min-height:var(--c2d-banner-min-h,620px)!important;
  height:var(--c2d-banner-height,620px)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:var(--c2d-banner-surface)!important;
  border:1px solid var(--c2d-banner-border)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.c2d-phone-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0;
  background:radial-gradient(circle at 82% 50%,rgba(6,182,255,.16),transparent 29%),radial-gradient(circle at 17% 60%,rgba(118,78,255,.10),transparent 32%);
}
.c2d-phone-banner-stage{position:relative!important;z-index:1!important;height:100%!important;min-height:100%!important;}
.c2d-banner-card-viewport{
  left:24px!important;right:var(--c2d-banner-card-viewport-right,39%)!important;top:0!important;bottom:0!important;
  overflow:visible!important;perspective:var(--c2d-banner-perspective,1750px)!important;
}
.c2d-banner-slide{
  padding:48px 52px 78px!important;
  gap:0!important;
}
.c2d-banner-slide-copy{
  width:100%!important;max-width:760px!important;min-height:420px!important;
  justify-content:center!important;align-items:flex-start!important;text-align:left!important;
}
.c2d-banner-slide-kicker{font-size:clamp(12px,1vw,15px)!important;padding:9px 16px!important;margin-bottom:16px!important;}
.c2d-banner-slide-h1{
  font-size:clamp(42px,4.7vw,70px)!important;line-height:1.01!important;
  margin-bottom:14px!important;letter-spacing:-.045em!important;
}
.c2d-banner-slide-h2{font-size:clamp(21px,2.15vw,32px)!important;line-height:1.2!important;max-width:98%!important;}
.c2d-banner-slide-accent{width:clamp(100px,11vw,145px)!important;height:5px!important;margin:22px 0 18px!important;}
.c2d-banner-slide-address{font-size:clamp(12px,1.03vw,15px)!important;max-width:98%!important;}
.c2d-banner-slide-url{font-size:clamp(16px,1.4vw,21px)!important;}

/* Reference-image inspired large logo stage: large, clean, centered on the right. */
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  right:var(--c2d-logo-right,2%)!important;left:auto!important;top:var(--c2d-logo-top,50%)!important;
  width:min(var(--c2d-logo-width,540px),42%)!important;
  height:min(var(--c2d-logo-height,440px),78%)!important;
  max-width:none!important;max-height:none!important;
  transform:translateY(-50%)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,rgba(5,10,16,.96),rgba(0,0,0,.88))!important;
  border:1px solid rgba(45,176,255,.20)!important;
  box-shadow:0 26px 64px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05),0 0 44px rgba(0,160,255,.07)!important;
  padding:18px!important;box-sizing:border-box!important;
}
.c2d-banner-fixed-logo .c2d-logo-halo{
  inset:-12%!important;border-radius:30px!important;
  background:radial-gradient(circle,rgba(0,191,255,.18),rgba(86,64,255,.06) 48%,transparent 72%)!important;
  filter:blur(12px)!important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width:100%!important;height:100%!important;object-fit:contain!important;
  filter:drop-shadow(0 20px 42px rgba(6,182,255,.40))!important;
}
.c2d-phone-banner-dots{bottom:var(--c2d-banner-dots-bottom,16px)!important;}

/* Light mode: banner surface becomes light, while the C2D logo stage stays dark for maximum logo clarity. */
body[data-theme="light"] .c2d-phone-banner,html[data-theme="light"] .c2d-phone-banner{
  --c2d-banner-surface:linear-gradient(135deg,#f7fbff 0%,#eaf5ff 52%,#f8fbff 100%);
  --c2d-banner-border:rgba(12,92,150,.17);
  --c2d-banner-copy:#071827;--c2d-banner-sub:#16446b;--c2d-banner-muted:#50657a;
  box-shadow:0 24px 62px rgba(15,55,85,.13),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body[data-theme="light"] .c2d-phone-banner::after,html[data-theme="light"] .c2d-phone-banner::after{
  background:radial-gradient(circle at 82% 50%,rgba(0,163,255,.10),transparent 29%),radial-gradient(circle at 17% 60%,rgba(116,80,255,.07),transparent 32%);
}
body[data-theme="light"] .c2d-banner-fixed-logo,html[data-theme="light"] .c2d-banner-fixed-logo{
  border-color:rgba(8,120,190,.18)!important;
  box-shadow:0 24px 54px rgba(25,66,100,.18),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

@media (max-width:1100px){
  .c2d-phone-banner{height:var(--c2d-banner-tablet-height,540px)!important;min-height:var(--c2d-banner-tablet-height,540px)!important;}
  .c2d-banner-card-viewport{left:22px!important;right:var(--c2d-banner-card-viewport-right,39%)!important;}
  .c2d-banner-slide{padding:40px 36px 70px!important;}
  .c2d-banner-slide-copy{min-height:390px!important;}
  .c2d-banner-slide-h1{font-size:clamp(36px,5.3vw,58px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(18px,2.35vw,27px)!important;}
  .c2d-banner-fixed-logo{width:min(var(--c2d-tablet-logo-width,390px),40%)!important;height:min(var(--c2d-tablet-logo-height,320px),74%)!important;padding:14px!important;}
}
@media (max-width:760px){
  .c2d-phone-banner{height:var(--c2d-banner-mobile-height,460px)!important;min-height:var(--c2d-banner-mobile-height,460px)!important;border-radius:18px!important;}
  .c2d-banner-card-viewport{left:10px!important;right:10px!important;}
  .c2d-banner-slide{padding:30px 18px 60px!important;}
  .c2d-banner-slide-copy{width:61%!important;min-height:350px!important;padding-top:8px!important;}
  .c2d-banner-slide-kicker{font-size:9px!important;padding:6px 9px!important;margin-bottom:10px!important;}
  .c2d-banner-slide-h1{font-size:clamp(25px,7.4vw,38px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,4.2vw,20px)!important;}
  .c2d-banner-slide-address{font-size:9.5px!important;}
  .c2d-banner-slide-url{font-size:12px!important;}
  .c2d-banner-fixed-logo{right:1.5%!important;width:min(var(--c2d-mobile-logo-width,240px),38%)!important;height:min(var(--c2d-mobile-logo-height,220px),54%)!important;padding:10px!important;border-radius:18px!important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:var(--c2d-banner-small-height,410px)!important;min-height:var(--c2d-banner-small-height,410px)!important;}
  .c2d-banner-slide{padding:24px 12px 56px!important;}
  .c2d-banner-slide-copy{width:61%!important;min-height:315px!important;}
  .c2d-banner-slide-h1{font-size:23px!important;}
  .c2d-banner-slide-h2{font-size:12.5px!important;}
  .c2d-banner-slide-address{font-size:8.5px!important;}
  .c2d-banner-slide-url{font-size:10.5px!important;}
  .c2d-banner-fixed-logo{right:1%!important;width:min(var(--c2d-small-logo-width,215px),38%)!important;height:min(var(--c2d-small-logo-height,190px),50%)!important;padding:8px!important;border-radius:16px!important;}
}


/* ================================================================
   C2D FINAL RESPONSIVE ALIGNMENT — MOBILE + LAPTOP POLISH
   Requested fixes: remove navbar/banner dead space, prevent mobile
   overlap, enlarge desktop logo, balance logo/slider scale, and make
   the H2 accent line extend to the end of the text area.
   ================================================================ */
.hero{
  padding:20px 0 30px !important;
}
.banner-wrap.c2d-phone-banner{
  margin-top:0 !important;
  margin-bottom:22px !important;
}
.c2d-banner-card-viewport{
  left:24px !important;
  right:42% !important;
}
.c2d-banner-slide-copy{
  width:54% !important;
  max-width:none !important;
  min-height:0 !important;
}
.c2d-banner-slide-h2{
  max-width:100% !important;
}
.c2d-banner-slide-accent{
  width:100% !important;
  max-width:100% !important;
  background:linear-gradient(90deg,#08b9ff 0%,#695cff 48%,#c74cff 78%,rgba(199,76,255,.12) 100%) !important;
  box-shadow:0 0 20px rgba(6,182,255,.22) !important;
}
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  right:2% !important;
  width:min(var(--c2d-logo-width,600px),42%) !important;
  height:min(var(--c2d-logo-height,500px),80%) !important;
  max-width:none !important;
  max-height:none !important;
}

/* Keep the hero-to-delivery spacing visually equal to the banner/nav spacing. */
.hero-grid{ margin-top:0 !important; }

@media (min-width:1101px){
  .c2d-phone-banner{
    height:var(--c2d-banner-height,620px) !important;
    min-height:var(--c2d-banner-height,620px) !important;
  }
  .c2d-banner-slide{ padding:48px 44px 78px !important; }
  .c2d-banner-slide-h1{ font-size:clamp(44px,4.7vw,70px) !important; }
  .c2d-banner-slide-h2{ font-size:clamp(21px,2.1vw,32px) !important; }
  .c2d-banner-fixed-logo{
    width:min(var(--c2d-logo-width,600px),43%) !important;
    height:min(var(--c2d-logo-height,500px),80%) !important;
  }
}

@media (max-width:1100px) and (min-width:761px){
  .hero{ padding:18px 0 28px !important; }
  .c2d-phone-banner{
    height:var(--c2d-banner-tablet-height,540px) !important;
    min-height:var(--c2d-banner-tablet-height,540px) !important;
  }
  .c2d-banner-card-viewport{ left:20px !important; right:43% !important; }
  .c2d-banner-slide{ padding:38px 30px 70px !important; }
  .c2d-banner-slide-copy{ width:55% !important; }
  .c2d-banner-slide-h1{ font-size:clamp(36px,5.1vw,58px) !important; }
  .c2d-banner-slide-h2{ font-size:clamp(18px,2.2vw,27px) !important; }
  .c2d-banner-fixed-logo{
    right:2% !important;
    width:min(var(--c2d-tablet-logo-width,430px),40%) !important;
    height:min(var(--c2d-tablet-logo-height,360px),72%) !important;
    padding:14px !important;
  }
}

/* Phones: use a deliberate two-zone composition instead of forcing the
   desktop two-column geometry into a narrow viewport. Text remains upper/left;
   the large C2D logo occupies the lower/right zone. No overlap or clipping. */
@media (max-width:760px){
  .hero{ padding:12px 0 24px !important; }
  .banner-wrap.c2d-phone-banner{
    height:var(--c2d-banner-mobile-height,540px) !important;
    min-height:var(--c2d-banner-mobile-height,540px) !important;
    margin-top:0 !important;
    margin-bottom:22px !important;
    border-radius:18px !important;
  }
  .c2d-phone-banner-stage{ padding:0 !important; }
  .c2d-banner-card-viewport{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    overflow:hidden !important;
  }
  .c2d-banner-slide{
    display:block !important;
    padding:24px 18px 62px !important;
    overflow:hidden !important;
  }
  .c2d-banner-slide-copy{
    width:54% !important;
    max-width:54% !important;
    min-height:0 !important;
    padding:0 !important;
    justify-content:flex-start !important;
  }
  .c2d-banner-slide-kicker{
    font-size:9px !important;
    padding:6px 9px !important;
    margin-bottom:10px !important;
    letter-spacing:.10em !important;
  }
  .c2d-banner-slide-h1{
    font-size:clamp(27px,7.6vw,39px) !important;
    line-height:1.02 !important;
    margin-bottom:10px !important;
  }
  .c2d-banner-slide-h2{
    font-size:clamp(14px,4.15vw,19px) !important;
    line-height:1.22 !important;
    max-width:100% !important;
  }
  .c2d-banner-slide-accent{
    width:100% !important;
    height:4px !important;
    margin:14px 0 11px !important;
  }
  .c2d-banner-slide-address{
    font-size:9px !important;
    line-height:1.38 !important;
    max-width:100% !important;
  }
  .c2d-banner-slide-url{ font-size:12px !important; }

  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    top:auto !important;
    right:2% !important;
    bottom:58px !important;
    transform:none !important;
    width:min(var(--c2d-mobile-logo-width,210px),40%) !important;
    height:min(var(--c2d-mobile-logo-height,170px),31%) !important;
    max-width:none !important;
    max-height:none !important;
    padding:8px !important;
    border-radius:16px !important;
  }
  .c2d-banner-fixed-logo .c2d-logo-halo{ inset:-10% !important; }
  .c2d-banner-fixed-logo img{ width:100% !important; height:100% !important; }
  .c2d-phone-banner-dots{ bottom:14px !important; }
}

@media (max-width:420px){
  .hero{ padding-top:10px !important; }
  .banner-wrap.c2d-phone-banner{
    height:var(--c2d-banner-small-height,520px) !important;
    min-height:var(--c2d-banner-small-height,520px) !important;
  }
  .c2d-banner-slide{ padding:20px 14px 58px !important; }
  .c2d-banner-slide-copy{ width:53% !important; max-width:53% !important; }
  .c2d-banner-slide-h1{ font-size:24px !important; }
  .c2d-banner-slide-h2{ font-size:13px !important; }
  .c2d-banner-slide-address{ font-size:8.5px !important; }
  .c2d-banner-slide-url{ font-size:11px !important; }
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    right:2% !important;
    bottom:58px !important;
    width:min(var(--c2d-small-logo-width,190px),40%) !important;
    height:min(var(--c2d-small-logo-height,155px),30%) !important;
    padding:7px !important;
  }
}

/* ================================================================
   C2D BANNER FINAL — HALF/HALF COMPOSITION + INTERACTION POLISH
   Based directly on the latest supplied reference screenshot.
   Existing slider/data remain intact; this is presentation-only.
   ================================================================ */
.c2d-phone-banner{
  --c2d-half-gap:0px;
}

/* The banner is deliberately split into two equal visual zones:
   left = live slider text, right = fixed C2D logo. */
.c2d-banner-card-viewport{
  left:18px !important;
  right:50% !important;
  width:auto !important;
}

.c2d-banner-slide{
  padding:34px 34px 72px !important;
}

/* Remove the small COMPUTER 2 DAY pill from the slide copy. */
.c2d-banner-slide-kicker{
  display:none !important;
}

/* Website URL sits above the heading, as requested. */
.c2d-banner-slide-copy{
  width:100% !important;
  max-width:100% !important;
  align-items:flex-end !important;
  text-align:right !important;
  justify-content:center !important;
}
.c2d-banner-slide-url{
  order:-5 !important;
  margin:0 0 13px !important;
  font-size:clamp(14px,1.25vw,20px) !important;
  line-height:1.25 !important;
  text-align:right !important;
}
.c2d-banner-slide-h1{
  width:100% !important;
  max-width:100% !important;
  text-align:right !important;
  margin:0 0 12px !important;
  font-size:clamp(40px,4.55vw,70px) !important;
  line-height:.98 !important;
  text-wrap:balance !important;
  position:relative;
  isolation:isolate;
  transition:filter .24s ease,text-shadow .24s ease,transform .24s ease;
}

/* The heading is dark/clean by default. Glow exists only while hovered
   with a real mouse or while the explicit click class is active. */
.c2d-banner-slide-h1::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:18% -6% 8% -6%;
  border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(0,191,255,.40),rgba(105,92,255,.16) 38%,transparent 72%);
  filter:blur(22px);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease;
}
@media (hover:hover) and (pointer:fine){
  .c2d-banner-slide-h1:hover{
    filter:drop-shadow(0 0 12px rgba(21,191,255,.70));
    text-shadow:0 0 10px rgba(21,191,255,.45),0 0 28px rgba(105,92,255,.30);
    transform:translateZ(0) scale(1.012);
  }
  .c2d-banner-slide-h1:hover::after{opacity:1;}
}
.c2d-banner-slide-h1.c2d-banner-h1-glow{
  filter:drop-shadow(0 0 12px rgba(21,191,255,.70));
  text-shadow:0 0 10px rgba(21,191,255,.45),0 0 28px rgba(105,92,255,.30);
  transform:translateZ(0) scale(1.012);
}
.c2d-banner-slide-h1.c2d-banner-h1-glow::after{opacity:1;}

/* Force the descriptive multi-line copy to use the entire center half. */
.c2d-banner-slide-h2{
  width:100% !important;
  max-width:100% !important;
  text-align:right !important;
  font-size:clamp(18px,2.0vw,31px) !important;
  line-height:1.18 !important;
  text-wrap:pretty !important;
}
.c2d-banner-slide-accent{
  width:100% !important;
  max-width:100% !important;
  margin:17px 0 13px !important;
  height:4px !important;
  background:linear-gradient(90deg,#08b9ff 0%,#6d5cff 45%,#c64cff 78%,#ff4f88 100%) !important;
  box-shadow:0 0 18px rgba(70,151,255,.28) !important;
}
.c2d-banner-slide-address{
  width:100% !important;
  max-width:100% !important;
  text-align:right !important;
  line-height:1.42 !important;
  font-size:clamp(11px,.95vw,15px) !important;
}

/* Right half: larger, taller and wider logo stage. */
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  left:52% !important;
  right:auto !important;
  top:50% !important;
  width:46% !important;
  height:86% !important;
  max-width:none !important;
  max-height:none !important;
  padding:18px !important;
  border-radius:28px !important;
  transform:translateY(-50%) !important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width:108% !important;
  height:106% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:translateX(-2%) scaleX(1.08) scaleY(1.08) !important;
  transform-origin:center center !important;
}

/* Desktop: make the two halves visually dominant and centered. */
@media (min-width:1101px){
  .c2d-phone-banner{
    height:var(--c2d-banner-height,620px) !important;
    min-height:var(--c2d-banner-height,620px) !important;
  }
  .c2d-banner-slide{padding:40px 42px 76px !important;}
  .c2d-banner-fixed-logo{
    left:52% !important;
    width:46% !important;
    height:86% !important;
  }
}

/* Laptop/tablet: retain the half/half concept without crowding. */
@media (max-width:1100px) and (min-width:761px){
  .c2d-phone-banner{
    height:var(--c2d-banner-tablet-height,540px) !important;
    min-height:var(--c2d-banner-tablet-height,540px) !important;
  }
  .c2d-banner-card-viewport{left:14px !important;right:50% !important;}
  .c2d-banner-slide{padding:34px 28px 68px !important;}
  .c2d-banner-slide-h1{font-size:clamp(34px,5vw,52px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(16px,2.35vw,25px) !important;}
  .c2d-banner-fixed-logo{
    left:52% !important;
    width:45% !important;
    height:82% !important;
    padding:14px !important;
  }
}

/* Phones: still half/half, but use a taller banner so text and logo never
   overlap. The logo remains entirely in its right half. */
@media (max-width:760px){
  .c2d-phone-banner{
    height:var(--c2d-banner-mobile-height,540px) !important;
    min-height:var(--c2d-banner-mobile-height,540px) !important;
    margin-bottom:18px !important;
  }
  .c2d-banner-card-viewport{
    left:8px !important;
    right:50% !important;
    top:0 !important;
    bottom:0 !important;
  }
  .c2d-banner-slide{
    padding:24px 14px 60px !important;
  }
  .c2d-banner-slide-copy{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
  }
  .c2d-banner-slide-url{
    font-size:11px !important;
    margin-bottom:9px !important;
  }
  .c2d-banner-slide-h1{
    font-size:clamp(25px,7.2vw,38px) !important;
    line-height:1.0 !important;
    margin-bottom:9px !important;
  }
  .c2d-banner-slide-h2{
    font-size:clamp(12.5px,3.7vw,18px) !important;
    line-height:1.18 !important;
  }
  .c2d-banner-slide-accent{height:3px !important;margin:12px 0 10px !important;}
  .c2d-banner-slide-address{font-size:8.8px !important;line-height:1.35 !important;}
  .c2d-banner-slide-url{font-size:11px !important;}
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    left:51.5% !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    width:46% !important;
    height:70% !important;
    max-width:none !important;
    max-height:none !important;
    padding:8px !important;
    border-radius:18px !important;
    transform:translateY(-50%) !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width:112% !important;
    height:108% !important;
    transform:translateX(-3%) scaleX(1.05) scaleY(1.08) !important;
  }
  .c2d-phone-banner-dots{bottom:10px !important;}
}

@media (max-width:420px){
  .c2d-phone-banner{
    height:var(--c2d-banner-small-height,500px) !important;
    min-height:var(--c2d-banner-small-height,500px) !important;
  }
  .c2d-banner-slide{padding:20px 11px 54px !important;}
  .c2d-banner-slide-url{font-size:9.5px !important;margin-bottom:7px !important;}
  .c2d-banner-slide-h1{font-size:23px !important;}
  .c2d-banner-slide-h2{font-size:12px !important;line-height:1.16 !important;}
  .c2d-banner-slide-address{font-size:7.8px !important;}
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    left:51.5% !important;
    width:46% !important;
    height:66% !important;
    padding:6px !important;
  }
}

/* Very wide/very tall screens: keep the visual center controlled instead of
   allowing either half to drift toward the outer edges. */
@media (min-width:1600px){
  .c2d-banner-slide{padding-left:54px !important;padding-right:54px !important;}
  .c2d-banner-fixed-logo{left:52% !important;width:46% !important;height:88% !important;}
}


/* ================================================================
   C2D COMPLETE BANNER — FINAL TWO-HALF RECOMPOSITION
   User reference: LEFT = BIG/TALL C2D LOGO, RIGHT = URL + TEXT + SLIDER.
   This is a targeted presentation override; existing slider/data remain.
   ================================================================ */
.c2d-phone-banner{
  --c2d-banner-gap-final:0px;
  --c2d-logo-panel-w:48%;
  --c2d-content-panel-w:52%;
  position:relative !important;
  overflow:hidden !important;
}

/* LEFT HALF: fixed logo. Keep the logo independent of LTR/RTL. */
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  left:1.5% !important;
  right:auto !important;
  top:50% !important;
  width:46.5% !important;
  height:88% !important;
  max-width:none !important;
  max-height:none !important;
  padding:14px !important;
  transform:translateY(-50%) !important;
  border-radius:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:12 !important;
}

.c2d-banner-fixed-logo .c2d-logo-halo{
  inset:-10% !important;
  opacity:.72 !important;
}

.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}

/* RIGHT HALF: the actual slider/content area. */
.c2d-banner-card-viewport{
  left:50% !important;
  right:1.25% !important;
  top:0 !important;
  bottom:0 !important;
  width:auto !important;
  overflow:hidden !important;
  z-index:5 !important;
}

.c2d-banner-slide{
  padding:42px 4.5% 76px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:left !important;
}

.c2d-banner-slide-copy{
  width:100% !important;
  max-width:100% !important;
  min-height:0 !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  direction:ltr !important;
  position:relative !important;
  z-index:8 !important;
  padding-right:2% !important;
}

/* Remove only the unwanted small Computer 2 Day pill. */
.c2d-banner-slide-kicker{display:none !important;}

/* URL is intentionally at the top of the right-half composition. */
.c2d-banner-slide-url{
  order:-10 !important;
  margin:0 0 12px !important;
  font-size:clamp(15px,1.35vw,22px) !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  text-align:left !important;
}

.c2d-banner-slide-h1{
  width:100% !important;
  max-width:100% !important;
  margin:0 0 12px !important;
  font-size:clamp(38px,4.25vw,68px) !important;
  line-height:.98 !important;
  text-align:left !important;
  letter-spacing:-.045em !important;
}

.c2d-banner-slide-h2{
  width:100% !important;
  max-width:100% !important;
  font-size:clamp(20px,2.05vw,32px) !important;
  line-height:1.18 !important;
  text-align:left !important;
  text-wrap:balance !important;
}

/* Multi-colour line extends across the useful center of the right half. */
.c2d-banner-slide-accent{
  width:100% !important;
  max-width:100% !important;
  height:5px !important;
  margin:18px 0 14px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#00baff 0%,#695cff 35%,#b84cff 68%,#ff4e8a 100%) !important;
  box-shadow:0 0 20px rgba(54,151,255,.26) !important;
}

.c2d-banner-slide-address{
  width:100% !important;
  max-width:100% !important;
  font-size:clamp(11px,.95vw,15px) !important;
  line-height:1.45 !important;
  text-align:left !important;
}

/* Uploaded slide images remain part of the existing slider, but live inside
   the RIGHT half rather than covering the logo. */
.c2d-banner-slide-image{
  right:3% !important;
  left:auto !important;
  top:auto !important;
  bottom:12% !important;
  width:min(44%,330px) !important;
  height:36% !important;
  max-height:36% !important;
  transform:translateZ(var(--c2d-banner-depth,24px)) !important;
  z-index:4 !important;
  opacity:.96 !important;
}

.c2d-banner-slide-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Dots stay on the complete-banner center line. */
.c2d-phone-banner-dots{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  bottom:12px !important;
  z-index:30 !important;
}

/* Interactive H1 backlight: OFF in normal state; hover/click only. */
.c2d-banner-slide-h1::after{
  opacity:0 !important;
}
.c2d-banner-slide-h1.c2d-banner-h1-glow::after{opacity:1 !important;}

@media (hover:hover) and (pointer:fine){
  .c2d-banner-slide-h1:hover{
    filter:drop-shadow(0 0 13px rgba(21,191,255,.72)) !important;
    text-shadow:0 0 10px rgba(21,191,255,.48),0 0 30px rgba(105,92,255,.34) !important;
    transform:translateZ(0) scale(1.012) !important;
  }
  .c2d-banner-slide-h1:hover::after{opacity:1 !important;}
}
.c2d-banner-slide-h1.c2d-banner-h1-glow{
  filter:drop-shadow(0 0 13px rgba(21,191,255,.72)) !important;
  text-shadow:0 0 10px rgba(21,191,255,.48),0 0 30px rgba(105,92,255,.34) !important;
}

/* Keep navigation/banner rhythm tight and intentional. */
.hero{padding-top:0 !important;}
.banner-wrap.c2d-phone-banner{margin-top:0 !important;margin-bottom:22px !important;}

/* Large/small desktop + laptop. */
@media (min-width:761px){
  .c2d-phone-banner{
    height:var(--c2d-banner-height,620px) !important;
    min-height:var(--c2d-banner-height,620px) !important;
  }
}

@media (max-width:1200px) and (min-width:761px){
  .c2d-banner-fixed-logo{left:1.5% !important;width:46% !important;height:84% !important;padding:10px !important;}
  .c2d-banner-card-viewport{left:50% !important;right:1% !important;}
  .c2d-banner-slide{padding:34px 4% 70px !important;}
  .c2d-banner-slide-h1{font-size:clamp(34px,4.8vw,56px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(17px,2.2vw,26px) !important;}
  .c2d-banner-slide-image{width:42% !important;max-height:32% !important;bottom:12% !important;}
}

/* Mobile/iPhone/iPad portrait: intelligently stack the two visual halves
   instead of shrinking a desktop two-column layout until it overlaps. */
@media (max-width:760px){
  .c2d-phone-banner{
    height:clamp(650px,150vw,780px) !important;
    min-height:clamp(650px,150vw,780px) !important;
    margin-bottom:18px !important;
  }
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    left:4% !important;
    right:auto !important;
    top:3% !important;
    width:92% !important;
    height:38% !important;
    max-width:none !important;
    max-height:none !important;
    padding:8px !important;
    transform:none !important;
    border-radius:22px !important;
  }
  .c2d-banner-card-viewport{
    left:3% !important;
    right:3% !important;
    top:42% !important;
    bottom:0 !important;
    width:auto !important;
  }
  .c2d-banner-slide{
    padding:20px 18px 52px !important;
    align-items:flex-start !important;
  }
  .c2d-banner-slide-copy{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    justify-content:flex-start !important;
  }
  .c2d-banner-slide-url{font-size:12px !important;margin-bottom:8px !important;}
  .c2d-banner-slide-h1{font-size:clamp(29px,8vw,42px) !important;line-height:1 !important;margin-bottom:9px !important;}
  .c2d-banner-slide-h2{font-size:clamp(15px,4.4vw,21px) !important;line-height:1.16 !important;}
  .c2d-banner-slide-accent{height:4px !important;margin:12px 0 10px !important;}
  .c2d-banner-slide-address{font-size:10px !important;line-height:1.35 !important;}
  .c2d-banner-slide-image{
    right:4% !important;
    left:auto !important;
    bottom:13% !important;
    width:46% !important;
    height:28% !important;
    max-height:28% !important;
  }
  .c2d-phone-banner-dots{bottom:9px !important;}
}

@media (max-width:420px){
  .c2d-phone-banner{height:690px !important;min-height:690px !important;}
  .c2d-banner-fixed-logo{top:2.5% !important;height:36% !important;}
  .c2d-banner-card-viewport{top:40% !important;}
  .c2d-banner-slide{padding:17px 14px 48px !important;}
  .c2d-banner-slide-url{font-size:10.5px !important;}
  .c2d-banner-slide-h1{font-size:26px !important;}
  .c2d-banner-slide-h2{font-size:13.5px !important;}
  .c2d-banner-slide-address{font-size:8.8px !important;}
  .c2d-banner-slide-image{width:43% !important;height:24% !important;max-height:24% !important;bottom:14% !important;}
}

@media (max-height:700px) and (max-width:760px){
  .c2d-phone-banner{height:620px !important;min-height:620px !important;}
  .c2d-banner-fixed-logo{height:34% !important;}
  .c2d-banner-card-viewport{top:38% !important;}
}

/* iPad landscape / short tablets: keep the two strong halves. */
@media (min-width:761px) and (max-height:700px){
  .c2d-phone-banner{height:500px !important;min-height:500px !important;}
  .c2d-banner-fixed-logo{height:84% !important;}
  .c2d-banner-slide{padding-top:26px !important;padding-bottom:58px !important;}
  .c2d-banner-slide-h1{font-size:clamp(32px,4vw,52px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(16px,1.9vw,24px) !important;}
}

/* Strict normal-state guarantee: H1 has no backlight until hover/click. */
.c2d-banner-slide-h1{
  text-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.c2d-banner-slide-h1::after{opacity:0 !important;}
@media (hover:hover) and (pointer:fine){
  .c2d-banner-slide-h1:hover{
    filter:drop-shadow(0 0 13px rgba(21,191,255,.72)) !important;
    text-shadow:0 0 10px rgba(21,191,255,.48),0 0 30px rgba(105,92,255,.34) !important;
    transform:translateZ(0) scale(1.012) !important;
  }
  .c2d-banner-slide-h1:hover::after{opacity:1 !important;}
}
.c2d-banner-slide-h1.c2d-banner-h1-glow{
  filter:drop-shadow(0 0 13px rgba(21,191,255,.72)) !important;
  text-shadow:0 0 10px rgba(21,191,255,.48),0 0 30px rgba(105,92,255,.34) !important;
  transform:translateZ(0) scale(1.012) !important;
}
.c2d-banner-slide-h1.c2d-banner-h1-glow::after{opacity:1 !important;}

/* ================================================================
   C2D COMPLETE BANNER DESIGN SYSTEM — FINAL SAFE OVERRIDE
   Existing slider/data remain intact. These rules only control the
   presentation of the existing hero banner.
   ================================================================ */
.c2d-phone-banner{
  display:block !important;
  width:var(--c2d-banner-width-pct,100%) !important;
  max-width:var(--c2d-banner-max-width,1320px) !important;
  border-radius:var(--c2d-banner-radius,24px) !important;
  border:var(--c2d-banner-border-width,1px) solid rgba(50,160,220,.20) !important;
  box-shadow:0 18px 55px rgba(0,0,0,var(--c2d-banner-shadow-strength,.22)) !important;
  background:var(--c2d-banner-light-background,#eef8ff) !important;
  gap:var(--c2d-banner-panel-gap,0px) !important;
}
body.dark .c2d-phone-banner, body.theme-dark .c2d-phone-banner, body[data-theme="dark"] .c2d-phone-banner{background:var(--c2d-banner-dark-background,#06131f) !important;}
body:not(.dark):not(.theme-dark):not([data-theme="dark"]) .c2d-phone-banner{background:var(--c2d-banner-light-background,#eef8ff) !important;}
.c2d-banner-fixed-logo,body.lang-ur .c2d-banner-fixed-logo{
  left:0 !important;right:auto !important;top:50% !important;
  width:calc(var(--c2d-logo-panel-width,48%) - var(--c2d-banner-panel-gap,0px)) !important;
  height:100% !important;padding:var(--c2d-logo-panel-padding,0px) !important;margin:0 !important;
  border-radius:var(--c2d-banner-radius,24px) !important;border:1px solid var(--c2d-logo-border,rgba(34,184,255,.25)) !important;
  background:var(--c2d-logo-background,#06131f) !important;box-shadow:none !important;transform:translateY(-50%) !important;
  overflow:hidden !important;display:flex !important;align-items:center !important;justify-content:center !important;
}
.c2d-banner-fixed-logo .c2d-logo-halo{inset:-4% !important;opacity:.45 !important;pointer-events:none !important;}
.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{
  display:block !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;
  object-fit:var(--c2d-logo-fit,cover) !important;object-position:center !important;
  transform:translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) scale(var(--c2d-logo-scale,1.12)) !important;
  transform-origin:center !important;border-radius:inherit !important;
}
.c2d-banner-card-viewport{left:var(--c2d-logo-panel-width,48%) !important;right:0 !important;top:0 !important;bottom:0 !important;width:calc(var(--c2d-content-panel-width,52%) - var(--c2d-banner-panel-gap,0px)) !important;overflow:hidden !important;display:block !important;}
.c2d-banner-slide{padding:var(--c2d-banner-padding-top,18px) var(--c2d-banner-padding-right,18px) var(--c2d-banner-padding-bottom,34px) var(--c2d-banner-padding-left,18px) !important;align-items:var(--c2d-content-vertical,center) !important;justify-content:center !important;text-align:var(--c2d-content-align,center) !important;}
.c2d-banner-slide-copy{width:var(--c2d-content-max-width,100%) !important;max-width:var(--c2d-content-max-width,100%) !important;gap:var(--c2d-content-gap,10px) !important;align-items:var(--c2d-content-align,center) !important;justify-content:center !important;text-align:var(--c2d-content-align,center) !important;padding:0 !important;}
.c2d-banner-slide-url{color:var(--c2d-banner-url-color,#17b8ff) !important;text-align:inherit !important;margin:0 0 8px !important;}
.c2d-banner-slide-h1{font-size:clamp(34px,var(--c2d-banner-h1-size,58px),100px) !important;text-align:inherit !important;margin:0 0 8px !important;color:var(--c2d-banner-text-color,#08213a) !important;}
.c2d-banner-slide-h2{font-size:clamp(16px,var(--c2d-banner-h2-size,27px),44px) !important;color:var(--c2d-banner-text-color,#08213a) !important;line-height:var(--c2d-banner-text-line-height,1.18) !important;text-align:inherit !important;}
.c2d-banner-slide-accent{height:var(--c2d-banner-accent-height,5px) !important;width:var(--c2d-banner-accent-width,100%) !important;max-width:var(--c2d-banner-accent-width,100%) !important;margin:14px 0 12px !important;}
.c2d-banner-slide-address{font-size:clamp(10px,1vw,15px) !important;line-height:1.4 !important;text-align:inherit !important;}
.c2d-banner-slide-image{z-index:6 !important;}
.c2d-phone-banner-dots{left:50% !important;right:auto !important;transform:translateX(-50%) !important;bottom:var(--c2d-dots-bottom,14px) !important;}
@media (max-width:1100px){
 .c2d-banner-fixed-logo{width:47% !important}.c2d-banner-card-viewport{left:47% !important;width:53% !important}
 .c2d-banner-slide{padding-left:22px !important;padding-right:18px !important}.c2d-banner-slide-h1{font-size:clamp(32px,4.4vw,52px) !important}.c2d-banner-slide-h2{font-size:clamp(16px,2.1vw,25px) !important}
}
@media (max-width:760px){
 .c2d-phone-banner{border-radius:18px !important}.c2d-banner-fixed-logo{left:0 !important;top:0 !important;width:100% !important;height:43% !important;transform:none !important;border-radius:18px 18px 0 0 !important}
 .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{transform:none !important;object-fit:contain !important}.c2d-banner-card-viewport{left:0 !important;right:0 !important;top:43% !important;width:100% !important;height:57% !important}
 .c2d-banner-slide{padding:12px 16px 42px !important;align-items:center !important}.c2d-banner-slide-copy{max-width:94% !important}.c2d-banner-slide-url{font-size:12px !important}
 .c2d-banner-slide-h1{font-size:clamp(27px,8vw,42px) !important}.c2d-banner-slide-h2{font-size:clamp(15px,4.2vw,21px) !important;line-height:1.18 !important}.c2d-banner-slide-address{font-size:10px !important}.c2d-banner-slide-image{width:42% !important;height:30% !important;bottom:10% !important}
}
@media (max-width:420px){
 .c2d-banner-fixed-logo{height:39% !important}.c2d-banner-card-viewport{top:39% !important;height:61% !important}.c2d-banner-slide{padding:9px 12px 38px !important}
 .c2d-banner-slide-url{font-size:10px !important}.c2d-banner-slide-h1{font-size:26px !important}.c2d-banner-slide-h2{font-size:14px !important}.c2d-banner-slide-address{font-size:8.5px !important}
}

/* ================================================================
   C2D COMPLETE BANNER DESIGN SYSTEM — FINAL SAFE OVERRIDE
   Existing slider/data remain intact. These rules only control the
   presentation of the existing hero banner.
   ================================================================ */
.c2d-phone-banner{display:block !important;width:var(--c2d-banner-width-pct,100%) !important;max-width:var(--c2d-banner-max-width,1320px) !important;border-radius:var(--c2d-banner-radius,24px) !important;border:var(--c2d-banner-border-width,1px) solid rgba(50,160,220,.20) !important;box-shadow:0 18px 55px rgba(0,0,0,var(--c2d-banner-shadow-strength,.22)) !important;background:var(--c2d-banner-design-surface,var(--c2d-banner-light-background,#eef8ff)) !important;color:var(--c2d-banner-text-color,#08213a) !important;gap:var(--c2d-banner-panel-gap,0px) !important;}
body.dark .c2d-phone-banner,body.theme-dark .c2d-phone-banner,body[data-theme="dark"] .c2d-phone-banner{background:var(--c2d-banner-dark-background,#06131f) !important;}
.c2d-banner-fixed-logo,body.lang-ur .c2d-banner-fixed-logo{left:0 !important;right:auto !important;top:50% !important;width:calc(var(--c2d-logo-panel-width,48%) - var(--c2d-banner-panel-gap,0px)) !important;height:100% !important;padding:var(--c2d-logo-panel-padding,0px) !important;margin:0 !important;border-radius:var(--c2d-banner-radius,24px) !important;border:1px solid var(--c2d-logo-border,rgba(34,184,255,.25)) !important;background:var(--c2d-logo-background,#06131f) !important;box-shadow:none !important;transform:translateY(-50%) !important;overflow:hidden !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.c2d-banner-fixed-logo .c2d-logo-halo{inset:-4% !important;opacity:.45 !important;pointer-events:none !important;}
.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{display:block !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;object-fit:var(--c2d-logo-fit,cover) !important;object-position:center !important;transform:translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) scale(var(--c2d-logo-scale,1.12)) !important;transform-origin:center !important;border-radius:inherit !important;}
.c2d-banner-card-viewport{left:var(--c2d-logo-panel-width,48%) !important;right:0 !important;top:0 !important;bottom:0 !important;width:calc(var(--c2d-content-panel-width,52%) - var(--c2d-banner-panel-gap,0px)) !important;overflow:hidden !important;display:block !important;}
.c2d-banner-slide{padding:var(--c2d-banner-padding-top,18px) var(--c2d-banner-padding-right,18px) var(--c2d-banner-padding-bottom,34px) var(--c2d-banner-padding-left,18px) !important;align-items:var(--c2d-content-vertical,center) !important;justify-content:center !important;text-align:var(--c2d-content-align,center) !important;}
.c2d-banner-slide-copy{width:var(--c2d-content-max-width,100%) !important;max-width:var(--c2d-content-max-width,100%) !important;gap:var(--c2d-content-gap,10px) !important;align-items:var(--c2d-content-align,center) !important;justify-content:center !important;text-align:var(--c2d-content-align,center) !important;padding:0 !important;}
.c2d-banner-slide-url{color:var(--c2d-banner-url-color,#17b8ff) !important;text-align:inherit !important;margin:0 0 8px !important;}
.c2d-banner-slide-h1{font-size:clamp(34px,var(--c2d-banner-h1-size,58px),100px) !important;text-align:inherit !important;margin:0 0 8px !important;color:var(--c2d-banner-text-color,#08213a) !important;}
.c2d-banner-slide-h2{font-size:clamp(16px,var(--c2d-banner-h2-size,27px),44px) !important;color:var(--c2d-banner-text-color,#08213a) !important;line-height:var(--c2d-banner-text-line-height,1.18) !important;text-align:inherit !important;}
.c2d-banner-slide-accent{height:var(--c2d-banner-accent-height,5px) !important;width:var(--c2d-banner-accent-width,100%) !important;max-width:var(--c2d-banner-accent-width,100%) !important;margin:14px 0 12px !important;}
.c2d-banner-slide-address{font-size:clamp(10px,1vw,15px) !important;line-height:1.4 !important;text-align:inherit !important;}
.c2d-banner-slide-image{z-index:6 !important;}
.c2d-phone-banner-dots{left:50% !important;right:auto !important;transform:translateX(-50%) !important;bottom:var(--c2d-dots-bottom,14px) !important;}
@media (max-width:1100px){.c2d-banner-fixed-logo{width:47% !important}.c2d-banner-card-viewport{left:47% !important;width:53% !important}.c2d-banner-slide{padding-left:22px !important;padding-right:18px !important}.c2d-banner-slide-h1{font-size:clamp(32px,4.4vw,52px) !important}.c2d-banner-slide-h2{font-size:clamp(16px,2.1vw,25px) !important}}
@media (max-width:760px){.c2d-phone-banner{border-radius:18px !important}.c2d-banner-fixed-logo{left:0 !important;top:0 !important;width:100% !important;height:43% !important;transform:none !important;border-radius:18px 18px 0 0 !important}.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{transform:none !important;object-fit:contain !important}.c2d-banner-card-viewport{left:0 !important;right:0 !important;top:43% !important;width:100% !important;height:57% !important}.c2d-banner-slide{padding:12px 16px 42px !important;align-items:center !important}.c2d-banner-slide-copy{max-width:94% !important}.c2d-banner-slide-url{font-size:12px !important}.c2d-banner-slide-h1{font-size:clamp(27px,8vw,42px) !important}.c2d-banner-slide-h2{font-size:clamp(15px,4.2vw,21px) !important;line-height:1.18 !important}.c2d-banner-slide-address{font-size:10px !important}.c2d-banner-slide-image{width:42% !important;height:30% !important;bottom:10% !important}}
@media (max-width:420px){.c2d-banner-fixed-logo{height:39% !important}.c2d-banner-card-viewport{top:39% !important;height:61% !important}.c2d-banner-slide{padding:9px 12px 38px !important}.c2d-banner-slide-url{font-size:10px !important}.c2d-banner-slide-h1{font-size:26px !important}.c2d-banner-slide-h2{font-size:14px !important}.c2d-banner-slide-address{font-size:8.5px !important}}


/* ================================================================
   C2D INTERNATIONAL HERO — FINAL PRESENTATION LAYER
   Additive only: existing slider engine, data and Admin controls remain.
   ================================================================ */
.c2d-phone-banner.c2d-phone-banner{
  position:relative!important;
  width:100%!important;
  max-width:var(--c2d-banner-max-width,1320px)!important;
  height:var(--c2d-banner-height,620px)!important;
  min-height:var(--c2d-banner-height,620px)!important;
  margin:var(--c2d-banner-margin-top,0px) var(--c2d-banner-margin-right,0px) var(--c2d-banner-margin-bottom,22px) var(--c2d-banner-margin-left,0px)!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:var(--c2d-banner-radius,24px)!important;
  border:var(--c2d-banner-border-width,1px) solid rgba(40,170,230,.20)!important;
  background:var(--c2d-banner-design-surface,#eef8ff)!important;
  box-shadow:0 22px 70px rgba(0,30,55,var(--c2d-banner-shadow-strength,.24))!important;
  isolation:isolate!important;
}
.c2d-phone-banner::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;
  background:
    radial-gradient(circle at 18% 42%,rgba(6,182,255,.18),transparent 34%),
    radial-gradient(circle at 82% 52%,rgba(92,91,255,.10),transparent 36%),
    linear-gradient(120deg,rgba(255,255,255,.42),transparent 45%)!important;
}
body[data-theme="dark"] .c2d-phone-banner,
body.dark .c2d-phone-banner,
body.theme-dark .c2d-phone-banner{
  background:var(--c2d-banner-dark-background,#07111d)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.42)!important;
}
body[data-theme="dark"] .c2d-phone-banner::before,
body.dark .c2d-phone-banner::before,
body.theme-dark .c2d-phone-banner::before{
  background:
    radial-gradient(circle at 18% 45%,rgba(0,191,255,.14),transparent 34%),
    radial-gradient(circle at 82% 50%,rgba(102,77,255,.12),transparent 38%),
    linear-gradient(120deg,rgba(255,255,255,.025),transparent 48%)!important;
}
.c2d-phone-banner-stage{
  position:absolute!important;inset:0!important;min-height:0!important;height:100%!important;width:100%!important;
  display:block!important;overflow:hidden!important;z-index:1!important;
}
/* LEFT: logo half */
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  position:absolute!important;left:0!important;right:auto!important;top:0!important;transform:none!important;
  width:46%!important;height:100%!important;max-width:none!important;max-height:none!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-right:1px solid rgba(34,184,255,.16)!important;border-radius:0!important;
  background:var(--c2d-logo-background,#050b14)!important;box-shadow:inset -24px 0 60px rgba(0,0,0,.12)!important;
  pointer-events:none!important;z-index:10!important;
}
.c2d-banner-fixed-logo::after{
  content:"";position:absolute;inset:18px;border:1px solid rgba(42,190,255,.16);border-radius:20px;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 50px rgba(0,168,255,.06);
}
.c2d-banner-fixed-logo .c2d-logo-halo{inset:-12%!important;opacity:.62!important;z-index:1!important;background:radial-gradient(circle,rgba(0,196,255,.20),rgba(70,76,255,.08) 42%,transparent 72%)!important;}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  position:relative!important;z-index:3!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;
  transform:translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) scale(var(--c2d-logo-scale,1.04))!important;
  transform-origin:center!important;border-radius:0!important;filter:drop-shadow(0 22px 42px rgba(0,180,255,.24))!important;
}
/* RIGHT: URL + text + slider half */
.c2d-banner-card-viewport{
  position:absolute!important;left:46%!important;right:0!important;top:0!important;bottom:0!important;width:54%!important;height:100%!important;
  margin:0!important;inset-block:auto!important;overflow:hidden!important;display:block!important;z-index:6!important;
  perspective:var(--c2d-banner-perspective,1750px)!important;
}
.c2d-banner-card-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;}
.c2d-banner-slide{
  inset:0!important;width:100%!important;height:100%!important;min-height:0!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:72px 7% 62px!important;overflow:hidden!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.c2d-banner-slide-copy{
  position:relative!important;z-index:8!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;direction:ltr!important;
  gap:0!important;padding:0!important;
}
/* The small duplicate label is intentionally removed; the main H1 remains. */
.c2d-banner-slide-kicker{display:none!important;}
.c2d-banner-slide-url{order:1!important;display:block!important;width:100%!important;margin:0 0 16px!important;font-size:clamp(16px,1.45vw,22px)!important;font-weight:900!important;letter-spacing:.01em!important;color:var(--c2d-banner-url-color,#10aef5)!important;}
.c2d-banner-slide-h1{order:2!important;max-width:100%!important;margin:0 0 12px!important;font-size:clamp(38px,4.5vw,64px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:950!important;color:var(--c2d-banner-text-color,#08213a)!important;text-shadow:none!important;}
.c2d-banner-slide-h2{order:3!important;max-width:92%!important;margin:0!important;font-size:clamp(20px,2.05vw,30px)!important;line-height:1.2!important;font-weight:820!important;color:var(--c2d-banner-text-color,#08213a)!important;text-wrap:balance!important;}
.c2d-banner-slide-accent{order:4!important;width:100%!important;max-width:100%!important;height:var(--c2d-banner-accent-height,5px)!important;margin:20px 0 17px!important;border-radius:999px!important;background:linear-gradient(90deg,#06b6ff 0%,#5c5cff 48%,#e748c9 100%)!important;box-shadow:0 0 18px rgba(42,157,255,.22)!important;}
.c2d-banner-slide-address{order:5!important;max-width:94%!important;margin:0 0 6px!important;font-size:clamp(11px,1.02vw,15px)!important;line-height:1.5!important;color:color-mix(in srgb,var(--c2d-banner-text-color,#08213a) 68%,transparent)!important;}
.c2d-banner-slide-image{right:5%!important;top:50%!important;width:min(38%,330px)!important;max-height:62%!important;transform:translateY(-50%) translateZ(var(--c2d-banner-depth,30px))!important;z-index:5!important;}
.c2d-banner-slide-image img{max-height:100%!important;width:100%!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 18px 38px rgba(0,0,0,.28))!important;}
/* Give copy the room it needs when an uploaded slide image exists. */
.c2d-banner-slide:has(.c2d-banner-slide-image) .c2d-banner-slide-copy{width:58%!important;max-width:58%!important;margin-right:auto!important;}
/* Interactive H1 glow: off in normal state, hover/click only. */
.c2d-banner-slide-h1{filter:none!important;text-shadow:none!important;transition:filter .22s ease,text-shadow .22s ease,transform .22s ease!important;}
@media (hover:hover) and (pointer:fine){
  .c2d-banner-slide-h1:hover{filter:drop-shadow(0 0 14px rgba(13,190,255,.70))!important;text-shadow:0 0 12px rgba(13,190,255,.46),0 0 32px rgba(99,80,255,.30)!important;transform:translateY(-1px)!important;}
}
.c2d-banner-slide-h1.c2d-banner-h1-glow{filter:drop-shadow(0 0 14px rgba(13,190,255,.70))!important;text-shadow:0 0 12px rgba(13,190,255,.46),0 0 32px rgba(99,80,255,.30)!important;transform:translateY(-1px)!important;}
.c2d-phone-banner-dots{left:73%!important;right:auto!important;bottom:18px!important;transform:translateX(-50%)!important;z-index:30!important;}
/* Dark-mode typography */
body[data-theme="dark"] .c2d-banner-slide-h1,body.dark .c2d-banner-slide-h1,body.theme-dark .c2d-banner-slide-h1{color:#f5fbff!important;}
body[data-theme="dark"] .c2d-banner-slide-h2,body.dark .c2d-banner-slide-h2,body.theme-dark .c2d-banner-slide-h2{color:#bfeaff!important;}
body[data-theme="dark"] .c2d-banner-slide-address,body.dark .c2d-banner-slide-address,body.theme-dark .c2d-banner-slide-address{color:rgba(214,234,248,.72)!important;}
/* Tablet */
@media (max-width:1050px) and (min-width:761px){
  .c2d-phone-banner{height:var(--c2d-banner-tablet-height,540px)!important;min-height:var(--c2d-banner-tablet-height,540px)!important;}
  .c2d-banner-fixed-logo{width:46%!important;}
  .c2d-banner-card-viewport{left:46%!important;width:54%!important;}
  .c2d-banner-slide{padding:62px 5.5% 56px!important;}
  .c2d-banner-slide-h1{font-size:clamp(34px,5.3vw,54px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(18px,2.5vw,25px)!important;max-width:96%!important;}
  .c2d-banner-slide:has(.c2d-banner-slide-image) .c2d-banner-slide-copy{width:60%!important;max-width:60%!important;}
  .c2d-banner-slide-image{width:36%!important;right:3%!important;}
  .c2d-phone-banner-dots{left:73%!important;}
}
/* Mobile: keep the same visual hierarchy, stack without overlap. */
@media (max-width:760px){
  .c2d-phone-banner{height:var(--c2d-banner-mobile-height,560px)!important;min-height:var(--c2d-banner-mobile-height,560px)!important;border-radius:18px!important;}
  .c2d-phone-banner-stage{display:block!important;}
  .c2d-banner-fixed-logo{left:0!important;top:0!important;width:100%!important;height:43%!important;border-right:0!important;border-bottom:1px solid rgba(34,184,255,.16)!important;border-radius:18px 18px 0 0!important;}
  .c2d-banner-fixed-logo::after{inset:12px;border-radius:15px!important;}
  .c2d-banner-fixed-logo img{object-fit:cover!important;transform:scale(1.02)!important;}
  .c2d-banner-card-viewport{left:0!important;right:0!important;top:43%!important;bottom:0!important;width:100%!important;height:57%!important;}
  .c2d-banner-slide{padding:20px 20px 48px!important;align-items:center!important;justify-content:center!important;}
  .c2d-banner-slide-copy,.c2d-banner-slide:has(.c2d-banner-slide-image) .c2d-banner-slide-copy{width:100%!important;max-width:100%!important;align-items:center!important;text-align:center!important;}
  .c2d-banner-slide-url{font-size:13px!important;margin-bottom:9px!important;}
  .c2d-banner-slide-h1{font-size:clamp(30px,9vw,44px)!important;line-height:1!important;}
  .c2d-banner-slide-h2{font-size:clamp(16px,4.7vw,22px)!important;max-width:100%!important;line-height:1.16!important;}
  .c2d-banner-slide-accent{width:92%!important;margin:13px auto 11px!important;}
  .c2d-banner-slide-address{font-size:10.5px!important;max-width:100%!important;}
  .c2d-banner-slide-image{width:30%!important;height:30%!important;right:3%!important;top:auto!important;bottom:12%!important;transform:none!important;opacity:.98!important;}
  .c2d-banner-slide:has(.c2d-banner-slide-image) .c2d-banner-slide-copy{padding-right:0!important;}
  .c2d-phone-banner-dots{left:50%!important;bottom:10px!important;}
}
@media (max-width:430px){
  .c2d-phone-banner{height:var(--c2d-banner-small-height,540px)!important;min-height:var(--c2d-banner-small-height,540px)!important;}
  .c2d-banner-fixed-logo{height:41%!important;}
  .c2d-banner-card-viewport{top:41%!important;height:59%!important;}
  .c2d-banner-slide{padding:15px 14px 44px!important;}
  .c2d-banner-slide-url{font-size:11.5px!important;}
  .c2d-banner-slide-h1{font-size:clamp(27px,9vw,38px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,4.4vw,19px)!important;}
  .c2d-banner-slide-address{font-size:9.5px!important;}
  .c2d-banner-slide-image{display:none!important;}
}
@media (prefers-reduced-motion:reduce){.c2d-banner-slide-h1{transition:none!important;}.c2d-banner-slide-h1:hover{filter:none!important;text-shadow:none!important;transform:none!important;}}

/* ========================================================================
   C2D INTERNATIONAL BANNER — FINAL SAFE COMPOSITION
   Visual target: LEFT = large live slider/text, RIGHT = large fixed C2D logo.
   This is an additive final layer over the existing banner engine; no data or
   unrelated sections are replaced.
   ======================================================================== */
.c2d-phone-banner{
  position:relative!important;
  width:var(--c2d-banner-width-pct,100%)!important;
  max-width:var(--c2d-banner-max-width,1320px)!important;
  min-width:0!important;
  margin-top:var(--c2d-banner-margin-top,0px)!important;
  margin-right:var(--c2d-banner-margin-right,0px)!important;
  margin-bottom:var(--c2d-banner-margin-bottom,22px)!important;
  margin-left:var(--c2d-banner-margin-left,0px)!important;
  padding:var(--c2d-banner-padding-top,0px) var(--c2d-banner-padding-right,0px) var(--c2d-banner-padding-bottom,0px) var(--c2d-banner-padding-left,0px)!important;
  min-height:var(--c2d-banner-height,620px)!important;
  height:var(--c2d-banner-height,620px)!important;
  border-radius:var(--c2d-banner-radius,24px)!important;
  border-width:var(--c2d-banner-border-width,1px)!important;
  background:var(--c2d-banner-design-surface,linear-gradient(135deg,#07111d,#0d2738))!important;
  box-shadow:0 22px 60px rgba(4,24,50,var(--c2d-banner-shadow-strength,.24))!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.c2d-phone-banner::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--c2d-banner-background-gradient,linear-gradient(135deg,transparent,rgba(6,182,255,.04)))!important;
}
.c2d-banner-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--c2d-banner-overlay-color,#000);opacity:var(--c2d-banner-overlay-opacity,0);}
.c2d-phone-banner-stage{position:absolute!important;inset:0!important;min-height:0!important;width:100%!important;height:100%!important;overflow:hidden!important;display:block!important;z-index:2!important;}

/* LEFT half = slider/text. The slider engine remains the same. */
.c2d-banner-card-viewport{
  position:absolute!important;left:0!important;right:50%!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;
  inset-inline-start:0!important;inset-inline-end:50%!important;overflow:hidden!important;z-index:5!important;
  perspective:var(--c2d-banner-perspective,1750px)!important;pointer-events:auto!important;
}
.c2d-banner-card-track{width:100%!important;height:100%!important;min-height:0!important;overflow:visible!important;}
.c2d-banner-slide{
  inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  padding:clamp(28px,4vw,58px) clamp(26px,4vw,58px) 72px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:var(--c2d-slide-gap,0px)!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  overflow:hidden!important;
}
.c2d-banner-slide-copy{
  width:min(var(--c2d-slide-width,100%),100%)!important;max-width:100%!important;min-width:0!important;
  min-height:0!important;padding:var(--c2d-slide-padding,0px)!important;gap:var(--c2d-content-gap,12px)!important;
  align-items:flex-start!important;justify-content:var(--c2d-content-vertical,center)!important;text-align:var(--c2d-slide-text-align,left)!important;direction:ltr!important;
  opacity:var(--c2d-slide-opacity,1)!important;
  transform:scale(var(--c2d-slide-scale,1))!important;transform-origin:center!important;
}
.c2d-banner-slide-h1{font-size:var(--c2d-slide-h1-size,var(--c2d-banner-h1-size,60px))!important;line-height:var(--c2d-slide-line-height,var(--c2d-banner-text-line-height,1.18))!important;text-align:var(--c2d-slide-text-align,left)!important;margin:0 0 10px!important;max-width:100%!important;}
.c2d-banner-slide-h2{font-size:var(--c2d-slide-h2-size,var(--c2d-banner-h2-size,28px))!important;line-height:var(--c2d-slide-line-height,var(--c2d-banner-text-line-height,1.18))!important;text-align:var(--c2d-slide-text-align,left)!important;max-width:100%!important;margin:0!important;}
.c2d-banner-slide-accent{width:var(--c2d-slide-accent-width,var(--c2d-banner-accent-width,100%))!important;height:var(--c2d-slide-accent-height,var(--c2d-banner-accent-height,5px))!important;margin:18px 0 14px!important;background:linear-gradient(90deg,#08b9ff 0%,#6f5cff 38%,#b84cff 70%,#ff4e8a 100%)!important;}
.c2d-banner-slide-address{font-size:var(--c2d-slide-address-size,14px)!important;line-height:1.5!important;text-align:var(--c2d-slide-text-align,left)!important;max-width:100%!important;margin:0 0 6px!important;}
.c2d-banner-slide-url{font-size:var(--c2d-slide-url-size,20px)!important;line-height:1.25!important;text-align:var(--c2d-slide-text-align,left)!important;margin:0 0 12px!important;order:-10!important;}
.c2d-banner-slide-image{right:2%!important;left:auto!important;bottom:10%!important;top:auto!important;width:min(34%,330px)!important;height:auto!important;max-height:30%!important;opacity:var(--c2d-slide-image-opacity,1)!important;transform:translateZ(var(--c2d-banner-depth,30px)) scale(var(--c2d-slide-image-scale,1))!important;z-index:2!important;}
.c2d-banner-slide-image img{width:100%!important;height:auto!important;max-height:100%!important;object-fit:contain!important;}

/* RIGHT half = fixed large logo. Its box is deliberately tall and wide; the
   supplied 954x400 C2D artwork keeps its native ratio inside the dark stage. */
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  position:absolute!important;z-index:12!important;left:auto!important;right:1.6%!important;top:50%!important;
  width:46%!important;height:68%!important;max-width:none!important;max-height:none!important;
  padding:0!important;border-radius:var(--c2d-logo-radius,26px)!important;overflow:hidden!important;
  transform:translateY(-50%) translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) scale(var(--c2d-logo-scale,1.12))!important;
  background:var(--c2d-logo-background,#050b14)!important;border:1px solid var(--c2d-logo-border,rgba(34,184,255,.28))!important;
  display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:none!important;
}
.c2d-banner-fixed-logo .c2d-logo-halo{inset:-10%!important;opacity:.7!important;}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;
  opacity:var(--c2d-logo-opacity,1)!important;filter:drop-shadow(0 18px 38px rgba(6,182,255,.34))!important;
  transform:none!important;display:block!important;
}
.c2d-phone-banner-dots{left:50%!important;bottom:var(--c2d-banner-dots-bottom,16px)!important;z-index:30!important;}

/* Normal H1 is clean. Glow only on genuine mouse hover or explicit click class. */
.c2d-banner-slide-h1{filter:none!important;text-shadow:none!important;transform:none!important;}
.c2d-banner-slide-h1::after{opacity:0!important;}
@media (hover:hover) and (pointer:fine){
  .c2d-banner-slide-h1:hover{filter:drop-shadow(0 0 13px rgba(21,191,255,.72))!important;text-shadow:0 0 10px rgba(21,191,255,.48),0 0 30px rgba(105,92,255,.34)!important;transform:scale(1.012)!important;}
  .c2d-banner-slide-h1:hover::after{opacity:1!important;}
}
.c2d-banner-slide-h1.c2d-banner-h1-glow{filter:drop-shadow(0 0 13px rgba(21,191,255,.72))!important;text-shadow:0 0 10px rgba(21,191,255,.48),0 0 30px rgba(105,92,255,.34)!important;transform:scale(1.012)!important;}
.c2d-banner-slide-h1.c2d-banner-h1-glow::after{opacity:1!important;}

/* Theme-safe contrast. */
body[data-theme="light"] .c2d-phone-banner,html[data-theme="light"] .c2d-phone-banner{background:var(--c2d-banner-light-background,#eef8ff)!important;}
body[data-theme="light"] .c2d-banner-slide-h1,html[data-theme="light"] .c2d-banner-slide-h1{color:#071827!important;text-shadow:none!important;}
body[data-theme="light"] .c2d-banner-slide-h2,html[data-theme="light"] .c2d-banner-slide-h2{color:#16446b!important;}
body[data-theme="light"] .c2d-banner-slide-address,html[data-theme="light"] .c2d-banner-slide-address{color:#50657a!important;}
body[data-theme="light"] .c2d-banner-slide-url,html[data-theme="light"] .c2d-banner-slide-url{color:var(--c2d-banner-url-color,#10aef5)!important;}

@media (max-width:1100px) and (min-width:761px){
  .c2d-phone-banner{height:var(--c2d-banner-tablet-height,540px)!important;min-height:var(--c2d-banner-tablet-height,540px)!important;}
  .c2d-banner-fixed-logo{right:1.5%!important;width:46%!important;height:66%!important;}
  .c2d-banner-card-viewport{right:50%!important;}
  .c2d-banner-slide{padding:28px 28px 64px!important;}
  .c2d-banner-slide-h1{font-size:clamp(34px,4.8vw,56px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(17px,2.2vw,26px)!important;}
}

/* Mobile: stack intelligently rather than compressing the desktop halves. */
@media (max-width:760px){
  .c2d-phone-banner{height:var(--c2d-banner-mobile-height,560px)!important;min-height:var(--c2d-banner-mobile-height,560px)!important;border-radius:18px!important;}
  .c2d-banner-fixed-logo{left:4%!important;right:4%!important;top:3%!important;width:92%!important;height:auto!important;aspect-ratio:2.2/1!important;transform:translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) scale(1)!important;border-radius:18px!important;}
  .c2d-banner-card-viewport{left:3%!important;right:3%!important;top:32%!important;bottom:0!important;width:auto!important;}
  .c2d-banner-slide{padding:22px 18px 50px!important;align-items:flex-start!important;}
  .c2d-banner-slide-copy{width:var(--c2d-slide-width,100%)!important;max-width:100%!important;padding:0!important;gap:8px!important;}
  .c2d-banner-slide-url{font-size:clamp(11px,3.2vw,14px)!important;margin-bottom:7px!important;}
  .c2d-banner-slide-h1{font-size:clamp(27px,8vw,42px)!important;line-height:1.02!important;}
  .c2d-banner-slide-h2{font-size:clamp(15px,4.4vw,21px)!important;line-height:1.18!important;}
  .c2d-banner-slide-address{font-size:clamp(10px,2.9vw,13px)!important;line-height:1.4!important;}
  .c2d-banner-slide-image{right:3%!important;bottom:11%!important;width:42%!important;max-height:24%!important;}
  .c2d-phone-banner-dots{bottom:10px!important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:var(--c2d-banner-small-height,540px)!important;min-height:var(--c2d-banner-small-height,540px)!important;}
  .c2d-banner-fixed-logo{top:3%!important;width:92%!important;aspect-ratio:2.2/1!important;}
  .c2d-banner-card-viewport{top:32%!important;}
  .c2d-banner-slide{padding:18px 13px 48px!important;}
  .c2d-banner-slide-h1{font-size:25px!important;}
  .c2d-banner-slide-h2{font-size:13.5px!important;}
  .c2d-banner-slide-address{font-size:9px!important;}
  .c2d-banner-slide-image{display:none!important;}
}
@media (max-height:700px) and (max-width:760px){
  .c2d-phone-banner{height:620px!important;min-height:620px!important;}
}
@media (prefers-reduced-motion:reduce){
  .c2d-banner-slide{transition:none!important;}
}
.c2d-banner-fixed-logo{box-shadow:var(--c2d-logo-shadow,0 18px 38px rgba(6,182,255,.34))!important;}


/* =========================================================
   C2D FINAL COMPACT HALF/HALF BANNER — 2026-08-10
   Final visual pass based on supplied reference screenshot.
   Keeps the existing slide engine/data; only the presentation geometry is changed.
   ========================================================= */
.hero{padding:var(--c2d-banner-navbar-gap,8px) 0 var(--c2d-banner-home-gap,20px)!important;overflow:visible!important;}
.banner-wrap{margin-top:0!important;margin-bottom:var(--c2d-banner-home-gap,20px)!important;width:100%!important;}
.c2d-phone-banner{
  height:clamp(360px,31vw,420px)!important;
  min-height:360px!important;
  max-height:420px!important;
  border-radius:20px!important;
  overflow:hidden!important;
}
.c2d-phone-banner-stage{height:100%!important;min-height:0!important;width:100%!important;overflow:hidden!important;display:block!important;}
.c2d-banner-card-viewport{
  position:absolute!important;left:0!important;right:50%!important;top:0!important;bottom:0!important;
  inset-inline-start:0!important;inset-inline-end:50%!important;width:auto!important;height:auto!important;
  margin:0!important;padding:0!important;overflow:hidden!important;z-index:5!important;
}
.c2d-banner-card-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;}
.c2d-banner-slide{
  width:100%!important;height:100%!important;min-height:0!important;padding:20px 28px 34px!important;
  align-items:center!important;justify-content:center!important;gap:0!important;
}
.c2d-banner-slide-copy{
  width:92%!important;max-width:620px!important;min-height:0!important;
  align-items:center!important;justify-content:center!important;text-align:center!important;
  margin:0 auto!important;padding:0!important;gap:0!important;
}
.c2d-banner-slide-kicker{display:none!important;}
.c2d-banner-slide-url{order:-3!important;margin:0 0 10px!important;font-size:clamp(13px,1.25vw,19px)!important;line-height:1.2!important;}
.c2d-banner-slide-h1{order:-2!important;margin:0 0 9px!important;font-size:clamp(34px,4vw,58px)!important;line-height:1.0!important;letter-spacing:-.035em!important;text-align:center!important;}
.c2d-banner-slide-h2{order:-1!important;margin:0!important;max-width:96%!important;font-size:clamp(18px,1.8vw,28px)!important;line-height:1.2!important;text-align:center!important;}
.c2d-banner-slide-accent{width:clamp(100px,17vw,260px)!important;height:4px!important;margin:15px 0 12px!important;}
.c2d-banner-slide-address{max-width:96%!important;margin:0!important;font-size:clamp(10px,.9vw,14px)!important;line-height:1.45!important;text-align:center!important;}
.c2d-banner-slide-image{display:none!important;}
.c2d-banner-slide::before{left:8%;top:18%;width:84%;height:64%;opacity:.5!important;}
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  position:absolute!important;left:auto!important;right:1.7%!important;top:50%!important;
  width:var(--c2d-logo-panel-width,46.5%)!important;height:var(--c2d-banner-logo-panel-height,82%)!important;max-width:none!important;max-height:none!important;
  aspect-ratio:2.25/1!important;padding:0!important;margin:0!important;
  transform:translateY(-50%)!important;border-radius:22px!important;overflow:hidden!important;
  background:var(--c2d-logo-background,#050b14)!important;
  border:1px solid var(--c2d-logo-border,rgba(34,184,255,.28))!important;
  box-shadow:var(--c2d-logo-shadow,0 18px 38px rgba(6,182,255,.28))!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.c2d-banner-fixed-logo .c2d-logo-halo{display:none!important;}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width:94%!important;height:auto!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;display:block!important;
  transform:none!important;filter:drop-shadow(0 12px 26px rgba(6,182,255,.30))!important;
}
.c2d-phone-banner-dots{left:50%!important;bottom:9px!important;}

/* Equalize the visible section rhythm: navbar -> banner and banner -> next content. */
.navbar + .category-menu + .hero,
.category-menu + .hero{padding-top:var(--c2d-banner-navbar-gap,8px)!important;}

/* Logo controls: header and footer can use the same saved asset while their
   dimensions remain independently editable from Admin Panel. */
.brand .js-site-logo{height:var(--c2d-header-logo-height,40px)!important;width:auto!important;max-width:46vw!important;object-fit:contain!important;}
.footer-brand .js-site-logo{height:var(--c2d-footer-logo-height,54px)!important;width:auto!important;max-width:100%!important;object-fit:contain!important;}

@media (max-width:1100px) and (min-width:761px){
  .c2d-phone-banner{height:clamp(340px,36vw,390px)!important;min-height:340px!important;max-height:390px!important;}
  .c2d-banner-fixed-logo{height:80%!important;width:46%!important;right:1.5%!important;}
  .c2d-banner-slide{padding:18px 22px 30px!important;}
  .c2d-banner-slide-h1{font-size:clamp(30px,4.6vw,48px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(16px,2.2vw,23px)!important;}
}
@media (max-width:760px){
  .hero{padding:6px 0 18px!important;}
  .banner-wrap{margin-bottom:18px!important;}
  .c2d-phone-banner{height:auto!important;min-height:0!important;max-height:none!important;border-radius:16px!important;}
  .c2d-phone-banner-stage{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  .c2d-banner-fixed-logo{position:relative!important;order:1!important;left:auto!important;right:auto!important;top:auto!important;width:92%!important;height:auto!important;aspect-ratio:2.25/1!important;margin:14px auto 8px!important;transform:none!important;border-radius:16px!important;}
  .c2d-banner-fixed-logo img{width:94%!important;}
  .c2d-banner-card-viewport{position:relative!important;order:2!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:260px!important;min-height:260px!important;overflow:hidden!important;}
  .c2d-banner-card-track{position:absolute!important;inset:0!important;height:100%!important;min-height:0!important;}
  .c2d-banner-slide{padding:12px 14px 38px!important;}
  .c2d-banner-slide-copy{width:94%!important;max-width:520px!important;}
  .c2d-banner-slide-url{font-size:clamp(11px,3.3vw,14px)!important;margin-bottom:8px!important;}
  .c2d-banner-slide-h1{font-size:clamp(26px,8.4vw,38px)!important;margin-bottom:7px!important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,4.2vw,19px)!important;line-height:1.18!important;}
  .c2d-banner-slide-accent{width:clamp(90px,35vw,170px)!important;height:3px!important;margin:11px 0 9px!important;}
  .c2d-banner-slide-address{font-size:clamp(9px,2.8vw,12px)!important;line-height:1.35!important;}
  .c2d-phone-banner-dots{bottom:7px!important;}
  .brand .js-site-logo{height:min(var(--c2d-header-logo-height,40px),34px)!important;}
  .footer-brand .js-site-logo{height:min(var(--c2d-footer-logo-height,54px),46px)!important;}
}
@media (max-width:420px){
  .c2d-banner-fixed-logo{width:94%!important;margin-top:10px!important;margin-bottom:5px!important;}
  .c2d-banner-card-viewport{height:245px!important;min-height:245px!important;}
  .c2d-banner-slide{padding:9px 10px 34px!important;}
  .c2d-banner-slide-h1{font-size:24px!important;}
  .c2d-banner-slide-h2{font-size:13px!important;}
  .c2d-banner-slide-address{font-size:8.5px!important;}
}
@media (prefers-reduced-motion:reduce){
  .c2d-banner-slide{transition:none!important;}
}


/* C2D FINAL COMPACT HERO GEOMETRY — 2026-08-10
   Authoritative last layer. Existing DOM, slider engine and data remain intact. */
.hero{padding:var(--c2d-banner-navbar-gap,16px) 0 var(--c2d-banner-home-gap,16px)!important;}
.banner-wrap{margin-top:0!important;margin-bottom:var(--c2d-banner-home-gap,16px)!important;width:100%!important;}
.c2d-phone-banner{
  width:100%!important;max-width:var(--c2d-banner-max-width,1320px)!important;
  height:var(--c2d-banner-synced-height,var(--c2d-banner-height,420px))!important;
  min-height:var(--c2d-banner-synced-height,var(--c2d-banner-height,420px))!important;
  max-height:420px!important;margin:0 auto!important;padding:0!important;overflow:hidden!important;
  border-radius:20px!important;
}
.c2d-phone-banner-stage{inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;}
/* Desktop/tablet: exact 50/50 visual composition. */
.c2d-banner-card-viewport{left:0!important;right:50%!important;width:50%!important;top:0!important;bottom:0!important;height:100%!important;overflow:hidden!important;}
.c2d-banner-card-track{inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;}
.c2d-banner-slide{
  inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  padding:14px 24px 30px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;backface-visibility:hidden!important;transform-style:preserve-3d!important;
  transition:transform var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),opacity var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1))!important;
  will-change:transform,opacity!important;
}
.c2d-banner-slide-copy{width:100%!important;max-width:100%!important;align-items:center!important;justify-content:center!important;text-align:center!important;direction:ltr!important;padding:0!important;gap:0!important;}
.c2d-banner-slide-url{order:-3!important;width:100%!important;margin:0 0 8px!important;font-size:clamp(13px,1.25vw,18px)!important;line-height:1.15!important;text-align:center!important;}
.c2d-banner-slide-h1{order:-2!important;width:100%!important;margin:0 0 8px!important;font-size:clamp(32px,4vw,56px)!important;line-height:.98!important;letter-spacing:-.035em!important;text-align:center!important;}
.c2d-banner-slide-h2{order:-1!important;width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(17px,1.75vw,26px)!important;line-height:1.16!important;text-align:center!important;}
.c2d-banner-slide-accent{width:92%!important;height:4px!important;margin:12px auto 10px!important;}
.c2d-banner-slide-address{width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(9.5px,.9vw,13px)!important;line-height:1.35!important;text-align:center!important;}
.c2d-banner-slide-image{display:none!important;}
/* smooth transform states */
.c2d-banner-slide.is-hidden{opacity:0!important;visibility:hidden!important;}
.c2d-banner-slide.is-current{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0) rotateY(0deg) scale(1)!important;}
.c2d-banner-slide.is-in-left{opacity:0!important;visibility:visible!important;transform:translate3d(-108%,0,-24px) rotateY(7deg) scale(.97)!important;}
.c2d-banner-slide.is-out-right{opacity:0!important;visibility:visible!important;transform:translate3d(108%,0,-40px) rotateY(-7deg) scale(.97)!important;}
.c2d-banner-slide.is-in-right{opacity:0!important;visibility:visible!important;transform:translate3d(108%,0,-24px) rotateY(-7deg) scale(.97)!important;}
.c2d-banner-slide.is-out-left{opacity:0!important;visibility:visible!important;transform:translate3d(-108%,0,-40px) rotateY(7deg) scale(.97)!important;}
/* RIGHT half: large C2D logo, centered with no unnecessary internal whitespace. */
.c2d-banner-fixed-logo,body.lang-ur .c2d-banner-fixed-logo{
  left:50%!important;right:0!important;top:50%!important;width:50%!important;height:100%!important;
  transform:translateY(-50%)!important;padding:0!important;margin:0!important;border:0!important;border-left:1px solid rgba(34,184,255,.14)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.c2d-banner-fixed-logo::after{inset:10px!important;border-radius:18px!important;}
.c2d-banner-fixed-logo .c2d-logo-halo{display:none!important;}
.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{
  width:96%!important;height:auto!important;max-width:none!important;max-height:92%!important;object-fit:contain!important;object-position:center!important;
  transform:scale(var(--c2d-logo-scale,1.18))!important;transform-origin:center!important;
  opacity:var(--c2d-logo-opacity,1)!important;filter:drop-shadow(0 16px 32px rgba(6,182,255,.34))!important;
}
.c2d-phone-banner-dots{left:50%!important;bottom:7px!important;transform:translateX(-50%)!important;}
/* Keep top and bottom rhythm identical. */
.navbar + .category-menu + .hero,.category-menu + .hero{padding-top:var(--c2d-banner-navbar-gap,16px)!important;}
/* Admin-controlled global brand logo sizing. */
.brand .js-site-logo{height:var(--c2d-header-logo-height,40px)!important;width:auto!important;max-width:46vw!important;object-fit:contain!important;}
.footer-brand .js-site-logo{height:var(--c2d-footer-logo-height,54px)!important;width:auto!important;max-width:100%!important;object-fit:contain!important;}
@media (max-width:1050px) and (min-width:761px){
  .c2d-phone-banner{height:var(--c2d-banner-tablet-height,360px)!important;min-height:var(--c2d-banner-tablet-height,360px)!important;max-height:420px!important;}
  .c2d-banner-slide{padding:12px 18px 28px!important;}
  .c2d-banner-slide-h1{font-size:clamp(28px,4.6vw,48px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(15px,2.15vw,23px)!important;}
}
@media (max-width:760px){
  .hero{padding-top:10px!important;padding-bottom:14px!important;}
  .banner-wrap{margin-bottom:14px!important;}
  .c2d-phone-banner{height:auto!important;min-height:0!important;max-height:none!important;border-radius:16px!important;}
  .c2d-phone-banner-stage{position:relative!important;display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:hidden!important;}
  .c2d-banner-fixed-logo{position:relative!important;left:auto!important;right:auto!important;top:auto!important;width:94%!important;height:auto!important;aspect-ratio:2.385/1!important;margin:8px auto 4px!important;transform:none!important;border:1px solid rgba(34,184,255,.14)!important;border-radius:15px!important;}
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:98%!important;max-height:94%!important;transform:scale(1.08)!important;}
  .c2d-banner-card-viewport{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:260px!important;min-height:260px!important;overflow:hidden!important;order:2!important;}
  .c2d-banner-slide{padding:10px 14px 34px!important;}
  .c2d-banner-slide-copy{width:94%!important;max-width:100%!important;}
  .c2d-banner-slide-url{font-size:clamp(11px,3.2vw,14px)!important;margin-bottom:6px!important;}
  .c2d-banner-slide-h1{font-size:clamp(25px,8vw,38px)!important;margin-bottom:6px!important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,4.1vw,19px)!important;line-height:1.16!important;}
  .c2d-banner-slide-accent{width:86%!important;height:3px!important;margin:9px auto 8px!important;}
  .c2d-banner-slide-address{font-size:clamp(9px,2.7vw,12px)!important;line-height:1.3!important;}
  .c2d-phone-banner-dots{bottom:6px!important;}
}
@media (max-width:420px){
  .c2d-banner-fixed-logo{width:95%!important;margin-top:6px!important;margin-bottom:3px!important;}
  .c2d-banner-card-viewport{height:235px!important;min-height:235px!important;}
  .c2d-banner-slide{padding:8px 10px 30px!important;}
  .c2d-banner-slide-h1{font-size:24px!important;}
  .c2d-banner-slide-h2{font-size:13px!important;}
  .c2d-banner-slide-address{font-size:8.5px!important;}
}
@media (prefers-reduced-motion:reduce){.c2d-banner-slide{transition:none!important;}.c2d-banner-slide.is-current{transform:none!important;}}


/* =========================================================
   C2D FINAL RESPONSIVE BANNER — authoritative 2026-08-10 pass
   Existing DOM/data/slider engine preserved. This layer only fixes geometry,
   mobile responsiveness, compact height, two-half composition and overflow.
   ========================================================= */
.c2d-phone-banner{
  --c2d-banner-gap-final:var(--c2d-banner-navbar-gap,8px);
  width:100%!important;
  max-width:var(--c2d-banner-max-width,1320px)!important;
  margin:0 auto!important;
  padding:0!important;
  height:var(--c2d-banner-synced-height,var(--c2d-banner-height,420px))!important;
  min-height:var(--c2d-banner-synced-height,var(--c2d-banner-height,420px))!important;
  max-height:var(--c2d-banner-max-height,900px)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.c2d-phone-banner-stage{
  position:relative!important;
  width:100%!important;height:100%!important;min-height:0!important;
  display:block!important;overflow:hidden!important;
}
/* Text/slider = left 50%; C2D logo = right 50%. */
.c2d-banner-card-viewport{
  position:absolute!important;inset:0 50% 0 0!important;width:50%!important;height:100%!important;
  overflow:hidden!important;margin:0!important;padding:0!important;z-index:4!important;
}
.c2d-banner-card-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;}
.c2d-banner-slide{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;overflow:hidden!important;padding:12px 22px 30px!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  will-change:transform,opacity!important;backface-visibility:hidden!important;
  transition:transform var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),opacity var(--c2d-banner-duration,820ms) ease!important;
}
.c2d-banner-slide-copy{
  position:relative!important;z-index:3!important;width:100%!important;max-width:100%!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:0!important;padding:0!important;margin:0!important;text-align:center!important;overflow:hidden!important;
}
.c2d-banner-slide-url{order:-3!important;width:100%!important;margin:0 0 6px!important;font-size:clamp(11px,1.25vw,18px)!important;line-height:1.15!important;text-align:center!important;overflow-wrap:anywhere!important;}
.c2d-banner-slide-h1{order:-2!important;width:100%!important;margin:0 0 7px!important;font-size:clamp(28px,3.7vw,54px)!important;line-height:.98!important;letter-spacing:-.035em!important;text-align:center!important;overflow-wrap:anywhere!important;}
.c2d-banner-slide-h2{order:-1!important;width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(15px,1.7vw,25px)!important;line-height:1.16!important;text-align:center!important;overflow-wrap:anywhere!important;}
.c2d-banner-slide-accent{width:clamp(90px,18vw,240px)!important;height:var(--c2d-slide-accent-height,4px)!important;margin:10px auto 9px!important;flex:0 0 auto!important;}
.c2d-banner-slide-address{width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(9px,.9vw,13px)!important;line-height:1.35!important;text-align:center!important;overflow-wrap:anywhere!important;}
.c2d-banner-slide-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;z-index:1!important;opacity:calc(var(--c2d-slide-image-opacity,1) * .16)!important;pointer-events:none!important;overflow:hidden!important;}
.c2d-banner-slide-image img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border-radius:0!important;object-fit:var(--c2d-slide-image-fit,contain)!important;opacity:1!important;filter:saturate(.9) blur(.2px)!important;}
.c2d-banner-slide.is-hidden{opacity:0!important;visibility:hidden!important;}
.c2d-banner-slide.is-current{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0) rotateY(0) scale(1)!important;}
.c2d-banner-slide.is-in-left{opacity:0!important;visibility:visible!important;transform:translate3d(-108%,0,-20px) rotateY(5deg) scale(.985)!important;}
.c2d-banner-slide.is-out-right{opacity:0!important;visibility:visible!important;transform:translate3d(108%,0,-28px) rotateY(-5deg) scale(.985)!important;}
.c2d-banner-slide.is-in-right{opacity:0!important;visibility:visible!important;transform:translate3d(108%,0,-20px) rotateY(-5deg) scale(.985)!important;}
.c2d-banner-slide.is-out-left{opacity:0!important;visibility:visible!important;transform:translate3d(-108%,0,-28px) rotateY(5deg) scale(.985)!important;}
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  position:absolute!important;left:50%!important;right:0!important;top:0!important;
  width:50%!important;height:100%!important;max-width:none!important;max-height:none!important;
  transform:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-left:1px solid rgba(34,184,255,.14)!important;border-radius:0!important;
  background:var(--c2d-logo-background,#050b14)!important;box-shadow:none!important;overflow:hidden!important;
  z-index:10!important;
}
.c2d-banner-fixed-logo .c2d-logo-halo{display:none!important;}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  display:block!important;width:96%!important;height:96%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;transform:scale(var(--c2d-logo-scale,1.18))!important;
  transform-origin:center!important;opacity:var(--c2d-logo-opacity,1)!important;
  filter:drop-shadow(0 16px 32px rgba(6,182,255,.34))!important;
}
.c2d-phone-banner-dots{left:50%!important;bottom:7px!important;transform:translateX(-50%)!important;z-index:30!important;}
/* Keep surrounding rhythm tight and equal. */
.hero{padding-top:var(--c2d-banner-navbar-gap,8px)!important;padding-bottom:var(--c2d-banner-home-gap,16px)!important;}
.banner-wrap{margin-top:0!important;margin-bottom:var(--c2d-banner-home-gap,16px)!important;width:100%!important;}
/* Header/footer logo controls */
.brand .js-site-logo{height:var(--c2d-header-logo-height,40px)!important;width:auto!important;max-width:var(--c2d-header-logo-width,46vw)!important;transform:translate(var(--c2d-header-logo-x,0px),var(--c2d-header-logo-y,0px)) scale(var(--c2d-header-logo-scale,1))!important;transform-origin:center!important;object-fit:contain!important;}
.footer-brand .js-site-logo{height:var(--c2d-footer-logo-height,54px)!important;width:auto!important;max-width:var(--c2d-footer-logo-width,100%)!important;transform:translate(var(--c2d-footer-logo-x,0px),var(--c2d-footer-logo-y,0px)) scale(var(--c2d-footer-logo-scale,1))!important;transform-origin:center!important;object-fit:contain!important;}
@media (max-width:1050px) and (min-width:761px){
  .c2d-phone-banner{height:var(--c2d-banner-synced-height,var(--c2d-banner-tablet-height,360px))!important;min-height:var(--c2d-banner-synced-height,var(--c2d-banner-tablet-height,360px))!important;}
  .c2d-banner-slide{padding:10px 16px 26px!important;}
  .c2d-banner-slide-h1{font-size:clamp(25px,4.5vw,46px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,2.1vw,22px)!important;}
}
@media (max-width:760px){
  .hero{padding-top:8px!important;padding-bottom:12px!important;}
  .banner-wrap{margin-bottom:12px!important;}
  .c2d-phone-banner{height:var(--c2d-banner-synced-height,var(--c2d-banner-mobile-height,300px))!important;min-height:var(--c2d-banner-synced-height,var(--c2d-banner-mobile-height,300px))!important;max-height:var(--c2d-banner-synced-height,var(--c2d-banner-mobile-height,300px))!important;border-radius:16px!important;}
  .c2d-phone-banner-stage{display:block!important;height:100%!important;min-height:0!important;}
  .c2d-banner-card-viewport{inset:0 50% 0 0!important;width:50%!important;height:100%!important;}
  .c2d-banner-fixed-logo{left:50%!important;right:0!important;top:0!important;width:50%!important;height:100%!important;border-radius:0!important;}
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:98%!important;height:98%!important;transform:scale(1.06)!important;}
  .c2d-banner-slide{padding:8px 9px 26px!important;}
  .c2d-banner-slide-url{font-size:clamp(9px,2.9vw,13px)!important;margin-bottom:4px!important;}
  .c2d-banner-slide-h1{font-size:clamp(18px,6vw,30px)!important;margin-bottom:5px!important;line-height:.98!important;}
  .c2d-banner-slide-h2{font-size:clamp(11px,3.6vw,17px)!important;line-height:1.1!important;}
  .c2d-banner-slide-accent{width:82%!important;height:3px!important;margin:7px auto 6px!important;}
  .c2d-banner-slide-address{font-size:clamp(7px,2.25vw,10px)!important;line-height:1.2!important;}
  .c2d-phone-banner-dots{bottom:5px!important;gap:6px!important;}
  .brand .js-site-logo{height:min(var(--c2d-header-logo-height,40px),32px)!important;max-width:42vw!important;}
  .footer-brand .js-site-logo{height:min(var(--c2d-footer-logo-height,54px),44px)!important;max-width:100%!important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:var(--c2d-banner-synced-height,var(--c2d-banner-small-mobile-height,280px))!important;min-height:var(--c2d-banner-synced-height,var(--c2d-banner-small-mobile-height,280px))!important;max-height:var(--c2d-banner-synced-height,var(--c2d-banner-small-mobile-height,280px))!important;}
  .c2d-banner-slide{padding:7px 7px 23px!important;}
  .c2d-banner-slide-url{font-size:9px!important;}
  .c2d-banner-slide-h1{font-size:20px!important;}
  .c2d-banner-slide-h2{font-size:11px!important;}
  .c2d-banner-slide-address{font-size:7px!important;}
}
@media (prefers-reduced-motion:reduce){.c2d-banner-slide{transition:none!important;}}


/* ============================================================================
   C2D V34.2 — ARROW-REFERENCE HERO SCALE / NAV CHEVRONS
   Targeted additive layer. Existing DOM, slider engine and data remain intact.
   ============================================================================ */

/* Category navigation: compact, consistent downward chevrons on every item. */
.cat-menu-home,
.cat-menu-btn{
  position:relative !important;
}
.cat-menu-home > i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:12px !important;
  height:12px !important;
  margin-inline-start:6px !important;
  font-size:11px !important;
  line-height:1 !important;
  font-style:normal !important;
  font-weight:900 !important;
  opacity:.78 !important;
  transform:translateY(-1px) !important;
  transition:transform .2s ease, opacity .2s ease !important;
}
.cat-menu-btn > i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:12px !important;
  height:12px !important;
  margin-inline-start:6px !important;
  font-size:11px !important;
  line-height:1 !important;
  font-style:normal !important;
  font-weight:900 !important;
  opacity:.78 !important;
  transform:translateY(-1px) !important;
  transition:transform .2s ease, opacity .2s ease !important;
}
.cat-menu-btn:hover > i,
.cat-menu-btn.active > i,
.cat-menu-home:hover > i{
  opacity:1 !important;
  transform:translateY(1px) rotate(180deg) !important;
}
.cat-menu-shared-drop{
  box-sizing:border-box !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
.cmd-flatgrid,
.cmd-flatgrid .cmd-row,
.cmd-treelist,
.cmd-tree-item{
  min-width:0 !important;
  max-width:100% !important;
}
@media(max-width:640px){
  .cat-menu-home > i{font-size:9px !important;width:10px !important;height:10px !important;margin-inline-start:5px !important;}
  .cat-menu-btn > i{width:10px !important;height:10px !important;font-size:9px !important;margin-inline-start:4px !important;}
}

/* Banner: preserve the existing compact width/height, but use the available
   two halves much more strongly — matching the supplied red-arrow reference. */
.c2d-phone-banner{
  --c2d-final-logo-scale:1.30;
  --c2d-final-content-width:50%;
  --c2d-final-logo-width:50%;
  overflow:hidden !important;
}
.c2d-banner-card-viewport{
  inset:0 var(--c2d-logo-panel-width,50%) 0 0 !important;
  width:var(--c2d-content-panel-width,50%) !important;
  overflow:hidden !important;
}
.c2d-banner-slide{
  padding:10px 18px 30px !important;
}
.c2d-banner-slide-copy{
  width:96% !important;
  max-width:96% !important;
  align-items:center !important;
  justify-content:center !important;
}
.c2d-banner-slide-kicker{
  font-size:clamp(10px,1.1vw,15px) !important;
  margin-bottom:5px !important;
  letter-spacing:.08em !important;
}
.c2d-banner-slide-url{
  font-size:clamp(13px,1.55vw,21px) !important;
  margin-bottom:8px !important;
  font-weight:900 !important;
}
.c2d-banner-slide-h1{
  font-size:clamp(28px,4.25vw,var(--c2d-banner-h1-size,64px)) !important;
  line-height:.98 !important;
  margin-bottom:8px !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
}
.c2d-banner-slide-h2{
  font-size:clamp(15px,2vw,var(--c2d-banner-h2-size,30px)) !important;
  line-height:1.12 !important;
  font-weight:850 !important;
  margin:0 !important;
}
.c2d-banner-slide-accent{
  width:min(94%,310px) !important;
  height:4px !important;
  margin:11px auto 10px !important;
}
.c2d-banner-slide-address{
  font-size:clamp(10px,1.05vw,15px) !important;
  line-height:1.3 !important;
}
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo{
  left:var(--c2d-content-panel-width,50%) !important;
  right:0 !important;
  top:0 !important;
  width:var(--c2d-logo-panel-width,50%) !important;
  height:100% !important;
  padding:var(--c2d-logo-panel-padding,0px) !important;
  transform:none !important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:var(--c2d-logo-fit,contain) !important;
  transform:scale(var(--c2d-logo-scale,1.30)) translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) !important;
  transform-origin:center center !important;
}

/* Tablet: keep both halves, enlarge the visual payload without overflow. */
@media(max-width:1050px) and (min-width:761px){
  .c2d-phone-banner{
    height:var(--c2d-banner-synced-height,var(--c2d-banner-tablet-height,360px)) !important;
    min-height:var(--c2d-banner-synced-height,var(--c2d-banner-tablet-height,360px)) !important;
  }
  .c2d-banner-slide{padding:8px 14px 28px !important;}
  .c2d-banner-slide-h1{font-size:clamp(28px,4.8vw,52px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(15px,2.2vw,24px) !important;}
  .c2d-banner-slide-address{font-size:clamp(9px,1.15vw,13px) !important;}
  .c2d-banner-fixed-logo img{transform:scale(var(--c2d-logo-scale,1.20)) translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) !important;}
}

/* Phones: intentionally stack the two strong halves instead of squeezing
   desktop typography into a narrow 50/50 column. This removes the broken
   mobile overflow while preserving logo + slider hierarchy. */
@media(max-width:760px){
  .c2d-phone-banner{
    height:var(--c2d-banner-synced-height,var(--c2d-banner-mobile-height,440px)) !important;
    min-height:var(--c2d-banner-synced-height,var(--c2d-banner-mobile-height,440px)) !important;
    max-height:var(--c2d-banner-synced-height,var(--c2d-banner-mobile-height,440px)) !important;
  }
  .c2d-banner-card-viewport{
    inset:0 0 48% 0 !important;
    width:100% !important;
    height:52% !important;
  }
  .c2d-banner-slide{
    padding:10px 16px 18px !important;
  }
  .c2d-banner-slide-copy{
    width:94% !important;
    max-width:94% !important;
  }
  .c2d-banner-slide-url{font-size:clamp(11px,3.2vw,15px) !important;margin-bottom:5px !important;}
  .c2d-banner-slide-h1{font-size:clamp(25px,8vw,42px) !important;margin-bottom:6px !important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,4.2vw,20px) !important;line-height:1.12 !important;}
  .c2d-banner-slide-accent{width:82% !important;margin:8px auto !important;}
  .c2d-banner-slide-address{font-size:clamp(9px,2.7vw,12px) !important;}
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    left:0 !important;
    right:0 !important;
    top:52% !important;
    width:100% !important;
    height:48% !important;
    border-left:0 !important;
    border-top:1px solid rgba(34,184,255,.14) !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width:94% !important;
    height:auto !important;
    max-height:100% !important;
    transform:scale(var(--c2d-logo-scale,1.16)) translate(var(--c2d-logo-offset-x,0px),var(--c2d-logo-offset-y,0px)) !important;
  }
  .c2d-phone-banner-dots{
    bottom:6px !important;
    z-index:30 !important;
  }
}
@media(max-width:420px){
  .c2d-phone-banner{
    height:var(--c2d-banner-synced-height,var(--c2d-banner-small-mobile-height,410px)) !important;
    min-height:var(--c2d-banner-synced-height,var(--c2d-banner-small-mobile-height,410px)) !important;
    max-height:var(--c2d-banner-synced-height,var(--c2d-banner-small-mobile-height,410px)) !important;
  }
  .c2d-banner-slide{padding:8px 12px 16px !important;}
  .c2d-banner-slide-url{font-size:11px !important;}
  .c2d-banner-slide-h1{font-size:clamp(23px,8.6vw,34px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(13px,4.2vw,17px) !important;}
  .c2d-banner-slide-address{font-size:9px !important;}
  .c2d-banner-fixed-logo img{width:96% !important;transform:scale(var(--c2d-logo-scale,1.10)) !important;}
}

/* =========================================================
   V34 RED-ARROW LAYOUT — compact banner, two halves
   LEFT: BIG C2D logo · RIGHT: text+slider inside banner
   Nav dropdown arrows · data-safe CSS only
   ========================================================= */

/* Category dropdown arrows — small, clean, professional */
.cat-menu-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.cat-menu-btn .cat-dd-arrow,
.cat-menu-btn i.cat-dd-arrow{
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: .75 !important;
  color: var(--blue, #06b6ff) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: transform .2s ease, opacity .2s ease !important;
  flex-shrink: 0 !important;
}
.cat-menu-btn:hover .cat-dd-arrow,
.cat-menu-btn.active .cat-dd-arrow{
  opacity: 1 !important;
}
.cat-menu-btn.active .cat-dd-arrow{
  transform: rotate(180deg) !important;
}
.cat-menu-home .cat-dd-arrow{ display: none !important; }

/* Compact banner ≈ Home Delivery visual height */
.hero{
  padding: 12px 0 16px !important;
}
.banner-wrap{
  margin: 0 auto 16px !important;
  width: 100% !important;
}
.c2d-phone-banner{
  width: 100% !important;
  max-width: var(--c2d-banner-max-width, 1320px) !important;
  height: var(--c2d-banner-height, 360px) !important;
  min-height: var(--c2d-banner-height, 360px) !important;
  max-height: var(--c2d-banner-height, 360px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  position: relative !important;
  isolation: isolate !important;
}
.c2d-phone-banner-stage{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* LEFT HALF — BIG C2D logo (fills half, minimal empty space) */
.c2d-banner-fixed-logo,
body:not(.lang-ur) .c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
  position: absolute !important;
  left: 1.2% !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 47% !important;
  height: 90% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--c2d-logo-background, rgba(5,11,20,.55)) !important;
  border: 1px solid var(--c2d-logo-border, rgba(34,184,255,.22)) !important;
  box-shadow: var(--c2d-logo-shadow, 0 14px 32px rgba(6,182,255,.22)) !important;
  pointer-events: none !important;
}
.c2d-banner-fixed-logo .c2d-logo-halo{ display: none !important; }
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width: 96% !important;
  height: 96% !important;
  max-width: 96% !important;
  max-height: 96% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
  filter: drop-shadow(0 12px 28px rgba(6,182,255,.32)) !important;
}

/* RIGHT HALF — slider + text INSIDE banner */
.c2d-banner-card-viewport{
  position: absolute !important;
  left: 50% !important;
  right: 1.2% !important;
  top: 4% !important;
  bottom: 10% !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  z-index: 8 !important;
  pointer-events: none !important;
}
.c2d-banner-card-viewport::after{ display: none !important; }
.c2d-banner-card-track{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
}

/* Big slides filling the right half — start from left of half */
.c2d-banner-slide,
.c2d-banner-card{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px 20px 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  will-change: transform, opacity !important;
}
.c2d-banner-slide-copy,
.c2d-banner-card-content{
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 6px !important;
  padding: 0 !important;
}
body.lang-ur .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-card-content{
  align-items: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Typography scaled for compact-but-big content */
.c2d-banner-slide-h1,
.c2d-banner-card-h1{
  font-size: clamp(22px, 2.6vw, 36px) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  margin: 0 0 6px !important;
  width: 100% !important;
}
.c2d-banner-slide-h2,
.c2d-banner-card-h2{
  font-size: clamp(13px, 1.4vw, 18px) !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  margin: 0 0 6px !important;
  width: 100% !important;
}
.c2d-banner-slide-address,
.c2d-banner-card-address{
  font-size: clamp(11px, 1.05vw, 13px) !important;
  line-height: 1.4 !important;
  margin: 0 0 4px !important;
  width: 100% !important;
}
.c2d-banner-slide-url,
.c2d-banner-card-url{
  font-size: clamp(13px, 1.2vw, 16px) !important;
  font-weight: 900 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Dots center-bottom inside banner */
.c2d-phone-banner-dots,
.c2d-banner-dots.c2d-phone-banner-dots{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 8px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Smooth EN L→R / UR R→L (inside right half) */
.c2d-banner-slide.is-current,
.c2d-banner-card.is-current{
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-in-left,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-left{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(-105%, 0, 0) scale(.96) !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-out-right,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-right{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(105%, 0, 0) scale(.96) !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-in-right,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-right{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(105%, 0, 0) scale(.96) !important;
  transition: none !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-out-left,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-left{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(-105%, 0, 0) scale(.96) !important;
}
.c2d-banner-slide.is-hidden-complete,
.c2d-banner-card.is-hidden-complete{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Tablet */
@media (max-width: 1024px){
  .c2d-phone-banner{
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
  .c2d-banner-slide-h1,
  .c2d-banner-card-h1{ font-size: clamp(20px, 3vw, 30px) !important; }
  .c2d-banner-slide-h2,
  .c2d-banner-card-h2{ font-size: clamp(12px, 1.6vw, 16px) !important; }
}

/* Mobile: stack logo top, slider below — still one banner */
@media (max-width: 820px){
  .c2d-phone-banner{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .c2d-phone-banner-stage{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 12px 12px 36px !important;
    height: auto !important;
    gap: 8px !important;
  }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(92%, 320px) !important;
    height: clamp(140px, 38vw, 200px) !important;
    margin: 0 auto !important;
    order: -1 !important;
  }
  .c2d-banner-card-viewport{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 180px !important;
    height: 180px !important;
  }
  .c2d-banner-slide,
  .c2d-banner-card{
    justify-content: center !important;
    padding: 14px 14px 18px !important;
  }
  .c2d-banner-slide-copy,
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-slide-copy,
  body.lang-ur .c2d-banner-card-content{
    align-items: center !important;
    text-align: center !important;
  }
  .c2d-phone-banner-dots{ bottom: 10px !important; }
}

@media (max-width: 420px){
  .c2d-banner-fixed-logo{
    height: clamp(120px, 42vw, 170px) !important;
  }
  .c2d-banner-card-viewport{
    min-height: 160px !important;
    height: 160px !important;
  }
  .c2d-banner-slide-h1,
  .c2d-banner-card-h1{ font-size: 18px !important; }
  .c2d-banner-slide-h2,
  .c2d-banner-card-h2{ font-size: 12px !important; }
}

/* =========================================================
   V34 FIX — Text visible · Logo RIGHT · Big banner
   EN: text L→R · UR: text R→L · Logo always RIGHT
   Overrides previous left-logo compact layer
   ========================================================= */

.hero{ padding: 14px 0 18px !important; }
.banner-wrap{ margin: 0 auto 18px !important; width: 100% !important; }

/* BIG banner */
.c2d-phone-banner{
  width: 100% !important;
  max-width: var(--c2d-banner-max-width, 1320px) !important;
  height: var(--c2d-banner-height, 440px) !important;
  min-height: var(--c2d-banner-height, 440px) !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  position: relative !important;
  isolation: isolate !important;
}
.c2d-phone-banner-stage{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: block !important;
}

/* LOGO — always RIGHT, BIG, both EN + UR */
.c2d-banner-fixed-logo,
body:not(.lang-ur) .c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
  position: absolute !important;
  left: auto !important;
  right: 1.5% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 46% !important;
  height: 88% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--c2d-logo-background, rgba(5,11,20,.65)) !important;
  border: 1px solid var(--c2d-logo-border, rgba(34,184,255,.28)) !important;
  box-shadow: var(--c2d-logo-shadow, 0 16px 36px rgba(6,182,255,.28)) !important;
  pointer-events: none !important;
}
.c2d-banner-fixed-logo .c2d-logo-halo{ display: none !important; }
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  width: 96% !important;
  height: 96% !important;
  max-width: 96% !important;
  max-height: 96% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  transform: none !important;
  filter: drop-shadow(0 14px 32px rgba(6,182,255,.35)) !important;
}

/* TEXT/SLIDER — LEFT half, fully visible, no clip */
.c2d-banner-card-viewport{
  position: absolute !important;
  left: 1.5% !important;
  right: 50% !important;
  top: 5% !important;
  bottom: 12% !important;
  width: auto !important;
  height: auto !important;
  overflow: hidden !important;
  z-index: 10 !important;
  pointer-events: none !important;
}
.c2d-banner-card-viewport::after{ display: none !important; }
.c2d-banner-card-track{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: visible !important;
}

/* Slides — fill left panel, text fully shown */
.c2d-banner-slide,
.c2d-banner-card{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px 22px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 16px !important;
  overflow: visible !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  will-change: transform, opacity !important;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition:
    transform var(--c2d-banner-duration, 820ms) var(--c2d-banner-ease, cubic-bezier(.22,.72,.18,1)),
    opacity var(--c2d-banner-duration, 820ms) var(--c2d-banner-ease, cubic-bezier(.22,.72,.18,1)),
    visibility 0s linear var(--c2d-banner-duration, 820ms) !important;
}
.c2d-banner-slide.is-current,
.c2d-banner-card.is-current{
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    transform var(--c2d-banner-duration, 820ms) var(--c2d-banner-ease, cubic-bezier(.22,.72,.18,1)),
    opacity .45s ease,
    visibility 0s linear 0s !important;
}
.c2d-banner-slide.is-hidden-complete,
.c2d-banner-card.is-hidden-complete{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: none !important;
}

/* Copy — never clip text */
.c2d-banner-slide-copy,
.c2d-banner-card-content{
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}
body.lang-ur .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-card-content{
  align-items: flex-end !important;
  text-align: right !important;
  direction: rtl !important;
}
.c2d-banner-slide-kicker{
  font-size: clamp(11px, 1.1vw, 13px) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  opacity: .85 !important;
  margin: 0 !important;
}
.c2d-banner-slide-h1,
.c2d-banner-card-h1{
  font-size: clamp(24px, 2.8vw, 40px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.c2d-banner-slide-h2,
.c2d-banner-card-h2{
  font-size: clamp(14px, 1.55vw, 20px) !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.c2d-banner-slide-address,
.c2d-banner-card-address{
  font-size: clamp(12px, 1.1vw, 14px) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.c2d-banner-slide-url,
.c2d-banner-card-url{
  font-size: clamp(14px, 1.3vw, 18px) !important;
  font-weight: 900 !important;
  margin: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

/* EN: enter left → exit right (L→R) */
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-in-left,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-left{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(-110%, 0, 0) scale(.97) !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-out-right,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-right{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(110%, 0, 0) scale(.97) !important;
}

/* UR: enter right → exit left (R→L) */
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-in-right,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-right{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(110%, 0, 0) scale(.97) !important;
  transition: none !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-out-left,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-left{
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(-110%, 0, 0) scale(.97) !important;
}

/* Dots */
.c2d-phone-banner-dots,
.c2d-banner-dots.c2d-phone-banner-dots{
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 8px !important;
}

/* Tablet */
@media (max-width: 1024px){
  .c2d-phone-banner{
    height: 380px !important;
    min-height: 380px !important;
  }
  .c2d-banner-slide-h1, .c2d-banner-card-h1{ font-size: clamp(22px, 3.2vw, 32px) !important; }
  .c2d-banner-slide-h2, .c2d-banner-card-h2{ font-size: clamp(13px, 1.8vw, 17px) !important; }
}

/* Mobile stack */
@media (max-width: 820px){
  .c2d-phone-banner{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .c2d-phone-banner-stage{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 14px 12px 40px !important;
    height: auto !important;
    gap: 10px !important;
  }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(94%, 340px) !important;
    height: clamp(150px, 42vw, 220px) !important;
    margin: 0 auto !important;
    order: -1 !important;
  }
  .c2d-banner-card-viewport{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 200px !important;
    height: 200px !important;
  }
  .c2d-banner-slide-copy,
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-slide-copy,
  body.lang-ur .c2d-banner-card-content{
    align-items: center !important;
    text-align: center !important;
  }
  .c2d-banner-slide-h1, .c2d-banner-card-h1{ font-size: clamp(20px, 5.5vw, 28px) !important; }
  .c2d-banner-slide-h2, .c2d-banner-card-h2{ font-size: clamp(13px, 3.5vw, 16px) !important; }
}

/* =========================================================
   V34 MOBILE RESPONSIVE FIX — stack logo + text
   Address fully visible · no overlap · all phone sizes
   ========================================================= */

/* Desktop/tablet: address never truncates mid-word */
.c2d-banner-slide-address,
.c2d-banner-card-address{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}

/* Strong mobile stack — overrides all earlier absolute layouts */
@media (max-width: 1024px){
  .hero{
    padding: 8px 0 14px !important;
  }
  .banner-wrap{
    margin: 0 auto 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }
  .c2d-phone-banner,
  .banner-wrap.c2d-phone-banner{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }
  .c2d-phone-banner-stage{
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 12px 42px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Logo on top, full width-ish, no absolute */
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 360px) !important;
    height: auto !important;
    min-height: 140px !important;
    max-height: 200px !important;
    aspect-ratio: 2.2 / 1 !important;
    margin: 0 auto !important;
    padding: 8px !important;
    order: 1 !important;
    z-index: 5 !important;
    flex-shrink: 0 !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width: 100% !important;
    height: 100% !important;
    max-height: 180px !important;
    object-fit: contain !important;
  }

  /* Text/slider BELOW logo, full width */
  .c2d-banner-card-viewport{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 160px !important;
    max-height: none !important;
    order: 2 !important;
    z-index: 4 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  .c2d-banner-card-track{
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 160px !important;
  }
  .c2d-banner-slide,
  .c2d-banner-card{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 160px !important;
    padding: 12px 10px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }
  /* Keep only current slide in flow height */
  .c2d-banner-slide.is-current,
  .c2d-banner-card.is-current{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 140px !important;
  }
  .c2d-banner-slide-copy,
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-slide-copy,
  body.lang-ur .c2d-banner-card-content{
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    direction: inherit !important;
    gap: 6px !important;
  }
  body.lang-ur .c2d-banner-slide-copy,
  body.lang-ur .c2d-banner-card-content{
    direction: rtl !important;
  }
  .c2d-banner-slide-h1,
  .c2d-banner-card-h1{
    font-size: clamp(20px, 6vw, 28px) !important;
    text-align: center !important;
  }
  .c2d-banner-slide-h2,
  .c2d-banner-card-h2{
    font-size: clamp(12px, 3.6vw, 15px) !important;
    text-align: center !important;
  }
  .c2d-banner-slide-address,
  .c2d-banner-card-address{
    font-size: clamp(11px, 3.2vw, 13px) !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }
  .c2d-banner-slide-url,
  .c2d-banner-card-url{
    font-size: clamp(13px, 3.8vw, 16px) !important;
    text-align: center !important;
  }
  .c2d-banner-slide-kicker{
    text-align: center !important;
  }
  .c2d-phone-banner-dots,
  .c2d-banner-dots.c2d-phone-banner-dots{
    position: absolute !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
  }
}

@media (max-width: 480px){
  .c2d-phone-banner-stage{ padding: 12px 10px 40px !important; gap: 10px !important; }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 120px !important;
    max-height: 170px !important;
  }
  .c2d-banner-slide.is-current,
  .c2d-banner-card.is-current{
    min-height: 130px !important;
    padding: 10px 8px 14px !important;
  }
  .c2d-banner-slide-h1,
  .c2d-banner-card-h1{ font-size: clamp(18px, 6.5vw, 24px) !important; }
  .c2d-banner-slide-address,
  .c2d-banner-card-address{ font-size: 11px !important; }
}

/* Landscape phones */
@media (max-width: 1024px) and (orientation: landscape){
  .c2d-phone-banner-stage{
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 12px 12px 36px !important;
  }
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    width: 42% !important;
    max-width: 280px !important;
    min-height: 110px !important;
    max-height: 150px !important;
    order: 2 !important;
  }
  .c2d-banner-card-viewport{
    width: 52% !important;
    order: 1 !important;
    min-height: 130px !important;
  }
}

/* =========================================================
   V34 CENTER TEXT · NO CLIP · SMOOTH SLIDE · LOGO UNTOUCHED
   EN + UR text centered in left panel
   ========================================================= */

/* Text panel — room for full lines, no edge clip */
.c2d-banner-card-viewport{
  left: 2% !important;
  right: 49% !important;
  top: 6% !important;
  bottom: 12% !important;
  overflow: hidden !important;
}
.c2d-banner-card-track{
  overflow: hidden !important;
}

/* Center-aligned copy (EN + UR) — logo CSS not modified */
.c2d-banner-slide,
.c2d-banner-card{
  justify-content: center !important;
  align-items: center !important;
  padding: 16px 20px 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.c2d-banner-slide-copy,
.c2d-banner-card-content,
body:not(.lang-ur) .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-slide-copy,
body:not(.lang-ur) .c2d-banner-card-content,
body.lang-ur .c2d-banner-card-content{
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 7px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
body.lang-ur .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-card-content{
  direction: rtl !important;
}

.c2d-banner-slide-kicker{
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(10px, 1vw, 12px) !important;
}
.c2d-banner-slide-h1,
.c2d-banner-card-h1{
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(22px, 2.4vw, 36px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
}
.c2d-banner-slide-h2,
.c2d-banner-card-h2{
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(12px, 1.25vw, 17px) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
}
.c2d-banner-slide-accent{
  margin-left: auto !important;
  margin-right: auto !important;
  width: min(180px, 55%) !important;
}
.c2d-banner-slide-address,
.c2d-banner-card-address{
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(11px, 1.05vw, 13px) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  text-overflow: unset !important;
}
.c2d-banner-slide-url,
.c2d-banner-card-url{
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
  overflow: visible !important;
}

/* Smooth GPU slide — no jerk */
.c2d-banner-slide,
.c2d-banner-card{
  transition:
    transform var(--c2d-banner-duration, 900ms) cubic-bezier(0.22, 0.82, 0.18, 1),
    opacity calc(var(--c2d-banner-duration, 900ms) * 0.7) ease,
    visibility 0s linear var(--c2d-banner-duration, 900ms) !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) !important;
}
.c2d-banner-slide.is-current,
.c2d-banner-card.is-current{
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    transform var(--c2d-banner-duration, 900ms) cubic-bezier(0.22, 0.82, 0.18, 1),
    opacity 0.5s ease,
    visibility 0s linear 0s !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-in-left,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-in-left{
  transform: translate3d(-100%, 0, 0) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-out-right,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-card.is-out-right{
  transform: translate3d(100%, 0, 0) !important;
  opacity: 0 !important;
  visibility: visible !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-in-right,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-in-right{
  transform: translate3d(100%, 0, 0) !important;
  opacity: 0 !important;
  visibility: visible !important;
  transition: none !important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-out-left,
body.lang-ur .c2d-phone-banner .c2d-banner-card.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-card.is-out-left{
  transform: translate3d(-100%, 0, 0) !important;
  opacity: 0 !important;
  visibility: visible !important;
}

/* Responsive — all sizes, logo structure unchanged */
@media (max-width: 1100px){
  .c2d-banner-slide-h1, .c2d-banner-card-h1{ font-size: clamp(20px, 2.6vw, 30px) !important; }
  .c2d-banner-slide-h2, .c2d-banner-card-h2{ font-size: clamp(12px, 1.4vw, 15px) !important; }
  .c2d-banner-slide-address, .c2d-banner-card-address{ font-size: clamp(10px, 1.1vw, 12px) !important; }
}
@media (max-width: 1024px){
  .c2d-banner-card-viewport{
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
  }
  .c2d-banner-slide-h1, .c2d-banner-card-h1{ font-size: clamp(20px, 5.5vw, 26px) !important; }
  .c2d-banner-slide-h2, .c2d-banner-card-h2{ font-size: clamp(12px, 3.4vw, 15px) !important; }
  .c2d-banner-slide-address, .c2d-banner-card-address{ font-size: clamp(11px, 3vw, 13px) !important; }
}

/* =========================================================
   V34 NO-BLINK SLIDER + CENTER TEXT (logo untouched)
   Fixed-height track · absolute slides only · no layout shift
   ========================================================= */

/* Isolate banner so transforms never reflow the page */
.c2d-phone-banner,
.banner-wrap.c2d-phone-banner{
  contain: layout style !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}
.c2d-phone-banner-stage{
  contain: layout !important;
}

/* Desktop text panel — centered, full text visible */
@media (min-width: 1025px){
  .c2d-banner-card-viewport{
    left: 2.5% !important;
    right: 50% !important;
    top: 5% !important;
    bottom: 11% !important;
    overflow: hidden !important;
  }
  .c2d-banner-slide,
  .c2d-banner-card{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    /* NEVER switch to relative — prevents page blink */
    margin: 0 !important;
  }
  .c2d-banner-slide.is-current,
  .c2d-banner-card.is-current{
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }
  .c2d-banner-slide-copy,
  .c2d-banner-card-content{
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.lang-ur .c2d-banner-slide-copy,
  body.lang-ur .c2d-banner-card-content{
    direction: rtl !important;
    text-align: center !important;
    align-items: center !important;
  }
  .c2d-banner-slide-h1,
  .c2d-banner-card-h1{
    font-size: clamp(20px, 2.2vw, 34px) !important;
    text-align: center !important;
    line-height: 1.18 !important;
  }
  .c2d-banner-slide-h2,
  .c2d-banner-card-h2{
    font-size: clamp(11px, 1.15vw, 16px) !important;
    text-align: center !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  .c2d-banner-slide-address,
  .c2d-banner-card-address{
    font-size: clamp(10px, 0.95vw, 12.5px) !important;
    text-align: center !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  .c2d-banner-slide-url,
  .c2d-banner-card-url{
    text-align: center !important;
  }
  .c2d-banner-slide-accent{
    margin: 4px auto !important;
  }
}

/* Mobile / tablet: FIXED height text area — no page blink on slide */
@media (max-width: 1024px){
  .c2d-phone-banner,
  .banner-wrap.c2d-phone-banner{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  .c2d-phone-banner-stage{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 14px 12px 40px !important;
    gap: 10px !important;
    height: auto !important;
    overflow: hidden !important;
  }
  /* Logo stays top — DO NOT change logo asset */
  .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(100%, 360px) !important;
    height: auto !important;
    min-height: 130px !important;
    max-height: 190px !important;
    aspect-ratio: 2.2 / 1 !important;
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  /* Fixed-height viewport — slides absolute inside, zero layout shift */
  .c2d-banner-card-viewport{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    order: 2 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  .c2d-banner-card-track{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .c2d-banner-slide,
  .c2d-banner-card,
  .c2d-banner-slide.is-current,
  .c2d-banner-card.is-current,
  .c2d-banner-slide.is-hidden,
  .c2d-banner-card.is-hidden{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .c2d-banner-slide-copy,
  .c2d-banner-card-content{
    text-align: center !important;
    align-items: center !important;
  }
  .c2d-banner-slide-h1, .c2d-banner-card-h1{ font-size: clamp(18px, 5.2vw, 24px) !important; }
  .c2d-banner-slide-h2, .c2d-banner-card-h2{ font-size: clamp(11px, 3.2vw, 14px) !important; }
  .c2d-banner-slide-address, .c2d-banner-card-address{ font-size: 11px !important; }
}

@media (max-width: 400px){
  .c2d-banner-card-viewport{
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
  }
  .c2d-banner-fixed-logo{
    min-height: 110px !important;
    max-height: 160px !important;
  }
}

/* Smooth cross-fade+slide — GPU only, no layout props */
.c2d-banner-slide,
.c2d-banner-card{
  transition:
    transform 0.85s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.55s ease !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) !important;
}
.c2d-banner-slide.is-current,
.c2d-banner-card.is-current{
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  transform: translate3d(0, 0, 0) !important;
}
.c2d-banner-slide.is-hidden,
.c2d-banner-card.is-hidden{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: none !important;
}
/* Incoming starts off-screen without transition, then animates in */
body:not(.lang-ur) .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-in-left{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 6 !important;
  transform: translate3d(-100%, 0, 0) !important;
  transition: none !important;
}
body:not(.lang-ur) .c2d-banner-slide.is-out-right,
.c2d-phone-banner[data-direction="ltr"] .c2d-banner-slide.is-out-right{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 4 !important;
  transform: translate3d(100%, 0, 0) !important;
}
body.lang-ur .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-in-right{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 6 !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: none !important;
}
body.lang-ur .c2d-banner-slide.is-out-left,
.c2d-phone-banner[data-direction="rtl"] .c2d-banner-slide.is-out-left{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 4 !important;
  transform: translate3d(-100%, 0, 0) !important;
}

/* =========================================================
   V34 CENTER-LOCKED CROSSFADE — text never disappears
   Logo untouched · EN/UR centered · laptop + mobile smooth
   ========================================================= */

/* Desktop / laptop: text panel */
@media (min-width: 1025px){
  .c2d-banner-card-viewport{
    left: 3% !important;
    right: 50% !important;
    top: 6% !important;
    bottom: 12% !important;
    overflow: hidden !important;
  }
  .c2d-banner-card-track{
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
  }
}

/* All slides: absolute, centered content, GPU only */
.c2d-banner-slide,
.c2d-banner-card{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.8, 0.25, 1) !important;
}
.c2d-banner-slide.is-current,
.c2d-banner-card.is-current{
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}
.c2d-banner-slide.is-hidden,
.c2d-banner-card.is-hidden{
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transition: none !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Incoming: slight offset + fade (stays mostly in view) */
.c2d-banner-slide.is-in-left,
.c2d-banner-card.is-in-left{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 6 !important;
  transform: translate3d(-18%, 0, 0) !important;
  transition: none !important;
}
.c2d-banner-slide.is-in-right,
.c2d-banner-card.is-in-right{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 6 !important;
  transform: translate3d(18%, 0, 0) !important;
  transition: none !important;
}
/* Outgoing: fade + small nudge (never fully leaves before fade) */
.c2d-banner-slide.is-out-right,
.c2d-banner-card.is-out-right{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 4 !important;
  transform: translate3d(18%, 0, 0) !important;
}
.c2d-banner-slide.is-out-left,
.c2d-banner-card.is-out-left{
  opacity: 0 !important;
  visibility: visible !important;
  z-index: 4 !important;
  transform: translate3d(-18%, 0, 0) !important;
}

/* Centered copy — EN + UR */
.c2d-banner-slide-copy,
.c2d-banner-card-content,
body:not(.lang-ur) .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-slide-copy{
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
body.lang-ur .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-card-content{
  direction: rtl !important;
}
.c2d-banner-slide-kicker,
.c2d-banner-slide-h1,
.c2d-banner-slide-h2,
.c2d-banner-slide-address,
.c2d-banner-slide-url,
.c2d-banner-card-h1,
.c2d-banner-card-h2,
.c2d-banner-card-address,
.c2d-banner-card-url{
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.c2d-banner-slide-h1,
.c2d-banner-card-h1{
  font-size: clamp(18px, 2.1vw, 32px) !important;
  line-height: 1.2 !important;
}
.c2d-banner-slide-h2,
.c2d-banner-card-h2{
  font-size: clamp(11px, 1.1vw, 15px) !important;
  line-height: 1.35 !important;
}
.c2d-banner-slide-address,
.c2d-banner-card-address{
  font-size: clamp(10px, 0.95vw, 12px) !important;
  line-height: 1.4 !important;
}
.c2d-banner-slide-url,
.c2d-banner-card-url{
  font-size: clamp(12px, 1.15vw, 15px) !important;
}
.c2d-banner-slide-accent{
  margin: 4px auto !important;
  width: min(160px, 50%) !important;
}

/* Logo: do not alter size/position rules beyond keeping right */
/* (existing logo CSS remains — no overrides here for width/height/src) */

/* Mobile fixed height — no blink */
@media (max-width: 1024px){
  .c2d-banner-card-viewport{
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    position: relative !important;
  }
  .c2d-banner-card-track{
    position: absolute !important;
    inset: 0 !important;
  }
  .c2d-banner-slide-h1, .c2d-banner-card-h1{ font-size: clamp(17px, 5vw, 22px) !important; }
  .c2d-banner-slide-h2, .c2d-banner-card-h2{ font-size: clamp(11px, 3.2vw, 13px) !important; }
  .c2d-banner-slide-address, .c2d-banner-card-address{ font-size: 10.5px !important; }
}

/* =========================================================
   V34 FORCE TEXT CENTER — all breakpoints EN + UR
   Overrides --c2d-slide-text-align left defaults
   Logo untouched
   ========================================================= */
.c2d-phone-banner{
  --c2d-slide-text-align: center !important;
  --c2d-content-align: center !important;
}
.c2d-banner-slide,
.c2d-banner-card{
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.c2d-banner-slide-copy,
.c2d-banner-card-content,
body:not(.lang-ur) .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-slide-copy,
body:not(.lang-ur) .c2d-banner-card-content,
body.lang-ur .c2d-banner-card-content{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body.lang-ur .c2d-banner-slide-copy,
body.lang-ur .c2d-banner-card-content{
  direction: rtl !important;
}
.c2d-banner-slide-kicker,
.c2d-banner-slide-h1,
.c2d-banner-slide-h2,
.c2d-banner-slide-address,
.c2d-banner-slide-url,
.c2d-banner-card-h1,
.c2d-banner-card-h2,
.c2d-banner-card-address,
.c2d-banner-card-url,
body.lang-ur .c2d-banner-slide-h1,
body.lang-ur .c2d-banner-slide-h2,
body.lang-ur .c2d-banner-slide-address,
body.lang-ur .c2d-banner-slide-url{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
.c2d-banner-slide-accent{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1024px){
  .c2d-banner-slide-copy,
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-slide-copy{
    text-align: center !important;
    align-items: center !important;
  }
  .c2d-banner-slide-h1,
  .c2d-banner-slide-h2,
  .c2d-banner-slide-address,
  .c2d-banner-slide-url{
    text-align: center !important;
  }
}

/* V34.1 — stable banner replacement-image mode + final responsive text safety.
   Existing C2D logo rules remain untouched. */
.c2d-banner-slide-replacement-image{
  position:absolute!important;
  inset:10% 5%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  z-index:2!important;
  pointer-events:none!important;
}
.c2d-banner-slide-replacement-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-position:center!important;
  filter:drop-shadow(0 14px 28px rgba(6,182,255,.18))!important;
}

/* Stable desktop split: text occupies the left half; logo remains on the right. */
@media (min-width:901px){
  .c2d-banner-card-viewport{
    left:1.5%!important;
    right:50%!important;
    top:5%!important;
    bottom:12%!important;
    overflow:hidden!important;
  }
  .c2d-banner-slide-copy,.c2d-banner-card-content{
    width:100%!important;
    max-width:100%!important;
    padding-inline:clamp(8px,1.5vw,24px)!important;
    overflow:visible!important;
  }
  .c2d-banner-slide-h1,.c2d-banner-card-h1,
  .c2d-banner-slide-h2,.c2d-banner-card-h2,
  .c2d-banner-slide-address,.c2d-banner-card-address,
  .c2d-banner-slide-url,.c2d-banner-card-url{max-width:100%!important;overflow-wrap:anywhere!important;}
}

/* Mobile/tablet: logo remains the existing top element; text gets its own fixed
   viewport so it can never be covered by the logo or another slide. */
@media (max-width:900px){
  .c2d-phone-banner-stage{gap:8px!important;padding:10px 10px 38px!important;}
  .c2d-banner-card-viewport{
    width:100%!important;
    height:168px!important;
    min-height:168px!important;
    max-height:168px!important;
    overflow:hidden!important;
  }
  .c2d-banner-slide-copy,.c2d-banner-card-content{
    width:100%!important;
    max-width:100%!important;
    padding-inline:8px!important;
    overflow:visible!important;
  }
  .c2d-banner-slide-replacement-image{inset:8% 5%!important;}
  .c2d-banner-slide-h1,.c2d-banner-card-h1{font-size:clamp(18px,5.2vw,28px)!important;line-height:1.15!important;}
  .c2d-banner-slide-h2,.c2d-banner-card-h2{font-size:clamp(11px,3.2vw,16px)!important;line-height:1.3!important;}
  .c2d-banner-slide-address,.c2d-banner-card-address{font-size:clamp(10px,2.8vw,12px)!important;line-height:1.35!important;}
  .c2d-banner-slide-url,.c2d-banner-card-url{font-size:clamp(12px,3vw,15px)!important;}
}
@media (max-width:420px){
  .c2d-banner-card-viewport{height:156px!important;min-height:156px!important;max-height:156px!important;}
  .c2d-banner-slide-copy,.c2d-banner-card-content{padding-inline:5px!important;}
  .c2d-banner-slide-h1,.c2d-banner-card-h1{font-size:clamp(17px,5.8vw,24px)!important;}
  .c2d-banner-slide-h2,.c2d-banner-card-h2{font-size:clamp(10px,3.4vw,14px)!important;}
  .c2d-banner-slide-address,.c2d-banner-card-address{font-size:10px!important;}
}

/* The transition itself never changes layout dimensions. */
.c2d-banner-slide,.c2d-banner-card{
  contain:layout paint style!important;
  transform-origin:center!important;
  transition:transform var(--c2d-banner-duration,780ms) cubic-bezier(.22,.72,.18,1),opacity var(--c2d-banner-duration,780ms) cubic-bezier(.22,.72,.18,1)!important;
}
.c2d-banner-slide.is-in-left,.c2d-banner-card.is-in-left{transform:translate3d(-12%,0,0)!important;opacity:0!important;visibility:visible!important;}
.c2d-banner-slide.is-in-right,.c2d-banner-card.is-in-right{transform:translate3d(12%,0,0)!important;opacity:0!important;visibility:visible!important;}
.c2d-banner-slide.is-out-right,.c2d-banner-card.is-out-right{transform:translate3d(12%,0,0)!important;opacity:0!important;visibility:visible!important;}
.c2d-banner-slide.is-out-left,.c2d-banner-card.is-out-left{transform:translate3d(-12%,0,0)!important;opacity:0!important;visibility:visible!important;}
.c2d-banner-slide.is-current,.c2d-banner-card.is-current{transform:translate3d(0,0,0)!important;opacity:1!important;visibility:visible!important;}

/* ================================================================
   C2D V34.2 — FINAL MOBILE LOGO CORNERS + URL + SPACING PASS
   Additive presentation layer only. Existing data/assets are untouched.
   ================================================================ */
.c2d-phone-banner{
  /* Bigger visual payload, but no artificial empty top/bottom space. */
  height:clamp(420px,31vw,500px)!important;
  min-height:clamp(420px,31vw,500px)!important;
  max-height:560px!important;
  margin-top:var(--c2d-banner-margin-top,8px)!important;
  margin-bottom:18px!important;
}
.c2d-banner-fixed-logo,
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  border-radius:var(--c2d-logo-radius,26px)!important;
}
.c2d-banner-fixed-logo{
  overflow:hidden!important;
}
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  object-fit:contain!important;
  object-position:center!important;
}
.c2d-banner-slide-url{
  order:var(--c2d-banner-url-order,99)!important;
  display:var(--c2d-banner-url-visible,block)!important;
  font-size:var(--c2d-banner-url-size,20px)!important;
  margin-bottom:var(--c2d-banner-url-bottom-gap,0px)!important;
  margin-top:4px!important;
  flex:0 0 auto!important;
}
/* The URL is deliberately the final text item when Bottom / Last is selected. */
.c2d-banner-slide-copy{
  min-height:0!important;
}
.c2d-banner-slide-h1{
  font-size:clamp(38px,4.6vw,66px)!important;
}
.c2d-banner-slide-h2{
  font-size:clamp(20px,2.1vw,30px)!important;
}

/* Reduce the gap after the banner and make the two hero halves equal-height. */
.hero{
  padding-top:18px!important;
  padding-bottom:24px!important;
}
.banner-wrap.c2d-phone-banner{margin-bottom:18px!important;}
.hero-grid{
  align-items:stretch!important;
  gap:24px!important;
}
.hero-content,
.hero-visual{
  min-height:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.hero-content{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
}
.hero-content .badge{
  margin-bottom:12px!important;
}
.hero-visual .hero-card{
  height:100%!important;
  min-height:0!important;
  margin:0!important;
}

/* Desktop: clean 50/50 composition, large logo and large text, no dead zones. */
@media (min-width:761px){
  .c2d-phone-banner[data-logo-side="right"] .c2d-banner-fixed-logo{
    left:auto!important;
    right:0!important;
  }
  .c2d-phone-banner[data-logo-side="right"] .c2d-banner-card-viewport{
    left:0!important;
    right:48%!important;
    width:52%!important;
  }
  .c2d-phone-banner[data-logo-side="left"] .c2d-banner-fixed-logo{
    left:0!important;
    right:auto!important;
  }
  .c2d-phone-banner[data-logo-side="left"] .c2d-banner-card-viewport{
    left:48%!important;
    right:0!important;
    width:52%!important;
  }
  .c2d-banner-fixed-logo{
    width:48%!important;
    height:94%!important;
    top:3%!important;
    bottom:auto!important;
    border-radius:var(--c2d-logo-radius,26px)!important;
  }
  .c2d-banner-card-viewport{
    left:48%!important;
    right:0!important;
    top:0!important;
    bottom:0!important;
    width:52%!important;
    height:100%!important;
  }
  .c2d-banner-slide{
    padding:34px 5.5% 42px!important;
  }
  .c2d-banner-slide-copy{
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    width:100%!important;
    max-width:100%!important;
  }
  .c2d-banner-slide-h1,
  .c2d-banner-slide-h2,
  .c2d-banner-slide-address,
  .c2d-banner-slide-url{
    text-align:center!important;
    width:100%!important;
    max-width:100%!important;
  }
  .c2d-banner-slide-accent{margin-left:auto!important;margin-right:auto!important;}
}

/* Tablet */
@media (min-width:761px) and (max-width:1100px){
  .c2d-phone-banner{height:430px!important;min-height:430px!important;}
  .c2d-banner-fixed-logo{width:48%!important;height:92%!important;top:4%!important;}
  .c2d-banner-card-viewport{left:48%!important;width:52%!important;}
  .c2d-banner-slide{padding:24px 4%!important;}
  .c2d-banner-slide-h1{font-size:clamp(32px,4.6vw,52px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(16px,2.2vw,24px)!important;}
}

/* Phones: large, balanced stacked halves. Four logo corners are rounded. */
@media (max-width:760px){
  .c2d-phone-banner{
    height:clamp(500px,120vw,600px)!important;
    min-height:clamp(500px,120vw,600px)!important;
    max-height:600px!important;
    margin-bottom:14px!important;
    border-radius:22px!important;
  }
  .c2d-phone-banner-stage{inset:0!important;height:100%!important;}
  .c2d-banner-fixed-logo{
    left:3%!important;
    right:auto!important;
    top:3%!important;
    width:94%!important;
    height:49%!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:var(--c2d-logo-radius,26px)!important;
    border:1px solid var(--c2d-logo-border,rgba(34,184,255,.28))!important;
    background:var(--c2d-logo-background,#050b14)!important;
  }
  .c2d-banner-fixed-logo::after{
    inset:10px!important;
    border-radius:calc(var(--c2d-logo-radius,26px) - 6px)!important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    border-radius:var(--c2d-logo-radius,26px)!important;
    object-fit:contain!important;
  }
  .c2d-banner-card-viewport{
    left:3%!important;
    right:3%!important;
    top:52%!important;
    bottom:4%!important;
    width:94%!important;
    height:44%!important;
    min-height:0!important;
    max-height:none!important;
  }
  .c2d-banner-slide{
    padding:12px 10px 28px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .c2d-banner-slide-copy{
    width:100%!important;
    max-width:100%!important;
    gap:4px!important;
    align-items:center!important;
    text-align:center!important;
  }
  .c2d-banner-slide-h1{font-size:clamp(27px,8.6vw,43px)!important;line-height:1.08!important;}
  .c2d-banner-slide-h2{font-size:clamp(15px,4.5vw,21px)!important;line-height:1.2!important;}
  .c2d-banner-slide-address{font-size:clamp(10px,2.8vw,13px)!important;line-height:1.35!important;}
  .c2d-banner-slide-url{font-size:clamp(14px,4vw,19px)!important;margin-top:5px!important;}
  .c2d-banner-slide-accent{width:78%!important;margin:8px auto!important;}
  .c2d-phone-banner-dots{bottom:8px!important;left:50%!important;}
  .hero{padding-top:12px!important;padding-bottom:18px!important;}
  .banner-wrap.c2d-phone-banner{margin-bottom:14px!important;}
  .hero-grid{gap:16px!important;}
  .hero-content .badge{align-self:flex-start;margin-bottom:8px!important;}
}

@media (max-width:420px){
  .c2d-phone-banner{height:500px!important;min-height:500px!important;max-height:500px!important;}
  .c2d-banner-fixed-logo{top:3%;height:48%!important;}
  .c2d-banner-card-viewport{top:52%!important;height:44%!important;bottom:4%!important;}
  .c2d-banner-slide-h1{font-size:clamp(25px,8.4vw,36px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,4.2vw,18px)!important;}
  .c2d-banner-slide-address{font-size:10px!important;}
  .c2d-banner-slide-url{font-size:14px!important;}
}

@media (max-width:360px){
  .c2d-phone-banner{height:490px!important;min-height:490px!important;max-height:490px!important;}
  .c2d-banner-slide-h1{font-size:24px!important;}
  .c2d-banner-slide-h2{font-size:13px!important;}
  .c2d-banner-slide-address{font-size:9.5px!important;}
  .c2d-banner-slide-url{font-size:13px!important;}
}

/* =========================================================
   CURRENT REQUEST — MOBILE SEARCH / BANNER / COMPACT SPACING
   Safe presentation overrides only. Existing assets and content stay intact.
   ========================================================= */
.search-bar-inner button#searchClose{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:50 !important;
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:18px !important;
  border:1px solid var(--border) !important;
  border-radius:50% !important;
  background:var(--card) !important;
  color:var(--text) !important;
  pointer-events:auto !important;
  flex-shrink:0 !important;
}
.search-bar-inner{min-width:0 !important;}
.search-bar-inner input{min-width:0 !important;flex:1 1 auto !important;}

/* Never let the mobile banner text area collapse behind the logo/dots. */
@media (max-width:760px){
  .c2d-phone-banner{
    height:clamp(520px,135vw,620px) !important;
    min-height:clamp(520px,135vw,620px) !important;
    max-height:620px !important;
    overflow:hidden !important;
  }
  .c2d-phone-banner-stage{
    height:100% !important;
    min-height:0 !important;
    padding:0 !important;
    display:block !important;
    position:relative !important;
    overflow:hidden !important;
  }
  .c2d-banner-fixed-logo{
    position:absolute !important;
    left:3% !important;
    right:auto !important;
    top:3% !important;
    width:94% !important;
    height:43% !important;
    max-width:none !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    border-radius:34px !important;
    overflow:hidden !important;
    z-index:12 !important;
  }
  .c2d-banner-fixed-logo::after{
    border-radius:28px !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    border-radius:34px !important;
    display:block !important;
  }
  .c2d-banner-card-viewport{
    position:absolute !important;
    left:3% !important;
    right:3% !important;
    top:49% !important;
    bottom:6% !important;
    width:94% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:4 !important;
  }
  .c2d-banner-card-track{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .c2d-banner-slide,
  .c2d-banner-slide.is-current,
  .c2d-banner-slide.is-hidden,
  .c2d-banner-card,
  .c2d-banner-card.is-current,
  .c2d-banner-card.is-hidden{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:8px 10px 10px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .c2d-banner-slide-copy,
  .c2d-banner-card-content{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:6px !important;
    padding:4px 6px !important;
  }
  .c2d-banner-slide-kicker{font-size:clamp(11px,3vw,14px) !important;line-height:1.1 !important;}
  .c2d-banner-slide-h1{font-size:clamp(25px,8vw,40px) !important;line-height:1.08 !important;}
  .c2d-banner-slide-h2{font-size:clamp(14px,4.2vw,20px) !important;line-height:1.25 !important;}
  .c2d-banner-slide-address{font-size:clamp(10px,2.8vw,13px) !important;line-height:1.35 !important;}
  .c2d-banner-slide-url{font-size:clamp(14px,4vw,19px) !important;line-height:1.15 !important;margin-top:4px !important;}
  .c2d-banner-slide-accent{width:min(78%,280px) !important;margin:7px auto !important;flex:0 0 auto !important;}
  .c2d-phone-banner-dots{bottom:10px !important;z-index:25 !important;}

  /* Compact the three requested hero/service callouts without removing them. */
  .hero-grid{gap:12px !important;}
  .hero-content .badge{
    width:max-content !important;
    max-width:100% !important;
    margin:0 auto 8px !important;
    padding:6px 12px !important;
    font-size:11px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .hero-visual{margin:0 !important;min-width:0 !important;}
  .hero-visual .hero-card{
    height:auto !important;
    min-height:0 !important;
    padding:16px 14px 18px !important;
    margin:0 !important;
  }
  .hero-card .float-chip{
    max-width:min(78vw,250px) !important;
    padding:6px 10px !important;
    gap:6px !important;
    font-size:10px !important;
    line-height:1.15 !important;
    box-shadow:0 8px 18px rgba(0,0,0,.28) !important;
  }
  .hero-card .float-chip .chip-ic{width:24px !important;height:24px !important;}
  .chip-1{top:-10px !important;inset-inline-end:0 !important;}
  .chip-2{bottom:-10px !important;inset-inline-start:0 !important;}
  .hero-illustration{padding:20px 8px 6px !important;}
  .hero-actions{gap:8px !important;margin-bottom:14px !important;}
  .hero-stats{gap:12px !important;}
}

@media (max-width:420px){
  .c2d-phone-banner{
    height:clamp(510px,142vw,570px) !important;
    min-height:clamp(510px,142vw,570px) !important;
  }
  .c2d-banner-fixed-logo{height:42% !important;border-radius:32px !important;}
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{border-radius:32px !important;}
  .c2d-banner-card-viewport{top:48% !important;bottom:7% !important;}
  .c2d-banner-slide-h1{font-size:clamp(23px,7.8vw,34px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(13px,4vw,18px) !important;}
  .c2d-banner-slide-address{font-size:10px !important;}
  .c2d-banner-slide-url{font-size:14px !important;}
}

@media (max-width:360px){
  .c2d-phone-banner{height:510px !important;min-height:510px !important;}
  .c2d-banner-fixed-logo{height:41% !important;}
  .c2d-banner-card-viewport{top:47% !important;bottom:8% !important;}
  .c2d-banner-slide-h1{font-size:23px !important;}
  .c2d-banner-slide-h2{font-size:13px !important;}
  .c2d-banner-slide-address{font-size:9.5px !important;}
  .c2d-banner-slide-url{font-size:13px !important;}
}

/* Laptop/desktop: compact trusted/repair chips and remove artificial card height. */
@media (min-width:761px){
  .hero-content .badge{width:max-content;max-width:100%;}
  .hero-visual .hero-card{height:auto !important;min-height:0 !important;}
  .hero-card .float-chip{padding:8px 13px 8px 8px;font-size:11px;gap:7px;}
  body.lang-ur .hero-card .float-chip{padding:8px 8px 8px 13px;}
  .hero-card .float-chip .chip-ic{width:28px;height:28px;}
}

/* Stable, non-jerking slider motion: only compositor-friendly properties move. */
.c2d-banner-slide,
.c2d-banner-card{
  will-change:transform,opacity !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transition:transform var(--c2d-banner-duration,760ms) cubic-bezier(.22,.75,.20,1),opacity var(--c2d-banner-duration,760ms) ease !important;
}
@media (max-width:760px){
  .c2d-banner-slide.is-in-left{transform:translate3d(-8%,0,0) !important;}
  .c2d-banner-slide.is-in-right{transform:translate3d(8%,0,0) !important;}
  .c2d-banner-slide.is-out-left{transform:translate3d(-8%,0,0) !important;}
  .c2d-banner-slide.is-out-right{transform:translate3d(8%,0,0) !important;}
  .c2d-banner-slide.is-current{transform:translate3d(0,0,0) !important;}
}

/* No accidental horizontal page overflow from the responsive fixes. */
html,body{max-width:100%;overflow-x:hidden;}

/* Tighten only the requested hero/banner-to-content spacing. */
.hero{padding-top:12px !important;padding-bottom:18px !important;}
@media (max-width:760px){
  .hero{padding-top:8px !important;padding-bottom:14px !important;}
  .banner-wrap.c2d-phone-banner{margin-bottom:8px !important;}
}

/* =========================================================
   C2D REQUESTED FIXES — FINAL AUTHORITATIVE RESPONSIVE PASS
   ========================================================= */
header.main-header{overflow:visible!important;}
.search-bar{position:relative!important;z-index:2200!important;}
.search-bar-inner{position:relative!important;width:100%!important;box-sizing:border-box!important;overflow:visible!important;padding-inline:12px!important;}
.search-bar-inner input{min-width:0!important;flex:1 1 auto!important;}
.search-bar-inner button#searchClose,html[dir="rtl"] .search-bar-inner button#searchClose{display:inline-flex!important;visibility:visible!important;opacity:1!important;z-index:9999!important;flex:0 0 var(--c2d-search-close-size,40px)!important;width:var(--c2d-search-close-size,40px)!important;min-width:var(--c2d-search-close-size,40px)!important;height:var(--c2d-search-close-size,40px)!important;min-height:var(--c2d-search-close-size,40px)!important;margin:0!important;padding:0!important;align-items:center!important;justify-content:center!important;border:1px solid var(--border)!important;border-radius:50%!important;background:var(--card)!important;color:var(--text)!important;font-size:20px!important;font-weight:900!important;line-height:1!important;cursor:pointer!important;pointer-events:auto!important;box-sizing:border-box!important;}
.search-bar-inner button#searchClose:hover{color:var(--blue)!important;border-color:var(--blue)!important;}
.lang-switch button{position:relative!important;z-index:20!important;touch-action:manipulation!important;}

/* Desktop/tablet: true 50/50 banner, with independent text and logo areas. */
.c2d-phone-banner{width:100%!important;max-width:var(--c2d-banner-max-width,1320px)!important;height:var(--c2d-desktop-banner-height,440px)!important;min-height:var(--c2d-desktop-banner-height,440px)!important;max-height:none!important;margin-top:0!important;margin-bottom:12px!important;overflow:hidden!important;box-sizing:border-box!important;}
.c2d-phone-banner-stage{position:relative!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;}
.c2d-banner-card-viewport{position:absolute!important;left:0!important;right:50%!important;top:0!important;bottom:0!important;width:50%!important;height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;box-sizing:border-box!important;z-index:4!important;}
.c2d-banner-card-track{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;}
.c2d-banner-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;box-sizing:border-box!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:30px 6% 52px!important;}
.c2d-banner-slide-copy{width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;direction:ltr!important;overflow:visible!important;}
body.lang-ur .c2d-banner-slide-copy{direction:rtl!important;text-align:center!important;align-items:center!important;}
.c2d-banner-slide-kicker,.c2d-banner-slide-h1,.c2d-banner-slide-h2,.c2d-banner-slide-address,.c2d-banner-slide-url{width:100%!important;max-width:100%!important;text-align:center!important;margin-inline:auto!important;overflow-wrap:anywhere!important;}
.c2d-banner-slide-kicker{font-size:clamp(11px,1vw,15px)!important;line-height:1.2!important;margin-bottom:10px!important;}
.c2d-banner-slide-h1{font-size:clamp(34px,4.4vw,64px)!important;line-height:1.06!important;margin-bottom:10px!important;}
.c2d-banner-slide-h2{font-size:clamp(18px,2vw,29px)!important;line-height:1.25!important;margin-bottom:0!important;}
.c2d-banner-slide-accent{width:min(72%,310px)!important;margin:14px auto!important;flex:0 0 auto!important;}
.c2d-banner-slide-address{font-size:clamp(10px,1vw,14px)!important;line-height:1.45!important;margin-bottom:4px!important;}
.c2d-banner-slide-url{font-size:clamp(14px,1.35vw,20px)!important;line-height:1.2!important;margin-top:4px!important;order:99!important;display:block!important;}
.c2d-banner-fixed-logo,body.lang-ur .c2d-banner-fixed-logo{position:absolute!important;z-index:12!important;top:0!important;bottom:0!important;right:0!important;left:auto!important;width:50%!important;height:100%!important;max-width:none!important;max-height:none!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-radius:var(--c2d-banner-logo-radius,26px)!important;box-sizing:border-box!important;padding:10px!important;pointer-events:none!important;}
.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;border-radius:var(--c2d-banner-logo-radius,26px)!important;display:block!important;}
.c2d-banner-fixed-logo .c2d-logo-halo{border-radius:var(--c2d-banner-logo-radius,26px)!important;}
.c2d-phone-banner-dots{left:50%!important;bottom:7px!important;z-index:30!important;}

@media (max-width:1100px) and (min-width:761px){
  .c2d-phone-banner{height:var(--c2d-tablet-banner-height,440px)!important;min-height:var(--c2d-tablet-banner-height,440px)!important;}
  .c2d-banner-slide{padding-inline:5%!important;}
  .c2d-banner-slide-h1{font-size:clamp(30px,5vw,54px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(16px,2.4vw,24px)!important;}
}

/* Mobile: logo occupies its own top zone; text occupies its own bottom zone.
   The text is never hidden by the logo or dots. */
@media (max-width:760px){
  .c2d-phone-banner{height:var(--c2d-mobile-banner-height,520px)!important;min-height:var(--c2d-mobile-banner-height,520px)!important;max-height:none!important;border-radius:18px!important;margin-bottom:8px!important;}
  .c2d-phone-banner-stage{display:block!important;height:100%!important;min-height:0!important;overflow:hidden!important;}
  .c2d-banner-fixed-logo,body.lang-ur .c2d-banner-fixed-logo{left:3%!important;right:3%!important;top:2%!important;bottom:auto!important;width:94%!important;height:43%!important;max-width:none!important;max-height:none!important;padding:8px!important;border-radius:24px!important;}
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{border-radius:20px!important;}
  .c2d-banner-card-viewport{left:3%!important;right:3%!important;top:46%!important;bottom:8%!important;width:94%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;z-index:5!important;}
  .c2d-banner-card-track{position:absolute!important;inset:0!important;height:100%!important;min-height:0!important;overflow:hidden!important;}
  .c2d-banner-slide,.c2d-banner-slide.is-current,.c2d-banner-slide.is-hidden{inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;padding:8px 8px 16px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;box-sizing:border-box!important;}
  .c2d-banner-slide-copy{width:100%!important;height:auto!important;min-height:0!important;max-height:100%!important;padding:0 4px!important;gap:0!important;overflow:visible!important;}
  .c2d-banner-slide-kicker{font-size:clamp(10px,3vw,13px)!important;line-height:1.15!important;margin-bottom:6px!important;}
  .c2d-banner-slide-h1{font-size:clamp(24px,8vw,38px)!important;line-height:1.08!important;margin-bottom:7px!important;}
  .c2d-banner-slide-h2{font-size:clamp(13px,4vw,19px)!important;line-height:1.25!important;}
  .c2d-banner-slide-accent{width:min(76%,280px)!important;height:4px!important;margin:8px auto!important;}
  .c2d-banner-slide-address{font-size:clamp(9px,2.7vw,12px)!important;line-height:1.35!important;margin-bottom:2px!important;}
  .c2d-banner-slide-url{font-size:clamp(13px,3.8vw,18px)!important;line-height:1.2!important;margin-top:4px!important;}
  .c2d-phone-banner-dots{bottom:5px!important;}

  .hero-grid{gap:var(--c2d-hero-section-gap,14px)!important;}
  .hero-content .badge{width:max-content!important;max-width:calc(100% - 8px)!important;align-self:center!important;padding:var(--c2d-trusted-padding-y,7px) var(--c2d-trusted-padding-x,12px)!important;margin:0 auto 8px!important;font-size:11px!important;line-height:1.25!important;white-space:normal!important;text-align:center!important;box-sizing:border-box!important;}
  .hero-content h1{margin-bottom:8px!important;}
  .hero-content p{margin-bottom:12px!important;font-size:14px!important;line-height:1.45!important;}
  .hero-actions{gap:var(--c2d-hero-action-gap,10px)!important;margin-bottom:10px!important;}
  .hero-stats{gap:var(--c2d-hero-stats-gap,16px)!important;margin-bottom:0!important;}
  .hero-visual{margin:0!important;min-height:0!important;}
  .hero-visual .hero-card{height:auto!important;min-height:0!important;padding:12px 12px 14px!important;margin:0!important;}
  .hero-card .float-chip{width:max-content!important;max-width:calc(100vw - 28px)!important;padding:var(--c2d-float-chip-padding,7px)!important;font-size:var(--c2d-float-chip-size,11px)!important;line-height:1.15!important;gap:6px!important;box-sizing:border-box!important;}
  .hero-card .float-chip .chip-ic{width:24px!important;height:24px!important;}
  .chip-1{top:-9px!important;inset-inline-end:0!important;}
  .chip-2{bottom:-9px!important;inset-inline-start:0!important;}
  .hero-illustration{padding:16px 6px 4px!important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:var(--c2d-small-mobile-banner-height,510px)!important;min-height:var(--c2d-small-mobile-banner-height,510px)!important;}
  .c2d-banner-fixed-logo{top:2%!important;height:42%!important;}
  .c2d-banner-card-viewport{top:45%!important;bottom:8%!important;}
  .c2d-banner-slide-h1{font-size:clamp(22px,7.6vw,33px)!important;}
  .c2d-banner-slide-h2{font-size:clamp(12px,3.9vw,17px)!important;}
  .c2d-banner-slide-address{font-size:9.5px!important;}
  .c2d-banner-slide-url{font-size:13px!important;}
}
@media (max-width:360px){
  .c2d-phone-banner{height:var(--c2d-small-mobile-banner-height,510px)!important;min-height:var(--c2d-small-mobile-banner-height,510px)!important;}
  .c2d-banner-slide-h1{font-size:23px!important;}
  .c2d-banner-slide-h2{font-size:13px!important;}
  .c2d-banner-slide-address{font-size:9px!important;}
  .c2d-banner-slide-url{font-size:12.5px!important;}
}

@media (min-width:761px){
  .hero-content .badge{width:max-content!important;max-width:100%!important;align-self:flex-start!important;box-sizing:border-box!important;}
  .hero-actions{gap:var(--c2d-hero-action-gap,10px)!important;margin-bottom:14px!important;}
  .hero-stats{gap:var(--c2d-hero-stats-gap,16px)!important;}
  .hero-visual .hero-card{height:auto!important;min-height:0!important;padding:16px 16px 18px!important;margin:0!important;}
  .hero-card .float-chip{width:max-content!important;max-width:calc(100% - 12px)!important;padding:var(--c2d-float-chip-padding,7px)!important;font-size:var(--c2d-float-chip-size,11px)!important;}
}
html,body{max-width:100%!important;overflow-x:hidden!important;}
img,svg,video,canvas{max-width:100%;}
/* =========================================================
   C2D — LATEST USER REQUEST: AUTHORITATIVE FINAL FIXES
   Only targets the exact requested search/banner/spacing issues.
   ========================================================= */

/* SEARCH: the close control is always a real, visible button when the
   search bar is open.  Keep it outside the input's flex shrink path. */
.search-bar-inner{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  overflow:visible !important;
}
.search-bar-inner #searchClose{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  flex:0 0 42px !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  z-index:10000 !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--border) !important;
  border-radius:50% !important;
  background:var(--card) !important;
  color:var(--text) !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-indent:0 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  box-sizing:border-box !important;
}
/* C2D FIX: the button already renders its own "×" text node from the
   HTML (<button id="searchClose">×</button>), which every other rule in
   this file styles directly. This ::before was injecting a SECOND "×"
   on top of it, showing as a duplicate "××" glyph. Neutralized so only
   one close icon renders. */
.search-bar-inner #searchClose::before{
  content:"" !important;
  display:none !important;
}
.search-bar-inner #searchClose:hover,
.search-bar-inner #searchClose:focus-visible{
  color:var(--blue) !important;
  border-color:var(--blue) !important;
  outline:2px solid color-mix(in srgb,var(--blue) 35%,transparent) !important;
  outline-offset:2px !important;
}

/* LANGUAGE: never allow the language controls to behave like navigation. */
.lang-switch,
.lang-switch button{
  scroll-margin:0 !important;
}
.lang-switch button{
  appearance:none !important;
  -webkit-appearance:none !important;
  touch-action:manipulation !important;
}

/* HERO CONTENT: do not stretch the trusted-shop/content column to the
   height of the repair/delivery visual.  This removes the large blank area
   visible on laptops while retaining all existing content. */
.hero-grid{
  align-items:start !important;
}
.hero-content,
.hero-visual{
  align-self:start !important;
  min-height:0 !important;
}
.hero-content .badge{
  width:max-content !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  align-self:flex-start !important;
}
.hero-content p{
  max-width:100% !important;
  margin-bottom:12px !important;
}
.hero-actions{
  gap:clamp(6px,var(--c2d-hero-action-gap,8px),14px) !important;
  margin-bottom:10px !important;
}
.hero-stats{
  gap:clamp(8px,var(--c2d-hero-stats-gap,12px),18px) !important;
  margin-bottom:0 !important;
}
.hero-stats div{
  min-width:0 !important;
}
.hero-visual .hero-card{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:10px 12px 12px !important;
  box-sizing:border-box !important;
}

/* Same Day / Home Delivery: compact chips, same visual scale, no artificial
   card height. */
.hero-card .float-chip{
  width:max-content !important;
  max-width:calc(100% - 10px) !important;
  min-height:0 !important;
  height:auto !important;
  padding:6px 10px !important;
  gap:6px !important;
  font-size:11px !important;
  line-height:1.15 !important;
  box-sizing:border-box !important;
}
.hero-card .float-chip .chip-ic{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
}
.chip-1{top:-7px !important;}
.chip-2{bottom:-7px !important;}

/* MOBILE HERO: compact, content-driven spacing. */
@media (max-width:760px){
  .hero-grid{
    gap:10px !important;
  }
  .hero-content .badge{
    align-self:center !important;
    margin:0 auto 6px !important;
    padding:5px 9px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }
  .hero-content h1{margin-bottom:6px !important;}
  .hero-content p{
    margin-bottom:8px !important;
    font-size:13.5px !important;
    line-height:1.38 !important;
  }
  .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    gap:6px !important;
    margin:0 0 7px !important;
  }
  .hero-actions .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:9px 8px !important;
    font-size:11px !important;
    line-height:1.15 !important;
  }
  .hero-stats{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    margin:0 !important;
  }
  .hero-stats div{
    min-width:0 !important;
    text-align:center !important;
  }
  .hero-stats div h3{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.05 !important;
  }
  .hero-stats div span{
    display:block !important;
    font-size:10px !important;
    line-height:1.2 !important;
    overflow-wrap:anywhere !important;
  }
  .hero-visual{
    margin:0 !important;
    min-height:0 !important;
  }
  .hero-visual .hero-card{
    padding:8px 9px 10px !important;
  }
  .hero-illustration{padding:10px 4px 2px !important;}

  /* Compact the exact area between Trusted Shop, WhatsApp/Browse and 5000+. */
  .hero-content + .hero-visual{margin-top:0 !important;}
  .hero-actions + .hero-stats{margin-top:0 !important;}
}

/* =========================================================
   MOBILE BANNER — two real responsive zones:
   logo top / COMPLETE text bottom / dots reserved at very bottom.
   No fixed-height clipping of the text.
   ========================================================= */
@media (max-width:760px){
  .c2d-phone-banner{
    height:clamp(540px,var(--c2d-mobile-banner-height,560px),610px) !important;
    min-height:clamp(540px,var(--c2d-mobile-banner-height,560px),610px) !important;
    max-height:none !important;
    overflow:hidden !important;
    margin-top:4px !important;
    margin-bottom:8px !important;
  }
  .c2d-phone-banner-stage{
    position:relative !important;
    display:block !important;
    height:100% !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    left:3% !important;
    right:3% !important;
    top:2% !important;
    bottom:auto !important;
    width:94% !important;
    height:44% !important;
    max-width:none !important;
    max-height:none !important;
    padding:7px !important;
    border-radius:28px !important;
    overflow:hidden !important;
    z-index:10 !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    border-radius:24px !important;
  }
  .c2d-banner-card-viewport{
    left:3% !important;
    right:3% !important;
    top:47% !important;
    bottom:48px !important;
    width:94% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    z-index:15 !important;
    pointer-events:none !important;
  }
  .c2d-banner-card-track{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .c2d-banner-slide,
  .c2d-banner-slide.is-current,
  .c2d-banner-slide.is-hidden,
  .c2d-banner-slide.is-in-left,
  .c2d-banner-slide.is-in-right,
  .c2d-banner-slide.is-out-left,
  .c2d-banner-slide.is-out-right{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    padding:8px 10px 10px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }
  .c2d-banner-slide-copy{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    text-align:center !important;
  }
  .c2d-banner-slide-kicker{
    display:block !important;
    width:100% !important;
    font-size:clamp(11px,3.2vw,15px) !important;
    line-height:1.15 !important;
    margin:0 0 5px !important;
  }
  .c2d-banner-slide-h1{
    display:block !important;
    width:100% !important;
    font-size:clamp(25px,8vw,40px) !important;
    line-height:1.08 !important;
    margin:0 0 6px !important;
    white-space:normal !important;
  }
  .c2d-banner-slide-h2{
    display:block !important;
    width:100% !important;
    font-size:clamp(14px,4.2vw,20px) !important;
    line-height:1.22 !important;
    margin:0 !important;
    white-space:normal !important;
  }
  .c2d-banner-slide-accent{
    display:block !important;
    width:min(76%,290px) !important;
    height:4px !important;
    margin:8px auto !important;
    flex:none !important;
  }
  .c2d-banner-slide-address{
    display:block !important;
    width:100% !important;
    font-size:clamp(9.5px,2.7vw,13px) !important;
    line-height:1.35 !important;
    margin:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  .c2d-banner-slide-url{
    display:block !important;
    width:100% !important;
    font-size:clamp(14px,4vw,20px) !important;
    line-height:1.2 !important;
    margin:5px 0 0 !important;
    order:99 !important;
  }
  .c2d-phone-banner-dots{
    left:50% !important;
    bottom:12px !important;
    z-index:30 !important;
  }
}

@media (max-width:420px){
  .c2d-phone-banner{
    height:clamp(520px,var(--c2d-mobile-banner-height,540px),560px) !important;
    min-height:clamp(520px,var(--c2d-mobile-banner-height,540px),560px) !important;
  }
  .c2d-banner-fixed-logo{height:43% !important;}
  .c2d-banner-card-viewport{top:46% !important;bottom:48px !important;}
  .c2d-banner-slide-h1{font-size:clamp(24px,7.7vw,35px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(13px,4vw,18px) !important;}
  .c2d-banner-slide-address{font-size:10px !important;}
  .c2d-banner-slide-url{font-size:14px !important;}
}
@media (max-width:360px){
  .c2d-phone-banner{height:clamp(510px,var(--c2d-small-mobile-banner-height,530px),550px) !important;min-height:clamp(510px,var(--c2d-small-mobile-banner-height,530px),550px) !important;}
  .c2d-banner-slide-h1{font-size:23px !important;}
  .c2d-banner-slide-h2{font-size:13px !important;}
  .c2d-banner-slide-address{font-size:9.5px !important;}
  .c2d-banner-slide-url{font-size:13px !important;}
}

/* Laptop/desktop: Trusted Shop box fits its text; the visual no longer
   stretches to create a huge empty rectangle. */
@media (min-width:761px){
  .hero-grid{align-items:start !important;gap:24px !important;}
  .hero-content .badge{
    width:max-content !important;
    max-width:100% !important;
    padding:7px 12px !important;
    margin:0 0 8px !important;
  }
  .hero-visual .hero-card{
    width:max-content !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:8px 10px 10px !important;
  }
  .hero-card .float-chip{font-size:10.5px !important;padding:6px 9px !important;}
}

/* No accidental page-wide overflow. */
html,body{max-width:100% !important;overflow-x:hidden !important;}
.hero,.hero-grid,.hero-content,.hero-visual,.hero-card,.hero-actions,.hero-stats{min-width:0 !important;}

/* =========================================================
   V34.2 TARGETED FIXES (mobile text + compact hero)
   Logo unchanged · data untouched · only requested areas
   ========================================================= */

/* ---- 1) MOBILE BANNER TEXT MUST SHOW ---- */
@media (max-width: 1024px){
  .c2d-phone-banner,
  .banner-wrap.c2d-phone-banner{
    height: 560px !important;
    min-height: 560px !important;
    max-height: none !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
  }
  .c2d-phone-banner-stage{
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  /* Logo top zone — do not change logo asset */
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position: absolute !important;
    left: 3% !important;
    right: 3% !important;
    top: 2% !important;
    bottom: auto !important;
    width: 94% !important;
    height: 42% !important;
    z-index: 8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Text zone — explicit box so absolute slides have room */
  .c2d-banner-card-viewport{
    position: absolute !important;
    left: 3% !important;
    right: 3% !important;
    top: 46% !important;
    bottom: 36px !important;
    width: 94% !important;
    height: auto !important; /* top+bottom define box */
    min-height: 180px !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }
  .c2d-banner-card-track{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 180px !important;
    overflow: visible !important;
  }
  .c2d-banner-slide,
  .c2d-banner-card{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .c2d-banner-slide.is-current,
  .c2d-banner-card.is-current{
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 6 !important;
    pointer-events: auto !important;
    display: flex !important;
  }
  .c2d-banner-slide.is-hidden{
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
  }
  .c2d-banner-slide-copy,
  .c2d-banner-card-content{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .c2d-banner-slide-kicker,
  .c2d-banner-slide-h1,
  .c2d-banner-slide-h2,
  .c2d-banner-slide-address,
  .c2d-banner-slide-url,
  .c2d-banner-card-h1,
  .c2d-banner-card-h2,
  .c2d-banner-card-address,
  .c2d-banner-card-url{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
  }
  .c2d-banner-slide-h1{ font-size: clamp(22px, 7.2vw, 34px) !important; line-height: 1.1 !important; margin: 0 0 4px !important; }
  .c2d-banner-slide-h2{ font-size: clamp(12px, 3.6vw, 16px) !important; line-height: 1.25 !important; margin: 0 !important; }
  .c2d-banner-slide-address{ font-size: clamp(10px, 2.8vw, 12px) !important; line-height: 1.35 !important; margin: 2px 0 !important; }
  .c2d-banner-slide-url{ font-size: clamp(12px, 3.4vw, 15px) !important; margin-top: 2px !important; }
  .c2d-banner-slide-accent{ display: block !important; margin: 6px auto !important; width: min(70%, 220px) !important; height: 3px !important; }
  .c2d-phone-banner-dots{ bottom: 8px !important; left: 50% !important; z-index: 30 !important; }
}

@media (max-width: 420px){
  .c2d-phone-banner,
  .banner-wrap.c2d-phone-banner{
    height: 520px !important;
    min-height: 520px !important;
  }
  .c2d-banner-fixed-logo{ height: 40% !important; }
  .c2d-banner-card-viewport{ top: 44% !important; bottom: 34px !important; min-height: 170px !important; }
  .c2d-banner-slide-h1{ font-size: clamp(20px, 7vw, 28px) !important; }
  .c2d-banner-slide-h2{ font-size: clamp(11px, 3.4vw, 14px) !important; }
  .c2d-banner-slide-address{ font-size: 10px !important; }
}

/* ---- 2) COMPACT HERO: WhatsApp / Browse / 5000+ gap ---- */
.hero-content p{
  margin-bottom: 14px !important;
  max-width: 100% !important;
}
.hero-actions{
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  gap: 10px !important;
}
.hero-stats{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: 16px !important;
}
.hero-grid{
  gap: 22px !important;
  align-items: start !important;
}

/* Laptop / desktop: Trusted box fits content */
@media (min-width: 1025px){
  .hero-content{
    width: auto !important;
    max-width: 560px !important;
  }
  .hero-content h1{
    margin-bottom: 12px !important;
  }
  .hero-content p{
    margin-bottom: 14px !important;
    max-width: 520px !important;
  }
  .hero-actions{
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
  }
  .hero-stats{
    gap: 20px !important;
  }
  .hero-visual{
    width: auto !important;
    max-width: 420px !important;
    justify-self: end !important;
  }
  .hero-visual .hero-card,
  .hero-card{
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 14px 12px !important;
    margin: 0 !important;
  }
  .hero-illustration{
    padding: 8px 4px 4px !important;
    max-height: 160px !important;
  }
  .hero-illustration svg{
    width: 100% !important;
    max-height: 150px !important;
  }
  .float-chip{
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
}

/* Tablet + mobile hero compact */
@media (max-width: 1024px){
  .hero{
    padding: 10px 0 14px !important;
  }
  .hero-grid{
    gap: 12px !important;
  }
  .hero-content h1{
    margin-bottom: 8px !important;
  }
  .hero-content p{
    margin-bottom: 10px !important;
    font-size: 14px !important;
  }
  .hero-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }
  .hero-actions .btn{
    justify-content: center !important;
  }
  .hero-stats{
    gap: 12px !important;
    margin: 0 !important;
  }
  .hero-stats div h3{
    font-size: 20px !important;
  }
  .hero-visual .hero-card,
  .hero-card{
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    margin: 0 !important;
  }
  .hero-illustration{
    padding: 6px 2px 2px !important;
    max-height: 140px !important;
  }
  .float-chip{
    font-size: 11px !important;
    padding: 6px 9px !important;
  }
  /* remove leftover empty space under trusted section */
  .hero > .container{
    padding-bottom: 0 !important;
  }
  #home + section,
  .hero + section{
    margin-top: 0 !important;
    padding-top: 12px !important;
  }
}

@media (max-width: 480px){
  .hero{ padding: 8px 0 10px !important; }
  .hero-stats{ gap: 10px !important; }
  .hero-stats div h3{ font-size: 18px !important; }
  .hero-stats div span{ font-size: 11px !important; }
}

/* =========================================================
   V34.2 VIDEO ALIGNMENT FIX — Laptop + Mobile, EN + UR
   Based on cursor-pointed issues in both recordings
   Logo asset unchanged · data untouched
   ========================================================= */

/* ---------- LAPTOP / DESKTOP: remove center empty gap ---------- */
@media (min-width: 1025px){
  .hero{
    padding: 10px 0 16px !important;
  }
  .hero-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
    gap: 28px !important;
    align-items: center !important;
    margin-top: 8px !important;
  }
  body.lang-ur .hero-grid{
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  }
  .hero-content{
    max-width: 560px !important;
    width: 100% !important;
  }
  .hero-content .badge{
    margin-bottom: 8px !important;
  }
  .hero-content h1{
    margin-bottom: 10px !important;
    line-height: 1.15 !important;
  }
  .hero-content p{
    margin-bottom: 12px !important;
    max-width: 520px !important;
    line-height: 1.45 !important;
  }
  .hero-actions{
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    gap: 10px !important;
  }
  .hero-stats{
    gap: 18px !important;
    margin: 0 !important;
  }
  .hero-visual{
    max-width: 360px !important;
    width: 100% !important;
    margin: 0 !important;
    justify-self: end !important;
  }
  body.lang-ur .hero-visual{
    justify-self: start !important;
  }
  .hero-visual .hero-card,
  .hero-card{
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 14px 14px !important;
    margin: 0 auto !important;
  }
  .hero-illustration{
    padding: 10px 6px 4px !important;
  }
  .hero-illustration svg{
    max-height: 140px !important;
    width: 100% !important;
  }
  .hero-card > p{
    font-size: 13px !important;
    margin-bottom: 6px !important;
    padding: 0 4px !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .float-chip{
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }
  .chip-1{ top: -12px !important; inset-inline-end: -8px !important; }
  .chip-2{ bottom: -12px !important; inset-inline-start: -8px !important; }

  /* Banner tighter to hero */
  .c2d-phone-banner,
  .banner-wrap.c2d-phone-banner{
    margin-bottom: 10px !important;
  }
}

/* ---------- TABLET ---------- */
@media (max-width: 1024px) and (min-width: 641px){
  .hero{ padding: 8px 0 12px !important; }
  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .hero-visual .hero-card,
  .hero-card{
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 14px !important;
  }
  .hero-card > p{
    font-size: 13px !important;
    overflow: visible !important;
  }
}

/* ---------- MOBILE BANNER: remove empty middle gap ---------- */
@media (max-width: 1024px){
  .c2d-phone-banner,
  .banner-wrap.c2d-phone-banner{
    height: 480px !important;
    min-height: 480px !important;
    max-height: 480px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
  }
  .c2d-phone-banner-stage{
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Logo top — compact, no wasted space below it */
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position: absolute !important;
    left: 4% !important;
    right: 4% !important;
    top: 2% !important;
    bottom: auto !important;
    width: 92% !important;
    height: 38% !important;
    max-height: 38% !important;
    padding: 6px !important;
    z-index: 8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Text zone starts immediately under logo — no big empty gap */
  .c2d-banner-card-viewport{
    position: absolute !important;
    left: 3% !important;
    right: 3% !important;
    top: 40% !important;
    bottom: 28px !important;
    width: 94% !important;
    height: auto !important;
    min-height: 200px !important;
    overflow: visible !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }
  .c2d-banner-card-track{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
    overflow: visible !important;
  }
  .c2d-banner-slide,
  .c2d-banner-slide.is-current,
  .c2d-banner-slide.is-hidden,
  .c2d-banner-card{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 180px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .c2d-banner-slide.is-current{
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 6 !important;
  }
  .c2d-banner-slide.is-hidden{
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
  }

  /* Kill any stray middle dot / empty pseudo visual */
  .c2d-banner-card-viewport::before,
  .c2d-banner-card-viewport::after,
  .c2d-banner-card-track::before,
  .c2d-banner-card-track::after{
    display: none !important;
    content: none !important;
  }

  .c2d-banner-slide-copy,
  .c2d-banner-card-content,
  body.lang-ur .c2d-banner-slide-copy{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 4px !important;
  }
  body.lang-ur .c2d-banner-slide-copy{ direction: rtl !important; }

  .c2d-banner-slide-kicker,
  .c2d-banner-slide-h1,
  .c2d-banner-slide-h2,
  .c2d-banner-slide-address,
  .c2d-banner-slide-url,
  body.lang-ur .c2d-banner-slide-h1,
  body.lang-ur .c2d-banner-slide-h2,
  body.lang-ur .c2d-banner-slide-address,
  body.lang-ur .c2d-banner-slide-url{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .c2d-banner-slide-h1{
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.08 !important;
    margin: 0 0 3px !important;
  }
  .c2d-banner-slide-h2{
    font-size: clamp(12px, 3.5vw, 15px) !important;
    line-height: 1.22 !important;
    margin: 0 !important;
  }
  .c2d-banner-slide-address{
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.3 !important;
    margin: 2px 0 !important;
  }
  .c2d-banner-slide-url{
    font-size: clamp(12px, 3.3vw, 15px) !important;
    margin-top: 2px !important;
  }
  .c2d-banner-slide-accent{
    display: block !important;
    width: min(68%, 200px) !important;
    height: 3px !important;
    margin: 5px auto !important;
  }
  .c2d-phone-banner-dots{
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
  }

  /* ---------- MOBILE HERO: compact + no clipped text ---------- */
  .hero{
    padding: 6px 0 10px !important;
  }
  .hero-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .hero-content .badge{ margin-bottom: 6px !important; }
  .hero-content h1{ margin-bottom: 6px !important; }
  .hero-content p{
    margin-bottom: 10px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
  .hero-actions{
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }
  .hero-actions .btn{ justify-content: center !important; width: 100% !important; }
  .hero-stats{
    gap: 12px !important;
    margin: 0 !important;
    justify-content: space-between !important;
  }
  .hero-stats div h3{ font-size: 18px !important; }
  .hero-stats div span{ font-size: 11px !important; }

  .hero-visual{
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
  }
  .hero-visual .hero-card,
  .hero-card{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 14px 16px !important;
    margin: 12px 0 8px !important;
    overflow: visible !important;
  }
  .hero-illustration{
    padding: 8px 4px 2px !important;
  }
  .hero-illustration svg{
    max-height: 130px !important;
    width: 100% !important;
  }
  /* Fix clipped "Certified technicians..." text */
  .hero-card > p{
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin: 4px 0 0 !important;
    padding: 0 6px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    max-height: none !important;
    color: var(--text-dim) !important;
  }
  .float-chip{
    font-size: 11px !important;
    padding: 6px 9px !important;
    max-width: calc(100% - 16px) !important;
    white-space: nowrap !important;
  }
  .chip-1{ top: -10px !important; inset-inline-end: 4px !important; }
  .chip-2{ bottom: -10px !important; inset-inline-start: 4px !important; }

  #home + section,
  .hero + section{
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
}

@media (max-width: 420px){
  .c2d-phone-banner,
  .banner-wrap.c2d-phone-banner{
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;
  }
  .c2d-banner-fixed-logo{ height: 36% !important; }
  .c2d-banner-card-viewport{ top: 38% !important; bottom: 26px !important; min-height: 190px !important; }
  .c2d-banner-slide-h1{ font-size: clamp(20px, 6.8vw, 28px) !important; }
  .c2d-banner-slide-h2{ font-size: clamp(11px, 3.3vw, 14px) !important; }
  .hero-card > p{ font-size: 12px !important; }
}

/* =========================================================
   USER REQUEST — HERO TWO-HALF ALIGNMENT
   Existing content/assets preserved. This override only
   controls the requested hero composition and spacing.
   ========================================================= */

/* Desktop/laptop: Trusted Computer Shop on RIGHT half,
   Same Day/Home Delivery visual on LEFT half, both sharing
   the same row height without artificial fixed heights. */
@media (min-width: 1025px){
  .hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:24px !important;
    row-gap:0 !important;
    align-items:stretch !important;
  }

  .hero-content{
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    align-self:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .hero-visual{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    justify-self:stretch !important;
    align-self:stretch !important;
    display:flex !important;
    align-items:stretch !important;
  }

  .hero-visual .hero-card{
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    min-height:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  /* Keep the Trusted Shop badge only as wide as its content. */
  .hero-content .badge{
    width:max-content !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Keep the requested content compact, but let long text wrap naturally. */
  .hero-content h1{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }
  .hero-content p{
    max-width:100% !important;
    margin-bottom:14px !important;
    overflow-wrap:anywhere !important;
  }
  .hero-actions{
    margin-bottom:12px !important;
  }
  .hero-stats{
    margin-bottom:0 !important;
  }

  /* Same Day/Home Delivery chips remain inside their own half. */
  .hero-card .float-chip{
    max-width:calc(100% - 20px) !important;
    box-sizing:border-box !important;
  }
}

/* The same left/right composition applies to Urdu.
   The text itself remains RTL, but its visual half stays on the RIGHT. */
@media (min-width: 1025px){
  body.lang-ur .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
  body.lang-ur .hero-content{
    grid-column:2 !important;
    grid-row:1 !important;
    direction:rtl !important;
    text-align:right !important;
  }
  body.lang-ur .hero-visual{
    grid-column:1 !important;
    grid-row:1 !important;
  }
}

/* Tablet/mobile: no squeezed two-column layout; content comes first,
   visual second, with content-driven height and no artificial whitespace. */
@media (max-width: 1024px){
  .hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
  }

  .hero-content,
  body.lang-ur .hero-content{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    text-align:center !important;
    direction:inherit !important;
  }

  .hero-visual,
  body.lang-ur .hero-visual{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    justify-self:stretch !important;
  }

  .hero-visual .hero-card{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  .hero-content p{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  .hero-actions{
    justify-content:center !important;
  }

  .hero-stats{
    justify-content:center !important;
  }
}

/* Very narrow screens: preserve readable wrapping rather than clipping. */
@media (max-width:480px){
  .hero-grid{gap:10px !important;}
  .hero-content .badge{
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .hero-content p{
    line-height:1.45 !important;
  }
  .hero-stats{
    width:100% !important;
  }
  .hero-stats div{
    min-width:0 !important;
  }
}

/* =========================================================
   FINAL USER REQUEST — HERO SIDE ORDER + EQUAL HEIGHT
   English: Same Day/Home Delivery LEFT, Trusted Shop RIGHT
   Urdu:    Trusted Shop RIGHT, Same Day/Home Delivery LEFT
   Existing markup/data/assets preserved.
   ========================================================= */
@media (min-width: 1025px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:clamp(14px,2vw,24px) !important;
    align-items:stretch !important;
  }

  /* English: visual/card on LEFT, trusted content on RIGHT. */
  body:not(.lang-ur) .hero-visual{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:100% !important;
  }
  body:not(.lang-ur) .hero-content{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:100% !important;
  }

  /* Urdu: visual/card on LEFT, trusted content on RIGHT as requested. */
  body.lang-ur .hero-visual{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:100% !important;
  }
  body.lang-ur .hero-content{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    width:100% !important;
    direction:rtl !important;
    text-align:right !important;
  }

  /* Both halves must occupy exactly the same row height. */
  .hero-content,
  .hero-visual{
    align-self:stretch !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }

  .hero-content{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  .hero-visual{
    display:flex !important;
    align-items:stretch !important;
  }

  .hero-visual .hero-card{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  /* Make the Home Delivery/Same Day visual substantially fill its card
     without adding blank space or distorting the SVG. */
  .hero-illustration{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 8px 4px !important;
  }
  .hero-illustration svg{
    width:min(100%, 520px) !important;
    max-width:100% !important;
    max-height:100% !important;
    height:auto !important;
    object-fit:contain !important;
    display:block !important;
  }

  .hero-card > p{
    flex:0 0 auto !important;
    margin:4px 0 8px !important;
  }

  .hero-card .float-chip{
    z-index:3 !important;
    max-width:calc(100% - 24px) !important;
  }
}

/* Tablet/mobile: keep both areas fully responsive and never overlap. */
@media (max-width:900px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  .hero-content,
  body.lang-ur .hero-content{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }

  .hero-visual,
  body.lang-ur .hero-visual{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }

  .hero-visual .hero-card{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .hero-illustration{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 6px 2px !important;
    min-height:0 !important;
  }
  .hero-illustration svg{
    width:min(100%, 440px) !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .hero-content p,
  .hero-content h1,
  .hero-content .badge{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:480px){
  .hero-grid{gap:8px !important;}
  .hero-card{padding-left:10px !important;padding-right:10px !important;}
  .hero-illustration{padding:5px 2px 0 !important;}
  .hero-illustration svg{width:min(100%, 340px) !important;}
}

/* =========================================================
   C2D FINAL REQUESTED-SIDEORDER + MOBILE/LAPTOP STABILITY PASS
   Only the explicitly requested hero/banner fixes are overridden here.
   Existing assets/data remain untouched.
   ========================================================= */

/* Desktop/tablet side order: EN trusted LEFT / repair RIGHT; UR repair LEFT / trusted RIGHT. */
@media (min-width:901px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:clamp(14px,2vw,24px) !important;
  }
  body:not(.lang-ur) .hero-content{grid-column:1 !important;grid-row:1 !important;}
  body:not(.lang-ur) .hero-visual{grid-column:2 !important;grid-row:1 !important;}
  body.lang-ur .hero-visual{grid-column:1 !important;grid-row:1 !important;}
  body.lang-ur .hero-content{grid-column:2 !important;grid-row:1 !important;direction:rtl !important;text-align:right !important;}

  .hero-content,.hero-visual{align-self:stretch !important;min-height:0 !important;height:auto !important;box-sizing:border-box !important;}
  .hero-content{display:flex !important;flex-direction:column !important;justify-content:center !important;}
  .hero-visual{display:flex !important;align-items:stretch !important;}
  .hero-visual .hero-card{width:100% !important;height:100% !important;min-height:0 !important;box-sizing:border-box !important;display:flex !important;flex-direction:column !important;justify-content:center !important;}
  .hero-illustration{flex:1 1 auto !important;min-height:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;}
  .hero-illustration svg{width:min(100%,560px) !important;max-width:100% !important;max-height:100% !important;height:auto !important;display:block !important;}
  .hero-card .float-chip{z-index:4 !important;max-width:calc(100% - 24px) !important;}

  /* Never allow laptop slides to disappear/blank after a transition. */
  .c2d-phone-banner .c2d-banner-slide.is-current{opacity:1 !important;visibility:visible !important;display:flex !important;z-index:10 !important;}
  .c2d-phone-banner .c2d-banner-slide.is-hidden:not(.is-current){opacity:0 !important;visibility:hidden !important;z-index:1 !important;}
  .c2d-phone-banner .c2d-banner-slide-copy{opacity:1 !important;visibility:visible !important;}
}

/* Banner content must stay in its own half. Slider images cannot move or resize the fixed logo. */
.c2d-phone-banner .c2d-banner-card-viewport,
.c2d-phone-banner .c2d-banner-card-track{min-width:0 !important;box-sizing:border-box !important;}
.c2d-phone-banner .c2d-banner-fixed-logo{box-sizing:border-box !important;overflow:hidden !important;}
.c2d-phone-banner .c2d-banner-fixed-logo img{object-fit:contain !important;max-width:100% !important;max-height:100% !important;}
.c2d-phone-banner .c2d-banner-slide-replacement-image,
.c2d-phone-banner .c2d-banner-slide-replacement-image img{max-width:100% !important;max-height:100% !important;box-sizing:border-box !important;}

/* Mobile: C2D logo is always above the slider text. */
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:10px !important;}
  .hero-content,.hero-visual{grid-column:1 !important;width:100% !important;min-width:0 !important;height:auto !important;min-height:0 !important;}
  .hero-content{grid-row:1 !important;}
  .hero-visual{grid-row:2 !important;}

  .c2d-phone-banner{height:clamp(520px,145vw,620px) !important;min-height:clamp(520px,145vw,620px) !important;max-height:none !important;overflow:hidden !important;}
  .c2d-phone-banner-stage{position:relative !important;width:100% !important;height:100% !important;overflow:hidden !important;}
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    left:4% !important;right:4% !important;top:2% !important;bottom:auto !important;width:92% !important;height:41% !important;max-width:none !important;max-height:none !important;padding:7px !important;z-index:12 !important;
  }
  .c2d-banner-card-viewport{
    left:4% !important;right:4% !important;top:45% !important;bottom:40px !important;width:92% !important;height:auto !important;min-height:230px !important;max-height:none !important;overflow:hidden !important;z-index:15 !important;
  }
  .c2d-banner-card-track{inset:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;}
  .c2d-banner-slide,
  .c2d-banner-slide.is-current,
  .c2d-banner-slide.is-hidden{
    inset:0 !important;width:100% !important;height:100% !important;min-height:0 !important;padding:10px 10px 16px !important;box-sizing:border-box !important;display:flex !important;align-items:center !important;justify-content:center !important;overflow:visible !important;
  }
  .c2d-banner-slide.is-current{opacity:1 !important;visibility:visible !important;display:flex !important;z-index:10 !important;}
  .c2d-banner-slide-copy{width:100% !important;max-width:100% !important;min-width:0 !important;height:auto !important;max-height:none !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;gap:4px !important;overflow:visible !important;opacity:1 !important;visibility:visible !important;}
  body.lang-ur .c2d-banner-slide-copy{direction:rtl !important;text-align:center !important;align-items:center !important;}
  .c2d-banner-slide-h1,.c2d-banner-slide-h2,.c2d-banner-slide-address,.c2d-banner-slide-url{width:100% !important;max-width:100% !important;text-align:center !important;overflow-wrap:anywhere !important;white-space:normal !important;opacity:1 !important;visibility:visible !important;}

  /* Requested English mobile fix: remove ONLY the duplicate kicker. */
  body:not(.lang-ur) .c2d-banner-slide-kicker{display:none !important;}

  .c2d-banner-slide-h1{font-size:clamp(23px,7.4vw,36px) !important;line-height:1.08 !important;margin:0 0 3px !important;}
  .c2d-banner-slide-h2{font-size:clamp(12px,3.7vw,18px) !important;line-height:1.24 !important;margin:0 !important;}
  .c2d-banner-slide-accent{display:block !important;width:min(76%,280px) !important;height:4px !important;margin:7px auto !important;flex:none !important;}
  .c2d-banner-slide-address{font-size:clamp(9.5px,2.7vw,12.5px) !important;line-height:1.34 !important;margin:0 !important;}
  .c2d-banner-slide-url{font-size:clamp(13px,3.7vw,18px) !important;line-height:1.2 !important;margin:3px 0 0 !important;order:99 !important;}
  .c2d-phone-banner-dots{left:50% !important;bottom:7px !important;z-index:30 !important;}

  /* Mobile trusted-shop buttons: restore comfortable tap height without redesign. */
  .hero-actions{display:flex !important;flex-wrap:wrap !important;align-items:stretch !important;justify-content:center !important;gap:9px !important;}
  .hero-actions .btn{min-height:46px !important;height:auto !important;padding:11px 15px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1.2 !important;box-sizing:border-box !important;max-width:100% !important;}
  .hero-actions .btn span{line-height:1.2 !important;}

  /* Same Day text/icon: no collision on narrow screens. */
  .hero-card .float-chip{max-width:calc(100% - 20px) !important;}
  .hero-illustration{min-height:0 !important;padding:7px 4px 2px !important;display:flex !important;align-items:center !important;justify-content:center !important;}
  .hero-illustration svg{width:min(100%,420px) !important;max-width:100% !important;height:auto !important;display:block !important;}
  .hero-card > p{margin:6px auto 8px !important;max-width:95% !important;line-height:1.35 !important;text-align:center !important;overflow-wrap:anywhere !important;}
  body.lang-ur .hero-content{text-align:center !important;direction:rtl !important;}
  body.lang-ur .hero-content h1,
  body.lang-ur .hero-content p,
  body.lang-ur .hero-content .badge{text-align:center !important;overflow-wrap:anywhere !important;}
}

@media (max-width:420px){
  .c2d-phone-banner{height:clamp(520px,160vw,600px) !important;min-height:clamp(520px,160vw,600px) !important;}
  .c2d-banner-fixed-logo{height:40% !important;}
  .c2d-banner-card-viewport{top:44% !important;bottom:38px !important;min-height:235px !important;}
  .c2d-banner-slide-h1{font-size:clamp(21px,7vw,30px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(11px,3.5vw,15px) !important;}
  .c2d-banner-slide-address{font-size:10px !important;}
  .c2d-banner-slide-url{font-size:14px !important;}
  .hero-actions .btn{min-height:48px !important;padding:11px 13px !important;}
}

@media (max-width:360px){
  .c2d-phone-banner{height:560px !important;min-height:560px !important;}
  .c2d-banner-fixed-logo{height:39% !important;}
  .c2d-banner-card-viewport{top:43% !important;bottom:36px !important;min-height:245px !important;}
  .c2d-banner-slide-h1{font-size:23px !important;}
  .c2d-banner-slide-h2{font-size:13px !important;}
  .c2d-banner-slide-address{font-size:9.5px !important;}
  .c2d-banner-slide-url{font-size:13px !important;}
}

/* Urdu hero content must breathe between heading, paragraph, buttons and stats. */
body.lang-ur .hero-content .badge{margin-bottom:10px !important;}
body.lang-ur .hero-content h1{line-height:1.2 !important;margin-bottom:10px !important;}
body.lang-ur .hero-content p{line-height:1.65 !important;margin-bottom:13px !important;}
body.lang-ur .hero-actions{gap:9px !important;}
body.lang-ur .hero-stats{row-gap:10px !important;}

/* Prevent section-wide accidental overflow while preserving all content. */
html,body{max-width:100% !important;overflow-x:hidden !important;}
.hero-grid,.hero-content,.hero-visual,.hero-card,.hero-actions,.hero-stats{min-width:0 !important;}

/* =========================================================
   C2D REQUESTED FINAL FIX PASS — ONLY PROMPTED BANNER/HERO ISSUES
   ========================================================= */

/* Keep the search close control visible and reachable at every breakpoint. */
.search-bar-inner #searchClose{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:0 0 42px !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  z-index:9999 !important;
  pointer-events:auto !important;
  border-radius:50% !important;
  line-height:1 !important;
  font-size:22px !important;
}

/* Desktop/tablet: exact requested two-half order. */
@media (min-width:901px){
  .hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:18px !important;
    align-items:stretch !important;
  }
  body:not(.lang-ur) .hero-content{grid-column:1 !important;grid-row:1 !important;}
  body:not(.lang-ur) .hero-visual{grid-column:2 !important;grid-row:1 !important;}
  body.lang-ur .hero-visual{grid-column:1 !important;grid-row:1 !important;}
  body.lang-ur .hero-content{grid-column:2 !important;grid-row:1 !important;direction:rtl !important;text-align:right !important;}

  .hero-content,.hero-visual{min-width:0 !important;align-self:stretch !important;}
  .hero-content{display:flex !important;flex-direction:column !important;justify-content:center !important;}
  .hero-visual{display:flex !important;align-items:stretch !important;}
  .hero-visual .hero-card{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    box-sizing:border-box !important;
  }
  .hero-illustration{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px !important;
  }
  .hero-illustration svg{
    width:min(100%,520px) !important;
    max-width:100% !important;
    max-height:190px !important;
    height:auto !important;
  }
  .hero-card > p{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:6px auto 8px !important;
    text-align:center !important;
    line-height:1.35 !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
  }
  .hero-card .float-chip{z-index:5 !important;max-width:calc(100% - 20px) !important;}
}

/* Banner: independent 50/50 containers. Slider image/content cannot affect logo. */
.c2d-phone-banner{
  width:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.c2d-phone-banner-stage{position:relative !important;width:100% !important;height:100% !important;overflow:hidden !important;}
@media (min-width:761px){
  .c2d-phone-banner{height:440px !important;min-height:440px !important;max-height:440px !important;margin-bottom:10px !important;}
  .c2d-banner-card-viewport{
    left:0 !important;right:50% !important;top:0 !important;bottom:0 !important;
    width:50% !important;height:100% !important;overflow:hidden !important;z-index:4 !important;
  }
  .c2d-banner-card-track{inset:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;}
  .c2d-banner-slide{
    inset:0 !important;width:100% !important;height:100% !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    padding:24px 7% 42px !important;overflow:hidden !important;
    transition:opacity var(--c2d-banner-duration,820ms) ease !important;
    transform:none !important;
  }
  .c2d-banner-slide.is-current{opacity:1 !important;visibility:visible !important;display:flex !important;}
  .c2d-banner-slide.is-hidden:not(.is-current){opacity:0 !important;visibility:hidden !important;display:flex !important;}
  .c2d-banner-slide.is-in-left,.c2d-banner-slide.is-in-right,.c2d-banner-slide.is-out-left,.c2d-banner-slide.is-out-right{transform:none !important;}
  .c2d-banner-slide-copy{
    width:100% !important;max-width:100% !important;min-width:0 !important;
    display:flex !important;flex-direction:column !important;align-items:center !important;
    justify-content:center !important;text-align:center !important;overflow:visible !important;
  }
  body.lang-ur .c2d-banner-slide-copy{direction:rtl !important;text-align:center !important;}
  .c2d-banner-slide-kicker{font-size:12px !important;margin-bottom:5px !important;}
  .c2d-banner-slide-h1{font-size:clamp(30px,4vw,58px) !important;line-height:1.06 !important;margin:0 0 8px !important;}
  .c2d-banner-slide-h2{font-size:clamp(17px,1.9vw,27px) !important;line-height:1.22 !important;}
  .c2d-banner-slide-address{font-size:clamp(10px,1vw,14px) !important;line-height:1.4 !important;}
  .c2d-banner-slide-url{font-size:clamp(14px,1.3vw,20px) !important;line-height:1.2 !important;}
  .c2d-banner-fixed-logo{
    left:auto !important;right:0 !important;top:0 !important;bottom:0 !important;
    width:50% !important;height:100% !important;transform:none !important;
    padding:10px !important;z-index:12 !important;overflow:hidden !important;
  }
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:100% !important;height:100% !important;object-fit:contain !important;}
}

/* Mobile: logo is always ABOVE text, in its own layout row. */
@media (max-width:900px){
  .c2d-phone-banner{
    height:clamp(450px,128vw,540px) !important;
    min-height:clamp(450px,128vw,540px) !important;
    max-height:none !important;
    margin-bottom:8px !important;
    overflow:hidden !important;
  }
  .c2d-phone-banner-stage{display:block !important;height:100% !important;overflow:hidden !important;}
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    left:4% !important;right:4% !important;top:2% !important;bottom:auto !important;
    width:92% !important;height:40% !important;max-width:none !important;max-height:none !important;
    transform:none !important;padding:6px !important;z-index:12 !important;overflow:hidden !important;
  }
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:100% !important;height:100% !important;object-fit:contain !important;}
  .c2d-banner-card-viewport{
    position:absolute !important;left:4% !important;right:4% !important;top:43% !important;bottom:9% !important;
    width:92% !important;height:auto !important;min-height:0 !important;overflow:hidden !important;z-index:15 !important;
  }
  .c2d-banner-card-track{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;}
  .c2d-banner-slide{
    inset:0 !important;width:100% !important;height:100% !important;min-height:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    padding:8px 8px 12px !important;overflow:hidden !important;transform:none !important;
    transition:opacity var(--c2d-banner-duration,820ms) ease !important;
  }
  .c2d-banner-slide.is-current{opacity:1 !important;visibility:visible !important;display:flex !important;}
  .c2d-banner-slide.is-hidden:not(.is-current){opacity:0 !important;visibility:hidden !important;display:flex !important;}
  .c2d-banner-slide.is-in-left,.c2d-banner-slide.is-in-right,.c2d-banner-slide.is-out-left,.c2d-banner-slide.is-out-right{transform:none !important;}
  .c2d-banner-slide-copy{
    width:100% !important;max-width:100% !important;min-width:0 !important;height:auto !important;
    max-height:100% !important;display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;text-align:center !important;
    gap:3px !important;overflow:visible !important;
  }
  body.lang-ur .c2d-banner-slide-copy{direction:rtl !important;text-align:center !important;align-items:center !important;}
  .c2d-banner-slide-kicker{display:none !important;}
  .c2d-banner-slide-h1,.c2d-banner-slide-h2,.c2d-banner-slide-address,.c2d-banner-slide-url{
    width:100% !important;max-width:100% !important;text-align:center !important;overflow-wrap:anywhere !important;
    white-space:normal !important;visibility:visible !important;opacity:1 !important;
  }
  .c2d-banner-slide-h1{font-size:clamp(22px,7.2vw,34px) !important;line-height:1.08 !important;margin:0 0 3px !important;}
  .c2d-banner-slide-h2{font-size:clamp(12px,3.7vw,17px) !important;line-height:1.22 !important;}
  .c2d-banner-slide-accent{display:block !important;width:min(76%,260px) !important;height:3px !important;margin:5px auto !important;}
  .c2d-banner-slide-address{font-size:clamp(9px,2.65vw,12px) !important;line-height:1.32 !important;}
  .c2d-banner-slide-url{font-size:clamp(13px,3.7vw,17px) !important;line-height:1.2 !important;margin-top:2px !important;}
  .c2d-phone-banner-dots{left:50% !important;bottom:5px !important;z-index:30 !important;}

  /* Requested mobile Trusted Shop buttons: comfortable, equal tap targets. */
  .hero-actions{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:8px !important;}
  .hero-actions .btn{
    width:100% !important;min-width:0 !important;min-height:50px !important;height:auto !important;
    padding:12px 14px !important;display:flex !important;align-items:center !important;justify-content:center !important;
    line-height:1.25 !important;white-space:normal !important;overflow-wrap:anywhere !important;
  }
  .hero-actions .btn span{line-height:1.25 !important;}

  /* Same Day Repair card: icon and certification text are independent rows. */
  .hero-card{overflow:hidden !important;}
  .hero-illustration{display:flex !important;align-items:center !important;justify-content:center !important;padding:10px 6px 4px !important;min-height:0 !important;}
  .hero-illustration svg{width:min(100%,390px) !important;max-width:100% !important;height:auto !important;max-height:170px !important;display:block !important;}
  .hero-card > p{
    display:block !important;width:100% !important;max-width:95% !important;
    margin:6px auto 8px !important;padding:0 4px !important;
    text-align:center !important;line-height:1.4 !important;font-size:13px !important;
    overflow-wrap:anywhere !important;white-space:normal !important;visibility:visible !important;opacity:1 !important;
  }
  .hero-card .float-chip{z-index:5 !important;max-width:calc(100% - 18px) !important;}
  body.lang-ur .hero-content{direction:rtl !important;text-align:center !important;}
  body.lang-ur .hero-content h1,body.lang-ur .hero-content p,body.lang-ur .hero-content .badge{text-align:center !important;overflow-wrap:anywhere !important;}
}

@media (max-width:420px){
  .c2d-phone-banner{height:500px !important;min-height:500px !important;}
  .c2d-banner-fixed-logo{height:39% !important;}
  .c2d-banner-card-viewport{top:42% !important;bottom:9% !important;}
  .c2d-banner-slide-h1{font-size:clamp(21px,7vw,30px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(11px,3.5vw,15px) !important;}
  .c2d-banner-slide-address{font-size:9.5px !important;}
  .c2d-banner-slide-url{font-size:13px !important;}
  .hero-actions .btn{min-height:50px !important;padding:12px 13px !important;}
}

@media (max-width:360px){
  .c2d-phone-banner{height:510px !important;min-height:510px !important;}
  .c2d-banner-slide-h1{font-size:22px !important;}
  .c2d-banner-slide-h2{font-size:12.5px !important;}
  .c2d-banner-slide-address{font-size:9px !important;}
  .c2d-banner-slide-url{font-size:12.5px !important;}
}

/* Preserve the requested equal two-half relationship and eliminate accidental
   whitespace caused by fixed card heights. */
@media (min-width:901px){
  .hero-grid > .hero-content,.hero-grid > .hero-visual{min-height:0 !important;}
  .hero-visual .hero-card{min-height:100% !important;}
}

/* Never permit the requested fixes to introduce page-wide horizontal overflow. */
html,body{max-width:100% !important;overflow-x:hidden !important;}

/* =========================================================
   C2D REQUESTED FOLLOW-UP PASS — kicker duplicate removed at
   the source (script.js no longer renders .c2d-banner-slide-kicker),
   and the Same Day Repair / Home Delivery card icon enlarged to
   remove unnecessary blank space, as requested.
   ========================================================= */

/* Let the illustration fill whatever space flexbox actually gives it
   (instead of a fixed px guess that can exceed the real flex box and
   overflow into the caption text below it, which is what happened the
   first time this was attempted with a flat max-height:320px). Sizing
   the SVG to height:100%/width:auto of its own flex container means it
   can never be bigger than the room it was actually given, at any
   screen size, while still being as big as that room allows. */
.hero-illustration{
  flex:1 1 0 !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.hero-card{justify-content:flex-start !important;}
.hero-visual .hero-card{justify-content:flex-start !important;}
.hero-visual .hero-illustration{
  flex:0 0 auto !important;
  height:65% !important;
  min-height:0 !important;
  max-height:none !important;
}
.hero-illustration svg{
  width:auto !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}
.hero-visual .hero-illustration svg{max-height:none !important;}
@media (min-width:901px){
  .hero-illustration{ min-height:170px !important; }
}
@media (min-width:761px) and (max-width:900px){
  .hero-illustration{ min-height:140px !important; }
}
@media (max-width:900px){
  .hero-illustration{ min-height:120px !important; }
}
@media (max-width:420px){
  .hero-illustration{ min-height:100px !important; }
}

/* =========================================================
   C2D REQUESTED FIX — Same Day Repair / Home Delivery badges
   were getting visually hidden behind the section below them.
   The badges intentionally float partly outside the card
   (negative top/bottom offsets), so the card needs enough
   clearance from the next section, and the badges need to
   paint above it. Root cause, not a per-breakpoint patch.
   ========================================================= */
.hero{position:relative !important;z-index:1 !important;}
.hero-visual{margin-bottom:34px !important;}
.hero-card{position:relative !important;z-index:1 !important;overflow:visible !important;}
.hero-visual .hero-card{overflow:visible !important;}
@media (min-width:901px){
  .hero-visual .hero-card{overflow:visible !important;}
}
@media (max-width:900px){
  .hero-visual .hero-card{overflow:visible !important;}
}
.hero-card .float-chip{z-index:6 !important;}
@media (max-width:900px){
  .hero-visual{margin-bottom:30px !important;}
}

/* =========================================================
   C2D REQUESTED FIX — Urdu desktop/tablet side order.
   Earlier passes correctly swapped Karachi's Trusted Computer
   Shop / Same Day Repair sides for narrow mobile only
   (<=480px, <=360px). At tablet/laptop/desktop widths the two
   columns were only resized for RTL, never actually swapped,
   so on Urdu the wrong section kept landing on the wrong side:
     EN: Karachi's Trusted = LEFT, Same Day Repair = RIGHT
     UR: Same Day Repair = LEFT,  Karachi's Trusted = RIGHT
   This makes that swap explicit at every width the layout is
   two columns, so it can no longer regress at any one breakpoint.
   ========================================================= */
@media (min-width:761px){
  body:not(.lang-ur) .hero-content{grid-column:1 !important;grid-row:1 !important;}
  body:not(.lang-ur) .hero-visual{grid-column:2 !important;grid-row:1 !important;justify-self:end !important;}
  /* .hero-grid inherits direction:rtl from <html dir="rtl"> when Urdu is
     active, which already mirrors physical column placement (grid-column:1
     renders on the physical RIGHT under RTL). So for Urdu we deliberately
     do NOT swap column numbers — keeping hero-content in column 1 and
     hero-visual in column 2 is what makes hero-content land on the
     physical RIGHT and hero-visual land on the physical LEFT, which is
     the requested Urdu order (Same Day Repair LEFT / Karachi's Trusted RIGHT).
     Confirmed empirically by measuring live getBoundingClientRect(), not assumed. */
  body.lang-ur .hero-content{grid-column:1 !important;grid-row:1 !important;justify-self:end !important;}
  body.lang-ur .hero-visual{grid-column:2 !important;grid-row:1 !important;justify-self:start !important;}
}

/* =========================================================
   C2D DEFINITIVE MOBILE BANNER FIX — 2026-08-12
   The mobile logo/text overlap bug traced to FIVE separate,
   conflicting position/inset declarations for
   .c2d-banner-fixed-logo and .c2d-banner-card-viewport spread
   across different max-width:900/820/760px blocks, each added
   in an earlier patch pass and each overriding the last. Rather
   than keep stacking more per-breakpoint patches on the pile,
   this is ONE authoritative rule for how the stage lays out
   below 900px: a clean vertical flex stack — logo on top in
   normal flow, slide text below in normal flow — with nothing
   positioned absolutely, so nothing CAN overlap regardless of
   what any earlier rule tried to do. Placed last in the file
   and using the same selectors/specificity+importance as the
   rules it needs to beat, so it wins deterministically.
   ========================================================= */
@media (max-width:900px){
  .c2d-phone-banner-stage{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:14px !important;
    height:auto !important;
    min-height:0 !important;
  }
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position:relative !important;
    inset:auto !important;
    top:auto !important; right:auto !important; left:auto !important; bottom:auto !important;
    order:1 !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:2.3/1 !important;
    max-width:none !important; max-height:none !important;
    transform:none !important;
    margin:0 !important;
    grid-column:auto !important; grid-row:auto !important;
    justify-self:auto !important;
    overflow:hidden !important;
    border-radius:16px !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    position:relative !important;
    width:96% !important;
    height:96% !important;
    max-width:96% !important;
    max-height:96% !important;
    object-fit:contain !important;
  }
  .c2d-banner-card-viewport{
    position:relative !important;
    inset:auto !important;
    top:auto !important; right:auto !important; left:auto !important; bottom:auto !important;
    order:2 !important;
    width:100% !important;
    height:auto !important;
    min-height:220px !important;
    margin:0 !important;
    pointer-events:auto !important;
  }
  .c2d-banner-card-track{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:220px !important;
  }
  .c2d-banner-slide{
    min-height:220px !important;
  }
  .c2d-banner-card{
    position:relative !important;
    top:auto !important; left:auto !important; right:auto !important;
    width:100% !important;
    transform:none !important;
  }
}

/* =========================================================
   C2D V34.5 — AUTHORITATIVE BANNER/HERO RESPONSIVE FIX
   Fixes transition overlap, compact hero visual, responsive spacing,
   Urdu/English text wrapping, and wishlist-heart visibility.
   Existing assets/data are not changed.
   ========================================================= */

.c2d-phone-banner .c2d-banner-slide{
  transition:
    transform var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),
    opacity var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)) !important;
  will-change:transform,opacity !important;
}
.c2d-phone-banner .c2d-banner-slide.is-current{
  transform:translate3d(0,0,0) !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:10 !important;
}
.c2d-phone-banner .c2d-banner-slide.is-in-left{
  transform:translate3d(-105%,0,0) !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:11 !important;
}
.c2d-phone-banner .c2d-banner-slide.is-in-right{
  transform:translate3d(105%,0,0) !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:11 !important;
}
.c2d-phone-banner .c2d-banner-slide.is-out-left{
  transform:translate3d(-105%,0,0) !important;
  opacity:0 !important;
  visibility:visible !important;
  z-index:9 !important;
}
.c2d-phone-banner .c2d-banner-slide.is-out-right{
  transform:translate3d(105%,0,0) !important;
  opacity:0 !important;
  visibility:visible !important;
  z-index:9 !important;
}
.c2d-phone-banner .c2d-banner-slide.is-hidden{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.c2d-phone-banner .c2d-banner-slide-copy{
  box-sizing:border-box !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.c2d-phone-banner .c2d-banner-slide-h1,
.c2d-phone-banner .c2d-banner-slide-h2,
.c2d-phone-banner .c2d-banner-slide-address,
.c2d-phone-banner .c2d-banner-slide-url{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.c2d-phone-banner .c2d-banner-slide-h1{
  font-size:min(var(--c2d-slide-h1-size,58px),clamp(28px,4.2vw,58px)) !important;
  line-height:1.08 !important;
}
.c2d-phone-banner .c2d-banner-slide-h2{
  font-size:min(var(--c2d-slide-h2-size,27px),clamp(15px,1.9vw,27px)) !important;
  line-height:1.24 !important;
}
.c2d-phone-banner .c2d-banner-slide-address{
  font-size:min(var(--c2d-slide-address-size,14px),clamp(10px,1vw,14px)) !important;
  line-height:1.45 !important;
}
.c2d-phone-banner .c2d-banner-slide-url{
  font-size:min(var(--c2d-slide-url-size,20px),clamp(13px,1.3vw,20px)) !important;
  line-height:1.3 !important;
  overflow-wrap:anywhere !important;
}

@media (min-width:901px){
  .hero-grid{align-items:stretch !important;}
  .hero-content,.hero-visual{min-height:0 !important;height:auto !important;}
  .hero-visual{align-self:stretch !important;margin:0 !important;}
  .hero-visual .hero-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    align-self:stretch !important;
    justify-content:flex-start !important;
    padding:18px 18px 20px !important;
    box-sizing:border-box !important;
  }
  .hero-visual .hero-illustration{
    flex:0 0 auto !important;
    width:100% !important;
    height:clamp(220px,23vw,310px) !important;
    min-height:220px !important;
    max-height:310px !important;
    padding:4px 8px 0 !important;
    box-sizing:border-box !important;
  }
  .hero-visual .hero-illustration svg{
    width:min(100%,560px) !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
  .hero-visual .hero-card > p{
    flex:0 0 auto !important;
    margin:6px 0 2px !important;
    line-height:1.4 !important;
  }
  .hero-card .float-chip{z-index:8 !important;}
}

@media (max-width:900px){
  .hero-visual{margin:0 !important;min-height:0 !important;}
  .hero-visual .hero-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:12px 12px 16px !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }
  .hero-visual .hero-illustration{
    flex:0 0 auto !important;
    width:100% !important;
    height:clamp(190px,52vw,260px) !important;
    min-height:190px !important;
    max-height:260px !important;
    padding:2px 4px 0 !important;
    box-sizing:border-box !important;
  }
  .hero-visual .hero-illustration svg{
    width:min(100%,440px) !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
  .hero-visual .hero-card > p{
    margin:5px 0 0 !important;
    line-height:1.4 !important;
    text-align:center !important;
  }
  .hero-actions{
    width:100% !important;
    align-items:stretch !important;
  }
  .hero-actions .btn{
    min-height:50px !important;
    height:auto !important;
    padding:13px 16px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1.25 !important;
    white-space:normal !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  .hero-stats{
    width:100% !important;
    align-items:flex-start !important;
  }
  .hero-stats div{
    flex:1 1 0 !important;
    min-width:0 !important;
    text-align:center !important;
  }
}

body.lang-ur .hero-content h1,
body.lang-ur .hero-content p,
body.lang-ur .hero-content .badge,
body.lang-ur .hero-content .hero-actions,
body.lang-ur .hero-content .hero-stats{
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
body.lang-ur .hero-content h1{line-height:1.28 !important;}
body.lang-ur .hero-content p{line-height:1.7 !important;}

@media (max-width:900px){
  .c2d-phone-banner{
    height:auto !important;
    min-height:clamp(440px,120vw,560px) !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  .c2d-phone-banner-stage{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:12px !important;
    height:auto !important;
    min-height:0 !important;
    padding:12px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position:relative !important;
    inset:auto !important;
    order:1 !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:clamp(135px,34vw,210px) !important;
    aspect-ratio:auto !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:8px !important;
    transform:none !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
  .c2d-banner-card-viewport{
    position:relative !important;
    inset:auto !important;
    order:2 !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:240px !important;
    max-height:none !important;
    margin:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    pointer-events:auto !important;
  }
  .c2d-banner-card-track{
    position:relative !important;
    width:100% !important;
    height:240px !important;
    min-height:240px !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .c2d-banner-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:8px 8px 30px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .c2d-banner-slide-copy{
    width:100% !important;
    max-width:100% !important;
    gap:4px !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  body.lang-ur .c2d-banner-slide-copy{
    align-items:center !important;
    text-align:center !important;
    direction:rtl !important;
  }
  .c2d-banner-slide-h1{
    font-size:min(var(--c2d-slide-h1-size,58px),clamp(23px,7.5vw,38px)) !important;
    line-height:1.08 !important;
    margin-bottom:4px !important;
  }
  .c2d-banner-slide-h2{
    font-size:min(var(--c2d-slide-h2-size,27px),clamp(13px,4vw,19px)) !important;
    line-height:1.25 !important;
  }
  .c2d-banner-slide-accent{
    width:min(var(--c2d-slide-accent-width,100%),78%) !important;
    height:min(var(--c2d-slide-accent-height,5px),4px) !important;
    margin:6px auto !important;
  }
  .c2d-banner-slide-address{
    font-size:min(var(--c2d-slide-address-size,14px),clamp(9px,2.8vw,12px)) !important;
    line-height:1.35 !important;
    margin-bottom:2px !important;
  }
  .c2d-banner-slide-url{
    font-size:min(var(--c2d-slide-url-size,20px),clamp(13px,3.8vw,18px)) !important;
    line-height:1.25 !important;
  }
  .c2d-phone-banner-dots{
    position:absolute !important;
    left:50% !important;
    bottom:6px !important;
    z-index:40 !important;
  }
}
@media (max-width:420px){
  .c2d-phone-banner{min-height:clamp(440px,128vw,540px) !important;}
  .c2d-phone-banner-stage{padding:10px !important;gap:10px !important;}
  .c2d-banner-fixed-logo{height:clamp(125px,34vw,175px) !important;}
  .c2d-banner-card-track{height:250px !important;min-height:250px !important;}
  .c2d-banner-slide{padding:6px 6px 30px !important;}
  .c2d-banner-slide-h1{font-size:min(var(--c2d-slide-h1-size,58px),26px) !important;}
  .c2d-banner-slide-h2{font-size:min(var(--c2d-slide-h2-size,27px),15px) !important;}
  .c2d-banner-slide-address{font-size:9.5px !important;}
  .c2d-banner-slide-url{font-size:13px !important;}
  .hero-actions .btn{min-height:52px !important;padding:13px 12px !important;}
}
@media (max-width:360px){
  .c2d-banner-fixed-logo{height:125px !important;}
  .c2d-banner-card-track{height:255px !important;min-height:255px !important;}
  .c2d-banner-slide-h1{font-size:23px !important;}
  .c2d-banner-slide-h2{font-size:13px !important;}
  .c2d-banner-slide-address{font-size:9px !important;}
  .c2d-banner-slide-url{font-size:12.5px !important;}
}

body:not(.admin-body) .product-thumb .card-wishlist-btn{
  font-size:0 !important;
  width:36px !important;
  height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:transparent !important;
}
body:not(.admin-body) .product-thumb .card-wishlist-btn::before{
  content:"♥" !important;
  display:block !important;
  font-size:20px !important;
  line-height:1 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  color:#7f8792 !important;
}
body:not(.admin-body) .product-thumb .card-wishlist-btn.active::before{color:#e23744 !important;}

.c2d-phone-banner,.hero,.hero-grid,.hero-content,.hero-visual,.hero-card,.hero-actions,.hero-stats{
  min-width:0 !important;
}
.c2d-phone-banner img,.c2d-phone-banner svg,.hero-card img,.hero-card svg{max-width:100% !important;}
.c2d-phone-banner{touch-action:pan-y !important;user-select:none !important;-webkit-user-select:none !important;}

/* =========================================================
   C2D V34.5 FINAL REQUESTED ALIGNMENT / RESPONSIVE PASS
   - One stable banner slide layer (no text-on-text overlap)
   - Independent logo + slider containers
   - Natural-height mobile Urdu/English copy
   - Compact, equal hero cards with larger centered illustration
   - Exact desktop/tablet EN/UR hero side order
   - Requested section whitespace reduction only
   - Product wishlist heart always visible
   ========================================================= */

/* ---------- Banner: stable independent halves ---------- */
.c2d-phone-banner{
  width:100% !important;
  max-width:var(--c2d-banner-max-width,1320px) !important;
  margin-top:var(--c2d-banner-margin-top,0px) !important;
  margin-right:var(--c2d-banner-margin-right,0px) !important;
  margin-bottom:var(--c2d-banner-margin-bottom,12px) !important;
  margin-left:var(--c2d-banner-margin-left,0px) !important;
  height:var(--c2d-responsive-banner-height,var(--c2d-banner-height,440px)) !important;
  min-height:var(--c2d-responsive-banner-height,var(--c2d-banner-height,440px)) !important;
  max-height:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.c2d-phone-banner-stage{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:block !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

@media (min-width:701px){
  .c2d-banner-card-viewport{
    position:absolute !important;
    top:0 !important; bottom:0 !important;
    left:0 !important; right:50% !important;
    width:50% !important; height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    z-index:5 !important;
    box-sizing:border-box !important;
  }
  .c2d-banner-card-track{
    position:absolute !important;
    inset:0 !important;
    width:100% !important; height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .c2d-banner-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important; height:100% !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px clamp(18px,4vw,52px) 42px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    transform:translate3d(105%,0,0) !important;
    opacity:0 !important;
    visibility:visible !important;
    z-index:1 !important;
    transition:transform var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)), opacity var(--c2d-banner-duration,820ms) ease !important;
  }
  .c2d-banner-slide.is-current{
    transform:translate3d(0,0,0) !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:3 !important;
  }
  .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,0) !important;opacity:1 !important;visibility:visible !important;z-index:4 !important;}
  .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,0) !important;opacity:1 !important;visibility:visible !important;z-index:4 !important;}
  .c2d-banner-slide.is-out-left{transform:translate3d(-105%,0,0) !important;opacity:0 !important;visibility:visible !important;z-index:2 !important;}
  .c2d-banner-slide.is-out-right{transform:translate3d(105%,0,0) !important;opacity:0 !important;visibility:visible !important;z-index:2 !important;}
  .c2d-banner-slide.is-hidden{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;z-index:0 !important;}

  .c2d-banner-slide-copy{
    width:100% !important; max-width:min(100%,620px) !important;
    min-width:0 !important; min-height:0 !important;
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    text-align:center !important; gap:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .c2d-banner-slide-h1,.c2d-banner-slide-h2,.c2d-banner-slide-address,.c2d-banner-slide-url{
    width:100% !important; max-width:100% !important;
    text-align:center !important; overflow-wrap:anywhere !important;
    word-break:normal !important; white-space:normal !important;
  }
  .c2d-banner-slide-h1{font-size:clamp(25px,3vw,42px) !important;line-height:1.08 !important;margin:0 0 7px !important;}
  .c2d-banner-slide-h2{font-size:clamp(15px,1.55vw,22px) !important;line-height:1.24 !important;margin:0 !important;}
  .c2d-banner-slide-accent{width:min(70%,280px) !important;height:4px !important;margin:9px auto !important;flex:none !important;}
  .c2d-banner-slide-address{font-size:clamp(10px,.95vw,13px) !important;line-height:1.42 !important;margin:0 0 2px !important;}
  .c2d-banner-slide-url{font-size:clamp(13px,1.25vw,18px) !important;line-height:1.2 !important;margin:2px 0 0 !important;}

  /* Stable logo container: slider content can never move it. */
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position:absolute !important;
    top:0 !important; bottom:0 !important;
    right:0 !important; left:auto !important;
    width:50% !important; height:100% !important;
    max-width:none !important; max-height:none !important;
    padding:clamp(10px,1.5vw,22px) !important;
    margin:0 !important;
    transform:none !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    overflow:hidden !important; z-index:12 !important;
    box-sizing:border-box !important;
  }
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{
    width:100% !important; height:100% !important;
    max-width:100% !important; max-height:100% !important;
    object-fit:contain !important; display:block !important;
  }
}

/* ---------- Banner: natural mobile stack; logo ABOVE text ---------- */
@media (max-width:700px){
  .c2d-phone-banner{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    margin-bottom:10px !important;
  }
  .c2d-phone-banner-stage{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:12px !important;
    height:auto !important;
    min-height:0 !important;
    padding:12px 10px 36px !important;
    overflow:visible !important;
  }
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo{
    position:relative !important;
    inset:auto !important;
    order:1 !important;
    width:100% !important;
    height:clamp(135px,34vw,205px) !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    padding:5px !important;
    margin:0 !important;
    transform:none !important;
    overflow:hidden !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
  }
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{
    width:100% !important; height:100% !important;
    max-width:100% !important; max-height:100% !important;
    object-fit:contain !important;
  }
  .c2d-banner-card-viewport{
    position:relative !important;
    inset:auto !important;
    order:2 !important;
    width:100% !important;
    height:var(--c2d-responsive-slide-height,230px) !important;
    min-height:190px !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
    z-index:5 !important;
    box-sizing:border-box !important;
  }
  .c2d-banner-card-track{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .c2d-banner-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important; height:100% !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:8px 8px 18px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    transform:translate3d(105%,0,0) !important;
    opacity:0 !important;
    visibility:visible !important;
    z-index:1 !important;
    transition:transform var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)), opacity var(--c2d-banner-duration,820ms) ease !important;
  }
  .c2d-banner-slide.is-current{transform:translate3d(0,0,0) !important;opacity:1 !important;visibility:visible !important;z-index:3 !important;}
  .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,0) !important;opacity:1 !important;visibility:visible !important;z-index:4 !important;}
  .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,0) !important;opacity:1 !important;visibility:visible !important;z-index:4 !important;}
  .c2d-banner-slide.is-out-left{transform:translate3d(-105%,0,0) !important;opacity:0 !important;visibility:visible !important;z-index:2 !important;}
  .c2d-banner-slide.is-out-right{transform:translate3d(105%,0,0) !important;opacity:0 !important;visibility:visible !important;z-index:2 !important;}
  .c2d-banner-slide.is-hidden{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;z-index:0 !important;}
  .c2d-banner-slide-copy{
    width:100% !important; max-width:100% !important; min-width:0 !important;
    min-height:0 !important; height:auto !important; max-height:none !important;
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    text-align:center !important; gap:2px !important;
    overflow:visible !important; box-sizing:border-box !important;
  }
  body.lang-ur .c2d-banner-slide-copy{direction:rtl !important;text-align:center !important;align-items:center !important;}
  .c2d-banner-slide-kicker{display:none !important;}
  .c2d-banner-slide-h1,.c2d-banner-slide-h2,.c2d-banner-slide-address,.c2d-banner-slide-url{
    width:100% !important; max-width:100% !important;
    text-align:center !important; overflow-wrap:anywhere !important;
    word-break:normal !important; white-space:normal !important;
    opacity:1 !important; visibility:visible !important;
  }
  .c2d-banner-slide-h1{font-size:clamp(20px,7vw,31px) !important;line-height:1.1 !important;margin:0 0 3px !important;}
  .c2d-banner-slide-h2{font-size:clamp(12px,3.7vw,17px) !important;line-height:1.25 !important;margin:0 !important;}
  .c2d-banner-slide-accent{width:min(72%,250px) !important;height:3px !important;margin:5px auto !important;}
  .c2d-banner-slide-address{font-size:clamp(9px,2.65vw,12px) !important;line-height:1.35 !important;margin:0 !important;}
  .c2d-banner-slide-url{font-size:clamp(12px,3.6vw,17px) !important;line-height:1.2 !important;margin:2px 0 0 !important;}
  .c2d-phone-banner-dots{position:absolute !important;left:50% !important;bottom:7px !important;z-index:30 !important;}

  /* Trusted-shop mobile buttons: full-width, equal, readable tap targets. */
  .hero-actions{width:100% !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:9px !important;margin-bottom:12px !important;}
  .hero-actions .btn{
    width:100% !important; min-width:0 !important; min-height:52px !important; height:auto !important;
    padding:13px 15px !important; display:flex !important; align-items:center !important; justify-content:center !important;
    gap:8px !important; line-height:1.3 !important; white-space:normal !important;
    text-align:center !important; overflow-wrap:anywhere !important; box-sizing:border-box !important;
  }
  .hero-actions .btn span{line-height:1.3 !important;}

  /* Same Day Repair: compact card, large centered illustration, text below. */
  .hero-card{
    width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important;
    padding:12px 12px 18px !important; margin:0 !important; overflow:visible !important;
    box-sizing:border-box !important;
  }
  .hero-illustration{width:100% !important;height:clamp(215px,58vw,285px) !important;min-height:215px !important;max-height:285px !important;padding:4px 2px 2px !important;display:flex !important;align-items:center !important;justify-content:center !important;box-sizing:border-box !important;}
  .hero-illustration svg{width:min(100%,470px) !important;height:100% !important;max-width:100% !important;max-height:100% !important;display:block !important;object-fit:contain !important;}
  .hero-card > p{
    width:100% !important; max-width:100% !important; min-height:0 !important;
    margin:8px auto 2px !important; padding:0 5px !important;
    text-align:center !important; line-height:1.45 !important; font-size:13px !important;
    overflow-wrap:anywhere !important; white-space:normal !important; visibility:visible !important; opacity:1 !important;
    box-sizing:border-box !important;
  }
  .hero-card .float-chip{z-index:8 !important;max-width:calc(100% - 18px) !important;white-space:normal !important;}

  /* Mobile stacking preserves language-specific desktop order. */
  .hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:12px !important;}
  body:not(.lang-ur) .hero-content{grid-column:1 !important;grid-row:1 !important;}
  body:not(.lang-ur) .hero-visual{grid-column:1 !important;grid-row:2 !important;}
  body.lang-ur .hero-visual{grid-column:1 !important;grid-row:1 !important;}
  body.lang-ur .hero-content{grid-column:1 !important;grid-row:2 !important;direction:rtl !important;text-align:center !important;}
  body.lang-ur .hero-content h1,body.lang-ur .hero-content p,body.lang-ur .hero-content .badge{text-align:center !important;overflow-wrap:anywhere !important;}
}

@media (min-width:701px){
  /* Exact requested EN/UR side order on laptop/tablet. */
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:clamp(16px,2vw,28px) !important;align-items:stretch !important;}
  body:not(.lang-ur) .hero-content{grid-column:1 !important;grid-row:1 !important;}
  body:not(.lang-ur) .hero-visual{grid-column:2 !important;grid-row:1 !important;}
  body.lang-ur .hero-visual{grid-column:1 !important;grid-row:1 !important;}
  body.lang-ur .hero-content{grid-column:2 !important;grid-row:1 !important;direction:rtl !important;text-align:right !important;}
  .hero-content,.hero-visual{min-width:0 !important;align-self:stretch !important;box-sizing:border-box !important;}
  .hero-content{display:flex !important;flex-direction:column !important;justify-content:center !important;}
  .hero-visual{display:flex !important;align-items:stretch !important;margin:0 !important;}
  .hero-visual .hero-card{
    width:100% !important; height:420px !important; min-height:420px !important; max-height:420px !important;
    padding:12px 18px 18px !important; display:flex !important; flex-direction:column !important;
    justify-content:flex-start !important; box-sizing:border-box !important; overflow:visible !important;
  }
  .hero-visual .hero-illustration{
    flex:0 0 auto !important; width:100% !important; height:300px !important; min-height:300px !important; max-height:300px !important;
    padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important;
  }
  .hero-visual .hero-illustration svg{width:min(100%,600px) !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain !important;display:block !important;}
  .hero-visual .hero-card > p{flex:0 0 auto !important;width:100% !important;margin:6px auto 0 !important;padding:0 8px !important;line-height:1.45 !important;font-size:14px !important;text-align:center !important;box-sizing:border-box !important;}
  .hero-card .float-chip{z-index:8 !important;max-width:calc(100% - 24px) !important;}
}

@media (min-width:701px) and (max-width:1100px){
  .hero-visual .hero-card{height:390px !important;min-height:390px !important;max-height:390px !important;}
  .hero-visual .hero-illustration{height:270px !important;min-height:270px !important;max-height:270px !important;}
  .hero-content h1{font-size:clamp(30px,4.5vw,46px) !important;}
  .hero-content p{font-size:15px !important;line-height:1.5 !important;}
}

@media (max-width:420px){
  .c2d-banner-fixed-logo{height:clamp(125px,34vw,175px) !important;}
  .hero-actions .btn{min-height:52px !important;padding:13px 12px !important;}
  .hero-illustration{height:230px !important;min-height:230px !important;max-height:230px !important;}
  .hero-card > p{font-size:12.5px !important;line-height:1.45 !important;}
}
@media (max-width:360px){
  .c2d-banner-fixed-logo{height:125px !important;}
  .hero-illustration{height:220px !important;min-height:220px !important;max-height:220px !important;}
  .c2d-banner-slide-h1{font-size:22px !important;}
  .c2d-banner-slide-h2{font-size:12.5px !important;}
  .c2d-banner-slide-address{font-size:9px !important;}
  .c2d-banner-slide-url{font-size:12.5px !important;}
}

/* ---------- Requested whitespace reductions: only affected sections ---------- */
#why,#tracker,#about{padding-top:52px !important;padding-bottom:52px !important;}
#why .section-head,#tracker .section-head{margin-bottom:28px !important;}
#about .about-grid{gap:40px !important;}
#about .about-content > .btn{margin-top:8px !important;}
@media (max-width:700px){
  #why,#tracker,#about{padding-top:42px !important;padding-bottom:42px !important;}
  #why .section-head,#tracker .section-head{margin-bottom:24px !important;}
  #about .about-grid{gap:24px !important;}
}

/* ---------- Product cards: wishlist heart always visible ---------- */
body:not(.admin-body) .product-thumb .card-wishlist-btn{
  position:absolute !important;
  inset-inline-end:10px !important;
  inset-inline-start:auto !important;
  top:10px !important;
  z-index:50 !important;
  width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  visibility:visible !important; opacity:1 !important; overflow:visible !important;
  border-radius:50% !important; background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(8,33,58,.12) !important; color:transparent !important; font-size:0 !important;
  box-sizing:border-box !important;
}
body:not(.admin-body) .product-thumb .card-wishlist-btn::before{
  content:"♡" !important; display:block !important; width:auto !important; height:auto !important;
  font-family:Arial,Helvetica,sans-serif !important; font-size:24px !important; line-height:1 !important;
  color:#687486 !important; opacity:1 !important; visibility:visible !important;
}
body:not(.admin-body) .product-thumb .card-wishlist-btn.active::before{content:"♥" !important;color:#e23744 !important;}

/* Prevent affected areas from creating horizontal page scroll. */
.c2d-phone-banner,.hero-grid,.hero-content,.hero-visual,.hero-card,#why,#tracker,#about{min-width:0 !important;max-width:100% !important;}
.c2d-phone-banner img,.c2d-phone-banner svg,.hero-card img,.hero-card svg{max-width:100% !important;}
html,body{max-width:100% !important;overflow-x:hidden !important;}


/* =========================================================
   REQUESTED-ONLY ALIGNMENT LAYER — C2D V34.5
   Keeps logo/slider independent and removes artificial card whitespace.
   ========================================================= */

/* Banner text must never visually overlap during a transition. Each incoming
   slide has its own opaque surface, so the outgoing text is covered rather
   than painted on top of the incoming text. */
.c2d-phone-banner .c2d-banner-slide{
  background:var(--c2d-banner-theme-surface,var(--bg-alt)) !important;
  overflow:visible !important;
}
.c2d-phone-banner .c2d-banner-card-viewport,
.c2d-phone-banner .c2d-banner-card-track{
  overflow:hidden !important;
}
.c2d-phone-banner .c2d-banner-slide-copy{
  overflow:visible !important;
  max-height:none !important;
}
.c2d-phone-banner .c2d-banner-slide-h1,
.c2d-phone-banner .c2d-banner-slide-h2,
.c2d-phone-banner .c2d-banner-slide-address,
.c2d-phone-banner .c2d-banner-slide-url{
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Same Day Repair / Home Delivery: the card itself stays compact; only the
   existing illustration is enlarged to use the available card area. */
@media (min-width:701px){
  .hero-grid{align-items:start !important;}
  .hero-visual{align-self:start !important;height:auto !important;}
  .hero-visual .hero-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:10px 14px 14px !important;
  }
  .hero-visual .hero-illustration{
    height:clamp(270px,25vw,315px) !important;
    min-height:270px !important;
    max-height:315px !important;
    padding:0 !important;
  }
  .hero-visual .hero-illustration svg{
    width:min(100%,640px) !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
  .hero-visual .hero-card > p{
    margin:6px auto 0 !important;
    padding:0 8px !important;
    line-height:1.45 !important;
    text-align:center !important;
  }
}

/* Smaller viewports: keep the same compact card logic and let the illustration
   consume the available visual area without creating a giant card. */
@media (max-width:700px){
  .hero-visual .hero-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:10px 10px 14px !important;
  }
  .hero-visual .hero-illustration{
    height:clamp(205px,54vw,285px) !important;
    min-height:205px !important;
    max-height:285px !important;
    padding:0 !important;
  }
  .hero-visual .hero-illustration svg{
    width:min(100%,560px) !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }
  .hero-visual .hero-card > p{
    margin:7px auto 0 !important;
    padding:0 5px !important;
    line-height:1.45 !important;
  }
}

/* Requested sections: remove excess vertical whitespace only. */
#why,#tracker,#about{
  padding-top:36px !important;
  padding-bottom:36px !important;
}
#why .section-head,#tracker .section-head{margin-bottom:22px !important;}
#about .about-grid{gap:30px !important;}
@media (max-width:700px){
  #why,#tracker,#about{padding-top:30px !important;padding-bottom:30px !important;}
  #why .section-head,#tracker .section-head{margin-bottom:18px !important;}
  #about .about-grid{gap:18px !important;}
}

/* Product-card heart remains a normal visible control. */
body:not(.admin-body) .product-thumb .card-wishlist-btn{
  visibility:visible !important;
  opacity:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:50 !important;
}

/* =========================================================
   C2D FINAL USER-SPECIFIC ALIGNMENT PASS — 2026-08-12
   Scope: only the requested hero/repair-card/About alignment.
   No content, data, backend, popup, product, or unrelated layout changes.
   ========================================================= */

/* Desktop / laptop: both Banner-below hero halves share exactly one row
   height. The right/left card is never independently stretched beyond the
   natural height of the opposite content column. */
@media (min-width: 861px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    align-items:stretch !important;
    gap:clamp(18px,2vw,30px) !important;
  }
  .hero-content,
  .hero-visual{
    align-self:stretch !important;
    min-height:0 !important;
    height:auto !important;
  }
  .hero-visual{
    display:flex !important;
    align-items:stretch !important;
    margin:0 !important;
  }
  .hero-visual .hero-card{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:clamp(10px,1.2vw,18px) clamp(12px,1.5vw,22px) clamp(12px,1.5vw,18px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }

  /* Make the existing illustration substantially larger and let it consume
     the card's real free area, while keeping the caption below it. */
  .hero-visual .hero-illustration{
    flex:1 1 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:260px !important;
    max-height:none !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  .hero-visual .hero-illustration svg{
    width:min(100%,640px) !important;
    height:min(100%,420px) !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    display:block !important;
  }
  .hero-visual .hero-card > p{
    flex:0 0 auto !important;
    width:100% !important;
    margin:8px auto 2px !important;
    padding:0 8px !important;
    line-height:1.45 !important;
    text-align:center !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
  }

  /* Urdu: never constrain the trusted-shop copy to a fixed height. */
  body.lang-ur .hero-content,
  body.lang-ur .hero-content h1,
  body.lang-ur .hero-content p{
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  body.lang-ur .hero-content h1{
    line-height:1.7 !important;
    margin-bottom:12px !important;
  }
  body.lang-ur .hero-content p{
    line-height:1.8 !important;
    margin-bottom:20px !important;
  }
}

/* Medium/tablet widths: keep two balanced halves where there is enough room;
   at narrower tablet/mobile widths use one natural-flow column so Urdu and
   English text can grow vertically without clipping. */
@media (min-width:861px) and (max-width:1100px){
  .hero-visual .hero-illustration{min-height:230px !important;}
  .hero-visual .hero-illustration svg{width:min(100%,520px) !important;height:min(100%,340px) !important;}
  .hero-content h1{font-size:clamp(30px,4.3vw,44px) !important;}
  .hero-content p{font-size:15px !important;line-height:1.55 !important;}
  body.lang-ur .hero-content h1{font-size:clamp(27px,4vw,40px) !important;line-height:1.65 !important;}
  body.lang-ur .hero-content p{font-size:14px !important;line-height:1.75 !important;}
}

/* Mobile / small tablets: natural-flow card with a larger illustration and
   caption safely underneath. No fixed card height and no clipping. */
@media (max-width:860px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:clamp(12px,3vw,20px) !important;
    align-items:stretch !important;
  }
  .hero-content,
  .hero-visual{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    align-self:stretch !important;
  }
  .hero-content{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }
  .hero-visual{
    display:flex !important;
    align-items:stretch !important;
    margin:0 !important;
  }
  .hero-visual .hero-card{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:clamp(10px,2.5vw,16px) clamp(10px,3vw,18px) clamp(12px,3vw,18px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }
  .hero-visual .hero-illustration{
    flex:0 1 auto !important;
    width:100% !important;
    height:clamp(240px,58vw,360px) !important;
    min-height:240px !important;
    max-height:360px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  .hero-visual .hero-illustration svg{
    width:min(100%,600px) !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    display:block !important;
  }
  .hero-visual .hero-card > p{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:8px auto 0 !important;
    padding:0 6px !important;
    text-align:center !important;
    line-height:1.45 !important;
    font-size:clamp(11px,2.9vw,14px) !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
  }

  .hero-content h1,
  .hero-content p,
  body.lang-ur .hero-content h1,
  body.lang-ur .hero-content p{
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    white-space:normal !important;
  }
  body.lang-ur .hero-content h1{
    line-height:1.65 !important;
    margin-bottom:8px !important;
  }
  body.lang-ur .hero-content p{
    line-height:1.8 !important;
    margin-bottom:14px !important;
  }

  .hero-actions .btn{
    min-height:50px !important;
    height:auto !important;
    padding:13px 16px !important;
    white-space:normal !important;
    line-height:1.35 !important;
  }
}

@media (max-width:480px){
  .hero-visual .hero-illustration{
    height:clamp(220px,64vw,310px) !important;
    min-height:220px !important;
    max-height:310px !important;
  }
  .hero-visual .hero-illustration svg{
    width:min(100%,500px) !important;
  }
  .hero-card .float-chip{
    max-width:calc(100% - 16px) !important;
    white-space:normal !important;
  }
}

@media (max-width:360px){
  .hero-visual .hero-illustration{
    height:clamp(205px,68vw,275px) !important;
    min-height:205px !important;
  }
  .hero-visual .hero-card > p{font-size:11px !important;}
}

/* ABOUT US: enlarge the existing illustration, center it inside the existing
   frame, and remove the unused visual whitespace without changing the card's
   content or the section's structure. */
.about-grid{
  align-items:center !important;
  min-width:0 !important;
}
.about-visual{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.about-visual .frame{
  width:100% !important;
  min-height:0 !important;
  padding:clamp(14px,2.5vw,26px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.about-visual .frame svg{
  width:min(100%,560px) !important;
  max-width:560px !important;
  height:auto !important;
  max-height:none !important;
  margin:0 auto !important;
  display:block !important;
}
.about-content{
  min-width:0 !important;
  max-width:100% !important;
}
.about-content h2,
.about-content p,
.about-content li{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
body.lang-ur .about-grid{direction:rtl;}
body.lang-ur .about-content{text-align:right;}

@media (max-width:900px){
  .about-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:clamp(16px,4vw,26px) !important;
  }
  .about-visual .frame{
    padding:clamp(12px,4vw,22px) !important;
  }
  .about-visual .frame svg{
    width:min(100%,520px) !important;
    max-width:520px !important;
  }
  .about-content{
    width:100% !important;
  }
}

@media (max-width:480px){
  .about-visual .frame{
    padding:10px !important;
  }
  .about-visual .frame svg{
    width:min(100%,440px) !important;
  }
  .about-content h2{line-height:1.25 !important;}
}



/* =========================================================
   C2D — EXACT USER REQUEST: HERO HALF HEIGHT + LARGER ART
   This layer affects only the Banner-below hero halves and About illustration.
   ========================================================= */

/* Desktop/laptop: make the right repair card follow the exact natural height
   of the left Karachi content column. The JS height sync below supplies the
   pixel value after fonts/language/layout settle. */
@media (min-width:861px){
  .hero-grid{
    align-items:start !important;
    grid-auto-rows:auto !important;
  }
  .hero-content,
  .hero-visual{
    height:auto !important;
    min-height:0 !important;
    align-self:start !important;
  }
  .hero-visual{
    display:block !important;
  }
  .hero-visual .hero-card{
    width:100% !important;
    height:var(--c2d-hero-equal-height,auto) !important;
    min-height:0 !important;
    max-height:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:clamp(8px,1vw,14px) clamp(10px,1.3vw,18px) clamp(10px,1vw,14px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }

  /* Larger existing illustration: use the card's available visual area,
     centered both horizontally and vertically. */
  .hero-visual .hero-illustration{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    width:100% !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  .hero-visual .hero-illustration svg{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    max-height:100% !important;
    flex:0 1 auto !important;
    object-fit:contain !important;
    transform:none !important;
    transform-origin:center center !important;
    display:block !important;
  }
  .hero-visual .hero-card > p{
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:6px auto 0 !important;
    padding:0 6px !important;
    text-align:center !important;
    line-height:1.4 !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
  }

  /* Urdu content is allowed to determine the row naturally. */
  body.lang-ur .hero-content{
    min-width:0 !important;
    overflow:visible !important;
  }
  body.lang-ur .hero-content h1,
  body.lang-ur .hero-content p{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
  }
  body.lang-ur .hero-content h1{line-height:1.65 !important;}
  body.lang-ur .hero-content p{line-height:1.8 !important;}
}

/* Small desktop/tablet: scale the same existing art without creating
   horizontal overflow. */
@media (min-width:861px) and (max-width:1100px){
  .hero-visual .hero-illustration svg{
    width:100% !important;
    transform:none !important;
  }
}

/* Mobile/tablet portrait: no equal-height forcing. Both sections use natural
   flow so Urdu/English text can grow without clipping or overlap. */
@media (max-width:860px){
  .hero-grid{
    align-items:stretch !important;
  }
  .hero-visual .hero-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .hero-visual .hero-illustration{
    height:clamp(250px,62vw,380px) !important;
    min-height:220px !important;
    max-height:380px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }
  .hero-visual .hero-illustration svg{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    max-height:100% !important;
    transform:none !important;
    transform-origin:center center !important;
  }
}

/* =========================================================
   ABOUT US — larger, centered existing illustration
   ========================================================= */
.about-visual .frame{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:0 !important;
  overflow:visible !important;
}
.about-visual .frame svg{
  width:100% !important;
  max-width:640px !important;
  height:auto !important;
  margin:0 auto !important;
  transform:none !important;
  transform-origin:center center !important;
}
@media (max-width:900px){
  .about-visual .frame svg{
    width:100% !important;
    max-width:580px !important;
    transform:none !important;
  }
}
@media (max-width:480px){
  .about-visual .frame svg{
    width:100% !important;
    max-width:520px !important;
    transform:none !important;
  }
}

/* =========================================================
   C2D REQUESTED FIX — banner logo box was shorter than the
   text-slide box on the same row (394px vs 448px measured),
   leaving a visible gap above/below the logo that the text
   side didn't have. Per the reference screenshot with arrows
   marking the logo box's corners, the logo box (and only the
   logo graphic within it, not a redesign) should reach the
   same top/bottom edges as the text side. Matching selectors/
   specificity to what's already governing this element so it
   wins deterministically, and only touching sizing — nothing
   about position, order, or content.
   ========================================================= */
@media (min-width:901px){
  .c2d-phone-banner-stage .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="ltr"] .c2d-banner-fixed-logo,
  .c2d-phone-banner[data-direction="rtl"] .c2d-banner-fixed-logo{
    top:0 !important;
    bottom:0 !important;
    height:100% !important;
    width:44% !important;
    transform:none !important;
  }
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    width:96% !important;
    height:96% !important;
    max-width:96% !important;
    max-height:96% !important;
    object-fit:contain !important;
    transform:none !important;
  }
}

/* =========================================================
   C2D REQUESTED FIX — "Certified technicians..." caption was
   overlapping the "Home Delivery" floating badge on mobile
   (badge sits near the card's bottom-left corner by design;
   the caption's own bottom margin wasn't tall enough to clear
   it at narrow widths), so the badge visually covered the
   start of the sentence. Give the caption enough clearance so
   it always finishes above the badge, at every mobile width.
   ========================================================= */
@media (max-width:900px){
  .hero-visual .hero-card > p,
  .hero-card > p{
    margin-bottom:46px !important;
  }
}
@media (max-width:480px){
  .hero-visual .hero-card > p,
  .hero-card > p{
    margin-bottom:42px !important;
  }
}

/* =========================================================
   C2D V34.9 FINAL MOBILE REQUESTED FIXES
   Scope: banner mobile alignment/readability + existing hero repair badges
   + WhatsApp icon visibility. No product/data/popup redesign.
   ========================================================= */

/* Stable, theme-aware banner rendering. Never blur the text layer. */
.c2d-phone-banner .c2d-banner-slide,
.c2d-phone-banner .c2d-banner-slide-copy,
.c2d-phone-banner .c2d-banner-slide-h1,
.c2d-phone-banner .c2d-banner-slide-h2,
.c2d-phone-banner .c2d-banner-slide-address,
.c2d-phone-banner .c2d-banner-slide-url{
  filter:none !important;
  -webkit-filter:none !important;
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
  text-rendering:optimizeLegibility !important;
  -webkit-font-smoothing:antialiased !important;
  text-shadow:none !important;
}
.c2d-phone-banner .c2d-banner-slide.is-current{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  -webkit-filter:none !important;
}
.c2d-phone-banner .c2d-banner-slide.is-current .c2d-banner-slide-copy{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}

/* WhatsApp controls use the real SVG icon rather than an emoji glyph. */
.btn-wa-icon{
  width:1.15em !important;
  height:1.15em !important;
  min-width:1.15em !important;
  min-height:1.15em !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  color:currentColor !important;
  vertical-align:middle !important;
}
.btn-wa-icon svg{width:100% !important;height:100% !important;display:block !important;}

/* The existing mobile reference requires the C2D logo first, then the text
   slider, in BOTH English and Urdu. The logo fills its own blank panel area;
   the text panel gets its full natural height so nothing is clipped. */
@media (max-width:900px){
  .c2d-phone-banner{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin-top:0 !important;
    margin-bottom:4px !important;
    overflow:visible !important;
    border-radius:18px !important;
  }
  .c2d-phone-banner-stage{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:10px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .c2d-banner-fixed-logo,
  body.lang-ur .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-banner-fixed-logo{
    position:relative !important;
    inset:auto !important;
    order:1 !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:clamp(160px,42vw,250px) !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    border-radius:16px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    z-index:20 !important;
    background:var(--c2d-banner-logo-panel-bg,#06131f) !important;
    border:1px solid var(--border) !important;
  }
  .c2d-banner-fixed-logo .c2d-logo-halo{display:none !important;}
  .c2d-banner-fixed-logo img,
  .c2d-banner-fixed-logo .js-banner-image{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:scale(1.04) !important;
    transform-origin:center center !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
  body[data-theme="light"] .c2d-banner-fixed-logo,
  html[data-theme="light"] .c2d-banner-fixed-logo{
    --c2d-banner-logo-panel-bg:#ffffff;
  }
  body[data-theme="dark"] .c2d-banner-fixed-logo,
  html[data-theme="dark"] .c2d-banner-fixed-logo{
    --c2d-banner-logo-panel-bg:#06131f;
  }

  .c2d-banner-card-viewport{
    position:relative !important;
    inset:auto !important;
    order:2 !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:var(--c2d-responsive-slide-height,230px) !important;
    min-height:var(--c2d-responsive-slide-height,230px) !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    pointer-events:none !important;
    z-index:5 !important;
  }
  .c2d-banner-card-track{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    transform-style:preserve-3d !important;
    perspective:var(--c2d-banner-perspective,1600px) !important;
  }
  .c2d-phone-banner .c2d-banner-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    padding:12px 10px 18px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    background:var(--c2d-banner-theme-surface,var(--card-2)) !important;
    border-radius:16px !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow) !important;
    transform-origin:center center !important;
    transition:transform var(--c2d-banner-duration,820ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),opacity var(--c2d-banner-duration,820ms) ease !important;
  }
  /* English: incoming LEFT -> RIGHT. Urdu: incoming RIGHT -> LEFT. */
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-in-left{
    transform:translate3d(-105%,0,-20px) rotateY(8deg) scale(.96) !important;
    opacity:1 !important; visibility:visible !important; z-index:11 !important;
  }
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-out-right{
    transform:translate3d(105%,0,-50px) rotateY(-14deg) scale(.90) !important;
    opacity:0 !important; visibility:visible !important; z-index:9 !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-in-right{
    transform:translate3d(105%,0,-20px) rotateY(-8deg) scale(.96) !important;
    opacity:1 !important; visibility:visible !important; z-index:11 !important;
  }
  body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-out-left{
    transform:translate3d(-105%,0,-50px) rotateY(14deg) scale(.90) !important;
    opacity:0 !important; visibility:visible !important; z-index:9 !important;
  }
  .c2d-phone-banner .c2d-banner-slide.is-current{
    transform:translate3d(0,0,0) rotateY(0deg) scale(1) !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:10 !important;
  }
  .c2d-phone-banner .c2d-banner-slide.is-hidden{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:0 !important;
  }
  .c2d-banner-slide-copy,
  body.lang-ur .c2d-banner-slide-copy{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    direction:inherit !important;
    gap:0 !important;
    overflow:visible !important;
    transform:none !important;
  }
  body.lang-ur .c2d-banner-slide-copy{direction:rtl !important;}
  .c2d-banner-slide-h1,
  .c2d-banner-slide-h2,
  .c2d-banner-slide-address,
  .c2d-banner-slide-url{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .c2d-banner-slide-h1{font-size:clamp(22px,7vw,32px) !important;line-height:1.08 !important;margin:0 0 5px !important;}
  .c2d-banner-slide-h2{font-size:clamp(13px,3.8vw,18px) !important;line-height:1.25 !important;margin:0 !important;}
  .c2d-banner-slide-accent{width:min(76%,260px) !important;height:3px !important;margin:6px auto !important;flex:0 0 auto !important;}
  .c2d-banner-slide-address{font-size:clamp(9.5px,2.7vw,12px) !important;line-height:1.38 !important;margin:0 0 2px !important;}
  .c2d-banner-slide-url{font-size:clamp(13px,3.7vw,18px) !important;line-height:1.2 !important;margin:2px 0 0 !important;}
  .c2d-phone-banner-dots{
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important;
    order:3 !important;
    width:100% !important;
    min-height:22px !important;
    margin:2px auto 4px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:auto !important;
    z-index:30 !important;
  }
  .c2d-phone-banner-dots .c2d-banner-dot{flex:0 0 auto !important;}

  /* Mobile hero visual: keep both existing badges visible and aligned inside
     the existing card so neither badge nor the certification caption is hidden. */
  .hero-visual .hero-card{
    position:relative !important;
    overflow:visible !important;
    padding:10px 10px 58px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  .hero-card .float-chip{
    position:absolute !important;
    z-index:20 !important;
    max-width:calc(100% - 20px) !important;
    white-space:nowrap !important;
    overflow:visible !important;
    line-height:1.15 !important;
  }
  .hero-card .chip-1{
    top:10px !important;
    inset-inline-end:10px !important;
    inset-inline-start:auto !important;
    bottom:auto !important;
  }
  .hero-card .chip-2{
    bottom:10px !important;
    inset-inline-start:10px !important;
    inset-inline-end:auto !important;
    top:auto !important;
  }
  .hero-card .float-chip .chip-ic{
    width:24px !important;height:24px !important;min-width:24px !important;min-height:24px !important;
  }
  .hero-visual .hero-card > p{
    position:relative !important;
    z-index:5 !important;
    margin:7px 0 0 !important;
    padding:0 8px !important;
    min-height:32px !important;
    line-height:1.4 !important;
    overflow:visible !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:420px){
  .c2d-banner-fixed-logo{height:clamp(145px,42vw,190px) !important;}
  .c2d-banner-card-viewport{height:var(--c2d-responsive-slide-height,235px) !important;min-height:var(--c2d-responsive-slide-height,235px) !important;}
  .c2d-banner-slide-h1{font-size:clamp(21px,7vw,29px) !important;}
  .c2d-banner-slide-h2{font-size:clamp(12.5px,3.7vw,16px) !important;}
  .c2d-banner-slide-address{font-size:9.5px !important;line-height:1.34 !important;}
  .c2d-banner-slide-url{font-size:13px !important;}
  .hero-card .float-chip{font-size:10.5px !important;padding:6px 8px !important;}
}

@media (max-width:360px){
  .c2d-banner-fixed-logo{height:140px !important;}
  .c2d-banner-slide-h1{font-size:22px !important;}
  .c2d-banner-slide-h2{font-size:12.5px !important;}
  .c2d-banner-slide-address{font-size:9px !important;}
  .c2d-banner-slide-url{font-size:12.5px !important;}
  .hero-card .float-chip{font-size:10px !important;}
}

/* Light-mode banner logo: use the already supplied white/light C2D asset and
   keep the text readable; switching theme must not leave a faded/blurred slide. */
body[data-theme="light"] .c2d-phone-banner{
  --c2d-banner-theme-surface:linear-gradient(135deg,#f7fbff 0%,#eaf5ff 55%,#f8fbff 100%);
  --c2d-banner-logo-panel-bg:#ffffff;
}
body[data-theme="dark"] .c2d-phone-banner{
  --c2d-banner-theme-surface:linear-gradient(135deg,#07111c 0%,#0b2030 55%,#07101b 100%);
  --c2d-banner-logo-panel-bg:#06131f;
}

/* Admin-selectable slide transition presets — applied to the live
   .c2d-banner-slide engine (not the legacy .c2d-banner-card markup). */
.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-slide.is-in-right{
  transform:translate3d(0,0,0) scale(1.02) !important;
}
.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-slide.is-out-left,
.c2d-phone-banner[data-transition="crossfade"] .c2d-banner-slide.is-out-right{
  transform:translate3d(0,0,0) scale(.98) !important;
}
.c2d-phone-banner[data-transition="tumble"] .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,-20px) rotateY(48deg) rotateZ(-8deg) scale(.78) !important;}
.c2d-phone-banner[data-transition="tumble"] .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,-20px) rotateY(-48deg) rotateZ(8deg) scale(.78) !important;}
.c2d-phone-banner[data-transition="tumble"] .c2d-banner-slide.is-out-left{transform:translate3d(-80%,0,-80px) rotateY(48deg) rotateZ(-8deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="tumble"] .c2d-banner-slide.is-out-right{transform:translate3d(80%,0,-80px) rotateY(-48deg) rotateZ(8deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="page"] .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,0) rotateY(82deg) scale(.82) !important;}
.c2d-phone-banner[data-transition="page"] .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,0) rotateY(-82deg) scale(.82) !important;}
.c2d-phone-banner[data-transition="page"] .c2d-banner-slide.is-out-left{transform:translate3d(-90%,0,0) rotateY(82deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="page"] .c2d-banner-slide.is-out-right{transform:translate3d(90%,0,0) rotateY(-82deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="cascade"] .c2d-banner-slide.is-in-left{transform:translate3d(-105%,18px,-20px) rotateY(25deg) rotateZ(-3deg) scale(.78) !important;}
.c2d-phone-banner[data-transition="cascade"] .c2d-banner-slide.is-in-right{transform:translate3d(105%,18px,-20px) rotateY(-25deg) rotateZ(3deg) scale(.78) !important;}
.c2d-phone-banner[data-transition="cascade"] .c2d-banner-slide.is-out-left{transform:translate3d(-70%,-18px,-80px) rotateY(25deg) rotateZ(-3deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="cascade"] .c2d-banner-slide.is-out-right{transform:translate3d(70%,-18px,-80px) rotateY(-25deg) rotateZ(3deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="rotate"] .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,-20px) rotateY(55deg) rotateZ(-18deg) scale(.80) !important;}
.c2d-phone-banner[data-transition="rotate"] .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,-20px) rotateY(-55deg) rotateZ(18deg) scale(.80) !important;}
.c2d-phone-banner[data-transition="rotate"] .c2d-banner-slide.is-out-left{transform:translate3d(-65%,0,-90px) rotateY(55deg) rotateZ(-18deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="rotate"] .c2d-banner-slide.is-out-right{transform:translate3d(65%,0,-90px) rotateY(-55deg) rotateZ(18deg) scale(.72) !important;}
.c2d-phone-banner[data-transition="cute"] .c2d-banner-slide.is-in-left{transform:translate3d(-105%,12px,0) rotateZ(-6deg) scale(.82) !important;}
.c2d-phone-banner[data-transition="cute"] .c2d-banner-slide.is-in-right{transform:translate3d(105%,12px,0) rotateZ(6deg) scale(.82) !important;}
.c2d-phone-banner[data-transition="cute"] .c2d-banner-slide.is-out-left{transform:translate3d(-62%,-12px,0) rotateZ(-6deg) scale(.78) !important;}
.c2d-phone-banner[data-transition="cute"] .c2d-banner-slide.is-out-right{transform:translate3d(62%,-12px,0) rotateZ(6deg) scale(.78) !important;}
.c2d-phone-banner[data-transition="phone-cube-3d"] .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,-70px) rotateY(22deg) rotateX(3deg) scale(.82) !important;}
.c2d-phone-banner[data-transition="phone-cube-3d"] .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,-70px) rotateY(-22deg) rotateX(3deg) scale(.82) !important;}
.c2d-phone-banner[data-transition="phone-cube-3d"] .c2d-banner-slide.is-out-left{transform:translate3d(-70%,0,-110px) rotateY(32deg) rotateX(-4deg) scale(.70) !important;}
.c2d-phone-banner[data-transition="phone-cube-3d"] .c2d-banner-slide.is-out-right{transform:translate3d(70%,0,-110px) rotateY(-32deg) rotateX(-4deg) scale(.70) !important;}
.c2d-phone-banner[data-transition="reference-3d"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-transition="smooth-slide"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-transition="perspective"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-transition="zoom"] .c2d-banner-slide.is-in-left,
.c2d-phone-banner[data-transition="coverflow"] .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,-20px) rotateY(10deg) scale(.94) !important;}
.c2d-phone-banner[data-transition="reference-3d"] .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-transition="smooth-slide"] .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-transition="perspective"] .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-transition="zoom"] .c2d-banner-slide.is-in-right,
.c2d-phone-banner[data-transition="coverflow"] .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,-20px) rotateY(-10deg) scale(.94) !important;}

/* ================================================================
   V34.9 REQUESTED FINAL PASS — BANNER / BRAND / PRODUCT / CART
   Presentation-only overrides. Existing data and APIs remain intact.
   ================================================================ */

/* ---------- Banner: true two-zone, no card shell, no dead space ---------- */
.c2d-phone-banner{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.c2d-phone-banner-stage{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  overflow:hidden!important;
}
.c2d-phone-banner .c2d-banner-card-viewport{
  position:absolute!important;
  left:50%!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:auto!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
}
.c2d-phone-banner .c2d-banner-card-track{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
.c2d-phone-banner .c2d-banner-slide{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(28px,4vw,60px) clamp(24px,4vw,64px) 72px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.c2d-phone-banner .c2d-banner-slide::before{display:none!important}
.c2d-phone-banner .c2d-banner-slide-copy{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
}
.c2d-phone-banner .c2d-banner-slide-h1,
.c2d-phone-banner .c2d-banner-slide-h2,
.c2d-phone-banner .c2d-banner-slide-address,
.c2d-phone-banner .c2d-banner-slide-url{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important}

/* Fixed logo: consumes the complete left half with no artificial panel/padding. */
.c2d-phone-banner .c2d-banner-fixed-logo,
body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  width:50%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  z-index:20!important;
}
.c2d-phone-banner .c2d-banner-fixed-logo .c2d-logo-halo{display:none!important}
.c2d-phone-banner .c2d-banner-fixed-logo img,
.c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}

/* Media slides fill the complete content half; no card, border or inset. */
.c2d-phone-banner .c2d-banner-slide-replacement-image,
.c2d-phone-banner .c2d-banner-slide-replacement-video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:hidden!important;
  display:block!important;
  z-index:3!important;
}
.c2d-phone-banner .c2d-banner-slide-replacement-image img,
.c2d-phone-banner .c2d-banner-slide-replacement-video video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  filter:none!important;
}

/* ---------- Dots: advanced centered controls on the complete banner ---------- */
.c2d-phone-banner .c2d-phone-banner-dots{
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  width:max-content!important;
  z-index:50!important;
  pointer-events:auto!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{
  width:10px!important;
  height:10px!important;
  min-width:10px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:999px!important;
  background:rgba(95,119,140,.38)!important;
  cursor:pointer!important;
  box-shadow:0 3px 12px rgba(0,0,0,.16)!important;
  transition:width .25s ease,transform .25s ease,background .25s ease,box-shadow .25s ease!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot:hover{transform:scale(1.25)!important}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot.active{
  width:28px!important;
  background:#08b9ff!important;
  border-color:#08b9ff!important;
  box-shadow:0 0 0 4px rgba(8,185,255,.14),0 0 22px rgba(8,185,255,.35)!important;
}
body[data-theme="light"] .c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{border-color:rgba(15,48,78,.22)!important;background:rgba(15,48,78,.18)!important}
body[data-theme="light"] .c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot.active{background:#079fe0!important;border-color:#079fe0!important}

/* ---------- Brand slider: 3D hover only; dimensions/spacing remain unchanged ---------- */
.brand-strip .marquee-group > span{
  transform:perspective(700px) rotateX(0deg) rotateY(0deg) translateZ(0)!important;
  transform-style:preserve-3d!important;
  will-change:transform!important;
}
@media (hover:hover) and (pointer:fine){
  .brand-strip .marquee-group > span:hover{
    transform:perspective(700px) rotateX(-5deg) rotateY(8deg) translateY(-5px) translateZ(12px)!important;
    box-shadow:0 18px 36px rgba(6,182,255,.24),0 0 24px rgba(6,182,255,.14)!important;
  }
  .brand-strip .marquee-group > span:nth-child(3n+2):hover{
    transform:perspective(700px) rotateX(5deg) rotateY(-8deg) translateY(-5px) translateZ(12px)!important;
  }
}

/* ---------- Product cards: only the main image is shown; second image appears on hover ---------- */
.product-card-related-images{display:none!important}
.product-card{cursor:pointer}
.product-thumb{cursor:pointer!important}
.product-thumb img[data-hover-src]{transition:opacity .16s ease,transform .22s ease!important}
@media (hover:hover) and (pointer:fine){
  .product-thumb img[data-hover-src]:hover{transform:scale(1.015)!important}
}

/* ---------- Cart: close control and fast, stable action layout ---------- */
.cart-head{position:relative!important;min-height:58px!important}
.cart-close{
  width:36px!important;height:36px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid var(--border)!important;border-radius:50%!important;background:var(--bg-alt)!important;color:var(--text)!important;
  font-size:18px!important;font-weight:900!important;line-height:1!important;cursor:pointer!important;flex:0 0 36px!important;
  opacity:1!important;visibility:visible!important;transition:transform .12s ease,background .12s ease!important;
}
.cart-close:hover{transform:scale(1.05)!important;background:var(--card)!important}
.cart-foot{display:flex!important;flex-direction:column!important;gap:8px!important}
.cart-foot .cart-total-row{margin:0!important}
.cart-foot .btn{margin:0!important;min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;white-space:normal!important}
.cart-foot .btn-wa-icon,[data-icon="whatsapp"]{flex:0 0 auto}

/* ---------- Remove avoidable site-wide mobile dead space ---------- */
@media (max-width:900px){
  .hero{padding-top:0!important;padding-bottom:14px!important}
  .banner-wrap.c2d-phone-banner{margin-top:0!important;margin-bottom:14px!important}
  .brand-strip{margin-top:0!important;margin-bottom:0!important}
  section{scroll-margin-top:70px}
}

/* ---------- Responsive banner zones ---------- */
@media (max-width:1100px) and (min-width:761px){
  .c2d-phone-banner{height:var(--c2d-banner-tablet-height,500px)!important;min-height:var(--c2d-banner-tablet-height,500px)!important}
  .c2d-phone-banner .c2d-banner-fixed-logo{width:50%!important;height:100%!important}
  .c2d-phone-banner .c2d-banner-card-viewport{left:50%!important;right:0!important}
  .c2d-phone-banner .c2d-banner-slide{padding:30px 30px 66px!important}
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:clamp(32px,4.7vw,56px)!important}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:clamp(16px,2.1vw,26px)!important}
}
@media (max-width:760px){
  .c2d-phone-banner{
    height:clamp(540px,142vw,720px)!important;
    min-height:clamp(540px,142vw,720px)!important;
    border-radius:14px!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo,
  body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo{
    left:0!important;right:auto!important;top:0!important;bottom:auto!important;
    width:100%!important;height:38%!important;max-width:none!important;max-height:none!important;
  }
  .c2d-phone-banner .c2d-banner-card-viewport{
    left:0!important;right:0!important;top:38%!important;bottom:0!important;width:100%!important;height:62%!important;
  }
  .c2d-phone-banner .c2d-banner-slide{
    padding:22px 18px 54px!important;align-items:flex-start!important;justify-content:center!important;text-align:center!important;
  }
  .c2d-phone-banner .c2d-banner-slide-copy,
  body.lang-ur .c2d-phone-banner .c2d-banner-slide-copy{
    width:100%!important;max-width:100%!important;align-items:center!important;text-align:center!important;direction:inherit!important;
  }
  .c2d-phone-banner .c2d-banner-slide-url,
  .c2d-phone-banner .c2d-banner-slide-h1,
  .c2d-phone-banner .c2d-banner-slide-h2,
  .c2d-phone-banner .c2d-banner-slide-address{text-align:center!important;width:100%!important;max-width:100%!important}
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:clamp(24px,7.2vw,40px)!important;line-height:1.04!important}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:clamp(14px,4vw,20px)!important;line-height:1.2!important}
  .c2d-phone-banner .c2d-banner-slide-address{font-size:clamp(9px,2.5vw,12px)!important;line-height:1.42!important}
  .c2d-phone-banner .c2d-banner-slide-url{font-size:clamp(11px,3vw,14px)!important}
  .c2d-phone-banner .c2d-banner-slide-accent{width:100%!important;height:3px!important}
  .c2d-phone-banner .c2d-phone-banner-dots{bottom:9px!important}
}
@media (max-width:420px){
  .c2d-phone-banner{height:600px!important;min-height:600px!important}
  .c2d-phone-banner .c2d-banner-fixed-logo{height:36%!important}
  .c2d-phone-banner .c2d-banner-card-viewport{top:36%!important;height:64%!important}
  .c2d-phone-banner .c2d-banner-slide{padding:18px 12px 50px!important}
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:24px!important}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:13px!important}
  .c2d-phone-banner .c2d-banner-slide-address{font-size:9px!important}
}

/* Video preview in Admin Banner Studio */
.c2d-banner-studio-preview video{width:100%;height:100%;object-fit:cover;display:block}

/* Both languages: keep the requested order below the banner — Karachi text first, then Same Day Repair visual. */
@media (min-width:901px){
  body.lang-ur .hero-content{grid-column:1!important;grid-row:1!important;direction:rtl!important;text-align:right!important}
  body.lang-ur .hero-visual{grid-column:2!important;grid-row:1!important}
}
/* Theme/language switch safety: active banner content must never inherit blur/fade filters. */
.c2d-phone-banner .c2d-banner-slide.is-current,
.c2d-phone-banner .c2d-banner-slide.is-current .c2d-banner-slide-copy,
.c2d-phone-banner .c2d-banner-slide.is-current img,
.c2d-phone-banner .c2d-banner-slide.is-current video{
  filter:none!important;
}
.c2d-phone-banner .c2d-banner-slide.is-current{opacity:1!important;visibility:visible!important}

/* =========================================================
   C2D FINAL CARRY-ON SAFETY OVERRIDES
   Only the requested Banner / Product / Cart presentation fixes.
   ========================================================= */
.c2d-phone-banner{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  min-height:420px!important;
}
.c2d-phone-banner .c2d-phone-banner-stage{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:inherit!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
/* Both languages: logo is ALWAYS on the right; the slider occupies the left. */
.c2d-phone-banner .c2d-banner-fixed-logo,
body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo,
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-fixed-logo{
  position:absolute!important;
  top:0!important; right:0!important; left:auto!important; bottom:0!important;
  width:50%!important; height:100%!important;
  margin:0!important; padding:0!important;
  transform:none!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  overflow:hidden!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  background:transparent!important;
  z-index:20!important;
}
.c2d-phone-banner .c2d-banner-fixed-logo img,
.c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
  display:block!important;
  width:100%!important; height:100%!important;
  max-width:none!important; max-height:none!important;
  margin:0!important; padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important; -webkit-filter:none!important;
}
/* Keep the text slider fully inside the left half and never under the logo. */
.c2d-phone-banner .c2d-banner-card-viewport{
  position:absolute!important;
  top:0!important; left:0!important; right:50%!important; bottom:0!important;
  width:auto!important; height:100%!important;
  margin:0!important; padding:0!important;
  overflow:hidden!important; z-index:10!important;
}
.c2d-phone-banner .c2d-banner-card-track{position:relative!important;width:100%!important;height:100%!important;overflow:hidden!important;}
.c2d-phone-banner .c2d-banner-slide{
  position:absolute!important; inset:0!important;
  width:100%!important; height:100%!important; min-height:0!important;
  padding:clamp(22px,4vw,58px) clamp(18px,4vw,56px) 58px!important;
  margin:0!important; box-sizing:border-box!important;
  border:0!important; border-radius:0!important; box-shadow:none!important;
  background:transparent!important;
  overflow:hidden!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  opacity:0!important; visibility:hidden!important; z-index:0!important;
  transition:transform var(--c2d-banner-duration,700ms) var(--c2d-banner-ease,cubic-bezier(.22,.72,.18,1)),opacity var(--c2d-banner-duration,700ms) ease,visibility 0s linear var(--c2d-banner-duration,700ms)!important;
  will-change:transform,opacity!important;
}
.c2d-phone-banner .c2d-banner-slide::before{display:none!important}
.c2d-phone-banner .c2d-banner-slide.is-current{transform:translate3d(0,0,0)!important;opacity:1!important;visibility:visible!important;z-index:12!important;}
.c2d-phone-banner .c2d-banner-slide.is-hidden{opacity:0!important;visibility:hidden!important;z-index:0!important;}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,-40px) rotateY(8deg) scale(.94)!important;opacity:1!important;visibility:visible!important;z-index:11!important;}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-out-right{transform:translate3d(105%,0,-70px) rotateY(-10deg) scale(.92)!important;opacity:0!important;visibility:visible!important;z-index:10!important;}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,-40px) rotateY(-8deg) scale(.94)!important;opacity:1!important;visibility:visible!important;z-index:11!important;}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-slide.is-out-left{transform:translate3d(-105%,0,-70px) rotateY(10deg) scale(.92)!important;opacity:0!important;visibility:visible!important;z-index:10!important;}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-in-right{transform:translate3d(105%,0,-40px) rotateY(-8deg) scale(.94)!important;opacity:1!important;visibility:visible!important;z-index:11!important;}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-out-left{transform:translate3d(-105%,0,-70px) rotateY(10deg) scale(.92)!important;opacity:0!important;visibility:visible!important;z-index:10!important;}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-in-left{transform:translate3d(-105%,0,-40px) rotateY(8deg) scale(.94)!important;opacity:1!important;visibility:visible!important;z-index:11!important;}
body.lang-ur .c2d-phone-banner .c2d-banner-slide.is-out-right{transform:translate3d(105%,0,-70px) rotateY(-10deg) scale(.92)!important;opacity:0!important;visibility:visible!important;z-index:10!important;}
.c2d-phone-banner .c2d-banner-slide-copy{
  position:relative!important;width:100%!important;max-width:100%!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;direction:ltr!important;overflow:visible!important;
  filter:none!important;-webkit-filter:none!important;
}
body.lang-ur .c2d-phone-banner .c2d-banner-slide-copy{direction:rtl!important;}
.c2d-phone-banner .c2d-banner-slide-h1,
.c2d-phone-banner .c2d-banner-slide-h2,
.c2d-phone-banner .c2d-banner-slide-address,
.c2d-phone-banner .c2d-banner-slide-url{
  width:100%!important;max-width:100%!important;min-width:0!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  opacity:1!important;visibility:visible!important;filter:none!important;
  text-shadow:none!important;
}
.c2d-phone-banner .c2d-banner-slide-h1{font-size:clamp(30px,4.3vw,58px)!important;line-height:1.05!important;margin:0 0 8px!important;}
.c2d-phone-banner .c2d-banner-slide-h2{font-size:clamp(16px,2.1vw,28px)!important;line-height:1.22!important;margin:0!important;}
.c2d-phone-banner .c2d-banner-slide-accent{width:min(78%,290px)!important;height:4px!important;margin:10px auto!important;flex:0 0 auto!important;}
.c2d-phone-banner .c2d-banner-slide-address{font-size:clamp(10px,1.25vw,15px)!important;line-height:1.4!important;margin:0 0 4px!important;overflow-wrap:anywhere!important;}
.c2d-phone-banner .c2d-banner-slide-url{font-size:clamp(14px,1.7vw,22px)!important;line-height:1.2!important;margin:3px 0 0!important;}
/* Dots: one exact centered row at the bottom of the full banner. */
.c2d-phone-banner .c2d-phone-banner-dots{
  position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:10px!important;
  transform:translateX(-50%)!important;width:max-content!important;height:22px!important;min-height:22px!important;
  margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  gap:9px!important;z-index:60!important;pointer-events:auto!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{display:block!important;opacity:1!important;visibility:visible!important;}
/* Product: warranty sits between title and description; Sold Out keeps its existing badge position. */
.product-warranty-inline{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-height:20px!important;margin:2px 0 8px!important;
  color:#16b86a!important;font-size:11px!important;font-weight:800!important;line-height:1.25!important;
  text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;
}
.product-warranty-inline:empty{display:none!important;}
.sold-badge-inline{position:relative!important;z-index:4!important;}
/* Cart action row is rendered immediately and remains visible. */
.cart-foot .btn-whatsapp,.cart-foot .btn-whatsapp .btn-wa-icon,.cart-foot .btn-whatsapp .btn-wa-icon svg{opacity:1!important;visibility:visible!important;display:flex!important;}
.cart-foot .btn-whatsapp{align-items:center!important;justify-content:center!important;gap:8px!important;}
.cart-close{opacity:1!important;visibility:visible!important;position:relative!important;z-index:100!important;}

@media (max-width:1100px) and (min-width:761px){
  .c2d-phone-banner{min-height:420px!important;height:420px!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo{width:50%!important;}
  .c2d-phone-banner .c2d-banner-card-viewport{right:50%!important;}
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:clamp(28px,4.5vw,48px)!important;}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:clamp(15px,2.2vw,24px)!important;}
}
@media (max-width:760px){
  .c2d-phone-banner{height:clamp(300px,78vw,440px)!important;min-height:300px!important;max-height:440px!important;border-radius:14px!important;}
  .c2d-phone-banner .c2d-phone-banner-stage{height:100%!important;min-height:0!important;display:block!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo{top:0!important;right:0!important;left:auto!important;bottom:0!important;width:50%!important;height:100%!important;border-radius:0!important;}
  .c2d-phone-banner .c2d-banner-card-viewport{top:0!important;left:0!important;right:50%!important;bottom:0!important;width:auto!important;height:100%!important;}
  .c2d-phone-banner .c2d-banner-slide{padding:30px 10px 38px!important;}
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:clamp(18px,5.2vw,30px)!important;line-height:1.08!important;margin-bottom:6px!important;}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:clamp(11px,3.2vw,18px)!important;line-height:1.22!important;}
  .c2d-phone-banner .c2d-banner-slide-accent{width:82%!important;height:3px!important;margin:6px auto!important;}
  .c2d-phone-banner .c2d-banner-slide-address{font-size:clamp(7px,2vw,11px)!important;line-height:1.35!important;margin-bottom:2px!important;}
  .c2d-phone-banner .c2d-banner-slide-url{font-size:clamp(10px,2.8vw,15px)!important;line-height:1.15!important;}
  .c2d-phone-banner .c2d-phone-banner-dots{bottom:6px!important;gap:7px!important;}
  .c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{width:9px!important;height:9px!important;min-width:9px!important;}
  .c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot.active{width:24px!important;}
  .product-warranty-inline{font-size:10.5px!important;margin:1px 0 7px!important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:320px!important;min-height:320px!important;}
  .c2d-phone-banner .c2d-banner-slide{padding:26px 7px 34px!important;}
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:19px!important;}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:11px!important;}
  .c2d-phone-banner .c2d-banner-slide-address{font-size:7.5px!important;}
  .c2d-phone-banner .c2d-banner-slide-url{font-size:10px!important;}
}

/* =========================================================
   FINAL MOBILE-FOCUS REQUESTED FIXES — CURRENT CARRY-ON ONLY
   ========================================================= */

/* Cart: close control must be painted immediately and remain above the drawer. */
.cart-drawer .cart-head{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:58px!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  z-index:20!important;
}
.cart-drawer .cart-head h3{
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
}
.cart-drawer .cart-close,
#cartClose{
  position:relative!important;
  z-index:10000!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--border)!important;
  border-radius:50%!important;
  background:var(--bg-alt)!important;
  color:var(--text)!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  transition:none!important;
  pointer-events:auto!important;
}
.cart-drawer.open #cartClose{opacity:1!important;visibility:visible!important;display:inline-flex!important;}

/* Cart footer: WhatsApp icon + text are one immediately-painted unit. */
.cart-drawer .cart-foot #checkoutBtn,
.cart-drawer .cart-foot #checkoutBtn .btn-wa-icon,
.cart-drawer .cart-foot #checkoutBtn .btn-wa-icon svg,
.cart-drawer .cart-foot #checkoutBtn > span:last-child{
  opacity:1!important;
  visibility:visible!important;
  display:inline-flex!important;
  animation:none!important;
  transition:none!important;
  transform:none!important;
  filter:none!important;
  content-visibility:visible!important;
}
.cart-drawer .cart-foot #checkoutBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:46px!important;
  width:100%!important;
  white-space:normal!important;
}

/* Product meta row: exact requested order — Laptops | Warranty | Sold Out — centered. */
.product-meta-center-row{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:0 0 8px!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.2!important;
}
.product-meta-center-row .product-cat,
.product-meta-center-row .product-warranty-inline,
.product-meta-center-row .sold-badge-inline{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
}
.product-meta-center-row .product-cat{
  color:var(--blue)!important;
  font-size:11px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.35px!important;
}
.product-meta-center-row .product-warranty-inline{
  min-height:0!important;
  color:#16b86a!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.product-meta-center-row .sold-badge-inline{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  color:#fff!important;
  background:linear-gradient(135deg,#ff5b6e,#c9253c)!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.2!important;
  padding:3px 9px!important;
  border:0!important;
  border-radius:999px!important;
  letter-spacing:.4px!important;
  text-transform:uppercase!important;
  box-shadow:0 4px 10px rgba(201,37,60,.25)!important;
}

/* Mobile banner: logo is on its own upper row and slider text is below it. */
@media (max-width:760px){
  .c2d-phone-banner{
    height:clamp(500px,132vw,680px)!important;
    min-height:clamp(500px,132vw,680px)!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-phone-banner-stage{
    display:block!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo,
  body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-fixed-logo{
    top:0!important;
    right:0!important;
    left:0!important;
    bottom:auto!important;
    width:100%!important;
    height:40%!important;
    max-width:none!important;
    max-height:none!important;
    z-index:20!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    max-width:none!important;
    max-height:none!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .c2d-phone-banner .c2d-banner-card-viewport{
    top:40%!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:60%!important;
    z-index:10!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-card-track,
  .c2d-phone-banner .c2d-banner-slide{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-slide-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:12px 16px 48px!important;
    box-sizing:border-box!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
  }
  .c2d-phone-banner .c2d-banner-slide-h1,
  .c2d-phone-banner .c2d-banner-slide-h2,
  .c2d-phone-banner .c2d-banner-slide-address,
  .c2d-phone-banner .c2d-banner-slide-url{
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
    text-shadow:none!important;
    overflow:visible!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:clamp(23px,6.4vw,38px)!important;line-height:1.08!important;margin:0 0 8px!important;}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:clamp(13px,3.9vw,20px)!important;line-height:1.24!important;margin:0!important;}
  .c2d-phone-banner .c2d-banner-slide-accent{width:min(82%,290px)!important;height:3px!important;margin:8px auto!important;}
  .c2d-phone-banner .c2d-banner-slide-address{font-size:clamp(9px,2.6vw,12px)!important;line-height:1.42!important;margin:0 0 5px!important;}
  .c2d-phone-banner .c2d-banner-slide-url{font-size:clamp(12px,3.2vw,16px)!important;line-height:1.2!important;margin:2px 0 0!important;}
  .c2d-phone-banner .c2d-phone-banner-dots{left:50%!important;right:auto!important;bottom:7px!important;top:auto!important;transform:translateX(-50%)!important;z-index:60!important;}
}
@media (max-width:420px){
  .c2d-phone-banner{height:540px!important;min-height:540px!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo{height:39%!important;}
  .c2d-phone-banner .c2d-banner-card-viewport{top:39%!important;height:61%!important;}
  .c2d-phone-banner .c2d-banner-slide-copy{padding:8px 12px 44px!important;}
  .c2d-phone-banner .c2d-banner-slide-h1{font-size:22px!important;}
  .c2d-phone-banner .c2d-banner-slide-h2{font-size:13px!important;}
  .c2d-phone-banner .c2d-banner-slide-address{font-size:9px!important;}
  .c2d-phone-banner .c2d-banner-slide-url{font-size:12px!important;}
  .product-meta-center-row{gap:5px!important;margin-bottom:7px!important;}
  .product-meta-center-row .product-cat,.product-meta-center-row .product-warranty-inline,.product-meta-center-row .sold-badge-inline{font-size:10px!important;}
}

/* Urdu hero content remains before the Same Day Repair visual on phones. */
@media (max-width:900px){
  body.lang-ur .hero-grid{display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  body.lang-ur .hero-content{order:1!important;}
  body.lang-ur .hero-visual{order:2!important;}
}

/* =========================================================
   C2D — EXACT REQUESTED-ONLY FINAL TARGETED FIXES
   No unrelated component/layout changes.
   ========================================================= */

/* Product meta: Laptops | 1 Yr Warranty | Sold Out — one row only. */
.product-meta-center-row{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(10px,2.2vw,22px)!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.product-meta-center-row .product-cat,
.product-meta-center-row .product-warranty-inline,
.product-meta-center-row .sold-badge-inline{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.product-meta-center-row .product-cat{font-size:11px!important;}
.product-meta-center-row .product-warranty-inline{font-size:11px!important;}
.product-meta-center-row .sold-badge-inline{font-size:10px!important;}

/* Banner dots: compact, centered, and kept below the logo area. */
.c2d-phone-banner .c2d-phone-banner-dots{
  gap:4px!important;
  bottom:9px!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  z-index:60!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{
  flex:0 0 auto!important;
}

/* H1 backlight is interaction-only; no permanent glow. */
.c2d-phone-banner .c2d-banner-slide-h1.c2d-banner-h1-glow{
  filter:drop-shadow(0 0 12px rgba(21,191,255,.70))!important;
  text-shadow:0 0 10px rgba(21,191,255,.45),0 0 28px rgba(105,92,255,.30)!important;
}

/* Cart close and WhatsApp button: paint immediately and stay clickable. */
.cart-drawer .cart-head #cartClose{
  opacity:1!important;
  visibility:visible!important;
  display:inline-flex!important;
  position:relative!important;
  z-index:10001!important;
}
.cart-drawer .cart-foot #checkoutBtn,
.cart-drawer .cart-foot #checkoutBtn > span,
.cart-drawer .cart-foot #checkoutBtn [data-icon="whatsapp"],
.cart-drawer .cart-foot #checkoutBtn [data-icon="whatsapp"] svg{
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
  transition:none!important;
  transform:none!important;
  filter:none!important;
}

/* Mobile banner: logo uses the full available width in its own row;
   text remains in a separate row below it. */
@media (max-width:760px){
  .c2d-phone-banner{
    position:relative!important;
    z-index:1!important;
    margin-top:8px!important;
    overflow:hidden!important;
    height:clamp(500px,145vw,760px)!important;
    min-height:clamp(500px,145vw,760px)!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo{
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    height:clamp(205px,66.7vw,420px)!important;
    aspect-ratio:1024 / 683!important;
    max-width:none!important;
    max-height:none!important;
    z-index:20!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .c2d-phone-banner .c2d-banner-card-viewport{
    top:clamp(205px,66.7vw,420px)!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:calc(100% - clamp(205px,66.7vw,420px))!important;
    z-index:10!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-slide-copy,
  .c2d-phone-banner .c2d-banner-slide-h1,
  .c2d-phone-banner .c2d-banner-slide-h2,
  .c2d-phone-banner .c2d-banner-slide-address,
  .c2d-phone-banner .c2d-banner-slide-url{
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
    -webkit-filter:none!important;
    text-rendering:geometricPrecision!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-slide{
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    will-change:transform,opacity!important;
  }
}

@media (max-width:420px){
  .product-meta-center-row{gap:5px!important;}
  .product-meta-center-row .product-cat,
  .product-meta-center-row .product-warranty-inline,
  .product-meta-center-row .sold-badge-inline{font-size:10px!important;}
  .c2d-phone-banner{
    height:clamp(500px,145vw,610px)!important;
    min-height:clamp(500px,145vw,610px)!important;
  }
  .c2d-phone-banner .c2d-phone-banner-dots{gap:3px!important;bottom:7px!important;}
}

/* C2D — THIS REQUEST ONLY: final targeted fixes */
.product-meta-center-row{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(8px,1.5vw,16px)!important;
  width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.product-meta-center-row .product-cat,
.product-meta-center-row .product-warranty-inline,
.product-meta-center-row .sold-badge-inline{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.product-meta-center-row .product-warranty-inline{min-height:0!important;}

/* Banner dots: slightly lower, compact and directly clickable. */
.c2d-phone-banner .c2d-phone-banner-dots{
  pointer-events:auto!important;
  gap:4px!important;
  bottom:3px!important;
  z-index:100!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Mobile banner: full-width logo area, kept below the sticky navbar in normal flow. */
@media(max-width:760px){
  .hero{padding-top:12px!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo{
    width:100%!important;
    margin:0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .c2d-phone-banner .c2d-phone-banner-dots{bottom:3px!important;gap:3px!important;}
  .product-meta-center-row{gap:8px!important;}
  .product-meta-center-row .product-cat,
  .product-meta-center-row .product-warranty-inline,
  .product-meta-center-row .sold-badge-inline{font-size:10px!important;}
}
@media(max-width:380px){
  .product-meta-center-row{gap:6px!important;}
  .product-meta-center-row .product-cat,
  .product-meta-center-row .product-warranty-inline,
  .product-meta-center-row .sold-badge-inline{font-size:9px!important;}
}

/* Cart close + WhatsApp text: immediate, centered, visible and clickable. */
.cart-drawer .cart-head{position:relative!important;overflow:visible!important;}
.cart-drawer .cart-head #cartClose{
  position:absolute!important;
  inset-inline-end:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:inline-flex!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:10001!important;
  pointer-events:auto!important;
}
.cart-drawer .cart-foot #checkoutBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  gap:8px!important;
}
.cart-drawer .cart-foot #checkoutBtn > span,
.cart-drawer .cart-foot #checkoutBtn [data-icon="whatsapp"],
.cart-drawer .cart-foot #checkoutBtn [data-icon="whatsapp"] svg{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
  transition:none!important;
  transform:none!important;
  filter:none!important;
}

/* Requested compact removal of the base section whitespace only. */
@media(min-width:1101px){section{padding-block:72px!important;}}
@media(min-width:761px) and (max-width:1100px){section{padding-block:58px!important;}}
@media(max-width:760px){section{padding-block:34px!important;}}
@media(max-width:420px){section{padding-block:30px!important;}}

/* REQUESTED-ONLY: preserve fixed banner logo when slider content is edited */
.c2d-banner-logo,.banner-logo,.hero-logo,.brand-logo{position:relative;z-index:30!important;transform:none}
.c2d-banner-slider,.banner-slider,.hero-slider{position:relative;z-index:20}
.c2d-banner-logo img,.banner-logo img,.hero-logo img,.brand-logo img{position:relative;z-index:31!important}
@media(max-width:600px){
 .c2d-banner-logo,.banner-logo,.hero-logo,.brand-logo{max-width:100%;width:100%;box-sizing:border-box;overflow:visible}
 .c2d-banner-logo img,.banner-logo img,.hero-logo img,.brand-logo img{max-width:100%;width:100%;height:auto;object-fit:contain}
}
/* REQUESTED-ONLY: cart close + WhatsApp text immediately visible */
.cart-popup .close,.cart-modal .close,.your-cart .close,.cart-popup .close-btn,.cart-modal .close-btn{z-index:9999!important;visibility:visible!important;opacity:1!important;display:flex!important;align-items:center;justify-content:center}
.order-whatsapp,.whatsapp-order,.order-via-whatsapp,.cart-popup .whatsapp-btn,.cart-modal .whatsapp-btn{visibility:visible!important;opacity:1!important;display:inline-flex!important;align-items:center;justify-content:center;animation:none!important}
/* REQUESTED-ONLY: equal mobile product top-line spacing */
@media(max-width:600px){.product-card .badges,.product-card .product-badges,.product-card .top-line,.product-card .product-top{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap}}

/* C2D requested-only visibility/alignment fixes */
.cart-drawer .cart-head{position:relative;z-index:20;}
.cart-drawer .cart-close{position:relative!important;z-index:30!important;display:inline-flex!important;visibility:visible!important;opacity:1!important;width:38px!important;height:38px!important;align-items:center!important;justify-content:center!important;flex:0 0 38px!important;color:var(--text)!important;background:var(--bg-alt)!important;border:1px solid var(--border)!important;border-radius:50%!important;font-size:22px!important;line-height:1!important;font-family:Arial,Helvetica,sans-serif!important;text-indent:0!important;}
.cart-drawer #checkoutBtn{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;opacity:1!important;visibility:visible!important;font-size:14px!important;line-height:1.2!important;}
.cart-drawer #checkoutBtn span{opacity:1!important;visibility:visible!important;display:inline-block!important;}
.cart-drawer #checkoutBtn .btn-wa-icon{display:inline-flex!important;opacity:1!important;visibility:visible!important;flex:0 0 auto!important;}

/* Product-page icons stay visible without changing their existing controls. */
.pd-wishlist-btn,.pd-wishlist-icon,.pd-share-btn{visibility:visible!important;opacity:1!important;}
.pd-wishlist-icon{display:inline-block!important;color:currentColor!important;font-family:Arial,Helvetica,sans-serif!important;}

/* Banner URL must remain visible above the slide surface. */
.c2d-phone-banner .c2d-banner-card-url{position:relative!important;z-index:25!important;opacity:1!important;visibility:visible!important;display:block!important;}

/* Compact, non-overlapping banner dots. */
.c2d-phone-banner-dots{gap:4px!important;bottom:8px!important;z-index:40!important;pointer-events:auto!important;}
.c2d-phone-banner-dots .c2d-banner-dot{pointer-events:auto!important;opacity:1!important;visibility:visible!important;}

/* Mobile banner logo: use the available banner width, stay below navbar, keep slider separate. */
@media(max-width:760px){
  .c2d-phone-banner{overflow:hidden!important;}
  .c2d-phone-banner-stage{overflow:hidden!important;padding-top:18px!important;}
  .c2d-banner-fixed-logo{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;order:-1!important;width:100%!important;height:clamp(150px,43vw,205px)!important;margin:10px 0 0!important;z-index:12!important;}
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;transform:scale(1.08)!important;transform-origin:center!important;}
  .c2d-banner-card-viewport{z-index:3!important;}
  .c2d-banner-card-url{opacity:1!important;visibility:visible!important;display:block!important;position:relative!important;z-index:50!important;}
  .c2d-phone-banner-dots{bottom:7px!important;gap:4px!important;}
  .cart-drawer .cart-close{width:40px!important;height:40px!important;font-size:23px!important;}
  .cart-drawer #checkoutBtn{min-height:46px!important;text-align:center!important;white-space:nowrap!important;}
}
@media(max-width:420px){
  .c2d-banner-fixed-logo{height:clamp(150px,48vw,190px)!important;margin-top:12px!important;}
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{transform:scale(1.12)!important;}
  .c2d-phone-banner-dots{bottom:6px!important;gap:3px!important;}
}

/* Same Day Repair chip: centered below the hero illustration, with no overlap. */
@media(max-width:760px){
  .hero-card .chip-1{top:auto!important;bottom:-18px!important;inset-inline-start:50%!important;inset-inline-end:auto!important;transform:translateX(-50%)!important;white-space:nowrap!important;z-index:8!important;}
}

/* Remove only excessive global section whitespace while preserving section structure. */
@media(min-width:1101px){section{padding-block:58px!important;}}
@media(min-width:761px) and (max-width:1100px){section{padding-block:48px!important;}}
@media(max-width:760px){section{padding-block:24px!important;}}
@media(max-width:420px){section{padding-block:20px!important;}}

/* REQUESTED-ONLY FINAL CART VISIBILITY FIX */
.cart-drawer .cart-head #cartClose,
.cart-drawer #cartClose.cart-close,
#cartClose.cart-close{
  position:absolute!important;
  inset-inline-end:12px!important;
  top:10px!important;
  z-index:99999!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  visibility:visible!important;
  opacity:1!important;
  color:var(--text)!important;
  background:var(--bg-alt)!important;
  border:1px solid var(--border)!important;
  border-radius:50%!important;
  font-size:0!important;
  line-height:1!important;
  overflow:visible!important;
  text-indent:-9999px!important;
  pointer-events:auto!important;
}
.cart-drawer .cart-head #cartClose::after,
.cart-drawer #cartClose.cart-close::after,
#cartClose.cart-close::after{
  content:"×"!important;
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:var(--text)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:28px!important;
  font-weight:700!important;
  line-height:1!important;
  text-indent:0!important;
  visibility:visible!important;
  opacity:1!important;
}
.cart-drawer .cart-foot #checkoutBtn,
.cart-drawer .cart-foot #checkoutBtn > span,
.cart-drawer .cart-foot #checkoutBtn .btn-wa-icon,
.cart-drawer .cart-foot #checkoutBtn .btn-wa-icon svg{
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
  transition:none!important;
  transform:none!important;
  filter:none!important;
}
.cart-drawer .cart-foot #checkoutBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
  min-height:46px!important;
}
.cart-drawer .cart-foot #checkoutBtn > span:last-child{
  display:inline-block!important;
  flex:0 1 auto!important;
  text-align:center!important;
  visibility:visible!important;
  opacity:1!important;
  white-space:nowrap!important;
}
@media(max-width:600px){
  .cart-drawer .cart-head{position:relative!important;padding:20px 58px 20px 20px!important;min-height:64px!important;}
  .cart-drawer .cart-head #cartClose{top:12px!important;inset-inline-end:12px!important;}
  .cart-drawer .cart-foot #checkoutBtn{width:100%!important;min-height:48px!important;padding-inline:12px!important;}
  .cart-drawer .cart-foot #checkoutBtn > span:last-child{font-size:14px!important;line-height:1.2!important;}
}

/* REQUESTED-ONLY FINAL: cart header/action alignment */
.cart-drawer .cart-head{
  align-items:center!important;
  min-height:58px!important;
  padding:12px 20px!important;
}
.cart-drawer .cart-head h3{
  margin:0!important;
  line-height:38px!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
.cart-drawer .cart-head #cartClose{
  top:50%!important;
  margin:0!important;
  transform:translateY(-50%)!important;
}
.cart-drawer .cart-foot #checkoutBtn{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.2!important;
  min-height:46px!important;
  font-size:inherit!important;
  font-family:inherit!important;
  white-space:nowrap!important;
}
.cart-drawer .cart-foot #checkoutBtn > span:not([data-icon]){
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
  transition:none!important;
  transform:none!important;
}

/* Keep the existing cart action dimensions; only make its WhatsApp label
   paint immediately when the Navbar cart button is touched. */
.cart-drawer .cart-foot #checkoutBtn,
.cart-drawer .cart-foot #checkoutBtn *{
  content-visibility:visible!important;
  contain:none!important;
  opacity:1!important;
  visibility:visible!important;
  transition-property:none!important;
  animation:none!important;
}
.cart-drawer .cart-foot #checkoutBtn [data-icon="whatsapp"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
  transition:none!important;
}

/* REQUESTED-ONLY FINAL: second-page purchase buttons split evenly and center their labels */
.product-detail-page .pd-sticky-buy-actions{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.product-detail-page .pd-sticky-buy-actions .btn{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  padding-inline:8px!important;
}
.product-detail-page .pd-sticky-buy-actions .btn > span{
  display:inline-block!important;
  text-align:center!important;
  flex:0 1 auto!important;
}
.product-detail-page .pd-sticky-buy-actions .btn:first-child{
  justify-self:stretch!important;
}
.product-detail-page .pd-sticky-buy-actions .btn:last-child{
  justify-self:stretch!important;
}

/* Keep the normal second-page Add to Cart / WhatsApp labels centered too. */
.product-detail-page .pd-actions .btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.product-detail-page .pd-actions .btn > span{
  text-align:center!important;
}

/* C2D requested landing-page refinements: centered banner dots, contained logo,
   top Same Day badge and a touch-friendly 3D brand effect. */
.c2d-phone-banner{position:relative!important;overflow:hidden!important;}
.c2d-phone-banner-stage{overflow:hidden!important;}
.c2d-phone-banner .c2d-phone-banner-dots{
  left:50%!important;right:auto!important;bottom:14px!important;transform:translateX(-50%)!important;
  z-index:60!important;display:flex!important;align-items:center!important;justify-content:center!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{
  opacity:1!important;visibility:visible!important;transition:width .25s ease,transform .25s ease,background .25s ease,box-shadow .25s ease!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot.active{
  animation:c2d-banner-dot-light .85s ease-in-out infinite alternate!important;
}
@keyframes c2d-banner-dot-light{from{box-shadow:0 0 0 3px rgba(8,185,255,.14),0 0 10px rgba(8,185,255,.3)}to{box-shadow:0 0 0 6px rgba(8,185,255,.1),0 0 28px rgba(8,185,255,.78)}}

.c2d-banner-fixed-logo,.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{
  border-radius:0!important;clip-path:none!important;box-sizing:border-box!important;
}
.c2d-banner-fixed-logo{max-width:calc(100% - 24px)!important;max-height:calc(100% - 24px)!important;overflow:hidden!important;}
.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{
  max-width:100%!important;max-height:100%!important;object-fit:contain!important;transform:none!important;
}

.brand-strip .marquee-group > span{
  transform-style:preserve-3d!important;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease!important;
}
.brand-strip .marquee-group > span:hover,.brand-strip .marquee-group > span:focus-visible,.brand-strip .marquee-group > span:active,.brand-strip .marquee-group > span.c2d-tap-glow{
  transform:perspective(700px) rotateX(-5deg) rotateY(8deg) translateY(-5px) translateZ(12px)!important;
  box-shadow:0 18px 36px rgba(6,182,255,.24),0 0 24px rgba(6,182,255,.14)!important;
}

@media(max-width:760px){
  .c2d-phone-banner .c2d-phone-banner-dots{bottom:8px!important;}
  .c2d-banner-fixed-logo{width:calc(100% - 28px)!important;max-width:calc(100% - 28px)!important;height:clamp(138px,40vw,190px)!important;margin:10px auto 0!important;}
  .c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:100%!important;height:100%!important;transform:none!important;}
  .hero-card .chip-1{top:7px!important;bottom:auto!important;inset-inline-start:50%!important;inset-inline-end:auto!important;transform:translateX(-50%)!important;z-index:12!important;white-space:nowrap!important;}
  .hero-card > p{position:relative!important;z-index:9!important;display:block!important;visibility:visible!important;opacity:1!important;}
}

/* C2D landing-page banner: final responsive alignment from the supplied mobile
   reference. The logo has no internal side gap, remains clipped inside its
   own box, and desktop dots stay centered under the slider (not the logo). */
.c2d-phone-banner .c2d-phone-banner-dots{
  left:var(--c2d-banner-dots-slider-left,75%)!important;
  bottom:var(--c2d-banner-dots-bottom,14px)!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot{
  border:1px solid color-mix(in srgb,var(--blue) 60%,#fff)!important;
  box-shadow:0 0 0 2px rgba(6,182,255,.12),0 0 10px rgba(6,182,255,.22)!important;
}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot:nth-child(4n+1){background:#22d3ee!important;}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot:nth-child(4n+2){background:#8b5cf6!important;}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot:nth-child(4n+3){background:#f59e0b!important;}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot:nth-child(4n){background:#ec4899!important;}
.c2d-phone-banner .c2d-phone-banner-dots .c2d-banner-dot.active{
  box-shadow:0 0 0 4px rgba(6,182,255,.22),0 0 22px rgba(6,182,255,.78)!important;
  animation:c2d-banner-dot-multi-light .9s ease-in-out infinite alternate!important;
}
@keyframes c2d-banner-dot-multi-light{
  0%{filter:brightness(1);box-shadow:0 0 0 4px rgba(34,211,238,.22),0 0 22px rgba(34,211,238,.82);}
  50%{filter:brightness(1.25);box-shadow:0 0 0 4px rgba(139,92,246,.25),0 0 25px rgba(139,92,246,.9);}
  100%{filter:brightness(1.12);box-shadow:0 0 0 4px rgba(236,72,153,.22),0 0 22px rgba(236,72,153,.82);}
}

@media(max-width:760px){
  .c2d-phone-banner .c2d-phone-banner-dots{
    left:50%!important;
    bottom:8px!important;
  }
  .c2d-phone-banner-stage{padding-top:0!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo,
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    border-radius:0!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo{
    left:0!important;
    right:0!important;
    top:0!important;
    width:100%!important;
    max-width:100%!important;
    height:clamp(205px,66.7vw,420px)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
  }
  .hero-card{
    padding-top:48px!important;
  }
  .hero-card .chip-1,
  .hero-card .chip-2{
    top:8px!important;
    bottom:auto!important;
    max-width:calc(50% - 8px)!important;
    min-width:0!important;
    margin:0!important;
    padding:6px 8px!important;
    font-size:10px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    transform:none!important;
    z-index:12!important;
  }
  .hero-card .chip-1{inset-inline-end:6px!important;inset-inline-start:auto!important;}
  .hero-card .chip-2{inset-inline-start:6px!important;inset-inline-end:auto!important;}
  .hero-card > p{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
}
@media(max-width:380px){
 .hero-card .chip-1,.hero-card .chip-2{font-size:9px!important;padding:5px 6px!important;}
 .hero-card .float-chip .chip-ic{width:20px!important;height:20px!important;min-width:20px!important;}
}

/* Mobile badge positions: match the requested English and Urdu placements
   without hiding the certified technician line. */
@media(max-width:760px){
  .hero-card{padding-top:48px!important;padding-bottom:48px!important;}
  .hero-card .chip-1{top:8px!important;bottom:auto!important;right:6px!important;left:auto!important;inset-inline-start:auto!important;inset-inline-end:auto!important;transform:none!important;}
  .hero-card .chip-2{top:auto!important;bottom:8px!important;left:6px!important;right:auto!important;inset-inline-start:auto!important;inset-inline-end:auto!important;transform:none!important;}
  html[dir="rtl"] .hero-card .chip-1{left:6px!important;right:auto!important;}
  html[dir="rtl"] .hero-card .chip-2{left:6px!important;right:auto!important;}
}

/* C2D ZIP 9 — requested landing-page layout corrections only. */
.c2d-phone-banner .c2d-banner-slide-replacement-image,
.c2d-phone-banner .c2d-banner-slide-replacement-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:transparent!important;}
.c2d-phone-banner .c2d-banner-slide-replacement-image img,
.c2d-phone-banner .c2d-banner-slide-replacement-video video{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;opacity:1!important;visibility:visible!important;}
.c2d-phone-banner .c2d-banner-slide-replacement-video video{background:#000!important;}

/* Featured arrows are aligned with the circle images, not the lower labels. */
.circle-carousel{position:relative!important;padding-inline:54px!important;}
.circle-carousel-btn{position:absolute!important;top:32%!important;z-index:8!important;}
.circle-carousel-btn.prev{left:0!important;}
.circle-carousel-btn.next{right:0!important;}
.circle-carousel-btn:hover{transform:translateY(-50%) scale(1.06)!important;}

/* The checkout cross remains clear in the light theme and on laptops. */
#checkoutClose.cart-close{color:#142033!important;background:#fff!important;border:1px solid #cbd5e1!important;font-family:Arial,Helvetica,sans-serif!important;font-size:27px!important;font-weight:900!important;line-height:1!important;text-indent:0!important;opacity:1!important;visibility:visible!important;}
body[data-theme="dark"] #checkoutClose.cart-close{color:#fff!important;background:#172033!important;border-color:rgba(255,255,255,.35)!important;}

/* Remove only the excess gap before Featured Products. */
#featured{padding-top:34px!important;}
#featured .section-head{margin-bottom:16px!important;}

@media(max-width:760px){
  /* The complete logo—including the Computer 2 Day text—uses its own uncropped row. */
  .c2d-phone-banner{height:clamp(480px,132vw,620px)!important;min-height:clamp(480px,132vw,620px)!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo{top:0!important;left:0!important;right:0!important;bottom:auto!important;width:100%!important;height:40%!important;margin:0!important;overflow:hidden!important;z-index:20!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo img,.c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important;clip-path:none!important;border-radius:0!important;}
  /* The slider occupies only the lower row, so uploaded image/video never hides behind the fixed logo. */
  .c2d-phone-banner .c2d-banner-card-viewport{top:40%!important;left:0!important;right:0!important;bottom:30px!important;width:100%!important;height:calc(60% - 30px)!important;z-index:10!important;}
  .c2d-phone-banner .c2d-banner-slide{padding:10px 12px!important;}
  .c2d-phone-banner .c2d-banner-slide-copy{padding:8px 12px!important;}
  .c2d-phone-banner .c2d-phone-banner-dots{left:50%!important;bottom:6px!important;z-index:60!important;}
  .c2d-phone-banner .c2d-banner-slide-url{font-size:clamp(13px,3.7vw,16px)!important;font-weight:900!important;}
  .hero-card{padding-top:48px!important;padding-bottom:54px!important;}
  .hero-card .chip-1{top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;}
  html[dir="rtl"] .hero-card .chip-1{left:8px!important;right:auto!important;}
  .hero-card > p{margin:12px 8px 42px!important;transform:translateY(6px)!important;}
  .circle-carousel{padding-inline:42px!important;}
  .circle-carousel-btn{top:32%!important;}
  #featured{padding-top:28px!important;}
}

/* Product-slider arrows: both sides follow the true slider centre at every size. */
.circle-carousel-btn{top:50%!important;transform:translateY(-50%)!important;}

/* Final mobile Urdu/English safety: logo stays within its own banner box and
   language direction never changes the requested badge/logo alignment. */
@media(max-width:760px){
  body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-fixed-logo{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;}
  body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo img,
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-fixed-logo img{object-fit:contain!important;object-position:center center!important;}
  body.lang-ur .hero-card .chip-1{top:8px!important;bottom:auto!important;left:8px!important;right:auto!important;}
  body.lang-ur .hero-card .chip-2{bottom:8px!important;top:auto!important;left:8px!important;right:auto!important;}
}

/* Supplied screenshots: use a true contained logo box on phones. The image
   is allowed to keep its natural aspect ratio, so its Computer 2 Day text is
   never cropped or pushed outside of the banner. */
@media(max-width:760px){
  .c2d-phone-banner .c2d-banner-fixed-logo{padding:8px!important;overflow:hidden!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    width:auto!important;height:auto!important;max-width:86%!important;max-height:86%!important;
    min-width:0!important;min-height:0!important;object-fit:contain!important;object-position:center center!important;
    margin:auto!important;flex:0 1 auto!important;
  }
  /* Same Day Repair stays above the illustration on the physical right for
     English and Urdu; extra illustration space prevents it covering the logo. */
  .hero-card{padding-top:60px!important;}
  .hero-card .chip-1,body.lang-ur .hero-card .chip-1{top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;}
  .hero-card .hero-illustration{padding-top:42px!important;}
  .hero-card > p{margin-top:18px!important;transform:none!important;}
}

/* Render a dedicated high-contrast × rather than relying on the glyph color
   inherited by the checkout header in light mode. */
#checkoutClose.cart-close{font-size:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
#checkoutClose.cart-close::before{content:"×"!important;display:block!important;color:#172033!important;font-family:Arial,Helvetica,sans-serif!important;font-size:30px!important;font-weight:900!important;line-height:1!important;opacity:1!important;visibility:visible!important;}
body[data-theme="dark"] #checkoutClose.cart-close::before{color:#fff!important;}

/* Uploaded banner image/video fills the exact slide rectangle on phones and
   larger screens: no side, top or bottom empty strips. */
.c2d-phone-banner .c2d-banner-slide-replacement-image,
.c2d-phone-banner .c2d-banner-slide-replacement-video{inset:0!important;}
.c2d-phone-banner .c2d-banner-slide-replacement-image img,
.c2d-phone-banner .c2d-banner-slide-replacement-video video{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;}
@media(min-width:761px){
  .c2d-phone-banner .c2d-phone-banner-dots{left:25%!important;right:auto!important;bottom:12px!important;transform:translateX(-50%)!important;}
}

/* Mobile banner uses the real C2D logo aspect ratio. This makes the fixed
   logo fill edge-to-edge without cropping its "Computer 2 Day" wording, and
   leaves the lower area exclusively for the auto-scrolling image/video. */
@media(max-width:760px){
  .c2d-phone-banner{height:clamp(540px,145vw,760px)!important;min-height:clamp(540px,145vw,760px)!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo{height:min(66.7vw,420px)!important;aspect-ratio:1024 / 683!important;padding:0!important;}
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;transform:scaleX(1.11)!important;transform-origin:center!important;}
  .c2d-phone-banner .c2d-banner-card-viewport{top:min(66.7vw,420px)!important;height:calc(100% - min(66.7vw,420px) - 30px)!important;}
}

/* Keep the website navigation available while visitors scroll on every screen. */
header.main-header{position:sticky!important;top:0!important;z-index:999!important;}
.cat-menu-bar{position:sticky!important;top:68px!important;z-index:190!important;}
@media(max-width:760px){.cat-menu-bar{top:64px!important;}}

/* C2D ZIP 16 — final visual corrections from the supplied reference screens. */
/* Keep both featured-product arrows at the centre line of the product images,
   independently of the labels and prices below them. */
.circle-carousel-btn,
.circle-carousel-btn.prev,
.circle-carousel-btn.next{
  top:64px!important;
  transform:translateY(-50%)!important;
}
.circle-carousel-btn:hover{transform:translateY(-50%) scale(1.06)!important;}
@media(max-width:760px){
  .circle-carousel-btn,
  .circle-carousel-btn.prev,
  .circle-carousel-btn.next{top:58px!important;}
}

/* A painted close mark is used for checkout, so it stays visible in light mode
   even when theme or legacy button styles change the original text colour. */
#checkoutModal #checkoutClose.cart-close{
  position:relative!important;
  display:block!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  padding:0!important;
  overflow:visible!important;
  color:transparent!important;
  background:#ffffff!important;
  border:2px solid #94a3b8!important;
  border-radius:50%!important;
  opacity:1!important;
  visibility:visible!important;
}
#checkoutModal #checkoutClose.cart-close::before{content:none!important;display:none!important;}
#checkoutModal #checkoutClose.cart-close::after{
  content:"×"!important;
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#0f172a!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:34px!important;
  font-weight:900!important;
  line-height:1!important;
  text-indent:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
body[data-theme="dark"] #checkoutModal #checkoutClose.cart-close{background:#172033!important;border-color:#93a4b8!important;}
body[data-theme="dark"] #checkoutModal #checkoutClose.cart-close::after{color:#ffffff!important;}

/* On phones the fixed C2D logo occupies the complete top logo row.  Stretching
   only this supplied logo prevents blank left/right strips and preserves every
   part of its "Computer 2 Day" wording; the separate lower viewport remains
   reserved for the auto-scrolling slider media. */
@media(max-width:760px){
  .c2d-phone-banner .c2d-banner-fixed-logo,
  body.lang-ur .c2d-phone-banner .c2d-banner-fixed-logo,
  body:not(.lang-ur) .c2d-phone-banner .c2d-banner-fixed-logo{
    position:absolute!important;
    inset:0 0 auto 0!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:min(66.7vw,420px)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    transform:none!important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    object-fit:fill!important;
    object-position:center!important;
    transform:none!important;
  }
  .c2d-phone-banner .c2d-banner-card-viewport{
    top:min(66.7vw,420px)!important;
    height:calc(100% - min(66.7vw,420px) - 30px)!important;
  }
}

/* C2D ZIP 17 — exact mobile and slider alignment corrections. */
/* The image circle starts after 12px viewport + 8px card padding.  Its maximum
   diameter is 150px, therefore its true centre is exactly 95px from the
   carousel top—not halfway down the text labels. */
.circle-carousel-btn,
.circle-carousel-btn.prev,
.circle-carousel-btn.next{top:95px!important;transform:translateY(-50%)!important;}
@media(max-width:520px){
  .circle-carousel-btn,
  .circle-carousel-btn.prev,
  .circle-carousel-btn.next{top:80px!important;}
}

/* The C2D logo is a full-bleed mobile banner image: no internal pad, border,
   max-width, or inherited layout rule can leave a strip outside its box. */
@media(max-width:760px){
  #c2dPhoneBanner .c2d-banner-fixed-logo,
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    padding:0!important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo{inset:0 0 auto 0!important;width:100%!important;height:min(66.7vw,420px)!important;overflow:hidden!important;}
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;}
}

/* Sticky can be cancelled by a transformed/overflow ancestor in older mobile
   browsers.  This fixed state is applied by the small safe script below only
   after the normal navigation reaches the top of the screen. */
@media(max-width:760px){
  .c2d-mobile-nav-fixed.main-header{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:5000!important;}
  .c2d-mobile-nav-fixed.cat-menu-bar{position:fixed!important;left:0!important;right:0!important;width:100%!important;z-index:4999!important;}
}

/* C2D ZIP 18 — laptop dots sit just below the slider artwork, while still
   remaining inside the banner. The Admin Panel's Dots Bottom value remains
   available; this only gives the requested small downward offset. */
@media(min-width:761px){
  .c2d-phone-banner .c2d-phone-banner-dots{
    bottom:max(4px,calc(var(--c2d-banner-dots-bottom,14px) - 8px))!important;
  }
}

/* C2D ZIP 19 — desktop banner media and the fixed logo are separate panes.
   Uploaded offer images/videos can never sit behind the logo, and the logo
   remains inside its own box on every laptop/desktop width. */
@media(min-width:761px){
  #c2dPhoneBanner .c2d-banner-stage,
  #c2dPhoneBanner .c2d-phone-banner-stage{position:relative!important;overflow:hidden!important;}
  #c2dPhoneBanner .c2d-banner-fixed-logo,
  body.lang-ur #c2dPhoneBanner .c2d-banner-fixed-logo{
    position:absolute!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    width:48%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:12px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    transform:none!important;
    z-index:30!important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
  #c2dPhoneBanner .c2d-banner-card-viewport{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    right:auto!important;
    width:52%!important;
    height:auto!important;
    margin:0!important;
    overflow:hidden!important;
    z-index:10!important;
  }
  #c2dPhoneBanner .c2d-banner-card-track,
  #c2dPhoneBanner .c2d-banner-slide,
  #c2dPhoneBanner .c2d-banner-slide-replacement-image,
  #c2dPhoneBanner .c2d-banner-slide-replacement-video{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  #c2dPhoneBanner .c2d-banner-card-track{position:relative!important;overflow:hidden!important;}
  #c2dPhoneBanner .c2d-banner-slide-replacement-image img,
  #c2dPhoneBanner .c2d-banner-slide-replacement-video video{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  #c2dPhoneBanner .c2d-phone-banner-dots{left:26%!important;z-index:40!important;}
}

/* The regular product-detail sticky CSS keeps the original mobile navigation
   in document flow. Breadcrumb labels remain visible and language-aware. */
@media(max-width:760px){
  body.product-detail-page > .product-page-section{margin-top:0!important;padding-top:0!important;}
  body.product-detail-page > .product-page-section > .container > .breadcrumb{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    margin-top:12px!important;
    margin-bottom:12px!important;
    transform:none!important;
  }
  body.product-detail-page .cart-drawer .cart-foot #checkoutBtn,
  body.product-detail-page .cart-drawer .cart-foot #checkoutBtn > span:last-child{
    opacity:1!important;
    visibility:visible!important;
    content-visibility:visible!important;
    contain:none!important;
    transition:none!important;
    animation:none!important;
  }
  body.product-detail-page .cart-drawer .cart-foot #checkoutBtn > span:last-child{display:inline!important;}
}

/* The final WhatsApp action is immediately painted when the cart opens. Its
   existing size and position are deliberately left unchanged. */
.cart-drawer .cart-foot #checkoutBtn,
.cart-drawer .cart-foot #checkoutBtn > span:last-child{
  opacity:1!important;
  visibility:visible!important;
  content-visibility:visible!important;
  contain:none!important;
  animation:none!important;
  transition:none!important;
}
.cart-drawer .cart-foot #checkoutBtn > span:last-child{display:inline!important;}

/* C2D ZIP 20 — product-page category row stays in normal document flow on
   phones. This preserves the complete, separate Home › Products › Laptops
   row directly below it in both English and Urdu, exactly as in the reference. */
@media(max-width:760px){
  body.product-detail-page .cat-menu-bar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    z-index:190!important;
  }
  body.product-detail-page > .product-page-section{
    position:relative!important;
    clear:both!important;
    margin:0!important;
    padding:0!important;
  }
  body.product-detail-page > .product-page-section > .container > .breadcrumb{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:58px!important;
    margin:0!important;
    padding:12px 0!important;
    visibility:visible!important;
    opacity:1!important;
    overflow:visible!important;
    transform:none!important;
  }
}

/* Rounded, full-bleed C2D banner-logo box: the actual image is clipped inside
   its own box at all sizes and cannot expose sharp corners or overflow. */
#c2dPhoneBanner .c2d-banner-fixed-logo{
  overflow:hidden!important;
  border-radius:24px!important;
  clip-path:inset(0 round 24px)!important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo img,
#c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
  border-radius:inherit!important;
  clip-path:inset(0 round 24px)!important;
}
@media(max-width:760px){
  #c2dPhoneBanner .c2d-banner-fixed-logo{border-radius:18px!important;clip-path:inset(0 round 18px)!important;}
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{border-radius:inherit!important;clip-path:inset(0 round 18px)!important;}
}

/* ===== Requested final responsive/banner + inventory hover controls ===== */
.c2d-phone-banner{width:100%!important;max-width:100%!important;margin-inline:0!important;overflow:hidden!important;box-sizing:border-box!important;}
.c2d-phone-banner-stage{min-height:inherit!important;height:100%!important;display:block!important;position:relative!important;overflow:hidden!important;}
.c2d-banner-fixed-logo{left:auto!important;right:0!important;top:0!important;bottom:0!important;width:48%!important;height:100%!important;max-width:none!important;max-height:none!important;transform:none!important;border-radius:0!important;overflow:hidden!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;}
.c2d-banner-fixed-logo .c2d-logo-halo{display:none!important;}
.c2d-banner-fixed-logo img,.c2d-banner-fixed-logo .js-banner-image{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;object-fit:cover!important;object-position:center center!important;transform:none!important;opacity:1!important;}
.c2d-banner-card-viewport{left:0!important;right:48%!important;top:0!important;bottom:0!important;inset-inline-start:0!important;inset-inline-end:auto!important;margin:0!important;padding:0!important;display:block!important;}
.c2d-banner-card{width:100%!important;max-width:none!important;min-height:0!important;height:100%!important;left:0!important;right:auto!important;top:50%!important;box-sizing:border-box!important;}
body.lang-ur .c2d-phone-banner .c2d-banner-card{left:0!important;right:auto!important;}
body:not(.lang-ur) .c2d-phone-banner .c2d-banner-card{left:0!important;right:auto!important;}
.c2d-banner-card-viewport::after{display:none!important;}
.c2d-phone-banner-dots{left:24%!important;right:auto!important;bottom:10px!important;transform:translateX(-50%)!important;z-index:30!important;}

header.main-header.c2d-sticky-disabled{position:relative!important;top:auto!important;}
.cat-menu-bar.c2d-sticky-disabled{position:relative!important;top:auto!important;}

.product-card{will-change:transform,box-shadow;transform-origin:center bottom;}
.product-card.is-hovering{z-index:4;}
.product-card.hover-none{transition:box-shadow .28s ease,border-color .28s ease!important;}
.product-card.hover-lift,.product-card.hover-tilt,.product-card.hover-zoom,.product-card.hover-float,.product-card.hover-glow{transition:transform .30s cubic-bezier(.22,.72,.18,1),box-shadow .30s ease,border-color .30s ease!important;}
.product-card.hover-glow.is-hovering{border-color:var(--blue)!important;}
.product-card.hover-zoom.is-hovering{box-shadow:0 18px 38px rgba(0,0,0,.22)!important;}
.product-card.hover-float.is-hovering{box-shadow:0 16px 34px rgba(0,0,0,.20)!important;}
@media (hover:none),(pointer:coarse){.product-card.is-hovering{z-index:auto!important;}}

.product-offer-badge{position:absolute;top:10px;inset-inline-start:10px;z-index:6;border:1px solid rgba(255,255,255,.2);background:linear-gradient(135deg,#f5688e,#f5a623);color:#fff;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:900;line-height:1.1;cursor:pointer;box-shadow:0 7px 16px rgba(245,104,142,.25);max-width:calc(100% - 70px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-offer-badge.has-discount{top:46px;}
.product-offer-badge:hover{filter:brightness(1.06);transform:translateY(-1px);}

.c2d-data-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;}
.c2d-data-modal.open{opacity:1;visibility:visible;pointer-events:auto;}
.c2d-data-modal-backdrop{position:absolute;inset:0;background:rgba(3,8,18,.68);backdrop-filter:blur(8px);}
.c2d-data-modal-card{position:relative;width:min(560px,calc(100vw - 28px));max-height:min(78vh,680px);overflow:auto;background:var(--card-2);color:var(--text);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 25px 80px rgba(0,0,0,.36);z-index:1;}
.c2d-data-modal-close{position:absolute;top:12px;inset-inline-end:12px;width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--text);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.c2d-data-modal-title{font-size:22px;font-weight:900;padding-inline-end:44px;margin-bottom:16px;}
.c2d-offers-list{display:grid;gap:10px;}
.c2d-offer-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:start;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);border-radius:13px;padding:11px 12px;cursor:pointer;}
.c2d-offer-row:hover{border-color:var(--blue);transform:translateY(-1px);}
.c2d-offer-row-badge{background:linear-gradient(135deg,#f5688e,#f5a623);color:#fff;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;white-space:nowrap;}
.c2d-offer-row-title{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.c2d-offer-row-price{font-weight:900;color:var(--orange);white-space:nowrap;font-size:12px;}
.c2d-offers-empty{padding:24px;text-align:center;color:var(--text-dim);border:1px dashed var(--border);border-radius:13px;}
.c2d-data-modal-open{overflow:hidden!important;}

#c2dDeliveryPersonBadge{position:fixed;top:calc(var(--c2d-mobile-nav-safe-top,0px) + 10px);inset-inline-end:12px;z-index:9700;display:inline-flex;align-items:center;gap:7px;min-height:42px;max-width:min(220px,calc(100vw - 24px));padding:8px 12px;border:1px solid rgba(40,184,255,.35);border-radius:999px;background:color-mix(in srgb,var(--card-2) 92%,transparent);color:var(--text);box-shadow:0 12px 30px rgba(0,0,0,.20);backdrop-filter:blur(12px);cursor:pointer;font-weight:900;font-size:11px;}
.c2d-delivery-badge-icon{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(6,182,255,.13);color:var(--blue);font-size:16px;flex:0 0 24px;}
.c2d-delivery-badge-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.c2d-delivery-bottom-card{margin:16px 0 0;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,var(--card-2),var(--bg-alt));display:flex;align-items:center;gap:12px;max-width:100%;box-sizing:border-box;}
.c2d-delivery-bottom-icon{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(6,182,255,.12);color:var(--blue);font-size:22px;}
.c2d-delivery-bottom-content{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.c2d-delivery-bottom-content strong{font-size:13px;}
.c2d-delivery-bottom-content span,.c2d-delivery-bottom-content a{font-size:12px;color:var(--text-dim);font-weight:700;}
.c2d-delivery-bottom-content a{color:var(--blue);}
.c2d-delivery-detail-grid{display:grid;gap:10px;}
.c2d-delivery-detail-grid>div{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-alt);display:flex;flex-direction:column;gap:4px;}
.c2d-delivery-detail-grid small{color:var(--text-dim);font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:800;}
.c2d-delivery-detail-grid strong,.c2d-delivery-detail-grid a{font-size:14px;color:var(--text);font-weight:900;}
.c2d-location-btn{color:var(--blue)!important;}
html[dir="rtl"] #c2dDeliveryPersonBadge{inset-inline-start:12px;inset-inline-end:auto;}
html[dir="rtl"] .c2d-offer-row{text-align:right;}

@media (max-width: 1024px){
  .c2d-banner-fixed-logo{width:46%!important;}
  .c2d-banner-card-viewport{right:46%!important;}
  .c2d-phone-banner-dots{left:27%!important;}
}
@media (max-width: 760px){
  .c2d-phone-banner{min-height:460px!important;height:460px!important;border-radius:18px!important;}
  .c2d-phone-banner-stage{height:100%!important;min-height:0!important;}
  .c2d-banner-fixed-logo{left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important;height:47%!important;max-height:none!important;}
  .c2d-banner-card-viewport{left:0!important;right:0!important;top:47%!important;bottom:0!important;width:100%!important;height:53%!important;}
  .c2d-banner-card{height:100%!important;min-height:0!important;top:50%!important;width:100%!important;padding:18px!important;border-radius:0!important;}
  .c2d-phone-banner-dots{left:50%!important;bottom:8px!important;}
  #c2dDeliveryPersonBadge{top:auto;bottom:74px;inset-inline-end:10px;font-size:10px;min-height:38px;padding:7px 10px;max-width:175px;}
  html[dir="rtl"] #c2dDeliveryPersonBadge{inset-inline-start:auto;inset-inline-end:10px;}
  .c2d-delivery-bottom-content{display:grid;grid-template-columns:1fr;gap:3px;}
  .c2d-data-modal-card{padding:20px;}
  .c2d-offer-row{grid-template-columns:1fr;gap:6px;}
  .c2d-offer-row-price{justify-self:start;}
}
@media (max-width: 420px){
  .c2d-phone-banner{min-height:420px!important;height:420px!important;}
  .c2d-banner-fixed-logo{height:45%!important;}
  .c2d-banner-card-viewport{top:45%!important;height:55%!important;}
  .c2d-banner-card{padding:14px!important;}
}

/* Delivery Person — exact reference-side badge + footer Contact details. */
#c2dDeliveryPersonBadge{position:fixed!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;inset-inline-end:12px!important;inset-inline-start:auto!important;width:auto!important;min-width:0!important;max-width:min(220px,calc(100vw - 24px))!important;min-height:38px!important;height:auto!important;padding:8px 12px!important;box-sizing:border-box!important;z-index:9700!important;display:inline-flex!important;align-items:center!important;gap:7px!important;overflow:hidden!important;}
html[dir="rtl"] #c2dDeliveryPersonBadge,body.lang-ur #c2dDeliveryPersonBadge{inset-inline-start:12px!important;inset-inline-end:auto!important;}
.c2d-delivery-person-contact{padding-top:10px!important;}
.c2d-delivery-contact-card{margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,var(--card-2),var(--bg-alt));box-sizing:border-box;}
.c2d-delivery-contact-heading{display:flex;align-items:center;gap:8px;margin-bottom:9px;min-width:0;}
.c2d-delivery-contact-heading strong{font-size:13px;color:var(--text);overflow-wrap:anywhere;}
.c2d-delivery-contact-icon,.c2d-delivery-bottom-icon{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(6,182,255,.12);color:var(--blue);font-size:18px;}
.c2d-delivery-detail-grid{display:grid;gap:9px;}
.c2d-delivery-detail-grid.compact{gap:7px;}
.c2d-delivery-detail-item{padding:10px;border:1px solid var(--border);border-radius:11px;background:var(--bg-alt);min-width:0;box-sizing:border-box;}
.c2d-delivery-detail-item small{display:block;color:var(--text-dim);font-size:9px;text-transform:uppercase;letter-spacing:.55px;font-weight:800;margin-bottom:4px;}
.c2d-delivery-value,.c2d-delivery-detail-item a{font-size:13px;color:var(--text);font-weight:900;overflow-wrap:anywhere;}
button.c2d-delivery-value{border:0;background:transparent;padding:0;text-align:inherit;cursor:pointer;font:inherit;max-width:100%;}
.c2d-delivery-inline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;}
.c2d-delivery-copy{border:1px solid var(--border);border-radius:8px;background:var(--card-2);color:var(--text-dim);font-size:10px;font-weight:800;padding:4px 7px;cursor:pointer;white-space:nowrap;}
.c2d-delivery-copy:hover,.c2d-delivery-copy:focus-visible{border-color:var(--blue);color:var(--blue);}
.c2d-delivery-location .c2d-location-btn{color:var(--blue)!important;}
.c2d-delivery-actions{display:flex;gap:8px;flex-wrap:wrap;}
.c2d-delivery-action{flex:1 1 120px;display:inline-flex!important;align-items:center;justify-content:center;padding:9px 10px;border-radius:10px;font-size:11px!important;font-weight:900!important;text-decoration:none!important;border:1px solid var(--border);box-sizing:border-box;}
.c2d-delivery-call{color:var(--text)!important;background:var(--card-2);}
.c2d-delivery-wa{color:#fff!important;background:#25d366;border-color:#25d366;}
.c2d-delivery-bottom-card{margin:16px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(135deg,var(--card-2),var(--bg-alt));display:flex;align-items:flex-start;gap:10px;max-width:100%;box-sizing:border-box;}
.c2d-delivery-bottom-content{flex:1 1 auto;min-width:0;}
.c2d-delivery-bottom-content .c2d-delivery-detail-item{padding:8px;}
.c2d-delivery-modal-card{width:min(560px,calc(100vw - 28px));}
.c2d-delivery-modal-card .c2d-delivery-detail-grid{gap:10px;}
@media(max-width:760px){
  #c2dDeliveryPersonBadge{top:50%!important;inset-inline-end:8px!important;inset-inline-start:auto!important;max-width:min(175px,calc(100vw - 16px))!important;min-height:36px!important;padding:7px 10px!important;}
  html[dir="rtl"] #c2dDeliveryPersonBadge,body.lang-ur #c2dDeliveryPersonBadge{inset-inline-start:8px!important;inset-inline-end:auto!important;}
  .c2d-delivery-contact-card{padding:10px;}
  .c2d-delivery-actions{display:grid;grid-template-columns:1fr 1fr;}
  .c2d-delivery-action{min-width:0;}
}
@media(max-width:420px){
  #c2dDeliveryPersonBadge{max-width:min(155px,calc(100vw - 16px))!important;font-size:9px!important;}
  .c2d-delivery-actions{grid-template-columns:1fr;}
}

/* =========================================================
   C2D REQUEST PATCH — exact requested responsive banner,
   delivery badge placement, offer controls and video-style
   product-card detail reveal. Additive override only.
   ========================================================= */

/* 1) Banner logo: the logo panel itself is the box. The image is allowed to
   occupy every pixel of that panel — no padding, no blank strip, no overflow. */
#c2dPhoneBanner,
#c2dPhoneBanner .c2d-banner-card-viewport,
#c2dPhoneBanner .c2d-banner-fixed-logo,
#c2dPhoneBanner .c2d-banner-fixed-logo img,
#c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
  box-sizing:border-box!important;
}
#c2dPhoneBanner{width:100%!important;max-width:none!important;overflow:hidden!important;}
#c2dPhoneBanner .c2d-banner-fixed-logo{
  position:absolute!important;inset-block:0!important;inset-inline-end:0!important;inset-inline-start:auto!important;
  width:48%!important;height:100%!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;overflow:hidden!important;
  display:block!important;z-index:30!important;transform:none!important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo img,
#c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
  display:block!important;width:100%!important;height:100%!important;
  min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  object-fit:cover!important;object-position:center center!important;transform:none!important;
}
#c2dPhoneBanner .c2d-banner-card-viewport{
  position:absolute!important;inset-block:0!important;inset-inline-start:0!important;inset-inline-end:auto!important;
  width:52%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;
}
#c2dPhoneBanner .c2d-banner-card{width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;}

/* 2) Delivery badge: small, edge-safe, centered vertically at the reference
   arrow area. English = right, Urdu = left. It never overlaps the page edges. */
#c2dDeliveryPersonBadge{
  position:fixed!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
  inset-inline-end:12px!important;inset-inline-start:auto!important;
  width:auto!important;min-width:0!important;max-width:min(210px,calc(100vw - 24px))!important;
  min-height:36px!important;height:auto!important;padding:7px 10px!important;
  font-size:10px!important;line-height:1.1!important;z-index:9700!important;
  box-sizing:border-box!important;overflow:hidden!important;
}
html[dir="rtl"] #c2dDeliveryPersonBadge,
body.lang-ur #c2dDeliveryPersonBadge{inset-inline-start:12px!important;inset-inline-end:auto!important;}
@media(max-width:760px){
  #c2dDeliveryPersonBadge{top:50%!important;bottom:auto!important;inset-inline-end:8px!important;inset-inline-start:auto!important;max-width:min(165px,calc(100vw - 16px))!important;}
  html[dir="rtl"] #c2dDeliveryPersonBadge,body.lang-ur #c2dDeliveryPersonBadge{inset-inline-start:8px!important;inset-inline-end:auto!important;}
}

/* 3) Product cards: discount first, Offers immediately underneath. */
.product-thumb .discount-badge{top:10px!important;inset-inline-start:10px!important;z-index:8!important;}
.product-thumb .product-offer-badge{top:46px!important;inset-inline-start:10px!important;z-index:9!important;}
.product-thumb .product-offer-badge:not(.has-discount){top:10px!important;}
.product-thumb .card-wishlist-btn{z-index:10!important;}

/* 5) Video-style card interaction: image stays in its original position while
   details slide/fade over the lower part of the same card. The card itself never
   changes its internal image geometry. */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-details-reveal{
    position:relative!important;display:block!important;height:340px!important;min-height:340px!important;
    overflow:hidden!important;isolation:isolate!important;transform-origin:center bottom!important;
  }
  .product-card.c2d-details-reveal .product-thumb{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    min-height:0!important;margin:0!important;border-bottom:0!important;z-index:1!important;
  }
  .product-card.c2d-details-reveal .product-thumb img{
    position:relative!important;width:100%!important;height:100%!important;
    object-fit:contain!important;object-position:center!important;padding:12px!important;
    transform:none!important;transition:opacity .18s ease!important;
  }
  .product-card.c2d-details-reveal .c2d-product-details{
    position:absolute!important;inset-inline:0!important;bottom:0!important;z-index:12!important;
    width:100%!important;box-sizing:border-box!important;margin:0!important;
    max-height:76%!important;overflow:auto!important;padding:16px!important;
    background:linear-gradient(to bottom,rgba(7,18,32,.78),var(--card-2) 24%,var(--card-2) 100%)!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    transform:translateY(102%)!important;opacity:1!important;
    transition:transform .38s cubic-bezier(.22,.72,.18,1),opacity .28s ease!important;
    pointer-events:none!important;
  }
  .product-card.c2d-details-reveal.c2d-details-effect-fade-up .c2d-product-details{opacity:0!important;transform:translateY(32px)!important;}
  .product-card.c2d-details-reveal.c2d-details-effect-overlay .c2d-product-details{transform:translateY(0)!important;opacity:0!important;background:linear-gradient(to bottom,rgba(5,15,28,.04),rgba(5,15,28,.94))!important;color:#fff!important;}
  .product-card.c2d-details-reveal.c2d-details-open .c2d-product-details,
  .product-card.c2d-details-reveal:hover .c2d-product-details,
  .product-card.c2d-details-reveal:focus-within .c2d-product-details{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important;}
  .product-card.c2d-details-reveal.c2d-details-effect-overlay:hover .c2d-product-details,
  .product-card.c2d-details-reveal.c2d-details-effect-overlay:focus-within .c2d-product-details{opacity:1!important;}
  .product-card.c2d-details-reveal .product-body h4,
  .product-card.c2d-details-reveal .product-body p{flex:none!important;}
}

/* Touch devices have no hover state: keep the complete card usable and readable. */
@media (hover:none),(pointer:coarse){
  .product-card.c2d-details-reveal{
    position:relative!important;display:flex!important;height:auto!important;min-height:0!important;overflow:hidden!important;
  }
  .product-card.c2d-details-reveal .product-thumb{position:relative!important;inset:auto!important;width:100%!important;height:180px!important;min-height:180px!important;}
  .product-card.c2d-details-reveal .c2d-product-details{
    position:relative!important;inset:auto!important;width:100%!important;max-height:none!important;overflow:visible!important;
    transform:none!important;opacity:1!important;pointer-events:auto!important;
  }
}

/* 7) Navbar/category menu use the actual header height rather than a hard-coded
   offset, so the same sticky system remains aligned on every viewport. */
header.main-header{position:sticky!important;top:0!important;z-index:999!important;}
.cat-menu-bar{position:sticky!important;top:var(--c2d-main-header-sticky-height,68px)!important;z-index:190!important;}
header.main-header.c2d-sticky-disabled{position:relative!important;top:auto!important;}
.cat-menu-bar.c2d-sticky-disabled{position:relative!important;top:auto!important;}

@media(max-width:760px){
  #c2dPhoneBanner .c2d-banner-fixed-logo{
    position:absolute!important;inset-inline:0!important;inset-block-start:0!important;inset-block-end:auto!important;
    width:100%!important;height:66.7vw!important;max-height:420px!important;
  }
  #c2dPhoneBanner .c2d-banner-card-viewport{
    position:absolute!important;inset-inline:0!important;inset-block-start:min(66.7vw,420px)!important;inset-block-end:0!important;
    width:100%!important;height:calc(100% - min(66.7vw,420px))!important;
  }
  #c2dPhoneBanner .c2d-banner-card{height:100%!important;width:100%!important;}
}
@media(max-width:420px){
  #c2dPhoneBanner .c2d-banner-fixed-logo{height:66.7vw!important;max-height:300px!important;}
  #c2dPhoneBanner .c2d-banner-card-viewport{inset-block-start:66.7vw!important;height:calc(100% - 66.7vw)!important;}
}

/* Delivery details follow the requested language-side placement without ever
   pushing outside the contact/footer container. */
body:not(.lang-ur) #c2dDeliveryPersonBottom .c2d-delivery-bottom-card{justify-content:flex-end;text-align:right;}
body.lang-ur #c2dDeliveryPersonBottom .c2d-delivery-bottom-card,
html[dir="rtl"] #c2dDeliveryPersonBottom .c2d-delivery-bottom-card{justify-content:flex-start;text-align:left;direction:rtl;}

/* Landing-page badge lives in the banner's own coordinate system, exactly in
   the supplied reference arrow area; this prevents it from floating over
   unrelated sections while scrolling. Product-details keeps the compact
   viewport-safe fallback because that page has no hero banner. */
#c2dPhoneBanner > #c2dDeliveryPersonBadge{
  position:absolute!important;top:50%!important;bottom:auto!important;right:12px!important;left:auto!important;
  inset-inline-end:12px!important;inset-inline-start:auto!important;transform:translateY(-50%)!important;
}
html[dir="rtl"] #c2dPhoneBanner > #c2dDeliveryPersonBadge,
body.lang-ur #c2dPhoneBanner > #c2dDeliveryPersonBadge{
  right:auto!important;left:12px!important;inset-inline-start:12px!important;inset-inline-end:auto!important;
}
@media(max-width:760px){
  #c2dPhoneBanner > #c2dDeliveryPersonBadge{right:8px!important;inset-inline-end:8px!important;}
  html[dir="rtl"] #c2dPhoneBanner > #c2dDeliveryPersonBadge,body.lang-ur #c2dPhoneBanner > #c2dDeliveryPersonBadge{left:8px!important;inset-inline-start:8px!important;}
}

/* Preserve the existing Admin-selected logo side; only the fit/alignment is
   corrected. */
#c2dPhoneBanner[data-logo-side="left"] .c2d-banner-fixed-logo{
  inset-inline-start:0!important;inset-inline-end:auto!important;
  width:48%!important;
}
#c2dPhoneBanner[data-logo-side="left"] .c2d-banner-card-viewport{
  inset-inline-start:auto!important;inset-inline-end:0!important;
  width:52%!important;
}
#c2dPhoneBanner[data-logo-side="right"] .c2d-banner-fixed-logo{
  inset-inline-start:auto!important;inset-inline-end:0!important;
  width:48%!important;
}
#c2dPhoneBanner[data-logo-side="right"] .c2d-banner-card-viewport{
  inset-inline-start:0!important;inset-inline-end:auto!important;
  width:52%!important;
}
#c2dPhoneBanner .c2d-phone-banner-dots{left:var(--c2d-banner-dots-slider-left,25%)!important;right:auto!important;}
@media(max-width:760px){
  #c2dPhoneBanner[data-logo-side="left"] .c2d-banner-fixed-logo,
  #c2dPhoneBanner[data-logo-side="right"] .c2d-banner-fixed-logo{inset-inline:0!important;width:100%!important;}
  #c2dPhoneBanner[data-logo-side="left"] .c2d-banner-card-viewport,
  #c2dPhoneBanner[data-logo-side="right"] .c2d-banner-card-viewport{inset-inline:0!important;width:100%!important;}
  #c2dPhoneBanner .c2d-phone-banner-dots{left:50%!important;}
}


/* C2D DELIVERY PERSON — final requested placement/compact footer implementation. */
#c2dDeliveryPersonBadge{
  position:fixed!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  inset-inline-end:12px!important;
  inset-inline-start:auto!important;
  z-index:99990!important;
  margin:0!important;
  width:auto!important;
  max-width:min(220px,calc(100vw - 28px))!important;
  min-height:38px!important;
  height:auto!important;
  padding:8px 12px!important;
  box-sizing:border-box!important;
  isolation:isolate;
}
html[dir="rtl"] #c2dDeliveryPersonBadge,body.lang-ur #c2dDeliveryPersonBadge{
  inset-inline-start:12px!important;
  inset-inline-end:auto!important;
}
/* Keep the badge independent of the banner stacking/overflow at every size. */
#c2dPhoneBanner #c2dDeliveryPersonBadge{
  position:fixed!important;
}
.footer-delivery-col{
  min-width:0;
  align-self:start;
}
.footer-delivery-col[hidden]{display:none!important;}
.c2d-delivery-contact-card{
  margin:0!important;
  padding:12px!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,var(--card-2),var(--bg-alt))!important;
  box-sizing:border-box;
  min-width:0;
}
.c2d-delivery-contact-heading{
  display:flex!important;align-items:center!important;gap:8px!important;
  margin:0 0 8px!important;min-width:0;
}
.c2d-delivery-contact-heading strong{font-size:13px!important;overflow-wrap:anywhere;}
.c2d-delivery-contact-icon{width:28px!important;height:28px!important;flex:0 0 28px!important;font-size:16px!important;}
.footer-delivery-col .c2d-delivery-detail-grid{gap:6px!important;}
.footer-delivery-col .c2d-delivery-detail-item{padding:7px 8px!important;border-radius:9px!important;}
.footer-delivery-col .c2d-delivery-detail-item small{font-size:8px!important;margin-bottom:2px!important;}
.footer-delivery-col .c2d-delivery-value,.footer-delivery-col .c2d-delivery-detail-item a{font-size:11px!important;}
.footer-delivery-col .c2d-delivery-inline{gap:5px!important;}
.footer-delivery-col .c2d-delivery-copy{font-size:9px!important;padding:3px 6px!important;}
.footer-delivery-col .c2d-delivery-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;margin-top:6px!important;}
.footer-delivery-col .c2d-delivery-action{min-width:0!important;padding:7px 6px!important;font-size:10px!important;}
.c2d-delivery-location-empty{font-size:10px;color:var(--text-dim);font-weight:700;line-height:1.35;}
/* The footer stays in one compact row on normal desktop widths, including the QR row. */
@media (min-width:1201px){
  .footer-grid{grid-template-columns:minmax(250px,1.35fr) minmax(130px,.75fr) minmax(150px,.85fr) minmax(230px,1.15fr) minmax(250px,1.05fr)!important;gap:26px!important;}
}
@media (min-width:901px) and (max-width:1200px){
  .footer-grid{grid-template-columns:minmax(220px,1.3fr) repeat(2,minmax(130px,.8fr)) minmax(220px,1.1fr) minmax(230px,1fr)!important;gap:18px!important;}
  .footer-delivery-col .c2d-delivery-actions{grid-template-columns:1fr!important;}
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:26px!important;}
  .footer-delivery-col{grid-column:auto!important;grid-row:auto!important;align-self:start!important;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr!important;gap:24px!important;}
  .footer-delivery-col{grid-column:auto!important;}
  #c2dDeliveryPersonBadge{inset-inline-end:8px!important;inset-inline-start:auto!important;max-width:min(165px,calc(100vw - 16px))!important;min-height:36px!important;padding:7px 10px!important;font-size:10px!important;}
  html[dir="rtl"] #c2dDeliveryPersonBadge,body.lang-ur #c2dDeliveryPersonBadge{inset-inline-start:8px!important;inset-inline-end:auto!important;}
}
@media (prefers-reduced-motion:reduce){#c2dDeliveryPersonBadge{transition:none!important;}}

/* C2D Delivery Person — exact Home Delivery card placement requested. */
#c2dPhoneBanner #c2dDeliveryPersonBadge{position:static!important;}
#c2dDeliveryPersonBadge{
  position:absolute!important;
  top:auto!important;
  bottom:-7px!important;
  inset-inline-end:-8px!important;
  inset-inline-start:auto!important;
  transform:none!important;
  z-index:30!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:max-content!important;
  max-width:min(165px,42%)!important;
  min-width:0!important;
  min-height:34px!important;
  height:auto!important;
  padding:6px 9px!important;
  box-sizing:border-box!important;
  margin:0!important;
  border:1px solid rgba(40,184,255,.35)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--card-2) 94%,transparent)!important;
  color:var(--text)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(12px)!important;
  cursor:pointer!important;
  font-weight:900!important;
  font-size:10px!important;
  line-height:1.15!important;
  overflow:hidden!important;
}
html[dir="rtl"] #c2dDeliveryPersonBadge,
body.lang-ur #c2dDeliveryPersonBadge{
  inset-inline-start:-8px!important;
  inset-inline-end:auto!important;
}
#c2dDeliveryPersonBadge .c2d-delivery-badge-icon{
  width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;
  border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:rgba(6,182,255,.13)!important;color:var(--blue)!important;font-size:14px!important;flex:0 0 22px!important;
}
#c2dDeliveryPersonBadge .c2d-delivery-badge-text{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
#c2dDeliveryPersonBadge:hover,#c2dDeliveryPersonBadge:focus-visible{border-color:var(--blue)!important;transform:translateY(-1px)!important;}
#c2dDeliveryPersonBadge[hidden]{display:none!important;}

/* Footer delivery details remain in the existing QR/contact row; remove the
   decorative round icon from this section only. */
.c2d-delivery-contact-heading{display:block!important;margin:0 0 8px!important;}
.c2d-delivery-contact-icon{display:none!important;}

@media(max-width:760px){
  #c2dDeliveryPersonBadge{max-width:min(150px,45%)!important;min-height:32px!important;padding:5px 8px!important;font-size:9.5px!important;bottom:-7px!important;}
  #c2dDeliveryPersonBadge .c2d-delivery-badge-icon{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;font-size:13px!important;}
}
@media(max-width:420px){
  #c2dDeliveryPersonBadge{max-width:46%!important;font-size:9px!important;padding:5px 7px!important;}
}


/* FINAL DELIVERY PERSON ALIGNMENT — supplied reference correction. */
#c2dDeliveryPersonBadge{
  position:absolute!important;
  top:auto!important;
  bottom:-7px!important;
  inset-inline-end:-12px!important;
  inset-inline-start:auto!important;
  transform:none!important;
  z-index:31!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  padding:6px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(40,184,255,.35)!important;
  background:color-mix(in srgb,var(--card-2) 94%,transparent)!important;
  color:var(--text)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(12px)!important;
  font-size:10px!important;
  line-height:1.15!important;
  cursor:pointer!important;
}
html[dir="rtl"] #c2dDeliveryPersonBadge, body.lang-ur #c2dDeliveryPersonBadge{
  inset-inline-start:-12px!important; inset-inline-end:auto!important;
}
#c2dDeliveryPersonBadge:hover,#c2dDeliveryPersonBadge:focus-visible{border-color:var(--blue)!important;transform:none!important;}
#c2dDeliveryPersonBadge .c2d-delivery-badge-icon{
  flex:0 0 22px!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;
  border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:rgba(6,182,255,.13)!important;color:var(--blue)!important;
}
#c2dDeliveryPersonBadge .c2d-delivery-badge-text{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.hero-visual .hero-card{position:relative!important;overflow:visible!important;}
@media(max-width:760px){
  #c2dDeliveryPersonBadge{top:auto!important;bottom:-7px!important;inset-inline-end:-8px!important;inset-inline-start:auto!important;padding:6px 8px!important;font-size:10px!important;}
  html[dir="rtl"] #c2dDeliveryPersonBadge,body.lang-ur #c2dDeliveryPersonBadge{inset-inline-start:-8px!important;inset-inline-end:auto!important;}
}
@media(max-width:380px){#c2dDeliveryPersonBadge{padding:5px 6px!important;font-size:9px!important;}}
.c2d-delivery-modal-card .c2d-data-modal-close{color:var(--text)!important;background:var(--card)!important;border-color:var(--border)!important;opacity:1!important;visibility:visible!important;z-index:3!important;}
body[data-theme="dark"] .c2d-delivery-modal-card .c2d-data-modal-close{color:#fff!important;background:#172033!important;border-color:rgba(255,255,255,.38)!important;}

/* FINAL DELIVERY PERSON RTL RESPONSIVE FIX — keep the badge exactly the
   Home Delivery chip size and place it on the opposite side.  The inline
   dimensions are synchronized from JS so every screen width follows the
   actual Home Delivery badge size. */
#c2dDeliveryPersonBadge{
  position:absolute!important;
  top:auto!important;
  bottom:0!important;
  inset-inline-start:auto!important;
  inset-inline-end:0!important;
  transform:none!important;
  box-sizing:border-box!important;
  margin:0!important;
  z-index:31!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
html[dir="rtl"] #c2dDeliveryPersonBadge,
body.lang-ur #c2dDeliveryPersonBadge{
  inset-inline-start:auto!important;
  inset-inline-end:0!important;
}
#c2dDeliveryPersonBadge .c2d-delivery-badge-icon{
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
}
#c2dDeliveryPersonBadge .c2d-delivery-badge-text{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  #c2dDeliveryPersonBadge{
    top:auto!important;
    bottom:0!important;
    inset-inline-start:auto!important;
    inset-inline-end:0!important;
    padding:0!important;
  }
  html[dir="rtl"] #c2dDeliveryPersonBadge,
  body.lang-ur #c2dDeliveryPersonBadge{
    inset-inline-start:auto!important;
    inset-inline-end:0!important;
  }
}


/* ============================================================
   V37 — REQUESTED ONLY:
   1) Mobile banner logo inside box, edge-to-edge full fit
   2) Delivery Person badge = Home Delivery size; EN bottom-right;
      UR left; bike icon (not round circle)
   No other features changed.
   ============================================================ */

/* --- 1) Mobile / all: logo stays INSIDE logo box, edge-to-edge --- */
#c2dPhoneBanner .c2d-banner-fixed-logo,
.c2d-phone-banner .c2d-banner-fixed-logo {
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  box-sizing: border-box !important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo img,
#c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image,
.c2d-phone-banner .c2d-banner-fixed-logo img,
.c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo .c2d-logo-halo {
  display: none !important;
}

@media (max-width: 760px) {
  #c2dPhoneBanner .c2d-banner-fixed-logo,
  .c2d-phone-banner .c2d-banner-fixed-logo {
    overflow: hidden !important;
    max-width: 100% !important;
    /* containing block for the absolute image */
    isolation: isolate !important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    position: absolute !important;
    inset: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
  }
}

/* When mobile stack uses absolute logo panel, keep img contained */
@media (max-width: 760px) {
  #c2dPhoneBanner .c2d-phone-banner-stage {
    overflow: hidden !important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo {
    overflow: hidden !important;
    clip-path: none !important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Light + dark theme: same logo containment */
body.theme-light #c2dPhoneBanner .c2d-banner-fixed-logo img,
body.theme-dark #c2dPhoneBanner .c2d-banner-fixed-logo img,
html[data-theme="light"] #c2dPhoneBanner .c2d-banner-fixed-logo img,
html[data-theme="dark"] #c2dPhoneBanner .c2d-banner-fixed-logo img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- 2) Delivery Person badge on hero-card (not fixed viewport) --- */
.hero-card {
  position: relative !important;
}
.hero-card > #c2dDeliveryPersonBadge,
#c2dDeliveryPersonBadge {
  position: absolute !important;
  top: auto !important;
  transform: none !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid rgba(40, 184, 255, 0.35) !important;
  background: color-mix(in srgb, var(--card-2) 92%, transparent) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  padding: 0 12px !important; /* height driven by JS match to Home Delivery */
  /* horizontal/vertical offsets set by JS sync to match Home Delivery */
}

/* Kill previous fixed / banner absolute rules that pulled badge off the card */
#c2dPhoneBanner > #c2dDeliveryPersonBadge {
  position: absolute !important;
}
body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge {
  /* UR: left side — JS sets exact left/bottom; keep start preference */
  inset-inline-end: auto !important;
}
body:not(.lang-ur) .hero-card > #c2dDeliveryPersonBadge {
  inset-inline-start: auto !important;
}

/* Bike icon inside badge — replace round circle look */
#c2dDeliveryPersonBadge .c2d-delivery-badge-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 0 !important; /* not a round circle badge */
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--blue) !important;
  flex: 0 0 22px !important;
  font-size: 0 !important; /* hide any leftover glyph */
}
#c2dDeliveryPersonBadge .c2d-delivery-badge-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
}
#c2dDeliveryPersonBadge .c2d-delivery-badge-text {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

@media (max-width: 760px) {
  #c2dDeliveryPersonBadge {
    font-size: 10px !important;
  }
  #c2dDeliveryPersonBadge .c2d-delivery-badge-icon {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }
  #c2dDeliveryPersonBadge .c2d-delivery-badge-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Do not let older fixed rules win on product page either when badge is in hero */
.hero-card #c2dDeliveryPersonBadge {
  position: absolute !important;
  top: auto !important;
  transform: none !important;
}


/* Final authority: badge belongs to hero-card */
.hero-card > #c2dDeliveryPersonBadge {
  position: absolute !important;
  top: auto !important;
  transform: none !important;
  z-index: 8 !important;
}
/* If some path still mounts badge under banner, keep it absolute not fixed */
#c2dPhoneBanner #c2dDeliveryPersonBadge {
  position: absolute !important;
  top: auto !important;
  transform: none !important;
}

/* ============================================================
   V38 — ONLY requested fixes from user screenshots:
   - Delivery Person must NOT overlap caption text
   - Caption: left + slightly up
   - Badge EN bottom-right / UR bottom-left, same height as Home Delivery
   - Banner logo-side + slides: do not break existing layout
   ============================================================ */

/* Caption: left + a little up, room at bottom for badges */
.hero-visual .hero-card > p,
.hero-card > p {
  position: relative !important;
  z-index: 5 !important;
  text-align: left !important;
  margin: 4px 12px 48px 12px !important;
  padding: 0 !important;
  transform: translateY(-6px) !important;
  max-width: calc(100% - 24px) !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}
body.lang-ur .hero-visual .hero-card > p,
body.lang-ur .hero-card > p,
html[dir="rtl"] .hero-visual .hero-card > p,
html[dir="rtl"] .hero-card > p {
  text-align: right !important;
  direction: rtl !important;
}

/* Delivery Person badge: always on hero-card, never fixed, never covering caption */
.hero-card {
  position: relative !important;
  overflow: visible !important;
}
.hero-card > #c2dDeliveryPersonBadge,
#c2dDeliveryPersonBadge {
  position: absolute !important;
  top: auto !important;
  transform: none !important;
  z-index: 8 !important;
  /* kill fixed/viewport rules from older patches */
  inset-inline-end: auto !important;
  inset-inline-start: auto !important;
}
body:not(.lang-ur) .hero-card > #c2dDeliveryPersonBadge {
  right: 8px !important;
  left: auto !important;
  bottom: 8px !important;
}
body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge {
  left: 8px !important;
  right: auto !important;
  bottom: 8px !important;
}

/* Keep Home Delivery chip clear on its side */
.hero-card .chip-2 {
  z-index: 7 !important;
}

/* Banner: keep text viewport above empty — slides must stay visible */
#c2dPhoneBanner .c2d-banner-card-viewport {
  z-index: 20 !important;
  overflow: hidden !important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo {
  z-index: 15 !important; /* below viewport so it cannot cover slides */
}
#c2dPhoneBanner .c2d-banner-slide.is-current {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
}
#c2dPhoneBanner .c2d-banner-slide-copy,
#c2dPhoneBanner .c2d-banner-slide-replacement-image,
#c2dPhoneBanner .c2d-banner-slide-replacement-image img {
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Do not force logo side — respect data-logo-side from Admin/settings */
/* (no override of inset-inline for logo/viewport here) */

@media (max-width: 760px) {
  .hero-visual .hero-card > p,
  .hero-card > p {
    margin: 4px 10px 44px 10px !important;
    transform: translateY(-4px) !important;
    font-size: 12px !important;
  }
  body:not(.lang-ur) .hero-card > #c2dDeliveryPersonBadge {
    right: 6px !important;
    bottom: 6px !important;
  }
  body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
  html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge {
    left: 6px !important;
    bottom: 6px !important;
  }
}



/* ============================================================
   V39 — USER SCREENSHOT FIXES ONLY
   1) Banner: LOGO always RIGHT, SLIDER always LEFT (EN+UR, both themes)
   2) Logo edge-to-edge inside logo box
   3) Delivery Person no text overlap; caption centered with clearance
   ============================================================ */

/* --- Banner panels: slider LEFT / logo RIGHT (desktop+tablet) --- */
@media (min-width: 761px) {
  #c2dPhoneBanner .c2d-phone-banner-stage {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }
  /* Slider / text always LEFT half */
  #c2dPhoneBanner .c2d-banner-card-viewport,
  #c2dPhoneBanner[data-logo-side="left"] .c2d-banner-card-viewport,
  #c2dPhoneBanner[data-logo-side="right"] .c2d-banner-card-viewport,
  body.lang-ur #c2dPhoneBanner .c2d-banner-card-viewport,
  html[dir="rtl"] #c2dPhoneBanner .c2d-banner-card-viewport {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    width: 52% !important;
    height: 100% !important;
    z-index: 20 !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Logo always RIGHT half */
  #c2dPhoneBanner .c2d-banner-fixed-logo,
  #c2dPhoneBanner[data-logo-side="left"] .c2d-banner-fixed-logo,
  #c2dPhoneBanner[data-logo-side="right"] .c2d-banner-fixed-logo,
  body.lang-ur #c2dPhoneBanner .c2d-banner-fixed-logo,
  html[dir="rtl"] #c2dPhoneBanner .c2d-banner-fixed-logo {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    width: 48% !important;
    height: 100% !important;
    z-index: 15 !important;
    overflow: hidden !important;
  }
  #c2dPhoneBanner .c2d-phone-banner-dots {
    left: 26% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Logo image: edge-to-edge inside box only */
#c2dPhoneBanner .c2d-banner-fixed-logo {
  overflow: hidden !important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo img,
#c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo .c2d-logo-halo {
  display: none !important;
}

/* Slides must remain visible (no blank left panel) */
#c2dPhoneBanner .c2d-banner-card-viewport .c2d-banner-slide.is-current {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
  display: flex !important;
}
#c2dPhoneBanner .c2d-banner-slide-copy {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

/* --- Delivery Person: on hero-card only, never fixed, never overlap caption --- */
.hero-card {
  position: relative !important;
}
.hero-card > #c2dDeliveryPersonBadge,
#c2dDeliveryPersonBadge {
  position: absolute !important;
  top: auto !important;
  transform: none !important;
  z-index: 8 !important;
  /* kill fixed rules from older layers */
  inset: auto !important;
}
/* EN: bottom-right */
body:not(.lang-ur) .hero-card > #c2dDeliveryPersonBadge {
  right: 6px !important;
  left: auto !important;
  bottom: 6px !important;
}
/* UR: bottom-left */
body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge {
  left: 6px !important;
  right: auto !important;
  bottom: 6px !important;
}

/* Caption: centered, clear of both bottom badges */
.hero-visual .hero-card > p,
.hero-card > p {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  margin: 6px 16px 48px 16px !important;
  padding: 0 8px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
  transform: none !important;
}
body.lang-ur .hero-visual .hero-card > p,
body.lang-ur .hero-card > p {
  direction: rtl !important;
  text-align: center !important;
}

/* Home Delivery stays bottom-start; leave bottom padding for dual badges */
.hero-card .chip-2 {
  z-index: 7 !important;
}
.hero-card .chip-1 {
  z-index: 7 !important;
}

@media (max-width: 760px) {
  .hero-visual .hero-card > p,
  .hero-card > p {
    margin: 4px 12px 46px 12px !important;
    font-size: 12px !important;
  }
  body:not(.lang-ur) .hero-card > #c2dDeliveryPersonBadge {
    right: 4px !important;
    bottom: 4px !important;
  }
  body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
  html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge {
    left: 4px !important;
    bottom: 4px !important;
  }
}

/* Mobile banner stack: logo on top still full-width edge fit; slides under */
@media (max-width: 760px) {
  #c2dPhoneBanner .c2d-banner-fixed-logo {
    overflow: hidden !important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  #c2dPhoneBanner .c2d-banner-card-viewport {
    z-index: 20 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}



/* ============================================================
   V40 — HARD LOCK (screenshot fixes)
   Laptop/Desktop: LOGO physical RIGHT 48% | SLIDER physical LEFT 52%
   Logo image always visible edge-to-edge inside right panel
   Delivery Person badge: RIGHT (EN + UR, all sizes)
   ============================================================ */

@media (min-width: 761px) {
  #c2dPhoneBanner.c2d-phone-banner .c2d-phone-banner-stage {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    min-height: 340px !important;
  }

  /* SLIDER — physical LEFT */
  #c2dPhoneBanner.c2d-phone-banner .c2d-banner-card-viewport {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 52% !important;
    height: 100% !important;
    inset: 0 auto 0 0 !important;
    z-index: 20 !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* LOGO — physical RIGHT */
  #c2dPhoneBanner.c2d-phone-banner .c2d-banner-fixed-logo {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 48% !important;
    height: 100% !important;
    inset: 0 0 0 auto !important;
    z-index: 15 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
    background: transparent !important;
  }

  #c2dPhoneBanner.c2d-phone-banner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner.c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: none !important;
  }

  #c2dPhoneBanner.c2d-phone-banner .c2d-banner-fixed-logo .c2d-logo-halo {
    display: none !important;
  }

  /* Dots under slider half */
  #c2dPhoneBanner.c2d-phone-banner .c2d-phone-banner-dots {
    left: 26% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Kill RTL/lang-ur flips for panel sides */
  body.lang-ur #c2dPhoneBanner.c2d-phone-banner .c2d-banner-card-viewport,
  html[dir="rtl"] #c2dPhoneBanner.c2d-phone-banner .c2d-banner-card-viewport {
    left: 0 !important;
    right: auto !important;
    width: 52% !important;
  }
  body.lang-ur #c2dPhoneBanner.c2d-phone-banner .c2d-banner-fixed-logo,
  html[dir="rtl"] #c2dPhoneBanner.c2d-phone-banner .c2d-banner-fixed-logo {
    right: 0 !important;
    left: auto !important;
    width: 48% !important;
  }
}

/* Delivery Person — RIGHT for all languages / all sizes */
.hero-card > #c2dDeliveryPersonBadge,
#c2dDeliveryPersonBadge {
  position: absolute !important;
  top: auto !important;
  bottom: 6px !important;
  right: 6px !important;
  left: auto !important;
  inset-inline-end: 6px !important;
  inset-inline-start: auto !important;
  transform: none !important;
  z-index: 8 !important;
}
body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge,
body.lang-ur #c2dDeliveryPersonBadge,
html[dir="rtl"] #c2dDeliveryPersonBadge {
  right: 6px !important;
  left: auto !important;
  inset-inline-end: 6px !important;
  inset-inline-start: auto !important;
  bottom: 6px !important;
  top: auto !important;
  transform: none !important;
}

/* Caption clear of right-side Delivery Person badge */
.hero-card > p {
  text-align: center !important;
  margin: 6px 56px 48px 16px !important;
  padding: 0 6px !important;
  z-index: 2 !important;
}
body.lang-ur .hero-card > p {
  direction: rtl !important;
  text-align: center !important;
  margin: 6px 16px 48px 56px !important;
}

@media (max-width: 760px) {
  .hero-card > #c2dDeliveryPersonBadge,
  #c2dDeliveryPersonBadge,
  body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
  html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge {
    right: 4px !important;
    left: auto !important;
    inset-inline-end: 4px !important;
    inset-inline-start: auto !important;
    bottom: 4px !important;
  }
  .hero-card > p {
    margin: 4px 48px 46px 12px !important;
  }
  body.lang-ur .hero-card > p {
    margin: 4px 12px 46px 48px !important;
  }
}



/* ============================================================
   V41 — NO OVERLAP (mobile Urdu + all sizes)
   Home Delivery = physical LEFT bottom
   Delivery Person = physical RIGHT bottom
   Caption centered with clearance above both badges
   Banner logo never outside its box
   ============================================================ */

/* Hero card is the positioning context */
.hero-visual .hero-card,
.hero-card {
  position: relative !important;
  overflow: visible !important;
  padding-bottom: 52px !important; /* room for bottom badges */
  box-sizing: border-box !important;
}

/* Home Delivery — always physical LEFT bottom */
.hero-card .float-chip.chip-2 {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  inset-inline-start: 8px !important;
  inset-inline-end: auto !important;
  bottom: 8px !important;
  top: auto !important;
  z-index: 7 !important;
  transform: none !important;
}

/* Delivery Person — always physical RIGHT bottom */
.hero-card > #c2dDeliveryPersonBadge,
#c2dDeliveryPersonBadge {
  position: absolute !important;
  left: auto !important;
  right: 8px !important;
  inset-inline-start: auto !important;
  inset-inline-end: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  transform: none !important;
  z-index: 8 !important;
  max-width: calc(50% - 16px) !important; /* never cross into Home Delivery half */
}

body.lang-ur .hero-card .float-chip.chip-2,
html[dir="rtl"] .hero-card .float-chip.chip-2 {
  left: 8px !important;
  right: auto !important;
  inset-inline-start: 8px !important;
  inset-inline-end: auto !important;
}

body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge,
body.lang-ur #c2dDeliveryPersonBadge,
html[dir="rtl"] #c2dDeliveryPersonBadge {
  left: auto !important;
  right: 8px !important;
  inset-inline-start: auto !important;
  inset-inline-end: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  transform: none !important;
}

/* Caption: centered, above badge row — no overlap */
.hero-card > p {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  margin: 8px 12px 8px 12px !important;
  padding: 0 8px !important;
  max-width: 100% !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
  transform: none !important;
}
body.lang-ur .hero-card > p {
  direction: rtl !important;
  text-align: center !important;
}

/* Same Day stays top — do not collide with bottom row */
.hero-card .float-chip.chip-1 {
  z-index: 7 !important;
}

@media (max-width: 760px) {
  .hero-visual .hero-card,
  .hero-card {
    padding-bottom: 50px !important;
  }
  .hero-card .float-chip.chip-2 {
    left: 6px !important;
    inset-inline-start: 6px !important;
    bottom: 6px !important;
    font-size: 10px !important;
  }
  .hero-card > #c2dDeliveryPersonBadge,
  #c2dDeliveryPersonBadge,
  body.lang-ur .hero-card > #c2dDeliveryPersonBadge,
  html[dir="rtl"] .hero-card > #c2dDeliveryPersonBadge {
    right: 6px !important;
    left: auto !important;
    inset-inline-end: 6px !important;
    inset-inline-start: auto !important;
    bottom: 6px !important;
    max-width: calc(50% - 12px) !important;
    font-size: 10px !important;
  }
  .hero-card > p {
    margin: 6px 10px 4px 10px !important;
    font-size: 12px !important;
  }
}

/* ---- Banner logo: never out of box (all sizes) ---- */
#c2dPhoneBanner,
#c2dPhoneBanner .c2d-phone-banner-stage,
#c2dPhoneBanner .c2d-banner-fixed-logo {
  overflow: hidden !important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo img,
#c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}
@media (max-width: 760px) {
  #c2dPhoneBanner .c2d-banner-fixed-logo {
    overflow: hidden !important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}



/* ============================================================
   V42 — User requested only:
   1) Hide admin-only location empty text (users never see it)
   2) Footer Delivery section bike icon visible (EN+UR, themes)
   3) Category dropdown: height = content only (no extra blank)
   ============================================================ */

/* Dropdown: shrink to content — no tall empty panel on mobile/desktop */
.cat-menu-shared-drop {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(60vh, 420px) !important;
  padding: 10px 14px !important;
  column-count: 1 !important; /* single column avoids tall empty column space */
}
.cat-menu-shared-drop.cmd-flat-mode {
  padding: 12px 14px !important;
  min-height: 0 !important;
  height: auto !important;
}
.cat-menu-shared-drop .cmd-treelist,
.cat-menu-shared-drop .cmd-flatgrid {
  min-height: 0 !important;
  height: auto !important;
}
.cat-menu-shared-drop .cmd-row {
  padding: 9px 6px !important;
}
.cat-menu-shared-drop .cmd-empty {
  padding: 14px 0 !important;
}
@media (max-width: 760px) {
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.cmd-flat-mode {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(50vh, 320px) !important;
  }
}

/* Footer delivery bike icon */
.footer-delivery-col .c2d-delivery-contact-icon,
.c2d-delivery-contact-heading .c2d-delivery-contact-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(6, 182, 255, 0.12) !important;
  color: var(--blue) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.footer-delivery-col .c2d-delivery-contact-icon svg,
.c2d-delivery-contact-heading .c2d-delivery-contact-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
}
.footer-delivery-col .c2d-delivery-contact-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* Never show admin-only empty location hints if any leftover markup */
.c2d-delivery-location-empty {
  display: none !important;
}



/* ============================================================
   V43 — Mobile-only dropdown content height + product sticky nav
   ============================================================ */
@media (min-width: 1025px) {
  .cat-menu-shared-drop {
    column-count: 2 !important;
    column-gap: 24px !important;
    padding: 16px 22px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(60vh, 420px) !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    padding: 20px 24px !important;
  }
}
@media (max-width: 760px) {
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(50vh, 320px) !important;
    padding: 8px 12px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
  .cat-menu-shared-drop .cmd-treelist,
  .cat-menu-shared-drop .cmd-flatgrid {
    min-height: 0 !important;
    height: auto !important;
  }
  .cat-menu-shared-drop .cmd-row { padding: 9px 6px !important; }
  .cat-menu-shared-drop .cmd-empty { padding: 12px 0 !important; }

  header.main-header.c2d-mobile-nav-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }
  .cat-menu-bar.c2d-mobile-nav-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
  }
  body.product-detail-page header.main-header.c2d-mobile-nav-fixed,
  body.product-detail-page .cat-menu-bar.c2d-mobile-nav-fixed {
    position: fixed !important;
  }
  body.product-detail-page .cat-menu-shared-drop.open,
  .cat-menu-bar.c2d-mobile-nav-fixed .cat-menu-shared-drop.open {
    z-index: 1001 !important;
  }
}


/* ============================================================
   V44 — MOBILE ONLY: category dropdown = content height
   Desktop/laptop/tablet: unchanged
   ============================================================ */
@media (max-width: 760px) {
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.cat-menu-shared-drop.open,
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode,
  #catMenuSharedDrop.cat-menu-shared-drop.c2d-mobile-drop-fit {
    column-count: 1 !important;
    min-height: 0 !important;
    padding: 6px 12px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* height + max-height + overflow-y controlled by JS (fitMobileCatMenuDropHeight) */
  }
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-tree-item {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }
  #catMenuSharedDrop .cmd-row {
    padding: 10px 6px !important;
    margin: 0 !important;
  }
  #catMenuSharedDrop .cmd-empty {
    padding: 12px 0 !important;
  }
}
@media (min-width: 761px) {
  #catMenuSharedDrop.c2d-mobile-drop-fit {
    height: auto !important;
    max-height: min(60vh, 420px) !important;
  }
}


/* ============================================================
   V45 — Mobile Products dropdown: scroll to last item
   Short lists stay content-height; long lists scroll inside panel
   Page body is NOT locked when dropdown is open
   ============================================================ */
@media (max-width: 760px) {
  #catMenuSharedDrop.c2d-mobile-drop-fit {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  /* Ensure last rows are not clipped under browser chrome */
  #catMenuSharedDrop.c2d-mobile-drop-fit .cmd-row:last-child {
    margin-bottom: 4px !important;
  }
}


/* ============================================================
   V46 — Mobile dropdown FINAL
   1) Short lists (Laptops 2 items): height = content ONLY — no blank
   2) Long lists (Products): max-height + overflow-y auto — scroll to end
   3) Desktop/laptop/tablet: untouched
   ============================================================ */
@media (max-width: 760px) {
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.cat-menu-shared-drop.open,
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    column-gap: 0 !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    left: 6px !important;
    right: auto !important;
    min-height: 0 !important;
    height: fit-content !important;
    max-height: min(55dvh, 400px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 6px 10px 8px !important;
    box-sizing: border-box !important;
  }
  /* Hidden flyouts must not take space */
  #catMenuSharedDrop .cmd-flyout {
    display: none !important;
  }
  #catMenuSharedDrop .cmd-tree-item.flyout-open > .cmd-flyout {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 0 4px 8px !important;
    border: none !important;
  }
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-tree-item {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  #catMenuSharedDrop .cmd-row {
    padding: 11px 6px !important;
    line-height: 1.25 !important;
  }
  #catMenuSharedDrop .cmd-empty {
    padding: 10px 0 !important;
  }
}


/* ============================================================
   V47 — Mobile Products dropdown: force single column + no overflow
   Fixes partial letters / cut-off text on the right edge of the
   dropdown on all mobile pages (red-mark issue). Desktop/tablet
   unchanged. Content height / scroll rules from V42–V46 kept.
   ============================================================ */
@media (max-width: 760px) {
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.cat-menu-shared-drop.open,
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode,
  #catMenuSharedDrop.cat-menu-shared-drop.c2d-mobile-drop-fit {
    overflow-x: hidden !important;
    left: 6px !important;
    right: auto !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    box-sizing: border-box !important;
  }

  #catMenuSharedDrop .cmd-flatgrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #catMenuSharedDrop .cmd-treelist {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #catMenuSharedDrop .cmd-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding-inline: 6px !important;
  }

  #catMenuSharedDrop .cmd-tree-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #catMenuSharedDrop .cmd-flyout .cmd-row {
    white-space: normal !important;
  }
}


/* ============================================================
   V48 — Mobile dropdown: ZERO multi-column, ZERO partial/duplicate text
   EN page: no extra letters on the RIGHT edge
   UR page: no extra letters on the LEFT edge
   All pages (index + product). Desktop/tablet unchanged.
   ============================================================ */
@media (max-width: 760px) {
  /* Kill every multi-column / multi-grid path inside the shared drop */
  #catMenuSharedDrop,
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-mobile-drop-fit {
    column-count: 1 !important;
    column-width: auto !important;
    columns: 1 !important;
    display: block !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    left: 6px !important;
    right: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding-inline: 10px !important;
  }

  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-mobile-flat,
  #catMenuSharedDrop .cmd-tree-item {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    columns: 1 !important;
    column-count: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #catMenuSharedDrop .cmd-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 11px 6px !important;
    margin: 0 !important;
    /* never allow a second visual column */
    float: none !important;
    clear: both !important;
  }

  #catMenuSharedDrop .cmd-row::before,
  #catMenuSharedDrop .cmd-row::after {
    content: none !important;
    display: none !important;
  }

  /* RTL (Urdu): same single column, text on the correct side, no left-edge ghost letters */
  [dir="rtl"] #catMenuSharedDrop,
  body.lang-ur #catMenuSharedDrop {
    text-align: right !important;
  }
  [dir="rtl"] #catMenuSharedDrop .cmd-row,
  body.lang-ur #catMenuSharedDrop .cmd-row {
    text-align: right !important;
    direction: rtl !important;
  }
  [dir="ltr"] #catMenuSharedDrop .cmd-row,
  body:not(.lang-ur) #catMenuSharedDrop .cmd-row {
    text-align: left !important;
    direction: ltr !important;
  }
}


/* ============================================================
   V50 — FINAL: mobile dropdown never multi-column
   Ghost letters on EN right / UR left = CSS column-count split.
   Base is now column-count:1; desktop tree gets 2 cols only >=761px.
   ============================================================ */
@media (max-width: 760px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-mobile-drop-fit,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open,
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-columns: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    left: 6px !important;
    right: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-tree-item,
  .cat-menu-shared-drop .cmd-treelist,
  .cat-menu-shared-drop .cmd-products-flat,
  .cat-menu-shared-drop .cmd-flatgrid {
    display: block !important;
    column-count: 1 !important;
    columns: 1 !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  #catMenuSharedDrop .cmd-row,
  .cat-menu-shared-drop .cmd-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}
/* Desktop only: 2 columns for category tree (not Products flat list) */
@media (min-width: 1025px) {
  .cat-menu-shared-drop:not(.cmd-flat-mode) {
    column-count: 2 !important;
    column-gap: 24px !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode .cmd-products-flat {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2px 24px !important;
  }
}


/* ============================================================
   V51 — Mobile dropdown: no ghost letters, no FAB overlap,
   full category list scrollable to last item
   ============================================================ */

/* Dropdown above floating ↑↓ / WhatsApp when open */
#catMenuSharedDrop.cat-menu-shared-drop.open,
#catMenuSharedDrop.open {
  z-index: 1200 !important;
}

/* Hide page scroll FABs while category menu is open (they were covering names) */
body.c2d-cat-menu-open .back-top,
body.c2d-cat-menu-open .back-bottom {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Phones + narrow tablets (portrait AND landscape phones): ONE column only */
@media (max-width: 1024px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-mobile-drop-fit,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open,
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-columns: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    left: 6px !important;
    right: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    z-index: 1200 !important;
  }
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-tree-item,
  .cat-menu-shared-drop .cmd-treelist,
  .cat-menu-shared-drop .cmd-products-flat,
  .cat-menu-shared-drop .cmd-flatgrid {
    display: block !important;
    column-count: 1 !important;
    columns: 1 !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  #catMenuSharedDrop .cmd-row,
  .cat-menu-shared-drop .cmd-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
  }
}

/* True desktop only: multi-col for category tree; Products flat can use grid */
@media (min-width: 1025px) {
  .cat-menu-shared-drop:not(.cmd-flat-mode) {
    column-count: 2 !important;
    column-gap: 24px !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode .cmd-products-flat {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2px 24px !important;
  }
}


/* ============================================================
   V52 — Phone portrait + landscape: ONE column, full names,
   no cut/ghost text on the right (EN) or left (UR).
   Multi-column only on real tablets/desktops >=1025px.
   ============================================================ */
@media (max-width: 1024px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-mobile-drop-fit,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open,
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-column-count: 1 !important;
    -webkit-columns: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    left: 6px !important;
    right: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 1200 !important;
  }
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-tree-item,
  .cat-menu-shared-drop .cmd-products-flat,
  .cat-menu-shared-drop .cmd-treelist,
  .cat-menu-shared-drop .cmd-flatgrid {
    display: block !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    column-count: 1 !important;
    columns: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }
  #catMenuSharedDrop .cmd-row,
  .cat-menu-shared-drop .cmd-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
  }
}
@media (min-width: 1025px) {
  .cat-menu-shared-drop:not(.cmd-flat-mode) {
    column-count: 2 !important;
    column-gap: 24px !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode .cmd-products-flat {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px 24px !important;
    width: 100% !important;
  }
}


/* =========================================================
   C2D — DROPDOWN CATEGORY NAMES ONLY: FINAL RESPONSIVE FIT
   Scope: category dropdown names only. No website data/content is changed.
   Touch devices are also covered in landscape so a phone never needs to be
   rotated just to make category names visible.
   ========================================================= */
.cat-menu-shared-drop{
  box-sizing:border-box !important;
  max-width:calc(100vw - 16px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.cat-menu-shared-drop .cmd-treelist,
.cat-menu-shared-drop .cmd-products-flat,
.cat-menu-shared-drop .cmd-flatgrid,
.cat-menu-shared-drop .cmd-tree-item{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
.cat-menu-shared-drop .cmd-row{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  white-space:normal !important;
  line-height:1.45 !important;
  padding-inline:8px !important;
}
@media (pointer:coarse) and (hover:none) and (max-width:1366px){
  .cat-menu-shared-drop{
    left:6px !important;
    right:auto !important;
    inset-inline-start:6px !important;
    inset-inline-end:auto !important;
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    min-width:0 !important;
    column-count:1 !important;
    columns:1 !important;
    padding:12px 14px 18px !important;
    overflow-x:hidden !important;
    background:var(--card) !important;
    backdrop-filter:none !important;
  }
  .cat-menu-shared-drop .cmd-flatgrid,
  .cat-menu-shared-drop .cmd-treelist,
  .cat-menu-shared-drop .cmd-products-flat,
  .cat-menu-shared-drop .cmd-tree-item{
    display:block !important;
    grid-template-columns:none !important;
    columns:1 !important;
    width:100% !important;
  }
  .cat-menu-shared-drop .cmd-row{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:8px !important;
    min-height:42px !important;
    height:auto !important;
    padding-block:10px !important;
    padding-inline:6px !important;
    text-align:start !important;
  }
  .cat-menu-shared-drop .cmd-row > *{
    min-width:0 !important;
  }
  .cat-menu-shared-drop .cmd-flyout{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:4px 0 0 !important;
    transform:none !important;
    box-shadow:none !important;
  }
}
@media (max-width:640px){
  .cat-menu-shared-drop{ width:calc(100vw - 12px) !important; }
}


/* ================================================================
   DROPDOWN CATEGORIES ONLY — FINAL RESPONSIVE ALIGNMENT HARDENING
   No website/content/data changes. The shared category dropdown is
   viewport-anchored by JS so every category opens fully on-screen.
   ================================================================ */
#catMenuSharedDrop.cat-menu-shared-drop{
  position:fixed !important;
  box-sizing:border-box !important;
  margin:0 !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  z-index:10050 !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-row{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  white-space:normal !important;
  line-height:1.45 !important;
  text-overflow:clip !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item .cmd-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout{
  max-width:min(360px, calc(100vw - 24px)) !important;
  box-sizing:border-box !important;
}
@media (max-width:760px){
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode{
    left:8px !important;
    right:auto !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    min-width:0 !important;
    padding:8px 10px 12px !important;
    border-radius:0 0 14px 14px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row{
    min-height:40px !important;
    padding:10px 7px !important;
    font-size:clamp(12px, 3.4vw, 14px) !important;
    line-height:1.5 !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:4px 8px !important;
  }
}
@media (min-width:761px){
  #catMenuSharedDrop.cat-menu-shared-drop{
    max-width:calc(100vw - 24px) !important;
  }
}

/* ================================================================
   C2D DROPDOWN — FINAL VIEWPORT-SAFE CATEGORY NAMES
   Scope: category dropdown only. No product/content/data changes.
   ================================================================ */
#catMenuSharedDrop.cat-menu-shared-drop {
  position: fixed !important;
  box-sizing: border-box !important;
  z-index: 10050 !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.5 !important;
  border-bottom: 1px solid var(--border) !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-row > span,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-row > a {
  min-width: 0 !important;
  max-width: 100% !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout {
  box-sizing: border-box !important;
  max-width: min(360px, calc(100vw - 24px)) !important;
}

@media (min-width: 1025px) {
  #catMenuSharedDrop.cat-menu-shared-drop:not(.cmd-flat-mode) {
    column-count: 2 !important;
    column-gap: 24px !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode .cmd-products-flat {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px 24px !important;
  }
}

@media (max-width: 1024px) {
  /* Portrait + landscape phones, tablets and touch laptops: one column only. */
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.cat-menu-shared-drop.open,
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode {
    left: 6px !important;
    right: auto !important;
    inset-inline-start: 6px !important;
    inset-inline-end: auto !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-columns: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
    padding: 8px 12px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-mobile-category-flat {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
    column-count: 1 !important;
    columns: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row,
  #catMenuSharedDrop.cat-menu-shared-drop .c2d-mobile-category-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding-block: 10px !important;
    padding-inline: calc(8px + (var(--c2d-cat-depth, 0) * 12px)) !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
    flex-wrap: wrap !important;
    flex: 0 0 auto !important;
  }
  /* Mobile/tablet must never render nested categories as side flyouts. */
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item.flyout-open > .cmd-flyout {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row,
  #catMenuSharedDrop.cat-menu-shared-drop .c2d-mobile-category-row {
    font-size: 14px !important;
    line-height: 1.55 !important;
    min-height: 46px !important;
  }
}


/* ============================================================
   C2D DROPDOWN — v53 FINAL TARGETED FIX
   Scope: shared category dropdown positioning + category-name overflow only.
   No website data/content/design is changed.
   ============================================================ */
#catMenuSharedDrop.cat-menu-shared-drop {
  position: fixed !important;
  box-sizing: border-box !important;
  transform: translateY(0) scale(1) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 12000 !important;
}

#catMenuSharedDrop.cat-menu-shared-drop,
#catMenuSharedDrop.cat-menu-shared-drop.open,
#catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode {
  max-width: calc(100vw - 24px) !important;
  min-width: 0 !important;
}

#catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-mobile-category-flat {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
}

#catMenuSharedDrop.cat-menu-shared-drop .cmd-row,
#catMenuSharedDrop.cat-menu-shared-drop .c2d-mobile-category-row {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* Desktop/laptop: one shared panel, anchored to the actual clicked category. */
@media (min-width: 1025px) {
  #catMenuSharedDrop.cat-menu-shared-drop {
    max-width: calc(100vw - 24px) !important;
  }
}

/* Phones/tablets/iPads: the complete list is one physical viewport column.
   There is no second CSS column and no side flyout, so EN cannot leak to the
   right edge and UR cannot leak to the left edge. */
@media (max-width: 1024px) {
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.cat-menu-shared-drop.open,
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode,
  #catMenuSharedDrop.cat-menu-shared-drop.c2d-mobile-drop-fit {
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-columns: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-inline: 12px !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-mobile-category-flat {
    display: block !important;
    grid-template-columns: none !important;
    grid-auto-columns: auto !important;
    grid-auto-flow: row !important;
    column-count: 1 !important;
    columns: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row,
  #catMenuSharedDrop.cat-menu-shared-drop .c2d-mobile-category-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-block: 10px !important;
    padding-inline: 6px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    float: none !important;
    clear: both !important;
    break-inside: avoid !important;
  }

  /* Never render nested categories as an external/right/left flyout on touch. */
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item.flyout-open > .cmd-flyout {
    display: none !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  /* Keep the mobile category list above page floating controls without hiding
     the page content itself. */
  #catMenuSharedDrop.cat-menu-shared-drop.open {
    z-index: 12000 !important;
  }
}

@media (max-width: 480px) {
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row,
  #catMenuSharedDrop.cat-menu-shared-drop .c2d-mobile-category-row {
    min-height: 44px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* ================================================================
   C2D — DROPDOWN CATEGORIES: FINAL SCOPED RESPONSIVE RULES
   Only the category dropdown is affected.
   ================================================================ */
#catMenuSharedDrop.cat-menu-shared-drop {
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  isolation: isolate;
}

#catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

#catMenuSharedDrop.cat-menu-shared-drop .cmd-row .cmd-label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  unicode-bidi: plaintext !important;
}

#catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout-arrow {
  flex: 0 0 auto !important;
  margin-inline-start: 8px !important;
}

/* Desktop/laptop with hover: keep the panel attached to the active category.
   JS supplies the exact left/top coordinates; CSS must not reset them. */
@media (min-width: 1025px), (min-width: 641px) and (hover: hover) {
  #catMenuSharedDrop.cat-menu-shared-drop {
    position: fixed !important;
    transform: translateY(0) scale(1) !important;
    margin: 0 !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    z-index: 12000 !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Phone/tablet/iPad touch layouts: one vertical list, no side flyout,
   no multi-column text and no horizontal scrolling. */
@media (max-width: 1366px) and (hover: none) {
  #catMenuSharedDrop.cat-menu-shared-drop {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    display: block !important;
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-columns: 1 !important;
    padding: 8px 12px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 12000 !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-mobile-category-flat,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    column-count: 1 !important;
    columns: 1 !important;
    grid-template-columns: none !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 6px !important;
    flex: 0 0 auto !important;
  }

  /* Nested categories stay in the same vertical panel on touch. */
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item.flyout-open > .cmd-flyout {
    display: none !important;
  }
}

@media (max-width: 480px) and (hover: none) {
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
    min-height: 46px !important;
    padding-block: 10px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}


/* ================================================================
   C2D DROPDOWN — FINAL 1024/768/425/375/320 VIEWPORT LOGIC
   Scope is limited to the existing shared category dropdown.
   No website content/data/components are changed.
   ================================================================ */
#catMenuSharedDrop.cat-menu-shared-drop {
  box-sizing: border-box !important;
  max-width: calc(100vw - 12px) !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  writing-mode: horizontal-tb !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-mobile-category-flat,
#catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  writing-mode: horizontal-tb !important;
}
#catMenuSharedDrop.cat-menu-shared-drop .cmd-row .cmd-label {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  writing-mode: horizontal-tb !important;
  unicode-bidi: isolate !important;
}
html[dir="ltr"] #catMenuSharedDrop.cat-menu-shared-drop,
html[dir="ltr"] #catMenuSharedDrop.cat-menu-shared-drop .cmd-row,
html[dir="ltr"] #catMenuSharedDrop.cat-menu-shared-drop .cmd-label {
  direction: ltr !important;
  text-align: left !important;
}
html[dir="rtl"] #catMenuSharedDrop.cat-menu-shared-drop,
html[dir="rtl"] #catMenuSharedDrop.cat-menu-shared-drop .cmd-row,
html[dir="rtl"] #catMenuSharedDrop.cat-menu-shared-drop .cmd-label {
  direction: rtl !important;
  text-align: right !important;
}

/* 1024px and below: one vertical category list. The JS calculates the exact
   left/top coordinates from the active button; CSS must not force it to the
   far-left edge. */
@media (max-width: 1024px) {
  #catMenuSharedDrop.cat-menu-shared-drop,
  #catMenuSharedDrop.cat-menu-shared-drop.open,
  #catMenuSharedDrop.cat-menu-shared-drop.cmd-flat-mode {
    position: fixed !important;
    width: auto !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-columns: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
    display: block !important;
    padding: 8px 12px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-treelist,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-products-flat,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flatgrid,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-mobile-category-flat,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    column-count: 1 !important;
    columns: 1 !important;
    grid-template-columns: none !important;
    float: none !important;
  }

  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 6px !important;
    flex: 0 0 auto !important;
  }

  /* Nested categories stay in the same vertical flow. No off-screen side
     flyout can create the stray letters at the opposite viewport edge. */
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-flyout,
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-tree-item.flyout-open > .cmd-flyout {
    display: none !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 480px) {
  #catMenuSharedDrop.cat-menu-shared-drop {
    max-width: calc(100vw - 12px) !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
    min-height: 44px !important;
    padding-block: 10px !important;
    padding-inline: 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 360px) {
  #catMenuSharedDrop.cat-menu-shared-drop {
    max-width: calc(100vw - 12px) !important;
    padding-inline: 8px !important;
  }
  #catMenuSharedDrop.cat-menu-shared-drop .cmd-row {
    padding-inline: 5px !important;
    font-size: 13.5px !important;
  }
}


/* ============================================================
   V56 — 100% responsive dropdown at 1024 / 768 / 425 / 375 / 320
   Multi-column ONLY on wide desktop (>=1025px with hover).
   All narrower viewports: single solid column, no ghost letters.
   ============================================================ */
@media (max-width: 1024px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-mobile-drop-fit,
  #catMenuSharedDrop.c2d-mobile-single,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open,
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-column-count: 1 !important;
    -webkit-columns: 1 !important;
    column-gap: 0 !important;
    column-width: auto !important;
    overflow-x: hidden !important;
    background: var(--card) !important;
    background-color: var(--card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    min-height: 0 !important;
    z-index: 1300 !important;
    box-sizing: border-box !important;
  }
  body.light-mode #catMenuSharedDrop,
  body.light-mode #catMenuSharedDrop.open,
  body.light-mode .cat-menu-shared-drop {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-mobile-category-flat,
  #catMenuSharedDrop .cmd-tree-item,
  .cat-menu-shared-drop .cmd-products-flat,
  .cat-menu-shared-drop .cmd-treelist,
  .cat-menu-shared-drop .cmd-flatgrid {
    display: block !important;
    grid-template-columns: none !important;
    grid-auto-flow: row !important;
    column-count: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }
  #catMenuSharedDrop .cmd-row,
  .cat-menu-shared-drop .cmd-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }
  #catMenuSharedDrop .cmd-flyout {
    display: none !important;
  }
}

/* Desktop multi-col only when wide AND hover-capable */
@media (min-width: 1025px) and (hover: hover) {
  .cat-menu-shared-drop:not(.cmd-flat-mode) {
    column-count: 2 !important;
    column-gap: 24px !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
  }
  .cat-menu-shared-drop.cmd-flat-mode .cmd-products-flat {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px 24px !important;
  }
}


/* ============================================================
   V57 — Nuclear: kill ghost letters on ALL phone/tablet sizes
   1) Solid opaque panel (no see-through page text)
   2) column-count:1 always below 1025px
   3) No multi-col grid on products flat below 1025px
   ============================================================ */
#catMenuSharedDrop,
#catMenuSharedDrop.open,
.cat-menu-shared-drop,
.cat-menu-shared-drop.open {
  background: var(--card) !important;
  background-color: var(--card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}
body.light-mode #catMenuSharedDrop,
body.light-mode #catMenuSharedDrop.open,
body.light-mode .cat-menu-shared-drop {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

@media (max-width: 1024px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-mobile-single,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open,
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-column-count: 1 !important;
    -webkit-columns: 1 !important;
    column-gap: 0 !important;
    column-width: auto !important;
    overflow-x: hidden !important;
    isolation: isolate !important;
  }
  #catMenuSharedDrop *,
  .cat-menu-shared-drop * {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
  }
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-mobile-category-flat {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  #catMenuSharedDrop .cmd-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  /* Hide any flyout that could leak second-column text */
  #catMenuSharedDrop .cmd-flyout {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
}


/* V57b — absolute kill of multi-column below 1025px (must be last) */
@media (max-width: 1024px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-column-count: 1 !important;
  }
}


/* ============================================================
   V58 — CSS Grid layout for dropdown categories
   Replaces CSS column-count (root cause of ghost/edge letters).
   Mobile/tablet (<=1024): 1-column grid
   Desktop (>=1025): 2-col tree / 5-col Products grid
   ============================================================ */

/* Base: never use CSS multi-column on the shared drop */
#catMenuSharedDrop,
.cat-menu-shared-drop {
  column-count: 1 !important;
  columns: 1 !important;
  -webkit-column-count: 1 !important;
  background: var(--card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Shared list containers: CSS Grid */
#catMenuSharedDrop .cmd-treelist,
#catMenuSharedDrop .cmd-products-flat,
#catMenuSharedDrop .cmd-flatgrid,
#catMenuSharedDrop .cmd-mobile-category-flat,
.cat-menu-shared-drop .cmd-treelist,
.cat-menu-shared-drop .cmd-products-flat,
.cat-menu-shared-drop .cmd-flatgrid,
.cat-menu-shared-drop .cmd-mobile-category-flat {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  column-count: 1 !important;
  float: none !important;
}

#catMenuSharedDrop .cmd-row,
.cat-menu-shared-drop .cmd-row {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: both !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
}

/* Mobile + tablet + narrow laptop: force 1-col grid */
@media (max-width: 1024px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-grid-single,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open {
    column-count: 1 !important;
    columns: 1 !important;
    overflow-x: hidden !important;
    isolation: isolate !important;
  }
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-mobile-category-flat {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
  }
  #catMenuSharedDrop .cmd-flyout {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Desktop wide: Products = 5-col grid; category tree = 2-col grid */
@media (min-width: 1025px) and (hover: hover) {
  #catMenuSharedDrop.cmd-flat-mode .cmd-products-flat,
  .cat-menu-shared-drop.cmd-flat-mode .cmd-products-flat {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px 20px !important;
    column-count: 1 !important;
  }
  #catMenuSharedDrop.cmd-flat-mode .cmd-products-flat .cmd-row,
  .cat-menu-shared-drop.cmd-flat-mode .cmd-products-flat .cmd-row {
    grid-column: auto !important;
  }
  /* Category tree: 2-column grid of tree items */
  #catMenuSharedDrop:not(.cmd-flat-mode) .cmd-treelist,
  .cat-menu-shared-drop:not(.cmd-flat-mode) .cmd-treelist {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 24px !important;
    column-count: 1 !important;
  }
  #catMenuSharedDrop:not(.cmd-flat-mode) .cmd-treelist > .cmd-tree-item,
  .cat-menu-shared-drop:not(.cmd-flat-mode) .cmd-treelist > .cmd-tree-item {
    grid-column: auto !important;
    width: 100% !important;
  }
  #catMenuSharedDrop:not(.cmd-flat-mode) .cmd-treelist > .cmd-row,
  .cat-menu-shared-drop:not(.cmd-flat-mode) .cmd-treelist > .cmd-row {
    grid-column: auto !important;
  }
}


/* ============================================================
   V59 — Ghost-letter clip fix (dropdown only)
   Root cause: left/inset-inline + width:100vw + overflow-x:hidden
   clips 6–12px (EN right / UR left). Also kill leftover 2-col rules
   at 320/375/425/768/1024.
   ============================================================ */
#catMenuSharedDrop,
#catMenuSharedDrop.open,
.cat-menu-shared-drop,
.cat-menu-shared-drop.open {
  box-sizing: border-box !important;
  column-count: 1 !important;
  columns: 1 !important;
  -webkit-column-count: 1 !important;
  background: var(--card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  right: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
}

#catMenuSharedDrop .cmd-treelist,
#catMenuSharedDrop .cmd-products-flat,
#catMenuSharedDrop .cmd-flatgrid,
#catMenuSharedDrop .cmd-mobile-category-flat {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  column-count: 1 !important;
  float: none !important;
}

#catMenuSharedDrop .cmd-row,
#catMenuSharedDrop .cmd-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
}

@media (max-width: 1024px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-grid-single {
    column-count: 1 !important;
    overflow-x: hidden !important;
    max-width: none !important; /* JS sets exact pixel width */
  }
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-mobile-category-flat {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  #catMenuSharedDrop .cmd-row {
    grid-column: auto !important;
    width: 100% !important;
  }
  #catMenuSharedDrop .cmd-flyout {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1025px) and (hover: hover) {
  #catMenuSharedDrop.cmd-flat-mode .cmd-products-flat {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px 20px !important;
  }
  #catMenuSharedDrop:not(.cmd-flat-mode) .cmd-treelist {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 24px !important;
  }
}


/* ================================================================
   V-FINAL — 100% Responsive Mobile Dropdown Categories
   Kill ALL multi-column / multi-grid artifacts that produce
   ghost single letters on the right edge (EN) or left (UR).
   Applies to phones, DevTools responsive, tablets ≤1024px.
   ================================================================ */

@media (max-width: 1024px) {
  /* Panel itself: one column, full safe width, no horizontal overflow */
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  #catMenuSharedDrop.cmd-flat-mode,
  #catMenuSharedDrop.c2d-mobile-drop-fit,
  #catMenuSharedDrop.c2d-grid-single,
  .cat-menu-shared-drop,
  .cat-menu-shared-drop.open,
  .cat-menu-shared-drop.cmd-flat-mode {
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-width: auto !important;
    column-gap: 0 !important;
    column-fill: auto !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    contain: layout style !important;
  }

  /* All list containers: strict single-column CSS Grid */
  #catMenuSharedDrop .cmd-treelist,
  #catMenuSharedDrop .cmd-products-flat,
  #catMenuSharedDrop .cmd-flatgrid,
  #catMenuSharedDrop .cmd-mobile-category-flat,
  #catMenuSharedDrop .cmd-tree-item,
  .cat-menu-shared-drop .cmd-treelist,
  .cat-menu-shared-drop .cmd-products-flat,
  .cat-menu-shared-drop .cmd-flatgrid,
  .cat-menu-shared-drop .cmd-mobile-category-flat,
  .cat-menu-shared-drop .cmd-tree-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: 1fr !important;
    column-count: 1 !important;
    columns: 1 !important;
    -webkit-column-count: 1 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }

  /* Every category / product row: full width, text never clipped */
  #catMenuSharedDrop .cmd-row,
  #catMenuSharedDrop a.cmd-row,
  #catMenuSharedDrop .cmd-label,
  .cat-menu-shared-drop .cmd-row,
  .cat-menu-shared-drop a.cmd-row,
  .cat-menu-shared-drop .cmd-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-x: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    column-span: none !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    padding-inline: 8px 10px !important;
    text-align: start !important;
    direction: inherit !important;
  }

  /* Hide any flyouts completely on compact viewports */
  #catMenuSharedDrop .cmd-flyout,
  .cat-menu-shared-drop .cmd-flyout {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Ensure no residual ::before/::after or pseudo content creates letters */
  #catMenuSharedDrop .cmd-row::before,
  #catMenuSharedDrop .cmd-row::after,
  #catMenuSharedDrop .cmd-label::before,
  #catMenuSharedDrop .cmd-label::after {
    content: none !important;
    display: none !important;
  }
}

/* Extra-narrow phones (≤425px): extra safety padding so last letters never touch edge */
@media (max-width: 425px) {
  #catMenuSharedDrop,
  #catMenuSharedDrop.open,
  .cat-menu-shared-drop {
    padding-inline: 10px 12px !important;
  }
  #catMenuSharedDrop .cmd-row,
  .cat-menu-shared-drop .cmd-row {
    padding-inline: 6px 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* ================================================================
   Our Clients — continuous full-width auto-slide logo strip
   Placed below footer copyright. Admin-controlled speed & hover.
   ================================================================ */
.c2d-clients-section{
  width:100%;
  max-width:100%;
  margin:0;
  padding:28px 0 20px;
  background:transparent;
  border-top:1px solid rgba(148,163,184,.12);
  overflow:hidden;
}
.c2d-clients-head{
  text-align:center;
  margin-bottom:16px;
  padding:0 16px;
}
.c2d-clients-title{
  margin:0;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
  opacity:.92;
}
.c2d-clients-viewport{
  width:100%;
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
}
.c2d-clients-track{
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  will-change:transform;
  animation:c2dClientsScroll var(--c2d-clients-speed,40s) linear infinite;
}
.c2d-clients-section.is-paused .c2d-clients-track,
.c2d-clients-section:hover.is-pause-on-hover .c2d-clients-track{
  animation-play-state:paused;
}
@keyframes c2dClientsScroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
.c2d-client-item{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:160px;
  height:88px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(15,23,42,.35);
  border:1px solid rgba(148,163,184,.14);
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.72,.18,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.c2d-client-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  pointer-events:none;
  transition:transform .35s ease, filter .35s ease;
}
.c2d-client-item .c2d-client-name{
  display:none;
  margin-top:6px;
  font-size:11px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.c2d-clients-section.show-names .c2d-client-item{
  height:110px;
}
.c2d-clients-section.show-names .c2d-client-item .c2d-client-name{
  display:block;
}

/* --- Hover effects (Admin selectable) --- */
/* backlight */
.c2d-clients-section.hover-backlight .c2d-client-item:hover{
  transform:translateY(-6px) scale(1.06);
  border-color:rgba(14,165,233,.55);
  box-shadow:0 0 0 1px rgba(14,165,233,.25), 0 12px 32px rgba(14,165,233,.28), 0 0 40px rgba(34,211,238,.18);
  background:rgba(14,165,233,.12);
}
.c2d-clients-section.hover-backlight .c2d-client-item:hover img{
  filter:drop-shadow(0 0 10px rgba(34,211,238,.45));
}
/* glow */
.c2d-clients-section.hover-glow .c2d-client-item:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 0 24px rgba(56,189,248,.45), 0 8px 20px rgba(0,0,0,.25);
  border-color:rgba(56,189,248,.6);
}
/* scale */
.c2d-clients-section.hover-scale .c2d-client-item:hover{
  transform:scale(1.12);
  z-index:2;
  box-shadow:0 14px 28px rgba(0,0,0,.28);
}
.c2d-clients-section.hover-scale .c2d-client-item:hover img{
  transform:scale(1.05);
}
/* lift */
.c2d-clients-section.hover-lift .c2d-client-item:hover{
  transform:translateY(-10px);
  box-shadow:0 18px 36px rgba(0,0,0,.3);
  border-color:rgba(148,163,184,.35);
}
/* shine */
.c2d-clients-section.hover-shine .c2d-client-item::after{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.18) 45%,transparent 100%);
  transition:left .55s ease;
  pointer-events:none;
}
.c2d-clients-section.hover-shine .c2d-client-item:hover::after{
  left:130%;
}
.c2d-clients-section.hover-shine .c2d-client-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

body[data-theme="light"] .c2d-client-item{
  background:rgba(255,255,255,.85);
  border-color:rgba(15,48,78,.12);
  box-shadow:0 2px 8px rgba(15,48,78,.06);
}
body[data-theme="light"] .c2d-clients-section{
  border-top-color:rgba(15,48,78,.08);
}

@media (max-width:760px){
  .c2d-client-item{ width:120px; height:72px; padding:8px 10px; border-radius:12px; }
  .c2d-clients-track{ gap:16px; }
  .c2d-clients-section{ padding:20px 0 14px; }
}
@media (prefers-reduced-motion:reduce){
  .c2d-clients-track{ animation:none !important; }
}



/* ================================================================
   Our Clients FIXES — taller logos, continuous scroll (EN+UR),
   no RTL break, attractive subtitle under heading
   ================================================================ */
.c2d-clients-section{
  width:100% !important;
  max-width:100% !important;
  direction:ltr !important; /* always LTR so infinite scroll never breaks in Urdu */
  overflow:hidden !important;
}
.c2d-clients-head{
  text-align:center !important;
  margin-bottom:10px !important;
  padding:0 16px !important;
  direction:inherit; /* title/subtitle follow page language */
}
html[dir="rtl"] .c2d-clients-head,
body.lang-ur .c2d-clients-head{
  direction:rtl !important;
}
.c2d-clients-title{
  margin:0 0 6px !important;
}
.c2d-clients-subtitle{
  margin:0 auto !important;
  max-width:720px !important;
  font-size:clamp(0.82rem,1.6vw,0.98rem) !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  color:var(--text-dim) !important;
  opacity:.95 !important;
}
.c2d-clients-viewport{
  width:100% !important;
  overflow:hidden !important;
  direction:ltr !important;
}
.c2d-clients-track{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  width:max-content !important;
  direction:ltr !important;
  animation:c2dClientsScroll var(--c2d-clients-speed,40s) linear infinite !important;
  will-change:transform !important;
}
html[dir="rtl"] .c2d-clients-track,
body.lang-ur .c2d-clients-track{
  /* keep same leftward continuous motion so Urdu page does not break */
  animation-name:c2dClientsScroll !important;
  direction:ltr !important;
}
@keyframes c2dClientsScroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
/* Taller / longer logo cards — more height, full-fit images */
.c2d-client-item{
  width:180px !important;
  height:120px !important;
  min-height:120px !important;
  padding:12px 16px !important;
  border-radius:16px !important;
}
.c2d-client-item img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}
.c2d-clients-section.show-names .c2d-client-item{
  height:148px !important;
  min-height:148px !important;
}
@media (max-width:760px){
  .c2d-client-item{
    width:140px !important;
    height:100px !important;
    min-height:100px !important;
    padding:10px 12px !important;
  }
  .c2d-clients-section.show-names .c2d-client-item{
    height:126px !important;
    min-height:126px !important;
  }
}

/* Our Clients — full responsive all screen sizes + copyright below */
.c2d-clients-section{
  width:100% !important;
  max-width:100vw !important;
  box-sizing:border-box !important;
  padding:24px 0 18px !important;
  overflow:hidden !important;
}
.c2d-clients-head{ padding:0 12px !important; }
.c2d-clients-viewport{ width:100% !important; max-width:100% !important; }
.c2d-client-item{
  width:clamp(110px, 28vw, 180px) !important;
  height:clamp(88px, 22vw, 120px) !important;
  min-height:clamp(88px, 22vw, 120px) !important;
}
footer .c2d-clients-section + .footer-bottom,
#c2dFooterCopyright{
  margin-top:8px;
}
@media (max-width:1024px){
  .c2d-client-item{ width:150px !important; height:108px !important; min-height:108px !important; }
  .c2d-clients-track{ gap:18px !important; }
}
@media (max-width:760px){
  .c2d-clients-section{ padding:18px 0 12px !important; }
  .c2d-client-item{ width:128px !important; height:92px !important; min-height:92px !important; padding:8px 10px !important; }
  .c2d-clients-track{ gap:14px !important; }
  .c2d-clients-title{ font-size:1.05rem !important; }
  .c2d-clients-subtitle{ font-size:0.82rem !important; padding:0 8px; }
}
@media (max-width:480px){
  .c2d-client-item{ width:112px !important; height:80px !important; min-height:80px !important; border-radius:12px !important; }
  .c2d-clients-track{ gap:10px !important; }
}
@media (max-width:360px){
  .c2d-client-item{ width:100px !important; height:72px !important; min-height:72px !important; }
}


/* ===== C2D SMOOTH NO-FLICKER 2026 — all pages / sliders / popups ===== */
html, body{
  scroll-behavior: auto !important;
}
html.c2d-no-blink .reveal,
html.c2d-no-blink .reveal.in,
body.c2d-no-blink .reveal,
body.c2d-no-blink .reveal.in{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
/* Prevent flash on image swap / slider */
.c2d-banner-slide,
.c2d-banner-slide img,
.c2d-banner-slide video,
.c2d-banner-card-track,
.product-thumb img,
.c2d-client-item img{
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0);
}
/* Smooth continuous tracks without blink */
.c2d-clients-track,
.marquee,
#brandMarquee{
  animation-timing-function: linear !important;
  will-change: transform;
}
/* Modals / drawers / overlays — no opacity flicker on open */
.modal-overlay.open,
.cart-drawer,
.checkout-modal,
.cat-menu-shared-drop.open{
  animation: none !important;
}
/* Admin smooth */
body.admin-body *{
  scrollbar-width: thin;
}
body.admin-body .admin-panel,
body.admin-body .modal-card{
  transition: none !important;
}

/* ===== Banner + category dropdown tighter spacing (match badge/chip density) ===== */
.cat-menu-bar{
  margin-bottom: 0 !important;
  border-bottom-width: 1px;
}
.hero{
  padding: 12px 0 28px !important; /* was 60px top — reduce extra space under dropdown */
}
.banner-wrap,
#c2dPhoneBanner.banner-wrap,
.c2d-phone-banner.banner-wrap{
  margin-bottom: 14px !important; /* match tight space near Trusted Shop / Same Day chips */
  margin-top: 0 !important;
}
.hero-grid{
  margin-top: 0 !important;
  gap: 28px !important;
}
.hero-content .badge{
  margin-bottom: 10px !important;
}
@media (max-width: 760px){
  .hero{ padding: 8px 0 20px !important; }
  .banner-wrap,
  #c2dPhoneBanner.banner-wrap{ margin-bottom: 10px !important; }
}

/* Our Clients clickable vs static (Admin controlled) */
.c2d-client-item.is-clickable{ cursor:pointer; }
.c2d-client-item.is-static{
  cursor:default !important;
  pointer-events:auto;
}
.c2d-client-item.is-static:active{
  transform:none !important;
}


/* ===== C2D HARD NO FLICKER v2 — stop blink, jank, atak-atak ===== */
html.c2d-no-blink,
body.c2d-no-blink{
  scroll-behavior: auto !important;
}
/* Kill reveal / pulse / blink animations site-wide */
html.c2d-no-blink .reveal,
html.c2d-no-blink .reveal.in,
body.c2d-no-blink .reveal,
body.c2d-no-blink .reveal.in,
.c2d-banner-card-sheen,
[class*="blink"],
[class*="pulse"]{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
/* Banner slides: no opacity flash between cards */
#c2dPhoneBanner .c2d-banner-card{
  transition: transform .55s cubic-bezier(.22,.7,.2,1) !important;
}
#c2dPhoneBanner .c2d-banner-card.is-current{
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform .55s cubic-bezier(.22,.7,.2,1) !important;
}
#c2dPhoneBanner .c2d-banner-card:not(.is-current){
  transition: transform .55s cubic-bezier(.22,.7,.2,1), opacity .35s ease !important;
}
#c2dPhoneBanner .c2d-banner-card-sheen{
  display: none !important;
  animation: none !important;
}
/* Continuous tracks — smooth linear, no restart flicker */
.c2d-clients-track,
.marquee,
#brandMarquee{
  animation-timing-function: linear !important;
  animation-play-state: running !important;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Product images — no flash on hover swap */
.product-thumb img,
.product-card img{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Popups / drawers open without blink */
.modal-overlay,
.cart-drawer,
.checkout-modal,
.cat-menu-shared-drop{
  animation: none !important;
}

/* ===== Product card text style + advanced hover (Admin controlled) ===== */
.product-card.c2d-title-bold .product-body h4,
.product-card.c2d-title-bold h4{ font-weight:800 !important; }
.product-card.c2d-title-italic .product-body h4,
.product-card.c2d-title-italic h4{ font-style:italic !important; }
.product-card.c2d-body-bold .product-body p{ font-weight:700 !important; }
.product-card.c2d-body-italic .product-body p{ font-style:italic !important; }
.product-card .product-body h4{ color: var(--c2d-card-title-color, inherit); }
.product-card .product-body p{ color: var(--c2d-card-body-color, var(--text-dim)); }
.product-card .price,
.product-card .product-price{ color: var(--c2d-card-price-color, var(--blue)); }

.product-card.hover-shine:hover{ box-shadow:0 12px 28px rgba(6,182,255,.2); }
.product-card.hover-shine::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.product-card.hover-shine:hover::after{ transform:translateX(120%); }
.product-card.hover-border:hover{ box-shadow:0 0 0 2px rgba(6,182,255,.45), 0 12px 24px rgba(0,0,0,.2); }
.product-card.hover-scale-soft:hover{ transform:scale(1.03); }

.product-card.c2d-htxt-bold-title:hover .product-body h4{ font-weight:900 !important; }
.product-card.c2d-htxt-color-pop:hover .product-body h4{ color: var(--blue) !important; }
.product-card.c2d-htxt-italic-desc:hover .product-body p{ font-style:italic !important; }
.product-card.c2d-htxt-underline-title:hover .product-body h4{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:760px){
  .product-card.c2d-hover-screens-desktop,
  .product-card.c2d-hover-screens-mobile-off{
    transform:none !important;
  }
  .product-card.c2d-hover-screens-desktop:hover,
  .product-card.c2d-hover-screens-mobile-off:hover{
    transform:none !important;
    box-shadow:var(--shadow) !important;
  }
  .product-card.c2d-hover-screens-desktop.c2d-details-reveal:hover .c2d-product-details,
  .product-card.c2d-hover-screens-mobile-off.c2d-details-reveal:hover .c2d-product-details{
    /* keep mobile readable — details can still show via tap if needed */
  }
}

/* ===== C2D ULTRA SMOOTH / NO JANK v3 ===== */
html.c2d-no-blink *,
html.c2d-no-blink *::before,
html.c2d-no-blink *::after{
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
/* Keep continuous marquees/clients moving smoothly (transform only) */
html.c2d-no-blink .c2d-clients-track,
html.c2d-no-blink .marquee,
html.c2d-no-blink #brandMarquee,
html.c2d-no-blink .c2d-clients-track *{
  animation-duration: var(--c2d-clients-speed, 40s) !important;
  animation-iteration-count: infinite !important;
  transition-duration: 0s !important;
  animation-timing-function: linear !important;
}
html.c2d-no-blink .marquee,
html.c2d-no-blink #brandMarquee{
  animation-duration: var(--marquee-duration, 40s) !important;
  animation-iteration-count: infinite !important;
}
/* Banner: no sheen, shorter settle */
html.c2d-no-blink #c2dPhoneBanner .c2d-banner-card-sheen{ display:none !important; animation:none !important; }
html.c2d-no-blink #c2dPhoneBanner .c2d-banner-card{
  transition-duration: .35s !important;
  transition-property: transform, opacity !important;
}
html.c2d-no-blink .reveal,
html.c2d-no-blink .reveal.in{
  opacity:1 !important; transform:none !important; filter:none !important; animation:none !important;
}
/* Images decode without flash */
img{ image-rendering: auto; }
.product-thumb img, .c2d-client-item img, #c2dPhoneBanner img{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* Product card text layouts — Admin controlled (per product / global) */
.product-card.c2d-text-layout-half{
  position:relative;
}
.product-card.c2d-text-layout-half .product-body,
.product-card.c2d-text-layout-half .c2d-product-details{
  position:absolute; left:0; right:0; bottom:0; height:50%;
  margin:0; padding:12px 14px; box-sizing:border-box;
  background:linear-gradient(to top, rgba(8,12,22,.92), rgba(8,12,22,.55));
  border-radius:0 0 var(--radius-sm,12px) var(--radius-sm,12px);
  z-index:3; overflow:auto;
}
.product-card.c2d-text-layout-right{
  display:grid !important; grid-template-columns:1fr 1fr; align-items:stretch;
}
.product-card.c2d-text-layout-right .product-thumb{ grid-column:1; min-height:100%; }
.product-card.c2d-text-layout-right .product-body,
.product-card.c2d-text-layout-right .c2d-product-details{
  grid-column:2; padding:12px; box-sizing:border-box;
}
.product-card.c2d-text-layout-bottom .product-body{
  order:2; width:100%;
}
.product-card.c2d-text-layout-bottom .product-thumb{ order:1; }
.product-card.c2d-text-show-hover .product-body,
.product-card.c2d-text-show-hover .c2d-product-details{
  opacity:0; transition:opacity .25s ease;
}
.product-card.c2d-text-show-hover:hover .product-body,
.product-card.c2d-text-show-hover:hover .c2d-product-details{ opacity:1; }
.product-card.c2d-text-show-half-hover .product-body{
  max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding-top:0; padding-bottom:0;
}
.product-card.c2d-text-show-half-hover:hover .product-body{
  max-height:50%; padding:12px 14px;
}
.product-card.hover-shadow-pop:hover{ box-shadow:0 18px 40px rgba(0,0,0,.35) !important; transform:translateY(-6px); }
.product-card.hover-brighten:hover{ filter:brightness(1.08); }
.product-card.c2d-details-effect-from-right .c2d-product-details{ transform:translateX(12px); }
.product-card.c2d-details-effect-from-left .c2d-product-details{ transform:translateX(-12px); }
@media (max-width:760px){
  .product-card.c2d-text-screens-desktop,
  .product-card.c2d-text-screens-mobile-off.c2d-text-layout-half .product-body,
  .product-card.c2d-text-screens-mobile-off.c2d-text-layout-right{
    display:flex !important; grid-template-columns:1fr !important;
  }
  .product-card.c2d-text-screens-desktop.c2d-text-layout-half .product-body,
  .product-card.c2d-text-screens-desktop.c2d-text-layout-right .product-body{
    position:static !important; height:auto !important; background:transparent !important;
  }
}


/* Bottom text on hover — only hovered card; siblings keep position */
.product-card.c2d-text-layout-bottom,
.product-card.c2d-text-show-bottom-hover,
.product-card.c2d-text-show-bottom-always{
  position: relative !important;
  overflow: hidden;
}
.product-card.c2d-text-show-bottom-hover .product-body{
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5;
  background: linear-gradient(to top, rgba(8,12,22,.94), rgba(8,12,22,.72));
  transition: max-height .28s ease, opacity .22s ease, padding .22s ease;
  pointer-events: none;
  box-sizing: border-box;
  text-align: var(--c2d-text-align, start);
}
.product-card.c2d-text-show-bottom-hover:hover .product-body,
.product-card.c2d-text-show-bottom-hover:focus-within .product-body{
  max-height: var(--c2d-bottom-h, 48%) !important;
  opacity: 1;
  padding: 10px 12px !important;
  pointer-events: auto;
}
.product-card.c2d-text-show-bottom-always .product-body,
.product-card.c2d-text-layout-bottom.c2d-text-show-bottom-always .product-body{
  position: relative !important;
  order: 2;
  width: 100%;
  max-height: none !important;
  opacity: 1 !important;
  background: transparent;
  margin-top: var(--c2d-text-mt, 0px);
  margin-bottom: var(--c2d-text-mb, 0px);
  margin-left: var(--c2d-text-ml, 0px);
  margin-right: var(--c2d-text-mr, 0px);
  padding-top: var(--c2d-text-pt, 8px);
  padding-bottom: var(--c2d-text-pb, 8px);
  padding-left: var(--c2d-text-pl, 10px);
  padding-right: var(--c2d-text-pr, 10px);
  text-align: var(--c2d-text-align, start);
}
.product-card .product-body{
  margin-top: var(--c2d-text-mt, unset);
  margin-bottom: var(--c2d-text-mb, unset);
  margin-left: var(--c2d-text-ml, unset);
  margin-right: var(--c2d-text-mr, unset);
  padding-top: var(--c2d-text-pt, unset);
  padding-bottom: var(--c2d-text-pb, unset);
  padding-left: var(--c2d-text-pl, unset);
  padding-right: var(--c2d-text-pr, unset);
}
.product-card .product-body h4{ margin-bottom: var(--c2d-title-gap, unset); }
.product-card[style*="--c2d-card-bg"]{ background: var(--c2d-card-bg) !important; }
.product-card[style*="--c2d-card-thumb-bg"] .product-thumb{ background: var(--c2d-card-thumb-bg) !important; }
.product-card[style*="--c2d-card-pad"]{ padding: var(--c2d-card-pad) !important; }


/* Bottom text on hover — high priority so it works with no-blink mode */
.product-card.c2d-text-show-bottom-hover{
  position: relative !important;
  overflow: hidden !important;
}
.product-card.c2d-text-show-bottom-hover .product-body{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 6 !important;
  background: linear-gradient(to top, rgba(8,12,22,.95), rgba(8,12,22,.7)) !important;
  transition: max-height .25s ease, opacity .2s ease, padding .2s ease !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
.product-card.c2d-text-show-bottom-hover:hover .product-body,
.product-card.c2d-text-show-bottom-hover:focus-within .product-body{
  max-height: var(--c2d-bottom-h, 50%) !important;
  opacity: 1 !important;
  padding: 10px 12px !important;
  pointer-events: auto !important;
}
.product-card.c2d-text-show-bottom-always,
.product-card.c2d-text-layout-bottom.c2d-text-show-bottom-always{
  display: flex !important;
  flex-direction: column !important;
}
.product-card.c2d-text-show-bottom-always .product-body{
  position: relative !important;
  order: 2 !important;
  max-height: none !important;
  opacity: 1 !important;
  margin-top: var(--c2d-text-mt, 0px) !important;
  margin-bottom: var(--c2d-text-mb, 0px) !important;
  margin-left: var(--c2d-text-ml, 0px) !important;
  margin-right: var(--c2d-text-mr, 0px) !important;
  padding-top: var(--c2d-text-pt, 8px) !important;
  padding-bottom: var(--c2d-text-pb, 8px) !important;
  padding-left: var(--c2d-text-pl, 10px) !important;
  padding-right: var(--c2d-text-pr, 10px) !important;
}
html.c2d-no-blink .product-card.c2d-text-show-bottom-hover .product-body,
html.c2d-no-blink .product-card.c2d-text-show-bottom-hover:hover .product-body{
  transition-duration: .22s !important;
}


/* C2D CARD TEXT VISIBILITY FIX v15 */
/* Default: product text ALWAYS visible (image + text) */
.product-card .product-body,
.product-card .product-body.c2d-product-details{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  max-height: none !important;
  transform: none;
}
/* Only hide text when Admin enabled details-reveal AND not half/bottom layouts */
.product-card.c2d-details-reveal:not(.c2d-text-layout-half):not(.c2d-text-layout-bottom):not(.c2d-text-show-bottom-hover):not(.c2d-text-show-bottom-always) .c2d-product-details{
  opacity: 0 !important;
  pointer-events: none !important;
}
.product-card.c2d-details-reveal:not(.c2d-text-layout-half):not(.c2d-text-layout-bottom):not(.c2d-text-show-bottom-hover):not(.c2d-text-show-bottom-always):hover .c2d-product-details,
.product-card.c2d-details-reveal:not(.c2d-text-layout-half):not(.c2d-text-layout-bottom):not(.c2d-text-show-bottom-hover):not(.c2d-text-show-bottom-always):focus-within .c2d-product-details,
.product-card.c2d-details-reveal.c2d-details-open:not(.c2d-text-layout-half):not(.c2d-text-layout-bottom):not(.c2d-text-show-bottom-hover):not(.c2d-text-show-bottom-always) .c2d-product-details{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* HALF CARD: full image always visible; text occupies bottom half (no hover required) */
.product-card.c2d-text-layout-half{
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.product-card.c2d-text-layout-half .product-thumb{
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  flex: 1 1 50% !important;
  min-height: 140px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.product-card.c2d-text-layout-half .product-thumb img,
.product-card.c2d-text-layout-half .product-thumb svg{
  opacity: 1 !important;
  visibility: visible !important;
}
.product-card.c2d-text-layout-half .product-body,
.product-card.c2d-text-layout-half .product-body.c2d-product-details{
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 42% !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: linear-gradient(to top, rgba(8,12,22,.92), rgba(8,12,22,.55));
  z-index: 3 !important;
}

/* BOTTOM on HOVER: only hovered card shows text at bottom; others keep image only until hover */
.product-card.c2d-text-show-bottom-hover{
  position: relative !important;
  overflow: hidden !important;
}
.product-card.c2d-text-show-bottom-hover .product-thumb{
  width: 100% !important;
  min-height: 180px !important;
  opacity: 1 !important;
}
.product-card.c2d-text-show-bottom-hover .product-body,
.product-card.c2d-text-show-bottom-hover .product-body.c2d-product-details{
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 8 !important;
  background: linear-gradient(to top, rgba(8,12,22,.96), rgba(8,12,22,.75)) !important;
  transition: max-height .25s ease, opacity .2s ease, padding .2s ease !important;
  pointer-events: none !important;
}
.product-card.c2d-text-show-bottom-hover:hover .product-body,
.product-card.c2d-text-show-bottom-hover:hover .product-body.c2d-product-details,
.product-card.c2d-text-show-bottom-hover:focus-within .product-body,
.product-card.c2d-text-show-bottom-hover:focus-within .product-body.c2d-product-details{
  max-height: var(--c2d-bottom-h, 52%) !important;
  opacity: 1 !important;
  padding: 10px 12px !important;
  pointer-events: auto !important;
}

/* BOTTOM always */
.product-card.c2d-text-show-bottom-always .product-body,
.product-card.c2d-text-show-bottom-always .product-body.c2d-product-details{
  position: relative !important;
  opacity: 1 !important;
  max-height: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
}


/* C2D FULL IMAGE TEXT HOVER v16 */
/* Without hover: full-fit image. On hover: text visible */
.product-card.c2d-details-reveal,
.product-card.c2d-img-full-text-hover{
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.product-card.c2d-details-reveal .product-thumb,
.product-card.c2d-img-full-text-hover .product-thumb{
  position: relative !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: var(--c2d-img-h, 200px) !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.product-card.c2d-img-fit-contain .product-thumb img,
.product-card.c2d-img-fit-contain .product-thumb svg{
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}
.product-card.c2d-img-fit-cover .product-thumb img{
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}
.product-card.c2d-img-fit-fill .product-thumb img{
  object-fit: fill !important;
  width: 100% !important;
  height: 100% !important;
}
.product-card.c2d-details-reveal .product-body.c2d-product-details,
.product-card.c2d-img-full-text-hover .product-body.c2d-product-details{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  opacity: 0 !important;
  transform: translateY(12px);
  pointer-events: none !important;
  z-index: 6 !important;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  background: linear-gradient(to top, rgba(8,12,22,.96), rgba(8,12,22,.78)) !important;
  transition: opacity .22s ease, transform .22s ease !important;
  max-height: 55% !important;
  overflow: auto !important;
}
.product-card.c2d-details-reveal:hover .product-body.c2d-product-details,
.product-card.c2d-details-reveal:focus-within .product-body.c2d-product-details,
.product-card.c2d-img-full-text-hover:hover .product-body.c2d-product-details,
.product-card.c2d-img-full-text-hover:focus-within .product-body.c2d-product-details{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.product-card.c2d-text-hover-overlay-full:hover .product-body.c2d-product-details{
  max-height: 100% !important;
  top: 0 !important;
  bottom: 0 !important;
}
.product-card.c2d-text-hover-slide-up .product-body.c2d-product-details{
  transform: translateY(100%);
}
.product-card.c2d-text-hover-slide-up:hover .product-body.c2d-product-details{
  transform: translateY(0) !important;
}
.product-card.c2d-text-hover-fade .product-body.c2d-product-details{
  transform: none;
}


/* C2D TARGETED CARD/TOUCH FIX v17 — additive, no data changes */
.product-card.c2d-text-layout-half .product-body,
.product-card.c2d-text-layout-half .c2d-product-details{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  scrollbar-width:none !important;
}
.product-card.c2d-text-layout-half .product-body::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}
.product-card.c2d-text-layout-half .product-body p{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
  margin-bottom:8px !important;
}
.product-card.c2d-text-layout-half .product-body h4{font-size:clamp(12px,1.15vw,16px) !important;line-height:1.25 !important;margin-bottom:5px !important;}
.product-card.c2d-text-layout-half .product-body .product-foot{gap:6px !important;}
.product-card .mini-call{background:#2563eb !important;color:#fff !important;text-decoration:none !important;}
.product-card .mini-call:hover{background:#1d4ed8 !important;transform:scale(1.08) !important;}
.c2d-touch-details-badge{display:none;}
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="always-bottom"] .product-body{
    position:relative !important; order:2 !important; max-height:none !important; opacity:1 !important; visibility:visible !important; overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;
    max-height:0 !important;opacity:0 !important;visibility:hidden !important;overflow:hidden !important;padding:0 !important;z-index:9 !important;
    background:linear-gradient(to top,rgba(8,12,22,.97),rgba(8,12,22,.78)) !important;pointer-events:none !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{
    max-height:52% !important;opacity:1 !important;visibility:visible !important;padding:10px 12px !important;pointer-events:auto !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    display:flex !important;position:absolute !important;left:10px !important;bottom:10px !important;z-index:12 !important;
    align-items:center !important;justify-content:center !important;min-height:32px !important;padding:6px 12px !important;
    border:1px solid rgba(255,255,255,.2) !important;border-radius:999px !important;background:rgba(6,182,255,.92) !important;color:#fff !important;
    font:800 11px/1.1 Poppins,Arial,sans-serif !important;box-shadow:0 8px 18px rgba(0,0,0,.25) !important;
  }
  .c2d-touch-badge-ur{display:none;}
  body.lang-ur .c2d-touch-badge-en{display:none;}.c2d-touch-badge-ur{display:none;}body.lang-ur .c2d-touch-badge-ur{display:inline;}
}

/* Footer contact actions — both numbers get direct call + WhatsApp */
.c2d-footer-contact-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;}
.c2d-footer-contact-actions a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;text-decoration:none;border:1px solid rgba(255,255,255,.12);}
.c2d-footer-contact-actions .c2d-footer-call{background:#2563eb;color:#fff;}
.c2d-footer-contact-actions .c2d-footer-wa{background:#25D366;color:#fff;}
.c2d-footer-contact-actions svg{width:15px;height:15px;display:block;}

/* =========================================================
   V62 — TARGETED CARD TOUCH + RESPONSIVE TEXT REFINEMENT
   Additive presentation rules only; existing data is untouched.
   ========================================================= */
.product-card{position:relative;min-width:0;}
.product-card .product-body,.product-card .product-body.c2d-product-details{min-width:0;}
.product-card .product-title-row,.product-card .product-title-row span,
.product-card .product-body h4,.product-card .product-body p{overflow-wrap:anywhere;word-break:normal;}
body:not(.lang-ur) .product-card .product-body{padding-inline-start:22px;padding-inline-end:18px;}
body.lang-ur .product-card .product-body{padding-inline-start:18px;padding-inline-end:22px;text-align:right;}
body.lang-ur .product-card .product-foot{direction:rtl;}
.product-card .product-foot{min-width:0;flex-wrap:nowrap;}
.product-card .product-foot>div{flex:0 0 auto;}
.product-card .price{min-width:0;white-space:nowrap;}
.product-card .mini-call{display:none!important;}

/* Per-device text controls saved from Admin > Edit Product. */
.product-card[style*="--c2d-text-d-align"] .product-body{text-align:var(--c2d-text-d-align);}
.product-card[style*="--c2d-text-d-scale"] .product-body{font-size:calc(1em * var(--c2d-text-d-scale));}
.product-card[style*="--c2d-text-d-lines"] .product-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--c2d-text-d-lines);overflow:hidden;}
@media (min-width:821px){
  .product-card[style*="--c2d-text-d-align"] .product-body{text-align:var(--c2d-text-d-align);}
  .product-card[style*="--c2d-text-d-scale"] .product-body{font-size:calc(1em * var(--c2d-text-d-scale));}
  .product-card[style*="--c2d-text-d-lines"] .product-body p{-webkit-line-clamp:var(--c2d-text-d-lines);}
}
@media (min-width:521px) and (max-width:820px){
  .product-card[style*="--c2d-text-t-align"] .product-body{text-align:var(--c2d-text-t-align);}
  .product-card[style*="--c2d-text-t-scale"] .product-body{font-size:calc(1em * var(--c2d-text-t-scale));}
  .product-card[style*="--c2d-text-t-lines"] .product-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--c2d-text-t-lines);overflow:hidden;}
}
@media (max-width:520px){
  .product-card[style*="--c2d-text-m-align"] .product-body{text-align:var(--c2d-text-m-align);}
  .product-card[style*="--c2d-text-m-scale"] .product-body{font-size:calc(1em * var(--c2d-text-m-scale));}
  .product-card[style*="--c2d-text-m-lines"] .product-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--c2d-text-m-lines);overflow:hidden;}
}

/* Touch/no-mouse cards: image first; Details badge reveals the lower half.
   The badge starts at the bottom and moves under the discount badge when open. */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{overflow:hidden;}
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{top:auto;bottom:10px;left:10px;right:auto;transition:top .18s ease,bottom .18s ease,transform .18s ease;}
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:54px;bottom:auto;left:10px;right:auto;z-index:14;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{left:auto;right:10px;}
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{overflow:hidden!important;overscroll-behavior:none!important;}
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{max-height:54%!important;overflow:hidden!important;}
}

/* Banner logo: remove only the logo border/halo line, preserving its image. */
.c2d-banner-fixed-logo,
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{border:none!important;outline:none!important;box-shadow:none!important;}
.c2d-banner-fixed-logo .c2d-logo-halo{display:none!important;}


/* =========================================================
   C2D FINAL SAFE RESPONSIVE CARD + TOUCH IMAGE SLIDER
   Additive presentation-only rules. Existing product data is untouched.
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden!important;}
*,*::before,*::after{box-sizing:border-box;}
.products-grid{width:100%;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));}
.product-card{width:100%;min-width:0;max-width:100%;overflow:hidden;contain:layout paint;}
.product-thumb{width:100%;min-width:0;height:clamp(160px,18vw,220px);overflow:hidden;position:relative;}
.c2d-card-image-slider{position:relative;width:100%;height:100%;min-width:0;overflow:hidden;isolation:isolate;}
.c2d-card-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:10px!important;object-fit:contain!important;object-position:center!important;opacity:0!important;visibility:hidden!important;transform:none!important;transition:opacity .28s ease!important;z-index:1!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;}
.c2d-card-slide.is-active{opacity:1!important;visibility:visible!important;z-index:2!important;}
.c2d-card-image-dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;justify-content:center;gap:5px;max-width:calc(100% - 20px);padding:4px 7px;border-radius:999px;background:rgba(3,8,18,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.c2d-card-image-dot{width:7px!important;height:7px!important;min-width:7px!important;min-height:7px!important;padding:0!important;margin:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.65)!important;background:rgba(255,255,255,.45)!important;cursor:pointer!important;touch-action:manipulation!important;box-shadow:none!important;}
.c2d-card-image-dot.active{width:18px!important;min-width:18px!important;border-radius:999px!important;background:var(--blue)!important;border-color:var(--blue)!important;}
.product-card .product-body{min-width:0;overflow:visible;}
.product-card .product-body h4,.product-card .product-body p,.product-card .product-title-row{min-width:0;overflow-wrap:anywhere;word-break:normal;}
.product-card .product-meta-center-row{width:100%;min-width:0;display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:5px 8px!important;white-space:normal!important;overflow:visible!important;}
.product-card .product-meta-center-row>*{flex:0 1 auto!important;min-width:0!important;max-width:100%!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}
.product-card .product-body h4{line-height:1.28!important;margin-top:2px!important;margin-bottom:8px!important;display:block!important;}
.product-card .product-body p{line-height:1.45!important;margin-bottom:12px!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:4!important;overflow:hidden!important;}
.product-card .product-foot{width:100%;min-width:0;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;}
.product-card .product-foot>div{min-width:0;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:0 0 auto!important;}
.product-card .product-foot .price{min-width:0;white-space:nowrap!important;overflow:visible!important;font-size:clamp(13px,1.35vw,17px)!important;line-height:1.15!important;}
.product-card .mini-btn{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex:0 0 38px!important;}
.product-card .discount-badge,.product-card .product-offer-badge,.product-card .card-wishlist-btn{z-index:20!important;}
.product-card .discount-badge{max-width:calc(100% - 70px)!important;white-space:nowrap!important;overflow:visible!important;}
.product-card .product-offer-badge{max-width:calc(100% - 70px)!important;white-space:nowrap!important;overflow:visible!important;}
.product-card .c2d-touch-details-badge{touch-action:manipulation!important;}

/* Touch/no-mouse: text is readable without hover. Details remains the navigation/action badge. */
@media (hover:none),(pointer:coarse){
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;
    max-height:none!important;min-height:0!important;height:auto!important;opacity:1!important;visibility:visible!important;
    overflow:visible!important;padding:14px 14px 15px!important;pointer-events:auto!important;transform:none!important;
    background:transparent!important;z-index:3!important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    display:flex!important;position:absolute!important;left:10px!important;right:auto!important;bottom:10px!important;top:auto!important;
    min-width:54px!important;width:auto!important;min-height:30px!important;height:30px!important;padding:5px 10px!important;
    border-radius:999px!important;font-size:10px!important;line-height:1!important;z-index:30!important;
    background:rgba(6,182,255,.94)!important;color:#fff!important;box-shadow:0 6px 16px rgba(0,0,0,.28)!important;
    transition:top .16s ease,left .16s ease,right .16s ease,bottom .16s ease!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{left:auto!important;right:10px!important;}
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:50px!important;bottom:auto!important;left:10px!important;right:auto!important;min-height:28px!important;height:28px!important;padding:4px 9px!important;font-size:9px!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{left:auto!important;right:10px!important;}
  .product-card .c2d-card-image-dots{bottom:7px!important;gap:4px!important;}
}

/* Keep open Details badge below Offer/Discount badges. */
@media (hover:none),(pointer:coarse){
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-thumb:has(.product-offer-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-thumb:has(.product-offer-badge) .c2d-touch-details-badge{top:78px!important;}
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-thumb:has(.discount-badge):not(:has(.product-offer-badge)) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-thumb:has(.discount-badge):not(:has(.product-offer-badge)) .c2d-touch-details-badge{top:48px!important;}
}

/* Exact requested responsive widths. */
@media (max-width:1024px){
  .products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .product-thumb{height:clamp(165px,20vw,210px);}
}
@media (max-width:768px){
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .product-thumb{height:clamp(165px,27vw,205px);}
  .product-card .product-body{padding:13px 13px 14px;}
  .product-card .product-body h4{font-size:clamp(14px,2.2vw,16px)!important;}
  .product-card .product-body p{font-size:12.5px!important;-webkit-line-clamp:4!important;}
}
@media (max-width:425px){
  .products-grid{grid-template-columns:1fr;gap:14px;}
  .product-thumb{height:clamp(210px,58vw,270px);}
  .product-card .product-body{padding:13px 13px 14px;}
  .product-card .product-meta-center-row{justify-content:center!important;gap:4px 7px!important;}
  .product-card .product-meta-center-row>*{font-size:10px!important;}
  .product-card .product-body h4{font-size:16px!important;line-height:1.3!important;}
  .product-card .product-body p{font-size:13px!important;-webkit-line-clamp:5!important;}
  .product-card .product-foot .price{font-size:16px!important;}
}
@media (max-width:375px){
  .products-grid{gap:12px;}
  .product-thumb{height:clamp(195px,60vw,245px);}
  .product-card .product-body{padding:12px 12px 13px;}
  .product-card .product-meta-center-row{gap:4px 6px!important;}
  .product-card .product-meta-center-row>*{font-size:9.5px!important;}
  .product-card .product-body h4{font-size:15px!important;}
  .product-card .product-body p{font-size:12.5px!important;}
  .product-card .product-foot .price{font-size:15px!important;}
  .product-card .mini-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;}
  .product-card .product-foot>div{gap:6px!important;}
}
@media (max-width:320px){
  .product-thumb{height:195px;}
  .product-card .product-body{padding:11px 11px 12px;}
  .product-card .product-meta-center-row{gap:3px 5px!important;}
  .product-card .product-meta-center-row>*{font-size:9px!important;}
  .product-card .product-body h4{font-size:14px!important;}
  .product-card .product-body p{font-size:12px!important;-webkit-line-clamp:5!important;}
  .product-card .product-foot{gap:6px!important;}
  .product-card .product-foot .price{font-size:14px!important;}
  .product-card .mini-btn{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;}
}

/* Category bar / dropdown: never create page-level horizontal overflow. */
.cat-menu-bar{width:100%;max-width:100%;overflow:visible;}
.cat-menu-inner{min-width:0;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cat-menu-inner::-webkit-scrollbar{display:none;width:0;height:0;}
.cat-menu-btn,.cat-menu-home{flex:0 0 auto;max-width:calc(100vw - 20px);white-space:nowrap;}
.cat-menu-shared-drop{max-width:calc(100vw - 20px)!important;width:min(1180px,calc(100vw - 20px))!important;box-sizing:border-box!important;overflow-x:hidden!important;overflow-y:auto!important;}
.cat-menu-shared-drop .cmd-row,.cat-menu-shared-drop .cmd-label,.cat-menu-shared-drop a{min-width:0;overflow-wrap:anywhere;word-break:normal;}
@media(max-width:760px){
  .cat-menu-shared-drop{max-height:calc(100dvh - 145px)!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;}
  .cat-menu-shared-drop .cmd-row{min-height:42px!important;padding:9px 10px!important;}
}

/* Purposeful slider transitions must remain smooth even when global no-blink mode is on. */
html.c2d-no-blink .c2d-card-slide{transition:opacity .28s ease!important;}
html.c2d-no-blink .c2d-card-image-dot{transition:width .18s ease,background .18s ease!important;}


/* =========================================================
   C2D FINAL TOUCH CARD PRESENTATION — REQUESTED ONLY
   Touch/no-mouse devices: image occupies the upper half,
   product details remain visible in the lower half, and the
   Details badge stays at the top-left (EN) / top-right (UR).
   Existing product data and desktop mouse layout are untouched.
   ========================================================= */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    display:grid !important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important;
    height:clamp(520px,120vw,680px) !important;
    min-height:520px !important;
    max-height:680px !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    grid-row:1 !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    grid-row:2 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    padding:18px 18px 16px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    background:var(--card) !important;
    transform:none !important;
    z-index:3 !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    width:100% !important;
    height:100% !important;
    padding:8px !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    display:flex !important;
    position:absolute !important;
    top:10px !important;
    bottom:auto !important;
    left:10px !important;
    right:auto !important;
    z-index:40 !important;
    min-width:54px !important;
    max-width:calc(100% - 86px) !important;
    min-height:32px !important;
    height:32px !important;
    padding:6px 12px !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:999px !important;
    background:rgba(6,182,255,.96) !important;
    color:#fff !important;
    font:800 10px/1.1 Poppins,Arial,sans-serif !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-shadow:0 7px 18px rgba(0,0,0,.28) !important;
    transform:none !important;
    touch-action:manipulation !important;
  }

  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    left:auto !important;
    right:10px !important;
    font-family:var(--font-ur) !important;
  }

  /* Keep Details below Discount/Offers while preserving its requested side. */
  .product-card[data-touch-mode="tap-details"] .product-thumb:has(.discount-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb:has(.discount-badge) .c2d-touch-details-badge{
    top:52px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-thumb:has(.product-offer-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb:has(.product-offer-badge) .c2d-touch-details-badge{
    top:52px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-thumb:has(.discount-badge):has(.product-offer-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb:has(.discount-badge):has(.product-offer-badge) .c2d-touch-details-badge{
    top:88px !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body .product-meta-center-row,
  .product-card[data-touch-mode="tap-then-open"] .product-body .product-meta-center-row{
    flex:0 0 auto !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    flex:0 0 auto !important;
    margin-bottom:8px !important;
    max-height:3.9em !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{
    flex:1 1 auto !important;
    min-height:0 !important;
    margin-bottom:10px !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:4 !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-body .product-foot{
    flex:0 0 38px !important;
    min-height:38px !important;
    height:38px !important;
    align-items:center !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body .price,
  .product-card[data-touch-mode="tap-then-open"] .product-body .price{
    height:38px !important;
    min-height:38px !important;
    display:flex !important;
    align-items:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    line-height:1 !important;
    font-size:clamp(12px,3.7vw,17px) !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body .mini-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-body .mini-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body > *,
  .product-card[data-touch-mode="tap-then-open"] .product-body > *{
    max-width:100% !important;
  }
}

/* Requested mobile sizes: keep the two card halves usable without horizontal overflow. */
@media (max-width:425px){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    height:clamp(520px,126vw,610px) !important;
    min-height:520px !important;
    max-height:610px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    padding:14px 14px 14px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    font-size:clamp(15px,4.3vw,19px) !important;
  }
}

@media (max-width:375px){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    height:520px !important;
    min-height:520px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    padding:12px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{
    -webkit-line-clamp:3 !important;
  }
}

@media (max-width:320px){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    height:520px !important;
    min-height:520px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    padding:10px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    font-size:15px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body .price,
  .product-card[data-touch-mode="tap-then-open"] .product-body .price{
    font-size:12px !important;
  }
}

/* =========================================================
   C2D FINAL TOUCH CARD + MOBILE BANNER LOGIC — REQUESTED ONLY
   - No-mouse: Details badge defaults to EN bottom-right / UR bottom-left.
   - Tap: badge moves below the heart icon and the lower half remains readable.
   - Image auto-scroll runs only while Details is closed.
   - Mouse hover never hides the lower details/buttons.
   - Mobile banner logo uses the real 1024x683 logo ratio so the
     Computer 2 Day artwork fills its panel without the square-box whitespace.
   ========================================================= */

/* Keep product-card content inside its own geometry. */
.product-card{min-width:0;overflow:hidden;}
.product-card .product-thumb{min-width:0;position:relative;overflow:hidden;}
.product-card .c2d-card-image-slider{position:relative;min-width:0;min-height:0;overflow:hidden;}
.product-card .c2d-card-slide{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}

/* Desktop mouse: hover reveals the full lower content instead of hiding it. */
@media (hover:hover) and (pointer:fine){
  .product-card:hover .product-body,
  .product-card:focus-within .product-body{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .product-card:hover .product-body p,
  .product-card:focus-within .product-body p{
    -webkit-line-clamp:unset !important;
    line-clamp:unset !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .product-card:hover .product-body h4,
  .product-card:focus-within .product-body h4{
    max-height:none !important;
    overflow:visible !important;
  }
}

/* No-mouse / touch devices: exact requested badge behavior and two-half card. */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    display:grid !important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important;
    height:clamp(500px,118vw,680px) !important;
    min-height:500px !important;
    max-height:680px !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    grid-row:1 !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    grid-row:2 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    max-height:none !important;
    padding:clamp(12px,3.4vw,20px) clamp(12px,3.8vw,22px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    scrollbar-width:none !important;
    transform:none !important;
    z-index:3 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body::-webkit-scrollbar,
  .product-card[data-touch-mode="tap-then-open"] .product-body::-webkit-scrollbar{display:none!important;}

  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    width:100% !important;height:100% !important;min-height:0 !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    width:100% !important;height:100% !important;
    object-fit:contain !important;object-position:center !important;
    padding:0 !important;
  }

  /* Default: EN right-bottom / UR left-bottom. */
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    display:flex !important;
    position:absolute !important;
    top:auto !important;
    bottom:10px !important;
    left:auto !important;
    right:10px !important;
    z-index:50 !important;
    width:auto !important;
    min-width:58px !important;
    max-width:calc(100% - 20px) !important;
    height:32px !important;
    min-height:32px !important;
    padding:6px 12px !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(255,255,255,.24) !important;
    border-radius:999px !important;
    background:rgba(6,182,255,.96) !important;
    color:#fff !important;
    font:800 10px/1.1 Poppins,Arial,sans-serif !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-shadow:0 7px 18px rgba(0,0,0,.28) !important;
    transform:none !important;
    touch-action:manipulation !important;
    transition:top .18s ease,bottom .18s ease,left .18s ease,right .18s ease,transform .18s ease !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    left:10px !important;right:auto !important;font-family:var(--font-ur) !important;
  }

  /* After Details click: place the small badge directly under the heart icon. */
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:56px !important;
    bottom:auto !important;
    right:10px !important;
    left:auto !important;
    min-width:54px !important;
    width:auto !important;
    height:29px !important;
    min-height:29px !important;
    padding:5px 10px !important;
    font-size:9px !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    left:10px !important;right:auto !important;
  }

  /* Heart is always on the language-appropriate outer side. */
  .product-card .product-thumb .card-wishlist-btn{
    top:10px !important;right:10px !important;left:auto !important;z-index:60 !important;
  }
  body.lang-ur .product-card .product-thumb .card-wishlist-btn{
    left:10px !important;right:auto !important;
  }

  /* Do not let discount/offer badges cover the Details control. */
  .product-card .product-thumb .discount-badge,
  .product-card .product-thumb .product-offer-badge{z-index:45 !important;}

  /* Lower half: complete text and buttons remain available without hover. */
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    flex:0 0 auto !important;max-height:none !important;overflow:visible !important;
    white-space:normal !important;overflow-wrap:anywhere !important;word-break:normal !important;
    margin:2px 0 8px !important;line-height:1.28 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{
    flex:0 0 auto !important;display:block !important;-webkit-line-clamp:unset !important;line-clamp:unset !important;
    max-height:none !important;overflow:visible !important;white-space:normal !important;
    overflow-wrap:anywhere !important;word-break:normal !important;margin:0 0 10px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot{
    margin-top:auto !important;flex:0 0 40px !important;min-height:40px !important;height:40px !important;
    width:100% !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;gap:8px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot .price,
  .product-card[data-touch-mode="tap-then-open"] .product-foot .price{
    min-width:0 !important;height:40px !important;display:flex !important;align-items:center !important;
    white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important;
    line-height:1 !important;font-size:clamp(13px,3.8vw,18px) !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot>div,
  .product-card[data-touch-mode="tap-then-open"] .product-foot>div{
    display:flex !important;align-items:center !important;gap:7px !important;height:40px !important;
  }
  .product-card[data-touch-mode="tap-details"] .mini-btn,
  .product-card[data-touch-mode="tap-then-open"] .mini-btn{
    width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;flex:0 0 40px !important;
  }
}

/* Requested phone sizes: keep enough room for both complete text and action row. */
@media (max-width:425px){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{height:clamp(500px,132vw,610px)!important;min-height:500px!important;max-height:610px!important;}
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{padding:12px!important;}
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{font-size:clamp(14px,4.3vw,17px)!important;}
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{font-size:clamp(12px,3.5vw,14px)!important;line-height:1.45!important;}
  .product-card[data-touch-mode="tap-details"] .product-foot .price,
  .product-card[data-touch-mode="tap-then-open"] .product-foot .price{font-size:clamp(12px,3.9vw,16px)!important;}
}
@media (max-width:375px){
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{padding:11px!important;}
  .product-card[data-touch-mode="tap-details"] .mini-btn,
  .product-card[data-touch-mode="tap-then-open"] .mini-btn{width:37px!important;height:37px!important;min-width:37px!important;min-height:37px!important;}
  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot{height:37px!important;min-height:37px!important;flex-basis:37px!important;}
  .product-card[data-touch-mode="tap-details"] .product-foot .price,
  .product-card[data-touch-mode="tap-then-open"] .product-foot .price{height:37px!important;font-size:13px!important;}
}
@media (max-width:320px){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{height:500px!important;min-height:500px!important;}
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{padding:10px!important;}
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{font-size:14px!important;}
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{font-size:11.5px!important;}
  .product-card[data-touch-mode="tap-details"] .mini-btn,
  .product-card[data-touch-mode="tap-then-open"] .mini-btn{width:35px!important;height:35px!important;min-width:35px!important;min-height:35px!important;}
}

/* Mobile banner: use the real logo aspect ratio instead of a square container. */
@media (max-width:820px){
  .c2d-phone-banner .c2d-banner-fixed-logo,
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    box-sizing:border-box !important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo{
    width:min(100%,420px) !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:1024 / 683 !important;
    flex:0 0 auto !important;
    margin:0 auto 6px !important;
    padding:0 !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }
  .c2d-phone-banner .c2d-banner-fixed-logo img,
  .c2d-phone-banner .c2d-banner-fixed-logo .js-banner-image{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:fill !important;
    object-position:center !important;
    display:block !important;
  }
  .c2d-phone-banner .c2d-logo-halo{display:none!important;}
}

/* =========================================================
   C2D — FINAL USER-REQUESTED TOUCH CARD + MOBILE BANNER PATCH
   Scope: presentation/interaction only. No product data is changed.
   Mouse devices are intentionally left on the existing behavior.
   ========================================================= */

/* Mobile banner logo: keep the complete Computer 2 Day artwork visible.
   Use the real logo aspect ratio and shift the image toward its right edge
   so the final "Y" is not cropped on narrow phone widths. */
@media (hover:none), (pointer:coarse){
  #c2dPhoneBanner .c2d-banner-fixed-logo,
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
    box-sizing:border-box !important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo{
    overflow:hidden !important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo img,
  #c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
    object-fit:fill !important;
    object-position:100% 50% !important;
    transform:none !important;
  }
}

/* ---------------------------------------------------------
   TOUCH / NO-MOUSE PRODUCT CARDS ONLY
   Default state: Details badge is at the bottom of the image.
   Open state: small Details badge moves directly below the heart.
   The lower half is always a real layout area, never an overlay that
   hides text/buttons.
   --------------------------------------------------------- */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    display:grid !important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) !important;
    height:clamp(500px,132vw,660px) !important;
    min-height:500px !important;
    max-height:660px !important;
    overflow:hidden !important;
    contain:layout paint !important;
    isolation:isolate !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    grid-row:1 !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:0 !important;
  }

  /* EN: bottom-right. UR: bottom-left. */
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    display:flex !important;
    position:absolute !important;
    top:auto !important;
    bottom:8px !important;
    right:8px !important;
    left:auto !important;
    z-index:70 !important;
    width:auto !important;
    min-width:54px !important;
    max-width:calc(100% - 16px) !important;
    height:30px !important;
    min-height:30px !important;
    padding:5px 10px !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    touch-action:manipulation !important;
    transform:none !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    left:8px !important;
    right:auto !important;
  }

  /* Heart stays in its normal outer corner. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    top:10px !important;
    right:10px !important;
    left:auto !important;
    z-index:80 !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    left:10px !important;
    right:auto !important;
  }

  /* After tap: Details becomes a small control directly under the heart. */
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:50px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    min-width:48px !important;
    width:auto !important;
    height:26px !important;
    min-height:26px !important;
    padding:4px 8px !important;
    font-size:9px !important;
    z-index:90 !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    left:10px !important;
    right:auto !important;
  }

  /* Lower half: always visible, no overlay, no hidden text. */
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    grid-row:2 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    background:transparent !important;
    padding:14px 14px 12px !important;
    z-index:5 !important;
  }

  /* Small, readable typography so the complete lower half fits on phones. */
  .product-card[data-touch-mode="tap-details"] .product-meta-center-row,
  .product-card[data-touch-mode="tap-then-open"] .product-meta-center-row{
    flex:0 0 auto !important;
    margin:0 0 5px !important;
    line-height:1.15 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-meta-center-row > *,
  .product-card[data-touch-mode="tap-then-open"] .product-meta-center-row > *{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    flex:0 0 auto !important;
    margin:3px 0 7px !important;
    max-height:none !important;
    overflow:visible !important;
    display:block !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.25 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    display:block !important;
    -webkit-line-clamp:unset !important;
    line-clamp:unset !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    margin:0 !important;
    line-height:1.35 !important;
  }
  .product-card[data-touch-mode="tap-details"] .stock-line,
  .product-card[data-touch-mode="tap-then-open"] .stock-line{
    flex:0 0 auto !important;
    margin:6px 0 5px !important;
  }

  /* Price and buttons share exactly one aligned bottom row. */
  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot{
    flex:0 0 40px !important;
    height:40px !important;
    min-height:40px !important;
    width:100% !important;
    margin-top:auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot .price,
  .product-card[data-touch-mode="tap-then-open"] .product-foot .price{
    min-width:0 !important;
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
    line-height:1 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot > div,
  .product-card[data-touch-mode="tap-then-open"] .product-foot > div{
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }
  .product-card[data-touch-mode="tap-details"] .mini-btn,
  .product-card[data-touch-mode="tap-then-open"] .mini-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
  }

  /* While Details is open, the same complete lower half remains visible. */
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
  }
}

/* Exact phone widths: preserve the same two-half geometry and tighten only
   typography/control sizes where the viewport is genuinely narrow. */
@media (hover:none) and (max-width:425px), (pointer:coarse) and (max-width:425px){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    height:clamp(500px,140vw,600px) !important;
    min-height:500px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    padding:12px 11px 10px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    font-size:clamp(14px,4.2vw,17px) !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{
    font-size:clamp(11.5px,3.45vw,13.5px) !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot .price,
  .product-card[data-touch-mode="tap-then-open"] .product-foot .price{
    font-size:clamp(12px,3.7vw,16px) !important;
  }
}

@media (hover:none) and (max-width:375px), (pointer:coarse) and (max-width:375px){
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    padding:11px 10px 9px !important;
  }
  .product-card[data-touch-mode="tap-details"] .mini-btn,
  .product-card[data-touch-mode="tap-then-open"] .mini-btn{
    width:37px !important;
    height:37px !important;
    min-width:37px !important;
    min-height:37px !important;
    flex-basis:37px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot,
  .product-card[data-touch-mode="tap-details"] .product-foot > div,
  .product-card[data-touch-mode="tap-then-open"] .product-foot > div{
    height:37px !important;
    min-height:37px !important;
  }
}

@media (hover:none) and (max-width:320px), (pointer:coarse) and (max-width:320px){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    height:500px !important;
    min-height:500px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    padding:10px 9px 8px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{font-size:14px !important;}
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{font-size:11.5px !important;}
  .product-card[data-touch-mode="tap-details"] .mini-btn,
  .product-card[data-touch-mode="tap-then-open"] .mini-btn{
    width:35px !important;height:35px !important;min-width:35px !important;min-height:35px !important;flex-basis:35px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot,
  .product-card[data-touch-mode="tap-details"] .product-foot > div,
  .product-card[data-touch-mode="tap-then-open"] .product-foot > div{
    height:35px !important;min-height:35px !important;
  }
}

/* Laptop-only micro-alignment requested: raise action buttons slightly from the
   bottom border and give card titles a small, clean top offset. */
@media (min-width:1025px){
  .product-card .product-body h4{margin-top:7px !important;}
  .product-card .product-foot{transform:translateY(-4px) !important;}
}

/* Touch scrolling: cards never capture/disable normal page vertical scrolling. */
@media (hover:none), (pointer:coarse){
  .products-grid,
  .product-card,
  .product-card .product-thumb,
  .product-card .product-body{
    touch-action:pan-y !important;
  }
}

/* C2D FINAL TOUCH DETAILS BEHAVIOR — requested touch/no-mouse devices only.
   Closed: Details stays at the image bottom. Open: it moves directly below
   the heart, while the lower details area expands only to its real content. */
@media (hover:none) and (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    display:grid !important;
    grid-template-rows:minmax(210px,1fr) auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    contain:layout paint !important;
  }

  /* Closed state: image occupies the card; no artificial blank detail half. */
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    grid-row:2 !important;
    display:none !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:12px 13px 11px !important;
    margin:0 !important;
    overflow:visible !important;
    background:transparent !important;
  }

  /* Image: always full card width, no clipping/cropping. */
  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    grid-row:1 !important;
    width:100% !important;
    height:100% !important;
    min-height:210px !important;
    overflow:hidden !important;
    position:relative !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    width:100% !important;height:100% !important;overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    width:100% !important;height:100% !important;object-fit:contain !important;object-position:center !important;padding:0 !important;
  }

  /* Closed: EN right-bottom / UR left-bottom. */
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    display:flex !important;
    position:absolute !important;
    right:10px !important;left:auto !important;bottom:10px !important;top:auto !important;
    width:max-content !important;min-width:68px !important;max-width:calc(100% - 20px) !important;
    height:30px !important;min-height:30px !important;padding:5px 10px !important;
    align-items:center !important;justify-content:center !important;
    box-sizing:border-box !important;border-radius:999px !important;
    white-space:nowrap !important;overflow:hidden !important;text-overflow:clip !important;
    z-index:90 !important;touch-action:manipulation !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    left:10px !important;right:auto !important;
  }

  /* Open: compact badge directly below the heart, same compact footprint. */
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:48px !important;bottom:auto !important;right:10px !important;left:auto !important;
    width:max-content !important;min-width:68px !important;max-width:calc(100% - 20px) !important;
    height:28px !important;min-height:28px !important;padding:4px 9px !important;font-size:9px !important;
    z-index:100 !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    left:10px !important;right:auto !important;
  }

  /* Button text state: Details before click, Hide after click. */
  .c2d-touch-details-badge .c2d-touch-badge-hide-en,
  .c2d-touch-details-badge .c2d-touch-badge-hide-ur{display:none !important;}
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-details-en,
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-details-ur{display:none !important;}
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-en{display:inline !important;}
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-ur{display:inline !important;}
  .c2d-touch-badge-details-ur,.c2d-touch-badge-hide-ur{display:none !important;}
  body.lang-ur .c2d-touch-badge-details-en,body.lang-ur .c2d-touch-badge-hide-en{display:none !important;}
  body.lang-ur .c2d-touch-details-badge[data-state="details"] .c2d-touch-badge-details-ur{display:inline !important;}
  body.lang-ur .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-ur{display:inline !important;}

  /* Heart remains in its existing corner; Details sits just below it only after tap. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    top:10px !important;right:10px !important;left:auto !important;z-index:110 !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    left:10px !important;right:auto !important;
  }

  /* Open details: use only the content's natural height; never reserve a fake half. */
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open{
    grid-template-rows:minmax(210px,52vw) auto !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{
    min-height:0 !important;height:auto !important;max-height:none !important;
    overflow:visible !important;visibility:visible !important;opacity:1 !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body h4,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body h4{
    margin:2px 0 7px !important;white-space:normal !important;overflow:visible !important;
    overflow-wrap:anywhere !important;line-height:1.25 !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body p,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body p{
    display:block !important;-webkit-line-clamp:unset !important;line-clamp:unset !important;
    max-height:none !important;overflow:visible !important;white-space:normal !important;
    overflow-wrap:anywhere !important;line-height:1.35 !important;margin:0 !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-foot,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-foot{
    margin-top:9px !important;flex:0 0 40px !important;height:40px !important;min-height:40px !important;
    display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;align-items:center !important;
  }
}

@media (hover:none) and (pointer:coarse) and (max-width:425px){
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{min-width:64px !important;padding-inline:9px !important;}
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open{grid-template-rows:minmax(190px,55vw) auto !important;}
}
@media (hover:none) and (pointer:coarse) and (max-width:320px){
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{min-width:60px !important;height:28px !important;min-height:28px !important;font-size:9px !important;}
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open{grid-template-rows:minmax(180px,58vw) auto !important;}
}

/* Mouse-only full-image mode needs a definite image box. Without this,
   percentage-height absolute slides can resolve against an auto-height flex
   item and render as blank/empty slider cards after the global toggle. */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-img-full-text-hover{
    min-height:260px !important;
  }
  .product-card.c2d-img-full-text-hover .product-thumb{
    flex:0 0 clamp(220px,24vw,300px) !important;
    height:clamp(220px,24vw,300px) !important;
    min-height:220px !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-slider{
    width:100% !important;
    height:100% !important;
    min-height:220px !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide{
    width:100% !important;
    height:100% !important;
  }
}

/* Final no-mouse placement: the Details badge belongs below the heart, not
   at the bottom of the image. The 6px gap matches the existing badge rhythm
   while discount/offers remain on their original side. */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:48px !important;
    bottom:auto !important;
    right:10px !important;
    left:auto !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    left:10px !important;
    right:auto !important;
  }
}

/* =========================================================
   C2D FINAL MOBILE CARD FIX
   - Details/تفصیل stays below the heart on touch devices.
   - The card keeps a real image row and a natural text row; no fake blank
     half is reserved while Details is closed.
   - Gallery images are allowed to load and auto-rotate without hover.
   - Titles sit just below the image border and action buttons sit slightly
     above the lower edge.
   ========================================================= */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    display:grid !important;
    grid-template-rows:clamp(210px,52vw,300px) auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    contain:layout paint !important;
    isolation:isolate !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    grid-row:1 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:0 !important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-image-dots,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-dots{
    bottom:8px !important;
    z-index:25 !important;
  }

  /* The green-marked placement: Details/تفصیل is directly below the heart
     in both the closed and open states. */
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    display:flex !important;
    position:absolute !important;
    top:50px !important;
    bottom:auto !important;
    right:10px !important;
    left:auto !important;
    z-index:100 !important;
    width:max-content !important;
    min-width:62px !important;
    max-width:calc(100% - 20px) !important;
    height:29px !important;
    min-height:29px !important;
    padding:4px 10px !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    font-size:10px !important;
    line-height:1 !important;
    touch-action:manipulation !important;
    transform:none !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    left:10px !important;
    right:auto !important;
    font-family:var(--font-ur) !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    top:10px !important;
    right:10px !important;
    left:auto !important;
    z-index:110 !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    left:10px !important;
    right:auto !important;
  }

  /* Keep the title immediately under the image. Closed cards retain the
     title, price and actions; the longer description is the part Details
     reveals. */
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    grid-row:2 !important;
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    background:transparent !important;
    padding:7px 14px 8px !important;
    z-index:5 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    display:block !important;
    flex:0 0 auto !important;
    margin:7px 0 7px !important;
    max-height:none !important;
    overflow:visible !important;
    white-space:normal !important;
    line-height:1.28 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{
    display:none !important;
  }
  .product-card[data-touch-mode="tap-details"] .stock-line,
  .product-card[data-touch-mode="tap-then-open"] .stock-line{
    display:none !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body p,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body p{
    display:block !important;
    margin:0 0 8px !important;
    max-height:none !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    line-clamp:unset !important;
    line-height:1.38 !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .stock-line,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .stock-line{
    display:block !important;
    margin:3px 0 5px !important;
  }

  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot{
    margin-top:4px !important;
    transform:translateY(-4px) !important;
  }
}

@media (hover:none), (pointer:coarse){
  .product-card .product-body h4{
    scroll-margin-top:8px;
  }
}

/* =========================================================
   C2D FINAL PRODUCT-CARD FIX — requested behavior only
   - Touch/no-mouse: image-only by default; fixed Details/تفصیل badge under heart.
   - Touch badge click toggles the existing card text/buttons.
   - Desktop/laptop full-fit mode: gallery remains visible and auto-rotates;
     text is an overlay on hover, so it never reserves a blank lower area.
   - English/Urdu badge text is strictly language-specific.
   ========================================================= */

/* Prevent presentation controls from ever creating a horizontal card overflow. */
.product-card,
.product-card .product-thumb,
.product-card .c2d-card-image-slider,
.product-card .product-body{min-width:0;max-width:100%;}
.product-card .c2d-card-image-slider{position:relative;overflow:hidden;}
.product-card .c2d-card-slide{display:block;object-fit:contain!important;object-position:center!important;}

/* ---------------- Desktop / laptop full-fit + text-on-hover ---------------- */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:clamp(290px,24vw,380px)!important;
    min-height:290px!important;
    max-height:380px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    contain:layout paint!important;
  }

  .product-card.c2d-img-full-text-hover .product-thumb,
  .product-card.c2d-details-reveal .product-thumb{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    border-bottom:0!important;
    overflow:hidden!important;
    z-index:1!important;
  }

  .product-card.c2d-img-full-text-hover .c2d-card-image-slider,
  .product-card.c2d-details-reveal .c2d-card-image-slider{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .product-card.c2d-img-full-text-hover .c2d-card-slide,
  .product-card.c2d-details-reveal .c2d-card-slide{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:10px!important;
    object-fit:contain!important;
    object-position:center!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:none!important;
    transition:opacity .20s ease!important;
    z-index:1!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide.is-active,
  .product-card.c2d-details-reveal .c2d-card-slide.is-active{
    opacity:1!important;
    visibility:visible!important;
    z-index:2!important;
  }

  /* Dots stay inside the image, never below the card. */
  .product-card.c2d-img-full-text-hover .c2d-card-image-dots,
  .product-card.c2d-details-reveal .c2d-card-image-dots{
    position:absolute!important;
    left:50%!important;
    bottom:9px!important;
    transform:translateX(-50%)!important;
    z-index:20!important;
  }

  /* Text is an overlay only; it does not create a second/blank card row. */
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal .product-body.c2d-product-details{
    position:absolute!important;
    inset-inline:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    max-height:78%!important;
    min-height:0!important;
    margin:0!important;
    padding:12px 14px 12px!important;
    box-sizing:border-box!important;
    overflow:auto!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(18px)!important;
    pointer-events:none!important;
    z-index:30!important;
    background:linear-gradient(to top,rgba(7,16,28,.97),rgba(7,16,28,.86) 72%,rgba(7,16,28,.20))!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    transition:opacity .20s ease,transform .24s ease,visibility .20s ease!important;
  }
  .product-card.c2d-img-full-text-hover:hover .product-body.c2d-product-details,
  .product-card.c2d-img-full-text-hover:focus-within .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:focus-within .product-body.c2d-product-details{
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
  }
  .product-card.c2d-img-full-text-hover .product-body h4,
  .product-card.c2d-details-reveal .product-body h4{
    margin:8px 0 8px!important;
    line-height:1.28!important;
    overflow:visible!important;
    max-height:none!important;
  }
  .product-card.c2d-img-full-text-hover .product-body p,
  .product-card.c2d-details-reveal .product-body p{
    display:block!important;
    -webkit-line-clamp:unset!important;
    line-clamp:unset!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0 0 9px!important;
  }
  .product-card.c2d-img-full-text-hover .product-foot,
  .product-card.c2d-details-reveal .product-foot{
    margin-top:6px!important;
    padding-top:2px!important;
    align-items:center!important;
  }
}

/* ---------------- Touch / no-mouse: exact Details interaction ---------------- */
@media (hover:none),(pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    isolation:isolate!important;
    contain:layout paint!important;
  }

  /* Closed card = image only. No artificial lower half / blank white area. */
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    display:none!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:none!important;
  }

  /* Open card = natural details height; never reserve a fake fixed half. */
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{
    display:flex!important;
    flex-direction:column!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 13px 12px!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    background:var(--card)!important;
  }

  /* Image/gallery is the complete closed card surface. */
  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:clamp(220px,62vw,330px)!important;
    min-height:220px!important;
    max-height:330px!important;
    margin:0!important;
    overflow:hidden!important;
    border-bottom:1px solid var(--border)!important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:8px!important;
    object-fit:contain!important;
    object-position:center!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:none!important;
    transition:opacity .20s ease!important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide.is-active,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide.is-active{
    opacity:1!important;
    visibility:visible!important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-card-image-dots,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-dots{
    bottom:8px!important;
    z-index:25!important;
  }

  /* Heart: fixed in its existing corner. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    top:10px!important;
    right:10px!important;
    left:auto!important;
    z-index:100!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    left:10px!important;
    right:auto!important;
  }

  /* Details badge: ALWAYS directly under heart, never at card bottom. */
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    display:flex!important;
    position:absolute!important;
    top:58px!important;
    right:10px!important;
    left:auto!important;
    bottom:auto!important;
    width:max-content!important;
    min-width:64px!important;
    max-width:calc(100% - 20px)!important;
    height:30px!important;
    min-height:30px!important;
    padding:5px 10px!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    border-radius:999px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    z-index:110!important;
    touch-action:manipulation!important;
    transform:none!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    left:10px!important;
    right:auto!important;
    direction:rtl!important;
    font-family:var(--font-ur)!important;
  }

  /* English/Urdu are mutually exclusive — never render both languages. */
  .c2d-touch-badge-details-en,.c2d-touch-badge-hide-en{display:inline!important;}
  .c2d-touch-badge-details-ur,.c2d-touch-badge-hide-ur{display:none!important;}
  body.lang-ur .c2d-touch-badge-details-en,
  body.lang-ur .c2d-touch-badge-hide-en{display:none!important;}
  body.lang-ur .c2d-touch-badge-details-ur,
  body.lang-ur .c2d-touch-badge-hide-ur{display:inline!important;}

  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-details-en,
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-details-ur{display:none!important;}
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-en{display:inline!important;}
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-ur{display:none!important;}
  body.lang-ur .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-en{display:none!important;}
  body.lang-ur .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-ur{display:inline!important;}

  /* Offer/discount remain opposite the Details badge. */
  .product-card .product-thumb .discount-badge,
  .product-card .product-thumb .product-offer-badge{
    left:10px!important;
    right:auto!important;
  }
  body.lang-ur .product-card .product-thumb .discount-badge,
  body.lang-ur .product-card .product-thumb .product-offer-badge{
    right:10px!important;
    left:auto!important;
  }

  /* Title starts just below the image border when Details is opened. */
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4{
    margin:5px 0 8px!important;
    line-height:1.28!important;
    max-height:none!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Buttons sit slightly above the bottom edge instead of leaving a blank area. */
  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot{
    margin-top:7px!important;
    padding-bottom:1px!important;
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    align-items:center!important;
  }
}

@media (hover:none),(pointer:coarse) and (max-width:425px){
  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    height:clamp(215px,64vw,285px)!important;
    min-height:215px!important;
    max-height:285px!important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    top:57px!important;
    min-width:62px!important;
    height:29px!important;
    min-height:29px!important;
    padding-inline:9px!important;
    font-size:10px!important;
  }
}
@media (hover:none),(pointer:coarse) and (max-width:375px){
  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    height:clamp(205px,67vw,270px)!important;
    min-height:205px!important;
  }
}

/* Keep Admin presentation controls clean and responsive without changing their data. */
#productModal .c2d-product-display-editor{
  overflow:visible!important;
}
#productModal .c2d-compact-toggle-grid{
  align-items:stretch!important;
}
#productModal .c2d-compact-toggle{
  min-height:58px!important;
  justify-content:space-between!important;
}
#productModal .c2d-mini-check{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  border-radius:7px!important;
}
#productModal .c2d-mini-check input:checked + span{
  position:relative!important;
}
#productModal .c2d-mini-check input:checked + span::after{
  content:"✓";
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;height:100%;
  color:#fff;
  font:900 15px/1 Arial,sans-serif;
}
@media(max-width:700px){
  #productModal .c2d-compact-toggle-grid,
  #pCardContentToggles.c2d-compact-toggle-grid,
  #pDeviceVisibilityGrid.c2d-compact-toggle-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:430px){
  #productModal .c2d-compact-toggle-grid,
  #pCardContentToggles.c2d-compact-toggle-grid,
  #pDeviceVisibilityGrid.c2d-compact-toggle-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   C2D FINAL CARD BEHAVIOUR OVERRIDE — requested scope only
   - No-mouse/touch: Detail badge position is independent of Admin
     presentation checkboxes and stays directly below the heart.
   - Mouse/trackpad: Admin full-fit/text-on-hover may affect presentation,
     but dots remain hidden and the saved gallery continues auto-rotating.
   - Never reserve a separate blank lower card area in full-fit mode.
   ========================================================= */

/* Touch/no-mouse: presentation checkboxes must NEVER reposition the Detail badge. */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    position:relative!important;
    overflow:hidden!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    position:relative!important;
    overflow:hidden!important;
    min-height:0!important;
  }

  /* Heart is the anchor. Detail is always immediately below it. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    top:10px!important;
    right:10px!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    z-index:120!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    left:10px!important;
    right:auto!important;
  }

  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    position:absolute!important;
    top:49px!important;
    bottom:auto!important;
    right:10px!important;
    left:auto!important;
    margin:0!important;
    transform:none!important;
    z-index:121!important;
    width:max-content!important;
    min-width:64px!important;
    max-width:calc(100% - 20px)!important;
    height:30px!important;
    min-height:30px!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    left:10px!important;
    right:auto!important;
    direction:rtl!important;
  }

  /* Only the current language is rendered; never allow the other language
     span to occupy layout space. */
  .c2d-touch-details-badge .c2d-touch-badge-details-en,
  .c2d-touch-details-badge .c2d-touch-badge-hide-en{display:inline!important;}
  .c2d-touch-details-badge .c2d-touch-badge-details-ur,
  .c2d-touch-details-badge .c2d-touch-badge-hide-ur{display:none!important;}
  body.lang-ur .c2d-touch-details-badge .c2d-touch-badge-details-en,
  body.lang-ur .c2d-touch-details-badge .c2d-touch-badge-hide-en{display:none!important;}
  body.lang-ur .c2d-touch-details-badge .c2d-touch-badge-details-ur,
  body.lang-ur .c2d-touch-details-badge .c2d-touch-badge-hide-ur{display:inline!important;}

  /* Admin presentation settings do not change touch-card image/gallery sizing. */
  .product-card[data-touch-mode="tap-details"].c2d-img-full-text-hover,
  .product-card[data-touch-mode="tap-then-open"].c2d-img-full-text-hover,
  .product-card[data-touch-mode="tap-details"].c2d-details-reveal,
  .product-card[data-touch-mode="tap-then-open"].c2d-details-reveal{
    display:grid!important;
    grid-template-rows:clamp(205px,52vw,300px) auto!important;
    flex-direction:initial!important;
  }

  /* Closed state never reserves an invisible text region. */
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body{
    display:none!important;
    position:relative!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{
    display:flex!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:10px 13px 12px!important;
  }
}

/* Mouse/trackpad: dots are intentionally hidden; image auto-scroll remains active. */
@media (hover:hover) and (pointer:fine){
  .product-card .c2d-card-image-dots{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{
    height:clamp(220px,24vw,360px)!important;
    min-height:220px!important;
    max-height:360px!important;
    overflow:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .product-thumb,
  .product-card.c2d-details-reveal .product-thumb{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    flex:0 0 100%!important;
    margin:0!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-slider,
  .product-card.c2d-details-reveal .c2d-card-image-slider{
    height:100%!important;
    min-height:0!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide,
  .product-card.c2d-details-reveal .c2d-card-slide{
    height:100%!important;
    min-height:0!important;
    opacity:0!important;
    visibility:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide.is-active,
  .product-card.c2d-details-reveal .c2d-card-slide.is-active{
    opacity:1!important;
    visibility:visible!important;
  }
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal .product-body.c2d-product-details{
    bottom:0!important;
    max-height:78%!important;
    margin:0!important;
  }
  .product-card.c2d-img-full-text-hover .product-foot,
  .product-card.c2d-details-reveal .product-foot{
    transform:translateY(-5px)!important;
  }
}

/* Prevent a desktop grid from preserving a second row for the overlay body. */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{grid-template-rows:1fr!important;}
}


/* =========================================================
   C2D FINAL USER-REQUESTED CARD FIX — latest pass
   Scope: touch Detail badge state/position + mouse gallery/dots + card spacing.
   ========================================================= */

/* ---------- NO-MOUSE / TOUCH: one label at a time, fixed below heart ---------- */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    position:absolute!important;
    top:49px!important;
    bottom:auto!important;
    right:10px!important;
    left:auto!important;
    margin:0!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    min-width:64px!important;
    max-width:calc(100% - 20px)!important;
    height:30px!important;
    min-height:30px!important;
    padding:5px 10px!important;
    box-sizing:border-box!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    z-index:121!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    left:10px!important;
    right:auto!important;
    direction:rtl!important;
  }

  /* Never allow Detail + Hide to occupy layout together. */
  .c2d-touch-details-badge .c2d-touch-badge-label{display:none!important;}
  .c2d-touch-details-badge[data-state="details"] .c2d-touch-badge-details-en{display:inline!important;}
  .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-en{display:inline!important;}
  body.lang-ur .c2d-touch-details-badge[data-state="details"] .c2d-touch-badge-details-ur{display:inline!important;}
  body.lang-ur .c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-hide-ur{display:inline!important;}

  /* Heart is always the anchor. Admin presentation checkboxes cannot move Detail. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    z-index:120!important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    left:10px!important;
    right:auto!important;
  }

  /* Admin full-fit settings never change touch card geometry. */
  .product-card[data-touch-mode="tap-details"].c2d-img-full-text-hover,
  .product-card[data-touch-mode="tap-then-open"].c2d-img-full-text-hover,
  .product-card[data-touch-mode="tap-details"].c2d-details-reveal,
  .product-card[data-touch-mode="tap-then-open"].c2d-details-reveal{
    grid-template-rows:minmax(205px,52vw) auto!important;
  }
}

/* ---------- MOUSE / TRACKPAD: gallery always visible + autoplay + dots above border ---------- */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{
    position:relative!important;
    display:block!important;
    overflow:hidden!important;
    min-height:290px!important;
    height:clamp(290px,24vw,380px)!important;
    max-height:380px!important;
    box-sizing:border-box!important;
  }
  .product-card.c2d-img-full-text-hover .product-thumb,
  .product-card.c2d-details-reveal .product-thumb{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:1!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-slider,
  .product-card.c2d-details-reveal .c2d-card-image-slider{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide,
  .product-card.c2d-details-reveal .c2d-card-slide{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:hidden!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:0!important;
    margin:0!important;
    z-index:1!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide.is-active,
  .product-card.c2d-details-reveal .c2d-card-slide.is-active{
    opacity:1!important;
    visibility:visible!important;
    z-index:2!important;
  }

  /* Dots are part of the image area: centered at the bottom, just above the border. */
  .product-card.c2d-img-full-text-hover .c2d-card-image-dots,
  .product-card.c2d-details-reveal .c2d-card-image-dots{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    left:50%!important;
    bottom:7px!important;
    transform:translateX(-50%)!important;
    z-index:30!important;
    margin:0!important;
    pointer-events:auto!important;
  }

  /* Text remains an overlay; it never creates a second white row under the card. */
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal .product-body.c2d-product-details{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    z-index:25!important;
    padding:12px 14px 42px!important;
    background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.38),transparent)!important;
    pointer-events:none!important;
  }
  .product-card.c2d-img-full-text-hover .product-body > *,
  .product-card.c2d-details-reveal .product-body > *{
    pointer-events:auto!important;
  }
  .product-card.c2d-img-full-text-hover .product-meta-center-row,
  .product-card.c2d-details-reveal .product-meta-center-row{
    margin-top:8px!important;
    margin-bottom:5px!important;
    transform:translateY(4px)!important;
  }
  .product-card.c2d-img-full-text-hover .product-title-row,
  .product-card.c2d-details-reveal .product-title-row{
    margin-top:8px!important;
    margin-bottom:7px!important;
    line-height:1.25!important;
  }
  .product-card.c2d-img-full-text-hover .product-foot,
  .product-card.c2d-details-reveal .product-foot{
    margin-top:8px!important;
    padding-bottom:4px!important;
    transform:none!important;
    align-items:center!important;
  }
  .product-card.c2d-img-full-text-hover .product-foot .price,
  .product-card.c2d-details-reveal .product-foot .price{
    align-self:center!important;
  }
}

/* Prevent the full-fit presentation class from reserving any extra grid row. */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{
    grid-template-rows:1fr!important;
  }
}

/* =========================================================
   C2D CARD SAFETY LOCK — requested badge + gallery behavior only
   The touch Details badge is permanently anchored to the same side as the
   wishlist/heart and directly below it. Offer/discount badges stay on the
   opposite side. Admin presentation toggles must not change this geometry.
   ========================================================= */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    position:relative !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  /* Heart anchor: fixed corner, fixed dimensions. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    position:absolute !important;
    top:10px !important;
    inset-inline-end:10px !important;
    inset-inline-start:auto !important;
    bottom:auto !important;
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    margin:0 !important;
    transform:none !important;
    z-index:200 !important;
  }

  /* Detail = exact opposite-side anchor, immediately below heart.
     No state, offer badge, discount badge, admin checkbox, or card height
     is allowed to move it. */
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    position:absolute !important;
    top:50px !important;
    inset-inline-end:10px !important;
    inset-inline-start:auto !important;
    bottom:auto !important;
    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    margin:0 !important;
    padding:5px 8px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    line-height:1 !important;
    font-size:10px !important;
    transform:none !important;
    transition:none !important;
    z-index:201 !important;
    touch-action:manipulation !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    inset-inline-start:10px !important;
    inset-inline-end:auto !important;
    direction:rtl !important;
    font-family:var(--font-ur) !important;
  }

  /* Offers/discounts occupy only the opposite side. Their own vertical
     stacking is preserved; they can never affect Detail's top coordinate. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
  .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
    inset-inline-start:10px !important;
    inset-inline-end:auto !important;
    max-width:calc(100% - 84px) !important;
    box-sizing:border-box !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
    inset-inline-end:10px !important;
    inset-inline-start:auto !important;
  }

  /* Never let presentation settings turn the gallery into a missing/blank
     image area. Every saved slide remains in the slider and the existing
     auto-slide JS controls which one is visible. */
  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* Mobile card text follows the image naturally. No fixed percentage-height
     body, clipping, or hidden overflow may remove title/warranty/status/price
     or buttons. */
  .product-card[data-touch-mode="tap-details"] .product-body,
  .product-card[data-touch-mode="tap-then-open"] .product-body,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-title-row,
  .product-card[data-touch-mode="tap-then-open"] .product-title-row,
  .product-card[data-touch-mode="tap-details"] .product-body h4,
  .product-card[data-touch-mode="tap-then-open"] .product-body h4,
  .product-card[data-touch-mode="tap-details"] .product-body p,
  .product-card[data-touch-mode="tap-then-open"] .product-body p{
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-foot,
  .product-card[data-touch-mode="tap-then-open"] .product-foot{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* Very narrow phones: preserve the same geometry rather than changing the
   badge side/position at 375px or 320px. */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    top:50px !important;
    inset-inline-end:10px !important;
    inset-inline-start:auto !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{
    inset-inline-start:10px !important;
    inset-inline-end:auto !important;
  }
}


/* =========================================================
   C2D FINAL CARD GEOMETRY LOCK — user-requested
   Scope: product-card Details badge only.
   The Details badge is permanently anchored directly below
   the Wishlist/Heart badge. Product Offer/Discount toggles,
   text/full-fit controls, card state, and Admin presentation
   settings cannot change this geometry.
   ========================================================= */

/* The card thumb is the single positioning reference. */
.product-card .product-thumb{
  position:relative !important;
  min-width:0 !important;
  overflow:hidden !important;
}

/* Stable heart anchor: English/right and Urdu/left. */
.product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
.product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
  position:absolute !important;
  top:10px !important;
  inset-inline-end:10px !important;
  inset-inline-start:auto !important;
  bottom:auto !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  margin:0 !important;
  transform:none !important;
  z-index:300 !important;
}

/* Details is ALWAYS directly below the heart.
   It is intentionally independent of Offer/Discount existence. */
.product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
.product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
.product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
.product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
  position:absolute !important;
  top:48px !important;
  inset-inline-end:10px !important;
  inset-inline-start:auto !important;
  bottom:auto !important;
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  margin:0 !important;
  padding:5px 8px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  line-height:1 !important;
  font-size:10px !important;
  transform:none !important;
  transition:none !important;
  z-index:301 !important;
  touch-action:manipulation !important;
}

html[dir="rtl"] .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
html[dir="rtl"] .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn,
body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
  inset-inline-start:10px !important;
  inset-inline-end:auto !important;
}

html[dir="rtl"] .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
html[dir="rtl"] .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
html[dir="rtl"] .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
html[dir="rtl"] .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge,
body.lang-ur .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
body.lang-ur .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
  inset-inline-start:10px !important;
  inset-inline-end:auto !important;
  direction:rtl !important;
  font-family:var(--font-ur) !important;
}

/* Offer/Discount remain on the opposite side and never participate
   in the Details badge's vertical coordinate. */
.product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
.product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
.product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
.product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
  inset-inline-start:10px !important;
  inset-inline-end:auto !important;
}

html[dir="rtl"] .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
html[dir="rtl"] .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
html[dir="rtl"] .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
html[dir="rtl"] .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge,
body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
  inset-inline-end:10px !important;
  inset-inline-start:auto !important;
}

/* Remove every earlier state-dependent vertical repositioning. */
@media (max-width:1024px){
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:48px !important;
    bottom:auto !important;
    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    top:10px !important;
    bottom:auto !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }
}

/* Very narrow phones keep the same relative anchor, never a new side/position. */
@media (max-width:375px){
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-touch-details-badge{
    top:48px !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;
  }
}

/* =========================================================
   C2D FINAL STABILITY PATCH — product card badge + gallery
   Scope: requested behavior only.
   1) Details badge is anchored to the product-thumb, directly below Heart,
      independent of Offers/Discount/Admin presentation toggles.
   2) Mouse/trackpad devices show no gallery dots but keep automatic rotation.
   3) Full-fit/text-on-hover mode keeps every saved gallery image visible;
      text is only an overlay on hover and never replaces the image area.
   ========================================================= */

/* One positioning context for all card corner controls. */
.product-card .product-thumb{
  position:relative !important;
  isolation:isolate !important;
}

/* TOUCH / NO-MOUSE: fixed Heart anchor. */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    margin:0 !important;
    transform:none !important;
    z-index:500 !important;
  }

  /* Details never follows Offer, Discount, open/closed state, or Admin
     presentation settings. It is always directly below Heart. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-thumb .c2d-touch-details-badge{
    position:absolute !important;
    top:48px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    width:64px !important;
    min-width:64px !important;
    max-width:64px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    margin:0 !important;
    padding:5px 8px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
    transition:none !important;
    z-index:501 !important;
  }

  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn,
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-thumb .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-thumb .c2d-touch-details-badge{
    right:auto !important;
    left:10px !important;
  }

  /* Offer/Discount are allowed to occupy their own side only. They do not
     alter the Details coordinate. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
  .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
    left:10px !important;
    right:auto !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
    left:auto !important;
    right:10px !important;
  }

  /* No earlier :has() rule may move Details when Offers/Discount exists. */
  .product-card[data-touch-mode="tap-details"] .product-thumb:has(.product-offer-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb:has(.product-offer-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"] .product-thumb:has(.discount-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb:has(.discount-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-details"] .product-thumb:has(.discount-badge):has(.product-offer-badge) .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb:has(.discount-badge):has(.product-offer-badge) .c2d-touch-details-badge{
    top:48px !important;
    bottom:auto !important;
  }

  /* Gallery remains a real image area regardless of presentation flags. */
  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    opacity:0 !important;
    visibility:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide.is-active,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide.is-active{
    opacity:1 !important;
    visibility:visible !important;
  }
}

/* MOUSE / TRACKPAD: dots are never shown; JS autoplay continues unchanged. */
@media (hover:hover) and (pointer:fine){
  .product-card .c2d-card-image-dots{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Full-fit presentation is an image-first card, not a blank two-row card. */
  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:clamp(290px,24vw,380px) !important;
    min-height:290px !important;
    max-height:380px !important;
    overflow:hidden !important;
    isolation:isolate !important;
    contain:layout paint !important;
  }
  .product-card.c2d-img-full-text-hover .product-thumb,
  .product-card.c2d-details-reveal .product-thumb{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:1 !important;
    display:block !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-slider,
  .product-card.c2d-details-reveal .c2d-card-image-slider{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide,
  .product-card.c2d-details-reveal .c2d-card-slide{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:10px !important;
    object-fit:contain !important;
    object-position:center !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
    z-index:1 !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide.is-active,
  .product-card.c2d-details-reveal .c2d-card-slide.is-active{
    opacity:1 !important;
    visibility:visible !important;
    z-index:2 !important;
  }

  /* Text only overlays the image on hover. It never replaces/removes images. */
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal .product-body.c2d-product-details{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    max-height:60% !important;
    margin:0 !important;
    box-sizing:border-box !important;
    z-index:10 !important;
    padding:12px 14px 16px !important;
    overflow:auto !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(8px) !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(8,12,22,.94),rgba(8,12,22,.58),transparent) !important;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s !important;
  }
  .product-card.c2d-img-full-text-hover:hover .product-body.c2d-product-details,
  .product-card.c2d-img-full-text-hover:focus-within .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:focus-within .product-body.c2d-product-details{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    transition-delay:0s !important;
  }
}

/* ================= C2D REQUESTED SAFE CARD PATCH v4 =================
/* Urdu/English Details badge: exactly one label at a time. The label text is
   switched by JS; CSS never renders a second language or a second state. */
.c2d-touch-details-badge .c2d-touch-badge-current-label{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.c2d-touch-details-badge[data-state="details"] .c2d-touch-badge-current-label,
.c2d-touch-details-badge[data-state="hide"] .c2d-touch-badge-current-label{
  display:block !important;
}

/* Details is a card-corner control, never part of the image flow. */
@media (hover:none), (pointer:coarse){
  .product-card .product-thumb{ position:relative !important; overflow:hidden !important; }
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    z-index:500 !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .c2d-touch-details-badge{
    position:absolute !important;
    top:48px !important;
    right:6px !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    z-index:501 !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    width:max-content !important;
    min-width:64px !important;
    max-width:calc(100% - 12px) !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:5px 9px !important;
    transition:none !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .c2d-touch-details-badge{
    left:6px !important;
    right:auto !important;
    direction:rtl !important;
  }

  /* Offers/discount stay on their own side and can never participate in the
     Details badge's coordinates. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
  .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
    left:10px !important;
    right:auto !important;
  }
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .discount-badge,
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .product-offer-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .discount-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .product-offer-badge{
    left:auto !important;
    right:10px !important;
  }
}

/* Full-fit + text-on-hover: keep the complete saved gallery as the image
   layer. Each slide is always loaded; only the active slide is visible. */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    isolation:isolate !important;
    contain:layout paint !important;
    min-height:300px !important;
    height:clamp(300px,24vw,390px) !important;
    max-height:390px !important;
  }
  .product-card.c2d-img-full-text-hover .product-thumb,
  .product-card.c2d-details-reveal .product-thumb{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:1 !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-slider,
  .product-card.c2d-details-reveal .c2d-card-image-slider{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide,
  .product-card.c2d-details-reveal .c2d-card-slide{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:10px !important;
    object-fit:contain !important;
    object-position:center !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
    z-index:1 !important;
    backface-visibility:hidden !important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide.is-active,
  .product-card.c2d-details-reveal .c2d-card-slide.is-active{
    opacity:1 !important;
    visibility:visible !important;
    z-index:2 !important;
  }
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal .product-body.c2d-product-details{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    max-height:50% !important;
    min-height:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    z-index:10 !important;
    padding:12px 14px 16px !important;
    overflow:auto !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(8px) !important;
    pointer-events:none !important;
    background:linear-gradient(to top,rgba(8,12,22,.96),rgba(8,12,22,.68),transparent) !important;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s !important;
  }
  .product-card.c2d-img-full-text-hover:hover .product-body.c2d-product-details,
  .product-card.c2d-img-full-text-hover:focus-within .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:focus-within .product-body.c2d-product-details{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    transition-delay:0s !important;
  }
}


/* ================= C2D CARD DESIGN + GALLERY SAFETY FINAL ================= */
.product-card{
  border-radius:var(--c2d-card-radius,18px)!important;
  border-width:var(--c2d-card-border-width,1px)!important;
  box-shadow:0 12px 30px rgba(0,0,0,var(--c2d-card-shadow-alpha,.18))!important;
}
.product-card .product-thumb{border-radius:inherit!important;}
.product-card .product-thumb .product-offer-badge{
  width:var(--c2d-offer-w,62px)!important;
  min-width:var(--c2d-offer-w,62px)!important;
  max-width:var(--c2d-offer-w,62px)!important;
  height:var(--c2d-offer-h,28px)!important;
  min-height:var(--c2d-offer-h,28px)!important;
  max-height:var(--c2d-offer-h,28px)!important;
  padding:5px 8px!important;
  box-sizing:border-box!important;
  background:var(--c2d-offer-bg,#f5688e)!important;
  color:var(--c2d-offer-text,#fff)!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
.product-card .discount-badge{
  color:var(--c2d-discount-text,#fff)!important;
  background:var(--c2d-discount-bg,#06b6ff)!important;
}
.product-card .card-wishlist-btn{color:var(--c2d-wishlist-color,var(--text))!important;}
.product-card .c2d-touch-details-badge{
  width:var(--c2d-details-w,64px)!important;
  min-width:var(--c2d-details-w,64px)!important;
  max-width:var(--c2d-details-w,64px)!important;
  height:var(--c2d-details-h,30px)!important;
  min-height:var(--c2d-details-h,30px)!important;
  max-height:var(--c2d-details-h,30px)!important;
  background:var(--c2d-details-bg,#06b6ff)!important;
  color:var(--c2d-details-text,#fff)!important;
}
.product-card .product-title-row{font-size:var(--c2d-title-size,18px)!important;}
.product-card .product-body p{font-size:var(--c2d-desc-size,14px)!important;}
.product-card .product-foot .price{font-size:var(--c2d-price-size,18px)!important;}

/* Full-fit mode: the gallery itself owns the entire image layer. Every saved
   slide remains a real image element; only opacity changes, so a presentation
   checkbox can never turn slide 2/3 into a blank/deleted gallery. */
@media (hover:hover) and (pointer:fine){
  .product-card.c2d-img-full-text-hover{
    position:relative!important;display:block!important;overflow:hidden!important;isolation:isolate!important;
    min-height:300px!important;height:clamp(300px,24vw,390px)!important;max-height:390px!important;
  }
  .product-card.c2d-img-full-text-hover .product-thumb{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    margin:0!important;padding:0!important;overflow:hidden!important;z-index:1!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-slider{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    padding:0!important;margin:0!important;overflow:hidden!important;z-index:1!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide{
    position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
    min-width:0!important;min-height:0!important;margin:0!important;padding:var(--c2d-card-image-pad,10px)!important;
    object-fit:contain!important;object-position:center!important;opacity:0!important;visibility:visible!important;
    transform:none!important;z-index:1!important;backface-visibility:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide.is-active{opacity:1!important;visibility:visible!important;z-index:2!important;}
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details{
    position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100%!important;max-width:100%!important;max-height:var(--c2d-overlay-h,50%)!important;min-height:0!important;
    margin:0!important;box-sizing:border-box!important;z-index:10!important;padding:12px 14px 16px!important;
    overflow:auto!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    background:linear-gradient(to top,rgba(8,12,22,.96),rgba(8,12,22,.70),transparent)!important;
    transform:translateY(8px)!important;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s!important;
  }
  .product-card.c2d-img-full-text-hover:hover .product-body.c2d-product-details,
  .product-card.c2d-img-full-text-hover:focus-within .product-body.c2d-product-details{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;transition-delay:0s!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-dots{display:none!important;}
}

/* Never allow the full-fit presentation mode to hide saved slides on any
   device. Touch devices use the existing tap-details interaction. */
.product-card.c2d-img-full-text-hover .c2d-card-slide{display:block;}
.product-card.c2d-img-full-text-hover .c2d-card-image-slider{background:var(--c2d-card-bg,var(--card));}

/* ================= C2D FINAL MOUSE CARD / ADMIN PRESENTATION SAFE PATCH =================
   Mouse/trackpad cards: no manual gallery dots, images remain visible, and
   card text is a non-scrolling bottom-half overlay. Admin positioning controls
   change only presentation coordinates and never the saved media/data. */
@media (hover:hover) and (pointer:fine){
  .product-card .c2d-card-image-dots{display:none!important;visibility:hidden!important;pointer-events:none!important;}

  .product-card.c2d-img-full-text-hover,
  .product-card.c2d-details-reveal{
    position:relative!important;
    display:block!important;
    overflow:hidden!important;
    height:clamp(300px,24vw,390px)!important;
    min-height:300px!important;
    max-height:390px!important;
    isolation:isolate!important;
  }
  .product-card.c2d-img-full-text-hover .product-thumb,
  .product-card.c2d-details-reveal .product-thumb{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
    z-index:1!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-image-slider,
  .product-card.c2d-details-reveal .c2d-card-image-slider{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide,
  .product-card.c2d-details-reveal .c2d-card-slide{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    min-width:0!important;min-height:0!important;margin:0!important;
    padding:var(--c2d-card-image-pad,10px)!important;display:block!important;
    object-fit:contain!important;object-position:center!important;
    opacity:0!important;visibility:hidden!important;transform:none!important;
    z-index:1!important;backface-visibility:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .c2d-card-slide.is-active,
  .product-card.c2d-details-reveal .c2d-card-slide.is-active{
    opacity:1!important;visibility:visible!important;z-index:2!important;
  }
  /* Never let text create a second scrolling region. */
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal .product-body.c2d-product-details{
    position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100%!important;max-width:100%!important;height:50%!important;max-height:50%!important;min-height:0!important;
    box-sizing:border-box!important;margin:0!important;padding:12px 14px 14px!important;
    overflow:hidden!important;overscroll-behavior:none!important;z-index:10!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translateY(8px)!important;
    background:linear-gradient(to top,rgba(8,12,22,.97),rgba(8,12,22,.78),rgba(8,12,22,.10))!important;
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s!important;
  }
  .product-card.c2d-img-full-text-hover:hover .product-body.c2d-product-details,
  .product-card.c2d-img-full-text-hover:focus-within .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal:focus-within .product-body.c2d-product-details{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
    transition-delay:0s!important;
  }
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details > * ,
  .product-card.c2d-details-reveal .product-body.c2d-product-details > *{
    max-width:100%!important;
  }
  .product-card.c2d-img-full-text-hover .product-title-row,
  .product-card.c2d-details-reveal .product-title-row{
    margin:0 0 6px!important;line-height:1.2!important;
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .product-body p,
  .product-card.c2d-details-reveal .product-body p{
    margin:0 0 7px!important;line-height:1.3!important;
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important;
  }
  .product-card.c2d-img-full-text-hover .product-meta-center-row,
  .product-card.c2d-details-reveal .product-meta-center-row{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .product-card.c2d-img-full-text-hover .product-foot,
  .product-card.c2d-details-reveal .product-foot{margin-top:auto!important;min-height:38px!important;}

  /* Presentation-only badge positioning. Default values reproduce the current
     layout; offsets never participate in card flow, so no up/down blank space. */
  .product-card.c2d-offer-side-start .product-thumb .product-offer-badge{left:10px!important;right:auto!important;}
  .product-card.c2d-offer-side-end .product-thumb .product-offer-badge{right:10px!important;left:auto!important;}
  .product-card.c2d-wishlist-side-start .product-thumb .card-wishlist-btn{left:10px!important;right:auto!important;}
  .product-card.c2d-wishlist-side-end .product-thumb .card-wishlist-btn{right:10px!important;left:auto!important;}
}

/* Touch/no-mouse details badge also honors admin side/offset controls without
   changing its normal fixed relationship to the card. */
@media (hover:none), (pointer:coarse){
  .product-card.c2d-details-side-start .c2d-touch-details-badge{left:10px!important;right:auto!important;transform:translate(var(--c2d-details-x,0px),var(--c2d-details-y,0px))!important;}
  .product-card.c2d-details-side-end .c2d-touch-details-badge{right:10px!important;left:auto!important;transform:translate(var(--c2d-details-x,0px),var(--c2d-details-y,0px))!important;}
  .product-card.c2d-offer-side-start .product-offer-badge{left:10px!important;right:auto!important;transform:translate(var(--c2d-offer-x,0px),var(--c2d-offer-y,0px))!important;}
  .product-card.c2d-offer-side-end .product-offer-badge{right:10px!important;left:auto!important;transform:translate(var(--c2d-offer-x,0px),var(--c2d-offer-y,0px))!important;}
}

/* Admin Product Editor: keep the new control groups compact, readable and
   responsive at every modal width. */
.c2d-product-modal-card .c2d-card-control-divider{scroll-margin-top:12px;}
.c2d-product-modal-card .c2d-admin-action-bar .btn{white-space:normal;}
@media (max-width:760px){
  .c2d-product-modal-card .c2d-compact-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:460px){
  .c2d-product-modal-card .c2d-compact-fields{grid-template-columns:1fr!important;}
}


/* ================= C2D MOBILE DETAIL-TEXT FINAL SAFETY OVERRIDE =================
   Touch phones/tablets: Details opens a real card-body section below the image
   instead of overlaying the image/badges. Closed state takes zero body height,
   so there is no extra blank space. Text never becomes an internal scroller. */
@media (hover:none), (pointer:coarse){
  .product-card[data-touch-mode="tap-details"],
  .product-card[data-touch-mode="tap-then-open"]{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }
  .product-card[data-touch-mode="tap-details"] .product-thumb,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb{
    position:relative !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:clamp(190px,58vw,280px) !important;
    min-height:190px !important;
    max-height:280px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-image-slider,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-image-slider{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"] .c2d-card-slide,
  .product-card[data-touch-mode="tap-then-open"] .c2d-card-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  /* Closed: no text area and therefore no artificial blank card space. */
  .product-card[data-touch-mode="tap-details"] > .product-body.c2d-product-details,
  .product-card[data-touch-mode="tap-then-open"] > .product-body.c2d-product-details{
    position:relative !important;
    inset:auto !important;
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    height:0 !important;
    max-height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
    pointer-events:none !important;
    box-sizing:border-box !important;
    z-index:5 !important;
  }
  /* Open: text/buttons occupy a normal row BELOW the image, never over it. */
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open > .product-body.c2d-product-details,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open > .product-body.c2d-product-details{
    height:auto !important;
    max-height:420px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:12px 12px 14px !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    background:var(--card) !important;
    border-top:1px solid var(--border) !important;
    z-index:5 !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body h4,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body h4{
    margin:0 0 6px !important;
    line-height:1.25 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body p,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body p{
    margin:0 0 8px !important;
    line-height:1.35 !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;
    overflow:hidden !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-foot,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-foot{
    width:100% !important;
    min-width:0 !important;
    margin-top:8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-foot > div,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-foot > div{
    flex:0 0 auto !important;
    max-width:50% !important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-foot .mini-btn,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-foot .mini-btn{
    flex:0 0 auto !important;
  }
  /* Badge controls stay inside the image area and never become part of text flow. */
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-details"] .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .c2d-touch-details-badge{
    z-index:500 !important;
  }
}

/* Mouse/trackpad: no manual gallery dots and no scrolling text panel. */
@media (hover:hover) and (pointer:fine){
  .product-card .c2d-card-image-dots{display:none !important;visibility:hidden !important;pointer-events:none !important;}
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .product-card.c2d-details-reveal .product-body.c2d-product-details{
    overflow:hidden !important;
    overscroll-behavior:none !important;
    scrollbar-width:none !important;
  }
  .product-card.c2d-img-full-text-hover .product-body.c2d-product-details::-webkit-scrollbar,
  .product-card.c2d-details-reveal .product-body.c2d-product-details::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}
}

/* ================================================================
   C2D FINAL REQUESTED PRODUCT-CARD / SPEED / LOGO SAFETY PATCH
   Mouse/trackpad only: product-card text uses the same bottom-flow
   composition as the already-approved touch layout. Touch layout is
   intentionally not overridden here.
   ================================================================ */
@media (hover:hover) and (pointer:fine){
  .products-grid .product-card{
    height:var(--c2d-pc-1440-h,390px) !important;
    min-height:var(--c2d-pc-1440-h,390px) !important;
    max-height:var(--c2d-pc-1440-h,390px) !important;
    display:flex !important;
    flex-direction:column !important;
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }
  .products-grid .product-card .product-thumb,
  .products-grid .product-card.c2d-img-full-text-hover .product-thumb,
  .products-grid .product-card.c2d-details-reveal .product-thumb{
    position:relative !important;
    inset:auto !important;
    flex:0 0 var(--c2d-pc-1440-img,220px) !important;
    width:100% !important;
    height:var(--c2d-pc-1440-img,220px) !important;
    min-height:var(--c2d-pc-1440-img,220px) !important;
    max-height:var(--c2d-pc-1440-img,220px) !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
    z-index:1 !important;
  }
  .products-grid .product-card .c2d-card-image-slider,
  .products-grid .product-card.c2d-img-full-text-hover .c2d-card-image-slider,
  .products-grid .product-card.c2d-details-reveal .c2d-card-image-slider{
    position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;
  }
  .products-grid .product-card .c2d-card-slide{
    position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
    object-fit:contain !important;object-position:center !important;padding:10px !important;
    transform:none !important;backface-visibility:hidden !important;
    transition:opacity var(--c2d-slider-transition,820ms) ease !important;
  }
  .products-grid .product-card .c2d-card-image-dots{
    display:flex !important;visibility:visible !important;opacity:1 !important;
    position:absolute !important;left:50% !important;bottom:7px !important;transform:translateX(-50%) !important;
    z-index:15 !important;pointer-events:auto !important;
  }
  .products-grid .product-card .product-body,
  .products-grid .product-card .product-body.c2d-product-details,
  .products-grid .product-card.c2d-img-full-text-hover .product-body.c2d-product-details,
  .products-grid .product-card.c2d-details-reveal .product-body.c2d-product-details{
    position:relative !important;inset:auto !important;order:2 !important;
    flex:1 1 auto !important;width:100% !important;height:auto !important;min-height:0 !important;max-height:none !important;
    margin:0 !important;padding:var(--c2d-pc-1440-pad,14px) !important;
    box-sizing:border-box !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;
    overflow:hidden !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    transform:none !important;background:var(--card) !important;border:0 !important;z-index:3 !important;
  }
  .products-grid .product-card .product-meta-center-row{flex:0 0 auto !important;min-height:20px !important;}
  .products-grid .product-card .product-body h4{
    flex:0 0 auto !important;font-size:var(--c2d-pc-1440-title,17px) !important;line-height:1.3 !important;
    margin:0 0 7px !important;max-height:2.6em !important;overflow:hidden !important;
  }
  .products-grid .product-card .product-body p{
    flex:1 1 auto !important;min-height:0 !important;margin:0 0 10px !important;
    font-size:var(--c2d-pc-1440-desc,13px) !important;line-height:1.45 !important;
    display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:4 !important;overflow:hidden !important;
  }
  .products-grid .product-card .product-foot{flex:0 0 38px !important;min-height:38px !important;height:38px !important;align-items:center !important;margin-top:auto !important;}
  .products-grid .product-card .product-foot .price{display:flex !important;align-items:center !important;min-width:0 !important;white-space:nowrap !important;line-height:1 !important;}
  .products-grid .product-card .product-foot > div{display:flex !important;align-items:center !important;gap:8px !important;flex:0 0 auto !important;}
  .products-grid .product-card .mini-btn{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;display:flex !important;visibility:visible !important;opacity:1 !important;}
  .products-grid .product-card.c2d-details-reveal:hover .product-body.c2d-product-details,
  .products-grid .product-card.c2d-img-full-text-hover:hover .product-body.c2d-product-details,
  .products-grid .product-card.c2d-details-reveal:focus-within .product-body.c2d-product-details,
  .products-grid .product-card.c2d-img-full-text-hover:focus-within .product-body.c2d-product-details{
    opacity:1 !important;visibility:visible !important;transform:none !important;pointer-events:auto !important;
  }
}

@media (min-width:1025px){
  .products-grid .product-card{height:var(--c2d-pc-1440-h,390px)!important;min-height:var(--c2d-pc-1440-h,390px)!important;max-height:var(--c2d-pc-1440-h,390px)!important;}
  .products-grid .product-card .product-thumb{flex-basis:var(--c2d-pc-1440-img,220px)!important;height:var(--c2d-pc-1440-img,220px)!important;min-height:var(--c2d-pc-1440-img,220px)!important;max-height:var(--c2d-pc-1440-img,220px)!important;}
  .products-grid .product-card .product-body{padding:var(--c2d-pc-1440-pad,14px)!important;}
  .products-grid .product-card .product-body h4{font-size:var(--c2d-pc-1440-title,17px)!important;}
  .products-grid .product-card .product-body p{font-size:var(--c2d-pc-1440-desc,13px)!important;}
}
@media (min-width:769px) and (max-width:1024px){
  .products-grid .product-card{height:var(--c2d-pc-1024-h,380px)!important;min-height:var(--c2d-pc-1024-h,380px)!important;max-height:var(--c2d-pc-1024-h,380px)!important;}
  .products-grid .product-card .product-thumb{flex-basis:var(--c2d-pc-1024-img,210px)!important;height:var(--c2d-pc-1024-img,210px)!important;min-height:var(--c2d-pc-1024-img,210px)!important;max-height:var(--c2d-pc-1024-img,210px)!important;}
  .products-grid .product-card .product-body{padding:var(--c2d-pc-1024-pad,14px)!important;}
  .products-grid .product-card .product-body h4{font-size:var(--c2d-pc-1024-title,16px)!important;}
  .products-grid .product-card .product-body p{font-size:var(--c2d-pc-1024-desc,13px)!important;}
}
@media (min-width:426px) and (max-width:768px){
  .products-grid .product-card{height:var(--c2d-pc-768-h,370px)!important;min-height:var(--c2d-pc-768-h,370px)!important;max-height:var(--c2d-pc-768-h,370px)!important;}
  .products-grid .product-card .product-thumb{flex-basis:var(--c2d-pc-768-img,200px)!important;height:var(--c2d-pc-768-img,200px)!important;min-height:var(--c2d-pc-768-img,200px)!important;max-height:var(--c2d-pc-768-img,200px)!important;}
  .products-grid .product-card .product-body{padding:var(--c2d-pc-768-pad,13px)!important;}
  .products-grid .product-card .product-body h4{font-size:var(--c2d-pc-768-title,16px)!important;}
  .products-grid .product-card .product-body p{font-size:var(--c2d-pc-768-desc,12.5px)!important;}
}

/* Banner/header logo: remove only the unwanted border; preserve all other visual treatment. */
.c2d-banner-fixed-logo,
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{border:0 !important;outline:0 !important;}

/* Mobile scrolling safety: cards never capture the page scroll and touch actions remain native. */
@media (hover:none),(pointer:coarse){
  html,body{overflow-x:hidden !important;}
  .products-grid{touch-action:pan-y !important;}
  .products-grid .product-card{touch-action:pan-y !important;}
  .products-grid .product-card .product-body{touch-action:pan-y !important;}
  .c2d-touch-details-badge,.mini-btn,.card-wishlist-btn,.product-offer-badge,.c2d-card-image-dot{touch-action:manipulation !important;}
}

/* Never delay cart / WhatsApp action paint. */
.mini-btn.mini-cart,.mini-btn.mini-order,
.cart-drawer .cart-foot #checkoutBtn,
.cart-drawer .cart-foot #checkoutBtn *{
  opacity:1 !important;visibility:visible !important;animation:none !important;
}

/* ================================================================
   Touch-phone approved geometry is preserved at all exact mobile widths.
   Only the mouse/trackpad presentation above is changed.
   ================================================================ */
@media (hover:none),(pointer:coarse){
  .products-grid .product-card[data-touch-mode="tap-details"],
  .products-grid .product-card[data-touch-mode="tap-then-open"]{
    height:auto !important;min-height:0 !important;max-height:none !important;
  }
}

@media (hover:hover) and (pointer:fine) and (max-width:425px){
  .products-grid .product-card{height:var(--c2d-pc-425-h,520px)!important;min-height:var(--c2d-pc-425-h,520px)!important;max-height:var(--c2d-pc-425-h,520px)!important;}
  .products-grid .product-card .product-thumb{flex-basis:var(--c2d-pc-425-img,270px)!important;height:var(--c2d-pc-425-img,270px)!important;min-height:var(--c2d-pc-425-img,270px)!important;max-height:var(--c2d-pc-425-img,270px)!important;}
  .products-grid .product-card .product-body{padding:var(--c2d-pc-425-pad,14px)!important;}
  .products-grid .product-card .product-body h4{font-size:var(--c2d-pc-425-title,16px)!important;}
  .products-grid .product-card .product-body p{font-size:var(--c2d-pc-425-desc,13px)!important;}
}
@media (hover:hover) and (pointer:fine) and (max-width:375px){
  .products-grid .product-card{height:var(--c2d-pc-375-h,520px)!important;min-height:var(--c2d-pc-375-h,520px)!important;max-height:var(--c2d-pc-375-h,520px)!important;}
  .products-grid .product-card .product-thumb{flex-basis:var(--c2d-pc-375-img,245px)!important;height:var(--c2d-pc-375-img,245px)!important;min-height:var(--c2d-pc-375-img,245px)!important;max-height:var(--c2d-pc-375-img,245px)!important;}
  .products-grid .product-card .product-body{padding:var(--c2d-pc-375-pad,12px)!important;}
  .products-grid .product-card .product-body h4{font-size:var(--c2d-pc-375-title,15px)!important;}
  .products-grid .product-card .product-body p{font-size:var(--c2d-pc-375-desc,12.5px)!important;}
}
@media (hover:hover) and (pointer:fine) and (max-width:320px){
  .products-grid .product-card{height:var(--c2d-pc-320-h,520px)!important;min-height:var(--c2d-pc-320-h,520px)!important;max-height:var(--c2d-pc-320-h,520px)!important;}
  .products-grid .product-card .product-thumb{flex-basis:var(--c2d-pc-320-img,195px)!important;height:var(--c2d-pc-320-img,195px)!important;min-height:var(--c2d-pc-320-img,195px)!important;max-height:var(--c2d-pc-320-img,195px)!important;}
  .products-grid .product-card .product-body{padding:var(--c2d-pc-320-pad,11px)!important;}
  .products-grid .product-card .product-body h4{font-size:var(--c2d-pc-320-title,14px)!important;}
  .products-grid .product-card .product-body p{font-size:var(--c2d-pc-320-desc,12px)!important;}
}


/* ============================================================
   C2D MOUSE / DEVICE PRODUCT-CARD TEXT FLOW FINAL ALIGNMENT
   Presentation-only. Touch/no-mouse card rules remain authoritative.
   Keeps title/status clear of the image border and removes artificial
   flex expansion after the description while preserving existing data.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .products-grid .product-card .product-body{
    padding-top:clamp(16px,var(--c2d-pc-body-top-scale,1.15vw),20px) !important;
    justify-content:flex-start !important;
  }
  .products-grid .product-card .product-body h4{
    margin-top:2px !important;
  }
  .products-grid .product-card .product-body p{
    flex:0 1 auto !important;
    min-height:0 !important;
    margin-bottom:10px !important;
  }
  .products-grid .product-card .product-foot{
    margin-top:auto !important;
  }
}

/* Banner logo: the only banner change requested by the specification.
   Keep the existing image/size/position and remove only surrounding borders. */
.c2d-banner-fixed-logo,
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Touch scrolling: never allow the product grid to become a scroll trap. */
@media (hover:none), (pointer:coarse){
  html,body{
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }
  #productsGrid,.products-grid{
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:auto !important;
  }
  #productsGrid .product-card{
    touch-action:pan-y !important;
  }
}

/* ===== V14 TOP-TO-BOTTOM 9 POINTS SAFE FIXES ===== */

/* 5# Banner logo border completely removed on all sides */
.c2d-banner-fixed-logo,
body.lang-ur .c2d-banner-fixed-logo,
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image,
.c2d-banner-fixed-logo * {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.c2d-banner-fixed-logo {
  background: transparent !important;
}
.c2d-logo-halo {
  display: none !important; /* remove any halo ring that looks like border */
}

/* Compact featured pagination: dots remain tappable but reserve no extra band.
   The track is translated one card per timer tick by the existing single
   timeout controller; no parallel animation is introduced. */
.circle-carousel-dots{gap:4px!important;margin:3px auto 0!important;min-height:10px!important;line-height:0!important;}
.circle-carousel-dot{width:5px!important;height:5px!important;box-shadow:none!important;}
.circle-carousel-dot.active{transform:scale(1.35)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 16%,transparent)!important;}

/* Details is a local disclosure control, never a page-scroll blocker. */
@media (hover:none),(pointer:coarse){
  .product-card[data-touch-mode="tap-details"],.product-card[data-touch-mode="tap-then-open"]{touch-action:pan-y!important;overscroll-behavior:auto!important;}
  .product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,.product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{touch-action:manipulation!important;}
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-body,.product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-body{position:relative!important;overflow:visible!important;max-height:none!important;}
}

/* Product-card text must never be cropped on mouse/desktop layouts.  Earlier
   fixed heights left less room than the mobile reference when a real product
   had a longer title, warranty/status row or description.  Keep Admin Panel
   dimensions as the minimum geometry, while allowing the existing content to
   determine the final height.  This is presentation-only: no product data is
   changed and touch cards retain their existing layout. */
@media (hover:hover) and (pointer:fine){
  .products-grid .product-card{
    height:auto !important;
    max-height:none !important;
    min-height:var(--c2d-pc-1440-h,390px) !important;
  }
  .products-grid .product-card .product-body,
  .products-grid .product-card .product-body.c2d-product-details{
    min-height:180px !important;
    overflow:visible !important;
  }
  .products-grid .product-card .product-body p{
    -webkit-line-clamp:unset !important;
    overflow:visible !important;
  }
}

/* 1# Inventory Audit KPI + Calculator alignment & no text hide */
.admin-body .admin-advanced-tools {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 340px) !important;
  gap: 16px !important;
  align-items: start !important;
}
.admin-body .inventory-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.admin-body .inventory-kpi-grid > div {
  min-width: 0 !important;
  padding: 12px 10px !important;
  overflow: visible !important;
}
.admin-body .inventory-kpi-grid strong {
  font-size: 15px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  line-height: 1.2 !important;
}
.admin-body .inventory-kpi-grid span,
.admin-body .inventory-kpi-grid small {
  font-size: 9px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
.admin-body .inventory-tool-head {
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: flex-start !important;
  overflow: visible !important;
}
.admin-body .inventory-tool-head h3 {
  font-size: 16px !important;
  white-space: normal !important;
  overflow: visible !important;
}
.admin-body .inventory-tool-head p {
  font-size: 11px !important;
  overflow: visible !important;
}
.admin-body .admin-advanced-tools > .admin-tool-card:last-child {
  position: sticky !important;
  top: 12px !important;
  align-self: start !important;
  max-height: none !important;
  overflow: visible !important;
}
@media (max-width: 1100px) {
  .admin-body .admin-advanced-tools {
    grid-template-columns: 1fr !important;
  }
  .admin-body .inventory-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  .admin-body .inventory-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 4# Smooth one-by-one sliders (no jolt) */
.c2d-phone-banner-card,
.c2d-banner-card,
.featured-slider .slide,
.product-slider .slide {
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease !important;
}
.featured-products-slider,
.clients-slider,
.marquee-track {
  scroll-behavior: smooth !important;
}

/* 6# Mobile products area + detail page smooth scroll, no stuck */
html, body {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}
#productsGrid, .products-grid, .product-detail, .admin-panel, .modal, .popup, .cart-drawer {
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain auto !important;
}
@media (max-width: 768px) {
  #productsGrid, .products-grid {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .product-card {
    touch-action: pan-y !important;
  }
}

/* 7# Cart WhatsApp button instant visibility */
.cart-popup .wa-btn,
.cart-drawer .wa-btn,
.your-cart .whatsapp-btn,
#cartWhatsAppBtn,
.cart-actions .btn-whatsapp,
.cart-footer .wa-order-btn {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
  display: inline-flex !important;
}

/* Performance: reduce lagging/flicker */
.admin-body *,
.product-card,
.modal,
.popup {
  backface-visibility: hidden;
}


/* ================================================================
   C2D REQUESTED FINAL POLISH — FEATURED SLIDER / BANNER LOGO
   Only presentation/interaction rules for the requested areas.
   ================================================================ */
/* Banner logo border is never drawn, regardless of saved Admin setting. */
.c2d-banner-fixed-logo,
.c2d-banner-fixed-logo::before,
.c2d-banner-fixed-logo::after,
.c2d-banner-fixed-logo img,
.c2d-banner-fixed-logo .js-banner-image{border:0!important;outline:0!important;box-shadow:none!important;}
.c2d-banner-fixed-logo{background:transparent!important;}

/* Featured Products matches the supplied video: eight desktop cards,
   one-card/one-step movement, no track gaps and a compact dot row. */
.circle-carousel{overflow:hidden!important;}
.circle-carousel-viewport{width:100%!important;overflow:hidden!important;padding:12px 0 8px!important;}
.circle-carousel-track{gap:0!important;will-change:transform;backface-visibility:hidden;}
.featured-circle-card{flex:0 0 12.5%!important;box-sizing:border-box!important;padding:8px 8px 4px!important;}
.featured-circle-image{width:min(138px,100%)!important;margin-bottom:10px!important;}
.featured-circle-card strong{min-height:36px!important;}
.circle-carousel-dots{margin:5px auto 0!important;min-height:12px!important;gap:7px!important;}
.circle-carousel-dot{width:7px!important;height:7px!important;}
@media(max-width:1100px){
  .featured-circle-card{flex-basis:20%!important;}
}
@media(max-width:760px){
  .featured-circle-card{flex-basis:33.333333%!important;padding-inline:5px!important;}
  .featured-circle-image{width:min(112px,100%)!important;}
  .circle-carousel-dots{gap:6px!important;}
}
@media(max-width:520px){
  .featured-circle-card{flex-basis:50%!important;}
  .featured-circle-image{width:112px!important;}
}

/* Prevent any animation layer from creating a visible intermediate blank
   frame while Featured Products remeasures after responsive changes. */
.featured-circle-card,.featured-circle-image,.featured-circle-image img{backface-visibility:hidden;}


/* C2D requested Special Offers Studio */
.c2d-special-offers-slides{display:grid;gap:12px}
.c2d-offer-slide-editor{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card);box-shadow:0 8px 22px rgba(0,0,0,.06)}
.c2d-offer-slide-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.c2d-offer-slide-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c2d-inline-check{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.c2d-special-offers-preview-wrap{margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
.c2d-special-offers-preview{min-height:160px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-alt);display:grid;place-items:center}
.c2d-offer-preview-stage{width:100%;height:clamp(180px,28vw,360px);position:relative;overflow:hidden}
.c2d-offer-preview-slide{position:absolute;inset:0;display:grid;place-items:center;gap:8px;padding:18px;text-align:center}
.c2d-offer-preview-slide img,.c2d-offer-preview-slide video{width:100%;height:100%;object-fit:contain;max-height:300px}
.c2d-offer-preview-slide strong{position:absolute;left:16px;right:16px;bottom:14px;padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.6);color:#fff}
.c2d-offer-preview-banner-mode{padding:35px;text-align:center;display:grid;gap:8px}
.c2d-special-offer-public-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.c2d-special-offer-public-slide .c2d-banner-slide-replacement-image,.c2d-special-offer-public-slide .c2d-banner-slide-replacement-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.c2d-special-offer-public-slide img,.c2d-special-offer-public-slide video{width:100%!important;height:100%!important;object-fit:cover!important}
.c2d-special-offer-public-title{position:absolute;z-index:3;bottom:5%;left:5%;right:5%;padding:12px 18px;border-radius:12px;background:rgba(0,0,0,.58);color:#fff;text-align:center;font-size:clamp(18px,2.4vw,34px);font-weight:800}
@media(max-width:700px){.c2d-offer-slide-editor .admin-form-row{grid-template-columns:1fr}.c2d-special-offer-public-title{font-size:18px;padding:9px 12px}}

/* Detail badge must remain a local card interaction; never lock document scrolling. */
.c2d-touch-details-badge{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}
.product-card[data-touch-mode="tap-details"],.product-card[data-touch-mode="tap-then-open"]{touch-action:pan-y!important;overscroll-behavior:auto!important}
.product-card[data-touch-mode="tap-details"] .product-thumb,.product-card[data-touch-mode="tap-then-open"] .product-thumb{touch-action:pan-y!important}
.product-card[data-touch-mode="tap-details"] .c2d-touch-details-badge,.product-card[data-touch-mode="tap-then-open"] .c2d-touch-details-badge{touch-action:manipulation!important}

/* Product detail page: QR stays directly below the social icons, matching landing-page placement. */
.product-detail-page .footer-qr-wrap{margin-top:14px}


/* ================================================================
   C2D FINAL SAFE RESPONSIVE / INTERACTION HARDENING
   Scoped to requested featured carousel, cart CTA, touch detail badge,
   category dropdown and mobile scroll behavior.
   ================================================================ */

/* Featured Products — reference-video geometry: 8 desktop cards, one-card
   movement, compact centered dots, no visual jump or horizontal bleed. */
.circle-carousel{min-width:0;overflow:hidden!important;}
.circle-carousel-viewport{min-width:0;overflow:hidden!important;touch-action:pan-y!important;contain:layout paint;}
.circle-carousel-track{display:flex!important;gap:0!important;align-items:flex-start;transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;}
.featured-circle-card{flex:0 0 12.5%!important;width:12.5%!important;max-width:12.5%!important;box-sizing:border-box!important;min-width:0!important;overflow:hidden;}
.circle-carousel-dots{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:14px!important;margin:0!important;padding:4px 0 2px!important;direction:ltr!important;overflow:hidden!important;}
.circle-carousel-dot{display:block!important;flex:0 0 9px!important;width:9px!important;height:9px!important;min-width:9px!important;padding:0!important;border:0!important;border-radius:999px!important;background:rgba(120,140,165,.45)!important;box-shadow:none!important;cursor:pointer!important;transition:width .22s ease,background-color .22s ease,transform .22s ease!important;}
.circle-carousel-dot.active{flex-basis:22px!important;width:22px!important;background:var(--blue)!important;box-shadow:0 0 0 4px rgba(6,182,255,.12)!important;transform:none!important;}
@media(max-width:1100px){.featured-circle-card{flex-basis:20%!important;width:20%!important;max-width:20%!important;}}
@media(max-width:760px){.featured-circle-card{flex-basis:33.333333%!important;width:33.333333%!important;max-width:33.333333%!important;}.circle-carousel{gap:3px!important}.circle-carousel-dots{gap:6px!important;}}
@media(max-width:520px){.featured-circle-card{flex-basis:50%!important;width:50%!important;max-width:50%!important}.featured-circle-image{width:min(120px,100%)!important}.circle-carousel-dots{gap:5px!important;}}

/* Cart: footer is always inside the visible drawer viewport. The item list
   yields space to the CTA rather than pushing it below the scroll container. */
.cart-drawer{height:100dvh!important;max-height:100dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;box-sizing:border-box!important;}
.cart-drawer .cart-head{flex:0 0 auto!important;}
.cart-drawer .cart-items{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;}
.cart-drawer .cart-foot{flex:0 0 auto!important;min-height:max-content!important;position:relative!important;z-index:50!important;display:flex!important;flex-direction:column!important;gap:8px!important;padding:12px 16px max(12px,env(safe-area-inset-bottom))!important;visibility:visible!important;opacity:1!important;transform:none!important;}
.cart-drawer .cart-foot #checkoutBtn{display:flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;visibility:visible!important;opacity:1!important;transform:none!important;animation:none!important;white-space:normal!important;}
.cart-drawer .cart-foot #checkoutBtn>span{display:inline-flex!important;align-items:center!important;visibility:visible!important;opacity:1!important;}
@media(max-width:640px){.cart-drawer{width:min(100vw,420px)!important;max-width:100vw!important}.cart-drawer .cart-foot{padding-inline:12px!important}.cart-drawer .cart-items{padding-inline:12px!important;}}

/* Touch product cards: the Detail/Hide badge is permanently anchored directly
   below the heart, independent of Offer Badge state, language or admin flags. */
@media (hover:none),(pointer:coarse){
  .product-card[data-touch-mode="tap-details"] .product-thumb .card-wishlist-btn,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .card-wishlist-btn{
    top:10px!important;right:10px!important;left:auto!important;inset-inline-end:10px!important;inset-inline-start:auto!important;width:32px!important;height:32px!important;z-index:40!important;
  }
  .product-card[data-touch-mode="tap-details"] .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"] .product-thumb .c2d-touch-details-badge{
    display:flex!important;position:absolute!important;top:52px!important;right:10px!important;left:auto!important;bottom:auto!important;inset-inline-end:10px!important;inset-inline-start:auto!important;
    width:auto!important;min-width:64px!important;max-width:calc(100% - 20px)!important;min-height:30px!important;height:30px!important;padding:5px 12px!important;box-sizing:border-box!important;
    z-index:41!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;
    touch-action:manipulation!important;user-select:none!important;white-space:nowrap!important;overflow:visible!important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .product-thumb .c2d-touch-details-badge{top:52px!important;right:10px!important;left:auto!important;bottom:auto!important;transform:none!important;}
  body.lang-ur .product-card[data-touch-mode="tap-details"] .product-thumb .c2d-touch-details-badge,
  body.lang-ur .product-card[data-touch-mode="tap-then-open"] .product-thumb .c2d-touch-details-badge{right:10px!important;left:auto!important;inset-inline-end:10px!important;inset-inline-start:auto!important;}
  /* Never allow old offer/discount-dependent positioning rules to move Detail. */
  .product-card .product-thumb:has(.product-offer-badge) .c2d-touch-details-badge,
  .product-card .product-thumb:has(.discount-badge) .c2d-touch-details-badge,
  .product-card .product-thumb:has(.discount-badge):has(.product-offer-badge) .c2d-touch-details-badge{top:52px!important;right:10px!important;left:auto!important;bottom:auto!important;}
}

/* Category dropdown: one authoritative physical box on <=1024px. No LTR/RTL
   overflow, flyout columns or duplicate edge text. */
@media(max-width:1024px){
  body:not(.admin-body) #catMenuSharedDrop.open{
    position:fixed!important;left:8px!important;right:auto!important;inset-inline-start:8px!important;inset-inline-end:auto!important;
    width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;min-width:0!important;
    display:block!important;column-count:1!important;columns:1!important;-webkit-columns:1!important;
    overflow-x:hidden!important;overflow-y:auto!important;box-sizing:border-box!important;
    direction:ltr!important;
  }
  body:not(.admin-body) #catMenuSharedDrop.open .cmd-treelist,
  body:not(.admin-body) #catMenuSharedDrop.open .cmd-products-flat,
  body:not(.admin-body) #catMenuSharedDrop.open .cmd-mobile-category-flat{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important;gap:0!important;
    width:100%!important;max-width:100%!important;min-width:0!important;column-count:1!important;columns:1!important;
  }
  body:not(.admin-body) #catMenuSharedDrop.open .cmd-row{
    display:flex!important;align-items:center!important;width:100%!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important;white-space:normal!important;overflow:visible!important;
    overflow-wrap:anywhere!important;word-break:normal!important;text-overflow:clip!important;
    direction:inherit!important;
  }
  body:not(.admin-body) #catMenuSharedDrop.open .cmd-label{
    display:block!important;flex:1 1 auto!important;width:auto!important;max-width:100%!important;min-width:0!important;
    white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important;word-break:normal!important;text-overflow:clip!important;
  }
  body:not(.admin-body) #catMenuSharedDrop.open .cmd-flyout{display:none!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important;}
}
@media(max-width:360px){body:not(.admin-body) #catMenuSharedDrop.open{left:6px!important;inset-inline-start:6px!important;width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;}}

/* Product page must remain natively scrollable after Detail navigation. */
html.product-detail-page,html.product-detail-page body,body.product-detail-page{
  overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y!important;overscroll-behavior-y:auto!important;
}
body.product-detail-page #pdContent{touch-action:pan-y!important;}

/* ===== V23 FEATURED VIDEO-EXACT — slider stability only (no data change) ===== */
#featuredCircleTrack.circle-carousel-track,
.circle-carousel-track {
  display: flex !important;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.featured-circle-card {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.featured-circle-image {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
}
.featured-circle-image img {
  display: block;
  width: 88% !important;
  height: 88% !important;
  object-fit: contain !important;
  margin: auto;
}
.circle-carousel-dot {
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}
.circle-carousel-dot.active {
  transform: scale(1.25) !important;
}

/* ===== V24 FEATURED SLIDE STYLE — video-exact smooth one-by-one ===== */
.circle-carousel-viewport {
  overflow: hidden !important;
  width: 100% !important;
}
#featuredCircleTrack.circle-carousel-track,
.circle-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  /* transition duration/easing set in JS for exact control */
}
.featured-circle-card {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  /* width set by JS to exact viewport/N — overrides % basis */
}
.featured-circle-image {
  aspect-ratio: 1 / 1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.circle-carousel-dot {
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.circle-carousel-dot.active {
  transform: scale(1.28) !important;
}

/* ===== V25 FEATURED SLIDE — pixel geometry wins over % rules (video-exact) ===== */
.circle-carousel-viewport {
  overflow: hidden !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#featuredCircleTrack.circle-carousel-track,
.circle-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  /* transition set by JS for exact duration control */
}
/* Let JS set exact px widths — kill percentage flex-basis fights */
#featuredCircleTrack .featured-circle-card,
.circle-carousel-track .featured-circle-card {
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  /* width/min/max/flex applied inline by JS with !important */
}
#featuredCircleTrack .featured-circle-image,
.featured-circle-card .featured-circle-image {
  aspect-ratio: 1 / 1 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}
#featuredCircleTrack .featured-circle-image img {
  display: block !important;
  width: 88% !important;
  height: 88% !important;
  object-fit: contain !important;
  margin: auto !important;
}
.circle-carousel-dot {
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.circle-carousel-dot.active {
  transform: scale(1.28) !important;
}

/* ===== V26 Featured Urdu arrows = same physical L/R as English (⬅️ left, ➡ right) ===== */
/* Keep carousel geometry LTR on BOTH languages so slide math + arrows match English */
#featuredCircleCarousel.circle-carousel,
#featured .circle-carousel,
body.lang-ur #featuredCircleCarousel.circle-carousel,
html[dir="rtl"] #featuredCircleCarousel.circle-carousel {
  direction: ltr !important;
}
#featuredCircleTrack.circle-carousel-track,
body.lang-ur #featuredCircleTrack,
html[dir="rtl"] #featuredCircleTrack {
  direction: ltr !important;
}
#featuredCircleDots.circle-carousel-dots,
body.lang-ur #featuredCircleDots,
html[dir="rtl"] #featuredCircleDots {
  direction: ltr !important;
}
/* Physical sides: prev = left ‹ , next = right › — all sizes, EN + UR */
#featuredCircleCarousel .circle-carousel-btn.prev,
body.lang-ur #featuredCircleCarousel .circle-carousel-btn.prev,
html[dir="rtl"] #featuredCircleCarousel .circle-carousel-btn.prev {
  left: 0 !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}
#featuredCircleCarousel .circle-carousel-btn.next,
body.lang-ur #featuredCircleCarousel .circle-carousel-btn.next,
html[dir="rtl"] #featuredCircleCarousel .circle-carousel-btn.next {
  right: 0 !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}
#featuredCircleCarousel .circle-carousel-btn.prev:hover,
#featuredCircleCarousel .circle-carousel-btn.next:hover {
  transform: translateY(-50%) scale(1.06) !important;
}
/* Force arrow glyphs so RTL never mirrors them */
#featuredPrev.circle-carousel-btn.prev::before {
  content: "‹";
  font-size: inherit;
  line-height: 1;
}
#featuredNext.circle-carousel-btn.next::before {
  content: "›";
  font-size: inherit;
  line-height: 1;
}
/* Hide original text nodes if any, use ::before only for consistency */
#featuredPrev.circle-carousel-btn.prev,
#featuredNext.circle-carousel-btn.next {
  font-size: 0 !important;
}
#featuredPrev.circle-carousel-btn.prev::before,
#featuredNext.circle-carousel-btn.next::before {
  font-size: 28px !important;
  display: inline-block;
  speak: literal-punctuation;
}
@media (max-width: 760px) {
  #featuredPrev.circle-carousel-btn.prev::before,
  #featuredNext.circle-carousel-btn.next::before {
    font-size: 22px !important;
  }
}
/* Card text can stay RTL on Urdu; layout track stays LTR */
body.lang-ur .featured-circle-card {
  direction: rtl;
}

/* ===== V27 Featured dots: active slides with products (size unchanged) ===== */
#featuredCircleDots .circle-carousel-dot {
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
/* Keep existing size; only emphasize active while products auto-slide */
#featuredCircleDots .circle-carousel-dot.active {
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

/* ===== V28 Special Offers — exact banner area (green-arrow zone) full-bleed ===== */
#c2dPhoneBanner.c2d-offers-mode,
#c2dPhoneBanner[data-logo-side="none"]{
  background: var(--c2d-offers-bg, #0b1a2e) !important;
  border-radius: var(--c2d-offers-radius, 24px) !important;
  overflow: hidden !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-fixed-logo,
#c2dPhoneBanner[data-logo-side="none"] .c2d-banner-fixed-logo{
  display: none !important;
  visibility: hidden !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport,
#c2dPhoneBanner[data-logo-side="none"] .c2d-banner-card-viewport{
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  max-width: none !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-track,
#c2dPhoneBanner[data-logo-side="none"] .c2d-banner-card-track{
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 0;
  transition: opacity .55s ease !important;
  pointer-events: none;
  z-index: 1;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide.is-current{
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 2;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide.is-hidden{
  opacity: 0 !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-image,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-image img,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-video video{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-dots{
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
}
.c2d-special-offer-empty{
  width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:clamp(18px,2.5vw,32px);
}

/* ===== V29 Special Offers — reference-style full banner promo slider ===== */
#c2dPhoneBanner.c2d-offers-mode{
  position: relative !important;
  overflow: hidden !important;
  background: var(--c2d-offers-bg, #0b1a2e) !important;
  border-radius: var(--c2d-offers-radius, 24px) !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-stage{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-overlay{
  display: none !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-fixed-logo{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport{
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  perspective: none !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-track{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  opacity: 0;
  transition: opacity .55s ease !important;
  pointer-events: none;
  z-index: 1;
  display: block !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide.is-current{
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 2;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide.is-hidden{
  opacity: 0 !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-image,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-video,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-image img,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-video video,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link video{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-dots{
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 12px !important;
  z-index: 40 !important;
}
/* Reference-style side arrows */
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrows{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 35 !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow{
  pointer-events: auto !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  display: grid !important;
  place-items: center !important;
  transition: transform .2s ease, background .2s ease !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow:hover{
  transform: translateY(-50%) scale(1.06) !important;
  background: #fff !important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow.prev{ left: 12px !important; }
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow.next{ right: 12px !important; }
@media (max-width: 760px){
  #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow{
    width: 36px !important; height: 36px !important; font-size: 22px !important;
  }
  #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow.prev{ left: 6px !important; }
  #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow.next{ right: 6px !important; }
}

/* V30 — Special Offers performance/transition tuning. Only the active offer
   is visually interactive; transition timing is controlled by Admin Panel. */
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide{
  transition:opacity var(--c2d-offer-transition,550ms) ease!important;
  will-change:opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* C2D FINAL BANNER RESPONSIVE SAFETY OVERRIDE — requested banner/offer fixes only */
#c2dPhoneBanner{
  --c2d-logo-panel-width:46.5%;
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  overflow:hidden!important;
}
#c2dPhoneBanner .c2d-phone-banner-stage{
  width:100%;
  min-height:clamp(320px,31vw,420px)!important;
  height:clamp(320px,31vw,420px)!important;
  padding:0!important;
  box-sizing:border-box;
  overflow:hidden!important;
}
/* Fixed logo is a true responsive panel. The source is 1024x683 (~1.50:1),
   so the panel height follows its width instead of cropping the artwork. */
#c2dPhoneBanner .c2d-banner-fixed-logo{
  top:0!important;
  bottom:0!important;
  width:var(--c2d-logo-panel-width)!important;
  height:100%!important;
  margin:0!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:var(--c2d-logo-background, #06131f)!important;
  border:0!important;
  border-radius:0!important;
}
#c2dPhoneBanner .c2d-banner-fixed-logo .c2d-logo-halo{display:none!important;}
#c2dPhoneBanner .c2d-banner-fixed-logo img,
#c2dPhoneBanner .c2d-banner-fixed-logo .js-banner-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
  box-sizing:border-box!important;
}
/* Slider owns only the opposite panel; never overlap the logo. */
#c2dPhoneBanner .c2d-banner-card-viewport{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:calc(100% - var(--c2d-logo-panel-width))!important;
  height:100%!important;
  inset-inline-start:0!important;
  inset-inline-end:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner .c2d-banner-card-viewport{
  inset-inline-start:auto!important;
  inset-inline-end:0!important;
}
#c2dPhoneBanner .c2d-banner-card-track{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:visible!important;
}
#c2dPhoneBanner .c2d-banner-card{
  top:50%!important;
  left:0!important;
  right:auto!important;
  width:calc(100% - 20px)!important;
  max-width:none!important;
  min-height:0!important;
  height:calc(100% - 24px)!important;
  max-height:calc(100% - 24px)!important;
  margin:0!important;
  padding:clamp(16px,2.1vw,30px)!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner .c2d-banner-card{left:auto!important;right:0!important;}
#c2dPhoneBanner .c2d-banner-card-content{min-width:0!important;max-width:100%!important;overflow:hidden!important;}
#c2dPhoneBanner .c2d-banner-card-h1,
#c2dPhoneBanner .c2d-banner-card-h2,
#c2dPhoneBanner .c2d-banner-card-address,
#c2dPhoneBanner .c2d-banner-card-url{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important;}
#c2dPhoneBanner .c2d-banner-card-image{max-width:30%!important;min-width:70px!important;}
#c2dPhoneBanner .c2d-banner-card-image img{max-width:100%!important;max-height:100%!important;object-fit:contain!important;}
#c2dPhoneBanner .c2d-phone-banner-dots{left:calc((100% - var(--c2d-logo-panel-width))/2)!important;transform:translateX(-50%)!important;bottom:8px!important;}
body.lang-ur #c2dPhoneBanner .c2d-phone-banner-dots{left:calc(var(--c2d-logo-panel-width) + (100% - var(--c2d-logo-panel-width))/2)!important;}

/* 1024px and 1140px: keep the two halves separate and fully inside viewport. */
@media (min-width:801px) and (max-width:1200px){
  #c2dPhoneBanner{--c2d-logo-panel-width:46.5%;}
  #c2dPhoneBanner .c2d-phone-banner-stage{min-height:320px!important;height:31vw!important;max-height:380px!important;}
  #c2dPhoneBanner .c2d-banner-card{width:calc(100% - 12px)!important;height:calc(100% - 20px)!important;padding:18px!important;}
  #c2dPhoneBanner .c2d-banner-card-h1{font-size:clamp(24px,3vw,38px)!important;}
  #c2dPhoneBanner .c2d-banner-card-h2{font-size:clamp(14px,1.7vw,22px)!important;}
  #c2dPhoneBanner .c2d-banner-card-address{font-size:clamp(10px,1.05vw,13px)!important;}
  #c2dPhoneBanner .c2d-banner-card-url{font-size:clamp(12px,1.25vw,17px)!important;}
}

/* Tablet/mobile: stack the logo and slider. This is the only reliable way to
   keep the 1.50:1 logo artwork 100% uncropped while retaining readable slides. */
@media (max-width:800px){
  #c2dPhoneBanner{--c2d-logo-panel-width:100%;height:auto!important;min-height:0!important;}
  #c2dPhoneBanner .c2d-phone-banner-stage{
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo,
  body.lang-ur #c2dPhoneBanner .c2d-banner-fixed-logo,
  body:not(.lang-ur) #c2dPhoneBanner .c2d-banner-fixed-logo{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1024/683!important;
    flex:0 0 auto!important;
  }
  #c2dPhoneBanner .c2d-banner-fixed-logo img{object-fit:contain!important;width:100%!important;height:100%!important;}
  #c2dPhoneBanner .c2d-banner-card-viewport,
  body.lang-ur #c2dPhoneBanner .c2d-banner-card-viewport{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    width:100%!important;
    height:clamp(260px,52vw,360px)!important;
    min-height:260px!important;
    max-height:360px!important;
    flex:0 0 auto!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner .c2d-banner-card,
  body.lang-ur #c2dPhoneBanner .c2d-banner-card{
    left:0!important;right:auto!important;width:100%!important;height:calc(100% - 12px)!important;max-height:none!important;top:50%!important;padding:18px!important;border-radius:16px!important;
  }
  #c2dPhoneBanner .c2d-banner-card-content,
  body.lang-ur #c2dPhoneBanner .c2d-banner-card-content{align-items:center!important;text-align:center!important;overflow:visible!important;}
  #c2dPhoneBanner .c2d-banner-card-h1{font-size:clamp(20px,6vw,32px)!important;}
  #c2dPhoneBanner .c2d-banner-card-h2{font-size:clamp(13px,3.8vw,18px)!important;}
  #c2dPhoneBanner .c2d-banner-card-address{font-size:clamp(10px,2.8vw,13px)!important;}
  #c2dPhoneBanner .c2d-banner-card-url{font-size:clamp(12px,3.4vw,16px)!important;}
  #c2dPhoneBanner .c2d-banner-card-image{display:none!important;}
  #c2dPhoneBanner .c2d-phone-banner-dots{position:absolute!important;left:50%!important;bottom:6px!important;transform:translateX(-50%)!important;}
}
@media (max-width:520px){
  #c2dPhoneBanner .c2d-banner-card-viewport{height:clamp(250px,65vw,310px)!important;min-height:250px!important;}
  #c2dPhoneBanner .c2d-banner-card{padding:14px!important;}
  #c2dPhoneBanner .c2d-banner-card-h1{font-size:clamp(18px,6vw,27px)!important;}
  #c2dPhoneBanner .c2d-banner-card-h2{font-size:clamp(12px,3.8vw,16px)!important;}
  #c2dPhoneBanner .c2d-banner-card-address{font-size:10px!important;line-height:1.4!important;}
  #c2dPhoneBanner .c2d-banner-card-url{font-size:12px!important;}
}

/* Special Offers: true full-bleed media at every breakpoint, with title/text
   independently controllable and no fixed desktop dimensions leaking into it. */
#c2dPhoneBanner.c2d-offers-mode,
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-stage,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-track{width:100%!important;max-width:none!important;box-sizing:border-box!important;}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide{inset:0!important;width:100%!important;height:100%!important;}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video{width:100%!important;height:100%!important;display:block!important;max-width:none!important;max-height:none!important;}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-title{max-width:90%;box-sizing:border-box;overflow-wrap:anywhere;}
@media (max-width:800px){#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-stage{height:clamp(260px,72vw,520px)!important;min-height:260px!important;}#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport{height:100%!important;}.c2d-special-offer-public-title{font-size:clamp(14px,4vw,22px)!important;}}

/* C2D FINAL RESPONSIVE BANNER/ SPECIAL-OFFERS PATCH — 2026-09-16
   Scope: banner logo, banner slider, Special Offers responsiveness and text visibility.
   Existing data is intentionally not altered. */
#c2dPhoneBanner{height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{height:clamp(320px,31vw,420px)!important;min-height:320px!important;max-height:420px!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{top:0!important;bottom:0!important;height:100%!important;width:46.5%!important;transform:none!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:var(--c2d-logo-background,#06131f)!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .c2d-logo-halo{display:none!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;margin:0!important;padding:0!important;filter:none!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{top:0!important;bottom:0!important;left:0!important;right:auto!important;width:53.5%!important;height:100%!important;inset-inline-start:0!important;inset-inline-end:auto!important;overflow:hidden!important;margin:0!important;}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{left:auto!important;right:0!important;inset-inline-start:auto!important;inset-inline-end:0!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-track{height:100%!important;min-height:0!important;width:100%!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{top:50%!important;left:0!important;right:auto!important;width:calc(100% - 14px)!important;height:calc(100% - 18px)!important;min-height:0!important;max-height:none!important;margin:0!important;box-sizing:border-box!important;padding:clamp(14px,2vw,30px)!important;}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{left:auto!important;right:0!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-content{min-width:0!important;max-width:100%!important;overflow:visible!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h1,#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h2,#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-address,#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-url{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important;}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{left:26.75%!important;bottom:7px!important;transform:translateX(-50%)!important;}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{left:73.25%!important;}
@media (min-width:801px) and (max-width:1200px){
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{height:clamp(320px,31vw,380px)!important;min-height:320px!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{width:46.5%!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{width:calc(100% - 8px)!important;height:calc(100% - 14px)!important;padding:15px!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h1{font-size:clamp(22px,2.7vw,34px)!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h2{font-size:clamp(13px,1.65vw,20px)!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-address{font-size:clamp(9px,1vw,12px)!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-url{font-size:clamp(11px,1.2vw,16px)!important;}
}
@media (max-width:800px){
 #c2dPhoneBanner:not(.c2d-offers-mode){height:auto!important;min-height:0!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;overflow:hidden!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo,body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{position:relative!important;inset:auto!important;order:0!important;width:100%!important;height:auto!important;aspect-ratio:1024/683!important;flex:0 0 auto!important;transform:none!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img{object-fit:contain!important;width:100%!important;height:100%!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport,body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{position:relative!important;inset:auto!important;order:1!important;width:100%!important;height:clamp(260px,52vw,360px)!important;min-height:260px!important;max-height:360px!important;flex:0 0 auto!important;overflow:hidden!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card,body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{left:0!important;right:auto!important;width:100%!important;height:calc(100% - 8px)!important;top:50%!important;min-height:0!important;padding:16px!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-content,body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-content{align-items:center!important;text-align:center!important;overflow:visible!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-image{display:none!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h1{font-size:clamp(19px,6vw,30px)!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h2{font-size:clamp(12px,3.7vw,17px)!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-address{font-size:clamp(9.5px,2.7vw,13px)!important;line-height:1.4!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-url{font-size:clamp(11px,3.2vw,16px)!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{left:50%!important;bottom:5px!important;}
}
@media (max-width:520px){
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{height:clamp(250px,64vw,310px)!important;min-height:250px!important;}
 #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{padding:13px!important;}
}
/* Special Offers media/text controls remain full-bleed and responsive. */
#c2dPhoneBanner.c2d-offers-mode{height:clamp(300px,31vw,520px)!important;min-height:300px!important;max-height:520px!important;width:100%!important;overflow:hidden!important;}
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-stage,#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport,#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-track{width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide,#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-image,#c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-video{inset:0!important;width:100%!important;height:100%!important;}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block!important;}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-title{max-width:90%!important;overflow-wrap:anywhere!important;box-sizing:border-box!important;}
@media (max-width:800px){#c2dPhoneBanner.c2d-offers-mode{height:clamp(260px,72vw,520px)!important;min-height:260px!important;max-height:520px!important;}.c2d-special-offer-public-title{font-size:clamp(14px,4vw,22px)!important;padding:8px 10px!important;}}

/* ================================================================
   C2D FINAL REQUESTED SAFE PATCH — isolated, no English-banner changes
   ================================================================ */

/* Product-card Detail badge: one immutable physical anchor on touch devices.
   Offer/discount/admin settings cannot push it up/down/left/right. */
@media (hover:none),(pointer:coarse){
  .product-card .product-thumb .c2d-touch-details-badge,
  .product-card[data-touch-mode] .product-thumb .c2d-touch-details-badge{
    position:absolute!important;
    top:52px!important;
    right:10px!important;
    left:auto!important;
    bottom:auto!important;
    inset-inline-end:10px!important;
    inset-inline-start:auto!important;
    transform:none!important;
    margin:0!important;
    z-index:41!important;
  }
  body.lang-ur .product-card .product-thumb .c2d-touch-details-badge{
    right:10px!important;left:auto!important;inset-inline-end:10px!important;inset-inline-start:auto!important;
  }
}

/* Cart: the CTA belongs to the fixed drawer footer, never to the scrollable item list. */
.cart-drawer{
  height:100vh!important;
  height:100dvh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
}
.cart-drawer .cart-items{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}
.cart-drawer .cart-foot{
  flex:0 0 auto!important;
  min-height:0!important;
  position:relative!important;
  inset:auto!important;
  z-index:100!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  contain:layout paint!important;
  padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
}
.cart-drawer .cart-foot #checkoutBtn,
.cart-drawer .cart-foot #checkoutBtn > span,
.cart-drawer .cart-foot #checkoutBtn [data-icon="whatsapp"],
.cart-drawer .cart-foot #checkoutBtn [data-icon="whatsapp"] svg{
  opacity:1!important;
  visibility:visible!important;
  animation:none!important;
  transition:none!important;
  transform:none!important;
}

/* Special Offers: honor each slide's actual fit/position; later legacy CSS cannot
   force every upload to cover/crop. */
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link video{
  object-fit:var(--c2d-offer-fit,contain)!important;
  object-position:var(--c2d-offer-position,center)!important;
  opacity:var(--c2d-offer-opacity,1)!important;
}

/* Urdu NORMAL banner only: physical layout is locked to slider LEFT + logo RIGHT.
   English banner rules are intentionally untouched. */
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode){
  direction:ltr!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
  direction:ltr!important;
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:clamp(320px,31vw,420px)!important;
  min-height:320px!important;
  max-height:420px!important;
  overflow:hidden!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
  position:absolute!important;
  top:0!important;bottom:0!important;
  left:0!important;right:auto!important;
  width:53.5%!important;height:100%!important;
  inset-inline-start:0!important;inset-inline-end:auto!important;
  direction:ltr!important;
  overflow:hidden!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
  position:absolute!important;
  top:0!important;bottom:0!important;
  right:0!important;left:auto!important;
  width:46.5%!important;height:100%!important;
  inset-inline-end:0!important;inset-inline-start:auto!important;
  order:initial!important;
  direction:ltr!important;
  z-index:30!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img{
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
  left:0!important;right:auto!important;
  width:calc(100% - 8px)!important;height:calc(100% - 14px)!important;
  top:50%!important;
  transform:translate3d(0,-50%,0)!important;
  direction:rtl!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{
  left:26.75%!important;right:auto!important;
  bottom:7px!important;top:auto!important;
  transform:translateX(-50%)!important;
  direction:ltr!important;
  z-index:60!important;
}

@media (max-width:1100px) and (min-width:761px){
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{width:53.5%!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{width:46.5%!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{left:26.75%!important;}
}
@media (max-width:760px){
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{height:clamp(300px,78vw,440px)!important;min-height:300px!important;max-height:440px!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    top:0!important;bottom:0!important;left:0!important;right:auto!important;
    width:58%!important;height:100%!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    top:0!important;bottom:0!important;right:0!important;left:auto!important;
    width:42%!important;height:100%!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    left:0!important;right:auto!important;width:calc(100% - 6px)!important;height:calc(100% - 8px)!important;
    padding:16px 7px 34px!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h1{font-size:clamp(15px,5.2vw,28px)!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h2{font-size:clamp(9px,3.2vw,17px)!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-address{font-size:clamp(6.5px,2vw,11px)!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-url{font-size:clamp(9px,2.8vw,15px)!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{left:29%!important;bottom:5px!important;}
}
@media (max-width:420px){
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{height:320px!important;min-height:320px!important;max-height:320px!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{width:58%!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{width:42%!important;}
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{left:29%!important;bottom:4px!important;}
}

/* Special Offers dots are always centered in the full replacement media area. */
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-dots{
  left:50%!important;right:auto!important;
  bottom:10px!important;top:auto!important;
  transform:translateX(-50%)!important;
  direction:ltr!important;
  z-index:80!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow{
  z-index:90!important;
}

/* ================================================================
   C2D URDU-ONLY RESPONSIVE BANNER + SPECIAL OFFERS PATCH
   Scope: body.lang-ur only. English banner and Features Product slider
   are intentionally untouched.
   ================================================================ */

/* Urdu normal Banner + Slider + Logo: keep the requested physical order
   (slider LEFT / logo RIGHT) while making the complete unit fluid at every
   viewport. The height follows the available width instead of a fixed 320px
   mobile floor, which was the source of the cramped mobile/tablet layout. */
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) {
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  direction:ltr!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage {
  width:100%!important;
  height:clamp(300px,31vw,420px)!important;
  min-height:300px!important;
  max-height:420px!important;
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport {
  left:0!important;
  right:auto!important;
  inset-inline-start:0!important;
  inset-inline-end:auto!important;
  top:0!important;
  bottom:0!important;
  width:53.5%!important;
  height:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  direction:ltr!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo {
  left:auto!important;
  right:0!important;
  inset-inline-start:auto!important;
  inset-inline-end:0!important;
  top:0!important;
  bottom:0!important;
  width:46.5%!important;
  height:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  z-index:30!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img {
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card {
  left:0!important;
  right:auto!important;
  width:calc(100% - 8px)!important;
  max-width:none!important;
  height:calc(100% - 14px)!important;
  min-height:0!important;
  max-height:none!important;
  top:50%!important;
  padding:clamp(10px,1.8vw,24px)!important;
  box-sizing:border-box!important;
  direction:rtl!important;
  overflow:hidden!important;
  transform:translate3d(0,-50%,0)!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-content {
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  direction:rtl!important;
  align-items:flex-start!important;
  text-align:right!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h1,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-h2,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-address,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-url,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h1,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h2,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-address,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-url {
  max-width:100%!important;
  min-width:0!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots {
  left:26.75%!important;
  right:auto!important;
  top:auto!important;
  bottom:clamp(5px,1vw,10px)!important;
  transform:translateX(-50%)!important;
  direction:ltr!important;
  z-index:60!important;
}

/* 1140/1024/large-tablet: preserve two independent panels and give the
   slider enough height for Urdu text without letting it touch the logo. */
@media (min-width:761px) and (max-width:1200px) {
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage {
    height:clamp(300px,32vw,390px)!important;
    min-height:300px!important;
    max-height:390px!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport { width:53.5%!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo { width:46.5%!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card {
    width:calc(100% - 6px)!important;
    height:calc(100% - 12px)!important;
    padding:clamp(10px,1.5vw,18px)!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h1 { font-size:clamp(19px,2.8vw,34px)!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h2 { font-size:clamp(11px,1.55vw,19px)!important; line-height:1.25!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-address { font-size:clamp(8px,1vw,12px)!important; line-height:1.4!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-url { font-size:clamp(10px,1.2vw,16px)!important; }
}

/* Tablet/mobile: keep slider LEFT and logo RIGHT (do not stack them). The
   banner height now scales with viewport width, including 768/425/375/320. */
@media (max-width:760px) {
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage {
    height:clamp(210px,72vw,340px)!important;
    min-height:210px!important;
    max-height:340px!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport {
    left:0!important;
    right:auto!important;
    width:58%!important;
    height:100%!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo {
    left:auto!important;
    right:0!important;
    width:42%!important;
    height:100%!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card {
    left:0!important;
    right:auto!important;
    width:calc(100% - 4px)!important;
    height:calc(100% - 8px)!important;
    padding:clamp(8px,2.2vw,16px) clamp(5px,1.8vw,12px) clamp(24px,6vw,34px)!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h1 { font-size:clamp(14px,5.3vw,27px)!important; line-height:1.05!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h2 { font-size:clamp(8.5px,3.25vw,17px)!important; line-height:1.25!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-address { font-size:clamp(6.8px,2.05vw,11px)!important; line-height:1.35!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-url { font-size:clamp(8.5px,2.8vw,15px)!important; line-height:1.1!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots {
    left:29%!important;
    bottom:clamp(4px,1.2vw,7px)!important;
  }
}

/* Very narrow phones: retain the same two-panel structure but scale the
   complete unit down instead of forcing a fixed 320px-tall banner. */
@media (max-width:420px) {
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage {
    height:clamp(210px,72vw,300px)!important;
    min-height:210px!important;
    max-height:300px!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport { width:58%!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo { width:42%!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card { padding:7px 4px 23px!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h1 { font-size:clamp(13px,5.1vw,22px)!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h2 { font-size:clamp(8px,3.1vw,14px)!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-address { font-size:clamp(6.5px,2vw,9.5px)!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-url { font-size:clamp(8px,2.7vw,12px)!important; }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots { left:29%!important; bottom:4px!important; }
}

/* Urdu Special Offers: the replacement media owns the complete banner area.
   Its height follows the existing 1280x560 banner proportion, with a safe
   minimum for small phones. This is Urdu-only; English offer rendering is not
   changed. */
body.lang-ur #c2dPhoneBanner.c2d-offers-mode {
  width:100%!important;
  max-width:100%!important;
  height:clamp(170px,43.75vw,520px)!important;
  min-height:170px!important;
  max-height:520px!important;
  overflow:hidden!important;
  direction:ltr!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-stage,
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport,
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-track {
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  position:relative!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video,
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link img,
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link video {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  box-sizing:border-box!important;
  object-fit:var(--c2d-offer-fit,contain)!important;
  object-position:var(--c2d-offer-position,center)!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-image,
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-banner-slide-replacement-video,
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-link {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-title {
  left:50%!important;
  right:auto!important;
  max-width:90%!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
  overflow-wrap:anywhere!important;
  z-index:70!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-dots {
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:clamp(7px,1.2vw,14px)!important;
  transform:translateX(-50%)!important;
  direction:ltr!important;
  z-index:100!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrows {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  z-index:110!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow {
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  pointer-events:auto!important;
  z-index:111!important;
}
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow.prev { left:clamp(5px,1.2vw,14px)!important; right:auto!important; }
body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow.next { right:clamp(5px,1.2vw,14px)!important; left:auto!important; }

@media (max-width:760px) {
  body.lang-ur #c2dPhoneBanner.c2d-offers-mode {
    height:clamp(170px,43.75vw,340px)!important;
    min-height:170px!important;
    max-height:340px!important;
  }
  body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-title {
    font-size:clamp(12px,3.5vw,20px)!important;
    padding:6px 9px!important;
  }
}
@media (max-width:420px) {
  body.lang-ur #c2dPhoneBanner.c2d-offers-mode {
    height:clamp(170px,43.75vw,220px)!important;
    min-height:170px!important;
    max-height:220px!important;
  }
  body.lang-ur #c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow { font-size:24px!important; }
}

/* ================================================================
   C2D FINAL MOBILE/TABLET BANNER LAYOUT SAFETY — 2026-09-17
   Scope: normal website banner only.
   Urdu: <=800px uses the same responsive stacked composition as the
   intended mobile/tablet layout: LOGO TOP + SLIDER BOTTOM.
   English: 761–800px receives the same stable tablet composition.
   Special Offers mode is intentionally excluded.
   No data, media, slider state, or banner assets are changed here.
   ================================================================ */

/* Urdu tablet + mobile: exact physical order requested.
   Keep the stage as the containing block and let each section size itself
   from the viewport width; this avoids fixed-height/side-by-side conflicts. */
@media (max-width:800px){
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode){
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    direction:ltr!important;
    box-sizing:border-box!important;
  }

  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /* LOGO = TOP */
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1024 / 683!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    border-radius:18px 18px 0 0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    z-index:30!important;
  }

  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    margin:0!important;
  }

  /* SLIDER = BOTTOM */
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:clamp(250px,52vw,360px)!important;
    min-height:250px!important;
    max-height:360px!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    direction:ltr!important;
  }

  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-track{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
  }

  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:50%!important;
    width:100%!important;
    height:calc(100% - 8px)!important;
    min-height:0!important;
    max-height:none!important;
    padding:clamp(10px,2.5vw,16px)!important;
    margin:0!important;
    box-sizing:border-box!important;
    transform:translate3d(0,-50%,0)!important;
    direction:rtl!important;
    overflow:hidden!important;
  }

  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-content{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    direction:rtl!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h1{
    font-size:clamp(19px,6vw,30px)!important;
    line-height:1.08!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-h2{
    font-size:clamp(11px,3.7vw,17px)!important;
    line-height:1.25!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-address{
    font-size:clamp(8px,2.7vw,13px)!important;
    line-height:1.4!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-url{
    font-size:clamp(10px,3.2vw,16px)!important;
    line-height:1.15!important;
  }

  /* Dots belong to the slider's bottom edge, not the logo. */
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:5px!important;
    transform:translateX(-50%)!important;
    direction:ltr!important;
    z-index:60!important;
  }
}

/* Narrow phones: reduce only the lower slider's height while retaining the
   exact same LOGO TOP / SLIDER BOTTOM structure. */
@media (max-width:520px){
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    height:clamp(220px,64vw,300px)!important;
    min-height:220px!important;
    max-height:300px!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    padding:clamp(8px,2.5vw,13px)!important;
  }
}

/* English 768-class tablet: explicitly preserve the same stable stacked
   tablet layout already intended by the site's responsive banner system.
   This range is deliberately limited to 761–800px so desktop behavior is
   untouched. */
@media (min-width:761px) and (max-width:800px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode){
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1024 / 683!important;
    min-height:0!important;
    max-height:none!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    transform:none!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:clamp(260px,52vw,360px)!important;
    min-height:260px!important;
    max-height:360px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    left:0!important;
    right:auto!important;
    top:50%!important;
    width:100%!important;
    height:calc(100% - 8px)!important;
    min-height:0!important;
    max-height:none!important;
    padding:16px!important;
    transform:translate3d(0,-50%,0)!important;
    box-sizing:border-box!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:5px!important;
    transform:translateX(-50%)!important;
  }
}


/* ================================================================
   C2D FINAL REQUEST — TABLET/MOBILE BANNER STACK + OFFERS RESIZE
   This patch is intentionally additive and scoped to the requested banner
   and Special Offers presentation. Existing product/feature slider rules are
   not changed.
   ================================================================ */

/* At the tablet breakpoint requested by the user, use the same stable
   composition as the mobile banner: logo on top, slider underneath. The
   stage height is the exact sum of the two rows, so the old empty bottom
   strip cannot remain. */
@media (min-width:761px) and (max-width:800px), (max-width:760px) {
  #c2dPhoneBanner:not(.c2d-offers-mode){
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:calc(clamp(120px,38vw,292px) + clamp(140px,43.75vw,336px))!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:absolute!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:clamp(120px,38vw,292px)!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    z-index:30!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:absolute!important;
    inset:clamp(120px,38vw,292px) 0 0 0!important;
    width:100%!important;
    height:clamp(140px,43.75vw,336px)!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:10!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-track,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    box-sizing:border-box!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:clamp(5px,1.2vw,10px)!important;
    transform:translateX(-50%)!important;
    z-index:70!important;
  }
}

/* Special Offers media: explicit fit modes, including true edge-to-edge
   corner-to-corner fill. The Admin Panel controls the selected mode per
   responsive screen without changing the existing banner. */
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-banner-slide-replacement-image img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-banner-slide-replacement-video video{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-position:var(--c2d-offer-position,center)!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-banner-slide-replacement-image,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-banner-slide-replacement-video,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-special-offer-link{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video{
  object-fit:var(--c2d-offer-fit,contain)!important;
  object-position:var(--c2d-offer-position,center)!important;
}

/* Admin preview mirrors the public fit choices. */
.c2d-offer-preview-slide img,
.c2d-offer-preview-slide video{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;}
.c2d-special-offers-preview .c2d-offer-preview-stage{overflow:hidden!important;}
.c2d-offer-responsive-size-controls .form-group{min-width:190px;}

/* ================================================================
   C2D SAFE FINAL ENGLISH BANNER RESPONSIVE PATCH
   Scope: English normal banner only. No data/backend changes.
   ================================================================ */
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode){
  overflow:hidden!important;
}

/* Large laptop/desktop: keep the complete Computer 2 Day artwork visible.
   The previous cover/stretched rules could crop the logo wordmark. */
@media (min-width:1201px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    right:0!important;
    left:auto!important;
    top:0!important;
    bottom:0!important;
    width:48%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    clip-path:none!important;
  }
}

/* 1024px-class laptop/tablet: preserve the full logo and shift its visual
   centre a little toward the left so the C is never clipped at the right edge. */
@media (min-width:801px) and (max-width:1200px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    right:0!important;
    left:auto!important;
    width:46.5%!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:calc(50% - 3%) center!important;
    transform:none!important;
    clip-path:none!important;
  }
}

/* Phones: the complete banner is two stable rows — logo on top, slider below.
   The slider gets its own non-zero layout box, so it cannot disappear behind
   the logo or be clipped by the old side-by-side rules. */
@media (max-width:800px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode){
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    padding:0!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1024/683!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    clip-path:none!important;
    margin:auto!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    width:100%!important;
    height:clamp(230px,60vw,330px)!important;
    min-height:230px!important;
    max-height:330px!important;
    flex:0 0 auto!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    z-index:10!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-track{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:5px!important;
    transform:translateX(-50%)!important;
    z-index:70!important;
  }
}

@media (max-width:520px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    height:clamp(220px,63vw,285px)!important;
    min-height:220px!important;
    max-height:285px!important;
  }
}

@media (max-width:390px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    height:clamp(210px,64vw,265px)!important;
    min-height:210px!important;
    max-height:265px!important;
  }
}

/* ================================================================
   C2D FINAL SAFE STABILITY PATCH — 2026-09-18
   Scope: requested banner/logo/Special Offers polish + performance.
   Existing data/assets and Features Product slider are untouched.
   ================================================================ */

/* Logo panel itself must never draw an extra outline, shadow, or black side/top/bottom strip. */
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
  background:transparent!important;
}

/* At tablet/mobile widths the two banner halves become two stable rows.
   A fixed aspect-ratio on the 1024x683 logo artwork was creating a very tall
   logo block and the apparent blank space below it. Use viewport-proportional
   rows instead, while keeping the complete logo and slider responsive. */
@media (max-width:800px){
  #c2dPhoneBanner:not(.c2d-offers-mode){
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    padding:0!important;
    gap:0!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    width:100%!important;
    height:clamp(170px,30vw,260px)!important;
    min-height:170px!important;
    max-height:260px!important;
    aspect-ratio:auto!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:transparent!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    width:100%!important;
    height:clamp(190px,36vw,300px)!important;
    min-height:190px!important;
    max-height:300px!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:10!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-track{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:6px!important;
    transform:translateX(-50%)!important;
    direction:ltr!important;
    z-index:100!important;
  }
}
@media (max-width:520px){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    height:clamp(165px,31vw,205px)!important;
    min-height:165px!important;
    max-height:205px!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    height:clamp(190px,44vw,240px)!important;
    min-height:190px!important;
    max-height:240px!important;
  }
}
@media (max-width:390px){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    height:165px!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    height:190px!important;
  }
}

/* Special Offers: always occupy the full replacement stage, including true
   edge-to-edge/corner-to-corner fill. Keep dots/arrows inside the media box. */
#c2dPhoneBanner.c2d-offers-mode,
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-stage,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-track{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-dots{
  left:50%!important;
  right:auto!important;
  bottom:clamp(6px,1.2vw,14px)!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  direction:ltr!important;
  z-index:120!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrows{
  pointer-events:none!important;
  z-index:110!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow{
  pointer-events:auto!important;
}

/* Prevent the logo image from generating a paint flash when its theme asset changes. */
#c2dPhoneBanner .c2d-banner-fixed-logo img{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout paint;
}


/* ================================================================
   C2D V5 FINAL SAFE RESPONSIVE / OFFERS STABILITY PATCH
   Scoped to banner + Special Offers + touch-card details. Existing
   product/feature/brand/client content and assets are not replaced.
   ================================================================ */

/* Banner logo: no artificial outline/border/shadow/background strip. */
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo::before,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo::after,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
  background:transparent!important;
  border-radius:0!important;
  overflow:hidden!important;
}

/* Desktop / laptop: keep the logo panel independent and vertically complete. */
@media (min-width:801px){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    top:0!important;
    bottom:0!important;
    transform:none!important;
    height:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
  }
}
@media (min-width:1201px){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    right:0!important;
    left:auto!important;
    width:48%!important;
  }
}
@media (min-width:801px) and (max-width:1200px){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    right:0!important;
    left:auto!important;
    width:46.5%!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    object-position:calc(50% - 3%) center!important;
  }
}

/* 768 tablet + all phones: one deterministic two-row composition.
   Row 1 = complete logo; Row 2 = complete slider. No extra bottom strip. */
@media (max-width:800px){
  #c2dPhoneBanner:not(.c2d-offers-mode){
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    width:100%!important;
    height:clamp(180px,28vw,250px)!important;
    min-height:180px!important;
    max-height:250px!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    overflow:hidden!important;
    transform:none!important;
    background:transparent!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:fill!important;
    object-position:center!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-logo-halo{
    display:none!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    width:100%!important;
    height:clamp(220px,38vw,330px)!important;
    min-height:220px!important;
    max-height:330px!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:10!important;
    pointer-events:auto!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-track{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-slide{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    left:0!important;
    right:auto!important;
    top:50%!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    padding:clamp(12px,2.2vw,20px)!important;
    box-sizing:border-box!important;
    transform:translate3d(0,-50%,0)!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-dots{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:6px!important;
    transform:translateX(-50%)!important;
    z-index:100!important;
    direction:ltr!important;
  }
}
@media (max-width:520px){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    height:180px!important;
    min-height:180px!important;
    max-height:180px!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    height:clamp(220px,52vw,250px)!important;
    min-height:220px!important;
    max-height:250px!important;
  }
}
@media (max-width:390px){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    height:180px!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    height:220px!important;
  }
}

/* Special Offers: exact full-area stage with no side/top/bottom blank strip. */
#c2dPhoneBanner.c2d-offers-mode{
  position:relative!important;
  width:100%!important;
  height:clamp(360px,32vw,560px)!important;
  min-height:360px!important;
  max-height:560px!important;
  margin:0!important;
  padding:0!important;
  overflow:var(--c2d-offer-overflow,hidden)!important;
  box-sizing:border-box!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-stage,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport,
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-track{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:var(--c2d-offer-overflow,hidden)!important;
  box-sizing:border-box!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-card-viewport::after{
  display:none!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-banner-fixed-logo{
  display:none!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-banner-slide-replacement-image,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-banner-slide-replacement-video,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide .c2d-special-offer-link{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide img,
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  object-fit:var(--c2d-offer-fit,fill)!important;
  object-position:var(--c2d-offer-position,center)!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-phone-banner-dots{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:8px!important;
  transform:translateX(-50%)!important;
  z-index:120!important;
  direction:ltr!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrows{
  pointer-events:none!important;
  z-index:110!important;
}
#c2dPhoneBanner.c2d-offers-mode .c2d-offers-arrow{
  pointer-events:auto!important;
}
@media (max-width:800px){
  #c2dPhoneBanner.c2d-offers-mode{
    height:clamp(400px,70vw,560px)!important;
    min-height:400px!important;
    max-height:560px!important;
  }
}
@media (max-width:520px){
  #c2dPhoneBanner.c2d-offers-mode{
    height:clamp(300px,88vw,430px)!important;
    min-height:300px!important;
    max-height:430px!important;
  }
}

/* Touch-only product-card details: only the clicked card reveals its text.
   The revealed body is absolute so other cards never move or open. */
@media (hover:none),(pointer:coarse){
  .product-card[data-touch-mode="tap-details"] .c2d-product-details,
  .product-card[data-touch-mode="tap-then-open"] .c2d-product-details{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-4px)!important;
    z-index:90!important;
    margin:0!important;
    transition:opacity .16s ease,transform .16s ease,max-height .16s ease!important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open .c2d-product-details,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open .c2d-product-details{
    max-height:900px!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }
  .product-card[data-touch-mode="tap-details"].c2d-touch-details-open,
  .product-card[data-touch-mode="tap-then-open"].c2d-touch-details-open{
    z-index:200!important;
  }
}


/* Touch devices: exclusive detail reveal applies to every configured card mode. */
@media (hover:none),(pointer:coarse){
  .product-card[data-touch-mode] .c2d-product-details{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-4px)!important;
    z-index:90!important;
    margin:0!important;
  }
  .product-card[data-touch-mode].c2d-touch-details-open .c2d-product-details{
    max-height:900px!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }
  .product-card[data-touch-mode].c2d-touch-details-open{
    z-index:200!important;
  }
}

/* Offer title is an overlay, so hiding it never reserves an empty text row. */
#c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-title{
  position:absolute!important;
  left:50%!important;
  bottom:28px!important;
  transform:translateX(-50%)!important;
  z-index:30!important;
  max-width:calc(100% - 32px)!important;
  margin:0!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  pointer-events:none!important;
}


/* Keep requested sliders visually smooth even when global no-blink performance
   mode is enabled; this does not alter slider data or product content. */
html.c2d-no-blink #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
  transition:transform .46s cubic-bezier(.22,.72,.18,1),opacity .28s ease,visibility 0s linear 0s!important;
}
html.c2d-no-blink #c2dPhoneBanner.c2d-offers-mode .c2d-special-offer-public-slide{
  transition:opacity .38s ease,visibility 0s linear 0s!important;
}


/* ================================================================
   C2D V5 USER-REQUESTED FINAL SAFE PATCH — 2026-09-19
   Source: only the supplied Safe ZIP. Frontend-only; no data/backend
   records are changed. Scope is limited to the requested banner fit and
   smoothness safeguards.

   1) Urdu: ONLY CSS viewport widths 1024px and 1440px receive the requested
      top/bottom logo coverage. Other Urdu viewport widths are intentionally
      left to the existing rules.
   2) English: the normal banner logo fills its complete allocated panel at
      every responsive width while the slider remains in its own non-overlap
      panel/row.
   3) Motion: banner transitions use compositor-friendly transform/opacity;
      decorative paint effects are disabled on the banner only to avoid
      flicker/jank. No slider data or existing settings are modified.
   ================================================================ */

/* Urdu — requested exact laptop/desktop sizes only. */
@media (width: 1024px), (width: 1440px){
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:clamp(320px,31vw,420px)!important;
    min-height:320px!important;
    max-height:420px!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    right:auto!important;
    width:53.5%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:10!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    right:0!important;
    left:auto!important;
    width:46.5%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    transform:none!important;
    z-index:30!important;
    background:var(--c2d-logo-background,#06131f)!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-logo-halo{
    display:none!important;
  }
  body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    left:0!important;
    right:auto!important;
    width:calc(100% - 8px)!important;
    max-width:100%!important;
    height:calc(100% - 14px)!important;
    box-sizing:border-box!important;
  }
}

/* English — all normal-banner viewport sizes. The logo owns its panel and
   the slider owns a separate panel, so their boxes can never merge. */
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode){
  isolation:isolate!important;
  overflow:hidden!important;
}
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
  isolation:isolate!important;
  overflow:hidden!important;
}
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  background:var(--c2d-logo-background,#06131f)!important;
  z-index:30!important;
}
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-logo-halo{
  display:none!important;
}

/* English desktop/tablet: two independent horizontal panels. */
@media (min-width:801px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:clamp(320px,31vw,420px)!important;
    min-height:320px!important;
    max-height:420px!important;
    overflow:hidden!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    right:auto!important;
    width:53.5%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:10!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    right:0!important;
    left:auto!important;
    width:46.5%!important;
    height:100%!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    transform:none!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    left:0!important;
    right:auto!important;
    top:50%!important;
    width:calc(100% - 8px)!important;
    max-width:100%!important;
    height:calc(100% - 14px)!important;
    box-sizing:border-box!important;
  }
}

/* English phones: same deterministic non-overlap composition already used by
   the safe responsive system — logo row first, slider row second. */
@media (max-width:800px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-phone-banner-stage{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    gap:0!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
    position:relative!important;
    inset:auto!important;
    order:0!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:clamp(180px,28vw,250px)!important;
    min-height:180px!important;
    max-height:250px!important;
    transform:none!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-viewport{
    position:relative!important;
    inset:auto!important;
    order:1!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:clamp(220px,52vw,330px)!important;
    min-height:220px!important;
    max-height:330px!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    z-index:10!important;
  }
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:50%!important;
    width:100%!important;
    height:calc(100% - 8px)!important;
    min-height:0!important;
    max-height:none!important;
    box-sizing:border-box!important;
    transform:translate3d(0,-50%,0)!important;
  }
}

/* Smoothness: keep the banner's actual slide animation compositor-friendly.
   Avoid blur/sheens/expensive paint while retaining the slide transition. */
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:transform,opacity!important;
  filter:none!important;
}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card-sheen{
  display:none!important;
  animation:none!important;
}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img{
  will-change:auto!important;
  contain:layout paint!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

@media (prefers-reduced-motion: no-preference){
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card.is-current{
    transition:transform .52s cubic-bezier(.22,.72,.18,1),opacity .28s ease!important;
  }
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card.is-out-right,
  #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-card.is-out-left{
    transition:transform .58s cubic-bezier(.22,.72,.18,1),opacity .30s ease!important;
  }
}

/* ================================================================
   C2D — USER REQUESTED FOLLOW-UP: 768px + 425/375 SAFE FIX
   Source remains the supplied Safe ZIP. CSS-only; no data/backend changes.

   1) EN 768px: keep the complete logo visible (the square logo must not be
      cropped by object-fit:cover) and keep the hero order identical to the
      existing Urdu tablet composition: Karachi trusted content first, then
      Same Day Repair visual.
   2) EN 425px / 375px: preserve the complete Computer 2 Day wordmark and
      all four edges of the logo panel without overlap or external blank
      strips. Do not alter the Urdu layout or other viewport-specific rules.
   3) Motion: only compositor-safe properties are used here; no JS/data
      mutation and no new continuous animation is introduced.
   ================================================================ */

/* English tablet: show the entire supplied banner-logo artwork instead of
   cropping its lower wordmark. The image itself fills the allocated panel,
   so there is no artificial black/blank gutter around it. */
@media (min-width:761px) and (max-width:800px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    object-fit:fill!important;
    object-position:center center!important;
  }

  /* Match the established Urdu tablet flow exactly: trusted-shop content
     comes before the Same Day Repair visual, rather than sitting beside it. */
  body:not(.lang-ur) .hero-grid{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  body:not(.lang-ur) .hero-content{
    order:1!important;
    width:100%!important;
    min-width:0!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  body:not(.lang-ur) .hero-visual{
    order:2!important;
    width:100%!important;
    min-width:0!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
}

/* English mobile: the same complete-logo rule is intentionally limited to
   the requested small-phone range so other Urdu/desktop breakpoints remain
   untouched. */
@media (min-width:421px) and (max-width:520px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    object-fit:fill!important;
    object-position:center center!important;
  }
}

@media (max-width:420px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    object-fit:fill!important;
    object-position:center center!important;
  }
}

/* 375px is explicitly covered by the <=420px rule above. Keep the logo
   panel and image edge-aligned so no layout gap can appear from image sizing. */
@media (width:375px), (width:425px), (width:768px){
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
  body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-sizing:border-box!important;
  }
}

/* ================================================================
   ADMIN-TOPBAR SAFE FIXES — 768 social row + address hide
   Does not alter products, banner, offers, or other website sections.
   ================================================================ */

/* Hidden via Admin: always wins over mobile display:!important rules */
.c2d-topbar-item-hidden,
.c2d-topbar-item-hidden .addr-link,
.c2d-topbar-item-hidden .js-shop-address,
.topbar-address-item.c2d-topbar-item-hidden,
.topbar-phones-item.c2d-topbar-item-hidden,
.topbar-email-item.c2d-topbar-item-hidden,
.topbar-social-item.c2d-topbar-item-hidden,
.topbar-theme-item.c2d-topbar-item-hidden,
.topbar-clock-item.c2d-topbar-item-hidden{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}
#siteTopbar.c2d-topbar-hidden{
  display: none !important;
}

/* Tablet ~768 only: social icons + language on ONE row, opposite sides */
@media (min-width: 641px) and (max-width: 900px){
  .topbar-row-2{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .topbar-row-2 .topbar-center,
  .topbar-row-2 .topbar-social-item{
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 50% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    order: 1 !important;
  }
  .topbar-row-2 .topbar-right{
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 50% !important;
    margin: 0 0 0 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    order: 2 !important;
  }
  .topbar-row-2 .social-mini{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body.lang-ur .topbar-row-2{
    flex-direction: row !important;
  }
  /* Physical LTR row so icons stay left and lang right in both languages */
  .topbar-row-2{
    direction: ltr !important;
  }
  .topbar-row-2 .lang-switch{
    direction: ltr !important;
  }
}

/* Soften older forced address visibility when admin hides it */
@media (max-width: 640px){
  .topbar-address-item.c2d-topbar-item-hidden,
  .topbar-address-item.c2d-topbar-item-hidden .addr-link,
  .topbar-address-item.c2d-topbar-item-hidden .js-shop-address{
    display: none !important;
    visibility: hidden !important;
  }
}

/* ================================================================
   HERO BADGE 425 + CAPTION CENTER + BANNER PARITY (safe, additive)
   Point 1: Only ~425px — Same Day Repair badge mirrors Home Delivery
   Point 2: Caption centered L-R under illustration, all sizes, EN+UR
   Points 3–4: EN/UR banner logo + slider structural parity (no data change)
   ================================================================ */

/* Caption: true horizontal center under icon, both languages, all sizes.
   Do not shift vertical design except keep clearance from float badges. */
.hero-visual .hero-card > p,
.hero-card > p,
.hero-card p[data-en*="Certified"],
.hero-card p[data-ur]{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  text-align-last: center !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  transform: none !important;
  direction: inherit !important;
}
body.lang-ur .hero-visual .hero-card > p,
body.lang-ur .hero-card > p{
  text-align: center !important;
  text-align-last: center !important;
  direction: rtl !important;
}

/* Mobile L-425px ONLY: Same Day Repair (chip-1) = same fit as Home Delivery (chip-2) */
@media (min-width: 400px) and (max-width: 450px){
  .hero-visual .hero-card{
    position: relative !important;
    overflow: visible !important;
  }
  /* Shared chip size so top-right matches bottom-left badge scale */
  .hero-visual .hero-card .float-chip.chip-1,
  .hero-visual .hero-card .float-chip.chip-2{
    padding: 8px 12px 8px 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    gap: 7px !important;
    width: max-content !important;
    max-width: calc(100% - 16px) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.lang-ur .hero-visual .hero-card .float-chip.chip-1,
  body.lang-ur .hero-visual .hero-card .float-chip.chip-2{
    padding: 8px 8px 8px 12px !important;
  }
  .hero-visual .hero-card .float-chip .chip-ic{
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }
  /* Physical corners: Same Day = top-right; Home Delivery = bottom-left
     Same offset distance from card edges as the green Home Delivery badge. */
  .hero-visual .hero-card .chip-1,
  .hero-visual .hero-card #sameDayRepairBadge{
    top: -10px !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    transform: none !important;
  }
  .hero-visual .hero-card .chip-2{
    bottom: -10px !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    transform: none !important;
  }
  /* Caption stays centered; enough bottom margin so Home Delivery does not cover it */
  .hero-visual .hero-card > p,
  .hero-card > p{
    text-align: center !important;
    margin-bottom: 44px !important;
  }
}

/* Narrower phones still keep caption centered (no chip-1 restyle outside 400–450) */
@media (max-width: 399px){
  .hero-visual .hero-card > p,
  .hero-card > p{
    text-align: center !important;
    margin-bottom: 42px !important;
  }
}

/* EN + UR banner logo / slider: same structural full-panel fit, no redesign */
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo,
body.lang-ur #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo,
body:not(.lang-ur) #c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo img,
#c2dPhoneBanner:not(.c2d-offers-mode) .c2d-banner-fixed-logo .js-banner-image{
  border: 0 !important;
  outline: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}
#c2dPhoneBanner .c2d-banner-slide.is-current{
  opacity: 1 !important;
  visibility: visible !important;
}