/*
================================================================================
DA GOODIES v6.2 — RESPONSIVE RULES
================================================================================
Tablet/phone rules. Main desktop controls are in css/controls.css.
================================================================================
*/

@media (max-width: 1100px) {
  body {
    background-image: url('../assets/bg-tablet.png');
    background-size: cover;
    background-attachment: fixed;
  }

  .dg-hero {
    min-height: clamp(290px, 41vw, 420px);
    padding-inline: 20px;
  }

  .asset-delivery-panel,
  .dg-delivery-panel {
    width: min(620px, 78vw);
  }

  .asset-packs-section,
  .dg-packs-section {
    width: min(930px, calc(100% - 34px));
    gap: clamp(24px, 3.5vw, 48px) clamp(42px, 7vw, 100px);
  }

  .asset-checkout-panel,
  .dg-checkout-panel {
    width: min(880px, calc(100% - 34px));
  }

  .asset-suggest-panel,
  .dg-suggest-panel {
    width: min(620px, calc(100% - 34px));
  }
}

@media (max-width: 760px) {
  body {
    background-image: url('../assets/bg-phone.png');
    background-size: cover;
    background-attachment: fixed;
  }

  .dg-topbar-inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
  }

  .dg-logo img { width: 74px; }
  .dg-mobile-menu-btn { display: inline-flex; }

  .dg-nav {
    order: 3;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 8px;
  }

  .dg-topbar.is-open .dg-nav { display: flex; }

  .dg-nav a,
  .dg-nav button {
    padding: 14px 6px;
    text-align: left;
  }

  .dg-cart-pill {
    margin-left: auto;
    padding: 9px 12px;
    font-size: 14px;
  }

  .asset-snack-strip img,
  .dg-snack-strip img {
    width: 1300px;
    max-width: none;
  }

  .dg-hero {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
    min-height: auto;
    padding: 18px 12px 0;
  }

  .asset-hero-text,
  .dg-hero-text {
    width: min(100%, 660px);
    justify-self: center;
  }

  .asset-hero-snacks,
  .dg-hero-snacks {
    justify-self: center;
    width: min(100%, 640px);
    margin-left: 0;
    margin-top: -18px;
  }

  .dg-hero-sparkle { font-size: 24px; }

  .asset-delivery-panel,
  .dg-delivery-panel {
    width: min(92vw, 560px);
    margin-top: 8px;
  }

  .asset-packs-section,
  .dg-packs-section {
    width: min(94vw, 560px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "quick"
      "work"
      "movie"
      "crew"
      "shop";
    gap: 18px;
    margin-bottom: 38px;
  }

  .asset-pack-movie,
  .pack-movie {
    width: 100%;
  }

  .asset-checkout-panel,
  .dg-checkout-panel {
    width: min(94vw, 560px);
    margin-bottom: 42px;
  }

  .asset-suggest-panel,
  .dg-suggest-panel {
    width: min(94vw, 560px);
    margin-bottom: 50px;
  }

  .dg-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .asset-snack-strip img,
  .dg-snack-strip img {
    width: 1100px;
  }

  .dg-choice-grid { grid-template-columns: 1fr; }

  .dg-modal { padding: 12px; }

  .dg-modal-card { padding: 22px 18px; }
}