/* =========================================================
   KarlyCollection — Boutique editorial refresh
   A scoped visual layer: navigation + opening experience only.
   It intentionally does not alter catalog, cart, checkout, or API behavior.
   ========================================================= */

:root {
  --boutique-ink: #261f20;
  --boutique-wine: #9f3558;
  --boutique-wine-rgb: 159, 53, 88;
  --boutique-paper: #fffdfb;
  --boutique-blush: #f6ece8;
  --boutique-line: #eadfda;
  --boutique-muted: #74676b;
}

[data-theme="dark"] {
  --boutique-ink: #fff8f5;
  --boutique-wine: #f08aa7;
  --boutique-wine-rgb: 240, 138, 167;
  --boutique-paper: #21191b;
  --boutique-blush: #2d2024;
  --boutique-line: #4a373d;
  --boutique-muted: #cdbcc1;
}

.site-header .brand,
.site-header .header-actions,
.site-header .main-nav {
  min-width: 0;
}

.site-header .brand-name {
  color: var(--boutique-ink);
  letter-spacing: -0.35px;
}

.site-header .brand-name-fa { color: var(--boutique-muted); }

.site-header .brand-logo {
  border: 1px solid var(--boutique-line);
  background: var(--boutique-paper);
}

.site-header .nav-link:focus-visible,
.site-header .icon-btn:focus-visible,
.hero-text-link:focus-visible,
.hero .btn:focus-visible {
  outline: 3px solid rgba(var(--boutique-wine-rgb), .32);
  outline-offset: 3px;
}

/* ---------- Desktop: quiet, editorial three-part header ---------- */
@media (min-width: 861px) {
  :root { --header-h: 82px; }

  .site-header.glass {
    background: color-mix(in srgb, var(--boutique-paper) 92%, transparent);
    border: 0;
    border-bottom: 1px solid var(--boutique-line);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
  }

  .site-header::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--boutique-wine-rgb), .5), transparent);
    opacity: .48;
  }

  .header-inner {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
    align-items: center;
    gap: 18px;
    direction: ltr;
  }

  .header-actions {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    order: initial;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--boutique-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--boutique-paper) 91%, transparent);
    box-shadow: 0 7px 22px rgba(54, 31, 37, .04);
  }

  .header-actions .icon-btn {
    width: 34px;
    height: 34px;
    color: var(--boutique-ink);
  }

  .header-actions .icon-btn:hover {
    background: var(--boutique-blush);
    color: var(--boutique-wine);
  }

  .cart-count {
    top: -2px;
    left: -1px;
    min-width: 16px;
    height: 16px;
    border: 2px solid var(--boutique-paper);
    background: var(--boutique-wine);
  }

  .main-nav {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    display: block;
  }

  .main-nav ul {
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--boutique-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--boutique-paper) 92%, transparent);
    box-shadow: 0 7px 22px rgba(54, 31, 37, .04);
  }

  .nav-link {
    gap: 5px;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--boutique-muted);
    font-size: clamp(10px, .45vw + 6px, 12px);
    font-weight: 600;
  }

  .nav-link > i:not(.nav-dropdown-caret) { display: none; }
  .nav-link:hover,
  .nav-link.active {
    color: var(--boutique-wine);
    background: var(--boutique-blush);
  }
  .nav-link::after { display: none; }
  .nav-dropdown-caret { font-size: 8px; margin-inline-start: 0; }

  .nav-dropdown {
    top: calc(100% + 12px);
    min-width: 242px;
    padding: 8px;
    border-color: var(--boutique-line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--boutique-paper) 96%, transparent);
    box-shadow: 0 24px 52px rgba(46, 27, 34, .15);
  }

  .nav-dropdown-link:hover,
  .nav-dropdown-sub-toggle:hover,
  .nav-dropdown-sublink:hover {
    background: var(--boutique-blush);
    color: var(--boutique-wine);
  }

  .brand {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    order: initial;
    margin-left: 0;
    gap: 10px;
    direction: ltr;
  }

  .brand-logo {
    width: 43px;
    height: 43px;
    padding: 4px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(64, 35, 44, .11);
  }

  .brand-name-group { line-height: 1.2; }
  .brand-name { font-size: 16px; font-weight: 800; }
  .brand-name-fa { font-size: 10px; letter-spacing: 0; }

  /* Avoid a crowded desktop pill before collapsing into the mobile menu. */
  @media (max-width: 1110px) {
    .nav-link { padding-inline: 8px; }
    .nav-link[href="/faq"],
    .nav-link[href="/shein-order"] { display: none; }
  }
}

