/* ppw-cart.css — PPW unified affiliate cart (v1)
 * Brand v1 palette: navy #232C3B / gold #FFBB58 / cream #F5EBD7, EB Garamond + Inter.
 * The drawer surface is deep navy to sit coherently over the brand-v1 stack pages.
 * iHerb checkout = gold (primary brand), Amazon = its orange. All selectors are
 * .ppwc-* / .ppw-add prefixed to avoid collisions with page styles.
 */
:root{
  --ppwc-bg:#1b2330;            /* deep navy — drawer surface */
  --ppwc-bg-2:#232C3B;          /* brand navy — cards/footer */
  --ppwc-ink:#F5EBD7;           /* cream — text */
  --ppwc-muted:#A8B0BD;
  --ppwc-line:rgba(245,235,215,.14);
  --ppwc-gold:#FFBB58;          /* brand gold — primary accent + iHerb */
  --ppwc-gold-deep:#e6a23d;
  --ppwc-navy:#232C3B;          /* text on gold */
  --ppwc-amazon:#ff9900;        /* Amazon orange */
  --ppwc-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Add-to-cart button (overrides page .btn base) ----------------------- */
.btn.ppw-add{
  background:var(--ppwc-gold);
  color:var(--ppwc-navy);
  border:none;
  cursor:pointer;
  font:inherit;
  font-weight:600;
}
.btn.ppw-add:hover{transform:translateY(-1px);background:#ffc874}
.btn.ppw-add:active{transform:translateY(0)}
.btn.ppw-add.is-added{background:var(--ppwc-gold-deep)}
.ppw-add-ic{font-size:.95em;line-height:1}

/* ---- Floating cart button ------------------------------------------------ */
.ppwc-fab{
  position:fixed;right:20px;bottom:20px;z-index:1200;
  width:58px;height:58px;border-radius:50%;
  background:var(--ppwc-gold);color:var(--ppwc-navy);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
  transition:transform .2s var(--ppwc-ease),box-shadow .2s var(--ppwc-ease);
}
.ppwc-fab:hover{transform:translateY(-2px) scale(1.04)}
.ppwc-fab-ic{font-size:1.5rem;line-height:1}
.ppwc-fab-count{
  position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;
  border-radius:11px;background:var(--ppwc-navy);color:var(--ppwc-gold);
  font-family:'Inter',system-ui,sans-serif;font-size:.74rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ppwc-gold);
  opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s var(--ppwc-ease);
}
.ppwc-fab.has-items .ppwc-fab-count{opacity:1;transform:scale(1)}
@keyframes ppwc-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.ppwc-fab.ppwc-pop{animation:ppwc-pop .42s var(--ppwc-ease)}

/* ---- Backdrop + drawer --------------------------------------------------- */
.ppwc-backdrop{
  position:fixed;inset:0;z-index:1300;background:rgba(10,13,18,.6);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s var(--ppwc-ease);
}
.ppwc-backdrop.is-open{opacity:1;pointer-events:auto}
.ppwc-lock{overflow:hidden}

.ppwc-drawer{
  position:fixed;top:0;right:0;z-index:1400;height:100%;
  width:min(420px,100vw);
  background:var(--ppwc-bg);color:var(--ppwc-ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  border-left:1px solid var(--ppwc-line);
  box-shadow:-18px 0 50px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s var(--ppwc-ease);
}
.ppwc-drawer.is-open{transform:translateX(0)}

.ppwc-head{
  flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;padding:20px 22px 16px;border-bottom:1px solid var(--ppwc-line);
}
.ppwc-kicker{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ppwc-gold)}
.ppwc-title{font-family:'EB Garamond','Inter',serif;font-weight:700;font-size:1.45rem;line-height:1.1;margin:4px 0 0}
.ppwc-x{
  background:none;border:none;color:var(--ppwc-muted);font-size:1.7rem;line-height:1;
  cursor:pointer;padding:0 4px;transition:color .2s}
.ppwc-x:hover{color:var(--ppwc-ink)}

.ppwc-body{flex:1 1 auto;overflow-y:auto;padding:14px 18px 8px;-webkit-overflow-scrolling:touch}
.ppwc-foot{flex:0 0 auto;padding:14px 18px 20px;border-top:1px solid var(--ppwc-line);background:var(--ppwc-bg-2)}

/* ---- Empty state --------------------------------------------------------- */
.ppwc-empty{text-align:center;padding:48px 16px;color:var(--ppwc-muted)}
.ppwc-empty-ic{font-size:2.4rem;opacity:.5;margin-bottom:10px}
.ppwc-empty-t{color:var(--ppwc-ink);font-weight:600;margin-bottom:6px}
.ppwc-empty-s{font-size:.88rem;line-height:1.5}

/* ---- Retailer group ------------------------------------------------------ */
.ppwc-group{
  border:1px solid var(--ppwc-line);border-radius:14px;
  background:var(--ppwc-bg-2);padding:14px 14px 16px;margin-bottom:14px;
}
.ppwc-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.ppwc-group-label{font-family:'EB Garamond','Inter',serif;font-weight:700;font-size:1.05rem}
.ppwc-group-sub{font-size:.74rem;color:var(--ppwc-muted);text-align:right}
.ppwc-iherb .ppwc-group-label{color:var(--ppwc-gold)}
.ppwc-amazon .ppwc-group-label{color:var(--ppwc-amazon)}

.ppwc-list{list-style:none;margin:0;padding:0}
.ppwc-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:10px 0;border-top:1px solid var(--ppwc-line);
}
.ppwc-item:first-child{border-top:none}
.ppwc-item.is-checkout{opacity:.62}
.ppwc-item-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ppwc-item-name{font-size:.9rem;font-weight:600;line-height:1.25}
.ppwc-item-meta{font-size:.74rem;color:var(--ppwc-muted);line-height:1.3}
.ppwc-flag{font-size:.64rem;color:var(--ppwc-gold);letter-spacing:.04em;white-space:nowrap}

