/* ============ TOKENS ============ */
:root{
  --black:#0a0a0c;
  --charcoal:#141419;
  --charcoal-2:#1c1d24;
  --charcoal-3:#24252d;
  --gold:#c9a227;
  --gold-bright:#f0ce68;
  --gold-dim:#8a6f1e;
  --chrome:#b8c0c8;
  --chrome-dark:#6e7580;
  --ember:#a5312f;
  --ember-bright:#d1483f;
  --white:#f5f3ee;
  --green:#4c8a5e;
  --display:'Rajdhani',sans-serif;
  --body:'Manrope',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:2px;
  --shadow-gold: 0 0 0 1px rgba(201,162,39,.25), 0 8px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}
a{color:inherit; text-decoration:none;}
button{font-family:var(--body); cursor:pointer;}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px;}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:.02em; text-transform:uppercase; font-weight:700;}
.mono{font-family:var(--mono);}
.wrap{max-width:1320px; margin:0 auto; padding:0 32px;}
img{max-width:100%; display:block;}

/* chrome pinstripe divider — signature texture */
.pinstripe{
  height:3px; width:100%;
  background:linear-gradient(90deg, transparent 0%, var(--chrome-dark) 8%, var(--chrome) 20%, var(--gold-bright) 50%, var(--chrome) 80%, var(--chrome-dark) 92%, transparent 100%);
  opacity:.55;
}

/* ============ LOADER — speedometer signature ============ */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--black);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .8s ease, visibility .8s ease;
}
#loader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.gauge-wrap{position:relative; width:260px; height:260px;}
.gauge-wrap svg{width:100%; height:100%;}
.gauge-needle{
  transform-origin:130px 130px;
  transform:rotate(-120deg);
  animation:sweep 2.6s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes sweep{
  0%{transform:rotate(-120deg);}
  70%{transform:rotate(125deg);}
  85%{transform:rotate(95deg);}
  100%{transform:rotate(112deg);}
}
.gauge-center-text{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--mono); color:var(--gold-bright);
}
.gauge-center-text .rpm{font-size:11px; letter-spacing:.3em; color:var(--chrome-dark);}
.loader-brand{font-family:var(--display); font-size:clamp(28px,5vw,44px); letter-spacing:.12em; color:var(--white); margin-top:28px; text-transform:uppercase;}
.loader-brand span{color:var(--gold-bright);}
.loader-tagline{font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-top:8px; opacity:0; animation:fadeIn .8s ease forwards .2s;}
.loader-msg{
  font-family:var(--body); font-size:14px; color:var(--chrome); max-width:480px; text-align:center; margin-top:10px; opacity:0; line-height:1.6;
  animation:fadeIn 1s ease forwards .4s;
}
@keyframes fadeIn{to{opacity:1;}}
.loader-bar{width:200px; height:2px; background:var(--charcoal-3); margin-top:26px; position:relative; overflow:hidden;}
.loader-bar::after{
  content:''; position:absolute; left:-40%; top:0; height:100%; width:40%;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  animation:loadbar 2.6s ease forwards;
}
@keyframes loadbar{ to{left:110%;} }

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:500;
  background:rgba(10,10,12,.92);  backdrop-filter:none;
    -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(201,162,39,.18);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 32px; max-width:1320px; margin:0 auto;
}
.brand-block{display:flex; flex-direction:column; opacity:0; transform:translateY(8px); transition:opacity .7s ease, transform .7s ease;}
.brand-block.show{opacity:1; transform:translateY(0);}
.brand-logo{
  font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:.08em;
  color:var(--white); display:flex; align-items:center; gap:10px;
}
.brand-logo .mark{
  width:34px; height:34px; border:2px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold-bright); font-size:15px;
  background:conic-gradient(from 180deg, var(--charcoal-2), var(--gold-dim), var(--charcoal-2));
}
.brand-logo span{color:var(--gold-bright);}
.brand-tagline{font-size:10.5px; letter-spacing:.14em; color:var(--chrome-dark); text-transform:uppercase; margin-top:2px; font-family:var(--mono);}

nav.mainnav{display:flex; gap:26px; flex:1; justify-content:center;}
nav.mainnav a{
  font-family:var(--display); font-size:14.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--chrome); padding:6px 2px; position:relative; font-weight:600;
}
nav.mainnav a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--gold-bright); transition:width .25s ease;
}
nav.mainnav a:hover{color:var(--white);}
nav.mainnav a:hover::after{width:100%;}

.icon-row{display:flex; align-items:center; gap:16px;position: relative; z-index: 1000;}
.icon-btn{
  position:relative; width:38px; height:38px; border-radius:50%; border:1px solid rgba(184,192,200,.25);
  background:var(--charcoal-2); display:flex; align-items:center; justify-content:center; color:var(--chrome);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.icon-btn:hover{border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px);}
.icon-btn .badge{
  position:absolute; top:-4px; right:-4px; background:var(--ember-bright); color:#fff; font-size:9.5px;
  font-family:var(--mono); border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center;
}
.hamburger{display:none; color:var(--chrome); background:none; border:none;}

/* search row */
.search-row{
  position: relative; z-index: 1;
  border-top:1px solid rgba(255,255,255,.05);
  padding:10px 32px; max-width:1320px; margin:0 auto; display:flex; gap:12px; align-items:center;
}
.search-box{
  flex:1; display:flex; align-items:center; gap:10px; background:var(--charcoal-2);
  border:1px solid rgba(184,192,200,.18); border-radius:22px; padding:9px 16px; position:relative;
}
.search-box input{
  flex:1; background:none; border:none; color:var(--white); font-size:14px; font-family:var(--body);
}
.search-box input:focus{outline:none;}
.search-box svg{color:var(--chrome-dark); flex-shrink:0;}
.search-actions{display:flex; gap:8px;}
.search-actions button{
  background:var(--charcoal-3); border:1px solid rgba(201,162,39,.3); color:var(--gold-bright);
  border-radius:18px; padding:8px 12px; display:flex; align-items:center; gap:6px; font-size:12px; font-family:var(--display); letter-spacing:.04em; text-transform:uppercase;
}
.search-actions button:hover{background:var(--gold); color:var(--black);}
.autocomplete{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--charcoal-2); border:1px solid rgba(201,162,39,.25);
  border-radius:10px; overflow:hidden; display:none; z-index:50; box-shadow:var(--shadow-gold);
}
.autocomplete.show{display:block;}
.autocomplete div{padding:10px 16px; font-size:13.5px; color:var(--chrome); border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer;}
.autocomplete div:hover{background:var(--charcoal-3); color:var(--gold-bright);}

/* ============ HERO ============ */
.hero{
  position:relative; padding:90px 32px 70px; text-align:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% -10%, rgba(201,162,39,.14), transparent 60%);
}
.hero .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.35em; color:var(--gold); text-transform:uppercase;}
.hero h1{font-size:clamp(34px,6vw,64px); line-height:1.05; margin:16px auto 20px; max-width:820px;}
.hero h1 em{font-style:normal; color:var(--gold-bright);}
.hero p.slogan{font-family:var(--mono); font-size:15px; color:var(--chrome); max-width:560px; margin:0 auto 30px;}
.hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.hero-video-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  z-index:0; pointer-events:none;
}

.hero-video-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,162,39,.18), transparent 60%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.72) 55%, rgba(10,10,12,.92) 100%);
}
.hero-content{position:relative; z-index:2;}

.btn{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-weight:700; font-size:14px;
  padding:14px 30px; border-radius:2px; border:none; transition:transform .2s ease, box-shadow .2s ease;
}
.btn-gold{background:linear-gradient(135deg, var(--gold-bright), var(--gold)); color:var(--black);}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(201,162,39,.35);}
.btn-outline{background:none; border:1px solid var(--chrome-dark); color:var(--white);}
.btn-outline:hover{border-color:var(--gold-bright); color:var(--gold-bright);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px; font-size:12px;}

/* ============ SECTION HEADERS ============ */
section{padding:70px 0;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:14px;}
.sec-head .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.28em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:8px;}
.sec-head h2{font-size:clamp(24px,3.4vw,36px);}
.sec-head p{color:var(--chrome-dark); font-size:14px; max-width:460px;}
.viewall{font-family:var(--display); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-bright); border-bottom:1px solid var(--gold-dim); padding-bottom:2px;}

/* ============ CATEGORY BADGE CARDS ============ */
.cat-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px;
}
.cat-card{
  position:relative; background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  border:1px solid rgba(184,192,200,.14); border-radius:6px; padding:22px 16px 18px; text-align:center;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; cursor:pointer;
}
.cat-card::before, .cat-card::after{
  content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--chrome-dark); opacity:.6;
}
.cat-card::before{top:8px; left:8px;}
.cat-card::after{top:8px; right:8px;}
.cat-card .rivet-b1, .cat-card .rivet-b2{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--chrome-dark); opacity:.6; bottom:8px;}
.cat-card .rivet-b1{left:8px;} .cat-card .rivet-b2{right:8px;}
.cat-card:hover{transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--shadow-gold);}
.cat-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--charcoal-3), var(--charcoal)); border:1px solid rgba(201,162,39,.3); color:var(--gold-bright);
}
.cat-card h4{font-size:14.5px; letter-spacing:.03em;}
.cat-card .sub{font-size:11px; color:var(--chrome-dark); margin-top:4px; font-family:var(--mono);}

/* filter chips */
.chip-row{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 6px;}
.chip{
  padding:8px 16px; border-radius:20px; border:1px solid rgba(184,192,200,.22); background:var(--charcoal-2);
  font-size:12.5px; font-family:var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--chrome);
  transition:all .2s ease;
}
.chip.active, .chip:hover{background:var(--gold); color:var(--black); border-color:var(--gold);}

