/*
Theme Name: Tres Soles
Theme URI: https://tressolescafe.com
Description: Tres Soles Café — child theme of Storefront. Brand colors and a tap-friendly ordering layout.
Author: Tres Soles Café
Template: storefront
Version: 1.0
*/

:root {
	--ts-cream:      #FAEEE3;
	--ts-cream-deep: #F3E1D2;
	--ts-card:       #FFF9F2;
	--ts-terracotta: #C05E2E;
	--ts-terracotta-dark: #A44D22;
	--ts-brown:      #3E2A1E;
	--ts-brown-soft: #6B5344;
	--ts-olive:      #6F7A46;
	--ts-rule:       #DFC3A8;
	--ts-gap: 24px;
	--ts-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}

body,
body.woocommerce,
.site {
	background-color: var(--ts-cream);
	color: var(--ts-brown-soft);
	font-family: var(--ts-serif);
}

h1, h2, h3, h4,
.site-title,
.product_title {
	font-family: var(--ts-serif);
	color: var(--ts-brown);
	letter-spacing: 0.01em;
}

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

.site-header {
	background-color: var(--ts-cream) !important;
	border-bottom: 1px solid var(--ts-rule);
	padding-bottom: 1em;
}

.site-header .site-branding .site-title a {
	color: var(--ts-brown);
	font-size: 1.6em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: var(--ts-brown);
	font-size: 0.95em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.main-navigation ul.menu > li > a:hover {
	color: var(--ts-terracotta);
}

/* Cart total in the header stays visible rather than hiding behind a toggle. */
.site-header-cart .cart-contents {
	color: var(--ts-brown);
	font-weight: bold;
}

/* --------------------------------------------------------------- the menu */

.ts-menu-intro {
	text-align: center;
	padding: 2.5em 1em 1.5em;
}

.ts-menu-kicker {
	color: var(--ts-terracotta);
	text-transform: uppercase;
	letter-spacing: 0.34em;
	font-size: 0.78em;
	margin-bottom: 0.6em;
}

.ts-menu-title {
	font-size: 2.6em;
	margin: 0 0 0.3em;
	color: var(--ts-brown);
}

.ts-menu-sub {
	color: var(--ts-brown-soft);
	font-size: 1.05em;
	margin: 0;
}

/* Section rules echo the printed menu: centred label between dotted lines. */
.ts-section-head {
	display: flex;
	align-items: center;
	gap: 1.1em;
	margin: 2.6em 0 1.6em;
}

.ts-section-head::before,
.ts-section-head::after {
	content: "";
	flex: 1;
	border-top: 2px dotted var(--ts-rule);
}

.ts-section-head span {
	color: var(--ts-terracotta);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 1.35em;
	white-space: nowrap;
}

.ts-section-head--matcha span {
	color: var(--ts-olive);
}

.ts-menu-note {
	text-align: center;
	margin: 3em 0 1em;
	padding-top: 1.6em;
	border-top: 2px dotted var(--ts-rule);
	color: var(--ts-brown-soft);
	font-size: 0.95em;
}

.ts-menu-note .ts-allergen {
	font-size: 0.85em;
	color: #8A6A55;
	margin-top: 0.5em;
}

/* ------------------------------------------------------------ drink cards */

/* Flex instead of Storefront's floats so a short final row centres
   rather than hanging off to the left. */
.woocommerce ul.products,
ul.products {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	/* Fixed px gap so the card width calc below is exact. Mixing em here
	   overflowed the row by a fraction of a pixel and dropped 3 cards to 2. */
	gap: var(--ts-gap);
	margin: 0 0 1em;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	display: none !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	width: calc((100% - 2 * var(--ts-gap)) / 3) !important;
	background: var(--ts-card);
	border: 1px solid var(--ts-rule);
	border-radius: 14px;
	padding: 1.4em 1.2em 1.5em;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 1px 2px rgba(62, 42, 30, 0.05);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(62, 42, 30, 0.12);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.22em !important;
	color: var(--ts-brown);
	padding: 0 0 0.35em !important;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	color: var(--ts-terracotta) !important;
	font-size: 1.02em;
	display: block;
	margin-bottom: 1em;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.5;
}

/* Placeholder image is noise when there are no drink photos yet. */
.woocommerce ul.products li.product img.woocommerce-placeholder {
	display: none;
}

/* ---------------------------------------------------------------- buttons */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--ts-terracotta);
	color: #FFF8F0;
	border-radius: 999px;
	padding: 0.85em 1.6em;
	font-family: var(--ts-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.86em;
	border: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--ts-terracotta-dark);
	color: #FFF8F0;
}

.woocommerce ul.products li.product .button {
	width: 100%;
	display: block;
}

/* ----------------------------------------------- variation option buttons */

/* The active plugin is TA Variation Swatches (.tawcvs-*). Its default
   "circle" shape gives fixed-diameter chips that longer labels overflow,
   which is what made the options look like they were overlapping. */
.tawcvs-swatches {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0 0 0.3em !important;
	padding: 0 !important;
}

.tawcvs-swatches .swatch-item-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex;
}

.tawcvs-swatches .swatch {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 44px;
	margin: 0 !important;
	padding: 0 1.2em !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--ts-rule) !important;
	background: var(--ts-card) !important;
	color: var(--ts-brown) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-family: var(--ts-serif);
	font-size: 0.95em;
	line-height: 1.25 !important;
	text-indent: 0 !important;
	white-space: nowrap;
	box-shadow: none !important;
	outline: none !important;
	opacity: 1 !important;
	transition: background 0.12s ease, border-color 0.12s ease;
}

/* The plugin's shape classes are more specific than the rule above, and
   "circle" resolves to border-radius:50%, which on a wide chip renders as a
   squashed ellipse. Force a proper pill for every shape setting. */
.tawcvs-swatches .swatch.swatch-shape-circle,
.tawcvs-swatches .swatch.swatch-shape-rounded,
.tawcvs-swatches .swatch.swatch-shape-square,
.tawcvs-swatches .swatch-item-wrapper .swatch {
	border-radius: 999px !important;
}

.tawcvs-swatches .swatch::before,
.tawcvs-swatches .swatch::after {
	display: none !important;
}

.tawcvs-swatches .swatch:hover {
	border-color: var(--ts-terracotta) !important;
}

/* Selected reads as a solid filled chip, not an outline. */
.tawcvs-swatches .swatch.selected {
	background: var(--ts-brown) !important;
	border-color: var(--ts-brown) !important;
	color: #FFF8F0 !important;
	font-weight: 700;
	box-shadow: none !important;
	outline: none !important;
}

.tawcvs-swatches .swatch:focus-visible {
	outline: 2px solid var(--ts-terracotta) !important;
	outline-offset: 2px;
}

.tawcvs-swatches .swatch.disabled {
	opacity: 0.35 !important;
	text-decoration: line-through;
}

/* ---- matcha drinks answer in green rather than brown ---- */

