/*
Theme Name: CurbOver
Theme URI: https://www.curbover.com
Author: CurbOver
Description: Block theme for CurbOver — India's Suzuki Jimny owners' community, shop and expedition team. Replaces DetailX and its page-builder stack; all design lives in theme.json.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: curbover
Tags: e-commerce, blog, full-site-editing, block-patterns, custom-colors, custom-menu
*/

/*
 * Design tokens live in theme.json. This file carries only what the block
 * editor cannot express: a few component-level rules for WooCommerce and
 * WP Travel Engine output, which render through their own PHP templates.
 */

/* WooCommerce and WP Travel Engine render through PHP templates, so their
   layout needs a little help to sit inside the block theme's content width. */
.curbover-woo {
	padding-block: var(--wp--preset--spacing--60);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	list-style: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.woocommerce ul.products li.product img {
	border-radius: 12px;
}

.woocommerce .price,
.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 600;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--wp--preset--color--brand-deep);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.85em 2em;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--ink);
}

/* Trip pages: keep WPTE's output inside the same rhythm as the rest. */
.wpte-single-trip,
.wp-travel-engine-archive {
	padding-block: var(--wp--preset--spacing--60);
}

/* ---------------------------------------------------------------- chrome */

/* Sticky header, with a shadow that only appears once the page scrolls. */
.curbover-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(13, 12, 15, 0.85) !important;
	box-shadow: 0 1px 0 var(--wp--preset--color--line);
}

.curbover-header .wp-block-site-logo img {
	display: block;
	height: auto;
}


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

/* Query grids read as cards rather than a bare list of images and text. */
.curbover-cards.is-layout-grid {
	gap: var(--wp--preset--spacing--40);
}

.curbover-cards > li {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--ink-soft);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.curbover-cards > li:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	transform: translateY(-2px);
}

.curbover-cards > li img {
	border-radius: 10px;
}

.curbover-cards .wp-block-post-title {
	margin: 0;
}

.curbover-cards .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

.curbover-cards .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}

/* Shop grid gets the same treatment so the two feel like one system. */
.woocommerce ul.products li.product {
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--ink-soft);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.woocommerce ul.products li.product:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem !important;
	line-height: 1.25;
}

/* Section headings get a little more presence. */
.wp-block-group > .wp-block-heading {
	margin-bottom: 0.4em;
}

/* Card titles are links, so they inherit the brand red. That leaves every card
   shouting — the price and the button should carry the colour, not the title. */
.curbover-cards .wp-block-post-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a h2 {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.curbover-cards .wp-block-post-title a:hover,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--wp--preset--color--brand);
}

/* Give the shop grid a little more breathing room around each card's text. */
.woocommerce ul.products li.product .price {
	display: block;
	margin: 0.35rem 0 0.6rem;
}


/* ------------------------------------------------- WooCommerce (block-based)

   Woo 11 renders shop and archive pages with block templates
   (.wc-block-product-template), not the classic `ul.products` markup. The
   classic rules above still apply to any legacy shortcode output; these target
   what actually renders today.

   The classic wrapper this theme adds inherits the 840px prose measure, which
   squeezes the product grid into one narrow column — widen it to the wide size.
*/
.wc-block-product-template {
	gap: var(--wp--preset--spacing--40);
}

.wc-block-product-template > li {
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--ink-soft);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.wc-block-product-template > li:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	transform: translateY(-2px);
}

.wc-block-product-template > li img {
	border-radius: 10px;
}

/* Product titles render as core post-title blocks whose links inherit brand
   red — that competes with the price and the button. */
.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wp-block-post-title a,
.wc-block-components-product-name {
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	line-height: 1.35;
	text-decoration: none;
}

.wc-block-product-template > li:hover .wp-block-post-title a,
.wc-block-product-template > li:hover .wc-block-components-product-name {
	color: var(--wp--preset--color--brand) !important;
}

.wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 600;
}


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

/* Three-part header: logo left, menu centred, cart/account right. Without
   flex:1 on the nav, space-between pushes the menu hard against the icons. */
.curbover-header > .wp-block-group {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	/* The header part declares contentSize 1280px, but that becomes generated
	   container CSS which WordPress only emits for blocks seen during wp_head.
	   On plugin templates (WP Travel Engine trips) it is missing, so the row
	   fell back to the global 840px measure and the menu wrapped to two lines.
	   Restating it here keeps both render paths identical. */
	max-width: 1280px;
	width: 100%;
	margin-inline: auto;
}

/* WooCommerce's Block Hooks inject the account and cart blocks straight after
   the navigation, so they are siblings of the nav inside the right-hand group,
   not separate zones. Growing that group and centring the nav within it puts
   the menu on the page centre, because the icons are as wide as the logo. */
.curbover-header > .wp-block-group > .wp-block-group {
	flex: 1 1 auto;
}

.curbover-header .wp-block-navigation {
	flex: 1 1 auto;
}

.curbover-header .wp-block-navigation .wp-block-navigation__container {
	justify-content: center;
	width: 100%;
}

.curbover-header .wp-block-site-logo {
	flex: 0 0 auto;
}

.curbover-header .wp-block-site-logo img {
	width: 104px;
	max-width: none;
}

/* ------------------------------------------------------- products shortcode */

