/* Lana Beauty — live theme overrides
   This targets the ACTUAL classes used by the store's current live theme
   (Tailwind-style utility classes, --skin-primary tokens, Jost font),
   not the CLI-scaffolded ab-* theme. Upload this file via the
   design-assets CSS uploader in admin. */

/* Brand accent color — applies to buy/checkout buttons, cart badge, and any
   element using the bg-skin-primary / text-skin-primary / border-skin-primary
   utility classes across the live theme */
.bg-skin-primary:not(.\!bg-white) {
  background-color: #6C4452 !important;
}
.text-skin-primary {
  color: #6C4452 !important;
}
.border-skin-primary {
  border-color: #6C4452 !important;
}

/* Product price: brand-color the amount, keep the unit muted */
#price.product_price,
.product_price {
  color: #6C4452 !important;
}
#price.product_price > span,
.product_price > span {
  color: rgba(108, 68, 82, 0.55) !important;
}

/* Product grid card: current price */
.flex.items-center.gap-1.text-\[\#131316\] {
  color: #6C4452 !important;
}

/* Product grid card: struck-through original price */
del.font-thin.text-gray-600.text-base.flex.items-center.gap-1.ms-2 {
  color: rgba(108, 68, 82, 0.45) !important;
}

/* Discount / sale badge on product grid cards */
.bg-\[\#C4301C\] {
  background-color: #6C4452 !important;
}

/* Product page: struck-through original price */
p.text-\[\#61758A\].line-through {
  color: rgba(108, 68, 82, 0.5) !important;
}

/* Checkout: contact info form section background, softened into a
   card-like block instead of a flat color fill */
section.bg-\[\#F7F7FA\] {
  background-color: #FBF6F2 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px rgba(108, 68, 82, 0.05) !important;
}

/* Checkout: free-shipping progress bar track + fill */
.bg-\[\#c5d2de\] {
  background-color: #EFE1E5 !important;
}
.bg-\[\#c5d2de\] .bg-\[\#202223\] {
  background-color: #6C4452 !important;
}

/* Product page: "Time Left For Discount" countdown — soft brand-tint
   background added for better separation from the surrounding page,
   on top of the existing border-color override */
.border-\[\#E5E5EF\].shadow-\[0px_12px_40px_0px_\#7E8BA924\] {
  border-color: #E8D9DD !important;
  background-color: #FBF6F2 !important;
}
.border-\[\#E5E5EF\].shadow-\[0px_12px_40px_0px_\#7E8BA924\] > span.text-xl.font-bold.text-\[\#010101\] {
  color: #6C4452 !important;
}
div[dir="ltr"] > span.text-2xl.font-bold.text-\[\#010101\] {
  color: #6C4452 !important;
}
p.font-bold.text-\[\#010101\]:has(+ div[dir="ltr"]) {
  color: #6C4452 !important;
}

/* Mobile side nav drawer: keep above the announcement bar's z-index: 9999
   (exclude the dialog's own overlay/backdrop, which shares the id prefix,
   and exclude the chatbot widget's own dialog, which also uses role="dialog"
   but must keep its own z-index of 2147483647 to stay above everything) */
