/* --- 0. Переменные и Глобальные стили --- */

:root {
  --brand-color: #ffc80a;
  --color-yellow: #ffc80a;
  --color-yellow-light: #fffbeb;
  --color-yellow-dark: #fff0c0;
  --color-green: #28a745;
  --color-green-light: rgba(40, 167, 69, 0.1);
  --color-text-dark: #0d3f4c;
  --color-text-body: #4a5568;
  --color-text-light: #718096;
  --color-text-gray: #8a8a8a;
  --color-border-new: #cfcfcf;
  --color-border-dark: #cfcfcf;
  --color-border-light: #cfcfcf;
  --color-white: #ffffff;
  --color-red: #e53e3e;
  --color-blue: #4299e1;
  --color-green-highlight: #f8ffee;
  --color-green-cross: #c0f484;
  --background-color: #f8f9fa;
  --font-family: "Roboto", sans-serif;
  --border-radius-main: 12px;
  --border-radius-small: 8px;
  --shadow-main: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.action-button {
  background-color: var(--color-green);
  color: var(--color-white);
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: var(--border-radius-small);
  padding: 15px 30px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  text-decoration: none !important;
  display: inline-block;
  text-align: center;
}

.action-button:hover {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.section-padding-wrapper {
  margin: 100px auto;
}

.main-container {
  display: flex;
  gap: 30px;
  margin-bottom: 0;
  margin: 500x auto;
}

.second-section {
  margin-top: 0 !important;
}

/* --- 1a. Product Gallery --- */

.product-gallery {
  display: flex;
  gap: 15px;
  flex: 1 1 500px;
  max-width: 550px;
  min-width: 280px;
  padding: 15px;
  border-radius: var(--border-radius-main);
  border: 1px solid var(--color-border-new);
  background-color: var(--color-white);
}

@media (min-width: 970px) {
  .product-gallery {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    align-self: flex-start;
  }
}

.thumbnails-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  flex-shrink: 0;
}

.thumb-arrow {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border-new);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 2;
  flex-shrink: 0;
}

.thumb-arrow:hover {
  background: var(--color-white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.thumb-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.thumb-arrow svg {
  width: 18px;
  color: var(--color-text-dark);
}

.thumbnails-scroller {
  flex-grow: 1;
  overflow: hidden;
  border-radius: var(--border-radius-small);
  padding: 5px 2px;
  max-height: 435px;
}

.thumbnails-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.3s ease-out;
}

.thumbnail {
  width: 75px;
  height: 100px;
  border-radius: var(--border-radius-small);
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition:
    transform 0.2s ease-out,
    border-color 0.2s ease-out;
}

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

.thumbnail:not(.active):hover {
  transform: scale(1.05);
}

.thumbnail.active {
  border-color: var(--brand-color);
  transform: scale(1.05);
}

.thumbnail .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  backdrop-filter: blur(2px);
}

.play-icon svg {
  width: 18px;
}

.video-thumbnail {
  margin-top: auto;
}

.video-count {
  font-size: 12px;
  color: var(--color-text-gray);
  text-align: center;
  flex-shrink: 0;
}

.main-image-container {
  flex-grow: 1;
  position: relative;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  background-color: var(--background-color);
  aspect-ratio: 750 / 1000;
}

.main-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

.image-is-loading {
  opacity: 0;
}

.loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.loader-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border-light);
  border-top: 4px solid var(--brand-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.main-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

.main-play-icon.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.main-play-icon svg {
  width: 40px;
  padding-left: 5px;
}

.pagination-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: none;
}

.pagination-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.pagination-dots .dot.active {
  background-color: var(--color-white);
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .product-gallery {
    flex-direction: column;
  }
  .main-image-container {
    order: -1;
  }
  .thumbnails-column {
    display: none;
  }
  .thumbnails-scroller {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .thumbnails-list {
    flex-direction: row;
  }
  .thumb-arrow {
    display: none;
  }
  .video-thumbnail {
    margin-top: 0;
    margin-left: 10px;
  }
  .video-count {
    display: none;
  }
  .pagination-dots {
    display: flex;
  }
}

/* --- 1b. Calculator Form --- */

.calculator-form {
  flex: 1 1 550px;
  min-width: 320px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.top-calc-header {
  background: var(--color-yellow);
  padding: 15px 30px;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-text-dark);
  text-align: center;
  border-radius: 12px 12px 0 0;
}

.calc-block {
  background: var(--color-yellow-light);
  border: 1px solid var(--color-border-new);
  border-radius: 0 0 12px 12px;
  padding: 26px;
  margin-bottom: 25px;
}

.calculator-form .calc-block:last-child {
  margin-bottom: 0;
}

.calc-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--color-text-dark);
  margin: 0 0 25px 0;
}

.calc-divider {
  border: none;
  border-top: 1px solid var(--color-border-new);
  margin: -10px 0 25px 0;
}

.form-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 12px;
}



.readiness-title,
.form-group label {
  flex: 1 1 180px;
  min-width: 150px;
  margin-top: 11px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-dark);
}

.form-control-wrapper {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
}

.calc-select,
.calc-input {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  font-family: var(--font-family);
  border: 1px solid var(--color-yellow);
  border-radius: var(--border-radius-small);
  background-color: var(--color-white);
  color: var(--color-text-dark);
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.calc-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234A5568'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
  padding-right: 40px;
  min-height: 45px;
  background-color: var(--color-yellow-dark);
}

.custom-inputs input {
  width: 100px;
}

/* Скрытые поля (для кастомного размера) */
.hidden {
  display: none !important;
}
.custom-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Сетка постобработки */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}
.pp-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pp-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #555;
}

/* Добавьте или замените этот блок в вашем CSS */
.order-summary-section.visible {
  opacity: 1;
  visibility: visible;
  max-height: 3000px; /* ЭТО ВАЖНО: Разрешаем блоку раскрыться */
  margin-top: 50px !important;
  margin-bottom: 50px !important;
  border: 1px solid var(--color-border-new);
  padding: 0;
  padding-bottom: unset;
  overflow: visible; /* Чтобы тени и тултипы не обрезались */
}

.calc-select:focus,
.calc-input:focus {
  outline: none;
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 3px rgba(255, 200, 10, 0.4);
}

#calc-format,
#calc-print-type,
#calc-paper-density,
#calc-lamination,
#calc-quantity-type #calc-pages-count,
#calc-quantity {
  background-color: var(--color-yellow-dark);
  border-color: var(--color-yellow);
}

.custom-size-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.custom-size-inputs .calc-input {
  width: 100px;
}

.custom-size-inputs .size-separator {
  font-size: 18px;
  color: var(--color-text-light);
}

.custom-size-inputs .size-unit {
  font-size: 15px;
  color: var(--color-text-light);
}

.quantity-input {
  margin-top: 10px;
}

.readiness-block {
  padding: 25px;
  border-radius: var(--border-radius-main);
}

.readiness-title {
  padding-bottom: 12px;
  margin-top: 0;
  line-height: 1.3 !important;
}

.readiness-option {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 15px;
  padding: 12px 12px;
  border: 1px solid var(--color-border-new);
  border-radius: var(--border-radius-small);
  margin-bottom: 10px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

.readiness-option:not(.selected):hover {
  border-color: var(--color-border-dark);
  box-shadow: var(--shadow-main);
  border-color: var(--color-yellow);
}

.readiness-option:not(.selected):active {
  transform: scale(0.99);
  box-shadow: none;
}

.readiness-option:last-child {
  margin-bottom: 0;
}

.readiness-option.selected {
  border-color: var(--color-yellow);
  background-color: var(--color-yellow);
}

.readiness-time {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.3;
}

.readiness-time-inside {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-dark);
}

.readiness-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.readiness-btn-selected,
.readiness-btn-select {
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all 0.2s;
}

.readiness-btn-selected {
  background-color: var(--color-green);
  color: var(--color-white);
}

.readiness-btn-select {
  background-color: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-dark);
}

.readiness-btn-select:hover {
  border-color: var(--color-text-dark);
}

.conditional-field {
  overflow: hidden;
  transition:
    max-height 0.4s ease-out,
    opacity 0.4s ease-out,
    margin-top 0.4s ease-out;
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  visibility: hidden;
}