/*
 * The [products] shortcode emits classic markup whose clearfix ::before and
 * ::after become grid items — the ::before took cell one, leaving an empty
 * first slot and shunting every product across.
 *
 * `auto-fill` also produced five tracks for four products. The shortcode already
 * declares the count via `columns-N`, so honour that instead of guessing.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
	content: none !important;
}

.woocommerce ul.products.columns-1 { grid-template-columns: 1fr; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr; }
}


/* ------------------------------------------------- dark surfaces (plugins)

   The site runs on a near-black ground (#0d0c0f), but WooCommerce, Contact
   Form 7 and WP Travel Engine ship their own light-theme CSS: white panels,
   white inputs, pale notice boxes. Those render as bright rectangles unless
   they are repainted here. Everything below is a surface/text correction —
   no layout changes.
*/

/* Form controls across all three plugins. */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select,
.wpte-single-trip input,
.wpte-single-trip textarea,
.wpte-single-trip select {
	background: var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--chalk);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 0.7em 0.9em;
}

.woocommerce input::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: var(--wp--preset--color--muted);
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	border-color: var(--wp--preset--color--brand);
	outline: 2px solid rgba(149, 201, 61, 0.3);
	outline-offset: 1px;
}

/* Notices: Woo paints these pale grey with a coloured top rule. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	background: var(--wp--preset--color--mist) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-top: 3px solid var(--wp--preset--color--brand);
}

.woocommerce-info a,
.woocommerce-message a {
	color: var(--wp--preset--color--brand);
}

/* Tables: cart, order details, account orders, trip itineraries. */
.woocommerce table.shop_table,
.woocommerce table.shop_attributes,
.woocommerce-MyAccount-content table {
	background: transparent;
	border-color: var(--wp--preset--color--line);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--chalk);
}

.woocommerce table.shop_table thead th {
	color: var(--wp--preset--color--white);
}

/* Cart totals and checkout review panels. */
.woocommerce .cart_totals,
.woocommerce .cross-sells,
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
}

/* My Account navigation. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7em 0;
	color: var(--wp--preset--color--chalk);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--brand);
}

/* Block-based cart, checkout and the mini-cart drawer. */
.wc-block-components-panel,
.wc-block-components-totals-item,
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-drawer__screen-overlay + * {
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--chalk);
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
	background: var(--wp--preset--color--ink-soft) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.wc-block-components-text-input label,
.wc-block-components-title,
.wc-block-components-totals-item__label {
	color: var(--wp--preset--color--chalk) !important;
}

/* Contact Form 7 response text. */
.wpcf7 form .wpcf7-response-output {
	color: var(--wp--preset--color--chalk);
	border-color: var(--wp--preset--color--line);
}

/* Horizontal rules and the separator block. */
hr,
.wp-block-separator {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--line);
}


/* Block-based notice banners (cart, checkout, account) are a separate
   component from the classic .woocommerce-info boxes above, with their own
   pale tints — #f4f8ff for info, and similar for success/error/warning. */
.wc-block-components-notice-banner {
	background: var(--wp--preset--color--mist) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.wc-block-components-notice-banner.is-error { border-left: 3px solid #e5484d !important; }
.wc-block-components-notice-banner.is-success { border-left: 3px solid #46b450 !important; }
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning { border-left: 3px solid var(--wp--preset--color--muted) !important; }

.wc-block-components-notice-banner > svg { fill: var(--wp--preset--color--chalk); }
.wc-block-components-notice-banner a { color: var(--wp--preset--color--brand); }


/* Woo hardcodes a couple of near-black foregrounds that survive the banner
   rule above: the "Continue shopping" action (#2f2f2f) and the cart row
   remove cross (#a00). Both fall under 3:1 on the dark ground. */
.wc-block-components-notice-banner a,
.wc-block-components-notice-banner button,
.wc-block-components-notice-banner .wc-forward {
	color: var(--wp--preset--color--brand) !important;
}

.woocommerce a.remove,
.woocommerce table.cart a.remove {
	color: #e5484d !important;
}

.woocommerce a.remove:hover,
.woocommerce table.cart a.remove:hover {
	background: #e5484d !important;
	color: #fff !important;
}

/* Quantity spinner inherits the light-theme field styling. */
.woocommerce .quantity input.qty {
	background: var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--chalk);
	border: 1px solid var(--wp--preset--color--line);
}


/* ------------------------------------------------ WooCommerce form controls

   Woo 11 drives its form fields from custom properties that default to a
   white fill and black text, and its own `.woocommerce form .form-row
   .input-text` rule outranks any plain `.woocommerce input[type=...]`
   selector. Setting the variables fixes it at the source and avoids an
   escalating specificity fight; the explicit rules below cover the controls
   that do not read the variables (select2, block fields).
*/
:root {
	--wc-form-color-background: #2e2d31;
	--wc-form-color-text: #d6d6d8;
	--wc-form-border-color: #363537;
	--wc-form-border-radius: 8px;
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row .input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea {
	background: var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--chalk);
	border: 1px solid var(--wp--preset--color--line);
}

/* selectWoo / select2 renders its own widget rather than a native select. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--wp--preset--color--ink-soft) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-results__option {
	color: var(--wp--preset--color--chalk) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--wp--preset--color--brand) !important;
	color: #fff !important;
}

/* Checkout section headings and the payment box. */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce form .form-row label {
	color: var(--wp--preset--color--chalk);
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: var(--wp--preset--color--mist);
	border-radius: 12px;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--chalk);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--ink-soft);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--wp--preset--color--line);
}


