/* ==========================================================================
   Demathera — woocommerce.css
   Phần markup do WooCommerce core sinh ra (trang chi tiết, giỏ hàng, thanh toán)
   không đặt được class BEM, nên file này style theo class gốc của Woo.
   Đặt riêng file để tách bạch với hệ BEM trong main.css.
   ========================================================================== */

/* Nút Woo theo nút của theme */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	min-height: 44px;
	padding: 0.625rem 1.5rem;
	border: 1.5px solid var(--color-text);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--color-text);
	color: #fff;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.wc-block-components-button:not(.is-link) {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
	border-color: var(--color-primary-dark);
	background: var(--color-primary-dark);
	color: #fff;
}

/* Thông báo */
.woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--color-primary);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-primary);
}

.woocommerce-error {
	border-top-color: var(--color-sale);
}

/* Số kết quả & sắp xếp trong .shop-toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	min-height: 40px;
	padding: 0 var(--space-6) 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: #fff;
}

/* Phân trang shop */
.woocommerce nav.woocommerce-pagination {
	margin-top: var(--space-7);
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

/* ---------- Trang chi tiết sản phẩm ---------- */
.single-product div.product {
	display: grid;
	gap: var(--space-7);
	padding-top: var(--space-4);
}

@media (min-width: 1024px) {
	.single-product div.product {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		column-gap: var(--space-8);
	}
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells,
.single-product div.product .product-description {
	grid-column: 1 / -1;
}

/* Gallery: thumbnail trái + ảnh chính phải */
.product-gallery {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-3);
}

.product-gallery--single {
	grid-template-columns: 1fr;
}

.product-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	overflow-y: auto;
}

.product-gallery__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	background: none;
	opacity: 0.55;
	transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
	opacity: 1;
	border-color: var(--color-primary);
}

.product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-gallery__main {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
}

.product-gallery__slide {
	display: none;
	width: 100%;
	height: 100%;
}

.product-gallery__slide.is-active {
	display: block;
}

.product-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-gallery__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 10;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-sale);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: 1.6;
}

.woocommerce div.product .product_title {
	font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.product-subtitle {
	margin-top: var(--space-1);
	color: var(--color-muted);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin-block: var(--space-4);
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	font-size: 0.75em;
	font-weight: 400;
	color: var(--color-muted);
	opacity: 1;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	color: var(--color-sale);
	text-decoration: none;
}

.woocommerce span.onsale {
	top: var(--space-3);
	left: var(--space-3);
	min-width: 0;
	min-height: 0;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-sale);
	font-size: var(--fs-xs);
	line-height: 1.6;
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--color-star);
}

/* Quantity +/− */
.woocommerce .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

.woocommerce .quantity .qty {
	width: 3rem;
	min-height: 44px;
	border: 0;
	border-radius: 0;
	text-align: center;
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text);
	flex-shrink: 0;
}

.qty-btn:hover {
	background: var(--color-surface);
}

/* Form add-to-cart — layout dọc */
.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-block: var(--space-5);
}

.woocommerce div.product form.cart .quantity {
	align-self: flex-start;
}

.woocommerce div.product form.cart.variations_form {
	display: block;
}

/* Thêm vào giỏ: outline primary */
.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 52px;
	border-color: var(--color-primary);
	background: transparent;
	color: var(--color-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--color-primary);
	color: #fff;
}

/* Mua ngay: filled primary */
.woocommerce div.product form.cart button[name="dm_buy_now"] {
	min-height: 52px;
	border-color: var(--color-sale);
	background: var(--color-sale);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.woocommerce div.product form.cart button[name="dm_buy_now"]:hover {
	border-color: var(--color-primary-dark);
	background: var(--color-primary-dark);
}

.woocommerce div.product form.cart .variations select {
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.woocommerce div.product .product_meta {
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

.woocommerce div.product .product_meta > span {
	display: block;
}

/* Tab mô tả / thành phần / HDSD / đánh giá */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-2);
	margin: 0 0 var(--space-6);
	padding: 0;
	overflow-x: auto;
	border-bottom: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: var(--space-3) var(--space-5);
	border-bottom: 3px solid transparent;
	font-weight: 600;
	color: var(--color-muted);
	white-space: nowrap;
}

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

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 760px;
	line-height: 1.75;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none; /* Tiêu đề lặp lại tên tab */
}

/* 4 ô chính sách */
.product-policies {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4) var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.product-policy strong {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.product-policy span {
	font-size: var(--fs-xs);
	color: var(--color-muted);
	line-height: 1.5;
}

/* Related products & upsells grid */
.woocommerce .related,
.woocommerce .upsells {
	grid-column: 1 / -1;
	margin-top: var(--space-9);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	margin-bottom: var(--space-6);
	font-size: var(--fs-xl);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Product accordion */
.product-accordions {
	grid-column: 1 / -1;
	border-top: 1px solid var(--color-border);
}

.product-accordion {
	border-bottom: 1px solid var(--color-border);
}

.product-accordion > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: 15px;
	font-size: var(--fs-md);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
	line-height: calc(26 / 18);
}

.product-accordion > summary:hover,
.product-accordion > summary:focus {
	color: var(--color-sale);
}

.product-accordion > summary::-webkit-details-marker {
	display: none;
}

.product-accordion > summary .icon {
	flex-shrink: 0;
	transition: rotate 0.2s var(--ease);
}

.product-accordion[open] > summary .icon {
	rotate: 180deg;
}

.product-accordion__body {
	padding-bottom: var(--space-7);
}

/* ---------- Form, giỏ hàng, thanh toán ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: 44px;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--color-primary);
}

.woocommerce table.shop_table {
	border-color: var(--color-border);
	border-radius: var(--radius-md);
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input {
	border-radius: var(--radius-sm) !important;
}