/* ============ PRODUCT GRID ============ */
.prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px;}
.prod-card{
  background:var(--charcoal); border:1px solid rgba(184,192,200,.12); border-radius:6px; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease; display:flex; flex-direction:column;
}
.prod-card:hover{transform:translateY(-5px); border-color:rgba(201,162,39,.4);}
.prod-media{
    position: relative;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#111;
}

.prod-media img{
  
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.prod-card:hover .product-image{
    transform:scale(1.08);
}

.product-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    position:relative;
    z-index:1;
    display:block;
}

/*.prod-media{
  aspect-ratio:1/1; position:relative; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 30%, var(--charcoal-3), var(--charcoal)); overflow:hidden; cursor:pointer;
}
.prod-media svg{width:56%; height:56%; color:var(--chrome-dark); transition:transform .4s ease, color .3s ease;}
.prod-card:hover .prod-media svg{transform:scale(1.08) rotate(-2deg); color:var(--gold-bright);}*/
.prod-tag{
  
    position:absolute;
    top:12px;
    left:12px;
    z-index:20;

    padding:6px 12px;
    border-radius:20px;

    background:linear-gradient(135deg,#c9a227,#f0ce68);
    color:#111;

    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;

    box-shadow:0 4px 12px rgba(0,0,0,.35);
} 

.prod-tag.new{background:linear-gradient(135deg,#2e7d32,#4caf50);
    color:#fff;}
.wish-mini{
  position:absolute; top:10px; right:10px; z-index: 10; ;width:34px; height:34px; border-radius:50%;  background:rgba(0,0,0,.65);;
  display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,.2);
}
.wish-mini:hover{color:var(--ember-bright);}
.prod-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.prod-cat{font-family:var(--mono); font-size:10.5px; color:var(--chrome-dark); text-transform:uppercase; letter-spacing:.08em;}
.prod-name{font-size:15px; font-weight:600; font-family:var(--body); line-height:1.3;}
.prod-rating{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--gold-bright);}
.prod-rating span{color:var(--chrome-dark); font-family:var(--mono); font-size:11px;}
.prod-price-row{display:flex; align-items:baseline; gap:8px; margin-top:2px;}
.prod-price{font-family:var(--mono); font-weight:600; font-size:17px; color:var(--white);}
.prod-mrp{font-family:var(--mono); font-size:12.5px; color:var(--chrome-dark); text-decoration:line-through;}
.prod-off{font-family:var(--mono); font-size:11.5px; color:var(--green);}
.prod-actions{display:flex; gap:8px; margin-top:8px;}
.prod-actions .btn{flex:1; padding:9px 8px; font-size:11.5px;}
.stock-line{font-size:11px; font-family:var(--mono); color:var(--chrome-dark);}
.stock-line.low{color:var(--ember-bright);}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.about-visual{
  aspect-ratio:4/3; border-radius:8px; border:1px solid rgba(201,162,39,.25);
  background:linear-gradient(160deg, var(--charcoal-2), var(--black)); display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.about-visual svg{width:52%; opacity:.85; color:var(--gold-bright);}
.about-visual::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 40%, rgba(201,162,39,.08) 50%, transparent 60%);}
.about-copy p{color:var(--chrome); font-size:14.5px; line-height:1.75; margin-bottom:16px;}
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px;}
.pillar{background:var(--charcoal-2); border:1px solid rgba(255,255,255,.08); border-left:2px solid var(--gold); padding:16px 18px; border-radius:2px;}
.pillar h4{font-size:14px; margin-bottom:6px;}
.pillar p{font-size:12.5px; color:var(--chrome-dark); line-height:1.6;}

/* ============ REVIEWS ============ */
.review-layout{display:grid; grid-template-columns:1.3fr .9fr; gap:40px;}
.review-card{background:var(--charcoal); border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:20px; margin-bottom:16px;}
.review-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.reviewer{font-weight:700; font-size:14px;}
.review-stars{color:var(--gold-bright); font-size:13px;}
.review-text{color:var(--chrome); font-size:13.5px; line-height:1.6;}
.review-photos{display:flex; gap:8px; margin-top:10px;}
.review-photos div{width:52px; height:52px; border-radius:4px; background:var(--charcoal-3); border:1px solid rgba(255,255,255,.1);}
.write-review{background:var(--charcoal); border:1px solid rgba(201,162,39,.25); border-radius:6px; padding:22px;}
.write-review h3{font-size:16px; margin-bottom:14px;}
.star-picker{display:flex; gap:6px; font-size:22px; margin-bottom:14px; cursor:pointer;}
.star-picker span{color:var(--chrome-dark); transition:color .15s ease;}
.star-picker span.active{color:var(--gold-bright);}
.write-review input, .write-review textarea{
  width:100%; background:var(--charcoal-2); border:1px solid rgba(255,255,255,.12); color:var(--white);
  padding:10px 12px; border-radius:4px; font-family:var(--body); font-size:13px; margin-bottom:12px;
}
.write-review textarea{resize:vertical; min-height:80px;}
.reel-row{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; margin-top:18px;}

.reel .playbtn{
 position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);

    color: white;

    z-index: 10;

    cursor: pointer;}
.reel.playing{border-color:var(--gold);}
.reel .playbtn svg{width: 22px;
    height: 22px;}
.reel .capt{position:absolute; bottom:8px; left:8px; right:8px; font-size:10px; color:var(--chrome); font-family:var(--mono);}

/* ============ FOOTER ============ */
footer{background:var(--charcoal); border-top:1px solid rgba(201,162,39,.2); padding-top:56px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:30px; padding-bottom:40px;}
.footer-grid h5{font-family:var(--display); font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:16px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a, .footer-grid p{color:var(--chrome-dark); font-size:13px; line-height:1.7;}
.footer-grid a:hover{color:var(--gold-bright);}
.map-box{
 width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;  
}
.map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.newsletter{display:flex; gap:0; margin-top:10px;}
.newsletter input{flex:1; background:var(--charcoal-2); border:1px solid rgba(255,255,255,.15); border-right:none; padding:10px 12px; color:var(--white); font-size:12.5px; border-radius:4px 0 0 4px;}
.newsletter button{background:var(--gold); color:var(--black); border:none; padding:0 16px; border-radius:0 4px 4px 0; font-family:var(--display); font-weight:700; font-size:12px; text-transform:uppercase;}
.insta-follow{display:inline-flex; align-items:center; gap:8px; margin-top:14px; background:linear-gradient(135deg,#8a3ab9,#cd486b,#fbad50); padding:9px 16px; border-radius:20px; font-size:12px; font-weight:700; color:#fff;}
.bottom-bar{border-top:1px solid rgba(255,255,255,.08); padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--chrome-dark);}
.bottom-bar .pay-icons{display:flex; gap:10px; font-family:var(--mono); font-size:11px;}
.accordion-item{border-bottom:1px solid rgba(255,255,255,.06);}
.accordion-item summary{cursor:pointer; padding:6px 0; font-size:13px; color:var(--chrome); list-style:none;}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item p{font-size:12px; color:var(--chrome-dark); padding-bottom:10px; line-height:1.6;}

/* ============ MODALS / DRAWERS ============ */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px); z-index:800; display:none;}
.overlay.show{display:block;}
.drawer{
  position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100%; background:var(--charcoal); z-index:900;
  transition:right .35s cubic-bezier(.2,.9,.2,1); display:flex; flex-direction:column; border-left:1px solid rgba(201,162,39,.25);
}
.drawer.show{right:0;}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.08);}
.drawer-head h3{font-size:17px;}
.drawer-body{flex:1; overflow-y:auto; padding:18px 22px;}
.drawer-foot{padding:18px 22px; border-top:1px solid rgba(255,255,255,.08);}
.closebtn{background:none; border:none; color:var(--chrome); font-size:20px;}
.closebtn:hover{color:var(--gold-bright);}

.cart-line{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06);}
.cart-thumb{width:60px; height:60px; border-radius:4px; background:var(--charcoal-3); display:flex; align-items:center; justify-content:center; color:var(--chrome-dark); flex-shrink:0;}
.cart-thumb svg{width:60%;}
.cart-info{flex:1;}
.cart-info h5{font-size:13.5px; margin-bottom:4px;}
.qty-row{display:flex; align-items:center; gap:10px; margin-top:6px;}
.qty-row button{width:22px; height:22px; background:var(--charcoal-3); border:1px solid rgba(255,255,255,.15); color:var(--white); border-radius:3px; font-size:13px;}
.remove-line{font-size:11px; color:var(--ember-bright); margin-top:6px; display:inline-block;}
.coupon-row{display:flex; gap:8px; margin-bottom:14px;}
.coupon-row input{flex:1; background:var(--charcoal-2); border:1px solid rgba(255,255,255,.15); color:var(--white); padding:9px 12px; border-radius:4px; font-size:12.5px;}
.sum-line{display:flex; justify-content:space-between; font-size:13px; color:var(--chrome); margin-bottom:8px;}
.sum-line.total{font-size:16px; font-weight:700; color:var(--white); border-top:1px solid rgba(255,255,255,.1); padding-top:10px; margin-top:6px;}

.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); width:920px; max-width:94vw; max-height:88vh; overflow-y:auto;
  background:var(--charcoal); border:1px solid rgba(201,162,39,.3); border-radius:8px; z-index:900; display:none; box-shadow:var(--shadow-gold);
}
.modal.show{display:block;visibility: visible !important;opacity: 1 !important;}
.modal-close{position:sticky; top:14px; float:right; margin-right:14px; background:var(--charcoal-3); border:1px solid rgba(255,255,255,.15); color:var(--white); width:32px; height:32px; border-radius:50%; z-index:5;}
.modal-inner{padding:36px 40px 40px;}
.small-modal{width:440px;}

