/**
 * Boxs.Me — สไตล์ฝั่งหน้าร้าน
 *
 * โทนสีอิงตามธีม Boxs.Me: สีครามเป็นสีหลักของลิงก์และกรอบ สีดอกดาวเรืองเป็น
 * สีเน้นสำหรับปุ่มลงมือทำ (ซื้อ/ดาวน์โหลด) ตัวแปรสีรวมไว้ที่เดียวเพื่อเปลี่ยน
 * โทนทั้งระบบได้จากจุดเดียว ส่วนฟอนต์ปล่อยให้สืบทอดจากธีมที่ใช้อยู่
 */

.wm-library,
.wm-pay-panel,
.wm-filters,
.wm-specs {
	--wm-ink: #201c15;
	--wm-muted: #6b6459;
	--wm-line: #e7e0d2;
	--wm-bg-soft: #f1ead9;
	--wm-brand: #33447b;
	--wm-brand-deep: #1b2547;
	--wm-brand-soft: #e8eaf3;
	--wm-accent: #e2900f;
	--wm-accent-deep: #b5730a;
	--wm-accent-ink: #201c15;
	--wm-warn-bg: #fbf0dc;
	--wm-warn-ink: #8a5300;
	--wm-ok-bg: #e6f2ea;
	--wm-ok-ink: #1f6b45;
	--wm-err-bg: #fbe9e6;
	--wm-err-ink: #a13a26;
	--wm-radius: 8px;
	--wm-shadow: 0 1px 2px rgba(32, 28, 21, .04), 0 6px 20px -14px rgba(32, 28, 21, .35);
}

.woocommerce:not(body) {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 8px;
	box-sizing: border-box;
}

/* ป้องกัน horizontal scrollbar จาก element ที่ล้นออกจาก viewport */
html,
body {
	overflow-x: hidden;
}

/* ---------------------------------------------------------------- *
 * ปุ่ม — ดาวเรืองคือสีลงมือทำ (ซื้อ/ดาวน์โหลด/ยืนยัน) ครามคือสีรอง
 * ---------------------------------------------------------------- */

.wm-button {
	display: inline-block;
	padding: 0.6em 1.2em;
	border: 1px solid var(--wm-line);
	border-radius: 6px;
	background: #fff;
	color: var(--wm-brand);
	font-size: 0.95em;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}

.wm-button:hover {
	border-color: var(--wm-brand);
	background: var(--wm-brand-soft);
}

.wm-button--primary {
	background: #55dca4;
	border-color: #55dca4;
	color: #12352b;
	font-weight: 600;
}

.wm-button--primary:hover {
	background: #3fc98f;
	border-color: #3fc98f;
	color: #12352b;
}

.wm-button--primary:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.wm-button {
		transition: none;
	}
}

/* ---------------------------------------------------------------- *
 * แผงชำระเงิน (หน้าสั่งซื้อสำเร็จ / ดูคำสั่งซื้อ)
 * ---------------------------------------------------------------- */

.wm-pay-panel {
	margin: 2em 0;
	border: 1px solid var(--wm-line);
	border-radius: var(--wm-radius);
	overflow: hidden;
	background: #fff;
	color: var(--wm-ink);
	box-shadow: var(--wm-shadow);
}

.wm-pay-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.9em;
	padding: 1em 1.4em;
	background: var(--wm-brand-deep);
	color: #fbf8f4;
	border-bottom: 1px solid var(--wm-line);
}

.wm-pay-panel__eyebrow {
	font-size: 0.85em;
	color: #c7cbe0;
}

