/**
 * Brand styling for WooCommerce Blocks (laf18).
 *
 * laf18 is a classic theme whose CSS targets the classic WooCommerce markup
 * (.shop_table, ul.products, .woocommerce-checkout). The block-based Cart,
 * Checkout and product blocks output completely different markup, so this file
 * adds Lafeber brand styling on top of the WooCommerce block base styles.
 *
 * Enqueued from inc/woocommerce.php with a dependency on `wc-blocks-style`, so
 * these rules load AFTER the WooCommerce block base CSS and win on equal
 * specificity. Class names verified against reference/plugins/woocommerce
 * (WooCommerce 10.6.1); colors / button shape verified against the live site
 * and the deployed style.css / custom-styles.css.
 *
 * Brand button model (from the live cart/checkout):
 *   - Pill shape: border-radius 25px, white text, subtle shadow.
 *   - BLUE  #0078c2  = standard / secondary buttons (Apply coupon, Update, etc.).
 *   - ORANGE #ff7f00 = primary purchase CTA (Proceed to checkout, Place order).
 * Other tokens: Brown #45220e (headings), Red #aa001b (product links/accents),
 *               Gray #5a5a59 (text), Beige #f3eee5 (panels), White #fff.
 */

/* -------------------------------------------------------------------------
 * Buttons — base pill style + blue (secondary) default
 * ---------------------------------------------------------------------- */

/* Standard / secondary buttons -> brand blue pill (Apply coupon, Apply gift
 * card, Add to cart, etc.). The primary purchase CTAs are overridden to orange
 * below with higher specificity. */
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link) {
	background-color: #0078c2;
	color: #ffffff;
	border-radius: 25px;
	box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.1);
}

.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link):focus,
.wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link):focus {
	background-color: #006aac;
	color: #ffffff;
}

/* Primary purchase CTAs -> brand orange (matches the classic a.checkout-button).
 * Selectors intentionally carry the parent block wrapper so they out-specify the
 * blue base rule above ( .wp-block-woocommerce-cart .wc-block-components-button ),
 * which would otherwise win and keep the button blue. */
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block .wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button {
	background-color: #ff7f00;
	color: #ffffff;
	border-radius: 25px;
	box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.1);
}

.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:not(.is-link):focus,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block .wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-actions-block .wc-block-components-button:not(.is-link):focus {
	background-color: #ff7f00cc;
	color: #ffffff;
}

/* "is-link" style buttons (e.g. edit address / return) -> brand red link. */
.wp-block-woocommerce-cart .wc-block-components-button.is-link,
.wp-block-woocommerce-checkout .wc-block-components-button.is-link {
	color: #aa001b;
}

/* -------------------------------------------------------------------------
 * Headings / titles -> Playfair Display, brand brown
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-cart .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	color: #45220e;
}

/* -------------------------------------------------------------------------
 * Form inputs -> brand blue focus
 * ---------------------------------------------------------------------- */

.wc-block-components-text-input input:focus,
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus-visible {
	border-color: #0078c2;
	box-shadow: 0 0 0 1px #0078c2;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
	color: #0078c2;
}

/* -------------------------------------------------------------------------
 * Cart block
 * ---------------------------------------------------------------------- */

/* White rounded panels on the beige page, matching the live cart cards.
 * WooCommerce's inner rows (title, totals items, gift-card field) only have
 * vertical padding, so their text/dividers run flush to the card edges. Add a
 * horizontal gutter (plus vertical breathing room) on the card so content is
 * inset from the white background. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background-color: #ffffff;
	border-radius: 10px;
	padding: 0.5em 1.5em 1.5em;
}

/* Separate the orange Proceed-to-Checkout button from the totals card. */
.wp-block-woocommerce-proceed-to-checkout-block {
	margin-top: 1.5em;
}

.wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__product-name a {
	color: #aa001b;
	font-weight: 700;
}

.wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__product-name a:hover {
	color: #45220e;
}

.wc-block-cart__totals-title,
.wc-block-components-totals-item__value {
	color: #45220e;
}

/* Empty-cart heading. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	color: #45220e;
}

/* -------------------------------------------------------------------------
 * Checkout block
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-title,
.wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-title,
.wp-block-woocommerce-checkout-billing-address-block .wc-block-components-title,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	color: #45220e;
}

/* -------------------------------------------------------------------------
 * Product blocks (Product Collection / All Products / Products by Category)
 * Match the classic ul.products li.product look (title/price/button).
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-product-collection .wc-block-product-template,
.wp-block-woocommerce-all-products .wc-block-grid__products,
.wp-block-woocommerce-product-category .wc-block-grid__products {
	gap: 2em;
}

.wp-block-woocommerce-product-collection .wp-block-post-title a,
.wc-block-grid__product-title,
.wc-block-components-product-name {
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #45220e;
	font-weight: 700;
}

.wp-block-woocommerce-product-collection .wp-block-post-title a:hover,
.wc-block-grid__product-title:hover {
	color: #0078c2;
}

.wc-block-grid__product-price .price,
.wc-block-components-product-price {
	color: #aa001b;
	font-weight: 700;
}

/* Product "Add to cart" buttons -> brand blue pill. */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
.wp-block-woocommerce-product-collection .wp-block-button__link {
	background-color: #0078c2;
	color: #ffffff;
	border-radius: 25px;
	box-shadow: 0 5px 9px 1px rgba(0, 0, 0, 0.1);
}

.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover,
.wp-block-woocommerce-product-collection .wp-block-button__link:hover {
	background-color: #006aac;
	color: #ffffff;
}

/* -------------------------------------------------------------------------
 * Cart & Checkout page layout (block pages)
 *
 * The theme prints the page title inside an absolutely-positioned hero
 * (.hero .caption, z-index:-1) that is pulled up with large negative margins
 * and assumes a fixed-height banner. On the block Cart/Checkout pages that
 * title lands on top of the blocks ("Checkout" overlapping "Contact
 * information" / "Order summary").
 *
 * Fix: hide ONLY the overlapping hero title (the banner image is kept) and
 * render the page title as a normal in-flow heading above the blocks instead
 * (added in template-parts/content-page.php). Note: hiding the hero title is
 * paired with that heading so the title is preserved, not removed.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .hero .caption,
.woocommerce-checkout .hero .caption {
	display: none;
}

/* Neutralize the classic-checkout content pull (e.g.
 * `.woocommerce-checkout .content-area { margin: -10rem 0 0 !important }` on
 * small screens) that yanked block content up into the banner/title. */
.woocommerce-cart .inner .content-area,
.woocommerce-checkout .inner .content-area {
	margin-top: 0 !important;
}

/* The in-flow page title shown above the blocks. */
.entry-header--block-commerce {
	margin: 0 0 1rem;
}

.woocommerce-cart .entry-header--block-commerce .entry-title,
.woocommerce-checkout .entry-header--block-commerce .entry-title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	color: #45220e;
	font-size: 2.5rem;
	margin: 0;
}