:root{
  --bg:#ffffff;
  --page:#f6f7fb;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#5b677a;
  --line:rgba(2,6,23,.10);
  --primary:#b31212;
  --primary-2:#8e0f0f;
  --good:#16a34a;
  --danger:#dc2626;
  --warning:#d97706;
  --shadow:0 18px 44px rgba(2,6,23,.10);
  --shadow2:0 10px 24px rgba(2,6,23,.08);
  --shadowTop:0 12px 24px rgba(2,6,23,.10);
  --radius:18px;
  --radius2:14px;
  --pad:16px;
  --max:1200px;
  --topbar-h:132px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
@media (min-width: 1440px){
  :root{--max:1400px}
}
@media (min-width: 1700px){
  :root{--max:1600px}
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(179,18,18,.10), transparent 60%),
    radial-gradient(720px 320px at 90% 10%, rgba(2,6,23,.06), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--page));
}

/* iOS notch safe areas (sticky header stays in normal flow) */
@supports (padding: max(0px)){
  .topbar{padding-top:env(safe-area-inset-top)}
}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.container{max-width:var(--max); margin:0 auto; padding:22px 16px 20px}
.muted{color:var(--muted)}
.row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  left: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.topbar .inner{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 16px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"brand search actions";
  gap:12px;
  align-items:center;
}
.brand{grid-area:brand; display:flex; align-items:center; padding-left:0}
.logoCard{
  display:flex;
  align-items:center;
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  gap:0;
}
.logoMobile{display:none}
.logoRect{height:108px; width:auto}

.navSearch{
  grid-area:search;
  justify-self:start;
  width:min(760px, 100%);
  min-width:280px;
  margin-left:12px;
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 18px rgba(2,6,23,.05);
}
.search input{
  width:100%;
  background:transparent;
    border:0;
    outline:none;
  }
  .search-results-overlay {
    position: absolute;
    top: 100%; /* Position below the search input */
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius2);
    box-shadow: var(--shadow);
    z-index: 1000; /* Above other content, below dialogs */
    max-height: 400px;
    overflow-y: auto;
    display: none; /* Hidden by default */
    padding: 10px;
  }

  .search-results-overlay .mini-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--text);
    border-radius: 8px;
    transition: background 0.2s;
  }

  .search-results-overlay .mini-search-item:hover {
    background: var(--gray-50);
  }

  .search-results-overlay .mini-search-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--line);
    flex-shrink: 0;
  }

  .search-results-overlay .mini-search-item .info {
    flex-grow: 1;
  }

  .search-results-overlay .mini-search-item .name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
  }

  .search-results-overlay .mini-search-item .price {
    font-size: 13px;
    color: var(--good);
    font-weight: 700;
  }
  .search-results-overlay .mini-search-item.muted {
  border:0;
  outline:none;
}
.icon{color:#7a8597; flex:0 0 auto}
  .mini-search-view-all {
    display: block;
    text-align: center;
    padding: 10px;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    border-top: 1px solid var(--line);
    transition: background 0.2s;
  }
  .mini-search-view-all:hover {
    background: var(--primary-light);
  }

.navActions{
  grid-area:actions;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  justify-self:end;
}
.actionCard{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  flex-wrap:wrap;
}
.actionCard .btn{
  box-shadow:none;
  background:transparent;
}
.actionCard .btn:hover{box-shadow:none}
.actionCard .btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary-2))}

