.container {
	max-width:1600px !important;
}

.theme__button,
.product-page__choose-link {
	border-radius:10px;
}

.product-page__name {
	font-size:28px;
}

.product-page__price-title {
	font-size: 18px;
	color:#000;
	font-weight:400;
	padding-right:6px;
}

div.product-page__add-info {
	padding:0;
}

.product-page__specifications {
	margin-bottom:0;
}

.product-page__quiz-button {
	max-width:300px;
	border-radius: 10px;
}

.product-page__quiz-text {
	/*font-size: 13px;*/
	color: #48545a;
	margin-top: 8px;
}

.product-page__features {
	display: flex;
    padding: 20px 0px;
    gap: 20px;
    flex-direction: column;	
}

.product-page__features li {
	display: flex;
	gap: 8px;
	/*color: #0f766e;*/
}

.slick-vertical img {
	width:130px !important;
	border-radius:10px;
	border:1px solid #f1f1f1 !important;
	margin-bottom:10px;
}

.slick-vertical .slick-current {
	border:1px solid #d3d3d3 !important;
}

@media (max-width:768px) {
	.product-page__nav-slider .slick-track {
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		height:auto !important;
	}
	
	.product-page__nav-slider .slick-track img {
		flex:1;
		height:130px;
	}
	
	div.product-page__gallery {
		flex-direction: column-reverse;
	}
	
	div.product-page__nav-slider,
	div.product-page__main-slider{
		width:100% !important;
	}

	.slick-list {
		height:auto !important;
	}

	.side-panel-content {
		flex-direction: column;
	}

	.lens-quiz__left,
	.lens-quiz__right {
		width:100% !important;
	}

	.lens-quiz__left {
		height:160px;
		padding: 14px 18px 0;
		box-sizing: border-box;
	}

	.lens-quiz__left img {
		max-height: 140px;
		width: 100%;
		object-fit: contain;
	}
	
}

/*
===================================
Боковая панель (КВИЗ)
===================================
*/

.cart-item__name .variation {
	display:block !important;
}

.side-panel {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	max-width: 100%;
	height: 100vh;
	background: #fff;
	z-index: 9999;
	transition: right 0.3s ease;
}

.side-panel.is-open {
	right: 0;
}

/*
===================================
Правка слайдера товара
===================================
ПК: оставляем миниатюры слева, но добавляем счетчик фото.
Мобила: скрываем сетку миниатюр под фото, чтобы быстрее показать название, цену и кнопки.
*/

.product-page__main-slider {
	position: relative;
}

.os-product-gallery-counter {
	position: absolute;
	left: 50%;
	top: 14px;
	bottom: auto;
	transform: translateX(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid #e1e4e8;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #1c1c1c;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	pointer-events: none;
}

.os-product-gallery-arrow {
	position: absolute;
	top: 50%;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid #e1e4e8;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1c1c1c;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transform: translateY(-50%);
}

.os-product-gallery-arrow--prev {
	left: 14px;
}

.os-product-gallery-arrow--next {
	right: 14px;
}

@media screen and (max-width: 768px) {
	div.product-page__gallery {
		/* Оставляем старую рабочую механику: главное фото сверху, миниатюры под ним. */
		flex-direction: column-reverse !important;
	}

	div.product-page__nav-slider {
		display: none !important;
		width: 100% !important;
	}

	div.product-page__main-slider {
		width: 100% !important;
	}

	.product-page__main-slider .slick-track {
		height: calc(100vw - 40px) !important;
	}

	.product-page__main-slider img {
		object-fit: cover;
	}

	.os-product-gallery-counter {
		top: 12px;
		min-width: 54px;
		height: 32px;
		font-size: 13px;
	}

	.os-product-gallery-arrow {
		width: 34px;
		height: 34px;
		font-size: 26px;
	}

	.os-product-gallery-arrow--prev {
		left: 10px;
	}

	.os-product-gallery-arrow--next {
		right: 10px;
	}
}

.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
	z-index: 9998;
}

.overlay.is-active {
	opacity: 1;
	pointer-events: auto;
}

.side-panel-content {
	display: flex;
	height: 100vh;
}

