/* =========================================================
   MR.KTM — Modern Storefront Design System v2
   ========================================================= */
:root{
  --black:#0b0c10;
  --panel:#14161c;
  --panel-2:#1b1e26;
  --panel-3:#232732;
  --line:#2a2e38;
  --ktm-orange:#ff5c00;
  --ktm-orange-2:#ff8a00;
  --accent-2:#ffb020;
  --text:#f4f3ef;
  --text-dim:#9a9ea9;
  --text-dim-2:#6b7078;
  --good:#2ecf78;
  --bad:#ff5566;
  --info:#4ea1ff;
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --ease:cubic-bezier(.22,1,.36,1);
  --marquee-h:30px;
  --nav-h:72px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black); color:var(--text);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.55;
}
h1,h2,h3,h4,.brand-mark,.inv-logo{font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-.01em;}
code,.mono,.price,.item-code{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,select,textarea{font-family:inherit; font-size:14px;}
.hidden{display:none !important;}
::selection{background:var(--ktm-orange); color:#000;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:var(--ktm-orange); border-radius:10px;}
:focus-visible{outline:2px solid var(--ktm-orange-2); outline-offset:2px;}
@media(prefers-reduced-motion:reduce){
  /* FIXED: this blanket rule was forcing animation-iteration-count:1 onto
     EVERY element via the universal selector — including the free-delivery
     marquee. For anyone with the OS "reduce motion" accessibility setting
     on, the ticker played exactly once and then froze instead of looping
     continuously. Excluded here: unlike a jarring bounce/spin effect, a
     scrolling ticker whose full message doesn't fit the visible width
     becomes permanently truncated and unreadable if stopped after one pass,
     so it's kept exempt from this accessibility reduction. */
  *:not(.promo-marquee-track){animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* =========================================================
   CONFETTI
   ========================================================= */
.confetti-overlay{position:fixed; inset:0; z-index:650; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .15s;}
.confetti-overlay.show{opacity:1;}
.confetti-piece{position:absolute; border-radius:2px; animation:confettiFall 1.8s ease-out forwards;}
@keyframes confettiFall{0%{transform:translate(0,0) rotate(0deg); opacity:1;} 100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0;}}

/* =========================================================
   MARQUEE
   ========================================================= */
.promo-marquee{position:fixed; top:0; left:0; right:0; height:var(--marquee-h); z-index:210; background:linear-gradient(90deg,var(--ktm-orange),var(--ktm-orange-2)); overflow:hidden; display:flex; align-items:center;}
.promo-marquee-track{display:flex; white-space:nowrap; animation:marqueeScroll 22s linear infinite;}
.promo-marquee-track span{padding:0 40px; font-size:11.5px; font-weight:600; letter-spacing:.03em; color:#fff;}
@keyframes marqueeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media(max-width:640px){.promo-marquee-track span{font-size:10px; padding:0 24px;} .promo-marquee-track{animation-duration:16s;}}

/* =========================================================
   NAVBAR — modern e-commerce style
   ========================================================= */
.navbar{position:fixed; top:var(--marquee-h); left:0; right:0; z-index:200; background:rgba(11,12,16,.86); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.05); min-height:var(--nav-h);}
.nav-inner{max-width:1360px; margin:0 auto; padding:12px 26px; display:flex; align-items:center; gap:22px; min-height:100%; flex-wrap:wrap;}
.brand{flex:none; order:1;}
.brand-mark{font-size:23px; letter-spacing:0;}
.brand-mark.small{font-size:20px;}
.brand-mark .dot{color:var(--ktm-orange);}

/* Modern search bar — single pill, icon inside, no suggestion dropdown */
.nav-search-bar{flex:1 1 320px; max-width:640px; order:3; min-width:0;}
.search-box{
  display:flex; align-items:center; gap:10px; background:var(--panel-2);
  border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:6px 6px 6px 18px;
  transition:border-color .25s, box-shadow .25s; min-width:0; max-width:100%; box-sizing:border-box;
}
.search-box:focus-within{border-color:var(--ktm-orange); box-shadow:0 0 0 4px rgba(255,92,0,.12);}
.search-icon{flex:none; color:var(--text-dim);}
.search-box input{flex:1; background:none; border:none; outline:none; color:var(--text); font-size:14.5px; min-width:0; padding:9px 0;}
.search-box input::placeholder{color:var(--text-dim-2);}
.search-clear{display:none; background:none; border:none; color:var(--text-dim); font-size:18px; padding:4px 6px; border-radius:50%;}
.search-clear.show{display:block;}
.search-clear:hover{color:var(--text); background:rgba(255,255,255,.06);}
.search-submit-btn{
  flex:none; display:flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--ktm-orange),var(--ktm-orange-2)); color:#fff;
  border-radius:var(--radius-pill); padding:10px 20px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  transition:filter .2s, transform .2s;
}
.search-submit-btn:hover{filter:brightness(1.1); transform:translateY(-1px);}
.search-submit-icon{display:none; flex:none;}
.search-box.small{border-radius:var(--radius-sm); padding:9px 14px;}
.search-box.small input{padding:2px 0;}
/* FIXED: the search button's text label ("Search") always took up real
   width no matter how much padding/font-size shrank around it — on genuinely
   narrow phones that was still enough to push the whole search bar past the
   viewport width, causing horizontal overflow/scroll. Below ~380px, drop the
   text label entirely and show just the icon — a fixed, compact target
   instead of a word that can't shrink any further. */
@media(max-width:480px){
  .search-submit-btn{padding:8px 12px; font-size:11px;}
  .search-box{padding:5px 5px 5px 12px;}
}
@media(max-width:380px){
  .search-submit-btn{padding:9px; border-radius:50%;}
  .search-submit-label{display:none;}
  .search-submit-icon{display:block;}
}

.nav-links{display:flex; align-items:center; gap:6px; order:4; margin-left:auto;}
.nav-link{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--text-dim);
  padding:9px 14px; border-radius:var(--radius-pill); transition:background .2s, color .2s;
}
.nav-link:hover,.nav-link.active{color:var(--text); background:rgba(255,255,255,.05);}
.nav-icon{flex:none; opacity:.8;}
.nav-link:hover .nav-icon,.nav-link.active .nav-icon{opacity:1; color:var(--ktm-orange-2);}
.currency-selector{
  background:var(--panel-2); border:1.5px solid var(--line); color:var(--text-dim);
  font-size:12.5px; font-weight:600; padding:8px 10px; border-radius:var(--radius-pill);
  outline:none; cursor:pointer; transition:border-color .2s, color .2s;
}
.currency-selector:hover,.currency-selector:focus{color:var(--text); border-color:var(--ktm-orange);}
.currency-selector option{background:var(--panel-2); color:var(--text);}
.cart-badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--ktm-orange); color:#fff; font-size:10px; font-weight:700;}
.cart-badge.bump{animation:badgeBump .4s var(--ease);}
@keyframes badgeBump{0%{transform:scale(1);} 45%{transform:scale(1.5);} 100%{transform:scale(1);}}