.conditional-field.visible {
  max-height: 100px;
  opacity: 1;
  margin-top: 10px !important;
  visibility: visible;
}

@media (max-width: 970px) {
  .product-gallery {
    position: static;
  }
}

@media (max-width: 768px) {
  .calculator-form {
    flex-basis: 100%;
    margin-top: 30px;
  }
}

@media (max-width: 480px) {
  .calc-block {
    padding: 20px;
  }
  .calc-title {
    font-size: 24px;
  }
  .custom-size-inputs {
    flex-wrap: wrap;
  }
  .custom-size-inputs .calc-input {
    width: calc(50% - 15px);
  }
  .custom-size-inputs .size-separator {
    width: 10px;
    text-align: center;
  }

  .readiness-btn-selected,
  .readiness-btn-select {
    width: 100%;
  }
}

/* --- 2. Итог заказа (Order Summary) --- */

.order-summary-section {
  background: var(--color-white);
  border: 1px solid var(--color-border-new);
  border-radius: var(--border-radius-main);
  box-shadow: var(--shadow-main);
  overflow: hidden;
  max-width: 1270px;
  transition:
    max-height 0.7s ease-out,
    opacity 0.7s ease-out,
    margin-top 0.7s ease-out,
    border 0.7s;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.order-summary-section.visible {
  opacity: 1;
  border: 1px solid var(--color-border-new);
  overflow: hidden;
}

.summary-header {
  background: var(--color-yellow);
  padding: 15px 30px;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-text-dark);
  text-align: center;
}

.summary-content {
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 25px;
  background-color: var(--color-yellow-light);
  border-radius: 0 0 12px 12px;
}

.summary-main {
  display: flex;
  gap: 40px;
}

.summary-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 170px;
}

.catalog dl dt:after {
  display: none;
}

.product-image-schema span:first-child {
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.product-image-schema span:last-child {
  top: 50%;
  left: -9px;
  transform: translateY(-50%) rotate(-90deg);
}

.summary-btn {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--border-radius-small);
  border: 1px solid var(--color-border-dark);
  background: var(--color-white);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.summary-btn:hover {
  border-color: var(--color-text-body);
  background: var(--background-color);
}

.summary-details {
  flex-grow: 1;
  min-width: 0;
}

.summary-details h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0 0 15px 0;
}

.summary-details dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  background: none;
  margin: 0 0 20px 0;
  font-size: 16px;
  gap: 12px;
}

.summary-details dt,
.summary-details dd {
  display: inline-block;
  margin: 0;
  padding-bottom: 8px;
}

.summary-details dt {
  width: 200px;
  color: var(--color-text-light);
  vertical-align: top;
  margin-right: 20px;
  font-weight: 400;
}

.summary-details dd {
  width: calc(100% - 220px);
  color: var(--color-text-dark);
  font-weight: 500;
}

.uploaded-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.uploaded-file:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.file-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-small);
}

.file-icon.pdf {
  background-color: rgba(229, 62, 62, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E53E3E'%3E%3Cpath d='M5 2C3.89543 2 3 2.89543 3 4V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V8L15 2H5ZM5 4H14V9H19V20H5V4ZM16 4.41421L18.5858 7H16V4.41421Z' /%3E%3C/svg%3E");
}

.file-icon.link {
  background-color: rgba(66, 153, 225, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234299E1'%3E%3Cpath d='M10.567 11.543L12.446 9.664C13.011 9.099 13.96 9.099 14.525 9.664L16.333 11.472C16.898 12.037 16.898 12.986 16.333 13.551L14.454 15.43C13.889 15.995 12.94 15.995 12.375 15.43L11.556 14.611L10 16.167L11.375 17.542C12.94 19.107 15.485 19.107 17.05 17.542L18.858 15.734C20.423 14.169 20.423 11.624 18.858 10.059L17.05 8.251C15.485 6.686 12.94 6.686 11.375 8.251L9.496 10.13L10.567 11.543Z' /%3E%3C/svg%3E");
}

.file-info {
  flex-grow: 1;
  min-width: 0;
}

.file-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 13px;
  color: var(--color-text-light);
}

.file-action-btn {
  font-size: 13px;
  color: var(--color-text-gray);
  background: none;
  border: none;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.file-action-btn:hover {
  color: var(--color-text-dark);
}

.file-delete-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  flex-shrink: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23A0AEC0'%3E%3Cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 6h6v10H7V6zm2 2v6h2V8H9z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.file-delete-btn:hover {
  opacity: 1;
}

.summary-price-box {
  width: 260px;
  flex-shrink: 0;
  background: var(--color-yellow);
  border: 1px solid var(--color-yellow);
  border-radius: var(--border-radius-main);
  padding: 20px;
  text-align: center;
  height: fit-content;
}

.price-main {
  margin-bottom: 15px;
}

.price-value {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--color-text-dark);
  line-height: 1.1;
}

.price-per-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-body);
}

.btn-to-cart {
  width: 100%;
  padding: 14px;
  background: var(--color-green);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-small);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin: 12px 0;
}

.btn-to-cart:hover {
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  transform: translateY(-2px);
}

.price-footer {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.5;
}

.price-footer span {
  display: block;
}

.price-footer strong {
  font-weight: 700;
  color: var(--color-text-dark);
}

.price-footer-bonuses {
  margin-top: 12px;
  text-align: center;
}

@media (max-width: 768px) {
  .summary-content {
    display: flex;
    flex-direction: column;
  }
  .summary-price-box {
    width: 100%;
    box-sizing: border-box;
    grid-row: 1;
  }
  .summary-main {
    grid-row: 2;
    flex-direction: column;
  }
  .summary-left {
    width: 100%;
    align-items: center;
  }
  .product-image-schema {
    margin-bottom: 15px;
  }
  .summary-btn {
    max-width: 250px;
  }
  .summary-details dl dt {
    width: 100px;
  }
  .summary-details dl dd {
    width: 100%;
    line-height: 1.3;
  }
  .file-action-btn {
    display: none;
  }
}

@media (max-width: 480px) {
  .summary-content {
    padding: 20px;
    border: 1px solid #cfcfcf;
    border-top: none;
  }
}

@media (min-width: 769px) {
  .summary-price-box-wrap {
    position: sticky;
    top: 20px;
    height: fit-content;
  }
}

/* --- 3. Карусели (Product & Gallery) --- */

.carousel-container {
  position: relative;
  padding: 0;
  text-align: left;
}

.carousel-viewport {
  overflow: hidden;
  padding: 20px 0;
}

.carousel-track {
  display: flex;
  gap: 22px;
  transition: transform 0.4s ease-out;
}

.carousel-arrow {
  position: absolute;
  bottom: -70px;
  transform: translateY(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-border-new);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.carousel-arrow:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%) scale(1.05);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}

.carousel-arrow svg {
  width: 20px;
  color: var(--color-text-dark);
}

.carousel-arrow.prev {
  right: 60px;
}

.carousel-arrow.next {
  right: 0px;
}

.product-carousel-section h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 40px;
}

.product-carousel-section .carousel-container {
  position: relative;
  padding: 0;
  text-align: left;
}

.product-carousel-section .carousel-viewport {
  overflow: hidden;
}

.product-card {
  display: block;
  text-decoration: none !important;
  border-radius: var(--border-radius-main);
  border: 1px solid var(--color-border-new);
  background: var(--color-white);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  flex-basis: calc(33.333% - 15px);
  flex-shrink: 0;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.product-card img {
  width: 100%;
  height: 200px;
  aspect-ratio: 1 / 0.75;
  object-fit: cover;
  display: block;
  background-color: var(--color-border-light);
}

.product-card span {
  display: block;
  padding: 15px;
  font-weight: 600;
  color: var(--color-text-dark);
  text-align: center;
  font-size: 16px;
}

.gallery-carousel-section {
  max-width: 1310px;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
}

.gallery-carousel-section h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 15px;
}

.gallery-carousel-section p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-light);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.carousel-track > .product-gallery {
  flex-basis: calc(50% - 11px);
  flex-shrink: 0;
  max-width: none;
}

