/* Shared shop homepage (inc/home-shop.php) — Hyla design, accent via CSS variables.
   Shops set --hyla-accent / --filler-accent-strong (Mode filler: #FFAFAF / #C45C5C). */
.hyla-shop-home {
  --sh-accent: var(--hyla-accent, #6b2d45);
  --sh-accent-soft: color-mix(in srgb, var(--sh-accent) 22%, #fff);
  --sh-accent-line: color-mix(in srgb, var(--sh-accent) 45%, #fff);
  --sh-ink: var(--filler-accent-strong, #6b2d45);
  --sh-tile: #fbf8f9;
  --sh-radius: 18px;
}
.hyla-shop-home [id] { scroll-margin-top: 5.5rem; }

/* Hero: Nexus banner in a Hyla card + H1 intro panel */
.hyla-sh-hero { padding: 1rem 0 0.25rem; }
.hyla-sh-hero .wrap,
.hyla-sh-trust .wrap {
  width: var(--max-wide);
  max-width: var(--page-max);
  margin-inline: auto;
  box-sizing: border-box;
}
.hyla-sh-banner { border-radius: var(--sh-radius); overflow: hidden; background: var(--sh-tile); box-shadow: 0 1px 2px rgba(26,20,24,.04), 0 12px 32px rgba(26,20,24,.06); line-height: 0; }
.hyla-sh-banner .df-shop-banner-wrap, .hyla-sh-banner .df-shop-banner { border-radius: inherit; overflow: hidden; }
.hyla-sh-banner img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .hyla-sh-banner img { transition: none; }
  .hyla-sh-banner a:hover img { transform: none; }
}
.hyla-sh-banner a:hover img { transform: scale(1.012); }
.hyla-sh-intro {
  margin-top: 0.85rem; padding: 1.6rem 1.75rem; border-radius: var(--sh-radius);
  background: radial-gradient(120% 120% at 100% 0%, var(--sh-accent-soft), transparent 60%), linear-gradient(135deg, #faf7f8 0%, #f6f1f3 55%, #f3f5f4 100%);
  border: 1px solid rgba(26,20,24,.05);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2.5rem; align-items: center;
}
.hyla-sh-kicker { margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink); }
.hyla-shop-home h1.hyla-home-h1 { margin: 0 0 .55rem; font-size: clamp(1.9rem, 2.9vw, 2.85rem); line-height: 1.05; letter-spacing: -.02em; }
.hyla-sh-lead { margin: 0; max-width: 62ch; color: var(--muted, #6d646a); font-size: 1rem; line-height: 1.65; }
.hyla-sh-intro-cta { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.hyla-sh-intro-cta .btn {
  white-space: nowrap;
  min-height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.1rem;
}
.hyla-sh-intro-cta .btn-ghost { background: #fff; border: 1px solid rgba(26,20,24,.12); color: var(--fg, #1a1418); }
.hyla-sh-intro-cta .btn-ghost:hover { border-color: var(--sh-accent-line); }
.hyla-sh-intro-cta .btn:focus-visible {
  outline: 2px solid var(--sh-ink);
  outline-offset: 3px;
}

/* Trust strip */
.hyla-sh-trust { padding: 1.1rem 0 .4rem; }
.hyla-sh-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.hyla-sh-trust-item { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 14px; background: #fff; border: 1px solid rgba(26,20,24,.07); min-height: 0; }
.hyla-sh-trust-ico { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--sh-accent-soft); color: var(--sh-ink); }
.hyla-sh-trust-ico svg { width: 1.15rem; height: 1.15rem; }
.hyla-sh-trust-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hyla-sh-trust-copy strong { font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
.hyla-sh-trust-copy span { font-size: .78rem; line-height: 1.45; color: var(--muted, #6d646a); }

/* Section leads */
.hyla-shop-home .hyla-sh-sec-lead {
  margin: -.35rem 0 1rem;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted, #6d646a);
}

/* Category tiles (Hyla „needs“ cards) */
.hyla-sh-cats .hyla-area-grid.hyla-sh-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.hyla-sh-cats .hyla-area-item {
  padding: 1.1rem .75rem 1rem; background: var(--sh-tile); border: 1px solid rgba(26,20,24,.07); border-radius: var(--sh-radius); gap: .5rem;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hyla-sh-cats .hyla-area-item { transition: none; }
  .hyla-sh-cats .hyla-area-item:hover { transform: none; }
}
.hyla-sh-cats .hyla-area-item:hover, .hyla-sh-cats .hyla-area-item:focus-visible { background: #fff; border-color: var(--sh-accent-line); transform: translateY(-1px); color: var(--fg); }
.hyla-sh-cats .hyla-area-item:focus-visible {
  outline: 2px solid var(--sh-ink);
  outline-offset: 3px;
}
.hyla-sh-cats .hyla-area-mark { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; border: 1px solid var(--sh-accent-line); color: var(--sh-ink); }
.hyla-sh-cats .hyla-area-mark svg { width: 1.35rem; height: 1.35rem; }
.hyla-sh-cats .hyla-area-name { font-weight: 650; font-size: .92rem; line-height: 1.3; }
.hyla-sh-count { font-size: .74rem; color: var(--muted, #6d646a); }
.hyla-shop-home .hyla-areas-sec .hyla-area-mark { color: var(--sh-ink); }
.hyla-shop-home .hyla-area-more a, .hyla-shop-home .hyla-home-text a, .hyla-shop-home .hyla-service-link, .hyla-shop-home .section-head a { color: var(--sh-ink) !important; }
.hyla-shop-home .hyla-home-text a { text-decoration: underline; text-decoration-color: var(--sh-accent-line); text-underline-offset: 3px; }
.hyla-shop-home .hyla-rail-arrow {
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.hyla-shop-home .hyla-rail-arrow:hover { border-color: var(--sh-accent-line); color: var(--sh-ink); }
.hyla-shop-home .hyla-rail-arrow:focus-visible {
  outline: 2px solid var(--sh-ink);
  outline-offset: 2px;
}
.hyla-shop-home .hyla-clinic-faq-item[open] summary, .hyla-shop-home .hyla-clinic-faq-item summary:hover { color: var(--sh-ink); }
.hyla-shop-home .hyla-clinic-faq-item summary:focus-visible {
  outline: 2px solid var(--sh-ink);
  outline-offset: 2px;
}
.hyla-shop-home .hyla-clinic-faq-item p a,
.hyla-shop-home .hyla-clinic-faq-a a { color: var(--sh-ink); }
.hyla-shop-home .hyla-clinic-faq-a { margin: 0; }
.hyla-shop-home .hyla-clinic-faq-a p { margin: 0 0 .65rem; font-size: 1rem; line-height: 1.6; }
.hyla-shop-home .hyla-clinic-faq-a p:last-child { margin-bottom: 0; }
.hyla-shop-home .hyla-home-faq .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* SEO text block: readable column ~65–75ch */
.hyla-sh-text .wrap { max-width: min(var(--page-max), 42rem); }
.hyla-sh-text p { font-size: 1rem; line-height: 1.7; }
.hyla-sh-text h3 {
  margin: 1.35rem 0 .55rem;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* Brand tiles with category images */
.hyla-sh-brands .hyla-brand-tile img { object-fit: contain; max-height: 3.4rem; width: auto; max-width: 100%; }

/* Blog cards */
.hyla-sh-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hyla-sh-post { display: flex; flex-direction: column; border-radius: var(--sh-radius); overflow: hidden; background: #fff; border: 1px solid rgba(26,20,24,.07); }
.hyla-sh-post-media { display: block; aspect-ratio: 16 / 9; background: var(--sh-tile); overflow: hidden; }
.hyla-sh-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hyla-sh-post-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; }
.hyla-sh-post-body time { font-size: .72rem; color: var(--muted, #6d646a); letter-spacing: .02em; }
.hyla-sh-post-body h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.hyla-sh-post-body h3 a { color: inherit; text-decoration: none; }
.hyla-sh-post-body h3 a:focus-visible {
  outline: 2px solid var(--sh-ink);
  outline-offset: 2px;
}
.hyla-sh-post-body p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted, #6d646a); }

/* Product rails: peek next card on narrow viewports */
.hyla-shop-home .hyla-prod-rail {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hyla-shop-home .hyla-prod-rail > .tile {
  scroll-snap-align: start;
}

/* Tablet 768–1099 */
@media (max-width: 1099px) {
  .hyla-sh-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hyla-sh-intro { grid-template-columns: 1fr; gap: 1rem; }
  .hyla-sh-intro-cta { justify-content: flex-start; }
  .hyla-sh-areas .hyla-area-grid.is-compact,
  .hyla-sh-areas .hyla-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hyla-sh-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrow tablet / large phone: keep cats at 4 when space allows, drop to 2 when tight */
@media (max-width: 899px) {
  .hyla-sh-hero { padding-top: .6rem; }
  .hyla-sh-intro { padding: 1.2rem 1.1rem; }
  .hyla-sh-intro-cta .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
  .hyla-shop-home h1.hyla-home-h1 { font-size: 1.85rem; }
  .hyla-sh-cats .hyla-area-grid.hyla-sh-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

/* Mobile ≤767 */
@media (max-width: 767px) {
  .hyla-sh-intro { grid-template-columns: 1fr; }
  .hyla-sh-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .hyla-sh-cats .hyla-area-grid.hyla-sh-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .hyla-sh-areas .hyla-area-grid.is-compact,
  .hyla-sh-areas .hyla-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hyla-sh-post-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: .75rem;
  }
  .hyla-sh-post-grid::-webkit-scrollbar { display: none; }
  .hyla-sh-post { flex: 0 0 82%; scroll-snap-align: start; }
  .hyla-shop-home .hyla-prod-rail > .tile {
    flex: 0 0 min(78%, 16.5rem);
  }
}

/* Very narrow: single-column trust */
@media (max-width: 359px) {
  .hyla-sh-trust-list { grid-template-columns: 1fr; }
}