/* =====================================================================
   HOOKAHTRADE — РЕДИЗАЙН 2026
   card.css — страница «Карточка товара» (catalog.element/.default).
   Этап 3. Корзины нет, главный CTA — «Добавить в избранное».
   Подключается на страницах /catalog/ (header.php). Скоупим под #productPage.
   Карточка-плитка/токены — из redesign.css. Карта/похожие — отдельно (позже).
   ===================================================================== */

/* Обёртка + контейнер как у сайта */
#productPage.rd-card {
	background: var(--rd-bg);
	font-family: var(--rd-font-text);
	color: var(--rd-white);
	padding: 24px 0 80px;
}
#productPage .max {
	width: 100%;
	max-width: calc(var(--rd-container) + var(--rd-gutter) * 2);
	margin: 0 auto;
	padding-left: var(--rd-gutter);
	padding-right: var(--rd-gutter);
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* ВЕРХНИЙ БЛОК (галерея + инфо)                                        */
/* ------------------------------------------------------------------ */
#productPage .rd-card__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin: 12px 0 0;
}

/* СБРОС старой раскладки темы (style.css .pfBlock*) — иначе колонки ломаются:
   .pfBlockImages{width:550px}, .pfBlockInfo{width:calc(100%-580px);bg;border;padding:40px} */
#productPage .rd-card__top.pfBlock { display: grid; flex-wrap: nowrap; margin: 12px 0 0; }
#productPage .pfBlockImages.rd-card__gallery { width: auto; margin: 0; min-height: 600px; }
#productPage .pfBlockInfo.rd-card__info {
	width: auto;
	border: none;
	background: none;
	padding: 8px 0 0;
	border-radius: 0;
}

/* --- Галерея: фото на белой панели --- */
#productPage .rd-card__gallery {
	position: relative;
	background: #fff;
	border-radius: 24px;
	padding: 40px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 600px;
	overflow: hidden;
}
#productPage .rd-card__gallery .pfOneImage,
#productPage .rd-card__gallery .pfSlideItem,
#productPage .rd-card__gallery .pfSlider {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	overflow: visible;
}
/* Перебиваем .pfOneImage>img / .pfSlideItem img {position:absolute;object-fit:cover} из темы */
#productPage .rd-card__gallery img,
#productPage .rd-card__gallery .pfOneImage > img,
#productPage .rd-card__gallery .pfSlideItem > img {
	position: static;
	display: block;
	max-width: 100%;
	max-height: 620px;
	min-height: 300px;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}
/* Фото товара видно ВСЕМ (в т.ч. неавторизованным) — снимаем legacy-блюр (.blured) */
#productPage .rd-card__gallery .blured,
#productPage .rd-card__gallery .pfOneImage,
#productPage .rd-card__gallery .pfSlider,
#productPage .rd-card__gallery img { filter: none !important; }
/* Метки ТОП/NEW поверх фото */
#productPage .rd-card__gallery .fitchs {
	position: absolute;
	top: 18px;
	left: 18px;
	display: flex;
	gap: 8px;
	z-index: 2;
}
#productPage .rd-card__gallery .fitchs__item {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}
#productPage .rd-card__gallery .fitchs__item-sale { background: #2c2c2c; }
/* NEW — зелёный КРУГ (а не пилюля) */
#productPage .rd-card__gallery .fitchs__item-new {
	width: 54px;
	height: 54px;
	padding: 0;
	border-radius: 50%;
	justify-content: center;
	background: #2FB44C;
}

/* Стрелки галереи (slick, если несколько фото) — фиол. кружки по бокам */
#productPage .rd-card__gallery .slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--rd-accent);
	border: none;
	z-index: 3;
	cursor: pointer;
	font-size: 0;
}
#productPage .rd-card__gallery .slick-prev { left: 14px; }
#productPage .rd-card__gallery .slick-next { right: 14px; }
#productPage .rd-card__gallery .slick-arrow::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 9px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate(-40%, -50%) rotate(45deg);
}
#productPage .rd-card__gallery .slick-next::before { transform: translate(-60%, -50%) rotate(-135deg); }
#productPage .rd-card__gallery .slick-dots { display: none !important; }

