/* Navigation remains available when phones rotate and on smaller tablets. */
@media (max-width: 1080px) {
  :root { --phone-nav-height: 66px; --phone-bottom-inset: env(safe-area-inset-bottom, 0px); }
  body:not(.admin-page) { padding-bottom: calc(var(--phone-nav-height) + var(--phone-bottom-inset)); }
  .mobile-nav { position: fixed; display: grid; z-index: 200; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); }
  /* Five destinations stay above the home indicator. */
  .mobile-nav { height: calc(var(--phone-nav-height) + var(--phone-bottom-inset)); padding-bottom: var(--phone-bottom-inset); grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mobile-nav a,
  .mobile-nav button { position: relative; min-width: 0; min-height: 44px; padding: .45rem .1rem; gap: .3rem; font-size: 12px; line-height: 1.2; font-weight: 600; }
  .mobile-nav svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav a span,
  .mobile-nav button span { font-size: inherit; }
  .mobile-nav b { top: .2rem; left: calc(50% + 7px); margin: 0; min-width: 17px; height: 17px; padding-inline: 3px; font-size: 10px; }
  .mobile-nav [aria-current="page"],
  .mobile-nav [aria-current="location"] { color: var(--teal); }

  .toast-region { bottom: calc(var(--phone-nav-height) + var(--phone-bottom-inset) + .75rem); }
  .stack-form input:not([type="checkbox"]):not([type="radio"]), .stack-form select, .stack-form textarea { font-size: 16px; }
}

