/* hi-mobile-six-nav-and-desktop-six-v1: unified desktop inventory, six compact mobile tabs */
@media (min-width:901px) {
  html body .products-grid,
  html body .layout-home-block .products-grid {
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    column-gap:11px!important;
    row-gap:13px!important;
  }
  html body .products-grid .product-card {min-width:0;min-height:0!important;padding:8px!important;}
  html body .products-grid .product-info {padding:9px 3px 5px!important;}
  html body .products-grid .product-info strong {font-size:12px!important;line-height:1.4;}
  html body .products-grid .product-footer {font-size:10px!important;padding:8px 3px 5px!important;}
}
@media (max-width:900px) {
  /* Mobile actions live in the bottom navigation now. No floating duplicates. */
  body > .family-entry,
  body .family-entry,
  #mainContent .floating-add {display:none!important;}
  html body .mobile-tabs {
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:2px!important;
    align-items:center;
    height:calc(70px + env(safe-area-inset-bottom,0px))!important;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px))!important;
    background:#17181b!important;
    border-top:1px solid #34343c!important;
    box-shadow:0 -5px 22px #0008!important;
    z-index:45!important;
  }
  html body .mobile-tabs .mobile-tab {
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:53px!important;
    padding:5px 0!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#999ba5!important;
    text-decoration:none!important;
    font:500 10px/1.15 Inter,system-ui,sans-serif!important;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
  }
  html body .mobile-tabs .mobile-tab .mobile-tab-icon {
    display:flex;align-items:center;justify-content:center;
    flex:none;width:21px;height:21px;color:inherit;
  }
  html body .mobile-tabs .mobile-tab .mobile-tab-icon svg {
    width:20px!important;height:20px!important;display:block;
    flex:none;stroke:currentColor!important;
  }
  html body .mobile-tabs .mobile-tab small {
    color:inherit!important;
    font:500 clamp(8px,2.35vw,10px)/1.2 Inter,system-ui,sans-serif!important;
    white-space:nowrap;
    letter-spacing:-.015em;
  }
  html body .mobile-tabs .mobile-tab.active {
    background:#25222b!important;
    border-color:#9c6bb9!important;
    color:#e9dff3!important;
  }
  html body .mobile-tabs .mobile-tab.active::after {
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    border-radius:inherit;
    padding:1.5px;
    background:linear-gradient(110deg,#512b7a,#bc76f2,#f2d8ff,#8855ce,#512b7a);
    background-size:280% 100%;
    animation:hiMobileVioletSweep 3s linear infinite;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
  }
  html body .mobile-tabs .mobile-tab:focus-visible {
    outline:1px solid #cca3f2!important;
    outline-offset:0;
  }
  html body .main {padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important;}
  /* Same logo and both text lines as expanded desktop sidebar. */
  html body .topbar {gap:7px!important;padding:0 12px!important;}
  html body .mobile-brand {display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto;min-width:0;font-family:Inter,system-ui,sans-serif!important;}
  html body .mobile-brand .dc-brand-mark {width:35px!important;height:35px!important;}
  html body .mobile-brand .brand-copy {display:flex!important;flex-direction:column!important;gap:2px!important;}
  html body .mobile-brand .brand-copy strong {font:550 14px/1.05 Inter,system-ui,sans-serif!important;letter-spacing:-.45px!important;color:#d4d5d9!important;white-space:nowrap;}
  html body .mobile-brand .brand-copy small {font:500 6.5px/1.1 Inter,system-ui,sans-serif!important;letter-spacing:.8px!important;color:#858791!important;white-space:nowrap;}
  html body .top-actions {gap:6px!important;flex:1;min-width:0;justify-content:flex-end;}
  html body .top-actions .search-wrap {width:clamp(76px,25vw,142px)!important;min-width:0!important;}
  html body .top-actions .round-button {width:34px!important;height:34px!important;flex:0 0 34px;}
}
@keyframes hiMobileVioletSweep {
  from {background-position:0 50%;}
  to {background-position:220% 50%;}
}
@media (max-width:360px) {
  html body .mobile-tabs {gap:0!important;padding-left:2px!important;padding-right:2px!important;}
  html body .mobile-tabs .mobile-tab {min-height:50px!important;}
  html body .top-actions .search-wrap {width:72px!important;}
  html body .mobile-brand .dc-brand-mark {width:30px!important;height:30px!important;}
  html body .mobile-brand .brand-copy strong {font-size:12px!important;}
  html body .mobile-brand .brand-copy small {font-size:6px!important;letter-spacing:.45px!important;}
}
@media (prefers-reduced-motion:reduce) {
  html body .mobile-tabs .mobile-tab.active::after{animation:none!important;}
}