/* === ZEM PRODUCT PAGE === */

/* ── Layout Variables ── */
:root {
  --zem-hero-height:   450px;
  --zem-product-gap:   24px;
  --zem-gallery-w:     510px;
  --zem-details-w:     509px;
  /* Stage A 2026-06-17 (P5): радіуси з Figma. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-product.css */
  --zem-r-hero:        8px;   /* головне фото галереї (Figma corner 8) */
  --zem-r-card:        4px;   /* thumbs / картки (Figma corner 4) */
  --zem-r-btn:         2px;   /* кнопки booking (Figma corner 2) */
}

/* ── Page reset ── */
#zem-product-page {
  background: var(--zem-bg-page);
  color: var(--zem-white);
  letter-spacing: 0.02em;   /* Figma: всё PDP-текст tracking 2% */
}
#zem-product-page * { box-sizing: border-box; }

/* ── Container ── */
.zem-product-container {
  max-width: 1043px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1440px) {
  .zem-product-container {
    padding: 0 0px;
    /*padding: 0 20px; */
  }
}

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.zem-hero {
  position: relative;
  width: 100%;
  height: var(--zem-hero-height);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.zem-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}
.zem-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1043px;
  margin: 0 auto 48px;
  padding: 0 200px;
  width: 100%;
}
@media (max-width: 1440px) {
  .zem-hero__content { padding: 0 20px; }
}
.zem-hero__title {
  font: 400 32px/1.2 Unbounded, sans-serif;
  color: var(--zem-white);
  margin: 0 0 24px;
  max-width: 410px;
}

/* ── CTA Button (base) ── */
.zem-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 196px;
  height: 48px;
  padding: 0 24px;
  font: 400 14px/1 Unbounded, sans-serif;
  color: var(--zem-gold-muted);
  border: 1px solid var(--zem-gold-border);
  background: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--zem-r-btn);   /* Stage A 2026-06-17 P5 (Figma booking corner 2) */
  transition: background 0.2s, color 0.2s;
}
.zem-btn-cta:hover { background: var(--zem-gold-muted); color: #fff; }
.zem-btn-cta--full { width: 100%; min-width: 0; }
.zem-btn-cta--order { width: 160px; height: 32px; min-width: 0; }

/* ── Hero dots ── */
.zem-hero__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.zem-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}
.zem-dot--active { background: var(--zem-gold); }

/* ══════════════════════════════════
   BREADCRUMBS — unified zem-svc-bc--listing (parity with category/blog)
══════════════════════════════════ */
body[class*="product-product"] .breadcrumbs .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
body[class*="product-product"] .zem-svc-bc--listing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
body[class*="product-product"] .zem-svc-bc--listing a {
  color: #fff;
  opacity: .6;
  text-decoration: none;
  transition: opacity .15s;
}
body[class*="product-product"] .zem-svc-bc--listing a:hover {
  opacity: 1;
}
body[class*="product-product"] .zem-svc-bc--listing .zem-svc-bc__sep {
  color: #fff;
  opacity: .35;
}
body[class*="product-product"] .zem-svc-bc--listing .zem-svc-bc__current {
  color: #b18952;
}

/* ══════════════════════════════════
   MAIN CONTENT LAYOUT
══════════════════════════════════ */
.zem-product-main {
  padding: 40px 0;
  background: var(--zem-bg-page);
  padding-top: 0px !important;
}
.zem-product-main__inner {
  display: flex;
  gap: var(--zem-product-gap);
  align-items: flex-start;
}

/* ══════════════════════════════════
   GALLERY (ліва колонка)
══════════════════════════════════ */
.zem-product-gallery {
  flex: 0 0 var(--zem-gallery-w);
  width: var(--zem-gallery-w);
}
/* Box follows the photo — fixed 510×423 left empty strips (looked like frames). */
.zem-gallery__main {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.zem-gallery__main a {
  display: block;
  width: 100%;
  line-height: 0;
}
.zem-gallery__main img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}
/* ── Thumbnail slider ── */
.zem-gallery__thumbs {
  position: relative;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.zem-thumbs-track {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.zem-thumbs-inner {
  display: flex;
  gap: 16px;
  transition: transform 0.3s ease;
}
.zem-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 103px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--zem-r-card);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s;
  /*background: var(--zem-bg-card);*/
}
.zem-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.zem-thumb:hover,
.zem-thumb--active { border-color: var(--zem-gold); }
.zem-thumb--video { position: relative; }
.zem-thumb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
.zem-gallery__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--zem-bg-card);
}
.zem-gallery__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.zem-thumbs-nav {
  background: var(--zem-bg-inactive);
  border: 1px solid var(--zem-border);
  color: var(--zem-gold);
  width: 28px;
  height: 103px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, opacity 0.2s;
  border-radius: var(--zem-r-card);
  line-height: 1;
  padding: 0;
}
.zem-thumbs-nav:hover { border-color: var(--zem-gold); }
.zem-thumbs-nav[hidden] { display: none; }

