/*
 * Jetcar Kromh V16 — Cohesive Luxury Refinement
 * A controlled visual and interaction layer. The aim is clarity, calm motion,
 * consistent colour, and reliable mobile behaviour — not decorative effects.
 */

:root{
  /* Brand system: marine ink + warm porcelain + restrained bronze. */
  --jk-midnight:#07131e;
  --jk-midnight-2:#0d2030;
  --jk-graphite:#25313a;
  --jk-pearl:#f1ede5;
  --jk-porcelain:#fbf9f4;
  --jk-sand:#d7c9b6;
  --jk-sapphire:#315d6d;
  --jk-cyan:#9cc9cc;
  --jk-silver:#9aa6ad;
  --jk-bronze:#a66f47;
  --jk-bronze-soft:#d7b899;
  --jk-hairline:rgba(7,19,30,.13);
  --jk-hairline-strong:rgba(7,19,30,.22);
  --jk-hairline-light:rgba(255,255,255,.18);
  --jk-shadow-soft:0 18px 50px rgba(4,15,24,.08);
  --jk-shadow-card:0 22px 58px rgba(4,15,24,.11);
  --jk-shadow-float:0 28px 80px rgba(4,15,24,.18);

  /* Unified motion tokens. */
  --v16-instant:90ms;
  --v16-fast:150ms;
  --v16-base:230ms;
  --v16-medium:340ms;
  --v16-slow:480ms;
  --v16-enter:cubic-bezier(.16,1,.3,1);
  --v16-standard:cubic-bezier(.2,0,0,1);
  --v16-exit:cubic-bezier(.4,0,1,1);

  --blue:var(--jk-sapphire);
  --aqua:var(--jk-cyan);
  --paper:var(--jk-pearl);
  --paper-2:#e8e1d6;
  --ink:var(--jk-midnight);
  --ink-soft:var(--jk-midnight-2);
  --muted:#68747c;
  --line:var(--jk-hairline);
  --success:#17664f;
  --danger:#9d3f49;
}

html{background:var(--jk-pearl)}
body{background:var(--jk-pearl);color:var(--jk-midnight)}
::selection{background:var(--jk-midnight);color:#fff}

/* --------------------------------------------------------------------------
   Brand and navigation
   -------------------------------------------------------------------------- */
.brand-mark-svg{
  display:block;
  width:31px;
  height:27px;
  flex:0 0 auto;
  overflow:visible;
  color:inherit;
}
.brand-mark-svg path{vector-effect:non-scaling-stroke}
.site-header{
  transition:
    background-color var(--v16-medium) var(--v16-standard),
    border-color var(--v16-medium) var(--v16-standard),
    color var(--v16-medium) var(--v16-standard),
    box-shadow var(--v16-medium) var(--v16-standard),
    transform var(--v16-medium) var(--v16-enter)!important;
}
.site-header.scrolled,.site-header.header-light{
  background:rgba(244,240,232,.94)!important;
  border-color:rgba(7,19,30,.11)!important;
  box-shadow:0 10px 34px rgba(4,15,24,.055)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
}
.brand-name{letter-spacing:.21em!important}
.main-nav a,.lang-toggle{
  transition:color var(--v16-fast),opacity var(--v16-fast),transform var(--v16-base) var(--v16-enter)!important;
}
.main-nav a::after{
  background:var(--jk-bronze)!important;
  height:2px!important;
  bottom:-11px!important;
}
.main-nav a:hover{transform:translate3d(0,-1px,0)}
.menu-toggle{border-radius:0!important}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  height:1px!important;
  transition:top var(--v16-base) var(--v16-enter),transform var(--v16-base) var(--v16-enter),opacity var(--v16-fast)!important;
}
.mobile-menu{
  background:rgba(7,19,30,.985)!important;
  transition:opacity var(--v16-medium) var(--v16-standard),transform var(--v16-slow) var(--v16-enter)!important;
}
.mobile-menu::before{border-color:rgba(156,201,204,.1)!important}
.mobile-menu nav a{
  transition:opacity var(--v16-medium),transform var(--v16-slow) var(--v16-enter),color var(--v16-fast)!important;
}
.mobile-menu nav a:hover,.mobile-menu nav a:focus-visible{color:var(--jk-bronze-soft)}

/* --------------------------------------------------------------------------
   Global controls — one coherent interaction language
   -------------------------------------------------------------------------- */
.button{
  border-radius:4px!important;
  box-shadow:none!important;
  transition:
    transform var(--v16-fast) var(--v16-enter),
    background-color var(--v16-fast),
    border-color var(--v16-fast),
    color var(--v16-fast),
    box-shadow var(--v16-base) var(--v16-standard),
    opacity var(--v16-fast)!important;
}
.button-primary{
  background:var(--jk-midnight)!important;
  border-color:var(--jk-midnight)!important;
  color:#fff!important;
}
.button-primary:hover{
  background:var(--jk-midnight-2)!important;
  border-color:var(--jk-midnight-2)!important;
  box-shadow:0 14px 34px rgba(7,19,30,.18)!important;
}
.button-dark{background:var(--jk-midnight)!important;border-color:var(--jk-midnight)!important}
.button-outline{border-color:var(--jk-hairline-strong)!important}
.button:active,.v16-pressable.is-v16-pressed{transform:scale(.982)!important}
.button:focus-visible,.model-tab:focus-visible,.choice-card:focus-visible,.color-choice:focus-visible,.lang-toggle:focus-visible,.menu-toggle:focus-visible,.custom-color-picker:focus-visible,.review-edit:focus-visible{
  outline:2px solid var(--jk-cyan)!important;
  outline-offset:3px!important;
}

