/* Customer storefront homepage: products and active deals only. */
.storefront-home {
  --shop-border: rgba(15, 23, 42, .10);
  --shop-muted: #667085;
  --shop-heading: #101828;
  --shop-surface: #ffffff;
  --shop-soft: #f7f8fa;
  --shop-primary: var(--bs-primary, #0d6efd);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: .5rem 0 3rem;
}

.shop-header {
  align-items: end;
  border-bottom: 1px solid var(--shop-border);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.5rem 0 1.75rem;
}

.shop-header__eyebrow,
.shop-section__eyebrow {
  color: var(--shop-primary);
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

.shop-header h1 {
  color: var(--shop-heading);
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.05;
  margin: 0;
}

.shop-header p {
  color: var(--shop-muted);
  font-size: .95rem;
  margin: .65rem 0 0;
}

.shop-header .btn,
.product-card__button {
  border-radius: .75rem;
  font-weight: 600;
}

.shop-section {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.shop-section__heading {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.shop-section__heading h2 {
  color: var(--shop-heading);
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -.035em;
  margin: 0;
}

.shop-text-link {
  align-items: center;
  color: var(--shop-muted);
  display: inline-flex;
  font-size: .86rem;
  font-weight: 600;
  gap: .4rem;
  text-decoration: none;
}

.shop-text-link:hover { color: var(--shop-primary); }

.deals-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deal-card {
  align-items: flex-start;
  background: var(--shop-surface);
  border: 1px solid var(--shop-border);
  border-radius: 1rem;
  display: flex;
  gap: .9rem;
  padding: 1.15rem;
}

.deal-card__icon {
  align-items: center;
  background: var(--shop-soft);
  border-radius: .75rem;
  color: var(--shop-primary);
  display: flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
}

.deal-card__label {
  color: var(--shop-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.deal-card h3 {
  color: var(--shop-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin: .15rem 0 .35rem;
}

.deal-card p {
  color: var(--shop-muted);
  font-size: .82rem;
  line-height: 1.5;
  margin: 0 0 .35rem;
}

.deal-card small { color: var(--shop-muted); font-size: .72rem; }

.products-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-card {
  background: var(--shop-surface);
  border: 1px solid var(--shop-border);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product-card:hover {
  border-color: rgba(13, 110, 253, .25);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
  transform: translateY(-2px);
}

.product-card__image {
  aspect-ratio: 1 / 1;
  background: var(--shop-soft);
  display: block;
  overflow: hidden;
  position: relative;
}

.product-card__image img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
  width: 100%;
}

.product-card:hover .product-card__image img { transform: scale(1.02); }

.product-card__badge {
  background: #dc3545;
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  left: .7rem;
  padding: .3rem .55rem;
  position: absolute;
  top: .7rem;
  z-index: 2;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: .9rem;
}

.product-card__category {
  color: var(--shop-muted);
  font-size: .68rem;
  margin-bottom: .25rem;
}

.product-card h3 {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .9rem;
}

.product-card h3 a { color: var(--shop-heading); text-decoration: none; }
.product-card h3 a:hover { color: var(--shop-primary); }

.product-card__footer {
  align-items: end;
  display: flex;
  gap: .65rem;
  justify-content: space-between;
  margin-top: auto;
}

.product-card__price { display: flex; flex-direction: column; }
.product-card__price strong { color: var(--shop-heading); font-size: 1rem; }
.product-card__old-price { color: #98a2b3; font-size: .7rem; text-decoration: line-through; }
.product-card__button { font-size: .75rem; padding: .4rem .62rem; }

.shop-empty-state {
  align-items: center;
  background: var(--shop-soft);
  border: 1px dashed var(--shop-border);
  border-radius: 1rem;
  color: var(--shop-muted);
  display: flex;
  flex-direction: column;
  padding: 3rem 1.5rem;
  text-align: center;
}

.shop-empty-state > i { color: var(--shop-primary); font-size: 1.6rem; margin-bottom: .8rem; }
.shop-empty-state h3 { color: var(--shop-heading); font-size: 1.05rem; margin: 0 0 .35rem; }
.shop-empty-state p { margin: 0; }

[data-bs-theme="dark"] .storefront-home {
  --shop-border: rgba(255,255,255,.10);
  --shop-muted: #a1a9b7;
  --shop-heading: #f2f4f7;
  --shop-surface: #171d28;
  --shop-soft: #202836;
}

@media (max-width: 991.98px) {
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deals-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .shop-header { align-items: flex-start; flex-direction: column; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .storefront-home { gap: 2.25rem; }
  .shop-header { padding-top: .75rem; }
  .shop-header h1 { font-size: 2.2rem; }
  .shop-section__heading { align-items: flex-start; }
  .products-grid { gap: .75rem; }
  .product-card__body { padding: .75rem; }
  .product-card__footer { align-items: flex-start; flex-direction: column; }
  .product-card__button { width: 100%; }
}