div[role="dialog"]:not([data-cart="overlay"]):not(#lana-chat-window),
[id^="headlessui-dialog"]:not([id*="overlay"]),
.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl {
  z-index: 2147483000 !important;
}

/* Mobile side nav drawer: fix wrong slide direction (site uses a
   rightward transform class on a left-positioned drawer) */
.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-full {
  transform: translateX(-100%) !important;
}

/* Footer: remove the large bottom gap */
footer .max-w-7xl.mx-auto.px-4.pb-20 {
  padding-bottom: 0 !important;
}

/* Payment strip: remove bottom gap (including the mobile "purple
   extension" pseudo-element and its reserved margin). Doubled class
   for extra specificity, since the strip's own <style> tag also
   uses !important and may load after ours. */
.lana-payment-strip.lana-payment-strip {
  margin: 0 !important;
  padding-bottom: 0 !important;
}
.lana-payment-strip.lana-payment-strip::after {
  content: none !important;
  display: none !important;
}

/* Custom pages (tracking, scent-finder): collapse the empty rich-text
   content area so our injected form/quiz sits close to the heading */
.content_container.page_content {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.content_container.page_content .ql-editor {
  min-height: 0 !important;
  padding: 0 !important;
}

/* Remove "Powered by Easyorders" wherever it appears — target the
   wrapping div, not just the <p> inside it, otherwise the div's own
   padding (py-8) is left behind as an empty white gap. */
div:has(> p > a[href="https://www.easy-orders.net"]) {
  display: none !important;
}

/* Hide footer newsletter signup block */
.flex.flex-col.md\:flex-row.justify-center.gap-8.md\:gap-x-20.rounded-\[48px\].bg-skin-primary {
  display: none !important;
}


/* =========================================================
   LANA'S BEAUTY — CHATBOT V7
   Visual refresh: Jost typography (matches the live theme),
   a consistent radius/shadow scale, and refined components.
   Structure/markup unchanged from V6.3 except two additive
   pieces: .lana-product-badge and .lana-stock-dot.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

#lana-chat-root {
  --lana-brand: #6c4452;
  --lana-brand-dark: #593744;
  --lana-brand-soft: #f4edef;
  --lana-brand-tint: #efe1e5;
  --lana-cream: #fbf9f8;
  --lana-white: #ffffff;
  --lana-border: #e8dfe2;
  --lana-text: #30272b;
  --lana-muted: #8b7d82;
  --lana-ok: #5c7a52;
  --lana-shadow: rgba(89, 55, 68, .16);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  font-family: "Jost", Arial, Helvetica, sans-serif;
}


/* =========================================================
   FLOATING BUTTON
   ========================================================= */

.lana-chat-button {
  position: fixed;

  right: 22px;
  bottom: 92px;

  width: 58px;
  height: 58px;

  border-radius: 50%;

  border: 1px solid var(--lana-brand);

  background: #fff;
  color: var(--lana-brand);

  cursor: pointer;

  z-index: 2147483647;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 8px 25px var(--lana-shadow),
    0 2px 8px rgba(0, 0, 0, .08);

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;

  animation: lanaButtonPulse 3.2s ease-in-out infinite;
}

@keyframes lanaButtonPulse {
  0%, 100% {
    box-shadow:
      0 8px 25px var(--lana-shadow),
      0 2px 8px rgba(0, 0, 0, .08),
      0 0 0 0 rgba(108, 68, 82, .28);
  }
  50% {
    box-shadow:
      0 8px 25px var(--lana-shadow),
      0 2px 8px rgba(0, 0, 0, .08),
      0 0 0 8px rgba(108, 68, 82, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lana-chat-button {
    animation: none;
  }
}

.lana-chat-button:hover {
  background: var(--lana-brand);
  color: #fff;

  transform: translateY(-2px);

  box-shadow:
    0 12px 30px rgba(108, 68, 82, .28);
}

.lana-chat-button:active {
  transform: scale(.96);
}

.lana-chat-button svg {
  width: 25px;
  height: 25px;
}


/* =========================================================
   NOTIFICATION
   ========================================================= */

.lana-chat-notification {
  position: absolute;

  top: -3px;
  right: -3px;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: #b85b70;
  color: #fff;

  border: 2px solid #fff;

  display: none;
  align-items: center;
  justify-content: center;

  font-size: 9px;
  font-weight: 700;

  line-height: 1;
}

.lana-chat-notification.show {
  display: flex;
}


/* =========================================================
   CHAT WINDOW
   ========================================================= */

.lana-chat-window {
  position: fixed;

  right: 22px;
  bottom: 162px;

  width: 380px;
  height: 610px;

  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 180px);

  background: #fff;

  border: 1px solid var(--lana-border);
  border-radius: var(--radius-lg);

  overflow: hidden;

  z-index: 2147483646;

  display: none;
  flex-direction: column;

  box-shadow:
    0 30px 80px rgba(72, 42, 53, .22);
}

.lana-chat-window.open {
  display: flex;
  animation: lanaWindowIn .22s ease;
}

@keyframes lanaWindowIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lana-chat-window.open {
    animation: none;
  }
}


/* =========================================================
   MINIMIZED
   ========================================================= */

.lana-chat-window.minimized {
  height: 72px;
}

.lana-chat-window.minimized
.lana-chat-messages,

.lana-chat-window.minimized
.lana-chat-input-area {
  display: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.lana-chat-header {
  height: 72px;
  min-height: 72px;

  padding: 0 8px 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(180deg, #ffffff 0%, #fdfbfa 100%);

  border-bottom: 1px solid var(--lana-border);

  flex-shrink: 0;
}

.lana-chat-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lana-chat-avatar {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  background: var(--lana-brand);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 600;

  letter-spacing: .5px;

  box-shadow: 0 0 0 3px var(--lana-brand-tint);
}

.lana-chat-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lana-chat-brand-name {
  font-size: 14px;
  font-weight: 600;

  color: var(--lana-text);
}

.lana-chat-brand-status {
  font-size: 11px;
  font-weight: 400;

  color: var(--lana-muted);
}

.lana-chat-brand-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--lana-ok);
  vertical-align: middle;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.lana-chat-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.lana-chat-action {
  width: 32px;
  height: 32px;

  border: 0;

  background: transparent;

  cursor: pointer;

  color: var(--lana-brand);

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    background .2s ease,
    transform .12s ease;
}

.lana-chat-action:hover {
  background: var(--lana-brand-soft);
}

.lana-chat-action:active {
  transform: scale(.88);
}


/* =========================================================
   MESSAGES
   ========================================================= */

.lana-chat-messages {
  flex: 1;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

  padding: 18px;

  background: var(--lana-cream);

  scroll-behavior: smooth;
}

.lana-message {
  display: flex;

  width: 100%;

  margin-bottom: 14px;
}

.lana-message.user {
  justify-content: flex-end;
}

.lana-message.assistant {
  justify-content: flex-start;
}

.lana-bubble {
  max-width: 84%;

  padding: 12px 15px;

  border-radius: var(--radius-md);

  font-size: 13.5px;
  line-height: 1.65;

  word-break: break-word;

  direction: rtl;
  text-align: right;

  white-space: pre-wrap;
}

.lana-message.assistant .lana-bubble {
  background: #fff;

  border: 1px solid var(--lana-border);

  color: var(--lana-text);

  border-bottom-left-radius: 6px;

  box-shadow: 0 2px 8px rgba(89, 55, 68, .04);
}

.lana-message.user .lana-bubble {
  background: var(--lana-brand);

  color: #fff;

  border-bottom-right-radius: 6px;

  box-shadow: 0 4px 12px var(--lana-shadow);
}


/* =========================================================
   OFFERS
   ========================================================= */

.lana-offers {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 10px;

  margin-top: 4px;

  direction: ltr;
}

.lana-offer-card {
  width: 100%;

  box-sizing: border-box;

  padding: 14px 16px;

  background: #fff;

  border: 1px solid var(--lana-border);

  border-radius: var(--radius-md);

  position: relative;

  overflow: hidden;

  box-shadow:
    0 4px 14px rgba(108, 68, 82, .06);
}

.lana-offer-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background: linear-gradient(180deg, var(--lana-brand) 0%, var(--lana-brand-dark) 100%);
}

.lana-chat-offer-title {
  font-size: 12.5px;

  font-weight: 600;

  color: var(--lana-text);

  line-height: 1.4;

  margin-bottom: 7px;

  text-align: left;
}

.lana-chat-offer-code {
  display: inline-flex;

  align-items: center;

  padding: 5px 10px;

  border-radius: var(--radius-sm);

  background: var(--lana-brand-soft);

  color: var(--lana-brand);

  font-size: 9.5px;

  font-weight: 700;

  letter-spacing: .3px;

  direction: ltr;
}

.lana-chat-offer-note {
  margin-top: 6px;

  font-size: 9px;

  line-height: 1.4;

  color: var(--lana-muted);

  text-align: left;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.lana-products {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 11px;

  margin-top: 3px;
}

.lana-product-card {
  width: 100%;

  background: #fff;

  border: 1px solid var(--lana-border);

  border-radius: var(--radius-md);

  overflow: hidden;

  box-sizing: border-box;

  position: relative;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.lana-product-card:hover {
  transform: translateY(-2px);

  border-color: var(--lana-brand-tint);

  box-shadow:
    0 10px 24px rgba(108, 68, 82, .12);
}

.lana-product-main {
  display: flex;

  padding: 11px;

  gap: 12px;
}

.lana-product-image {
  width: 74px;
  height: 88px;

  border-radius: var(--radius-sm);

  object-fit: cover;

  background: #f2eeee;

  flex-shrink: 0;

  display: block;
}

.lana-product-info {
  min-width: 0;

  flex: 1;

  display: flex;
  flex-direction: column;
}

.lana-product-name {
  font-size: 12.5px;

  font-weight: 600;

  color: var(--lana-text);

  line-height: 1.35;

  margin-bottom: 5px;
}

.lana-product-description {
  font-size: 10.5px;

  line-height: 1.45;

  color: var(--lana-muted);

  display: -webkit-box;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

.lana-product-price {
  margin-top: auto;

  display: flex;
  align-items: center;

  gap: 7px;

  padding-top: 8px;
}

.lana-product-old-price {
  font-size: 10px;

  color: #aaa;

  text-decoration: line-through;
}

.lana-product-current-price {
  font-size: 13px;

  font-weight: 700;

  color: var(--lana-brand);
}

/* Discount badge — top corner of the card, shown only when on sale */
.lana-product-badge {
  position: absolute;

  top: 12px;
  right: 12px;

  padding: 3px 8px;

  border-radius: var(--radius-sm);

  background: var(--lana-brand);
  color: #fff;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .2px;

  z-index: 1;
}

.lana-product-stock {
  margin-top: 6px;

  display: flex;
  align-items: center;
  gap: 5px;

  font-size: 9.5px;
  font-weight: 500;
}

.lana-stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lana-product-stock.available {
  color: var(--lana-ok);
}

.lana-product-stock.available .lana-stock-dot {
  background: var(--lana-ok);
}

.lana-product-stock.unavailable {
  color: #aaa;
}

.lana-product-stock.unavailable .lana-stock-dot {
  background: #cfc9c9;
}


/* =========================================================
   PRODUCT BUTTON
   ========================================================= */

.lana-product-button {
  width: calc(100% - 22px);

  margin: 0 11px 11px;

  height: 36px;

  border: 1px solid var(--lana-brand);

  border-radius: var(--radius-sm);

  background: var(--lana-brand);

  color: #fff;

  font-size: 11.5px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .15s ease,
    box-shadow .2s ease;
}

.lana-product-button:hover {
  background: var(--lana-brand-dark);

  box-shadow:
    0 6px 16px rgba(108, 68, 82, .2);
}

.lana-product-button:active {
  transform: scale(.98);
}


/* =========================================================
   TYPING
   ========================================================= */

.lana-typing {
  display: flex;
  align-items: center;

  gap: 4px;

  padding: 12px 15px;

  background: #fff;

  border: 1px solid var(--lana-border);

  width: fit-content;

  border-radius: var(--radius-md);

  border-bottom-left-radius: 6px;
}

.lana-typing span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--lana-brand);

  animation:
    lanaTyping 1.2s infinite ease-in-out;
}

.lana-typing span:nth-child(2) {
  animation-delay: .15s;
}

.lana-typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes lanaTyping {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: .35;
  }

  30% {
    transform: translateY(-3px);
    opacity: 1;
  }

}


/* =========================================================
   INPUT
   ========================================================= */

.lana-chat-input-area {
  padding: 12px;

  border-top: 1px solid var(--lana-border);

  background: #fff;

  flex-shrink: 0;
}

.lana-chat-form {
  display: flex;
  align-items: center;

  gap: 8px;

  background: #faf7f8;

  border: 1px solid var(--lana-border);

  border-radius: var(--radius-pill);

  padding: 5px 5px 5px 15px;

  transition: border-color .18s ease, box-shadow .18s ease;
}

.lana-chat-form:focus-within {
  border-color: var(--lana-brand);
  box-shadow: 0 0 0 3px var(--lana-brand-tint);
}

.lana-chat-input {
  flex: 1;

  border: 0;
  outline: none;

  background: transparent;

  font-family: inherit;
  font-size: 16px;

  color: var(--lana-text);

  min-width: 0;

  -webkit-appearance: none;

  direction: rtl;
  text-align: right;
}

.lana-chat-input::placeholder {
  color: #a09298;
}

.lana-chat-send {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  border: 0;

  border-radius: 50%;

  background: var(--lana-brand);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .15s ease;
}

.lana-chat-send:hover {
  background: var(--lana-brand-dark);
}

.lana-chat-send:active {
  transform: scale(.96);
}

.lana-chat-send:disabled {
  opacity: .45;

  cursor: default;
}

.lana-chat-send svg {
  width: 16px;
  height: 16px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .lana-chat-button {
    right: 16px;
    bottom: 86px;

    width: 55px;
    height: 55px;
  }

  .lana-chat-window {
    right: 8px;
    left: 8px;

    bottom: 151px;

    width: auto;

    max-width: none;

    height:
      min(650px, calc(100vh - 175px));

    max-height:
      calc(100vh - 175px);

    border-radius: 18px;
  }

  .lana-chat-window.minimized {
    height: 68px;
  }

  .lana-chat-messages {
    padding: 14px;
  }

  .lana-product-image {
    width: 68px;
    height: 82px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  .lana-chat-button {
    right: 13px;
    bottom: 82px;

    width: 53px;
    height: 53px;
  }

  .lana-chat-window {
    right: 6px;
    left: 6px;

    bottom: 145px;

    height:
      min(630px, calc(100vh - 165px));

    max-height:
      calc(100vh - 165px);
  }

  .lana-chat-messages {
    padding: 11px;
  }

  .lana-product-main {
    gap: 9px;
  }

  .lana-product-image {
    width: 64px;
    height: 78px;
  }

}


/* Lana Beauty homepage sections — hero, best sellers, collections, offers */
/* Combined from homepage-blocks/*.html, built by homepage.js */

/* =========================================================
   LANA'S BEAUTY
   HERO V5.2 — LUXURY POLISH
   FULL WIDTH VERSION
   (content is now populated by homepage.js from the dashboard's
   Homepage Content panel — see data-field attributes below)
========================================================= */

.lana-v5 {
  position: relative;

  /* FULL WIDTH */
  width: 100vw !important;
  max-width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  min-height: 680px;

  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 77% 42%,
      rgba(255, 238, 243, .30) 0%,
      rgba(255, 238, 243, .08) 28%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 25% 70%,
      rgba(86, 45, 60, .14) 0%,
      transparent 42%
    ),
    linear-gradient(
      115deg,
      #845464 0%,
      #9d6878 35%,
      #b77f8e 67%,
      #875869 100%
    );

  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

.lana-v5 *,
.lana-v5 *::before,
.lana-v5 *::after {
  box-sizing: border-box;
}


/* =========================================================
   SUBTLE TEXTURE
========================================================= */

.lana-v5::before {
  content: "";

  position: absolute;

  z-index: 3;

  inset: 0;

  pointer-events: none;

  opacity: .075;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

  mix-blend-mode: soft-light;
}


/* =========================================================
   CINEMATIC LIGHT
========================================================= */

.lana-v5-light {
  position: absolute;

  z-index: 1;

  width: 720px;
  height: 720px;

  right: -170px;
  top: 50%;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.07) 34%,
      transparent 70%
    );

  filter: blur(12px);

  animation:
    lanaV5Light 12s ease-in-out infinite;
}


/* =========================================================
   INNER
========================================================= */

.lana-v5-inner {
  position: relative;

  z-index: 4;

  width: min(
    1380px,
    calc(100% - 80px)
  );

  min-height: 680px;

  margin: 0 auto;
}


/* =========================================================
   GIANT BRAND WATERMARK
========================================================= */

.lana-v5-word {
  position: absolute;

  z-index: 2;

  left: -32px;
  bottom: -12px;

  white-space: nowrap;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(
    180px,
    24vw,
    350px
  );

  font-weight: 800;

  line-height: .69;

  letter-spacing: -21px;

  color: rgba(255,255,255,.055);

  user-select: none;

  pointer-events: none;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.lana-v5-content {
  position: absolute;

  z-index: 30;

  left: 6.5%;
  top: 50%;

  transform:
    translateY(-50%);

  width: 545px;
}


/* =========================================================
   KICKER
========================================================= */

.lana-v5-kicker {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 24px;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: rgba(255,255,255,.78);
}

.lana-v5-kicker::before {
  content: "";

  width: 34px;
  height: 1px;

  background:
    rgba(255,255,255,.58);
}


/* =========================================================
   HEADLINE
========================================================= */

.lana-v5-title {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(
    64px,
    6.8vw,
    96px
  );

  font-weight: 400;

  line-height: .85;

  letter-spacing: -5px;

  text-rendering: geometricPrecision;
}

.lana-v5-title span {
  display: block;
}

.lana-v5-title .soft {
  margin-left: 58px;

  font-style: italic;

  color:
    rgba(255,255,255,.88);
}

.lana-v5-title .last {
  margin-left: 118px;

  color:
    rgba(255,255,255,.96);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.lana-v5-description {
  max-width: 365px;

  margin:
    30px 0 0;

  font-size: 12.5px;

  line-height: 1.9;

  letter-spacing: .15px;

  color:
    rgba(255,255,255,.74);
}


/* =========================================================
   ACTION AREA
========================================================= */

.lana-v5-actions {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-top: 30px;
}


/* =========================================================
   LUXURY CTA
========================================================= */

.lana-v5-button {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 174px;
  height: 51px;

  background:
    #f9f4f1;

  color:
    #5a3d48;

  border:
    1px solid rgba(255,255,255,.55);

  text-decoration: none;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  overflow: hidden;

  box-shadow:
    0 12px 35px
    rgba(62,31,42,.13);

  transition:
    transform .35s ease,
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}

.lana-v5-button::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(255,255,255,.75) 48%,
      transparent 70%
    );

  transform:
    translateX(-120%);

  transition:
    transform .7s ease;
}

.lana-v5-button span {
  position: relative;

  z-index: 2;
}

.lana-v5-button:hover {
  transform:
    translateY(-3px);

  background:
    #634451;

  color:
    #fff;

  box-shadow:
    0 16px 40px
    rgba(62,31,42,.22);
}

.lana-v5-button:hover::before {
  transform:
    translateX(120%);
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.lana-v5-categories {
  display: flex;

  align-items: center;

  gap: 11px;

  white-space: nowrap;

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 1.8px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,.68);
}

.lana-v5-categories a {
  position: relative;

  color: inherit;

  text-decoration: none;

  transition:
    color .25s ease;
}

.lana-v5-categories a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -5px;

  height: 1px;

  background:
    rgba(255,255,255,.65);

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform .25s ease;
}

