/* ==========================================================================
   Ciao Italia Pizza – WooCommerce Overrides
   Scoped to .woocommerce classes. Colors via CSS custom properties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   General WooCommerce layout
   -------------------------------------------------------------------------- */
.woocommerce-page .woocommerce,
.woocommerce {
	max-width: 1280px;
	margin-inline: auto;
	padding: 1.5rem 1rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt {
	background-color: var(--ciao-primary);
	color: #fff;
	border: none;
	border-radius: var(--ciao-radius);
	font-weight: 600;
	font-size: 1rem;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	transition: background-color var(--ciao-transition), transform var(--ciao-transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--ciao-primary-dk);
	color: #fff;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Messages / notices
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--ciao-primary);
}
.woocommerce-error { border-top-color: var(--ciao-error); }

.woocommerce-message a.button,
.woocommerce-info a.button {
	background-color: var(--ciao-primary);
}

/* --------------------------------------------------------------------------
   Product cards (shop / menu page)
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
	background: var(--ciao-surface);
	border: 1px solid var(--ciao-border);
	border-radius: var(--ciao-radius-lg);
	overflow: hidden;
	box-shadow: var(--ciao-shadow-sm);
	transition: box-shadow var(--ciao-transition), transform var(--ciao-transition);
	padding: 0;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--ciao-shadow);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ciao-text);
	padding: 0 1rem;
	margin-top: 0.75rem;
}
.woocommerce ul.products li.product .price {
	color: var(--ciao-primary);
	font-weight: 700;
	font-size: 1.1rem;
	padding: 0 1rem;
}
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button {
	margin: 0.75rem 1rem 1rem;
	width: calc(100% - 2rem);
}
.woocommerce ul.products li.product img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Product single page
   -------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery {
	border-radius: var(--ciao-radius-lg);
	overflow: hidden;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ciao-primary);
	font-size: 1.5rem;
	font-weight: 700;
}
.woocommerce div.product .single_add_to_cart_button {
	background-color: var(--ciao-primary);
	font-size: 1.1rem;
	padding: 1rem 2rem;
	min-height: 52px;
	border-radius: var(--ciao-radius);
	width: 100%;
}
@media (min-width: 600px) {
	.woocommerce div.product .single_add_to_cart_button { width: auto; }
}

/* --------------------------------------------------------------------------
   Cart page
   -------------------------------------------------------------------------- */
.woocommerce-cart table.cart td.actions .coupon .input-text {
	min-height: 44px;
	border-radius: var(--ciao-radius-sm);
	border: 1.5px solid var(--ciao-border);
}
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--ciao-surface-alt);
	border: 1px solid var(--ciao-border);
	border-radius: var(--ciao-radius-lg);
	padding: 1.5rem;
}
.woocommerce-cart .cart_totals h2 {
	font-size: 1.25rem;
	color: var(--ciao-text);
	margin-bottom: 1rem;
}
.woocommerce-cart a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background-color: var(--ciao-primary);
	font-size: 1.1rem;
	padding: 1rem;
	border-radius: var(--ciao-radius);
}

/* --------------------------------------------------------------------------
   Checkout page
   -------------------------------------------------------------------------- */
.woocommerce-checkout #payment {
	background: var(--ciao-surface-alt);
	border-radius: var(--ciao-radius-lg);
	padding: 1.5rem;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--ciao-border);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0.5rem 0;
}
/* German legal: order button */
#place_order {
	background-color: var(--ciao-primary);
	font-size: 1.1rem;
	width: 100%;
	padding: 1rem;
	border-radius: var(--ciao-radius);
	min-height: 52px;
	letter-spacing: 0.01em;
}
#place_order:hover { background-color: var(--ciao-primary-dk); }

.woocommerce form .form-row label {
	font-weight: 600;
	color: var(--ciao-text);
	margin-bottom: 0.25rem;
	display: block;
}
.woocommerce form .form-row .required { color: var(--ciao-primary); }

/* --------------------------------------------------------------------------
   Order received / thank you page
   -------------------------------------------------------------------------- */
.woocommerce-order-received .woocommerce-order {
	text-align: center;
	padding: 2rem 1rem;
}
.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ciao-success);
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   My Account
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--ciao-surface-alt);
	border-radius: var(--ciao-radius-lg);
	padding: 1.5rem;
	border: 1px solid var(--ciao-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0; padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: var(--ciao-radius-sm);
	color: var(--ciao-text);
	font-weight: 500;
	transition: background var(--ciao-transition), color var(--ciao-transition);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--ciao-primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Sale badge / out of stock
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background-color: var(--ciao-accent);
	color: var(--ciao-text);
	border-radius: var(--ciao-radius-sm);
	font-weight: 700;
}
.woocommerce ul.products li.product.outofstock .button {
	background-color: var(--ciao-text-muted);
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Responsive – stack checkout on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.woocommerce-page .col2-set .col-1,
	.woocommerce-page .col2-set .col-2 {
		width: 100%;
		float: none;
	}
	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-cart .cart-collaterals .cross-sells {
		width: 100%;
		float: none;
	}
	.woocommerce table.shop_table {
		font-size: 0.875rem;
	}
}