/* Product page only. Existing fonts, purchase controls and product cards are inherited. */
#product-product { --pdp-gallery-height: min(60vw, 68svh); --pdp-thumb-size: clamp(52px, 8svh, 76px); }
.pdp-product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); grid-template-areas: "gallery buy" "description buy"; gap: 28px 32px; align-items: start; margin-inline: 0; }
.pdp-product-layout::before, .pdp-product-layout::after { display: none; }
.pdp-product-layout > .pdp-gallery-column { display: contents; }
.pdp-product-layout > #pdp-sidebar { grid-area: buy; width: 100%; min-width: 0; margin: 0; transition: none; }
.pdp-description { grid-area: description; min-width: 0; }
.pdp-description #tab-description > :first-child { margin-top: 0; }
.pdp-description #tab-description > h2 { margin-bottom: 12px; }
.pdp-description #tab-description > p { margin: 0 0 12px; }
.pdp-description #tab-description > :last-child { margin-bottom: 0; }
.pdp-gallery { grid-area: gallery; display: grid; grid-template-columns: var(--pdp-thumb-size) minmax(0, 1fr); grid-template-areas: "thumbs stage" ". caption"; gap: 10px 14px; min-width: 0; }
.pdp-gallery-stage { grid-area: stage; position: relative; height: var(--pdp-gallery-height); min-width: 0; }
.pdp-gallery-loading { position: absolute; z-index: 1; bottom: 12px; left: 12px; max-width: calc(100% - 105px); padding: 6px 9px; border-radius: 5px; background: #fffffff2; color: #375442; font-size: 12px; line-height: 1.35; box-shadow: 0 2px 8px #0001; pointer-events: none; }
.pdp-gallery-loading[hidden] { display: none; }
.pdp-main-photo, .pdp-main-photo picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pdp-main-photo { cursor: zoom-in; }
.pdp-main-photo .prikaz-proizvoda { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 5px; }
.pdp-gallery .pdp-gallery-thumbs { grid-area: thumbs; display: flex; flex-direction: column; gap: 9px; align-self: start; max-height: var(--pdp-gallery-height); margin: 0; padding: 2px; overflow: auto; scrollbar-width: thin; scrollbar-color: #c4cbc5 transparent; }
.pdp-gallery-thumbs > li, .pdp-gallery-thumbs > .image-additional { float: none; flex: 0 0 auto; width: 100%; max-width: none; margin: 0; padding: 0; }
.pdp-gallery-thumbs a.thumbnail { display: block; width: 100%; aspect-ratio: 1; margin: 0; padding: 3px; border: 1px solid #d8d8d8; border-radius: 5px; background: transparent; box-shadow: none; }
.pdp-gallery-thumbs a.thumbnail:hover { border-color: #89988c; }
.pdp-gallery-thumbs a.thumbnail[aria-current=true] { border: 2px solid #00894a; padding: 2px; background: #fff; }
.pdp-gallery-thumbs a.thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; box-shadow: none; }
.pdp-gallery-thumbs picture { display: block; width: 100%; height: 100%; }
.pdp-gallery button[hidden] { display: none; }
.pdp-gallery button { touch-action: manipulation; }
/* The global [type=button]:active rule scales buttons. Keep gallery controls still. */
.pdp-gallery button:active { transform: none; }
.pdp-gallery-arrow { position: absolute; top: 0; bottom: 0; margin-block: auto; transform: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #d8ded9; border-radius: 50%; background: #fffffff2; color: #333; box-shadow: 0 2px 6px #0001; line-height: 1; cursor: pointer; user-select: none; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.pdp-gallery-arrow svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pdp-gallery-prev { left: 10px; }
.pdp-gallery-next { right: 10px; }
.pdp-gallery-arrow:hover { background: white; box-shadow: 0 2px 12px #0002; }
.pdp-gallery .pdp-gallery-arrow:active { background: #eaf4ee; border-color: #8ead98; box-shadow: 0 1px 4px #0001; }
.pdp-gallery-arrow:focus:not(:focus-visible) { outline: none; }
.pdp-gallery .pdp-gallery-zoom { display: none; }
.pdp-gallery-caption { grid-area: caption; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; color: #6e716e; font-size: 12px; line-height: 1.5; }
.pdp-photo-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdp-gallery a:focus-visible, .pdp-gallery button:focus-visible, .pdp-gallery-stage:focus-visible { outline: 2px solid #00894a; outline-offset: 3px; }
@media (min-width: 901px) {
    .pdp-gallery .pdp-gallery-thumbs {
        position: sticky;
        top: 20px;
        max-height: min(var(--pdp-gallery-height), calc(100svh - 40px));
    }
    /* Keep short descriptions next to the gallery even when purchase options are tall. */
    .pdp-product-layout { grid-template-rows: auto 1fr; }
    #product-product:has(.pdp-product-layout:not(.pdp-has-columns)) { width: min(calc(var(--pdp-width, 1140px) + 30px), calc(100% - 34px)); }
    .pdp-product-layout:not(.pdp-has-columns) { grid-template-columns: var(--pdp-gallery-column, minmax(0, 1fr)) minmax(300px, 1fr); }
}
@media (max-width: 900px) {
    .pdp-product-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "buy" "description"; row-gap: 24px; }
    .pdp-product-layout > #pdp-sidebar { position: relative; }
    .pdp-gallery { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "thumbs" "caption"; row-gap: 10px; }
    .pdp-gallery .pdp-gallery-thumbs { flex-direction: row; max-height: none; width: 100%; padding: 3px 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .pdp-gallery-thumbs::-webkit-scrollbar { display: none; }
    .pdp-gallery-thumbs > li, .pdp-gallery-thumbs > .image-additional { width: 62px; flex: 0 0 62px; }
    .pdp-gallery-caption { font-size: 11px; }
    .pdp-gallery-arrow { width: 44px; height: 44px; opacity: .8; }
}
@media (max-height: 500px) and (max-width: 900px) {
    .pdp-gallery-thumbs > li, .pdp-gallery-thumbs > .image-additional { width: 50px; flex-basis: 50px; }
}
/* Keep faint navigation hints on desktop; reveal the overlays on hover or keyboard focus. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .pdp-gallery-stage .pdp-gallery-arrow {
        transition: opacity .15s ease, background-color .12s, border-color .12s, box-shadow .12s;
    }
    .pdp-gallery-stage .pdp-gallery-arrow { opacity: .2; }
    .pdp-gallery-stage:hover .pdp-gallery-arrow,
    .pdp-gallery-stage:focus-visible .pdp-gallery-arrow,
    .pdp-gallery-stage:has(:focus-visible) .pdp-gallery-arrow {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pdp-gallery *, .pdp-gallery *::before, .pdp-gallery *::after { transition: none !important; scroll-behavior: auto !important; }
}