.icon-only-link{padding:0; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; transition:all .3s var(--ease);}
.icon-only-link:hover{background:rgba(255,255,255,.06); transform:translateY(-2px);}

.burger{display:none; flex-direction:column; gap:5px; padding:8px; border-radius:8px;}
.burger:hover{background:rgba(255,255,255,.05);}
.burger span{width:22px; height:2px; background:var(--text); display:block; border-radius:2px; transition:all .3s var(--ease);}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* FIXED: this element is meant to be a MOBILE-ONLY persistent cart icon.
   It previously had `display:flex` as the unconditional/default rule, so it
   was also visible on desktop — appearing as a stray extra cart icon on the
   right side of the nav, in addition to the normal "Cart" link already
   inside nav-links. Hidden by default now; the mobile media query below is
   what turns it on. */
/* FIXED (real regression): this was the ONLY cart element left in the page
   — the separate inline "Cart" link that used to live inside nav-links is
   gone — but it was still set to display:none outside the mobile media
   query below, from back when it genuinely was a duplicate of that other
   link. With that other link no longer existing, hiding this one meant
   cart was completely inaccessible on desktop. Now it's the single,
   persistent cart icon, shown on every screen size, pushed to the right
   edge of the nav bar via margin-left:auto (matches standard e-commerce
   placement — cart always at the far right, easy to find). */
/* Simplified for robustness: this element is already the LAST child in the
   nav-inner DOM (after nav-links and the burger), so margin-left:auto alone
   reliably pushes it to the far right on every breakpoint — no order value
   needed, which removes any risk of the mobile media query's order rule
   interacting unexpectedly with this one. flex-shrink:0 guards against it
   ever being squeezed/repositioned if space gets tight. */
/* FIXED — the REAL bug this time: .brand, .nav-search-bar, and .nav-links
   all have explicit order values (1, 3, 4) on this same base/unconditional
   rule set. This element had NO order set, defaulting to order:0 — and
   since flexbox sequences by order value lowest-first, order:0 rendered
   BEFORE .brand's order:1, putting cart at the very front of the nav bar
   on desktop regardless of its actual DOM position. Needs order:5 — higher
   than nav-links' order:4 — to correctly render after everything else. */
.cart-icon-mobile{display:flex; order:5; margin-left:auto; flex-shrink:0; position:relative; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:var(--text); transition:background .2s;}
.cart-icon-mobile:hover{background:rgba(255,255,255,.06);}
.cart-icon-mobile .cart-badge{position:absolute; top:-2px; right:-2px;}

@media(max-width:900px){
  :root{--nav-h:132px;}
  /* Row 1: [burger][brand] .......... [cart]  — Row 2: search bar (full width) */
  .burger{display:flex; order:1;}
  .brand{order:2;}
  .cart-icon-mobile{order:3;}
  .nav-search-bar{flex-basis:100%; max-width:none; order:4;}
  .nav-links{
    position:fixed; top:calc(var(--marquee-h) + var(--nav-h)); left:0; right:auto;
    height:calc(100vh - var(--marquee-h) - var(--nav-h)); width:82%; max-width:340px;
    background:var(--panel); flex-direction:column; align-items:stretch;
    padding:26px 22px; gap:4px; transform:translateX(-100%); transition:transform .4s var(--ease);
    border-right:1px solid var(--line); border-left:none; overflow-y:auto; z-index:220;
    box-shadow:30px 0 80px rgba(0,0,0,.5);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-link{width:100%; justify-content:flex-start; padding:13px 16px;}
  .icon-only-link{width:100%; height:auto; border-radius:var(--radius-sm); justify-content:flex-start; gap:12px; padding:13px 16px;}
  .icon-only-link::before{content:attr(title); font-size:13.5px; font-weight:600; color:var(--text-dim);}
  .icon-only-link:hover{transform:none; background:rgba(255,92,0,.08);}
  .profile-dropdown{position:static; width:100%; margin-top:6px; box-shadow:none;}
  .page,#page-home{padding-top:calc(var(--marquee-h) + var(--nav-h) + 10px);}
}
@media(max-width:480px){:root{--nav-h:122px; --marquee-h:26px;}}

/* =========================================================
   PROFILE — shows the account name, not just an icon
   ========================================================= */
.profile-wrap{position:relative;}
.profile-avatar-slot{display:flex; align-items:center; gap:8px; max-width:150px;}
.profile-avatar-slot img{width:26px; height:26px; border-radius:50%; object-fit:cover; border:1.5px solid var(--ktm-orange); flex:none;}
.profile-avatar-slot .initials{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--ktm-orange),var(--ktm-orange-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none;}
.profile-avatar-slot .profile-name-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-dropdown{position:absolute; top:calc(100% + 12px); right:0; width:230px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .25s var(--ease); z-index:60; overflow:hidden;}
.profile-dropdown.open{opacity:1; visibility:visible; transform:translateY(0);}
.pd-head{padding:14px 18px; font-size:13px; color:var(--text-dim); border-bottom:1px solid var(--line); word-break:break-word;}
.pd-item{display:block; width:100%; text-align:left; padding:12px 18px; color:var(--text); font-size:13px; font-weight:500; border-bottom:1px solid var(--line); transition:background .15s;}
.pd-item:last-child{border-bottom:none;}
.pd-item:hover{background:rgba(255,92,0,.1);}
.pd-logout{color:var(--bad);}

/* =========================================================
   HOME — HERO (split layout, smaller heading, HD-style bike art)
   ========================================================= */
.home-banner{
  position:relative; overflow:hidden; padding:64px 26px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 60% at 15% 10%, rgba(255,92,0,.2), transparent 60%),
    radial-gradient(ellipse 55% 55% at 85% 90%, rgba(255,176,32,.14), transparent 60%),
    linear-gradient(180deg,#111319,var(--black));
  background-size:160% 160%, 160% 160%, 100% 100%;
  animation:heroDrift 16s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  0%{background-position:0% 0%, 100% 100%, 0 0;}
  100%{background-position:14% 10%, 86% 90%, 0 0;}
}
.home-banner::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, rgba(255,92,0,.07), transparent 65%);
  animation:heroGlow 6s ease-in-out infinite;
}
@keyframes heroGlow{0%,100%{opacity:.6;} 50%{opacity:1;}}
.banner-inner-center{position:relative; z-index:2; max-width:640px; margin:0 auto; text-align:center;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ktm-orange-2); margin-bottom:14px;}
.home-banner h1{font-size:clamp(24px,3.4vw,38px); line-height:1.18; margin-bottom:14px;}
.home-banner h1 span{color:var(--ktm-orange);}
.banner-sub{color:var(--text-dim); font-size:14.5px; max-width:440px; margin:0 auto 22px;}
.banner-buttons{display:flex; gap:14px; justify-content:center; margin-bottom:26px;}
.trust-row{display:flex; gap:22px; flex-wrap:wrap; justify-content:center;}
.trust-item{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); font-weight:600;}
.trust-item svg{color:var(--ktm-orange-2); flex:none;}
@media(max-width:640px){.home-banner{padding:44px 18px;}}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section-header{max-width:1360px; margin:0 auto; padding:0 26px; text-align:center; margin-bottom:28px;}
.section-header h2{font-size:clamp(21px,2.8vw,28px); margin-bottom:8px;}
.section-header p{color:var(--text-dim); font-size:13.5px;}
.featured-section{padding:44px 0 64px;}
.categories-section{padding:44px 0 20px;}
.categories-grid{
  max-width:1360px; margin:0 auto; padding:0 26px; display:flex; gap:28px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.categories-grid::-webkit-scrollbar{display:none;}
@media(min-width:900px){.categories-grid{justify-content:center; flex-wrap:wrap;}}
.category-card{flex:0 0 90px; display:flex; flex-direction:column; align-items:center; gap:12px; cursor:pointer; transition:transform .3s var(--ease);}
.category-card:hover{transform:translateY(-4px);}
.cat-icon-circle{
  width:78px; height:78px; border-radius:50%; background:var(--panel); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease); overflow:hidden;
}
.cat-icon-circle svg{color:var(--ktm-orange-2);}
.cat-icon-circle img{width:100%; height:100%; object-fit:cover;}
.category-card:hover .cat-icon-circle{border-color:var(--ktm-orange); background:var(--panel-2); box-shadow:0 10px 24px rgba(255,92,0,.2);}
.cat-name{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim); text-align:center; white-space:nowrap; font-weight:600; transition:color .2s;}
.category-card:hover .cat-name{color:var(--text);}
.featured-section:first-of-type{padding-top:52px;}