/* ══════════════════════════════════
   PRODUCT DETAILS (права колонка)
══════════════════════════════════ */
.zem-product-details {
  /*flex: 0 0 var(--zem-details-w);*/
  width: var(--zem-details-w);
  display: flex;
  flex-direction: column;
}

/*body[class*="product-product"] .breadcrumbs .container{*/
/*  padding-right: 0px;*/
/*  padding-left: 0px;*/
/*}*/

.zem-product-title {
  font: 400 24px/1.3 Unbounded, sans-serif;
  color: var(--zem-white);
  margin: 0 0 20px;
}
/* Mobile-only title (before breadcrumbs) — hidden on desktop */
.zem-product-title--mob { display: none; }

/* ── Attributes preview ── */
.zem-detail-attrs { list-style: none; margin: 0 0 8px; padding: 0; }
.zem-detail-attr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  border-bottom: 1px solid var(--zem-border);
}
.zem-detail-attr-name,
.zem-detail-attr-value {
  font: 300 12px Montserrat, sans-serif;
  color: rgba(255,255,255,0.6);   /* Figma: spec text node opacity 0.6 (приглушённий) */
}

/* ── Price (main: big two-size, Figma 56:1806) ── */
.zem-product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 24px;
}
.zem-price-label { font: 300 12px Montserrat, sans-serif; color: var(--zem-white); }
.zem-price-value { font: 400 32px/1 Montserrat, sans-serif; color: var(--zem-gold); }
.zem-price-cur   { font: 400 14px/1 Montserrat, sans-serif; color: var(--zem-gold); margin: 0 2px 0 4px; }
.zem-price-unit  { font: 300 14px/1 Montserrat, sans-serif; color: var(--zem-white); }

/* ── Date options ── */
.zem-product-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.zem-option-wrap label {
  display: block;
  font: 300 12px Montserrat, sans-serif;
  color: rgba(255,255,255,0.6);   /* Figma: form label node opacity 0.6 */
  margin-bottom: 6px;
}
.zem-date-wrap {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: visible;
  background: var(--zem-bg-inactive);
  border: 1px solid var(--zem-border);
  height: 32px;
  max-width: 280px;
}
.zem-date-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--zem-white);
  font: 300 12px Montserrat, sans-serif;
  padding: 0 12px;
  outline: none;
  height: 100%;
  cursor: pointer;
}
.zem-date-input::placeholder { color: rgba(255,255,255,0.4); }
.zem-date-icon {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--zem-gold);
  flex-shrink: 0;
}

/* ── CTA spacing in details ── */
.zem-product-details .zem-btn-cta--order { margin-bottom: 16px; }

/* ── Disclaimer ── */
.zem-product-disclaimer {
  font: 300 12px/1.5 Montserrat, sans-serif;
  color: var(--zem-white);
  margin: 0;
  opacity: .3;   /* Stage A 2026-06-17 P4: Figma 56:1906 muted .3 */
}

