/* =========================================================================
   home-ds.css — Homepage-specific layout styles
   Scoped under .sh (applied to <main> in home.php)
   ========================================================================= */

/* Hero */
.sh .hero { position: relative; overflow: hidden; background: var(--sh-ink-950); color: var(--sh-paper); }
.sh .hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .75; }
.sh .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,16,18,0.92) 0%, rgba(11,16,18,0.78) 35%, rgba(11,16,18,0.35) 70%, rgba(11,16,18,0.15) 100%),
    linear-gradient(180deg, rgba(11,16,18,0.15) 0%, rgba(11,16,18,0.4) 100%);
}
.sh .hero-inner { position: relative; padding: 120px 0 140px; max-width: 640px; }
.sh .hero .sh-eyebrow { color: var(--sh-sand-400); margin-bottom: 20px; display: block; }
.sh .hero h1 {
  font-size: 60px; line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 600; color: var(--sh-white); margin-bottom: 24px;
}
.sh .hero p { font-size: 18px; line-height: 1.55; color: var(--sh-ink-200); max-width: 52ch; margin-bottom: 36px; }
.sh .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.sh .hero-stats { display: flex; gap: 48px; margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.sh .hero-stats .sh-stat-value { color: var(--sh-white); font-size: 36px; }
.sh .hero-stats .sh-stat-label { color: var(--sh-ink-400); }

/* Value row */
.sh .values { padding: 48px 0; border-bottom: 1px solid var(--sh-ink-200); background: var(--sh-white); }
.sh .values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.sh .value-item { display: flex; gap: 14px; align-items: flex-start; }
.sh .value-item svg {
  width: 28px; height: 28px; color: var(--sh-teal-700);
  stroke-width: 1.5; stroke: currentColor; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 28px; margin-top: 2px;
}
.sh .value-item h4 { font-size: 15px; font-weight: 600; color: var(--sh-ink-950); margin: 0 0 4px; }
.sh .value-item p { font-size: 13px; color: var(--sh-ink-600); margin: 0; line-height: 1.5; }

/* Categories */
.sh .cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sh .cat-card {
  position: relative; aspect-ratio: 4/3; border-radius: 6px;
  overflow: hidden; background: var(--sh-ink-200); display: block; text-decoration: none;
}
.sh .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sh-ease); }
.sh .cat-card:hover { text-decoration: none; }
.sh .cat-card:hover img { transform: scale(1.04); }
.sh .cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,16,18,0.55) 100%);
}
.sh .cat-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; color: var(--sh-white); z-index: 1; }
.sh .cat-card-body h3 { font-size: 22px; margin: 0 0 4px; font-weight: 600; letter-spacing: -0.01em; color: var(--sh-white); }
.sh .cat-card-body .meta {
  font-family: var(--sh-font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.sh .cat-card.large { aspect-ratio: auto; height: 100%; grid-row: span 2; }

/* Featured row */
.sh .featured-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.sh .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Wholesale section */
.sh .wholesale { background: var(--sh-ink-50); padding: 80px 0; border-top: 1px solid var(--sh-ink-200); border-bottom: 1px solid var(--sh-ink-200); }
.sh .wholesale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sh .wholesale-img { border-radius: 6px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.sh .wholesale ul { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.sh .wholesale li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--sh-ink-800); }
.sh .wholesale li svg {
  width: 20px; height: 20px; color: var(--sh-teal-700);
  stroke-width: 1.5; stroke: currentColor; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 20px; margin-top: 2px;
}

/* Why us */
.sh .why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--sh-ink-200); border: 1px solid var(--sh-ink-200);
  border-radius: 6px; overflow: hidden;
}
.sh .why-item { background: var(--sh-white); padding: 32px 28px; }
.sh .why-item svg {
  width: 28px; height: 28px; color: var(--sh-teal-700);
  stroke-width: 1.5; stroke: currentColor; fill: none;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; display: block;
}
.sh .why-item h4 { font-size: 17px; font-weight: 600; color: var(--sh-ink-950); margin: 0 0 8px; }
.sh .why-item p { font-size: 14px; color: var(--sh-ink-600); margin: 0; line-height: 1.55; }

