/*
Theme Name: Eko Primo
Description: Truck visualizer builder for the Primo (6133) and the BD Flush Faced (8331). Version comment: v9
*/
/* Ported from mockup v15 (https://claude.ai/artifact/PxuSfTvXQhVg88qKuchZZf), scoped to .eko-primo. */
/* Layout: truck photo on top (sticky on phones, sticky left column on desktop) with the Light it up panel under it; build steps stacked below/right; price bar pinned to the bottom. Single dark look, matching ekodesign.co. */
.eko-primo{
  --bg:#000;
  --panel:#0c0c0d;
  --line:#2c2d30;
  --line-hi:#5a5c61;
  --fg:#fff;
  --muted:#9c9da1;
  --ink:#0b0b0c;
  --font:"Zalando Sans","Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
  background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.5;letter-spacing:-.01em;
  padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));
}
.eko-primo,.eko-primo *{box-sizing:border-box}
/* Salient styles buttons, headings, paragraphs and images site-wide, and some of its rules outrank a scoped
   selector (learned on the EVO visualizer). So: reset buttons here, and button rules below carry !important. */
.eko-primo button{all:unset;box-sizing:border-box;cursor:pointer;font:inherit;color:inherit;text-align:center}
.eko-primo h1,.eko-primo h2,.eko-primo p{font-family:var(--font);color:inherit}
.eko-primo [hidden]{display:none!important}
.eko-primo .wrap{max-width:1240px;margin:0 auto;padding-inline:16px}

.eko-primo h1{padding-top:18px;font-size:clamp(24px,5vw,40px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1.02;margin:0 0 18px;text-wrap:balance}

.eko-primo .grid{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:1024px){.eko-primo .grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px}
  .eko-primo .stagecol{position:sticky;top:16px;align-self:start}}

