/* FashionHub · Add-to-bag, bag drawer and cart page (2026-09 upgrade) */
.storefront{--fh-green:#126b61;--fh-green-dark:#0c5048;--fh-ink:#163e35;--fh-gold:#f3d79e;--fh-line:#dce7df;--fh-soft:#edf3ef;--fh-warn:#b4531a;--fh-danger:#b3261e}

/* ---------- Shared bits ---------- */
.storefront .link-button{background:none!important;border:0!important;color:var(--fh-ink)!important;padding:6px 0!important;min-height:auto!important;margin:0!important;font-size:.875rem;font-weight:600;display:inline-flex;gap:6px;align-items:center;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9fbfb3}
.storefront .link-button:hover{color:var(--fh-green)!important;text-decoration-color:currentColor}
.storefront .link-button.danger:hover{color:var(--fh-danger)!important}
.storefront .is-loading{position:relative;color:transparent!important;pointer-events:none}
.storefront .is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:fh-spin .7s linear infinite}
.storefront .secondary.is-loading::after,.storefront .quick.is-loading::after{border-color:var(--fh-green);border-right-color:transparent}
@keyframes fh-spin{to{transform:rotate(360deg)}}

/* Header bag badge */
.storefront .bag-link{position:relative}
.storefront .cart-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--fh-green);color:#fff;font-size:.75rem;font-weight:700;line-height:1}
.storefront .cart-count.bump{animation:fh-bump .45s ease}
@keyframes fh-bump{30%{transform:scale(1.35)}60%{transform:scale(.9)}}

