/* ============================================================================
   Custom Product Ordering — storefront
   Design system supplied by the client (configurator-premium-v2).
   Rendered inside a shadow root, so theme CSS cannot reach it.
   ========================================================================== */



/* ===== Premium configurator design system ===== */
.cpo-app{
  --cpo-loaded:1;
  --accent:#f26419;
  --accent-dark:#d94f08;
  --accent-soft:#fff4ec;
  --accent-line:#ffd4bb;
  --ink:#111827;
  --ink-2:#344054;
  --muted:#667085;
  --faint:#98a2b3;
  --line:#e6e9ef;
  --line-strong:#d9dee8;
  --card:#ffffff;
  --tile:#f8fafc;
  --page:#f6f8fb;
  --ok:#0f9f6e;
  --red:#e5484d;
  --blue:#3b82f6;
  --amber:#d9890d;
  --navy:#111827;
  --navy-2:#1f2937;
  --r:18px;
  --r-sm:12px;
  --shadow:0 14px 40px rgba(17,24,39,.065),0 2px 6px rgba(17,24,39,.025);
  --shadow-hover:0 18px 48px rgba(17,24,39,.11),0 4px 12px rgba(17,24,39,.04);
  display:block;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;font-weight:500;color:var(--ink);
  text-align:left;letter-spacing:0;background:transparent;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
.cpo-app *,.cpo-app *::before,.cpo-app *::after{box-sizing:border-box}
.cpo-app div,.cpo-app section,.cpo-app aside,.cpo-app span,.cpo-app p,
.cpo-app figure,.cpo-app figcaption,.cpo-app dl,.cpo-app dt,.cpo-app dd,
.cpo-app h1,.cpo-app h2,.cpo-app h3,.cpo-app h4,.cpo-app b,.cpo-app strong,
.cpo-app label,.cpo-app small,.cpo-app i,.cpo-app em,.cpo-app img,.cpo-app svg{
  margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:inherit;
  line-height:inherit;letter-spacing:inherit;color:inherit;text-transform:none;
  text-align:inherit;box-shadow:none;float:none;position:static;max-width:100%;
}
.cpo-app button,.cpo-app input,.cpo-app textarea,.cpo-app select{
  margin:0;padding:0;border:0;border-radius:0;background:none;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:none;box-shadow:none;min-height:0;height:auto;
  width:auto;line-height:inherit;-webkit-appearance:none;appearance:none;
}
.cpo-app button{cursor:pointer;text-align:left}
.cpo-app img,.cpo-app svg{display:block}
.cpo-app :focus{outline:none}
.cpo-app :focus-visible{outline:3px solid rgba(242,100,25,.3);outline-offset:3px}

/* ===== top hero ===== */
.cpo-hero{
  position:relative;overflow:hidden;
  margin-bottom:18px;padding:28px 30px;
  border:1px solid #e8ebf1;border-radius:22px;background:#fff;
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.cpo-hero::before{
  content:"";position:absolute;inset:-80px -120px auto auto;width:330px;height:260px;
  background:radial-gradient(circle,rgba(242,100,25,.13),rgba(242,100,25,0) 70%);
  pointer-events:none;
}
.cpo-hero-copy{position:relative;z-index:1;max-width:760px}
.cpo-kicker{display:flex!important;align-items:center;gap:8px;margin-bottom:8px!important;color:var(--accent)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.11em!important;text-transform:uppercase!important}
.cpo-kicker::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 5px rgba(242,100,25,.10)}
.cpo-hero h1{font-size:30px!important;line-height:1.12!important;font-weight:800!important;letter-spacing:-.035em!important;color:#101828!important}
.cpo-hero p{margin-top:9px!important;max-width:690px;color:var(--muted)!important;font-size:13.5px!important;line-height:1.65!important}
.cpo-hero-pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:390px}
.cpo-hero-pill{display:inline-flex!important;align-items:center;gap:7px;padding:8px 11px!important;border:1px solid #e8ebf1!important;border-radius:999px!important;background:#fff!important;color:#344054!important;font-size:11.5px!important;font-weight:700!important;box-shadow:0 4px 12px rgba(17,24,39,.035)!important}
.cpo-hero-pill::before{content:"✓";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#ecfdf3;color:#0d8f63;font-size:10px;font-weight:900}

/* ===== progress ===== */
.cpo-progress{
  position:sticky;top:12px;z-index:60;
  margin-bottom:20px;padding:10px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:7px;
  background:rgba(255,255,255,.92);border:1px solid #e5e9f0;border-radius:16px;
  box-shadow:0 8px 28px rgba(17,24,39,.07);backdrop-filter:blur(12px);
}
.cpo-progress button{position:relative;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px!important;color:#667085!important;transition:.18s ease}
.cpo-progress button:hover{background:#f8fafc;color:#344054!important}
.cpo-progress button.is-active{background:#fff3eb;color:#b93800!important}
.cpo-progress button.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--accent)}
.cpo-progress-num{display:grid!important;place-items:center;width:26px;height:26px;flex:none;border-radius:8px!important;background:#f2f4f7!important;color:#667085!important;font-size:11px!important;font-weight:800!important}
.cpo-progress button.is-active .cpo-progress-num{background:var(--accent)!important;color:#fff!important;box-shadow:0 5px 12px rgba(242,100,25,.22)!important}
.cpo-progress-label{font-size:11px!important;font-weight:700!important;white-space:nowrap}

/* ===== page layout ===== */
.cpo-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:22px;align-items:start}
.cpo-main{display:grid;gap:18px;min-width:0}
.cpo-step{scroll-margin-top:92px}
.cpo-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px 26px;
  box-shadow:var(--shadow);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}
.cpo-card:hover{border-color:#dfe3ea;box-shadow:var(--shadow-hover)}
.cpo-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),#ff9b63);opacity:.88}

/* ===== section headings ===== */
.cpo-shead{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"num title chosen" "num hint hint";align-items:center;column-gap:12px;row-gap:3px;margin-bottom:19px}
.cpo-snum{grid-area:num;display:grid!important;place-items:center;width:40px;height:40px;border-radius:12px!important;background:var(--accent-soft)!important;border:1px solid var(--accent-line)!important;color:var(--accent-dark)!important;font-size:0!important;font-weight:800!important}
.cpo-snum::after{content:attr(data-number);font-size:13px}
.cpo-stitle{grid-area:title;font-size:18px!important;font-weight:800!important;line-height:1.25!important;letter-spacing:-.02em!important;color:#101828!important}
.cpo-shint{grid-area:hint;width:100%;font-size:12.2px!important;font-weight:500!important;color:var(--muted)!important;margin-top:0!important;line-height:1.55!important}
.cpo-schosen{grid-area:chosen;margin-left:auto;padding:5px 9px!important;border:1px solid #e8ebf1!important;border-radius:999px!important;background:#f8fafc!important;font-size:10.5px!important;font-weight:700!important;color:#667085!important;white-space:nowrap}
.cpo-schosen:empty{display:none!important}

/* ===== image option cards ===== */
.cpo-opts{display:grid;gap:13px}
.cpo-opts-6{grid-template-columns:repeat(3,1fr)}
.cpo-opts-4{grid-template-columns:repeat(4,1fr)}
.cpo-opt{position:relative;display:block;width:100%;padding:0!important;text-align:center!important;border-radius:14px!important}
.cpo-thumb{
  position:relative;display:grid!important;place-items:center;
  min-height:138px;padding:17px!important;
  background:linear-gradient(180deg,#fbfcfe 0%,#f6f8fb 100%)!important;
  border:1.5px solid #e8ebf1!important;border-radius:14px!important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.cpo-opt:hover .cpo-thumb{border-color:#f3b48f!important;background:#fffaf7!important;transform:translateY(-2px);box-shadow:0 10px 24px rgba(17,24,39,.07)!important}
.cpo-opt[aria-checked="true"] .cpo-thumb{border-color:var(--accent)!important;background:linear-gradient(180deg,#fff9f5,#fff3eb)!important;box-shadow:0 0 0 3px rgba(242,100,25,.09),0 12px 28px rgba(242,100,25,.10)!important}
.cpo-opt[aria-checked="true"] .cpo-thumb::after{content:"✓";position:absolute;right:10px;top:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:white;font-size:12px;font-weight:900;box-shadow:0 5px 12px rgba(242,100,25,.28)}
.cpo-thumb img{width:96px!important;height:96px!important;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(17,24,39,.15));transition:transform .2s ease!important}
.cpo-opt:hover .cpo-thumb img{transform:scale(1.035)}
.cpo-badge{position:absolute!important;top:10px!important;left:10px!important;z-index:2;padding:4px 8px!important;border-radius:999px!important;font-size:9px!important;font-weight:800!important;letter-spacing:.04em!important;color:#fff!important;background:#ef4444!important;box-shadow:0 4px 10px rgba(239,68,68,.18)!important}
.cpo-badge.is-fast{background:#0f9f6e!important}.cpo-badge.is-value{background:#d9890d!important}
.cpo-pick{display:flex!important;align-items:flex-start!important;justify-content:center!important;gap:8px!important;margin-top:10px!important;padding:0 3px!important}
.cpo-dot{flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%!important;border:1.5px solid #c8ced8!important;background:#fff!important;display:grid!important;place-items:center;transition:.14s}
.cpo-opt[aria-checked="true"] .cpo-dot,.cpo-turn[aria-checked="true"] .cpo-dot{border-color:var(--accent)!important}
.cpo-opt[aria-checked="true"] .cpo-dot::after,.cpo-turn[aria-checked="true"] .cpo-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cpo-ptext{text-align:left!important;min-width:0}
.cpo-oname{display:block!important;font-size:12.5px!important;font-weight:700!important;color:#1d2939!important;line-height:1.35!important}
.cpo-opt[aria-checked="true"] .cpo-oname{color:#b93800!important}
.cpo-onote{display:block!important;font-size:11px!important;font-weight:700!important;color:var(--muted)!important;margin-top:2px!important}
.cpo-onote.is-free{color:#0f9f6e!important}
.cpo-osub{display:block!important;font-size:10.5px!important;font-weight:500!important;color:#98a2b3!important;margin-top:2px!important}

/* ===== size ===== */
.cpo-sizewrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:stretch}
.cpo-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cpo-field label,.cpo-lbl{display:block!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:#475467!important;margin:0 0 7px!important}
.cpo-app .cpo-inp{display:block;width:100%;background:#fff!important;border:1.5px solid #dfe3ea!important;border-radius:11px!important;padding:12px 13px!important;font-size:13.5px!important;font-weight:600!important;color:#101828!important;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important}
.cpo-app .cpo-inp:hover{border-color:#c9d0da!important}.cpo-app .cpo-inp:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(242,100,25,.09)!important;background:#fffdfc!important}
.cpo-app textarea.cpo-inp{resize:vertical;min-height:96px;font-weight:500!important;line-height:1.55!important}
.cpo-app .cpo-inp::-webkit-outer-spin-button,.cpo-app .cpo-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cpo-inwrap{position:relative;display:block}
.cpo-suffix{position:absolute!important;right:12px!important;top:50%!important;transform:translateY(-50%)!important;font-size:11px!important;font-weight:700!important;color:#98a2b3!important;pointer-events:none}
.cpo-inwrap .cpo-inp{padding-right:34px!important}
.cpo-quick{display:flex!important;flex-wrap:wrap;gap:7px!important;margin-top:13px!important}
.cpo-chipbtn{padding:7px 11px!important;border:1px solid #dfe3ea!important;border-radius:999px!important;background:#fff!important;font-size:11.5px!important;font-weight:700!important;color:#475467!important;transition:.15s ease!important}
.cpo-chipbtn:hover{border-color:#f3b48f!important;color:#b93800!important;background:#fffaf7!important}.cpo-chipbtn[aria-pressed="true"]{border-color:var(--accent)!important;background:var(--accent-soft)!important;color:#b93800!important;box-shadow:0 0 0 2px rgba(242,100,25,.07)!important}
.cpo-band{margin-top:15px!important;padding:11px 13px!important;border-radius:11px!important;background:#fff8f3!important;border:1px solid #ffd7bf!important;font-size:11.8px!important;font-weight:600!important;color:#8b451d!important;line-height:1.55!important}
.cpo-band b{color:#b93800!important}

/* ===== quantity ===== */
.cpo-qtygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.cpo-qty{position:relative;padding:13px 9px!important;text-align:center!important;background:#fff!important;border:1.5px solid #e4e7ec!important;border-radius:12px!important;transition:.16s ease!important;min-height:66px}
.cpo-qty:hover{border-color:#f3b48f!important;background:#fffaf7!important;transform:translateY(-1px)}
.cpo-qty[aria-pressed="true"]{border-color:var(--accent)!important;background:linear-gradient(180deg,#fff8f3,#fff3eb)!important;box-shadow:0 0 0 3px rgba(242,100,25,.08)!important}
.cpo-qty[aria-pressed="true"]::after{content:"✓";position:absolute;top:7px;right:8px;color:var(--accent);font-size:10px;font-weight:900}
.cpo-qty b{display:block!important;font-size:14px!important;font-weight:800!important;color:#101828!important}.cpo-qty[aria-pressed="true"] b{color:#b93800!important}
.cpo-qty span{display:block!important;font-size:10.5px!important;font-weight:700!important;color:#667085!important;margin-top:3px!important}.cpo-qty[aria-pressed="true"] span{color:#c2410c!important}
.cpo-custom{display:grid;grid-template-columns:minmax(0,280px) auto;gap:9px;margin-top:13px;align-items:center}
.cpo-btn-confirm{padding:12px 20px!important;border-radius:11px!important;background:#111827!important;color:#fff!important;font-size:12.5px!important;font-weight:800!important;text-align:center!important;transition:.15s ease!important;box-shadow:0 7px 16px rgba(17,24,39,.12)!important}.cpo-btn-confirm:hover{background:#1f2937!important;transform:translateY(-1px)}
.cpo-tierhint{margin-top:12px!important;font-size:11.5px!important;font-weight:700!important;color:#b93800!important}

/* ===== turnaround ===== */
.cpo-turns{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.cpo-turn{position:relative;padding:16px!important;border:1.5px solid #e4e7ec!important;border-radius:13px!important;background:#fff!important;transition:.16s ease!important;min-height:104px}
.cpo-turn:hover{border-color:#f3b48f!important;transform:translateY(-1px);box-shadow:0 8px 20px rgba(17,24,39,.05)!important}
.cpo-turn[aria-checked="true"]{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(242,100,25,.08)!important}
.cpo-turn.t-fast{background:linear-gradient(180deg,#f3fbf7,#eff9f4)!important}.cpo-turn.t-std{background:linear-gradient(180deg,#f6f9ff,#f1f5fd)!important}.cpo-turn.t-eco{background:linear-gradient(180deg,#fffaf1,#fff7e8)!important}
.cpo-turn .cpo-pick{justify-content:flex-start!important;margin-top:8px!important;padding:0!important}.cpo-turn b{display:block!important;font-size:12.5px!important;font-weight:800!important;color:#101828!important}.cpo-turn small{display:block!important;font-size:10.8px!important;font-weight:500!important;color:#667085!important;margin-top:4px!important;line-height:1.5!important}
.cpo-tag{position:static!important;display:inline-flex!important;padding:4px 8px!important;border-radius:999px!important;font-size:9px!important;font-weight:800!important;letter-spacing:.04em!important;color:#fff!important}.cpo-tag.g{background:#0f9f6e!important}.cpo-tag.b{background:#3b82f6!important}.cpo-tag.a{background:#d9890d!important}

/* ===== artwork ===== */
.cpo-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.cpo-drop{display:grid!important;place-items:center;gap:8px!important;text-align:center!important;padding:28px 18px!important;min-height:166px;border:1.5px dashed #cfd5df!important;border-radius:14px!important;background:linear-gradient(180deg,#fbfcfd,#f8fafc)!important;transition:.16s ease!important}
.cpo-drop:hover,.cpo-drop.is-over{border-color:var(--accent)!important;background:#fff8f3!important;box-shadow:inset 0 0 0 3px rgba(242,100,25,.05)!important}.cpo-drop svg{width:36px!important;height:36px!important;color:var(--accent)!important;padding:8px!important;border-radius:10px!important;background:#fff0e7!important}
.cpo-dropt{font-size:12.5px!important;font-weight:700!important;color:#344054!important}.cpo-link{color:#b93800!important;text-decoration:underline;text-underline-offset:2px}.cpo-dropm{font-size:10.5px!important;font-weight:500!important;color:#98a2b3!important;line-height:1.5!important}
.cpo-files{display:grid;gap:7px;margin-top:9px}.cpo-file{display:flex!important;align-items:center;gap:10px!important;padding:9px 11px!important;border:1px solid #e4e7ec!important;border-radius:10px!important;background:#fff!important}.cpo-file.is-error{border-color:#f2b8bb!important;background:#fff6f6!important}
.cpo-ext{flex:none;font-size:9px!important;font-weight:800!important;color:#667085!important;border:1px solid #e4e7ec!important;border-radius:5px!important;padding:3px 5px!important;background:#f8fafc!important}.cpo-fb{flex:1;min-width:0}.cpo-fn{display:block!important;font-size:11.5px!important;font-weight:700!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cpo-fm{display:block!important;font-size:10px!important;font-weight:600!important;color:#98a2b3!important;margin-top:1px!important}.cpo-fm.is-err{color:#d92d20!important;font-weight:700!important}.cpo-bar{display:block!important;height:3px!important;background:#eef1f4!important;border-radius:2px!important;overflow:hidden;margin-top:5px!important}.cpo-bar i{display:block!important;height:100%!important;background:var(--accent)!important;transition:width .2s!important}.cpo-rm{flex:none;width:22px!important;height:22px!important;display:grid!important;place-items:center;color:#98a2b3!important;font-size:16px!important;line-height:1!important;border-radius:6px!important}.cpo-rm:hover{color:#d92d20!important;background:#f2f4f7!important}.cpo-stack{display:grid;gap:14px;align-content:start}

/* ===== summary rail ===== */
.cpo-rail{position:sticky;top:92px;align-self:start;background:#fff;border:1px solid #e4e7ec;border-radius:20px;overflow:hidden;box-shadow:0 20px 55px rgba(17,24,39,.10)}
.cpo-railhead{position:relative;padding:20px 20px 18px!important;background:linear-gradient(135deg,#111827,#202938)!important;color:#fff!important;font-size:17px!important;font-weight:800!important;letter-spacing:-.02em!important;border-bottom:0!important}
.cpo-railhead::before{content:"Your selections";display:block;margin-bottom:4px;color:#c7ccd5;font-size:9.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase}
.cpo-railhead::after{content:"";position:absolute;right:-24px;top:-35px;width:110px;height:110px;border-radius:50%;background:rgba(242,100,25,.18)}
.cpo-spec{padding:9px 18px 10px!important}.cpo-spec>div{display:grid!important;grid-template-columns:minmax(78px,auto) minmax(0,1fr) auto;align-items:center;gap:9px!important;padding:9px 0!important;border-bottom:1px solid #f0f2f5!important}.cpo-spec>div:last-child{border-bottom:0!important}.cpo-spec dt{font-size:10.7px!important;font-weight:600!important;color:#667085!important;white-space:nowrap}.cpo-spec dd{margin-left:auto!important;font-size:11.5px!important;font-weight:800!important;color:#1d2939!important;text-align:right!important;overflow:hidden;text-overflow:ellipsis}.cpo-editl{margin-left:0!important;padding:3px 5px!important;border-radius:6px!important;font-size:9.5px!important;font-weight:800!important;color:#b93800!important;white-space:nowrap}.cpo-editl:hover{background:#fff3eb!important;text-decoration:none!important}
.cpo-money{padding:13px 18px!important;border-top:1px solid #edf0f3!important;background:#fafbfc!important;display:grid!important;gap:8px!important}.cpo-mrow{display:flex!important;justify-content:space-between!important;gap:12px!important;font-size:11.5px!important}.cpo-mrow span{color:#667085!important;font-weight:600!important}.cpo-mrow b{font-weight:800!important;color:#1d2939!important}.cpo-mrow b.is-free{color:#0f9f6e!important}
.cpo-totalrow{position:relative;display:grid!important;grid-template-columns:1fr auto;align-items:end!important;gap:2px 10px!important;padding:17px 18px!important;border-top:1px solid #edf0f3!important;background:#fff!important}.cpo-totalrow span:first-child{grid-column:1;font-size:11px!important;font-weight:700!important;color:#667085!important;text-transform:uppercase!important;letter-spacing:.06em!important}.cpo-totalrow strong{grid-column:1;font-size:30px!important;font-weight:800!important;color:#101828!important;letter-spacing:-.04em!important;line-height:1!important}.cpo-cur{grid-column:2;grid-row:1/3;align-self:center;font-size:9px!important;font-weight:800!important;color:#667085!important;border:1px solid #e4e7ec!important;border-radius:7px!important;padding:4px 7px!important;background:#f8fafc!important}
.cpo-notice{margin:0 18px 12px!important;padding:10px 12px!important;border-radius:10px!important;background:#fffaeb!important;border:1px solid #fedf89!important;font-size:10.8px!important;font-weight:700!important;line-height:1.5!important;color:#934a00!important}
.cpo-ctas{display:grid;grid-template-columns:1fr;gap:8px;padding:0 18px 14px!important}.cpo-cta{padding:13px 12px!important;border-radius:11px!important;text-align:center!important;font-size:12px!important;font-weight:800!important;transition:.16s ease!important}.cpo-cta-primary{background:linear-gradient(180deg,#f6742e,#ed5f12)!important;color:#fff!important;box-shadow:0 9px 20px rgba(242,100,25,.24)!important}.cpo-cta-primary:hover{background:linear-gradient(180deg,#ed681f,#d94f08)!important;transform:translateY(-1px);box-shadow:0 12px 24px rgba(242,100,25,.28)!important}.cpo-cta-primary:disabled{background:#d6dae1!important;color:#fff!important;cursor:default;box-shadow:none!important;transform:none!important}.cpo-cta-ghost{background:#fff!important;border:1.5px solid #dfe3ea!important;color:#344054!important}.cpo-cta-ghost:hover{background:#f8fafc!important;border-color:#c9d0da!important}
.cpo-ticks{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:1px 18px 15px!important}.cpo-tick{display:flex!important;align-items:center;gap:6px!important;font-size:9.8px!important;font-weight:700!important;color:#475467!important}.cpo-tick::before{content:"✓";display:grid;place-items:center;width:14px;height:14px;flex:none;border-radius:50%;background:#ecfdf3;color:#0f9f6e;font-size:8px;font-weight:900}
.cpo-fine{padding:0 18px 17px!important;font-size:9.8px!important;font-weight:600!important;color:#98a2b3!important;text-align:center!important;line-height:1.5!important}

/* ===== loading / toast / mobile checkout ===== */
@keyframes cpo-fade{0%,100%{opacity:.35}50%{opacity:.8}}
.cpo-money.is-calc b,.cpo-money.is-calc+.cpo-totalrow strong{animation:cpo-fade .9s ease-in-out infinite}
.cpo-toast{position:fixed!important;left:50%!important;bottom:24px!important;transform:translate(-50%,10px)!important;padding:12px 17px!important;border-radius:10px!important;background:#111827!important;color:#fff!important;font-size:11.5px!important;font-weight:700!important;opacity:0;pointer-events:none;transition:.18s!important;z-index:99999;max-width:calc(100% - 32px);box-shadow:0 12px 30px rgba(17,24,39,.22)!important}.cpo-toast.is-on{opacity:1;transform:translate(-50%,0)!important}
.cpo-sticky{display:none}

@media (max-width:1220px){
  .cpo-layout{grid-template-columns:minmax(0,1fr) 340px}
  .cpo-opts-6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
  body{padding:24px 18px 56px}
  .cpo-layout{grid-template-columns:1fr}
  .cpo-rail{position:static}
  .cpo-opts-6{grid-template-columns:repeat(3,1fr)}
  .cpo-sizewrap{grid-template-columns:1fr}
  
  .cpo-progress{top:8px}
}
@media (max-width:820px){
  body{padding:16px 12px 84px}
  .cpo-hero{padding:22px 20px;align-items:flex-start;flex-direction:column;gap:15px}
  .cpo-hero h1{font-size:24px!important}.cpo-hero-pills{justify-content:flex-start;max-width:none}
  .cpo-progress{overflow-x:auto;grid-template-columns:repeat(6,minmax(105px,1fr));scrollbar-width:none}.cpo-progress::-webkit-scrollbar{display:none}
  .cpo-card{padding:20px 17px 21px}
  .cpo-shead{grid-template-columns:auto 1fr;grid-template-areas:"num title" "num hint"}.cpo-schosen{display:none!important}
  .cpo-opts-6{grid-template-columns:repeat(2,1fr)}.cpo-opts-4{grid-template-columns:repeat(2,1fr)}
  .cpo-qtygrid{grid-template-columns:repeat(3,1fr)}
  .cpo-turns{grid-template-columns:1fr}.cpo-detail{grid-template-columns:1fr;gap:18px}
  .cpo-rail .cpo-ctas,.cpo-rail .cpo-fine{display:none!important}
  .cpo-sticky{display:flex!important;align-items:center;gap:12px;position:fixed!important;left:0;right:0;bottom:0;z-index:99998;padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96)!important;border-top:1px solid #e4e7ec!important;box-shadow:0 -7px 24px rgba(17,24,39,.10)!important;backdrop-filter:blur(12px)}
  .cpo-sticky-total{display:block!important;font-size:19px!important;font-weight:800!important;color:#101828!important;letter-spacing:-.03em!important}.cpo-sticky-meta{display:block!important;font-size:9.8px!important;font-weight:600!important;color:#667085!important;margin-top:2px!important}.cpo-sticky .cpo-cta{margin-left:auto!important;padding:12px 18px!important}
  .cpo-app{padding-bottom:72px}
}
@media (max-width:560px){
  .cpo-hero-pills{gap:6px}.cpo-hero-pill{font-size:10.5px!important;padding:7px 9px!important}
  .cpo-opts-6,.cpo-opts-4{grid-template-columns:repeat(2,minmax(0,1fr))}.cpo-thumb{min-height:120px;padding:13px!important}.cpo-thumb img{width:82px!important;height:82px!important}
  .cpo-qtygrid{grid-template-columns:repeat(2,1fr)}
  .cpo-two,.cpo-custom,.cpo-ticks{grid-template-columns:1fr}
  .cpo-custom{align-items:stretch}.cpo-btn-confirm{width:100%!important}
  .cpo-totalrow strong{font-size:27px!important}
}
@media (prefers-reduced-motion:reduce){.cpo-app *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ============================================================================
   Additions
   ========================================================================== */

/* ---- reset: still needed for the light-DOM fallback ---- */
.cpo-app *,.cpo-app *::before,.cpo-app *::after{box-sizing:border-box}
.cpo-app button,.cpo-app input,.cpo-app textarea,.cpo-app select{
  font-family:inherit;color:inherit;letter-spacing:inherit;text-transform:none;
  -webkit-appearance:none;appearance:none;
}
.cpo-app button{cursor:pointer;background:none;border:0;padding:0;text-align:left}
.cpo-app img,.cpo-app svg{display:block;max-width:100%}
.cpo-app :focus{outline:none}
.cpo-app :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cpo-app *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- carousel for the patch-type row ---- */
.cpo-carousel{position:relative}
.cpo-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:14px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:4px 2px 12px;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.cpo-track::-webkit-scrollbar{height:6px}
.cpo-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.cpo-track::-webkit-scrollbar-track{background:transparent}
.cpo-track > *{scroll-snap-align:start}
.cpo-arrow{
  position:absolute;top:42%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  color:var(--ink-2);transition:.16s;
}
.cpo-arrow:hover{color:var(--accent-dark);border-color:var(--accent-line);transform:translateY(-50%) scale(1.06)}
.cpo-arrow[hidden]{display:none}
.cpo-arrow.is-prev{left:-16px}
.cpo-arrow.is-next{right:-16px}
.cpo-arrow svg{width:17px;height:17px}
@media (max-width:820px){.cpo-arrow.is-prev{left:-4px}.cpo-arrow.is-next{right:-4px}}

/* ---- back link on each step ---- */
.cpo-back{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-size:12.5px;font-weight:700;color:var(--muted);transition:color .14s;
}
.cpo-back:hover{color:var(--accent-dark)}
.cpo-back svg{width:14px;height:14px}

/* ---- quantity, rebuilt ---- */
.cpo-qtygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cpo-qty{
  position:relative;display:block;width:100%;padding:14px 10px;text-align:left;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);transition:.16s;
}
.cpo-qty:hover{border-color:var(--accent-line);box-shadow:var(--shadow)}
.cpo-qty[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow)}
.cpo-qty b{display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.cpo-qty[aria-pressed="true"] b{color:var(--accent-dark)}
.cpo-qty em{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-top:1px}
.cpo-qty span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
.cpo-qty[aria-pressed="true"] span{color:var(--accent-dark);border-color:var(--accent-line)}
.cpo-qty .cpo-save{
  position:absolute;top:-8px;right:8px;padding:2px 7px;border-radius:6px;
  background:var(--ok);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.03em;
}

.cpo-qbar{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--tile);
}
.cpo-qbar-lbl{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cpo-stepper{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:#fff}
.cpo-stepper button{height:44px;display:grid;place-items:center;font-size:19px;font-weight:700;color:var(--ink-2);background:#fff;transition:background .14s}
.cpo-stepper button:hover{background:var(--accent-soft);color:var(--accent-dark)}
.cpo-stepper input{
  height:44px;width:100%;border:0;border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);
  text-align:center;font-size:16px;font-weight:800;color:var(--ink);background:#fff;
}
.cpo-stepper input:focus{outline:none;background:var(--accent-soft)}
.cpo-qbar-unit{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.cpo-tierhint{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,#fff8f3,#fff4ec);border:1px solid var(--accent-line);
  font-size:12.5px;font-weight:700;color:var(--accent-dark);line-height:1.5;
}
.cpo-tierhint:empty{display:none}

/* ---- sticky summary ---- */
.cpo-rail{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow-y:auto;scrollbar-width:thin}
.cpo-rail::-webkit-scrollbar{width:6px}
.cpo-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
@media (max-width:1140px){.cpo-rail{position:static;max-height:none;overflow:visible}}
/* step icon uploaded from the admin */
.cpo-sicon{width:26px;height:26px;object-fit:contain;border-radius:6px;flex:none}