/** Shopify CDN: Minification failed

Line 913:61 Unexpected "6."

**/
/* ==========================================================================
   Nature Lane Product page — scoped to .nl-product root.
   Restyles Dawn's main-product section + Pairs Well With + sticky CTA.
   Safe to load alongside theme CSS; no global selectors used.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.nl-product,
.nl-product-related,
.nl-product-sticky-cta {
  --nl-cream: #F8F1E7;
  --nl-warm-white: #FFFDF8;
  --nl-card-bg: #FBF6EC;
  --nl-sage: #8FAE8B;
  --nl-deep-green: #2F493A;
  --nl-deep-green-700: #243A2F;
  --nl-honey: #D9A441;
  --nl-clay: #B77962;
  --nl-ink: #25251F;
  --nl-ink-60: rgba(37, 37, 31, 0.62);
  --nl-ink-45: rgba(37, 37, 31, 0.45);
  --nl-hairline: rgba(143, 174, 139, 0.35);
  --nl-hairline-strong: rgba(143, 174, 139, 0.55);
  --nl-on-green: #FBF7EE;

  --nl-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --nl-font-body: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nl-radius-card: 18px;
  --nl-radius-chip: 999px;
  --nl-radius-btn: 999px;

  --nl-shadow-card: 0 1px 0 rgba(47, 73, 58, 0.04), 0 24px 48px -28px rgba(47, 73, 58, 0.18);
  --nl-shadow-cta: 0 1px 0 rgba(47, 73, 58, 0.12), 0 8px 20px -10px rgba(47, 73, 58, 0.4);
}

/* --------------------------------------------------------------------------
   2. Section frame
   -------------------------------------------------------------------------- */
.nl-product {
  background: var(--nl-cream);
  color: var(--nl-ink);
  font-family: var(--nl-font-body);
}

.nl-product .product__info-container {
  font-family: var(--nl-font-body);
  color: var(--nl-ink);
}

/* --------------------------------------------------------------------------
   3. Title + subtitle + chips
   -------------------------------------------------------------------------- */
.nl-product .product__title h1 {
  font-family: var(--nl-font-heading);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 38px) !important;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--nl-ink);
  margin: 0 0 0.4rem;
}
.nl-product .product__title h2.h1 { display: none; } /* duplicate quick-add title — hide on PDP */

.nl-product-subtitle {
  font-family: var(--nl-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--nl-ink-60);
  margin: 0 0 1rem;
  max-width: 56ch;
}

.nl-product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.nl-product-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--nl-radius-chip);
  background: var(--nl-warm-white);
  border: 1px solid var(--nl-hairline);
  color: var(--nl-deep-green);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nl-product-chips__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nl-sage);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. Purchase card
   -------------------------------------------------------------------------- */