/* =========================================================
   PRODUCT GRID / CARDS
   ========================================================= */
.products-grid{max-width:1360px; margin:0 auto; padding:0 26px; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;}
/* FIXED: this base rule (used directly by the Shop page grid) had no mobile
   breakpoints at all — only the .arrivals-grid modifier (home page) did. On
   small screens, minmax(230px,1fr) can't fit two columns, so auto-fill
   silently collapsed Shop to a single column. Both grids now share the same
   responsive steps, and stay at 2 columns even on the smallest phones. */
@media(max-width:640px){.products-grid{grid-template-columns:repeat(2,1fr); gap:10px; padding:0 14px;}}
.arrivals-grid{grid-template-columns:repeat(5,1fr);}
@media(max-width:1150px){.arrivals-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:840px){.arrivals-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.arrivals-grid{grid-template-columns:repeat(2,1fr); gap:10px; padding:0 14px;}}
.load-more-wrap{display:flex; justify-content:center; margin-top:28px;}

.product-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; display:flex; flex-direction:column; position:relative;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
  animation:cardIn .4s var(--ease) both; content-visibility:auto; contain-intrinsic-size:320px;
}
.product-card:hover{transform:translateY(-5px); border-color:var(--ktm-orange); box-shadow:0 18px 36px rgba(0,0,0,.35);}
@keyframes cardIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}

/* Skeleton loading placeholder — shown in the grids while the initial
   product fetch is still in flight (slow connection, cold-starting backend,
   etc.) instead of blank space or a misleading "no products" message. */
.skeleton-card{cursor:default; pointer-events:none;}
.skeleton-card:hover{transform:none; box-shadow:none;}
.skeleton-block{background:linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%); background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:6px;}
.skeleton-image{width:100%; height:170px; border-radius:0;}
.skeleton-line{height:12px; margin:8px 0;}
@keyframes shimmer{0%{background-position:200% 0;} 100%{background-position:-200% 0;}}
@media(max-width:640px){.skeleton-image{height:120px;}}

.product-image-frame{position:relative;}
.product-image{width:100%; height:170px; object-fit:cover; display:block; background:var(--panel-2); transition:transform .5s var(--ease);}
.product-card:hover .product-image{transform:scale(1.06);}
.product-image-placeholder{width:100%; height:170px; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(160deg,var(--panel-2),var(--panel));}
.discount-badge{position:absolute; top:10px; left:10px; background:var(--bad); color:#fff; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:6px; z-index:2;}

/* In/Out of stock badge on the product detail page. */
.stock-badge{display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 12px; border-radius:var(--radius-pill);}
.stock-badge.in-stock{background:rgba(46,207,120,.12); color:var(--good);}
.stock-badge.out-of-stock{background:rgba(255,85,102,.12); color:var(--bad);}
/* Small out-of-stock note on product cards — no overlay on the image itself,
   the photo stays fully visible for every product regardless of stock. */
.stock-note-small{font-size:11px; font-weight:700; color:var(--bad); text-transform:uppercase; letter-spacing:.03em; margin-top:2px;}

/* Share icon — floating at the TOP of the card, over the image */
.btn-icon-share{
  position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(11,12,16,.62); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1); color:#fff; transition:all .25s var(--ease);
}
.btn-icon-share:hover{background:var(--ktm-orange); border-color:var(--ktm-orange); transform:scale(1.08);}
.detail-actions .btn-icon-share{position:static; width:48px; height:48px; background:var(--panel-2); border:1.5px solid var(--line); color:var(--text-dim);}
.detail-actions .btn-icon-share:hover{color:#fff;}

.product-info{padding:13px 15px; display:flex; flex-direction:column; gap:5px; flex:1;}
.product-tag-row{display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-dim-2); text-transform:uppercase; letter-spacing:.03em;}
.product-tag-row .brand-pill{background:var(--panel-3); color:var(--ktm-orange-2); padding:2px 8px; border-radius:6px; font-weight:700;}
.product-code{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim-2);}
.product-name{font-size:13.5px; font-weight:600; line-height:1.35; min-height:36px;}
.price-row{display:flex; align-items:baseline; gap:8px; margin-top:2px; flex-wrap:wrap;}
.product-price{font-size:18px; font-weight:800; color:var(--accent-2);}
.product-price-old{font-size:11.5px; color:var(--text-dim); text-decoration:line-through;}
.product-actions{display:flex; gap:8px; margin-top:auto; padding-top:10px;}
.product-actions .btn{flex:1; padding:9px 8px; font-size:10.5px;}
@media(max-width:640px){
  .product-image,.product-image-placeholder{height:120px;}
  .product-info{padding:10px 11px;}
  .product-name{font-size:12px; min-height:32px;}
  .product-price{font-size:15px;}
  .product-actions .btn{padding:8px 5px; font-size:9.5px;}
  .btn-icon-share{width:28px; height:28px;}
}

/* =========================================================
   SHOP / CART PAGES
   ========================================================= */