/* ══════════════════════════════════
   TABS
══════════════════════════════════ */
.zem-product-tabs {
  background: var(--zem-bg-page);
  padding: 40px 0;
}
/* Figma 69:1954 Frame 104 — tabs+content sit in a #1D1D1D rounded card (radius 4, pad 24/32) */
.zem-product-tabs > .zem-product-container {
  background: var(--zem-bg-card);
  border-radius: 4px;
  padding: 24px 32px;
}
.zem-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 16px;
}
.zem-tab-btn {
  font: 300 14px Montserrat, sans-serif;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  height: 40px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.zem-tab-btn:hover { color: var(--zem-white); }
/* Figma 69:1909/1953/2003: активный таб — полный белый (opacity 1), неактивные — opacity .5.
   НЕТ золота и НЕТ подчёркивания (это была выдумка вёрстки). */
.zem-tab-btn--active {
  color: var(--zem-white);
  opacity: 1;
  border-bottom-color: transparent;
}
.zem-tab-pane { display: none; padding-bottom: 40px; }
.zem-tab-pane--active { display: block; }

/* ══════════════════════════════════
   TAB: ОПИС
══════════════════════════════════ */
.zem-description {
  max-width: 979px;
  font: 300 16px/1.7 Montserrat, sans-serif;
  color: var(--zem-white);
}
.zem-description h2,
.zem-description h3 {
  font: 400 20px Jura, sans-serif;
  color: var(--zem-white);
  margin: 24px 0 12px;
}
.zem-description p  { margin: 0 0 16px; }
.zem-description a  { color: var(--zem-gold); }
.zem-description ul,
.zem-description ol { padding-left: 20px; margin-bottom: 16px; }
.zem-description li { margin-bottom: 6px; }

/* ══════════════════════════════════
   TAB: ХАРАКТЕРИСТИКИ
══════════════════════════════════ */
.zem-attrs-table { max-width: 600px; margin: 0 auto; }
.zem-attrs-group-title {
  font: 400 14px Jura, sans-serif;
  color: var(--zem-gold);
  margin: 24px 0 8px;
}
.zem-attrs-group-title:first-child { margin-top: 0; }
.zem-attr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 22px;
  padding: 4px 0;
  border-bottom: 1px solid var(--zem-border);
}
.zem-attr-name {
  font: 300 16px Montserrat, sans-serif;   /* PM override 2026-06-17: 16px (Figma=12px, надто дрібно) */
  color: rgba(255,255,255,0.6);   /* Figma: характеристики text opacity 0.6 */
  flex: 0 0 50%;
}
.zem-attr-value {
  font: 300 16px Montserrat, sans-serif;   /* PM override 2026-06-17: 16px (Figma=12px) */
  color: rgba(255,255,255,0.6);
  text-align: right;
}

/* ══════════════════════════════════
   TAB: ВІДГУКИ — список (AJAX OC)
══════════════════════════════════ */
.zem-reviews-list { margin-bottom: 40px; }

#review .review {
  border-bottom: 1px solid var(--zem-border);
  padding: 20px 0;
}
#review .review:first-child { padding-top: 0; }
#review .review-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
#review .review-author strong {
  font: 400 12px Montserrat, sans-serif;
  color: var(--zem-white);
}
#review .review-date {
  font: 300 12px Montserrat, sans-serif;
  color: rgba(255,255,255,0.5);
}
#review .review-description p {
  font: 300 16px/1.6 Montserrat, sans-serif;
  color: var(--zem-white);
  margin: 0;
}
#review .rating .fa-star   { color: var(--zem-yellow); }
#review .rating .fa-star-o { color: var(--zem-border); }

#review .pagination {
  display: flex; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0;
}
#review .pagination li a,
#review .pagination li span {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  font: 300 12px Montserrat;
  background: var(--zem-bg-inactive);
  color: var(--zem-white);
  text-decoration: none;
}
#review .pagination li.active span { background: var(--zem-gold); }

/* ══════════════════════════════════
   TAB: ВІДГУКИ — форма
══════════════════════════════════ */
.zem-review-form-wrap {
  border-top: 1px solid var(--zem-border);
  padding-top: 32px;
  margin-top: 16px;
}
.zem-review-form-title {
  font: 400 18px Unbounded, sans-serif;
  color: var(--zem-white);
  margin: 0 0 24px;
}
.zem-review-form { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.zem-review-field { display: flex; flex-direction: column; gap: 6px; }
.zem-review-field label {
  font: 300 12px Montserrat, sans-serif;
  color: rgba(255,255,255,0.7);
}
.zem-input,
.zem-textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--zem-border);
  color: var(--zem-white);
  font: 300 13px Montserrat, sans-serif;
  padding: 10px 14px;
  outline: none;
  resize: vertical;
}
.zem-input:focus,
.zem-textarea:focus { border-color: var(--zem-gold); }
.zem-review-note {
  font: 300 11px Montserrat, sans-serif;
  color: rgba(255,255,255,0.4);
  margin: 4px 0 0;
}

/* CSS-only star rating */
.zem-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.zem-rating input[type=radio] { display: none; }
.zem-rating label {
  font-size: 24px;
  color: var(--zem-border);
  cursor: pointer;
  transition: color 0.15s;
}
.zem-rating input:checked ~ label,
.zem-rating label:hover,
.zem-rating label:hover ~ label { color: var(--zem-yellow); }

