/*
 * T-Commerce frontend styles
 * Version: 1.0.0
 * Made by Trabsky | https://trabsky.com
 *
 * Everything is scoped under .tc-shop. Typography is inherited from the theme
 * on purpose - no font is loaded by this plugin.
 */

/*
 * Single source for the shop wrapper. These declarations accumulated across
 * releases in five separate blocks; merged here with the later value kept,
 * which is exactly what the cascade resolved to before.
 */
.tc-shop {
	/*
	 * Radius tokens. Overridden inline from settings, because some client sites
	 * are built with square corners and a shop with rounded cards dropped into
	 * them looks like a foreign object.
	 */
	--tc-radius: 1em;
	--tc-radius-sm: 0.6em;
	--tc-radius-xs: 0.4em;
	--tc-radius-pill: 999px;
	--tc-accent: #1343F0;
	--tc-border: #cccccc;
	--tc-surface: #ffffff;
	--tc-muted: #6b7280;
	--tc-gap: 1.5rem;
	font: inherit;
	color: inherit;
	font-variant-numeric: tabular-nums;
	max-width: var(--tc-width, none);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	margin-bottom: 3rem;
}

.tc-shop *,
.tc-shop *::before,
.tc-shop *::after {
	box-sizing: border-box;
}

/* === GRID === */

.tc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tc-gap);
}

@media (min-width: 40em) {
	.tc-shop[data-columns="3"] .tc-grid,
	.tc-shop[data-columns="4"] .tc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 62em) {
	.tc-shop[data-columns="3"] .tc-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.tc-shop[data-columns="4"] .tc-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* === CARD === */

.tc-card {
	display: flex;
	flex-direction: column;
	background: var(--tc-surface);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	overflow: hidden;
}

/*
 * Product imagery is square. The hotel shoots 1:1, but a single rectangular
 * upload would otherwise break alignment across a whole row - so the frame is
 * fixed and the image is cropped to fill it rather than the other way round.
 */
/* Either a link to the product page or, without product pages, a button that
   opens the preview. Both must look identical. */
.tc-card__media {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.tc-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3f4f6;
}

.tc-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.3s ease;
}

.tc-card__media:hover .tc-media__img {
	transform: scale(1.03);
}

.tc-media--placeholder {
	background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #eceef1 10px, #eceef1 20px);
}

.tc-card__zoom {
	position: absolute;
	left: 50%;
	bottom: 0.875rem;
	transform: translate(-50%, 0.5rem);
	padding: 0.375rem 0.875rem;
	border-radius: var(--tc-radius-pill);
	background: rgba(17, 17, 17, 0.82);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.tc-card__media:hover .tc-card__zoom,
.tc-card__media:focus-visible .tc-card__zoom {
	opacity: 1;
	transform: translate(-50%, 0);
}

.tc-card__media:focus-visible {
	outline: 2px solid var(--tc-accent);
	outline-offset: -2px;
}

/* Dialog image keeps the same square frame so the crop matches the card. */
.tc-dialog__media .tc-media {
	border-radius: var(--tc-radius-sm);
	max-width: 13rem;
	margin: 0 auto;
}

.tc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
	gap: 0.5rem;
}

.tc-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	font-weight: 600;
}

.tc-card__titlebtn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.tc-card__titlebtn:hover {
	color: var(--tc-accent);
}

.tc-card__desc {
	color: var(--tc-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
	flex: 1;
}

.tc-card__desc p {
	margin: 0 0 0.5em;
}

/* margin-top:auto pins the footer to the bottom, so prices and buttons line
   up across a row regardless of how long each description is. */
.tc-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 0.875rem;
}

.tc-card__actions {
	display: inline-flex;
	gap: 0.5rem;
}

.tc-shop .tc-btn--sm {
	padding: 0.55em 0.9em;
	font-size: 0.875rem;
}

.tc-price {
	font-weight: 600;
	font-size: 1.125rem;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.tc-price__from {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--tc-muted);
	margin-right: 0.25em;
}

/* === BUTTONS === */

.tc-shop .tc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.25em;
	border: 1px solid transparent;
	border-radius: var(--tc-radius-sm);
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.tc-shop .tc-btn--primary {
	background: var(--tc-accent);
	color: #fff;
}

.tc-shop .tc-btn--primary:hover {
	opacity: 0.88;
}

.tc-shop .tc-btn--ghost {
	background: transparent;
	border-color: var(--tc-border);
	color: inherit;
}

.tc-shop .tc-btn--wide {
	flex: 1;
}

.tc-shop .tc-btn:focus-visible,
.tc-shop .tc-option input:focus-visible {
	outline: 2px solid var(--tc-accent);
	outline-offset: 2px;
}

.tc-shop .tc-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* === DIALOG === */

.tc-shop .tc-dialog {
	width: min(46rem, calc(100vw - 2rem));
	/*
	 * vh first as the fallback: a browser that does not understand dvh drops
	 * the whole declaration, and the dialog would lose its height limit
	 * entirely. The dvh line then wins wherever it is supported - on mobile,
	 * where vh counts the space hidden behind the collapsing toolbar.
	 */
	max-height: min(85vh, 48rem);
	max-height: min(85dvh, 48rem);
	flex-direction: column;

	/*
	 * All four sides, and stated as one shorthand: any rule that zeroes a
	 * single side of this - a trailing-margin cleanup, a theme reset - breaks
	 * the centring silently, because margin:auto only centres when the
	 * opposite side is auto too.
	 */
	margin: auto;
	padding: 0;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	background: var(--tc-surface);
	color: inherit;
	overflow: hidden;
}

.tc-shop .tc-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.tc-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #eceef1;
}

.tc-dialog__head h2 {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.tc-dialog__close {
	background: none;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--tc-muted);
	padding: 0 0.25rem;
}

.tc-dialog__body {
	padding: 1.5rem;
	overflow-y: auto;
	max-height: calc(100vh - 16rem);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}


.tc-prose {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.tc-prose p {
	margin: 0 0 0.75em;
}

.tc-prose ul {
	margin: 0 0 0.75em;
	padding-left: 1.25em;
}

.tc-dialog__foot {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid #eceef1;
	background: #fafbfc;
}

/* === BOX BUILDER === */

.tc-pool {
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	padding: 1rem 1.25rem 1.25rem;
	margin: 0;
}

.tc-pool__legend {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 0 0.5em;
	font-weight: 600;
	font-size: 1rem;
}

.tc-pool__hint {
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--tc-muted);
}

.tc-pool__help {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--tc-muted);
}

.tc-pool__options {
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 34em) {
	.tc-pool__options {
		grid-template-columns: repeat(2, 1fr);
	}
}

.tc-option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: var(--tc-radius-sm);
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.tc-option:has(input:checked) {
	border-color: var(--tc-accent);
	background: color-mix(in srgb, var(--tc-accent) 6%, transparent);
}

.tc-option input {
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--tc-accent);
}

.tc-option__name {
	flex: 1;
}

.tc-option__delta {
	font-size: 0.8125rem;
	color: var(--tc-muted);
	white-space: nowrap;
}

.tc-option input:disabled + .tc-option__name {
	opacity: 0.45;
}

.tc-pool__error {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: #b42318;
}

/* === QTY === */

.tc-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.tc-qty button {
	background: none;
	border: 0;
	width: 2.5rem;
	height: 2.75rem;
	font-size: 1.125rem;
	cursor: pointer;
	color: inherit;
}

.tc-qty input {
	width: 3rem;
	height: 2.75rem;
	border: 0;
	border-left: 1px solid var(--tc-border);
	border-right: 1px solid var(--tc-border);
	text-align: center;
	font: inherit;
	font-weight: 600;
	background: none;
	color: inherit;
	-moz-appearance: textfield;
}

.tc-qty input::-webkit-outer-spin-button,
.tc-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* === CART BAR === */

.tc-cartbar[hidden] {
	display: none;
}

.tc-cartbar {
	position: sticky;
	bottom: 0;
	z-index: 40;
	margin-top: var(--tc-gap);
	background: var(--tc-surface);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
}

