/* =============================================================
   Breakpoints (use these values consistently across all files)
   desktop-xl : max-width 1815px  — wide layout, reduce large paddings
   desktop    : max-width 1200px  — burger / mobile nav
   tablet     : max-width 1024px  — medium screens / 2-column layouts
   mobile     : max-width  768px  — primary mobile breakpoint
   mobile-sm  : max-width  600px  — small phones
   mobile-xs  : max-width  360px  — very small phones
   ============================================================= */

:root {
	/* Primary Colors */
	--color-white: #FFFFFF;
	--color-tea-brown: #8B5E3C; 
	--color-dark-tea: #4A3426;
	--color-tea-brown-hover: #7A5234;

	/* Secondary Colors */
	--color-light-beige: #F5EFE7;
	--color-warm-sand: #E7D7C8;
	--color-soft-cream: #FAF7F2;

	/* Neutral Colors */
	--color-dark-text: #2B2B2B;
	--color-medium-gray: #6B6B6B;
	--color-light-gray: #EAEAEA;
	--color-border: #E0D5C9;
	--color-placeholder: #B0A898;
	--color-matcha-green: #798B75;

	/* Semantic Colors */
	--color-error: #D32F2F;
	--color-error-bg: #FFEBEE;
	--color-success: #388E3C;
	--color-success-bg: #E8F5E9;

	/* Shadows (Tailwind v4 scale) */
	--shadow-2xs:  0 1px rgb(0 0 0 / 0.05);
	--shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-none: 0 0 #0000;

	/* Border Radii */
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-input: 12px;
	--border-radius-lg: 16px;
	--border-radius-xl: 24px;

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.25s ease;
}

/* Hide focus ring on mouse click, keep it for keyboard navigation (a11y) */
:focus:not(:focus-visible) {
	outline: none;
}

/* Prevent horizontal scroll caused by 100vw full-bleed breakout sections */

*, *::before, *::after {
	font-family: 'DM Sans', sans-serif;
}

body {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 16px;
	line-height: 1.5;
	width: 100%;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--color-dark-tea);
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
}
h2 {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.25;
}
h3 {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
}
h4 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
}
h5 {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}
h6 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}
/* Typography utility classes */
.body-large {
	font-size: 18px;
	line-height: 1.6;
}
.body-regular {
	font-size: 16px;
	line-height: 1.6;
}
.text-small {
	font-size: 14px;
	line-height: 1.5;
}
a {
	color: var(--color-tea-brown);
}
a:hover {
	color: var(--color-dark-tea);
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* override Bootstrap dropdown link colors */
.dropdown-menu a {
	color: var(--color-dark-text);
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
	color: var(--color-tea-brown);
	background-color: var(--color-light-beige);
	background-image: none;
}
.main-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

/* main header */
#main-header {
	background: var(--color-white);
	position: sticky;
	top: 0;
	z-index: 1000;
}
#main-header > .container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 108px;
	padding-right: 108px;
	height: fit-content;
}
.header-row {
	display: flex;
	align-items: center;
	height: fit-content;
	padding: 10px 0;
	background: var(--color-white);
}
.header-logo {
	flex-shrink: 0;
	margin-right: 122px;
}
.header-logo img {
	display: block;
	width: 142px;
	height: 60px;
	max-height: none;
}
.header-logo h1 {
	font-size: 20px;
	margin: 0;
	line-height: 1;
}
.header-nav {
	flex: 0 0 1094px;
	width: 1094px;
}
.header-nav > .container {
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0;
}
.header-nav .navbar {
	margin-bottom: 0;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-shrink: 0;
	margin-left: 122px;
}
.header-icon {
	color: var(--color-dark-text);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 32px;
	height: 32px;
	text-decoration: none;
	transition: color 0.2s;
}
.header-icon img {
	display: block;
	width: 32px;
	height: 32px;
}
.header-icon:hover {
	color: var(--color-tea-brown);
	text-decoration: none;
}
.header-icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -4px;
	right: -4px;
	z-index: 2;
	width: 16px;
	height: 16px;
	padding: 0;
	border-radius: 999px;
	background: var(--color-tea-brown);
	color: var(--color-white);
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	font-feature-settings: 'case' on, 'cpsp' on;
	line-height: 150%;
	text-align: center;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
	margin-bottom: 10px;
}
#cart > .btn {
	font-size: 12px;
	line-height: 18px;
	color: #FFF;
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
/* menu */
#menu {
	background-color: var(--color-tea-brown);
	background-image: none;
	border-color: var(--color-dark-tea);
	min-height: 40px;
}
#menu .nav > li > a {
	color: var(--color-white);
	text-shadow: none;
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: var(--color-dark-tea);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	line-height: 20px;
	color: var(--color-dark-text);
	font-size: 12px;
}
#menu .dropdown-inner li a:hover {
	color: var(--color-white);
	background-color: var(--color-tea-brown);
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid var(--color-light-gray);
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: var(--color-white);
	background-color: var(--color-tea-brown);
	background-image: none;
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: var(--color-white);
	text-shadow: none;
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: var(--color-white);
	padding: 2px 18px;
	float: right;
	background-color: var(--color-dark-tea);
	background-image: none;
	border-color: var(--color-dark-tea);
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: var(--color-white);
	background-color: var(--color-dark-tea);
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: var(--color-dark-tea);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
/* #menu inside the new unified header */
#main-header #menu {
	background: transparent;
	background-image: none;
	border: none;
	box-shadow: none;
	min-height: auto;
	margin-bottom: 0;
	border-radius: 0;
}
#main-header #menu .navbar-collapse {
	padding: 0;
	width: auto;
	border: 0;
	box-shadow: none;
}
#main-header #menu .navbar-nav {
	display: flex;
	justify-content: space-between;
	gap: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
	width: 100%;
	margin: 0;
	padding-left: 0;
}
#main-header #menu .nav > li {
	flex: 0 0 auto;
	float: none;
}
#main-header #menu .nav > li + li {
	margin-left: 0;
}
#main-header #menu .nav > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-dark-text);
	font-size: 14px;
	font-weight: 500;
	height: 60px; 
	line-height: 1.3;
	padding: 0;
	text-shadow: none;
	background-color: transparent;
}
#main-header #menu .nav > li > a > svg,
#main-header #menu .nav > li > a > .menu-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}
/* Бургер скрыт на десктопе */
#main-header .btn-navbar {
	display: none;
}
/* Скрываем лейбл "Категорії" рядом с бургером — не нужен в нашем хедере */
#main-header #category {
	display: none;
}
#main-header #menu .nav > li > a.menu-link-with-icon {
	color: #4A3426;
	font-family: 'DM Sans', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 130%;
	font-feature-settings: 'case' on, 'cpsp' on;
}
#main-header #menu .nav > li > a:hover,
#main-header #menu .nav > li.open > a {
	color: var(--color-tea-brown);
	background-color: transparent;
}
/* ≤1815px — горизонтальный хедер, убираем широкие паддинги и фиксированные размеры */
@media (max-width: 1815px) {
	#main-header > .container {
		padding-left: 15px;
		padding-right: 15px;
	}
	.header-logo {
		flex-shrink: 0;
		margin-right: 24px;
	}
	.header-actions {
		gap: 14px;
		margin-left: 14px;
	}
	/* Навигация остаётся горизонтальной, но fluid вместо фиксированных 1094px */
	.header-nav {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		overflow: visible;
	}
	#main-header #menu .nav > li > a {
		height: fit-content;
	}
}
/* ≤1200px — бургер перед логотипом, меню выпадает абсолютно под хедером */
@media (max-width: 1200px) {
	.header-row {
		flex-wrap: wrap;
	}
	/* Бургер идёт ПЕРЕД логотипом (order: -1) и занимает только свою ширину */
	.header-nav {
		order: -1;
		width: auto;
		flex: 0 0 auto;
	}
	/* Убираем Bootstrap-контейнер внутри header-nav — нужна только ширина бургера */
	.header-nav > .container {
		width: auto;
		max-width: none;
		padding: 0;
		margin: 0;
	}
	.header-logo {
		flex: 1;
		margin-right: 0;
		order: 0;
	}
	.header-actions {
		order: 1;
	}
	/* Показываем бургер */
	#main-header .btn-navbar,
	#main-header .navbar-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		padding: 0;
		margin: 0;
		background: transparent;
		background-image: none;
		border: none;
		box-shadow: none;
		float: none;
		color: var(--color-dark-text);
	}
	#main-header .btn-navbar:hover,
	#main-header .btn-navbar:focus,
	#main-header .btn-navbar:active {
		background: transparent;
		background-image: none;
		box-shadow: none;
		color: var(--color-tea-brown);
	}
	#main-header .btn-navbar .fa-bars {
		font-size: 32px;
		line-height: 1;
	}
	/* Раскрытое меню выпадает под хедер на всю ширину */
	#main-header #menu .navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-soft-cream);
		padding: 8px 15px 12px;
		border-radius: 0 0 4px 4px;
		box-shadow: var(--shadow-md);
		z-index: 999;
	}
	/* Схлопнутое состояние */
	#main-header #menu .navbar-collapse.collapse {
		display: none !important;
		height: 0 !important;
		overflow: hidden !important;
	}
	/* Открытое состояние */
	#main-header #menu .navbar-collapse.collapse.in {
		display: block !important;
		height: auto !important;
		overflow: visible !important;
	}
	/* Пункты меню вертикально */
	#main-header #menu .navbar-nav {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		white-space: normal;
	}
	#main-header #menu .navbar-nav > li {
		width: 100%;
	}
	#main-header #menu .nav > li > a {
		height: 40px;
	}
}
@media (max-width: 768px) {
	.header-logo img {
		width: 100px;
		height: 60px;
	}
	/* Меньше отступы между иконками */
	.header-actions {
		gap: 8px;
		margin-left: 8px;
	}
	/* Иконки чуть компактнее */
	.header-icon {
		width: 28px;
		height: 28px;
	}
	.header-icon img {
		width: 28px;
		height: 28px;
	}
	/* Бейдж корзины не слетает за край иконки */
	.header-icon-badge {
		top: -3px;
		right: -3px;
		width: 14px;
		height: 14px;
		font-size: 10px;
	}
}
/* content */
#content {
	min-height: 600px;
}
#product-category #content, #product-product #tab-description, #information-information #content {
	font-size: 13px;
}
/* home slideshow */
#common-home .slideshow {
	position: relative;
	left: 50%;
	width: min(1704px, calc(100vw - 30px));
	height: min(614px, calc((100vw - 30px) * 0.3603));
	min-height: 260px;
	margin: 0 0 48px;
	background: transparent;
	border: 0;
	transform: translateX(-50%);
	border-radius: 32px;
	box-shadow: none;
	overflow: hidden;
	margin-top: 60px;
}
#common-home .slideshow .swiper-container,
#common-home .slideshow .swiper-wrapper,
#common-home .slideshow .swiper-slide,
#common-home .slideshow .swiper-slide a {
	height: 100%;
}
#common-home .slideshow .swiper-slide a {
	display: block;
}
#common-home .slideshow .swiper-slide {
	overflow: hidden;
}
#common-home .slideshow img,
#common-home .slideshow .slideshow-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#common-home .slideshow .slideshow-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 108px;
	height: 108px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transform: translate(-50%, -50%);
}
#common-home .slideshow .slideshow-video-play svg {
	display: block;
	width: 108px;
	height: 108px;
}
#common-home .slideshow .slideshow-video-sound {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
#common-home .slideshow .slideshow-video-sound svg {
	display: block;
	width: 40px;
	height: 40px;
}
#common-home .slideshow .slideshow-video-sound.sound-on {
	opacity: 1;
}
#common-home .slideshow .video-playing .slideshow-video-play {
	display: none;
}
#common-home .slideshow .swiper-pager {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
#common-home .slideshow .swiper-button-prev,
#common-home .slideshow .swiper-button-next {
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background-size: 40px 40px;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
	pointer-events: auto;
	text-shadow: none;
}
#common-home .slideshow .swiper-button-prev:before,
#common-home .slideshow .swiper-button-next:before {
	content: none;
}
#common-home .slideshow .swiper-button-prev {
	left: 24px;
	right: auto;
	background-image: url('../image/slider-left.svg');
}
#common-home .slideshow .swiper-button-next {
	right: 24px;
	left: auto;
	background-image: url('../image/slider-right.svg');
}
#common-home .slideshow .swiper-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	bottom: 24px;
	z-index: 4;
}
#common-home .slideshow .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	background: var(--color-warm-sand);
	border-radius: 50%;
	opacity: 1;
	transition: width 0.2s, border-radius 0.2s, background-color 0.2s;
}
#common-home .slideshow .swiper-pagination-bullet-active {
	width: 24px;
	border-radius: 24px;
	opacity: 1;
	background: var(--color-tea-brown);
}
@media (max-width: 768px) {
	#common-home .slideshow {
		width: calc(100vw - 30px);
		height: 260px;
		min-height: 0;
		border-radius: 20px;
	}
	#common-home .slideshow .swiper-button-prev {
		left: 14px;
	}
	#common-home .slideshow .swiper-button-next {
		right: 14px;
	}
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #303030;
	border-top: 1px solid #ddd;
	color: #e2e2e2;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #666;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
.alert > .close {
	position: relative;
	top: -2px;
	right: 0px;
	color: inherit;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid var(--color-light-gray);
	background-color: var(--color-soft-cream);
}
.breadcrumb a {
	color: var(--color-tea-brown);
}
.breadcrumb a:hover {
	color: var(--color-dark-tea);
}
.breadcrumb > li.active {
	color: var(--color-medium-gray);
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: none;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
html[dir=rtl] .breadcrumb > li::after {
  top: -3px;
  left: -5px;
  width: 26px;
  height: 26px;
  border-left: 1px solid #DDD;
  border-top: 1px solid #DDD;
  right: unset;
  border-right: unset;
  border-bottom:unset;

}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: var(--color-white);
	background-color: var(--color-tea-brown);
	background-image: none;
	border-color: var(--color-tea-brown);
	border-radius: 8px;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.2s, border-color 0.2s;
}
.btn-primary:hover {
	background-color: var(--color-dark-tea);
	border-color: var(--color-dark-tea);
	background-position: 0 0;
}
.btn-primary:active, .btn-primary.active {
	background-color: #5A3821;
	border-color: #5A3821;
	background-position: 0 0;
}
.btn-primary.disabled, .btn-primary[disabled] {
	background-color: #D7C8BB;
	border-color: #D7C8BB;
	background-position: 0 0;
	cursor: not-allowed;
	opacity: 1;
}
.btn-secondary {
	color: var(--color-tea-brown);
	background-color: transparent;
	background-image: none;
	border: 2px solid var(--color-tea-brown);
	border-radius: 8px;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.2s, color 0.2s;
}
.btn-secondary:hover {
	background-color: var(--color-light-beige);
	color: var(--color-tea-brown);
	border-color: var(--color-tea-brown);
}
.btn-secondary:active, .btn-secondary.active {
	background-color: #E7D7C8;
	border: 1px solid var(--color-tea-brown);
	color: var(--color-tea-brown);
}
.btn-secondary.disabled, .btn-secondary[disabled] {
	background-color: transparent;
	border: 1px solid #D7C8BB;
	color: #D7C8BB;
	cursor: not-allowed;
	opacity: 1;
}
.btn-ghost {
	color: var(--color-dark-tea);
	background-color: transparent;
	background-image: none;
	border: none;
	border-radius: 8px;
	text-shadow: none;
	box-shadow: none;
	transition: color 0.2s, background-color 0.2s;
}
.btn-ghost:hover, .btn-ghost:active, .btn-ghost.active {
	color: var(--color-dark-tea);
	background-color: var(--color-light-beige);
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: var(--color-tea-brown);
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid var(--color-warm-sand);
	background-color: var(--color-tea-brown);
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid var(--color-warm-sand);
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: var(--color-tea-brown);
	color: var(--color-white);
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid var(--color-dark-tea);
	background-color: var(--color-dark-tea);
	color: var(--color-warm-sand);
}
.product-thumb .button-group button:hover {
	color: var(--color-white);
	background-color: #6F472B;
	text-decoration: none;
	cursor: pointer;
}
.product-thumb .button-group button:active {
	background-color: #5A3821;
	color: var(--color-white);
}
.product-thumb .button-group button[disabled],
.product-thumb .button-group button.disabled {
	background-color: #EAEAEA;
	color: var(--color-medium-gray);
	cursor: not-allowed;
}
.product-thumb .button-group button + button:hover {
	background-color: #6F472B;
	color: var(--color-white);
}
.product-thumb .button-group button + button:active {
	background-color: #5A3821;
	color: var(--color-white);
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}
html[dir=rtl] .checkbox input[type="checkbox"],
html[dir=rtl] .checkbox-inline input[type="checkbox"],
html[dir=rtl] .radio input[type="radio"],
html[dir=rtl] .radio-inline input[type="radio"] {
    position: absolute;
    margin-top: 4px\9;
    margin-right: -20px;
      margin-left: unset;
}
html[dir=rtl] .input-group-btn:last-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
html[dir=rtl] .input-group .form-control:first-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}
html[dir=rtl] .container .row:first-child  .col-sm-4, html[dir=rtl] .container .row:first-child  .col-sm-5 {
  float: right;

}
html[dir=rtl] #cart .dropdown-menu {
  left: 0;
  right: auto;

}
@media (min-width: 768px) {
   
    html[dir=rtl] .navbar-nav {
        float: right;
        margin: 0;
    }
    
    html[dir=rtl] .navbar-nav > li {
        float: right;
    }
   
}
/* =============================================================
   TripTea custom megamenu
   ============================================================= */

.tt-megamenu {
  width: 100%;
}

/* ---- nav list ---- */
.tt-megamenu__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.tt-megamenu__item {
  /* static so the panel escapes to #main-header (position:sticky) */
  position: static;
}

/* ---- nav link ---- */
.tt-megamenu__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 80px;
  color: var(--color-dark-tea);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.tt-megamenu__link:hover,
.tt-megamenu__item.has-panel:hover > .tt-megamenu__link {
  color: var(--color-tea-brown);
  text-decoration: none;
}

