/* Tokarshop storefront visual polish v5.37
   Storefront-only. Keeps product data/business logic unchanged.
   Carbide insert media assignment remains untouched. */
:root{
  --paper:#fff;
  --ink:#202326;
  --muted:#71777b;
  --line:#e4e7e5;
  --accent:#e56716;
  --accent-soft:#fff2e9;
  --surface:#f6f7f5;
  --surface-2:#f0f2ef;
  --green:#2f6f51;
}
html{background:var(--surface)}
body{background:var(--surface);color:var(--ink)}
.container{width:min(1460px,calc(100% - 48px))}

/* Header: one visual language with the storefront home. */
.topbar{background:#202326;color:#d9ddda}
.topbar .container{min-height:30px}
header{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #e8eae8;
  box-shadow:0 6px 24px rgba(32,35,38,.045);
}
.header-main{gap:24px;padding-block:13px}
.brand{width:238px!important;height:58px!important;flex:0 0 238px!important}
.header-catalog-button{
  height:46px;
  padding:0 16px;
  border-radius:10px;
  background:#202326;
  color:#fff;
  box-shadow:none;
  transition:background .18s ease,transform .18s ease;
}
.header-catalog-button:hover{background:var(--accent);transform:translateY(-1px)}
.search-box{
  height:48px;
  border-radius:11px;
  background:#f4f5f3;
  border-color:#e1e4e1;
  box-shadow:none;
}
.search-box:focus-within{
  background:#fff;
  border-color:#c9ceca;
  box-shadow:0 0 0 4px rgba(229,103,22,.08);
}
.search-suggest{
  border-color:#e2e5e2;
  border-radius:12px;
  box-shadow:0 24px 60px rgba(32,35,38,.14);
}
.favorites-head,.profile-head{
  border-color:#e2e5e2!important;
  background:#fff;
  color:#3a3f3c;
  border-radius:10px!important;
}
.favorites-head:hover,.profile-head:hover{background:#f5f6f4!important}
.favorites-head b,.cart-button b{background:var(--accent)!important;color:#fff}
.cart-button{color:#2d312f}

/* Homepage visual rules intentionally removed from this legacy layer. */

/* Catalog: denser and cleaner, with square photography. */
.catalog-section{width:min(1500px,calc(100% - 48px));padding-top:42px!important}
.section-heading{margin-bottom:20px!important}
.section-heading h2{font-size:30px!important}
.catalog-layout{grid-template-columns:232px minmax(0,1fr)!important;gap:26px!important}
.catalog-toolbar{
  border-radius:11px!important;
  border-color:#e4e7e5!important;
  min-height:50px!important;
  padding:8px 10px!important;
  box-shadow:none!important;
}
.filters{top:118px!important}
.filter-help{display:none}
.category-list button{border-radius:8px!important}
.category-list button.selected{background:var(--accent-soft)!important;color:#a8450c!important}
.catalog-main .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px!important}
.product-card{
  border-radius:12px!important;
  border-color:#e5e8e5!important;
  box-shadow:none!important;
  background:#fff!important;
}
.product-card:hover{
  transform:translateY(-2px)!important;
  border-color:#cfd4d0!important;
  box-shadow:0 14px 30px rgba(32,35,38,.075)!important;
}
.product-image:not(.excluded-media){border-bottom:1px solid #f0f1f0}
.product-image:not(.excluded-media)>img{padding:5.5%!important}
.favorite-button{
  right:8px!important;top:8px!important;width:32px!important;height:32px!important;
  border-color:#e4e7e5!important;color:#555c57!important;box-shadow:0 4px 12px rgba(32,35,38,.06)!important;
}
.favorite-button.active{color:var(--accent)!important;background:#fff7f1!important;border-color:#f0c8ae!important}
.product-body{padding:13px!important}
.product-category{font-size:8.5px!important;margin-bottom:6px!important;color:#929793!important}
.product-title{font-size:12px!important;line-height:1.48!important;min-height:36px!important;margin-bottom:6px!important}
.product-sku{font-size:8.5px!important;color:#9aa09c!important}
.product-tech{font-size:8.5px!important;color:#777d79!important}
.availability{font-size:8.5px!important;margin:9px 0 10px!important}
.availability.available{color:var(--green)!important}
.product-bottom{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 8px!important;
  align-items:center!important;
}
.price{grid-column:1/-1;font-size:15px!important}
.price small{font-size:8px!important}
.card-qty{border-radius:8px!important;border-color:#e2e5e2!important}
.card-qty button{background:#f5f6f4!important}
.add-button{
  min-width:38px;
  min-height:34px;
  justify-content:center;
  border-radius:8px!important;
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
}
.add-button:hover:not(:disabled){background:#cf5810!important;border-color:#cf5810!important;color:#fff!important}
.add-button:disabled{background:#f0f1ef!important;border-color:#e3e5e3!important;color:#a4aaa6!important}

/* Catalog drawer feels like part of the same storefront. */
.catalog-overlay{background:rgba(24,27,25,.34)!important;backdrop-filter:blur(5px)!important}
.catalog-drawer{width:min(840px,90vw)!important;border-radius:0 18px 18px 0;background:#fff!important}
.catalog-drawer-head{height:66px!important;border-color:#eceeec!important}
.catalog-groups{background:#f7f8f6!important;border-color:#eceeec!important}
.catalog-groups button{border-radius:9px!important}
.catalog-groups button:hover,.catalog-groups button.active{background:#fff0e6!important;color:#a8450c!important}
.catalog-children button{border-radius:9px!important;border-color:#e8ebe8!important}
.catalog-children button:hover,.catalog-children button.selected{border-color:#edc3a8!important;background:#fff8f3!important}

/* Responsive density for header and catalog only.
   Homepage layout is owned by src/merchandising.css so legacy showcase rules cannot override it. */
@media(max-width:1240px){
  .brand{width:210px!important;flex-basis:210px!important}
  .catalog-main .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
  .container,.catalog-section{width:calc(100% - 30px)!important}
  .header-main{gap:10px!important}
  .brand{width:184px!important;height:48px!important;flex-basis:184px!important}
  .catalog-layout{grid-template-columns:1fr!important}
  .catalog-main .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  body{padding-bottom:72px}
  .topbar{display:none!important}
  .container,.catalog-section{width:calc(100% - 20px)!important}
  .header-main{padding-block:8px!important}
  .brand{width:148px!important;height:40px!important;flex-basis:148px!important}
  .header-catalog-button{height:40px!important;padding:0 11px!important}
  .header-catalog-button span{display:none}
  .search-box{height:42px!important}
  .catalog-section{padding-top:22px!important}
  .section-heading h2{font-size:25px!important}
  .catalog-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .product-body{padding:10px!important}
  .product-title{font-size:11px!important;line-height:1.4!important;min-height:31px!important}
  .product-category{font-size:7.5px!important}
  .product-tech{display:none}
  .price{font-size:13px!important}
  .card-qty button{width:23px!important;height:28px!important}
  .card-qty input{width:29px!important;height:28px!important}
  .add-button{width:34px!important;min-width:34px!important;min-height:30px!important;padding:6px!important}
  .catalog-drawer{width:100vw!important;border-radius:0!important}
}
@media(max-width:390px){
  .catalog-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-body{padding:9px!important}
  .product-title{font-size:10.5px!important}
}
@media(prefers-reduced-motion:reduce){
  .product-card,.header-catalog-button{transition:none!important}
}

/* Legacy-filter specificity guards follow the responsive catalog column count.
   Filtering must never collapse or expand the mobile grid. */
@media(min-width:1241px){
  body:has(.active-filters) .catalog-main .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:769px) and (max-width:1240px){
  body:has(.active-filters) .catalog-main .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:768px){
  body:has(.active-filters) .catalog-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}