/* --------------------------------------------------- WP Travel Engine (dark)

   Trip pages render through the plugin's own PHP templates and its stylesheet
   assumes a light theme: #efefef banner rails, white cards, white toggles.
   These are surface corrections only.
*/
.wpte-multi-banner-image,
.wte-trip-image-gal-popup-trigger,
.wte-title-duration,
.category-trips-single-inner-wrap,
.wpte-details-toggler-button,
.wpte-single-trip .search-field {
	background-color: var(--wp--preset--color--mist) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.wte-trip-image-gal-popup-trigger,
.wte-title-duration,
.wpte-details-toggler-button {
	border: 1px solid var(--wp--preset--color--line) !important;
}

.wpte-single-trip .nav-tab-wrapper,
.wpte-single-trip .nav-tab {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--line) !important;
	color: var(--wp--preset--color--chalk) !important;
}

.wpte-single-trip .nav-tab-active,
.wpte-single-trip .nav-tab:hover {
	color: var(--wp--preset--color--brand) !important;
	border-bottom-color: var(--wp--preset--color--brand) !important;
}

/* Trip body copy and headings inherit the plugin's dark-on-light values. */
.wpte-single-trip,
.wpte-single-trip p,
.wpte-single-trip li,
.wpte-single-trip td,
.wpte-single-trip th,
.category-trips-single-inner-wrap * {
	color: var(--wp--preset--color--chalk);
}

.wpte-single-trip h1,
.wpte-single-trip h2,
.wpte-single-trip h3,
.wpte-single-trip h4 {
	color: var(--wp--preset--color--white);
}

/* The classic-template bridge (header.php) wraps plugin output in this main;
   give it the same rhythm as the block templates. */
.curbover-plugin-main {
	padding-block: var(--wp--preset--spacing--50);
}


/* ------------------------------------------- chrome on classic templates

   theme.json's per-block styles (core/navigation, core/site-title) are only
   emitted for blocks WordPress has already seen on the page, and it builds
   that list during wp_head — which happens before header.php renders the
   header template part. On plugin-rendered pages (WP Travel Engine trips)
   the navigation therefore fell back to body typography.

   Restating the two rules here makes the header identical on both paths;
   the theme stylesheet always loads.
*/
.curbover-header .wp-block-navigation,
.curbover-header .wp-block-navigation a,
.curbover-header .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.curbover-header .wp-block-navigation a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.curbover-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--brand);
}


/* ------------------------------------- 2Low product description (dark)

   Product 33706 carries a self-contained landing page in its description,
   with its own scoped <style> block written for a light canvas: #2b2f36
   body text on #fafafa / #fff5f5 / #f3f8ec panels. It is the only product
   built this way.

   That <style> lives in the body, so it comes after this file in document
   order and wins any tie on specificity. Prefixing with `body` raises these
   rules by one element and lets them land without !important.

   The hero, stat strip and closing band are already dark or brand red, so
   they are deliberately left alone.
*/
body #co2l {
	color: var(--wp--preset--color--chalk);
}

body #co2l p,
body #co2l .co-lead,
body #co2l ol.co-steps li,
body #co2l ul.co-check li,
body #co2l .co-faq-a p {
	color: var(--wp--preset--color--chalk);
}

body #co2l h2,
body #co2l h3,
body #co2l strong {
	color: var(--wp--preset--color--white);
}

body #co2l .co-card {
	background: var(--wp--preset--color--mist);
	border-color: var(--wp--preset--color--line);
}

body #co2l .co-panel--problem {
	background: var(--wp--preset--color--mist);
	border: 1px solid rgba(229, 72, 77, 0.4);
}

body #co2l .co-panel--solution {
	background: var(--wp--preset--color--mist);
	border: 1px solid rgba(124, 193, 39, 0.4);
}

body #co2l .co-panel--solution h2 {
	color: #9ada4a;
}

body #co2l .co-quote {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--white);
}

body #co2l .co-quote cite {
	color: var(--wp--preset--color--muted);
}

body #co2l table.co-spec td {
	border-bottom-color: var(--wp--preset--color--line);
}

body #co2l table.co-spec tr td:first-child {
	color: var(--wp--preset--color--white);
}

body #co2l details {
	border-color: var(--wp--preset--color--line);
}

body #co2l summary {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--white);
}

body #co2l details[open] summary {
	border-bottom-color: var(--wp--preset--color--line);
}

/* Woo product tabs themselves ship a light-theme treatment. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-color: var(--wp--preset--color--line) !important;
	background: var(--wp--preset--color--mist) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--chalk) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--wp--preset--color--ink) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--white) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	border-color: var(--wp--preset--color--line) !important;
	box-shadow: none !important;
}


/* A third panel carries its light fill (#f6f8fc) and navy heading in an inline
   style attribute rather than the scoped <style> block, so only !important
   reaches it. Applied to .co-panel generally to keep all three consistent;
   the solution panel keeps its green heading. */
body #co2l .co-panel {
	background: var(--wp--preset--color--mist) !important;
	border-color: var(--wp--preset--color--line) !important;
}

body #co2l .co-panel:not(.co-panel--solution) h2 {
	color: var(--wp--preset--color--white) !important;
}

body #co2l .co-panel p,
body #co2l .co-panel li {
	color: var(--wp--preset--color--chalk) !important;
}


/* One <strong> carries the solution green as an inline colour (#3f6112), which
   was chosen against a pale panel and drops to 2.2:1 on the dark one. Matching
   the inline value keeps the green identity while lifting it to the same tint
   used for the solution heading, rather than flattening every strong to white. */
