/* ==========================================================================
   TASSEL Wine Categories v1.8.1
   Kolory i typografia dziedziczone z palety globalnej Kadence
   (--global-palette1..9, --global-heading-font-family, --global-body-font-family)
   z winiarskimi wartościami zapasowymi.
   ========================================================================== */

.twc {
	/* Paleta */
	--twc-accent: var(--global-palette1, #6d1b32);
	--twc-accent-2: var(--global-palette2, #99304b);
	--twc-ink: var(--global-palette4, #241a1c);
	--twc-muted: var(--global-palette5, #6f5f63);
	--twc-card: var(--global-palette8, #faf6f1);
	--twc-bg: var(--global-palette9, #ffffff);
	--twc-line: var(--global-gray-400, rgba(36, 26, 28, 0.14));

	/* Typografia */
	--twc-display: var(--global-heading-font-family, Georgia, "Times New Roman", serif);
	--twc-body: var(--global-body-font-family, inherit);

	/* Metryka */
	--twc-gap: clamp(1rem, 2.4vw, 2rem);
	--twc-radius: 3px;
	--twc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	font-family: var(--twc-body);
	color: var(--twc-ink);
	container-type: inline-size;
}

/* Kadence nadaje listom w treści własny lewy padding i dolny margines.
   Reset o podwyższonej specyficzności utrzymuje siatkę dokładnie w osi
   z nagłówkami i zwykłymi sekcjami Row Layout. */
.single-content .twc ul.twc__grid,
.entry-content .twc ul.twc__grid,
.kt-inside-inner-col .twc ul.twc__grid,
.twc ul.twc__grid {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.twc__viewport {
	width: 100%;
	min-width: 0;
	max-width: none;
}

/* ---------- Nagłówek sekcji ---------- */

.twc__head {
	margin: 0 0 clamp(1.5rem, 3vw, 2.75rem);
	text-align: center;
}

.twc__eyebrow {
	margin: 0 0 0.6em;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--twc-accent);
}

.twc__title {
	margin: 0;
	font-family: var(--twc-display);
	font-size: clamp(1.6rem, 3.4vw, 2.5rem);
	line-height: 1.15;
	color: inherit;
}

/* ---------- Siatka ---------- */

.twc__grid {
	display: grid;
	grid-template-columns: repeat(var(--twc-cols-m, 1), minmax(0, 1fr));
	gap: var(--twc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.twc__grid > li::before,
.twc__grid > li::marker {
	content: none;
}

@media (min-width: 600px) {
	.twc__grid {
		grid-template-columns: repeat(var(--twc-cols-t, 2), minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.twc__grid {
		grid-template-columns: repeat(var(--twc-cols, 3), minmax(0, 1fr));
	}
}

.single-content .twc ul.twc__grid > li.twc__item,
.entry-content .twc ul.twc__grid > li.twc__item,
.twc ul.twc__grid > li.twc__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	min-width: 0;
}

/* ---------- Karta ---------- */

.twc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--twc-card);
	border-radius: var(--twc-radius);
	overflow: hidden;
	transition: transform 0.45s var(--twc-ease), box-shadow 0.45s var(--twc-ease);
}

a.twc__card:hover,
a.twc__card:focus-visible {
	text-decoration: none;
	color: inherit;
}

a.twc__card:focus-visible,
.twc__card:focus-within {
	outline: 2px solid var(--twc-accent);
	outline-offset: 3px;
}

/* Link produktu rozciągnięty na całą kartę */
.twc__link {
	color: inherit;
	text-decoration: none;
}

.twc__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.twc__card--product .twc__actions {
	position: relative;
	z-index: 2;
}

/* ---------- Obraz ---------- */

.twc__media {
	position: relative;
	display: block;
	aspect-ratio: var(--twc-ratio, 3 / 4);
	overflow: hidden;
	background: linear-gradient(160deg, var(--twc-accent) 0%, var(--twc-ink) 100%);
}

.twc__media .twc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--twc-ease);
}

.twc__card:hover .twc__img,
.twc__card:focus-within .twc__img {
	transform: scale(1.06);
}

/* Zastępczy monogram */
.twc__mono {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--twc-display);
	font-size: clamp(4rem, 11cqw, 8rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.16);
	transition: color 0.5s var(--twc-ease);
}

.twc__card:hover .twc__mono {
	color: rgba(255, 255, 255, 0.28);
}

/* ---------- Pieczęć z licznikiem ---------- */

.twc__seal {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3.55rem;
	height: 3.55rem;
	border-radius: 50%;
	background: var(--twc-accent);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 4px 14px rgba(0, 0, 0, 0.22);
	transform: rotate(-8deg);
	transition: transform 0.5s var(--twc-ease), background-color 0.4s var(--twc-ease);
}

.twc__card:hover .twc__seal {
	transform: rotate(0deg) scale(1.06);
	background: var(--twc-accent-2);
}

.twc__seal-n {
	font-family: var(--twc-display);
	font-size: 1.05rem;
	line-height: 1;
	font-weight: 700;
}

.twc__seal-w {
	margin-top: 0.12em;
	font-size: 0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Pieczęć produktu polecanego - pigułka z gwiazdką */
.twc__seal--star {
	flex-direction: row;
	gap: 0.45em;
	width: auto;
	height: auto;
	padding: 0.45em 0.85em 0.45em 0.7em;
	border-radius: 999px;
	transform: none;
	white-space: nowrap;
}

.twc__seal--star .twc__star {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.twc__seal--star .twc__seal-w {
	margin-top: 0;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	opacity: 1;
}

.twc__card:hover .twc__seal--star,
.twc__card:focus-within .twc__seal--star {
	transform: translateY(-1px);
}

/* Plakietka promocji */
.twc__flag {
	position: absolute;
	top: 1.15rem;
	left: 0;
	z-index: 2;
	padding: 0.4em 0.9em;
	background: var(--twc-ink);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------- Treść ---------- */

.twc__body {
	position: relative;
	display: block;
	flex: 1 1 auto;
	padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.6rem);
	text-align: center;
}

.twc__rule {
	display: block;
	width: 34px;
	height: 1px;
	margin: 0 auto 0.9rem;
	background: var(--twc-accent);
	opacity: 0.55;
	transition: width 0.5s var(--twc-ease), opacity 0.4s var(--twc-ease);
}

.twc__card:hover .twc__rule {
	width: 56px;
	opacity: 1;
}

.twc__name {
	display: block;
	font-family: var(--twc-display);
	font-size: clamp(1.05rem, 1.5vw, 1.28rem);
	line-height: 1.25;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--twc-ink);
}

/* Kontener odsłaniany: zewnętrzny animuje wysokość,
   wewnętrzny musi mieć min-height:0, inaczej treść zostaje przycięta. */
.twc__reveal {
	display: grid;
	grid-template-rows: 1fr;
}

.twc__reveal-in {
	min-height: 0;
	overflow: hidden;
}

.twc__desc {
	margin-top: 0.6rem;
	font-size: 0.87rem;
	line-height: 1.6;
	color: var(--twc-muted);
}

.twc__price {
	display: block;
	margin-top: 0.55rem;
	font-family: var(--twc-display);
	font-size: 1.05rem;
	color: var(--twc-accent);
}

.twc__price del {
	margin-right: 0.4em;
	opacity: 0.5;
	font-size: 0.85em;
}

.twc__price ins {
	text-decoration: none;
}

.twc__rating {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--twc-accent);
}

.twc__rating .star-rating {
	margin: 0 auto;
	float: none;
}

.twc__cta {
	margin-top: 1rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--twc-accent);
}

.twc__cta .twc__reveal-in {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding-bottom: 2px;
}

.twc__ico {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.4s var(--twc-ease);
}

.twc__card:hover .twc__cta .twc__ico,
.twc__card:focus-within .twc__cta .twc__ico {
	transform: translateX(4px);
}

/* ---------- Przycisk koszyka ---------- */

.twc__actions {
	margin-top: 1rem;
}

.twc__actions .twc__reveal-in {
	display: flex;
	justify-content: center;
}

.twc__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.72em 1.35em;
	border: 1px solid var(--twc-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--twc-accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.35s var(--twc-ease), color 0.35s var(--twc-ease), border-color 0.35s var(--twc-ease);
	text-shadow: none;
}

.twc__btn:hover,
.twc__btn:focus-visible {
	background: var(--twc-accent);
	border-color: var(--twc-accent);
	color: #fff;
	text-decoration: none;
}

.twc__btn.loading {
	opacity: 0.7;
}

.twc__btn.added::after {
	content: "✓";
	margin-left: 0.3em;
}

/* WooCommerce dokleja komunikat po dodaniu do koszyka */
.twc__body .added_to_cart {
	display: inline-block;
	position: relative;
	z-index: 2;
	margin-top: 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--twc-muted);
}

/* ==========================================================================
   Styl: etykieta (domyślny)
   ========================================================================== */

.twc--etykieta .twc__card {
	border: 1px solid var(--twc-line);
	box-shadow: 0 1px 2px rgba(36, 26, 28, 0.04);
}

.twc--etykieta .twc__body::before {
	content: "";
	position: absolute;
	inset: 0.5rem;
	border: 1px solid var(--twc-line);
	border-top: 0;
	pointer-events: none;
	opacity: 0.75;
}

.twc--etykieta .twc__card:hover,
.twc--etykieta .twc__card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(36, 26, 28, 0.14);
}

/* ==========================================================================
   Styl: kafelki — obraz na całej karcie, treść odsłaniana na hover
   ========================================================================== */

.twc--kafelki .twc__card {
	background: var(--twc-ink);
	color: #fff;
}

.twc--kafelki .twc__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.twc--kafelki .twc__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(18, 11, 13, var(--twc-scrim-0, 0.94)) 0%,
		rgba(18, 11, 13, var(--twc-scrim-28, 0.78)) 28%,
		rgba(18, 11, 13, var(--twc-scrim-55, 0.42)) 55%,
		rgba(18, 11, 13, var(--twc-scrim-100, 0.10)) 100%);
}

