/* svet product page: gallery, buy box, accordions, similar products, buy bar */
.s-pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-4); } /* minmax(0): the thumbnail row must scroll, not widen the page */
@media (min-width: 1024px) {
  .s-pdp__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
}
/* sticky only where the photo and its thumbnails fit on screen */
@media (min-width: 1024px) and (min-height: 860px) {
  .s-pdp__media { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}

/* ---- Gallery: native swipe; photos as they are, on white (no warm tint — Deniss, 27.09) ---- */
.s-gallery { position: relative; }
.s-gallery__track {
  position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; border-radius: var(--r-m);
  background: #fff;
}
.s-gallery__track::-webkit-scrollbar { display: none; }
.s-gallery__slide { position: relative; flex: 0 0 100%; display: grid; place-items: center; aspect-ratio: 1; margin: 0; scroll-snap-align: center; }
.s-gallery__slide img { position: relative; width: 100%; height: auto; } /* a room fills the square; a lamp on white brings its own margin (theme.php square()) */
.s-gallery__arrow {
  position: absolute; top: calc(50% - 44px); display: none; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); cursor: pointer;
}
.s-gallery__arrow--prev { left: var(--s-3); }
.s-gallery__arrow--next { right: var(--s-3); }
@media (hover: hover) {
  .s-gallery__arrow { display: grid; }
  .s-gallery__arrow:hover { background: var(--ink); color: var(--paper); }
}
.s-gallery__thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; scrollbar-width: none; }
.s-gallery__thumb { flex: none; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; cursor: pointer; }
.s-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.s-gallery__thumb[aria-current="true"] { border-color: var(--ink); }

/* ---- Buy box ---- */
.s-pdp__title { margin: 0 0 var(--s-2); font-size: var(--fs-h2); }
.s-pdp__meta { margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-s); }
.s-pdp__price { margin: 0; font: 500 1.75rem/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
.s-pdp__price ins { text-decoration: none; color: var(--amber-ink); }
.s-pdp__price del { margin-left: var(--s-2); color: var(--ink-2); font-size: var(--fs-m); font-weight: 400; }
.s-pdp__stock { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--fs-s); }
.s-pdp__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.s-pdp__stock.is-in { color: var(--ok); }
.s-pdp__stock.is-out { color: var(--amber-ink); }
.s-pdp__buy { display: flex; gap: var(--s-3); margin: var(--s-5) 0; }
.s-pdp__add { flex: 1; min-width: 0; min-height: 52px; padding-inline: var(--s-4); white-space: normal; text-align: center; } /* «Lisää ostoskoriin» and other long words fit at 320 px */
.s-pdp__add.is-added, [data-buybar] .s-btn.is-added { background: var(--amber-ink); border-color: var(--amber-ink); }
.s-qty--lg .s-qty__btn { width: 48px; height: 50px; }
.s-pdp__note { color: var(--ink-2); font-size: var(--fs-s); }

/* ---- Accordions: <details>; pdp.js animates the height (Safari cannot animate ::details-content) ---- */
.s-acc { border-top: 1px solid var(--line); }
.s-acc:last-of-type { border-bottom: 1px solid var(--line); }
.s-acc summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; list-style: none; cursor: pointer; font: 500 var(--fs-m) var(--font-ui); }
.s-acc summary::-webkit-details-marker { display: none; }
.s-acc summary::after {
  content: ""; width: 9px; height: 9px; border-right: 1.5px solid; border-bottom: 1.5px solid;
  rotate: 45deg; translate: 0 -3px; transition: rotate var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.s-acc[open]:not([data-to="closed"]) summary::after { rotate: 225deg; translate: 0 3px; }
@media (hover: hover) { .s-acc summary:hover { color: var(--amber-ink); } }
.s-acc__body { padding-bottom: var(--s-5); color: var(--ink-2); }
.s-acc__body p { margin: 0 0 var(--s-3); }
.s-specs { display: grid; margin: 0 0 var(--s-5); }
.s-specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-s); }
.s-specs dt { color: var(--ink-2); }
.s-specs dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Similar products ---- */
.s-pdp__similar { margin-top: var(--section); }
.s-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 46%); gap: var(--s-3);
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.s-rail > * { scroll-snap-align: start; }
@media (min-width: 1024px) { .s-rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; } }

/* ---- Buy bar: phones, after the main button has scrolled away ---- */
.s-buybar {
  position: fixed; inset: auto 0 0 0; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 var(--line); translate: 0 110%; transition: translate var(--dur-sheet) var(--ease);
}
.s-buybar.is-shown { translate: 0 0; }
.s-buybar__price { margin: 0; font: 500 var(--fs-l) var(--font-ui); font-variant-numeric: tabular-nums; }
.s-buybar .s-btn { flex: 1; max-width: 240px; }
@media (min-width: 1024px) { .s-buybar { display: none; } }
@media (max-width: 1023px) {
  .s-page--product-product .s-footer { padding-bottom: calc(var(--s-6) + 76px + 72px + env(safe-area-inset-bottom)); } /* the bar, then the contact button */
  .s-page:has(.s-buybar.is-shown) .s-fab { --fab-lift: 76px; }
}