.nl-product__purchase-card {
  background: var(--nl-warm-white);
  border: 1px solid var(--nl-hairline);
  border-radius: var(--nl-radius-card);
  padding: 16px 18px;
  margin: 0.5rem 0 1.1rem;
  box-shadow: var(--nl-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
@media (min-width: 750px) {
  .nl-product__purchase-card {
    padding: 20px 22px;
    gap: 13px;
  }
}

/* Zero out Dawn's per-block margins inside the card so gap controls rhythm */
.nl-product__purchase-card > * { margin: 0 !important; }
.nl-product__purchase-card .product-form__input { margin: 0 !important; }
.nl-product__purchase-card .price { margin: 0 !important; }
.nl-product__purchase-card .product-form { margin: 0 !important; }

/* Ensure the buy-buttons sentinel + every wrapper between it and the submit button
   take full card width so the Add to Cart button stretches edge-to-edge.
   The buy-buttons snippet emits an unclassed <div {{ block.shopify_attributes }}>
   between the sentinel and <product-form>; covering it via descendant + child combinator. */
.nl-product__purchase-card [data-nl-sticky-cta-sentinel],
.nl-product__purchase-card [data-nl-sticky-cta-sentinel] > div,
.nl-product__purchase-card [data-nl-sticky-cta-sentinel] product-form,
.nl-product__purchase-card [data-nl-sticky-cta-sentinel] .product-form,
.nl-product__purchase-card [data-nl-sticky-cta-sentinel] .product-form > form,
.nl-product__purchase-card [data-nl-sticky-cta-sentinel] .product-form__buttons,
.nl-product__purchase-card product-form,
.nl-product__purchase-card .product-form,
.nl-product__purchase-card .product-form > form,
.nl-product__purchase-card .product-form__buttons {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Price block */
.nl-product__purchase-card .price__container .price-item {
  font-family: var(--nl-font-body);
  font-weight: 600;
  font-size: 24px;
  color: var(--nl-ink);
  letter-spacing: -0.01em;
}
.nl-product__purchase-card .price__container .price-item--sale {
  color: var(--nl-clay);
}

/* Variant picker pills */
.nl-product__purchase-card .product-form__input label.form__label,
.nl-product__purchase-card .product-form__input legend.form__label {
  font-family: var(--nl-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nl-ink-60);
  margin-bottom: 4px;
}

.nl-product__purchase-card fieldset.product-form__input input[type='radio'] + label {
  border: 1px solid var(--nl-hairline);
  border-radius: var(--nl-radius-chip);
  background: var(--nl-card-bg);
  color: var(--nl-ink);
  margin: 5px 8px 5px 0;
  padding: 8px 16px;
  font-size: 14px;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

/* Extra breathing room between stacked variant groups (e.g. Size → Scent) */
.nl-product__purchase-card variant-selects .product-form__input + .product-form__input {
  margin-top: 14px !important;
}
.nl-product__purchase-card fieldset.product-form__input input[type='radio']:checked + label {
  border-color: var(--nl-deep-green);
  background: var(--nl-deep-green);
  color: var(--nl-on-green);
}
.nl-product__purchase-card fieldset.product-form__input input[type='radio'].disabled + label,
.nl-product__purchase-card fieldset.product-form__input input[type='radio'][disabled] + label {
  opacity: 0.55;
  text-decoration: line-through;
}

/* Scent selector dropdown */
.nl-product__purchase-card .product-form__input--scent .select {
  max-width: 100%;
}
.nl-product__purchase-card .product-form__input--scent .select__select {
  border-radius: 10px;
  border: 1px solid var(--nl-hairline);
  background: var(--nl-card-bg);
}

/* Quantity selector */
.nl-product__purchase-card .product-form__quantity {
  width: max-content;
  align-self: flex-start;
}
.nl-product__purchase-card .quantity {
  border-radius: 10px;
  border: 1px solid var(--nl-hairline);
  background: var(--nl-card-bg);
  width: 140px !important;
  max-width: 140px !important;
  min-width: 130px;
}
.nl-product__purchase-card .quantity .quantity__button {
  color: var(--nl-deep-green);
}
.nl-product__purchase-card .quantity .quantity__input {
  background: transparent;
  font-weight: 600;
}

/* Add to cart button — deep green, full width inside card */
.nl-product__purchase-card .product-form__submit,
.nl-product__purchase-card .product-form__submit.button,
.nl-product__purchase-card .product-form .product-form__submit,
.nl-product__purchase-card .product-form__buttons .product-form__submit {
  background: var(--nl-deep-green);
  color: var(--nl-on-green);
  border: none;
  border-radius: var(--nl-radius-btn);
  padding: 13px 24px;
  font-family: var(--nl-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: var(--nl-shadow-cta);
  transition: background 140ms ease, transform 140ms ease;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.nl-product__purchase-card .product-form__submit:hover:not([disabled]),
.nl-product__purchase-card .product-form__submit:focus-visible:not([disabled]) {
  background: var(--nl-deep-green-700);
}
.nl-product__purchase-card .product-form__submit[disabled] {
  background: var(--nl-sage);
  color: var(--nl-on-green);
  opacity: 0.85;
  box-shadow: none;
}

/* Reset Dawn ::after fade overlay on disabled button so we own the look */
.nl-product__purchase-card .product-form__submit::after,
.nl-product__purchase-card .product-form__submit::before { display: none; }

/* Easto subscription form softening — target by class, app uses its own classes */
.nl-product__purchase-card [id^="shopify-block-"][id*="easto_subscriptions_form"] {
  max-width: 100% !important;
}
.nl-product__purchase-card [id^="shopify-block-"][id*="easto_subscriptions_form"] label {
  color: var(--nl-ink) !important;
}
/* Subscription reassurance — hidden by default, JS reveals when Subscribe is selected */
.nl-product .nl-subscription-reassurance {
  font-size: 12.5px;
  color: var(--nl-ink-60);
  margin: -4px 0 0 !important;
  font-style: italic;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nl-product .nl-subscription-reassurance::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nl-sage);
  flex-shrink: 0;
}
.nl-product .nl-subscription-reassurance[hidden] {
  display: none !important;
}

/* Trust badges restyle (replaces inline-styled custom_liquid version) */
.nl-product__purchase-card .nl-trust-badges,
.nl-product .nl-trust-badges {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px !important;
  padding: 10px 4px 0 !important;
  margin: 2px 0 0 !important;
  max-width: none !important;
  border-top: 1px solid var(--nl-hairline);
  flex-wrap: unset !important;
}
.nl-product__purchase-card .nl-trust-badge,
.nl-product .nl-trust-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: none !important;
  flex: unset !important;
}
.nl-product__purchase-card .nl-trust-badge__icon svg,
.nl-product .nl-trust-badge__icon svg {
  width: 22px !important;
  height: 22px !important;
  margin-bottom: 0 !important;
  color: var(--nl-deep-green) !important;
}
.nl-product__purchase-card .nl-trust-badge__text,
.nl-product .nl-trust-badge__text {
  font-family: var(--nl-font-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--nl-ink-60) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
@media (max-width: 749px) {
  .nl-product__purchase-card .nl-trust-badges,
  .nl-product .nl-trust-badges {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 12px 0 0 !important;
  }
  .nl-product__purchase-card .nl-trust-badge__icon svg,
  .nl-product .nl-trust-badge__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .nl-product__purchase-card .nl-trust-badge__text,
  .nl-product .nl-trust-badge__text {
    font-size: 10.5px !important;
  }
}

/* --------------------------------------------------------------------------
   5. What's Not Inside chip grid
   -------------------------------------------------------------------------- */
.nl-product-not-inside {
  margin: 1.5rem 0 1.25rem;
}
.nl-product-not-inside__label {
  font-family: var(--nl-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nl-clay);
  margin: 0 0 10px;
}
.nl-product-not-inside__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nl-product-not-inside__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--nl-card-bg);
  border: 1px solid var(--nl-hairline);
  border-radius: var(--nl-radius-chip);
  color: var(--nl-ink-60);
  font-size: 12.5px;
  font-weight: 500;
}
.nl-product-not-inside__chip::before {
  content: "✕";
  font-size: 10px;
  font-weight: 700;
  color: var(--nl-clay);
}

/* --------------------------------------------------------------------------
   6. Product Details — wrapper card + accordion polish
   -------------------------------------------------------------------------- */
.nl-product-details {
  margin: 28px 0 8px;
  background: var(--nl-warm-white);
  border: 1px solid var(--nl-hairline);
  border-radius: 22px;
  padding: 18px 16px 6px;
  box-shadow: 0 1px 0 rgba(47, 73, 58, 0.03);
}
@media (min-width: 750px) {
  .nl-product-details {
    margin: 32px 0 12px;
    padding: 24px 26px 8px;
    border-radius: 24px;
  }
}
.nl-product-details__header {
  text-align: left;
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--nl-hairline);
  margin-bottom: 4px;
}
@media (min-width: 750px) {
  .nl-product-details__header {
    padding: 2px 4px 18px;
    margin-bottom: 6px;
  }
}
.nl-product-details__eyebrow {
  font-family: var(--nl-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nl-honey);
  margin: 0 0 8px;
}
.nl-product-details__sub {
  font-family: var(--nl-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--nl-ink-60);
  margin: 0;
  max-width: 56ch;
}
.nl-product-details__group { /* container for the 3 accordions */ }

/* Accordion shell */
.nl-product .product__accordion {
  border-top: 1px solid var(--nl-hairline);
  border-radius: 0;
  background: transparent;
}
.nl-product-details__group .product__accordion:first-of-type {
  border-top: none;
}
.nl-product-details__group .product__accordion:last-of-type {
  border-bottom: none;
}
.nl-product .product__accordion:last-of-type {
  border-bottom: 1px solid var(--nl-hairline);
}

/* Accordion header (summary) */
.nl-product .product__accordion summary {
  list-style: none;
  padding: 18px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 140ms ease;
}
.nl-product .product__accordion summary::-webkit-details-marker { display: none; }
.nl-product .product__accordion summary:hover {
  background: rgba(143, 174, 139, 0.08);
}
.nl-product .product__accordion[open] summary {
  background: rgba(143, 174, 139, 0.1);
}
.nl-product .product__accordion summary:focus-visible {
  outline: 2px solid var(--nl-deep-green);
  outline-offset: 2px;
}
.nl-product .product__accordion summary .summary__title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Icon tile around the existing accordion icon.
   Dawn wraps icons in <span class="svg-wrapper">, which has its own
   dimensions + line-height — explicitly reset that wrapper to a flex box
   matching the SVG size so the icon is perfectly centred in the tile. */
.nl-product .nl-accordion-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(143, 174, 139, 0.16);
  color: var(--nl-deep-green);
  flex-shrink: 0;
  padding: 0 !important;
  line-height: 0;
  transition: background 140ms ease, color 140ms ease;
}
.nl-product .nl-accordion-icon-tile .svg-wrapper,
.nl-product .nl-accordion-icon-tile > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  color: inherit;
}
.nl-product .nl-accordion-icon-tile svg {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  color: var(--nl-deep-green);
  vertical-align: top;
}
.nl-product .product__accordion[open] .nl-accordion-icon-tile {
  background: var(--nl-deep-green);
  color: var(--nl-on-green);
}
.nl-product .product__accordion[open] .nl-accordion-icon-tile svg {
  color: var(--nl-on-green);
}

