/* ══════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 1024px)
══════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Nav */
  .nav-container {
    padding: 14px 32px;
  }

  .nav-links {
    gap: 20px;
  }

  .nav-links a {
    font-size: 12px;
  }

  /* Mobile Dropdown Responsive Override */
  .nav-links .menu-item-has-children {
    width: 100% !important;
    position: relative !important;
    display: block !important;
  }
 .hero {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    min-height: auto;
  }
  .nav-links .menu-item-has-children > a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
.collab-form-panel {
    max-width: 100% !important;
}
.collab-form-panel .collab_container{
    padding: 30px 13px;
}
  .nav-links .sub-menu {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
    padding-left: 20px !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
  }

  .nav-links .sub-menu a {
    font-size: 14px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(200, 16, 46, 0.08) !important;
    font-weight: 500 !important;
    text-transform: none !important;
  }

  /* ── Tablet Heading Sizes ── */
  h1 { font-size: clamp(38px, 6vw, 56px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(30px, 5vw, 48px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(22px, 3.5vw, 32px) !important; line-height: 1.2 !important; }

  .hero h1             { font-size: clamp(42px, 6.5vw, 64px) !important; }
  .section-header h2   { font-size: clamp(34px, 5vw, 48px) !important; }
  .video-text h2       { font-size: clamp(32px, 4.5vw, 48px) !important; }
  .vinyl-text h2       { font-size: clamp(38px, 5.5vw, 56px) !important; }
  .story-text h2       { font-size: clamp(34px, 5vw, 48px) !important; }
  .sub-text h2         { font-size: clamp(36px, 5.5vw, 52px) !important; }
  .rnr-title           { font-size: clamp(48px, 8vw, 90px) !important; }

 

  .hero-content {
    padding: 50px 40px 80px 48px;
  }

  .hero-media-panel {
    border-radius: 20px 0 0 20px;
    margin: 16px 0 16px;
  }

  /* Video section */
  .video-section {
    padding: 80px 48px;
    gap: 48px;
  }

  .video-mock {
    flex: 0 0 400px;
  }

  /* Collections */
  .collections-section {
    padding: 80px 48px;
  }

  .collections-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  /* Vinyl */
  .vinyl-section {
    padding: 80px 48px;
    gap: 48px;
    margin: 0px !important;
    overflow: hidden !important;
  }

  .vinyl-visual {
    flex: 0 0 340px;
  }

  .vinyl-record {
    width: 280px;
    height: 280px;
  }

  /* Bundles */
  .bundles-section {
    padding: 80px 48px;
  }

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

  /* Events Listing CPT */
  .events-section {
    padding: 80px 48px;
  }

  .events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Story */
  .story-section {
    padding: 80px 48px;
    gap: 60px;
  }

  .story-visual {
    flex: 0 0 300px;
  }

  /* Reviews */
  .reviews-section {
    padding: 80px 48px;
  }

  .review-card {
    min-width: calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

  /* Sub */
  .sub-section {
    padding: 80px 48px;
    gap: 48px;
  }

  .sub-card {
    flex: 0 0 300px;
    padding: 36px 28px;
  }

  /* Email / cred / footer */
  .email-section {
    padding: 64px 48px;
  }

  .cred-section {
    padding: 48px;
  }

  .cred-logos {
    gap: 32px;
  }

  footer {
    padding: 56px 48px 32px;
  }

  .footer-grid {
    gap: 40px;
  }

  /* RNR promo */
  .rnr-section {
    padding: 80px 48px;
  }

  .rnr-section .rnr-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }

  .rnr-section .rnr-left-col {
    width: 100%;
  }

  .rnr-section .rnr-right-col {
    width: 100%;
    max-width: 100%;
  }

  .rnr-section .rnr-left-col .btn-primary,
  .rnr-section .rnr-left-col .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* FAQ */
  .faq-section {
    padding: 80px 48px;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
══════════════════════════════════════ */
@media (max-width: 768px) {

  /* Announcement ticker: hide on mobile */
  .announcement-bar {
    display: none;
  }

  /* Nav Hamburger toggle style */
  .mobile-nav-toggle {
    display: block;
  }

  .nav-brand img,
  .nav-brand .custom-logo {
    width: 70px !important;
    height: auto !important;
  }
  /* ── Mobile Heading Sizes — section specific ── */

  /* Global fallbacks */
  h1 {
    font-size: clamp(30px, 9vw, 42px) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  h2 {
    font-size: clamp(24px, 7.5vw, 34px) !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: clamp(18px, 5.5vw, 24px) !important;
    line-height: 1.25 !important;
  }

  /* Page / entry titles */
  .site-main h1,
  .events-page-header h1,
  .collections-page-header h1,
  .entry-title {
    font-size: clamp(28px, 8.5vw, 38px) !important;
    line-height: 1.15 !important;
  }

  /* Hero – stack to single column on mobile */
  /* .hero {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    min-height: auto;
  } */

  .hero-content {
    padding: 80px 28px 40px;
    order: 1;
  }

  .hero-media-panel {
    order: 2;
    height: 55vw;
    min-height: 260px;
    border-radius: 20px 20px 0 0;
    margin: 0 16px 0;
  }
.hero-media-video, .hero-media-img {
    width: 100% !important;
}
  .hero h1 {
    font-size: clamp(32px, 9.5vw, 48px) !important;
    line-height: 1.05 !important;
  }

  /* Section headings */
  .section-header h2,
  .video-text h2,
  .vinyl-text h2,
  .story-text h2,
  .sub-text h2,
  .email-section h2 {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.15 !important;
  }

  /* Event & collection cards */
  .event-title    { font-size: clamp(18px, 5vw, 24px) !important; }
  .collection-name { font-size: clamp(14px, 4vw, 18px) !important; }
  .bundle-name    { font-size: clamp(22px, 6vw, 28px) !important; }

  /* Subscription card */
  .sub-price { font-size: clamp(48px, 14vw, 70px) !important; }
  .sub-name  { font-size: clamp(20px, 5.5vw, 26px) !important; }

  /* Rip N Reflect */
  .rnr-title { font-size: clamp(44px, 13vw, 72px) !important; }

  .nav-menu-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgb(253 249 244);
    border-bottom: 1px solid rgba(200, 16, 46, 0.3);
    padding: 24px;
    z-index: 99;
  }

  .nav-menu-wrapper.active {
    display: block;
  }

  .nav-links {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .nav-links a {
    font-size: 14px;
  }

  .nav-layout-logo_center .nav-actions {
    position: static;
    transform: none;
  }

  .nav-container {
    padding: 8px 20px;
  }

  .nav-cta {
    padding: 9px 18px;
    font-size: 12px;
  }

  .nav-logo {
    height: 36px;
  }

  /* Mobile menu active hamburger transformation */
  .mobile-nav-toggle[aria-expanded="true"] .hamburger-bars span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger-bars span:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-toggle[aria-expanded="true"] .hamburger-bars span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Hero */
  .hero {
    min-height: 100vh;
  }

  .hero-video-bg {
    width: 100%;
    opacity: 0.28;
  }

  .hero-video-overlay {
    background: linear-gradient(to bottom,
        rgba(26, 26, 26, 0.75) 0%,
        rgba(26, 26, 26, 0.45) 50%,
        rgba(26, 26, 26, 0.75) 100%);
  }

  .hero-content {
    padding: 120px 20px 80px;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(44px, 11vw, 72px);
  }

  .hero-sub {
    font-size: 16px;
    max-width: 100%;
  }

  .hero-pills {
    gap: 8px;
  }

  .pill {
    font-size: 11px;
    padding: 6px 12px;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 12px;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
  }

  .hero-scroll {
    left: 20px;
    bottom: 24px;
  }

  /* Video section */
  .video-section {
    flex-direction: column;
    padding: 60px 20px;
    gap: 36px;
  }

  .video-mock {
    flex: none;
    width: 100%;
    aspect-ratio: 16/9;
  }

  .video-text h2 {
    font-size: 38px;
  }

  .stat-row {
    gap: 24px;
    flex-direction: column;
  }

  .stat-num {
    font-size: 32px;
  }

  /* Collections */
  .collections-section {
    padding: 60px 20px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
  }

  .section-header h2 {
    font-size: 40px;
  }

  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .collection-name {
    font-size: 17px;
  }

  /* Featured products */
  .featured-products-section {
    padding: 60px 20px;
  }

  /* Vinyl */
  .vinyl-section {
    flex-direction: column-reverse;
    padding: 60px 20px;
    gap: 40px;
    margin: 10px 0px;
    overflow: hidden;
  }

  .vinyl-visual {
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .vinyl-record {
    width: 240px;
    height: 240px;
  }

  .vinyl-text h2 {
    font-size: 44px;
  }

  .btn-dark {
    width: 100%;
    justify-content: center;
  }

  /* Bundles */
  .bundles-section {
    padding: 60px 20px;
  }

  .bundles-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }

  .bundle-card {
    padding: 28px 24px;
  }

  .bundle-name {
    font-size: 28px;
  }

  /* Events */
  .events-section {
    padding: 60px 20px;
  }

  .events-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Instagram */
  .instagram-section {
    padding: 60px 20px;
  }

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

  /* Story */
  .story-section {
    flex-direction: column;
    padding: 60px 20px;
    gap: 40px;
  }

  .story-visual {
    flex: none;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }

  .story-initial {
    font-size: 80px;
  }

  .story-text h2 {
    font-size: 40px;
  }

  .story-body {
    font-size: 15px;
  }

  .story-signature {
    font-size: 20px;
  }

  .story-quote-mark {
    font-size: 120px;
    left: 20px;
  }

  /* Reviews */
  .reviews-section {
    padding: 60px 20px;
  }

  .review-card {
    min-width: 100%;
    max-width: 100%;
    padding: 24px 20px;
  }

  .review-text {
    font-size: 15px;
  }

  /* Sub */
  .sub-section {
    flex-direction: column;
    padding: 60px 20px;
    gap: 40px;
  }

  .sub-text h2 {
    font-size: 44px;
  }

  .sub-perks {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sub-card {
    flex: none;
    width: 100%;
    padding: 32px 24px;
  }

  .sub-price {
    font-size: 64px;
  }

  /* RNR card game */
  .rnr-section {
    padding: 60px 20px;
  }

  .rnr-section .rnr-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }

  .rnr-section .rnr-left-col {
    width: 100%;
  }

  .rnr-section .rnr-left-col h2 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  .rnr-section .rnr-right-col {
    width: 100%;
    max-width: 100%;
  }

  .rnr-section .rnr-left-col .btn-primary,
  .rnr-section .rnr-left-col .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .rnr-title {
    font-size: clamp(52px, 16vw, 90px);
  }

  .rnr-subtitle {
    font-size: 15px;
  }

  .rnr-mode-btn {
    padding: 9px 18px;
    font-size: 13px;
  }

  .rnr-game-area {
    max-width: 100%;
  }

  .rnr-main-card {
    height: 260px;
  }

  .rnr-question-text {
    font-size: 19px;
  }

  .rnr-draw-area {
    flex-direction: column;
    gap: 12px;
  }

  .rnr-draw-btn {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
  }

  .rnr-or {
    display: none;
  }

  .rnr-btn-icon {
    font-size: 22px;
  }

  .rnr-gate-card {
    padding: 32px 20px;
  }

  .rnr-email-gate {
    flex-direction: column;
  }

  .rnr-email-input {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .rnr-email-submit {
    border-radius: 8px;
    padding: 14px;
  }

  /* Email */
  .email-section {
    padding: 56px 20px;
  }

  .email-section h2 {
    font-size: 40px;
  }

  .email-form {
    flex-direction: column;
    max-width: 100%;
    gap: 10px;
  }

  .email-input {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }

  .email-btn {
    border-radius: 2px;
    padding: 8px;
  }

  /* Credibility */
  .cred-section {
    padding: 40px 20px;
  }

  .cred-logos {
    gap: 20px;
  }

  .cred-logo {
    font-size: 14px;
  }

  /* Footer */
  footer {
    padding: 48px 20px 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-socials {
    justify-content: center;
  }

  .footer-col h4 {
    margin-top: 8px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }

  /* Floating action bar */
  .float-bar {
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    transform: none;
    border-radius: 12px;
    padding: 7px 13px;
    gap: 12px;
  }

  .float-text {
    font-size: 12px;
  }

  .float-btn {
    font-size: 11px;
    padding: 8px 14px;
    white-space: nowrap;
  }

  /* FAQ */
  .faq-section {
    padding: 60px 20px;
  }

  .faq-question {
    padding: 20px;
    font-size: 16px;
  }

  .faq-item.active .faq-answer {
    padding: 0 20px 20px 20px;
  }

  /* About Stats Container Responsiveness */
  .about-stats-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px !important;
  }

  .about-stats-container .stat-card {
    border-right: none !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 20px 0 0 0 !important;
  }

  .about-stats-container .stat-card:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — SMALL PHONES  (≤ 400px)
══════════════════════════════════════ */
@media (max-width: 400px) {
  .hero h1 {
    font-size: 42px;
  }

  .hero-eyebrow {
    font-size: 10px;
  }

  .collections-grid {
    grid-template-columns: 1fr;
  }

  .collection-card {
    aspect-ratio: 4/3;
  }

  .instagram-placeholder-grid {
    grid-template-columns: 1fr;
  }

  .rnr-title {
    font-size: 44px;
  }

  .section-header h2 {
    font-size: 34px;
  }

  .bundle-name {
    font-size: 24px;
  }

  .float-text strong+span {
    display: none;
  }
}