/**
 * Teacup Nethies Side Cart
 *
 * Hand-written, no build step. Theming is done entirely through the custom
 * properties in :root - override them from the theme stylesheet or the plugin's
 * Advanced setting. There is deliberately no styling admin panel.
 *
 * Scoping: descendant rules are written as `:is(.tcup-sc, .tcup-sc-inline) .x`
 * so the same design applies inside the drawer AND the inline checkout/cart
 * card, which must not inherit the drawer's fixed-position shell. That prefix is
 * also what gives control rules (0,2,0) - enough to outrank the theme's
 * element+attribute selectors such as `input[type=number]` at (0,1,1).
 *
 * Breakpoints match the theme: medium 640px, large 1025px.
 */

:root {
	--tcup-sc-width: 420px;
	--tcup-sc-width-mobile: 100vw;

	--tcup-sc-bg: #ffffff;
	--tcup-sc-fg: var(--tn-fg, #4c4b4b);
	/* Darker than the theme's #817d7d (4.1:1 on white, under the 4.5:1 that
	   small text needs): 5.3:1. Most of the drawer's grey text is 11-13px. */
	--tcup-sc-muted: #6e6a6a;
	--tcup-sc-border: var(--tn-border, #e2e2e1);

	--tcup-sc-accent: var(--tn-primary, #e45e9a);
	/* The stronger pink the theme puts on its primary CTAs, as distinct from the
	   softer brand pink used for accents and links. */
	--tcup-sc-hot: var(--tn-pink-hot, #e91d78);
	--tcup-sc-accent-fg: #ffffff;
	/* Pink for text: the brand pinks are 3.3:1 (#e45e9a) and 4.3:1 (#e91d78) on
	   white, under the 4.5:1 small text needs. 5.0:1, and 4.7:1 on the blush. */
	--tcup-sc-accent-ink: #d1236b;

	--tcup-sc-radius: 4px;
	--tcup-sc-gap: 16px;
	/*
	 * Tawk.to sets its stacking at runtime with no fixed value in its bundle;
	 * 2147483000 sits just under the 32-bit maximum browsers honour. The drawer
	 * also hides the Tawk widget while open (side-cart.js), so correctness does
	 * not depend on winning this comparison.
	 */
	--tcup-sc-z: 2147483000;
	--tcup-sc-shadow: -10px 0 32px -8px rgba(76, 75, 75, 0.26);
	--tcup-sc-overlay: rgba(0, 0, 0, 0.45);

	--tcup-sc-tier-track: var(--tn-border, #e2e2e1);
	--tcup-sc-tier-fill: var(--tn-primary, #e45e9a);
	--tcup-sc-tier-met: var(--tn-blue, #6aa9ba);

	/* Motion. Arrive with a soft landing; leave quickly. */
	--tcup-sc-duration: 250ms;
	--tcup-sc-ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
	--tcup-sc-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--tcup-sc-open: 420ms;
	--tcup-sc-close: 240ms;

	/* Floating basket - values recovered from the previous cart's settings. */
	--tcup-sc-basket-size: 60px;
	--tcup-sc-basket-icon: 27px;
	--tcup-sc-basket-bg: #e62861;
	--tcup-sc-basket-fg: #ffffff;
	--tcup-sc-basket-offset: 10px;
	/*
	 * Where the basket sits when a chat widget is on screen: clear of it, in the
	 * same column. These are the two numbers to nudge if the gap looks wrong on
	 * the live site - both are settable from the plugin's Advanced box, and they
	 * assume Tawk's default footprint (a ~60px bubble inset ~20px).
	 */
	--tcup-sc-basket-chat-bottom: 92px;
	--tcup-sc-basket-chat-inset: 20px;
	--tcup-sc-basket-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
	--tcup-sc-badge-bg: #373737;
	--tcup-sc-badge-fg: #ffffff;
	--tcup-sc-basket-z: 2147482000;

	/*
	 * Brand tokens come FROM the theme, which publishes its Sass palette as
	 * --tn-* custom properties (themes/jcn-framework/.../global/_tokens.scss).
	 * That keeps one source of truth: change $foundation-palette and this
	 * follows. The literals are fallbacks for when this theme is not active -
	 * the plugin has to stand on its own, so it must never look broken without
	 * them.
	 */
	--tcup-sc-shadow-soft: var(--tn-shadow, 0 0 23px 0 rgba(76, 75, 75, 0.08));
	--tcup-sc-shadow-lift: 0 6px 16px -8px rgba(76, 75, 75, 0.28);
	--tcup-sc-radius-card: var(--tn-radius-card, 10px);
	--tcup-sc-radius-panel: var(--tn-radius-panel, 15px);
	--tcup-sc-accent-hover: var(--tn-primary-hover, #dd3580);
	--tcup-sc-accent-active: var(--tn-primary-active, #c01360);
	--tcup-sc-secondary: var(--tn-secondary, #f5c1c0);
	--tcup-sc-swatch-ring: var(--tn-muted, #817d7d);
	--tcup-sc-hover-tint: var(--tn-tint, #f1f1f1);
	--tcup-sc-gift-tint: #fdf2f7;
}

/* ------------------------------------------------------- theme insulation -- */

/*
 * The theme is Foundation-based and styles bare elements: [type=text] gets
 * height:2.4375rem, margin:0 0 1rem, font-size:1rem and an inset box-shadow;
 * `button` gets padding:.75rem 1.5em .9rem, 17px bold lowercase, a 50px radius
 * and a pink background; and button:active/:focus/:hover are painted #c01360.
 * Everything below neutralises that inside the drawer and the inline card.
 */
:is(.tcup-sc, .tcup-sc-inline) :is(input, select, textarea) {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: var(--tcup-sc-radius);
	background-color: var(--tcup-sc-bg);
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.3;
	transition: none;
}

:is(.tcup-sc, .tcup-sc-inline) :is(input, textarea)::placeholder {
	color: var(--tcup-sc-muted);
	font-style: normal;
	font-size: inherit;
	opacity: 1;
}

:is(.tcup-sc, .tcup-sc-inline) :is(input, select, textarea):focus {
	border-color: var(--tcup-sc-accent);
	box-shadow: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

:is(.tcup-sc, .tcup-sc-inline) :where(button) {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tcup-sc-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	line-height: 1.2;
	cursor: pointer;
}

/* The theme's button:active/:focus/:hover pink can never leak in: (0,2,1) here
   outranks its (0,1,1); our own component state rules sit at (0,3,0)+. */
:is(.tcup-sc, .tcup-sc-inline) :is(button):is(:hover, :focus, :active) {
	background-color: transparent;
	color: inherit;
}

:is(.tcup-sc, .tcup-sc-inline) :where(summary) {
	font: inherit;
	text-transform: none;
}

:is(.tcup-sc, .tcup-sc-inline) :where(a) {
	text-decoration: none;
}

:is(.tcup-sc, .tcup-sc-inline) :where(p, h2, h3, h4, dl, dd, ul, li) {
	margin: 0;
	padding: 0;
}

:is(.tcup-sc, .tcup-sc-inline) :where(ul) {
	list-style: none;
}

/* The UA stylesheet's [hidden]{display:none} loses to ANY author rule that sets
   display - including our own. The basket lives outside .tcup-sc, so it needs
   its own entry.

   [data-sc-count] covers every count badge this plugin drives, wherever it is.
   The theme's header count, span.cart_count, is styled display:flex with a pink
   background, so while its count was empty - an empty cart, or the moment
   before the real count arrives - `hidden` did nothing and it showed as an
   empty pink circle. The theme's selectors are deeply nested, hence !important. */
.tcup-sc [hidden],
.tcup-sc-inline [hidden],
.tcup-sc__basket [hidden],
.tcup-sc__basket-count[hidden],
[data-sc-count][hidden] {
	display: none !important;
}

/* One focus treatment for everything interactive. */
:is(.tcup-sc, .tcup-sc-inline) :is(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--tcup-sc-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- shell -- */

.tcup-sc {
	position: fixed;
	inset: 0;
	z-index: var(--tcup-sc-z);
}

.tcup-sc[hidden] {
	display: none !important;
}

.tcup-sc__overlay {
	position: absolute;
	inset: 0;
	background: var(--tcup-sc-overlay);
	opacity: 0;
	/*
	 * The blur is what makes the drawer feel in FRONT of the page rather than on
	 * top of it, but it is also the most expensive thing here: while it is
	 * changing, the compositor re-blurs the whole page every frame, and the panel
	 * slide stutters behind it. So it stays at zero for the length of the slide
	 * and only ramps once the panel has landed - see the is-open rule below.
	 */
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	will-change: opacity;
	transition: opacity var(--tcup-sc-close) var(--tcup-sc-ease-in);
}

.tcup-sc__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: var(--tcup-sc-width-mobile);
	max-width: 100%;
	height: 100dvh;
	background: var(--tcup-sc-bg);
	color: var(--tcup-sc-fg);
	box-shadow: var(--tcup-sc-shadow);
	overflow-x: hidden;
	transform: translateX(100%);
	/*
	 * Promote the panel to its own layer so the slide is a compositor transform
	 * and nothing inside it is re-rasterised per frame. translate3d rather than
	 * translateX for the same reason on older WebKit.
	 */
	transform: translate3d(100%, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
	transition: transform var(--tcup-sc-close) var(--tcup-sc-ease-in);
}

/*
 * The panel takes focus when it opens, so screen readers announce the dialog.
 * It is not a control, so no focus ring around it - the buttons and links in
 * it keep theirs.
 */
.tcup-sc__panel:focus {
	outline: none;
}

/* Brand stripe along the top edge of the panel. */
.tcup-sc__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--tcup-sc-accent), var(--tcup-sc-accent-hover) 55%, var(--tcup-sc-secondary));
	z-index: 2;
}

.tcup-sc.is-open .tcup-sc__overlay {
	opacity: 1;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transition:
		opacity var(--tcup-sc-open) var(--tcup-sc-ease-out),
		-webkit-backdrop-filter 260ms linear var(--tcup-sc-open),
		backdrop-filter 260ms linear var(--tcup-sc-open);
}

.tcup-sc.is-open .tcup-sc__panel {
	transform: translate3d(0, 0, 0);
	transition: transform var(--tcup-sc-open) var(--tcup-sc-ease-out);
}

/*
 * The panel slide IS the arrival animation. An earlier version also faded and
 * lifted each region on a stagger; that meant five more layers animating while
 * the panel was still moving, over a panel full of product images, and the slide
 * visibly stuttered. One moving thing, moving well, beats six.
 */

@media screen and (min-width: 640px) {
	.tcup-sc__panel {
		width: var(--tcup-sc-width);
	}
}

/*
 * Desktop: a floating card rather than a full-height sheet - inset from the
 * top, right and bottom, with rounded corners, so the page still frames it.
 * Closed, it slides past its own inset as well as its width.
 */
@media screen and (min-width: 1025px) {
	.tcup-sc__panel {
		--tcup-sc-inset: 16px;
		top: var(--tcup-sc-inset);
		right: var(--tcup-sc-inset);
		height: calc(100dvh - 2 * var(--tcup-sc-inset));
		border-radius: var(--tcup-sc-radius-panel);
		overflow: hidden;
		transform: translate3d(calc(100% + var(--tcup-sc-inset)), 0, 0);
	}

	.tcup-sc.is-open .tcup-sc__panel {
		transform: translate3d(0, 0, 0);
	}
}

/*
 * One scroller for rewards + items + recommendations; the footer stays pinned so
 * the checkout button is always reachable. The items region must NOT be the flex
 * child here - when it was, a tall rewards bar could compress it to zero.
 */
.tcup-sc__scroll {
	flex: 1 1 auto;
	min-height: 0;
	/*
	 * The rails inside (recommendations, gifts) are grids of fixed-fraction
	 * columns that are deliberately wider than their box - that is what makes
	 * them swipeable. Without this, their overflow escapes and the whole panel
	 * scrolls sideways, dragging the header and items out of view.
	 */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* A thin, quiet scrollbar - no arrows, no track - in place of the browser's. */
	scrollbar-width: thin;
	scrollbar-color: rgba(76, 75, 75, 0.22) transparent;
}

.tcup-sc__scroll::-webkit-scrollbar {
	width: 10px;
}

.tcup-sc__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.tcup-sc__scroll::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	border-radius: 999px;
	background: rgba(76, 75, 75, 0.22);
	background-clip: padding-box;
}

.tcup-sc__scroll::-webkit-scrollbar-thumb:hover {
	background-color: var(--tcup-sc-accent);
}

.tcup-sc__scroll::-webkit-scrollbar-button {
	display: none;
	height: 0;
}

.tcup-sc__region--footer {
	flex: 0 0 auto;
}

.tcup-sc__region--items:not(:empty) {
	min-height: 4rem;
}

.tcup-sc__region--rewards:empty,
.tcup-sc__region--recs:empty,
.tcup-sc__region--footer:empty {
	display: none;
}

/* Inert markup that exists only so LiteSpeed's UCSS keeps these selectors. */
.tcup-sc__ucss-anchor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	pointer-events: none;
}

.tcup-sc__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --------------------------------------------------------------- header -- */

.tcup-sc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tcup-sc-gap);
	padding: 18px var(--tcup-sc-gap) 16px;
	position: relative;
	z-index: 1;
	background: var(--tcup-sc-bg);
	box-shadow: 0 1px 0 var(--tcup-sc-border), 0 10px 18px -16px rgba(76, 75, 75, 0.35);
}

.tcup-sc__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.tcup-sc__title .icon-cart,
.tcup-sc__title .icon-cart:before {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--tcup-sc-accent-ink);
}

/* Live item count beside the title; bumps when it goes up. */
.tcup-sc__title-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--tcup-sc-accent);
	color: var(--tcup-sc-accent-fg);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: -6px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tcup-sc-fg);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--tcup-sc-duration) ease, color var(--tcup-sc-duration) ease, transform var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__close:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__close:focus-visible {
	background: var(--tcup-sc-border);
	color: var(--tcup-sc-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__close:active {
	background: var(--tcup-sc-border);
	color: var(--tcup-sc-fg);
	transform: scale(0.94);
}

.tcup-sc__x {
	display: block;
}

/* ---------------------------------------------------------------- items -- */

.tcup-sc__items {
	margin: 0;
	padding: 4px 0 6px;
	list-style: none;
}

/*
 * Every line is a card, not just the one being edited - one style for all of
 * them, so opening the editor changes what is IN a row, never what a row is.
 * Shadow and radius are the theme's own: theme-shadow() and the 15px it uses on
 * panels, with no border, because that is how cards are drawn everywhere else
 * on this site.
 */
.tcup-sc__item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	margin: 10px var(--tcup-sc-gap);
	padding: 14px;
	border-radius: var(--tcup-sc-radius-panel);
	background: var(--tcup-sc-bg);
	box-shadow: var(--tcup-sc-shadow-soft);
}

.tcup-sc__item.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* A line that was not there a moment ago. */
.tcup-sc__item.is-new {
	animation: tcup-sc-arrive 1100ms ease-out 1;
}

@keyframes tcup-sc-arrive {
	0%   { background-color: #fbeaef; }
	100% { background-color: transparent; }
}

.tcup-sc__item-media {
	width: 64px;
}

.tcup-sc__item-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--tcup-sc-radius-card);
	box-shadow: 0 0 0 1px var(--tcup-sc-border);
}

.tcup-sc__item-body {
	min-width: 0;
}

.tcup-sc__item-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.tcup-sc__item-name {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

.tcup-sc__item-name a {
	color: inherit;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: -6px -8px 0 0;
	border-radius: 50%;
	color: var(--tcup-sc-muted);
	line-height: 1;
	transition: background-color var(--tcup-sc-duration) ease, color var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-remove:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-remove:focus-visible {
	background: var(--tcup-sc-hover-tint);
	color: var(--tcup-sc-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-remove:active,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__coupon-remove:active {
	background: var(--tcup-sc-border);
	color: var(--tcup-sc-fg);
}

/* Variation meta as quiet inline pairs - label, bold value, fleece circle. */
.tcup-sc__item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 14px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	flex-direction: column
}

.tcup-sc__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	font-size: 0.75rem;
	line-height: 1.3;
}

.tcup-sc__meta-swatch {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--tcup-sc-swatch-ring);
}

.tcup-sc__meta-label {
	color: var(--tcup-sc-muted);
}

.tcup-sc__meta-value {
	color: var(--tcup-sc-fg);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tcup-sc__item-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

.tcup-sc__item-price {
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.tcup-sc__item-qty-fixed {
	color: var(--tcup-sc-muted);
	font-size: 0.75rem;
}

.tcup-sc__gift-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	/* The reward blue, deepened: white on #6aa9ba was 2.6:1. 4.8:1. */
	background: #3d7b8c;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: 1px;
}

/* ------------------------------------------------------------ quantity -- */

/* The product page's pill stepper. Every box property is declared here rather
   than inherited from the theme's bare button/input rules. */
.tcup-sc__qty {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 1px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: 999px;
	background: var(--tcup-sc-bg);
	transition: border-color var(--tcup-sc-duration) ease, box-shadow var(--tcup-sc-duration) ease;
}

.tcup-sc__qty:focus-within {
	border-color: var(--tcup-sc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcup-sc-accent) 18%, transparent);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--tcup-sc-muted);
	font-size: 0.9375rem;
	line-height: 1;
	transition: background-color var(--tcup-sc-duration) ease, color var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-btn:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-btn:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-btn:active {
	background: var(--tcup-sc-hover-tint);
	color: var(--tcup-sc-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-btn:disabled {
	opacity: 0.4;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-input {
	width: 36px;
	min-width: 0;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 32px;
	-moz-appearance: textfield;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-input::-webkit-outer-spin-button,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Phones: the theme lifts its own controls to ~43px here; 38px keeps ± at 36px. */
@media screen and (max-width: 639px) {
	.tcup-sc__qty {
		height: 38px;
	}

	:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-btn {
		width: 36px;
		height: 36px;
	}

	:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__qty-input {
		height: 36px;
		line-height: 36px;
	}
}

/* ------------------------------------------------------ variation edit -- */

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	color: var(--tcup-sc-fg);
	font-size: 0.75rem;
}

.tcup-sc__item-edit-text {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * The theme's arrow glyph points down at rest, which is the closed state:
 * "there is more below". Opening flips it to point back up at the row it belongs
 * to - the usual disclosure convention.
 */
.tcup-sc__item-edit-arrow,
.tcup-sc__item-edit-arrow:before {
	display: block;
	margin: 0;
	font-size: 0.4rem;
	line-height: 1;
	color: inherit;
}

.tcup-sc__item-edit-arrow {
	transition: transform var(--tcup-sc-duration) var(--tcup-sc-ease-out);
}

.tcup-sc__item-edit[aria-expanded="true"] .tcup-sc__item-edit-arrow {
	transform: rotate(180deg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-edit:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-edit:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-edit:active {
	color: var(--tcup-sc-accent-ink);
}

/*
 * Row actions are deliberately not accent-coloured. They repeat on every line,
 * so pink here multiplies down the list and competes with both the prices and
 * the Checkout button - which is the one control that should own that colour.
 * Quiet at rest, underlined so they still read as controls, pink on interaction.
 */

/* Part of the row, not a card beside it: transparent, one hairline above, the
   row's own bottom border closes it. Spans the full row width. */
/*
 * While a row is being edited it is lifted into a card, and the editor is a
 * quieter panel nested inside it. An earlier version left the panel unboxed and
 * flush with the row, which read as floating loose under the item; boxing the
 * ROW rather than the panel is what ties the two together.
 */
/* Being edited changes nothing about the card itself. */

.tcup-sc__editor {
	grid-column: 1 / -1;
	display: grid;
	gap: 18px;              /* between attributes: groups read as groups */
	margin-top: 12px;
	padding: 16px 14px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: var(--tcup-sc-radius-card);
	background: color-mix(in srgb, var(--tcup-sc-border) 16%, var(--tcup-sc-bg));
}

/*
 * min-width:0 twice, and both are load-bearing. A grid item defaults to
 * min-width:auto, so a row of 38 swatches makes the field - and the panel -
 * as wide as its contents instead of scrolling inside them. The rail then
 * reports scrollWidth == clientWidth, the arrows decide there is nothing to
 * scroll to and stay hidden, and the swatches past the edge are simply
 * unreachable once the panel clips its overflow.
 */
.tcup-sc__editor-field {
	display: grid;
	min-width: 0;
	gap: 7px;               /* within an attribute: label sits close to its control */
}

.tcup-sc__editor-field > * {
	min-width: 0;
}

/* Label and value as one phrase, left-aligned: "Fabric #1  Breakfast". */
.tcup-sc__editor-head {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 8px;
}

.tcup-sc__editor-label {
	font-size: 0.8125rem;
	color: var(--tcup-sc-muted);
}

.tcup-sc__editor-value {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--tcup-sc-fg);
}

/* Styled select, modelled on the theme's .dropdown-btn: 34px pill, hairline, chevron. */
.tcup-sc__select {
	position: relative;
	display: block;
	max-width: 100%;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__editor-select {
	width: 100%;
	height: 44px;
	padding: 0 36px 0 14px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: 999px;
	background: var(--tcup-sc-bg);
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--tcup-sc-duration) ease, box-shadow var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__editor-select:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__editor-select:focus {
	border-color: var(--tcup-sc-accent);
}

/* The theme's own chevron glyph; it points down by default, which is what a select wants. */
.tcup-sc__select-arrow,
.tcup-sc__select-arrow:before {
	position: absolute;
	right: 14px;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
	font-size: 0.45rem;
	line-height: 1;
	color: var(--tcup-sc-muted);
	pointer-events: none;
}

/* One swipeable row of fleece swatches - the product page picker, shrunk. */
.tcup-sc__swatches {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0;
	padding: 4px 2px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}

.tcup-sc__swatches::-webkit-scrollbar {
	display: none;
}

.tcup-sc__swatches > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch {
	display: block;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tcup-sc-bg);
	box-shadow: 0 0 0 1px var(--tcup-sc-swatch-ring);
	overflow: hidden;
	transition: box-shadow var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch:active {
	background: var(--tcup-sc-bg);
	box-shadow: 0 0 0 1px var(--tcup-sc-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcup-sc__swatch-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.625rem;
	text-transform: capitalize;
	color: var(--tcup-sc-muted);
}

/* Selected: a white gap and an accent ring - the product page's selected treatment. */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch--on,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch--on:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch--on:active {
	box-shadow: 0 0 0 2.5px var(--tcup-sc-bg), 0 0 0 4px var(--tcup-sc-accent);
}

/*
 * Arrows for the fleece row. Smaller than the recommendation rail's 40px because
 * they sit beside 44px swatches inside a panel, and they overlap the row's edges
 * so the swatches keep the full width.
 */
/*
 * The fleece arrows sit BESIDE the row, not over it. Overlaid, they covered the
 * first and last swatch - which are exactly the ones you are trying to reach -
 * and the swatch under the arrow looked broken rather than obscured.
 */
.tcup-sc__swatch-rail {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.tcup-sc__swatch-rail .tcup-sc__swatches {
	flex: 1 1 auto;
	min-width: 0;
	/*
	 * Soft edges. The row is a hard crop otherwise - a swatch sliced down the
	 * middle at each end, which reads as a rendering fault rather than as "there
	 * is more this way". The mask fades the first and last few pixels instead,
	 * and the padding keeps a whole swatch clear of each arrow.
	 */
	/*
	 * Room for the selected ring. It is a 4px box-shadow, which draws outside the
	 * element but takes no layout space, so at 2px of padding the outer edge of
	 * the ring was being clipped by this scroller - the "slight cropping" on a
	 * chosen first swatch.
	 */
	padding-left: 6px;
	padding-right: 6px;
	scroll-padding-inline: 6px;

	/*
	 * No edge fade. A mask cannot tell a gap from a swatch, so at any scroll
	 * position that is not exactly on a boundary it veils part of a fleece -
	 * including the chosen one. Mandatory snapping is what keeps the edges tidy
	 * instead: the row always comes to rest with a whole swatch against the edge,
	 * so there is nothing to soften.
	 */
	scroll-snap-type: x mandatory;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__swatch-rail .tcup-sc__rail-nav {
	position: static;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	transform: none;
}

/*
 * Disabled, not hidden: the arrows hold their place at both ends so the swatch
 * row never shunts sideways under your finger.
 */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rail-nav:disabled {
	opacity: 0.35;
	box-shadow: none;
	cursor: default;
	pointer-events: none;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rail-nav:disabled:hover {
	background: #fff;
}

/* -------------------------------------------------------------- rewards -- */

.tcup-sc__rewards {
	padding: 12px var(--tcup-sc-gap);
	border-bottom: 1px solid var(--tcup-sc-border);
}

.tcup-sc__rewards-message {
	margin: 0 0 8px;
	font-size: 0.8125rem;
	line-height: 1.35;
	text-align: center;
}

/* Slim track with an inset groove. Markers are dots only in the drawer. */
.tcup-sc__track {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: var(--tcup-sc-tier-track);
	box-shadow: inset 0 1px 2px rgba(76, 75, 75, 0.12);
}

.tcup-sc__track-fill {
	position: relative;
	display: block;
	height: 100%;
	border-radius: 999px;
	overflow: hidden;
	background: var(--tcup-sc-tier-fill);
	background: linear-gradient(90deg, var(--tcup-sc-tier-fill), var(--tcup-sc-accent-hover));
	/* Unhurried: the bar filling is the moment the customer is meant to notice. */
	transition: width 1100ms var(--tcup-sc-ease-out);
}

/* A single highlight sweep along the fill, only when the customer just moved the
   number - never on a plain open. */
.tcup-sc__track-fill.is-progressing::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
	transform: translateX(-100%);
	animation: tcup-sc-sweep 900ms 240ms ease-out 1 forwards;
}

@keyframes tcup-sc-sweep {
	to { transform: translateX(100%); }
}

/*
 * A slow repeating glint along the filled part, as a reminder that the bar is
 * going somewhere. Kept out of annoyance range three ways: it runs only while
 * the last tier is still unearned, the sweep itself is a sixth of a nine-second
 * cycle so the bar is still for most of it, and it steps aside for the real
 * progress sweep rather than crossing it.
 */
.tcup-sc__track-fill::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
	transform: translateX(-100%);
	/*
	 * Ten seconds apart, and the travel itself is a tenth of that - so the bar is
	 * still for nine seconds out of ten and the light reads as a highlight rather
	 * than an animation running in the corner of your eye. The fill's own growth
	 * is a transition, so it happens once, when the number actually changes.
	 */
	animation: tcup-sc-glint 10s var(--tcup-sc-ease-out) 2s infinite;
}

.tcup-sc__track-fill.is-progressing::before {
	animation: none;
}

@keyframes tcup-sc-glint {
	0%   { transform: translateX(-100%); }
	11%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}

.tcup-sc__tier {
	position: absolute;
	top: 50%;
	width: 11px;
	height: 11px;
	border: 2px solid var(--tcup-sc-bg);
	border-radius: 50%;
	background: var(--tcup-sc-tier-track);
	transform: translate(-50%, -50%);
}

/*
 * A reached checkpoint takes the bar's own colour. The teal it used to use is
 * the success colour from elsewhere in the plugin, and sitting on a pink bar it
 * read as a different thing entirely rather than as part of the track.
 */
.tcup-sc__tier--met {
	background: var(--tcup-sc-accent-hover);
	box-shadow: 0 0 0 1px var(--tcup-sc-accent-hover);
}

/* The next reward to reach: a white dot in a pink ring, its callout under it. */
.tcup-sc__tier--next {
	background: var(--tcup-sc-bg);
	box-shadow: 0 0 0 2px var(--tcup-sc-accent);
}

/*
 * The line under the track about the next reward (templates/tier-tip.php): where
 * it unlocks on the left, what it is worth on the right, across the full width.
 */
.tcup-sc__tip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 10px 0 0;
	padding: 5px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--tcup-sc-accent) 7%, var(--tcup-sc-bg));
	color: var(--tcup-sc-fg);
	font-size: 12px;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: left;
}

.tcup-sc__tip-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.tcup-sc__tip-title i,
.tcup-sc__tip-title i:before {
	margin: 0;
	color: var(--tcup-sc-accent-ink);
	font-size: 14px;
	line-height: 1;
}

.tcup-sc__tip-detail {
	color: var(--tcup-sc-muted);
	white-space: nowrap;
}

/* On the unlocked card's pink, white - the tint would vanish into it. */
.tcup-sc__card--unlocked .tcup-sc__tip {
	background: var(--tcup-sc-bg);
}

/* The worth is the point: it takes the accent. */
.tcup-sc__tip-detail .woocommerce-Price-amount {
	color: var(--tcup-sc-accent-ink);
	font-weight: 700;
}

/* The marker throws a ring when its tier is reached - the one moment worth a flourish. */
.tcup-sc__tier.is-unlocked {
	animation: tcup-sc-pulse 1100ms ease-out 2;
}

/*
 * A small pop as the fill arrives under a checkpoint. Fired per marker on a
 * timer matched to the fill, so the bar and the dots read as one movement.
 * translate() is repeated because the marker's resting transform centres it.
 */
.tcup-sc__tier.is-reached {
	animation: tcup-sc-pop 420ms var(--tcup-sc-ease-out) 1;
}

@keyframes tcup-sc-pop {
	0%   { transform: translate(-50%, -50%) scale(1); }
	40%  { transform: translate(-50%, -50%) scale(1.75); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes tcup-sc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(228, 94, 154, 0.6); }
	100% { box-shadow: 0 0 0 14px rgba(228, 94, 154, 0); }
}

.tcup-sc__tier-label {
	display: none;
}

/*
 * The drawer's bar as steps (rewards-bar.php): one marker per reward at its
 * share of the bar, carrying the reward's icon, and each reward named under
 * it - so the one after the next is in view too. A soft blush card, so it is
 * noticed, and the free gift's picker joins it once unlocked. The markers are
 * 30px, so the track is inset by half of one to keep the last inside the card.
 * The cart and checkout card (.tcup-sc__card) keeps its own dots.
 */
.tcup-sc__rewards--steps {
	background: color-mix(in srgb, var(--tcup-sc-accent) 7%, var(--tcup-sc-bg));
}

.tcup-sc__rewards--steps .tcup-sc__rewards-message {
	margin-bottom: 14px;
	color: var(--tcup-sc-fg);
	font-size: 0.875rem;
	font-weight: 600;
}

.tcup-sc__rewards--steps .tcup-sc__track {
	height: 10px;
	margin: 0 15px;
}

.tcup-sc__rewards--steps .tcup-sc__tier {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--tcup-sc-bg);
	background: var(--tcup-sc-tier-track);
	color: var(--tcup-sc-muted);
	box-shadow: none;
}

.tcup-sc__rewards--steps .tcup-sc__tier i,
.tcup-sc__rewards--steps .tcup-sc__tier i:before {
	display: block;
	margin: 0;
	color: inherit;
	font-size: 14px;
	line-height: 1;
}

/* The next one: a white disc in a pink ring, its icon pink. */
.tcup-sc__rewards--steps .tcup-sc__tier--next {
	background: var(--tcup-sc-bg);
	color: var(--tcup-sc-accent-ink);
	box-shadow: 0 0 0 2px var(--tcup-sc-accent);
}

/* Reached: the bar's own pink, the icon white. */
.tcup-sc__rewards--steps .tcup-sc__tier--met {
	background: var(--tcup-sc-accent);
	color: #fff;
	box-shadow: 0 0 0 1px var(--tcup-sc-accent);
}

/*
 * The names, under the bar: one column per step, each label ending under its
 * marker, since a marker sits at its column's right-hand edge.
 */
.tcup-sc__steps {
	display: grid;
	grid-template-columns: repeat(var(--steps, 1), minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.tcup-sc__step {
	display: grid;
	align-content: start;
	gap: 1px;
	margin: 0;
	color: var(--tcup-sc-muted);
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: right;
}

.tcup-sc__step-name {
	color: var(--tcup-sc-fg);
	font-weight: 700;
}

/*
 * Where it unlocks and what it is worth: a little speech bubble under the
 * reward's name, its point up at the name, white on the blush card.
 */
.tcup-sc__step-detail {
	--tcup-sc-bubble-line: color-mix(in srgb, var(--tcup-sc-accent) 28%, var(--tcup-sc-border));
	position: relative;
	justify-self: end;
	max-width: 100%;
	margin-top: 8px;
	padding: 3px 7px;
	border: 1px solid var(--tcup-sc-bubble-line);
	border-radius: 6px;
	background: var(--tcup-sc-bg);
	font-size: 0.75rem;
	text-wrap: balance;
}

.tcup-sc__step-detail::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 14px;
	width: 10px;
	height: 10px;
	border-top: 1px solid var(--tcup-sc-bubble-line);
	border-left: 1px solid var(--tcup-sc-bubble-line);
	border-radius: 2px 0 0;
	background: inherit;
	transform: rotate(45deg);
}

/* One line when it fits (it does at a phone's width in AUD); a longer amount,
   in another currency or on a narrow phone, wraps inside its bubble instead
   of running past it. */

.tcup-sc__step-at .woocommerce-Price-amount {
	color: var(--tcup-sc-fg);
	font-weight: 600;
}

/* The worth is the point: it takes the accent, as on the old tip line. */
.tcup-sc__step-worth .woocommerce-Price-amount {
	color: var(--tcup-sc-accent-ink);
	font-weight: 700;
}

/* Reached: the bubble turns the bar's pink. */
.tcup-sc__step.is-met .tcup-sc__step-detail {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	border-color: var(--tcup-sc-accent);
	background: var(--tcup-sc-accent);
	color: #fff;
	font-weight: 700;
}

.tcup-sc__step.is-met .tcup-sc__step-detail::before {
	border-color: var(--tcup-sc-accent);
}

.tcup-sc__step-tick {
	flex: 0 0 auto;
}

/* With the free gift unlocked, the bar and its picker read as one card. */
.tcup-sc__rewards--steps:has(+ .tcup-sc__gift) {
	border-bottom: 0;
}

/* ------------------------------------------------------------ free gift -- */

/*
 * Unlocked but unchosen: opens itself and takes the accent treatment, because
 * that is the one moment worth interrupting for. Once chosen it collapses to a
 * single row so the cart items are never pushed out of view by a decision that
 * has already been made.
 */
.tcup-sc__gift {
	border-bottom: 1px solid var(--tcup-sc-border);
	background: var(--tcup-sc-gift-tint);
	background: color-mix(in srgb, var(--tcup-sc-accent) 7%, var(--tcup-sc-bg));
}

.tcup-sc__gift--chosen {
	background: var(--tcup-sc-bg);
}

.tcup-sc__gift[open] .tcup-sc__gift-options > li {
	animation: tcup-sc-rise 380ms var(--tcup-sc-ease-out) both;
}

.tcup-sc__gift[open] .tcup-sc__gift-options > li:nth-child(2) { animation-delay: 60ms; }
.tcup-sc__gift[open] .tcup-sc__gift-options > li:nth-child(3) { animation-delay: 120ms; }
.tcup-sc__gift[open] .tcup-sc__gift-options > li:nth-child(4) { animation-delay: 180ms; }

@keyframes tcup-sc-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__gift-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px var(--tcup-sc-gap);
	cursor: pointer;
	list-style: none;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__gift-summary::-webkit-details-marker {
	display: none;
}

/*
 * The gift icon: the theme's gift glyph, pink, in a white circle - beside
 * "Choose your free gift" in the drawer and "Your free gift is unlocked" on
 * the checkout and cart pages.
 */
.tcup-sc__gift-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: var(--tcup-sc-accent-ink);
	box-shadow: 0 1px 2px rgba(76, 75, 75, 0.08), 0 0 0 1px var(--tcup-sc-border);
}

.tcup-sc__gift-icon .icon-gift,
.tcup-sc__gift-icon .icon-gift:before {
	margin: 0;
	color: inherit;
	font-size: 1.125rem;
	line-height: 1;
}

.tcup-sc__card-head--icon {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tcup-sc__card-head-text {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * "See this product": a small magnifier (the theme's search icon) over each
 * gift tile's picture, opening the
 * product in a new tab. Beside the tile's button rather than in it, so the
 * list item is its anchor.
 */
.tcup-sc__gift-options > li,
.tcup-sc__card-gifts > li {
	position: relative;
}

:is(.tcup-sc, .tcup-sc-inline) a.tcup-sc__gift-view {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 3px rgba(76, 75, 75, 0.2);
	color: var(--tcup-sc-muted);
	text-decoration: none;
	transition: color var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) a.tcup-sc__gift-view:hover,
:is(.tcup-sc, .tcup-sc-inline) a.tcup-sc__gift-view:focus-visible {
	color: var(--tcup-sc-accent-ink);
}

/*
 * The unlocked rows on the checkout and cart: smaller, on the corner of the
 * round photo. The tiles shown after "Change" keep the top-right badge.
 */
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gifts a.tcup-sc__gift-view {
	top: auto;
	right: auto;
	bottom: 2px;
	left: 34px;
	width: 20px;
	height: 20px;
}

.tcup-sc__gift-view .icon-search,
.tcup-sc__gift-view .icon-search:before {
	margin: 0;
	color: inherit;
	font-size: 12px;
	line-height: 1;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gifts .tcup-sc__gift-view .icon-search,
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gifts .tcup-sc__gift-view .icon-search:before {
	font-size: 10px;
}

/* The drawer's gift slider, used in the card (Settings > Rewards > Slider). */
.tcup-sc__card .tcup-sc__card-rail {
	margin: 14px 0 0;
}

.tcup-sc__card .tcup-sc__card-rail .tcup-sc__gift-option {
	font-size: 0.75rem;
}

.tcup-sc__gift-summary-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.tcup-sc__gift-headline {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--tcup-sc-accent-ink);
}

.tcup-sc__gift-sub,
.tcup-sc__gift-eyebrow {
	font-size: 0.75rem;
	color: var(--tcup-sc-muted);
}

.tcup-sc__gift-chosen-name {
	font-size: 0.8125rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tcup-sc__gift-thumb {
	flex: 0 0 32px;
	width: 32px;
}

.tcup-sc__gift-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--tcup-sc-swatch-ring);
}

/* Folded away, a chevron says there is more; open, it turns to fold it up. */
.tcup-sc__gift-caret {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	color: var(--tcup-sc-accent-ink);
	box-shadow: 0 0 0 1px var(--tcup-sc-border);
}

.tcup-sc__gift-caret .icon-arrow,
.tcup-sc__gift-caret .icon-arrow:before {
	display: block;
	margin: 0;
	color: inherit;
	font-size: 0.5rem;
	line-height: 1;
}

/* The theme's arrow glyph points down at rest. */
.tcup-sc__gift-caret .icon-arrow {
	transition: transform var(--tcup-sc-duration) ease;
}

.tcup-sc__gift[open] .tcup-sc__gift-caret .icon-arrow {
	transform: rotate(180deg);
}

.tcup-sc__gift-change {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--tcup-sc-accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Gift tiles: a slider of equal cards, two per view on phones, three from 640px.
 * min-width:0 at each level matters: the <img> is a flex child whose default
 * min-width:auto would refuse to shrink below its natural 400px and spill across
 * the neighbouring tile.
 */
.tcup-sc__gift-rail {
	margin: 0 var(--tcup-sc-gap) 12px;
}

.tcup-sc__gift-options {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 12px) / 2);
	align-items: stretch;
	gap: 12px;
	margin: 0;
	padding: 6px 2px 14px;
	overflow-x: auto;
	overflow-y: hidden; /* overflow-x:auto would otherwise imply overflow-y:auto */
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	list-style: none;
}

.tcup-sc__gift-options::-webkit-scrollbar {
	display: none;
}

@media screen and (min-width: 640px) {
	.tcup-sc__gift-options {
		grid-auto-columns: calc((100% - 24px) / 3);
	}
}

.tcup-sc__gift-options > li {
	display: flex;
	align-items: stretch;
	min-width: 0;
	scroll-snap-align: start;
}

.tcup-sc__gift-rail .tcup-sc__rail-nav {
	top: 38%;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__gift-option {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	min-width: 0;
	height: auto;
	padding: 6px 6px 8px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: var(--tcup-sc-radius-card);
	background: var(--tcup-sc-bg);
	color: inherit;
	font-size: 0.75rem;
	line-height: 1.2;
	text-align: center;
	box-shadow: var(--tcup-sc-shadow-soft);
	transition: border-color var(--tcup-sc-duration) ease, box-shadow var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__gift-option:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__gift-option:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__gift-option:active {
	border-color: var(--tcup-sc-accent);
	background: var(--tcup-sc-bg);
	color: inherit;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__gift-option--chosen {
	border-color: var(--tcup-sc-accent);
	box-shadow: 0 0 0 1px var(--tcup-sc-accent), var(--tcup-sc-shadow-soft);
}

.tcup-sc__gift-option-media {
	display: block;
	min-width: 0;
}

.tcup-sc__gift-option-media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(var(--tcup-sc-radius-card) - 4px);
}

/* Two lines, always: names of different lengths no longer produce different heights. */
.tcup-sc__gift-option-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 2.4em;
	overflow: hidden;
	margin-top: auto;
}

.tcup-sc__gift-option-worth {
	display: block;
	margin-top: 1px;
	color: var(--tcup-sc-muted);
	font-size: 0.6875rem;
	line-height: 1.2;
}

.tcup-sc__gift-option-worth .woocommerce-Price-amount {
	font-weight: 600;
}

/* ------------------------------------------------------- saved for later -- */

/*
 * Closed by default and visually quieter than the cart lines: these are items
 * the customer has explicitly set aside, so they should be findable without
 * competing with what is actually being bought.
 */
.tcup-sc__saved {
	margin: 0 var(--tcup-sc-gap) 10px;
	border-top: 1px solid var(--tcup-sc-border);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 2px;
	color: var(--tcup-sc-fg);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-summary::-webkit-details-marker {
	display: none;
}

/* The heading's icon: a bookmark for Saved for later, a heart for the wishlist. */
.tcup-sc__saved-title {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.tcup-sc__saved-icon {
	flex: 0 0 auto;
	color: var(--tcup-sc-accent-ink);
}

.tcup-sc__saved-arrow,
.tcup-sc__saved-arrow:before {
	display: block;
	margin: 0;
	font-size: 0.4rem;
	line-height: 1;
	color: var(--tcup-sc-muted);
}

.tcup-sc__saved-arrow {
	transition: transform var(--tcup-sc-duration) var(--tcup-sc-ease-out);
}

.tcup-sc__saved[open] .tcup-sc__saved-arrow {
	transform: rotate(180deg);
}

.tcup-sc__saved-list {
	margin: 0;
	padding: 0 0 8px;
	list-style: none;
}

.tcup-sc__saved-item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--tcup-sc-border);
}

.tcup-sc__saved-item--gone {
	opacity: 0.65;
}

.tcup-sc__saved-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--tcup-sc-radius-card);
}

.tcup-sc__saved-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tcup-sc__saved-name {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.tcup-sc__saved-name a {
	color: inherit;
}

.tcup-sc__saved-price {
	font-size: 0.75rem;
	color: var(--tcup-sc-fg);
}

.tcup-sc__saved-gone {
	font-size: 0.75rem;
	color: var(--tcup-sc-muted);
	font-style: italic;
}

.tcup-sc__saved-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 4px;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-move,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-drop,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-save {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	font-size: 0.75rem;
}

/*
 * These two are inline-level siblings on a shared line inside a block parent, so
 * they align on their baselines - and an inline-flex box takes its baseline from
 * its first child. "Save for later" leads with an SVG, which has no text
 * baseline, so it sat 2px off "Change options". Both boxes are the same height,
 * so aligning them to the top of the line box lines them up exactly, whatever
 * their contents. The margin has to match on both for the same reason.
 */
:is(.tcup-sc, .tcup-sc-inline) :is(.tcup-sc__item-save, .tcup-sc__item-edit) {
	margin-top: 8px;
	vertical-align: top;
}

/* The words carry the underline; a struck-through heart looks like a mistake. */
.tcup-sc__item-save-text {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tcup-sc__item-save-icon {
	flex: 0 0 auto;
	overflow: visible;
}


:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-move,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-save {
	color: var(--tcup-sc-fg);
	font-weight: 500;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-drop {
	color: var(--tcup-sc-muted);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-move:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-save:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-move:active,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-save:active {
	background: none;
	color: var(--tcup-sc-accent-ink);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-drop:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__saved-drop:active {
	background: none;
	color: var(--tcup-sc-fg);
}

/* Sits with "Change options" under the line, not with the remove control. */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__item-save {
	margin-top: 8px;
	margin-right: 14px;
}

/* ------------------------------------------------------ recommendations -- */

.tcup-sc__recs {
	padding: var(--tcup-sc-gap);
	border-top: 1px solid var(--tcup-sc-border);
	background: #fafafa;
	background: color-mix(in srgb, var(--tcup-sc-border) 18%, var(--tcup-sc-bg));
}

.tcup-sc__recs-title {
	margin: 0 0 10px;
	font-size: 0.9375rem;
	text-align: center;
}

.tcup-sc__rail-wrap {
	position: relative;
}

/*
 * The fleece badge, over the bottom-left of the product image.
 *
 * This is the card's actual argument - "you already own something in this
 * fleece" - so it reads at a glance instead of as a caption. Sitting on the
 * image also takes it out of the text column, where it was a conditional row
 * that pushed the price and button down on some cards but not others.
 */
.tcup-sc__rec-fabric {
	position: absolute;
	left: 6px;
	bottom: 6px;
	right: 6px;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 0;
	max-width: calc(100% - 12px);
	width: fit-content;
	/* Circles only now, so the pill is just a ring of padding around them. */
	padding: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--tcup-sc-fg);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 1px 6px -1px rgba(76, 75, 75, 0.35);
}

.tcup-sc__rec-fabric .tcup-sc__rec-fabric-swatch {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 0;
	aspect-ratio: auto;
	border-radius: 50%;
	object-fit: cover;
	/* Second ring in the badge's own colour, so overlapped swatches stay separable. */
	box-shadow: 0 0 0 1px var(--tcup-sc-swatch-ring), 0 0 0 2.5px rgba(255, 255, 255, 0.94);
}

/* A card matched on both fabrics shows both fleeces, overlapped so the pair
   still reads as one badge rather than two. */
.tcup-sc__rec-fabric .tcup-sc__rec-fabric-swatch + .tcup-sc__rec-fabric-swatch {
	margin-left: -8px;
}

/*
 * "Unlocks a free gift" on a gap-closing card: a tag on the photo's top
 * corner, as the fleece badge sits on its bottom one, rather than a pink line
 * of its own between the name and the price.
 */
.tcup-sc__rec-unlock {
	position: absolute;
	top: 6px;
	left: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: calc(100% - 12px);
	padding: 3px 8px 3px 6px;
	border-radius: 999px;
	background: var(--tcup-sc-accent);
	box-shadow: 0 1px 3px rgba(76, 75, 75, 0.25);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.tcup-sc__rec-unlock span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.tcup-sc__rec-unlock-icon {
	flex: 0 0 auto;
	/* Optical alignment: the bow sits above the box, so the glyph's mass is low
	   and it reads as riding high against the cap height without this. */
	margin-top: -1px;
}

/*
 * Scroll-snap rail rather than a slider library. The drawer is 420px on any
 * viewport, so two across is the honest width everywhere.
 */
.tcup-sc__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(50% - 6px);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.tcup-sc__rail::-webkit-scrollbar {
	display: none;
}

.tcup-sc__rec {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rec-link,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rec-link:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rec-link:focus {
	color: var(--tcup-sc-fg);
	text-decoration: none;
}

/*
 * Only the product name takes the hover colour. The theme styles a:hover on the
 * anchor, which repainted the price, the "from", the GST note and the fleece
 * name pink as well - four things answering a hover meant for one.
 */
.tcup-sc__rec-link:hover .tcup-sc__rec-name,
.tcup-sc__rec-link:focus-visible .tcup-sc__rec-name {
	color: var(--tcup-sc-accent-ink);
}

.tcup-sc__rec-media {
	position: relative;
	display: block;
}

/* Direct child only: the badge's swatch also lives in this box now. */
.tcup-sc__rec-media > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--tcup-sc-radius-card);
	box-shadow: var(--tcup-sc-shadow-soft);
}

.tcup-sc__rec-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* No reserved second line: a one-line name left a blank line above the
	   price. The Add buttons still line up - they sit at each card's foot. */
	margin-top: 8px;
	overflow: hidden;
	color: var(--tcup-sc-fg);
	font-size: 0.8125rem;
	line-height: 1.3;
	transition: color var(--tcup-sc-duration) ease;
}

.tcup-sc__rec-price {
	display: block;
	margin-top: 2px;
	color: var(--tcup-sc-fg);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Woo's price markup carries its own spans; keep them out of the hover colour. */
.tcup-sc__rec-price .woocommerce-Price-amount,
.tcup-sc__rec-price ins,
.tcup-sc__rec-price small {
	color: var(--tcup-sc-fg);
}

/* Prices here include GST like everywhere else in the shop; the note is clutter on a card. */
.tcup-sc__rec-price .woocommerce-price-suffix {
	display: none;
}

.tcup-sc__rec-price small {
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--tcup-sc-muted);
}

.tcup-sc__rec-price del {
	opacity: 0.6;
	font-weight: 400;
}

/* Hollow at rest, filled on hover - the theme's .button.hollow pattern. */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rec-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	margin-top: auto;
	padding: 0 12px;
	border: 1px solid var(--tcup-sc-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--tcup-sc-accent-ink);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--tcup-sc-duration) ease, color var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rec-add:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rec-add:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rec-add:active {
	background: var(--tcup-sc-accent);
	color: var(--tcup-sc-accent-fg);
}

/*
 * Rail arrows: the single-product slider's .white_ui_button at 40px instead of
 * its 50px - white disc, white ring, the theme's 23px shadow at .2, #e2e2e1 on
 * hover. 40px is a real thumb target.
 */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rail-nav {
	position: absolute;
	top: 33%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0.15rem solid #fff;
	border-radius: 50%;
	background: #fff;
	color: var(--tcup-sc-fg);
	line-height: 1;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: 0 0 23px 0 rgba(76, 75, 75, 0.2);
	transform: translateY(-50%);
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rail-nav:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rail-nav:focus-visible {
	background: var(--tcup-sc-border);
	color: var(--tcup-sc-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__rail-nav:active {
	background: var(--tcup-sc-border);
	color: var(--tcup-sc-fg);
	box-shadow: 0 0 12px 0 rgba(76, 75, 75, 0.2);
}

.tcup-sc__rail-nav--prev { left: -10px; }
.tcup-sc__rail-nav--next { right: -10px; }

.tcup-sc__rail-nav .icon-arrow,
.tcup-sc__rail-nav .icon-arrow:before {
	display: block;
	color: inherit;
	margin: 0;
	font-size: 0.5rem;
	line-height: 1;
}

/* The theme's arrow glyph points DOWN at rest (it is a dropdown chevron). */
.tcup-sc__rail-nav--prev .icon-arrow {
	transform: rotate(90deg);
	margin-left: -0.1875rem;
}

.tcup-sc__rail-nav--next .icon-arrow {
	transform: rotate(-90deg);
	margin-right: -0.1875rem;
}

/* --------------------------------------------------------------- footer -- */

.tcup-sc__footer {
	position: relative;
	padding: 10px var(--tcup-sc-gap) 12px;
	background: var(--tcup-sc-bg);
	box-shadow: 0 -1px 0 var(--tcup-sc-border), 0 -10px 18px -16px rgba(76, 75, 75, 0.35);
}

/* The footer's first line: the coupon link (footer-totals.php). */
.tcup-sc__footer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 8px;
}

/* Coupon code as a disclosure behind a quiet text link. */
.tcup-sc__coupon {
	margin-bottom: 8px;
}

.tcup-sc__footer-bar .tcup-sc__coupon {
	margin: 0;
}

/*
 * The summary line: Total (Subtotal until shipping is known) and its amount,
 * the figure the checkout button agrees with. It is the toggle its breakdown
 * folds behind, and the breakdown opens under it (footer-totals.php;
 * side-cart.js setTotals()). A rule above it sets it off from the coupon link.
 * Not qualified by element: drawer.php's UCSS anchor copies it as a span.
 */
.tcup-sc__summary {
	margin: 0 0 8px;
	padding-top: 6px;
	border-top: 1px solid var(--tcup-sc-border);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__summary-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 32px;
	margin: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--tcup-sc-fg);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__summary-line[aria-expanded] {
	cursor: pointer;
}

/* The note wraps under the label rather than squeezing the amount. */
.tcup-sc__summary-label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 6px;
	min-width: 0;
}

.tcup-sc__summary-amount {
	flex: 0 0 auto;
	white-space: nowrap;
}

/*
 * The note after the label: what shipping adds ("(incl. $13.95 shipping)",
 * "(+ shipping at checkout)"), or, when nothing ships, "(show details)" /
 * "(hide details)", one at a time by the toggle's aria-expanded (side-cart.js
 * setTotals()); both of those rules match drawer.php's UCSS anchor.
 */
.tcup-sc__summary-hint {
	color: var(--tcup-sc-muted);
	font-size: 0.75rem;
	font-weight: 500;
}

.tcup-sc__summary-hint-hide,
.tcup-sc__summary-line[aria-expanded="true"] .tcup-sc__summary-hint-show {
	display: none;
}

.tcup-sc__summary-line[aria-expanded="true"] .tcup-sc__summary-hint-hide {
	display: inline;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__summary-line[aria-expanded]:hover .tcup-sc__summary-hint {
	color: var(--tcup-sc-fg);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* WooPayments' currency code, which the theme wraps (jcn-framework
   custom-functions.php): quiet, as on the cart and checkout pages. */
.tcup-sc__summary-amount .tn-price-code {
	color: var(--tcup-sc-muted);
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.tcup-sc__chev {
	flex: 0 0 auto;
	transition: transform var(--tcup-sc-duration) ease;
}

.tcup-sc__summary-line[aria-expanded="true"] .tcup-sc__chev {
	transform: rotate(180deg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__coupon-toggle,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__ship-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	color: var(--tcup-sc-muted);
	font-size: 0.8125rem;
	cursor: pointer;
	list-style: none;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__coupon-toggle::-webkit-details-marker {
	display: none;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__coupon-toggle::before,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__ship-toggle::before {
	content: "+";
	display: inline-block;
	width: 1em;
	font-weight: 700;
}

.tcup-sc__coupon[open] .tcup-sc__coupon-toggle::before {
	content: "\2212";
}

.tcup-sc__coupon-toggle-text,
.tcup-sc__ship-toggle-text {
	text-decoration: underline;
	text-underline-offset: 2px;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__coupon-toggle:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__ship-toggle:hover,
.tcup-sc__coupon[open] .tcup-sc__coupon-toggle {
	color: var(--tcup-sc-fg);
}

.tcup-sc__coupon-form {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: 999px;
	background: var(--tcup-sc-bg);
	color: inherit;
	font-size: 1rem; /* under 16px, iPhones zoom the page in on focus */
}

.tcup-sc__coupon-applied {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.tcup-sc__coupon-applied li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--tcup-sc-border);
	font-size: 0.75rem;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__coupon-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: -4px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 1;
}

/*
 * A coupon from a link, waiting for the cart to qualify - see held-coupon.php.
 * The theme's warning colour, the one its notices use for "not yet".
 */
.tcup-sc__held {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 6px 8px;
	margin: 0 0 10px;
	padding: 8px 10px 10px 12px;
	border-radius: 10px;
	background: var(--tn-warning, #e7f5f5);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.tcup-sc__held-text {
	margin: 0;
}

.tcup-sc__held-code,
.tcup-sc-toast__code {
	display: inline-block;
	margin-right: 4px;
	padding: 0 6px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.tcup-sc__held-code {
	color: var(--tn-warning-ink, #419c9c);
	background: rgba(255, 255, 255, 0.7);
}

.tcup-sc__held-track,
.tcup-sc-toast__track {
	display: block;
	height: 4px;
	border-radius: 4px;
	background: rgba(76, 75, 75, 0.12);
	overflow: hidden;
}

.tcup-sc__held-track {
	grid-column: 1 / -1;
}

.tcup-sc__held-track > span,
.tcup-sc-toast__track > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--tn-warning-ink, #419c9c);
	transition: width var(--tcup-sc-duration) ease;
}

/*
 * The cart's parts of the theme's toast (jcn-framework _toasts.scss). The toast
 * lives outside the drawer, so these are not scoped to .tcup-sc.
 */
.tcup-sc-toast__qty {
	white-space: nowrap;
	color: var(--tn-muted, #817d7d);
}

.jcn-toast__body .tcup-sc-toast__meta {
	margin-top: 2px;
	color: var(--tn-muted, #817d7d);
	font-size: 0.8125rem;
}

.jcn-toast__body .tcup-sc-toast__nudge {
	margin: 10px 0 5px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.tcup-sc-toast__nudge + .tcup-sc-toast__track > span {
	background: var(--tn-primary, #e45e9a);
}

.jcn-toast__body .tcup-sc-toast__track {
	margin-top: 8px;
}

.jcn-toast__body .tcup-sc-toast__nudge + .tcup-sc-toast__track {
	margin-top: 0;
}

.jcn-toast__title .tcup-sc-toast__code {
	margin: 0 0 0 4px;
	font-size: 0.75rem;
}

/* The line that was just added, when the drawer opens to show it. */
.tcup-sc__item.is-just-added {
	animation: tcup-sc-just-added 1.8s ease-out;
}

@keyframes tcup-sc-just-added {
	0%, 35% { background-color: var(--tn-success, #e2f7e9); }
	100% { background-color: transparent; }
}

/*
 * Shipping estimate (off by default). This holds only the dialog's <template>
 * now; its trigger is the pencil beside "Shipping" in the totals.
 */
.tcup-sc__shipping {
	display: none;
}

/* Checkout's own shipping section is the one that counts there - see init(). */
.tcup-sc--on-checkout .tcup-sc__shipping {
	display: none;
}

/* A <button>, not a <summary>: strip the control chrome the browser gives it. */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__ship-toggle {
	border: 0;
	background: none;
	text-align: left;
}

.tcup-sc__shipping-form {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.tcup-sc__shipping-field span {
	display: block;
	margin-bottom: 2px;
	font-size: 0.75rem;
	color: var(--tcup-sc-muted);
}

.tcup-sc__shipping-rates {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * The theme sets a global `input { width: 100% }`, which a flex child happily
 * honours - the radio came out 173px wide and shoved the label into the middle
 * of the row. Width and flex both have to be said explicitly here.
 */
.tcup-sc__shipping-rates input[type="radio"] {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	accent-color: var(--tcup-sc-accent);
}

/*
 * Each rate is a card you pick, not a line with a dot beside it. A bare radio
 * against flat text did not read as a choice at all - it looked like a label
 * that happened to have a control next to it.
 */
.tcup-sc__shipping-rates li + li {
	margin-top: 6px;
}

.tcup-sc__shipping-rates label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color var(--tcup-sc-duration) var(--tcup-sc-ease-out),
		background-color var(--tcup-sc-duration) var(--tcup-sc-ease-out);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__shipping-rates label:hover {
	border-color: var(--tcup-sc-accent);
}

/* The chosen one carries the accent, so the selection survives a glance. */
.tcup-sc__shipping-rates li:has(input:checked) label {
	border-color: var(--tcup-sc-accent);
	background: color-mix(in srgb, var(--tcup-sc-accent) 7%, var(--tcup-sc-bg));
}

.tcup-sc__shipping-heading {
	margin: 14px 0 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--tcup-sc-muted);
}

.tcup-sc__shipping-rates label > span:first-of-type {
	flex: 1 1 auto;
	min-width: 0;
}

.tcup-sc__shipping-cost {
	flex: 0 0 auto;
	font-weight: 600;
}

.tcup-sc__shipping-none {
	color: var(--tcup-sc-muted);
	font-size: 0.8125rem;
}

/* The breakdown, under the summary line: what makes it up, a step quieter. */
.tcup-sc__totals {
	margin: 0 0 4px;
}

.tcup-sc__totals[hidden] {
	display: none;
}

.tcup-sc__totals-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 0;
	font-size: 0.8125rem;
}

.tcup-sc__totals dt,
.tcup-sc__totals dd {
	margin: 0;
}

.tcup-sc__totals-row dt {
	color: var(--tcup-sc-muted);
	font-weight: 500;
}

.tcup-sc__totals-row--discount dd {
	color: var(--tcup-sc-tier-met);
}

/* "Shipping" and the pencil that opens the estimate. */
.tcup-sc__totals-row--ship dt {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__ship-edit {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: -6px 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--tcup-sc-muted);
	cursor: pointer;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__ship-edit:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__ship-edit:focus-visible {
	background: var(--tcup-sc-border);
	color: var(--tcup-sc-fg);
}

/* Not on checkout, where the form's own shipping section is the one that
   counts (init()). After, and more specific than, the rule above it; and
   side-cart.js hides it there too (setTotals()). */
.tcup-sc.tcup-sc--on-checkout .tcup-sc__ship-edit {
	display: none;
}

.tcup-sc__totals-row--ship.is-pending dd {
	color: var(--tcup-sc-muted);
}

.tcup-sc__actions {
	display: grid;
	gap: 8px;
}

.tcup-sc__actions-minor {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/*
 * Scoped through the row to reach (0,3,0). The base .tcup-sc__btn rule sets
 * min-height:44px at the same specificity and appears later in the file, so a
 * plain .tcup-sc__btn--small was being overridden and both rows came out the
 * same height.
 */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__actions-minor .tcup-sc__btn--small {
	min-height: 36px;
	font-size: 0.8125rem;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--wide {
	width: 100%;
}

/*
 * The two ways out of the drawer: matched, quiet, and equal. Checkout is the
 * only pink thing down here - an outlined pink "View cart" next to a solid pink
 * "Checkout" was two pinks competing, and the odd one out rendered as bare text
 * because the border below resets it.
 *
 * Scoped through the row to reach (0,3,0): the base .tcup-sc__btn rule sets
 * `border: 1px solid transparent` as a shorthand and appears LATER in this file,
 * so a plain .tcup-sc__btn--quiet border-color was being wiped. Same trap as the
 * button heights.
 */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__actions-minor .tcup-sc__btn--quiet {
	border-color: var(--tcup-sc-border);
	background: transparent;
	color: var(--tcup-sc-muted);
	font-weight: 600;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__actions-minor .tcup-sc__btn--quiet:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__actions-minor .tcup-sc__btn--quiet:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__actions-minor .tcup-sc__btn--quiet:active {
	border-color: var(--tcup-sc-muted);
	background: var(--tcup-sc-hover-tint);
	color: var(--tcup-sc-fg);
}

/* Buttons follow the theme system: pill, primary hover/active colours, hollow variant. */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tcup-sc-duration) ease, color var(--tcup-sc-duration) ease, border-color var(--tcup-sc-duration) ease, box-shadow var(--tcup-sc-duration) ease, transform var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--primary {
	flex-direction: column;
	gap: 1px;
	/* The theme's CTA pink, not the softer accent - this is the same action as
	   the site's own primary buttons and should look like it - deepened as on
	   the cart and checkout: white on #e91d78 is 4.3:1, on #d1236b 5.0:1. */
	background: var(--tcup-sc-accent-ink);
	color: var(--tcup-sc-accent-fg);
	line-height: 1.1;
	box-shadow: var(--tcup-sc-shadow-lift);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--primary:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--primary:focus-visible {
	background: #bc1f60;
	color: var(--tcup-sc-accent-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--primary:active {
	background: #a71b55;
	color: var(--tcup-sc-accent-fg);
	box-shadow: none;
	transform: translateY(1px);
}

.tcup-sc__btn-label {
	font-size: 0.9375rem;
	font-weight: 700;
}

.tcup-sc__btn-total {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.92;
}

.tcup-sc__btn-total .woocommerce-Price-amount {
	font-weight: 600;
}

.tcup-sc__btn-currency {
	opacity: 0.8;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--ghost {
	border-color: var(--tcup-sc-accent);
	background: transparent;
	color: var(--tcup-sc-accent-ink);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--ghost:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--ghost:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--ghost:active {
	background: #fbeaef;
	background: color-mix(in srgb, var(--tcup-sc-secondary) 40%, var(--tcup-sc-bg));
	color: var(--tcup-sc-accent-ink);
}

/* Sized to sit level with the coupon input, not the full-height primary buttons. */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--apply {
	flex: 0 0 auto;
	min-height: 0;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--tcup-sc-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--tcup-sc-accent-ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--apply:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--apply:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--apply:active {
	background: #fbeaef;
	background: color-mix(in srgb, var(--tcup-sc-secondary) 40%, var(--tcup-sc-bg));
	color: var(--tcup-sc-accent-ink);
}

/* ------------------------------------------ empty, notices, undo, guard -- */

.tcup-sc__empty {
	padding: 48px var(--tcup-sc-gap);
	text-align: center;
}

.tcup-sc__empty::before {
	content: "\e905"; /* theme icon-cart glyph */
	display: block;
	margin: 0 auto 12px;
	font-family: "theme-font";
	font-size: 2rem;
	line-height: 1;
	color: var(--tcup-sc-border);
}

.tcup-sc__empty-text {
	margin: 0 0 16px;
	color: var(--tcup-sc-muted);
}

.tcup-sc__notices {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcup-sc__notice {
	margin: 8px var(--tcup-sc-gap) 0;
	padding: 9px 12px;
	border-left: 3px solid currentColor;
	border-radius: 8px;
	font-size: 0.8125rem;
}

.tcup-sc__notice--error   { background: #fdecec; color: #8a1f1f; }
.tcup-sc__notice--success { background: #eaf6ee; color: #1f6b38; }
.tcup-sc__notice--notice  { background: #eef4fa; color: #1f4d6b; }

.tcup-sc__undo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px var(--tcup-sc-gap) 0;
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--tcup-sc-fg);
	color: #fff;
	font-size: 0.8125rem;
	box-shadow: var(--tcup-sc-shadow-lift);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__undo-btn {
	border: 0;
	background: none;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__undo-btn:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__undo-btn:active {
	background: none;
	color: #fff;
}

/* Removal guard: one quiet line and two text buttons, inside the item row. */
/*
 * Removal confirmation: a dialog centred in the drawer over its own blurred
 * scrim. Keeping it inside the panel rather than over the whole page means the
 * question stays attached to the cart it is about.
 */
/*
 * One scrim for every in-drawer dialog: the removal confirmation and the
 * recommendation options picker. Inside the panel, not over the page, so the
 * question stays attached to the cart it is about.
 */
.tcup-sc__scrim {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tcup-sc-gap);
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: tcup-sc-guard-in 180ms var(--tcup-sc-ease-out);
}

.tcup-sc__scrim-box {
	position: relative;
	width: 100%;
	max-width: 320px;
	max-height: 100%;
	/*
	 * Both axes, explicitly. The fleece rail inside clips its own 2,000px of
	 * swatches correctly, but the overflow still propagated to this box's
	 * scrollWidth - and `overflow-y: auto` alone makes the other axis compute to
	 * auto too, so the dialog grew a permanent horizontal scrollbar and could be
	 * dragged sideways off its own content. Nothing becomes unreachable: the
	 * rail scrolls itself.
	 */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px;
	border-radius: var(--tcup-sc-radius-panel);
	background: var(--tcup-sc-bg);
	box-shadow: 0 10px 30px -10px rgba(76, 75, 75, 0.35), var(--tcup-sc-shadow-soft);
	animation: tcup-sc-guard-rise 220ms var(--tcup-sc-ease-out);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__scrim-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--tcup-sc-muted);
	line-height: 1;
	transition: background-color var(--tcup-sc-duration) ease, color var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__scrim-close:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__scrim-close:focus-visible,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__scrim-close:active {
	background: var(--tcup-sc-hover-tint);
	color: var(--tcup-sc-fg);
}

/* The confirmation keeps its own centred, compact treatment. */
.tcup-sc__guard .tcup-sc__scrim-close {
	display: none;
}

/* --------------------------------------------------- options picker -- */

.tcup-sc__scrim--options .tcup-sc__scrim-box {
	max-width: 340px;
	padding: 18px 16px 16px;
}

.tcup-sc__opt-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 28px 16px 0;
}

.tcup-sc__opt-media {
	flex: 0 0 52px;
	width: 52px;
}

.tcup-sc__opt-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--tcup-sc-radius-card);
}

.tcup-sc__opt-heading {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tcup-sc__opt-name {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
}

.tcup-sc__opt-price {
	color: var(--tcup-sc-muted);
	font-size: 0.8125rem;
}

.tcup-sc__opt-price .woocommerce-Price-amount {
	color: var(--tcup-sc-fg);
	font-weight: 600;
}

.tcup-sc__opt-fields {
	display: grid;
	gap: 18px;
	margin-bottom: 18px;
}

.tcup-sc__opt-fields > * {
	min-width: 0;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__opt-add {
	width: 100%;
}

.tcup-sc__opt-hint {
	margin: 8px 0 0;
	color: #8a1f1f;
	font-size: 0.75rem;
	text-align: center;
}

/* The guard's own box, narrower than the picker. */
.tcup-sc__guard {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tcup-sc-gap);
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: tcup-sc-guard-in 180ms var(--tcup-sc-ease-out);
}

@keyframes tcup-sc-guard-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.tcup-sc__guard-box {
	width: 100%;
	max-width: 300px;
	padding: 20px;
	border-radius: var(--tcup-sc-radius-panel);
	background: var(--tcup-sc-bg);
	text-align: center;
	box-shadow: 0 10px 30px -10px rgba(76, 75, 75, 0.35), var(--tcup-sc-shadow-soft);
	animation: tcup-sc-guard-rise 220ms var(--tcup-sc-ease-out);
}

@keyframes tcup-sc-guard-rise {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.tcup-sc__guard-text {
	margin: 0 0 16px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.tcup-sc__guard-actions {
	display: grid;
	gap: 8px;
}

/*
 * Keeping the gift is the safe answer, so it is the solid one.
 *
 * Scoped through .tcup-sc__guard to reach (0,3,0). The theme-insulation rule
 * `:is(button):is(:hover,:focus,:active)` is (0,2,1) and would otherwise strip
 * this button's fill the moment it takes focus - and it takes focus as soon as
 * the dialog opens. :focus-visible alone does not cover that, because a
 * programmatic focus() is not "visible" focus.
 */
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard .tcup-sc__guard-btn--keep {
	min-height: 42px;
	background: var(--tcup-sc-accent);
	color: var(--tcup-sc-accent-fg);
	font-weight: 700;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard .tcup-sc__guard-btn--keep:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard .tcup-sc__guard-btn--keep:focus,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard .tcup-sc__guard-btn--keep:focus-visible {
	background: var(--tcup-sc-accent-hover);
	color: var(--tcup-sc-accent-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard .tcup-sc__guard-btn--keep:active {
	background: var(--tcup-sc-accent-active);
	color: var(--tcup-sc-accent-fg);
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard-btn {
	padding: 4px 0;
	color: var(--tcup-sc-muted);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard-btn:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__guard-btn:active {
	background: none;
	color: var(--tcup-sc-fg);
}

/* -------------------------------------------------------------- loading -- */

/* Loading state: occupies real height so the swap causes no layout jump. */
.tcup-sc__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: var(--tcup-sc-gap);
}

.tcup-sc__loading-img {
	width: 48px;
	height: 48px;
}

.tcup-sc__loading-spinner {
	width: 26px;
	height: 26px;
	border: 2px solid var(--tcup-sc-border);
	border-top-color: var(--tcup-sc-accent);
	border-radius: 50%;
	animation: tcup-sc-spin 0.7s linear infinite;
}

@keyframes tcup-sc-spin {
	to { transform: rotate(360deg); }
}

/* Count badges bump when the number goes up. */
.tcup-sc__title-count.is-bump,
.tcup-sc__basket-count.is-bump {
	animation: tcup-sc-bump 450ms var(--tcup-sc-ease-out) 1;
}

@keyframes tcup-sc-bump {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* A link waiting for a cart change to reach the server (side-cart.js holdNavigation()). */
.tcup-sc-is-waiting {
	cursor: progress;
	opacity: 0.75;
}

/* Body scroll lock. iOS Safari needs position:fixed, not overflow:hidden. */
body.tcup-sc-locked {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* ------------------------------------------------------ floating basket -- */

.tcup-sc__basket {
	position: fixed;
	bottom: var(--tcup-sc-basket-offset);
	z-index: var(--tcup-sc-basket-z);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tcup-sc-basket-size);
	height: var(--tcup-sc-basket-size);
	border-radius: 50%;
	background: var(--tcup-sc-basket-bg);
	color: var(--tcup-sc-basket-fg);
	box-shadow: var(--tcup-sc-basket-shadow);
	text-decoration: none;
	transition: transform var(--tcup-sc-duration) ease, opacity var(--tcup-sc-duration) ease, box-shadow var(--tcup-sc-duration) ease;
}

.tcup-sc__basket--right { right: var(--tcup-sc-basket-offset); }
.tcup-sc__basket--left  { left: var(--tcup-sc-basket-offset); }

/* A modal or the mobile menu is open: out of its way (side-cart.js overlayOpen()). */
html.is-reveal-open .tcup-sc__basket,
html.tcup-hide-floating .tcup-sc__basket {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* A chat widget is on screen: move up out of its way and line up with it. */
.tcup-sc__basket--above-chat {
	bottom: var(--tcup-sc-basket-chat-bottom);
}

.tcup-sc__basket--above-chat.tcup-sc__basket--right {
	right: var(--tcup-sc-basket-chat-inset);
}

.tcup-sc__basket--above-chat.tcup-sc__basket--left {
	left: var(--tcup-sc-basket-chat-inset);
}

/*
 * Every state keeps the trolley white. The theme colours a:focus and a:hover
 * #de3782 - near enough the button's own pink - and a tap or click leaves the
 * link focused, so the icon vanished into the circle until focus moved on.
 * :focus-visible alone did not cover it: a mouse or touch focus is not visible
 * focus. :is() also out-ranks the theme's a:focus (0,2,0 against 0,1,1).
 */
.tcup-sc__basket:is(:link, :visited, :hover, :focus, :focus-visible, :active) {
	color: var(--tcup-sc-basket-fg);
}

.tcup-sc__basket:hover,
.tcup-sc__basket:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--tcup-sc-basket-shadow), var(--tcup-sc-shadow-lift);
}

.tcup-sc__basket:active {
	transform: translateY(0) scale(0.96);
}

.tcup-sc__basket-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tcup-sc-basket-icon);
	height: var(--tcup-sc-basket-icon);
}

/*
 * The trolley's wheels sit below its body, so the drawing's visual mass is
 * above its geometric centre. Half a pixel down is what makes it look centred
 * in the circle rather than measured into it.
 */
.tcup-sc__basket-svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: translateY(0.5px);
}

/* The theme sets .icon-cart:before{color:#4c4b4b} globally; inherit instead. */
.tcup-sc__basket .icon-cart,
.tcup-sc__basket .icon-cart:before {
	color: inherit;
	margin: 0;
	font-size: var(--tcup-sc-basket-icon);
	line-height: 1;
}

.tcup-sc__basket .icon-cart {
	display: block;
}

/* Count badge, top-left of the button. */
.tcup-sc__basket-count {
	position: absolute;
	top: -2px;
	left: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--tcup-sc-badge-bg);
	color: var(--tcup-sc-badge-fg);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* Only revealed once the cart has items (basket_always_show = false). */
.tcup-sc__basket--when-filled {
	opacity: 0;
	pointer-events: none;
}

.tcup-sc__basket--when-filled.hasItems {
	opacity: 1;
	pointer-events: auto;
}

@media screen and (min-width: 1025px) {
	.tcup-sc__basket--mobile-only {
		display: none;
	}
}

/* Keep clear of the drawer while it is open. */
.tcup-sc-locked .tcup-sc__basket {
	opacity: 0;
	pointer-events: none;
}

/* ------------------------------------------------ inline checkout / cart -- */

/*
 * The reward card on the cart and checkout pages.
 *
 * Sized and composed for a page column, not scaled up from the drawer: the gifts
 * are shown at a size where you can actually see what they are, because a picture
 * of the thing is the incentive - the word "gift" is not.
 */
.tcup-sc-inline {
	margin: 0 0 1.75rem;
}

/*
 * On the checkout and cart pages the card is one of the order's extras, not
 * a banner, so it is a single compact row:
 *
 *   still to earn   the gifts as small overlapping circles, the gap as one
 *                   line, a thin bar - the prize is shown, not sold
 *   unlocked        a short list, picture / name / worth / Choose
 *   chosen          the one confirming line, as everywhere
 *
 * Grid areas rather than new markup, so the drawer and cart page keep theirs.
 */
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc-inline {
	margin: 0;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card {
	padding: 14px 16px;
	border-radius: 12px;
	box-shadow: none;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked {
	box-shadow: none;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card-title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card-sub {
	margin-top: 2px;
	font-size: 0.8125rem;
}

/* The bar is the progress; the amounts under it repeat the headline. */
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card-track {
	margin: 10px 0 0;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card .tcup-sc__track {
	height: 6px;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card .tcup-sc__tier {
	width: 12px;
	height: 12px;
	border-width: 2px;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card .tcup-sc__tier-label {
	display: none;
}

/* Still to earn: circles | line + bar. */
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-head,
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-track {
	grid-column: 2;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gifts {
	grid-column: 1;
	grid-row: 1 / 3;
	flex-wrap: nowrap;
	gap: 0;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gifts > li {
	flex: 0 0 auto;
	max-width: none;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gifts > li + li {
	margin-left: -14px;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gift {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

/* Each circle is the link to its product: it rises to the front on hover. */
:is(.tcup-sc, .tcup-sc-inline) a.tcup-sc__card-gift {
	text-decoration: none;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress a.tcup-sc__card-gift {
	position: relative;
	transition: transform var(--tcup-sc-duration) ease;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress a.tcup-sc__card-gift:hover,
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress a.tcup-sc__card-gift:focus-visible {
	z-index: 1;
	transform: translateY(-3px);
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress a.tcup-sc__card-gift:focus-visible {
	outline: 2px solid var(--tcup-sc-accent);
	outline-offset: 2px;
	border-radius: 50%;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gift-media img {
	width: 44px;
	height: 44px;
	border: 2px solid var(--tcup-sc-bg);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress :is(.tcup-sc__card-gift-name, .tcup-sc__card-gift-worth) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*
 * Phones: the gift pictures as a small row on top, the words and the bar under
 * them at the card's full width. Beside them, the pictures took nearly half the
 * card and squeezed the headline into a narrow column over a short bar.
 */
@media screen and (max-width: 639px) {
	:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	/* Last in the markup, first on screen. */
	:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gifts {
		display: flex;
		align-self: flex-start;
		order: -1;
		margin: 0 0 12px;
	}

	:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gifts > li + li {
		margin-left: -12px;
	}

	:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--progress .tcup-sc__card-gift-media img {
		width: 48px;
		height: 48px;
	}
}

/* Unlocked: a short list of rows. */
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gifts {
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gifts > li {
	flex: 0 0 auto;
	max-width: none;
}

:is(.woocommerce-checkout, .woocommerce-cart) :is(.tcup-sc, .tcup-sc-inline) .tcup-sc__card--unlocked .tcup-sc__card-gift {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	max-width: none;
	padding: 6px 10px 6px 6px;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gift:hover,
:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gift:focus-visible {
	box-shadow: none;
	transform: none;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gift-media {
	grid-row: 1 / 3;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gift-media img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gift-name {
	grid-column: 2;
	align-self: end;
	min-height: 0;
	margin: 0;
	-webkit-line-clamp: 1;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gift-worth {
	grid-column: 2;
	align-self: start;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card--unlocked .tcup-sc__card-gift-pick {
	grid-column: 3;
	grid-row: 1 / 3;
	margin: 0;
	padding: 5px 12px;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card-thumb {
	flex-basis: 40px;
	width: 40px;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card-thumb img {
	border-radius: 50%;
}

:is(.woocommerce-checkout, .woocommerce-cart) .tcup-sc__card-tick {
	width: 24px;
	height: 24px;
}

.tcup-sc__card {
	position: relative;
	padding: 20px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: var(--tcup-sc-radius-panel);
	background: var(--tcup-sc-bg);
	box-shadow: var(--tcup-sc-shadow-soft);
	overflow: hidden;
}

/* Live decision: the card earns the accent treatment. Everything else stays quiet. */
.tcup-sc__card--unlocked {
	border-color: var(--tcup-sc-accent);
	background: color-mix(in srgb, var(--tcup-sc-accent) 5%, var(--tcup-sc-bg));
	box-shadow: 0 0 0 1px var(--tcup-sc-accent), var(--tcup-sc-shadow-soft);
}

.tcup-sc__card-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

.tcup-sc__card--unlocked .tcup-sc__card-title {
	color: var(--tcup-sc-accent-ink);
}

.tcup-sc__card-title .woocommerce-Price-amount {
	color: var(--tcup-sc-accent-ink);
	white-space: nowrap;
}

.tcup-sc__card-sub {
	margin: 4px 0 0;
	color: var(--tcup-sc-muted);
	font-size: 0.875rem;
	line-height: 1.35;
}

.tcup-sc__card-track {
	margin: 16px 0 26px; /* room for the amounts sitting under the markers */
}

.tcup-sc__card .tcup-sc__track {
	height: 10px;
}

.tcup-sc__card .tcup-sc__tier {
	width: 16px;
	height: 16px;
	border-width: 3px;
}

.tcup-sc__card .tcup-sc__tier-label {
	position: absolute;
	top: 16px;
	left: 50%;
	display: block;
	transform: translateX(-50%);
	color: var(--tcup-sc-muted);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

/*
 * The end markers sit on the track's edges, so a centred label hangs off the
 * card. Align each end label to its own dot instead: the last amount finishes
 * flush with the final dot rather than reaching past it.
 */
.tcup-sc__tier--end .tcup-sc__tier-label {
	left: auto;
	right: 0;
	transform: none;
	text-align: right;
}

.tcup-sc__tier--start .tcup-sc__tier-label {
	left: 0;
	transform: none;
	text-align: left;
}

.tcup-sc__card .tcup-sc__tier--met .tcup-sc__tier-label {
	color: var(--tcup-sc-fg);
}

/* Gifts: a real grid, two up on a phone, four across from tablet. */
.tcup-sc__card-gifts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The card now lives in the checkout's right column, not across the page, so it
 * sizes to its container rather than the viewport: auto-fit keeps four gifts
 * across a wide column and drops to two in a narrow one without a breakpoint
 * guessing which it is in.
 */
.tcup-sc__card-gifts {
	/*
	 * Capped, not 1fr. With only two gifts in a 620px column, 1fr gave each tile
	 * ~280px - a quarter-metre of product photo for a $9.95 planner, which made
	 * the card shout louder than the order it sits above. A max keeps the tiles
	 * the same size whether the tier offers two gifts or six.
	 */
	/*
	 * The cap belongs on the TILE, not the track. auto-fit works out how many
	 * columns fit using the track's MAX, so minmax(108px, 150px) packed by 150
	 * and dropped a 306px phone column to a single gift. With 1fr it packs by the
	 * min, and max-width on the tile keeps them from stretching.
	 */
	/*
	 * Flex, not grid. auto-fit collapses the tracks it does not need and hands
	 * their space to the survivors, so two gifts in a 570px row got a 277px
	 * column each. The tile is capped at 150px, so each sat at the start of its
	 * oversized column with 143px of dead air between them - two tiles thrown
	 * apart rather than a pair. A flex row packs to the content: the cap is
	 * respected, the gap is the gap, and they still grow to fill a phone row.
	 */
	display: flex;
	flex-wrap: wrap;
}

@media screen and (min-width: 640px) {
	.tcup-sc__card-gifts {
		gap: 16px;
	}

	.tcup-sc__card {
		padding: 24px;
	}
}

.tcup-sc__card-gifts > li {
	display: flex;
	flex: 1 1 108px;
	max-width: 150px;
	min-width: 0;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__card-gift {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	width: 100%;
	max-width: 150px;
	min-width: 0;
	padding: 8px 8px 10px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: var(--tcup-sc-radius-card);
	background: var(--tcup-sc-bg);
	color: inherit;
	/* Left, not centred: the names wrap to two lines and centred ragged text
	   is harder to scan down a row of tiles than a common left edge. */
	text-align: left;
	transition: border-color var(--tcup-sc-duration) ease, box-shadow var(--tcup-sc-duration) ease, transform var(--tcup-sc-duration) ease;
}

:is(.tcup-sc, .tcup-sc-inline) button.tcup-sc__card-gift:hover,
:is(.tcup-sc, .tcup-sc-inline) button.tcup-sc__card-gift:focus-visible {
	border-color: var(--tcup-sc-accent);
	background: var(--tcup-sc-bg);
	color: inherit;
	box-shadow: var(--tcup-sc-shadow-lift);
	transform: translateY(-2px);
}

:is(.tcup-sc, .tcup-sc-inline) button.tcup-sc__card-gift:active {
	background: var(--tcup-sc-bg);
	color: inherit;
	transform: translateY(0);
}

.tcup-sc__card-gift-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(var(--tcup-sc-radius-card) - 4px);
}

.tcup-sc__card-gift-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 2.5em;
	margin-top: 8px;
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25;
}

/* The number that makes the offer concrete. */
.tcup-sc__card-gift-worth {
	color: var(--tcup-sc-muted);
	font-size: 0.75rem;
}

.tcup-sc__card-gift-worth .woocommerce-Price-amount {
	font-weight: 600;
}

.tcup-sc__card-gift-pick {
	margin-top: 8px;
	padding: 6px 10px;
	/* The tile's text is left-aligned; the button inside it is not text. */
	text-align: center;
	border: 1px solid var(--tcup-sc-accent);
	border-radius: 999px;
	color: var(--tcup-sc-accent-ink);
	font-size: 0.75rem;
	font-weight: 700;
	transition: background-color var(--tcup-sc-duration) ease, color var(--tcup-sc-duration) ease;
}

button.tcup-sc__card-gift:hover .tcup-sc__card-gift-pick,
button.tcup-sc__card-gift:focus-visible .tcup-sc__card-gift-pick {
	background: var(--tcup-sc-accent);
	color: var(--tcup-sc-accent-fg);
}

/*
 * A gift being added: the others step back and stop taking clicks, and the
 * one pressed shows a spinner - on its Choose button in the checkout and cart
 * rows, over its picture in the drawer's tiles - until the cart comes back.
 */
:is(.tcup-sc__gift-options, .tcup-sc__card-gifts).is-picking > li {
	pointer-events: none;
}

:is(.tcup-sc__gift-options, .tcup-sc__card-gifts).is-picking > li:not(.is-picking) {
	opacity: 0.45;
	transition: opacity var(--tcup-sc-duration) ease;
}

.tcup-sc__card-gift.is-picking .tcup-sc__card-gift-pick {
	position: relative;
	background: var(--tcup-sc-accent);
	color: transparent;
}

.tcup-sc__gift-option.is-picking .tcup-sc__gift-option-media {
	position: relative;
}

.tcup-sc__gift-option.is-picking .tcup-sc__gift-option-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: calc(var(--tcup-sc-radius-card) - 4px);
	background: rgba(255, 255, 255, 0.6);
}

.tcup-sc__card-gift.is-picking .tcup-sc__card-gift-pick::after,
.tcup-sc__gift-option.is-picking .tcup-sc__gift-option-media::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tcup-sc-spin 700ms linear infinite;
}

.tcup-sc__gift-option.is-picking .tcup-sc__gift-option-media::after {
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-width: 3px;
	border-color: color-mix(in srgb, var(--tcup-sc-accent) 25%, transparent);
	border-top-color: var(--tcup-sc-accent);
}

@keyframes tcup-sc-spin {
	to { transform: rotate(360deg); }
}

/* Decided: one line, no selling. */
.tcup-sc__card-done {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tcup-sc__card-tick {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--tcup-sc-tier-met);
	color: #fff;
}

.tcup-sc__card-thumb {
	flex: 0 0 52px;
	width: 52px;
}

.tcup-sc__card-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--tcup-sc-radius-card);
}

.tcup-sc__card-done-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.875rem;
	line-height: 1.3;
}

.tcup-sc__card-done-text span {
	color: var(--tcup-sc-muted);
	font-size: 0.8125rem;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__card-swap {
	flex: 0 0 auto;
	color: var(--tcup-sc-accent-ink);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__card-swap:hover,
:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__card-swap:active {
	background: none;
	color: var(--tcup-sc-accent-hover);
}

/*
 * A chosen gift, and a reward still ahead: the next one under the "added" line,
 * with the track and its callout.
 */
.tcup-sc__card-next {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--tcup-sc-border);
}

.tcup-sc__card-next-title {
	margin: 0;
	color: var(--tcup-sc-fg);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.tcup-sc__card-next-title .woocommerce-Price-amount {
	color: var(--tcup-sc-accent-ink);
	white-space: nowrap;
}

.tcup-sc__card-next .tcup-sc__card-track {
	margin: 14px 0 2px;
}

.tcup-sc__card--chosen .tcup-sc__card-gifts {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--tcup-sc-border);
}

@media screen and (max-width: 639px) {
	.tcup-sc__card-done {
		flex-wrap: wrap;
	}

	/* The name and "added free" line beside the tick and picture, not under them. */
	.tcup-sc__card-done-text {
		flex: 1 1 0;
	}

	/* Specific enough to beat the base rule's flex: 0 0 auto, which kept it in the row. */
	:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__card-swap {
		flex: 1 0 100%;
		text-align: left;
	}

	/*
	 * The footer is fixed furniture, and on a short screen six stacked rows of it
	 * left barely any cart above. Same information, roughly half the height: the
	 * breakdown folds behind the summary line (.tcup-sc__summary), the
	 * secondary actions drop their pill chrome and read as the text links they
	 * always were, and the checkout total sits beside its label instead of
	 * under it.
	 */

	/* Open, it needs the whole width back for the input and Apply button. */
	.tcup-sc__coupon[open] {
		display: block;
		margin-right: 0;
	}

	.tcup-sc__summary {
		margin-bottom: 6px;
		padding-top: 4px;
	}

	/*
	 * Kept as pills, just shorter. Stripping the border turned them into two
	 * underlined phrases floating above a large solid button, which read as
	 * leftover text rather than as the two ways out of the drawer.
	 */
	:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__actions-minor .tcup-sc__btn--small {
		min-height: 34px;
		padding: 4px 10px;
	}

	/*
	 * center, not baseline: with a single flex line, baseline alignment packs the
	 * items to the top of the line box, so the label sat high in a 44px pill with
	 * all the slack underneath it.
	 */
	:is(.tcup-sc, .tcup-sc-inline) .tcup-sc__btn--wide {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.tcup-sc__btn-total {
		font-size: 0.8125rem;
	}

	/*
	 * Phones: the header and footer are fixed, and between them they took well
	 * over a third of the screen, leaving a slot for the items. In the footer,
	 * subtotal, shipping and total keep their own rows, a size smaller and
	 * closer together, and View cart sits beside Checkout. Continue shopping
	 * goes: the close button and the backdrop already do that.
	 */
	.tcup-sc__footer {
		padding: 8px var(--tcup-sc-gap) 10px;
	}

	/* A shorter header; the close button keeps its 40px target. */
	.tcup-sc__header {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.tcup-sc__title {
		font-size: 1.125rem;
	}

	.tcup-sc__totals-row {
		padding: 1px 0;
	}

	.tcup-sc .tcup-sc__actions {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: stretch;
	}

	.tcup-sc .tcup-sc__actions-minor {
		display: contents;
	}

	:is(.tcup-sc) .tcup-sc__actions-minor [data-sc-close] {
		display: none;
	}

	:is(.tcup-sc) .tcup-sc__actions-minor .tcup-sc__btn--small {
		min-height: 46px;
		padding: 4px 14px;
	}

	:is(.tcup-sc) .tcup-sc__btn--wide {
		min-height: 46px;
	}
}

/*
 * The narrowest phones (iPhone SE, 320px): the two footer links wrapped onto
 * a line each and the button's "AUD" fell under its total. Smaller links, and
 * the button keeps just the amount - the currency is on every price above.
 */
@media screen and (max-width: 374px) {
	:is(.tcup-sc) .tcup-sc__coupon {
		margin-right: 6px;
	}

	:is(.tcup-sc) .tcup-sc__shipping {
		margin-right: 0;
	}

	:is(.tcup-sc) .tcup-sc__coupon-toggle,
	:is(.tcup-sc) .tcup-sc__ship-toggle {
		gap: 4px;
		font-size: 0.71875rem;
		letter-spacing: 0;
	}

	:is(.tcup-sc) .tcup-sc__actions-minor .tcup-sc__btn--small {
		padding: 4px 12px;
	}

	.tcup-sc .tcup-sc__btn-total {
		white-space: nowrap;
	}

	.tcup-sc .tcup-sc__btn-currency {
		display: none;
	}
}

/* ------------------------------------------------------- reduced motion -- */

/*
 * Reduced motion asks for less MOVEMENT, not for no feedback. Zeroing every
 * duration made the drawer teleport, which reads as broken rather than calm. So
 * the decorative and repeating things stop outright, the panel stops travelling
 * across the screen, and what remains is a short opacity fade - no translation,
 * nothing looping, but the drawer still visibly arrives.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--tcup-sc-duration: 120ms;
		--tcup-sc-open: 160ms;
		--tcup-sc-close: 120ms;
	}

	/* Decorative and repeating motion: gone. */
	.tcup-sc__track-fill::before,
	.tcup-sc__track-fill.is-progressing::after,
	.tcup-sc__tier.is-unlocked,
	.tcup-sc__tier.is-reached,
	.tcup-sc__item.is-new,
	.tcup-sc__title-count.is-bump,
	.tcup-sc__basket-count.is-bump,
	.tcup-sc__gift[open] .tcup-sc__gift-options > li {
		animation: none !important;
	}

	/* No travel: fade the panel in place instead of sliding it. */
	.tcup-sc__panel {
		transform: none;
		opacity: 0;
		transition: opacity var(--tcup-sc-close) linear;
	}

	.tcup-sc.is-open .tcup-sc__panel {
		transform: none;
		opacity: 1;
		transition: opacity var(--tcup-sc-open) linear;
	}

	/* The blur ramp is motion too; keep the dim, drop the animation of it. */
	.tcup-sc__overlay,
	.tcup-sc.is-open .tcup-sc__overlay {
		transition: opacity var(--tcup-sc-open) linear;
	}

	.tcup-sc__track-fill {
		transition: none;
	}

	.tcup-sc__basket:hover,
	.tcup-sc__basket:active {
		transform: none;
	}

	.tcup-sc__loading-spinner {
		animation: none;
	}
}

/* ------------------------------------------------- product page notice -- */

/*
 * Reward offers above the add-to-cart button - templates/product-notice.php.
 * An aside on a page whose job is the product: a soft panel, one row per
 * offer, no borders fighting each other. A row earns colour only when it
 * changes state - reached, or close.
 */
.tcup-sc-offer {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--tcup-sc-radius-card, 10px);
	background: color-mix(in srgb, var(--tn-secondary, #f5c1c0) 16%, #fff);
	color: var(--tcup-sc-fg, #4c4b4b);
	font-size: 0.875rem;
	line-height: 1.35;
	list-style: none;
}

.tcup-sc-offer__row {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
}

.tcup-sc-offer__row::before {
	display: none; /* The theme's list bullets. */
}

.tcup-sc-offer__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--tcup-sc-accent, #e45e9a);
}

.tcup-sc-offer__tick,
.tcup-sc-offer__row.is-met .tcup-sc-offer__glyph {
	display: none;
}

.tcup-sc-offer__row.is-met .tcup-sc-offer__tick {
	display: block;
}

.tcup-sc-offer__text {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
}

.tcup-sc-offer__state {
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.tcup-sc-offer__state[hidden] {
	display: none;
}

/* Reached: the tick and a green "Unlocked", in the theme's success colours. */
.tcup-sc-offer__row.is-met .tcup-sc-offer__icon {
	color: var(--tn-success-ink, #2a974e);
}

.tcup-sc-offer__row.is-met .tcup-sc-offer__state {
	background: var(--tn-success, #e2f7e9);
	color: var(--tn-success-ink, #2a974e);
}

/* The next one, when it is within reach. */
.tcup-sc-offer__row.is-close .tcup-sc-offer__state {
	background: #fff;
	color: var(--tcup-sc-accent, #e45e9a);
}

.tcup-sc-offer[hidden],
.tcup-sc-offer__row[hidden] {
	display: none !important;
}

/* ------------------------------------------------- shipping dialog -- */

.tcup-sc__scrim--shipping .tcup-sc__scrim-box {
	max-width: 340px;
	padding: 18px 16px 16px;
}

.tcup-sc__scrim-title {
	margin: 0 24px 12px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.tcup-sc__scrim--shipping .tcup-sc__shipping-form {
	margin-top: 0;
}

.tcup-sc__scrim--shipping :is(.tcup-sc__shipping-field select, .tcup-sc__shipping-field input) {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--tcup-sc-border);
	border-radius: 10px;
	background: var(--tcup-sc-bg);
	color: inherit;
	font-size: 1rem; /* under 16px, iPhones zoom the page in on focus */
}

.tcup-sc__scrim--shipping .tcup-sc__shipping-rates {
	margin-top: 0;
}

/* The coupon dialog holds one field; it should not be as tall as the shipping one. */
.tcup-sc__scrim--coupon .tcup-sc__scrim-box {
	max-width: 320px;
	padding: 18px 16px 16px;
}

.tcup-sc__scrim--coupon .tcup-sc__coupon-form {
	margin-top: 0;
}