/* Section: Наше производство — вертикальные видео и фото с объектов (вариант A от Lovable). */
:root {
  --customer-surface: #fff;
  --customer-overlay: rgba(0, 0, 0, .72);
  --customer-clear: rgba(0, 0, 0, 0);
  --customer-shadow: 0 12px 28px rgba(37, 54, 43, .08);
  --customer-radius: 24px;
  --customer-ink: #25362b;
}

/* Media card */
.customer-media { position: relative; display: block; overflow: hidden; border-radius: var(--customer-radius); background: var(--customer-ink); aspect-ratio: 9/16; isolation: isolate; box-shadow: var(--customer-shadow); transition: transform .25s; }
.customer-media:hover { transform: translateY(-4px); }
.customer-media img,
.customer-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.customer-caption { position: absolute; inset: auto 0 0; padding: 40px 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(to top, var(--customer-overlay), var(--customer-clear)); color: var(--customer-surface); font-size: 13px; font-weight: 500; pointer-events: none; }
.customer-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border: 1px solid var(--customer-surface); border-radius: 50%; background: var(--customer-overlay); color: var(--customer-surface); font-size: 28px; display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.customer-play:hover { background: var(--accent-color); }
.customer-unavailable { position: absolute; left: 14px; right: 14px; top: 18px; padding: 10px 12px; border-radius: 6px; color: var(--customer-surface); background: var(--customer-overlay); font-size: 12px; text-align: center; }
.customer-unavailable[hidden] { display: none; }
.customer-video.is-playing .customer-play { opacity: 0; }
.customer-video.is-playing:hover .customer-play,
.customer-video.is-playing:focus-within .customer-play { opacity: 1; }

/* Dense six-column bento */
.customer-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 200px 200px 165px; grid-auto-flow: dense; gap: 18px; }
.customer-bento .bento-card { min-height: 0; }
.customer-bento .bento-header { background: var(--accent-color); padding: 28px; }
#our-production .customer-bento .bento-header h2 { font-size: 34px; font-weight: 500; letter-spacing: 0; color: #fff; }
.customer-bento .bento-header p { font-size: 14px; }
.customer-original-0 { grid-column: 1/4 !important; grid-row: 1 !important; }
.customer-original-1 { grid-column: 4 !important; grid-row: 1/3 !important; }
.customer-original-2 { grid-column: 1/3 !important; grid-row: 2 !important; }
.customer-original-3 { grid-column: 3 !important; grid-row: 2 !important; }
.customer-original-4 { grid-column: 4 !important; grid-row: 3 !important; }
.customer-original-5 { grid-column: 1/3 !important; grid-row: 3 !important; }
.customer-original-6 { grid-column: 3 !important; grid-row: 3 !important; }
.customer-original-7 { grid-column: 5/7 !important; grid-row: 3 !important; }
.customer-bento-stock { grid-column: 5; grid-row: 1/3; aspect-ratio: auto; }
.customer-bento-shipping { grid-column: 6; grid-row: 1/3; aspect-ratio: auto; }
.customer-bento-photo { grid-column: span 2; aspect-ratio: 4/3; }
.customer-bento .bento-feature { padding: 22px; display: flex; gap: 12px; }
.customer-bento .bento-feature-icon { width: 38px; height: 38px; flex-shrink: 0; }
.customer-bento .bento-feature-text strong { font-size: 15px; }
.customer-bento .bento-feature-text span { font-size: 12px; }

@media (max-width: 991px) {
  .customer-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 190px; }
  .customer-bento .customer-original-0 { grid-column: 1/3 !important; grid-row: 1 !important; }
  .customer-bento .customer-original-1 { grid-column: 3 !important; grid-row: 1/3 !important; }
  .customer-bento .customer-original-2 { grid-column: 1/3 !important; grid-row: 2 !important; }
  .customer-bento .customer-original-3 { grid-column: 1 !important; grid-row: 3 !important; }
  .customer-bento .customer-original-4 { grid-column: 2 !important; grid-row: 3 !important; }
  .customer-bento .customer-original-5 { grid-column: 1/3 !important; grid-row: 4 !important; }
  .customer-bento .customer-original-6 { grid-column: 3 !important; grid-row: 4 !important; }
  .customer-bento .customer-original-7 { grid-column: 4 !important; grid-row: 4 !important; }
  .customer-bento-stock { grid-column: 4; grid-row: 1/3; }
  .customer-bento-shipping { grid-column: 3/5; grid-row: 3; aspect-ratio: auto; }
  /* Фото занимают ровно одну строку сетки, иначе 4:3 вылезает за 190px и карточки наезжают. */
  .customer-bento-photo { aspect-ratio: auto; grid-row: span 1; }
}

@media (max-width: 575px) {
  .customer-bento { display: flex; flex-direction: column; gap: 16px; }
  .customer-bento .bento-header { padding: 28px; min-height: 180px; }
  #our-production .customer-bento .bento-header h2 { font-size: 30px; }
  .customer-bento .bento-image-1,
  .customer-bento .bento-image-2 { height: 260px; }
  .customer-bento .bento-video { height: 220px; }
  .customer-bento > .customer-video { aspect-ratio: 9/16; max-height: 590px; }
  .customer-bento .bento-feature { min-height: 100px; flex-direction: row; }
  .customer-bento-photo { aspect-ratio: 4/3; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-media { transition: none; }
  .customer-media:hover { transform: none; }
}