.zem-btn-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 32px;
  font: 400 13px Montserrat, sans-serif;
  color: var(--zem-gold);
  border: 1px solid var(--zem-gold);
  background: none;
  cursor: pointer;
}
.zem-btn-submit:hover { background: var(--zem-gold); color: #fff; }

.zem-review-login {
  font: 300 13px Montserrat;
  color: rgba(255,255,255,0.6);
}
.zem-alert {
  padding: 12px;
  font: 300 13px Montserrat;
  margin-bottom: 16px;
}
.zem-alert--success {
  background: rgba(177,136,81,0.15);
  border: 1px solid var(--zem-gold);
  color: var(--zem-white);
}
.zem-alert--error {
  background: rgba(200,60,60,0.15);
  border: 1px solid #c83c3c;
  color: var(--zem-white);
}

/* ══════════════════════════════════
   INQUIRY POPUP MODAL
══════════════════════════════════ */
.zem-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zem-modal[hidden] { display: none; }
.zem-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  cursor: pointer;
}
.zem-modal__box {
  position: relative;
  z-index: 1;
  background: var(--zem-bg-card);
  border: 1px solid var(--zem-border);
  width: 480px;
  max-width: calc(100vw - 40px);
  padding: 40px;
}
.zem-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  background: none; border: none;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.zem-modal__close:hover { color: var(--zem-white); }
.zem-modal__title {
  font: 400 20px Unbounded, sans-serif;
  color: var(--zem-white);
  margin: 0 0 28px;
}
.zem-modal__form { display: flex; flex-direction: column; gap: 16px; }
.zem-modal__field { display: flex; flex-direction: column; gap: 6px; }
.zem-modal__field label {
  font: 300 12px Montserrat, sans-serif;
  color: rgba(255,255,255,0.7);
}
.zem-modal__result { display: none; font: 300 13px Rubik; }
.zem-modal__result--success {
  display: block;
  color: var(--zem-gold);
  padding: 12px;
  border: 1px solid var(--zem-gold);
  background: rgba(177,136,81,0.1);
}
.zem-modal__result--error {
  display: block;
  color: #ff6b6b;
  padding: 12px;
  border: 1px solid #ff6b6b;
}

/* ══════════════════════════════════
   SERVICES BLOCK (content_bottom)
══════════════════════════════════ */
.zem-product-services {
  padding: 20px 0;
  overflow: visible;
}
.zem-product-services .zem-services-more {
  margin-bottom: 8px;
}

/* ══════════════════════════════════
   RELATED PRODUCTS
══════════════════════════════════ */
.zem-related {
  padding: 60px 0;
  background: var(--zem-bg-page);
}
.zem-related__title {
  font: 400 32px Unbounded, sans-serif;
  color: var(--zem-white);
  margin: 0 0 32px;
  text-align: center;
}
.zem-related-grid {
  grid-template-columns: repeat(4, 242px);
  gap: 24px;
  justify-content: space-between;
}
.zem-related .zem-card--grid { min-height: 280px; }
.zem-related .zem-card__img-wrap {
  height: auto;
  overflow: hidden;
  display: block;
  background: var(--zem-bg-card);
}
.zem-related .zem-card__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.zem-related .zem-card__price { margin-top: auto; }

