/*
  Miller Gadgets v1.218 — site-wide auto-layout refinement.
  Layout only: light and dark mode continue to use their existing palettes.
*/

:root {
  --mg218-control-height: 44px;
  --mg218-control-gap: 8px;
  --mg218-card-min: 220px;
}

html[data-theme] body :where(
  main,
  main > *,
  section,
  article,
  aside,
  form,
  fieldset,
  .container,
  .page-shell,
  .page-title,
  .section-heading,
  .form-page,
  .form-card,
  .product-grid,
  .card-grid,
  .service-grid,
  .support-grid,
  .repair-grid,
  .contact-grid,
  .faq-grid,
  .seo-answer-grid,
  .product-card,
  .product-card-body,
  .product-image-link
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-theme] body :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-theme] body :where(
  .primary-btn,
  button.primary-btn,
  a.primary-btn,
  .secondary-btn,
  button.secondary-btn,
  a.secondary-btn,
  .btn,
  .cta-button,
  .price-cta,
  .product-photo-request-btn,
  .repair-submit-btn,
  .mg-page-btn,
  .mg-filter-sort-open,
  .mg-filter-sort-apply,
  .mg-filter-sort-close,
  .mg-control-pill,
  .mg-help-choose-pill,
  button[type="submit"]
) {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: var(--mg218-control-height);
  block-size: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg218-control-gap);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  text-wrap: balance;
  touch-action: manipulation;
}

html[data-theme] body :where(
  .primary-btn,
  .secondary-btn,
  .btn,
  .cta-button,
  .price-cta,
  .product-photo-request-btn,
  .repair-submit-btn,
  .mg-page-btn,
  .mg-filter-sort-open,
  .mg-filter-sort-apply,
  .mg-filter-sort-close,
  .mg-control-pill,
  .mg-help-choose-pill,
  button[type="submit"]
) > :where(span, strong) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

html[data-theme] body :where(
  .primary-btn,
  .secondary-btn,
  .btn,
  .cta-button,
  .price-cta,
  .product-photo-request-btn,
  .repair-submit-btn,
  .mg-page-btn,
  .mg-filter-sort-open,
  .mg-filter-sort-apply,
  .mg-filter-sort-close,
  .mg-control-pill,
  .mg-help-choose-pill,
  button[type="submit"]
) > :where(svg, img) {
  flex: 0 0 auto;
  max-inline-size: 1.35em;
  max-block-size: 1.35em;
}

html[data-theme] body :where(
  .actions,
  .form-actions,
  .hero-actions,
  .page-actions,
  .cta-row,
  .button-row,
  .support-policy-actions,
  .mg-filter-sort-actions,
  .sell-device-actions
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(8px, 1.4vw, 12px);
}

html[data-theme] body :where(
  .actions,
  .form-actions,
  .hero-actions,
  .page-actions,
  .cta-row,
  .button-row,
  .support-policy-actions,
  .mg-filter-sort-actions,
  .sell-device-actions
) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-theme] body :where(
  .summary-action-stack,
  .warehouse-summary-benefits,
  .option-grid,
  .form-grid,
  .field-row
) {
  min-inline-size: 0;
}

html[data-theme] body :where(
  .card-grid,
  .service-grid,
  .support-grid,
  .repair-grid,
  .contact-grid,
  .faq-grid,
  .seo-answer-grid
) {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--mg218-card-min)), 1fr)
  );
  align-items: stretch;
}

html[data-theme] body #storeGrid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--mg218-card-min)), 1fr)
  );
  align-items: stretch;
}

html[data-theme] body #storeGrid > :is(
  .product-card,
  .product-card-v39,
  .accessory-card
) {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  block-size: 100% !important;
  min-block-size: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
}

html[data-theme] body #storeGrid > :is(
  .product-card,
  .product-card-v39,
  .accessory-card
) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

html[data-theme] body #storeGrid .product-image-link {
  inline-size: 100% !important;
  align-self: start !important;
}