.lana-v5-categories a:hover {
  color:
    #fff;
}

.lana-v5-categories a:hover::after {
  transform:
    scaleX(1);
}

.lana-v5-categories i {
  font-style: normal;

  opacity: .35;
}


/* =========================================================
   SILK RIBBON
========================================================= */

.lana-v5-ribbon {
  position: absolute;

  z-index: 8;

  right: 4.5%;
  top: 50%;

  width: 610px;
  height: 860px;

  transform:
    translateY(-50%)
    rotate(-13deg);

  pointer-events: none;

  animation:
    lanaV5Ribbon 12s ease-in-out infinite;
}

.lana-v5-ribbon::before {
  content: "";

  position: absolute;

  width: 265px;
  height: 930px;

  left: 190px;
  top: -35px;

  border-radius:
    48% 52% 35% 65% /
    35% 45% 55% 65%;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.40),
      rgba(244,203,213,.24),
      rgba(255,255,255,.055)
    );

  box-shadow:
    inset 25px 0 48px
    rgba(255,255,255,.19),

    inset -28px 0 48px
    rgba(91,48,62,.10),

    0 30px 75px
    rgba(63,35,46,.14);

  filter:
    blur(.35px);
}

.lana-v5-ribbon::after {
  content: "";

  position: absolute;

  width: 120px;
  height: 760px;

  left: 338px;
  top: 45px;

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.31),
      transparent
    );

  filter:
    blur(9px);

  transform:
    rotate(7deg);
}


