/*
 * ICE CUBE v2 – pages/product.css (shop-product-cart)
 * Product page refinements on top of components.css §17 (product page v1). Loaded after components.css.
 * Tokens only: no literal colours, no prefers-color-scheme rules (dark mode follows the tokens).
 * New page-level patterns (listed in the builder report): .pdp-gallery (scroll-snap track with thumbs and dots),
 * .pdp-packs (vertical segmented pack list with prices), .pdp-facts (fee facts with function icons).
 */

/* ------------------------------------------------------------------ layout rhythm */
.page--product.pdp { padding-bottom: clamp(56px, 3vw + 40px, 96px); }
.page--product .pdp__buy { gap: 20px; }
@media (min-width: 1024px) {
  /* Sticky buy box that never hides its own bottom: product.js sets --buy-top so a box taller than the
   * viewport scrolls until its last line is visible, then sticks (96 px when it fits). */
  .page--product .pdp__buy { top: var(--buy-top, 96px); padding-left: 24px; }
  .page--product .pdp__main { column-gap: 24px; }
}
@media (min-width: 1280px) {
  .page--product .pdp__buy { padding-left: 40px; }
}

/* ------------------------------------------------------------------ gallery (§12.3, §9.5, §9.7) */
.page--product .pdp-gallery { display: grid; gap: 14px; min-width: 0; align-content: start; }
.page--product .pdp-gallery__track {
  display: flex; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.page--product .pdp-gallery__track::-webkit-scrollbar { display: none; }
.page--product .pdp-gallery__track:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.page--product .pdp-gallery__slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.page--product .pdp-gallery__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-l); background: var(--studio-stage);
}
.page--product .pdp-gallery__media .img-pending { position: absolute; inset: 0; aspect-ratio: auto !important; }
.page--product .pdp-gallery__img { width: 100%; height: 100%; object-fit: cover; }
.page--product .pdp-gallery__caption { margin-top: 10px; max-width: 62ch; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--text-3); }

/* Thumbnails (≥ 768): 88 × 110 with the view name under it; the ring sits outside the navy image. */
.page--product .pdp-gallery__thumbs { display: none; }
.page--product .pdp-gallery__thumb {
  display: grid; gap: 8px; width: 88px; padding: 0; border-radius: var(--radius-s);
  color: var(--text-2); text-align: left; -webkit-tap-highlight-color: transparent;
}
.page--product .pdp-gallery__thumb-media {
  position: relative; display: block; width: 88px; height: 110px; overflow: hidden;
  border-radius: var(--radius-s); background: var(--studio-stage);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.page--product .pdp-gallery__thumb-media img { width: 100%; height: 100%; object-fit: cover; }
.page--product .pdp-gallery__thumb-label { font-size: 13px; line-height: 1.3; font-weight: 500; }
.page--product .pdp-gallery__thumb:hover { color: var(--text); }
.page--product .pdp-gallery__thumb:hover .pdp-gallery__thumb-media { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--line-2); }
.page--product .pdp-gallery__thumb[aria-pressed="true"] { color: var(--text); }
.page--product .pdp-gallery__thumb[aria-pressed="true"] .pdp-gallery__thumb-label { font-weight: 700; }
.page--product .pdp-gallery__thumb[aria-pressed="true"] .pdp-gallery__thumb-media { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sel); }
.page--product .pdp-gallery__thumb:focus-visible { outline-offset: 6px; }

/* Dots (< 768): 44 px targets, 8 px dots; the selected one in --sel. */
.page--product .pdp-gallery__dots { display: flex; justify-content: center; margin: -8px 0 -10px; }
.page--product .pdp-gallery__dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-s); -webkit-tap-highlight-color: transparent; }
.page--product .pdp-gallery__dot > span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line-2);
  transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.page--product .pdp-gallery__dot[aria-pressed="true"] > span { background: var(--sel); transform: scale(1.25); }