.twc--kafelki .twc__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	aspect-ratio: var(--twc-ratio, 3 / 4);
	padding: clamp(1.2rem, 2.6vw, 1.9rem);
}

.twc--kafelki .twc__name,
.twc--kafelki .twc__name .twc__link {
	color: #fff;
}

.twc--kafelki .twc__rule {
	background: #fff;
}

.twc--kafelki .twc__desc,
.twc--kafelki .twc__cta,
.twc--kafelki .twc__price {
	color: rgba(255, 255, 255, 0.88);
}

.twc--kafelki .twc__btn {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.twc--kafelki .twc__btn:hover {
	background: #fff;
	border-color: #fff;
	color: var(--twc-ink);
}

/* Płynne odsłanianie bez skoków wysokości karty */
.twc--kafelki .twc__reveal {
	grid-template-rows: 0fr;
	opacity: 0;
	margin-top: 0;
	transition: grid-template-rows 0.5s var(--twc-ease), opacity 0.4s var(--twc-ease), margin-top 0.5s var(--twc-ease);
}

.twc--kafelki .twc__card:hover .twc__reveal,
.twc--kafelki .twc__card:focus-within .twc__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 0.72rem;
}

.twc--kafelki .twc__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(20, 12, 14, 0.28);
}

@media (hover: none) {
	.twc--kafelki .twc__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
		margin-top: 0.7rem;
	}
}