/* =========================================================
   FLOATING FABRIC
========================================================= */

.lana-v5-fabric {
  position: absolute;

  z-index: 9;

  right: 27%;
  top: 14%;

  width: 145px;
  height: 260px;

  border-radius:
    70% 30% 65% 35% /
    30% 60% 40% 70%;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.23),
      rgba(255,220,228,.065)
    );

  box-shadow:
    0 25px 50px
    rgba(70,36,48,.08);

  filter:
    blur(.35px);

  transform:
    rotate(27deg);

  animation:
    lanaV5Fabric 9s ease-in-out infinite;
}


/* =========================================================
   ORBIT LINES
========================================================= */

.lana-v5-orbit {
  position: absolute;

  z-index: 5;

  right: -65px;
  top: 50%;

  width: 690px;
  height: 340px;

  transform:
    translateY(-50%)
    rotate(-18deg);

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 50%;

  animation:
    lanaV5Orbit 18s ease-in-out infinite;
}

.lana-v5-orbit-two {
  right: -115px;

  width: 750px;
  height: 440px;

  opacity: .40;

  transform:
    translateY(-50%)
    rotate(12deg);
}


/* =========================================================
   PARTICLES
========================================================= */

.lana-v5-dot {
  position: absolute;

  z-index: 15;

  border-radius: 50%;

  background:
    rgba(255,255,255,.72);

  box-shadow:
    0 0 20px
    rgba(255,255,255,.25);
}

.lana-v5-dot-one {
  width: 5px;
  height: 5px;

  right: 19%;
  top: 24%;

  animation:
    lanaV5Dot 6s ease-in-out infinite;
}

.lana-v5-dot-two {
  width: 3px;
  height: 3px;

  right: 12%;
  bottom: 25%;

  animation:
    lanaV5Dot 8s ease-in-out infinite reverse;
}

.lana-v5-dot-three {
  width: 4px;
  height: 4px;

  right: 36%;
  bottom: 18%;

  animation:
    lanaV5Dot 7s ease-in-out infinite;
}


/* =========================================================
   EDITORIAL SIDE TEXT
========================================================= */

.lana-v5-side {
  position: absolute;

  z-index: 20;

  right: 0;
  top: 50%;

  transform:
    translateY(-50%)
    rotate(90deg);

  transform-origin:
    right center;

  font-size: 7px;

  letter-spacing: 4px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,.42);
}


/* =========================================================
   BOTTOM DETAILS
========================================================= */

.lana-v5-bottom {
  position: absolute;

  z-index: 20;

  left: 0;
  right: 0;
  bottom: 28px;

  display: flex;

  align-items: center;

  justify-content: flex-start;
}

