/*
 * Cross-page quality fixes found during the responsive and technical audit.
 * Kept standalone so the whole layer can be reviewed or removed independently.
 */

html.menu-open,
html.menu-open body {
  overscroll-behavior: none;
}

html.menu-open body {
  touch-action: none;
}

/* The catalog introduction must reflow before its fixed 500px copy column clips. */
@media (max-width: 920px) {
  .catalog-intro > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .catalog-intro div > p {
    max-width: 680px;
  }
}

/* Keep the fixed product action clear of the final footer links. */
@media (max-width: 760px) {
  body:has(.mobile-buy-bar) {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .mobile-buy-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* 44px minimum interactive areas on touch layouts, without enlarging dot artwork. */
.hero-dots,
.schema-dots {
  gap: 0;
}

.hero-dots button,
.schema-dots button {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
}

.hero-dots button.is-active,
.schema-dots button.is-active {
  background: transparent;
  transform: none;
}

.hero-dots button::before,
.schema-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c7cbc6;
  transform: translate(-50%, -50%);
  transition: background 0.18s ease, transform 0.18s ease;
}

.hero-dots button.is-active::before,
.schema-dots button.is-active::before {
  background: var(--green-dark);
  transform: translate(-50%, -50%) scale(1.35);
}

.cart-quantity {
  width: 134px;
  grid-template-columns: 44px minmax(44px, 1fr) 44px;
}

.quantity button {
  min-width: 44px;
  min-height: 44px;
}

.remove-item {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  justify-content: center;
}

@media (max-width: 760px) {
  .purchase-row {
    grid-template-columns: 134px minmax(0, 1fr);
  }

  .header-cart,
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }

  .site-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .hero-dots {
    right: 12px;
    bottom: 8px;
  }
}

/* Give wide legal tables an explicit mobile interaction cue. */
.legal-table-hint {
  display: none;
}

@media (max-width: 760px) {
  .legal-table-hint {
    margin: 22px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #747a74;
    font-size: 12px;
    font-weight: 700;
  }

  .legal-table-hint + .legal-table-wrap,
  .legal-table-hint + .privacy-policy__table-wrap,
  .legal-table-hint + .cookie-policy__table-wrap {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dots button::before,
  .schema-dots button::before {
    transition: none;
  }
}

/* Keep the economic benefits tab on two intentional lines only on phones. */
.advantages-tab-mobile-break {
  display: none;
}

@media (max-width: 760px) {
  .home-page .home-hero-copy h1 {
    font-size: 48px;
  }

  .advantages-tab-mobile-break {
    display: block;
  }
}

/* Landscape plant profiles get their own toast geometry; controller covers stay intact. */
.cart-toast--profile {
  width: min(560px, calc(100vw - 30px));
  grid-template-columns: 148px minmax(0, 1fr) 34px;
  align-items: center;
}

.cart-toast--profile > img {
  width: 148px;
  height: 96px;
  align-self: center;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.cart-toast--profile .cart-toast-copy {
  min-height: 110px;
}

.cart-toast--profile > button {
  align-self: start;
}

@media (max-width: 760px) {
  .cart-toast--profile {
    grid-template-columns: 96px minmax(0, 1fr) 32px;
    gap: 12px;
    min-height: 136px;
  }

  .cart-toast--profile > img {
    width: 96px;
    height: 68px;
  }

  .cart-toast--profile .cart-toast-copy {
    min-height: 106px;
  }
}

@media (max-width: 760px) {
  /* Mobile notifications behave like compact bottom sheets. */
  .cart-toast {
    left: 15px;
    right: 15px;
    width: auto;
    bottom: 0;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }

  /* Green, compact scrollbar for the horizontally scrolling category rail. */
  .category-chips {
    padding-bottom: 10px;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--green) #eef1ed;
    scrollbar-width: thin;
  }

  .category-chips::-webkit-scrollbar {
    height: 8px;
  }

  .category-chips::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef1ed;
  }

  .category-chips::-webkit-scrollbar-thumb {
    border: 2px solid #eef1ed;
    border-radius: 999px;
    background: var(--green);
    background-clip: padding-box;
  }

  .category-chips::-webkit-scrollbar-thumb:hover {
    background: var(--green-dark);
    background-clip: padding-box;
  }

  /* Stacked product tabs use a straight bottom indicator instead of a left rail. */
  .product-page .tabs-list button {
    border-radius: 0;
  }

  .product-page .tabs-list button[aria-selected="true"] {
    box-shadow: inset 0 -3px var(--green);
  }

  /* Keep product purchase actions compact without shrinking their tap targets. */
  .product-page .purchase-row {
    gap: 8px;
    margin-top: 16px;
  }

  .product-page .quantity,
  .product-page .buy-button {
    min-height: 46px;
  }

  .product-page .buy-button {
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .product-page .one-click {
    min-height: 44px;
    margin-top: 8px;
    padding: 0 14px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }
}