/* LSOS 1.0.184 — Woodmart header account OTP drawer.
   Loaded only while LSOS OTP login is active and the visitor is logged out. */

.idb-header-account-shell[hidden]{display:none!important}
.idb-header-account-shell{
	position:fixed;
	inset:0;
	z-index:999999;
	font-family:inherit;
}
.idb-header-account-backdrop{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	margin:0!important;
	padding:0!important;
	border:0!important;
	border-radius:0!important;
	background:rgba(16,30,45,.67)!important;
	-webkit-backdrop-filter:blur(1px);
	backdrop-filter:blur(1px);
	cursor:default!important;
}
.idb-header-account-drawer{
	--idb-drawer-blue:var(--wd-primary-color,#1769e8);
	position:absolute;
	inset-block:0;
	inset-inline-start:0;
	width:min(410px,92vw);
	max-width:100%;
	overflow:auto;
	box-sizing:border-box;
	background:#fff;
	color:#263d54;
	box-shadow:18px 0 45px rgba(16,34,54,.18);
	direction:rtl;
	outline:0;
	animation:idbHeaderDrawerIn .22s ease-out both;
}
@keyframes idbHeaderDrawerIn{
	from{transform:translateX(-28px);opacity:.65}
	to{transform:translateX(0);opacity:1}
}
html[dir="ltr"] .idb-header-account-drawer{
	inset-inline-start:auto;
	inset-inline-end:0;
	direction:ltr;
	box-shadow:-18px 0 45px rgba(16,34,54,.18);
}
html[dir="ltr"] .idb-header-account-drawer{animation-name:idbHeaderDrawerInLtr}
@keyframes idbHeaderDrawerInLtr{
	from{transform:translateX(28px);opacity:.65}
	to{transform:translateX(0);opacity:1}
}

body.idb-header-otp-open{overflow:hidden!important}

/* If Woodmart's own login drawer was also toggled by another listener,
   keep it visually suppressed only while the LSOS drawer is open. */
body.idb-header-otp-open .login-form-side{
	visibility:hidden!important;
	opacity:0!important;
	pointer-events:none!important;
}

.idb-header-account-topbar{
	position:sticky;
	top:0;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:70px;
	padding:0 22px;
	border-bottom:1px solid #edf1f5;
	background:rgba(255,255,255,.97);
}
.idb-header-account-title{
	display:flex;
	align-items:center;
	gap:9px;
	color:#152f49;
	font-size:17px;
	font-weight:900;
}
.idb-header-account-user-icon{
	display:grid;
	width:29px;
	height:29px;
	place-items:center;
	color:var(--idb-drawer-blue);
}
.idb-header-account-user-icon svg{
	width:27px;
	height:27px;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.idb-header-account-close{
	display:grid!important;
	width:37px!important;
	height:37px!important;
	min-height:0!important;
	margin:0!important;
	padding:0!important;
	place-items:center!important;
	border:0!important;
	border-radius:50%!important;
	background:transparent!important;
	color:#182c3f!important;
	box-shadow:none!important;
	font-family:Arial,sans-serif!important;
	font-size:30px!important;
	font-weight:300!important;
	line-height:1!important;
	cursor:pointer!important;
}
.idb-header-account-close:hover{background:#f2f5f8!important}

.idb-header-account-welcome{
	padding:25px 25px 6px;
	text-align:center;
}
.idb-header-account-welcome h2{
	margin:0 0 7px!important;
	color:var(--idb-drawer-blue)!important;
	font-size:21px!important;
	font-weight:900!important;
	line-height:1.5!important;
}
.idb-header-account-welcome p{
	margin:0!important;
	color:#748397!important;
	font-size:12px!important;
	line-height:1.9!important;
}

.idb-header-account-otp{padding:10px 25px 0}
.idb-header-account-drawer .idb-my-account-otp{
	width:100%!important;
	max-width:none!important;
	margin:0!important;
	padding:0!important;
	border:0!important;
	border-radius:0!important;
	background:transparent!important;
	box-shadow:none!important;
}
.idb-header-account-drawer .idb-otp-header{display:none!important}
.idb-header-account-drawer .idb-otp-channel-switch{margin-bottom:15px}
.idb-header-account-drawer .idb-otp-channel-switch legend{display:none}
.idb-header-account-drawer .idb-otp-channel-options{gap:6px}
.idb-header-account-drawer .idb-otp-channel-options label{
	min-height:43px;
	border-radius:6px;
	background:#f3f6fa;
}
.idb-header-account-drawer .idb-otp-channel-options label.is-selected{
	border-color:var(--idb-drawer-blue);
	background:var(--idb-drawer-blue);
	color:#fff;
	box-shadow:none;
}
.idb-header-account-drawer .idb-otp-channel-options input{
	position:absolute;
	width:1px!important;
	height:1px!important;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}
.idb-header-account-drawer .idb-otp-label>span:first-child{
	color:#3e5062;
	font-size:11px;
}
.idb-header-account-drawer .idb-mobile-row,
.idb-header-account-drawer .idb-otp-wide-input,
.idb-header-account-drawer .idb-otp-code{
	border-radius:6px!important;
}
.idb-header-account-drawer .idb-mobile-prefix{
	position:relative;
	padding-inline-start:38px;
}
.idb-header-account-drawer .idb-mobile-prefix::before{
	content:"";
	position:absolute;
	inset-inline-start:12px;
	top:50%;
	width:18px;
	height:12px;
	transform:translateY(-50%);
	border:1px solid #d5dbe2;
	border-radius:2px;
	background:
		linear-gradient(to bottom,#239f40 0 33%,#fff 33% 66%,#da0000 66% 100%);
}
.idb-header-account-drawer .idb-otp-submit{
	min-height:47px!important;
	border-radius:6px!important;
	background:var(--idb-drawer-blue)!important;
}
.idb-header-account-drawer .idb-otp-submit:hover{filter:brightness(.94)}
.idb-header-account-drawer .idb-otp-secondary-link{
	display:block;
	margin-top:12px;
	text-align:center;
	font-size:11px;
	font-weight:700;
}

.idb-header-account-auto-register{
	margin:21px 25px 0;
	padding:18px 14px;
	border-top:1px solid #edf1f5;
	text-align:center;
}
.idb-header-account-auto-register strong{
	display:block;
	margin-bottom:5px;
	color:#263f57;
	font-size:13px;
}
.idb-header-account-auto-register span{
	display:block;
	color:#8793a2;
	font-size:10px;
	line-height:1.8;
}

.idb-header-account-benefits{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:8px;
	padding:19px 19px 16px;
	background:linear-gradient(180deg,#f7faff 0,#eef5ff 100%);
}
.idb-header-account-benefits>div{
	display:flex;
	min-width:0;
	flex-direction:column;
	align-items:center;
	gap:7px;
	text-align:center;
}
.idb-header-account-benefits span{
	display:grid;
	width:37px;
	height:37px;
	place-items:center;
	border-radius:10px;
	background:#fff;
	color:var(--idb-drawer-blue);
	box-shadow:0 4px 12px rgba(29,91,162,.08);
}
.idb-header-account-benefits svg{
	width:22px;
	height:22px;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.idb-header-account-benefits strong{
	color:#33516d;
	font-size:10px;
	line-height:1.5;
}

.idb-header-account-brand{
	padding:17px 20px 22px;
	background:#eef5ff;
	text-align:center;
}
.idb-header-account-brand strong{
	display:block;
	color:#1f3449;
	font-size:13px;
	letter-spacing:.7px;
}
.idb-header-account-brand span{
	display:block;
	margin-top:3px;
	color:#6f8397;
	font-size:9px;
}

/* Keep OTP notices/profile screens visually consistent inside the drawer. */
.idb-header-account-drawer .idb-otp-notice{margin-bottom:14px}
.idb-header-account-drawer .idb-otp-profile-intro{text-align:center}
.idb-header-account-drawer .idb-otp-profile-intro h3{
	margin:0 0 5px!important;
	color:#274762!important;
	font-size:17px!important;
}

@media(max-width:480px){
	.idb-header-account-drawer{width:100vw}
	.idb-header-account-topbar{min-height:62px;padding-inline:16px}
	.idb-header-account-welcome{padding:20px 18px 4px}
	.idb-header-account-otp{padding-inline:18px}
	.idb-header-account-auto-register{margin-inline:18px}
	.idb-header-account-benefits{padding-inline:13px}
}
@media(prefers-reduced-motion:reduce){
	.idb-header-account-drawer{animation:none}
}


/* LSOS 1.0.187 — logistics artwork inside header account drawer. */
.idb-header-account-visual{
	position:relative;
	overflow:hidden;
	margin:0;
	background:
		linear-gradient(180deg,#eef5ff 0%,#f8fbff 38%,#fff 100%);
}
.idb-header-account-visual::before,
.idb-header-account-visual::after{
	content:"";
	position:absolute;
	z-index:1;
	inset-inline:0;
	pointer-events:none;
}
.idb-header-account-visual::before{
	top:0;
	height:34px;
	background:linear-gradient(180deg,#eef5ff 0%,rgba(238,245,255,0) 100%);
}
.idb-header-account-visual::after{
	bottom:0;
	height:58px;
	background:linear-gradient(0deg,#eef5ff 0%,rgba(238,245,255,0) 100%);
}
.idb-header-account-visual img{
	display:block;
	width:100%;
	height:190px;
	object-fit:cover;
	object-position:center 62%;
	opacity:.98;
	filter:saturate(.96) contrast(.98);
	transform:scale(1.015);
}
.idb-header-account-brand{
	margin-top:-1px;
}
@media(max-width:480px){
	.idb-header-account-visual img{
		height:168px;
		object-position:center 64%;
	}
}


/* LSOS 1.0.188 — drawer alignment, centered title, softer artwork fade. */
.idb-header-account-drawer{
	left:0;
	right:auto;
	inset-inline-start:auto;
	inset-inline-end:auto;
	box-shadow:18px 0 45px rgba(16,34,54,.18);
	animation:idbHeaderDrawerInLeft .22s ease-out both;
}
@keyframes idbHeaderDrawerInLeft{
	from{transform:translateX(-28px);opacity:.65}
	to{transform:translateX(0);opacity:1}
}
html[dir="ltr"] .idb-header-account-drawer,
html[dir="rtl"] .idb-header-account-drawer{
	left:0;
	right:auto;
	inset-inline-start:auto;
	inset-inline-end:auto;
	box-shadow:18px 0 45px rgba(16,34,54,.18);
	animation:idbHeaderDrawerInLeft .22s ease-out both;
}
.idb-header-account-topbar{
	position:sticky;
	justify-content:center;
	padding:0 58px;
}
.idb-header-account-close{
	position:absolute!important;
	left:14px!important;
	right:auto!important;
	top:50%!important;
	transform:translateY(-50%);
}
.idb-header-account-title{
	width:100%;
	justify-content:center;
	text-align:center;
}
.idb-header-account-title strong{
	display:inline-block;
	text-align:center;
}
.idb-header-account-visual{
	background:#eef5ff;
}
.idb-header-account-visual::before,
.idb-header-account-visual::after{
	display:none;
}
.idb-header-account-visual img{
	display:block;
	width:100%;
	height:190px;
	object-fit:cover;
	object-position:center 62%;
	-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.96) 12%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
	mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.96) 12%, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
	-webkit-mask-size:100% 100%;
	mask-size:100% 100%;
	background:#eef5ff;
}
.idb-header-account-brand{
	margin-top:-10px;
	padding-top:12px;
	background:#eef5ff;
}
@media(max-width:480px){
	.idb-header-account-topbar{padding:0 52px;}
	.idb-header-account-close{left:10px!important;}
	.idb-header-account-visual img{
		height:168px;
		object-position:center 64%;
	}
}


/* LSOS 1.0.190 fallback — JS and inline critical styles remain authoritative. */
.idb-header-account-shell .idb-header-account-drawer{left:0!important;right:auto!important;inset-inline-start:auto!important;inset-inline-end:auto!important;}
.idb-header-account-shell .idb-header-account-topbar{justify-content:center!important;padding:0 58px!important;text-align:center!important;}
.idb-header-account-shell .idb-header-account-title{width:100%!important;justify-content:center!important;text-align:center!important;}
.idb-header-account-shell .idb-header-account-close{position:absolute!important;left:14px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;}
.idb-header-account-shell .idb-header-account-visual{background:#eef5ff!important;line-height:0!important;font-size:0!important;overflow:hidden!important;}
.idb-header-account-shell .idb-header-account-visual::before{display:block!important;top:-1px!important;height:34px!important;background:linear-gradient(to bottom,#eef5ff 0%,rgba(238,245,255,.96) 28%,rgba(238,245,255,0) 100%)!important;}
.idb-header-account-shell .idb-header-account-visual::after{display:block!important;bottom:-1px!important;height:56px!important;background:linear-gradient(to top,#eef5ff 0%,rgba(238,245,255,.98) 22%,rgba(238,245,255,.45) 52%,rgba(238,245,255,0) 100%)!important;}
.idb-header-account-shell .idb-header-account-visual img{display:block!important;width:100%!important;height:auto!important;max-width:none!important;margin:0!important;border:0!important;box-shadow:none!important;}
.idb-header-account-shell .idb-header-account-brand{background:#eef5ff!important;margin-top:-1px!important;padding-top:14px!important;}


/* LSOS 1.0.192 — physical left placement; do not use logical inline inset here.
   In RTL, inset-inline-start:0 means right:0 and would move the drawer back right. */
html body .idb-header-account-shell .idb-header-account-drawer{
	left:0!important;
	right:auto!important;
	inset-inline-start:auto!important;
	inset-inline-end:auto!important;
}
html[dir="rtl"] body .idb-header-account-shell .idb-header-account-drawer,
html[dir="ltr"] body .idb-header-account-shell .idb-header-account-drawer{
	left:0!important;
	right:auto!important;
	inset-inline-start:auto!important;
	inset-inline-end:auto!important;
}


/* LSOS 1.0.193 — structural left-side layout.
   This does not rely on RTL-sensitive left/right positioning. */
.idb-header-account-shell:not([hidden]){
	display:flex!important;
	flex-direction:row!important;
	justify-content:flex-start!important;
	align-items:stretch!important;
	direction:ltr!important;
}
.idb-header-account-shell .idb-header-account-drawer{
	position:relative!important;
	inset:auto!important;
	top:auto!important;
	bottom:auto!important;
	left:auto!important;
	right:auto!important;
	flex:0 0 min(410px,92vw)!important;
	width:min(410px,92vw)!important;
	height:100vh!important;
	margin:0!important;
	order:0!important;
	align-self:stretch!important;
	direction:rtl!important;
	z-index:1!important;
}
.idb-header-account-shell .idb-header-account-backdrop{
	position:absolute!important;
	inset:0!important;
	z-index:0!important;
}
@media(max-width:480px){
	.idb-header-account-shell .idb-header-account-drawer{
		flex-basis:100vw!important;
		width:100vw!important;
	}
}