.tt-megamenu__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tt-megamenu__caret {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.tt-megamenu__item.has-panel:hover > .tt-megamenu__link .tt-megamenu__caret {
  transform: rotate(180deg);
}

/* ---- mega panel ---- */
/* Absolutely positioned relative to #main-header (position:sticky = positioning ctx) */
.tt-megamenu__panel {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--color-white);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tt-megamenu__item.has-panel:hover > .tt-megamenu__panel,
.tt-megamenu__item.has-panel:focus-within > .tt-megamenu__panel {
  visibility: visible;
  opacity: 1;
}

.tt-megamenu__panel-inner {
  display: flex;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  min-height: 534px;
  max-height: 534px;
}

/* ---- left column ---- */
.tt-megamenu__panel-left {
  width: 280px;
  flex-shrink: 0;
  background: var(--color-soft-cream);
  padding-top: 40px;
  padding-bottom: 51px;
  padding-left:118px;
  padding-right: 51px;
  min-width:fit-content;
}

.tt-megamenu__panel-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-placeholder);
  margin-bottom: 16px;
}

.tt-megamenu__cats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-megamenu__cat {
  cursor: pointer;
}

.tt-megamenu__cat a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 36px;
  font-weight: 800;
  color: var(--color-dark-tea);
  text-decoration: none;
  transition: font-weight var(--transition-fast), color var(--transition-fast);
}


.tt-megamenu__cat.is-active a,
.tt-megamenu__cat:hover a {
  color: var(--color-tea-brown)
}

.tt-megamenu__cat a svg {
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.tt-megamenu__cat.is-active a svg,
.tt-megamenu__cat:hover a svg {
  opacity: 1;
}

/* ---- right column ---- */
.tt-megamenu__panel-right {
  flex: 1;
  padding: 24px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

.tt-megamenu__subpanel {
  display: none;
  flex-direction: column;
  flex: 1;
}

.tt-megamenu__subpanel.is-active {
  display: flex;
}

/* 12-column × 12-row content grid */
.tt-megamenu__content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 4px;
  flex: 1;
  min-height: 420px;
}

.tt-megamenu__card:nth-child(1) { grid-column: 1 / span 3; grid-row: 7 / span 6; }
.tt-megamenu__card:nth-child(2) { grid-column: 4 / span 3; grid-row: 7 / span 6; }
.tt-megamenu__card:nth-child(3) { grid-column: 7 / span 3; grid-row: 1 / span 10; }
.tt-megamenu__card:nth-child(4) { grid-column: 10 / span 3; grid-row: 1 / span 10; }
.tt-megamenu__card:nth-child(5) { grid-column: 1 / span 3; grid-row: 1 / span 6; }
.tt-megamenu__card:nth-child(6) { grid-column: 4 / span 3; grid-row: 1 / span 6; }

.tt-megamenu__content > .tt-megamenu__more {
  grid-column: 7 / span 6;
  grid-row: 11 / span 2;
  align-self: center;
  justify-self: center;
}

.tt-megamenu__card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: var(--color-warm-sand);
}

.tt-megamenu__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tt-megamenu__card-meta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 16px 32px;
  background: radial-gradient(ellipse at top left, rgba(74, 52, 38, 0.80) 0%, transparent 60%);
}

.tt-megamenu__card-subtitle {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.tt-megamenu__card-name {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--color-white);
}

.tt-megamenu__card:hover .tt-megamenu__card-name {
  color: var(--color-white);
}

/* "Дізнатись більше" */
.tt-megamenu__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 28px;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-end;
  background-color: var(--color-dark-text);
  transition: background var(--transition-fast), color var(--transition-fast);
  width: 100%;
  height: 100%;
}

.tt-megamenu__more:hover {
  background: var(--color-dark-tea);
  color: var(--color-white);
  text-decoration: none;
}

@media (min-width: 1920px) {
  .tt-megamenu__panel-inner {
    min-height: 720px;
    max-height: 720px;
  }
}

/* =============================================================
   Mobile burger + side panel  (≤ 1200px)
   ============================================================= */

/* ---- burger button ---- */
.tt-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.tt-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark-tea);
  border-radius: 2px;
}

/* ---- breakpoint ---- */
@media (max-width: 1200px) {
  .tt-megamenu { display: none; }
  .tt-burger   { display: flex; }

  /* header-nav collapses to just the burger */
  .header-nav {
    flex: none;
    width: auto;
  }
}

/* ---- overlay + drawer ---- */
.tt-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.3s;
}

/* visibility: hidden→visible fires instantly so the transform plays;
   visible→hidden fires after the transition ends so the slide-out plays. */
.tt-mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tt-mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tt-mobile-nav.is-open .tt-mobile-nav__overlay {
  opacity: 1;
}

.tt-mobile-nav__drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(360px, 100vw);
  min-width: 320px;
  background: var(--color-white);
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.tt-mobile-nav__levels {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.tt-mobile-nav.is-open .tt-mobile-nav__drawer {
  transform: translateX(0);
}

body.tt-nav-open { overflow: hidden; }

/* ---- levels ---- */
.tt-mobile-nav__level {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}

.tt-mobile-nav__level.is-active { display: flex; }

/* ---- level slide animations ---- */
@keyframes tt-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes tt-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes tt-slide-out-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes tt-slide-out-right {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

.tt-mobile-nav__level.tt-slide-enter-fwd {
  display: flex;
  animation: tt-slide-in-right 0.28s ease forwards;
}
.tt-mobile-nav__level.tt-slide-enter-back {
  display: flex;
  animation: tt-slide-in-left 0.28s ease forwards;
}
.tt-mobile-nav__level.tt-slide-leave-fwd {
  display: flex;
  animation: tt-slide-out-left 0.28s ease forwards;
}
.tt-mobile-nav__level.tt-slide-leave-back {
  display: flex;
  animation: tt-slide-out-right 0.28s ease forwards;
}

/* ---- panel header ---- */
.tt-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.tt-mobile-nav__logo img {
  height: 36px;
  display: block;
}

.tt-mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-dark-tea);
  flex-shrink: 0;
}

.tt-mobile-nav__back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark-tea);
  padding: 14px 20px;
  flex-shrink: 0;
  text-align: left;
}

/* ---- sub-panel title ---- */
.tt-mobile-nav__sub-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 20px 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark-tea);
  flex-shrink: 0;
  background-color: var(--color-soft-cream);
}

/* ---- list ---- */
.tt-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  background-color: var(--color-soft-cream);
}

.tt-mobile-nav__item {
  border-bottom: 1px solid var(--color-border);
}

.tt-mobile-nav__item:last-child { border-bottom: none; }

.tt-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-dark-tea);
  text-decoration: none;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 8px;
}

.tt-mobile-nav__link:hover { color: var(--color-tea-brown); text-decoration: none; }

.tt-mobile-nav__drill { font-weight: 700; }

.tt-mobile-nav__link-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.tt-mobile-nav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tt-mobile-nav__back svg,
.tt-mobile-nav__link > svg {
  flex-shrink: 0;
  color: var(--color-placeholder);
}

/* ---- level-3 subcategory grid ---- */
.tt-mobile-nav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  flex: 1;
  align-content: start;
}

.tt-mobile-nav__card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-warm-sand);
  text-decoration: none;
  aspect-ratio: 1 / 1;
}

.tt-mobile-nav__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-mobile-nav__card-meta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 10px 32px;
  background: radial-gradient(ellipse at top left, rgba(74, 52, 38, 0.80) 0%, transparent 60%);
}

.tt-mobile-nav__card-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.tt-mobile-nav__card-name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
}

.tt-mobile-nav__more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: var(--color-dark-text);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.tt-mobile-nav__more:hover {
  background: var(--color-dark-tea);
  color: var(--color-white);
  text-decoration: none;
}
.tt-categories {
  background: #FFFFFF;
  padding: 24px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
}

/* Match slideshow width (1704) and break out of the bootstrap .container.
   Use min() so the block never exceeds viewport width on tablet/intermediate sizes. */
.tt-categories--breakout {
  position: relative;
  width: min(1704px, 100vw);
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.tt-categories *,
.tt-categories *::before,
.tt-categories *::after {
  box-sizing: border-box;
}

.tt-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 408px);
  grid-auto-rows: 210px;
  column-gap: 24px;
  row-gap: 16px;
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
}

.tt-categories__card {
  position: relative;
  display: block;
  width: 408px;
  height: 210px;
  border-radius: 24px;
  overflow: hidden;
  background-color: #4A3426;
  text-decoration: none;
  color: #FFFFFF;
  isolation: isolate;
}

.tt-categories__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s ease;
}

.tt-categories__card:hover .tt-categories__bg {
  transform: scale(1.05);
}

.tt-categories__card:hover,
.tt-categories__card:focus,
.tt-categories__card:active {
  text-decoration: none;
  color: #FFFFFF;
}

.tt-categories__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(33deg, rgba(0, 0, 0, 1) 0%, rgba(102, 102, 102, 0) 98%);
  pointer-events: none;
  z-index: 1;
}

.tt-categories__content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.tt-categories__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 120%;
  color: #FFFFFF;
  margin: 0;
  display: block;
}

.tt-categories__subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #EAEAEA;
  margin: 8px 0 0 0;
  display: block;
  max-width: 210px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tt-categories__card--all {
  background-color: #4A3426;
  background-image: none;
}

.tt-categories__card--all .tt-categories__overlay {
  display: none;
}

.tt-categories__all-img {
  position: absolute;
  width: 600px;
  height: 600px;
  top: -94px;
  left: 89px;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* Below desktop-xl (1815px): grow cards fluidly within container */
@media (max-width: 1815px) {
  .tt-categories {
    padding: 24px 16px;
  }
  .tt-categories__grid {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }
  .tt-categories__card {
    width: 100%;
  }
}

/* Tablet (above mobile breakpoint): 2 columns */
@media (max-width: 1024px) and (min-width: 769px) {
  .tt-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Mobile (Figma frame 390 - main, node 744:49772) ---------- */
@media (max-width: 768px) {
  /* Break out to full viewport width to escape bootstrap container/col padding */
  .tt-categories--breakout {
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .tt-categories {
    padding: 16px 16px;
  }

  .tt-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 124px;
    column-gap: 14px;
    row-gap: 8px;
    width: auto;
    max-width: none;
  }

  .tt-categories__card {
    width: 100%;
    height: 124px;
    border-radius: 16px;
  }

  .tt-categories__overlay {
    background: linear-gradient(-57deg, rgba(0, 0, 0, 1) 5%, rgba(102, 102, 102, 0) 100%);
  }

  /* Аксесуари uses an inverted-direction gradient on mobile per Figma */
  .tt-categories__card[style*="accessories-173d89"] .tt-categories__overlay {
    background: linear-gradient(213deg, rgba(102, 102, 102, 0) 2%, rgba(0, 0, 0, 1) 100%);
  }

  /* Cards WITH subtitle: title 51px from top, subtitle bottom 8px from card bottom */
  .tt-categories__content {
    left: 16px;
    right: 16px;
    bottom: 8px;
  }

  /* Cards WITHOUT subtitle: title sits 16px from card bottom (Figma layout) */
  .tt-categories__card--no-subtitle .tt-categories__content {
    bottom: 16px;
  }

  .tt-categories__title {
    font-size: 16px;
    line-height: 140%;
  }

  .tt-categories__subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 150%;
    margin-top: 7px;
    max-width: 140px;
  }

  /* Mobile order: in Figma mobile Червоний sits before Зелений (slots 3-4 swap).
     Need explicit order on every card so the rest don't drift. */
  .tt-categories__card:nth-child(1) { order: 1; } /* Пуер */
  .tt-categories__card:nth-child(2) { order: 2; } /* Улун */
  .tt-categories__card:nth-child(3) { order: 4; } /* Зелений (slot 4) */
  .tt-categories__card:nth-child(4) { order: 3; } /* Червоний (slot 3) */
  .tt-categories__card:nth-child(5) { order: 5; } /* Білий */
  .tt-categories__card:nth-child(6) { order: 6; } /* Посуд */
  .tt-categories__card:nth-child(7) { order: 7; } /* Аксесуари */
  .tt-categories__card:nth-child(8) { order: 8; } /* Всі категорії */

  /* "Всі категорії" image on mobile: 200×200, top:-38, left:0 */
  .tt-categories__all-img {
    width: 200px;
    height: 200px;
    top: -38px;
    left: 0;
  }
}
/* ===== TripTea — Хіти продажів block ====================================== */

/* Section height 839 at desktop = 80 top + 680 content + 79 bottom (Figma 1920 main spec). */
.tt-bestsellers {
  background: #FFFFFF;
  padding: 80px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
}

/* Outer wrapper — break out of bootstrap .container so the BG spans full viewport.
   Inner content stays max 1704px wide (matching slideshow & other blocks). */
.tt-bestsellers--breakout {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* Inner = min(1704px, viewport - 32px) → at ≥1736 viewport content is exactly
   1704 wide (Figma left:108 for 1920), shrinks gracefully below. */
.tt-bestsellers__inner {
  width: min(1704px, 100% - 32px);
  margin: 0 auto;
  padding: 0;
}

.tt-bestsellers *,
.tt-bestsellers *::before,
.tt-bestsellers *::after {
  box-sizing: border-box;
}

.tt-bestsellers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 48px;
  padding: 0;
}

.tt-bestsellers__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0;
  color: #4A3426;
  vertical-align: middle;
}

.tt-bestsellers__nav {
  display: flex;
  gap: 8px;
}

.tt-bestsellers__nav--bottom {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}

.tt-bestsellers__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-start;
  margin-right: auto;
}

.tt-bestsellers__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E7D7C8;
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.tt-bestsellers__dot:hover {
  background: #B7A695;
}

.tt-bestsellers__dot--active {
  background: #8B5E3C;
  width: 24px;
  border-radius: 4px;
}

/* Default = active state per Figma (next): outline brown 1px, transparent bg */
.tt-bestsellers__nav-btn {
  width: 56px;
  height: 56px;
  border: 1px solid #4A3426;
  border-radius: 16px;
  background: transparent;
  color: #4A3426;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.tt-bestsellers__nav-btn:hover {
  background: #FAF7F2;
}

/* Disabled state per Figma (prev when at start, next when at end):
   light beige fill, lighter border, sand-coloured icon, 0.4 alpha */
.tt-bestsellers__nav-btn--disabled,
.tt-bestsellers__nav-btn:disabled {
  background: #FAF7F2;
  border-color: #F5EFE7;
  color: #E7D7C8;
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.tt-bestsellers__viewport {
  position: relative;
}

.tt-bestsellers__strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
  /* Fade-out applied as a mask on the strip itself — no separate overlay element,
     so no sub-pixel gap can appear between strip and overlay at any viewport width. */
  --fade-width: 108px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--fade-width)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--fade-width)), transparent 100%);
  transition: --fade-width 0.2s ease;
}

/* When strip is scrolled to the end there is no further content to hint at — drop the mask. */
.tt-bestsellers__strip.is-at-end {
  --fade-width: 0px;
}

.tt-bestsellers__strip::-webkit-scrollbar { display: none; }

.tt-bestsellers__strip > .tt-product-card {
  flex: 0 0 370px;
  scroll-snap-align: start;
}

.tt-bestsellers__nav-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Card ============================================================== */

.tt-product-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 24px;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  color: #2B2B2B;
  /* min-height ensures a sane baseline if a card has very sparse content; the
     strip's default align-items: stretch then equalises taller siblings.
     `height: 100%` was here before but collapsed to auto (no explicit parent
     height) and blocked stretch — removed so sets cards reach the same height
     as gramming-bearing cards. */
  min-height: 568px;
  isolation: isolate;
  transition: box-shadow 0.2s ease, color 0.15s ease;
}

.tt-product-card:hover {
  box-shadow: var(--shadow-md);
}

.tt-product-card:hover .tt-product-card__title {
  color: #8B5E3C;
}

.tt-product-card__media {
  position: relative;
  display: block;
  height: 319px;
  background-color: #FAF7F2;
  border-bottom: 1px solid #EAEAEA;
  text-decoration: none;
  padding: 16px;
  overflow: hidden;
}

.tt-product-card__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.tt-product-card:hover .tt-product-card__media-img {
  transform: scale(1.05);
}

.tt-product-card__badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  white-space: nowrap;
}

.tt-product-card__badge--popular {
  background: #E7D7C8;
  color: #8B5E3C;
}

.tt-product-card__badge--new {
  background: #8B5E3C;
  color: #FAF7F2;
}

.tt-product-card__badge--triptea_choice {
  background: #2B2B2B;
  color: #FAF7F2;
}

.tt-product-card__heart {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease;
}

.tt-product-card__heart:hover {
  color: #FAF7F2;
}

/* Active = product is in customer's wishlist (filled Tea Brown heart) */
.tt-product-card__heart--active,
.tt-product-card__heart--active:hover {
  color: #8B5E3C;
}

.tt-product-card__heart--active svg path {
  fill: #8B5E3C !important;
  stroke: #8B5E3C !important;
}

/* ===== Login modal (shown when guest clicks heart) ======================== */
.tt-login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 43, 0.5);
}

.tt-login-modal__panel {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 32px;
  width: min(420px, calc(100vw - 32px));
  font-family: 'DM Sans', sans-serif;
  color: #2B2B2B;
  text-align: center;
}

.tt-login-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #6B6B6B;
  cursor: pointer;
}

.tt-login-modal__close:hover {
  color: #4A3426;
}

.tt-login-modal__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
  color: #4A3426;
}

.tt-login-modal__text {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
}

.tt-login-modal__actions {
  display: flex;
  gap: 12px;
}

.tt-login-modal__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tt-login-modal__btn--primary {
  background: #8B5E3C;
  color: #FFFFFF;
}

.tt-login-modal__btn--primary:hover {
  background: #6B4528;
  color: #FFFFFF;
  text-decoration: none;
}

.tt-login-modal__btn--secondary {
  background: transparent;
  color: #4A3426;
  border: 1px solid #4A3426;
}

.tt-login-modal__btn--secondary:hover {
  background: #FAF7F2;
  color: #4A3426;
  text-decoration: none;
}

