/* ==========================================================================
   The Daily Key — responsive.css  (mobile-first base lives in style.css;
   these rules layer in larger layouts and adapt the small ones)
   Ranges tested: 320–374 · 375–430 · 431–767 · 768–1023 · 1024–1439 · 1440+
   ========================================================================== */

/* ---- ≥ 576: large mobile ---- */
@media (min-width: 576px) {
  .pgrid { gap: 32px 18px; }
  .zgrid { grid-template-columns: repeat(3, 1fr); }
  .stories { grid-template-columns: 1fr 1fr; }
  .masonry { columns: 3; }
}

/* ---- ≥ 768: tablet ---- */
@media (min-width: 768px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; }
  .zgrid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .stories { grid-template-columns: repeat(3, 1fr); }
  .masonry { columns: 4; column-gap: 14px; }
  .masonry a { margin-bottom: 14px; }
  .finder-res .pgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- ≥ 1200: laptop and up: four-column product grid ---- */
@media (min-width: 1200px) {
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zgrid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1500px) { .catalog .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- < 1200 ---- */
@media (max-width: 1199.98px) {
  .main-nav > ul { gap: 16px; }
  .nav-link { font-size: .84rem; }
  .mega-zodiac { grid-template-columns: repeat(4, 1fr); }
  .mega-tiles-6 { grid-template-columns: repeat(3, 1fr); }
  .catalog { grid-template-columns: 240px minmax(0, 1fr); }
}

/* ---- < 992: tablet portrait and below — drawer navigation, stacked layouts ---- */
@media (max-width: 991.98px) {
  :root { --header-h: 64px; }
  .main-nav { display: none; }
  .nav-toggle { display: inline-grid; margin-left: -10px; }
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding-block: 8px; }
  .logo { justify-self: center; }
  .header-tools { justify-self: end; margin-right: -8px; }
  .logo-sub { display: none; }
  .logo-name { font-size: 1.5rem; }

  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; padding-bottom: 72px; gap: 8px; }
  .hero-title { font-size: min(11.4vw, 5.2rem); }
  .hero-art { height: clamp(430px, 88vw, 640px); margin-top: 16px; }
  .scroll-cue { display: none; }

  .story, .pers, .about-hero, .split, .contact-layout { grid-template-columns: 1fr; }
  .story-media { max-width: 460px; }
  .about-media { max-width: 480px; }
  .pdp { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .gallery { position: static; grid-template-columns: minmax(0, 1fr); }
  .thumbs { order: 2; grid-template-columns: repeat(auto-fill, minmax(64px, 72px)); max-width: 100%; }
  .cart-layout, .co-layout { grid-template-columns: minmax(0, 1fr); }
  .summary, .co-summary { position: static; }
  .co-summary { order: -1; }
  .catalog { grid-template-columns: 1fr; padding-top: 20px; }
  .f-toggle { display: inline-flex; }
  .filters { position: static; max-height: none; overflow: visible; display: none; background: #fff; border: 1px solid var(--line); padding: 4px 20px 20px; margin-bottom: 18px; }
  .filters.is-open { display: grid; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-nav { position: static; grid-auto-flow: column; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 4px; }
  .faq-nav a { white-space: nowrap; border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px; }
  .faq-nav a:hover, .faq-nav a.is-active { padding-left: 16px; background: var(--rose-deep); color: #fff; border-color: var(--rose-deep); }
  .occ-grid .occ, .occ-grid .occ:nth-child(n) { grid-column: span 6; min-height: 300px; }
  .col-card, .col-card.sm { grid-column: span 6; min-height: 320px; }
  .qv-grid { grid-template-columns: 1fr; }
  .qv-media img { aspect-ratio: 16 / 11; }
  .s-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- < 768: mobile ---- */
@media (max-width: 767.98px) {
  .occ-grid .occ, .occ-grid .occ:nth-child(n), .col-card, .col-card.sm { grid-column: span 12; min-height: 280px; }
  .cart-head { display: none; }
  .cart-row { grid-template-columns: 1fr auto; gap: 14px 16px; }
  .cart-row .cart-prod { grid-column: 1 / -1; grid-template-columns: 92px 1fr; }
  .cart-row .t-right { grid-column: 2; }
  .f-grid { grid-template-columns: 1fr; }
  .news-form { flex-direction: column; }
  .pack figure:nth-child(2) { margin-top: 18px; }
  .band figure:nth-child(2) { transform: none; }
  .mega-tiles, .mega-cols { grid-template-columns: 1fr; }
  .sign-pick { grid-template-columns: repeat(6, 1fr); }
  .ov-center { width: calc(100vw - 20px); }
  .lb-stage { padding: 0 8px; } .lb-arrow.l { left: 4px; } .lb-arrow.r { right: 4px; }
  .foot-base { flex-direction: column; }
}

/* ---- < 576: small & standard mobile ---- */
@media (max-width: 575.98px) {
  :root { --pad: 18px; }
  .hide-sm { display: none !important; }
  .ov-right { width: min(460px, 94vw); }
  .hero-card { grid-template-columns: 56px 1fr; width: 62%; padding: 8px; gap: 10px; }
  .hero-card img { width: 56px; height: 70px; }
  .hero-card b { font-size: 1rem; }
  .hero-frame--main { width: 70%; right: 0; }
  .hero-frame--tag { left: 4%; top: 10%; width: 28%; }
  .hero-frame--circle { width: 40%; left: -2%; border-width: 5px; }
  .hero-key { left: -10%; }
  .hero-cta .btn { flex: 1 1 100%; }
  .finder-opts { grid-template-columns: 1fr 1fr; }
  .opt-btn { min-height: 56px; padding: 10px 14px; font-size: .9rem; }
  .qv-actions .btn { flex: 1 1 100%; }
  .cat { width: 148px; }
  .cat-name { font-size: 1.2rem; }
  .pcard-title { font-size: 1.1rem; }
  .pcard-body { padding-top: 12px; }
  .btn-add { font-size: .74rem; padding: 0 6px; letter-spacing: .03em; }
  .btn { padding: 0 22px; }
  .page-head h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .cat-tools { width: 100%; } .cat-tools .select-wrap { flex: 1; min-width: 0; }
  .search-form .btn { display: none; }
  .code-row { flex-wrap: wrap; } .code-row .btn { flex: 1; }
  .radio-card { padding: 14px; gap: 10px; }
}

/* ---- < 375: smallest phones (320–374) ---- */
@media (max-width: 374.98px) {
  :root { --pad: 14px; }
  .logo-name { font-size: 1.3rem; }
  .key-mark { width: 18px; height: 30px; }
  .pgrid { gap: 24px 10px; }
  .pcard-title { font-size: 1rem; }
  .pcard-price { font-size: .86rem; gap: 6px; flex-wrap: wrap; }
  .badge { font-size: .62rem; padding: 3px 8px; }
  .wish-btn { width: 38px; height: 38px; }
  .icon-btn { width: 40px; height: 40px; }
  .header-tools { gap: 0; }
  .zgrid { gap: 8px; } .ztile b { font-size: 1.2rem; }
  .line { grid-template-columns: 70px 1fr; gap: 12px; }
  .finder-opts { grid-template-columns: 1fr; }
}

/* ---- ≥ 1440: large desktop ---- */
@media (min-width: 1440px) {
  .hero-title { font-size: 5.4rem; }
}

/* keep decorative overlaps inside the viewport on phones */
@media (max-width: 767.98px) {
  .story-badge { right: 2%; width: 34%; }
}