/* ── Botanistas brand layer ──────────────────────────────────────────────
   Design system: claude.ai/design — "Botanistas Design System".

   Colours and fonts are driven by the Customizer option defaults (see
   inc/botanistas-brand.php and inc/customizer/fields/typography.php). This
   file only carries the parts of the system those options can't express:
   near-square radii, hairline borders, uppercase tracked button labels,
   ink-coloured prices, and the soft/low shadow scale.

   Elementor-built pages (the homepage) are styled in Elementor and are
   deliberately left alone here.
   ──────────────────────────────────────────────────────────────────────── */

:root {
	/* Ink / neutral ramp — warm-tinted, never pure black. */
	--bt-ink-900: #16170f;
	--bt-ink-800: #1f2117;
	--bt-ink-700: #3a3c32;
	--bt-ink-500: #6b6d60;
	--bt-ink-300: #a8a99c;
	--bt-ink-100: #e3e2d8;

	/* Paper / surfaces. */
	--bt-paper-000: #ffffff;
	--bt-paper-050: #faf8f2;
	--bt-paper-100: #f3f0e7;

	/* Botanical greens. */
	--bt-leaf-900: #20281c;
	--bt-leaf-700: #34432d;
	--bt-leaf-300: #82967a;
	--bt-leaf-100: #dce2d3;

	/* Clay accent. */
	--bt-clay-600: #a9613e;

	/* Radii — restrained, near-square. */
	--bt-radius-xs: 2px;
	--bt-radius-sm: 4px;
	--bt-radius-md: 8px;

	/* Shadows — soft, low, diffuse only. Never hard or glowing. */
	--bt-shadow-xs: 0 1px 2px rgba(22, 23, 15, 0.05);
	--bt-shadow-sm: 0 4px 16px rgba(22, 23, 15, 0.06);
	--bt-shadow-md: 0 12px 32px rgba(22, 23, 15, 0.08);

	/* Motion — gentle, no bounce. */
	--bt-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--bt-dur-fast: 160ms;
	--bt-dur: 280ms;
}

/* ── Prices ───────────────────────────────────────────────────────────────
   The design system sets --price to ink-900. Shoptimizer paints prices with
   the general "swatch" colour, which we've set to forest green for accents,
   so prices are pulled back to ink here. Sale prices keep the clay accent. */
.woocommerce div.product p.price,
.woocommerce div.product p.price .amount,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce-cart .product-price .amount,
.woocommerce-cart .product-subtotal .amount {
	color: var(--bt-ink-900);
}

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
	color: var(--bt-ink-300);
}

.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins {
	color: var(--bt-clay-600);
	text-decoration: none;
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Uppercase tracked sans label, near-square corners, restrained fills.
   Colours come from the Customizer options; this is geometry and type. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wp-block-button__link,
.shoptimizer-floating-cart .single_add_to_cart_button {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--bt-radius-sm);
	transition:
		background var(--bt-dur-fast) var(--bt-ease-out),
		color var(--bt-dur-fast) var(--bt-ease-out),
		transform var(--bt-dur-fast) var(--bt-ease-out);
}

/* Press — translateY(1px), never a scale-down. */
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
	transform: translateY(1px);
}

/* Secondary buttons are an ink outline on paper. */
/* Scoped deliberately: an earlier `.wc-forward:not(.checkout)` here was too
   broad and leaked the outline onto the links inside store notices and the
   mini cart, which are plain text links rather than buttons. */
.woocommerce a.button.wc-backward,
.woocommerce .return-to-shop .button,
.woocommerce-cart .continue-shopping .button,
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions button {
	background-color: transparent;
	color: var(--bt-ink-900);
	border: 1px solid var(--bt-ink-900);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce-cart .continue-shopping .button:hover,
.woocommerce table.cart td.actions .button:hover,
.woocommerce table.cart td.actions button:hover:not(:disabled) {
	background-color: var(--bt-ink-900);
	color: var(--bt-paper-050);
}

/* Update cart sits disabled until a quantity changes — keep it quiet. */
.woocommerce table.cart td.actions button:disabled {
	background-color: transparent;
	border-color: var(--bt-ink-100);
	color: var(--bt-ink-300);
}

/* ── Cart coupon row ─────────────────────────────────────────────────────
   The theme lays the coupon out as two inline-blocks inside a shrink-to-fit
   float. Uppercase tracked button labels are wider than the stock sentence
   case ones, so "Pritaikyti" tipped past the container and wrapped under the
   field. Flex removes the inline whitespace and the wrap along with it.
   Scoped to the theme's own breakpoint — below it the theme stacks these
   full width on purpose. */
@media (min-width: 993px) {
	.woocommerce table.cart td.actions .coupon {
		display: flex;
		align-items: center;
		gap: var(--space-2, 8px);
		overflow: visible;
	}

	.woocommerce table.cart td.actions .coupon .input-text,
	.woocommerce table.cart td.actions .coupon .button {
		margin: 0;
		flex: 0 0 auto;
	}
}

/* ── Store notices ───────────────────────────────────────────────────────
   Stock WooCommerce ships a saturated success green with a dark slab down the
   left edge — loud, and nothing like the palette. Recast as a pale sage wash
   with ink text and a hairline; errors take the clay accent, info takes
   paper. The links inside are tracked text labels, aligned on the same
   centre line as the message. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	background-color: var(--bt-leaf-100);
	color: var(--bt-ink-900);
	border: 1px solid rgba(52, 67, 45, 0.18);
	border-radius: var(--bt-radius-sm);
	box-shadow: none;
}

.woocommerce-info,
.woocommerce-noreviews {
	background-color: var(--bt-paper-100);
	border-color: var(--bt-ink-100);
}

.woocommerce-error {
	background-color: #ebd6c8; /* --clay-100 */
	border-color: rgba(169, 97, 62, 0.3);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-noreviews a:hover {
	color: var(--bt-ink-900);
}

/* Centre the message text and its actions on one line. */
.woocommerce-message .message-inner,
.woocommerce-info .message-inner,
.woocommerce-error .message-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3, 12px) var(--space-5, 24px);
}