.wm-pay-panel__amount {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.wm-pay-panel__order {
	margin-left: auto;
	font-size: 0.85em;
	color: #c7cbe0;
}

.wm-pay-panel__body {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8em;
	padding: 1.4em;
}

.wm-pay-panel__qr {
	flex: 0 0 auto;
	text-align: center;
}

.wm-pay-panel__qr img {
	display: block;
	width: 240px;
	height: 240px;
	/* ขอบขาวรอบคิวอาร์จำเป็นต่อการสแกน อย่าตัดออก */
	padding: 10px;
	background: #fff;
	border: 1px solid var(--wm-line);
	border-radius: 8px;
}

.wm-pay-panel__qr-hint {
	margin: 0.6em 0 0;
	font-size: 0.8em;
	color: var(--wm-muted);
	max-width: 240px;
}

.wm-pay-panel__info {
	flex: 1 1 260px;
	min-width: 240px;
}

.wm-pay-panel__info p {
	margin: 0 0 0.6em;
}

.wm-label {
	display: block;
	font-size: 0.8em;
	color: var(--wm-muted);
}

.wm-pay-panel__steps {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px dashed var(--wm-line);
	font-size: 0.92em;
	line-height: 1.7;
}

.wm-pay-panel__steps p {
	margin: 0 0 0.4em;
}

.wm-pay-panel__cta {
	padding: 0 1.4em 1.4em;
}

.wm-pay-panel__cta a {
	color: var(--wm-brand);
	font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * กล่องแจ้งสถานะ
 * ---------------------------------------------------------------- */

.wm-notice {
	margin: 0 1.4em 1.4em;
	padding: 0.9em 1.1em;
	border-radius: 8px;
	font-size: 0.93em;
}

.wm-notice p {
	margin: 0.35em 0 0;
}

.wm-notice--info {
	background: var(--wm-ok-bg);
	color: var(--wm-ok-ink);
}

.wm-notice--error {
	background: var(--wm-err-bg);
	color: var(--wm-err-ink);
}

/* ---------------------------------------------------------------- *
 * ฟอร์มแนบสลิป
 * ---------------------------------------------------------------- */

.wm-slip-form {
	padding: 0 1.4em 1.6em;
}

.wm-slip-form__title {
	margin: 0 0 0.8em;
	font-size: 1.05em;
	font-family: var(--wp--preset--font-family--brand-display, inherit);
}

.wm-field {
	margin: 0 0 1em;
}

.wm-field label {
	display: block;
	margin-bottom: 0.3em;
	font-size: 0.9em;
	font-weight: 600;
}

.wm-field input[type="file"],
.wm-field input[type="number"],
.wm-field input[type="datetime-local"],
.wm-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.55em 0.7em;
	border: 1px solid var(--wm-line);
	border-radius: 6px;
	font: inherit;
}

.wm-field input:focus-visible,
.wm-field textarea:focus-visible {
	outline: 2px solid var(--wm-accent);
	outline-offset: 1px;
}

.wm-field__hint {
	display: block;
	margin-top: 0.3em;
	font-size: 0.8em;
	color: var(--wm-muted);
}

.wm-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.wm-field-row .wm-field {
	flex: 1 1 180px;
}

.wm-resend {
	padding: 0 1.4em 1.4em;
}

.wm-resend summary {
	cursor: pointer;
	font-size: 0.9em;
	color: var(--wm-muted);
}

.wm-resend .wm-slip-form {
	padding: 1em 0 0;
}

/* ---------------------------------------------------------------- *
 * ข้อมูลจำเพาะบนหน้าสินค้า
 * ---------------------------------------------------------------- */

.wm-specs {
	margin: 1.5em 0;
}

.wm-specs__preview {
	display: inline-block;
	margin-bottom: 1em;
	padding: 0.6em 1.1em;
	border: 1px dashed var(--wm-brand);
	border-radius: 6px;
	color: var(--wm-brand);
	font-size: 0.95em;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.wm-specs__preview:hover {
	background: var(--wm-brand);
	color: #fff;
}

.wm-specs__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93em;
}

.wm-specs__table th,
.wm-specs__table td {
	padding: 0.55em 0;
	border-bottom: 1px solid var(--wm-line);
	text-align: left;
	vertical-align: top;
}

.wm-specs__table th {
	width: 38%;
	font-weight: 500;
	color: var(--wm-muted);
}

/* ---------------------------------------------------------------- *
 * แถบกรอง — แถวแคปซูลลอยอิสระ ไม่มีกล่องพื้นหลังห่อรวม (คล้ายชั้นตัวกรอง
 * ของแพลตฟอร์มขายสื่อการสอนทั่วไป) แต่ละตัวกรองเป็นแคปซูลของตัวเอง เปลี่ยน
 * เป็นสีครามเมื่อมีการเลือกค่าอยู่ ให้เห็นชัดว่ากำลังกรองอะไรอยู่โดยไม่ต้อง
 * มองแถบ "กำลังกรอง" ด้านล่างเลยก็ได้
 * ---------------------------------------------------------------- */

.wm-filters {
	margin: 0 0 1.25em;
}

.wm-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
}

