/* J&J Workshop — Cart UI styles */

/* Cart icon in nav */
.cart-icon-btn{
  background:transparent;border:1px solid var(--gold);color:var(--gold);
  padding:0.5rem 0.85rem;cursor:pointer;font-family:'Cinzel',serif;
  font-size:0.7rem;text-transform:uppercase;letter-spacing:0.2em;
  display:inline-flex;align-items:center;gap:0.5rem;position:relative;
  transition:all 0.3s;text-decoration:none;
}
.cart-icon-btn:hover{background:var(--gold);color:var(--ink)}
.cart-icon-btn .cart-icon{font-size:0.95rem}
.cart-badge{
  position:absolute;top:-8px;right:-8px;
  min-width:20px;height:20px;border-radius:50%;
  background:var(--oxblood);color:var(--parchment);
  font-family:'Cinzel',serif;font-size:0.65rem;font-weight:600;
  display:none;place-items:center;padding:0 5px;
  border:1px solid var(--gold);letter-spacing:0;
}

/* Add to cart button on product cards */
.product{position:relative}
.product-buyable{cursor:default}
.add-to-cart{
  display:block;width:calc(100% - 2rem);
  margin:0 1rem 1rem;
  background:var(--ink);color:var(--gold);
  border:1px solid var(--gold);
  padding:0.65rem 1rem;font-family:'Cinzel',serif;font-size:0.7rem;
  text-transform:uppercase;letter-spacing:0.2em;cursor:pointer;
  transition:background 0.3s,color 0.3s,box-shadow 0.3s;
  position:relative;z-index:4;
}
.add-to-cart:hover{
  background:var(--gold);color:var(--ink);
  box-shadow:0 0 12px rgba(201,169,97,0.3);
}
.add-to-cart:active{transform:scale(0.97)}

/* Cart backdrop & drawer */
.cart-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);
  z-index:300;opacity:0;pointer-events:none;
  transition:opacity 0.3s;backdrop-filter:blur(4px);
}
.cart-backdrop.open{opacity:1;pointer-events:auto}

.cart-drawer{
  position:fixed;top:0;right:0;height:100vh;width:100%;max-width:440px;
  background:var(--ink-2);border-left:1px solid var(--gold);
  z-index:301;transform:translateX(100%);transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
  display:flex;flex-direction:column;
  color:var(--parchment);font-family:'Cormorant Garamond',serif;
}
.cart-drawer.open{transform:translateX(0);box-shadow:-20px 0 60px rgba(0,0,0,0.5)}

.cart-head{
  padding:1.5rem;border-bottom:1px solid rgba(201,169,97,0.25);
  display:flex;justify-content:space-between;align-items:center;
}
.cart-head h2{
  font-family:'Cinzel',serif;font-size:1.1rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;margin:0;
}
.cart-close{
  background:transparent;border:none;color:var(--parchment);
  font-size:1.75rem;cursor:pointer;line-height:1;opacity:0.7;
  transition:opacity 0.2s,color 0.2s;
}
.cart-close:hover{opacity:1;color:var(--gold)}

.cart-body{flex:1;overflow-y:auto;padding:1.25rem 1.5rem}

.cart-empty{text-align:center;padding:3rem 1rem;opacity:0.6}
.cart-empty-sigil{font-family:'Cinzel',serif;font-size:2rem;color:var(--gold);margin-bottom:1rem;opacity:0.6}
.cart-empty p{margin:0.25rem 0;font-style:italic}
.cart-empty-sub{font-size:0.9rem;opacity:0.7}

