/*
 * BlitzBooking - the purchase path: shop archive, product page, cart, checkout, account.
 *
 * Without this file the site would be a designed homepage between an indigo header
 * and an indigo footer, with a stock theme on every page that actually takes money -
 * an amber pill in the header and hero, then a plain black "Add to cart" button on
 * the page where the sale happens. That seam is more visible than no frame at all.
 *
 * Every selector is prefixed body.bbs-shop. Never .woocommerce or .woocommerce-page:
 * those also sit on cart, checkout and my-account and would restyle the checkout
 * by accident.
 */

body.bbs-shop {
	background: var(--bbs-paper);
}

/* The theme's content width squeezes the product grid into a narrow strip. */
body.bbs-shop {
	--wp--style--global--content-size: 1140px;
	--wp--style--global--wide-size: 1240px;
}

/* ------------------------------------------------------------ typography */

body.bbs-shop .wp-block-post-title,
body.bbs-shop .wc-block-components-title,
body.bbs-shop .product_title,
body.bbs-shop .woocommerce-loop-product__title,
body.bbs-shop h1,
body.bbs-shop h2 {
	font-family: var(--bbs-display);
	letter-spacing: -0.02em;
}

body.bbs-shop .product_title,
body.bbs-shop .wp-block-post-title {
	font-weight: 800;
	line-height: 1.12;
}

/* ---------------------------------------------------------------- prices */

body.bbs-shop .price,
body.bbs-shop .wc-block-components-product-price,
body.bbs-shop .woocommerce-Price-amount {
	font-family: var(--bbs-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bbs-text);
}

body.bbs-shop .price del,
body.bbs-shop .wc-block-components-product-price__regular {
	opacity: 0.55;
	font-weight: 500;
}

body.bbs-shop .price ins {
	text-decoration: none;
}

/* The VAT suffix is fine print, not part of the number. */
body.bbs-shop .woocommerce-price-suffix {
	display: block;
	font-family: var(--bbs-body);
	font-size: 0.76rem;
	font-weight: 400;
	color: var(--bbs-muted);
	letter-spacing: 0;
}

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

body.bbs-shop .button,
body.bbs-shop button.button,
body.bbs-shop .wp-element-button,
body.bbs-shop .wc-block-components-button:not(.is-link),
body.bbs-shop .woocommerce-button,
body.bbs-shop .single_add_to_cart_button {
	background: var(--bbs-amber);
	color: var(--bbs-on-amber);
	border: 1px solid var(--bbs-amber);
	border-radius: 999px;
	font-family: var(--bbs-body);
	font-weight: 600;
	padding: 0.8rem 1.5rem;
	line-height: 1.2;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.bbs-shop .button:hover,
body.bbs-shop button.button:hover,
body.bbs-shop .wp-element-button:hover,
body.bbs-shop .wc-block-components-button:not(.is-link):hover,
body.bbs-shop .single_add_to_cart_button:hover {
	background: #ffc154;
	border-color: #ffc154;
	color: var(--bbs-on-amber);
}

/* Secondary actions must not compete with the buy button. */
body.bbs-shop .wc-block-components-button.is-link,
body.bbs-shop .woocommerce-button.wp-element-button.view {
	background: transparent;
	color: var(--bbs-text);
	border-color: var(--bbs-rule-strong);
}

body.bbs-shop :is(a, button, input, select, [tabindex]):focus-visible {
	outline: 3px solid var(--bbs-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- notices */

body.bbs-shop .woocommerce-message,
body.bbs-shop .woocommerce-info,
body.bbs-shop .woocommerce-error,
body.bbs-shop .wc-block-components-notice-banner {
	border-radius: 12px;
	border: 1px solid var(--bbs-rule);
	background: var(--bbs-surface);
	color: var(--bbs-text);
	font-family: var(--bbs-body);
}

body.bbs-shop .woocommerce-message,
body.bbs-shop .wc-block-components-notice-banner.is-success {
	border-left: 4px solid var(--bbs-mint);
}

body.bbs-shop .woocommerce-info,
body.bbs-shop .wc-block-components-notice-banner.is-info {
	border-left: 4px solid var(--bbs-amber);
}

body.bbs-shop .woocommerce-error,
body.bbs-shop .wc-block-components-notice-banner.is-error {
	border-left: 4px solid #b3261e;
}

/* ---------------------------------------------------------- product tiles */

body.bbs-shop .wc-block-product,
body.bbs-shop .wc-block-grid__product,
body.bbs-shop ul.products li.product {
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-rule);
	border-radius: 14px;
	overflow: hidden;
	padding: 0 0 16px;
	transition: border-color 0.15s ease;
}

body.bbs-shop .wc-block-product:hover,
body.bbs-shop ul.products li.product:hover {
	border-color: var(--bbs-ink);
}

body.bbs-shop .wc-block-product img,
body.bbs-shop ul.products li.product img {
	border-radius: 0;
	margin-bottom: 14px;
}

body.bbs-shop .wc-block-product .wc-block-components-product-title,
body.bbs-shop ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bbs-display);
	font-weight: 700;
	font-size: 1.02rem;
	padding-inline: 18px;
}

body.bbs-shop .wc-block-product .wc-block-components-product-price,
body.bbs-shop ul.products li.product .price {
	padding-inline: 18px;
	font-size: 1.15rem;
}

body.bbs-shop .wc-block-product .wp-block-button,
body.bbs-shop ul.products li.product .button {
	margin-inline: 18px;
}

/* ------------------------------------------------------- ordering toolbar */

body.bbs-shop .woocommerce-result-count,
body.bbs-shop .wc-block-product-template__responsive-wrapper .wc-block-components-product-sort-select {
	font-family: var(--bbs-mono);
	font-size: 0.8rem;
	color: var(--bbs-muted);
}

body.bbs-shop select.orderby,
body.bbs-shop .wc-block-components-sort-select__select {
	border: 1px solid var(--bbs-rule-strong);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	background: var(--bbs-surface);
	color: var(--bbs-text);
	font-family: var(--bbs-body);
}

/* ------------------------------------------------------------- pagination */

body.bbs-shop .wc-block-pagination-numbers a,
body.bbs-shop .wc-block-pagination-numbers span,
body.bbs-shop .woocommerce-pagination a,
body.bbs-shop .woocommerce-pagination span {
	font-family: var(--bbs-mono);
	border-radius: 8px;
}

/* --------------------------------------------------------- checkout panel */

/* The withdrawal consent is the one field a customer must read. Give it an
   amber rule so it reads as a deliberate step, not a stray checkbox. */
body.bbs-shop .wc-block-checkout__additional-information-container,
body.bbs-shop .wc-block-checkout__order-notes {
	border-left: 4px solid var(--bbs-amber);
	border-radius: 12px;
	background: var(--bbs-surface);
	padding: 18px 20px;
}

body.bbs-shop .wc-block-components-checkbox__label {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--bbs-text);
}

/* The booked time shown on the cart and checkout lines. */
body.bbs-shop .wc-block-components-product-details__appointment,
body.bbs-shop .wc-block-components-product-details__termin,
body.bbs-shop .variation-Appointment {
	font-family: var(--bbs-mono);
	font-size: 0.84rem;
	color: var(--bbs-text);
}

/* ------------------------------------------------------------ empty cart */

body.bbs-shop .wp-block-woocommerce-empty-cart-block,
body.bbs-shop .cart-empty {
	font-family: var(--bbs-body);
	color: var(--bbs-muted);
}