/* Shop3 — стили страницы «product»: подключается только на её маршрутах (event.php headerAssets(), ADR 0016). Правила — как в shop3.css:
   только роли и шкалы var(--s3-*), canon.md 6.2. Общие компоненты — в shop3.css, он загружен раньше. */
.s3-rating--md { --size: var(--s3-size-icon-sm); }


/* ---------- страница товара ---------- */
.s3-product { display: grid; grid-template-columns: var(--s3-product-split); gap: var(--s3-product-gap); align-items: start; margin-bottom: var(--s3-space-7); }
.s3-product > *, .s3-reviews > * { min-width: 0; }
.s3-gallery { display: grid; grid-template-columns: var(--s3-size-thumb-md) minmax(0, 1fr); gap: var(--s3-space-3); position: sticky; top: calc(var(--s3-header-height) + var(--s3-space-5)); }
.s3-gallery__main { grid-column: 2; grid-row: 1; position: relative; display: block; overflow: hidden; aspect-ratio: var(--s3-product-gallery-ratio); border-radius: var(--s3-product-gallery-radius); background: var(--s3-surface-alt); cursor: zoom-in; }
.s3-gallery__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--s3-space-2); }
.s3-gallery__thumb { padding: 0; border: var(--s3-border-width-thick) solid transparent; border-radius: var(--s3-product-thumb-radius); overflow: hidden; background: var(--s3-surface-alt); cursor: pointer; aspect-ratio: var(--s3-product-thumb-ratio); }
.s3-gallery__thumb.is-active, .s3-gallery__thumb:hover { border-color: var(--s3-primary); }
.s3-gallery:not(:has(.s3-gallery__thumbs)) { grid-template-columns: minmax(0, 1fr); }
.s3-gallery:not(:has(.s3-gallery__thumbs)) .s3-gallery__main { grid-column: 1; }

.s3-buy { display: flex; flex-direction: column; gap: var(--s3-space-3); }
.s3-buy__brand { font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-medium); text-transform: uppercase; letter-spacing: var(--s3-font-tracking-wider); color: var(--s3-text-muted); text-decoration: none; }
.s3-buy__brand:hover { color: var(--s3-link); }
.s3-buy__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3-space-2) var(--s3-space-5); font-size: var(--s3-font-size-sm); }
.s3-buy__rating { display: inline-flex; align-items: center; gap: var(--s3-space-2); color: var(--s3-text); text-decoration: none; }
.s3-buy__price { display: flex; align-items: baseline; gap: var(--s3-space-3); margin-top: var(--s3-space-2); }
.s3-buy__price .s3-price__now, .s3-buy__price .s3-price__new { font-size: var(--s3-font-size-3xl); }
.s3-buy__price .s3-price__old { font-size: var(--s3-font-size-lg); }
.s3-buy__discounts { margin: 0; padding: var(--s3-space-3) var(--s3-space-4); list-style: none; border-radius: var(--s3-radius-md); background: var(--s3-surface-alt); font-size: var(--s3-font-size-sm); }
.s3-buy__stock { display: inline-flex; align-items: center; gap: var(--s3-space-2); margin: 0; color: var(--s3-success); font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-medium); }
.s3-buy__stock--none { color: var(--s3-text-muted); }
.s3-buy__form { display: flex; flex-direction: column; gap: var(--s3-space-4); padding-top: var(--s3-space-4); border-top: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-buy__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3-space-2); }
.s3-note { margin: 0; padding: var(--s3-space-2) var(--s3-space-3); border-radius: var(--s3-radius-sm); background: var(--s3-surface-alt); font-size: var(--s3-font-size-sm); }

.s3-opt { display: flex; flex-direction: column; gap: var(--s3-space-2); }
.s3-opt__label { font-size: var(--s3-font-size-sm); font-weight: var(--s3-font-weight-bold); margin: 0; }
.s3-opt.is-required > .s3-opt__label::after { content: " *"; color: var(--s3-danger); }
.s3-opt__values { display: flex; flex-wrap: wrap; gap: var(--s3-space-2); }
.s3-opt__error { margin: 0; color: var(--s3-danger); font-size: var(--s3-font-size-sm); }
.s3-pill { position: relative; margin: 0; font-weight: var(--s3-font-weight-regular); cursor: pointer; }
.s3-pill input { position: absolute; opacity: 0; pointer-events: none; }
.s3-pill > span small { color: var(--s3-text-muted); }
.s3-pill input:focus-visible + span { outline: var(--s3-border-width-thick) solid var(--s3-focus); outline-offset: var(--s3-border-width-thick); }
.s3-pill--swatch > span { padding-inline-start: var(--s3-space-1); }

