/**
 * Pelagia Book Store — WooCommerce CSS Overrides
 */

/* ── WooCommerce Wrapper ─────────────────────────── */
.woocommerce-main {
	padding-top: 0;
}

/* ── Shop Layout ─────────────────────────────────── */
.shop-layout .content-area > .shop-main {
	min-width: 0;
}

/* ── Loop Overrides (align with product-grid) ────── */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-gap);
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce ul.products li.product {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
}

/* ── Global WooCommerce Sale Badge Override ─────── */
/* Force native Woo badges (e.g. on single product) to match theme's pill style */
.woocommerce span.onsale {
	min-height: auto !important;
	min-width: auto !important;
	padding: 3px 8px !important;
	font-size: 0.625rem !important; /* 10px */
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	color: var(--color-white) !important;
	border-radius: 3px !important;
	z-index: 9 !important; /* Above gallery */
	line-height: 1.4 !important;
	background-color: var(--color-primary) !important; /* Terracotta for sale */
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	margin: 0 !important;
}

/* ── Ordering Dropdown ───────────────────────────── */
.woocommerce-ordering select {
	padding: 0.65rem 2.5rem 0.65rem 1rem;
	min-height: 44px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 1rem;              /* 16px — prevents iOS auto-zoom */
	font-family: var(--font-family);
	color: var(--color-dark);
	background-color: var(--color-white);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(179, 73, 47, 0.12);
}

/* ── Notices ─────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--radius-sm);
	padding: var(--space-4) var(--space-6);
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
	font-family: var(--font-family);
}

.woocommerce-message {
	border-top-color: var(--color-primary) !important;
	background: rgba(179, 73, 47, 0.05) !important;
}

.woocommerce-message .button,
.woocommerce-info .button {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
	border: none !important;
	font-family: var(--font-family) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--font-weight-semibold) !important;
	padding: 0.5rem 1.25rem !important;
	border-radius: var(--radius-sm) !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	transition: background-color var(--transition-fast) !important;
}

.woocommerce-message .button:hover { background-color: var(--color-primary-dark) !important; }

/* ── Add to Cart Button ──────────────────────────── */
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce a.button {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
	font-family: var(--font-family) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--font-weight-semibold) !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	padding: 0.85rem 2rem !important;
	border-radius: var(--radius-sm) !important;
	border: 2px solid var(--color-primary) !important;
	cursor: pointer !important;
	transition: all var(--transition-base) !important;
	line-height: 1 !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
	background-color: var(--color-primary-dark) !important;
	border-color: var(--color-primary-dark) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--shadow-md) !important;
}

.woocommerce .alt.button {
	background-color: transparent !important;
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}
.woocommerce .alt.button:hover {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

/* ── Quantity Input ──────────────────────────────── */
.woocommerce .quantity input.qty {
	font-family: var(--font-family) !important;
	border: 1.5px solid var(--color-border) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0.6rem 0.75rem !important;
	font-size: 1rem !important;   /* 16px — prevents iOS auto-zoom */
	min-height: 44px !important;  /* WCAG touch target */
	text-align: center;
	width: 70px !important;
}

/* ── Price ───────────────────────────────────────── */
.woocommerce .price,
.woocommerce span.price,
.woocommerce p.price {
	color: var(--color-primary) !important;
	font-size: var(--text-lg) !important;
	font-weight: var(--font-weight-bold) !important;
}

.woocommerce .price del {
	color: var(--color-muted) !important;
	font-size: var(--text-base) !important;
	font-weight: var(--font-weight-regular) !important;
}

/* ── Star Rating ─────────────────────────────────── */
.woocommerce .star-rating,
.woocommerce .star-rating span {
	color: #F59E0B !important;
}

/* ── Product Tabs ────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--color-border);
	padding: 0;
	list-style: none;
	display: flex;
	gap: 0;
	margin-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: none !important;
	background: none !important;
	border-radius: 0;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-family) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--font-weight-semibold) !important;
	color: var(--color-muted) !important;
	padding: 0.75rem 1.5rem !important;
	border-bottom: 2px solid transparent !important;
	transition: color var(--transition-fast), border-color var(--transition-fast) !important;
	display: block;
	margin-bottom: -2px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-primary) !important;
	border-bottom-color: var(--color-primary) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: 1.5rem 0 !important;
	border: none !important;
	margin: 0 !important;
}

/* ── Related Products ────────────────────────────── */
.related.products > h2,
.upsells.products > h2 {
	font-size: var(--text-h2) !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-secondary) !important; /* Navy */
	margin-bottom: 1.5rem !important;
	padding-top: 2rem !important;
	border-top: 2px solid var(--color-border) !important;
}