@media (max-width: 1100px) {
  .product-card {
    flex-basis: calc(33.333% - 14px);
  }
}

@media (max-width: 900px) {
  .carousel-track > .product-gallery {
    flex-basis: 100%;
  }
}

@media (max-width: 768px) {
  .carousel-container {
    padding: 0;
  }
  .carousel-arrow {
    top: 40%;
  }
  .carousel-arrow.prev {
    left: 10px;
  }
  .carousel-arrow.next {
    right: 10px;
  }
  .product-card {
    flex-basis: calc(50% - 10px);
  }
  .product-carousel-section .carousel-container {
    padding: 0;
  }
  .product-carousel-section .carousel-arrow {
    top: 35%;
  }
  .product-carousel-section .carousel-arrow.prev {
    left: 10px;
  }
  .product-carousel-section .carousel-arrow.next {
    right: 10px;
  }
}

@media (max-width: 480px) {
  .product-card {
    flex-basis: 70%;
  }
  .product-carousel-section .carousel-track {
    padding: 0 15px;
  }
}

/* --- 4. Секция с видео (Video Section) --- */

.video-section {
  max-width: 1270px;
  padding: 30px;
  background-color: var(--background-color);
  border: 1px solid var(--color-border-new);
  border-radius: 16px;
  box-sizing: border-box;
}

.video-content-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
}

.video-player-block {
  flex: 1 1 55%;
  position: relative;
  border-radius: var(--border-radius-main);
  overflow: hidden;
  background-color: #000;
}

.video-iframe-wrapper {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  visibility: hidden;
}

.video-player-block.video-active .video-iframe-wrapper {
  visibility: visible;
}

.video-player-block iframe,
.video-player-block video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.video-player-block.video-active .video-poster {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-poster .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease;
}

.video-poster:hover .play-icon {
  transform: translate(-50%, -50%) scale(1);
}

.video-poster .play-icon svg {
  width: 40px;
  padding-left: 2px;
}

.video-text-block {
  flex: 1 1 45%;
}

.video-text-block h2 {
  max-width: 400px;
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 20px;
  text-align: left;
}

.separator-line {
  border: none;
  border-top: 3px solid var(--brand-color);
  width: 80px;
  margin: 0 0 20px 0;
  opacity: 1;
}

.video-text-block p {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 30px;
}

.video-text-block p a {
  color: var(--color-text-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-dark);
}

@media (max-width: 900px) {
  .video-content-wrapper {
    flex-direction: column;
  }
  .video-player-block,
  .video-text-block {
    flex-basis: auto;
    width: 100%;
  }
  .video-text-block {
    text-align: center;
  }
  .separator-line {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- 5. Услуги дизайна (Design Services) --- */

.design-services-section .section-header {
  text-align: center;
  margin-bottom: 40px;
}

.design-services-section .section-header h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 15px;
}

.design-services-section .section-header p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-light);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.design-services-content {
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-border-new);
  padding: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.design-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.option-block h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-top: 0;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-color);
  display: inline-block;
}

.services-list ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.services-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px dashed var(--color-border-new);
  font-size: 16px;
  color: var(--color-text-body);
}

.services-list li:last-child {
  border-bottom: none;
}

.services-list .price {
  font-weight: 600;
  color: var(--color-text-dark);
  white-space: nowrap;
  padding-left: 20px;
}

.service-contact {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.service-contact .phone-number {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-dark);
  white-space: nowrap;
}

.self-prepare p {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 20px;
}

.self-prepare p:last-of-type {
  margin-bottom: 30px;
}

.self-prepare p a {
  color: var(--color-text-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-dark);
}

.accepted-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}

.accepted-formats span {
  background-color: #edf2f7;
  color: var(--color-text-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-new);
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background-color: var(--background-color);
  border: 1px solid var(--color-border-new);
  border-radius: var(--border-radius-small);
  color: var(--color-text-body);
  text-decoration: none !important;
  font-weight: 600;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.download-link:hover {
  color: var(--color-text-body);
  background-color: #edf2f7;
  border-color: var(--color-border-dark);
}

.download-link .download-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

@media (max-width: 900px) {
  .design-options {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .design-services-content {
    padding: 30px;
  }
}

@media (max-width: 480px) {
  .design-services-content {
    padding: 20px;
  }
  .option-block h3 {
    font-size: 20px;
  }
  .services-list li {
    font-size: 15px;
  }
  .service-contact {
    flex-direction: column;
    align-items: stretch;
  }
  .service-contact .phone-number {
    text-align: center;
    margin-top: 10px;
  }
  .self-prepare p {
    font-size: 15px;
  }
  .download-link {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
}

/* --- 6. Секция FAQ --- */

.faq-section .section-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-section .section-header h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 15px;
}

.faq-section .section-header p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-light);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-new);
  border-radius: var(--border-radius-main);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  margin-bottom: 0;
}

.faq-item:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 200, 10, 0.4);
  border-color: var(--brand-color);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  background-color: var(--background-color);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-dark);
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: #e9ecef;
}

.faq-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-light);
  transition: transform 0.3s ease-out;
  margin-left: 15px;
  flex-shrink: 0;
}

.faq-item.active .faq-question {
  background-color: #e9ecef;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer-wrapper {
  max-height: 0;
  max-width: 900px;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.faq-answer {
  padding: 25px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-body);
}

.faq-answer p {
  margin-top: 0;
  margin-bottom: 1em;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: var(--color-text-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-text-dark);
}

@media (max-width: 768px) {
  .faq-question {
    padding: 15px;
    font-size: 16px;
  }
  .faq-answer {
    padding: 20px;
    font-size: 15px;
  }
}

/* --- 7. Лайтбокс (Lightbox Modal) --- */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox.open .lightbox-main {
  transform: scale(1);
}

.lightbox-thumbnails {
  flex-basis: 100px;
  overflow-y: auto;
  padding: 5px;
  box-sizing: content-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lightbox-thumbnails::-webkit-scrollbar {
  display: none;
}

.lightbox-thumbnails .thumbnail {
  margin-bottom: 10px;
}

.lightbox-thumbnails.active-drag {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.lightbox-main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  gap: 20px;
  align-items: stretch;
}

.lightbox-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-grow: 1;
}

.lightbox-image,
.lightbox-video {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

.lightbox-image.active,
.lightbox-video.active {
  display: block;
}

.lightbox-arrow,
.lightbox-close {
  background: rgba(30, 30, 30, 0.6);
  border: none;
  color: var(--color-white);
  cursor: pointer;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  position: absolute;
  z-index: 10;
}

.lightbox-arrow:hover,
.lightbox-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.lightbox-arrow svg,
.lightbox-close svg {
  width: 24px;
}

.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 10px;
}

.lightbox-next {
  right: 10px;
}

.lightbox-close {
  top: 26px;
  right: 26px;
}

.lightbox-info-panel {
  flex-basis: 320px;
  flex-shrink: 0;
  background: rgba(40, 40, 40, 0.7);
  border-radius: var(--border-radius-main);
  padding: 30px;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-info-panel h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 15px 0;
}

.lightbox-info-panel p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex-grow: 1;
  opacity: 0.9;
}

.lightbox-info-panel .action-button {
  width: 100%;
  margin-top: auto;
  box-sizing: border-box;
}

.lightbox-main .lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-main .lightbox-prev {
  left: 10px;
}

.lightbox-main .lightbox-next {
  right: 10px;
}

@media (max-width: 1100px) {
  .lightbox {
    flex-direction: column;
    padding: 10px;
  }
  .lightbox-thumbnails {
    min-height: 120px;
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
    flex-shrink: 0;
  }
  .lightbox-main {
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
  }
  .lightbox-info-panel {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    order: 2;
    overflow-y: auto;
  }
  .lightbox-content {
    flex-grow: 1;
    flex-basis: 0;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .lightbox {
    flex-direction: column;
  }
  .lightbox-thumbnails {
    flex-basis: auto;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    padding-bottom: 10px;
    min-height: 120px;
  }
  .lightbox-thumbnails .thumbnail {
    margin-bottom: 0;
  }
  .lightbox-close {
    top: 174px;
    right: 20px;
  }
  .lightbox-prev {
    left: 12px;
  }
  .lightbox-next {
    right: 12px;
  }
}

/* --- 2b. Таблица цен (Price Table) --- */

.price-table-section .section-header {
  text-align: center;
  margin-bottom: 20px;
}

.price-table-section h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 0;
}