.lens-quiz__left {
	width: 60%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lens-quiz__left img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lens-quiz__right {
	width: 40%;
	padding: 40px;
	overflow-y: auto;
}

#lens-quiz,
#lens-quiz button {
	color: #111;
}

#scenario-list button,
#no-recipe-lens-list button,
#recipe-lens-list button,
#thickness-list button {
	/*display: block;*/
	display:flex;
	justify-content:space-between;
	align-items:center;
	width: 100%;
	min-height:100px;
	font-size:18px;
	margin-bottom: 12px;
	padding: 16px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	text-align: left;
	border-radius:10px;
}

#photochrom-list button {
	display: block;
	width: 100%;
	margin-bottom: 12px;
	padding: 16px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	text-align: left;
	border-radius:10px;
}

.quiz-option__price {
	font-weight:700;
}

.quiz-option__content .quiz-option__title {
	text-transform:uppercase;
	font-weight:500;
	padding-bottom:15px;
}



.quiz-header{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}

.quiz-nav{
	width:40px;height:40px;
	border:1px solid #ddd;
	border-radius:999px;
	background:#fff;
	font-size:22px;
	line-height:1;
	cursor:pointer;
}

.quiz-progress{
	flex:1;
	height:6px;
	background:#e9e9e9;
	border-radius:999px;
	overflow:hidden;
}

.quiz-progress__bar{
	height:100%;
	width:0%;
	background:#0f4c86;
	transition: width .2s ease;
}

.quiz-header-total{
  min-width: 118px;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.quiz-summary{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:12px;
	margin:12px 0 18px;
}

#rx_sph_os,
#rx_cyl_os,
#rx_axis_os,
#rx_sph_od,
#rx_cyl_od,
#rx_axis_od {
	padding:10px 15px;
	border-radius:10px;
}

#rx_pd {
	padding: 10px 15px;
	border-radius: 10px;
	border: 1px solid #d3d3d3;
}

/* =========================
   LENS QUIZ — option layout
   (price pinned to the right)
========================= */

#lens-quiz .quiz-option{
  display: grid;                    /* вместо flex */
  grid-template-columns: 1fr auto;  /* слева текст, справа цена */
  gap: 12px;
  align-items: start;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#lens-quiz .quiz-option:focus-visible,
#lens-quiz .quiz-option.is-selected{
  border-color:#0f4c86;
  box-shadow:0 0 0 1px #0f4c86 inset;
}

@media (hover:hover) and (pointer:fine){
  #lens-quiz .quiz-option:hover{
    border-color:#0f4c86;
    box-shadow:0 0 0 1px #0f4c86 inset;
  }
}

#lens-quiz .quiz-option__content{
  min-width: 0;                     /* важно: иначе длинные слова могут ломать сетку */
}

#lens-quiz .quiz-option__price{
  width: 72px;                      /* можно 64–90, подбери визуально */
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.1;
}

/* Чуть лучше типографика внутри карточки */
#lens-quiz .quiz-option__title{
  display: block;
  margin: 0 0 6px;
  text-transform: uppercase;
  font-weight: 600;
}

#lens-quiz .quiz-option__desc{
  --quiz-desc-line-height: 18px;
  margin: 0;
  font-size: 14px;
  line-height: var(--quiz-desc-line-height);
  color: #48545a;
}

#lens-quiz .quiz-option__desc-text{
  display:block;
  min-height:calc(var(--quiz-desc-line-height) * 2);
  max-height:calc(var(--quiz-desc-line-height) * 2);
  overflow:hidden;
}

#lens-quiz .quiz-option__desc.is-expanded .quiz-option__desc-text{
  display:block;
  min-height:0;
  max-height:none;
  overflow:visible;
}

#lens-quiz .quiz-option__more{
  display:block;
  margin:5px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:#0f4c86;
  font:inherit;
  font-weight:700;
  line-height:inherit;
  cursor:pointer;
  white-space:nowrap;
}

#lens-quiz .quiz-option__more:hover,
#lens-quiz .quiz-option__more:focus-visible{
  text-decoration:underline;
}


/* =========================
   LENS QUIZ — SCENARIO buttons (make text not pale)
========================= */
#lens-quiz #scenario-list button{
  color:#111;              /* убрать блеклость */
  font-weight:600;         /* как заголовок */
  font-size:18px;
  line-height:1.25;
  letter-spacing:0;
}