.tc-cartbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.875rem 1.25rem;
}

.tc-cartbar__actions {
	display: flex;
	gap: 0.5rem;
}

/* === CART LIST === */

.tc-line {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid #eceef1;
}

.tc-line:last-child {
	border-bottom: 0;
}

.tc-line__main {
	flex: 1;
	min-width: 0;
}

.tc-line__name {
	font-weight: 600;
	font-size: 0.9375rem;
}

.tc-line__opts {
	font-size: 0.8125rem;
	color: var(--tc-muted);
	line-height: 1.45;
	margin-top: 0.25rem;
}

.tc-line__price {
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tc-line__remove {
	background: none;
	border: 0;
	color: var(--tc-muted);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0 0.25rem;
}

.tc-empty {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--tc-muted);
	border: 1px dashed var(--tc-border);
	border-radius: var(--tc-radius);
}

@media (prefers-reduced-motion: reduce) {
	.tc-shop * {
		transition: none !important;
	}
}

/* === CHECKOUT === */

.tc-checkout__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tc-gap);
	align-items: start;
}

@media (min-width: 62em) {
	.tc-checkout__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	}
}

.tc-checkout__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

.tc-checkout__summary,
.tc-checkout__form {
	background: var(--tc-surface);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	padding: 1.5rem;
}

@media (min-width: 62em) {
	.tc-checkout__summary {
		position: sticky;
		top: 1.5rem;
	}
}

.tc-totals {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #eceef1;
}

.tc-totals__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.375rem 0;
	font-size: 0.9375rem;
}

.tc-totals__row dt,
.tc-totals__row dd {
	margin: 0;
}

.tc-totals__row--grand {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid #eceef1;
	font-size: 1.125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tc-block {
	border: 0;
	padding: 0;
	margin: 0 0 1.75rem;
}

.tc-block__title {
	padding: 0;
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tc-muted);
}

.tc-block__desc {
	margin: 0 0 0.875rem;
	font-size: 0.875rem;
	color: var(--tc-muted);
}

.tc-choice {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tc-choice--stack {
	grid-template-columns: 1fr;
}

.tc-choice__item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.875rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: var(--tc-radius-sm);
	cursor: pointer;
	font-size: 0.9375rem;
}

.tc-choice__item[hidden] {
	display: none;
}

.tc-choice__item:has(input:checked) {
	border-color: var(--tc-accent);
	background: color-mix(in srgb, var(--tc-accent) 6%, transparent);
}

.tc-choice__item input {
	margin: 0.2em 0 0;
	accent-color: var(--tc-accent);
	flex-shrink: 0;
}

.tc-choice__item em {
	display: block;
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--tc-muted);
	margin-top: 0.125rem;
}

.tc-note {
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	background: #f7f8fa;
	border-radius: var(--tc-radius-sm);
	font-size: 0.875rem;
	color: var(--tc-muted);
}

.tc-note[hidden] {
	display: none;
}

.tc-checkout .tc-field {
	margin-top: 0.875rem;
}

.tc-checkout .tc-field[hidden] {
	display: none;
}

.tc-checkout .tc-field label {
	display: block;
	margin-bottom: 0.3125rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.tc-checkout .tc-field input,
.tc-checkout .tc-field textarea {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	font: inherit;
	font-size: 0.9375rem;
	background: var(--tc-surface);
	color: inherit;
}

.tc-checkout .tc-field input:focus,
.tc-checkout .tc-field textarea:focus {
	outline: none;
	border-color: var(--tc-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc-accent) 20%, transparent);
}

.tc-field__row {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.tc-field__hint {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	color: var(--tc-muted);
	min-height: 1.2em;
}

.tc-field__hint--ok { color: #1a7f3c; }
.tc-field__hint--error { color: #b42318; }

.tc-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 1.25rem;
}

.tc-consent input {
	margin: 0.2em 0 0;
	accent-color: var(--tc-accent);
	flex-shrink: 0;
}

.tc-errors {
	margin-bottom: 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid #f3c2bd;
	background: #fef3f2;
	border-radius: var(--tc-radius-sm);
	color: #b42318;
	font-size: 0.875rem;
}

.tc-errors ul {
	margin: 0;
	padding-left: 1.125rem;
}

.tc-errors[hidden] { display: none; }

.tc-success {
	padding: 2rem 1.5rem;
	text-align: center;
	border: 1px solid #b7e4c7;
	background: #f0fdf4;
	border-radius: var(--tc-radius);
}

.tc-success[hidden] { display: none; }

.tc-success h3 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.tc-success p {
	margin: 0;
	color: var(--tc-muted);
}

/* Honeypot - hidden from humans and assistive tech, visible to bots. */
.tc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

/* === ORDER STATUS / RECEIPT === */

.tc-receipt {
	max-width: 46rem;
	margin: 0 auto;
	background: var(--tc-surface);
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius);
	padding: 2rem;
}

.tc-receipt__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #eceef1;
}

.tc-receipt__label {
	display: block;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tc-muted);
}

.tc-receipt__number {
	margin: 0.25rem 0 0;
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tc-status {
	padding: 0.375rem 0.75rem;
	border-radius: var(--tc-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	background: #f3f4f6;
	color: #4b5563;
	white-space: nowrap;
}

.tc-status--confirmed,
.tc-status--completed { background: #e7f6ec; color: #1a7f3c; }
.tc-status--cancelled { background: #fef3f2; color: #b42318; }

/* Progress */

.tc-progress {
	display: flex;
	list-style: none;
	margin: 1.75rem 0;
	padding: 0;
	counter-reset: step;
}

.tc-progress__step {
	flex: 1;
	position: relative;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--tc-muted);
}

.tc-progress__step::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: -50%;
	width: 100%;
	height: 2px;
	background: #e5e7eb;
}

.tc-progress__step:first-child::before { display: none; }

.tc-progress__step--done::before,
.tc-progress__step--current::before { background: var(--tc-accent); }

.tc-progress__dot {
	position: relative;
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0 auto 0.5rem;
	border-radius: 50%;
	background: #e5e7eb;
	border: 2px solid var(--tc-surface);
	box-shadow: 0 0 0 2px #e5e7eb;
}

.tc-progress__step--done .tc-progress__dot,
.tc-progress__step--current .tc-progress__dot {
	background: var(--tc-accent);
	box-shadow: 0 0 0 2px var(--tc-accent);
}

.tc-progress__step--current .tc-progress__label {
	color: var(--tc-accent);
	font-weight: 700;
}

.tc-receipt__cancelled {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: #fef3f2;
	border-left: 3px solid #b42318;
	color: #b42318;
	font-weight: 600;
}

/* Items */

.tc-receipt__items {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9375rem;
}

.tc-receipt__items th {
	text-align: left;
	padding: 0 0 0.625rem;
	border-bottom: 1px solid #eceef1;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tc-muted);
	font-weight: 600;
}

.tc-receipt__items td {
	padding: 0.75rem 0;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: top;
}

.tc-receipt__items .tc-right { text-align: right; white-space: nowrap; }

.tc-receipt__opts {
	display: block;
	margin-top: 0.1875rem;
	font-size: 0.8125rem;
	color: var(--tc-muted);
}

.tc-receipt__grand td {
	padding-top: 0.875rem;
	border-top: 1px solid #1a1a1a;
	border-bottom: 0;
	font-size: 1.125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Meta */

.tc-receipt__row {
	display: flex;
	gap: 1rem;
	padding: 0.375rem 0;
	font-size: 0.9375rem;
}

.tc-receipt__key {
	flex: 0 0 9rem;
	color: var(--tc-muted);
}

.tc-receipt__val { flex: 1; }

.tc-receipt__note,
.tc-receipt__panel {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: #f7f8fa;
	border-left: 3px solid var(--tc-border);
	border-radius: 0 var(--tc-radius-sm) var(--tc-radius-sm) 0;
	font-size: 0.9375rem;
}

.tc-receipt__panel h2 {
	margin: 0 0 0.625rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tc-muted);
}

.tc-receipt__panel p { margin: 0; }

.tc-receipt__actions { margin-top: 1.75rem; }

.tc-receipt__disclaimer {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	color: var(--tc-muted);
}

/* Print: strip everything that is not the document itself. */

@media print {
	.tc-noprint,
	header, footer, nav, aside,
	.site-header, .site-footer { display: none !important; }

	.tc-receipt {
		border: 0;
		padding: 0;
		max-width: none;
	}

	.tc-receipt__panel,
	.tc-receipt__note { background: transparent; }

	body { background: #fff !important; }
}


/* === CATEGORY FILTERS === */

.tc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--tc-gap);
}

/* Matched to .tc-layout__btn so both halves of the toolbar read as one control. */
.tc-shop .tc-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.8em;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-pill);
	background: var(--tc-surface);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	color: var(--tc-muted);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tc-shop .tc-filter:hover {
	border-color: var(--tc-accent);
	color: var(--tc-accent);
}