.table-description-wrapper {
  max-width: 900px;
  margin: 0 auto 40px auto;
  text-align: center;
}

.table-description-wrapper p {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin: 0;
}

.table-description-wrapper a {
  color: var(--color-text-dark);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.price-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 5px;
}

.price-table-wrapper {
  border: 1px solid var(--color-border-new);
  border-radius: var(--border-radius-main);
  overflow: hidden;
  min-width: 800px;
}

.price-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
  table-layout: fixed;
  border-style: hidden;
}

.price-table-wrapper th,
.price-table-wrapper td {
  padding: 18px 20px;
  border: 1px solid var(--color-border-new);
  font-size: 16px;
  vertical-align: middle;
}

.price-table-wrapper thead th {
  background-color: var(--color-yellow);
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: center;
}

.price-table-wrapper thead th:first-child {
  text-align: center;
}

.price-table-wrapper tbody td {
  background-color: var(--color-white);
  transition: background-color 0.15s ease-out;
}

.price-table-wrapper .format-cell {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text-dark);
  text-align: center;
  border-left: none;
}

.price-table-wrapper tbody td:not(.format-cell):not(.price-cell) {
  color: var(--color-text-dark);
  font-weight: 600;
}

.price-table-wrapper th:last-child,
.price-table-wrapper td:last-child {
  border-right: none;
}

.price-table-wrapper tbody tr:last-child td {
  border-bottom: none;
}

.price-table-wrapper tbody td.highlighted {
  background-color: var(--color-green-cross);
}

.price-table-wrapper tbody td.price-cell {
  text-align: center;
  font-weight: 400;
  color: var(--color-text-body);
}

.price-table-wrapper tbody td.price-cell:hover {
  cursor: pointer;
}

.price-table-wrapper td.highlight-row:not(.highlighted) {
  background-color: var(--color-green-highlight);
}

.price-table-wrapper td.highlight-col:not(.highlighted) {
  background-color: var(--color-green-highlight);
}

.price-table-wrapper td.highlight-cell:not(.highlighted) {
  background-color: var(--color-green-cross);
}

.table-cta-wrapper {
  text-align: right;
  margin-top: 30px;
}

/* * ==================================
 * НОВЫЕ СТИЛИ (адаптированные под ваш дизайн)
 * ==================================
 */

/* * --- 2a. Стили для модального окна ---
 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  backdrop-filter: blur(5px);
}

.modal-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background-color: var(--color-white);
  border-radius: var(--border-radius-main);
  box-shadow: var(--shadow-main);
  border: 1px solid var(--color-border-new);
  width: 90%;
  max-width: 500px;
  transform: translateY(-50px);
  transition: transform 0.3s ease;
}

.modal-backdrop.visible .modal-container {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border-new);
}

.modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}
.modal-close-btn svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-gray);
  transition: color 0.2s;
}
.modal-close-btn:hover svg {
  color: var(--color-text-dark);
}

.modal-body {
  padding: 24px;
  background-color: var(--color-yellow-light);
}

.modal-body p {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
}

.modal-input,
.modal-textarea {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  font-family: var(--font-family);
  border: 1px solid var(--color-yellow);
  border-radius: var(--border-radius-small);
  background-color: var(--color-white);
  color: var(--color-text-dark);
  box-sizing: border-box; /* Важно для 100% ширины */
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.modal-input:focus,
.modal-textarea:focus {
  outline: none;
  border-color: var(--color-yellow);
  box-shadow: 0 0 0 3px rgba(255, 200, 10, 0.4);
}

.modal-textarea {
  min-height: 120px;
  resize: vertical;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border-new);
  background-color: var(--background-color);
  border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
}

.modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--border-radius-small);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-btn-cancel {
  background-color: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-dark);
}
.modal-btn-cancel:hover {
  border-color: var(--color-text-body);
  background: var(--background-color);
}

.modal-btn-confirm {
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-green);
}
.modal-btn-confirm:hover {
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  transform: translateY(-2px);
}

/* * --- 2b. Стили для иконок файлов ---
 * (дополняют ваши .pdf и .link)
 */
.file-icon.image {
  background-color: var(--color-green-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.5L14.5 12L19 18H5L8.5 13.5Z'/%3E%3C/svg%3E");
}

.file-icon.archive {
  background-color: var(--color-yellow-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffc80a'%3E%3Cpath d='M20 6H12L10 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6ZM20 18H4V6H9.17L11.17 8H20V18ZM11 13H13V10H11V13ZM11 17H13V15H11V17Z'/%3E%3C/svg%3E");
}

.file-icon.default {
  background-color: #edf2f7; /* Аналог --background-color */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23718096'%3E%3Cpath d='M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM18 20H6V4H13V9H18V20Z'/%3E%3C/svg%3E");
}

/* * --- 2c. Стилизация кнопки "Комментарий" ---
 */
.file-action-btn.has-comment {
  font-weight: 700;
  color: var(--color-green);
  text-decoration-color: var(--color-green);
}

/* * ==================================
 * НОВЫЕ СТИЛИ ДЛЯ СХЕМЫ (ЗАМЕНИТЕ СТАРЫЕ)
 * ==================================
 */

/* * 1. Внешний контейнер (148x210)
 * Он просто центрирует внутренний блок.
 */
.product-image-schema {
  width: 170px;
  height: 210px;
  border: 1px dashed var(--color-border-dark);
  border-radius: var(--border-radius-small);
  background: #fdfdfd;

  /* Flex-центрирование для #schema-relative-wrapper */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Отступы, чтобы лейблы (которые будут снаружи) 
      не вылезали за пределы пунктирной рамки 
    */
  padding: 30px 20px;
  box-sizing: border-box;

  /* Сброс конфликтующих стилей */
  position: static;
}

/* * 2. Обертка (РОДИТЕЛЬ)
 * Ей задаются размеры через JS.
 * Она является 'position: relative' для лейблов.
 */
#schema-relative-wrapper {
  position: relative;
  flex-shrink: 0; /* Запрещаем сжиматься */
  transition:
    width 0.3s ease,
    height 0.3s ease;

  /* Размеры (width/height) будут заданы через JS */
}

/* * 3. Сам видимый блок (ДОЧЕРНИЙ)
 * Растягивается на 100% родителя-обертки.
 */
#schema-dynamic-box {
  width: 100%;
  height: 100%;
  border: 1px solid #ffc80a;
  background: #fffbeb;
  border-radius: 4px;
  box-sizing: border-box;
}

/* * 4. Лейблы (ДОЧЕРНИЕ)
 * Позиционируются АБСОЛЮТНО от #schema-relative-wrapper
 */
#schema-label-height,
#schema-label-width {
  position: absolute;
  font-size: 12px;
  color: var(--color-text-light);
  white-space: nowrap;

  /* Фон, чтобы текст читался поверх рамки */
  background: rgba(253, 253, 253, 0.85);
  padding: 0 2px;
}

/* * 5. Лейбл ВЫСОТЫ (сбоку)
 */
#schema-label-height {
  top: 50%;
  /* Выносим ВЛЕВО за пределы родителя */
  right: 85%;
  margin-right: 5px; /* Отступ 5px */
  /* Поворачиваем */
  transform: translateY(-50%) rotate(-90deg);
}

/* * 6. Лейбл ШИРИНЫ (снизу)
 */
#schema-label-width {
  left: 50%;
  /* Выносим ВНИЗ за пределы родителя */
  top: 100%;
  margin-top: 5px; /* Отступ 5px */
  /* Центрируем */
  transform: translateX(-50%);
}

/* * --- 2e. Стили для плейсхолдера файлов ---
 */
