/* ============================================================================
   gtr-cart.css — mini-cart widget: empty state and action icons

   One small sheet rather than duplicated blocks, because `common/cart.twig`
   renders on BOTH headers (desktop dropdown and phone drawer) and these two
   pieces have to look the same in both. Everything else about the widget is
   already owned by the sheet for its own header:
     desktop  gtr-header.css §6   (.gtr-cart …)
     phone    header-mobile.css §9 (.gt-cartwidget …)

   Selectors are anchored on #cart, which exists on both headers and nowhere
   else, so nothing here can leak into the page body. common.js replaces
   `#cart > ul` wholesale after every cart change, so all of this has to be
   pure CSS over the template's markup — which it is.

   Sections: 1 tokens · 2 empty state · 3 action icons
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Local copy: --gt-* is defined on .mobile-layout and --gtr-* on .gtr-header,
   and this file has to work inside both. Same measured values as those two. */
#cart {
	--gtc-brand: #e85224;         /* 3.7:1 — large shapes and icons only */
	--gtc-brand-strong: #c73e12;  /* 5.1:1 — interactive text */
	--gtc-ink: #2f2a26;
	--gtc-muted: #6f6862;
}


/* 2. Empty state ----------------------------------------------------------- */
/* The stock template puts one sentence in the corner of an otherwise blank
   panel, which reads as a rendering failure rather than as an answer. A
   centred mark, the message and a line of guidance fill the same space with
   something that looks intentional — and it is the moment the shopper is most
   likely to bounce, so it is worth the pixels.

   The art is inline SVG in the template: no extra request, it scales with the
   panel, and it inherits colour so it can never drift from the brand. */
#cart .cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	padding: 3.2rem 2rem 3.6rem;
	text-align: center;
}

#cart .cart-empty__art {
	display: block;
	width: 9.6rem;
	height: 9.6rem;
	/* The large mark is the only place the lighter brand orange is legible —
	   at this size the 3.7:1 ratio is comfortably above the 3:1 that WCAG
	   1.4.11 asks of non-text content. */
	color: var(--gtc-brand);
	opacity: 0.9;
}

#cart .cart-empty__title {
	margin: 0;
	color: var(--gtc-ink);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
}

#cart .cart-empty__hint {
	margin: 0;
	max-width: 28rem;
	color: var(--gtc-muted);
	font-size: 1.3rem;
	line-height: 1.45;
}

/* Both headers render this widget as a full-height side drawer, so an empty
   cart has a whole panel to sit in — and an illustration pinned to the top of
   an otherwise blank column looks abandoned rather than composed. Centring it
   needs the chain from the drawer body down to the <li> to stretch.

   `li:only-child` is the hook: the template emits exactly one <li> when the
   cart is empty and two when it is not. That is the same structural signal the
   existing action-button rules already rely on (`li:last-child:not(:first-
   child)`), so it stays true as long as the template does.

   Each selector matches the depth of the rule it overrides in header-mobile.css
   / gtr-header.css and wins on load order, which is why this file is linked
   after both. */
.mobile-layout .gt-cartdrawer .gt-drawer__body {
	display: flex;
	flex-direction: column;
}

.mobile-layout .gt-cartwidget #cart {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* The two headers show this list on opposite terms, and the difference is not
   cosmetic:
     phone   — the widget lives inside #gt-cartdrawer, so header-mobile.css §9
               shows it statically and the DRAWER is what opens and closes.
     desktop — the widget is still a Bootstrap dropdown. Bootstrap hides
               .dropdown-menu and reveals it only under `.open`.
   The desktop selector therefore MUST carry `.open`. Declaring `display` on it
   unconditionally pins the cart drawer open forever and makes its close button
   look broken — it still removes `.open`, but nothing reacts. */
.mobile-layout .gt-cartwidget #cart > .dropdown-menu,
.gtr-cart #cart.open > .dropdown-menu {
	display: flex;
	flex-direction: column;
}

#cart > .dropdown-menu > li:only-child {
	flex: 1 1 auto;
	display: flex;
}