body #co2l strong[style*="#3f6112"],
body #co2l .co-panel--solution strong[style*="3f6112"] {
	color: #9ada4a !important;
}


/* The hero eyebrow sits on a photograph, where brand red held only ~4:1 against
   the dimmed backdrop and disappeared over the bright rock face. White plus a
   soft shadow reads at any point in the image; the red eyebrows on the solid
   dark sections are unaffected. */
.curbover-eyebrow-hero {
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.6);
}

/* Quick Links runs to ten items — a single column made the footer unnecessarily
   tall, so flow it into two. */
.curbover-footer-nav .wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.4rem var(--wp--preset--spacing--40);
	align-content: start;
}

@media (max-width: 480px) {
	.curbover-footer-nav .wp-block-navigation__container {
		grid-template-columns: 1fr;
	}
}


/* NB: the effective spacing presets are WordPress core's default 1.5-ratio
   scale (0.44 / 0.67 / 1 / 1.5 / 2.25 / 3.38 / 5.06rem), NOT the spacingSizes
   declared in theme.json — those are ignored. Section padding is set inline by
   the block markup, so it cannot be adjusted from here without !important;
   change content/home.html instead. */


/* ============================================================ interactions */

/* Every link and button gets a hover state and a short transition. */
a,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
	transition: color 0.18s ease, background-color 0.18s ease,
	            border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.entry-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover,
.curbover-plugin-main a:not(.wp-block-button__link):hover,
footer a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	color: var(--wp--preset--color--brand-hover);
}

.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand) !important;
}

.curbover-cards > li:hover,
.woocommerce ul.products li.product:hover,
.wc-block-product-template > li:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	a, .wp-block-button__link, .woocommerce a.button,
	.woocommerce button.button, .woocommerce input.button { transition: none; }
	.wp-block-button__link:hover, .woocommerce a.button:hover,
	.woocommerce button.button:hover, .woocommerce input.button:hover { transform: none; }
}

/* Footer column headings were white uppercase at link size, so they read as
   links. Muted, smaller and rule-separated makes them labels instead. */
.curbover-footer-heading {
	padding-bottom: 0.55rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ================================================ checkboxes and radios

   WP Travel Engine styles `input[type=radio], input[type=checkbox]` globally
   (wte-public.css and trip-checkout.css, both unscoped) with
   `appearance:none; width:20px; flex:0 0 20px`. That only holds up inside
   WPTE's own flex rows; on the WooCommerce checkout the "Create an account?"
   box collapsed to a 2px sliver with a pale #ccd5d8 border — invisible on the
   dark ground. Same family of bug as the plugin's global `mark` rule that
   turned every order status yellow.

   `body` prefix outranks the plugin without an !important war.
*/
body input[type="checkbox"],
body input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0 0.5em 0 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 4px;
	background: var(--wp--preset--color--ink-soft);
	display: inline-block;
	vertical-align: -3px;
	position: relative;
	cursor: pointer;
	box-sizing: border-box;
}

body input[type="radio"] { border-radius: 50%; }

body input[type="checkbox"]:hover,
body input[type="radio"]:hover {
	border-color: var(--wp--preset--color--brand);
}

/* WPTE also ships `input[type=checkbox]:checked { background: none !important }`,
   which no amount of specificity beats — hence !important here. That is three
   separate overrides from one plugin on a single control. */
body input[type="checkbox"]:checked,
body input[type="radio"]:checked {
	background: var(--wp--preset--color--brand) !important;
	border-color: var(--wp--preset--color--brand) !important;
}

body input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

body input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
}

body input[type="checkbox"]:focus-visible,
body input[type="radio"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* =========================================== WP Travel Engine archive (dark)

   The trip archive toolbar keeps its light-theme foregrounds: a black search
   field on a 4%-opacity fill, black view-mode icons, and black duration text.
*/
.wpte-single-trip .search-field,
.wp-travel-engine-archive .search-field,
input[type="search"].search-field,
.wte-search-field input {
	background: var(--wp--preset--color--ink-soft) !important;
	color: var(--wp--preset--color--chalk) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
}

.wpte-single-trip .search-field::placeholder,
input[type="search"].search-field::placeholder {
	color: var(--wp--preset--color--muted) !important;
}

.wte-view-modes,
.wte-view-mode-selection,
.wte-view-mode-selection-lists {
	fill: var(--wp--preset--color--chalk) !important;
	color: var(--wp--preset--color--chalk) !important;
}

.wte-view-mode-selection svg,
.wte-view-mode-selection svg path {
	fill: var(--wp--preset--color--chalk) !important;
}

.wte-view-mode-selection.active,
.wte-view-mode-selection.active svg,
.wte-view-mode-selection.active svg path,
.wte-view-mode-selection:hover svg,
.wte-view-mode-selection:hover svg path {
	fill: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--brand) !important;
}

.wpte-trip-duration,
.wpte-trip-duration-value,
.wpte-trip-duration *,
[class*="wpte-trip-duration"] {
	color: var(--wp--preset--color--chalk) !important;
}

.wpte-trip-duration-value {
	color: var(--wp--preset--color--white) !important;
	font-weight: 600;
}

/* The sort dropdown sits in the same toolbar. */
.wp-travel-engine-toolbar select,
.wte-sort-by select,
.wp-travel-engine-toolbar .select2-container--default .select2-selection--single {
	background: var(--wp--preset--color--ink-soft) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-color: var(--wp--preset--color--line) !important;
}


