/**
 * PaPu Jewelry — brand layer (R1 + R2)
 *
 * Tone be – nâu – trắng, tối giản, nhiều khoảng trắng, ảnh sản phẩm là điểm nhấn.
 * Tham chiếu TENMIRRORONE: chrome của site gần như vô hình, nội dung là ảnh.
 *
 * Viết mobile-first (base = 390px), mở rộng bằng min-width.
 * Màu gốc nằm ở Astra Customizer (global-color-palette); ở đây chỉ đặt tên lại cho dễ đọc.
 */

:root {
	--papu-cream: var(--ast-global-color-4, #faf7f2);
	--papu-white: var(--ast-global-color-5, #ffffff);
	--papu-beige: var(--ast-global-color-6, #e8ddcf);
	--papu-sand: var(--ast-global-color-7, #c9b49a);
	--papu-brown: var(--ast-global-color-0, #6b5344);
	--papu-brown-dark: var(--ast-global-color-1, #4a3a2f);
	--papu-ink: var(--ast-global-color-2, #2e2620);
	--papu-body: var(--ast-global-color-3, #5a4c42);

	--papu-space-section: 56px;
	--papu-rule: 1px solid var(--papu-beige);
}

@media (min-width: 768px) {
	:root {
		--papu-space-section: 96px;
	}
}

/* --- Header -------------------------------------------------------------- */

/* Chữ menu nhỏ, thưa, không in đậm — giữ header nhẹ như TMO. */
.main-header-menu > .menu-item > a {
	font-size: 14px;
	letter-spacing: 0.06em;
}

/* Dropdown "Danh mục": bỏ đổ bóng nặng, dùng viền mảnh cho hợp tone. */
.main-header-menu .sub-menu {
	border: var(--papu-rule);
	box-shadow: none;
}

.main-header-menu .sub-menu a {
	font-size: 14px;
	letter-spacing: 0.02em;
}

/*
 * Số lượng trong icon giỏ hàng ở header — sửa lỗi chữ trắng trên nền sáng.
 *
 * Rule gây lỗi, lấy nguyên văn từ CSS site đang trả về:
 *
 *     .ast-menu-cart-outline .ast-cart-menu-wrap .count { color: #ffffff; }
 *
 * Nguồn gốc nó trong `inc/builder/type/header/woo-cart/dynamic-css/dynamic.css.php`:
 *
 *     $theme_h_color             = astra_get_foreground_color( $theme_color );
 *     $cart_products_count_color = astra_get_option(
 *         'woo-header-cart-product-count-color', $theme_h_color );
 *
 * Option `woo-header-cart-product-count-color` chưa bao giờ được đặt, nên rơi vào mặc
 * định: `astra_get_foreground_color()` lấy màu *tương phản* với màu chủ đạo. Màu chủ đạo
 * là nâu #6b5344, độ sáng 88,5 < 128 → hàm trả về #ffffff.
 *
 * Phép tính đó chỉ đúng nếu con số nằm trên nền nâu đặc, tức kiểu icon `fill`. Site này
 * để `woo-header-cart-icon-style = outline` — cái túi chỉ có nét viền, trong lòng là nền
 * header màu sáng. Astra không tính tới chuyện đó, cứ gán trắng → con số tàng hình, khách
 * không biết trong giỏ có mấy món.
 *
 * Đừng nhầm với `woo-header-cart-product-count-color-group` trong Customizer (đang để
 * `var( --ast-global-color-secondary, --ast-global-color-5 )`). Key đó là tên *nhóm*
 * control, `dynamic.css.php` không đọc tới — sửa nó không có tác dụng gì.
 *
 * Chỉ nhuộm lại `.ast-count-text` chứ không nhuộm `.count`: `color` trên `.count` là thứ
 * các phần khác của icon cũng ăn theo, đụng vào là lan rộng hơn cần thiết.
 *
 * Chọn lọc 4 class (0,4,0) để thắng rule 3 class của Astra bằng độ cụ thể, khỏi phụ
 * thuộc thứ tự nạp file và khỏi phải dùng `!important`. Rule hover của Astra (0,5,0,
 * `…-li:hover … .ast-count-text`) vẫn cao hơn, nhưng option màu hover đang rỗng nên nó
 * không được in ra — không có xung đột.
 */
.ast-site-header-cart .ast-cart-menu-wrap .count .ast-count-text {
	color: var(--papu-brown);
}

/* --- Nút ----------------------------------------------------------------- */

.wp-block-button__link,
.ast-button,
.woocommerce a.button,
.woocommerce button.button {
	border-radius: 0;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 14px 32px;
}

/* --- Trang chủ: hero (R1 — "1 hình ở giữa") ------------------------------ */

.papu-hero {
	background-color: var(--papu-cream);
	padding-block: 32px var(--papu-space-section);
	text-align: center;
}

.papu-eyebrow {
	margin-bottom: 24px;
	color: var(--papu-sand);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.papu-hero__image {
	margin-inline: auto;
	margin-bottom: 32px;
}

/*
 * Ảnh hero là ảnh vuông 1024px. Để nguyên 880px trên desktop thì riêng khối hero đã
 * cao ~900px, đẩy "Sản phẩm ưa chuộng" xuống dưới màn hình đầu — ngược với yêu cầu
 * "trang chủ ngắn" của khách. Thu hẹp bề ngang để giảm chiều cao theo tỉ lệ, đồng thời
 * tạo nhiều khoảng trắng hai bên đúng tinh thần TMO (R2). Không crop để giữ nguyên ảnh.
 */
.papu-hero__image img {
	width: 100%;
	max-width: 420px;
	height: auto;
}

@media (min-width: 768px) {
	.papu-hero__image img {
		max-width: 500px;
	}
}

.papu-hero__title {
	margin-bottom: 12px;
	color: var(--papu-ink);
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.papu-hero__lead {
	margin-inline: auto;
	margin-bottom: 28px;
	max-width: 34em;
	color: var(--papu-body);
	font-size: 15px;
}

@media (min-width: 768px) {
	.papu-hero__title {
		font-size: 48px;
	}

	.papu-hero__lead {
		font-size: 16px;
	}
}

/* --- Trang chủ: sản phẩm ưa chuộng --------------------------------------- */

.papu-featured {
	padding-block: var(--papu-space-section);
	text-align: center;
}

.papu-featured__title {
	margin-bottom: 8px;
	color: var(--papu-ink);
	font-size: 26px;
	letter-spacing: 0.03em;
}

.papu-featured__note {
	margin-bottom: 40px;
	color: var(--papu-sand);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.papu-featured__title {
		font-size: 36px;
	}
}

.papu-more {
	margin-top: 8px;
}

.papu-more a {
	border-bottom: 1px solid var(--papu-sand);
	color: var(--papu-brown);
	font-size: 13px;
	letter-spacing: 0.14em;
	padding-bottom: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

.papu-more a:hover,
.papu-more a:focus {
	border-bottom-color: var(--papu-brown);
	color: var(--papu-brown-dark);
}

/* --- Lưới sản phẩm ------------------------------------------------------- */

/* Ở tablet Astra chia lưới thành 3 cột, nên 4 sản phẩm ra 3 + 1 mồ côi.
   Ép 2 cột trong khoảng này để luôn đủ cặp.
   Astra đặt rule ở `.ast-container .woocommerce ul.products:not(.elementor-grid)`
   (specificity 0,4,1) nên selector dưới đây phải dài hơn mới thắng — dùng đúng
   breakpoint 921px của Astra thay vì 1023px. */
@media (min-width: 545px) and (max-width: 921px) {
	.papu-featured .woocommerce ul.products.columns-4:not(.elementor-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Ảnh là điểm nhấn: bỏ viền, bỏ nền, chỉ còn ảnh + tên + giá. */
.woocommerce ul.products li.product {
	text-align: center;
}

/* Tên sản phẩm dài ngắn khác nhau (1 hay 2 dòng) làm giá và nút so le giữa các thẻ.
   Chừa sẵn chỗ cho 2 dòng để mọi thẻ thẳng hàng. Astra dùng box-sizing: border-box
   nên min-height phải cộng cả padding, không thì tên 1 dòng vẫn thấp hơn 14px. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--papu-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.4;
	min-height: calc(2 * 1.4em + 14px);
	padding-top: 14px;
}

.woocommerce ul.products li.product .price {
	color: var(--papu-brown);
	font-size: 14px;
	font-weight: 500;
}

/* Nút "Chọn mua" ở lưới: dạng chữ gạch chân, không phải khối màu. */
.woocommerce ul.products li.product .button {
	background: transparent;
	border-bottom: 1px solid var(--papu-beige);
	color: var(--papu-brown);
	font-size: 12px;
	padding: 6px 0;
}

.woocommerce ul.products li.product .button:hover {
	background: transparent;
	border-bottom-color: var(--papu-brown);
	color: var(--papu-brown-dark);
}

/* --- Album ảnh sản phẩm (R3) --------------------------------------------- */

/* Sản phẩm chỉ có 1 ảnh thì dải thumbnail vô nghĩa — ẩn đi (Q10). */
.woocommerce-product-gallery .flex-control-thumbs li:only-child {
	display: none;
}

/* --- Trang sản phẩm: chất liệu & bảo quản (R3) --------------------------- */

/*
 * `clear: both` là bắt buộc, không phải tuỳ chọn.
 *
 * WooCommerce/Astra dựng trang sản phẩm bằng float: gallery float trái, .summary float
 * phải. Nội dung móc vào `woocommerce_after_single_product_summary` nằm sau .summary
 * nhưng vẫn trong cùng container, nên nếu không clear thì nó chui vào phần trống bên
 * cạnh summary và đè lên tên + giá sản phẩm. Ở đó bề ngang chỉ còn vài chục px nên chữ
 * rớt xuống mỗi dòng một từ — đã tận mắt thấy khi QA 1440px.
 */
.papu-care {
	border-top: var(--papu-rule);
	clear: both;
	margin-top: 40px;
	padding-top: 32px;
}

.papu-care__title {
	color: var(--papu-ink);
	font-size: 13px;
	letter-spacing: 0.12em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.papu-care__col + .papu-care__col {
	margin-top: 28px;
}

.papu-care__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.papu-care__list li {
	color: var(--papu-body);
	font-size: 14px;
	line-height: 1.75;
	padding-left: 18px;
	position: relative;
}

.papu-care__list li + li {
	margin-top: 8px;
}

/* Dấu đầu dòng vẽ tay: chấm tròn nhỏ màu cát, nhẹ hơn bullet mặc định. */
.papu-care__list li::before {
	background: var(--papu-sand);
	border-radius: 50%;
	content: "";
	height: 4px;
	left: 0;
	position: absolute;
	top: 0.7em;
	width: 4px;
}

.papu-care__note {
	border-top: var(--papu-rule);
	color: var(--papu-body);
	font-size: 14px;
	margin-top: 28px;
	padding-top: 20px;
}

.papu-care__note a {
	color: var(--papu-brown);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.papu-care {
		column-gap: 48px;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.papu-care__col + .papu-care__col {
		margin-top: 0;
	}

	.papu-care__note {
		grid-column: 1 / -1;
	}
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
	border-top: var(--papu-rule);
}

/*
 * Hàng trên của footer: 3 cột giới thiệu / liên hệ / chính sách (khối 4 của R1 —
 * "Dưới cùng giới thiệu địa chỉ cửa hang, số đt...").
 *
 * Nội dung nằm trong Astra HTML widget 1–3, sửa ở Customizer > Footer Builder.
 */
/*
 * Cột 1–2 là HTML widget của Astra (.ast-builder-html-element), cột 3 là widget
 * WordPress (.widget_block) — vì Astra FREE chỉ cho 2 HTML widget ở footer
 * (class-astra-builder-helper.php:422). Hai wrapper khác nhau nên style chung cho cả hai,
 * nếu không cột 3 sẽ lệch font và khoảng cách so với hai cột kia.
 */
.site-above-footer-wrap .papu-foot-title {
	color: var(--papu-ink);
	font-size: 13px;
	letter-spacing: 0.12em;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.site-above-footer-wrap .ast-builder-html-element p,
.site-above-footer-wrap .widget_block p {
	font-size: 14px;
	line-height: 1.9;
	margin: 0;
}

.site-above-footer-wrap .widget_block {
	margin-bottom: 0;
}

.site-above-footer-wrap a {
	border-bottom: 1px solid transparent;
	color: var(--papu-body);
	text-decoration: none;
}

.site-above-footer-wrap a:hover {
	border-bottom-color: var(--papu-sand);
	color: var(--papu-brown-dark);
}

/* Mobile: cột 3 (widget WP) không theo alignment của Astra nên phải canh giữa tay. */
@media (max-width: 767px) {
	.site-above-footer-wrap .widget_block {
		text-align: center;
	}
}

/* Trên mobile 3 cột xếp chồng — thêm khoảng thở giữa các cột. */
.site-above-footer-wrap .site-footer-section {
	padding-bottom: 28px;
}

@media (min-width: 768px) {
	.site-above-footer-wrap .site-footer-section {
		padding-bottom: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Trang Cửa hàng & danh mục (4.4)
 * ------------------------------------------------------------------ */

/*
 * Thanh lọc danh mục (papu_shop_category_filter).
 *
 * Trên mobile cuộn ngang thay vì xuống dòng: 4 danh mục hiện tại vừa 2 dòng, nhưng
 * khách còn thêm danh mục nữa và mỗi dòng thêm là đẩy sản phẩm xuống dưới màn đầu.
 */
.papu-catfilter {
	margin: 0 0 28px;
}

.papu-catfilter__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0 0 4px;
	scrollbar-width: none;
}

.papu-catfilter__list::-webkit-scrollbar {
	display: none;
}

.papu-catfilter__list > li {
	flex: 0 0 auto;
	margin: 0;
}

.papu-catfilter__item {
	border: 1px solid var(--papu-beige);
	border-radius: 999px;
	color: var(--papu-body);
	display: block;
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 10px 18px;
	text-decoration: none;
	white-space: nowrap;
}

.papu-catfilter__item:hover,
.papu-catfilter__item:focus {
	border-color: var(--papu-sand);
	color: var(--papu-brown-dark);
}

.papu-catfilter__item.is-current {
	background: var(--papu-brown);
	border-color: var(--papu-brown);
	color: var(--papu-white);
}

@media (min-width: 768px) {
	.papu-catfilter__list {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/*
 * Thẻ sản phẩm cao bằng nhau trong cùng một hàng.
 *
 * Tên sản phẩm dài ngắn khác nhau — "Dây chuyền ngọc trai trái tim" xuống 2 dòng trong
 * khi hàng xóm chỉ 1 — làm giá và nút "Chọn mua" của hai thẻ cạnh nhau lệch nhau một
 * dòng. Đẩy nút xuống đáy thẻ để mọi nút trong một hàng nằm trên cùng một đường.
 */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .price {
	margin-top: auto;
}

.woocommerce ul.products li.product .ast-woo-product-category {
	color: var(--papu-sand);
	letter-spacing: 0.06em;
}

/*
 * Hàng nút trên thẻ sản phẩm: [icon giỏ +] [Mua ngay].
 *
 * Thẻ là flex column nên con mặc định bị kéo giãn hết chiều ngang — phải
 * `align-self: flex-start`, không thì hàng nút dính sát cả hai lề.
 */
.woocommerce ul.products li.product .astra-shop-summary-wrap > .papu-card-actions,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button {
	align-self: flex-start;
}

.papu-card-actions {
	align-items: stretch;
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/*
 * Hai nút phải cao bằng nhau — và đây là chỗ quyết định, đừng đặt chiều cao ở rule riêng
 * của từng nút.
 *
 * Nút icon mang class `button` (WooCommerce cần nó cho trạng thái `loading`/`added`), nên
 * dính rule này của Astra — `compatibility/woocommerce/woocommerce-grid.min.css`:
 *
 *   .woocommerce-js ul.products li.product .button { margin-top: .5em; margin-bottom: .5em }
 *
 * Ở cỡ chữ 12px là 6px trên + 6px dưới. Trong hàng flex `align-items: stretch`, **margin ăn
 * vào phần được kéo giãn**: chiều cao hàng tính cả margin (38 + 12 = 50) nhưng item chỉ được
 * giãn tới 38. Kết quả: "Mua ngay" cao 50, nút icon 38 và lọt thỏm ở giữa. Đó là chỗ hai nút
 * lệch nhau trên site.
 *
 * (Đừng tìm rule này trong `woocommerce.css` — Astra **không nạp** file đó, nó thay bằng bộ
 * `*-grid.min.css` của mình.)
 *
 * `min-height: 44px` cho cả hai: "Mua ngay" tự nó chỉ cao 14px (chữ 12px, `line-height: 1`,
 * không padding dọc), nên nếu không khai thì chiều cao hàng lại do nút icon định đoạt —
 * tức lặp lại đúng kiểu phụ thuộc vừa gỡ. 44px là ngưỡng vùng chạm tối thiểu (WCAG 2.5.5),
 * và gần bằng 50px đang hiển thị nên nhìn không khác mấy.
 *
 * Chọn lọc (0,4,3) — 4 class + 3 thẻ — thắng (0,4,2) của hai file trên bất kể thứ tự nạp,
 * khỏi cần `!important`.
 */
.woocommerce ul.products li.product .papu-card-actions > a,
.papu-card-actions > a {
	margin: 0;
	min-height: 44px;
}

/*
 * Hai trạng thái WooCommerce tự gắn khi bấm thêm vào giỏ: `loading` lúc đang gửi, rồi
 * `added` lúc xong. Cả hai đều **nhét thêm một icon vào trong nút** bằng pseudo-element:
 *
 *   a.button.loading::after { content: '\e01c'; animation: spin }   ← vòng xoay
 *   a.button.added::after   { content: '\e017'; margin-left: .53em } ← dấu tích
 *
 * Nút chữ mặc định rộng theo nội dung nên thêm icon vẫn vừa. Nút này rộng cố định 44px và
 * đã có sẵn túi + dấu cộng, nhét thêm ~11px nữa là tràn (đo được 3px lúc `loading`).
 *
 * Nên **đổi chỗ thay vì nhét thêm**: hai trạng thái đó thì ẩn dấu cộng đi, nhường chỗ cho
 * icon của WooCommerce. Bề ngang không đổi, mà người mua vẫn thấy phản hồi — nút này không
 * có chữ nên không còn cách báo nào khác tại chỗ.
 *
 * (Link "Xem giỏ hàng" mà `wc-add-to-cart.js` chèn vào sau nút thì khỏi lo: Astra ẩn sẵn
 * bằng `.woocommerce a.added_to_cart { display: none }`.)
 *
 * `margin-left` của WooCommerce phải bỏ: trong flex container thì `::after` là một flex
 * item, khoảng cách đã có `gap` lo, để nguyên `.53em` là lệch sang phải.
 *
 * Chọn lọc (0,5,3) để thắng (0,3,1) của WooCommerce mà không cần `!important`.
 */
.woocommerce ul.products li.product a.papu-cart-btn.added .papu-cart-btn__plus,
.woocommerce ul.products li.product a.papu-cart-btn.loading .papu-cart-btn__plus {
	display: none;
}

.woocommerce ul.products li.product a.papu-cart-btn.added::after,
.woocommerce ul.products li.product a.papu-cart-btn.loading::after {
	margin-left: 0;
	vertical-align: middle;
}

/* Nút icon giỏ hàng — cùng kiểu viền mảnh với icon giỏ ở header. */
.woocommerce ul.products li.product .papu-cart-btn,
.papu-cart-btn {
	align-items: center;
	background: transparent;
	border: 1px solid var(--papu-beige);
	border-radius: 2px;
	color: var(--papu-brown);
	display: inline-flex;
	flex: 0 0 auto;
	/* Icon to lên thì khe 1px thành ra hai khối dính nhau. */
	gap: 2px;
	justify-content: center;
	/*
	 * Chiều cao KHÔNG khai ở đây — xem rule `.papu-card-actions > a` bên trên. Để
	 * `height: 38px` ở chỗ này là sai hai lần: `align-items: stretch` bỏ qua item đã có
	 * cross-size cố định, và nó che mất lỗi thật là margin của WooCommerce.
	 */
	padding: 0;
	width: 44px;
}

.woocommerce ul.products li.product .papu-cart-btn:hover,
.woocommerce ul.products li.product .papu-cart-btn:focus {
	background: var(--papu-brown);
	border-color: var(--papu-brown);
	color: var(--papu-white);
}

/*
 * Túi giỏ hàng, vẽ lại y hệt icon ở header.
 *
 * Astra dựng icon giỏ ở header bằng hai khối border chứ không phải SVG: thân túi là ô
 * `.count` bo hai góc dưới, quai là `::after` bo cung nửa trên. Đo trên site thật
 * (font-size gốc 13,76px) ra đúng bộ số em dưới đây:
 *
 *   thân  2,1em × 2,1em · border 2px · bo dưới 0,3em   (28,89px · 4,128px)
 *   quai  0,8em × 0,8em · border 2px, bỏ đáy · bo 10em · top −0,6em   (11px · −8,256px)
 *
 * Giữ nguyên các số em đó và chỉ đổi `font-size` để thu nhỏ cho vừa nút — như vậy tỉ lệ
 * thân/quai không đổi, vẫn là cùng một hình. `font-size` ở đây CHỈ dùng làm thang đo, thẻ
 * không có chữ nào bên trong.
 *
 * Dùng `currentColor` để túi tự đổi màu theo nút khi hover, khỏi khai màu hai lần.
 */
.papu-cart-btn__bag {
	border: 2px solid currentColor;
	border-radius: 0 0 0.3em 0.3em;
	box-sizing: border-box;
	display: block;
	/*
	 * Thang đo của cả hình. Nút cao bằng "Mua ngay" (~44px) nên icon 9px nhìn lọt thỏm;
	 * 10px cho thân túi 21px, cả hình kể cả quai ~27px — đủ nặng để cân với chữ
	 * "MUA NGAY" 12px bên cạnh.
	 */
	font-size: 10px;
	height: 2.1em;
	/*
	 * Chừa chỗ cho cái quai. Quai là `::before` absolute nên KHÔNG tính vào chiều cao —
	 * nút canh giữa theo thân túi thì phần quai nhô lên làm icon trông lệch lên trên.
	 * Margin bằng đúng độ nhô của quai (0,6em) đưa tâm hình về giữa nút.
	 */
	margin-top: 0.6em;
	position: relative;
	width: 2.1em;
}

/* Quai túi. `border-bottom: 0` để chỉ còn cung tròn, không thành hình bán nguyệt kín. */
.papu-cart-btn__bag::before {
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 10em 10em 0 0;
	box-sizing: border-box;
	content: "";
	height: 0.8em;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	top: -0.6em;
	width: 0.8em;
}

.papu-cart-btn__plus {
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	margin-top: -1px;
}

/* Nút "Mua ngay" — đặc, để mắt rơi vào đây trước. */
.woocommerce ul.products li.product .papu-buynow,
.papu-buynow {
	align-items: center;
	background: var(--papu-brown);
	border: 1px solid var(--papu-brown);
	border-radius: 2px;
	color: var(--papu-white);
	display: inline-flex;
	font-size: 12px;
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 0 16px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.woocommerce ul.products li.product .papu-buynow:hover,
.woocommerce ul.products li.product .papu-buynow:focus {
	background: var(--papu-brown-dark);
	border-color: var(--papu-brown-dark);
	color: var(--papu-white);
}

/*
 * Ẩn nút giỏ hàng mà Astra phủ lên ảnh sản phẩm.
 *
 * Cùng chức năng với nút icon vừa thêm ở dưới, mà lại `opacity: 0` cho tới khi hover —
 * trên điện thoại không ai thấy. Giữ cả hai thì trên desktop một thẻ có hai icon giỏ y
 * hệt nhau làm đúng một việc.
 */
.woocommerce ul.products li.product .ast-on-card-button {
	display: none;
}

/* Mobile 2 cột: thẻ chỉ còn ~165px, hàng nút phải xuống dòng. */
@media (max-width: 543px) {
	.papu-card-actions {
		flex-wrap: wrap;
		gap: 6px;
	}

	.woocommerce ul.products li.product .papu-buynow,
	.papu-buynow {
		flex: 1 1 auto;
		padding: 0 10px;
	}
}

/* ------------------------------------------------------------------ *
 * Trang nội dung (Về chúng tôi, chính sách…)
 * ------------------------------------------------------------------ */

/*
 * Ảnh chèn trong bài: giới hạn chiều cao.
 *
 * Ảnh sản phẩm của shop đều vuông và rất lớn (2160–2560px). Thả vào giữa bài, container
 * rộng ~1100px sẽ cho ra một khối vuông cao 1100px — nguyên một màn hình desktop chỉ để
 * xem một tấm ảnh, người đọc tưởng bài đã hết.
 */
.ast-page-builder-template .entry-content > .wp-block-image img,
.entry-content > .wp-block-image img {
	max-height: 520px;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 767px) {
	.ast-page-builder-template .entry-content > .wp-block-image img,
	.entry-content > .wp-block-image img {
		max-height: 360px;
	}
}