.tc-shop .tc-filter.is-active,
.tc-shop .tc-filter.is-active:hover {
	background: var(--tc-accent);
	border-color: var(--tc-accent);
	color: #fff;
}

.tc-filter__count {
	padding: 0 0.45em;
	border-radius: var(--tc-radius-pill);
	background: rgba(0, 0, 0, 0.07);
	font-size: 0.6875rem;
	font-weight: 600;
}

.tc-filter.is-active .tc-filter__count {
	background: rgba(255, 255, 255, 0.25);
}

.tc-card[hidden] {
	display: none;
}

.tc-noresults {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--tc-muted);
	border: 1px dashed var(--tc-border);
	border-radius: var(--tc-radius);
}

.tc-noresults[hidden] {
	display: none;
}

.tc-dialog__lead {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--tc-muted);
}

/* Toast shown after a quick add, so the click has visible consequence. */

.tc-toast {
	position: fixed;
	left: 50%;
	bottom: 5.5rem;
	transform: translate(-50%, 0.75rem);
	z-index: 60;
	padding: 0.75rem 1.25rem;
	border-radius: var(--tc-radius-pill);
	background: #111;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.tc-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* === SINGLE PRODUCT PAGE === */

.tc-single__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tc-gap);
	align-items: start;
}

@media (min-width: 48em) {
	.tc-single__grid {
		/*
		 * A single --tc-gap (1.5rem) between a full-bleed photo and a column of
		 * text reads as a collision; the two halves need visibly more air than
		 * items inside one column do.
		 */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: calc(var(--tc-gap) * 2);
	}
}

@media (min-width: 75em) {
	.tc-single__grid {
		gap: calc(var(--tc-gap) * 2.5);
	}
}

.tc-single__media .tc-media {
	border-radius: var(--tc-radius);
	border: 1px solid var(--tc-border);
}

.tc-single__lead {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--tc-muted);
}

.tc-single__price {
	font-size: 1.75rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.015em;
}

.tc-single__omnibus {
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	color: var(--tc-muted);
}

.tc-single__note {
	margin: 1.25rem 0 1rem;
	padding: 0.875rem 1.125rem;
	background: #f7f8fa;
	border-radius: var(--tc-radius-sm);
	font-size: 0.9375rem;
	color: var(--tc-muted);
}

.tc-single__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 1rem;
	flex-wrap: wrap;
}

.tc-single__back {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

.tc-single__back a {
	color: var(--tc-muted);
	text-decoration: none;
}

.tc-single__back a:hover {
	color: var(--tc-accent);
}

/* === CART ROWS === */

.tc-line__thumb {
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	border-radius: var(--tc-radius-sm);
	overflow: hidden;
	background: #f3f4f6;
}

.tc-line__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tc-line {
	align-items: center;
}

.tc-line__unit {
	margin-top: 0.125rem;
	font-size: 0.75rem;
	color: var(--tc-muted);
}

.tc-qty--sm {
	flex-shrink: 0;
}

.tc-qty--sm button {
	width: 2rem;
	height: 2.25rem;
	font-size: 1rem;
}

.tc-qty__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.25rem;
	border-left: 1px solid var(--tc-border);
	border-right: 1px solid var(--tc-border);
	font-weight: 600;
	font-size: 0.9375rem;
}

.tc-dialog__foot--cart {
	flex-direction: column;
	align-items: stretch;
	gap: 0.875rem;
}

.tc-cartsum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 1.0625rem;
}

.tc-cartsum strong {
	font-size: 1.25rem;
}

/*
 * The close button inherits theme button styling otherwise - on Lamberton it
 * rendered as a filled red square. Reset it explicitly.
 */
.tc-shop .tc-dialog__close {
	appearance: none;
	-webkit-appearance: none;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--tc-radius-sm);
	background: transparent;
	box-shadow: none;
	color: var(--tc-muted);
	font-size: 1.5rem;
	line-height: 1;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tc-shop .tc-dialog__close:hover,
.tc-shop .tc-dialog__close:focus {
	background: #f3f4f6;
	border-color: var(--tc-border);
	color: #1a1a1a;
	box-shadow: none;
}

@media (max-width: 30em) {
	.tc-line__thumb {
		display: none;
	}

	.tc-line__price {
		font-size: 0.9375rem;
	}
}

/* === SALE PRICE === */

.tc-price--sale {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	color: #b42318;
}

.tc-price__old {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--tc-muted);
	text-decoration: line-through;
}

.tc-price__omnibus {
	flex-basis: 100%;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--tc-muted);
}

.tc-single__price--sale {
	color: #b42318;
}

.tc-single__price .tc-price__old {
	font-size: 1.125rem;
	margin-right: 0.35em;
}

/* === FOOD INFORMATION === */

.tc-foodinfo {
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	padding: 1rem 1.25rem;
}

.tc-foodinfo__title {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tc-muted);
}

.tc-foodinfo__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding: 0.4rem 0;
	font-size: 0.875rem;
	line-height: 1.5;
	border-bottom: 1px solid #f3f4f6;
}

.tc-foodinfo__row:last-child {
	border-bottom: 0;
}

.tc-foodinfo__key {
	flex: 0 0 9rem;
	color: var(--tc-muted);
}

.tc-foodinfo__val {
	flex: 1;
	min-width: 12rem;
}

.tc-foodnote {
	margin-bottom: 1.25rem;
	padding: 0.875rem 1.125rem;
	background: #fffbeb;
	border-left: 3px solid #fbbf24;
	border-radius: 0 var(--tc-radius-sm) var(--tc-radius-sm) 0;
	font-size: 0.875rem;
	line-height: 1.55;
}

.tc-foodnote p {
	margin: 0.5rem 0 0;
	color: var(--tc-muted);
}

@media (max-width: 34em) {
	.tc-foodinfo__key {
		flex-basis: 100%;
	}
}

/* === TRUST BADGES === */

.tc-badges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: var(--tc-gap) 0 0;
	padding: 0;
}

.tc-badges__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	background: var(--tc-surface);
}

.tc-badges__ic {
	flex-shrink: 0;
	color: var(--tc-accent);
	line-height: 0;
	margin-top: 0.125rem;
}

.tc-badges__body strong {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.tc-badges__body span {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--tc-muted);
}

/* === PICKUP ESTIMATE === */

.tc-estimate {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 0.875rem 1.125rem;
	margin-bottom: var(--tc-gap);
	border: 1px solid var(--tc-accent);
	border-radius: var(--tc-radius-sm);
	background: color-mix(in srgb, var(--tc-accent) 5%, transparent);
}

.tc-estimate__ic {
	flex-shrink: 0;
	color: var(--tc-accent);
	line-height: 0;
}