/* Title text */
.nl-product .product__accordion .accordion__title,
.nl-product .product__accordion summary .summary__title h2 {
  font-family: var(--nl-font-heading) !important;
  font-size: 22px !important;
  font-weight: 500;
  color: var(--nl-ink);
  letter-spacing: -0.005em;
  margin: 0 !important;
  line-height: 1.2;
}
.nl-product .product__accordion[open] summary .accordion__title,
.nl-product .product__accordion[open] summary .summary__title h2 {
  color: var(--nl-deep-green);
}

/* Caret chevron — pulled to the far right, smaller, rotates on open */
.nl-product .product__accordion summary > svg,
.nl-product .product__accordion summary > .icon-caret {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--nl-ink-60);
  transition: transform 200ms ease, color 200ms ease;
}
.nl-product .product__accordion[open] summary > svg,
.nl-product .product__accordion[open] summary > .icon-caret {
  color: var(--nl-deep-green);
}
.nl-product .product__accordion .accordion__content {
  padding: 8px 6px 26px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--nl-ink);
  max-width: 660px;
}
@media (min-width: 750px) {
  .nl-product .product__accordion .accordion__content {
    padding-left: 44px; /* align with title text past the 32px tile + 12px gap */
  }
}
.nl-product .product__accordion .accordion__content p {
  margin: 0 0 1.1em;
}
.nl-product .product__accordion .accordion__content p:last-child { margin-bottom: 0; }
.nl-product .product__accordion .accordion__content ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.25em;
}
.nl-product .product__accordion .accordion__content ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.55em;
  line-height: 1.65;
}
.nl-product .product__accordion .accordion__content ul li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nl-sage);
}
.nl-product .product__accordion .accordion__content ol {
  padding-left: 1.4em;
  margin: 0 0 1.25em;
}
.nl-product .product__accordion .accordion__content ol li {
  margin-bottom: 0.55em;
  line-height: 1.65;
  padding-left: 0.2em;
}
.nl-product .product__accordion .accordion__content ol li::marker {
  color: var(--nl-sage);
  font-weight: 600;
}
.nl-product .product__accordion .accordion__content li > strong:first-child {
  color: var(--nl-deep-green);
  font-weight: 600;
}
.nl-product .product__accordion .accordion__content li:last-child { margin-bottom: 0; }
.nl-product .product__accordion .accordion__content h2,
.nl-product .product__accordion .accordion__content h3,
.nl-product .product__accordion .accordion__content h4 {
  font-family: var(--nl-font-heading);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  color: var(--nl-deep-green);
  margin: 1.75em 0 0.55em;
  letter-spacing: -0.005em;
}
.nl-product .product__accordion .accordion__content > h2:first-child,
.nl-product .product__accordion .accordion__content > h3:first-child,
.nl-product .product__accordion .accordion__content > h4:first-child { margin-top: 0.25em; }
.nl-product .product__accordion .accordion__content h2 + p,
.nl-product .product__accordion .accordion__content h3 + p,
.nl-product .product__accordion .accordion__content h4 + p,
.nl-product .product__accordion .accordion__content h2 + ul,
.nl-product .product__accordion .accordion__content h3 + ul,
.nl-product .product__accordion .accordion__content h4 + ul { margin-top: -0.05em; }
.nl-product .product__accordion .accordion__content strong { color: var(--nl-deep-green); font-weight: 600; }
.nl-product .product__accordion .accordion__content em { color: var(--nl-ink); }
.nl-product .product__accordion .accordion__content hr {
  border: none;
  border-top: 1px solid var(--nl-hairline);
  margin: 1.6em 0;
}
.nl-product .product__accordion svg.icon-accordion { color: var(--nl-sage); }

/* --------------------------------------------------------------------------
   6b. Per-tab visual treatment (slug derived from heading via handleize)
   -------------------------------------------------------------------------- */
/* Description — editorial first paragraph */
.nl-product .product__accordion[data-nl-tab="description"] .accordion__content > p:first-child,
.nl-product .product__accordion[data-nl-tab="description"] .accordion__content > p:first-of-type {
  font-size: 17px;
  line-height: 1.65;
  color: var(--nl-ink);
  margin-bottom: 1.25em;
}