/* ===== Toast notification (top-right, auto-dismiss) ====================== */
.tt-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  box-shadow: var(--shadow-lg);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: #2B2B2B;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.tt-toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.tt-toast--success { border-left: 4px solid #8B5E3C; }
.tt-toast--info    { border-left: 4px solid #6B6B6B; }
.tt-toast--error   { border-left: 4px solid #BB2F2F; }

.tt-toast__msg { flex: 1; }

.tt-toast__close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: #6B6B6B;
  cursor: pointer;
  padding: 0;
}

.tt-toast__close:hover { color: #4A3426; }

@media (max-width: 600px) {
  .tt-toast {
    top: 12px;
    right: 12px;
    left: 12px;
    min-width: 0;
    max-width: none;
  }
}

.tt-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  flex: 1;
}

/* Inner head group (meta-row + title) — Figma layout_6B0B9R has gap 8 between them,
   while body's main gap is 16. */
.tt-product-card__head-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tt-product-card__sku {
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  color: #4A3426;
}

.tt-product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
}

.tt-product-card__stock--in_stock {
  color: #4A3426;
}

/* Tea Brown circle-check matches Figma */
.tt-product-card__stock--in_stock svg {
  color: #8B5E3C;
}

.tt-product-card__stock--pre_order,
.tt-product-card__stock--out_of_stock {
  color: #6B6B6B;
  opacity: 0.5;
}

.tt-product-card__stock--pre_order svg,
.tt-product-card__stock--out_of_stock svg {
  color: #6B6B6B;
}

.tt-product-card__title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0;
  color: #4A3426;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(16px * 1.4 * 2);
  transition: color 0.15s ease;
}

.tt-product-card__title a {
  color: inherit;
  text-decoration: none;
}

.tt-product-card__title:hover,
.tt-product-card__title a:hover {
  color: #8B5E3C;
  text-decoration: none;
}

.tt-product-card__gramming {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.tt-product-card__gramming::-webkit-scrollbar { display: none; }

.tt-product-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-width: 40px;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  background: #FFFFFF;
  color: #6B6B6B;
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.tt-product-card__chip:hover {
  border-color: #8B5E3C;
  color: #8B5E3C;
}

.tt-product-card__chip--active {
  background: #F5EFE7;
  border-color: #8B5E3C;
  color: #8B5E3C;
}

.tt-product-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Pin price + cart rows to the bottom of the card, regardless of whether the
     gramming chips are present. Body is flex-column → auto top margin claims
     all remaining free space, so cards without chips (e.g. наборы) keep the
     same baseline for price/qty/cart as cards with chips. */
  margin-top: auto;
}

.tt-product-card__price {
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
  color: #2B2B2B;
}

.tt-product-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.tt-product-card__cart-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
}

.tt-product-card__counter {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  flex: 1;
  max-width: 50%;
}

.tt-product-card__counter-btn {
  flex: 0 0 36px;
  height: 100%;
  border: none;
  background: transparent;
  color: #4A3426;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tt-product-card__counter-btn:hover {
  color: #8B5E3C;
}

.tt-product-card__counter-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #4A3426;
  width: 32px;
  padding: 0;
  outline: none;
}

.tt-product-card__cart {
  flex: 0 0 56px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: #8B5E3C;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tt-product-card__cart:hover {
  background: #6B4528;
}

.tt-product-card__cart:disabled {
  background: #EAEAEA;
  color: #FFFFFF;
  cursor: not-allowed;
}

/* ===== Disabled state — pre-order / out of stock ========================== */

.tt-product-card--disabled .tt-product-card__media {
  filter: grayscale(1);
}

.tt-product-card--disabled .tt-product-card__rating svg path {
  fill: none !important;
  stroke: #B7A695 !important;
}

/* ===== Responsive ========================================================= */

/* ===== Mobile (Figma frame 744:49772 — Хіти продажів) =====================
   Mirror tt_sets mobile metric exactly so both blocks line up:
     - __inner: padding 0 (cards/title use their own 24px gutter)
     - __head, __strip, __nav--bottom: padding 0 24px (= Figma left:24)
     - Card 320 wide, gap 16
   Section height 776 per Figma 390 main spec.
*/
@media (max-width: 768px) {
  .tt-bestsellers--breakout {
    width: 100vw;
    max-width: 100vw;
  }
  .tt-bestsellers {
    padding: 35px 0;
  }
  /* Mobile: inner extends to viewport edges so the strip can peek the next card on right
     (Figma 390 main shows ~30px peek of card 2). Head/nav-bottom add their own 24px gutter. */
  .tt-bestsellers__inner {
    width: 100%;
    padding: 0;
  }

  /* Title 28px Dark Tea per Figma H3, no top-arrows */
  .tt-bestsellers__head {
    margin-bottom: 24px;
    padding: 0 24px;
  }
  .tt-bestsellers__title {
    font-size: 28px;
    line-height: 120%;
    color: #4A3426;
  }
  .tt-bestsellers__nav--top {
    display: none;
  }
  .tt-bestsellers__nav--bottom {
    display: flex;
    padding: 0 24px;
    margin-top: 24px;
  }
  .tt-bestsellers__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  /* No fade on mobile — design uses dots/arrows instead */
  .tt-bestsellers__strip {
    --fade-width: 0px;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* 320px fixed cards, gap 16, viewport-edge padding 24 LEFT only — right side is open
     so the next card peeks past the viewport edge per Figma 390 main. */
  .tt-bestsellers__strip {
    gap: 16px;
    padding: 0 0 8px 24px;
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
  }
  .tt-bestsellers__strip > .tt-product-card {
    flex: 0 0 320px;
  }

  .tt-product-card__media {
    height: 270px;
  }
  .tt-product-card__title {
    font-size: 16px;
    line-height: 140%;
  }
  .tt-product-card__price {
    font-size: 22px;
    line-height: 130%;
  }
}

/* On very narrow phones (<360, mobile-xs) keep card slightly wider than viewport so it reads as scrollable */
@media (max-width: 360px) {
  .tt-bestsellers__strip > .tt-product-card {
    flex: 0 0 280px;
  }
}
/* ===== TripTea — Набори block ============================================= */

/* Outer wrapper — break out of bootstrap .container so the BG spans full viewport.
   Inner content stays max 1704px wide (matching slideshow & other blocks).
   Section height 899 at desktop = 80 top + 740 content + 79 bottom (Figma 1920 main spec). */
.tt-sets {
  position: relative;
  background: #FAF7F2;
  padding: 80px 0;
  border-bottom: 1px solid #EAEAEA;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
}

.tt-sets--breakout {
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* Inner = min(1704px, viewport - 32px) → at ≥1736 viewport content is exactly
   1704 wide (Figma left:108 for 1920), shrinks gracefully below. */
.tt-sets__inner {
  width: min(1704px, 100% - 32px);
  margin: 0 auto;
  padding: 0;
}

.tt-sets *,
.tt-sets *::before,
.tt-sets *::after {
  box-sizing: border-box;
}

.tt-sets__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 48px;
  padding: 0;
  gap: 16px;
}

.tt-sets__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0;
  color: #4A3426;
  vertical-align: middle;
}

.tt-sets__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Nav buttons — same as Хіти block (.tt-bestsellers__nav-btn) */
.tt-sets__nav-btn {
  width: 56px;
  height: 56px;
  border: 1px solid #4A3426;
  border-radius: 16px;
  background: transparent;
  color: #4A3426;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.tt-sets__nav-btn:hover {
  background: #FAF7F2;
}

.tt-sets__nav-btn--disabled,
.tt-sets__nav-btn:disabled {
  background: #FFFFFF;
  border-color: #F5EFE7;
  color: #E7D7C8;
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* "Всі набори" CTA — Secondary Button per Figma (Tea Brown outline pill).
   Same height as prev/next nav buttons (56) so they line up. */
.tt-sets__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  height: 56px;
  border: 1px solid #8B5E3C;
  border-radius: 16px;
  background: transparent;
  color: #8B5E3C;
  font-family: 'Chivo', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tt-sets__view-all:hover,
.tt-sets__view-all:focus,
.tt-sets__view-all:active {
  background: #8B5E3C;
  color: #FFFFFF;
  text-decoration: none;
}

.tt-sets__view-all svg {
  flex: 0 0 auto;
}

/* ===== Strip (carousel) ================================================== */

.tt-sets__viewport {
  position: relative;
}

.tt-sets__strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
  /* Fade-out applied as a mask on the strip itself — no separate overlay element,
     so no sub-pixel gap can appear between strip and overlay at any viewport width. */
  --fade-width: 108px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--fade-width)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--fade-width)), transparent 100%);
  transition: --fade-width 0.2s ease;
}

/* When strip is scrolled to the end there is no further content to hint at — drop the mask. */
.tt-sets__strip.is-at-end {
  --fade-width: 0px;
}

.tt-sets__strip::-webkit-scrollbar { display: none; }

.tt-sets__strip > .tt-set-card {
  flex: 0 0 370px;
  scroll-snap-align: start;
}

/* ===== Card ============================================================== */

.tt-set-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 370px;
  /* min-height instead of height — strip uses align-items: stretch (flex default),
     so all cards grow to the tallest one. Long composition lists no longer overflow. */
  min-height: 636px;
  padding: 8px;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 24px;
  font-family: 'DM Sans', sans-serif;
  color: #2B2B2B;
  isolation: isolate;
  transition: box-shadow 0.2s ease, color 0.15s ease;
  overflow: hidden;
}

.tt-set-card:hover {
  box-shadow: var(--shadow-sm);
}

.tt-set-card:hover .tt-set-card__title {
  color: #8B5E3C;
}

.tt-set-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: 319px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #FAF7F2;
  text-decoration: none;
  padding: 16px;
  flex: 0 0 auto;
}

.tt-set-card__media-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
}

.tt-set-card__media-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.tt-set-card:hover .tt-set-card__media-bg img {
  transform: scale(1.05);
}

/* ----- Badge (top-left of media) ------------------------------------------- */
.tt-set-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  white-space: nowrap;
}

.tt-set-card__badge--popular {
  /* Sets "Хіт" badge per Figma 710:41916: light pink-cream bg + brownish-red text. */
  background: #F9F0EF;
  color: #B56357;
}

.tt-set-card__badge--new {
  background: #8B5E3C;
  color: #FAF7F2;
}

.tt-set-card__badge--triptea_choice {
  background: #2B2B2B;
  color: #FAF7F2;
}

/* ----- Heart (top-right of media) ----------------------------------------- */
.tt-set-card__heart {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease;
}

.tt-set-card__heart:hover {
  color: #FAF7F2;
}

.tt-set-card__heart--active,
.tt-set-card__heart--active:hover {
  color: #8B5E3C;
}

.tt-set-card__heart--active svg path {
  fill: #8B5E3C !important;
  stroke: #8B5E3C !important;
}

/* ===== Body ============================================================== */

.tt-set-card__body {
  /* Figma layout_UX2ZXY: column, justify-content: space-between, padding 8, no fixed gap.
     space-between distributes free space between children dynamically. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.tt-set-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tt-set-card__sku {
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  color: #6B6B6B;
}

.tt-set-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
}

.tt-set-card__stock--in_stock     { color: #8B5E3C; }
.tt-set-card__stock--pre_order    { color: #6B6B6B; opacity: 0.7; }
.tt-set-card__stock--out_of_stock { color: #B7A695; }

.tt-set-card__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0;
  color: #4A3426;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s ease;
}

.tt-set-card__title a {
  color: inherit;
  text-decoration: none;
}

.tt-set-card__title:hover,
.tt-set-card__title a:hover {
  color: #8B5E3C;
  text-decoration: none;
}

/* ----- Composition list --------------------------------------------------- */
.tt-set-card__composition {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.tt-set-card__composition-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0;
  color: #4A3426;
}

.tt-set-card__composition-head svg {
  color: #4A3426;
  flex: 0 0 auto;
}

.tt-set-card__composition-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tt-set-card__composition-list li {
  position: relative;
  padding-left: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0;
  color: #6B6B6B;
}

.tt-set-card__composition-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8B5E3C;
}

/* ----- Footer (prices + cart / waiting button) ---------------------------- */

.tt-set-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.tt-set-card__prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tt-set-card__old-price {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #8B5E3C;
  text-decoration: line-through;
}

.tt-set-card__price {
  font-size: 22px;
  font-weight: 700;
  line-height: 130%;
  color: #2B2B2B;
}

/* Active cart button — Figma layout_Q8X8OR: padding 8 12, BR 8, content ~24 → height 40. */
.tt-set-card__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  width: 56px;
  height: 40px;
  background: #8B5E3C;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.tt-set-card__cart:hover { background: #4A3426; }
.tt-set-card__cart:active { transform: scale(0.97); }

/* Waiting (pre-order) pill — replaces cart button; per design spec */
.tt-set-card__waiting {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 148px;
  height: 40px;
  padding: 8px 12px;
  background: #EAEAEA;
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
  font-feature-settings: 'case' on, 'cpsp' on;
  cursor: not-allowed;
  white-space: nowrap;
}