.page{display:none; padding-top:calc(var(--nav-h) + var(--marquee-h) + 10px);}
.page.active{display:block; animation:pageIn .35s var(--ease) both;}
@keyframes pageIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
#page-shop,#page-cart{max-width:1360px; margin:0 auto; padding-left:26px; padding-right:26px; padding-bottom:80px;}
#page-shop h2,#page-cart h2{font-size:clamp(22px,3vw,30px); margin:26px 0 22px;}
#page-home{padding-top:calc(var(--nav-h) + var(--marquee-h));}

.shop-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; max-width:1360px; margin:0 auto 24px; padding:0 26px;}
.shop-filters{display:flex; gap:10px; flex-wrap:wrap;}
.filter-select,.filter-search{padding:11px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--panel); color:var(--text); font-size:13.5px; outline:none; transition:border-color .2s;}
.filter-select:focus,.filter-search:focus{border-color:var(--ktm-orange);}
.filter-search{min-width:210px;}
@media(max-width:640px){.shop-filters{width:100%;} .filter-select,.filter-search{flex:1 1 140px;}}

.empty-state{text-align:center; padding:60px 20px; color:var(--text-dim);}
.empty-state svg{margin-bottom:16px; color:var(--ktm-orange);}
.empty-state h3{color:var(--text); margin-bottom:8px; font-size:20px;}
.empty-state .btn{margin-top:18px;}

