/* HL PDP desktop polish — body#product only, ≥992px.
 * Keeps sidebar | main (media+info → description) architecture.
 * Visual/spacing only — no hooks, forms, gallery JS, ATC IDs.
 * Mobile/tablet: rules below do not apply under 992. */

@media (min-width: 992px) {
  /* =========================================================
   * Breadcrumb — thin nav row, not a gray section
   * ========================================================= */
  body#product .breadcrumb__wrapper,
  body.page-product .breadcrumb__wrapper {
    margin: 0 !important;
    padding: 8px 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: #fafbfc !important;
    border-bottom: 1px solid #eef1f4 !important;
    box-shadow: none !important;
  }

  body#product .breadcrumb__wrapper > .container,
  body.page-product .breadcrumb__wrapper > .container {
    /* Match .columns-container horizontal shell (pl/pr 20px) */
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: var(--hl-container-max, 1400px) !important;
    width: min(var(--hl-container-max, 1400px), calc(100% - var(--hl-container-gutter, 40px))) !important;
  }

  body#product .breadcrumb,
  body.page-product .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    font-size: .8125rem !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  /* Home crumb stays hidden; kill leading "/" on first visible item */
  body#product .breadcrumb li:first-child,
  body.page-product .breadcrumb li:first-child {
    display: none !important;
  }

  body#product .breadcrumb li:nth-child(2)::before,
  body.page-product .breadcrumb li:nth-child(2)::before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#product .breadcrumb li::before,
  body.page-product .breadcrumb li::before {
    color: #9aa3af !important;
    padding: 0 .45rem !important;
  }

  body#product .breadcrumb a,
  body#product .breadcrumb span {
    color: #5b6570 !important;
  }

  body#product .breadcrumb a:hover {
    color: #d71920 !important;
  }

  /* =========================================================
   * Columns / top alignment — one composition start line
   * Beat hl-category-sidebar :has(.hl-catside) −15px / 25px pad
   * ========================================================= */
  html body#product:has(.hl-catside) #left-column,
  html body.page-product:has(.hl-catside) #left-column,
  html body#product:has(.hl-catside) #left-column.left-column,
  html body.page-product:has(.hl-catside) #left-column.left-column,
  body#product #left-column,
  body.page-product #left-column {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-left: 12px !important;
  }

  body#product .columns-container,
  body.page-product .columns-container {
    margin-top: 10px !important; /* ~8–14px after breadcrumb */
  }

  body#product #left-column .block-categories .category-sub-menu > li > a,
  body#product #left-column .block-categories .category-sub-menu li a {
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
    font-size: .8125rem !important;
    line-height: 1.3 !important;
    color: #2f3640 !important;
  }

  body#product #left-column .block-categories .collapse-icons i,
  body#product #left-column .block-categories .arrows i {
    font-size: 1rem !important;
  }

  body#product #left-column .hl-muud-cats a img,
  body#product #left-column .hl-other-cats img,
  body#product #left-column [class*="muud"] img,
  body#product #left-column .category-sub-menu img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    object-fit: contain !important;
  }

  /* =========================================================
   * Hero grid: media | info
   * ========================================================= */
  body#product .product__container,
  body.page-product .product__container {
    position: relative !important;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
    column-gap: 2.5rem !important; /* ~40px: ~14 to sep + ~26 to info */
    align-items: start !important;
  }

  /* Media column must grow with thumbs — NEVER aspect-ratio/max-height here */
  body#product .product__images {
    position: relative !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important; /* separator sits outside stage into the gap */
    --hl-pdp-stage-h: 430px;
  }

  body#product .product__images:has(.product__carousel.hl-gallery--multi) {
    --hl-pdp-stage-h: 415px;
  }

  /* Soft fade on main stage only (not thumb strip / description) */
  body#product .product__carousel {
    position: relative !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 430px !important;
    max-height: 430px !important;
    margin-bottom: 0 !important; /* kill Hummingbird 32px — thumbs own the gap */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important; /* gallery clips slides — NOT the separator host */
  }

  body#product .product__carousel.hl-gallery--multi {
    height: 415px !important; /* +25 vs prior 390 — ~6% larger stage */
    max-height: 415px !important;
  }

  /*
   * Separator was on .product__carousel::after with right:-14px, but carousel
   * overflow:hidden clipped it entirely. Host is .product__images (overflow:visible).
   * Height tracks main stage only (~82%), not thumbs/description.
   */
  body#product .product__carousel::after {
    content: none !important;
    display: none !important;
  }

  body#product .product__images::after {
    content: "" !important;
    position: absolute !important;
    top: calc(var(--hl-pdp-stage-h) * 0.09) !important;
    right: -16px !important; /* ~16px past media edge into gap */
    width: 1px !important;
    height: calc(var(--hl-pdp-stage-h) * 0.82) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(65, 75, 85, 0.18) 14%,
      rgba(65, 75, 85, 0.27) 50%,
      rgba(65, 75, 85, 0.18) 86%,
      transparent 100%
    ) !important;
  }

  /* Kill old container-level separator */
  body#product .product__container::after,
  body.page-product .product__container::after {
    content: none !important;
    display: none !important;
  }

  body#product .product__carousel .carousel-item,
  body#product .product__carousel .carousel-item.active {
    height: 100% !important;
  }

  body#product .product__carousel .carousel-item picture,
  body#product .product__carousel .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Multi: slightly lower optical center — fills stage better on wide products */
  body#product .product__carousel.hl-gallery--multi .carousel-item picture,
  body#product .product__carousel.hl-gallery--multi .carousel-item img {
    object-position: center 58% !important;
  }

  /* Gallery controls — stage-centered, readable without competing */
  body#product .hl-gallery-arrow {
    width: 34px !important;
    height: 34px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    opacity: .48 !important;
    color: #4a5560 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body#product .product__carousel:hover .hl-gallery-arrow {
    opacity: .82 !important;
  }

  body#product .hl-gallery-arrow:hover {
    opacity: 1 !important;
    color: #d71920 !important;
  }

  body#product .hl-gallery-arrow .material-icons {
    font-size: 22px !important;
  }

  body#product .hl-gallery-counter {
    bottom: .625rem !important; /* ~10px above stage bottom */
    font-size: .6875rem !important; /* 11px */
    letter-spacing: .05em !important;
    padding: .22rem .45rem !important;
    background: rgba(50, 58, 68, .52) !important;
    border-radius: 999px !important;
    color: #fff !important;
  }

  body#product .product__zoom {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    right: 10px !important;
    bottom: 10px !important;
    border: 1px solid #dde2e8 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: 5 !important;
  }

  body#product .product__zoom:hover {
    border-color: #d71920 !important;
    color: #d71920 !important;
  }

  body#product .product__zoom .material-icons {
    font-size: 18px !important;
  }

  /* Thumbnail strip — in normal flow under stage (~12px breathing) */
  body#product .product__thumbnails {
    margin-top: .75rem !important; /* 12px */
    margin-bottom: 0 !important;
    max-width: 100% !important;
  }

  body#product .product__thumbnails-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 .1rem !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: thin !important;
  }

  body#product .product__thumbnail {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 6px !important;
  }

  body#product .product__thumbnail-image {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    background: #fff !important;
    border-radius: 6px !important;
    border: 1.5px solid #e6eaef !important;
    box-sizing: border-box !important;
  }

  body#product .product__thumbnail:hover .product__thumbnail-image {
    border-color: #c5ccd4 !important;
  }

  body#product .product__thumbnail.active .product__thumbnail-image,
  body#product .product__thumbnail-image.js-thumb-selected {
    border-color: #d71920 !important;
  }

  /* Product info stays in normal flow — no sticky float on scroll */
  body#product .product__right {
    position: static !important;
    top: auto !important;
    align-self: start !important;
    max-width: none !important;
  }

  /* =========================================================
   * Buy-box vertical rhythm — compact + readable
   * ========================================================= */
  body#product .hl-pdp-brand {
    margin-bottom: .35rem !important; /* ~5–6px */
  }

  body#product .product__name.h2,
  body#product h1.product__name,
  body#product .hl-pdp-title {
    font-size: clamp(1.55rem, 1.35rem + .45vw, 2rem) !important; /* ~25–32px */
    line-height: 1.1 !important;
    margin-bottom: 1rem !important; /* 16px → price */
    max-width: 38rem !important;
    white-space: normal !important;
  }

  body#product .product__prices.hl-pdp-prices,
  body#product .hl-pdp-prices {
    margin-bottom: .7rem !important; /* ~11px */
  }

  body#product .product__description-short {
    margin: 0 0 1.25rem !important; /* ~20px — +5px premium air before CTA */
    font-size: .875rem !important; /* 14px */
    line-height: 1.45 !important;
    max-width: 36rem !important;
    color: #232a31 !important; /* ~8–10% darker, premium readable */
  }

  body#product .product-actions,
  body#product .js-product-actions,
  body#product .product__add-to-cart {
    margin-bottom: 0 !important;
  }

  /* Kill Hummingbird default 32px under ATC row — CTA→trust needs ~16–20px */
  body#product .product__add-to-cart-container,
  body#product .product-add-to-cart.js-product-add-to-cart,
  body#product .js-product-add-to-cart,
  body#product .product__actions-qty-add,
  body#product .product__actions-qty-add.product-quantity {
    margin-bottom: 0 !important;
  }

  body#product .product__quantity.quantity-button,
  body#product .product-actions__quantity.quantity-button,
  body#product .quantity-button__group {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 6px !important;
    border-color: #e4e8ed !important;
    background: #fff !important;
  }

  body#product .quantity-button__group input,
  body#product .product__quantity input {
    font-weight: 700 !important;
    color: #1a222b !important;
  }

  body#product .quantity-button__group:focus-within,
  body#product .product__quantity.quantity-button:focus-within {
    border-color: #c5ccd4 !important;
  }

  body#product .product__add-to-cart-button,
  body#product .js-add-to-cart.add-to-cart,
  body#product button.add-to-cart,
  body#product .product__add-to-cart-button.btn {
    min-height: 44px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  /* CTA → trust: ~20px (still compact 16–20 class) */
  body#product .hl-commerce-box {
    margin-top: 1.25rem !important; /* 20px */
  }

  /* =========================================================
   * Trust panel — premium readable, not admin-dense
   * Target ~145–160px height with Tarne | Maksmine
   * ========================================================= */
  body#product .hl-trust-card {
    --hl-trust-icon: 1.15rem;
    --hl-trust-gap: .55rem;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    background: #fafbfc !important;
    border: 1px solid #e1e5e9 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body#product .hl-trust-card__section {
    padding: .7rem .9rem .75rem !important; /* ~11–14 × 14–15 */
  }

  body#product .hl-trust-card__section--pay {
    padding-top: .7rem !important;
    padding-bottom: .75rem !important;
    border-top: none !important;
    border-left: none !important;
    background: #fafbfc !important;
    position: relative !important;
  }

  /* Inset vertical divider — weaker than media/info separator */
  body#product .hl-trust-card__section--pay::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 1px !important;
    background: rgba(100, 110, 120, 0.14) !important;
  }

  body#product .hl-trust-card__label {
    margin: 0 0 .35rem !important;
    font-size: .6875rem !important; /* 11px */
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    color: #4a5260 !important; /* ~12% darker headings */
  }

  body#product .hl-trust-primary {
    gap: .4rem !important; /* ~6–7px */
  }

  body#product .hl-trust-primary__item {
    font-size: .828125rem !important; /* ~13.25px */
    line-height: 1.35 !important;
    align-items: center !important;
  }

  body#product .hl-trust-primary__icon {
    margin-top: 0 !important;
  }

  body#product .hl-trust-primary__icon i.material-icons {
    font-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
  }

  body#product .hl-trust-primary__text {
    padding-top: 0 !important;
  }

  body#product .hl-trust-details {
    margin-top: .5rem !important;
    padding-top: 0 !important;
  }

  body#product .hl-trust-details__summary {
    min-height: 0 !important;
    padding: .15rem 0 !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
    color: #5b6570 !important;
  }

  body#product .hl-trust-details__summary:hover {
    color: #d71920 !important;
  }

  body#product .hl-trust-carriers {
    margin-top: 0 !important;
    padding-top: .12rem !important;
    padding-bottom: 0 !important;
  }

  body#product .hl-trust-carriers li {
    padding-top: .12rem !important;
    padding-bottom: .12rem !important;
    font-size: .78rem !important;
  }

  /* Flatten payment — no inset mini-card on the trust surface */
  body#product .hl-trust-pay__link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: .45rem .65rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body#product .hl-trust-pay__link:hover {
    background: transparent !important;
    border: 0 !important;
  }

  body#product .hl-trust-pay__link:hover .hl-trust-pay__title {
    color: #d71920 !important;
  }

  body#product .hl-trust-pay__title {
    font-size: .828125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    line-height: 1.35 !important;
  }

  body#product .hl-trust-pay__logos .hl-pay-strip-img,
  body#product .hl-pay-strip-img {
    height: 19px !important;
    width: 136px !important;
    max-width: 136px !important;
  }

  body#product .hl-trust-pay__inbank {
    margin-top: .85rem !important; /* ~14px after logos row */
    gap: .55rem .75rem !important; /* +2–4px vertical between järelmaks lines */
    flex-wrap: wrap !important;
  }

  body#product .hl-trust-pay__inbank .inbank-service-label {
    font-size: .75rem !important;
    font-weight: 650 !important;
    color: #2f3640 !important;
  }

  body#product .hl-trust-pay__inbank .hl-inbank-img {
    height: 13px !important;
  }

  body#product .hl-trust-pay__secure {
    margin: .8rem 0 0 !important;
    font-size: .72rem !important;
    gap: .28rem !important;
    color: #5b6570 !important; /* secondary but readable */
  }

  body#product .hl-trust-pay__secure .material-icons {
    font-size: .9rem !important;
  }

  body#product .hl-trust-free-now__badge {
    padding: .1rem .35rem !important;
    font-size: .68rem !important;
  }

  /* =========================================================
   * Description — early, readable width
   * ========================================================= */
  body#product .product__bottom {
    margin-top: 1.25rem !important; /* ~20px — section break after gallery */
  }

  body#product .hl-pdp-below-hero {
    margin-top: 1.25rem !important; /* ~20px thumbs → Tootekirjeldus */
  }

  body#product .hl-pdp-below-hero__inner {
    max-width: 55rem !important; /* ~880px */
    gap: 2rem !important;
  }

  body#product .hl-pdp-below-hero__inner .product-description,
  body#product .hl-pdp-below-hero__inner .product__description,
  body#product .product-description {
    max-width: none !important;
  }

  body#product .hl-pdp-below-hero h2,
  body#product .product__bottom h2 {
    margin-bottom: .85rem !important; /* ~13–14px */
  }

  body#product .product__description,
  body#product .hl-pdp-maincopy__body {
    line-height: 1.55 !important;
    color: #282f38 !important; /* ~6% darker graphite */
  }

  /* Sidebar +/- quieter on PDP — category text stays primary */
  body#product .hl-catside__disclose {
    width: 18px !important;
    height: 18px !important;
    border-color: #f3f5f7 !important;
    box-shadow: none !important;
    opacity: .72 !important;
  }

  body#product .hl-catside__disclose::before {
    width: 6px !important;
    background: #c5ccd4 !important;
  }

  body#product .hl-catside__disclose::after {
    height: 6px !important;
    background: #c5ccd4 !important;
  }

  body#product .hl-catside__toggle {
    color: #b8c0c9 !important;
    flex-basis: 32px !important;
  }

  body#product .hl-catside__item.is-open > .hl-catside__row > .hl-catside__toggle {
    color: #d71920 !important;
  }

  body#product .hl-catside__item.is-open > .hl-catside__row > .hl-catside__toggle .hl-catside__disclose {
    border-color: #f0c8cb !important;
    opacity: .9 !important;
  }

  body#product .hl-catside__item.is-open > .hl-catside__row > .hl-catside__toggle .hl-catside__disclose::before,
  body#product .hl-catside__item.is-open > .hl-catside__row > .hl-catside__toggle .hl-catside__disclose::after {
    background: #d71920 !important;
  }

  body#product .hl-catside__row {
    align-items: center !important;
  }

  body#product .hl-catside__link {
    line-height: 1.35 !important;
  }

  body#product .breadcrumb a,
  body#product .breadcrumb span {
    color: #424b55 !important; /* ~6% darker, still secondary */
  }
}