.tt-set-card__waiting svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* Disabled card visuals */
.tt-set-card--disabled .tt-set-card__title { color: #4A3426; }
.tt-set-card--disabled .tt-set-card__price { color: #2B2B2B; }

/* Default: bottom nav hidden on desktop, shown only on mobile */
.tt-sets__nav--bottom {
  display: none;
}

/* ===== Mobile (Figma frame 744:48676 — Sets) ==============================
   Same metric as tt_bestsellers mobile so both blocks line up:
     - __inner: padding 0
     - __head, __strip, __nav--bottom: padding 0 24px (= Figma left:24)
*/
@media (max-width: 768px) {
  /* Mobile section total ~828 per Figma 390 main: padding tuned to give the target total
     given mobile content (title + 24 gap + cards + 24 gap + nav-bottom). */
  .tt-sets {
    padding: 46px 0;
  }

  /* Mobile: inner extends to viewport edges so the strip can peek the next card on right
     (Figma 390 main shows ~30px peek of card 2). Head/nav-bottom add their own 24px gutter. */
  .tt-sets__inner {
    width: 100%;
    padding: 0;
  }
  .tt-sets__head {
    margin-bottom: 24px;
    padding: 0 24px;
  }
  .tt-sets__title {
    font-size: 28px;
    font-weight: 800;
    line-height: 120%;
    color: #4A3426;
  }
  /* Hide top arrows + CTA on mobile (move to bottom nav) */
  .tt-sets__nav--top {
    display: none;
  }

  /* No fade on mobile — design uses bottom nav for indication */
  .tt-sets__strip {
    --fade-width: 0px;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Strip: card-to-card gap 16, viewport-edge padding 24 LEFT only — right side open
     so next card peeks past viewport edge per Figma 390 main. */
  .tt-sets__strip {
    gap: 16px;
    padding: 0 0 8px 24px;
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
  }
  .tt-sets__strip > .tt-set-card {
    flex: 0 0 320px;
    width: 320px;
    min-height: 586px;
  }

  /* Card photo height tightens slightly to fit overall card 586 */
  .tt-set-card__media {
    height: 270px;
  }

  /* Bottom nav: CTA on left, prev/next arrows on right (per Figma + user screenshot) */
  .tt-sets__nav--bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    gap: 16px;
  }
  .tt-sets__nav-arrows {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* Mobile spec per Figma: button 48×48 (smaller than desktop 56×56), arrow 32×32 */
  .tt-sets__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  /* "Всі набори" CTA on mobile: 48 height to align with arrow buttons (Figma layout_R3X6OJ) */
  .tt-sets__view-all {
    height: 48px;
    padding: 8px 24px;
  }
}

/* Very narrow phones (<360, mobile-xs) — keep peek visible */
@media (max-width: 360px) {
  .tt-sets__strip > .tt-set-card {
    flex: 0 0 280px;
    width: 280px;
  }
}
/* ===== TripTea — Відгуки block =========================================== */

.tt-reviews {
  position: relative;
  /* Gradient bridges the cream tt_sets block above (#FAF7F2) and the white block below */
  background: linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%);
  padding: 80px 0;
  border-bottom: 1px solid #EAEAEA;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
}

.tt-reviews--breakout {
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* Inner = min(1704px, viewport - 32px) → at ≥1736 viewport content is exactly
   1704 wide (Figma left:108 for 1920), shrinks gracefully below. */
.tt-reviews__inner {
  width: min(1704px, 100% - 32px);
  margin: 0 auto;
  padding: 0;
}

.tt-reviews *,
.tt-reviews *::before,
.tt-reviews *::after {
  box-sizing: border-box;
}

/* ===== Head ============================================================== */

.tt-reviews__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 32px;
  gap: 16px;
}

.tt-reviews__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0;
  color: #4A3426;
  vertical-align: middle;
}

.tt-reviews__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tt-reviews__nav-btn {
  width: 56px;
  height: 56px;
  border: 1px solid #4A3426;
  border-radius: 16px;
  background: transparent;
  color: #4A3426;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.tt-reviews__nav-btn:hover {
  background: #FFFFFF;
}

.tt-reviews__nav-btn--disabled,
.tt-reviews__nav-btn:disabled {
  background: #FFFFFF;
  border-color: #F5EFE7;
  color: #E7D7C8;
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Strip (carousel) ================================================== */

.tt-reviews__viewport {
  position: relative;
}

.tt-reviews__strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.tt-reviews__strip::-webkit-scrollbar { display: none; }

.tt-reviews__strip > .tt-review-card {
  flex: 0 0 552px;
  scroll-snap-align: start;
}

/* ===== Bottom nav (dots — desktop centered; dots-left + arrows-right on mobile) === */

.tt-reviews__nav--bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 0;
}

.tt-reviews__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bottom-nav arrows are mobile-only — hidden by default (desktop uses head arrows) */
.tt-reviews__nav-arrows {
  display: none;
}

.tt-reviews__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E7D7C8;
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.tt-reviews__dot:hover {
  background: #B7A695;
}

.tt-reviews__dot--active {
  background: #8B5E3C;
  width: 24px;
  border-radius: 4px;
}

/* ===== Card ============================================================== */

.tt-review-card {
  display: flex;
  flex-direction: column;
  width: 552px;
  height: 264px;
  padding: 16px;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 24px;
  font-family: 'DM Sans', sans-serif;
  transition: box-shadow 0.2s ease;
}

.tt-review-card:hover {
  box-shadow: var(--shadow-md);
}

.tt-review-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.tt-review-card__quote {
  flex: 0 0 40px;
  color: #4A3426;
}

.tt-review-card__text {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
  color: #6B6B6B;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-review-card__label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 4px 8px;
  background: #E7D7C8;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0;
  color: #8B5E3C;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tt-review-card__label:hover,
.tt-review-card__label:focus,
.tt-review-card__label:active {
  background: #8B5E3C;
  color: #FFFFFF;
  text-decoration: none;
}

/* Divider */
.tt-review-card__divider {
  height: 1px;
  width: 100%;
  background: #FAF7F2;
  flex: 0 0 auto;
}

/* Footer */
.tt-review-card__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex: 0 0 40px;
}

.tt-review-card__user {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tt-review-card__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #D9D9D9;
  background-size: cover;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6B6B6B;
}

.tt-review-card__user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tt-review-card__user-name {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
  color: #8B5E3C;
}

.tt-review-card__user-city {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0;
  color: #6B6B6B;
}

.tt-review-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.tt-review-card__star { display: block; }

/* ===== Responsive ========================================================= */

/* Tablet / small desktop — at viewports too narrow for 3 × 552 cards (need ≥1816px
   inner+padding budget), step the cards down so 2 fit comfortably with peek of 3rd. */
@media (max-width: 1815px) and (min-width: 769px) {
  .tt-reviews__strip > .tt-review-card {
    flex: 0 0 480px;
    width: 480px;
  }
}

/* ===== Mobile (Figma frame 744:49085 — Відгуки) ===========================
   Card 320×344, single card visible + peek of next.
   Top arrows hidden, bottom-nav has dots-left + arrows-right.
   Footer becomes a column (stars on top, user info below).
*/
@media (max-width: 768px) {
  /* Section height 618 per Figma 390 main: 40 padding-top + 34 title + 56 gap + 344 card + 56 gap + 48 nav + 40 padding-bottom. */
  .tt-reviews {
    padding: 40px 0;
  }
  /* Mobile: inner extends to viewport edges so the strip can peek the next card on right.
     Same pattern as tt_bestsellers/tt_sets so card alignment matches. */
  .tt-reviews__inner {
    width: 100%;
    padding: 0;
  }
  .tt-reviews__head {
    margin-bottom: 56px;
    padding: 0 24px;
  }
  .tt-reviews__title {
    font-size: 28px;
    line-height: 120%;
    color: #4A3426;
  }
  /* Hide head-arrows on mobile (moved to bottom-nav) */
  .tt-reviews__head-actions {
    display: none;
  }

  /* Strip: card 320, gap 16, viewport-edge padding 24 LEFT only — right side open so
     next card peeks past viewport edge per Figma 390 main. */
  .tt-reviews__strip {
    gap: 16px;
    padding: 0 0 8px 24px;
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
  }
  .tt-reviews__strip > .tt-review-card {
    flex: 0 0 320px;
    width: 320px;
    height: 344px;
  }

  /* Mobile card: footer is column with stars on TOP and user info BELOW per Figma 744:49085.
     HTML order is user→stars, so flex-direction: column-reverse swaps them visually. */
  .tt-review-card__footer {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
    flex: 0 0 auto;
  }
  .tt-review-card__user {
    width: 100%;
  }

  /* Bottom-nav: dots-left, arrows-right (mirrors tt_bestsellers mobile pattern) */
  .tt-reviews__nav--bottom {
    margin-top: 56px;
    padding: 0 24px;
    justify-content: space-between;
  }
  .tt-reviews__dots {
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .tt-reviews__nav-arrows {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* Mobile arrow buttons 48×48 (per Figma + parity with bestsellers/sets mobile) */
  .tt-reviews__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
}

/* Very narrow phones (<360, mobile-xs) — slightly smaller card so peek stays visible */
@media (max-width: 360px) {
  .tt-reviews__strip > .tt-review-card {
    flex: 0 0 280px;
    width: 280px;
  }
}
/* ===== TripTea — Наш YouTube block =====================================
   Figma desktop node: 710:42441 (1920 - Main)   →  section 1920×815
   Figma mobile  node: 744:49379 (390 - main)    →  section 390×753
*/

.tt-yt {
  background: #FFFFFF;
  border-bottom: 1px solid #EAEAEA;
  padding: 80px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
}

.tt-yt--breakout {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* Inner = min(1704, viewport - 32). At ≥1736 viewport it's exactly 1704 (Figma left:108). */
.tt-yt__inner {
  width: min(1704px, 100% - 32px);
  margin: 0 auto;
  padding: 0;
}

.tt-yt *, .tt-yt *::before, .tt-yt *::after {
  box-sizing: border-box;
}

/* ===== Head ============================================================ */

.tt-yt__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 48px; /* Figma column gap = 48 */
}

.tt-yt__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0;
  color: #4A3426;
}

.tt-yt__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 24px;
  height: 56px;
  background: #DE000D;
  color: #FFFFFF;
  border-radius: 16px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.tt-yt__more:hover,
.tt-yt__more:focus,
.tt-yt__more:active {
  background: #B5000B;
  color: #FFFFFF;
  text-decoration: none;
}
.tt-yt__more-icon { display: block; flex: 0 0 24px; }

/* Mobile-only footer CTA — hidden on desktop */
.tt-yt__more--mobile { display: none; }

/* ===== Strip =========================================================== */

.tt-yt__strip {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

/* ===== Main video card ================================================= */

.tt-yt-main {
  display: block;
  flex: 0 0 984px;
  width: 984px;
  height: 551px;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  isolation: isolate;
  cursor: pointer;
}
.tt-yt-main:hover, .tt-yt-main:focus, .tt-yt-main:active {
  text-decoration: none;
  color: inherit;
}

.tt-yt-main__thumb {
  position: absolute;
  inset: 0;
  background-color: #4A3426;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tt-yt-main__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.tt-yt-main__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 5;
}

/* Centered red play button (Figma: 100.98×71 at center) */
.tt-yt-main__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
  pointer-events: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.tt-yt-main:hover .tt-yt-main__play {
  transform: translate(-50%, -50%) scale(1.05);
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
}

/* Bottom gradient + meta */
.tt-yt-main__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 22px 24px 24px;
  background: linear-gradient(0deg, rgba(43, 43, 43, 1) 14%, rgba(43, 43, 43, 0.05) 100%);
  border-radius: 0 0 21px 21px;
}

.tt-yt-main__row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.tt-yt-main__meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tt-yt-main__title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 120%;
  color: #FFFFFF;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-yt-main__views {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
}

.tt-yt-main__duration {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 24px;
  padding: 0 11px;
  background: #FFFFFF;
  color: #2B2B2B;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  white-space: nowrap;
}

.tt-yt-eye { color: currentColor; flex: 0 0 16px; }

/* ===== Side column (3 small cards) ===================================== */

.tt-yt__side {
  flex: 1 1 696px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.tt-yt-side-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tt-yt-side-card:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
}

.tt-yt-side-card__thumb {
  position: relative;
  flex: 0 0 265px;
  width: 265px;
  height: 148px;
  border-radius: 16px;
  background-color: #4A3426;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.tt-yt-side-card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.tt-yt-side-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
  pointer-events: none;
}

.tt-yt-side-card__duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 24px;
  padding: 0 11px;
  background: #2B2B2B;
  color: #FFFFFF;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  white-space: nowrap;
}

.tt-yt-side-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 376px;        /* Figma fixed width */
  max-width: 100%;
}

.tt-yt-side-card__title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 130%;
  color: #4A3426;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-yt-side-card__views {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6B6B6B;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
}

/* ===== Tablet / smaller desktop (1201..1815) ============================
   2-col stays viable: main shrinks proportionally, side thumbs go to 200×112. */
@media (max-width: 1815px) and (min-width: 1201px) {
  .tt-yt-main {
    flex: 0 0 58%;
    width: auto;
    height: auto;
    aspect-ratio: 984 / 551;
  }
  .tt-yt-side-card__thumb {
    flex: 0 0 200px;
    width: 200px;
    height: 112px;
  }
  .tt-yt-side-card__title {
    font-size: 16px;
  }
}

/* ===== Narrow desktop / large tablet (769..1200) ========================
   2-col stops being viable (side card body squeezed below 120px), so we
   stack the strip vertically — main on top, 3 side cards below — but keep
   desktop typography & the head CTA on the right. */