/* The archive search input carries no class of its own — it is identified only
   by its wrapper — and WP Travel Engine's own buttons keep a hardcoded #ff1717
   that ignores the theme palette entirely. */
.wpte-trip-search-input input,
.wp-travel-toolbar input[type="search"],
.wpte-toolbar-container input[type="search"] {
	background: var(--wp--preset--color--ink-soft) !important;
	color: var(--wp--preset--color--chalk) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	padding: 0.6em 0.9em !important;
}

.wpte-trip-search-input input::placeholder,
.wp-travel-toolbar input[type="search"]::placeholder {
	color: var(--wp--preset--color--muted) !important;
}

.wpte-trip-search-input svg,
.wpte-trip-search-input svg path {
	fill: var(--wp--preset--color--muted) !important;
}

a.wpte-button,
.wpte-button,
.wpte-button-group a {
	background: var(--wp--preset--color--brand-deep) !important;
	color: var(--wp--preset--color--ink) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

a.wpte-button:hover,
.wpte-button:hover,
.wpte-button-group a:hover {
	background: var(--wp--preset--color--brand-hover) !important;
	color: var(--wp--preset--color--ink) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* "See more details" toggles sit in the same cards. */
.wpte-details-toggler-button,
.wpte-details-toggler-button * {
	color: var(--wp--preset--color--chalk) !important;
}

.wpte-details-toggler-button:hover {
	border-color: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--brand) !important;
}


/* The sort control is a custom dropdown (not a <select>), painted white with
   rgba(0,0,0,.8) text, plus a panel of options that opens below it. */
.wte-filterby-dropdown,
.wte-ordering,
.wpte-trip__adv-field,
.wpte__select-field,
.wte-filterby-dropdown .wpte__input,
.wte-filterby-dropdown ul,
.wte-filterby-dropdown li {
	background-color: var(--wp--preset--color--ink-soft) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.wte-filterby-dropdown {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
}

.wte-filterby-dropdown li:hover,
.wte-filterby-dropdown li.selected,
.wte-filterby-dropdown li[aria-selected="true"] {
	background-color: var(--wp--preset--color--mist) !important;
	color: var(--wp--preset--color--brand) !important;
}

.wte-filterby-dropdown svg,
.wte-filterby-dropdown svg path {
	fill: var(--wp--preset--color--muted) !important;
}


/* Two independent causes stack on the checkout checkbox:
     1. WP Travel Engine sets `appearance:none` on every checkbox site-wide,
        removing the native control (handled above);
     2. WooCommerce sets `display:inline` via
        `.woocommerce form .form-row input.input-checkbox` — and an inline
        element ignores width, so the now-appearance-less box collapsed to a
        2px sliver regardless of the width set above.
   This rule outranks Woo's by one element and restores the box. */
body .woocommerce form .form-row input.input-checkbox,
body .woocommerce form .form-row input.input-radio,
body .woocommerce-checkout input.input-checkbox,
body .woocommerce form .form-row input[type="checkbox"],
body .woocommerce form .form-row input[type="radio"] {
	display: inline-block;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: -2px 0.55em 0 0;
	vertical-align: middle;
	float: none;
}

/* The label wrapping it should sit on one line with the box. */
body .woocommerce form .form-row label.checkbox,
body .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.15em;
	color: var(--wp--preset--color--chalk);
}


/* ------------------------------------------------------------ pillar cards

   Innovations / DIY Guides / Adventure / Support carried only a 1px #363537
   outline, which is nearly invisible against #0d0c0f — they read as loose
   text. A raised fill plus a brand edge makes each one a distinct card. */
.curbover-pillar {
	position: relative;
	overflow: hidden;
}

.curbover-pillar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--wp--preset--color--brand);
}

.curbover-pillar {
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.curbover-pillar:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 55%, transparent) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------- trip card alignment

   Trip titles run to one or two lines depending on the name, and everything
   below them — the "See more details" toggle, the duration, the button —
   inherited that difference, so the controls sat at different heights across
   a row. Reserving two lines on the title squares up the toggle and duration;
   pinning the button group to the bottom of a full-height card squares up the
   call to action even when a title needs three lines.
*/
h2.category-trip-title {
	/* Reserve enough lines that every card in a row starts its toggler at the
	   same height. Two lines is enough in the two-up layout, but at three
	   columns the cards narrow and the longest tour name ("Spiti 2026 —
	   Kinnaur, Spiti & Tirthan Valley Expedition") wraps to three, which left
	   its "See more details" sitting a line lower than its neighbours'. */
	min-height: 2.8em;           /* 2 x 1.4 line-height */
	line-height: 1.4;
	margin-bottom: 0.4em;
}

@media (min-width: 1000px) {
	h2.category-trip-title {
		min-height: 4.2em;       /* 3 x 1.4 line-height */
	}
}

.category-trips-single-inner-wrap {
	height: 100%;
}

.category-trip-content-wrap {
	flex: 1 1 auto;
}

/* The cards themselves already line up — the budget block is a uniform 101px
   in every one. The button drifted *inside* that block: trips without a
   duration row have nothing above the button, so it rode up. Making the block
   a column and pushing the button group to its end fixes it whatever
   combination of duration/price a given trip has. */
.category-trip-content-wrap .category-trip-budget {
	display: flex;
	flex-direction: column;
}

.category-trip-budget .wpte-button-group {
	margin-top: auto;
}

@media (max-width: 560px) {
	h2.category-trip-title { min-height: 0; }
}

