/* ============================================================
   SAYOANG — LID 데일리 트릿 상세 (slug lid-daily-treat).
   Native port of the Claude Design export "세이오앙 LID 트릿 브랜드 페이지"
   (export/index.dc.html). Loaded only on that single, from inc/enqueue.php.
   Markup: template-parts/products/dog-lid-daily-treat.php.

   The design's inline styles become the scoped classes below; `style-hover=""`
   attributes become :hover rules; `data-reveal` becomes .ld-rise + an
   IntersectionObserver in lid.js (only hidden once JS runs — no-JS shows all).
   Type = Pretendard (already loaded site-wide by the chrome).
   ============================================================ */

.ld {
  --ld-ink:    #3A2E27;
  --ld-ink-2:  #5E4E44;
  --ld-mute:   #8C7A6E;
  --ld-mute-2: #6E665A;
  --ld-accent: #B96B4E;
  --ld-cream:  #F7EFE4;
  --ld-paper:  #FFFDF9;
  --ld-hero:   #F2E6D9;
  --ld-line:   #E6D8C8;
  --ld-light:  #FFF8F0;
  --ld-orange: #E08A3C;
  --ld-green:  #5F7F2E;
  --ld-hl:     #FBD9A8;
  --ld-shadow: 0 18px 40px rgba(58,46,39,.10);
  --ld-pad:    20px;

  font-family: 'Pretendard Variable', Pretendard, var(--sy-sans, system-ui), sans-serif;
  color: var(--ld-ink);
  background: var(--ld-cream);
  line-height: 1.5;
  overflow-x: clip;               /* clip, not hidden — hidden would make this the sticky nav's scrollport */
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.ld *, .ld *::before, .ld *::after { box-sizing: border-box; }
/* width/height attributes are presentational hints — neutralise the height one. */
.ld img, .ld video { display: block; max-width: 100%; height: auto; }
.ld h1, .ld h2, .ld h3, .ld h4, .ld p, .ld figure, .ld ul, .ld dl, .ld dd { margin: 0; }
.ld ul { padding: 0; list-style: none; }
.ld h1, .ld h2, .ld h3 { word-break: keep-all; overflow-wrap: break-word; }
.ld a { text-decoration: none; color: inherit; }
.ld [id] { scroll-margin-top: 72px; }

.ld .ld-wrap { max-width: 1200px; margin: 0 auto; }
.ld .ld-wrap--1400 { max-width: 1400px; }
.ld .ld-wrap--1080 { max-width: 1080px; }
.ld .ld-wrap--880 { max-width: 880px; }
.ld .ld-wrap--820 { max-width: 820px; }
.ld .ld-stack { display: flex; flex-direction: column; gap: clamp(26px, 3.6vw, 44px); }
.ld .ld-center { align-items: center; }
.ld .ld-pad { padding-left: var(--ld-pad); padding-right: var(--ld-pad); }
.ld .ld-sec { padding: clamp(52px, 7vw, 100px) var(--ld-pad); }

.ld .ld-bg-paper { background: var(--ld-paper); }
.ld .ld-bg-cream { background: var(--ld-cream); }
.ld .ld-bg-white { background: #fff; }
.ld .ld-bg-ivory { background: #FFFDF4; }
.ld .ld-bg-spec  { background: #FFF9F0; }

/* reveal */
.ld[data-ld-js] .ld-rise { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); }
.ld[data-ld-js] .ld-rise.is-in { opacity: 1; transform: none; }

/* headings */
.ld .ld-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ld .ld-head--center { align-items: center; text-align: center; gap: 12px; }
.ld .ld-eyebrow { font-weight: 800; font-size: 12.5px; letter-spacing: .14em; color: var(--ld-accent); }
.ld .ld-eyebrow--green { color: #35592E; }
.ld .ld-h2 { font-weight: 900; letter-spacing: -0.05em; font-size: clamp(26px, 4.2vw, 50px); line-height: 1.22; }
.ld .ld-h2--sm { font-size: clamp(25px, 4vw, 46px); line-height: 1.24; }
.ld .ld-h3 { font-weight: 900; letter-spacing: -0.045em; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.25; }
.ld .ld-sub { font-size: 16px; font-weight: 500; color: var(--ld-ink-2); line-height: 1.75; word-break: keep-all; max-width: 52ch; }
.ld .ld-sub--mute { color: var(--ld-mute-2); font-size: clamp(14.5px, 1.6vw, 17px); }
.ld .ld-c-orange { color: var(--ld-orange); }
.ld .ld-c-green { color: var(--ld-green); }
.ld .ld-stars { color: #F0B341; letter-spacing: 2px; }

/* buttons */
.ld .ld-btn {
  display: inline-block; border-radius: 999px; padding: 16px 30px; font-weight: 800; font-size: 16.5px;
  line-height: 1.2; text-align: center; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ld .ld-btn:hover { transform: translateY(-2px); }
.ld .ld-btn-dark { background: var(--ld-ink); color: var(--ld-light); }
.ld .ld-btn-dark:hover { background: var(--ld-accent); color: var(--ld-light); }
.ld .ld-btn-glass { background: rgba(255,255,255,.75); color: var(--ld-ink); padding: 16px 26px; }
.ld .ld-btn-glass:hover { background: #fff; }
.ld .ld-btn-cream { background: var(--ld-light); color: var(--ld-accent); padding: 16px 32px; }
.ld .ld-btn-cream:hover { background: var(--ld-ink); color: var(--ld-light); }
.ld .ld-btn-line { background: transparent; color: var(--ld-light); border: 2px solid rgba(255,248,240,.7); padding: 14px 26px; }
.ld .ld-btn-line:hover { background: rgba(255,248,240,.14); border-color: var(--ld-light); }

/* ---------- HERO ---------- */
.ld .ld-hero {
  position: relative; background-color: var(--ld-hero);
  background-size: cover; background-position: 72% center; background-repeat: no-repeat;
  padding: clamp(60px, 8vw, 164px) var(--ld-pad) clamp(55px, 7vw, 164px);
}
.ld .ld-hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; max-width: 100%; }
.ld .ld-hero h1 { font-weight: 900; font-size: clamp(34px, 5.4vw, 74px); line-height: 1.16; letter-spacing: -0.055em; text-wrap: pretty; }
.ld .ld-hero h1 em { font-style: normal; color: var(--ld-accent); }
.ld .ld-h1-kicker {
  display: block; margin-bottom: 14px; font-size: clamp(13px, 1.3vw, 15px); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.5; color: var(--ld-ink-2);
}
.ld .ld-hero-lead { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.8; font-weight: 500; max-width: 40ch; color: var(--ld-ink-2); word-break: keep-all; }
.ld .ld-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.ld .ld-scroll { display: inline-flex; align-items: center; gap: 8px; color: var(--ld-mute); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; animation: ldBob 2.4s ease-in-out infinite; }
.ld .ld-scroll span { font-size: 15px; }
@media (min-width: 900px) { .ld .ld-hero-copy { max-width: min(560px, 58%); } }

/* ---------- MARQUEE STRIP ---------- */
.ld .ld-strip { background: var(--ld-ink); color: var(--ld-light); overflow: hidden; padding: 12px 0; }
.ld .ld-strip-track { display: flex; width: max-content; animation: ldMarquee 28s linear infinite; font-weight: 800; font-size: 14.5px; letter-spacing: .06em; }
.ld .ld-strip-set { display: flex; gap: 28px; padding-right: 28px; white-space: nowrap; }

/* ---------- PRODUCT ---------- */
.ld .ld-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.ld .ld-product-photo { border-radius: 28px; overflow: hidden; background: #EADBC8; box-shadow: var(--ld-shadow); }
.ld .ld-product-photo img { width: 100%; height: 100%; object-fit: cover; }
.ld .ld-product-info { background: var(--ld-cream); border-radius: 28px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.ld .ld-info > div { display: grid; grid-template-columns: minmax(96px, 124px) 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ld-line); }
.ld .ld-info > div:last-child { border-bottom: 0; }
.ld .ld-info dt { font-weight: 700; font-size: 13.5px; color: var(--ld-mute); }
.ld .ld-info dd { font-weight: 600; font-size: 15px; word-break: keep-all; }
.ld .ld-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ld .ld-pills span { background: var(--ld-paper); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; }

/* ---------- FOR WHOM ---------- */
.ld .ld-forwhom { background: #FDF4C8; }
.ld .ld-forwhom-sub { font-weight: 900; letter-spacing: -0.045em; font-size: clamp(19px, 3vw, 32px); color: var(--ld-accent); }
.ld .ld-forwhom-list { display: flex; flex-direction: column; gap: 14px; }
.ld .ld-forwhom-list li {
  background: var(--ld-paper); border-radius: 999px; padding: clamp(16px, 2.2vw, 22px) clamp(22px, 3vw, 36px);
  display: flex; gap: 14px; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(58,46,39,.07); transition: transform .22s ease;
  font-size: clamp(14.5px, 1.6vw, 17px); font-weight: 600; line-height: 1.6; word-break: keep-all; text-align: center;
}
.ld .ld-forwhom-list li:hover { transform: translateY(-4px); }
.ld[data-ld-js] .ld-forwhom-list li.ld-rise.is-in:hover { transform: translateY(-4px); }
.ld .ld-check { flex: 0 0 auto; font-weight: 900; font-size: 19px; }
.ld .ld-forwhom-list strong { font-weight: 900; background: linear-gradient(transparent 58%, var(--ld-hl) 58%); }

/* ---------- REVIEW (marquee) ---------- */
.ld .ld-review { background: #EEF2E1; padding-left: 0; padding-right: 0; overflow: hidden; display: flex; flex-direction: column; gap: clamp(24px, 3.4vw, 40px); }
.ld .ld-review-badge {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: var(--ld-paper); border-radius: 999px; padding: 9px 20px; box-shadow: 0 8px 20px rgba(58,46,39,.06);
}
.ld .ld-review-badge .ld-stars { font-size: 16px; }
.ld .ld-review-badge b { font-weight: 900; font-size: 17px; letter-spacing: -0.03em; }
.ld .ld-review-badge span:last-child { font-weight: 600; font-size: 13.5px; color: var(--ld-mute-2); }
.ld .ld-review-rail { overflow: hidden; }
.ld .ld-review-track { display: flex; width: max-content; animation: ldMarquee 140s linear infinite; padding: 6px 0 14px; }
.ld .ld-review-rail:hover .ld-review-track { animation-play-state: paused; }
.ld .ld-review-set { display: flex; gap: 22px; padding-right: 22px; }
.ld .ld-rv {
  width: clamp(300px, 84vw, 720px); background: var(--ld-paper); border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); box-shadow: 0 12px 30px rgba(58,46,39,.08);
}
.ld .ld-rv img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.ld .ld-rv-body { padding: clamp(22px, 3vw, 40px) clamp(20px, 2.8vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.ld .ld-rv-body .ld-stars { font-size: 15px; }
.ld .ld-rv-text { font-size: clamp(14px, 1.4vw, 16px); line-height: 1.8; font-weight: 500; color: var(--ld-ink); word-break: keep-all; }
.ld .ld-rv-text b { font-weight: 800; background: linear-gradient(transparent 60%, var(--ld-hl) 60%); }
.ld .ld-rv-rule { height: 1px; background: var(--ld-line); margin-top: 6px; }
.ld .ld-rv-name { font-size: 13.5px; font-weight: 600; color: var(--ld-mute-2); }
.ld .ld-review-more { text-align: center; }
.ld .ld-review-more a { display: inline-block; font-weight: 800; font-size: 14.5px; color: var(--ld-ink); border-bottom: 2px solid var(--ld-ink); padding-bottom: 2px; }
.ld .ld-review-more a:hover { color: var(--ld-accent); border-color: var(--ld-accent); }

/* ---------- WHY + POINTS ---------- */
.ld .ld-why { background: var(--ld-paper); padding: clamp(52px, 7vw, 100px) var(--ld-pad) 0; }
.ld .ld-point { padding: clamp(48px, 6vw, 88px) var(--ld-pad); }
.ld .ld-point--first { padding-top: clamp(34px, 4.6vw, 64px); }
.ld .ld-point-in { display: flex; flex-direction: column; gap: clamp(20px, 2.8vw, 30px); align-items: center; }
.ld .ld-point-head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.ld .ld-point-badge { color: var(--ld-light); border-radius: 999px; padding: 9px 22px; font-weight: 900; font-size: 14px; letter-spacing: .1em; }
.ld .ld-orange { background: #F0A868; }
.ld .ld-green { background: #A8BE7C; }
.ld .ld-define {
  width: 100%; max-width: 640px; background: #E6F0E4; border-radius: 22px; padding: clamp(20px, 2.8vw, 30px);
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
}
.ld .ld-define-t { font-weight: 900; font-size: clamp(16px, 1.9vw, 20px); letter-spacing: -0.03em; }
.ld .ld-define-t span { border-bottom: 3px solid #8FA35A; }
.ld .ld-define p { font-size: clamp(14px, 1.6vw, 16px); line-height: 1.8; font-weight: 500; color: #4A5A3E; word-break: keep-all; max-width: 36ch; }
.ld .ld-define strong { color: #2F4426; font-weight: 900; }
.ld .ld-tags { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ld .ld-tags span { background: #F2EDE4; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 14px; color: var(--ld-ink-2); }
.ld .ld-tags--dark span { background: #EDE6DA; }
.ld .ld-media { position: relative; width: 100%; border-radius: 28px; overflow: hidden; box-shadow: var(--ld-shadow); }
.ld .ld-media img, .ld .ld-media video { width: 100%; }
.ld .ld-media video { background: #EADBC8; }
.ld .ld-callout { width: 100%; border-radius: 20px; padding: clamp(18px, 2.4vw, 26px); text-align: center; }
.ld .ld-callout p { font-size: clamp(15px, 1.8vw, 19px); line-height: 1.7; font-weight: 800; word-break: keep-all; }
.ld .ld-callout--yellow { background: #F0C64E; }
.ld .ld-callout--yellow p { color: #4A3A16; }
.ld .ld-callout--white { background: #fff; }
.ld .ld-callout--peach { background: #FFEED0; display: flex; flex-direction: column; gap: 6px; }
.ld .ld-callout--sage { background: #DCE7CE; }
.ld .ld-callout--sage p { color: #2F4426; }
.ld .ld-callout mark { background: linear-gradient(transparent 55%, var(--ld-hl) 55%); color: inherit; }
.ld .ld-callout--sage mark { background: linear-gradient(transparent 55%, #B9CE96 55%); }
.ld .ld-callout .ld-callout-big { font-size: clamp(16px, 2vw, 21px); line-height: 1.55; font-weight: 900; }
.ld .ld-callout .ld-callout-small { font-size: clamp(13.5px, 1.6vw, 16px); font-weight: 600; color: var(--ld-ink-2); }
.ld .ld-nose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; width: 100%; }
.ld .ld-nose { background: var(--ld-paper); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 24px rgba(58,46,39,.07); transition: transform .22s ease; }
.ld .ld-nose:hover { transform: translateY(-6px); }
.ld .ld-nose-n { font-weight: 900; font-size: 22px; color: #8FA35A; }
.ld .ld-nose h4 { margin: 0; font-weight: 900; font-size: 16px; letter-spacing: -0.035em; }
.ld .ld-nose p { font-size: 13.5px; font-weight: 500; line-height: 1.7; color: var(--ld-ink-2); word-break: keep-all; }
.ld .ld-free { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; width: 100%; }
.ld .ld-free li { background: var(--ld-paper); border-radius: 20px; padding: 16px 18px; display: flex; gap: 10px; align-items: center; box-shadow: 0 8px 20px rgba(58,46,39,.06); font-weight: 800; font-size: 14.5px; letter-spacing: -0.03em; }
.ld .ld-free-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #8FA35A; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; }

/* ---------- SAFETY ---------- */
.ld .ld-safety { background: #EEF2E1; }
.ld .ld-certs {
  width: 100%; background: var(--ld-paper); border-radius: 28px; padding: clamp(22px, 3.2vw, 40px); box-shadow: 0 18px 40px rgba(58,46,39,.08);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 28px);
}
.ld .ld-certs figure { display: flex; flex-direction: column; gap: 12px; }
.ld .ld-cert-img { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px rgba(58,46,39,.12); background: #fff; transition: transform .3s ease; }
.ld .ld-cert-img:hover { transform: translateY(-6px); }
.ld .ld-cert-img img { width: 100%; }
.ld .ld-certs figcaption { text-align: center; display: flex; flex-direction: column; gap: 3px; }
.ld .ld-certs figcaption b { font-weight: 800; font-size: 15px; }
.ld .ld-certs figcaption span { font-size: 13px; font-weight: 600; color: var(--ld-mute-2); }
.ld .ld-safety-pill { background: #7FA05C; color: #fff; border-radius: 999px; padding: 12px 26px; font-weight: 900; font-size: clamp(16px, 2vw, 21px); letter-spacing: -0.035em; word-break: keep-all; }
.ld .ld-safety-text { font-size: clamp(15px, 1.7vw, 19px); line-height: 1.75; font-weight: 600; max-width: 44ch; word-break: keep-all; }
.ld .ld-safety-text strong { color: var(--ld-green); font-weight: 900; }
.ld .ld-safety .ld-h2 { font-size: clamp(28px, 4.4vw, 50px); line-height: 1.2; }

/* ---------- FLAVORS ---------- */
.ld .ld-flavors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }
.ld .ld-flavor {
  border-radius: 26px; padding: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 22px) clamp(24px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 14px; transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .65s ease;
}
.ld .ld-flavor:hover, .ld[data-ld-js] .ld-flavor.ld-rise.is-in:hover { transform: translateY(-8px); }
.ld .ld-flavor img { width: 74%; margin: 0 auto; }
.ld .ld-flavor > div { display: flex; flex-direction: column; gap: 6px; }
.ld .ld-flavor-care { font-weight: 800; font-size: 12px; letter-spacing: .12em; }
.ld .ld-flavor h3 { font-weight: 900; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.045em; line-height: 1.2; }
.ld .ld-flavor .ld-flavor-kw { font-size: 12.5px; font-weight: 800; color: var(--ld-ink-2); letter-spacing: -0.01em; }
.ld .ld-flavor p { font-size: 13.5px; line-height: 1.75; font-weight: 500; color: var(--ld-ink-2); word-break: keep-all; }
.ld .ld-note { text-align: center; font-size: 14px; font-weight: 600; color: var(--ld-mute); word-break: keep-all; }
.ld .ld-note--small { font-size: 13px; line-height: 1.8; font-weight: 500; }

/* ---------- FEEDING GUIDE ---------- */
.ld .ld-q { font-weight: 900; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.04em; }
.ld .ld-q-box { background: var(--ld-paper); border: 2px solid var(--ld-ink); border-radius: 14px; padding: 12px 26px; font-weight: 900; font-size: clamp(17px, 2.2vw, 23px); letter-spacing: -0.04em; width: auto; }
.ld .ld-feed { width: 100%; background: var(--ld-paper); border-radius: 32px; padding: clamp(26px, 3.6vw, 44px) clamp(20px, 3vw, 40px); box-shadow: 0 18px 44px rgba(58,46,39,.10); display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); }
.ld .ld-feed .ld-head { gap: 8px; }
.ld .ld-feed-pill { background: var(--ld-accent); color: var(--ld-light); border-radius: 999px; padding: 9px 22px; font-weight: 900; font-size: clamp(15px, 1.8vw, 19px); letter-spacing: -0.03em; }
.ld .ld-feed-sub { font-size: clamp(13px, 1.4vw, 15px); font-weight: 600; color: var(--ld-mute); }
.ld .ld-feed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.ld .ld-feed-grid > div { background: #FBF2D8; border-radius: 22px; padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; transition: transform .22s ease; }
.ld .ld-feed-grid > div:hover { transform: translateY(-5px); }
.ld .ld-feed-grid dt { font-weight: 800; font-size: clamp(14px, 1.6vw, 17px); color: #8A6A2E; letter-spacing: -0.02em; }
.ld .ld-feed-grid dd { font-weight: 900; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.05em; color: var(--ld-accent); }
.ld .ld-feed-grid dd small { font-size: .52em; margin-left: 2px; }
.ld .ld-feed-notes { list-style: disc; padding-left: 20px; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ld .ld-feed-notes li { font-size: 14.5px; line-height: 1.75; font-weight: 500; color: var(--ld-ink-2); word-break: keep-all; }

/* ---------- INGREDIENTS ---------- */
.ld #spec .ld-sub { font-size: 15.5px; max-width: none; }
.ld .ld-ing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ld .ld-ing { border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.ld .ld-ing-chip { align-self: flex-start; width: auto; background: var(--ld-paper); border-radius: 999px; padding: 6px 16px; font-weight: 900; font-size: 14px; }
.ld .ld-ing p { font-size: 13px; line-height: 1.75; font-weight: 500; color: var(--ld-ink-2); word-break: keep-all; }
.ld .ld-ing strong { color: var(--ld-ink); }

/* ---------- FAQ ---------- */
.ld .ld-faq { display: flex; flex-direction: column; gap: 10px; }
.ld .ld-faq details { background: var(--ld-cream); border-radius: 20px; padding: 18px 22px; }
.ld .ld-faq summary { cursor: pointer; font-weight: 800; font-size: 15.5px; letter-spacing: -0.03em; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ld .ld-faq summary::-webkit-details-marker { display: none; }
.ld .ld-faq-sign { color: var(--ld-accent); font-size: 18px; transition: transform .2s ease; }
.ld .ld-faq details[open] .ld-faq-sign { transform: rotate(45deg); }
.ld .ld-faq details p { margin-top: 12px; font-size: 14.5px; line-height: 1.85; font-weight: 500; color: var(--ld-ink-2); word-break: keep-all; }

@keyframes ldMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ldBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  /* Hero: the design lays the copy over the photo, which on a phone lands the
     headline on the dog and jars. Stack instead — the photo (2089×858, dog +
     jars on its right half) sits under the copy at 180% width, anchored right,
     and a fade blends its top edge into the cream. 180% / 2.435 = 74vw tall. */
  .ld .ld-hero { background-size: 180% auto; background-position: 78% 100%; padding-bottom: calc(74vw + 8px); }
  .ld .ld-hero::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(74vw - 64px); height: 72px;
    background: linear-gradient(var(--ld-hero), rgba(242,230,217,0)); pointer-events: none;
  }
  .ld .ld-hero .ld-wrap { position: relative; z-index: 1; }
  .ld .ld-scroll { display: none; }
}
@media (max-width: 640px) {
  .ld .ld-ing-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ld .ld-flavor img { width: auto; max-width: 62%; max-height: 300px; }
  .ld .ld-rv { grid-template-columns: minmax(0, 1fr); }
  .ld .ld-rv img { min-height: 220px; max-height: 260px; }
}
@media (max-width: 430px) {
  .ld .ld-feed-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ld[data-ld-js] .ld-rise { opacity: 1; transform: none; transition: none; }
  .ld .ld-strip-track, .ld .ld-scroll { animation: none; }
  .ld .ld-review-track { animation: none; }
  .ld .ld-review-rail { overflow-x: auto; }
  .ld .ld-review-set[aria-hidden="true"] { display: none; }
}