.btn{
  border: 1px solid rgba(2, 6, 23, 0.08);
  background: #ffffff;
  padding: 10px 16px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(2,6,23,.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn:hover{
  transform:translateY(-1px);
  background: #f8fafc;
  border-color: rgba(2,6,23,.15);
  box-shadow: 0 8px 20px rgba(2,6,23,.08);
}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn.primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color:rgba(179,18,18,.35);
  color:#fff;
  box-shadow:0 14px 30px rgba(179,18,18,.18);
}
.btn.primary .icon{color:#fff}
.btn.good{
  background:linear-gradient(135deg, rgba(22,163,74,.95), rgba(22,163,74,.72));
  border-color:rgba(22,163,74,.35);
  color:#fff;
}
.btn.danger{
  background:linear-gradient(135deg, rgba(220,38,38,.95), rgba(220,38,38,.70));
  border-color:rgba(220,38,38,.35);
  color:#fff;
}
.btn.small{padding:8px 10px;border-radius:10px;font-size:13px}
.count{
  min-width:28px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-weight:800;
  font-size:12px;
}

.hero{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  margin:10px 0 18px;
  align-items:stretch;
}
.heroLeft{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:
    radial-gradient(700px 220px at 0% 0%, rgba(179,18,18,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:var(--shadow2);
}
.eyebrow{
  font-size:12px;
  letter-spacing:.35px;
  color:rgba(179,18,18,.92);
  font-weight:800;
  text-transform:uppercase;
}
.heroLeft h1{
  font-size:30px;
  line-height:1.15;
  margin:10px 0 10px;
  letter-spacing:-.3px;
}
.heroLeft p{margin:0; max-width:62ch}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(179,18,18,.16);
  background:rgba(179,18,18,.06);
  color:rgba(179,18,18,.92);
  font-weight:700;
  font-size:12px;
}
.lastOrder{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(2,6,23,.18);
  background:rgba(255,255,255,.72);
  min-height:42px;
  display:flex;
  align-items:center;
}
.lastOrder a{color:var(--primary); font-weight:800; text-decoration:none}
.lastOrder a:hover{text-decoration:underline}

.heroRight{display:flex}
.heroCard{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  box-shadow:var(--shadow2);
  width:100%;
}
.heroCardHead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.heroCardHead b{font-size:14px}

.categoryStrip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:6px 2px 2px;
  margin:6px 0 16px;
}
.categoryItem{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  border-radius:16px;
  padding:12px 12px 14px;
  cursor:pointer;
  flex:0 0 auto;
  min-width:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.categoryItem:hover{
  transform: translateY(-1px);
  border-color: rgba(179,18,18,.20);
  box-shadow:0 14px 30px rgba(2,6,23,.10);
}
.catImg{
  width:44px;
  height:44px;
  background:#fff;
  border-radius:12px;
  padding:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.catImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.25);
  transform-origin:center;
  display:block;
}
.catImg.pipesZoom img{transform: scale(1.55)}
.catImg.pipesZoom{
  width:54px;
  height:54px;
  border-radius:14px;
  padding:7px;
}
.categoryItem span{
  font-size:15px;
  font-weight:800;
  color:var(--muted);
}
@media (min-width: 980px){
  .categoryStrip{overflow:visible; flex-wrap:wrap}
  .categoryItem{flex:1 1 0}
}

.bannerCarousel{margin:2px 0 18px}
.bannerViewport{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow2);
}
.bannerTrack{
  display:flex;
  width:100%;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.bannerTrack::-webkit-scrollbar{display:none}
.bannerSlide{
  flex:0 0 100%;
  scroll-snap-align:start;
  text-decoration:none;
  color:inherit;
}
.bannerCard{
  min-height:132px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.bannerText .tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.25px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.18);
  color:#fff;
}
.bannerText .title{
  margin-top:10px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:-.25px;
  color:#fff;
}
.bannerText .sub{
  margin-top:6px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.92);
}
.bannerBadge{
  flex:0 0 auto;
  width:96px;
  height:96px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 16px 34px rgba(2,6,23,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.05;
}
.bannerBadge .badgeTop{font-size:11px; font-weight:1000; color:rgba(179,18,18,.95); letter-spacing:.25px}
.bannerBadge .badgeBig{font-size:30px; font-weight:1000; color:var(--text); margin-top:4px}
.bannerBadge .badgeBottom{font-size:11px; font-weight:1000; color:rgba(179,18,18,.95); margin-top:2px}
.bannerPill{
  flex:0 0 auto;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(255,255,255,.65);
  font-weight:1000;
  box-shadow:0 14px 30px rgba(2,6,23,.14);
}
.bannerDots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}
.bannerDots .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.18);
  background:rgba(2,6,23,.10);
  cursor:pointer;
  padding:0;
}
.bannerDots .dot.is-active{
  width:22px;
  background:rgba(179,18,18,.85);
  border-color:rgba(179,18,18,.45);
}
.bannerSlide.b1 .bannerCard{
  background:
    radial-gradient(540px 220px at 12% 0%, rgba(255,255,255,.20), transparent 62%),
    linear-gradient(135deg, rgba(179,18,18,.96), rgba(142,15,15,.92));
}
.bannerSlide.b2 .bannerCard{
  background:
    radial-gradient(540px 220px at 12% 0%, rgba(255,255,255,.20), transparent 62%),
    linear-gradient(135deg, rgba(2,132,199,.92), rgba(30,64,175,.92));
}
.bannerSlide.b3 .bannerCard{
  background:
    radial-gradient(540px 220px at 12% 0%, rgba(255,255,255,.20), transparent 62%),
    linear-gradient(135deg, rgba(22,163,74,.92), rgba(21,128,61,.92));
}
@media (max-width: 520px){
  .bannerCard{padding:14px; min-height:124px}
  .bannerText .title{font-size:18px}
  .bannerBadge{width:86px;height:86px;border-radius:20px}
}