/* ------------------------------------------------------ payment method mark

   Razorpay ships rzp_payment_icon.svg — their dark navy brand mark on a
   transparent background, which all but vanishes on the #232225 payment
   panel. Recolouring or inverting a payment brand is not appropriate, so it
   sits on a light chip instead, the way dark-theme checkouts normally do.
*/
.wc_payment_method label img,
.payment_methods li img,
li.payment_method_razorpay label img {
	background: #ffffff;
	/* Woo zeroes padding on payment icons at a higher specificity, so the chip
	   needs !important or the mark sits flush against its edges. */
	padding: 6px 10px !important;
	border-radius: 8px;
	max-height: 44px;
	width: auto;
	vertical-align: middle;
	box-sizing: content-box;
}


/* ============================================================ font hygiene

   Form controls do not inherit font-family from their parent — the UA
   stylesheet gives them a system face — so every <button> on the site was
   rendering in Arial. That was visible on WP Travel Engine's "See more
   details" toggle and WooCommerce's mini-cart quantity steppers.

   Icon glyphs are drawn by ::before/::after with their own explicit families
   (WooCommerce, dashicons), so those are unaffected by this.
*/
button,
input,
select,
textarea,
optgroup {
	font-family: inherit;
}

.wpte-details-toggler-button,
.wc-block-components-quantity-selector__button,
.wpte-button,
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--display);
}

/* The 2Low product description carries its own stack — -apple-system for body
   copy and "Barlow"/Impact for headings (note: Barlow, not Barlow Condensed).
   It was the only place on the site using either. */
body #co2l,
body #co2l p,
body #co2l li,
body #co2l td,
body #co2l th,
body #co2l summary,
body #co2l cite,
body #co2l .co-lead,
body #co2l .co-sub,
body #co2l .co-faq-a {
	font-family: var(--wp--preset--font-family--body);
}

body #co2l h1,
body #co2l h2,
body #co2l h3,
body #co2l .co-hero h1,
body #co2l .co-stats .n,
body #co2l .co-chip,
body #co2l ol.co-steps li::before {
	font-family: var(--wp--preset--font-family--display);
}


/* ------------------------------------------------------ top menu hover state

   The menu had a colour-only hover. A filled pill gives a larger, easier
   target and makes the current position obvious. Padding is on the link so the
   fill wraps the label rather than the whole row. */
/* DM Sans is a much wider face than the condensed one it replaced, so the
   menu needs less tracking and tighter pills to hold a single row. */
.curbover-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.45em 0.6em;
	border-radius: 8px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.curbover-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.curbover-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--brand);
}

.curbover-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--brand);
}

/* Tighten the gap between items so the pills do not run together. */
.curbover-header .wp-block-navigation .wp-block-navigation__container {
	gap: 0.15rem;
}

/* -------------------------------------------------------- testimonial avatar

   The original site showed a 70px round photo beside three of the four
   quotes; the fourth had none there either, so it has none here.
*/
.curbover-avatar {
	flex: 0 0 auto;
	margin: 0;
}

.curbover-avatar img {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	object-fit: cover;
	display: block;
	border: 2px solid var(--wp--preset--color--line);
}


/* A product name is not a page headline — it was inheriting the h1 display
   size and rendering at 64px next to an 18px price. */
.single-product .wp-block-post-title,
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title {
	font-size: 1.875rem;
	line-height: 1.2;
}

/* Same for a single trip and a single post: the title should lead, not shout. */
.single-trip .wp-block-post-title,
.wpte-single-trip h1 {
	font-size: 2rem;
	line-height: 1.2;
}


/* The 2Low description is the only product carrying a full structured
   document (~20k characters of hero, panels, steps, spec table and FAQ) with
   its own pixel type scale. Every other product description is plain body copy
   at 16px / 1.7 — the GPS Tracker SIM is the only other one with any text.

   Body copy here is matched to that exactly. The headings keep a hierarchy,
   because a document this long is unreadable as one flat size, but they are
   pulled right in so nothing in the description outsizes normal product copy
   by more than a step.
*/
body #co2l,
body #co2l p,
body #co2l li,
body #co2l td,
body #co2l th,
body #co2l div,
body #co2l .co-lead,
body #co2l .co-sub,
body #co2l .co-faq-a,
body #co2l .co-quote,
body #co2l summary {
	font-size: 1rem;
	line-height: 1.7;
}

body #co2l .co-hero h1,
body #co2l h1 {
	font-size: 1.5rem;
	line-height: 1.25;
}

body #co2l h2 {
	font-size: 1.25rem;
	line-height: 1.3;
}

body #co2l h3 {
	font-size: 1.0625rem;
	line-height: 1.4;
}

body #co2l .co-stats .n { font-size: 1.125rem; }
body #co2l .co-chip     { font-size: 1rem; }
body #co2l .co-eyebrow  { font-size: 0.75rem; }
body #co2l cite         { font-size: 0.875rem; }


/* ==================================== WP Travel Engine — single trip page

   The trip tab bar and itinerary keep the plugin's light-theme foregrounds:
   rgb(15,29,35) ink on our near-black ground, which measures 1.13:1 — the
   inactive tab, the day titles and the expand-all label were all invisible.
   The bar itself is white and pins at top:32px with z-index 1111, so it also
   sat on top of the site header.

   Note the earlier rules for this page were scoped to `.wpte-single-trip`,
   which does not wrap the tab bar — hence it stayed white.
*/