.ts-matcha .tawcvs-swatches .swatch:hover {
	border-color: var(--ts-olive) !important;
}

.ts-matcha .tawcvs-swatches .swatch.selected {
	background: var(--ts-olive) !important;
	border-color: var(--ts-olive) !important;
	color: #FFF8F0 !important;
}

.ts-matcha .woocommerce div.product form.cart .variations label,
.ts-matcha .woocommerce div.product .product_title {
	color: var(--ts-olive);
}

.ts-matcha .ts-product-note {
	border-left-color: var(--ts-olive);
}

.ts-matcha .woocommerce div.product p.price,
.ts-matcha .woocommerce div.product .woocommerce-variation-price .price {
	color: var(--ts-olive);
}

.ts-matcha .woocommerce div.product form.cart .button,
.ts-matcha .woocommerce button.button.alt {
	background-color: var(--ts-olive);
}

.ts-matcha .woocommerce div.product form.cart .button:hover {
	background-color: #5C6639;
}

/* The plugin scopes its own styles as
   `.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch…`,
   which outranks the shorter selectors above no matter what !important says.
   These overrides deliberately mirror that depth. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-rounded,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-square {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 44px !important;
	padding: 0 1.2em !important;
	margin: 0 !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--ts-rule) !important;
	background: var(--ts-card) !important;
	color: var(--ts-brown) !important;
	line-height: 1.25 !important;
	box-shadow: none !important;
}

.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch:hover {
	border-color: var(--ts-terracotta) !important;
	background: var(--ts-card) !important;
}

/* The repeated .selected is deliberate — it lifts specificity above the
   plugin's own selected-state rules without needing a deeper ancestor path. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.selected.selected.selected {
	background: var(--ts-brown) !important;
	border-color: var(--ts-brown) !important;
	color: #FFF8F0 !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.selected.selected.selected .text,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.selected.selected.selected span {
	color: #FFF8F0 !important;
	font-weight: 700 !important;
}

/* NB: WooCommerce puts `.woocommerce` on <body>, so `body.ts-matcha .woocommerce`
   would look for a descendant that does not exist. Chain the classes instead. */
body.ts-matcha div.product .cart.variations_form .tawcvs-swatches .swatch.selected.selected.selected {
	background: var(--ts-olive) !important;
	border-color: var(--ts-olive) !important;
	color: #FFF8F0 !important;
}

body.ts-matcha div.product .cart.variations_form .tawcvs-swatches .swatch.selected.selected.selected .text,
body.ts-matcha div.product .cart.variations_form .tawcvs-swatches .swatch.selected.selected.selected span {
	color: #FFF8F0 !important;
	font-weight: 700 !important;
}

body.ts-matcha div.product .cart.variations_form .tawcvs-swatches .swatch:hover {
	border-color: var(--ts-olive) !important;
}

/* ------------------------------------------------- notes above the button */

.ts-product-note {
	background: var(--ts-cream-deep);
	border-left: 4px solid var(--ts-terracotta);
	border-radius: 8px;
	padding: 0.9em 1.1em;
	margin: 0 0 1.4em;
	font-size: 0.95em;
	color: var(--ts-brown);
}

.ts-product-note strong {
	color: var(--ts-terracotta-dark);
}

/* --------------------------------------------------- image placeholder box */

/* The stock grey placeholder clashes with the cream page. Until there are
   real drink photos, drop the frame entirely and let the drink details use
   the full width. WooCommerce marks empty galleries for us, so this undoes
   itself the moment a photo is uploaded. */
img.woocommerce-placeholder {
	display: none !important;
}

.woocommerce div.product .woocommerce-product-gallery--without-images {
	display: none !important;
}

.ts-no-photo .woocommerce div.product div.summary,
.ts-no-photo .woocommerce div.product .summary.entry-summary {
	width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	max-width: 760px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Prev/next product thumbnails are empty boxes without photos. */
.storefront-product-pagination {
	display: none !important;
}

.woocommerce div.product form.cart .variations label {
	font-family: var(--ts-serif);
	color: var(--ts-brown);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.82em;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 1.5em;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	width: 100%;
	padding: 0 0 0.5em;
	border: none;
}

.woocommerce div.product .woocommerce-variation-price .price {
	color: var(--ts-terracotta);
	font-size: 1.5em;
}

/* ------------------------------------------------------------ single drink */

.woocommerce div.product .product_title {
	font-size: 2.1em;
}

.woocommerce div.product p.price {
	color: var(--ts-terracotta);
	font-size: 1.35em;
}

.woocommerce div.product .quantity input.qty {
	border: 1.5px solid var(--ts-rule);
	border-radius: 10px;
	background: var(--ts-card);
	height: 46px;
}

/* Allergen note on the Mazapán page should read as a warning, not body copy. */
.woocommerce-product-details__short-description + p strong,
.woocommerce-Tabs-panel--description p strong {
	color: var(--ts-terracotta-dark);
}

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

.site-footer {
	background-color: var(--ts-brown) !important;
	color: #E8D5C4;
}

.site-footer a {
	color: #E0A176;
}

/* --------------------------------------------------------------- handheld */

/* Storefront's bottom bar is the permanent cart access on phones. */
.storefront-handheld-footer-bar {
	background-color: var(--ts-brown);
	border-top: none;
}

.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.cart > a {
	color: var(--ts-cream);
}

.storefront-handheld-footer-bar ul li.cart > a .count {
	background-color: var(--ts-terracotta);
	color: #FFF8F0;
	border-color: var(--ts-terracotta);
}

@media (max-width: 767px) {
	.ts-menu-title {
		font-size: 2em;
	}

	.ts-section-head span {
		font-size: 1.1em;
		letter-spacing: 0.22em;
	}

	/* Two drinks across reads better than one tall column. */
	.woocommerce ul.products,
	ul.products {
		gap: 14px;
	}

	.woocommerce ul.products li.product,
	ul.products li.product {
		width: calc((100% - 14px) / 2) !important;
		padding: 1.1em 0.8em 1.2em;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 1.02em !important;
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
	.woocommerce div.product div.images .woocommerce-product-gallery__image {
		min-height: 180px;
	}

	/* Room for the fixed bottom bar. */
	.site-content {
		padding-bottom: 4.5em;
	}
}

/* ======================================================================
   Round two of feedback
   ====================================================================== */

/* The front page already says "Order your coffee" — the page's own "Menu"
   heading on top of a nav item called Menu is one Menu too many. */
body.home h1.entry-title,
body.home .page .entry-header {
	display: none !important;
}

/* Matcha cards in the listing carry product_cat-matcha, so their button can
   go green without needing the single-product body class. */
.woocommerce ul.products li.product.product_cat-matcha .button,
ul.products li.product.product_cat-matcha .button {
	background-color: var(--ts-olive) !important;
	color: #FAEEE3 !important;
}

.woocommerce ul.products li.product.product_cat-matcha .button:hover,
ul.products li.product.product_cat-matcha .button:hover {
	background-color: #5C6639 !important;
}

.woocommerce ul.products li.product.product_cat-matcha .price {
	color: var(--ts-olive) !important;
}

/* The "double circle" was the plugin drawing its own ring as a ::before on
   the selected chip. Ours is the filled pill, so remove theirs. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch::before,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch::after,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.selected::before,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.selected::after,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.selected.swatch-label::before,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.selected.swatch-label::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ---- header cart dropdown ---- */

.site-header-cart .widget_shopping_cart,
.site-header-cart .cart_list,
.site-header-cart .widget_shopping_cart_content {
	background-color: var(--ts-brown) !important;
	color: var(--ts-cream) !important;
	border: none;
	border-radius: 10px;
}

.site-header-cart .widget_shopping_cart a,
.site-header-cart .widget_shopping_cart .quantity,
.site-header-cart .widget_shopping_cart .variation,
.site-header-cart .widget_shopping_cart .variation dt,
.site-header-cart .widget_shopping_cart .variation dd,
.site-header-cart .widget_shopping_cart .variation dd p,
.site-header-cart .widget_shopping_cart .total,
.site-header-cart .widget_shopping_cart .total strong,
.site-header-cart .widget_shopping_cart li {
	color: var(--ts-cream) !important;
}

.site-header-cart .widget_shopping_cart .total {
	border-top: 1px solid rgba(250, 238, 227, 0.25);
}

.site-header-cart .widget_shopping_cart li {
	border-bottom: 1px solid rgba(250, 238, 227, 0.15);
}

.site-header-cart .widget_shopping_cart .buttons a {
	background-color: var(--ts-terracotta) !important;
	color: #FFF8F0 !important;
}

.site-header-cart .widget_shopping_cart .buttons a.checkout {
	background-color: var(--ts-cream) !important;
	color: var(--ts-brown) !important;
}

/* ---- checkout call-to-action follows what is in the cart ---- */

/* Default (any coffee in the basket, or a mixed basket): brown. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button {
	background-color: var(--ts-terracotta) !important;
	color: #FFF8F0 !important;
	border-radius: 999px !important;
	font-family: var(--ts-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--ts-terracotta-dark) !important;
}

/* Matcha-only basket: green all the way through. */
body.ts-cart-matcha .woocommerce .wc-proceed-to-checkout a.checkout-button,
body.ts-cart-matcha .wc-block-components-checkout-place-order-button,
body.ts-cart-matcha .wp-block-woocommerce-checkout .wc-block-components-button {
	background-color: var(--ts-olive) !important;
	color: #FAEEE3 !important;
}

body.ts-cart-matcha .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.ts-cart-matcha .wc-block-components-checkout-place-order-button:hover {
	background-color: #5C6639 !important;
}

/* The cart and checkout are block-based, so the classic .checkout-button
   selector never matches. These are the real handles. */
.wc-block-cart__submit-button,
.wc-block-components-button.contained,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	background-color: var(--ts-terracotta) !important;
	color: #FFF8F0 !important;
	border-radius: 999px !important;
	font-family: var(--ts-serif) !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--ts-terracotta-dark) !important;
}