/* ---- truck stage ---- */
.eko-primo .stagecol{min-width:0}
@media (max-width:1023px){.eko-primo .stagewrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-bottom:8px;margin-inline:-16px;padding-inline:16px}}
.eko-primo .stage{position:relative;border:1px solid var(--line);aspect-ratio:3/2;max-width:100%;overflow:hidden;background:#c9ccd1}
.eko-primo .world{position:absolute;inset:0;transform-origin:53.7% 18.4%;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.eko-primo .stage.busy .world{filter:blur(7px) brightness(.62) saturate(.7)}
.eko-primo .world.zoom{transform:scale(2.6)}
.eko-primo .world img,.eko-primo .world svg{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;display:block}
.eko-primo .stage .tag{position:absolute;left:10px;top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4b4e54;z-index:2}
.eko-primo .stage .loading{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:14px;
  background:rgba(8,8,10,.28);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;pointer-events:none}
.eko-primo .stage.busy .loading{opacity:1;visibility:visible;transition:opacity .25s ease}
/* the loader is a tiny Primo: black housing, three round pods lighting left to right */
.eko-primo .ldr{display:flex;gap:12px;padding:11px 17px;background:#0d0d0e;border:1px solid #3a3b3f;border-radius:7px;
  box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.eko-primo .ldr i{width:18px;height:18px;border-radius:50%;background:#242528;box-shadow:inset 0 1px 2px rgba(0,0,0,.8);animation:pod 1.2s infinite}
.eko-primo .ldr i:nth-child(2){animation-delay:.18s}
.eko-primo .ldr i:nth-child(3){animation-delay:.36s}
@keyframes pod{
  0%,55%,100%{background:#242528;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
  14%,30%{background:radial-gradient(circle,#fff 0 45%,#e9eef5 100%);box-shadow:0 0 6px 1px #fff,0 0 22px 6px rgba(255,255,255,.55)}
}
.eko-primo .ldr-t{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);
  position:relative;padding-bottom:12px}
/* a thin track under the label with a highlight sweeping across it */
.eko-primo .ldr-t::after{content:"";position:absolute;left:50%;bottom:0;width:150px;height:2px;margin-left:-75px;
  background:linear-gradient(90deg,transparent,#fff,transparent) no-repeat -60px 0/60px 100%,rgba(255,255,255,.18);
  animation:sweep 1.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sweep{to{background-position:150px 0,0 0}}
.eko-primo .stage.failed .ldr-t::after{display:none}
.eko-primo .stage.failed .ldr{display:none}
.eko-primo .lamp{transition:opacity 60ms linear}
.eko-primo .btn[disabled]{cursor:default!important;opacity:.6!important}
.eko-primo .btn[disabled]:hover{border-color:var(--line-hi)!important}
.eko-primo #b-ww{min-width:170px}

.eko-primo .btn{appearance:none!important;background:transparent!important;border:1px solid var(--line-hi)!important;border-radius:0!important;padding:10px 13px!important;min-height:44px!important;font-size:12px!important;font-weight:700!important;letter-spacing:.11em!important;text-transform:uppercase!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;gap:8px!important}
.eko-primo .btn:hover{border-color:var(--fg)!important}
.eko-primo .btn:focus-visible,.eko-primo .seg button:focus-visible,.eko-primo .sw:focus-visible,.eko-primo .addon:focus-visible,.eko-primo .chip:focus-visible{outline:2px solid var(--fg)!important;outline-offset:3px!important}
.eko-primo .btn.on{background:var(--fg)!important;color:var(--ink)!important;border-color:var(--fg)!important}
.eko-primo .btn .dot{width:9px!important;height:9px!important;border-radius:50%!important;flex:none!important}
.eko-primo .btn.ghost{font-weight:400!important;letter-spacing:.04em!important;text-transform:none!important}

/* ---- light it up panel ---- */
.eko-primo .play{border:1px solid var(--line);margin-top:10px;padding:14px}
.eko-primo .play h2{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.eko-primo .play .lede{margin:4px 0 12px;color:var(--muted);font-size:13px;max-width:60ch}
.eko-primo .play .lede b{color:var(--fg);font-weight:700}
.eko-primo .podbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.eko-primo .podbtns .btn{justify-content:center!important;min-height:52px!important;font-size:13px!important}
.eko-primo .podbtns .btn small{display:block!important;font-weight:400!important;letter-spacing:.02em!important;text-transform:none!important;font-size:11px!important;opacity:.7!important}
.eko-primo .extra{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.eko-primo .extra > .btn{min-width:118px!important;justify-content:center!important}
.eko-primo .pick{min-width:0}
.eko-primo .pick .lab{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.eko-primo .pick .lab em{font-style:normal;letter-spacing:.02em;text-transform:none}
.eko-primo .chips{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
.eko-primo .chip{appearance:none!important;background:transparent!important;border:1px solid var(--line-hi)!important;border-radius:0!important;min-height:38px!important;padding:6px 11px!important;cursor:pointer!important;font-size:12px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;display:inline-flex!important;align-items:center!important;gap:6px!important}
.eko-primo .chip i{width:9px!important;height:9px!important;border-radius:50%!important;display:inline-block!important}
.eko-primo .chip:hover{border-color:var(--fg)!important}
.eko-primo .chip[aria-pressed=true]{background:var(--fg)!important;color:var(--ink)!important;border-color:var(--fg)!important}
.eko-primo .chip[disabled]{opacity:.35!important;cursor:not-allowed!important}
/* Closer view: a magnifier in the preview's top-right corner. Below 1024px the close X (fixed, top right) sits over that
   corner once the preview sticks to the top of the screen, so there it goes bottom right. */
.eko-primo .zoombtn{appearance:none!important;position:absolute!important;top:8px;right:8px;z-index:2;width:40px!important;height:40px!important;
  padding:0!important;margin:0!important;display:grid!important;place-items:center!important;border:0!important;border-radius:0!important;
  background:rgba(0,0,0,.72)!important;color:#fff!important;cursor:pointer!important;box-shadow:none!important}
.eko-primo .zoombtn:hover{background:#000!important}
.eko-primo .zoombtn:focus-visible{outline:2px solid #fff!important;outline-offset:-4px!important}
.eko-primo .zoombtn[aria-pressed=true] .plus{display:none}
@media (max-width:1023px){.eko-primo .zoombtn{top:auto;bottom:8px}}

/* ---- build steps ---- */
.eko-primo .steps{display:grid;gap:28px;min-width:0;align-content:start}
.eko-primo .step h2{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.eko-primo .step h2 span{color:var(--fg);letter-spacing:.04em;text-transform:none;font-weight:400}
.eko-primo .step p.help{margin:0 0 12px;color:var(--muted);font-size:13px}
.eko-primo .step .sub{margin-top:8px}
.eko-primo .rule{border-top:1px solid var(--line)}

.eko-primo .seg{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line-hi)}
.eko-primo .seg.three{grid-template-columns:repeat(3,1fr)}
.eko-primo .seg button{appearance:none!important;background:transparent!important;border:0!important;border-radius:0!important;min-height:48px!important;padding:10px 6px!important;cursor:pointer!important;font-size:13px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.eko-primo .seg button+button{border-left:1px solid var(--line-hi)!important}
.eko-primo .seg button[aria-pressed=true]{background:var(--fg)!important;color:var(--ink)!important}
.eko-primo .seg small{display:block;font-weight:400;letter-spacing:.02em;text-transform:none;font-size:11.5px;opacity:.7}

.eko-primo .swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.eko-primo .sw{appearance:none!important;aspect-ratio:1!important;border:1px solid var(--line-hi)!important;border-radius:0!important;padding:0!important;cursor:pointer!important}
.eko-primo .sw[aria-pressed=true]{outline:2px solid var(--fg)!important;outline-offset:3px!important}

.eko-primo .pod{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;padding-block:10px;border-top:1px solid var(--line)}
.eko-primo .pod:first-of-type{border-top:0}
.eko-primo .pod .nm{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.eko-primo .pod .role{display:block;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted);font-size:12px}
.eko-primo .pod .seg{grid-template-columns:repeat(3,1fr)}
.eko-primo .pod .seg button{min-height:44px!important;font-size:11.5px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.eko-primo .pod .seg i{width:10px;height:10px;display:inline-block;border-radius:50%}

.eko-primo .addon{appearance:none!important;width:100%!important;display:grid!important;grid-template-columns:22px 1fr auto!important;gap:12px!important;align-items:start!important;text-align:left!important;background:transparent!important;border:1px solid var(--line)!important;border-radius:0!important;padding:14px!important;cursor:pointer!important;margin-top:-1px!important}
.eko-primo .addon:hover{border-color:var(--line-hi)!important;position:relative!important}
.eko-primo .addon .box{width:22px!important;height:22px!important;border:1px solid var(--line-hi)!important;display:grid!important;place-items:center!important}
.eko-primo .addon[aria-pressed=true]{border-color:var(--fg)!important;position:relative!important}
.eko-primo .addon[aria-pressed=true] .box{background:var(--fg)!important}
.eko-primo .addon[aria-pressed=true] .box::after{content:""!important;width:10px!important;height:6px!important;border-left:2px solid var(--ink)!important;border-bottom:2px solid var(--ink)!important;transform:translateY(-2px) rotate(-45deg)!important}
.eko-primo .addon b{display:block!important;font-size:13px!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.eko-primo .addon small{display:block!important;color:var(--muted)!important;font-size:12.5px!important;margin-top:3px!important;line-height:1.45!important}
.eko-primo .addon .pr{font-size:13px!important;font-variant-numeric:tabular-nums!important}

/* ---- price bar ---- */
.eko-primo .bar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.eko-primo .bar .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:16px}
.eko-primo .bar .tot{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eko-primo .bar .tot b{display:block;color:var(--fg);font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.eko-primo .bar .cart{margin-left:auto!important;min-height:52px!important;padding-inline:26px!important;font-size:13px!important}
.eko-primo #toast{font-size:12px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){.eko-primo .world,.eko-primo .lamp{transition:none}.eko-primo .ldr i,.eko-primo .ldr-t::after{animation:none}.eko-primo .ldr i:nth-child(2){background:#fff}}

/* Opens over the page like MKL's modal (DESIGN YOURS -> PC.fe.open -> body.eko-primo-open, see boot.js). MKL's own
   modal still opens underneath and is hidden while ours covers it. */
.eko-primo-overlay{position:fixed;inset:0;z-index:100000;overflow:auto;-webkit-overflow-scrolling:touch;background:#000;display:none}
body.eko-primo-open .eko-primo-overlay{display:block}
body.eko-primo-open{overflow:hidden!important}
body.eko-primo-open .mkl_pc{visibility:hidden!important}
.eko-primo #eko-primo-close{position:fixed!important;top:10px;right:10px;z-index:30;width:44px!important;height:44px!important;padding:0!important;
  justify-content:center!important;font-size:24px!important;font-weight:300!important;line-height:1!important;background:rgba(0,0,0,.75)!important}
.eko-primo h1{padding-right:56px}
.eko-primo .bar .viewcart{color:var(--fg);text-decoration:underline;font-size:12px;margin-left:8px}
/* 320px phones: let every column and button row shrink below its text's one-line width (the mockup overflowed by ~10px) */
.eko-primo .grid,.eko-primo .steps{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.eko-primo .grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.eko-primo .seg{grid-template-columns:repeat(2,minmax(0,1fr))}
.eko-primo .seg.three,.eko-primo .pod .seg{grid-template-columns:repeat(3,minmax(0,1fr))}
.eko-primo .seg button,.eko-primo .podbtns .btn{overflow-wrap:anywhere!important;padding-inline:4px!important}
.eko-primo .step h2{flex-wrap:wrap}
.eko-primo .pod{grid-template-columns:minmax(64px,80px) minmax(0,1fr)}
/* add to cart progress: dims the builder, three steps, a bar, and the little Primo loader */
.eko-primo .atc{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.74);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.eko-primo .atc-card{width:min(420px,100%);background:#0b0b0c;border:1px solid var(--line-hi);padding:26px 24px 22px;
  display:grid;justify-items:center;gap:16px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.eko-primo .atc-title{margin:0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.eko-primo .atc-bar{width:100%;height:3px;background:rgba(255,255,255,.14);overflow:hidden}
.eko-primo .atc-bar i{display:block;height:100%;width:0;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.eko-primo .atc-steps{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:10px}
.eko-primo .atc-steps li{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);transition:color .2s}
.eko-primo .atc-steps li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-hi);box-sizing:border-box}
.eko-primo .atc-steps li.active{color:var(--fg)}
.eko-primo .atc-steps li.active::before{border-color:#fff;background:radial-gradient(circle,#fff 0 35%,transparent 40%);animation:atcpulse 1s ease-in-out infinite}
.eko-primo .atc-steps li.done{color:var(--fg)}
.eko-primo .atc-steps li.done::before{border-color:#fff;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230b0b0c' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat}
@keyframes atcpulse{50%{box-shadow:0 0 0 4px rgba(255,255,255,.15)}}
.eko-primo .atc.done .ldr i{animation:none;background:radial-gradient(circle,#fff 0 45%,#e9eef5 100%);box-shadow:0 0 6px 1px #fff,0 0 22px 6px rgba(255,255,255,.55)}
.eko-primo .atc.failed .ldr i{animation:none}
.eko-primo .atc-steps li.stopped{color:var(--fg)}
.eko-primo .atc.failed .atc-bar i{background:var(--muted);box-shadow:none}
@media (prefers-reduced-motion:reduce){.eko-primo .atc-steps li.active::before{animation:none}}
/* last on purpose: [hidden] has the same specificity as '.eko-primo .btn' etc., so it has to come after them to win
   (the shop-paused bar hides #cart this way) */
.eko-primo [hidden]{display:none!important}
/* BD Flush Faced: each pod row has a type (rock light / S2) above its colour; "own rock lights" sits over the rows */
.eko-primo .pod .opts{display:grid;gap:6px;min-width:0}
.eko-primo .pod .seg.types{grid-template-columns:repeat(2,minmax(0,1fr))}
.eko-primo .pod .seg.types button{flex-direction:column!important;gap:1px!important;font-size:11px!important}
.eko-primo .pod .seg.types small{font-size:11px;letter-spacing:.02em}
.eko-primo .addon.own{margin:0 0 10px!important}
.eko-primo .ownnote{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
/* ---- Feedback (feedback.js): a button left of the x, and its popup over the builder ---- */
.eko-primo .fbbtn{position:fixed!important;top:10px;right:58px;z-index:30;height:44px!important;padding:0 12px!important;gap:8px!important;
  font-size:13px!important;background:rgba(0,0,0,.75)!important}
.eko-primo h1{padding-right:104px}
@media (max-width:599px){.eko-primo .fbbtn{width:44px!important;padding:0!important;justify-content:center!important}.eko-primo .fbword{display:none}}
@media (min-width:600px){.eko-primo h1{padding-right:190px}}
.eko-primo .fb{position:fixed;inset:0;z-index:50;display:grid;padding:16px;overflow:auto;background:rgba(0,0,0,.74);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.eko-primo .fb-card{position:relative;margin:auto;width:min(480px,100%);background:#0b0b0c;border:1px solid var(--line-hi);
  padding:24px 22px 20px;display:grid;gap:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.eko-primo .fb-card:focus{outline:none}   /* on phones focus lands on the card itself (feedback.js), not a field */
.eko-primo .fb-card h2{margin:0;padding-right:40px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.eko-primo .fb-lede{margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.5}
.eko-primo .fb-l{display:block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eko-primo .fb-l span{margin-left:6px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted)}
/* Salient styles every field site-wide, so these carry !important like the buttons; 16px stops iPhones zooming in */
.eko-primo .fb textarea,.eko-primo .fb input[type=email]{display:block!important;width:100%!important;box-sizing:border-box!important;margin:0!important;
  padding:10px 12px!important;background:#000!important;color:#fff!important;border:1px solid var(--line-hi)!important;border-radius:0!important;
  box-shadow:none!important;font:16px/1.45 var(--font)!important;letter-spacing:0!important;height:auto!important;min-height:0!important}
.eko-primo .fb textarea{min-height:120px!important;resize:vertical!important}
.eko-primo .fb textarea:focus,.eko-primo .fb input[type=email]:focus{outline:none!important;border-color:#fff!important}
.eko-primo .fb-photo{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px;min-width:0}
.eko-primo .fb-file{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important}
.eko-primo .fb-file:focus-visible + .fb-add{outline:2px solid #fff!important;outline-offset:3px!important}
.eko-primo .fb-name{min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.eko-primo .fb-rm{min-height:36px!important;padding:6px 8px!important;text-decoration:underline}
.eko-primo .fb-hint{margin:0;color:var(--muted);font-size:12px}
.eko-primo .fb-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.eko-primo .fb-status{margin:6px 0 0;min-height:1.5em;font-size:14px;line-height:1.5}
.eko-primo .fb-status.bad{color:#ff8a80}
.eko-primo .fb-status.good{font-weight:700}
.eko-primo .fb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.eko-primo .fb-actions .btn{min-width:110px;justify-content:center!important}
.eko-primo .fb-x{position:absolute!important;top:6px;right:6px;width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;
  justify-content:center!important;font-size:22px!important;border-color:transparent!important}
/* last again, after the Feedback rules: the Feedback button stays hidden until feedback.js mounts it */
.eko-primo [hidden]{display:none!important}