/** Shopify CDN: Minification failed

Line 366:42 Expected ":"

**/
/* ИЗМЕНЕНИЕ: Импортируем шрифт Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Стили для секции панорамы 
  assets/new-product-section.css
*/

/* ... (стили .panorama-section-wrapper, .panorama-fullscreen и т.д. остаются без изменений) ... */

.panorama-section-wrapper {
	position: relative;
	height: 100vh; 
	width: 100vw;
	margin: 0;
	padding: 0;
	overflow: hidden; 
}

.panorama-fullscreen {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1; 
}

.panorama-fullscreen__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.side-panel {
	position: absolute;
	top: 0;
	width: 50vw; 
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.9); 
	z-index: 2; 
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	-ms-overflow-style: none;
	scrollbar-width: none;
	pointer-events: auto;

	-webkit-user-select: none; /* Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* IE 10+ / Edge */
	user-select: none;     
}

.side-panel::-webkit-scrollbar {
  display: none;
}

/* 2. "Включаем" события ТОЛЬКО для этих конкретных дочерних элементов */
/* .side-panel > .product-form-wrapper {
  pointer-events: auto;
} */

.panorama-placeholder {
	width: 100%;
	height: 100%;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-family: sans-serif;
}

@media (max-width: 768px) {
	.side-panel {
		width: 100vw; 
	}
}

/* ==============================================
  Стили для хедера
  ==============================================
*/

.product-header {
	width: 100%;
	box-sizing: border-box;
    margin-top: 40px
}
  
.main-info {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 20px 30px;
	
	font-family: 'Inter', sans-serif;
}

.model-info-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
    margin-top: auto;
}

.company-name {
	font-size: clamp(0.625rem, 0.833vw, 0.875rem);
    margin-bottom: -7px;
	color: #5D5D5D;
	font-weight: 600;
}

.model-name {
	font-size: clamp(1.75rem, 3.889vw, 4.5rem);
	font-weight: 600;
	margin: 0;
	
	background-image: linear-gradient(to bottom, var(--color-top), var(--color-bottom));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	
	word-break: break-word;
	line-height: 1.1;
}

.price-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0; 
	margin-left: 15px;
    margin-top: auto;
}

/* ИЗМЕНЕНИЕ: Удалил коричневый фон с 'iva-note' */
.iva-note {
	font-size: clamp(0.625rem, 0.833vw, 0.875rem);
	margin-bottom: -7px;
	font-family: 'Inter', sans-serif;
}