.s3-tabs { margin-bottom: var(--s3-space-7); }
.s3-tabs__nav { display: flex; gap: var(--s3-space-5); overflow-x: auto; margin-bottom: var(--s3-space-5); border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); scroll-margin-top: calc(var(--s3-header-height) + var(--s3-space-5)); }
.s3-tabs__nav button { flex: none; padding: var(--s3-space-3) 0; border: 0; border-bottom: var(--s3-border-width-thick) solid transparent; margin-bottom: calc(-1 * var(--s3-border-width-thin)); background: none; color: var(--s3-text-muted); font-size: var(--s3-font-size-md); font-weight: var(--s3-font-weight-medium); cursor: pointer; }
.s3-tabs__nav button.is-active { color: var(--s3-text); border-bottom-color: var(--s3-tabs-active-accent); }
.s3-tabs__pane { display: none; }
.s3-tabs__pane.is-active { display: block; }
.s3-specs { width: 100%; max-width: var(--s3-layout-measure); margin-bottom: var(--s3-space-5); border-collapse: collapse; font-size: var(--s3-font-size-sm); }
.s3-specs caption { padding: 0 0 var(--s3-space-2); color: var(--s3-text); font-weight: var(--s3-font-weight-bold); text-align: start; }

.s3-reviews { display: grid; grid-template-columns: var(--s3-product-reviews-split); gap: var(--s3-space-7); align-items: start; }
.s3-review { padding: var(--s3-space-4) 0; border-bottom: var(--s3-border-width-thin) solid var(--s3-border-subtle); }
.s3-review p { margin: var(--s3-space-2) 0 0; }
.s3-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3-space-2) var(--s3-space-3); }
.s3-review__head time { margin-inline-start: auto; font-size: var(--s3-font-size-xs); }
.s3-review__avatar { display: grid; place-items: center; width: var(--s3-size-control-sm); height: var(--s3-size-control-sm); border-radius: var(--s3-product-avatar-radius); background: var(--s3-surface-alt); font-weight: var(--s3-font-weight-bold); font-size: var(--s3-font-size-sm); }
.s3-reviews__form { display: flex; flex-direction: column; gap: var(--s3-space-4); padding: var(--s3-space-5); border-radius: var(--s3-radius-md); background: var(--s3-surface-alt); }
.s3-reviews__form .s3-btn { align-self: flex-start; }
.s3-stars-input { border: 0; padding: 0; margin: 0; }
.s3-stars-input__row { display: inline-flex; flex-direction: row-reverse; gap: var(--s3-space-half); }
.s3-stars-input input { position: absolute; opacity: 0; }
.s3-stars-input label { margin: 0; color: var(--s3-border); cursor: pointer; }
.s3-stars-input label .s3-i { width: var(--s3-size-icon-lg); height: var(--s3-size-icon-lg); }
.s3-stars-input input:checked ~ label, .s3-stars-input label:hover, .s3-stars-input label:hover ~ label { color: var(--s3-rating); }
.s3-stars-input input:focus-visible + label { outline: var(--s3-border-width-thick) solid var(--s3-focus); }
.s3-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3-space-2); }

.s3-lightbox { max-width: min(var(--s3-product-lightbox-max-width), var(--s3-layout-dialog)); max-height: var(--s3-lightbox-max-height); padding: 0; border: 0; border-radius: var(--s3-product-lightbox-radius); background: var(--s3-surface); }
.s3-lightbox::backdrop { background: var(--s3-backdrop); }
.s3-lightbox__close { position: absolute; top: var(--s3-space-3); inset-inline-end: var(--s3-space-3); }

/* ---------- адаптив: точки — токены breakpoint.*, в @media — именованные условия (--s3-up|down-<шаг>), числа шкалы подставляет тема (tokens.md §3.5) ---------- */
@media (max-width: 991.98px) {
  .s3-product { grid-template-columns: minmax(0, 1fr); gap: var(--s3-space-5); }
  .s3-gallery { position: static; }
  .s3-reviews { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600.98px) {
  .s3-gallery { grid-template-columns: minmax(0, 1fr); }
  .s3-gallery__main { grid-column: 1; }
  .s3-gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; }
  .s3-gallery__thumb { flex: 0 0 var(--s3-size-thumb-md); }
  .s3-buy__title { font-size: var(--s3-font-size-2xl); }
  .s3-buy__price .s3-price__now, .s3-buy__price .s3-price__new { font-size: var(--s3-font-size-2xl); }
}