#cart > .dropdown-menu > li:only-child > .cart-empty {
	margin: auto;
	width: 100%;
}


/* 3. Basket rows, totals and actions (2026-08-22) --------------------------
   `common/cart.twig` renders on BOTH headers, so the whole widget body is
   owned here — the two header sheets keep only their own panel geometry
   (gtr-header.css §6 desktop, header-mobile.css §9 phone). The former
   duplicated .cart-actions blocks in both of those files are now pointer
   comments.

   Shape (GrabFood basket): edge-to-edge rows that scroll, and a pinned
   footer holding the totals and ONE full-width primary carrying the total.
   Rows are flex, not the old <table>: a fixed table in a 330px drawer
   forced a horizontal scrollbar and left no room for controls.
   Swipe-left-to-remove and the quantity stepper are driven by
   javascript/plaza/gtr-cart/gtr-cart.js. */

#cart {
	--gtc-line: #efe8e2;
	--gtc-surface-soft: #faf7f3;
	--gtc-danger: #c62828;
	--gtc-swipe: 84px;
}

/* The panel becomes a column: list scrolls, footer pins. Desktop needs the
   `.open` guard (Bootstrap dropdown), the phone shows it statically — the
   §2 rules above already declare both; these only add the sizing. */
.mobile-layout .gt-cartwidget #cart > .dropdown-menu,
.gtr-cart #cart.open > .dropdown-menu {
	min-height: 0;
	overflow: hidden;
}

/* header2.css:192-193 give the stock <li>s a 3rem gutter, negative margins
   and a top hairline — all of it written for the old table markup. Rows are
   edge-to-edge now, so those are zeroed here (equal specificity, later
   file). */
#cart > .dropdown-menu > .gtr-cart__list {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-top: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* The footer is a fixed cost paid out of the product list's height, so it
   stays as small as it can while keeping a 46px primary: tight totals, a
   text-link secondary, minimal padding. It never grows past ~40% of a
   short drawer. */
#cart > .dropdown-menu > .gtr-cart__foot {
	flex: 0 0 auto;
	max-height: 42%;
	margin: 0;
	padding: 1.1rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--gtc-line);
	background: #fff;
	box-shadow: 0 -6px 18px rgba(47, 42, 38, .07);
	overflow-y: auto;
}

/* Rows ------------------------------------------------------------------- */
#cart .gtr-cartrow {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--gtc-line);
	background: var(--gtc-danger); /* the swipe track behind the surface */
}

#cart .gtr-cartrow:last-child { border-bottom: 0; }

/* Row height is the budget that decides how many products are visible
   before the shopper has to scroll. Target: FIVE on a ~640px phone, so a
   row gets ~72px — a 48px thumb, a single ellipsised name line, and the
   price/stepper line. Everything below is sized to that budget. */
#cart .gtr-cartrow__surface {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 1.4rem;
	background: #fff;
	touch-action: pan-y; /* list still scrolls; JS claims horizontal drags */
	transition: transform 220ms cubic-bezier(.22, .61, .36, 1);
}

#cart .gtr-cartrow.is-dragging .gtr-cartrow__surface { transition: none; }

/* ONLY an explicit swipe (or keyboard focus landing on the delete button
   itself) opens the panel. This was `:focus-within` on the row, which
   meant tapping + or − focused a button inside the row and slid Remove
   into view — adding a product must never surface a destructive control.
   `:has()` is progressive enhancement; the delete button is tabindex="-1"
   on touch anyway, so nothing is lost where it is unsupported. */
#cart .gtr-cartrow.is-swiped .gtr-cartrow__surface,
#cart .gtr-cartrow:has(.gtr-cartrow__delete:focus-visible) .gtr-cartrow__surface {
	transform: translateX(calc(var(--gtc-swipe) * -1));
}

/* Removal: collapse the row so the list closes the gap before the AJAX
   reload paints the new one. */
#cart .gtr-cartrow.is-removing {
	max-height: 0;
	border-bottom-width: 0;
	opacity: 0;
	transition: max-height 260ms ease, opacity 200ms ease, border-width 260ms ease;
}