body.ts-cart-matcha .wc-block-cart__submit-button,
body.ts-cart-matcha .wc-block-components-button.contained,
body.ts-cart-matcha .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	background-color: var(--ts-olive) !important;
	color: #FAEEE3 !important;
}

body.ts-cart-matcha .wc-block-cart__submit-button:hover,
body.ts-cart-matcha .wc-block-components-button.contained:hover,
body.ts-cart-matcha .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
	background-color: #5C6639 !important;
}

/* Emblem masthead on the menu page. */
.ts-menu-emblem {
	display: block;
	margin: 0 auto 1.2em;
	max-width: 340px;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.ts-menu-emblem {
		max-width: 220px;
		margin-bottom: 0.8em;
	}
}

/* The header wordmark is a wide transparent PNG; give it room to breathe. */
.site-header .custom-logo-link img,
.site-header .custom-logo {
	max-width: 260px;
	height: auto;
}

@media (max-width: 767px) {
	.site-header .custom-logo-link img,
	.site-header .custom-logo {
		max-width: 190px;
	}
}

/* ---- About Us page ---- */

.ts-about {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5em 1em 2em;
	text-align: center;
}

.ts-about-body {
	text-align: left;
	margin: 1.8em 0 0;
}

.ts-about-body p {
	margin: 0 0 1.15em;
	line-height: 1.75;
	font-size: 1.04em;
	color: var(--ts-brown-soft);
}

/* Opening line carries the greeting, so give it a little more presence. */
.ts-about-body p:first-child {
	font-size: 1.16em;
	color: var(--ts-brown);
}

.ts-about-body p:last-child {
	margin-top: 1.6em;
	padding-top: 1.4em;
	border-top: 2px dotted var(--ts-rule);
	text-align: center;
	font-style: italic;
	color: var(--ts-brown);
}

.ts-about-cta {
	margin: 2.2em 0 0;
}

@media (max-width: 767px) {
	.ts-about { padding: 1.5em 0.5em; }
	.ts-about-body p { font-size: 1em; }
}

/* ======================================================================
   Round three of feedback
   ====================================================================== */

/* ---- 2. active nav item ---------------------------------------------- */

/* Non-active items sit back; the current page is full brown, bold, and
   underlined so it's obvious which tab you're on. */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	color: var(--ts-brown-soft) !important;
	padding-bottom: .25em;
	border-bottom: 2px solid transparent;
}

.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation ul.menu > li.current-menu-parent > a,
.main-navigation ul.menu > li.current-menu-ancestor > a,
.main-navigation ul.nav-menu > li.current-menu-item > a,
.main-navigation ul.nav-menu > li.current_page_item > a {
	color: var(--ts-brown) !important;
	font-weight: 700;
	border-bottom-color: var(--ts-terracotta);
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
	color: var(--ts-brown) !important;
}

/* ---- 1. header cart dropdown ----------------------------------------- */

/* The subtotal row and buttons were inheriting Storefront's light panel,
   so half the dropdown was cream-on-cream and unreadable. Make the whole
   thing one brown panel with deliberate contrast. */
.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart_content,
.site-header-cart .widget_shopping_cart .cart_list,
.site-header-cart .widget_shopping_cart .total,
.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .mini_cart_item {
	background-color: var(--ts-brown) !important;
	color: var(--ts-cream) !important;
	border-radius: 0;
}

.site-header-cart .widget_shopping_cart {
	border: 1px solid #2A1B12;
	border-radius: 12px;
	overflow: hidden;
	padding: .4em .9em .9em;
	box-shadow: 0 10px 28px rgba(62, 42, 30, .28);
}

.site-header-cart .widget_shopping_cart a,
.site-header-cart .widget_shopping_cart span,
.site-header-cart .widget_shopping_cart dt,
.site-header-cart .widget_shopping_cart dd,
.site-header-cart .widget_shopping_cart p,
.site-header-cart .widget_shopping_cart .quantity,
.site-header-cart .widget_shopping_cart .variation * {
	color: var(--ts-cream) !important;
}