@media (max-width: 1200px) and (min-width: 769px) {
  .tt-yt__strip {
    flex-direction: column;
    gap: 24px;
  }
  .tt-yt-main {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 984 / 551;
  }
  .tt-yt__side {
    flex: none;
    width: 100%;
    flex-direction: row;
    gap: 16px;
    justify-content: stretch;
  }
  .tt-yt-side-card {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .tt-yt-side-card__thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .tt-yt-side-card__body {
    width: 100%;
    gap: 8px;
  }
  .tt-yt-side-card__title {
    font-size: 16px;
    -webkit-line-clamp: 2;
  }
}

/* ===== Mobile (Figma 390 - main, node 744:49379) ====================== */
@media (max-width: 768px) {
  .tt-yt {
    padding: 40px 0;
  }
  .tt-yt__inner {
    width: 100%;
    padding: 0 24px;
  }

  /* Head: title only — desktop CTA hidden, mobile CTA at bottom.
     Gap 40 here matches Figma 390-main absolute layout: head y=40, strip y=114,
     so head→strip gap = 114 − (40 padding + 34 title) = 40. */
  .tt-yt__head {
    margin-bottom: 40px;
  }
  .tt-yt__title {
    font-size: 28px;
    line-height: 120%;
  }
  .tt-yt__head .tt-yt__more {
    display: none;
  }

  /* Strip = column on mobile */
  .tt-yt__strip {
    flex-direction: column;
    gap: 24px;
  }

  /* Main card: full-width, aspect ~342×192 (Figma) → keep ratio */
  .tt-yt-main {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 342 / 192;
    border-radius: 8px;
  }
  .tt-yt-main__overlay {
    padding: 12px;
    border-radius: 0 0 7.3px 7.3px;
  }
  .tt-yt-main__title {
    font-size: 12px;
    line-height: 120%;
    -webkit-line-clamp: 2;
  }
  .tt-yt-main__row {
    align-items: center;
    gap: 8px;
  }
  .tt-yt-main__meta {
    gap: 6px;
  }
  .tt-yt-main__views {
    font-size: 12px;
    line-height: 150%;
  }
  .tt-yt-main__duration {
    min-width: 0;
    height: auto;
    padding: 4px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 150%;
  }
  .tt-yt-main__play svg {
    width: 54px;
    height: 38px;
  }

  /* Side stack — 3 small cards, 8 gap (Figma 287 / 3 ≈ 92h each, padding 8) */
  .tt-yt__side {
    flex: none;
    width: 100%;
    gap: 8px;
  }

  .tt-yt-side-card {
    padding: 8px;
    gap: 12px;
    border-radius: 12px;
    border-width: 0.5px;
  }
  .tt-yt-side-card__thumb {
    flex: 0 0 137px;
    width: 137px;
    height: 77px;
    border-radius: 8px;
  }
  .tt-yt-side-card__play svg {
    width: 30px;
    height: 21px;
  }
  .tt-yt-side-card__duration {
    right: 4px;
    bottom: 4px;
    min-width: 0;
    height: 16px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 150%;
  }
  .tt-yt-side-card__body {
    width: auto;
    gap: 5px;
  }
  .tt-yt-side-card__title {
    font-size: 12px;
    line-height: 130%;
    -webkit-line-clamp: 3;
  }
  .tt-yt-side-card__views {
    font-size: 12px;
    line-height: 150%;
  }

  /* Mobile footer CTA — full-width, 56h.
     margin-top 40 matches Figma: strip ends at y=617 (114 + 503), CTA at y=657. */
  .tt-yt__more--mobile {
    display: inline-flex;
    width: 100%;
    margin-top: 40px;
  }
}
/* ===== TripTea — Корисні статті block ====================================
   Figma desktop node: 710:42528 (1920 - Main)   →  section 1920×792
   Figma mobile  node: 744:49520 (390  - main)   →  section 390×754
*/

.tt-articles {
  position: relative;
  /* Same gradient as Figma fill_MIVVJI — cream → white. Sits visually next
     to tt_youtube (white above) and the footer (white below). */
  background: linear-gradient(0deg, #FAF7F2 0%, #FFFFFF 100%);
  padding: 80px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
  overflow: hidden; /* clip the decorative dragon watermark */
}

/* Decorative dragon watermark — Figma "image 5" (node 710:42529).
   Per Figma: x=796 y=-115 in a 1920 frame, w 958 h 1022. We anchor by the
   right edge so it stays in place across desktop widths and clips cleanly
   below tablet/mobile breakpoints.
   In Figma the layer is 100% opacity / Normal blend, but the image fill
   itself is set to 5% — that's what produces the faint sand wash. We
   replicate by setting the element opacity to 0.05. */
.tt-articles::before {
  content: "";
  position: absolute;
  top: -115px;
  right: calc(50% - 850px);  /* mirrors Figma x=796 in a 1920 viewport */
  width: 958px;
  height: 1022px;
  background-image: url('../image/articles/dragon-watermark.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.tt-articles--breakout {
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.tt-articles__inner {
  width: min(1702px, 100% - 32px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.tt-articles *, .tt-articles *::before, .tt-articles *::after { box-sizing: border-box; }

/* ===== Head ============================================================ */

.tt-articles__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 48px;
}

.tt-articles__title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0;
  color: #4A3426;
}

.tt-articles__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

/* Arrow buttons — same visual treatment as tt_reviews / tt_sets / tt_youtube
   (56×56 BR16, dark stroke #4A3426, transparent fill, lighter when disabled). */
.tt-articles__nav-btn {
  width: 56px;
  height: 56px;
  border: 1px solid #4A3426;
  border-radius: 16px;
  background: transparent;
  color: #4A3426;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.tt-articles__nav-btn:hover { background: #FFFFFF; }
.tt-articles__nav-btn--disabled,
.tt-articles__nav-btn:disabled {
  background: #FFFFFF;
  border-color: #F5EFE7;
  color: #E7D7C8;
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* «Всі статті» Secondary Button — Figma layout_SGZ79H + style_L4V452 */
.tt-articles__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px;
  height: 56px;
  border: 1px solid #8B5E3C;
  background: transparent;
  color: #8B5E3C;
  border-radius: 16px;
  text-decoration: none;
  font-family: 'Chivo', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tt-articles__more:hover,
.tt-articles__more:focus,
.tt-articles__more:active {
  background: #8B5E3C;
  color: #FFFFFF;
  text-decoration: none;
}
.tt-articles__more-icon { display: block; flex: 0 0 24px; }
.tt-articles__more--mobile { display: none; } /* mobile-only footer CTA */

/* ===== Strip =========================================================== */

.tt-articles__viewport { position: relative; }

.tt-articles__strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: stretch;
}
.tt-articles__strip::-webkit-scrollbar { display: none; }

.tt-articles__strip > .tt-article-card {
  flex: 0 0 calc((100% - 48px) / 3);  /* 3 cards visible, 2 gaps of 24 */
  scroll-snap-align: start;
}

/* ===== Card ============================================================ */

.tt-article-card {
  display: flex;
  flex-direction: column;
  /* Figma desktop: strip h=528 (= section 792 − 160 padding − 56 head − 48 gap),
     all cards alignSelf: stretch. Use min-height so longer content can still
     expand the card without breaking the layout. */
  min-height: 528px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}
.tt-article-card:hover {
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
}

/* Image area — fixed 319 height per Figma layout_2FB9FM */
.tt-article-card__image {
  position: relative;
  flex: 0 0 319px;
  height: 319px;
  padding: 16px;
  background-color: #4A3426;
  border-bottom: 1px solid #EAEAEA;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.tt-article-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.35s ease;
}

.tt-article-card:hover .tt-article-card__bg {
  transform: scale(1.05);
}

/* Tag — h32 BR8 padding 4 8, color per category */
.tt-article-card__tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  white-space: nowrap;
}

/* Category palettes — straight from Figma component variants (Tag set 589:8628):
   brewing  (Red)    : bg #F9F0EF, text #B56357
   dishware (Yellow) : bg #FCF6EC, text #E3B153
   culture  (Blue)   : bg #F0F4F7, text #6C8299
*/
.tt-article-card--brewing  .tt-article-card__tag { background: #F9F0EF; color: #B56357; }
.tt-article-card--dishware .tt-article-card__tag { background: #FCF6EC; color: #E3B153; }
.tt-article-card--culture  .tt-article-card__tag { background: #F0F4F7; color: #6C8299; }

/* Content area — fills remaining card height; padding 16 + gap 16 between top group and CTA */
.tt-article-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  gap: 16px;
}

.tt-article-card__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-article-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6B6B6B;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
}
.tt-article-card__meta svg { flex: 0 0 16px; }

.tt-article-card__title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 130%;
  /* Default: Primary Colors/Dark Tea. On hover lighten to Tea Brown so the
     headline visually echoes the «Читати далі» CTA colour. */
  color: #4A3426;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-article-card:hover .tt-article-card__title { color: #8B5E3C; }

.tt-article-card__excerpt {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* «Читати далі» Ghost Button */
.tt-article-card__cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.tt-article-card__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #8B5E3C;
  font-family: 'Chivo', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  transition: background-color 0.15s ease;
}
.tt-article-card:hover .tt-article-card__read { background: #FAF7F2; }

/* ===== Bottom bar (mobile only) ======================================== */
.tt-articles__bottom { display: none; }

/* ===== Tablet / smaller desktop (1201..1815) ============================
   Inner shrinks; cards stay 3-up but body content scales naturally. */
@media (max-width: 1815px) and (min-width: 1201px) {
  .tt-article-card__image {
    flex: 0 0 280px;
    height: 280px;
  }
  .tt-articles__more { padding: 8px 20px; }
}

/* ===== Narrow desktop / large tablet (769..1200) ========================
   2 cards visible — strip still scrolls; head arrows compact, CTA fits. */
@media (max-width: 1200px) and (min-width: 769px) {
  .tt-articles__strip > .tt-article-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
  .tt-article-card__image {
    flex: 0 0 240px;
    height: 240px;
  }
}

/* ===== Mobile (Figma 390 - main, node 744:49520) ======================= */
@media (max-width: 768px) {
  .tt-articles {
    padding: 40px 0;
  }
  .tt-articles__inner {
    width: 100%;
    padding: 0;
  }

  .tt-articles__head {
    margin: 0 0 24px;
    padding: 0 24px;
  }
  .tt-articles__title {
    /* Figma mobile uses H3 (DM Sans Bold 28/120) instead of desktop H2 (ExtraBold 36/120). */
    font-weight: 700;
    font-size: 28px;
    line-height: 120%;
  }
  /* Head arrows + CTA hidden — moved to bottom bar */
  .tt-articles__head-actions { display: none; }

  /* Strip: 1 card visible + peek of next per Figma (320 main + 320 peek) */
  .tt-articles__strip {
    gap: 16px;
    padding: 0 0 8px 24px;
    scroll-padding-left: 24px;
  }
  .tt-articles__strip > .tt-article-card {
    flex: 0 0 320px;
    width: 320px;
    height: 512px;
    min-height: 512px;
  }

  /* Image area mobile: h=270 fixed (Figma) */
  .tt-article-card__image {
    flex: 0 0 270px;
    height: 270px;
  }

  /* Content area: gap 16 between top group and CTA, padding 16 */
  .tt-article-card__body {
    padding: 16px;
    gap: 16px;
  }

  /* Bottom bar: «Всі статті» 48h CTA-left + 2 arrows-right (Figma 744:49747) */
  .tt-articles__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    margin-top: 40px;
  }
  /* Mobile «Всі статті» button — 48h instead of desktop 56 */
  .tt-articles__more--mobile {
    display: inline-flex;
    height: 48px;
    padding: 8px 24px;
  }
  /* If all_url isn't set, the bottom bar still has arrows but right-aligned */
  .tt-articles__bottom-arrows {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
  }
  /* Mobile arrow buttons — 48×48 (Figma layout_XS113F) */
  .tt-articles__bottom .tt-articles__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
}

/* Very narrow phones (<360, mobile-xs) — slightly smaller card so peek stays visible */
@media (max-width: 360px) {
  .tt-articles__strip > .tt-article-card {
    flex: 0 0 280px;
    width: 280px;
    height: 480px;
  }
  .tt-article-card__image {
    flex: 0 0 240px;
    height: 240px;
  }
}
/* ===== TripTea — Часто задавані питання block ============================
   Figma desktop node: 710:42696 (1920 - Main)  →  section 1920 padding 80 395
   Figma mobile  node: 744:49896 (390 - main)   →  section 390 padding 40 24
*/

.tt-faq {
  background: #FFFFFF;
  padding: 80px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
}

/* Break out of bootstrap .container so the white section bg fills the full
   viewport (matches Figma desktop frame width=1920). Content stays centred
   inside .tt-faq__inner at min(1130, 100% − 32) wide. */
.tt-faq--breakout {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.tt-faq *, .tt-faq *::before, .tt-faq *::after {
  box-sizing: border-box;
}

/* Inner = Figma's centred 1130-wide content column (1920 − 2×395 padding).
   On smaller viewports it caps at 100% − 32 gutters. */
.tt-faq__inner {
  width: min(1130px, 100% - 32px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 48px;
}

/* ===== Head ============================================================== */

.tt-faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tt-faq__title {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 120%;
  color: #4A3426;
  text-align: center;
}

.tt-faq__subtitle {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
  text-align: center;
}

/* ===== List ============================================================== */

.tt-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each Q&A card. Custom button + answer-wrap markup (instead of native
   <details>) so we can animate the open/close with CSS. */
.tt-faq-card {
  border: 1px solid #EAEAEA;
  border-radius: 24px;
  padding: 24px 24px 25px;
  background: #FFFFFF;
  transition: border-color 0.25s ease;
}

.tt-faq-card--open {
  border-color: #E7D7C8; /* Figma Secondary/Warm Sand — active state */
}

/* Clickable header — reset button chrome to behave like inline block. */
.tt-faq-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.tt-faq-card__head:focus { outline: none; }
.tt-faq-card__head:focus-visible {
  outline: 2px solid #8B5E3C;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Animated answer panel — grid-template-rows: 0fr → 1fr is the modern way
   to transition unknown content height without measuring it in JS.
   Supported in Chrome 117+, Safari 17.1+, Firefox 119+ (covers ~95%). */
.tt-faq-card__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.tt-faq-card--open .tt-faq-card__answer-wrap {
  grid-template-rows: 1fr;
}

.tt-faq-card__answer-wrap > .tt-faq-card__answer {
  /* Each row in a grid track defaults to min-content; we want it to collapse
     to 0 when the track is 0fr, so we must let it shrink past content size. */
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  transition: padding-top 0.3s ease;
}
.tt-faq-card--open .tt-faq-card__answer-wrap > .tt-faq-card__answer {
  padding-top: 24px; /* matches the visual spacing from Figma open card */
}

.tt-faq-card__question {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  color: #4A3426; /* Dark Tea — closed/inactive */
  transition: color 0.2s ease;
}

.tt-faq-card--open .tt-faq-card__question {
  color: #8B5E3C; /* Tea Brown — active */
}

.tt-faq-card__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma closed-state chevron stroke: Neutral/Medium Gray. */
  color: #6B6B6B;
  transition: transform 0.2s ease, color 0.2s ease;
}
.tt-faq-card--open .tt-faq-card__icon {
  /* Open-state: stroke becomes Tea Brown and the chevron flips to point up. */
  transform: rotate(180deg);
  color: #8B5E3C;
}

.tt-faq-card__answer {
  /* Top spacing is animated via padding-top on the wrap below (0 → 24).
     Keep this rule for pure typography. */
  margin: 0;
  /* Figma constrains the answer text-frame to 950px on desktop (inside the
     1081-wide row), leaving ~131px of empty space on the right. We match. */
  max-width: 950px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #6B6B6B;
}

/* ===== Mobile (Figma 390-main, node 744:49896) =========================== */
@media (max-width: 768px) {
  .tt-faq {
    padding: 40px 0;
  }
  .tt-faq__inner {
    width: 100%;
    padding: 0 24px;
    gap: 40px; /* Figma layout_OQ7DYV — column gap 40 head→list */
  }

  /* Mobile head uses H3 (Bold 28) not H2 (ExtraBold 36). */
  .tt-faq__title {
    font-weight: 700;
    font-size: 28px;
    line-height: 120%;
  }

  .tt-faq-card {
    padding: 24px 24px 25px;
    border-radius: 24px;
  }

  /* Mobile keeps the same open-state padding-top (animated). */
  .tt-faq-card--open .tt-faq-card__answer-wrap > .tt-faq-card__answer {
    padding-top: 24px;
  }
}
/* ===== TripTea — Site footer =============================================
   Figma desktop node: 710:39977 (Footer inside 1920-main)
   Figma mobile  node: 741:47840 (Footer inside 390-main)

   Desktop: width 1920, padding 40 104, column gap 32 row, column heading->list
   gap 24/16. Bottom row: padding-top 33, 1px top border, copyright left,
   payments right.
   Mobile (≤768): padding 40 16, layout collapses to single-column + two-by-two
   nav grid per Figma layout_WRU6AT (row gap 32 between nav pairs).
*/

.tt-footer {
  background: #FFFFFF;
  border-top: 1px solid #EAEAEA;
  padding: 40px 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "case", "cpsp";
  color: #2B2B2B;
}

/* Footer sits directly in <body>, outside any .container — naturally full-width. */
.tt-footer--breakout {
  width: 100%;
}

.tt-footer__inner {
  /* Figma 1920 desktop with padding 40 104 → inner = 1712. Cap below so
     smaller desktops keep side gutters. Section gap 48 between main columns
     and the bottom (copyright + payments) bar — matches Figma section.gap. */
  width: min(1712px, 100% - 32px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.tt-footer *, .tt-footer *::before, .tt-footer *::after {
  box-sizing: border-box;
}

/* ===== Top main row ===================================================== */

.tt-footer__main {
  display: grid;
  /* Figma desktop tracks: brand 489.59 + 4×273.6 + 4 gaps of 32 = 1712 (inner).
     We use fr units so the grid can shrink on tablets but keep the same ratio. */
  grid-template-columns:
    1.79fr  /* brand + address + socials  ~489.59 */
    1fr     /* Каталог                    ~273.60 */
    1fr     /* Сервіс                     ~273.60 */
    1fr     /* Контакти                   ~273.60 */
    1fr;    /* Робочий час                ~273.60 */
  gap: 32px;
  align-items: flex-start;
}

.tt-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tt-footer__col--brand {
  gap: 24px;
}

/* ===== Brand ============================================================
   Reuses the same SVG asset as the header (logo.svg) at footer-scale.
   Figma footer brand box is 92.3×39 — logo.svg has the same 2.37:1 aspect
   ratio, so scaling by height alone keeps every pixel proportional. */

.tt-footer__brand {
  display: inline-flex;
  text-decoration: none;
  width: max-content;
}
.tt-footer__brand:hover { text-decoration: none; }

.tt-footer__brand-img {
  display: block;
  height: 39px;
  width: auto;
}

.tt-footer__address {
  margin: 0;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #6B6B6B;
}

/* ===== Socials ========================================================== */

.tt-footer__socials {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 16px;
}

/* Social icons are self-contained 40×40 SVGs (Figma supplies the cream circle +
   dark-brown ink path). The wrapper is just an interaction surface — no own bg. */
.tt-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.tt-footer__social:hover {
  transform: translateY(-1px);
  opacity: 0.85;
  text-decoration: none;
}
.tt-footer__social svg { display: block; }

/* ===== Column headings (Каталог / Сервіс / Контакти / Робочий час) ===== */

.tt-footer__heading {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  color: #2B2B2B;
}

/* ===== Catalog / Service link lists ===================================== */

.tt-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-footer__link {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
  text-decoration: none;
  transition: color 0.15s ease;
}
/* Hover (any link): Tea Brown + underline. */
.tt-footer__link:hover {
  color: #8B5E3C;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* Active = the link points to the page the user is currently on.
   Default state stays gray + underlined. */
.tt-footer__link--active {
  color: #6B6B6B;
  text-decoration: underline;
}
/* Active + hover → Tea Brown (still underlined). */
.tt-footer__link--active:hover {
  color: #8B5E3C;
  text-decoration: underline;
}

/* ===== Contacts (phones + email) ======================================== */

.tt-footer__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-footer__contacts li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tt-footer__contacts a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #6B6B6B;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tt-footer__contacts a:hover {
  color: #8B5E3C;
  text-decoration: none;
}

.tt-footer__icon {
  flex: 0 0 20px;
  color: #8B5E3C;
}
.tt-footer__icon--brown { color: #8B5E3C; }

/* ===== Working hours ==================================================== */

.tt-footer__week {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* Day buttons — clickable to switch shown hours. Reset native button chrome
   so they look like plain text spans. */
.tt-footer__day {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #6B6B6B;
  min-width: 24px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tt-footer__day:focus-visible {
  outline: 2px solid #8B5E3C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hover (non-today): Tea Brown text, NO underline */
.tt-footer__day:not(.tt-footer__day--today):hover {
  color: #8B5E3C;
  text-decoration: none;
}

/* Active (clicked, non-today): gray text + underline */
.tt-footer__day--active:not(.tt-footer__day--today) {
  color: #6B6B6B;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
/* Active + hover (non-today): Tea Brown + underline */
.tt-footer__day--active:not(.tt-footer__day--today):hover {
  color: #8B5E3C;
  text-decoration: underline;
}

.tt-footer__day--off {
  /* Non-working day — Figma uses Neutral Light Gray (#EAEAEA) */
  color: #EAEAEA;
}
/* Off day still gets the hover/active colour treatment so user gets feedback */
.tt-footer__day--off:not(.tt-footer__day--today):hover { color: #8B5E3C; }

.tt-footer__day--today {
  background: #8B5E3C;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 2px 4px;
  min-width: 28px;
  cursor: default;
}
/* Today never reacts to hover — it's permanently highlighted. */
.tt-footer__day--today:hover { color: #FFFFFF; background: #8B5E3C; }

.tt-footer__today {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8B5E3C;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
}

/* ===== Bottom row (copyright + payments) ================================ */

.tt-footer__bottom {
  border-top: 1px solid #EAEAEA;
  padding-top: 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.tt-footer__copy {
  margin: 0;
  font-family: 'Chivo', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #A1A1A1;
}

.tt-footer__payments {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.tt-footer__payments img {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
}

/* ===== Tablet / narrow desktop ========================================== */
@media (max-width: 1200px) and (min-width: 769px) {
  .tt-footer__main {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .tt-footer__col--brand { grid-column: 1 / -1; }
}

/* ===== Mobile (Figma 390 node 741:47840) ================================
   Figma mobile layout:
     row 1: Brand block (full width — logo + address + socials)
     row 2: Каталог | Сервіс         (two equal columns)
     row 3: Контакти | Робочий час   (two equal columns)
*/
@media (max-width: 768px) {
  .tt-footer {
    padding: 40px 0;
  }
  .tt-footer__inner {
    width: 100%;
    padding: 0 16px;
    /* Figma mobile section.gap = 24 between main grid and bottom row. */
    gap: 24px;
  }

  .tt-footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    /* Figma mobile content-block.gap = 32 between brand row, catalog/service
       pair, and contacts/hours pair. */
    row-gap: 32px;
    align-items: start;
  }

  /* Brand spans both columns. Каталог/Сервіс/Контакти/Робочий час each take
     one cell — they line up into 2×2 pairs naturally because order in HTML is
     catalog, service, contacts, hours. */
  .tt-footer__col--brand { grid-column: 1 / -1; }
  .tt-footer__col          { min-width: 0; }

  /* Bottom row stacks centred on mobile */
  .tt-footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .tt-footer__copy {
    text-align: center;
  }
}
/* ===== TripTea — Cart popup =============================================
   Figma desktop node: 903:74817 (Cart, 419w, x=1411 y=106 relative to 1920 frame)
   Figma mobile  node: 903:74904 (Cart, 390 fullscreen)

   Desktop: floating panel anchored under the header cart icon — 419 wide, hug
   height, 16px corner radius, soft shadow. Mobile: fullscreen overlay.
   Internal layout is identical (header bar + item rows + footer with totals);
   the breakpoint just changes positioning / size / shadow.
*/

/* Anchor wraps just the cart icon — gives the popup a positioned ancestor so
   top/right values resolve relative to the icon, not the page. On mobile the
   popup is position:fixed (see media query below), so the anchor stops mattering. */
.tt-cart-popup-anchor {
	position: relative;
	display: inline-flex;
}

.tt-cart-popup {
	display: none;
	position: absolute;
	z-index: 2000;
	top: calc(100% + 8px);
	right: 0;
	width: 419px;
	max-width: calc(100vw - 32px);
	/* Constrain to viewport so popups with many items don't fall off the bottom.
	   140px ≈ sticky header (124) + breathing room. Items list scrolls internally. */
	max-height: calc(100vh - 140px);
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: var(--shadow-xl);
	font-family: 'DM Sans', sans-serif;
	color: #4A3426;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "case", "cpsp";
	flex-direction: column;
	overflow: hidden;
}
.tt-cart-popup.is-open { display: flex; }
.tt-cart-popup *, .tt-cart-popup *::before, .tt-cart-popup *::after { box-sizing: border-box; }

/* ===== Head bar (Frame 4630) ============================================ */

.tt-cart-popup__head {
	flex: 0 0 auto; /* pinned top — never shrinks even when items list takes most space. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 24px 16px;
	border-bottom: 1px solid #EAEAEA;
}
.tt-cart-popup__head-left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
.tt-cart-popup__icon {
	width: 24px;
	height: 24px;
	color: #4A3426; /* Figma: bag icon stroke #4A3426 (Dark Tea). */
	flex: 0 0 24px;
}
.tt-cart-popup__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
}
.tt-cart-popup__title {
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	color: #4A3426;
}

/* Count badge (Frame 4648) — Light Beige pill with Tea Brown number. */
.tt-cart-popup__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	min-height: 20px;
	border-radius: 8px;
	background: #F5EFE7;
	color: #8B5E3C;
	font-weight: 600;
	font-size: 10px;
	line-height: 140%;
}

.tt-cart-popup__close {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	color: #4A3426; /* Figma: close-square stroke #4A3426. */
	cursor: pointer;
	display: inline-flex;
	transition: color 0.15s ease;
}
.tt-cart-popup__close:hover { color: #8B5E3C; }
.tt-cart-popup__close:focus-visible {
	outline: 2px solid #8B5E3C;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ===== Items list (Frame 4636 / 4637 / 4638) ============================ */

.tt-cart-popup__items {
	display: flex;
	flex-direction: column;
	/* Shrinks to fit content; scrolls internally when total height exceeds the
	   popup's max-height (or the fullscreen viewport on mobile). min-height:0 is
	   required so a flex child can shrink past its content size and overflow:auto
	   actually engages. overscroll-behavior:contain prevents wheel/touch scrolls
	   from bubbling to the page once you reach the end of the list. */
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tt-cart-popup__item {
	display: flex;
	align-items: flex-start; /* image + content + trash all snap to top of the row. */
	gap: 16px;
	padding: 16px;
	background: #FFFFFF;
	border-bottom: 1px solid #EAEAEA;
}
.tt-cart-popup__item:last-child { border-bottom: 0; }

/* Remove-from-cart trash button (Figma 24×24 vuesax/linear/trash, last flex child
   of the item row). Stroke color stays Dark Tea via currentColor; hover bumps to
   Tea Brown so users get feedback without committing to a destructive-looking red. */
.tt-cart-popup__item-remove {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	color: #4A3426;
	cursor: pointer;
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease;
}
.tt-cart-popup__item-remove:hover { color: #8B5E3C; }
.tt-cart-popup__item-remove:focus-visible {
	outline: 2px solid #8B5E3C;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Square thumb 72×72 with 11.52 radius (Figma Background frame). */
.tt-cart-popup__item-img {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	background-color: #F5EFE7;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 11.52px;
	display: block;
}

/* Frame 4641 — title/meta column + prices column, stacked vertically. */
.tt-cart-popup__item-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* Frame 4640 — title + meta inner column, gap 7. */
.tt-cart-popup__item-info {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.tt-cart-popup__item-name {
	font-weight: 700;
	font-size: 16px;
	line-height: 140%;
	color: #4A3426;
	text-decoration: none;
}
.tt-cart-popup__item-name:hover {
	color: #8B5E3C;
	text-decoration: none;
}

/* Frame 4596 — quantity + option row, gap 8. */
.tt-cart-popup__item-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-weight: 400;
	font-size: 12px;
	line-height: 150%;
	color: #6B6B6B;
}

/* Option is rendered as label+value in one inline group — label inherits the meta
   gray, value gets Tea Brown (Figma's {ts7} inline override). */
.tt-cart-popup__item-option { white-space: nowrap; }
.tt-cart-popup__item-option-label { color: #6B6B6B; }
.tt-cart-popup__item-option-value { color: #8B5E3C; }

/* Prices stack (Frame 4634): old above new, no gap so they read as a pair. */
.tt-cart-popup__item-prices {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.tt-cart-popup__item-old-price {
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #4A3426;
	text-decoration: line-through;
	text-decoration-skip-ink: auto;
}
.tt-cart-popup__item-price {
	font-weight: 700;
	font-size: 22px;
	line-height: 130%;
	color: #4A3426;
}

/* ===== Footer (Frame 4632) ============================================== */

.tt-cart-popup__foot {
	flex: 0 0 auto; /* pinned bottom — buttons always reachable regardless of cart length. */
	display: flex;
	flex-direction: column;
	gap: 20px; /* Figma Frame 4637 column gap. */
	padding: 16px;
	background: #FFFFFF;
	border-top: 1px solid #EAEAEA; /* separator between scrolling list and pinned footer. */
}

.tt-cart-popup__total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tt-cart-popup__total-label {
	font-weight: 700;
	font-size: 22px;
	line-height: 130%;
	color: #4A3426;
}
.tt-cart-popup__total-value {
	font-weight: 700;
	font-size: 22px;
	line-height: 130%;
	color: #8B5E3C;
}

/* Buttons — both share padding/radius/typography. Primary is solid Tea Brown,
   secondary is outlined Tea Brown. (Figma Frame 4870 / 4872.) */
.tt-cart-popup__btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	height: 48px; /* Figma fixed height — primary + secondary share spec. */
	border-radius: 8px;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	border: 1px solid transparent;
}
.tt-cart-popup__btn--primary {
	background: #8B5E3C;
	color: #FFFFFF;
	border-color: #8B5E3C;
}
.tt-cart-popup__btn--primary:hover {
	background: #4A3426;
	border-color: #4A3426;
	color: #FFFFFF;
	text-decoration: none;
}
.tt-cart-popup__btn--secondary {
	background: transparent;
	color: #8B5E3C;
	border-color: #8B5E3C;
}
.tt-cart-popup__btn--secondary:hover {
	background: #F5EFE7;
	color: #8B5E3C;
	border-color: #8B5E3C;
	text-decoration: none;
}

.tt-cart-popup__empty {
	padding: 40px 16px;
	text-align: center;
	color: #6B6B6B;
	font-size: 16px;
	font-weight: 400;
}

/* Filler is no longer needed — items section now flex-grows to fill available
   space on mobile and flex-shrinks to scroll on overflow. Kept hidden in markup
   to avoid touching the template. */
.tt-cart-popup__filler { display: none; }

/* ===== Mobile (Figma 903:74904, 390 fullscreen, no shadow) ============== */
@media (max-width: 768px) {
	.tt-cart-popup {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none; /* override the desktop max-height — fullscreen is intentional. */
		border-radius: 0;
		box-shadow: none;
		margin: 0;
		display: none;
	}
	.tt-cart-popup.is-open { display: flex; }

	/* Items section: grows to fill the space between pinned head/foot. Same
	   overflow:auto + min-height:0 from the base style handles long lists. */
	.tt-cart-popup__items {
		flex: 1 1 auto;
	}
}

/* Lock body scroll when fullscreen popup is open on mobile. */
@media (max-width: 768px) {
	body.tt-cart-popup-open { overflow: hidden; }
}
/* ===== TripTea — Product page (desktop) ==================================
   Figma nodes:
     541:9150 (Product page root, 1920-Main)
     541:9152 (top card: gallery + body)
     541:9202 (brewing-method block)
     705:29444 (related products carousel)

   Desktop-only: mobile layout will be added in a separate pass once Figma
   delivers the 390-main variant.
*/

/* Stock product.twig used to live inside Bootstrap's #content wrapper which
   capped width to col-sm-12 (~1140). Our new layout is full-bleed white card +
   coloured section bands, so we neutralise that ancestor here. */
#content:has(.tt-product) {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
}

/* ===== Section bands (full-bleed background) ============================= */

.tt-product,
.tt-brewing {
	font-family: 'DM Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "case", "cpsp";
	color: #2B2B2B;
}

.tt-product--breakout,
.tt-brewing--breakout {
	position: relative;
	width: 100vw;
	max-width: 1704px;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
}

.tt-product *,
.tt-brewing *,
.tt-product *::before, .tt-product *::after,
.tt-brewing *::before, .tt-brewing *::after {
	box-sizing: border-box;
}

/* ===== Top product card (Figma 541:9152) ================================= */

.tt-product {
	background: #FFFFFF;
	border-top: 1px solid #EAEAEA;
}

/* Outer wrapper carries the asymmetric Figma padding (left 192 / right 305).
   Breadcrumbs sit above the main flex row, both aligned to this padded box. */
.tt-product__inner {
	display: flex;
	padding-top: 64px;
	padding-bottom: 103px;
	padding-left: 16px;
	padding-right: 16px;
	flex-direction: column;
	gap: 24px;
	max-width: 1704px;
	margin: 0 auto;
}

/* Breadcrumbs — DM Sans 14/150, Tea Brown crumb links, Medium Gray current item.
   Separator is a 4×4 SVG circle filled with Warm Sand (Figma assets/sep). */
.tt-product__crumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	/* Pin the row to body width — parent uses align-items: flex-start so
	   nav otherwise grows to content width and the ellipsis never engages. */
	width: 100%;
	min-width: 0;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
}
.tt-product__crumb {
	flex: 0 0 auto;
	color: #8B5E3C;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.tt-product__crumb:hover { color: #4A3426; text-decoration: underline; }
/* Last crumb (the product name) takes remaining space and truncates with "…"
   when the row would otherwise wrap. Full name is still visible in the H1 below. */
.tt-product__crumb:last-of-type {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #6B6B6B;
	pointer-events: none;
	text-decoration: none;
}
.tt-product__crumb-sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4px;
	height: 4px;
}

/* Top row — gallery on left, body on right. Figma column gap = 83px. */
.tt-product__top {
	display: flex;
	gap: 83px;
	align-items: flex-start;
	align-self: stretch;
}

/* ===== Gallery (4 thumbs vertical + main image) ========================== */

.tt-product__gallery {
	display: flex;
	gap: 24px;
	flex: 0 0 698px;
	width: 698px;
}

.tt-product__thumbs {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, 1fr);
	gap: 16px;
	flex: 0 0 120px;
	width: 120px;
}

/* Figma: 120×120, 1.5px Dark Tea border on every thumb, 8px radius.
   Active state currently differentiated only by the border thickness — there's
   no separate hover/active style in Figma yet. Keep a subtle hover for affordance. */
.tt-product__thumb {
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid #4A3426;
	padding: 0;
	margin: 0;
	background: #D9D9D9;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: block;
	transition: opacity 0.15s ease;
}

.tt-product__thumb--more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-tea-brown);
	color: var(--color-white);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 36px;
	font-weight: 700;
	cursor: default;
}
.tt-product__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tt-product__thumb:hover { opacity: 0.85; }
.tt-product__thumb--active { opacity: 1; }

.tt-product__main-img {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
	background: #D9D9D9;
}
.tt-product__main-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== Body (info column) ================================================ */

/* Figma body column: fixed width 643. Per-element gaps differ (21 / 21 / 15 / 25 /
   24 / 32 / 32), so we drop the parent `gap` and set explicit margin-bottoms on
   each direct child below instead of a single uniform value. */
.tt-product__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.tt-product__body > * { margin-bottom: 0; }
.tt-product__crumbs        { margin-bottom: 21px; }
.tt-product__title         { margin-bottom: 21px; }
.tt-product__rating        { margin-bottom: 15px; }
.tt-product__meta          { margin-bottom: 25px; }
.tt-product__description   { margin-bottom: 24px; }
.tt-product__gramming-row  { margin-bottom: 32px; }
.tt-product__price-row     { margin-bottom: 32px; }
.tt-product__cart-row      { margin-bottom: 0; }

/* Title — Tea Brown H2 (DM Sans ExtraBold 36 / 120). margin-bottom is set in
   the body-spacing block above so we don't reset it here. */
.tt-product__title {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	font-weight: 800;
	font-size: 36px;
	line-height: 120%;
	color: #8B5E3C;
}

.tt-product__rating {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.tt-product__star { display: block; }

/* Meta row: Артикул label+value + tick-circle + В наявності. DM Sans 12/140.
   Figma: 34px between the SKU group and the stock badge, 8px inside the badge
   between icon and text, baseline-centred so the SVG aligns with the cap height. */
.tt-product__meta {
	display: flex;
	align-items: center;
	gap: 34px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 140%;
}
.tt-product__sku-label { color: #6B6B6B; }
.tt-product__sku-value { color: #2B2B2B; }

.tt-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #4A3426;
	line-height: 1; /* drop the 140% line-box so icon + text sit on the same baseline */
}
.tt-product__stock svg { color: #8B5E3C; display: block; flex: 0 0 16px; }
/* Pre-order state — text + alarm-clock icon both Medium Gray. Override the
   default svg color above so it matches the parent. */
.tt-product__stock--pre_order { color: #6B6B6B; }
.tt-product__stock--pre_order svg { color: #6B6B6B; }
.tt-product__stock--out_of_stock { color: #C62828; }
.tt-product__stock--out_of_stock svg { color: #C62828; }

/* Description — DM Sans 14/150 Medium Gray. */
.tt-product__description {
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #6B6B6B;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	align-self: stretch;
}
.tt-product__description p { margin: 0 0 8px; }
.tt-product__description p:last-child { margin-bottom: 0; }

/* Gramming: label ON TOP, chip list BELOW (column, gap 16). Figma. */
.tt-product__gramming-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}
.tt-product__gramming-label {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 140%;
	color: #4A3426;
}

/* Chip list — 72×48, padding 8 12, radius 8. Active = solid Tea Brown bg + white text.
   Inactive = white bg + 1px Light Gray border + Medium Gray text. Both DM Sans 18 Bold. */
.tt-product__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 15px; /* Figma: 15 between adjacent chips. */
	margin: 0;
	padding: 0;
	list-style: none;
}
.tt-product__chip {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 72px;
	height: 48px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #EAEAEA;
	background: #FFFFFF;
	color: #6B6B6B;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	user-select: none;
}
.tt-product__chip:hover { border-color: #8B5E3C; color: #8B5E3C; }
.tt-product__chip--active {
	background: #8B5E3C;
	border-color: #8B5E3C;
	color: #FFFFFF;
}
.tt-product__chip--active:hover { color: #FFFFFF; }

/* Headline price — Dark Text H2 (DM Sans ExtraBold 36 / 120). margin-bottom
   is set in the body-spacing block; don't reset it here. */
.tt-product__price-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}
/* "Was-price" — rendered only when the product has an active special and no
   gramming. Same brown line-through pattern as the tt_sets cards on home. */
.tt-product__old-price {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 150%;
	color: #8B5E3C;
	text-decoration: line-through;
}
.tt-product__price {
	font-family: 'DM Sans', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 120%;
	color: #2B2B2B;
}

/* Cart row: counter | add-to-cart | wishlist. Add-to-cart takes remaining width. */
.tt-product__cart-row {
	display: flex;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

/* Counter: 140×48, 1px Light Gray border, 8 radius. */
.tt-product__counter {
	display: flex;
	width: 140px;
	height: 48px;
	padding: 8px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid #EAEAEA;
	background: #FFFFFF;
}
.tt-product__counter-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #4A3426;
	cursor: pointer;
	transition: color 0.15s ease;
}
.tt-product__counter-btn:hover { color: #8B5E3C; }
.tt-product__counter-input {
	flex: 1 0 0;
	min-width: 0;
	height: 32px;
	border: 0;
	padding: 0;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: #4A3426;
	background: transparent;
	outline: none;
}

/* Add-to-cart — 48 tall, flex:1 0 0, Tea Brown bg, white text. Hover #6F472B. */
.tt-product__add-to-cart {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	height: 48px;
	padding: 8px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex: 1 0 0;
	border: 0;
	border-radius: 8px;
	background: #8B5E3C;
	color: #FFFFFF;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	cursor: pointer;
	transition: background 0.15s ease;
}
.tt-product__add-to-cart:hover { background: #6F472B; }
.tt-product__add-to-cart svg {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}
/* Disabled state — pre-order or out-of-stock. Mirrors tt_bestsellers card:
   light-gray bg, white icon+text, not-allowed cursor, hover is a no-op. */
.tt-product__add-to-cart:disabled {
	background: #EAEAEA;
	color: #FFFFFF;
	cursor: not-allowed;
}
.tt-product__add-to-cart:disabled:hover { background: #EAEAEA; }

/* Wishlist heart — 48×48 button with 1px Light Gray border, gray heart inside. */
.tt-product__wishlist {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid #EAEAEA;
	border-radius: 8px;
	background: #FFFFFF;
	color: #6B6B6B;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	flex-shrink: 0;
}
.tt-product__wishlist:hover { color: #8B5E3C; border-color: #8B5E3C; }
.tt-product__wishlist--active { color: #8B5E3C; }
.tt-product__wishlist--active svg path { fill: #8B5E3C; }

/* ===== Brewing method block (Figma 541:9202) ============================== */

.tt-brewing {
	position: relative;
	background: #FAF7F2; /* Secondary Colors/Soft Cream */
	min-height: 628px;
	padding: 64px 192px;
	box-sizing: border-box;
	overflow: hidden; /* clip the dragon watermark that bleeds past the right edge */
}

/* Decorative dragon watermark — same asset the home-page "Корисні статті"
   block uses (image/articles/dragon-watermark.png). Anchored to the right
   edge with a small negative top offset so it peeks above the section and
   sinks just below the tips block, like the Figma frame. Pointer-events
   disabled so it never traps clicks aimed at cards behind it. */
.tt-brewing::before {
	content: "";
	position: absolute;
	/* Figma Inspect: x=1039, y=-126 inside the 1920-wide section frame. Anchor
	   by right edge (1920 − 1039 − 881 = 0) so the dragon stays glued to the
	   right side at any viewport ≥ 1920; narrower viewports just clip more of
	   it via overflow:hidden on the section. */
	top: -126px;
	right: 0;
	width: 881px;
	height: 940px;
	background-image: url('../image/articles/dragon-watermark.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	pointer-events: none;
	z-index: 0;
	/* Figma: layer opacity 100% but the image fill itself is set to 5% — same
	   net effect as opacity 0.05 here. Blend mode is Normal. */
	opacity: 0.05;
}

/* Content sits above the watermark via positive z-index. Width hugs naturally
   since the section padding (192 each side) already crops to 1536 at 1920vw. */
.tt-brewing__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Title — H2 DM Sans ExtraBold 36 / 120 / Dark Tea. 47px gap to the cards grid. */
.tt-brewing__title {
	margin: 0 0 47px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 120%;
	color: #4A3426;
}

/* Card row — exactly 4 equal columns. Figma spec says 366px per card but at any
   viewport less than 1920 a hardcoded 366 forces the 4th card to wrap. Grid
   with 1fr columns + 24 gap = 366px each at 1920 (math: (1536 − 3×24) ÷ 4)
   and gracefully shrinks at narrower desktop widths. */
.tt-brewing__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 24px;
}
/* When admin leaves "Поради" empty, the tips block doesn't render — the cards
   become the last child of the inner column, and the 24px gap below them
   becomes empty whitespace. Drop the margin so the section ends flush. */
.tt-brewing__cards:last-child {
	margin-bottom: 0;
}
/* Same idea for the section's enforced min-height: without tips the 628px
   floor leaves a big stretch of empty cream background. Release it when
   there's no tips block. (:has support: Chrome/Edge/Safari ≥2022, FF ≥2023.) */
.tt-brewing:not(:has(.tt-brewing__tips)) {
	min-height: 0;
}

/* Card — width comes from the grid track; padding 24/16, 1px Warm Sand border,
   radius 16. Centred content via flex column. */
.tt-brewing__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 24px 16px;
	background: #FFFFFF;
	border-radius: 16px;
	border: 1px solid #E7D7C8;
	text-align: center;
}

/* Icon box — 48×48, Light Beige bg, 8 radius. Padding 12 (slight asymmetric
   in Figma — 12 13 12 12 — too small to perceive, normalised to 12). */
.tt-brewing__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: #F5EFE7;
	border-radius: 8px;
}
.tt-brewing__card-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* Label — Body Large DM Sans 18 / 150 / Dark Tea, centred. */
.tt-brewing__card-label {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 150%;
	color: #4A3426;
	text-align: center;
}
/* Value — H4 DM Sans Bold 22 / 130 / Dark Tea, centred. */
.tt-brewing__card-value {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 130%;
	color: #4A3426;
	text-align: center;
}
/* Subtitle — Small Text DM Sans 14 / 150 / Medium Gray, centred. */
.tt-brewing__card-subtitle {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #6B6B6B;
	text-align: center;
}

/* Tips block — full-width pill, Light Beige bg, 24px padding (right side flush
   with content edge per Figma's asymmetric 24/0/24/24 padding). */
.tt-brewing__tips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 24px 24px 24px;
	background: #F5EFE7;
	border-radius: 16px;
}
/* Title — H4 DM Sans Bold 22 / 130 / Dark Tea. 16px gap to the list below. */
.tt-brewing__tips-title {
	margin: 0 0 16px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 130%;
	color: #4A3426;
}
.tt-brewing__tips-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* No extra gap — Figma relies on the 150% line-height (24px) for spacing
	   between consecutive bullets. */
}
/* Tip text — Body Regular DM Sans 16 / 150 / Dark Text. Bullet is rendered by
   CSS pseudo (admin only types the line, no leading "•" needed). */
.tt-brewing__tips-list li {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: #2B2B2B;
	padding-left: 16px;
	position: relative;
}
.tt-brewing__tips-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #2B2B2B;
}

/* ===== Related products carousel =========================================
   HTML is rendered via common/tt_product_carousel.twig using tt-bestsellers__*
   classes, so all structural CSS comes from bestsellers_block.css.
   Only the old-price layout is scoped here via the .tt-related hook that
   the include adds to the <section> element. */

.tt-related .tt-product-card__prices {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tt-related .tt-product-card__old-price {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #8B5E3C;
	text-decoration: line-through;
}

/* ===== Gallery responsive visibility =====================================
   Below 1200px the original gallery (sibling of .tt-product__body) is hidden
   and the duplicate inside .tt-product__body becomes visible.
   At 1200px and above the situation is reversed. */

.tt-product__gallery--mobile {
	display: none;
}

.tt-product__actions {
	width: 100%;
	display: flex;
	gap: 16px;
	align-items: center;
	align-self: stretch;
}

@media (max-width: 1199px) {
	.tt-brewing__cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.tt-brewing--breakout {
		padding: 40px 16px;
	}
	.tt-product__gallery:not(.tt-product__gallery--mobile) {
		display: none;
	}
	.tt-product__body {
		flex: 1 1 0;
		width: 100%;
		min-width: 0;
	}
	.tt-product__gallery--mobile {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		align-self: center;
		margin-bottom: 21px;
	}
	.tt-product__actions {
		width: fit-content;
	}
	.tt-gallery-swiper {
		max-width: 698px;
	}
	.tt-gallery-thumbs {
		max-width: 698px;
		align-self: center;
	}
	.tt-product__add-to-cart span {
		display: none;
	}
	.tt-product__cart-row {
		justify-content: space-between;
	}
}

/* ===== Mobile gallery — Swiper components ================================= */

.tt-gallery-swiper {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 24px;
	overflow: hidden;
	background: #D9D9D9;
}

.tt-gallery-swiper .swiper-slide {
	width: 100%;
	height: 100%;
}

.tt-gallery-swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-gallery-swiper__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.tt-gallery-swiper__dots .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E7D7C8;
	opacity: 1;
	margin: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tt-gallery-swiper__dots .swiper-pagination-bullet-active {
	background: #8B5E3C;
}

.tt-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	width: 100%;
}

.tt-gallery-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	margin: 0;
	border: 1.5px solid transparent;
	border-radius: 16px;
	overflow: hidden;
	background: #D9D9D9;
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.tt-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-gallery-thumb:hover { opacity: 0.85; }
.tt-gallery-thumb--active { border-color: #4A3426; }

/* ===== Lightbox =========================================================== */

.tt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--color-white);
	display: flex;
	flex-direction: column;
}

.tt-lightbox[hidden] { display: none; }

.tt-lightbox__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
	border-bottom: 1px solid #EAEAEA;
	flex-shrink: 0;
}

.tt-lightbox__title {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	color: #2B2B2B;
}

.tt-lightbox__close {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	color: #4A3426;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}
.tt-lightbox__close:hover { opacity: 0.7; }

.tt-lightbox__body {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 32px; /* 20px × 2 = 40px vertical — used in image height calc below */
	height: 100%;
}

.tt-lightbox__img-wrap {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1/1;
	height: 100%;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-lightbox__img {
	display: block;
	height: 100%;
	width: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
}

/* Nav buttons — visible only above 1200px */
.tt-lightbox__nav {
	appearance: none;
	-webkit-appearance: none;
	display: none;
	flex-shrink: 0;
	padding: 12px;
	color: var(--color-dark-tea, #4A3426);
	border: 1px solid var(--color-dark-tea, #4A3426);
	border-radius: 16px;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tt-lightbox__nav:disabled {
	background: var(--color-light-beige, #F5EFE7);
	border-color: transparent;
	color: var(--color-warm-sand, #E7D7C8);
	cursor: default;
}
.tt-lightbox__nav svg {
	display: block;
	width: 32px;
	height: 32px;
}

@media (min-width: 1200px) {
	.tt-lightbox__nav { display: flex; align-items: center; justify-content: center; }
}

/* Thumbnail strip */
.tt-lightbox__thumbs {
	display: flex;
	gap: 12px;
	padding: 16px 32px;
	overflow-x: auto;
	justify-content: center;
	flex-shrink: 0;
	scrollbar-width: none;
}
.tt-lightbox__thumbs::-webkit-scrollbar { display: none; }

.tt-lightbox__thumb {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	padding: 0;
	margin: 0;
	border: 1.5px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: #D9D9D9;
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}
.tt-lightbox__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tt-lightbox__thumb:hover { opacity: 0.8; }
.tt-lightbox__thumb--active { border-color: #4A3426; }
/* ===== TripTea — Catalog / Category page ================================== */

/* ===== Page wrapper ======================================================= */

.tt-catalog {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2B2B2B;
  background: #fff;
}

.tt-catalog *,
.tt-catalog *::before,
.tt-catalog *::after {
  box-sizing: border-box;
}

.tt-catalog__inner {
  max-width: 1704px;
  margin: 0 auto;
  padding: 32px 16px 80px;
}

/* ===== Category tabs ===================================================== */

.tt-catalog__tabs {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 1200px) {
  .tt-catalog__tabs {
    flex-wrap: wrap;
  }
  .tt-catalog__tab {
    flex: 1 1 calc(50% - 8px);
  }
}

.tt-catalog__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 12px;
  padding: 14px 20px;
  border: 1.5px solid #E0D5C9;
  border-radius: 16px;
  background: #FFFFFF;
  text-decoration: none;
  color: var(--color-dark-tea);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tt-catalog__tab:hover {
  border-color: #8B5E3C;
  color: #8B5E3C;
  text-decoration: none;
}

.tt-catalog__tab--active {
  background: var(--color-warm-sand);
  border-color: var(--color-tea-brown);
  color: #4A3426;
  font-weight: 600;
}

.tt-catalog__tab--active:hover {
  border-color: #4A3426;
  color: #4A3426;
}

.tt-catalog__tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #E7D7C8;
  flex-shrink: 0;
  overflow: hidden;
  color: #4A3426;
}

.tt-catalog__tab--active .tt-catalog__tab-icon {
  background: #8B5E3C;
  color: #ffffff;
}

.tt-catalog__tab-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ===== Two-column layout ================================================= */

.tt-catalog__layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 32px;
  margin-top: 24px;
  align-items: start;
}

/* ===== Filter sidebar ==================================================== */

.tt-catalog__sidebar {
  border: 1px solid #E0D5C9;
  border-radius: 16px;
  overflow: hidden;
}

.tt-catalog__filters-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #4A3426;
  border-bottom: 1px solid #E0D5C9;
}

.tt-catalog__filter-group {
  border-bottom: 1px solid #E0D5C9;
}

.tt-catalog__filter-group:last-of-type {
  border-bottom: none;
}

.tt-catalog__filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark-tea);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.tt-catalog__filter-btn:hover {
  color: #8B5E3C;
}

.tt-catalog__filter-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.tt-catalog__filter-group.is-closed .tt-catalog__filter-chevron {
  transform: rotate(0deg);
}

/* Groups are open by default; .is-closed collapses the body */
.tt-catalog__filter-body {
  display: block;
  padding: 0 16px 12px;
}

.tt-catalog__filter-group.is-closed .tt-catalog__filter-body {
  display: none;
}

.tt-catalog__filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-dark-tea);
  transition: color 0.15s ease;
}

.tt-catalog__filter-item:hover {
  color: #8B5E3C;
}

/* Custom checkbox */
.tt-catalog__filter-check {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0 !important;
  border: 1px solid var(--color-tea-brown);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;  
  transition: background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.tt-catalog__filter-check:focus,
.tt-catalog__filter-check:focus-visible {
  outline: none;
  box-shadow: none;
}

.tt-catalog__filter-check:checked {
  background: var(--color-tea-brown);
  border-color: var(--color-tea-brown);
}

.tt-catalog__filter-check:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

/* Price range */
.tt-catalog__price-range {
  display: flex;
  gap: 8px;
}

.tt-catalog__price-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.tt-catalog__price-label {
  font-size: 11px;
  color: #8B8070;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tt-catalog__price-input {
  -moz-appearance: textfield;
}

.tt-catalog__price-input::-webkit-outer-spin-button,
.tt-catalog__price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.tt-catalog__sidebar-footer {
  padding: 12px 16px 16px;
  border-top: 1px solid #E0D5C9;
}

.tt-catalog__show-results-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--color-white);
  color: var(--color-tea-brown);
  border: 1.5px solid var(--color-tea-brown);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tt-catalog__show-results-btn:hover {
  background: #EDE3D8;
  border-color: #C8B8A8;
}

/* ===== Toolbar ============================================================ */

.tt-catalog__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EAEAEA;
}
.tt-catalog__count span {
  color: var(--color-tea-brown);
  font-weight: 400;
  font-size: 16px;
}

.tt-catalog__count {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark-tea);
}


/* Custom sort select */
.tt-catalog__sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tt-catalog__sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 36px 8px 12px;
  border: 1px solid #E0D5C9;
  border-radius: 8px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2B2B2B;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}

.tt-catalog__sort-select:hover,
.tt-catalog__sort-select:focus {
  border-color: #8B5E3C;
}

.tt-catalog__sort-chevron {
  position: absolute;
  right: 10px;
  pointer-events: none;
}

/* View toggle */
.tt-catalog__view-toggle {
  display: flex;
  gap: 4px;
}

.tt-catalog__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #E0D5C9;
  border-radius: 8px;
  background: #fff;
  color: #B0A898;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tt-catalog__view-btn:hover {
  border-color: #8B5E3C;
  color: #8B5E3C;
}

.tt-catalog__view-btn--active {
  border-color: #8B5E3C;
  color: #8B5E3C;
  background: #F5EFE7;
}

/* ===== Product grid ======================================================= */

.tt-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Override the strip-specific flex sizing from bestsellers_block.css */
.tt-catalog__grid .tt-product-card {
  flex: none;
  width: 100%;
}

/* Old/strikethrough price in the catalog */
.tt-product-card__prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tt-product-card__old-price {
  font-size: 13px;
  font-weight: 400;
  color: #B0A898;
  text-decoration: line-through;
  line-height: 1.3;
}

/* ===== Show more button =================================================== */

.tt-catalog__show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.tt-catalog__show-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border: 1.5px solid #8B5E3C;
  border-radius: 12px;
  background: transparent;
  color: #8B5E3C;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tt-catalog__show-more:hover {
  background: #F5EFE7;
  color: #4A3426;
  text-decoration: none;
}

/* ===== Empty state ======================================================== */

.tt-catalog__empty {
  padding: 48px 0;
  text-align: center;
  color: #6B6B6B;
  font-size: 16px;
}

/* ===== Responsive ========================================================= */

@media (max-width: 1200px) {
  .tt-catalog__layout {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }

  .tt-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .tt-catalog__layout {
    grid-template-columns: 1fr;
  }

  .tt-catalog__sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .tt-catalog__inner {
    padding: 20px 16px 48px;
  }

  .tt-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .tt-catalog__toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .tt-catalog__count {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 600px) {
  .tt-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    height: fit-content;
  }
  .tt-catalog__grid .tt-product-card__media {
    max-height: 125px;
   
  }
  .tt-catalog__grid .tt-product-card__price-row {
     margin-top: 0;
  }
  .tt-catalog__grid .tt-product-card {
      min-height: 0;
  }

  .tt-catalog__grid .tt-product-card__price-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* =====================================================================
   Auth Pages — Login & Register
   ===================================================================== */

/* Hide nav and actions on auth pages — logo only */
body:has(#account-login) #main-header .header-nav,
body:has(#account-login) #main-header .header-actions,
body:has(#account-register) #main-header .header-nav,
body:has(#account-register) #main-header .header-actions {
	display: none;
}

/* Page background */
body:has(#account-login),
body:has(#account-register) {
	background-color: var(--color-soft-cream);
}

html, body {
	height: 100%;
	min-height: 100%;
}

/* Sticky footer — auth pages */
body:has(#account-login),
body:has(#account-register) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body:has(#account-login) .main-container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

body:has(#account-login) #account-login,
body:has(#account-register) #account-register {
	flex: 1;
}

/* #account-login {
	height: 100%;
	display: flex;
	flex-direction: column;
}

#account-register {
	min-height: 100%;
	display: flex;
	flex-direction: column;
} */

#account-register .tt-auth-page {
	height: auto;
	height: 100%;
}

#account-register .tt-auth-page__center {
	height: auto;
	height: 100%;
}

/* =====================================================================
   Breadcrumb — .tt-breadcrumb
   Static: labels and links are hardcoded per page, no JS/reactive logic.
   ===================================================================== */
.tt-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
}

.tt-breadcrumb__item {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-medium-gray);
}

.tt-breadcrumb__item a {
	color: var(--color-medium-gray);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.tt-breadcrumb__item a:hover {
	color: var(--color-tea-brown);
	text-decoration: none;
}

.tt-breadcrumb__item--active {
	color: var(--color-dark-text);
}

.tt-breadcrumb__sep {
	margin: 0 6px;
	color: var(--color-medium-gray);
	user-select: none;
	font-size: 14px;
}

/* =====================================================================
   Auth page wrapper
   ===================================================================== */
.tt-auth-page {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 72px 108px 80px;
	box-sizing: border-box;
	height: 100%;
}

.tt-auth-page__breadcrumb {
	margin-bottom: 48px;
}

.tt-auth-page__center {
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: center;
}

/* =====================================================================
   Auth card — outer wrapper (no background, just centres content)
   ===================================================================== */
.tt-auth-card {
	width: 100%;
	max-width: 488px;
}

.tt-auth-card__title {
	font-size: 48px;
	font-weight: 800;
	color: var(--color-dark-tea);
	text-align: center;
	margin: 0 0 8px;
	line-height: 1.2;
}

.tt-auth-card__subtitle {
	font-size: 16px;
	color: var(--color-dark-tea);
	text-align: center;
	margin: 0 0 24px;
	line-height: 1.5;
}

/* White box: Google button + divider + form */
.tt-auth-form-box {
	background: var(--color-white);
	border-radius: var(--border-radius-xl);
	padding: 24px;
	/* box-shadow: var(--shadow-md); */
}

/* =====================================================================
   Google OAuth button
   ===================================================================== */
.tt-auth-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 52px;
	padding: 0 20px;
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--border-radius-md);
	font-size: 15px;
	font-weight: 500;
	font-family: 'DM Sans', sans-serif;
	color: var(--color-dark-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
	box-sizing: border-box;
}

.tt-auth-google:hover {
	background-color: var(--color-soft-cream);
	border-color: var(--color-warm-sand);
	color: var(--color-dark-text);
	text-decoration: none;
}

.tt-auth-google__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* =====================================================================
   Divider "чи"
   ===================================================================== */
.tt-auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0;
	color: var(--color-medium-gray);
	font-size: 16px;
}

.tt-auth-divider::before,
.tt-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-light-gray);
}

/* =====================================================================
   Form fields
   ===================================================================== */
.tt-auth-form {
	margin: 0;
}

.tt-auth-form__group {
	margin-bottom: 20px;
}

.tt-auth-form__label {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-dark-tea);
	margin-bottom: 8px;
	line-height: 1.4;
}

.tt-auth-form__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.tt-auth-form__input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	pointer-events: none;
	color: var(--color-tea-brown);
	flex-shrink: 0;
}

/* =====================================================================
   Standardised input — .tt-input
   Use on any <input> across the site for consistent appearance.
   ===================================================================== */
.tt-input {
	width: 100%;
	height: 42px;
	padding: 15px 9px;
	background: var(--color-soft-cream);
	border: 1px solid var(--color-warm-sand);
	border-radius: var(--border-radius-input);
	font-size: 15px;
	font-family: 'DM Sans', sans-serif;
	color: var(--color-tea-brown);
	box-sizing: border-box;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

.tt-input:focus {
	outline: none;
	border-color: var(--color-tea-brown);
	background: var(--color-white);
}

.tt-input::placeholder {
	color: var(--color-tea-brown);
	opacity: 0.6;
}

/* Extra left padding when a leading icon is present */
.tt-auth-form__input-wrap .tt-input {
	padding-left: 38px;
}

/* Extra right padding when the eye toggle is present */
.tt-auth-form__input-wrap:has(.tt-auth-form__toggle) .tt-input {
	padding-right: 38px;
}

/* eye toggle */
.tt-auth-form__toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-tea-brown);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	transition: color var(--transition-fast);
	flex-shrink: 0;
}

.tt-auth-form__toggle:hover {
	color: var(--color-tea-brown);
}

/* eye-off icon — shown when password is visible */
.tt-auth-form__toggle .icon-eye-off { display: none; }
.tt-auth-form__toggle.is-visible .icon-eye { display: none; }
.tt-auth-form__toggle.is-visible .icon-eye-off { display: block; }

/* Forgot password link */
.tt-auth-form__forgot {
	display: block;
	text-align: center;
	font-size: 16px;
	color: var(--color-tea-brown);
	text-decoration: underline;
	margin-top: 8px;
	transition: color var(--transition-fast);
}

.tt-auth-form__forgot:hover {
	color: var(--color-dark-tea);
	text-decoration: underline;
}

/* Submit button */
.tt-auth-form__submit {
	display: block;
	width: 100%;
	height: 56px;
	background: var(--color-tea-brown);
	color: var(--color-white);
	border: none;
	border-radius: var(--border-radius-md);
	font-size: 17px;
	font-weight: 700;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
	margin-top: 28px;
	transition: background-color var(--transition-fast);
	box-sizing: border-box;
	letter-spacing: 0.01em;
}

.tt-auth-form__submit:hover {
	background: var(--color-dark-tea);
}

.tt-auth-form__submit:active {
	background: #5A3821;
}

/* Field-level validation error */
.tt-auth-form__error {
	font-size: 13px;
	color: var(--color-error);
	margin-top: 4px;
	line-height: 1.4;
}

.tt-input--error {
	border-color: var(--color-error);
	background: #FFF8F8;
}

.tt-input--error:focus {
	border-color: var(--color-error);
	background: var(--color-white);
}

/* Terms text below submit button */
.tt-auth-form__terms {
	text-align: center;
	font-size: 14px;
	color: var(--color-medium-gray);
	margin-top: 12px;
	line-height: 1.5;
}

.tt-auth-form__terms a {
	color: var(--color-tea-brown);
	text-decoration: underline;
	transition: color var(--transition-fast);
}

.tt-auth-form__terms a:hover {
	color: var(--color-dark-tea);
}

/* =====================================================================
   Register link at bottom
   ===================================================================== */
.tt-auth-card__register-link {
	text-align: center;
	font-size: 16px;
	color: var(--color-medium-gray);
	margin-top: 24px;
	line-height: 1.5;
}

.tt-auth-card__register-link a {
	color: var(--color-tea-brown);
	text-decoration: underline;
	font-weight: 700;
	transition: color var(--transition-fast);
}

.tt-auth-card__register-link a:hover {
	color: var(--color-dark-tea);
	text-decoration: underline;
}

/* =====================================================================
   Alert messages inside auth card
   ===================================================================== */
.tt-auth-card .alert {
	border-radius: var(--border-radius-md);
	margin-bottom: 20px;
	font-size: 14px;
	padding: 10px 14px;
}

/* =====================================================================
   Register page — keep Bootstrap form readable inside auth layout
   ===================================================================== */
#account-register .tt-auth-card {
	max-width: 680px;
	padding: 40px 56px 48px;
}

#account-register .form-horizontal .form-group {
	margin-bottom: 16px;
}

#account-register fieldset {
	margin-bottom: 24px;
}

#account-register legend {
	font-size: 16px;
	font-weight: 600;
	color: var(--color-dark-tea);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 8px;
	margin-bottom: 16px;
}

#account-register .form-control {
	border-color: var(--color-border);
	background: var(--color-soft-cream);
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
}

#account-register .form-control:focus {
	border-color: var(--color-tea-brown);
	background: var(--color-white);
	box-shadow: none;
	outline: none;
}

#account-register .btn-primary {
	padding: 10px 32px;
	font-size: 15px;
	font-weight: 600;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1815px) {
	.tt-auth-page {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 600px) {
	/* Only .tt-auth-page padding provides spacing — reset everything inside */
	.tt-auth-page {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.tt-auth-page__breadcrumb {
		margin-bottom: 16px;
	}

	.tt-auth-card {
		max-width: 100%;
	}

	.tt-auth-card__title {
		font-size: 32px;
		margin-bottom: 4px;
	}

	.tt-auth-card__subtitle {
		margin-bottom: 12px;
	}

	.tt-auth-form-box {
		box-shadow: none;
		border-radius: 16px;
		background: white;
		padding:24px;
	}

	.tt-auth-google {
		border-radius: var(--border-radius-input);
	}

	.tt-auth-form__group {
		margin-bottom: 12px;
	}

	.tt-auth-form__submit {
		margin-top: 16px;
	}

	.tt-auth-card__register-link {
		margin-top: 12px;
	}

	#account-register .tt-auth-card {
		padding: 0;
	}
}
/* =====================================================================
   Checkout Page — tt-co-*
   ===================================================================== */

/* ── Page layout ─────────────────────────────────────────────────────── */
.tt-co-page {
	background: var(--color-soft-cream);
	min-height: 100vh;
	padding: 40px 24px 80px;
	box-sizing: border-box;
}

.tt-co-page__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 32px;
	align-items: start;
}

.tt-co-page__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
}

.tt-co-page__title {
	font-size: 36px;
	font-weight: 800;
	color: var(--color-dark-tea);
	margin: 0;
}

/* ── Back button ─────────────────────────────────────────────────────── */
.tt-co-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 16px;
	border: 1px solid var(--color-dark-tea);
	color: var(--color-dark-tea);
	text-decoration: none;
	flex-shrink: 0;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tt-co-back:hover {
	background: var(--color-warm-sand);
	border-color: var(--color-warm-sand);
	color: var(--color-dark-tea);
	text-decoration: none;
}

/* ── Section ─────────────────────────────────────────────────────────── */
.tt-co-section {
	margin-bottom: 24px;
	background: var(--color-white);
	border-radius: var(--border-radius-lg);
	padding: 24px;
}

.tt-co-section__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-dark-tea);
	margin: 0 0 16px;
}

/* ── White card (generic) ────────────────────────────────────────────── */
.tt-co-card {
	background: var(--color-white);
	border-radius: var(--border-radius-lg);
	padding: 20px;
}

/* ── Contact form ────────────────────────────────────────────────────── */
.tt-co-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.tt-co-field__wrap {
	position: relative;
}

.tt-co-field__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--color-tea-brown);
	pointer-events: none;
	flex-shrink: 0;
}

.tt-co-field__input {
	padding-left: 38px !important;
}

/* ── Info card (saved contact / city row) ────────────────────────────── */
.tt-co-info-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--color-white);
	border-radius: var(--border-radius-md);
	padding: 14px 20px;
	margin-bottom: 12px;
	border: 1px solid var(--color-warm-sand);
}

.tt-co-info-card--city {
	margin-bottom: 40px;

}
.tt-co-subtitle {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-dark-tea);
	margin-bottom: 16px;
}

.tt-co-info-card__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-soft-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-tea-brown);
	flex-shrink: 0;
}

.tt-co-info-card__icon svg { width: 18px; height: 18px; }

.tt-co-info-card__icon--pin { background: var(--color-soft-cream); }

.tt-co-info-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tt-co-info-card__name {
	font-size: 15px;
	font-weight: 500;
	color: var(--color-dark-text);
	font-weight: 700;
}

.tt-co-info-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--color-medium-gray);
}