.lana-v5-bottom-left {
  font-size: 7px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color:
    rgba(255,255,255,.40);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes lanaV5Light {

  0%,100% {
    transform:
      translateY(-50%)
      translateX(0)
      scale(1);
  }

  50% {
    transform:
      translateY(-50%)
      translateX(-35px)
      scale(1.08);
  }
}

@keyframes lanaV5Ribbon {

  0%,100% {
    transform:
      translateY(-50%)
      rotate(-13deg)
      translateX(0);
  }

  50% {
    transform:
      translateY(-51%)
      rotate(-8deg)
      translateX(-18px);
  }
}

@keyframes lanaV5Fabric {

  0%,100% {
    transform:
      rotate(27deg)
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      rotate(34deg)
      translate(-20px,15px)
      scale(1.04);
  }
}

@keyframes lanaV5Orbit {

  0%,100% {
    transform:
      translateY(-50%)
      rotate(-18deg);
  }

  50% {
    transform:
      translateY(-50%)
      rotate(-12deg)
      scale(1.03);
  }
}

@keyframes lanaV5Dot {

  0%,100% {
    transform:
      translate(0,0);

    opacity: .42;
  }

  50% {
    transform:
      translate(-12px,18px);

    opacity: 1;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .lana-v5 {
    min-height: 600px;
  }

  .lana-v5-inner {
    width:
      calc(100% - 50px);

    min-height: 600px;
  }

  .lana-v5-content {
    left: 3%;
  }

  .lana-v5-title {
    font-size: 68px;
  }

  .lana-v5-ribbon {
    right: -5%;

    transform:
      translateY(-50%)
      rotate(-13deg)
      scale(.82);
  }

  .lana-v5-orbit {
    right: -18%;

    transform:
      translateY(-50%)
      rotate(-18deg)
      scale(.82);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .lana-v5 {
    min-height: 690px;

    background:
      radial-gradient(
        ellipse at 50% 72%,
        rgba(255,230,236,.25),
        transparent 38%
      ),
      linear-gradient(
        160deg,
        #8c5c6b,
        #ae7888 55%,
        #8d5e6e
      );
  }

  .lana-v5-inner {
    width: 100%;

    min-height: 690px;
  }


  /* Giant watermark */

  .lana-v5-word {
    left: 50%;
    bottom: 58px;

    transform:
      translateX(-50%);

    font-size: 105px;

    letter-spacing: -8px;
  }


  /* Content */

  .lana-v5-content {
    left: 0;
    top: 92px;

    transform: none;

    width: 100%;

    padding:
      0 20px;

    text-align: center;
  }

  .lana-v5-kicker {
    justify-content: center;

    margin-bottom: 19px;

    font-size: 8px;

    letter-spacing: 3px;
  }

  .lana-v5-kicker::before {
    display: none;
  }

  .lana-v5-title {
    font-size: 54px;

    line-height: .87;

    letter-spacing: -3px;
  }

  .lana-v5-title .soft {
    margin-left: 25px;
  }

  .lana-v5-title .last {
    margin-left: 45px;
  }

  .lana-v5-description {
    max-width: 285px;

    margin:
      22px auto 0;

    font-size: 12px;

    line-height: 1.75;
  }


  /* Actions */

  .lana-v5-actions {
    flex-direction: column;

    justify-content: center;

    gap: 17px;

    margin-top: 23px;
  }

  .lana-v5-categories {
    justify-content: center;
  }


  /* Ribbon */

  .lana-v5-ribbon {
    right: 50%;

    top: 470px;

    width: 420px;
    height: 600px;

    transform:
      translateX(50%)
      rotate(-13deg)
      scale(.75);
  }

  .lana-v5-ribbon::before {
    left: 130px;
  }

  .lana-v5-ribbon::after {
    left: 275px;
  }


  /* Fabric */

  .lana-v5-fabric {
    right: 13%;
    top: 390px;

    width: 75px;
    height: 145px;
  }


  /* Orbit */

  .lana-v5-orbit {
    right: 50%;

    top: 515px;

    width: 450px;
    height: 230px;

    transform:
      translateX(50%)
      rotate(-18deg);
  }

  .lana-v5-orbit-two {
    right: 50%;

    width: 500px;
    height: 290px;

    transform:
      translateX(50%)
      rotate(12deg);
  }


  /* Side text */

  .lana-v5-side {
    display: none;
  }


  /* Bottom */

  .lana-v5-bottom {
    left: 20px;
    right: 20px;
    bottom: 22px;
  }

  .lana-v5-bottom-left {
    font-size: 7px;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

  .lana-v5 {
    min-height: 650px;
  }

  .lana-v5-inner {
    min-height: 650px;
  }

  .lana-v5-content {
    top: 86px;
  }

  .lana-v5-title {
    font-size: 48px;
  }

  .lana-v5-description {
    font-size: 11px;
  }

  .lana-v5-ribbon {
    top: 445px;

    transform:
      translateX(50%)
      rotate(-13deg)
      scale(.66);
  }

  .lana-v5-orbit {
    top: 495px;

    transform:
      translateX(50%)
      rotate(-18deg)
      scale(.85);
  }

  .lana-v5-word {
    font-size: 88px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .lana-v5 *,
  .lana-v5 *::before,
  .lana-v5 *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================
   LANA'S BEAUTY
   BEST SELLERS V2.2 — FULL WIDTH
   Rounded Image Treatment
   (content populated by homepage.js — data-field attributes)
===================================================== */

.lana-best {
  width: 100%;
  max-width: none;

  background: #fff;

  padding: 48px 20px 58px;

  box-sizing: border-box;
}

.lana-best * {
  box-sizing: border-box;
}


/* =====================================================
   INNER — FULL WIDTH
===================================================== */

.lana-best-inner {
  width: 100%;
  max-width: none;

  margin: 0 auto;
}


/* =====================================================
   HEADER
===================================================== */

.lana-best-heading {
  text-align: center;

  margin-bottom: 28px;
}

.lana-best-eyebrow {
  margin: 0 0 8px;

  color: #8a6573;

  font-size: 9px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;
}

.lana-best-title {
  margin: 0;

  color: #211c1f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 38px;
  line-height: 1;

  font-weight: 400;

  letter-spacing: -1.2px;
}


/* =====================================================
   PRODUCTS
===================================================== */

.lana-best-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 22px;

  width: 100%;

  max-width: 1100px;

  margin: 0 auto;
}

.lana-best-card {
  min-width: 0;

  display: block;

  color: inherit;

  text-decoration: none !important;
}


/* =====================================================
   IMAGE FRAME
===================================================== */

.lana-best-image {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #fbf8f8 0%,
      #f7f1f3 100%
    );

  border:
    1px solid rgba(33,28,31,.055);

  box-shadow:
    0 10px 30px rgba(76,45,57,.045);

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}


/* =====================================================
   SOFT LIGHT
===================================================== */

.lana-best-image::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,255,255,.75),
      transparent 62%
    );

  pointer-events: none;
}


/* =====================================================
   INNER BORDER
===================================================== */

.lana-best-image::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 3;

  border:
    1px solid rgba(33,28,31,.045);

  border-radius: inherit;

  pointer-events: none;
}


/* =====================================================
   PRODUCT IMAGE
===================================================== */

.lana-best-image img {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: 8px;

  border-radius: 22px;

  transition:
    transform .55s cubic-bezier(.2,.7,.2,1);
}


/* =====================================================
   HOVER
===================================================== */

