:root {
  --mobile-gutter: clamp(12px, 3.8vw, 16px);
  --mobile-section-y: clamp(42px, 11vw, 56px);
  --mobile-h1: clamp(30px, 8.6vw, 35px);
  --mobile-h2: clamp(24px, 7vw, 29px);
  --mobile-h3: clamp(17px, 4.7vw, 20px);
  --mobile-body: 15px;
  --mobile-small: 13px;
  --mobile-control: 44px;
  --mobile-radius: 8px;
  --mobile-line: rgba(43, 49, 55, 0.14);
  --mobile-muted: #66717b;
}

/* Helius' source image has a large black canvas. Keep the brand visible without
   letting that canvas dominate the warranty page. */
body:has(.service-card) .service-logo {
  min-height: 104px;
  background: #f5f7f8;
  border: 1px solid rgba(43, 49, 55, 0.14);
  color: #2cad56;
}

body:has(.service-card) .service-logo img {
  display: none;
}

body:has(.service-card) .service-logo::after {
  content: "HELIUS";
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 84px;
  }

  body {
    overflow-wrap: break-word;
  }

  body > main .container,
  body > .page main .container,
  body.cart-page .container {
    width: min(calc(100% - (var(--mobile-gutter) * 2)), 1180px) !important;
  }

  /* Use the shared mobile gutter once. The hero previously combined a wider
     page gutter with extra text padding, which made only the first screen narrow. */
  body.home-page .hero-inner.container,
  body.home-page:has(.hero-inner) .hero-inner.container {
    width: min(calc(100% - (var(--mobile-gutter) * 2)), 1180px) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body.home-page .hero-copy,
  body.home-page:has(.hero-inner) .hero-copy {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  body.home-page .hero-media,
  body.home-page:has(.hero-inner) .hero-media {
    width: 100% !important;
    max-width: none !important;
  }

  body > main section,
  body > .page main section {
    padding-block: var(--mobile-section-y) !important;
  }

  .home-page .hero h1,
  .catalog-hero h1,
  body.catalog-polished:has(.catalog-hero) .catalog-hero h1,
  body.catalog-polished:has(.catalog-hero) .hero.catalog-hero h1,
  body.catalog-polished:has(.shop-layout) .hero h1,
  .legal h1,
  body.cart-page .cart-hero h1 {
    font-size: var(--mobile-h1) !important;
    line-height: 1.03 !important;
    letter-spacing: 0 !important;
  }

  .topbar .menu-toggle,
  .topbar .cart-nav,
  .topbar .currency-toggle button,
  .lead-modal-close,
  .cart-close,
  body.cart-page .remove-item,
  body.cart-page .qty-input,
  .cart-line-qty,
  .cart-remove,
  .mobile-filter-toggle,
  .filter-reset,
  .filter-option,
  .catalog-preset-chip {
    min-width: var(--mobile-control) !important;
    min-height: var(--mobile-control) !important;
  }

  .topbar .currency-toggle button {
    padding: 0 !important;
  }

  /* Cookie consent should not hide the decision area behind a second modal. */
  .cookie-banner {
    left: var(--mobile-gutter) !important;
    right: var(--mobile-gutter) !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: var(--mobile-radius) !important;
  }

  .cookie-banner h3 {
    margin-bottom: 4px !important;
    font-size: 17px !important;
  }

  .cookie-banner p {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.38 !important;
  }

  .cookie-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .cookie-actions button {
    min-height: var(--mobile-control) !important;
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  /* Product catalogs: preserve two-column scanning while reducing model noise. */
  body.catalog-polished:has(.shop-layout) .shop-grid {
    gap: 10px !important;
  }

  body.catalog-polished:has(.shop-layout) .shop-card.product-card {
    padding: 11px !important;
    border-radius: var(--mobile-radius) !important;
  }

  body.catalog-polished:has(.shop-layout) .product-card-image,
  body.catalog-polished:has(.shop-layout) .product-card-image.is-battery {
    height: 124px !important;
    min-height: 124px !important;
  }

  body.catalog-polished:has(.shop-layout) .product-card-image img,
  body.catalog-polished:has(.shop-layout) .product-card-image.is-battery img,
  body.catalog-polished:has(.shop-layout) .product-card-image.is-panel img {
    max-height: 118px !important;
  }

  body.catalog-polished:has(.shop-layout) .shop-card.product-card h3 {
    display: -webkit-box !important;
    min-height: 50px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: clamp(13px, 3.7vw, 15px) !important;
    line-height: 1.16 !important;
  }

  body.catalog-polished:has(.shop-layout) .shop-card.product-card .item-price {
    margin-top: 9px !important;
    padding-top: 9px !important;
    font-size: clamp(19px, 5.5vw, 23px) !important;
  }

  body.catalog-polished .product-kind {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  /* Lead form: quieter hierarchy, stronger field readability. */
  .lead-modal-dialog {
    max-height: calc(100dvh - 24px) !important;
    padding: 22px 16px 17px !important;
    border-radius: 14px !important;
  }

  .lead-modal-dialog h2 {
    font-size: clamp(26px, 7.6vw, 32px) !important;
  }

  .lead-modal-dialog > p {
    color: #5d6670 !important;
    font-weight: 500 !important;
  }

  .lead-modal-form input::placeholder,
  .lead-modal-form textarea::placeholder {
    color: #727b83;
    opacity: 1;
  }

  .lead-modal-form input,
  .lead-modal-form select,
  .lead-modal-form textarea,
  .lead-modal-form button[type="submit"] {
    min-height: 48px !important;
  }

  /* Cart modal and checkout use the same control scale. */
  .cart-dialog h2 {
    font-size: clamp(28px, 8vw, 34px) !important;
  }

  .cart-line-qty {
    width: 140px !important;
    height: var(--mobile-control) !important;
  }

  .cart-line-qty button {
    min-width: var(--mobile-control) !important;
    min-height: var(--mobile-control) !important;
  }

  .cart-remove {
    width: var(--mobile-control) !important;
    height: var(--mobile-control) !important;
  }

  body.cart-page main {
    padding-top: 24px !important;
  }

  body.cart-page .cart-hero {
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  body.cart-page .cart-hero-copy {
    gap: 10px !important;
  }

  body.cart-page .cart-hero p {
    font-size: var(--mobile-body) !important;
    font-weight: 450 !important;
  }

  body.cart-page .cart-panel-head a {
    min-height: var(--mobile-control) !important;
    display: inline-flex;
    align-items: center;
  }

  body.cart-page .remove-item {
    width: var(--mobile-control) !important;
    height: var(--mobile-control) !important;
  }

  body.cart-page .qty-input {
    min-height: var(--mobile-control) !important;
  }

  body.cart-page .product-title strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Warranty: reduce the reading wall and keep the service proof compact. */
  body:has(.legal) .legal {
    padding-top: 42px !important;
  }

  body:has(.legal) .legal .lead {
    font-size: var(--mobile-body) !important;
    font-weight: 450 !important;
    line-height: 1.55 !important;
  }

  body:has(.legal) .doc h2 {
    margin-top: 28px !important;
    font-size: var(--mobile-h2) !important;
  }

  body:has(.legal) .doc p,
  body:has(.legal) .doc li {
    font-size: var(--mobile-body) !important;
    font-weight: 450 !important;
    line-height: 1.62 !important;
  }

  body:has(.legal) .service-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-block: 26px !important;
    padding: 16px !important;
  }

  body:has(.legal) .service-logo {
    min-height: 78px !important;
    padding: 12px !important;
  }

  body:has(.legal) .service-logo::after {
    font-size: 23px;
  }

  body:has(.legal) .installation-proof {
    gap: 8px !important;
    margin-block: 18px 26px !important;
  }

  body:has(.legal) .installation-proof figcaption {
    font-size: 12px !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 374px) {
  :root {
    --mobile-gutter: 11px;
  }

  body.catalog-polished:has(.shop-layout) .shop-grid {
    gap: 8px !important;
  }

  body.catalog-polished:has(.shop-layout) .shop-card.product-card {
    padding: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lead-modal,
  .mobile-sticky-cta,
  .shop-card {
    transition: none !important;
  }
}