/* Option labels inside the mini cart: dim the label, keep the value bright. */
.site-header-cart .widget_shopping_cart .variation dt {
	color: #C9AE99 !important;
	font-weight: 600;
}

.site-header-cart .widget_shopping_cart .total {
	border-top: 1px solid rgba(250, 238, 227, .28) !important;
	padding-top: .7em;
	margin-top: .3em;
	font-size: 1.05em;
}

.site-header-cart .widget_shopping_cart .total strong,
.site-header-cart .widget_shopping_cart .total .amount {
	color: #FFF8F0 !important;
	font-weight: 700;
}

.site-header-cart .widget_shopping_cart .mini_cart_item {
	border-bottom: 1px solid rgba(250, 238, 227, .15) !important;
}

/* Remove ("×") link needs to read as secondary, not as body text. */
.site-header-cart .widget_shopping_cart a.remove,
.site-header-cart .widget_shopping_cart a.remove_from_cart_button {
	color: #E0A176 !important;
	background: transparent !important;
}

.site-header-cart .widget_shopping_cart .buttons {
	display: flex;
	gap: .5em;
	flex-direction: column;
	margin: .8em 0 0 !important;
	padding: 0 !important;
}

.site-header-cart .widget_shopping_cart .buttons a {
	margin: 0 !important;
	text-align: center;
	background-color: var(--ts-terracotta) !important;
	color: #FFF8F0 !important;
}

.site-header-cart .widget_shopping_cart .buttons a.checkout {
	background-color: transparent !important;
	color: var(--ts-cream) !important;
	border: 1.5px solid rgba(250, 238, 227, .55) !important;
}

.site-header-cart .widget_shopping_cart .buttons a.checkout:hover {
	background-color: rgba(250, 238, 227, .12) !important;
}

/* ---- 3. bigger emblem on the menu page ------------------------------- */

/* The "TRES SOLES CAFÉ" line above the heading was a CSS element, not part
   of the image — no cropping needed, just don't render it here. Kept on the
   About page, where it reads as "Our story". */
.ts-menu-intro .ts-menu-kicker {
	display: none;
}

/* Match the width of the drink grid below it. */
.ts-menu-intro .ts-menu-emblem {
	max-width: 100%;
	width: 100%;
	margin-bottom: .4em;
}

.ts-menu-intro {
	padding-top: 1em;
}

@media (max-width: 767px) {
	.ts-menu-intro .ts-menu-emblem {
		max-width: 100%;
	}
}

/* ---- Home page: full logo (emblem + wordmark), matching grid width ---- */

.ts-about-logo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto .6em;
}

/* The wordmark is inside the image here, so the site title above it would be
   saying the same thing twice — but keep "Our story" as the kicker. */
.ts-about {
	padding-top: 1em;
}

/* ======================================================================
   Mobile fixes — language switcher was covering the nav button
   ====================================================================== */

@media (max-width: 782px) {

	/* The floating switcher is position:fixed top-right, which is exactly
	   where Storefront puts the mobile menu button. It was sitting on top of
	   the hamburger, so the tabs couldn't be opened at all. Give the switcher
	   its own strip across the top and push the whole site down beneath it. */
	body {
		padding-top: 46px;
	}

	#trp-floater-ls,
	.trp-floating-switcher,
	.trp-language-switcher.trp-floating-switcher {
		top: 0 !important;
		bottom: auto !important;
		right: 0 !important;
		left: auto !important;
		z-index: 999 !important;
	}

	/* The hamburger has to sit above page content and be obviously tappable. */
	.site-header .menu-toggle,
	button#site-navigation-menu-toggle {
		position: relative;
		z-index: 1000;
		display: block !important;
		min-height: 46px;
		background-color: var(--ts-brown) !important;
		color: var(--ts-cream) !important;
		border: none;
		border-radius: 999px;
		padding: .6em 1.4em;
		font-family: var(--ts-serif);
		letter-spacing: .1em;
		text-transform: uppercase;
	}

	/* When it's open, the tab list needs to read like the desktop nav. */
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu {
		background: var(--ts-card);
		border: 1px solid var(--ts-rule);
		border-radius: 12px;
		padding: .4em .8em;
		margin-top: .6em;
	}

	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		display: block;
		padding: .85em .2em;
		border-bottom: 1px solid rgba(223, 195, 168, .5);
	}

	.main-navigation ul.menu > li:last-child > a,
	.main-navigation ul.nav-menu > li:last-child > a {
		border-bottom: none;
	}

	.main-navigation ul.menu > li.current-menu-item > a,
	.main-navigation ul.nav-menu > li.current-menu-item > a {
		border-bottom-color: var(--ts-terracotta);
	}

	/* ---- bottom bar + its search panel ---- */

	.storefront-handheld-footer-bar {
		background-color: var(--ts-brown) !important;
		border-top: none !important;
		z-index: 998;
	}

	.storefront-handheld-footer-bar ul li > a,
	.storefront-handheld-footer-bar ul li.cart > a,
	.storefront-handheld-footer-bar ul li.search > a,
	.storefront-handheld-footer-bar ul li.my-account > a {
		color: var(--ts-cream) !important;
	}

	/* The search panel must open UPWARD out of the bar. Left to its own
	   devices it was rendering under the bar and colliding with the footer. */
	.storefront-handheld-footer-bar .search .site-search {
		position: absolute !important;
		bottom: 100% !important;
		top: auto !important;
		left: 0;
		right: 0;
		width: 100%;
		background: var(--ts-brown) !important;
		padding: .8em !important;
		box-shadow: 0 -8px 20px rgba(62, 42, 30, .25);
		z-index: 999;
	}

	.storefront-handheld-footer-bar .search .site-search form,
	.storefront-handheld-footer-bar .search .site-search .widget {
		margin: 0 !important;
	}

	.storefront-handheld-footer-bar .search .site-search input[type="search"],
	.storefront-handheld-footer-bar .search .site-search input.search-field {
		width: 100%;
		border-radius: 999px;
		border: 1px solid var(--ts-rule);
		padding: .7em 1em;
		background: var(--ts-card);
		color: var(--ts-brown);
	}

	/* Clear the fixed bar so the last content isn't hidden behind it. */
	.site-content,
	.site-footer {
		padding-bottom: 5em;
	}
}

/* ======================================================================
   Mobile round 2 — hamburger icon, no bottom bar, search in the menu
   ====================================================================== */

/* Search lives in the hamburger on mobile; the header already has one on desktop. */
.ts-mobile-search { display: none; }