.pd-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:36px;}
.pd-gallery-main{aspect-ratio:1/1; background:radial-gradient(circle at 35% 30%, var(--charcoal-3), var(--black)); border-radius:6px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.08); overflow:hidden; cursor:zoom-in;}
.pd-gallery-main svg{width:48%; color:var(--gold-bright); transition:transform .3s ease;}
.pd-gallery-main:hover svg{transform:scale(1.35);}
.pd-thumbs{display:flex; gap:10px; margin-top:12px;}
.pd-thumbs div{width:56px; height:56px; border-radius:4px; background:var(--charcoal-3); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--chrome-dark); cursor:pointer;}
.pd-thumbs div.active{border-color:var(--gold);}
.pd-video-btn{margin-top:12px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--gold-bright); font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;}
.pd-cat{font-family:var(--mono); font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:.1em;}
.pd-title{font-size:24px; margin:8px 0 10px;}
.pd-price-row{display:flex; align-items:baseline; gap:12px; margin:14px 0;}
.pd-price{font-family:var(--mono); font-size:28px; font-weight:700;}
.variant-group{margin:16px 0;}
.variant-group label{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--chrome-dark); font-family:var(--display); display:block; margin-bottom:8px;}
.variant-opts{display:flex; gap:8px; flex-wrap:wrap;}
.variant-opts button{padding:8px 14px; border-radius:4px; border:1px solid rgba(255,255,255,.18); background:var(--charcoal-2); color:var(--chrome); font-size:12.5px;}
.variant-opts button.active{border-color:var(--gold); background:var(--gold); color:var(--black); font-weight:700;}
.pd-qty-actions{display:flex; gap:10px; margin-top:20px; align-items:center;}
.tabs{display:flex; gap:24px; border-bottom:1px solid rgba(255,255,255,.1); margin-top:30px;}
.tab-btn{background:none; border:none; color:var(--chrome-dark); padding:10px 0; font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; border-bottom:2px solid transparent;}
.tab-btn.active{color:var(--gold-bright); border-color:var(--gold-bright);}
.tab-panel{display:none; padding:20px 0; font-size:13.5px; color:var(--chrome); line-height:1.7;}
.tab-panel.active{display:block;}
.spec-row{display:grid;

    /* fixed label column + flexible value column */
    grid-template-columns: 150px minmax(0, 1fr);

    column-gap:20px;
    align-items:start;

    padding:10px 0;

    border-bottom:
        1px solid rgba(255,255,255,.05);

    font-size:13px;}
.spec-row span:first-child{color:var(--chrome-dark); font-family:var(--mono);}
.delivery-line{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--chrome); margin-top:12px;}

.auth-tabs{display:flex; margin-bottom:20px; border:1px solid rgba(255,255,255,.12); border-radius:6px; overflow:hidden;}
.auth-tabs button{flex:1; padding:11px; background:var(--charcoal-2); color:var(--chrome); border:none; font-family:var(--display); text-transform:uppercase; font-size:12.5px;}
.auth-tabs button.active{background:var(--gold); color:var(--black);}
.field{margin-bottom:14px;}
.field label{font-size:11.5px; color:var(--chrome-dark); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:6px; font-family:var(--display);}
.field input, .field select{width:100%; background:var(--charcoal-2); border:1px solid rgba(255,255,255,.15); color:var(--white); padding:10px 12px; border-radius:4px; font-size:13px;}
.pay-methods{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0;}
.pay-methods label{display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.15); border-radius:4px; padding:12px; font-size:13px; cursor:pointer;}
.pay-methods input{accent-color:var(--gold);}
.pay-methods label.sel{border-color:var(--gold); background:rgba(201,162,39,.08);}
.notif-item{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:12.5px; color:var(--chrome);}
.notif-item b{color:var(--white); display:block; margin-bottom:3px; font-size:13px;}
.notif-item span{font-family:var(--mono); font-size:10.5px; color:var(--chrome-dark);}
.empty-state{text-align:center; padding:40px 10px; color:var(--chrome-dark); font-size:13.5px;}
.confirm-box{text-align:center; padding:20px 0;}
.confirm-box .tick{width:64px; height:64px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:#fff;}
.invoice-table{width:100%; border-collapse:collapse; margin:18px 0; font-size:12.5px;}
.invoice-table th, .invoice-table td{text-align:left; padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.08); color:var(--chrome);}

/* ============ ADMIN ============ */
#adminView{display:none; min-height:100vh; background:var(--black);}
#adminView.show{display:flex;}
.admin-side{width:230px; background:var(--charcoal); border-right:1px solid rgba(201,162,39,.2); padding:24px 0; flex-shrink:0;}
.admin-side .a-logo{font-family:var(--display); font-size:18px; padding:0 22px 20px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:16px; letter-spacing:.05em;}
.admin-side .a-logo span{color:var(--gold-bright);}
.admin-nav-item{padding:11px 22px; font-size:13px; color:var(--chrome); cursor:pointer; border-left:3px solid transparent; font-family:var(--display); letter-spacing:.02em; text-transform:uppercase;}
.admin-nav-item.active, .admin-nav-item:hover{background:var(--charcoal-2); color:var(--gold-bright); border-color:var(--gold);}
.admin-main{flex:1; padding:30px 36px; overflow-y:auto;}
.admin-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
.admin-top h2{font-size:22px;}
.stat-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
.stat-card{background:var(--charcoal); border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--gold); border-radius:4px; padding:18px 20px;}
.stat-card .label{font-size:11px; color:var(--chrome-dark); text-transform:uppercase; letter-spacing:.06em; font-family:var(--display);}
.stat-card .val{font-family:var(--mono); font-size:24px; margin-top:8px; color:var(--white);}
.stat-card .delta{font-size:11px; color:var(--green); margin-top:4px; font-family:var(--mono);}
.admin-table{width:100%; border-collapse:collapse; background:var(--charcoal); border:1px solid rgba(255,255,255,.08); border-radius:6px; overflow:hidden;}
.admin-table th{text-align:left; background:var(--charcoal-2); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--chrome-dark); padding:12px 16px; font-family:var(--display);}
.admin-table td{padding:12px 16px; font-size:13px; border-top:1px solid rgba(255,255,255,.06); color:var(--chrome);}
.admin-table .a-btn{font-size:11px; color:var(--gold-bright); margin-right:10px; font-family:var(--display); text-transform:uppercase;}
.admin-table .a-btn.del{color:var(--ember-bright);}
.status-pill{padding:3px 10px; border-radius:10px; font-size:10.5px; font-family:var(--mono); text-transform:uppercase;}
.status-pill.paid{background:rgba(76,138,94,.2); color:var(--green);}
.status-pill.pending{background:rgba(201,162,39,.2); color:var(--gold-bright);}
.status-pill.shipped{background:rgba(184,192,200,.15); color:var(--chrome);}
.admin-bar-chart{display:flex; align-items:flex-end; gap:10px; height:160px; background:var(--charcoal); border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:20px;}
.admin-bar-chart .bar{flex:1; background:linear-gradient(180deg, var(--gold-bright), var(--gold-dim)); border-radius:2px 2px 0 0; position:relative;}
.admin-bar-chart .bar span{position:absolute; bottom:-20px; left:0; right:0; text-align:center; font-size:10px; color:var(--chrome-dark); font-family:var(--mono);}
.exit-admin{position:fixed; bottom:24px; left:20px; z-index:50;}

/* toast */
#toast{position:fixed; bottom:20px;opacity: 0; z-index: 9999; left: 50%; background: #222;  border:1px solid var(--gold); color:var(--white); padding:12px 20px; border-radius:6px;  display: none; font-size:13px; z-index:1200; transition:transform .35s ease; box-shadow:var(--shadow-gold);}
#toast.show{ display: block;opacity: 1;}

/* =========================================================
   RESPONSIVE - LAPTOP / TABLET / MOBILE
   ========================================================= */