.files-placeholder-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  text-align: center;
  border: 2px dashed var(--color-border-new);
  border-radius: var(--border-radius-small);
  background-color: var(--background-color);
}
.files-placeholder-message svg {
  width: 40px;
  height: 40px;
  color: var(--color-border-dark);
}
.files-placeholder-message span {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-top: 10px;
}
.files-placeholder-message p {
  font-size: 14px;
  color: var(--color-text-light);
  margin: 4px 0 0 0;
}

/* * ==================================
 * СТИЛИ ДЛЯ ИНФО-БЛОКА (v3.1)
 * ==================================
 */

/* * 1. Основная 2-колоночная сетка 
 */
.info-content-section {
  display: flex;
  gap: 40px;
  max-width: 1270px;
  margin-left: auto;
  margin-right: auto;
}

/* * 2. Левая колонка (основной контент)
 */
.info-main-content {
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* * 3. Правая колонка (сайдбар)
 */
.info-sidebar {
  flex: 1 1 0;
  min-width: 280px; /* Мин. ширина для сайдбара */
  top: 20px;
  align-self: flex-start;
}

/* * 4. Контентный блок "Картинка + Текст"
 */
.info-block {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* * 5. Блок с картинкой
 */
.info-block-image {
  flex: 1 1 40%;
  border-radius: var(--border-radius-main);
  overflow: hidden;
  background-color: var(--background-color);
}

.info-block-image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* * 6. Текстовый блок
 */
.info-block-text {
  flex: 1 1 60%;
}

.info-block-text h2 {
  max-width: 100%;
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-top: 0;
  margin-bottom: 20px;
  text-align: left;
}

.info-block-text p {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-bottom: 20px;
  margin-top: 0;
}
.info-block-text p:last-child {
  margin-bottom: 0;
}

/* * 6b. Класс для простых списков
 */
.info-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 20px 20px;
  font-size: 16px;
  color: var(--color-text-body);
}
.info-list li {
  margin-bottom: 8px;
}

/* Используем ваш класс разделителя */
.info-block-text .separator-line {
  border: none;
  border-top: 3px solid var(--brand-color);
  width: 80px;
  margin: 0 0 20px 0;
  opacity: 1;
}

/* * 7. Бокс для сайдбара
 */
.styled-info-box {
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-border-new);
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.styled-info-box h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-top: 0;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-color);
  display: inline-block;
}

/* * 8. Список с цветными точками
 */
.styled-dot-list {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}

.styled-dot-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
}

.styled-dot-list li:last-child {
  margin-bottom: 0;
}

.styled-dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.styled-dot-list li:nth-child(1)::before {
  background-color: var(--color-yellow);
}
.styled-dot-list li:nth-child(2)::before {
  background-color: var(--color-text-body);
}
.styled-dot-list li:nth-child(3)::before {
  background-color: var(--color-blue);
}
.styled-dot-list li:nth-child(4)::before {
  background-color: var(--color-red);
}
.styled-dot-list li:nth-child(5)::before {
  background-color: var(--color-green);
}
.styled-dot-list li:nth-child(6)::before {
  background-color: var(--color-yellow);
}

.styled-dot-list li a {
  color: var(--color-text-body);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s;
  font-weight: 500;
}

.styled-dot-list li a:hover {
  color: var(--color-text-dark);
}

/* * 9. Обертка для зеленой кнопки в сайдбаре
 */
.sidebar-cta-wrapper {
  text-align: left;
  margin-top: 30px;
}

.container ul {
  margin-left: 0;
}

/* * 10. Стили для "Показать еще"
 * =================================
 */

/* * 10a. Контейнер для скрытого контента
 */
.info-hidden-content {
  /* Скрываем по умолчанию */
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;

  /* Плавный переход */
  transition:
    max-height 0.7s ease-out,
    opacity 0.5s ease-out,
    visibility 0.7s;

  /* Сохраняем gap от родителя */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.info-hidden-content.visible {
  max-height: 5000px; /* Достаточно большое значение */
  opacity: 1;
  visibility: visible;
}

/* * 10b. Обертка для кнопки
 */
.info-expand-button-wrapper {
  text-align: left;
}

/* * 10c. Стилизация кнопки "Показать еще"
 */
.action-button-secondary {
  padding: 12px 30px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius-small);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--color-white);
  color: var(--color-text-dark);

  display: inline-flex;
  align-items: center;
  gap: 8px; /* Расстояние между текстом и иконкой */
}
.action-button-secondary:hover {
  border-color: var(--color-text-body);
  background: var(--background-color);
  box-shadow: var(--shadow-main);
}

.action-button-secondary .expand-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease-out;
}

/* * 10d. Состояние "Развернуто"
 */
.action-button-secondary.is-expanded .expand-icon {
  transform: rotate(180deg);
}

/* * 11. Адаптивность
 */
@media (max-width: 900px) {
  .info-content-section {
    flex-direction: column;
  }
  .info-sidebar {
    position: static;
    width: 100%;
    margin-top: 30px;
    min-width: unset;
  }
}

@media (max-width: 768px) {
  .info-block {
    flex-direction: column;
  }
  .info-block-image,
  .info-block-text {
    flex-basis: auto;
    width: 100%;
  }
}

/* * ==================================
 * СТИЛИ ДЛЯ КОМПОЗИТНОГО БЛОКА "ДОСТАВКА" (v1)
 * ==================================
 */

/* * 1. Общая 2-колоночная сетка (Лево/Право)
 */
.delivery-composite-section {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% / 50% */
  gap: 30px;
  align-items: stretch; /* Растягиваем колонки по высоте */
}

/* * 2. Левая колонка (контейнер для 2-х блоков)
 */
.delivery-composite-left {
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: space-between;
}

/* * 3. Правая колонка (контейнер для 1-го блока)
 */
.delivery-composite-right {
  display: flex;
}

/* * 4. Общий стиль для БЕЛЫХ карточек
 * (Используется для 3 из 4 блоков)
 */
.delivery-option-card {
  background-color: var(--color-white);
  border-radius: var(--border-radius-main);
  border: 1px solid var(--color-border-new);
  padding: 30px;
  box-shadow: var(--shadow-main);
  display: flex;
  flex-direction: column;
}

/* * 5. Верхний левый блок (внутренняя сетка)
 */
.delivery-options-grid-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

/* * 6. Элемент в сетке (Самовывоз / Доставка)
 */
.delivery-option-item {
  display: flex;
  flex-direction: column;
}
/* Разделитель между "Самовывоз" и "Доставка" */
.delivery-option-item:first-child {
  border-right: 1px dashed var(--color-border-new);
  padding-right: 25px;
}

.delivery-icon-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.delivery-icon-wrapper svg {
  width: 30px;
  height: 30px;
}

.delivery-option-card h3,
.delivery-option-item h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin: 0 0 10px 0;
}

.delivery-option-card p,
.delivery-option-item p {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin: 0;
}

.delivery-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 15px !important;
}

.delivery-price.free {
  color: var(--color-green); /* Бесплатно - зеленым */
}

.delivery-pricing-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  font-size: 16px;
}
.delivery-pricing-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--color-border-new);
}
.delivery-pricing-list li:last-child {
  border-bottom: none;
}
.delivery-pricing-list li span {
  color: var(--color-text-body);
}
.delivery-pricing-list li strong {
  color: var(--color-text-dark);
  white-space: nowrap;
  padding-left: 15px;
}

/* * 7. Нижний левый блок (ЖЕЛТЫЙ, акцентный)
 * (Использует .styled-info-box из вашего CSS)
 */
.delivery-benefit-box {
  background-color: var(--color-yellow-light);
  border-color: var(--color-yellow);
  box-shadow: none;
}
.delivery-benefit-box h3 {
  border-bottom: none;
  padding-bottom: 0;
}
.benefit-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-top: 15px;
}
.benefit-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-green); /* Выделяем цену */
  margin-top: -10px;
}
.delivery-benefit-box p {
  color: var(--color-text-body);
}

/* * 8. Правый блок (БЕЛЫЙ, высокий)
 */
.delivery-banner-card {
  width: 100%; /* Растягиваем на всю правую колонку */
  height: 100%; /* Растягиваем на всю высоту */
}
.delivery-banner-card h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin: 0 0 20px 0;
  text-align: left;
}