/* На мобиле можно чуть меньше */
@media (max-width:768px){
  #lens-quiz #scenario-list button{
    font-size:16px;
  }

  .lens-quiz__right{
    padding: 24px 18px 28px;
  }

  .quiz-header{
    gap: 8px;
    margin-bottom: 14px;
  }

  .quiz-nav{
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .quiz-header-total{
    min-width: 104px;
    font-size: 13px;
  }

  #lens-quiz .quiz-option{
    min-height: 0;
    padding: 14px;
  }

  #lens-quiz .quiz-option__title{
    font-size: 16px;
    line-height: 1.25;
  }

  #lens-quiz .quiz-option__desc{
    --quiz-desc-line-height: 17px;
    font-size: 13px;
  }
}


/* =========================
   LENS QUIZ — RECIPE UPLOAD (новый стиль рецепта добавки )
========================= */

/* 1) Радио-выбор как карточки */
#lens-quiz [data-step="recipe-upload"] > label{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;

  width:100%;
  min-height:70px;

  margin:0 0 12px 0;
  padding:16px;

  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  box-sizing:border-box;
}

/* убрать <br> разрывы на этом шаге */
#lens-quiz [data-step="recipe-upload"] br{ display:none; }

/* радио аккуратно */
#lens-quiz [data-step="recipe-upload"] input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
}

/* подсветка выбранного варианта */
#lens-quiz [data-step="recipe-upload"] label:has(input[type="radio"]:checked){
  border-color:#000;
}

/* 2) Блок загрузки файла — тоже в стиле карточки */
#recipe-file-block{
  margin: 8px 0 0;
}

#recipe-file{
  width:100%;
  min-height:56px;
  padding:14px 16px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  box-sizing:border-box;
}

/* 3) Ручной ввод: убрать инлайновую “кашу” и сделать аккуратно */
#recipe-manual-block{
  margin-top: 14px;
  padding:16px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
}

/* заголовки OD/OS/PD в одном стиле */
#recipe-manual-block h3{
  margin:16px 0 10px !important;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
}

/* строки OD/OS */
#recipe-manual-block .rx-row{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap;
}

/* подписи и поля */
#recipe-manual-block label{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  min-width:120px;
}

#recipe-manual-block select,
#recipe-manual-block input{
  height:44px;
  border:1px solid #ddd;
  border-radius:10px;
  padding:0 12px;
  box-sizing:border-box;
  background:#fff;
}

/* PD поле */
#recipe-manual-block #rx_pd{
  height:44px;
}

/* 4) Кнопка — привести к общему стилю (без гуляний) */
#recipeSubmitBtn{
  display:inline-block;
  width:100%;
  max-width:320px;
  height:50px;

  border-radius:10px !important;
  padding:0 18px !important;

  border:none !important;
  background:#0f4c86 !important;
  color:#fff !important;

  font-weight:700;
  cursor:pointer;
}

#lens-quiz #noRecipeGoToCartBtn,
#lens-quiz #goToCartBtn,
#lens-quiz #drivingContinueBtn,
#lens-quiz #recipeSubmitBtn{
  background:#0f4c86 !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
}

#lens-quiz #noRecipeGoToCartBtn:hover,
#lens-quiz #goToCartBtn:hover,
#lens-quiz #drivingContinueBtn:hover,
#lens-quiz #recipeSubmitBtn:hover{
  background:#0b3f70 !important;
  color:#fff !important;
}

/* На мобиле — кнопка во всю ширину */
@media (max-width:768px){
  #recipeSubmitBtn{
    max-width:100%;
  }
}

#lens-quiz #recipe-file{
  width:100%;
  padding:14px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
}

/*
===================================
Карточка товара — меньше воздуха на мобильной версии
===================================
Уплотняем первый экран карточки товара: меньше расстояние после шапки,
ниже блок фото и короче путь до названия, цены и основной кнопки.
Липкие кнопки и цвета CTA здесь не трогаем — это отдельная гипотеза.
*/

