/* ═══════════════════════════════════════════════
   KESTOSIPS — RESPONSIVE / MOBILE STYLES
   Breakpoints:
     768px  = tablet  (hamburger kicks in)
     640px  = large phone
     480px  = small phone
═══════════════════════════════════════════════ */

/* ─── TOUCH: hide custom cursor, restore native ─── */
@media (hover: none) and (pointer: coarse) {
  .cur-ring, .cur-dot { display: none !important; }
  body  { cursor: auto; }
  a     { cursor: pointer; }
  button { cursor: pointer; }
  .btn, .filter-btn, .detail-buy, .nav-ham { cursor: pointer; }
}

/* ══════════════════════════════════════════════
   TABLET  ≤ 768px
══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV: show hamburger ── */
  .nav-links { display: none !important; }
  .nav-ham {
    display: flex !important;
    width: 32px;
    gap: 6px;
    padding: 6px 0;
    cursor: pointer;
    position: relative;
    z-index: 1001;
  }
  .nav-ham span {
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 1px;
    display: block !important;
    width: 100%;
    opacity: 1 !important;
  }
  :root { --nav-h: 64px; }

  /* ── SECTION SPACING ── */
  .section-pad { padding: 72px 0; }
  .container   { padding: 0 4%; }

  /* ── FOOTER ── */
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px;
  }
  #ks-footer { padding: 48px 4%; }

  /* ── DETAIL OVERLAY (picks drawer) ── */
  .detail-inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding: 100px 4% 60px;
  }

  /* ── POTM BANNER ── */
  .potm-banner {
    grid-template-columns: 1fr !important;
    padding: 48px 4%;
  }
  .potm-visual {
    width: 100% !important;
    height: 280px !important;
    order: -1;
    background: transparent !important;
    margin: -48px -4% 0;
    padding: 0;
  }
  .potm-visual img { object-fit: contain !important; width: 100% !important; }
  .potm-visual svg { display: block; margin: 0 auto; }

  /* ── PICKS GRID ── */
  .picks-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  /* ── BLOG FEATURED POST ── */
  .post-featured {
    grid-template-columns: 1fr !important;
  }
  .post-featured-body { padding: 36px 28px; }

  /* ── POST / VISITS GRID ── */
  .post-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
  }

  /* ── ESSENTIALS GRID ── */
  .essentials-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  /* ── MERCH GRID ── */
  .merch-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  /* ── HOME: intro grid ── */
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  #intro { padding: 80px 4%; }

  /* ── HOME: story strip ── */
  .story-inner {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .story-label-vert {
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
  #story { padding: 72px 4%; }

  /* ── HOME: stats ── */
  #home-stats {
    flex-wrap: wrap !important;
    gap: 32px;
    padding: 60px 4%;
  }
  .home-stat {
    border-right: none !important;
    padding: 0 24px !important;
    flex: 1 1 40%;
  }

  /* ── HOME: sections grid ── */
  .sections-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .tile-featured { grid-column: span 2 !important; }
  #sections { padding: 72px 4%; }

  /* ── PAGE HEROES (blog/distillery/essentials/picks) ── */
  .page-hero {
    padding: calc(var(--nav-h) + 52px) 4% 52px;
  }
  .page-hero h1 {
    font-size: clamp(2.6rem, 10vw, 5rem) !important;
  }

  /* ── ABOUT PAGE ── */
  .about-hero {
    grid-template-columns: 1fr !important;
    gap: 40px;
    padding: calc(var(--nav-h) + 60px) 4% 60px !important;
  }
  .about-hero-img { max-height: 420px; }

  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .about-story { padding: 72px 4%; }

  .values-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .values-section { padding: 72px 4%; }

  /* ── ARTICLE / BLOG POST VIEW ── */
  .article-inner {
    padding: 100px 4% 60px !important;
  }

  /* ── CONTACT STRIP ── */
  .contact-strip { padding: 60px 4%; }

  /* ── FILTER BAR ── */
  .filter-bar { width: 100%; }
  .filter-btn  { padding: 10px 16px; font-size: .6rem; }

  /* ── BUTTONS ── */
  .btn { padding: 13px 24px; }

  /* ── HERO CTAs ── */
  .hero-ctas { gap: 12px; }
}

