/* =========================================================
   MH FASHION CITY — shared stylesheet
   Clean, light, professional e-commerce theme. Accent colours
   (violet -> magenta) come from the brand logo; the rest of the
   palette is light neutrals, inspired by premium sportswear
   configurator sites.
   ========================================================= */
:root{
  --ink:#ffffff;
  --ink-2:#f7f7f7;
  --panel:#ffffff;
  --panel-2:#f2f2f2;
  --line:#e2e2e2;
  --violet:#1a1a1a;
  --violet-2:#000000;
  --magenta:#1a1a1a;
  --magenta-2:#000000;
  --paper:#0a0a0a;
  --mist:#595959;
  --mist-dim:#8a8a8a;
  --radius: 3px;
  --maxw: 1280px;
  /* dark-context tokens, used only inside the footer + mobile nav
     "dark islands" that sit deliberately against the light theme */
  --dtext:#ffffff;
  --dmist:#b0b0b0;
  --dmist-dim:#8a8a8a;
  --dline: rgba(255,255,255,0.12);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
h1,h2,h3,.display{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.02em;
  line-height:0.94;
  font-weight:400;
  margin:0;
  color:var(--paper);
}
.mono{ font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.22em;
  color:var(--magenta-2);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--magenta-2); display:inline-block;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px; text-transform:uppercase; letter-spacing:0.12em; font-weight:600;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .18s ease, filter .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{ background:linear-gradient(120deg,var(--violet-2),var(--magenta-2)); color:#fff; font-weight:700; box-shadow:0 8px 22px rgba(0,0,0,0.22); }
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 10px 28px rgba(0,0,0,0.3); transform:translateY(-1px); }
.btn-outline{ border-color:#d9d9d9; color:var(--paper); background:#fff; }
.btn-outline:hover{ border-color:var(--violet-2); background:var(--panel-2); }
.btn-magenta{ background:var(--magenta); color:#fff; }
.btn-magenta:hover{ background:var(--magenta-2); }
:focus-visible{ outline:2px solid var(--violet-2); outline-offset:3px; }

/* ===== NAV ===== */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 28px; max-width:var(--maxw); margin:0 auto;}
.logo{ display:flex; align-items:center; gap:10px; font-family:'Bebas Neue'; font-size:20px; letter-spacing:0.03em;}
.logo img{ height:55px; width:auto; border-radius:4px; background:#fff; padding:3px; border:1px solid var(--line); }
.navlinks{ display:flex; gap:32px; font-size:17px; font-weight:700; }
.navlinks a{ color:var(--mist); transition:color .15s; position:relative;}
.navlinks a:hover{ color:var(--paper); }
.navright{ display:flex; align-items:center; gap:14px; }
.icon-btn{ position:relative; background:#fff; border:1px solid var(--line); color:var(--paper); width:40px; height:40px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center;}
.icon-btn:hover{ border-color:var(--violet-2); }
.cart-count{ position:absolute; top:-7px; right:-7px; background:var(--magenta); color:#fff; font-size:10px; font-family:'JetBrains Mono'; min-width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 2px;}
@media (max-width:880px){ .navlinks{display:none;} }

/* ===== HERO ===== */
/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: center;
  padding: 88px 0 70px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}

/* Background Video Setup */
.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg, 
    rgba(0, 0, 0, 0.45) 0%, 
    rgba(0, 0, 0, 0.75) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-video-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Typography & Visual Elements */
.hero .eyebrow-light {
    display: none !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta-2, #ff2a85);
  margin-bottom: 12px;
}

.hero-video-title {
  font-size: clamp(40px, 6.2vw, 78px);
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.hero-video-lead {
  margin-top: 22px;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.65;
}

/* Buttons & CTA Area */
.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.btn-light {
  background-color: #ffffff;
  color: #000000;
  padding: 14px 28px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-light:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  padding: 14px 28px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.btn-outline-light:hover {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero {
    min-height: 90vh;
    padding: 60px 0;
  }
  
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-light, .btn-outline-light {
    text-align: center;
  }
}



/*End Here Secton */









.hero{ position:relative; padding:88px 0 70px; overflow:hidden; border-bottom:1px solid var(--line); background:var(--ink-2); }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(680px 420px at 82% 18%, rgba(0,0,0,0.10), transparent 60%),
    radial-gradient(500px 500px at 10% 90%, rgba(0,0,0,0.08), transparent 60%);
  pointer-events:none;
}
.hero-ghost{
  position:absolute; right:-40px; top:-60px;
  font-family:'Bebas Neue'; font-size:min(46vw,560px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(0,0,0,0.07);
  user-select:none; pointer-events:none; z-index:0;
  animation:ghostfloat 9s ease-in-out infinite;
}
@keyframes ghostfloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);} }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } .hero-ghost{ display:none; } }
.hero h1{ font-size:clamp(44px,6.6vw,82px); margin-top:18px; }
.hero h1 .accent{
  background:linear-gradient(100deg,var(--violet-2),var(--magenta-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ margin-top:22px; max-width:480px; color:#4b4545; font-size:17px; line-height:1.65; }
.hero-ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-facts{ display:flex; gap:24px; margin-top:52px; flex-wrap:wrap; }
.hero-facts div{ font-family:'JetBrains Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--mist); border-left:2px solid var(--magenta); padding-left:10px; max-width:150px;}

.hero-visual{ position:relative; aspect-ratio:1/1.02; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 24px 60px rgba(0,0,0,0.10); }
.hero-visual img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05); }
.hero-visual .tag{
  position:absolute; bottom:18px; left:18px; background:rgba(255,255,255,0.88); backdrop-filter:blur(6px);
  border:1px solid var(--line); padding:10px 14px; border-radius:var(--radius);
  font-family:'JetBrains Mono'; font-size:11.5px; color:var(--paper); text-transform:uppercase; letter-spacing:0.06em;
}

/* ===== SECTION HEADERS ===== */
.section{ padding:96px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(34px,4.4vw,54px); margin-top:12px; }
.section-head p{ color:var(--mist); max-width:420px; font-size:15px; line-height:1.6; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== SHOP GRID ===== */
.shop-section{ background:var(--ink); border-bottom:1px solid var(--line); }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr;} }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.card:hover{ transform:translateY(-8px); border-color:rgba(0,0,0,0.4); box-shadow:0 22px 40px rgba(0,0,0,0.14); }
.card-art{ aspect-ratio:1/0.92; display:flex; align-items:center; justify-content:center; padding:0; position:relative; overflow:hidden; background:var(--ink-2);}
.card-art svg{ padding:26px; transition:transform .5s ease; }
.card-art img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-art img, .card:hover .card-art svg{ transform:scale(1.08); }
.card-art-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35) 100%); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.card:hover .card-art-overlay{ opacity:1; }
.card-tag{ position:absolute; top:14px; left:14px; z-index:2; font-family:'JetBrains Mono'; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; background:rgba(255,255,255,0.92); border:1px solid var(--line); padding:4px 9px; border-radius:20px; color:var(--mist);}
.card-body{ padding:18px 20px 22px; border-top:1px solid var(--line); }
.card-body h3{ font-family:'Inter'; font-weight:700; font-size:16px; margin:0 0 6px; color:var(--paper); }
.card-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.price{ font-family:'JetBrains Mono'; font-weight:700; color:var(--magenta-2); font-size:15px; }
.card-actions{ display:flex; gap:8px; margin-top:14px; }
.btn-buynow, .btn-customize{
  flex:1; font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  padding:11px 10px; border-radius:var(--radius); font-weight:600; transition:all .2s ease;
}
.btn-buynow{ background:linear-gradient(120deg,var(--violet-2),var(--magenta-2)); color:#fff; border:none; }
.btn-buynow:hover{ filter:brightness(1.08); box-shadow:0 8px 18px rgba(0,0,0,0.28); }
.btn-customize{ color:var(--violet-2); border:1px solid rgba(0,0,0,0.35); background:rgba(0,0,0,0.06); }
.btn-customize:hover{ background:rgba(0,0,0,0.14); }

/* card entrance stagger (independent of the section-level .reveal system) */
.reveal-card{ opacity:0; transform:translateY(28px) scale(0.98); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal-card.in{ opacity:1; transform:none; }

/* ===== CUSTOMIZER ===== */
.customize-section{ padding:50px 120px; position:relative; background:var(--ink-2); }
.moq-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,0.08); border:1px solid rgba(0,0,0,0.25);
  color:var(--magenta-2); font-family:'JetBrains Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em;
  padding:9px 14px; border-radius:20px; margin-bottom:26px;
}
.customizer{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:0; border:1px solid var(--line); border-radius:6px;
  background:#fff; max-height:100vh; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.08);
}
.stage{ position:relative; background:
    radial-gradient(700px 460px at 50% 20%, rgba(0,0,0,0.06), transparent 60%), #f2f2f2;
  height:100%; min-height:480px; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--line);
}
#jersey-canvas{ width:100%; height:100%; display:block; cursor:grab; }
#jersey-canvas:active{ cursor:grabbing; }
.stage-hint{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mist-dim); display:flex; align-items:center; gap:8px; }
.stage-fallback{ padding:40px; text-align:center; color:var(--mist); font-size:14px; display:none; }
.stage-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mist-dim); font-family:'JetBrains Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.1em;}
.view-toggle{ display:flex; gap:8px; margin-bottom:18px; }
.view-btn{
  padding:9px 20px; border-radius:24px; border:1px solid var(--line); background:var(--panel-2); color:var(--mist);
  font-family:'JetBrains Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
  transition:all .2s ease;
}
.view-btn.active{ background:linear-gradient(120deg,var(--violet-2),var(--magenta-2)); color:#fff; border-color:transparent; }
.reset-btn{ background:none; }
.reset-btn:hover{ border-color:var(--magenta-2); color:var(--magenta-2); }
.slider-field input[type=range]{
  width:100%; height:4px; border-radius:4px; background:#e2e2e2; appearance:none; -webkit-appearance:none; margin-top:6px;
}
.slider-field input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(120deg,var(--violet-2),var(--magenta-2)); cursor:pointer; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.slider-field input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:linear-gradient(120deg,var(--violet-2),var(--magenta-2)); cursor:pointer; border:2px solid #fff;
}
.field input[type=color]{ height:44px; padding:4px; cursor:pointer; }
.spinner{
  display:inline-block; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,0.18); border-top-color:var(--violet-2);
  animation:spin 0.8s linear infinite; margin-right:10px; vertical-align:middle;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.panel{ padding:34px 32px; max-height:100vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--violet-2) var(--panel-2); background:#fff; }
