/**
 * Tasslyckan — shop styles.
 *
 * Layered on top of WooCommerce's own stylesheet. Covers the product card
 * from the design, plus the single product, cart and checkout pages so the
 * whole purchase flow matches.
 */

/* --------------------------------------------------------------------------
   1. Shop archives
   The shop and category pages render through the theme's own templates and
   the tasslyckan/product-grid block, which carries its own stylesheet. The
   classic ul.products markup this file used to style never appears in a
   block theme, so those rules were dead and have been removed.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. WooCommerce's own buttons (single product, cart, checkout)
   -------------------------------------------------------------------------- */

.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--button);
	padding: 17px 28px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1;
	transition: background-color var(--wp--custom--transition--base);
}

.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: #3b362d;
	color: var(--wp--preset--color--base);
}

/* The primary action on a product page is green, as in the design. */
.woocommerce div.product form.cart button.single_add_to_cart_button {
	background-color: var(--wp--preset--color--primary);
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--primary-strong);
}

/* --------------------------------------------------------------------------
   3. Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-strong);
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: var(--wp--custom--radius--card);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--wp--preset--color--border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: var(--wp--preset--color--surface-alt);
	border-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--chip) var(--wp--custom--radius--chip) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* --------------------------------------------------------------------------
   4. Notices
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius--chip);
	border-top: 0;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background-color: var(--wp--preset--color--primary-tint);
	border-left: 3px solid var(--wp--preset--color--primary);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	background-color: var(--wp--preset--color--sand-tint);
	border-left: 3px solid var(--wp--preset--color--sand);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background-color: var(--wp--preset--color--plum-tint);
	border-left: 3px solid var(--wp--preset--color--plum);
}

/* --------------------------------------------------------------------------
   5. Cart and checkout
   -------------------------------------------------------------------------- */

.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--line--faint);
	border-radius: var(--wp--custom--radius--card);
}

.wc-block-components-text-input input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: var(--wp--custom--line--medium);
	border-radius: var(--wp--custom--radius--chip);
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	background-color: var(--wp--preset--color--surface);
}

.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary-tint);
	outline-offset: 0;
}

.woocommerce table.shop_table {
	border-radius: var(--wp--custom--radius--card);
	border-color: var(--wp--preset--color--border);
}

.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Empty states
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-info.cart-empty,
.wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
}