/** Shopify CDN: Minification failed

Line 101:0 All "@import" rules must come first

**/
/* ============================================================
   NL Invisible Lift — MAIN-PRODUCT overrides & new-element styles
   SEPARATE file used only by the NL-invisible-lift template:
   every override for the main-product section and the
   omr-buy-more tiles (design skin) lives here, so the theme
   CSS and other templates are never touched. Delete this one
   file to undo everything if anything breaks.
   Loaded via the "Custom liquid" block inside main-product
   (NL assets) — remove that block to switch it all off.
   ============================================================ */

/* ---------- OMR BUY MORE tiles → NL design skin ---------- */
/* design tokens: red #C3164E, halo bg #FDF0F0, border #F1DEDE */

.omr-buy-more .omr-buy-more__options {
  row-gap: 12px;
}

.omr-buy-more .omr-buy-more__row {
  border: 2px solid #F1DEDE;
  border-radius: 12px;
  padding: 16px 18px;
  /* keeps the block's freebie list flush with this skin's padding */
  --omr-row-pad-x: 18px;
  --omr-row-pad-b: 16px;
  transition: border-color 160ms, background 160ms;
}

.omr-buy-more .omr-buy-more__row.active {
  border-color: #C3164E;
  background: #FDF0F0;
  box-shadow: inset 0 0 0 0 transparent;
}