/* Используем класс .info-list, который у вас уже есть */
.delivery-banner-card .info-list {
  margin-bottom: 0;
  margin-left: 0; /* Сбрасываем отступ, т.к. это не .info-block-text */
  font-size: 15px;
}

/* Обертка для картинки, чтобы прижать ее к низу */
.delivery-banner-image-wrapper {
  margin-top: auto;
  padding-top: 10px;
  text-align: center;
}
.delivery-banner-image-wrapper img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

/* * 9. АДАПТИВНОСТЬ
 */
@media (max-width: 900px) {
  /* На мобильных все блоки идут друг под другом */
  .delivery-composite-section {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  /* На совсем маленьких экранах 
       "Самовывоз" и "Доставка" тоже ставим друг под другом
    */
  .delivery-options-grid-content {
    grid-template-columns: 1fr;
  }
  .delivery-option-item:first-child {
    border-right: none;
    border-bottom: 1px dashed var(--color-border-new);
    padding-right: 0;
    padding-bottom: 25px;
  }
}

.footer-top,
.footer-bottom {
  background: #212121;
}

/* ------------------------ */

/* --- СТИЛИ ДЛЯ СЕКЦИИ ПЕРЕКЛЮЧАТЕЛЯ ТОВАРОВ --- */

.product-selector {
  flex: 1 1 500px;
  max-width: 550px;
  min-width: 280px;
  padding: 15px;
  border-radius: var(--border-radius-main);
  border: 1px solid var(--color-border-new);
  background-color: var(--color-white);

  /* Стили как у product-gallery */
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  padding: 30px;
}

.selector-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--color-text-dark);
  margin-top: 0;
  margin-bottom: 25px;
  text-align: center;
}

.selector-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
}

.selector-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 10px;
  border: 2px solid var(--color-border-new);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--background-color);
}

.selector-card:hover {
  border-color: var(--color-yellow-dark);
  box-shadow: var(--shadow-main);
  transform: translateY(-2px);
}

.selector-card.active {
  border-color: var(--brand-color);
  background-color: var(--color-yellow-light);
  box-shadow: 0 0 0 3px rgba(255, 200, 10, 0.4);
}

.selector-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.3;
}

.card-price-from {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-light);
  margin-top: 5px;
}

.selector-note {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 1.5;
  padding: 15px;
  border: 1px solid var(--color-border-new);
  border-radius: var(--border-radius-small);
  background-color: var(--background-color);
}

.selector-note .active-note {
  font-weight: 700;
  color: var(--color-text-dark);
}

/* Адаптивность для переключателя */
@media (max-width: 970px) {
  .product-selector {
    position: static;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    order: -1; /* Показываем его первым на мобильных */
  }
  .selector-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
  }
}

/* --- СТИЛИ ДЛЯ ТАБИРОВАННОГО ИНТЕРФЕЙСА КАЛЬКУЛЯТОРА --- */

.calc-nav-tabs {
  list-style: none;
  padding: 0;
  margin: 40px 0 25px 0;
  display: flex;
  justify-content: flex-start;
  border-bottom: 2px solid var(--color-border-new);
}

.tab-item {
  padding: 10px 0;
  margin-right: 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-light);
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  transform: translateY(2px);
}

.tab-item.active {
  color: var(--color-text-dark);
  font-weight: 700;
  border-bottom-color: var(--brand-color);
}

.tab-item:hover {
  color: var(--color-text-dark);
}

.calc-tab-content-container {
  padding-top: 10px;
}

.calc-tab-pane {
  display: none;
}

.calc-tab-pane.active {
  display: block;
}

/* Стили для радиокнопок и чекбоксов */
.radio-group-wrapper,
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-direction: row;
  height: 44px;
}
.radio-label,
.checkbox-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 400 !important; /* Перебиваем font-weight 600 из form-group label */
  color: var(--color-text-dark) !important;
  line-height: normal !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.radio-label input,
.checkbox-label input {
  margin-right: 8px;
  transform: scale(1.1);
}

/* Класс для скрытия полей, которые не должны отображаться */
.hidden-field {
  display: none !important;
}

/* ------------------------------- */

/* ==================================
2. CSS ДЛЯ МОДАЛЬНОГО ОКНА КОРЗИНЫ
==================================
*/

/* Делаем корзину шире, чем модалка для ссылки */
.modal-container.cart-modal {
  max-width: 700px;
  width: 95%;
}

.modal-body {
  background-color: var(--background-color);
  /* Задаем макс. высоту для скролла, если много товаров */
  max-height: 65vh;
  overflow-y: auto;
}

/* Список товаров */
#cart-items-list {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  background: var(--color-white);
  border: 1px solid var(--color-border-new);
  padding: 16px;
  border-radius: var(--border-radius-small);
}

.cart-item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
  display: block;
}

.cart-item-summary {
  font-size: 14px;
  color: var(--color-text-light);
  display: block;
  margin-top: 4px;
}

.cart-item-price {
  text-align: right;
  flex-shrink: 0;
}

.cart-item-price-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
  display: block;
}

.cart-item-delete {
  font-size: 13px;
  color: var(--color-red);
  background: none;
  border: none;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  cursor: pointer;
  margin-top: 4px;
}

/* Форма оформления */
#checkout-form {
  background: var(--color-white);
  padding: 24px;
  border: 1px solid var(--color-border-new);
  border-radius: var(--border-radius-small);
}

.checkout-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-color);
}

.form-group-checkout {
  margin-bottom: 15px;
}
.form-group-checkout label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

/* Используем класс .modal-input, который у нас уже есть */
.form-group-checkout .modal-input {
  background-color: var(--background-color);
}
.form-group-checkout .modal-input:focus {
  background-color: var(--color-white);
}

.payment-options-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}

.policy-agreement {
  margin-top: 25px;
  font-size: 13px;
}
.policy-agreement a {
  color: var(--color-text-dark);
  font-weight: 600;
}

/* Футер корзины */
.cart-footer {
  justify-content: space-between;
  align-items: center;
}

.cart-total-price {
  font-size: 22px;
  color: var(--color-text-dark);
}
.cart-total-price span {
  font-weight: 500;
}
.cart-total-price strong {
  font-weight: 900;
}

#checkout-submit-btn {
  font-size: 16px;
  padding: 12px 28px;
}

/* Стили для кнопки "В корзину", когда она неактивна */
.btn-to-cart:disabled {
  background-color: #ccc;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/*
======================================
--- Изолированная секция "Контакты" ---
======================================
*/

/* --- 1. Новая, безопасная СЕТКА (вместо Bootstrap) --- */

/* Стили для .po-contacts-container БОЛЬШЕ НЕ НУЖНЫ,
   так как мы используем ваш .container
*/

.po-contacts-section .po-contacts-grid {
  display: flex;
  flex-wrap: wrap; /* Для мобильной адаптации */
  margin-left: -15px; /* Компенсация отступов .col- */
  margin-right: -15px;
}

.po-contacts-section .po-contacts-col-left,
.po-contacts-section .po-contacts-col-right {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* На десктопах (>= 768px, как у .col-md-*) */
@media (min-width: 768px) {
  .po-contacts-section .po-contacts-col-left {
    flex: 0 0 40%; /* Как .col-md-7 */
    max-width: 40%;
  }
  .po-contacts-section .po-contacts-col-right {
    flex: 0 0 60%; /* Как .col-md-5 */
    max-width: 60$;
  }
}

/* --- 2. Левая колонка (Реквизиты) --- */
.po-contacts-details .po-contacts-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin: 0 0 25px 0;
  padding: 0;
  line-height: 1.3;
}

.po-contacts-details .po-contacts-block {
  margin-bottom: 20px;
}

.po-contacts-details .po-contacts-block p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
  margin: 0 0 5px 0;
  padding: 0;
}

.po-contacts-details .po-contacts-block p strong {
  color: var(--color-text-dark);
  font-weight: 700;
}

/* --- 3. Блок Email (Левая колонка) --- */
.po-contacts-details .po-contacts-email {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

.po-contacts-details .po-contacts-icon-wrapper {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--brand-color); /* Оранжевый фон */
  border-radius: var(--border-radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white); /* Белая иконка */
}

