/* ========================================================================================
 * cart-drawer.css - header cart badge, floating cart button, slide-in cart drawer and the
 * shared coupon field (L2 layer). Loaded sitewide (inc/commerce-assets.php).
 *
 * A port of the DEKA theme's drawer rules (dekadentallasers.com, assets/css/sections.css
 * "FLY-IN CART DRAWER", "Floating cart button" and ".anchor-nav__cart"): same panel width,
 * grid, stepper, foot and button layout, re-skinned with --cd-* tokens. DEKA's serif
 * titles and mono labels map to the kit's one family (Figtree): titles at weight 700, labels
 * in the kit's eyebrow treatment (small, bold, uppercase, tracked). Markup:
 * inc/commerce.php. Behavior: assets/js/cart.js.
 * ======================================================================================== */

/* --- header badge (on the dark header bar) ------------------------------------------------ */
.cart-toggle{
	position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;color:var(--cd-white);border-radius:var(--cd-r-pill);
	margin-inline-start:auto;transition:color .15s ease,background-color .15s ease;
}
.cart-toggle + .site-header__burger{margin-inline-start:0}
.cart-toggle:hover{color:var(--cd-ink-accent-invert)}
.cart-toggle:focus-visible{outline:3px solid var(--cd-focus);outline-offset:2px}
@media (min-width:900px){.cart-toggle{margin-inline-start:0}}
.cart-toggle__count{
	position:absolute;top:1px;right:-2px;min-width:18px;height:18px;padding:0 5px;
	border-radius:var(--cd-r-pill);background:var(--cd-accent);color:var(--cd-accent-ink);
	font:700 .6875rem/1 var(--cd-font);display:flex;align-items:center;justify-content:center;
}
.cart-toggle__count.is-empty{display:none}

/* --- floating cart button ------------------------------------------------------------------
 * Appears once the cart has items; sits below the drawer overlay so it tucks behind. */
.cart-fab{
	position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:1100;
	width:56px;height:56px;padding:0;display:inline-flex;align-items:center;justify-content:center;
	border:0;border-radius:var(--cd-r-pill);cursor:pointer;
	background:var(--cd-ground-deep);color:var(--cd-white);box-shadow:var(--cd-shadow-2);
	opacity:0;visibility:hidden;transform:translateY(14px) scale(.86);
	transition:opacity .28s ease,transform .34s cubic-bezier(.2,.7,.2,1),visibility 0s linear .34s;
}
.cart-fab.is-visible{
	opacity:1;visibility:visible;transform:translateY(0) scale(1);
	transition:opacity .28s ease,transform .34s cubic-bezier(.2,.7,.2,1),visibility 0s;
}
.cart-fab:hover{transform:translateY(-2px) scale(1.04)}
.cart-fab:active{transform:translateY(0) scale(.97)}
.cart-fab:focus-visible{outline:3px solid var(--cd-focus);outline-offset:3px}
.cart-fab__count{
	position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 5px;
	border-radius:var(--cd-r-pill);background:var(--cd-accent);color:var(--cd-accent-ink);
	font:700 .6875rem/1 var(--cd-font);display:flex;align-items:center;justify-content:center;
	border:2px solid var(--cd-ground-deep);
}
.cart-fab.is-pop{animation:cart-fab-pop .55s cubic-bezier(.2,.7,.2,1)}
@keyframes cart-fab-pop{
	0%{transform:translateY(0) scale(1)}
	35%{transform:translateY(-5px) scale(1.14)}
	100%{transform:translateY(0) scale(1)}
}
/* Redundant on the cart and checkout pages themselves. */
body.woocommerce-cart .cart-fab,body.woocommerce-checkout .cart-fab{display:none}

/* --- drawer ------------------------------------------------------------------------------- */
body.cart-drawer-lock{overflow:hidden}

.cart-drawer-overlay{
	position:fixed;inset:0;z-index:1200;
	background:color-mix(in srgb,var(--cd-ground-deeper) 55%,transparent);
	-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
	opacity:0;transition:opacity .32s ease;
}
.cart-drawer-overlay.is-open{opacity:1}

