/* Mobile. This file loads last and is the only place breakpoints live, so
   there is one file to open when something breaks on a phone. */

@media (max-width: 1080px) {
  ul.products,
  .related ul.products,
  .up-sells ul.products,
  .product-grid ul.products,
  .showcase ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product__layout { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 860px) {
  :root { --header-h: 62px; }

  ul.products,
  .related ul.products,
  .up-sells ul.products,
  .product-grid ul.products,
  .showcase ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .header__nav {
    position: fixed;
    inset-block: var(--header-h) 0;
    right: 0;
    width: min(88vw, 380px);
    background: var(--ground);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.28s var(--ease);
    overflow-y: auto;
    padding: var(--s-5);
    z-index: 70;
  }
  .header__nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: var(--s-4) 0; }
  .nav__link::after { display: none; }

  /* The nav is off canvas at this width, so it no longer pushes the actions
     right. The logo is centred absolutely rather than by flex, so it stays in
     the middle of the bar regardless of how many icons sit beside it. */
  .header__bar { position: relative; justify-content: flex-end; }
  .header__actions { margin-left: auto; }

  .brand,
  .site-header .custom-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 60%;
    text-align: center;
  }
  .site-header .custom-logo { max-height: 36px; }
  .nav-toggle { display: inline-flex; }

  /* Close button inside the panel. */
  .nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--s-3);
    padding: var(--s-3) 0 var(--s-4);
    margin-bottom: var(--s-2);
    border-bottom: 1px solid var(--line);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .nav__close:hover { color: var(--ink); }
  .nav__close-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
  .nav__close-icon::before,
  .nav__close-icon::after {
    content: "";
    position: absolute;
    top: 7px; left: 0;
    width: 16px; height: 1.6px;
    background: currentColor;
  }
  .nav__close-icon::before { transform: rotate(45deg); }
  .nav__close-icon::after { transform: rotate(-45deg); }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: var(--s-7); }
}

@media (max-width: 620px) {
  /* These have to match the specificity of the rules in woocommerce.css that
     set the desktop column count. A bare `ul.products` at (0,0,1) loses to
     `.related ul.products` at (0,1,1), which is what left related products,
     recently viewed and the homepage rows at four columns on a phone. */
  ul.products,
  .related ul.products,
  .up-sells ul.products,
  .product-grid ul.products,
  .showcase ul.products,
  .shop__layout ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s-3);
  }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .shop__toolbar { flex-wrap: wrap; }
  .woocommerce-ordering { width: 100%; margin-left: 0; }
  .summary form.cart { flex-direction: column; }
  .summary .quantity input { width: 100%; }
  .card__body { padding: var(--s-3); }
}

/* Bottom navigation on phones. Appears only where it is useful, which is a
   store view, and never on desktop. */
.bottom-nav { display: none; }
@media (max-width: 860px) {
  body.woocommerce-page .bottom-nav,
  body.woocommerce .bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 75;
    background: var(--ground);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--s-3) 0;
    text-decoration: none;
    font-size: 0.68rem;
    color: var(--ink-soft);
  }
  .bottom-nav a .icon { width: 20px; height: 20px; }
  body.woocommerce-page, body.woocommerce { padding-bottom: 68px; }
}

@media print {
  .site-header, .site-footer, .bottom-nav, .breadcrumbs, form.cart { display: none !important; }
  body { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}