.topCatsPanel{margin:0 0 18px}
.topCatsGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.topCatCard{
  appearance:none;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.96);
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.topCatCard:hover{
  transform: translateY(-1px);
  border-color: rgba(179,18,18,.20);
  box-shadow:0 14px 30px rgba(2,6,23,.10);
}
.topCatCard .catImg{width:54px; height:54px}
.topCatText{display:flex; flex-direction:column; gap:4px; min-width:0}
.topCatText b{font-size:14px; letter-spacing:.1px}
.topCatText span{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 1100px){.topCatsGrid{grid-template-columns:repeat(3, 1fr)}}
@media (max-width: 780px){.topCatsGrid{grid-template-columns:repeat(2, 1fr); gap:14px}}
@media (max-width: 520px){
  .topCatsGrid{grid-template-columns:repeat(2, 1fr); gap:14px}
  .topCatCard{padding:14px; min-height:88px}
  .topCatCard .catImg{width:58px; height:58px}
  .topCatText b{font-size:15px}
  .topCatText span{white-space:normal}
}

.dealsPanel{margin:0 0 18px}

.recommendedPanel{margin:0 0 18px}
.cardsScroller{
  display:none;
}
.cardsScroller::-webkit-scrollbar{display:none}
.cardsScroller .product{
  flex:0 0 220px;
  min-height:270px;
  scroll-snap-align:start;
}
.cardsScroller .product .img{
  position:relative;
  background:#fff;
}
.cardsScroller .product .img img{
  object-fit:contain;
  padding:12px;
  background:#fff;
}
@media (max-width: 520px){.cardsScroller .product{flex-basis:86vw}}
.soldOut{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(2,6,23,.14);
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.25px;
  color:var(--danger);
}

