/* responsive.css — adaptive layout for simeonwoodworks.com
 *
 * The pages are built with inline grid templates and pixel-based font
 * sizes. Inline styles override class rules, so we lean heavily on
 * attribute selectors + !important to retrofit responsiveness.
 *
 * Breakpoints:
 *   ≤ 1100px  - .site-shell zoom turned off (see index.html)
 *   ≤ 980px   - tablet: collapse all multi-col grids to one (or 2 for
 *               product card repeats); shrink section padding; nav
 *               items wrap onto a second row
 *   ≤ 720px   - phone: hamburger menu; display headings shrink; 4/3-col
 *               product grids stay 2-col; everything else 1-col
 */

/* Keep horizontal overflow from causing weird sidescroll on smaller
 * viewports — content should fit within the visible width. */
html, body { overflow-x: hidden; }

/* Shop category strip — horizontal scroll on narrow screens so the tabs
 * never wrap awkwardly. Hide the scrollbar visually; touch-swipe still works. */
.sw-shop-strip-tabs {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sw-shop-strip-tabs::-webkit-scrollbar { display: none; }

/* Apple Pay button — uses the native Apple Pay button style on Safari +
 * Apple devices. On other browsers it'll either not initialize (we never
 * render the button) or render as a plain button which is OK. */
.sw-apple-pay-btn {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: black;
  display: block;
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.sw-apple-pay-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Nav baseline (all viewports)
   ============================================================ */
.sw-header { background: var(--cream); }

.sw-topstrip {
  background: var(--ink);
  color: var(--oak-pale);
  padding: 8px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-stamp);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: 14px;
}
.sw-topstrip-links { display: flex; gap: 22px; }

.sw-nav {
  padding: 20px 40px 16px;
  border-bottom: 1px solid rgba(92,58,30,.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.sw-nav-items {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* Hamburger hidden on desktop */
.sw-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.sw-nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 1px;
}

/* ============================================================
   ≤ 980px - tablet (incl. iPad Mini at 768px)
   ============================================================ */
@media (max-width: 980px) {
  /* Collapse multi-column inline grids. The :not() spares explicit
     2-col product grids so they don't go single-column on tablet. */
  *[style*="grid-template-columns:"]:not([style*="repeat(2"]) {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Bring 4/3-col product/category grids down to 2-col on tablets */
  *[style*="grid-template-columns: repeat(4"],
  *[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }

  /* Tighten section padding */
  main section,
  section[style*="padding"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .sw-topstrip { padding: 8px 24px; }
  .sw-nav      { padding: 16px 24px 14px; }

  /* Smaller display headings so the hero doesn't dominate */
  h1[class*="sw-display"][style*="font-size: 92"],
  h1[class*="sw-display"][style*="font-size: 88"],
  h1[class*="sw-display"][style*="font-size: 76"],
  h1[class*="sw-display"][style*="font-size: 72"] {
    font-size: 56px !important;
    line-height: 1.02 !important;
  }
  h2[class*="sw-display"][style*="font-size: 60"],
  h2[class*="sw-display"][style*="font-size: 56"],
  h2[class*="sw-display"][style*="font-size: 52"],
  h2[class*="sw-display"][style*="font-size: 48"] {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }

  /* Hide tagline under brand mark so nav row stays compact */
  .sw-nav-tagline { display: none; }

  /* Footer 3-col → 2-col */
  .sw-footer { grid-template-columns: 1.4fr 1fr !important; gap: 26px !important; }

  /* Bag line: shrink the photo column on smaller screens */
  .sw-bag-line { grid-template-columns: 96px 1fr auto !important; gap: 14px !important; }
}

/* ============================================================
   ≤ 720px - phones
   ============================================================ */
@media (max-width: 720px) {
  /* All inline grids → single column, even product 2-col repeats */
  *[style*="grid-template-columns:"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  /* Keep product/category grids at 2-col on phones for density */
  *[style*="grid-template-columns: repeat(4"],
  *[style*="grid-template-columns: repeat(3"],
  *[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  main section,
  section[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Display heading sizes */
  h1[class*="sw-display"] { font-size: 38px !important; line-height: 1.02 !important; }
  h2[class*="sw-display"] { font-size: 26px !important; line-height: 1.05 !important; }
  h3[class*="sw-display"] { font-size: 20px !important; }

  /* Body / lead text */
  p[class*="sw-body"][style*="font-size: 21"],
  p[class*="sw-body"][style*="font-size: 20"],
  p[class*="sw-body"][style*="font-size: 19"],
  p[class*="sw-body"][style*="font-size: 18"],
  p[class*="sw-body"][style*="font-size: 17"] {
    font-size: 16px !important;
  }

  /* Top dark strip stays compact */
  .sw-topstrip { padding: 8px 16px; font-size: 10px; }
  .sw-topstrip-tagline { display: none; }

  /* Hamburger nav. Items hide until toggled. */
  .sw-nav { padding: 12px 16px; gap: 10px; }
  .sw-nav-toggle { display: flex; }
  .sw-nav-items {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px 0 6px;
    border-top: 1px dashed rgba(92,58,30,.3);
    margin-top: 6px;
  }
  .sw-nav-items.is-open { display: flex; }
  .sw-nav-items a { font-size: 14px !important; padding: 8px 0 !important; }
  .sw-nav-commission { align-self: stretch; width: 100%; }

  /* Brand mark text smaller */
  .sw-nav-brand .sw-display { font-size: 20px !important; }

  /* Footer to a single column */
  .sw-footer {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding: 32px 18px 22px !important;
  }
  .sw-footer > div[style*="grid-column"] {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* Bag line: tight 2-col with price stacking under the title */
  .sw-bag-line {
    grid-template-columns: 84px 1fr !important;
    gap: 14px !important;
  }
  .sw-bag-line > .sw-display[style*="color: var(--oak)"] {
    grid-column: 2;
    margin-top: 6px;
    font-size: 18px !important;
  }
}

/* ============================================================
   ≤ 420px - very small phones
   ============================================================ */
@media (max-width: 420px) {
  h1[class*="sw-display"] { font-size: 32px !important; }
  h2[class*="sw-display"] { font-size: 24px !important; }
  /* Single column for product grids too at this width — 2 cols is cramped */
  *[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}