/* Ingredients — soft inset panel for the ingredient list, footnotes sit outside */
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content {
  padding-right: 6px;
}
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content > ul:first-of-type {
  background: var(--nl-card-bg);
  border: 1px solid var(--nl-hairline);
  border-radius: 12px;
  padding: 8px 16px;
  list-style: none;
  margin: 0 0 1em;
}
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content > ul:first-of-type > li {
  padding: 10px 0 10px 1.4em;
  margin: 0;
  border-bottom: 1px solid var(--nl-hairline);
  list-style: none;
}
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content > ul:first-of-type > li:last-child {
  border-bottom: none;
}
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content > ul:first-of-type > li::before {
  top: 1.25em;
  background: var(--nl-sage);
}
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content > ul:first-of-type > li > strong:first-child {
  color: var(--nl-ink);
  font-weight: 600;
}
/* Asterisk/organic markers — smaller and softer */
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content sup,
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content small {
  font-size: 0.8em;
  color: var(--nl-ink-60);
}
/* Trailing paragraph after ingredients list — softer footnote feel */
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content > ul + p,
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content > p:last-of-type:not(:first-of-type) {
  font-size: 13.5px;
  color: var(--nl-ink-60);
  line-height: 1.55;
  background: transparent;
  border: none;
  padding: 10px 4px 0;
  margin-top: 6px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   6c. Reusable section patterns (auto-applied by nl-product-details.js, also
       hand-applicable via Shopify rich-text source editor). Works inside any
       .accordion__content; safe defaults if classes are missing.
   -------------------------------------------------------------------------- */

/* Premium micro-section heading */
.nl-product .product__accordion .accordion__content .nl-section-heading {
  font-family: var(--nl-font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nl-deep-green);
  margin: 1.8em 0 0.7em;
  padding: 0;
  background: none !important;
  border-radius: 0 !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.nl-product .product__accordion .accordion__content .nl-section-heading::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--nl-sage);
  flex-shrink: 0;
  border-radius: 2px;
}
.nl-product .product__accordion .accordion__content > .nl-section-heading:first-child {
  margin-top: 0.4em;
}
.nl-product .product__accordion .accordion__content .nl-section-heading--free-from::before { background: var(--nl-clay); }
.nl-product .product__accordion .accordion__content .nl-section-heading--caution { color: var(--nl-clay); }
.nl-product .product__accordion .accordion__content .nl-section-heading--caution::before { background: var(--nl-clay); }