.bestOffersPanel{margin:0 0 18px}
.bestOfferGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
@media (max-width: 1100px){.bestOfferGrid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 620px){.bestOfferGrid{grid-template-columns:repeat(1, 1fr)}}
.bestOfferCard{
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:18px 18px;
  min-height:160px;
  border-radius:var(--radius);
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.bestOfferCard:hover{
  transform: translateY(-2px);
  border-color: rgba(2,6,23,.16);
  box-shadow:0 16px 34px rgba(2,6,23,.10);
}
.bestOfferText{display:flex; flex-direction:column; gap:8px; min-width:0}
.bestOfferText .kicker{
  color:#2ea500;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.35px;
}
.bestOfferText .title{
  font-weight:1000;
  letter-spacing:.2px;
  font-size:26px;
  line-height:1.05;
}
.bestOfferText .sub{
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
.bestOfferText .cta{
  margin-top:2px;
  display:inline-flex;
  align-self:flex-start;
  background:#ff6a00;
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.25px;
}
.bestOfferMedia{
  flex:0 0 auto;
  width:140px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bestOfferMedia img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.promoBannerPanel{margin:0 0 18px}
.promoBannerGrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
@media (max-width: 1100px){.promoBannerGrid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 620px){.promoBannerGrid{grid-template-columns:repeat(1, 1fr)}}
.promoBanner{
  border:0;
  padding:0;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:0 12px 26px rgba(2,6,23,.10);
  cursor:pointer;
  display:flex;
  align-items:stretch;
  min-height:150px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.promoBanner:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(2,6,23,.14)}
.promoBanner .promoText{
  flex:1 1 auto;
  padding:18px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-width:0;
}
.promoBanner .promoText .line1{
  font-weight:1000;
  letter-spacing:.3px;
  font-size:12px;
  opacity:.95;
}
.promoBanner .promoText .line2{
  font-weight:1000;
  letter-spacing:.2px;
  font-size:22px;
  line-height:1.05;
}
.promoBanner .promoText .line3{
  font-weight:900;
  font-size:14px;
  opacity:.95;
}
.promoBanner .promoText .pill{
  margin-top:6px;
  display:inline-flex;
  align-self:flex-start;
  padding:9px 11px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  font-size:12px;
}
.promoBanner .promoMedia{
  flex:0 0 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 14px;
}
.promoBanner .promoMedia img{
  width:100%;
  height:100%;
  max-height:120px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
@media (max-width: 620px){
  .promoBanner .promoMedia{flex-basis:150px}
}
.promoBanner.b-orange{
  background:linear-gradient(135deg, rgba(255,132,0,1), rgba(255,77,0,1));
  color:#fff;
}
.promoBanner.b-blue{
  background:linear-gradient(135deg, rgba(0,155,255,1), rgba(52,106,255,1));
  color:#fff;
}
.promoBanner.b-green{
  background:linear-gradient(135deg, rgba(16,185,129,1), rgba(34,197,94,1));
  color:#06210f;
}
.promoBanner.b-green .promoText .pill{
  background:rgba(255,255,255,.28);
  border-color:rgba(255,255,255,.38);
  color:#06210f;
}

.panel{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel .head{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.headMeta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  text-align:right;
}
.catFilter{
  display:flex;
  align-items:center;
  gap:8px;
}
.panel .head b{letter-spacing:.2px}
.panel .body{padding:16px}

.offersGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width: 1100px){.offersGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 780px){.offersGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 520px){.offersGrid{grid-template-columns:repeat(1,1fr)}}

.offerTile{
  width:100%;
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(179,18,18,.26);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(179,18,18,.03));
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  cursor:pointer;
  text-align:left;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height:100px;
}
.offerTile:hover{
  transform:translateY(-2px);
  border-color:rgba(179,18,18,.42);
  box-shadow:0 16px 34px rgba(2,6,23,.10);
}
.offerTile:focus-visible{outline:3px solid rgba(179,18,18,.25); outline-offset:2px}

.offerImg{
  flex:0 0 92px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(2,6,23,.03);
  border:1px solid rgba(2,6,23,.08);
  overflow:hidden;
}
.offerImg img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6px;
}
.offerText{display:flex; flex-direction:column; gap:6px; min-width:0}
.offerOff{
  font-size:12px;
  font-weight:900;
  color:var(--good);
  letter-spacing:.3px;
  text-transform:uppercase;
}
.offerTitle{font-size:15px; font-weight:900; line-height:1.15}

#recommendedGrid,
.recommendedPanel .cards{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
  width:100% !important;
  grid-auto-rows:auto;
}
#recommendedGrid > .product,
.recommendedPanel .cards > .product{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
@media (max-width: 1100px){
  #recommendedGrid,
  .recommendedPanel .cards{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media (max-width: 780px){
  #recommendedGrid,
  .recommendedPanel .cards{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media (max-width: 520px){
  #recommendedGrid,
  .recommendedPanel .cards{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
.recommendedPanel .cards .product{
  min-height:270px;
  width:100% !important;
  margin:0 !important;
  max-width:none !important;
}

.cards{
  display:grid !important; 
  grid-template-columns:repeat(4,1fr) !important; 
  gap:14px !important;
  width:100% !important;
  grid-auto-rows:auto;
}
@media (max-width: 1100px){
  .cards{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media (max-width: 780px){
  .cards{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media (max-width: 520px){
  .cards{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
.cards .product{
  min-height:270px;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}

.dealsCards{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
  width:100% !important;
  grid-auto-rows:auto;
}
.dealsCards .product{
  min-height:270px;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column;
}
@media (max-width: 1100px){
  .dealsCards{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media (max-width: 780px){
  .dealsCards{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }
}
@media (max-width: 520px){
  .dealsCards{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }
}
@media (max-width: 420px){
  .dealsCards{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

.product{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(2,6,23,.10);
  border-radius:var(--radius2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 250px;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.product:hover{
  transform: translateY(-2px);
  border-color: rgba(179,18,18,.22);
  box-shadow:0 16px 34px rgba(2,6,23,.10);
}
.product .img{
  height:200px;
  background: linear-gradient(135deg, rgba(2,6,23,.04), rgba(179,18,18,.05));
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid rgba(2,6,23,.08);
  padding:12px;
}
.product .img img{width:auto; height:auto; max-width:90%; max-height:100%; object-fit:contain}
.product .p{padding:12px}
.product .name{font-weight:800; font-size:14px; margin:0 0 6px}
.product .meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px}
.product .foot{margin-top:auto; padding:12px; display:flex; gap:8px; align-items:center; justify-content:space-between}



.badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background:rgba(2,6,23,.04);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.badge.ok{color:#166534; border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.08)}
.badge.low{color:#92400e; border-color:rgba(217,119,6,.25); background:rgba(217,119,6,.08)}
.badge.out{color:#991b1b; border-color:rgba(220,38,38,.22); background:rgba(220,38,38,.07)}

.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 10px; border-bottom:1px solid rgba(2,6,23,.08); text-align:left; font-size:13px}
.table th{color:var(--muted); font-weight:700}
.table td.right,.table th.right{text-align:right}
.table td.center,.table th.center{text-align:center}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field label{font-size:12px; color:var(--muted); font-weight:700}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(2,6,23,.12);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(179,18,18,.35)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 620px){.split{grid-template-columns:1fr}}

.toast-wrap{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}
.toast{
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.95);
  border-radius:14px;
  padding:12px 12px;
  box-shadow: var(--shadow2);
  min-width: 260px;
}
.toast b{display:block; font-size:13px; margin-bottom:2px}
.toast span{display:block; font-size:12px; color:var(--muted)}

dialog{
  border:1px solid rgba(2,6,23,.12);
  border-radius:18px;
  background:rgba(255,255,255,.98);
  color:var(--text);
  box-shadow: var(--shadow);
  width:min(760px, calc(100vw - 28px));
}
dialog::backdrop{background: rgba(2,6,23,.55)}

.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width: 980px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi .box{
  border:1px solid rgba(2,6,23,.10);
  background:rgba(2,6,23,.03);
  border-radius:14px;
  padding:12px;
}
.kpi .box b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background:rgba(179,18,18,.08);
  color:rgba(179,18,18,.92);
}
.kpi .box b svg{display:block}
.kpi .box span{display:block; font-size:12px; color:var(--muted); margin-top:4px; font-weight:600}

.footer{
  margin-top:18px;
  padding:12px 4px 0;
  font-size:12px;
  text-align:center;
}

.footerPro{
  margin-top:18px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(2,6,23,.08);
  overflow:hidden;
}

.footerFeatures{
  padding:18px 18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
@media (max-width: 980px){.footerFeatures{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 620px){.footerFeatures{grid-template-columns:repeat(1, 1fr)}}
.footerFeature{display:flex; gap:14px; align-items:flex-start}
.footerFeatureIcon{
  width:50px;
  height:50px;
  border-radius:16px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(2,6,23,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
  flex:0 0 auto;
}
.footerFeatureText{min-width:0}
.footerFeatureText b{display:block; font-size:14px; font-weight:1000; letter-spacing:.1px}
.footerFeatureText span{display:block; margin-top:4px; font-size:13px; line-height:1.35}

.footerDividerLine{height:1px; background:var(--line)}

.footerBody{
  padding:18px 18px;
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:22px;
}
@media (max-width: 980px){.footerBody{grid-template-columns:1fr}}
.footerCopy{min-width:0}
.footerHeading{font-weight:1000; font-size:14px; letter-spacing:.1px; margin:0 0 8px}
.footerPara{font-size:13px; line-height:1.65; margin:0 0 16px}
.footerCityList{margin-bottom:0}
.footerSide{display:grid; gap:16px}

.footerCol{min-width:0}
.footerTitle{font-weight:1000; font-size:13px; letter-spacing:.2px; margin-bottom:8px}
.footerText{font-size:13px; line-height:1.45}
.footerLink{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 0;
  color:inherit;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.footerLink:hover{color:var(--primary)}
.footerLink.inline{display:inline-flex; padding:0; font-size:12px}
.footerDivider{height:1px; background:var(--line); margin:12px 0}
.footerPills{display:flex; gap:10px; flex-wrap:wrap}
.pillLink{
  border:1px solid rgba(2,6,23,.12);
  background:rgba(2,6,23,.03);
  color:var(--text);
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pillLink:hover{
  transform:translateY(-1px);
  border-color:rgba(179,18,18,.25);
  background:rgba(179,18,18,.06);
}

.footerBottom{
  padding:14px 18px;
  border-top:1px solid var(--line);
  background:rgba(2,6,23,.02);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footerBottomLinks{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
@media (max-width: 620px){.footerBottom{justify-content:flex-start}}

/* Mobile: keep footer compact so "Quick links" aren't far down */
@media (max-width: 620px){
  .footerPro{margin-top:12px; border-radius:16px}
  .footerFeatures{display:none}
  .footerDividerLine{display:none}
  .footerBody{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:14px 14px;
  }
  .footerCopy{display:none}
  .footerSide{gap:12px}
  .footerTitle{margin-bottom:6px}
  .footerLink{padding:6px 0}
  .footerPills{gap:8px}
  .footerBottom{padding:12px 14px}
}

@media (max-width: 960px){
  .topbar .inner{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand actions"
      "search search";
    align-items:stretch;
  }
  .navSearch{justify-self:stretch; width:100%; margin-left:0}
  .navActions{justify-content:flex-end}
  .navSearch{min-width:0}
  .hero{grid-template-columns:1fr}
  .brand{padding-left:12px}
  .logoRect{height:84px}
}

/* Logo swap for phones / small tablets */
@media (max-width: 768px){
  .logoDesktop{display:none}
  .logoMobile{display:block}
}

/* Small phones: keep header clean and compact */
@media (max-width: 520px){
  .container{padding:16px 12px 16px}

  .topbar .inner{padding:10px 12px; gap:10px}
  .brand{padding-left:0}
  .logoRect.logoMobile{height:92px}
  .logoRect{height:74px}

  .search{padding:8px 10px}
  .search .icon{width:16px; height:16px}
  .search input{font-size:14px}

  /* Avoid ugly wrapping: allow horizontal scroll for actions */
  .actionCard{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    gap:8px;
    padding:6px;
  }
  .actionCard::-webkit-scrollbar{display:none}
  .actionCard{scrollbar-width:none}

  .btn{padding:9px 10px; border-radius:12px; font-size:13px}
  .btn.small{padding:7px 9px; font-size:12px}
  .count{min-width:26px; height:20px; padding:0 7px}

  .categoryStrip{margin:6px 0 14px}
  .categoryItem{min-width:96px; padding:10px 10px 12px; border-radius:14px}
  .catImg{width:40px; height:40px; border-radius:12px}
  .catImg.pipesZoom{width:46px; height:46px; border-radius:14px}
  .categoryItem span{font-size:14px}
}

@media (max-width: 380px){
  .logoRect.logoMobile{height:86px}
  .logoRect{height:66px}
  .btn{padding:8px 9px}
  .categoryItem{min-width:90px}
}

.print-only{display:none}
@media print{
  body{background:#fff;color:#000}
  .no-print{display:none !important}
  .print-only{display:block}
  .panel{box-shadow:none;border:0}
}

/* ========== PROFESSIONAL MOBILE NAVIGATION ========== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  box-shadow: 0 -10px 25px -5px rgba(2, 6, 23, 0.05);
  z-index: 99999;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  user-select: none;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mobile-nav-item.active {
  color: var(--primary);
}

.mobile-nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

.mobile-nav-item.active svg {
  transform: translateY(-2px);
}

.mobile-nav-item::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 4px 4px;
  transition: width 0.3s ease;
}

.mobile-nav-item.active::after {
  width: 20px;
}

.mobile-nav-item .count {
  position: absolute;
  top: -6px;
  right: calc(50% - 18px);
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  height: 16px;
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  font-weight: 800;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 980px) {
  .mobile-nav {
    display: grid;
  }
  body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom));
  }
}