/* ---------- Hero: split editorial layout instead of text on top of a full bleed image ---------- */
.hero {
  isolation: isolate;
  background: var(--boutique-blush);
}

.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(32vw, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--boutique-wine-rgb), .13);
  border-radius: 50%;
  inset-inline-start: -12%;
  top: -44%;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--boutique-wine);
  inset-inline-start: 45%;
  bottom: 22%;
  box-shadow: 17px 29px 0 -3px rgba(var(--boutique-wine-rgb), .42), -24px 58px 0 -4px rgba(var(--boutique-wine-rgb), .32);
  pointer-events: none;
}

.hero-media {
  background: #d9c9c4;
  box-shadow: 0 28px 60px rgba(62, 35, 41, .16);
}

.hero-media::after {
  background: linear-gradient(90deg, rgba(26, 18, 19, .06), rgba(26, 18, 19, .15));
}

.hero-slide-bg { filter: blur(28px) brightness(.76) saturate(.9); }
.hero-img { object-position: 26% center; }

.hero-content {
  color: var(--boutique-ink);
}

.hero-collection-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--boutique-muted);
  font-family: ui-serif, Georgia, serif;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  direction: ltr;
}

.hero-collection-label span {
  width: 26px;
  height: 1px;
  background: var(--boutique-wine);
}

.hero-eyebrow {
  color: var(--boutique-wine);
  opacity: 1;
  font-size: 13px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 9px;
}

.hero-title {
  color: var(--boutique-ink);
  letter-spacing: -.8px;
}

.hero-subtitle {
  color: var(--boutique-muted);
  opacity: 1;
  line-height: 2;
}

.hero-subtitle + .hero-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 430px;
  padding: 7px 10px;
  border: 1px solid var(--boutique-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--boutique-paper) 65%, transparent);
  color: var(--boutique-muted);
  font-size: 10.5px;
  line-height: 1.65;
}

.hero-subtitle + .hero-subtitle::before {
  content: '\f48b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--boutique-wine);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 18px;
}

.hero .btn-primary {
  min-height: 46px;
  padding-inline: 20px;
  border: 1px solid var(--boutique-ink);
  background: var(--boutique-ink);
  box-shadow: 0 12px 28px rgba(34, 25, 26, .18);
}

.hero .btn-primary:hover {
  background: var(--boutique-wine);
  border-color: var(--boutique-wine);
  box-shadow: 0 15px 34px rgba(var(--boutique-wine-rgb), .25);
}

.hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--boutique-ink);
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 1px solid var(--boutique-ink);
  padding-bottom: 3px;
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.hero-text-link:hover {
  color: var(--boutique-wine);
  border-color: var(--boutique-wine);
  transform: translateX(-3px);
}

.hero-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 24px;
  color: var(--boutique-muted);
  font-size: 10.5px;
}

.hero-assurance span { display: inline-flex; align-items: center; gap: 5px; }
.hero-assurance i { color: var(--boutique-wine); font-size: 10px; }