.price {
	display: inline-block; 

	/* font-size: 1.75rem; */ /* Используем clamp() */
	font-size: clamp(1rem, 1.389vw, 1.75rem); /* 16px -> 20px -> 28px */
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0;

	background-image: linear-gradient(to left, #5D5D5D 75%, #3A3A3A 100%);
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
	.iva-note {
		margin-bottom: -7px;
	}

	.company-name {
		font-size: clamp(0.625rem, 1.233vw, 1.375rem);
		margin-bottom: -4px;
	}

	.model-name {
		font-size: clamp(1.75rem, 5.889vw, 7.5rem);
	}
	.price {
		font-size: clamp(1rem, 3.389vw, 4.75rem); /* 16px -> 20px -> 28px */
	}
}

/* ==============================================
	Стили для Формы Продукта (v16 - БЕЗ !important)
	==============================================
*/

/* Обертка для отступов */
.product-form-wrapper {
    padding: 20px 30px;
    font-family: 'Inter', sans-serif;
    /* margin-bottom: 20px; */
}

/* РОДИТЕЛЬ: Наш <form>
  (Grid-структура с адаптивными колонками)
*/
.product-form-wrapper .new-form-container {
    display: grid; 
    grid-template-columns: 1fr auto;
    justify-content: flex-start;
    align-items: stretch; /* Растягивает все дочерние элементы на одинаковую высоту */
    gap: 10px;
}

.new-form-container .product-form__submit__div {
	grid-column: 1 / 3;
}

/* .product-form-wrapper .new-form-container .product-variant-picker {
	grid-column: 1 / -1;
} */

/* ДЕТИ: Наши 3 блока
  (Taglia, Quantità, и Кнопка)
*/
.product-form-wrapper .new-form-container > .new-form-block {
    width: auto; 
    margin: 0;
    background-color: var(--product-bg-color);
    border-radius: 15px;
    padding: 15px 20px;
    border: none;
    
    /* Flex для выравнивания внутреннего контента */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Контент прижимается к низу блока */
}


/* ==============================================
	Стилизация ВНУТРЕННИХ элементов
	==============================================
*/

/* Лейблы "Taglia", "Quantità" */
.product-form-wrapper .new-form-block .form__label {
	font-size: clamp(0.875rem, 1.111vw, 1.75rem);
	color: #5D5D5D;
	font-weight: 600;
	display: block; 
	margin: auto;
	margin-bottom: 5px;
}

.product-variant-picker__label {
	margin-left: 0;
}

@media (max-width: 768px) {
	.product-form-wrapper .new-form-block .form__label {
		font-size: clamp(0.875rem, 2.111vw, 3.75rem);
	}
}

/* Контейнер для "1 tazza", "3 tazze" */
.product-form-wrapper .product-form__variants {
	display: flex;
	gap: 10px;
	justify-content: center;
	/* align-items: center; */
	border: 0 !important;
	white-space: nowrap;
	letter-spacing: -0.2px;
	font-weight: 600;
	color:rgb(118, 118, 118);
}

.product-variant-option {
	border-radius: 15px !important;
	border: 0 !important;
}

.product-variant-picker {
	display: grid;
  	grid-template-columns: 1fr;
}

/* .product-form__variants {
	margin: auto;
} */

/* Прячем настоящие радио-кнопки */
.product-form-wrapper .new-form-block input[type="radio"] {
	display: none; 
}

/* НЕВЫБРАННАЯ "таблетка" ("3 tazze") */
.product-form-wrapper .new-form-block .product-variant-option {
	display: block;
	padding: 10px 25px;
	background-color: rgba(255, 255, 255, 0.6); /* <--- Белый фон */
	flex-grow: 1; /* <--- ДОБАВЬТЕ ЭТО */
	text-align: center; /* <--- ДОБАВЬТЕ ЭТО (для центрирования текста) */
	border: 1px solid #dcdcdc;
	border-radius: 15px; 
	cursor: pointer;
	font-size: clamp(0.875rem, 1.111vw, 1.25rem); /* 14-16px */
	color: #333;
}

@media (max-width: 768px) {
	.product-form-wrapper .new-form-block .product-variant-option {
		font-size: clamp(0.875rem, 2.111vw, 3.25rem);
	}
}

/* ВЫБРАННАЯ "таблетка" ("1 tazza") */
.product-form-wrapper .new-form-block input[type="radio"]:checked + .product-variant-option {
	background-color: var(--product-bg-color);
	border-color: transparent;
}

.product-form-wrapper .new-form-block input[type="radio"]:hover + .product-variant-option {
	background-color: var(--product-bg-color);
	border-color: transparent;
}

/* --- Стили для КОЛИЧЕСТВА ("Quantità") --- */

/* Контейнер "- 1 +" */
.product-form-wrapper .quantity {
	display: flex;
	border: none;
	/* background: transparent;  */
	overflow: hidden; 
	border-radius: 15px;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.6);
}

.form__label .product-quantity-picker__label {
	margin-bottom: 15px;
}

/* Поле с цифрой "1" */
.product-form-wrapper .quantity__input {
  background-color: var(--product-bg-color);
  border-radius: 10px; /* Скругление */
  
  width: 40px;
  text-align: center;
  border: none;
  padding: 10px 0;
  font-size: 1.6rem;
  font-weight: 600;

  color: #333;
  -moz-appearance: textfield;
}
.product-form-wrapper .quantity__input::-webkit-outer-spin-button,
.product-form-wrapper .quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Кнопки "+" и "-" */
.product-form-wrapper .quantity__button {
	background-color: transparent;
	border-radius: 10px; Скругление
	border: none;
	padding: 0 15px;
	cursor: pointer;
	font-size: 1.8rem;
	color: #5D5D5D;
}
.product-form-wrapper .quantity__button:hover {
	background-color: var(--product-bg-color);
}

/* .quantity__button {
	background-color: var(--product-bg-color) !important;
} */

/* .quantity {
	border: none;
	background-color: var(--product-bg-color);
} */

/* --- Стили для Кнопки "В корзину" --- */