/* --- Инфо --- */
#productPage .rd-card__info {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 45px;                /* воздушнее, как в макете (заголовок/цена/описание/кнопка) */
	padding-top: 8px;
}
/* Пилюля-тег раздела */
#productPage .rd-card__tag {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 18px;
	border-radius: 100px;
	background: var(--rd-dark);
	color: var(--rd-white);
	font-size: 14px;
	font-weight: 500;
}
/* Рейтинг-звёзды — в правом верхнем углу инфо */
#productPage .rd-card__rating {
	position: absolute;
	top: 8px;
	right: 0;
	margin: 0;
}
/* Заголовок */
#productPage .rd-card__title {
	font-family: var(--rd-font-head);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 38px;
	line-height: 1.02;
	letter-spacing: .3px;
	color: var(--rd-white);
	margin: 0;
	max-width: 90%;
}
/* Цена */
/* Перебиваем legacy-блюр цены для неавторизованных (body.sblured .pfPrice).
   В новом дизайне цена видна всем — как в списке каталога (.rd-pcard__price). */
body.sblured #productPage .pfBlockInfo .pfPrice,
#productPage .rd-card__price { filter: none !important; }
#productPage .rd-card__price {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-family: var(--rd-font-head);   /* TT Travels Next Trial — как в макете */
	font-weight: 600;
	font-size: 40px;                    /* десктоп */
	line-height: 1;
	color: var(--rd-white);
	margin: 0;
}
#productPage .rd-card__price .price__sale { font-weight: 600; }
#productPage .rd-card__price .price__old {
	font-size: 20px;
	font-weight: 400;
	color: rgba(255,255,255,.4);
	text-decoration: line-through;
}
/* Описание */
#productPage .rd-card__desc {
	font-size: 15px;
	line-height: 1.55;

	margin: 0;
	max-width: 560px;
}
/* Кнопка «Добавить в избранное» (главный CTA) */
#productPage a.rd-card__fav {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 28px;
	border-radius: 100px;
	background: var(--rd-accent);
	color: #fff;
	font-family: var(--rd-font-text);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity .2s, transform .2s;
	margin: 4px 0;
}
#productPage a.rd-card__fav:hover { opacity: .92; transform: translateY(-1px); }
#productPage a.rd-card__fav svg { width: 22px; height: 22px; color: #fff; }
/* Товар уже в избранном («Добавлено в избранное») — тёмная заливка, сердце ФИОЛЕТОВОЕ (--rd-accent).
   !important + fill на path — чтобы перебить возможные тёмные/розовые правила темы для .chois/.favor. */
#productPage a.rd-card__fav.chois,
#productPage a.rd-card__fav.active { background: #2c2c2c; }
#productPage a.rd-card__fav.chois svg,
#productPage a.rd-card__fav.chois svg path { color: var(--rd-accent) !important; fill: var(--rd-accent) !important; }
#productPage a.rd-card__fav.chois:hover { background: #383838; }

/* Юр. примечание */
#productPage .rd-card__note {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 620px;
}
#productPage .rd-card__note svg { flex: 0 0 auto; width: 36px; height: 36px; }
#productPage .rd-card__note p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255,255,255,.5);
}