.hero-nav {
  width: 38px;
  height: 38px;
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .74);
  color: var(--boutique-ink);
  box-shadow: 0 8px 20px rgba(39, 23, 27, .12);
}
.hero-nav:hover { background: #fff; }
.hero-nav svg { width: 17px; height: 17px; }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }
.hero-dots { bottom: 18px; }
.hero-dot { width: 24px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .6); }
.hero-dot.active { background: #fff; transform: none; }

@media (min-width: 861px) {
  .hero {
    width: min(1420px, calc(100% - 32px));
    min-height: clamp(520px, 47vw, 645px);
    margin: 22px auto 52px;
    border: 1px solid var(--boutique-line);
    border-radius: 30px;
    overflow: hidden;
  }

  .hero-media {
    inset: 14px 48.5% 14px 0;
    border-radius: 0 24px 24px 0;
  }

  .hero-content {
    width: 50%;
    max-width: none;
    margin: 0;
    padding: clamp(54px, 6vw, 88px) clamp(42px, 6vw, 104px) clamp(48px, 5vw, 74px) clamp(24px, 3vw, 58px);
  }

  .hero-title {
    max-width: 510px;
    font-size: clamp(35px, 3.35vw, 57px);
    line-height: 1.23;
    margin-bottom: 16px;
  }

  .hero-subtitle { max-width: 470px; font-size: 14px; margin-bottom: 10px; }
  .hero-media .hero-placeholder { background: linear-gradient(135deg, #e7d4d2, #cbb7bc); color: var(--boutique-wine); }
}

/* ---------- Mobile: the menu becomes a proper sheet, the hero keeps its hierarchy ---------- */
@media (max-width: 860px) {
  :root { --header-h: 64px; }

  .site-header.glass {
    background: color-mix(in srgb, var(--boutique-paper) 94%, transparent);
    border: 0;
    border-bottom: 1px solid var(--boutique-line);
    box-shadow: 0 5px 20px rgba(48, 31, 37, .05);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
  }

  .header-inner { direction: ltr; gap: 5px; }
  .header-actions { order: 1; gap: 0; }
  .main-nav { order: 2; }
  .brand { order: 3; margin-left: auto; gap: 7px; }
  .brand-logo { width: 35px; height: 35px; padding: 3px; border-radius: 11px; }
  .brand-name { font-size: 13px; }
  .brand-name-fa { font-size: 8.5px; }
  .header-actions .icon-btn { width: 31px; height: 31px; color: var(--boutique-ink); }
  .header-actions .icon-btn:hover { color: var(--boutique-wine); background: var(--boutique-blush); }
  .cart-count { border-color: var(--boutique-paper); background: var(--boutique-wine); }
  body.has-banner .main-nav { top: calc(var(--header-h) + var(--banner-h-mobile, 34px)); }

  .main-nav {
    top: var(--header-h);
    left: 10px;
    right: 10px;
    border: 1px solid var(--boutique-line);
    border-radius: 0 0 21px 21px;
    background: color-mix(in srgb, var(--boutique-paper) 98%, transparent);
    box-shadow: 0 20px 45px rgba(50, 28, 35, .16);
    max-height: calc(100vh - var(--header-h) - 10px);
  }
  .main-nav ul { padding: 11px 18px 18px; }
  .main-nav a { padding: 11px 0; color: var(--boutique-ink); border-bottom-color: var(--boutique-line); }
  .main-nav .nav-link:hover,
  .main-nav .nav-link.active { color: var(--boutique-wine); background: transparent; }

  .hero {
    min-height: 566px;
    margin: 0 10px 34px;
    border: 1px solid var(--boutique-line);
    border-top: 0;
    border-radius: 0 0 26px 26px;
    overflow: hidden;
  }
  .hero-media { inset: 0; border-radius: inherit; }
  /* The supplied landscape campaign images place the model toward the right.
     On a narrow portrait crop, keep that subject in frame instead of showing
     the empty studio area from the left of the original image. */
  .hero-img { object-position: 76% center; }
  .hero-media::after {
    background: linear-gradient(0deg, rgba(23, 15, 18, .78) 0%, rgba(23, 15, 18, .3) 52%, rgba(23, 15, 18, .04) 100%);
  }
  .hero-content {
    align-self: flex-end;
    padding: 0 22px 69px;
    color: #fff;
  }
  .hero::before { display: none; }
  .hero::after { inset-inline-start: auto; inset-inline-end: 15%; bottom: 29%; background: rgba(255,255,255,.7); box-shadow: 17px 29px 0 -3px rgba(255,255,255,.35), -24px 58px 0 -4px rgba(255,255,255,.24); }
  .hero-collection-label { color: rgba(255,255,255,.75); font-size: 9px; }
  .hero-collection-label span { background: rgba(255,255,255,.75); }
  .hero-eyebrow { color: #ffd2df; font-size: 11px; margin-top: 10px; margin-bottom: 6px; }
  .hero-title { color: #fff; font-size: clamp(25px, 7.4vw, 35px); line-height: 1.27; margin-bottom: 9px; }
  .hero-subtitle { color: rgba(255,255,255,.87); max-width: 365px; font-size: 11.5px; line-height: 1.9; margin-bottom: 8px; }
  .hero-subtitle + .hero-subtitle { display: none; }
  .hero-actions { gap: 14px; margin-top: 15px; }
  .hero .btn-primary { min-height: 41px; padding-inline: 16px; background: #fff; border-color: #fff; color: var(--boutique-ink); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
  .hero .btn-primary:hover { background: #fff5f7; border-color: #fff5f7; color: var(--boutique-wine); }
  .hero-text-link { color: #fff; border-color: rgba(255,255,255,.75); font-size: 11.5px; }
  .hero-assurance { display: none; }
  .hero-nav { width: 30px; height: 30px; bottom: 17px; transform: none; background: rgba(255,255,255,.82); color: var(--boutique-ink); }
  .hero-nav:active { transform: scale(.92); }
  .hero-prev { left: 16px; }
  .hero-next { right: 16px; }
  .hero-dots { bottom: 29px; }
  .hero-dot { width: 16px; height: 2px; }
}

@media (max-width: 420px) {
  .brand-name-fa { display: none; }
  .hero { min-height: 515px; }
  .hero-content { padding-inline: 17px; padding-bottom: 63px; }
  .hero-title { font-size: 25px; }
  .hero-text-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-text-link:hover { transform: none; }
}


/* Karly mobile fixes v2 (additive) */
/* Load after layout.css and boutique-redesign.css. CSS only; no checkout logic. */
:root { --boutique-banner-height: var(--banner-h, 40px); }

/* One offset owns the fixed header and its reserved space. */
body {
  --boutique-banner-offset: 0px;
  padding-top: calc(var(--header-h) + var(--boutique-banner-offset));
}
body.has-banner {
  --boutique-banner-offset: var(--boutique-banner-height);
  padding-top: calc(var(--header-h) + var(--boutique-banner-offset));
}
.site-header,
body.has-banner .site-header {
  position: fixed;
  top: var(--boutique-banner-offset);
  inset-inline: 0;
  width: 100%;
}
.search-panel {
  top: calc(var(--header-h) + var(--boutique-banner-offset));
}

/* Keep the current banner content and dimensions; soften its presentation. */
.top-banner {
  background: var(--boutique-blush, #f6ece8);
  color: var(--boutique-wine, #9f3558);
  border-bottom: 1px solid var(--boutique-line, #eadfda);
}
.top-banner-link,
.top-banner-close { color: inherit; }
.top-banner-close { opacity: .85; }

@media (max-width: 600px) {
  :root { --boutique-banner-height: var(--banner-h-mobile, 34px); }
}
@media (max-width: 380px) {
  :root { --boutique-banner-height: var(--banner-h-mobile-sm, 30px); }
}

@media (max-width: 860px) {
  .site-header.glass {
    background: var(--boutique-paper, #fffdfb);
  }

  /* Anchor to the header itself, including when a banner is dismissed. */
  .site-header .main-nav,
  body.has-banner .site-header .main-nav {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 10px;
    right: 10px;
    background: var(--boutique-paper, #fffdfb);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-height: calc(100vh - var(--header-h) - var(--boutique-banner-offset) - 10px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--header-h) - var(--boutique-banner-offset) - 10px - env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS uses a readable font size without focus zoom. No viewport lock. */
  #otp-phone-input,
  #otp-code-input,
  #checkout-phone-input,
  #checkout-code-input,
  .checkout-page input:not([type="radio"]):not([type="checkbox"]),
  .checkout-page textarea,
  .checkout-page select {
    font-size: 16px;
    line-height: 1.5;
    min-height: 46px;
    min-width: 0;
    max-width: 100%;
  }
  #otp-phone-input,
  #otp-code-input,
  #checkout-phone-input,
  #checkout-code-input,
  .checkout-page input[type="tel"] {
    direction: ltr;
    text-align: left;
  }
}



/* Karly mobile fixes v2 (additive) */
/* Liquid glass navigation and a real catalogue rail. Existing links, prices,
   filters, cart and product renderers retain their original behavior. */
body { background: #f8f7f5; }
.site-header.glass {
  background: rgba(250,249,247,.74);
  border-bottom: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 30px rgba(58,44,47,.045);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
@media (min-width:861px) {
  .site-header .main-nav > ul, .site-header .header-actions {
    background: linear-gradient(155deg,rgba(255,255,255,.93),rgba(255,255,255,.42));
    border: 1px solid rgba(255,255,255,.95);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(118,105,109,.1),0 8px 24px rgba(60,43,48,.075);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
  .site-header .nav-link { font-size:12px; padding:10px 13px; }
  .hero { min-height:440px; height:clamp(440px,37vw,560px); margin-bottom:0; }
  .hero-title { font-size:clamp(29px,3.1vw,46px); }
  .hero-subtitle { font-size:14px; }
  .hero-content { padding:32px 44px; }
}
.new-arrivals.karly-rack {
  padding:42px 0 32px;
  background:radial-gradient(ellipse at 80% 10%,rgba(233,218,225,.44),transparent 60%);
}
.karly-rack > .container { max-width:1500px; }
.karly-rack .section-heading { margin-bottom:13px; text-align:center; }
.karly-rack .section-heading h2 { color:var(--boutique-ink); font-size:clamp(25px,2.7vw,36px); letter-spacing:-.7px; }
.karly-rack .section-eyebrow { color:var(--boutique-wine); font-size:11px; }
.karly-rack .section-heading p:last-child { color:var(--boutique-muted); font-size:13px; }
.karly-rack .new-arrivals-track {
  gap:22px;
  padding:48px 10px 24px;
  background:linear-gradient(180deg,#eee9e6,#a99a96 45%,#fff 70%,#d6cdca);
  background-size:100% 5px;
  background-position:0 17px;
  background-repeat:no-repeat;
  scroll-padding-inline:10px;
  scrollbar-color:#b9a7ac transparent;
  scroll-snap-type:x mandatory;
}
.karly-rack .new-arrivals-track .product-card {
  position:relative;
  flex:0 0 clamp(210px,20vw,278px);
  overflow:visible;
  border:1px solid rgba(255,255,255,.95);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.58));
  box-shadow:inset 0 1px 0 #fff,0 12px 28px rgba(50,35,40,.08);
  content-visibility:visible;
}
.karly-rack .product-card::before {
  content:''; position:absolute; width:43px; height:34px; top:-35px; left:calc(50% - 21.5px);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 36' fill='none' stroke='%23958683' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7c0-5 8-5 8 0 0 3-5 4-5 7v3L3 29c-2 1-1 4 1 4h38c2 0 3-3 1-4L23 17'/%3E%3C/svg%3E");
  pointer-events:none;
}
.karly-rack .product-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(50,35,40,.12); }
.karly-rack .product-media { aspect-ratio:3/4; border-radius:21px 21px 14px 14px; overflow:hidden; }
.karly-rack .product-info { padding:15px 14px; }
.karly-rack .product-title { font-size:15px; }
.karly-rack .product-price { font-size:13px; }
.karly-rack .btn { border-radius:12px; }
@media (max-width:860px) {
  .site-header.glass { background:rgba(255,253,251,.94); }
  .site-header .main-nav { background:var(--boutique-paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .new-arrivals.karly-rack { padding:30px 0 20px; }
  .karly-rack .new-arrivals-track { gap:16px; padding-inline:4px; }
  .karly-rack .new-arrivals-track .product-card { flex-basis:218px; }
  .karly-rack .product-info { padding:13px; }
}
[data-theme='dark'] body { background:#211d21; }
[data-theme='dark'] .site-header.glass { background:rgba(34,28,32,.9); border-color:#51464e; }
[data-theme='dark'] .site-header .main-nav > ul,
[data-theme='dark'] .site-header .header-actions,
[data-theme='dark'] .karly-rack .product-card { background:linear-gradient(145deg,#41363d,#292329); border-color:#65555d; }
[data-theme='dark'] .karly-rack .product-info { color:#fff8f5; }
@media(prefers-reduced-motion:reduce) { .karly-rack .product-card { transition:none; } }