.product-form-wrapper .product-form__submit {
	/* Фон, отступы и скругление уже есть от .new-form-block */
	width: 100%; 
	font-size: 24px;
	font-weight: 700;
	
    background-image: linear-gradient(to left, #5D5D5D 75%, #3A3A3A 100%);
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    border: 0px;

	cursor: pointer;
	text-align: center;
	line-height: 1.5; 

	margin: auto;
}


.product-form__submit__div:hover {
	background-color: var(--product-bg-color-hover) !important;
}

/* ============================================== 
   Недоступные варианты (просто перечёркнутые)
   ==============================================
*/

.product-form-wrapper .product-variant-option.variant-sold-out {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

.product-form-wrapper input[type="radio"]:disabled + .product-variant-option {
    pointer-events: none;
}

/* ============================================== 
   Заблокированная кнопка добавления в корзину
   ==============================================
*/

.product-form-wrapper .product-form__submit:disabled,
.product-form-wrapper .product-form__submit.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc;
}

.product-form-wrapper .button-text-unavailable {
    color: #666;
}

/* ============================================== */
/* ==          Стили для wall of text          == */
/* ============================================== */

.description-block {
	margin: 0 35px;
	font-weight: 600;
	font-size: 16px;

	/* background-image: linear-gradient(to bottom, #5D5D5D 75%, #3A3A3A 100%);
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; */

	letter-spacing: -0.2px;
    /* line-height: 0.9; */
}

.description-block strong {
  font-weight: bold !important;
}

.description-block em {
  font-style: italic !important;
}

/* Опционально: для комбинированного стиля */
.description-block strong em,
.description-block em strong {
  font-weight: bold !important;
  font-style: italic !important;
}

/* ============================================== */
/* == Стили для аккордеона с информацией == */
/* ============================================== */

/* Главный контейнер для всех 4-х блоков.
  Задает отступ сверху и расстояние между блоками.
*/
.product-info-accordion-group {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Расстояние между блоками */
  margin: 25px 50px;
}

/* Это <summary> - кликабельный заголовок.
  Стилизуем его, чтобы он выглядел как на вашем скриншоте.
*/
.product-info-accordion__title {
  display: flex; /* Для выравнивания иконки и текста */
  align-items: center;
  gap: 12px; /* Расстояние между иконкой и текстом */
  
  width: 100%;
  padding: 10px 20px; /* Внутренние отступы */
  border-radius: 15px; /* Скругление углов */
  
  /* === ИСПОЛЬЗУЕМ ВАШИ ПЕРЕМЕННЫЕ === */
  background-color: var(--product-bg-color-minor);
  /* =================================== */
  
  font-size: 16px; /* Можете изменить */
  font-weight: 600;
  color: rgb(80, 80, 80);
  
  cursor: pointer;
  list-style: none; /* Убираем стандартный маркер/стрелку (для Firefox) */
  
  /* Плавный переход для фона и скругления */
  transition: background-color 0.2s ease, border-radius 0.2s ease;
}

/* Убираем стандартную стрелку (для Chrome, Safari) */
.product-info-accordion__title::-webkit-details-marker {
  display: none;
}

/* === ВАШ ЦВЕТ ПРИ НАВЕДЕНИИ === */
.product-info-accordion__title:hover {
  background-color: var(--product-bg-color);
}
/* ================================ */


/* Стили для SVG-иконок внутри заголовка 
*/
.product-info-accordion__title svg {
  flex-shrink: 0; /* Чтобы иконка не сжималась */
  width: 24px;
  height: 24px;
  /* Задаем цвет иконке. 
    Лучше всего, если у SVG цвет fill/stroke задан как 'currentColor',
    тогда он унаследует цвет текста.
    Либо можно задать его здесь:
  */
  color: #333; 
}

/* Стили для контента (<div>), который раскрывается 
*/
.product-info-accordion__content {
  padding: 20px;
  
  /* Задаем тот же фон, что и у "активного" заголовка,
    чтобы они выглядели как единый блок.
  */
  background-color: var(--product-bg-color); 
  
  /* Скругляем только нижние углы */
  border-radius: 0 0 12px 12px; 
  
  /* Стили для текста внутри */
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* Стили, которые применяются, когда аккордеон ОТКРЫТ 
  (т.е. к тегу <details open>)
*/
.product-info-accordion[open] > .product-info-accordion__title {
  /* Используем "активный" цвет (как при наведении)
  */
  background-color: var(--product-bg-color);
  
  /* Убираем скругление нижних углов, 
    чтобы заголовок "слился" с блоком контента.
  */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}