/* Testimonials */
.sh .quote { padding: 80px 0; background: var(--sh-paper); }
.sh .quote-inner { max-width: 800px; margin: 0 auto; text-align: center; }

.sh-testimonials { position: relative; min-height: 160px; }
.sh-testimonial {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.7s ease;
  pointer-events: none;
}
.sh-testimonial--active { opacity: 1; pointer-events: auto; position: relative; }

.sh .quote blockquote {
  font-family: var(--sh-font-serif); font-size: 28px; line-height: 1.4;
  color: var(--sh-ink-950); font-weight: 400; font-style: italic;
  margin: 0 0 24px; letter-spacing: -0.005em;
}
.sh .quote cite { font-style: normal; font-family: var(--sh-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink-500); }
.sh .quote cite strong {
  display: block; color: var(--sh-ink-950); font-weight: 500;
  text-transform: none; letter-spacing: -0.01em;
  font-family: var(--sh-font-sans); font-size: 15px; margin-top: 8px;
}

.sh-testimonials__dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 32px;
}
.sh-testimonials__dot {
  all: unset; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sh-ink-200); cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.sh-testimonials__dot--active {
  background: var(--sh-teal-700); transform: scale(1.3);
}

/* Big CTA */
.sh .bigcta { background: var(--sh-ink-950); color: var(--sh-paper); padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.sh .bigcta h2 { font-size: 44px; line-height: 1.1; color: var(--sh-white); margin-bottom: 16px; font-weight: 600; letter-spacing: -0.015em; }
.sh .bigcta p { color: var(--sh-ink-300); max-width: 50ch; margin: 0 auto 32px; font-size: 16px; }
.sh .bigcta-contacts {
  display: flex; justify-content: center; gap: 40px; margin-bottom: 32px;
  font-family: var(--sh-font-mono); font-size: 13px; flex-wrap: wrap;
}
.sh .bigcta-contacts a { color: var(--sh-sand-400); display: flex; align-items: center; gap: 8px; }
.sh .bigcta-contacts a:hover { color: var(--sh-sand-200); text-decoration: none; }
.sh .bigcta-contacts a svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 16px;
}

/* Responsive */
@media (max-width: 1024px) {
  .sh .hero h1 { font-size: 48px; }
  .sh .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .sh .values-grid { grid-template-columns: 1fr 1fr; }
  .sh .why-grid { grid-template-columns: 1fr 1fr; }
  .sh .wholesale-grid { grid-template-columns: 1fr; gap: 32px; }
  .sh .wholesale-img { aspect-ratio: 16/9; }
  .sh .hero-stats { gap: 24px; }
  .sh .bigcta-contacts { flex-direction: column; align-items: center; gap: 16px; }
  .sh .bigcta h2 { font-size: 36px; }
  .sh .cats-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; }
  .sh .cat-card.large { grid-row: auto; }
}

@media (max-width: 640px) {
  .sh .hero-inner { padding: 80px 0 100px; }
  .sh .hero h1 { font-size: 36px; }
  .sh .hero p { font-size: 16px; }
  .sh .product-grid { grid-template-columns: 1fr 1fr; }
  .sh .values-grid { grid-template-columns: 1fr; }
  .sh .why-grid { grid-template-columns: 1fr; }
  .sh .featured-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 480px) {
  .sh .hero-inner { padding: 60px 0 80px; }
  .sh .hero h1 { font-size: 30px; }
  .sh .hero-ctas { flex-direction: column; }
  .sh .hero-ctas .sh-btn { width: 100%; justify-content: center; }
  .sh .hero-stats { gap: 20px; }
  .sh .hero-stats .sh-stat-value { font-size: 28px; }
  .sh .bigcta h2 { font-size: 28px; }
  .sh .bigcta p { font-size: 15px; }
  .sh .quote blockquote { font-size: 22px; }
  .sh .cats-grid { grid-template-columns: 1fr !important; }
  .sh .cat-card.large { grid-row: auto; }
}