/* Brand-specific additions; the approved layout and its cascade stay intact. */
body#lemme-sleep-gummies {
  --meltem-accent: #ff963d;
}
body#lemme-sleep-gummies .promobar {
  --marquee-background-color: var(--meltem-accent) !important;
}
body#lemme-sleep-gummies .btn--action {
  --button-color: var(--meltem-accent) !important;
}
body#lemme-sleep-gummies .cart-count,
body#lemme-sleep-gummies .rebuy-count,
body#lemme-sleep-gummies .rebuy-button {
  background-color: var(--meltem-accent) !important;
}
.site-header__logo .meltem-wordmark { width: 145px; max-width: none; height: 54px; object-fit: contain; filter: brightness(0) invert(1); }
.cc-message a { color: white; text-decoration: underline; }
.meltem-product-facts { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
@media (min-width: 1025px) {
  body#lemme-sleep-gummies .product [data-product-submit] {
    box-sizing: border-box !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 16px 24px !important;
    border: 1px solid #382943 !important;
    border-radius: 6px !important;
    background: var(--meltem-accent) !important;
    color: #241b30 !important;
    box-shadow: 0 3px 0 #382943;
    font: 700 20px/1.2 "Mier A", sans-serif !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
.product__background { background-color: #686eaf !important; }
#meltem-product, #meltem-ingredients, #meltem-how-to, #meltem-faqs, #meltem-care { scroll-margin-top: 135px; }
.meltem-care-intro { text-align: center; font-size: 19px; margin: 16px auto 48px; }
.meltem-care-list { padding: 0; list-style: none; }
.meltem-care-card { display: flex; padding: 38px 32px; min-height: 285px; }
.meltem-care-card .oke-w-review-side { width: 26%; flex-shrink: 0; padding-right: 36px; }
.meltem-care-card .oke-w-review-main { flex: 1; padding-left: 38px; border-left: 1px solid #c0b4ca; }
.meltem-care-label { font-weight: 700; font-size: 17px; margin-bottom: 24px; }
.meltem-care-card h3 { font: 500 29px/1.15 Recoleta, serif; margin: 0 0 24px; }
.meltem-care-card p { font: 17px/1.65 "Mier A", sans-serif; margin: 20px 0; }
.meltem-care-card a { font-size: 15px; font-weight: 700; text-decoration: underline; }
.meltem-care-card img { width: 72px; }
.meltem-supply-note { font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.meltem-order .btn { text-align: center; display: block; }
.meltem-order .meltem-remove { margin-top: 20px; border: 0; background: transparent; text-decoration: underline; cursor: pointer; }
.reference-toast .meltem-search-result { position: static; display: block; margin-top: 12px; font-size: 14px; text-align: left; text-decoration: underline; }

/* Tickers: equal groups travel exactly one group per loop. */
body#lemme-sleep-gummies .meltem-ticker {
  position: relative;
  display: block;
  overflow: hidden;
}
body#lemme-sleep-gummies .meltem-ticker .marquee__content {
  display: flex !important;
  width: max-content !important;
  max-width: none !important;
  gap: 0 !important;
  animation: meltem-announcement-ticker var(--meltem-ticker-duration, 30s) linear infinite !important;
  will-change: transform;
}
body#lemme-sleep-gummies .meltem-ticker__group {
  display: flex !important;
  flex: 0 0 auto;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body#lemme-sleep-gummies .meltem-ticker__group > span {
  flex: 0 0 auto;
  white-space: nowrap;
}
body#lemme-sleep-gummies .meltem-ticker .marquee__movement {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: inherit;
  z-index: 2;
  cursor: pointer;
}
body#lemme-sleep-gummies .meltem-ticker .marquee__movement svg { width: 16px; height: 16px; }
body#lemme-sleep-gummies .marquee-section .meltem-ticker .marquee__movement { color: #fff; }
body#lemme-sleep-gummies .meltem-ticker .icon-pause path { stroke: currentColor; }
body#lemme-sleep-gummies .meltem-ticker .icon-play path { fill: currentColor; }
body#lemme-sleep-gummies .meltem-ticker .icon-play { display: none !important; }
body#lemme-sleep-gummies .meltem-ticker[data-paused="true"] .icon-pause { display: none !important; }
body#lemme-sleep-gummies .meltem-ticker[data-paused="true"] .icon-play { display: block !important; }
body#lemme-sleep-gummies .meltem-ticker[data-paused="true"] .marquee__content {
  animation-play-state: paused !important;
}
@keyframes meltem-announcement-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body#lemme-sleep-gummies .meltem-ticker .marquee__content {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
  body#lemme-sleep-gummies .meltem-ticker .marquee__movement { display: none !important; }
}