html[data-theme] body #storeGrid .product-image-link img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

html[data-theme] body #storeGrid .product-card-body {
  inline-size: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
}

html[data-theme] body #storeGrid :where(
  .product-card-body h3,
  .product-card-body p,
  .product-card-body span,
  .tag,
  .family-option-count,
  .price-cta
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

html[data-theme] body #storeGrid .price-cta {
  inline-size: 100% !important;
  align-self: end !important;
  margin-block-start: auto !important;
}

html[data-theme] body.page-faq .form-page {
  inline-size: min(
    calc(100% - (var(--mg-page-pad, 18px) * 2)),
    900px
  );
  margin-inline: auto;
}

html[data-theme] body.page-faq .form-card {
  inline-size: 100%;
  display: grid !important;
  gap: clamp(10px, 1.5vw, 14px) !important;
  padding: clamp(12px, 2.4vw, 22px) !important;
  overflow: visible !important;
}

html[data-theme] body.page-faq .form-card > br {
  display: none;
}

html[data-theme] body.page-faq .form-card details {
  box-sizing: border-box;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  overflow: hidden;
  border-radius: clamp(14px, 2vw, 18px);
}

html[data-theme] body.page-faq .form-card summary {
  box-sizing: border-box;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  min-block-size: 56px !important;
  margin: 0 !important;
  padding: 14px 14px 14px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative;
  list-style: none;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: pretty;
}

html[data-theme] body.page-faq .form-card summary::-webkit-details-marker {
  display: none;
}

html[data-theme] body.page-faq .form-card summary::marker {
  content: "";
}

html[data-theme] body.page-faq .form-card summary::after {
  position: static;
  inset: auto;
  grid-column: 2;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  justify-self: end;
  font-size: 1.2rem;
  line-height: 1;
}

html[data-theme] body.page-faq .form-card details > p {
  box-sizing: border-box;
  inline-size: 100% !important;
  max-inline-size: 72ch !important;
  margin: 0 !important;
  padding: 14px 18px 18px !important;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  :root {
    --mg218-card-min: 0px;
  }

  html[data-theme] body #storeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.4vw, 12px);
  }

  html[data-theme] body #storeGrid > :is(
    .product-card,
    .product-card-v39,
    .accessory-card
  ) > .tag {
    min-block-size: 3.45em !important;
    min-height: 3.45em !important;
    align-content: center !important;
  }

  html[data-theme] body #storeGrid .product-card-body h3 {
    min-block-size: 2.4em !important;
  }

  html[data-theme] body #storeGrid .product-card-body p {
    min-block-size: 3.6em !important;
  }

  html[data-theme] body #storeGrid .price-cta {
    min-block-size: 48px !important;
    padding: 8px clamp(7px, 2.5vw, 10px) !important;
    font-size: clamp(.7rem, 2.9vw, .82rem) !important;
    line-height: 1.15 !important;
  }

  html[data-theme] body :where(
    .actions,
    .form-actions,
    .hero-actions,
    .page-actions,
    .cta-row,
    .button-row,
    .support-policy-actions,
    .sell-device-actions
  ) > :where(
    .primary-btn,
    .secondary-btn,
    .btn,
    .cta-button,
    button[type="submit"]
  ) {
    flex: 1 1 100%;
    inline-size: 100%;
  }

  html[data-theme] body.page-faq .form-page {
    inline-size: calc(100% - 18px);
  }

  html[data-theme] body.page-faq .form-card {
    padding: 14px !important;
    gap: 10px !important;
  }

  html[data-theme] body.page-faq .form-card summary {
    min-block-size: 58px !important;
    padding: 13px 10px 13px 14px !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 8px !important;
  }

  html[data-theme] body.page-faq .form-card details > p {
    padding: 12px 14px 16px !important;
    font-size: clamp(.9rem, 3.8vw, 1rem) !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 335px) {
  html[data-theme] body.mg-v170-category #storeGrid,
  html[data-theme] body.mg-v167-category-page #storeGrid,
  html[data-theme] body #storeGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body #storeGrid > :is(
    .product-card,
    .product-card-v39,
    .accessory-card
  ) > .tag,
  html[data-theme] body #storeGrid .product-card-body h3,
  html[data-theme] body #storeGrid .product-card-body p {
    min-block-size: 0 !important;
    min-height: 0 !important;
  }
}