/* ══════════════════════════════════════════════
   LARGE PHONE  ≤ 640px
══════════════════════════════════════════════ */
@media (max-width: 640px) {

  :root { --nav-h: 60px; }

  /* ── SECTION SPACING ── */
  .section-pad { padding: 56px 0; }

  /* ── FOOTER ── */
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ── POST / VISITS GRID → single col ── */
  .post-grid { grid-template-columns: 1fr !important; gap: 24px; }

  /* ── PICKS GRID → single col ── */
  .picks-grid { grid-template-columns: 1fr !important; }
  .pick-card  { padding: 24px; }

  /* ── SHOPIFY GRID → 3 cols ── */
  #shopify-all-products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .shopify-card-body { padding: 10px !important; gap: 4px !important; }
  .shopify-card-btn  { margin: 0 10px 10px !important; padding: 9px !important; }

  /* ── ESSENTIALS → single col ── */
  .essentials-grid { grid-template-columns: 1fr !important; }
  .essential-card  { padding: 24px; }

  /* ── MERCH → single col ── */
  .merch-grid { grid-template-columns: 1fr !important; }

  /* ── VALUES → single col (about) ── */
  .values-grid { grid-template-columns: 1fr !important; }
  .value-item  { padding: 36px 24px; }

  /* ── HOME: sections → single col ── */
  .sections-grid { grid-template-columns: 1fr !important; }
  .tile-featured { grid-column: span 1 !important; }
  .section-tile  { padding: 36px 24px; }

  /* ── HOME: hero title ── */
  .hero-title {
    font-size: clamp(4rem, 22vw, 7rem) !important;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .hero-ctas .btn { width: 80%; justify-content: center; }

  /* ── PAGE HEROES ── */
  .page-hero h1 {
    font-size: clamp(2.2rem, 12vw, 4rem) !important;
    line-height: 1 !important;
  }
  .page-hero-sub { font-size: .85rem; }

  /* ── ABOUT HERO title ── */
  .about-hero-text h1 {
    font-size: clamp(2.4rem, 11vw, 4.5rem) !important;
  }
  .about-hero-img { max-height: 240px !important; }

  /* ── DETAIL OVERLAY ── */
  .detail-inner { padding: 90px 4% 48px; }
  .detail-name  { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }

  /* ── POTM ── */
  .potm-banner  { padding: 40px 4%; }
  .potm-name    { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }

  /* ── BLOG FEATURED ── */
  .post-featured-body { padding: 28px 20px; }

  /* ── ARTICLE VIEW ── */
  .article-inner { padding: 90px 4% 48px !important; }

  /* ── CONTACT STRIP ── */
  .contact-strip { padding: 48px 4%; }

  /* ── FILTER BAR ── */
  .filter-btn { padding: 9px 14px; letter-spacing: .12em; }

  /* ── STORY GRID (about) ── */
  .about-story { padding: 56px 4%; }
  .values-section, .mission-strip { padding: 56px 4%; }

  /* ── HOME STATS ── */
  .home-stat { flex: 1 1 100%; padding: 0 !important; text-align: center; }
  .home-stat-num { font-size: clamp(2.2rem, 10vw, 3rem) !important; }

  /* ── NAV LOGO shrink ── */
  .nav-logo { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════
   SMALL PHONE  ≤ 480px
══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── HERO ── */
  .hero-title { font-size: clamp(3.6rem, 24vw, 5.5rem) !important; }
  .hero-sub   { font-size: .85rem !important; }
  .hero-ctas .btn { width: 90%; }

  /* ── PAGE HERO ── */
  .page-hero h1 { font-size: clamp(2rem, 13vw, 3.5rem) !important; }

  /* ── SECTION PADDING ── */
  .section-pad { padding: 48px 0; }
  #intro, #story, #sections { padding: 48px 4%; }
  #home-stats { padding: 48px 4%; }

  /* ── PICK CARD ── */
  .pick-card { padding: 20px; }

  /* ── SECTION TILE ── */
  .section-tile { padding: 28px 20px; }
  .tile-title   { font-size: 1.2rem; }

  /* ── FILTER BAR ── */
  .filter-bar  { flex-direction: column; width: 100%; border: none; gap: 1px; }
  .filter-btn  {
    width: 100%; text-align: left;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .filter-btn:last-child { border-bottom: none; }

  /* ── BUTTONS ── */
  .btn { padding: 12px 20px; font-size: .68rem; }

  /* ── DETAIL CLOSE ── */
  .detail-close { top: 16px; right: 4%; }

  /* ── FOOTER ── */
  #ks-footer { padding: 40px 4%; }
}

/* ══════════════════════════════════════════════
   MOBILE NAV OVERLAY — always full-screen
══════════════════════════════════════════════ */
.mobile-nav {
  z-index: 9998; /* above everything except loader */
}
.mobile-nav a {
  font-size: clamp(1.6rem, 8vw, 2.2rem);
}

/* ══════════════════════════════════════════════
   HAMBURGER — animated X when open
   (gap:6px + height:2px → offset = 6+2 = 8px)
══════════════════════════════════════════════ */
.nav-ham.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-ham.open span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0);
}
.nav-ham.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ══════════════════════════════════════════════
   SCROLL LOCK when mobile nav is open
══════════════════════════════════════════════ */
body.nav-open { overflow: hidden; }