/* Campaign photography: keep the existing gallery and bundle geometry, while
   letting each image read as a deliberate, full-bleed editorial frame. */
.product-gallery .product-media-item img:not([src$=".svg"]) {
  object-fit: cover;
  max-height: none;
  object-position: center;
}
.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-gallery__thumb {
  overflow: hidden;
  border: 1px solid rgba(75, 60, 101, .16);
}

/* Informational slides contain exact typeset copy: never crop their edges.
   This covers the gallery, mobile template and enlarged viewer. */
body#lemme-sleep-gummies img[src*="/meltem-sleep/gallery/slide-"] {
  object-fit: contain !important;
  object-position: center !important;
}

/* The enlarged viewer is nested inside product-gallery. Override its inherited
   full-width photo sizing so square artwork also fits a shorter desktop screen. */
body#lemme-sleep-gummies .modal--product-gallery .product-media-item--image img {
  width: 100% !important;
  height: 100% !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 112px) !important;
  object-fit: contain !important;
  object-position: center !important;
}

body#lemme-sleep-gummies .product-gallery__carousel .product-media-item--image[role="button"] {
  cursor: pointer;
}
body#lemme-sleep-gummies .product-gallery__carousel .product-media-item--image[role="button"]:focus-visible {
  outline: 3px solid #241b30;
  outline-offset: -3px;
}

/* Compact, image-first gallery. The template places thumbnails after the
   carousel, so the natural reading order is also the visual order. */
body#lemme-sleep-gummies product-gallery.product-gallery {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start;
  gap: 10px;
  width: calc(100% - 32px);
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__carousel {
  box-sizing: border-box;
  order: 0;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__carousel .swiper-wrapper,
body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__carousel .swiper-slide {
  height: 100% !important;
  min-height: 0 !important;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__carousel .product-media-item--image {
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  aspect-ratio: 1 / 1;
}

/* No controls competing with the six directly selectable image previews. */
body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__carousel
  :is(.swiper-button-prev, .swiper-button-next, .swiper-pagination) {
  display: none !important;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__thumbnails {
  box-sizing: border-box;
  order: 1;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch;
  justify-content: stretch;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__thumbnails > .product-gallery__thumb {
  box-sizing: border-box;
  display: block !important;
  position: relative;
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(75, 60, 101, .22) !important;
  border-radius: 4px !important;
  background: #f2eff4;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__thumbnails > .product-gallery__thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: 3px !important;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__thumbnails > .product-gallery__thumb:is(.active, .is-active, [aria-current="true"], [aria-pressed="true"]) {
  border: 2px solid #ff963d !important;
  box-shadow: inset 0 0 0 1px #fff;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__thumbnails > .product-gallery__thumb:hover {
  border-color: #686eaf !important;
}

body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__thumbnails > .product-gallery__thumb:focus-visible {
  outline: 3px solid #241b30 !important;
  outline-offset: 2px;
  z-index: 1;
}

@media (min-width: 768px) {
  body#lemme-sleep-gummies product-gallery.product-gallery {
    width: min(500px, calc(100% - 64px));
  }
}

@media (min-width: 1025px) {
  body#lemme-sleep-gummies .meltem-product-row {
    justify-content: center !important;
  }

  body#lemme-sleep-gummies .meltem-product-row > .meltem-gallery-column {
    flex: 0 0 auto !important;
    width: calc(min(500px, calc(100dvh - 250px)) + 24px) !important;
    max-width: 100% !important;
  }

  body#lemme-sleep-gummies product-gallery.product-gallery {
    /* Clear both the 80px header and 32px announcement bar, plus 24px padding. */
    top: calc(80px + 32px + 24px) !important;
    width: min(500px, 100%, calc(100dvh - 250px));
    margin-inline: auto 0 !important;
  }
}