.lana-best-card:hover .lana-best-image {
  transform: translateY(-3px);

  box-shadow:
    0 18px 40px rgba(76,45,57,.10);
}

.lana-best-card:hover .lana-best-image img {
  transform: scale(1.055);
}


/* =====================================================
   INFO
===================================================== */

.lana-best-info {
  padding: 14px 4px 0;

  text-align: center;
}

.lana-best-name {
  margin: 0;

  color: #211c1f;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 15px;
  line-height: 1.25;

  font-weight: 700;

  letter-spacing: .1px;
}

.lana-best-shop {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 9px;

  color: #8a6573;

  font-size: 8px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  transition:
    color .25s ease;
}

.lana-best-shop::after {
  content: "→";

  margin-left: 7px;

  font-size: 12px;

  transition:
    transform .25s ease;
}

.lana-best-card:hover .lana-best-shop {
  color: #5a3d48;
}

.lana-best-card:hover .lana-best-shop::after {
  transform: translateX(4px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

  .lana-best {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lana-best-grid {
    max-width: 900px;

    gap: 18px;
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

  .lana-best {
    width: 100%;

    padding:
      38px
      14px
      45px;
  }


  /* -----------------------------------------------
     HEADER
  ----------------------------------------------- */

  .lana-best-heading {
    margin-bottom: 22px;
  }

  .lana-best-eyebrow {
    font-size: 8px;

    letter-spacing: 2.5px;

    margin-bottom: 8px;
  }

  .lana-best-title {
    font-size: 31px;

    letter-spacing: -.8px;
  }


  /* -----------------------------------------------
     GRID
  ----------------------------------------------- */

  .lana-best-grid {
    width: 100%;

    max-width: none;

    gap: 11px;
  }


  /* -----------------------------------------------
     IMAGE
  ----------------------------------------------- */

  .lana-best-image {
    border-radius: 17px;
  }

  .lana-best-image img {
    padding: 6px;

    border-radius: 17px;
  }


  /* -----------------------------------------------
     INFO
  ----------------------------------------------- */

  .lana-best-info {
    padding-top: 10px;
  }

  .lana-best-name {
    font-size: 13px;
  }

  .lana-best-shop {
    margin-top: 8px;

    font-size: 7px;

    letter-spacing: 1.7px;
  }

  .lana-best-shop::after {
    font-size: 11px;
  }
}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 400px) {

  .lana-best {
    padding-left: 11px;
    padding-right: 11px;
  }

  .lana-best-grid {
    gap: 9px;
  }

  .lana-best-image {
    border-radius: 15px;
  }

  .lana-best-image img {
    border-radius: 15px;

    padding: 5px;
  }

  .lana-best-name {
    font-size: 12px;
  }

  .lana-best-shop {
    font-size: 6.5px;
  }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .lana-best *,
  .lana-best *::before,
  .lana-best *::after {
    transition: none !important;
  }
}

/* =========================================================
   LANA'S BEAUTY
   SHOP BY COLLECTION — V4.4
   FULL WIDTH / EDITORIAL POLISH
   (content populated by homepage.js — data-field attributes)
========================================================= */

.lana-collections {
  width: 100%;
  max-width: none;

  background: #fff;

  padding: 68px 20px 66px;

  box-sizing: border-box;
}

.lana-collections * {
  box-sizing: border-box;
}


/* =========================================================
   INNER — FULL WIDTH
========================================================= */

.lana-collections-inner {
  width: 100%;
  max-width: none;

  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.lana-collections-header {
  text-align: center;

  margin-bottom: 40px;
}

.lana-collections-kicker {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-bottom: 12px;

  color: #8a6573;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 3.4px;
  line-height: 1;

  text-transform: uppercase;
}

.lana-collections-kicker::before,
.lana-collections-kicker::after {
  content: "";

  width: 27px;
  height: 1px;

  background: #d8c7cd;
}

.lana-collections-title {
  margin: 0;

  color: #211c1f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 48px;
  line-height: .98;

  font-weight: 400;

  letter-spacing: -1.7px;
}

.lana-collections-title em {
  color: #8a6573;

  font-style: italic;
}

.lana-collections-subtitle {
  max-width: 430px;

  margin: 14px auto 0;

  color: #777074;

  font-size: 10px;

  line-height: 1.72;

  letter-spacing: .05px;
}


/* =========================================================
   GRID — WIDE
========================================================= */

.lana-collections-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;
}


/* =========================================================
   CARD
========================================================= */

.lana-collection-card {
  position: relative;

  display: block;

  width: 100%;
  height: 430px;

  overflow: hidden;

  color: inherit;

  text-decoration: none !important;

  border-radius: 24px;

  background: #eee;

  border:
    1px solid rgba(43,31,36,.09);

  isolation: isolate;

  box-shadow:
    0 12px 32px rgba(52,35,42,.055);
}


/* =========================================================
   IMAGE
========================================================= */

.lana-collection-product {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1.012);

  transition:
    transform 1s cubic-bezier(.2,.7,.2,1),
    filter 1s ease;
}


/* =========================================================
   FOR HER OVERLAY
========================================================= */

.lana-collection-card.her::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,0) 43%,
      rgba(116,76,89,.07) 59%,
      rgba(102,63,77,.30) 80%,
      rgba(83,50,61,.56) 100%
    );
}


/* =========================================================
   FOR HIM OVERLAY
========================================================= */

.lana-collection-card.him::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,0) 43%,
      rgba(83,77,73,.07) 59%,
      rgba(71,65,62,.30) 80%,
      rgba(63,57,54,.56) 100%
    );
}


/* =========================================================
   UNISEX OVERLAY
========================================================= */

.lana-collection-card.unisex::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,0) 43%,
      rgba(105,86,72,.06) 59%,
      rgba(88,70,58,.27) 80%,
      rgba(72,58,49,.53) 100%
    );
}


/* =========================================================
   SOFT LIGHT
========================================================= */

.lana-collection-card.her::after,
.lana-collection-card.him::after,
.lana-collection-card.unisex::after {
  content: "";

  position: absolute;

  top: -20%;
  left: 50%;

  z-index: 2;

  width: 72%;
  height: 55%;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,0) 70%
    );

  pointer-events: none;
}


/* =========================================================
   INNER FRAME
========================================================= */

.lana-collection-frame {
  position: absolute;

  inset: 7px;

  z-index: 6;

  border:
    1px solid rgba(255,255,255,.46);

  border-radius: 19px;

  pointer-events: none;

  transition:
    inset .55s cubic-bezier(.2,.7,.2,1),
    border-color .55s ease;
}


/* =========================================================
   INFO
========================================================= */

.lana-collection-info {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 5;

  padding:
    0
    25px
    25px;

  text-align: center;

  text-shadow:
    0 2px 12px rgba(55,38,45,.18);
}


/* =========================================================
   LABEL
========================================================= */

.lana-collection-label {
  margin-bottom: 8px;

  color: rgba(255,255,255,.87);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 2.3px;
  line-height: 1.2;

  text-transform: uppercase;
}