/* ==========================================================================
   Styl: kadence — spójny z kaflami budowanymi w Kadence Blocks
   zaokrąglone rogi, obraz na całej karcie, treść do lewej, zawsze widoczna
   ========================================================================== */

.twc--kadence {
	--twc-radius: 12px;
}

.twc--kadence .twc__card {
	background: var(--twc-ink);
	color: #fff;
	border-radius: var(--twc-radius);
}

.twc--kadence .twc__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.twc--kadence .twc__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(18, 11, 13, var(--twc-scrim-0, 0.94)) 0%,
		rgba(18, 11, 13, var(--twc-scrim-28, 0.78)) 28%,
		rgba(18, 11, 13, var(--twc-scrim-55, 0.42)) 55%,
		rgba(18, 11, 13, var(--twc-scrim-100, 0.10)) 100%);
}


.twc--kadence .twc__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: var(--twc-ratio, 4 / 3);
	padding: clamp(1.25rem, 2.6vw, 1.9rem);
	text-align: left;
}

.twc--kadence .twc__rule {
	display: none;
}

.twc--kadence .twc__name,
.twc--kadence .twc__name .twc__link {
	color: #fff;
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
	letter-spacing: 0;
	text-transform: none;
}

.twc--kadence .twc__desc {
	margin-top: 0.5rem;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.9);
}