.cart-drawer{
	position:fixed;top:0;right:0;z-index:1201;width:min(420px,92vw);height:100%;
	background:var(--cd-ground);color:var(--cd-ink-strong);
	display:flex;flex-direction:column;
	transform:translateX(100%);visibility:hidden;
	transition:transform .34s cubic-bezier(.4,0,.1,1),visibility 0s linear .34s;
	box-shadow:-30px 0 80px -40px rgb(15 46 42 / .5);
}
.cart-drawer.is-open{transform:translateX(0);visibility:visible;transition:transform .34s cubic-bezier(.4,0,.1,1),visibility 0s}
.cart-drawer.is-busy .cart-drawer__body{pointer-events:none}
.cart-drawer.is-busy .cart-drawer__body > *{opacity:.55}
/* While the drawer opens ahead of fresh fragments, never flash a stale "empty" state. */
.cart-drawer.is-busy .cart-drawer__empty{visibility:hidden}
.cart-drawer.is-busy .cart-drawer__body::before{
	content:"";align-self:center;margin-top:var(--cd-8);width:28px;height:28px;border-radius:50%;
	border:3px solid var(--cd-line);border-top-color:var(--cd-ink-brand);animation:cart-drawer-spin .8s linear infinite;
}
.cart-drawer.is-busy .cart-drawer__body:has(.cart-drawer__items)::before{display:none}
@keyframes cart-drawer-spin{to{transform:rotate(360deg)}}

.cart-drawer__head{
	flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	padding:var(--cd-5) var(--cd-6);border-bottom:1px solid var(--cd-line);
}
.cart-drawer__heading{margin:0;font:700 var(--cd-h4)/1.2 var(--cd-font);color:var(--cd-ink-strong)}
.cart-drawer__close{
	background:none;border:0;cursor:pointer;color:var(--cd-ink-strong);padding:8px;
	display:inline-flex;border-radius:var(--cd-r-pill);transition:background-color .2s ease;
}
.cart-drawer__close:hover{background:var(--cd-ground-tint)}
.cart-drawer__close:focus-visible{outline:3px solid var(--cd-focus);outline-offset:2px}

.cart-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

/* items: the list has no side padding so row dividers run the full panel width */
.cart-drawer__items{list-style:none;margin:0;padding:0;flex:1 1 auto;overflow-y:auto;min-height:0}
.cart-drawer__item{
	display:grid;grid-template-columns:58px minmax(0,1fr) auto;
	grid-template-areas:"media title remove" "media qty line";
	column-gap:14px;row-gap:12px;align-items:center;
	margin:0;padding:var(--cd-5) var(--cd-6);border-bottom:1px solid var(--cd-line);
}
.cart-drawer__media{grid-area:media;align-self:start}
.cart-drawer__media img{
	width:58px;height:58px;object-fit:cover;display:block;
	background:var(--cd-ground-tint);border:1px solid var(--cd-line);border-radius:var(--cd-r-sm);
}
.cart-drawer__title{grid-area:title;display:flex;flex-direction:column;gap:4px;min-width:0}
.cart-drawer__title a,.cart-drawer__title > span:first-child{
	font:700 var(--cd-small)/1.35 var(--cd-font);color:var(--cd-ink-strong);text-decoration:none;
}
.cart-drawer__title a:hover{color:var(--cd-ink-brand)}
.cart-drawer__unit{font-size:.75rem;color:var(--cd-ink-muted);font-variant-numeric:tabular-nums}
.cart-drawer__remove{
	grid-area:remove;justify-self:end;align-self:start;
	width:24px;height:24px;border-radius:var(--cd-r-pill);border:1px solid var(--cd-line);
	display:inline-flex;align-items:center;justify-content:center;
	font-size:16px;line-height:1;color:var(--cd-ink-muted);text-decoration:none;
	background:var(--cd-white);transition:border-color .2s ease,color .2s ease;
}
.cart-drawer__remove:hover{border-color:var(--cd-ink-brand);color:var(--cd-ink-brand)}

