/* Archive loop card: collapsed pack-size row, expands in place into the
   full variation picker. State lives on .tvd-card (the Bricks loop item).
   Tokens mirror tvd-variations.css so both states feel like one component. */

.tvd-card{
	--tvd-card-img:300px;
	--tvd-card-pad:20px;

	position:relative;
	padding:var(--tvd-card-pad);
	border-radius:4px;
	background:transparent;
	transition:background-color .3s ease;
}
.tvd-card.is-open{
	--tvd-card-img:130px;
	background:#F7F6F4;
}

/* The product image shrinks as the card opens. */
.tvd-card .brxe-image img{
	width:auto;
	max-width:100%;
	max-height:var(--tvd-card-img);
	transition:max-height .35s ease;
}

.tvd-qa{
	--tvd-qa-ink:#212121;
	--tvd-qa-gold:#B4A57A;

	display:flex;
	flex-direction:column;
	gap:20px;
	width:100%;
	color:var(--tvd-qa-ink);
	text-align:left;
}

/* ---------- collapsed: pack sizes ---------- */

.tvd-qa__sizes{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(0,1fr));
	gap:10px;
	text-align:center;
}
.tvd-qa__size{
	display:flex;
	flex-direction:column;
	gap:7px;
	min-width:0;
	padding:4px 2px;
	border:0;
	border-radius:2px;
	background:transparent;
	font:inherit;
	color:inherit;
	line-height:1.15;
	transition:background-color .25s ease;
}
button.tvd-qa__size{cursor:pointer;}
button.tvd-qa__size:focus-visible{outline:2px solid var(--tvd-qa-ink);outline-offset:2px;}

.tvd-qa__size-label{font-size:1rem;font-weight:500;white-space:nowrap;}
.tvd-qa__size-price{font-size:1rem;font-weight:700;white-space:nowrap;}

@media (max-width:420px){
	.tvd-qa__size-label,
	.tvd-qa__size-price{font-size:.92rem;}
}

/* ---------- collapsed: button ---------- */

.tvd-qa__btn{
	display:flex;
	align-items:center;
	justify-content:center;
	max-width: 180px;
    align-self: center;
	padding:1em 1.4em;
	border:2px solid var(--bricks-color-grey-900);
	background:transparent;
	color:var(--bricks-color-grey-900);
	font:inherit;
	font-weight:700;
	line-height:1;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:.06em;
	text-decoration:none;
	cursor:pointer;
	transition:background-color .3s, color .3s;
}
.tvd-qa__btn:hover{background:var(--tvd-qa-gold);color:#fff;border-color:var(--tvd-qa-gold)}
.tvd-qa__btn:focus-visible{outline:2px solid var(--tvd-qa-ink);outline-offset:3px;}

/* ---------- open state ---------- */

.tvd-qa__open{display:none;}
.tvd-qa__close{display:none;}

.tvd-card.is-open .tvd-qa__sizes,
.tvd-card.is-open .tvd-qa__btn{display:none;}

.tvd-card.is-open .tvd-qa__open{display:block;}

.tvd-card.is-open .tvd-qa__close{
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:6px;
	right:6px;
	z-index:5;
	width:36px;
	height:36px;
	padding:0;
	border:0;
	background:transparent;
	color:#8D8D8D;
	font-size: 4rem;
    font-weight: 200;
	line-height:1;
	cursor:pointer;
	transition:background-color .3s, color .3s;
}

.tvd-qa__open .tvd-var{width:100%;gap:18px;}

@media (max-width:480px){
	.tvd-card{--tvd-card-pad:14px;}
	.tvd-card.is-open{--tvd-card-img:110px;}
}

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

.tvd-qa--catalog .tvd-qa__size{cursor:default;}


/* pop-up option padding override: tighter than standalone picker */
.tvd-qa__open .tvd-var--stacked .tvd-var__opt{
	padding:.313rem .75rem;
	min-height: 30px;
}
.tvd-qa__open .tvd-var--stacked .tvd-var__qty {
	width: 35%;
}
.tvd-qa__open .tvd-var--stacked .tvd-var__total {
	margin-right: 0;
    margin-left: auto;
}
.tvd-qa__open .tvd-var--stacked .tvd-var__add {
	min-height: 1px;
	padding: 1em 1.4em;
	font-weight: 700;
	line-height: 1.12;
	text-align: center;
	border-radius: 0;
}
.tvd-qa__open .tvd-var__msg:empty{
	display:none;
}
@media (max-width:480px){
	.tvd-qa__open .tvd-var--stacked .tvd-var__opt{
		padding:.313rem .75rem;
	}
}