.tc-estimate__body strong {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.tc-estimate__count {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: var(--tc-muted);
}

/* === RATING === */

.tc-stars {
	display: inline-flex;
	gap: 0.05em;
	line-height: 1;
}

.tc-star {
	color: #d1d5db;
	font-size: 0.875rem;
}

.tc-star.is-on {
	color: #f59e0b;
}

.tc-rating {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.375rem;
}

.tc-rating__n {
	font-size: 0.75rem;
	color: var(--tc-muted);
}

/* === REVIEWS === */

.tc-reviews {
	border-top: 1px solid #eceef1;
	padding-top: 1.25rem;
}

.tc-reviews__title {
	margin: 0 0 0.875rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tc-muted);
}

.tc-review {
	padding: 0.75rem 0;
	border-bottom: 1px solid #f3f4f6;
}

.tc-review:last-child {
	border-bottom: 0;
}

.tc-review__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.25rem;
}

.tc-review__author {
	font-size: 0.875rem;
}

.tc-review__verified,
.tc-review__demo {
	padding: 0.1rem 0.5rem;
	border-radius: var(--tc-radius-pill);
	font-size: 0.6875rem;
	font-weight: 600;
}

.tc-review__verified {
	background: #e7f6ec;
	color: #1a7f3c;
}

/* Demo reviews must look obviously different - they are not real. */
.tc-review__demo {
	background: #fff4e0;
	color: #b45309;
}

.tc-review__content {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--tc-muted);
}

/* === INFORMATION BLOCKS === */

.tc-info {
	border-top: 1px solid #eceef1;
	padding-top: 1rem;
}

.tc-info__item {
	border-bottom: 1px solid #f3f4f6;
}

.tc-info__item:last-of-type {
	border-bottom: 0;
}

.tc-info__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

/* Safari still renders the default triangle without this. */
.tc-info__summary::-webkit-details-marker {
	display: none;
}

.tc-info__summary:hover {
	color: var(--tc-accent);
}

.tc-info__chev {
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-right: 0.25rem;
}

.tc-info__item[open] .tc-info__chev {
	transform: rotate(-135deg);
}

.tc-info__body {
	padding: 0 0 0.875rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--tc-muted);
}

.tc-info__body ul {
	margin: 0.5rem 0;
	padding-left: 1.15rem;
	list-style: disc;
}

.tc-info__body li {
	margin-bottom: 0.25rem;
}

.tc-info__body p {
	margin: 0 0 0.5rem;
}

.tc-info__notes {
	margin-top: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px dashed var(--tc-border);
}

.tc-info__note {
	margin: 0 0 0.375rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--tc-muted);
}

.tc-info__note strong {
	font-weight: 400;
}

/* === LAYOUT SWITCHER === */

.tc-layout {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.875rem;
}

.tc-layout__group {
	display: inline-flex;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	overflow: hidden;
	background: var(--tc-surface);
}

.tc-layout__group[hidden] {
	display: none;
}

.tc-shop .tc-layout__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.8em;
	border: 0;
	border-left: 1px solid var(--tc-border);
	background: none;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tc-muted);
	cursor: pointer;
	line-height: 1;
}

.tc-shop .tc-layout__btn:first-child {
	border-left: 0;
}

.tc-shop .tc-layout__btn:hover {
	color: var(--tc-accent);
}

.tc-shop .tc-layout__btn.is-active {
	background: var(--tc-accent);
	color: #fff;
}

.tc-shop .tc-layout__btn--n {
	min-width: 2.25rem;
	justify-content: center;
}

/* Column count comes from the shop element, so the switcher can change it. */
@media (min-width: 62em) {
	.tc-shop[data-columns="3"] .tc-grid[data-view="grid"] { grid-template-columns: repeat(3, 1fr); }
	.tc-shop[data-columns="4"] .tc-grid[data-view="grid"] { grid-template-columns: repeat(4, 1fr); }
}

/* === LIST VIEW === */

.tc-grid[data-view="list"] {
	grid-template-columns: 1fr !important;
}

.tc-grid[data-view="list"] .tc-card {
	flex-direction: row;
	align-items: stretch;
}

.tc-grid[data-view="list"] .tc-card__media {
	flex: 0 0 34%;
	max-width: 14rem;
}

.tc-grid[data-view="list"] .tc-media {
	height: 100%;
	aspect-ratio: auto;
	min-height: 9rem;
}

.tc-grid[data-view="list"] .tc-card__body {
	flex: 1;
}

@media (max-width: 40em) {
	.tc-grid[data-view="list"] .tc-card {
		flex-direction: column;
	}

	.tc-grid[data-view="list"] .tc-card__media {
		flex-basis: auto;
		max-width: none;
	}

	.tc-grid[data-view="list"] .tc-media {
		aspect-ratio: 1 / 1;
		min-height: 0;
	}
}

/* === REVIEWS CAROUSEL === */

.tc-reviews__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.875rem;
}

.tc-reviews__head .tc-reviews__title {
	margin: 0;
}

.tc-reviews__score {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	color: var(--tc-muted);
}

.tc-reviews__score strong {
	color: #1a1a1a;
	font-size: 0.9375rem;
}

.tc-reviews__nav {
	margin-left: auto;
	display: inline-flex;
	gap: 0.25rem;
}

.tc-shop .tc-reviews__nav button {
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	background: var(--tc-surface);
	font-size: 1.125rem;
	line-height: 1;
	color: var(--tc-muted);
	cursor: pointer;
}

.tc-shop .tc-reviews__nav button:hover:not([disabled]) {
	border-color: var(--tc-accent);
	color: var(--tc-accent);
}

.tc-shop .tc-reviews__nav button[disabled] {
	opacity: 0.35;
	cursor: default;
}

.tc-reviews__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.tc-reviews__track::-webkit-scrollbar {
	display: none;
}

.tc-reviews__track .tc-review {
	flex: 0 0 min(20rem, 85%);
	scroll-snap-align: start;
	padding: 0.875rem 1rem;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
}

.tc-rating__demo {
	padding: 0.05rem 0.4rem;
	border-radius: var(--tc-radius-pill);
	background: #fff4e0;
	color: #b45309;
	font-size: 0.625rem;
	font-weight: 600;
}


/* === CATALOG TOOLBAR === */

/*
 * Filters and layout controls share one row. Previously the estimate, the
 * filters and the switcher were three stacked bands that pushed the products
 * themselves below the fold.
 */
.tc-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: var(--tc-gap);
	padding-bottom: 0.875rem;
	border-bottom: 1px solid #eceef1;
}

.tc-toolbar .tc-filters,
.tc-toolbar .tc-layout {
	margin-bottom: 0;
}

.tc-toolbar .tc-filters {
	flex: 1 1 auto;
}

.tc-toolbar .tc-layout {
	flex: 0 0 auto;
}

/* The estimate is a single compact line, not a banner. */
.tc-estimate {
	padding: 0.625rem 0.875rem;
	margin-bottom: 0.875rem;
	font-size: 0.875rem;
}

.tc-estimate__body strong {
	font-size: 0.875rem;
}

@media (max-width: 48em) {
	.tc-toolbar {
		gap: 0.625rem;
	}

	.tc-toolbar .tc-layout {
		width: 100%;
		justify-content: flex-start;
	}

	/* Density control is meaningless on a one-column screen. */
	.tc-layout [data-tc-columns-group] {
		display: none;
	}
}

/* === CHECKOUT STEPS === */

.tc-steps {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var(--tc-gap);
	padding: 0;
	flex-wrap: wrap;
}

.tc-steps__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tc-muted);
	background: var(--tc-surface);
}

.tc-steps__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--tc-radius-pill);
	background: #eef0f2;
	font-size: 0.6875rem;
	font-weight: 700;
}

.tc-steps__item.is-current {
	border-color: var(--tc-accent);
	color: var(--tc-accent);
}

.tc-steps__item.is-current .tc-steps__n {
	background: var(--tc-accent);
	color: #fff;
}

.tc-steps__item.is-done {
	border-color: #b7e4c7;
	color: #1a7f3c;
}

.tc-steps__item.is-done .tc-steps__n {
	background: #1a7f3c;
	color: #fff;
	font-size: 0;
}

/* Checkmark replaces the number once a step validates. */
.tc-steps__item.is-done .tc-steps__n::after {
	content: "\2713";
	font-size: 0.6875rem;
}

