@media (max-width: 767px) {
  :root {
    --content: calc(100% - 1rem);
    --content-wide: calc(100% - 1rem);
    --topbar-height: 5rem;
  }

  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .view,
  .home-view,
  .home-view > *,
  .view > * {
    min-width: 0;
    max-width: 100%;
  }

  .home-view,
  .view {
    width: 100%;
    overflow-x: hidden;
  }

  .topbar {
    width: calc(100% - 0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-inline: auto;
    margin-top: 0.25rem;
    padding: 0.7rem;
    gap: 0.7rem;
  }

  .brand {
    gap: 0.7rem;
  }

  .brand-mark {
    width: 2.75rem;
    height: 2.75rem;
  }

  .brand-title {
    max-width: 11rem;
  }

.brand-tagline,
.header-search,
.header-cart-link,
.header-support-link {
  display: none;
}

  .header-menu-panel {
    width: min(22rem, calc(100vw - 1rem));
    right: -0.25rem;
  }

  .view,
  .videos-page,
  .diagnostic-page {
    padding-top: 1rem;
    padding-bottom: calc(var(--nav-height) + 2.25rem + env(safe-area-inset-bottom));
  }

  .thankyou-page {
    padding-top: 1rem;
  }

  .page-shell,
  .panel,
  .section-card,
  .social-diagnostic-container {
    padding: 1rem;
  }

  .section-card,
  .panel,
  .page-shell,
  .info-card,
  .card,
  .list-card,
  .video-item,
  .video-card,
  .product-trust-card,
  .spotlight-card,
  .flash-strip-card,
  .contact-form-card,
  .specs-card,
  .box-section,
  .product-gallery-surface,
  .product-purchase-card,
  .product-info-card,
  .product-rail-shell,
  .product-tab-nav,
  .product-support-card,
  .product-rail-card,
  .social-float-card,
  .social-score-card,
  .social-question-category,
  .summary,
  .empty-flat,
  .note,
  .checkout-reassure,
  .cart-item {
    box-shadow: none;
  }

  .brand-hero,
  .about-hero,
  .page-hero,
  .advisor-head,
  .advisor-layout,
  .advisor-result-best,
  .product-view,
  .product-hero-shell,
  .detail-wrap,
  .catalog-top,
  .checkout-progress,
  .contact-form-grid,
  .form-grid.two-col,
  .list-grid,
  .list-card,
  .spotlight-card,
  .flash-strip-card,
  .video-grid,
  .info-grid,
  .need-grid,
  .bundle-grid,
  .related-grid,
  .product-trust-grid,
  .trust-strip,
  .social-category-grid,
  .social-step-grid,
  .storefront-page-head,
  .storefront-page-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .advisor-head,
  .advisor-layout {
    width: var(--content);
  }

  .advisor-panel {
    position: static;
  }

  .advisor-status,
  .advisor-actions,
  .advisor-result-actions {
    align-items: stretch;
  }

  .advisor-status span,
  .advisor-actions > *,
  .advisor-result-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  .advisor-chip {
    flex: 1 1 auto;
  }

  .advisor-alt-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .advisor-result-top {
    display: grid;
  }

  .bottom-nav .nav-btn {
    min-height: 3rem;
    padding-inline: 0.32rem;
    font-size: 0.72rem;
  }

  .app-hero {
    width: calc(100% - 1rem);
    max-width: none;
    justify-self: center;
    min-height: 32rem;
    margin-inline: auto;
    padding: 1rem;
    gap: 1rem;
  }

  .app-hero .brand-hero-copy {
    min-height: calc(32rem - 2rem);
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: stretch;
  }

  .app-hero .hero-eyebrow {
    align-self: start;
  }

  .app-hero .brand-hero-main {
    align-self: end;
    width: 100%;
  }

  .app-hero h1,
  .app-hero h2 {
    max-width: 12ch;
    font-size: 2.35rem;
    line-height: 1.02;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .app-hero .hero-micro {
    font-size: 1rem;
  }

  .app-hero p {
    max-width: 20rem;
  }

  .hero-search-panel {
    display: none;
  }

  .hero-photo-shell {
    min-height: 18rem;
    max-height: 26rem;
  }

  .app-hero .brand-hero-media {
    display: none;
  }

  .hero-visual-caption {
    align-items: flex-start;
    flex-direction: column;
  }

  .category-command-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    margin-inline: 0;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0 0.5rem 0.15rem;
    scroll-padding-inline: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .category-command-grid::-webkit-scrollbar {
    display: none;
  }

  .category-command-card {
    flex: 0 0 min(78vw, 20rem);
    max-width: calc(100vw - 1rem);
    min-height: auto;
    scroll-snap-align: start;
  }

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

  .brand-hero h2,
  .brand-hero h1,
  .page-hero h1,
  .about-copy h1,
  .thankyou-page h1,
  .videos-hero h1 {
    font-size: 2.35rem;
  }

  .storefront-page-copy h2,
  .section-head h3,
  .page-section-title,
  .checkout-page h2,
  .product-view h2,
  .social-header h2 {
    font-size: 1.7rem;
  }

  .hero-highlights-desktop {
    display: none;
  }

  .brand-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    width: min(100%, 20rem);
    max-width: 100%;
    justify-self: center;
    margin-inline: auto;
    overflow: hidden;
  }

  .brand-cta .primary-btn:last-child {
    grid-column: 1 / -1;
  }

  .brand-cta .primary-btn {
    width: auto;
    min-width: 0;
    min-height: 3.1rem;
    padding: 0.35rem 0.35rem;
    flex-direction: column;
    gap: 0.35rem;
    line-height: 1.15;
    overflow: hidden;
  }

  .brand-cta .primary-btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .brand-cta .cta-label-long {
    display: none;
  }

  .brand-cta .cta-label-short {
    display: inline;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-highlights-wrap {
    display: block;
  }

  .home-view .section-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.65rem 0.5rem;
  }

  .home-view .hero-highlights-wrap {
    padding-block: 0;
  }

  .home-view .hero-highlights {
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .home-view .hero-highlights::-webkit-scrollbar {
    display: none;
  }

  #homeTrendingSection,
  .arrivals-section,
  .best-sellers-section,
  .recent-section {
    gap: 0.85rem;
  }

  #homeTrendingSection .section-head,
  .arrivals-section .section-head,
  .best-sellers-section .section-head,
  .recent-section .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    margin-bottom: 0;
  }

  #homeTrendingSection .section-head .text-btn,
  .arrivals-section .section-head .text-btn,
  .best-sellers-section .section-head .text-btn,
  .recent-section .section-head .text-btn {
    width: auto;
    white-space: nowrap;
  }

  #homeTrendingSection .home-filter-row {
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    margin: 0;
    scrollbar-width: none;
  }

  #homeTrendingSection .home-filter-row::-webkit-scrollbar {
    display: none;
  }

  #homeTrendingSection .home-cat-btn {
    flex: 0 0 auto;
    width: auto;
  }

  #homeGrid,
  #homeArrivals,
  #homeBestSellers,
  #homeRecentlyViewed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
  }

  #homeGrid .card,
  #homeArrivals .card,
  #homeBestSellers .card,
  #homeRecentlyViewed .card {
    gap: 0.48rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #homeGrid .media-frame,
  #homeArrivals .media-frame,
  #homeBestSellers .media-frame,
  #homeRecentlyViewed .media-frame {
    border-radius: 12px;
    background: #f3f6f4;
  }

  #homeGrid .card h4,
  #homeArrivals .card h4,
  #homeBestSellers .card h4,
  #homeRecentlyViewed .card h4 {
    font-size: 0.96rem;
    line-height: 1.15;
  }

  #homeGrid .card p,
  #homeArrivals .card p,
  #homeBestSellers .card p,
  #homeRecentlyViewed .card p {
    font-size: 0.82rem;
  }

  #homeGrid .price-row,
  #homeArrivals .price-row,
  #homeBestSellers .price-row,
  #homeRecentlyViewed .price-row {
    font-size: 1rem;
  }

  #homeGrid .action-row,
  #homeArrivals .action-row,
  #homeBestSellers .action-row,
  #homeRecentlyViewed .action-row {
    align-items: center;
    gap: 0.45rem;
  }

  #homeGrid .action-row .ghost-btn,
  #homeArrivals .action-row .ghost-btn,
  #homeBestSellers .action-row .ghost-btn,
  #homeRecentlyViewed .action-row .ghost-btn {
    width: auto;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.82rem;
  }

  #homeGrid .action-row .text-btn,
  #homeArrivals .action-row .text-btn,
  #homeBestSellers .action-row .text-btn,
  #homeRecentlyViewed .action-row .text-btn {
    width: auto;
    font-size: 0.82rem;
  }

  .product-breadcrumbs {
    display: none;
  }

  .storefront-nav {
    width: var(--content);
    position: static;
    max-width: calc(100vw - 1rem);
  }

  .brand-hero,
  .brand-hero-copy,
  .brand-hero-main {
    min-width: 0;
    max-width: 100%;
  }

  .brand-hero p {
    max-width: 100%;
  }

  .brand-hero.app-hero p {
    max-width: min(100%, 20rem);
  }

  .product-gallery-surface {
    min-height: auto;
    padding: 0.75rem;
  }

  .product-gallery-arrow {
    display: none;
  }

  .product-title {
    max-width: 100%;
    font-size: 2.35rem;
  }

  .product-price {
    font-size: 2.6rem;
  }

  .product-utility-row,
  .product-media-actions,
  .product-trust-links,
  .product-action-row,
  .checkout-reassure-links {
    flex-direction: column;
    align-items: stretch;
  }

  .product-related-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 1rem;
    overflow: visible;
  }

  .product-rail-card {
    min-width: 0;
  }

  .product-tab-nav {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.2rem 0.8rem;
  }

  .product-tab-link {
    flex: 0 0 auto;
    min-height: 2.8rem;
    padding: 0.6rem 0;
    border-right: 0;
  }

  .product-data-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .primary-btn,
  .ghost-btn,
  .btn,
  .nav-btn,
  .pagination > * {
    width: 100%;
  }

  .cart-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cart-actions {
    grid-column: 1 / -1;
  }

  .section-head,
  .insight-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer {
    padding-bottom: calc(var(--nav-height) + 1.75rem + env(safe-area-inset-bottom));
  }

  .footer-row {
    width: calc(100% - 1rem);
  }

  .back-to-top {
    bottom: calc(var(--nav-height) + 1.2rem + env(safe-area-inset-bottom));
  }

  .chat-fab {
    bottom: calc(var(--nav-height) + 5.2rem + env(safe-area-inset-bottom));
  }

  .chat-popup {
    right: 0.5rem;
    bottom: calc(var(--nav-height) + 9rem + env(safe-area-inset-bottom));
    width: calc(100vw - 1rem);
  }

  .toast-stack {
    left: 0.5rem;
    right: 0.5rem;
    top: auto;
    bottom: calc(var(--nav-height) + 1rem + env(safe-area-inset-bottom));
    width: auto;
  }
}

