/* Shared phone layout. CSS viewport widths, independent of device resolution. */
@media (max-width: 850px) {
  :is(.form-row,.supplier-fields,.catalog-offer,.dialog-head,.seo-hero)>* { min-width: 0; }
  input:not([type=checkbox]),select,textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  .close { width: 44px; height: 44px; }
}

@media (max-width: 620px) {
  html { scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  body:has(dialog[open]) { overflow: hidden; }
  .wrap,.service-page .wrap { width: calc(100% - 32px); }
  :is(h1,h2,h3,h4,.catalog-selected,.identity-note,.request-card,.car-card,.legal) { overflow-wrap: anywhere; }
  :is(.button,.text-button,.tab,.bulk-filter,.category-grid button) { min-height: 48px; font-size: 14px; }
  .button { padding: 12px 16px; line-height: 1.4; white-space: normal; }
  .text-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; }
  label { font-size: 14px; line-height: 1.5; }
  input:not([type=checkbox]),select,textarea { min-height: 48px; padding: 12px; }
  input::placeholder,textarea::placeholder { font-size: 14px; }
  .optional { font-size: 12px; }
  .form-row,.parts-form .form-row,.quick-order-dialog .form-row { grid-template-columns: minmax(0,1fr); gap: 0; }
  .part-description { grid-template-columns: minmax(0,1fr); }
  .part-description .quantity { max-width: 140px; }
  textarea { min-height: 110px; }
  fieldset { min-width: 0; }
  .consent { font-size: 13px; line-height: 1.6; gap: 12px; align-items: flex-start; }
  .consent input { flex: none; width: 22px; height: 22px; margin-top: 2px; }
  .form-note,.form-message,.identity-note { font-size: 13px; line-height: 1.6; }

  .header { flex-wrap: wrap; row-gap: 12px; }
  .header .brand { flex-shrink: 0; }
  .header .phone { font-size: 13px; }
  .phone small { font-size: 10px; }
  .topline .wrap { gap: 12px; flex-wrap: wrap; font-size: 10px; }
  .seasonal-hero { padding: 18px; }
  .seasonal-hero .hero-content>.eyebrow { font-size: 10px; letter-spacing: .02em; }
  .seasonal-hero .hero-text { font-size: 15px; line-height: 1.65; }
  .free-condition { font-size: 13px; line-height: 1.6; }
  .seasonal-hero .hero-actions .button { font-size: 14px; min-height: 54px; }
  .seasonal-hero .quick-order { padding: 14px 12px; gap: 12px; }
  .seasonal-hero .quick-order b { font-size: 16px; }
  .seasonal-hero .quick-order small { font-size: 13px; }
  .seasonal-hero .hero-proof { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  .seasonal-hero .hero-proof b { font-size: 15px; }
  .seasonal-hero .hero-proof span { font-size: 12px; }
  .seasonal-hero .visual-note b { font-size: 15px; }
  .seasonal-hero .visual-note span:not(.note-icon) { font-size: 12px; }
  .promo .eyebrow { font-size: 10px; }
  .promo p,.section-head>p,.parts-intro>p,.service-card p { font-size: 15px; }
  .service-bottom b { font-size: 14px; }
  .service-bottom { gap: 12px; }
  .service-bottom .icon { flex: none; }
  .combo-strip { font-size: 14px; }
  .combo-strip .text-button { margin-left: 0; width: 100%; font-size: 14px; }
  .category-grid { grid-template-columns: 1fr; }
  .category-grid button { font-size: 14px; padding: 12px; gap: 12px; }
  .parts-footnote,.bulk-footnote { font-size: 13px; }
  .bulk-filter { font-size: 13px; padding: 10px 12px; }
  .bulk-promo { flex-wrap: wrap; font-size: 13px; gap: 10px; }
  .bulk-promo small { font-size: 12px; }
  .price-panel dl div { gap: 16px; font-size: 14px; }
  .price-panel dd { white-space: nowrap; flex-shrink: 0; }
  .tire-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .tire-table { font-size: 14px; }
  .tire-table th { font-size: 13px; }
  .tire-price-note,.tire-swipe-note { font-size: 13px; }
  .contacts-panel { padding: 24px 18px; }
  .contact-phone { font-size: clamp(23px,6.8vw,29px); }
  .footer { padding: 24px 18px; margin-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .mobile-nav { padding-inline: 4px; }
  .mobile-nav a,.mobile-nav button { font-size: 11px; min-width: 0; flex: 1; min-height: 48px; }
  .toast { left: 16px; right: 16px; max-width: calc(100% - 32px); bottom: calc(90px + env(safe-area-inset-bottom)); overflow-wrap: anywhere; }

  .dialog { width: calc(100% - 24px); max-width: 560px; max-height: calc(100dvh - 24px); padding: 20px 16px; overflow: auto; overscroll-behavior: contain; scroll-padding-block: 110px 20px; }
  .dialog-head { position: sticky; top: -20px; z-index: 2; background: #f6f8fc; margin: -20px -16px 20px; padding: 16px; border-bottom: 2px solid #dbe4ef; align-items: flex-start; gap: 10px; }
  .dialog-head h2 { font-size: 25px; line-height: 1.2; }
  .dialog-head .eyebrow { font-size: 10px; letter-spacing: .04em; }
  .dialog legend { font-size: 15px; }
  .service-select { grid-template-columns: minmax(0,1fr); }
  .service-select label { margin-bottom: 0; }
  .service-select label>span { min-height: 48px; font-size: 14px; }
  .time-slots { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .time-slots button { min-height: 48px; font-size: 14px; }
  .account-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-tabs .tab { padding: 10px 6px; font-size: 13px; }
  .account-tabs .text-button { grid-column: 1/-1; margin-left: 0; font-size: 14px; }
  .identity-actions .button { width: 100%; }
  .request-top,.car-card { flex-wrap: wrap; }
  .request-card p,.car-card p { font-size: 14px; }
  .badge { white-space: normal; }
  .catalog-panel { padding: 20px 16px; }
  .catalog-offer,.catalog-offer>div { min-width: 0; overflow-wrap: anywhere; }
  .catalog-price { grid-template-columns: minmax(0,1fr); min-width: 0; }
  .catalog-price button { grid-column: 1; grid-row: auto; margin-top: 8px; }

  .seo-hero h1 { font-size: clamp(30px,8.8vw,40px); }
  .seo-hero .hero-actions,.seo-contact .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .seo-nav a,.seo-home-links nav a { min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 14px; padding: 10px 12px; }
  .seo-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .seo-nav a:last-child { grid-column: 1/-1; }
  .seo-breadcrumb { flex-wrap: wrap; }
  .seo-visual { padding: 18px; }
  .seo-highlight { padding: 22px 18px; }
  .seo-highlight .button,.seo-highlight .text-button { width: 100%; }
  .seo-contact p { font-size: 15px; }
  .seo-products h3 { font-size: 20px; }
  .seo-products .bulk-card p { font-size: 14px; }

  .admin-wrap { padding: 0 16px; margin-top: 16px; }
  .admin-header h1 { font-size: 27px; width: 100%; order: 3; }
  .admin-login { padding: 24px 18px; margin: 32px auto; }
  .admin-tools,.closure-controls { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  .admin-tools label,.closure-controls label { min-width: 0; }
  .admin-tools .button { width: 100%; }
  .admin-stats { grid-template-columns: minmax(0,1fr); }
  .admin-stats>div { display: flex; gap: 16px; align-items: center; padding: 14px 16px; }
  .admin-stats span { font-size: 14px; }
  .schedule-panel summary { font-size: 16px; padding: 16px; }
  .schedule-content { padding: 5px 16px 16px; }
  .schedule-rule,.supplier-fields { grid-template-columns: minmax(0,1fr); }
  .schedule-rule b { font-size: 15px; }
  .supplier-card { padding: 18px 14px; }
  .supplier-toggle { min-height: 44px; }
  .supplier-toggle input { width: 22px; height: 22px; }
  .closure-row { flex-wrap: wrap; font-size: 14px; }
  .admin-meta { font-size: 12px; }
  .legal { padding-top: 30px; }
  .legal p { font-size: 16px; }
}

@media (max-width: 430px) {
  .bulk-grid { grid-template-columns: minmax(0,1fr); }
  .bulk-image { height: 200px; }
  .bulk-card-body { padding: 18px; }
  .bulk-card h3 { font-size: 20px; }
  .bulk-card p { font-size: 14px; line-height: 1.65; }
  .bulk-category { font-size: 11px; }
  .bulk-card-bottom { flex-wrap: wrap; }
  .bulk-order { min-height: 48px; padding: 10px 14px; font-size: 14px; }
}

@media (max-width: 850px) and (max-height: 500px) {
  .dialog { max-height: calc(100dvh - 16px); }
  .dialog-head { position: sticky; top: -28px; z-index: 2; background: #f6f8fc; }
}