/* ============================================================
   Sleepwell Size Modal v4 — Single product & Shop/Archive
   ============================================================ */

:root {
	--ssm4-navy:      #1a2e5a;
	--ssm4-navy-dark: #111d3a;
	--ssm4-border:    #e0e3ea;
	--ssm4-bg-sel:    #f0f3f9;
	--ssm4-radius:    12px;
	--ssm4-radius-sm: 8px;
}

/* ── Hide raw WC selects (kept for form submission) ─────────── */
.ssm4-field ~ select,
.ssm4-field + select {
	position:       absolute !important;
	width:          1px !important;
	height:         1px !important;
	overflow:       hidden !important;
	opacity:        0 !important;
	pointer-events: none !important;
}

/* ── Hide theme-generated size/thickness text ───────────────── */
.mattress-size-label-below,
tr.mattress-size-row .mf-attr-value,
tr:has(#pa_thickness) .mf-attr-value,
tr:has(#pa_thickness) td.label,
tr:has(#pa_thickness) td.label label {
	display: none !important;
}

/* ── WC variations table — equal column widths ──────────────── */
table.variations {
	width:        100% !important;
	table-layout: fixed !important;
}
table.variations td.label {
	width:       auto !important;
	white-space: nowrap !important;
}
table.variations td.value {
	width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIELD ROW — used on BOTH single product (inside td) and loop
   ═══════════════════════════════════════════════════════════════ */
.ssm4-field {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin:      6px 0 4px;
	width:       100%;
	box-sizing:  border-box;
}
.ssm4-field-label {
	font-size:   13px;
	color:       #555;
	white-space: nowrap;
	user-select: none;
	min-width:   80px; /* keeps labels aligned across both rows */
}
.ssm4-info { opacity:.65; font-size:14px; }

/* ── Trigger button ─────────────────────────────────────────── */
.ssm4-trigger {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	gap:             12px !important;
	padding:         11px 16px !important;
	border:          1.5px solid var(--ssm4-navy) !important;
	border-radius:   var(--ssm4-radius-sm) !important;
	background:      #fff !important;
	cursor:          pointer !important;
	flex:            0 0 auto !important;
	min-width:       200px !important;
	box-sizing:      border-box !important;
	font-family:     inherit !important;
	font-size:       14px !important;
	font-weight:     500 !important;
	color:           var(--ssm4-navy) !important;
	text-align:      left !important;
	outline:         none !important;
	visibility:      visible !important;
	opacity:         1 !important;
	pointer-events:  all !important;
}
.ssm4-trigger:hover { box-shadow: 0 2px 12px rgba(26,46,90,.18) !important; }
.ssm4-trigger-text  { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ssm4-edit-icon     { flex-shrink:0; color:var(--ssm4-navy); }

/* ═══════════════════════════════════════════════════════════════
   SHOP / ARCHIVE LOOP CARD
   ═══════════════════════════════════════════════════════════════ */
.ssm4-loop-wrap {
	padding:    6px 0 2px;
	width:      100%;
	box-sizing: border-box;
}
.ssm4-loop-field {
	margin: 4px 0 !important;
}

/* ── MODAL OVERLAY ──────────────────────────────────────────── */
.ssm4-overlay {
	display:         none;
	position:        fixed !important;
	top:             0 !important;
	left:            0 !important;
	right:           0 !important;
	bottom:          0 !important;
	width:           100vw !important;
	height:          100vh !important;
	background:      rgba(0,0,0,0.65) !important;
	z-index:         2147483647 !important;
	align-items:     center !important;
	justify-content: center !important;
	padding:         16px !important;
	box-sizing:      border-box !important;
	margin:          0 !important;
	transform:       none !important;
	pointer-events:  all !important;
}
.ssm4-overlay.ssm4-is-open { display: flex !important; }

/* ── Modal card ─────────────────────────────────────────────── */
.ssm4-overlay .ssm4-modal {
	background:     #fff !important;
	width:          100% !important;
	max-width:      600px !important;
	max-height:     88vh !important;
	border-radius:  16px !important;
	display:        flex !important;
	flex-direction: column !important;
	overflow:       hidden !important;
	box-shadow:     0 20px 60px rgba(0,0,0,0.3) !important;
	position:       relative !important;
	z-index:        2147483647 !important;
	transform:      none !important;
	margin:         0 auto !important;
}

/* ── Modal header ───────────────────────────────────────────── */
.ssm4-modal-header {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	padding:         18px 22px 14px !important;
	border-bottom:   1px solid #eef0f5 !important;
	flex-shrink:     0 !important;
}
.ssm4-modal-title {
	font-size:      12px !important;
	font-weight:    800 !important;
	letter-spacing: .15em !important;
	color:          #333 !important;
	text-transform: uppercase !important;
}
.ssm4-close {
	background:  none !important;
	border:      none !important;
	cursor:      pointer !important;
	font-size:   22px !important;
	line-height: 1 !important;
	color:       #888 !important;
	padding:     0 4px !important;
	outline:     none !important;
	font-family: inherit !important;
}
.ssm4-close:hover { color: #222 !important; }

/* ── Modal body ─────────────────────────────────────────────── */
.ssm4-overlay .ssm4-modal-body {
	padding:    22px 22px 24px !important;
	overflow-y: auto !important;
	flex:       1 !important;
}

/* ── Dimension grid ─────────────────────────────────────────── */
.ssm4-grid {
	display:               grid !important;
	grid-template-columns: repeat(3,1fr) !important;
	gap:                   10px !important;
}
@media (max-width:400px) {
	.ssm4-grid { grid-template-columns: repeat(2,1fr) !important; }
}
.ssm4-dim-btn {
	display:         flex !important;
	flex-direction:  column !important;
	align-items:     center !important;
	justify-content: center !important;
	padding:         18px 8px !important;
	border:          1.5px solid var(--ssm4-border) !important;
	border-radius:   var(--ssm4-radius) !important;
	background:      #fff !important;
	cursor:          pointer !important;
	transition:      all .15s;
	outline:         none !important;
	text-align:      center !important;
	font-family:     inherit !important;
}
.ssm4-dim-btn:hover,
.ssm4-dim-btn.ssm4-active {
	border-color: var(--ssm4-navy) !important;
	background:   var(--ssm4-bg-sel) !important;
}
.ssm4-dim-main {
	font-size:   15px !important;
	font-weight: 700 !important;
	color:       var(--ssm4-navy) !important;
	line-height: 1.2;
}

/* ── Thickness row ──────────────────────────────────────────── */
.ssm4-thick-row { display:flex !important; gap:10px !important; flex-wrap:wrap !important; }
.ssm4-thick-btn {
	flex:            1 !important;
	min-width:       120px !important;
	display:         flex !important;
	flex-direction:  column !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             3px !important;
	padding:         20px 12px !important;
	border:          1.5px solid var(--ssm4-border) !important;
	border-radius:   var(--ssm4-radius) !important;
	background:      #fff !important;
	cursor:          pointer !important;
	text-align:      center !important;
	transition:      all .15s;
	outline:         none !important;
	font-family:     inherit !important;
}
.ssm4-thick-btn:hover,
.ssm4-thick-btn.ssm4-active {
	border-color: var(--ssm4-navy) !important;
	background:   var(--ssm4-bg-sel) !important;
}
.ssm4-thick-main { font-size:16px !important; font-weight:700 !important; color:var(--ssm4-navy) !important; }
.ssm4-thick-sub  { font-size:12px !important; color:#888 !important; }

/* ── Lock body scroll ───────────────────────────────────────── */
body.ssm4-open { overflow:hidden !important; }