.ppwc-rm{
  flex:0 0 auto;background:none;border:1px solid var(--ppwc-line);color:var(--ppwc-muted);
  font:inherit;font-size:.72rem;border-radius:999px;padding:4px 10px;cursor:pointer;
  transition:color .2s,border-color .2s}
.ppwc-rm:hover{color:#ff9a9a;border-color:rgba(255,154,154,.5)}

/* per-item retailer toggle */
.ppwc-switch{display:inline-flex;margin-top:6px;border:1px solid var(--ppwc-line);border-radius:999px;overflow:hidden;width:max-content}
.ppwc-seg{
  background:none;border:none;color:var(--ppwc-muted);font:inherit;font-size:.68rem;
  padding:3px 10px;cursor:pointer;transition:background .2s,color .2s}
.ppwc-seg.is-on{background:var(--ppwc-gold);color:var(--ppwc-navy);font-weight:700}

/* per-retailer checkout button */
.ppwc-checkout{
  display:block;width:100%;margin-top:12px;padding:12px 14px;border:none;border-radius:999px;
  font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;
  transition:transform .15s var(--ppwc-ease),filter .2s}
.ppwc-checkout:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ppwc-iherb-btn{background:var(--ppwc-gold);color:var(--ppwc-navy)}
.ppwc-amazon-btn{background:var(--ppwc-amazon);color:#0f1111}
.ppwc-note{font-size:.72rem;color:var(--ppwc-muted);line-height:1.45;margin-top:8px}

/* ---- Footer -------------------------------------------------------------- */
.ppwc-disc{font-size:.74rem;color:var(--ppwc-muted);line-height:1.5;margin-bottom:10px}
.ppwc-disc a{color:var(--ppwc-gold);text-decoration:underline}
.ppwc-clear{
  background:none;border:1px solid var(--ppwc-line);color:var(--ppwc-muted);
  font:inherit;font-size:.78rem;border-radius:999px;padding:7px 14px;cursor:pointer;transition:color .2s,border-color .2s}
.ppwc-clear:hover{color:var(--ppwc-ink);border-color:var(--ppwc-ink)}

/* ---- Small screens ------------------------------------------------------- */
@media(max-width:480px){
  .ppwc-drawer{width:100vw}
  .ppwc-fab{right:16px;bottom:16px;width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){
  .ppwc-drawer,.ppwc-backdrop,.ppwc-fab,.ppwc-checkout{transition:none}
  .ppwc-fab.ppwc-pop{animation:none}
}