@media (min-width: 560px) and (max-width: 767px) {
  .home-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --content: 100%;
    --content-wide: 100%;
    --topbar-height: 4.55rem;
    --nav-height: 4.85rem;
  }

  body {
    background:
      linear-gradient(180deg, #f4f0e8 0%, #eef3ef 48%, #f5f1ea 100%);
  }

  .topbar {
    width: 100%;
    max-width: 100%;
    min-height: var(--topbar-height);
    margin: 0;
    padding: 0.58rem 0.85rem;
    border-top: 0;
    border-inline: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(18, 24, 28, 0.1);
  }

  .brand-mark {
    width: 2.55rem;
    height: 2.55rem;
  }

  .header-menu-btn {
    width: 2.75rem;
    min-height: 2.75rem;
  }

  .view,
  .videos-page,
  .diagnostic-page {
    padding-top: 0;
  }

  .container,
  .page-shell,
  .section-card,
  .videos-wrap,
  .product-page-shell,
  .social-fb-diagnostic-wrapper,
  .thankyou-page .container {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .page-shell,
  .section-card,
  .panel,
  .videos-hero,
  .contact-form-card,
  .specs-card,
  .box-section,
  .empty-flat,
  .summary {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .home-view {
    gap: 0;
    background: transparent;
  }

  .app-hero {
    width: 100%;
    min-height: min(76svh, 34rem);
    margin: 0;
    padding: 1rem 0.95rem 1.2rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-hero .brand-hero-copy {
    min-height: calc(min(76svh, 34rem) - 2.2rem);
  }

  .brand-cta {
    width: min(100%, 22rem);
  }

  .category-command-grid {
    width: 100%;
    padding: 0.85rem;
    background: #111713;
  }

  .category-command-card {
    flex-basis: min(76vw, 19rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  }

  .home-view .section-card {
    padding: 1.05rem 0.85rem;
    background: transparent;
  }

  .home-view .hero-highlights-wrap {
    padding-top: 0.85rem;
    padding-bottom: 0.5rem;
    background: #111713;
  }

  .section-head,
  .insight-head {
    margin-bottom: 0.35rem;
  }

  .home-product-grid .media-frame,
  .related-grid .media-frame {
    border: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(18, 24, 28, 0.07);
  }

  #homeGrid .card,
  #homeArrivals .card,
  #homeBestSellers .card,
  #homeRecentlyViewed .card {
    background: transparent;
  }

  .storefront-nav {
    position: static;
    top: auto;
    z-index: 18;
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(244, 240, 232, 0.92);
  }

  .storefront-nav-track {
    gap: 0.45rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
  }

  .storefront-nav-track::-webkit-scrollbar {
    display: none;
  }

  .storefront-nav-btn {
    width: auto;
    min-height: 2.45rem;
    padding: 0.58rem 0.82rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    white-space: nowrap;
  }

  .storefront-page-head {
    padding: 1.1rem 0.9rem;
    background: transparent;
  }

  .storefront-page-meta {
    display: none;
  }

  .catalog-controls {
    position: static;
    top: auto;
    z-index: 16;
    padding: 0.85rem;
    border-inline: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
  }

  .catalog-top {
    gap: 0.55rem;
  }

  .catalog-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
  }

  .catalog-chips::-webkit-scrollbar {
    display: none;
  }

  .catalog-chips .filter-chip {
    flex: 0 0 auto;
    width: auto;
  }

  .list-section {
    padding: 0.9rem 0.85rem 1.2rem;
    background: transparent;
  }

  #catalogGrid.list-grid {
    gap: 0;
  }

  #catalogGrid .list-card {
    grid-template-columns: 6.8rem minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.85rem 0;
    border: 0;
    border-bottom: 1px solid rgba(18, 24, 28, 0.09);
    border-radius: 0;
    background: transparent;
  }

  #catalogGrid .list-media,
  #catalogGrid .list-body {
    min-width: 0;
  }

  #catalogGrid .list-frame {
    border: 0;
    border-radius: 10px;
  }

  #catalogGrid .slide-dots {
    display: none;
  }

  #catalogGrid .list-title {
    font-size: 1rem;
  }

  #catalogGrid .list-price {
    font-size: 1.18rem;
  }

  #catalogGrid .list-actions {
    display: flex;
    flex-wrap: nowrap;
  }

  #catalogGrid .list-actions .ghost-btn,
  #catalogGrid .list-actions .text-btn {
    width: auto;
    min-height: 2.25rem;
    padding: 0.48rem 0.65rem;
    font-size: 0.82rem;
  }

  .pagination {
    padding-top: 0.9rem;
  }

  .product-page-view {
    padding-top: 0;
  }

  .product-page-shell {
    gap: 0;
  }

  .product-hero-shell {
    gap: 0;
  }

  .product-gallery-surface {
    min-height: min(72svh, 31rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #eef3ef;
  }

  .product-gallery-surface .media-frame {
    min-height: min(72svh, 31rem);
    border-radius: 0;
  }

  .product-summary-stack {
    gap: 0;
  }

  .product-copy-block,
  .product-purchase-card,
  .product-info-card,
  .product-rail-shell,
  .product-tab-nav {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .product-copy-block {
    padding: 1.05rem 0.9rem;
    background: #ffffff;
  }

  .product-purchase-card,
  .product-info-card {
    padding: 1rem 0.9rem;
  }

  .product-title {
    font-size: 2.15rem;
  }

  .product-price {
    font-size: 2.35rem;
  }

  .product-tab-nav {
    position: sticky;
    top: var(--topbar-height);
    z-index: 14;
    background: rgba(255, 255, 255, 0.94);
  }

  .product-rail-shell {
    padding: 1rem 0;
    background: #ffffff;
  }

  .product-related-rail {
    padding-inline: 0.9rem;
  }

  .checkout-page .container {
    width: 100%;
  }

  .checkout-page .storefront-page-head,
  .checkout-progress,
  .checkout-page .detail-wrap {
    padding-inline: 0.85rem;
  }

  .checkout-progress {
    gap: 0.5rem;
  }

  .progress-step {
    min-height: 2.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
  }

  .cart-item {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(18, 24, 28, 0.09);
    background: transparent;
  }

  .bottom-nav {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.38rem 0.65rem calc(0.45rem + env(safe-area-inset-bottom));
    border-inline: 0;
    border-bottom: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -12px 34px rgba(18, 24, 28, 0.14);
  }

  .bottom-nav.is-hidden {
    transform: translateY(calc(100% + 1rem));
  }

  .bottom-nav .nav-btn {
    width: auto;
    min-height: 3.35rem;
    padding: 0.42rem 0.25rem;
    border: 0;
    background: transparent;
    color: var(--muted-strong);
    font-size: 0.72rem;
  }

  .bottom-nav .nav-btn.active {
    background: rgba(255, 107, 61, 0.12);
    color: var(--accent-strong);
  }

  .bottom-nav .nav-btn svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .footer {
    padding-bottom: calc(var(--nav-height) + 1rem + env(safe-area-inset-bottom));
  }

  .footer-row {
    width: 100%;
    padding-inline: 0.85rem;
  }
}