/* =========================================================
   NAME
========================================================= */

.lana-collection-name {
  margin: 0;

  color: #fff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 39px;

  line-height: .94;

  font-weight: 400;

  letter-spacing: -1px;

  transition:
    transform .5s ease;
}


/* =========================================================
   CTA
========================================================= */

.lana-collection-shop {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 15px;

  padding:
    0
    0
    7px;

  border-bottom:
    1px solid rgba(255,255,255,.66);

  color: rgba(255,255,255,.96);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.8px;
  line-height: 1;

  text-transform: uppercase;

  transition:
    gap .45s ease,
    border-color .45s ease;
}

.lana-collection-arrow {
  font-size: 11px;

  line-height: 1;

  transition:
    transform .45s ease;
}


/* =========================================================
   HOVER
========================================================= */

.lana-collection-card:hover
.lana-collection-product {
  transform: scale(1.052);
}

.lana-collection-card:hover
.lana-collection-name {
  transform: translateY(-3px);
}

.lana-collection-card:hover
.lana-collection-shop {
  gap: 13px;

  border-color: #fff;
}

.lana-collection-card:hover
.lana-collection-arrow {
  transform: translateX(3px);
}

.lana-collection-card:hover
.lana-collection-frame {
  inset: 10px;

  border-color:
    rgba(255,255,255,.70);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .lana-collections {
    padding:
      58px
      18px
      55px;
  }

  .lana-collections-header {
    margin-bottom: 34px;
  }

  .lana-collections-title {
    font-size: 42px;
  }

  .lana-collections-grid {
    gap: 14px;

    max-width: 900px;
  }

  .lana-collection-card {
    height: 365px;

    border-radius: 21px;
  }

  .lana-collection-frame {
    inset: 6px;

    border-radius: 16px;
  }

  .lana-collection-info {
    padding:
      0
      16px
      20px;
  }

  .lana-collection-name {
    font-size: 31px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .lana-collections {
    width: 100%;

    padding:
      43px
      10px
      44px;
  }

  .lana-collections-header {
    margin-bottom: 27px;
  }

  .lana-collections-kicker {
    gap: 8px;

    margin-bottom: 9px;

    font-size: 6.7px;

    letter-spacing: 2.5px;
  }

  .lana-collections-kicker::before,
  .lana-collections-kicker::after {
    width: 17px;
  }

  .lana-collections-title {
    font-size: 34px;

    letter-spacing: -1.15px;
  }

  .lana-collections-subtitle {
    max-width: 295px;

    margin-top: 10px;

    font-size: 8.7px;

    line-height: 1.68;
  }


  /* =========================================
     GRID
  ========================================= */

  .lana-collections-grid {
    width: 100%;

    max-width: none;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 7px;
  }


  /* =========================================
     CARD
  ========================================= */

  .lana-collection-card {
    height: 270px;

    border-radius: 16px;

    box-shadow:
      0 8px 20px rgba(52,35,42,.045);
  }


  /* =========================================
     IMAGE
  ========================================= */

  .lana-collection-product {
    transform: scale(1.018);
  }


  /* =========================================
     FRAME
  ========================================= */

  .lana-collection-frame {
    inset: 5px;

    border-radius: 12px;
  }


  /* =========================================
     INFO
  ========================================= */

  .lana-collection-info {
    padding:
      0
      7px
      13px;

    text-shadow:
      0 1px 8px rgba(55,38,45,.24);
  }

  .lana-collection-label {
    margin-bottom: 5px;

    font-size: 4.7px;

    letter-spacing: 1px;

    white-space: nowrap;
  }

  .lana-collection-name {
    font-size: 21px;

    letter-spacing: -.45px;
  }

  .lana-collection-shop {
    margin-top: 8px;

    padding-bottom: 4px;

    gap: 4px;

    font-size: 4.8px;

    letter-spacing: .85px;
  }

  .lana-collection-arrow {
    font-size: 9px;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

  .lana-collections {
    padding:
      39px
      8px
      39px;
  }

  .lana-collections-header {
    margin-bottom: 24px;
  }

  .lana-collections-title {
    font-size: 31px;
  }

  .lana-collections-subtitle {
    font-size: 8.2px;
  }

  .lana-collections-grid {
    gap: 5px;
  }

  .lana-collection-card {
    height: 245px;

    border-radius: 14px;
  }

  .lana-collection-frame {
    inset: 4px;

    border-radius: 11px;
  }

  .lana-collection-info {
    padding:
      0
      5px
      11px;
  }

  .lana-collection-name {
    font-size: 18px;
  }

  .lana-collection-label {
    font-size: 4.2px;

    letter-spacing: .8px;
  }

  .lana-collection-shop {
    margin-top: 7px;

    font-size: 4.5px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .lana-collections *,
  .lana-collections *::before,
  .lana-collections *::after {
    transition: none !important;
  }
}

/* =========================================================
   LANA'S BEAUTY
   LUXURY OFFER V4.0
   Two Offers / Editorial / Soft Luxury / Responsive
   (content populated by homepage.js — data-field attributes)
========================================================= */

.lana-offer {
  width: 100%;
  max-width: none;

  background: #fff;

  padding:
    30px
    20px
    65px;

  margin: 0;

  box-sizing: border-box;
}

.lana-offer * {
  box-sizing: border-box;
}


/* =========================================================
   INNER
========================================================= */

.lana-offer-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================================
   OFFERS GRID
========================================================= */

.lana-offer-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}


/* =========================================================
   OFFER BOX
========================================================= */

.lana-offer-box {
  position: relative;

  width: 100%;
  min-height: 270px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 26px;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255,255,255,.84),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(138,101,115,.10),
      transparent 36%
    ),
    #f8f2f4;

  border:
    1px solid rgba(138,101,115,.055);

  box-shadow:
    0 12px 35px rgba(52,35,42,.035);
}


/* =========================================================
   SECOND OFFER — SLIGHTLY DISTINCT
========================================================= */

.lana-offer-box--explore {
  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(255,255,255,.90),
      transparent 30%
    ),
    radial-gradient(
      circle at 12% 85%,
      rgba(138,101,115,.11),
      transparent 38%
    ),
    #f6f0f2;
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.lana-offer-box::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -265px;
  top: -150px;

  border:
    1px solid rgba(138,101,115,.12);

  border-radius: 50%;

  pointer-events: none;
}

.lana-offer-box::after {
  content: "";

  position: absolute;

  width: 390px;
  height: 390px;

  left: -205px;
  bottom: -225px;

  border:
    1px solid rgba(138,101,115,.10);

  border-radius: 50%;

  pointer-events: none;
}


/* =========================================================
   CONTENT
========================================================= */

.lana-offer-content {
  position: relative;

  z-index: 5;

  width: 100%;

  padding:
    38px
    42px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}


/* =========================================================
   LEFT / MAIN CONTENT
========================================================= */

.lana-offer-left {
  width: 100%;
  min-width: 0;

  text-align: center;
}