.po-contacts-details .po-contacts-icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.po-contacts-details .po-contacts-email-link {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-color); /* Оранжевый текст */
  text-decoration: none;
  transition: color 0.2s;
}

.po-contacts-details .po-contacts-email-link:hover {
  color: var(--color-text-dark);
  text-decoration: none;
}

/* --- 4. Правая колонка (Форма) --- */
.po-contacts-form-wrapper {
  background-color: var(--background-color); /* Светло-серый фон F8F9FA */
  border-radius: var(--border-radius-main);
  padding: 30px;
  height: 100%;
  box-sizing: border-box; /* Важно для padding */
}

.po-contacts-form-wrapper .po-contacts-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-gray);
  margin: 0 0 5px 0;
  padding: 0;
  line-height: 1.3;
}

.po-contacts-form-wrapper .po-contacts-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-text-dark);
  margin: 0 0 25px 0;
  padding: 0;
  line-height: 1.3;
}

.po-contacts-form-group {
  margin-bottom: 15px;
}

.po-contacts-input,
.po-contacts-textarea {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-new); /* Тонкая серая рамка */
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.po-contacts-textarea {
  min-height: 120px;
  resize: vertical;
}

.po-contacts-input:focus,
.po-contacts-textarea:focus {
  outline: none;
  border-color: var(--brand-color); /* Оранжевая рамка при фокусе */
  box-shadow: 0 0 0 3px rgba(255, 200, 10, 0.4); /* Ваша тень фокуса */
}

/* --- 5. Чекбокс (Форма) --- */
.po-contacts-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 25px;
}

.po-contacts-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-new);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.po-contacts-checkbox:checked {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
}

.po-contacts-checkbox:checked::after {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text-dark); /* Темная галочка */
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.po-contacts-checkbox-label {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.5;
  cursor: pointer;
}

.po-contacts-policy-link {
  color: var(--brand-color); /* Оранжевая ссылка */
  text-decoration: underline;
  transition: color 0.2s;
}
.po-contacts-policy-link:hover {
  color: var(--color-text-dark);
}

/* --- 6. Кнопка (Форма) --- */
.po-contacts-submit-btn {
  display: inline-block;
  padding: 15px 30px; /* Как у .action-button */
  font-size: 16px;
  font-weight: 700; /* 700 это bold */
  color: var(--color-white); /* Белый текст */
  background-color: var(--color-green); /* Зеленый фон */
  border: none; /* Убираем рамку */
  border-radius: var(--border-radius-small);
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); /* Тень от .action-button */
  transition:
    transform 0.2s,
    box-shadow 0.2s; /* Анимация от .action-button */
}

.po-contacts-submit-btn:hover {
  color: var(--color-white); /* Белый текст */
  transform: translateY(-2px); /* Эффект от .action-button:hover */
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4); /* Эффект от .action-button:hover */
  text-decoration: none;
}

/* --- 7. Адаптация --- */
@media (max-width: 767px) {
  .po-contacts-form-wrapper {
    margin-top: 40px; /* Отступ на мобильных */
  }
}

/* --- 5b. Блок для сообщения об ошибке (Форма) --- */
.po-contacts-error-message {
  display: none; /* Скрыт по умолчанию */
  font-size: 15px;
  font-weight: 600;
  color: var(--color-red); /* Красный цвет */
  background-color: rgba(229, 62, 62, 0.05); /* Легкий красный фон */
  border: 1px solid rgba(229, 62, 62, 0.2); /* Легкая красная рамка */
  border-radius: var(--border-radius-small);
  padding: 10px 15px;
  margin-bottom: 20px;
  text-align: center;
}

/* * ==================================
 * СТИЛИ ДЛЯ СПИСКОВ ВНУТРИ .info-block-text
 * (Добавьте это в ваш CSS-файл)
 * ==================================
 */

.info-block-text ul,
.info-block-text ol {
  /* Применяем те же стили, что и у <p> */
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.6;

  /* Управляем отступами, как у <p> */
  margin-top: 0;
  margin-bottom: 20px;

  /* Устанавливаем внутренний отступ для маркеров */
  /* (вместо margin-left: 0; из .container ul) */
  padding-left: 25px;
}

.info-block-text ul {
  list-style-type: disc; /* Круглые маркеры */
}

.info-block-text ol {
  list-style-type: decimal; /* Цифры */
}

.info-block-text li {
  /* Отступ между пунктами списка */
  margin-bottom: 8px;
}

/* Убираем лишний отступ у последнего пункта */
.info-block-text li:last-child {
  margin-bottom: 0;
}

/* Убираем лишний отступ у всего списка, если он последний */
.info-block-text ul:last-child,
.info-block-text ol:last-child {
  margin-bottom: 0;
}

/* Стили для недоступных опций */
.form-group.disabled-option {
  opacity: 0.4; /* Полупрозрачность */
  pointer-events: none; /* Запрет кликов */
  filter: grayscale(100%); /* Ч/Б режим */
  position: relative;
}

/* (Опционально) Можно добавить иконку замка или подсказку */
.form-group.disabled-option::after {
  content: "Недоступно для этой бумаги/формата";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  color: red;
  background: #fff;
  padding: 2px 5px;
  border: 1px solid red;
  display: none; /* Показывать по желанию */
}

.form-group.disabled-option {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(100%);
}

.qty-hint {
  margin-top: 8px;
  font-size: 14px;
  color: #919191;
}

/* --- Стилизация блока "Расположение пружины" (Версия без иконок) --- */

/* 1. Выравнивание общего контейнера */
.calc-field {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* 2. Левая часть (Лейбл + Тултип) */
.field-label.calc-field__label {
  flex: 1 1 180px;
  min-width: 150px;
  margin-top: 11px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tooltip_container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.tooltip_container:hover {
  opacity: 1;
}

.tooltip_icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* 3. Правая часть (Контейнер кнопок) */
.calc-field__content {
  flex: 1 1 400px;
  display: flex;
  gap: 10px;
}

/* 4. Обертка кнопки */
.custom-radio {
  flex: 1;
  position: relative;
}

/* Скрываем системный инпут */
.custom-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 5. Визуальный стиль кнопки (плитка) */
.custom-radio__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  padding: 0 15px;
  background-color: var(--color-white);
  border: 1px solid var(--color-yellow);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  user-select: none;
  font-size: 15px;
  color: var(--color-text-dark);
}

/* Ховер */
.custom-radio__label:hover {
  border-color: var(--color-text-dark);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 6. Активное состояние (Заливка цветом) */
.custom-radio__input:checked + .custom-radio__label {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-text-dark);
  font-weight: 700;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 7. Скрываем кружочки-индикаторы */
.custom-radio__selector {
  display: none;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
  .calc-field {
    flex-wrap: wrap;
  }
  .field-label.calc-field__label {
    flex-basis: 100%;
    margin-bottom: 5px;
    margin-top: 0;
  }
  .calc-field__content {
    flex-basis: 100%;
  }
}

/* CSS */
/* Схема */
.product-image-schema {
  width: 170px;
  height: 210px;
  border: 1px dashed #ccc;
  border-radius: 8px;
  background: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

#schema-relative-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#schema-dynamic-box {
  border: 2px solid #ffc80a;
  background: #fffbeb;
  border-radius: 2px;
  transition:
    width 0.3s ease,
    height 0.3s ease;
}

#schema-label-height {
  position: absolute;
  right: 90%;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  margin-right: 8px;
  font-size: 11px;
  color: #777;
  white-space: nowrap;
}

#schema-label-width {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  font-size: 11px;
  color: #777;
  white-space: nowrap;
}

/* Кнопки загрузки */
.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 15px;
  align-items: center;
}

.summary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  color: #333;
}

.summary-btn:hover {
  background: #f5f5f5;
  border-color: #999;
}

/* Список файлов (Строки) */
.file-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.file-row-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  flex: 1;
}

.file-row-icon {
  color: #2980b9;
  margin-top: 2px;
}

.file-row-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-row-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  word-break: break-all;
}

.file-row-comment {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
  font-style: italic;
  background: #fffbe6;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid #ffe58f;
}