@media (max-width: 359px) {
  body#lemme-sleep-gummies product-gallery.product-gallery {
    width: calc(100% + 8px);
    margin-inline: auto !important;
  }

  body#lemme-sleep-gummies product-gallery.product-gallery > .product-gallery__thumbnails {
    grid-template-columns: repeat(6, minmax(44px, 1fr)) !important;
    gap: 4px !important;
  }
}

@media (max-width: 1024px) {
  body#lemme-sleep-gummies product-gallery.product-gallery {
    margin-bottom: 20px !important;
  }
}

.ingredients .ingredients__item-image {
  width: 100% !important;
  height: clamp(180px, 18vw, 246px);
  margin: 0 !important;
  overflow: hidden;
  border-radius: 3px;
  background: #eee9f0;
}
.ingredients .ingredients__item-image picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
.ingredients .ingredients__item-image img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}
.ingredients__item:hover .ingredients__item-image img { transform: scale(1.025); }

/* Full-scene supply photography belongs to the native Rebuy recommendation
   cards. The old decorative background was also supplying the media height;
   preserve its square slot explicitly without changing responsive card width. */
#shopify-section-template--27829125578966__17030084825c46780c
  .rebuy-product-block .rebuy-product-media:has(> a.rebuy-product-image[data-meltem-offer]) {
  position: relative;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
#shopify-section-template--27829125578966__17030084825c46780c
  .rebuy-product-media:has(> a.rebuy-product-image[data-meltem-offer]) > img.custom-background-img {
  display: none !important;
}
#shopify-section-template--27829125578966__17030084825c46780c
  .rebuy-product-media > a.rebuy-product-image[data-meltem-offer] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  animation: none !important;
  transform: none !important;
}
#shopify-section-template--27829125578966__17030084825c46780c
  .rebuy-product-media > a.rebuy-product-image[data-meltem-offer] > img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  transform: none !important;
}

/* Editorial still lifes replace the repeated icon; preserve the review-card
   composition and give the image enough scale to feel intentional. */
.meltem-care-card .oke-w-review-side > img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: 142px;
  margin: 0 0 14px;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(75, 60, 101, .14);
  border-radius: 3px;
}
.meltem-care .meltem-care-card {
  flex-direction: row !important;
  align-items: stretch;
}
.meltem-care .meltem-care-card .oke-w-review-side {
  padding: 0 36px 0 0;
}
.meltem-care .meltem-care-card .oke-w-review-main {
  min-width: 0;
  width: auto;
  padding: 0 0 0 38px;
  border: 0;
  border-left: 1px solid #c0b4ca;
}
.meltem-care .meltem-care-card .oke-w-review-main h3 {
  font: 500 29px/1.15 Recoleta, serif;
  margin: 0 0 24px;
}
.meltem-care .meltem-care-card p {
  font: 17px/1.65 "Mier A", sans-serif;
}
.meltem-care .meltem-care-card .meltem-care-symbol {
  object-fit: contain;
  border: 0;
}

@media(max-width:1024px) {
  .site-header__logo .meltem-wordmark { width: 110px; height: 44px; }
  .meltem-care-card { display: block; padding: 28px 20px; min-height: 350px; }
  .meltem-care .meltem-care-card { flex-direction: column !important; }
  .meltem-care .meltem-care-card .oke-w-review-side { width: auto; padding: 0; }
  .meltem-care-card .oke-w-review-side > img {
    display: block;
    width: 100%;
    max-width: none;
    height: clamp(118px, 34vw, 170px);
    margin: 14px 0 12px;
  }
  .meltem-care .meltem-care-card .oke-w-review-main { padding: 22px 0 0; border: 0; }
  .meltem-care-label { margin-bottom: 10px; }
  .meltem-care .meltem-care-card .oke-w-review-main h3 { font-size: 26px; }
  .meltem-care .meltem-care-card p { font-size: 16px; }
  .meltem-care-intro { font-size: 16px; padding-inline: 20px; }
}