/* --- the tab bar, static and pinned --- */
.nav-tab-wrapper {
	background: var(--wp--preset--color--ink) !important;
	border-bottom: 1px solid var(--wp--preset--color--line) !important;
	/* Sit below the sticky header rather than over it, and never above it. */
	top: var(--curbover-header-h, 126px) !important;
	z-index: 90 !important;
}

body.admin-bar .nav-tab-wrapper {
	top: calc(var(--curbover-header-h, 126px) + 32px) !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .nav-tab-wrapper {
		top: calc(var(--curbover-header-h, 126px) + 46px) !important;
	}
}

.nav-tab,
.nav-tab-wrapper a,
.tab-anchor-wrapper a {
	color: var(--wp--preset--color--chalk) !important;
	background: transparent !important;
	border-color: transparent !important;
}

.nav-tab:hover,
.nav-tab-active,
.nav-tab.nav-tab-active,
.tab-anchor-wrapper.nav-tab-active a {
	color: var(--wp--preset--color--brand) !important;
	border-bottom: 2px solid var(--wp--preset--color--brand) !important;
}

/* --- itinerary day titles --- */
/* The day heading is split in two: a `.title` element holding "Day 01 :" and a
   bare, class-less <span> holding the date and place. They are coloured
   separately, so the span needs to inherit or half the heading stays dark. */
.tab-content .title,
[class*="itinerary"] .title,
.nb-configurations .title,
.wte-itinerary-wrapper .title {
	color: var(--wp--preset--color--white) !important;
}

/* The date/place half lives in `div.itinerary-title` — a different element
   from `.title`, and it colours its child span by inheritance. */
.itinerary-title,
.itinerary-title span,
.wte-itinerary-head-wrap .itinerary-title,
.accordion-tabs-toggle .itinerary-title {
	color: var(--wp--preset--color--white) !important;
}

.tab-content .title span,
[class*="itinerary"] .title span,
.nb-configurations .title span,
.wte-itinerary-wrapper .title span {
	color: inherit !important;
}

/* The mini-cart count sat green-on-green. */
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--ink) !important;
	font-weight: 700;
}

/* --- the expand/collapse switch label --- */
.aib-button-label,
.aib-button-toggle .aib-button-label,
.wp-travel-engine-itinerary-header .aib-button-label {
	color: var(--wp--preset--color--chalk) !important;
}

/* Itinerary body copy and day meta. */
.wte-itinerary-wrapper p,
.tab-content .wpte-itinerary-content,
.tab-content .wpte-itinerary-content * {
	color: var(--wp--preset--color--chalk);
}


/* WPTE sets white button text at
   `.category-trips-single.wpte_new-layout .category-trips-single-inner-wrap …`
   with !important, which outranks the plain `.wpte-button` rule earlier in this
   file. White on the brand green is 2.7:1; dark text on it is 6.8:1. */
body .category-trips-single .wpte-button,
body .category-trips-single.wpte_new-layout .wpte-button,
body .wpte-button-group .wpte-button,
body a.wpte-button {
	color: var(--wp--preset--color--ink) !important;
}

/* ------------------------------------------------------------- mini cart

   The mini-cart drawer is what opens from the cart icon in the header. It
   stayed on WooCommerce's white panel while inheriting the theme's light text,
   so the whole thing was white-on-white — the title measured 1:1.
*/
.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-drawer__content,
.wp-block-woocommerce-mini-cart-contents,
.wp-block-woocommerce-filled-mini-cart-contents-block,
.wp-block-woocommerce-empty-mini-cart-contents-block {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--chalk) !important;
}

.wc-block-mini-cart__title,
.wc-block-mini-cart__title *,
.wp-block-woocommerce-mini-cart-title-block,
.wp-block-woocommerce-mini-cart-title-label-block {
	background-color: transparent !important;
	color: var(--wp--preset--color--white) !important;
}

.wc-block-mini-cart__items,
.wc-block-mini-cart__footer,
.wc-block-cart-item__wrap,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-product-price,
.wc-block-mini-cart__footer-subtotal,
.wc-block-mini-cart__footer-actions {
	background-color: transparent !important;
	color: var(--wp--preset--color--chalk) !important;
}

.wc-block-mini-cart__footer {
	border-top: 1px solid var(--wp--preset--color--line) !important;
}

.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input {
	background: var(--wp--preset--color--ink-soft) !important;
	color: var(--wp--preset--color--chalk) !important;
	border-color: var(--wp--preset--color--line) !important;
}

.wc-block-mini-cart__drawer .wc-block-components-button,
.wc-block-mini-cart__footer-actions .wc-block-components-button {
	background: var(--wp--preset--color--brand-deep) !important;
	color: var(--wp--preset--color--ink) !important;
	border-radius: 999px !important;
}

.wc-block-components-drawer__close,
.wc-block-components-drawer__close svg {
	color: var(--wp--preset--color--chalk) !important;
	fill: var(--wp--preset--color--chalk) !important;
}


/* ============================== WP Travel Engine — colour and legibility

   The plugin paints itself from its own `wptravelengine_appearance` option
   (primary_color / icon_color), which now carries the CurbOver green — that is
   set in apply-rebuild.sh, so it survives a rebuild. Chasing individual red
   selectors here proved unnecessary once that option was corrected.

   What the option does NOT fix is text sitting on those coloured surfaces:
   WPTE hardcodes white, which is 2.7:1 on the green. These rules handle that.
*/
body .category-trips-single.wpte_new-layout .category-trips-single-inner-wrap .wpte-button-group .wpte-button,
body .category-trips-single .category-trips-single-inner-wrap .wpte-button-group .wpte-button,
body a.wpte-button,
body .wpte-button {
	color: var(--wp--preset--color--ink) !important;
}

