/* ==========================================================================
   Slide-in cart drawer
   Ported from the triumph-vip child theme, restyled to inherit each store's
   brand colour via --color-main instead of the Triumph palette.

   Deliberately structural: no font-family, no heading styles, no overrides of
   the theme's type scale. The few font-size declarations here are the internal
   scale of a self-contained component and match the existing mini-cart values
   already in master.css.

   z-index: the sticky .site-header sits at 99, so the scrim clears it at
   100000 and the panel at 100001.
   ========================================================================== */

/* This theme has no global border-box reset — it sets box-sizing rule by rule.
   Scoping it to the drawer keeps width:100% honest: without it the footer buttons
   add their own 20px padding and 2px border on top of the full width and hang 44px
   past the right edge of the panel. */
.cs4-drawer,
.cs4-drawer *,
.cs4-drawer *::before,
.cs4-drawer *::after {box-sizing: border-box;}

/* Scrim ------------------------------------------------------------------ */
.cs4-scrim {position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;}
.cs4-scrim.is-open {opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s;}

/* Panel ------------------------------------------------------------------ */
/* display:none cannot be transitioned, so closed state is transform + visibility.
   Hiding visibility on a delay keeps the panel rendered through the slide-out. */
.cs4-drawer {position: fixed; top: 0; right: 0; bottom: 0; z-index: 100001; display: flex; flex-direction: column; width: min(420px, 92%); background: #fff; box-shadow: -2px 0 20px rgba(0,0,0,0.15); transform: translateX(100%); visibility: hidden; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s; will-change: transform;}
.cs4-drawer.is-open {transform: translateX(0); visibility: visible; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s;}

.cs4-drawer__head {display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 20px; border-bottom: 1px solid #e4e4e4;}
.cs4-drawer__title {font-size: 1.6rem; font-weight: 600; color: var(--color-main);}
.cs4-drawer__close {padding: 0 5px; border: 0; background: none; font-size: 2.4rem; line-height: 1; color: var(--color-body); cursor: pointer;}
.cs4-drawer__close:hover {opacity: .6;}

.cs4-drawer__body {flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: opacity .15s ease;}
.cs4-drawer.is-busy .cs4-drawer__body {opacity: .5; pointer-events: none;}

/* Items ------------------------------------------------------------------ */
.cs4-drawer__items {margin: 0; padding: 0; list-style: none;}
.cs4-drawer__item {display: flex; gap: 15px; padding: 20px; border-bottom: 1px dashed #ddd;}
.cs4-drawer__thumb {flex: 0 0 70px; width: 70px;}
.cs4-drawer__thumb img {display: block; width: 100%; height: auto;}
.cs4-drawer__meta {flex: 1 1 auto; min-width: 0;}
.cs4-drawer__name {display: block; font-size: 1.3rem;}
.cs4-drawer__name a {color: var(--color-body); text-decoration: none;}
.cs4-drawer__name a:hover {color: var(--color-main);}
.cs4-drawer__variation {margin-top: 3px; font-size: 1.2rem; opacity: .7;}
.cs4-drawer__variation span {display: block;}
.cs4-drawer__minnote {display: block; margin-top: 5px; font-size: 1.1rem; opacity: .7;}

.cs4-drawer__line {display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;}
.cs4-drawer__price {margin-left: auto; font-size: 1.3rem; font-weight: 600;}
.cs4-drawer__remove {flex: 0 0 100%; font-size: 1.1rem; color: var(--color-body); text-decoration: underline; opacity: .6;}
.cs4-drawer__remove:hover {opacity: 1;}
.cs4-drawer__qtyfixed {font-size: 1.2rem; opacity: .7;}

/* Quantity stepper ------------------------------------------------------- */
.cs4-qty {display: flex; align-items: center; border: 1px solid #ddd;}
.cs4-qty__btn {width: 28px; height: 28px; padding: 0; border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--color-body); cursor: pointer;}
.cs4-qty__btn:hover:not([disabled]) {background: #f4f4f4;}
.cs4-qty__btn[disabled] {opacity: .3; cursor: default;}
.cs4-qty__val {min-width: 30px; text-align: center; font-size: 1.3rem;}

/* Footer ----------------------------------------------------------------- */
.cs4-drawer__foot {flex: 0 0 auto; padding: 20px; border-top: 1px solid #e4e4e4; background: #fff;}
.cs4-drawer__row {display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; font-size: 1.4rem; font-weight: 600;}
.cs4-drawer__row .amount {font-weight: 600;}
.cs4-drawer__note {margin: 12px 0 0; font-size: 1.1rem; text-align: center; opacity: .6;}

.cs4-drawer__btn {display: block; width: 100%; margin-bottom: 10px; padding: 12px 20px; border: 2px solid var(--color-main); text-align: center; text-decoration: none; font-size: 1.3rem;}
.cs4-drawer__btn--primary {background: var(--color-main); color: #fff;}
.cs4-drawer__btn--primary:hover {opacity: .85; color: #fff;}
.cs4-drawer__btn--outline {background: none; color: var(--color-main);}
.cs4-drawer__btn--outline:hover {background: var(--color-main); color: #fff;}

/* Empty state ------------------------------------------------------------ */
.cs4-drawer__empty {padding: 40px 20px; text-align: center;}
.cs4-drawer__empty-title {margin: 0 0 20px; font-size: 1.4rem;}

/* The drawer replaces the hover dropdown entirely where it is active, so make
   sure a stale cached page can never show both. */
.cs4-has-drawer .header-cart-dropdown {display: none !important;}

/* Stop the page behind the panel scrolling on touch. */
body.cs4-drawer-open {overflow: hidden;}

@media (prefers-reduced-motion: reduce) {
    .cs4-scrim,
    .cs4-drawer {transition: none;}
}