@media (max-width: 782px) {

	/* ---- the toggle becomes an actual hamburger ---- */

	/* "Menu" as a button label sitting next to a "Menu" tab read as a bug.
	   Hide the word, draw the icon. aria-label keeps it announced to
	   screen readers, so nothing is lost by removing the visible text. */
	.site-header .menu-toggle,
	button#site-navigation-menu-toggle {
		font-size: 0 !important;
		line-height: 0 !important;
		width: 52px;
		min-height: 46px;
		padding: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
	}

	.site-header .menu-toggle::before,
	button#site-navigation-menu-toggle::before {
		content: "\2630";           /* ☰ */
		font-size: 22px;
		line-height: 1;
		color: var(--ts-cream);
		display: block;
	}

	/* Storefront swaps in its own icon font glyph; suppress it so we don't
	   end up with two symbols stacked. */
	.site-header .menu-toggle::after,
	button#site-navigation-menu-toggle::after {
		display: none !important;
	}

	.site-header .menu-toggle[aria-expanded="true"]::before,
	button#site-navigation-menu-toggle[aria-expanded="true"]::before {
		content: "\00D7";           /* × when open */
		font-size: 26px;
	}

	/* ---- language switcher: scroll with the page, don't hover over it ---- */

	/* Fixed positioning is what made it feel "stuck" — it hovered above the
	   content while everything moved underneath. Absolute keeps it in the
	   reserved strip at the top and lets it scroll away naturally. */
	#trp-floater-ls,
	.trp-floating-switcher,
	.trp-language-switcher.trp-floating-switcher {
		position: absolute !important;
		top: 4px !important;
		right: 6px !important;
		bottom: auto !important;
		left: auto !important;
		z-index: 999 !important;
	}

	/* ---- search inside the open menu ---- */

	.ts-mobile-search {
		display: block;
		padding: 0 0 .8em;
	}

	.ts-mobile-search form {
		margin: 0;
	}

	.ts-mobile-search input[type="search"],
	.ts-mobile-search input.search-field {
		width: 100%;
		border-radius: 999px;
		border: 1.5px solid var(--ts-rule);
		background: var(--ts-card);
		color: var(--ts-brown);
		padding: .75em 1.1em;
		font-family: var(--ts-serif);
	}

	.ts-mobile-search button[type="submit"],
	.ts-mobile-search input[type="submit"] {
		display: none;              /* Enter submits; the button is clutter */
	}

	/* Only reveal it while the menu is open. */
	.ts-mobile-search { display: none; }
	.site-header.toggled .ts-mobile-search,
	.menu-toggle[aria-expanded="true"] ~ .ts-mobile-search,
	body.ts-menu-open .ts-mobile-search {
		display: block;
	}

	/* ---- bottom bar is gone; reclaim the space ---- */

	.storefront-handheld-footer-bar {
		display: none !important;
	}

	.site-content,
	.site-footer {
		padding-bottom: 1.5em;
	}
}

/* ======================================================================
   Mobile round 3 — drawn hamburger, instant toggle, working search
   These come last deliberately, so they win over the earlier attempts.
   ====================================================================== */

@media (max-width: 782px) {

	/* ---- hamburger drawn in CSS ----
	   The ☰ character sat off-centre because glyph metrics vary by font and
	   it inherits line-height. Three drawn bars centre exactly and don't
	   depend on any font being present. */
	button#site-navigation-menu-toggle,
	.site-header .menu-toggle {
		position: relative !important;
		width: 48px !important;
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 !important;
		margin: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		border: none !important;
		border-radius: 12px !important;
		background-color: var(--ts-brown) !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		/* no easing anywhere — the menu should feel instant */
		transition: none !important;
		animation: none !important;
	}

	button#site-navigation-menu-toggle::before,
	.site-header .menu-toggle::before {
		content: "" !important;
		display: block !important;
		width: 22px !important;
		height: 2px !important;
		background: var(--ts-cream) !important;
		box-shadow: 0 -7px 0 var(--ts-cream), 0 7px 0 var(--ts-cream);
		transition: none !important;
		animation: none !important;
	}

	button#site-navigation-menu-toggle::after,
	.site-header .menu-toggle::after {
		content: none !important;
		display: none !important;
	}

	/* Open state: collapse to an × */
	button#site-navigation-menu-toggle[aria-expanded="true"]::before,
	.site-header .menu-toggle[aria-expanded="true"]::before {
		box-shadow: none !important;
		transform: rotate(45deg);
	}

	button#site-navigation-menu-toggle[aria-expanded="true"]::after,
	.site-header .menu-toggle[aria-expanded="true"]::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: 22px !important;
		height: 2px !important;
		margin: -1px 0 0 -11px !important;
		background: var(--ts-cream) !important;
		transform: rotate(-45deg);
		box-shadow: none !important;
	}

	/* ---- kill the lag on close ----
	   The JS only toggles a class; the delay was CSS easing on the menu. */
	.main-navigation,
	.main-navigation ul,
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu,
	.handheld-navigation,
	.handheld-navigation ul {
		transition: none !important;
		animation: none !important;
	}

	/* ---- search inside the open menu ----
	   Storefront puts .toggled on #site-navigation (not .site-header), and the
	   search now renders after it, so this sibling selector matches. */
	.ts-mobile-search {
		display: none;
	}

	#site-navigation.toggled ~ .ts-mobile-search,
	.main-navigation.toggled ~ .ts-mobile-search {
		display: block;
		padding: .2em 0 1em;
	}

	#site-navigation.toggled ~ .ts-mobile-search input[type="search"],
	#site-navigation.toggled ~ .ts-mobile-search input.search-field,
	.main-navigation.toggled ~ .ts-mobile-search input[type="search"],
	.main-navigation.toggled ~ .ts-mobile-search input.search-field {
		width: 100%;
		border-radius: 999px;
		border: 1.5px solid var(--ts-rule);
		background: var(--ts-card);
		color: var(--ts-brown);
		padding: .8em 1.1em;
		font-family: var(--ts-serif);
		font-size: 1em;
	}

	.ts-mobile-search button[type="submit"],
	.ts-mobile-search input[type="submit"] {
		display: none !important;
	}
}

/* ======================================================================
   Hamburger, definitive fix
   ----------------------------------------------------------------------
   The button is <button><span>Menu</span></button>. With flex centring the
   span counted as a second flex item, so [bars + span] were centred as a
   group and the bars sat left of true centre. font-size:0 shrank the span
   but never took it out of the layout.
   Fix: pull the span out of flow (still readable by screen readers) and
   position the bars absolutely from the button's centre, so nothing else
   can shift them.
   ====================================================================== */