.tt-co-info-card__edit {
	background: none;
	border: none;
	padding: 0;
	color: var(--color-tea-brown);
	font-size: 16px;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
	font-weight: 700;
	flex-shrink: 0;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.tt-co-info-card__edit:hover { color: var(--color-dark-tea); }

/* ── Options list ────────────────────────────────────────────────────── */
.tt-co-options {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	overflow: hidden;
	margin-top: 12px;
}

/* Each option row */
.tt-co-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	border: 1px solid var(--color-warm-sand);
	border-radius: var(--border-radius-md);
	transition: background var(--transition-fast);
	user-select: none;
	position: relative;
}


.tt-co-option:not(.tt-co-option--active):hover { background: var(--color-soft-cream); }

.tt-co-option__radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Custom radio dot */
.tt-co-option__dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--color-warm-sand);
	background: var(--color-white);
	flex-shrink: 0;
	margin-top: 2px;
	transition: border-color var(--transition-fast);
	position: relative;
}

.tt-co-option__dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-tea-brown);
	transition: transform var(--transition-fast);
}

.tt-co-option--active {
	border-color: var(--color-tea-brown);
}

.tt-co-option--active .tt-co-option__dot {
	border: 1px solid var(--color-tea-brown);
}

.tt-co-option--active .tt-co-option__dot::after {
	transform: translate(-50%, -50%) scale(1);
}