/* corner ribbon → design badge (red, rounded 6px 6px 0 6px) */
.omr-buy-more .omr-buy-more__tab {
  background: #C3164E;
  border-radius: 6px 6px 0 6px;
  right: 0;
  transform: translate(0, -14px);
  padding: 5px 14px;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.omr-buy-more .omr-buy-more__tab::before,
.omr-buy-more .omr-buy-more__tab::after {
  display: none;
}

/* radio → red dot like the design */
.omr-buy-more .omr-buy-more__radio {
  border: 2px solid #EFCBCB;
  width: 22px;
  height: 22px;
}
.omr-buy-more .omr-buy-more__row.active .omr-buy-more__radio {
  border-color: #C3164E;
}
.omr-buy-more .omr-buy-more__radio svg circle {
  fill: #C3164E;
}

/* pills → solid red, white text, uppercase (design "+ Free Shipping") */
.omr-buy-more .omr-buy-more__pill,
.omr-buy-more .omr-buy-more__pill--alt {
  border: 0;
  background: #C3164E;
  color: #fff;
  border-radius: 999px;
  height: auto;
  padding: 4px 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.omr-buy-more .omr-buy-more__title {
  font-weight: 700;
}

.omr-buy-more .omr-buy-more__price {
  font-weight: 700;
}

.omr-buy-more .omr-buy-more__price-original {
  color: #BABABA;
  font-family: Archivo, sans-serif;
  font-size: 13px;
  text-decoration: line-through;
}

/* ============================================================
   NL NEW ELEMENTS (custom-liquid blocks sa loob ng main-product)
   Design tokens: red #C3164E · dark #222 · pink border #F6D9D9
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

@keyframes nl-blip { 0% { box-shadow: 0 0 0 0 rgba(255,169,197,.85); } 70% { box-shadow: 0 0 0 9px rgba(255,169,197,0); } 100% { box-shadow: 0 0 0 0 rgba(255,169,197,0); } }
@keyframes nl-rise { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- marketing headline ---------- */
.nl-mp-headline {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(29px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #222;
  margin: 6px 0 4px;
}

/* ---------- sticky product media (design behavior) ---------- */
/* the theme media wrapper is already sticky but stretches to the full grid
   height (same as the buy column) so it never actually sticks —
   align-self:start makes it work by sizing the column to the gallery only */
@media (min-width: 768px) {
  .nl-mp .hdt-product-media-wrapps {
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
    height: fit-content !important;
  }
}

/* ---------- thumbnail strip: one square tile per media ---------- */
/* the theme sizes each thumb from that media's own ratio (inline
   --aspect-ratioapt), so the portrait video thumb sat 25px taller than the
   square photos. Pinning the variable squares every tile; cover then fills it
   instead of letterboxing. Thumbs only -- the main stage keeps object-fit
   contain so the infographic slides are never cropped. */
.nl-mp .hdt-thumbnail__media .hdt-ratio {
  --aspect-ratioapt: 1 !important;
}
.nl-mp .hdt-thumbnail__media .hdt-ratio img,
.nl-mp .hdt-thumbnail__media .hdt-ratio video {
  object-fit: cover;
}

/* ---------- product title bilang design subtitle (maliit, gray) ---------- */
/* design: stars -> maliit na product name -> malaking Playfair headline */
.nl-mp .hdt-product__title {
  font-family: Archivo, sans-serif;
  font-size: 16px !important;
  font-weight: 400;
  letter-spacing: 0.16px;
  line-height: 1.6;
  color: #545454;
  margin: 0;
}

/* ---------- theme accordions -> design accordion cards ---------- */
.nl-mp .omr-accordion-wrapper { margin: 12px 0 0 !important; }
.nl-mp .omr-accor-item {
  border: 1px solid #F6D9D9;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.nl-mp .omr-accor-item details.hdt-accordion-item { border: 0 !important; }
.nl-mp .omr-accor-item summary {
  padding: 16px 18px !important;
  cursor: pointer;
}
.nl-mp .omr-accor-item summary span[itemprop="name"],
.nl-mp .omr-accor-item summary .omr-eyebrow-default-medium {
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16px;
  text-transform: none;
  color: #222;
}
.nl-mp .omr-accor-item .hdt-accordion-content { padding: 0 18px 16px; }
.nl-mp .omr-accor-item .hdt-accordion-icon { color: #878787; }

/* ---------- Read More FAQs link ---------- */
.nl-mp-readmore {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  color: #222 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #222;
  border-radius: 0;
  padding: 0 0 1px;
}
.nl-mp-readmore:hover { color: #000 !important; }

/* ---------- design price row (tier price + was + SAVE%) ---------- */
/* hides the theme price — the NL price row replaces it (guarded to the AB product only) */
.nl-mp .hdt-product__price { display: none; }
.nl-mp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 4px; font-family: Archivo, sans-serif; }
.nl-mp-price__now { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: #222; }
.nl-mp-price__was { color: #BABABA; font-size: 16px; }
.nl-mp-price__save { background: #C3164E; color: #fff; font-family: "Roboto Condensed", sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 9px; border-radius: 4px; }

/* ---------- benefit checks ---------- */
.nl-mp-benefits { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nl-mp-benefits li { display: flex; gap: 11px; align-items: flex-start; font-family: Archivo, sans-serif; font-size: 15px; line-height: 1.55; color: #222; }
.nl-mp-check { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; border-radius: 999px; background: #C3164E; display: grid; place-items: center; font-style: normal; }
.nl-mp-check svg { width: 12px; height: 12px; color: #fff; display: block; }

/* ---------- scarcity card ---------- */
.nl-mp-scarcity { margin: 14px 0 4px; padding: 18px; background: #FDF0F0; border: 1px solid #F6D9D9; border-radius: 12px; font-family: Archivo, sans-serif; }
.nl-mp-scarcity__head { display: flex; align-items: flex-start; gap: 14px; }
.nl-mp-scarcity__icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: #C3164E; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; }
.nl-mp-scarcity__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nl-mp-scarcity__titles b { font-family: "Roboto Condensed", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #C3164E; line-height: 1.1; }
.nl-mp-scarcity__titles i { font-family: "Roboto Condensed", sans-serif; font-style: normal; font-size: 15px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: #545454; }
.nl-mp-scarcity__left { background: #C3164E; color: #fff; font-family: "Roboto Condensed", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.nl-mp-scarcity__bar { position: relative; height: 8px; background: #F3DADA; border-radius: 999px; margin: 20px 0 10px; }
.nl-mp-scarcity__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 14%; background: #C3164E; border-radius: 999px; }
.nl-mp-scarcity__dot { position: absolute; left: 14%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 999px; background: #C3164E; border: 3px solid #fff; box-shadow: 0 0 0 1px #F3DADA; }
.nl-mp-scarcity__labels { display: flex; justify-content: space-between; gap: 6px; font-family: "Roboto Condensed", sans-serif; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.nl-mp-scarcity__labels b { color: #222; font-weight: 700; }
.nl-mp-scarcity__labels span { color: #878787; font-weight: 500; }
.nl-mp-scarcity__viewers { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #F6D9D9; font-size: 14px; color: #545454; }
.nl-mp-scarcity__viewers b { font-weight: 600; }
.nl-mp-blip { width: 8px; height: 8px; border-radius: 999px; background: #42984F; flex: 0 0 8px; animation: nl-blip 1.9s infinite; }

/* ---------- ATC button skin (theme submit inside this template) ---------- */
.nl-mp .hdt-product-form__submit {
  width: 100%;
  background: #222 !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
  min-height: 0;
  height: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background 180ms;
}
.nl-mp .hdt-product-form__submit:hover { background: #000 !important; }
.nl-mp .hdt-product-form__submit > span:not(.nl-mp-atc-sub) { font-family: Archivo, sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.nl-mp .hdt-product-form__submit > .nl-mp-atc-sub,
.nl-mp-atc-sub { display: inline-flex; align-items: center; gap: 6px; font-family: Archivo, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: normal; text-transform: none; color: rgba(255,255,255,.78); }
.nl-mp-atc-sub svg { width: 12px; height: 12px; display: block; }

/* ---------- checklist + buy once + replicas + quote ---------- */
.nl-mp-checklist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.nl-mp-checklist li { display: flex; gap: 9px; align-items: flex-start; font-family: Archivo, sans-serif; font-size: 14px; line-height: 1.6; color: #222; }
.nl-mp-tick { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 4px; font-style: normal; }
.nl-mp-tick svg { width: 14px; height: 14px; color: #222; display: block; }

.nl-mp-buyonce { margin-top: 20px; padding-top: 20px; border-top: 1px solid #EDEDED; text-align: center; }
.nl-mp-buyonce button { background: none; border: 0; border-bottom: 1px solid #222; padding: 0 0 2px; cursor: pointer; font-family: Archivo, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; color: #222; }
.nl-mp-buyonce p { font-family: Archivo, sans-serif; font-size: 15px; line-height: 1.6; color: #545454; margin: 14px 0 0; }

.nl-mp-replicas { margin-top: 20px; padding: 16px 18px; background: #FDF0F0; border: 1px solid #F6D9D9; border-radius: 10px; }
.nl-mp-replicas__title { display: flex; align-items: center; gap: 9px; font-family: Archivo, sans-serif; font-size: 15px; font-weight: 700; color: #C3164E; margin: 0; }
.nl-mp-replicas__title span { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 999px; background: #C3164E; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.nl-mp-replicas__text { font-family: Archivo, sans-serif; font-size: 14px; line-height: 1.6; color: #545454; margin: 7px 0 0; }

.nl-mp-quote { margin-top: 16px; padding: 18px; background: #FEFBFB; border-radius: 10px; }
/* one quote per view; native horizontal scroll keeps swipe/trackpad working,
   scroll-snap holds each slide in place. scroll-behavior stays in JS so the
   loop reset can be instant. */
.nl-mp-quote__track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.nl-mp-quote__track::-webkit-scrollbar { display: none; }
.nl-mp-quote__slide { flex: 0 0 100%; width: 100%; min-width: 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; }
.nl-mp-quote__card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 8px; padding: 14px; height: 100%; box-sizing: border-box; }
.nl-mp-quote__photo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; background: linear-gradient(135deg, #FBEFEF, #FCF1E9); display: grid; place-items: center; font-family: "Roboto Condensed", sans-serif; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; color: #878787; text-align: center; line-height: 1.3; }
.nl-mp-quote__body { flex: 1; min-width: 0; }
.nl-mp-quote__body p { font-family: Archivo, sans-serif; font-size: 14px; line-height: 1.6; color: #222; margin: 0; }
.nl-mp-quote__name { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; font-size: 13px !important; font-weight: 600 !important; }
/* pagination: 6px dot painted inside an 18px hit area */
.nl-mp-quote__dots { display: flex; gap: 0; justify-content: center; margin-top: 6px; }
.nl-mp-quote__dots[hidden] { display: none; }
.nl-mp-quote__dots i { width: 6px; height: 6px; border-radius: 999px; background: #D4D4D4; }
.nl-mp-quote__dots i.on { background: #222; }
.nl-mp-quote__dot { width: 18px; height: 18px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; -webkit-appearance: none; appearance: none; }
.nl-mp-quote__dot::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #D4D4D4; transition: background 160ms ease; }
.nl-mp-quote__dot.on::before { background: #222; }
.nl-mp-quote__dot:hover::before { background: #878787; }
.nl-mp-quote__dot.on:hover::before { background: #222; }
.nl-mp-quote__dot:focus-visible { outline: 2px solid #C3164E; outline-offset: 0; border-radius: 999px; }

/* ---------- sticky ATC bar ---------- */
.nl-mp-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 22px; z-index: 500; justify-content: flex-end; padding: 0 24px; pointer-events: none; animation: nl-rise 260ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.nl-mp-sticky.is-on { display: flex; }
.nl-mp-sticky__card { pointer-events: auto; width: 100%; max-width: 560px; margin-left: auto; background: #fff; border-radius: 22px; box-shadow: 0 14px 44px rgba(34,34,34,.22); padding: 14px 18px; display: flex; align-items: center; gap: 18px; }
.nl-mp-sticky__card > img { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 12px; object-fit: cover; }
.nl-mp-sticky__info { flex: 1; min-width: 0; }
.nl-mp-sticky__title { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; margin: 0; }
.nl-mp-sticky__meta { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-family: Archivo, sans-serif; font-size: 14px; color: #545454; }
.nl-mp-sticky__stars { display: inline-flex; gap: 1px; color: #FFA9C5; }
.nl-mp-sticky__stars svg { width: 14px; height: 14px; display: block; }
.nl-mp-sticky__card > button { flex: 0 0 auto; background: #222; color: #fff; border: 0; border-radius: 12px; padding: 16px 30px; font-family: Archivo, sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; transition: background 180ms; }
.nl-mp-sticky__card > button:hover { background: #000; }
@media (max-width: 767px) {
  .nl-mp-sticky { bottom: 0; padding: 0; }
  .nl-mp-sticky__card { max-width: none; border-radius: 12px 12px 0 0; padding: 10px 14px; gap: 12px; }
  .nl-mp-sticky__card > img { width: 48px; height: 48px; flex-basis: 48px; }
  .nl-mp-sticky__title { font-size: 15px; }
  .nl-mp-sticky__card > button { padding: 14px 20px; font-size: 15px; border-radius: 8px; }
}