@media (max-width: 40em) {
	.tc-steps__label {
		display: none;
	}

	.tc-steps__item {
		padding: 0.4rem 0.5rem;
	}
}


/*
 * Numerals are set tabular throughout: prices in a column that shift by a pixel
 * as digits change look sloppy, and the shop shows a lot of prices at once.
 */

.tc-shop .tc-card__desc,
.tc-shop .tc-prose,
.tc-shop .tc-review__content {
	font-variant-numeric: normal;
}


/* === CART DIALOG WIDTH === */

.tc-shop .tc-cart {
	width: min(34rem, calc(100vw - 2rem));
}

/* === PRODUCT DIALOG WIDTH === */

/*
 * The cart dialog holds a table and earns 46rem. A single product does not:
 * at that width the photo stretched to fill the column and pushed the price
 * and the add button below the fold.
 */
.tc-shop .tc-dialog--product {
	width: min(34rem, calc(100vw - 2rem));
}

.tc-dialog--product .tc-dialog__body {
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.tc-dialog--product .tc-dialog__head {
	padding: 1rem 1.5rem;
}

/* Side by side once there is room, so the image stops dominating. */
@media (min-width: 34rem) {
	.tc-dialog--product .tc-dialog__intro {
		display: flex;
		align-items: flex-start;
		gap: 1.125rem;
	}

	.tc-dialog--product .tc-dialog__media {
		flex: 0 0 11rem;
	}

	.tc-dialog--product .tc-dialog__media .tc-media {
		max-width: none;
	}

	.tc-dialog--product .tc-dialog__lead {
		flex: 1;
		margin: 0;
	}
}

.tc-dialog--product .tc-prose {
	font-size: 0.875rem;
}

.tc-dialog--product .tc-foodinfo {
	padding: 0.875rem 1rem;
}

.tc-dialog--product .tc-foodinfo__key {
	flex-basis: 6.5rem;
}


/* === TOOLBAR: SINGLE ROW === */

/*
 * Filters and layout controls share one line. Previously the switcher sat on
 * its own row above the filters and the two together ate 90px of vertical
 * space before a single product appeared.
 */
.tc-toolbar {
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.75rem;
}

.tc-toolbar .tc-filters {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
}

.tc-toolbar .tc-layout {
	flex: 0 0 auto;
	margin: 0;
}

/* Badges sit directly under the toolbar, so the shop states its case before
   the products rather than after them. */
.tc-badges {
	margin: 0 0 0.875rem;
	gap: 0.5rem;
}

.tc-badges__item {
	padding: 0.625rem 0.875rem;
	gap: 0.625rem;
}

.tc-badges__body strong {
	font-size: 0.875rem;
	font-weight: 600;
}

.tc-badges__body span {
	font-size: 0.75rem;
}

@media (max-width: 62em) {
	.tc-toolbar {
		flex-wrap: wrap;
	}

	.tc-toolbar .tc-layout {
		width: 100%;
		justify-content: flex-start;
	}
}

/* Four reassurance tiles on a phone are four screens of scrolling. */
@media (max-width: 48em) {
	.tc-badges {
		grid-template-columns: repeat(2, 1fr);
	}

	.tc-badges__body span {
		display: none;
	}
}

/* === CHECKOUT: STEPS AS NAVIGATION === */

.tc-stepsbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: var(--tc-gap);
}

.tc-stepsbar .tc-steps {
	margin-bottom: 0;
}

.tc-shop .tc-steps__btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.tc-steps__item {
	padding: 0;
}

.tc-shop .tc-steps__btn {
	padding: 0.5rem 0.875rem;
}

.tc-steps__item:hover {
	border-color: var(--tc-accent);
}

.tc-backlink {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tc-muted);
	text-decoration: none;
}

.tc-backlink:hover {
	color: var(--tc-accent);
}

/* === CHECKOUT: EDITABLE SUMMARY === */

.tc-line {
	align-items: center;
	gap: 0.75rem;
}

.tc-line__qty {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	flex-shrink: 0;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	overflow: hidden;
}

.tc-shop .tc-qtybtn {
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--tc-muted);
	cursor: pointer;
}

.tc-shop .tc-qtybtn:hover {
	background: #f2f3f5;
	color: var(--tc-accent);
}

.tc-line__count {
	min-width: 1.5rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tc-line__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
}

.tc-line__unit {
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--tc-muted);
}

@media (max-width: 40em) {
	.tc-stepsbar {
		gap: 0.625rem;
	}

	.tc-line {
		flex-wrap: wrap;
	}

	.tc-line__main {
		flex-basis: 100%;
	}
}

/* === COMPACT CARD BUTTONS === */

/*
 * Card actions were sized like primary page buttons and dominated the tile,
 * competing with the price for attention. The product is the hero here.
 */
.tc-card__actions .tc-btn {
	padding: 0.45rem 0.85rem;
	font-size: 0.8125rem;
	gap: 0.4em;
}

.tc-card__actions .tc-btn svg {
	flex-shrink: 0;
}

/* === STICKY CART BAR === */

/*
 * The vertical space belongs to .tc-cartbar__inner. Padding the wrapper as
 * well simply stacked the two, which made the bar taller rather than shorter.
 */
.tc-cartbar__inner {
	padding: 0.55rem 1rem;
	gap: 0.75rem;
}

.tc-cartbar__total {
	font-size: 0.9375rem;
}

.tc-shop .tc-btn--sm {
	padding: 0.45rem 0.95rem;
	font-size: 0.8125rem;
	gap: 0.4em;
}

.tc-shop .tc-btn--sm svg {
	flex-shrink: 0;
}

/* Buttons carrying an icon need their content centred as a row. */
.tc-shop .tc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 40em) {
	.tc-cartbar {
		padding: 0.5rem 0.75rem;
	}

	/* On a phone the bag icon alone is unambiguous next to a total. */
	.tc-cartbar .tc-btn--ghost .tc-btn__label {
		display: none;
	}
}


/* === PICKUP ESTIMATE: LIVE COUNTDOWN === */

