/* Category-first storefront showcase. Icons by default, names on pointer hover. */
.store-hero-showcase .store-category-showcase-grid{
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:13px;
}
.store-hero-showcase .store-showcase-category{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  min-width:0;
  padding:18px;
  text-align:center;
  color:#80bcff;
  border:1px solid #29425e;
  border-radius:14px;
  background:linear-gradient(155deg,#0b1929 0%,#081523 100%);
  cursor:pointer;
  transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease;
  overflow:hidden;
}
.store-hero-showcase .store-showcase-category::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:35% 0 0;
  background:linear-gradient(180deg,transparent,rgba(3,13,24,.92));
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.store-hero-showcase .store-showcase-category:hover,
.store-hero-showcase .store-showcase-category:focus-visible{
  background:linear-gradient(155deg,#10263d,#081624);
  border-color:#4e8dc3;
  box-shadow:inset 0 0 0 1px rgba(62,137,212,.12);
  transform:translateY(-2px);
}
.store-hero-showcase .store-showcase-category:focus-visible,
.store-category-card:focus-visible{
  outline:2px solid #8bc5ff;
  outline-offset:2px;
}
.store-hero-showcase .store-showcase-category:hover::after,
.store-hero-showcase .store-showcase-category:focus-visible::after{
  opacity:1;
}
.store-hero-showcase .store-showcase-icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:100%;
  pointer-events:none;
  transition:transform .24s ease,color .24s ease;
}
.store-hero-showcase .store-showcase-icon svg{
  display:block;
  width:72px;
  height:72px;
  max-width:100%;
  stroke:#64b0ff;
  filter:drop-shadow(0 0 12px rgba(48,137,219,.07));
}
.store-hero-showcase .store-showcase-main .store-showcase-icon svg{
  width:118px;
  height:118px;
}
.store-hero-showcase .store-showcase-category:hover .store-showcase-icon,
.store-hero-showcase .store-showcase-category:focus-visible .store-showcase-icon{
  transform:translateY(-12px) scale(1.05);
}
.store-hero-showcase .store-showcase-name{
  position:absolute;
  z-index:2;
  left:10px;
  right:10px;
  bottom:22px;
  color:#f4f8fe;
  font-weight:750;
  font-size:14px;
  line-height:1.3;
  text-wrap:balance;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
  overflow-wrap:anywhere;
}
.store-hero-showcase .store-showcase-main .store-showcase-name{
  font-size:18px;
  bottom:26px;
}
.store-hero-showcase .store-showcase-category:is(:hover,:focus-visible) .store-showcase-name{
  opacity:1;
  transform:translateY(0);
}
/* Compact category links below the hero use the same interaction. */
.store-category-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}
.store-category-grid .store-category-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:148px;
  padding:18px 14px 23px;
  text-align:center;
  border:1px solid #273d56;
  border-radius:13px;
  background:linear-gradient(155deg,#0e1d2f,#0a1727);
  color:#7ab8ff;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.store-category-grid .store-category-card::before{
  content:"";
  position:absolute;
  inset:40% 0 0;
  background:linear-gradient(180deg,transparent,rgba(5,14,25,.96));
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.store-category-grid .store-category-card:hover,
.store-category-grid .store-category-card:focus-visible{
  background:linear-gradient(155deg,#14283e,#0a1828);
  border-color:#4e91cf;
  transform:translateY(-3px);
}
.store-category-grid .store-category-card:is(:hover,:focus-visible)::before{opacity:1}
.store-category-grid .store-category-media{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  height:auto;
  margin:0;
  pointer-events:none;
  transition:transform .22s ease;
}
.store-category-grid .store-category-media svg{
  width:65px;
  height:65px;
  color:#79b9ff;
  stroke:currentColor;
  fill:none;
  stroke-width:2.3;
}
.store-category-grid .store-category-card:is(:hover,:focus-visible) .store-category-media{
  transform:translateY(-10px) scale(1.06);
}
.store-category-grid .store-category-name{
  position:absolute;
  z-index:2;
  bottom:12px;
  left:8px;
  right:8px;
  color:#f1f7ff;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .2s ease,transform .2s ease;
  font-weight:700;
  font-size:12px;
  line-height:1.35;
  overflow-wrap:anywhere;
  pointer-events:none;
}
.store-category-grid .store-category-card:is(:hover,:focus-visible) .store-category-name{
  opacity:1;
  transform:translateY(0);
}
@media(max-width:1050px){
  .store-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .store-hero-showcase .store-showcase-category{padding:10px}
  .store-hero-showcase .store-showcase-icon svg{width:62px;height:62px}
  .store-hero-showcase .store-showcase-main .store-showcase-icon svg{width:90px;height:90px}
  .store-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .store-category-grid .store-category-card{min-height:125px;padding:12px 9px 27px}
  .store-category-grid .store-category-media svg{width:59px;height:59px}
}
/* On touch screens there is no hover: show the name so one tap opens the category. */
@media(hover:none){
  .store-hero-showcase .store-showcase-category::after,
  .store-category-grid .store-category-card::before{opacity:1}
  .store-hero-showcase .store-showcase-name,
  .store-category-grid .store-category-name{opacity:1;transform:none}
  .store-hero-showcase .store-showcase-category .store-showcase-icon{transform:translateY(-11px)}
  .store-category-grid .store-category-card .store-category-media{transform:translateY(-8px)}
}
@media(max-width:380px){
  .store-hero-showcase .store-showcase-main .store-showcase-icon svg{width:74px;height:74px}
  .store-hero-showcase .store-showcase-icon svg{width:53px;height:53px}
  .store-hero-showcase .store-showcase-name{font-size:11px;bottom:13px}
  .store-hero-showcase .store-showcase-main .store-showcase-name{font-size:13px;bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .store-hero-showcase .store-showcase-category,
  .store-hero-showcase .store-showcase-icon,
  .store-hero-showcase .store-showcase-name,
  .store-category-grid .store-category-card,
  .store-category-grid .store-category-card::before,
  .store-category-grid .store-category-name,
  .store-category-grid .store-category-media{transition:none}
}