/* ==========================================================================
   Kaluchie — responsive
   Breakpoints per README: grid 3->2 at 1024, ->1 at 640; filter rail becomes
   a bottom sheet; PDP gallery becomes a swipe carousel with a sticky bottom
   add-to-bag bar; header nav collapses to a full-screen overlay.
   Mobile is specified at 390pt in Kaluchie Mobile.dc.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1200 — display type starts to crowd the column
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root {
    --type-hero: 88px;
    --type-page-title: 60px;
    --type-section: 44px;
    --type-pdp-title: 48px;
  }

  .k-footwear-head__title { font-size: 76px; }
  .k-sig-hero__title { font-size: 92px; }
  .k-teaser__title { font-size: 46px; }
  .k-nav { gap: 16px; }
  .k-nav a { font-size: 14px; letter-spacing: 0.10em; }
}

/* --------------------------------------------------------------------------
   <= 1024 — grid 3 -> 2, nav collapses, rail becomes a sheet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --gutter: 24px;
    --type-hero: 68px;
    --type-page-title: 52px;
    --type-section: 38px;
    --type-pdp-title: 40px;
  }

  .k-grid { grid-template-columns: repeat(2, 1fr); }
  .k-grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* --- Header ---------------------------------------------------------
     CSS owns the closed state, not JavaScript. If the script is blocked,
     slow, or errors, a full-screen fixed overlay that defaults to visible
     would cover the entire page on every phone. Default to hidden and let
     the toggle opt in; <noscript> in header.php reverts the nav to a plain
     inline list so no-JS visitors still get navigation. */
  .k-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 70;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 80px var(--gutter) 40px;
    background: var(--color-accent-900);
    overflow-y: auto;
  }

  .k-nav[data-k-open="true"] { display: flex; }

  .k-nav a {
    font-size: 34px;
    letter-spacing: 0.04em;
    padding: 10px 0;
    border-bottom: 0;
  }

  .k-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    order: -1;
  }

  /* The menu overlay's own close button sits above the panel. */
  .k-nav__close {
    position: fixed;
    top: 14px;
    right: var(--gutter);
    z-index: 71;
  }

  .k-header__inner { gap: 16px; }
  .k-header__tools { gap: 14px; margin-left: auto; }
  .k-header__tool span:not(.k-bag-count) { display: none; }

  /* --- Hero ----------------------------------------------------------- */
  .k-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px var(--gutter) 48px;
  }

  .k-hero__figure { max-width: 420px; }

  /* --- Spec strip: 4 -> 2 ---------------------------------------------- */
  .k-spec__grid { grid-template-columns: repeat(2, 1fr); }

  .k-spec__cell {
    padding: 20px;
    border-bottom: 1px solid var(--color-accent-700);
  }

  .k-spec__cell:nth-child(2n) { border-right: 0; padding-right: 0; }
  .k-spec__cell:nth-child(2n+1) { padding-left: 0; }
  .k-spec__cell:nth-last-child(-n+2) { border-bottom: 0; }

  /* --- Shop rail becomes a bottom sheet -------------------------------- */
  .k-shop-layout { grid-template-columns: 1fr; }

  .k-rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 20px;
    border: 1px solid var(--color-accent-600);
    background: transparent;
    color: var(--color-bg);
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Same rule as the nav: the sheet defaults closed in CSS so a missing
     script cannot leave it pinned over the grid. */
  .k-rail {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 65;
    max-height: 78vh;
    overflow-y: auto;
    padding: 24px var(--gutter) 32px;
    background: var(--color-accent-900);
    border-top: 2px solid var(--color-accent-500);
    animation: k-sheet 240ms ease;
  }

  .k-rail[data-k-open="true"] { display: flex; }

  @keyframes k-sheet {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* --- PDP ------------------------------------------------------------- */
  .k-pdp { grid-template-columns: 1fr; gap: 36px; }

  /* Gallery becomes a swipe carousel: the strip goes horizontal under the
     frame and the frame scroll-snaps. */
  .k-gallery { flex-direction: column-reverse; gap: 12px; }

  .k-gallery__strip {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .k-gallery__strip::-webkit-scrollbar { display: none; }

  .k-gallery__thumb { width: 64px; flex: none; }

  /* Sticky bottom add-to-bag bar carrying size label and price. */
  .k-pdp__sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px var(--gutter);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--color-header);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-accent-600);
  }

  .k-pdp__sticky-meta {
    flex: 1;
    min-width: 0;
  }

  .k-pdp__sticky-price {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
  }

  .k-pdp__sticky-size {
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-accent-300);
  }

  .k-pdp__sticky .k-btn { flex: none; padding: 14px 24px; }

  /* Give the page room so the bar never covers the last accordion. */
  body.single-product { padding-bottom: 84px; }

  /* --- Other layouts ---------------------------------------------------- */
  .k-checkout,
  .k-cart-page,
  .k-about,
  .k-sig-buy,
  .k-teaser,
  .k-look { grid-template-columns: 1fr; }

  .k-look:nth-child(even) .k-look__media { order: 0; }
  .k-look__body { padding: 32px 24px; }
  .k-teaser__body { padding: 36px 28px; }

  .k-summary { position: static; }

  .k-footwear-head { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--gutter); }
  .k-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .k-drawer { width: 100%; }
}

/* --------------------------------------------------------------------------
   <= 640 — grid 2 -> 1
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --type-hero: 52px;
    --type-page-title: 42px;
    --type-section: 32px;
    --type-pdp-title: 34px;
    --type-card-title: 22px;
    --section-rhythm: 48px;
  }

  .k-grid,
  .k-grid--4,
  .k-grid--2 { grid-template-columns: 1fr; }

  .k-spec__grid { grid-template-columns: 1fr; }

  .k-spec__cell {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-accent-700);
  }

  .k-spec__cell:last-child { border-bottom: 0; }

  .k-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
  }

  .k-page-head { flex-direction: column; align-items: flex-start; gap: 12px; }

  .k-hero__plate { flex-direction: column; gap: 16px; }
  .k-hero__plate-div { width: 100%; height: 1px; }
  .k-hero__actions { flex-direction: column; }
  .k-hero__actions .k-btn { width: 100%; }

  .k-acct-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .k-acct-stats { width: 100%; }
  .k-acct-stat { flex: 1; padding: 0 14px; text-align: left; }
  .k-acct-stat:first-child { padding-left: 0; border-left: 0; }

  .k-express { grid-template-columns: 1fr; }

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }

  .woocommerce-MyAccount-navigation ul { overflow-x: auto; }
  .woocommerce-MyAccount-navigation li a { padding: 14px 16px; white-space: nowrap; }

  .k-footer__inner { grid-template-columns: 1fr; }
  .k-footer__bar-inner { flex-direction: column; align-items: flex-start; gap: 10px; }

  .k-track { grid-template-columns: repeat(2, 1fr); }
  .k-specsheet__row { grid-template-columns: 40px 1fr; }
  .k-specsheet__def { grid-column: 2; }

  .k-modal__panel { padding: 32px 24px; }
  .k-sizerun__grid { grid-template-columns: repeat(4, 1fr); }
  .k-sig-hero { min-height: 460px; }
  .k-sig-hero__title { font-size: 56px; }
}

/* --------------------------------------------------------------------------
   Print — order confirmations get printed
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .k-header, .k-ticker, .k-footer, .k-drawer, .k-modal, .k-toast { display: none !important; }
  .k-blueprint__corner { display: none; }
}