/* The supplied PDF remains the desktop authority. This layer adapts its
   artwork, palette and typography for phones, landscape and small tablets. */
@media (max-width: 1023px) {
  html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  html:has(dialog[open]) { overflow: hidden; overscroll-behavior: none; }
  button, a, [role="button"] { touch-action: manipulation; }
  button, [role="button"] { user-select: none; -webkit-user-select: none; }
  button:not(:disabled):active { filter: brightness(.9); }
  input, select, textarea { font-size: 16px; }

  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }
  .header-inner { width: calc(100% - 32px); height: 88px; gap: 12px; }
  .header-logo { width: 56px; height: 56px; }
  .header-search { gap: 8px; }
  .header-search input { height: 48px; padding-inline: 12px; }
  .header-search input::placeholder { color: #626d73; }
  .header-search button { height: 48px; min-width: 68px; font-size: 16px; }
  .header-cart { width: 48px; height: 48px; }
  .cart-count { top: -2px; right: -2px; }
  .white-divider { height: 12px; }

  .hero { height: auto; }
  .hero-inner {
    height: auto; max-width: 680px; display: flex; flex-direction: column; gap: 24px;
    padding: 24px 16px 28px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .hero-copy { position: relative; inset: auto; width: 100%; }
  .hero-eyebrow { font-size: 16px; line-height: 1.4; margin: 0 0 12px; }
  .hero-heading { min-height: 0; font-size: clamp(70px, 20vw, 132px); }
  .hero-heading h1 { font-size: inherit; line-height: 1; }
  .hero-dog { width: auto; height: 1.15em; max-width: 45%; left: 0; top: -.05em; object-fit: contain; }
  .hero-subtitle { font-size: clamp(20px, 3.8vw, 26px); line-height: 1.3; margin: 16px 0 0; }
  .shopping-banner { width: 220px; max-width: 70%; margin: 12px 0 0 auto; }
  .shopping-banner-live { width: 220px; max-width: 100%; min-height: 52px; margin: 12px 0 0 auto; font-size: 14px; }
  .shopping-banner-live img { max-height: 40px; }
  .hero-date {
    width: 100%; max-width: 100%; min-height: 48px; height: auto;
    flex-wrap: wrap; white-space: normal; gap: 2px 8px; margin-top: 12px;
    padding: 10px 12px; font-size: 16px; line-height: 1.4; color: #123744;
  }
  .hero-products { position: static; width: 100%; gap: 6px; }
  .hero-tile { height: clamp(112px, 32vw, 180px); border-radius: 8px; padding: 4px; }
  .hero-tile b {
    top: 6px; left: 4px; right: 4px; padding: 4px 2px; font-size: clamp(12px, 2.8vw, 16px);
    line-height: 1.2; text-align: center; font-family: PDFControl, PDFStrong, NextExitFallback, sans-serif; font-weight: 400;
  }
  .hero-tile img, .hero-tile:nth-child(3) img { width: 100%; max-width: 100%; height: 77%; transform: translateY(12%); }
  .category-ribbon { height: 38px; }

  .filter-nav { display: block; height: auto; padding: 16px 16px 24px; }
  .category-nav {
    display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 0 10px;
    overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--pink) transparent;
  }
  .category-pill { flex: none; height: 44px; min-width: 64px; padding: 0 16px; font-size: 0; }
  .category-pill::after { content: attr(aria-label); font-size: 16px; }
  .campaign-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .campaign-tab { width: 100%; min-width: 0; height: 44px; font-size: 16px; }
  .catalog-message { padding-inline: 16px; font-size: 16px; line-height: 1.5; }
  .empty-state button { min-height: 44px; font-size: 16px; }

  .deal-section, .deal-section:last-child { padding-inline: 16px; margin-bottom: 44px; }
  .deal-heading { height: auto; min-height: 150px; padding: 18px 16px 70px; margin-bottom: 12px; }
  .deal-heading h2 { font-size: clamp(34px, 6.4vw, 52px); line-height: 1.1; margin: 0; }
  .deal-heading p { font-size: 16px; line-height: 1.4; margin: 8px 0 0; }
  .deal-species { left: 12px; bottom: 12px; padding: 2px; gap: 2px; }
  .deal-species button { min-width: 88px; min-height: 44px; padding: 6px 10px; font-size: 16px; line-height: 1.2; justify-content: center; }
  .deal-species button img { width: 22px; height: 22px; }
  .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .deal-item { display: flex; flex-direction: column; }
  .deal-media { height: clamp(205px, 52vw, 260px); flex: none; }
  .deal-media > img { max-width: 82%; max-height: calc(100% - 80px); margin-bottom: 40px; mix-blend-mode: normal; }
  .design-sample[data-product-id^="design-nexgard"] .deal-media > img { transform: rotate(19.52deg); }
  .design-sample[data-product-id="design-bravecto"] .deal-media > img { transform: rotate(-9.89deg); }
  .deal-action { min-height: 44px; height: 44px; bottom: 12px; left: 8%; width: 84%; font-size: 20px; line-height: 1.15; padding: 6px 8px; }
  .deal-badges { left: 10px; right: auto; top: 10px; }
  .deal-badge { font-size: 14px; line-height: 1.2; padding: 3px 8px; }
  .deal-info { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 0 0; }
  .deal-category { font-size: 16px; line-height: 1.3; }
  .deal-info h3 { max-width: 100%; margin: 0; min-height: 2.7em; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
  .deal-price { font-size: 20px; line-height: 1.3; margin-top: auto; padding-top: 4px; }
  .deal-price small { font-size: 15px; line-height: 1.4; }
  .deal-carousel { height: 56px; margin-top: 12px; }
  .carousel-arrows { gap: 10px; }
  .carousel-arrows button { width: 44px; height: 44px; font-size: 26px; }
  .carousel-progress { width: 28%; height: 2px; }
  .carousel-progress::before { height: 2px; }

  .about-section, .about-content { min-height: 0; }
  .about-copy { width: 100%; margin: 0; padding: 24px 16px 252px; }
  .about-copy h2 { font-size: clamp(28px, 5vw, 36px); line-height: 1.2; margin: 0 -16px 20px 0; padding: 16px 20px 16px 16px; letter-spacing: 0; }
  .about-copy p { font-size: 18px; line-height: 1.6; }
  .about-vet { width: 230px; height: auto; max-height: 245px; }

  .cart-dialog { width: min(100%, 480px); height: 100dvh; max-height: 100dvh; }
  .cart-panel { min-height: 0; padding-top: env(safe-area-inset-top, 0px); }
  .cart-head { flex: none; padding: 12px 16px; gap: 12px; }
  .cart-head h2 { font-size: 28px; }
  .icon-button { width: 44px; height: 44px; flex: none; }
  .cart-body { min-height: 0; padding: 12px 16px; overscroll-behavior: contain; }
  .cart-empty { padding: 28px 12px; }
  .cart-line { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .cart-line > div { min-width: 0; }
  .cart-line img { width: 64px; height: 64px; }
  .cart-line h3 { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
  .cart-line p { font-size: 14px; line-height: 1.4; }
  .cart-line-bottom { flex-wrap: wrap; gap: 8px; }
  .qty-control button { width: 44px; height: 44px; }
  .qty-control span { min-width: 28px; font-size: 16px; font-variant-numeric: tabular-nums; }
  .remove-line { min-width: 44px; min-height: 44px; font-size: 14px; }
  .cart-footer { flex: none; padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px)); }
  .cart-notice { font-size: 14px; line-height: 1.4; color: #a12f2a; margin: 0 0 12px; }
  .cart-footer > button { font-size: 18px; min-height: 50px; }
  .cart-footer small { font-size: 13px; line-height: 1.4; margin-top: 8px; }
  #clear-cart { width: auto; min-height: 44px; padding: 6px 0; background: transparent; border-radius: 4px; font-size: 14px; }
  .options-dialog { width: min(calc(100% - 24px), 480px); max-height: calc(100dvh - 24px); }
  .options-panel { padding: 16px; max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
  .options-panel h2 { font-size: 24px; line-height: 1.35; }
  .option-group select { height: 48px; font-size: 16px; }
  .options-panel .deal-action { width: 100%; }
  .dialog-feedback { margin: 0; padding: 12px 16px; background: #e8f4f6; color: #123744; font-size: 16px; line-height: 1.4; }
  .toast { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: 480px; margin-inline: auto; font-size: 16px; line-height: 1.4; }
}

@media (max-width: 600px) {
  .header-inner { height: auto; padding-block: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
  .header-logo { width: 48px; height: 48px; justify-self: start; }
  .header-cart { grid-column: 2; grid-row: 1; }
  .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .deal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deal-media { height: 230px; }
  .deal-info h3 { font-size: 17px; }
  .about-copy { max-width: 680px; margin-inline: auto; }
  .about-vet { left: max(16px, calc((100% - 680px) / 2)); }
}

/* With a short landscape viewport or an open keyboard, scroll the whole
   drawer rather than letting a fixed footer squeeze its contents to zero. */
@media (max-width: 1023px) and (max-height: 500px) {
  .cart-panel { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .cart-head { position: sticky; top: 0; z-index: 1; background: #fff; }
  .cart-body { overflow: visible; }
}

@media (min-width: 500px) and (max-width: 600px) and (max-height: 500px) {
  .header-inner { display: flex; height: 80px; padding-block: 0; }
  .header-search { width: auto; }
}