.lana-offer-eyebrow {
  margin: 0 0 12px;

  color: #8a6573;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 3px;

  line-height: 1;

  text-transform: uppercase;
}

.lana-offer-title {
  margin: 0;

  color: #211c1f;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 39px;

  font-weight: 400;

  line-height: .98;

  letter-spacing: -1.5px;
}

.lana-offer-title em {
  color: #8a6573;

  font-style: italic;
}


/* =========================================================
   OFFER DESCRIPTION
========================================================= */

.lana-offer-note {
  max-width: 300px;

  margin:
    14px
    auto
    0;

  color: #756c70;

  font-size: 10px;

  line-height: 1.7;
}


/* =========================================================
   CODE WRAP
========================================================= */

.lana-offer-code-wrap {
  margin-top: 20px;

  text-align: center;

  white-space: nowrap;
}

.lana-offer-code-label {
  margin: 0 0 9px;

  color: #8a6573;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 2.4px;

  line-height: 1;

  text-transform: uppercase;
}


/* =========================================================
   CODE
========================================================= */

.lana-offer-code {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 145px;

  padding:
    12px
    16px;

  border:
    1px solid rgba(138,101,115,.22);

  border-radius: 8px;

  background:
    rgba(255,255,255,.58);

  box-shadow:
    0 7px 22px rgba(60,40,48,.035);
}

.lana-offer-code strong {
  color: #211c1f;

  font-size: 17px;

  font-weight: 800;

  letter-spacing: 2.8px;

  line-height: 1;

  user-select: all;

  -webkit-user-select: all;
}


/* =========================================================
   COPY ICON
========================================================= */

.lana-offer-copy-icon {
  position: relative;

  width: 16px;
  height: 16px;

  opacity: .6;

  cursor: pointer;
}

.lana-offer-copy-icon::before,
.lana-offer-copy-icon::after {
  content: "";

  position: absolute;

  width: 9px;
  height: 10px;

  border:
    1px solid #8a6573;

  border-radius: 2px;
}

.lana-offer-copy-icon::before {
  left: 0;
  top: 4px;
}

.lana-offer-copy-icon::after {
  left: 4px;
  top: 0;

  background: #faf5f7;
}


/* =========================================================
   EXPLORE BENEFITS
========================================================= */

.lana-offer-benefits {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 13px;

  margin-top: 17px;

  color: #756c70;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.4px;

  line-height: 1;

  text-transform: uppercase;
}

.lana-offer-benefit {
  display: inline-flex;

  align-items: center;

  gap: 5px;
}

.lana-offer-benefit::before {
  content: "✦";

  color: #8a6573;

  font-size: 8px;
}


/* =========================================================
   BUTTON
========================================================= */

.lana-offer-button {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-top: 19px;

  padding:
    0
    0
    7px;

  border: 0;

  border-bottom:
    1px solid rgba(138,101,115,.65);

  border-radius: 0;

  background: transparent;

  color: #5f4650 !important;

  text-decoration: none !important;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.9px;

  line-height: 1;

  text-transform: uppercase;

  transition:
    color .3s ease,
    gap .35s ease,
    border-color .3s ease;
}

.lana-offer-button::after {
  content: "→";

  font-size: 12px;

  line-height: 1;

  transition:
    transform .35s ease;
}

.lana-offer-button:hover {
  color: #8a6573 !important;

  border-color: #8a6573;

  background: transparent;

  transform: none;

  box-shadow: none;

  gap: 14px;
}

.lana-offer-button:hover::after {
  transform: translateX(3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .lana-offer {
    padding:
      25px
      18px
      55px;
  }

  .lana-offer-grid {
    gap: 14px;
  }

  .lana-offer-box {
    min-height: 255px;

    border-radius: 23px;
  }

  .lana-offer-content {
    padding:
      32px
      22px;
  }

  .lana-offer-title {
    font-size: 32px;
  }

  .lana-offer-note {
    max-width: 250px;

    font-size: 9px;
  }

  .lana-offer-code {
    min-width: 130px;

    padding:
      11px
      13px;
  }

  .lana-offer-code strong {
    font-size: 15px;

    letter-spacing: 2.3px;
  }

  .lana-offer-benefits {
    gap: 9px;

    font-size: 6.5px;

    letter-spacing: 1.1px;
  }

  .lana-offer-button {
    font-size: 6.5px;

    letter-spacing: 1.6px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .lana-offer {
    padding:
      22px
      10px
      45px;
  }

  .lana-offer-inner {
    width: 100%;
  }

  .lana-offer-grid {
    display: flex;

    flex-direction: column;

    gap: 13px;
  }

  .lana-offer-box {
    min-height: 340px;

    border-radius: 21px;
  }

  .lana-offer-content {
    width: 100%;

    padding:
      34px
      18px;
  }


  /* -----------------------------------------------
     TEXT
  ----------------------------------------------- */

  .lana-offer-eyebrow {
    margin-bottom: 10px;

    font-size: 7px;

    letter-spacing: 2.4px;
  }

  .lana-offer-title {
    font-size: 34px;

    line-height: 1;

    letter-spacing: -1px;
  }

  .lana-offer-note {
    max-width: 270px;

    margin-top: 13px;

    font-size: 9px;

    line-height: 1.65;
  }


  /* -----------------------------------------------
     CODE
  ----------------------------------------------- */

  .lana-offer-code-wrap {
    margin-top: 18px;
  }

  .lana-offer-code-label {
    margin-bottom: 8px;

    font-size: 6.5px;

    letter-spacing: 2px;
  }

  .lana-offer-code {
    min-width: auto;

    padding:
      12px
      16px;
  }

  .lana-offer-code strong {
    font-size: 16px;

    letter-spacing: 2.5px;
  }


  /* -----------------------------------------------
     BENEFITS
  ----------------------------------------------- */

  .lana-offer-benefits {
    flex-direction: column;

    gap: 8px;

    margin-top: 16px;

    font-size: 6.5px;

    letter-spacing: 1.3px;
  }


  /* -----------------------------------------------
     BUTTON
  ----------------------------------------------- */

  .lana-offer-button {
    margin-top: 18px;

    font-size: 6.5px;

    letter-spacing: 1.5px;
  }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

  .lana-offer {
    padding:
      18px
      8px
      40px;
  }

  .lana-offer-grid {
    gap: 11px;
  }

  .lana-offer-box {
    min-height: 325px;

    border-radius: 18px;
  }

  .lana-offer-content {
    padding:
      30px
      14px;
  }

  .lana-offer-title {
    font-size: 31px;

    letter-spacing: -.8px;
  }

  .lana-offer-note {
    max-width: 235px;

    font-size: 8.5px;
  }

  .lana-offer-code strong {
    font-size: 15px;
  }

  .lana-offer-benefits {
    font-size: 6px;

    letter-spacing: 1.1px;
  }

  .lana-offer-button {
    font-size: 6px;

    letter-spacing: 1.35px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .lana-offer *,
  .lana-offer *::before,
  .lana-offer *::after {
    transition: none !important;
  }
}