/* Benefit cards — "Why Parents Love It" */
.nl-product .product__accordion .accordion__content ul.nl-pdp-benefits {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.4em !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 750px) {
  .nl-product .product__accordion .accordion__content ul.nl-pdp-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-benefits > li {
  background: var(--nl-card-bg);
  border: 1px solid var(--nl-hairline);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 !important;
  position: static;
  list-style: none !important;
  line-height: 1.55;
  font-size: 14.5px;
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-benefits > li::before {
  display: none !important;
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-benefits > li > strong:first-child {
  display: block;
  font-family: var(--nl-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nl-deep-green);
  margin-bottom: 3px;
  letter-spacing: 0;
  text-transform: none;
}

/* Ingredient spotlight rows — "What's Inside" */
.nl-product .product__accordion .accordion__content ul.nl-pdp-spotlights {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.4em !important;
  border-top: 1px solid var(--nl-hairline);
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-spotlights > li {
  padding: 14px 4px !important;
  border-bottom: 1px solid var(--nl-hairline);
  margin: 0 !important;
  position: static;
  list-style: none !important;
  line-height: 1.6;
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-spotlights > li::before {
  display: none !important;
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-spotlights > li > strong:first-child {
  display: block;
  font-family: var(--nl-font-heading);
  font-size: 19px;
  font-weight: 500;
  color: var(--nl-deep-green);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-transform: none;
}

/* Free-from chips — "What's Not Inside" */
.nl-product .product__accordion .accordion__content ul.nl-pdp-free-from {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.4em !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-free-from > li {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 6px 11px !important;
  background: var(--nl-card-bg);
  border: 1px solid var(--nl-hairline);
  border-radius: 999px;
  color: var(--nl-ink-60);
  font-size: 12.5px;
  font-weight: 500;
  margin: 0 !important;
  position: static;
  list-style: none !important;
  line-height: 1.4;
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-free-from > li::before {
  content: "✕" !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 10px;
  font-weight: 700;
  color: var(--nl-clay);
  top: auto !important;
  left: auto !important;
}

/* Callout — note / allergen / patch-test */
.nl-product .product__accordion .accordion__content .nl-pdp-callout {
  background: rgba(183, 121, 98, 0.08);
  border-left: 3px solid var(--nl-clay);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  margin: 0.8em 0 1.2em;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--nl-ink);
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-callout {
  list-style: none !important;
}
.nl-product .product__accordion .accordion__content ul.nl-pdp-callout > li::before {
  display: none !important;
}
.nl-product .product__accordion .accordion__content .nl-pdp-callout > strong:first-child,
.nl-product .product__accordion .accordion__content .nl-pdp-callout > p:first-child > strong:first-child {
  color: var(--nl-clay);
  font-weight: 600;
}

/* Ingredients footnote (applied by JS to italic-only or marker-explanation paragraphs) */
.nl-product .product__accordion[data-nl-tab="ingredients"] .accordion__content .nl-ingredients-footnote {
  background: transparent !important;
  border: none !important;
  padding: 10px 4px 0 !important;
  font-size: 13px !important;
  color: var(--nl-ink-60) !important;
  font-style: italic;
  line-height: 1.55;
  margin: 6px 0 0;
}

/* --------------------------------------------------------------------------
   6d. Product description rich content (Shopify rich text using semantic
       nl-* classes). Scoped under .accordion__content so the new selectors
       win over the generic > p / > h*/> ul rules in section 6.
   -------------------------------------------------------------------------- */
.nl-product .product__accordion .accordion__content .nl-product-description,
.nl-product-description {
  color: var(--nl-ink);
  font-family: var(--nl-font-body);
  container-type: inline-size;
  container-name: nl-pdp-desc;
}
/* Neutralise the generic .accordion__content > rules when wrapped in nl-product-description */
.nl-product .product__accordion .accordion__content .nl-product-description p {
  line-height: 1.75;
  color: rgba(37, 37, 31, 0.86);
  margin: 0 0 1.1em;
}
.nl-product .product__accordion .accordion__content .nl-product-description > section + section {
  margin-top: 2.25rem;
}

/* Editorial intro paragraph */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-product-intro,
.nl-product-description .nl-product-intro {
  margin: 0 0 1.85rem;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--nl-ink);
}

/* Section wrappers — consistent rhythm between micro-sections.
   Slightly more breath when a section follows the benefit-card stack or
   another section block, so the headings feel like deliberate openers. */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-detail-section,
.nl-product-description .nl-detail-section {
  margin: 2.2rem 0 0;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-detail-section:first-of-type,
.nl-product-description .nl-detail-section:first-of-type {
  margin-top: 0; /* already spaced by intro paragraph bottom margin */
}

/* Detail subsection heading — gold tick + small caps */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-detail-heading,
.nl-product-description .nl-detail-heading {
  position: relative;
  margin: 0 0 1rem !important;
  padding: 0 0 0 1rem !important;
  font-family: var(--nl-font-body) !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--nl-deep-green) !important;
  border: none !important;
  background: none !important;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-detail-heading::before,
.nl-product-description .nl-detail-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 3px;
  height: 1em;
  border-radius: 999px;
  background: var(--nl-honey);
}

/* Why Parents Love It — benefit grid (stacked rows by default).
   2-col only kicks in via @container query below when the description container
   is actually wide enough — so the right column of a narrow PDP stays stacked. */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-benefit-grid,
.nl-product-description .nl-benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl-product .product__accordion .accordion__content .nl-product-description .nl-benefit-card,
.nl-product-description .nl-benefit-card {
  padding: 0.75rem 1rem;
  border: 1px solid var(--nl-hairline);
  border-radius: 14px;
  background: var(--nl-warm-white);
  position: relative;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-benefit-card::before {
  display: none !important;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-benefit-card h4,
.nl-product-description .nl-benefit-card h4 {
  margin: 0 0 0.2rem !important;
  padding: 0;
  font-family: var(--nl-font-body) !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: var(--nl-deep-green) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: none !important;
  background: none !important;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-benefit-card p,
.nl-product-description .nl-benefit-card p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(37, 37, 31, 0.72) !important;
}

/* What's Inside — ingredient spotlight rows.
   Outer wrapper is now a soft sage-tinted "group" rather than a bordered panel,
   so it doesn't compete visually with the inner card borders. */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-ingredient-spotlight-list,
.nl-product-description .nl-ingredient-spotlight-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.5rem;
  border: none;
  border-radius: 14px;
  background: rgba(143, 174, 139, 0.07);
  list-style: none;
}

.nl-product .product__accordion .accordion__content .nl-product-description .nl-ingredient-spotlight,
.nl-product-description .nl-ingredient-spotlight {
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  background: var(--nl-warm-white);
  border: 1px solid var(--nl-hairline);
  position: relative;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-ingredient-spotlight::before {
  display: none !important;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-ingredient-spotlight h4,
.nl-product-description .nl-ingredient-spotlight h4 {
  margin: 0 0 0.2rem !important;
  padding: 0;
  font-family: var(--nl-font-body) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--nl-deep-green) !important;
  text-transform: none !important;
  border: none !important;
  background: none !important;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-ingredient-spotlight p,
.nl-product-description .nl-ingredient-spotlight p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(37, 37, 31, 0.74) !important;
}

/* What's Not Inside — chip grid */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-free-from-grid,
.nl-product-description .nl-free-from-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl-product .product__accordion .accordion__content .nl-product-description .nl-free-from-chip,
.nl-product-description .nl-free-from-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 12px !important;
  border: 1px solid var(--nl-hairline);
  border-radius: 999px;
  background: var(--nl-warm-white);
  color: var(--nl-deep-green);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  position: relative;
  margin: 0 !important;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-free-from-chip::before {
  display: none !important; /* no sage dot */
}

/* Organic standards note — soft honey-bordered callout.
   Extra bottom margin so the next accordion (Ingredients) starts after a
   visible breath, marking the Description as a complete unit. */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-organic-standard-note,
.nl-product-description .nl-organic-standard-note {
  margin: 1.85rem 0 0.6rem !important;
  padding: 0.95rem 1.1rem !important;
  border-left: 3px solid var(--nl-honey);
  border-radius: 0 14px 14px 0;
  background: var(--nl-card-bg);
  color: var(--nl-ink);
  font-size: 13.5px;
  line-height: 1.6;
}
.nl-product-description .nl-organic-standard-note strong {
  font-weight: 600;
  color: var(--nl-deep-green);
}

/* Container query — switch benefit grid to 2-col only when the description
   container itself has room for at least two ~250px cards with gap. */
@container nl-pdp-desc (min-width: 560px) {
  .nl-product .product__accordion .accordion__content .nl-product-description .nl-benefit-grid,
  .nl-product-description .nl-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

/* Free-from chips — guarantee clean wrapping, no overflow */
.nl-product .product__accordion .accordion__content .nl-product-description .nl-free-from-grid {
  max-width: 100%;
  overflow-wrap: break-word;
}
.nl-product .product__accordion .accordion__content .nl-product-description .nl-free-from-chip {
  max-width: 100%;
  white-space: normal;
}

/* Mobile refinements */
@media (max-width: 749px) {
  .nl-product-description .nl-product-intro {
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0 0 1.5rem;
  }
  .nl-product-description .nl-detail-section {
    margin-top: 1.5rem;
  }
  .nl-product-description .nl-benefit-grid {
    gap: 0.5rem;
  }
  .nl-product-description .nl-benefit-card,
  .nl-product-description .nl-ingredient-spotlight {
    padding: 0.8rem 0.9rem;
  }
  .nl-product-description .nl-free-from-chip {
    font-size: 11.5px;
    padding: 5px 11px !important;
  }
  .nl-product-description .nl-organic-standard-note {
    padding: 0.85rem 0.95rem !important;
    font-size: 13px;
    margin: 1.5rem 0 0.4rem !important;
  }
}

/* --------------------------------------------------------------------------
   6e. Rich text metafield accordions — Ingredients & Suggested Use.
   Shopify's `metafield_tag` filter wraps the rendered HTML in
   <div class="metafield-rich_text_field">, so selectors drill through it.
   Mini-section headings written as <p><strong>Heading:</strong></p> are
   detected via :has() and styled the same way as .nl-detail-heading from
   the Description tab.
   -------------------------------------------------------------------------- */

/* --- Common base --- */
.nl-product .product__accordion .accordion__content .nl-accordion-content {
  font-family: var(--nl-font-body);
  color: var(--nl-ink);
}
.nl-product .product__accordion .accordion__content .nl-accordion-content .metafield-rich_text_field {
  display: block;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content p {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(37, 37, 31, 0.86);
  margin: 0 0 1em;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content p:last-child {
  margin-bottom: 0;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content strong {
  font-weight: 600;
  color: var(--nl-deep-green);
}
/* Hide stray empty <p></p>s Shopify's rich text editor sometimes emits */
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients p:empty,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use p:empty {
  display: none;
}

/* Real <h2>/<h3>/<h4> in the metafield: same treatment as <p><strong> */
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients h2,
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients h3,
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients h4,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use h2,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use h3,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use h4,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use p:has(> strong:only-child) {
  position: relative;
  margin: 2.4em 0 0.7em !important;
  padding: 0 0 0 1rem !important;
  font-family: var(--nl-font-body) !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--nl-deep-green) !important;
  background: none !important;
  border: none !important;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients h2::before,
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients h3::before,
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients h4::before,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use h2::before,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use h3::before,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use h4::before,
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use p:has(> strong:only-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 3px;
  height: 1em;
  border-radius: 999px;
  background: var(--nl-honey);
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use p:has(> strong:only-child) > strong {
  font-weight: 700 !important;
  color: inherit !important;
  letter-spacing: inherit;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use .metafield-rich_text_field > p:first-of-type:has(> strong:only-child),
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients .metafield-rich_text_field > p:first-of-type:has(> strong:only-child) {
  margin-top: 0 !important;
}

/* ============ Ingredients ============ */
/* Ingredient list — soft sage-tinted group panel of warm-white row cards */
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients ul {
  list-style: none !important;
  padding: 0.5rem !important;
  margin: 0 0 1em !important;
  border: none !important;
  border-radius: 14px;
  background: rgba(143, 174, 139, 0.08);
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients ul li {
  padding: 0.7rem 0.95rem !important;
  margin: 0 0 0.35rem !important;
  border-radius: 10px;
  background: var(--nl-warm-white);
  border: 1px solid var(--nl-hairline);
  list-style: none !important;
  font-size: 14px;
  line-height: 1.55;
  color: var(--nl-ink);
  position: relative;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients ul li:last-child {
  margin-bottom: 0 !important;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients ul li::before {
  display: none !important;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients ul li > strong {
  font-weight: 600;
  color: var(--nl-deep-green);
}
/* Trailing asterisk-style footnote, e.g. "*Certified organic ingredient" */
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients .metafield-rich_text_field > p {
  font-size: 13px;
  color: var(--nl-ink-60);
  font-style: italic;
  line-height: 1.55;
  padding: 0 4px;
  margin: 0.5em 0 0.6em;
}
/* Closing callout note — bold + italic ("That's it… just pure plant goodness!") */
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients .metafield-rich_text_field > p:has(> em > strong),
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients .metafield-rich_text_field > p:has(> strong > em) {
  margin: 0.9em 0 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(143, 174, 139, 0.09);
  border-left: 3px solid var(--nl-sage);
  font-size: 14px;
  font-style: italic;
  color: var(--nl-deep-green);
  text-align: left;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients .metafield-rich_text_field > p:has(> em > strong) strong,
.nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients .metafield-rich_text_field > p:has(> strong > em) strong {
  font-weight: 600;
  color: var(--nl-deep-green);
}

/* ============ Suggested Use ============ */
/* Unordered list under a strong-heading — soft sage-tinted callout block */
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ul {
  list-style: none;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  margin: 0 0 1em;
  background: rgba(143, 174, 139, 0.07);
  border-radius: 12px;
  border: 1px solid var(--nl-hairline);
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ul li {
  position: relative;
  padding-left: 1.25em;
  margin: 0 0 0.5em;
  line-height: 1.6;
  font-size: 14.5px;
  color: var(--nl-ink);
  list-style: none;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ul li:last-child {
  margin-bottom: 0;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ul li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nl-sage);
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ul li > strong {
  color: var(--nl-deep-green);
  font-weight: 600;
}

/* Ordered list (steps) — numbered cards */
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol {
  list-style: none;
  counter-reset: nl-step;
  padding: 0;
  margin: 0 0 1em;
  background: transparent;
  border: none;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol > li {
  counter-increment: nl-step;
  position: relative;
  padding: 0.8rem 1rem 0.8rem 4.3rem !important;
  margin: 0 0 0.4rem !important;
  border-radius: 10px;
  background: var(--nl-warm-white);
  border: 1px solid var(--nl-hairline);
  list-style: none !important;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--nl-ink);
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol > li:last-child {
  margin-bottom: 0 !important;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol > li::before {
  content: counter(nl-step);
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(143, 174, 139, 0.18);
  color: var(--nl-deep-green);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol > li::marker {
  content: "";
}

/* <blockquote> opt-in: render as a clay-toned warning/note callout */
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use blockquote {
  background: rgba(183, 121, 98, 0.08);
  border-left: 3px solid var(--nl-clay);
  border-radius: 0 12px 12px 0;
  padding: 0.85rem 1rem;
  margin: 0.9em 0;
  font-size: 14.5px;
  color: var(--nl-ink);
  font-style: normal;
  line-height: 1.6;
}
.nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use blockquote p {
  margin: 0;
}

/* Mobile refinements */
@media (max-width: 749px) {
  .nl-product .product__accordion .accordion__content .nl-accordion-content p,
  .nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol > li,
  .nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ul li {
    font-size: 14px;
  }
  .nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients ul {
    padding: 0.4rem !important;
  }
  .nl-product .product__accordion .accordion__content .nl-accordion-content--ingredients ul li {
    padding: 0.6rem 0.85rem !important;
  }
  .nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ul {
    padding: 0.75rem 0.9rem 0.75rem 1rem;
  }
  .nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol > li {
    padding: 0.7rem 0.9rem 0.7rem 3.9rem !important;
  }
  .nl-product .product__accordion .accordion__content .nl-accordion-content--suggested-use ol > li::before {
    left: 0.8rem;
  }
}

/* --------------------------------------------------------------------------
   7. Gallery polish
   -------------------------------------------------------------------------- */
.nl-product .product__media-wrapper { background: transparent; }
.nl-product .product__media-list .product__media-item .product__media,
.nl-product .product__media {
  background: var(--nl-warm-white);
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid var(--nl-hairline);
}
.nl-product .product__media-list .product__media img,
.nl-product .product__media img,
.nl-product .product__modal-opener img {
  border-radius: 18px;
}

.nl-product .thumbnail-list { gap: 10px; margin-top: 12px; }
.nl-product .thumbnail-list .thumbnail {
  border-radius: 12px;
  border: 1px solid var(--nl-hairline);
  background: var(--nl-warm-white);
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease;
}
.nl-product .thumbnail-list .thumbnail img {
  border-radius: 12px;
}
.nl-product .thumbnail-list .thumbnail:hover {
  border-color: var(--nl-sage);
}
.nl-product .thumbnail-list .thumbnail[aria-current="true"],
.nl-product .thumbnail-list .thumbnail.is-active {
  border-color: var(--nl-deep-green);
  box-shadow: 0 0 0 1px var(--nl-deep-green);
}
.nl-product .thumbnail-list .thumbnail::after {
  border: none !important;
}

/* --------------------------------------------------------------------------
   8. Judge.me preview badge — softer spacing
   -------------------------------------------------------------------------- */
.nl-product [class*="jdgm-prev-badge"],
.nl-product .jdgm-widget {
  margin-top: -4px;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   9. Bloy / Appstle softening (when present)
   -------------------------------------------------------------------------- */
.nl-product__purchase-card [id*="bloy-point-caculator-pdp"],
.nl-product__purchase-card [id*="appstle"] {
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   10. Share / packaging text
   -------------------------------------------------------------------------- */
.nl-product .share-button { margin-top: 10px; }
.nl-product .product__text {
  font-size: 13px;
  color: var(--nl-ink-45);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   11. Complete Your Nature Lane Routine — related products
   -------------------------------------------------------------------------- */
.nl-product-related {
  background: var(--nl-cream);
  padding: 32px 0 48px;
  color: var(--nl-ink);
}
@media (min-width: 750px) {
  .nl-product-related { padding: 56px 0 72px; }
}
.nl-product-related__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 750px) {
  .nl-product-related__inner { padding: 0 32px; }
}
.nl-product-related__header {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 580px;
}
.nl-product-related__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nl-honey);
  margin: 0 0 10px;
}
.nl-product-related__heading {
  font-family: var(--nl-font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--nl-ink);
  margin: 0 0 10px;
}
.nl-product-related__sub {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--nl-ink-60);
  margin: 0;
}

/* Bullet reset — applied to grid <ul> and every descendant <li> (cards may nest <ul>s) */
.nl-product-related ul,
.nl-product-related li,
.nl-product-related__grid,
.nl-product-related__grid li {
  list-style: none !important;
  padding-left: 0;
}

/* Mobile (default): horizontal scroll with snap.
   Centers in the section by symmetric inline padding; scroll bar hidden. */
.nl-product-related__grid {
  display: flex;
  gap: 12px;
  margin: 0 -20px;
  padding: 4px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: none;
}
.nl-product-related__grid::-webkit-scrollbar {
  display: none;
}
.nl-product-related__grid > li {
  flex: 0 0 78%;
  max-width: 280px;
  min-width: 220px;
  scroll-snap-align: start;
  margin: 0;
  display: block;
}
.nl-product-related__grid > li::marker,
.nl-product-related__grid > li::before { content: none !important; }

/* Pagination dots — mobile scroll affordance */
.nl-product-related__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
}
.nl-product-related__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--nl-hairline);
  background: transparent;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.nl-product-related__dot:hover {
  border-color: var(--nl-deep-green);
}
.nl-product-related__dot.is-active {
  background: var(--nl-deep-green);
  border-color: var(--nl-deep-green);
  transform: scale(1.15);
}
.nl-product-related__dot:focus-visible {
  outline: 2px solid var(--nl-deep-green);
  outline-offset: 3px;
}

/* Tablet & up: switch to centered grid */
@media (min-width: 750px) {
  .nl-product-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0 auto;
    padding: 0;
    max-width: 960px;
    justify-content: center;
  }
  .nl-product-related__grid > li {
    flex: initial;
    max-width: none;
    min-width: 0;
    scroll-snap-align: none;
  }
  .nl-product-related__dots { display: none; }
}

/* Restyle Dawn's card-product output inside our wrapper.
   The entire card is made clickable via nl-related-products.js (cursor:
   pointer + click delegation); Dawn's .card__inner aspect-ratio trick
   prevents a pure-CSS stretched-link overlay from spanning the wrapper. */
.nl-product-related .card-wrapper,
.nl-product-related .card {
  background: var(--nl-warm-white);
  border: 1px solid var(--nl-hairline);
  border-radius: 16px;
  padding: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease;
  height: 100%;
  cursor: pointer;
}
.nl-product-related .card-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: var(--nl-shadow-card);
}
/* Stretched link — Dawn's card-product only emits an anchor on the title,
   so use that anchor's ::after pseudo as a full-card click overlay positioned
   against .card-wrapper. The anchor itself stays position: static so ::after
   inherits .card-wrapper as its positioning context. */
.nl-product-related .card-wrapper .card__heading a.full-unstyled-link {
  position: static;
}
.nl-product-related .card-wrapper .card__heading a.full-unstyled-link::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  background: transparent;
  pointer-events: auto;
}
/* Keep card text/price selectable above the overlay; price isn't a link
   so it doesn't need to be clickable. */
.nl-product-related .card-wrapper .card__content,
.nl-product-related .card-wrapper .card__information {
  position: relative;
  z-index: 0; /* below overlay so the overlay catches clicks on the text area */
}
/* The title anchor's text needs to sit ABOVE the overlay for proper focus
   ring + keyboard access. */
.nl-product-related .card-wrapper .card__heading {
  position: relative;
  z-index: 2;
}
.nl-product-related .card-wrapper .card-wrapper:hover {
  cursor: pointer;
}
.nl-product-related .card__media {
  background: var(--nl-card-bg);
  border-radius: 10px;
  overflow: hidden;
  max-height: 260px;
}
.nl-product-related .card__media .media img {
  border-radius: 10px;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.nl-product-related .card__content,
.nl-product-related .card__information {
  padding: 12px 4px 2px;
}
.nl-product-related .card__heading,
.nl-product-related .card__heading a {
  font-family: var(--nl-font-heading) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  color: var(--nl-ink) !important;
  text-decoration: none !important;
  letter-spacing: -0.005em;
}
.nl-product-related .price .price-item {
  font-family: var(--nl-font-body);
  font-weight: 600;
  color: var(--nl-ink);
  font-size: 14.5px;
}
.nl-product-related .price__container {
  padding: 4px 4px 0;
}

/* --------------------------------------------------------------------------
   12. Reviews — polished Judge.me styling (Judge.me owns the empty state)
   -------------------------------------------------------------------------- */
/* Custom cue snippet is no longer wired into templates; selectors retained for safety in case any product still references it. */
.nl-product-reviews-empty { display: none; }

/* Judge.me widget — apply only inside our product page context */
.nl-product ~ * .jdgm-widget--product,
.jdgm-widget--product.nl-jdgm-styled,
section.section .jdgm-widget--product,
.jdgm-widget--product {
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 20px 72px;
  font-family: var(--nl-font-body);
  color: var(--nl-ink);
  scroll-margin-top: 100px;
}
/* Offset the anchor target itself in case Judge.me places the id on an inner node */
#judgeme_product_reviews,
[id="judgeme_product_reviews"] {
  scroll-margin-top: 100px;
}
@media (max-width: 749px) {
  .jdgm-widget--product {
    padding: 48px 20px 56px;
  }
}
.jdgm-widget .jdgm-rev-widg__title,
.jdgm-rev-widg__title {
  font-family: var(--nl-font-heading) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.6vw, 30px) !important;
  color: var(--nl-ink) !important;
  letter-spacing: -0.005em;
  text-align: center;
  margin-bottom: 6px !important;
}
.jdgm-rev-widg__summary {
  text-align: center !important;
}
.jdgm-rev-widg__summary-text,
.jdgm-rev-widg__sort-wrapper {
  color: var(--nl-ink-60) !important;
  font-family: var(--nl-font-body) !important;
}
/* "Be the first to write a review" message — softer */
.jdgm-rev-widg__summary-text,
.jdgm-rev-widg--no-reviews .jdgm-rev-widg__summary-text {
  font-size: 15px !important;
  margin-bottom: 14px !important;
}
/* Write a review button — Nature Lane pill */
.jdgm-write-rev-link,
.jdgm-write-rev-link.jdgm-write-rev-link--btn,
.jdgm-widget .jdgm-write-rev-link {
  background: var(--nl-deep-green) !important;
  color: var(--nl-on-green) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  font-family: var(--nl-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  box-shadow: var(--nl-shadow-cta) !important;
  transition: background 140ms ease !important;
}
.jdgm-write-rev-link:hover {
  background: var(--nl-deep-green-700) !important;
}
.jdgm-rev-widg__header-buttons,
.jdgm-rev-widg__header { text-align: center !important; }
.jdgm-form-wrapper { margin-top: 18px; }
.jdgm-form input,
.jdgm-form textarea,
.jdgm-form select {
  border-radius: 8px !important;
  border: 1px solid var(--nl-hairline) !important;
  background: var(--nl-warm-white) !important;
}

/* --------------------------------------------------------------------------
   13. Mobile sticky CTA
   -------------------------------------------------------------------------- */
.nl-product-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--nl-warm-white);
  border-top: 1px solid var(--nl-hairline);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 220ms ease;
  box-shadow: 0 -10px 30px -16px rgba(47, 73, 58, 0.25);
  display: none;
}
@media (max-width: 749px) {
  .nl-product-sticky-cta { display: block; }
}
.nl-product-sticky-cta.is-visible {
  transform: translateY(0);
}
.nl-product-sticky-cta__inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nl-product-sticky-cta__info {
  flex: 1 1 auto;
  min-width: 0;
}
.nl-product-sticky-cta__title {
  font-family: var(--nl-font-heading);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  color: var(--nl-ink);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nl-product-sticky-cta__price {
  font-size: 13px;
  font-weight: 600;
  color: var(--nl-ink-60);
  margin: 2px 0 0;
}
.nl-product-sticky-cta__btn {
  flex: 0 0 auto;
  background: var(--nl-deep-green);
  color: var(--nl-on-green);
  border: none;
  border-radius: var(--nl-radius-btn);
  padding: 12px 22px;
  font-family: var(--nl-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--nl-shadow-cta);
  transition: background 140ms ease;
}
.nl-product-sticky-cta__btn:hover:not([disabled]),
.nl-product-sticky-cta__btn:focus-visible:not([disabled]) {
  background: var(--nl-deep-green-700);
}
.nl-product-sticky-cta__btn[disabled] {
  background: var(--nl-sage);
  opacity: 0.85;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   14. Misc — disabled state clarity on variant buttons
   -------------------------------------------------------------------------- */
.nl-product .variant-input-wrapper input[type='radio'].disabled + label,
.nl-product fieldset.product-form__input input[type='radio'].disabled + label {
  position: relative;
}
.nl-product fieldset.product-form__input input[type='radio'].disabled + label::after,
.nl-product fieldset.product-form__input input[type='radio'][disabled] + label::after {
  content: "sold out";
  font-size: 11px;
  color: var(--nl-ink-45);
  text-decoration: none;
  display: inline-block;
  margin-left: 4px;
  vertical-align: baseline;
}