/* ===================================================
   KAHRAMAN — base tokens
   =================================================== */
:root{
  --blue:        #1462ff;
  --blue-dark:   #0d3fb0;
  --blue-tint:   #e6edff;
  --orange:      #ff7a1a;
  --orange-dark: #e8690c;
  --ink:         #14213d;
  --ink-soft:    #4a5670;
  --line:        #e7ebf3;
  --bg:          #f4f7fd;
  --white:       #ffffff;
  --gold:        #c9a84c;
  --danger:      #d64545;
  --success:     #16a34a;
  --panel:       #ffffff;
  --brand:       #1462ff;
  --brand-dark:  #0d3fb0;
  --muted:       #4a5670;
  --navy-dark:   #060b1a;
  --navy:        #0d1730;
  --footer-teal:      #2f66d6;
  --footer-teal-dark: #2a5cc4;
  --footer-accent:    #7fe6da;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --shadow:      0 8px 24px rgba(20, 33, 61, .08);
  --shadow-sm:   0 2px 8px rgba(20, 33, 61, .06);
  --maxw:        1280px;
  font-size: 16px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 255, 0.22), transparent 45%),
    radial-gradient(circle at 92% 55%, rgb(255, 255, 255), transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #ffffff 80%);
  background-attachment: fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; -webkit-touch-callout:default; }
button{
  font:inherit; cursor:pointer; border:none; background:none; color:inherit;
  -webkit-appearance:none; appearance:none; border-radius:0;
}
input, textarea, select{
  font:inherit; -webkit-appearance:none; appearance:none; border-radius:0;
}
/* select loses its native OS arrow once appearance is reset above (this is
   what made dropdowns look different on iOS vs Android) — draw one manually
   so every browser shows the same arrow in the same place */
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234a5670' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:left 14px center;
  background-size:12px 8px;
  padding-inline-start:34px;
}
/* Remove iOS Safari's native search field chrome (rounded box, shadow, extra padding)
   so the search input looks identical to the Android/Chrome version */
input[type="search"]{
  -webkit-appearance:none; appearance:none;
  border-radius:inherit;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none; appearance:none;
}
/* iOS zooms the whole page when a focused input's font-size is under 16px.
   Force 16px on small screens so tapping the search box behaves the same
   as it does on Android, then let the input's own line-height keep it compact. */
@media (max-width: 768px){
  input, textarea, select{ font-size:16px; }
}
ul{ list-style:none; margin:0; padding:0; }

.desktop-only{ display:block; }
.mobile-only{ display:none; }

section{ width:100%; max-width:100%; margin:0 auto; padding:36px 24px; }

/* ===================================================
   TOP STRIP
   =================================================== */