.cart-item{
  display:grid;grid-template-columns:80px 1fr auto;gap:1rem;
  padding:1rem 0;border-bottom:1px solid rgba(201,169,97,0.15);
  position:relative;
}
.cart-item:last-child{border-bottom:none}
.cart-item-img{
  width:80px;height:80px;border:1px solid rgba(201,169,97,0.3);
  background:var(--ink);overflow:hidden;
}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-img-placeholder{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:'Cinzel',serif;color:var(--gold);opacity:0.4;font-size:1.25rem;
}
.cart-item-body{display:flex;flex-direction:column;gap:0.3rem;justify-content:center}
.cart-item-shop{
  font-family:'Cinzel',serif;font-size:0.55rem;text-transform:uppercase;
  letter-spacing:0.2em;color:var(--gold);opacity:0.7;
}
.cart-item-name{
  font-family:'Cormorant Garamond',serif;font-size:1rem;
  font-style:italic;line-height:1.2;
}
.cart-item-price{
  font-family:'Cinzel',serif;font-weight:600;color:var(--gold);
  font-size:0.85rem;letter-spacing:0.05em;
}
.cart-qty{display:inline-flex;align-items:center;gap:0.4rem;margin-top:0.25rem}
.qty-btn{
  background:transparent;border:1px solid rgba(201,169,97,0.4);
  color:var(--parchment);width:26px;height:26px;cursor:pointer;
  font-family:'Cinzel',serif;font-size:0.85rem;display:grid;place-items:center;
  transition:all 0.2s;
}
.qty-btn:hover{border-color:var(--gold);color:var(--gold)}
.qty-num{
  font-family:'Cinzel',serif;font-size:0.85rem;
  min-width:24px;text-align:center;
}
.cart-item-remove{
  position:absolute;top:1rem;right:0;
  background:transparent;border:none;color:var(--parchment);
  font-size:1.4rem;cursor:pointer;line-height:1;opacity:0.4;
  transition:opacity 0.2s,color 0.2s;width:24px;height:24px;
}
.cart-item-remove:hover{opacity:1;color:var(--oxblood)}

.cart-footer{
  padding:1.25rem 1.5rem 1.5rem;
  border-top:1px solid rgba(201,169,97,0.25);
  background:var(--ink-2);
}
.ship-hint{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:0.85rem;
  text-align:center;padding:0.6rem;margin-bottom:1rem;
  background:rgba(201,169,97,0.08);border:1px solid rgba(201,169,97,0.2);
  color:var(--parchment);
}
.ship-hint strong{color:var(--gold);font-style:normal;font-family:'Cinzel',serif;font-size:0.8rem}
.cart-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.4rem 0;font-family:'Cinzel',serif;font-size:0.8rem;
  letter-spacing:0.1em;text-transform:uppercase;
}
.cart-row.tax-note{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:0.85rem;opacity:0.6;text-transform:none;letter-spacing:0;
  justify-content:center;padding:0.25rem 0;
}
.cart-total{
  border-top:1px solid rgba(201,169,97,0.25);
  padding-top:0.85rem;margin-top:0.5rem;
  font-size:0.95rem;color:var(--gold);
}
.cart-checkout{
  width:100%;background:var(--gold);color:var(--ink);border:1px solid var(--gold);
  padding:1rem;margin-top:1rem;cursor:pointer;
  font-family:'Cinzel',serif;font-size:0.8rem;
  text-transform:uppercase;letter-spacing:0.25em;
  transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:0.5rem;
}
.cart-checkout:hover:not(:disabled){background:var(--gold-bright);box-shadow:0 0 20px rgba(201,169,97,0.4)}
.cart-checkout:disabled{opacity:0.6;cursor:wait}
.cart-secure{
  text-align:center;font-size:0.75rem;opacity:0.6;
  margin-top:0.75rem;font-style:italic;
}

.spinner{
  display:inline-block;width:14px;height:14px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.cart-toast{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  background:var(--ink-2);border:1px solid var(--gold);color:var(--parchment);
  padding:0.85rem 1.5rem;font-family:'Cinzel',serif;font-size:0.7rem;
  letter-spacing:0.15em;text-transform:uppercase;
  z-index:500;opacity:0;transition:opacity 0.3s,bottom 0.3s;
  pointer-events:none;
}
.cart-toast.show{opacity:1;bottom:2rem}
.cart-toast.error{border-color:var(--danger,#a63a3a);color:var(--danger,#a63a3a)}

/* Mobile drawer */
@media (max-width:480px){
  .cart-drawer{max-width:100%}
}