body.home #ss-front h1.ss-sec-title { letter-spacing: -.022em !important; }
/* ════════════════════════════════════════════════════════════════════
   Special Sarv — FRONT PAGE STYLES  v13.0  (NEW UI ADDITIONS)
   ──────────────────────────────────────────────────────────────────
   Paste this block at the VERY BOTTOM of front-page-styles.css
   (or replace the whole file — keep the old v11 content above).
   Contains styles for new sections:
     • Category pill bar (dynamic Woo categories)
     • Our Collections carousel (custom uploaded images)
     • Product cards (ss-pcard)
     • Trending This Week grid
     • Special Weekly animated promo
     • Gift / Hamper dual promo cards
     • Google-style testimonial marquee
     • FAQ accordion
   The old Video + Instagram carousel styles are untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ── Utility helpers used by the new markup ── */
.ss-fp-container { max-width: 1400px; margin: 0 auto; padding-left: clamp(16px,3vw,28px); padding-right: clamp(16px,3vw,28px); box-sizing: border-box; }
.ss-mt-8  { margin-top: 32px; }
.ss-mt-10 { margin-top: 40px; }
.ss-mt-12 { margin-top: 48px; }
.ss-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ss-sec-eyebrow { font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ss-ink-soft); margin: 0; }
.ss-sec-title { margin: 8px 0 0; font-size: clamp(20px, 3vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.ss-sec-all { font-size: 14px; font-weight: 500; color: var(--ss-ink); white-space: nowrap; text-decoration: none; }
/* ── FAQ ── */
  .ss-faq-wrap { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .ss-faq-wrap { grid-template-columns: 300px 1fr; gap: 60px; } }
.ss-faq-side h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.ss-faq-side p { color: var(--ss-muted); font-size: 14px; line-height: 1.6; margin-top: 12px; }
.ss-faq-side a {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ss-brand); color: var(--ss-on-brand);
    padding: 11px 22px; border-radius: 999px;
    font-size: 14px; font-weight: 500; margin-top: 18px;
    transition: background .2s;
  }
.ss-faq-side a:hover { background: var(--ss-ink-soft); color: var(--ss-on-ink-soft); }
.ss-faq-list { border-top: 1px solid var(--ss-cream); }
.ss-faq-item { border-bottom: 1px solid var(--ss-cream); }
.ss-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 22px 4px; font-size: 15px; font-weight: 500; color: var(--ss-ink);
    cursor: pointer; list-style: none;
  }
.ss-faq-item summary::-webkit-details-marker { display: none; }
.ss-faq-item .ss-faq-plus {
    width: 22px; height: 22px; position: relative; flex-shrink: 0;
    transition: transform .25s;
  }
.ss-faq-item .ss-faq-plus::before,
  .ss-faq-item .ss-faq-plus::after {
    content: ""; position: absolute; background: var(--ss-ink);
    left: 50%; top: 50%; transform: translate(-50%,-50%);
  }
.ss-faq-item .ss-faq-plus::before { width: 14px; height: 2px; }
.ss-faq-item .ss-faq-plus::after  { width: 2px; height: 14px; transition: transform .25s; }
.ss-faq-item[open] .ss-faq-plus::after { transform: translate(-50%,-50%) scaleY(0); }
.ss-faq-item .ss-faq-body {
    padding: 0 4px 22px; color: var(--ss-muted); font-size: 14px; line-height: 1.65; max-width: 640px;
  }
/* ── Trending This Week ── */
  .ss-tr-wrap { background: var(--ss-cream); border-radius: 28px; padding: 32px 20px; }
@media (min-width: 768px) { .ss-tr-wrap { padding: 44px 40px; } }
.ss-tr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
.ss-tr-title { font-size: clamp(22px, 3vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.ss-tr-all { font-size: 14px; font-weight: 500; color: var(--ss-ink); display: inline-flex; align-items: center; gap: 4px; }
.ss-tr-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .ss-tr-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .ss-tr-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ss-tr-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--ss-white); border-radius: 16px; padding: 14px 16px;
    transition: transform .2s, box-shadow .2s;
  }
