/* ===== Layout / Base ===== */
:root { --max: 1200px; --gap: 28px; --thumbs-w: 110px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
.pm-body {
  margin: 0; background: #fff; color: #0a0a0a;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Header ===== */
.pm-header { text-align: center; padding: 32px 16px 12px; }
.pm-logo { /* текстовий логотип, якщо раптом повернешся */
  font-size: 2.2rem; font-weight: 900; letter-spacing: 1px; margin: 0; color: #111;
}
.pm-logo-img { display: inline-block; height: 48px; width: auto; }

/* ===== Breadcrumb ===== */
.pm-breadcrumb {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  padding: 8px 16px;
}
.pm-breadcrumb ol {
  list-style: none; display: flex; gap: 6px;
  margin: 0; padding: 0; flex-wrap: wrap; justify-content: center;
}
.pm-breadcrumb a { text-decoration: none; color: #111; font-weight: 600; }
.pm-breadcrumb .current { color: #777; }
.pm-breadcrumb .sep { color: #bbb; margin: 0 4px; }

/* ===== Container / Grid ===== */
.pm-container { max-width: var(--max); margin: 0 auto; padding: 16px; }
.pm-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap); }
@media (max-width: 980px){ .pm-grid { grid-template-columns: 1fr; } }

/* ===== Gallery ===== */
.pm-gallery { display: grid; grid-template-columns: var(--thumbs-w) 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px){ .pm-gallery { grid-template-columns: 1fr; } }

/* Thumbs */
.pm-splide-thumbs { height: 420px; }
@media (max-width: 980px){ .pm-splide-thumbs { height: 100px; } }
.pm-splide-thumbs .splide__slide { opacity: .85; border-radius: 10px; overflow: hidden; }
.pm-splide-thumbs .splide__slide.is-active { outline: 2px solid #111; opacity: 1; }

/* Main image area */
.pm-splide-main .splide__track { aspect-ratio: 1 / 1; }
@supports not (aspect-ratio: 1/1) { .pm-splide-main .splide__track { height: 520px; } }

/* Images */
.splide__slide img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: #f5f5f5; border-radius: 10px;
}

/* Zoom */
.pm-zoom { margin-top: 12px; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.pm-zoom img { display: block; width: 100%; transition: transform .2s ease; }
.pm-zoom.active { box-shadow: 0 0 0 1px #111 inset; }

/* ===== Right panel ===== */
.pm-info { padding: 8px 4px; }
.pm-title { font-size: 1.9rem; margin: 0 0 8px; }
.pm-brand { color: #666; margin-bottom: 10px; }
.pm-price { font-size: 1.9rem; font-weight: 800; margin: 10px 0 18px; }

.pm-qty-label { font-weight: 700; margin-bottom: 6px; }
.pm-qty-note { color: #9aa; font-weight: 500; margin-left: 6px; }
.pm-qty-ctrls { display: inline-flex; align-items: center; gap: 8px; }
.pm-qty-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid #ddd; background: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.pm-qty-input {
  width: 76px; text-align: center; padding: 8px 10px;
  border: 1px solid #ddd; border-radius: 8px; font-size: 16px;
}
.pm-total { margin-top: 10px; font-weight: 700; }

/* Actions */
.pm-actions { display: flex; gap: 10px; margin: 20px 0; }
.pm-btn {
  padding: 14px 18px; border-radius: 12px; border: 1px solid #111; cursor: pointer;
  font-weight: 700; font-size: 15px;
  transition: transform .02s ease, opacity .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pm-btn:active { transform: translateY(1px); }
.pm-btn-black { background: #111; color: #fff; }
.pm-btn-black:hover { box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.pm-btn-outline { background: #fff; color: #111; }
.pm-btn[disabled]{ opacity: .55; cursor: not-allowed; pointer-events: none; }

.pm-msg { color: #444; margin-bottom: 8px; min-height: 20px; }

/* ===== Accordion: base behavior ===== */
.pm-accordion details { border-top: 1px solid #eee; padding: 14px 0; }
.pm-accordion h2 { font-size: 1rem; margin: 0; }
.pm-acc-body { margin-top: 10px; color: #333; }

/* Показ/прихов тіла секції */
.pm-accordion details .pm-acc-body { display: none; }
.pm-accordion details[open] .pm-acc-body { display: block; }

/* Базовий summary (для простих details БЕЗ .pm-acc) */
.pm-accordion summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
}
.pm-accordion summary::-webkit-details-marker { display: none; }

/* Стрілка тільки для details, які НЕ використовують .pm-acc */
.pm-accordion details:not(.pm-acc) > summary::before {
  content: "▸";
  transition: transform .2s ease;
  font-size: .9rem; color: #555;
}
.pm-accordion details:not(.pm-acc)[open] > summary::before {
  transform: rotate(90deg);
}

/* ===== Accordion: enhanced “tile” version (.pm-acc) ===== */
.pm-acc { border-top: 1px solid #eee; }
.pm-acc + .pm-acc { border-top: 0; } /* не дублюємо лінії */

.pm-acc-summary {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; margin: 8px 0 0;
  background: #f6f7f9;
  border: 1px solid #e6e8eb; border-radius: 10px;
  cursor: pointer; user-select: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pm-acc-summary:hover { background: #eef1f5; border-color: #d8dbe0; }
.pm-acc-summary:focus { outline: none; box-shadow: 0 0 0 2px rgba(17,17,17,.15) inset; }

.pm-acc-title { font-size: 1rem; font-weight: 800; color: #111; flex: 1 1 auto; }
.pm-acc-hint { font-size: .85rem; color: #7a8699; }
@media (max-width: 560px){
  .pm-acc-hint { display: none; }
}

/* Кастомна стрілка */
.pm-acc-chevron { width: 18px; height: 18px; flex: 0 0 18px; position: relative; }
.pm-acc-chevron::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-right: 2px solid #555; border-bottom: 2px solid #555;
  transform: rotate(-45deg);
  transition: transform .2s ease, border-color .2s ease;
}

.pm-acc[open] .pm-acc-summary { background: #f9fafb; }
.pm-acc[open] .pm-acc-chevron::before { transform: rotate(45deg); border-color: #111; }

/* Гарантований показ body в .pm-acc */
.pm-acc summary::-webkit-details-marker { display: none; }
.pm-acc-body { display: none; padding: 12px 2px 8px; color: #333; }
.pm-acc[open] .pm-acc-body { display: block; }
.pm-acc-body p { margin: 8px 0; }
.pm-acc-body strong { font-weight: 800; }

/* ===== API box ===== */
.pm-api h3 { margin: 26px 0 8px; font-size: 1rem; }
.pm-api pre {
  background: #0d0f12; color: #d2f4ff; border-radius: 10px; padding: 12px; overflow: auto;
}

/* ===== SEO ===== */
.pm-seo { margin: 40px auto; border-top: 1px solid #eee; padding-top: 20px; color: #222; }
.pm-seo h2 { font-size: 1.25rem; }

/* ===== Footer ===== */
.pm-footer { border-top: 1px solid #eee; padding: 16px; text-align: center; color: #7a7a7a; font-size: 14px; }