/* ---------- LAPTOP / SMALL DESKTOP ---------- */
@media (max-width: 1200px) {

    .wrap {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .topbar {
        padding-left: 24px;
        padding-right: 24px;
        gap: 16px;
    }

    nav.mainnav {
        gap: 16px;
    }

    nav.mainnav a {
        font-size: 13px;
    }

    .search-row {
        padding-left: 24px;
        padding-right: 24px;
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ---------- TABLET ---------- */
@media (max-width: 900px) {

    /* HEADER */

    .topbar {
        padding: 12px 20px;
    }

    .brand-logo {
        font-size: 21px;
    }

    .brand-tagline {
        font-size: 9px;
    }

    nav.mainnav {
        display: none;
    }

    nav.mainnav.mnav-open {
        display: flex;
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        flex-direction: column;
        gap: 0;

        padding: 10px 20px 18px;

        background: var(--charcoal);

        border-top: 1px solid
            rgba(201,162,39,.25);

        box-shadow:
            0 15px 30px rgba(0,0,0,.45);

        z-index: 999;
    }

    nav.mainnav.mnav-open a {
        width: 100%;
        padding: 12px 5px;

        border-bottom: 1px solid
            rgba(255,255,255,.06);
    }

    .hamburger {
        display: block;
    }


    /* SEARCH */

    .search-row {
        padding: 10px 20px;
    }

    .search-actions button span {
        display: none;
    }


    /* MAIN LAYOUT */

    .about-grid,
    .review-layout,
    .pd-grid,
    .pd-layout {
        grid-template-columns: 1fr;
    }


    /* PRODUCT GRID */

    .prod-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;
    }


    /* CATEGORY */

    .cat-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 14px;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ADMIN */

    #adminView.show {
        flex-direction: column;
    }

    .admin-side {
        width: 100%;

        display: flex;

        overflow-x: auto;

        padding: 10px 0;

        border-right: none;

        border-bottom: 1px solid
            rgba(201,162,39,.2);
    }

    .admin-side .a-logo {
        display: none;
    }

    .admin-nav-item {
        flex-shrink: 0;

        white-space: nowrap;

        border-left: none;

        border-bottom: 3px solid transparent;
    }

    .admin-main {
        padding: 24px 20px;
    }

    .stat-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
    .filter-panel-body {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ---------- MOBILE ---------- */
@media (max-width: 600px) {

    body {
        width: 100%;
        overflow-x: hidden;
    }

    .wrap {
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }


    /* HEADER */

    .topbar {
        padding: 10px 14px;
        gap: 8px;
    }

    .brand-logo {
        font-size: 18px;
        letter-spacing: .04em;
    }

    .brand-tagline {
        display: none;
    }

    .icon-row {
        gap: 6px;
    }

    .icon-btn {
        width: 34px;
        height: 34px;
    }


    /* Hide less-important icons if header gets crowded */

    .icon-row .icon-btn svg {
        width: 15px;
        height: 15px;
    }


    /* SEARCH */

    .search-row {
        padding: 8px 14px;
        gap: 6px;
    }

    .search-box {
        min-width: 0;
        padding: 9px 12px;
    }

    .search-box input {
        min-width: 0;
        width: 100%;

        /* prevents mobile browser zoom */
        font-size: 16px;
    }

    .search-actions {
        flex-shrink: 0;
    }

    .search-actions button {
        padding: 9px 10px;
    }

    .autocomplete {
        max-height: 60vh;
        overflow-y: auto;
    }


    /* HERO */

    .hero {
        min-height: 430px;

        padding:
            70px 18px
            50px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero h1 {
        font-size: clamp(
            30px,
            10vw,
            42px
        );

        margin-top: 12px;
    }

    .hero p.slogan {
        font-size: 12px;
        line-height: 1.6;
    }

    .hero-ctas {
        gap: 10px;
    }

    .hero-ctas .btn {
        padding: 12px 16px;
        font-size: 12px;
    }


    /* SECTIONS */

    section {
        padding: 45px 0;
    }

    .sec-head {
        margin-bottom: 22px;
    }

    .sec-head h2 {
        font-size: 25px;
    }

    .sec-head p {
        font-size: 12px;
    }


    /* PRODUCT GRID - TWO PER ROW */

    .prod-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .prod-card {
        min-width: 0;
    }

    .prod-body {
        padding: 10px;
        gap: 5px;
    }

    .prod-name {
        font-size: 12.5px;
        line-height: 1.35;
    }

    .prod-cat {
        font-size: 9px;
    }

    .prod-price-row {
        gap: 5px;
        flex-wrap: wrap;
    }

    .prod-price {
        font-size: 14px;
    }

    .prod-mrp {
        font-size: 10px;
    }

    .prod-off {
        font-size: 10px;
    }

    .prod-actions {
        gap: 5px;
    }

    .prod-actions .btn {
        padding: 8px 4px;
        font-size: 9px;
    }

    .wish-mini {
        width: 30px;
        height: 30px;
    }

    .prod-tag {
        top: 7px;
        left: 7px;

        padding: 4px 7px;

        font-size: 8px;
    }


    /* CATEGORY - TWO PER ROW */

    .cat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .cat-card {
        padding: 16px 8px 14px;
    }

    .cat-card h4 {
        font-size: 12px;
    }


    /* ABOUT */

    .about-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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


    /* REVIEWS */

    .review-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .map-box {
        height: 220px;
    }


    /* DRAWERS */

    .drawer {
        width: 100%;
        max-width: 100%;
    }


    /* MODALS */

    .modal {
        width: calc(100vw - 20px);
        max-width: none;

        max-height: 92vh;
    }

    .modal-inner {
        padding:
            45px 14px
            22px;
    }


    /* ADMIN */

    .admin-main {
        padding: 18px 12px;
    }

    .admin-top {
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }

    .stat-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .stat-card {
        padding: 13px 10px;
    }

    .stat-card .val {
        font-size: 18px;
    }

    .admin-table {
        min-width: 750px;
    }
    .catalogue-filter-panel {
        max-height: 70vh;
        overflow-y: auto;
    }

    .filter-panel-body {
        grid-template-columns: 1fr;
    }

    .filter-panel-footer {
        position: sticky;
        bottom: 0;

        background: var(--charcoal);

        flex-direction: column;
        align-items: stretch;

        gap: 10px;
    }

    .filter-footer-right {
        width: 100%;

        display: flex;
        justify-content: space-between;
        align-items: center;

        gap: 10px;
    }

    .filter-apply-btn {
        flex-shrink: 0;
    }
    #productModal {
        width: calc(100vw - 16px) !important;
        max-width: none !important;

        max-height: 94vh !important;

        top: 50% !important;

        transform:
            translate(-50%, -50%) !important;
    }

    #productModal .modal-inner {
        padding:
            42px 12px
            20px !important;
    }

    #productModal .pd-grid,
    #productModal .pd-layout {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    #productModal .pd-gallery-main {
        width: 100%;
    }

    #productModal .pd-thumbs {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;

        gap: 8px;

        padding-bottom: 5px;
    }

    #productModal .pd-thumb {
        flex: 0 0 65px;
    }

    #productModal .pd-title {
        font-size: 20px;
    }

    #productModal .pd-qty-actions {
        flex-wrap: wrap;
    }

    #productModal .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;

        gap: 18px;
    }

    #productModal .tab-btn {
        white-space: nowrap;
    }
}


/* ---------- VERY SMALL PHONE ---------- */
@media (max-width: 380px) {

    .brand-logo {
        font-size: 16px;
    }

    .icon-row {
        gap: 4px;
    }

    .icon-btn {
        width: 31px;
        height: 31px;
    }

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

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

    .stat-cards {
        grid-template-columns: 1fr;
    }
}
/* ===== Admin Product Form ===== */

#productModal{
    width:1100px;
    max-width:95%;
}

#productForm h3{
    margin:20px 0;
    color:var(--gold-bright);
}

#productForm textarea{
    width:100%;
    resize:vertical;
    min-height:120px;
    background:var(--charcoal-2);
    border:1px solid rgba(255,255,255,.15);
    color:var(--white);
    padding:12px;
    border-radius:4px;
    font-family:var(--body);
}

#productForm input[type=file]{
    padding:10px;
}

#variantTable input{
    width:100%;
    background:var(--charcoal-2);
    border:1px solid rgba(255,255,255,.15);
    color:var(--white);
    padding:10px;
    border-radius:4px;
}

#variantTable button{
    background:#a5312f;
    color:#fff;
    border:none;
    padding:8px 12px;
    border-radius:4px;
    cursor:pointer;
}

#variantTable button:hover{
    background:#d1483f;
}

#productForm .btn{
    min-width:180px;
}

#productForm .btn-outline{
    margin-bottom:15px;
}
/*categories form*/
.admin-actions{
    display:flex;
    justify-content:flex-end;
    margin-bottom:20px;
}

.categoryFormModal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.categoryFormModal-content{
    width:420px;
    background:#1b1b1b;
    padding:25px;
    border-radius:8px;
    border:1px solid #c9a227;
}

.categoryFormModal-content input,
.categoryFormModal-content textarea{

    width:100%;
    margin:10px 0;
    padding:10px;
    background:#2b2b2b;
    color:white;
    border:1px solid #444;
}

.categoryFormModal-buttons{
    display:flex;
    gap:10px;
    margin-top:15px;
}

.setting-dropdown-menu{
    display:none;
    position:absolute;
    right:0;
    top:40px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.2);
    min-width:180px;
    z-index: 9999;
}

.setting-dropdown-menu.show{
    display:block;
}

.setting-dropdown-menu a{
    display:block;
    padding:12px 16px;
    color:#222;
    text-decoration:none;
}

.setting-dropdown-menu a:hover{
    background: #c9a227;
    color: #111;
}
/* User profile button: icon top, name bottom */

#userName{
     font-size: 11px;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
    color: var(--chrome);
}

/* Delete notification for Logged In user*/
.notif-item {
    position: relative;
    padding: 12px 35px 12px 12px;
}

.notif-delete {
    position: absolute;
    top: 8px;
    right: 8px;

    border: none;
    background: transparent;

    color: #aaa;
    font-size: 20px;
    cursor: pointer;
}

.notif-delete:hover {
    color: red;
}
.products-page {
    padding: 40px;
}

.products-page h2 {
    margin-bottom: 25px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}/* ================================
   FULL PRODUCT CATALOGUE
================================ */

/* =====================================
   CHECKOUT ABOVE CATALOGUE
===================================== */

/* =========================================
   FULL SCREEN PRODUCT CATALOGUE
========================================= */

#catalogueView {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;

    width: 100vw;
    height: 100vh;

    overflow-y: auto;

    background: var(--charcoal, #08090b);

    padding: 30px;
    box-sizing: border-box;
}

#catalogueView.show {
    display: block;
}

/* Catalogue header */
.catalogue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 25px;
}

/* Products */
#catalogueGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* Tablet */
@media (max-width: 1000px) {
    #catalogueGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 700px) {
    #catalogueGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    #catalogueGrid {
        grid-template-columns: 1fr;
    }

}

/* Catalogue */
#catalogueView {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

/* Checkout overlay */
#overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
}

/* Checkout */
#checkoutModal {
    position: fixed !important;
    z-index: 10000 !important;
}

/* Only show checkout when .show is present */
#checkoutModal:not(.show) {
    display: none !important;
}

/* Toast must appear above catalogue + checkout */
#toast {
    position: fixed !important;

    left: 50% !important;
    bottom: 30px !important;

    transform: translateX(-50%) !important;

    z-index: 10005 !important;

    pointer-events: none;
}

/* Keep toast visible when JS adds .show */
#toast.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================
   CRISP HEADER ICONS
