/* Basket chrome. Structure lives here; each direction maps its own palette onto
   the --c-* tokens, so the drawer belongs to whichever site it opens in. */
#cart-root{ --c-bg:#fff; --c-ink:#1b1b1b; --c-mut:#6d6d6d; --c-line:#e5e2db;
            --c-acc:#2f6b4a; --c-r:16px; }

/* `hidden` is display:none from the UA stylesheet, and ANY author rule that sets
   display beats it — .cart-panel{display:flex} left the drawer open over the whole
   page while the attribute said otherwise. Assert it explicitly. */
#cart-root [hidden]{ display:none !important; }

.cart-fab{
  position:fixed; right:18px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:61;
  width:54px; height:54px; border-radius:50%; cursor:pointer; border:1px solid var(--c-line);
  background:var(--c-bg); color:var(--c-ink); display:grid; place-items:center;
  box-shadow:0 6px 16px -6px rgba(22,23,26,.34), 0 2px 5px rgba(22,23,26,.14);
}
.cart-fab svg{width:23px; height:23px}
.cart-n{
  position:absolute; top:-5px; right:-5px; min-width:22px; height:22px; padding:0 6px;
  border-radius:100px; background:var(--c-acc); color:#fff; font-style:normal;
  font-size:12px; font-weight:700; display:grid; place-items:center; font-variant-numeric:tabular-nums;
}
.cart-scrim{position:fixed; inset:0; z-index:70; background:rgba(20,18,16,.36); backdrop-filter:blur(2px)}
.cart-panel{
  position:fixed; z-index:71; top:0; right:0; bottom:0; width:min(100vw, 430px);
  background:var(--c-bg); color:var(--c-ink); display:flex; flex-direction:column;
  border-left:1px solid var(--c-line); box-shadow:-20px 0 50px -30px rgba(22,23,26,.5);
  padding-top:env(safe-area-inset-top,0px);
}
.cart-panel header{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; border-bottom:1px solid var(--c-line); flex:0 0 auto;
}
.cart-panel h2{margin:0; font-size:19px}
.cart-x{background:none; border:none; font-size:19px; cursor:pointer; color:var(--c-mut);
  width:38px; height:38px; border-radius:10px}
.cart-x:hover{background:var(--c-line); color:var(--c-ink)}
.cart-body{flex:1; overflow-y:auto; padding:18px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.cart-empty{color:var(--c-mut); font-size:15px}

.cart-list{list-style:none; margin:0 0 6px; padding:0}
.cart-row{
  display:grid; grid-template-columns:62px minmax(0,1fr) auto; grid-template-rows:auto auto;
  gap:6px 13px; align-items:center; padding:14px 0; border-bottom:1px solid var(--c-line);
  position:relative;
}
/* fitted whole, like the comparator frame — a cropped 62px square of a
   pendant is just a colour swatch */
.cart-row img{grid-row:1/3; width:62px; height:62px; object-fit:contain; border-radius:11px; background:#fff}
.cart-meta{display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:30px}
.cart-name{font-weight:600; font-size:15px}
.cart-opt{font-size:12.5px; color:var(--c-mut)}
.cart-unit{font-size:12.5px; color:var(--c-mut)}
/* Removal sits in the top-right corner, well away from the −/+ pair: the two
   must never be neighbours, because one of them cannot be undone. */
.cart-rm{
  position:absolute; top:8px; right:0; width:30px; height:30px; border-radius:9px;
  background:none; border:none; cursor:pointer; color:var(--c-mut); font-size:13px;
}
.cart-rm:hover{background:var(--c-line); color:#a33}
.cart-qty{display:flex; align-items:center; gap:2px; border:1px solid var(--c-line); border-radius:100px; padding:2px}
.cart-qty button{
  width:32px; height:32px; border-radius:50%; border:none; background:none; cursor:pointer;
  font-size:17px; line-height:1; color:var(--c-ink);
}
.cart-qty button:hover{background:var(--c-line)}
.cart-qty span{min-width:26px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums}
.cart-sum{grid-column:3; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}

.cart-total{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--c-line); font-size:15px}
.cart-total b{font-size:21px; font-variant-numeric:tabular-nums}

.cart-form{display:flex; flex-direction:column; gap:12px; padding-top:18px}
.cart-f{display:flex; flex-direction:column; gap:5px}
.cart-f span{font-size:12.5px; color:var(--c-mut); font-weight:600}
/* 16px, so iOS does not zoom the page when a field takes focus */
.cart-f input,.cart-f textarea{
  font:inherit; font-size:16px; padding:12px 14px; border-radius:11px;
  border:1px solid var(--c-line); background:var(--c-bg); color:var(--c-ink); width:100%;
}
.cart-f textarea{resize:vertical; min-height:56px}
.cart-f input:focus,.cart-f textarea:focus{outline:2px solid var(--c-acc); outline-offset:1px; border-color:transparent}
.cart-warn{margin:0; font-size:13.5px; color:#a33}

.cart-send{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.cart-send button{
  width:100%; padding:15px; border-radius:100px; border:none; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700;
}
.cart-wa{background:#25D366; color:#08210f}
.cart-mail{background:var(--c-ink); color:var(--c-bg)}
.cart-send button:hover{filter:brightness(.95)}
.cart-note{margin:2px 0 0; font-size:12.5px; color:var(--c-mut); line-height:1.5}

@media(max-width:560px){
  .cart-fab{right:14px; bottom:calc(80px + env(safe-area-inset-bottom,0px)); width:50px; height:50px}
  .cart-row{grid-template-columns:52px minmax(0,1fr) auto}
  .cart-row img{width:52px; height:52px}
}
@media (prefers-reduced-motion:reduce){ .cart-panel,.cart-scrim{transition:none!important} }