@media screen and (max-width: 768px) {
	.main-area:has(.product-page) {
		padding-top: 76px !important;
	}

	.product-page div.product-page__header {
		margin-bottom: 0 !important;
	}

	.product-page div.breadcrumbs {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	.product-page div.product-page__main {
		margin-bottom: 16px !important;
	}

	.product-page div.product-page__gallery {
		margin-bottom: 0 !important;
	}

	.product-page .product-page__main-slider .slick-track {
		/* Оставляем старую рабочую высоту Slick, иначе часть фото может исчезать. */
		height: calc(100vw - 40px) !important;
	}

	.product-page .product-page__main-slider img {
		display: block !important;
		object-fit: cover !important;
	}

	.product-page .os-product-gallery-counter {
		top: 8px;
	}

	.product-page div.product-page__info {
		margin-top: 0 !important;
	}

	.product-page div.product-page__name {
		margin-bottom: 12px !important;
		font-size: 20px;
		line-height: 1.18;
	}

	.product-page .product-page__features {
		padding: 10px 0 12px !important;
		gap: 10px !important;
	}

	.product-page .product-page__features li {
		line-height: 1.35;
	}

	.product-page div.product-page__price {
		margin-top: 2px !important;
		margin-bottom: 12px !important;
	}

	.product-page div.product-page__buttons {
		margin-top: 12px !important;
	}
}

/*
===================================
Карточка товара — цвет основных кнопок
===================================
Первое действие в карточке делаем синим: купить готовый товар или подобрать
линзы к оправе. Вторичные действия остаются чёрными, чтобы не спорить с главным.
*/

.product-page .product-page__buttons .product-page__add-to-cart > a.ajax_add_to_cart.add_to_cart_button.theme__button,
.product-page .product-page__buttons .product-page__add-to-cart > a.added_to_cart.wc-forward,
.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:first-child > .theme__button,
.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:first-child > .added_to_cart.wc-forward {
	background: #0f4c86 !important;
	background-color: #0f4c86 !important;
	border-color: #0f4c86 !important;
	color: #fff !important;
}

.product-page .product-page__buttons .product-page__add-to-cart > a.ajax_add_to_cart.add_to_cart_button.theme__button:hover,
.product-page .product-page__buttons .product-page__add-to-cart > a.added_to_cart.wc-forward:hover,
.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:first-child > .theme__button:hover,
.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:first-child > .added_to_cart.wc-forward:hover {
	background: #0b3f70 !important;
	background-color: #0b3f70 !important;
	border-color: #0b3f70 !important;
	color: #fff !important;
}

/* В водительских товарах WooCommerce добавляет пустую ссылку "Просмотр корзины" поверх первой кнопки.
   Делаем эту ссылку полноценной кнопкой, чтобы текст старой кнопки не просвечивал и не накладывался. */
.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:first-child > .added_to_cart.wc-forward {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 3;
	overflow: hidden;
	width: 100% !important;
	height: 50px !important;
	min-height: 50px !important;
	background: #0f4c86 !important;
	background-color: #0f4c86 !important;
	border-color: #0f4c86 !important;
	color: #fff !important;
	font-size: 0 !important;
	text-decoration: none !important;
}

.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:first-child > .added_to_cart.wc-forward::before {
	content: "ПРОСМОТР КОРЗИНЫ";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	text-transform: uppercase;
}

.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:nth-child(n+2) > .theme__button {
	background: #1c1c1c !important;
	background-color: #1c1c1c !important;
	border-color: #1c1c1c !important;
	color: #fff !important;
}

.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:nth-child(n+2) > .theme__button:hover {
	background: #000 !important;
	background-color: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

@media screen and (max-width: 900px) {
	.product-page .product-page__buttons .product-page__driving-actions .product-page__driving-action:first-child > .added_to_cart.wc-forward::before {
		font-size: 15px;
	}
}

/*
===================================
Карточка товара — мобильная шапка
===================================
На карточке товара мобильная шапка не липкая: так первый экран не съедается
верхним меню. Липкую нижнюю кнопку здесь больше не создаём.
*/

@media screen and (max-width: 768px) {
	body:has(.product-page) header.header,
	body:has(.product-page) section.pre-header {
		position: static !important;
		top: auto !important;
		width: 100% !important;
	}

	.main-area:has(.product-page) {
		padding-top: 0 !important;
	}
}