.page--product .pdp-gallery__dot:focus-visible { outline-offset: -6px; }

@media (min-width: 768px) {
  .page--product .pdp-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px; margin: -4px; }
  .page--product .pdp-gallery__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page--product .pdp-gallery__track { scroll-behavior: auto; }
  .page--product .pdp-gallery__dot > span { transition: none; }
}

/* ------------------------------------------------------------------ buy box */
.page--product .pdp__head { gap: 8px; }
.page--product .pdp__pack { font-size: 16px; }
.page--product .pdp__coord a { font-weight: 700; }

/* Known polish #5: the M stepper matches the 52 px "Kosárba" (L) button. */
.page--product .pdp__actions .stepper { height: 52px; }
.page--product .pdp__order { display: grid; gap: 10px; }
.page--product .pdp__incart { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--text-2); }
.page--product .pdp__incart .icon { width: 16px; height: 16px; color: var(--success); margin-right: 6px; vertical-align: -3px; }
.page--product .pdp__incart .btn--text { --btn-h: 32px; font-size: 14px; }

/* Pack switcher (§11.18): a segmented row of links (label over price) for up to three packs; from four packs
 * a vertical segmented list (label left, price right). Labels never wrap after "×" (product.js; polish #1). */
.page--product .pdp-packs { display: grid; gap: 8px; }
.page--product .pdp-packs__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; }
.page--product .pdp-packs__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px;
  border-radius: var(--radius-s); background: var(--bg-2);
}
.page--product .pdp-packs__item { display: flex; min-width: 0; }
.page--product .pdp-packs__opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%;
  min-height: 56px; padding: 8px 10px; border-radius: 4px; text-align: center;
  color: var(--text-2); font-size: 15px; line-height: 1.25; font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.page--product .pdp-packs__opt:hover { color: var(--text); background: var(--bg-3); text-decoration: none; }
.page--product .pdp-packs__opt[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--e1); }
.page--product .pdp-packs__opt:focus-visible { outline-offset: 0; }
.page--product .pdp-packs__name { min-width: 0; text-wrap: balance; }
.page--product .pdp-packs__price { min-height: 1.25em; font-variant-numeric: tabular-nums; }
.page--product .pdp-packs__price .price { font-size: 15px; line-height: 1.25; font-stretch: 87.5%; font-weight: 700; }
.page--product .pdp-packs__opt:not([aria-current="page"]) .pdp-packs__price { color: var(--text-2); }
.page--product .pdp-packs__list:has(> :nth-child(4)) { grid-auto-flow: row; grid-auto-columns: auto; }
.page--product .pdp-packs__list:has(> :nth-child(4)) .pdp-packs__opt {
  flex-direction: row; justify-content: space-between; gap: 4px 16px; min-height: 44px; padding: 8px 14px; text-align: left;
}
.page--product .pdp-packs__list:has(> :nth-child(4)) .pdp-packs__price { flex: none; min-width: 72px; text-align: right; }