.cart-layout{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start;}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr;}}
.cart-items-panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.cart-items{display:flex; flex-direction:column;}
.cart-item{display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:16px; padding:18px; border-bottom:1px solid var(--line); animation:cardIn .3s var(--ease) both;}
.cart-item:last-child{border-bottom:none;}
.cart-item img,.cart-item .ci-placeholder{width:84px; height:84px; object-fit:cover; border-radius:10px; background:var(--panel-2);}
.cart-item .ci-placeholder{display:flex; align-items:center; justify-content:center; font-size:30px;}
.cart-item-info .name{font-size:15px; font-weight:600; line-height:1.35;}
.cart-item-info .code{font-size:11px; color:var(--text-dim); margin:4px 0 10px; font-family:'JetBrains Mono',monospace;}
.cart-item-info .ci-price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:12px;}
.cart-item-info .ci-price{font-size:16px; font-weight:700; color:var(--accent-2);}
.cart-item-info .ci-price-old{font-size:12px; color:var(--text-dim); text-decoration:line-through;}
.cart-item-controls{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.cart-item-qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.cart-item-qty button{width:30px; height:30px; border:none; background:var(--panel-2); color:var(--text); font-size:16px; transition:background .15s;}
.cart-item-qty button:hover{background:var(--ktm-orange); color:#fff;}
.cart-item-qty input{width:42px; text-align:center; background:var(--black); border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); color:var(--text); height:30px;}
.cart-item-remove{background:none; border:none; color:var(--bad); font-size:12px; font-weight:700; text-transform:uppercase;}
.cart-item-total{text-align:right; font-size:17px; font-weight:700; white-space:nowrap; color:var(--accent-2);}
@media(max-width:600px){
  .cart-item{grid-template-columns:60px 1fr; grid-template-rows:auto auto;}
  .cart-item img,.cart-item .ci-placeholder{width:60px; height:60px;}
  .cart-item-total{grid-column:2; text-align:left;}
}
.cart-summary-panel{position:sticky; top:calc(var(--nav-h) + var(--marquee-h) + 20px);}
.cart-summary{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.cart-summary-title{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; font-weight:700;}
.cart-totals div{display:flex; justify-content:space-between; padding:9px 0; font-size:14px; color:var(--text-dim); border-bottom:1px dashed var(--line);}
.cart-totals .cd-savings{color:var(--good);}
.cart-totals .grand{border-top:2px solid var(--line); border-bottom:none; margin-top:6px; padding-top:14px; font-size:17px; color:var(--text); font-weight:700;}
.cart-totals .grand b{color:var(--accent-2);}
.cart-summary .btn{margin-top:18px; width:100%;}

/* =========================================================
   PRODUCT DETAIL MODAL
   ========================================================= */
/* FIXED (part 1): unlike every other modal, this one has no <h3> heading —
   so its content (the product image) used to start immediately at the
   modal's edge, landing in the exact same top-right region as the
   absolutely-positioned close button. padding-top pushes it clear. */
#productDetailContent{display:flex; gap:28px; flex-wrap:wrap; padding-top:26px;}
.detail-gallery{flex:1 1 280px; position:relative;}
.detail-gallery .main-img{width:100%; border-radius:var(--radius-sm); object-fit:cover; max-height:340px; background:var(--panel-2); display:block;}
.detail-thumbs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.detail-thumbs img{width:56px; height:56px; object-fit:cover; border-radius:8px; border:2px solid var(--line); cursor:pointer;}
.detail-thumbs img.active{border-color:var(--ktm-orange);}
.detail-info{flex:1 1 280px; display:flex; flex-direction:column; gap:10px;}
.detail-code{font-size:12px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
.detail-name{font-size:21px; font-weight:700; line-height:1.3;}
.detail-price-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.detail-price{font-size:27px; font-weight:800; color:var(--accent-2);}
.detail-price-old{font-size:14px; color:var(--text-dim); text-decoration:line-through;}
.detail-savings{font-size:12px; color:var(--good); font-weight:700; background:rgba(46,207,120,.12); padding:4px 10px; border-radius:var(--radius-pill);}
.detail-desc{font-size:13.5px; color:var(--text-dim); line-height:1.6;}
.detail-gst{font-size:12px; color:var(--text-dim);}
.detail-actions{display:flex; gap:12px; margin-top:auto; padding-top:10px;}
.detail-actions .btn{flex:1;}

/* =========================================================
   SHARE MODAL
   ========================================================= */
.share-modal{max-width:360px; text-align:center;}
.share-modal h3{margin-bottom:22px;}
.share-icons-row{display:flex; justify-content:center; gap:22px;}
.share-icon-btn{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease);}
.share-icon-btn:hover{transform:translateY(-4px) scale(1.06);}
.share-icon-btn.share-whatsapp{background:transparent;}
.share-icon-btn.share-email{background:linear-gradient(135deg,#4ea1ff,#2f6fd6);}
.share-icon-btn.share-sms{background:linear-gradient(135deg,#2ecf78,#1fa860);}

/* =========================================================
   CHECKOUT MODAL
   ========================================================= */
.checkout-modal{max-width:520px;}
.checkout-form{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}
.checkout-form .field.full{grid-column:1/-1;}
.checkout-form .field label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px;}
.checkout-form input,.checkout-form select,.checkout-form textarea{width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--black); color:var(--text); font-size:14px; outline:none; transition:border-color .2s; resize:vertical;}
.checkout-form input:focus,.checkout-form select:focus,.checkout-form textarea:focus{border-color:var(--ktm-orange);}
@media(max-width:520px){.checkout-form{grid-template-columns:1fr;}}
.checkout-summary{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; font-size:14px; margin-bottom:12px;}
.checkout-summary .cs-row{display:flex; justify-content:space-between; margin-bottom:6px;}
.checkout-summary .cs-grand{border-top:1px solid var(--line); margin-top:10px; padding-top:10px; font-weight:700; color:var(--ktm-orange);}
.free-shipping-tag{color:var(--good); font-weight:800;}
.free-shipping-banner{background:rgba(46,207,120,.1); border:1px solid rgba(46,207,120,.3); color:var(--good); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:var(--radius-sm); margin:10px 0; text-align:center;}
.checkout-actions .btn{width:100%;}

/* =========================================================
   PROFILE / POLICY MODALS
   ========================================================= */
.profile-edit-modal{max-width:460px;}
.profile-photo-row{display:flex; align-items:center; gap:18px; margin-bottom:20px;}
.profile-photo-preview{width:74px; height:74px; border-radius:50%; overflow:hidden; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-size:30px; border:2px solid var(--line); flex:none; position:relative;}
/* Photo crop modal — Cropper.js needs a fixed-height container with the
   image sized to fill it; it handles all the drag/zoom interaction itself. */
.crop-container{width:100%; max-height:360px; overflow:hidden; border-radius:var(--radius-sm); background:var(--black); margin:16px 0;}
.crop-container img{max-width:100%; display:block;}
.profile-photo-preview img{width:100%; height:100%; object-fit:cover;}
.policy-modal{max-width:600px;}
.policy-text{font-size:13.5px; color:var(--text-dim); line-height:1.7; max-height:60vh; overflow-y:auto; padding-right:4px;}
.policy-text p{margin:0 0 14px;}
.policy-text b{color:var(--text);}
.policy-note{font-style:italic; font-size:12px; color:var(--text-dim); opacity:.75; border-top:1px dashed var(--line); padding-top:12px;}

/* =========================================================
   MY ORDERS — Flipkart-style tracking
   ========================================================= */
.my-orders-modal{max-width:640px;}
.orders-track-list{display:flex; flex-direction:column; gap:18px; max-height:70vh; overflow-y:auto; padding-right:4px;}
.order-track-card{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px;}
.otc-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.otc-head .otc-id{font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
.otc-head .otc-meta{font-size:13px; font-weight:600; margin-top:3px;}
.otc-total{font-size:16px; font-weight:800; color:var(--accent-2); white-space:nowrap;}

.tracker{display:flex; align-items:flex-start; margin:20px 4px 10px;}
.tracker-step{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;}
.tracker-dot{width:26px; height:26px; border-radius:50%; background:var(--panel-3); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-dim); z-index:2; transition:all .4s var(--ease);}
.tracker-step.done .tracker-dot{background:var(--good); border-color:var(--good); color:#fff;}
.tracker-step.current .tracker-dot{background:var(--ktm-orange); border-color:var(--ktm-orange); color:#fff; animation:pulseDot 1.6s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(255,92,0,.45);} 50%{box-shadow:0 0 0 7px rgba(255,92,0,0);}}
.tracker-line{position:absolute; top:13px; left:-50%; width:100%; height:2px; background:var(--line); z-index:1;}
.tracker-step:first-child .tracker-line{display:none;}
.tracker-step.done .tracker-line,.tracker-step.current .tracker-line{background:var(--good);}
.tracker-label{font-size:10px; margin-top:8px; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.02em;}
.tracker-step.done .tracker-label,.tracker-step.current .tracker-label{color:var(--text);}
@media(max-width:560px){.tracker-label{font-size:8.5px;} .tracker-dot{width:22px; height:22px;}}

.otc-status-msg{display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); background:rgba(46,207,120,.08); border:1px solid rgba(46,207,120,.25); font-size:13px; color:var(--text);}
.otc-status-msg.is-cancelled{background:rgba(255,85,102,.08); border-color:rgba(255,85,102,.3);}
.otc-status-msg.is-placed{background:rgba(78,161,255,.08); border-color:rgba(78,161,255,.3);}
.otc-status-msg svg{flex:none; color:var(--good);}
.otc-status-msg.is-cancelled svg{color:var(--bad);}
.otc-status-msg.is-placed svg{color:var(--info);}
.payment-badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill); margin-left:6px;}
.payment-badge.pay-pending{background:rgba(255,193,69,.14); color:var(--accent-2);}
.payment-badge.pay-failed{background:rgba(255,85,102,.14); color:var(--bad);}

/* =========================================================
   AUTH MODAL
   ========================================================= */
.auth-forgot{text-align:right; margin:-4px 0 14px; font-size:12px;}
.auth-forgot a{color:var(--ktm-orange-2);}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative; border-top:1px solid var(--line); padding:52px 20px 24px;
  background:linear-gradient(180deg, var(--panel-2) 0%, var(--black) 100%);
  overflow:hidden;
}
.footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--ktm-orange), var(--accent-2), #ff4fa3, var(--ktm-orange-2), var(--ktm-orange));
  background-size:250% 100%; animation:footerGlow 7s ease-in-out infinite;
}
@keyframes footerGlow{0%,100%{background-position:0% 0;} 50%{background-position:100% 0;}}
.footer-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; position:relative; text-align:center;}
@media(max-width:820px){.footer-inner{grid-template-columns:1fr 1fr; gap:28px;}}
@media(max-width:520px){.footer-inner{grid-template-columns:1fr;}}
.footer-col{display:flex; flex-direction:column; align-items:center; gap:10px; font-size:13.5px;}
.footer-col-title{font-size:11px; letter-spacing:.08em; color:var(--accent-2); margin-bottom:2px; text-transform:uppercase; font-weight:700;}
.footer-col a{transition:color .2s, transform .2s; display:inline-block; color:var(--text-dim);}
.footer-intl-note{font-size:12px; color:var(--text-dim-2); margin-top:6px;}
.footer-col a:hover{color:var(--ktm-orange-2); transform:translateY(-1px);}
.footer-icon-link{display:inline-flex !important; align-items:center; gap:9px;}
.footer-icon-link svg{flex:none; transition:transform .25s var(--ease);}
.footer-icon-link:hover svg{transform:scale(1.15);}
.footer-brand p{color:var(--text-dim); font-size:13px; margin-top:6px; line-height:1.6; text-align:center;}
.pay-icons{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.pay-badge{width:36px; height:36px; border-radius:9px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.pay-badge svg{width:100%; height:100%;}
.pay-badge:hover{transform:translateY(-3px) scale(1.06); box-shadow:0 8px 20px rgba(0,0,0,.35);}
.footer-bottom{max-width:1200px; margin:38px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 20px; font-size:12px; color:var(--text-dim); position:relative; text-align:center;}
.dev-link{background:linear-gradient(90deg,var(--ktm-orange),var(--accent-2),#ff4fa3,var(--ktm-orange-2),var(--ktm-orange)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; animation:devShine 4.5s linear infinite;}
@keyframes devShine{0%{background-position:0% 0;} 100%{background-position:300% 0;}}

/* =========================================================
   TOAST
   ========================================================= */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--panel-2); border:1px solid var(--ktm-orange); color:var(--text); padding:14px 24px; border-radius:var(--radius-pill); font-size:13.5px; z-index:999; opacity:0; pointer-events:none; transition:all .35s var(--ease); box-shadow:var(--shadow); max-width:90vw; text-align:center;}

/* =========================================================
   BOTTOM ANCHOR AD (Google AdSense)
   ========================================================= */
.bottom-ad-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:150; /* below modals (500+) so it never covers a dialog */
  background:var(--panel); border-top:1px solid var(--line); padding:8px 40px 8px 12px;
  display:flex; align-items:center; justify-content:center; min-height:52px;
  box-shadow:0 -4px 16px rgba(0,0,0,.25);
}
.bottom-ad-bar.hidden{display:none;}
.bottom-ad-close{
  position:absolute; top:6px; right:8px; width:24px; height:24px; border-radius:50%;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.bottom-ad-close:hover{color:#fff; background:var(--ktm-orange); border-color:var(--ktm-orange);}
/* When the ad bar is visible, nudge page content up so it isn't hidden behind it. */
body.has-bottom-ad .page{padding-bottom:64px;}

/* =========================================================
   IN-FEED PRODUCT GRID AD CARD
   ========================================================= */
.product-ad-card{
  grid-column:span 1; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; display:flex; flex-direction:column; min-height:280px;
}
.product-ad-card .ad-label{font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim-2); margin-bottom:6px; text-align:center;}

.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* =========================================================
   MODALS — close icon alignment fixed with proper flex centering
   ========================================================= */
.modal-backdrop{position:fixed; inset:0; background:rgba(4,4,6,.78); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; z-index:500; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; padding:20px;}
.modal-backdrop.open{opacity:1; visibility:visible;}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:34px; width:100%; max-width:460px; position:relative; box-shadow:var(--shadow); transform:translateY(18px) scale(.98); transition:transform .35s var(--ease); max-height:88vh; overflow-y:auto;}
.modal-backdrop.open .modal{transform:translateY(0) scale(1);}
.auth-modal{max-width:440px;}
.product-detail-modal{
  max-width:780px; max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
}
.product-detail-modal #productDetailContent{
  overflow-y:auto; padding-right:6px; flex:1; min-height:0; /* small gutter so the scrollbar doesn't sit flush against content */
}
.checkout-modal{max-width:520px;}
.profile-edit-modal{max-width:460px;}
.my-orders-modal{max-width:640px;}
.policy-modal{max-width:600px;}
.share-modal{max-width:360px;}
/* FIXED: the share modal is meant to open ON TOP of whatever modal launched
   it (product detail view, or a product card). Its backdrop (#shareModal)
   shared the same z-index as every other modal-backdrop, so whichever one
   happened to sit later in the HTML source painted on top — and
   #productDetailModal comes after #shareModal in the markup, so opening
   Share from inside a product's detail view opened the share modal
   *invisibly* behind the still-open detail modal. Targeting the backdrop by
   ID gives it a firmly higher z-index regardless of source order. */