.tt-co-option__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tt-co-option__label {
	font-size: 16px;
	font-weight: 700;
	color: #4A3426;
}

.tt-co-option__sub {
	font-size: 14px;
	font-weight: 400;
	color: #6B6B6B;
}

/* Expand panel */
.tt-co-option__expand {
	display: none;
	background: var(--color-white);
	border: 1px solid var(--color-warm-sand);
	border-radius: 8px;
	margin-top: 8px;
}

/* ── Select (Nova Poshta branches) ───────────────────────────────────── */
.tt-co-select-label {
	display: block;
	font-size: 13px;
	color: var(--color-medium-gray);
	margin-bottom: 8px;
}

.tt-co-select-wrap {
	position: relative;
}

.tt-co-select {
	width: 100%;
	height: 44px;
	padding: 0 36px 0 12px;
	background: var(--color-soft-cream);
	border: 1px solid var(--color-warm-sand);
	border-radius: var(--border-radius-input);
	font-size: 14px;
	font-family: 'DM Sans', sans-serif;
	color: var(--color-dark-text);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color var(--transition-fast);
}

.tt-co-select:focus {
	outline: none;
	border-color: var(--color-tea-brown);
}

.tt-co-select-arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--color-medium-gray);
	pointer-events: none;
}

.tt-co-branch-hours {
	display: flex;
	gap: 24px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--color-medium-gray);
}

