/* Shared mobile navigation across the home, collection and product pages. */
.mobile-topbar { display:none; }
@media (max-width:900px) {
  :root {
    --mobile-topbar-height:36px;
    --mobile-header-height:72px;
    --mobile-nav-height:64px;
    --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
    --header-height:var(--mobile-header-height);
    --header-compact-height:var(--mobile-header-height);
  }
  html,html.is-header-compact { scroll-padding-top:calc(var(--mobile-header-height) + 16px); }
  body.home-page,body.reference-page { padding-bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); }
  .mobile-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:var(--mobile-topbar-height);
    padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));
    background:#c51e32;
    color:#fff;
  }
  .mobile-topbar-socials { display:flex; align-items:center; flex-shrink:0; }
  .mobile-topbar-socials a { display:grid; place-items:center; width:32px; height:var(--mobile-topbar-height); color:inherit; }
  .mobile-topbar-socials svg { width:16px; height:16px; stroke-width:1.8; }
  .mobile-topbar-socials .social-logo-filled { fill:currentColor; stroke:none; }
  .mobile-topbar-socials a:hover,.mobile-topbar-socials a:active { background:#ffffff20; }
  .mobile-topbar-socials a:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
  .mobile-topbar p { display:flex; align-items:center; gap:6px; margin:0; font-size:12px; font-weight:700; line-height:16px; letter-spacing:0; text-align:left; }
  .mobile-topbar p svg { width:18px; height:18px; stroke-width:1.7; }

  body:is(.home-page,.reference-page) .site-header.minal-header,
  .is-header-compact body:is(.home-page,.reference-page) .site-header.minal-header,
  body[data-page="product"].reference-page .site-header.minal-header {
    position:sticky;
    inset:0 0 auto;
    z-index:40;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 44px;
    align-items:center;
    gap:12px;
    width:100%;
    height:var(--mobile-header-height);
    min-height:var(--mobile-header-height);
    margin:0;
    padding:10px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));
    background:#fffdfb;
    border:0;
    border-bottom:1px solid #eee5df;
    box-shadow:0 2px 12px #36242c08;
    pointer-events:auto;
    transition:none;
  }
  body:is(.home-page,.reference-page) .minal-header .header-masthead { display:contents; }
  body:is(.home-page,.reference-page) .minal-header .header-brand,
  .is-header-compact body:is(.home-page,.reference-page) .minal-header .header-brand {
    position:static;
    display:flex;
    grid-area:1 / 1;
    justify-self:start;
    align-items:center;
    width:48px;
    height:48px;
    margin:0;
    padding:0;
    transform:none;
  }
  body:is(.home-page,.reference-page) .minal-header .header-brand img,
  .is-header-compact body:is(.home-page,.reference-page) .minal-header .header-brand img {
    width:48px;
    height:48px;
    border-radius:50%;
    transition:none;
  }
  body:is(.home-page,.reference-page) .minal-header .header-search {
    grid-area:1 / 2;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    width:100%;
    min-width:0;
    height:44px;
    padding:0 13px;
    border:1px solid #e7ddd8;
    border-radius:24px;
    background:#f6f1ee;
    color:#605650;
    text-align:left;
  }
  body:is(.home-page,.reference-page) .header-search svg { width:18px; height:18px; color:var(--berry); }
  body:is(.home-page,.reference-page) .header-search>span:not(.search-hint) {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    line-height:20px;
    letter-spacing:0;
  }
  body:is(.home-page,.reference-page) .header-search .search-hint { display:none; }
  body:is(.home-page,.reference-page) .minal-header .menu-toggle {
    display:grid;
    grid-area:1 / 3;
    place-items:center;
    width:44px;
    height:44px;
    min-height:44px;
    padding:10px;
    border:1px solid #ead8db;
    border-radius:12px;
    background:#f3e7e8;
    color:var(--berry);
  }
  body:is(.home-page,.reference-page) .minal-header .menu-toggle svg { width:23px; height:23px; }
  body:is(.home-page,.reference-page) .minal-header .header-actions,
  body:is(.home-page,.reference-page) .minal-header .header-navigation { display:none; }
  .home-page .campaign-art .campaign-center { padding-top:24px; }

  body:is(.home-page,.reference-page) .home-bottom-nav {
    position:fixed;
    inset:auto 0 0;
    z-index:40;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:start;
    gap:0;
    height:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
    min-height:var(--mobile-nav-height);
    padding:5px max(8px,env(safe-area-inset-right,0px)) calc(5px + var(--mobile-safe-bottom)) max(8px,env(safe-area-inset-left,0px));
    border-top:1px solid #ebe3df;
    background:#fffdfb;
    box-shadow:0 -3px 16px #36242c06;
  }
  body:is(.home-page,.reference-page) .home-bottom-nav>a,
  body:is(.home-page,.reference-page) .home-bottom-nav>button {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:100%;
    height:54px;
    min-height:44px;
    min-width:0;
    padding:0;
    border:0;
    border-radius:12px;
    color:#716761;
    font-size:11px;
    font-weight:400;
    line-height:16px;
    letter-spacing:.1px;
  }
  .home-bottom-nav .bottom-nav-icon {
    position:relative;
    display:grid;
    place-items:center;
    width:48px;
    height:30px;
    border-radius:18px;
  }
  body:is(.home-page,.reference-page) .home-bottom-nav svg { width:22px; height:22px; }
  body:is(.home-page,.reference-page) .home-bottom-nav>[aria-current] { color:var(--berry); font-weight:700; }
  .home-bottom-nav>[aria-current] .bottom-nav-icon { background:#f2e4e6; }
  .home-bottom-nav .count {
    top:-2px;
    right:3px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border:1px solid #fffdfb;
    border-radius:12px;
    font-size:10px;
    line-height:14px;
    font-weight:700;
  }
  .home-bottom-nav>a:focus-visible,.home-bottom-nav>button:focus-visible { outline-offset:-2px; }
  body[data-page="collection"] .collection-toolbar.is-pinned { top:var(--mobile-header-height); }

  /* Product actions replace the bottom navigation on the scrolling detail page. */
  body.reference-page[data-page="product"] { padding-bottom:var(--pdp-controls-height); }
  body.reference-page[data-page="product"]:not(.pdp-invalid) .home-bottom-nav { display:none; }
  body.reference-page[data-page="product"].pdp-invalid { padding-bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); }
  body[data-page="product"] .menu-shortcuts { flex-wrap:wrap; gap:12px 20px; }
}

@media(max-width:360px) {
  body:is(.home-page,.reference-page) .site-header.minal-header,
  .is-header-compact body:is(.home-page,.reference-page) .site-header.minal-header,
  body[data-page="product"].reference-page .site-header.minal-header { gap:8px; padding-inline:10px; }
  body:is(.home-page,.reference-page) .minal-header .header-search { padding-inline:10px; gap:7px; }
  body:is(.home-page,.reference-page) .header-search>span:not(.search-hint) { font-size:12px; }
}