/* Desktop body layout for the local reference preview. Keep the mobile sheet
   unchanged; desktop-only content stays out of layout below 900px. */
.desktop-only { display: none; }

/* The live storefront uses Mulish and a 17px reading base. Keep the reference
   modules on that type scale instead of the earlier viewport-scaled mock. */
body.preview-v3-body {
  font-family: "Mulish", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
body.preview-v3-body main .hero-copy h1 { font-family: "Mulish", Arial, sans-serif !important; font-size: clamp(30px, 4.2vw, 64px) !important; font-weight: 700 !important; line-height: .98 !important; letter-spacing: -.045em !important; }
body.preview-v3-body main .closing-copy h2 { font-family: "Mulish", Arial, sans-serif !important; font-size: clamp(24px, 2.25vw, 34px) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -.035em !important; }
body.preview-v3-body main .hero-copy h1,
body.preview-v3-body main .hero-copy h2,
body.preview-v3-body main .hero-copy p,
body.preview-v3-body main .closing-copy h2,
body.preview-v3-body main .closing-copy p { color: #fff !important; }
body.preview-v3-body main .hero-copy h2 { font-size: clamp(22px, 1.95vw, 28px) !important; font-weight: 700 !important; line-height: 1.15 !important; }
body.preview-v3-body main .hero-copy p,
body.preview-v3-body main .closing-copy p { font-size: 16px !important; line-height: 1.4 !important; }
body.preview-v3-body main .hero-copy p { font-size: 16px !important; line-height: 1.4 !important; }
.button { min-height: 44px; font-size: 16px; font-weight: 600; }
.hero-text-link { font-size: 14px; color: #fff !important; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
body.preview-v3-body main .section-title { font-family: "Mulish", Arial, sans-serif !important; font-size: clamp(20px, 2.05vw, 30px) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em !important; }
.section-heading > p,
.desktop-section-heading p { font-size: 16px; line-height: 1.4; }
.category-card span { font-size: 16px; }
.benefit-card h3,
.product-card h3,
.step-card h3,
.desktop-step-heading { font-size: 16px; font-weight: 700; line-height: 1.3; }
.benefit-card p,
.product-description,
.step-card p,
.shipping-item p { font-size: 16px; line-height: 1.4; }
.price { font-size: 18px; font-weight: 700; line-height: 1.25; }
.product-button { font-size: 16px; }
.rating-line { font-size: 14px; }
.rating-stars { font-size: 19px; }
.rating-line strong { font-size: 17px; }
.average-review { font-size: 13px; }
.review-intro { font-size: 16px; line-height: 1.45; }
.all-reviews-button { font-size: 16px; }
.desktop-product-rating { font-size: 14px; }
.review-stars { font-size: 16px; }
.review-card blockquote { max-width: 34ch; font-size: 16px; line-height: 1.4; }
.review-author { font-size: 13px; }
.shipping-item h3 { font-size: 17px; line-height: 1.25; font-weight: 700; }
body.preview-v3-body main .benefit-card h3,
body.preview-v3-body main .product-card h3,
body.preview-v3-body main .step-card h3,
body.preview-v3-body main .desktop-explore-card span,
body.preview-v3-body main .desktop-step-heading,
body.preview-v3-body main .shipping-item h3,
body.preview-v3-body main .promise-card h3 { font-weight: 700 !important; }
.review-card > .review-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
  background: #eeeae4;
}
.review-card > .review-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center;
}
body.preview-v3-body main .faq-inner { width: 100%; max-width: 1200px; margin-inline: auto; }
body.preview-v3-body main .faq .section-title { margin: 0 0 clamp(12px, 1.1vw, 16px); }
body.preview-v3-body main .faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
body.preview-v3-body main .faq-list { border-top: 1px solid var(--line); }
body.preview-v3-body main .faq-item { border-bottom: 1px solid var(--line); }
body.preview-v3-body main .faq-item summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  list-style: none;
  color: var(--ink);
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  cursor: pointer;
}
body.preview-v3-body main .faq-item summary::-webkit-details-marker { display: none; }
body.preview-v3-body main .faq-item summary::after { content: "+"; flex: none; margin-left: auto; color: #181818; font-size: 22px; font-weight: 400; line-height: 1; }
body.preview-v3-body main .faq-item[open] summary::after { content: "−"; }
body.preview-v3-body main .faq-item summary:focus-visible,
body.preview-v3-body main .promise-card a:focus-visible { outline: 2px solid #1e5f9a; outline-offset: 3px; }
body.preview-v3-body main .faq-item > p { margin: 0; padding: 0 24px 18px 0; color: #45413c; font-size: 16px !important; line-height: 1.5 !important; }
body.preview-v3-body main .promise-card { position: relative; padding: 24px; border-radius: 5px; background: #f1e9dc; }
body.preview-v3-body main .promise-icon { position: absolute; top: 22px; left: 22px; width: 34px; height: 34px; fill: none; stroke: #7b451b; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.preview-v3-body main .promise-card h3 { margin: 0 0 12px; padding-left: 48px; font-size: 20px; font-weight: 700; line-height: 1.3; }
body.preview-v3-body main .promise-card p,
body.preview-v3-body main .promise-card a { font-size: 16px; line-height: 1.5; }
body.preview-v3-body main .promise-card p { margin: 0 0 12px; }
body.preview-v3-body main .promise-card a { color: #7b451b; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.desktop-explore-card img { height: 11.3vw; }
.desktop-packaging-image { height: 12.4vw; }
body.preview-v3-body .reference-page { background: #faf9f6 !important; }
.benefit-card svg { width: clamp(30px, 3.1vw, 44px); height: clamp(30px, 3.1vw, 44px); stroke-width: 2.4; }
body.preview-v3-body main .product-card h3,
body.preview-v3-body main .benefit-card h3,
body.preview-v3-body main .step-card h3,
body.preview-v3-body main .desktop-step-heading,
body.preview-v3-body main .shipping-item h3 { font-size: clamp(17px, 1.25vw, 18px); }
body.preview-v3-body main .price { font-size: 18px; font-weight: 700; }

/* The captured live shell includes a separate storefront hero system. Reset its
   grid/flex sizing on this standalone reference body so the supplied images and
   copy stay together at every breakpoint. */
.hero {
  display: block;
  min-height: 0;
}
.hero-image,
.closing > img:not(.desktop-closing-image) {
  position: absolute;
  inset: 0;
}
.hero-copy {
  display: block;
  min-height: 0;
  padding: 0;
  flex-direction: initial;
  justify-content: initial;
}
.benefit-card { min-height: 0; }
.closing-copy h2 { max-width: 100%; }
.closing-copy .button { min-height: 44px; padding: 8px 14px; }

@media (min-width: 900px) {
  .reference-page { width: 100%; max-width: none; }
  .categories { display: none; }
  .desktop-explore,
  .benefits,
  .featured,
  .how,
  .reviews,
  .shipping {
    width: min(calc(100% - clamp(32px, 5.2vw, 76px)), 1200px);
    box-sizing: border-box;
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .faq { padding-left: 0; padding-right: 0; }
  body.preview-v3-body main .faq-inner {
    width: min(calc(100% - clamp(32px, 5.2vw, 76px)), 1200px);
    max-width: 1200px;
  }
  .hero { aspect-ratio: 3.3; min-height: clamp(340px, 30.3vw, 582px); }
  .hero-image { display: none; }
  .desktop-hero-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
  }
  .hero-copy { left: 12.6%; bottom: 12%; width: 43%; }
  .hero-copy > .hero-actions:not(.desktop-hero-actions) { display: none; }
  .desktop-hero-actions { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }

  .desktop-explore.desktop-only { display: block; }
  .desktop-explore,
  .benefits,
  .featured,
  .how,
  .reviews,
  .shipping,
  .faq {
    min-height: 0;
    padding: clamp(18px, 1.55vw, 24px) 2.6vw;
  }
  .desktop-section-heading { margin: 0 0 clamp(12px, 1.1vw, 16px); text-align: center; }
  .desktop-section-heading .section-title,
  .desktop-section-heading p { margin-inline: auto; }
  .desktop-section-heading p { margin-top: 4px; color: var(--muted); font-size: 16px; }
  .desktop-explore-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); }
  .desktop-explore-card {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    color: inherit;
    text-align: center;
    text-decoration: none;
  }
  .desktop-explore-card img {
    width: 100%;
    aspect-ratio: 2 / 1;
    margin-bottom: 8px;
    object-fit: cover;
    border-radius: 5px;
    background: #eeeae4;
  }
  .desktop-explore-card span { font-weight: 700; }
  .desktop-explore-card small { margin-top: 2px; color: var(--muted); }
  .desktop-explore-card:focus-visible,
  .desktop-view-all-keychains:focus-visible { outline: 2px solid #1e5f9a; outline-offset: 3px; }

  .benefits { padding-top: clamp(18px, 1.55vw, 24px); text-align: center; }
  .benefits > .section-title { margin-bottom: clamp(12px, 1.1vw, 16px); }
  .benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .benefit-card { min-height: 0; padding: 0 clamp(8px, 1.2vw, 16px) 12px; }
  .benefit-card h3 { font-size: clamp(17px, 1.25vw, 18px); }
  .benefit-card p { max-width: 24em; margin-inline: auto; font-size: 16px; line-height: 1.4; }
  .benefit-card svg { width: 44px; height: 44px; margin-bottom: 7px; stroke-width: 2.5; }

  .featured .section-heading {
    position: relative;
    display: block;
    text-align: center;
    margin-bottom: clamp(12px, 1.1vw, 16px);
  }
  #featured-title { display: none; }
  #desktop-featured-title { display: block; margin: 0; }
  .featured .section-heading > p { margin: 2px auto 0; }
  .desktop-view-all-keychains { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; }
  .desktop-view-all-keychains:hover { text-decoration: underline; }
  .product-grid { gap: clamp(12px, 1.7vw, 22px); margin-inline: 0; }
  .product-image-link {
    aspect-ratio: 1 / 1;
    margin-bottom: 9px;
    border-radius: 5px;
  }
  .product-card h3 { min-height: 0; margin-bottom: 2px; font-size: 18px; }
  .product-card .price { margin-bottom: 1px; }
  .product-description,
  .product-button { display: none; }
  .product-card .desktop-product-link { display: flex; width: 100%; margin-top: auto; border-radius: 3px; }

  .how { padding-top: clamp(18px, 1.55vw, 24px); }
  .how .section-heading { margin-bottom: clamp(12px, 1.1vw, 16px); text-align: center; }
  .steps-grid { gap: clamp(18px, 2.8vw, 34px); }
  .step-image {
    aspect-ratio: 2.3;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 5px;
  }
  .step-image img { object-fit: cover; }
  .step-heading { display: none; }
  .desktop-step-number {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brown);
    color: #fff;
    font-weight: 700;
  }
  .desktop-step-heading { display: block; margin: 0 0 4px; font-size: 18px; font-weight: 700; text-align: center; }
  .step-card p { padding-left: 0; font-size: 16px; line-height: 1.4; text-align: center; }
  .step-card:not(:last-child)::after {
    content: "→";
    position: absolute;
    z-index: 2;
    top: 28%;
    right: calc(clamp(18px, 2.8vw, 34px) / -1 - 12px);
    color: var(--brown);
  }
  .step-card { position: relative; }

  .reviews { padding-top: clamp(18px, 1.55vw, 24px); }
  .reviews-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(12px, 1.1vw, 16px);
  }
  .reviews-heading > div { width: auto; display: flex; align-items: center; gap: clamp(8px, 1.3vw, 16px); }
  .reviews-heading .section-title { margin: 0; white-space: nowrap; }
  .desktop-review-rating { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .desktop-review-rating > span:first-child { color: var(--orange); letter-spacing: -.08em; }
  .desktop-review-rating strong { font-weight: 700; }
  .rating-line,
  .average-review,
  .review-intro { display: none; }
  .all-reviews-button { position: static; top: auto; right: auto; white-space: nowrap; }
  .review-grid { gap: clamp(12px, 1.7vw, 22px); }
  .review-card > .review-photo { aspect-ratio: 3.3 / 1; border-radius: 4px; }
  .review-card blockquote { max-width: 34ch; font-size: 16px; line-height: 1.35; }
  .review-stars { color: var(--orange); }

  .shipping {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: center;
    gap: 0 clamp(18px, 3vw, 38px);
  }
  .shipping > .section-title { grid-column: 1 / -1; margin: 0 0 clamp(12px, 1.1vw, 16px); }
  .shipping-grid { grid-column: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); margin: 0; }
  .shipping-item { min-height: 74px; padding: 12px 10px 12px 46px; border: 1px solid var(--line); border-radius: 4px; }
  .shipping-item h3 { font-size: 18px; }
  .shipping-item p { font-size: 16px; line-height: 1.4; }
  .shipping-item svg { top: 12px; left: 10px; width: 28px; height: 28px; stroke: #181818; stroke-width: 2.2; }
  .shipping-item:nth-child(3),
  .shipping-item:nth-child(4) { display: none; }
  .shipping-item.desktop-shipping-packaging { display: block; }
  .packaging-grid { display: none; }
  .desktop-packaging-image {
    display: block;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    aspect-ratio: 1.85;
    object-fit: cover;
    border-radius: 4px;
  }

  .faq { padding-top: clamp(18px, 1.55vw, 24px); }
  body.preview-v3-body main .faq-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(24px, 2.2vw, 32px); }

  .closing { aspect-ratio: 7.5; min-height: clamp(250px, 16vw, 320px); }
  .closing > img:not(.desktop-closing-image) { display: none; }
  .desktop-closing-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .closing-copy { left: 12.6%; bottom: 50%; width: 45%; transform: translateY(50%); }
  .closing-copy > .button:not(.desktop-closing-button) { display: none; }
  .closing-copy .desktop-closing-button { display: inline-flex; }
}

@media (max-width: 899px) {
  body.preview-v3-body main .hero-copy > .desktop-hero-actions { display: none !important; }
  .hero {
    height: max(360px, 65.8vw);
    aspect-ratio: auto;
  }
  .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  .hero-copy {
    left: 10px;
    bottom: 16px;
    width: calc(100% - 20px);
    text-shadow: 0 1px 2px rgba(0,0,0,.32);
  }
  .hero-copy p { max-width: 330px; }
  .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
  .hero-actions .button { min-height: 44px; padding: 8px 14px; white-space: nowrap; }
  body.preview-v3-body main .section-heading > p { font-size: 15px; }
  body.preview-v3-body main .benefit-card p,
  body.preview-v3-body main .product-description,
  body.preview-v3-body main .step-card p,
  body.preview-v3-body main .shipping-item p,
  body.preview-v3-body main .review-intro { font-size: 15px !important; line-height: 1.4; }
  body.preview-v3-body main .product-button,
  body.preview-v3-body main .desktop-product-link,
  body.preview-v3-body main .all-reviews-button { font-size: 15px; }
  body.preview-v3-body main .price { font-size: 17px; font-weight: 700; }
  body.preview-v3-body main .review-card blockquote { font-size: 15px; line-height: 1.4; }
  body.preview-v3-body main .button { font-size: 15px; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-card { padding: 14px 10px; }
  .benefit-card:nth-child(odd) { border-right: 1px solid #e2dfd9; }
  .benefit-card:nth-child(even) { border-right: 0; }
  .benefit-card:nth-child(-n+2) { border-bottom: 1px solid #e2dfd9; }
  .closing {
    height: auto;
    min-height: 250px;
    aspect-ratio: auto;
  }
  .closing > img:not(.desktop-closing-image) { width: 100%; height: 100%; object-fit: cover; }
  .closing-copy {
    left: 10px;
    bottom: 16px;
    width: calc(100% - 20px);
    transform: none;
  }
  .closing-copy p { max-width: 34em; }
}

@media (max-width: 599px) {
  body.preview-v3-body main .hero-copy h1 { font-size: 32px !important; }
  body.preview-v3-body main .hero-copy h2 { font-size: 22px !important; }
  body.preview-v3-body main .closing-copy h2 { font-size: clamp(24px, 6.2vw, 28px) !important; }
  body.preview-v3-body main .section-title { font-size: 22px !important; }
  .benefit-card h3,
  .product-card h3,
  .step-card h3 { font-size: 16px !important; font-weight: 700 !important; }
  .step-card p { font-size: 15px !important; line-height: 1.4; }
  .review-card blockquote { max-width: none; font-size: 15px; line-height: 1.4; }
  .benefit-card svg { width: 34px; height: 34px; stroke-width: 2.4; }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    margin-inline: 0;
  }
  .product-image-link { aspect-ratio: 1 / 1; }
  .product-card h3 { min-height: 0; margin-bottom: 3px; font-size: 16px !important; }
  .price { font-size: 17px; font-weight: 700; }
  .product-description { min-height: 0; font-size: 15px; }
  .product-button { min-height: 44px; width: 100%; font-size: 15px; }
  .shipping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .shipping-item { min-height: 76px; padding-left: 44px; }
  .shipping-item svg { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  @media (min-width: 900px) {
    html { scroll-behavior: auto; }
  }
}

/* V1.2: keep every desktop module on the same 1200px content grid while
   preserving the live Mulish type system and existing storefront chrome. */
body.preview-v3-body main .product-card .button {
  text-transform: none !important;
  letter-spacing: normal !important;
}
body.preview-v3-body main .hero .button,
body.preview-v3-body main .closing .button { font-size: 13px !important; }
body.preview-v3-body main .illustrative-caption {
  margin: 4px 0 8px;
  padding: 0;
  color: var(--muted);
  font-size: 14px !important;
  line-height: 1.35;
}
body.preview-v3-body main .review-excerpt-label {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 14px !important;
  line-height: 1.3;
}
body.preview-v3-body main .review-card > .review-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
  background: #eeeae4;
}
body.preview-v3-body main .review-card > .review-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center;
}
body.preview-v3-body main .review-card > .review-photo.review-photo--left img {
  object-position: left center !important;
}

body.preview-v3-body main .process-form-step-image {
  aspect-ratio: 2 / 1;
  padding: 22px 10px 8px;
  overflow: hidden;
  border: 1px solid #dedbd5;
  background: #f1eee8;
}
body.preview-v3-body main .process-form-illustration {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 7px 10px;
  padding: 9px 12px 7px;
  overflow: hidden;
  border: 1px solid #dedbd5;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 25, 18, .06);
}
body.preview-v3-body main .process-form-field { min-width: 0; }
body.preview-v3-body main .process-form-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 3px;
  color: #25221f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
body.preview-v3-body main .process-form-label b {
  flex: none;
  color: #9d3c2d;
  font-size: 11px;
  font-weight: 600;
}
body.preview-v3-body main .process-form-label small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}
body.preview-v3-body main .process-form-options {
  display: flex;
  gap: 4px;
}
body.preview-v3-body main .process-form-options span {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid #d9d4cc;
  border-radius: 4px;
  color: #38342f;
  font-size: 11px;
  line-height: 1.2;
}
body.preview-v3-body main .process-form-options .selected {
  border-color: #98551b;
  background: #fbf3e9;
}
body.preview-v3-body main .process-form-input {
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid #d9d4cc;
  border-radius: 4px;
  color: #77716a;
  background: #fff;
  font-size: 12px;
  line-height: 1.3;
}
body.preview-v3-body main .process-form-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

@media (min-width: 900px) {
  body.preview-v3-body main .desktop-explore,
  body.preview-v3-body main .benefits,
  body.preview-v3-body main .featured,
  body.preview-v3-body main .how,
  body.preview-v3-body main .reviews,
  body.preview-v3-body main .shipping {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.preview-v3-body main .faq {
    width: 100%;
    margin-inline: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.preview-v3-body main .faq-inner {
    width: min(calc(100% - clamp(32px, 5.2vw, 76px)), 1200px);
    max-width: 1200px;
  }

  body.preview-v3-body main .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.preview-v3-body main .review-card {
    display: grid;
    grid-template-columns: clamp(160px, 14vw, 190px) minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 0 18px;
  }
  body.preview-v3-body main .review-card > .review-photo {
    grid-column: 1;
    grid-row: 1 / 6;
  }
  body.preview-v3-body main .review-card > .review-stars,
  body.preview-v3-body main .review-card > .review-excerpt-label,
  body.preview-v3-body main .review-card > blockquote,
  body.preview-v3-body main .review-card > .review-author { grid-column: 2; }
  body.preview-v3-body main .review-card > .review-stars { margin: 0 0 8px; }
  body.preview-v3-body main .review-card blockquote { max-width: 40ch; font-size: 16px; line-height: 1.4; }

  body.preview-v3-body main .shipping {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
    align-items: center;
    gap: 0 28px;
  }
  body.preview-v3-body main .shipping > .section-title { grid-column: 1 / -1; }
  body.preview-v3-body main .shipping-grid {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
  }
  body.preview-v3-body main .shipping .shipping-item:nth-child(3) { display: block; }
  body.preview-v3-body main .shipping-item {
    min-height: 104px;
    padding: 46px 10px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
  }
  body.preview-v3-body main .shipping-item svg {
    top: 10px;
    left: 10px;
    width: 28px;
    height: 28px;
  }
  body.preview-v3-body main .shipping-item h3 { margin-bottom: 4px; font-size: 17px; }
  body.preview-v3-body main .shipping-item p { font-size: 15px; line-height: 1.35; }
  body.preview-v3-body main .shipping .packaging-grid {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 10px;
    margin: 0;
  }
  body.preview-v3-body main .shipping .packaging-grid img {
    width: 100%;
    height: clamp(190px, 17vw, 230px);
    object-fit: contain;
    border-radius: 5px;
    background: transparent;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  body.preview-v3-body main .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.preview-v3-body main .process-form-step-image { aspect-ratio: 1.8 / 1; }
}

@media (max-width: 899px) {
  body.preview-v3-body main .review-grid { grid-template-columns: minmax(0, 1fr); }
  body.preview-v3-body main .review-card {
    display: grid;
    grid-template-columns: clamp(112px, 16vw, 144px) minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 0 14px;
  }
  body.preview-v3-body main .review-card > .review-photo { grid-column: 1; grid-row: 1 / 6; }
  body.preview-v3-body main .review-card > .review-stars,
  body.preview-v3-body main .review-card > .review-excerpt-label,
  body.preview-v3-body main .review-card > blockquote,
  body.preview-v3-body main .review-card > .review-author { grid-column: 2; }
  body.preview-v3-body main .review-card > .review-stars { margin: 0 0 5px; }
  body.preview-v3-body main .review-card blockquote { max-width: none; font-size: 15px; line-height: 1.4; }
  body.preview-v3-body main .review-author { font-size: 14px; }
  body.preview-v3-body main .shipping .shipping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.preview-v3-body main .shipping .shipping-item:nth-child(3) { display: block; }
  body.preview-v3-body main .shipping .packaging-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  body.preview-v3-body main .shipping .packaging-grid img {
    width: 100%;
    height: clamp(170px, 48vw, 225px);
    object-fit: contain;
    border-radius: 5px;
    background: transparent;
  }
  body.preview-v3-body main .process-form-illustration { gap: 7px 10px; }
  body.preview-v3-body main .process-form-step-image {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0;
    background: transparent;
  }
  body.preview-v3-body main .process-form-illustration {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr);
  }
  body.preview-v3-body main .process-form-note { grid-column: 1; }
  body.preview-v3-body main .process-form-label { font-size: 13px; }
  body.preview-v3-body main .process-form-input { font-size: 13px; }
}

@media (max-width: 599px) {
  body.preview-v3-body main .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.preview-v3-body main .step-image:not(.process-form-step-image) { aspect-ratio: 1.7 / 1; }
  body.preview-v3-body main .process-form-step-image { aspect-ratio: auto !important; padding: 0 !important; }
  body.preview-v3-body main .process-form-illustration { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px; }
  body.preview-v3-body main .process-form-note { grid-column: 1; }
  body.preview-v3-body main .process-form-label { font-size: 14px; }
  body.preview-v3-body main .process-form-label b { font-size: 11px; }
  body.preview-v3-body main .process-form-label small { font-size: 11px; }
  body.preview-v3-body main .process-form-options span { font-size: 12px; }
  body.preview-v3-body main .process-form-input { min-height: 30px; font-size: 13px; }
  body.preview-v3-body main .process-form-note { font-size: 12px; }
  body.preview-v3-body main .illustrative-caption { font-size: 13px !important; }
}

/* V1.2: use the same personalization-discovery grid at every viewport. */
body.preview-v3-body main .desktop-explore-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  color: inherit;
  text-align: center;
  text-decoration: none;
}
body.preview-v3-body main .desktop-explore-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 5px;
  background: #eeeae4;
}
body.preview-v3-body main .desktop-explore-card span { margin-top: 3px; font-size: 16px; font-weight: 700; }
body.preview-v3-body main .desktop-explore-card small { margin-top: 2px; color: var(--muted); font-size: 15px; line-height: 1.35; }
body.preview-v3-body main .desktop-explore-card:focus-visible { outline: 2px solid #1e5f9a; outline-offset: 3px; }
body.preview-v3-body main .product-card h3 { font-size: 16px !important; }
body.preview-v3-body main .product-card .price { font-size: 17px !important; }

/* The modal keeps the Etsy source and Dana's original photo crop with the quote. */
body.preview-v3-body .dialog-review img.review-photo--left { object-position: left center !important; }
body.preview-v3-body .dialog-review blockquote { font-size: 16px; line-height: 1.45; }
body.preview-v3-body .dialog-review p { font-size: 14px; line-height: 1.4; }

@media (min-width: 900px) {
  body.preview-v3-body main .desktop-explore {
    display: block;
    width: min(calc(100% - clamp(32px, 5.2vw, 76px)), 1200px);
    max-width: 1200px;
    margin-inline: auto;
  }
  body.preview-v3-body main .desktop-explore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.preview-v3-body main .product-card h3 { font-size: 16px !important; }
  body.preview-v3-body main .product-card .price { font-size: 17px !important; }
  body.preview-v3-body main .hero .button,
  body.preview-v3-body main .closing .button { font-size: 13px !important; min-height: 44px; }
}

@media (max-width: 899px) {
  body.preview-v3-body main .desktop-explore {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 24px 10px;
  }
  body.preview-v3-body main .desktop-section-heading {
    margin: 0 0 14px;
    text-align: center;
  }
  body.preview-v3-body main .desktop-section-heading .section-title { margin-inline: auto; }
  body.preview-v3-body main .desktop-section-heading p {
    margin: 5px auto 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.4;
  }
  body.preview-v3-body main .desktop-explore-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  body.preview-v3-body main .desktop-explore-card img { margin-bottom: 3px; }
  body.preview-v3-body main .desktop-explore-card img { aspect-ratio: 1.5 / 1; }
  body.preview-v3-body main .desktop-explore-card span { font-size: 16px; }
  body.preview-v3-body main .desktop-explore-card small { font-size: 15px; }

  body.preview-v3-body main .review-grid { grid-template-columns: minmax(0, 1fr); }
  body.preview-v3-body main .review-card {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: start;
    align-items: start;
    gap: 0 14px;
  }
  body.preview-v3-body main .review-card > .review-photo {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 152px;
    aspect-ratio: 1 / 1;
  }
  body.preview-v3-body main .review-card > .review-stars { grid-column: 2; grid-row: 1; margin: 0 0 5px; }
  body.preview-v3-body main .review-card > .review-excerpt-label { grid-column: 2; grid-row: 2; }
  body.preview-v3-body main .review-card > .review-author { grid-column: 2; grid-row: 3; align-self: end; }
  body.preview-v3-body main .review-card > blockquote {
    grid-column: 1 / -1;
    grid-row: 4;
    max-width: none;
    margin: 10px 0 8px;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  body.preview-v3-body main .review-card > .review-author { font-size: 14px; }

  body.preview-v3-body main .hero .button,
  body.preview-v3-body main .closing .button { font-size: 15px !important; min-height: 44px; }
  body.preview-v3-body main .product-card h3 { font-size: 16px !important; }
  body.preview-v3-body main .product-card .price { font-size: 17px !important; }
  body.preview-v3-body .dialog-review blockquote { font-size: 16px; line-height: 1.45; }
  body.preview-v3-body .dialog-review p { font-size: 14px; line-height: 1.4; }
}
/* Width-only alignment with the approved product-page content canvas.
   Preserve the full-width Hero/closing CTA and existing mobile layout. */
@media (min-width: 900px) {
  body.preview-v3-body main .desktop-explore,
  body.preview-v3-body main .benefits,
  body.preview-v3-body main .featured,
  body.preview-v3-body main .how,
  body.preview-v3-body main .reviews,
  body.preview-v3-body main .shipping,
  body.preview-v3-body main .faq-inner {
    width: min(calc(100% - 20px), 1302px);
    max-width: 1302px;
  }
}