/* TradesFolks Public UI Ownership Layer — Sprint 805
   Scope: shared header/search/cart/mobile navigation and responsive spacing.
   Page-specific commerce sections remain owned by their module styles. */

:root{
  --tf-public-navy:#071b46;
  --tf-public-blue:#0b5fc5;
  --tf-public-yellow:#ffc126;
  --tf-public-surface:#ffffff;
  --tf-public-soft:#f7f9fc;
  --tf-public-border:#dbe4ee;
  --tf-public-text:#17375d;
  --tf-public-muted:#718197;
  --tf-public-radius:14px;
  --tf-public-shadow:0 4px 16px rgba(7,27,70,.06);
}

/* ---------- Desktop header ownership ---------- */
@media(min-width:768px){
  .site-header .header-main .shell{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
  }

  .site-header .brand{
    flex:0 0 auto;
    min-width:0;
  }

  .site-header .global-search{
    flex:1 1 520px;
    min-width:260px;
    max-width:none;
  }

  .site-header .header-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
  }

  .site-header .header-actions > *{
    margin:0;
  }

  /* Canonical cart treatment */
  .site-header .shopping-cart-link,
  .site-header .cart-button,
  .site-header .tf-header-cart-v2{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
    border-radius:12px;
    text-decoration:none;
    box-sizing:border-box;
  }
}

/* ---------- Search ownership ---------- */
.site-header .global-search{
  position:relative;
  min-width:0;
}

.site-header .global-search form,
.site-header .global-search .search-form{
  width:100%;
  min-width:0;
}

.site-header .global-search input[type="search"],
.site-header .global-search input[type="text"]{
  min-width:0;
  width:100%;
  box-sizing:border-box;
}

.site-header .search-suggestions,
.site-header [data-search-suggestions],
.site-header .enterprise-search-suggestions{
  z-index:2200;
  max-width:100%;
}

/* ---------- Shared icon/button hygiene ---------- */
.site-header button,
.site-header a{
  -webkit-tap-highlight-color:transparent;
}

.site-header svg{
  flex:0 0 auto;
}

/* ---------- Mobile header ownership ---------- */
@media(max-width:767px){
  .site-header{
    position:relative;
    z-index:1200;
  }

  .site-header .header-main .shell{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  /* Top control row must not overflow horizontally. */
  .site-header .mobile-account-button,
  .site-header .mobile-menu-toggle,
  .site-header .tf-mobile-header-cart{
    flex:0 0 auto;
    margin:0;
    box-sizing:border-box;
  }

  .site-header .global-search{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* Search suggestions can extend above hero/content without being clipped. */
  .site-header .global-search,
  .site-header .header-main,
  .site-header .header-main .shell{
    overflow:visible;
  }

  /* Keep mobile controls compact and consistent. */
  .site-header .mobile-account-button,
  .site-header .mobile-menu-toggle,
  .site-header .tf-mobile-header-cart{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    max-width:44px;
    max-height:44px;
    border-radius:12px;
  }

  /* Canonical mobile cart icon/badge readability. */
  .site-header .tf-mobile-header-cart{
    position:relative;
    display:grid;
    place-items:center;
    border:1px solid #efc257;
    background:#fff8e5;
    color:var(--tf-public-blue);
    text-decoration:none;
    overflow:visible;
  }

  .site-header .tf-mobile-header-cart svg{
    display:block;
    width:23px;
    height:23px;
    stroke:currentColor;
  }

  .site-header .tf-mobile-header-cart [data-cart-count],
  .site-header .tf-mobile-header-cart > b{
    position:absolute;
    top:-6px;
    right:-5px;
    display:grid;
    place-items:center;
    min-width:21px;
    height:21px;
    padding:0 4px;
    border:2px solid #fff;
    border-radius:999px;
    background:var(--tf-public-yellow);
    color:var(--tf-public-navy);
    font-size:9px;
    line-height:1;
    font-weight:900;
    box-sizing:border-box;
  }

  /* Bottom navigation ownership */
  .tf-mobile-market-dock,
  .tf-mobile-market-dock-row,
  .tf-mobile-market-pill{
    max-width:100%;
    box-sizing:border-box;
  }

  .tf-mobile-market-dock-row{
    gap:6px;
  }

  .tf-mobile-market-pill{
    min-width:0;
  }

  .tf-mobile-market-pill > a{
    min-width:0;
  }

  /* Floating tools are never allowed to be clipped by bottom navigation. */
  .tf-mobile-market-dock,
  .tf-mobile-market-dock-row,
  .tf-mobile-market-pill{
    overflow:visible;
  }

  .tf-mobile-tools-dock-toggle{
    flex:0 0 auto;
    margin:0;
  }
}

/* Small phones */
@media(max-width:390px){
  .site-header .mobile-account-button,
  .site-header .mobile-menu-toggle,
  .site-header .tf-mobile-header-cart{
    width:41px;
    min-width:41px;
    max-width:41px;
    height:41px;
    min-height:41px;
    max-height:41px;
    border-radius:11px;
  }

  .tf-mobile-market-dock-row{
    gap:4px;
  }
}

/* ---------- Shared content spacing guard ---------- */
@media(max-width:767px){
  main,
  .site-main,
  .page-content{
    min-width:0;
    max-width:100%;
  }

  img,
  video,
  iframe{
    max-width:100%;
  }
}

/* Ownership rule:
   Do not define page-specific hero/category/product grids here.
   This file owns shared shell geometry only. */