/* ══════════════════════════════════
   OVERRIDES: global !important від stylesheet.css
   (рядки 4571/4574/4579: p 22px, button 18px, .zem-product-price 22px)
══════════════════════════════════ */
#zem-product-page .zem-btn-cta          { font-size: 14px !important; }
#zem-product-page .zem-tab-btn          { font: 400 18px/1 Montserrat, sans-serif !important; }
#zem-product-page .zem-product-disclaimer { font-size: 12px !important; line-height: 1.5 !important; color: var(--zem-white) !important; }
#zem-product-page .zem-description p   { font-size: 14px !important; line-height: 1.7 !important; color: var(--zem-white) !important; }
#zem-product-page .zem-description li   {
  font-size: 14px !important;
  display: list-item;
}
#zem-product-page .zem-description ul   {
  list-style: disc;
  list-style-type: disc;
}
/* Review submit — beat global button{font-size:18px!important} → outline #B28952 */
#zem-product-page .zem-btn-submit       { font: 400 14px/1 Montserrat, sans-serif !important; color: var(--zem-gold-muted) !important; border: 1px solid var(--zem-gold-border) !important; height: 32px !important; padding: 0 32px !important; }
#zem-product-page .zem-btn-submit:hover { background: var(--zem-gold-muted) !important; color: #fff !important; }
/* Main price — big two-size (beat global .zem-product-price 22px) */
#zem-product-page .zem-product-price                  { font-weight: 400 !important; }
#zem-product-page .zem-product-price .zem-price-value { font: 400 32px/1 Montserrat, sans-serif !important; color: var(--zem-gold) !important; }
#zem-product-page .zem-product-price .zem-price-cur   { font: 400 18px/1 Montserrat, sans-serif !important; color: var(--zem-gold) !important; margin: 0 2px 0 4px; }  /* 2026-06-18: валюта повернена */
#zem-product-page .zem-product-price .zem-price-unit  { font: 300 16px/1 Montserrat, sans-serif !important; color: var(--zem-white) !important; }
/* Related card price — label + 16px gold + suffix */
#zem-product-page .zem-card__price .zem-price-label   { font-size: 12px !important; font-weight: 300 !important; color: var(--zem-white) !important; }
#zem-product-page .zem-card__price .zem-price-value   { font: 400 14px/1 Montserrat, sans-serif !important; color: var(--zem-gold) !important; }
#zem-product-page .zem-card__price .zem-price-unit    { font-size: 10px !important; font-weight: 300 !important; color: var(--zem-white) !important; }   /* Stage A 2026-06-17 P9: «8 год» 12→10px */
/* Related card title — Figma Prata 14/400 #fff (kill global Oswald/#ECE9E3; zem-catalog.css not loaded on PDP). Stage A 2026-06-17 P7 */
#zem-product-page .zem-related .zem-card__title,
#zem-product-page .zem-related .zem-card__title a     { font: 400 14px/1.3 Montserrat, sans-serif !important; color: #fff !important; text-decoration: none !important; }

#zem-product-page .zem-related .zem-card__title{
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Hide attribute-group title (Figma char tab has none; also masks RU group name) */
#zem-product-page .zem-attrs-group-title { display: none !important; }

/* ══════════════════════════════════
   FORM CARD + STEPPER + ADDRESS  (Figma 56:1808 / 56:1884 / 56:1843)
══════════════════════════════════ */
.zem-form-card {
  background: var(--zem-bg-card);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 160px;   /* Figma 56:1808: лев. поля + прав. колонка 160 */
  gap: 18px 21px;
  align-items: start;
  margin-bottom: 16px;
  overflow: visible;
}
.zem-product-options,
.zem-product-options .zem-option-wrap {
  overflow: visible;
}
.zem-form-card .zem-product-options { margin-bottom: 0; }      /* date — row1 col1 */
.zem-form-card .zem-qty-wrap { margin: 0; }                    /* qty  — row1 col2 */
.zem-form-card .zem-btn-cta--order { margin: 0; align-self: end; }  /* button — row2 col2 (низ ячейки) */
.zem-product-details .zem-form-card .zem-btn-cta--order { margin-bottom: 0; }
.zem-form-card .zem-stepper { width: 100%; }
/* fields transparent on the card (icon box stays #2F2F2F) */
.zem-date-wrap, .zem-addr-wrap { background: transparent; }
.zem-addr-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--zem-white);
  font: 300 12px Unbounded, sans-serif;
  padding: 0 12px;
  outline: none;
  height: 100%;
}
.zem-addr-input::placeholder { color: rgba(255,255,255,0.4); }
.zem-date-icon {
  width: 32px;
  height: 32px;
  align-self: center;
  flex-shrink: 0;
  background-color: var(--zem-bg-inactive);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
}
button.zem-date-icon {
  display: flex;
  appearance: none;
}
button.zem-date-trigger:hover,
button.zem-date-trigger:focus {
  background-color: #3a3a3a;
  outline: none;
}
.zem-date-wrap .input-group-btn {
  width: auto;
  flex-shrink: 0;
}
.zem-date-wrap .input-group-btn > .btn {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1;
}
/* 2026-06-18: Figma design icons (node 56:1810 calendar / 56:1845 geo) — SVG несёт свой бокс+белый глиф,
   заменили самодельный gold-svg. Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-product.css */