/*
 * Meltem's section colors are one continuous page-space wash rather than
 * separate section panels. The stop positions are set from the live section
 * geometry by meltem-page.js; transparent section shells let that one wash
 * show through without seams.
 */
body#lemme-sleep-gummies {
  --meltem-gradient-height: 100vh;
  --meltem-gradient-stops:
    #686eaf 0,
    #686eaf 1%,
    #a79bc9 20%,
    #dfc8e7 36%,
    #e5bfd4 48%,
    #d8aed0 56%,
    #c5a5d2 63%,
    #dfc8e7 82%,
    #dfc8e7 100%;
  background-color: #dfc8e7 !important;
  background-image: linear-gradient(to bottom, var(--meltem-gradient-stops)) !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
  background-size: 100% var(--meltem-gradient-height) !important;
  background-attachment: scroll !important;
}

body#lemme-sleep-gummies #siteContent,
body#lemme-sleep-gummies #siteContent > .shopify-section,
body#lemme-sleep-gummies #siteContent .product__background,
body#lemme-sleep-gummies #siteContent .ingredients,
body#lemme-sleep-gummies #siteContent .no-list,
body#lemme-sleep-gummies #siteContent .faq,
body#lemme-sleep-gummies #siteContent .marquee-section--final,
body#lemme-sleep-gummies #siteContent .product-reviews,
body#lemme-sleep-gummies #shopify-section-social,
body#lemme-sleep-gummies #shopify-section-footer,
body#lemme-sleep-gummies .site-footer {
  background-color: transparent !important;
  background-image: none !important;
}

/* Keep editorial content surfaces legible above the flowing page color. */
body#lemme-sleep-gummies #siteContent .ingredients__item,
body#lemme-sleep-gummies #siteContent .accordion,
body#lemme-sleep-gummies #siteContent .meltem-care-card,
body#lemme-sleep-gummies #siteContent .rebuy-product-block {
  background-color: #f7f1f9;
}

body#lemme-sleep-gummies #siteContent .no-list__list-wrapper {
  background-color: #000;
}

/* Product-section navigation: quiet, tactile buttons distinct from purchase
   actions, with equal-width columns that remain usable on the narrowest phones. */
body#lemme-sleep-gummies nav.meltem-detail-links[data-product-details-tabs] {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 680px);
  margin: 16px auto 0;
}

body#lemme-sleep-gummies #siteContent .meltem-detail-target {
  scroll-margin-top: 145px !important;
}
@media (max-width: 1024px) {
  body#lemme-sleep-gummies #siteContent .meltem-detail-target {
    scroll-margin-top: 112px !important;
  }
}

body#lemme-sleep-gummies nav.meltem-detail-links[data-product-details-tabs] > a {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px 7px;
  border: 1px solid rgba(72, 59, 103, .42);
  border-radius: 6px;
  background: rgba(250, 245, 250, .82);
  color: #352b4b;
  font: 700 13px/1.2 "Mier A", sans-serif;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body#lemme-sleep-gummies nav.meltem-detail-links[data-product-details-tabs] > a:hover {
  border-color: #686eaf;
  background: #eee7f3;
  color: #352b4b;
}

body#lemme-sleep-gummies nav.meltem-detail-links[data-product-details-tabs] > a:focus-visible {
  outline: 3px solid #ff963d;
  outline-offset: 3px;
  position: relative;
  z-index: 1;
}

@media (max-width: 359px) {
  body#lemme-sleep-gummies nav.meltem-detail-links[data-product-details-tabs] {
    gap: 6px;
  }

  body#lemme-sleep-gummies nav.meltem-detail-links[data-product-details-tabs] > a {
    padding-inline: 4px;
    font-size: 12px;
  }
}