/* Responsive behaviour — mobile first, then larger screens.
   Breakpoints (documented in README.md):
   - Phones:        < 768px
   - Tablets:       768px – 1023px
   - Laptops:       1024px – 1439px
   - Big screens:   1440px and up (content stays centred, max 1296px)

   Base styles in base.css / components.css / home.css are the phone
   layout unless a media query below changes them. */

/* Benefits blinds: stack as expandable photo bands on phones. */
@media (max-width: 767px) {
  .benefits-blinds {
    flex-direction: column;
    width: calc(100% - (var(--space-2) * 2));
    height: auto;
    gap: 8px;
  }

  .benefits-blind {
    flex: 0 0 auto;
    height: 76px;
    transition: height 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .benefits-blind.is-active {
    flex-grow: 0;
    height: min(46vh, 340px);
  }

  .benefits-intro__lead {
    font-size: 0.95rem;
  }

  .benefits-blind__word {
    transform: translate(-50%, -50%) rotate(0deg);
    font-size: 1.15rem;
    letter-spacing: 0.16em;
  }

  .benefits-blind.is-active .benefits-blind__word {
    bottom: 42%;
    left: var(--space-2);
    font-size: clamp(2.6rem, 14vw, 4rem);
  }

  .benefits-blind__copy {
    padding: var(--space-2);
  }

  .benefits-blind__title {
    max-width: none;
  }

  .benefits-rail {
    width: calc(100% - (var(--space-2) * 2));
  }

  /* Product category tabs: one swipeable row (home + products page). */
  .products-category-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
    margin-inline: calc(-1 * var(--space-2));
    padding-inline: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .products-category-row::-webkit-scrollbar {
    display: none;
  }

  .products-category-row .pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Phones and small tablets: stacked layout, collapsible nav */
@media (max-width: 767px) {
  .section {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .section__title {
    font-size: 1.75rem;
  }

  /* Header stays single-line on phones too — see the header
     section at the end of this file, which overrides the old
     wrapping header rules. */
  .trust-stage {
    grid-template-columns: 1fr;
    width: calc(100% - (var(--space-2) * 2));
    gap: var(--space-3);
  }

  .trust-media {
    order: -1;
  }

  .trust-media__frame {
    min-height: 240px;
    aspect-ratio: 16 / 11;
  }

  .trust-media__play {
    width: 58px;
    height: 58px;
    font-size: 1.2rem;
  }

  .trust-media__caption {
    left: var(--space-2);
    right: 4.5rem;
    bottom: var(--space-2);
    font-size: 1.05rem;
  }

  .trust-promise {
    max-height: 5.25rem;
  }

  .trust-promise.is-active {
    max-height: 13rem;
  }

  .trust-intro__lead {
    font-size: 0.95rem;
  }

  .hero--cinematic {
    --hero-nav-overlap: calc(12px + 72px);
    --hero-chrome-offset: var(--announcement-height);
    height: calc(100svh - var(--hero-chrome-offset));
    margin-top: calc(-1 * var(--hero-nav-overlap));
    padding-top: var(--hero-nav-overlap);
    min-height: 0;
  }

  .hero-jar {
    width: min(48vw, 210px);
  }

  .hero-display {
    font-size: clamp(2.6rem, 15vw, 4.25rem);
  }

  .hero-drop:nth-child(n + 9) {
    display: none;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .product-grid > * {
    flex: 1 1 calc(50% - var(--space-2));
    min-width: 0;
  }

  .product-card {
    padding: 10px;
  }

  .product-card__media {
    max-height: 160px;
  }

  .product-card__name {
    font-size: 0.875rem;
  }

  .product-card__price .price--now {
    font-size: 0.95rem;
  }

  .product-card__price .price--old {
    font-size: 0.75rem;
  }

  .product-card__badge {
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    font-size: 0.625rem;
  }

  .star-rating__star {
    width: 12px;
    height: 12px;
  }

  .product-card__review-count {
    font-size: 0.75rem;
  }

  .product-card .button--full {
    padding-inline: 10px;
    font-size: 0.8125rem;
  }

  .review-carousel {
    --review-gap: var(--space-2);
    --review-card-w: min(300px, 78vw);
    --review-card-h: 260px;
  }

  .review-card {
    padding: var(--space-2) var(--space-3);
  }

  .review-card__quote {
    font-size: 0.98rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Small phones */
@media (max-width: 479px) {
  .hero-jar {
    width: min(52vw, 190px);
  }

  .hero-brand {
    font-size: 1.4rem;
  }

  .hero-ctas {
    width: 100%;
  }

  .hero-ctas .button {
    flex: 1 1 auto;
  }

  .video-carousel {
    --video-card-w: 196px;
    --video-media-h: 250px;
    height: calc(var(--video-media-h) + 178px);
    margin-inline: calc(-1 * var(--space-2));
  }

  .video-card__play {
    width: 48px;
    height: 48px;
  }

  .video-card__body {
    padding: 10px 10px 12px;
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .review-carousel {
    --review-card-w: min(300px, 46vw);
    --review-card-h: 270px;
  }

  .trust-stage {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .trust-media__frame {
    min-height: 340px;
  }

  .hero-jar {
    width: min(36vw, 240px);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Laptops */
@media (min-width: 1024px) and (max-width: 1439px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .review-carousel {
    --review-card-w: 310px;
    --review-card-h: 280px;
  }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .video-carousel {
    --video-card-w: 250px;
    --video-media-h: 310px;
    height: calc(var(--video-media-h) + 190px);
  }
}

/* Big screens: content does not stretch past 1296px, it centres */
@media (min-width: 1440px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .video-carousel {
    --video-card-w: 260px;
    --video-media-h: 320px;
    height: calc(var(--video-media-h) + 192px);
  }

  .review-carousel {
    --review-card-w: 340px;
    --review-card-h: 290px;
  }
}

/* Header — floating glass pill, hamburger from 1350px down.
   Closed: nowrap row (logo / search / cart / hamburger). Open:
   menu drops to row 2 inside the same glass pill. Above 1350px
   the full nav stays horizontal. Toggle JS flips .is-open on
   .main-nav and .is-menu-open on .site-header. */
@media (max-width: 1350px) {
  .site-header {
    width: calc(100% - 32px);
    top: 12px;
  }

  /* Wrap is only for the open menu: closed items fit on row 1;
     the 100%-basis menu drops to row 2 when open. Pill radius
     softens slightly so the open panel does not look clipped. */
  .header-inner {
    flex-wrap: wrap;
    border-radius: 28px;
    padding: 10px 20px 10px 14px;
  }

  .search-form {
    order: 2;
  }

  .account-menu {
    order: 3;
  }

  .cart-button {
    order: 3;
  }

  .nav-toggle {
    display: inline-flex;
    order: 4;
  }

  .main-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 14px;
    padding-bottom: 6px;
    margin-left: 0;
    order: 5;
    border-top: 1px solid rgba(234, 211, 198, 0.55);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    padding: 12px 16px;
  }

  .main-nav a:hover {
    transform: translateX(4px) translateY(0);
  }
}

/* Phones: fold the search bar into the menu. A search bar in the
   closed header row is what pushed the phone header to two rows
   (logo, then search + cart + hamburger). So below 768px the
   closed header is only logo + cart + hamburger on one line.
   When the hamburger opens, the search appears at the top of the
   menu panel, above the nav links, with space above it. */
@media (max-width: 767px) {
  .announcement-bar {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .announcement-bar__track {
    display: inline-flex;
    white-space: nowrap;
    animation: announcement-marquee 18s linear infinite;
    will-change: transform;
  }

  .announcement-bar__track span {
    white-space: nowrap;
    padding-right: 32px;
  }

  .announcement-bar__track span + span {
    display: inline;
  }

  .search-form {
    display: none;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
    order: 5;
  }

  .site-header.is-menu-open .search-form {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(234, 211, 198, 0.55);
  }

  /* Phones: search is hidden in the closed header, so push the
     right cluster over — logo left, account + cart + hamburger right.
     If the account chip is missing, the cart still takes that push. */
  .header-inner > .cart-button {
    margin-left: auto;
  }

  .header-inner > .account-menu {
    margin-left: auto;
  }

  .header-inner > .account-menu + .cart-button {
    margin-left: 0;
  }

  .main-nav {
    order: 6;
  }

  .main-nav.is-open {
    padding-top: 10px;
    border-top: none;
  }
}

/* Small phones: shrink the fixed pieces so the single glass row
   still fits at ~320px — smaller logo, tighter gaps, buttons. */
@media (max-width: 480px) {
  .site-header {
    width: calc(100% - 20px);
    top: 10px;
    margin-top: 8px;
  }

  .hero--cinematic {
    --hero-nav-overlap: calc(8px + 56px);
  }

  /* Keep inner-page gradient bands tucked under the smaller phone pill. */
  .page-hero,
  .product-detail-top {
    --page-nav-overlap: calc(8px + 56px);
  }

  .header-inner {
    gap: var(--space-1);
    min-height: 56px;
    padding: 8px 10px;
    border-radius: 24px;
  }

  .logo__image,
  .footer-logo {
    height: 30px;
    max-width: 110px;
  }

  .search-form input[type="search"] {
    padding: 8px 40px 8px 12px;
    font-size: 0.875rem;
  }

  .cart-button,
  .nav-toggle {
    width: 36px;
    height: 36px;
  }

  .nav-toggle__bar {
    width: 16px;
  }

  .site-header.is-menu-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.is-menu-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}