/* Toast */
.storefront .toast:empty{display:none!important}
.storefront .toast{display:flex;align-items:center;gap:10px;border-radius:12px;font-weight:500;animation:fh-rise .25s ease}
.storefront .toast[data-type=error]{background:#7a1f1a}
.storefront .toast[data-type=ok]{background:var(--fh-ink)}
@keyframes fh-rise{from{transform:translateY(12px);opacity:0}}

/* ---------- Quantity stepper ---------- */
.qty-stepper{display:inline-flex;align-items:stretch;border:1.5px solid var(--fh-line);border-radius:12px;background:#fff;overflow:hidden;height:52px}
.storefront .qty-stepper button{all:unset;box-sizing:border-box;width:44px;display:grid;place-items:center;font-size:1.25rem;color:var(--fh-ink)!important;background:transparent!important;border:0!important;min-height:0!important;margin:0!important;border-radius:0!important;cursor:pointer;transition:background .15s}
.storefront .qty-stepper button:hover:not(:disabled){background:var(--fh-soft)!important}
.qty-stepper button:disabled{opacity:.35;cursor:not-allowed}
.qty-stepper button:focus-visible{outline:2px solid var(--fh-green);outline-offset:-2px}
.qty-stepper input{width:46px;border:0!important;text-align:center;font-weight:700;font-size:1rem;padding:0!important;margin:0!important;background:transparent;min-height:0!important;-moz-appearance:textfield;box-shadow:none!important}
.qty-stepper input::-webkit-inner-spin-button,.qty-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper .qty-val{min-width:32px;display:grid;place-items:center;font-weight:700}
.qty-stepper.sm{height:38px;border-radius:10px}
.storefront .qty-stepper.sm button{width:34px;font-size:1.05rem}
.qty-stepper.sm input{width:36px;font-size:.9375rem}

/* ---------- Product page: colour & size picker ---------- */
.buy-box{display:grid;gap:16px;margin-top:6px}
.picker{display:grid;gap:18px}
.picker-row{display:grid;gap:10px}
.picker-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9375rem;color:#4a5a55}
.picker-head strong{color:var(--fh-ink)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.storefront .swatch{all:unset;box-sizing:border-box;width:40px;height:40px;border-radius:50%;background:var(--sw);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--fh-line);cursor:pointer;position:relative;transition:box-shadow .15s,transform .15s}
.storefront .swatch:hover{transform:scale(1.06)}
.storefront .swatch.active{box-shadow:0 0 0 2px var(--fh-ink)}
.storefront .swatch:focus-visible{box-shadow:0 0 0 2px var(--fh-green),0 0 0 5px #126b6133}
.storefront .swatch.soldout::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%)}
.size-grid{display:flex;flex-wrap:wrap;gap:8px}
.storefront .size-chip{all:unset;box-sizing:border-box;min-width:56px;height:46px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--fh-line);border-radius:10px;background:#fff;font-weight:600;font-size:.9375rem;color:var(--fh-ink);cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.storefront .size-chip:hover:not(:disabled){border-color:var(--fh-ink)}
.storefront .size-chip.active{background:var(--fh-ink);border-color:var(--fh-ink);color:#fff}
.storefront .size-chip:focus-visible{outline:2px solid var(--fh-green);outline-offset:2px}
.storefront .size-chip.soldout{color:#a9b3b0;background:#f6f8f7;cursor:not-allowed;text-decoration:line-through}
.size-chip .low-dot{width:6px;height:6px;border-radius:50%;background:var(--fh-warn);position:absolute;top:6px;right:6px}
.size-chip.active .low-dot{background:var(--fh-gold)}
.picker-row.need .size-chip:not(.soldout){border-color:var(--fh-danger)}
.picker-row.need .picker-head{color:var(--fh-danger)}
.picker-row.shake .size-grid{animation:fh-shake .4s}
@keyframes fh-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.stock-note{margin:0;font-size:.875rem;font-weight:600;min-height:1.2em}
.stock-note.ok{color:var(--fh-green)}
.stock-note.low{color:var(--fh-warn)}
.stock-note.ok::before{content:"● ";font-size:.7em;vertical-align:middle}

.buy-actions{display:flex;gap:12px;align-items:stretch}
.storefront .add-btn{flex:1;height:52px;min-height:52px!important;margin:0!important;border-radius:12px!important;font-size:1rem!important;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--fh-green)!important;border:0!important;color:#fff!important;transition:background .2s,transform .1s}
.storefront .add-btn:hover:not(:disabled){background:var(--fh-green-dark)!important}
.storefront .add-btn:active{transform:scale(.98)}
.storefront .add-btn.added{background:var(--fh-ink)!important}
.storefront .add-btn.added i::before{content:"\F26E"}
.storefront .add-btn:disabled{background:#9db3ac!important;cursor:not-allowed}
.storefront .buy-now{width:100%;height:50px;min-height:50px!important;margin:0!important;border-radius:12px!important;font-weight:700;background:#fff!important;border:1.5px solid var(--fh-ink)!important;color:var(--fh-ink)!important;gap:8px}
.storefront .buy-now:hover:not(:disabled){background:var(--fh-ink)!important;color:#fff!important}

/* ---------- Bag drawer ---------- */
.bag-drawer{position:fixed;inset:0;z-index:1200}
.bag-drawer[hidden]{display:none}
.bag-backdrop{position:absolute;inset:0;background:#0b1f1a80;opacity:0;transition:opacity .3s}
.bag-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 60px #0003}
.bag-drawer.open .bag-backdrop{opacity:1}
.bag-drawer.open .bag-panel{transform:none}
.bag-drawer.busy .bag-items{opacity:.55;pointer-events:none}
body.bag-open{overflow:hidden}
.bag-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--fh-line)}
.bag-head h2{margin:0;font-size:1.15rem;display:flex;align-items:center;gap:8px}
.bag-count{background:var(--fh-soft);color:var(--fh-ink);border-radius:999px;padding:2px 9px;font-size:.8125rem}
.storefront .bag-close{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:1.1rem}
.storefront .bag-close:hover{background:var(--fh-soft)}
.bag-added{display:flex;align-items:center;gap:8px;margin:14px 20px 0;padding:10px 14px;border-radius:10px;background:#e3f4ec;color:#0f5a3d;font-weight:600;font-size:.9rem;animation:fh-rise .3s ease}
.bag-ship,.ship-progress{margin:14px 20px 0;padding:12px 14px;border-radius:12px;background:#fff8e8;border:1px solid #f3e2b8;font-size:.875rem}
.bag-ship p,.ship-progress p{margin:0 0 8px}
.bag-ship .bar,.ship-progress .bar{height:6px;border-radius:99px;background:#f0e3c2;overflow:hidden}
.bag-ship .bar span,.ship-progress .bar span{display:block;height:100%;background:linear-gradient(90deg,#e0a93b,var(--fh-green));border-radius:inherit;transition:width .5s ease}
.bag-ship.done,.ship-progress.done{background:#e8f5ee;border-color:#c5e5d3}
.bag-ship[hidden]{display:none}
.bag-items{flex:1;overflow:auto;padding:6px 20px;transition:opacity .2s}
.bag-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;padding:16px 0;border-bottom:1px solid #edf1ef;align-items:start}
.bag-item img{width:72px;height:92px;object-fit:cover;border-radius:10px;background:var(--fh-soft)}
.bag-item-info{min-width:0;display:grid;gap:4px}
.bag-item-name{font-weight:600;color:var(--fh-ink);text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bag-item-info p{margin:0;font-size:.8125rem}
.bag-item-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.storefront .bag-remove{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#7b8b86;font-size:1.2rem}
.storefront .bag-remove:hover{background:#fbeaea;color:var(--fh-danger)}
.bag-empty{text-align:center;padding:60px 10px;display:grid;justify-items:center;gap:10px}
.bag-empty i{font-size:2.6rem;color:#9fbfb3}
.bag-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--fh-line);display:grid;gap:8px;background:#fbfdfc}
.bag-foot[hidden]{display:none}
.bag-sub{display:flex;justify-content:space-between;font-size:1.05rem}
.storefront .bag-checkout{width:100%;margin:6px 0 0!important;height:50px;background:var(--fh-green)!important;border-color:var(--fh-green)!important;color:#fff!important;font-weight:700}
.storefront .bag-checkout:hover{background:var(--fh-green-dark)!important}
.bag-view{text-align:center;font-weight:600;color:var(--fh-ink);padding:6px}

/* ---------- Quick add modal ---------- */
.storefront .quick i{margin-right:4px}
.quick-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.quick-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:var(--fh-soft)}
.quick-details h2{margin:4px 0 8px;font-size:1.5rem}
.quick-details .price{font-size:1.3rem;font-weight:700;margin:0 0 8px}
.quick-details .price del{font-size:.95rem;font-weight:400;color:#7b8b86;margin-left:6px}
.quick-more{display:inline-flex;gap:6px;margin-top:14px;font-weight:600;color:var(--fh-ink)}
@media(max-width:640px){.quick-grid{grid-template-columns:1fr;gap:16px}.quick-grid img{max-height:300px;aspect-ratio:auto}}

/* ---------- Cart page ---------- */
.checkout-steps{display:flex;align-items:center;gap:10px;justify-content:center;margin:26px 0 6px;font-size:.875rem;color:#7b8b86;font-weight:600}
.checkout-steps span{display:flex;align-items:center;gap:6px}
.checkout-steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font-size:.75rem}
.checkout-steps .active{color:var(--fh-ink)}
.checkout-steps .active b{background:var(--fh-ink);color:#fff;border-color:var(--fh-ink)}
.checkout-steps i{width:40px;height:1.5px;background:var(--fh-line)}
.cart-title h1{display:flex;align-items:baseline;gap:12px}
.cart-title small{font-size:1rem;font-weight:500;color:#7b8b86}
.cart-list{display:grid;gap:14px;align-content:start}
.cart-list .ship-progress{margin:0}
.cart-item{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:18px;padding:16px;border:1px solid var(--fh-line);border-radius:16px;background:#fff;transition:box-shadow .2s}
.cart-item:hover{box-shadow:0 8px 24px #174d3a0d}
.cart-thumb img{width:110px;height:140px;object-fit:cover;border-radius:12px;background:var(--fh-soft);display:block}
.cart-info{min-width:0;display:grid;gap:4px;align-content:start}
.cart-info .product-brand{margin:0}
.cart-info h3{margin:0;font-size:1.05rem;line-height:1.3}
.cart-info h3 a{color:var(--fh-ink);text-decoration:none}
.cart-meta{margin:2px 0 0;font-size:.875rem;color:#4a5a55;display:flex;align-items:center;gap:6px}
.cart-meta .dot{width:12px;height:12px;border-radius:50%;border:1px solid #0002}
.cart-meta .sep{color:#b5c2bd}
.cart-unit{margin:0;font-size:.8125rem}
.cart-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px}
.cart-controls form{margin:0}
.cart-links{display:flex;gap:16px;flex-wrap:wrap}
.cart-price{text-align:right;font-size:1.1rem;white-space:nowrap}
.continue-link{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--fh-ink);margin-top:6px}
.cart-summary{position:sticky;top:20px;align-self:start}
.cart-summary .panel{display:grid;gap:14px}
.cart-summary .totals h2{font-size:1.15rem;margin-top:0}
.cart-summary .totals p{display:flex;justify-content:space-between;margin:8px 0}
.cart-summary .totals .grand{border-top:1px dashed var(--fh-line);padding-top:12px;font-size:1.15rem;font-weight:700}
.delivery-eta{margin:0;font-size:.875rem;color:#4a5a55;display:flex;gap:8px;align-items:center}
.storefront .checkout-btn{width:100%;height:52px;margin:0!important;background:var(--fh-green)!important;border-color:var(--fh-green)!important;color:#fff!important;font-weight:700;font-size:1rem}
.storefront .checkout-btn:hover{background:var(--fh-green-dark)!important}
.coupon-form{border-top:1px solid var(--fh-line);padding-top:14px;margin:0}
.coupon-form label{font-weight:600;font-size:.9rem;display:flex;gap:6px;margin-bottom:8px}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1;min-width:0;margin:0!important;text-transform:uppercase;letter-spacing:.05em}
.storefront .coupon-row button{margin:0!important;padding:0 18px}
.trust{list-style:none;padding:12px 0 0;margin:0;border-top:1px solid var(--fh-line);display:grid;gap:8px;font-size:.8125rem;color:#4a5a55}
.trust i{color:var(--fh-green);margin-right:6px}
.cart-empty{text-align:center;max-width:460px;margin:40px auto 80px;display:grid;justify-items:center;gap:10px}
.cart-empty-icon{width:96px;height:96px;border-radius:50%;background:var(--fh-soft);display:grid;place-items:center;font-size:2.6rem;color:var(--fh-green);margin-bottom:6px}
.cart-empty h2{margin:0}
.cart-mobile-bar{display:none}

@media(max-width:900px){
 .cart-summary{position:static}
}
@media(max-width:640px){
 .checkout-steps{margin-top:14px}.checkout-steps i{width:18px}
 .cart-item{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:12px}
 .cart-thumb img{width:84px;height:108px}
 .cart-price{grid-column:2;text-align:left;font-size:1rem}
 .cart-controls{gap:8px 14px}
 .cart-mobile-bar{display:flex;position:sticky;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:50;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--fh-line);border-radius:14px;padding:10px 12px 10px 16px;margin:16px 0;box-shadow:0 10px 30px #0000001a}
 .cart-mobile-bar small{display:block;color:#7b8b86;font-size:.75rem}
 .storefront .cart-mobile-bar .button{margin:0!important;background:var(--fh-green)!important;border-color:var(--fh-green)!important;color:#fff!important;min-height:46px}
 .buy-actions{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:40;background:#fff;padding:10px 0;margin:0 -2px}
 .size-chip{min-width:52px}
}
@media(prefers-reduced-motion:reduce){.bag-panel,.bag-backdrop,.cart-count.bump,.picker-row.shake .size-grid{transition:none!important;animation:none!important}}

/* ---------- Colour-wise gallery ---------- */
.gallery-stage{position:relative}
.gallery-main,.quick-grid>img{transition:opacity .25s ease}
.gallery-main.swap,.quick-grid>img.swap{opacity:.35}
.gallery-color{position:absolute;left:14px;top:14px;background:#ffffffe6;color:var(--fh-ink);font-weight:700;font-size:.8125rem;padding:6px 12px;border-radius:999px;box-shadow:0 2px 10px #0001;pointer-events:none}
.gallery-color[hidden]{display:none}
.storefront .thumbnails button{opacity:.65;transition:opacity .15s,border-color .15s}
.storefront .thumbnails button.active,.storefront .thumbnails button:hover{opacity:1;border-color:var(--fh-ink)}
.thumbnails[hidden]{display:none}
/* keep swatch / chip colours stable on hover (theme button hover would repaint them) */
.storefront .swatch,.storefront .swatch:hover{background:var(--sw)!important;border-color:#fff!important}
.storefront .size-chip:hover:not(.active):not(:disabled){background:#fff!important;color:var(--fh-ink)!important}
.storefront .size-chip.active,.storefront .size-chip.active:hover{background:var(--fh-ink)!important;color:#fff!important}