/* ── Checkout ────────────────────────────────────── */
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
	font-family: var(--font-family) !important;
	border: 1.5px solid var(--color-border) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0.75rem 1rem !important;
	min-height: 48px !important;          /* Comfortable tap target */
	font-size: 1rem !important;           /* 16px — prevents iOS auto-zoom */
	color: var(--color-dark) !important;
	background-color: var(--color-white) !important;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(179, 73, 47, 0.12) !important;
	outline: none !important;
}

/* ── Cart Table ──────────────────────────────────── */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
	font-family: var(--font-family) !important;
	font-size: var(--text-body) !important;  /* 16px */
	padding: 1rem 0.75rem !important;
}

.woocommerce .shop_table thead th {
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-dark) !important;
	border-bottom: 2px solid var(--color-border) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	font-size: var(--text-xs) !important;
}

/* ── Widget: Price Filter ────────────────────────── */
.widget_price_filter .ui-slider .ui-slider-range { background-color: var(--color-primary); }
.widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--color-white);
	border: 2px solid var(--color-primary);
}
.widget_price_filter .price_slider_amount .button {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
	border-radius: var(--radius-sm) !important;
	font-size: var(--text-xs) !important;
	padding: 0.4rem 1rem !important;
}

/* ── Sidebar Widgets ─────────────────────────────── */
.shop-sidebar .widget {
	padding: var(--space-6);
	background: var(--color-bg-gray);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-5);
}

.shop-sidebar .widget:last-child { margin-bottom: 0; }

.shop-sidebar .widget-title {
	font-size: var(--text-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-dark);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.shop-sidebar ul li {
	font-size: var(--text-sm);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
}

.shop-sidebar ul li:last-child { border-bottom: none; }

.shop-sidebar ul li a {
	color: var(--color-body);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	transition: color var(--transition-fast);
}

.shop-sidebar ul li a:hover { color: var(--color-primary); }

/* ── WooCommerce Blocks (Cart / Checkout Empty States) ──────── */

/* Wrapper */
.wc-block-grid__product,
.wc-block-components-product-card {
	display: flex !important;
	flex-direction: column !important;
	background: var(--color-white) !important;
	border-radius: 10px !important;
	overflow: visible !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.05) !important;
}

.wc-block-grid__product:hover,
.wc-block-components-product-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08) !important;
}

/* Image wrapper */
.wc-block-grid__product-image,
.wc-block-components-product-card__image {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 3 / 4 !important;
	background: transparent !important;
	padding: 6px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	border-radius: 10px 10px 0 0 !important;
	margin: 0 !important;
}

/* Image itself */
.wc-block-grid__product-image img,
.wc-block-components-product-card__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border-radius: 4px !important;
	transition: transform 0.3s ease !important;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
.wc-block-components-product-card:hover .wc-block-components-product-card__image img {
	transform: scale(1.03) !important;
}

/* Title & Body */
.wc-block-grid__product-title,
.wc-block-components-product-card__title {
	font-family: var(--font-family) !important;
	font-size: var(--text-sm) !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-dark) !important;
	margin: 0 !important;
	padding: 12px 16px 4px !important;
	line-height: var(--line-height-tight) !important;
	text-align: left !important;
}

/* Price */
.wc-block-grid__product-price,
.wc-block-components-product-card__price {
	padding: 0 16px 16px !important;
	margin: 0 !important;
	text-align: left !important;
}
.wc-block-grid__product-price .amount,
.wc-block-components-product-card__price .amount {
	font-size: var(--text-base) !important;
	font-weight: var(--font-weight-semibold) !important;
	color: var(--color-primary-text) !important;
}

/* ATC Button */
.wc-block-grid__product-add-to-cart,
.wc-block-components-product-card__button {
	padding: 0 16px 16px !important;
	margin: 0 !important;
	text-align: left !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-card__button .wp-block-button__link {
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-size: var(--text-xs) !important;
	background: var(--color-bg-gray) !important;
	color: var(--color-dark) !important;
	font-weight: var(--font-weight-bold) !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-product-card__button .wp-block-button__link:hover {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
}

/* ── Prominent Cart & Checkout Action Buttons ───────────────────────── */
.woocommerce a.checkout-button,
.woocommerce button#place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
	font-family: var(--font-family) !important;
	font-size: var(--text-base) !important;
	font-weight: var(--font-weight-bold) !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	padding: 1rem 2rem !important;
	border-radius: var(--radius-sm) !important;
	border: 2px solid var(--color-primary) !important;
	cursor: pointer !important;
	transition: all var(--transition-base) !important;
	line-height: 1.5 !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center !important;
	width: 100% !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
	margin-top: 1rem !important;
	text-decoration: none !important;
}

.woocommerce a.checkout-button:hover,
.woocommerce button#place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--color-primary-dark) !important;
	border-color: var(--color-primary-dark) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-md) !important;
	color: var(--color-white) !important;
}