/* Herbawell - popup "Dodano do koszyka" (makieta v2d). Scope .hw-atc.
   Desktop = modal wysrodkowany max-820px (hbpop). Mobile = bottom-sheet max-h 88vh (hbfade/hbsheet).
   Zdjecia multiply na tintach (konwencja - dziala na jasnym tle kadru). */

@keyframes hbfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hbpop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hbsheet { from { transform: translateY(100%); } to { transform: none; } }

.hw-atc[hidden] { display: none; }
.hw-atc {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	animation: hbfade .22s ease both;
}
.hw-atc__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 16, 38, 28, .38 );
}

/* ===== Wspolne: naglowek, produkt, przyciski ===== */
.hw-atc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var( --hw-green, #10261C );
}
.hw-atc__head-title { display: flex; align-items: center; gap: 12px; }
.hw-atc__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --hw-brass, #B08D57 );
}
.hw-atc__eyebrow {
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var( --hw-bone, #F7F5F0 );
}
.hw-atc__x {
	border: 0;
	background: transparent;
	font-size: 17px;
	line-height: 1;
	color: #C9D3C9;
	cursor: pointer;
}
.hw-atc__thumb {
	background: #EDEBE1;
	overflow: hidden;
	flex: 0 0 auto;
}
.hw-atc__thumb-img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hw-atc__thumb-img[hidden] { display: none; }
.hw-atc__product-info { display: flex; flex-direction: column; }
.hw-atc__name {
	font-family: 'Jost', system-ui, sans-serif;
	font-weight: 500;
	color: var( --hw-green, #10261C );
	line-height: 1.2;
	/* Tytuł max 2 linie (długie nazwy edycji limitowanych rozpychały popup). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hw-atc__meta { color: #6B7A70; }
.hw-atc__price {
	font-weight: 600;
	color: var( --hw-green, #10261C );
	/* Naturalny odstęp pod metą — margin-top:auto przypinał cenę do dołu kolumny
	   i przy krótkiej nazwie robił pustą przerwę (zgłoszenie 2026-08-28). */
	margin-top: 6px;
}
.hw-atc__subtotal { font-weight: 600; color: var( --hw-green, #10261C ); }
.hw-atc__subtotal .amount { font-weight: 600; }

.hw-atc__bar { height: 4px; background: rgba( 16, 38, 28, .14 ); }
.hw-atc__bar-fill { display: block; height: 4px; background: var( --hw-brass, #B08D57 ); }

.hw-atc__btn-primary {
	display: block;
	text-align: center;
	border: 1px solid var( --hw-green, #10261C );
	background: var( --hw-green, #10261C );
	color: var( --hw-bone, #F7F5F0 );
	font-family: inherit;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
}
.hw-atc__btn-ghost {
	border: 0;
	background: transparent;
	color: #4B5A50;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ===== Cross-sell ===== */
.hw-atc__cross-title {
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A6A3B;
}
.hw-atc__cross-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid rgba( 16, 38, 28, .12 );
	transition: border-color .15s ease;
}
.hw-atc__cross-card:hover { border-color: var( --hw-brass, #B08D57 ); }
.hw-atc__cross-frame {
	background: #EDEBE1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hw-atc__cross-frame img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hw-atc__cross-name {
	font-weight: 500;
	color: var( --hw-green, #10261C );
	line-height: 1.25;
	/* Nazwa zawsze w przestrzeni 2 linii (clamp + min-height) — kafle w wierszu równe. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}
.hw-atc__cross-price { font-weight: 600; color: var( --hw-green, #10261C ); }
.hw-atc__cross-add {
	/* Przycisk dociągnięty do dołu karty — jedna wysokość w całym wierszu. */
	margin-top: auto;
	border: 1px solid rgba( 16, 38, 28, .28 );
	background: transparent;
	color: var( --hw-green, #10261C );
	font-family: inherit;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hw-atc__cross-add:hover {
	background: var( --hw-green, #10261C );
	color: var( --hw-bone, #F7F5F0 );
	border-color: var( --hw-green, #10261C );
}

/* ============================================================= *
 *  DESKTOP: modal wysrodkowany (domyslnie), mobile ukryty
 * ============================================================= */
.hw-atc__mob { display: none; }

.hw-atc__wide {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 820px;
	background: var( --hw-bone, #F7F5F0 );
	border: 1px solid rgba( 16, 38, 28, .16 );
	box-shadow: 0 40px 90px rgba( 16, 38, 28, .28 );
	animation: hbpop .3s cubic-bezier( .22, .7, .2, 1 ) both;
	max-height: calc( 100vh - 60px );
	overflow-y: auto;
}
.hw-atc__wide .hw-atc__head { padding: 20px 28px; }
.hw-atc__wide .hw-atc__check { width: 22px; height: 22px; }
.hw-atc__wide .hw-atc__eyebrow { font-size: 10px; }

.hw-atc__wide-body {
	display: grid;
	grid-template-columns: 1fr 300px;
	border-bottom: 1px solid rgba( 16, 38, 28, .12 );
}
.hw-atc__product { display: flex; gap: 20px; padding: 26px 28px; }
.hw-atc__wide .hw-atc__thumb { width: 88px; height: 110px; flex: 0 0 88px; }
.hw-atc__wide .hw-atc__product-info { gap: 7px; }
.hw-atc__wide .hw-atc__name { font-size: 20px; }
.hw-atc__wide .hw-atc__meta { font-size: 12px; }
.hw-atc__wide .hw-atc__price { font-family: 'Jost', system-ui, sans-serif; font-size: 22px; font-weight: 500; }

.hw-atc__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 28px;
	background: #EFEDE6;
	border-left: 1px solid rgba( 16, 38, 28, .12 );
}
.hw-atc__subtotal-row { display: flex; justify-content: space-between; font-size: 12.5px; color: #3B4A41; }
.hw-atc__ship { display: flex; flex-direction: column; gap: 6px; }
.hw-atc__ship[hidden] { display: none; }
.hw-atc__ship-msg { font-size: 10.5px; color: #4B5A50; }
.hw-atc__side .hw-atc__btn-primary { margin-top: auto; padding: 15px; font-size: 10px; }
.hw-atc__side .hw-atc__btn-ghost { padding: 11px; font-size: 9.5px; }

.hw-atc__cross { display: flex; flex-direction: column; gap: 14px; padding: 22px 28px 26px; }
.hw-atc__cross[hidden] { display: none; }
.hw-atc__cross-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hw-atc__cross-head .hw-atc__cross-title { font-size: 10px; }
.hw-atc__cross-note { font-size: 10.5px; color: #8A9A8E; }
.hw-atc__cross-grid--wide { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 16px; align-items: stretch; }
.hw-atc__cross-grid--wide .hw-atc__cross-card { gap: 9px; padding: 14px; height: 100%; }
.hw-atc__cross-grid--wide .hw-atc__cross-frame { width: 46px; height: 58px; flex: 0 0 46px; }
.hw-atc__cross-grid--wide .hw-atc__cross-card { flex-direction: column; }
.hw-atc__cross-grid--wide .hw-atc__cross-name { font-size: 12.5px; }
.hw-atc__cross-grid--wide .hw-atc__cross-price { font-size: 12px; }
.hw-atc__cross-grid--wide .hw-atc__cross-add { padding: 10px; font-size: 9px; letter-spacing: .11em; }

/* ============================================================= *
 *  MOBILE: bottom-sheet (<= 640px)
 * ============================================================= */
@media ( max-width: 640px ) {
	.hw-atc {
		align-items: stretch;
		justify-content: flex-end;
		flex-direction: column;
		padding: 0;
		background: rgba( 16, 38, 28, .4 );
	}
	.hw-atc__overlay { background: transparent; }
	.hw-atc__wide { display: none; }

	.hw-atc__mob {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 390px;
		margin: 0 auto;
		max-height: 88vh;
		background: var( --hw-bone, #F7F5F0 );
		animation: hbsheet .28s cubic-bezier( .22, .7, .2, 1 ) both;
	}
	.hw-atc__mob .hw-atc__head { padding: 16px 20px; }
	.hw-atc__mob .hw-atc__check { width: 19px; height: 19px; }
	.hw-atc__mob .hw-atc__eyebrow { font-size: 9.5px; letter-spacing: .12em; }
	.hw-atc__mob .hw-atc__x { font-size: 16px; }

	.hw-atc__mob-product {
		display: flex;
		gap: 14px;
		padding: 18px 20px;
		border-bottom: 1px solid rgba( 16, 38, 28, .12 );
	}
	.hw-atc__thumb--mob { width: 66px; height: 82px; flex: 0 0 66px; }
	.hw-atc__mob .hw-atc__product-info { gap: 5px; }
	.hw-atc__mob .hw-atc__name { font-size: 16px; }
	.hw-atc__mob .hw-atc__meta { font-size: 11px; }
	.hw-atc__mob .hw-atc__price { font-size: 15px; }

	.hw-atc__ship--mob {
		display: flex;
		flex-direction: column;
		gap: 7px;
		padding: 14px 20px;
		background: #EFEDE6;
	}
	.hw-atc__ship--mob[hidden] { display: none; }
	.hw-atc__ship-line { display: flex; justify-content: space-between; font-size: 11.5px; color: #3B4A41; }

	.hw-atc__cross--mob {
		display: flex;
		flex-direction: column;
		gap: 11px;
		padding: 16px 20px;
		overflow-y: auto;
	}
	.hw-atc__cross--mob[hidden] { display: none; }
	.hw-atc__cross--mob .hw-atc__cross-title { font-size: 9.5px; }
	.hw-atc__cross-grid--mob { display: flex; gap: 11px; overflow-x: auto; padding-bottom: 4px; }
	.hw-atc__cross-grid--mob .hw-atc__cross-card { flex: 0 0 150px; gap: 8px; padding: 11px; }
	.hw-atc__cross-grid--mob .hw-atc__cross-frame { height: 74px; width: 100%; }
	.hw-atc__cross-grid--mob .hw-atc__cross-name { font-size: 11.5px; }
	.hw-atc__cross-grid--mob .hw-atc__cross-price { font-size: 11.5px; }
	.hw-atc__cross-grid--mob .hw-atc__cross-add { padding: 11px; font-size: 9px; letter-spacing: .1em; }

	.hw-atc__mob-foot {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 14px 20px 20px;
		border-top: 1px solid rgba( 16, 38, 28, .14 );
	}
	.hw-atc__mob-foot .hw-atc__btn-primary { padding: 16px; font-size: 10px; }
	.hw-atc__mob-foot .hw-atc__btn-ghost { padding: 12px; font-size: 9.5px; }
}