/* ------------------------------------------------------------------ */
/* В НАЛИЧИИ В МАГАЗИНАХ (список точек слева + Яндекс-карта справа)      */
/* ------------------------------------------------------------------ */
#productPage .rd-card__stores { margin-top: 64px; }
/* Заголовки секций карточки = H2 (TT_Travels 900, upper) */
#productPage .rd-card__stores-title,
#productPage .rd-card__similar > .rd-section-title {
	font-family: var(--rd-font-head);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: .3px;
	color: var(--rd-white);
	margin: 0 0 28px;
}
#productPage .rd-stores__empty {
	background: var(--rd-dark);
	border-radius: 16px;
	padding: 28px 24px;
	color: rgba(255,255,255,.6);
	font-size: 16px;
}
#productPage .rd-stores {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}
/* Левая колонка: [ползунок слева] + [подложка #212121 с карточками] */
#productPage .rd-stores__col {
	display: flex;
	gap: 14px;
	min-width: 0;
	align-items: stretch;
}
/* Кастомный ползунок СЛЕВА, снаружи подложки. Скрыт, пока нет прокрутки. */
#productPage .rd-stores__bar {
	flex: 0 0 6px;
	align-self: stretch;
	position: relative;
	border-radius: 6px;
	/* background: rgba(255,255,255,.07);   /* дорожка */
	display: none;
}
#productPage .rd-stores__bar.is-scrollable { display: block; }
#productPage .rd-stores__thumb {
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 60px;
	border-radius: 6px;
	background: var(--rd-accent);
	cursor: pointer;
	will-change: transform;
}
/* Подложка #212121 (как везде по дизайну) */
#productPage .rd-stores__pad {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--rd-dark);   /* #212121 */
	border-radius: 20px;
	padding: 16px;
	box-sizing: border-box;
}
/* Список точек — карточки #151515, прокрутка (нативный скролл скрыт, ползунок слева) */
#productPage .rd-stores__list {
	min-width: 0;
	max-height: 520px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scrollbar-width: none;          /* Firefox */
}
#productPage .rd-stores__list::-webkit-scrollbar { width: 0; height: 0; }   /* WebKit — прячем нативный */
#productPage .rd-stores__item {
	background: var(--rd-bg);        /* #151515 — карточка; подложка вокруг #212121 */
	border-radius: 16px;
	padding: 20px 22px;
	cursor: pointer;
	transition: background .15s;
}
#productPage .rd-stores__item:hover { background: #1d1d1d; }
#productPage .rd-stores__addr {
	color: var(--rd-white);
	font-size: 17px;
	font-weight: 600;
}
/* Часы работы — под адресом, серым, мелким */
#productPage .rd-stores__hours {
	margin: 6px 0 0;
	color: rgba(255,255,255,.5);
	font-size: 14px;
}
/* Строка: TG-иконка (отдельная ссылка, из свойства TELEGRAM) + телефон (отдельная ссылка tel:) */
#productPage .rd-stores__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
}
#productPage .rd-stores__tgbtn {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--rd-accent);
	transition: opacity .15s;
}
#productPage .rd-stores__tgbtn:hover { opacity: .75; }
#productPage .rd-stores__phone {
	color: var(--rd-white);
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#productPage .rd-stores__phone:hover { color: var(--rd-accent); }
/* Карта */
#productPage .rd-stores__map { min-height: 520px; }
#productPage .rd-stores__map #map {
	width: 100%;
	height: 100%;
	min-height: 520px;
	border-radius: 16px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* ПОХОЖИЕ ТОВАРЫ (карусель .rd-pcard; fallback — сетка)                */
/* ------------------------------------------------------------------ */
#productPage .rd-card__similar { margin-top: 64px; }
#productPage .rd-similar:not(.slick-initialized) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
#productPage .rd-similar:not(.slick-initialized) .rd-pcard:nth-child(n+5) { display: none; } /* до инициализации показываем 1 ряд */
#productPage .rd-similar .slick-list { margin: 0 -10px; }
#productPage .rd-similar.slick-initialized .rd-pcard { margin: 0 10px; height: auto; }
/* Равная высота карточек: flex-трек растягивает слайды до самого высокого,
   цена/кнопки прижаты к низу (.rd-pcard__bottom{margin-top:auto}) → выровнены */
#productPage .rd-similar.slick-initialized .slick-track { display: flex; }
#productPage .rd-similar.slick-initialized .slick-track .slick-slide { height: auto; }
/* Стрелки карусели — фиол. кружки НАД каруселью справа (в строке заголовка),
   чтобы не перекрывали карточки. На десктопе/планшете; на моб. отключены (slick arrows:false). */
#productPage .rd-similar.slick-initialized { position: relative; }
#productPage .rd-card__similar .slick-arrow {
	position: absolute; top: -64px; transform: none;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--rd-accent); border: none; cursor: pointer;
	font-size: 0; color: transparent; z-index: 3;
}
#productPage .rd-card__similar .slick-prev { left: auto; right: 54px; }
#productPage .rd-card__similar .slick-next { right: 0; left: auto; }
#productPage .rd-card__similar .slick-arrow::before {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 9px; height: 9px; /*border-left: 2px solid #fff; border-bottom: 2px solid #fff;*/
}
#productPage .rd-card__similar .slick-prev::before { transform: translate(-30%, -50%) rotate(45deg); }
#productPage .rd-card__similar .slick-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
#productPage .rd-card__similar .slick-arrow.slick-disabled { opacity: .35; cursor: default; }