.twc--kadence .twc__price {
	color: #fff;
}

.twc--kadence .twc__rating {
	color: rgba(255, 255, 255, 0.9);
}

.twc--kadence .twc__cta {
	color: rgba(255, 255, 255, 0.92);
}

.twc--kadence .twc__cta .twc__reveal-in,
.twc--kadence .twc__actions .twc__reveal-in {
	justify-content: flex-start;
}

.twc--kadence .twc__btn {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.twc--kadence .twc__btn:hover,
.twc--kadence .twc__btn:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--twc-ink);
}

.twc--kadence .twc__seal {
	top: 1.1rem;
	right: 1.1rem;
	transform: rotate(0deg);
}

.twc--kadence .twc__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(18, 11, 13, 0.26);
}

.twc--kadence .twc__flag {
	left: 1.1rem;
	border-radius: 999px;
}


/* Czytelność białych napisów na jasnych i kontrastowych zdjęciach. */
.twc--kafelki .twc__body,
.twc--kadence .twc__body {
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.twc--kafelki .twc__btn,
.twc--kadence .twc__btn {
	text-shadow: none;
}

/* ==========================================================================
   Styl: polka — pozioma półka z przewijaniem
   ========================================================================== */

.twc--polka {
	position: relative;
}

.twc--polka .twc__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-inline: calc(var(--twc-gap) * -0.5);
	padding: 0.35rem calc(var(--twc-gap) * 0.5) 1.4rem;
	border-bottom: 2px solid var(--twc-line);
}

.twc--polka .twc__viewport::-webkit-scrollbar {
	display: none;
}

.twc--polka .twc__grid {
	display: flex;
	grid-template-columns: none;
}

.twc--polka .twc__item {
	flex: 0 0 auto;
	width: clamp(210px, 76vw, 260px);
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.twc--polka .twc__item {
		width: 240px;
	}
}

.twc--polka .twc__card {
	border: 1px solid var(--twc-line);
}

.twc--polka .twc__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 32px rgba(36, 26, 28, 0.14);
}

.twc__nav {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.4rem;
}

.twc__nav[hidden] {
	display: none;
}

.twc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 1px solid var(--twc-line);
	border-radius: 50%;
	background: transparent;
	color: var(--twc-ink);
	cursor: pointer;
	transition: background-color 0.3s var(--twc-ease), color 0.3s var(--twc-ease), border-color 0.3s var(--twc-ease), opacity 0.3s;
}

.twc__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.twc__arrow:hover:not(:disabled) {
	background: var(--twc-accent);
	border-color: var(--twc-accent);
	color: #fff;
}