.zem-date-wrap.date .zem-date-icon { background-image: url(../image/icons/icon-calendar.svg); }
.zem-addr-wrap .zem-date-icon { background-image: url(../image/icons/icon-geo.svg); }
.zem-stepper {
  display: flex;
  align-items: center;
  width: 160px;
  height: 32px;
  border: 1px solid var(--zem-border);
}
.zem-stepper__btn {
  width: 32px; height: 32px;
  background: var(--zem-bg-inactive);
  border: none;
  color: var(--zem-white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.zem-stepper__btn:hover { color: var(--zem-gold); }
.zem-stepper__input {
  flex: 1; width: 100%;
  text-align: center;
  background: none; border: none;
  color: var(--zem-white);
  font: 300 12px Unbounded, sans-serif;
  outline: none;
}

/* ══════════════════════════════════
   RELATED CARD ACTIONS  (Figma 56:357 — ♡ ⇄ + ЗАМОВИТИ)
══════════════════════════════════ */
.zem-card__actions { display: flex; align-items: center; gap: 8px; }
.zem-card__icon {
  width: 32px; height: 32px;
  background: var(--zem-bg-inactive);
  border: 1px solid var(--zem-border);
  color: var(--zem-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.zem-card__icon:hover { border-color: var(--zem-gold); color: var(--zem-gold); }
.zem-related .zem-btn-order {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  height: 32px;
  /*background: rgba(255,255,255,0.10);*/
  border: 1px solid var(--zem-gold-border);
  color: var(--zem-gold-muted);
  font: 400 14px/1 Unbounded, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}
.zem-related .zem-btn-order:hover { background: var(--zem-gold-muted); color: #fff; }

/* ══════════════════════════════════
   ROUND 2 FIXES (B1/B4/B12)
══════════════════════════════════ */
/* B1 — скрыть тему-виджет «вгору» (нет в Figma) */
body:has(#zem-product-page) #back-top { display: none !important; }

/* B4 — красная required-зірочка (Figma 56:1811/56:1844: *Початок оренди / *Адреса доставки) */
.zem-form-card .zem-option-wrap.required > label::before { content: '*'; color: #E5484D; margin-right: 4px; }
.zem-date-wrap.date { cursor: pointer; }
.zem-field--error { border-color: #E5484D !important; }
.zem-form-error {
  grid-column: 1 / -1;
  font: 300 12px/1.4 Montserrat, sans-serif;
  color: #E5484D;
  margin: -6px 0 0;
}

/* B12 — цена карточки related: «Оренда від» зліва, ціна справа (Figma Frame95) */
#zem-product-page .zem-card__price { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
#zem-product-page .zem-card__price-val { display: inline-flex; align-items: baseline; gap: 2px; }
/* B12 — глифы иконок карточки заливаются currentColor (hover → gold) */
.zem-card__icon svg { width: 32px; height: 32px; display: block; }

/* B9 — список відгуків картками (Figma 69:2003), без зірок/таблиці */
#review .zem-review { border-bottom: 1px solid #5A5A5A; padding: 20px 0; }
#review .zem-review:first-child { padding-top: 0; }
#review .zem-review__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
#review .zem-review__author { font: 400 12px Unbounded, sans-serif; color: var(--zem-white); }
#review .zem-review__date { font: 300 12px Unbounded, sans-serif; color: var(--zem-white); }
#review .zem-review__text { font: 300 16px/1.6 Unbounded, sans-serif; color: var(--zem-white); }
#review .zem-no-reviews { font: 300 14px Unbounded, sans-serif; color: rgba(255,255,255,0.6); }
#review .zem-review-pagination { margin-top: 20px; }

/* ══════════════════════════════════════════════════════════════════
   STAGE B 2026-06-17 — RESPONSIVE (P6/C10, ladder MASTER §3.1)
   PDP мав лише @media(max-width:1440) padding → overflow <1080px.
   Лестница: BP2 ≤1199 · BP3 ≤991 · BP4 ≤767 · BP5 ≤420 (BS3-aligned).
   Rollback: git checkout home_page -- catalog/view/theme/tt_mirora1/stylesheet/zem-product.css
══════════════════════════════════════════════════════════════════ */

/* ── BP2 Laptop ≤1199: фікс-колонки → flex (зберегти 2-col), галерея fluid, related 4→3 ── */
@media (max-width: 1199px) {
  .zem-product-main__inner { gap: 20px; }
  .zem-product-gallery { flex: 1 1 510px; width: auto; min-width: 0; }
  .zem-product-details { flex: 1 1 509px; width: auto; min-width: 0; }
  .zem-gallery__main   { width: 100%; height: auto; }
  .zem-related-grid    { grid-template-columns: repeat(3, 1fr); justify-content: stretch; }
}

/* ── BP3 Tablet ≤991: main → вертикальний стэк; related 3→2; tabs-nav wrap; заголовок 32→28 ── */
@media (max-width: 991px) {
  .zem-product-main__inner { flex-direction: column; gap: 24px; }
  .zem-product-gallery,
  .zem-product-details     { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .zem-related-grid        { grid-template-columns: repeat(2, 1fr); }
  .zem-tabs-nav            { gap: 16px; flex-wrap: wrap; }
  .zem-product-tabs > .zem-product-container { padding: 20px; }
  .zem-related__title      { font-size: 28px; }

  /* title moves above breadcrumbs on mobile; hide the in-details copy */
  .zem-product-title--mob { display: block; text-align: center; margin: 0 0 12px; }
  .zem-product-details > .zem-product-title { display: none; }

  /* breadcrumbs: full width, wrap by words (not per-segment flex) */
  body[class*="product-product"] .zem-svc-bc--listing {
    display: block;
    width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body[class*="product-product"] .zem-svc-bc--listing a,
  body[class*="product-product"] .zem-svc-bc--listing .zem-svc-bc__current,
  body[class*="product-product"] .zem-svc-bc--listing .zem-svc-bc__sep {
    display: inline;
  }
}

/* ── BP4 Mobile-L ≤767: ужати паддінги; form-card 1-col; thumbs wrap; заголовки 28→24/24→22 ── */
@media (max-width: 767px) {
  .zem-product-container {
    padding: 0 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .zem-product-main  { padding: 32px 0; }
  .zem-product-tabs  { padding: 32px 0; }
  .zem-related       { padding: 40px 0; }
  .zem-product-main__inner { gap: 16px; }
  .zem-gallery__thumbs { gap: 4px; }
  .zem-thumb { width: 100px; height: 83px; }
  .zem-form-card     { grid-template-columns: 1fr; gap: 16px; }
  .zem-form-card .zem-btn-cta--order { width: 100%; }
  /* 2026-06-18: дата мала max-width:280px → у 1-кол. сітці була вужча за адресу. Знімаємо кап, щоб поля даты й адреси були однакової ширини. */
  .zem-form-card .zem-date-wrap { max-width: 100%; }
  .zem-related-grid  { grid-template-columns: 1fr; gap: 16px; }
  .zem-related__title { font-size: 24px; }
  .zem-product-title  { font-size: 22px; }
  .zem-tabs-nav       { gap: 12px; }
  .zem-tab-btn        { padding: 8px 10px; }
}

/* ── BP5 Mobile-S ≤420: заголовок 24→22 ── */
@media (max-width: 420px) {
  .zem-related__title    { font-size: 22px; }
  .zem-tabs-nav          { gap: 8px; }
}

/* Stray widgets appended to body must not affect page height */
body > .bootstrap-datetimepicker-widget {
  display: none !important;
}

/* Datepicker popup on PDP — widget lives inside .zem-date-wrap */
.zem-date-wrap.date .bootstrap-datetimepicker-widget {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 10050 !important;
  width: 280px;
  max-width: min(280px, 100vw - 32px);
  display: none;
}
.zem-date-wrap.date .bootstrap-datetimepicker-widget.picker-open {
  display: block !important;
}
.zem-date-wrap.date .bootstrap-datetimepicker-widget.dropdown-menu {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  color: #ece9e3;
}
.zem-date-wrap.date .bootstrap-datetimepicker-widget table td.day:hover,
.zem-date-wrap.date .bootstrap-datetimepicker-widget table td span:hover {
  background: #3a3a3a;
}
.zem-date-wrap.date .bootstrap-datetimepicker-widget table td.active,
.zem-date-wrap.date .bootstrap-datetimepicker-widget table td.active:hover {
  background: #b18952;
  color: #1b1b1b;
}
.zem-date-wrap.date .bootstrap-datetimepicker-widget table td.today:before {
  border-bottom-color: #b18952;
}
.zem-date-wrap.date .bootstrap-datetimepicker-widget table th {
  color: #ece9e3;
}