.wm-filters__field {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4em;
	flex: 0 0 auto;
	background: #fff;
	border: 1.5px solid var(--wm-line);
	border-radius: 999px;
	padding: 0.2em 0.3em 0.2em 1em;
	transition: border-color .15s ease, background-color .15s ease;
}

.wm-filters__field:focus-within {
	border-color: var(--wm-brand);
}

.wm-filters__field--active {
	background: var(--wm-brand-soft, #e8eaf3);
	border-color: var(--wm-brand);
}

.wm-filters__field--active .wm-filters__label,
.wm-filters__field--active select {
	color: var(--wm-brand-deep, #1b2547);
	font-weight: 600;
}

.wm-filters__label {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--wm-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.wm-filters select {
	box-sizing: border-box;
	padding: 0.55em 1.6em 0.55em 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.86em;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6459' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .1em center;
	cursor: pointer;
}

.wm-filters__search-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 26px;
}

.wm-filters__search-icon {
	font-size: 13px;
	opacity: 0.55;
	line-height: 1;
	flex-shrink: 0;
}

.wm-filters__input-search {
	width: 100% !important;
	min-height: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: .94rem !important;
	font-weight: 600 !important;
	color: inherit !important;
}

.wm-filters__input-search::placeholder {
	color: #9ca3af !important;
	font-weight: 400 !important;
}

.wm-filters__input-search:focus,
.wm-filters__input-search:focus-visible {
	outline: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.wm-filters__field--price {
	padding: 0.2em 1em;
	border-radius: 999px;
}

.wm-filters__price {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.wm-filters__price input {
	width: 4.2em;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.5em 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.86em;
	color: inherit;
}

.wm-filters__price input:focus-visible {
	outline: none;
}

.wm-filters__submit {
	flex: 0 0 auto;
	padding: 0.6em 1.4em;
	font-size: 0.88em;
	border-radius: 999px;
}

.wm-filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-top: 1em;
}

.wm-filters__active-label {
	font-size: 0.82em;
	color: var(--wm-muted);
}

.wm-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.28em 0.7em;
	border-radius: 999px;
	background: var(--wm-brand-soft, #e8eaf3);
	border: 1px solid transparent;
	color: var(--wm-brand-deep, #1b2547);
	font-size: 0.82em;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.wm-chip:hover {
	background: var(--wm-brand);
	color: #fff;
}

.wm-chip__x {
	font-size: 1.15em;
	line-height: 1;
}

.wm-filters__reset {
	font-size: 0.82em;
	color: var(--wm-muted);
	margin-left: 0.3em;
}

/* ---------------------------------------------------------------- *
 * การ์ดสินค้าในหน้ารายการ (หน้าร้าน/หมวดหมู่/สินค้าที่เกี่ยวข้อง)
 *
 * แนวทาง: การ์ดมีกรอบ+เงาชัดเจนแบบธีมร้านค้ามาตรฐาน (เช่น Astra) ไม่ใช่แบบ
 * ลอยไม่มีขอบเขต — ปกใบงานแสดงเป็นสัดส่วน A4 เต็มใบ (210:297) ไม่ครอปแปลก ๆ
 * เพื่อให้ตรงกับสัดส่วนจริงของกระดาษที่ขาย และให้เหมือนกันทั้งเว็บ (หน้าร้าน
 * / หมวดหมู่ / คลังไฟล์) แทนที่จะมีอัตราส่วนต่างกันในแต่ละที่
 *
 * จำกัดไว้สูงสุด 4 คอลัมน์บนจอกว้าง (ไม่ใช่ 5) เพื่อให้การ์ดมีที่ว่างพอสำหรับ
 * ภาพ ชื่อ ราคา และปุ่ม โดยไม่ดูอัดแน่นจนอ่านยาก
 *
 * ตัดบรรทัด "โดย [ชื่อผู้ขาย]" ออกจากการ์ดในหน้ารายการ (ยังคงอยู่บนหน้า
 * สินค้าเดี่ยว) เพราะตอนนี้ร้านมีผู้ขายรายเดียว การพิมพ์ชื่อเดิมซ้ำใต้สินค้า
 * ทุกชิ้นจึงเป็นแค่ความรก ไม่ใช่ข้อมูลที่ช่วยตัดสินใจ — ค่อยเปิดกลับมาแสดง
 * ตอนที่ระบบหลายผู้ขายเปิดใช้งานจริงแล้วชื่อผู้ขายมีความหมายต่อการเลือกซื้อ
 *
 * ข้อควรระวัง: การ์ดหมวดหมู่วิชา (จาก [product_categories]) ก็มีคลาส
 * "product" ติดมาด้วยเหมือนกัน (li.product-category.product) กฎด้านล่างจึง
 * ต้องกันคลาส .product-category ออกทุกจุด ไม่งั้นภาพสี่เหลี่ยมจัตุรัสของ
 * หมวดหมู่จะถูกบังคับครอปเป็นสัดส่วนอื่นไปด้วย
 * ---------------------------------------------------------------- */

/*
 * หมายเหตุสำคัญ: ต้องใช้ minmax(0, 1fr) ไม่ใช่ 1fr เฉย ๆ
 *
 * ช่องตาราง 1fr ธรรมดามีค่าต่ำสุดเป็น "auto" ซึ่งคำนวณจากเนื้อหาข้างในเสมอ
 * ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดบรรทัดกลางคำได้ในกรณีจำเป็น
 * ทำให้ "ความกว้างต่ำสุดที่จำเป็น" ของหัวข้อสินค้าเหลือแค่ตัวอักษรเดียว —
 * ช่องตารางเลยยุบตัวลงไปตามนั้น ทำให้ทั้งการ์ด (รวมรูปด้วย) เล็กจิ๋วทั้งคอลัมน์
 * การใส่ 0 เป็นค่าต่ำสุดจึงบังคับให้ช่องแบ่งตามที่ตั้งไว้จริง ไม่ใช่ตามเนื้อหา
 */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	/* ล้าง clearfix เดิมที่มากับ layout แบบ float */
}

/*
 * ทำไมต้อง !important ตรงนี้:
 *
 * WooCommerce มีสไตล์เก่าจากยุค float-column ชื่อ
 * ".woocommerce ul.products.columns-5 li.product { width: 16.95% }"
 * (มีเลขคอลัมน์ต่อท้ายตามค่า "จำนวนคอลัมน์" ในตั้งค่า WooCommerce) ซึ่งมี
 * จำนวนคลาสในซีเล็กเตอร์มากกว่ากฎของเรา (เพิ่ม .columns-N เข้ามาอีกคลาส)
 * จึงชนะเราด้วยความจำเพาะเจาะจงเสมอ ไม่ว่าจะปรับ media query กี่แบบก็ตาม
 * เพราะคลาส "columns-N" ติดอยู่ที่ <ul> แบบตายตัว ไม่เปลี่ยนตามหน้าจอ
 * (ปัญหานี้กว่าจะเจอต้องไล่ปิดสไตล์ชีตทีละไฟล์เพื่อหาตัวการจริง)
 */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
	width: auto !important;
	min-width: 0;
	margin: 0;
}

/* --- การ์ดสินค้า (ไม่ใช่การ์ดหมวดหมู่) --- */

.woocommerce ul.products li.product:not(.product-category) {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
}

.woocommerce ul.products li.product:not(.product-category):hover {
	transform: none;
	box-shadow: none;
}

.woocommerce ul.products li.product:not(.product-category) a.woocommerce-loop-product__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* .attachment-woocommerce_thumbnail คือคลาสที่ WooCommerce ใส่ให้ภาพปกสินค้า
   โดยเฉพาะ — ต้องเจาะจงแบบนี้ ไม่ใช้ตัวเลือก "img" เฉย ๆ เพราะการ์ดยังมี
   รูปประจำตัวผู้ขาย (avatar) ซ้อนอยู่ข้างในด้วย ถ้าเลือกกว้างไปจะดึงรูป
   ประจำตัวมาขยายเป็นภาพปกไปด้วย */
.woocommerce ul.products li.product:not(.product-category) img.attachment-woocommerce_thumbnail {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin: 0;
	border: 1px solid var(--wm-line, #e7e0d2);
	border-radius: 2px;
}

.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
	margin: .55em .35em 0;
	font-size: 1rem;
	line-height: 1.4;
}

.woocommerce ul.products li.product:not(.product-category) .wm-loop-badges {
	margin: .4em .35em 0;
}

.woocommerce ul.products li.product:not(.product-category) .star-rating {
	margin: .4em .35em 0;
	font-size: .8em;
}

.woocommerce ul.products li.product:not(.product-category) .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4em;
	margin: .5em .35em 0;
	font-weight: 700;
	font-size: 1.1em;
}

.woocommerce ul.products li.product:not(.product-category) .price del {
	margin-right: .2em;
	font-weight: 400;
	font-size: .8em;
	opacity: .6;
}

.woocommerce ul.products li.product:not(.product-category) .price ins {
	text-decoration: none;
	font-weight: 700;
}

/* ป้ายวงกลมทับมุมภาพของ WooCommerce ถูกซ่อนในหน้ารายการ — ใช้ .wm-sale-pill
   ข้างราคาแทน (คงป้ายวงกลมเดิมไว้เฉพาะหน้าสินค้าเดี่ยว) */
.woocommerce ul.products li.product .onsale {
	display: none;
}

/* ตัดบรรทัดผู้ขายออกจากการ์ดในหน้ารายการ — ดูเหตุผลในคอมเมนต์หัวบล็อก */
.woocommerce ul.products li.product:not(.product-category) .wm-vendor-byline--loop {
	display: none;
}

/* ดาวรีวิว — ใช้สีดาวเรืองของแบรนด์แทนสีเหลืองมาตรฐานของ WooCommerce */
.woocommerce .star-rating::before {
	color: var(--wm-line, #e7e0d2);
}

.woocommerce .star-rating span::before {
	color: var(--wm-accent, #e2900f);
}

.wm-sale-pill {
	display: inline-block;
	padding: .15em .6em;
	border-radius: 4px;
	background: var(--wm-err-bg, #fbe9e6);
	color: var(--wm-err-ink, #a13a26);
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .01em;
	vertical-align: middle;
}

.woocommerce ul.products li.product:not(.product-category) a.add_to_cart_button {
	display: block;
	margin: .7em .35em .15em;
	margin-top: auto;
	padding: .8em 1em;
	background: #55dca4;
	border: 0;
	color: #12352b;
	text-align: center;
	border-radius: 6px;
	font-weight: 600;
}

.woocommerce ul.products li.product:not(.product-category) a.add_to_cart_button:hover {
	background: #3fc98f;
	color: #12352b;
}

/* --- การ์ดหมวดหมู่วิชา — ภาพเป็นสี่เหลี่ยมจัตุรัสโดยตั้งใจ ต่างจากปกสินค้า --- */

.woocommerce ul.products li.product-category a {
	display: block;
	background: #fff;
	border: 1px solid var(--wm-line, #e7e0d2);
	border-radius: var(--wm-radius, 8px);
	overflow: hidden;
	box-shadow: var(--wm-shadow, 0 1px 2px rgba(32, 28, 21, .04), 0 6px 20px -14px rgba(32, 28, 21, .35));
	transition: transform .15s ease, box-shadow .15s ease;
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product-category a:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(32, 28, 21, .06), 0 14px 28px -16px rgba(32, 28, 21, .4);
}

.woocommerce ul.products li.product-category img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	/* ภาพหมวดหมู่สร้างเป็นสี่เหลี่ยมจัตุรัสไว้แล้ว */
	object-fit: cover;
	display: block;
	margin: 0;
	border-bottom: 1px solid var(--wm-line, #e7e0d2);
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	margin: 0;
	padding: .8em .9em .9em;
	font-size: 1.02rem;
	line-height: 1.35;
}

.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
	display: inline-block;
	margin-left: .3em;
	color: var(--wm-muted, #6b6459);
	font-weight: 400;
	font-size: .85em;
}

/* ---------------------------------------------------------------- *
 * ป้ายบนการ์ดสินค้า และบรรทัดผู้ขาย
 * ---------------------------------------------------------------- */

.wm-loop-badges {
	margin: 0.3em 0 0.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
}

.wm-badge {
	display: inline-block;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	background: var(--wm-brand-soft, #e8eaf3);
	color: var(--wm-brand, #33447b);
	font-size: 0.75em;
	line-height: 1.6;
	white-space: nowrap;
}

.wm-vendor-byline {
	margin: 0 0 0.6em;
	font-size: 0.9em;
	color: #6b6459;
}

.wm-vendor-byline__name {
	font-weight: 600;
	color: #33447b;
}

.wm-vendor-byline--loop {
	display: flex;
	align-items: center;
	gap: .4em;
	font-size: .82em;
}

/* WooCommerce มีสไตล์ .avatar ของตัวเองสำหรับรูปผู้เขียนรีวิว (float:left;
   position:absolute; width:32px; height:auto; ...) ซึ่งชนกับรูปประจำตัว
   ผู้ขายของเราโดยตรงเพราะ get_avatar() ใช้คลาส "avatar" เหมือนกัน ต้อง
   เขียนทับทุกจุดที่ชนแบบเจาะจงเพื่อตัดปัญหาลำดับความสำคัญของ CSS ให้ขาด */
.wm-vendor-byline__avatar {
	/* จำเป็นต้องใช้ !important — มีสไตล์ .avatar อื่นในระบบที่ชนะแบบไม่คาดคิด
	   ถ้าไม่บังคับ รูปจะโตเกินขนาดจริงของมันไปมาก (ยืนยันด้วยการทดสอบแยกแล้ว) */
	position: static !important;
	float: none !important;
	width: 20px !important;
	height: 20px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 50% !important;
	display: block !important;
	flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------- *
 * คลังไฟล์ของผู้ซื้อ
 * ---------------------------------------------------------------- */

.wm-library__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 1.2em;
}

.wm-library__search input[type="search"] {
	flex: 1 1 240px;
	padding: 0.55em 0.8em;
	border: 1px solid var(--wm-line);
	border-radius: 6px;
	font: inherit;
}

.wm-library__clear {
	font-size: 0.85em;
	color: var(--wm-muted);
}

.wm-library__count {
	margin: 0 0 1em;
	font-size: 0.88em;
	color: var(--wm-muted);
}

.wm-library__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wm-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wm-line);
	border-radius: var(--wm-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--wm-shadow);
	transition: transform .15s ease, box-shadow .15s ease;
}

.wm-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(32, 28, 21, .06), 0 14px 28px -16px rgba(32, 28, 21, .4);
}

@media (prefers-reduced-motion: reduce) {
	.wm-card {
		transition: none;
	}

	.wm-card:hover {
		transform: none;
	}
}

.wm-card__cover {
	display: block;
	/* ปกใบงานเป็นแนวตั้ง A4 กรอบจึงล็อกอัตราส่วนไว้ให้ตรงกัน */
	aspect-ratio: 210 / 297;
	background: var(--wm-bg-soft);
	overflow: hidden;
}

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

.wm-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.9em;
	flex: 1;
}

.wm-card__title {
	margin: 0;
	font-size: 0.98em;
	line-height: 1.35;
}

.wm-card__title a {
	color: var(--wm-ink);
	text-decoration: none;
}

.wm-card__meta {
	margin: 0;
	font-size: 0.78em;
	color: var(--wm-muted);
}

.wm-card__files {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.wm-card__files .wm-button {
	text-align: center;
	font-size: 0.88em;
}

.wm-card__remaining {
	font-size: 0.75em;
	color: var(--wm-warn-ink);
}

.wm-library--empty {
	padding: 2em;
	border: 1px dashed var(--wm-line);
	border-radius: var(--wm-radius);
	text-align: center;
	color: var(--wm-muted);
}

.wm-library--empty .wm-button {
	margin-top: 0.5em;
}

/* ---------------------------------------------------------------- *
 * ป้ายชื่อวิธีชำระเงินบนหน้าเช็คเอาต์แบบบล็อก
 * ---------------------------------------------------------------- */

.wm-pm-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.wm-pm-label__icon {
	width: 28px;
	height: auto;
}

.wm-pm-content__note {
	font-size: 0.85em;
	opacity: 0.75;
}

/* ---------------------------------------------------------------- *
 * ราคาสินค้า — ให้ตัวเลขเรียงชิดกันเป็นระเบียบทุกที่ที่ WooCommerce แสดงราคา
 * ---------------------------------------------------------------- */

.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* ป้ายลดราคาของ WooCommerce ค่าเริ่มต้นเป็นสีเขียวมะกอกซึ่งหลุดจากชุดสีแบรนด์
   เปลี่ยนเป็นครามเข้ม ให้เป็น "ตราประทับ" แยกจากสีดาวเรืองของปุ่มซื้อ */
.onsale {
	background: #1b2547 !important;
	color: #fbf8f4 !important;
	font-weight: 600;
	font-size: 0.8em !important;
}

/* ---------------------------------------------------------------- *
 * จอเล็ก
 * ---------------------------------------------------------------- */

@media (max-width: 600px) {

	.wm-pay-panel__body {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.wm-pay-panel__info {
		text-align: left;
		width: 100%;
	}

	.wm-pay-panel__order {
		margin-left: 0;
		width: 100%;
	}

	.wm-library__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1em;
	}
}