.woocommerce-message .message-content,
.woocommerce-info .message-content,
.woocommerce-error .message-content,
.woocommerce-message .buttons-wrapper,
.woocommerce-info .buttons-wrapper,
.woocommerce-error .buttons-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3, 12px) var(--space-5, 24px);
}

/* Notice links are labels, not boxed buttons. Specificity has to clear the
   secondary-button rule above. */
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce-message a.button.wc-forward,
.woocommerce-info a.button.wc-forward,
.woocommerce-error a.button.wc-forward,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	float: none;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--bt-ink-900);
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
	background-color: transparent;
	color: var(--bt-ink-900);
	opacity: 0.7;
}

/* ── Cards, borders, radii ───────────────────────────────────────────────
   Near-square. Hairline borders, no thick rules, no coloured left borders. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce div.product div.images .flex-control-thumbs li img,
.shoptimizer-cart-drawer,
.select2-container--default .select2-selection--single,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border-radius: var(--bt-radius-sm);
}

.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
	border-radius: var(--bt-radius-md);
}

/* Product cards: white fill, barely lifted, photo zooms gently on hover. */
.woocommerce ul.products li.product {
	transition:
		transform var(--bt-dur) var(--bt-ease-out),
		box-shadow var(--bt-dur) var(--bt-ease-out);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: var(--bt-shadow-sm);
}

.woocommerce ul.products li.product a img {
	transition: transform var(--bt-dur-slow, 520ms) var(--bt-ease-out);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}

/* Hairline dividers and table rules. */
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-tabs .panel,
hr,
.shoptimizer-divider {
	border-color: var(--bt-ink-100);
}

/* ── Sale flash ──────────────────────────────────────────────────────────
   Small clay capsule — the single permitted terracotta highlight. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	border-radius: var(--bt-radius-pill, 999px);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: none;
}

/* ── Links ───────────────────────────────────────────────────────────────
   Hover convention is a gentle fade, not a colour jump. */
.entry-content a:not(.button):hover,
.widget a:not(.button):hover,
.site-footer a:hover {
	opacity: 0.7;
	transition: opacity var(--bt-dur-fast) var(--bt-ease-out);
}

/* ── Forms ───────────────────────────────────────────────────────────────
   Quiet hairline fields on paper. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border: 1px solid var(--bt-ink-100);
	background-color: var(--bt-paper-000);
	color: var(--bt-ink-900);
}

/* The catalogue sort control is a bare inline control sitting directly on
   paper — the theme strips its border and draws its own arrow. Keep it out of
   the boxed treatment above; a white pill floating on the warm paper reads as
   a stray card. (Design system: form fields are underline-only, never boxes.)
   background-color only, so the theme's arrow background-image survives. */
.site select.orderby,
.site select.orderby:focus,
.site .woocommerce-ordering select {
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--bt-leaf-700);
	outline: none;
}

/* ── Uppercase tracked labels ────────────────────────────────────────────
   The "PLANTS & MORE" lockup feel, applied to eyebrows and widget titles. */
.widget-area .widget .widget-title,
.woocommerce-tabs ul.tabs li a,
.commercekit-atc-tab-links li a {
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ── Shadows ─────────────────────────────────────────────────────────────
   Replace the theme's harder drop shadows with the soft, low scale. */
.main-navigation ul.menu ul.sub-menu,
.shoptimizer-mini-cart-wrap,
.select2-container--open .select2-dropdown {
	box-shadow: var(--bt-shadow-md);
}

/* ── Weight cap ──────────────────────────────────────────────────────────
   Both brand families ship 300 / 400 / 500 only (see the design system's
   tokens/typography.css). Where the stock theme asks for 600 or 700 there is
   no matching face, so the browser fabricates one — synthesized bold, which
   smears the letterforms and reads off-brand.

   Two layers: switch weight synthesis off globally so any weight we haven't
   listed falls back to the nearest real face instead of a fake one, then cap
   the specific places the theme hard-codes 600/700. The explicit selectors
   carry extra specificity because several of the theme's own rules
   (e.g. `ul.products li.product .button`) out-specify a plain `.button`.

   Note: this also brings <strong>/<b> down to 500. Emphasis is then a 400→500
   step rather than 400→700. If that reads too soft, the fix is to load a real
   600 face rather than to re-enable synthesis. */
*,
*::before,
*::after {
	font-synthesis-weight: none;
}

.site .button,
.site input[type="button"],
.site input[type="reset"],
.site input[type="submit"],
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce div.product p.price,
.woocommerce div.product p.price .amount,
.woocommerce div.product p.price .woocommerce-Price-currencySymbol,
.site .cart-drawer-heading,
.site .woocommerce-mini-cart__empty-message,
.site .menu-toggle .bar-text,
.site .product-out-of-stock,
.site span.onsale,
.site .widget-title,
.site strong,
.site b,
.site .cgkit-as-variation-price .price,
.site .cgkit-as-variation-price .amount,
.site .cgkit-as-variation-price .woocommerce-Price-currencySymbol,
.site .woocommerce-tabs ul.tabs li a,
.site .commercekit-atc-tab-links li a,
.site .woocommerce-tabs ul.tabs li a span,
.site .commercekit-atc-tab span {
	font-weight: 500;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a img,
	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:hover a img {
		transition: none;
		transform: none;
	}
}