/* Kiwivi — презентація товару («Огляд»): вступ, бенто-плитки, розділи з фото, інфографіка виробника.
   Кольори суцільні, кути прямі — як у решті магазину. --accent / --c задає сторінка; --ink — колір тексту на --c. */

.pz { --accent: var(--turq); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }

.pz-intro { max-width: 920px; display: flex; flex-direction: column; gap: 14px; font-size: clamp(17px, 1.45vw, 20px); font-weight: 500; line-height: 1.6; color: #E4E4E4; }
.pz-intro strong { color: var(--text); font-weight: 800; }

/* ---------- Бенто ---------- */
.pz-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 18vw, 262px); grid-auto-flow: dense; gap: 12px; }
.pz--w { grid-column: span 2; }
.pz--t { grid-row: span 2; }
.pz--l { grid-column: span 2; grid-row: span 2; }
.pz-tile { --ink: #000000; position: relative; min-width: 0; margin: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); }
.pz-tile__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 0; }
.pz-tile__title { margin: 0; font: 900 clamp(22px, 2vw, 30px)/0.98 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.pz-tile p { margin: 0; color: #C9C9C9; font-weight: 600; font-size: 14.5px; line-height: 1.5; }
.pz-tile__media { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.pz-tile__media img { position: absolute; inset: 0; margin: auto; width: 86%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .55));
  transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); transition: transform .4s; }
/* деталь крупним планом: кадр заповнює плитку й наближається до точки --fx/--fy */
.pz-tile__media img[style*="--z"] { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); filter: none; }
.pz-tile:hover .pz-tile__media img { transform: scale(calc(var(--z, 1) * 1.04)); }

/* особливість: текст і фото; широка плитка — поруч */
.pz-tile--feature .pz-tile__title { color: var(--text); }
.pz-tile--feature .pz-tile__body::before, .pz-tile--stat::before { content: ""; width: 34px; height: 4px; background: var(--c); }
.pz-tile--feature:not(.has-media) .pz-tile__body { flex: 1 1 auto; justify-content: flex-end; padding-bottom: 22px; }
.pz-tile.has-media.pz--w { flex-direction: row; }
.pz-tile.has-media.pz--w .pz-tile__body { flex: 0 0 46%; justify-content: center; padding-bottom: 22px; }
.pz-tile.has-media.pz--w .pz-tile__media { min-height: 0; }

/* велика цифра */
.pz-tile--stat { justify-content: flex-end; gap: 10px; padding: 22px; }
.pz-tile--stat::before { position: absolute; top: 22px; left: 22px; }
.pz-stat { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pz-stat__value { font: 900 clamp(50px, 5.4vw, 92px)/0.86 var(--display); color: var(--c); letter-spacing: -.01em; white-space: nowrap; }
.pz-stat__unit { font: 900 clamp(20px, 1.8vw, 28px)/1 var(--display); color: var(--text); text-transform: uppercase; }
.pz-tile--stat .pz-tile__title { font-size: clamp(18px, 1.5vw, 22px); }

/* суцільний колір: головна плитка й акценти */
.pz-tile--hero, .pz-tile--color { background: var(--c); border-color: var(--c); color: var(--ink); }
.pz-tile--hero .pz-tile__title, .pz-tile--color .pz-tile__title { color: var(--ink); }
.pz-tile--hero p, .pz-tile--color p { color: var(--ink); opacity: .82; }
.pz-tile--hero .pz-tile__body { padding: clamp(22px, 2.6vw, 36px) clamp(22px, 2.6vw, 36px) 0; gap: 12px; }
.pz-tile--hero .pz-tile__title { font-size: clamp(32px, 3.4vw, 54px); line-height: .92; }
.pz-tile--hero p { font-size: 16px; max-width: 520px; }
.pz-tile--hero .pz-tile__media img { width: 74%; filter: drop-shadow(0 26px 32px rgba(0, 0, 0, .45)); }
.pz-tile--color:not(.has-media) .pz-tile__body { flex: 1 1 auto; justify-content: flex-end; padding-bottom: 22px; }

/* фото на темній сцені; фото з власним фоном — на всю плитку */
.pz-tile--image .pz-tile__media { background: radial-gradient(60% 60% at 50% 50%, #222222 0%, #0F0F0F 74%); }
.pz-tile--photo .pz-tile__media img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); filter: none; }
.pz-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 30px 16px 14px; font-weight: 700; font-size: 13px; line-height: 1.4; color: #E6E6E6;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }

/* ---------- Розділи опису ---------- */
.pz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 4vw, 64px); }
.pz-row--flip .pz-row__media { order: 2; }
.pz-row__media { margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(60% 60% at 50% 50%, #232323 0%, #0F0F0F 74%); }
.pz-row__media img { width: 78%; height: 88%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }
.pz-row--photo .pz-row__media img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.pz-row__text { display: flex; flex-direction: column; gap: 14px; }
.pz-row__text h3, .pz-text h3, .pz-list h3, .pz-made__title { margin: 0; font: 900 clamp(28px, 3vw, 44px)/0.95 var(--display); text-transform: uppercase; }
.pz-row__text h3::before, .pz-text h3::before, .pz-list h3::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: 16px; background: var(--accent); }
.pz-row__text p, .pz-text p, .pz-note p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #D2D2D2; }
.pz-row__text strong, .pz-text strong, .pz-note strong { color: var(--text); }
.pz-text { max-width: 920px; display: flex; flex-direction: column; gap: 14px; }

.pz-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pz-checks li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; color: #D2D2D2; }
.pz-checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--accent); }

/* «Кому підійде» — картки з номерами */
.pz-list { display: flex; flex-direction: column; gap: 18px; }
.pz-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pz-cards li { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 15.5px; line-height: 1.5; color: #DADADA; }
.pz-cards__n { font: 900 34px/1 var(--display); color: var(--accent); }

/* «Що варто знати» — помітна примітка */
.pz-note { max-width: 920px; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.pz-note h3 { margin: 0; font: 800 20px/1.3 var(--ui); }

/* інфографіка виробника */
.pz-made { display: flex; flex-direction: column; gap: 18px; }
.pz-made__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pz-made__grid figure { margin: 0; display: grid; place-items: center; background: #0F0F0F; border: 1px solid var(--line); overflow: hidden; }
.pz-made__grid img { width: 100%; height: auto; display: block; }

@media (max-width: 1100px) {
  .pz-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 8px; }
  .pz--t { grid-row: span 1; }
  .pz-tile__media { flex: 1 1 auto; min-height: 150px; }
  .pz-tile--hero .pz-tile__media { min-height: 270px; }
  .pz-tile.has-media.pz--w .pz-tile__media { min-height: 200px; }
  .pz-tile--image .pz-tile__media { min-height: 188px; }
  .pz-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pz-row--flip .pz-row__media { order: 0; }
  .pz-made__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pz-tile__body { padding: 16px 16px 0; }
  .pz-tile--stat { padding: 16px; }
  .pz-tile--stat::before { top: 16px; left: 16px; }
  .pz-tile.has-media.pz--w { flex-direction: column; }
  .pz-tile.has-media.pz--w .pz-tile__body { flex: none; padding-bottom: 0; }
  .pz-tile p { font-size: 13.5px; }
  .pz-stat__value { font-size: 44px; }
  .pz-tile--hero .pz-tile__media img { width: 70%; }
}