.ss-tr-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ss-ink) 8%, transparent); }
.ss-tr-img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; background: var(--ss-cream); overflow: hidden; display:grid; place-items:center; }
.ss-tr-img img { width: 100%; height: 100%; object-fit: cover; }
.ss-tr-mid { flex: 1 1 auto; min-width: 0; }
.ss-tr-name { font-size: 14px; font-weight: 500; color: var(--ss-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.ss-tr-price { margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--ss-ink); }
.ss-tr-price .old { color: var(--ss-ink); font-weight: 500; text-decoration: line-through; margin-left: 6px; }
.ss-tr-price .sale { color: var(--ss-badge-sale); }
.ss-tr-shop {
    flex: 0 0 auto;
    background: var(--ss-cream); color: var(--ss-ink);
    font-size: 14px; font-weight: 500;
    padding: 8px 16px; border-radius: 999px;
    transition: background .2s;
  }
.ss-tr-shop:hover { background: var(--ss-brand); color: var(--ss-on-brand); }
/* Mobile show-more with fade */
  .ss-tr-more-wrap { display: none; margin-top: 14px; text-align: center; position: relative; }
.ss-tr-more-btn {
    background: var(--ss-brand); color: var(--ss-on-brand);
    padding: 12px 28px; border-radius: 999px;
    font-size: 14px; font-weight: 500;
  }
@media (max-width: 639px) {
    .ss-tr-grid.is-collapsed > .ss-tr-card:nth-child(n+4) { display: none; }
    .ss-tr-grid.is-collapsed > .ss-tr-card:nth-child(3) { position: relative; }
    .ss-tr-grid.is-collapsed > .ss-tr-card:nth-child(3)::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 60px;
      background: linear-gradient(to bottom, color-mix(in srgb, var(--ss-cream) 0%, transparent), var(--ss-cream));
      pointer-events: none;
    }
    .ss-tr-more-wrap { display: block; }
  }
/* Global section top-margin — tighten all ss-mt-* */
.ss-mt-8  { margin-top: 24px !important; }
.ss-mt-10 { margin-top: 32px !important; }
.ss-mt-12 { margin-top: 40px !important; }
.ss-native-section > .ss-fp-container { position: relative; }

/* ── Native Ingredients — four editorial photo cards ── */
.ss-native-section {
  --ss-native-bg: #f3f3f3;
  --ss-native-pattern: #075f3e;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 32px;
  padding-block: 44px;
  background: var(--ss-native-bg);
}
.ss-native-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ss-native-pattern);
  opacity: .16;
  pointer-events: none;
  z-index: -1;
}
.ss-native-section > .ss-fp-container { position: relative; }
body.home #ss-front h2.ss-native-title {
  color: var(--ss-ink);
  text-align: center;
  text-wrap: balance;
  margin: 0 0 28px !important;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.ss-native-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.ss-native-tile {
  position: relative;
  flex: 0 1 260px;
  min-width: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 9px;
  background: var(--ss-cream);
  isolation: isolate;
}
.ss-native-tile::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .53) 0%, rgba(0, 0, 0, .2) 34%, transparent 66%);
  content: "";
  pointer-events: none;
}
.ss-native-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-native-caption {
  position: absolute;
  top: 14px;
  right: 12px;
  left: 12px;
  z-index: 1;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .36);
}
.ss-native-progress { display: none; }
.ss-native-progress[hidden] { display: none !important; }
.ss-native-progress__track {
  display: block;
  width: min(148px, 36vw);
  height: 2px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(20, 32, 24, .18);
}
.ss-native-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ss-brand-deep);
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .ss-native-progress__fill { transition: none; } }
@media (max-width: 640px) {
  .ss-native-section { margin-top: 24px; padding-block: 28px; }
  body.home #ss-front h2.ss-native-title { margin-bottom: 20px !important; font-size: 24px; }
  .ss-native-grid {
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    padding-right: 18%;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .ss-native-grid::-webkit-scrollbar { display: none; }
  .ss-native-tile { flex: 0 0 100%; scroll-snap-align: start; }
  .ss-native-grid > .ss-native-tile:only-child { flex-basis: 100%; }
  .ss-native-grid:has(> .ss-native-tile:only-child) { padding-right: 0; }
  .ss-native-progress:not([hidden]) { display: block; margin-top: 12px; }
}