.cart-drawer__qty{
	grid-area:qty;display:inline-flex;align-items:center;width:fit-content;
	border:1px solid var(--cd-line);border-radius:var(--cd-r-pill);background:var(--cd-white);overflow:hidden;
}
.cart-drawer__step{
	width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--cd-ink-strong);
	font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
	transition:background-color .15s ease;
}
.cart-drawer__step:hover{background:var(--cd-ground-tint)}
.cart-drawer__step:focus-visible{outline:3px solid var(--cd-focus);outline-offset:-3px}
.cart-drawer__n{min-width:26px;text-align:center;font:700 var(--cd-small)/1 var(--cd-font);font-variant-numeric:tabular-nums}
.cart-drawer__line{grid-area:line;justify-self:end;font:700 var(--cd-small)/1 var(--cd-font);color:var(--cd-ink-strong);font-variant-numeric:tabular-nums}

/* --- upsell offers (inc/commerce.php tmj_cart_upsell_offers()) ---------------------------
 * The FunnelKit side-cart pattern the owner asked for: on phones a list under the cart
 * lines; from 900px a column attached to the drawer's left edge. The drawer is
 * position:fixed and .cart-drawer__body is not positioned, so the absolutely positioned
 * column takes the drawer as its box, sits outside it, and slides and hides with it
 * (it inherits the drawer's transform and visibility). */
/* Phones: the offers follow the lines directly; the lines give up the leftover space so the
   gap sits below the offers, not between them and the lines. */
.cart-drawer__items:has(+ .cart-drawer__offers){flex:0 1 auto}
.cart-drawer__offers{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--cd-4) var(--cd-6);border-top:1px solid var(--cd-line);background:var(--cd-ground-tint)}
.cart-drawer__offers-title{margin:0 0 var(--cd-3);font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cd-ink-muted)}
.cart-drawer__offers-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--cd-3)}
.cart-drawer__offer{
	display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--cd-3);
	padding:var(--cd-3);border:1px solid var(--cd-line);border-radius:var(--cd-r-md);background:var(--cd-ground-raised);
}
.cart-drawer__offer-media img{width:48px;height:48px;object-fit:cover;display:block;border-radius:var(--cd-r-sm);background:var(--cd-ground-tint)}
.cart-drawer__offer-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-drawer__offer-name{font:700 var(--cd-small)/1.3 var(--cd-font);color:var(--cd-ink-strong)}
.cart-drawer__offer-for{font-size:.75rem;line-height:1.3;color:var(--cd-ink-muted)}
.cart-drawer__offer-price{font:700 var(--cd-small)/1.3 var(--cd-font);color:var(--cd-ink-strong);font-variant-numeric:tabular-nums}
@media (min-width:900px){
	.cart-drawer__items:has(+ .cart-drawer__offers){flex:1 1 auto}
	.cart-drawer__offers{
		position:absolute;top:0;right:100%;bottom:0;width:max-content;max-width:180px;
		padding:var(--cd-6) var(--cd-4);border-top:0;border-right:1px solid var(--cd-line);
		box-shadow:-30px 0 80px -40px rgb(15 46 42 / .5);
	}
	.cart-drawer__offers-title{margin-bottom:var(--cd-4);text-align:center}
	/* Stacked cards in the column (image, text, Add), kept small: a narrow card, not the
	   column's full width. */
	.cart-drawer__offer{grid-template-columns:100px;justify-items:center;justify-self:center;width:auto;gap:var(--cd-2);text-align:center}
	.cart-drawer__offer-body{width:100px}
	.cart-drawer__offer-media img{width:100px;height:100px}
	.cart-drawer__offer-add{width:100px;min-height:0;padding:6px var(--cd-3)}
}