/*
  Site-wide centered auto-layout pass.
  This section changes alignment and responsive flow only.
*/

html[data-theme] body :where(main, .footer, .mg-search-content) {
  text-align: center;
}

html[data-theme] body main :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  .eyebrow,
  .muted,
  .small-note,
  .field-hint,
  .customer-copy-note,
  .store-card-kicker,
  .family-option-count,
  .price,
  .summary-total,
  .summary-exact
) {
  margin-inline: auto;
  text-align: center !important;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

html[data-theme] body main :where(
  h1,
  h2,
  h3,
  h4,
  .eyebrow,
  .section-heading,
  .trade-section-heading
) {
  text-wrap: balance;
}

html[data-theme] body main :where(
  .hero-ad,
  .hero-copy,
  .promo-copy,
  .catalog-header,
  .filter-page-header,
  .page-title,
  .section-heading,
  .apple-store-section-head,
  .support-section-head,
  .repair-section-head,
  .repair-form-head,
  .support-hero-copy,
  .seo-answer-intro,
  .trade-result-heading,
  .warehouse-product-heading,
  .product-family-specs-head,
  .product-family-specs-intro
) {
  margin-inline: auto !important;
  text-align: center !important;
}

html[data-theme] body main :where(
  .product-card-body,
  .store-feature-card,
  .store-icon-card,
  .service-card,
  .support-card,
  .support-help-card,
  .support-policy-card,
  .repair-type-card,
  .repair-note-card,
  .repair-guide-card,
  .trade-card,
  .trade-form-card,
  .trade-workbook-card,
  .sell-device-card,
  .promo-card,
  .form-card,
  .product-media-card,
  .product-config-card,
  .purchase-summary-card,
  .product-family-specs-card,
  .product-family-spec-item,
  .warehouse-meta-card,
  .selection-step,
  .option,
  .seo-answer-shell,
  .seo-answer-grid > *,
  .mg-page-bottom-cta
) {
  text-align: center !important;
  justify-items: center;
}

html[data-theme] body main :where(
  .actions,
  .form-actions,
  .hero-actions,
  .support-hero-actions,
  .page-actions,
  .cta-row,
  .button-row,
  .support-policy-actions,
  .mg-page-bottom-actions,
  .sell-device-actions,
  .summary-action-stack
) {
  justify-content: center !important;
  justify-items: center;
  margin-inline: auto !important;
}

html[data-theme] body main :where(
  .primary-btn,
  button.primary-btn,
  a.primary-btn,
  .secondary-btn,
  button.secondary-btn,
  a.secondary-btn,
  .btn,
  .cta-button,
  .price-cta,
  .product-photo-request-btn,
  .repair-submit-btn,
  .mg-page-btn,
  button[type="submit"]
) {
  align-self: center;
  justify-content: center !important;
  margin-inline: auto;
  text-align: center !important;
}

html[data-theme] body main :where(
  label,
  legend,
  .field-hint,
  .trade-defect-hint
) {
  text-align: center !important;
}

html[data-theme] body main :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  text-align: center;
}

html[data-theme] body main select {
  text-align-last: center;
}

html[data-theme] body main :where(
  .option-grid,
  .device-grade-options,
  .repair-type-grid,
  .support-help-grid,
  .support-policy-grid,
  .warehouse-product-meta-grid,
  .product-family-specs-grid,
  .warehouse-gallery-strip
) > * {
  min-inline-size: 0;
  text-align: center;
}