/* ------------------------------------------------------------------ */
/* АДАПТИВ                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 1100px) {
	/* --- ПОРЯДОК НА МОБИЛЬНОЙ/ПЛАНШЕТНОЙ: название → цена → фото → остальное.
	   Галерею физически переносим внутрь .rd-card__info после .rd-card__price
	   небольшим скриптом в template.php (display:contents на iOS отрабатывает
	   ненадёжно — фото уезжало вниз). Здесь — раскладка одной колонкой. --- */
	#productPage .rd-card__top,
	#productPage .rd-card__top.pfBlock { display: flex; flex-direction: column; gap: 16px; }
	/* Убираем тёмную подложку старой темы (.pfBlockInfo bg #262626/border #303030 и любые
	   обёртки) — на мобильной текст/фото идут прямо на фоне страницы, как в макете.
	   Бельё-фон оставляет только сама галерея (.rd-card__gallery — белая плитка). */
	#productPage .rd-card__top,
	#productPage .rd-card__top.pfBlock,
	#productPage .prodBlock,
	#productPage .pfBlock,
	#productPage .pfBlockInfo,
	#productPage .rd-card__info,
	#productPage .pfBlockInfo.rd-card__info {
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	/* Галерея, перенесённая внутрь info (flex-колонка с align-items:flex-start) — на всю ширину */
	#productPage .rd-card__info > .rd-card__gallery { width: 100%; align-self: stretch; order: 0; }

	#productPage .rd-card__gallery,
	#productPage .pfBlockImages.rd-card__gallery { min-height: 300px; padding: 22px; }
	#productPage .rd-card__gallery img,
	#productPage .rd-card__gallery .pfOneImage > img,
	#productPage .rd-card__gallery .pfSlideItem > img { min-height: 0; max-height: 340px; }
	#productPage .rd-card__title { font-size: 34px; }
	#productPage .rd-card__rating { position: static; align-self: flex-end; }

	/* --- БЛОК НАЛИЧИЯ: сначала карта, затем адреса горизонтальной каруселью --- */
	#productPage .rd-stores {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	#productPage .rd-stores__map { order: 1; }
	#productPage .rd-stores__col { order: 2; display: block; }   /* обёртка с адресами — после карты */
	#productPage .rd-stores__bar { display: none !important; }   /* ползунок — только на десктопе */
	#productPage .rd-stores__pad { padding: 14px; }              /* подложка #212121 остаётся и на моб. */
	#productPage .rd-stores__list {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding: 2px 0 10px;
		-webkit-overflow-scrolling: touch;
	}
	#productPage .rd-stores__item {
		flex: 0 0 66%;        /* следующий адрес заметно «выглядывает» справа (~34%) — видно, что листается */
		scroll-snap-align: start;
	}
	#productPage .rd-stores__map, #productPage .rd-stores__map #map { min-height: 360px; }

	#productPage .rd-similar:not(.slick-initialized) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#productPage .rd-similar:not(.slick-initialized) .rd-pcard:nth-child(n+4) { display: none; }
}
@media (max-width: 900px) {
	/* Похожие на моб.: стрелки убраны (и slick их не создаёт — arrows:false) */
	#productPage .rd-card__similar .slick-arrow { display: none !important; }
}
@media (max-width: 768px) {
	#productPage .rd-similar:not(.slick-initialized) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#productPage .rd-similar:not(.slick-initialized) .rd-pcard:nth-child(n+3) { display: none; }
	/* Заголовки карточки на моб. = 32 (как H2 на главной): название товара,
	   «В наличии в магазинах», «Похожие товары» */
	#productPage .rd-card__title,
	#productPage .rd-card__stores-title,
	#productPage .rd-card__similar > .rd-section-title { font-size: 28px; }
}
@media (max-width: 600px) {
	#productPage .rd-card__gallery { min-height: 260px; padding: 20px; border-radius: 18px; }
	#productPage .rd-card__title { font-size: 32px; }
	#productPage .rd-card__price { font-size: 24px; }   /* моб. */
	/* Стикер NEW на моб. — меньше на ~40% (54→32) */
	#productPage .rd-card__gallery .fitchs__item-new { width: 32px; height: 32px; font-size: 10px; }
	#productPage a.rd-card__fav { width: 100%; justify-content: center; }
	#productPage .rd-card__stores { margin-top: 44px; }
	/* Похожие (variableWidth): фикс. ширина слайда → следующая карточка видна справа ~18% */
	#productPage .rd-similar.slick-initialized .rd-pcard { width: 82vw; max-width: 340px; }
}