.cart-drawer__empty{visibility:hidden}
.cart-drawer.is-busy .cart-drawer__body::before{
	content:"";align-self:center;margin-top:var(--cd-8);width:28px;height:28px;border-radius:50%;
	border:3px solid var(--cd-line);border-top-color:var(--cd-ink-brand);animation:cart-drawer-spin .8s linear infinite;
}
.cart-drawer.is-busy .cart-drawer__body:has(.cart-drawer__items)::before{display:none}
@keyframes cart-drawer-spin{to{transform:rotate(360deg)}}

.cart-drawer__head{
	flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
	padding:var(--cd-5) var(--cd-6);border-bottom:1px solid var(--cd-line);
}
.cart-drawer__heading{margin:0;font:700 var(--cd-h4)/1.2 var(--cd-font);color:var(--cd-ink-strong)}
.cart-drawer__close{
	background:none;border:0;cursor:pointer;color:var(--cd-ink-strong);padding:8px;
	display:inline-flex;border-radius:var(--cd-r-pill);transition:background-color .2s ease;
}
.cart-drawer__close:hover{background:var(--cd-ground-tint)}
.cart-drawer__close:focus-visible{outline:3px solid var(--cd-focus);outline-offset:2px}

.cart-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

/* items: the list has no side padding so row dividers run the full panel width */
.cart-drawer__items{list-style:none;margin:0;padding:0;flex:1 1 auto;overflow-y:auto;min-height:0}
.cart-drawer__item{
	display:grid;grid-template-columns:58px minmax(0,1fr) auto;
	grid-template-areas:"media title remove" "media qty line";
	column-gap:14px;row-gap:12px;align-items:center;
	margin:0;padding:var(--cd-5) var(--cd-6);border-bottom:1px solid var(--cd-line);
}
.cart-drawer__media{grid-area:media;align-self:start}
.cart-drawer__media img{
	width:58px;height:58px;object-fit:cover;display:block;
	background:var(--cd-ground-tint);border:1px solid var(--cd-line);border-radius:var(--cd-r-sm);
}
.cart-drawer__title{grid-area:title;display:flex;flex-direction:column;gap:4px;min-width:0}
.cart-drawer__title a,.cart-drawer__title > span:first-child{
	font:700 var(--cd-small)/1.35 var(--cd-font);color:var(--cd-ink-strong);text-decoration:none;
}
.cart-drawer__title a:hover{color:var(--cd-ink-brand)}
.cart-drawer__unit{font-size:.75rem;color:var(--cd-ink-muted);font-variant-numeric:tabular-nums}
.cart-drawer__remove{
	grid-area:remove;justify-self:end;align-self:start;
	width:24px;height:24px;border-radius:var(--cd-r-pill);border:1px solid var(--cd-line);
	display:inline-flex;align-items:center;justify-content:center;
	font-size:16px;line-height:1;color:var(--cd-ink-muted);text-decoration:none;
	background:var(--cd-white);transition:border-color .2s ease,color .2s ease;
}
.cart-drawer__remove:hover{border-color:var(--cd-ink-brand);color:var(--cd-ink-brand)}

.cart-drawer__qty{
	grid-area:qty;display:inline-flex;align-items:center;width:fit-content;
	border:1px solid var(--cd-line);border-radius:var(--cd-r-pill);background:var(--cd-white);overflow:hidden;
}
.cart-drawer__step{
	width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--cd-ink-strong);
	font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
	transition:background-color .15s ease;
}
.cart-drawer__step:hover{background:var(--cd-ground-tint)}
.cart-drawer__step:focus-visible{outline:3px solid var(--cd-focus);outline-offset:-3px}
.cart-drawer__n{min-width:26px;text-align:center;font:700 var(--cd-small)/1 var(--cd-font);font-variant-numeric:tabular-nums}
.cart-drawer__line{grid-area:line;justify-self:end;font:700 var(--cd-small)/1 var(--cd-font);color:var(--cd-ink-strong);font-variant-numeric:tabular-nums}

