/* ==================================================================
   嶼心相連 Love∞ | 購物車樣式
   ================================================================== */

.cart-btn{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.55);
  backdrop-filter:blur(10px); border:1px solid rgba(214,112,125,0.25);
  color:var(--c-ink); cursor:pointer; transition:all .2s;}
.cart-btn:hover{background:#fff; border-color:var(--c-coral); color:var(--c-coral);}
.cart-badge{position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--c-coral); color:#fff; font-family:var(--font-en);
  font-size:0.7rem; font-weight:600; display:flex; align-items:center; justify-content:center;
  border:2px solid #fef4f3; transition:transform .25s;}
.cart-badge.zero{display:none;}
.cart-badge.flash{animation:cartBadgeFlash .55s cubic-bezier(.2,.8,.25,1.4);}
@keyframes cartBadgeFlash{0%{transform:scale(1);} 40%{transform:scale(1.6); background:var(--c-rose);} 100%{transform:scale(1);}}

.add-to-cart{position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px;
  border-radius:50%; border:1px solid rgba(214,112,125,0.4); background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px); color:var(--c-coral); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-family:var(--font-en); font-size:1.4rem;
  font-weight:300; line-height:1; transition:all .25s; opacity:0; transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(150,90,110,0.15);}
.g-card:hover .add-to-cart,.add-to-cart.added,.add-to-cart:focus-visible{opacity:1; transform:translateY(0);}
.add-to-cart:hover{background:var(--c-coral); color:#fff; transform:scale(1.05);}
.add-to-cart::before{content:"+";}
.add-to-cart.added{background:var(--c-coral); color:#fff;}
.add-to-cart.added::before{content:"✓"; font-size:1.1rem;}

.lightbox-add{margin-top:1.2rem; padding:0.7em 1.6em;
  background:linear-gradient(135deg,#fff,#fde0e6); border:1px solid #f5d4dc; border-radius:999px;
  color:var(--c-ink); font-family:var(--font-serif); font-size:0.95rem; letter-spacing:0.28em;
  cursor:pointer; display:inline-flex; align-items:center; gap:0.5em; transition:all .2s;}
.lightbox-add:hover{transform:translateY(-2px);}
.lightbox-add.added{background:linear-gradient(135deg,#d6707d,#b65a68); color:#fff; border-color:transparent;}
.lightbox-add::before{content:"+"; font-size:1.1em;}
.lightbox-add.added::before{content:"✓";}

.cart-drawer{position:fixed; inset:0; z-index:200; pointer-events:none; visibility:hidden;}
body.cart-open .cart-drawer{pointer-events:auto; visibility:visible;}
.cart-drawer-overlay{position:absolute; inset:0; background:rgba(74,58,63,0.35); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s;}
body.cart-open .cart-drawer-overlay{opacity:1;}
.cart-drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(420px,100%);
  background:#fef4f3;
  background-image:radial-gradient(ellipse at top right,rgba(251,229,236,0.6),transparent 60%),radial-gradient(ellipse at bottom left,rgba(253,228,214,0.5),transparent 60%);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.25,1); box-shadow:-20px 0 60px -20px rgba(0,0,0,0.2);}
body.cart-open .cart-drawer-panel{transform:translateX(0);}
.cart-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.6rem; border-bottom:1px solid var(--c-line);}
.cart-drawer-head h3{font-family:var(--font-serif); font-size:1.1rem; letter-spacing:0.32em;}
.cart-close{width:36px; height:36px; border-radius:50%; border:1px solid var(--c-line); background:#fff;
  color:var(--c-ink-2); font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s;}
.cart-close:hover{background:var(--c-coral); color:#fff; border-color:var(--c-coral);}
.cart-drawer-body{flex:1; overflow-y:auto; padding:1rem 0;}
.cart-list{list-style:none; margin:0; padding:0;}
.cart-item{display:grid; grid-template-columns:64px 1fr auto; gap:0.9rem; align-items:center;
  padding:0.9rem 1.6rem; border-bottom:1px dashed rgba(74,58,63,0.12);}
.cart-item img{width:64px; height:64px; object-fit:cover; border-radius:10px; border:3px solid #fff; background:#fff; box-shadow:0 4px 10px rgba(150,90,110,0.15);}
.cart-item-info{display:flex; flex-direction:column; gap:0.2em;}
.cart-item-info b{font-family:var(--font-en); font-size:1rem; color:var(--c-ink); font-weight:600;}
.cart-item-info small{font-family:var(--font-serif); font-size:0.75rem; letter-spacing:0.15em; color:var(--c-ink-3);}
.cart-item-price{font-family:var(--font-en); font-size:0.9rem; color:var(--c-rose); margin-top:0.15em; font-weight:500;}
.cart-item-remove{width:28px; height:28px; border-radius:50%; border:1px solid var(--c-line); background:#fff;
  color:var(--c-ink-2); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s;}
.cart-item-remove:hover{background:var(--c-coral); color:#fff; border-color:var(--c-coral);}
.cart-empty{text-align:center; padding:3rem 1.6rem; color:var(--c-ink-2); font-family:var(--font-serif); letter-spacing:0.22em; line-height:2;}
.cart-empty p:first-child{font-size:1.05rem; color:var(--c-ink); margin-bottom:0.5em;}
.cart-empty-sub{font-size:0.88rem; color:var(--c-ink-3); margin-bottom:1.5em !important;}
.cart-drawer-foot{padding:1.2rem 1.6rem 1.6rem; border-top:1px solid var(--c-line); background:rgba(255,255,255,0.6); backdrop-filter:blur(20px);}
.cart-summary{margin-bottom:1rem;}
.cart-row{display:flex; justify-content:space-between; align-items:baseline; padding:0.4rem 0; font-family:var(--font-serif); letter-spacing:0.22em; color:var(--c-ink-2);}
.cart-row.total{font-size:1rem; color:var(--c-ink); border-top:1px solid var(--c-line); padding-top:0.7rem; margin-top:0.4rem;}
.cart-row.total b{font-family:var(--font-en); font-size:1.4rem; color:var(--c-rose); font-weight:600;}
.cart-row b{color:var(--c-ink); font-family:var(--font-en);}
.cart-clear{width:100%; margin-top:0.6rem; padding:0.7em; background:transparent; border:1px solid var(--c-line); border-radius:999px; color:var(--c-ink-3); font-family:var(--font-serif); font-size:0.85rem; letter-spacing:0.22em; cursor:pointer;}
.cart-clear:hover{color:var(--c-coral); border-color:var(--c-coral);}

.order-cart-summary{background:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.8); border-radius:18px; padding:1.4rem 1.6rem; margin-bottom:2rem;}
.order-cart-summary h4{font-family:var(--font-serif); font-size:0.95rem; letter-spacing:0.28em; margin-bottom:1rem; color:var(--c-ink); display:flex; justify-content:space-between; align-items:center;}
.order-cart-summary h4 a{font-size:0.78rem; color:var(--c-coral); letter-spacing:0.15em;}
.order-cart-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:0.6rem;}
.order-cart-list li{position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1/1; border:3px solid #fff; box-shadow:0 4px 10px rgba(150,90,110,0.12);}
.order-cart-list img{width:100%; height:100%; object-fit:cover;}
.order-cart-list span{position:absolute; bottom:4px; right:4px; background:rgba(255,255,255,0.9); padding:0.1em 0.4em; border-radius:999px; font-family:var(--font-en); font-size:0.65rem; font-weight:600; color:var(--c-rose);}
.order-cart-empty-msg{text-align:center; color:var(--c-ink-3); letter-spacing:0.18em; font-family:var(--font-serif); padding:1rem 0;}

.order-breakdown{margin:1.5rem 0 1rem; padding:1.2rem 1.4rem; background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.8); border-radius:14px; font-family:var(--font-serif);}
.breakdown-row{display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:baseline; padding:0.5em 0; letter-spacing:0.18em; color:var(--c-ink-2); font-size:0.92rem;}
.breakdown-row .breakdown-calc{text-align:right; font-family:var(--font-en); font-size:0.85rem; color:var(--c-ink-3); letter-spacing:0.05em;}
.breakdown-row .breakdown-calc b{color:var(--c-coral); font-weight:600; margin-right:0.2em;}
.breakdown-row .breakdown-amt{font-family:var(--font-en); font-size:1rem; color:var(--c-ink); font-weight:500;}
.breakdown-row.total{border-top:1px solid var(--c-line); padding-top:0.9em; margin-top:0.4em; color:var(--c-ink);}
.breakdown-row.total .breakdown-amt b{font-size:1.5rem; color:var(--c-rose); font-weight:600;}
@media (max-width:480px){.breakdown-row{grid-template-columns:1fr auto;} .breakdown-row .breakdown-calc{grid-column:1/-1; text-align:right; font-size:0.78rem; margin-top:-0.4em;}}