/* ==========================================================================
   BestMerchLab Size Guide
   --------------------------------------------------------------------------
   Tone lay tu design token that cua child theme studio-bespoke-child
   (assets/css/studio-bespoke.css):
     --sb-bg #fcf9f4 cream | --sb-primary #4a3728 espresso
     --sb-accent-gold #c5a028 | --sb-muted-stone #d2c4bb
     font: Chivo (display) + Hanken Grotesk (body)
   Ta KHONG phu thuoc vao bien cua theme (phong khi theme doi) ma khai bao
   lai trong scope rieng, co fallback font he thong.

   Moi class deu co tien to .bmlsg- -> khong dung do voi 69KB Additional CSS
   day !important cua site.
   ========================================================================== */

.bmlsg-trigger-wrap,
.bmlsg-modal {
	--bmlsg-cream: #fcf9f4;
	--bmlsg-oat: #f6f3ee;
	--bmlsg-sand: #f0ede9;
	--bmlsg-espresso: #4a3728;
	--bmlsg-espresso-deep: #322214;
	--bmlsg-stone: #7e7576;
	--bmlsg-border: #d2c4bb;
	--bmlsg-gold: #c5a028;
	--bmlsg-ink: #1c1b1b;
	--bmlsg-font-display: "Chivo", system-ui, -apple-system, sans-serif;
	--bmlsg-font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
	--bmlsg-radius: 4px;
	--bmlsg-radius-lg: 12px;
}

/* ==========================================================================
   1. NUT TRIGGER — nam duoi dropdown Size, tren nut Add to Cart
   ========================================================================== */
.bmlsg-trigger-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 0 18px;
}

.bmlsg-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	min-height: 44px; /* vung cham toi thieu cho mobile */
	background: transparent;
	border: 1px solid var(--bmlsg-border);
	border-radius: var(--bmlsg-radius);
	color: var(--bmlsg-espresso);
	font-family: var(--bmlsg-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.22s ease, color 0.22s ease, background-color 0.22s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.bmlsg-trigger:hover,
.bmlsg-trigger:focus-visible {
	border-color: var(--bmlsg-espresso);
	background: var(--bmlsg-oat);
	color: var(--bmlsg-espresso-deep);
	outline: none;
}

.bmlsg-trigger:focus-visible {
	outline: 2px solid var(--bmlsg-gold);
	outline-offset: 2px;
}

.bmlsg-trigger__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.bmlsg-trigger__note {
	font-family: var(--bmlsg-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bmlsg-stone);
}

/* ==========================================================================
   2. MODAL — desktop: center. mobile: bottom sheet (xem muc 8)
   ========================================================================== */
.bmlsg-modal {
	position: fixed;
	inset: 0;
	z-index: 100000; /* tren off-canvas cart cua Flatsome */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.bmlsg-modal[hidden] {
	display: none;
}

.bmlsg-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(28, 27, 27, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.26s ease;
}

.bmlsg-modal.is-open .bmlsg-modal__overlay {
	opacity: 1;
}

.bmlsg-modal__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 880px;
	max-height: 88vh;
	background: var(--bmlsg-cream);
	border: 1px solid var(--bmlsg-border);
	border-radius: var(--bmlsg-radius-lg);
	box-shadow: 0 24px 60px rgba(74, 55, 40, 0.22);
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 0.26s ease, transform 0.26s ease;
}

.bmlsg-modal.is-open .bmlsg-modal__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Grip chi hien tren mobile */
.bmlsg-modal__grip {
	display: none;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.bmlsg-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--bmlsg-border);
	background: var(--bmlsg-cream);
	flex-shrink: 0;
}

.bmlsg-modal__eyebrow {
	margin: 0 0 4px;
	font-family: var(--bmlsg-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bmlsg-gold);
}

.bmlsg-modal__title {
	margin: 0;
	font-family: var(--bmlsg-font-display);
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--bmlsg-espresso);
}

.bmlsg-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	margin: -6px -6px 0 0;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--bmlsg-radius);
	color: var(--bmlsg-espresso);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bmlsg-modal__close:hover,
.bmlsg-modal__close:focus-visible {
	background: var(--bmlsg-sand);
	border-color: var(--bmlsg-border);
	outline: none;
}

