/* ==========================================================================
   Cart Drawer / Flyout - reusable, type-aware mini cart
   --------------------------------------------------------------------------
   Self-contained system (csr-includes/cart-drawer). All classes are namespaced
   `wrc-` to avoid collisions on any page. Colors follow the established system:
   blue = actions, green = savings/gift, off-black chips, red only on
   remove-hover. Bebas for numeric prices/totals, DM Mono for SKUs.
   z-index is intentionally high so the drawer clears sticky site headers.
   ========================================================================== */
.wrc-overlay, .wrc-drawer{
  --wrc-ink:#080808; --wrc-offblack:#191A1C; --wrc-dim:#4d525c; --wrc-faint:#8b93a0;
  --wrc-line:#e4e7ec; --wrc-line-soft:#eef0f4;
  --wrc-savings:#a4d007; --wrc-savings-deep:#5f7f00; --wrc-savings-ink:#14210a;
  --wrc-action:#3968BA; --wrc-action-hover:#2f579c; --wrc-red:#CF1C3C;
  --wrc-font-ui:"Outfit","Inter",system-ui,sans-serif;
  --wrc-font-num:"Bebas Neue",Impact,sans-serif;
  --wrc-font-mono:"DM Mono",Menlo,monospace;
}

.wrc-overlay{ position:fixed; inset:0; background:rgba(8,8,8,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:100000; }
.wrc-overlay.open{ opacity:1; pointer-events:auto; }

.wrc-drawer{
  position:fixed; top:0; right:0; bottom:0; width:410px; max-width:94vw; background:#fff;
  z-index:100001; display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .28s cubic-bezier(.3,.7,.3,1); box-shadow:-8px 0 30px rgba(8,8,8,.18);
  font-family:var(--wrc-font-ui); color:var(--wrc-ink); line-height:1.5;
}
.wrc-drawer.open{ transform:translateX(0); }
.wrc-drawer *{ box-sizing:border-box; }

.wrc-head{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--wrc-line); position:relative; }
.wrc-title{ font-family:var(--wrc-font-num); font-size:1.4rem; letter-spacing:.5px; text-transform:uppercase; }
.wrc-title .n{ color:var(--wrc-faint); font-family:var(--wrc-font-ui); font-size:.8rem; font-weight:600; }
.wrc-close{ width:32px; height:32px; border:1px solid var(--wrc-line); border-radius:8px; background:#fff; cursor:pointer; font-size:1.1rem; color:var(--wrc-dim); line-height:1; }
.wrc-close:hover{ border-color:var(--wrc-action); color:var(--wrc-action); }
.wrc-grip{ display:none; }

/* gift-progress rail (gift promos only) */
.wrc-gift{ padding:12px 18px; background:#f8fafc; border-bottom:1px solid var(--wrc-line); }
.wrc-gift[hidden]{ display:none; }
.wrc-gift-msg{ font-size:.8rem; font-weight:600; color:var(--wrc-ink); margin-bottom:8px; }
.wrc-gift-msg .amber{ color:#b26b00; }
.wrc-gift-msg .save{ color:var(--wrc-savings-deep); }
.wrc-track{ position:relative; height:5px; border-radius:999px; background:#e4e7ec; }
.wrc-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#7fa300,var(--wrc-savings)); transition:width .3s; }
.wrc-node{ position:absolute; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:#e4e7ec; border:2px solid #cfd4dc; }
.wrc-node.hit{ background:var(--wrc-savings); border-color:var(--wrc-savings); }

.wrc-items{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.wrc-empty{ padding:40px 22px; text-align:center; color:var(--wrc-faint); font-size:.9rem; }

/* base line item */
.wrc-li{ padding:13px 16px; border-bottom:1px solid var(--wrc-line-soft); }
.wrc-main{ display:flex; gap:12px; align-items:flex-start; }
.wrc-li .wrc-img{ width:54px; height:54px; border:1px solid var(--wrc-line); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; background:#fff; overflow:hidden; }
.wrc-li .wrc-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.wrc-mid{ flex:1; min-width:0; }
.wrc-nm{ font-size:.82rem; font-weight:600; line-height:1.24; }
.wrc-nm a{ color:inherit; text-decoration:none; }
.wrc-nm a:hover{ text-decoration:underline; }
.wrc-meta{ font-size:.7rem; color:var(--wrc-faint); margin-top:2px; font-family:var(--wrc-font-mono); }
.wrc-price{ text-align:right; font-family:var(--wrc-font-num); font-size:1.15rem; line-height:1; flex-shrink:0; }
.wrc-price .was{ display:block; font-family:var(--wrc-font-mono); font-size:.62rem; color:var(--wrc-faint); text-decoration:line-through; }

.wrc-qtyrow{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.wrc-qty{ display:flex; align-items:center; border:1px solid var(--wrc-line); border-radius:8px; overflow:hidden; }
.wrc-qty button{ width:26px; height:26px; background:#fff; border:none; cursor:pointer; color:var(--wrc-dim); font-size:1rem; line-height:1; }
.wrc-qty button:hover{ background:#f0f1f3; }
.wrc-qty .v{ width:28px; text-align:center; font-size:.8rem; font-weight:600; }
.wrc-qty.locked{ opacity:.55; }
.wrc-qty.locked button{ cursor:not-allowed; }
.wrc-rm{ font-size:.72rem; color:var(--wrc-faint); cursor:pointer; text-decoration:underline; background:none; border:none; padding:0; font-family:inherit; }
.wrc-rm:hover{ color:var(--wrc-red); }

/* bundle + package accents */
.wrc-li.bundle{ background:#fbfdf4; border-left:3px solid var(--wrc-savings); }
.wrc-li.pkg{ background:#f6f9fe; border-left:3px solid var(--wrc-action); }
.wrc-tag{ display:inline-block; font-size:.56rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:4px; margin-bottom:3px; }
.wrc-li.bundle .wrc-tag{ background:var(--wrc-savings); color:var(--wrc-savings-ink); }
.wrc-li.pkg .wrc-tag{ background:var(--wrc-action); color:#fff; }

/* expand toggle + panel */
.wrc-exp{ font-size:.72rem; color:var(--wrc-action); cursor:pointer; font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px; user-select:none; background:none; border:none; padding:0; font-family:inherit; }
.wrc-exp .arw{ transition:transform .2s; }
.wrc-exp.open .arw{ transform:rotate(180deg); }
.wrc-comp{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.wrc-comp.open{ max-height:600px; }
.wrc-comp-in{ margin-top:10px; border-top:1px dashed var(--wrc-line); padding-top:8px; display:flex; flex-direction:column; gap:9px; }
.wrc-citem{ display:flex; align-items:center; gap:10px; }
.wrc-cimg{ width:30px; height:30px; border:1px solid var(--wrc-line); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; background:#fff; overflow:hidden; }
.wrc-cimg img{ max-width:100%; max-height:100%; object-fit:contain; }
.wrc-cn{ flex:1; min-width:0; font-size:.74rem; color:var(--wrc-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wrc-cn .role{ display:block; font-size:.62rem; color:var(--wrc-faint); text-transform:uppercase; letter-spacing:.04em; }
.wrc-cp{ font-family:var(--wrc-font-mono); font-size:.72rem; color:var(--wrc-faint); flex-shrink:0; }
.wrc-miniqty{ display:flex; align-items:center; border:1px solid var(--wrc-line); border-radius:6px; overflow:hidden; flex-shrink:0; }
.wrc-miniqty button{ width:20px; height:22px; background:#fff; border:none; cursor:pointer; color:var(--wrc-dim); font-size:.85rem; line-height:1; }
.wrc-miniqty .v{ width:22px; text-align:center; font-size:.72rem; font-weight:600; }
.wrc-miniqty.locked{ opacity:.5; }
.wrc-miniqty.locked button{ cursor:not-allowed; }
.wrc-crm{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border:1px solid var(--wrc-line); border-radius:6px; background:#fff; color:var(--wrc-faint); cursor:pointer; padding:0; }
.wrc-crm:hover{ color:var(--wrc-red); border-color:var(--wrc-red); background:#fff5f6; }
.wrc-note{ font-size:.66rem; color:var(--wrc-faint); font-style:italic; padding-left:2px; }

/* gift row */
.wrc-li.gift{ background:#f8fafc; }
.wrc-li.gift .wrc-img{ border-style:dashed; border-color:var(--wrc-savings); }
.wrc-freeword{ font-family:var(--wrc-font-num); font-size:1.15rem; color:var(--wrc-savings-deep); }
.wrc-change{ color:var(--wrc-action); cursor:pointer; text-decoration:underline; }
/* gift price stack: real value struck through, big FREE beneath */
.wrc-giftprice{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.wrc-wasval{ font-family:var(--wrc-font-mono); font-size:.66rem; color:var(--wrc-faint); text-decoration:line-through; }
/* disqualified (picked but cart dropped below tier) */
.wrc-li.gift.is-void{ background:#fff5f5; }
.wrc-li.gift.is-void .wrc-img{ border-color:#f1c9c9; opacity:.55; filter:grayscale(1); }
.wrc-li.gift.is-void .wrc-nm{ text-decoration:line-through; color:var(--wrc-dim); }
.wrc-li.gift.is-void .wrc-freeword{ color:#c0392b; text-decoration:line-through; opacity:.75; }
.wrc-giftwarn{ margin-top:3px; font-size:.76rem; line-height:1.3; color:#c0392b; }
.wrc-giftwarn .wrc-change{ color:var(--wrc-action); }

/* footer */
.wrc-foot{ border-top:1px solid var(--wrc-line); padding:14px 18px 16px; background:#fff; }
.wrc-rowline{ display:flex; align-items:center; justify-content:space-between; font-size:.84rem; color:var(--wrc-dim); margin-bottom:5px; }
.wrc-rowline.tot{ margin-top:6px; margin-bottom:12px; }
.wrc-rowline.tot .lbl{ font-weight:700; color:var(--wrc-ink); font-size:.95rem; }
.wrc-rowline.tot .val{ font-family:var(--wrc-font-num); font-size:1.9rem; line-height:.8; }
.wrc-rowline .save{ color:var(--wrc-savings-deep); font-weight:600; }
.wrc-muted{ color:var(--wrc-faint); }
.wrc-giftval{ display:inline-flex; align-items:baseline; gap:6px; }
.wrc-giftval .wrc-wasval{ font-size:.76rem; }
.wrc-giftval .wrc-freeword{ font-size:.95rem; }
.wrc-checkout{ width:100%; font-family:var(--wrc-font-ui); font-weight:700; font-size:1rem; background:var(--wrc-action); color:#fff; border:none; border-radius:11px; padding:14px; cursor:pointer; text-align:center; text-decoration:none; display:block; }
.wrc-checkout:hover{ background:var(--wrc-action-hover); }
.wrc-checkout.disabled{ background:#c9ced6; cursor:not-allowed; pointer-events:none; }
.wrc-viewcart{ display:block; text-align:center; font-size:.82rem; color:var(--wrc-dim); margin-top:10px; cursor:pointer; text-decoration:underline; }
.wrc-trust{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:11px; font-size:.66rem; color:var(--wrc-faint); }

/* mobile: drawer becomes a bottom sheet */
@media (max-width:520px){
  .wrc-drawer{ width:100%; max-width:100%; top:auto; height:88vh; border-radius:18px 18px 0 0; transform:translateY(100%); }
  .wrc-drawer.open{ transform:translateY(0); }
  .wrc-grip{ display:block; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; background:#d5d9e0; }
}