========================================= */

header .icon-row {
    opacity: 1 !important;
    filter: none !important;
}

header .icon-row .icon-btn {
    opacity: 1 !important;
    filter: none !important;

    color: #ffffff !important;

    background: #15171a !important;
    border: 1px solid #555b62 !important;

    -webkit-font-smoothing: antialiased;
}

header .icon-row .icon-btn svg {
    opacity: 1 !important;
    filter: none !important;

    stroke: #ffffff !important;
    color: #ffffff !important;

    width: 17px;
    height: 17px;
}
/* =========================================
   DRAWERS ABOVE CATALOGUE
========================================= */

.drawer {
    z-index: 10002 !important;
}

.drawer.show {
     right: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.drawer-head,
.drawer-body {
    position: relative;
    z-index: 10003;
}
/* =========================================================
   AUTH MODAL - BLURRED BACKGROUND + CRISP MODAL
   ========================================================= */

/* Background overlay */
#overlay {
    position: fixed !important;
    inset: 0 !important;

    /* Darken the background */
    background: rgba(0, 0, 0, 0.58) !important;

    /* Blur EVERYTHING behind the overlay */
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    /* Overlay must be BELOW modal */
    z-index: 9999 !important;

    display: none;
}

/* Show overlay */
#overlay.show {
    display: block !important;
}

/* =========================================================
   AUTH MODAL
   ========================================================= */

#authModal {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 440px !important;
    max-width: calc(100vw - 30px) !important;

    max-height: 90vh !important;
    overflow-y: auto !important;

    background: #0d0f11 !important;

    border: 1px solid rgba(201, 162, 39, 0.65) !important;
    border-radius: 14px !important;

    /* IMPORTANT:
       Modal must be ABOVE overlay */
    z-index: 10001 !important;

    display: none;

    opacity: 1 !important;
    visibility: visible !important;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.75),
        0 0 35px rgba(201, 162, 39, 0.12) !important;

    /* DO NOT BLUR MODAL */
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Make modal interactive */
    pointer-events: auto !important;
}

/* Show auth modal */
#authModal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Everything inside auth modal stays sharp */
#authModal *,
#authModal .modal-inner,
#authModal input,
#authModal button,
#authModal label,
#authModal a {
    filter: none !important;
}

/* Modal content */
#authModal .modal-inner {
    padding: 34px 32px 30px !important;
    position: relative;
    z-index: 10002;
}

/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#authModal .modal-close {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

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

    margin: 0 !important;
    float: none !important;

    background: #17191c !important;

    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 50% !important;

    color: #fff !important;

    cursor: pointer !important;

    z-index: 10003 !important;
}

#authModal .modal-close:hover {
    color: var(--gold-bright) !important;
    border-color: var(--gold) !important;
}

/* =========================================================
   LOGIN / REGISTER TABS
   ========================================================= */

#authModal .auth-tabs {
    display: flex !important;
    gap: 30px !important;

    border-bottom: 1px solid rgba(255,255,255,.10) !important;

    margin-bottom: 28px !important;
}

#authModal .auth-tabs button {
    position: relative !important;

    background: transparent !important;
    border: none !important;

    color: #aaa !important;

    padding: 12px 5px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
}

#authModal .auth-tabs button.active {
    color: var(--gold-bright) !important;
}

#authModal .auth-tabs button.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 2px;

    background: var(--gold-bright);
}

/* =========================================================
   FORM FIELDS
   ========================================================= */

#authModal .field {
    margin-bottom: 18px !important;
}

#authModal .field label {
    display: block !important;

    margin-bottom: 7px !important;

    color: #e5e5e5 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

#authModal .field input {
    display: block !important;

    width: 100% !important;
    box-sizing: border-box !important;

    height: 46px !important;

    padding: 0 14px !important;

    background: #17191c !important;

    border: 1px solid #3b3f44 !important;
    border-radius: 6px !important;

    color: #fff !important;

    font-size: 13px !important;

    outline: none !important;

    /* IMPORTANT */
    pointer-events: auto !important;

    opacity: 1 !important;
}

#authModal .field input::placeholder {
    color: #777 !important;
}

#authModal .field input:focus {
    border-color: var(--gold-bright) !important;

    box-shadow:
        0 0 0 2px rgba(201,162,39,.12) !important;
}

/* =========================================================
   LOGIN BUTTON
   ========================================================= */

#authModal .btn-gold {
    width: 100% !important;

    min-height: 46px !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    opacity: 1 !important;
}

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

@media (max-width: 600px) {

    #authModal {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
    }

    #authModal .modal-inner {
        padding: 30px 20px 25px !important;
    }
}
/* =========================================================
   PRODUCT MODAL
   ========================================================= */

#productModal {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -48%) !important;

    width: 920px !important;
    max-width: 94vw !important;
    max-height: 88vh !important;

    overflow-y: auto !important;

    background: var(--charcoal) !important;

    /* ABOVE BLUR */
    z-index: 10000 !important;

    display: none !important;

    /* NEVER BLUR THE MODAL */
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}

/* Open product modal */
#productModal.show {
    display: block !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}


/* EVERYTHING INSIDE PRODUCT MODAL MUST REMAIN SHARP */

#productModal .modal-inner,
#productModal .pd-grid,
#productModal .pd-gallery-main,
#productModal .pd-thumbs,
#productModal .pd-cat,
#productModal .pd-title,
#productModal .pd-price-row,
#productModal .variant-group,
#productModal .delivery-line,
#productModal .pd-qty-actions,
#productModal .tab-panel,
#productModal img,
#productModal h2,
#productModal h3,
#productModal p,
#productModal span,
#productModal label,
#productModal button {
    filter: none !important;
    opacity: 1 !important;
}


/* PRODUCT IMAGE */
#productModal .product-image {
    filter: none !important;
    opacity: 1 !important;

    display: block !important;

    position: relative !important;
    z-index: 10001 !important;
}


/* MAIN IMAGE */
#productModal .pd-gallery-main {
    position: relative !important;
    z-index: 10001 !important;

    filter: none !important;
}


/* THUMBNAILS */
#productModal .pd-thumbs {
    position: relative !important;
    z-index: 10002 !important;

    filter: none !important;
}

#productModal .pd-thumbs div {
    position: relative !important;
    z-index: 10002 !important;

    pointer-events: auto !important;
}

#productModal .pd-thumbs img {
    pointer-events: auto !important;
}


/* PRODUCT MODAL BUTTONS */
#productModal button {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* CLOSE BUTTON */
#productModal .modal-close {
    position: sticky !important;

    z-index: 10003 !important;

    pointer-events: auto !important;

    filter: none !important;
}

/* =========================================================
   ADMIN ORDER DETAILS
   ========================================================= */

.order-details-modal {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 10050;
}

.order-details-modal.show {
    display: flex;
}

.order-details-box {
    position: relative;

    width: 650px;
    max-width: calc(100vw - 30px);
    max-height: 85vh;

    overflow-y: auto;

    background: var(--charcoal);

    border: 1px solid rgba(201, 162, 39, 0.35);

    border-radius: 10px;

    padding: 28px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.7);
}

.order-details-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--charcoal-2);

    border: 1px solid rgba(255,255,255,.15);

    color: white;

    cursor: pointer;
}

.order-details-close:hover {
    color: var(--gold-bright);
    border-color: var(--gold);
}


/* HEADER */

.order-details-header {
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    margin-bottom: 25px;
}

.order-details-header h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

.order-details-id {
    color: var(--gold-bright);

    font-family: var(--mono);

    font-size: 13px;
}


/* ORDER SUMMARY */

.order-summary {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 30px;
}

.order-summary-box {
    background: var(--charcoal-2);

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 6px;

    padding: 14px;
}

.order-summary-box .label {
    display: block;

    font-size: 10px;

    color: var(--chrome-dark);

    text-transform: uppercase;

    margin-bottom: 7px;
}

.order-summary-box .value {
    font-size: 13px;

    color: var(--white);
}


/* TIMELINE */

.order-timeline {
    position: relative;

    margin-top: 15px;

    padding-left: 30px;
}

.order-timeline::before {
    content: "";

    position: absolute;

    left: 8px;
    top: 8px;
    bottom: 8px;

    width: 2px;

    background: rgba(201,162,39,.3);
}

.timeline-item {
    position: relative;

    margin-bottom: 25px;
}

.timeline-dot {
    position: absolute;

    left: -28px;
    top: 3px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: var(--gold);

    border: 3px solid var(--charcoal);
}

.timeline-status {
    font-size: 13px;

    color: var(--gold-bright);

    font-weight: 700;

    text-transform: uppercase;
}

.timeline-date {
    margin-top: 4px;

    font-family: var(--mono);

    font-size: 11px;

    color: var(--chrome-dark);
}

.timeline-message {
    margin-top: 7px;

    font-size: 12px;

    color: var(--chrome);
}

.timeline-item.pending .timeline-dot {
    background: var(--chrome-dark);
}

.timeline-item.pending .timeline-status {
    color: var(--chrome-dark);
}


/* MOBILE */

@media (max-width: 600px) {

    .order-summary {
        grid-template-columns: 1fr;
    }

    .order-details-box {
        padding: 22px 18px;
    }
}
/* =====================================================
   EDIT ORDER MODAL
===================================================== */

.order-edit-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.70);

    z-index: 11000;

    padding: 20px;

}


.order-edit-modal.show {

    display: flex;

}


.order-edit-box {

    position: relative;

    width: 500px;

    max-width: 100%;

    max-height: 90vh;

    overflow-y: auto;

    background: var(--charcoal);

    border: 1px solid rgba(201, 162, 39, 0.35);

    border-radius: 10px;

    padding: 30px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.75);

}


.order-edit-header {

    margin-bottom: 25px;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

}


