.detail-photos { min-width: 0; }
.pdp-gallery { --pdp-accent: var(--green); width: 100%; min-width: 0; }
.pdp-stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: var(--pdp-desktop-height);
    border: 1px solid var(--commerce-border, var(--pdp-border));
    border-radius: var(--pdp-radius);
    background: var(--commerce-surface, var(--pdp-background));
}
.pdp-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
    direction: rtl;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.pdp-gallery-natural .pdp-stage { border: 0; border-radius: 0; background: transparent; }
.pdp-gallery-natural .pdp-viewer { background: #fff; }
.pdp-track::-webkit-scrollbar, .pdp-thumbnails::-webkit-scrollbar { display: none; }
.pdp-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pdp-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
}
.pdp-image-button {
    display: block;
    border: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: inherit;
}
.pdp-gallery .pdp-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    pointer-events: none;
}
.pdp-round {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 1px solid #252b2814;
    border-radius: 50%;
    background: #ffffffed;
    color: #000;
    box-shadow: 0 2px 10px #252b2809;
    transition: background .2s, box-shadow .2s, opacity .2s;
}
.pdp-gallery svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdp-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.pdp-prev { right: 14px; }
.pdp-next { left: 14px; }
.pdp-arrow:disabled { opacity: 0; pointer-events: none; }
.pdp-favorite.favorite-button { top: 14px; left: 14px; width: 44px; height: 44px; }
.pdp-badge { position: absolute; top: 17px; right: 16px; }
.pdp-stage-footer { position: absolute; bottom: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.pdp-counter, .pdp-expand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid #252b280d; border-radius: 20px; background: #fffffff0; font-size: 12px; font-variant-numeric: tabular-nums; }
.pdp-expand { pointer-events: auto; min-height: 44px; margin-inline-start: auto; }
.pdp-expand svg { width: 16px; height: 16px; }
.pdp-thumbnails { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 14px 2px 4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none; }
.pdp-thumbnail { flex: 0 0 68px; height: 82px; padding: 3px; border: 1px solid var(--commerce-border, var(--pdp-border)); border-radius: 10px; background: #fff; overflow: hidden; scroll-snap-align: center; transition: border-color .18s, box-shadow .18s; }
.pdp-gallery .pdp-thumbnail img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: contain; }
.pdp-thumbnail[aria-current="true"] { border-color: var(--commerce-accent, var(--pdp-accent)); box-shadow: 0 0 0 1px var(--commerce-accent, var(--pdp-accent)); }
.pdp-gallery button:focus-visible, .pdp-track:focus-visible { outline: 2px solid var(--commerce-accent, var(--pdp-accent)); outline-offset: -4px; }
.pdp-thumbnail:focus-visible { outline-offset: -6px; }
.pdp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pdp-viewer { width: min(1120px, calc(100vw - 48px)); height: min(920px, calc(100dvh - 48px)); max-width: none; max-height: none; padding: 0; margin: auto; border: 1px solid var(--commerce-border, var(--pdp-border)); border-radius: 18px; background: var(--commerce-surface, var(--pdp-background)); color: #000; overflow: hidden; }
.pdp-viewer[open] { display: flex; flex-direction: column; }
.pdp-viewer::backdrop { background: #171e1bd9; backdrop-filter: blur(6px); }
.pdp-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 18px; background: #ffffffeb; border-bottom: 1px solid var(--commerce-border, var(--pdp-border)); }
.pdp-viewer-header > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pdp-viewer-header .pdp-round { flex: 0 0 44px; }
.pdp-viewer-stage { flex: 1; min-height: 0; position: relative; }
.pdp-viewer-footer { display: flex; justify-content: center; gap: 20px; padding: 12px; color: #000; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
    .pdp-round:not(:disabled):hover, .pdp-expand:hover { background: #fff; box-shadow: 0 3px 14px #252b281c; }
    .pdp-thumbnail:hover { border-color: var(--commerce-accent, var(--pdp-accent)); }
}
@media (max-width: 650px) {
    .pdp-hide-mobile-thumbnails .pdp-thumbnails { display: none; }
    .pdp-stage { max-height: var(--pdp-mobile-height); }
    .pdp-thumbnails { gap: 9px; padding-top: 12px; }
    .pdp-thumbnail { flex-basis: 58px; height: 70px; border-radius: 9px; }
    .pdp-prev { right: 9px; }
    .pdp-next { left: 9px; }
    .pdp-favorite.favorite-button { top: 10px; left: 10px; }
    .pdp-badge { top: 15px; right: 12px; }
    .pdp-stage-footer { bottom: 10px; left: 10px; right: 10px; }
    .pdp-viewer { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
    .pdp-viewer-header { padding: max(10px, env(safe-area-inset-top)) 14px 10px; }
    .pdp-viewer-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .pdp-gallery *, .pdp-gallery *::before { transition: none; scroll-behavior: auto; }
}