span.duration,
.duration,
.wpte-duration {
	color: var(--wp--preset--color--ink) !important;
}

.wpcf7-form-control.wpcf7-submit,
input.search-submit,
.wpte-single-trip input[type="submit"],
.wpte-single-trip button[type="submit"] {
	color: var(--wp--preset--color--ink) !important;
}

.dashicons-arrow-down,
.dashicons-arrow-up,
.accordion-tabs-toggle .dashicons {
	color: var(--wp--preset--color--ink) !important;
}


/* Itinerary timeline dots. The first and last days get a 48px solid marker,
   but the days in between are 14px circles filled white with a green ring —
   a light-theme choice that reads as a hole punched in the dark page. */
.itinerary-row .title::before,
.wte-itinerary-head-wrap .title::before {
	background-color: var(--wp--preset--color--brand) !important;
	border-color: var(--wp--preset--color--brand) !important;
}


/* ------------------------------------------------ product card alignment

   Product names run to one or two lines, and everything under them inherited
   that difference, so the price and Add to cart button sat at different
   heights across a row (21px apart — exactly one line).

   Two things together: reserve two lines on the title so the price lines up,
   and pin the button to the bottom of a column-flex card so it lines up even
   when a name needs three lines.
*/

/* --- block-based grid (shop, archives, Related products) --- */
.wc-block-product-template > li {
	display: flex;
	flex-direction: column;
}

.wc-block-product-template > li > .wp-block-post-title {
	min-height: 2.7em;          /* 2 x 1.35 line-height */
}

.wc-block-product-template > li > .wp-block-button,
.wc-block-product-template > li > .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* --- classic [products] shortcode grid (home page Workshop band) --- */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.5em;          /* 2 x 1.25 line-height */
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin-top: auto;
	align-self: flex-start;
}

/* Images must not stretch to fill the flex column. */
.wc-block-product-template > li > .wp-block-post-featured-image,
.woocommerce ul.products li.product > a:first-of-type {
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.wc-block-product-template > li > .wp-block-post-title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		min-height: 0;
	}
}


/* ------------------------------------------------------------ touch targets

   The header controls are icon-sized: the menu trigger renders at 24x24 and
   the account/cart icons at 36x36. Below ~44px they are awkward to hit on a
   phone, so the tappable area is padded out without changing the icon size.
*/
@media (max-width: 782px) {
	.curbover-header .wp-block-navigation__responsive-container-open,
	.curbover-header .wc-block-customer-account__link,
	.curbover-header .wc-block-mini-cart__button {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Buttons run full-bleed-ish on a phone so they are easy to hit. */
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}


/* In a two-up product grid on a phone the card is ~150px wide, and an
   uppercase "Add to cart" at 14px with 0.12em tracking wraps to two lines.
   Tightening the label (not body copy) keeps it on one. */
@media (max-width: 560px) {
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.wpte-button {
		font-size: 0.8125rem;
		letter-spacing: 0.06em;
		padding-left: 1rem;
		padding-right: 1rem;
		text-align: center;
	}
}


/* ===================================== mobile menu overlay

   The header used to carry `backdrop-filter` for a frosted-glass effect. That
   is why the mobile menu opened as a ~125px scrollable sliver instead of a
   full-screen panel: an element with backdrop-filter becomes the *containing
   block for fixed-position descendants*, so the overlay's `top:0; bottom:0`
   resolved against the header's own 126px box rather than the viewport.

   The blur is now applied only from 600px up — above the width where the
   overlay menu is used — so the effect survives on desktop, where it is
   actually visible, without trapping the overlay on phones.
*/
@media (min-width: 600px) {
	.curbover-header {
		backdrop-filter: saturate(150%) blur(10px);
	}
}

/* Belt and braces: pin the open overlay to the viewport regardless of what any
   ancestor does. dvh rather than vh so mobile browser chrome does not clip it. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	max-height: 100dvh;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	/* Translucent so the page reads through, with a blur behind it so the links
	   stay legible over whatever happens to be underneath. backdrop-filter is
	   safe here — it only traps fixed *descendants*, and this panel has none.
	   Solid fallback first for browsers without backdrop-filter, since 72% alpha
	   over arbitrary photography is not reliably readable on its own. */
	/* !important: core's .wp-block-navigation:not(.has-background) rule keeps
	   winning this even at equal specificity and later load order. */
	background-color: rgba(13, 12, 15, 0.62) !important;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		background-color: rgba(13, 12, 15, 0.25) !important;
		-webkit-backdrop-filter: blur(4px) saturate(120%);
		backdrop-filter: blur(4px) saturate(120%);
	}
}

/* Lay the links out down the page, comfortably tappable. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: flex-start;
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.85rem 0.5rem;
	font-size: 1.25rem;
	color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--wp--preset--color--brand);
}

/* The close button needs to sit clear of the links and be easy to hit. */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
	min-width: 44px;
	min-height: 44px;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
}

/* Links sit on a translucent ground now, so give them a shadow — over a bright
   photograph the white text alone is not dependable. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 1),
		0 0 8px rgba(0, 0, 0, 0.95),
		0 2px 18px rgba(0, 0, 0, 0.9);
}