/* JKKVC Master Styling */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --jkkvc-blue: #0A3B99;
  --jkkvc-dark: #06286B;
  --jkkvc-navy: #082046;
  --jkkvc-accent-blue: #0D54D8;
  --jkkvc-green: #1B8A38;
  --jkkvc-red: #E11D48;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #0F172A;
  background-color: #F8FAFC;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0A3B99;
}

.iphone-frame {
  width: 390px;
  height: 844px;
  background: #000;
  border-radius: 54px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 12px #1e293b, 0 0 0 14px #475569;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.iphone-notch {
  width: 120px;
  height: 28px;
  background: #000;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iphone-screen {
  flex: 1;
  overflow-y: auto;
  background: #F8FAFC;
  border-radius: 46px;
  padding-bottom: 70px;
}

.raised-ai-dock-btn {
  transform: translateY(-14px);
  box-shadow: 0 8px 20px -3px rgba(10, 59, 153, 0.45);
}

.cat-icon-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cat-icon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(10, 59, 153, 0.12);
  border-color: #0A3B99;
}

/* Shared storefront finish */
:root { --jkkvc-blue: #103b86; --jkkvc-dark: #082b68; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a, button { -webkit-tap-highlight-color: transparent; }
button, a { transition-duration: 180ms; }
::selection { background: #cce3ff; color: #082b68; }

@media (max-width: 767px) {
  body { font-size: 14px; }
  main { width: 100%; }
  .iphone-shell { max-width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Shared brand header and premium commerce surfaces */
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-brand img { display: block; width: 178px; height: 72px; object-fit: contain; border-radius: 9px; }
header { box-shadow: 0 5px 22px rgba(13, 36, 72, .055); }
header a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(31, 104, 201, .32);
  outline-offset: 2px;
}
main > form > div > div,
main > div.grid > div,
main > div.space-y-16 > div,
main form .bg-white.rounded-3xl,
main .bg-white.rounded-3xl {
  box-shadow: 0 8px 28px rgba(18, 41, 75, .055);
}
main h1 { letter-spacing: -.035em; }
main input:not([type="radio"]):not([type="checkbox"]),
main select, main textarea {
  min-height: 44px;
  border-color: #d8e0eb;
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
main input:not([type="radio"]):not([type="checkbox"]):focus,
main select:focus, main textarea:focus {
  border-color: #2765b5;
  box-shadow: 0 0 0 3px rgba(39, 101, 181, .12);
}
.checkout-progress li { display:flex; align-items:center; gap:.55rem; padding:.75rem .85rem; border:1px solid #e0e7f0; border-radius:12px; background:#fff; color:#718096; font-size:11px; font-weight:700; }
.checkout-progress li span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#eef2f7; color:#64748b; font-size:10px; }
.checkout-progress li.is-current { border-color:#b7cdec; background:#f3f7fd; color:#123d7b; }
.checkout-progress li.is-current span { background:#123d7b; color:#fff; }
form label:has(input[type="radio"]) { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
form label:has(input[type="radio"]:checked) { border-color:#477cc0; background:#f2f7fd; box-shadow:0 0 0 2px rgba(39,101,181,.06); }

@media (max-width: 767px) {
  .site-brand img { width: 136px; height: 56px; }
  header { position: relative; }
  header > div > div { min-height: 64px; }
  header > div > div > div:last-child { gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }
  header > div > div > div:last-child a,
  header > div > div > div:last-child span { font-size: 10px; }
  main { padding-top: 1.5rem !important; padding-bottom: 2rem !important; }
  main > form, main > .grid { gap: 1rem !important; }
  main > form > div > div, main > .grid > div { min-width: 0; }
  main form .bg-white.rounded-3xl, main .bg-white.rounded-3xl { padding: 1rem; border-radius: 18px; }
  main input:not([type="radio"]):not([type="checkbox"]), main select, main textarea { font-size: 16px; }
  .sticky { position: static; }
  #cartFullItemsContainer { overflow-x: auto; }
}

@media (max-width: 420px) {
  .site-brand img { width: 116px; height: 50px; }
  header > div { padding-left: .75rem !important; padding-right: .75rem !important; }
  header > div > div > div:last-child { gap: .4rem; }
  main h1 { font-size: 1.55rem; line-height: 1.2; }
}

/* One reusable header and footer shared across every page */
#siteHeaderMount { position: relative; z-index: 40; }
#siteFooterMount { margin-top: auto; }
.site-trustbar { background:#082b68; color:#f1f5fb; font-size:10px; }
.site-trust-inner { max-width:1280px; min-height:32px; margin:0 auto; padding:5px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.site-trust-inner > span { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.site-trust-inner > span i { color:#a9d5ff; }
.site-trust-inner nav { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.site-trust-inner nav a { color:#e2eaf5; text-decoration:none; }
.site-trust-inner nav a:hover { color:#fff; }
.site-header { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.97); border-bottom:1px solid #e3e9f1; backdrop-filter:blur(14px); }
.site-header-inner { max-width:1280px; margin:0 auto; padding:0 24px; }
.site-header-main { min-height:78px; display:grid; grid-template-columns:190px minmax(260px,1fr) auto; align-items:center; gap:24px; }
.site-brand img { width:178px; height:68px; object-fit:contain; border-radius:9px; }
.site-search { min-width:0; display:flex; overflow:hidden; border:1px solid #d9e2ef; border-radius:11px; background:#fff; box-shadow:0 2px 7px rgba(13,36,72,.04); }
.site-search input { flex:1; width:100%; min-width:0; height:42px; padding:0 14px; border:0; outline:none; background:transparent; color:#15243b; font:inherit; font-size:12px; font-weight:500; }
.site-search input:focus { box-shadow:inset 0 0 0 2px rgba(22,75,153,.16); }
.site-search button { width:48px; border:0; background:#10459b; color:white; cursor:pointer; }
.site-search button:hover { background:#082b68; }
.site-search-mobile { display:none; }
.site-header-actions { display:flex; align-items:center; gap:17px; }
.site-header-actions a { color:#102b52; text-decoration:none; }
.site-location,.site-account { display:flex; align-items:center; gap:9px; }
.site-location > i:first-child { font-size:18px; }
.site-location > i:last-child { color:#7d8ba0; font-size:9px; }
.site-location span,.site-account span { display:flex; flex-direction:column; gap:2px; }
.site-location small,.site-account small { color:#718096; font-size:9px; }
.site-location b,.site-account b { font-size:11px; }
.site-account > i { font-size:18px; }
.site-cart-link { position:relative; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; }
.site-cart-link > i { font-size:19px; }
.site-cart-link b { position:absolute; top:-9px; left:11px; min-width:17px; height:17px; display:grid; place-items:center; border-radius:50%; background:#10459b; color:#fff; font-size:9px; }
.site-menu-toggle { display:none; border:0; padding:8px; border-radius:9px; background:#f1f5fa; color:#102b52; font-size:18px; }
.site-category-nav { position:relative; z-index:0; display:flex; min-height:40px; align-items:center; justify-content:space-between; gap:16px; }
.site-category-nav::before { position:absolute; z-index:-1; content:""; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:#103b86; }
.site-category-nav a { display:flex; align-items:center; gap:7px; padding:11px 0; color:#fff; font-size:11px; font-weight:700; text-decoration:none; white-space:nowrap; }
.site-category-nav a:hover { color:#c8e7ff; }
.site-category-nav a:first-child { padding:8px 13px; border-radius:7px; background:#fff; color:#102b52; }
.site-category-nav a:first-child i { font-size:9px; }
.site-category-nav .site-offer-link { color:#ffe3df; }
.site-mobile-nav { display:none; }
.site-footer { padding:42px max(24px,calc((100vw - 1232px)/2)) 18px; background:#091f43; color:#c4d0df; border-top:4px solid #164c9b; }
.site-footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:36px; max-width:1232px; margin:0 auto; padding-bottom:30px; }
.site-footer-inner > div,.site-footer-main { display:flex; align-items:flex-start; flex-direction:column; gap:10px; }
.site-footer-brand img { width:175px; height:76px; object-fit:contain; border-radius:8px; }
.site-footer-main p { max-width:270px; margin:0; color:#afbdd0; font-size:11px; line-height:1.7; }
.site-footer-inner h2 { margin:0 0 3px; color:#fff; font-size:12px; font-weight:800; }
.site-footer-inner a { color:#c4d0df; font-size:11px; text-decoration:none; }
.site-footer-inner a:hover { color:#fff; }
.site-footer-phone { display:flex; gap:8px; align-items:center; font-weight:800; }
.site-footer-promise span { display:flex; align-items:center; gap:9px; font-size:10px; }
.site-footer-promise i { width:18px; color:#8fc2ff; }
.site-footer-bottom { display:flex; justify-content:space-between; gap:12px; max-width:1232px; margin:0 auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); color:#91a1b7; font-size:10px; }

@media (max-width: 1023px) {
  .site-trust-inner { justify-content:center; }
  .site-trust-inner > span:nth-child(n+3),.site-trust-inner nav { display:none; }
  .site-header-inner { padding:0 18px; }
  .site-header-main { grid-template-columns:150px minmax(150px,1fr) auto; gap:14px; min-height:72px; }
  .site-brand img { width:145px; height:60px; }
  .site-header-actions { gap:12px; }
  .site-account { display:none !important; }
  .site-category-nav { gap:10px; }
  .site-category-nav a { font-size:10px; }
}
@media (max-width: 767px) {
  .site-trust-inner { min-height:30px; padding:5px 10px; font-size:9px; }
  .site-trust-inner > span:nth-child(2) { display:none; }
  .site-header { position:relative; }
  .site-header-inner { padding:0 12px 11px; }
  .site-header-main { grid-template-columns:auto 1fr auto; gap:8px; min-height:63px; }
  .site-brand img { width:132px; height:54px; }
  .site-search-desktop,.site-category-nav,.site-location,.site-account { display:none !important; }
  .site-header-actions { gap:10px; justify-content:flex-end; }
  .site-cart-link span { display:none; }
  .site-cart-link > i { font-size:20px; }
  .site-menu-toggle { display:block; order:-1; }
  .site-search-mobile { display:flex; }
  .site-search-mobile input { height:40px; font-size:16px; }
  .site-mobile-nav:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; padding:8px 16px 14px; border-top:1px solid #e4eaf2; background:#fff; }
  .site-mobile-nav a { padding:11px 4px; border-bottom:1px solid #edf1f6; color:#163768; font-size:12px; font-weight:700; text-decoration:none; }
  .site-footer { padding:30px 18px 15px; }
  .site-footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 18px; padding-bottom:22px; }
  .site-footer-main { grid-column:1 / -1; }
  .site-footer-brand img { width:150px; height:64px; }
  .site-footer-bottom { flex-direction:column; font-size:9px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-category-nav { justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .site-category-nav::-webkit-scrollbar { display:none; }
}
@media (max-width: 420px) { .site-brand img { width:116px; height:50px; } }