/* Upsell offers under a line: a tinted strip, one row per offer (name, price, Add). */
.cart-drawer__upsells{grid-area:upsells;display:grid;gap:var(--cd-2);margin-top:var(--cd-2);padding:var(--cd-3);border-radius:var(--cd-r-sm);background:var(--cd-ground-tint)}
.cart-drawer__upsell{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--cd-3);font-size:var(--cd-small)}
.cart-drawer__upsell-name{font-weight:700;color:var(--cd-ink-strong)}
.cart-drawer__upsell-price{color:var(--cd-ink-muted);font-variant-numeric:tabular-nums}

.cart-drawer__empty{display:flex;flex-direction:column;align-items:center;gap:var(--cd-5);padding:var(--cd-8) var(--cd-6);text-align:center}
.cart-drawer__empty .woocommerce-mini-cart__empty-message{margin:0;font-size:var(--cd-body-lg);color:var(--cd-ink-muted)}

/* flash message (coupon feedback) */
.cart-drawer__flash{
	flex:0 0 auto;margin:0;padding:var(--cd-3) var(--cd-6);
	background:var(--cd-ground-tint);border-bottom:1px solid var(--cd-line);
	font-size:var(--cd-small);color:var(--cd-ink-brand);
}

/* foot: coupon + totals + buttons, pinned to the bottom */
.cart-drawer__foot{
	flex:0 0 auto;border-top:1px solid var(--cd-line);
	padding:var(--cd-5) var(--cd-6) var(--cd-6);display:flex;flex-direction:column;gap:var(--cd-4);
}
.cart-drawer__totals{display:flex;flex-direction:column;gap:11px}
.cart-drawer__row{
	display:flex;align-items:baseline;justify-content:space-between;
	font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cd-ink-muted);
}
.cart-drawer__row span:last-child{font-size:var(--cd-body);letter-spacing:0;text-transform:none;color:var(--cd-ink-strong);font-variant-numeric:tabular-nums}
.cart-drawer__row--discount span:last-child{color:var(--cd-teal-600)}
.cart-drawer__row--total{padding-top:12px;border-top:1px solid var(--cd-line)}
.cart-drawer__row--total span:last-child{font-size:var(--cd-h4);color:var(--cd-ink-brand)}
.cart-drawer__buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--cd-3);margin:0}
.cart-drawer__buttons .btn{padding-inline:var(--cd-4)}

/* --- coupon field: shared by the drawer foot and the checkout order box ------------------- */
.coupon-field__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.coupon-field__input{
	width:100%;min-width:0;min-height:44px;padding:var(--cd-2) var(--cd-4);
	border:1px solid var(--cd-teal-200);border-radius:var(--cd-r-pill);
	background:var(--cd-white);color:var(--cd-ink-strong);font:var(--cd-small)/1.2 var(--cd-font);
}
.coupon-field__input:focus-visible{outline:none;border-color:var(--cd-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--cd-focus) 25%,transparent)}
.coupon-field__msg{margin:8px 0 0;font-size:var(--cd-small);color:var(--cd-ink-brand)}
.coupon-field__msg:empty{display:none}
.coupon-field__applied{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.coupon-field__applied li{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	padding:9px 14px;border-radius:var(--cd-r-sm);background:var(--cd-ground-tint);
	font-size:var(--cd-small);font-weight:700;color:var(--cd-ink-brand);
}
.coupon-field__remove{color:inherit;text-decoration:none;font-size:16px;line-height:1}

@media (prefers-reduced-motion:reduce){
	.cart-drawer,.cart-drawer.is-open,.cart-drawer-overlay{transition:none}
	.cart-fab,.cart-fab.is-visible{transform:none;transition:opacity .2s ease,visibility 0s}
	.cart-fab:hover,.cart-fab:active{transform:none}
	.cart-fab.is-pop{animation:none}
	.cart-drawer.is-busy .cart-drawer__body::before{animation-duration:2.4s}
}

/* A line on its way out (cart.js remove handler) while the drawer refreshes. */
.cart-drawer .mini_cart_item.is-removing{opacity:.45;pointer-events:none;transition:opacity .15s}