/* ── Notice box ──────────────────────────────────────────────────────── */
.tt-co-notice {
	background: var(--color-soft-cream);
	border-radius: var(--border-radius-md);
	padding: 10px 14px;
	font-size: 13px;
	color: var(--color-medium-gray);
	line-height: 1.5;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.tt-co-btn-save {
	display: inline-block;
	height: 44px;
	padding: 0 28px;
	background: var(--color-tea-brown);
	color: var(--color-white);
	border: none;
	border-radius: var(--border-radius-md);
	font-size: 15px;
	font-weight: 600;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
	transition: background var(--transition-fast);
	margin-top: 12px;
}

.tt-co-btn-save:hover { background: var(--color-dark-tea); }

.tt-co-btn-save--full {
	width: 100%;
	display: block;
}

/* ── Errors ──────────────────────────────────────────────────────────── */
.tt-co-errors {
	color: var(--color-error);
	font-size: 13px;
	margin-top: 8px;
}

.tt-co-errors p { margin: 2px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════ */
.tt-co-page__sidebar {
	position: sticky;
	top: 124px;
	margin-bottom: 24px;
}

.tt-co-sidebar {
	background: var(--color-white);
	border-radius: var(--border-radius-xl);
	padding: 24px;
}

.tt-co-sidebar__header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-dark-tea);
	margin-bottom: 16px;
}

.tt-co-sidebar__count {
	font-weight: 400;
	color: var(--color-tea-brown);
}

/* Sidebar items */
.tt-co-sidebar__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}

.tt-co-sidebar-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tt-co-sidebar-item__img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--border-radius-md);
	flex-shrink: 0;
}

.tt-co-sidebar-item__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.tt-co-sidebar-item__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-dark-text);
	line-height: 1.4;
}

.tt-co-sidebar-item__qty,
.tt-co-sidebar-item__opts {
	font-size: 12px;
	color: var(--color-medium-gray);
}

.tt-co-sidebar-item__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-dark-text);
	white-space: nowrap;
	flex-shrink: 0;
	align-self: flex-end;
}

/* Edit link */
.tt-co-sidebar__edit-link {
	display: block;
	font-size: 14px;
	color: var(--color-tea-brown);
	text-decoration: none;
	font-weight: 700;
	padding: 24px 24px 24px 0;
	margin-top: 8px;
	border-bottom: 1px solid var(--color-border);
}

.tt-co-sidebar__edit-link:hover { color: var(--color-dark-tea); text-decoration: none; }

/* Totals rows */
.tt-co-sidebar__totals {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 16px;
}

.tt-co-sidebar__total-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #000000;
}
.tt-co-sidebar__free {
	font-weight: 600;
	color: var(--color-matcha-green);
}
.tt-co-sidebar__delivery {
	color: var(--color-dark-tea);
}
.tt-co-sidebar__header {
	font-size: 18px;
	color: var(--color-dark-tea);
	font-weight: 700;
}

/* Grand total */
.tt-co-sidebar__grand-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-dark-tea);
	margin-bottom: 20px;
}

.tt-co-sidebar__grand-amount {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-tea-brown);
}

.tt-co-sidebar__currency {
	font-size: 20px;
}

/* Submit button */
.tt-co-btn-submit {
	display: block;
	width: 100%;
	height: 52px;
	background: var(--color-tea-brown);
	color: var(--color-white);
	border: none;
	border-radius: var(--border-radius-md);
	font-size: 16px;
	font-weight: 700;
	font-family: 'DM Sans', sans-serif;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.tt-co-btn-submit:hover { background: var(--color-dark-tea); }
.tt-co-btn-submit:disabled { background: var(--color-warm-sand); cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════
   CITY MODAL
   ═══════════════════════════════════════════════════════════════════════ */
.tt-co-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-co-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
}

.tt-co-modal__box {
	position: relative;
	background: var(--color-white);
	border-radius: var(--border-radius-xl);
	padding: 32px;
	width: 100%;
	max-width: 520px;
	box-shadow: var(--shadow-xl);
	z-index: 1;
}

.tt-co-modal__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-dark-tea);
	margin: 0 0 20px;
}

/* City chips */
.tt-co-modal__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.tt-co-chip {
	height: 36px;
	padding: 0 16px;
	background: var(--color-soft-cream);
	border: 1.5px solid var(--color-border);
	border-radius: 20px;
	font-size: 14px;
	font-family: 'DM Sans', sans-serif;
	color: var(--color-dark-text);
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.tt-co-chip:hover {
	background: var(--color-warm-sand);
	border-color: var(--color-tea-brown);
}

.tt-co-chip--active {
	background: var(--color-tea-brown);
	border-color: var(--color-tea-brown);
	color: var(--color-white);
}

.tt-co-modal__search-label {
	display: block;
	font-size: 14px;
	color: var(--color-medium-gray);
	margin-bottom: 8px;
}

.tt-co-modal__search-wrap {
	margin-bottom: 8px;
}

.tt-co-modal__example {
	font-size: 13px;
	color: var(--color-medium-gray);
	margin-bottom: 20px;
}

.tt-co-modal__example-link {
	color: var(--color-tea-brown);
	text-decoration: none;
}

.tt-co-modal__example-link:hover {
	color: var(--color-dark-tea);
	text-decoration: underline;
}

/* ── City autocomplete dropdown ──────────────────────────────────────── */
.tt-co-autocomplete {
	position: relative;
}

.tt-co-autocomplete__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--color-white);
	border: 1px solid var(--color-warm-sand);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-md);
	list-style: none;
	padding: 4px 0;
	margin: 0;
	max-height: 220px;
	overflow-y: auto;
	z-index: 10;
}

.tt-co-autocomplete__item {
	padding: 10px 14px;
	font-size: 14px;
	color: var(--color-dark-text);
	cursor: pointer;
	transition: background var(--transition-fast);
	line-height: 1.4;
}

.tt-co-autocomplete__item:hover {
	background: var(--color-soft-cream);
	color: var(--color-tea-brown);
}

/* ═══════════════════════════════════════════════════════════════════════
   SUCCESS PAGE — tt-cs-*
   ═══════════════════════════════════════════════════════════════════════ */
.tt-cs-page {
	background: var(--color-soft-cream);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px 80px;
	box-sizing: border-box;
}

.tt-cs-card {
	border-radius: var(--border-radius-xl);
	padding: 48px 40px 40px;
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Icon */
.tt-cs-icon {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--color-light-beige);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-tea-brown);
	margin-bottom: 24px;
	flex-shrink: 0;
}

.tt-cs-icon svg {
	width: 57px;
	height: 57px;
}

/* Title & subtitle */
.tt-cs-title {
	font-size: 28px;
	font-weight: 800;
	color: var(--color-dark-tea);
	margin: 0 0 10px;
}

.tt-cs-subtitle {
	font-size: 15px;
	color: var(--color-medium-gray);
	line-height: 1.6;
	margin: 0 0 24px;
}

/* Order number box */
.tt-cs-order-box {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: 14px 20px;
	margin-bottom: 20px;
	box-sizing: border-box;
	background: var(--color-white);
}

.tt-cs-order-box__label {
	display: block;
	font-size: 13px;
	color: var(--color-medium-gray);
	margin-bottom: 6px;
}

.tt-cs-order-box__number {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 22px;
	font-weight: 700;
	color: var(--color-dark-tea);
	letter-spacing: 0.02em;
}

/* Copy button */
.tt-cs-copy-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-medium-gray);
	display: flex;
	align-items: center;
	transition: color var(--transition-fast);
	flex-shrink: 0;
}

.tt-cs-copy-btn svg {
	width: 18px;
	height: 18px;
}

.tt-cs-copy-btn:hover { color: var(--color-tea-brown); }

.tt-cs-copy-btn--copied { color: var(--color-success); }

/* Steps */
.tt-cs-steps {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	padding: 16px 20px;
	margin-bottom: 24px;
	box-sizing: border-box;
	text-align: left;
	background: var(--color-white);
}

.tt-cs-steps__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-medium-gray);
	margin: 0 0 12px;
}

.tt-cs-steps__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tt-cs-steps__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--color-dark-text);
}

.tt-cs-steps__num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-soft-cream);
	color: var(--color-tea-brown);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* CTA button */
.tt-cs-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 32px;
	background: var(--color-tea-brown);
	color: var(--color-white);
	border-radius: var(--border-radius-md);
	font-size: 16px;
	font-weight: 700;
	font-family: 'DM Sans', sans-serif;
	text-decoration: none;
	transition: background var(--transition-fast);
}

.tt-cs-btn svg { width: 18px; height: 18px; }

.tt-cs-btn:hover {
	background: var(--color-dark-tea);
	color: var(--color-white);
	text-decoration: none;
}

@media (max-width: 600px) {
	.tt-cs-card {
		padding: 32px 20px 28px;
	}
	.tt-cs-title {
		font-size: 22px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.tt-co-page__inner {
		grid-template-columns: 1fr;
	}
	.tt-co-page__sidebar {
		position: static;
		order: -1;
	}
}

@media (max-width: 768px) {
	.tt-co-page {
		padding: 20px 16px 60px;
	}
	.tt-co-page__title {
		font-size: 24px;
	}
	.tt-co-form-row {
		grid-template-columns: 1fr;
	}
	.tt-co-modal__box {
		margin: 16px;
		max-width: none;
	}
	.tt-co-option__expand {
		padding-left: 20px;
	}
	.tt-co-branch-hours {
		flex-direction: column;
		gap: 4px;
	}
}

@media (max-width: 600px) {
	.tt-co-modal__chips {
		gap: 6px;
	}
	.tt-co-chip {
		height: 32px;
		padding: 0 12px;
		font-size: 13px;
	}
}