/* ===== The Assam Jar — shop / cart layer ===== */

/* ---- header cart button ---- */
.cart-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:transparent;border:1.5px solid var(--line);color:var(--maroon);
  cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,border-color .25s}
.cart-btn:hover{transform:translateY(-2px);background:var(--maroon);color:var(--cream-2);border-color:var(--maroon)}
.cart-btn svg{width:20px;height:20px}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  display:none;place-items:center;border-radius:100px;background:var(--gold);color:#2a1a06;
  font-family:var(--sans);font-size:.68rem;font-weight:700;line-height:1;border:2px solid var(--paper)}
.cart-count.has{display:grid}

/* ---- product buy controls ---- */
.buy{margin-top:.6rem;display:flex;flex-direction:column;gap:.85rem}
.buy-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.price{font-family:var(--serif);color:var(--maroon);font-size:1.05rem;font-weight:600;white-space:nowrap}
.price-val{font-size:1.5rem;font-weight:700}
.sizes{display:inline-flex;gap:.35rem}
.size{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--ink-soft);
  background:var(--cream);border:1.5px solid var(--line);border-radius:100px;padding:.35rem .7rem;
  cursor:pointer;transition:.2s}
.size:hover{border-color:var(--gold);color:var(--maroon)}
.size.active{background:var(--maroon);color:var(--cream-2);border-color:var(--maroon)}
.add-to-cart{width:100%;justify-content:center}

/* ---- cart drawer ---- */
.cart{position:fixed;inset:0;z-index:120;visibility:hidden;pointer-events:none}
.cart.open{visibility:visible;pointer-events:auto}
.cart-overlay{position:absolute;inset:0;background:rgba(61,15,17,.42);opacity:0;transition:opacity .35s}
.cart.open .cart-overlay{opacity:1}
.cart-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);
  background:var(--paper);box-shadow:-30px 0 80px -30px rgba(61,15,17,.6);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cart.open .cart-panel{transform:none}
.cart-top{display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem clamp(1.1rem,3vw,1.6rem);border-bottom:1px solid var(--line)}
.cart-top h3{font-size:1.5rem;color:var(--maroon)}
.cart-top small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.cart-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--ink-soft);
  cursor:pointer;padding:.2rem .4rem;transition:.2s}
.cart-close:hover{color:var(--maroon)}

.cart-body{flex:1;overflow-y:auto;padding:.5rem clamp(1.1rem,3vw,1.6rem)}
.cart-empty{text-align:center;color:var(--ink-soft);padding:3rem 1rem;font-size:.95rem}
.cart-empty span{display:block;font-size:2.4rem;margin-bottom:.6rem}

.cart-item{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"info qty line" "info qty rm";
  align-items:center;gap:.2rem .9rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.ci-info{grid-area:info}
.ci-info b{display:block;font-family:var(--serif);font-size:1.08rem;color:var(--maroon);font-weight:600;line-height:1.2}
.ci-info span{font-size:.8rem;color:var(--ink-soft)}
.ci-qty{grid-area:qty;display:inline-flex;align-items:center;gap:.1rem;
  border:1.5px solid var(--line);border-radius:100px;padding:.15rem}
.ci-qty button{width:26px;height:26px;border:none;background:transparent;border-radius:50%;
  font-size:1.1rem;line-height:1;color:var(--maroon);cursor:pointer;transition:.2s}
.ci-qty button:hover{background:var(--cream)}
.ci-qty span{min-width:22px;text-align:center;font-weight:600;font-size:.9rem}
.ci-line{grid-area:line;font-weight:700;color:var(--maroon);font-size:.95rem;white-space:nowrap;text-align:right}
.ci-rm{grid-area:rm;justify-self:end;background:none;border:none;color:var(--ink-soft);
  font-size:1.1rem;line-height:1;cursor:pointer;opacity:.6;transition:.2s}
.ci-rm:hover{opacity:1;color:var(--chili)}

.cart-foot{border-top:1px solid var(--line);padding:1.2rem clamp(1.1rem,3vw,1.6rem) 1.4rem;
  background:var(--cream-2)}
.cart-sub{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.3rem}
.cart-sub span{color:var(--ink-soft);font-size:.92rem}
.cart-sub b{font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--maroon)}
.cart-note{font-size:.78rem;color:var(--ink-soft);margin-bottom:1rem}
.cart-checkout{width:100%;justify-content:center;gap:.6rem}
.cart-checkout svg{width:18px;height:18px}
.cart-secure{text-align:center;font-size:.74rem;color:var(--ink-soft);margin-top:.8rem;letter-spacing:.02em}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  background:var(--maroon-deep);color:var(--on-dark);font-size:.88rem;font-weight:600;
  padding:.75rem 1.3rem;border-radius:100px;box-shadow:var(--shadow);border:1px solid rgba(216,189,130,.3);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

body.no-scroll{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .cart-overlay,.cart-panel,.toast{transition:none}
}