html[data-theme] body main :where(
  .warehouse-status-strip,
  .warehouse-quick-promises,
  .warehouse-media-checks,
  .category-filter-bar
) {
  justify-content: center !important;
  margin-inline: auto;
  text-align: center;
}

html[data-theme] body main .category-filter {
  justify-content: center !important;
  text-align: center;
}

html[data-theme] body.mg-final-filter-ready .mg-final-filter-tools,
html[data-theme] body.mg-final-filter-ready .mg-clean-separated-pill-cluster {
  justify-content: center !important;
}

html[data-theme] body.mg-final-filter-ready .mg-product-tools-copy {
  justify-items: center;
  text-align: center;
}

html[data-theme] body.mg-final-filter-ready .mg-product-tools-copy :where(
  strong,
  span
) {
  text-align: center;
}

html[data-theme] body main :where(
  .product-image-link img,
  .store-feature-image,
  .store-icon-image,
  .promo-image img,
  .product-media-card img,
  .warehouse-gallery-tile img
) {
  margin-inline: auto;
}

html[data-theme] body #storeGrid :where(
  .product-card,
  .product-card-v39,
  .accessory-card,
  .product-card-body,
  .price-cta
) {
  text-align: center !important;
}

html[data-theme] body #storeGrid .product-card-body {
  justify-items: center !important;
}

html[data-theme] body :where(
  .footer,
  .footer a,
  .mg-search-content,
  .mg-search-results,
  .search-results
) {
  text-align: center;
}

html[data-theme] body :where(
  .footer-social-icons,
  .mg-search-quick
) {
  justify-content: center;
}

@media (max-width: 760px) {
  html[data-theme] body main :where(
    .actions,
    .form-actions,
    .hero-actions,
    .support-hero-actions,
    .page-actions,
    .cta-row,
    .button-row,
    .support-policy-actions,
    .mg-page-bottom-actions,
    .sell-device-actions,
    .summary-action-stack
  ) {
    inline-size: 100%;
  }
}

/* Miller Gadgets v1.221 — diagnostic layout corrections only. */

@media (min-width: 901px) {
  html[data-theme] body.page-product.mg-v170-product
    .product-detail-grid.product-detail-grid-v39 {
    grid-template-columns:
      minmax(0, .9fr)
      minmax(0, 1.1fr)
      minmax(0, .8fr) !important;
  }

  html[data-theme] body.page-product.mg-v170-product
    .product-detail-grid.product-detail-grid-v39
    > .product-right-rail-v200 {
    grid-column: 2 / -1 !important;
    display: grid !important;
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(0, .8fr) !important;
    gap: var(--mg-grid-gap) !important;
    align-items: start !important;
    min-inline-size: 0;
  }

  html[data-theme] body.page-product.mg-v170-product
    .product-right-rail-v200
    > .product-config-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-inline-size: 0;
  }

  html[data-theme] body.page-product.mg-v170-product
    .product-right-rail-v200
    > .purchase-summary-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-inline-size: 0;
    margin-block-start: 0 !important;
  }
}

html[data-theme] body.page-store
  .apple-store-help
  > .help-choosing-link {
  justify-content: center !important;
  justify-items: center !important;
  text-align: center !important;
}

html[data-theme] body.page-accessories
  #storeGrid
  .product-card[data-family^="accessory-ray-ban-wayfarer-smart-glasses"]
  h3 {
  display: block !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

html[data-theme] body.page-home main .actions {
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
}

@media (max-width: 760px) {
  html[data-theme] body:is(
    .page-accessories,
    .page-consoles,
    .page-contact,
    .page-laptops,
    .page-phones,
    .page-repair,
    .page-sell,
    .page-store,
    .page-support,
    .page-trade-in,
    .page-product
  ) main {
    padding-block-start: 12px !important;
  }

  html[data-theme] body :is(
    #themeToggle,
    #searchToggle,
    .mg-back-to-top
  ),
  html[data-theme] body.page-store .mg-scroll-arrow {
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }

  html[data-theme] body.mg-v201-dark-rebuild.mg-v183-ribbon-hardfix.mg-v185-interactions
    .top-nav
    .nav-icons
    > #themeToggle.theme-toggle.header-icon-button.theme-toggle-button.mode-icon-button[aria-pressed] {
    height: 44px !important;
    block-size: 44px !important;
    min-height: 44px !important;
    min-block-size: 44px !important;
  }
}