#cart .gtr-cartrow.is-removing .gtr-cartrow__surface {
	transform: translateX(-100%);
}

#cart .gtr-cartrow.is-busy { opacity: .55; pointer-events: none; }

#cart .gtr-cartrow__media {
	flex: 0 0 auto;
	display: block;
	overflow: hidden;
	width: 6rem;
	height: 6rem;
	border: 1px solid var(--gtc-line);
	border-radius: 12px;
	background: var(--gtc-surface-soft);
}

#cart .gtr-cartrow__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#cart .gtr-cartrow__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* One line, ellipsised: two-line names made rows uneven and cost a whole
   product's worth of height down the list. */
#cart .gtr-cartrow__name {
	display: block;
	overflow: hidden;
	color: var(--gtc-ink);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.gtr-cartrow__name:hover,
a.gtr-cartrow__name:focus { color: var(--gtc-brand-strong); }

#cart .gtr-cartrow__meta {
	display: block;
	overflow: hidden;
	color: var(--gtc-muted);
	font-size: 1.1rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#cart .gtr-cartrow__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .3rem;
}

#cart .gtr-cartrow__price {
	color: var(--gtc-brand-strong);
	font-size: 1.5rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Quantity stepper — edits in place through cart.update(). */
#cart .gtr-qtystep {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	overflow: hidden;
	border: 1px solid var(--gtc-line);
	border-radius: 999px;
	background: #fff;
}

#cart .gtr-qtystep__btn {
	position: relative;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gtc-ink);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

/* The stepper is drawn at 26px so five products fit without scrolling, but
   a 26px tap target fails WCAG 2.5.8. This invisible overlay restores a
   44px one. The two buttons sit 48px apart centre to centre, so their
   overlays (22px each side) stop just short of colliding — never widen
   this past 48px or the wrong button will fire. */
#cart .gtr-qtystep__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

#cart .gtr-qtystep__btn:hover,
#cart .gtr-qtystep__btn:focus {
	background: #fdeee6;
	color: var(--gtc-brand-strong);
}

#cart .gtr-qtystep__val {
	min-width: 2.2rem;
	color: var(--gtc-ink);
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
}

/* Remove: a quiet close control for pointers, the swipe panel for touch.
   Exactly one of the two is available per input type, so a row never
   carries two competing delete affordances. */
#cart .gtr-cartrow__x {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: -.2rem -.4rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #a89f98;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
}

#cart .gtr-cartrow__x svg { width: 1.6rem; height: 1.6rem; }

#cart .gtr-cartrow__x:hover,
#cart .gtr-cartrow__x:focus {
	background: #fdeee6;
	color: var(--gtc-brand-strong);
}

#cart .gtr-cartrow__delete {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: var(--gtc-swipe);
	padding: 0;
	border: 0;
	background: var(--gtc-danger);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

#cart .gtr-cartrow__delete svg { width: 1.9rem; height: 1.9rem; }

@media (hover: hover) {
	#cart .gtr-cartrow__delete { display: none; }
}

@media (hover: none) {
	#cart .gtr-cartrow__x { display: none; }
}

/* Totals ----------------------------------------------------------------- */
#cart .gtr-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
	padding: .25rem 0;
	color: var(--gtc-muted);
	font-size: 1.35rem;
	line-height: 1.4;
}

#cart .gtr-cart__total--grand {
	margin-top: .5rem;
	padding-top: .7rem;
	border-top: 1px solid var(--gtc-line);
	color: var(--gtc-ink);
	font-size: 1.75rem;
	font-weight: 700;
}

#cart .gtr-cart__total--grand span:last-child { color: var(--gtc-brand-strong); }

/* Actions ---------------------------------------------------------------- */
/* One decision per screen: Checkout is the full-width primary and carries
   the total; View Cart is a quiet text link. Explicit colours and states
   throughout — the generated plaza/theme.css styles bare hovers. */
