/* Mobile header and homepage shelf geometry. Desktop and tablet retain their existing layout. */
.mobile-search-toggle,
.primary-nav__account,
.header-search__clear,
.header-search__close { display: none; }

@media (max-width: 767px) {
  .site-header__main { gap: 0; }
  .site-header__main .brand { min-width: 0; flex: 0 1 auto; }
  .site-header__main .brand__primary { white-space: nowrap; }
  .header-tools { display: flex; flex: none; gap: 7px; margin-left: auto; }
  .header-tools .header-account { display: none; }
  .mobile-search-toggle,
  .header-cart,
  .menu-toggle {
    display: grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
  }
  .mobile-search-toggle { cursor: pointer; }
  .mobile-search-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .menu-toggle { margin-left: 7px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-search-toggle:focus-visible,
  .menu-toggle:focus-visible,
  .primary-nav__account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .header-tools .header-search {
    position: fixed;
    z-index: 65;
    top: var(--ddm-mobile-nav-top, 66px);
    right: 0;
    left: 0;
    display: none;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--canvas);
    box-shadow: 0 12px 28px rgba(16, 39, 77, .11);
  }
  .header-tools .header-search.is-mobile-open { display: block; }
  .header-search input { height: 46px; padding-inline: 44px 78px; background: #fff; }
  .header-search input::-webkit-search-cancel-button { display: none; }
  .header-search button[type="submit"] { top: 16px; right: auto; left: 20px; }
  .header-search .header-search__clear {
    position: absolute;
    top: 16px;
    right: 54px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--muted);
    font-size: 23px;
    line-height: 1;
  }
  .header-search .header-search__clear[hidden] { display: none; }
  .header-search .header-search__close {
    position: absolute;
    top: 16px;
    right: 20px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--ink);
    font-size: 23px;
    line-height: 1;
  }
  .header-search__results { top: calc(100% + 1px); right: 12px; left: 12px; width: auto; max-height: min(58dvh, 520px); border-radius: 0 0 16px 16px; }

  .js .primary-nav { padding: 16px 16px 28px; }
  .primary-nav .primary-nav__account {
    display: flex;
    width: 100%;
    min-height: 72px;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    margin: 0 0 17px;
    padding: 12px;
    border: 1px solid #dce8f9;
    border-radius: 15px;
    background: #eff5ff;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .primary-nav__account-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 50%; background: #fff; color: var(--accent); font-size: 18px; font-weight: 800; }
  .primary-nav__account-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .primary-nav__account-copy { display: grid; min-width: 0; gap: 3px; }
  .primary-nav__account-copy strong { font-size: 14px; line-height: 1.25; }
  .primary-nav__account-copy small { color: #5d708d; font-size: 11px; line-height: 1.35; }
  .primary-nav__account-arrow { flex: none; margin-left: auto; color: var(--accent); font-size: 20px; }
  .primary-nav .nav-dropdown__trigger,
  .primary-nav .nav-dropdown__label,
  .primary-nav .nav-dropdown__toggle { min-height: 49px; }
  .primary-nav .nav-dropdown__label,
  .primary-nav > .primary-nav__utility > a { font-size: 17px; }
  .primary-nav .nav-dropdown__toggle { width: 48px; }

  .home-product-shelf { padding-block: 36px 30px; }
  .home-product-shelf .ddm-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 20px;
  }
  .home-product-shelf .ddm-section-header__copy { width: 100%; }
  .home-product-shelf .ddm-section-header__eyebrow { max-width: none; white-space: normal; }
  .home-product-shelf .ddm-section-header .ddm-section-title { font-size: clamp(23px, 6vw, 28px); line-height: 1.16; }
  .home-product-shelf .ddm-section-header__subtitle { margin-top: 8px; }
  .home-product-shelf .ddm-section-header__actions { width: 100%; justify-self: stretch; justify-content: flex-start; }
  .home-product-shelf .product-shelf { min-width: 0; margin-inline: 0; }
  .home-product-shelf .product-grid--shelf {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 340px);
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 2px 2px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-left: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }
  .home-product-shelf .product-grid--shelf::-webkit-scrollbar { display: none; }
  .home-product-shelf .product-grid--shelf > * { min-width: 0; box-sizing: border-box; scroll-snap-align: start; }
  .home-product-shelf .product-grid--shelf > .reveal { opacity: 1; visibility: visible; transform: none; }
  .home-product-shelf .product-grid--shelf .product-card__body { min-width: 0; padding-inline: 12px; }
  .home-product-shelf .product-grid--shelf .product-card__pricing strong { overflow-wrap: anywhere; }
  .home-product-shelf .product-shelf__controls { display: none; }
  body.home.smart-floating--product-in-view .back-to-top { visibility: hidden !important; pointer-events: none !important; }
}

@media (max-width: 390px) {
  .header-tools { gap: 5px; }
  .menu-toggle { margin-left: 5px; }
  .site-header__main .brand { font-size: 12.5px; }
}