/*
 * Responsive baseline v7 — viewport-safe sizing without global DPR scaling.
 * JS now exposes metrics only; layout sizing stays in CSS.
 */

:root {
  --sl-page-scale: 1;
}

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 849px) {
  body {
    font-size: var(--sl-text-base-mobile, 16px);
    line-height: var(--sl-mobile-line-height, 1.55);
  }

  a.button,
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  input[type='submit'],
  input[type='button'],
  input[type='reset'],
  .sl-btn {
    min-height: var(--sl-control-min-height, 48px);
    font-size: 1rem;
  }

  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
  select,
  textarea {
    min-height: var(--sl-control-min-height, 48px);
    font-size: 16px;
  }

  textarea {
    min-height: 120px;
  }

  label,
  .woocommerce-form__label,
  .form-row label {
    line-height: 1.4;
  }

  .single-product .product-nav a,
  .sl-chip,
  .shopline-topbar__filters,
  .sl-sort summary {
    min-height: var(--sl-touch-target-min, 44px);
  }
}

/* ══════════════════════════════════════════════
   PRODUCT GALLERY — always contain images
   ══════════════════════════════════════════════ */
.product-gallery,
.product-gallery-slider,
.woocommerce-product-gallery {
  overflow: hidden;
}

.product-gallery img,
.product-gallery-slider img,
.woocommerce-product-gallery img {
  max-height: 65vh;
  object-fit: contain !important;
}

.product-container .row,
.product-main .row {
  overflow: hidden;
}

/* ══════════════════════════════════════════════
   PRODUCT TITLE — fluid sizing
   ══════════════════════════════════════════════ */
.product-info .product-title,
.product-info .product_title {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem) !important;
  line-height: 1.3;
}