.twc__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   Kafel promocyjny — wypełnia lukę w ostatnim rzędzie
   ========================================================================== */

.twc__item--promo {
	grid-column: span var(--twc-span-m, 1);
}

@media (min-width: 600px) {
	.twc__item--promo {
		grid-column: span var(--twc-span-t, 1);
	}
}

@media (min-width: 1025px) {
	.twc__item--promo {
		grid-column: span var(--twc-span, 1);
	}
}

@media (max-width: 599px) {
	.twc__item--promo.is-hide-m {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 1024px) {
	.twc__item--promo.is-hide-t {
		display: none;
	}
}

@media (min-width: 1025px) {
	.twc__item--promo.is-hide-d {
		display: none;
	}
}

.twc__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: clamp(220px, 26vw, 340px);
	padding: clamp(1.4rem, 3vw, 2.4rem);
	border-radius: var(--twc-radius);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(150deg, var(--twc-accent) 0%, var(--twc-ink) 100%);
	transition: transform 0.45s var(--twc-ease), box-shadow 0.45s var(--twc-ease);
}

a.twc__promo:hover,
a.twc__promo:focus-visible {
	color: #fff;
	text-decoration: none;
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(20, 12, 14, 0.26);
}

a.twc__promo:focus-visible {
	outline: 2px solid var(--twc-accent);
	outline-offset: 3px;
}

.twc__promo-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.twc__promo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--twc-ease);
}

a.twc__promo:hover .twc__promo-img {
	transform: scale(1.05);
}

.twc__promo-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 12, 14, calc(var(--twc-overlay, 0.55) + 0.25)) 0%, rgba(20, 12, 14, var(--twc-overlay, 0.55)) 60%, rgba(20, 12, 14, calc(var(--twc-overlay, 0.55) * 0.5)) 100%);
}

.twc__promo-body {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 34ch;
}

