/* ==========================================================
   Cart button + cart drawer. Loaded on every page that sells,
   including product pages with their own stylesheet, so every rule
   here is namespaced (.cx-*) and carries its own colours.
   ========================================================== */
.cx-open{
  position:relative;flex:none;display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:12px;border:1px solid #DCE8E8;background:#fff;
  color:#1E272A;cursor:pointer;font:inherit;
  transition:border-color .18s ease,background-color .18s ease;
}
.cx-open:hover{border-color:#0F9E90;background:#E4F5F2}
.cx-count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#CE3434;color:#fff;font-size:.7rem;font-weight:700;line-height:20px;text-align:center;
  box-shadow:0 0 0 2px #fff;
}
.cx-count[hidden]{display:none}

html.cx-lock{overflow:hidden}
.cx{position:fixed;inset:0;z-index:200;font-family:'Poppins',system-ui,-apple-system,sans-serif;color:#1E272A}
.cx[hidden]{display:none}
.cx-scrim{position:absolute;inset:0;background:rgba(18,40,43,.45);opacity:0;transition:opacity .25s ease}
.cx-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:#F5FAFA;display:flex;flex-direction:column;
  box-shadow:-20px 0 50px -20px rgba(18,40,43,.5);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.cx.is-open .cx-scrim{opacity:1}
.cx.is-open .cx-panel{transform:none}
.cx-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #DCE8E8;background:#fff}
.cx-head h2{font-size:1.15rem;letter-spacing:-.02em;margin:0}
.cx-x{width:40px;height:40px;border-radius:10px;border:0;background:#EDF6F5;font-size:1.5rem;line-height:1;cursor:pointer;color:#1E272A}
.cx-x:hover{background:#DCEFEC}
.cx-body{flex:1;overflow-y:auto;padding:16px 18px;overscroll-behavior:contain}
.cx-list{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.cx-item{
  display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;
  background:#fff;border:1px solid #DCE8E8;border-radius:14px;padding:10px 12px;
}
.cx-item img{width:58px;height:auto;border-radius:6px;border:1px solid #EBF2F2;display:block}
.cx-name{display:block;font-weight:600;font-size:.88rem;line-height:1.35;color:#1E272A;text-decoration:none}
.cx-name:hover{color:#0A786D}
.cx-meta{display:block;font-size:.74rem;color:#5D6A6F;margin-top:2px}
.cx-price{display:block;font-size:.9rem;margin-top:4px}
.cx-price s{color:#5D6A6F;font-size:.78rem}
.cx-rm{border:0;background:none;color:#5D6A6F;font:inherit;font-size:.78rem;text-decoration:underline;cursor:pointer;padding:8px 4px;min-height:36px}
.cx-rm:hover{color:#C43331}
.cx-add{
  border:1.5px solid #0F9E90;background:#fff;color:#0A786D;font:inherit;font-weight:600;font-size:.8rem;
  border-radius:10px;padding:7px 12px;cursor:pointer;min-height:36px;white-space:nowrap;
}
.cx-add:hover{background:#E4F5F2}
.cx-up-h{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5D6A6F;margin:22px 0 10px}
.cx-up .cx-item{background:#FBFDFD;border-style:dashed}
.cx-empty{text-align:center;padding:40px 10px;font-size:.92rem;color:#5D6A6F}
.cx-empty[hidden]{display:none}
.cx-empty b{color:#1E272A}
.cx-empty .cx-btn{margin-top:18px;display:inline-flex;width:auto;padding:12px 24px}
.cx-foot{border-top:1px solid #DCE8E8;background:#fff;padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
.cx-foot[hidden]{display:none}
.cx-row{display:flex;justify-content:space-between;font-size:.86rem;color:#5D6A6F;padding:2px 0}
.cx-save span:last-child{color:#147443;font-weight:600}
.cx-total{color:#1E272A;font-size:1.05rem;padding-top:8px;margin-top:6px;border-top:1px dashed #DCE8E8}
.cx-total b{font-size:1.3rem;letter-spacing:-.02em}
.cx-err{background:#FFEDEC;color:#C43331;border-radius:10px;padding:10px 12px;font-size:.82rem;margin:10px 0 0}
.cx-err[hidden]{display:none}
.cx-btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:12px;
  border:0;border-radius:14px;cursor:pointer;font:inherit;font-weight:600;font-size:1rem;text-decoration:none;
  background:linear-gradient(180deg,#D93A3A 0%,#CE3434 55%,#C42F2F 100%);color:#fff;
  box-shadow:0 4px 0 #A82C2C,0 12px 22px -10px rgba(168,44,44,.7);
}
.cx-btn:disabled{opacity:.75;cursor:wait}
.cx-ghost{background:#fff;color:#1E272A;border:1.5px solid #DCE8E8;box-shadow:none}
.cx-note{font-size:.72rem;color:#5D6A6F;text-align:center;margin:10px 0 0;line-height:1.5}
.cx :focus-visible,.cx-open:focus-visible{outline:3px solid #7B5CD6;outline-offset:2px}

/* "Add to cart" once the pack is already in */
[data-add-to-cart].is-in{border-color:#0F9E90!important;color:#0A786D!important;background:#E4F5F2!important}

/* Checkout steps: 1 Cart, 2 Pay, 3 Download */
.cx-n{font-weight:500;color:#5D6A6F;font-size:.95rem}
.cx-steps{list-style:none;display:flex;gap:0;margin:0;padding:10px 18px 12px;background:#fff;border-bottom:1px solid #DCE8E8;counter-reset:none}
.cx-steps li{flex:1;display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;color:#93A3A6;position:relative}
.cx-steps li:not(:last-child)::after{content:"";flex:1;height:2px;border-radius:2px;background:#E3ECEC;margin:0 8px}
.cx-steps i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;
  background:#EDF3F3;color:#5D6A6F;transition:background-color .25s ease,color .25s ease}
.cx-steps li.is-on{color:#0A786D}
.cx-steps li.is-on i{background:#0F9E90;color:#fff;box-shadow:0 0 0 4px rgba(15,158,144,.15)}
.cx-steps li.is-on:not(:last-child)::after{background:linear-gradient(90deg,#0F9E90,#E3ECEC)}

/* Discount tag and the "just added" flash */
.cx-off{font-style:normal;font-size:.7rem;font-weight:700;color:#147443;background:#E4F6EC;border-radius:6px;padding:1px 6px;margin-left:2px;vertical-align:1px}
.cx-new{animation:cx-pop .7s cubic-bezier(.2,.9,.3,1.3);border-color:#0F9E90;box-shadow:0 0 0 3px rgba(15,158,144,.14)}
@keyframes cx-pop{0%{transform:scale(.94);opacity:.3}60%{transform:scale(1.02);opacity:1}100%{transform:none}}

/* Suggestions under the cart */
.cx-up-h{text-transform:none;letter-spacing:-.01em;font-size:.98rem;color:#1E272A;margin:24px 0 2px}
.cx-up-s{font-size:.76rem;color:#5D6A6F;margin:0 0 10px}
.cx-up .cx-item{background:linear-gradient(180deg,#fff,#FAFDFD);border-style:solid;border-color:#E3ECEC}
.cx-up .cx-add{background:#0F9E90;border-color:#0F9E90;color:#fff;box-shadow:0 3px 0 #0A786D}
.cx-up .cx-add:hover{background:#0C8C80}

/* Bundle offer nudge above the cart items */
.cx-deal{background:linear-gradient(135deg,#FFF6DB,#FFEFD0);border:1.5px solid #F0C75E;border-radius:14px;padding:10px 12px;margin-bottom:12px;font-size:.84rem;color:#5A4300}
.cx-deal[hidden]{display:none}
.cx-deal b{display:block;font-weight:600}
.cx-bar{display:block;height:7px;border-radius:99px;background:rgba(240,168,31,.22);margin-top:8px;overflow:hidden}
.cx-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F0A81F,#E85D4F);transition:width .5s cubic-bezier(.22,.61,.36,1)}
.cx-deal.is-won{background:linear-gradient(135deg,#E4F6EC,#D6F2E2);border-color:#5CC28A;color:#0E5A31}
.cx-deal.is-won .cx-bar{background:rgba(22,179,94,.2)}
.cx-deal.is-won .cx-bar i{background:linear-gradient(90deg,#16B35E,#0F9E90)}
.cx-bund{color:#147443;font-weight:600}
.cx-bund[hidden]{display:none}

/* Pay button and trust row */
.cx-pay{background:linear-gradient(180deg,#16B35E 0%,#12A152 55%,#0F9147 100%);box-shadow:0 4px 0 #0B7539,0 12px 22px -10px rgba(11,117,57,.7);font-size:1.05rem}
.cx-pay:not(:disabled){animation:cx-glow 2.4s ease-in-out 1s 2}
@keyframes cx-glow{50%{box-shadow:0 4px 0 #0B7539,0 0 0 7px rgba(22,179,94,.18)}}
.cx-trust{list-style:none;display:flex;justify-content:space-between;gap:6px;margin:12px 0 0;padding:0}
.cx-trust li{flex:1;text-align:center;font-size:.7rem;font-weight:600;color:#3E4C50;background:#F3F8F8;border-radius:8px;padding:6px 4px;white-space:nowrap}

@media(prefers-reduced-motion:reduce){.cx-panel,.cx-scrim{transition:none}.cx-new,.cx-pay{animation:none}}

/* Bundle offer line shown on product pages and /shop (added by store.js) */
.cx-offer{display:inline-block;margin:12px 0 0;padding:7px 12px;border-radius:10px;background:#FFF6DB;border:1px dashed #F0C75E;color:#5A4300;font-size:.84rem;line-height:1.4}
.cx-offer b{color:#B23A00}
.pricebox .cx-offer{margin:0 0 14px}