/* Miller Gadgets v1.222 — focused page-title typography and wrapping. */

html[data-theme] body main h1 {
  box-sizing: border-box;
  max-inline-size: min(100%, 22ch) !important;
  margin-block-start: 0 !important;
  margin-block-end: clamp(14px, 2vw, 22px) !important;
  margin-inline: auto !important;
  padding-inline: .04em;
  font-family: var(--font-sans, "Sora", sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.04 !important;
  text-align: center !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

html[data-theme] body:not(.page-product) main h1 {
  font-size: clamp(3rem, 4.5vw, 4.25rem) !important;
}

html[data-theme] body.page-product.mg-v170-product
  main
  .product-config-card
  h1 {
  max-inline-size: min(100%, 22ch) !important;
  font-size: clamp(2.05rem, 2.8vw, 2.75rem) !important;
  line-height: 1.08 !important;
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  html[data-theme] body:not(.page-product) main h1 {
    max-inline-size: min(100%, 22ch) !important;
    font-size: clamp(1.9rem, 8vw, 2.2rem) !important;
    line-height: 1.08 !important;
  }

  html[data-theme] body.page-product.mg-v170-product
    main
    .product-config-card
    h1 {
    max-inline-size: min(100%, 22ch) !important;
    font-size: clamp(1.75rem, 7.2vw, 2rem) !important;
    line-height: 1.12 !important;
  }
}

/*
 * Keep the title treatment above the legacy theme selectors, whose deliberately
 * high specificity otherwise restores the oversized hero-heading scale.
 */
html[data-theme]
  body:not(.page-product).mg-v170-ui.mg-v167-page-polish
  main
  :is(
    .hero-ad,
    .apple-store-hero,
    .catalog-header,
    .trade-hero,
    .sell-device-hero,
    .repair-hero,
    .support-hero,
    .contact-hero,
    .page-title,
    .accessories-hero,
    .promo
  )
  h1 {
  box-sizing: border-box;
  max-inline-size: min(100%, 22ch) !important;
  margin-block-start: 0 !important;
  margin-block-end: clamp(14px, 2vw, 22px) !important;
  margin-inline: auto !important;
  padding-inline: .04em;
  font-family: var(--font-sans, "Sora", sans-serif) !important;
  font-size: clamp(3rem, 4.5vw, 4.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.04 !important;
  text-align: center !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

html[data-theme]
  body.page-product.mg-v170-product.mg-v167-page-polish
  main
  .product-config-card
  h1 {
  max-inline-size: min(100%, 22ch) !important;
  font-size: clamp(2.05rem, 2.8vw, 2.75rem) !important;
  letter-spacing: -.03em !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 760px) {
  html[data-theme]
    body:not(.page-product).mg-v170-ui.mg-v167-page-polish
    main
    :is(
      .hero-ad,
      .apple-store-hero,
      .catalog-header,
      .trade-hero,
      .sell-device-hero,
      .repair-hero,
      .support-hero,
      .contact-hero,
      .page-title,
      .accessories-hero,
      .promo
    )
    h1 {
    max-inline-size: min(100%, 22ch) !important;
    font-size: clamp(1.9rem, 8vw, 2.2rem) !important;
    line-height: 1.08 !important;
  }

  html[data-theme]
    body.page-product.mg-v170-product.mg-v167-page-polish
    main
    .product-config-card
    h1 {
    max-inline-size: min(100%, 22ch) !important;
    font-size: clamp(1.75rem, 7.2vw, 2rem) !important;
    line-height: 1.12 !important;
  }
}