#shareModal{z-index:600;}
.invoice-modal{max-width:860px;}
.product-edit-modal{max-width:660px;}
.admin-modal{max-width:1080px;}
@media(max-width:640px){.modal-backdrop{padding:12px;} .modal{padding:22px 18px; max-width:100% !important; border-radius:14px;}}

/* FIXED: close button is now a fixed-size flex-centered circle pinned to the
   corner with consistent inset on every modal, instead of relying on
   font-size/line-height to "look" centered — that was the alignment bug. */
.modal-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
  font-size:20px; line-height:1; transition:all .2s var(--ease); z-index:5;
}
.modal-close:hover{color:#fff; background:var(--ktm-orange); border-color:var(--ktm-orange); transform:rotate(90deg);}

.gate-input{width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--black); color:var(--text); font-size:14.5px; margin-bottom:14px; outline:none; transition:border-color .25s;}
.password-field{position:relative;}
.password-field .gate-input{padding-right:44px;}
.password-toggle{position:absolute; top:0; bottom:14px; right:4px; width:36px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:color .2s;}
.password-toggle:hover{color:var(--text);}
.password-toggle svg{width:19px; height:19px;}
.password-toggle .slash{transition:opacity .15s;}
.password-toggle.is-visible .slash{opacity:0;}
.gate-input:focus{border-color:var(--ktm-orange);}
.gate-error{color:var(--bad); font-size:12px; min-height:16px; margin-top:10px;}
.gate-success{color:var(--good); font-size:12.5px; margin-top:10px; padding:10px 12px; background:rgba(46,207,120,.1); border:1px solid rgba(46,207,120,.3); border-radius:var(--radius-sm); line-height:1.5;}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);}}