.bmlsg-modal__close svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   4. TOOLBAR — tab loai san pham + chuyen doi IN/CM
   ========================================================================== */
.bmlsg-modal__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 24px;
	border-bottom: 1px solid var(--bmlsg-border);
	background: var(--bmlsg-oat);
	flex-shrink: 0;
}

.bmlsg-tabs {
	display: flex;
	gap: 6px;
	min-width: 0;
}

.bmlsg-tab {
	padding: 9px 16px;
	min-height: 40px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--bmlsg-radius);
	color: var(--bmlsg-stone);
	font-family: var(--bmlsg-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bmlsg-tab:hover {
	color: var(--bmlsg-espresso);
	background: var(--bmlsg-cream);
}

.bmlsg-tab.is-active {
	background: var(--bmlsg-espresso);
	border-color: var(--bmlsg-espresso);
	color: var(--bmlsg-cream);
}

.bmlsg-tab:focus-visible {
	outline: 2px solid var(--bmlsg-gold);
	outline-offset: 2px;
}

.bmlsg-units {
	display: inline-flex;
	flex-shrink: 0;
	border: 1px solid var(--bmlsg-border);
	border-radius: var(--bmlsg-radius);
	overflow: hidden;
	background: var(--bmlsg-cream);
}

.bmlsg-unit {
	padding: 0 14px;
	min-width: 48px;
	min-height: 38px;
	background: transparent;
	border: 0;
	color: var(--bmlsg-stone);
	font-family: var(--bmlsg-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bmlsg-unit + .bmlsg-unit {
	border-left: 1px solid var(--bmlsg-border);
}

.bmlsg-unit.is-active {
	background: var(--bmlsg-espresso);
	color: var(--bmlsg-cream);
}

.bmlsg-unit:focus-visible {
	outline: 2px solid var(--bmlsg-gold);
	outline-offset: -2px;
}

/* ==========================================================================
   5. BODY + PANEL
   ========================================================================== */
.bmlsg-modal__body {
	flex: 1;
	padding: 22px 24px;
	overflow-y: auto;
	overscroll-behavior: contain; /* chan cuon xuyen xuong trang nen */
	-webkit-overflow-scrolling: touch;
}

.bmlsg-modal__body::-webkit-scrollbar {
	width: 8px;
}

.bmlsg-modal__body::-webkit-scrollbar-track {
	background: var(--bmlsg-oat);
}

.bmlsg-modal__body::-webkit-scrollbar-thumb {
	background: var(--bmlsg-border);
	border-radius: 4px;
}

.bmlsg-panel[hidden] {
	display: none;
}

.bmlsg-panel__title {
	margin: 0 0 4px;
	font-family: var(--bmlsg-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bmlsg-espresso);
}

.bmlsg-panel__blurb {
	margin: 0 0 16px;
	font-family: var(--bmlsg-font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--bmlsg-stone);
}

/* ==========================================================================
   6. BANG SIZE
   ========================================================================== */
.bmlsg-table-wrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--bmlsg-border);
	border-radius: var(--bmlsg-radius);
	background: var(--bmlsg-cream);
}

.bmlsg-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-family: var(--bmlsg-font-body);
	background: transparent;
}

.bmlsg-table thead th {
	padding: 12px 10px;
	background: var(--bmlsg-sand);
	border: 0;
	border-bottom: 1px solid var(--bmlsg-border);
	font-family: var(--bmlsg-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bmlsg-espresso);
	text-align: center;
	line-height: 1.25;
	white-space: nowrap;
}

.bmlsg-table thead th span {
	display: block;
	margin-top: 3px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--bmlsg-stone);
}

.bmlsg-table tbody td,
.bmlsg-table tbody th {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid rgba(210, 196, 187, 0.5);
	font-size: 14px;
	font-weight: 500;
	color: var(--bmlsg-ink);
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	background: transparent;
}

.bmlsg-table tbody tr:last-child td,
.bmlsg-table tbody tr:last-child th {
	border-bottom: 0;
}

/* Cot SIZE — sticky khi cuon ngang tren mobile */
.bmlsg-table__size {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index: 2;
	font-family: var(--bmlsg-font-display) !important;
	font-size: 14px !important;
	font-weight: 900 !important;
	color: var(--bmlsg-espresso) !important;
	text-align: left !important;
	background: var(--bmlsg-sand) !important;
	box-shadow: 1px 0 0 var(--bmlsg-border);
}