.file-row-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 15px;
  flex-shrink: 0;
}

/* Кнопка "Комментарий" (ТЕКСТОВАЯ) */
.file-btn-comment {
  background: #28a745;
  border: 1px solid #28a745;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fdfdfd;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.file-btn-comment:hover {
  background: #f0f0f0;
  color: #333;
  border-color: #bbb;
}

.file-btn-comment.has-comment {
  border-color: #27ae60;
  color: #27ae60;
  background: #f0fff4;
}

/* Кнопка "Удалить" */
.file-btn-del {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  color: #e74c3c;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.file-btn-del:hover {
  background: #e74c3c;
  color: #fff;
}

/* Модальные окна */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-backdrop.visible {
  display: flex;
  opacity: 1;
}

.modal-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-backdrop.visible .modal-container {
  transform: translateY(0);
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #999;
}

.modal-close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f9f9f9;
}

.modal-input,
.modal-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.modal-input:focus,
.modal-textarea:focus {
  border-color: #2980b9;
  outline: none;
}

.modal-textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-size: 14px;
}

.modal-btn-cancel {
  background: #eee;
  color: #333;
}

.modal-btn-cancel:hover {
  background: #ddd;
}

.modal-btn-confirm {
  background: #27ae60;
  color: #fff;
}

.modal-btn-confirm:hover {
  background: #219150;
}

/* Корзина */
.cart-modal-container {
  max-width: 700px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  gap: 15px;
  flex-wrap: wrap;
}

.cart-item-header {
  flex: 1 1 250px;
}

.cart-item-title {
  font-weight: 700;
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.cart-item-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e74c3c;
  font-size: 12px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-top: 5px;
  opacity: 0.7;
}

.cart-item-remove:hover {
  opacity: 1;
  text-decoration: underline;
}

.cart-item-info {
  flex: 1 1 200px;
  font-size: 14px;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.cart-qty-control {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.cart-qty-control button {
  width: 30px;
  height: 30px;
  background: #f9f9f9;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: #555;
}

.cart-qty-control button:hover {
  background: #eee;
}

.cart-qty-control span {
  width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.cart-item-price {
  font-size: 18px;
  font-weight: 800;
  color: #333;
  min-width: 80px;
  text-align: right;
}

.cart-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  margin-top: 20px;
}

.form-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-group-checkout {
  margin-bottom: 15px;
  flex: 1;
}

.form-group-checkout label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
}

/* Плейсхолдер */
.files-placeholder-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px;
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  color: #999;
}

.files-placeholder-message svg {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  color: #ccc;
}

@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-item-controls {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
  }
}

/* ==========================================================================
   FIX: МОБИЛЬНАЯ АДАПТАЦИЯ (Main Container & Calculator)
   Добавлено для исправления верстки на планшетах и телефонах
   ========================================================================== */

/* 1. Исправление опечатки в глобальном классе (было 500x) */
.main-container {
  margin-top: 50px; /* Ставим адекватный отступ сверху */
  margin-bottom: 50px;
  flex-wrap: wrap; /* Разрешаем перенос на всякий случай */
}

/* 2. Основная адаптация для планшетов и мобильных (менее 991px) */
@media (max-width: 991px) {
  /* Переключаем основной контейнер в вертикальный режим */
  .main-container {
    display: flex;
    flex-direction: column; /* Элементы встают друг под друга */
    gap: 30px; /* Отступ между галереей и калькулятором */
    align-items: center; /* Центрируем блоки */
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px; /* Безопасные отступы по бокам экрана */
  }

  /* Настраиваем блок Галереи и Свитчера */
  .product-gallery,
  .product-selector {
    order: 1; /* Явно указываем: быть первым */
    width: 100%;
    max-width: 100%; /* Растягиваем на всю ширину */
    flex: 0 0 auto;
    position: static !important; /* Убираем липкость (sticky) на мобильных, чтобы не ломать скролл */
    margin: 0;
  }

  /* Настраиваем блок Калькулятора */
  .calculator-form {
    order: 2; /* Явно указываем: быть вторым */
    width: 100%;
    max-width: 100%; /* Растягиваем на всю ширину */
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }

  /* Улучшаем читаемость формы калькулятора на узких экранах */
  .form-group {
    flex-direction: column; /* Лейбл сверху, инпут снизу */
    gap: 8px;
    margin-bottom: 20px;
  }

  .readiness-title,
  .form-group label {
    width: 100%;
    flex-basis: auto;
    margin-top: 0;
    margin-bottom: 0;
  }

  .form-control-wrapper,
  .calc-field__content {
    width: 100%;
    flex-basis: auto;
  }

  /* Адаптация радио-кнопок (плиток) внутри калькулятора */
  .calc-field {
    flex-wrap: wrap;
  }

  .field-label.calc-field__label {
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 10px;
  }

  .order-summary-section.visible {
    padding: 15px;
  }
  .summary-header {
    background: var(--color-yellow);
    padding: 15px 30px;
    font-size: 20px;
    font-weight: 900;
    color: var(--color-text-dark);
    text-align: center;
    border-radius: 12px 12px 0 0;
    border: 1px solid #cfcfcf;
    border-bottom: none;
  }
  .order-summary-section.visible {
    border: none;
    box-shadow: none;
  }
  .cart-item-header {
    flex: 0;
  }
  .cart-item-info {
    flex: 0;
  }
  .cart-item {
    position: relative;
  }
  .cart-item-remove {
    position: absolute;
    right: 15px;
    top: 10px;
  }
}

/* 3. Дополнительная страховка для совсем маленьких экранов (менее 480px) */
@media (max-width: 480px) {
  .calc-block {
    padding: 20px 15px; /* Уменьшаем внутренние отступы, чтобы влез контент */
  }

  .top-calc-header {
    padding: 15px;
    font-size: 18px;
  }

  /* Делаем табы (Обложка/Блок) прокручиваемыми, если не влезают */
  .calc-nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
  }
  .tab-item {
    white-space: nowrap;
    margin-right: 20px;
  }
  .new-info-bar-wrapper {
    margin-top: 138px !important;
    padding-top: 50px !important;
  }
  .new-info-bar-flex {
    gap: 4px !important;
    max-width: 270px !important;
  }
  .new-info-content {
    display: block !important;
  }
  .section-padding-wrapper {
    margin: 20px auto !important;
  }
}

/* Контейнер */
#summary-details-list {
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  gap: 12px !important;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
}

/* Левая колонка (Заголовки) */
#summary-details-list dt {
  grid-column: 1 !important;
  width: auto !important; /* Убираем жесткую ширину */
  margin: 0 !important;
  font-weight: 400 !important;
  color: var(--color-text-light);
}

/* Правая колонка (Значения) */
#summary-details-list dd {
  grid-column: 2 !important;
  width: auto !important; /* Убираем calc */
  margin: 0 !important; /* Убираем отступ браузера */
  font-weight: 500 !important;
  color: var(--color-text-dark);

  /* Принудительный перенос текста */
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}


/* --- Стили для блока Доставки в корзине --- */

.delivery-type-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.delivery-type-selector .custom-radio {
    flex: 1;
}

.delivery-block {
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
}

/* Список пунктов самовывоза */
.pickup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pickup-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border-new);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    background: var(--color-white);
    transition: all 0.2s;
}

.pickup-item:hover {
    border-color: var(--color-text-body);
}

.pickup-item input[type="radio"] {
    margin-top: 5px;
    transform: scale(1.2);
}

/* Если радио выбрано, подсвечиваем блок */
.pickup-item:has(input:checked) {
    border-color: var(--brand-color);
    background-color: var(--color-yellow-light);
}

.pickup-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pickup-name {
    font-weight: 700;
    color: var(--color-text-dark);
    font-size: 15px;
}

.pickup-addr {
    font-size: 13px;
    color: var(--color-text-body);
    line-height: 1.4;
}

.pickup-link {
    font-size: 12px;
    color: #27ae60;
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
}

.pickup-link:hover {
    color: var(--color-text-dark);
    border-color: var(--color-text-dark);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .form-group {
    flex-direction: row;
    align-items: center;
  }
  .form-group label {
    width: 80%;
  }
}