@media (max-width: 782px) {

	button#site-navigation-menu-toggle,
	.site-header .menu-toggle {
		position: relative !important;
		display: block !important;      /* no flex: nothing to mis-centre */
		width: 48px !important;
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 12px !important;
		background-color: var(--ts-brown) !important;
		overflow: hidden;
		transition: none !important;
		animation: none !important;
	}

	/* Visually hidden, still announced as "Menu" to screen readers. */
	button#site-navigation-menu-toggle > span,
	.site-header .menu-toggle > span {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Bars measured from the exact centre of the button. */
	button#site-navigation-menu-toggle::before,
	.site-header .menu-toggle::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: 22px !important;
		height: 2px !important;
		margin: 0 !important;
		background: var(--ts-cream) !important;
		transform: translate(-50%, -50%) !important;
		box-shadow: 0 -7px 0 var(--ts-cream), 0 7px 0 var(--ts-cream);
		transition: none !important;
		animation: none !important;
	}

	button#site-navigation-menu-toggle::after,
	.site-header .menu-toggle::after {
		content: none !important;
		display: none !important;
	}

	/* Open: the middle bar becomes one stroke of the ×, ::after the other.
	   No transition, so it swaps instantly rather than spinning. */
	button#site-navigation-menu-toggle[aria-expanded="true"]::before,
	.site-header .menu-toggle[aria-expanded="true"]::before {
		box-shadow: none !important;
		transform: translate(-50%, -50%) rotate(45deg) !important;
	}

	button#site-navigation-menu-toggle[aria-expanded="true"]::after,
	.site-header .menu-toggle[aria-expanded="true"]::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: 22px !important;
		height: 2px !important;
		margin: 0 !important;
		background: var(--ts-cream) !important;
		transform: translate(-50%, -50%) rotate(-45deg) !important;
		box-shadow: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* The logo already says the brand and "About Us" already says what the page
   is — "OUR STORY" in between was a third label for the same thing. */
.ts-about .ts-menu-kicker {
	display: none;
}

/* ---------------------------------------------------------------- contact */

.ts-contact {
	max-width: 780px;
	margin: 0 auto;
	padding: 2em 1em 2.5em;
	text-align: center;
}

.ts-contact-cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-gap);
	justify-content: center;
	margin: 2em 0 1em;
}

.ts-contact-card {
	flex: 1 1 300px;
	background: var(--ts-card);
	border: 1px solid var(--ts-rule);
	border-radius: 14px;
	padding: 1.6em 1.3em;
	box-shadow: 0 1px 2px rgba(62, 42, 30, .05);
}

.ts-contact-icon { font-size: 1.9em; display: block; margin-bottom: .3em; }

.ts-contact-card h3 {
	margin: 0 0 .4em;
	font-size: 1.25em;
	color: var(--ts-brown);
}

.ts-contact-card p {
	color: var(--ts-brown-soft);
	margin: 0 0 .9em;
	font-size: .98em;
	line-height: 1.6;
}

.ts-contact-card .button { width: 100%; display: block; }

/* Instagram placeholder — reads as "not yet" rather than a dead link. */
.ts-contact-soon { opacity: .85; }

.ts-soon-tag {
	display: inline-block;
	background: var(--ts-cream-deep);
	color: var(--ts-brown-soft);
	border: 1px dashed var(--ts-rule);
	border-radius: 999px;
	padding: .55em 1.4em;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.ts-faq { text-align: left; margin-top: .5em; }

.ts-faq-item {
	padding: 1.1em 0;
	border-bottom: 1px dotted var(--ts-rule);
}

.ts-faq-item:last-child { border-bottom: none; }

.ts-faq-item h4 {
	margin: 0 0 .35em;
	font-size: 1.1em;
	color: var(--ts-brown);
}

.ts-faq-item p {
	margin: 0;
	color: var(--ts-brown-soft);
	line-height: 1.7;
}

.ts-contact-close {
	margin-top: 2.2em;
	padding-top: 1.5em;
	border-top: 2px dotted var(--ts-rule);
	font-style: italic;
	color: var(--ts-brown);
}

@media (max-width: 767px) {
	.ts-contact { padding: 1.2em .5em 2em; }
	.ts-contact-card { flex: 1 1 100%; }
}

/* ---- policy pages: readable, not a wall of legalese ---- */
.ts-policy { max-width: 700px; margin: 0 auto; }
.ts-policy-updated { color: #8A6A55; font-size: .9em; font-style: italic; margin-bottom: 1.6em; }
.ts-policy h2 {
	font-size: 1.2em; color: var(--ts-brown); margin: 1.8em 0 .5em;
	padding-top: 1.1em; border-top: 2px dotted var(--ts-rule);
}
.ts-policy h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1em; }
.ts-policy p, .ts-policy li { line-height: 1.75; color: var(--ts-brown-soft); }
.ts-policy ul { margin: .6em 0 1em 1.4em; }
.ts-policy li { margin-bottom: .4em; }

/* ---- hours: thin live-status strip above the header ---- */
.ts-hours-bar {
	background: var(--ts-brown);
	color: var(--ts-cream);
	font-size: 12.5px;
	letter-spacing: .02em;
	text-align: center;
	padding: 6px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	line-height: 1.3;
}
.ts-hours-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #7FB069;          /* open */
	flex: 0 0 auto;
}
.ts-hours-bar.is-closed .ts-hours-dot { background: #B0894F; }
.ts-hours-bar.is-closed { opacity: .95; }
.ts-hours-now { font-weight: 600; }

/* The strip sits outside the header, so kill the theme's top spacing that
   would otherwise leave a cream gap above it. */
.site-header { margin-top: 0; }

/* ---- hours: full week in the footer ---- */
.ts-footer-hours {
	max-width: 380px;
	margin: 0 auto var(--ts-gap);
	text-align: center;
}
.ts-footer-hours h3 {
	font-family: var(--ts-serif);
	font-size: 1.05em;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ts-cream);
	margin: 0 0 .7em;
}
.ts-footer-hours ul { list-style: none; margin: 0; padding: 0; }
.ts-footer-hours li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 5px 0;
	border-bottom: 1px dotted rgba(250, 238, 227, .22);
	font-size: .92em;
}
.ts-footer-hours li:last-child { border-bottom: none; }
.ts-fh-day  { color: rgba(250, 238, 227, .78); }
.ts-fh-time { color: rgba(250, 238, 227, .95); white-space: nowrap; }
.ts-footer-hours li.is-today .ts-fh-day,
.ts-footer-hours li.is-today .ts-fh-time { color: #fff; font-weight: 700; }
.ts-footer-hours-note {
	margin: .9em 0 0;
	font-size: .82em;
	font-style: italic;
	color: rgba(250, 238, 227, .6);
}

@media (max-width: 480px) {
	.ts-hours-bar { font-size: 11.5px; padding: 5px 10px; }
	.ts-footer-hours { max-width: 100%; padding: 0 8px; }
}

/* ======================================================================
   The landing page
   Full-width colour bands break out of the theme's boxed container with
   the 50vw negative-margin trick; body.home gets overflow-x hidden so the
   100vw maths cannot cause a sideways scrollbar.
   ====================================================================== */

body.home { overflow-x: hidden; }

/* ---- hero ---- */

.ts-hero {
	text-align: center;
	padding: 2.6em 1em 2.6em;
}

.ts-hero-emblem {
	display: block;
	max-width: 260px;
	margin: 0 auto 0.4em;
}

.ts-hero-kicker {
	margin: 0 0 0.5em;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ts-terracotta);
}

