/* SHARPI Visual Polish — safe UI layer (front page only) */
:root{
  --sharpi-orange:#f59a17;
  --sharpi-orange-2:#ff8a00;
  --sharpi-text:#101316;
  --sharpi-muted:#6b7280;
  --sharpi-card:#ffffff;
  --sharpi-bg:#f6f7f8;
  --sharpi-border:rgba(16,19,22,.10);
  --sharpi-shadow: 0 12px 30px rgba(16,19,22,.10);
  --sharpi-shadow-soft: 0 10px 26px rgba(16,19,22,.08);
  --sharpi-radius:18px;
}

/* Smooth transition from hero to white */
.hero-section, .sharpi-hero{
  position:relative;
}
.hero-section:after, .sharpi-hero:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:80px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(246,247,248,0), rgba(246,247,248,1));
}

/* Section subtitles inserted by JS */
.sharpi-section-subtitle{
  margin:6px auto 0;
  max-width: 900px;
  font-size: 14px;
  color: var(--sharpi-muted);
  text-align:center;
}

/* Reduce empty white space a bit */
#home-categories{ padding-top: 34px; padding-bottom: 34px; }
#home-popular{ padding-top: 34px; padding-bottom: 34px; }
#home-promos{ padding-top: 34px; padding-bottom: 34px; }

/* Optional alternating backgrounds */
body.sharpi-vp-alt #home-categories{ background: var(--sharpi-bg); }
body.sharpi-vp-alt #home-popular{ background: #fff; }
body.sharpi-vp-alt #home-promos{ background: var(--sharpi-bg); }

/* ==== Category cards: target both mockup grid and existing grid ==== */
#home-categories .sharpi-cat-mockup-grid,
#home-categories .sharpi-categories-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1100px){
  #home-categories .sharpi-cat-mockup-grid,
  #home-categories .sharpi-categories-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 680px){
  #home-categories .sharpi-cat-mockup-grid,
  #home-categories .sharpi-categories-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }
}

/* Card base */
#home-categories .sharpi-cat-mockup-card,
#home-categories a.sharpi-category-card{
  background: var(--sharpi-card);
  border: 1px solid var(--sharpi-border);
  border-radius: var(--sharpi-radius);
  box-shadow: var(--sharpi-shadow-soft);
  padding: 18px 16px 16px;
  text-decoration:none;
  color: var(--sharpi-text);
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 214px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#home-categories .sharpi-cat-mockup-card:hover,
#home-categories a.sharpi-category-card:hover{
  transform: translateY(-1px);
  box-shadow: var(--sharpi-shadow);
  border-color: rgba(245,154,23,.35);
}

/* icon tile (bigger, like mockup) */
#home-categories .sharpi-cat-illus,
#home-categories .category-icon{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(246,247,248,1), rgba(243,244,246,1));
  border: 1px solid rgba(16,19,22,.08);
  height: 92px;
}
#home-categories .sharpi-cat-illus-img,
#home-categories .category-icon img{
  display:block !important;
  max-height: 54px;
  width:auto;
  height:auto;
  filter: drop-shadow(0 6px 12px rgba(16,19,22,.10));
}

/* title */
#home-categories .sharpi-cat-title,
#home-categories .sharpi-category-card__title{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.12;
  margin: 2px 0 8px;
  text-align:center;
}

/* meta (subtitle) */
#home-categories .sharpi-cat-subtitle,
#home-categories .sharpi-category-card__meta{
  margin:0 0 14px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--sharpi-muted);
  text-align:center;
  min-height: 32px;
}

/* CTA button (full width, mockup-like) */
#home-categories .sharpi-cat-cta,
#home-categories .sharpi-category-cta{
  margin-top:auto;
  display:block;
  text-align:center;
  font-weight: 800;
  letter-spacing:.01em;
  color:#fff;
  background: linear-gradient(180deg, var(--sharpi-orange-2), var(--sharpi-orange));
  border-radius: 12px;
  padding: 12px 12px;
  box-shadow: 0 10px 22px rgba(255,138,0,.22);
}

/* Featured card */
#home-categories .is-featured{
  border-color: rgba(255,138,0,.70) !important;
  box-shadow: 0 16px 40px rgba(255,138,0,.22) !important;
  position:relative;
}
#home-categories .is-featured:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--sharpi-radius) + 2px);
  pointer-events:none;
  box-shadow: 0 0 0 2px rgba(255,138,0,.55), 0 18px 46px rgba(255,138,0,.18);
}
#home-categories .is-featured .sharpi-cat-illus,
#home-categories .is-featured .category-icon{
  background: linear-gradient(180deg, rgba(255,214,170,1), rgba(255,170,90,1));
  border-color: rgba(255,138,0,.45);
}

/* Hide legacy tiny corner icon (if injected by other scripts) */
#home-categories .sharpi-category-card__icon{
  display:none !important;
}

/* Product sections: subtle alignment & button polish */
#home-popular .products-grid,
#home-promos .products-grid{
  gap: 18px;
}
#home-popular .product-card,
#home-promos .product-card{
  border-radius: 18px;
  box-shadow: var(--sharpi-shadow-soft);
}

#home-popular .add_to_cart_button,
#home-promos .add_to_cart_button{
  background: linear-gradient(180deg, var(--sharpi-orange-2), var(--sharpi-orange)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow: 0 10px 22px rgba(255,138,0,.18);
}