/* =====================================================================================================
   ATELIER — сторінка товару (2026-11-12)
   ПК: зліва галерея 2 колонки фото/відео 3:4, справа липка колонка. Телефон: свайп-карусель з крапками,
   збільшення дотиком без «щипка» (вікно #atZoom). Анімації — transform / opacity.
   ===================================================================================================== */

.at-pd-page { padding-bottom: 24px; }
.at-pd__crumbs { padding: 16px 0; }
.at-pd__crumbs span[aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.at-pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1024px) {
  .at-pd { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 40px; }
}
@media (min-width: 1440px) { .at-pd { gap: 56px; } }

/* ── галерея ───────────────────────────────────────────────────────────────────────────────────── */
.at-pd__media { position: relative; min-width: 0; }
.at-pd__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; outline: none; }
.at-pd__slide { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--at-surface); }
.at-pd__zoom, .at-pd__yt { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.at-pd__yt { cursor: pointer; }
.at .at-pd__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--at-ease); }
@media (hover: hover) and (pointer: fine) { .at-pd__zoom:hover .at-pd__img { transform: scale(1.035); } }
.at-pd__slide:first-child .at-pd__img { view-transition-name: at-hero; }
.at-pd__slide--empty .at-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.at-pd__play, .at-pd__vbadge { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,.18); pointer-events: none; transition: transform .35s var(--at-ease-spring); }
.at-pd__play svg, .at-pd__vbadge svg { width: 24px; height: 24px; fill: #000; margin-left: 3px; }
.at-pd__yt:hover .at-pd__play { transform: scale(1.08); }
.at-pd__vbadge { left: auto; top: auto; right: 12px; bottom: 12px; margin: 0; width: 36px; height: 36px; }
.at-pd__vbadge svg { width: 14px; height: 14px; margin-left: 2px; }
.at-pd__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.at-pd__gallery.is-single, .at-pd__gallery:has(> .at-pd__slide:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .at-pd__gallery.is-single, .at-pd__gallery:has(> .at-pd__slide:only-child) { max-width: 640px; margin: 0 auto; } }
.at-pd__sale { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; }
@media (min-width: 1024px) {
  .at-pd__sale { display: none; }
}
.at-pd__dots, .at-pd__counter { display: none; }
.at-pd__fav-m { display: none !important; }

/* телефон і планшет: свайп-карусель */
@media (max-width: 1023.98px) {
  .at-pd { gap: 16px; }
  .at-pd__media { margin: 0 calc(var(--at-gutter) * -1); }
  .at-pd__gallery { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .at-pd__gallery::-webkit-scrollbar { display: none; }
  .at-pd__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .at-pd__fav-m { display: inline-flex !important; }
  .at-pd__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
  .at-pd__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.12); transition: transform .3s var(--at-ease), background-color .3s; }
  .at-pd__dots i.is-on { background: #000; transform: scaleX(2.4); }
  .at-pd__counter { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: none; padding: 4px 8px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.88); }
  .at-pd__gallery.is-single ~ .at-pd__dots { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .at-pd__slide { flex-basis: 50%; }
  .at-pd__gallery { gap: 4px; }
  .at-pd__gallery.is-single .at-pd__slide, .at-pd__slide:only-child { flex-basis: 60%; margin: 0 auto; }
}

/* 2026-11-13 (iPhone 14 власника): на телефоні й планшеті, коли фото / відео 2+ — стрілки «є ще» по боках фото
   (права м'яко пульсує, поки клієнт не погортав) і рядок мініатюр під фото; дотик до мініатюри — одразу на неї.
   Кнопки й мініатюри створює atelier-product.js; на ПК фото й так стоять сіткою — там їх немає. */
.at-pd__nav, .at-pd__thumbs { display: none; }
@media (max-width: 1023.98px) {
  .at-pd__media { --at-pd-thumbs: 0px; }
  .at-pd__media.has-thumbs { --at-pd-thumbs: 87px; }
  .at-pd__media.has-thumbs .at-pd__dots { display: none; }
  .at-pd__nav { position: absolute; z-index: 3; top: calc((100% - var(--at-pd-thumbs)) / 2); margin-top: -22px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--at-color-text, #111); background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.14); cursor: pointer; transition: opacity .25s var(--at-ease), transform .25s var(--at-ease); -webkit-tap-highlight-color: transparent; }
  .at-pd__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .at-pd__nav--prev { left: 12px; }
  .at-pd__nav--next { right: 12px; }
  .at-pd__nav:active { transform: scale(.92); }
  .at-pd__nav.is-off { opacity: 0; pointer-events: none; }
  .at-pd__nav.is-pulse { animation: at-pd-nudge 1.6s var(--at-ease) infinite; }
  .at-pd__nav.is-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: at-pd-ring 1.6s ease-out infinite; pointer-events: none; }
  .at-pd__thumbs { position: relative; display: flex; gap: 8px; height: 87px; box-sizing: border-box; padding: 10px var(--at-gutter) 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .at-pd__thumbs::-webkit-scrollbar { display: none; }
  .at-pd__thumb { position: relative; flex: 0 0 56px; height: 75px; padding: 0; border: 1px solid var(--at-line); border-radius: 0; background: var(--at-surface); overflow: hidden; opacity: .62; cursor: pointer; transition: opacity .2s, border-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
  .at-pd__thumb.is-on { opacity: 1; border-color: var(--at-color-text, #111); box-shadow: inset 0 0 0 1px var(--at-color-text, #111); }
  .at-pd__thumb picture { display: contents; }
  .at-pd__thumb img, .at-pd__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
  .at-pd__thumb-play { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); pointer-events: none; }
  .at-pd__thumb-play svg { width: 11px; height: 11px; margin-left: 2px; fill: #000; }
}
@keyframes at-pd-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes at-pd-ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .at-pd__nav.is-pulse, .at-pd__nav.is-pulse::after { animation: none; } }

/* ── права колонка ─────────────────────────────────────────────────────────────────────────────── */
.at-pd__info { min-width: 0; }
@media (min-width: 1024px) {
  .at-pd__info { position: sticky; top: calc(var(--at-pd-top, 80px)); padding-bottom: 24px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .at-pd__info { max-width: 640px; width: 100%; margin: 0 auto; } }
.at-pd__cat { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--at-muted); transition: color .2s; }
.at-pd__cat:hover { color: #000; }
.at .at-pd__name { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; overflow-wrap: anywhere; }
.at-pd__price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.at-pd__now { font-size: 20px; font-weight: 600; }
.at-pd__now.is-sale { color: var(--at-sale); }
.at-pd__old { font-size: 15px; font-weight: 500; color: var(--at-muted); text-decoration: line-through; }
.at-pd__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #222; }
.at-pd__rating .at-stars svg { width: 14px; height: 14px; }
.at-pd__rating-num { font-weight: 600; }
.at-pd__rating-link { text-decoration: underline; text-underline-offset: 3px; }
.at-pd__rating:hover .at-pd__rating-link { text-decoration-thickness: 2px; }
.at .at-pd__color { margin: 16px 0 0; font-size: 14px; }
.at-pd__label-k { color: var(--at-muted); margin-right: 4px; }

.at-pd__form { margin-top: 24px; }
.at-pd__label { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.at-pd__label b { font-weight: 500; color: var(--at-muted); }
.at-pd__label b:not(:empty) { transition: color .2s; }
.at-pd__chart-link { padding: 0; background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 500; color: #222; }
.at-pd__size-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.at-pd__size-grid .at-size span { min-height: 48px; font-size: 14px; }
.at-pd__size-grid.is-collapsed { max-height: 168px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.at-pd__more-sizes { margin-top: 12px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 13px; }
.at-pd__sizes { transition: opacity .3s; }
.at-pd__form.is-custom .at-pd__sizes { opacity: .45; }

/* пошив за мірками */
.at-pd__custom { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--at-line); }
.at-pd__custom-check { font-size: 14px; color: #222; font-weight: 500; }
.at-pd__custom-check input { margin-top: 2px; }
.at-pd__measure { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .35s var(--at-ease), opacity .3s, visibility 0s .35s; }
.at-pd__measure-in { overflow: hidden; min-height: 0; }
.at-pd__form:has(#customSizeCheck:checked) .at-pd__measure, .at-pd__form.is-custom .at-pd__measure { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .35s var(--at-ease), opacity .3s; }
.at .at-pd__measure-hint { margin: 16px 0 12px; font-size: 13px; color: var(--at-muted); }
.at-pd__measure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.at-pd__measure-grid .at-field { margin-bottom: 12px; }
.at-pd__measure-grid .at-label { text-transform: none; letter-spacing: 0; font-size: 12px; color: #222; }
.at-pd__unit { color: var(--at-muted); font-weight: 500; }
.at-req { color: var(--at-sale); }

/* кнопки */
.at-pd__buy { display: flex; gap: 8px; margin-top: 24px; }
.at-pd__add { flex: 1 1 auto; min-width: 0; }

/* рядки «наявність / доставка / повернення» */
.at-pd-lines { list-style: none; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--at-line); display: grid; gap: 12px; }
.at-pd-lines li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.at-pd-lines svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: #222; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.at-pd-lines span { display: flex; flex-direction: column; gap: 2px; }
.at-pd-lines b { font-weight: 600; }
.at-pd-lines small { font-size: 12px; color: var(--at-muted); }
.at-pd-lines .at-link { align-self: flex-start; font-size: 12px; font-weight: 500; }

/* опис і акордеони */
.at-pd__desc { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--at-line); font-size: 14px; line-height: 1.7; color: #333; }
.at-pd__desc p:last-child { margin-bottom: 0; }
.at .at-pd__h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; color: #222; }
.at .at-pd__sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--at-muted); margin: 4px 0 8px; }
.at-pd__accs { margin-top: 16px; border-top: 1px solid var(--at-line); }
.at-pd__rich { font-size: 14px; line-height: 1.7; }
.at-pd__rich + .at-pd__rich { padding-top: 0; }
.at-pd__rich p { margin-bottom: 4px; }

/* відгуки */
.at-rv-sum { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; }
.at-rv-sum__num { font-size: 32px; font-weight: 600; line-height: 1; }
.at-stars--lg svg { width: 16px; height: 16px; }
.at-rv-list { list-style: none; margin: 0; padding: 0; }
.at-rv { padding: 16px 0; border-top: 1px solid var(--at-line); }
.at-rv.is-extra { display: none; }
.at-pd__reviews.is-all .at-rv.is-extra { display: block; }
.at-pd__reviews.is-all .at-rv-more { display: none; }
.at-rv__top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 13px; }
.at-rv__top time { font-size: 12px; }
.at .at-rv p { margin: 8px 0 0; font-size: 14px; color: #333; overflow-wrap: anywhere; }
.at-rv-more { margin: 8px 0 0; padding: 0; background: none; border: 0; cursor: pointer; font-size: 13px; }
.at-rv-form { margin-top: 24px; padding: 16px; background: var(--at-surface); }
.at-rv-form textarea { background: #fff; }
.at-rv-login { margin: 16px 0 0; font-size: 14px; }
.at-rate { border: 0; margin: 0 0 16px; padding: 0; }
.at-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.at-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.at-rate__stars label { cursor: pointer; padding: 2px; display: inline-flex; }
.at-rate__stars svg { width: 28px; height: 28px; fill: var(--at-line-strong); transition: fill .15s, transform .25s var(--at-ease-spring); }
.at-rate__stars input:checked ~ label svg, .at-rate__stars label:hover svg, .at-rate__stars label:hover ~ label svg { fill: #000; }
.at-rate__stars label:hover svg { transform: scale(1.12); }
.at-rate__stars input:focus-visible + label { outline: 2px solid #222; outline-offset: 2px; }

/* нижні секції */
.at-pd-more, .at-pd-also { padding-top: 48px; padding-bottom: 0; }
@media (min-width: 1024px) { .at-pd-more, .at-pd-also { padding-top: 72px; } }
.at-pd-also .at-skeleton { aspect-ratio: 3 / 4; }
.at-pd-also__sk { display: flex; flex-direction: column; gap: 12px; }
.at-pd-also__sk i { display: block; height: 12px; width: 70%; }
.at-pd-also__sk i + i { width: 40%; }

/* таблиця розмірів */
.at-chart__title { font-size: 16px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.at-chart .at-drawer__panel { width: min(640px, 100%); }
.at-chart .at-tabs { margin-bottom: 16px; }
.at-chart__panel { padding-top: 16px; }
.at-chart__img { width: 100%; height: auto; }
.at-chart__html { overflow-x: auto; font-size: 14px; }
.at-chart__html table { width: 100%; border-collapse: collapse; min-width: 360px; }
.at-chart__html th, .at-chart__html td { padding: 12px 8px; border-bottom: 1px solid var(--at-line); text-align: left; white-space: nowrap; }
.at-chart__html th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--at-muted); }
.at-chart__html tr:hover td { background: var(--at-surface); }

/* ── вікно збільшення ──────────────────────────────────────────────────────────────────────────── */
.at-zoom { position: fixed; inset: 0; z-index: 1050; background: #fff; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.at-zoom.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.at-zoom__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 16px; pointer-events: none; }
.at-zoom__bar > * { pointer-events: auto; }
.at-zoom__count { font-size: 12px; font-weight: 600; letter-spacing: .08em; background: rgba(255,255,255,.88); padding: 4px 8px; }
.at-zoom__track { flex: 1 1 auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.at-zoom__track::-webkit-scrollbar { display: none; }
.at-zoom.is-zoomed .at-zoom__track { overflow: hidden; }
.at-zoom__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: center; touch-action: pan-x; cursor: zoom-in; }
.at-zoom__slide.is-zoomed { touch-action: none; cursor: grab; }
.at-zoom__slide.is-zoomed:active { cursor: grabbing; }
.at-zoom__slide img, .at-zoom__slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; transition: transform .35s var(--at-ease); will-change: transform; user-select: none; -webkit-user-drag: none; }
.at-zoom__slide.is-dragging img { transition: none; }
.at-zoom__nav { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 1px solid var(--at-line); background: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; transition: transform .3s var(--at-ease); }
.at-zoom__nav svg { width: 20px; height: 20px; fill: none; stroke: #222; stroke-width: 1.8; }
.at-zoom__nav:hover { transform: scale(1.06); }
.at-zoom__nav--prev { left: 16px; } .at-zoom__nav--next { right: 16px; }
@media (hover: hover) and (pointer: fine) { .at-zoom__nav { display: inline-flex; } }
.at-zoom__hint { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 3; transform: translateX(-50%); padding: 8px 16px; font-size: 12px; background: rgba(0,0,0,.72); color: #fff; pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.at-zoom.is-zoomed .at-zoom__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .at-pd__img, .at-zoom__slide img { transition: none !important; }
}