.order-edit-header h2 {

    margin: 5px 0 8px;

    font-size: 22px;

}


.order-edit-header p {

    margin: 0;

    font-size: 12px;

    color: var(--chrome-dark);

}


.order-edit-close {

    position: absolute;

    top: 14px;

    right: 14px;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.15);

    background: var(--charcoal-2);

    color: white;

    cursor: pointer;

}


.order-edit-close:hover {

    color: var(--gold-bright);

    border-color: var(--gold);

}


.order-edit-box .field {

    margin-bottom: 18px;

}


.order-edit-box .field label {

    display: block;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 600;

    color: var(--chrome);

}


.order-edit-box input,
.order-edit-box select,
.order-edit-box textarea {

    width: 100%;

    box-sizing: border-box;

    background: var(--charcoal-2);

    color: white;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 5px;

    padding: 11px 12px;

    font-family: inherit;

    font-size: 13px;

    outline: none;

}


.order-edit-box input:focus,
.order-edit-box select:focus,
.order-edit-box textarea:focus {

    border-color: var(--gold-bright);

    box-shadow:
        0 0 0 2px rgba(201,162,39,.10);

}


.order-edit-box input[readonly] {

    color: var(--chrome-dark);

    cursor: not-allowed;

}


.order-edit-box select {

    cursor: pointer;

}


.order-edit-box textarea {

    resize: vertical;

    min-height: 90px;

}


.order-edit-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 25px;

    padding-top: 18px;

    border-top:
        1px solid rgba(255,255,255,.08);

}


@media (max-width: 600px) {

    .order-edit-box {

        padding: 22px;

    }

    .order-edit-actions {

        flex-direction: column;

    }

    .order-edit-actions button {

        width: 100%;

    }

}
.cart-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 6px 0 8px;
}

.cart-variants span {
    font-size: 11px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: var(--chrome);
}

.cart-variants strong {
    color: var(--gold-bright);
}

.review-product-select {
    width: 100%;
    padding: 13px 15px;

    border: 1px solid #3b3d44;
    border-radius: 8px;

    background: #17181d;
    color: #f2f2f2;

    font-family: "Manrope", sans-serif;
    font-size: 14px;

    outline: none;
    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.review-product-select:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12);
}

.review-product-select option {
    background: #17181d;
    color: #fff;
}
.user-menu {
    position: relative;
}

.user-profile-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    padding: 18px;
    background: #111;
    border: 1px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    z-index: 9999;
}

.user-profile-menu.show {
    display: block;
}

.profile-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--gold-bright);
    margin-bottom: 12px;
}

.profile-info {
    font-size: 13px;
    color: #ddd;
    margin: 8px 0;
    word-break: break-word;
}

.profile-divider {
    height: 1px;
    background: rgba(255,255,255,.15);
    margin: 14px 0;
}

.profile-logout {
    width: 100%;
    padding: 9px;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--gold-bright);
    border-radius: 6px;
    cursor: pointer;
}

.profile-logout:hover {
    background: var(--gold);
    color: #111;
}
/* =========================
   MY PROFILE
========================= */

#profileModal .modal-box {
    width: min(430px, 92vw);
    padding: 28px;
}

#profileModal h2 {
    margin-bottom: 22px;
    color: var(--gold-bright);
    font-size: 22px;
    letter-spacing: .5px;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-form label {
    font-size: 12px;
    font-weight: 600;
    color: var(--chrome-dark);
    margin-top: 8px;
    letter-spacing: .4px;
}

.profile-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;

    background: rgba(255,255,255,.04);
    color: #fff;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;

    outline: none;
    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.profile-form input:focus {
    border-color: var(--gold);
    background: rgba(255,255,255,.06);

    box-shadow:
        0 0 0 2px rgba(212,175,55,.12);
}

.profile-form input::placeholder {
    color: #777;
}

.profile-form .btn {
    width: 100%;
    margin-top: 18px;
}


/* Profile close button */

#profileModal .modal-close {
    font-size: 24px;
}


/* Profile information spacing */

.profile-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* ================================
   OFFER / COUPON MODAL FIX
   ================================ */
.delete-icon-btn {
    border: none;
    background: transparent;
    color: #d9534f;
    font-size: 17px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: 0.2s;
}

.delete-icon-btn:hover {
    background: rgba(217, 83, 79, 0.12);
    transform: scale(1.08);
}
.custom-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;

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

    background: rgba(0, 0, 0, 0.70) !important;

    z-index: 99999 !important;

    padding: 20px !important;
    box-sizing: border-box !important;
}


/* MODAL BOX */

.custom-modal-overlay .custom-modal {
    width: 100% !important;
    max-width: 540px !important;

    max-height: 90vh !important;
    overflow-y: auto !important;

    background: #ffffff !important;
    color: #222222 !important;

    border-radius: 14px !important;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45) !important;

    opacity: 1 !important;
}


/* HEADER */

.custom-modal-overlay .custom-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 18px 22px !important;

    background: #ffffff !important;
    color: #222222 !important;

    border-bottom: 1px solid #dddddd !important;
}

.custom-modal-overlay .custom-modal-header h3 {
    margin: 0 !important;

    color: #222222 !important;

    font-size: 20px !important;
    font-weight: 700 !important;
}


/* CLOSE BUTTON */

.custom-modal-overlay .modal-close {
    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    border: none !important;
    border-radius: 6px !important;

    background: transparent !important;

    color: #222222 !important;

    font-size: 26px !important;
    line-height: 34px !important;

    cursor: pointer !important;
}

.custom-modal-overlay .modal-close:hover {
    background: #eeeeee !important;
}


/* BODY */

.custom-modal-overlay .custom-modal-body {
    padding: 20px 22px !important;

    background: #ffffff !important;
    color: #222222 !important;
}


/* LABELS */

.custom-modal-overlay .custom-modal-body label {
    display: block !important;

    margin: 14px 0 6px !important;

    color: #222222 !important;

    font-size: 14px !important;
    font-weight: 600 !important;
}


/* INPUTS / SELECT / TEXTAREA */

.custom-modal-overlay .custom-modal-body input,
.custom-modal-overlay .custom-modal-body select,
.custom-modal-overlay .custom-modal-body textarea {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 11px 12px !important;

    margin: 0 !important;

    background: #ffffff !important;

    color: #222222 !important;

    border: 1px solid #bdbdbd !important;

    border-radius: 7px !important;

    font-size: 14px !important;

    font-family: inherit !important;

    opacity: 1 !important;
}


/* PLACEHOLDER */

.custom-modal-overlay
.custom-modal-body
input::placeholder,

.custom-modal-overlay
.custom-modal-body
textarea::placeholder {

    color: #777777 !important;

    opacity: 1 !important;
}


/* SELECT OPTIONS */

.custom-modal-overlay
.custom-modal-body
select option {

    background: #ffffff !important;

    color: #222222 !important;
}


/* FOCUS */

.custom-modal-overlay
.custom-modal-body
input:focus,

.custom-modal-overlay
.custom-modal-body
select:focus,

.custom-modal-overlay
.custom-modal-body
textarea:focus {

    background: #ffffff !important;

    color: #222222 !important;

    border-color: #c9a227 !important;

    outline: none !important;

    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.15) !important;
}


/* TEXTAREA */

.custom-modal-overlay
.custom-modal-body
textarea {

    min-height: 80px !important;

    resize: vertical !important;
}


/* CHECKBOX */

.custom-modal-overlay
.custom-modal-body
.checkbox-row {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin-top: 15px !important;

    color: #222222 !important;
}

.custom-modal-overlay
.custom-modal-body
.checkbox-row input {

    width: auto !important;

    margin: 0 !important;
}


/* FOOTER */

.custom-modal-overlay .custom-modal-footer {

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: 10px !important;

    padding: 16px 22px !important;

    background: #ffffff !important;

    border-top: 1px solid #dddddd !important;
}


/* CANCEL BUTTON */

.custom-modal-overlay
.custom-modal-footer
.btn-outline {

    background: #ffffff !important;

    color: #222222 !important;

    border: 1px solid #999999 !important;
}


/* SAVE BUTTON */

.custom-modal-overlay
.custom-modal-footer
.btn-gold {

    color: #111111 !important;

    font-weight: 600 !important;
}
.admin-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
    height: 220px;
    padding: 20px;
}

.admin-bar-chart .bar {
    position: relative;
    flex: 1;
    max-width: 60px;
    min-height: 5px;
    background: var(--gold-bright);
    border-radius: 5px 5px 0 0;
    transition: height 0.4s ease;
}

.admin-bar-chart .bar span {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    white-space: nowrap;
}
/* ================= BRAND MENU ================= */

.brands-menu {
    position: fixed;
    top: 75px;
    left: 0;
    right: 0;

    background: rgba(12, 12, 12, 0.98);

    border-top: 1px solid rgba(201, 162, 39, .25);
    border-bottom: 1px solid rgba(201, 162, 39, .25);

    box-shadow: 0 15px 40px rgba(0, 0, 0, .45);

    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);

    transition: .25s ease;
}


.brands-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.brands-menu-inner {
    width: min(1200px, 92%);
    margin: auto;
    padding: 25px 0 30px;
}


.brands-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}


.brands-menu-head h3 {
    color: var(--chrome);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .06em;
}


.brands-menu-head button {
    background: transparent;
    border: none;
    color: var(--chrome);
    font-size: 20px;
    cursor: pointer;
}


.brands-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(130px, 1fr));

    gap: 16px;
}


.brand-card {
    background: rgba(255, 255, 255, .035);

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius: 8px;

    padding: 16px 12px;

    text-align: center;

    cursor: pointer;

    transition: .2s ease;
}


.brand-card:hover {
    transform: translateY(-4px);

    border-color:
        var(--gold);

    background:
        rgba(201, 162, 39, .08);
}


