/* ==========================================================================
   United We Stand LLC — responsive rules
   Reference breakpoints: the layout engine switches at 768px; the header
   collapses to the mobile layout below 768px or whenever the desktop
   navigation no longer fits (main.js adds html.mobile-header).
   ========================================================================== */

/* ---------- Desktop / tablet layout engine (>= 768px) ---------- */
@media (min-width: 768px) {
  .grid {
    --cell: calc((var(--site-max) - var(--grid-gap) * 23) / 24);
    grid-template-columns: minmax(var(--edge), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--edge), 1fr);
    grid-template-rows: repeat(var(--rows-d), minmax(var(--row-h), auto));
  }
  .block {
    grid-area: var(--gd);
    justify-content: var(--jd, flex-start);
    align-items: var(--ad, flex-start);
  }
  .menu-overlay__item a, .menu-overlay__login { font-size: 6vw; }
}
@media (min-width: 769px) {
  .btn { white-space: nowrap; }
}
@media (max-width: 768px) {
  /* stretched block buttons drop their vertical padding and wrap on small screens */
  .btn { padding-top: 0; padding-bottom: 0; }
}

/* ---------- Mobile (< 768px) ---------- */
@media (max-width: 767px) {
  :root {
    --gutter: 6vw;
    --hdr-pad: 6vw;
    --fu: 1.2vmax;
    --fs-meta: calc(-0.2 * var(--fu) + 1rem);
  }
  .site-header__desktop { display: none; }
  .site-header__mobile { display: flex; }

  /* summary carousel: two slides in view with arrows */
  .summary__header { height: auto; }
  .summary__arrow { display: block; }
  .newsletter__fields { width: 84%; min-width: 0; }
  .summary__item { width: 50.5%; }

  /* text underline shapes use the mobile stroke */
  .block--marquee { padding: 1.5% 0; }

  /* product list */
  .plist__title { display: block; }
  .plist__nav { display: none; }
  .plist__select {
    position: sticky; top: var(--header-h, 112px); z-index: 20;
    display: flex; align-items: center; gap: 11px;
    padding: 8px 0; margin-bottom: 10px;
    background: var(--bg);
  }
  .plist__select label { flex: 0 0 auto; font-size: 1rem; font-weight: 500; line-height: 1.4; }
  .plist__select .select-wrap { flex: 1 1 0; }
  .plist__select select, .select-wrap select { min-height: 48px; height: 48px; font-size: var(--fs-body); }
  .plist__select select { color: rgba(0, 0, 0, 0.55); }
  .plist__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .plist-item__link { gap: 1vw; }
  .variant .select-wrap select { font-size: 16px; }

  /* product detail stacks */
  .pdp { flex-direction: column; }
  .pdp__gallery, .pdp__content { width: 100%; }
  .pdp__content { padding: 6vw; }
  .pdp__crumbs { display: none; }
  .pdp__indicator { display: block; }
  .pdp__controls { flex-wrap: wrap; }
  .qty { flex: 0 0 90px; width: auto; }
  .qty__box { min-height: 48px; height: 48px; padding: 0 9.56px; }
  .pdp__add { flex: 2 0 auto; }
  .pdp .buy-btn { min-height: 48px; }
  .buy-btn__label { font-size: min(1em, 19px); }

}

/* ---------- Header collapses whenever the desktop navigation overflows ---------- */
html.mobile-header { --hdr-pad: 6vw; }
html.mobile-header .site-header { padding-left: 6vw; padding-right: 6vw; }
html.mobile-header .site-header__desktop { display: none; }
html.mobile-header .site-header__mobile { display: flex; }

/* ---------- Large screens: nothing scales past the 1400px container ---------- */
@media (min-width: 1400px) {
  .grid { --edge: max(calc(var(--gutter) - var(--grid-gap)), calc((100% - var(--site-max)) / 2 - var(--grid-gap))); }
}