.top-strip{
  background:linear-gradient(90deg,#050b1a 0%,#0a1440 60%,#060b1a 100%);
  color:#d6e6ff; font-size:13px;
}
.top-strip-inner{
  max-width:var(--maxw); margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.top-strip-left{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.top-strip-left a{ opacity:.9; transition:opacity .15s; }
.top-strip-left a:hover{ opacity:1; text-decoration:underline; }
.strip-sep{ opacity:.4; }

/* ===================================================
   HEADER
   =================================================== */
.site-header{ background:var(--white); position:sticky; top:0; z-index:40; box-shadow:var(--shadow-sm); }
/* Ensure the main header container lets children flex and fill correctly */
.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Keeps actions on the far left */
  gap: 0;                          /* Remove global layout gaps */
  padding: 15px 0;
  width: 100%;
}
/* 3. Pull the search wrapper next to the brand without a gap */
.header-search-wrapper.desktop-only {
  width: 700px;
  max-width: 100%;
  margin-inline-start: 20px;   /* Removes any auto-spacing or layout margins */
  margin-inline-end: auto;  /* Pushes the remaining elements (.header-left-group) to the left side */
}

/* Force the search form wrapper to stretch out in the center */
.header-search-form.desktop-only {
  gap: 0 !important;
  display: flex !important; /* Forces it to stay flex layout */
  flex: 1;                  /* Allows it to grab all available middle space */
  max-width: 350px;         /* Control your absolute maximum desired width here */
  width: 100%;              /* Ensures it scales down nicely on smaller screens */
  position: relative;
}

/* Ensure the input field inside fills 100% of the form container */
.header-search-form input[type="search"] {
  width: 100%;
  padding: 12px 20px;
  padding-left: 50px;       /* Extra room so text doesn't overlap the search icon */
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}


.brand {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.brand-logo{
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform .2s ease;
}
.brand:hover .brand-logo{ transform: scale(1.03); }
.brand-word{ font-size:1.6rem; font-weight:900; letter-spacing:.5px; color:var(--blue-dark); font-family:Arial, sans-serif; }

.header-search-wrapper{ width:450px; max-width:100%; }
.search-box{
  display:flex; align-items:center; gap:8px;
  background:var(--bg); border:1.5px solid var(--line); border-radius:999px;
  padding:4px 6px 4px 18px; transition:border-color .15s;
}
.search-box:focus-within{ border-color:var(--blue); }
.search-box input{
  flex:1; border:none; background:none; outline:none; padding:10px 4px;
  color:var(--ink); font-size:14px;
}
.search-box input::placeholder{ color:#9aa4b8; }
/* Prevent iOS Safari from zooming the page when this input gets focus
   (Chrome/Android never zooms, so without this iPhone visitors saw a
   different, zoomed-in layout the moment they tapped the search box) */
@media (max-width: 768px){
  .search-box input{ font-size:16px; }
}
.search-btn{
  background:var(--blue); color:#fff; border-radius:999px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .15s;
}
.search-btn:hover{ background:var(--blue-dark); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-icon-btn{
  position:relative; width:42px; height:42px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:background .15s;
}
.header-icon-btn:hover{ background:var(--bg); }
.header-icon-btn .badge-count{
  position:absolute; top:0; right:0; background:var(--orange); color:#fff;
  font-size:10px; min-width:16px; height:16px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.cart-button{
  display:flex; align-items:center; gap:8px; background:var(--blue); color:#fff;
  padding:9px 16px; border-radius:999px; font-weight:700; font-size:14px;
  transition:background .15s;
}
.cart-button:hover{ background:var(--blue-dark); }
.cart-button strong{
  background:rgba(255,255,255,.22); border-radius:999px; min-width:20px; height:20px;
  display:flex; align-items:center; justify-content:center; font-size:12px; padding:0 5px;
}

.mobile-search-row{ display:none; padding:0 16px 12px; }
.mobile-search-row.open{ display:block; }

/* ---- category nav row ---- */
.main-nav{
  max-width:100%; margin:0; padding:14px 24px;
  display:flex; align-items:center; gap:22px; font-size:14.5px; font-weight:600;
  background:var(--navy); border-top:none;
}
.main-nav a{ color:#c7d0e0; white-space:nowrap; transition:color .15s; }
.main-nav a:hover{ color:#fff; }
.all-categories-btn{
  display:flex; align-items:center; gap:8px; background:var(--blue); color:#fff !important;
  padding:9px 16px; border-radius:999px; font-weight:700;
}
.all-categories-btn:hover{ background:var(--blue-dark); }
.nav-highlight{ color:#ff9d4d !important; }

/* ===================================================
   HERO
   =================================================== */
.hero-section{
  display:grid; grid-template-columns: 1fr; gap:20px;
  padding-top:20px; padding-bottom:0;
}
.hero-banner{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  min-height:360px; display:flex; align-items:center;
  padding:0 40px;
}

/* --- New green banner variant --- */
.hero-banner-new{
  position:relative; overflow:hidden; border-radius:16px;
  width:100%; height:340px;
  display:block; padding:0; margin:0;
  background:transparent;
}

.hero-banner-new img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block;
}

/* Banner slider: two slides, fixed rectangle, translate transition */
.banner-slider{ width:100%; height:100%; position:relative; overflow:hidden; display:block; direction:ltr; }
.banner-slider .slides{ display:flex; width:200%; height:100%; transition:transform .8s ease-in-out; direction:ltr; }
.banner-slider .slide{ width:50%; height:100%; flex-shrink:0; background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#ffffff; display:block; }

.hero-banner-new h1,
.hero-banner-new h2,
.hero-banner-new h3,
.hero-banner-new p,
.hero-banner-new .hero-cta,
.hero-banner-new .hero-banner-text,
.hero-banner-new .hero-logo-mark,
.hero-banner-new .hero-banner-icons,
.hero-banner-new .hero-dots,
.hero-banner-new .hero-arrow{
  display:none !important;
}

/* --- iPhone promo variant --- */
.hero-banner-iphone{
  position:relative;
  padding:34px 40px 0;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
}
.hero-banner-iphone::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(135deg,#0b5be6 0%,#2e82ff 36%,#4aa7ff 62%,#0b4fbc 100%);
  pointer-events:none;
}
.hero-banner-iphone .hero-banner-visual{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:flex-end; justify-content:center; z-index:1;
  mask-image:none;
  overflow:hidden;
}
.hero-banner-iphone .hero-banner-visual img{ 
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-banner-iphone .hero-banner-visual svg{ width:100%; height:100%; }
.hero-banner-iphone .hero-banner-visual::before{
  content:'الأكثر مبيعًا';
  position:absolute; top:18px; inset-inline-end:18px;
  background:rgba(255,255,255,.95); color:#10213d;
  padding:8px 12px; border-radius:999px; font-size:12px; font-weight:700;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  z-index:2;
}

.hero-banner-iphone .hero-banner-text{
  position:relative; z-index:2; color:#fff; width:100%;
  display:flex; flex-direction:column; align-items:flex-end; text-align:center;
  margin-inline-start:auto; padding-top:6px;
}
.hero-logo-mark{
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.20);
  display:flex; align-items:center; justify-content:center; color:#10213d; margin-bottom:6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.hero-wordmark{ font-size:2.4rem; font-weight:900; letter-spacing:1px; }
.hero-wordmark-underline{
  display:block; width:70px; height:3px; margin:10px 0 18px; border-radius:3px;
  background:linear-gradient(90deg, transparent, #3fa9ff, transparent);
}
.hero-banner-iphone .hero-banner-text h1{
  font-size:1.55rem; line-height:1.5; margin:0 0 22px; font-weight:800; max-width:440px;
}
.hero-banner-iphone .hero-banner-text h1 .highlight{ color:#3fa9ff; }

.hero-eyebrow{
  display:inline-block; background:rgba(255,255,255,.14); color:#cfe3ff;
  padding:5px 14px; border-radius:999px; font-size:12px; font-weight:700; margin-bottom:14px;
  letter-spacing:.5px;
}
.hero-cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--orange); color:#fff;
  padding:13px 26px; border-radius:999px; font-weight:800; font-size:15px;
  box-shadow:0 10px 24px rgba(255,122,26,.35); transition:background .15s, transform .15s;
}
.hero-cta:hover{ background:var(--orange-dark); transform:translateY(-1px); }
.hero-banner-iphone .hero-cta{
  background:#22a24c; box-shadow:0 10px 24px rgba(34,162,76,.35);
}
.hero-banner-iphone .hero-cta:hover{ background:#1c8a3f; }

.hero-badges{ display:flex; gap:18px; flex-wrap:wrap; margin-top:26px; }
.hero-badges span{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:#bcd4ff; }

/* bottom feature strip inside the banner */
.hero-banner-icons{
  position:relative; z-index:2; width:100%; margin-top:26px;
  display:flex; align-items:center; justify-content:center; gap:0;
  border-top:1px solid rgba(255,255,255,.12);
  padding:16px 0; flex-wrap:wrap;
}
.hero-banner-icons span{
  display:flex; align-items:center; gap:7px; color:#bcd4ff; font-size:12.5px;
  padding:0 22px; position:relative;
}
.hero-banner-icons span:not(:last-child)::after{
  content:""; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:rgba(255,255,255,.16);
}
.hero-banner-icons svg{ color:#3fa9ff; flex-shrink:0; }

/* carousel arrows */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.hero-arrow:hover{ background:rgba(255,255,255,.26); }
.hero-arrow-prev{ inset-inline-start:16px; }
.hero-arrow-next{ inset-inline-end:16px; }

/* dots */
.hero-dots{
  position:relative; z-index:2; display:flex; justify-content:center; gap:7px;
  padding:14px 0 4px;
}
.hero-dots .dot{ width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.28); }
.hero-dots .dot.active{ background:#fff; width:20px; border-radius:999px; }

.hero-side-card{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:28px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.hero-side-icon{
  width:52px; height:52px; border-radius:999px; background:var(--blue-tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.hero-side-card h3{ margin:0; font-size:17px; }
.hero-side-card p{ margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.7; }
.hero-side-actions{ display:flex; gap:10px; margin-top:12px; width:100%; }
.button-pill{
  flex:1; text-align:center; padding:11px 10px; border-radius:999px; font-weight:700; font-size:13.5px;
  transition:opacity .15s;
}
.button-pill.whatsapp{ background:#25d366; color:#fff; }
.button-pill.outline{ background:var(--bg); color:var(--ink); border:1.5px solid var(--line); }
.button-pill:hover{ opacity:.88; }

/* ===================================================
   FLOATING WHATSAPP BUTTON (mobile only)
   =================================================== */
.whatsapp-float{
  position:fixed; bottom:calc(20px + env(safe-area-inset-bottom)); left:16px; width:54px; height:54px;
  background:#25d366; color:#fff; border-radius:50%;
  align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  z-index:999;
}
.whatsapp-float svg{ width:28px; height:28px; }
.whatsapp-float:hover{ opacity:.92; }

/* ===================================================
   PROMO STRIP
   =================================================== */
.promo-strip{
  max-width:100%; margin:0; padding:12px 24px;
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  background:#ffffff; border:none; border-radius:0;
  font-size:13.5px; color:var(--ink-soft);
}
.promo-strip strong{ color:var(--orange-dark); }
.promo-code{ background:#fff; border:1px dashed var(--orange); padding:2px 8px; border-radius:6px; }
.promo-sep{ opacity:.4; }

/* ===================================================
   FEATURE STRIP
   =================================================== */
.feature-strip{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#ffffff; border-radius:18px; box-shadow:0 14px 40px rgba(20,33,61,0.07);
  margin:18px auto 34px; padding:18px 20px; max-width:1120px;
}
.feature-item{ display:flex; align-items:center; gap:12px; flex:1; min-width:170px; padding:12px 8px; }
.feature-item svg{ color:var(--blue); flex-shrink:0; width:28px; height:28px; }
.feature-item div{ display:flex; flex-direction:column; }
.feature-item strong{ font-size:15px; color:var(--ink); }
.feature-item span{ font-size:13px; color:var(--ink-soft); }

/* subtle divider line inside the card for larger screens */
.feature-strip::before{
  content:''; position:absolute; pointer-events:none; z-index:0;
}

/* ===================================================
   SECTION HEADINGS
   =================================================== */
.section-heading{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; direction:rtl; }
.section-heading h2{
  font-size:1.35rem; margin:0; display:flex; align-items:center; gap:8px; color:#eef3ff;
  position:relative; padding-bottom:10px;
}
.section-heading h2::after{
  content:''; position:absolute; bottom:0; inset-inline-start:0; width:46px; height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--blue) 0%, #3fa9ff 60%, transparent 100%);
  box-shadow:0 0 10px rgba(20,98,255,.6);
}
.section-heading .star{ font-size:1rem; color:var(--gold); }
.product-slider-section .section-heading .star{ color:inherit; font-size:1.5rem; }
.product-slider-section .section-heading h2{ color:var(--footer-teal); }
.all-products-section .section-heading h2{ color:var(--footer-teal); }
.slider-arrows{ display:flex; gap:8px; }
.slider-arrows button{
  width:36px; height:36px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--white); font-size:18px; display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s;
}
.slider-arrows button:hover{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }

/* ===================================================
   PRODUCT SLIDER + GRID + CARDS
   =================================================== */
.product-slider-section{ padding-top:8px; background-color: transparent; }
.product-slider{ overflow:hidden; }
.product-slider-track{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  padding-bottom:6px;
}
.product-slider-track .product-card{ min-width:auto; max-width:none; }

.product-slider-section .slider-arrows{ display:none; }

.all-products-section{ padding-top:8px; }
.filter-chips{ display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; direction:rtl; }
.chip{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--white);
  font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:all .15s;
}
.chip:hover{ border-color:var(--blue); color:var(--blue); }
.chip.active{ background:var(--blue); border-color:var(--blue); color:#fff; }

.product-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.product-grid .empty{ grid-column:1/-1; text-align:center; color:var(--ink-soft); padding:40px 0; }

.product-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line); transition:box-shadow .18s, transform .18s;
  display:flex; flex-direction:column;
}
.product-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.product-image{ position:relative; aspect-ratio:1/1; background:var(--bg); overflow:hidden; }
.product-image img{ width:100%; height:100%; object-fit:cover; }
.product-image .badge{
  position:absolute; top:10px; inset-inline-start:10px; background:var(--orange); color:#fff;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
}
.product-image .badge.soldout{ background:var(--danger); }
.product-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-title-link{ flex:1; }
.product-title{
  margin:0; font-size:14px; font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-footer{ display:flex; align-items:center; justify-content:space-between; }
.price{ font-weight:800; color:var(--blue-dark); font-size:15.5px; }

/* Card layout used for category/subcategory product lists */
.new-card-style{
  padding:0;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .18s, transform .18s;
}
.new-card-style:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }

.card-header-blue{
  background:var(--blue);
  color:#fff;
  padding:6px 14px;
  display:flex;
  justify-content:space-between;
  font-weight:700;
  font-size:13px;
}

.new-card-style .product-image{
  position:relative;
  aspect-ratio:1/1;
  background:#fff;
  padding:10px;
}

.new-card-style .product-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.badge-off{
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  background:#ea580c;
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:4px 8px;
  border-radius:6px;
}

.new-card-style .product-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
}

.new-card-style .product-title{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  text-align:right;
  line-height:1.4;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card-price-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:4px;
}

.card-price-row .old-price{
  text-decoration:line-through;
  color:#aab5cf;
  font-size:12px;
}

.card-price-row .price{
  color:var(--blue);
  font-size:18px;
  font-weight:800;
}

.card-add-btn{
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  margin-top:8px;
  transition:background .15s;
}

.card-add-btn:hover{ background:var(--blue-dark); }

.badge-soldout{ background:#6b7280; }

.new-card-style.is-sold-out .product-image img{ opacity:.45; filter:grayscale(60%); }

.card-add-btn:disabled{
  background:#c7ccd6;
  color:#6b7280;
  cursor:not-allowed;
}
.card-add-btn:disabled:hover{ background:#c7ccd6; }

/* Category / subcategory product grids */
.subcat-grid,
[data-cat-products],
[data-subcat-products]{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

.subcat-grid > .product-card,
[data-cat-products] > .product-card,
[data-subcat-products] > .product-card,
.subcat-grid > .subcat-card,
[data-cat-products] > .subcat-card,
[data-subcat-products] > .subcat-card{
  height:100%;
}

.subcat-grid .product-card.new-card-style,
[data-cat-products] .product-card.new-card-style,
[data-subcat-products] .product-card.new-card-style{
  height:100%;
}

.subcat-empty,
.cat-empty{
  grid-column:1 / -1;
  text-align:center;
  color:var(--ink-soft);
  padding:44px 0;
}

@media (max-width: 1200px){
  .subcat-grid,
  [data-cat-products],
  [data-subcat-products]{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px){
  .subcat-grid,
  [data-cat-products],
  [data-subcat-products]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px){
  .subcat-grid,
  [data-cat-products],
  [data-subcat-products]{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
}

@media (max-width: 480px){
  .subcat-grid,
  [data-cat-products],
  [data-subcat-products]{ grid-template-columns:1fr; }
}

/* ===================================================
   CATEGORY SECTION - HORIZONTAL SCROLL ROW
   =================================================== */
.category-section h2 { 
  font-size: 1.35rem; 
  margin: 0 0 20px; 
  color: #eef3ff;
}

.category-section .category-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.category-section .category-grid::-webkit-scrollbar {
  height: 6px;
}
.category-section .category-grid::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}
.category-section .category-grid::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.category-card {
  margin: 10px 30px;
  flex: 0 0 auto;
  min-width: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
  text-decoration: none;
  color: var(--ink);
}

.category-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
  border-color: var(--blue);
}

.category-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-card span:last-child {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

/* Responsive: smaller cards on mobile */
@media (max-width: 700px) {
  .category-card {
    min-width: 90px;
    padding: 14px 10px;
  }
  .category-icon {
    width: 40px;
    height: 40px;
  }
  .category-card span:last-child {
    font-size: 11px;
  }
}
/* ===================================================
   TESTIMONIALS
   =================================================== */
.testimonials-section > h2{ font-size:1.6rem; margin:0 0 16px; color:#eef3ff; }
.rating-summary{ display:flex; align-items:center; gap:10px; }
.rating-badge{ background:var(--blue); color:#fff; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700; }
.stars{ color:var(--gold); letter-spacing:2px; }
.count-badge{ background:var(--bg); border:1px solid var(--line); padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }

.testimonial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.testimonial-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px; display:flex; flex-direction:column; gap:12px;
}
.testimonial-head{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:42px; height:42px; border-radius:999px; background:var(--blue-tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
}
.testimonial-card h4{ margin:0; font-size:14.5px; }
.testimonial-card p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.8; }

/* ===================================================
   SHOP BY BRAND
   =================================================== */
.brand-section h2{ font-size:1.35rem; margin:0 0 20px; text-align:center; color:#eef3ff; }
.brand-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:16px;
}
.brand-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 10px; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-weight:700; font-size:13px; color:var(--ink-soft); transition:box-shadow .18s, transform .18s, color .15s;
}
.brand-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); color:var(--blue); }
.brand-card span{
  width:44px; height:44px; border-radius:999px; background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800;
}

/* ===================================================
   ABOUT
   =================================================== */
.about-section{
  display:flex; align-items:center; justify-content:center; gap:36px; background:var(--white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.trust-logo{ width:110px; height:auto; flex-shrink:0; }
.about-text{ max-width:760px; }
.about-text.centered{ text-align:center; margin:0 auto; }
.about-text h2{ margin:0 0 6px; font-size:1.7rem; }
.about-text h2 span{ color:var(--blue); }
.about-lead{ color:var(--orange-dark); font-weight:700; margin:0 0 12px; }
.about-text p:not(.about-lead){ color:var(--ink-soft); line-height:1.9; font-size:14.5px; }
.about-text.centered p:not(.about-lead){ margin-inline:auto; }

/* newsletter styles removed (section deleted) */

/* ===================================================
   FOOTER
   =================================================== */
.site-footer{ background:var(--footer-teal); color:#ffffff; margin-top:20px; }
.footer-columns{
  max-width:var(--maxw); margin:0 auto; padding:48px 24px 0;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px;
  justify-items:right;
  justify-content:right;
}
.footer-col{
  text-align:right;
  justify-self:right;
}
.footer-col h4{
  color:#ffffff;
  font-size:16px;
  font-weight:800;
  margin:0 0 14px;
  position:relative;
}
.footer-col a{ display:block; margin-bottom:10px; font-size:13.5px; color:#ffffff; transition:opacity .15s; }
.footer-col a:hover{ opacity:.8; }
.footer-col p{ font-size:13.5px; margin:0 0 12px; color:#ffffff; line-height:1.8; }
.footer-contact .contact-line{ display:flex; align-items:center; gap:10px; }
.contact-icon{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.18); color:#ffffff; font-size:15px; flex-shrink:0; }
.footer-badges{
  max-width:var(--maxw); margin:0 auto; padding:24px 24px 0;
  display:flex; flex-wrap:wrap; justify-content:right; gap:12px;
}
.footer-badge{
  width:72px; height:72px; flex:0 0 auto;
  background:rgba(255,255,255,.92); border-radius:14px; padding:10px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.12); overflow:hidden;
}
.footer-badge img{ display:block; width:100%; height:100%; object-fit:contain; }
.footer-badge-qr{ padding:6px; }
.footer-badge-qr img{ border-radius:8px; }

.footer-bottom{
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:#ffffff; border-top:1px solid rgba(255,255,255,.18);
}
.footer-bottom-links{ display:flex; gap:16px; }
.footer-bottom-links a{ color:#ffffff; }
.footer-bottom-links a:hover{ opacity:.8; }

/* Footer "روابط مهمة" link rows with chevron */
.footer-link-row{
  text-align:left;
  justify-self:start;
  display:flex; flex-direction:row; align-items:left; justify-content:flex-start; gap:10px;  margin-bottom:14px; padding:12px 16px; font-size:14px; color:#ffffff;

  transition:background .15s, opacity .15s;
}
.footer-link-row:hover{ opacity:.85; background:rgba(255,255,255,.08); }
.footer-link-row .chev{ color:var(--footer-accent); font-size:16px; line-height:1; flex:0 0 auto; }
.footer-link-row .label{ display:inline-flex; align-items:center; gap:8px; }

/* Contact icons (phone + email) */
.contact-icon{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.18); color:#ffffff; font-size:16px; flex-shrink:0;
}
.contact-icon-phone{ background:rgba(255,255,255,.18); color:#ffffff; }
.footer-contact .contact-line{
  display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:14px;
  color:#ffffff; padding:0;
}
.footer-contact .contact-line a{ color:#ffffff; text-decoration:none; }

/* Payment methods + copyright strip (bottom of footer) */
.footer-pay-strip{ background:var(--footer-teal-dark); border-top:1px solid rgba(255,255,255,.18); }
.footer-pay-strip-inner{ max-width:var(--maxw); margin:0 auto; padding:32px 24px 30px; }

/* Payment badge row (mada / VISA / Mastercard) */
.footer-payment-row{
  max-width:var(--maxw); margin:0 auto; padding:22px 24px;
  display:flex; justify-content:center; gap:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.pay-pill{
  display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:8px; height:38px; padding:0 16px;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.pay-mada-bars{ display:flex; gap:2px; align-items:flex-end; height:16px; }
.pay-mada-bars i{ display:block; width:4px; border-radius:2px; }
.pay-mada-bars i:nth-child(1){ height:10px; background:#f7941d; }
.pay-mada-bars i:nth-child(2){ height:16px; background:#1c9b52; }
.pay-mada-bars i:nth-child(3){ height:13px; background:#1c1c1c; }
.pay-mada-text{ font-weight:800; font-size:15px; color:#1c1c1c; letter-spacing:.2px; }
.pay-visa-text{ font-weight:900; font-style:italic; font-size:15px; color:#1a1f71; letter-spacing:.3px; }
.pay-mc-circles{ display:flex; align-items:center; }
.pay-mc-circles i{ display:block; width:16px; height:16px; border-radius:50%; }
.pay-mc-circles i:nth-child(1){ background:#eb001b; }
.pay-mc-circles i:nth-child(2){ background:#f79e1b; margin-inline-start:-7px; mix-blend-mode:multiply; }

/* ===================================================
   CART DRAWER
   =================================================== */
.cart-drawer{
  position:fixed; inset:0; background:rgba(10,20,45,.45); z-index:100;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.cart-drawer.open{ opacity:1; pointer-events:auto; }
.cart-panel{
  position:absolute; inset-inline-end:0; top:0; bottom:0; width:380px; max-width:92vw;
  background:#fff; padding:22px; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s;
}
[dir="rtl"] .cart-panel{ transform:translateX(-100%); }
.cart-drawer.open .cart-panel{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cart-head h2{ margin:0; font-size:18px; }
.icon-button{ font-size:22px; width:34px; height:34px; border-radius:999px; }
.icon-button:hover{ background:var(--bg); }
.cart-items{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.cart-items .empty{ color:var(--ink-soft); text-align:center; padding:40px 0; }
.cart-line{ display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:12px; }
.cart-line img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.cart-line h3{ margin:0 0 4px; font-size:13px; }
.cart-line p{ margin:0; font-size:12.5px; color:var(--ink-soft); }
.cart-line small{ color:#9aa4b8; }
.remove-line{ margin-inline-start:auto; font-size:12px; color:var(--danger); }
.cart-summary{ display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); margin-top:8px; font-weight:700; }
.button{ display:block; text-align:center; padding:13px; border-radius:999px; font-weight:700; font-size:14px; margin-top:8px; transition:opacity .15s; }
.button.full{ width:100%; }
.button.primary{ background:var(--blue); color:#fff; }
.button.ghost{ background:var(--bg); color:var(--ink); }
.button.subtle{ background:none; color:var(--danger); font-size:12.5px; }
.button:hover{ opacity:.88; }

/* ===================================================
   TOAST
   =================================================== */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:999px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================================================
   MOBILE BOTTOM NAV
   =================================================== */
.mobile-bottom-nav{
  position:fixed; bottom:0; inset-inline:0; background:#fff; border-top:1px solid var(--line);
  display:none; justify-content:space-around; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index:50;
}
.bottom-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--ink-soft); position:relative; }
.bottom-nav-item.active{ color:var(--blue); }
.bottom-nav-icon-wrap{ position:relative; }
.bottom-nav-badge{
  position:absolute; top:-4px; right:-6px; background:var(--orange); color:#fff; font-size:9px;
  min-width:14px; height:14px; border-radius:999px; display:flex; align-items:center; justify-content:center;
}

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 980px){
  .hero-section{ grid-template-columns:1fr; gap:24px; align-items:start; }
  .hero-banner-new{ height:260px; }
  .hero-side-card{ width:100%; flex-direction:row; align-items:center; flex-wrap:wrap; }
  .hero-side-card .hero-side-actions{ width:100%; }
  .product-grid{ grid-template-columns:repeat(3, 1fr); }
  .category-section .category-grid{ grid-template-columns:repeat(4, 1fr); }
  .testimonial-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-columns{ grid-template-columns:1fr 1fr; }
  .brand-grid{ grid-template-columns:repeat(4, 1fr); }
}

@media (max-width: 700px){
  .desktop-only{ display:none !important; }
  .mobile-only{ display:flex; }
  section{ padding:24px 16px; }

  .top-strip-inner{ padding:6px 16px; font-size:11.5px; }
  .header-main{ padding:12px 16px; gap:12px; flex-wrap:nowrap; align-items:center; justify-content:space-between; }
  .brand-logo{ height:80px; }
  .header-actions{ gap:4px; }
  .header-left-group{ width:auto; flex-shrink:0; justify-content:flex-end; }
  .mobile-search-row{ display:flex; }
  .mobile-search-row .search-box{ width:100%; }

  .hero-section{ display:grid; grid-template-columns:1fr; gap:20px; }
  .hero-side-card{ display:none; }

  .hero-banner{ min-height:280px; padding:0 20px; }
  .hero-banner-new{ height:200px; }
  .hero-banner-text h1{ font-size:1.5rem; }
  .hero-badges{ display:none; }

  .hero-banner-iphone{ padding:24px 16px 0; }
  .hero-banner-iphone .hero-banner-visual{ width:100%; height:46%; opacity:.35; }
  .hero-wordmark{ font-size:1.9rem; }
  .hero-banner-iphone .hero-banner-text h1{ font-size:1.25rem; max-width:100%; }
  .hero-banner-icons{ gap:10px 0; padding:12px 0; }
  .hero-banner-icons span{ padding:0 12px; font-size:11.5px; }
  .hero-banner-icons span:nth-child(3)::after,
  .hero-banner-icons span:nth-child(4)::after{ display:none; }
  .hero-arrow{ width:28px; height:28px; }

  .feature-strip{ flex-direction:row; flex-wrap:wrap; gap:12px; padding:18px; }
  .feature-strip .feature-item{ flex:0 0 calc(50% - 6px); min-width:calc(50% - 6px); }

  .section-heading{ flex-direction:column; align-items:flex-start; gap:10px; }
  .slider-arrows{ justify-content:flex-start; }

  .product-slider-section .section-heading,
  .promo-banners-section .section-heading,
  .all-products-section .section-heading{ align-items:flex-start; }

  .product-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .filter-chips{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .filter-chips .chip{ flex:0 0 auto; }

  .category-section .category-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; overflow-x:visible; padding-bottom:0; }
  .category-card{ margin:0; }

  .testimonial-grid{ grid-template-columns:1fr; }

  .about-section{ flex-direction:column; text-align:center; padding:24px; }
  .about-text p:not(.about-lead){ max-width:100%; }
  .brand-grid{ grid-template-columns:repeat(3, 1fr); }
  .promo-strip{ flex-direction:column; gap:4px; }

  /* newsletter responsive rules removed */

  .footer-columns{
    grid-template-columns:1fr; text-align:right;
    justify-items:right; padding:36px 20px 0; gap:30px;
  }
  .footer-col{ text-align:right; justify-self:right; width:100%; max-width:360px; }
  .footer-col h4{ text-align:right; }
  .footer-col p{ text-align:right; justify-content:right; }
  .footer-contact .contact-line{ justify-content:right; }
  .footer-link-row{ justify-content:right; max-width:100%; margin-inline:0; }
  .social-icons{ justify-content:right; }
  .footer-badges{
    justify-content:right; padding:22px 16px 0;
    gap:clamp(8px, 3vw, 14px);
  }
  .footer-badge{
    width:clamp(56px, 16vw, 72px);
    height:clamp(56px, 16vw, 72px);
  }
  .footer-payment-row{ padding:18px 16px; flex-wrap:wrap; justify-content:right; }
  .footer-bottom{ flex-direction:column; text-align:right; }
  .footer-bottom-links{ justify-content:right; flex-wrap:wrap; gap:10px; }

  .mobile-bottom-nav{ display:none; }
  main{ padding-bottom:0px; }
  .cart-panel{ width:100%; max-width:100%; }
}

/* ===================================================
   PRODUCT DETAIL PAGE
   =================================================== */
.top-strip{ background:linear-gradient(90deg,#050b1a 0%,#0a1440 60%,#060b1a 100%); color:#fff; }
.top-strip a{ color:#fff; }
.top-strip-inner{ min-height:22px; padding-top:3px; padding-bottom:3px; }
.top-strip-right{ margin-inline-start:auto; }
.top-strip-left{ display:flex; align-items:center; gap:10px; }
.strip-pin{ font-size:13px; opacity:.92; }

.site-header{ position:sticky; top:0; }
.header-main{ min-height:68px; }
.brand-word,
.footer-logo-word{
  color:#1462ff; font-family:Arial, sans-serif; font-size:28px; line-height:1;
  font-weight:900; letter-spacing:0;
}

.footer-logo-word{ display:block; color:#fff; margin-bottom:18px; }
.search-box{
  border-radius:6px; border-color:#bcd4ff; background:#fff; padding:4px;
  box-shadow:inset 0 0 0 1px #d6e6ff;
  flex-direction:row-reverse;
}
.search-box input{ text-align:right; padding:9px 14px; }
.search-btn{ border-radius:7px; width:34px; height:34px; }
.header-actions{ margin-inline-end:auto; }
.cart-link-button{
  position:relative; display:inline-flex; align-items:center; gap: 8px; min-height:42px;
  color:#1b2b46; font-size:14px; font-weight:600;
}
.cart-link-button .badge-count{
  position:absolute; top:3px; right:16px; min-width:20px; height:20px; border-radius:50%;
  background:#f07613; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; border:2px solid #fff;
}
.main-nav{
  justify-content:flex-start; gap:26px; min-height:54px; padding-bottom:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.all-categories-btn{ border-radius:7px; padding:10px 18px; }
/* ==========================
   PDP CARD (مدار STYLE)
========================== */

.pdp-card{
    max-width:1450px;
    margin:30px auto;
    padding:45px;
    background:#fff;
    border-radius:20px;
    display:grid;
    grid-template-columns:55fr 45fr;
    gap:60px;
    box-shadow:0 2px 18px rgba(0,0,0,.05);
    border:1px solid #ececec;
    align-items:start;
}

.pdp-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;     /* ← ensures nothing gets clipped */
    width: 100%;
}

.pdp-badge-wrap {
    position: relative;
    width: 100%;
    overflow: visible;     /* ← prevents cropping */
    display: flex;
    justify-content: center;
}

.pdp-main-image {
    width: 100%;
    height: auto;          /* ← keeps natural aspect ratio */
    max-width: 560px;
    max-height: 500px;     /* ← safe limit, but image stays fully visible */
    object-fit: contain;   /* ← ensures full image is visible */
    display: block;
}


.pdp-info{
    display:flex;
    flex-direction:column;
}

.pdp-tags{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.pdp-tags span{
    background:#f4f6fb;
    color:#1462ff;
    font-size:12px;
    padding:4px 10px;
    border-radius:6px;
    font-weight:600;
}

.pdp-info h1{
    font-size:25px;
    font-weight:800;
    margin:0 0 12px;
    line-height:1.2;
}

.pdp-rating{
    display:flex;
    align-items:center;
    gap:8px;
    color:#666;
    margin-bottom:20px;
}

.pdp-rating span{
    color:#ffb400;
    font-size:20px;
}

.pdp-price{
    font-size:28px;
    color:#1462ff;
    font-weight:800;
    margin-bottom:8px;
}

.pdp-installment{
    color:#666;
    font-size:12px;
    margin-bottom:28px;
}

.pdp-description{
    color:#555;
    line-height:2;
    font-size:14px;
    margin-bottom:32px;
}

.pdp-field{
    margin-bottom:24px;
}

.pdp-field-label{
    display:block;
    margin-bottom:12px;
    color:#222;
}

.pdp-color-swatches{
    display:flex;
    flex-direction: row;      /* horizontal layout */
    flex-wrap: nowrap;        /* prevents wrapping to next line */
    gap:12px;
    align-items: center;
}
.pdp-color-swatch{
    width:150px;
    height:150px;
    border-radius:0;          /* <-- square (use 4px for soft rounded square) */
    border:2px solid #ddd;
    cursor:pointer;
    flex-shrink: 0;           /* keeps them from shrinking */
}
.pdp-color-swatch.selected{
    border:3px solid #1462ff;
    transform:scale(1.08);
}
.pdp-color-swatch:hover{
    border-color:#3fa9ff;
    box-shadow:0 0 0 3px #dbe9ff;
}

.pdp-sizes{
    display:flex;
    gap:9px;
}

.pdp-size-btn{
    width:60px;
    height:40px;
    border-radius:10px;
    background:#fff;
    border:1px solid #d7d7d7;
    cursor:pointer;
    font-weight:700;
    transition:.25s;
    font-size:12px;

}

.pdp-size-btn.active{
    border:2px solid #1462ff;
    color:#1462ff;
    background:#eef3ff;
    font-size:12px;
}

.pdp-qty-block{
    margin-top:8px;
}

.pdp-qty-stepper{
    display:flex;
    align-items:center;
    gap:10px;
}

.pdp-qty-step{
    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    font-size:22px;
}

.pdp-qty-input{
    width:55px;
    height:38px;
    border:none;
    text-align:center;
    font-size:18px;
    font-weight:700;
    background:transparent;
}

.pdp-add-cart{
    margin-top:30px;
    height:60px;
    width:100%;
    border:none;
    border-radius:14px;
    background:#1462ff;
    color:#fff;
    font-size:22px;
    font-weight:700;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    cursor:pointer;
    transition:.25s;
}

.pdp-add-cart:hover{
    background:#0d3fb0;
}

.pdp-buy-now{
    display:none;
}

.pdp-trust-row{
    margin-top:26px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.pdp-trust-row span{
    background:#fafafa;
    border:1px solid #ededed;
    border-radius:12px;
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:15px;
    color:#444;
}

.pdp-stock-meta,
.pdp-size-table-btn{
    display:none;
}
.pdp-page{ background:#f6f7f9; padding:0 0 40px; }
.pdp-breadcrumb{
  max-width:var(--maxw); margin:0 auto; padding:15px 24px; min-height:42px;
  display:flex; align-items:center; gap:10px; color:#7a8496; font-size:13px;
}
.pdp-breadcrumb span:last-child{ color:#14213d; font-weight:700; }


.pdp-badge{
  position:absolute; top:16px; right:16px; background:var(--danger); color:#fff;
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:800;
}
.pdp-thumbnails{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.pdp-thumb{
  width:56px; height:56px; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:#fff; cursor:pointer; padding:2px;
}
.pdp-thumb.active{ border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-tint); }
.pdp-thumb img{ width:100%; height:100%; object-fit:contain; }



.pdp-tags span:first-child{ background:#e6edff; color:#1462ff; }
.pdp-rating small{ color:#66748c; font-size:13px; }
.pdp-installment strong{ color:#1462ff; }

.pdp-field-label span{ color:#606b7f; font-weight:700; }
.pdp-size-btn:hover{ border-color:#3fa9ff; color:#0d3fb0; background:#eef3ff; }
#pdp-size-hint{ display:none; color:var(--danger); font-size:12px; }
.pdp-hidden-options{ display:none; }
.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button{ appearance:none; margin:0; }


.pdp-trust-row svg{ color:#1462ff; }
.pdp-stock-meta{
  display:none; width:100%; margin-top:16px; padding:14px; border:1px solid var(--line);
  border-radius:8px; background:#fbfcff; color:#647089; font-size:13px; line-height:1.9;
}
.pdp-size-table-btn{ display:none; }
.pdp-size-guide{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(10,20,45,.45); z-index:120; padding:20px;
}
.pdp-size-guide.open{ display:flex; }
.pdp-size-guide-inner{
  width:min(460px, 100%); background:#fff; border-radius:12px; padding:24px; position:relative;
  box-shadow:var(--shadow);
}
.pdp-size-guide-close{ position:absolute; top:10px; inset-inline-end:10px; font-size:24px; }

.pdp-related-section{ max-width:var(--maxw); margin:0 auto; padding:18px 24px 40px; }
.pdp-related-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pdp-related-header h2{ margin:0; font-size:24px; font-weight:900; color:#0c1424; }
.pdp-nav-arrows{ display:flex; gap:8px; }
.pdp-arrow{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--ink); font-size:20px;
}
.pdp-related-track{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.pdp-related-card{
  min-height:232px; background:#fff; border:1px solid #edf0f5; border-radius:8px; padding:18px 14px;
  display:flex; flex-direction:column; justify-content:space-between; transition:box-shadow .18s, transform .18s;
}
.pdp-related-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.pdp-related-card-img{ position:relative; height:130px; display:flex; align-items:center; justify-content:center; }
.pdp-related-card-img img{ max-width:128px; max-height:128px; object-fit:contain; margin:0 auto; }
.pdp-related-badge{
  position:absolute; top:0; inset-inline-start:0; background:var(--orange); color:#fff;
  font-size:11px; padding:4px 8px; border-radius:999px; font-weight:800;
}
.pdp-related-badge.soldout{ background:var(--danger); }
.pdp-related-card-body{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.pdp-related-card-body h3{ margin:0; font-size:14px; color:#10192b; font-weight:800; }
.pdp-related-card-body .price{ color:#1462ff; font-weight:900; direction:ltr; font-size:12px; }
.pdp-related-card-body .old-price{ color:#9aa4b8; text-decoration:line-through; font-size:12px; }
.pdp-visually-hidden{ display:none !important; }
.footer-payment.compact{
  display:block; border-top:0; padding:8px 0 0; margin:0; max-width:none;
}
.footer-payment.compact > span{ display:block; margin-bottom:10px; }

@media (max-width: 1100px){
  .pdp-card{ margin-inline:24px; grid-template-columns:1fr 1fr; gap:28px; }
}

@media (max-width: 991px){
  .pdp-card{ grid-template-columns:1fr; gap:35px; padding:22px; }
  .pdp-main-image{ max-width:400px; }
  .pdp-info h1{ font-size:30px; }
  .pdp-price{ font-size:36px; }
  .pdp-add-cart{ font-size:18px; height:54px; }
  .pdp-trust-row{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 820px){
  .pdp-card{
    grid-template-columns:1fr;
    direction:rtl;
    padding:24px 18px;
    margin-top:20px;
    gap:28px;
  }
  .pdp-gallery{ min-height:auto; order:0; }
  .pdp-info{ order:1; }
  .pdp-main-image{ max-height:none; max-width:100%; margin:0 auto; }
  .pdp-related-track{ grid-template-columns:repeat(2, 1fr); }
}

/* ============================================
   PRODUCT PAGE — MOBILE (≤700px)
   Full rebuild for premium mobile experience
   ============================================ */
@media (max-width: 700px){

  /* -- Header tweaks -- */
  .top-strip-left{ display:none; }
  .header-main{ flex-direction:row; }
  .brand-word{ font-size:24px; }
  .cart-link-button span{ display:none; }

  /* -- Breadcrumb -- */
  .pdp-breadcrumb{
    padding:10px 16px;
    font-size:12px;
    gap:6px;
    background:#fff;
    border-bottom:1px solid var(--line);
  }

  /* -- PDP Page background -- */
  .pdp-page{ padding:0 0 100px; background:#f4f5f8; }

  /* -- PDP Card container -- */
  .pdp-card{
    margin:0;
    border-radius:0;
    padding:20px 16px 28px;
    gap:24px;
    box-shadow:none;
    border:none;
    border-bottom:6px solid #f0f1f4;
  }

  /* -- Gallery -- */
  .pdp-gallery{
    min-height:auto;
    order:0;
  }
  .pdp-badge-wrap{
    background:#fff;
    border-radius:14px;
    padding:12px;
  }
  .pdp-main-image{
    max-height:none;
    max-width:100%;
    margin:0 auto;
    width:100%;
  }
  .pdp-thumbnails{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:8px;
    padding:4px 0;
    margin-top:12px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pdp-thumbnails::-webkit-scrollbar{ display:none; }
  .pdp-thumb{
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:10px;
    border-width:1.5px;
  }
  .pdp-badge{
    top:10px;
    right:10px;
    font-size:11px;
    padding:4px 10px;
  }

  /* -- Product Info -- */
  .pdp-info{ order:1; gap:0; }
  .pdp-tags{ flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .pdp-tags span{ font-size:11px; padding:3px 8px; }
  .pdp-info h1{
    font-size:20px;
    line-height:1.35;
    margin-bottom:8px;
  }
  .pdp-rating{
    margin-bottom:14px;
    gap:6px;
  }
  .pdp-rating span{ font-size:17px; }
  .pdp-rating small{ font-size:12px; }

  /* -- Price block -- */
  .pdp-price{
    font-size:26px;
    margin-bottom:4px;
  }
  .pdp-installment{
    font-size:13px;
    margin-bottom:16px;
    color:#5a6580;
  }

  /* -- Description -- */
  .pdp-description{
    font-size:13px;
    line-height:1.85;
    margin-bottom:20px;
    color:#5a6580;
  }

  /* -- Color swatches: scale down from 150px to 44px circles -- */
  .pdp-field{ margin-bottom:18px; }
  .pdp-field-label{ font-size:14px; margin-bottom:8px; }
  .pdp-color-swatches{
    gap:10px;
    flex-wrap:wrap;
  }
  .pdp-color-swatch{
    width:48px;
    height:48px;
    border-radius:4px;
    border-width:2px;
  }
  .pdp-color-swatch.selected{
    border-width:3px;
    transform:scale(1.05);
    box-shadow:0 0 0 3px rgba(11,99,246,.18);
  }

  /* -- Size buttons -- */
  .pdp-sizes{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .pdp-sizes::-webkit-scrollbar{ display:none; }
  .pdp-size-btn{
    flex:0 0 auto;
    min-width:72px;
    width:auto;
    height:38px;
    padding:0 14px;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
  }
  .pdp-size-btn.active{
    font-size:13px;
  }

  /* -- Quantity stepper -- */
  .pdp-qty-block{ width:100%; margin-top:4px; }
  .pdp-qty-stepper{
    width:100%;
    max-width:180px;
    justify-content:space-between;
  }
  .pdp-qty-step{
    width:36px;
    height:36px;
    border-radius:8px;
    font-size:20px;
  }
  .pdp-qty-input{
    width:48px;
    height:36px;
    font-size:16px;
  }

  /* -- Action buttons (add to cart / buy now) -- */
  .pdp-add-cart{
    margin-top:20px;
    height:52px;
    border-radius:12px;
    font-size:17px;
    gap:10px;
  }
  .pdp-buy-now{
    width:100%;
  }

  /* -- Trust badges -- */
  .pdp-trust-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:18px;
  }
  .pdp-trust-row span{
    padding:12px 8px;
    font-size:12px;
    gap:6px;
    border-radius:10px;
  }
  .pdp-trust-row svg{ width:18px; height:18px; }

  /* -- Related products section -- */
  .pdp-related-section{
    padding:20px 16px 30px;
  }
  .pdp-related-header{
    margin-bottom:14px;
  }
  .pdp-related-header h2{
    font-size:18px;
  }
  .pdp-related-track{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .pdp-related-card{
    min-height:auto;
    padding:12px 10px;
    border-radius:10px;
  }
  .pdp-related-card-img{
    height:110px;
  }
  .pdp-related-card-img img{
    max-width:100px;
    max-height:100px;
  }
  .pdp-related-card-body{
    align-items:flex-start;
    gap:6px;
  }
  .pdp-related-card-body h3{
    font-size:12.5px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .pdp-related-card-body .price{ font-size:13px; }
  .pdp-related-card-body .old-price{ font-size:11px; }

  /* -- Size guide modal -- */
  .pdp-size-guide-inner{
    padding:20px;
    border-radius:14px;
  }
}

/* ============================================
   PRODUCT PAGE — EXTRA SMALL (≤480px)
   ============================================ */
@media (max-width: 480px){
  .pdp-card{
    padding:16px 14px 24px;
  }
  .pdp-main-image{
    max-height:none;
    max-width:100%;
  }
  .pdp-info h1{
    font-size:18px;
  }
  .pdp-price{
    font-size:24px;
  }
  .pdp-color-swatch{
    width:40px;
    height:40px;
    border-radius:4px;
  }
  .pdp-thumb{
    width:44px;
    height:44px;
  }
  .pdp-trust-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .pdp-trust-row span{
    font-size:13px;
    padding:14px 10px;
  }
  .pdp-related-track{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .pdp-related-card-img{
    height:90px;
  }
  .pdp-related-card-img img{
    max-width:80px;
    max-height:80px;
  }
  .pdp-add-cart{
    height:48px;
    font-size:15px;
  }
}

/* New Product Card Style */
.new-card-style {
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
}

.card-header-blue {
  background: var(--blue);
  color: #fff;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
}

.new-card-style .product-image {
  position: relative;
  aspect-ratio: 1/1;
  background: #fff;
  padding: 10px;
}

.new-card-style .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.badge-off {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  background: #ea580c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
}

.new-card-style .product-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.new-card-style .product-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-colors-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-soft);
}

.card-swatches {
  display: flex;
  gap: 4px;
}

.card-swatches .swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: inline-block;
}

.card-swatches .swatch.active {
  border: 2px solid var(--blue);
  transform: scale(1.1);
}

.card-storage-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.storage-pill {
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
}

.storage-pill.active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-tint);
}

.card-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.card-price-row .old-price {
  text-decoration: line-through;
  color: #aab5cf;
  font-size: 12px;
}

.card-price-row .price {
  color: var(--blue);
  font-size: 18px;
  font-weight: 800;
}

.card-badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.card-badges-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  padding: 4px;
  border-radius: 4px;
  font-weight: 600;
}

.badge-blue {
  background: #f0f5ff;
  color: var(--blue);
}

.badge-orange {
  background: #fff8f1;
  color: #ea580c;
}

.card-add-btn {
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 8px;
  transition: background 0.15s;
}

.card-add-btn:hover {
  background: var(--blue-dark);
}


/* ===================================================
   PROMO BANNERS GRID
   =================================================== */
.promo-banners-section {
  padding-top: 10px;
  padding-bottom: 30px;
}
.promo-banners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.promo-banner-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  aspect-ratio: 16 / 9;
  background: #0d1117;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.promo-banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20, 33, 61, .15);
}
.promo-banner-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.promo-banner-card:hover img {
  transform: scale(1.05);
}

@media (max-width: 980px){
  .promo-banners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px){
  .promo-banners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================================
   DUAL PROMO BANNERS (Installments + Sell Device)
   =================================================== */
.dual-promo-section {
  padding-top: 10px;
  padding-bottom: 30px;
}
.dual-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.dual-promo-card {
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  min-height: 180px;
  text-decoration: none;
  color: #fff;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dual-promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}

/* Installments Card — Orange Gradient */
.dual-promo-installments {
  background: linear-gradient(135deg, #e8690c 0%, #ff9a3e 50%, #ffb347 100%);
  flex-direction: row-reverse;
}

/* Sell Device Card — Teal Gradient */
.dual-promo-sell {
  background: linear-gradient(135deg, #0a1440 0%, #1462ff 50%, #3fa9ff 100%);
  flex-direction: row-reverse;
}

/* Image Side */
.dual-promo-img {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.dual-promo-img img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Text Side */
.dual-promo-text {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}
.dual-promo-text h3 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.3;
}
.dual-promo-text p {
  font-size: 13px;
  margin: 0 0 16px;
  opacity: 0.9;
  line-height: 1.5;
}

/* Tamara / Tabby Badges */
.dual-promo-badges {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
}
.dual-promo-badges span {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.25s;
}
.dual-promo-badges span:hover {
  background: rgba(255,255,255,0.35);
}

/* Sell Now Button */
.dual-promo-btn {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.4);
  padding: 8px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: background 0.25s, transform 0.25s;
}
.dual-promo-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 900px) {
  .dual-promo-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  .dual-promo-card {
    flex-direction: column-reverse !important;
    min-height: auto;
  }
  .dual-promo-img {
    flex: none;
    width: 100%;
    padding: 16px 16px 0;
  }
  .dual-promo-img img {
    height: 120px;
    width: 100%;
  }
  .dual-promo-text {
    padding: 20px;
    align-items: center;
    text-align: center;
  }
  .dual-promo-text h3 {
    font-size: 20px;
  }
  .dual-promo-badges {
    justify-content: center;
  }
}

/* Installments card: photo only on mobile */
@media (max-width: 700px) {
  .dual-promo-installments .dual-promo-text {
    display: none;
  }
  .dual-promo-installments {
    min-height: 150px;
  }
  .dual-promo-installments .dual-promo-img {
    flex: 100%;
    width: 100%;
    height: 100%;
    padding: 0;
  }
  .dual-promo-installments .dual-promo-img img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    box-shadow: none;
  }
}

/* ===================================================
   CHECKOUT PAGE
   =================================================== */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: start;
  width: min(1180px, calc(100% - 32px));
  margin: 30px auto;
}
.checkout-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
}
.checkout-form h1 {
  margin-top: 0;
  font-size: 26px;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 10px;
  display: inline-block;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}
.form-grid label input,
.form-grid label textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}
.order-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  position: sticky;
  top: 20px;
}
.order-card h2 {
  margin-top: 0;
  font-size: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.checkout-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.checkout-item img {
  width: 56px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  background: #e2d8cf;
}
.checkout-item-info {
  display: flex;
  flex-direction: column;
}
.checkout-item-name {
  font-weight: 600;
  font-size: 14px;
}
.checkout-item-meta {
  font-size: 12px;
  color: var(--muted);
}
.checkout-item-price {
  font-weight: 700;
  color: var(--brand-dark);
}
.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  margin-bottom: 12px;
  font-size: 14px;
  overflow: hidden;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.price-row .label {
  overflow-wrap: break-word;
  min-width: 0;
}
.price-row .amount {
  flex-shrink: 0;
  white-space: nowrap;
}
.price-row.subtotal .label {
  color: var(--muted);
  font-weight: 500;
}
.price-row.fee {
  color: #e67e22;
  font-weight: 600;
}
.price-row.fee .label::before {
  content: '• ';
  color: #e67e22;
}
.checkout-page .cart-summary {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 2px solid var(--brand);
  font-size: 20px;
  font-weight: 700;
}
.payment-info {
  background: #eef3ff;
  border: 1px solid #b9cdf5;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  color: #0d3fb0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.payment-info svg {
  flex-shrink: 0;
}
.delivery-info-box {
  background: #eef3ff;
  border: 1px solid #b9cdf5;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  color: #0d3fb0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* ---- Checkout Responsive ---- */
@media (max-width: 980px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .order-card {
    position: relative;
    top: 0;
  }
}
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Order Confirm Modal ── */
#order-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(6,11,26,.55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInOverlay .25s ease;
}
#order-confirm-overlay.open { display: flex; }
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ocm-box {
  background: var(--panel);
  border-radius: 20px;
  padding: 28px 24px 24px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(6,11,26,.22);
  border: 1px solid var(--line);
  animation: slideUpModal .3s ease;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes slideUpModal {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.ocm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 14px;
}
.ocm-header .ocm-icon { font-size: 32px; }
.ocm-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--brand-dark);
}
.ocm-header small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}
.ocm-section {
  margin-bottom: 16px;
}
.ocm-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.ocm-info-row {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.ocm-info-row:last-child { border-bottom: none; }
.ocm-info-label {
  color: var(--muted);
  font-weight: 600;
  min-width: 110px;
  flex-shrink: 0;
}
.ocm-info-value {
  color: var(--ink);
  font-weight: 500;
}
.ocm-items-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ocm-item-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.ocm-item-row:last-child { border-bottom: none; }
.ocm-item-img {
  width: 44px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  background: #e2d8cf;
}
.ocm-item-name { font-size: 13px; font-weight: 600; }
.ocm-item-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ocm-item-price { font-size: 14px; font-weight: 700; color: var(--brand-dark); white-space: nowrap; }
.ocm-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 0;
  border-top: 2px solid var(--brand);
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-dark);
  margin-top: 4px;
}
.ocm-payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef3ff;
  border: 1px solid #b9cdf5;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #0d3fb0;
  margin-bottom: 18px;
}
.ocm-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.ocm-btn-cancel {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.ocm-btn-cancel:hover { border-color: var(--brand); color: var(--brand-dark); }
.ocm-btn-confirm {
  flex: 2;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
}
.ocm-btn-confirm:hover { background: var(--brand-dark); }
.ocm-btn-confirm:disabled { opacity: .6; cursor: not-allowed; }

/* ===================================================
   PAYMENT VERIFY PAGE
   =================================================== */
.verify-layout {
  width: min(680px, calc(100% - 32px));
  margin: 30px auto 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Steps */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 4px;
  padding: 0 10px;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e2d8cf;
  color: #786255;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #c9b9ab;
  transition: all .3s;
}
.step-circle.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(22, 87, 209, .2);
}
.step-circle.done {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.step-label.active { color: var(--brand); }
.step-label.done  { color: var(--success); }
.step-line {
  width: 50px;
  height: 3px;
  background: #e2d8cf;
  margin-bottom: 18px;
  border-radius: 2px;
}
.step-line.done { background: var(--success); }

/* Verify Cards */
.verify-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 6px 24px rgba(20,33,61,.08);
}
.verify-card h2 {
  margin: 0 0 16px;
  font-size: 22px;
  color: var(--brand-dark);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 8px;
  display: inline-block;
}

/* Order summary */
.order-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.order-summary-row:last-child { border-bottom: none; }
.order-total-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-dark);
  border-top: 2px solid var(--brand);
  margin-top: 8px;
}

/* Bank details */
.bank-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.bank-detail-row:last-child { border-bottom: none; }
.bank-detail-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  min-width: 100px;
}
.bank-detail-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  direction: ltr;
  text-align: left;
}
.copy-btn {
  background: #e6edff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-dark);
  cursor: pointer;
  transition: background .2s;
}
.copy-btn:hover { background: #dbe9ff; }
.instructions-box {
  background: #f5f8ff;
  border: 1px solid #dbe9ff;
  border-radius: 8px;
  padding: 14px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 14px;
}

/* Visa card input */
.visa-card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.visa-row {
  display: flex;
  gap: 14px;
}
.visa-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  font-size: 14px;
}
.visa-row label input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  transition: border-color .2s;
}
.visa-row label input:focus {
  border-color: var(--brand);
  outline: none;
}
.visa-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
}
.visa-icon-row svg { width: 32px; height: 20px; }

/* Card logos */
.card-logos-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-logo {
  height: 32px;
  width: auto;
}
.checkout-card-logos {
  gap: 14px;
}
.checkout-card-logos .card-logo {
  height: 40px;
}
.otp-card-logos-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.otp-card-logos-section .card-logo {
  height: 40px;
}

/* COD */
.cod-info-box {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.cod-info-box .cod-icon { font-size: 44px; margin-bottom: 8px; }
.cod-info-box h3 { margin: 0 0 4px; color: #15803d; font-size: 20px; }
.cod-info-box p { margin: 0; color: #166534; font-size: 15px; }

/* OTP */
.otp-inputs {
  display: flex;
  gap: 12px;
  justify-content: center;
  direction: ltr;
  margin: 24px 0 16px;
}
.otp-digit {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.otp-digit:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20,98,255,.15);
}
.otp-single {
  width: 100%;
  max-width: 280px;
  height: 60px;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  direction: ltr;
}
.otp-single:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20,98,255,.15);
}
.otp-hint {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 4px;
}
.resend-row {
  text-align: center;
  margin-top: 16px;
}
.resend-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px 12px;
}
.resend-btn:hover { color: var(--brand-dark); }
.resend-countdown {
  font-size: 14px;
  color: var(--muted);
}

/* Success */
.success-box {
  text-align: center;
  padding: 32px 20px;
}
.success-box .success-icon {
  font-size: 64px;
  margin-bottom: 12px;
  display: inline-block;
  animation: popIn .6s ease;
}
.success-box h2 {
  color: #15803d;
  margin: 0 0 8px;
  font-size: 26px;
}
.success-box p { color: var(--muted); margin: 0 0 20px; }

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.step-panel { display: none; }
.step-panel.active { display: block; }

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* OTP warning box */
.otp-warning-box {
  background: #fff8ee;
  border: 1.5px solid #f0c97a;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}
.otp-warning-box p {
  margin: 0;
  font-size: 14px;
  color: #7a5500;
  line-height: 1.7;
  font-weight: 600;
}
.otp-error-msg {
  display: none;
  color: #dc2626;
  background: #fee2e2;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  text-align: center;
  font-weight: 600;
}

/* ---- Payment Verify Responsive ---- */
@media (max-width: 640px) {
  .verify-card { padding: 20px; }
  .step-line { width: 30px; }
  .step-circle { width: 34px; height: 34px; font-size: 14px; }
  .otp-digit { width: 44px; height: 50px; font-size: 22px; }
  .otp-single { height: 54px; font-size: 24px; letter-spacing: 6px; }
  .visa-row { flex-direction: column; gap: 12px; }
  .bank-detail-row { flex-wrap: wrap; }
  .bank-detail-label { min-width: 80px; }
}

/* ---- Confirm Modal (payment-verify) ---- */
#confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(6,11,26,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#confirm-modal.open { display: flex; }
.confirm-modal-box {
  background: var(--panel);
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(6,11,26,.25);
  border: 1px solid var(--line);
  text-align: center;
  animation: popIn .35s ease;
}
.confirm-modal-icon {
  font-size: 52px;
  margin-bottom: 14px;
  display: block;
}
.confirm-modal-title {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--brand-dark);
}
.confirm-modal-body {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}
.confirm-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.confirm-modal-cancel {
  flex: 1;
  min-width: 100px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.confirm-modal-cancel:hover { border-color: var(--brand); color: var(--brand-dark); }
.confirm-modal-ok {
  flex: 1;
  min-width: 120px;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.confirm-modal-ok:hover { background: var(--brand-dark); }

/* Phone input group */
.phone-input-group {
  display: flex;
  align-items: center;
  gap: 0;
}
.phone-input-prefix {
  background: #f0ede8;
  padding: 10px 12px;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--line);
  border-right: none;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.phone-input-group input {
  flex: 1;
  border-radius: 0 6px 6px 0;
  border-left: none;
}