.brand-image {
    height: 75px;

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

    margin-bottom: 10px;
}


.brand-image img {
    max-width: 100%;
    max-height: 65px;

    object-fit: contain;
}


.brand-image-fallback {
    width: 60px;
    height: 60px;

    border-radius: 50%;

    align-items: center;
    justify-content: center;

    background:
        rgba(201, 162, 39, .12);

    border:
        1px solid
        var(--gold);

    color:
        var(--gold-bright);

    font-size: 24px;

    font-family:
        var(--display);
}


.brand-name {
    color: var(--chrome);

    font-weight: 700;

    font-size: 13px;

    text-transform: uppercase;
}
.reel {
    position: relative;
    width: 180px;
    height: 280px;
    flex: 0 0 180px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
}

.reel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 600px) {
    .reel {
        width: 145px;
        height: 230px;
        flex: 0 0 145px;
    }
}
#reelRow {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    align-items: flex-start;
}
#catGrid .cat-card.active {
    border: 2px solid var(--gold-bright);
    transform: translateY(-4px);
    box-shadow:
        0 0 0 2px rgba(212, 175, 55, 0.15),
        0 8px 25px rgba(212, 175, 55, 0.25);
}

#catGrid .cat-card.active h4 {
    color: var(--gold-bright);
}
.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 35px;
    align-items: start;
}

.pd-gallery {
    min-width: 0;
}

.pd-info {
    min-width: 0;
}

.pd-gallery-main {
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pd-gallery-main img {
    width: 100%;
    height: 420px;
    object-fit: contain;
}

.pd-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.pd-thumb {
    width: 75px;
    height: 75px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.pd-thumb.active {
    border-color: var(--gold-bright);
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-video-btn {
    margin-top: 15px;
    cursor: pointer;
}

@media (max-width: 800px) {
    .pd-layout {
        grid-template-columns: 1fr;
    }
}
.admin-upload-preview {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 10px;
}

.admin-gallery-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.admin-gallery-thumb {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--gold-bright);
}

.admin-video-preview {
    width: 300px;
    max-width: 100%;
    max-height: 180px;
    margin-top: 10px;
    background: #000;
    border-radius: 8px;
}
/* Product media upload fields */
.admin-file-input {
    width: 100%;
    box-sizing: border-box;

    background: #1b1b22;
    color: #ddd;

    border: 2px solid #c9a227;
    border-radius: 8px;

    padding: 8px 10px;

    font-family: inherit;
    font-size: 14px;

    outline: none;
    cursor: pointer;

    transition: border-color .2s ease,
                box-shadow .2s ease;
}


/* Focus - same gold effect as normal input */
.admin-file-input:focus {
    border-color: #f2c94c;

    box-shadow:
        0 0 0 2px rgba(242, 201, 76, 0.15);
}


/* Style Choose File button */
.admin-file-input::file-selector-button {

    background: #c9a227;
    color: #111;

    border: none;
    border-radius: 5px;

    padding: 8px 14px;
    margin-right: 12px;

    font-family: inherit;
    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


.admin-file-input::file-selector-button:hover {
    background: #f2c94c;
}
.form-group > label {
    display: block;

    margin-bottom: 7px;

    font-size: 11px;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: .5px;

    color: #8d8d98;
}
/* ============================================================
   CATALOGUE FILTER TOOLBAR
============================================================ */

.catalogue-toolbar {
    width: 100%;
    margin-bottom: 18px;
}

.catalogue-filter-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* FILTER BUTTON */

.catalogue-filter-btn {
    position: relative;

    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 20px;

    border-radius: 10px;

    border: 1px solid var(--gold, #d9a917);

    background: #111217;

    color: var(--gold, #d9a917);

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: .8px;

    cursor: pointer;

    transition: .2s ease;
}


.catalogue-filter-btn:hover {
    background: rgba(217, 169, 23, .08);
}


.catalogue-filter-btn.open {
    background: rgba(217, 169, 23, .12);
}


.filter-icon {
    font-size: 18px;
}


.filter-arrow {
    font-size: 10px;
    margin-left: 5px;
}


.filter-count {

    min-width: 23px;
    height: 23px;

    padding: 0 6px;

    border-radius: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--gold, #d9a917);

    color: #111;

    font-size: 12px;
    font-weight: 800;
}


/* ============================================================
   SELECTED FILTER TAGS
============================================================ */

.selected-filter-tags {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


.selected-filter-tag {

    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 14px;

    border-radius: 50px;

    border: 1px solid rgba(217, 169, 23, .65);

    background: rgba(217, 169, 23, .05);

    color: var(--gold, #d9a917);

    font-size: 12px;
}


.selected-filter-tag button {

    border: none;
    background: transparent;

    color: inherit;

    font-size: 16px;
    line-height: 1;

    cursor: pointer;

    padding: 0;
}


/* ============================================================
   FILTER PANEL
============================================================ */

.catalogue-filter-panel {

    display: none;

    width: 100%;

    margin-bottom: 26px;

    background: #121318;

    border: 1px solid #3a3d47;

    border-radius: 14px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .35);

    overflow: hidden;
}


.catalogue-filter-panel.show {
    display: block;
}


.filter-panel-body {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    padding: 24px 26px;

    gap: 0;
}


/* FILTER COLUMN */

.filter-column {

    min-width: 0;

    padding: 0 22px;

    border-right: 1px solid #333640;
}


.filter-column:first-child {
    padding-left: 0;
}


.filter-column:last-child {
    border-right: none;
    padding-right: 0;
}


.filter-column-title {

    margin-bottom: 18px;

    color: #fff;

    font-size: 16px;
    font-weight: 700;
}


/* ============================================================
   CHECKBOX OPTIONS
============================================================ */

.filter-option-list {

    display: flex;
    flex-direction: column;

    gap: 14px;

    max-height: 260px;

    overflow-y: auto;

    padding-right: 8px;
}


.filter-option {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #c7cad2;

    font-size: 13px;

    cursor: pointer;

    user-select: none;
}


.filter-option input {

    appearance: none;
    -webkit-appearance: none;

    width: 19px;
    height: 19px;

    flex-shrink: 0;

    border-radius: 4px;

    border: 1px solid #666a74;

    background: transparent;

    cursor: pointer;

    position: relative;
}


.filter-option input:checked {

    background: var(--gold, #d9a917);

    border-color: var(--gold, #d9a917);
}


.filter-option input:checked::after {

    content: "✓";

    position: absolute;

    left: 4px;
    top: 0px;

    color: #111;

    font-size: 13px;

    font-weight: 900;
}


/* ============================================================
   FILTER FOOTER
============================================================ */

.filter-panel-footer {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 15px 26px;

    border-top: 1px solid #333640;
}


.filter-clear-btn {

    min-height: 44px;

    padding: 0 18px;

    border-radius: 8px;

    border: 1px solid #444853;

    background: transparent;

    color: #e1e1e1;

    font-family: inherit;

    cursor: pointer;
}


.filter-clear-btn:hover {
    border-color: #777;
}


.filter-footer-right {

    display: flex;

    align-items: center;

    gap: 20px;
}


#selectedFilterText {

    color: #aaaeb8;

    font-size: 12px;
}


.filter-apply-btn {

    min-height: 44px;

    padding: 0 28px;

    border: none;

    border-radius: 8px;

    background: var(--gold, #d9a917);

    color: #111;

    font-family: inherit;

    font-weight: 800;

    cursor: pointer;
}


.filter-apply-btn:hover {
    filter: brightness(1.08);
}


/* SCROLLBAR */

.filter-option-list::-webkit-scrollbar {
    width: 5px;
}

.filter-option-list::-webkit-scrollbar-track {
    background: #1c1d22;
}

.filter-option-list::-webkit-scrollbar-thumb {
    background: #555963;
    border-radius: 10px;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .filter-panel-body {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 30px 0;
    }


    .filter-column:nth-child(2) {
        border-right: none;
    }
}


@media (max-width: 650px) {

    .filter-panel-body {

        grid-template-columns: 1fr;
    }


    .filter-column {

        border-right: none;

        border-bottom: 1px solid #333640;

        padding: 18px 0;
    }


    .filter-column:last-child {
        border-bottom: none;
    }


    .filter-panel-footer {

        align-items: stretch;

        flex-direction: column;
    }


    .filter-footer-right {

        justify-content: space-between;

        flex-wrap: wrap;
    }
}

.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-links .social-icon {
  width: auto !important;
  height: auto !important;

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

  padding: 0 !important;
  margin: 0 !important;

  border: none !important;
  outline: none !important;
  border-radius: 0 !important;

  background: none !important;
  background-color: transparent !important;

  box-shadow: none !important;

  text-decoration: none;
}

.social-links .social-icon::before,
.social-links .social-icon::after {
  display: none !important;
  content: none !important;
}

.social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.social-row a {
  width: 32px;
  height: 32px;

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

  /* REMOVE CIRCLE */
  border: none;
  border-radius: 0;
  background: transparent;

  padding: 0;
}
.social-row a img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;

  border: none;
  border-radius: 0;
  background: transparent;
}

.social-row a:hover {
  border: none;
  transform: scale(1.12);
}

.social-links .social-icon img {
  width: 30px;
  height: 30px;

  display: block;
  object-fit: contain;

  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.social-links .social-icon:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.1);
}
.admin-image-preview-box,
.admin-gallery-preview-item {
    position: relative;
    display: inline-block;
}

.admin-image-remove {
    position: absolute;
    top: -7px;
    right: -7px;

    width: 24px;
    height: 24px;

    border: none;
    border-radius: 50%;

    background: #d62828;
    color: white;

    font-size: 17px;
    font-weight: 700;
    line-height: 24px;

    cursor: pointer;

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

    z-index: 10;
}

.admin-image-remove:hover {
    transform: scale(1.1);
}

.admin-gallery-preview-item {
    margin: 6px;
}

.admin-gallery-thumb {
    width: 90px;
    height: 90px;

    object-fit: cover;
    border-radius: 7px;
}
.admin-product-search {
    position: relative;

    display: flex;
    align-items: center;

    max-width: 480px;

    margin: 18px 0 8px;
}

.admin-product-search input {
    width: 100%;

    padding: 12px 42px 12px 42px;

    border: 1px solid var(--chrome-dark);
    border-radius: 8px;

    background: #111;
    color: #fff;

    font-size: 14px;
    outline: none;
}

.admin-product-search input:focus {
    border-color: var(--gold-bright);
}

.admin-product-search input::placeholder {
    color: #888;
}

.admin-search-icon {
    position: absolute;
    left: 14px;

    pointer-events: none;
}

.admin-search-clear {
    position: absolute;
    right: 10px;

    border: none;
    background: transparent;

    color: #aaa;

    font-size: 22px;
    cursor: pointer;
}

.admin-search-clear:hover {
    color: white;
}

.admin-product-search-count {
    margin-bottom: 14px;

    font-size: 12px;
    color: var(--chrome-dark);
}
.admin-image-preview-box,
.admin-gallery-preview-item {
    position: relative;
    display: inline-block;
    margin: 6px;
}

.admin-image-remove {
    position: absolute;
    top: -8px;
    right: -8px;

    width: 24px;
    height: 24px;

    border: none;
    border-radius: 50%;

    background: #d62828;
    color: #fff;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;

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

    z-index: 20;
}

.admin-image-remove:hover {
    transform: scale(1.1);
}
.file-upload-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#catImageFile {
    width: 100%;
    padding: 10px;
    background: #252525;
    color: #fff;
    border: 1px solid #444;
}

#catImageFile::file-selector-button {
    background: var(--gold);
    color: #000;
    border: none;
    padding: 8px 14px;
    margin-right: 10px;
    font-weight: 700;
    cursor: pointer;
}

#catImageFile::file-selector-button:hover {
    filter: brightness(1.08);
}
/* ===============================
   THIN PREMIUM BRAND STRIP
================================ */

.brand-strip-section {
    width: 100%;
    margin: 14px 0;

    background: linear-gradient(
        180deg,
        #151515 0%,
        #080909 50%,
        #121212 100%
    );

    border-top: 1px solid rgba(201, 169, 92, 0.65);
    border-bottom: 1px solid rgba(201, 169, 92, 0.65);

    padding: 7px 0;

    overflow: hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 3px 12px rgba(0,0,0,0.30);
}


/* Visible strip */
.brand-marquee {
    width: 100%;
    overflow: hidden;
}


/* Moving track */
.brand-track {
    display: flex;
    width: max-content;
    animation: brandScrollRight 20s linear infinite;
}


/* Duplicate groups */
.brand-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}


/* BRAND - NO BOX */
.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;

    /* minimum space between brands */
    padding: 4px 8px;

    /* don't use large min-width */
    min-width: auto;

    cursor: pointer;
    flex-shrink: 0;
}


/* Logo */
.brand-item img {
    width: 85px;
    height: 42px;
    object-fit: contain;
    display: block;
}


/* Brand name */
.brand-item span {
    color: #d7d7d7;

    font-family: 'Rajdhani', sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.5px;

    white-space: nowrap;
}


/* Thin separator */
.brand-item::after {
    content: "";

    position: absolute;

    right: 0;
    top: 25%;

    width: 1px;
    height: 50%;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(201,169,92,0.65),
        transparent
    );
}