.twc__promo-eyebrow {
	display: block;
	margin-bottom: 0.7em;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.twc__promo-title {
	display: block;
	font-family: var(--twc-display);
	font-size: clamp(1.3rem, 2.4vw, 1.95rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.twc__promo-text {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.twc__promo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 1.3rem;
	padding: 0.7em 1.3em;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.35s var(--twc-ease), border-color 0.35s var(--twc-ease), color 0.35s var(--twc-ease);
}

a.twc__promo:hover .twc__promo-btn {
	background: #fff;
	border-color: #fff;
	color: var(--twc-ink);
}

a.twc__promo:hover .twc__promo-btn .twc__ico {
	transform: translateX(4px);
}

.twc--polka .twc__item--promo {
	width: clamp(260px, 84vw, 340px);
	grid-column: auto;
}

/* ==========================================================================
   Odsłanianie przy przewijaniu
   ========================================================================== */

.twc--anim .twc__item {
	transition: opacity 0.7s var(--twc-ease), transform 0.7s var(--twc-ease);
	transition-delay: calc(var(--twc-i, 0) * 70ms);
}

.twc--anim .twc__item.twc-pending {
	opacity: 0;
	transform: translateY(22px);
}

.twc--anim .twc__item.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.twc *,
	.twc *::before,
	.twc *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.twc--anim .twc__item {
		opacity: 1;
		transform: none;
	}

	.twc--polka .twc__viewport {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Hero kategorii produktów
   ========================================================================== */

.twc-hero {
	--twc-hero-accent: var(--global-palette1, #6d1b32);
	--twc-hero-ink: var(--global-palette4, #241a1c);
	--twc-hero-display: var(--global-heading-font-family, Georgia, "Times New Roman", serif);
	--twc-hero-body: var(--global-body-font-family, inherit);

	position: relative;
	display: grid;
	min-height: var(--twc-hero-height, 360px);
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, var(--twc-hero-accent), var(--twc-hero-ink));
	color: #fff;
	font-family: var(--twc-hero-body);
}

.twc-hero--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

.twc-hero__media,
.twc-hero__shade {
	position: absolute;
	inset: 0;
}

.twc-hero__media {
	z-index: -2;
}

.twc-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * WooCommerce ustawia globalnie obrazy na height:auto. Na stronie sklepu
 * selektor `.woocommerce img` ma większą specyficzność niż sama klasa obrazu
 * hero, co na wąskich ekranach przywraca naturalne proporcje grafiki i zostawia
 * pustą część hero. Dodatkowa klasa rodzica wygrywa bez ingerowania w inne img.
 */
.twc-hero .twc-hero__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
}

.twc-hero__shade {
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(18, 11, 13, calc(var(--twc-hero-overlay, 0.55) + 0.18)) 0%, rgba(18, 11, 13, var(--twc-hero-overlay, 0.55)) 52%, rgba(18, 11, 13, calc(var(--twc-hero-overlay, 0.55) * 0.75)) 100%),
		linear-gradient(0deg, rgba(18, 11, 13, 0.3), rgba(18, 11, 13, 0.08));
}

.twc-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(100%, 1240px);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 5vw, 4.5rem);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.twc-hero--center .twc-hero__inner {
	align-items: center;
	text-align: center;
}

.twc-hero--right .twc-hero__inner {
	align-items: flex-end;
	text-align: right;
}

.twc-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.twc-hero__title {
	max-width: 18ch;
	margin: 0;
	font-family: var(--twc-hero-display);
	font-size: clamp(2rem, 5vw, 4.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #fff;
}

.twc-hero__desc {
	max-width: 62ch;
	margin-top: 1rem;
	font-size: clamp(0.98rem, 1.7vw, 1.15rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
}

.twc-hero__desc > :first-child {
	margin-top: 0;
}

.twc-hero__desc > :last-child {
	margin-bottom: 0;
}

@media (max-width: 599px) {
	.twc-hero {
		min-height: min(var(--twc-hero-height, 360px), 62vh);
		border-radius: 8px;
	}

	.twc-hero--full {
		border-radius: 0;
	}

	.twc-hero__shade {
		background: linear-gradient(0deg, rgba(18, 11, 13, calc(var(--twc-hero-overlay, 0.55) + 0.2)) 0%, rgba(18, 11, 13, var(--twc-hero-overlay, 0.55)) 100%);
	}
}


/* ==========================================================================\n   1.12.8 — spójny, kompaktowy [tassel_wine_header] na mobile\n   ========================================================================== */
@media (max-width: 599px) {
	/*
	 * Wszystkie konteksty dynamicznego nagłówka (sklep, kategorie i zwykłe
	 * podstrony) mają na telefonie tę samą bazową wysokość. Transparentny header
	 * witryny leży nad hero, więc treść zaczyna się w bezpiecznej strefie poniżej
	 * logo/menu. Gdy opis jest dłuższy, min-height pozwala sekcji naturalnie urosnąć.
	 */
	.twc-hero--dynamic {
		min-height: 300px;
	}

	.twc-hero--dynamic .twc-hero__inner {
		justify-content: flex-start;
		padding-top: max(clamp(9.5rem, 42vw, 10.25rem), calc(env(safe-area-inset-top, 0px) + 8.75rem));
		padding-bottom: 1.25rem;
	}

	.twc-hero--dynamic .twc-hero__title {
		font-size: clamp(2rem, 10vw, 2.65rem);
	}

	.twc-hero--dynamic .twc-hero__desc {
		margin-top: 0.65rem;
		font-size: 0.95rem;
		line-height: 1.5;
	}
}

@media (max-width: 380px) {
	.twc-hero--dynamic {
		min-height: 285px;
	}

	.twc-hero--dynamic .twc-hero__inner {
		padding-top: max(9.25rem, calc(env(safe-area-inset-top, 0px) + 8.5rem));
	}
}