/* =========================================================
   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:2;}
.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;
}
.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; 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-box.small{border-radius:var(--radius-sm); padding:9px 14px;}
.search-box.small input{padding:2px 0;}

.nav-links{display:flex; align-items:center; gap:6px; order:3; 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);}
.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);}

@media(max-width:900px){
  :root{--nav-h:132px;}
  .burger{display:flex; order:2;}
  .nav-search-bar{flex-basis:100%; max-width:none; order:3;}
  .nav-links{
    position:fixed; top:calc(var(--marquee-h) + var(--nav-h)); right:0;
    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-left:1px solid var(--line); overflow-y:auto; z-index:220;
  }
  .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;}
.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;}

/* Out-of-stock: a dimming overlay across the card image with a centered
   label — avoids fighting with the discount badge/share icon for corner
   space, and reads clearly at a glance in a grid of many cards. */
.oos-overlay{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(11,12,16,.6); backdrop-filter:blur(1px);
}
.oos-overlay span{
  background:var(--bad); color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill);
}
/* In/Out of stock badge on the product detail page — more room there, so a
   plain text-style badge next to the price works better than an overlay. */
.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);}

/* 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
   ========================================================= */
.product-detail-modal{max-width:780px;}
#productDetailContent{display:flex; gap:28px; flex-wrap:wrap;}
.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;}
.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;}
@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; 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-col a:hover{color:var(--ktm-orange-2); transform:translateX(2px);}
.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;}
.pay-icons{display:flex; gap:10px; flex-wrap:wrap;}
.pay-badge{width:38px; height:38px; border-radius:9px; background:linear-gradient(135deg, rgba(255,92,0,.14), rgba(255,176,32,.08)); border:1px solid rgba(255,140,0,.25); display:flex; align-items:center; justify-content:center; color:var(--accent-2); transition:all .25s var(--ease);}
.pay-badge svg{width:19px; height:19px;}
.pay-badge:hover{border-color:var(--ktm-orange); color:#fff; background:linear-gradient(135deg,var(--ktm-orange),var(--ktm-orange-2)); transform:translateY(-3px);}
.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:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--text-dim); position:relative;}
.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;}
.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;}
.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;}
.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;}

/* =========================================================
   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 h4{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 h4{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;}
@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. */