.panel::-webkit-scrollbar{ width:8px; }
.panel::-webkit-scrollbar-track{ background:var(--panel-2); }
.panel::-webkit-scrollbar-thumb{ background:var(--violet-2); border-radius:8px; }
.panel h3.pt{ font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--mist); margin:26px 0 12px; }
.panel h3.pt:first-child{ margin-top:0; }
.swatches{ display:flex; gap:9px; flex-wrap:wrap; }
.swatch{ width:30px; height:30px; border-radius:50%; border:2px solid rgba(0,0,0,0.12); cursor:pointer; transition:transform .15s, border-color .15s; padding:0;}
.swatch:hover{ transform:scale(1.1); }
.swatch.active{ border-color:var(--violet-2); box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--violet-2); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12px; color:var(--mist); margin-bottom:7px; font-weight:600; }
.field input[type=text], .field input[type=number], .field input[type=color], .field select{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  padding:11px 13px; border-radius:var(--radius); font-family:'Inter'; font-size:14px;
}
.field input:focus, .field select:focus{ border-color:var(--violet-2); outline:none; }
.field .hint{ font-size:11.5px; color:var(--mist-dim); margin-top:6px; font-family:'JetBrains Mono'; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.upload{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.upload-btn{ font-size:12px; padding:10px 14px; border:1px dashed #cfcfcf; border-radius:var(--radius); color:var(--mist); background:none; }
.upload-btn:hover{ border-color:var(--violet-2); color:var(--paper); }
.upload-name{ font-size:12px; color:var(--mist-dim); font-family:'JetBrains Mono'; }
.sizes{ display:flex; gap:8px; flex-wrap:wrap; }
.size-btn{ width:44px; height:38px; border:1px solid var(--line); background:var(--panel-2); color:var(--paper); font-size:12px; font-family:'JetBrains Mono'; border-radius:var(--radius); }
.size-btn.active{ border-color:var(--violet-2); background:rgba(0,0,0,0.12); color:var(--violet-2); }
.price-line{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }
.price-line .amt{ font-family:'JetBrains Mono'; font-size:26px; font-weight:700; color:var(--magenta-2); }
.price-line .amt small{ font-size:13px; color:var(--mist); font-weight:400; }
.addcart{ width:100%; margin-top:16px; padding:16px; }

/* ===== HOW IT WORKS ===== */
.how-section{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:820px){ .how-grid{ grid-template-columns:1fr; } }
.how-step{ background:#fff; padding:38px 32px; }
.how-step .num{ font-family:'Bebas Neue'; font-size:52px; color:var(--violet-2); opacity:0.9; }
.how-step h3{ font-family:'Inter'; font-weight:700; font-size:19px; margin:10px 0 8px; color:var(--paper); }
.how-step p{ color:var(--mist); font-size:14.5px; line-height:1.6; margin:0; }

/* ===== GALLERY ===== */
.gallery-box{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,0.06); }
@media (max-width:820px){ .gallery-box{ grid-template-columns:1fr; } }
.gallery-box img{ width:100%; height:100%; object-fit:cover; min-height:320px; }
.gallery-copy{ padding:44px; display:flex; flex-direction:column; justify-content:center; }
.gallery-copy p{ color:var(--mist); font-size:15px; line-height:1.7; margin-top:16px; max-width:400px; }

/* ===== BULK ===== */
.bulk{ padding:80px 0; background:var(--ink); }
.bulk-box{ background:linear-gradient(120deg, var(--ink-2), #fff); border:1px solid var(--line); border-radius:6px; padding:52px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,0.06);}
.bulk-box::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(0,0,0,0.12), transparent 70%); }
.bulk-box h2{ font-size:clamp(28px,3.6vw,42px); max-width:520px; position:relative; }
.bulk-box p{ color:var(--mist); margin-top:12px; max-width:460px; position:relative; }
.bulk-actions{ position:relative; display:flex; gap:12px; flex-wrap:wrap; }

/* ===== TESTIMONIALS ===== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi{ background:#fff; border:1px solid var(--line); padding:26px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.testi p{ font-size:14.5px; line-height:1.65; color:var(--paper); }
.testi .who{ margin-top:16px; font-family:'JetBrains Mono'; font-size:12px; color:var(--mist-dim); }
.stars{ color:var(--magenta-2); font-size:13px; letter-spacing:2px; margin-bottom:10px; }

/* ===== FOOTER (deliberate dark island against the light theme) ===== */
footer{ background:#0a0a0a; border-top:1px solid var(--dline); padding:64px 0 28px; color:var(--dmist); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-family:'JetBrains Mono'; font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--dmist); margin-bottom:16px; }
.footer-grid a, .footer-grid p{ display:block; color:var(--dmist-dim); font-size:13.5px; margin-bottom:10px; }
.footer-grid a:hover{ color:#fcfcfc; }
.pay-icons{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.pay-icons span{ font-family:'JetBrains Mono'; font-size:10.5px; border:1px solid var(--dline); padding:5px 8px; border-radius:3px; color:var(--dmist); }
.footer-bottom{ margin-top:52px; padding-top:22px; border-top:1px solid var(--dline); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--dmist-dim); }
.footer-bottom a{ color:var(--dmist-dim); }
.footer-bottom a:hover{ color:#fcfcfc; }

/* ===== CART DRAWER ===== */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:90; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.overlay.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:#fff; border-left:1px solid var(--line); z-index:100; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:-20px 0 50px rgba(0,0,0,0.12); }
.drawer.open{ transform:translateX(0); }
.drawer-head{ padding:22px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.drawer-head h3{ font-family:'Bebas Neue'; font-size:22px; }
.drawer-close{ background:none; border:none; color:var(--mist); font-size:22px; line-height:1; }
.drawer-items{ flex:1; overflow-y:auto; padding:14px 24px; }
.drawer-empty{ color:var(--mist-dim); font-size:13.5px; padding:30px 0; text-align:center; }
.cart-item{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.cart-item .swimg{ width:52px; height:52px; border-radius:6px; flex-shrink:0; object-fit:cover; }
.cart-item .ci-info{ flex:1; }
.cart-item .ci-info h5{ font-size:13.5px; margin:0 0 4px; font-weight:700; color:var(--paper); }
.cart-item .ci-info span{ display:block; font-size:11.5px; color:var(--mist-dim); font-family:'JetBrains Mono'; }
.cart-item .ci-remove{ background:none; border:none; color:var(--mist-dim); font-size:12px; text-decoration:underline; padding:0; margin-top:6px; }
.drawer-foot{ padding:20px 24px 26px; border-top:1px solid var(--line); }
.drawer-total{ display:flex; justify-content:space-between; margin-bottom:16px; font-family:'JetBrains Mono'; }
.drawer-total .amt{ color:var(--magenta-2); font-weight:700; font-size:17px; }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--paper); color:#fff; font-family:'JetBrains Mono'; font-size:12.5px; padding:12px 20px; border-radius:4px; z-index:120; opacity:0; pointer-events:none; transition:all .3s ease; font-weight:600; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   ADMIN PANEL
   ========================================================= */
.admin-shell{ max-width:1080px; margin:0 auto; padding:48px 28px 100px; }
.admin-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:36px; flex-wrap:wrap; gap:16px; }
.admin-note{
  background:rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.22); border-radius:var(--radius);
  padding:16px 18px; font-size:13px; color:var(--mist); line-height:1.6; margin-bottom:36px;
}
.admin-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:28px; align-items:start; }
@media (max-width:900px){ .admin-grid{ grid-template-columns:1fr; } }
.admin-card{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:26px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.admin-card h3{ font-family:'Bebas Neue'; font-size:22px; margin-bottom:18px; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th{ text-align:left; font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--mist-dim); padding:10px 8px; border-bottom:1px solid var(--line); }
.admin-table td{ padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-thumb{ width:38px; height:38px; border-radius:4px; object-fit:cover; background:var(--panel-2); }
.admin-del{ background:none; border:1px solid rgba(0,0,0,0.35); color:var(--magenta-2); font-size:11px; font-family:'JetBrains Mono'; padding:6px 10px; border-radius:3px; }
.admin-del:hover{ background:rgba(0,0,0,0.08); }
.admin-empty{ color:var(--mist-dim); font-size:13px; padding:20px 0; text-align:center; }

/* =========================================================
   MOBILE NAV (dark curtain panel for contrast against the light site)
   ========================================================= */
.navburger{
  display:none; position:relative; background:#fff; border:1px solid var(--line); color:var(--paper);
  width:42px; height:42px; border-radius:var(--radius); flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .2s ease;
}
.navburger:hover{ border-color:var(--violet-2); }
.burger-line{ width:18px; height:2px; background:var(--paper); border-radius:2px; transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.navburger.active .burger-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navburger.active .burger-line:nth-child(2){ opacity:0; transform:scaleX(0); }
.navburger.active .burger-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:880px){ .navburger{ display:flex; } }

.mobile-nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); z-index:69;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.mobile-nav-overlay.open{ opacity:1; pointer-events:auto; }

.mobile-nav{
  position:fixed; top:0; left:0; right:0; height:80vh; z-index:70;
  background:
    radial-gradient(520px 320px at 90% 0%, rgba(0,0,0,0.28), transparent 60%),
    radial-gradient(420px 300px at 0% 100%, rgba(0,0,0,0.20), transparent 60%),
    #0a0a0a;
  border-bottom:1px solid var(--dline);
  border-radius:0 0 26px 26px;
  box-shadow:0 40px 80px rgba(0,0,0,0.45);
  display:flex; flex-direction:column; gap:2px;
  padding:24px 28px 30px;
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.16,.9,.24,1);
  overflow-y:auto;
}
.mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--dline); }
.mobile-nav-logo{ height:32px; width:auto; border-radius:4px; background:#fff; padding:3px; }
.mobile-nav-close{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid var(--dline); color:var(--dtext);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.mobile-nav-close:hover{ border-color:var(--magenta-2); color:#ffffff; transform:rotate(90deg); }
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav a{
  padding:16px 6px; border-bottom:1px solid var(--dline); font-size:18px; font-weight:700;
  color:var(--dtext); font-family:'Bebas Neue'; letter-spacing:0.03em;
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateY(16px);
  transition:opacity .4s ease, transform .4s ease, color .2s ease;
}
.mobile-nav a::after{ content:"→"; font-family:'Inter'; font-size:15px; color:var(--dmist-dim); transition:transform .2s ease, color .2s ease; }
.mobile-nav a:hover{ color:#e0e0e0; }
.mobile-nav a:hover::after{ transform:translateX(4px); color:#e0e0e0; }
.mobile-nav.open a{ opacity:1; transform:translateY(0); }
.mobile-nav.open a:nth-of-type(1){ transition-delay:.08s; }
.mobile-nav.open a:nth-of-type(2){ transition-delay:.14s; }
.mobile-nav.open a:nth-of-type(3){ transition-delay:.20s; }
.mobile-nav.open a:nth-of-type(4){ transition-delay:.26s; }
.mobile-nav.open a:nth-of-type(5){ transition-delay:.32s; }
.mobile-nav.open a:nth-of-type(6){ transition-delay:.38s; }
.mobile-nav a.mn-cta{
  margin-top:20px; border:none; text-align:center; justify-content:center; border-radius:var(--radius);
  background:linear-gradient(120deg,var(--violet-2),var(--magenta-2)); color:#fff;
  font-family:'JetBrains Mono'; text-transform:uppercase; font-size:13px; letter-spacing:0.08em; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.mobile-nav a.mn-cta::after{ content:""; }
@media (min-width:881px){ .mobile-nav, .mobile-nav-overlay{ display:none; } }

/* =========================================================
   HERO — entrance + ambient animation
   ========================================================= */
@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
@keyframes blobDrift{ 0%{ transform:translate(0,0);} 50%{ transform:translate(-16px,12px);} 100%{ transform:translate(0,0);} }
@keyframes floatSlow{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes shineSweep{ 0%{ transform:translateX(-130%) rotate(8deg);} 45%,100%{ transform:translateX(130%) rotate(8deg);} }
@keyframes ghostPulse{ 0%,100%{ -webkit-text-stroke-color:rgba(0,0,0,0.06);} 50%{ -webkit-text-stroke-color:rgba(0,0,0,0.14);} }

.hero::before{ animation: blobDrift 14s ease-in-out infinite; }
.hero-ghost{ animation: ghostfloat 9s ease-in-out infinite, ghostPulse 5s ease-in-out infinite; }
.hero > .wrap > div:first-child > .eyebrow{ animation: heroFadeUp .7s ease both; }
.hero h1{ animation: heroFadeUp .8s ease .08s both; }
.hero p.lead{ animation: heroFadeUp .8s ease .18s both; }
.hero-ctas{ animation: heroFadeUp .8s ease .28s both; }
.hero-facts{ animation: heroFadeUp .8s ease .38s both; }
.hero-visual{ animation: heroFadeUp 1s ease .2s both, floatSlow 6.5s ease-in-out 1.3s infinite; position:relative; }
.hero-visual::after{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%);
  animation: shineSweep 3.6s ease-in-out 1.4s infinite;
}

/* =========================================================
   RESPONSIVE — fine-tuned mobile breakpoints
   ========================================================= */
@media (max-width:980px){
  .section{ padding:64px 0; }
  .hero{ padding:64px 0 48px; }
  .customizer{
    grid-template-columns:1fr; display:flex; flex-direction:column;
    height:100vh; max-height:100vh;
  }
  .stage{ flex:0 0 42%; min-height:0; height:42%; border-right:none; border-bottom:1px solid var(--line); }
  .panel{ flex:1 1 auto; min-height:0; max-height:none; }
}
@media (max-width:768px){
  .wrap{ padding:0 20px; }
  .nav{ padding:12px 20px; }
  .hero h1{ font-size:clamp(38px,10vw,58px); }
  .section-head{ margin-bottom:32px; }
  .section-head h2{ font-size:clamp(28px,7vw,40px); }
  .panel{ padding:26px 22px; }
  .bulk-box{ padding:34px 24px; flex-direction:column; align-items:flex-start; }
  .gallery-box img{ min-height:220px; }
  .gallery-copy{ padding:30px 26px; }
}
@media (max-width:520px){
  .wrap{ padding:0 16px; }
  .hero-facts{ gap:16px; }
  .hero-facts div{ max-width:none; flex:1 1 100%; }
  .row2{ grid-template-columns:1fr; }
  .stage{ flex-basis:36%; height:36%; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .how-step{ padding:30px 24px; }
  .price-line .amt{ font-size:21px; }
  .btn{ padding:14px 22px; font-size:12px; }
}
* { min-width:0; } /* prevents grid/flex children forcing horizontal overflow */
html, body{ max-width:100%; overflow-x:hidden; }

/* =========================================================
   PAGE ENTRANCE + micro-interactions
   ========================================================= */
body{ animation: pageFadeIn .5s ease both; }
@keyframes pageFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.btn-primary, .btn-buynow{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-buynow::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.btn-primary:hover::after, .btn-buynow:hover::after{ transform:translateX(120%); }
.navlinks a{ position:relative; }
.navlinks a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:linear-gradient(120deg,var(--violet-2),var(--magenta-2)); transition:right .25s ease;
}
.navlinks a:hover::after{ right:0; }

/* =========================================================
   ABOUT / CONTACT / BLOG — shared page components
   ========================================================= */
.page-hero{ position:relative; padding:64px 0 56px; border-bottom:1px solid var(--line); overflow:hidden; background:var(--ink-2);
  background-image: radial-gradient(600px 360px at 85% 0%, rgba(0,0,0,0.09), transparent 60%),
              radial-gradient(500px 400px at 5% 100%, rgba(0,0,0,0.07), transparent 60%); }
.page-hero h1{ font-size:clamp(38px,6vw,64px); margin-top:14px; animation:heroFadeUp .7s ease .05s both; }
.page-hero p{ color:var(--mist); max-width:520px; margin-top:16px; font-size:16px; line-height:1.65; animation:heroFadeUp .7s ease .15s both; }
.page-hero .eyebrow{ animation:heroFadeUp .6s ease both; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:20px; }
@media (max-width:768px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-cell{ background:#fff; padding:30px 24px; text-align:left; }
.stat-cell .num{ font-family:'Bebas Neue'; font-size:44px; color:var(--magenta-2); }
.stat-cell span{ display:block; font-family:'JetBrains Mono'; font-size:11px; color:var(--mist-dim); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:28px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.value-card h3{ font-family:'Inter'; font-weight:700; font-size:18px; margin:12px 0 8px; color:var(--paper); }
.value-card p{ color:var(--mist); font-size:14.5px; line-height:1.6; margin:0; }
.value-card .ic{ width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg,var(--violet),var(--magenta)); display:flex; align-items:center; justify-content:center; color:#fff; }

.about-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:860px){ .about-split{ grid-template-columns:1fr; } }
.about-split img{ border-radius:6px; border:1px solid var(--line); width:100%; box-shadow:0 16px 40px rgba(0,0,0,0.08); }
.about-split p{ color:var(--mist); font-size:15.5px; line-height:1.75; margin-top:16px; }

.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,0.06); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-side{ padding:38px 34px; background:var(--panel-2); border-right:1px solid var(--line); }
@media (max-width:900px){ .contact-side{ border-right:none; border-bottom:1px solid var(--line); } }
.contact-item{ display:flex; gap:14px; margin-bottom:26px; }
.contact-item .ic{ width:38px; height:38px; flex-shrink:0; border-radius:8px; background:rgba(0,0,0,0.10); border:1px solid rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; color:var(--violet-2); }
.contact-item h4{ font-size:13.5px; font-weight:700; margin:0 0 4px; color:var(--paper); }
.contact-item p, .contact-item a{ font-size:13.5px; color:var(--mist); display:block; }
.contact-item a:hover{ color:var(--violet-2); }
.contact-form{ padding:38px 34px; background:#fff; }
.contact-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .contact-form .row2{ grid-template-columns:1fr; } }
.contact-form textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  padding:12px 13px; border-radius:var(--radius); font-family:'Inter'; font-size:14px; resize:vertical; min-height:120px;
}
.contact-form textarea:focus{ border-color:var(--violet-2); outline:none; }
.form-note{ font-size:12px; color:var(--mist-dim); margin-top:10px; font-family:'JetBrains Mono'; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-grid{ grid-template-columns:1fr; } }
.blog-card{ background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.blog-card:hover{ transform:translateY(-5px); border-color:rgba(0,0,0,0.35); box-shadow:0 16px 32px rgba(0,0,0,0.1); }
.blog-thumb{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--violet),var(--magenta)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.blog-thumb span{ font-family:'Bebas Neue'; font-size:52px; color:rgba(255,255,255,0.9); }
.blog-card-body{ padding:20px 22px 24px; }
.blog-cat{ font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--magenta-2); }
.blog-card-body h3{ font-family:'Inter'; font-weight:700; font-size:16.5px; margin:10px 0 8px; line-height:1.35; color:var(--paper); }
.blog-card-body p{ color:var(--mist); font-size:13.5px; line-height:1.6; margin:0; }
.blog-meta{ margin-top:14px; font-family:'JetBrains Mono'; font-size:11px; color:var(--mist-dim); }

/* =========================================================
   PRODUCT LANDING PAGE
   ========================================================= */
.breadcrumb{ font-size:13px; color:var(--mist-dim); font-family:'JetBrains Mono'; }
.breadcrumb a{ color:var(--mist); }
.breadcrumb a:hover{ color:var(--paper); }
.breadcrumb .bc-sep{ margin:0 8px; color:var(--mist-dim); }
.breadcrumb .bc-current{ color:var(--paper); font-weight:600; }
.pd-loading{ padding:60px 0; text-align:center; color:var(--mist); }

.pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start; }
@media (max-width:900px){ .pd-grid{ grid-template-columns:1fr; gap:32px; } }
.pd-gallery{ position:sticky; top:96px; }
@media (max-width:900px){ .pd-gallery{ position:static; } }
.pd-main-image{
  aspect-ratio:1/1; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--ink-2);
  display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px rgba(0,0,0,0.08);
}
.pd-main-image img{ width:100%; height:100%; object-fit:cover; }
.pd-main-image svg{ padding:40px; }

.pd-title{ font-size:clamp(32px,4.4vw,50px); margin-top:4px; }
.pd-price{ font-family:'JetBrains Mono'; font-weight:700; font-size:26px; color:var(--paper); margin-top:12px; }
.pd-desc{ color:var(--mist); font-size:15px; line-height:1.7; margin-top:20px; max-width:480px; }
.pd-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pd-badges span{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--mist); border:1px solid var(--line); padding:7px 12px; border-radius:20px; background:var(--panel-2); }
.pd-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.pd-actions .btn{ flex:1; min-width:180px; text-align:center; }













/* =========================================================
   MH FASHION CITY — ADMIN MOBILE RESPONSIVE FIX
   ========================================================= */

/* Prevent horizontal page overflow */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}


/* =========================================================
   ADMIN BASE
   ========================================================= */

.admin-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.admin-grid {
  width: 100%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .admin-shell {
    width: min(100% - 28px, 760px);
  }

  .admin-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .admin-card {
    width: 100%;
    min-width: 0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  /* -----------------------------------------
     General
     ----------------------------------------- */

  body {
    overflow-x: hidden;
  }


  /* -----------------------------------------
     Header
     ----------------------------------------- */

  header.site {
    width: 100%;
  }

  header.site .nav {
    width: 100%;
    min-height: 64px;
    padding: 10px 16px;
    gap: 12px;
  }

  header.site .logo img {
    width: 42px;
    height: 42px;
    object-fit: cover;
  }

  .navlinks {
    min-width: 0;
    flex: 1;
  }

  .navlinks a {
    font-size: 12px;
    white-space: nowrap;
  }


  /* -----------------------------------------
     Admin container
     ----------------------------------------- */

  .admin-shell {
    width: calc(100% - 24px);
    max-width: none;
    margin: 0 auto;
    padding: 20px 0 40px;
  }


  /* -----------------------------------------
     Admin heading
     ----------------------------------------- */

  .admin-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .admin-head h2 {
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1;
    margin-top: 6px !important;
  }

  .admin-head .btn {
    width: 100%;
  }


  /* -----------------------------------------
     Admin notice
     ----------------------------------------- */

  .admin-note {
    font-size: 13px;
    line-height: 1.55;
    padding: 14px;
    margin: 16px 0;
  }


  /* -----------------------------------------
     Grid
     ----------------------------------------- */

  .admin-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }


  /* -----------------------------------------
     Cards
     ----------------------------------------- */

  .admin-card {
    width: 100%;
    min-width: 0;
    padding: 18px;
    box-sizing: border-box;
  }

  .admin-card h3 {
    font-size: 22px;
    margin-bottom: 18px;
  }


  /* -----------------------------------------
     Form
     ----------------------------------------- */

  .field {
    width: 100%;
    min-width: 0;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }


  /* -----------------------------------------
     Upload
     ----------------------------------------- */

  .upload {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .upload-btn {
    flex-shrink: 0;
  }

  .upload-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  /* -----------------------------------------
     Add product button
     ----------------------------------------- */

  #admin-form .btn-primary {
    width: 100% !important;
    min-height: 48px;
  }


  /* =====================================================
     PRODUCT TABLE → MOBILE CARDS
     ===================================================== */

  .admin-table {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: auto;
  }


  /* Hide desktop table heading */

  .admin-table thead {
    display: none;
  }


  /* Each product becomes a card */

  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .admin-table tr {
    position: relative;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    background: var(--panel, #fff);
  }


  /* Image */

  .admin-table td:first-child {
    width: 64px;
    padding: 0;
    margin-bottom: 8px;
  }

  .admin-table .admin-thumb {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 7px;
    object-fit: cover;
  }


  /* Product name */

  .admin-table td:nth-child(2) {
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }


  /* Price */

  .admin-table td:nth-child(3) {
    padding: 5px 0 0;
    font-size: 14px;
    font-weight: 600;
  }


  /* Tag */

  .admin-table td:nth-child(4) {
    padding: 4px 0 0;
    font-size: 12px;
    opacity: 0.75;
  }


  /* Delete button */

  .admin-table td:last-child {
    padding: 10px 0 0;
  }

  .admin-table .admin-del {
    width: 100%;
    min-height: 40px;
  }


  /* Empty state */

  .admin-empty {
    font-size: 13px;
    line-height: 1.5;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .admin-shell {
    width: calc(100% - 16px);
  }

  .admin-card {
    padding: 14px;
  }

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

  .admin-head h2 {
    font-size: 30px !important;
  }

  .admin-table .admin-thumb {
    width: 58px;
    height: 58px;
  }

}













/* =========================================================
   ADMIN EDIT / DELETE ACTIONS
   ========================================================= */

.admin-actions {
  white-space: nowrap;
}

.admin-edit,
.admin-del {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.admin-edit:hover,
.admin-del:hover {
  transform: translateY(-1px);
}

.admin-edit {
  margin-right: 5px;
}

.admin-edit:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.admin-del:hover {
  background: #b00020;
  color: #fff;
  border-color: #b00020;
}


/* =========================================================
   SAVE / EDIT MODE
   ========================================================= */

.admin-save-mode {
  background: #111 !important;
}

.admin-cancel {
  width: 100%;
  margin-top: 8px;
  min-height: 46px;
}


/* =========================================================
   MOBILE ACTION BUTTONS
   ========================================================= */

@media (max-width: 700px) {

  .admin-actions {
    display: flex !important;
    gap: 8px;
    width: 100% !important;
  }

  .admin-actions .admin-edit,
  .admin-actions .admin-del {
    flex: 1;
    width: auto;
    margin: 0;
    min-height: 42px;
  }

}




/*Additional Css my me */
p.lead.hero-video-lead1{
    color:#fcfcfc;
}