/* Fee and contact facts (function icons only, §8). */
.page--product .pdp-facts { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.page--product .pdp-facts__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.page--product .pdp-facts__item > .icon { width: 20px; height: 20px; color: var(--text-2); }
.page--product .pdp-facts__item a { font-weight: 600; }

/* ------------------------------------------------------------------ details, specs, related */
.page--product .pdp__details { margin-top: clamp(48px, 4vw + 24px, 80px); padding-top: clamp(40px, 3vw + 24px, 64px); }
.page--product .pdp__about > * + * { margin-top: 16px; }
.page--product .pdp__desc { font-size: 17px; line-height: 1.6; }
.page--product .pdp__uses-block { padding-top: 8px; }
.page--product .pdp__uses-block > * + * { margin-top: 6px; }
.page--product .pdp__uses { display: block; max-width: 62ch; }
.page--product .pdp__uses a { font-weight: 600; }
.page--product .pdp__written { font-size: 13px; line-height: 1.45; color: var(--text-3); }
.page--product .pdp__kv { margin-top: 8px; }
.page--product .pdp__kv > dt { font-size: 15px; }
.page--product .pdp__assumed { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.page--product .pdp__sku { font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; }
.page--product .pdp__footnote { max-width: 62ch; }

.page--product .pdp__related { margin-top: clamp(56px, 4vw + 32px, 96px); }
.page--product .pdp__related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
@media (min-width: 1280px) {
  .page--product .pdp__related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1023px) {
  .page--product .pdp__main { gap: 24px; }
}
@media (max-width: 767px) {
  .page--product .pdp__crumbs { margin-bottom: 8px; }
  .page--product .pdp-gallery { gap: 10px; }
  .page--product .pdp-gallery__media { border-radius: var(--radius-m); }
  .page--product .pdp__buy { gap: 20px; }
  .page--product .pdp-packs__opt { padding: 8px 8px; font-size: 14px; }
  .page--product .pdp__desc { font-size: 16px; }
}
@media (max-width: 419px) {
  .page--product .pdp-sticky .btn { --btn-px: 14px; }
}

/* ---------------------------------------------------------------- loading skeleton (same grid as .pdp__main)
 * The pieces are shared .skeleton elements (look and pulse: components.css §18); only their sizes are set here. */
.page--product .pdp-skel__gallery, .page--product .pdp-skel__buy { display: grid; gap: 14px; align-content: start; min-width: 0; }
.page--product .pdp-skel__buy { gap: 16px; }
.page--product .pdp-skel__media { aspect-ratio: 4 / 5; border-radius: var(--radius-l); }
.page--product .pdp-skel__thumbs { display: none; gap: 16px; }
.page--product .pdp-skel__thumbs > .skeleton { width: 88px; height: 110px; border-radius: 6px; }
.page--product .pdp-skel__line { height: 16px; }
.page--product .pdp-skel__line--meta { width: 40%; height: 14px; }
.page--product .pdp-skel__line--title { width: 80%; height: 40px; }
.page--product .pdp-skel__line--pack { width: 34%; }
.page--product .pdp-skel__line--price { width: 46%; height: 44px; margin-top: 8px; }
.page--product .pdp-skel__line--alt { width: 62%; height: 14px; }
.page--product .pdp-skel__box { height: 76px; border-radius: var(--radius-m); }
.page--product .pdp-skel__box--meter { height: 120px; }
.page--product .pdp-skel__actions { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
.page--product .pdp-skel__actions > .skeleton { height: 52px; border-radius: var(--radius-m); }
@media (min-width: 768px) {
  .page--product .pdp-skel__thumbs { display: flex; }
}
@media (min-width: 1024px) {
  .page--product .pdp-skel__gallery { grid-column: 1 / 8; }
  .page--product .pdp-skel__buy { grid-column: 8 / 13; padding-left: 24px; }
}
@media (min-width: 1280px) {
  .page--product .pdp-skel__buy { padding-left: 40px; }
}
@media (max-width: 767px) {
  .page--product .pdp-skel__media { border-radius: var(--radius-m); }
}

/* ---------------------------------------------------------------- not found */
.page--product .pdp-missing { display: grid; gap: 8px; justify-items: center; padding-bottom: 24px; }
.page--product .pdp-missing__state { padding-top: 24px; }
.page--product .pdp-missing__state .empty-state__title:focus { outline: none; }
.page--product .pdp-missing__cats { display: grid; gap: 12px; justify-items: center; text-align: center; }
.page--product .pdp-missing__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }

/* ---------------------------------------------------------------- API error
 * The block itself is the shared .api-error (IC.ui.apiError, components.css §18); only its placement is set here. */
.page--product .pdp-error { max-width: 760px; margin: 24px 0 48px; }
.page--product .pdp-error__phone { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.page--product .pdp-error__phone a { font-weight: 600; }