#cart .dropdown-menu > li:last-child:not(:first-child) p.cart-actions {
	display: grid;
	gap: .2rem;
	margin: .8rem 0 0;
	padding: 0;
	border-top: 0;
	text-align: center;
}

#cart .dropdown-menu > li:last-child p > a.cart-action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	width: 100%;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

#cart .dropdown-menu > li:last-child p > a.cart-action > strong { font-weight: 700; }

#cart .dropdown-menu > li:last-child p > a.cart-action--primary {
	min-height: 4.6rem;
	margin: 0;
	padding: .9rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--gtc-brand-strong);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(199, 62, 18, .26);
}

#cart .dropdown-menu > li:last-child p > a.cart-action--primary:hover,
#cart .dropdown-menu > li:last-child p > a.cart-action--primary:focus {
	background: #a53100;
	color: #fff;
}

#cart .dropdown-menu > li:last-child p > a.cart-action--primary:active { background: #8c2a00; }

#cart .cart-action__icon {
	display: block;
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
}

#cart .cart-action__dot { opacity: .65; }
#cart .cart-action__total { font-weight: 600; }

#cart .dropdown-menu > li:last-child p > a.cart-action--secondary {
	min-height: 2.8rem;
	margin: 0;
	padding: .3rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--gtc-muted);
	font-size: 1.15rem;
}

#cart .dropdown-menu > li:last-child p > a.cart-action--secondary > strong { font-weight: 600; }

#cart .dropdown-menu > li:last-child p > a.cart-action--secondary:hover,
#cart .dropdown-menu > li:last-child p > a.cart-action--secondary:focus {
	background: var(--gtc-surface-soft);
	color: var(--gtc-brand-strong);
}

#cart .dropdown-menu > li:last-child p > a.cart-action:focus-visible {
	outline: 2px solid var(--gtc-brand-strong);
	outline-offset: 2px;
}


/* 4. Panel padding ----------------------------------------------------------
   Rows are edge-to-edge (the swipe panel must reach the right edge), so the
   panels drop their own horizontal padding and each section pads itself. */
.mobile-layout .gt-cartdrawer .gt-drawer__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}

.mobile-layout .gt-cartwidget #cart { min-height: 0; }

.gtr-cart #cart.open > .dropdown-menu { padding: 5.6rem 0 0; }

@media (max-width: 359px) {
	#cart .gtr-cartrow__surface { gap: .9rem; padding: 1rem 1.1rem; }
	#cart .gtr-cartrow__media { width: 4.8rem; height: 4.8rem; }
	#cart .gtr-cartrow__name { font-size: 1.2rem; }
	#cart .gtr-qtystep__btn { width: 2.6rem; height: 2.6rem; }
	#cart > .dropdown-menu > .gtr-cart__foot { padding: 1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
	#cart .dropdown-menu > li:last-child p > a.cart-action--primary { min-height: 4.6rem; font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
	#cart .gtr-cartrow__surface,
	#cart .gtr-cartrow.is-removing,
	#cart .dropdown-menu > li:last-child p > a.cart-action,
	#cart .gtr-cartrow__x { transition: none; }
}



/* 5. Sticky page CTAs yield to an open cart (2026-08-22) --------------------
   The product page's .gtr-buybar and the cart/checkout .gtr-checkbar are
   fixed to the same bottom edge as the cart drawer. Both now sit at
   z-index 990 (below the 1000 scrim / 1010 drawer), and while the cart is
   actually open they are removed outright — two competing Checkout CTAs on
   one screen is worse than none, and the drawer already carries its own.
   Phone: body.gt-cart-open is set by the header drawer script.
   Desktop: :has() on the open Bootstrap dropdown (progressive
   enhancement — where :has() is unsupported the z-index alone still keeps
   the drawer on top). */
.mobile-layout.gt-cart-open .gtr-buybar,
.mobile-layout.gt-cart-open .gtr-checkbar {
	display: none;
}

body:has(.gtr-cart #cart.open) .gtr-buybar,
body:has(.gtr-cart #cart.open) .gtr-checkbar {
	display: none;
}