/* Narrow desktop: stack trust when buy column is tight */
@media (min-width: 992px) and (max-width: 1279.98px) {
  body#product .product__container,
  body.page-product .product__container {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    column-gap: 2rem !important; /* ~32px narrow desktop */
  }

  body#product .product__images {
    max-height: none !important;
    --hl-pdp-stage-h: 400px;
  }

  body#product .product__images:has(.product__carousel.hl-gallery--multi) {
    --hl-pdp-stage-h: 395px;
  }

  body#product .product__carousel {
    height: 400px !important;
    max-height: 400px !important;
  }

  body#product .product__carousel.hl-gallery--multi {
    height: 395px !important; /* +25 vs prior 370 */
    max-height: 395px !important;
  }

  body#product .product__carousel .carousel-item picture,
  body#product .product__carousel .carousel-item img {
    max-height: 100% !important;
  }

  body#product .product__name.h2,
  body#product h1.product__name,
  body#product .hl-pdp-title {
    font-size: clamp(1.4rem, 1.2rem + .35vw, 1.75rem) !important;
  }

  body#product .hl-trust-card {
    grid-template-columns: 1fr !important;
  }

  body#product .hl-trust-card__section--pay::before {
    display: none !important;
  }

  body#product .hl-trust-card__section--pay {
    border-top: 1px solid #e1e5e9 !important;
  }

  body#product .hl-trust-pay__link {
    flex-direction: row !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1600px) {
  body#product .product__container,
  body.page-product .product__container {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr) !important;
    column-gap: 2.75rem !important; /* ~44px: ~14 to sep + ~30 to info */
  }

  body#product .product__images {
    max-height: none !important;
    --hl-pdp-stage-h: 440px;
  }

  body#product .product__images:has(.product__carousel.hl-gallery--multi) {
    --hl-pdp-stage-h: 425px;
  }

  body#product .product__carousel {
    height: 440px !important;
    max-height: 440px !important;
  }

  body#product .product__carousel.hl-gallery--multi {
    height: 425px !important; /* +25 vs prior 400 — ~6% */
    max-height: 425px !important;
  }

  body#product .product__carousel .carousel-item picture,
  body#product .product__carousel .carousel-item img {
    max-height: 100% !important;
  }

  body#product .product__right {
    max-width: 40rem !important;
  }
}