/* Lively Design — Homepage (Shop) re-skin. Ported from DS ui_kits/shop/Homepage.html.
   Scoped under .ldh. Self-contained token fallbacks so it renders regardless of
   which vars the base stylesheet defines. Sharp corners throughout. */

.ldh {
  /* fallbacks for DS tokens that may not be defined in style.css */
  --surface-page: var(--ld-paper, #FBFBF9);
  --surface-card: #FFFFFF;
  --surface-sunken: var(--ld-paper-sunken, #F3F3EF);
  --border-card: var(--ld-line, #E9E7E0);
  --border-divider: var(--ld-line, #E9E7E0);
  --gutter-lg: var(--gutter, 32px);
  --ls-serif: 0.005em;
  --rule-accent: 54px;
  --ld-on-dark-muted: rgba(255,255,255,0.72);
  --ld-on-dark-serif: rgba(255,255,255,0.85);
  --ld-on-dark-faint: rgba(255,255,255,0.55);
  --ld-paper-tok: var(--ld-paper, #FBFBF9);
  --ld-ink-soft: #34362F;

  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--surface-page);
  color: var(--text-body, #565049);
  font-family: var(--font-shop, "Inter", sans-serif);
}
.ldh *, .ldh *::before, .ldh *::after { box-sizing: border-box; }

.ldh-wrap { max-width: var(--container, 1200px); margin: 0 auto; padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); }
.ldh-wrap-wide { max-width: 1500px; margin: 0 auto; padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); }

/* ---- Announce bar ---- */
.ldh-announce {
  background: var(--ld-ink, #232521);
  color: var(--ld-on-dark-muted);
  font-family: var(--font-shop, "Inter", sans-serif);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; padding: 9px 16px;
}

/* ---- Section shell ---- */
.ldh-sec { padding-top: 76px; }
.ldh-sec-center { text-align: center; margin-bottom: 30px; }
.ldh-sechead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 30px; gap: 20px; }
.ldh-eyebrow { font-family: var(--font-shop, "Inter", sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, #5E7E62); }
.ldh-h2 { font-family: var(--font-serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 36px; line-height: 1.05; color: var(--text-strong, #232521); margin: 0; }

/* ---- Inline UI icons ---- */
.ldh-i { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex: none; }
.ldh-i.acc { color: var(--accent, #5E7E62); }

/* ---- Buttons ---- */
.ldh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; font-family: var(--font-shop, "Inter", sans-serif); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid transparent; border-radius: 0; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur, .22s) var(--ease, ease), color var(--dur, .22s) var(--ease, ease), border-color var(--dur, .22s) var(--ease, ease); }
.ldh-btn-primary { background: var(--accent, #5E7E62); color: var(--ld-paper-tok); }
.ldh-btn-primary:hover { background: var(--ld-accent-press, #4D6A51); }
.ldh-btn-secondary { background: transparent; color: var(--accent, #5E7E62); border-color: var(--accent, #5E7E62); }
.ldh-btn-secondary:hover { background: var(--accent, #5E7E62); color: var(--ld-paper-tok); }
.ldh-btn-ink { background: var(--ld-ink, #232521); color: var(--ld-paper-tok); }
.ldh-btn-ink:hover { background: var(--ld-ink-soft, #34362F); }
.ldh-btn-ghost { background: transparent; color: var(--text-strong, #232521); padding: 13px 0; }
.ldh-btn-ghost:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Hero slider ---- */
.ldh-hero { position: relative; width: 100%; }
.ldh-hero-track { position: relative; width: 100%; aspect-ratio: 16 / 7; background: var(--ld-photo, #E7E7E1); }
.ldh-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease, ease); pointer-events: none; }
.ldh-hero-slide.on { opacity: 1; pointer-events: auto; }
.ldh-hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ldh-hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,251,249,0.92) 0%, rgba(251,251,249,0.66) 34%, rgba(251,251,249,0.10) 62%, rgba(251,251,249,0) 80%); }
.ldh-hero-copy { position: absolute; top: 50%; left: max(40px, calc((100% - 1400px) / 2 + 40px)); transform: translateY(-50%); max-width: 460px; z-index: 2; }
.ldh-hero-eyebrow { font-family: var(--font-shop, "Inter", sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, #5E7E62); margin-bottom: 16px; }
.ldh-hero-eyebrow.on-dark { color: #fff; opacity: .92; }
.ldh-hero-h { font-family: var(--font-serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 56px; line-height: 1.04; letter-spacing: var(--ls-serif); color: var(--text-strong, #232521); margin: 0; }
.ldh-hero-rule { width: var(--rule-accent); height: 1px; background: var(--accent, #5E7E62); margin: 24px 0 22px; }
.ldh-hero-sub { font-family: var(--font-shop, "Inter", sans-serif); font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--text-body, #565049); max-width: 380px; margin: 0 0 28px; }
.ldh-hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--accent, #5E7E62); color: #fff; font-family: var(--font-shop, "Inter", sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 28px; text-decoration: none; transition: background .2s var(--ease, ease); }
.ldh-hero-cta:hover { background: var(--ld-accent-press, #4D6A51); }
.ldh-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: none; background: rgba(251,251,249,0.82); color: var(--text-strong, #232521); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; z-index: 3; }
.ldh-hero-arrow:hover { background: #fff; }
.ldh-hero-arrow .ldh-i { width: 22px; height: 22px; }
.ldh-hero-arrow.prev { left: 18px; }
.ldh-hero-arrow.next { right: 18px; }
.ldh-hero-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
.ldh-hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.55); cursor: pointer; padding: 0; }
.ldh-hero-dots button.on { background: #fff; }

/* ---- CategoryGrid ---- */
.ldh-catgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ldh-cattile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 8px; border: 1px solid var(--border-card); background: var(--surface-card); cursor: pointer; text-decoration: none; transition: background .25s var(--ease, ease), border-color .25s var(--ease, ease); }
.ldh-cattile:hover { background: var(--surface-sunken); border-color: var(--accent, #5E7E62); }
.ldh-cattile:hover .g { color: var(--accent, #5E7E62); }
.ldh-cattile .g { width: 34px; height: 34px; color: var(--text-strong, #232521); transition: color .25s; }
.ldh-cattile span { font-family: var(--font-shop, "Inter", sans-serif); font-size: 12.5px; color: var(--text-body, #565049); }

/* ---- FullBanner ---- */
.ldh-bnr { display: block; position: relative; width: 100%; overflow: hidden; border: 1px solid var(--border-card); }
.ldh-bnr img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; transition: transform .8s var(--ease, ease); }
.ldh-bnr:hover img { transform: scale(1.02); }
.ldh-bnr-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35,37,33,0.50) 0%, rgba(35,37,33,0.18) 38%, rgba(35,37,33,0) 66%); }
.ldh-bnr-copy { position: absolute; top: 50%; left: 7%; transform: translateY(-50%); max-width: 440px; z-index: 2; }
.ldh-bnr-h { font-family: var(--font-serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 44px; line-height: 1.06; color: #fff; margin: 0; }

/* ---- Banner / duo / trio ---- */
.ldh-banner { display: block; width: 100%; overflow: hidden; text-decoration: none; }
.ldh-banner > img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease, ease); }
.ldh-banner:hover > img { transform: scale(1.02); }
.ldh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ldh-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ldh-trio .ldh-banner { border: 1px solid var(--border-card); }
.ldh-trio .ldh-banner img { aspect-ratio: 4 / 3; object-fit: cover; }
.ldh-banner-foot { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; background: var(--surface-card); }
.ldh-banner-foot span { font-family: var(--font-shop, "Inter", sans-serif); font-size: 14px; color: var(--text-strong, #232521); }

/* ---- TwoCollections ---- */
.ldh-collcard { border: 1px solid var(--border-card); background: var(--surface-card); display: flex; flex-direction: column; }
.ldh-collcard[data-collection="studio"] { --accent: var(--ld-studio, #3F5A46); }
.ldh-collcard-img { display: block; overflow: hidden; }
.ldh-collcard-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease, ease); }
.ldh-collcard:hover .ldh-collcard-img img { transform: scale(1.02); }
.ldh-collcard-body { padding: 26px 30px 30px; }
.ldh-collcard-tag { font-family: var(--font-shop, "Inter", sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #5E7E62); margin-bottom: 12px; }
.ldh-collcard-h { font-family: var(--font-serif, "Cormorant Garamond", serif); font-weight: 500; font-size: 26px; line-height: 1.1; color: var(--text-strong, #232521); margin: 0 0 12px; }
.ldh-collcard-d { font-family: var(--font-shop, "Inter", sans-serif); font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--text-body, #565049); margin: 0 0 20px; max-width: 420px; }

/* ---- ProductRow / ProductCard ---- */
.ldh-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card, 24px); }
.ldh-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 0; display: flex; flex-direction: column; text-decoration: none; font-family: var(--font-shop, "Inter", sans-serif); }
.ldh-card-well { position: relative; aspect-ratio: 4 / 5; background: var(--ld-photo, #E7E7E1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ldh-card-ph { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #b3b0a6; }
.ldh-card-badge { position: absolute; top: 0; left: 0; background: var(--accent, #5E7E62); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; }
.ldh-card:hover .ldh-card-well::after { content: ""; position: absolute; inset: 0; background: var(--ld-ink, #232521); opacity: 0.04; }
.ldh-card-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.ldh-card-name { font-size: 15px; font-weight: 400; color: var(--text-strong, #232521); }
.ldh-card-mat { font-size: 12px; color: var(--text-muted, #8A867C); }
.ldh-card-pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
.ldh-card-price { font-size: 14px; font-weight: 500; color: var(--text-strong, #232521); white-space: nowrap; }
.ldh-card-old { font-size: 12px; color: var(--ld-strike, #B5563A); text-decoration: line-through; white-space: nowrap; }
.ldh-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--text-muted, #8A867C); }
.ldh-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ldh-dot.in { background: #5E7E62; }
.ldh-dot.order { background: #C7973F; }

/* ---- StoryBand ---- */
.ldh-story { background: var(--surface-sunken); border-top: 1px solid var(--border-divider); border-bottom: 1px solid var(--border-divider); }
.ldh-story-in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding-top: 70px; padding-bottom: 70px; }
.ldh-story-quote { font-family: var(--font-serif, "Cormorant Garamond", serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.3; color: var(--text-strong, #232521); max-width: 440px; margin: 0; }
.ldh-story-rule { width: var(--rule-accent); height: 1px; background: var(--accent, #5E7E62); margin: 28px 0; }
.ldh-story-body { font-family: var(--font-shop, "Inter", sans-serif); font-size: 14px; font-weight: 300; line-height: 1.85; color: var(--text-body, #565049); max-width: 430px; margin: 0; }
.ldh-story-img { border: 1px solid var(--border-card); }
.ldh-story-img img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- ValueProps ---- */
.ldh-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.ldh-value { display: flex; align-items: center; gap: 14px; }
.ldh-value .ldh-i { width: 22px; height: 22px; }
.ldh-value span { font-family: var(--font-shop, "Inter", sans-serif); font-size: 14px; color: var(--text-strong, #232521); }

/* ---- Newsletter ---- */
.ldh-news { text-align: center; border-top: 1px solid var(--border-divider); padding-top: 70px; }
.ldh-news-sub { font-family: var(--font-shop, "Inter", sans-serif); font-size: 14px; font-weight: 300; color: var(--text-muted, #8A867C); max-width: 460px; margin: 0 auto 26px; }
.ldh-news-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; }
.ldh-news-input { flex: 1; border: 1px solid var(--border-card); background: var(--surface-card); padding: 13px 16px; font-family: var(--font-shop, "Inter", sans-serif); font-size: 14px; font-weight: 300; color: var(--text-strong, #232521); outline: none; }
.ldh-news-input:focus { border-color: var(--accent, #5E7E62); }

/* ---- Mobile breakpoints (ported from DS) ---- */
@media (max-width: 900px) {
  .ldh-catgrid { grid-template-columns: repeat(3, 1fr); }
  .ldh-duo, .ldh-trio { grid-template-columns: 1fr; }
  .ldh-pgrid { grid-template-columns: repeat(2, 1fr); }
  .ldh-values { grid-template-columns: repeat(2, 1fr); }
  .ldh-story-in { grid-template-columns: 1fr; gap: 32px; }
  .ldh-hero-track { aspect-ratio: 4 / 5; }
  .ldh-hero-wash { background: linear-gradient(0deg, rgba(251,251,249,0.95) 8%, rgba(251,251,249,0.55) 42%, rgba(251,251,249,0) 70%); }
  .ldh-hero-copy { top: auto; bottom: 32px; transform: none; left: 24px; right: 24px; max-width: none; }
  .ldh-hero-h { font-size: 38px; }
  .ldh-bnr-h { font-size: 32px; }
  .ldh-sechead { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 560px) {
  .ldh-catgrid { grid-template-columns: repeat(2, 1fr); }
  .ldh-pgrid { grid-template-columns: 1fr; }
  .ldh-h2 { font-size: 30px; }
}