.bmlsg-table tbody .bmlsg-table__size {
	background: var(--bmlsg-oat) !important;
}

/* Cot "Your Chest" — tach biet bang mau gold nhat */
.bmlsg-table__body-col {
	background: rgba(197, 160, 40, 0.07) !important;
	color: var(--bmlsg-espresso) !important;
	font-weight: 600 !important;
}

.bmlsg-table thead .bmlsg-table__body-col {
	background: rgba(197, 160, 40, 0.14) !important;
}

.bmlsg-table tbody tr:hover td,
.bmlsg-table tbody tr:hover th {
	background: rgba(197, 160, 40, 0.1);
}

.bmlsg-table tbody tr:hover .bmlsg-table__size {
	background: rgba(197, 160, 40, 0.18) !important;
}

/* Dau " / cm sau moi so */
.bmlsg-unit-mark {
	margin-left: 1px;
	font-size: 0.72em;
	font-weight: 500;
	color: var(--bmlsg-stone);
}

/* ==========================================================================
   7. HOW WE MEASURE + FOOTER
   ========================================================================== */
.bmlsg-measure {
	margin-top: 22px;
	padding: 18px 20px;
	background: var(--bmlsg-oat);
	border: 1px solid var(--bmlsg-border);
	border-radius: var(--bmlsg-radius);
}

.bmlsg-measure__title {
	margin: 0 0 14px;
	font-family: var(--bmlsg-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bmlsg-gold);
}

.bmlsg-measure__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bmlsg-measure__item {
	display: flex;
	gap: 10px;
	margin: 0;
	list-style: none;
}

.bmlsg-measure__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background: var(--bmlsg-espresso);
	color: var(--bmlsg-cream);
	border-radius: 50%;
	font-family: var(--bmlsg-font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.bmlsg-measure__text {
	font-family: var(--bmlsg-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bmlsg-stone);
}

.bmlsg-measure__text strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 700;
	color: var(--bmlsg-espresso);
}

.bmlsg-modal__footer {
	padding: 16px 24px;
	border-top: 1px solid var(--bmlsg-border);
	background: var(--bmlsg-oat);
	flex-shrink: 0;
}

.bmlsg-modal__tip {
	margin: 0 0 4px;
	font-family: var(--bmlsg-font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--bmlsg-espresso);
}

.bmlsg-modal__tip strong {
	font-weight: 700;
	color: var(--bmlsg-espresso-deep);
}

.bmlsg-modal__fine {
	margin: 0;
	font-family: var(--bmlsg-font-body);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--bmlsg-stone);
}

/* Khoa cuon trang nen khi modal mo */
body.bmlsg-locked {
	overflow: hidden !important;
}

/* ==========================================================================
   8. MOBILE — BOTTOM SHEET  (<= 849px, khop breakpoint cua Flatsome)
   ========================================================================== */