/* Phone layouts and controls. Loaded after the shared brand and theme styles. */
@media (max-width: 600px) {
  :root {
    --phone-nav-height: 66px;
    --phone-bottom-inset: env(safe-area-inset-bottom, 0px);
    --shell: calc(100% - 32px);
  }

  html { scroll-padding-top: 80px; }
  body:not(.admin-page) { padding-bottom: calc(var(--phone-nav-height) + var(--phone-bottom-inset)); }
  .header-inner { min-height: 64px; }
  .brand-logo { width: 218px; max-width: 100%; }
  .announcement { font-size: 11px; letter-spacing: 0; padding: .5rem 1rem; }
  .announcement a { min-height: 24px; display: inline-flex; align-items: center; }

  /* Keep the vial and purchase options together in the opening screen. */
  .feature-grid { column-gap: .75rem; padding-block: 1.1rem 1.25rem; }
  .reta-feature .eyebrow { font-size: 11px; letter-spacing: .025em; }
  .reta-feature h1 { font-size: clamp(1.6rem, 7.6vw, 2.65rem); }
  .feature-intro { font-size: 14px; line-height: 1.4; }
  .feature-variants { gap: .6rem; }
  .feature-variant { min-height: 64px; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; padding: .6rem .85rem; }
  .feature-variant strong { font-size: 16px; }
  .feature-variant span { font-size: 14px; }
  .feature-price-row { gap: .35rem .75rem; }
  .feature-price strong { font-size: 2rem; }
  .feature-price > span,
  .feature-stock,
  .feature-presentation,
  .feature-delivery { font-size: 14px; line-height: 1.45; }
  .feature-actions { gap: .75rem; }
  .feature-actions > .button { min-height: 48px; padding-inline: .75rem; font-size: 16px; }
  .feature-details { min-height: 44px; padding-inline: .25rem; font-size: 14px; }
  .feature-note { font-size: 12px; line-height: 1.5; }
  .feature-browse { min-height: 44px; margin-top: .15rem; font-size: 14px; }

  /* A short service strip leaves room for browsing. */
  .delivery-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: .8rem; }
  .delivery-benefit:nth-child(2),
  .delivery-benefit p { display: none; }
  .delivery-benefit,
  .delivery-benefit:first-child,
  .delivery-benefit:last-child { gap: .5rem; padding: .25rem .65rem; }
  .delivery-benefit:first-child { padding-left: 0; }
  .delivery-benefit:last-child { padding-right: 0; border-top: 0; border-left: 1px solid var(--line); }
  .delivery-benefit .benefit-icon { flex-basis: 28px; width: 28px; height: 28px; border: 0; }
  .delivery-benefit strong { font-size: 13px; }

  .category-section,
  .catalogue-section,
  .reviews-section,
  .delivery-section,
  .reconstitute-section,
  .tracker-section { padding-block: 2.5rem; }
  .section-heading,
  .category-section .section-heading,
  .reviews-heading { margin-bottom: 1.3rem; }
  .section-heading h2,
  .reviews-heading h2,
  .tracker-intro h2 { font-size: 1.9rem; }
  .split-heading { gap: .75rem; }
  .split-heading > p { font-size: 14px; line-height: 1.55; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .category-card { min-height: 104px; padding: .8rem; }
  .category-card:last-child { min-height: 76px; padding-left: 66px; }
  .category-orb { width: 25px; height: 25px; top: 11px; left: 13px; }
  .category-card:last-child .category-orb { width: 30px; height: 30px; top: calc(50% - 15px); left: 19px; }
  .category-card strong { font-size: 16px; line-height: 1.2; }
  .category-card > span:last-of-type { font-size: 12px; line-height: 1.4; }

  /* Cards read as a concise list instead of a full screen per product. */
  .catalogue-heading { gap: 1.25rem; }
  .catalogue-tools { gap: .65rem; }
  .search-field input { min-width: 0; }
  .filter-row { gap: .4rem; margin-bottom: 1rem; padding-block: .2rem .6rem; }
  .filter-chip { min-height: 44px; padding: .5rem .85rem; font-size: 14px; }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .product-card { display: grid; grid-template-columns: clamp(96px, 28vw, 112px) minmax(0, 1fr); border-radius: 14px; }
  .product-card:hover { transform: none; }
  .product-card .product-art { height: auto; min-height: 220px; align-self: stretch; }
  .product-card .product-photo { height: calc(100% - 56px); object-fit: contain; }
  .product-card .product-index { display: none; }
  .product-card .quick-add { top: auto; right: calc(50% - 22px); bottom: .55rem; width: 44px; height: 44px; font-size: 26px; }
  .product-card .quick-add:hover { transform: none; }
  .product-card .micro-vial { transform: scale(.8); margin-top: -35px; }
  .product-content { min-width: 0; padding: .9rem .8rem; }
  .product-tag { margin-bottom: .3rem; font-size: 11px; letter-spacing: .02em; }
  .product-content h3 { min-height: 0; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
  .product-presentation { margin: .4rem 0 .6rem; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
  .product-status { padding-block: .5rem; font-size: 13px; line-height: 1.4; }
  .product-status::before { flex: 0 0 6px; }
  .product-footer { flex-wrap: wrap; align-items: center; column-gap: .75rem; row-gap: .2rem; padding-top: .55rem; }
  .product-price { font-size: 11px; }
  .product-price strong { font-size: 20px; }
  .view-product { min-height: 44px; padding: .5rem 0; font-size: 13px; border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }
  .skeleton-card { height: 240px; }

  /* Clear, consistently sized controls; 16px fields avoid focus zoom on iOS. */
  .stack-form input:not([type="checkbox"]):not([type="radio"]),
  .stack-form select,
  .stack-form textarea,
  .review-form input[type="text"],
  .review-form textarea,
  .search-field input,
  .sort-field select,
  .starter-kit-selector { min-width: 0; min-height: 48px; font-size: 16px; }
  .stack-form label,
  .review-form > label,
  .starter-kit-selector-label { font-size: 14px; }
  .stack-form small,
  .review-form > label small,
  .form-error,
  .checkout-account-note { font-size: 12px; line-height: 1.5; }
  .button,
  .small-button,
  .text-button,
  .tracker-tab { min-height: 44px; }
  .stack-form > .button,
  .review-form > .button { font-size: 16px; }
  .close-button { width: 44px; height: 44px; flex: 0 0 44px; }
  .stack-form .check-label { min-height: 44px; align-items: center; }
  .stack-form .check-label input { width: 20px; height: 20px; min-height: 20px; }
  .starter-kit-card { gap: 1rem; }
  .starter-kit-image-wrap,
  .starter-kit-image { height: 160px; }

  /* The basket footer stays visible while its product list scrolls. */
  .drawer-layer { height: 100vh; height: 100dvh; }
  .cart-drawer { width: 100%; height: 100%; max-height: 100%; padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, var(--phone-bottom-inset)); }
  .drawer-header,
  .cart-footer { flex: 0 0 auto; }
  .drawer-header { align-items: center; }
  .drawer-header h2 { font-size: 1.9rem; }
  .cart-items { min-height: 0; overscroll-behavior-y: contain; }
  .cart-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: .6rem; }
  .cart-item-art { width: 56px; height: 72px; }
  .cart-item-copy { min-width: 0; }
  .cart-item-copy strong { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
  .cart-item-copy > span { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  .quantity-control button { width: 44px; height: 44px; font-size: 20px; }
  .quantity-control span { min-width: 24px; font-size: 14px; }
  .cart-item-side { min-width: 0; font-size: 14px; }
  .remove-item { min-height: 44px; padding: .4rem .15rem; font-size: 12px; }
  .cart-footer { padding-top: .85rem; }
  .cart-footer p { font-size: 12px; line-height: 1.45; margin-block: .6rem; }
  .cart-footer .button { min-height: 48px; font-size: 16px; }
  .cart-delivery-row { margin-bottom: .5rem; padding-bottom: .5rem; }

  .modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, var(--phone-bottom-inset))); padding: 1rem; border-radius: 16px; overscroll-behavior-y: contain; scroll-padding-block: 60px 24px; }
  .modal-close { position: sticky; top: 0; right: auto; margin: 0 0 .5rem auto; background: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
  .modal-brand { margin-top: -44px; padding-right: 52px; min-height: 44px; display: flex; align-items: center; }
  .modal-brand .brand-logo { width: min(218px, 100%); }
  .modal-lede { font-size: 14px; line-height: 1.5; }
  .checkout-grid { gap: 1.25rem; }
  .checkout-grid > *,
  .field-row > *,
  .checkout-item > * { min-width: 0; }
  .checkout-summary { padding: 1rem; }
  .checkout-summary h3 { font-size: 18px; }
  .checkout-item,
  .summary-line { font-size: 14px; }
  .checkout-item > span { overflow-wrap: anywhere; }
  .product-detail-art { min-height: 180px; height: 180px; }
  .product-detail-copy { min-width: 0; }
  .detail-specs strong { overflow-wrap: anywhere; }
  .detail-price .button { min-height: 48px; font-size: 16px; }

  .toast-region { right: 1rem; bottom: calc(var(--phone-nav-height) + var(--phone-bottom-inset) + .75rem); pointer-events: none; }
  .toast { font-size: 14px; }
  body.drawer-open .toast-region { display: none; }
}

@media (max-width: 360px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr) 96px; }
  .feature-art { height: 125px; }
  .product-content { padding-inline: .65rem; }
  .cart-item { grid-template-columns: 44px minmax(0, 1fr) auto; gap: .5rem; }
  .cart-item-art { width: 44px; height: 64px; }
}