.tc-estimate__clock {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-left: 0.5em;
	padding: 0.1rem 0.45rem;
	border-radius: var(--tc-radius-xs);
	background: var(--tc-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tc-estimate__deadline {
	font-weight: 600;
}

/* === CARD: CATEGORY BADGE === */

.tc-card__cat {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	padding: 0.2rem 0.55rem;
	border-radius: var(--tc-radius-pill);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	color: #374151;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* The badge is positioned against the media button, which already declares
   position: relative above - kept here only as documentation of the dependency. */

/* === CARD: TIGHTER TYPE === */

/*
 * Card text competed with the price for weight. At four columns the tile is
 * ~260px wide and the earlier sizes left little room for anything else.
 */
.tc-card__title,
.tc-card__titlebtn {
	font-size: 0.9375rem;
	line-height: 1.3;
}

.tc-card__desc {
	font-size: 0.8125rem;
	line-height: 1.45;
}

.tc-card .tc-price {
	font-size: 1rem;
}

.tc-card .tc-price__old {
	font-size: 0.8125rem;
}

.tc-card .tc-rating__n {
	font-size: 0.6875rem;
}

.tc-card .tc-star {
	font-size: 0.8125rem;
}

.tc-card__body {
	gap: 0.4rem;
}

/* === CART DIALOG ROWS === */

/*
 * Closer to a familiar cart: thumbnail, name with its options, unit price,
 * stepper, line total, and a remove control that says what it does.
 */
.tc-cart .tc-line {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto auto;
	grid-template-areas: "thumb main qty price remove";
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid #f3f4f6;
}

.tc-cart .tc-line:last-child {
	border-bottom: 0;
}

.tc-cart .tc-line__thumb {
	grid-area: thumb;
	width: 3rem;
	height: 3rem;
	border-radius: var(--tc-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: #f3f4f6;
}

.tc-cart .tc-line__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tc-cart .tc-line__main {
	grid-area: main;
	min-width: 0;
}

.tc-cart .tc-line__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.tc-cart .tc-line__opts {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--tc-muted);
	margin-top: 0.1rem;
}

.tc-cart .tc-line__unit {
	font-size: 0.75rem;
	color: var(--tc-muted);
	margin-top: 0.1rem;
}

.tc-cart .tc-qty {
	grid-area: qty;
}

.tc-cart .tc-line__price {
	grid-area: price;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tc-shop .tc-cart .tc-line__remove {
	grid-area: remove;
	justify-self: end;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--tc-radius-sm);
	background: none;
	color: #c4c8ce;
	cursor: pointer;
}

/* The word is redundant beside a bin icon in a cart row, but a screen
   reader still needs it - hence visually hidden rather than removed. */
.tc-shop .tc-cart .tc-line__remove span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tc-shop .tc-cart .tc-line__remove:hover {
	background: #fdeceb;
	color: #b42318;
}

.tc-shop .tc-cart .tc-line__remove:hover {
	color: #b42318;
}

/* === CART DIALOG FOOTER === */

.tc-cart .tc-totals__row--grand span small {
	display: block;
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--tc-muted);
	margin-top: 0.1rem;
}

@media (max-width: 34em) {
	.tc-cart .tc-line {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb main remove"
			"thumb qty price";
		gap: 0.4rem 0.625rem;
	}

	.tc-cart .tc-line__price {
		justify-self: end;
	}
}

/* === QUICK VIEW === */

/*
 * The dialog is a buying surface, not an article. Sections get clear
 * separation, the configurator is visually the active part, and the
 * informational accordions recede.
 */
.tc-dialog--product .tc-dialog__body > * + * {
	margin-top: 1.125rem;
}

.tc-dialog--product .tc-dialog__intro {
	padding-bottom: 1rem;
	border-bottom: 1px solid #f0f1f3;
}

.tc-dialog--product .tc-dialog__lead {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tc-dialog--product .tc-prose {
	font-size: 0.875rem;
	line-height: 1.55;
}

.tc-dialog--product .tc-prose ul {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}

.tc-dialog--product .tc-prose li {
	margin-bottom: 0.2rem;
}

/* --- configurator --- */

.tc-dialog--product .tc-pool {
	padding: 0.875rem 1rem;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	background: #fbfbfc;
}

.tc-dialog--product .tc-pool__legend {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.tc-pool__hint {
	padding: 0.1rem 0.45rem;
	border-radius: var(--tc-radius-pill);
	background: rgba(0, 0, 0, 0.06);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--tc-muted);
	white-space: nowrap;
}

.tc-pool__help {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	color: var(--tc-muted);
}

.tc-dialog--product .tc-pool__options {
	margin-top: 0.625rem;
	gap: 0.4rem;
}

/* --- informational sections recede --- */

.tc-dialog--product .tc-foodinfo,
.tc-dialog--product .tc-reviews,
.tc-dialog--product .tc-info {
	font-size: 0.8125rem;
}

.tc-dialog--product .tc-info {
	border-top: 1px solid #f0f1f3;
	padding-top: 0.5rem;
}

.tc-dialog--product .tc-info__summary {
	padding: 0.55rem 0;
	font-size: 0.875rem;
}

.tc-dialog--product .tc-reviews__track .tc-review {
	flex-basis: min(17rem, 88%);
}

/* The footer stays reachable while the body scrolls. */
.tc-dialog--product .tc-dialog__foot {
	position: sticky;
	bottom: 0;
	background: var(--tc-surface);
	border-top: 1px solid #eceef1;
}


/* === BUTTON AND CONTROL ICON ALIGNMENT === */

/*
 * Any button that carries an inline SVG must lay its children out as a
 * centred row. Without this the icon falls to the baseline and renders under
 * the label - which is what happened in the cart and the quick view.
 */
/*
 * Scoped to actual buttons-with-labels. The previous version matched every
 * <button> in the shop, including .tc-card__media - which is a button wrapping
 * the product image. Turning that into an inline-flex box collapsed the photo
 * frame and left the hover label floating over the card.
 */
.tc-shop .tc-btn,
.tc-shop a.tc-btn,
.tc-shop .tc-qtybtn,
.tc-shop .tc-layout__btn,
.tc-shop .tc-filter,
.tc-shop .tc-line__remove,
.tc-shop .tc-reviews__nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
}

.tc-shop .tc-btn svg,
.tc-shop .tc-layout__btn svg,
.tc-shop .tc-line__remove svg {
	flex: 0 0 auto;
	display: block;
}

/* The quantity stepper stays a tight row of three. */
.tc-shop .tc-qty,
.tc-shop .tc-line__qty {
	display: inline-flex;
	align-items: center;
}

/* Carousel arrows are round targets, not text. */
.tc-shop .tc-reviews__nav {
	align-items: center;
}

.tc-shop .tc-reviews__nav button {
	padding: 0;
	line-height: 1;
}

/* === IMAGE PLACEHOLDER === */

/*
 * A product with no photo should look deliberately empty, not broken. The
 * diagonal hatch alone read as a failed image load.
 */
.tc-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background:
		linear-gradient(135deg, #f6f7f8 25%, transparent 25%) -8px 0,
		linear-gradient(225deg, #f6f7f8 25%, transparent 25%) -8px 0,
		linear-gradient(315deg, #f6f7f8 25%, transparent 25%),
		linear-gradient(45deg, #f6f7f8 25%, transparent 25%);
	background-size: 16px 16px;
	background-color: #fafbfc;
	color: #c4c8ce;
}

.tc-media--placeholder svg {
	opacity: 0.85;
}

/* === ADD CONFIRMATION === */

.tc-shop .tc-btn.is-added {
	background: #1a7f3c;
	border-color: #1a7f3c;
	color: #fff;
}

.tc-shop .tc-btn {
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* === BAG COUNT BADGE === */

.tc-bagcount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.3em;
	margin-left: 0.15em;
	border-radius: var(--tc-radius-pill);
	background: var(--tc-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* A square shop keeps a square badge, like every other pill. */
.tc-bagcount.is-bumping {
	animation: tc-bump 0.4s ease;
}

@keyframes tc-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.45); }
	100% { transform: scale(1); }
}

/* Motion is decoration here; the number still changes without it. */
@media (prefers-reduced-motion: reduce) {
	.tc-bagcount.is-bumping {
		animation: none;
	}

	.tc-shop .tc-btn {
		transition: none;
	}
}

/* === BUYER TYPE === */

.tc-choice--buyer {
	margin-bottom: 1rem;
}

.tc-choice--buyer .tc-choice__item {
	padding: 0.6rem 0.875rem;
}

.tc-choice__item[hidden] {
	display: none;
}

.tc-field__label-group {
	margin: 1rem 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tc-muted);
}

.tc-field--narrow {
	flex: 0 0 9rem;
}


/* === CONTENT PANEL === */

/*
 * Optional background behind the text column. Off by default: on a light theme
 * a tinted panel adds nothing, but on a photo-heavy or dark page it is what
 * keeps the copy readable. Corners follow the global radius setting, so the
 * panel cannot disagree with the rest of the shop.
 */
.tc-shop--panel .tc-single__info {
	background: var(--tc-panel-bg, #f8f9fb);
	border-radius: var(--tc-radius);
	padding: 1.5rem;
}

.tc-shop--panel .tc-dialog--product .tc-dialog__body {
	background: var(--tc-panel-bg, #f8f9fb);
}

@media (max-width: 48em) {
	.tc-shop--panel .tc-single__info {
		padding: 1.125rem;
	}
}

/* === CARD HOVER IMAGE === */

/*
 * The second photo sits on top of the first and fades in on hover. Both are
 * in the DOM, so the swap has no loading delay - but the second is lazily
 * loaded, so a visitor who never hovers never pays for it.
 */
.tc-card__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.tc-card__media:hover .tc-card__hover,
.tc-card__media:focus-visible .tc-card__hover {
	opacity: 1;
}

/* Touch devices have no hover; showing a photo that can never change back
   would be worse than showing only the first. */
@media (hover: none) {
	.tc-card__hover {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tc-card__hover {
		transition: none;
	}
}

/* === PRODUCT SHOTS === */

.tc-shots {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.625rem;
	flex-wrap: wrap;
}

.tc-shop .tc-shots__item {
	width: 4rem;
	height: 4rem;
	padding: 0;
	border: 1px solid var(--tc-border);
	border-radius: var(--tc-radius-sm);
	background: none;
	overflow: hidden;
	cursor: pointer;
}

.tc-shop .tc-shots__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tc-shop .tc-shots__item.is-active {
	border-color: var(--tc-accent);
	box-shadow: 0 0 0 1px var(--tc-accent);
}

.tc-shots--dialog .tc-shots__item {
	width: 2.75rem;
	height: 2.75rem;
}

/* === REQUIRED FIELDS === */

.tc-req {
	color: #b42318;
	font-weight: 600;
}

.tc-reqnote {
	margin: -0.25rem 0 0.875rem;
}

/* === DISABLED SUBMIT === */

/*
 * Visibly inert rather than merely unresponsive: a gold button that does
 * nothing when clicked reads as a broken page.
 */
.tc-shop .tc-btn[disabled],
.tc-shop .tc-btn[aria-disabled="true"] {
	background: #e5e7eb;
	border-color: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
	box-shadow: none;
}

/* === UNAVAILABLE LINE === */

.tc-line.is-unavailable {
	background: #fdeceb;
	border-radius: var(--tc-radius-sm);
	box-shadow: inset 0 0 0 1px #f3b9b4;
}

.tc-line.is-unavailable .tc-line__name {
	color: #b42318;
	text-decoration: line-through;
}

/* === ORDER CONFIRMATION === */

.tc-success {
	text-align: center;
	padding: 2rem 1.5rem;
}

.tc-success__total {
	font-size: 1.125rem;
	font-weight: 600;
	color: inherit;
}

.tc-success .tc-btn {
	margin-top: 0.75rem;
}

.tc-checkout__summary[hidden] {
	display: none;
}

/* === CONTENT WIDTH === */

/*
 * Unset by default: the shop fills its container, which is what a theme's
 * layout expects. When --tc-width is provided from settings it becomes a
 * ceiling, centred, so the shop lines up with whichever width the rest of the
 * page uses.
 */

/* === CONTAINMENT === */

/*
 * The border-box rule above covers .tc-shop's descendants but not the wrapper
 * itself, so any padding a theme puts on it was added to the width instead of
 * fitting inside it.
 */

/*
 * Grid and flex items default to min-width:auto, which means they refuse to
 * shrink below their content. One long unbroken word - a product name, a bank
 * account, a URL in a description - then pushes its track wider than the
 * container and the whole row overflows to the right.
 */
.tc-grid > *,
.tc-badges > *,
.tc-single__grid > *,
.tc-checkout__grid > * {
	min-width: 0;
}

.tc-card,
.tc-card__name,
.tc-card__desc,
.tc-badges__item,
/* === BREATHING ROOM BEFORE THE FOOTER === */

/*
 * The shop ended flush against whatever the theme puts next - usually a dark
 * footer, which made the last card look glued to it. The sticky cart bar sits
 * inside this container, so the gap also stops it from touching the footer as
 * the page bottoms out.
 */

@media (max-width: 48em) {
	.tc-shop {
		margin-bottom: 2rem;
	}
}

/*
 * The last block inside the shop should not add its own trailing margin on top
 * of the container's.
 *
 * Dialogs are excluded. A modal <dialog> centres itself with margin:auto on
 * all four sides; zeroing its bottom margin leaves margin-top:auto to absorb
 * every spare pixel, which pins the window to the bottom of the screen. The
 * dialog is usually the last child here, so the rule hit it every time.
 */
.tc-shop > *:last-child:not(dialog) {
	margin-bottom: 0;
}


/* === SPACING AFTER THE PRICE === */

/*
 * The price carries only a hairline bottom margin because the Omnibus note is
 * meant to sit right under it. A product that is not on sale has no such note,
 * so whatever follows landed flush against the price. This restores the same
 * gap the note would have provided.
 */
.tc-single__price + .tc-estimate,
.tc-single__price + .tc-prose,
.tc-single__price + .tc-block,
.tc-single__price + .tc-pools {
	margin-top: 1.25rem;
}

/* === THEME ISOLATION === */

/*
 * Themes and page builders style bare elements globally - Hello Elementor plus
 * Elementor's own typography settings reach h1-h6, legend, dl and table inside
 * our markup. Their selectors carry element specificity, so our single-class
 * rules lose and a small uppercase label renders as a 55px Playfair heading.
 *
 * These rules re-assert our own typography at class+element specificity, which
 * matches or beats what a builder emits. They only restate values already
 * declared for these components; nothing here is new styling.
 */
.tc-shop h1[class^="tc-"],
.tc-shop h2[class^="tc-"],
.tc-shop h3[class^="tc-"],
.tc-shop legend[class^="tc-"] {
	font-family: inherit;
	line-height: 1.3;
	text-shadow: none;
}

.tc-shop h3.tc-foodinfo__title {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tc-muted);
}

.tc-shop h3.tc-card__title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.tc-shop h3.tc-reviews__title,
.tc-shop legend.tc-block__title {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.tc-shop h2.tc-checkout__title {
	font-size: 1.125rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.tc-shop h1.tc-receipt__number {
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -0.01em;
}

/* Lists and tables: builders add their own bullets, spacing and borders. */
/*
 * Strip the theme's bullets and indent only. An earlier version also zeroed
 * the margin, which wiped the spacing these components declare for themselves
 * and left the estimate bar welded to the strip above it.
 */
.tc-shop ul.tc-badges,
.tc-shop ol.tc-steps,
.tc-shop ol.tc-progress {
	list-style: none;
	padding-left: 0;
}

.tc-shop dl.tc-totals {
	margin: 0;
}

.tc-shop table.tc-receipt__items {
	width: 100%;
	border-collapse: collapse;
	font-size: inherit;
}


/* === SPACING AROUND THE ESTIMATE BAR === */

/*
 * The badges strip declares a top margin only, so whatever follows has to
 * bring its own gap. The estimate bar sits between the strip and the grid and
 * previously had a bottom margin but no top one.
 */
.tc-estimate {
	margin-top: var(--tc-gap);
}

/* First thing in the column - nothing above to separate from. */
.tc-shop > .tc-estimate:first-child,
.tc-single__info > .tc-estimate:first-child {
	margin-top: 0;
}

/* === BUTTONS AGAINST THEME STYLING === */

/*
 * Themes style bare <button> and <a class="button"> globally - Hello Elementor
 * paints them dark. Our .tc-shop .tc-btn--primary is two classes, which beats a
 * plain element selector, but not a builder rule that adds an element of its
 * own or reaches for !important. Repeating the declaration with the element in
 * the selector raises us above the common cases.
 */
.tc-shop button.tc-btn--primary,
.tc-shop a.tc-btn--primary {
	background: var(--tc-accent);
	border-color: var(--tc-accent);
	color: #fff;
}

.tc-shop button.tc-btn--primary:hover,
.tc-shop a.tc-btn--primary:hover {
	filter: brightness(0.94);
}

.tc-shop button.tc-btn--ghost,
.tc-shop a.tc-btn--ghost {
	background: transparent;
	color: inherit;
	border-color: var(--tc-border);
}

.tc-shop button.tc-qtybtn {
	background: var(--tc-accent);
	color: #fff;
}

/* Empty thumbnail slot: keeps rows aligned when a line has no picture. */
.tc-line__thumb--empty {
	background: #f3f4f6;
	border-radius: var(--tc-radius-xs);
}


/* === DIALOG LAYOUT === */

/*
 * Head and foot keep their natural height; only the list scrolls. The body
 * previously carried its own viewport-based max-height, which had to be kept
 * in sync with the height of the other two by hand - and was not, so a tall
 * cart pushed the whole dialog past the bottom of the screen.
 */
.tc-shop .tc-dialog__head,
.tc-shop .tc-dialog__foot {
	flex: 0 0 auto;
}

.tc-shop .tc-dialog__body {
	flex: 1 1 auto;
	max-height: none;
	overflow-y: auto;
}

/*
 * Dialog headings carry no class, so the isolation added for the shop's other
 * headings never reached them - the theme rendered them at display size and
 * the head alone ate a third of the dialog.
 */
.tc-shop .tc-dialog__head h2 {
	margin: 0;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

/* === BREADCRUMB === */

.tc-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: var(--tc-muted);
}

.tc-shop a.tc-crumbs__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--tc-muted);
	text-decoration: none;
}

.tc-shop a.tc-crumbs__link:hover {
	color: var(--tc-accent);
	text-decoration: underline;
}

.tc-crumbs__sep {
	opacity: 0.5;
}

.tc-crumbs__current {
	color: inherit;
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 34em) {
	/* On a phone the product's own name is already the page title above. */
	.tc-crumbs__current,
	.tc-crumbs__sep:last-of-type {
		display: none;
	}
}


/* === DIALOG VISIBILITY === */

/*
 * A closed <dialog> is hidden by the browser's own display:none. Setting
 * display unconditionally overrode that, so every product dialog rendered
 * inline in the page. Only an open dialog gets a layout.
 */
.tc-shop .tc-dialog:not([open]) {
	display: none;
}

.tc-shop .tc-dialog[open] {
	display: flex;
}

/* Saved list view, honoured before the script runs. */
.tc-shop[data-pending-view="list"] .tc-grid {
	grid-template-columns: 1fr;
}

/* === PRODUCT COLUMN HEADINGS === */

/*
 * H1 since 2.41.0. Themes size bare h1 globally (Hello Elementor: 2.5rem, kit
 * fonts on top), so the selector carries the element and two classes to win
 * without !important.
 */
.tc-shop h1.tc-single__name,
.tc-shop h2.tc-single__name {
	margin: 0 0 0.5rem;
	font-family: inherit;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

.tc-shop h3.tc-single__proseheading {
	margin: 0 0 0.5rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tc-muted);
}

/* === SPACING BETWEEN REORDERED SECTIONS === */

/*
 * Sections can be put in any order from settings, so none of them can rely on
 * a particular neighbour for its spacing. Every direct child of the text
 * column gets the same gap from whatever precedes it, and each section's own
 * margins stay on top of that only where they are larger.
 */
.tc-single__info > * + * {
	margin-top: 1rem;
}

.tc-single__info > .tc-prose + *,
.tc-single__info > * + .tc-foodinfo,
.tc-single__info > * + .tc-info {
	margin-top: 1.25rem;
}

/* A heading belongs to what follows it, not to what came before. */
.tc-single__info > h3.tc-single__proseheading + .tc-prose {
	margin-top: 0;
}

/* === ORDER TABLE ON NARROW SCREENS === */

/*
 * Three columns of prices do not survive a phone. Below 34em each row becomes
 * a small block: the product name on its own line, then quantity and value as
 * labelled pairs. The labels come from data-label, so the header can be
 * dropped without losing what the numbers mean.
 */
@media (max-width: 34em) {
	.tc-shop .tc-receipt__items,
	.tc-shop .tc-receipt__items tbody,
	.tc-shop .tc-receipt__items tfoot,
	.tc-shop .tc-receipt__items tr,
	.tc-shop .tc-receipt__items td {
		display: block;
		width: auto;
	}

	.tc-shop .tc-receipt__items thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.tc-shop .tc-receipt__items tbody tr {
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--tc-border);
	}

	.tc-shop .tc-receipt__items td {
		padding: 0;
		text-align: left;
	}

	.tc-shop .tc-receipt__items td[data-label] {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 0.25rem;
		font-size: 0.9375rem;
	}

	.tc-shop .tc-receipt__items td[data-label]::before {
		content: attr(data-label);
		color: var(--tc-muted);
	}

	.tc-shop .tc-receipt__items tfoot tr {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.5rem 0;
	}

	.tc-shop .tc-receipt__items tfoot td {
		text-align: right;
	}

	.tc-shop .tc-receipt__items tfoot td:first-child {
		text-align: left;
		color: var(--tc-muted);
	}
}

/* === PRODUCT DESCRIPTION SIZE === */

/*
 * 14px. Stated on the paragraphs and list items too, not only on the wrapper:
 * a theme that sizes bare p and li would otherwise win over an inherited value,
 * and the composition lists are the bulk of what a box description contains.
 */
.tc-shop .tc-prose,
.tc-shop .tc-prose p,
.tc-shop .tc-prose li,
.tc-shop .tc-prose td {
	font-size: 0.875rem;
}


/* === PRODUCT COLUMN ORDER (2.41.0) === */

/*
 * Name -> date -> lead -> description -> price -> buy. The lead used to be
 * followed by the price and carried a bottom margin for it; the description
 * now follows and the shared gap rule handles the spacing.
 */
.tc-single__info > .tc-single__lead {
	margin-bottom: 0;
}

.tc-single__info > .tc-single__name + .tc-estimate {
	margin-top: 0.75rem;
}

.tc-single__info > .tc-prose + .tc-single__price,
.tc-single__info > .tc-single__lead + .tc-single__price,
.tc-single__info > .tc-rating + .tc-single__price {
	margin-top: 1.25rem;
}

.tc-single__info > .tc-single__price + .tc-single__actions {
	margin-top: 1rem;
}


/* === FIELD-LEVEL VALIDATION (2.42.0) === */

/*
 * Shown as the form is filled in, next to the field it concerns. The summary
 * box above the button stays: it carries what only the server can decide,
 * such as the delivery area or a sold-out box.
 */
.tc-field__error {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #b42318;
}

.tc-field__error:empty {
	display: none;
}

.tc-checkout .tc-field--invalid input,
.tc-checkout .tc-field--invalid select,
.tc-checkout .tc-field--invalid textarea {
	border-color: #b42318;
}

/* Focus still wins - the field being corrected should not look rejected. */
.tc-checkout .tc-field--invalid input:focus,
.tc-checkout .tc-field--invalid select:focus,
.tc-checkout .tc-field--invalid textarea:focus {
	border-color: var(--tc-accent, #b42318);
}


/* === PAYMENT METHODS WITH LOGOS (2.47.0) === */

/*
 * Taller rows, radio - text - logos, the way payment pages lay them out.
 * Flat on purpose: no shadow, the border carries the shape and the selected
 * state stays the accent border and tint from .tc-choice__item.
 */
.tc-choice__item.tc-pay {
	align-items: center;
	gap: 0.875rem;
	min-height: 4.25rem;
	padding: 1rem 1.25rem;
	background: #ffffff;
}

.tc-pay input {
	margin: 0;
	width: 1.125rem;
	height: 1.125rem;
}

.tc-pay__text {
	flex: 1 1 12rem;
	min-width: 0;
}

.tc-pay__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.375rem;
	margin-left: auto;
}

.tc-pay__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2rem;
	min-width: 2.75rem;
	padding: 0.25rem 0.4375rem;
	background: #ffffff;
	border: 1px solid #d9dbe0;
	border-radius: 0.375rem;
	box-sizing: border-box;
}

.tc-pay__logo img,
.tc-pay__img {
	display: block;
	width: auto;
	height: auto;
	max-height: 1.375rem;
	max-width: 4.5rem;
	object-fit: contain;
}

.tc-pay__icon {
	display: inline-flex;
	margin-left: auto;
	color: var(--tc-accent);
	flex-shrink: 0;
}

.tc-pay__icon svg {
	width: 1.625rem;
	height: 1.625rem;
}

/* Narrow screens: logos drop under the name instead of squeezing it. */
@media (max-width: 480px) {
	.tc-choice__item.tc-pay {
		flex-wrap: wrap;
	}

	.tc-pay__logos {
		flex-basis: 100%;
		justify-content: flex-start;
		margin-left: 2rem;
	}
}