/* Small hover effect */
.brand-item:hover img {
    transform: scale(1.1);
}

.brand-item:hover span {
    color: #d4af37;
}


/* LEFT → RIGHT continuous movement */
@keyframes brandScrollRight {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}


/* Optional - pause so user can click */
.brand-marquee:hover .brand-track {
    animation-play-state: paused;
}
.brand-showcase-track {
    display: flex;
    width: max-content;

    animation: brandScrollRight 20s linear infinite;
}


.brand-showcase-group {
    display: flex;
    align-items: center;

    /* almost no gap */
    gap: 0;

    flex-shrink: 0;
}


.brand-showcase-item {
    width: auto !important;
    min-width: 0 !important;

    height: 100px;

    padding: 2px 6px !important;
    margin: 0 !important;

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

    flex: 0 0 auto;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    cursor: pointer;
}



.brand-showcase-item img {
    width: auto !important;
    max-width: 165px !important;
    height: 95
    px !important;

    object-fit: contain;

    display: block;

    margin: 0 !important;
    padding: 0 !important;
}



/* Fallback when logo is unavailable */
.brand-showcase-fallback {
    width: 105px;
    height: 55px;

    align-items: center;
    justify-content: center;

    font-size: 28px;
    font-weight: 700;

    color: var(--gold);
}


/* Small hover */
.brand-showcase-item:hover img {
    transform: scale(1.07);
}


/* Continuous LEFT → RIGHT */
@keyframes brandScrollRight {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}


/* Pause when hovering */
.brand-marquee:hover .brand-track {
    animation-play-state: paused;
}
.prod-media {
    overflow: hidden;
    position: relative;
}

.product-hover-image {
    width: 100%;
    height: 100%;
    object-fit: contain;

    transition:
        transform 0.4s ease,
        opacity 0.25s ease;

    transform: scale(1);
}

/* Zoom on hover */
.prod-media:hover .product-hover-image {
    transform: scale(1.18);
}


/* ==============================
   PRODUCT MODAL IMAGE ZOOM
============================== */

.pd-gallery-main {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

#pdMain {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

#pdMainImage {
    width: 100%;
    height: 420px;
    object-fit: contain;
    display: block;

    transform: scale(1);
    transform-origin: center center;

    transition: transform 0.15s ease-out;
    will-change: transform;
}
/* =====================================
   PRODUCT REVIEW FORM
===================================== */

.product-review-form {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.product-review-form h3 {
    font-size: 16px;
    margin-bottom: 14px;
}


/* STAR RATING */

.product-rating-picker {
    display: flex;
    gap: 7px;
    margin-bottom: 15px;
}

.product-rating-picker span {
    font-size: 26px;
    color: var(--chrome-dark);
    cursor: pointer;

    transition:
        color .15s ease,
        transform .15s ease;
}

.product-rating-picker span:hover {
    transform: scale(1.15);
}

.product-rating-picker span.active {
    color: var(--gold-bright);
}


/* REVIEW TEXT */

.product-review-form textarea {
    width: 100%;
    min-height: 100px;

    padding: 12px 14px;

    background: var(--charcoal-2);

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 4px;

    color: var(--white);

    font-family: var(--body);
    font-size: 13px;

    resize: vertical;

    margin-bottom: 14px;
}

.product-review-form textarea:focus {
    outline: none;
    border-color: var(--gold);
}


/* SUBMIT BUTTON */

.product-review-form .btn {
    padding: 11px 24px;
}


.catalogue-result-count {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--chrome-light);
    margin: 8px 0 18px;
    line-height: 1.5;
}

.catalogue-result-count strong {
    color: var(--gold-bright);
    font-weight: 700;
}
/* =========================================================
   RESPONSIVE CATALOGUE
   ========================================================= */

@media (max-width: 900px) {

    #catalogueView {
        padding: 20px;
    }

    #catalogueGrid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;
    }

    .catalogue-header {
        gap: 15px;
        flex-wrap: wrap;
    }
}


@media (max-width: 600px) {

    #catalogueView {
        padding: 14px;
    }

    .catalogue-header {
        display: grid;
        grid-template-columns: 1fr auto;

        align-items: center;

        gap: 10px;

        margin-bottom: 18px;
    }

    .catalogue-header h2 {
        font-size: 22px;
    }

    .catalogue-result-count {
        grid-column: 1 / -1;
        grid-row: 2;

        font-size: 12px;

        margin: 0;
    }

    .catalogue-header .btn {
        grid-column: 2;
        grid-row: 1;

        padding: 9px 11px;

        font-size: 10px;
    }

    #catalogueGrid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .catalogue-filter-area {
        align-items: flex-start;
    }

    .catalogue-filter-btn {
        min-height: 42px;

        padding: 0 14px;

        font-size: 11px;
    }

    .selected-filter-tags {
        width: 100%;
    }
}


@media (max-width: 360px) {

    #catalogueGrid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   CATALOGUE PAGINATION
========================================= */

.catalogue-pagination {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    width: 100%;

    margin-top: 35px;
    padding: 20px 0 30px;
}


.pagination-btn {

    min-width: 42px;
    height: 42px;

    padding: 0 12px;

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

    background: #15171a;

    color: var(--chrome);

    border: 1px solid
        rgba(255,255,255,.15);

    border-radius: 6px;

    font-family: var(--mono);

    font-size: 13px;

    cursor: pointer;

    transition: .2s ease;
}


.pagination-btn:hover:not(:disabled) {

    color: var(--gold-bright);

    border-color: var(--gold);
}


.pagination-btn.active {

    background: var(--gold);

    border-color: var(--gold);

    color: #08090b;

    font-weight: 700;
}


.pagination-btn:disabled {

    opacity: .35;

    cursor: not-allowed;
}


.pagination-dots {

    min-width: 30px;

    text-align: center;

    color: var(--chrome-dark);
}


/* MOBILE */

@media (max-width: 600px) {

    .catalogue-pagination {
        gap: 5px;

        margin-top: 22px;

        padding-bottom: 20px;
    }

    .pagination-btn {

        min-width: 35px;
        height: 35px;

        padding: 0 8px;

        font-size: 11px;
    }

    .pagination-dots {
        min-width: 18px;
    }
}