/* Remove the electric-purple language left by older layers. */
.eyebrow,.jk-kicker,.jk-chapter,.process-number{color:var(--jk-sapphire)}
.config-page-v11 .progress-fill,.config-page-v11 .choice-card::before{background:var(--jk-bronze)!important}

/* --------------------------------------------------------------------------
   Purposeful reveal motion
   -------------------------------------------------------------------------- */
[data-v16-reveal]{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity var(--v16-slow) var(--v16-standard),transform var(--v16-slow) var(--v16-enter);
  transition-delay:var(--v16-delay,0ms);
}
[data-v16-reveal="image"]{transform:translate3d(0,10px,0) scale(1.012)}
[data-v16-reveal="line"]{opacity:1;transform:scaleX(0);transform-origin:left}
html[dir="rtl"] [data-v16-reveal="line"]{transform-origin:right}
[data-v16-reveal].is-v16-visible{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Home/model selection colour correction
   -------------------------------------------------------------------------- */
.jk-model-rail .model-tab.active,.model-tab.active{
  color:var(--jk-midnight)!important;
}
.jk-model-rail .model-tab::after{background:var(--jk-bronze)!important}
.collection-code,.jk-model-category,.jk-showroom .eyebrow{color:var(--jk-cyan)!important}

/* --------------------------------------------------------------------------
   Commissioning studio — foundational layout
   -------------------------------------------------------------------------- */
.config-page-v11,.config-page-v11 .config-page{background:var(--jk-midnight)!important}
.config-page-v11 .config-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr)!important;
  width:100%!important;
  max-width:100%!important;
  min-height:calc(100svh - var(--header-h));
  overflow:clip!important;
}
.config-page-v11 .config-preview{
  position:sticky!important;
  top:var(--header-h)!important;
  height:calc(100svh - var(--header-h))!important;
  min-height:620px;
  overflow:hidden!important;
  background:var(--jk-midnight-2)!important;
  contain:layout paint;
  isolation:isolate;
}
.config-page-v11 .config-preview::after{
  background:
    linear-gradient(180deg,rgba(5,15,24,.15) 0%,transparent 35%),
    linear-gradient(0deg,rgba(5,15,24,.92) 0%,rgba(5,15,24,.42) 28%,transparent 62%)!important;
}
.config-page-v11 .config-preview::before{color:rgba(255,255,255,.76)!important}
.config-page-v11 .config-preview img{
  width:100%!important;
  height:100%!important;
  opacity:1;
  object-fit:cover;
  backface-visibility:hidden;
  filter:saturate(.88) contrast(1.02)!important;
  transition:opacity var(--v16-base) linear,transform var(--v16-slow) var(--v16-enter),filter var(--v16-base) linear!important;
}
.config-page-v11 .config-preview.switching img{
  opacity:.28!important;
  transform:scale(1.018)!important;
  filter:saturate(.72) contrast(.98)!important;
}
.config-page-v11 .config-preview.is-image-ready img{animation:v16PreviewIn var(--v16-slow) var(--v16-enter) both!important}
@keyframes v16PreviewIn{from{opacity:.18;transform:scale(1.018)}to{opacity:1;transform:none}}
.config-page-v11 .config-preview-top{
  top:24px!important;
  left:28px!important;
  right:28px!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.24)!important;
}
.config-page-v11 .config-preview-bottom{
  padding:34px 38px 36px!important;
  background:linear-gradient(0deg,rgba(5,15,24,.92),rgba(5,15,24,.58),transparent)!important;
  backdrop-filter:none!important;
}
.config-page-v11 .config-model-name{font-size:clamp(58px,5.2vw,82px)!important;line-height:.76!important}
.config-page-v11 .config-model-meta{color:rgba(255,255,255,.68)!important}
.config-page-v11 .config-live-price span{color:rgba(255,255,255,.58)!important}
.config-page-v11 .config-live-price strong{font-size:34px!important;color:#fff!important}

.config-page-v11 .config-panel{
  width:100%;
  min-width:0;
  padding:52px clamp(36px,4.5vw,70px) 120px!important;
  background:var(--jk-porcelain)!important;
  overflow:visible!important;
}
.config-page-v11 .config-head{
  position:relative!important;
  top:auto!important;
  margin:0!important;
  padding:14px 0 34px!important;
  background:transparent!important;
  border-color:var(--jk-hairline)!important;
}
.config-page-v11 .config-head::after{
  background:linear-gradient(90deg,var(--jk-bronze),transparent)!important;
  opacity:.65!important;
}
.config-page-v11 .config-head h1{
  margin-top:17px!important;
  max-width:9ch;
  font-size:clamp(60px,5.1vw,86px)!important;
  line-height:.78!important;
  color:var(--jk-midnight)!important;
}
.config-page-v11 .config-head .eyebrow{color:var(--jk-sapphire)!important}
.config-page-v11 .config-progress{
  min-width:60px!important;
  min-height:30px!important;
  color:#5f6b72!important;
  border-color:var(--jk-hairline)!important;
  background:rgba(255,255,255,.5)!important;
}
.config-page-v11 .progress-track{height:2px!important;background:rgba(7,19,30,.08)!important}
.config-page-v11 .progress-fill{box-shadow:none!important;background:var(--jk-bronze)!important}
.config-page-v11 .progress-fill::after{
  width:6px!important;height:6px!important;right:-3px!important;
  background:var(--jk-bronze)!important;
  box-shadow:0 0 0 5px rgba(166,111,71,.13)!important;
}

.config-page-v11 .config-section{
  padding:42px 0!important;
  border-color:var(--jk-hairline)!important;
}
.config-page-v11 .config-section-title{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(160px,.48fr)!important;
  align-items:end!important;
  gap:24px!important;
  margin-bottom:22px!important;
}
.config-page-v11 .config-section-title h2{
  font-size:16px!important;
  line-height:1.35!important;
  color:var(--jk-midnight)!important;
}
.config-page-v11 .config-section-title small{
  max-width:none!important;
  text-align:end!important;
  color:#748087!important;
  font-size:8px!important;
  line-height:1.55!important;
}

/* --------------------------------------------------------------------------
   Model, engine and option selection
   -------------------------------------------------------------------------- */
.config-page-v11 .choice-grid{gap:10px!important}
.config-page-v11 .choice-grid.models{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  overflow:visible!important;
}
.config-page-v11 .choice-card,.config-page-v11 .color-choice{
  border:1px solid var(--jk-hairline)!important;
  background:rgba(255,255,255,.42)!important;
  color:var(--jk-midnight)!important;
  box-shadow:none!important;
  transition:
    transform var(--v16-base) var(--v16-enter),
    border-color var(--v16-fast),
    background-color var(--v16-fast),
    box-shadow var(--v16-base) var(--v16-standard)!important;
}
.config-page-v11 .model-choice{
  min-height:136px!important;
  grid-template-rows:78px auto!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
.config-page-v11 .model-choice::before{
  height:2px!important;
  background:var(--jk-bronze)!important;
}
.config-page-v11 .model-choice::after{
  top:9px!important;
  right:9px!important;
  width:18px!important;
  height:18px!important;
  background:rgba(255,255,255,.9)!important;
  border:1px solid rgba(7,19,30,.18)!important;
  box-shadow:none!important;
}
html[dir="rtl"] .config-page-v11 .model-choice::after{right:auto!important;left:9px!important}
.config-page-v11 .model-choice.selected{
  border-color:var(--jk-midnight)!important;
  background:#fff!important;
  box-shadow:0 15px 36px rgba(4,15,24,.09)!important;
}
.config-page-v11 .model-choice.selected::after{
  background:var(--jk-bronze)!important;
  border-color:var(--jk-bronze)!important;
  box-shadow:inset 0 0 0 5px #fff!important;
}
.config-page-v11 .model-thumb{height:78px!important;background:#d5d8d4!important}
.config-page-v11 .model-thumb img{filter:saturate(.82) contrast(1.02)!important}
.config-page-v11 .model-choice.selected .model-thumb img{transform:scale(1.035)!important;filter:saturate(.94) contrast(1.02)!important}
.config-page-v11 .model-choice-copy{padding:11px 12px 13px!important}
.config-page-v11 .model-choice-copy strong{font-size:11px!important}
.config-page-v11 .model-choice-copy span{font-size:8px!important;color:#748087!important}

.config-page-v11 .choice-grid:not(.models){grid-template-columns:repeat(2,minmax(0,1fr))!important}
.config-page-v11 .choice-grid:not(.models) .choice-card{
  min-height:88px!important;
  padding:17px 18px!important;
  border-radius:8px!important;
}
.config-page-v11 .choice-grid:not(.models) .choice-card:hover{border-color:rgba(7,19,30,.35)!important}
.config-page-v11 .choice-grid:not(.models) .choice-card.selected{
  border-color:var(--jk-midnight)!important;
  background:#fff!important;
  box-shadow:0 13px 32px rgba(4,15,24,.075)!important;
}
.config-page-v11 .choice-grid:not(.models) .choice-card.selected::before{background:var(--jk-bronze)!important}
.config-page-v11 .choice-grid:not(.models) .choice-card.selected::after{
  background:var(--jk-midnight)!important;
  box-shadow:none!important;
}
.config-page-v11 .choice-grid:not(.models) .choice-card strong{font-size:12px!important}
.config-page-v11 .choice-grid:not(.models) .choice-card>span{color:#6d787f!important}
.config-page-v11 .choice-grid:not(.models) .choice-card>span:last-child{color:var(--jk-midnight)!important}

@media(hover:hover) and (pointer:fine){
  .config-page-v11 .choice-card:hover,.config-page-v11 .color-choice:hover{
    transform:translate3d(0,-2px,0)!important;
    box-shadow:0 16px 38px rgba(4,15,24,.085)!important;
  }
}
.config-page-v11 .choice-card:active,.config-page-v11 .color-choice:active{transform:scale(.987)!important}

/* --------------------------------------------------------------------------
   Finish atelier — calm, legible, consistent
   -------------------------------------------------------------------------- */
.config-page-v11 .color-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
.config-page-v11 .color-choice{
  position:relative;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:72px!important;
  padding:11px 12px!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
.config-page-v11 .color-choice::before{
  inset:auto 0 0!important;
  height:2px!important;
  background:var(--jk-bronze)!important;
}
.config-page-v11 .color-choice.selected{
  border-color:var(--jk-midnight)!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(4,15,24,.075)!important;
}
.config-page-v11 .color-choice.selected::after{
  top:8px!important;
  right:8px!important;
  width:14px!important;
  height:14px!important;
  background:var(--jk-midnight)!important;
  border:4px solid #fff!important;
  box-shadow:0 0 0 1px var(--jk-midnight)!important;
}
html[dir="rtl"] .config-page-v11 .color-choice.selected::after{right:auto!important;left:8px!important}
.config-page-v11 .color-swatch{
  width:34px!important;
  height:34px!important;
  border:3px solid #fff!important;
  box-shadow:0 0 0 1px rgba(7,19,30,.14),0 5px 12px rgba(4,15,24,.09)!important;
}
.config-page-v11 .color-choice.selected .color-swatch{transform:scale(1.04)!important;box-shadow:0 0 0 1px var(--jk-midnight),0 7px 18px rgba(4,15,24,.13)!important}
.config-page-v11 .color-copy strong{font-size:10px!important;line-height:1.3!important}
.config-page-v11 .color-copy small{font-size:7px!important;color:#849097!important;letter-spacing:.07em!important}

.finish-current{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  margin-top:10px!important;
  min-height:58px!important;
  padding:10px 12px!important;
  border:1px solid var(--jk-hairline)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.5)!important;
  box-shadow:none!important;
}
.finish-current-swatch{width:32px!important;height:32px!important;border:3px solid #fff!important;box-shadow:0 0 0 1px rgba(7,19,30,.13)!important}
.finish-current-copy small{color:#879198!important}
.finish-current-copy strong{font-size:11px!important;color:var(--jk-midnight)!important}
.finish-current-code{font-size:8px!important;color:#67737a!important}
.finish-current.is-updating{border-color:rgba(166,111,71,.42)!important;background:#fff!important;transform:none!important}

/* Custom colour: direct native control + manual HEX fallback. */
.config-page-v11 .custom-color-field{
  display:grid!important;
  grid-template-rows:0fr!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,-6px,0)!important;
  margin-top:0!important;
  transition:grid-template-rows var(--v16-slow) var(--v16-enter),opacity var(--v16-base),transform var(--v16-base) var(--v16-enter),visibility 0s linear var(--v16-slow)!important;
}
.config-page-v11 .custom-color-field>*{min-height:0!important;overflow:hidden!important}
.config-page-v11 .custom-color-field.show{
  grid-template-rows:1fr!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  margin-top:12px!important;
  transition-delay:0s!important;
}
.custom-color-studio{
  display:grid!important;
  grid-template-columns:minmax(210px,.68fr) minmax(0,1.32fr)!important;
  gap:18px!important;
  padding:17px!important;
  border:1px solid var(--jk-hairline)!important;
  border-radius:10px!important;
  background:#f6f2eb!important;
  box-shadow:none!important;
}
.custom-color-studio::after{display:none!important}
.custom-color-visual{
  position:relative!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  min-height:104px!important;
  padding:16px!important;
  border:1px solid rgba(7,19,30,.12)!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:
    linear-gradient(100deg,color-mix(in srgb,var(--custom-color,#315d6d) 18%,#fff) 0%,rgba(255,255,255,.78) 56%,rgba(255,255,255,.96) 100%)!important;
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color var(--v16-fast),box-shadow var(--v16-base),transform var(--v16-fast) var(--v16-enter)!important;
}
.custom-color-visual::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:4px!important;
  background:var(--custom-color,#315d6d)!important;
  animation:none!important;
  pointer-events:none!important;
}
html[dir="rtl"] .custom-color-visual::before{left:auto!important;right:0!important}
.custom-color-visual::after{display:none!important}
.custom-color-visual:hover{transform:translate3d(0,-1px,0)!important;border-color:rgba(7,19,30,.22)!important}
.custom-color-visual:focus-within{transform:none!important;border-color:var(--jk-sapphire)!important;box-shadow:0 0 0 3px rgba(49,93,109,.13)!important}
.custom-color-picker{
  position:relative!important;
  inset:auto!important;
  z-index:2!important;
  display:block!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  opacity:1!important;
  padding:4px!important;
  margin:0!important;
  border:1px solid rgba(7,19,30,.16)!important;
  border-radius:50%!important;
  background:#fff!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  box-shadow:0 7px 18px rgba(4,15,24,.11)!important;
  appearance:none;
  -webkit-appearance:none;
}
.custom-color-picker::-webkit-color-swatch-wrapper{padding:0}
.custom-color-picker::-webkit-color-swatch{border:0;border-radius:50%}
.custom-color-picker::-moz-color-swatch{border:0;border-radius:50%}
.custom-color-visual-copy{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  justify-items:start!important;
  gap:5px!important;
  max-width:none!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--jk-midnight)!important;
  text-align:start!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.custom-color-visual-copy strong{font-size:10px!important;letter-spacing:.08em!important}
.custom-color-visual-copy small{font-size:8px!important;color:#707c83!important}
.custom-color-controls{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(130px,.65fr)!important;
  align-content:start!important;
  gap:12px!important;
}
.custom-color-controls .field:first-child{grid-column:1/-1!important}
.custom-color-actions{grid-column:1/-1!important;display:flex!important;gap:8px!important}
.custom-color-hint{grid-column:1/-1!important;margin:0!important;color:#737f86!important;font-size:9px!important;line-height:1.55!important}
.custom-color-confirm,.custom-color-reset{
  min-height:44px!important;
  border-radius:4px!important;
  font-size:8px!important;
  letter-spacing:.08em!important;
}
.custom-color-confirm{background:var(--jk-midnight)!important;border-color:var(--jk-midnight)!important;color:#fff!important}
.custom-color-reset{background:transparent!important;border-color:var(--jk-hairline-strong)!important;color:var(--jk-midnight)!important}
.field-error-message{color:var(--danger)!important}

/* --------------------------------------------------------------------------
   Fields, summary and receipt
   -------------------------------------------------------------------------- */
.config-page-v11 .field label{color:#56636b!important}
.config-page-v11 .field:focus-within label{color:var(--jk-sapphire)!important;transform:none!important}
.config-page-v11 .field input,.config-page-v11 .field select,.config-page-v11 .field textarea{
  min-height:52px!important;
  border:1px solid var(--jk-hairline)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.56)!important;
  color:var(--jk-midnight)!important;
  box-shadow:none!important;
  transition:border-color var(--v16-fast),background-color var(--v16-fast),box-shadow var(--v16-base)!important;
}
.config-page-v11 .field textarea{min-height:120px!important}
.config-page-v11 .field input:hover,.config-page-v11 .field select:hover,.config-page-v11 .field textarea:hover{background:#fff!important}
.config-page-v11 .field input:focus,.config-page-v11 .field select:focus,.config-page-v11 .field textarea:focus{
  transform:none!important;
  border-color:var(--jk-sapphire)!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(49,93,109,.11)!important;
}
.consent-row{border-radius:6px!important;background:rgba(255,255,255,.45)!important}

.config-page-v11 .config-summary{
  padding:30px!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,#07131e,#10283a)!important;
  box-shadow:0 24px 58px rgba(4,15,24,.16)!important;
}
.config-page-v11 .config-summary::before{border-color:rgba(156,201,204,.09)!important}
.config-page-v11 .config-summary .eyebrow{color:var(--jk-cyan)!important}
.config-page-v11 .summary-row{border-color:rgba(255,255,255,.13)!important}
.config-page-v11 .summary-row.is-highlighted{background:rgba(166,111,71,.11)!important}
.config-page-v11 .config-submit.button-primary{background:#fff!important;border-color:#fff!important;color:var(--jk-midnight)!important}
.config-page-v11 .config-submit.button-primary:hover{background:#eee7dc!important;border-color:#eee7dc!important}

.order-receipt{
  border-radius:10px!important;
  border-color:var(--jk-hairline)!important;
  background:#fff!important;
  box-shadow:var(--jk-shadow-soft)!important;
}
.order-receipt-icon{background:var(--success)!important}

/* --------------------------------------------------------------------------
   Review request
   -------------------------------------------------------------------------- */
.review-dialog{
  background:transparent!important;
  transition:opacity var(--v16-base),transform var(--v16-slow) var(--v16-enter)!important;
}
.review-dialog::backdrop{
  background:rgba(3,10,16,.72)!important;
  backdrop-filter:blur(7px)!important;
}
.review-card{
  border-radius:12px!important;
  background:var(--jk-porcelain)!important;
  box-shadow:0 36px 110px rgba(2,8,13,.34)!important;
  overflow:hidden!important;
}
.review-hero{min-height:340px!important;background:var(--jk-midnight)!important}
.review-hero::after{
  background:linear-gradient(0deg,rgba(5,15,24,.9),rgba(5,15,24,.15) 58%,transparent)!important;
}
.review-hero img{filter:saturate(.87) contrast(1.02)!important}
.review-hero-copy{left:28px!important;right:28px!important;bottom:25px!important}
.review-hero-copy small{color:var(--jk-cyan)!important}
.review-hero-copy h2{font-size:54px!important}
.review-hero-price strong{font-size:29px!important}
.review-close-icon{
  width:42px!important;height:42px!important;
  border-radius:50%!important;
  background:rgba(7,19,30,.74)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
}
.review-close-icon:hover{transform:scale(1.04)!important;background:rgba(7,19,30,.9)!important}
.review-content{padding:27px 28px 30px!important}
.review-content .eyebrow{color:var(--jk-sapphire)!important}
.review-lines{
  border:1px solid var(--jk-hairline)!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
.review-line{background:transparent!important;border-color:var(--jk-hairline)!important}
.review-line:nth-child(odd){border-inline-end-color:var(--jk-hairline)!important}
.review-line span{color:#79848b!important}
.review-line strong{color:var(--jk-midnight)!important}
.review-line.is-total{background:var(--jk-midnight)!important;color:#fff!important}
.review-line.is-total strong{color:#fff!important}
.review-edit{
  border-color:var(--jk-hairline-strong)!important;
  color:var(--jk-sapphire)!important;
  background:#fff!important;
}
.review-edit:hover{background:var(--jk-midnight)!important;border-color:var(--jk-midnight)!important;color:#fff!important}
.review-actions .button-primary{background:var(--jk-midnight)!important;border-color:var(--jk-midnight)!important}

/* --------------------------------------------------------------------------
   Motion state feedback — subtle, not theatrical
   -------------------------------------------------------------------------- */
.v16-selection-arrive{animation:v16Selection 320ms var(--v16-enter) both}
@keyframes v16Selection{0%{transform:scale(.985)}60%{transform:scale(1.006)}100%{transform:none}}
.v16-price-pulse{animation:v16Price 420ms var(--v16-enter) both}
@keyframes v16Price{0%{opacity:.55;transform:translate3d(0,3px,0)}100%{opacity:1;transform:none}}
.custom-color-studio.is-v16-open{animation:v16Panel 360ms var(--v16-enter) both}
@keyframes v16Panel{from{opacity:.35;transform:translate3d(0,-5px,0)}to{opacity:1;transform:none}}
.review-dialog[open] .review-card{animation:v16Review 390ms var(--v16-enter) both!important}
@keyframes v16Review{from{opacity:.35;transform:translate3d(0,18px,0) scale(.992)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   Mobile: remove visual noise, preserve context, prevent overlap
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  .config-page-v11 .config-shell{display:block!important}
  .config-page-v11 .config-preview{
    position:relative!important;
    top:auto!important;
    height:clamp(440px,62svh,650px)!important;
    min-height:440px!important;
  }
}

@media(max-width:767px){
  .brand-mark-svg{width:27px;height:24px}

  .config-page-v11 .config-preview{
    height:clamp(340px,47svh,430px)!important;
    min-height:340px!important;
  }
  .config-page-v11 .config-preview-top{
    top:16px!important;left:16px!important;right:16px!important;
    padding-bottom:12px!important;
  }
  .config-page-v11 .config-preview::before{top:57px!important;left:16px!important}
  .config-page-v11 .config-preview-bottom{
    left:0!important;right:0!important;bottom:0!important;
    padding:25px 17px 22px!important;
    align-items:end!important;
  }
  .config-page-v11 .config-model-name{
    max-width:66vw;
    font-size:clamp(44px,13.4vw,59px)!important;
    line-height:.74!important;
    white-space:nowrap;
  }
  .config-page-v11 .config-model-meta{margin-top:8px!important;font-size:10px!important}
  .config-page-v11 .config-live-price{min-width:92px!important;text-align:end!important}
  .config-page-v11 .config-live-price strong{font-size:clamp(23px,7vw,30px)!important}

  .config-page-v11 .config-panel{
    padding:28px 15px calc(172px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }
  .config-page-v11 .config-head{padding:0 0 22px!important}
  .config-page-v11 .config-head h1{
    margin-top:12px!important;
    max-width:100%!important;
    font-size:clamp(36px,10.4vw,44px)!important;
    line-height:.9!important;
  }
  .config-page-v11 .config-head .eyebrow{font-size:8px!important}
  .config-page-v11 .config-progress{min-width:52px!important;min-height:28px!important;font-size:8px!important}
  .config-page-v11 .progress-track{margin-bottom:4px!important}
  .config-page-v11 .config-section{
    min-height:0!important;
    padding:27px 0 10px!important;
    border-bottom:0!important;
  }
  .config-page-v11 .config-section-title{
    grid-template-columns:1fr!important;
    gap:6px!important;
    margin-bottom:16px!important;
  }
  .config-page-v11 .config-section-title h2{font-size:16px!important}
  .config-page-v11 .config-section-title small{text-align:start!important;font-size:8px!important}

  .config-page-v11 .choice-grid.models{
    display:flex!important;
    width:auto!important;
    max-width:none!important;
    gap:9px!important;
    margin-inline:-15px!important;
    padding:2px 15px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-inline:15px!important;
    scrollbar-width:none!important;
    overscroll-behavior-inline:contain;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
  }
  .config-page-v11 .choice-grid.models::-webkit-scrollbar{display:none}
  .config-page-v11 .choice-grid.models::after{content:"";flex:0 0 5px}
  .config-page-v11 .choice-grid.models .choice-card{
    flex:0 0 142px!important;
    width:142px!important;
    min-width:142px!important;
    min-height:151px!important;
    grid-template-rows:88px auto!important;
    scroll-snap-align:center;
  }
  .config-page-v11 .choice-grid.models .model-thumb{height:88px!important}

  .config-page-v11 .choice-grid:not(.models){grid-template-columns:1fr!important;gap:8px!important}
  .config-page-v11 .choice-grid:not(.models) .choice-card{min-height:79px!important;padding:14px 15px!important}

  .config-page-v11 .color-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .config-page-v11 .color-choice{
    grid-template-columns:32px minmax(0,1fr)!important;
    min-height:65px!important;
    gap:8px!important;
    padding:9px!important;
  }
  .config-page-v11 .color-swatch{width:30px!important;height:30px!important}
  .config-page-v11 .color-copy strong{font-size:9px!important}
  .config-page-v11 .color-copy small{font-size:7px!important}
  .finish-current{
    grid-template-columns:32px minmax(0,1fr) auto!important;
    min-height:54px!important;
    padding:9px 10px!important;
  }
  .finish-current-swatch{width:28px!important;height:28px!important}
  .finish-current-code{font-size:7px!important}

  .custom-color-studio{
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:12px!important;
  }
  .custom-color-visual{
    grid-template-columns:56px minmax(0,1fr)!important;
    min-height:88px!important;
    padding:13px!important;
    gap:12px!important;
  }
  .custom-color-picker{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
  .custom-color-controls{grid-template-columns:minmax(0,1fr) 116px!important;gap:10px!important}
  .custom-color-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
  .custom-color-confirm,.custom-color-reset{width:100%!important;min-width:0!important}

  .config-page-v11 .form-grid{grid-template-columns:1fr!important;gap:12px!important}

  /* Floating navigation is light and visually related to the page. */
  .config-page-v11.config-enhanced .mobile-total{display:none!important}
  .config-step-controls{
    position:fixed!important;
    z-index:1200!important;
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:10px!important;
    border:1px solid rgba(7,19,30,.13)!important;
    border-radius:12px!important;
    background:rgba(251,249,244,.96)!important;
    color:var(--jk-midnight)!important;
    box-shadow:0 22px 64px rgba(4,15,24,.22)!important;
    backdrop-filter:blur(15px) saturate(1.05)!important;
    transition:opacity var(--v16-base),transform var(--v16-medium) var(--v16-enter)!important;
  }
  .config-step-controls::before{
    content:"";
    position:absolute;
    top:0;left:12px;right:12px;height:2px;
    background:linear-gradient(90deg,var(--jk-bronze),rgba(166,111,71,0));
  }
  .config-step-controls.is-hidden{opacity:0!important;transform:translate3d(0,112%,0)!important;pointer-events:none!important}
  .config-step-meta{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:14px!important;
    padding:1px 3px 0!important;
  }
  .config-step-context{display:grid!important;gap:2px!important;min-width:0!important}
  .config-step-context small,.config-step-total small{font-size:7px!important;letter-spacing:.12em!important;color:#7e898f!important}
  .config-step-context strong{font-size:10px!important;color:var(--jk-midnight)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .config-step-total{text-align:end!important}
  .config-step-total strong{font-size:20px!important;color:var(--jk-midnight)!important;font-variant-numeric:tabular-nums}
  .config-step-actions{display:grid!important;grid-template-columns:minmax(90px,.72fr) minmax(0,1.35fr)!important;gap:8px!important}
  .config-step-controls button{
    min-height:48px!important;
    border-radius:5px!important;
    font-size:9px!important;
    letter-spacing:.08em!important;
    transition:transform var(--v16-fast) var(--v16-enter),background-color var(--v16-fast),border-color var(--v16-fast),color var(--v16-fast)!important;
  }
  .config-step-controls .back{
    background:transparent!important;
    color:var(--jk-midnight)!important;
    border-color:var(--jk-hairline-strong)!important;
  }
  .config-step-controls .next{
    background:var(--jk-midnight)!important;
    color:#fff!important;
    border-color:var(--jk-midnight)!important;
    box-shadow:none!important;
  }
  .config-step-controls button:active{transform:scale(.98)!important}
  .config-step-controls button:disabled{opacity:.32!important}

  .config-page-v11.config-enhanced .config-section,.config-page-v11.config-enhanced .config-summary{display:none!important}
  .config-page-v11.config-enhanced .config-section.is-active-step,.config-page-v11.config-enhanced .config-summary.is-active-step{display:block!important}
  .config-page-v11 .config-summary{padding:22px 17px!important}

  /* Review behaves as a full-screen editorial sheet. */
  .review-dialog{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    transform:translate3d(0,100%,0)!important;
  }
  .review-dialog[open]{transform:none!important}
  .review-card{
    width:100%!important;
    height:100%!important;
    max-height:100dvh!important;
    border-radius:0!important;
    padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;
  }
  .review-hero{min-height:34svh!important;max-height:350px!important}
  .review-hero-copy{left:17px!important;right:17px!important;bottom:17px!important}
  .review-hero-copy h2{font-size:44px!important}
  .review-hero-price strong{font-size:24px!important}
  .review-content{padding:21px 15px 24px!important}
  .review-lines{grid-template-columns:1fr!important}
  .review-line:nth-child(odd){border-inline-end:0!important}
  .review-line.is-total{grid-column:auto!important}
  .review-actions{
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    display:grid!important;
    grid-template-columns:.78fr 1.22fr!important;
    gap:8px!important;
    margin:0!important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom))!important;
    background:rgba(251,249,244,.96)!important;
    border-top:1px solid var(--jk-hairline)!important;
    backdrop-filter:blur(14px)!important;
  }
  .review-actions .button{width:100%!important;min-width:0!important;padding-inline:9px!important;font-size:8px!important}
}

@media(max-width:370px){
  .config-page-v11 .config-panel{padding-inline:12px!important}
  .config-page-v11 .choice-grid.models{margin-inline:-12px!important;padding-inline:12px!important}
  .config-page-v11 .choice-grid.models .choice-card{flex-basis:135px!important;width:135px!important;min-width:135px!important}
  .config-page-v11 .color-choice{grid-template-columns:29px minmax(0,1fr)!important;padding:8px 7px!important}
  .config-page-v11 .color-swatch{width:27px!important;height:27px!important}
  .finish-current-code{display:none!important}
  .custom-color-controls{grid-template-columns:1fr!important}
  .custom-color-actions{grid-template-columns:1fr!important}
  .config-step-controls{left:6px!important;right:6px!important}
  .config-step-actions{grid-template-columns:82px minmax(0,1fr)!important}
}

/* --------------------------------------------------------------------------
   Reduced motion keeps state clarity while removing travel and scale.
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  [data-v16-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .config-page-v11 .config-preview img,.choice-card,.color-choice,.custom-color-field,.review-card,.config-step-controls{animation:none!important;transition:opacity 100ms linear!important;transform:none!important;filter:none!important}
  .v16-selection-arrive,.v16-price-pulse,.custom-color-studio.is-v16-open{animation:none!important}
}

/* Final palette aliases used by the earlier motion layer. */
:root{
  --jk-accent:var(--jk-sapphire);
  --jk-accent-soft:#e7eef0;
  --jk-focus:var(--jk-cyan);
  --jk-surface:var(--jk-porcelain);
  --jk-surface-2:#eee8de;
  --jk-ink:var(--jk-midnight);
  --jk-ink-2:var(--jk-midnight-2);
  --jk-muted:#68747c;
  --jk-line:var(--jk-hairline);
}
.is-price-updating{opacity:.72!important;transform:translate3d(0,-1px,0)!important;color:var(--jk-sapphire)!important}
.price-change-note{
  background:var(--jk-sapphire)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 10px 26px rgba(7,19,30,.16)!important;
  font-size:8px!important;
  letter-spacing:.06em!important;
}
.review-close-icon:focus-visible{
  outline:1px solid rgba(255,255,255,.9)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 3px rgba(156,201,204,.22)!important;
}

/* Entry screen follows the same marine palette; no isolated purple glow. */
html.jk-first-entry .jk-entry{
  background:
    radial-gradient(circle at 50% 44%,rgba(49,93,109,.22),transparent 32%),
    linear-gradient(145deg,#02080d 0%,#07131e 58%,#02080d 100%)!important;
}
.jk-entry-mark{filter:drop-shadow(0 0 30px rgba(156,201,204,.22))!important}
.jk-entry-rule{background:linear-gradient(90deg,transparent,var(--jk-bronze-soft),transparent)!important}

/* --------------------------------------------------------------------------
   Home hero mobile typography — keep the full statement inside the viewport.
   The two lines deliberately use different optical scales rather than forcing
   a single oversized viewport-based size that clips long words.
   -------------------------------------------------------------------------- */
@media(max-width:767px){
  .home-v11 .jk-hero-copy{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  .home-v11 .jk-hero-copy h1{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(50px,15vw,68px)!important;
    line-height:.78!important;
    letter-spacing:-.05em!important;
    overflow:visible!important;
  }
  .home-v11 .jk-hero-copy h1 span,
  .home-v11 .jk-hero-copy h1 em{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
  }
  .home-v11 .jk-hero-copy h1 em{
    margin-inline-start:0!important;
    font-size:.76em!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    white-space:nowrap!important;
  }
}
@media(max-width:370px){
  .home-v11 .jk-hero-copy h1{font-size:13.8vw!important}
  .home-v11 .jk-hero-copy h1 em{font-size:.75em!important}
}

/* Desktop editorial readability: preserve the image overlap without allowing
   dark bodywork to swallow the headline and secondary action. */
@media(min-width:768px){
  .home-v11 .jk-hero::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      var(--jk-pearl) 0%,
      var(--jk-pearl) 27%,
      rgba(244,240,231,.96) 37%,
      rgba(244,240,231,.76) 49%,
      rgba(244,240,231,0) 66%);
  }
  .home-v11 .jk-hero-actions .jk-text-link{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    padding:0 18px;
    border:1px solid rgba(6,16,29,.28)!important;
    background:rgba(244,240,231,.9);
    backdrop-filter:blur(8px);
  }
}

/* Body already reserves the fixed header height. Remove the legacy second
   offset from the configurator main element to avoid an empty header-sized
   strip above the live preview on mobile and desktop. */
.config-page-v11 .config-page{padding-top:0!important}