.ts-hero-title {
	margin: 0 0 0.35em;
	font-family: var(--ts-serif);
	font-size: 2.5em;
	line-height: 1.15;
	color: var(--ts-brown);
}

.ts-hero-sub {
	max-width: 34em;
	margin: 0 auto 1.5em;
	font-size: 1.12em;
	color: var(--ts-brown-soft);
}

.ts-btn-big {
	font-size: 1.12em !important;
	padding: 0.85em 2.6em !important;
}

/* ---- full-width bands ---- */

.ts-band {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ts-band-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1em;
}

/* ---- trust strip ---- */

.ts-band-trust {
	background: var(--ts-brown);
	padding: 1.1em 0;
}

.ts-trust {
	list-style: none;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45em 2.4em;
}

.ts-trust li {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin: 0;
	color: var(--ts-cream);
	font-size: 0.95em;
}

.ts-trust li::before {
	content: "☀";
	color: var(--ts-terracotta);
}

/* ---- featured drinks ---- */

.ts-band-fav {
	background: var(--ts-cream-deep);
	padding: 2.4em 0 2.3em;
}

.ts-band-fav ul.products {
	margin-bottom: 0;
}

.ts-fav-more {
	margin: 1.5em 0 0;
	text-align: center;
	font-size: 1.05em;
}

.ts-fav-more a {
	color: var(--ts-terracotta);
	font-weight: 600;
	text-decoration: none;
}

.ts-fav-more a:hover { text-decoration: underline; }

/* ---- sun divider ---- */

.ts-sun-divider {
	text-align: center;
	padding: 2.4em 0 0.4em;
}

.ts-sun-divider img {
	width: 130px;
	opacity: 0.45;
}

/* ---- how it works ---- */

.ts-how {
	max-width: 860px;
	margin: 0 auto;
	padding: 1em 1em 2.8em;
	text-align: center;
}

.ts-how h2 {
	font-family: var(--ts-serif);
	color: var(--ts-brown);
	margin-bottom: 0;
}

.ts-steps {
	list-style: none;
	counter-reset: ts-step;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6em;
	margin: 1.8em 0 0;
	padding: 0;
}

.ts-steps li {
	counter-increment: ts-step;
	margin: 0;
	color: var(--ts-brown-soft);
	line-height: 1.6;
}

.ts-steps li::before {
	content: counter(ts-step);
	display: block;
	width: 46px;
	height: 46px;
	line-height: 46px;
	margin: 0 auto 0.65em;
	border-radius: 50%;
	background: var(--ts-terracotta);
	color: var(--ts-cream);
	font-family: var(--ts-serif);
	font-size: 1.2em;
	font-weight: 700;
}

.ts-steps strong { color: var(--ts-brown); }

/* ---- story teaser ---- */

.ts-band-story {
	background: var(--ts-brown);
	padding: 2.8em 0;
	text-align: center;
}

.ts-band-story .ts-story-quote {
	max-width: 32em;
	margin: 0 auto 1.4em;
	padding: 0 1em;
	font-family: var(--ts-serif);
	font-style: italic;
	font-size: 1.28em;
	line-height: 1.65;
	color: var(--ts-cream);
}

.ts-band-story .button,
.ts-band-story .button:visited {
	background: var(--ts-terracotta) !important;
	color: #FFF9F2 !important;
}

.ts-band-story .ts-story-cta { margin: 0; }

/* ---- small screens ---- */

@media (max-width: 640px) {
	.ts-hero { padding-top: 1.8em; }
	.ts-hero-title { font-size: 1.85em; }
	.ts-hero-emblem { max-width: 210px; }
	.ts-steps { grid-template-columns: 1fr; gap: 1.3em; }
	.ts-band-story .ts-story-quote { font-size: 1.12em; }
}
/* The hero button sits outside any woocommerce wrapper, so it fell back to
   Storefront's charcoal. It is the single most important button on the site —
   it gets the brand terracotta. */
.ts-hero .button,
.ts-hero .button:visited {
	background: var(--ts-terracotta) !important;
	color: #FFF9F2 !important;
}
.ts-hero .button:hover,
.ts-band-story .button:hover {
	background: var(--ts-terracotta-dark) !important;
	color: #FFF9F2 !important;
}

/* ======================================================================
   Reviews
   ====================================================================== */

.ts-reviews { max-width: 680px; margin: 0 auto; padding-bottom: 2em; }

.ts-stars { color: var(--ts-terracotta); letter-spacing: 2px; font-size: 1.05em; }

.ts-rev-avg { text-align: center; font-size: 1.15em; color: var(--ts-brown); }

/* --- the form --- */

.ts-rev-form {
	background: var(--ts-card);
	border: 1px solid var(--ts-rule);
	border-radius: 12px;
	padding: 1.4em 1.5em 1.6em;
	margin: 1.4em 0 2em;
	display: flex;
	flex-direction: column;
	gap: 0.85em;
}

.ts-rev-form h3 { margin: 0; font-family: var(--ts-serif); color: var(--ts-brown); }

.ts-rev-form input[type="text"],
.ts-rev-form input[type="email"],
.ts-rev-form textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--ts-rule);
	border-radius: 8px;
	background: #fff;
}

.ts-rev-form .button { align-self: flex-start; }

/* Stars: DOM runs 5→1, row-reverse flips it back, and the ~ combinator
   lights every star at or below the hovered/checked one. */
.ts-stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.ts-stars-input input { display: none; }
.ts-stars-input label {
	font-size: 2em;
	line-height: 1;
	color: var(--ts-rule);
	cursor: pointer;
	padding: 0 0.06em;
	transition: color .12s;
}
.ts-stars-input input:checked + label,
.ts-stars-input input:checked ~ label,
.ts-stars-input label:hover,
.ts-stars-input label:hover ~ label { color: var(--ts-terracotta); }

.ts-rev-hp { position: absolute !important; left: -9999px !important; height: 0; width: 0; opacity: 0; }

.ts-rev-error { color: var(--ts-terracotta-dark); text-align: center; font-weight: 600; }

.ts-rev-thanks {
	background: var(--ts-cream-deep);
	border-radius: 12px;
	padding: 1.2em 1.4em;
	margin: 1.4em 0 2em;
	text-align: center;
	color: var(--ts-brown);
}
.ts-rev-thanks p { margin: 0; }

/* --- the list + teaser cards --- */

.ts-rev-list { display: flex; flex-direction: column; gap: 1em; }

.ts-rev-card {
	background: var(--ts-card);
	border: 1px solid var(--ts-rule);
	border-radius: 12px;
	padding: 1.05em 1.2em 0.9em;
}

.ts-rev-text { margin: 0.45em 0 0.5em; color: var(--ts-brown-soft); line-height: 1.6; }

.ts-rev-who { margin: 0; font-size: 0.88em; color: var(--ts-brown); font-style: italic; }

