/* Variation cards — tavodraugas
   Tokens mirror the "tavo-draugas" Bricks theme style. */

.tvd-var{
	--tvd-accent:#B4A57A;
	--tvd-accent-soft:rgba(180,165,122,.10);
	--tvd-ink:#212121;
	--tvd-ink-soft:rgba(33,33,33,.58);
	--tvd-line:rgba(33,33,33,.16);
	--tvd-radius:0px;
	--tvd-cols:2;

	display:flex;
	flex-direction:column;
	gap:22px;
	color:var(--tvd-ink);
}

/* ---------- option cards ---------- */

.tvd-var__options{
	display:grid;
	grid-template-columns:repeat(var(--tvd-cols),minmax(0,1fr));
	gap:10px;
}
@media (max-width:600px){
	.tvd-var__options{grid-template-columns:repeat(var(--tvd-cols-mobile,2),minmax(0,1fr));}
}

.tvd-var__opt{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:7px;
	padding:15px 16px;
	background:#fff;
	border:1px solid var(--tvd-line);
	border-radius:var(--tvd-radius);
	font:inherit;
	line-height:1.2;
	text-align:left;
	cursor:pointer;
	transition:border-color .3s, background-color .3s, box-shadow .3s;
}
.tvd-var__opt:hover:not(:disabled){border-color:var(--tvd-accent);}
.tvd-var__opt:focus-visible{outline:2px solid var(--tvd-ink);outline-offset:2px;}

.tvd-var__opt.is-active{
	border-color:var(--tvd-accent);
	box-shadow:inset 0 0 0 1px var(--tvd-accent);
}

.tvd-var__opt.is-oos{opacity:.4;cursor:not-allowed;}

.tvd-var__name{
	font-weight:500;
	font-size:.95rem;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.tvd-var__prices{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:8px;
}
.tvd-var__price{
	font-weight:700;
	font-size:1.05rem;
	white-space:nowrap;
}
.tvd-var__old{
	font-size:.85rem;
	color:var(--tvd-ink-soft);
	text-decoration:line-through;
	white-space:nowrap;
}
.tvd-var__badge{
	position:absolute;
	top:-1px;
	right:-1px;
	background:var(--tvd-ink);
	color:#fff;
	font-size:.7rem;
	font-weight:600;
	letter-spacing:.04em;
	padding:3px 8px;
}
.tvd-var__oos{
	font-size:.7rem;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--tvd-ink-soft);
}

/* ---------- full-width (single column) cards ---------- */

.tvd-var--stacked .tvd-var__opt{
	flex-direction:row;
	align-items:center;
	gap:14px;
	padding:14px 11px 10px;
	min-height: 50px;
}
.tvd-var--stacked .tvd-var__name{
	order:1;
	font-size: .9rem;
}
.tvd-var--stacked .tvd-var__badge{
	position:static;
	order:2;
	margin-left:auto;
	padding:4px 9px;
}
.tvd-var--stacked .tvd-var__prices{
	order:3;
	align-items:baseline;
	flex-wrap:nowrap;
}
.tvd-var--stacked .tvd-var__opt:not(:has(.tvd-var__badge)) .tvd-var__prices{
	margin-left:auto;
}
.tvd-var--stacked .tvd-var__price{
	font-size:.9rem;
}
.tvd-var--stacked .tvd-var__oos{
	order:4;
	flex:0 0 auto;
}

@media (max-width:480px){
	.tvd-var--stacked .tvd-var__opt{
		padding:14px 16px;
		gap:10px;
	}
	.tvd-var--stacked .tvd-var__prices{flex-wrap:wrap;justify-content:flex-end;}
}

/* ---------- actions row ---------- */

.tvd-var__actions{
	display:flex;
	align-items:stretch;
	flex-wrap:wrap;
	gap:20px;
	line-height:1;
}

.tvd-var__qty{
	display:flex;
	align-items:center;
	flex:0 0 auto;
	border:1px solid #432e25;
	border-radius:var(--tvd-radius);
	height: 50px;
}
.tvd-var__step{
	width:44px;
	min-height:48px;
	padding:0;
	border:0;
	background:transparent;
	color:var(--tvd-ink);
	font-size:2rem;
	line-height:1;
	text-align: center;
	cursor:pointer;
	transition:color .3s;
}
.tvd-var__step:hover:not(:disabled){color:var(--tvd-accent);}
.tvd-var__step:disabled{opacity:.25;cursor:not-allowed;}
.tvd-var__input{
	width:46px;
	min-height: 50px;
	align-self:stretch;
	padding:0;
	border:0;
	background:transparent;
	font-size: 1.7rem;
	font-weight:600;
	text-align:center;
	color:#432e25;
}
.tvd-var__input:focus{outline:none;}

.tvd-var__total{
	display:flex;
	flex-direction:column;
	justify-content:center;
	line-height:1.25;
	margin-right:auto;
}
.tvd-var__total-label{
	font-size:.5rem;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--tvd-ink-soft);
}
.tvd-var__total-price{
	font-size:2.2rem;
	font-weight:700;
	letter-spacing: -.15rem;
    line-height: 1;
	white-space:nowrap;
}

/* button mirrors the theme-style primary button */
.tvd-var__add{
	flex:1 1 240px;
	height:50px;
	padding:1em 1.6em;
	border:1px solid var(--tvd-accent);
	border-radius:var(--tvd-radius);
	background:var(--tvd-accent);
	color:var(--tvd-ink);
	font:inherit;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.04em;
	line-height:1;
	text-align: center;
	cursor:pointer;
	transition:.3s;
}
.tvd-var__add:hover:not(:disabled){
	background:var(--tvd-ink);
	border-color:var(--tvd-ink);
	color:#e0e0e0;
}
.tvd-var__add:disabled{opacity:.55;cursor:wait;}

/* ---------- status ---------- */

.tvd-var__msg{
	min-height:1.3em;
	font-size:.88rem;
	color:var(--tvd-ink-soft);
}
.tvd-var__msg.is-ok{color:var(--tvd-ink);}
.tvd-var__msg.is-err{color:#a33;}
.tvd-var__msg a{color:inherit;text-underline-offset:3px;}

/* ---------- catalog mode ---------- */

.tvd-var--catalog .tvd-var__actions{
	display:block;
}
.tvd-var--catalog .tvd-var__add{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	text-decoration:none;
	line-height:1.2;
}
.tvd-var--catalog.tvd-var--stacked .tvd-var__opt{
	min-height:56px;
}