/* ==========================================================================
   M VISION — custom styles (used alongside Tailwind utility classes)
   ========================================================================== */

:root{
  --mv-navy:#0b1220;
  --mv-navy-2:#111c31;
  --mv-gold:#d4af37;
  --mv-gold-2:#f0cf6a;
  --mv-red:#e0263f;
}

html{scroll-behavior:smooth;}
body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif;background:#f6f7fb;}
.font-display{font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;}

/* Gradient brand backgrounds */
.mv-gradient{background:linear-gradient(135deg,var(--mv-navy) 0%, var(--mv-navy-2) 55%, #1a2b4d 100%);}
.mv-gold-text{color:var(--mv-gold);}
.mv-gold-bg{background:linear-gradient(120deg,var(--mv-gold) 0%, var(--mv-gold-2) 100%);}

/* Sticky category nav underline */
.cat-tab{position:relative;white-space:nowrap;}
.cat-tab.active{color:var(--mv-navy);font-weight:700;}
.cat-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:3px;border-radius:3px;background:var(--mv-gold);}

/* Equipment card */
.equip-card{background:#fff;border-radius:1rem;box-shadow:0 1px 3px rgba(15,23,42,.08);border:1px solid #eef0f5;transition:transform .18s ease, box-shadow .18s ease;overflow:hidden;}
.equip-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -10px rgba(15,23,42,.22);}
.equip-card .equip-img{aspect-ratio:4/3;object-fit:cover;width:100%;background:#e6e9f0;}
.badge-ribbon{position:absolute;top:.75rem;left:0;background:var(--mv-red);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.03em;padding:.28rem .75rem;border-radius:0 .4rem .4rem 0;box-shadow:0 3px 8px rgba(224,38,63,.35);text-transform:uppercase;}
.badge-interactive{background:#0e7490;color:#fff;font-size:.65rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;letter-spacing:.02em;}
.badge-standard{background:#334155;color:#fff;font-size:.65rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;letter-spacing:.02em;}

/* Modal / overlay */
.mv-overlay{position:fixed;inset:0;background:rgba(9,13,24,.6);backdrop-filter:blur(2px);z-index:60;}
.mv-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem;}
.mv-modal-panel{background:#fff;border-radius:1.1rem;max-width:640px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 30px 60px -15px rgba(0,0,0,.35);}
.hidden{display:none !important;}

/* Qty stepper */
.qty-stepper{display:inline-flex;align-items:center;border:1px solid #dfe3ea;border-radius:.6rem;overflow:hidden;}
.qty-stepper button{width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;background:#f3f4f8;color:#111827;font-weight:700;transition:background .15s;}
.qty-stepper button:hover{background:#e7e9f2;}
.qty-stepper input{width:3.2rem;height:2.2rem;text-align:center;border:none;outline:none;font-weight:600;}

/* Variant radio card */
.variant-option{display:flex;align-items:flex-start;gap:.65rem;border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.75rem .9rem;cursor:pointer;transition:border-color .15s, background .15s;}
.variant-option:hover{border-color:#c7cbe0;}
.variant-option.selected{border-color:var(--mv-navy);background:#f4f6fb;}

/* Addon row */
.addon-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem 0;border-bottom:1px solid #f0f1f5;}
.addon-row:last-child{border-bottom:none;}

/* Cart sidebar */
#cart-sidebar{position:fixed;top:0;right:0;height:100%;width:100%;max-width:420px;background:#fff;z-index:80;box-shadow:-10px 0 40px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;}
#cart-sidebar.open{transform:translateX(0);}
.cart-line{border-bottom:1px solid #f0f1f5;padding:.9rem 0;}

/* Scrollbar */
.scroll-thin::-webkit-scrollbar{width:6px;}
.scroll-thin::-webkit-scrollbar-thumb{background:#cbd2e1;border-radius:3px;}

/* Small util */
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.animate-pop{animation:popIn .25s ease;}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

.toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:.65rem 1.1rem;border-radius:.6rem;font-size:.875rem;z-index:100;box-shadow:0 10px 25px rgba(0,0,0,.25);}