.ts-rev-empty { text-align: center; color: var(--ts-brown-soft); padding: 1em 0 2em; }

/* --- homepage teaser band --- */

.ts-band-rev { background: var(--ts-cream-deep); padding: 2.3em 0 2.2em; }

.ts-rev-teaser-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1em;
	margin-top: 1.2em;
}

.ts-rev-more { text-align: center; margin: 1.4em 0 0; font-size: 1.02em; }
.ts-rev-more a { color: var(--ts-terracotta); font-weight: 600; text-decoration: none; }
.ts-rev-more a:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.ts-rev-teaser-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   Cancel an order
   ====================================================================== */

.ts-cancel { max-width: 520px; margin: 0 auto; padding: 1em 0 2.5em; text-align: center; }

.ts-cancel h2 { font-family: var(--ts-serif); color: var(--ts-brown); margin-bottom: 0.8em; }

.ts-cancel-order {
	background: var(--ts-card);
	border: 1px solid var(--ts-rule);
	border-radius: 12px;
	padding: 1.2em 1.4em;
	margin-bottom: 1.5em;
	text-align: left;
}

.ts-cancel-when { margin: 0 0 0.6em; color: var(--ts-brown); }
.ts-cancel-items { list-style: none; margin: 0 0 0.6em; padding: 0; }
.ts-cancel-items li { margin: 0 0 0.25em; color: var(--ts-brown-soft); }
.ts-cancel-total { margin: 0; font-size: 1.15em; color: var(--ts-brown); font-weight: 600; }

/* Destructive, so it does not get the friendly terracotta the ordering
   buttons use — it should look like what it is. */
.ts-cancel-btn,
.ts-cancel-btn:visited {
	background: var(--ts-terracotta-dark) !important;
	color: #FFF9F2 !important;
}

.ts-cancel-back { margin: 1em 0 0; }
.ts-cancel-back a { color: var(--ts-brown-soft); }

.ts-cancel-msg { color: var(--ts-brown-soft); line-height: 1.7; }

.ts-cancel-done {
	background: var(--ts-cream-deep);
	border-radius: 12px;
	padding: 1.5em 1.4em;
	margin-bottom: 1.4em;
}
.ts-cancel-done h2 { margin-top: 0; }
.ts-cancel-done p { color: var(--ts-brown-soft); margin-bottom: 0.6em; }

/* The inline link on the thank-you page. */
.ts-cancel-inline { text-align: center; font-size: 0.92em; color: var(--ts-brown-soft); margin-top: 1.2em; }
.ts-cancel-inline a { color: var(--ts-terracotta); }

/* ======================================================================
   Customer portal (/my-card/)
   ====================================================================== */

.ts-mycard { max-width: 680px; margin: 0 auto; }

/* --- the numbers --- */

.ts-portal-stats {
	display: flex;
	justify-content: center;
	gap: 2.4em;
	margin: 1.6em 0 1.8em;
	padding: 1.1em 1em;
	background: var(--ts-cream-deep);
	border-radius: 12px;
	text-align: center;
}
.ts-portal-stats > div { display: flex; flex-direction: column; }
.ts-stat-n { font-family: var(--ts-serif); font-size: 1.7em; color: var(--ts-terracotta); line-height: 1.1; }
.ts-stat-l { font-size: .78em; text-transform: uppercase; letter-spacing: .1em; color: var(--ts-brown-soft); margin-top: .25em; }

/* --- your usual --- */

.ts-portal-usual {
	background: var(--ts-brown);
	color: var(--ts-cream);
	border-radius: 12px;
	padding: 1.3em 1.4em 1.5em;
	margin-bottom: 2em;
	text-align: center;
}
.ts-usual-kicker { margin: 0 0 .3em; font-size: .78em; text-transform: uppercase; letter-spacing: .14em; color: var(--ts-terracotta); }
.ts-usual-drink { margin: 0; font-family: var(--ts-serif); font-size: 1.5em; color: var(--ts-cream); }
.ts-usual-opts  { margin: .3em 0 0; font-size: .93em; color: #D9C9BB; }
.ts-usual-count { margin: .5em 0 1em; font-size: .85em; color: #B5A294; font-style: italic; }
.ts-portal-usual .button,
.ts-portal-usual .button:visited { background: var(--ts-terracotta) !important; color: #FFF9F2 !important; }

/* --- order history --- */

.ts-portal-h { font-family: var(--ts-serif); color: var(--ts-brown); margin: 0 0 .8em; }
.ts-portal-orders { display: flex; flex-direction: column; gap: .9em; }

.ts-porder {
	background: var(--ts-card);
	border: 1px solid var(--ts-rule);
	border-left: 5px solid var(--ts-rule);
	border-radius: 10px;
	padding: .9em 1.1em 1em;
}

.ts-porder-top { display: flex; justify-content: space-between; align-items: baseline; gap: .8em; flex-wrap: wrap; }
.ts-porder-when { font-weight: 600; color: var(--ts-brown); }
.ts-porder-status { font-size: .8em; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }

.ts-porder-items { list-style: none; margin: .6em 0 .5em; padding: 0; }
.ts-porder-items li { margin: 0 0 .35em; color: var(--ts-brown); line-height: 1.45; }
.ts-porder-opts { font-size: .88em; color: var(--ts-brown-soft); }

.ts-porder-foot { display: flex; justify-content: space-between; font-size: .88em; color: var(--ts-brown-soft); padding-top: .5em; border-top: 1px dotted var(--ts-rule); }

.ts-porder-cancel { margin: .7em 0 0; text-align: right; font-size: .88em; }
.ts-porder-cancel a { color: var(--ts-terracotta-dark); }

/* status colours — the left edge carries the meaning at a glance */
.ts-porder-coming    { border-left-color: var(--ts-terracotta); }
.ts-porder-coming   .ts-porder-status { color: var(--ts-terracotta); }
.ts-porder-waiting   { border-left-color: #B0894F; }
.ts-porder-waiting  .ts-porder-status { color: #B0894F; }
.ts-porder-owed      { border-left-color: #B0894F; }
.ts-porder-owed     .ts-porder-status { color: #B0894F; }
.ts-porder-prepaid   { border-left-color: var(--ts-olive); }
.ts-porder-prepaid  .ts-porder-status { color: var(--ts-olive); }
.ts-porder-done      { border-left-color: var(--ts-olive); opacity: .78; }
.ts-porder-done     .ts-porder-status { color: var(--ts-olive); }
.ts-porder-cancelled { border-left-color: #C9C1B8; opacity: .6; }
.ts-porder-cancelled .ts-porder-status { color: #8A7A6D; }
.ts-porder-cancelled .ts-porder-items { text-decoration: line-through; }

.ts-portal-cta { text-align: center; margin: 1.8em 0 0; }

@media (max-width: 640px) {
	.ts-portal-stats { gap: 1.4em; }
	.ts-stat-n { font-size: 1.4em; }
}