@media (max-width: 849px) {

	.bmlsg-trigger {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 46px;
	}

	.bmlsg-trigger-wrap {
		gap: 8px;
		margin: 12px 0 16px;
	}

	/* Modal -> sheet truot tu day man hinh */
	.bmlsg-modal {
		align-items: flex-end;
		justify-content: stretch;
		padding: 0;
	}

	.bmlsg-modal__panel {
		max-width: none;
		width: 100%;
		/* dvh xu ly thanh dia chi Safari iOS tu an/hien */
		max-height: 92vh;
		max-height: 92dvh;
		border: 0;
		border-top: 1px solid var(--bmlsg-border);
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
	}

	.bmlsg-modal.is-open .bmlsg-modal__panel {
		transform: translateY(0);
	}

	/* Khi dang keo bang ngon tay — JS tat transition */
	.bmlsg-modal__panel.is-dragging {
		transition: none;
	}

	/* Thanh keo */
	.bmlsg-modal__grip {
		display: block;
		width: 40px;
		height: 4px;
		margin: 10px auto 2px;
		background: var(--bmlsg-border);
		border-radius: 999px;
		flex-shrink: 0;
	}

	.bmlsg-modal__header {
		padding: 10px 16px 14px;
	}

	.bmlsg-modal__title {
		font-size: 21px;
	}

	.bmlsg-modal__close {
		margin: -4px -4px 0 0;
	}

	/* Toolbar xuong 2 hang: tab cuon ngang, don vi ben duoi */
	.bmlsg-modal__toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px 16px;
	}

	.bmlsg-tabs {
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 0 16px;
	}

	.bmlsg-tabs::-webkit-scrollbar {
		display: none;
	}

	.bmlsg-tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
		min-height: 44px;
		border-color: var(--bmlsg-border);
		background: var(--bmlsg-cream);
	}

	.bmlsg-tab.is-active {
		background: var(--bmlsg-espresso);
		border-color: var(--bmlsg-espresso);
	}

	.bmlsg-units {
		align-self: flex-start;
	}

	.bmlsg-unit {
		min-height: 40px;
		min-width: 54px;
	}

	.bmlsg-modal__body {
		padding: 16px;
	}

	.bmlsg-panel__blurb {
		font-size: 12.5px;
		margin-bottom: 14px;
	}

	/* Bang: cot Size dinh trai, phan con lai cuon ngang */
	.bmlsg-table thead th,
	.bmlsg-table tbody td,
	.bmlsg-table tbody th {
		padding: 11px 12px;
	}

	.bmlsg-table tbody td,
	.bmlsg-table tbody th {
		font-size: 13.5px;
	}

	.bmlsg-table__size {
		min-width: 62px;
	}

	/* Bo hover tren thiet bi cham (gay dinh mau sau khi cham) */
	.bmlsg-table tbody tr:hover td,
	.bmlsg-table tbody tr:hover th {
		background: transparent;
	}

	.bmlsg-table tbody tr:hover .bmlsg-table__size {
		background: var(--bmlsg-oat) !important;
	}

	.bmlsg-table tbody tr:hover .bmlsg-table__body-col {
		background: rgba(197, 160, 40, 0.07) !important;
	}

	/* How we measure -> 1 cot */
	.bmlsg-measure {
		margin-top: 18px;
		padding: 16px;
	}

	.bmlsg-measure__list {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Footer + vung an toan iPhone notch */
	.bmlsg-modal__footer {
		padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
	}

	.bmlsg-modal__tip {
		font-size: 12.5px;
	}
}

/* ==========================================================================
   9. MAN HINH NHO (iPhone SE, <= 400px)
   ========================================================================== */
@media (max-width: 400px) {

	.bmlsg-trigger-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.bmlsg-trigger {
		width: 100%;
	}

	.bmlsg-trigger__note {
		text-align: center;
	}

	.bmlsg-modal__title {
		font-size: 19px;
	}

	.bmlsg-modal__header,
	.bmlsg-modal__toolbar,
	.bmlsg-modal__body,
	.bmlsg-modal__footer {
		padding-left: 13px;
		padding-right: 13px;
	}

	.bmlsg-tabs {
		margin: 0 -13px;
		padding: 0 13px;
	}

	.bmlsg-tab {
		padding: 9px 13px;
		font-size: 11.5px;
	}

	.bmlsg-table thead th,
	.bmlsg-table tbody td,
	.bmlsg-table tbody th {
		padding: 10px;
	}

	.bmlsg-table tbody td,
	.bmlsg-table tbody th {
		font-size: 13px;
	}
}

/* ==========================================================================
   10. MAN HINH THAP (xoay ngang dien thoai)
   ========================================================================== */
@media (max-height: 520px) and (max-width: 849px) {

	.bmlsg-modal__panel {
		max-height: 96vh;
		max-height: 96dvh;
	}

	.bmlsg-modal__grip {
		margin: 6px auto 0;
	}

	.bmlsg-modal__header {
		padding: 8px 16px 10px;
	}

	.bmlsg-modal__title {
		font-size: 17px;
	}

	.bmlsg-modal__eyebrow {
		display: none;
	}

	.bmlsg-measure {
		margin-top: 14px;
	}
}

/* ==========================================================================
   11. TON TRONG prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.bmlsg-modal__overlay,
	.bmlsg-modal__panel,
	.bmlsg-trigger,
	.bmlsg-tab,
	.bmlsg-unit,
	.bmlsg-modal__close {
		transition: none !important;
	}

	.bmlsg-modal.is-open .bmlsg-modal__panel {
		transform: none !important;
	}
}