.auth-toggle{display:flex; gap:8px; margin-bottom:20px; background:var(--panel-2); border-radius:var(--radius-pill); padding:5px;}
.auth-tab{flex:1; padding:10px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-dim); transition:all .25s var(--ease);}
.auth-tab.active{background:linear-gradient(135deg,var(--ktm-orange),var(--ktm-orange-2)); color:#fff;}
.auth-modal h3{margin-bottom:6px; font-size:19px;}
.auth-modal p{color:var(--text-dim); font-size:13px; margin-bottom:18px;}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{border-radius:var(--radius-pill); padding:12px 22px; font-weight:700; font-size:13px; letter-spacing:.02em; transition:all .2s var(--ease); text-transform:none;}
.btn-primary{background:linear-gradient(135deg,var(--ktm-orange),var(--ktm-orange-2)); color:#fff;}
.btn-primary:hover{filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 10px 22px rgba(255,92,0,.3);}
.btn-primary:active,.btn-outline:active,.btn-danger:active{transform:scale(.96);}
.btn-outline{background:none; border:1.5px solid var(--line); color:var(--text);}
.btn-outline:hover{border-color:var(--ktm-orange); color:var(--ktm-orange-2);}
.btn-danger{background:var(--bad); color:#fff;}
.btn-danger:hover{filter:brightness(1.1); transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px; font-size:11.5px;}
.btn:disabled{opacity:.6; cursor:not-allowed; transform:none !important;}

/* =========================================================
   LOADER / SPINNER — a small spinning motorcycle wheel (rim, hub, spokes)
   used consistently everywhere an async action is in flight: login,
   register, password reset, profile save, photo upload/crop, checkout, and
   the main admin save actions. Applied via the setButtonLoading() JS
   helper, which swaps a button's content for this spinner + keeps it
   disabled until the request resolves, then restores the original label.
   ========================================================= */
.btn-spinner{
  display:inline-block; width:17px; height:17px; color:#fff;
  animation:spin .8s linear infinite; vertical-align:-4px; margin-right:8px;
}
.btn-outline .btn-spinner{color:var(--ktm-orange);}
@keyframes spin{to{transform:rotate(360deg);}}

/* Standalone version (not inside a button) — used over the profile photo
   preview while an upload/crop is processing. */
.loader-overlay{position:absolute; inset:0; background:rgba(11,12,16,.65); border-radius:inherit; display:flex; align-items:center; justify-content:center;}
.loader-overlay .btn-spinner{width:24px; height:24px; margin:0;}

/* Centered loading overlay — reusable for any brief loading window (used
   for the admin dashboard's initial parallel data fetches). Sits above
   modals since it's meant to cover whatever's opening. */
.center-loader{
  position:fixed; inset:0; z-index:700; display:flex; align-items:center; justify-content:center;
  background:rgba(11,12,16,.7); backdrop-filter:blur(3px);
}
.center-loader-spinner{
  width:52px; height:52px; border-radius:50%;
  border:4px solid rgba(255,92,0,.2); border-top-color:var(--ktm-orange);
  animation:spin .8s linear infinite;
}

/* =========================================================
   INVOICE MODAL
   ========================================================= */
.invoice-modal h3{margin-bottom:18px; font-size:20px;}
.invoice-toggle-row{display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:14px 16px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);}
.toggle-label span{display:block; font-size:13px; font-weight:600;}
.toggle-label small{display:block; font-size:11px; color:var(--text-dim); margin-top:3px;}
.switch{position:relative; display:inline-block; width:46px; height:26px; flex:none;}
.switch input{opacity:0; width:0; height:0; position:absolute;}
.slider{position:absolute; cursor:pointer; inset:0; background:var(--line); transition:.3s var(--ease); border-radius:26px;}
.slider::before{content:""; position:absolute; height:20px; width:20px; left:3px; bottom:3px; background:#fff; transition:.3s var(--ease); border-radius:50%;}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--ktm-orange),var(--ktm-orange-2));}
.switch input:checked + .slider::before{transform:translateX(20px);}
.invoice-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}
.field.full{grid-column:1 / -1;}
.field label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px;}
.field input{width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--black); color:var(--text); font-size:14px; outline:none; transition:border-color .2s;}
.field input:focus{border-color:var(--ktm-orange);}
@media(max-width:640px){.invoice-grid{grid-template-columns:1fr;}}
.opt-label{color:var(--text-dim); font-weight:400; text-transform:none; letter-spacing:0; font-size:10px;}
.customer-found-hint{grid-column:1 / -1; font-size:12px; color:var(--good); background:rgba(46,207,120,.1); border:1px solid rgba(46,207,120,.3); padding:8px 12px; border-radius:var(--radius-sm);}
.invoice-add-item{position:relative; margin-bottom:18px;}
.invoice-search-results{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); max-height:260px; overflow-y:auto; z-index:20; display:none; box-shadow:var(--shadow);}
.invoice-search-results.show{display:block;}
.isr-item{padding:12px 16px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; justify-content:space-between; gap:10px;}
.isr-item:last-child{border-bottom:none;}
.isr-item:hover{background:rgba(255,92,0,.1);}
.isr-name{font-size:13px;}
.isr-code{font-size:11px; color:var(--text-dim);}
.table-wrap{overflow-x:auto; margin-bottom:18px; border:1px solid var(--line); border-radius:var(--radius-sm);}
.invoice-table{width:100%; border-collapse:collapse; font-size:13px; min-width:560px;}
.invoice-table th{text-align:left; padding:12px 14px; background:var(--panel-2); color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
.invoice-table td{padding:10px 14px; border-top:1px solid var(--line);}
.no-items-row td{color:var(--text-dim); text-align:center; padding:26px;}
.qty-input,.rate-input{width:72px; padding:6px 8px; background:var(--black); border:1px solid var(--line); border-radius:6px; color:var(--text); text-align:center;}
.row-remove{background:none; border:none; color:var(--bad); font-size:18px;}
.invoice-totals{display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin-bottom:22px; font-size:14px;}
.invoice-totals div{display:flex; gap:16px; width:260px; justify-content:space-between;}
.invoice-totals .grand{font-size:18px; padding-top:8px; border-top:1px solid var(--line);}
.invoice-totals .grand b{color:var(--accent-2);}
.invoice-actions{display:flex; gap:14px; justify-content:flex-end; flex-wrap:wrap;}

/* =========================================================
   PRINTABLE INVOICE (kept intentionally light/print-safe, not dark-themed)
   ========================================================= */
.invoice-print-area{position:fixed; left:-9999px; top:0; width:794px; background:#fff;}
.inv-doc{width:794px; padding:40px; background:#fff; color:#1a1a1a; font-family:'Inter',sans-serif;}
.inv-head{display:flex; justify-content:space-between; align-items:flex-start;}
.inv-logo{font-family:'Sora',sans-serif; font-size:26px; font-weight:800; color:#111;}
.inv-logo span{color:var(--ktm-orange);}
.inv-brand p{font-size:11px; color:#555; margin:3px 0 0;}
.inv-meta{text-align:right;}
.inv-meta h2{font-family:'Sora',sans-serif; font-size:19px; letter-spacing:.06em; color:var(--ktm-orange);}
.inv-meta p{font-size:12px; margin:4px 0 0; color:#333;}
.inv-divider{height:3px; background:linear-gradient(90deg,var(--ktm-orange),var(--accent-2)); margin:20px 0;}
.inv-bill-to{display:flex; justify-content:space-between; margin-bottom:24px; gap:20px;}
.inv-bill-to h3{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#888; margin-bottom:6px;}
.inv-bill-to p{font-size:13px; margin:2px 0; color:#222;}
.inv-table{width:100%; border-collapse:collapse; font-size:10.5px; table-layout:fixed;}
.inv-table th{background:#111; color:#fff; text-align:left; padding:7px 6px; font-size:8.5px; text-transform:uppercase;}
.inv-table td{padding:6px; border-bottom:1px solid #e6e6e6; color:#222; word-wrap:break-word;}
.inv-table td:nth-child(5),.inv-table td:nth-child(6),.inv-table td:nth-child(7),.inv-table td:nth-child(8),.inv-table td:nth-child(9),
.inv-table th:nth-child(5),.inv-table th:nth-child(6),.inv-table th:nth-child(7),.inv-table th:nth-child(8),.inv-table th:nth-child(9){text-align:right;}
.inv-summary{display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-top:16px; font-size:13px;}
.inv-summary div{display:flex; gap:20px; width:240px; justify-content:space-between;}
.inv-summary .grand{font-size:16px; font-weight:700; border-top:2px solid #111; padding-top:8px; color:#111;}
.inv-footer{display:flex; justify-content:space-between; margin-top:40px; align-items:flex-end;}
.inv-terms{max-width:340px;}
.inv-terms h3{font-size:11px; text-transform:uppercase; color:#888; margin-bottom:6px;}
.inv-terms p{font-size:10.5px; color:#666; line-height:1.5;}
.inv-sign{text-align:center; font-size:11px; color:#333;}
.sign-line{width:160px; border-bottom:1px solid #999; margin:34px 0 6px;}
.inv-thanks{text-align:center; margin-top:30px; font-size:11px; color:#999;}

/* =========================================================
   ADMIN MODAL — cleaned-up alignment
   ========================================================= */
.admin-header-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:24px;}
.admin-header-btns{display:flex; gap:10px; flex-wrap:wrap;}
.admin-tabs{display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--line); overflow-x:auto; padding-bottom:2px;}
.admin-tab{background:none; color:var(--text-dim); padding:11px 14px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; position:relative; white-space:nowrap; border-radius:8px 8px 0 0; transition:all .2s var(--ease);}
.admin-tab:hover{color:var(--text); background:rgba(255,255,255,.03);}
.admin-tab::after{content:''; position:absolute; left:8px; right:8px; bottom:-1px; height:2.5px; background:var(--ktm-orange); transform:scaleX(0); transition:transform .25s var(--ease); border-radius:2px;}
.admin-tab.active{color:var(--text);}
.admin-tab.active::after{transform:scaleX(1);}
.admin-subhead{font-size:12.5px; letter-spacing:.05em; color:var(--ktm-orange-2); margin:26px 0 14px; text-transform:uppercase; font-weight:700;}
.admin-search-box{display:flex; gap:10px; margin-bottom:18px;}
.admin-search-box input{flex:1; padding:11px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--black); color:var(--text); font-size:14px; outline:none;}
.admin-search-box input:focus{border-color:var(--ktm-orange);}
.admin-product-list{display:flex; flex-direction:column; gap:10px; max-height:460px; overflow-y:auto; padding-right:2px;}
.admin-product-item{display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 16px; transition:border-color .2s;}
.admin-product-item:hover{border-color:rgba(255,92,0,.4);}
.admin-product-item .info{flex:1; min-width:0;}
.admin-product-item .code{font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
.admin-product-item .name{font-size:14px; font-weight:600; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kpi{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px;}
.kpi span{display:block; font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; font-weight:600;}
.kpi b{font-size:22px; font-family:'Sora',sans-serif;}
.kpi.good b{color:var(--good);}
.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px;}
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.kpi-row{grid-template-columns:1fr;}}
.admin-hint{font-size:13px; color:var(--text-dim); margin-bottom:18px; line-height:1.6;}
#dataFileInput{display:block; width:100%; padding:14px; border:2px dashed var(--line); border-radius:var(--radius-sm); background:var(--panel-2); color:var(--text-dim); margin-bottom:14px; font-size:13px;}
.admin-hint-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
#dataCountLabel{font-size:13px; color:var(--text-dim);}
.import-status{font-size:13px; color:var(--good); min-height:18px;}
.download-invoice-btn2,.download-order-btn{background:none; border:1px solid var(--line); font-size:11px; padding:6px 12px; border-radius:8px; font-weight:600; color:var(--ktm-orange-2); transition:all .2s var(--ease);}
.download-invoice-btn2:hover,.download-order-btn:hover{background:rgba(255,138,0,.12); border-color:var(--ktm-orange-2);}
.cloud-status{font-size:13px; padding:14px 16px; border-radius:var(--radius-sm); margin-bottom:18px; border:1px solid var(--line); background:var(--panel-2);}
.cloud-status.on{color:var(--good); border-color:rgba(46,207,120,.35);}
.cloud-status.err{color:var(--bad); border-color:rgba(255,85,102,.35);}
.edit-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px;}
.edit-grid .field.full{grid-column:1 / -1;}
.edit-grid label{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; font-weight:600;}
.edit-grid input,.edit-grid textarea,.edit-grid select{width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--black); color:var(--text); font-size:14px; outline:none; transition:border-color .2s; resize:vertical;}
.edit-grid input:focus,.edit-grid textarea:focus,.edit-grid select:focus{border-color:var(--ktm-orange);}
.edit-grid select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9ca3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;}
.edit-grid input[type="file"]{padding:9px 10px; color:var(--text-dim);}
.edit-image-preview{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0;}
.edit-image-thumb{position:relative; width:80px; height:80px; border-radius:10px; overflow:hidden; border:1px solid var(--line);}
.edit-image-thumb img{width:100%; height:100%; object-fit:cover;}
.edit-image-thumb .rm-img{position:absolute; top:3px; right:3px; background:rgba(0,0,0,.7); color:#fff; border:none; width:20px; height:20px; border-radius:50%; font-size:13px;}
.edit-image-thumb .primary-tag{position:absolute; bottom:0; left:0; right:0; background:rgba(255,92,0,.85); color:#fff; font-size:8px; text-align:center; padding:2px 0; text-transform:uppercase;}
.edit-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:16px;}
.shipping-add-row{display:grid; grid-template-columns:1fr 140px auto; gap:10px; margin-bottom:16px; align-items:center;}
.currency-add-row{display:grid; grid-template-columns:1.5fr 1fr 0.7fr 1fr auto; gap:10px; margin-bottom:16px; align-items:center;}
@media(max-width:900px){.currency-add-row{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.shipping-add-row{grid-template-columns:1fr;}}
.shipping-rate-row{display:flex; justify-content:space-between; align-items:center;}
.shipping-rate-row .srm{font-size:11px; background:none; border:1px solid var(--bad); color:var(--bad); border-radius:8px; padding:4px 10px;}

/* =========================================================
   ORDER STATUS BADGES (admin orders list)
   ========================================================= */
.order-status-badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap;}
.order-status-badge.status-placed{background:rgba(78,161,255,.14); color:var(--info);}
.order-status-badge.status-confirmed{background:rgba(255,193,69,.14); color:var(--accent-2);}
.order-status-badge.status-shipped{background:rgba(255,140,0,.14); color:var(--ktm-orange-2);}
.order-status-badge.status-out-for-delivery{background:rgba(255,140,0,.2); color:var(--ktm-orange-2);}
.order-status-badge.status-delivered{background:rgba(46,207,120,.14); color:var(--good);}
.order-status-badge.status-cancelled{background:rgba(255,85,102,.14); color:var(--bad);}
.order-item-row{display:flex; flex-direction:column; gap:8px; width:100%;}
.order-item-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.order-status-select{padding:7px 12px; border-radius:8px; border:1px solid var(--line); background:var(--black); color:var(--text); font-size:12px;}
.whatsapp-notify-btn{background:#25D366; color:#fff; font-size:11px; font-weight:700; padding:7px 13px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; transition:filter .2s, transform .2s;}
.whatsapp-notify-btn:hover{filter:brightness(1.08); transform:translateY(-1px);}

/* Note: .search-box base rules live in the NAVBAR section above and are
   shared by the invoice item-search tool too (which adds the .small
   modifier). The storefront's public nav search has no suggestion dropdown
   by design — search runs on Enter / the Search button and lands on the
   Shop page with results, per the redesign. */